# Sprite pop

Component. Use for organic accents or a full cover: N copies of a sprite pop around a focal point one after another with an overshoot, keep growing, then shrink and fade together. cover fills the host from the centre outward; accents places a few around the focal point; explicit positions are accepted.

## 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="sprite-pop" data-composition-src="compositions/sprite-pop.html"
     data-start="0" data-duration="2.2" 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 |
| --- | --- | --- | --- | --- | --- |
| `sprite` | image | content | `assets/petal.svg` | Project-relative path or `{ "url": "..." }` | Petal, leaf, mark, blob. |
| `mode` | enum | layout | `cover` | `cover`, `accents`, `explicit` | cover, accents, or explicit positions. |
| `count` | number | layout | `16` | 1 through 40 | Sprites (cover and accents). |
| `positions` | string | layout | `50,72,1.7|30,32,0.7|70,32,0.7` | Text | Explicit mode: pipe separated x,y,scale in percent of host and a scale factor. |
| `focal` | string | layout | `50,50` | Text | x,y in percent of the host. |
| `size` | number | layout | `34` | 4 through 120 | Sprite size as percent of host height. |
| `at` | number | timing | `0.1` | 0 through 30 | Seconds before the first sprite pops. |
| `stagger` | number | timing | `0.045` | 0 through 0.5 | Seconds between pops. |
| `multiply` | boolean | style | `true` | `true`, `false` | Blend sprites into what is under them. |
| `exit` | enum | motion | `shrink` | `shrink`, `none` | shrink fades all sprites in the last 0.2 s; none keeps them. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |
| `seed` | number | motion | `7` | 1 through 999 | Deterministic scatter. |

## Package

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