Agent Skills
› nexu-io/motion-anything
› magnetic-button
magnetic-button
GitHub提供磁性按钮交互效果，使主按钮随光标靠近产生微妙的吸附与回弹动画。适用于单一核心操作，自动禁用触控及减少运动偏好场景，支持React集成，强调克制使用以优化体验。
Trigger Scenarios
需要为单个主要CTA添加生动交互效果
实现符合无障碍标准的鼠标跟随按钮动画
Install
npx skills add nexu-io/motion-anything --skill magnetic-button -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": null,
"design_system": {
"requires": false
},
"example_prompt": "Use magnetic-button on the hero \"Get started\" CTA: a subtle pull toward the cursor with a\nsnappy spring back. Only the primary button; disable on touch and reduced-motion."
},
"name": "magnetic-button",
"triggers": [
"magnetic button",
"playful hover",
"button that follows cursor",
"make this button alive",
"磁吸按钮",
"活泼"
],
"description": "Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then\nspringing back. Keep it subtle and reserve it for one or two primary actions. Disabled on touch\nand under prefers-reduced-motion. Do not use it on dense UIs full of buttons.\n"
}
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
- Copy
magnetic-button.cssandmagnetic-button.jsinto the project, and link them. - Mark the button:
<button class="magnetic" data-magnet-strength="0.3">Get started</button> - Auto-attaches to
.magnetic. Keepstrengthsmall (~0.2–0.4) so the pull stays subtle.
Accessibility & performance
- Disabled under
prefers-reduced-motionand on(hover: none)touch devices. - Transform only; resets on
pointerleave.
Framework notes
- React: call
attachMagnetic(ref.current)inuseEffect, guarded by the same reduced-motion/touch checks.
Version History
- b016900 Current 2026-07-11 17:09
