HeyGen · Open Source · October 2026

HyperFrames: Write HTML, Render Video — The Complete Guide

In October 2026, HeyGen open-sourced HyperFrames — a framework that turns HTML, CSS, media, and seekable animations into deterministic MP4 videos. The pitch is three words: write HTML, render video. Instead of a timeline editor or a React project, a video is a plain HTML file. An AI agent can author that file, hand it to the renderer, and get back the exact same video every time. It is Apache-2.0 licensed, used in production at HeyGen, and crossed roughly 70,800 GitHub stars by October 24, 2026.

At a Glance

What Makes HyperFrames Different

The key design decision is determinism. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video — frame-accurately. That makes HyperFrames behave less like a video editor and more like a compiler: you can version-control videos, run them in CI, and regression-test them. It is the reason the tagline says built for agents: an HTML file is a complete, inspectable handoff between a person, an agent, and the renderer.

A second decision is no build step. There is no bundler and no JSX compile pass — the composition is plain HTML that opens and plays in a browser as-is. Time is declared with data attributes (data-start, data-duration, data-track-index, data-width, data-height), while <video> and <audio> elements act as clips. Animation runs through adapters for GSAP, CSS, Lottie, Three.js, Anime.js, and WAAPI: GSAP timelines are created paused and registered for the renderer to scrub frame by frame, which is what makes the output frame-accurate instead of wall-clock-driven.

Around that core sits a monorepo of packages — @hyperframes/core, @hyperframes/engine (the Puppeteer + FFmpeg capture engine), @hyperframes/producer, @hyperframes/studio (a desktop app for Mac and Linux), and a web player component — plus a registry of roughly 450 reusable blocks: transitions, captions, data charts, 3D scenes, and camera moves. Template variables declared with data-composition-variables let one bundle render many personalized variants without rebuilding.

Quickstart: Install, Preview, Render

You need Node.js 22 or newer and FFmpeg installed. The whole loop is three commands:

npx hyperframes init my-video   # scaffold a project
cd my-video
npx hyperframes preview       # browser preview + live reload
npx hyperframes render        # render to MP4
# npx hyperframes render --output final.mp4

Two more commands keep a composition honest: npx hyperframes lint validates the composition contract, and npx hyperframes check executes it headlessly to surface runtime problems before you render. Put media and fonts in the project's assets/ directory. To reach for a prebuilt block, run npx hyperframes add flash-through-white (or instagram-follow, data-chart, and others), and npx hyperframes capture <url> turns a web page into a video.

Using HyperFrames with AI Agents

HyperFrames ships first-class agent tooling, which explains why its GitHub topics include ai-agents and claude-code. In Claude Code, register the plugin marketplace and install the plugin:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
# then use the /hyperframes:hyperframes skill

Other agents get the same workflow through npx skills add heygen-com/hyperframes (or npx hyperframes skills update in non-interactive environments). The skill set is layered: a main /hyperframes skill plus core skills for the CLI, the component registry, and media use — including music, sound effects, voice-over, and avatar generation via HeyGen or free local tools — with optional skills for Figma, slideshows, and migrating from Remotion.

HyperFrames vs. Remotion

The official README draws the comparison directly — HyperFrames describes itself as inspired by Remotion — and the projects share the same rendering stack: headless Chrome plus FFmpeg. The difference is the authoring model:

The practical read: if your team (or your agent) thinks in HTML and wants deterministic, version-controlled video without a toolchain, HyperFrames is the lower-friction path. If you need a mature distributed rendering service and React is your native language, Remotion's Lambda offering is the more established choice. HyperFrames even ships a remotion-to-hyperframes skill for migrating between them.

Rendering at Scale

Local rendering covers the common case, but compositions also run in Docker and on AWS Lambda for distributed jobs. For teams that would rather not run infrastructure, HeyGen exposes a cloud render API (POST /v3/hyperframes/renders, polled via GET /v3/hyperframes/renders/{render_id}). Because output is deterministic, renders are reproducible — the MP4 container even carries an hyperframes_renderer tag, verifiable with ffprobe.

What to Know Before You Start

A few honest caveats. MP4 is the only officially documented output format — other containers are unconfirmed. There is no stated hard ceiling on duration or resolution, but the sweet spot is short, programmatic video: promos, explainers, captioned clips, data visualizations, personalized variants. Long-form edited content still belongs in a conventional editor. And while the core is free and open source, optional HeyGen cloud services (cloud rendering, HeyGen TTS) are separate offerings with their own terms.

FAQ