HyperFrames: write video in HTML and let AI agents render the MP4
TL;DR
HyperFrames (heygen-com/hyperframes, Apache-2.0) is a “video as code” framework: you — or an AI agent — write compositions in HTML/CSS, and headless Chrome plus FFmpeg render frame-accurate MP4s. It ships 21 skills for Claude Code, Cursor, Codex and others.
Making video is usually manual work in timeline software, hard to automate or version. HyperFrames (heygen-com/hyperframes, Apache-2.0 licence) takes a "video as code" approach: you, or an AI agent, write a composition in HTML/CSS, then headless Chrome and FFmpeg render it to MP4 frame-accurately. The project ships 21 skills for Claude Code, Cursor, Codex… to build videos through a defined workflow.
Notable points
| Feature | Meaning |
|---|---|
| HTML/CSS as the source | LLMs write HTML very well, so agents can compose video directly |
| Deterministic rendering | The same source always produces the same video, easy to review and version in git |
| Ready-made skills | /product-launch-video, /pr-to-video (turns a GitHub PR into a video), /music-to-video… |
| Licence | Apache-2.0, no per-render fees |
Compared with Remotion
| Remotion | HyperFrames | |
|---|---|---|
| Authoring | React-first | HTML/CSS-first |
| Rendering | Headless Chrome + FFmpeg | Headless Chrome + FFmpeg |
| Migration | — | Has a skill to convert Remotion compositions to HyperFrames |
Install and use
npx skills add heygen-com/hyperframes # requires Node.js ≥ 22Once the skills are installed, you describe the video you want (content, length, style) and the agent creates the composition, previews it, adjusts it and renders it.
Why "video as code" is appealing
- Reviewable: a video change is a git diff that colleagues can look at and comment on like code.
- Parameterised: one template can generate hundreds of variants (customer names, figures, languages).
- Automatable: hook it into CI to produce a video with every release.
- AI-friendly: agents work best with structured text and can look at the result to fix it.
Limits
- This is motion design in code (text, shapes, composited media), not AI-generated footage.
- Rendering video costs CPU/time; long videos need infrastructure planning.
- Design quality still depends on your brief and your eye.
How to apply it
- Product teams: generate release-note or feature-demo videos automatically with every release.
- Marketing: produce video variants from one parameterised template.
- Dev: start with a 15-second video before attempting anything more complex.