Pointer-driven water displacement that warps content and leaves a decaying wake.
Every prop is wired to the controls underneath. Move the pointer over the image to leave a wake, or set Trigger to Click for single ripples.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | 'https://images.unsplash.com/...' | Image URL the ripples distort. Cover fitted to the container. |
brushSize | number | 150 | Diameter of each ripple the pointer lays down, in px. |
strength | number | 0.2 | How far the image is pushed, as a fraction of its size. |
swirl | number | 1 | Full turns the push direction sweeps through as a ripple builds. 0 gives a flat push, higher folds the image into caustics. |
rings | number | 4 | Concentric swells inside each ripple. 0 is a single plain blob. |
spread | number | 5 | How many times its own size a ripple grows to before it dies. |
fade | number | 3 | How long a ripple survives, in seconds. |
spacing | number | 15 | Pointer travel between ripples, in px. Higher leaves a sparser trail. |
dispersion | number | 0 | Chromatic split between the red and blue channels as they refract. |
glint | number | 0 | Sheen riding the shoulders of each ripple. |
tint | string | #a855f7 | Colour the disturbed water takes on. |
tintAmount | number | 0.1 | How strongly the tint colours the disturbed water. |
highlightColor | string | #ffffff | Colour of the sheen. |
grayscale | boolean | true | Drain the colour out of the image so the folds read on tone alone. |
trigger | 'hover' | 'click' | 'both' | 'hover' | What disturbs the surface: motion, clicks, or both. |
clickStrength | number | 2 | How much larger a click ripple starts than a hover one. |
quality | 'low' | 'medium' | 'high' | 'low' | Resolution of the displacement buffer. Lower trades crispness for fill rate. |
enabled | boolean | true | Toggle the effect on or off. |
Keyboard shortcuts and ARIA behavior.