Rain Storm
Rain Storm is an interactive background in the UI HUB interactive backgrounds collection. A Canvas 2D storm on two depth layers (soft far rain + sharp near rain) that gust with the wind; landing near drops burst into splash flecks; every 7-15s - or any click/tap - a seeded strike fires 1-3 branching bolts with a hard flash, a single echo and a cached radial glow that lights the rain via an additive pass, th…
The component is driven by 14 documented props (density, speed, wind, intensity, lightning, bolts and 8 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Rain Storm?
Decorative Canvas 2D storm layer: two-depth gusting rain, landing splash flecks and cinematic branching lightning you can trigger with a click/tap (hard flash + echo + radial glow) over a dark navy gradient; aria-hidden canvas behind hero content, static frame under prefers-reduced-motion.
Rain Storm at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 14
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Rain Storm works
A Canvas 2D storm on two depth layers (soft far rain + sharp near rain) that gust with the wind; landing near drops burst into splash flecks; every 7-15s - or any click/tap - a seeded strike fires 1-3 branching bolts with a hard flash, a single echo and a cached radial glow that lights the rain via an additive pass, then decays; a parity-eased pointer nudges the field.
Technical information for Rain Storm
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React only |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | HTML canvas, ResizeObserver, requestAnimationFrame |
| State change | two-depth rain streaks gusting over a dark navy gradient to a click fires branching lightning bolts across lit rain, then decays |
| Props | 14 configurable |
| Usage example | Not published yet |
Rain Storm questions
What is Rain Storm?
Decorative Canvas 2D storm layer: two-depth gusting rain, landing splash flecks and cinematic branching lightning you can trigger with a click/tap (hard flash + echo + radial glow) over a dark navy gradient; aria-hidden canvas behind hero content, static frame under prefers-reduced-motion.
How does Rain Storm work?
A Canvas 2D storm on two depth layers (soft far rain + sharp near rain) that gust with the wind; landing near drops burst into splash flecks; every 7-15s - or any click/tap - a seeded strike fires 1-3 branching bolts with a hard flash, a single echo and a cached radial glow that lights the rain via an additive pass, then decays; a parity-eased pointer nudges the field.
Which category does Rain Storm belong to?
Rain Storm is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the density prop do in Rain Storm?
Drop count scale (0-100). It defaults to 45.
What does the speed prop do in Rain Storm?
Fall speed multiplier (0-100). It defaults to 35.
Is Rain Storm free to use?
Rain Storm is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.