This site renders a 1000x1000 zoomable photo grid at 60fps using just Canvas API — no WebGL, no libraries

Came across this and had to share because the rendering approach is clever.

It's a giant wall of faces — 1 million possible tiles — that you can zoom into like Google Maps. What caught my attention is how smooth it is despite being pure Canvas 2D.

From what I can tell they're using:

• LOD (level of detail) rendering — zoomed out you see colored tiles, zoom in and thumbnails load, zoom further and full profiles appear with text overlays and gradient masks
• Viewport culling — only draws tiles visible on screen
• Lazy image caching — loads photos into memory as they enter view
• Pinch-to-zoom with proper center point math so it feels native on mobile
• requestAnimationFrame loop that stays locked at 60fps

All in a single Canvas element. No Three.js, no Pixi, no virtual scrolling library.

Came across this and had to share because the rendering approach is clever.

It's a giant wall of faces — 1 million possible tiles — that you can zoom into like Google Maps. What caught my attention is how smooth it is despite being pure Canvas 2D.

From what I can tell they're using:

• LOD (level of detail) rendering — zoomed out you see colored tiles, zoom in and thumbnails load, zoom further and full profiles appear with text overlays and gradient masks
• Viewport culling — only draws tiles visible on screen
• Lazy image caching — loads photos into memory as they enter view
• Pinch-to-zoom with proper center point math so it feels native on mobile
• requestAnimationFrame loop that stays locked at 60fps

All in a single Canvas element. No Three.js, no Pixi, no virtual scrolling library.

https://www.facesonthewall.com

Zoom in and out a few times — the transition between detail levels is really clean. 300+ faces on there already.

Zoom in and out a few times — the transition between detail levels is really clean. 300+ faces on there already.