WaveText

Letters that ripple in a travelling wave, continuously or on hover.

Good vibrations

bash
npx shadcn@latest add https://www.rad-ui.com/r/wave-text.json

React
import WaveText from "@/components/fx/wave-text"

<WaveText as="h2" text="Good vibrations" />

Hover me: wiggle wiggle

React
<WaveText trigger="hover" text="wiggle wiggle" amplitude={0.35} />

The full text is read once from a visually hidden copy; the rippling letters are aria-hidden.
Pauses offscreen; `paused` stops it, and `trigger="hover"` only moves under the pointer.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) keeps the letters still.

Prop	Type	Default	Description
text	string	—	The text. Read once by screen readers.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
trigger	'loop' \| 'hover'	'loop'	Ripple continuously, or only while hovered.
amplitude	number	0.22	Wave height in em.
duration	number	1.4	Seconds per ripple.
stagger	number	0.06	Seconds between letters.
paused	boolean	false	Stop the wave.