Random Grid Subdivision Shader for React

Random Grid Subdivision Shader draws a stained-glass window that never settles. It starts from a grid of large panes, splits each one with a smaller grid turned to a random angle and offset, and repeats that six levels deep, keeping every level's borders as leading. The result is a mosaic of shards from big panes down to slivers. Each pane is gold toward the top or cobalt toward the bottom, with its own brightness, a nudge of hue and the mottle of antique glass, and a light from behind makes the panes near it glow. A bevel along the leading catches the light on one side. The whole window turns and drifts slowly, and each level slides inside the one above, so the shards shear and re-cut as you watch.

Use it behind a hero, a game, collectibles or gallery page, or anywhere that wants rich, jewel-toned color with structure. For a calmer glass mosaic of rounded cells in your theme's tones, in plain CSS, use the Voronoi background; for flat, interlocking pieces, Minimal Jigsaw Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS sketch of leaded glass in the same colors in browsers without WebGPU.

Installation

Usage

import {
  RandomGridSubdivisionShader,
} from "@/components/ui/random-grid-subdivision-shader";

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

Random Grid Subdivision Shader is a container: your content sits on top of the glass, 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 window is mostly dark glass, but its bright panes and the leading make it far too busy for bare text: put copy on a frosted panel, like the bg-black/60 backdrop-blur-sm one above, which keeps white text above 5.9:1 everywhere.

Demos

Crystal

grid="hex" cuts every level with hexagons instead of squares, so the shards come out rounder, like crystals. topColor and bottomColor set the two tints, here teal and violet, and lineWidth={5} gives the leading more weight.

In a card

The panes scale with the box. uneven={false} splits every pane all the way down, so the glass is an even field of small shards that reads well at card size, and lineWidth={2} keeps the leading in proportion. It keeps full quality: the leading is a few pixels wide and blurs at half resolution.

Performance

About 0.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. Each pixel walks up to six levels of grid, a cell lookup and a few integer hashes each, then one noise lookup for the glass; with uneven, many stop early. Keep quality at 1 if you can: the leading and the bevels go soft 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 a CSS sketch of the window, crossing dark lines over a gradient from the top tint to the bottom one, 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 glass 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: no pane changes color in place, the shards only move, and the light behind them drifts over tens of seconds. The window mixes bright and dark glass under a dense web of leading, so never set text on it bare: a bg-black/60 panel keeps white text above 5.9:1, and bg-black/70 above 8.7:1.

FAQ

Credits

Inspired by Random Grid Subdivision (opens in a new tab) by Shane on Shadertoy: a mosaic made by repeating a grid inside its own cells at random angles and offsets. This shader is our own code and design, written from scratch: a stained-glass window with two tints, mottled glass, a light behind it and analytic bevels, cut by square or hex grids.

API Reference