finish particle

src/ui/Start/index.module.scss

 body {
-  background: #000;
+  background: #0f131e;
   text-align: center;
   position: relative;
   margin: 0;
@@ -80,3 +80,101 @@ body * {
 .neos-header button:hover {
   text-shadow: 0 0 0.5em #2137bd, 0 0 0.5em #2137bd;
 }
+
+.particles-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.particle-container {
+  $particleNum: 200;
+  $particleColor: hsl(180, 100%, 80%);
+
+  position: absolute;
+  transform: translateY(-10vh);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+
+  .particle {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    mix-blend-mode: screen;
+    background-image: radial-gradient(
+      hsl(180, 100%, 80%),
+      hsl(180, 100%, 80%) 10%,
+      hsla(180, 100%, 80%, 0) 56%
+    );
+
+    animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
+  }
+
+  @keyframes fadein-frames {
+    0% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.7;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes scale-frames {
+    0% {
+      transform: scale3d(0.4, 0.4, 1);
+    }
+
+    50% {
+      transform: scale3d(2.2, 2.2, 1);
+    }
+
+    100% {
+      transform: scale3d(0.4, 0.4, 1);
+    }
+  }
+
+  $particleBaseSize: 10;
+
+  @for $i from 1 to $particleNum {
+    &:nth-child(#{$i}) {
+      $particleSize: random($particleBaseSize);
+      width: $particleSize + px;
+      height: $particleSize + px;
+
+      $startPositionY: random(10) + 80;
+      $framesName: "move-frames" + $i;
+      $moveDuration: 28000 + random(9000) + ms;
+
+      animation-name: #{$framesName};
+      animation-duration: $moveDuration;
+      animation-delay: random(37000) + ms;
+
+      @keyframes #{$framesName} {
+        from {
+          transform: translate3d(
+            #{random(100) + vw},
+            #{$startPositionY + vh},
+            0
+          );
+        }
+
+        to {
+          transform: translate3d(
+            #{random(100) + vw},
+            #{- $startPositionY - random(30) + vh},
+            0
+          );
+        }
+      }
+
+      .particle {
+        animation-delay: random(4000) + ms;
+      }
+    }
+  }
+}

src/ui/Start/index.tsx

@@ -21,6 +21,13 @@ const Start: React.FC = () => {
         </a>
       </div>
       <div className={styles.wrapper}>
+        <div className={styles["particles-container"]}>
+          {Array.from({ length: 100 }).map((_) => (
+            <div className={styles["particle-container"]}>
+              <div className={styles["particle"]} />
+            </div>
+          ))}
+        </div>
         <div role="banner" className={styles["neos-header"]}>
           <div>
             <h1>