Social Media Safe Zone Checker
Ensure your titles, subtitles, and key graphics never get covered by TikTok, Instagram Reels, or YouTube Shorts buttons. Upload your media to test live in the simulated phone mockup.
Check your video safe zones! Keep all subtitles inside the green box 🚀 #motiondesign #compx
TikTok Safe Zone Specs
9:16 (1080 × 1920)TikTok 9:16 safe area. Keeps text clear of right-side action buttons and bottom captions.
Download a 1080 × 1920 transparent PNG guide overlay. Drag it directly on top of your timeline inside Adobe After Effects, Premiere Pro, or DaVinci Resolve to align your typography and motion graphics perfectly.
Always leave a safety buffer of at least 40px inside the green border. Different smartphone screens (iPhone Dynamic Island, curved Android displays) have subtle variance in aspect ratios.
How to Use the Safe Zone Checker in Your Video Workflow
Select Platform
Choose TikTok, Instagram Reels, or YouTube Shorts. Each platform has slightly different button layouts and margin heights.
Upload Video or Image
Drop your rendered MP4 or graphic frame directly into the phone frame to see if any subtitles or faces clash with app buttons.
Export PNG Grid for NLE
Click "Download 1080×1920 PNG Grid" and import it directly into After Effects or Premiere Pro as a top guideline layer.
Frequently Asked Questions
What are the exact safe zone dimensions for TikTok?
For a standard 1080 × 1920 px (9:16) canvas, the safe area is roughly 900 × 1270 px in the center. The top ~230px contains the Following/For You tabs and search icon, while the bottom ~420px contains the username, caption, and rotating sound disc. The right side has ~190px occupied by engagement buttons.
Why does Instagram Reels cut off parts of 9:16 videos on the feed?
When an Instagram Reel appears on the standard home feed, Instagram crops it to 4:5 aspect ratio (1080 × 1350 px). If you place text near the top or bottom of a 9:16 frame, feed viewers will not see it unless they tap into full-screen Reels mode.
Does this tool upload my video to any server?
No. All media rendering, video playback, and PNG guide generation happen 100% locally inside your web browser via HTML5 Blob and Canvas APIs. Your video files never touch an external server.
Build High-Retention Motion Graphics Faster
Use CompX Orbit inside Adobe After Effects to instantly animate subtitles, lower thirds, callouts, and kinetic typography.