Glass Cursor

Glass-like cursor trail with refraction and blur

glass-cursor-tw

Customize

Basic

0
0.04
40
1
#000000

Shape & Refraction

0.3
0.6
0.3
0.3

Lighting & Warp

0.15
0.2
25
5

Props

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

Default:undefined
childrenReact.ReactNode

Content rendered above the effect

Default:undefined
srcstring

Image source URL to apply the glass effect on

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

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

Default:0
blobSizenumber

Metaball radius in UV space

Default:0.04
trailLengthnumber

Number of active trail points (max 40)

Default:40
tailFadenumber

Tail shrink curve (higher = faster fade)

Default:0.3
thresholdnumber

Metaball iso-surface threshold

Default:0.6
refractionnumber

Gradient-based lens refraction strength

Default:0.3
blurSpreadnumber

Blur sample spacing

Default:0.3
borderGlownumber

Border rim brightness

Default:0.15
specularGainnumber

Specular highlight intensity

Default:0.2
blobWarpAmountnumber

Organic warp distortion amount on trail

Default:25
blobWarpScalenumber

Spatial frequency of warp noise

Default:5
backgroundColorstring

Background color hex

Default:"#000000"
opacitynumber

Master opacity

Default:1