Background Beams

Animated SVG background beams with customizable gradient colors and animation speed. Perfect for hero sections and landing pages.

Preview

Beautiful Beams

Requirements

cmd
1 lines
1
npm install motion

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-neutral-950">
      <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.4Opacity of the animated beams (0 to 1)
beamCountnumber50Number of animated beams to display (1 to 50)
reversebooleanfalseAnimate beams in reverse direction
strokeWidthnumber0.5Width of the beam strokes
classNamestringundefinedAdditional CSS classes for the container