<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/logo/dark.svg">
<source media="(prefers-color-scheme: light)" srcset="docs/logo/light.svg">
<img alt="HyperFrames" src="https://raw.githubusercontent.com/heygen-com/hyperframes/HEAD/docs/logo/light.svg" width="300">
</picture>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/v/hyperframes.svg?style=flat" alt="npm version"></a>
<a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/dm/hyperframes.svg?style=flat" alt="npm downloads"></a>
<a href="https://github.com/heygen-com/hyperframes/blob/HEAD/LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License"></a>
<a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D22-brightgreen" alt="Node.js"></a>
<a href="https://discord.gg/EbK98HBPdk"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Discord"></a>
</p>
<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>
<p align="center">
<a href="https://hyperframes.studio/studio">Studio</a> |
<a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> |
<a href="https://hyperframes.heygen.com/showcase">Showcase</a> |
<a href="https://hyperframes.studio/">Playground</a> |
<a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> |
<a href="https://hyperframes.heygen.com/introduction">Docs</a> |
<a href="https://discord.gg/EbK98HBPdk">Discord</a>
</p>
<p align="center">
<img src="https://github.com/user-attachments/assets/f6ff9fae-f33d-4f68-bd54-f3ed4ba6473b" alt="HyperFrames app opening from the Dock: native Mac and Linux app now available" width="800">
</p>
<p align="center">
<b>Download the desktop app:</b>
<a href="https://hyperframes.studio/studio/download?os=mac&src=github-readme&utm_source=github&utm_medium=readme">macOS</a> ·
<a href="https://hyperframes.studio/studio/download?os=windows&src=github-readme&utm_source=github&utm_medium=readme">Windows</a> ·
<a href="https://hyperframes.studio/studio/download?os=deb&src=github-readme&utm_source=github&utm_medium=readme">Linux (.deb)</a>
</p>
HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
Using Claude Code, Codex, Cursor, or another coding agent? Run `npx hyperframes skills update` once, then ask your agent to make a video.
## Quick Start
### With an AI coding agent
For Claude Code, install the versioned plugin:
```bash
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
```
To enable auto-update for the **hyperframes** marketplace, run `claude` in a
terminal in your project. In Claude Code's terminal UI, run `/plugin`, then select
**Marketplaces** → **hyperframes** → **Enable auto-update**. Afterward, use
`/hyperframes:hyperframes`. See the [plugin guide](https://github.com/heygen-com/hyperframes/blob/HEAD/docs/guides/plugins.mdx)
for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.
For standalone skills (including OpenCode), use:
```bash
npx skills add heygen-com/hyperframes
```
> The picker opens with nothing pre-selected — the **Core Skills** group is all you need; `/slideshow`, `/remotion-to-hyperframes` and `/figma` install on demand. Agents and non-interactive runs should use `npx hyperframes skills update` instead — it installs exactly the core set, whereas `skills add --all` installs all 7 published skills. The six repo-internal skills under `.claude/skills` / `.agents/skills` are excluded by default. For the full published set use `npx hyperframes skills`.
>
> `skills add` resolves the skills.sh registry blob, which can lag `main` by hours. `npx hyperframes skills update` installs from the current `main`, so reach for it when you need the newest copy of a skill.
Run project-local installs from your video project's directory. From a HyperFrames
checkout, use `npx hyperframes skills update` for a global install instead: a
project-local installer target can overlap the tracked `skills/` source and
overwrite uncommitted edits. See [contributor setup](https://github.com/heygen-com/hyperframes/blob/HEAD/CONTRIBUTING.md#getting-started).
Try a prompt like:
> Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Codex, Cursor, Gemini CLI, IBM Bob, and other coding agents that support skills.
## Skills
HyperFrames ships 7 skills. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (film, captions, overlays, motion, look). Read it first.
For standalone installation, default to the **core set** (`/hyperframes`, `/hyperframes-cli`, `/hyperframes-registry`, `/media-use`). `npx hyperframes skills update` installs exactly that from anywhere; the interactive picker (`npx skills add heygen-com/hyperframes`) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without `--skill` installs all 7. Use `npx skills add heygen-com/hyperframes --all` to install the complete published set deliberately (skips the picker), or `npx skills add heygen-com/hyperframes --skill <name>` for just one (bare name, no leading `/`).
Standalone installs stay lean after that: `npx hyperframes init` installs the **core set** only when it is missing and never touches a skill you already have (`npx hyperframes skills update` refreshes them, and never removes one); `/figma`, `/slideshow` and `/remotion-to-hyperframes` install **on demand** with `npx hyperframes skills update <name>`. Nothing re-pulls the full set behind your back.
### Plugin packages
Plugins bundle the full skill catalog and use their agent's update manager.
`bun run package:agent-plugin` builds the committed portable ZIP, source metadata,
and SHA-256 checksum. See the [maintainer checklist](https://github.com/heygen-com/hyperframes/blob/HEAD/docs/contributing/agent-plugins.mdx).
### Upload to Codex
Build the upload-ready Codex plugin archive from the committed `HEAD` version of the manifest, brand assets, and skills:
```bash
bun run package:codex-plugin
```
This writes `dist/hyperframes-plugin.zip` with a `hyperframes/` root folder and fails if the archive exceeds Codex's 100 MB upload limit.
### Core set
| Skill | Use when |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/hyperframes` | **Read first** for any request to make, edit, animate or render a video, motion graphic, captions or overlays with HyperFrames (HTML rendered to video). Holds the render contract and the work loop, and points to the references for format, motion, look, captions, whole films and storyboards. |
| `/hyperframes-cli` | The HyperFrames CLI by job — scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history — plus reading its JSON and recovering from build or render failures. |
| `/hyperframes-registry` | About 450 ready-made blocks and components installed as editable source — transitions, overlays, titles, kinetic type, captions, charts, maps, 3D, camera moves. Use before hand-building any named visual; also for `hyperframes add` and `catalog`. |
| `/media-use` | Get or make any media for a video — music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks — with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull. |
### On demand
| Skill | Use when |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `/figma` | Bring Figma into a video — rendered assets, brand tokens, components, storyboard frames as reconstructed motion, shaders and connector-assisted motion. Use when you paste a figma.com link. |
| `/slideshow` | A presentation, pitch deck or interactive deck — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode with speaker notes. Output is a navigable deck, not a rendered MP4. |
| `/remotion-to-hyperframes` | Bringing existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, other tools' renders), verified frame by frame. |
For visual design handoff workflows, see the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design) and [Open Design guide](https://hyperframes.heygen.com/guides/open-design).
### Manually with the CLI
```bash
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4
```
**Requirements:** Node.js 22+, FFmpeg
## What You Can Build
Need ideas? Browse the [Showcase](https://hyperframes.heygen.com/showcase) for finished videos you can watch, read, run, and remix.
- Product launch videos and feature announcements
- PR walkthroughs with animated code diffs, narration, and captions
- Data visualizations, chart races, and map animations
- Social videos with kinetic captions, overlays, and music
- Docs-to-video, PDF-to-video, and site-tour explainers
- Reusable motion graphics for automated content pipelines
## Frame.md
**frame.md — your design system, ready for video.**
Every brand has a `design.md`. None of them were written for a camera. `frame.md` is the missing translation layer: it takes your web-context design spec and inverts it for the frame — the same tokens, the same rules, but rewritten so an AI agent can compose a promo video without guessing at scale or reaching for web chrome.
The output is a `DESIGN.md` superset your whole toolchain can read. Atoms stay sacred. Composition stays free. Numbers come from the script.
<table>
<tr>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/biennale-yellow"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/biennale-yellow">Biennale Yellow</a></b>
</td>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/blockframe"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/blockframe">BlockFrame</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/blue-professional"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/blue-professional">Blue Professional</a></b>
</td>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/bold-poster"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/bold-poster">Bold Poster</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/broadside"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/broadside">Broadside</a></b>
</td>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/capsule"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/capsule">Capsule</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/cartesian"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/cartesian">Cartesian</a></b>
</td>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/cobalt-grid"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/cobalt-grid">Cobalt Grid</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/coral"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/coral">Coral</a></b>
</td>
<td width="50%" align="center">
<a href="https://hyperframes.studio/design/creative-mode"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
<br><b><a href="https://hyperframes.studio/design/creative-mode">Creative Mode</a></b>
</td>
</tr>
</table>
Browse and remix them all at [hyperframes.studio/design](https://hyperframes.studio/design).
## How It Works
Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS, Lottie, Three.js, Anime.js, WAAPI, or your own frame adapter for seekable animation.
```html
<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="https://github.com/heygen-com/hyperframes/blob/HEAD/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="https://github.com/heygen-com/hyperframes/blob/HEAD/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>
```
Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.
## HyperFrames Stack
HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.
| Piece | Status | What it does |
| ------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------- |
| CLI | Available | Scaffold, preview, lint, inspect, and render local video projects |
| Core / Engine / Producer | Available | Parse compositions, drive headless Chrome, encode video, and mix audio |
| Catalog | Available | Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects |
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
| Studio | Available, evolving | Browser surface for previewing and editing compositions |
| AWS Lambda rendering | Available | Deploy a distributed render stack and drive renders from your laptop or CI |
| [hyperframes.studio](https://hyperframes.studio/) | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
| [frame.md](https://hyperframes.studio/design) | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
## Catalog
Install ready-to-use blocks and components:
```bash
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chart
```
Browse the catalog at [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart).
## Why HyperFrames?
- **HTML-native:** compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
- **Agent-friendly:** agents already write HTML, and the CLI is non-interactive by default.
- **Deterministic:** same input, same frames, same output. Built for CI, regression tests, and automated rendering.
- **No build step:** an `index.html` composition plays as-is and can be previewed directly in the browser.
- **Adapter-based animation:** bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
- **Open source:** Apache 2.0 license, with no per-render fees or commercial-use thresholds.
## HyperFrames vs Remotion
HyperFrames is inspired by [Remotion](https://www.remotion.dev). Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily.
| | **HyperFrames** | **Remotion** |
| ------------------------ | ------------------------------------- | --------------------------------------- |
| Authoring | HTML + CSS + seekable animation | React components |
| Build step | None; `index.html` plays as-is | Bundler required |
| Agent handoff | Plain HTML files | JSX / React project |
| Library-clock animations | Seekable, frame-accurate via adapters | Wall-clock animation patterns need care |
| Distributed rendering | Local and AWS Lambda render paths | Remotion Lambda, mature cloud renderer |
| License | Apache 2.0 | Source-available Remotion License |
Read the full comparison in the [HyperFrames vs Remotion guide](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion).
## Documentation
Full documentation: [hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)
- [Quickstart](https://hyperframes.heygen.com/quickstart)
- [Showcase](https://hyperframes.heygen.com/showcase)
- [Guides](https://hyperframes.heygen.com/guides/gsap-animation)
- [API Reference](https://hyperframes.heygen.com/packages/core)
- [Catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)
- [Examples](https://hyperframes.heygen.com/examples)
- [AWS Lambda rendering](https://hyperframes.heygen.com/deploy/aws-lambda)
## Packages
| Package | Description |
| ---------------------------------------------------------------- | ----------------------------------------------------------------- |
| [`hyperframes`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/cli) | CLI for creating, previewing, linting, and rendering compositions |
| [`@hyperframes/core`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/core) | Types, parsers, generators, linter, runtime, and frame adapters |
| [`@hyperframes/engine`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/engine) | Seekable page-to-video capture engine using Puppeteer and FFmpeg |
| [`@hyperframes/producer`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/producer) | Full rendering pipeline for capture, encode, and audio mix |
| [`@hyperframes/studio`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/studio) | Browser-based composition editor UI |
| [`@hyperframes/player`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/player) | Embeddable `<hyperframes-player>` web component |
| [`@hyperframes/shader-transitions`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/shader-transitions) | WebGL shader transitions for compositions |
| [`@hyperframes/aws-lambda`](https://github.com/heygen-com/hyperframes/blob/HEAD/packages/aws-lambda) | AWS Lambda SDK and deployment surface for distributed renders |
## Community
HyperFrames is used in production at [HeyGen](https://www.heygen.com), with community examples from teams like [tldraw](https://tldraw.com), [TanStack](https://tanstack.com), and others in [ADOPTERS.md](https://github.com/heygen-com/hyperframes/blob/HEAD/ADOPTERS.md). Open a PR if your team is using HyperFrames.
- Questions and ideas: [Discord](https://discord.gg/EbK98HBPdk)
- Bugs and feature requests: [GitHub Issues](https://github.com/heygen-com/hyperframes/issues)
- User research: [Book a casual 30-minute conversation with the HyperFrames team](https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2cSpKoDgmcmRrgekrnrgqmvPT8W6F2Zg6e7MY7IJqaZKwpn_I0NdTHkN390iguMepE_NVg8ezb?gv=true) — no preparation or sales pitch
- Security reports: [SECURITY.md](https://github.com/heygen-com/hyperframes/blob/HEAD/SECURITY.md)
- Contributions: [CONTRIBUTING.md](https://github.com/heygen-com/hyperframes/blob/HEAD/CONTRIBUTING.md)
## Development Note
The repo uses [Git LFS](https://git-lfs.com) for golden regression-test baselines under `packages/producer/tests/**/output.mp4` (about 240 MB of `.mp4` files). If you're cloning the full repo for development, install Git LFS first:
```bash
# macOS
brew install git-lfs
# Ubuntu / Debian
sudo apt install git-lfs
# Windows
winget install GitHub.GitLFS
# Then, once per machine
git lfs install
```
If you only need source files, you can skip LFS content:
```bash
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
```
## License
[Apache 2.0](https://github.com/heygen-com/hyperframes/blob/HEAD/LICENSE)
