Added a dumb effect

public/css/dashboard.css

@@ -207,6 +207,7 @@ body {
     flex-direction: column;
     position: relative;
     width: 300px;  
+    z-index:10;
   }
   
   .card:hover::before {
@@ -253,7 +254,6 @@ body {
     inset: 1px;
     padding: 10px;
     position: absolute;
-    z-index: 2;
   }
 
   
@@ -583,4 +583,12 @@ input
   width: 37.5%;
   height: 4em;
   resize: none;
-}
+}
+
+.fancy{
+  font-family: 'Lato', monospace;
+  font-size: clamp(3rem, 10vw, 10rem);
+  color: white;
+  padding: 0rem clamp(1rem, 2vw, 3rem);
+  border-radius: clamp(0.4rem, 0.75vw, 1rem);
+}

public/js/dashboard.js

@@ -8,6 +8,7 @@ window.onload = async () =>
     updateUser(accessToken, tokenType);
     updateGuildData(accessToken, tokenType);
     document.getElementById('RoleRules').onclick = handleToggleRules;
+  
 };
 
 function updateUser(accessToken, tokenType)
@@ -46,7 +47,7 @@ function updateGuildData(accessToken, tokenType)
         guildsCache = new Map();
         guilds.forEach(guild => {
             guildsCache.set(guild.id, guild)
-        });;
+        });
         makeCards(guilds);
     })
     .catch(console.error);
@@ -104,7 +105,7 @@ async function makeCards(data)
 {
     const canvas = document.createElement('div')
     canvas.classList.add('cards');
-    canvas.id = 'cards'
+    canvas.id = 'cards';
     for(var item of data)
     {
         (async ()=>
@@ -114,18 +115,51 @@ async function makeCards(data)
         })(item)
     }
     document.getElementById('Guilds').appendChild(canvas)
-    document.getElementById("cards").onmousemove = e => {
-        for(const card of document.getElementsByClassName("card")) {
-          const rect = card.getBoundingClientRect(),
-                x = e.clientX - rect.left,
-                y = e.clientY - rect.top;
-      
-          card.style.setProperty("--mouse-x", `${x}px`);
-          card.style.setProperty("--mouse-y", `${y}px`);
-        };
+    document.getElementById("cards").onmousemove = e => 
+    {
+        for(const card of document.getElementsByClassName("card")) 
+        {
+            const rect = card.getBoundingClientRect(),
+            x = e.clientX - rect.left,
+            y = e.clientY - rect.top;
+
+            card.style.setProperty("--mouse-x", `${x}px`);
+            card.style.setProperty("--mouse-y", `${y}px`);
+            let interval = null;
+            let target = card.children[0].children[1].children[0].children[0].children[0];
+            card.addEventListener('mouseenter', ()=>
+            {
+                const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+                let iteration = 0;
+                //clearInterval(interval);
+                interval = setInterval(() => 
+                {
+                    target.innerText = target.innerText
+                    .split("")
+                    .map((letter, index) => {
+                        if(index < iteration) {
+                        return target.dataset.value[index];
+                        }
+                    
+                        return letters[Math.floor(Math.random() * 26)]
+                    })
+                    .join("");
+                
+                    if(iteration >= target.dataset.value.length)
+                    { 
+                        clearInterval(interval);
+                    }
+                    iteration += 1 / 3;
+                }, 1)
+            })
+            card.addEventListener('mouseleave', ()=>
+            {
+                clearInterval(interval);
+                target.innerText = target.dataset.value;
+            })
+        }
     }
     document.getElementById('cards').onclick = handleSettigns;
-
 }
 async function makeCard(guild)
 {
@@ -138,7 +172,7 @@ async function makeCard(guild)
       <div class="card-info-wrapper ${guild.hasRem}">
         <div class="card-info">
           <div class="card-info-title">
-            <h3>${guild.name}</h3>  
+            <h3 data-value="${guild.name}" class="fancy">${guild.name}</h3>  
             <h4>${guild.memberCount?guild.memberCount + ' users on the server.':'Rem is not on this server yet.'} </h4>
           </div>    
         </div>