ComponentsDistort
Gooey text
Words melt into each other.
Installation
$ npx shadcn@latest add @textlab/gooey-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { GooeyText } from "@/components/textlab/gooey-text/gooey-text";
<GooeyText words={["Melt", "Merge", "Morph"]} />Variants
blobdripProps
| Prop | Type | Default | Description |
|---|---|---|---|
| words* | string[] | – | Words to melt between. |
| variant | "blob" | "drip" | "blob" | Melt in place, or let the old word drip away. |
| interval | number | 2.2 | Seconds each word holds. |
| duration | number | 1.2 | Seconds the melt takes. |
| goo | number | 12 | Stickiness, 4 to 20. Higher merges letters more. |
| label | string | – | What screen readers hear. Defaults to every word. |
| 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
- Playful brands and creative portfolios.
- Bold display words with simple shapes.
Skip it
- Thin or small type; the threshold eats fine strokes.
- Long words that change length a lot.
Accessibility and motion
Accessibility
- Screen readers hear all words once.
- The longest word reserves the space, so layout never shifts.
Motion
- Enter uses the enter ease; the leaving word uses the exit curve so they cross in the middle.
- The filter's alpha threshold turns the blur into liquid edges.
Reduced motion. Shows the first word, still.
Performance
- One SVG filter on the word. Blur and threshold are GPU-friendly in most browsers; avoid dozens on one page.