Glass

glass surface with interactive ripple and dynamic cursor effects.

Installation

npx shadcn@latest add @scrollxui/glass

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

Ripple

API Reference

Glass

glass surface with interactive ripple and dynamic cursor effects.

Props

Property	Type	Default	Description
`children`	ReactNode	`undefined`	Content rendered inside the glass container.
`width`	number \| string	`120`	Width of the glass component in pixels or any CSS unit.
`height`	number \| string	`120`	Height of the glass component in pixels or any CSS unit.
`borderRadius`	number	`12`	Border radius of the glass container in pixels.
`tintOpacity`	number	`0.1`	Opacity of the frosted tint overlay, between 0 and 1.
`blur-sm`	number	`2`	Backdrop blur intensity in pixels.
`ripple`	boolean	`false`	If true, clicking generates a ripple effect.
`followMouse`	boolean	`false`	If true, the glass element follows the cursor or touch point.
`className`	string	`''`	Additional custom CSS classes for the glass container.
`style`	CSSProperties	`{}`	Inline styles applied to the glass container.
`onClick`	(e: React.MouseEvent) => void	`undefined`	Callback fired when the glass container is clicked.