Waves Shader for React

Waves Shader rolls calm, glowing waves across the box. Three broad wave trains cross the frame on the diagonal, and rings spread from a slowly drifting center; their sum tints a lavender ground with soft bands of pink, cyan and yellow, and the hue slowly cycles through the three. One wave train, bent by the others, glows along its crests as soft white lines that drift across the color. A WGSL fragment shader on WebGPU computes every pixel, every frame, for very little GPU time.

Use it behind a light hero, a pricing or launch page, or any section that wants color and slow motion without darkness. Every color is a prop, so it also works as a deep, glowing night version. For bands of light in plain CSS, use the Light Waves background; for rings from points, Ripple Shader; for bands of light on black, Aurora Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a pastel gradient in the same colors in browsers without WebGPU.

Installation

Usage

import { WavesShader } from "@/components/ui/waves-shader";

<WavesShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-slate-950">Simple pricing</h1>
</WavesShader>

Waves Shader is a container: your content sits on top of the waves, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The default waves are pale in both color schemes, so put dark text over them, such as text-slate-950; with dark colors, as in the Night demo, use white text.

Demos

Night

backgroundColor="#120f2e" sets a deep indigo ground, and fromColor, viaColor and toColor set magenta, teal and indigo for the bands. The glowing crests stay white, so on a dark ground they read as light.

In a card

colorSpeed={0} stops the hue cycling, so each part of the card keeps its color, and speed={0.5} halves the motion: a quiet backdrop for a pricing card.

Performance

About 0.1 ms of GPU time a frame at 1280×720 on an M2 Max laptop, among the cheapest shaders in the collection; slower GPUs take several times longer, which still leaves plenty of room. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS gradient of the same colors with two soft white lines, so the layout never jumps. It follows the color props. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The waves are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the waves roll and the colors change over many seconds. At the default colors, slate-950 text has a contrast above 9:1 everywhere on the waves, so body text reads anywhere; white text doesn't read on the defaults. On the Night demo's colors, white text is about 6:1 on half the frame and above 4:1 on three quarters, and it drops below 2:1 on the glowing crests, so keep small text off them or set intensity lower.

FAQ

API Reference