Magnetic Button

Leans toward the cursor and springs back on leave.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/magnetic-button.json

Adds components/velora/magnetic-button.tsx, installs motion.

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`strength` How far the button is allowed to travel toward the cursor, in px	`number`	`14`

Also accepts every <button> attribute, forwarded to the root element.

Reduced motion: The button stays in place and does not follow the cursor.
Keyboard: A native <button type="button"> by default: focusable, activates with Enter or Space, with a visible focus-visible outline. Blur resets any offset.
Screen readers: Announced as a button named by its children; aria-label, other aria-* attributes and disabled are passed through for icon-only or disabled use.

Leans toward the cursor and springs back on leave.

pnpm dlx shadcn@latest add https://paulkeys.org/r/magnetic-button.json

Adds components/velora/magnetic-button.tsx, installs motion.

Prop	Type	Default
`children*`	`React.ReactNode`	`—`
`className`	`string`	`—`
`strength` How far the button is allowed to travel toward the cursor, in px	`number`	`14`

Also accepts every <button> attribute, forwarded to the root element.

Reduced motion: The button stays in place and does not follow the cursor.
Keyboard: A native <button type="button"> by default: focusable, activates with Enter or Space, with a visible focus-visible outline. Blur resets any offset.
Screen readers: Announced as a button named by its children; aria-label, other aria-* attributes and disabled are passed through for icon-only or disabled use.