Background Beams With Collision

Exploding beams in the background

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

npx shadcn@latest add @aceternity/background-beams-with-collision

Prop Name	Type	Description	Default
`children`	`React.ReactNode`	The content to be rendered inside the component	Required
`className`	`string?`	Additional CSS classes to be applied to the container	undefined

Prop Name	Type	Description	Default
`containerRef`	`React.RefObject<HTMLDivElement>`	Reference to the container element	Required
`parentRef`	`React.RefObject<HTMLDivElement>`	Reference to the parent element	Required
`beamOptions`	`object`	Configuration options for the beam

Property	Type	Description	Default
`initialX`	`number?`	Initial X position of the beam	0
`translateX`	`number?`	X position to translate to	0
`initialY`	`number?`	Initial Y position of the beam	"-200px"
`translateY`	`number?`	Y position to translate to	"1800px"
`rotate`	`number?`	Rotation angle of the beam	0
`className`	`string?`	Additional CSS classes for the beam	undefined
`duration`	`number?`	Duration of the animation in seconds	8
`delay`	`number?`	Delay before the animation starts in seconds	0
`repeatDelay`	`number?`	Delay before the animation repeats in seconds	0

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time