Controls

strength

rangepx

stiffness

damping

Magnetic

Wrap anything to make it drift toward the cursor on a spring.

$ pnpm dlx shadcn@latest add @tweenly/magnetic

import { Magnetic } from "@/components/magnetic"

export function Demo() {
  return (
    <Magnetic>
      <button className="rounded-full bg-foreground px-6 py-3 text-background">Get started</button>
    </Magnetic>
  )
}

Updates live as you change the controls. Only non-default props are included.