Magnetic Cursor
Interactive landing page with magnetic cursor effects that attract elements.
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. |
When to Use
Excellent for creative agencies, high-end portfolios, and Next.js applications that want an interactive 'Magnetic' aesthetic. Use this full-page template for an engaging experience where elements 'pull' the cursor, creating a tactile sense of interaction.
Best Practices
Maintain consistent spacing within your design system to avoid over-crowding interactive points. Follow React best practices by managed the mouse-event listeners globally. Optimize for performance by using efficient Framer Motion springs.
Why This Component Matters
Magnetic interactions create a sense of digital 'gravity' and playfulness. This production-ready UI template helpsคุณ build an interface that feels alive and responsive, improving user engagement through localized micro-interactions.
FAQ
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.
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.