フラッシュライト追従
暗闇に隠れた内容を、カーソル周りだけ懐中電灯で照らして読ませる。CSS mask の円形グラデで“穴”を開けて実装。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
仕様書
- 向く場面
- ティザー・謎解きなど探索させたい演出
- ダークなヒーローの遊び
- 隠しメッセージの発見体験
- 避ける場面
- 読ませるべき本文を隠す
- スクロールを奪えない場所（touch-action:none）
- 全文表示の手段を置かない
- 構成要素
- カード
- 隠された内容
- 暗幕
- 照らす穴
- 持っている状態
- 通常
- ホバー
- キーボード
照らす操作はマウス・タッチ専用。代替: 右上の「すべて表示」button（aria-pressed）に Tab・Enter で暗幕を外せる
- 支援技術
暗幕は mask の視覚効果で、テキストは DOM 上に常にあり読み上げ可能。晴眼者向けに「すべて表示」の切替を置く。動きは追従のみで reduced-motion では背景の transition 停止
- 動き
穴の位置は即時追従（transition なし）、暗幕の背景色 0.3s。離れると穴を画面外へ退避。reduced-motion で色の transition 停止
デザインの要点
- 暗幕は mask の radial-gradient で穴を開ける。opacity で明るくする方式だと「照らす」ではなく「薄くなる」に見える
- 穴の縁は透明 38%→黒 78% のグラデーションで柔らかくする。くっきりした円は懐中電灯ではなく覗き穴になる
- 離れたら穴を −200px へ退避させ、中央に戻さない。戻すと「離れたのに一部見える」状態が残る
- 隠すのは演出であって情報ではない。「すべて表示」の切替を置き、照らせない人にも読める経路を残す
実装メモ
マスクの円形グラデの中心を CSS 変数 --x/--y で動かしています。実ページでは要素サイズに合わせて半径(下のpx)を調整してください。タッチ端末ではドラッグで照らせます。
コード（コピーして使えます）
<div class="fl-card">
<div class="fl-content">
<p class="fl-title">SECRET</p>
<p class="fl-text">カーソルで照らすと<br>文字が浮かび上がる</p>
</div>
<div class="fl-shade"></div>
<button class="fl-reveal" type="button" aria-pressed="false">すべて表示</button>
</div>