星空と流れ星
自動で瞬く星空に、数秒おきにランダムな流れ星が横切る。カーソルを乗せる/触れると近くの星がひときわ強く輝く。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- 夜・宇宙をテーマにしたヒーロー背景
- 静かに動く待機画面
- ポインタに反応する余白の演出
- 避ける場面
- 本文の背景（瞬きが文字の下で気になる）
- 明るい配色のサイト
- 情報をアニメだけで伝える場面
- 構成要素
- 夜空（canvas）
- 瞬く星
- 流れ星
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（近くの星が強く光る）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾。reduce 設定では瞬きと流れ星を止め、星を静止した明るさで表示。visibilitychange で停止
- 動き
星は各自の位相・速度で sin 明滅。流れ星は 3.2〜7.7s 間隔・320px/s で横切り約1.1s で消える。ポインタ 60px 内の星が増光
デザインの要点
- 瞬きは星ごとの位相と速度（0.6〜2.0）で sin を回す。全星同じ周期だと点滅する看板になる
- 流れ星は 3.2〜7.7s の不規則な間隔で 1 本だけ。頻繁に流すと希少感が消え、視線を奪い続ける
- 星の数は面積比（W·H／360·200）で決める。固定数だと横長の画面でまばらに、狭い画面で密になる
- ポインタ 60px 内の増光は半径も 1.4 倍まで足す。明るさだけだと「反応した」ことが分かりにくい
コード（コピーして使えます）
<div class="sk-wrap">
<canvas class="sk-canvas" aria-hidden="true"></canvas>
</div>