水面の波紋
クリック/タップした場所から波紋が広がる。複数の波紋が同時に重なり合い、揺らぎのある輪郭と加算合成の光の縁でシェーダーなしでも水面らしさを出す。ドラッグでなぞると航跡状に波紋が連続発生する。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 和風・水をテーマにした LP のヒーロー
- タップ反応のある待機画面・スプラッシュ
- WebGL を避けたい環境での水面表現
- 避ける場面
- 本文の背景（輪郭が文字に重なる）
- 操作の結果を伝える必要がある場面
- 明るい背景の上（lighter 合成の縁が見えない）
- 構成要素
- 水面（canvas）
- 波紋の輪
- 操作ヒント
- 持っている状態
- 通常
- キーボード
マウス・タッチ専用（タップ／ドラッグで波紋）。装飾で代替操作は不要
- 支援技術
canvas は aria-hidden の装飾で情報を持たない。reduce 設定では環境波紋を止め、操作由来の波紋が消えたら描画も止める。visibilitychange で停止
- 動き
波紋は 90px/s で広がり 2.4s で消える。同心2輪を sin で歪ませ lighter 合成。3.2〜5.8s おきに環境波紋が自動発生
デザインの要点
- 輪は真円でなく sin(6θ) で 1.6px 歪ませ、歳とともに歪みを減らす。真円の同心円は水面ではなく図形に見える
- 同心2輪を 12px ずらし内側を半透明にする。1本線だとレーダーの輪になる
- ドラッグ中は 20px 以上・90ms 以上あいたときだけ足す。毎 move で足すと輪が重なって白く飽和する
- 波紋は最大 14 個で古いものから捨てる。線分 48×2 本×14 個が毎フレームの描画上限
実装メモ
本物のWebGL水面シェーダーではなく、同心円の輪をsin波でわずかに歪ませてlighter合成する近似描画です。軽量でsrcdoc/iframeのようなWebGL非対応が不安な場所でも確実に動きます。
コード（コピーして使えます）
<div class="wr-wrap">
<canvas class="wr-canvas" aria-hidden="true"></canvas>
<p class="wr-hint">タップして波紋を広げる</p>
</div>