Three-Tap Voronoi Shader for React

Three-Tap Voronoi Shader draws a honeycomb of irregular cells. Each one is a cone: a dark pit in the middle rises through the color to a white-hot seam where it meets its neighbors, and a cool light from the top left catches one side of every seam, so the cells look pressed into the surface. A two-color field sweeps slowly across them, pink to amber by default, and every cell's center wobbles on a small circle, so the walls ripple in place. A WGSL fragment shader on WebGPU draws every pixel each frame, testing only three points per pixel, for about a third of a millisecond of GPU time.

Use it behind a warm hero, a launch page or a pricing card, in its own colors or in your brand's. For a monochrome, finer cell texture, use Worley Noise Shader; for flowing contour lines over a blended cell field, Smooth Voronoi Contours Shader; for lit glass cells in plain CSS, the Voronoi background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same two colors in browsers without WebGPU.

Installation

Usage

import {
  ThreeTapVoronoiShader,
} from "@/components/ui/three-tap-voronoi-shader";

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

Three-Tap Voronoi Shader is a container: your content sits on top of the cells, 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". Every cell runs from a dark pit to a bright seam, so no text color reads on it bare: put copy on a panel, like the bg-black/60 one above, which keeps white text above 5.8:1 everywhere.

Demos

Ice

fromColor and toColor set the two ends of the sweeping color field, here royal blue and aqua, and highlight={1.6} strengthens the light on the seams for a glassier, frozen look. The pits always stay dark, so any pair of mid-to-bright colors works.

In a card

The cells are sized to the box's height, about 7 rows at the default scale, so the pattern keeps its proportions in any box. scale={0.7} fits about 5 rows instead, so the cells read as big, glossy tiles at card size.

Performance

About 0.3 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel finds its cell twice (once more for the light), with three distance tests each time, whatever the scale. Keep quality at 1: the seams and highlights are crisp and the shader is cheap enough not to need less. 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 two colors with a darkened edge, 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: the cells wobble over 5 to 10 seconds, and the color field takes over a minute to sweep across. The contrast inside each cell is high, so never set text on it bare: a bg-black/60 panel keeps white text above 5.8:1, and bg-black/70 above 8.6:1.

FAQ

Credits

Inspired by a three-tap Voronoi shader (opens in a new tab) by Shane on Shadertoy. This is a new shader written from the idea, not a port: its own lattice code, hash, cell shading, light, color field and colors.

API Reference