Mobius Sierpinski Shader for React

Mobius Sierpinski Shader draws a Sierpinski carpet, a square split into nine with the middle one kept and the rest split again, and bends it with a Möbius map so the grid winds into log spirals around two eyes. Rounded tiles in periwinkle and warm white stream out of one eye and into the other, each splitting into finer tiles that fade into dust toward the eyes, while the eyes drift slowly. A WGSL fragment shader on WebGPU computes each pixel's place on the grid, so the tiles stay crisp at every size.

Use it behind a generative-art, AI or data hero, or anywhere a mathematical pattern suits the brand. For a single whirlpool in plain CSS, with no GPU, use the Vortex background; for a mirrored, black-and-white pattern, Truchet Kaleidoscope Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a gradient of the same colors in browsers without WebGPU.

Installation

Usage

import {
  MobiusSierpinskiShader,
} from "@/components/ui/mobius-sierpinski-shader";

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

Mobius Sierpinski Shader is a container: your content sits on top of the pattern, 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 ground is charcoal in both color schemes, but the tiles are bright, so put white text on a panel such as bg-black/60.

Demos

Amber

accentColor="#f59e0b" turns the large panels amber, depth={6} splits every tile two more times, so the spirals carry finer dust, and wobble={1.6} lets the eyes drift further.

In a card

The pattern scales with its box. speed={0.5} halves the flow, which is calmer next to text. The tile edges are the detail here, so the card keeps full quality; the shader is light enough for it.

Performance

About 0.3 ms of GPU time a frame at 1280×720 on an M2 Max laptop, at the default depth and at depth={6} alike; slower GPUs take several times longer. Each level of tiles costs a few operations per pixel, and levels whose tiles would be smaller than a few pixels fade out instead of shimmering. At quality={0.5} the tile edges blur, so keep it for slow GPUs. 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 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, two dark eyes with faint rays and soft patches of the tile colors on charcoal, 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, both eyes in view, and stops. Nothing flashes: the tiles stream steadily and the eyes drift over tens of seconds. Text needs a panel: across the renders we measured, white text reaches 4.5:1 on 82% of the shader and black text on 18%, because the bright tiles are everywhere. White text on a bg-black/60 panel stayed above 5.7:1 on every pixel.

FAQ

Credits

Inspired by Mobius Sierpinski (opens in a new tab) by Shane on Shadertoy. This is a new shader written from a description of the look, not a port: the spiral lattice, the tile shading, the arm pattern, the palette and the code are ours. The rounded box distance is by Inigo Quilez, under the MIT licence, and the hash is lowbias32 by Chris Wellons, in the public domain; both keep their credit lines in the WGSL.

API Reference