# Text trail

Component. Use when a line should land with colour: glyphs appear behind a soft left to right edge (or the line rises), each one hot, cooling through a middle colour to ink. One to three lines. Exits: none, up with smear, warm flick and zoom, wipe (with optional incoming lines behind the same edge), fade.

## 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-trail" data-composition-src="compositions/text-trail.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 |
| --- | --- | --- | --- | --- | --- |
| `line1` | string | content | `Generate` | Up to 40 characters | First line. |
| `line2` | string | content | `anything` | Up to 40 characters | Second line, optional; rises with a smear when entrance is wipe. |
| `line3` | string | content | (empty) | Up to 40 characters | Third line, optional. |
| `next1` | string | content | (empty) | Up to 40 characters | With exit wipe: the line that uncovers behind the erase edge. |
| `next2` | string | content | (empty) | Up to 40 characters | Second incoming line, optional. |
| `entrance` | enum | motion | `wipe` | `wipe`, `rise` | wipe uncovers glyph by glyph; rise brings the whole line up from below. |
| `exit` | enum | motion | `none` | `none`, `up`, `flick`, `wipe`, `fade` | none, up, flick, wipe, fade. |
| `align` | enum | layout | `center` | `center`, `left`, `right` | Where the text sits in the host. |
| `size` | number | layout | `18` | 3 through 60 | Font size as percent of the host height. |
| `glow` | boolean | style | `false` | `true`, `false` | Soft glow growing behind the text. |
| `trailFrom` | color | style | `#ff5fd0` | Hex or `transparent` | Glyph colour on arrival. |
| `trailVia` | color | style | `#7b2fb0` | Hex or `transparent` | Colour before ink. |
| `accent` | color | style | `#e6452c` | Hex or `transparent` | Warm colour of the flick exit. |
| `glowColor` | color | style | `#d6c7ff` | Hex or `transparent` | Centre of the glow. |
| `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. |
| `stagger` | number | timing | `0.045` | 0.01 through 0.15 | Seconds between glyph arrivals. |
| `trail` | number | timing | `0.55` | 0.1 through 2 | Seconds from trail start to ink. |
| `inAt` | number | timing | `0.04` | 0 through 10 | Seconds before the first glyph. |
| `motionAmount` | number | motion | `1` | 0 through 2 | Scales rise, smear and push. |

## Package

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