Truman City

A 3D city where nothing is hidden. About eighty residents live a full, continuous day: home, school, work, coffee, lunch, shops, dinner, TV and sleep. They get around by elevator, a looping metro, buses and taxis, under real traffic lights. Easter eggs included.

Truman City is a closed little world you can watch like a reality show. Nobody ever vanishes: follow anyone, at any hour, and you will always see where they are and what they are doing.

Run it

No build step and no install. Open index.html in a recent browser, or serve the folder:

npx serve .
# or
python3 -m http.server 8000

Three.js and React are loaded from public CDNs, so the first load needs an internet connection.

What happens in the city

Residents. Families live in the houses, singles, couples and retirees in the Linden Court flats, and long-stay guests in the Grand Hotel. Each person gets a daily plan at dawn: the school run, work hours, lunch, pickups, the nanny on late evenings, Wednesday afternoons off, weekend outings. Inside every building they are visible: sleeping in the right bed, cooking, eating at the table, watching TV, working at their computer, teaching, serving behind a counter.

Elevators. Three towers with their own elevator groups. The dispatcher scores every cabin for every call (distance, direction, stops already planned, load), respects capacity and weight limits, lets people out before letting others in, and parks idle cabins.

Getting around.

• A metro loop on a viaduct around the city, with two tracks running in opposite directions, four trains and four stations, each with escalators and a platform lift.
• A bus loop with eight stops and shelters.
• Taxis that queue at their ranks, pick people up at the kerb and drop them near the door.
• Traffic lights at every crossing. Vehicles stop before the crosswalk, keep their distance, cross intersections one at a time and give way to pedestrians. Pedestrians wait for the green light.

Controls

• Top bar: View or Control screen, pause, speed, and a timeline of the day. Click the timeline to jump to any time, or use the ⏭ button to reach the next busy moment.
• Mouse: drag to look around, wheel to move closer or further.
• Keyboard (whole city view): W A S D or the arrow keys to move, Q and E to turn, Space to pause, G to go back to the whole city.
• Following someone: open the Control screen, pick anyone from the People list, and the camera stays with them indoors, in elevators, on the metro and on the bus.
• Rendering: three settings in Control screen, Settings: image quality, brightness and atmosphere.

Easter eggs

Some doors are worth clicking, some words are worth typing, and somebody in the park really needs a break from prompting. Look around.

Project structure

index.html          the assembled, ready-to-open app
src/head.html       page head, styles, library imports
src/sim.js          time, buildings, elevator dispatching
src/city.js         residents, households, daily plans, poses inside places
src/transit.js      metro loop, stations, escalators, platform lifts, taxis
src/traffic.js      traffic lights, vehicles, buses, pedestrian crossings
src/world.js        Three.js scene: city, interiors, people, cameras
src/ui.js           React interface, central store, control screen
scripts/build.sh    rebuilds index.html from src/

After editing anything in src/, rebuild:

./scripts/build.sh

Tech

Three.js 0.147, React 18 with htm (no JSX compiler), a small zustand-style store, plain JavaScript. Everything runs in the browser.

License

MIT, see LICENSE.

Not affiliated with or endorsed by Anthropic. Claude, Opus, Sonnet and Haiku are names belonging to Anthropic and appear here only as friendly references.