feat: cursor ring (#25)

* feat: add inertial ring around cursor

* feat: make cursor ring change sitewide

---------

Co-authored-by: Navneeth Mahadevan <navneethmahadevan@gmail.com>

Author: Mummanajagadeesh

index.html

@@ -268,6 +268,7 @@ <h1>Gallery</h1>
     </section>
     </main> <div id="footer-placeholder"></div>
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/main_slideshow.js"></script>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>

src/pages/about/index.html

@@ -152,6 +152,7 @@ <h2>In the Spotlight</h2>
     </div>
     </main> <div id="footer-placeholder"></div>
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>
     <script src="/src/scripts/componentLoader.js"></script>

src/pages/achievements/index.html

@@ -126,6 +126,7 @@ <h2 id="res-head">Research</h2>
     </main>
     <div id="footer-placeholder"></div>
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>
     <script src="/src/scripts/componentLoader.js"></script>

src/pages/activities/index.html

@@ -99,6 +99,7 @@ <h2 id="exhib-head">Exhibitions</h2>
     </main>
     <div id="footer-placeholder"></div>
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>
     <script src="/src/scripts/componentLoader.js"></script>

src/pages/activities/origo/index.html

@@ -530,6 +530,7 @@ <h4>Offline</h4>
     </main>
     <div id="footer-placeholder"></div>
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>
     <script src="/src/scripts/componentLoader.js"></script>

src/pages/contact/index.html

@@ -356,6 +356,7 @@ <h2>FIND US</h2>
     </main>
 
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>
     <div id="footer-placeholder"></div>

src/pages/hof/index.html

@@ -74,6 +74,7 @@ <h1>ORIGO Robotics Challenge'25</h1>
 
     <div id="footer-placeholder"></div>
     <div class="cursor" aria-hidden="true"></div>
+    <div class="cursor-ring"></div>
 
     <!-- Defer non-critical JavaScript -->
     <script src="/src/scripts/cursor.js" defer></script>

src/pages/projects/index.html

@@ -204,7 +204,7 @@ <h1 class="site-title" id="page-title">PROJECTS</h1>
 
     <div id="footer-placeholder"></div>
     <div class="cursor" aria-hidden="true"></div>
-
+    <div class="cursor-ring"></div>
     <!-- Defer non-critical scripts to improve first contentful paint -->
     <script src="/src/scripts/cursor.js" defer></script>
     <script src="/src/scripts/mobile-navbar.js" defer></script>

src/pages/team/index.html

@@ -41,6 +41,7 @@ <h1>TEAM</h1>
     </main>
     <div id="footer-placeholder"></div>
     <div class="cursor"></div>
+    <div class="cursor-ring"></div>
     <script src="/src/scripts/cursor.js"></script>
     <script src="/src/scripts/mobile-navbar.js"></script>
     <script src="/src/scripts/componentLoader.js"></script>

src/scripts/cursor.js

@@ -4,21 +4,62 @@
   const cursor = document.querySelector(".cursor");
   if (!cursor) return;
 
+  const cursorRing = document.querySelector(".cursor-ring");
+
   // Select all interactive elements: a, button, year-btn, and the specific social links
   const hoverables = document.querySelectorAll("a, button, .year-btn, .socials a");
 
-  document.addEventListener("mouseenter", () => cursor.classList.add("visible"));
-  document.addEventListener("mouseleave", () => cursor.classList.remove("visible"));
+  let mouseX = 0;
+  let mouseY = 0;
+  let ringX = 0;
+  let ringY = 0;
+  const inertia = 0.3;
+
+  document.addEventListener("mouseenter", () => {
+    cursor.classList.add("visible");
+    if (cursorRing) cursorRing.classList.add("visible");
+  });
+  
+  document.addEventListener("mouseleave", () => {
+    cursor.classList.remove("visible");
+    if (cursorRing) cursorRing.classList.remove("visible");
+  });
 
-  // Hover effect (scaling)
   hoverables.forEach(el => {
-    el.addEventListener("mouseenter", () => cursor.classList.add("hovered"));
-    el.addEventListener("mouseleave", () => cursor.classList.remove("hovered"));
+    el.addEventListener("mouseenter", () => {
+      cursor.classList.add("hovered");
+      if (cursorRing) cursorRing.classList.add("hovered");
+    });
+    
+    el.addEventListener("mouseleave", () => {
+      cursor.classList.remove("hovered");
+      if (cursorRing) cursorRing.classList.remove("hovered");
+    });
   });
 
-  // Position tracking
   document.addEventListener("mousemove", e => {
-    cursor.style.top = e.clientY + "px";
-    cursor.style.left = e.clientX + "px";
+    mouseX = e.clientX;
+    mouseY = e.clientY;
+    cursor.style.top = mouseY + "px";
+    cursor.style.left = mouseX + "px";
   });
+
+  function animateRing() {
+    if (cursorRing) {
+      const dx = mouseX - ringX;
+      const dy = mouseY - ringY;
+
+      ringX += dx * inertia;
+      ringY += dy * inertia;
+
+      cursorRing.style.top = ringY + "px";
+      cursorRing.style.left = ringX + "px";
+    }
+
+    requestAnimationFrame(animateRing);
+  }
+
+  if (cursorRing) {
+    animateRing();
+  }
 })();