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
Preset Configurations
5 ready-to-use presets: product-card, profile-card, game-card, price-card, feature-card
Parallax Depth Layers
Multi-layer depth system with independent movement for realistic 3D parallax
Shine/Reflection Effect
Dynamic light reflection that follows mouse position with adjustable intensity
Multi-Layer Glow
Advanced glow system with multiple layers, animations (pulse/rotate), and custom colors
Multiple Variants
Pre-configured styles: subtle, dramatic, gaming, elegant, and neon
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
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
Preset Configurations
One-line setup with predefined configurations for different use cases
Product Card
One-line setup
Profile Card
One-line setup
Game Card
One-line setup
Price Card
One-line setup
Feature Card
One-line setup
Parallax Depth Layers
Multi-layer depth effect with elements moving at different speeds
Depth Layers
Background layers move at different speeds creating realistic depth
Shine/Reflection Effect
Dynamic light reflection that follows mouse position
Light Shine
Subtle reflection effect
Medium Shine
Balanced reflection
Strong Shine
Maximum reflection
Multi-Layer Glow
Advanced glow effects with multiple layers and animations
Pulse Glow
Multi-layer glow with pulsing animation
Rotating Glow
Multi-layer glow with rotation effect
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.