Who is hyperframes 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.

What can you build with hyperframes?

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.

heygen-com /

hyperframes

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

70.1k stars
14.6k stars since 3 Oct
TypeScript
Updated today
Some experience
Image, video & audio

Open on GitHub (opens in a new tab) Website (opens in a new tab)

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.

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

Commands are copied from the project's README. Read it on GitHub for the full setup.