---
title: "MagnetInteractButton — Free Framer component · Best of Framer"
description: "Free Framer component · by Creative Apes · Buttons. Cinematic Motion for Irresistible CTAs"
canonical: "https://framer.elliotli.dev/component/magnetinteractbutton"
---

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

# MagnetInteractButton

Cinematic Motion for Irresistible CTAs

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

![MagnetInteractButton preview image 1](https://framer.elliotli.dev/og/component/magnetinteractbutton/04d4b82ed7ac3ea3/1600x1200.jpg)

## Summary

Cinematic Motion for Irresistible CTAs

## Description

## Elevate Your User Experience with Magnetic Interaction

Static buttons are a thing of the past. In a digital landscape where attention is the primary currency, the **Magnetic Spotlight Button** gives you a competitive edge. This component is not just a UI element; it is a cinematic experience designed to bridge the gap between human intent and digital response.

Built on a foundation of high-performance physics, this button creates a literal 'pull' towards your most important conversion points. By simulating physical weight and attraction, it provides users with a tactile satisfaction that standard buttons simply cannot match.

### Key Highlights

\* **Magnetic Cursor Tracking:** The button leverages real-time coordinate tracking to 'lean' towards the user's cursor. This creates an organic, fluid motion that makes the interface feel alive and responsive.

\* **Dynamic Spotlight Engine:** Using a custom radial gradient system, the button illuminates precisely where the cursor is. This 'flashlight' effect highlights your brand colors and text, ensuring maximum readability and visual interest.

\* **Framer-Motion Physics:** Powered by the industry-leading spring engine, you have granular control over the weight (mass), stiffness, and damping of the movement. No robotic transitions—just smooth, natural physics.

\* **Optimized Performance:** Engineered to be 'Framer Safe,' the code is lightweight and utilizes GPU-accelerated transforms to ensure zero lag, even on lower-end mobile devices.

### Complete Design Control

\* **Physics Tuning:** Adjust the _Magnetic Strength_ (how hard it pulls) and _Magnetic Range_ (how far away the cursor triggers the effect) to find the perfect balance for your brand.

\* **Typography & Styling:** Directly from the Framer sidebar, modify font families, weights, letter spacing, and text transformations. Customize the button padding and border-radius to fit any design system.

\* **Lighting Customization:** Toggle the spotlight effect and fine-tune its size, color, and opacity. Create everything from a subtle glow for luxury sites to a vibrant neon pulse for modern SaaS landing pages.

### Perfect For:

\* **Hero Section CTAs:** Make your 'Get Started' button impossible to ignore.

\* **High-End Portfolios:** Showcase your attention to detail through premium micro-interactions.

\* **E-commerce Buy Buttons:** Increase the perceived value of products through a more interactive checkout journey.

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

-   All · #7963

## Details

- **Author**: Creative Apes
- **Published**: 2026-05-31
- **Updated**: 2026-04-16
- **Added**: 2026-04-06
- **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