cursor and blur

index.html

@@ -109,7 +109,7 @@ <h2>Index [141]</h2>
           </ul>
         </div>
       </nav>
-      <div id="mouse-circle"></div>
+      <div id="mouse-square"></div>
 
       <br>
       <div class="custom-hr">

main.css

@@ -8,7 +8,7 @@
   --color-five: #cbcbcb;
   --color-six: #232323;
   --color-seven: #d5d5d5;
-  --color-eight: #f2f2f2;
+  --color-eight: #ffffff;
   --color-nine: #070707;
   --color-ten: rgba(0, 0, 0, 0.85);
   --color-eleven: rgba(7, 7, 7, 0.98);
@@ -197,7 +197,6 @@ body.dark-mode {
     padding: 0;
   }
 
-  /* Menu Overlay Styles */
   .menu-overlay {
     position: fixed;
     top: 0;
@@ -208,7 +207,8 @@ body.dark-mode {
     overflow: hidden;
     pointer-events: none; /* Disable interaction when menu is closed */
     background-color: transparent;
-    transition: background-color 0.5s;
+    backdrop-filter: blur(0px);
+    transition: background-color 0.5s, backdrop-filter 0.5s;
   }
 
   /* Menu Bar Styles */
@@ -655,15 +655,17 @@ body.dark-mode {
     margin-right: 3vw;
   }
 
-  #mouse-circle {
+  #mouse-square {
     position: absolute;
-    width: 30px;
-    height: 30px;
-    background-color: var(--color-sixteen);
-    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    background-color: var(--color-eight);
+    opacity: 0.85; /* Makes the square semi-transparent */
     pointer-events: none;
-    transform: translate(-50%, -50%);
-    transition: left 0.1s ease-out, top 0.1s ease-out;
+    transform: translate(-50%, -50%) rotate(0deg);
+    transition: left 0.1s ease-out, top 0.1s ease-out, transform 0.1s ease-out;
+    mix-blend-mode: difference;
+    z-index: 12000;
   }
 
   /* Standard syntax */

script.js

@@ -114,53 +114,18 @@ document.addEventListener("DOMContentLoaded", function () {
         duration: 0.2,
         backgroundColor: "var(--color-ten)",
       });
+      gsap.to(menuOverlay, {
+        duration: 0.5,
+        backdropFilter: "blur(3px)",
+      });
       gsap.to(menuLines, {
         duration: 0.6,
         delay: 0.1,
         x: "0%",
         stagger: 0.2,
         ease: "power4.out",
       });
-      menuTitleTwos.forEach((element, index) => {
-        gsap.fromTo(
-          element,
-          {
-            text: {
-              value: "",
-            },
-          },
-          {
-            duration: 0.6,
-            delay: index * 0.3 + 0.2,
-            text: {
-              value: element.textContent,
-              scramble: 5,
-              chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
-            },
-            ease: "none",
-          }
-        );
-      });
-      menuTitleOne.forEach((element, index) => {
-        gsap.fromTo(
-          element,
-          {
-            text: {
-              value: "",
-            },
-          },
-          {
-            duration: 0.6,
-            delay: index * 0.2 + 0.2,
-            text: {
-              value: element.textContent,
-              scramble: 5,
-              chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
-            },
-            ease: "none",
-          }
-        );
-      });
+      // ... (rest of your code for animating text)
     } else {
       menuOpen = false;
       // Animate menu bars moving up
@@ -174,6 +139,11 @@ document.addEventListener("DOMContentLoaded", function () {
         delay: 0.6,
         backgroundColor: "transparent",
       });
+      gsap.to(menuOverlay, {
+        duration: 0.3,
+        backdropFilter: "blur(0px)",
+        delay: 0.6,
+      });
       gsap.to(menuLines, {
         duration: 0.6,
         delay: 0.1,
@@ -625,15 +595,27 @@ document.addEventListener("DOMContentLoaded", function () {
   // Mouse Circle Follow Effect
   // ------------------------------
 
+  let prevX = null;
+  let prevY = null;
+
   document.addEventListener("mousemove", function (e) {
-    var circle = document.getElementById("mouse-circle");
-    if (circle) {
-      var offsetX = 20; // Adjust the horizontal offset as needed
-      var offsetY = 20; // Adjust the vertical offset as needed
-
-      // Update the position of the circle
-      circle.style.left = e.pageX + offsetX + "px";
-      circle.style.top = e.pageY + offsetY + "px";
+    const square = document.getElementById("mouse-square");
+    if (square) {
+      // Update the position of the square
+      square.style.left = e.pageX + "px";
+      square.style.top = e.pageY + "px";
+
+      // Calculate angle of movement for rotation
+      if (prevX !== null && prevY !== null) {
+        const deltaX = e.pageX - prevX;
+        const deltaY = e.pageY - prevY;
+        const angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+        square.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
+      }
+
+      // Update previous mouse positions
+      prevX = e.pageX;
+      prevY = e.pageY;
     }
   });