magnetic-button

magnetic-button

A button that leans toward the cursor, then springs back. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

• A single primary call-to-action you want to feel alive (hero "Get started" / "Try it").

When NOT to use it (restraint)

• Dense UIs with many buttons — it becomes chaotic. Reserve for 1–2 primary targets.
• Touch-only contexts (no cursor). The recipe disables itself there automatically.

How to apply

1. Copy magnetic-button.css and magnetic-button.js into the project, and link them.
2. Mark the button:

   <button class="magnetic" data-magnet-strength="0.3">Get started</button>
   

3. Auto-attaches to .magnetic. Keep strength small (~0.2–0.4) so the pull stays subtle.

Accessibility & performance

• Disabled under prefers-reduced-motion and on (hover: none) touch devices.
• Transform only; resets on pointerleave.

Framework notes

• React: call attachMagnetic(ref.current) in useEffect, guarded by the same reduced-motion/touch checks.