( dom-collider-wave.html )

dom-collider-wave は、DOM 上の写真要素を collider として扱い、スクロールやポインタの動きに反応する WebGL2 の波面レイヤーを重ねたインタラクションデモ。画面上では架空のフレグランス「MINAMO Eau de Parfum」のプロダクトページとして構成され、静かなグリッド、写真、短いコピーの上に水面のような揺らぎが現れる。 写真タイルには data-fluid-collider を付与し、DOM の矩形や移動速度を毎フレームの波面シミュレーションへ渡している。スクロールによって写真が viewport 上を動くと水面に wake が発生し、ポインタ移動は1フレーム分の入力へ畳み込まれて ripple として注入される。 実装面では、createFluidLayer() を公開 API とする小さなブラウザ向け runtime として整理している。ColliderSource、PointerInput、WaveFieldRenderer、Scheduler を分離し、WebGL2 では float render target を ping-pong しながら height field を更新する。prefers-reduced-motion / prefers-reduced-transparency、WebGL 非対応時の no-op fallback、context loss / restore、HMR 時の destroy も扱う構成になっている。