カーソルエフェクトの作り方 — 追従・マグネット・スポットライト
※ AIコードエディタの「Cursor」でCSSアニメーションを実装する方法は別テーマです。Cursor（AIコードエディタ）でCSSアニメーションを実装する をご覧ください。
マウス座標の取得が基本
すべての起点は mousemove イベントです。getBoundingClientRect() で対象内の相対座標を求め、CSS変数（--x / --y）や transform に渡します。
実装デモ：Custom Cursor
追従（lag follow） — 慣性のある動き
requestAnimationFrame のループ内で現在地を目標地点に x += (target - x) * 0.1 のように少しずつ近づける（lerp）と、遅れて滑らかに追う慣性が生まれます。
マグネット — 要素が引き寄せられる
ボタン中心とカーソルの距離を測り、一定半径内なら距離に比例して要素を translate で寄せます。離れたら原点へ戻す。CTAの存在感を高める人気手法。
スポットライト — カーソルが照らす
カーソル位置を中心にした radial-gradient を要素に当てると、カーソルが表面を照らすスポットライトになります。カードや隠し文字の演出に。
実装デモ：Cursor Glow Follow、Cursor Spotlight Reveal、Card Spotlight
アクセシビリティの注意
cursor: none で標準カーソルを隠す場合、タッチデバイスや支援技術利用者への配慮が必要です。重要操作はカーソル演出に依存させないこと。
@media (hover: none) でタッチ端末では演出を無効化するのが安全です。
FAQ
カーソルエフェクトはモバイルで動く？
@media (hover: none) で無効化し、標準カーソル演出に依存しない設計にします。追従がカクつくときは？
cursor: none にしたら操作しづらい
パフォーマンスへの影響は？
関連書籍
学びを止めない · Amazonサブスク
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。
CREATOR TOOLS · スクール（PR）
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。