Lab/22
Ripple Water
A height field where each cell averages its neighbors and subtracts its last value, so waves spread and interfere. The dots or letters below shift with the slope, as if seen through water.
- Canvas
- Simulation
- Interaction
Click or drag on the water
lab/ripple-water0.975
Installation
Add Ripple Water to your project with the shadcn CLI. The files land in components/lab, ready to edit.
$ pnpm dlx shadcn@latest add @soultel/lab-ripple-waterOr by URL: https://asafefe.dev/r/lab-ripple-water.json
Brings along
- utils
- @soultel/lab-canvas
Usage
import { RippleWater } from "@/components/lab/ripple-water"
export function Hero() {
return (
<section className="relative h-[420px] touch-none">
<RippleWater className="absolute inset-0" />
<h1 className="pointer-events-none relative">Hello</h1>
</section>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | "dots" | "text" | "dots" | What the water refracts. |
| text | string | "ripple" | Letters for the text pattern. |
| spacing | number | 14 | Distance between dots or letters in px. |
| damping | number | 0.975 | Energy kept per step, 0.9 to 0.995. |
| resolution | number | 4 | Simulation cell size in px. |
| strength | number | 1 | Ripple strength multiplier. |
| hoverRipples | boolean | true | A light wake follows the mouse. |
| intro | boolean | true | One ripple in the middle on load. |
| color / accentColor | string | "var(--foreground)", "var(--primary)" | Calm color and crest color. |
| ref | Ref<RippleWaterHandle> | - | drop(x, y, strength) and clear(). |