Skip to main content
HyperFrames keeps timing in HTML. A timed element normally needs a stable ID, a start, a duration, and a track:
Add class="clip" to timed DOM and image elements. The runtime keys visibility off data-start rather than the class, but the shared .clip rule is what gives a scene its full-frame box. Video visibility is managed by the media runtime; audio has no visual lifecycle.

​
Tracks are not layers

Tracks are the rows Studio draws. They do not decide which element is in front, and they do not schedule anything. Use CSS z-index for paint order. Two clips on one track may overlap; the render composites both. Separate tracks keep an intentional overlap, such as a crossfade, readable in Studio:

​
Start relative to another clip

A numeric data-start is an absolute time in seconds. A clip ID means “start when that clip ends.” Add or subtract seconds for a gap or overlap:
References resolve only inside the same composition. The referenced clip must have a known duration, and reference chains cannot contain a cycle.

​
Media and nested compositions

Media can also declare a source offset, playback rate, and volume. A nested composition adds a source path and its own fixed timeline window. These are exact contracts rather than new timing models. Use the HTML schema reference for every supported attribute and element-specific rule. Use Compositions to decide when a scene should become a separate composition.