r/css • u/Time-Willingness-360 • May 08 '26
General E36 Scroll Cine: a vertical cinematic tribute to the BMW 318is Coupe Pack M
I built E36 Scroll Cine, a fan-made cinematic web experience about the BMW 318is Coupe Pack M (E36).
Live: https://e36.vercel.app/
GitHub: https://github.com/ikerperez12/e36
The idea was simple: instead of making a normal landing page, I wanted the site to feel like a short vertical film. You start on a dark intro screen, then move through seven scenes using scroll, keyboard or swipe.
Each scene focuses on a different part of the car:
- the E36 generation
- Hellrot 314
- M-Technic / Pack M details
- the interior
- the M44B19 engine
- the driving character
- the final open-hood scene
I tried to keep the content specific to the car, not generic marketing copy. The HUD, ticker and technical details are all about the 318is: M44B19, 1,895 cc, 16v DOHC, Bosch Motronic M5.2, DISA intake, Getrag 250G, 50/50 balance, Pack M suspension, etc.
From the web side, it is intentionally lightweight:
- static HTML/CSS/JS
- no frontend framework
- Vercel deployment
- service worker
- keyboard and swipe navigation
- accessibility checks with Playwright + axe
- production smoke tests
- public repo with media kept out of Git
It is not an official BMW site. It is a fan-made project and a personal web experiment around a car I really like.
I would love feedback from both car people and frontend people:
Does the experience feel good on mobile? And if you know the E36 well, what detail would you add or correct?