HyperFrames: HTML-to-MP4 rendering with agent-friendly skills

What HyperFrames actually does

HyperFrames is a TypeScript framework that turns HTML scenes into MP4 videos. The README describes it as a way to write HTML, render video, and it is explicitly built for agents. The core idea is that instead of using a timeline editor, you describe a scene in web code, add animations that can be seeked, and then render the result to a deterministic MP4. The target user is an AI coding agent, such as Claude Code, Cursor, Gemini CLI, or Codex, that can install skills and execute commands. For a human developer, it offers a CLI and a playground, but the design centers on agent-driven workflows. The project is open source under Apache-2.0, and the repository is actively maintained, with v0.9.5, v0.9.6 and v0.9.7 published between 2026-11-02 and 2026-11-03. That activity suggests a fast-moving project, but also one where the API might shift.

The skill system as the entry point

The most distinctive part of HyperFrames is its 8 skills. The README describes a router skill, `/hyperframes`, that acts as a capability map and intent layer. Each skill teaches the agent the production loop: plan, write HTML, wire animations, add media, lint, preview, and render. The installation is careful about scope. The interactive picker (`npx skills add heygen-com/hyperframes`) shows a Core Skills group, and `/figma`, `/slideshow`, `/remotion-to-hyperframes` and `/reverse-any-video` install on demand. For non-interactive runs, `npx hyperframes skills update` installs exactly the core set, avoiding the full 8-skill pull. This design is a deliberate attempt to keep agent installs lean, but it adds complexity: the skills.sh registry can lag `main` by hours, so the README recommends `npx hyperframes skills update` for the newest skills.

How rendering works: deterministic and seekable

The README says HyperFrames turns HTML, CSS, media, and 'seekable animations' into deterministic MP4 videos. The word 'deterministic' is key. It means the same input should produce the same output, which is essential for agents that need to iterate on a video without random variation. The mechanism is that animations are not time-based in the usual sense; they can be seeked, meaning you can jump to a specific time point and get a consistent frame. This is different from a video editor where playback is linear. The rendering core is likely a headless browser, since it renders HTML and CSS to video. The deterministic property is a real advantage for testing and for agents that need to correct mistakes.

Getting started: commands and configuration

The quick start is straightforward for an agent. You install the skills with `npx skills add heygen-com/hyperframes`, or for non-interactive use, `npx hyperframes skills update`. Then you prompt the agent with something like 'Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.' For a developer, the README mentions a CLI and a playground. The `npx hyperframes init` command installs the core set only when it is missing and never touches a skill you already have; `npx hyperframes skills update` refreshes them. There is also a Codex plugin packaging command: `bun run package:codex-plugin`, which writes `dist/hyperframes-plugin.zip` and fails if the archive exceeds Codex's 100 MB upload limit.

Where it is the wrong tool

HyperFrames is not a general-purpose video editor. If your video requires complex multi-track audio mixing, precise color grading, or non-linear editing with arbitrary clips, this is the wrong tool. The deterministic HTML rendering model also means that any visual effect that is hard to express in CSS or JavaScript is difficult to achieve. Another limitation is the dependency on an agent environment. The skills are designed for coding agents, but not all agents support the skills protocol. The README lists several that do, but if your agent does not, you would have to drive the CLI manually.

Alternatives: different approaches to HTML-to-video

The closest alternative is a headless browser screenshot tool like Puppeteer or Playwright, combined with a video encoder. That approach gives you full control over HTML rendering, but it does not provide a seekable animation model or a skill system. You would have to write your own frame capture and encoding loop, and you would lose the deterministic seek behavior unless you build it yourself. Another alternative is a dedicated motion graphics tool like Remotion, which renders React components to video using a similar HTML-to-video principle. Remotion is also deterministic and uses a browser, but it is a programming library, not an agent skill framework. The difference is that HyperFrames wraps the rendering in a skill-driven workflow, so an agent can plan and execute without writing custom code. Remotion requires you to write React components and manage a bundler. If you are a developer who wants to code videos directly, Remotion gives you more control. If you want an agent to do the work, HyperFrames is designed for that.

Maintenance, upgrades, and license

The project is at v0.9.x, and the release history shows several releases per day. That means the API and the skill set can change quickly. The README itself warns that the skills.sh registry can lag the main branch, so you need to use `npx hyperframes skills update` to get the latest skills. This is a maintenance cost: you must keep the skills updated to match the rendering core, or an agent might use an outdated workflow. The license is Apache-2.0, which permits commercial use, modification, and redistribution, with the requirement to include the original license and attribution. Before adopting, you should check the full license text for any notices.

Editorial conclusion

Adopt HyperFrames if you are an AI coding agent or a developer who wants to generate videos from HTML, CSS, and JavaScript without learning a video editor. Skip it if you need frame-accurate non-browser rendering, complex multi-track audio editing, or a stable API before 1.0. Before adopting, verify that the skill installer works in your agent's environment, test the deterministic seekable animation model on your target content, and check the current release notes for breaking changes, since the project is at v0.9.x and publishes releases several times a day.

Frequently asked questions

Official sources

1. Official README
2. Project repository
3. Release notes