confetti on animation end

Author: luckspt

src/components/prize/PrizeDrawAnimation.tsx

@@ -2,6 +2,8 @@
 
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import Confetti from "react-confetti";
+import { useWindowSize } from "react-use";
 
 interface PrizeDrawAnimationProps {
   participants: User[];
@@ -30,6 +32,7 @@ export function PrizeDrawAnimation({
   const [showWinner, setShowWinner] = useState(false);
   const [showPrize, setShowPrize] = useState(false);
   const [animationDuration, setAnimationDuration] = useState(1000);
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
 
   useEffect(() => {
     // Calculate dynamic timing based on participant count
@@ -191,6 +194,14 @@ export function PrizeDrawAnimation({
       {/* Winner reveal */}
       {showWinner && (
         <div className="absolute inset-0 flex items-center justify-center animate-winner-reveal">
+          {/* Confetti effect */}
+          <Confetti
+            width={windowWidth}
+            height={windowHeight}
+            numberOfPieces={500}
+            recycle={false}
+          />
+          
           <div className="relative flex flex-col items-center gap-6">
             <div className="relative">
               <Image

src/components/prize/PrizeTile.tsx

@@ -106,12 +106,14 @@ export function PrizeTile({
       />
       {winner && !isOverlayOpen && (
         <div className="flex flex-col justify-center items-center text-center gap-y-2 w-full">
-          <Confetti
-            width={windowWidth}
-            height={windowHeight}
-            numberOfPieces={500}
-            recycle={false}
-          />
+          { disableAnimation && (
+            <Confetti
+              width={windowWidth}
+              height={windowHeight}
+              numberOfPieces={500}
+              recycle={false}
+            />
+          )}
           <Link href={`/users/${winner.id}`}>
             <Image
               className="size-[128px] object-contain"