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 spotlightDemo
Move your cursor over this card
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | 400 | Diameter of the glow in pixels. |
| children | ReactNode | - | Required. The content to wrap. |
| className | string | '' | 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.