降る雪
奥行き(z)を持った雪片が自動で降り続ける。マウス/指を素早く動かすとその方向へ風が吹き、雪片が流される。風は時間とともに基準の弱い風へ戻っていく。
プレビュー
自動再生
操作自動で再生されます。
仕様書
- 向く場面
- 冬・年末のキャンペーン LP
- 季節感を出す背景演出
- ポインタの動きに反応する余白
- 避ける場面
- 季節外れ・無関係な文脈
- 本文の背景（雪片が文字に重なる）
- 白い背景の上（白い雪片が見えない）
- 構成要素
- 夜空（canvas）
- 雪片（奥行きあり）
- 風（ポインタ由来）
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（素早く動かすと風が吹く）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾。reduce 設定では雪片を減らして1枚描いたところで止め、静止画にする。visibilitychange で停止
- 動き
奥行き z で速度 18〜60px/s・大きさ・明るさを変えて降り続ける。ポインタ速度で風（±60）が加わり 0.94/frame で減衰。reduce では静止
デザインの要点
- 奥行き z を1つ引き、速度・半径・明るさ・風の効きをすべて z から導く。別々に乱数を引くと大きいのに遅い雪が混じる
- 風は目標値へ 1.5/s で追従し、目標自体を 0.94/frame で減衰させる。速度を直接いじると指を止めた瞬間に雪が止まる
- 落ちた雪片は消さず上端で作り直す。生成と破棄を繰り返すと GC で数秒おきに引っかかる
- 画面外へ流れた雪片は反対側から戻す。風で片側が空になるのを防ぐ
コード（コピーして使えます）
<div class="sn-wrap">
<canvas class="sn-canvas" aria-hidden="true"></canvas>
</div>