A story starts as content
The author writes scenes, not animation scripts.
This page is written in MDX, but the motion system is derived from scene metadata and runtime helpers.
Each scene declares layout, transition preset, pinning, mascot state, and optional media hooks.
That keeps the writing model friendly to humans and LLMs, while the runtime stays responsible for animation details.
Scenes become runtime data
When the page hydrates, the runtime reads each scene from the DOM and builds a registry.
That registry feeds a GSAP timeline factory, mascot state updates, audio cue mapping, and the recording plan.
Registry flow
Parse data attributes from every scene section.
Normalize layout and transition names.
Create timeline plans and audio cues.
Expose a deterministic scroll plan for recording mode.
Math stays first-class
A confidence score
Structured explainers often need equations, so the MVP includes KaTeX rendering instead of hand-drawn screenshots.
Interactive islands stay isolated
Hydrate only what needs local state.
The surrounding page is static. The slider and dial below are interactive islands that only manage their own scene-level state.