# Water Ripple

> 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.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-30 · Live demo: https://www.motionkitui.com/components/water-ripple

## When to use it

Premium spa, beverage, outdoor and design-studio sites, and interactive heroes people will play with before scrolling.

## How it works

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.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/water-ripple` after adding their registry token from https://www.motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, the water stays calm: no raindrops and no ripples.
- **Colour contrast: Partial.** Ivory text over calm water and raindrops measures 6.7:1 or better. Dragging a ripple straight behind the text can brighten it for a moment.