hyperframes

Write HTML. Render video. Built for agents.

Studio | Quickstart | Showcase | Playground | Catalog | Docs | Discord

Download the desktop app: macOS · Windows · Linux (.deb)

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.

For Claude Code, install the versioned plugin:

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 for Copilot, VS Code, Cursor, Gemini CLI, updates, and migration.

For standalone skills (including OpenCode), use:

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, /reverse-any-video, /style-sampling 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 9 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 the skills from the release tag that matches your CLI version, so they match the CLI that runs them.

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.

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.

HyperFrames ships 9 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 9. 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, /remotion-to-hyperframes and /reverse-any-video install on demand with npx hyperframes skills update <name>. Nothing re-pulls the full set behind your back.

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.

Build the upload-ready Codex plugin archive from the committed HEAD version of the manifest, brand assets, and skills:

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.

For visual design handoff workflows, see the Claude Design guide and Open Design guide.

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

Need ideas? Browse the 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 — 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.

Biennale Yellow	BlockFrame
Blue Professional	Bold Poster
Broadside	Capsule
Cartesian	Cobalt Grid
Coral	Creative Mode

Browse and remix them all at hyperframes.studio/design.

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.

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

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 is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.

Install ready-to-use blocks and components:

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.

• 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 is inspired by Remotion. 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.

Read the full comparison in the HyperFrames vs Remotion guide.

Full documentation: hyperframes.heygen.com/introduction

• Quickstart
• Showcase
• Guides
• API Reference
• Catalog
• Examples
• AWS Lambda rendering

HyperFrames is used in production at HeyGen, with community examples from teams like tldraw, TanStack, and others in ADOPTERS.md. Open a PR if your team is using HyperFrames.

• Questions and ideas: Discord
• Bugs and feature requests: GitHub Issues
• User research: Book a casual 30-minute conversation with the HyperFrames team — no preparation or sales pitch
• Security reports: SECURITY.md
• Contributions: CONTRIBUTING.md

The repo uses Git LFS 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:

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

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git

Apache 2.0