Soft Ripple

このサイトのトップページそのものが、Soft Rippleです。水面に浮かぶペンタスと蝶、波紋の余韻を、生成AIで作った画像と、軽いWebGLだけで描いています。「触れても壊れない、長い余韻の安らぎ」をテーマにした実験です。

• 写真のような質感を保ったまま、軽く動かしたい（画像は生成AIで制作）
• 見た目を作り込んでも、スマホで重くしたくない

• 背景は画像1枚（生成AIで制作）。花と蝶は透過画像として別に重ねる
• 波紋は光の屈折として背景を揺らし、花は波が届いた時刻に反応する
• 動きの速さと間は、すべて約6秒の「呼吸」にそろえる
• 動きを減らす設定の人には、静止した画面を出す

• Three.js（WebGL）/ GLSLシェーダー
• 波紋・屈折・コースティクスの計算
• 解像度の自動調整、非表示時の停止
• prefers-reduced-motion への対応

トップページで、実際に触れて確かめられます。

トップページを開く ↗