Agent Skills
› nexu-io/motion-anything
› magnetic-button
magnetic-button
GitHub为按钮添加跟随鼠标的磁吸微交互效果，增强主操作按钮的生动感。适用于少量核心CTA，禁用密集按钮区、触屏及减弱动效环境。
Trigger Scenarios
需要为单个主要行动号召（如“开始使用”）添加生动的鼠标跟随效果
希望提升主按钮的视觉吸引力但保持界面简洁
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
