Magnetic Hover Component for Framer

Introduction

Small interaction features can make a big difference in user experience. With this Magnetic Hover code override for Framer, you can add an engaging, cursor-tracking hover effect to any element in your project. It’s perfect for creating visually interactive components, making your design feel more dynamic and responsive to user input.

Why Add a Magnetic Hover Effect?

Adding this type of functionality enhances interactivity, especially on clickable or visually important elements. This feature allows your design to respond to the cursor’s movement with smooth, animated motion, creating a more engaging and polished experience. It’s a small addition that can add a lot of personality and depth to your interface.

How to Use the Code Override

The code override is super easy to apply and only requires a few steps to get it working on your button.

1. Grab the remix link at the bottom

2. In the assets panel, locate the MagneticHover.tsx

3. Select all the code using ⌘ + A and copy it using ⌘ + C

4. In your own project, create a new code override from the assets panel where you will paste the previously copied code

5. Now select the element you want to apply the hover effect to and enable its code overrides

6. In the code overrides panel, set the File to whatever you named your code override and the Override to MagneticHover

7. Done, you're all set