HyperFrames turns a plain HTML document into a deterministic, frame-by-frame MP4. The same stack you already ship to a browser — now compiled to video that renders identically in CI, on your laptop, or inside an agent loop.
<div data-width="1920" data-height="1080">
<video src="b.mp4" data-duration="6"/>
<h1 data-start="1" data-duration="4">
Frame-perfect.
</h1>
<audio src="m.mp3" data-loop/>
</div>Anything the browser can render — text, SVG, canvas, WebGL, Three.js, GSAP, Lottie, Rive — is renderable to video.
Anything you can git-diff — every change is reviewable.
Anything an agent can write — LLMs already produce solid HTML; HyperFrames meets them there.
No SDK lock-in. No framework cult tax. Just a CLI that turns any HTML file into a deterministic MP4.
<!-- comp.html -->
<div data-width="1920" data-height="1080">
<h1 data-start="0" data-duration="3">
Hello, frame 0.
</h1>
</div>PR-reviewable. CI-renderable. Git-blameable. You version your video the same way you version your app — branches, hashes, semver.
An HTML file with timing data attributes. Versioned in git, reviewable in PRs.
Loads the page once. Layout, fonts, styles, and animations settle as in any browser.
For each frame, time advances by 1/fps. Chrome emits a fresh frame on demand.
Raw frames stream into FFmpeg. H.264, ProRes, HEVC, VP9, AV1, or PNG sequence.
Hash-stable file. Identical across CI runners, OSes, and weeks apart.
| HyperFrames | Remotion | Motion Canvas | After Effects API | |
|---|---|---|---|---|
| Composition format | Plain HTML | React (.tsx) | TypeScript DSL | Binary project file |
| Open source | ✓ MIT | ✓ | ✓ | ✕ proprietary |
| Deterministic rendering | ✓ frame-hashed | ✓ | ✓ | ✕ |
| Agent-first CLI | ✓ flag-driven, JSON out | partial | ✕ | ✕ |
| Framework-agnostic | ✓ any web stack | ✕ React only | ✕ TS only | ✕ |
| Headless rendering | ✓ Chrome + FFmpeg | ✓ | ✓ | ✕ AE required |
| HDR / 4K / transparent | ✓ first-class | limited | limited | ✓ |
| Learning curve | If you know HTML | If you know React | Steeper | Steep |
Most video tools assume a human is dragging clips around. HyperFrames assumes a model is generating them. Every command is non-interactive, flag-driven, and emits structured JSON — so an agent can author, lint, render, and self-correct without a UI in the way.
Each package is independently versioned and consumable. Most users only ever touch the top-level hyperframes CLI.
The CLI. Author, lint, preview, render. Self-hosted by default.
Tiny runtime that orchestrates timing, tracks, and frame-level seeking inside the browser.
Headless-Chrome capture binding. Streams raw frames into FFmpeg.
Deterministic adapters for GSAP, Lottie, Three.js, Rive, anime.js, WAAPI.
Catalog blocks & components: caption styles, VFX, transitions, lower-thirds.
Pin to currentTime · honors timelines & ease.
Frame-accurate seek across .json + .lottie players.
AnimationMixer + Clock proxied to HF time.
Deterministic state machine ticks.
Pinned to HF clock — same seek semantics.
Element.animate() currentTime is driven by HF.
d3-timer shim renders at exact frame boundaries.
Ticker proxied · canvas surfaces captured.
animation-play-state + animation-delay sampled per frame.
setCurrentTime drives <animate> elements.
Manual flush hooks. Texture caches preserved.
Stateless redraw guaranteed per frame.
One template, ten thousand renders. Same composition, different copy, image, locale.
Ship a video with every release. CI renders it from MDX + screenshots automatically.
Snapshot D3, Chart.js, or Plotly to MP4 weekly. Email it. Embed it.
Author once in HTML. Re-render in a dozen languages with TTS narration.
TikTok, Reels, Shorts — write the format once, generate the variants with an agent.
Auditable video assets — every frame is reproducible from the source HTML.
Really. Open the playground, you'll have something playing in under a minute.