Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Water ripple

A photograph under a sheet of water. The pointer trails small ripples, a press drops a stone, and light rain can fall on its own; the rings spread, cross, bend the picture beneath and catch the light before they die away.

Pro
pnpm dlx shadcn@latest add @caliper/water-ripple

Harbour at dusk

Move across the water, or press to drop a stone.

Installs components/ui/water-ripple.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

  • Travel, hospitality and nature imagery that should invite a touch.
  • A hero picture on a calm page.

Skip it when

  • Pictures with text or faces that must stay sharp.
  • Several on one page.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

The wave equation, coarse
Two height buffers run at half resolution and are drawn smooth, which keeps the rings soft and the cost low.
Still water sleeps
Without rain the loop stops once the rings have died away; with rain there is a pause button.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/water-ripple

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { WaterRipple } from "@/components/ui/water-ripple"

The worked example comes with Pro

The 23-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

WaterRipple

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription
src *string—
alt *string—What the picture shows.
rainbooleantrueLight rain falling on its own. Without it the water is still until touched.

Accessibility

It exposes img semantics, with aria-label and aria-pressed kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Media examples