An interactive 3D encyclopedia of Formula 1's great teams — their machines, their people, their history, and above all their wars with each other. Unofficial fan project.
- Vanilla Three.js + Vite + TypeScript — one renderer, one scene, forever. Navigation is a camera tween plus a DOM overlay swap.
- GSAP for camera/theme tweens and the duel roll-in timeline.
- No router library, no state library, no CMS. All content lives in
src/data/grid.jsonand ships in the bundle.
npm install
npm run dev # dev server
npm run build # typecheck + production build to dist/
npm run preview # serve the production build| Path | Surface |
|---|---|
/ |
The Grid — all cars in formation. Hover pulls a car forward; click flies to the team. |
/team/:id |
Team deep-dive — scroll drives the camera: orbit → cockpit → top-down → profile. |
/web |
The Rivalry Web — teams as nodes, feuds as edges. Intra-team wars render as loops. |
/rivalry/:id |
Rivalry duel — two cars nose-to-nose, chapters scroll through the feud. |
Team ids: ferrari, redbull, mercedes, mclaren. Rivalry ids: redbull-mercedes,
ferrari-mclaren, mclaren-senna-prost, ferrari-redbull, mercedes-intra, redbull-intra.
- One scene graph.
src/three/core.tsowns the renderer, lighting rig, and environment. The hub, rivalry web, and duel each live in their own group in distinct regions of one world; "pages" are camera stations (src/three/cameraCtl.ts). - Cars are code.
src/three/car.tsbuilds a stylized low-poly car (~20 meshes) from shared primitive geometries; only materials differ per team. No glTF, no loaders, no loading screen. - One source of truth for color. The
Liveryobject ingrid.jsondrives both the 3D materials and the CSS custom properties.src/ui/theme.tstweens them together, synced to the camera move. - Accessible by construction. All content is DOM overlay (canvas is
aria-hidden); every hover interaction has a focus/click equivalent;prefers-reduced-motionswaps tweens for cuts.
Static build, zero runtime dependencies. vercel.json contains the SPA rewrite so deep links
(/team/ferrari, /rivalry/redbull-mercedes) resolve.
Team pages can show a high-detail glTF car in place of the stylized one (src/three/heroCar.ts).
The model loads lazily with a progress chip; the primitive car is the instant fallback, so the
hub never waits on a download. Current models (optimized copies live in public/models/, raw
downloads stay in the git-ignored assets-src/):
All optimized with:
npx @gltf-transform/cli optimize <in> public/models/<out>.glb --compress meshopt --texture-compress webp --texture-size 1024 --simplify-ratio 0.12 --simplify-error 0.01
- Ferrari — "Scuderia Ferrari F1 SF23 2023" by Redgrund (Sketchfab), CC Attribution. 48.8 MB → 1.19 MB, ~85k tris, 1 draw call.
- Red Bull — "F1-2025 Redbull RB21" by Abu Saif (Sketchfab), CC Attribution. 25.9 MB → 1.47 MB, ~37k tris, 24 draw calls (multi-material).
- Mercedes — "AMG F1 W15 2024" by vecarz (Sketchfab), CC Attribution-NonCommercial. 14.4 MB → 437 KB, ~22k tris, 1 draw call. NC: must be removed if the project becomes commercial.
- McLaren — "McLaren MCL60 F1 2023" by Redgrund (Sketchfab), CC Attribution. 46.2 MB → 1.12 MB.
- Aston Martin — "Aston Martin F1 AMR23 2023" by Redgrund (Sketchfab), CC Attribution. 34.7 MB → 978 KB.
Attribution renders in each team's DNA section — keep it if you replace a model. All five current constructors now carry a hero model.
Statistics are through the end of the 2024 season and should be re-verified before publishing updates — see the note rendered in each team's DNA section.
Unofficial fan project. Not affiliated with Formula 1, the FIA, or any team. F1 and team names are trademarks of their respective owners.