> ## Documentation Index
> Fetch the complete documentation index at: https://heygen-1fa696a7.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction to Hyperframes

> Hyperframes turns HTML compositions into rendered video — a code-driven, deterministic video framework built for agents and developers. Write HTML, render video.

**Hyperframes is a video framework that turns an HTML composition into a rendered video.** You author a scene as a self-contained HTML/CSS/JS page, and Hyperframes plays its timeline through a headless browser and encodes the result to a video file. The tagline says it best: **write HTML, render video — built for agents.**

<Frame caption="Code 3D Extrude — a catalog block built entirely from HTML, CSS, and WebGL, rendered to video by Hyperframes.">
  <video autoPlay loop muted playsInline poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png">
    <source src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" type="video/mp4" />
  </video>
</Frame>

If you can build a web page, you can build a video. And because the whole composition is code, it's trivial for an AI agent or a backend pipeline to generate, parameterize, and render thousands of variations without ever opening a video editor.

<Note>
  This page introduces the framework and its concepts. When you're ready to render on HeyGen's infrastructure via the API, go to [Hyperframes Cloud Rendering](/hyperframes).
</Note>

## Why Hyperframes

* **HTML is the timeline.** Compositions are ordinary web pages — HTML, CSS, JavaScript, [GSAP](https://gsap.com/) animations, WebGL shaders. No proprietary editor format to learn.
* **Deterministic rendering.** Same input, identical output, every time. A composition renders frame-for-frame identically whether it runs on your laptop or HeyGen's cloud — essential for reproducible, automated pipelines.
* **Parameterized by design.** Read runtime values from the document and override them at render time, so one bundle produces many videos (see [Variables](#core-concepts) below).
* **Built for agents and pipelines.** Programmatic authoring and rendering means an LLM or a service can produce finished video end to end.
* **A rich component library.** 150+ prebuilt blocks and components — code animations, data visualizations, social cards, lower thirds, shader transitions, device mockups, and more.

## See what you can build

Every clip below is a catalog block — pure HTML/CSS/JS, rendered to video by Hyperframes. Click any preview to open its source in the [catalog](https://hyperframes.heygen.com/catalog).

export const HF_ASSET = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks";

export const catalog = [{
  slug: "code-typing",
  label: "Typing code"
}, {
  slug: "data-chart",
  label: "Animated data charts"
}, {
  slug: "transitions-3d",
  label: "3D transitions"
}, {
  slug: "swirl-vortex",
  label: "Swirl vortex shader"
}, {
  slug: "gravitational-lens",
  label: "Gravitational lens"
}, {
  slug: "glitch",
  label: "Glitch"
}, {
  slug: "light-leak",
  label: "Light leak"
}, {
  slug: "ripple-waves",
  label: "Ripple waves"
}, {
  slug: "app-showcase",
  label: "App showcase"
}, {
  slug: "cinematic-zoom",
  label: "Cinematic zoom"
}, {
  slug: "ios26-liquid-glass",
  label: "Liquid glass UI"
}, {
  slug: "spotify-card",
  label: "Spotify card"
}, {
  slug: "tiktok-follow",
  label: "TikTok follow"
}, {
  slug: "instagram-follow",
  label: "Instagram follow"
}, {
  slug: "lt-mask-reveal",
  label: "Lower third — mask reveal"
}, {
  slug: "lt-clean-bar",
  label: "Lower third — clean bar"
}, {
  slug: "news-ticker",
  label: "News ticker"
}];

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: "1rem", marginTop: "1.5rem" }}>
  {catalog.map((b) => (
      <a key={b.slug} href={`https://hyperframes.heygen.com/catalog/blocks/${b.slug}`} target="_blank" rel="noreferrer" style={{ textDecoration: "none", display: "block" }}>
        <video autoPlay loop muted playsInline poster={`${HF_ASSET}/${b.slug}.png`} style={{ width: "100%", borderRadius: "12px", display: "block", aspectRatio: "16 / 9", objectFit: "cover" }}>
          <source src={`${HF_ASSET}/${b.slug}.mp4`} type="video/mp4" />
        </video>
        <span style={{ display: "block", marginTop: "0.5rem", fontSize: "0.85rem", opacity: 0.7 }}>{b.label}</span>
      </a>
    ))}
</div>

## How it works

<Steps>
  <Step title="Author a composition">
    Build a scene as a self-contained HTML page — layout in CSS, motion in GSAP or your animation runtime of choice, timing driven by Hyperframes data attributes.
  </Step>

  <Step title="Preview and iterate">
    Render and preview locally with the Hyperframes tooling while you design, or explore community compositions to remix.
  </Step>

  <Step title="Render to video">
    Render to MP4, MOV, WebM, GIF, or a PNG sequence — locally, or on HeyGen's hosted cloud via the [Cloud Rendering API](/hyperframes).
  </Step>
</Steps>

## Core concepts

| Concept                     | What it is                                                                                                                                       |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Composition**             | The fundamental building block — a video scene defined in HTML.                                                                                  |
| **Data attributes**         | The `data-*` hooks that control timing and playback behavior for elements in a composition.                                                      |
| **Variables**               | Values you parameterize a composition with (via `data-composition-variables`), overridden at render time to produce many videos from one bundle. |
| **Frame adapters**          | Integration points for custom animation runtimes beyond the defaults.                                                                            |
| **Deterministic rendering** | The guarantee that identical inputs produce byte-for-byte identical frames across machines.                                                      |

## Ways to render

<CardGroup cols={2}>
  <Card title="Local & self-hosted" icon="laptop-code" href="https://hyperframes.heygen.com/packages/core">
    Render on your own machine or your own cloud (AWS Lambda, Google Cloud Run) with the Hyperframes developer tooling. Best while authoring and iterating.
  </Card>

  <Card title="HeyGen Cloud Rendering" icon="cloud" href="/hyperframes">
    Upload your project bundle and let HeyGen render it — no infrastructure to run. Billed per minute of output. This is the path documented in these API docs.
  </Card>
</CardGroup>

## Where to go next

* Render a composition on HeyGen's infrastructure → [Hyperframes Cloud Rendering](/hyperframes)
* Combine a HeyGen avatar video with music, sound effects, and Hyperframes graphics into one finished video → [Hyperframes + HeyGen](/hyperframes-heygen)
* The composition framework, component APIs, and local tooling → [Hyperframes developer docs](https://hyperframes.heygen.com/packages/core)
* Explore and remix community-built compositions → [Community Playground](https://www.hyperframes.dev)