Diffraction Shader for React

Diffraction Shader draws a dark surface grooved as finely as a compact disc, catching an unseen lamp and splitting it into spectral arcs: violet to red, with a fainter, wider second order beyond, which swing and slide as the surface slowly tilts. Every pixel solves the grating equation: the light leaving the grooves is bright only where they act as a mirror along their length, and across them each wavelength turns by its own angle, so the rainbow comes from the physics, not a painted gradient. Each wavelength is turned into color with Wyman, Sloan and Shirley's fit to the CIE color-matching functions, over dim metal with a faint grain. A WGSL fragment shader on WebGPU draws it each frame.

Use it behind a music or audio-product hero, an album or merch page, or anything about light and sound. For stress fringes in the same spectral colors, use Photoelastic Shader; for random thin-film foil in plain CSS, the Hologram background; for one beam fanned out by a prism, the Prism background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS rainbow arc in browsers without WebGPU.

Installation

Usage

import { DiffractionShader } from "@/components/ui/diffraction-shader";

<DiffractionShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
</DiffractionShader>

Diffraction Shader is a container: your content sits on top of the surface, 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". On the default dark surface, use white text: across the middle of the frame it stays above 5.6:1 nineteen times out of twenty, but an arc can sweep behind it, so keep body text short or on a panel.

Demos

Holographic label

pattern="lines" grooves the surface in straight lines, like a holographic sticker, so the spectra fall in straight bars. A light backgroundColor, here #e9eaee, switches the arcs from glowing to tinting the surface like foil, and the sheen round the lamp's reflection turns white.

In a card

pattern="fan" grooves the surface in spokes, which throws long rainbow streaks, and interactive lets the pointer tilt the surface, so the streaks follow it. When the pointer leaves, the surface eases back.

Performance

About 0.3 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The arcs are soft, so quality={0.5} hides well on a large screen. 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 rainbow arc on the same background, 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 surface is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, a rainbow arc with its fainter second order, and stops. Nothing flashes: the arcs slide over many seconds. White text reads on the dark metal, but where an arc passes behind it the contrast drops below 2:1, so put longer copy on a panel such as bg-black/60.

FAQ

API Reference