カスタムカーソル追従
小さなドットがカーソルに張り付き、リングが少し遅れて追いかける。ボタンに乗ると大きく開く、定番のサイト演出。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ブランドサイト・ポートフォリオの演出
- ホバー対象で反応を大きく見せたい
- ダーク背景の没入感
- 避ける場面
- 業務画面（カーソル位置の把握を邪魔する）
- cursor:none で標準カーソルを消しつつ追従が遅い
- フォーム入力が多い画面
- 構成要素
- ステージ
- ドット
- リング
- ホバー対象
- 持っている状態
- 通常
- ホバー
- キーボード
Tab でボタンへ・Enter／Space で実行（button 標準）。カーソル演出はポインタ専用
- 支援技術
cursor:none で標準カーソルを消すため、リングが常に追従して位置を示す。ボタンに focus-visible の輪郭。reduced-motion では遅延を無くしドットと同じ位置に即時追従
- 動き
ドットは即時、リングは毎フレーム 0.18 の補間で遅れて追従。ボタン上でリング 34→64px 0.2s ease。reduced-motion では遅延・拡大の transition 無し
デザインの要点
- ドットは pointermove で即時、リングは rAF で毎フレーム 0.18 ずつ近づける。2 つの速度差が「追いかける」表情を作る
- cursor:none で標準カーソルを消す以上、ドットは 1 フレームも遅らせない。遅れると「どこを指しているか」が分からなくなる
- ボタン上ではリングを 64px に開く。ホバー対象が分かる合図を、消した標準カーソルの代わりに用意する
- ドット・リングは pointer-events:none にする。無いとカーソルの真下に常に自分がいて、ボタンが押せない
実装メモ
プレビューは枠内だけにカーソルを置き換えています。実ページ全体で使うときは .cc-stage を body などに広げ、位置計算を clientX/clientY（ページ基準）にしてください。タッチ端末ではドラッグで追従します。
コード（コピーして使えます）
<div class="cc-stage">
<p class="cc-hint">この枠内でマウスを動かして</p>
<button class="cc-btn" data-cc>ホバー</button>
<span class="cc-dot"></span>
<span class="cc-ring"></span>
</div>