Summary of "this website is insane (stack explained)"

High-level summary

This is a technical teardown of Lando Norris’s recently released website. The host inspects ~75k lines of code to explain how the site’s complex interactive visuals are built and why it performs well despite heavy 3D and animation work.
The host recreates smaller demos (for example, a depth-map demo) and explains how you could build similar effects.

Key technologies and how they’re used

Three.js (3D canvas)
- Primary renderer for the interactive 3D scene and the helmet model.
- Uses a glTF helmet model that rotates and has multiple texture maps applied.
Depth maps
- Create subtle 3D parallax on a photo (white = closer, dark = farther in the demo).
- Can be generated by special cameras or estimated via AI.
Texture maps on the helmet model
- Base color maps: flat designs applied to the model.
- Alpha map: used to cut out the photo.
- Roughness map: controls how different areas reflect light (e.g., visor vs buttons).
- Normal and metallic maps: control surface detail and metallic reflections.
Custom shaders
- Masking effects (helmet on/off).
- Fluid cursor “blob” effect that reacts to cursor speed/direction.
Rive
- Used to design/export interactive animations (track highlights, small animated elements, the signature).
- Rive exports .riv binaries that are played inside the 3D canvas.
Scroll handling
- Implemented in JavaScript using the Lenis library for smooth, scroll-driven animations, sticky positioning, and horizontal scroll effects (not using browser-native scroll-driven animation APIs).
Page transitions
- Custom “curtain” loader: new page is loaded in the background, document HTML is swapped behind a screen loader, then the loader animates away. This is a bespoke approach, not the Page Transition API.
DOM/CSS techniques
- CSS masking with mask-image (SVG masks) to create non-rectangular helmet/shape cutouts.
- clip-path (ellipse) used for hover reveal animations.
- Per-letter text hover: wrap each letter in a span and stagger transform transition delays.
Libraries and legacy bits
- Mix of vanilla JS, Lenis, and surprisingly jQuery + Tram (Tram last updated ~9 years ago) for some inline-style animations.

Performance analysis and optimizations

The site feels smooth despite heavy visuals (host couldn’t easily drop FPS on an M1 Mac).
Contributing factors:
- Minimal use of expensive CSS blurs/filters and drop shadows.
- Flat design with few overlapping filters and limited use of position: absolute that forces layout reflows.
- Animations are mostly transform-based (GPU-friendly).
- Efficient Three.js usage and careful layer separation (multiple maps, selective rendering).
The host demonstrates how to monitor FPS in dev tools while interacting.

UI/UX effects and implementation notes

Helmet thumbnails: layered masks and multiple mask variations; hover reveals photographic image of Lando.
Text animations: per-letter spans with incremental transition delays (demo referenced on the host’s Syntax YouTube channel).
Signature animation: painted/scrubbed based on scroll position (implemented with Rive rather than SVG offset-path).
Track highlights: Rive-designed animations exported to .riv and rendered in the 3D canvas.
Page transitions: background loading with curtain masking; developer tools show the transition timing details.

Easter eggs and small touches

Loader text reads: “Load Norris.”

Console messages are styled (using %c) and display “Lando Norris” with coloring.

The host teases another reveal accessible by pressing F1 on the website (subtitle captions may have been slightly inaccurate).

Guides, demos, and tutorials mentioned

Depth-map demo: shows how to estimate depth from a photo and feed it to a 3D canvas.
Per-letter text animation tutorial: wrap letters and animate transforms with incremental delays (Syntax YouTube channel).
The video promises breakdowns and code inspection showing how you could build similar effects yourself.

Files and formats observed

Helmet model: glTF
Rive animations: .riv binaries
Many layered texture maps: base color, roughness, normal, metallic, alpha

Main speakers and sources

Video host: web developer/content creator conducting the teardown (references their demos and Syntax YouTube channel).
Tools/tech referenced: Three.js, Lenis, Rive, glTF, jQuery, Tram