HyperFrames

by HeyGen

Turns HTML, CSS and animations into MP4 videos, and lets your AI agent write them.

60.9 k stars GitHub Apache-2.0 FreeOpen sourceLocal

View on GitHub →

What it does

Plain HTML compositions, no React or proprietary format
Ready-made skills for Claude Code, Codex, Cursor and other agents
Deterministic rendering: the same input always gives the same video

Install it

Requirements: Node.js 22+ and FFmpeg.

Create a project

npx hyperframes init my-video

Preview in the browser

npx hyperframes preview

Render to MP4

npx hyperframes render

Optional: Claude Code plugin

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

The prompt for your agent

Paste it into your coding agent: it checks the requirements and installs it for you.

Claude CodeCodexCursorGemini CLIopencode

Prompt

Install HyperFrames (https://github.com/heygen-com/hyperframes) on my machine.
1. Check the requirements: Node.js 22+ and FFmpeg. If anything is missing, tell me before installing anything.
2. Follow the official method:
- Create a project: npx hyperframes init my-video
- Preview in the browser: npx hyperframes preview
- Render to MP4: npx hyperframes render
- Optional: Claude Code plugin: claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes
3. Check that it works, then explain how to launch it and where to start.

Always review what your agent is about to run, especially install commands.