Magnetic Button

A button that leans a few pixels towards the pointer and settles back when it leaves.

Dependenciesmotion

Installation#

pnpm dlx shadcn@latest add @balick/magnetic-button

Or pass the full URL: https://ui.balick.me/r/magnetic-button.json

Usage#

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

export function Cta() {
  return <MagneticButton size="lg">Hover me</MagneticButton>
}

Props#

Prop	Type	Default	Description
`strength` Share of the pointer's distance the button follows, from 0 to 1.	`number`	0.3	Share of the pointer's distance the button follows, from 0 to 1.
`max` Largest shift, in pixels.	`number`	8	Largest shift, in pixels.