Pixel Image

Installation

showLineNumbers

import { PixelImage } from "@/components/ui/pixel-image"

showLineNumbers

<PixelImage src="/image.jpg" grid="8x8" />

Prop	Type	Default	Description
`src`	`string`	`-`	The image source URL (required).
`grid`	`"6x4" \| "8x8" \| "8x3" \| "4x6" \| "3x8"`	`"6x4"`	Predefined grid size for the pixel effect.
`customGrid`	`{ rows: number, cols: number }`	`-`	Custom grid size (1-16 for both rows and cols).
`grayscaleAnimation`	`boolean`	`true`	Whether to animate from grayscale to color.
`pixelFadeInDuration`	`number`	`1000`	Duration of the fade-in animation in milliseconds.
`maxAnimationDelay`	`number`	`1200`	Maximum random delay for pixel animations in milliseconds.
`colorRevealDelay`	`number`	`1300`	Delay before revealing color in milliseconds.

showLineNumbers

<PixelImage 
  src="/image.jpg" 
  customGrid={{ rows: 10, cols: 10 }}
  pixelFadeInDuration={1500}
/>

showLineNumbers

<PixelImage 
  src="/image.jpg" 
  grid="8x8"
  grayscaleAnimation={false}
/>