Agate Geode Shader for React

Agate Geode Shader draws a polished half geode, larger than the box. Concentric agate bands in blue-grey, white and violet follow the stone's irregular outline from a rough grey rind at the lower left, sweeping across the left of the box, to a cavity at the upper right lined with amethyst points that catch a moving light. The cut plane travels slowly through the stone, so the bands creep and morph, and a soft polish sheen glides across the slab. A WGSL fragment shader on WebGPU computes it all per pixel: the stone is a distance field warped by 3D simplex noise, the bands are its contours with random widths and shades, and each crystal is a Voronoi cell shaded as a six-sided point.

Use it behind a jewellery, luxury or natural-history hero, or as a stone texture on a card. For marble veins in plain CSS, use the Marble background; for frost, Crystals; for contour bands with no stone or cavity, Smooth Noise Contours Shader. 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 { AgateGeodeShader } from "@/components/ui/agate-geode-shader";

<AgateGeodeShader className="flex min-h-[32rem] items-center p-12">
  <h1 className="max-w-md text-5xl font-semibold text-slate-950">
    Cut from the earth
  </h1>
</AgateGeodeShader>

Agate Geode Shader is a container: your content sits on top of the stone, 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 default stone is pale in both color schemes, so put dark text over it, such as text-slate-950, on the left, away from the cavity.

Every color takes any CSS color and follows a theme switch: bandColor sets the bands (deeper bands are a darker shade of it), bandingColor the thin pale lines and the quartz at the cavity's wall, crystalColor the points, and rindColor the stone's skin.

Demos

Fine bands, citrine

bands={32} packs nearly twice as many, thinner bands between the cavity and the rind. bandColor="#c9a27e" and crystalColor="#d97706" turn the stone into warm agate around a citrine cavity.

Solid agate, in a card

cavity={0} closes the cavity, so the bands ring a small eye at the upper right: pure agate, as a texture for a card.

Performance

About 0.85 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. It keeps quality={1} by default: the bands' thin lines and the crystal edges are line art, and blur at half resolution. 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 rings in the same colors around a violet disc at the upper right, 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 stone 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 bands creep over tens of seconds, and the glints are small facets that brighten and fade as the light circles, once every 25 seconds. On the left half of the box, slate-950 text reads at about 8:1 on half of it and 6:1 or better on three quarters; the darkest bands drop to about 4:1, and the rind's corner is dark, so keep text off the lower left edge.

FAQ

API Reference