Colorfull shockwave effect

frontend/src/components/Homepage2.tsx

@@ -62,7 +62,7 @@ function Homepage2() {
                 setTimeout(() => {
                     setActve(false)
                     setCount(e => e + 1)
-                }, Math.max(...warst) * 1000 + 300)
+                }, Math.max(...warst) * 1000 + 1000)
             }
 
             return (

frontend/src/styles/home2.scss

@@ -1,4 +1,6 @@
 @use './mixins/effects' as *;
+$g1: rgb(98, 0, 234);
+$g2: rgb(236, 64, 122);
 
 #tiles {
     height: 100vh;
@@ -6,31 +8,56 @@
     display: grid;
     grid-template-columns: repeat(var(--columns), 1fr);
     grid-template-rows: repeat(var(--rows), 1fr);
+    background: linear-gradient(to right, $g1, $g2, $g1);
+    background-size: 200%;
+    animation: background-pan 10s linear infinite;
 
     .tile {
+        position: relative;
         background-color: var(--bg-color1);
 
+        &::before {
+            position: absolute;
+            content: '';
+            background-color: rgb(20, 20, 20);
+            inset: 1px;
+        }
+
         &.active {
-            animation: bright .3s forwards;
+            animation: bright 1s forwards;
             animation-delay: var(--delay);
         }
     }
 }
 
+@keyframes background-pan {
+    from {
+        background-position: 0% center;
+    }
+
+    to {
+        background-position: -200% center;
+    }
+}
+
 @keyframes bright {
     0% {
         background-color: var(--bg-color1);
+        opacity: 0;
     }
 
-    50% {
+    40% {
-
         background-color: var(--bg-color2);
-        filter: brightness(130%);
+        opacity: 1;
-        outline: 1px solid white;
+    }
+
+    60% {
+        background-color: var(--bg-color2);
+        opacity: 1;
     }
 
     100% {
-
         background-color: var(--bg-color2);
+        opacity: 1;
     }
 }