# Collage burst

Component. Use around a headline or a product: up to twelve images fly in from beyond the host edges to seeded slots on a ring that keeps the centre clear, overshoot and float. Exit up with a smear or hold.

## Mount

Fills its host box: give the host element the size and position you want, the component sizes everything in container units (percent of the host). No fixed canvas.

```html
<div data-composition-id="collage-burst" data-composition-src="compositions/collage-burst.html"
     data-start="0" data-duration="3" data-track-index="2"
     data-variable-values='{ "...": "..." }'
     style="position:absolute;left:300px;top:405px;width:1320px;height:195px"></div>
```

## Slots

No HTML slot; content comes from variables.

## Variables

| Variable | Type | Role | Default | Accepted | What changes |
| --- | --- | --- | --- | --- | --- |
| `image1` | image | content | `assets/tile-01.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image2` | image | content | `assets/tile-02.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image3` | image | content | `assets/tile-03.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image4` | image | content | `assets/tile-04.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image5` | image | content | `assets/tile-05.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image6` | image | content | `assets/tile-06.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image7` | image | content | `assets/tile-07.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image8` | image | content | `assets/tile-08.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image9` | image | content | `assets/tile-09.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image10` | image | content | `assets/tile-10.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image11` | image | content | `assets/tile-11.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `image12` | image | content | `assets/tile-12.svg` | Project-relative path or `{ "url": "..." }` | Tile; empty to skip. Portrays: subject_image. |
| `clear` | number | layout | `30` | 0 through 60 | Percent of host width kept free at the centre. |
| `tileSize` | number | layout | `18` | 5 through 40 | Max tile width as percent of host width. |
| `radius` | number | style | `1` | 0 through 10 | Percent of host height. |
| `at` | number | timing | `0.46` | 0 through 30 | Seconds before the first tile. |
| `exit` | enum | motion | `up` | `up`, `none` | up or none. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |
| `seed` | number | motion | `2` | 1 through 999 | Slot positions. |

## Package

`index.html` is a demo host at 1920 by 1080; `compositions/collage-burst.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["collage-burst"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.