Hover Card 3D
An immersive card component with 3D transformation effects that respond to mouse movement, featuring realistic depth, perspective, and smooth spring animations.
Pro Features
Unlock advanced capabilities with the Pro version
3D Transformations
Smooth 3D rotations based on mouse position with realistic perspective
Multiple Variants
Pre-configured styles: subtle, dramatic, gaming, elegant, and neon
Visual Effects
Customizable shadows, glows, and overlay effects
Custom Overlays
Static overlays or dynamic render props with rotation data
Interactive Controls
Adjustable rotation limits, animation speed, and spring physics
Accessibility First
Full keyboard navigation, touch support, and screen reader compatibility
Customizable Effects
Fine-tune perspective, shadows, glows, and animation timing
Performance Optimized
Smooth 60fps animations with hardware acceleration
Event Callbacks
Comprehensive event system for hover, rotation, and interaction tracking
Mobile Friendly
Touch gestures and responsive design for all devices
Installation
Install via CLI
moonui add hover-card-3dUsage
3D Card
Hover to see the 3D effect
Examples
Variants Showcase
Different pre-configured animation styles for various use cases
Subtle
subtle variant
Dramatic
dramatic variant
Gaming
gaming variant
Elegant
elegant variant
Neon
neon variant
3D Perspective Demo
Mouse position based 3D rotation with enhanced perspective
Deep Perspective
30° rotation, 800px perspective
Gaming Style
Move your mouse around
Neon Glow
Cyberpunk aesthetic
Custom Rotation & Speed
Interactive controls for rotation limits and animation speed
Dynamic
Adjustable rotation
Interactive
Smooth animation
Responsive
Custom speed
Shadow & Glow Effects
Different shadow intensities and glow effects
Light Shadow
Heavy Shadow
Subtle Glow
Neon Glow
Event Callbacks & Accessibility
Event handling and keyboard/touch accessibility features
Event Tracking
Hover and move to see events fire
Accessible
Use arrow keys or touch to interact
Press Space/Enter to toggle hover
Product Showcase Card
E-commerce product card with advanced 3D effects and overlay
Premium Product
Experience the next level of quality with our premium collection.