Marbling Shader for React

Marbling Shader draws paper marbling, the craft of floating ink on water and printing it. Every few seconds a drop of ink lands on cream paper in concentric rings of indigo, oxblood and ochre, and pushes the older drops aside; then an invisible comb drags through everything, back and forth and up and down, pulling the rings into feathers and chevrons. A WGSL fragment shader on WebGPU computes every pixel by undoing each drop and each comb stroke in turn, with the drop and tine transforms from Jaffer and Lu's Mathematical Marbling (IEEE CG&A, 2012), so the edges stay crisp and flat, like a print.

Use it behind a stationery, bookbinding, paper-goods or editorial hero, or as an endpaper-style band between sections. It sits on a light ground, unlike most shaders. For one curl of smoke on a dark ground, use Incense Shader; for ink sinking in water, Ink Vortex Shader; for stone veins in plain CSS, the Marble background. It runs only while it's on screen, holds a still frame with reduced motion, and shows CSS rings in the same inks in browsers without WebGPU.

Installation

Usage

import { MarblingShader } from "@/components/ui/marbling-shader";

<MarblingShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-[#f1e8d6]/85 px-8 py-6">
    <h1 className="text-5xl font-semibold text-stone-900">Hand bound</h1>
  </div>
</MarblingShader>

Marbling Shader is a container: your content sits on top of the paper, 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 busy and runs from cream to deep indigo, so no text color reads on it bare: put copy on a panel of the paper color, like the bg-[#f1e8d6]/85 one above, which keeps dark stone text above 10:1 everywhere.

Demos

Black ink

colors takes three inks; here black, the paper's own white and a grey, so drops ring black and grey with wide bands of white between, on paperColor="#f7f5f0". rings={5} gives each drop its most rings, and comb={0.15} barely drags them, so they stay round, nested stones, closer to Japanese suminagashi than to combed Turkish ebru.

In a card

The drops are sized to the box's height, so a card shows fewer of them. drops={10} keeps more on the paper at once and rings={2} makes each one two broad bands, so the pattern reads at card size.

Performance

About 0.7 ms of GPU time a frame at 1280×720 on an M2 Max laptop with the default 8 drops; slower GPUs take several times longer. The cost grows with drops, since each pixel undoes more events, and stops early where a newer drop covers the point. It keeps full quality: the ring edges are crisp, and half resolution would soften them. 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 CSS drops of rings on the paper, in your colors and paperColor, 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, combed drops across the paper, and stops. Nothing flashes: a drop spreads over two seconds and a comb pass over two and a half. The contrast inside the pattern is high and changes everywhere, so never set text on it bare: a bg-[#f1e8d6]/85 panel keeps text-stone-900 above 10:1.

FAQ

API Reference