McLaren 750S: Reimagined

Inspiration

We wanted to create something more interesting than a traditional car website. Most car websites mainly show images, specifications, and a few animations, but we wanted the website itself to feel like an experience.

We chose the McLaren 750S because of its aggressive design, performance-focused engineering, and strong visual identity. We were inspired by automotive commercials and wanted to bring that cinematic feeling to the browser.

Our idea was to make scrolling part of the experience. Instead of simply scrolling through sections, the user gradually discovers the car through cinematic visuals, from its exterior and engine to its aerodynamics, wheels, interior, and performance.

What it does

McLaren 750S: Reimagined is an interactive automotive website that combines cinematic scroll-based visuals with real-time 3D.

The main experience uses scrolling to control a sequence of cinematic frames. As the user moves through the page, the car moves through different scenes and reveals different aspects of the vehicle.

We also added interactive sections for the car's specifications, technology, performance, and design. At the end, users can interact with a real-time 3D model of the McLaren 750S, where they can rotate and zoom the car to explore it from different angles.

Our aim was to make the user feel like they are exploring the car rather than simply browsing a website.

How we built it

The website was built using HTML, CSS, and JavaScript. For the cinematic scroll experience, we used an HTML Canvas to render individual frames based on the user's scroll position.

We processed the video sequences using Python and OpenCV and converted them into optimized WebP frames for the web. Instead of loading all the frames at once, we implemented a sliding-window approach that loads frames around the user's current position and removes frames that are no longer needed. We also used ImageBitmap to make image decoding and rendering more efficient.

For the interactive 3D section, we used Three.js and WebGL to display the McLaren 750S model in real time.

GSAP and ScrollTrigger were used for the website's animations and scroll-based interactions. We also used CSS techniques such as responsive typography, backdrop effects, transitions, and hover interactions to create a consistent visual style.

Challenges we ran into

One of our biggest challenges was making the cinematic scrolling smooth while working with a large number of high-resolution frames. Loading all the frames at once would require a lot of memory and could make the website slow or unresponsive.

We had to experiment with frame compression, loading strategies, image decoding, and memory management to find a good balance between visual quality and performance.

Another challenge was making the different cinematic scenes feel connected. Since the website contains multiple videos and camera angles, we had to carefully match the lighting, colors, car appearance, camera movement, and transitions so that the experience felt like one continuous journey.

We also had to make sure that the real-time 3D model worked smoothly alongside the cinematic sections.

Accomplishments that we're proud of

We are most proud of turning a collection of videos and a 3D model into one continuous interactive experience.

Instead of using a normal video player, we created a custom scroll-controlled frame system that gives the user direct control over the cinematic sequence. We also managed to combine this with a real-time Three.js 3D model without making the experience feel disconnected.

We are also proud of the overall visual design and the effort we put into the small details, including transitions, typography, hover effects, specifications, and the overall dark red automotive theme.

Most importantly, we built the project with the goal of making the first few seconds memorable and keeping that feeling throughout the website.

What we learned

This project taught us that creating a good web experience is not only about adding more features or technologies. The way those technologies work together and how the user experiences them is much more important.

We learned more about Canvas rendering, image sequences, browser memory management, WebP optimization, JavaScript animation, GSAP, and real-time 3D with Three.js and WebGL.

We also learned how difficult it can be to balance visual quality and performance. A website can look great but still feel bad if it is slow, so optimization became an important part of our development process.

What's next for McLaren 750S: Reimagined

We would like to take the experience further by making the 3D section more interactive and adding clickable areas on the car that allow users to explore specific components such as the wheels, brakes, aerodynamics, interior, and engine.

We could also add a car configuration experience where users can change colors, wheels, and other visual options in real time.

In the future, the same concept could be expanded beyond the McLaren 750S into an interactive platform for exploring different performance cars, where each vehicle has its own cinematic story and interactive 3D experience.