Docs
Pixel Backgroud
Pixel Backgroud
A amazing pixel Backgroud
Installation
Install the following dependencies:
npm install three @react-three/fiberCopy and paste the cn util code into your project.
import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the dot code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
| animationSpeed | number | Controls the animation speed (0.1 = slower, 1.0 = faster). Default: 0.4 |
| opacities | number[] | Array of opacity values for the dots. Default: [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1] |
| colors | number[][] | Array of RGB color values (each as [r, g, b] where values range from 0-255). Default: [[0, 255, 255]] |
| containerClassName | string | Additional class names for the container element. |
| dotSize | number | Size of the dots in pixels. Default: 3 |
| showGradient | boolean | Whether to show a gradient overlay. Default: true |
Usage
export default function Demo() {
return (
<div className="w-full h-[400px] border rounded-md relative overflow-hidden">
<PixelEffect
containerClassName="bg-black"
animationSpeed={2}
colors={[[255, 0, 0]]} // Red
dotSize={3}
/>
</div>
)
}