Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
中文简介正在准备中。当前显示原文说明。
nexu-io/motion-anything9182026年7月7日 更新
免费在 GitHub 公开
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.
中文简介正在准备中。当前显示原文说明。
查看安装方法包含的文件（5）
- SKILL.md1.9 KB
- magnetic-button.css708 B
- magnetic-button.js1.6 KB
- preview.html1.2 KB
- recipe.motion.yaml1.5 KB
SKILL.md（原文）
安装前可以查看交给 AI 代理的指令内容。
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.
评价
还没有评价。欢迎分享你的使用感受。
评论
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
同一仓库的技能
Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
中文简介正在准备中。当前显示原文说明。
nexu-io/motion-anything9182026年7月7日 更新
Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
中文简介正在准备中。当前显示原文说明。
nexu-io/motion-anything9182026年7月7日 更新
Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
中文简介正在准备中。当前显示原文说明。
nexu-io/motion-anything9182026年7月7日 更新
Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
中文简介正在准备中。当前显示原文说明。
nexu-io/motion-anything9182026年7月7日 更新
Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
中文简介正在准备中。当前显示原文说明。
nexu-io/motion-anything9182026年7月7日 更新