Magic Card

A stunning profile card component with an interactive glowing border effect that follows your mouse cursor. Features a modern design with cover image, profile picture, user stats, skills, and a magical hover animation that creates a beautiful gradient border.

Features

• ✨ Interactive Glowing Border: Border follows mouse movement with smooth gradient animation
• 🎯 Customizable: Easy to customize colors, content, and styling

Preview

Installation

Usage

The MagicCard component consists of two main parts:

1. MagicContainer: The wrapper that provides the glowing border effect
2. Card Content: Your custom content inside the container

Basic Usage

Advanced Usage with Full Profile Card

Customization

Changing the Glow Colors

You can customize the gradient colors by modifying the background style in the MagicContainer:

Adjusting the Glow Size

Modify the circle size in the radial gradient:

Custom Border Radius

Change the border radius by modifying the className:

Examples

Social Media Profile Card

Perfect for displaying user profiles with stats, bio, and social links.

Portfolio Card

Great for showcasing work with images, descriptions, and skills.

Product Card

Ideal for e-commerce with product images, prices, and action buttons.