Live: https://zippy.town
Zippy Town is the showcase site for a live wallpaper app I made for Android. You get a small toy-like city with traffic driving around the streets.
As you scroll, the camera moves through a series of viewpoints, each showing off a feature of the wallpaper: the day/night cycle, the different camera angles, and a little vehicle hunt game.
Some background: the wallpaper itself started out as this three.js scene, running in a WebView inside the app. But Android aggressively kills wallpaper apps that use a lot of memory, and an empty WebView was already using about 130 MB before loading any content, while live wallpapers are recommended to stay under about 100 MB.
So the Android app moved to Google’s Filament renderer, and the three.js version lives on as the website. Both use the same city model, lightmaps and traffic logic.
How it’s built:
Baked lighting: the city is lit by lightmaps baked in Blender Cycles, one set for day and one for night. A custom ShaderMaterial blends between them, so the day/night cycle costs almost nothing at runtime. There’s even a Halloween set for October.
Cars pick up the baked light: I bake the lighting along every road into per-segment samples. That lets the cars brighten under street lamps and darken in shadow without any real-time lights.
Traffic: a simple waypoint-based simulation with junctions and give-way rules, so vehicles queue and take turns rather than driving through each other.
Post-processing: EffectComposer with a gentle BokehPass depth of field for the tilt-shift miniature look, then SMAA and AgX tone mapping.
Smooth on any screen: a small frame pacer keeps motion even at 60 fps on 90/120/144 Hz displays rather than stuttering between rates.
Lightweight: textures and meshes are compressed for the web, bringing the download from about 25 MB down to about 5 MB.
Happy to answer questions about the bake pipeline or the WebView → Filament move. Thanks to everyone behind three.js, which made the prototype possible in the first place!