Photo Mosaic
One big picture, built from hundreds of small ones.
AdvancedWeb appCreative14–28hAI-buildable 3/5no setup
Rebuild a target image out of a library of tiles, matching each cell to the closest-coloured photo. The matching is a nearest-neighbour search in colour space, and the reveal — zooming in to see the image is made of other images — never stops being satisfying.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Load a target image and a set of tile images
- The target divides into a configurable grid
- Each cell matches to the closest-coloured tile
- The mosaic renders progressively as it computes
- Zoom in to see the individual tiles
- Tile reuse can be limited to increase variety
- Export the mosaic at high resolution
The interesting part
- Perceptual colour distance rather than naive RGB
- Computing hundreds of tile matches without blocking the UI
- Memory when compositing a high-resolution export
Once it works
- Blend each tile toward the target colour by an adjustable amount
- Add tile rotation for better matching
- Pull the tile library from a photo API
Suggested stack
reacttypescripttailwindcanvas-api