Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Background Beams With Collision

Exploding beams in the background

Open in

What's cooler than Beams?
Exploding beams.
Exploding beams.

Installation

Run the following command

npx shadcn@latest add https://ui.aceternity.com/registry/background-beams-with-collision.json

Props

BackgroundBeamsWithCollision

Prop NameTypeDescriptionDefault
childrenReact.ReactNodeThe content to be rendered inside the componentRequired
classNamestring?Additional CSS classes to be applied to the containerundefined

CollisionMechanism

Prop NameTypeDescriptionDefault
containerRefReact.RefObject<HTMLDivElement>Reference to the container elementRequired
parentRefReact.RefObject<HTMLDivElement>Reference to the parent elementRequired
beamOptionsobjectConfiguration options for the beam

beamOptions

PropertyTypeDescriptionDefault
initialXnumber?Initial X position of the beam0
translateXnumber?X position to translate to0
initialYnumber?Initial Y position of the beam"-200px"
translateYnumber?Y position to translate to"1800px"
rotatenumber?Rotation angle of the beam0
classNamestring?Additional CSS classes for the beamundefined
durationnumber?Duration of the animation in seconds8
delaynumber?Delay before the animation starts in seconds0
repeatDelaynumber?Delay before the animation repeats in seconds0

Build websites faster and 10x better than your competitors with Aceternity UI Pro

With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.

Go Pro
I've been working with Manu for a couple of months now and I can't express enough how impressed I am with his talent. Manu's JavaScript/React web UI programming skills are through the roof. He's he...

Tony Pujals

Founder at Fantastic Realms, Tech Lead at Google

A product by Aceternity
Building in public at @mannupaaji