# Token swarm

Component. Use to say "we found these": N tokens carrying any image pop out at an origin, burst to seeded targets around it while spinning on their vertical axis, then float and drift outward. Re-spin at chosen times to react to events. Tokens have visible thickness.

## 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="token-swarm" data-composition-src="compositions/token-swarm.html"
     data-start="0" data-duration="5" 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 |
| --- | --- | --- | --- | --- | --- |
| `image` | image | content | `assets/coin-mark.svg` | Project-relative path or `{ "url": "..." }` | Square image on both faces. Portrays: subject_logo. |
| `count` | number | layout | `5` | 1 through 12 | Tokens. |
| `size` | number | layout | `8` | 2 through 30 | Token diameter as percent of host height. |
| `origin` | string | layout | `50,50` | Text | x,y in percent of the host where tokens pop. |
| `radius` | string | layout | `20,30` | Text | rx,ry in percent of the host for the target ellipse. |
| `edge` | color | style | `#c94fb0` | Hex or `transparent` | Rim seen when a token turns edge on. |
| `at` | number | timing | `0.2` | 0 through 30 | Seconds before the first token pops. |
| `burstAfter` | number | timing | `0.12` | 0 through 3 | Seconds after the pop before tokens burst to their targets. |
| `respinAt` | string | timing | (empty) | Text | Pipe separated seconds at which tokens spin half a turn. |
| `drift` | number | motion | `1.3` | 1 through 2 | Multiplier the targets grow to over the hold. |
| `exit` | enum | motion | `none` | `none`, `fade` | none or fade. |
| `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/token-swarm.html` is the template entry; `assets/` holds GSAP, Instrument Serif and demo SVGs. One paused GSAP timeline on `window.__timelines["token-swarm"]`. Generated from `_kit/components-*.mjs`; run `node packages/compositions/library/_kit/build-components.mjs` after editing.