Standard web photo galleries lay out a wall of 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

The original idea is by Cartossin's GoodGallery (https://lagbag.com/goodgallery/)
Edit: GoodGallery not GoodLibrary

The demo is a bit stuttery on my Pixel 9 on Firefox.

It doesn't stutter on Chrome, but it seems like it's only running at 60 FPS rather than my native frame rate?

Thanks for noticing that. It should now run at native frame rate.
Edit: I also tried to address the performance on mobile