HyperFrames turns plain HTML into deterministic, frame-perfect video — every shadow, kerning pair and easing curve, baked into a file you can publish. The open-source HTML-to-video engine for developers and AI agents, runs in Node.js, Next.js, or any CI runner.
You don't need to install anything to try it. Open the playground in your browser and you're writing video in seconds.
The same tags you already know. Add a couple of attributes for timing. That's it.
A live preview shows your video as you type. Drag the timeline to scrub frame-by-frame.
One command. The same file appears on every machine, identical, every time.
no signup · no install · runs in your browser
This is a complete HyperFrames composition. It plays a video, shows a title for four seconds, and plays background music. That's really all there is to it.
<!-- a 5-second video -->
<div data-width="1920" data-height="1080">
<!-- a background clip -->
<video src="intro.mp4" data-duration="5"/>
<!-- a title appears at second 1 -->
<h1 data-start="1" data-duration="4">
Hello, friend.
</h1>
</div>No new language to learn. No special components. Just HTML.
Each one started as a single sentence to an AI. The agent wrote the HTML. HyperFrames turned it into frames. Nothing here was ever opened in a video editor.
“Make a slow Wes-Anderson-style title card about a long sunset road trip. Serif headline, mountains in silhouette, a sun that rises into frame.”
“Animate quarterly revenue from a CSV — bars rising, big numbers counting up, a subtle bass thump on each peak.”
“Show three of my product screens with a tap interaction, a soft drop-shadow, and a thirty-frame fade between each.”
“60-second trailer for our new SDK — kinetic type, particle field, a punchy ‘install now’ end card.”
Open the playground. Pick an example. Change a word. Watch the video update. It's really that quick.
Remotion is excellent if your team lives in React. After Effects is still the industry standard for one-off VFX. Motion Canvas shines for explanatory animation. HyperFrames is the right pick when you want plain HTML, byte-stable frames, and a render path an agent can drive.
| Feature | HyperFrames | Remotion | After Effects | Motion Canvas |
|---|---|---|---|---|
Pricing | Free / OSS | Free OSS + paid cloud | $23/mo subscription | Free / OSS |
Determinism Same input → byte-identical frames | Frame-pinned | Frame-pinned | GPU-dependent | |
Render speed | Fast (headless) | Fast (headless) | Slow (preview/export) | Fast (canvas) |
Language | HTML + CSS | React / TSX | GUI + ExtendScript | TypeScript |
Runs in CI | Desktop app | |||
AI-agent friendly LLM can write, render, and inspect output | Designed for it | Works, React-heavy | Imperative API | |
Browser preview | ||||
Open source | MIT | Source-available | Apache 2.0 |
Comparison reflects publicly documented behavior as of this writing. Each tool is excellent in its own lane — pick the one that fits your pipeline.
“We replaced a fragile Puppeteer pipeline with HyperFrames in an afternoon. Same outputs, deterministic frames, and our agents can drive it without a designer in the loop.”
“I publish three shorts a week from the same HTML template. It feels less like rendering video and more like deploying a website.”
“Our marketing team spins up bespoke launch videos in CI now. The fact that frames are reproducible means review actually finishes — no more 'render once more, the captions drifted'.”
No. The playground runs in your browser. If you want to render full-quality MP4 files locally, you'll install one small command-line tool — but you can do everything else without it.
Build an App Store preview video in HTML — phone-frame entrance, paginated screenshots, cross-faded captions — and render to deterministic MP4 at every required size.
Build an animated pull quote in HTML — oversized opening glyph, word-by-word typewriter, attribution rise — and render deterministic MP4s for editorial video pipelines.
Build an animated newsletter header in HTML, render it to a deterministic MP4, and ship a still PNG as the fallback for clients that strip video.
Really. Open the playground, you'll have something playing in under a minute.