Update main.js

assets/js/main.js

@@ -1,18 +1,28 @@
+
+//firefly.js
 const fireflies = document.querySelector('.fireflies');
 
-for (let i = 0; i < 12; i++) { // Create 10 fireflies
+for (let i = 0; i < 10; i++) { // Create 10 fireflies
   const firefly = document.createElement('div');
   firefly.classList.add('firefly');
-  firefly.style.top = `${random(-200, 200)}px`;
-  firefly.style.left = `${random(-200, 200)}px`;
+  firefly.style.top = `${random(0, 100)}vh`; // Move to random vertical position
+  firefly.style.left = `${random(0, 100)}vw`; // Move to random horizontal position
   firefly.style.animationDelay = `${random(0, 2)}s`;
 
-  // Add movement animation
+  // Add movement animation with fade-out
   firefly.animate([
-    { top: `${random(-200, 200)}px`, left: `${random(-200, 200)}px` },
-    { top: `${random(-200, 200)}px`, left: `${random(-200, 200)}px` }
+    { 
+      top: `${random(0, 100)}vh`, 
+      left: `${random(0, 100)}vw`, 
+      opacity: 1 
+    },
+    { 
+      top: `${random(0, 100)}vh`, 
+      left: `${random(0, 100)}vw`, 
+      opacity: 0 
+    }
   ], {
-    duration: 2000, // 2 seconds
+    duration: 4000, // 4 seconds
     iterations: Infinity, // Repeat indefinitely
     easing: 'ease-out' // Smooth animation
   });