Docs
Floating Pixel Backgroud

Floating Pixel Backgroud

A amazing Floating pixel Backgroud

Welcome to BuouUI

Installation

Copy and paste the dot code into your project.

API Reference

Props

PropTypeDescription
idnumberA unique identifier for the pixel.
xnumberThe horizontal position of the pixel on the screen.
ynumberThe vertical position of the pixel on the screen.
sizenumberThe size (width and height) of the pixel, in pixels.
speednumberThe speed at which the pixel moves (affects animation).

Usage

export default function Demo() {
  return (
    <div className="h-[600px] flex items-center justify-center overflow-hidden bg-gray-900 dark:bg-gray-900">
      {/* Floating Pixels Effect Background */}
      <FloatingPixels />
 
      {/* Hero Content */}
      <div className="text-center px-4 sm:px-6 lg:px-8">
        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white tracking-tight mb-4">
          Welcome to the BuouUI
        </h1>
        <p className="mt-6 text-xl sm:text-2xl text-gray-300 max-w-3xl mx-auto">
          BuouUI is a team of talented designers and developers making, and we
          love building beautiful and functional websites.
        </p>
      </div>
    </div>
  )
}
Rain LettersFloating Bubbles