Liquid Magnet Button

# Build: "Liquid Magnet" button component

You are a senior creative front-end engineer. Build this reusable button component exactly as specified.

## Target stack
React + Tailwind CSS v4 + Framer Motion

## Concept
A button with four layered interactions:
1. It leans toward the cursor (magnetic).
2. Color floods in from the exact point where the cursor entered.
3. The color drains toward the point where the cursor left.
4. A click sends a soft white ripple out from the click point.

## Content
- Label: "Hover me"

## Shape and size
- Shape: pill (fully rounded)
- Size: lg (64px tall, 40px side padding, 18px text), semibold.

## Design tokens
- Resting: background #F4F4F0, label #0B0D17
- Filled: fill #5B4BFF, label #FFFFFF
- Demo stage background: #0B0D17 (centered, min-height 380px)

## Mechanics
- **Magnetic pull:** on pointer move, translate the button by (pointer − center) × 0.4, through a spring (stiffness 200, damping 14, mass 0.5). The label moves an extra 40% of that inside the button, for parallax depth. Everything springs back to 0 on leave.
- **Directional liquid fill:** a 520px circle sits behind the label, centered on the pointer-enter point, at scale 0. On enter it scales to 1 over 0.55s with ease `[0.22, 1, 0.36, 1]`. On leave, re-center it on the exit point and scale it back to 0, so the color drains toward the exit. The label color crossfades over 60% of that duration. The button clips its contents.
- **Ripple:** on pointer down, spawn a 40px white circle at the press point that animates scale 0→8 and opacity 0.45→0 over 0.7s, then remove it from the DOM.
- **Press:** scale to 0.95.

## API
Export the reusable button separately from the demo stage. It accepts the config and an optional `onClick`.

## Accessibility
- Uses a native `<button>` with a visible focus ring.
- Under `prefers-reduced-motion`, disable the magnetism and the parallax. The fill may become an instant color swap.