Magic Card
MagicCard is a card with a radial gradient spotlight that follows the mouse cursor, creating a subtle interactive lighting effect.
Basic usage
Magic Card
Move your cursor over this card to see the spotlight effect follow your mouse.
vue
<MagicCard>
<h3>Magic Card</h3>
<p>Move your cursor over this card to see the spotlight effect.</p>
</MagicCard>Custom gradient color
Green spotlight
Red spotlight
vue
<MagicCard gradient-color="rgba(16, 185, 129, 0.15)">
Green spotlight
</MagicCard>
<MagicCard gradient-color="rgba(239, 68, 68, 0.15)">
Red spotlight
</MagicCard>Larger gradient
Wide spotlight
500px radius gradient for a broad lighting effect.
vue
<MagicCard :gradient-size="500">
<h3>Wide spotlight</h3>
</MagicCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
gradientSize | number | 300 | Spotlight radius in px |
gradientColor | string | 'rgba(99, 102, 241, 0.15)' | Spotlight color |
gradientOpacity | number | 0.8 | Spotlight opacity (0–1) |
Slots
| Slot | Description |
|---|---|
default | Card content |