"use client";

import * as React from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

interface ConfettiBurstProps extends React.HTMLAttributes<HTMLDivElement> {
  active?: boolean;
  pieces?: number;
  duration?: number;
}

const confettiColors = [
  "bg-primary",
  "bg-secondary",
  "bg-accent",
  "bg-muted",
  "bg-foreground",
];

function ConfettiBurst({
  active = false,
  pieces = 18,
  duration = 1.1,
  className,
  ...props
}: ConfettiBurstProps) {
  const [burstId, setBurstId] = React.useState(0);

  React.useEffect(() => {
    if (active) {
      setBurstId((prev) => prev + 1);
    }
  }, [active]);

  const confettiPieces = React.useMemo(() => {
    return Array.from({ length: pieces }).map((_, index) => {
      const angle = (Math.PI * 2 * index) / pieces;
      const distance = 36 + (index % 5) * 8;
      const size = 4 + (index % 3) * 2;
      const rotation = index * 24;
      const delay = (index % 6) * 0.03;

      return {
        angle,
        distance,
        size,
        rotation,
        delay,
        colorClass: confettiColors[index % confettiColors.length],
      };
    });
  }, [pieces, burstId]);

  return (
    <div
      className={cn("relative h-24 w-24", className)}
      {...props}
    >
      <div key={burstId} className="absolute inset-0">
        {confettiPieces.map((piece, index) => (
          <motion.span
            key={`${burstId}-${index}`}
            className={cn("absolute left-1/2 top-1/2 rounded-sm", piece.colorClass)}
            style={{ width: piece.size, height: piece.size }}
            initial={{ opacity: 0, x: 0, y: 0, scale: 0.6, rotate: 0 }}
            animate={{
              opacity: [0, 1, 0],
              x: Math.cos(piece.angle) * piece.distance,
              y: Math.sin(piece.angle) * piece.distance,
              scale: [0.6, 1, 0.8],
              rotate: piece.rotation,
            }}
            transition={{
              duration,
              delay: piece.delay,
              ease: "easeOut",
            }}
          />
        ))}
      </div>
      <span className="absolute left-1/2 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary" />
    </div>
  );
}

export { ConfettiBurst };
export type { ConfettiBurstProps };
Confetti Burst

Dependencies

Files

Installation
