# HyperFrames

> Write HTML, get a deterministic MP4 — a video renderer built for agents

- Category: Multimodal Generation / Video Generation
- Language: TypeScript
- Licence: Apache-2.0
- Repository: https://github.com/heygen-com/hyperframes
- Canonical page: https://ai-tldr.dev/tools/hyperframes/
- Updated: 2026-04-17

## In short

HyperFrames turns a web page into a video file. It sits in the Video Generation category of the Multimodal Generation tools and is open-source, written in TypeScript and licensed Apache-2.0. To get started: scaffold a project.

## Overview

HyperFrames turns a web page into a video file. A composition is ordinary HTML, CSS, JavaScript and media, annotated with data attributes that tell the renderer how the timeline seeks; the renderer steps through that timeline frame by frame and encodes the result to MP4. Because the composition is a real page, it also just works in a browser — there is no build step and no proprietary scene format to learn.

Determinism is the property the project is built around: the same input produces the same video. That is what makes it usable from an agent, which is the stated audience — an agent can write a composition, render it, look at the output and edit the HTML, and the loop converges instead of drifting. The project ships agent skills for Claude, Cursor, Gemini CLI and other coding agents, and a catalog of pre-built blocks (transitions, overlays, captions, charts) to start from.

Animation is not reinvented: GSAP, plain CSS, Lottie, Three.js, Anime.js and the Web Animations API are all supported, provided they can be seeked. Rendering runs locally or distributed on AWS Lambda for longer pieces, and a browser-based studio is included for previewing and editing compositions by hand.

## What it does

- Compositions are plain HTML/CSS/JS with data attributes — no build step, and they open in a browser as-is
- Deterministic rendering: the same input always produces the same video
- Seekable animation support for GSAP, CSS, Lottie, Three.js, Anime.js and WAAPI
- Agent skills for Claude, Cursor, Gemini CLI and other coding agents
- A catalog of ready-made blocks: transitions, overlays, captions, charts
- Local rendering or distributed rendering on AWS Lambda, plus a browser studio for preview and editing

## Getting started

Everything runs through the `hyperframes` CLI via npx — scaffold a project, preview it with live reload, then render.

1. Scaffold a project

   Creates a starter composition you can open and edit.

```bash
npx hyperframes init my-video
cd my-video
```

2. Preview in the browser

   Serves the composition with live reload so you can iterate on the HTML and see the timeline update.

```bash
npx hyperframes preview
```

3. Render to MP4

   Steps the timeline frame by frame and encodes the output.

```bash
npx hyperframes render
```

4. Install the agent skill

   If you want a coding agent to author compositions for you, the project publishes a skill installable through the skills CLI.

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

## When to use it

- Let a coding agent produce a finished video by writing and iterating on HTML rather than driving a video editor
- Generate per-customer or per-record videos from data, reusing your existing web components
- Build repeatable motion-graphics templates — lower thirds, captioned clips, chart animations — as code in version control
- Render long pieces on AWS Lambda instead of tying up a workstation

## Version history

- 2026-04-17: HeyGen open-sourced HyperFrames under Apache-2.0 as an agent-first HTML-to-video renderer, shipping with a Claude Code skill installable through the skills CLI.