Photoelastic Shader for React

Photoelastic Shader draws clear plastic between crossed polarizers, on black. Loads press on it at a few points and drift on slow paths, and round each one smooth bands of color ring outward, in the Michel-Lévy order: pink and green at the heart, then blue, magenta, orange, straw and a pale gray halo, merging into contour lines where two loads come close. Dark brushes sweep through as the stress turns. The colors aren't painted: each pixel finds the stress, turns it into a retardation, and lets ten wavelengths through as sin²(πR/λ), summed into color with Wyman, Sloan and Shirley's fit to the CIE color-matching functions, so the Michel-Lévy sequence appears by itself. A WGSL fragment shader on WebGPU draws it each frame.

Use it behind an engineering, materials-science or physics hero, a lab or a research page. For rainbow arcs from a grooved surface, using the same spectral color, use Diffraction Shader; for free-form colored bands, Plasma Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows CSS rings of the same colors in browsers without WebGPU.

Installation

Usage

import {
  PhotoelasticShader,
} from "@/components/ui/photoelastic-shader";

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

Photoelastic Shader is a container: your content sits on top of the plastic, 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 fringes are bright and the gaps black, so no text color reads on it bare: put copy on a panel, like the bg-black/60 one above, which keeps white text above 5.8:1 everywhere.

Demos

Parallel polarizers

A light backgroundColor, here #f7f7f5, turns the polarizers parallel: the plastic is white where there's no stress, and every fringe shows its complementary color, so the pale halos go dark and each band turns to its complement.

In a card

loads={2} keeps two loads drifting, and interactive lets the pointer press a third: its fringes follow the pointer and merge with the others where they meet. When the pointer leaves, its load lets go and its fringes fade away.

Performance

About 0.6 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The fringes tighten toward each load, so keep full quality unless you need the time: at quality={0.5} the finest rings go soft. 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 three CSS ring sets in the same colors on your 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 plastic is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, three ringed loads with brushes between them, and stops. Nothing flashes: the loads drift and press over many seconds, so the rings flow slowly in and out. The contrast inside the pattern is high and changes everywhere, so never set text on it bare: a bg-black/60 panel keeps white text above 5.8:1, and bg-black/70 above 8.6:1.

FAQ

API Reference