@@ -1,36 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Mouse Shadow</title>
 </head>
+
 <body>
 
   <div class="hero">
     <h1 contenteditable>🔥WOAH!</h1>
   </div>
 
   <style>
-  html {
-    color:black;
-    font-family: sans-serif;
-  }
-
-  .hero {
-    min-height: 100vh;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    color:black;
-  }
-
-  h1 {
-    text-shadow: 10px 10px 0 rgba(0,0,0,1);
-    font-size: 100px;
-  }
+    html {
+      color: black;
+      font-family: sans-serif;
+    }
+
+    .hero {
+      min-height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: black;
+    }
+
+    h1 {
+      text-shadow: 10px 10px 30px rgba(0, 0, 0, 1);
+      font-size: 100px;
+    }
   </style>
 
-<script>
-</script>
+  <script>
+    const hero = document.querySelector('.hero');
+    const text = document.querySelector('h1');
+    const walk = 100;
+
+    function shadow(e) {
+      const { offsetWidth: width, offsetHeight: height } = hero;
+      let { offsetX: x, offsetY: y } = e;
+
+      if (this !== e.target) {
+        x += e.target.offsetLeft;
+        y += e.target.offsetTop;
+      }
+
+      const xWalk = (x / width * 100) - (walk / 2);
+      const yWalk = (y / height * 100) - (walk / 2);
+
+      text.style.textShadow = `${xWalk}px ${yWalk}px 30px rgba(0,140,0,1)`;
+      console.log(xWalk, yWalk);
+    }
+
+    hero.addEventListener('mousemove', shadow);
+
+  </script>
 </body>
-</html>
+
+</html>