Water Ripple
newA height-field wave equation solved on the GPU, refracting a procedural tiled pool — or any image you pass. Move to leave a wake, click to drop a stone, and let the rain fall when idle.
webgl2simulationpointerimage5 files · 545 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/water-ripple.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs water-rippleUsage
import { WaterRipple } from "@/components/opus/backgrounds/water-ripple";
<WaterRipple className="absolute inset-0" />
// or ripple any (same-origin / CORS) image:
<WaterRipple image="/hero.jpg" className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| image | string | — | Image to refract (needs CORS if cross-origin). Omit for the procedural pool. |
| deep / shallow / tile | string | — | Procedural pool colours. |
| tileSize | number | 48 | Pool tile size (CSS px). |
| radius / strength | number | 0.03 / 0.35 | Drop size and height. |
| damping | number | 0.985 | Wave lifetime (0.9–0.999). |
| refraction | number | 0.04 | How strongly waves bend the image. |
| rain | boolean | true | Random drops while idle. |
Notes
- A real GPU simulation: ping-pong framebuffers in half-float textures (WebGL2 + EXT_color_buffer_float/half_float).
- Pauses off-screen / in hidden tabs. Falls back to a static gradient without WebGL2.
prefers-reduced-motion: reducedisables the automatic motion; only your own input moves it.