Adding Delight to Adrenaline Board with Framer Motion & Confetti Effects

What is the Adrenaline Board?

In this experiment, we explored the use of Framer Motion and react-confetti-explosion to bring celebratory animations to our internal project management tool—Adrenaline Board.

The Adrenaline Board is a custom-built sprint tracking tool used by everyone on our team. At the start of each week, team members enter how many sprint points they’re aiming to complete. Each day, they update their progress by logging how many points they’ve completed. When a team member hits their goal—completing 100% of their sprint points for the week—it’s a moment worth celebrating.

That’s where this project came in.

The Idea

We wanted to make that final moment—the completion of all assigned sprint points—feel special. Previously, reaching your sprint goal felt like checking another box. We saw an opportunity to inject some fun into the workflow and create a motivational moment that would reinforce a sense of accomplishment.

The goal was to boost engagement, increase team participation, and make the Adrenaline Board feel more rewarding to use—without adding complexity or interrupting flow.

What did we do?

To celebrate sprint completion, we introduced two playful animation effects:

• A flying “party parrot” GIF that swoops across the screen
• A burst of confetti that explodes upon goal completion

These effects are triggered only when a user finishes all of their sprint points for the week. Using Framer Motion, we choreographed the parrot animation with randomized entry direction, scale, and rotation to keep things fun and unpredictable. We used react-confetti-explosion to deliver a burst of visual joy, timed perfectly with the parrot animation.

To ensure everything ran smoothly, we tied the animations to state changes in the app using useAnimation, useEffect, and AnimatePresence, allowing fine-grained control over when and how the celebration is triggered.

Tools & Libraries Used:

• framer motion – for advanced animation control
• react confetti explosion – for visual celebratory feedback
• emotion and styled components – for layout and styling

Key Challenges:

• Synchronizing animation timing across multiple motion components
• Preventing the animation from re-triggering unnecessarily
• Tuning the motion values (like bounce, duration, and scale) to strike the right balance between “fun” and “too much”

What did we learn?

What worked well:

• Framer Motion gave us the power to precisely control animations, including entry/exit transitions and spring physics.
• Randomized parrot animations kept the effect from feeling repetitive.
• Confetti provided an instant sense of celebration—creating a positive association with completing goals.

What didn’t work (at first):

• The animation initially triggered multiple times due to some state logic hiccups. We fixed this by tightening our conditions and isolating sprint completion as a single, trackable event.
• We spent some time fine-tuning motion values to keep the celebration punchy without being disruptive.

Surprising Takeaway:

Even subtle animations can dramatically improve user experience—especially in internal tools where motivation and morale matter just as much as functionality.

What’s next?

We’re excited about the potential of this pattern and are exploring a few enhancements:

• Adding sound effects to amplify the celebration
• Making the animation config-driven, allowing each team to customize their own “victory mode”

This approach could easily extend to other tools with milestone tracking or gamified workflows—anywhere a little positive reinforcement can make work more enjoyable.