127 Components
Thunderstorm
BackgroundsDramatic thunderstorm background featuring recursive midpoint-displacement branching lightning bolts, dark rolling cloud banks, and wind-driven rain streaks on Canvas 2D.
Procedural Branching Bolts
Thunderstorm
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/thunderstorm.json"
Props
TypeScript props supported by <Thunderstorm />.
| Prop | Type | Default | Description |
|---|---|---|---|
| rainIntensity | number | 180 | Number of wind-driven rain streaks rendered across the scene. |
| lightningFrequency | number | 0.35 | Rate of automatic procedural lightning strikes (0 = manual only, 1 = frequent). |
| windAngle | number | 14 | Wind tilt angle in degrees (-30 to 30) affecting rain streaks and cloud drift. |
| boltColor | string | "#E0F2FE" | Hex color for the lightning plasma bloom and cloud deck illumination. |
| flashIntensity | number | 0.6 | Intensity of the screen and cloud illumination flash during a strike (0 to 1). |
| children | React.ReactNode | — | Optional foreground UI rendered above the storm canvas. |
| className | string | — | Additional Tailwind CSS classes for the root container. |
Key Features
- Recursive midpoint-displacement lightning generator with secondary forks and multi-pass plasma bloom
- Dynamic cloud deck and atmospheric screen exposure flash on every strike
- Depth-sorted wind-driven rain streaks with adjustable angle and density
- Click-to-strike sky interaction plus manual Trigger Strike HUD button
Keyboard & Accessibility
- Adjustable flashIntensity prop allows toning down screen exposure flashes for photosensitive users
- Interactive Trigger Strike button and range controls are keyboard accessible