127 Components
Water Ripples
BackgroundsInteractive water surface ripple simulation combining a real-time 2D finite-difference wave-equation height-map buffer with expanding specular caustic refraction rings triggered by cursor wakes, clicks, and ambient droplets.
Interactive Surface Wave Buffer
Water Ripples
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/water-ripples.json"
Props
TypeScript props supported by <WaterRipples />.
| Prop | Type | Default | Description |
|---|---|---|---|
| damping | number | 0.97 | Wave energy retention multiplier per simulation step (0.90 to 0.995). |
| rippleRadius | number | 140 | Maximum expansion radius in pixels for spawned concentric specular rings. |
| ambientDrops | boolean | true | Automatically drops periodic rain ripples onto the water surface. |
| color | string | "#38BDF8" | Hex color tint for refracted surface normals and specular caustic rings. |
| interactive | boolean | true | Enables pointer movement wakes and click splash disturbances. |
| children | React.ReactNode | — | Optional foreground UI rendered above the water surface. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Real-time 2D finite-difference height-map solver computing surface normal refraction per pixel.
- High-DPI concentric specular harmonic rings that expand and constructively interfere.
- Responds to pointer wakes, click impacts, and toggleable periodic rain droplets.
Keyboard & Accessibility
- Marks the simulation canvas with `aria-hidden='true'`.
- Stop-propagates pointer events on HUD controls so slider adjustments do not trigger unwanted splashes.
- Supports non-interactive ambient mode via `interactive={false}`.