Time Runway
Overview
Time Runway is an interactive website that traces the evolution of fashion silhouettes across four centuries. Built around Mapbox API, the site connects geographic context with a century-based narrative, turning fashion history into a structured and visually engaging journey through time.
Time Runway opening screen
Design
Layout & Visual
The layout splits the screen with the map on the left and a narrative sidebar on the right. Each era page pairs a geographic map view with a curated sidebar, presenting fashion profiles tied to specific cities and time periods. A clear visual hierarchy across image, title, location, and caption helps users orient themselves at a glance.
Split layout with map and narrative sidebar
Interaction
The opening screen presents four century circles, each leading into a dedicated era page. Each era is distinguishable by the unique distribution of sewing pin markers on the map. Clicking a marker opens the sidebar, revealing fashion profiles for that location. Scrolling through the sidebar shifts the Mapbox camera focus in sync, keeping the geographic and narrative context connected. A reset button is always available to bring users back to the opening screen.
Century selection
City marker, sidebar reveal, and map sync
Reset to opening screen