Hyperframes (GitHub Repo)

Write HTML. Render video. Built for agents.

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.

Quick Start

With an AI coding agent

For Claude Code, install the versioned plugin:

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

Enable auto-update for the hyperframes marketplace in /plugin → Marketplaces, then use /hyperframes:hyperframes.

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: the /hyperframes router installs each creation workflow 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 21 published skills.

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 21 skills agents load on demand. Read /hyperframes first — it's the router and capability map; it picks a workflow for any "make me a…" request and points to the domain skills below.

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.

Upload to Codex

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

bun run package:codex-plugin

Router

Skill	Use when
`/hyperframes`	Read first for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills.

Creation workflows

Skill	Use when
`/product-launch-video`	Any website — marketing / launching / promoting a product, or a site tour / showcase / social clip featuring the site's own visuals.
`/faceless-explainer`	Explaining a topic / concept from arbitrary text — no product, no URL, no website capture.
`/pr-to-video`	A GitHub pull request → changelog / feature-reveal / fix / refactor explainer.
`/embedded-captions`	Adding captions / subtitles to an existing talking-head video.
`/talking-head-recut`	Packaging an existing talking-head / interview / podcast video with designed graphic overlays.
`/motion-graphics`	A short, unnarrated, design-led motion graphic — kinetic type, stat / chart hit, logo sting.
`/music-to-video`	A music track → a beat-synced video — lyric, slideshow, or kinetic promo.
`/slideshow`	A presentation / pitch deck — discrete slides, fragment reveals, branching, hotspot navigation.
`/general-video`	Anything else — longer or multi-scene pieces, brand / sizzle reel, title card, static loop.
`/remotion-to-hyperframes`	Porting an existing Remotion (React) composition's source to HyperFrames HTML.

Manually with the CLI

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

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.

frame.md is a translation layer that takes your web-context design spec and inverts it for the camera — 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.

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.

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

Why HyperFrames?

HTML-native: compositions are HTML files with data attributes.
Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
Deterministic: same input, same frames, same output.
No build step: an index.html composition plays as-is.
Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
Open source: Apache 2.0 license.

HyperFrames vs Remotion

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.

Development Note

The repo uses Git LFS for golden regression-test baselines. If you're cloning the full repo for development, install Git LFS first.

# 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