Storyboard · Doc → Animation · hyperframes-render

A paragraph → a narrated animated explainer

Paste a dense paragraph. Get back a 45-second animated explainer where every word on screen is crisp — because the animation is authored as HTML and composited to video, the one thing AI video generation can't do legibly.

Render
hyperframes
Format
9:16 · 45s
On-screen text
pixel-crisp
Wall time
~6 min
Cost
~$0.80

In → out

The source paragraph"HTTPS secures web traffic. The client and server perform a TLS handshake to negotiate a shared session key; thereafter all application data is encrypted in transit, defeating passive eavesdroppers. A certificate signed by a trusted CA authenticates the server's identity, preventing man-in-the-middle impersonation."

Same facts — restructured into a hook, the problem, the handshake, encryption, trust, and a payoff. Narrated, scored, every label legible.

Six timed beats

0:00
Title
0:07
The problem
0:14
Handshake
0:22
Encryption
0:30
Trust / cert
0:38
Payoff

How it was made

paragraph → LLM structures beats + script LLM authors a timed HTML page hyperframes-render → 45s MP4 gemini-tts narration sonilo-t2m bed ffmpeg mix

Honest verdict

✓ What held

  • Every on-screen word is crisp — title, the "password" leak, the scrambled ciphertext, the https:// URL bar — because it's HTML, not generated pixels.
  • Re-editable: change a word in the page and re-render; localize by swapping the narration language — visuals are language-agnostic.
  • Fast + cheap (~$0.80) and nothing hangs — deterministic compositing, not a video-gen gamble.

⚠ What to watch

  • The animation must auto-play on load — hyperframes records a fixed window, so drive scenes on a setTimeout timeline (nothing click-gated).
  • One narration pass tracks the beats only roughly — keep beats long enough to absorb drift, or place narration per beat.
  • Equation-heavy explainers are fiddly in HTML — use the sibling manim-render cap (true MathTex) for those.
The playbook ↓ Download the explainer