fixed cursor effects

RiddhiM170904 · Oct 15, 2024 · 05d8467 · 05d8467
1 parent 2980aaa
commit 05d8467
Showing 1 changed file with 73 additions and 51 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -29,6 +29,12 @@
                 z-index: 99999999;
 
             }
+
+            @media (max-width : 768px) {
+                .circle{
+                    display: none;
+                }
+            }
 
 
     .chatbot-container {
@@ -253,58 +259,74 @@ <h3>Saarthi</h3>
     </script>
      <div id="root"></div>
      <script type="module" src="/src/main.jsx"></script>
-    <script>
-            // Coordinates for the cursor
-            const coords = { x: 0, y: 0 };
-            const circles = document.querySelectorAll(".circle");
-
-            // Colors for the circles
-            const colors = [
-                "#ffb56b", "#fdaf69", "#f89d63", "#f59761", "#ef865e", "#ec805d",
-                "#e36e5c", "#df685c", "#d5585c", "#d1525c", "#c5415d", "#c03b5d",
-                "#b22c5e", "#ac265e", "#9c155f", "#950f5f", "#830060", "#7c0060",
-                "#680060", "#60005f", "#48005f", "#3d005e"
-            ];
-
-            // Assign colors and initial position to each circle
+     <script>
+        // Coordinates for the cursor
+        const coords = { x: 0, y: 0 };
+        const circles = document.querySelectorAll(".circle");
+
+        // Colors for the circles
+        const colors = [
+            "#6bb5ff", "#69b1fd", "#63a3f8", "#619bf5", "#5e89ef", "#5d82ec",
+            "#5c6ee3", "#5c68df", "#5c58d5", "#5c52d1", "#5d41c5", "#5d3bc0",
+            "#5e2cb2", "#5e26ac", "#5f159c", "#5f0f95", "#600083", "#60007c",
+            "#600068", "#5f0060", "#5f0048", "#5e003d"
+        ];
+
+        // Assign colors, initial position, and size to each circle
+        circles.forEach(function (circle, index) {
+            circle.x = 0;
+            circle.y = 0;
+            circle.style.backgroundColor = colors[index % colors.length];
+            circle.style.position = 'absolute';
+            circle.style.borderRadius = '50%';
+            circle.style.width = `${5 + (index * 2)}px`;  // Smaller circle sizes
+            circle.style.height = `${5 + (index * 2)}px`;
+            circle.style.opacity = `${(circles.length - index) / circles.length}`;  // Fading effect
+        });
+
+        // Update the coordinates when the mouse moves
+        window.addEventListener("mousemove", function (e) {
+            coords.x = e.clientX;
+            coords.y = e.clientY;
+        });
+
+        // Easing function to make the animation smoother
+        function lerp(start, end, t) {
+            return start * (1 - t) + end * t;
+        }
+
+        // Animation function to move the circles with a trailing effect
+        function animateCircles() {
+            let x = coords.x;
+            let y = coords.y;
+
             circles.forEach(function (circle, index) {
-                circle.x = 0;
-                circle.y = 0;
-                circle.style.backgroundColor = colors[index % colors.length];
-            });
-
-            // Update the coordinates when the mouse moves
-            window.addEventListener("mousemove", function (e) {
-                coords.x = e.clientX;
-                coords.y = e.clientY;
+                const nextCircle = circles[index + 1] || circles[0];
+
+                // Apply easing for smoother movements
+                circle.x = lerp(circle.x, x, 0.4);  // Adjusted for quicker reaction
+                circle.y = lerp(circle.y, y, 0.4);
+
+                // Positioning the circle closer to the cursor
+                circle.style.left = circle.x - circle.offsetWidth / 2 + "px";
+                circle.style.top = circle.y - circle.offsetHeight / 2 + "px";
+
+                // Scale down each circle progressively to create depth
+                circle.style.transform = `scale(${(circles.length - index) / circles.length})`;
+
+                // Update position for the next circle, adjusted for closer proximity
+                x += (nextCircle.x - x) * 0.2;  // Smaller multiplier for tighter following
+                y += (nextCircle.y - y) * 0.2;
             });
-
-            // Animation function to move the circles
-            function animateCircles() {
-                let x = coords.x;
-                let y = coords.y;
-
-                circles.forEach(function (circle, index) {
-                    // Update the position and scale of each circle
-                    circle.style.left = x - 12 + "px";
-                    circle.style.top = y - 12 + "px";
-                    circle.style.scale = (circles.length - index) / circles.length;
-
-                    circle.x = x;
-                    circle.y = y;
-
-                    // Get the next circle in the sequence
-                    const nextCircle = circles[index + 1] || circles[0];
-                    x += (nextCircle.x - x) * 0.3;
-                    y += (nextCircle.y - y) * 0.3;
-                });
-
-                // Repeat the animation
-                requestAnimationFrame(animateCircles);
-            }
-
-            // Start the animation
-            animateCircles();
-        </script>
+
+            // Repeat the animation
+            requestAnimationFrame(animateCircles);
+        }
+
+        // Start the animation
+        animateCircles();
+    </script>
+
+
 </body>
 </html>