Beam Background

Vertical light beams with optional repeat pulse. Works in light and dark themes.

Beams (light + dark)

Installation

Requires MotionProvider and gsap. Add the beam background component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/beam-background.json

Usage

import { BeamBackground } from "@/void/background/beam-background"

<BeamBackground repeat repeatDuration={2.5} color="#22c55e" className="min-h-[400px]">
  <Hero />
</BeamBackground>

Examples

Default

Beams (light + dark)

Code

import { BeamBackground } from "@/void/background/beam-background"

<BeamBackground repeat repeatDuration={2.5} color="#22c55e" className="min-h-[400px]">
  <Hero />
</BeamBackground>