How mjunhaochen/virtual-avatar-builder works
Virtual Avatar Builder is a client-side avatar customization app. Users choose features, see the composed avatar update, then optionally randomize or reset it and export the display as a PNG. The README also documents responsive presentation and clothing/hair variants; these are represented by the selector and renderer. The sampled page source establishes state ownership, rendering, and export calls. Other UI and responsive details are represented at their documented or exact tree paths; no server-side storage is evidenced.
Main entry points: AvatarBuilderPage.tsx Builder workflow · FeatureSelector.tsx Feature selector · main.tsx React mount · App.tsx Routes and providers
Components 16
App entry
- React mount
src/main.tsx - Routes and providers
src/App.tsx
Avatar customization
- Builder workflow
src/pages/AvatarBuilderPage.tsx - Feature selector
src/components/FeatureSelector.tsx - Feature options
src/types/avatar.ts - Current features
src/pages/AvatarBuilderPage.tsx
Avatar presentation
- Avatar renderer
src/components/AvatarDisplay.tsx
Image export
- Canvas capture
src/pages/AvatarBuilderPage.tsx - html2canvas
- Browser download
UI support
- Action feedback
src/pages/AvatarBuilderPage.tsx - Toast UI
src/components/ui/sonner.tsx - Tabs controls
src/components/ui/tabs.tsx - Button controls
src/components/ui/button.tsx - Scrollable options
src/components/ui/scroll-area.tsx
Other components
- Avatar creator
Connections 19
- Avatar creator → React mount: opens app
- React mount → Routes and providers: mounts
- Routes and providers → Builder workflow: routes to
- Avatar creator → Builder workflow: customizes
- Builder workflow → Feature selector: renders
- Builder workflow → Current features: updates
- Builder workflow → Feature options: reads options
- Feature selector → Feature options: reads options
- Feature selector → Builder workflow: selects feature
- Builder workflow → Avatar renderer: passes features
- Avatar creator → Builder workflow: randomizes or resets
- Builder workflow → Canvas capture: captures display
- Canvas capture → html2canvas: renders canvas
- Canvas capture → Browser download: downloads PNG
- Builder workflow → Action feedback: reports actions
- Action feedback → Toast UI: shows feedback
- Feature selector → Tabs controls: uses
- Feature selector → Button controls: uses
- Feature selector → Scrollable options: uses