# mypersonal821/gravity architecture

> Architecture diagram of the GitHub repository mypersonal821/gravity, 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/mypersonal821/gravity
- Repository: https://github.com/mypersonal821/gravity

## Overview

This is a React birthday-gift unboxing experience: visitors enter a themed room, open a 3D gift box, discover gifts in sequence, view an individual reveal, optionally capture or upload a memory, and browse a photo collage. App.jsx owns page state and progression; the feature components implement the scenes and interactions. The README describes only a Vite starter, so the product workflow is inferred from sampled source. Some component internals and wiring are omitted where excerpts were incomplete.

Main entry points: [`src/App.jsx`](https://github.com/mypersonal821/gravity/blob/main/src/App.jsx) (App coordinator), [`src/components/GiftRevealStandalone.jsx`](https://github.com/mypersonal821/gravity/blob/main/src/components/GiftRevealStandalone.jsx) (Gift reveal), [`src/components/GiftsPage.jsx`](https://github.com/mypersonal821/gravity/blob/main/src/components/GiftsPage.jsx) (Gift discovery), [`src/components/WebcamCapture.jsx`](https://github.com/mypersonal821/gravity/blob/main/src/components/WebcamCapture.jsx) (Memory capture)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Experience flow"]
  node_app["App coordinator<br/>[App.jsx]"]
end

subgraph group_scenes["3D scenes"]
  node_room["Room experience<br/>[RoomExperience.jsx]"]
  node_landing["Landing overlay<br/>[Overlay.jsx]"]
  node_giftbox["3D gift box<br/>[GiftBox.jsx]"]
  node_giftspage["Gift discovery<br/>[GiftsPage.jsx]"]
  node_reveal["Gift reveal"]
  node_final["Final gift picture"]
end

subgraph group_memories["Memory capture"]
  node_memories["Memory capture<br/>[WebcamCapture.jsx]"]
  node_collage["Heart photo collage<br/>[HeartCollage.jsx]"]
end

subgraph group_assets["Gift assets"]
  node_models["3D gift models"]
end

node_visitor(("Visitor"))
node_browsercam(("Browser camera"))
node_drive(("Google Apps Script"))

node_visitor -->|"opens experience"| node_app
node_app -->|"renders room"| node_room
node_room -->|"starts landing"| node_app
node_app -->|"renders landing"| node_landing
node_app -->|"renders box"| node_giftbox
node_landing -->|"changes page"| node_app
node_app -->|"renders discovery"| node_giftspage
node_giftspage -->|"selects gift"| node_app
node_app -->|"renders selected gift"| node_reveal
node_reveal -->|"reads gift data"| node_giftspage
node_reveal -->|"opens capture"| node_memories
node_memories -->|"requests camera"| node_browsercam
node_memories -.->|"posts photo"| node_drive
node_memories -->|"returns captured image"| node_reveal
node_reveal -->|"saves memory"| node_app
node_app -->|"renders photos"| node_collage
node_giftspage -->|"shows finale"| node_final
node_giftbox -->|"loads models"| node_models
node_giftspage -->|"loads models"| node_models
node_reveal -->|"loads selected model"| node_models

click node_app "https://github.com/mypersonal821/gravity/blob/main/src/App.jsx"
click node_room "https://github.com/mypersonal821/gravity/blob/main/src/components/RoomExperience.jsx"
click node_landing "https://github.com/mypersonal821/gravity/blob/main/src/components/Overlay.jsx"
click node_giftbox "https://github.com/mypersonal821/gravity/blob/main/src/components/GiftBox.jsx"
click node_giftspage "https://github.com/mypersonal821/gravity/blob/main/src/components/GiftsPage.jsx"
click node_reveal "https://github.com/mypersonal821/gravity/blob/main/src/components/GiftRevealStandalone.jsx"
click node_final "https://github.com/mypersonal821/gravity/blob/main/src/components/FinalPremiumPicture.jsx"
click node_memories "https://github.com/mypersonal821/gravity/blob/main/src/components/WebcamCapture.jsx"
click node_collage "https://github.com/mypersonal821/gravity/blob/main/src/components/HeartCollage.jsx"
click node_models "https://github.com/mypersonal821/gravity/tree/main/public/models"

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_app,node_browsercam toneBlue
class node_room,node_landing,node_giftbox,node_giftspage,node_reveal,node_final toneAmber
class node_memories,node_collage toneMint
class node_models toneRose
class node_visitor,node_drive toneIndigo
```

## Components

### Experience flow

- [App coordinator](https://github.com/mypersonal821/gravity/blob/main/src/App.jsx): `src/App.jsx`

### 3D scenes

- [Room experience](https://github.com/mypersonal821/gravity/blob/main/src/components/RoomExperience.jsx): `src/components/RoomExperience.jsx`
- [Landing overlay](https://github.com/mypersonal821/gravity/blob/main/src/components/Overlay.jsx): `src/components/Overlay.jsx`
- [3D gift box](https://github.com/mypersonal821/gravity/blob/main/src/components/GiftBox.jsx): `src/components/GiftBox.jsx`
- [Gift discovery](https://github.com/mypersonal821/gravity/blob/main/src/components/GiftsPage.jsx): `src/components/GiftsPage.jsx`
- [Gift reveal](https://github.com/mypersonal821/gravity/blob/main/src/components/GiftRevealStandalone.jsx): `src/components/GiftRevealStandalone.jsx`
- [Final gift picture](https://github.com/mypersonal821/gravity/blob/main/src/components/FinalPremiumPicture.jsx): `src/components/FinalPremiumPicture.jsx`

### Memory capture

- [Memory capture](https://github.com/mypersonal821/gravity/blob/main/src/components/WebcamCapture.jsx): `src/components/WebcamCapture.jsx`
- [Heart photo collage](https://github.com/mypersonal821/gravity/blob/main/src/components/HeartCollage.jsx): `src/components/HeartCollage.jsx`

### Gift assets

- [3D gift models](https://github.com/mypersonal821/gravity/tree/main/public/models): `public/models`

### Other components

- **Visitor**
- **Browser camera**
- **Google Apps Script**

## Connections

- Visitor → App coordinator: opens experience
- App coordinator → Room experience: renders room
- Room experience → App coordinator: starts landing
- App coordinator → Landing overlay: renders landing
- App coordinator → 3D gift box: renders box
- Landing overlay → App coordinator: changes page
- App coordinator → Gift discovery: renders discovery
- Gift discovery → App coordinator: selects gift
- App coordinator → Gift reveal: renders selected gift
- Gift reveal → Gift discovery: reads gift data
- Gift reveal → Memory capture: opens capture
- Memory capture → Browser camera: requests camera
- Memory capture → Google Apps Script: posts photo
- Memory capture → Gift reveal: returns captured image
- Gift reveal → App coordinator: saves memory
- App coordinator → Heart photo collage: renders photos
- Gift discovery → Final gift picture: shows finale
- 3D gift box → 3D gift models: loads models
- Gift discovery → 3D gift models: loads models
- Gift reveal → 3D gift models: loads selected model