QR City.

It all started with a Blender render: an extruded QR, each black module turned into a building of a different height, lit like a city model. It was pretty, but it was a fixed image of a single link.

I wanted anyone to enter their link and see their own city spin on a turntable, and for it to stay pretty while remaining a real QR: for the phone to scan it from above. One more playable piece in the Lab, like The Impostor or the Geocaching.

A QR is functional or it isn't: if styling it loses the contrast or deforms the modules, it stops scanning and the toy breaks. The constraint was binary: it decodes or it doesn't.

And the more characters the link has, the more modules the QR needs: the city fills up with tiny buildings, ugly and illegible. I had to put an honest limit on the link's length instead of letting the user generate something that won't scan.

I separated the generator from the render, just like the pure engine in The Wolf. A pure function takes the link, computes the QR matrix (medium error correction, version ≤4) and assigns each module a deterministic height from a hash of the link itself: the same link always yields the same city, and that's testable with a golden master.

The 3D render lives on its own WebGL island (Three.js) and only loads on demand: a single instanced mesh and a shader shell that paints flat roofs and windows on the sides. The camera is orthographic, not perspective. That was the key decision: with no perspective vanishing, the top-down view is a flat, undistorted QR that the reader accepts.

Scanning is the contract, so I locked it down with a test that actually decodes: for each style, the test captures the top-down canvas and runs it through a QR reader; if the city doesn't scan, the build fails. The link length limit isn't decorative: it comes from keeping the QR version low so the buildings stay legible.

Three styles, chosen with two-tone circles (half plate, half building): brand burgundy, pastel day and a night city. The color is interpolated without rebuilding the geometry, and every style uses design-system tokens with enough WCAG contrast for the QR to keep decoding.

Accessibility respected: with prefers-reduced-motion the city starts straight in static top-down mode, no turntable. The tap toggles spin / scan view from the container, not from the 3D raycast, so it works even while the city is rotating.

A generator that turns any link into a 3D city that spins on a turntable and, on tap, straightens up to a top-down view a phone actually scans. Nothing to install, from a single URL.

The piece lives at /laboratorio with the same editorial aesthetic and the same quality gate as the rest: typecheck, lint, tokens, build and an end-to-end test that requires the QR to decode in all three styles.

The hard constraint was the best design guide: "it has to scan" decided the camera (orthographic), the link length limit and even the palette. When the success criterion is binary, it's worth turning it into a test that breaks the build.

Separating the deterministic generator from the render gave me the same thing as the pure engine in The Wolf: logic testable with a golden master and a 3D layer that only worries about painting. And isolating Three.js on a lazy island keeps its cost out of the bundles the rest of the site shares.