Components

Magnetic Button

A shadcn-compatible button that subtly follows the cursor using spring-based motion.

interactivemotioncursoranimation

Installation

$npx shadcn@latest add /r/magnetic-button.json

API Reference

PropTypeDefaultDescription
movementnumber6How far (in px) the button drifts toward the cursor on hover.
childrenReact.ReactNode-Button content.
classNamestring-Classes merged onto the underlying button.
...propsReact.ComponentProps<typeof Button>-All native <button> props via the shadcn Button (e.g. variant, size, disabled, onClick), except 'asChild'.

Customization

  • Pass className to restyle the component — classes are merged with cn, so your utilities win.
  • Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
  • Tune behavior with the props in the API reference above (e.g. movement).