Swipe to Reveal: Built for Vertical Feeds
Before a vertical film goes anywhere, count what the interface will eat. Inside a 1080 by 1920 frame the top strip takes 12–18% of screen height and the bottom takes 20–28%, leaving roughly the middle 54–68% untouched. Swipe travel runs 60–80% of screen height, the gesture finishes in 0.35–0.6 seconds, the piece runs 10.4 seconds, and the opening frame carries two elements at most. Three-second retention of 45–65% is the bar. Every figure here is blocked for before the camera is set; applied afterwards it doubles the cost and the cleanup.
01The only clean band is the middle 54–68%
1080 by 1920 is a clean 9:16 canvas; the overlays are the problem. Status bar, title and account line claim 12–18% of screen height at the top, while caption, buttons and progress claim 20–28% at the bottom. Budget for the upper bound at both ends and what remains is a 54–68% band in the middle. Subject, swipe origin and reveal all live inside it.
Pixels are easier to work with. On a 1920-tall frame, reserve 345 at the top and 540 at the bottom, which leaves 1035 pixels of hard safe area. Keep caption baselines 60 pixels inside that edge, or a two-line title will cross it. Finish a version, then scroll it on a real handset — a desktop preview never draws these layers.
02Travel 60–80% of screen height, gesture 0.35–0.6 seconds
The swipe is the only interaction in the piece, so travel length decides whether it reads as intent or accident. Under 60% and the thumb hits bottom before the viewer realizes they are driving; over 80% and the wrist has to reposition, breaking the motion. Keep the gesture between 0.35 and 0.6 seconds, which works out to roughly 1.2–2.2 screen heights per second.
Start the finger a third of the way up from the bottom of the safe band and release just above the lower overlay, with 80 pixels to spare. Add no bounce: bounce reads as an unfinished swipe and people repeat it twice. Add no inertia either; inertia hands the landing point to the system and the reveal can stop halfway. The frame must be at its destination the instant the finger lifts.
03Two elements in frame one, legible within half a second
Frame one has a single job: say whether this is worth continuing. Two elements carry it — a case silhouette and a line of no more than eight characters. Add a third and attention splits; nothing survives that first half second. Keep enough luminance separation that the shapes still resolve at 30% scale, or the whole thing turns into a grey rectangle in the feed.
Put no motion in frame one. Motion at thumbnail size collapses into blur and hurts recognition; start movement at second two, once the object has been identified. If text sits on the first frame, size it by screen height at 4% or more. Below that it smears on a 5-inch display, and no amount of contrast tweaking rescues it.
0410.4 seconds, 45–65% retention at three, reveal at 2.5
The 10.4-second runtime maps onto swipe, stop, look: 0 to 2.5 seconds builds the question, 2.5 to 6 covers the gesture and the reveal, 6 to 10.4 pays off with the result and a second detail. Push the reveal past three seconds and retention sags, because the swipe cue needs time to be understood; pull it before two and the viewer is moved along before the starting state registered.
Retention of 45–65% at three seconds is the diagnostic line. Below 45%, inspect the first frame before touching the content: more than two elements, subject outside the safe band, type under 4% of screen height. Above 65% with weak completion means the hook works and the back half drags — cut 1.5 seconds from everything after second six and run it again.
05Five checks before delivery: overlays, travel, first frame, length, source
Run five checks in order. One: is the subject entirely inside the middle 54–68% band? Two: does travel land between 60–80% of height with the gesture inside 0.35–0.6 seconds? Three: does frame one hold two elements or fewer? Four: does the cut run near 10.4 seconds with the reveal at 2.5? Five: was the vertical version shot native or oversampled, rather than cropped from a wide frame?
Check five is the one people skip. A 1080 by 1920 deliverable needs source at that size or 1.5x oversampled; cropping a landscape frame throws away 60% of the width and softens every case edge. Watch the export on a phone and look specifically at the strips the interface will cover. If anything important sits there, re-block it, because nothing will move out of the way for you.
| Frame | 1080×1920 (9:16) |
|---|---|
| Top overlay | 12–18% of screen height |
| Bottom overlay | 20–28% of screen height |
| Safe band | middle 54–68% |
| Swipe travel | 60–80% of screen height |
| Gesture duration | 0.35–0.6 s |
| First-frame elements | 2 or fewer |
| 3-second retention | 45–65% |
FAQ
Should the safe area assume 12% or 18%?
Assume 18%, the upper bound. Different handsets and titles eat different heights, and building to the ceiling survives a change of device; building to the floor means one long title covers the subject, which costs a full re-cut against giving up that 6% up front.
Can the swipe travel a full screen height?
Not advisable. Full-height travel forces the wrist to reposition, stretches the gesture past 0.8 seconds and breaks continuity, and the release point lands inside the lower overlay. Hold at 60–80% and you keep reserve at both ends.
Two elements seems thin for the first frame.
Frame one exists to stop the scroll, not to explain. A second element carrying one line of eight characters or fewer is enough to justify continuing; everything else belongs after the 2.5-second reveal, when the viewer has already decided to stay.
Is 45% three-second retention actually good?
45–65% is the sane window. Under 45% rework the opening frame; over 65% check completion as well. High completion means the piece works, low completion means the back half drags, so trim what follows second six and test again rather than staring at one number.