Morphing Dot Cursor: Premium Component by Troy Miller

A smooth morphing cursor that transforms from a dot into a ring when hovering over interactive elements. Fully customizable colors, sizes, and animations.

About this Component

Transform Your Website with a Premium Custom Cursor

Elevate your Framer projects with this sleek, professional morphing cursor that adds instant polish and sophistication to any design. Perfect for portfolios, agencies, SaaS products, and modern web experiences.

✨ Morph Animation Watch as your cursor seamlessly transforms from a minimal dot into an elegant ring when hovering over buttons, links, and interactive elements. The smooth scaling animation creates a premium, engaging user experience that sets your site apart.

🎨 Fully Customizable

Dot Control: Adjust size, color, and hover scale to match your brand
Ring Design: Customize ring size, color, and border width for perfect visual balance
Animation Timing: Fine-tune animation duration for your preferred feel (50-1000ms)
Blend Modes: Choose from 12 blend modes including Normal, Difference, Overlay, and more for unique visual effects
Opacity Control: Adjust transparency for subtle or bold cursor styles

⚡ Performance Optimized Built with React and TypeScript for maximum performance. Uses efficient event listeners and MutationObserver to seamlessly detect dynamic Framer content and interactive elements as they appear.

📱 Smart Mobile Detection Automatically hides on mobile devices (optional) so your desktop experience stays premium while mobile users get the standard touch interface they expect.

🎯 Works With Everything Automatically detects and responds to:

Links and buttons
Framer interactive components
Form inputs and submit buttons
Custom interactive elements

🔧 Easy Integration Simply drag and drop onto your Framer canvas. All customization happens through Framer's intuitive property controls—no code required. Perfect for designers who want professional results without touching code.

💼 Professional Quality Built following Framer Marketplace best practices with clean, maintainable code. Properly handles cleanup and cursor restoration when the component unmounts.

Perfect for: