Magnetic Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- ポインタが近づくとボタン本体が磁石のように吸い付いて、ポインタの方向へ寄る
- ポインタが離れると、弾性のあるイージングで元の位置へ戻る

【品質要件】
- 追従量はポインタとの距離の3〜4割程度。ボタンが指に張り付いて見えるほど動かさない
- 戻りは0.5秒前後で、わずかに行き過ぎてから収まるイージングにする
- ポインタを持たない環境では位置を動かさない
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- As the pointer approaches, the button itself is drawn toward it like a magnet
- When the pointer leaves, it springs back to its original position with an elastic ease

[Quality requirements]
- Follow about 30-40% of the distance to the pointer. Never so much that the button appears stuck to the cursor
- Return over about 0.5s, overshooting slightly before settling
- On devices without a pointer, do not move the button at all
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read