ComponentsTyping
Text morph
One word turns into the next, letter by letter.
Installation
$ npx shadcn@latest add @textlab/text-morphNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { TextMorph } from "@/components/textlab/text-morph/text-morph";
<button onClick={save}><TextMorph text={saved ? "Saved" : "Save"} /></button>Variants
slideblurflipProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "slide" | "blur" | "flip" | "slide" | How new letters arrive and old ones leave. Shared letters always glide. |
| live | boolean | true | Announce changes politely to screen readers. |
| as | ElementType | "span" | 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
- Button labels that change state: Save to Saved, Follow to Following.
- Toggles and short status words.
Skip it
- Long sentences; most letters change, so the morph reads as noise.
- Labels that change many times a second.
Accessibility and motion
Accessibility
- The new label is announced politely by default.
- Letters are aria-hidden; screen readers never hear them one by one.
Motion
- Shared letters glide on a smooth spring and can be interrupted mid-morph.
- Exits are quick (150 ms) so the new word never waits.
Reduced motion. The label swaps instantly.
Performance
- Layout animation per letter; keep labels short.