VANTAGE

Vite + TypeScript · Three.js studio car · GSAP ScrollTrigger · Lenis smooth scroll · MeshPhysicalMaterial clearcoat · device LOD

A car drawn in light — a scroll-driven 3D walkaround of a 2026 concept car rendered as real glTF geometry lit in a virtual studio, not stock images. Five scroll sections (Silhouette reveal, aerodynamic Exterior, Engine / powertrain teardown, a live Paint clearcoat configurator, and Specs / telemetry) tie a camera dolly and part reveals to scroll progress. Three.js drives a MeshPhysicalMaterial clearcoat paint shader and studio HDRI lighting through an EffectComposer, GSAP ScrollTrigger + Lenis smooth scroll choreograph the descent, and a device-tier LOD ladder keeps it real-time on mobile. No backend — the spec sheet is compiled into a static Vite build served from Vercel's CDN.

Generated 15 Jun 2026 · 15 files · 9 components · 3 flows

File Architecture

The full source tree as a layered graph — every file with its role, imports, exports and reverse dependencies.

System Design

Runtime topology across the five zones — client, edge, application, data and external services.

Flow Graph

The five most significant application flows, step by step — startup, auth, write, read and error recovery.

Technology

ComponentTechnologyVersionSource of Detection
Rendererthree (WebGLRenderer + EffectComposer)^0.166.1package.json
Motiongsap (ScrollTrigger)^3.12.5package.json
Smooth scrolllenis^1.1.13package.json
LanguageTypeScript (strict)^5.5.4package.json
Bundler / dev serverVite^5.4.11package.json
MaterialsMeshPhysicalMaterial clearcoat + GLSL/PBRsrc/paint.ts
Model loaderGLTFLoader + DRACO + device LOD swapsrc/car.ts
HostingVercel static + SPA rewritesvercel.json