Special/WaveText
WaveText
Each character animates independently with a staggered sine-wave offset, creating a flowing wave effect. Supports per-character color cycling for rainbow variants, and a hover mode that triggers on each individual letter.
import { WaveText } from "@animui/ui"Basic wave
Wave Text
Rainbow
Rainbow
Hover trigger
Hover each letter
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | — | The text to animate. Must be a plain string. |
amplitude | number | 10 | Pixel height of the wave (how far up each character moves). |
duration | number | 1.2 | Duration of one wave cycle in seconds. |
stagger | number | 0.08 | Delay between each character's wave start in seconds. |
colors | string[] | — | Array of CSS colors cycled per character. Omit for single color. |
trigger | "always" | "hover" | "always" | "always" animates continuously; "hover" only on character hover. |
as | "span" | "p" | "h1" | "h2" | "h3" | "div" | "span" | HTML element to render. |
className | string | — | Additional classes. |