# HyperFrames

> An open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos, built for AI coding agents and automated pipelines.

HyperFrames is an open-source video rendering framework created by HeyGen that converts plain HTML compositions into deterministic MP4 videos. It is licensed under Apache 2.0 and available on GitHub, with the core engine using headless Chrome (via Puppeteer) and FFmpeg to seek each frame and encode the result. The project reached v0.7.1 as of June 2026 and the repository reports nearly 30,000 stars.

## What It Is

HyperFrames sits in the category of programmatic video creation tools, but its distinguishing bet is the authoring model: compositions are plain HTML files with data attributes for timing and tracks, not React components or proprietary timeline formats. This makes them immediately previewable in any browser and straightforward for both humans and AI coding agents to write. The renderer seeks each frame in headless Chrome and encodes with FFmpeg, so the same input always produces the same output — a property the project describes as deterministic rendering suited for CI pipelines and regression testing.

## How the Authoring Model Works

A HyperFrames composition is an `index.html` file. Elements become clips by adding `data-start`, `data-duration`, and `data-track-index` attributes. Video, audio, and animated elements are layered on tracks. Seekable animation is handled through adapters for GSAP, CSS animations, Lottie, Three.js, Anime.js, and WAAPI — or a custom runtime. Because no build step is required, the same file that renders to MP4 can be opened directly in a browser for instant preview with live reload via the CLI.

## Agent-First Design

HyperFrames ships a skills system specifically for AI coding agents. Running `npx skills add heygen-com/hyperframes` installs skills that teach agents the full video-production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. The README states compatibility with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills. The CLI is non-interactive by default, which the project notes as a deliberate choice for agent handoff.

## The HyperFrames Stack

The project ships as a monorepo of coordinated packages:

- **CLI (`hyperframes`)** — scaffold, preview, lint, inspect, and render local projects
- **Core / Engine / Producer** — parse compositions, drive headless Chrome, encode video, mix audio
- **Catalog** — reusable blocks for transitions, overlays, captions, charts, maps, and effects installable via `npx hyperframes add`
- **Studio** — browser surface for previewing and editing compositions (described as available and evolving)
- **AWS Lambda rendering** — distributed render stack for CI or cloud pipelines
- **`@hyperframes/player`** — embeddable `<hyperframes-player>` web component
- **`@hyperframes/shader-transitions`** — WebGL shader transitions
- **frame.md** — a design-system translation layer that inverts a brand's `design.md` for video composition by AI agents

The community playground at hyperframes.dev lets users preview, iterate, share, and render HTML-native video projects in the browser.

## Tradeoffs vs. Remotion

The README includes an explicit comparison with Remotion, another headless-Chrome-plus-FFmpeg video tool. The key differences as stated by the project: HyperFrames uses plain HTML + CSS + seekable animation adapters with no build step required, while Remotion uses React components and requires a bundler. HyperFrames offers both local and AWS Lambda render paths; Remotion has a more mature cloud renderer (Remotion Lambda). HyperFrames is Apache 2.0; Remotion uses a source-available license.

## Update: v0.7.1

The latest release is v0.7.1, published on June 22, 2026. The repository was created in March 2026 and has seen active development, with the last push on the same day as the latest release. The project lists production use at HeyGen and community adoption examples from teams including tldraw and TanStack, as noted in the project's ADOPTERS.md file.

## Features
- HTML-native video composition with data attributes for timing and tracks
- Deterministic MP4 rendering via headless Chrome (Puppeteer) and FFmpeg
- CLI for scaffold, preview, lint, inspect, and render
- Seekable animation adapters for GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI
- AI coding agent skills for Claude Code, Cursor, Gemini CLI, Codex
- Catalog of reusable blocks: transitions, overlays, captions, charts, maps
- AWS Lambda distributed rendering
- Browser-based Studio for previewing and editing compositions
- Embeddable <hyperframes-player> web component
- WebGL shader transitions
- frame.md design system translation layer for AI agents
- Community playground at hyperframes.dev
- No build step required — index.html plays as-is in browser
- Live reload browser preview
- Apache 2.0 open-source license with no per-render fees

## Integrations
GSAP, Lottie, Three.js, Anime.js, WAAPI, CSS Animations, FFmpeg, Puppeteer, AWS Lambda, Claude Code, Cursor, Gemini CLI, Codex, Docker, Node.js, Git LFS

## Platforms
WINDOWS, MACOS, LINUX, WEB, API, DEVELOPER_SDK, CLI

## Pricing
Open Source

## Version
v0.7.1

## Links
- Website: https://github.com/heygen-com/hyperframes
- Documentation: https://hyperframes.heygen.com/introduction
- Repository: https://github.com/heygen-com/hyperframes
- EveryDev.ai: https://www.everydev.ai/tools/hyperframes