0%

background

BeamBackground

Vertical light beams (Aceternity-style).

Playground

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

PropTypeDefaultDescription
beamCountnumber6Number of vertical beams
colorstring#34d399Beam line color (hex or rgb)
backgroundstring#0a0a0aCanvas background color