Gradient Waves
Soft stacked waves rolling along the bottom, each a step of a gradient. The pointer lifts the crests.
import { GradientWaves } from "pleate/effects/gradient-waves";Behind a headline
Ride the next wave
Props
- waves
Number of wave layers (1 to 8).
numberdefault 5- height
How far up the back wave reaches, 0 to 1.
numberdefault 0.7- colors
CSS colors or tokens: front, middle and back waves. Defaults follow the palette.
string[]- speed
Playback speed.
numberdefault 1- scale
Pattern size; above 1 is bigger.
numberdefault 1- interactive
React to the pointer over the parent.
booleandefault true
Accessibility
- Decorative: the canvas is aria-hidden and ignores pointer events, so content on top stays usable.
- Pauses off screen and in hidden tabs; with reduced motion it shows a still frame.
- Fills its parent: give the parent position relative and the background absolute inset-0.