HTML schema
Every data-* attribute the HyperFrames renderer reads, in one searchable reference for composition, tracks, and media.
HyperFrames does not invent a new template language. It reads ordinary HTML and looks for a small, stable set of data-* attributes. Anything else is yours: classes, inline styles, CSS variables, web fonts.
This page lists every attribute the renderer respects, grouped by where it can appear.
Composition root
Set on <html> or the first <body>. The renderer reads exactly one composition root per file.
| Attribute | Type | Default | Meaning |
|---|---|---|---|
data-duration | seconds | required | Total length of the composition. |
data-fps | integer | 60 | Frame rate. Must match the --fps render flag if both are set. |
data-width | px | 1920 | Logical width. Render scales to --width if different. |
data-height | px | 1080 | Logical height. |
data-bg | css color | transparent | Background color drawn under every frame. |
data-seed | integer | 0 | Seed for any deterministic randomness in user JS. |
data-loop | bool | false | When true, time wraps to 0 at data-duration. |
<html data-duration="5" data-fps="60" data-width="1920" data-height="1080" data-bg="#0b0d12">Tracks
Any element with a data-start or data-fade attribute is a track. Tracks compose by stacking — their visual order follows DOM order.
| Attribute | Type | Default | Meaning |
|---|---|---|---|
data-start | seconds | 0 | When the element enters the timeline. |
data-duration | seconds | until end | How long the element stays on. |
data-end | seconds | — | Alternative to duration; whichever is set wins. |
data-fade | in | out | both | — | Built-in opacity ramp at the track edges. |
data-fade-duration | seconds | 0.3 | Length of the fade ramp. |
data-ease | css easing | ease | Easing applied to built-in transitions. |
data-translate | x y px | — | Animate from offset to 0,0 over the fade-in window. |
data-scale | number | — | Animate from this scale to 1. |
data-name | string | tag name | Symbolic name surfaced by inspect. |
data-fade in isolation
Media tracks
<img>, <video>, and <audio> get extra attributes.
| Attribute | Applies to | Meaning |
|---|---|---|
data-src | img, video | Source resolved relative to the HTML file. Cached by sha. |
data-fit | img, video | cover | contain | fill — object-fit shorthand. |
data-volume | video, audio | 0–1. Mixed into the final audio track. |
data-mute | video, audio | Drop the audio of this track only. |
data-trim | video, audio | a:b seconds. Slice the source before placement. |
data-loop | video, audio | Loop within the track's duration. |
<video
data-src="b-roll.mp4"
data-start="1"
data-duration="3"
data-trim="0.5:3.5"
data-fit="cover"
data-volume="0.4"
></video>Looping a composition
data-loop on the root makes time wrap. This is useful for stickers, status badges, and GIF-style outputs.
Variables
Variables in {{$NAME}} form are substituted at render time from --vars or the variants file.
| Attribute | Meaning |
|---|---|
data-var | Declares a variable so lint and inspect can list it. |
data-var-default | Fallback when no value is supplied at render. |
<h1 data-var="HEADLINE" data-var-default="Hello, world">{{$HEADLINE}}</h1>Reserved attributes
Anything matching data-hf-* is reserved for internal use. Today it is empty; do not author against it.
Validation
Run hyperframes lint <file> to validate the schema. The missing-data-attrs rule flags tracks that look animated (have transitions in CSS) but lack timing attributes, and non-deterministic-time flags use of Date.now() or Math.random() without a seeded shim.
Next
hyperframes lint— all schema and determinism rules.- HyperFrames CLI — index of every command.