Spotlight Card
A radial glow that follows the cursor across the card.
- 0.8 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Move your cursor here
The glow follows the pointer across the card surface.
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/spotlight-card.jsonAdds components/velora/spotlight-card.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
radiusRadius of the spotlight in px | number | 320 |
colorAny CSS color for the glow | string | "color-mix(in oklab, var(--brand) 14%, transparent)" |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- Unchanged: the radial glow still fades in on hover and follows the pointer, as a color highlight with no element movement.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- The glow layer is aria-hidden; only the children are read.