Civilization Rise & Fall — 4 Ages of Humankind (3D Saga)
Stone Age → Bronze → Industrial → Space. 4 civs. 12 wonders. 8 minutes of human history.
Built with:
HTMLJavaScriptthree.js
Prompt
An autonomous 3D Civilization-style civ rise-and-fall saga. 4 ages: Stone/Classical → Medieval/Renaissance → Industrial → Modern/Space. 8x8 hex-tile world with 6 biomes (plains tan, forest green, mountain grey, river blue, desert yellow, tundra white). 4 civs (random colors, random names, random leader-name from 16x16x16 pool) growing cities visibly: hut → village → walled town → metropolis → space-age dome. 12 wonders modeled as 3D landmarks (Pyramids, Hanging Gardens, Great Wall, Coliseum, Cathedral, University, Bank, Industrial Park, Hoover Dam, Internet, Spaceport, Mars Colony) — when built, camera zooms to construction with banner. 12-node tech tree DOM panel: Pottery → Bronze → Iron → Currency → Mathematics → Astronomy → Gunpowder → Steam → Industrial → Computing → Spaceflight → Singularity. Each new tech unlocks city upgrade. Sky/fog/light morphs across ages: stone-age dim → industrial sooty → space-age clear. Industrial pollution tint. Random events: BARBARIAN INVASION, PLAGUE, INDUSTRIAL REVOLUTION, WORLD WAR, COLD WAR, MOON LANDING, MARS COLONY, CIVILIZATIONAL COLLAPSE (~50% chance to reset). 6 director cameras (WORLD / CITY / BATTLEFIELD / WONDER / ANCHOR / SPACE) with smooth lerp + sway. 2 narrators on canvas-anchor PIP (Prof. Helena Vance white historian / Doc Marsh gold futurist) with mouth animation. Broadcast UI: CIV-NET logo + LIVE pulse, age banner, year ticker, tech tree panel left, wonders+leader panel right, 4-civ score grid, scrolling ticker. Lower-thirds: WHO IS, TECH UNLOCKED, WONDER BUILT, AGE TRANSITION. 12s ceremony with civ-flag overlay (collapse or ascension). Full reseed and restart forever.
Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- Sky/fog/light morphing across 4 ages (stone-age dim → industrial sooty → space-age clear) transforms the SAME hex world into 4 visually distinct eras — viewers can tell the era at a glance without reading any UI. Costs 4 keyframes of color lerping.
- 12-node tech tree as DOM panel (lit / now / locked states) is the single most readable 'progress over millennia' visual — a viewer joining mid-saga instantly sees how far humanity has come and what's next, no exposition required.
- 50/50 collapse vs ascend ending makes a long civ saga rewatchable — viewers stick around for the second loop because they don't know if humanity will reach the stars or fall to barbarism. Deterministic endings kill the genre.