9:16 Social Safe Areas & Layout Rules

A 9:16 video on Reels, TikTok or Shorts never plays alone. The app draws its own interface on top: a bar at the top, the account name, caption and audio line at the bottom, buttons down the right side. Whatever sits under them is hard to read or hidden. MotionMind's rule is simple: everything that matters stays between y 285 and y 1635.

The Numbers

On a 1080×1920 canvas:

The safe area is the 4:5 centre of the frame (1080×1350), the same part a 4:5 feed preview shows. Inside it:

• Keep 60 px from the left and right edges, and the CTA centred, clear of the buttons on the right.
• Text you need to read is at least 28 px (at 1080 wide); smaller text is unreadable on a phone.
• The CTA ends the video standing still and readable for at least 1.5 s.
• Frame 0 is the thumbnail on many players, so the title or key image is already on screen at 0 s.

In HyperFrames code, one box covers the first two rules:

/* 1080×1920: headline, UI and CTA live inside this box */
.safe {
  position: absolute;
  left: 60px;
  right: 60px;
  top: 285px;
  bottom: 285px; /* 1920 − 1635 */
}

Check It in MotionMind Studio

Every 9:16 version's run page has Show 4:5 safe zone (y 285–1635) under the player. It shades the top and bottom bands: pause on the CTA and look. In v1 above, the CTA and logo sit in the bottom band; v2 moves them inside.

Two things this overlay is for, because nothing else catches it:

• QA ✓ on the run page is about sound: loudness and true peak. A version can pass it with the CTA in the wrong place, as v1 does.
• npx hyperframes check looks for overlapping, clipped and too-small text, not for the platform zones. It didn't flag v1's CTA.

The agent keeps the safe area because the skill tells it to, and it checks the CTA before Gate 3. When you want a check without the Studio, draw the bands on one frame of the render:

V=projects/demo/launch-6s/runs/v1-steam
ffmpeg -ss 4.6 -i $V/video.mp4 -frames:v 1 \
  -vf "drawbox=y=0:w=iw:h=285:[email protected]:t=fill,drawbox=y=1635:w=iw:h=285:[email protected]:t=fill" \
  safe-check.png

Asking for It

Say the platform and the format in the brief, and the agent plans the layout for it:

Use the motionmind skill. A 15-second 9:16 reel for Instagram and TikTok;
keep everything that matters inside the 9:16 safe area.

If a version has something in the bands, say what and where:

Revise demo/launch-6s v1-steam: the CTA and logo sit under the platform caption.
Keep headline, UI and CTA within y 285–1635 and hold the CTA still for at least 1.5 s.

A layout fix like this, before approval, is normally made in the same version (the demo above made it a v2 only so the two can be compared side by side); see Managing Campaigns vs Version Branches for when it becomes a new one.