Shadcn.io is not affiliated with official shadcn/ui
Pixel Image
Cinematic image reveal with grid pieces assembling like a mosaic for React
The slow reveal is cinema's oldest trick, and this component nails it. Your image breaks into a grid, then pieces fade in one by one in a staggered cascade that feels organic and intentional. Optional grayscale-to-color transition adds even more drama—pieces appear desaturated, then bloom into full color once assembled. It's the difference between an image just appearing and an image making an entrance. Perfect for hero shots, portfolio pieces, or anywhere you want people to actually stop and watch.
Installation
Related Components
Motion Effect
Scroll reveal animations
Image Zoom
Click-to-expand images
Apple Cards Carousel
Progressive image loading
Flickering Grid
Grid-based animation
FAQ
Was this page helpful?
Sign in to leave feedback.