Infinite Library — Marge the head librarian wheels her squeaky cart through 5 themed wings
A 3D PORTAL demo: The Infinite Library with 5 fictional themed wings + Circulation Desk hub — SCI-FI (rocket diorama) · HISTORY (parchment vault) · CHILDREN'S (mushroom nook) · ART (sculpture pedestal) · COMPUTING (server alcove) — Marge the head librarian wheels her squeaky 8-book cart between wings.
Built with:
three.js r0.160 (single file)Pentagon-arranged wings + Circulation Desk hub via auto-portal swaplocalStorage library circulation memory + day count across reseeds
Prompt
Build a single-file HTML page that recreates "an infinite library with 5 themed wings + Circulation Desk hub" as a continuous 3D autoplay world with PORTAL multiverse mechanics.
CONCEPT: THE INFINITE LIBRARY has 5 fictional themed wings: SCI-FI, HISTORY, CHILDREN'S, ART, COMPUTING. Plus the central CIRCULATION DESK hub with checkout counter, returns slot, info terminal. Marge the head librarian wheels her squeaky 8-book cart between wings.
Hard constraints:
- One HTML file, < 200KB.
- three.js r0.160.0 from unpkg, IIFE strict, full disposable cleanup, reseed every ~10 min.
- First body line: <!-- ROUND17_PORTAL v1 -->
- localStorage memory under key `library_circulation_memory_v1` — saves day count, cycles, restocks, returns, checkouts.
Round 17 PORTAL spec:
- 5 themed wings + 1 desk hub = 6 worlds at pentagon angles, each with own palette
- Portal travel via auto-swap. Auto-portal every 60-90s. Wing-themed stamp font per wing (.font-{wing} CSS body class).
- Marge wheels cart between wings + 12 named patrons cross-visit
- 100+ named: Marge + 12 featured + 84 instanced + 30-name pool
- 24 director cameras (4 per wing)
- Per-world HUD: "WING 3 OF 5: CHILDREN'S · MARGE RESTOCKING · 24 BORROWED TODAY"
- Mini-map = pentagon wing arrangement with Marge's pink dot + patron specks
- Era stamp = wing-themed font + book stack icon
Tone: cozy, hushed, contemplative. ALL book titles fictional, no real authors.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- How to portal a camera between 6 library worlds in one demo using a pentagon wing arrangement + Circulation Desk hub + wing-themed CSS stamp font
- How to use InstancedMesh with per-instance colors to render 84 browsers (14 per wing) under 50KB
- How to use localStorage to persist a circulation log of restocks/returns/checkouts compounding across day++ reseeds