```
**IMPORTANT**: Standalone compositions (index.html) put `data-composition-id` div directly in ``. Do NOT use `` on standalone files — it hides content and breaks rendering.
## Data Attributes — Complete Reference
### All Clips
| Attribute | Required | Values |
|-----------|----------|--------|
| `id` | Yes | Unique identifier |
| `data-start` | Yes | Seconds or clip ID reference (`"el-1"`, `"intro + 2"`) |
| `data-duration` | Required for img/div/compositions | Seconds. Video/audio auto-detects from media. |
| `data-track-index` | Yes | Integer. Same-track clips CANNOT overlap. |
| `data-media-start` | No | Trim offset into source (seconds) |
| `data-volume` | No | 0-1 (default 1) |
`data-track-index` does NOT affect visual layering — use CSS `z-index` for stacking.
### Composition Clips
| Attribute | Required | Values |
|-----------|----------|--------|
| `data-composition-id` | Yes | Unique composition ID |
| `data-start` | Yes | Start time (root: use `"0"`) |
| `data-duration` | Yes | Takes precedence over GSAP timeline duration |
| `data-width` / `data-height` | Yes | Pixel dimensions |
| `data-composition-src` | No | Path to external HTML file |
| `data-variable-values` | No | JSON object of per-instance variable overrides |
### On Root `` Element
| Attribute | Required | Values |
|-----------|----------|--------|
| `data-composition-variables` | No | JSON array of declared variables |
## Track Rules
- Same-track clips CANNOT overlap in time
- `data-track-index` is for the framework's time sequencing, NOT visual z-order
- Visual layering → use CSS `z-index`
- Track indices are integers starting from 0
## Video and Audio — Hard Rules
1. Video elements MUST have `muted playsinline`
2. Audio is ALWAYS a separate `