# alagappan567/game-of-thrones architecture

> Architecture diagram of the GitHub repository alagappan567/game-of-thrones, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/alagappan567/game-of-thrones
- Repository: https://github.com/alagappan567/game-of-thrones

## Overview

This is a single-page Game of Thrones promotional landing experience. A visitor opens the home page, which dynamically loads the hero component; the hero presents the Westeros introduction and reacts to pointer movement by drawing preloaded animation frames into a canvas. It also uses GSAP for entrance animations. The frame assets and these interactions are visible in the sampled source; other behaviors in omitted portions are not mapped.

Main entry points: [`app/components/Hero.tsx`](https://github.com/alagappan567/game-of-thrones/blob/master/app/components/Hero.tsx) (Hero experience), [`app/layout.tsx`](https://github.com/alagappan567/game-of-thrones/blob/master/app/layout.tsx) (Root layout), [`app/page.tsx`](https://github.com/alagappan567/game-of-thrones/blob/master/app/page.tsx) (Home page), [`public/got hero`](https://github.com/alagappan567/game-of-thrones/tree/master/public/got%20hero) (Hero frame assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_route["Page composition"]
  node_layout["Root layout<br/>[layout.tsx]"]
  node_home["Home page<br/>[page.tsx]"]
end

subgraph group_hero["Hero experience"]
  node_hero["Hero experience<br/>[Hero.tsx]"]
  node_canvas["Animation canvas<br/>[Hero.tsx]"]
  node_frames["Hero frame assets"]
end

node_visitor(("Visitor"))
node_browser["Web browser"]
node_gsap["GSAP"]

node_visitor -->|"opens page"| node_browser
node_browser -->|"requests home"| node_layout
node_layout -->|"renders route"| node_home
node_home -->|"loads dynamically"| node_hero
node_hero -->|"preloads frames"| node_frames
node_hero -->|"draws frames"| node_canvas
node_browser -->|"sends mouse movement"| node_hero
node_hero -->|"starts timeline"| node_gsap

click node_layout "https://github.com/alagappan567/game-of-thrones/blob/master/app/layout.tsx"
click node_home "https://github.com/alagappan567/game-of-thrones/blob/master/app/page.tsx"
click node_hero "https://github.com/alagappan567/game-of-thrones/blob/master/app/components/Hero.tsx"
click node_canvas "https://github.com/alagappan567/game-of-thrones/blob/master/app/components/Hero.tsx"
click node_frames "https://github.com/alagappan567/game-of-thrones/tree/master/public/got%20hero"

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_layout,node_home,node_browser toneBlue
class node_hero,node_canvas,node_frames toneAmber
class node_visitor,node_gsap toneIndigo
```

## Components

### Page composition

- [Root layout](https://github.com/alagappan567/game-of-thrones/blob/master/app/layout.tsx): `app/layout.tsx`
- [Home page](https://github.com/alagappan567/game-of-thrones/blob/master/app/page.tsx): `app/page.tsx`

### Hero experience

- [Hero experience](https://github.com/alagappan567/game-of-thrones/blob/master/app/components/Hero.tsx): `app/components/Hero.tsx`
- [Animation canvas](https://github.com/alagappan567/game-of-thrones/blob/master/app/components/Hero.tsx): `app/components/Hero.tsx`
- [Hero frame assets](https://github.com/alagappan567/game-of-thrones/tree/master/public/got%20hero): `public/got hero`

### Other components

- **Visitor**
- **Web browser**
- **GSAP**

## Connections

- Visitor → Web browser: opens page
- Web browser → Root layout: requests home
- Root layout → Home page: renders route
- Home page → Hero experience: loads dynamically
- Hero experience → Hero frame assets: preloads frames
- Hero experience → Animation canvas: draws frames
- Web browser → Hero experience: sends mouse movement
- Hero experience → GSAP: starts timeline