GAME · WEB · FILM
← Back to journal

/ CREATIVE CODING

Sakura Crossing, a cel-shaded Japanese town built in Three.js

An MIT-licensed, explorable anime-style neighborhood on a small planet, drawn with toon lighting, depth-based ink lines, and no image assets.

Sakura Crossing (桜踏切) is an open-source Three.js scene by Kenton-GMI: a Japanese suburban neighborhood in cherry blossom season, wrapped around a small planet and rendered to look like a hand-painted anime background. It spread on X through a Chinese-language post by @Delroy715 saying that Claude Opus 5.5 built it in two hours of continuous work.

That claim could not be confirmed; the video the post links to was published by GMI Cloud’s account. The repository was created on 2026-07-29, and its README does not say how the project was made, although the repository includes a CLAUDE.md. What the repository does show is worth studying on its own.

Walk the neighborhood

The town starts at a level crossing and grows outward into a shopping street, a shrine up a flight of stone steps, a school, a library, back alleys, a festival ground mid-preparation, and a railway that circles the planet. There are no people; the place is described by what has been left behind. You can walk, run, ride an e-bike, use vending machines, and call a train. It needs Node 18 or later, with three.js and Vite as its only dependencies, and it must be served over HTTP rather than opened as a file.

How the 2D look is made

Every object is real geometry. MeshToonMaterial with hand-authored gradient ramps steps sunlight into a few flat bands, and the toon shading is patched so the darker bands shift toward a cool violet instead of simply getting darker. The ink lines come from a screen-space second difference of depth rather than an edge filter. Every sign, lantern, and price strip is drawn at runtime with Canvas2D, so there is not a single image asset in the source folder.

Worth reading beyond the code

The README and CLAUDE.md read like design notes, explaining the lighting, line work, and decisions behind each part of the scene. They are a useful reference for custom Three.js shaders and procedural scene building, whether or not an AI agent wrote any of it.

License

The code, including its procedurally drawn textures, is MIT-licensed. Music is the exception: only one track ships with the repository, and it has its own terms, so check them before reusing it.

← Back to journal