# Text swap

Component. Use for a status line or any label that changes: each new label rises in from below with a vertical smear while the old one leaves upward, two frames of overlap. Labels are pipe separated and swap on a fixed interval or at explicit times.

## 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="text-swap" data-composition-src="compositions/text-swap.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 |
| --- | --- | --- | --- | --- | --- |
| `labels` | string | content | `Going to ‘launchable.video’|Extracting styles|Building brand kit` | Up to 200 characters | Pipe separated, in order. |
| `interval` | number | timing | `1.5` | 0.3 through 10 | Seconds each label holds. |
| `times` | string | timing | (empty) | Text | Optional pipe separated seconds for each swap; overrides interval. |
| `inAt` | number | timing | `0.1` | 0 through 10 | Seconds before the first label rises. |
| `direction` | enum | motion | `up` | `up`, `down` | up: new label comes from below. down: from above. |
| `align` | enum | layout | `center` | `center`, `left`, `right` | Where the text sits in the host. |
| `size` | number | layout | `9` | 3 through 60 | Font size as percent of the host height. |
| `ground` | color | style | `transparent` | Hex or `transparent` | Background; transparent to overlay. |
| `ink` | color | style | `#1a1418` | Hex or `transparent` | Resolved text colour. |
| `font` | font | style | `"Instrument Serif",Georgia,serif` | CSS font-family stack | Display face. Instrument Serif ships with the component. |
| `exit` | enum | motion | `none` | `none`, `out` | none holds the last label; out leaves the same way. |

## Package

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