MagicCard
A card with an interactive spotlight gradient that follows the cursor in real time. Great for feature cards, pricing blocks, or any surface where you want tactile depth feedback.
import { MagicCard } from "@animui/ui"Basic
Wrap any content in MagicCard — the spotlight tracks automatically.
Magic Card
Move your mouse over this card to see a glowing spotlight follow the cursor.
Custom color
Pass an RGB string to gradientColor to change the spotlight hue.
Blue Spotlight
Custom blue gradient follows your cursor.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered inside the card. |
gradientSize | number | 300 | Radius of the spotlight gradient in pixels. |
gradientColor | string | "139,92,246" | Spotlight color as RGB string, e.g. "139,92,246" for violet. |
gradientOpacity | number | 0.08 | Maximum opacity of the gradient overlay. |
className | string | — | Additional classes for the card wrapper. |