127 Components
Rain on Glass
BackgroundsAtmospheric window-pane rain simulation over a blurred bokeh backdrop where droplets slide down with surface-tension stutter, leave bead trails, and refract light.
Rain on Glass · Refractive Lens
Refractive Window Droplets
Blurred bokeh backdrop with water droplets that stutter-slide down the pane, leave micro-bead trails, and refract inverted highlights.
Drops: 45 · Refraction: 85%
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/rain-on-glass.json"
Props
TypeScript props supported by <RainOnGlass />.
| Prop | Type | Default | Description |
|---|---|---|---|
| dropCount | number | 45 | Number of primary sliding droplets on the pane. |
| speed | number | 1 | Gravity slide velocity multiplier. |
| wind | number | 0.05 | Horizontal wind drift factor (-1 to 1). |
| refraction | number | 0.85 | Brightness of the internal refractive lens highlight (0 to 1). |
| children | React.ReactNode | — | Optional foreground content rendered above the glass. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Simulates surface-tension stutter-sliding droplets that spawn smaller trail beads behind them.
- Each droplet renders an inverted internal radial gradient and specular rim to mimic glass refraction.
- Includes a live Steady Rain / Downpour intensity toggle in the default preview.
Keyboard & Accessibility
- Marks decorative bokeh layers and `<canvas>` with `aria-hidden='true'`.
- High-contrast typography over the darkened glass surface.
- Intensity toggle button is keyboard accessible.