Loading theme preference
Ilia Bukin
← Back to blog

HyperFrames: HeyGen open-sourced its HTML-to-MP4 engine, built for AI agents

Sep 8, 2026
video
open-source
AI agents
HeyGen

The top slot on GitHub Trending went this week to a repo whose pitch reads like a punchline: Write HTML. Render video. Built for agents.1 It is HyperFrames, the open-source rendering engine behind HeyGen, and the idea is simple: treat a video as an HTML file with a few timing attributes, then let an agent-friendly toolchain turn it into a deterministic MP42.

That is a different bet than the usual way of making video programmatically. The standard choice today is Remotion, where a composition is a React component that renders frames in a Node process. HyperFrames goes the other way: the source of truth is plain HTML that plays as-is in a browser, and rendering is added around it3. No build step, no proprietary timeline format, nothing new to learn. An index.html composition opens and plays on its own4.

How a video-as-HTML project works

A composition is an HTML document annotated with data-* attributes that describe timing and tracks. The README shows the shape of one5:

<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>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

The <video data-start data-duration> tracks and the GSAP timeline belong to the composition, and animation works through "seekable" frames. The renderer asks the headless Chrome page for each exact frame rather than trying to capture live playback6. That is what makes the determinism claim hold: the same input produces the same frames on every machine, so it is safe to run in CI and in automated pipelines7. FFmpeg does the final encode and the audio mix8.

Animation is not locked to GSAP. HyperFrames ships seekable adapters for GSAP, CSS keyframes, Lottie, Three.js, Anime.js, the Web Animations API, and your own runtimes, spread across a handful of npm packages9.

The agent angle

The "built for agents" part is not a slogan. HyperFrames ships 20 agent skills that teach Claude Code, Cursor, Gemini CLI, Codex, and similar tools the video-production loop: plan the video, write valid HTML, wire seekable animation, lint, preview, render10. The router skill /hyperframes sits on top and picks which creation workflow fits a "make me a..." request, choosing among a product launch video, faceless explainer, PR-to-video, slideshow, motion graphics, and more11. Install them with:

npx skills add heygen-com/hyperframes

or drive straight through the CLI:

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # browser preview with live reload
npx hyperframes render    # render to MP4

Requirements are Node.js 22+ and FFmpeg12.

There is also frame.md, a template that converts your web design tokens into frame-oriented guidance, so an agent has scale and layout rules instead of guessing13. A brand already has a design.md, and none of them were written for a camera; frame.md is the translation layer that fixes that.

State of play

The repo sits at roughly 46.9k stars and 4.4k forks as of this writing, under an Apache 2.0 license with no per-render fees14. It runs in production inside HeyGen, and the ADOPTERS.md file lists community teams including tldraw and TanStack15. Releases move quickly: v0.8.31 landed September 7 with media-lint checks and streaming previews, and v0.8.30 through v0.8.22 shipped earlier in the same week16.

Is it for you? If you already live in React, Remotion's component model is probably a better fit. If you want something a non-React agent or a plain HTML hand can reason about directly, and you care about reproducible renders, HyperFrames is the more honest answer to "why not just author the video as a web page." The trade is that rendering is still Chrome plus FFmpeg underneath, so it will not be lighter than what you already run. It makes the authoring model simpler, not the render3.

One thing to know before you clone: the repo uses Git LFS for its golden regression output.mp4 baselines, and contributors are told to install git-lfs first, or set GIT_LFS_SKIP_SMUDGE=1 if they only want source17.

  1. https://github.com/trending, which listed HyperFrames as the top repository on the day this was researched.
  2. https://github.com/heygen-com/hyperframes: "HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos."
  3. https://github.com/heygen-com/hyperframes, "HyperFrames vs Remotion" section: "Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily."
  4. https://github.com/heygen-com/hyperframes: "No build step: an index.html composition plays as-is and can be previewed directly in the browser."
  5. https://github.com/heygen-com/hyperframes, code sample under "How It Works."
  6. https://hyperframes.heygen.com/introduction: "Reliable render: HyperFrames asks the project for each exact frame instead of depending on live playback."
  7. https://github.com/heygen-com/hyperframes: "Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering."
  8. https://github.com/heygen-com/hyperframes: "The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg."
  9. https://github.com/heygen-com/hyperframes: "Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime."
  10. https://github.com/heygen-com/hyperframes: "HyperFrames ships 20 skills agents load on demand... They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills."
  11. https://github.com/heygen-com/hyperframes, router table listing /hyperframes and the creation workflows.
  12. https://github.com/heygen-com/hyperframes: "Requirements: Node.js 22+, FFmpeg."
  13. https://github.com/heygen-com/hyperframes: "frame.md, your design system, ready for video."
  14. https://github.com/heygen-com/hyperframes: about 46.9k stars, 4.4k forks, Apache-2.0 license.
  15. https://github.com/heygen-com/hyperframes: "HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack."
  16. https://github.com/heygen-com/hyperframes/releases: v0.8.31 released September 7, 2026, with v0.8.22 through v0.8.30 in the days before.
  17. https://github.com/heygen-com/hyperframes, "Development Note" on Git LFS.