Components
Pluviophile
Natural rain background with canvas-rendered falling streaks. Configurable angle, speed, color, density, and drop size.
npx neonblade add pluviophileDefault rain
Straight falling — slow drizzle
Heavy downpour
Wind-driven — steep angle
Neon cyan rain
Neon pink rain
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
dropColor | string | "rgba(174,214,241,0.85)" | Color of the falling rain streaks. Accepts any valid CSS color string — hex, rgb, rgba, hsl. |
dropCount | number | 150 | Number of simultaneous falling rain streaks. Higher values produce heavier rainfall. |
speed | number | 12 | Fall speed in pixels per frame. Each drop has ±25% speed variation for a natural look. |
angle | number | -15 | Angle of rainfall in degrees from vertical. Negative values lean left (wind from right); positive values lean right. Clamped to ±60°. |
dropMinLength | number | 15 | Minimum length of a falling rain streak in pixels. |
dropMaxLength | number | 40 | Maximum length of a falling rain streak in pixels. |
dropWidth | number | 1 | Stroke width of each falling rain streak in pixels. Each drop has slight width variation. |
opacity | number | 0.75 | Global opacity of the entire rain canvas layer (0–1). |
backgroundColor | string | "#0a0a0f" | Background fill color of the component. The canvas redraws this every frame as the base layer beneath the rain. |