How Lofi Cities is made
Short answer: every city on Lofi Cities is a program that draws its scene pixel by pixel, and AI coding agents write that program, directed by the site's maker, Safa Elmali. Nobody placed these pixels by hand, and no image or video generator made them. The music is not AI-generated: rules written in code compose it in your browser as you listen.
Below: which part is made how, how a city gets built and checked, and one mistake the checks missed.
Which part is made how
- City scenes
- Pixel art drawn by code. Each city is one JavaScript file that paints every pixel of a 480×270 frame, and AI coding agents write that file.
- Weather, light and people
- The same code, painted again for every frame: rain, snow and leaves, reflections, lamps, clocks that show the city's real time. Nothing is a video clip.
- Music
- Composed in your browser as you listen, by rules, and played by synthesizers built on the Web Audio API. No recordings, no samples, no AI model.
- City sounds
- Rain, traffic and bells are synthesized in your browser too.
- Previews, social images and video loops
- Frames of the same scenes, rendered by the site's own tools.
- Chat translations
- The one place where an AI model runs while you use the site.
- This page
- Drafted by one of those agents, like other text on the site.
A city is a program
There are 43 scenes for 41 cities, each a JavaScript file of 1,400 to 2,100 lines, about 73,000 lines in all. About 60 times a second the browser asks the scene to paint one moment of its four-minute loop on a 480×270 canvas, which is then scaled up with hard-edged pixels.
A scene loads nothing: no image files, nothing from the network. It has no random numbers and no timer of its own, so the same second always gives the same pixels and the loop closes without a seam.
New York's Empire State Building, from its scene file: a table of rows from the antenna down, each with its first and last pixel row, half its width and its part of the tower.
const ESB_ROWS = [
[22, 41, 0, 'ant'],
[42, 44, 1, 'cap'],
[45, 57, 2, 'mast'],
[58, 61, 3, 'mast'],
[62, 64, 4, 'mast'],
[65, 74, 7, 'obs'],
[75, 86, 9, 'upper'],
[87, 142, 11, 'shaft'],
[143, 155, 13, 'shaft'],
[156, 175, 15, 'shaft'],
[176, 186, 20, 'shaft'],
];A loop paints those rows a pixel at a time: every other column a strip of windows, the left edge lit, the right in shadow. The ferry and the yellow cabs in the same scene are typed as rows of letters, one colour to a letter.
Who writes the code
AI coding agents write it (Claude Code, going by the project's commit history). Safa Elmali decides which cities get built, what each one shows and what goes live.
The agents work from three guides kept with the code. The scene guide is the contract: the rules above and the pixel-art style (whole pixels, dithered gradients, three to five shades per material). The city life guide sets the mood: a calm night where the whole frame moves slowly. The review guide lists the mistakes found so far; an agent wrote it, from the audit below.
From a real place to a scene
An agent building a city follows these steps from the guides:
- Pick the night: a place and viewpoint, an hour, a season and a weather that give the frame its motion, such as rain on a quay or snow on a market.
- Start from the real numbers: three ratios of the real building (height to width, and the share of the height each stage takes), converted to pixels and kept within about 15%.
- Write the scene in layers, back to front: sky, far skyline, landmark, street or water with its reflections, foreground, weather. What stands still is painted once; only what moves is painted again each frame.
- Render frames and look at them: the whole frame, zoomed crops of the landmark, four moments of the loop side by side, every weather, a phone held upright. The scene guide asks for at least three rounds.
- Run the checks and the review checklist, and score the landmark's likeness from 1 to 5. Anything under 4 gets fixed.
The checks
Two commands run a scene in headless Chrome. check proves that the same second always gives the same pixels, that the loop closes without a seam, that a frame takes 4 ms or less on average and the scene loads within 400 ms, and that the file loads nothing from outside. motion measures how alive the scene is: at least a third of the frame should move during the loop, and less than a quarter should never move.
Neither can tell whether a landmark looks like itself. That takes looking, with a checklist: real proportions, the colours the place is lit in at night, nothing that reads as something else (a pale shape that looks like snow in a warm city), everything standing on something, every sign readable, someone near the viewer, and the whole landmark in view on a phone.
A mistake the checks missed
On 3 October 2026 an audit, run with the same agents, compared every city with its real landmark. Most of what it found had passed check.
In New York, the Empire State Building's crown was twice as tall as the real one and tapered in even steps, so the tower read as a pointed spire. The fix was a new table of rows that follows the real building: antenna, mast and crown about the same height, and the shaft below them the longest part.
The same audit found the Parthenon about 1.6 times too tall for its length, the white sails of Vancouver's Canada Place lit as five rainbow cones, and a taxi in Madrid driving along a balcony's handrail. Its list of mistakes became the review guide.
The music is composed, not recorded or generated
A recording is a file that sounds the same every time. An AI music model is a neural network, trained on recordings, that outputs sound. The music here is neither: written rules turn a random seed into the plan of a track (key, tempo, chords, drum pattern, song form), and synthesizers made of the browser's own oscillators and filters, plus noise made in code, play it.
So every track is new, nothing is streamed, and the site ships no audio files. The Classical style plays ten themes by Mozart and Beethoven from notes written into the code. The rules and synthesizers are code too, written by AI coding agents like the scenes. How the music on Lofi Cities is made has the details.
Where an AI model runs while you listen
In one place: the chat. A message written in another language is translated for you by a language model on Cloudflare Workers AI. Nothing else you see or hear on Lofi Cities comes from a model while you use it.
Pictures and videos
The city picker's previews, the pictures shown when a link is shared and the video loops sold on Gumroad are not separate artwork but frames of the same scenes. For a video, the site's own exporter paints one loop frame by frame, 14,400 frames, into a silent 1920×1080 MP4.
What is not claimed here
The art is not drawn by hand. Where the site says a city is "drawn", it means drawn by its code.
Nothing here says what the agents learned from. Their makers trained them, on material this project has no list of, so it cannot promise that nothing in a scene echoes someone else's pixel art. What the project itself gives an agent is in its repository: the guides, the engine and the earlier scenes. It holds no reference artwork by other artists.