Write HTML. Render video. Diff the bytes.
HyperFrames turns any HTML document into a deterministic, frame-perfect MP4. The docs are organized around what you're trying to do, not the shape of the API surface. Pick a lane.
0.00s
Start here
Land your first deterministic render.
Ten minutes from scratch to a frame-hashed MP4. No SDKs, no editor — just HTML you can git-diff.
Quickstart
Author, preview, and render your first composition.
5 min→ Render a 5-second clip from a 3-line HTML doc
Your first video
Step-by-step build of a real, shippable intro card.
10 min→ Ship a personalized intro card with title + accent color
Concepts in one page
Composition, timing, adapters — the whole model, no jargon dump.
4 min→ Read the entire mental model in a single screen
Install the CLI
npm, pnpm, bun, Docker — pick your toolchain.
2 min→ Run hyperframes on macOS, Linux, Windows, or Docker
Build a recipe
Ship something concrete this afternoon.
Each recipe opens with a live demo, ends with knobs you can twist. Pick the one closest to what you need to ship.
Tour the playground
All 33 community examples, grouped by use case, each linked back to a live editor.
browse→ Find a starting template that matches your shot
Programmatic video from data
One HTML template + N rows of JSON → N rendered MP4s.
20 min→ Render a CSV row into a personalized clip
Shorts, Reels, TikTok
9:16 + 1:1 + 16:9 from the same source. CSS handles the layout shifts.
15 min→ Export one composition to three social aspect ratios
Agent-authored video
An LLM writes the HTML, HyperFrames renders the bytes — and self-corrects on lint errors.
25 min→ Wire a write → lint → render loop with structured JSON
CI & batch rendering
Stateless Docker workers, frame caching, GitHub Actions.
20 min→ Render in parallel from a CI runner
Edit video without an NLE
Trim, splice, cross-fade, burn-in captions — all from one HTML doc.
15 min→ Cut and rejoin clips with data-attrs only
Reference
When you know what you're looking for.
Every flag, every data-attribute, every exit code — searchable, anchored, JSON-mode noted.
CLI reference
All 9 commands with their flags, examples, and JSON output shapes.
HTML schema
Every data-* attribute the renderer reads.
Composition data attributes
Track-level timing, fades, loops, audio mix.
Frame adapters
GSAP, Lottie, Three.js, Rive, WAAPI — pinning third-party libs to HF's clock.
Deterministic rendering
Why two renders of the same composition produce byte-identical bytes.
Command overview
Short overview of preview, render, lint, doctor, inspect, upgrade.
Prefer to skim?
Read Concepts in one page for the entire mental model in under five minutes, then jump straight to a working example.