MICROTOPIA. How it was built →
A pocket-sized metropolis

MICROTOPIA

The plate is set. The plan is drawn. Scroll to lay the first brick, and the town will handle the rest.

Scroll to build
District 01 · founded first

Old Town

Every city starts with a bakery and an argument about where to put the clock tower. Old Town has both. The laundry line between the mint house and the coral cottage has flown the same five flags since founding day; nobody knows whose they are, and it is considered rude to ask.

Pop. 63 · plus one cat who considers herself management

District 02 · open late

Maker's Quarter

Sawtooth roofs, a water tower with opinions, and a chimney that puffs on the quarter hour. Everything in Microtopia gets repaired here twice: once properly, once the interesting way. The tram was built in an afternoon. The tram schedule took eleven years.

Pop. 88 · sawdust levels: festive

District 03 · tides permitting

The Port

One bay, one boat, two cranes that wave at commuters whether or not anything needs lifting. The harbourmaster logs every arrival; it is mostly gulls. Today's cargo manifest: forty crates of butter-yellow paint, twelve of mint, and one piano nobody ordered.

Pop. 41 · lighthouse uptime: 100%, smugness: higher

District 04 · quiet please

Observatory Hill

The loftiest district, elevation: two whole terraces. The observatory tracks exactly one star at a time, out of respect. On clear evenings half the town walks up to look through the big dome. The other half stays home, turns its lights on, and becomes the view.

Pop. 27 · telescope wishes granted: 3 of 3

Interlude · 9:47 pm

Nightfall

Lights out. Or rather: lights on. 428 windows, seven of them permanently flickering. The electrician is aware; the electrician is one of the seven. The lamps hum butter-yellow, the tram keeps its loop, and the cat clocks in for the night shift.

Stars visible: all of them · excuses to stay up: ditto

Morning again · the city is alive

Welcome to Microtopia

The city is finished, which is to say: it has begun. Built by scroll, run on tiny routines, population 312 and one very employed cat. Stay as long as you like. The tram comes every 26 seconds, forever.

Keep scrolling for the field notes ↓

The municipal record

Field notes from a very small city

Filed by the Office of Tiny Affairs, which is one desk, one stamp, and a drawer that will not open. Entries are alphabetical by mood.

No. 001The Stationmaster's Cat

Orange, tenured, found asleep on the annex roof beside the clock tower. She has never caught a mouse and has never needed to; her role is supervisory. Salary paid in sunbeams, backdated.

No. 002The Laundry Line

Five flags, four colours, zero owners on record. The town council voted to declare it public art, mostly so nobody would have to take it down. It passed unanimously, which in Microtopia means both councillors.

No. 003Tram No. 1

Also Tram No. Only. Coral body, mint roof, one headlamp that comes on a little early because it likes dusk. It has completed every loop since commissioning and stops for the cat without being asked.

No. 004The Water Tower

Holds water, holds court. Painted sky blue with one butter stripe after a vote that historians describe as "heated for a Tuesday." The Maker's Quarter insists it leans on purpose, for character.

No. 005The Unclaimed Piano

Arrived at the Port in spring, addressed simply to "the town." It lives in the warehouse and is tuned twice a year by someone who will not give their name. On foggy nights, the harbourmaster swears it plays back.

No. 006The Seventh Flicker

Of the seven windows that flicker after dark, six are faulty wiring. The seventh is the electrician's own, left blinking on purpose. "So the town knows I'm still up," he says, "in case anything else decides to be interesting."

Counted annually, twice, to be sure

City census

312
Residents
428
Windows · 7 flickering
14
Streetlamps, all named
1
Tram, beloved
1
Cat, in charge
1
Star tracked at a time

Colophon

A city made of divs

There are no images on this page and no 3D engine behind it. Every building, tree, crane and cat in Microtopia is an ordinary HTML div, folded into place with CSS 3D transforms: a top face and two walls each, stacked on a 760-pixel diorama plate.

The construction is choreographed by a single scroll-scrubbed GSAP timeline. Districts rise with a springy scaleZ pop, the camera drifts to meet them, and a custom --night property fades every surface, lamp and window from noon to midnight and back to first light.

If you'd like the full blueprint, the town keeps honest records.

Read the making-of guide →
  • 3D transform-style: preserve-3d, everywhere
  • Motion GSAP ScrollTrigger, one scrubbed timeline
  • Night a --night custom property tints 400+ faces
  • Windows background-repeat: space window grids
  • Tram a 26-second infinite CSS keyframe loop
  • Images none. Not one.