Bilal Labs / Videos with Claude Opus 5.5
Kinetic typography explainer: what's new in Opus 5.5
Big type, one fact per beat, a progress bar. Every number comes from Anthropic's announcement and the model docs, and the source line stays on screen. It is one HTML file with a GSAP timeline, no assets.
The prompt
Make a 16-second 1920×1080 kinetic typography video with HyperFrames: "What's new in Claude Opus 5.5". One fact per ~2 s beat, big bold numbers, warm off-white background, one accent color, a progress bar along the bottom and a source line. Facts only from anthropic.com/claude-opus-5-5 and platform.claude.com: released Sep 22 2026; $4 / $20 per million input/output tokens (20% less than Opus 5); cache reads $0.20 (60% less); ~40% cheaper on typical workloads; 30%+ faster output; 1M context, 128K max output; adaptive thinking always on, default effort medium; model ID claude-opus-5-5. Run hyperframes check, then render.
This is the prompt to reproduce it. I built it inside a longer multi-task agent session, so there is no per-recipe token count to report.
What the agent did
- Checked the model ID and prices on platform.claude.com and the announcement on anthropic.com.
- Scaffolded with npx hyperframes init, then wrote seven timed beats as .clip elements in index.html.
- Animated each beat with one paused GSAP timeline (kicker, number, sub-line) plus a 16 s progress bar.
- Ran npx hyperframes check: lint, layout and contrast (24/24 WCAG AA) passed.
- Rendered with npx hyperframes render --quality delivery.
Measured numbers
- Render time: 11.0 s on an M4 MacBook (hardware GPU)
- Output: 1920×1080, 30 fps, H.264, 16.0 s, 2.2 MB
- Source: 1 HTML file, ~90 lines, no assets
- Tokens / cost: Not measured: built inside a larger agent session with no per-recipe counter
Notes and pitfalls
- Don't set a CSS transform on an element you also animate with GSAP; HyperFrames lint flags it (gsap_css_transform_conflict). Use fromTo.
- Render length is the root data-duration, not the timeline length.
- Put the source on screen. A stats video without one is easy to dismiss.
Source
Prompt, source and notes: opus-video-recipes/kinetic-typography-explainer. Framework choice: HyperFrames vs Remotion vs Manim.
FAQ
Can I swap in my own facts?
Yes. Each beat is a div with a kicker, a big line and a sub-line. Edit the text and the data-start times; the animation loop picks them up.
Why 16 seconds?
Seven beats at about 2.2 s each is enough to read the big number and the sub-line once. Shorter beats felt like a blink.
Does it need a GPU?
No. HyperFrames renders in headless Chrome and encodes with FFmpeg. On my M4 it used the hardware GPU path; software rendering works but is slower.