Magnetic Button

Button that stretches toward the cursor when nearby and snaps back with spring physics.

npx uniqueui add magnetic-button

Preview

Usage

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

export default function Example() {
  return (
    <div className="flex flex-wrap gap-8 items-center justify-center p-20 text-white">
      <MagneticButton>Hover near me</MagneticButton>
      <MagneticButton
        magneticStrength={0.5}
        magneticRadius={200}
        className="bg-gradient-to-b from-purple-700 to-purple-900"
      >
        Stronger pull
      </MagneticButton>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	The internal content of the button.
`className`	`string`	Style overrides appended to the interactive boundary.
`magneticStrength`	`number`	Float determining how fast/far the button lerps toward the cursor.
`magneticRadius`	`number`	Pixel radius extending outward from the button where gravity begins.
`onClick`	`() => void`	Standard click event handler.
`disabled`	`boolean`	Disables interaction and magnetic gravitational pull.