🏟️ 19 Mayıs Stadyumu | Interactive Scrollytelling Experience

A high-end, interactive web experience designed to showcase the architectural and engineering marvel of the 19 Mayıs Stadium. Built with a focus on "luxury editorial" aesthetics and seamless scrollytelling.

🌟 About The Project

This project transforms a standard architectural presentation into a cinematic journey. Inspired by hyper-car and luxury brand web experiences, it utilizes scroll-based animations to guide the user through the stadium's masterplan, architectural design, static engineering, and interior atmosphere.

Developed as part of an overarching vision for ERN Holding, the UI focuses on minimalism, dynamic typography, and deep immersion through video backgrounds.

✨ Key Features

• Cinematic Scrollytelling: Smooth, physics-based scroll animations that transition between architectural phases.
• Luxury Editorial UI: Minimalist typography, high-contrast layouts, and a sophisticated navigation system.
• Custom Magnetic Cursor: An interactive, custom-built cursor featuring mix-blend-difference for perfect visibility across varying video backgrounds.
• Dynamic Media Transitions: Seamless crossfading between high-quality video loops and architectural renders.
• Interactive Timeline: A bottom-anchored dynamic progress bar indicating the user's journey through the experience.

🚀 Built With

This project leverages modern frontend technologies for maximum performance and fluid animations:

• React - UI Framework
• TypeScript - Static Typing
• Vite - Next Generation Frontend Tooling
• Framer Motion - Production-Ready Animation Library
• Tailwind CSS - Utility-First Styling

🛠️ Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v16 or higher recommended)
• npm or yarn

Installation

1. Clone the repo

   git clone [https://github.com/mert00213/ErnParallax.git](https://github.com/mert00213/ErnParallax.git)

2. Navigate to the project directory

   cd ErnParallax

3. Install NPM packages

   npm install

4. Start the development server

   npm run dev

📂 Project Structure

• src/components/ - Contains modular components like CustomCursor.tsx.
• src/App.tsx / ErnParallax.tsx - Core scrollytelling logic and data mapping.
• public/ - Static assets including high-res videos and ERN Holding branding.

🤝 Contact

Mert İlhan Dündar

Project Link: https://github.com/mert00213/ErnParallax