Glass Cursor

A glass cursor that bends the image beneath it

glass-cursor-tw

Customize

Image URL

Dampening

0.00

Blob Size

0.040

Trail Length

Opacity

1.00

Background Color

Tail Fade

0.3

Threshold

0.60

Refraction

0.30

Blur Spread

0.3

Border Glow

0.15

Specular Gain

0.2

Blob Warp Amount

Blob Warp Scale

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width in pixels or CSS value
`height`	string \| number	`"100%"`	Container height in pixels or CSS value
`className`	string	`undefined`	Additional CSS classes for the container
`children`	React.ReactNode	`undefined`	Content rendered above the effect
`src`	string	`"https://images.unsplash.com/..."`	Image source URL to apply the glass effect on
`dampening`	number	`0`	Cursor follow smoothness (0 = instant, 1 = very laggy)
`blobSize`	number	`0.04`	Metaball radius in UV space
`trailLength`	number	`40`	Number of active trail points (max 40)
`tailFade`	number	`0.3`	Tail shrink curve (higher = faster fade)
`threshold`	number	`0.6`	Metaball iso-surface threshold
`refraction`	number	`0.3`	Gradient-based lens refraction strength
`blurSpread`	number	`0.3`	Blur sample spacing
`borderGlow`	number	`0.15`	Border rim brightness
`specularGain`	number	`0.2`	Specular highlight intensity
`blobWarpAmount`	number	`25`	Organic warp distortion amount on trail
`blobWarpScale`	number	`5`	Spatial frequency of warp noise
`backgroundColor`	string	`"#000000"`	Background color hex
`opacity`	number	`1`	Master opacity

widthstring | number

Container width in pixels or CSS value

Default"100%"

heightstring | number

Container height in pixels or CSS value

Default"100%"

classNamestring

Additional CSS classes for the container

Defaultundefined

childrenReact.ReactNode

Content rendered above the effect

Defaultundefined

srcstring

Image source URL to apply the glass effect on

Default"https://images.unsplash.com/..."

dampeningnumber

Cursor follow smoothness (0 = instant, 1 = very laggy)

Default0

blobSizenumber

Metaball radius in UV space

Default0.04

trailLengthnumber

Number of active trail points (max 40)

Default40

tailFadenumber

Tail shrink curve (higher = faster fade)

Default0.3

thresholdnumber

Metaball iso-surface threshold

Default0.6

refractionnumber

Gradient-based lens refraction strength

Default0.3

blurSpreadnumber

Blur sample spacing

Default0.3

borderGlownumber

Border rim brightness

Default0.15

specularGainnumber

Specular highlight intensity

Default0.2

blobWarpAmountnumber

Organic warp distortion amount on trail

Default25

blobWarpScalenumber

Spatial frequency of warp noise

Default5

backgroundColorstring

Background color hex

Default"#000000"

opacitynumber

Master opacity

Default1

Name

Type

Default

Description

width

string | number

"100%"

Container width in pixels or CSS value

height

string | number

"100%"

Container height in pixels or CSS value

className

string

undefined

Additional CSS classes for the container

children

React.ReactNode

undefined

Content rendered above the effect

src

string

"https://images.unsplash.com/..."

Image source URL to apply the glass effect on

dampening

number

0

Cursor follow smoothness (0 = instant, 1 = very laggy)

blobSize

number

0.04

Metaball radius in UV space

trailLength

number

40

Number of active trail points (max 40)

tailFade

number

0.3

Tail shrink curve (higher = faster fade)

threshold

number

0.6

Metaball iso-surface threshold

refraction

number

0.3

Gradient-based lens refraction strength

blurSpread

number

0.3

Blur sample spacing

borderGlow

number

0.15

Border rim brightness

specularGain

number

0.2

Specular highlight intensity

blobWarpAmount

number

25

Organic warp distortion amount on trail

blobWarpScale

number

5

Spatial frequency of warp noise

backgroundColor

string

"#000000"

Background color hex

opacity

number

1

Master opacity