Spotlight Card
A card component with a radial gradient spotlight that follows the mouse cursor
Preview
Spotlight Card
Move your mouse over this card to see the spotlight effect follow your cursor.
Overview
SpotlightCard renders a container with a mouse-tracking radial gradient overlay. The spotlight follows the cursor and fades in/out on mouse enter/leave for a polished interactive card effect.
Features
- Mouse tracking — radial gradient follows cursor position in real-time
- Focus support — spotlight activates on keyboard focus for accessibility
- Customizable color — configure the spotlight gradient color and intensity
- Zero dependencies — pure React with no animation libraries needed
Usage
import SpotlightCard from '@/components/spotlight-card'
<SpotlightCard className="max-w-sm" spotlightColor="rgba(0, 229, 255, 0.2)">
<h3 className="text-xl font-bold text-white">Card Title</h3>
<p className="text-neutral-400 mt-2">Card description goes here.</p>
</SpotlightCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered inside the card |
className | string | '' | Additional CSS classes |
spotlightColor | string | 'rgba(255, 255, 255, 0.25)' | Color of the spotlight gradient |