# umehabiba200/twenty-one-petals architecture

> Architecture diagram of the GitHub repository umehabiba200/twenty-one-petals, 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/umehabiba200/twenty-one-petals
- Repository: https://github.com/umehabiba200/twenty-one-petals

## Overview

This is a small birthday-invitation microsite. A visitor moves from the invitation through a birthday screen and a card-collecting garden to a personal letter. The JavaScript handles those screen transitions, theme preference, card progress, and reveal animations. The tree shows HTML and CSS assets, but their contents were not provided, so this map focuses on the sampled runtime behavior. Edges are supported by `js/main.js`; no external integrations are shown beyond browser storage and APIs.

Main entry points: [`js/main.js`](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js) (Screen transitions)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_journey["Invitation journey"]
  node_screen_flow["Screen transitions<br/>[main.js]"]
  node_entrance["Invitation screen<br/>[main.js]"]
  node_birthday["Birthday screen<br/>[main.js]"]
  node_garden["Card garden<br/>[main.js]"]
  node_letter["Letter screen<br/>[main.js]"]
end

subgraph group_interaction["Visitor interactions"]
  node_theme_control["Theme toggle<br/>[main.js]"]
  node_theme_storage[("Theme preference")]
  node_card_collection["Card collection<br/>[main.js]"]
  node_progress_display["Collection progress<br/>[main.js]"]
  node_letter_unlock["Letter unlock<br/>[main.js]"]
  node_letter_reveal["Letter reveal<br/>[main.js]"]
end

subgraph group_presentation["Presentation and effects"]
  node_sunflower_effect["Sunflower shower<br/>[main.js]"]
  node_confetti_effect["Confetti effect<br/>[main.js]"]
  node_browser_motion["Motion preferences"]
end

node_visitor(("Visitor"))

node_visitor -->|"activates controls"| node_screen_flow
node_screen_flow -->|"hides on advance"| node_entrance
node_screen_flow -->|"shows next"| node_birthday
node_screen_flow -->|"shows next"| node_garden
node_screen_flow -->|"shows next"| node_letter
node_visitor -->|"toggles theme"| node_theme_control
node_theme_control -->|"reads and writes"| node_theme_storage
node_visitor -->|"opens cards"| node_card_collection
node_card_collection -->|"updates count"| node_progress_display
node_card_collection -->|"unlocks when complete"| node_letter_unlock
node_card_collection -->|"launches at completion"| node_sunflower_effect
node_sunflower_effect -->|"checks preference"| node_browser_motion
node_visitor -->|"reveals letter"| node_letter_reveal
node_letter_reveal -->|"launches"| node_confetti_effect
node_confetti_effect -->|"checks preference"| node_browser_motion

click node_screen_flow "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_entrance "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_birthday "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_garden "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_letter "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_theme_control "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_card_collection "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_progress_display "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_letter_unlock "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_letter_reveal "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_sunflower_effect "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"
click node_confetti_effect "https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js"

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_screen_flow,node_entrance,node_birthday,node_garden,node_letter toneBlue
class node_theme_control,node_theme_storage,node_card_collection,node_progress_display,node_letter_unlock,node_letter_reveal toneAmber
class node_sunflower_effect,node_confetti_effect,node_browser_motion toneMint
class node_visitor toneIndigo
```

## Components

### Invitation journey

- [Screen transitions](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Invitation screen](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Birthday screen](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Card garden](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Letter screen](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`

### Visitor interactions

- [Theme toggle](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- **Theme preference**
- [Card collection](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Collection progress](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Letter unlock](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Letter reveal](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`

### Presentation and effects

- [Sunflower shower](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- [Confetti effect](https://github.com/umehabiba200/twenty-one-petals/blob/main/js/main.js): `js/main.js`
- **Motion preferences**

### Other components

- **Visitor**

## Connections

- Visitor → Screen transitions: activates controls (evidence: `js/main.js`)
- Screen transitions → Invitation screen: hides on advance (evidence: `js/main.js`)
- Screen transitions → Birthday screen: shows next (evidence: `js/main.js`)
- Screen transitions → Card garden: shows next (evidence: `js/main.js`)
- Screen transitions → Letter screen: shows next (evidence: `js/main.js`)
- Visitor → Theme toggle: toggles theme (evidence: `js/main.js`)
- Theme toggle → Theme preference: reads and writes (evidence: `js/main.js`)
- Visitor → Card collection: opens cards (evidence: `js/main.js`)
- Card collection → Collection progress: updates count (evidence: `js/main.js`)
- Card collection → Letter unlock: unlocks when complete (evidence: `js/main.js`)
- Card collection → Sunflower shower: launches at completion (evidence: `js/main.js`)
- Sunflower shower → Motion preferences: checks preference (evidence: `js/main.js`)
- Visitor → Letter reveal: reveals letter (evidence: `js/main.js`)
- Letter reveal → Confetti effect: launches (evidence: `js/main.js`)
- Confetti effect → Motion preferences: checks preference (evidence: `js/main.js`)