Docs
Fluted Glass
Paper Design fluted-glass image shader with sensible defaults — ribbed, streaked distortions over a source image
pnpm dlx shadcn@latest add https://cult-ui.com/r/fluted-glass.json
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>
);
}