ComponentsKinetic
Word sequence
A sentence choreographed word by word.
Installation
$ npx shadcn@latest add @textlab/word-sequenceNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { WordSequence } from "@/components/textlab/word-sequence/word-sequence";
<WordSequence text="Every word gets its moment" variant="stage" />Variants
stackstagecutProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "stack" | "stage" | "cut" | "stack" | Build the sentence, spotlight each word, or hard-cut between scales. |
| interval | number | 0.45 | Seconds per word. |
| hold | number | 2 | Seconds the finished sentence holds before looping. |
| loop | boolean | true | Replay after the hold. |
| as | ElementType | "div" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Manifestos and intro sequences.
- Title cards for video-like landing pages.
Skip it
- Navigation or interface copy.
- Sentences over about ten words.
Accessibility and motion
Accessibility
- The whole sentence is read once from a hidden copy.
- Every sequence ends on the full sentence, readable at rest.
Motion
- Stack eases each word up into place; stage blurs words in and out; cut uses hard cuts with no tween.
Reduced motion. The sentence appears whole and still.
Performance
- One timer; one or a handful of animated spans.