Write HTML. Render video. Built for agents.
HyperFrames is an open-source TypeScript framework from HeyGen that converts HTML, CSS, GSAP animations, and media assets into deterministic MP4 video files, using Puppeteer to render frames and FFmpeg to encode the final output. Developers interact with it through a CLI offering `init`, `preview` (browser-based with live reload), and `render` commands, or they can invoke it from AI coding agents via installable skills (`npx skills add heygen-com/hyperframes`) that teach agents a structured production loop: plan, write HTML, wire seekable animations, lint, preview, and render. It connects to Claude Code specifically, alongside Cursor, Gemini CLI, and Codex. A notable feature is `frame.md`, a design-spec format that translates web-oriented design tokens into video-frame-appropriate rules so agents can compose brand-consistent videos without guessing at scale or layout. The framework suits developers, content teams, and automated pipelines producing product launches, data visualizations, social clips, and docs-to-video conversions.
- ✓Open-source license (Apache-2.0)
- ✓Actively maintained (<30d)
- ✓Healthy fork ratio
- ✓Clear description
- ✓Topics declared
- ✓Documented (README)
claude mcp add hyperframes -- npx -y skills{
"mcpServers": {
"hyperframes": {
"command": "npx",
"args": ["-y", "skills"]
}
}
}MCP Servers overview
<p align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="docs/logo/dark.svg">
<source media="(prefers-color-scheme: light)" srcset="docs/logo/light.svg">
<img alt="HyperFrames" src="docs/logo/light.svg" width="300">
</picture>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/v/hyperframes.svg?style=flat" alt="npm version"></a>
<a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/dm/hyperframes.svg?style=flat" alt="npm downloads"></a>
<a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License"></a>
<a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D22-brightgreen" alt="Node.js"></a>
<a href="https://discord.gg/EbK98HBPdk"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Discord"></a>
</p>
<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>
<p align="center">
<a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> |
<a href="https://hyperframes.heygen.com/showcase">Showcase</a> |
<a href="https://www.hyperframes.dev/">Playground</a> |
<a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> |
<a href="https://hyperframes.heygen.com/introduction">Docs</a> |
<a href="https://discord.gg/EbK98HBPdk">Discord</a>
</p>
<p align="center">
<img src="https://static.heygen.ai/hyperframes-oss/docs/images/hyperframes-logo-motion-1280.webp" alt="HyperFrames demo: HTML code on the left transforms into a rendered video on the right" width="800">
</p>
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
Install the HyperFrames skills, then describe the video you want:
```bash
npx skills add heygen-com/hyperframes
```
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, Cursor, Gemini CLI, Codex, and other coding agents that support skills.
For visual design handoff workflows, see the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design) and [Open Design guide](https://hyperframes.heygen.com/guides/open-design).
### Manually with the CLI
```bash
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
Need ideas? Browse the [Showcase](https://hyperframes.heygen.com/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 website-to-video explainers
- Reusable motion graphics for automated content pipelines
## Frame.md
**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.
<table>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/biennale-yellow"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/biennale-yellow">Biennale Yellow</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/blockframe"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/blockframe">BlockFrame</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/blue-professional"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/blue-professional">Blue Professional</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/bold-poster"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/bold-poster">Bold Poster</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/broadside"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/broadside">Broadside</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/capsule"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/capsule">Capsule</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/cartesian"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/cartesian">Cartesian</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/cobalt-grid"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/cobalt-grid">Cobalt Grid</a></b>
</td>
</tr>
<tr>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/coral"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/coral">Coral</a></b>
</td>
<td width="50%" align="center">
<a href="https://www.hyperframes.dev/design/creative-mode"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
<br><b><a href="https://www.hyperframes.dev/design/creative-mode">Creative Mode</a></b>
</td>
</tr>
</table>
Browse and remix them all at [hyperframes.dev/design](https://www.hyperframes.dev/design).
## 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.
```html
<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 Stack
HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.
| Piece | Status | What it does |
| ----------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------- |
| CLI | Available | Scaffold, preview, lint, inspect, and render local video projects |
| Core / Engine / Producer | Available | Parse compositions, drive headless Chrome, encode video, and mix audio |
| Catalog | Available | Reusable blocks and components for transitions, overlays, captions, charts, maps, and effects |
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
| Studio | Available, evolving | Browser surface for previewing and editing compositions What people ask about hyperframes
What is heygen-com/hyperframes?
+
heygen-com/hyperframes is mcp servers for the Claude AI ecosystem. Write HTML. Render video. Built for agents. It has 27.1k GitHub stars and was last updated today.
How do I install hyperframes?
+
You can install hyperframes by cloning the repository (https://github.com/heygen-com/hyperframes) or following the README instructions on GitHub. ClaudeWave also provides quick install blocks on this page.
Is heygen-com/hyperframes safe to use?
+
Our security agent has analyzed heygen-com/hyperframes and assigned a Trust Score of 100/100 (tier: Verified). See the full breakdown of passed checks and flags on this page.
Who maintains heygen-com/hyperframes?
+
heygen-com/hyperframes is maintained by heygen-com. The last recorded GitHub activity is from today, with 53 open issues.
Are there alternatives to hyperframes?
+
Yes. On ClaudeWave you can browse similar mcp servers at /categories/mcp, sorted by popularity or recent activity.
Deploy hyperframes to your cloud
Ship this repo to production in minutes. Each platform spins up its own environment with editable env vars.
Maintain this repo? Add a badge to your README
Drop the badge into your GitHub README to show it's tracked on ClaudeWave. Each badge links back to this page and reflects the live Trust Score.
[](https://claudewave.com/repo/heygen-com-hyperframes)<a href="https://claudewave.com/repo/heygen-com-hyperframes"><img src="https://claudewave.com/api/badge/heygen-com-hyperframes" alt="Featured on ClaudeWave: heygen-com/hyperframes" width="320" height="64" /></a>More MCP Servers
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.
User-friendly AI Interface (Supports Ollama, OpenAI API, ...)
An open-source AI agent that brings the power of Gemini directly into your terminal.
The fastest path to AI-powered full stack observability, even for lean teams.
🕷️ An adaptive Web Scraping framework that handles everything from a single request to a full-scale crawl!
⭐AI-driven public opinion & trend monitor with multi-platform aggregation, RSS, and smart alerts.🎯 告别信息过载，你的 AI 舆情监控助手与热点筛选工具！聚合多平台热点 + RSS 订阅，支持关键词精准筛选。AI 智能筛选新闻 + AI 翻译 + AI 分析简报直推手机，也支持接入 MCP 架构，赋能 AI 自然语言对话分析、情感洞察与趋势预测等。支持 Docker ，数据本地/云端自持。集成微信/飞书/钉钉/Telegram/邮件/ntfy/bark/slack 等渠道智能推送。