# i-am-paradox/stark-holographic-hud architecture

> Architecture diagram of the GitHub repository i-am-paradox/stark-holographic-hud, 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/i-am-paradox/stark-holographic-hud
- Repository: https://github.com/i-am-paradox/stark-holographic-hud

## Overview

The root README describes a browser-based hand-tracking particle HUD, launched from `hand_tracking.html`. Its documented workflow is camera capture, gesture recognition, then particle-field control, with manual HUD controls as an alternate input. The HTML implementation was not sampled, so the graph reflects documented capabilities and does not assert internal call wiring. The separate `FFCT/` React foundation site is present in the tree but is not the product described by the root README.

Main entry points: [`hand_tracking.html`](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html) (Arc controls)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_boot["HUD Experience"]
  node_hud["HUD app<br/>[hand_tracking.html]"]
  node_boot_sequence["Boot sequence<br/>[hand_tracking.html]"]
  node_arc_controls["Arc controls<br/>[hand_tracking.html]"]
end

subgraph group_tracking["Gesture Control"]
  node_camera(("Camera"))
  node_hand_tracking["Hand tracking<br/>[hand_tracking.html]"]
  node_gesture_recognition["Gesture recognition<br/>[hand_tracking.html]"]
  node_gesture_controls["Gesture controls<br/>[hand_tracking.html]"]
  node_manual_controls["Manual controls<br/>[hand_tracking.html]"]
  node_shape_select["Shape selection<br/>[hand_tracking.html]"]
  node_wavelength["Wavelength control<br/>[hand_tracking.html]"]
  node_density_control["Density control<br/>[hand_tracking.html]"]
  node_mediapipe["MediaPipe Hands"]
end

subgraph group_display["Particle Display"]
  node_particle_field["Particle field<br/>[hand_tracking.html]"]
  node_threejs["Three.js renderer"]
end

node_user(("HUD user"))

node_user -->|"opens"| node_hud
node_hud -->|"starts"| node_boot_sequence
node_hud -->|"presents"| node_arc_controls
node_hud -->|"initializes"| node_hand_tracking
node_camera -->|"provides video"| node_hand_tracking
node_hand_tracking -->|"tracks hands"| node_mediapipe
node_hand_tracking -->|"supplies landmarks"| node_gesture_recognition
node_gesture_recognition -->|"identifies gestures"| node_gesture_controls
node_user -->|"selects controls"| node_arc_controls
node_arc_controls -->|"selects formation"| node_shape_select
node_arc_controls -->|"adjusts color"| node_wavelength
node_arc_controls -->|"sets scale"| node_density_control
node_gesture_controls -->|"changes scale"| node_particle_field
node_shape_select -->|"changes formation"| node_particle_field
node_wavelength -->|"sets color"| node_particle_field
node_density_control -->|"sets scale"| node_particle_field
node_particle_field -->|"renders in 3D"| node_threejs

click node_hud "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_boot_sequence "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_arc_controls "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_hand_tracking "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_gesture_recognition "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_gesture_controls "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_manual_controls "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_shape_select "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_wavelength "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_density_control "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"
click node_particle_field "https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html"

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_hud,node_boot_sequence,node_arc_controls,node_user toneBlue
class node_camera,node_hand_tracking,node_gesture_recognition,node_gesture_controls,node_manual_controls,node_shape_select,node_wavelength,node_density_control,node_mediapipe toneAmber
class node_particle_field,node_threejs toneMint
```

## Components

### HUD Experience

- [HUD app](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Boot sequence](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Arc controls](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`

### Gesture Control

- **Camera**
- [Hand tracking](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Gesture recognition](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Gesture controls](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Manual controls](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Shape selection](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Wavelength control](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- [Density control](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- **MediaPipe Hands**

### Particle Display

- [Particle field](https://github.com/i-am-paradox/stark-holographic-hud/blob/main/hand_tracking.html): `hand_tracking.html`
- **Three.js renderer**

### Other components

- **HUD user**

## Connections

- HUD user → HUD app: opens
- HUD app → Boot sequence: starts
- HUD app → Arc controls: presents
- HUD app → Hand tracking: initializes
- Camera → Hand tracking: provides video
- Hand tracking → MediaPipe Hands: tracks hands
- Hand tracking → Gesture recognition: supplies landmarks
- Gesture recognition → Gesture controls: identifies gestures
- HUD user → Arc controls: selects controls
- Arc controls → Shape selection: selects formation
- Arc controls → Wavelength control: adjusts color
- Arc controls → Density control: sets scale
- Gesture controls → Particle field: changes scale
- Shape selection → Particle field: changes formation
- Wavelength control → Particle field: sets color
- Density control → Particle field: sets scale
- Particle field → Three.js renderer: renders in 3D