# pavankumar9d-rgb/era architecture

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

- Interactive diagram: https://gitdiagram.com/pavankumar9d-rgb/era
- Repository: https://github.com/pavankumar9d-rgb/era

## Overview

Dither Veil is a single-page React portrait experience. The user opens the page, then moves or clicks/taps the image to reveal its original color; a pattern control switches the dithering style. The main runtime stages are page mounting, image loading, interaction-driven reveal-mask updates, and WebGL rendering. The rendering and interaction logic live together in DitherVeil.jsx, so those nodes share its path. The referenced portrait.jpg is not present in the supplied tree; its loading is shown, but its provenance is uncertain.

Main entry points: [`src/components/DitherVeil.jsx`](https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx) (Dither Veil), [`src/main.jsx`](https://github.com/pavankumar9d-rgb/era/blob/main/src/main.jsx) (React mount), [`src/App.jsx`](https://github.com/pavankumar9d-rgb/era/blob/main/src/App.jsx) (Portrait page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_page["Page runtime"]
  node_mount["React mount<br/>[main.jsx]"]
  node_app["Portrait page<br/>[App.jsx]"]
end

subgraph group_effect["Image effect"]
  node_veil["Dither Veil<br/>[DitherVeil.jsx]"]
  node_controls["Pattern control<br/>[DitherVeil.jsx]"]
  node_reveal["Reveal interaction<br/>[DitherVeil.jsx]"]
  node_dither["Dither rendering<br/>[DitherVeil.jsx]"]
end

node_visitor(("Visitor"))
node_portrait["Portrait image"]
node_ogl["OGL"]
node_webgl["WebGL canvas"]

node_visitor -->|"opens page"| node_mount
node_mount -->|"renders"| node_app
node_app -->|"configures"| node_veil
node_veil -->|"loads image"| node_portrait
node_visitor -->|"moves or taps"| node_reveal
node_controls -->|"selects pattern"| node_dither
node_reveal -->|"updates reveal"| node_dither
node_veil -->|"creates renderer"| node_ogl
node_ogl -->|"renders canvas"| node_webgl
node_dither -->|"draws effect"| node_webgl

click node_mount "https://github.com/pavankumar9d-rgb/era/blob/main/src/main.jsx"
click node_app "https://github.com/pavankumar9d-rgb/era/blob/main/src/App.jsx"
click node_veil "https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx"
click node_controls "https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx"
click node_reveal "https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx"
click node_dither "https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx"

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_mount,node_app toneBlue
class node_veil,node_controls,node_reveal,node_dither toneAmber
class node_visitor,node_portrait,node_ogl,node_webgl toneIndigo
```

## Components

### Page runtime

- [React mount](https://github.com/pavankumar9d-rgb/era/blob/main/src/main.jsx): `src/main.jsx`
- [Portrait page](https://github.com/pavankumar9d-rgb/era/blob/main/src/App.jsx): `src/App.jsx`

### Image effect

- [Dither Veil](https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx): `src/components/DitherVeil.jsx`
- [Pattern control](https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx): `src/components/DitherVeil.jsx`
- [Reveal interaction](https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx): `src/components/DitherVeil.jsx`
- [Dither rendering](https://github.com/pavankumar9d-rgb/era/blob/main/src/components/DitherVeil.jsx): `src/components/DitherVeil.jsx`

### Other components

- **Visitor**
- **Portrait image**
- **OGL**
- **WebGL canvas**

## Connections

- Visitor → React mount: opens page
- React mount → Portrait page: renders
- Portrait page → Dither Veil: configures
- Dither Veil → Portrait image: loads image
- Visitor → Reveal interaction: moves or taps
- Pattern control → Dither rendering: selects pattern
- Reveal interaction → Dither rendering: updates reveal
- Dither Veil → OGL: creates renderer
- OGL → WebGL canvas: renders canvas
- Dither rendering → WebGL canvas: draws effect