Chiffon Shader for React

Chiffon Shader hangs three sheer layers of chiffon, blush, lilac and ivory, in front of a soft window light, and lets a slow breeze from the left billow them. Each layer is translucent: you see the room and the other layers through it, tinted by its color, and it turns denser and brighter where it folds back on itself, glowing most where the window shines through. Where layers overlap, their fine weave beats into a delicate moiré. A WGSL fragment shader on WebGPU draws the three sheets back to front, for about a millisecond of GPU time.

Use it as the hero of a bridal, beauty, wellness or fashion page: it's one of the few light shaders, made for a light page. For heavy, opaque satin, use Drapery Shader; for soft silk color in plain CSS, with no GPU, the Silk background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a soft CSS gradient of the same layers in browsers without WebGPU.

Installation

Usage

import { ChiffonShader } from "@/components/ui/chiffon-shader";

<ChiffonShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-zinc-900">Made to be worn</h1>
</ChiffonShader>

Chiffon Shader is a container: your content sits on top of the layers, 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". It's light in both color schemes, so use dark text: near-black stays above 7:1 everywhere on it. With a dark backgroundColor, as in the night demo, switch to light text.

Demos

At night

backgroundColor="#120f18" turns the room dark. The window goes dark with it, and the layers glow only where light shines through them, brightest in their folds; intensity={1.4} turns that backlight up.

In a card

layers={2} keeps the blush and lilac layers and drops the ivory one, so a small box stays simple, and wind={0.6} slows the breeze. It keeps full quality: the weave is a few pixels fine, and at half resolution it fades out.

Performance

About 1 ms of GPU time a frame at 1280×720 on an M2 Max laptop, with three layers; fewer layers cost less. quality={0.5} renders a quarter of the pixels, but the weave then fades out, so the moiré goes with it. 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 soft CSS bands of the same colors on the room's color, 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 layers are decoration: they're hidden from assistive tech and let every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the layers billow over seconds, and the weave fades out before it can shimmer. Dark text reads everywhere on the default look: near-black text stays above 9:1 on 99% of the frame and above 7:1 on the deepest fold; white text doesn't read on it.

FAQ

API Reference