A vertical app demo can pass on one phone and fail on another. The status bar covers a label, a camera cutout masks a control, or the bottom gesture area competes with the call to action. Motion makes the collision harder to see because the critical element appears only briefly.
Safe-inset proof should come before stylistic approval. A three-device ladder—compact flat display, central cutout, and wider top island—tests whether every critical cue remains visible across plausible overlays. The result is an inset pack, not a claim that one screenshot fits all devices.
Mark Critical Interface Zones before Adding Motion
List the elements the demo must communicate: control, state change, confirmation, error, and next action. Mark when each appears and whether the viewer must read, tap, or simply notice it. Decorative details can enter risky regions; task evidence cannot.
Rank cues as critical, supporting, or decorative. A confirmation that proves the task completed needs the largest safety margin. A background flourish can disappear without changing the demo’s meaning. This ranking determines what moves when space gets tight.
Include subtitles, badges, legal text, and touch indicators in the zone map. They often arrive after the visual edit and create collisions the original motion review never saw.
Build Three Conservative Overlays for Device Insets
Create transparent overlays for the top system region, camera or island interruption, side margins, bottom gesture area, and platform controls. Use current channel specifications or the product team’s supported devices rather than guessing one universal pixel value.
Give each overlay an ID and orientation. Review portrait masters, crops, and embedded player controls separately. A social platform may add its own caption and reaction layers beyond the hardware inset.
Measure clear space from the obstruction edge, not from the full canvas. Store normalized coordinates so overlays can be reproduced after resizing. A screenshot of an overlay is not enough to audit later exports.
Use the most conservative supported system-bar state, including expanded indicators where relevant. A clean marketing mockup can understate the region occupied during real use.
Freeze the Evidence-Bearing Interface State
Capture the real approved interface state or a clearly labeled concept. Keep exact copy, control labels, and legal text outside generated frames. Record which functionality exists and which transition is illustrative.
Freeze font size, line count, icon shape, control order, and result state. Localized text may grow, so reserve space using the longest verified locale or create locale-specific layouts rather than shrinking important copy.
Keep pointer or touch indicators as live overlay elements. A generated finger can cover a control, tap the wrong place, or imply gesture support that the product lacks.
Do not ask a video model to invent a working interface. A plausible toggle or confirmation is not proof that the product behaves that way. Use blank state regions around the bounded motion plate and recombine verified UI later.
| Overlay | Main collision risk | Pass condition |
| Compact display | Reduced vertical room | Control and result both visible |
| Central cutout | Top-center obstruction | No label crosses cutout |
| Wide top island | Large interrupted header | Title has alternate safe line |
| Platform chrome | Bottom and side controls | Call to action remains clear |
Animate One Bounded Action Step by Step
First select one interface state change, such as expanding a panel or moving focus from an object to its result. Second prepare a clean source frame with generous safe space. Third write one motion instruction. Fourth review the generated plate before restoring UI layers.
Keep Camera and Interface Motion Separate
A camera push changes the apparent safe region while interface motion changes element position. Test one first. If both move together, a collision can be blamed on the wrong cause and a repair may introduce a new one.
Lock the canvas and camera for the first functional pass. Once the interface path passes, add a subtle camera treatment and rerun every overlay. This sequencing preserves a known-good baseline.
Keep rotation and perspective distortion out of exact UI regions. They can make text and tap targets look polished while misrepresenting the real layout. Use such effects only on surrounding atmosphere.
MakeShot.ai supports text-to-video and image-to-video routes through a browser workspace. An AI Video Generator can make a surrounding motion candidate, but the verified interface and overlay ladder remain the approval evidence.
See also: How Mobile App Development Services Help Businesses Stay Competitive
Protect the Critical Cue through the Transition
Trace the control, focus indicator, result, and next action frame by frame. A cue that passes at the opening and settled states can still travel under a cutout in the middle. Keep a minimum dwell after each important state so viewers can interpret it.
Record the frame of minimum clearance for each cue and overlay. If two critical cues trade places, inspect both paths; the most crowded moment may differ by device shape.
Check error states as carefully as success. A red banner or retry control often appears near system chrome and may be the part users most need to understand.
Reject generated pseudo-text, altered icons, nonexistent controls, or new system chrome. Replace exact UI from the approved source rather than retouching a plausible imitation.
Run the Three-Device Inset Ladder
Place each overlay over the final composite and watch at delivery size. Record collision, near-collision, legibility, dwell time, and obstruction by platform controls. Repeat for poster frame, subtitles, and any localized copy.
Test with captions on and off, player controls visible, and common browser bars expanded. These are different states, not one average safe area. Keep separate verdicts so a pass in the clean player does not hide a failure in real playback.
Review on actual supported devices when available. The ladder is a preflight tool; a physical screen reveals scaling, rounded corners, brightness, and platform overlays that a desktop canvas may miss.
Inspect the Worst Frame Not the Best
Capture the smallest clearance for each critical element. The demo passes only when the worst frame remains readable across all supported overlays. Average clearance can hide one decisive collision.
Use a near-collision threshold, not only overlap. Text or controls pressed against a cutout can feel broken and become unreadable under compression. Move the full path rather than patching one frame.
Check the approved poster separately. It should show a stable interface state and avoid system obstructions without relying on the video to explain a cropped label.
Check automatic crops and previews. A platform may center-crop the master or select a transition frame as the poster. Supply deliberate derivatives and an approved thumbnail.
Pair Motion with a Reduced-Movement Version
Create a calmer version when the channel or audience needs it. Preserve the same state sequence and evidence, using shorter paths or cuts instead of removing the task logic. Captions and a static alternative should remain available.
Compare the standard and reduced versions with the same task checklist. A calmer cut fails if it removes the confirmation or next action. Accessibility changes presentation, not the evidence contract.
Keep flashing, rapid scale changes, and unnecessary parallax out of critical UI. Motion should direct attention to the state change rather than compete with it.
A second AI Video Generator candidate follows a documented inset or motion failure, not a desire for more spectacle. Save the MakeShot.ai version with the overlay verdict.
Know the Limits of Device Overlay Proof
Three overlays catch common risks; they do not cover every handset, accessibility setting, browser bar, keyboard, or platform experiment. Validate on the product’s supported devices and treat the ladder as a conservative editorial gate, not a compatibility certification.
Archive the source UI, motion plate, inset overlays, worst-frame captures, reduced-motion version, and exports. MakeShot.ai can move the visual layer, while the inset pack proves where that movement remains safe enough to publish.
