MagicCard Component

Interactive cards with dynamic spotlight effects that follow your cursor. Perfect for feature showcases, pricing tiers, or product cards.

Interactive Feature Cards

Move Your Mouse

Hover over any card to see the magic happen. The spotlight and border glow follow your cursor position in real-time, creating an engaging interactive experience.

⚡

Lightning Fast

Blazing fast performance with optimised rendering and minimal bundle size.

🎨

Beautiful Design

Modern, clean aesthetics that work seamlessly with your brand identity.

🔧

Easy to Use

Simple API with comprehensive TypeScript support and documentation.

📱

Responsive

Works perfectly across all devices from mobile to desktop screens.

♿

Accessible

Built with accessibility in mind, following WCAG 2.1 guidelines.

🚀

Production Ready

Battle-tested components used in production by teams worldwide.

View Code Example 
<script>
  import MagicCard from '$lib/components/MagicCard.svelte';
</script>

<MagicCard
  gradientColor="#146ef5"
  gradientOpacity={0.15}
 
>
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Card description goes here...</p>
  </div>
</MagicCard>

Colour Variants

Customisable

Customise the spotlight and border colours to match your brand or design system.

Primary Blue

gradientColor="#146ef5"

Purple

gradientColor="#667eea"

Green

gradientColor="#10b981"

Orange

gradientColor="#f59e0b"

View Code Example 
<!-- Blue variant -->
<MagicCard gradientColor="#146ef5">
  <div class="content">...</div>
</MagicCard>

<!-- Purple variant -->
<MagicCard gradientColor="#667eea">
  <div class="content">...</div>
</MagicCard>

<!-- Custom opacity -->
<MagicCard
  gradientColor="#10b981"
  gradientOpacity={0.2}
 
>
  <div class="content">...</div>
</MagicCard>

Features

🎯

Mouse Tracking

Real-time cursor position tracking with smooth animations

💡

Dynamic Spotlight

Radial gradient spotlight that follows your mouse

✨

Border Glow

Animated border highlight at cursor position

🎨

Customisable Colours

Full control over spotlight and border colours

⚡

Performant

GPU-accelerated animations for 60fps smoothness

📦

Any Content

Wrap any content - text, images, or complex layouts

Quick Start Guide

1

Copy the Component

Copy MagicCard.svelte from src/lib/components/ to your project.

2

Wrap Your Content

Place your card content inside the MagicCard component. It works with any HTML or Svelte components.

3

Customise Colours

Set gradientColor, gradientOpacity, and borderColor props to match your design. All props are optional with sensible defaults.