Background Beams

Animated SVG background beams with customizable gradient colors and animation speed. Perfect for hero sections and landing pages. Works seamlessly in both dark and light themes.

Preview

Beautiful Beams

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/background-beams.json

Usage

tsx
16 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { BackgroundBeams } from "@/components/ui/background-beams"

export default function Hero() {
  return (
    <div className="relative h-screen w-full bg-background">
      <BackgroundBeams 
        colorScheme="purple"
        speed={1.5}
        beamOpacity={0.5}
      />
      <div className="relative z-10">
        {/* Your content here */}
      </div>
    </div>
  )
}

Color Schemes

Purple

Purple Theme

Green

Green Theme

Orange

Orange Theme

Pink

Pink Theme

Animation Options

Fast Animation (2x speed)

2x Speed

Reverse Direction

Reversed

Custom Colors

Custom Gradient

Props

PropTypeDefaultDescription
colorScheme'cyan' | 'purple' | 'green' | 'orange' | 'pink' | 'custom'cyanColor theme preset for the beam gradients
customColors{ start: string, middle: string, end: string }undefinedCustom gradient colors (only used when colorScheme is 'custom')
speednumber1Animation speed multiplier (2 = 2x faster, 0.5 = half speed)
beamOpacitynumber0.5Opacity of the animated beams (0 to 1)
beamCountnumber50Number of animated beams to display (1 to 50)
reversebooleanfalseAnimate beams in reverse direction
strokeWidthnumber0.75Width of the beam strokes
classNamestringundefinedAdditional CSS classes for the container