Shadcn.io is not affiliated with official shadcn/ui
React Rain Background
Atmospheric rain animation with realistic falling droplets, depth layers, and subtle lightning flashes
Rain streaking down the screen—atmospheric, moody, and mesmerizing. Multiple depth layers create parallax: distant drops are slower and dimmer, close ones are fast and bright. Each raindrop is a slight angle for realism, with varying lengths and speeds. Optional lightning flashes illuminate the scene briefly. It's that cozy, contemplative rain-on-window feeling. Canvas-based for smooth performance even with hundreds of drops. Perfect for lo-fi aesthetics, weather apps, moody landing pages, or anywhere you want atmospheric depth.
React Rain Background preview
Installation
Related Components
Meteors
Falling particle trails
Particles
Floating particle system
Starfield
Flying through space
Wavy
Flowing wave lines
Aurora
Northern lights effect
Confetti
Falling celebration particles
FAQ
Was this page helpful?
Sign in to leave feedback.