Ripple Shader for React

Ripple Shader sends rings outward from three points that slowly circle the center, plus a faster, tighter source at the center itself. Where the rings meet they add up into bright, rounded lobes or cancel into thin dark lines, so a five-petal knot forms around a glowing dot, turns and reshapes, while wavy bands flow out to the darker edges. It's drawn in one color on a dark ground of the same hue, computed for every pixel by a WGSL fragment shader on WebGPU.

Use it behind a hero, a "listening" state for a voice or audio feature, or any section that should feel calm and alive in your brand color. For the same rings in plain CSS, use the Ripple background; for a water surface, Water Shader; for neon interference cells on black, Ripples in Black Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a radial gradient in the same color in browsers without WebGPU.

Installation

Usage

import { RippleShader } from "@/components/ui/ripple-shader";

<RippleShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Listening</h1>
</RippleShader>

Ripple Shader is a container: your content sits on top of the ripples, 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 ripples are dark in both color schemes, so put white text over them.

Demos

Theme color

color="var(--primary)" draws the ripples in your theme's primary color, and follows a theme switch. sources={5} adds two more sources to the circle, so the knot becomes a rounder, more even rosette of smaller lobes.

In a card

sources={2} and frequency={0.7} give a small box fewer, wider rings, so the pattern stays legible at card size.

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 radial gradient with faint rings in the same color, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The ripples 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 rings flow outward smoothly, and the knot turns about once every 20 seconds. At the default color, white text has a contrast of about 11:1 on half the frame and above 7.7:1 on three quarters of it. The middle is brighter: there, white text is about 7:1 on half and drops below 3:1 on the brightest lobes and the center dot, so make a centered headline large and bold, or set intensity below 1 for smaller text.

FAQ

API Reference