Bringing the Airport Aesthetic Home: The Split-Flap World Clock
There is something undeniably captivating about the rhythmic “click-clack” of a vintage Solari split-flap display. Whether you’ve spent time staring at them in a departure lounge or seen them in classic films, they represent a perfect marriage of mechanical engineering and dynamic design.
To capture that aesthetic for the modern desktop, I’ve just released World Clock coded in html, a responsive, Dockerized dashboard that brings the classic split-flap experience to your browser.
The Concept: Retro Aesthetic, Modern Tech
The goal was to create a functional world clock that serves as a high-visibility dashboard. Built with a clean HTML/CSS/JS stack, the interface is designed to fill a screen—making it the perfect use case for an old tablet or a secondary monitor in a server rack setup.
Key Features:
-
Dual-Frame Logic: The top half of the board features six static major cities (Auckland, London, New York, etc.), while the bottom half cycles through a random pool of international airports every 10 seconds.
-
Total Responsiveness: The layout is built to be “mobile-first.” Whether you’re viewing it in landscape on a smartphone or fullscreen on a 27-inch monitor, the columns scale perfectly to prevent zooming or scrolling.
-
Timezone Intelligence: Using the
Intl.DateTimeFormatAPI, the board calculates local times, dates, and relative “Yesterday/Today/Tomorrow” statuses for every location automatically.
Quick Deployment with Docker
Because I wanted this to be as lightweight as possible, the entire application is containerized. If you have Docker installed, you can have your own airport-style departures board running in seconds without needing to configure a web server manually.
To get started, simply grab the index.html, Dockerfile, and docker-compose.yml files from the repository and run:
docker compose up -d --build
The dashboard will be live at http://localhost:8056
For a preview of how it works check https://worldclock.networknick.online
Why a Split-Flap Clock?
In an age of flat, minimalist digital clocks, there’s a specific joy in seeing the “flaps” flip over as the minutes change. This project was a fun exercise in CSS animations and viewport-based scaling, ensuring that the retro-mechanical feel remains intact even on a digital screen.
It’s an ideal project for anyone who has friends or colleagues scattered across time zones, or for those who just want to add a bit of “network operations center” flair to their workspace.
Check it out on GitHub
The project is fully open-source and ready for customization. You can find the repository, including the index.html, Dockerfile, and docker-compose.yml, over at GitHub:
Feel free to fork it, add your own favorite cities to the rotation, or tweak the CSS colors to match your desk setup!
