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.
Fast
Zero runtime overhead.
Secure
Built-in best practices.
Amber spotlight — hover me
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 — Subtle animated perimeter shine for cards.
- Spotlight — Full-section cursor spotlight effect.
- HoverBorderGradient — Conic gradient border following cursor angle.