Update confetti animation (#8083)

Co-authored-by: Daniel Mallory <[email protected]>

changelog/update-confetti-animation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Confetti animation update.
+
+

client/components/confetti-animation/index.tsx

@@ -6,38 +6,51 @@ import confetti from 'canvas-confetti';
 
 const defaultColors = [ '#889BF2', '#C3CDF9', '#6079ED' ];
 
+const randomInRange = ( min: number, max: number ): number =>
+	Math.floor( Math.random() * ( max - min ) + min );
+
+// Use a rectangle instead of an square on supported browsers.
+const rectangle =
+	typeof Path2D === 'function' && typeof DOMMatrix === 'function'
+		? confetti.shapeFromPath( {
+				path: 'M0,0 L2,0 L2,1 L0,1 Z',
+		  } )
+		: 'square';
+
+// Adjust particle amount based on screen size.
+const particleLength = ( window.innerWidth + window.innerHeight ) / 50;
+
 const fireConfetti = ( colors: string[] ) => {
 	const defaults = {
-		origin: { y: 0.3 },
 		spread: 360,
+		particleCount: 1,
+		startVelocity: 0,
 		zIndex: 1000000,
-		colors,
 	};
 
-	const rectangle = confetti.shapeFromPath( {
-		path: 'M0,0 L2,0 L2,1 L0,1 Z',
-	} );
-
-	confetti( {
-		...defaults,
-		particleCount: 20,
-		shapes: [ rectangle ],
-		scalar: 4,
-		startVelocity: 60,
-	} );
-	confetti( {
-		...defaults,
-		particleCount: 20,
-		shapes: [ rectangle ],
-		scalar: 2,
-		startVelocity: 40,
-	} );
-	confetti( {
-		...defaults,
-		particleCount: 40,
-		shapes: [ 'circle' ],
-		startVelocity: 20,
-	} );
+	for ( let i = 0; i < particleLength; i++ ) {
+		confetti( {
+			...defaults,
+			colors: [ colors[ randomInRange( 0, colors.length ) ] ],
+			origin: {
+				x: Math.random(),
+				y: Math.random() * 0.999 - 0.2,
+			},
+			drift: randomInRange( -2, 2 ),
+			shapes: [ 'circle' ],
+		} );
+		confetti( {
+			...defaults,
+			colors: [ colors[ randomInRange( 0, colors.length ) ] ],
+			origin: {
+				x: Math.random(),
+				y: Math.random() * 0.999 - 0.2,
+			},
+			shapes: [ rectangle ],
+			drift: randomInRange( -2, 2 ),
+			scalar: randomInRange( 2, 4 ),
+		} );
+	}
 };
 
 interface Props {