ComponentsPhysics
Wave text
A sine wave runs through the line.
Installation
$ npx shadcn@latest add @textlab/wave-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { WaveText } from "@/components/textlab/wave-text/wave-text";
<WaveText text="Hello, sailor" variant="bounce" />Variants
wavebouncefloatProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "wave" | "bounce" | "float" | "wave" | A smooth sine, hops off the baseline, or a gentle drift and tilt. |
| amplitude | number | 0.2 | Wave height in em. |
| speed | number | 1.6 | Seconds per cycle. |
| spread | number | 0.08 | Seconds between neighbouring letters. |
| 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
- Loading states, celebrations and playful labels.
- Short words that should feel alive.
Skip it
- Anything people must read carefully.
- Several looping effects on the same screen.
Accessibility and motion
Accessibility
- Letters are aria-hidden; the text is read once.
- It never stops on its own, so keep it short and decorative.
Motion
- Negative delays start every letter mid-cycle, so the wave is already in motion on load.
Reduced motion. Still, plain text.
Performance
- Pure CSS keyframes on transform; no JavaScript after render.