Profile My skills Saved Collections Edit profile Submit a skill

Magnetic Button

Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch and under prefers-reduced-motion. Do not use it on dense UIs full of buttons.

xpert-ai 9e1ba78 5 files · 6.3 KB Updated
Coding & Dev Tools

File contents

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.

xpert-ai/xpert-plugins/tree/main/xpertai/apps/motion/assets/upstream/recipes/web/magnetic-button commit 9e1ba78307

Browse category

Frequently asked questions

npx skillmds@latest add xpert-ai/magnetic-button