Design Engineering Practice
Tokyo Transit Map
In the age of AI-generated everything, this project is a practice for me to do hand-directed design, giving an uncommon care and details, as well as do code again after a decade. Every interchange pill, station glow, and headlamp cone placed with intention. Built with code (with the help of Claude), shaped by taste.
Train detail
Each train is more than a moving dot. At night, a warm headlamp cone cuts forward, windows brighten from inside, and the track lights softly with ambient glow.
Approaching station
When a train nears or just leaving a station, a dashed ring pulses around the marker. It fades in proportionally to distance. A subtle sense of arrival and departure.
Line focus
Click any line to dim everything else. The selected route stays vivid while the rest recedes. Tokyo has many lines, and without focus, a map is noise.
Station editor
Pixel precision starts somewhere. I built a Station Editor for myself when building, toggleable in the live map with Ctrl+Shift+D — that turns the canvas into a workshop. Click any station, nudge it with the arrow keys, then copy a Claude-ready prompt that bakes the changes back into the source.