Revert "Revert "Cursor Lag Resolved""

cursor/script.js

@@ -1,6 +1,22 @@
+const cursor = document.querySelector('.cursor');
+const cursor2 = document.querySelector('.cursor2');
+let mouseX = 0, mouseY = 0, cursorX = 0, cursorY = 0, cursor2X = 0, cursor2Y = 0;
 
-var cursor = document.querySelector(".cursor");
-var cursor2 = document.querySelector(".cursor2");
-document.addEventListener("mousemove", function (e) {
-    cursor.style.cssText = cursor2.style.cssText = "left: " + e.clientX + "px; top: " + e.clientY + "px;";
+document.addEventListener('mousemove', (e) => {
+    mouseX = e.clientX;
+    mouseY = e.clientY;
 });
+
+function animate() {
+    cursorX += (mouseX - cursorX) * 0.1;
+    cursorY += (mouseY - cursorY) * 0.1;
+    cursor2X += (mouseX - cursor2X) * 0.15;
+    cursor2Y += (mouseY - cursor2Y) * 0.15;
+
+    cursor.style.transform = `translate(${cursorX - 25}px, ${cursorY - 25}px)`;
+    cursor2.style.transform = `translate(${cursor2X - 7.5}px, ${cursor2Y - 7.5}px)`;
+
+    requestAnimationFrame(animate);
+}
+
+animate();

cursor/style.css

@@ -4,12 +4,11 @@
   height: 50px;
   border: 1px solid var(--main-color);
   border-radius: 50%;
-  left: 0;
-  top: 0;
   pointer-events: none;
   transform: translate(-50%, -50%);
-  transition: 0.1s;
   z-index: 1000;
+  background-color: transparent;
+  opacity: 1;
 }
 
 .cursor2 {
@@ -18,12 +17,10 @@
   height: 15px;
   background-color: #ffffff;
   border-radius: 50%;
-  left: 0;
-  top: 0;
   pointer-events: none;
   transform: translate(-50%, -50%);
-  transition: 0.15s;
   z-index: 1000;
+  opacity: 1;
 }
 
 .content:hover ~ .cursor {