# MagicCard

Source: https://lumeo.nativ.sh/components/magic-card

# MagicCard

Card that highlights wherever the cursor is — a radial gradient spotlight tracks mouse position with a subtle 3D tilt via rotateX/rotateY.

## When to Use

-   Feature cards on landing pages to add interactive depth.
-   Pricing tiers where hovering a card should feel premium.
-   Team member cards, testimonials, or integration showcase grids.

Preview Code

Feature Card

### Fast

Zero runtime overhead.

### Secure

Built-in best practices.

Copy Code

Preview Code

Custom Spotlight

Amber spotlight — hover me

Copy Code

## API Reference

### MagicCard

Property

Type

Default

Description

SpotlightRadius

int

300

Radius of the cursor-following spotlight in pixels.

SpotlightColor

string

"var(--color-primary)"

Color of the spotlight gradient.

MaxTilt

double

8

Maximum 3D tilt angle in degrees.

ChildContent

RenderFragment?

null

Card body content.

## Related Components

-   [ShineBorder](/components/shine-border) — Subtle animated perimeter shine for cards.
-   [Spotlight](/components/spotlight) — Full-section cursor spotlight effect.
-   [HoverBorderGradient](/components/hover-border-gradient) — Conic gradient border following cursor angle.