AUREX MOTORS
- STUDIO
- MILWEB
- TYPE
- WEBGL EXPERIENCE
- STATUS
- LIVE
02 / THE IDEA
Cinematic experience · real-time 3D car
Premium product sites almost always end up as static catalogs: they carry none of the brand's feeling and give no reason to explore.
01 / 01
14 scenes of camera, rotation and light keyframes, scroll-directed with exponential damping.
02 / 02
The panel writes to shared state; the car lerps materials per frame.
03 / 03
Local model, local Draco decoder and Lightformer environment, with no HDRIs and no CDNs.
01020304 / UNDER THE HOOD
01The architecture splits the DOM world from the 3D world with a shared mutable state (world.ts). One ScrollTrigger per section writes (scene,…+
The architecture splits the DOM world from the 3D world with a shared mutable state (world.ts). One ScrollTrigger per section writes (scene, progress) and the camera rig reads it every frame inside the canvas, so scroll never re-renders React. The film script lives in a single file (scenes.ts), with per-scene keyframes for camera position, target and fov, car rotation and every light's intensity, interpolated with exponential damping. The damping is what turns hard cuts into dolly moves. On top, mouse parallax offsets the camera and key light, so the paint reflections follow the cursor.
02The car is the Ferrari 458 from the official three.js examples (Draco-compressed GLB, decoder served locally, zero CDN), rebranded by materi…+
The car is the Ferrari 458 from the official three.js examples (Draco-compressed GLB, decoder served locally, zero CDN), rebranded by material name at runtime: paint becomes a configurable clearcoat MeshPhysicalMaterial, yellow accents become AUREX red, head and taillights become script-driven emissives (they ignite on cue), chrome goes satin dark and the interior becomes black leather with red piping. The configurator writes straight into the shared state and the car lerps its materials per frame, so color changes feel liquid, with zero 3D-tree re-renders. The studio is fully procedural: Lightformers instead of HDRIs, a MeshReflectorMaterial floor and additive cones as volumetric shafts.
03Performance and robustness: PerformanceMonitor steps the DPR down on weak GPUs, the main canvas pauses (frameloop never) while the gallery, …+
Performance and robustness: PerformanceMonitor steps the DPR down on weak GPUs, the main canvas pauses (frameloop never) while the gallery, which owns its own canvas, covers the screen, Lenis is disabled on touch and prefers-reduced-motion swaps all damping for instant poses. Debugging produced documented gotchas: GSAP parses inline translateY(115%) as pixels (animate y, not yPercent), un-layered CSS beats any utility in Tailwind v4, and headless Chromium renders at ~1fps. A damped camera never converges in screenshots, which became a ?snap visual-testing mode.
BUILT WITH — Next.js · TypeScript · React Three Fiber · Three.js · GSAP · Lenis · TailwindCODE ↗
06 / RESULT
Lumen
