Cursor Spotlight
A component for displaying a cursor spotlight effect.
Default
Live-tune mode, trail, click pulse, color, and sizing in the controls panel. Move your cursor to preview the effect.
Sign in to view this example's source code.
Sign inControls
mode
hideNativeCursor
showTrail
showClickPulse
color
size
glowSize
ringSize
spotlightOpacity
trailLength
smoothing
Props
| Name | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | true | Whether the cursor spotlight is enabled |
| mode | string | combo | The mode of the cursor spotlight |
| showTrail | boolean | true | Whether to show the trail of the cursor spotlight |
| showClickPulse | boolean | true | Whether to show the click pulse of the cursor spotlight |
| hideNativeCursor | boolean | false | Whether to hide the native cursor |
| respectReducedMotion | boolean | true | Whether to respect reduced motion |
| size | number | 220 | The size of the cursor spotlight |
| glowSize | number | 320 | The glow size of the cursor spotlight |
| ringSize | number | 58 | The ring size of the cursor spotlight |
| trailLength | number | 8 | The length of the trail of the cursor spotlight |
| smoothing | number | 0.18 | The smoothing of the cursor spotlight |
| color | string | rgb(34 211 238) | The color of the cursor spotlight |
| spotlightOpacity | number | 0.72 | The opacity of the cursor spotlight |
| zIndex | number | 9999 | The z-index of the cursor spotlight |
| className | string | undefined | The class name of the cursor spotlight |