Skip to main content
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.

Code 3D Extrude — a catalog block built entirely from HTML, CSS, and WebGL, rendered to video by Hyperframes.

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

1

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

Preview and iterate

Render and preview locally with the Hyperframes tooling while you design, or explore community compositions to remix.
3

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

​
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