# Tracking In

Lines open with a wide gap after every letter, and the gaps close one by one until the text settles.

- Page and source: https://uibrik.com/components/tracking-in
- Install: `npx shadcn@latest add https://uibrik.com/r/tracking-in.json`
- Packages: none beyond React
- Import: `import { TrackingIn } from "@/components/uibrik/tracking-in/tracking-in"`

Where to use the Tracking In React component:

- **Brand names and headlines**: Letters closing their wide gaps one by one gives a cinematic title reveal.
- **Cinematic section titles**: Tracking in suits film, luxury and editorial sites.
- **Fashion and luxury sites**: Wide-spaced type settling into place echoes fashion branding.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| lines | `string[]` | `["Every letter","finds its place","and settles in."]` | One entry per line. |
| align | `"left" \| "center" \| "right"` | `"left"` | Text alignment; lines tighten toward this edge. |
| order | `"wave" \| "reverse" \| "random"` | `"wave"` | Which gaps close first. |
| spacing | `number` | `1.3` | Gap after every letter at the start. |
| duration | `number` | `1.1` | Time for one gap to close. |
| stagger | `number` | `0.6` | Time between the first and last gap of a line starting to close. |
| lineStagger | `number` | `0.14` | Delay between lines. |
| jitter | `number` | `0.25` | How far gaps drift from a strict wave. Ignored for Random. |
| play | `number` |  | Each change plays the effect again; 0 shows the resting text. Leave it out to play once when the text scrolls 40% up the screen. |
| className | `string` |  | Classes for the text block, e.g. size and colour. |