Glass

glass surface with interactive ripple and dynamic cursor effects.

Background
⚡Super Smooth

Summer is over
Winter has arrived

Installation

npx shadcn@latest add https://scrollxui.dev/registry/glass.json

Usage

import { Glass } from "@/components/ui/glass";
<Glass
  width={200}
  height={200}
  borderRadius={16}
  tintOpacity={0.15}
  blur={4}
  ripple
  followMouse
  className="m-4"
  onClick={() => console.log("Glass clicked!")}
>
  <div className="flex items-center justify-center h-full w-full text-white font-bold">
    Interactive Surface
  </div>
</Glass>

Examples

Follow Mouse

Background

Ripple

Background

API Reference

Glass

glass surface with interactive ripple and dynamic cursor effects.

Props

PropertyTypeDefaultDescription
childrenReactNodeundefined
Content rendered inside the glass container.
widthnumber | string120
Width of the glass component in pixels or any CSS unit.
heightnumber | string120
Height of the glass component in pixels or any CSS unit.
borderRadiusnumber12
Border radius of the glass container in pixels.
tintOpacitynumber0.1
Opacity of the frosted tint overlay, between 0 and 1.
blurnumber2
Backdrop blur intensity in pixels.
ripplebooleanfalse
If true, clicking generates a ripple effect.
followMousebooleanfalse
If true, the glass element follows the cursor or touch point.
classNamestring''
Additional custom CSS classes for the glass container.
styleCSSProperties{}
Inline styles applied to the glass container.
onClick(e: React.MouseEvent) => voidundefined
Callback fired when the glass container is clicked.

Built withby Ahdeetai.