A dark water surface where the pointer leaves trails of wavy rings and a click drops a stone. Raindrops fall on their own while nobody is touching it.
Still waters
A breathing app for slow eveningsBegin a 5 minute session
npx shadcn@latest add https://hyperblur.dev/r/bg-ripple-water.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-ripple-water.tsx.
import { BgRippleWater } from "@/components/hyperblur/bg-ripple-water"
<div className="relative h-96"><BgRippleWater /><h1 className="relative">...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| background | string | "#061122" | Water color painted under the ripples. |
| color | string | "#9cc4ff" | Highlight color of the rings. |
| speed | number | 1 | How fast rings expand and fade. |
| interval | number | 1.4 | Seconds between idle raindrops when there is no pointer. |
| maxRipples | number | 26 | Most ripples alive at once. Older ones are dropped first. |
| seed | number | 3 | Seed for the idle raindrop positions. |