# Text type

Component. Use when text should be typed: characters land whole with seeded jitter around the rate, no caret. Optional placeholder that fades before typing; optional grey landing that darkens to ink shortly after each character.

## 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-type" data-composition-src="compositions/text-type.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 |
| --- | --- | --- | --- | --- | --- |
| `text` | string | content | `launchable.video` | Up to 120 characters | What gets typed. |
| `placeholder` | string | content | `domain.com` | Up to 60 characters | Shown before typing, fades out. Empty for none. |
| `cps` | number | timing | `14` | 2 through 80 | Rate before jitter. |
| `typeAt` | number | timing | `0.6` | 0 through 10 | Seconds before the first character. |
| `greyLanding` | boolean | motion | `false` | `true`, `false` | Characters land grey and darken to ink 0.12 s later. |
| `align` | enum | layout | `left` | `left`, `center` | Where the text sits. |
| `size` | number | layout | `30` | 3 through 60 | Font size as percent of host height (the host is usually one text row). |
| `placeholderColor` | color | style | `#797578` | Hex or `transparent` | Colour of the placeholder. |
| `grey` | color | style | `#a39da1` | Hex or `transparent` | Colour a character lands in when grey landing is on. |
| `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. |
| `seed` | number | motion | `11` | 1 through 999 | Typing jitter. |

## Package

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