---
title: "MagneticEffect — Free Framer component · Best of Framer"
description: "Free Framer component · by AkemDesign · Buttons. Cursor-driven motion, any layer."
canonical: "https://framer.elliotli.dev/component/magneticeffect"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/MagneticEffect

# MagneticEffect

Cursor-driven motion, any layer.

[View on Framer](https://framer.com/marketplace/components/magneticeffect/?via=elliot-li)

![MagneticEffect preview image 1](https://framer.elliotli.dev/og/component/magneticeffect/944062b6e235f923/1600x1200.jpg)

## Summary

Cursor-driven motion, any layer.

## Description

## About

Magnetic Effect brings your designs to life with physics-based motion that responds to the cursor in real time. Drop any component inside, and watch it subtly follow or flee the mouse — no code, no setup, just plug and play.

Whether you want to draw attention to a testimonial, make a CTA impossible to ignore, or simply add a layer of interactivity that feels premium, Magnetic Effect does the heavy lifting. It works with any design you connect to it — buttons, cards, images, social proof badges, entire sections. Your layout, your style, enhanced with effortless motion.

The effect stays active across the entire viewport. No hover zone, no dead spots — wherever the cursor moves on the page, your element reacts.

### Key Features

-   **Two modes** — Attract pulls the element toward the cursor; Repel pushes it away. One toggle to switch.
    
-   **Always active** — The effect responds to the mouse regardless of distance, keeping the motion alive at all times.
    
-   **Works with any content** — Drop in a button, a card, a testimonial, an image. Whatever you design, it just works.
    
-   **Smooth spring physics** — Built on Framer Motion springs for fluid, natural movement with zero jank.
    
-   **Fully customizable** — Fine-tune distance, stiffness, damping, and mass directly from the property panel to match your exact feel.
    
-   **Lightweight & invisible** — Zero visual footprint. It wraps your content without adding markup or affecting your layout.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3805

## Details

- **Author**: AkemDesign
- **Published**: 2026-05-13
- **Updated**: 2026-05-13
- **Added**: 2026-03-15
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything