HyperFrames

HyperFrames is an open-source video authoring system for AI agents and developers, using HTML, CSS, and JavaScript for local preview and rendering.

AI Video Editor AI Agent Development AI Developer Tools

Visit Website

Overview

HyperFrames is an open-source video authoring system that lets AI agents compose videos by writing HTML, CSS, and JavaScript. The site describes it as originating at HeyGen and being built for the community under the Apache 2.0 license.

The quickstart shows two main ways to work with it: use an AI coding agent with installed HyperFrames skills, or create a project manually with the CLI. In both cases, the workflow centers on building a composition, previewing it in Hyperframes Studio, and rendering video output such as MP4.

The documentation also exposes a catalog of reusable blocks, including a 3D iPhone and MacBook showcase block that uses GLTF models and live HTML-in-Canvas screen content. That suggests HyperFrames is meant for composable, code-driven video scenes rather than a closed visual-only tool.

Features

Code-based video composition

HyperFrames is described as a way for AI agents to compose videos by writing HTML, CSS, and JavaScript, using familiar web primitives instead of a separate visual editor.

Agent-driven workflows

The quickstart documents an AI-agent workflow where you install HyperFrames skills and let the agent route a request to the appropriate video workflow.

Skill-based task routing

The core skill set includes composition structure, animation adapters, creative direction, CLI tooling, media preprocessing, and a registry for catalog blocks and components.

Project scaffolding and file layout

The manual workflow includes `npx hyperframes init`, an interactive project wizard, and a project structure with `index.html`, `compositions/`, `assets/`, and `meta.json`.

Local preview with live updates

`npx hyperframes preview` opens Hyperframes Studio in the browser, supports hot reload, and updates the composition when files change.

Reusable catalog blocks

The site also documents catalog blocks such as `vfx-iphone-device`, which install into a host composition and include assets like GLTF models and HTML-in-Canvas content.

Use Cases

AI-assisted video creation
Use HyperFrames when you want an AI agent to draft a video composition from a prompt, then refine the result through code-based edits.
Manual local video projects
Use the CLI workflow when you want to initialize a project manually, inspect the generated file structure, and work directly in `index.html` and sub-compositions.
Reusable motion and showcase scenes
Use the reusable block catalog when you are building a repeated scene type such as a device showcase or a product demo with structured assets and predefined composition patterns.
Fast iteration in the browser
Use the preview and hot-reload loop when you need to iterate quickly on timing, layout, captions, or animation while watching the composition update in the browser.

Pros and Cons

Pros

Lets AI agents generate and edit video compositions from HTML, CSS, and JavaScript.
Supports both agent-assisted and manual CLI-based workflows.
Provides a preview loop through Hyperframes Studio with hot reload.
Includes documented skills and catalog blocks that help standardize composition structure and reuse common patterns.
Is open source under Apache 2.0, which is explicitly stated on the site.

Cons

The documentation shown here is partial, so some capabilities, integrations, and platform details are not fully described on the public pages provided.
Manual use requires local prerequisites such as Node.js 22+ and FFmpeg, which adds setup work for users who do not already have them installed.
The page set does not provide pricing details or a complete list of supported integrations.

FAQ

How do I start using HyperFrames?

You can get started by installing the HyperFrames skills with `npx skills add heygen-com/hyperframes`, then either prompt an AI coding agent or create a project manually with `npx hyperframes init`.

Which AI agents does HyperFrames support?

The quickstart says HyperFrames works with AI coding agents such as Claude Code, Cursor, Gemini CLI, Codex, Google Antigravity, and GitHub Copilot CLI when the skills are installed.

What do I need to run HyperFrames locally?

For manual projects, the documented prerequisites are Node.js 22+ and FFmpeg for local rendering.

How does previewing work?

The quickstart says `npx hyperframes preview` opens Hyperframes Studio in the browser and updates the preview automatically when `index.html` changes.

What format do HyperFrames compositions use?

The source shows HyperFrames compositions are built with HTML, CSS, JS, `data-*` attributes, and timed elements such as `class="clip"`, but it does not describe a separate hosted integration layer.