Games blur

Games/main.js

@@ -1,3 +1,5 @@
+let hasMouse = false;
+let hasTouch = false;
 const games = [
     {
         name: '2048',
@@ -15,10 +17,37 @@ const games = [
 ];
 
 window.onload = () => {
-    for(let i=0; i<games.length; i++){
+    for(let i = 0; i < games.length; i++) {
         document.body.innerHTML += `
         <a href="./${games[i].link}" class="game">
             <img src="./${games[i].link}/icon.png" alt="${games[i].name}">
-        </a>`
+        </a>`;
     }
+
+    // Add listeners to detect the first interaction
+    window.addEventListener('pointermove', detectMouse);
+    window.addEventListener('pointerdown', detectMouse);
+
+    const blob = document.querySelector('#blob');
+
+    document.body.onpointermove = event => {
+        const { clientX, clientY } = event;
+        if(hasMouse){
+            // Center the blob around the cursor
+            blob.style.left = `${clientX}px`;
+            blob.style.top = `${clientY}px`;
+        }
+    };
+}
+
+
+function detectMouse(event) {
+    if (event.pointerType === 'mouse') {
+        hasMouse = true;
+    } else if (event.pointerType === 'touch') {
+        hasTouch = true;
+    }
+    // Clean up listeners after detection
+    window.removeEventListener('pointermove', detectMouse);
+    window.removeEventListener('pointerdown', detectMouse);
 }

Games/style.css

@@ -3,6 +3,7 @@
     padding: 0;
     box-sizing: border-box;
 }
+
 body{
     display: flex;
     justify-content: center;
@@ -11,9 +12,57 @@ body{
     min-height: 100vh;
     background: #333;
     flex-wrap: wrap;
+    position: relative;
+    overflow: hidden;
+}
+
+#blob{
+    z-index: 1;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 500px;
+    height: 500px;
+    background: #52fd30;
+    pointer-events: none;
+    clip-path: polygon(48% 2%, 60% 18%, 77% 10%, 86% 14%, 91% 30%, 82% 36%, 73% 41%, 81% 51%, 90% 55%, 94% 63%, 95% 82%, 94% 86%, 81% 94%, 65% 90%, 55% 82%, 45% 85%, 25% 100%, 23% 100%, 5% 92%, 1% 82%, 0% 70%, 6% 68%, 14% 61%, 19% 60%, 25% 61%, 29% 53%, 23% 48%, 12% 48%, 6% 34%, 6% 20%, 8% 12%, 16% 5%, 22% 13%, 26% 18%, 30% 13%, 34% 6%, 40% 3%);
+    animation: rgb 5s linear infinite;
+}
+#blob::before{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -50%;
+    width: 50vw;
+    height: 50vh;
+    background: #0b7901;
+    z-index: 2;
+    filter: blur(150px);
+}
+#blur{
+    position: absolute;
+    z-index: 2;
+    min-height: 100vh;
+    min-width: 100vw;
+    backdrop-filter: blur(125px);
+}
+@keyframes rgb{
+    from {
+        filter: hue-rotate(0deg);
+        transform: translate(-50%, -50%) rotate(0deg) scaleX(1.5);
+    }
+    50% {
+        transform: translate(-50%, -50%) rotate(180deg) scaleX(.5);
+    }
+    to {
+        filter: hue-rotate(360deg);
+        transform: translate(-50%, -50%) rotate(360deg) scaleX(1.5);
+    }
 }
 
 #home{
+    z-index: 69;
     position: fixed;
     right: 0;
     bottom: 0;
@@ -28,15 +77,11 @@ body{
     display: flex;
     justify-content: center;
     align-items: center;
-
     width: 200px;
     height: 150px;
-
-    /*border: 5px red solid;*/
     border-radius: 10px;
     margin: 1rem;
     overflow: hidden;
-
     box-shadow: 
         inset 5px 5px 15px #aaa,
         5px 5px 15px #555;
@@ -50,5 +95,14 @@ body{
 
 .game:hover img{
     transition: .25s;
-    scale: 1.25;
+    transform: scale(1.25);
+}
+
+@media screen and (max-width: 500px){
+    body{
+        overflow: auto;
+    }
+    #blob{
+        display: none;
+    }
 }