Shadcn.io is not affiliated with official shadcn/ui
React Beams Background
Animated SVG light beams with cyan to purple gradient, flowing diagonally across the screen for a tech-forward aesthetic
These animated beams give your site that polished, techy feel you see on SaaS landing pages and AI product sites. Twenty curved SVG paths flow diagonally across the screen, each one drawing itself with a cyan-to-purple-to-pink gradient. The staggered timing creates this nice cascading effect where beams continuously fade in and out at different points. I reach for this when a client wants something that screams "modern tech" without being too in-your-face. It works great behind hero text or feature sections.
React Beams Background preview
Installation
Related Components
Aurora Background
Northern lights gradient effect
Beams Collision
Interactive beam collision effect
Sparkles
Glittering particle effects
Meteors
Falling meteor animation
Paths
Animated SVG path lines
Warp
Hyperspace star field
FAQ
Was this page helpful?
Sign in to leave feedback.