Magnetic Button

Create a magnetic button component. A pill-shaped button (fully rounded corners, dark ink background, light text, bold label) that is attracted to the cursor. When the cursor is within an 80px radius of the button's center, translate the button toward the cursor by up to 12px, scaled by proximity (closer cursor = stronger pull). Animate with a springy feel: transition transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1). When the cursor leaves the radius, the button springs back to its resting position. Rules: move the button with transform only (never top/left) so layout stays stable; keep it a real <button> element with visible keyboard focus styles; if the user has prefers-reduced-motion enabled, disable the magnetic effect entirely and leave a normal button. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.