Skip to main content
Hyperframes is an open-source framework that turns HTML into deterministic, frame-by-frame rendered video — so you can define a video the same way you build a web page.

​
See It in Action

Here is a video defined entirely as HTML: 
<div id="root" data-composition-id="demo"
     data-start="0" data-width="1920" data-height="1080">

  <video id="clip-1" data-start="0" data-duration="5"
         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"
      style="font-size: 72px; color: white;">
    Welcome to Hyperframes
  </h1>

  <audio id="bg-music" data-start="0" data-duration="5"
         data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>
Run npx hyperframes render -o demo.mp4 and this produces an MP4 with deterministic, frame-by-frame capture. Same input, identical output, every time. No timeline editor. No proprietary format. Just HTML.

​
Why Hyperframes?

You already know the stack. Compositions are HTML files with data attributes. Animations use GSAP, Lottie, CSS, or any runtime that can seek to a given frame. There is no custom DSL, no proprietary component system, and no React requirement. If you can build a web page, you can build a video.
Hyperframes was designed from the ground up for AI agent integration. Because compositions are plain HTML, any LLM can generate, edit, and iterate on video content without specialized tooling. Pair it with function-calling agents to build fully automated video pipelines.

​
How It Works

1

Write HTML

Define your video as an HTML document. Each element gets data attributes for timing (data-start, data-duration) and layout (data-track-index). Add animations with GSAP, Lottie, CSS transitions, or any seekable runtime via the Frame Adapter pattern.
2

Preview in the browser

Run npx hyperframes dev to open a live preview at localhost:3000. Edit your HTML and see changes instantly — no build step, no compilation.
3

Render to MP4

Run npx hyperframes render -o output.mp4 to produce a final video. The engine seeks each frame in headless Chrome, captures it with beginFrame, and pipes the result through FFmpeg. Run locally or in Docker for fully reproducible output.

​
Packages

@hyperframes/core

Types, HTML parsing, runtime, and composition linter — the foundation everything else builds on.

@hyperframes/engine

Seekable page-to-video capture engine. Loads HTML in headless Chrome and captures frame-by-frame.

@hyperframes/producer

Full rendering pipeline combining capture and FFmpeg encoding into a single API call.

@hyperframes/studio

Visual composition editor UI for building and previewing timelines interactively.

hyperframes (CLI)

Command-line tool for creating, previewing, and rendering compositions.

​
Next Steps

Quickstart

Build and render your first video in 60 seconds

Compositions

Understand the HTML-based data model behind every video

GSAP Animation

Add timeline-driven animations with GSAP

Rendering

Render locally, in Docker, or in a CI pipeline