How this city was built.

CITY was designed and coded end-to-end by Claude Fable 5, working autonomously inside Claude Code: no design files, no templates, no image assets. One prompt in, a deployed site out. Here is the whole method, so you can do the same.

Start from real work, not lorem ipsum

The material is an actual credit research report — Consumer Credit NPL 2026 (OJK portal data, Jan–Apr 2026), written earlier on the same desk. Fable read the report, extracted every series, table and caveat, and kept the numbers untouched. A data-driven site is only impressive if the data is real.

Find the one metaphor the data already contains

Consumer credit is households. Households are a city at night. So the central visual is literal: each lending product is a district, building volume tracks book size, and windows light at the exact rate loans perform — red windows are the NPL ratio. The metaphor does the explaining before a single chart appears.

Build the city procedurally in WebGL

One THREE.InstancedMesh holds ~700 buildings. A custom GLSL shader draws the window grid per face: a hash per window cell decides lit / dark / red, with the red probability set to each district's true NPL rate. No textures, no models — the whole city is math, and ships in a single HTML file.

Choreograph the camera to the scroll

Ten camera keyframes — one per story section — joined by a Catmull-Rom spline. Scroll position maps to spline position with smoothing, so reading the story flies you between districts: up to a satellite view for the national table, down to street level for Jawa Barat. Mouse parallax and a slow ambient drift keep it alive when you stop.

Hand-roll the charts

No chart library. Sparklines, the shrinking-book paradox chart, the ranked province bars, and the Jawa Barat dumbbell are all generated as inline SVG from the data arrays, with stroke-dash draw-on animation triggered by IntersectionObserver. Every mark exists because the report says so.

Art direction as a system

Palette: ink #070b12, paper #f3ead8, amber #ffb454 for performing credit, coral #ff5f4a reserved exclusively for non-performing. Type: Fraunces (editorial serif, optical sizing) for voice, Space Grotesk for body, IBM Plex Mono for figures. Film grain, vignette and fog give the render a photographed quality.

Iterate like a design reviewer, then ship

The site was served locally, screenshotted in a real browser, and put through three full critique passes — hunting misaligned grids, dead hover states, unreadable contrast, weak transitions — with fixes after each. Then: a tiny Express server (this /guide route is on it), deployed to Railway with a generated domain. Total stack: one HTML file, one server file, zero build step.

The stack, in full

Three.js r160Custom GLSLInstancedMesh Inline SVG chartsIntersectionObserverExpress RailwayGoogle FontsNo frameworksNo build step

Honesty notes

Every figure is from the underlying report; product definitions (OJK sector codes 022–027, loan type 010) are stated on the page, as in the report.
Red-window frequency is set to each district's real NPL rate — the skyline is the dataset.
The companion site, GROUND, covers the SME half of the analysis in an entirely different visual language.