added better randomness for the each individual particle

Author: phillipnguyenn

client/src/components/ui/Explosion.tsx

@@ -3,6 +3,7 @@ import { motion } from "framer-motion";
 type ExplosionProps = {
   colour1: string;
   colour2: string;
+  // looks better with odd numbers
   count: number;
   // can optionally take offsets to adjust exact position
   yOffset?: number;
@@ -17,28 +18,38 @@ const Explosion = ({
   xOffset = 0,
 }: ExplosionProps) => {
   const particles = Array.from({ length: count });
-  const randomDisplacement = Math.random() * 10;
 
   return (
-    <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-      {particles.map((_, i) => (
-        <motion.div
-          key={i}
-          initial={{ x: xOffset, y: yOffset, opacity: 1, scale: 1 }}
-          animate={{
-            x: Math.cos(i + randomDisplacement) * 150 + xOffset,
-            y: Math.sin(i + randomDisplacement) * 150 + yOffset,
-            opacity: 0,
-            scale: 0,
-          }}
-          transition={{ duration: 0.6, ease: "easeOut" }}
-          className="absolute h-10 w-10 rounded-none"
-          style={{
-            backgroundColor: i % 2 === 0 ? colour1 : colour2,
-            boxShadow: `0 0 10px ${colour1}`,
-          }}
-        />
-      ))}
+    <div className="pointer-events-none absolute inset-0 z-0 flex items-center justify-center">
+      {particles.map((_, i) => {
+        const individualSize = Math.random() * 0.1 + 4;
+        const randomDisplacement = Math.random() * 10;
+
+        // for every item in map, return a particle with a different size
+        return (
+          <motion.div
+            key={i}
+            initial={{
+              x: xOffset,
+              y: yOffset,
+              opacity: 1,
+              scale: individualSize,
+            }}
+            animate={{
+              x: Math.cos(i + randomDisplacement) * 150 + xOffset,
+              y: Math.sin(i + randomDisplacement) * 150 + yOffset,
+              opacity: 0,
+              scale: 0,
+            }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+            className="absolute h-4 w-4 rounded-none"
+            style={{
+              backgroundColor: i % 2 === 0 ? colour1 : colour2,
+              boxShadow: `0 0 10px ${colour1}`,
+            }}
+          />
+        );
+      })}
     </div>
   );
 };