Smooth Voronoi Contours Shader for React

Smooth Voronoi Contours Shader cuts a blended cellular field into contour bands, like a topographic map drawn for a concert poster. The bands cycle ink, cream, ink and sunflower yellow, ringed by crisp ink outlines, so every hill becomes an eye of concentric rings and one level is flooded hot pink in puddles around them. The points under the field circle slowly, so the blobs swell, merge and pinch like slow lava, and nothing scrolls. A WGSL fragment shader on WebGPU draws every pixel each frame, for about a millisecond of GPU time.

Use it behind a music, art or event page, an album or a launch that wants something loud and graphic. For thin, even contour lines over soft noise, use Smooth Noise Contours Shader; for glossy enamel bands in red and silver, Noise Contours Shader; for the hard-walled cells themselves, Worley Noise Shader; for a calm map in plain CSS, the Topography background. It runs only while it's on screen, holds a still frame with reduced motion, and shows CSS rings in the same colors in browsers without WebGPU.

Installation

Usage

import {
  SmoothVoronoiContoursShader,
} from "@/components/ui/smooth-voronoi-contours-shader";

<SmoothVoronoiContoursShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-white px-8 py-6">
    <h1 className="text-5xl font-semibold text-black">Ship faster</h1>
  </div>
</SmoothVoronoiContoursShader>

Smooth Voronoi Contours Shader is a container: your content sits on top of the pattern, 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 pattern is half ink and half bright fills, so no text color reads on it bare: put copy on a solid label, like the white one above, or on a bg-black/60 panel, which keeps white text above 6:1 everywhere.

Demos

Glossy

glossy shades every band as a rounded terrace, deeper at its foot and paler at its top, with a thin glint along its upper edge, so the map turns into stacked lacquer. bands={8} cuts the field into fewer, broader levels, which suits the terraces.

In a card

The four colors are props. Here fillColor is mint, accentColor orange and paperColor a warmer cream, for a card or an album cover. The outlines keep their width in CSS pixels, so they stay crisp at any size: keep full quality for this one.

Performance

About 1 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel sums its distance to 32 moving points, 16 for each of two sizes of blob, and gets the field's slope from the same sum, so the outlines cost nothing extra. bands and glossy don't change the cost. The outlines are thin lines, so keep quality at 1 where you can; on a large retina screen quality={0.75} saves almost half the work and softens them only slightly. 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 concentric CSS rings of ink, cream and yellow with a pink spot, 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 pattern is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: each point takes 7 to 14 seconds to circle, so the bands creep rather than jump. The pattern swings from ink to cream within a few pixels, so never set text on it bare: a solid bg-white label keeps black text at full contrast, a bg-black/60 panel keeps white text above 6:1, and bg-black/70 above 8.8:1.

FAQ

Credits

Inspired by a smooth Voronoi contours shader (opens in a new tab) by Shane on Shadertoy. This is a new shader written from the idea, not a port: its own field, with an exact gradient instead of extra samples, its own band cycle, glossy shading and colors.

API Reference