Moire Shader for React

Moire Shader lays two films of fine lines over each other, as if printed on two sheets of acetate. Each film is concentric rings or straight lines, ink on off-white, and the second one circles the first a few lines off, breathing in scale and turning a few degrees. Where the lines fall in step the paper shows through, and where they fall between each other it goes dark, so huge soft fringes sweep and turn across the box while the lines themselves stay crisp. A WGSL fragment shader on WebGPU draws every pixel each frame, and filters each line over the pixel it covers, so the only moiré you see is the real one.

Use it behind a design studio's hero, an art or print page, or a 404 that wants pointer play. For traveling waves from two sources instead of fixed gratings, use the Interference background; for engraved rosettes in gold, Guilloche Shader; for a never-repeating lattice in color, Quasicrystal Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a real CSS moiré of two ring gradients in browsers without WebGPU.

Installation

Usage

import { MoireShader } from "@/components/ui/moire-shader";

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

Moire Shader is a container: your content sits on top of the films, 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 pattern is fine black lines on paper, so no text color reads on it bare: put copy on a panel, like the bg-white/80 one above, which keeps near-black text above 12:1 everywhere.

Demos

Lines

pattern="lines" prints both films with straight lines. The second one sits a few degrees off the first, so the fringes become broad diagonal bands that turn and drift as the angle changes. In a tall, narrow box it makes a quiet band beside a quote or a pull stat.

Pointer play

interactive lets the pointer drag the second film's center: move it away from the middle and the fringes multiply and swing to follow, as on a light table. pattern="mixed" puts rings over lines, which beat into curved, parabolic fringes. Touch is ignored, and the film eases back when the pointer leaves.

Performance

About 0.06 ms of GPU time a frame at 1280×720 on an M2 Max laptop, so it runs at full quality on any GPU. Keep quality at 1: the lines are a few pixels apart and go soft at half resolution, and the cost is already tiny. 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 moiré of two ring gradients in the same ink and paper, 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, curved fringes fanning out from the middle, and stops. Nothing flashes: the fringes sweep over tens of seconds. Fine, high-contrast stripes can be uncomfortable to look at for some readers, so keep the default pitch or wider on large surfaces, and lower intensity for a calmer page. Never set text on the pattern bare: a bg-white/80 panel keeps near-black text above 12:1, and a bg-black/60 one keeps white text above 6:1.

FAQ

API Reference