Backgrounds & Effects
Fluted Glass
Fluted glass image effect for React and shadcn/ui using the Paper Design WebGL shader, with ribbed distortion and tuned defaults.
Updated
0.50
0.50
0.25
0.10
0°
0.25
0.00
0.00
0.00
0.00
0.00
0.00
Fluted Glass is a React wrapper for shadcn/ui around the @paper-design/shaders-react FlutedGlass shader. Use it for landing page heroes, product imagery, or section backgrounds that need a textured glass look.
Installation
pnpm dlx shadcn@latest add @cult-ui/fluted-glass
Usage
The exported FlutedGlass component wraps FlutedGlass from @paper-design/shaders-react with opinionated defaults (image size, fluting, colors, and fit). Pass any supported prop to override defaults; import defaultFlutedGlassProps to reuse the same baseline in your own layouts.
Because the shader runs in WebGL, render it only in a client component ("use client").
"use client";
import { FlutedGlass } from "@/components/fluted-glass";
export function HeroFluted() {
return (
<div className="relative aspect-video w-full max-w-4xl overflow-hidden rounded-2xl">
<FlutedGlass
className="absolute inset-0 size-full"
image="https://paper.design/flowers.webp"
width={1280}
height={720}
/>
</div>
);
}