# pranavtechie/deadlock-web architecture

> Architecture diagram of the GitHub repository pranavtechie/deadlock-web, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/pranavtechie/deadlock-web
- Repository: https://github.com/pranavtechie/deadlock-web

## Overview

Deadlock is a static product landing page for a local-first Windows encrypted vault, not the vault application itself. Its visitor workflow is to explore the vault, recovery and backup explanations, then download the installer. The sampled runtime centers on deferred page hydration, motion and scroll interactions, and viewport-triggered scenes. The README documents product capabilities and performance behavior, but the sampled source does not implement vault encryption, file management, or backup verification; those capabilities are represented only as landing-page scenes or download information.

Main entry points: [`src/app.ts`](https://github.com/pranavtechie/deadlock-web/blob/main/src/app.ts) (App Setup), [`src/scenes/index.ts`](https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/index.ts) (Scene Loader), [`src/motion/reveal.ts`](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/reveal.ts) (Scroll Reveals), [`src/motion/menu.ts`](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/menu.ts) (Mobile Menu)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Landing Page Runtime"]
  node_hydration["Deferred Hydration<br/>[main.ts]"]
  node_app["App Setup<br/>[app.ts]"]
  node_styles["Page Styling<br/>[main.css]"]
end

subgraph group_motion["Motion Interactions"]
  node_anchors["Anchor Navigation<br/>[anchors.ts]"]
  node_background["Background Effects<br/>[background.ts]"]
  node_environment["Motion Environment<br/>[env.ts]"]
  node_faq["FAQ Interaction<br/>[faq.ts]"]
  node_hero["Hero Effects<br/>[hero.ts]"]
  node_menu["Mobile Menu<br/>[menu.ts]"]
  node_navigation["Navigation Effects<br/>[nav.ts]"]
  node_pointer["Pointer Effects<br/>[pointer.ts]"]
  node_reveals["Scroll Reveals<br/>[reveal.ts]"]
  node_smooth["Smooth Scrolling<br/>[smooth.ts]"]
  node_steps["How It Works<br/>[steps.ts]"]
end

subgraph group_scenes["Product Scenes"]
  node_scenes["Scene Loader<br/>[index.ts]"]
  node_vault["Vault Scene<br/>[vault.ts]"]
  node_recovery["Recovery Scene<br/>[recovery.ts]"]
  node_backup["Backup Scene<br/>[backup.ts]"]
end

subgraph group_download["Download Information"]
  node_config["Installer Facts<br/>[config.ts]"]
  node_installer_metadata["Installer Metadata<br/>[installer.json]"]
  node_installer["Windows Installer"]
end

node_visitor(("Visitor"))
node_browser["Browser"]

node_visitor -->|"views page"| node_browser
node_browser -->|"triggers hydration"| node_hydration
node_hydration -->|"loads after interaction"| node_app
node_app -->|"initializes"| node_anchors
node_app -->|"initializes"| node_background
node_app -->|"checks settings"| node_environment
node_app -->|"initializes"| node_faq
node_app -->|"initializes"| node_hero
node_app -->|"initializes"| node_menu
node_app -->|"initializes"| node_navigation
node_app -->|"initializes"| node_pointer
node_app -->|"initializes"| node_reveals
node_app -->|"initializes"| node_smooth
node_app -->|"initializes"| node_steps
node_app -->|"initializes"| node_scenes
node_menu -->|"navigates with"| node_anchors
node_menu -->|"pauses and resumes"| node_smooth
node_anchors -->|"uses scrolling"| node_smooth
node_reveals -->|"checks motion preference"| node_environment
node_reveals -->|"splits text with"| node_browser
node_steps -->|"draws step strokes with"| node_reveals
node_scenes -->|"loads on visibility"| node_vault
node_scenes -->|"loads on visibility"| node_recovery
node_scenes -->|"loads on visibility"| node_backup
node_config -->|"reads facts from"| node_installer_metadata
node_visitor -->|"downloads installer"| node_installer
node_browser -.->|"renders styling"| node_styles

click node_hydration "https://github.com/pranavtechie/deadlock-web/blob/main/src/main.ts"
click node_app "https://github.com/pranavtechie/deadlock-web/blob/main/src/app.ts"
click node_styles "https://github.com/pranavtechie/deadlock-web/blob/main/src/styles/main.css"
click node_anchors "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/anchors.ts"
click node_background "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/background.ts"
click node_environment "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/env.ts"
click node_faq "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/faq.ts"
click node_hero "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/hero.ts"
click node_menu "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/menu.ts"
click node_navigation "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/nav.ts"
click node_pointer "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/pointer.ts"
click node_reveals "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/reveal.ts"
click node_smooth "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/smooth.ts"
click node_steps "https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/steps.ts"
click node_scenes "https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/index.ts"
click node_vault "https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/vault.ts"
click node_recovery "https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/recovery.ts"
click node_backup "https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/backup.ts"
click node_config "https://github.com/pranavtechie/deadlock-web/blob/main/src/config.ts"
click node_installer_metadata "https://github.com/pranavtechie/deadlock-web/blob/main/src/generated/installer.json"
click node_installer "https://github.com/pranavtechie/deadlock-web/blob/main/public/Deadlock-Setup-0.1.0.exe"

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_hydration,node_app,node_styles,node_browser toneBlue
class node_anchors,node_background,node_environment,node_faq,node_hero,node_menu,node_navigation,node_pointer,node_reveals,node_smooth,node_steps toneAmber
class node_scenes,node_vault,node_recovery,node_backup toneMint
class node_config,node_installer_metadata,node_installer toneRose
class node_visitor toneIndigo
```

## Components

### Landing Page Runtime

- [Deferred Hydration](https://github.com/pranavtechie/deadlock-web/blob/main/src/main.ts): `src/main.ts`
- [App Setup](https://github.com/pranavtechie/deadlock-web/blob/main/src/app.ts): `src/app.ts`
- [Page Styling](https://github.com/pranavtechie/deadlock-web/blob/main/src/styles/main.css): `src/styles/main.css`

### Motion Interactions

- [Anchor Navigation](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/anchors.ts): `src/motion/anchors.ts`
- [Background Effects](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/background.ts): `src/motion/background.ts`
- [Motion Environment](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/env.ts): `src/motion/env.ts`
- [FAQ Interaction](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/faq.ts): `src/motion/faq.ts`
- [Hero Effects](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/hero.ts): `src/motion/hero.ts`
- [Mobile Menu](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/menu.ts): `src/motion/menu.ts`
- [Navigation Effects](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/nav.ts): `src/motion/nav.ts`
- [Pointer Effects](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/pointer.ts): `src/motion/pointer.ts`
- [Scroll Reveals](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/reveal.ts): `src/motion/reveal.ts`
- [Smooth Scrolling](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/smooth.ts): `src/motion/smooth.ts`
- [How It Works](https://github.com/pranavtechie/deadlock-web/blob/main/src/motion/steps.ts): `src/motion/steps.ts`

### Product Scenes

- [Scene Loader](https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/index.ts): `src/scenes/index.ts`
- [Vault Scene](https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/vault.ts): `src/scenes/vault.ts`
- [Recovery Scene](https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/recovery.ts): `src/scenes/recovery.ts`
- [Backup Scene](https://github.com/pranavtechie/deadlock-web/blob/main/src/scenes/backup.ts): `src/scenes/backup.ts`

### Download Information

- [Installer Facts](https://github.com/pranavtechie/deadlock-web/blob/main/src/config.ts): `src/config.ts`
- [Installer Metadata](https://github.com/pranavtechie/deadlock-web/blob/main/src/generated/installer.json): `src/generated/installer.json`
- [Windows Installer](https://github.com/pranavtechie/deadlock-web/blob/main/public/Deadlock-Setup-0.1.0.exe): `public/Deadlock-Setup-0.1.0.exe`

### Other components

- **Visitor**
- **Browser**

## Connections

- Visitor → Browser: views page (evidence: `README.md`)
- Browser → Deferred Hydration: triggers hydration (evidence: `README.md`)
- Deferred Hydration → App Setup: loads after interaction (evidence: `README.md`)
- App Setup → Anchor Navigation: initializes (evidence: `src/app.ts`)
- App Setup → Background Effects: initializes (evidence: `src/app.ts`)
- App Setup → Motion Environment: checks settings (evidence: `src/app.ts`)
- App Setup → FAQ Interaction: initializes (evidence: `src/app.ts`)
- App Setup → Hero Effects: initializes (evidence: `src/app.ts`)
- App Setup → Mobile Menu: initializes (evidence: `src/app.ts`)
- App Setup → Navigation Effects: initializes (evidence: `src/app.ts`)
- App Setup → Pointer Effects: initializes (evidence: `src/app.ts`)
- App Setup → Scroll Reveals: initializes (evidence: `src/app.ts`)
- App Setup → Smooth Scrolling: initializes (evidence: `src/app.ts`)
- App Setup → How It Works: initializes (evidence: `src/app.ts`)
- App Setup → Scene Loader: initializes (evidence: `src/app.ts`)
- Mobile Menu → Anchor Navigation: navigates with (evidence: `src/motion/menu.ts`)
- Mobile Menu → Smooth Scrolling: pauses and resumes (evidence: `src/motion/menu.ts`)
- Anchor Navigation → Smooth Scrolling: uses scrolling (evidence: `src/motion/anchors.ts`)
- Scroll Reveals → Motion Environment: checks motion preference (evidence: `src/motion/reveal.ts`)
- Scroll Reveals → Browser: splits text with (evidence: `src/motion/reveal.ts`)
- How It Works → Scroll Reveals: draws step strokes with (evidence: `src/motion/steps.ts`)
- Scene Loader → Vault Scene: loads on visibility (evidence: `src/scenes/index.ts`)
- Scene Loader → Recovery Scene: loads on visibility (evidence: `src/scenes/index.ts`)
- Scene Loader → Backup Scene: loads on visibility (evidence: `src/scenes/index.ts`)
- Installer Facts → Installer Metadata: reads facts from (evidence: `src/config.ts`)
- Visitor → Windows Installer: downloads installer (evidence: `README.md`)
- Browser → Page Styling: renders styling (evidence: `README.md`)