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.
Why Hyperframes
- HTML is the timeline. Compositions are ordinary web pages — HTML, CSS, JavaScript, GSAP 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 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.How it works
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.
Preview and iterate
Render and preview locally with the Hyperframes tooling while you design, or explore community compositions to remix.
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.
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
Local & self-hosted
Render on your own machine or your own cloud (AWS Lambda, Google Cloud Run) with the Hyperframes developer tooling. Best while authoring and iterating.
HeyGen Cloud Rendering
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.
Where to go next
- Render a composition on HeyGen’s infrastructure → Hyperframes Cloud Rendering
- Combine a HeyGen avatar video with music, sound effects, and Hyperframes graphics into one finished video → Hyperframes + HeyGen
- The composition framework, component APIs, and local tooling → Hyperframes developer docs
- Explore and remix community-built compositions → Community Playground