Component
Magnetic Hover Component for Framer
This is a customizable magnetic hover component for Framer, recreated from Lumalabs's website. It adds a magnetic touch interaction to your elements — as you hover, the element smoothly pulls toward the cursor, creating a subtle magnetic effect.
About the resource
The component works by placing it within the frame you want to apply the effect to. Yes... it's that simple.
It has a bunch of property controls on the right panel that you can tweak to customize the effect. For example, the "Hover Area" defines how far outside of the element the hover effect starts, and the "Distance" defines how far the layer can be pulled.
To recreate the exact same effect from the Lumalabs site, I also added the "Children" property which—when added—creates something like a parallax movement effect between the main elements and their children when hovering over.
About the resource
The component works by placing it within the frame you want to apply the effect to. Yes... it's that simple.
It has a bunch of property controls on the right panel that you can tweak to customize the effect. For example, the "Hover Area" defines how far outside of the element the hover effect starts, and the "Distance" defines how far the layer can be pulled.
To recreate the exact same effect from the Lumalabs site, I also added the "Children" property which—when added—creates something like a parallax movement effect between the main elements and their children when hovering over.
About the resource
The component works by placing it within the frame you want to apply the effect to. Yes... it's that simple.
It has a bunch of property controls on the right panel that you can tweak to customize the effect. For example, the "Hover Area" defines how far outside of the element the hover effect starts, and the "Distance" defines how far the layer can be pulled.
To recreate the exact same effect from the Lumalabs site, I also added the "Children" property which—when added—creates something like a parallax movement effect between the main elements and their children when hovering over.
The property controls of the Magnetic Hover component.
The property controls of the Magnetic Hover component.
The property controls of the Magnetic Hover component.
