Drapery Shader for React

Drapery Shader drapes heavy champagne satin across its box in deep diagonal folds. The folds fan out down their length, as if the cloth were gathered just above the frame, wander gently, and breathe slowly, as if air moved underneath. Long, sharp highlights run along each ridge with the stretched sheen of woven silk, the slopes turned away from the light glow softly, and the valleys sink into rich shadow. A WGSL fragment shader on WebGPU builds the cloth from a few rounded ridges that meet in soft creases and lights it like fabric, for under half a millisecond of GPU time.

Use it as the hero of a fashion, jewelry, beauty or luxury page, or behind a product shot. For sheer, translucent layers instead of heavy satin, use Chiffon Shader; for soft silk color without the geometry, in plain CSS, the Silk background. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS gradient of the same folds in browsers without WebGPU.

Installation

Usage

import { DraperyShader } from "@/components/ui/drapery-shader";

<DraperyShader 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">The evening edit</h1>
  </div>
</DraperyShader>

Drapery Shader is a container: your content sits on top of the cloth, 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 satin runs from deep shadow to bright highlights, so no text color reads on it bare everywhere: put copy on a panel, like the bg-black/60 one above, which keeps white text above 5.5:1 everywhere.

Demos

Black satin

color sets the cloth where the light falls, highlightColor the highlights and the sheen, and shadowColor the valleys. Here the satin is near-black with cool, blue-white highlights, for a night or tech look.

In a card

folds={3} makes fewer, broader folds that read at card size, and angle={-60} turns them steeper, to run down a tall box. It keeps full quality: it's cheap, and the highlights are thin lines that half resolution would soften.

Performance

About 0.4 ms of GPU time a frame at 1280×720 on an M2 Max laptop: light for a shader, since the folds are a few formulas per pixel, with no tracing or noise. folds={8} costs a little more. 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 diagonal CSS gradient of the same folds, in your colors, 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 cloth is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame and stops. Nothing flashes: the folds breathe over several seconds and the highlights slide along them. On the bare satin, white text reads in the shadows but drops below 2.4:1 on the brightest twentieth of the frame, and black text below 1.6:1 in the valleys; a bg-black/60 panel keeps white text above 5.5:1 everywhere.

FAQ

API Reference