HyperFrames: Turn HTML Into Repeatable, Editable Videos

HyperFrames is an open-source framework that turns HTML into video. You describe the video to an AI coding agent, which creates an editable project; HyperFrames can then preview or render that project frame by frame. It’s a good fit for repeatable, code-based video production, not a hosted service that automatically generates finished videos from a prompt.

What HyperFrames does

A HyperFrames video is built as an HTML document, with elements and timing defined in the project. You can use familiar web technologies such as CSS and JavaScript, and add animation with GSAP, Lottie, or another runtime that can seek to a specific frame. There’s no proprietary video format or required React setup.

The main distinction from a conventional AI video generator is the workflow: HyperFrames renders web-based compositions rather than routing prompts to video-generation models. Its documentation describes a frame-by-frame capture process using headless Chrome and FFmpeg. Because the renderer seeks to specific frames instead of recording live playback, rendering is designed to produce consistent output even when a machine’s playback performance varies.

Projects remain editable after the first render. You can revise the HTML, use an AI agent to make changes, or open the same project in Studio.

Is HyperFrames open source?

Yes. The official documentation describes HyperFrames as an open-source framework. Its quickstart says the framework is free, and local rendering does not use HeyGen credits. Optional hosted services, voice tools, avatars, or generated media may have their own costs.

That distinction matters: HyperFrames provides the project format and rendering workflow, while optional services you connect to it may have separate terms or charges. The available research does not specify a license name, so check the project’s official repository if you need to confirm license terms for commercial or redistributed use.

How to make your first video

The quickest route is to use a compatible coding agent from inside your project folder. HyperFrames’ official quickstart gives this sequence:

Install the HyperFrames skills. If the plugin for your agent is not installed, run:
```
npx hyperframes skills update
```
Or install the standalone skills with:
```
npx skills add heygen-com/hyperframes
```
Select Core Skills if the installer offers a picker, then open or restart the coding agent in that folder.
Ask the agent to make a short video. For example:
```
Using /hyperframes, make a 10-second product intro for https://example.com
```
Replace the example URL with the page you want to feature. The agent can propose a direction and ask for missing details before building the project.
Review the local preview. Check the story, facts, text readability, and sound. The quickstart explicitly says the first version is not guaranteed to be a final cut.
Revise or render. You can ask the agent to edit the project, open it in Studio, or use the CLI from the project folder:
```
npx hyperframes preview
npx hyperframes render --output video.mp4
```

These commands come from the official quickstart. For agent-specific setup details, use the HyperFrames documentation linked from this site, then follow its plugin or standalone-skills instructions.

Build and render without an AI agent

You can also create a composition yourself as HTML. The official introduction describes adding timing and layout through data attributes such as data-start, data-duration, and data-track-index, then using animations that can seek to a given frame.

Once your project is ready, the documented basic commands are:

npx hyperframes preview
npx hyperframes render --output output.mp4

The first opens a live browser preview; the second creates an MP4. The documentation also describes running renders locally, in Docker, or in a CI pipeline. The research does not provide a complete list of system requirements or a specific installation command for every operating system, so check the official Quickstart before setting up a new machine.

Planning a video before you build

A short production brief makes the agent’s first draft easier to evaluate. Before you ask it to create a project, write down:

Purpose: What should a viewer understand or do after watching?
Audience: Who is the video for?
Length and format: Specify the runtime and whether the target is landscape, portrait, or square.
Scenes: List the opening, main points, and ending in order.
Source material: Provide the page URL, approved text, images, data, or footage the video should use.
Constraints: Note required wording, brand colors, sound, and facts that must not change.

For instance, a product intro might have an opening title, two scenes showing core features, and a final scene with a call to action. Ask the agent to create a project from that outline, then inspect each scene in preview before rendering. This gives you a practical storyboard without requiring a separate video-editor project format.

What kinds of projects can it make?

The official introduction showcases examples including animated data cards, edits of the same footage into several vertical videos, music-synchronized scenes, and a video explaining a pull request. Those examples illustrate the range of HTML-based compositions; they do not mean HyperFrames automatically supplies the data, footage, or music analysis for every project.

It’s most useful when you want precise layouts, reusable templates, or a batch of related videos that share a project structure. If you need a generative video model to invent realistic footage directly from a prompt, HyperFrames is a different category of tool.

FAQ

Does HyperFrames generate video from a text prompt by itself?

The documented workflow uses an AI agent to build an editable HTML project from your request, then HyperFrames previews or renders it. The available sources do not describe HyperFrames itself as a service that generates footage from text prompts.

Do I need to know HTML or JavaScript?

Not for the agent-led quickstart path: you can describe the video and have an agent create the project. HTML, CSS, and JavaScript knowledge is useful when you want to build or adjust compositions directly.

Does local rendering cost credits?

The official quickstart says local rendering does not use HeyGen credits. Optional hosted, voice, avatar, or generated-media services may have their own costs.

Can I edit a video after rendering it?

Yes. The result is an editable project folder, not just a flattened video file. You can revise it with an agent, edit the project yourself, or open the same project in Studio, then render another version.

Where should I start?

Start with the official introduction and Quickstart. Install the skills for your coding agent, make a short test video, inspect the preview, and render with npx hyperframes render --output video.mp4.