About Magnetic Interaction
About Magnetic Interaction 🧲
Magnetic Interaction is a free Framer code component that adds a smooth magnetic effect to your buttons. As users move their cursor nearby, the button text follows the cursor, creating a subtle, interactive experience that makes your website feel more dynamic.
Whether you're building a creative portfolio, a modern landing page, or an interactive website, Magnetic Interaction helps you add engaging micro-interactions without building the animation from scratch.
What you can customize
Magnetic Radius: Control how close the cursor needs to be to activate the effect.
Max Shift: Set the maximum distance the text moves toward the cursor.
Stiffness: Adjust how quickly the text responds to cursor movement.
Damping: Control the smoothness and bounce of the animation.
Appearance: Customize button colors, background, border, typography, padding, and other available visual properties.
Icon: Add an optional icon using an image URL or SVG markup.
All settings are accessible through Framer's properties panel, so you can customize the interaction without editing the code.
Great for
Creative portfolios and personal websites
Hero sections and call-to-action buttons
SaaS and product landing pages
Agency and studio websites
Interactive navigation and feature sections
Micro-interactions that make interfaces feel more responsive
How to use
Remix Magnetic Interaction into your Framer project.
Add the component to your desired page or section.
Customize the button appearance and magnetic settings.
Preview the interaction, fine-tune the motion, and publish your site.
Share your build
Using Magnetic Interaction on your website? I'd love to see what you create. Share your project or send me your website link!
Need help?
Questions, feedback, or ideas for improvement? Get in touch:
Email: hey@11daniel.design
