HyperFrames

Write HTML. Render video. Built for agents.

HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.

What You Can Build

• Product launch videos and feature announcements
• PR walkthroughs with animated code diffs, narration, and captions
• Data visualizations, chart races, and map animations
• Social videos with kinetic captions, overlays, and music
• Docs-to-video, PDF-to-video, and site-tour explainers
• Reusable motion graphics for automated content pipelines

Preview of Designs

The frame.md design system takes your web-context design spec and inverts it for the frame, so an AI agent can compose a promo video without guessing at scale. Below are some available design templates:

Browse and remix them all at hyperframes.dev/design.

Core Capabilities

HyperFrames ships 19 skills agents load on demand, covering a router, creation workflows, and domain skills. The following table summarizes the full stack:

Key characteristics:

• HTML-native: compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
• Agent-friendly: agents already write HTML, and the CLI is non-interactive by default.
• Deterministic: same input, same frames, same output. Built for CI, regression tests, and automated rendering.
• No build step: an index.html composition plays as-is and can be previewed directly in the browser.
• Adapter-based animation: bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
• Open source: Apache 2.0 license, with no per-render fees or commercial-use thresholds.

How It Works

1. You provide input: a description (prompt), a URL, a GitHub PR link, an audio file, or other media.
2. An AI coding agent (e.g., Claude Code, Cursor, Gemini CLI, Codex) or the local CLI uses HyperFrames skills to plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and finally render.
3. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, producing a deterministic MP4.

Here is a simple HTML composition example:

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video
    class="clip"
    data-start="0"
    data-duration="6"
    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">Launch day</h1>

  <audio
    data-start="0"
    data-duration="6"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  ></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
    window.__timelines = window.__timelines || {};
    window.__timelines.launch = tl;
  </script>
</div>

Preview and render commands:

npx hyperframes preview      # preview in browser with live reload
npx hyperframes render       # render to MP4

What You Need to Provide

• When using an AI agent: a textual prompt (e.g., "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music") and a compatible agent (Claude Code, Cursor, Gemini CLI, Codex, or other coding agents that support skills).
• When using the CLI locally: Node.js 22+ and FFmpeg installed. You also need to prepare the HTML files, media assets, and any animation scripts.

What You Get

• A deterministic MP4 video file where the same input always produces the same output.
• For the slideshow workflow, a navigable presentation deck (not a rendered video).

Example Usage

A typical prompt for an AI agent:

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

The agent will then plan the video, write the HTML, add media and animations, lint, preview, and render it.

Selection Guide

Skill Selection

HyperFrames provides 19 skills that agents load on demand. Start with the /hyperframes router skill — it serves as a capability map and intent router, selecting the appropriate workflow for any "make me a…" request.

Router Skill

Creation Workflows

Domain Skills (loaded on demand)

HyperFrames vs Remotion

HyperFrames is inspired by Remotion. Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model:

Notes

• Prerequisites: For local CLI usage, Node.js 22+ and FFmpeg are required.
• AI agents: The skills are designed to work with coding agents that support skills, such as Claude Code, Cursor, Gemini CLI, and Codex.
• Determinism: Rendering is fully deterministic — the same input always produces the same output, making it suitable for CI/CD and regression testing.
• Open source: Licensed under Apache 2.0, with no per-render fees or commercial-use thresholds.
• Limitation: The slideshow workflow outputs a navigable deck, not a video file.

For full documentation, visit hyperframes.heygen.com.