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.
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.
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.