# meettomb/laferrari-3d-animated-website architecture

> Architecture diagram of the GitHub repository meettomb/laferrari-3d-animated-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/meettomb/laferrari-3d-animated-website
- Repository: https://github.com/meettomb/laferrari-3d-animated-website

## Overview

This is an interactive LaFerrari showcase site. Visitors scroll through branded, feature, tire, engine, and sound sections; a Three.js car scene animates to match selected sections, while a separate 3D-view scene lets visitors orbit the car and switch its color. Scroll behavior also controls section visibility, snapping, and progress navigation. Evidence is limited to the supplied excerpts; the HTML and styling were not sampled, so their page structure and detailed content wiring are not mapped.

Main entry points: [`index.html`](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html) (Showcase page), [`src/scroll.js`](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/scroll.js) (Scroll and navigation), [`src/index2.js`](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index2.js) (Interactive 3D viewer), [`src/main.js`](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/main.js) (Application entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_showcase["Car Showcase"]
  node_page["Showcase page<br/>[index.html]"]
  node_brand["Brand section<br/>[index.html]"]
  node_carinfo["Car information<br/>[index.html]"]
  node_features["Feature section<br/>[index.html]"]
  node_tires["Tire section<br/>[index.html]"]
  node_engine["Engine section<br/>[index.html]"]
  node_film["Film section<br/>[index.html]"]
  node_sound["Sound section<br/>[index.html]"]
  node_assets["Car models and audio"]
end

subgraph group_interaction["Visitor Interaction"]
  node_main["Application entry<br/>[main.js]"]
  node_scroll["Scroll and navigation<br/>[scroll.js]"]
  node_progress["Progress dots<br/>[scroll.js]"]
end

subgraph group_rendering["3D Rendering"]
  node_carstage["Section car animation<br/>[index.js]"]
  node_viewer["Interactive 3D viewer<br/>[index2.js]"]
  node_webgl["WebGL rendering<br/>[index.js]"]
end

node_visitor(("Visitor"))

node_visitor -->|"views"| node_page
node_main -->|"loads"| node_carstage
node_main -->|"loads"| node_viewer
node_main -->|"loads"| node_scroll
node_page -.->|"presents"| node_brand
node_page -.->|"presents"| node_carinfo
node_page -.->|"presents"| node_features
node_page -.->|"presents"| node_tires
node_page -.->|"presents"| node_engine
node_page -.->|"presents"| node_film
node_page -.->|"presents"| node_sound
node_carstage -->|"loads model"| node_assets
node_viewer -->|"loads models"| node_assets
node_scroll -->|"observes sections"| node_page
node_scroll -->|"builds and updates"| node_progress
node_scroll -->|"switches canvases"| node_viewer
node_carstage -->|"renders scene"| node_webgl
node_viewer -.->|"renders scene"| node_webgl
node_features -.->|"contains content"| node_sound

click node_page "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_brand "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_carinfo "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_features "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_tires "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_engine "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_film "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_sound "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html"
click node_assets "https://github.com/meettomb/laferrari-3d-animated-website/tree/main/public/model"
click node_main "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/main.js"
click node_scroll "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/scroll.js"
click node_progress "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/scroll.js"
click node_carstage "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index.js"
click node_viewer "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index2.js"
click node_webgl "https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_brand,node_carinfo,node_features,node_tires,node_engine,node_film,node_sound,node_assets toneBlue
class node_main,node_scroll,node_progress toneAmber
class node_carstage,node_viewer,node_webgl toneMint
class node_visitor toneIndigo
```

## Components

### Car Showcase

- [Showcase page](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Brand section](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Car information](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Feature section](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Tire section](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Engine section](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Film section](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Sound section](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/index.html): `index.html`
- [Car models and audio](https://github.com/meettomb/laferrari-3d-animated-website/tree/main/public/model): `public/model`

### Visitor Interaction

- [Application entry](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/main.js): `src/main.js`
- [Scroll and navigation](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/scroll.js): `src/scroll.js`
- [Progress dots](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/scroll.js): `src/scroll.js`

### 3D Rendering

- [Section car animation](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index.js): `src/index.js`
- [Interactive 3D viewer](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index2.js): `src/index2.js`
- [WebGL rendering](https://github.com/meettomb/laferrari-3d-animated-website/blob/main/src/index.js): `src/index.js`

### Other components

- **Visitor**

## Connections

- Visitor → Showcase page: views
- Application entry → Section car animation: loads (evidence: `src/main.js`)
- Application entry → Interactive 3D viewer: loads (evidence: `src/main.js`)
- Application entry → Scroll and navigation: loads (evidence: `src/main.js`)
- Showcase page → Brand section: presents
- Showcase page → Car information: presents
- Showcase page → Feature section: presents
- Showcase page → Tire section: presents
- Showcase page → Engine section: presents
- Showcase page → Film section: presents
- Showcase page → Sound section: presents
- Section car animation → Car models and audio: loads model (evidence: `src/index.js`)
- Interactive 3D viewer → Car models and audio: loads models (evidence: `src/index2.js`)
- Scroll and navigation → Showcase page: observes sections (evidence: `src/scroll.js`)
- Scroll and navigation → Progress dots: builds and updates (evidence: `src/scroll.js`)
- Scroll and navigation → Interactive 3D viewer: switches canvases (evidence: `src/scroll.js`)
- Section car animation → WebGL rendering: renders scene (evidence: `src/index.js`)
- Interactive 3D viewer → WebGL rendering: renders scene
- Feature section → Sound section: contains content