Warped Noise Shader for React

Warped Noise Shader fills its box with marbled, smoky swirls, like ink folding through milk. It's fractal noise warped through two more layers of itself, so the folds bunch up into dark ribbons with fine filaments along their edges, while the open water between them rises to pale pink and near-white. A five-color ramp, from deep plum through hot pink to milk, colors the result, and every layer drifts on its own slow current. A WGSL fragment shader on WebGPU draws every pixel each frame, for about a millisecond of GPU time.

Use it behind a hero, a creative portfolio or a launch that wants liquid color with no visible pattern. For the plain fractal noise without the folding, use Noise Shader; for rising plumes, Smoke Shader; for ink in plain CSS, with no GPU, the Ink background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft gradient of the same colors in browsers without WebGPU.

Installation

Usage

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

<WarpedNoiseShader 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">Fluid by design</h1>
  </div>
</WarpedNoiseShader>

Warped Noise Shader is a container: your content sits on top of the swirls, 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 swirls run from near-black plum to near-white, so neither white nor black text reads on them bare: put copy on a panel, like the bg-black/60 one above, which keeps white text above 6:1 everywhere.

Demos

Lagoon

colors replaces the ramp: five CSS colors, from the dense folds to the brightest swirls. Here it runs from deep teal to mint and white. Keep the first color the darkest and the last the lightest, so the folds stay dark and the open swirls bright.

In a card

warp={2} folds the noise harder, so the swirls tighten into fine marbling that reads at card size. quality={0.5} renders at half resolution: the field is soft, so you can't tell, and the GPU does a quarter of the work.

Performance

About 1.1 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. quality={0.5} renders a quarter of the pixels, and the soft swirls look 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 colors, 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 swirls 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 folds drift and change over seconds. Text needs a panel: on the bare swirls, white text drops below 1.7:1 on the brightest twentieth of the frame and black text below 1.3:1 on the darkest. A bg-black/60 panel keeps white text above 6:1 everywhere.

FAQ

Credits

Inspired by trinketMage's warped noise (opens in a new tab) on Shadertoy. The code is ours, written from the general technique: Inigo Quilez's domain warping (opens in a new tab), on value noise with an integer hash (lowbias32, by Chris Wellons, public domain). The composition, the drift and the color ramp are new.

API Reference