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 so the runtime can control their visibility. Video visibility is managed by the media runtime; audio has no visual lifecycle.

​
Tracks are not layers

Tracks prevent time ranges from colliding. They do not decide which element is in front. Use CSS z-index for paint order. Two clips on one track cannot overlap. Put an intentional overlap, such as a crossfade, on separate tracks:

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