WaveLines

Layered waves drifting along the bottom edge, back waves slower for depth.

Ride the wave

Installation

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

React
import WaveLines from "@/components/fx/wave-lines"

<WaveLines className="px-8 py-24"><h2>Ride the wave</h2></WaveLines>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) holds the waves still.

Prop	Type	Default	Description
colors	string[]	indigo, purple, cyan	One colour per wave, back to front.
speed	number	14	Seconds for the front wave to drift one width.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.