Update app.js

Author: Deadcoder001

assets/js/app.js

@@ -1,16 +1,16 @@
+// ParticlesJS Configuration
 particlesJS('particles-js',
-  
   {
     "particles": {
       "number": {
-        "value": 200, // Increased particle count
+        "value": 200,
         "density": {
           "enable": true,
           "value_area": 800
         }
       },
       "color": {
-        "value": ["#00fffc", "#fc00ff", "#fffc00"] // Randomized particle colors
+        "value": ["#00fffc", "#fc00ff", "#fffc00"]
       },
       "shape": {
         "type": "circle",
@@ -24,9 +24,9 @@ particlesJS('particles-js',
       },
       "opacity": {
         "value": 0.7,
-        "random": true, // Random opacity for variation
+        "random": true,
         "anim": {
-          "enable": true, // Enable opacity animation
+          "enable": true,
           "speed": 1,
           "opacity_min": 0.1,
           "sync": false
@@ -36,28 +36,28 @@ particlesJS('particles-js',
         "value": 4,
         "random": true,
         "anim": {
-          "enable": true, // Enable size animation
+          "enable": true,
           "speed": 10,
           "size_min": 0.3,
           "sync": false
         }
       },
       "line_linked": {
         "enable": true,
-        "distance": 120, // Decreased distance for tighter connections
+        "distance": 120,
         "color": "#ffffff",
         "opacity": 0.5,
         "width": 1.5
       },
       "move": {
         "enable": true,
-        "speed": 4, // Slightly slower movement for a smoother effect
+        "speed": 4,
         "direction": "none",
         "random": false,
         "straight": false,
         "out_mode": "out",
         "attract": {
-          "enable": true, // Enable attraction effect
+          "enable": true,
           "rotateX": 600,
           "rotateY": 1200
         }
@@ -68,7 +68,7 @@ particlesJS('particles-js',
       "events": {
         "onhover": {
           "enable": true,
-          "mode": ["grab", "bubble", "repulse"] // Enable multiple modes on hover
+          "mode": ["grab", "bubble", "repulse"]
         },
         "onclick": {
           "enable": true,
@@ -105,17 +105,43 @@ particlesJS('particles-js',
     "retina_detect": true,
     "config_demo": {
       "hide_card": false,
-      "background_color": "#1a2a6c", // Gradient start color
+      "background_color": "#1a2a6c",
       "background_image": "",
       "background_position": "50% 50%",
       "background_repeat": "no-repeat",
       "background_size": "cover",
       "background_gradient": {
-        "type": "radial", // Radial gradient effect
-        "colors": ["#1a2a6c", "#b21f1f", "#fdbb2d"], // Gradient colors
-        "direction": "center" // Gradient direction
+        "type": "radial",
+        "colors": ["#1a2a6c", "#b21f1f", "#fdbb2d"],
+        "direction": "center"
       }
     }
   }
-
 );
+
+// Cursor-following dot implementation
+const cursorDot = document.createElement("div");
+cursorDot.style.position = "fixed";
+cursorDot.style.width = "10px";
+cursorDot.style.height = "10px";
+cursorDot.style.backgroundColor = "black";
+cursorDot.style.borderRadius = "50%";
+cursorDot.style.pointerEvents = "none";
+cursorDot.style.zIndex = "1000";
+cursorDot.style.transition = "transform 0.1s ease";
+document.body.appendChild(cursorDot);
+
+let mouseX = 0, mouseY = 0;
+
+// Smooth motion effect
+document.addEventListener("mousemove", (event) => {
+  mouseX = event.clientX;
+  mouseY = event.clientY;
+});
+
+// Animation loop for smooth motion
+function animateDot() {
+  cursorDot.style.transform = `translate(${mouseX - 5}px, ${mouseY - 5}px)`;
+  requestAnimationFrame(animateDot);
+}
+animateDot();