Magic Cursor Pro

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…

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

1. Tactile Click Physics — Subtle “squish” feedback on click for realistic interaction.
2. Dynamic Color Inversion — Mix-blend-mode support for automatic contrast over any background.
3. Fully Customizable — Use your own .svg or .png, or style the default icon.
4. Advanced Spring Controls — Fine-tune stiffness, damping, and mass for precise motion feel.
5. 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

1. Drag and drop the component into your primary Desktop frame.
2. Place it near the top of your Layers panel for best practice.
3. Adjust Mass and Damping to achieve your desired trailing effect.
4. 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? [email protected]