## Magnetic Button (S—041)

A call-to-action that leans toward the cursor, with a parallax label and a springy return.

- URL: https://sundaeui.dev/components/magnetic-button
- Category: Animations & interactions · Art direction: Playful
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, Tailwind CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/magnetic-button.json`
- Tags: tailwind, micro-interaction, cursor, animated, react, hover, magnetic, button

A button with a little gravity. An invisible zone around it starts pulling before the cursor arrives, so the button leans toward the pointer and the label travels half as far again, giving a sense of depth. On leave it springs home with a slight overshoot, and presses squash a touch.
Only real mouse pointers trigger the effect, so touch stays a normal tap. Reduced motion disables it entirely. It is a real <button> that forwards its ref and every native prop.
Use it for one or two primary actions on portfolio, agency and launch pages. Not for every button in an app.

### Usage

```tsx
import { MagneticButton } from '@/components/sundae/magnetic-button'

<MagneticButton onClick={start}>Start a project →</MagneticButton>
<MagneticButton variant="outline" strength={0.25}>See our work</MagneticButton>
```

### Props

- `strength` (`number`, default `0.35`): How far it follows, from 0 to 1.
- `reach` (`number`, default `40`): Pull zone around the button, in px.
- `variant` (`'solid' | 'outline'`, default `'solid'`): Visual style.
- `…button props` (`ButtonHTMLAttributes`): Forwarded to the native button, including the ref.

### Accessibility

- A native button with a visible focus ring.
- Mouse-only, and disabled for reduced motion.