pixel-animation-default
import { PixelAnimation } from "@/components/ui/backgrounds/pixel-animation"
export function Component() {
return (
<div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-xl border">
<PixelAnimation pixelGap={10} />
</div>
)
}
pnpm dlx shadcn@latest add "https://ui.dalim.in/r/pixel-animation-default.json"Installation
pnpm dlx shadcn@latest add https://ui.dalim.in/r/styles/default/pixel-animation.json
Usage
import { PixelAnimation } from "@/components/ui/pixel-animation"<div className="relative h-screen w-full overflow-hidden">
<PixelAnimation pixelGap={10} />
</div>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
containerWidth | string | "100vw" | Width of the animation container. |
containerHeight | string | "100vh" | Height of the animation container. |
backgroundColor | string | undefined | Optional background color (not currently applied to canvas). |
pixelGap | number | 6 | Gap between pixels in the grid. |
animationSpeed | number | 0.25 | Speed multiplier for pixel flickering. |
colorHueStart | number | random | Starting hue value for color generation. |
colorHueRange | number | 50 | Range of hues to pick colors from. |
maxPixelSize | number | gap * 0.5 | Maximum pixel square size. |
animationDuration | number | 360 | Duration of one full animation cycle (show + hide). |
showHint | boolean | false | Reserved prop for displaying a hint overlay. |
hintText | string | "" | Hint text content if showHint is enabled. |