Beams Background

Animated Beams in the Background.

Live Preview
Open in

Beams
Background

For your pleasure

Motion

Installation

npm install motion

Usage

import BeamsBackground from "@/components/xui/beams-background";

export function MyComponent() {
  return (
    <div className="relative min-h-screen">
      <BeamsBackground intensity="strong" />
      <div className="relative z-10 flex items-center justify-center min-h-screen">
        <h1 className="text-4xl font-bold text-white">Your Content Here</h1>
      </div>
    </div>
  );
}

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-Child components
intensity"subtle" | "medium" | "strong""strong"Animation intensity level

Intensity Levels

  • subtle - Light animation with reduced opacity
  • medium - Moderate animation intensity
  • strong - Full animation intensity (default)

Dependencies

This component requires the following packages:

  • motion (framer-motion)