← All videos

1280×720 · Landscape HyperFrames HyperFrames + GSAP

Run log

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

What broke (and the fix)

  • First snapshot: all three headlines wrapped to two lines and the second line printed straight through the body text — the body sat at a fixed offset measured for a one-line headline. Moved the body block down, grew the card by 12px and tightened the body copy; the re-snapshot shows a clean gap on every card.
  • Check also emitted six nested-structure warnings (card content nested inside timeline elements) — the same pattern Wave 1 shipped with; rendering and snapshots are unaffected, so the structure stayed.
Original prompt Tested

HyperFrames faceless explainer prompt — narration-ready cards

by MotionPrompts (own run)
ExplainerDiagrams

Prompt

Banned list ✓Beat grid ✓Build method ✓Self-review ✓
<direction> A 9-second faceless explainer for HOW HABITS ACTUALLY FORM, 1280x720 landscape — no presenter, no stock faces, just cards a narration track can sit on. Three acts: three numbered headline cards (CUE / LOOP / LOCK), each with a headline and one body line; then a three-box diagram draws itself and connects; then ONE SMALL REPEAT, EVERY DAY. lands as the closer. Every act gets a clean full-screen beat so the voiceover never fights the visuals. Banned: presenter or avatar renders, stock-photo people, glows, gradients, walls of paragraph text, more than one accent. </direction> <structure> Act 1 (from 0.3s): three cards stagger in, each headline + body. Act 2 (from ~3.4s): diagram boxes draw, arrows connect them in reading order. Act 3 (from ~6.3s): diagram yields, closing line rises, small print states the card timings are narration beats. Hold to 9s. </structure> <build> One HyperFrames composition, seek-driven GSAP. Diagram connectors are SVG lines drawn with stroke-dashoffset measured via getTotalLength. Cards are fixed-height boxes — size them for the two-line headline case, not the one-line case. </build> <gotchas> First snapshot: the third card's two-line headline pushed its body text into the next card. Fixed by measuring the wrapped headline (two lines at the chosen size) and moving the body down + widening all three cards. Always lay out for the wrapped state. </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

A narration-ready faceless explainer skeleton: three headline cards with body lines, a diagram that draws itself card by card, and a closing line. Timed so a voiceover can sit on top — each card gets its own full beat.

Related videos

Remotion explainer prompt — document to vertical video
Remotion explainer prompt — document to vertical video
Remotion·Vertical Tested
30-second SaaS explainer — HyperFrames prompt (4-act grid, 9s demo cut included)
30-second SaaS explainer — HyperFrames prompt (4-act grid, 9s demo cut included)
HyperFrames·16:9 landscape Tested
How-it-works 3-step explainer — HTML/GSAP prompt (numbered steps + progress line)
How-it-works 3-step explainer — HTML/GSAP prompt (numbered steps + progress line)
HTML·16:9 landscape Tested
Recursion explainer — HyperFrames prompt (nested boxes + unwind stack)
Recursion explainer — HyperFrames prompt (nested boxes + unwind stack)
HyperFrames·16:9 landscape Tested