01 / A PLACE, NOT A PAGE
Pixelburg begins with a simple reversal: the website’s hero is not an illustration of a city; it is the city. Roads arrive in survey waves, houses rise in stepped increments, shop signs appear, a crane swings a load into position, and a tram threads through two-pixel commuters. The census beside it translates the same simulation into civic facts.
The surrounding sections behave like artifacts from that place—an ordinance, district dossiers, a punched transit ticket, and the water tower’s engineering record. That fiction keeps a long page coherent without repeating a standard marketing-card rhythm.
DESIGN RULE 01Every decorative decision must be something City Hall could plausibly print, paint, stamp, count or build.
02 / THE CITY ENGINE
The simulation lives in main.js. iso(x, y, z) converts a fourteen-square ground grid into screen-space diamonds. tile() draws the survey wave; box() makes each building from three visible faces, then adds windows and shop marks. steppedEase() quantizes smooth growth into eight handmade construction beats.
buildingsForCity() combines the authored core with expansion plots unlocked by founded districts. A timestamp, bonus and district count persist in localStorage, so elapsed time and naming ceremonies change the next visit. The canvas caps pixel density at two and DOM counters update only a few times each second rather than on every frame.
03 / NINETY SECONDS OF WEATHER
A full day lasts ninety seconds. sky() moves a square sun or moon, hard-switches between day and night tokens, and drifts block clouds through the upper field. drawWater() constructs two island faces and broken pixel ripples, avoiding translucent gradient banding.
At dusk, windows illuminate in a stagger based on building, floor and window index. lamp() uses a stepped diamond pool instead of a soft ellipse. Ringing the tower bell calls festival(): a five-second civic interruption of hard-edged bunting, stepped fireworks and a tram salute, all drawn from the same ramp. The crane hook oscillates on two periods, the tram follows a road axis, and citizens remain two pixels wide. The single requestAnimationFrame loop is cancelled when the document is hidden; reduced-motion mode paints at a calm interval.
04 / SIXTEEN, EXACTLY
The palette is declared once in styles.css and mirrored by the canvas color map. Paper and cream carry the editorial surface; ink, night and blue establish depth; yellow, orange and red provide civic signals. No external imagery or runtime dependency is involved.
BUILDS THE SIGNS.
05 / REPRODUCE THIS
Prompt an AI coding agent with a world and its behavior, not only a visual style. Name the projection, construction order, persistence model, day length, citizen scale, performance limits and semantic live counters. Require all sprites to be programmatic and supporting content to feel native to the fiction.
“Build a dependency-free HTML/CSS/JS civic simulation around one isometric coordinate function. Use a strict sixteen-color ramp, persistent phased growth, a visible working crane, tiny commuters and a complete day/night cycle. Surround it with responsive municipal artifacts—not generic feature cards.”
Then inspect real phone, tablet and desktop screenshots at top, middle and bottom. Test the naming dialog with a keyboard, confirm hidden-tab animation cancellation, and judge the earliest frame: the signature must already communicate what it will become.