KQ-426 · RAIN/LEDGE

Rain Ledge

Rain that lands on the page's ledges: drops fall over the interface, and where the texture has a top edge — a button, a heading, a rule — they splash into a ring and run off. Draws only the rain and the splashes.

KQ-426 · RAIN/LEDGE

Waylight · harbour board

A squall over three berths.

Nothing on the board moves for the weather — the rain does the moving, landing flat on the heading and the table rail and running past everywhere there is nothing to catch it.

Rainfall

6.2mm6.2mm

Wind

19kt19kt

Berths clear

11
BerthVesselState
B4Marramcleared
B2Kestrelholding
B7Saltmarshinbound
06:10 · squall passing

it hits what is there

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/rain-ledge

Props

PropTypeDefaultDescription
density / speed / lengthnumberHow many drops, how fast they fall, and how long the streaks are.
splash / colornumber · stringSplash size and the water colour.