Docs
Background Beams
Background Beams
Displays a beautiful Background Beams using canvas.
Installation
Copy and paste the Background Beams code into your project.
API Reference
BeamsBackground Component
The BeamsBackground component creates a beautiful background with animated beams that collide with a container element, creating explosion effects.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Custom className for the main container |
| title | string | "BuouUI" | Title to display in the center |
| description | string | "BuouUI is a team..." | Description text to display below the title |
| imageSrc | string | "https://img.buoucoding.com/image/2.jpg" | Image source URL |
| imageAlt | string | "header" | Image alt text |
| children | ReactNode | - | Custom content to render inside the container |
| containerBgColor | string | "bg-white" | Background color for the container |
| containerBorderColor | string | "border-neutral-200" | Border color for the container |
| beams | BeamOptions[] | [default beams array] | Array of beam configurations |
| showGrid | boolean | true | Enable or disable grid background |
| gridColor | string | "rgba(0, 0, 0, 0.2)" | Grid color |
BeamOptions Interface
| Property | Type | Default | Description |
|---|---|---|---|
| initialX | number | - | Initial X position of the beam |
| translateX | number | - | Target X position for animation |
| initialY | number | "-200px" | Initial Y position of the beam |
| translateY | number | "800px" | Target Y position for animation |
| rotate | number | -45 | Rotation angle of the beam |
| className | string | - | Additional classes for the beam |
| duration | number | 8 | Animation duration in seconds |
| delay | number | 0 | Animation delay in seconds |
| repeatDelay | number | 0 | Delay between animation repeats |
| color | string | "from-orange-500 via-yellow-500" | Gradient color for the beam |
Usage Examples
Basic Usage
import BeamsBackground from "@/components/beams-background"
export default function Home() {
return (
<main>
<BeamsBackground />
</main>
)
}Custom Content
import BeamsBackground from "@/components/beams-background"
export default function Home() {
return (
<main>
<BeamsBackground
title="My Custom Title"
description="A custom description for my beams background"
>
<div className="p-8 text-center">
<h3 className="text-2xl font-bold">Custom Content</h3>
<p>You can place any content here instead of an image</p>
</div>
</BeamsBackground>
</main>
)
}Custom Beams
import BeamsBackground from "@/components/beams-background"
export default function Home() {
return (
<main>
<BeamsBackground
beams={[
{
initialX: -400,
translateX: 600,
duration: 7,
repeatDelay: 3,
color: "from-blue-500 via-indigo-500",
},
{
initialX: 200,
translateX: 1200,
duration: 5,
repeatDelay: 3,
color: "from-green-500 via-emerald-500",
},
]}
/>
</main>
)
}No Grid Background
import BeamsBackground from "@/components/beams-background"
export default function Home() {
return (
<main>
<BeamsBackground
showGrid={false}
/>
</main>
)
}Notes
- The component uses Framer Motion for animations, so make sure to install it:
npm install framer-motion - The component is designed to be responsive and works well on both mobile and desktop
- The beams will collide with the container element and create explosion effects
- You can customize the colors, positions, and animation timing of each beam