Guilloche Shader for React

Guilloche Shader draws guilloché, the engraving on banknotes, share certificates and watch dials. Two families of petal-shaped rings twist opposite ways around a large rosette on the right, so their hairlines cross into a woven net, with a finer ring around the edge and wavy bands of interlaced lines along the top and bottom. Everything is gold on deep emerald. The two families turn slowly against each other, so the weave seems to rotate, and a soft sheen glides across on the diagonal like light over foil. A WGSL fragment shader on WebGPU draws each line as an anti-aliased hairline about one CSS pixel wide.

Use it behind a fintech or payments hero, a gift card or voucher, or a premium pricing tier. The left of the box stays plain emerald, so a headline sits there with no panel. For black-and-white beats between gratings, use Moire Shader; for a never-repeating lattice of rosettes in color, Quasicrystal Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows faint CSS rings on the same emerald in browsers without WebGPU.

Installation

Usage

import { GuillocheShader } from "@/components/ui/guilloche-shader";

<GuillocheShader className="flex min-h-[32rem] items-center">
  <h1 className="max-w-[30%] px-10 text-5xl font-semibold text-white">
    Money, made beautiful
  </h1>
</GuillocheShader>

Guilloche Shader is a container: your content sits on top of the engraving, 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 rosette sits right of center, at 62% of the width, and the plain emerald to its left, between the bands, keeps white text above 11:1. Over the lines, put copy on a bg-black/60 panel, which keeps white text above 6.5:1.

Demos

Voucher

The engraving scales with its box, here a gift card at a 1.75 aspect ratio. groundColor and lineColor recolor it, plum and rose, and petals={8} gives the rosette fewer, broader waves. density={40} thins the lines to suit the small surface.

Performance

About 0.2 ms of GPU time a frame at 1280×720 on an M2 Max laptop. Keep quality at 1: the lines are hairlines and go soft at half resolution, and the cost is already small. 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 faint gold rings around the rosette's spot on the same emerald, 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 engraving is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame of the rosette and the bands, and stops. Nothing flashes: the weave turns over tens of seconds, and the sheen takes about 14 seconds to cross. White text reads above 11:1 on the plain emerald left of the rosette; over the lines, use a bg-black/60 panel, or one of the ground color at 80% (bg-[#0d3b2e]/80): both keep white text above 6.5:1.

FAQ

API Reference