ジェネラティブ演出
水面の波紋
クリック/タップした場所から波紋が広がる。複数の波紋が同時に重なり合い、揺らぎのある輪郭と加算合成の光の縁でシェーダーなしでも水面らしさを出す。ドラッグでなぞると航跡状に波紋が連続発生する。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
本物のWebGL水面シェーダーではなく、同心円の輪をsin波でわずかに歪ませてlighter合成する近似描画です。軽量でsrcdoc/iframeのようなWebGL非対応が不安な場所でも確実に動きます。
コード（コピーして使えます）
<div class="wr-wrap">
<canvas class="wr-canvas" aria-hidden="true"></canvas>
<p class="wr-hint">タップして波紋を広げる</p>
</div>