City Century — 1925-2025 Urban Saga (3D)
100 years of one city. 13 mayors. Depression, war, blackout, tech boom, pandemic, megacity.
Built with:
HTMLJavaScriptthree.js
Prompt
An autonomous 3D Cities Skylines-style 100-year urban saga. 1925-2025 across 7.5 min real time (~4.5s per simulated year). 3D scene: 16×16 plot grid (256 tiles), rising buildings with era-correct silhouettes (1-story farms → 90-story green arcologies), street grid with stripes & sidewalk pads, animated low-poly cars (era-tinted), 200-instance InstancedMesh citizens, era-shifting skybox + fog, flood plane, fire/smoke Points particles, City Hall with dome + pillars at center. Century events: Founding (1925), Depression freeze (1929), New Deal (1933), War factories (1941), Suburban boom (1950s), Skyscraper era (1970s), Blackout (1977), Gentrification rebuilds (1990s), Tech boom (2000s), 2008 Crash freeze, Megacity arcologies (2015+), Pandemic citizen-vanishing (2020), Smart City green tech (2025). Disasters: Fire (particles + collapse + rebuild), Flood (rising blue plane), Earthquake (camera shake + tile damage), Plague (green sky + citizens halt). 13 era-keyed mayor templates with random first/last names per cycle, party affiliation, bio, randomized portrait canvas, NEW MAYOR lower-third, City-Hall cut on inauguration. Broadcast UI: CIVIC CHRONICLE logo + LIVE, big year ticker (1925→2025), population counter (2k→8M), POPULATION/GDP/CRIME/CULTURE stats, skyline silhouette canvas tracking tallest-per-year, anchor PIP (Reporter Vance + Historian Dr. Okafor) with blinking + talking heads, lower-thirds, chyron, host narration, scrolling Chronicle Wire ticker. 5 director cams: SKYLINE / GROUND-LEVEL / HIGHWAY (follows a car) / CITY-HALL / AERIAL with 7-11s cycles + earthquake shake. Loop: 2025 → ONE CENTURY OF [CITY] ceremony (12s) → reseed (new city name from 16-city pool, fresh mayors, demolished tiles, year reset). Forever.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- A skyline silhouette canvas that PERMANENTLY tracks the tallest building per year (so by 2025 the chart visually shows the city's growth curve) is the single most powerful 'a century has passed' visual — viewers stare at it like a stock chart.
- Disasters that DAMAGE then REBUILD tiles (fire collapses building, then over 2-3 sim years a new taller one rises in its place) is the urban-saga equivalent of dynasty death-then-heir — viewers feel the city is alive, not scripted.
- Era-shifting skybox + fog (1925 sepia → 1950 clear → 1977 brownout → 2020 dim green pandemic → 2025 clean blue smart-city) is a ZERO-cost mood pump that does more for 'time has passed' than 100 building swaps could.