Magnetic Button
Leans toward the cursor and springs back on leave.
- 1.0 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/magnetic-button.jsonAdds components/velora/magnetic-button.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
strengthHow far the button is allowed to travel toward the cursor, in px | number | 14 |
Also accepts every <button> attribute, forwarded to the root element.
Accessibility
- 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.