カーソル追随のグロー背景

解説

暗い背景の上で、マウスの位置に光のオーラが追従して動く演出です。光そのものは radial-gradient で描いた円で、JavaScript の mousemove イベントでカーソル座標を取得し、その要素の left と top に反映しています。pointer-events:none を付けているため、光が下の文字やリンクの操作を邪魔しません。

ヒーローセクションの背景、製品紹介の導入、ランディングページのファーストビューなど、ひと目で印象を残したい場面に向いています。コピーやボタンを前面に置けば、視線を中央へ集めながら遊び心を加えられます。

調整と配慮

• 光の色や濃さは radial-gradient の rgba 値で、大きさは円要素の width と height で変えられます。
• 背景色を明るくする場合は光を白系にすると馴染みます。
• タッチ端末ではカーソルがないため動かない点を踏まえ、演出がなくても内容が読める設計にしておきます。

使用例・適したシーン

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