Noise Shader for React

Noise Shader layers five kinds of procedural noise on the GPU: fractal noise for the broad shapes, ridged noise for the bright crescents, billowy noise for soft folds, cellular noise for faint dimples and a little turbulence. The plane they sit on warps slowly, and the sum picks a color from a rainbow palette whose hues slide round the whole spectrum every 10 seconds, so magenta and blue give way to lime and yellow and back. Every pixel is computed each frame by a WGSL fragment shader on WebGPU, for about 0.5 ms of GPU time a frame.

Use it behind a hero, a creative portfolio or a launch page that wants color with an organic grain to it. For a cleaner field of a few big lights, use Gradient Mesh Shader; for interference blobs with a pinwheel, Plasma Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same magenta and blue in browsers without WebGPU.

Installation

Usage

import { NoiseShader } from "@/components/ui/noise-shader";

<NoiseShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="rounded-2xl bg-white/40 px-6 py-3 text-5xl font-semibold text-black">
    Make some noise
  </h1>
</NoiseShader>

Noise Shader is a container: your content sits on top of the color, 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 colors are bright and change hue, in both color schemes, so black text reads best: put it on a light panel such as bg-white/40.

Demos

Fine detail

scale={3} fits three times as much of the pattern in the box, and octaves={8} adds four more layers of ever finer fractal noise (and two more of turbulence), for a grainy, marbled field.

In a card

colorSpeed={0} pins the palette and hue={0.1} turns it to teal and lime, so the card keeps its colors while the noise drifts. quality={0.5} renders at half resolution: the noise is soft, so you can't tell, and the GPU does a quarter of the work.

Performance

About 0.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop with the default 4 octaves; slower GPUs take several times longer. octaves is the only prop that changes the cost, and only a little: each octave adds one layer of noise (and every second one a layer of turbulence) to the ten layers and the cell search a pixel does at the default. quality={0.5} renders a quarter of the pixels, and the soft field looks the same. 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 magenta, violet and blue, 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 noise is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, magenta and violet with blue patches, and stops. Nothing flashes: the hues slide over seconds, and the pattern drifts. Over a dozen moments, black text on the bare noise stays above 2.9:1, too little for body text; on a bg-white/40 panel it stays above 6.4:1. White text needs bg-black/60 to stay above 6.7:1.

FAQ

Credits

The hash functions are Dave Hoskins' Hash without Sine (opens in a new tab), copyright 2014 David Hoskins, under the MIT license, whose notice is in the shader's source; the rest is shadcn.io's. The port to WGSL keeps the look exactly, and:

• Fixes the warp's speed: it moved at the square of speed, and now scales evenly with it.
• Adds colorSpeed and hue, to slow, pin or turn the palette.
• Drops an unused hash and a no-op abs in the turbulence.

API Reference