Open Source Project #242: HyperFrames — Write HTML, Render Video, a Deterministic Video Framework Built for AI Agents

HeyGen's open-source HTML-to-video framework: describe a video with HTML, data attributes, and seekable animation (GSAP and friends); headless Chrome captures frame by frame and FFmpeg encodes, so the same input always yields the same video. Ships 21 agent skills so Claude Code, Codex, and Cursor can produce video from a single prompt. Apache-2.0, 68k+ Stars, used in production at HeyGen.

·9 min read·AI Tools
open-sourcevideohtmlai-agentclaude-codeffmpeggsaptypescriptmotion-graphics

Introduction

"Write HTML. Render video. Built for agents."

This is article #242 in the "One Open Source Project a Day" series. Today's project is HyperFrames — HeyGen's open-source HTML-to-video framework, with 68,154 Stars, 6,157 Forks, an Apache-2.0 license, and production use inside HeyGen itself.

Getting an AI agent to make video runs into two problems. First, the video "source format": proprietary timeline formats are unfamiliar to agents, and React projects need a bundler. Second, reproducibility: the frames you render today must match the ones you render tomorrow if you want to put this in CI or run regression tests. HyperFrames answers both bluntly: a video is just an HTML file. Timing and tracks are marked with data-* attributes, animation is written in "seekable" libraries like GSAP, CSS, Lottie, or Three.js, and at render time headless Chrome seeks to each frame, screenshots it, and FFmpeg encodes the result — same input, same output. And HTML happens to be exactly what agents are best at writing.

What You'll Learn

  • HyperFrames' core model: how HTML + data attributes + seekable animation becomes a deterministic MP4
  • How to get an agent to produce a video from one sentence in Claude Code / Codex / Cursor
  • The layered design of its 21 agent skills: one router skill, creation workflows, and domain skills
  • frame.md: translating a web design system into a spec written for the camera
  • How it trades off against Remotion

Prerequisites

  • Basic HTML/CSS; familiarity with an animation library like GSAP helps
  • Node.js 22+ and FFmpeg installed
  • Experience with a coding agent (Claude Code, Codex, Cursor) makes the design intent easier to appreciate

Project Background

Overview

HyperFrames is an open-source framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 videos. It can be used three ways: through the local CLI, from AI coding agents via skills, or as the rendering core behind hosted authoring workflows.

It is inspired by Remotion. Both render video with headless Chrome and FFmpeg; the difference is the authoring model. Remotion bets on React components, while HyperFrames bets on plain HTML that both humans and agents can write easily.

Author / Team

  • Developed by: HeyGen (the heygen-com organization), the AI avatar video company
  • Primary language: TypeScript
  • License: Apache-2.0, with no per-render fees and no commercial-use thresholds
  • Created: 2026-03-10
  • Status: very active, with the latest push landing today; used in production at HeyGen, with community examples from teams like tldraw and TanStack

Project Stats

  • ⭐ GitHub Stars: 68,154+
  • 🍴 Forks: 6,157+
  • 📄 License: Apache-2.0
  • 📅 Created: 2026-03-10
  • 👥 Core contributors: miguel-heygen (2,807 commits), vanceingalls (1,141), jrusso1020 (953), ukimsanov (262)
  • 📬 Open Issues: 387
  • 🏷️ Topics: ai, ai-agents, animation, claude-code, ffmpeg, gsap, html-to-video, mcp, motion-graphics, puppeteer, rendering, video-editor, and more

Quick Start

Hand It to an Agent (Recommended)

For Claude Code, install the versioned plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

Then use /hyperframes:hyperframes. For other agents (including OpenCode), install the standalone skills:

npx skills add heygen-com/hyperframes
# For agents or non-interactive runs, install just the core set:
npx hyperframes skills update

Then simply state what you want:

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

Manually With the CLI

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

Requires Node.js 22+ and FFmpeg.

Core Deep-Dive

Video as HTML: Data Attributes Plus Seekable Animation

A HyperFrames composition is an ordinary HTML file:

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

data-start, data-duration, and data-track-index place each element in time and on a track; the GSAP timeline is created paused and registered on window.__timelines. The keyword here is seekable: the renderer doesn't play in real time, it jumps the page to frame N, screenshots, then jumps to frame N+1. As long as an animation can be positioned at any instant, it can be captured frame by frame — GSAP, CSS animations, Lottie, Three.js, Anime.js, and WAAPI all plug in through adapters, and you can write your own frame adapter.

This design gives three direct benefits: no build step (an index.html plays as-is in the browser for preview); the same input yields the same frames, which suits CI and regression testing; and what you hand to an agent is plain HTML rather than a JSX project that needs bundling. The repo itself stores about 240 MB of golden-baseline MP4s in Git LFS for render regression tests — one more piece of evidence that determinism is taken seriously.

21 Skills in Three Layers: Router, Workflows, Domains

Plenty of projects ship agent skills, but HyperFrames' layering is notably orderly:

  • Router layer: a single /hyperframes, the "read this first" capability map. Any "make me a video / animation / deck" request lands here, where the creation brief is confirmed before dispatch to a workflow.
  • Creation workflows (10): /product-launch-video (a promo from a website URL), /faceless-explainer (an explainer from arbitrary text), /pr-to-video (a changelog video from a GitHub PR, read via the gh CLI), /embedded-captions (captions for talking-head footage), /talking-head-recut (graphic overlays on interviews/podcasts), /motion-graphics (short pieces under ~10s), /music-to-video (beat-synced video driven by a track), /slideshow (navigable decks), /general-video (the fallback), and /remotion-to-hyperframes (one-way migration of a Remotion project).
  • Domain skills (loaded on demand): hyperframes-core (the composition contract and determinism rules), hyperframes-animation, hyperframes-keyframes, hyperframes-creative, media-use (resolves BGM/SFX/image/voice needs into frozen local files with a ledger), hyperframes-audio (voiceover ducking, EQ/compressor/reverb chains, submix buses), hyperframes-cli, hyperframes-registry, and figma.

Note the install policy too: standalone installs get only the "core set", and the router installs each creation workflow on demand with skills update <workflow> — "nothing re-pulls the full set behind your back." That's a sober respect for the agent's context budget; more skills is itself a token cost.

frame.md: Translating a Web Design System for the Camera

This is the most original part of the README. Every brand has a design.md, but it was written for the web — type sizes, spacing, and navigation chrome don't hold up on a video frame. frame.md is the missing translation layer: it takes your web-context design spec and inverts it for the frame, so an agent composing a promo doesn't have to guess at scale or reach for web chrome. The motto: atoms stay sacred, composition stays free, numbers come from the script. The output is a DESIGN.md superset your whole toolchain can read, and hyperframes.dev/design offers remixable templates (Biennale Yellow, BlockFrame, Blue Professional, and more).

How It Trades Off Against Remotion

The README includes a frank comparison table:

HyperFramesRemotion
AuthoringHTML + CSS + seekable animationReact components
Build stepNone; index.html plays as-isBundler required
Agent handoffPlain HTML filesJSX / React project
Distributed renderingLocal + AWS LambdaRemotion Lambda, mature cloud renderer
LicenseApache 2.0Source-available Remotion License

The table doesn't dodge its own weak spot — on distributed rendering, it concedes that Remotion's cloud renderer is more mature. Studio is likewise labeled "Available, evolving" rather than claimed finished. One practical caution: there are 387 open issues, which is normal for something growing this fast, but check the ones relevant to your use case before committing to production.

Resources

Summary

HyperFrames answers a very specific question: if an AI agent is going to write the "source code" of a video, what format should it be? Its answer is HTML, because agents already write HTML best, and "seekable animation + headless Chrome + FFmpeg" makes the output reproducible.

Three things worth noting:

Determinism is a first-class citizen. "Same input, same frames, same output" isn't just a slogan — seekable animation adapters, rendering that doesn't depend on wall-clock time, and golden-baseline videos managed in Git LFS together back it up. That lets video go into CI the way code does.

The skill design is restrained and layered. One router skill plus on-demand workflow and domain skills, with an explicit promise not to pull everything behind your back, is a pragmatic take on agent context cost that other skill-shipping projects could learn from.

It admits its gaps. Against Remotion it says plainly that distributed rendering is more mature there, and Studio is labeled "evolving." Combined with Apache-2.0, no render fees, and no commercial-use threshold, the trade-offs here are clear and credible.

If you're having agents mass-produce product promos, PR walkthrough videos, or data-viz motion graphics, or you want to plug video generation into an automated pipeline, HyperFrames is worth a one-prompt trial run.

Explore PrimeSkills — a curated marketplace of AI agents and skills, each validated against real enterprise workflows. No hype, just what actually works.

Visit my personal site for more insights and interesting products.

← Back to Blog