Make a Real-Time Transit Map Useful Without the Map

A voxel Tokyo synchronized to real-world time is trending today. The visual experience is delightful, but the underlying transit state should remain usable without WebGL, color, or animation.

Model the experience once:

type Train = {
  id: string;
  line: string;
  previousStation: string;
  nextStation: string;
  scheduledArrival: string;
  delayMinutes: number;
};

Render that state into both the map and a semantic list. Let users filter by line and station, pause animation, switch to reduced detail, and open a train’s route. The list needs real headings, buttons, and status text—not a canvas mirroring hack.

Do not announce every position update. Use a quiet live region only for user-selected events such as “next train arrives in two minutes” or a delay change. Preserve keyboard focus when data refreshes. Respect prefers-reduced-motion, but also provide an explicit pause control because preference and context differ.

Test keyboard order, 200% zoom, forced colors, screen-reader navigation, slow data, disconnected state, and a device without WebGL. Then ask users to complete the same task in both views: identify the next train and understand a delay.

The accessible fallback is not a lesser copy. It is another projection of the same trustworthy transit model.