Magnetic Cursor
Interactive landing page with magnetic cursor effects that attract elements.
Main Features of Magnetic Cursor
How to Use Magnetic Cursor in Next.js
Installation Guide for Magnetic Cursor
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
magneticStrength | number | 1 | Strength of magnetic attraction (0.5-2). |
cursorColor | string | #3b82f6 | Magnetic cursor color. |
attractionRadius | number | 100 | Radius of magnetic attraction in pixels. |
enableMagnetic | boolean | true | Enable magnetic cursor effects. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is 'Magnetic Strength'?
The `magneticStrength` prop defines the pixel-distance and pull-force applied to the cursor when it enters a target's `attractionRadius`.
QCan I use it with custom icons?
Yes, the magnetic logic can be applied to any SVG or image element on the page by wrapping it in the interactive container.
QDoes it work on mobile?
Magnetic effects are automatically disabled on touch devices to ensure standard swipe/tap behaviors remain predictable and friction-free.