A stunning image reveal animation that splits images into grid pieces with staggered fade-in and grayscale-to-color transitions.
motion-svruned
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
pixel-image.svelte
index.ts
Examples
Color Only (Once)
Pixel image with once={true} - animation plays only once and stays visible.
Fast Reveal (Replay)
Quick animation that replays each time you scroll into view (default once={false}).
Grid Variations
Compare different grid sizes - see how 8x8 vs 8x3 grids affect the animation.
8x8 Grid
8x3 Grid
Props
PixelImage
A component that creates stunning image reveal animations by splitting images into a grid of pieces with staggered fade-in effects.
| Name | Type | Default | Description |
|---|---|---|---|
src | string | Required | The image source URL |
grid | "6x4" | "8x8" | "8x3" | "4x6" | "3x8" | "6x4" | Predefined grid configuration |
customGrid | { rows: number; cols: number } | - | Custom grid dimensions (overrides grid prop) |
grayscaleAnimation | boolean | true | Enable grayscale-to-color transition effect |
pixelFadeInDuration | number | 1000 | Duration of each piece's fade-in animation (ms) |
maxAnimationDelay | number | 1200 | Maximum random delay for piece animations (ms) |
colorRevealDelay | number | 1300 | Delay before color reveal begins (ms) |
once | boolean | false | If true, animation plays only once. If false, replays each time element enters view |