Spotlight Card
An elegant card component with a dynamic spotlight effect that follows the mouse cursor, creating sophisticated illumination that highlights content.
Pro Features
Unlock advanced capabilities with the Pro version
Mouse Tracking
Real-time cursor position tracking for dynamic illumination
Customizable Colors
Full control over spotlight color and transparency
Smooth Animations
Optimized transitions with Framer Motion
Multiple Effects
Primary spotlight, secondary glow, and border effects
Adjustable Radius
Control spotlight size for different visual impacts
Particle Effects
Subtle animated particles for enhanced interactivity
Installation
Install via CLI
moonui add spotlight-cardUsage
Interactive Spotlight
This card features a dynamic spotlight effect that follows your mouse cursor. As you move over the card, a radial gradient illuminates the area around your pointer, creating an engaging visual experience.
Examples
Basic Spotlight Effect
Simple spotlight card with default settings
Interactive Spotlight
This card features a dynamic spotlight effect that follows your mouse cursor. As you move over the card, a radial gradient illuminates the area around your pointer, creating an engaging visual experience.
Custom Spotlight Colors
Different color variations for spotlight effect
Blue Spotlight
Cool blue effect
Pink Spotlight
Vibrant pink effect
Green Spotlight
Fresh green effect
Variable Spotlight Size
Different spotlight radius sizes
Focused
200px spotlight
Balanced
400px spotlight
Wide
600px spotlight
Interactive Controls
Adjust spotlight parameters in real-time
Interactive Demo
Adjust the controls above to see how different settings affect the spotlight effect.
Feature Cards
Product feature cards with spotlight enhancement
Performance Boost
Supercharge your application with our performance tools.
Advanced Security
Enterprise-grade security features to protect your data.
Interactive Grid
Grid layout with multiple spotlight cards