# Orb

Component. Use as the small living thing next to a label or in a field: a gradient sphere that fills the host, optionally defocused, whose colour moves through up to three stops on a schedule and which can pulse.

## 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="orb" data-composition-src="compositions/orb.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 |
| --- | --- | --- | --- | --- | --- |
| `colors` | string | style | `#8d5cf6|#ff5fcf|#ff6b6b` | Text | Pipe separated hex colours the orb moves through in order. |
| `times` | string | timing | `0.5|0.95` | Text | Pipe separated seconds at which each stop after the first is reached. |
| `highlight` | color | style | `#ffffff` | Hex or `transparent` | Light spot colour. |
| `defocus` | number | style | `3` | 0 through 30 | Blur as percent of the orb size. |
| `pulse` | number | motion | `0.06` | 0 through 0.4 | Scale swing while alive, 0 for none. |
| `enter` | enum | motion | `grow` | `none`, `grow`, `pop` | none, grow (scale from 0.6), pop (from 0 with overshoot). |
| `at` | number | timing | `0` | 0 through 30 | Seconds before the move starts. |
| `exit` | enum | motion | `none` | `none`, `fade` | none or fade in the last 0.2 s. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |

## Package

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