# hyperframes

> Turn HTML, CSS and animations into repeatable MP4 videos, built for coding agents

- Repository: https://github.com/heygen-com/hyperframes
- Category: Image, video & audio
- Stars: 70,092 · Forks: 6,344 · Language: TypeScript · License: Apache-2.0
- Experience: Some experience
- Page: https://ir.adyog.com/repos/heygen-com/hyperframes/

Making video by hand in an editor is slow to repeat and hard for an AI agent to drive. HyperFrames takes a different route: you describe a video as an HTML page with timing attributes, and it renders that page to an MP4. The output is deterministic, so the same input gives the same video each time.

Animations have to be seekable, meaning the renderer can jump to any moment and get the right frame. The README lists GSAP, Lottie, Three.js, Anime.js, CSS and WAAPI as supported runtimes. The repo topics point to Puppeteer and FFmpeg for capture and encoding, though the README excerpt doesn't say so directly.

Its main twist is a set of 21 skills that teach coding agents such as Claude Code, Codex, Cursor and Gemini CLI the loop of planning, writing HTML, linting, previewing and rendering. A router skill picks a workflow for requests like product launch videos, explainers, PR summaries, captions or slide decks. There is also a one-way port from Remotion, a React-based video framework.

## What it does

- **HTML to deterministic MP4**: Compositions are HTML, CSS, media and seekable animations. They render to MP4 locally through the CLI.
- **21 agent skills**: Skills load on demand and cover animation, keyframes, creative direction, audio mixing, media sourcing and the CLI loop. The /hyperframes router skill picks the workflow.
- **Ready-made creation workflows**: Workflows include product launch videos from a URL, faceless explainers, PR-to-video, captions for talking-head footage, beat-synced music videos and slide decks.
- **Several ways to install**: Install as a Claude Code plugin, or as standalone skills with npx for agents such as OpenCode. Plugin guides also cover Copilot, VS Code, Cursor and Gemini CLI.
- **Cloud and Lambda rendering**: The CLI can render locally, through HeyGen-hosted cloud rendering, or on AWS Lambda.

## What you could build

- Generate a 10-second product intro with a title, background video and music by prompting an agent.
- Turn a website URL into a 30 to 90 second product launch video.
- Explain a GitHub pull request as a short changelog video.
- Add captions or designed graphic overlays to an existing talking-head video.
- Port an existing Remotion composition to HyperFrames HTML.

## Who it's for

Developers comfortable with HTML, CSS and Node.js, especially those already using a coding agent like Claude Code, who want to produce video through code.

## Get started

Node.js 22 or newer is required. Install the Claude Code plugin (or the standalone skills), then ask your agent to use /hyperframes with a prompt describing the video you want. The agent plans, writes the HTML, previews and renders it.

```
claude plugin marketplace add heygen-com/hyperframes
```
```
claude plugin install hyperframes@hyperframes
```
```
npx skills add heygen-com/hyperframes
```

Tags: video, html, agent-skills, rendering, animation