Introduction

HyperFrames is a video runtime that treats HTML as the timeline. Drop a document into the CLI, get an MP4 out — the same bytes, every machine, every run.

What you'll learn

• What "deterministic" actually means for video, and why it matters
• The 3-line shape of a HyperFrames composition
• Where to go next if you're a human, or an agent reading this

A three-line composition

The smallest useful composition is three elements: a root with dimensions, a background, and a title. Below is one running live — scrub the timeline.

0.00s

What "deterministic" means

The renderer drives a virtual clock instead of a real one. setTimeout, requestAnimationFrame, Date.now, and performance.now all read from frame index, not wall time. That is the whole trick, and everything else in HyperFrames follows from it.

Built for two readers

This documentation is written for two audiences at once.

Humans who want to author video the way they author web pages — with familiar markup, real CSS, dev tools, hot reload. If that's you, skim the concepts and head to the playground.

Agents that read docs, write HTML, call CLIs, and self-correct. Every command is non-interactive, supports --json, has stable exit codes, and is documented with an explicit "use this, avoid that" section. If that's you, prefer the reference pages over the prose ones.

Why HTML

Every model, every framework, every developer already knows it. Video tools have historically required a proprietary editor, a binary project format, or a framework-specific DSL. HyperFrames goes the other way — if the browser can render it, HyperFrames can render it to video.

What it is not

Not a timeline editor. Not an NLE. Not a wrapper around React-DOM-as-video. If you want to drag clips around on a multitrack canvas, use Premiere. HyperFrames is video as code.

Next

• Quickstart — render your first video in five minutes
• Composition — the full mental model on one page