Skip to main content

​
Installation

npx shadcn-svelte@latest add magic-card

​
Usage

<script lang="ts">
  import MagicCard from "$lib/components/magic/magic-card/magic-card.svelte";
</script>

<MagicCard>
  <div class="p-6">
    <h3>Card Title</h3>
    <p>Card content goes here</p>
  </div>
</MagicCard>

​
Props

​
children
Snippet
The content to display inside the card.
​
class
string
Additional CSS classes to apply to the card container.
​
gradientSize
number
default:"200"
Radius of the gradient spotlight effect in pixels.
​
gradientColor
string
default:"'#262626'"
Color of the overlay gradient spotlight.
​
gradientOpacity
number
default:"0.8"
Opacity of the gradient overlay (0-1).
​
gradientFrom
string
default:"'#9E7AFF'"
Starting color of the border gradient (visible on hover).
​
gradientTo
string
default:"'#FE8BBB'"
Ending color of the border gradient (visible on hover).

​
Examples

​
Basic Card

<MagicCard>
  <div class="p-8 text-center">
    <h2 class="text-2xl font-bold">Magic Card</h2>
    <p class="mt-4 text-muted-foreground">
      Hover to see the spotlight effect
    </p>
  </div>
</MagicCard>

​
Custom Colors

<MagicCard
  gradientFrom="#3b82f6"
  gradientTo="#8b5cf6"
  gradientColor="#1e293b"
>
  <div class="p-6">
    <h3>Blue to Purple</h3>
    <p>Custom gradient colors</p>
  </div>
</MagicCard>

​
Larger Spotlight

<MagicCard gradientSize={300}>
  <div class="p-6">
    <h3>Larger Effect</h3>
    <p>Increased gradient radius</p>
  </div>
</MagicCard>

​
Lower Opacity

<MagicCard gradientOpacity={0.4}>
  <div class="p-6">
    <h3>Subtle Effect</h3>
    <p>Reduced overlay opacity</p>
  </div>
</MagicCard>

​
Card Grid

<div class="grid grid-cols-3 gap-4">
  {#each items as item}
    <MagicCard>
      <div class="p-6">
        <h4 class="font-semibold">{item.title}</h4>
        <p class="text-sm text-muted-foreground">{item.description}</p>
      </div>
    </MagicCard>
  {/each}
</div>

​
Feature Showcase

<MagicCard 
  gradientFrom="#06b6d4" 
  gradientTo="#3b82f6"
  class="max-w-md"
>
  <div class="p-8">
    <div class="mb-4 text-4xl">🚀</div>
    <h3 class="mb-2 text-xl font-bold">Fast Performance</h3>
    <p class="text-sm text-muted-foreground">
      Lightning-fast load times and smooth animations
    </p>
  </div>
</MagicCard>

​
How It Works

The Magic Card creates a layered effect:
  1. Border Layer: Animated gradient that follows the mouse
  2. Background Layer: Fills the card interior
  3. Overlay Layer: Semi-transparent spotlight effect
  4. Content Layer: Your card content on top
The gradients use motion-sv with useMotionTemplate and useMotionValue for smooth, performance-optimized animations.

​
Mouse Tracking

The component automatically:
  • Tracks mouse position within the card
  • Updates gradient positions in real-time
  • Resets when the mouse leaves the card
  • Handles window blur and visibility changes
  • Works with touch/pointer events

​
Features

  • Mouse-following spotlight effect
  • Animated gradient border
  • Customizable gradient colors and size
  • Smooth transitions with motion-sv
  • Automatic cleanup and reset handling
  • Responsive to visibility changes
  • GPU-accelerated animations
  • Semantic HTML structure
  • Accessible with proper ARIA roles

​
Styling Tips

  • The card inherits border radius from parent styles
  • Use rounded-lg, rounded-xl, etc. on the parent for rounded corners
  • The component uses CSS custom properties for border colors
  • Combine with other utility classes for spacing and layout
<MagicCard class="rounded-xl shadow-lg">
  <!-- content -->
</MagicCard>

​
Performance

  • Uses transform-gpu for hardware acceleration
  • Efficient pointer event tracking
  • Automatic cleanup of event listeners
  • Minimal re-renders with reactive motion values

Build docs developers (and LLMs) love

Get started for freeTalk to us