Add progress animations and celebrations

[nicholaspsmith]

Summary

Add celebratory animations and visual feedback for learning milestones to increase user engagement and motivation.

Motivation

• Gamification elements increase user engagement by 40%+
• Visual feedback reinforces positive behavior
• Celebrations create emotional connection to learning
• Makes progress feel tangible and rewarding

Proposed Celebrations

Micro-celebrations (subtle)

• Card rated "Easy": Brief glow/pulse effect
• Streak maintained: Small badge animation
• Node unlocked: Checkmark animation

Major Celebrations (prominent)

• Study session completed: Confetti burst
• Goal mastery milestone (25%, 50%, 75%, 100%): Larger celebration
• Daily streak milestone (7, 30, 100 days): Achievement badge
• First goal completed: Special onboarding celebration

Technical Implementation

1. Confetti: Use canvas-confetti (already in deps)
2. CSS Animations: Tailwind animate-* utilities
3. Framer Motion: For complex entrance/exit animations

Example Usage

import confetti from 'canvas-confetti'

function celebrateMilestone(type: 'minor' | 'major') {
  if (type === 'major') {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 }
    })
  }
}

Animation Specifications

• Confetti duration: 2-3 seconds
• Card glow: 0.5s ease-out
• Badge entrance: 0.3s spring animation
• Respect prefers-reduced-motion for accessibility

Integration Points

• StudySession component - on completion
• RatingButtons component - on "Easy" rating
• GoalCard component - on mastery milestone
• StreakDisplay component - on streak increment

Acceptance Criteria

• Confetti on study session completion
• Visual feedback on card ratings
• Milestone celebrations at 25/50/75/100% mastery
• Animations respect reduced-motion preference
• Celebrations feel rewarding, not annoying