Pixel Image

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Props

Prop	Type	Default	Description
`src`	`string`	—	The image source URL
`grid`	`"6x4" \| "8x8" \| "8x3" \| "4x6" \| "3x8"`	`"8x8"`	Predefined grid layout
`customGrid`	`{ rows: number; cols: number; }`	—	Custom grid layout (overrides `grid`)
`grayscaleAnimation`	`boolean`	`true`	Whether to animate from grayscale to color
`pixelFadeInDuration`	`number`	`1000`	Duration (ms) for each pixel fade-in animation
`maxAnimationDelay`	`number`	`1200`	Maximum random delay (ms) for pixel animation
`colorRevealDelay`	`number`	`1500`	Delay (ms) before revealing color

Grid Type

// Predefined grid options
"6x4" | "8x8" | "8x3" | "4x6" | "3x8"
 
// Custom grid example
customGrid={{ rows: 5, cols: 10 }}

Props

Prop	Type	Default	Description
`src`	`string`	—	The image source URL
`grid`	`"6x4" \| "8x8" \| "8x3" \| "4x6" \| "3x8"`	`"8x8"`	Predefined grid layout
`customGrid`	`{ rows: number; cols: number; }`	—	Custom grid layout (overrides `grid`)
`grayscaleAnimation`	`boolean`	`true`	Whether to animate from grayscale to color
`pixelFadeInDuration`	`number`	`1000`	Duration (ms) for each pixel fade-in animation
`maxAnimationDelay`	`number`	`1200`	Maximum random delay (ms) for pixel animation
`colorRevealDelay`	`number`	`1500`	Delay (ms) before revealing color

Grid Type

// Predefined grid options
"6x4" | "8x8" | "8x3" | "4x6" | "3x8"
 
// Custom grid example
customGrid={{ rows: 5, cols: 10 }}

Features