カスタムカーソル追従 — 動きの伝え方辞典

hover

custom cursor / cursor follower

カスタムカーソル追従

ネイティブカーソルを消し、円などの図形が遅れて付いてくる演出。mix-blend-modeを併用すると、重なった文字や画像の色が反転する。サイトの没入感を一段上げる定番。

01 — Demo video

Play live →

02 — Prompt template

カスタムカーソルを実装してください。

- ネイティブカーソルは cursor: none で非表示にする
- 直径 {{size}}px の円が、毎フレーム lerp(係数 {{lerp}})でカーソル位置を追従する
- 円には mix-blend-mode: {{blend}} を適用し、重なった要素と色が干渉するようにする
- 円自体には pointer-events: none を指定してクリックを奪わない
- ウィンドウからカーソルが出たら円をフェードアウトする
- prefers-reduced-motion 時は遅延追従をやめ、カーソル位置に即時追従させる

カスタムカーソルを実装してください。

- ネイティブカーソルは cursor: none で非表示にする
- 直径 {{size}}px の円が、毎フレーム lerp(係数 {{lerp}})でカーソル位置を追従する
- 円には mix-blend-mode: {{blend}} を適用し、重なった要素と色が干渉するようにする
- 円自体には pointer-events: none を指定してクリックを奪わない
- ウィンドウからカーソルが出たら円をフェードアウトする
- prefers-reduced-motion 時は遅延追従をやめ、カーソル位置に即時追従させる

カスタムカーソルを実装してください。

- ネイティブカーソルは cursor: none で非表示にする
- 直径 {{size}}px の円が、毎フレーム lerp(係数 {{lerp}})でカーソル位置を追従する
- 円には mix-blend-mode: {{blend}} を適用し、重なった要素と色が干渉するようにする
- 円自体には pointer-events: none を指定してクリックを奪わない
- ウィンドウからカーソルが出たら円をフェードアウトする
- prefers-reduced-motion 時は遅延追従をやめ、カーソル位置に即時追従させる

03 — Params

size(カーソル径 px) — 範囲 8〜80 / 初期 24
カーソル円の直径。大きいほど存在感が出るが、邪魔にもなる。
lerp(追従の粘り) — 範囲 0.03〜0.5 / 初期 0.15
小さいほど遅れて付いてくる。0.5に近いとネイティブカーソル同然。
blend(mix-blend-mode) — 選択: normal / difference / exclusion（初期: difference）
differenceは重なった要素の色を反転。文字の上を通ると白黒が入れ替わる。

04 — Vocab

cursor: none — ネイティブカーソルを消すCSS。カスタムカーソルの前提。消し忘れると二重カーソルになる。
mix-blend-mode — 重なった要素同士の色の混ぜ方。differenceは色を反転させ、白の上では黒く、黒の上では白く見える。
pointer-events: none — カスタムカーソル自身がクリックやホバーを奪わないための必須指定。忘れるとリンクが押せなくなる。
cursor state — リンクホバーで拡大、ドラッグ中で縮小など、状態に応じて形を変えると「生きている」感が出る。

05 — NG → OK examples

言い方: 「「マウスに丸がついてくるやつやって」」

なぜNG: 「ついてくる」の質感(遅延・粘り)も、ネイティブカーソルを消すのかも、重なったときにどう見えるのかも未指定。ただのdivが等速で動くだけの実装が返ってくる。

言い方: 「「custom cursorを実装。cursor:noneで本体を消し、円をlerpで遅延追従、mix-blend-mode: differenceで色反転、pointer-events: noneを忘れずに」」

なぜOK: 消す・追従方式・ブレンド・クリック透過の4点が揃っている。特にmix-blend-modeは名前を出さないとまず提案されない。