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.
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.
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.
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.
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.
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.
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
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.