Shadcn.io is not affiliated with official shadcn/ui
Pixel Image
Grid-based image reveal with pieces fading in like a mosaic for React
Pixel Image preview
Your image splits into a grid and the pieces fade in one by one in a staggered pattern. There's an optional grayscale-to-color transition where pieces appear in black and white first, then shift to full color once assembled. Makes images feel more intentional than just appearing. Good for hero images, portfolio work, or anywhere you want the image itself to be a moment.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:
use shadcnio to install the pixel-image component into my projectRelated 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.