# Data Attributes Reference Every HyperFrames composition uses `data-*` attributes to declare timing and structure to the framework. This is the full attribute table — pair with `tracks-and-clips.md` for the rules behind `data-track-index`. ## Composition Root Every renderable composition needs one root element: | Attribute | Required | Meaning | | ---------------------------- | -------- | -------------------------------------------------------------------------------- | | `data-composition-id` | Yes | Unique ID. Must match the animation registry key on `window.__timelines`. | | `data-width` / `data-height` | Yes | Pixel frame size. Common values: `1920x1080`, `1080x1920`, `1080x1080`. | | `data-duration` | Yes | Duration in seconds. This is the render duration, not the GSAP timeline length. | | `data-fps` | No | Optional frame rate hint. CLI render flags can override output fps. | | `data-composition-variables` | No | JSON array of variable declarations (on ``). See `variables-and-media.md`. | The root should be `position: relative`, have explicit pixel dimensions, and hide overflow unless intentionally composing outside the frame. ## Clip Attributes Timed child elements are clips. **`class="clip"` is required on visible timed elements** (`
`, ``, etc.) — without it the runtime keeps the element visible for the whole composition, ignoring `data-start` / `data-duration`. Omit on `