---
title: "Origin Magnet Button — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Shouvik Biswas · Buttons. Fluid Magnetic Origin Button"
canonical: "https://framer.elliotli.dev/component/origin-magnet-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Origin Magnet Button

# Origin Magnet Button

Fluid Magnetic Origin Button

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

![Origin Magnet Button preview image 1](https://framer.elliotli.dev/og/component/origin-magnet-button/aa3d47fa92275867/1600x1200.jpg)

## Summary

Fluid Magnetic Origin Button

## Description

A tactile button featuring physics-driven magnetic pull, independent text parallax, and an origin-based radial hover wipe. Designed to add composed, high-performance interaction to refined layouts.

## Features

-   Adjustable text and typography controls for seamless brand alignment.
    
-   Native hyperlink inputs with optional new-tab targeting for standard navigation routing.
    
-   Customizable background color, container padding, and corner radius for precise structural fit.
    
-   Configurable base and hover box-shadow support for establishing interactive depth.
    
-   Origin-based radial hover fill for a fluid, cursor-aware background transition.
    
-   Dynamic text color inversion during the hover wipe for sustained legibility across contrasting states.
    
-   Adjustable wipe transition easing and duration for precise animation pacing.
    
-   Configurable cursor pull strength and maximum travel range for strict interaction boundaries.
    
-   Adjustable spring stiffness and damping for exact calibration of kinetic snap and friction.
    
-   Expandable invisible activation area to capture the cursor before it reaches the component edge.
    
-   Independent inner text parallax with adjustable drift strength for layered spatial depth.
    
-   Singleton pointer tracking and frame batching for 60fps performance across dense component layouts.
    
-   Scroll-aware visibility tracking to suspend mathematical calculations when the component leaves the viewport.
    
-   Automatic touch-device detection to safely disable magnetic physics on mobile screens.
    
-   Semantic anchor wrapping and tabIndex fallbacks for complete keyboard accessibility.
    
-   Native text-highlight prevention for uninterrupted interactive behaviors.
    

### How to Use

-   Drag and drop the component onto your Framer canvas.
    
-   Configure the properties to match your design style.
    
-   Publish your project to view your component live.
    

_Anchor your design system with physics-driven spatial depth._

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

-   All · #4467

## Details

- **Author**: Shouvik Biswas
- **Price**: $4.00
- **Published**: 2026-07-08
- **Updated**: 2026-07-25
- **Added**: 2026-07-08
- **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