Pixel Background

A flexible pixel animation background with customizable origins and smooth atmospheric motion.

Pixel Animation,
Background.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/pixel-background.json

Usage

import PixelBackground from "@/components/ui/pixel-background";
<PixelBackground  className="relative h-[400px] w-full flex flex-col items-center justify-center">
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
        Pixel Animation, <br /> Background.
      </h2>
    </PixelBackground>

Examples

Direction

Pixel Animation,
Background.

API Reference

Pixel Background

A flexible pixel animation background with customizable origins and smooth atmospheric motion.

Props

PropertyTypeDefaultDescription
gapnumber6
Controls the distance between each pixel in the grid. Smaller gaps create a denser, more detailed animation.
speednumber80
Defines how fast each pixel grows and shimmers during the animation. Higher values create more energetic motion.
colorsstring"—"
Comma-separated list of colors used for the pixels. Each pixel randomly picks one from the list.
opacitynumber1
Sets the transparency of the canvas layer. Lower values allow the background content to blend through.
directionstring"center"
Determines where the animation originates. You can start from the center, edges, or corners for different effects.
classNamestring—
Custom styling applied to the container wrapping the canvas.
canvasClassNamestring—
Optional classes for styling the underlying canvas element.
childrenReact.ReactNode—
Any elements you want rendered above the animated pixel background.

Built withby Ahdeetai.