# Scrub statement (goodtabs UI)

One long statement that fills in word by word as you scroll, a plain string underneath.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/scrub-statement.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/scrub-statement`

## Usage

```tsx
import { ScrubStatement } from "@/components/ui/scrub-statement"

<ScrubStatement aria-label="Our position">
  One long sentence that says what you stand for, read at the speed you scroll.
</ScrubStatement>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `string` |  | The statement, as one plain string, required. |
| pace | `number` | `22` | Scroll distance per word, in px. |

## When to use

- One sentence that carries the pitch on a landing page
- A pause between two busy sections
- A manifesto or a mission line that should be read, not skimmed

## When not to use

- For body copy or anything people come back to look up
- More than about fifty words, because the scroll gets long
- Text with links or inline elements: it takes one plain string

## Notes for agents

- GSAP and its SplitText plugin install from npm under GSAP's own licence. No GSAP code ships in this registry
- children must be a plain string, and it stays one for assistive tech: the split copies are aria-hidden
- It holds with CSS sticky, so no ancestor may set overflow hidden, auto or scroll
- Reduced motion and no script both show the statement fully in foreground at natural height

## The maths

- Section height is 100svh + words × pace, so 39 words at 22px scroll 858px while the text holds still.
- Words start one step apart and take 5 steps to light, so about 5 words are mid fade and the reading edge stays soft.
- Muted to foreground is a stacked pair with only the top opacity moving, so no text repaints while scrolling.

Docs: https://ui.goodtabs.co/components/scrub-statement