Train Destination Display

Overview

Train Destination Display is a web application that faithfully emulates the iconic Hamburg U-Bahn destination display (used until 2025) with its characteristic dot-matrix style and countdown timer.

Originally created for a wedding website, it evolved into a standalone open-source project.

How It Was Built

The starting point was reference research: photos and videos of the original display to capture the exact dot-matrix grid dimensions, font proportions, and animation timing. Each character was mapped into a pixel grid by hand to match the original typeface.

For rendering, I compared SVG, CSS Grid, and Canvas. Canvas won for the level of pixel control it offers and the ability to time animations precisely: both important for the blinking and scrolling behavior of the original.

The component was originally embedded in the wedding website, then extracted and generalized into a standalone project. All content, colors, and layout parameters can be adjusted through a single JavaScript config file without touching the source code, which makes it easy to use in other contexts.

Outcome

Published as an open-source project on GitHub. The display was used live on the wedding website it was originally built for, and the standalone version is available for anyone who wants to recreate the same effect.