Add a layer of professional polish to your Framer website with the Magic Blend Cursor. This highly customizable component replaces the standard mouse pointer with a fluid, physics-driven circle that reacts intelligently to the elements beneath it. Using advanced CSS blend modes and backdrop filters, the cursor acts like a magical lens—inverting colors or applying vibrant themes (like Cyber Blue, Neon Pink, or Sunset) to whatever you hover over.
It enhances UX by automatically detecting clickable elements (like links and buttons) and scaling up to provide immediate visual feedback. With complete control over the spring physics (stiffness, damping, and mass), you can make the cursor feel weighty and smooth or snappy and responsive. Thanks to its new React Portal implementation, the cursor is injected directly into the document body, ensuring it stays perfectly on top of all your layers without any z-index conflicts or layout clipping.
Functions (Key Features):
🎨 7 Preset Themes: Choose from classic Original Invert, Monochrome, Cyber Blue, Neon Pink, Sunset, Forest, or Ocean.
✨ Blend Mode Magic: Uses mix-blend-mode and backdrop-filter to interact beautifully with your existing text, images, and backgrounds.
🖱️ Smart Hover Detection: Automatically grows in size when hovering over links, buttons, or any clickable element.
🧲 Fluid Physics: Powered by Framer Motion springs for a buttery-smooth, trailing movement effect.
🚀 Portal Rendering: Injects the cursor directly into the document body to prevent layout clipping and z-index issues.
How to Use:
Copy & Paste: Copy the component and paste it anywhere into your main desktop layout.
Size the Container: Adjust the Width and Height of the component's frame directly on the Framer canvas to set the cursor's base size.
Select Theme: Choose your preferred visual style from the Theme dropdown in the properties panel.
Tweak Physics: Fine-tune the Damping, Stiffness, and Mass to make the cursor movement feel exactly how you want it.
Preview: Because the dynamic cursor uses a React Portal, it will only be fully visible and interactive on the published site or in Preview mode (not on the static canvas).
Add a layer of professional polish to your Framer website with the Magic Blend Cursor. This highly customizable component replaces the standard mouse pointer with a fluid, physics-driven circle that reacts intelligently to the elements beneath it. Using advanced CSS blend modes and backdrop filters, the cursor acts like a magical lens—inverting colors or applying vibrant themes (like Cyber Blue, Neon Pink, or Sunset) to whatever you hover over.
It enhances UX by automatically detecting clickable elements (like links and buttons) and scaling up to provide immediate visual feedback. With complete control over the spring physics (stiffness, damping, and mass), you can make the cursor feel weighty and smooth or snappy and responsive. Thanks to its new React Portal implementation, the cursor is injected directly into the document body, ensuring it stays perfectly on top of all your layers without any z-index conflicts or layout clipping.
Functions (Key Features):
🎨 7 Preset Themes: Choose from classic Original Invert, Monochrome, Cyber Blue, Neon Pink, Sunset, Forest, or Ocean.
✨ Blend Mode Magic: Uses mix-blend-mode and backdrop-filter to interact beautifully with your existing text, images, and backgrounds.
🖱️ Smart Hover Detection: Automatically grows in size when hovering over links, buttons, or any clickable element.
🧲 Fluid Physics: Powered by Framer Motion springs for a buttery-smooth, trailing movement effect.
🚀 Portal Rendering: Injects the cursor directly into the document body to prevent layout clipping and z-index issues.
How to Use:
Copy & Paste: Copy the component and paste it anywhere into your main desktop layout.
Size the Container: Adjust the Width and Height of the component's frame directly on the Framer canvas to set the cursor's base size.
Select Theme: Choose your preferred visual style from the Theme dropdown in the properties panel.
Tweak Physics: Fine-tune the Damping, Stiffness, and Mass to make the cursor movement feel exactly how you want it.
Preview: Because the dynamic cursor uses a React Portal, it will only be fully visible and interactive on the published site or in Preview mode (not on the static canvas).
