CONTENTS:Magnetic Button

Magnetic Button

A high-polish micro-interaction component engineered with Framer Motion springs. When the cursor nears the button, it smoothly attracts the element toward the cursor coordinates up to a configurable maximum distance threshold, dampening with natural Newtonian physics on exit.

Dependencies:

framer-motiontailwind-merge

Loading preview...

Examples

Select a preset to load into preview

Installation

pnpm add framer-motion tailwind-merge

Props

Property	Type	Default	Description
`maxDistance`	`number`	`30`	Maximum distance in pixels the button is allowed to pull toward the pointer.
`stiffness`	`number`	`150`	Spring stiffness coefficient. Higher values create a snappier attraction.
`damping`	`number`	`10`	Spring damping factor. Controls oscillation deceleration.
`mass`	`number`	`0.1`	Simulated physical mass of the button. Lower mass feels lighter and faster.
`className`	`string`	`undefined`	Tailwind CSS classes for styling the inner interactive button element.
`bgClassName`	`string`	`undefined`	Tailwind CSS classes for the magnetic backdrop or container element.