カーソル追従グロー

解説

このスニペットは、マウスカーソルを追いかけて、ぼんやりした光の輪が動く演出です。短い JavaScript で mousemove を監視し、カーソルの座標を要素の left と top に反映して光を移動させます。光そのものは CSS の radial-gradient で作り、filter:blur でやわらかくぼかしています。エリアにマウスが乗ったときだけ opacity で表示され、離れると静かに消えるため、ダークな背景でリッチな雰囲気を演出できます。

向いている場面

• ダークモードのランディングページやヒーロー領域
• ブランドサイトの第一印象を、上品な動きで強めたいとき
• 製品紹介や採用ページの没入感ある導入

光の色とにじみ方は radial-gradient と blur の値で、大きさは光要素の幅と高さで調整します。色をブランドカラーに変えれば自然に馴染みます。注意点として、この演出はマウス操作が前提のため、タッチ端末では効きません。スマホ向けには光を中央に固定するなどの代替を用意すると親切です。常時動く演出が負担になる利用者のため、prefers-reduced-motion で控えめにする配慮も検討してください。

使用例・適したシーン

• クリエイティブポートフォリオ
• アートディレクション系
• ブランドサイト