Standard web photo galleries lay out a wall of <img> tags. So I wanted to see what happens if you treat the thumbnail grid like a sprite-rendered game scene instead i.e. pre-pack thumbnails into atlas pages at build time, then composite them with WebGL2 in the browser.

• Repo
• Demo with 370+ images

How it works: Build step (Node + Sharp, runs locally if needed). Scans a photo folder, generates four LOD levels per image (h50/h100/h200/h400), shelf-packs them into 2048×2048 AVIF sprite atlases, emits a binary layout index. Originals are copied byte-for-byte with content-hashed URLs so CDN edge caches survive rebuilds with unchanged photos.

Runtime (browser only, no server). Parses the binary index zero-copy as typed-array views, computes a justified grid, renders only the visible slice via WebGL2 instanced quads.

Edit: added “very fast” to the title