Skip to main content

Celebrations

Celebration modals and toasts are a key UX pattern in WEFA. They close the feedback loop after meaningful actions, reinforcing the connection between real care and digital growth.

All celebration modals follow a consistent design:

  1. Hero image - Large creature or plant art on a gradient background
  2. Bold heading - "Your creature just evolved!" / "You just nurtured Strawberry!"
  3. Subtitle - Level/health update text
  4. Dual CTAs - Share (outlined) / View (filled teal)

Plant nurture celebration

Creature fed celebration

Celebration Types​

Plant Nurture​

Shown after successfully nurturing a plant with a care event.

  • Hero: plant photo
  • Text: "You just nurtured {plantName}!"
  • Subtitle: "{N} energy points earned!"

Creature Nurture​

Shown after feeding/nurturing a creature with energy.

  • Hero: creature art on blue gradient
  • Text: "You just fed {creatureName}!"
  • Subtitle: "They're now healthy!"

Creature Evolution​

Shown after evolving a creature to a new stage. Can appear both in the Deck view and in AR.

Evolution celebration (Deck)

Evolution celebration (AR)

  • Hero: evolved creature art
  • Text: "Your creature just evolved!"
  • Subtitle: "You are now level {N}!"

Toast Pattern​

For smaller rewards (game moves, streak updates), non-blocking toasts appear at the top of the screen without requiring dismissal.

Key Files​

  • src/components/feedback/CelebrationModal.tsx - Shared celebration modal
  • src/components/feedback/RewardToast.tsx - Non-blocking reward toasts
  • src/components/garden/CelebrationOverlay.tsx - AR celebration overlay