Muzeum MZA Horizontal Scroll Exhibition

Overview

This site is an immersive, horizontal-scroll digital museum that uses a timeline-driven navigation to showcase the history of Warsaw's public transport. Built on a swiper-based architecture, it serves as a high-quality reference for developers looking to create interactive storytelling experiences, portfolios, or product catalogs that require synchronized multimedia and full-page transitions.

Design System

• Color Palette & Visual Hierarchy: The UI uses a deep charcoal background (#1A1A1A) to provide high contrast for photography and branding. Accents are primarily a muted earthy brown (.c-brown) and white, creating an elegant, archival atmosphere. Text and buttons are kept minimal to ensure the large bus imagery and historical photography remain the focal points.
• Typography: The system utilizes a bold sans-serif typeface for headlines (years and titles) with a clear scale: large year markers (e.g., "1920") paired with smaller range indicators. Captions and descriptions use a lighter weight for readability against the dark background.
• Page Structure: The site is structured as a swiper-container-horizontal. It begins with a full-screen movie-intro video slide, followed by distinct decade slides (#decade-20, #decade-30, etc.). Each decade contains a gallery, a main vehicle image, a title with a (+) button, and a short description.
• Reusable Components: Notable components include the customized Swiper navigation arrows with "Skip" (.skip-intro) labels, an audio toggle button with dual state icons (sound on/off), and a "360 Interior" viewer launcher. The loader-container featuring a bus-themed SVGs is an excellent standalone piece for themed loading states.
• Interactions & Motion: The experience relies on a horizontal slide-to-slide transition. Specific data attributes like data-audio suggest that sliding triggers localized narration or soundscapes. Elements like the link-arrow include hover transitions, and images use swiper-lazy for performance optimization.
• Responsive Behavior: The HTML includes dedicated mobile navigation classes (.show-mobile, .style-for-mobile) and logic for resizing placeholders, indicating a layout that stacks gallery elements or adjusts the swipe behavior for smaller touch screens.

Use Cases

• Interactive Timelines: Ideal for corporate history pages, educational modules, or brand heritage sites where chronological progression is key.
• Product Showcases: High-end luxury brands or automotive companies can remix this to showcase vehicle models or product evolutions with immersive 360-degree interior previews.
• Portfolio Sites: Creative professionals can adapt the full-page horizontal scroller to treat each project as a separate "era" or gallery chapter.
• Remix Directions: Replace the historical bus imagery with product renders or architectural shots. The audio-sync logic can be reused for guided tours or narrated case studies. Builders should consider cloning the swiper-wrapper structure and the audio-toggle UI for a quick, high-impact interactive section.