NEW
Log In
Flexible and Adaptable
The component supports a wide range of content and can be easily integrated into various designs, thanks to its customizable properties and support for children elements, making it a versatile addition to any Framer project.
Customizable Animations
With adjustable animation settings such as damping, stiffness, and mass, users can fine-tune the spring effect to match their design aesthetic and interaction goals, providing a tailored user experience.
Enhanced User Interaction
The magnetic hover effect significantly improves user engagement by providing a unique and interactive experience, making elements come to life as they respond to the user's movements.
Back
The MagneticHover component is a versatile and interactive React component designed for Framer, leveraging Framer Motion to create a dynamic, magnet-like hover effect on any element. This component detects the user's mouse movements within a specified actionable area and applies a smooth spring animation to the hovered element, making it appear as if it is being magnetically pulled towards the cursor. The intensity, effect range, and animation settings are customizable, allowing for a wide range of interactive experiences.
Property Controls
Animation
Effect range
Intensity
Actionable Area
How do I use it?
You need to copy the component and then simply paste it in your Framer project. It will automatically import and appear in your left sidebar in the Assets tab under components. From there you can drag it into your canvas for a new instance.
Set up guide
Soon
