Creating Confetti Animation in Next.js: A Step-by-Step Guide


Hello Guys, In this quick tutorial, we’ll walk through the process of creating a simple yet cool confetti effect in a Next.js application. We will create a simple button that on clicked shows the confetti animation effect. Let’s get started!

Step 1: Set Up Your Next.js Project

If you haven’t already set up a Next.js project, you can do so using the following commands:

npx create-next-app

Step 2: Create the Confetti Component

Import Statements and Constants:

import React, { useState, useEffect, useRef } from 'react';
const SHAPES = ['square', 'triangle'];
const COLOR_DIGIT = "ABCDEF1234567890";
  • Import React and necessary hooks (useState, useEffect, useRef).
  • Define an array SHAPES representing possible shapes for confetti particles.
  • Define COLOR_DIGIT with characters for generating random colors.

Component Declaration:

const ConfettiButton = () => {
    const [isConfettiActive, setConfettiActive] = useState(false);
    const containerRef = useRef(null);
    useEffect(() => {
        if (isConfettiActive) {
    }, [isConfettiActive]);
  • Create a component named ConfettiButton.
  • Use the useState hook to create a state variable isConfettiActive and setConfettiActive function to control confetti activation.
  • Use the useRef hook to create a reference (containerRef) for the container where confetti particles will be rendered.
  • Utilize the useEffect hook to trigger the generateConfetti function when isConfettiActive changes.

Random Color Generation:

const generateRandomColor = () => {
    let color = "#";
    for (let i = 0; i < 6; i++) {
        color += COLOR_DIGIT[Math.floor(Math.random() * COLOR_DIGIT.length)];
    return color;
  • Define a function generateRandomColor to generate a random hex color code, as hex color code has 6 characters after # so we have a loop to find the 6 random characters for our set COLOR_DIGIT.

Confetti Generation:

const generateConfetti = () => {
    const container = containerRef.current;    
    if (container) {
        for (let i = 0; i < 50; i++) {
            const confetti = document.createElement('div');
            const positionX = Math.random() * window.innerWidth;
            const positionY = Math.random() * window.innerHeight;
            const rotation = Math.random() * 360;
            const size = Math.floor(Math.random() * (20 - 5 + 1)) + 5;            // Set confetti styles
   = `${positionX}px`;
   = `${positionY}px`;
   = `rotate(${rotation}deg)`;
            confetti.className = 'confetti ' + SHAPES[Math.floor(Math.random() * 3)];
   = `${size}px`
   = `${size}px`
   = generateRandomColor();            // Append confetti to the container
            // Remove confetti element after animation duration (4 seconds)
            setTimeout(() => {
            }, 4000);


  • Define a function generateConfetti responsible for creating and animating confetti particles.
  • Use a loop to create 50 confetti elements.
  • Set random position, rotation, size, shape, and color for each confetti particle.
  • Append each confetti element to the container, which we will create later.
  • Remove confetti elements after an animation duration of 4 seconds.

Button Click Handler:

const handleClick = () => {
    // Reset the confetti after a short delay
    setTimeout(() => {
    }, 4000);
  • function handleClick to set isConfettiActive to true when the button is clicked.
  • Reset isConfettiActive to false after a short delay (4 seconds) to stop the confetti animation.


return (
        <button className='font-bold text-xl' onClick={handleClick}>Click for Confetti</button>
        <div className='fixed top-0 left-0 w-full h-full pointer-events-none' ref={containerRef} id="confetti-container"></div>
export default ConfettiButton;
  • For JSX we have a button triggering the confetti (<button>).

  • Attach the handleClick function to the button's onClick event.

  • Include a fixed container (<div>) for rendering confetti particles, with a reference (ref={containerRef}) and an id (id="confetti-container") Inside this our confetti’s will be appended on the button click. Now we can use this component on the page we wish I am adding it to the home page.

    // /src/app/page.tsx

    import ConfettiButton from '@/components/confetti-button'

    export default function Home() { return (

    ) }

Let's add the styles in the global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.confetti {
  position: absolute;
  width: 10px;
  height: 10px; 
  transform-origin: center bottom;
  animation: fall 4s linear infinite;

.confetti.square {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
.confetti.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

@keyframes fall {
  to {
    transform: translateY(100vh) rotate(720deg);

The above styles help in setting the confetti animation to move from its current position down to the screen height and also rotate while moving. for shapes, we use clip-path.

Now you can run the Next JS app using npm run devVisit http://localhost:3000 in your browser to see the confetti button animation in action.

Congratulations! You’ve successfully created a confetti effect in your Next.js application. Feel free to customize the confetti shapes, colors, and other parameters to match your site’s style. Happy Coding :)