Open Source HyperFrames: Render MP4 Video from HTML

A world where a single HTML file becomes a video

HeyGen's HyperFrames is an open-source framework that deterministically renders HTML/CSS/seekable animations straight to MP4 video. The same input produces the same frame, the same output video every time. As of September 8, 2026, the project has about 46k stars and 4,300 forks on GitHub, and is maintained by a core team of about 700 people.

The license is Apache 2.0, and requirements are Node.js 22 or higher and FFmpeg. The manufacturer HeyGen runs direct tests in the production environment, so if you're a developer thinking of adding programmatic video to your automation pipeline, you might want to take a look.

Why changing video creation to HTML creation matters

Traditional programmatic video generation centered around React-based components (Remotion) or universal template engines. HyperFrames came up with a single "plain HTML file" instead. If you add data attributes like data-start, data-duration, data-track-index to a <div>, a video timeline is created, and elements with class="clip" are recognized as clips.

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
  <audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

The biggest strength of this structure is that there is no build step. The index.html is reborn directly in the browser and can be previewed, so humans and agents can modify it freely.

The phrase "Agents already write HTML" is the project's core philosophy. That's why the catchphrase is 'Write HTML. Render video. Built for agents.'

Rendering is handled by headless Chrome and FFmpeg

The rendering pipeline consists of several packages. @hyperframes/engine opens a headless Chrome via Puppeteer and plays each frame, while @hyperframes/producer handles encoding and audio muxing via FFmpeg.

Seekable animations include GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI and more, and you can even plug in your own frame player. Because it uses a library that precisely seeks frame-by-frame, output is deterministic.

This makes it suitable for CI environments and large-scale automation. Rendering can be done locally or via Docker, and if you want to split it, you can distribute rendering via the @hyperframes/aws-lambda package to run at node scale in CI.

We've stacked 20 stacks so agents can make videos

Another reason HyperFrames is gaining attention is that it provides AI agent-friendly stacks as a shared resource. After installing with npx skills add heygen-com/hyperframes, an agent can respond to /hyperframes slash commands and perform complex tasks.

Workflows like product demo videos, onboarding/tutorial videos, GitHub PR reveal videos, motion graphics, marketing bit videos, and slide decks are already prepared. These skills work in coding agents that support Claude Code, Cursor, Gemini CLI, and Codex.

The skill lets agents autonomously follow the "video production pipeline": plan a concept, create valid HTML, add seekable animations, and proceed to render and preview without going through rendering.

Reusable templates and components can be installed easily via npx hyperframes add in the catalog.

How it differs from Remotion

HyperFrames was inspired by Remotion. Both use headless Chrome and FFmpeg for video rendering. The fundamental difference is the authoring model: Remotion is based on React components, while HyperFrames drops the barrier to plain HTML that both humans and agents can easily write.

Choosing HTML as a native format may seem like a small difference, but it's a big advantage for agent workflows. Plain HTML is more stable and easier to verify than JSX projects generated by agents.

Who's using it, and thresholds to try

HyperFrames is being used in HeyGen's internal production environment, and companies like tldraw and TanStack are listed in the ADOPTERS document.

There's also an interesting item called frame.md. It appears to be a component that re-implements the brand's web design system as a camera, where agents can hold tokens and automatically compose videos.

Before starting, there are a few good points to know. Node.js 22 or higher and FFmpeg are required, and for deterministic output, a headless browser source must be stable. Distributed rendering at scale requires building the AWS Lambda path, so a certain level of infrastructure expertise is needed.

If you're a developer looking to automate programmatic video into your pipeline, or an AI agent experimenting with video production, I recommend starting with HyperFrames' official documentation and GitHub repository.