> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-feat-catalog-cursors-section.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# HTML schema reference
> The current contract for a HyperFrames composition.
HyperFrames uses normal HTML and CSS for appearance. A small set of attributes
declares the frame size, duration, clips, media, and nested compositions.
For a gentler explanation, start with [Compositions](/concepts/compositions) and
[Data attributes](/concepts/data-attributes).
## Minimal composition
```html theme={null}
Hello HyperFrames
```
The root is a real, explicitly sized box. Its `data-composition-id` matches the
timeline registry key.
## Composition root
| Attribute | Required | Meaning |
| ------------------------------ | ------------------------------------ | -------------------------------------------- |
| `data-composition-id` | Yes | Unique composition ID |
| `data-start="0"` | Yes on the top-level root | Start of the composition |
| `data-width` and `data-height` | Yes | Authored frame dimensions in pixels |
| `data-duration` | Usually | Total render duration in seconds |
| `data-no-timeline` | Only for a timeline-free composition | Tells the runtime not to wait for a timeline |
An explicit root `data-duration` is the render length. The compiler reads it
before composition scripts run, so a script or variable override cannot change
that value for the same render.
The root may omit `data-duration` only when HyperFrames can infer a finite
duration from the registered animation runtime or timed media. Three.js,
unbounded animation, and timeline-free compositions need an explicit duration.
## Timed clips
| Attribute | Required | Meaning |
| ------------------ | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `id` | Yes | Stable identifier for timing, editing, and animation |
| `data-start` | Yes | Start in seconds or a relative timing expression |
| `data-duration` | Yes for DOM and nested-composition clips; optional for image (3 s default), video and audio (source length) | Visible slot length in seconds |
| `data-track-index` | No | Studio timeline lane, display only. The render never reads it and it does not prevent overlap |
| `class="clip"` | Recommended for authored timed DOM and image elements | Layout and tooling convention. Visibility is keyed off `data-start`, but the shared `.clip` rule supplies the full-frame box |
`data-track-index` does not control paint order. Use CSS `z-index` for
front-to-back layering. Two clips on the same track may overlap in time; the
lane is a Studio display row, not a scheduling constraint.
Video visibility is managed as media and does not require `class="clip"`.
Audio has no visual lifecycle.
## Media
```html theme={null}
```
| Attribute | Applies to | Meaning |
| ------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `data-media-start` / `data-playback-start` | Video, audio, nested composition | Offset into the source file, used by trim and split. Two groups of readers disagree, so the right name depends on the element. **Read only `data-media-start`:** the timing compiler, the HTML parser, `hyperframes validate` (which only inspects `