Background Beams with Collision
Animated beams that collide and create explosion effects at intersection points.
Preview
Background Beams with Collision
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
High-energy sections like launch announcements or key feature reveals.
Why this component matters
Collision creates moments of visual intensity — use sparingly for maximum impact.
Usage guidance
One per page maximum. Best at the top of a landing page or as a dramatic section opener. Keep content minimal over the collision zone.
Installation
bash
npx shadcn@latest add @aceternity/background-beams-with-collisionUsage
example.tsxtsx
import { BackgroundBeamswithCollision } from "@/components/ui/background-beams-with-collision";
export default function Example() {
return (
<BackgroundBeamswithCollision>
{/* Your content here */}
</BackgroundBeamswithCollision>
);
}Source
background-beams-with-collision.tsx
components/ui/background-beams-with-collision.tsx