Confetti

import { Confetti } from "@/components/ui/confetti";

export default function Example() {
  return <Confetti />;
}

"use client";

import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";

function Confetti({ active = false, duration = 3000, count = 50 }) {
  const [particles, setParticles] = useState([]);
  useEffect(() => {
    if (!active) { setParticles([]); return; }
    const colors = ["#f43f5e", "#8b5cf6", "#3b82f6", "#10b981", "#f59e0b", "#ec4899"];
    const ps = Array.from({ length: count }, (_, i) => ({
      id: i, x: Math.random() * 100, color: colors[i % colors.length],
      delay: Math.random() * 500, size: 4 + Math.random() * 6,
    }));
    setParticles(ps);
    const t = setTimeout(() => setParticles([]), duration);
    return () => clearTimeout(t);
  }, [active, count, duration]);

  if (!particles.length) return null;
  return (
    <div className="pointer-events-none fixed inset-0 z-[9999] overflow-hidden">
      {particles.map((p) => (
        <div key={p.id}
          className="absolute animate-bounce"
          style={{
            left: `${p.x}%`, top: "-10px",
            width: p.size, height: p.size,
            backgroundColor: p.color, borderRadius: Math.random() > 0.5 ? "50%" : "0",
            animationDuration: `${1 + Math.random() * 2}s`,
            animationDelay: `${p.delay}ms`,
          }}
        />
      ))}
    </div>
  );
}

export { Confetti };