Beam Background
Canvas-based animated light beam effects
Installation
Usage
import { BeamBackground } from "@/components/pioneerui/beam-background"
export default function Hero() {
return (
<BeamBackground numBeams={8}>
<h1 className="text-white text-4xl font-bold">Dark Hero</h1>
</BeamBackground>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
numBeams | number | 6 | Number of light beams |
beamColors | string[] | purple/indigo/pink | Beam rgba colors array |
children | React.ReactNode | undefined | Content rendered above canvas |
className | string | undefined | Additional CSS classes |