スポットライト追従
カーソルの周りだけ光が灯り、動かすと付いてくる。暗い背景のカードに高級感が出る。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ダーク背景のカードに高級感を出す
- 料金・機能カードのホバー演出
- カーソル位置をさりげなく返したい
- 避ける場面
- 明るい背景（光が見えない）
- スクロールを奪えない場所（touch-action:none）
- 光で文字コントラストが下がる配色
- 構成要素
- カード
- スポットライト
- 本文
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
マウス・タッチ専用（ポインタ追従・タップで点灯トグル）。代替: 装飾のため不要
- 支援技術
光は ::before の装飾で本文を覆わない。reduced-motion では追従を止めて中央に固定点灯する。文字と光の重なりでコントラストを落とさない。touch-action:pan-y
- 動き
opacity 0.3s で点灯・消灯、位置は即時追従（transition なし）。reduced-motion では位置固定・即時点灯
デザインの要点
- 光の位置は CSS 変数 --x／--y だけを JS で書く。radial-gradient を毎回組み立て直すより短く、CSS 側で半径や色を変えられる
- 位置には transition を付けず、点灯・消灯の opacity にだけ 0.3s を付ける。位置を補間すると光がカーソルに遅れて「追従」ではなく「追いかけ」になる
- 光の半径は 180px、色は青 50%。白い光だと文字の上で読めなくなる
- タッチはタップで点灯をトグルする。ホバーの無い端末では、何もしないと光が一度も出ない
コード（コピーして使えます）
<div class="spotlight-card">カーソルを乗せると<br>光が付いてくる</div>