カーソル追従スポットライト
マウスの位置に丸い光が追従し、暗い面をやわらかく照らすホバーエフェクトです。SaaS の機能紹介などでよく見る没入感のある演出を、最小限のコードで実現します。JavaScript は mousemove でポインタ座標を取得し、CSS カスタムプロパティ（ --x / --y ）に渡すだけ。
解説
マウスの位置に丸い光が追従し、暗い面をやわらかく照らすホバーエフェクトです。SaaS の機能紹介などでよく見る没入感のある演出を、最小限のコードで実現します。JavaScript は mousemove でポインタ座標を取得し、CSS カスタムプロパティ（--x / --y）に渡すだけ。実際の光は ::before の radial-gradient で、transform がその座標へ transition 付きで滑らかに移動します。
こんな場面に
- 製品の特徴を並べたダークテーマのセクション
- カードや見出しにカーソルを近づけると反応するインタラクション
- ヒーローでマウス操作の心地よさを伝えたいとき
光の色とにじみは radial-gradient、大きさは円の width と height、追従の滑らかさは transition の時間で調整します。見出しに mix-blend-mode:difference を当てているため、光が重なっても文字が読める設計です。座標はコンテナ基準（getBoundingClientRect）で算出しているので、ページのどこに置いてもズレません。タッチ端末ではホバーが効かないため、モバイルでは無効化する判断も検討しましょう。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
光の色や大きさを変えられますか？
光の色とにじみ方は .sh::before の radial-gradient で、サイズは width と height で調整します。色を変えるときは見出しの mix-blend-mode との相性も確認すると、文字の見え方が安定します。
スマートフォンでも動きますか？
この演出はマウス移動に反応するため、タッチ操作が中心のスマートフォンでは光が追従しません。モバイルでは無効化するか、別の演出に切り替える運用が現実的です。