Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/nexu-io-magnetic-button/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | -34% | 0% |
| case-03 | ✗→✓ | ▲ Improved | -53% | 0% |
| case-04 | ✗→✓ | ▲ Improved | -30% | 0% |
| case-15 | ✗→✓ | ▲ Improved | -51% | 0% |
| case-16 | ✗→✓ | ▲ Improved | -54% | 0% |
A button that leans toward the cursor, then springs back. Part of motion-anything; obeys MOTION-SPEC.md.
magnetic-button.css and magnetic-button.js into the project, and link them.html <button class="magnetic" data-magnet-strength="0.3">Get started</button>
.magnetic. Keep strength small (~0.2–0.4) so the pull stays subtle.prefers-reduced-motion and on (hover: none) touch devices.pointerleave.attachMagnetic(ref.current) in useEffect, guarded by the same reduced-motion/touch checks.Other measured skills in the registry, with their headline benchmark lift.