motion-spotlight
Mouse-tracked radial gradient overlay. The spotlight fades in on hover or focus and lerps toward the cursor — soft, weighted, never locked 1:1 to the pointer.
Preview
Usage
Wrap any element. The spotlight is rendered as an absolutely-positioned overlay inside the host — give the host a non-static layout if you need to nest it.
Tuning the follow
smoothing is the lerp factor applied each frame: 0.18 is the default and feels weighted. Drop it toward
0.05 for a long, lazy trail, or push it past 0.5 for near-instant follow.
Properties
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
| | | number | 400 | Diameter of the spotlight in pixels |
| | | string | rgba(255,255,255,0.18) | Center color of the radial gradient |
| | | number | 0.18 | Lerp factor (0–1). Lower = smoother lag, higher = snappier follow |
| | | number | 0.3 | Fade in/out duration in seconds |
Accessibility
The spotlight is purely decorative — marked aria-hidden. The host listens for :focus-within as well as hover, so keyboard
users get the effect when focusing slotted interactive content. Under prefers-reduced-motion the fade transition is removed.