One template, every platform: a vertical layout that survives TikTok, Reels and Shorts
This update was drafted on a schedule by the AI I build with, from real project notes — part of the vibecoding experiment this blog documents.
So I already wrote about where the app covers your ad — the whole problem of TikTok and Reels and Shorts each parking their UI in a different place, so a caption that looks fine in the player gets a username stamped across it the second you post. That post was the diagnosis. This one is what I actually did about it, because the diagnosis doesn't survive contact with ClipForge.
Here's why. When I'm making one clip by hand, "design to the middle and check it on a phone" is fine advice. I can eyeball it. I can nudge the hook up forty pixels and look again. But ClipForge isn't one clip. It's a machine that cuts and posts short-form at volume, across accounts, on a schedule, while I'm asleep. There is no me in the loop to nudge anything. So "just check it on a phone" isn't a method there — it's a thing that can't happen. The safe zone has to be a fact the render already knows, not a judgment somebody makes at the end.
So I stopped treating the safe area as a vibe and turned it into the template.
The idea is boring and that's the point. The canvas is 1080 by 1920. Instead of placing text wherever it looks good in the full frame, I defined one rectangle inside that frame — margins off every edge — and made a rule: nothing that has to be read is allowed outside that box. Hook text, captions, the logo, the CTA, whatever. If it carries meaning, it lives in the box. The background, the footage, the motion — that fills the whole 1080×1920. The readable layer is the only thing that's constrained.
The margins aren't symmetric, because the apps aren't. The bottom is the worst offender — that's where the caption, the handle, the sound, the whole left-side action rail live — so the bottom margin is the fattest by a lot. The top needs clearance too, less than the bottom but more than you'd guess. The right edge has to dodge the like/comment/share stack. The left is the kindest. So the box is shoved up and slightly left of dead center, and it's smaller than people expect the first time they see it drawn on the frame. That's the whole trick: the safe box is ugly and cramped and you design inside it anyway.
TODO: the exact margin values ClipForge uses (top / bottom / left / right, in px on the 1080×1920 canvas) aren't something I'm going to publish as hard numbers here — the platforms move their UI and any figure I print goes stale. The method is what carries: measure the current worst-case overlay on each app, take the union, add a little, and bake that in.
The part that matters for a volume engine is where the box lives. It's not a guideline in a doc that a human is supposed to remember. It's in the render template. Every clip the engine produces gets composited against the same mask. The text layer literally can't be positioned outside it, because the template doesn't expose that space as somewhere you can put readable things. You don't get to drift, because drifting isn't an available move.
That flips the failure mode in a way I care about. When a layout is a convention — "remember to keep captions clear of the bottom" — it holds right up until the one time it doesn't, and at volume there is always a time it doesn't. One clip out of a batch has a slightly longer hook, it wraps to a third line, the third line pushes into the danger zone, nobody's watching, it posts. Now multiply that by every day forever. A convention that's right 95% of the time, run thousands of times, is just a slow drip of broken posts. Encoding it into the template takes the number to zero for that whole class of mistake — not because the engine got smarter, but because the bad position stopped existing.
There's a cost and I'll name it. Designing to the middle looks more cautious. You've got this big beautiful vertical frame and you're using the polite center of it. The edges feel wasted. For a while I fought that and wanted to let hero shots bleed text to the corners because it looked bolder in my editor. But "bolder in my editor" is the exact trap — the editor is the one place the UI isn't. The frame I'm designing in is a lie about the frame the viewer sees. The template is me refusing to believe the lie on every single render.
One honest caveat, same as last time: I can't promise the box is right on every app on every phone, because the overlays aren't published as a spec and they shift. What I can promise is that when they shift, I change one mask in one place and the entire output moves with it. That's the real win of pushing the rule down into the template instead of keeping it in my head. The safe zone used to be something I had to be awake and careful to honor. Now it's something the machine can't violate even when I'm not there — which, for a thing designed to run without me, is the only version that counts.