City Block 100 Years — one corner, 1925 → 2025 → sci-fi future across 5 generations
A 3D EPOCH demo: One city corner, 1925 → 2025 (then sci-fi 2025 → 2125 on reseed) — 16 era stamps JAZZ AGE → DEPRESSION → VICTORY → POSTWAR BOOM → NEW WAVE → DISCO ERA → NEON DAYS → DIGITAL DAWN → TECH BOOM → STREAM AGE → PRESENT DAY → VERTI-CITY → NEXT EPOCH — 5 generations of the Donovan family across the block.
Built with:
three.js r0.160 (single file)Storefront morphs: DONOVAN & SONS → RECORD SHOP → DINER → LAUNDROMAT → COFFEElocalStorage city block memory across reseeds
Prompt
Build a single-file HTML page that recreates "100 years on one city block, 1925 → 2025" as a continuous 3D autoplay world. The same corner — corner store, brownstone, alley, sidewalk, rooftop, basement — across 100 years and 5 generations of the Donovan family. On reseed advances into 5 sci-fi future decades (2025 → 2125). Cozy + Edward Hopper + Studio Ghibli vibe.
Hard constraints:
- One HTML file, < 200KB.
- three.js r0.160.0 from unpkg, IIFE, strict mode, full disposable cleanup, reseed every ~10 min advancing into next century.
- First body line: <!-- ROUND16_EPOCH v1 -->
- localStorage memory under key `city_block_memory_v1` — saves Donovan family lineage across 5 generations. On reseed advance to next century, age elders, cycle in next-gen names from FAM_NAMES + SURNAMES, persist sci-fi extrapolation flags.
- Generational aging — child/teen/adult/elder mesh scale-swap based on age = year - born.
- Visible structural change — corner store morphs DONOVAN & SONS → RECORD SHOP → DINER → LAUNDROMAT → COFFEE. Streetcar tracks visible 1925-1955 then paved over, bus shelter 1955+, subway kiosk 1985+, EV charger 2010+, rooftop garden 2010+, AC unit 1965+, neon sign 1955-2015.
- Cars evolve modelt → belair → wagon → minivan → ev → hover. Lamps gas → fluorescent → sodium → LED. TV/radio console-radio → big-tube → CRT-square → CRT-flat → flat-panel → holo-pane.
- Era stamps via 16 ERAS: JAZZ AGE → DEPRESSION → VICTORY → POSTWAR BOOM → NEW WAVE → DISCO ERA → NEON DAYS → DIGITAL DAWN → TECH BOOM → STREAM AGE → PRESENT DAY (+5 future VERTI-CITY → NEXT EPOCH).
- Generation HUD: "GEN N OF 5 · YEAR Y · ERA NAME".
- 6 sub-locations: corner store, residential brownstone w/ stoop & windows, back alley w/ fire escape, sidewalk + streetcar/bus stop/subway/EV charger, rooftop water tower + garden, basement speakeasy/garage/studio.
- Mini-map = block with 6 hotspots + active highlight.
- 66+ named: 16 named Donovan family across 5 generations (Gen 1 James/Mary → Gen 2 Edith/Thomas → Gen 3 Lila/Marco/Sophia → Gen 4 Pilar/Owen → Gen 5 Cyrus newborn) + 50 InstancedMesh pedestrians with per-decade clothing palettes.
- 18+ director cameras: corner-store wide, brownstone stoop, alley low, rooftop water-tower, sidewalk streetcar, subway entrance, basement garage, decade wide E/W, montage push-in, sunset pan, block aerial, fire-escape POV, storefront window, streetlight low, corner cross-dolly, rooftop pan, pedestrian dolly, window pull-out, ground-level walk.
- HUD: era stamp top center, big year ghost, GEN N OF 5, family roster panel (alive/dead with ages), L3 featured character lower-third, mini-map, scrolling chyron with 24 dated events + WHO IS lines.
- Day/night cycle drives brownstone window count and neon brightness. Sky/fog/sun palette shifts per decade (sepia → smog → blue).
- Reseed overlay: "A NEW CENTURY OPENS · CYCLE 2 · 2025 → 2125 · SCI-FI EXTRAPOLATION"
Tone: cozy, hopeful, gently nostalgic. NO real-world political content. NO graphic violence. Death is gentle (an empty rocking chair on the stoop, an obituary line in the chyron).
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- How to compress 100 years of one city block into a 10-min loop with 6 sub-locations all live simultaneously and structural change gated on year-progress (streetcar tracks paved 1955, neon sign mid-century only, EV charger 2010+)
- How to use localStorage to persist 5 generations of one named family + cycle into sci-fi future decades on reseed using FAM_NAMES + SURNAMES rotation
- How to create the visual signature of every American 20th-century decade with primitive geometry — model-T → bel air → wagon → minivan → EV → hover car, gas lamps → LED, console radio → flat-panel → holo-pane