Data attributes
Every HyperFrames data-* attribute, what it does, and what it looks like in isolation. The quick-jump reference.
HyperFrames reads timing and layout from HTML data-* attributes. They are inert in a normal browser and stripped from the captured DOM, so they never leak into the rendered pixels.
What you'll learn
- The full attribute table for roots, tracks, and media
- What
data-fadeanddata-looplook like on their own - Where to find the JSON schema that backs all of this
Composition root
| Attribute | Required | Default | Description |
|---|---|---|---|
data-width | yes | — | Output width in pixels. |
data-height | yes | — | Output height in pixels. |
data-duration | no | inferred | Total duration in seconds. If omitted, derived from longest child track. |
data-fps | no | 60 | Output frame rate. |
data-bg | no | #000 | Background color when transparent encoding is off. |
Tracks
| Attribute | Description |
|---|---|
data-start | Seconds from composition start. |
data-duration | How long this track is on stage. |
data-end | Alternative to data-duration. |
data-loop | If present, the track loops within its window. |
data-fade | "in", "out", or "both" — applies a 200 ms fade. |
data-track | Optional name for the inspector. |
Media
| Attribute | Applies to | Description |
|---|---|---|
data-volume | <audio>, <video> | 0–1 mix gain. |
data-mute | <audio>, <video> | Strips audio from this track. |
data-trim-start | <audio>, <video> | Seconds to skip into the source file. |
data-speed | <audio>, <video> | Playback rate (also re-pitches audio). |
data-fade in isolation
0.00s
data-loop in isolation
0.00s
Combined example
html
<div data-width="1920" data-height="1080" data-fps="60">
<video src="b-roll.mp4" data-start="0" data-duration="6" data-volume="0.4"/>
<h1 data-start="1" data-duration="4" data-fade="both">Title</h1>
<audio src="music.mp3" data-loop data-volume="0.6"/>
</div>Validation
Every attribute is type-checked by the linter. hyperframes lint comp.html --json returns a structured list of attribute errors, including the exact byte offset — perfect for agent self-correction loops.
Next
- Composition — the mental model these attributes hang off of
- Schema reference — the machine-readable spec