❍Magnetic Button
06 / 08button

Magnetic Button

A button that translates toward the cursor with spring physics, with the label counter-drifting to create a sense of mass.

buttoninteractiveanimation

Installation

▸ Run the following command

npx shadcn@latest add https://mellowui.com/r/magnetic-button.json

▸ Or install manually

  1. Install dependencies: pnpm add motion
  2. Copy the source from the Code tab above.
  3. Place it at components/mellow/magnetic-button.tsx
  4. Import and use.

API Reference

PropTypeDefaultDescription
childrenReact.ReactNode—Button label content.
variant"default" | "accent""default"Color scheme — default is neutral glass, accent is purple.
strengthnumber0.45Multiplier controlling how far the button pulls toward the cursor.