Simplex Truchet Weave Shader for React

Simplex Truchet Weave Shader lays cords on a hidden grid of triangles. Every corner of the grid has a ring of cord around it, each triangle holds three arcs of those rings, and each triangle stacks its arcs in a random order, so the cords cross over and under one another and run in S-curves, loops and knots. Each cord is shaded round, wound with a fine twist, edged in gold and outlined, with a soft drop shadow on whatever lies below; the cords warm toward terracotta at the lower right. A WGSL fragment shader on WebGPU draws every pixel each frame while the weave drifts up and to the left.

Use it behind a brand, textile, craft or luxury page that wants a tactile, ornamental pattern. For flat, colorful geometry, use Truchet Shader; for black-and-white line art with depth, Truchet Kaleidoscope Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS lattice of rings in the same colors in browsers without WebGPU.

Installation

Usage

import {
  SimplexTruchetWeaveShader,
} from "@/components/ui/simplex-truchet-weave-shader";

<SimplexTruchetWeaveShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-[#0e2329]/80 px-8 py-6">
    <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
  </div>
</SimplexTruchetWeaveShader>

Simplex Truchet Weave Shader is a container: your content sits on top of the weave, 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 light cords and the dark ground alternate everywhere, so put copy on a panel: one in the ground's color at 80%, like the one above, keeps white text above 8.5:1, and bg-black/60 above 5.7:1.

Demos

Stacked

shape="hexagon" bends each cord around a hexagon instead of a circle, and weave={false} turns the crossings off: each ring lies wholly above or below its neighbors, the lower ones darker, like a scatter of washers. shape also takes "dodecagon", a twelve-sided ring between the two.

In a card

The cords keep their size in CSS pixels, so a small box shows fewer of them: scale={9} fits nine triangle edges in 750 pixels, for a finer weave at card size. tubeColor, rimColor, backgroundColor and accentColor recolor the cords, their edging, the ground and the tint toward the lower right, here coral and cream on navy, warming to gold.

Performance

About 0.4 ms of GPU time a frame at 1280×720 on an M2 Max laptop: three arcs per pixel, each with its shadow, outline, rims and shading. Slower GPUs take several times longer. It keeps full quality: the outlines and edging are thin and 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 lattice of rings in 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 weave 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 weave only drifts, one triangle edge every ten seconds. Light cords on a dark ground make a busy, high-contrast pattern, so never set text on it bare: a panel in the ground's color at 80% keeps white text above 8.5:1.

FAQ

Credits

Inspired by a simplex Truchet weave (opens in a new tab) by Shane on Shadertoy, through shadcn.io's version. This is a new shader written from the idea, not a port: the over-and-under order resolved per triangle stays, while the cord shading, the twist, the edging, the stacked mode, the drift and the colors are ours. The hash is lowbias32 by Chris Wellons, in the public domain.

API Reference