Magnetic Action Button

An interactive button that uses mouse position tracking to apply a subtle magnetic pull effect. The button and its inner label move slightly toward the cursor, creating a tactile hover feel.

ReactNext.jsClient ComponentReactMotion

Loading preview…

CLI Installation

Add to your project using the shadcn CLI:

npx shadcn@latest add @mridha/magnetic-action-button

Registry endpoint: https://ui.mridha.net/r/magnetic-action-button.json

Manual Installation

1. Install dependencies

pnpm add motion

2. Copy the component file

Copy the source from the Code tab above into components/ui/magnetic-action-button.tsx

3. Import the component

import { MagneticActionButton } from "@/components/ui/magnetic-action-button";

4. Use it in a page

export default function Page() {
  return (
    <main>
      <MagneticActionButton />
    </main>
  );
}

Dependencies

motion

Accessibility

Magnetic effect is purely visual — does not affect keyboard interaction.
Focus states are visible and unaffected by the magnetic transform.
Touch devices receive standard button behavior without the magnetic effect.

Performance

Mouse tracking uses Motion's useSpring for smooth interpolation.
Recommend using sparingly — magnetic effect works best for primary CTAs.