Preview

Magic Card ✨

Hover your cursor over this card to see the magical glow follow your movement!

Interactive Effect•Smooth Animation

Installation

<> import.ts
import { MagicCard } from "@/components/ui/magic-card"

Code

<> component.tsx
import { MagicCard } from "@/components/ui/magic-card"

<MagicCard isMagic>
  <h3>Magic Card ✨</h3>
  <p>Hover to see the glow effect!</p>
</MagicCard>

API Reference

MagicCard

A card with a magical glow effect that follows the cursor.

<> import.ts
import { MagicCard } from "@/components/ui/magic-card"

Props

PropTypeDefaultDescription
children
React.ReactNode—Content to display inside the card
isMagic
booleanfalseWhether to enable the magic glow effect
className
string""Additional CSS classes

Examples

Example 1
<> example.tsx
// Basic magic card
<MagicCard isMagic={true}>
  <h3>Magic Card</h3>
  <p>Hover to see the magic!</p>
</MagicCard>
Example 2
<> example.tsx
// Regular card (no magic)
<MagicCard>
  <h3>Regular Card</h3>
  <p>This is a normal card</p>
</MagicCard>
Example 3
<> example.tsx
// Magic card with custom content
<MagicCard isMagic={true} className="max-w-md">
  <div className="text-center">
    <h2 className="text-xl font-bold mb-2">Amazing Feature</h2>
    <p className="text-foreground/70">
      Move your cursor over this card to see the magic glow!
    </p>
  </div>
</MagicCard>