← All videos

1280×720 · 16:9 landscape HyperFrames HyperFrames + GSAP

Run log

ModelClaude (agent build)
Renderer / stackHyperFrames + GSAP
Iterations to final2
Render time20s (final render)
Format1280×720 · 16:9 landscape
Published2026-10-25

What broke (and the fix)

  • Iteration 1: connector arrows overlapped the card edges by a few pixels (text_occluded) — arrows narrowed to the gap width and centred; iteration 2 passed and shipped.
Original prompt Tested

Service explainer — HyperFrames prompt (four-tap booking flow, drawn icons)

by MotionPrompts (own run)
ExplainerProduct UI

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second service explainer, HyperFrames 1280x720 at 30fps. House style: near-black #0a0a0a background, panels #141414, borders #2a2a2a, text #ffffff/#c9c9c9, ONE accent #ff5c1a, Arial/Helvetica bold, no webfonts. Four cards walk the whole service — search, compare, book, stay — each with a hand-drawn SVG icon, connected by arrows; a sample-rate chip and CTA close. Fictional service; the rate is labelled a sample in the film. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0.0-0.9s — Kicker "SERVICE EXPLAINER — StayNest". Title: "A TRIP, BOOKED IN FOUR TAPS". 0.9-3.6s — Cards land left to right with arrows between: 1 SEARCH (magnifier icon; "City, dates, and a budget slider. Nothing else.") → 2 COMPARE (two price bars; "Total prices side by side — fees included") → 3 BOOK (calendar; "Pick your nights, pay once") → 4 STAY (house; "Check-in code in the app"). 3.6-9.0s — The closing row fades in under the cards: an outline chip "STAYS FROM $89/NIGHT (SAMPLE RATE)" and the accent pill "PLAN THE TRIP". Fine print: fictional service. </structure> <build> One paused GSAP timeline. Icons are small inline SVGs (stroke circle + handle for search; rects for compare; calendar grid; house polygon) in the accent — no icon fonts, no emoji. Cards are fixed width with a 32px gap; arrows are narrow centred elements inside those gaps. </build> <gotchas> - Iteration 1: the arrows were wide enough to touch the card edges and the inspector flagged them occluded — size arrows to the gap (28px in a 32px gap) and centre them. Fixed in iteration 2. - "Fees included" is a claim: in adaptations, only promise what the service actually does. - Four cards is the ceiling for this layout at 1280 wide; a fifth step needs the process-explainer rail instead. </gotchas> Before you finish: step through the timeline at five points and fix anything that overlaps, clips the frame, or drifts off the beat grid.

Use this prompt

Tested after the arrow fix (iteration 2). The card row suits any 4-step service; for 5+ steps use the travelling-marker rail (process explainer pattern).

Related videos

AI summariser explainer — Remotion prompt (long doc in, summary out)
AI summariser explainer — Remotion prompt (long doc in, summary out)
Remotion·16:9 landscape Tested
Product UI morph — one shape, many states
Product UI morph — one shape, many states
HyperFrames·Square Tested
Remotion explainer prompt — document to vertical video
Remotion explainer prompt — document to vertical video
Remotion·Vertical Tested
Remotion testimonial prompt — reviews carousel
Remotion testimonial prompt — reviews carousel
Remotion·Square Tested

Submit a video

Know a motion video made with an AI coding model? Send the post. Rules: