After Hours City

The hero of this site — and a renderer for any photo.

A voxel city built from a photo of Michael and his dog, lit by a warm lampLive — go drag it
This is the homepage hero, photographed mid-pose. The live one moves.
Role
Design & build
When
2026
Stack
  • React
  • TypeScript
  • Blender

What you're looking at

A photo — by default, the one of me and the dog from the About page — sampled into an 84-column grid and rebuilt as roughly 7,000 cubes. Brightness becomes height, posterized into five zones, so the image reads as terraced architecture: a little city at night, lit by one warm lamp. All of it lives in a single instanced mesh — one draw call — which is why it runs smoothly on a phone.

The city plan

Water is flood-filled from the image's dark edges, so it pools around the borders like rivers — with lighter cells where it meets land.
Parks grow wherever the source pixels skew green, with jittered heights so they read as canopy.
Buildings draw materials by height band — brownstone low, brick and limestone mid, glass towers on top — clustered into neighborhoods by value noise rather than scattered per cube.
About 300 amber windows flicker in the darkest buildings, each on its own clock, plus one blinking rooftop beacon on the tallest tower.

The morph

Press "show original" and the city folds flat: every cube damps to a thin slab on a staggered wave, the street gaps close, and the posterized city colors bloom into the true colors of the photograph while the lamp crossfades to gallery light. Press it again and the city rebuilds. The easing runs on real delta time, so the choreography takes the same one-and-a-half seconds on every machine.

Try your own photo

The upload button on the homepage runs this whole pipeline on any image — and it never leaves your browser. The sampling, the zoning, and the cubes are all built on your machine.