BMW M Concept Neue Klasse

A cinematic, single-page BMW M concept microsite built with plain HTML, CSS, and JavaScript.

This repository contains a static storytelling experience for the BMW M Concept Neue Klasse. The page is designed as a long-form concept reveal with video sequencing, editorial image sections, technical highlights, and a highly styled visual system inspired by BMW M branding.

Overview

The site focuses on presentation over complexity. There is no frontend framework, no bundler, and no application server. The entire experience is delivered as static files and hosted on Firebase.

The main application lives in the root index.html file. Firebase Hosting is configured to publish from the repository root so the deployed site serves the real experience rather than the default Firebase starter content.

Key Features

• Full-screen video preloader with skip support.
• Sequential hero, depth, drift, and racing video transitions.
• Large-scale image storytelling across design, interior, sketch, and heritage sections.
• BMW M-inspired color palette and typography system.
• Scroll-based reveal animations and custom cursor effects.
• Technical stats and feature blocks for design and platform messaging.
• FAQ, heritage, and brand callout sections.
• Static Firebase deployment with root-level hosting configuration.

Live Demo

The published site is available at:

• https://bmw-m-concept.web.app

Project Goals

This project is intended to:

• Present the BMW M Concept Neue Klasse in a premium, cinematic format.
• Use motion and imagery as the primary communication layer.
• Keep the implementation simple, portable, and easy to deploy.
• Avoid framework overhead while preserving full control over layout and timing.
• Support direct static hosting with minimal operational maintenance.

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3
Interactivity	Vanilla JavaScript
Media	Local video and image assets
Hosting	Firebase Hosting
Deployment	Firebase CLI

Repository Structure

.
├── firebase.json
├── .firebaserc
├── index.html
├── index-old.html
├── README.md
├── bmw-resources/
│   ├── index-claude.html
│   ├── images/
│   │   ├── hero/
│   │   ├── icons/
│   │   └── random/
│   └── videos/
└── public/
    ├── index.html
    └── 404.html

Important Files

• index.html is the real site entry point.
• firebase.json configures Hosting to serve from ..
• .firebaserc binds the workspace to the Firebase project bmw-m-concept.
• bmw-resources/ contains all visual and video assets used by the page.
• public/ contains the original Firebase starter files and is not the active source of truth.
• index-old.html is a previous version of the page kept for reference.

Page Structure

The page is organized as a sequence of narrative sections.

1. Preloader

The experience begins with a full-screen video preloader. It includes:

• A progress bar.
• A skip button.
• Autoplay fallback handling.
• A transition into the main hero section.

2. Hero Section

The hero introduces the concept with:

• The BMW M / Neue Klasse / 2025 eyebrow.
• The main concept title.
• A short subtitle.
• A strip of key exterior and interior images.
• A dedicated hero video.

3. Swipe Section

The repository includes a swipe-based design exploration section in the markup. It is disabled by default and presented as a locked interaction model.

4. Depth Section

This section expands the story with:

• Floating imagery.
• Technical metrics.
• A second look at the concept.
• A dedicated 28-second video.

5. Branding Toolkit

This section documents the visual language behind the page:

• BMW M color palette.
• Typography scale.
• Design language summary.
• Editorial image panels.

6. Features

Feature cards explain the design language in narrative form, covering:

• Front-end identity.
• Proportions.
• Aerodynamics.
• Cockpit layout.
• Seating.
• Steering wheel details.

7. Statistics

This section presents concept-level performance and platform claims such as:

• Four electric motors.
• 800V architecture.
• Approximately 30% more range.
• Up to 40% faster charging.
• 50/50 weight distribution.
• 25% CO2 reduction in production.
• Customer delivery target from 2026.

8. Technology Deep Dive

The technology section covers:

• BMW M eDrive Gen6.
• M Dynamic Performance Control.
• 800V high-voltage architecture.
• Digital interface principles.
• Natural fibre materials.

9. Quote and Heritage

This section combines a design quote with heritage imagery to connect the concept to BMW M history.

10. Design Process

The design process section shows sketches and renderings that document the evolution from early studies to final reveal assets.

11. Racing Transition and Racing Hero

These sections shift the tone from concept studio to motorsport energy using:

• A drift transition video.
• A looping racing hero video.
• Ticker text.
• A mosaic of action imagery.

12. Alpina and My BMW

This block includes editorial callouts for BMW Alpina and the My BMW app.

13. FAQ

The page closes with a FAQ covering the design language, platform, concept status, production timing, and BMW Neue Klasse positioning.

Asset Layout

Video Assets

All videos live in bmw-resources/videos/:

• BMW M Concept Neue Klasse. - BMW M (1080p).mp4
• Hero - BMW M Concept Neue Klasse.mp4
• Hero 2 - BMW M Concept Neue Klasse.mp4
• Drift - BMW M Concept Neue Klasse.mp4
• Racing - BMW M Concept Neue Klasse.mp4

Image Assets

Most imagery lives in bmw-resources/images/hero/ and includes:

• Exterior views.
• Interior cockpit shots.
• Steering wheel details.
• Design sketches.
• Heritage and press imagery.

Brand and social icon assets live in bmw-resources/images/icons/.

How the Experience Works

The page is driven by plain JavaScript inside index.html. There is no router, no SPA state layer, and no backend API.

The main interaction flow is sequential:

1. The preloader video begins.
2. When the preloader ends or is skipped, the page scrolls to the hero section.
3. The hero video plays.
4. When the hero ends, the page scrolls into the depth section.
5. The depth video plays.
6. The page transitions into the drift sequence.
7. The racing hero video takes over.
8. The rest of the page continues as a static editorial narrative.

This sequencing gives the site a cinematic pacing rather than a standard scrolling landing-page feel.

Local Development

This is a static site, so there is no install step and no build step.

Recommended Local Preview

Serve the repository root with any static HTTP server. For example:

python -m http.server 4173

Then open:

http://localhost:4173

You can also use any static server or the VS Code Live Server extension.

Why Use a Local Server

Running a local server is preferable to opening index.html directly because it handles:

• Relative asset loading.
• Video playback behavior.
• Browser caching consistency.
• A preview path that matches Firebase Hosting more closely.

Deployment

The active deployment target is Firebase Hosting.

Configuration

• firebase.json sets Hosting public to ..
• .firebaserc maps the workspace to the Firebase project bmw-m-concept.

Deploy Command

firebase deploy --only hosting

Deployment Notes

• Deploying from the repository root includes index.html and bmw-resources/.
• The public/ folder still exists but is not the active deployed source.
• If you change asset paths in index.html, keep them valid relative to the repo root.

Troubleshooting

Firebase shows the starter page

Verify that firebase.json still points Hosting to . rather than public.

Images or videos do not load

Confirm the file exists in bmw-resources/ and that the path in index.html matches exactly.

The page appears blank or partially styled

Common causes are:

• Opening the file from the wrong directory.
• Broken asset paths.
• Browser cache after deployment.

Videos do not autoplay

Some browsers block autoplay unless the media is muted or the user has interacted with the page. The site includes fallback logic, but browser policy can still affect playback.

Maintenance Notes

• Keep index.html and asset paths in sync.
• Add new assets under bmw-resources/ and reference them from the root.
• Avoid reintroducing the Firebase starter public/index.html as the deployed entry point unless you intentionally migrate back to that structure.
• Preserve the timing and ordering of the video sequence if you refactor the page.

Future Improvements

Possible next steps if the site evolves:

• Split the large index.html into smaller files or modules.
• Move inline CSS and JavaScript into dedicated assets.
• Add a lightweight content pipeline if updates become frequent.
• Remove or replace the disabled swipe section if it is not part of the final product.
• Add automated validation for asset existence before deploy.

License and Attribution

This repository contains BMW M concept imagery and presentation content used for documentation and concept presentation purposes.

The BMW-related visual reference material in this project was sourced from BMW's public concept materials, including:

• https://www.bmw.de/de/neufahrzeuge/konzeptfahrzeuge/bmw-m-concept-neue-klasse.html

Before reusing, republishing, or distributing this site, confirm that you have the appropriate rights, permissions, and licenses for all third-party brand assets, logos, videos, and photography.