スポットライトホバー — 動きの伝え方辞典

hover

spotlight hover / cursor spotlight

スポットライトホバー

カーソル位置を中心に、radial-gradientの光が追従して周囲を照らす動き。暗いセクションを撫でると内容がほのかに浮かび上がる。カードの境界線だけを照らすパターンも派生形。

01 — Demo video

Play live →

02 — Prompt template

セクションに spotlight hover を実装してください。

- カーソル位置を CSS変数(--x, --y)に反映し、radial-gradient の中心にする
- 光の半径は {{radius}}px、縁のぼかしは係数 {{softness}}(0でくっきり、1で溶けるように)
- 光の色は rgba(233,230,223,0.14) 程度のごく淡いものにする(照らしすぎない)
- mousemove は requestAnimationFrame でスロットリングし、毎イベントで再描画しない
- mouseleave 時は光を opacity で 0.3s かけてフェードアウトする
- prefers-reduced-motion 時は追従させず、光を無効化または中央に固定表示する

セクションに spotlight hover を実装してください。

- カーソル位置を CSS変数(--x, --y)に反映し、radial-gradient の中心にする
- 光の半径は {{radius}}px、縁のぼかしは係数 {{softness}}(0でくっきり、1で溶けるように)
- 光の色は rgba(233,230,223,0.14) 程度のごく淡いものにする(照らしすぎない)
- mousemove は requestAnimationFrame でスロットリングし、毎イベントで再描画しない
- mouseleave 時は光を opacity で 0.3s かけてフェードアウトする
- prefers-reduced-motion 時は追従させず、光を無効化または中央に固定表示する

セクションに spotlight hover を実装してください。

- カーソル位置を CSS変数(--x, --y)に反映し、radial-gradient の中心にする
- 光の半径は {{radius}}px、縁のぼかしは係数 {{softness}}(0でくっきり、1で溶けるように)
- 光の色は rgba(233,230,223,0.14) 程度のごく淡いものにする(照らしすぎない)
- mousemove は requestAnimationFrame でスロットリングし、毎イベントで再描画しない
- mouseleave 時は光を opacity で 0.3s かけてフェードアウトする
- prefers-reduced-motion 時は追従させず、光を無効化または中央に固定表示する

03 — Params

radius(光の半径 px) — 範囲 60〜300 / 初期 140
照らす範囲。小さいと懐中電灯、大きいと間接照明の印象。
softness(縁のぼかし) — 範囲 0〜1 / 初期 0.6
0はくっきりした円、1に近いほど縁が溶けるように消える。

04 — Vocab

radial-gradient — 中心から外へ向かう円形グラデーション。スポットライトの実体。
CSS変数 — JSからは座標だけ渡し、描画はCSSに任せる分業。styleの書き換えより速く、保守もしやすい。
ストップ位置 — グラデーションの色が切り替わる位置。内側の不透明ストップを外へ寄せるほど縁がくっきりする。
フェードアウト — mouseleaveで光を即消しすると安っぽい。opacityを0.3s程度で落とすと余韻が出る。

05 — NG → OK examples

言い方: 「「マウスのところが光るようにして」」

なぜNG: 光の半径・強さ・縁の質感が未定義。真っ白なグラデーションがベタッと乗った、目に痛い実装が返ってきがち。「どのくらい淡いか」は数値でしか伝わらない。

言い方: 「「spotlight hoverを実装。radial-gradientをCSS変数で追従、radius 140px、光はrgba(233,230,223,0.14)のごく淡いもの、leaveでフェードアウト」」

なぜOK: 実装方式(CSS変数+radial-gradient)・サイズ・光の強さ・終了時の挙動が揃っている。淡さのrgba指定が品を決める。