Exploring HyperFrames: HTML to MP4, Done Right
July 20, 2026 · blog
HyperFrames is an open-source framework for rendering HTML compositions into video. Deterministic, fast, and agent-native. I've been exploring it as an alternative to React-based video tools, and here's what makes it compelling.
What HyperFrames Offers
- Rendering engine: Puppeteer + FFmpeg, frame-by-frame seeking, parallel workers
- Determinism contract: No wall-clock, no unseeded random, no render-time fetches, Docker mode for cross-platform parity
- Animation adapters: GSAP, CSS, Web Animations API — all seekable via unified interface
- Skills system: 19 domain-specific workflows for AI agents (product videos, explainers, PR demos, caption overlays, talking-head recuts)
- Media catalog: Centralized BGM, SFX, images, logos. Auto-generates via TTS/music/image models if missing
- CLI:
npx hyperframes render composition.html --output video.mp4 - Registry blocks: Community-contributed reusable components via
hyperframes add - Figma integration: Design tokens + components → motion via REST/CLI + MCP
Numbers
| Metric | Value |
|---|---|
| Render time (4-min video) | 20–30s |
| Compared to Remotion | 10–20x faster |
| Frame accuracy | Pixel-identical across runs |
| Supported animation libs | GSAP, CSS, WAAPI, Lottie, Three.js, Anime.js |
| Agent skills | 19 workflows |
| Monorepo packages | 22+ |
The Architecture in One Paragraph
A composition is an HTML file with data-start and data-duration attributes on elements. Animations are paused and registered globally. The renderer loads the HTML once, seeks all animations to frame N's timestamp, captures pixels via Chrome's atomic frame API, and pipes to FFmpeg. No component re-mounting, no DOM structure changes between frames, no forward simulation.
What Stands Out
Determinism as a feature. Once you guarantee same input → same output, everything else follows: caching, parallelism, CI diffing, distributed rendering. It's a constraint that enables more than it restricts.
Skills over documentation. Agents don't read docs — they execute workflows. Encoding framework knowledge into invocable skills is more effective than any amount of README. This is a smart design decision for the AI-agent era.
HTML as composition format. The browser is already a deterministic layout engine. HyperFrames just removes the non-deterministic parts (async, randomness, wall-clock) and adds seek semantics. Elegant reuse of existing infrastructure.
The right abstraction for the job. React's model (reactive state → UI) is perfect for interactive apps. It's wrong for batch rendering where you need "jump to state at time T" without playing forward. HyperFrames chose a timeline model over a reconciler — the correct primitive for this domain.
Worth Checking Out
If you're building video pipelines or want AI agents to generate videos, HyperFrames is worth exploring: github.com/nicepkg/hyperframes. It's open-source and actively maintained.