Why Magic Cursor:
Magic Cursor Pro responds with natural spring motion, subtle weight, and satisfying click feedback, creating a premium interaction layer that instantly elevates perception and polish. Perfect for portfolios, product launches, SaaS sites, and modern brand experiences.
Built-in mobile detection ensures the effect automatically disables on touch devices, preserving native scrolling and UX performance.
Key Features
- Tactile Click Physics — Subtle “squish” feedback on click for realistic interaction.
- Dynamic Color Inversion — Mix-blend-mode support for automatic contrast over any background.
- Fully Customizable — Use your own .svg or .png, or style the default icon.
- Advanced Spring Controls — Fine-tune stiffness, damping, and mass for precise motion feel.
- Mobile Smart — Automatically hides on touch devices and portrait layouts.
Props Overview
- customIcon — Upload your own cursor image.
- invertDefaultIcon — Flip inner/outer SVG colors instantly.
- iconSize — Control cursor size (auto-centered).
- mixBlendMode — Enable background color inversion.
- clickSquish — Toggle click scale animation.
- stiffness / damping / mass — Adjust weight, speed, and trailing behavior.
- hideSystemCursor — Hide the default OS cursor.
Setup Instructions
- Drag and drop the component into your primary Desktop frame.
- Place it near the top of your Layers panel for best practice.
- Adjust Mass and Damping to achieve your desired trailing effect.
- Publish or open live preview to see the full physics and blend effects.
Pro Tips
Premium Look: Enable Mix Blend Mode + Invert for dynamic contrast across dark and light sections.
Responsive Feel: Start with Mass 1, Stiffness 400, Damping 35 for a crisp, modern interaction.
Support
Need assistance or want to request a feature? rehansajid9d@gmail.com
Rehan 9D
