Spotlight

Wraps content in a container with a soft radial glow that follows the cursor, revealing a "spotlight" highlight as it moves over it.

Installation

npx dafink-ui add spotlight

Demo

Move your cursor over this card

Props

NameTypeDefaultDescription
sizenumber400Diameter of the glow in pixels.
childrenReactNode-Required. The content to wrap.
classNamestring''Additional CSS classes.

Accessibility

Spotlight's glow overlay is aria-hidden and pointer-events-none, so it's invisible to assistive technology and never blocks interaction with the wrapped children. It has no dedicated prefers-reduced-motion check of its own — the pointer-follow position is a direct, one-shot response to cursor movement rather than a looping or automatic animation, so there's nothing to suppress; only the fade transition is affected, and that's already clamped to near-instant by the global reduced-motion rule in globals.css. It adds no keyboard behavior and doesn't alter the children it wraps.