How to Add a Confetti Celebration Effect to Your Web App Using canvas-confetti🎉

Have you ever interacted with an app where, after a successful action, suddenly — PUHH!! 🎉🎉🎊🎊 — you're greeted with a celebratory confetti explosion and a congratulatory message modal? Just like a real-life celebration!

How did that make you feel?
Personaly, it makes me feel amazing! 🥰

Whether you're submitting a form, completing a task, or unlocking a new feature, these tiny UI animations add a layer of joy that transforms a basic action into an experience. And guess what?
You can easily implement that magic too, using a tiny JavaScript library called canvas-confetti. Let me show you how.

To Begin With...

Start by installing the canvas-confetti library:
npm i canvas-confetti.
Now let’s create a reusable confetti component to use across your app.

💡Note: In this guide, we're using Next.js, but canvas-confetti is framework-agnostic. You can use it in React, Vue, Svelte, plain HTML/JavaScript, or any other frontend setup. It works just as well anywhere you can access the browser's canvas API.

Reusable Confetti Component

📂/components/CongratsCard.jsx

'use client';

import { useEffect } from "react";
import confetti from "canvas-confetti";
import { Link as LinkIcon, X } from "lucide-react";
import Link from "next/link";

const CongratsCard = ({ title, message, action1, action2, onClose}) => {
  useEffect(() => {
    confetti({
// Confetti configuration options
      particleCount: 500,
      spread: 70,
      origin: { y: 0.6 },
      gravity: 0.6,
    });
  }, []);

  return (
    <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-black bg-opacity-80 z-50">
      <div className="bg-white p-6 pt-4 rounded-xl shadow-xl text-center max-w-sm w-full">
        {/* Close button */}
        <button 
          onClick={onClose}
          className=" text-gray-500 p-0 m-0 bg-transparent hover:text-gray-800 transition translate-x-[164px]"
        >
          <X className="w-5 h-5" />
        </button>

        <h2 className="text-2xl font-bold text-green-600">{title}</h2>
        <p className="text-gray-500 mt-4">{message}</p>
        <div className="flex items-center justify-center gap-4 mt-6">
          <Link href={action1.href}>
            <button className="px-5 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600">
              {action1.label}
            </button>
          </Link>

          <Link href={action2.href}>
            <button className="hover:scale-95 text-black bg-white border rounded-xl px-5">
              <span className="flex items-center gap-2">
                <LinkIcon className="w-[14px]"/> {action2.label}
              </span>
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default CongratsCard;

Add the CongratsCard into your page

Now, import and use the CongratsCard component in your page, providing it with the required props requires.
📂 /page.js

'use client';

import CongratsCard from "@/components/CongratsCard"
import { useState } from "react";

const CongratsPage = () => {
    const [showCongrats, setShowCongrats] = useState(true);
  return (
    <div>
        {showCongrats && (
            <CongratsCard 
                title={"🎉 Congratulations!"}
                message={'Your portfolio has been published successfully!'} 
                action1={{label: 'View Portfolio', href: '/your-link-here'}}
                action2={{label: 'Copy Link', href: '/your-link-here'}}
                onClose={() => setShowCongrats(false)} // close handler
            />
        )}
    </div>
  )
}

export default CongratsPage

The Result

Why Use Confetti in Web Apps?

This tiny effect is not just visual fluff — it boosts the user experience and leaves an emotional impact. Here’s what confetti brings to the table:

• Celebrates Success (e.g., form submission, purchase, level-up)
• Delights Users Emotionally
• Improves Engagement and Retention
• Adds Personality to Your Brand
• Instant, Positive UI Feedback
• Lightweight & Easy to Use

Bonus: Customizing Your Confetti
The canvas-confetti library has dozens of configurable options you can tweak:

• particleCount
• spread
• angle
• gravity
• origin
• shapes, colors, ticks, and more...

Explore the full list of configuration options on canvas-confetti docs, play around with them and see what pleases you most.

🥂 Conclusion

And there you have it — a smooth and stylish celebration effect for your app that gives users real-time, surprising emotional feedback through UI. Who doesn’t love a good surprise?🎉🎉.

So now, it’s your turn...
Go make your users smile. 😊

What’s your favorite subtle UX effect? Drop it on the comments below.

Comments

[Kelvin Katwai]

Great 💯