Magnetic Button
Interactive button with magnetic hover effect that follows cursor movement, creating an engaging user experience with customizable attraction strength and spring physics.
Pro Features
Unlock advanced capabilities with the Pro version
Magnetic Attraction
Button follows cursor movement within range for engaging interaction
Cursor Tracking
Real-time cursor position tracking with smooth interpolation
Spring Physics
Realistic spring animations with customizable stiffness and damping
Adjustable Range
Define the magnetic field range for precise control
Variable Strength
Fine-tune attraction strength from subtle to strong
3D Perspective
Subtle 3D rotation effect for depth perception
Glow Effect
Dynamic glow that responds to hover state
Production Ready
Optimized performance with proper event handling
Installation
Install via CLI
moonui add magnetic-buttonUsage
Examples
Basic Magnetic Button
Default magnetic button with standard settings
Strength Variations
Different magnetic attraction strengths
Subtle movement
Balanced effect
Strong attraction
Range Variations
Different effect ranges for magnetic attraction
Close proximity
Standard distance
Wide attraction area
Radius Variations
Different border radius options for visual variety
Interactive Demo
Adjust all parameters in real-time
Spring Configurations
Different spring physics for varied feel
Smooth & fluid
Default behavior
Quick & snappy
Multiple Buttons
Multiple magnetic buttons with different settings
Real-world Use Cases
Practical examples in social media and e-commerce
Social Media Actions
Interactive buttons for engagement
E-commerce Actions
Shopping interactions