How umehabiba200/twenty-one-petals works
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: main.js Screen transitions
Components 15
Invitation journey
- Screen transitions
js/main.js - Invitation screen
js/main.js - Birthday screen
js/main.js - Card garden
js/main.js - Letter screen
js/main.js
Visitor interactions
- Theme toggle
js/main.js - Theme preference
- Card collection
js/main.js - Collection progress
js/main.js - Letter unlock
js/main.js - Letter reveal
js/main.js
Presentation and effects
- Sunflower shower
js/main.js - Confetti effect
js/main.js - Motion preferences
Other components
- Visitor
Connections 15
- Visitor → Screen transitions: activates controls
js/main.js - Screen transitions → Invitation screen: hides on advance
js/main.js - Screen transitions → Birthday screen: shows next
js/main.js - Screen transitions → Card garden: shows next
js/main.js - Screen transitions → Letter screen: shows next
js/main.js - Visitor → Theme toggle: toggles theme
js/main.js - Theme toggle → Theme preference: reads and writes
js/main.js - Visitor → Card collection: opens cards
js/main.js - Card collection → Collection progress: updates count
js/main.js - Card collection → Letter unlock: unlocks when complete
js/main.js - Card collection → Sunflower shower: launches at completion
js/main.js - Sunflower shower → Motion preferences: checks preference
js/main.js - Visitor → Letter reveal: reveals letter
js/main.js - Letter reveal → Confetti effect: launches
js/main.js - Confetti effect → Motion preferences: checks preference
js/main.js