Button Motion Set

# Button Motion Set — UI Component Set

## Goal
Build six production-grade animated button variants sharing one base API, presented in a small demo grid. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Shared base: h-11 px-6 rounded-lg font-medium text-sm, focus-visible ring, disabled 50% + no animations; sizes sm/md/lg via prop.
- 1 **Magnetic** — button translates up to 6px toward cursor within a 40px proximity field, springs back on leave.
- 2 **Shine sweep** — a 60% width diagonal white/20 gradient sweeps across on hover (500ms), only once per enter.
- 3 **Morph loader** — on click, width animates to square, label fades, spinner appears; then morphs to ✓ state; controlled via `status` prop (idle/loading/success).
- 4 **Icon nudge** — arrow icon translates 4px right + slight rotate on hover; text and icon gap compresses 1px — feels eager.
- 5 **Gradient ring** — 1px conic-gradient ring rotates continuously behind transparent border; hover speeds rotation 2×.
- 6 **Ghost fill** — outline button where a background fill grows from the cursor's entry point (measure enter coordinates, scale a circle from there).

## Motion Spec
- All transforms spring-based (stiffness 300, damping 20) except shine (tween).
- Press state universal: scale 0.97, 80ms.
- Reduced motion: variants degrade to simple opacity/color hovers — buttons must remain obviously interactive.
- Respect `prefers-reduced-motion` — provide a static fallback that still looks intentional.

## Component API
- `<MotionButton variant='magnetic'|'shine'|'morph'|'nudge'|'ring'|'ghost-fill' size status? asChild? />`

## Quality Bar
- TypeScript strict, zero `any`. Tailwind only — no external CSS files.
- Works on mobile: touch targets ≥ 44px, no hover-only affordances.
- 60fps: animate only `transform` and `opacity`; use `will-change` sparingly.
- Accessible: correct roles/aria, keyboard operable, focus-visible styles.