▶ Short-Form Video · Movie-grade Explainer

HOW A BLACK HOLE WORKS the hybrid reel

Cinematic deep-space b-roll for the feel, a pixel-perfect timed-HTML overlay for the facts. The Schwarzschild radius isn't melted into a frame — it's vector-crisp text, on a CSS timeline, over the whole reel. Hook → analogy → 3-step mechanism → payoff, narrated over an instrumental bed. Native 9:16, 40s.

format
9:16 vertical · 1080×1920
runtime
40s · VO + music
b-roll
Ken-Burns stills fallback
overlay
hyperframes-render
topic
How a Black Hole Works
The hybrid that fixes mushy AI text. No text-to-video model can render a legible equation — it melts "Schwarzschild" into glyph soup and bends the integral sign. So this playbook never asks it to. The AI generates the cinematic b-roll; a single agent-authored HTML document — driven by CSS @keyframes — composites the title, a progress bar, and per-beat caption cards over the top. The pixels carry mood; the HTML carries truth.

Finished reel — the stitched explainer

Cinematic deep-space base (Ken-Burns slow-zoom on 9:16 keyframes) + a crisp hyperframes-render overlay · VO + ducked music bed · 40s.

Two layers, one reel — why the hybrid works

Every frame is two things stacked: an AI-generated cinematic plate, and a deterministic HTML overlay. Each does the job the other can't.

Layer 1 · AI b-roll

The feel

Cinematic deep-space keyframes from generate_project (on-policy science subjects sidestep fal's content filter), brought to life with slow motion. Carries the mood, the scale, the awe — what AI video does brilliantly. On this reel the motion came from the Ken-Burns stills fallback (ffmpeg zoompan), because fal's video tier was flaky that day. Honest, reliable, exactly 9:16.

Layer 2 · hyperframes-render

The facts

One agent-authored HTML document composited over the whole base reel via hyperframes-render: a persistent top title, a CSS progress bar that fills across the 40s, and per-beat caption cards (title + key term / equation) that fade in and out at their timestamps. Vector-crisp text and equations that AI video can never render legibly — the rₛ = 2GM / c² is real, not melted.

How it was made — the 6-step recipe

01 · SCRIPT
Hook → analogy → mechanism → payoff
One script serves double duty: the VO narration AND the on-screen beat captions. Five beats: the hook, the spacetime-funnel analogy, the event horizon, spaghettification, the time-dilation payoff.
02 · B-ROLL
generate_project · 9:16 deep-space
One cinematic keyframe per beat, aspect_ratio:"9:16", a cinematic-deep-space style. Image-led, on-policy science subjects — they sidestep fal's content filter.
03 · MOTION
ltx-q-i2v · or Ken-Burns fallback
Slow cinematic push via ltx-q-i2v — or, when fal's video tier is flaky, ffmpeg zoompan slow-zoom → 8s clips. This reel used the Ken-Burns fallback.
04 · AUDIO
chatterbox-tts + music
An authoritative explainer VO from chatterbox-tts over an instrumental bed from music, mixed with the VO above a ducked bed.
05 · STITCH
ffmpeg-concat
Concat the clips into a base reel and mux the audio. This is the plate the overlay sits on.
06 · OVERLAY
hyperframes-render · duration 40
One timed HTML doc over the whole base reel. 40s exceeds create_media's 15s cap, so the cap is called directly with duration:40. The lead-in trim is automatic.

The overlay HTML — deterministic text on a CSS timeline

The whole hybrid layer is one HTML file. Caption cards are staggered by animation-delay so each lands on its beat; the progress bar is a single 40s linear fill. Pixel-perfect, every time — never baked into a generated image.

/* per-beat caption card — staggered to land on each beat */
.beat { position:absolute; bottom:200px; opacity:0;
        background:rgba(10,12,20,.72); border:1px solid rgba(124,204,255,.4);
        border-radius:16px; padding:28px 32px; }
.beat .term { font-family:'JetBrains Mono'; font-size:34px; color:#7cf; }
@keyframes show { 0%{opacity:0} 10%,90%{opacity:1} 100%{opacity:0} }
.b1 { animation:show 8s  0s forwards; }   /* 0–8s   */
.b3 { animation:show 8s 16s forwards; }   /* 16–24s */
<div class="beat b3"><h2>The Event Horizon</h2>
  <div class="term">rₛ = 2GM / c²</div></div>

Pipeline trace — the cap chain this reel ran

Wave 1 — beat keyframes 5 × generate_project aspect=9:16, cinematic deep-space, on-policy prompts 5/5 done
Wave 2 — motion (Ken-Burns fallback — fal video tier flaky) 5 × ffmpeg zoompan slow-zoom on each 9:16 still 5 × 8s clips
Wave 3 — audio + stitch chatterbox-tts explainer VO music ambient cinematic bed ffmpeg-audio-mix (VO over ducked bed) ffmpeg-concat clips + muxed audio 40s base reel
Wave 4 — the hybrid layer hyperframes-render timed HTML overlay, duration:40 (cap called directly — exceeds 15s create_media cap) final reel

Tested verdict — honest, not inflated

~94% Ken-Burns base · hyperframes-render overlay crisp text · flaky video tier

The overlay is the win. The title, progress bar, and per-beat equation cards land pixel-perfect on the CSS timeline — the Schwarzschild radius is legible in a way no text-to-video model can produce. The hybrid does exactly what it promises: feel from the pixels, truth from the HTML.

The base used the Ken-Burns stills fallback, not live i2v — fal's video tier was rejecting dark prompts (422) and running slow that day. That's the honest mitigation, not a regression: ffmpeg zoompan is reliable and exactly 9:16. When the video tier is healthy, ltx-q-i2v (or kling / pixverse / cosmos-3-i2v) gives true camera motion.

This is the right ceiling for the format: a cinematic explainer where the rigor lives in deterministic HTML, and the awe lives in the AI b-roll. Verify the facts and equations before narrating — the pipeline won't fact-check for you.

Reproduce this — the playbook is open

Built from the movie-grade-explainer playbook — point it at any concept ("how mRNA vaccines work", "how a transformer attends") and it writes the hook → analogy → 3-step mechanism → payoff, renders 9:16 cinematic b-roll, and lays a pixel-perfect timed-HTML overlay with the key terms and equations on top. Keep the equation in the HTML, never in the image.