Exploding Beams Background
Energy beams that explode into particles on impact. Build interactive React backgrounds with real-time collision detection, TypeScript support, and smooth Framer Motion animations for Next.js applications with shadcn/ui integration.
Powered by
Trying to implement particle effects?
Join our Discord community for help from other developers.
You want energy beams that actually explode when they hit something? Most developers just fade them out at the edges. Boring. This React component detects real collisions and spawns particle explosions that look like they belong in a sci-fi interface.
Dynamic collision effects
Watch beams explode into particles when they hit boundaries:
Built for React and Next.js with TypeScript definitions included. The collision detection runs at 60fps using getBoundingClientRect() checks, and Framer Motion handles the particle physics. No canvas, no WebGL complexity, just React components that work.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/background-beams-with-collision.jsonnpx shadcn@latest add https://www.shadcn.io/registry/background-beams-with-collision.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-beams-with-collision.jsonbunx shadcn@latest add https://www.shadcn.io/registry/background-beams-with-collision.jsonUsage
import { BackgroundBeamsWithCollision } from "@/components/ui/background-beams-with-collision";
export default function Hero() {
return (
<BackgroundBeamsWithCollision>
<h2 className="relative z-20">Your content here</h2>
</BackgroundBeamsWithCollision>
);
}Why most beam effects are lifeless
Traditional beam animations just move across the screen and disappear. No impact, no drama, no fun. Some try to fake collisions with predetermined explosion points, but it looks mechanical.
This React component actually calculates collisions in real-time. Every 50ms, it checks if a beam intersects with the container boundaries. When it does, boom—20 particles spawn with randomized velocities and decay times. The beams regenerate automatically, creating an endless light show that never repeats exactly the same way.
Features
- Real collision detection checking boundaries every 50ms
- 20 particles per explosion with randomized physics
- Continuous beam generation that never stops
- TypeScript support with full type definitions for React projects
- Gradient beam styling from indigo to purple
- Framer Motion powered for smooth 60fps animations
- Memory optimized with automatic cleanup
- shadcn/ui compatible using Tailwind CSS design tokens
API Reference
BackgroundBeamsWithCollision
Container component that manages beams and collision detection.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content to display over the beam effect |
className | string | - | Additional Tailwind CSS classes |
...props | HTMLAttributes<HTMLDivElement> | - | All standard div props are supported |
Common gotchas
Performance on low-end devices: The collision detection runs every 50ms. On really old phones, consider increasing this interval or reducing particle count.
Z-index conflicts: Your content needs relative z-20 or higher to appear above the beams. The particles use z-10.
Container sizing: The component needs explicit height. Use min-h-screen or set a specific height on the container.
Too many particles: Each collision spawns 20 particles. If you have multiple beams colliding simultaneously, you might hit performance limits. Reduce particle count if needed.
Memory leaks: The component cleans up particles automatically, but if you're dynamically mounting/unmounting it frequently, ensure proper cleanup.
You might also like
Explore other animated background components for React applications:
Background Beams
Flowing energy streams with organic movement patterns
Particles
Interactive particle systems that respond to mouse movement
Aurora
Northern lights effect with smooth gradient animations
Meteors
Falling star animations perfect for space themes
Sparkles
Twinkling particle effects that add magical ambiance
Fireworks
Explosive celebrations with customizable colors and patterns
Questions developers actually ask
React Aurora Background
Northern lights effect that actually performs well. Build stunning React backgrounds with smooth CSS animations, TypeScript support, and zero JavaScript overhead for Next.js applications with shadcn/ui integration.
React Background Beams
Flowing energy streams that never repeat the same pattern. Create organic React backgrounds with 50 unique SVG paths, smooth gradient animations, TypeScript support, and zero performance cost for Next.js applications with shadcn/ui.