Fluted Glass

A WebGL ribbed-glass surface that refracts an image, a video, or its own animated gradient through rotatable straight or concentric flutes with chromatic edges.

Customize

Source

Custom URL

Palette

Flutes24

Angle0°

Curvature0%

Offset0.00

Refraction0.050

Edge refraction0.020

Aberration20%

Fluid scale1.20x

Speed1.00x

Paused

Usage

import { FlutedGlass } from "@/components/lazy-ui/fluted-glass";

export function Demo() {
  return (
    <div className="h-[440px] w-full overflow-hidden rounded-2xl">
      <FlutedGlass
        src="/images/photo.jpg"
        mediaType="image"
        flutes={24}
        angle={0}
        curvature={0}
        offset={0}
        refraction={0.05}
        edgeRefraction={0.02}
        aberration={0.2}
        colors={["#09090b", "#27272a", "#71717a", "#e4e4e7"]}
        fluidScale={1.2}
        speed={1}
        paused={false}
        className="h-full w-full"
      />
    </div>
  );
}