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

Notes

• Some auto-generated subtitle wording (about map color interpretation and the F1 reveal) may be slightly inaccurate.