本文へ移動
cccskills
無料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.

nexu-io/motion-anything
インストール方法を見る

含まれるファイル（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（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

  1. Copy magnetic-button.css and magnetic-button.js into the project, and link them.
  2. Mark the button: 
    <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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

anim-backindown

無料

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-anything8582026年7月7日 更新

anim-backinleft

無料

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-anything8582026年7月7日 更新

anim-backinright

無料

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-anything8582026年7月7日 更新

anim-backinup

無料

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-anything8582026年7月7日 更新

anim-backoutdown

無料

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-anything8582026年7月7日 更新

anim-backoutleft

無料

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-anything8582026年7月7日 更新

nexu-io のスキルをすべて見る

このスキルの問題を報告する