Image Mosaic

The frame is full from the first frame and only its detail changes — three blocks across, then six, then twelve, then twenty-four, every level sampling the same underlying field so it stays recognisably one picture sharpening rather than four grids of noise. Levels cross-fade with a small scale-down as each lands, because a hard swap between two block grids reads as a glitch and a focus pull reads as a lens finding it. At 20% you can already judge the composition, which is when you actually want to know whether to prompt again.

Files

src/components/ui/image/image-mosaic.tsxsrc/app/globals.css → mosaic-level, mosaic-tile

Depends on

motion, lucide-react

Tags

loading · progress · generation · ai · mosaic · blocks · progressive · resolution · placeholder