# 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.

- Skill: `xpert-ai/magnetic-button` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add xpert-ai/magnetic-button`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xpert-ai/magnetic-button/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: xpert-ai (https://skillmd.com/u/xpert-ai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xpert-ai/magnetic-button

---


# 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.