---
title: Water Ripple
description: A photo under live water: the cursor leaves a wake, a click drops a ripple.
category: Cursor
tier: pro
url: https://ui.dimaac.com/components/water-ripple
registry: https://api.dimaac.com/v1/ui/r/water-ripple.json
registry_auth: Authorization: Bearer <DiMaac licence key>
---

# Water Ripple

A photo rendered under a real-time water simulation. Moving the cursor drags a gentle wake through it, and a click or tap drops a strong ripple that spreads, bounces off the edges and calms down. The water bends the photo with a hint of colour fringing and catches a soft light on its slopes. It runs a height-field simulation in WebGL2 at a fixed 120 steps a second on any screen, uses half-float textures where the GPU allows and a packed 8-bit format where it doesn't, stops drawing when the water is calm, cover-fits the photo on resize and drops a ripple now and then by itself. A keyboard button drops one too. When the visitor prefers reduced motion the photo stays still and only clicks make short, quickly settling ripples.

## Install

This is a Pro component: its source is for buyers of Pro Components, a Templates plan or All-Access, and is not on this page. It installs from the authenticated registry, with the licence key in an environment variable.

1. Merge the registry into components.json (the key is never written into the file):

```json
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}
```

2. Put the licence key in `.env.local` (keep it out of git; never print or commit it). Ask the owner for it if it isn't set:

```bash
DIMAAC_LICENSE_KEY=your-licence-key
```

3. Add the component:

```bash
npx shadcn@latest add @dimaac-pro/water-ripple
```

The registry item is https://api.dimaac.com/v1/ui/r/water-ripple.json and answers only with `Authorization: Bearer <licence key>` (or `X-License-Key`). It answers 401 without a key, 403 for a key that isn't valid, and 402 for a key whose purchase doesn't include Pro components (see https://ui.dimaac.com/pricing).

Dependencies:

None: it only needs React 19.

By hand:

Unlock the code on https://ui.dimaac.com/components/water-ripple with your licence key, then:

1. It needs nothing but React 19.
2. Copy the component file from the Code panel (once your licence key unlocks it) into components/dimaac/water-ripple.tsx.
3. It's styled with Tailwind v4 classes. If that folder sits outside the places Tailwind scans, add it with @source in your CSS.
4. Import it with import { WaterRipple } from "@/components/dimaac/water-ripple" and give its parent a size: it fills it.

## Usage

```tsx
import { WaterRipple } from "@/components/dimaac/water-ripple";

<WaterRipple src={src} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | `string` | - | The photo under the water. Remote images need CORS (WebGL reads their pixels). |
| `alt` | `string` | `""` | Describes the photo for screen readers. Empty means the photo is decoration. |
| `damping` | `number` | `0.993` | How much of its motion the water keeps each step (120 steps a second). Higher rings for longer. |
| `strength` | `number` | `0.6` | How hard the cursor and clicks push the water, from 0 to 1. |
| `dropRadius` | `number` | `30` | Radius of a click's drop, in pixels. The cursor's wake is about half as wide. |
| `refraction` | `number` | `0.55` | How much the water bends the photo, from 0 to 1. |
| `highlight` | `number` | `0.6` | How bright the light on the ripples is, from 0 to 1. |
| `autoDrops` | `boolean` | `true` | Drops a ripple now and then by itself, so the water lives without input. |
| `className` | `string` | `""` | Extra classes for the outer box. Give it a size (it fills it). |
| `children` | `ReactNode` | - | Content shown over the water. The cursor keeps stirring it under the content. |

## Credits

- Photo (pool): Binks AI, Lummi (https://www.lummi.ai/photo/serene-minimalist-scene-with-palm-trees-pba-c), Lummi License
- Photo (shallows): Mikiwa, Lummi (https://www.lummi.ai/photo/serene-ocean-aerial-view-kjab6), Lummi License
- Photo (dawn): Viri Gutiérrez, Lummi (https://www.lummi.ai/photo/an-empty-snowy-mountain-with-pink-sunrise-on-the-hori-270fdea6-887e-4d89-8205-3eab907f3fb0-HgoCN), Lummi License

## Source

The source of a Pro component is for buyers of Pro Components, a Templates plan or All-Access. Install it with the commands above, or unlock it on https://ui.dimaac.com/components/water-ripple.

## Agent prompt

```text
Add the Water Ripple component (<WaterRipple />) from DiMaac UI to this project. It is a Pro component, so its source needs the owner's DiMaac licence key (Pro Components, a Templates plan or All-Access).

Docs: https://ui.dimaac.com/components/water-ripple

1. Add the Pro registry to components.json (merge it into "registries"). Don't write the key into the file:
{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

2. The owner puts their licence key in .env.local (keep it out of git): DIMAAC_LICENSE_KEY=your-licence-key
   Ask them for it if it isn't set. Never print it or commit it.

3. Install it with:
npx shadcn@latest add @dimaac-pro/water-ripple

The registry item is https://api.dimaac.com/v1/ui/r/water-ripple.json and wants the header "Authorization: Bearer <licence key>".

Then use it like this:
import { WaterRipple } from "@/components/dimaac/water-ripple";
<WaterRipple src={src} />

It uses Tailwind v4 classes, so make sure Tailwind scans that folder.
Give its parent a size, keep light and dark mode working and keep its prefers-reduced-motion fallback.
Full index for agents: https://ui.dimaac.com/llms.txt
```