HyperFrames, HeyGen's open-source framework, turns an HTML page into an MP4. You (or Claude Code) write HTML, CSS and a GSAP timeline, and it renders the video in headless Chrome. It's a good idea and it's very good at what it does.
I build AtomCut, so I'm biased. AtomCut comes at the same problem from the other side. It's a motion design studio in the browser, and an AI agent can drive it over MCP. If you like HyperFrames because Claude can make videos with it, read on. There are a few things AtomCut does that HTML can't do easily.
Everything below about HyperFrames comes from its README and its own HyperFrames vs Remotion guide, read on November 12, 2026.
The short version
| HyperFrames | AtomCut | |
|---|---|---|
| What it is | A framework: HTML in, MP4 out | An editor: canvas + timeline, with an agent |
| You author in | HTML, CSS, JS (GSAP, Lottie, Three.js…) | The editor by hand, or an agent over MCP, or both |
| Rendering | Headless Chrome seeks each frame, FFmpeg encodes | Its own canvas renderer (Canvas 2D + WebGL2), in the tab |
| Setup | Node 22+ and FFmpeg | Open a URL. No account, no install |
| Hand editing | Studio exists ("available, evolving"); their guide says structural changes still go through source | Everything: pen, brushes, keyframes, curve editor, multi-track timeline |
| 3D | Bring your own Three.js | Built-in 3D worlds: extrusion, materials, lights, cameras, modifiers |
| Effects | ~450 registry blocks, WebGL shader transitions | 36 stackable layer effects, color grading, tracking, chroma key |
| Physics | Not built in | Any layer, 2D and 3D, exact on every frame |
| AI | Agent skills for coding agents | Built-in agent (any model) + MCP for Claude Code, Codex, Cursor |
| License / price | Apache 2.0, free | Free up to 720p export, no watermark; HD and 4K are Pro |
1. You can edit what the agent made
With HyperFrames, the video is code. If the timing is a bit off or you want the title 40px higher, you go back to the source, or you ask the agent and hope.
In AtomCut, the agent builds real layers on a real timeline. When it's done, you grab the title and move it. You drag a keyframe or reshape a curve in the curve editor. Everything the agent did for one message is a single undo, and you can steer it mid-run.
This is the main difference. HyperFrames is for generating videos. AtomCut is for making them, with or without help.
2. Canvas, not the DOM
HyperFrames renders a web page. That's why it's flexible (anything a browser can show), and also why it has rules. Their guide says the timeline must be paused, with no wall-clock time and no unseeded randomness, and that it "breaks quietly" if you don't follow them.
AtomCut doesn't render HTML. Every frame is a function of the document and the time, painted by its own renderer. So:
- What you scrub in the editor is exactly what exports. There's no capture step.
- There's no headless Chrome, no FFmpeg and no Node to install. Export runs in the tab.
- Things the DOM is bad at are just layer properties: motion blur, glow that blooms like a lens, liquid glass, per-glyph text animation, boolean shape ops.
3. A real 3D world
HyperFrames supports Three.js, which means you write a Three.js scene.
AtomCut has 3D worlds built in. Any layer (text, an image, a video, a drawing) can stand in 3D space. Give it thickness and it becomes a real object: extruded letters with a bevel, or a sticker die-cut from an image's transparency. You get materials (gold, chrome, glass, neon, toon), lights, cameras you cut between on the timeline, Blender-style modifiers (bend, twist, array, lattice…), sculpting, depth of field and bloom. It exports glTF, USDZ, OBJ and STL too.
Physics works on any layer, 2D or 3D. Right-click › Physics › Falls and it drops and lands on its real outline. It's exact on every frame, so it scrubs and exports with nothing to bake. The cover of this post is a black hole that Claude built that way, through MCP. Here's how it was made.
4. Effects you stack and keyframe
HyperFrames has a big registry of ready-made blocks (about 450) and shader transitions. That's a real strength.
AtomCut's effects are cards you stack on any layer, and every field keyframes: drop shadow, glow, directional, zoom and spin blur, color grade, gradient map, lightning, boil, glitch, pixelate and more. There's also motion tracking, chroma key, adjustment layers and a node-based color page.
5. Same agent workflow, if you want it
If Claude Code is how you use HyperFrames, AtomCut works the same way:
claude mcp add -s user atomcut -- npx -y @atomcut/mcp@latest Open the editor, link it, and ask for a video. Every editor command is a tool. The agent also renders frames and looks at its own work before it says it's done. Codex, Gemini CLI and Cursor work too, and so does the built-in agent with any model, including a local one through Ollama.
Where HyperFrames is the better pick
- Open source. It's Apache 2.0 with no per-render fees. AtomCut isn't open source.
- Video as code. Git diffs, PR reviews and templates fed from data. If you're rendering 10,000 personalised videos from a CSV, use HyperFrames.
- Server-side rendering. Docker, Lambda and Cloud Run. AtomCut renders in the browser.
- Any web tech. If a browser can draw it, HyperFrames can film it.
And AtomCut's limits: the free tier exports up to 720p (HD and 4K are Pro), very heavy 4K video timelines are harder in a browser than in a native app, and it's a newer project.
Who should use which
- HyperFrames if the video is the output of a pipeline: generated, templated, rendered on a server.
- AtomCut if a person (you, a designer, a client) needs to touch the result, or you want 3D, physics, drawing and effects without writing a renderer.
Plenty of people will use both.
Try AtomCut: app.atomcut.net. It's free, needs no account, and works offline.
