Docs
Background Grids

Background Grids

Displays a beautiful Background Grids using canvas.

Loading...

Installation

Copy and paste the Background Grids 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

PropTypeDefaultDescription
classNamestring-Custom className for the main container
titlestring"BuouUI"Title to display in the center
descriptionstring"BuouUI is a team..."Description text to display below the title
imageSrcstring"https://img.buoucoding.com/image/2.jpg"Image source URL
imageAltstring"header"Image alt text
childrenReactNode-Custom content to render inside the container
containerBgColorstring"bg-white"Background color for the container
containerBorderColorstring"border-neutral-200"Border color for the container
beamsBeamOptions[][default beams array]Array of beam configurations
showGridbooleantrueEnable or disable grid background
gridColorstring"rgba(0, 0, 0, 0.2)"Grid color

BeamOptions Interface

PropertyTypeDefaultDescription
initialXnumber-Initial X position of the beam
translateXnumber-Target X position for animation
initialYnumber"-200px"Initial Y position of the beam
translateYnumber"800px"Target Y position for animation
rotatenumber-45Rotation angle of the beam
classNamestring-Additional classes for the beam
durationnumber8Animation duration in seconds
delaynumber0Animation delay in seconds
repeatDelaynumber0Delay between animation repeats
colorstring"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
Confetti Bu...Particle Bu...