motion-spotlight

Mouse-tracked radial gradient overlay. The spotlight fades in on hover or focus and springs toward the cursor: soft, weighted, never locked 1:1 to the pointer.

Preview

Hover me

Smoother lag

Snappier

Import

import 'motion-components/motion-spotlight'   // just this one
import 'motion-components'               // or the whole library

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.

<motion-spotlight size="500" style="--mc-spotlight-color: rgba(96,165,250,0.25)">
  <div class="card">…</div>
</motion-spotlight>

Tuning the follow

duration sets the spring that follows the cursor and fades the spotlight, in seconds. 0.35 is the default and feels weighted. Raise it toward 0.8 for a long, lazy trail, or drop it to 0.15 for a near-instant follow. Add bounce for overshoot.

Properties

Attribute	Property	Type	Default	Description
size	size	number	400	Diameter of the spotlight in pixels
duration	duration	number	0.35	Spring duration of the follow and the fade, in seconds. Higher values trail the cursor more
bounce	bounce	number	0	Spring bounciness of the follow (0 = no overshoot)

CSS custom properties

Property	Type	Default	Description
--mc-spotlight-color	color	rgba(255,255,255,0.18)	Center color of the radial gradient

Accessibility

The spotlight is purely decorative. It is marked aria-hidden. The host listens for :focus-within as well as hover, so keyboard users get the effect when focusing slotted interactive content, centered when the pointer is not over it. Under prefers-reduced-motion the glow does not show.