WaveBackground

<WaveBackground>CSS Modules

Interactive 3D-looking wave surface on native WebGL — GPU-displaced mesh with pointer ripples, no Three.js. Fills any container, stays behind children. Parent controls background (canvas is transparent by default). Falls back to static CSS or Canvas 2D when WebGL is unavailable.

InstallationColoxo CLI

npx coloxo add wave-background

ES Module ImportPlayground / npm package

import { WaveBackground } from '@coloxo/ui/visuals';

1. Quick demo

Move the pointer over the panel. For the full hero, controls, and variants, open the Blocks page.

WebGL waves, native API

Parent paints the midnight background. Pointer ripples decay when you leave.

2. Blocks showcase

See the composed hero, live controls, CTA banner, and feature card examples on the Blocks page.

See how Wave Background is composed in a block

3. Props

Name	Type	Default	Description
colors	string[]	—	Wave palette (CSS color strings).
backgroundColor	string	#050816	Clear color when transparent is false.
speed	number	1	Animation speed (0.1–3).
amplitude	number	0.45	Wave height (0–1).
frequency	number	1	Spatial frequency (0.25–2).
complexity	number	0.55	Extra wave-layer mix (0–1).
intensity	number	0.7	Lighting / contrast (0–1).
interaction	boolean	true	Enable pointer deformation.
interactionStrength	number	0.65	Dent strength (0–1).
interactionRadius	number	0.22	Influence radius as fraction of min dimension (0.05–0.6).
interactionDecay	number	0.55	How quickly interaction decays after leave (0.1–1).
quality	"low" \| "medium" \| "high"	medium	Mesh density and DPR scale.
fallback	"static" \| "canvas"	static	Used when WebGL is unavailable.
paused	boolean	false	Stop continuous animation.
transparent	boolean	true	Alpha-cleared canvas so the parent controls background. false clears with backgroundColor.
respectReducedMotion	boolean	true	Honor prefers-reduced-motion (static frame, no pointer deformation).