Rain on Glass
Raindrops land on your screen, grow, merge and slide down leaving wet trails.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Drops land on the screen and grow as they merge. Once heavy enough, they slide down wobbling, swallow smaller drops and leave a fading trail. Highlights and dark rims make them read as water.
Installation
$ npm i @guetix/rain-glass
Publishing soonUntil it’s on npm, use the CLI or Manual tab. The API below stays the same.
vanilla.ts · any framework
import { rainGlass } from "@guetix/rain-glass";
rainGlass({ intensity: 50, maxSize: 10 });Usage
example.tsx
import { RainGlass } from "@/components/guetix/rain-glass";
<header className="relative">
<RainGlass intensity={40} />
…
</header>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| intensity | number | 40 | Drops per second. |
| maxSize | number | 9 | Max drop radius. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Decorative layers are aria-hidden and never block clicks.
- prefers-reduced-motion: frozen or disabled.