---
name: nexu-io/magnetic-button
source: https://app.decimal.ai/s/nexu-io-magnetic-button@1/SKILL.md
source_sha256: 8a24796dc8d6
---

# magnetic-button

A button that leans toward the cursor, then springs back. Part of
[motion-anything](https://github.com/nexu-io/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:
   ```html
   <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.