# viktorbalko/tagheuer-scrolling architecture

> Architecture diagram of the GitHub repository viktorbalko/tagheuer-scrolling, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-01). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/viktorbalko/tagheuer-scrolling
- Repository: https://github.com/viktorbalko/tagheuer-scrolling

## Overview

#### Purpose and Entry Point
This is a static promotional scrolling experience for Tag Heuer. The browser entry point is `index.html`, which loads page structure, styling, imagery, and client-side animation behavior.

#### Presentation Layer
The document layout and visual sections are defined in `index.html`. Site-wide visual treatment, responsive layout, typography rules, and positioning for scroll scenes are centralized in `css/styles.css`.

Key paths:
- `index.html`
- `css/styles.css`

#### Scroll and Animation Control
Interactive behavior is implemented in `js/app.js`. It is the primary control boundary between static markup/CSS and runtime animation: it likely selects page elements, observes scroll position, and coordinates animation timelines.

Key path:
- `js/app.js`

#### Animation Runtime
GSAP is vendored under `libs/gsap` and is the material animation dependency. The application script should use this local runtime rather than a backend API or package-managed dependency. The repository has no indicated server, build pipeline, or database layer.

Key paths:
- `libs/gsap`
- `js/app.js`

#### Asset Composition Flow
The page composes visual scenes from static assets in `images`, organized by likely placement or animation role: hero content and left/right scene assets. Browser loading flows from `index.html` references to these image files, while CSS and JavaScript place or animate them.

Key paths:
- `images/hero`
- `images/left`
- `images/right`

#### Runtime and Deployment Boundary
The project runs entirely in a web browser as static HTML, CSS, JavaScript, fonts, images, and local libraries. It can be served by any static-file host; no external service integrations, API boundaries, authentication, or persistent data stores are represented.

Key paths:
- `index.html`
- `fonts`
- `css/styles.css`

Main entry points: [`index.html`](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/index.html) (Page Entry), [`js/app.js`](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/js/app.js) (Animation Controller), [`css/styles.css`](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/css/styles.css) (Visual Styles), [`images/hero`](https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/hero) (Hero Images)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page Runtime"]
  node_browser(("Browser<br/>runtime"))
  node_html["Page Entry<br/>HTML document<br/>[index.html]"]
  node_sections["Scroll Scenes<br/>page sections<br/>[index.html]"]
  node_styles["Visual Styles<br/>CSS<br/>[styles.css]"]
  node_app["Animation Controller<br/>client script<br/>[app.js]"]
  node_scroll(("Scroll Input<br/>browser event"))
  node_gsap["GSAP Runtime<br/>vendored library"]
end

subgraph group_assets["Static Assets"]
  node_hero["Hero Images<br/>image assets"]
  node_left["Left Scene Images<br/>image assets"]
  node_right["Right Scene Images<br/>image assets"]
  node_fonts["Fonts<br/>font assets"]
end

node_host{{"Static File Host<br/>deployment"}}

node_host -->|"serves static files"| node_browser
node_browser -->|"loads"| node_html
node_html -->|"defines"| node_sections
node_html -->|"loads"| node_styles
node_html -->|"loads"| node_app
node_html -->|"references"| node_hero
node_html -->|"references"| node_left
node_html -->|"references"| node_right
node_styles -->|"uses"| node_fonts
node_styles -->|"lays out"| node_sections
node_app -->|"uses"| node_gsap
node_scroll -->|"drives"| node_app
node_app -->|"animates"| node_sections
node_app -.->|"animates"| node_hero
node_app -.->|"animates"| node_left
node_app -.->|"animates"| node_right

click node_html "https://github.com/viktorbalko/tagheuer-scrolling/blob/main/index.html"
click node_sections "https://github.com/viktorbalko/tagheuer-scrolling/blob/main/index.html"
click node_styles "https://github.com/viktorbalko/tagheuer-scrolling/blob/main/css/styles.css"
click node_app "https://github.com/viktorbalko/tagheuer-scrolling/blob/main/js/app.js"
click node_gsap "https://github.com/viktorbalko/tagheuer-scrolling/tree/main/libs/gsap"
click node_hero "https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/hero"
click node_left "https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/left"
click node_right "https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/right"
click node_fonts "https://github.com/viktorbalko/tagheuer-scrolling/tree/main/fonts"

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_browser,node_html,node_sections,node_styles,node_app,node_scroll,node_gsap toneBlue
class node_hero,node_left,node_right,node_fonts toneAmber
class node_host toneNeutral
```

## Components

### Page Runtime

Browser-side promotional experience.

- **Browser**: runtime · Executes the static experience.
- [Page Entry](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/index.html): HTML document · Defines document structure and asset references. · `index.html`
- [Scroll Scenes](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/index.html): page sections · Promotional layout targets for styling and animation. · `index.html`
- [Visual Styles](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/css/styles.css): CSS · Centralizes responsive layout, typography, and scene positioning. · `css/styles.css`
- [Animation Controller](https://github.com/viktorbalko/tagheuer-scrolling/blob/main/js/app.js): client script · Coordinates element selection, scroll state, and timelines. · `js/app.js`
- **Scroll Input**: browser event
- [GSAP Runtime](https://github.com/viktorbalko/tagheuer-scrolling/tree/main/libs/gsap): vendored library · Local animation runtime used by the controller. · `libs/gsap`

### Static Assets

Visual and typography resources loaded by the page.

- [Hero Images](https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/hero): image assets · `images/hero`
- [Left Scene Images](https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/left): image assets · `images/left`
- [Right Scene Images](https://github.com/viktorbalko/tagheuer-scrolling/tree/main/images/right): image assets · `images/right`
- [Fonts](https://github.com/viktorbalko/tagheuer-scrolling/tree/main/fonts): font assets · `fonts`

### Other components

- **Static File Host**: deployment · Serves repository files without backend services.

## Connections

- Static File Host → Browser: serves static files
- Browser → Page Entry: loads
- Page Entry → Scroll Scenes: defines
- Page Entry → Visual Styles: loads
- Page Entry → Animation Controller: loads
- Page Entry → Hero Images: references
- Page Entry → Left Scene Images: references
- Page Entry → Right Scene Images: references
- Visual Styles → Fonts: uses
- Visual Styles → Scroll Scenes: lays out
- Animation Controller → GSAP Runtime: uses
- Scroll Input → Animation Controller: drives
- Animation Controller → Scroll Scenes: animates
- Animation Controller → Hero Images: animates
- Animation Controller → Left Scene Images: animates
- Animation Controller → Right Scene Images: animates