Composition

A composition is one HTML document. No framework, no JSX, no project file. The renderer reads it the way a browser does — then samples it deterministically frame by frame.

What you'll learn

• The difference between an HTML document and a HyperFrames composition
• What raw markup looks like before and after timing is added
• How to size and pace a composition with knobs

Raw HTML vs composition

The composition is the same markup you'd write for any web page — plus three or four data-* attributes that turn it into video. Drag the slider to compare.

Before

After

⇔

The composition root

The first element with both data-width and data-height is the composition root. Anything outside it is ignored by the renderer — useful for hiding scaffolding, dev-only overlays, or notes.

If you omit data-duration on the root, the total length is inferred from the longest child track.

Children are tracks

Every direct child of the root with data-start or data-duration becomes a track. A track can be a media element, a <div>, a custom element, or a <canvas> you draw into yourself. Tracks may overlap in time; layering uses source order plus z-index.

Try the dimensions

Why not React?

Because every model, every templating engine, and every CMS already speaks HTML. A composition you can write in three lines of Vim is a composition an LLM can generate in one prompt, a templating system can serve from a server response, and a junior dev can read at 2am. React adds a build step, a runtime, and a hydration model that the renderer has to either reimplement or ignore. We chose ignore.

That said — if you like JSX, render to HTML and feed that to HyperFrames. The renderer is happy with whatever HTML you can produce.

Next

• Data attributes — the full reference table
• Timing & tracks — how the seek clock works