Magnetic Hover Component for Framer

Copy component

Magnetic Hover Component for Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik
image of Isaac Roberts
image of Prianca S.

Created by

,

and

Decorative store banner with icons and blue text pill design
Decorative store banner with icons and blue text pill design
Decorative store banner with icons and blue text pill design
Magnetic hover effect on a media control button with a cursor interaction

Related Lesson

Creating a Useless Magnetic Hover Effect For a Website

Magnetic hover effect on a media control button with a cursor interaction

Related Lesson

Creating a Useless Magnetic Hover Effect For a Website

Magnetic hover effect on a media control button with a cursor interaction

Related Lesson

Creating a Useless Magnetic Hover Effect For a Website

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.

Framer magnetic hover settings panel with distance and area controls

The property controls of the Magnetic Hover component.

Framer magnetic hover settings panel with distance and area controls

The property controls of the Magnetic Hover component.

Framer magnetic hover settings panel with distance and area controls

The property controls of the Magnetic Hover component.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

  • Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component