---
title: "Skill-🎞️ HyperFrames — HTML-to-Video AI Agent Framework (en)"
description: "HeyGen's open-source HyperFrames lets AI agents write videos in HTML/CSS/JS and render them to MP4."
url: "https://aaronchan.com/kb/hyperframes/"
updated: "2026-10-07"
category: "AI-Skill (en)"
tags:
  - AI_Agent
  - AI_Skill
---

# Skill-🎞️ HyperFrames — HTML-to-Video AI Agent Framework (en)

> 📅 Date compiled: 2026-10-05
> ⚠️ Version / star count may change; refer to the official GitHub repo
> ℹ️ Note: This article covers HeyGen's open-source **HyperFrames** (an HTML-to-video framework),
> which is a different product from the commercial video platform "Hyperframe.ai".

---

## Part 1: What is it?

| Item | Details |
| --- | --- |
| Name | HyperFrames |
| Developer | HeyGen |
| Type | Open-source video rendering framework (HTML/CSS/JS → video) |
| License | Apache-2.0 (free for commercial use, any team size) |
| GitHub | ~58.4k stars / 5.2k forks (2026-10) |
| Website | [https://hyperframes.heygen.com/](https://hyperframes.heygen.com/) |
| Repo | [https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) |

**Core concept**: instead of a timeline editor, an AI agent **writes videos in HTML, CSS, and JavaScript**. The AI handles the script, structure, and scene pairing, generating compositions through code, then rendering them to MP4.

---

## Part 2: How it works

| Item | Description |
| --- | --- |
| Input | HTML / CSS / JS files |
| Rendering engine | Headless Chrome + FFmpeg |
| Output | MP4 video |
| Build step | None (files play directly, no bundler) |
| Designed for | AI agents (Claude Code, Cursor, Gemini CLI, Codex) |

> 💡 HyperFrames is "agent-first" by design, giving AI an environment that is easy to produce polished results in. It uses plain HTML instead of React components, so AI writes easily and non-developers can read it more easily.

---

## Part 3: Installation & usage

### Method A: AI coding agent (recommended)

 Copy

```
npx skills add heygen-com/hyperframes
```

After installing, operate via prompts in the agent, e.g.:

 Copy

```
Using /hyperframes, create a 10-second product intro
with a fade-in title, background video, and background music.
```

### Method B: Manual CLI

 Copy

```
npx hyperframes init my-video     # create project
cd my-video
npx hyperframes preview           # preview in browser
npx hyperframes render            # render to MP4
```

### Ready-made blocks (add directly to video)

| Command | Purpose |
| --- | --- |
| `npx hyperframes add flash-through-white` | White-flash transition |
| `npx hyperframes add instagram-follow` | IG follow overlay |
| `npx hyperframes add data-chart` | Data chart |

### Prerequisites

| Item | Version |
| --- | --- |
| Node.js | 22+ |
| FFmpeg | Required |
| npx | Bundled with npm |
| AI coding agent | Claude Code / Cursor / Gemini CLI / Codex (optional) |

---

## Part 4: Use cases

| Use case | Description |
| --- | --- |
| Product promos | Quickly produce branded short videos |
| Social clips | IG/TikTok sizes and overlays |
| Animated explainers | Generate animations with code |
| Data visualization | Turn dynamic charts into video |
| Subtitles / overlays | Programmatically overlay text and labels |
| Automated video workflows | Batch, programmatic generation of many videos |

---

## Part 5: HyperFrames vs Remotion

| Item | HyperFrames | Remotion |
| --- | --- | --- |
| Authoring | Plain HTML/CSS/JS | React components |
| Build step | None (files play directly) | Requires bundler |
| Designed for | AI agents | React developers |
| License | Apache 2.0 (free) | Paid for teams of 4+ |
| Cloud render scale | Local + Lambda | More mature |
| Underlying engine | Headless Chrome + FFmpeg | Same |

> 💡 Both share the same underlying engine, so output quality is basically equal; the difference is HyperFrames is friendlier to AI agents and non-developers, with no team-size pricing threshold.

---

## ⚠️ Considerations

| Consideration | Description |
| --- | --- |
| Requires coding ability | Suited to those familiar with programming or AI coding tools; pure no-code users should choose HeyGen's main platform |
| FFmpeg required | Local video encoding depends on FFmpeg |
| Different from hyperframe.ai | Don't confuse: [hyperframe.ai](http://hyperframe.ai) is a different commercial video platform |
| Real video footage needs separate handling | To include real video clips / manual cuts, still need traditional editors like Premiere |
| Fast-moving versioning | v0.8.x iterates quickly; API may change |

---

## 🔗 References

| Source | Link |
| --- | --- |
| Official docs | [https://help.heygen.com/en/articles/15001510-hyperframes-x-heygen](https://help.heygen.com/en/articles/15001510-hyperframes-x-heygen) |
| GitHub Repo | [https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) |
| Website | [https://hyperframes.heygen.com/](https://hyperframes.heygen.com/) |
| HyperFrames vs Remotion review | [https://www.getmasset.com/resources/blog/hyperframes-vs-remotion-review](https://www.getmasset.com/resources/blog/hyperframes-vs-remotion-review) |

---

*Source: HeyGen official docs, GitHub, and public reviews (October 2026)*