HyperFrames: Write HTML, Render Video, Built for Agents

Making video is slow.

Traditional video tools are timeline-driven: drag assets, tweak keyframes, render, export, tweak again, render again. You cannot automate this. You certainly cannot hand it to an AI. Premiere does not accept prompts.

If you want to generate video programmatically, or have an AI agent produce one from scratch, most stacks fight you.

HyperFrames takes a direct approach: treat video as code. HTML you already know. CSS you already know. Animation library of your choice. Write it, save it, preview it in the browser. Confirm it looks right. One command, and out comes an MP4.

It is a 24k-star Apache 2.0 open-source project. No per-render fees. No commercial thresholds.

What the Skills Do (and Don’t Do)

Installing the HyperFrames Skills gives your AI coding agent (Claude Code, Cursor, Gemini CLI, Codex, etc.) a complete video production workflow. It is not a magic “one-click generate video” button — it is a skill package that teaches the agent how to build a video project.

What the Skills provide:

• Project scaffolding: The agent runs npx hyperframes init to create a video project directory
• HTML and CSS authoring: The agent writes layout, typography, colors, and styles based on your description
• Animation wiring: The agent authors seekable animation timelines using GSAP, CSS Animation, Lottie, etc.
• Linting: The agent validates HTML structure and data attribute correctness
• Preview and render: The agent runs npx hyperframes preview and npx hyperframes render
• Design templates: The agent can pick from 10 frame.md templates (Biennale Yellow, BlockFrame, Blue Professional, etc.) for color palettes and typography
• Component Catalog: The agent can install reusable blocks — transitions, chart animations, caption overlays, social stickers, and more

What the Skills do NOT provide:

• Does NOT generate images: Product screenshots, illustrations, and background images are yours to supply
• Does NOT generate video footage: B-roll and background video clips must come from you
• Does NOT generate audio: Background music and voiceover narration need to be recorded or sourced by you
• Does NOT generate AI avatars: HyperFrames handles composition and rendering only — it does not create content assets

In one sentence: you supply the assets, the agent writes the code to compose them, HyperFrames renders the MP4.

Complete Usage Guide

1. Install the Skills

In your project directory, run:

npx skills add heygen-com/hyperframes

This downloads the HyperFrames production guidelines to .agents/skills/ in your project. After that, your AI coding agent can respond to hyperframes-related commands.

2. Prepare Your Assets

Gather your images, video clips, and audio files. Supported formats:

• Images: PNG, JPG, WebP, SVG
• Video: MP4
• Audio: WAV, MP3

These are yours to provide. If you need an AI avatar on screen, you can generate one with HeyGen first, then import it into HyperFrames for composition.

3. Give the Agent Instructions

Open your AI coding agent and describe what you want in natural language:

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

The agent automatically executes these steps:

1. Plans the video structure (how many shots, duration of each, sequence)
2. Runs npx hyperframes init to scaffold the project
3. Writes index.html — layout, CSS styles, data attributes
4. Authors animation timelines — GSAP or CSS Animation
5. References your provided asset files
6. Runs npx hyperframes lint to validate syntax
7. Runs npx hyperframes preview to open browser preview
8. After you confirm the result, runs npx hyperframes render to export MP4

Throughout this process, you never open a video editor.

4. Review and Export

Every render is deterministic — same index.html, same MP4 output every time. This means you can version-control your video project with Git, run renders in CI, and write regression tests.

Hands-On Example: A 5-Second Title Animation

Let’s walk through a minimal example that covers the full pipeline: install, use an agent, and get a video out. No external media required — just text, colors, and animation. You will see clearly who generates what, what the agent actually does, and how the final video comes together.

Step 1: Install Skills and Check Requirements

If your coding agent doesn’t have the Skills yet:

npx skills add heygen-com/hyperframes

This downloads the HyperFrames production guidelines (project structure, HTML syntax, animation wiring patterns, lint rules) into .agents/skills/. From this point on, your agent knows how to write video projects.

Make sure you have Node.js 22+ and FFmpeg installed — these are the rendering engine’s dependencies.

Step 2: Ask the Agent to Create the Project

In your coding agent, say:

Using hyperframes, create a 5-second title animation video demo.
Use a purple-to-blue gradient background, title "Hello HyperFrames",
subtitle "Write HTML. Render video." Title and subtitle should fade in
and slide up in sequence. No external media.

The agent runs the full production loop:

1. Calls npx hyperframes init demo to scaffold the project directory
2. Plans the 5-second time structure: title fades in at 0.5s, subtitle at 1.2s
3. Writes index.html: <style> for layout and colors, <div id="stage"> for the video composition, data attributes for tracks and timing
4. Authors the GSAP animation timeline: opacity + y displacement for title and subtitle, using paused: true so HyperFrames can seek frame-by-frame
5. Runs npx hyperframes lint to validate syntax
6. Runs npx hyperframes preview to check the result live in the browser

Step 3: See What the Agent Generated

The finished demo/index.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Demo</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1920px; height: 1080px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-family: system-ui, sans-serif;
    }
    .center {
      text-align: center;
      color: white;
    }
    .center h1 {
      font-size: 96px;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .center p {
      font-size: 36px;
      font-weight: 300;
      opacity: 0.8;
    }
  </style>
</head>
<body>
  <div id="stage" data-composition-id="main" data-start="0" data-width="1920" data-height="1080">
    <section class="clip center" data-start="0" data-duration="5" data-track-index="0">
      <h1>Hello HyperFrames</h1>
      <p>Write HTML. Render video.</p>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("h1", { opacity: 0, y: 60, duration: 1, ease: "power3.out" }, 0.5);
    tl.from("p", { opacity: 0, y: 30, duration: 0.8, ease: "power3.out" }, 1.2);
    window.__timelines = window.__timelines || {};
    window.__timelines.main = tl;
  </script>
</body>
</html>

Notice what each part is and who provides it:

• Images: No images used here. The gradient background and text layout are written in CSS, rendered frame-by-frame by HyperFrames’ headless Chrome engine. If you need product screenshots in your video, place the image files in the project directory and the agent will reference them with <img src="screenshot.png"> — images are provided by you, not generated by the agent.
• Video footage: No video clips used. All motion comes from the GSAP animation timeline — text fading in (opacity 0 → 1) and sliding up (y offset → 0). If you need background video, put your mp4 files in the project directory and the agent references them with <video src="..."> — video clips are provided by you, not generated by the agent.
• Audio: No audio used. This demo is silent. If you need background music or voiceover, put your wav/mp3 files in the project directory and the agent references them with <audio src="..."> — audio files are provided by you, not generated by the agent.
• Animation: The GSAP animation is JavaScript code written by the agent. paused: true + window.__timelines is the seekable animation pattern required by HyperFrames so the renderer can jump to any frame.
• Video rendering: The final MP4 is produced by npx hyperframes render, which drives headless Chrome to capture each frame and FFmpeg to encode — this is HyperFrames at work, not the agent. The agent only writes HTML and runs the commands.

Step 4: Preview and Render

Once the agent confirms syntax is clean:

npx hyperframes preview   # check the result in your browser
npx hyperframes render    # export demo.mp4

You get demo.mp4 in your demo/ directory. A 5-second animated video on a purple-blue gradient background where the title and subtitle fade in and slide up in sequence.

Step 5: Make It Your Own

Hand the HTML back to your agent: “Swap the title with my product name, replace the colors with my brand colors, and add a PNG logo in the top-left corner.” The agent changes the CSS gradient values, replaces the text, and adds an <img> tag referencing your logo file. You only need to provide logo.png — the agent handles everything else.

Core Design: HTML Is the Video Source File

HyperFrames is built on an idea so intuitive it is easy to miss: anything a browser can render, you should be able to export as video.

Your project directory contains an index.html file that defines the entire composition:

<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>

Data attributes (data-start, data-duration, data-track-index) tell the engine when each element appears, how long it lasts, and which track it belongs to. Animations use whatever library you prefer: GSAP, CSS Animation, Lottie, Three.js, Anime.js, WAAPI.

Three commands from start to finish:

npx hyperframes init my-video    # scaffold
npx hyperframes preview           # browser preview with live reload
npx hyperframes render            # render to MP4

The renderer captures each frame in headless Chrome and encodes the result with FFmpeg. The same HTML input produces the same MP4 output every time. CI-ready. Regression-testable. Agent-controllable.

Why Agents Need This

AI coding agents already write decent HTML. Ask them to make a video, though, and they freeze.

The reason is simple: existing video workflows are not file-driven. After Effects, Premiere, and Final Cut all depend on GUI operations. An agent has no editable source file to work with.

HyperFrames changes that premise: the agent does not need to operate a video tool. It just needs to write HTML.

With the Skills installed, the agent gains complete video production knowledge — project structure, HTML syntax conventions, animation wiring patterns, lint checks, preview and render commands. The agent handles assembly. You supply assets and review the result.

frame.md: Translating Your Design System for Video

Your team probably has a design.md that defines colors, fonts, and spacing. That spec is written for web pages and apps, not 1920×1080 frames at 24fps.

frame.md bridges that gap.

It takes your existing design specification and produces video-native instructions: the same color tokens, the same font rules, but rewritten so an agent can compose a branded video from them — how large elements should be, how fast motion should feel, how the composition should breathe.

The output is a DESIGN.md superset readable by your entire toolchain. Ten template designs are available out of the box: Biennale Yellow, BlockFrame, Blue Professional, Bold Poster, Broadside, Capsule, Cartesian, Cobalt Grid, Coral, and Creative Mode.

Where It Shines

Product launch videos and feature announcements.

You already have product screenshots and copy. Arrange them in HTML, add fade-in and slide-up transitions, export. You get a polished launch video. Need to change the copy? Edit the HTML, not the timeline.

Repeatable, automated video pipelines.

Feed data into HTML templates — reports, weather, scores, dashboards — render them to video on a schedule, push to social media. Nobody opens a video editor.

Agent-driven video production.

PR walkthroughs with animated diffs, docs-to-video explainers, data visualization animations. Any video need where the content follows a pattern and needs to be produced at scale is a fit. The agent handles structure and logic. You approve the final result.

HyperFrames vs Remotion

HyperFrames is openly inspired by Remotion. Both tools render video with headless Chrome and FFmpeg.

The difference is the authoring model:

Dimension	HyperFrames	Remotion
Authoring	Plain HTML + CSS + seekable animation	React components
Build step	None; index.html plays as-is	Bundler required
Agent friendliness	Native; agents write HTML files directly	Agents must understand React/JSX projects
Distributed rendering	Local + AWS Lambda	Remotion Lambda (mature cloud renderer)
License	Apache 2.0	Remotion License (source-available)

The case for HyperFrames is clear: if you want agents to make video, or you do not want React in your video projects. The case for Remotion is also clear: if your frontend team is deep into React, Remotion’s component model will feel more natural.

What to Watch For

It is not an After Effects replacement.

If you need complex motion graphics, particle effects, or frame-level polish, After Effects is still the right tool. HyperFrames wins on automation, reproducibility, and agent compatibility — not hand-tuned precision.

You must supply your own assets.

Images, video clips, and audio files all need to come from you. The Skills teach the agent how to compose video, but they do not generate content assets out of thin air. If you need an AI avatar, generate one with HeyGen first, then import it into HyperFrames for composition.

You need to know HTML and CSS.

The bar is low, but it is not zero. If you have zero frontend experience, the ramp will be steeper than expected. The good news: the agent can write most of the HTML. You review and adjust.

Video rendering needs compute.

Local rendering relies on headless Chrome and FFmpeg. Long videos or high resolutions will consume significant CPU. For high-frequency rendering, use the AWS Lambda distributed path.

Seekable animation has a learning curve.

HyperFrames requires seekable animation — the timeline must jump to any frame and maintain consistent state. GSAP’s paused: true plus seek() handles this. If you are used to wall-clock patterns like setTimeout, you will need to adapt.

Closing

The bottleneck in video production is not a lack of tools. It is that those tools were never designed for code and automation.

HyperFrames does one thing: it turns the video format from a timeline file into an HTML file. That shift means three things: you can version-control it with Git, you can render it in CI, and your agent can produce a complete video independently.

If you are already using an AI coding agent, HyperFrames is the closest you will get to saying “make me a video” and actually getting one.

GitHub: https://github.com/heygen-com/hyperframes

Design templates: https://www.hyperframes.dev/design

Playground: https://www.hyperframes.dev