[FEAT] Add confetti animation when a goal is completed

[Priyanshu-byte-coder]

Summary

When a goal's current value reaches or exceeds its target, nothing special happens. A confetti burst would make completion feel rewarding.

Expected Behaviour

When goal.current >= goal.target transitions from false to true (i.e., the goal just got completed), trigger a brief confetti burst over the GoalTracker card.

Implementation Notes

• Use the lightweight canvas-confetti package (7kb gzip) or implement a pure CSS/JS particle burst
• Only fire once per goal completion — track completedGoalIds in a ref to avoid re-triggering on re-render
• Respect prefers-reduced-motion: skip confetti if user prefers reduced motion
• Confetti should use var(--accent) color and complementary colors

GSSoC Info

• Difficulty: Intermediate — 35 pts
• Area: UI / Animation

[seffhunnn]

hii @Priyanshu-byte-coder i would like to work on this issue under GSSoC'26. my approach will be to add a lightweight confetti celebration when a goal gets completed, make sure it only triggers once for each completion, and also respect reduced motion preferences for better accessibility and user experience.

[TanviVerma-05]

Hi @Priyanshu-byte-coder
I would like to work on this issue under GSSoC’26.

I have gone through the requirement and my approach would be:

• Detect the transition when goal.current >= goal.target changes from false → true
• Trigger a lightweight confetti animation only on first-time completion (avoid re-triggering on re-renders using a persistent ref like completedGoalIds)
• Use a lightweight solution such as canvas-confetti for smooth performance
• Ensure accessibility by respecting prefers-reduced-motion and disabling animation when enabled
• Maintain clean separation so the logic does not interfere with existing goal update flow

I will make sure the implementation is performance-safe, reusable, and does not cause unnecessary re-renders or repeated triggers.

Please assign this issue to me. I would like to contribute to this feature.

[MansiPawar-art]

Hi @Priyanshu-byte-coder,

I would like to work on this issue under GSSoC'26.

My approach:

• Use the lightweight canvas-confetti package for the celebration effect
• Trigger confetti only when a goal transitions from incomplete to completed
• Prevent repeated triggers using useRef to track completed goal IDs
• Respect prefers-reduced-motion for accessibility
• Match confetti colors with the existing app theme using accent-based colors

I’d want to contribute to this UI enhancement. Please assign this issue to me. Thank you!

[mallya-m]

Hi @Priyanshu-byte-coder!
I'd like to work on this under GSSoC '26.

I worked on the onboarding tour (#305) so I know how GoalTracker
and the dashboard layout fit together.
For the confetti I'll use canvas-confetti (~3kb, no heavy deps) triggered exactly once when current >= target transitions — tracked in a ref so it won't re-fire on re-renders or page refresh.

Could you please assign this to me?
GitHub: github.com/mallya-m