Fluted Glass Shader for React

Fluted Glass Shader drifts three soft color fields, coral, violet and a peach glow, behind a panel of vertical reeded glass. Each rib is a small cylinder lens: it squeezes a wide slice of the color beneath it into its own width and flips it toward its edges, so a smooth gradient breaks into ribbed bands. A soft groove shadow sits between the ribs and a thin highlight runs down each one. A WGSL fragment shader on WebGPU draws every pixel each frame: the colors blend in OKLab, so their mixes stay bright rather than muddy, and red, green and blue bend by slightly different amounts, which fringes the rib edges.

Use it behind a SaaS hero, a launch page or a pricing card, and pass your brand's colors. For clear drops that bend a ruled page instead, use Liquid Glass Shader; for the bare color fields with no glass, in plain CSS, the Mesh Gradient background. It runs only while it's on screen, holds a still frame with reduced motion, and shows the same colors behind a CSS rib pattern in browsers without WebGPU.

Installation

Usage

import { FlutedGlassShader } from "@/components/ui/fluted-glass-shader";

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

Fluted Glass Shader is a container: your content sits on top of the glass, 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 ground, use white text. It reads at 10:1 on half the frame, but the peach and coral glows are bright: over them white falls to about 2:1, so keep white for large headlines there, or set the copy on a panel. In the lower 40% of the box, white keeps about 4.5:1 or better on 99% of pixels. On a light backgroundColor, use dark text.

Demos

In a card

colors takes your theme's variables, here var(--chart-1), var(--chart-3) and var(--chart-5), and the glass follows a theme switch. ribs={16} sets wider ribs for a small surface; the ribs are counted across the box, so they keep their number at any size.

Horizontal, on light

angle={90} turns the ribs horizontal, like a frosted partition, and backgroundColor="#f6f1ea" sets the colors on warm paper. The fields blend over the ground in OKLab, so the light version stays clean and pastel.

Performance

About 0.2 ms of GPU time a frame at 1280×720 on an M2 Max laptop; slower GPUs take several times longer. The rib edges are crisp, so it renders at full resolution; quality={0.5} softens them. 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 gradient of the same colors behind vertical ribs, 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 glass 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 colors drift across the ribs over tens of seconds. For text contrast, see Usage: white text reads on the dark ground and the violet, less so on the coral and peach glows.

FAQ

API Reference