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#

PropTypeDefault
strength

Share of the pointer's distance the button follows, from 0 to 1.

number0.3
max

Largest shift, in pixels.

number8