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 promptTested
Service explainer — HyperFrames prompt (four-tap booking flow, drawn icons)
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.
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).