background

BeamBackground

Vertical light beams (Aceternity-style).

Playground

beamCountcolorbackgroundLabel

Scroll-based previews need you to scroll into view.

Live preview

Beams

Code

<BeamBackground
  beamCount={6}
  color="#34d399"
  background="#0a0a0a"
  className="h-48 rounded-xl"
>
  <div className="relative z-10 flex h-full items-center justify-center text-sm">
    Beams
  </div>
</BeamBackground>

Props

Prop	Type	Default	Description
beamCount	number	6	Number of vertical beams
color	string	#34d399	Beam line color (hex or rgb)
background	string	#0a0a0a	Canvas background color