Vertical Video Design
Rules for designing vertical video that survives mobile platform chrome, auto-play muted, and small-screen compression.
Core principle
The middle 70% is yours. The outer 30% belongs to the platform. Every vertical platform overlays its own UI on your video - captions, like/share buttons, handle + description, progress bar. If your content lives in that zone, it gets covered.
When to use
Invoke this skill when:
- Designing any 9:16, 4:5, or 1:1 video for TikTok, Instagram Reels, YouTube Shorts, LinkedIn, Facebook Reels
- Deciding where to place captions, headers, CTAs, or branding
- Building Remotion compositions for vertical output
- Choosing aspect ratio for a new video project
- Reviewing why a video "looks cut off on mobile" or "the caption covers my face"
Quick reference
For the actual rules, load the relevant file:
- rules/safe-zones.md - Per-platform exclusion zones. What pixels get covered by the platform's own UI. Start here for every layout.
- rules/captions.md - Caption sizing, font, placement, timing, max chars per line. How to make burned-in subtitles readable on small screens.
- rules/hooks.md - First-second rules for muted autoplay. Why text hooks fail and what works instead.
- rules/effects.md - What survives mobile H.264 compression and what falls apart. Fine details, gradients, motion blur, etc.
- rules/aspect-ratios.md - When to pick 9:16 vs 4:5 vs 1:1. Cross-posting strategies.
- rules/platform-cheatsheet.md - One-page table: dimensions, max duration, safe zone px, file size limits per platform.
The 60-second checklist
Before exporting any vertical video, verify:
- Safe zone respected - no critical content in top 12% or bottom 20% of the frame
- Captions burn-in - text is large enough to read at phone size, placed in the safe middle
- Opens with motion - first frame is not a static title card (muted autoplay will skip it)
- Subject centered or 2/3 rule - not cropped off by a different-aspect platform resize
- Aspect locked - exporting 9:16 (1080x1920) for TikTok/Reels/Shorts, or 4:5 (1080x1350) for LinkedIn feed video
- Audio normalized - watching muted is default, but audio matters when it plays; use
dynaudnorm to even out levels
- Thumbnail-safe first frame - many platforms use frame 0 as the thumbnail; make it compelling
Common mistakes
| Mistake |
Why it's bad |
Fix |
| Captions at very bottom |
Platform progress bar covers them |
Move captions to bottom third, not last 10% |
| Logo/branding at top-left |
Platform handle + description overlays this area |
Use top 0-5% only for subtle branding, or center-top |
| Small 24px text |
Unreadable on phone screens |
Minimum 36px for captions, 48+ preferred |
| Static opening |
Muted autoplay doesn't catch attention |
Start with motion: cursor, zoom, object moving |
| Single wide text line |
Overflows safe zone horizontally |
Max 30-35 chars per line, wrap to 2-3 lines |
| Exporting at 720p |
Platforms re-encode; start sharp |
Export 1080p+ always; platforms downscale better than upscale |
1---2name: vertical-video-design3description: Platform-aware design rules for vertical video (Reels, Shorts, TikTok, LinkedIn mobile). Covers safe zones, caption sizing/placement, aspect ratios, thumb-stopper hooks, effects that survive mobile compression, and per-platform cheatsheets. Use when building 9:16 / 4:5 / 1:1 video for social media - any time you need to decide where to place text, how big captions should be, what aspect ratio to export, or which effects survive mobile playback.4---56# Vertical Video Design78Rules for designing vertical video that survives mobile platform chrome, auto-play muted, and small-screen compression.910## Core principle1112**The middle 70% is yours. The outer 30% belongs to the platform.** Every vertical platform overlays its own UI on your video - captions, like/share buttons, handle + description, progress bar. If your content lives in that zone, it gets covered.1314## When to use1516Invoke this skill when:1718- Designing any 9:16, 4:5, or 1:1 video for TikTok, Instagram Reels, YouTube Shorts, LinkedIn, Facebook Reels19- Deciding where to place captions, headers, CTAs, or branding20- Building Remotion compositions for vertical output21- Choosing aspect ratio for a new video project22- Reviewing why a video "looks cut off on mobile" or "the caption covers my face"2324## Quick reference2526For the actual rules, load the relevant file:2728- [rules/safe-zones.md](rules/safe-zones.md) - Per-platform exclusion zones. What pixels get covered by the platform's own UI. Start here for every layout.29- [rules/captions.md](rules/captions.md) - Caption sizing, font, placement, timing, max chars per line. How to make burned-in subtitles readable on small screens.30- [rules/hooks.md](rules/hooks.md) - First-second rules for muted autoplay. Why text hooks fail and what works instead.31- [rules/effects.md](rules/effects.md) - What survives mobile H.264 compression and what falls apart. Fine details, gradients, motion blur, etc.32- [rules/aspect-ratios.md](rules/aspect-ratios.md) - When to pick 9:16 vs 4:5 vs 1:1. Cross-posting strategies.33- [rules/platform-cheatsheet.md](rules/platform-cheatsheet.md) - One-page table: dimensions, max duration, safe zone px, file size limits per platform.3435## The 60-second checklist3637Before exporting any vertical video, verify:38391. **Safe zone respected** - no critical content in top 12% or bottom 20% of the frame402. **Captions burn-in** - text is large enough to read at phone size, placed in the safe middle413. **Opens with motion** - first frame is not a static title card (muted autoplay will skip it)424. **Subject centered or 2/3 rule** - not cropped off by a different-aspect platform resize435. **Aspect locked** - exporting 9:16 (1080x1920) for TikTok/Reels/Shorts, or 4:5 (1080x1350) for LinkedIn feed video446. **Audio normalized** - watching muted is default, but audio matters when it plays; use `dynaudnorm` to even out levels457. **Thumbnail-safe first frame** - many platforms use frame 0 as the thumbnail; make it compelling4647## Common mistakes4849| Mistake | Why it's bad | Fix |50|---|---|---|51| Captions at very bottom | Platform progress bar covers them | Move captions to bottom third, not last 10% |52| Logo/branding at top-left | Platform handle + description overlays this area | Use top 0-5% only for subtle branding, or center-top |53| Small 24px text | Unreadable on phone screens | Minimum 36px for captions, 48+ preferred |54| Static opening | Muted autoplay doesn't catch attention | Start with motion: cursor, zoom, object moving |55| Single wide text line | Overflows safe zone horizontally | Max 30-35 chars per line, wrap to 2-3 lines |56| Exporting at 720p | Platforms re-encode; start sharp | Export 1080p+ always; platforms downscale better than upscale |
portel-dev