Shadcn.io is not affiliated with official shadcn/ui
React Beams Collision Background
Light beams that fall and explode into particles on impact, creating a satisfying rain-like effect with indigo and purple gradients
This one's pretty fun—light beams rain down from the top and explode into particles when they hit the bottom. It's got that satisfying physics-based feel that makes people actually stop and watch. Each beam falls at its own pace with different delays, so you get this organic rain pattern rather than everything moving in lockstep. When a beam hits the bottom, boom—20 particles scatter upward while a soft glow spreads horizontally. Great for hero sections where you want some drama, celebration screens, or gaming-style interfaces. I've seen it used really well on product launch pages.
React Beams Collision Background preview
Installation
Related Components
Background Beams
Static animated beams
Meteors
Shooting star effect
Shooting Stars
Multi-directional stars
Sparkles
Twinkling particles
Fireworks
Explosive particle bursts
Particles
Floating particle system
FAQ
Was this page helpful?
Sign in to leave feedback.