A dark pool you can touch: the cursor drags ripples across the surface, they spread and cross, and a stray raindrop lands now and then.
Touch the water
Customize
Usage
import { WaterRipple } from "@/components/motionkit/water-ripple";
<WaterRipple
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</WaterRipple>Motion
The exact curves this component runs, plotted with Motion's own maths.
Ripples
Pointer moves, press or raindrop
Premium spa, beverage, outdoor and design-studio sites, and interactive heroes people will play with before scrolling.
The surface is a grid of heights with two copies: now and a moment ago. Each frame, every cell's new height is half the sum of its four neighbours minus its previous height, the classic discrete wave equation, multiplied by the damping so ripples fade. Dragging the pointer drops a trail of disturbances, and raindrops add one at random. Each cell's brightness comes from the slope towards the light, and the coarse grid is scaled up with smoothing so it reads as liquid.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string] | ["#0C1010", "#93CACE"] | Deep water and highlight colours. |
| damping | number | 0.975 | How long ripples last, 0 to 1. |
| rain | boolean | true | Occasional raindrops. |
| resolution | number | 4 | Simulated cell size in pixels; smaller is finer. |
| children | ReactNode | — | Your content, layered above. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/water-ripple. It saves the file to components/motionkit and installs its dependencies.
Water Ripple is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the water stays calm: no raindrops and no ripples.
Cloth Grid
A woven grid hung from its top edge, swaying in a soft breeze and billowing away from the cursor, with real cloth physics.
Flicker Grid
A field of tiny squares that flicker softly, drawn on a canvas so it stays light.
Cursor Trail
A soft ribbon of light behind the pointer, across the window or inside one section.
Touch the water
Customize
Usage
import { WaterRipple } from "@/components/motionkit/water-ripple";
<WaterRipple
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</WaterRipple>Motion
The exact curves this component runs, plotted with Motion's own maths.
Ripples
Pointer moves, press or raindrop
The live preview is free to explore. Plus unlocks the source for Water Ripple and every other premium component.