← All videos

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

Run log

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

What broke (and the fix)

  • Iteration 1: the base-case pill text overflowed its box (wrapped to two lines at the set width) — pill widened, font reduced, nowrap set; iteration 2 passed and shipped.
Original prompt Tested

Recursion explainer — HyperFrames prompt (nested boxes + unwind stack)

by MotionPrompts (own run)
ExplainerDiagrams

Prompt

Banned list —Beat grid —Build method —Self-review —
<direction> A 9-second math explainer that teaches recursion visually, 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. Nested boxes dive down to the base case; a return stack unwinds back up to the answer. No code editor, no voiceover needed — the diagram is the teacher. No gradients, no stock photos, no real brand logos, no lorem ipsum, no purple/blue tech gradient. </direction> <structure> 0.0-0.7s — Kicker "MATH EXPLAINER — RECURSION". Title: "TOTAL(4) — a function that calls itself". 0.7-3.0s — Bordered boxes nest in one by one, outer to inner, each labelled "TOTAL(k) = k +": TOTAL(4) contains TOTAL(4−1), down to TOTAL(1). 3.0-3.9s — The core lands in accent: "TOTAL(0) = 0", with the caption "BASE CASE — AT ZERO, THE CALLS STOP." 3.9-6.8s — A return stack builds on the right, one row at a time, the active row highlighted: TOTAL(1) = 1, TOTAL(2) = 3, TOTAL(3) = 6, TOTAL(4) = 10. 6.8-9.0s — The final answer pops big: "= 10". Footer: "EVERY RECURSION NEEDS A BASE CASE — OR IT NEVER STOPS". </structure> <build> One paused GSAP timeline. Nested boxes are absolutely positioned bordered divs with semi-transparent fills so the nesting reads through the stack; labels sit top-left inside each box. Return rows highlight via class toggles added at timeline positions. </build> <gotchas> - The core label must fit its pill on ONE line — widen the pill or shrink the font; a wrapped label overflows the box (caught by text_box_overflow in iteration 1; fixed by widening). - Keep the arithmetic honest and checkable: 1, 3, 6, 10 are triangular numbers; any 4 you substitute must recompute the whole stack. - The descent and the unwind must be visually distinct phases (boxes vs stack) or beginners conflate them. </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 core-pill fix (iteration 2). Swap in factorial or Fibonacci by recomputing the stack rows — the two-phase diagram (dive, unwind) carries any recursion.

Related videos

Remotion explainer prompt — document to vertical video
Remotion explainer prompt — document to vertical video
Remotion·Vertical Tested
HyperFrames faceless explainer prompt — narration-ready cards
HyperFrames faceless explainer prompt — narration-ready cards
HyperFrames·Landscape 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

Submit a video

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