@patrick fix the smoothness of the animations please

src/js/animation/Meteor.js

@@ -7,34 +7,34 @@ class Meteor {
     this.life = 1.0;
     this.particles = [];
 
-    // Enhanced color palette
     this.colorType = Math.floor(Math.random() * 4);
     this.colors = this.getMeteorColors();
 
-    // Get container dimensions for pixel-based positioning
     this.containerRect = container.getBoundingClientRect();
 
     // Start from random edge with PIXEL-based positioning
     const edge = Math.floor(Math.random() * 4);
-    if (edge === 0) {
+    switch (edge) {
-      // Top
+      case 0:
-      this.x = Math.random() * this.containerRect.width;
+        // Top
-      this.y = -20;
+        this.x = Math.random() * this.containerRect.width;
-    } else if (edge === 1) {
+        this.y = -20;
-      // Right
+      case 1:
-      this.x = this.containerRect.width + 20;
+        // Right
-      this.y = Math.random() * this.containerRect.height;
+        this.x = this.containerRect.width + 20;
-    } else if (edge === 2) {
+        this.y = Math.random() * this.containerRect.height;
-      // Bottom
+      case 2:
-      this.x = Math.random() * this.containerRect.width;
+        // Bottom
-      this.y = this.containerRect.height + 20;
+        this.x = Math.random() * this.containerRect.width;
-    } else {
+        this.y = this.containerRect.height + 20;
-      // Left
+      case 3:
-      this.x = -20;
+        // Left
-      this.y = Math.random() * this.containerRect.height;
+        this.x = -20;
+        this.y = Math.random() * this.containerRect.height;
+      default:
+        console.log("Error creating Meteor direction");
     }
 
-    // More dynamic movement patterns
     const centerX = this.containerRect.width / 2 + (Math.random() - 0.5) * 200;
     const centerY = this.containerRect.height / 2 + (Math.random() - 0.5) * 200;
     this.angle =
@@ -84,7 +84,6 @@ class Meteor {
     const size = Math.random() * 4 + 10;
     const colors = this.colors;
 
-    // Create enhanced meteor head with multiple layers
     const head = document.createElement("div");
     head.style.width = `${size}px`;
     head.style.height = `${size}px`;
@@ -127,7 +126,6 @@ class Meteor {
 
     this.container.appendChild(this.element);
 
-    // Add trail particles
     this.createTrailParticles();
   }
 
@@ -159,7 +157,6 @@ class Meteor {
   }
 
   createTrailParticles() {
-    // Create initial trail particles
     for (let i = 0; i < 5; i++) {
       this.addTrailParticle();
     }
@@ -196,12 +193,10 @@ class Meteor {
   }
 
   update() {
-    // Smooth pixel-based movement
     this.x += this.dx;
     this.y += this.dy;
     this.life -= 0.005;
 
-    // Use pixel positioning for smooth movement
     this.element.style.left = `${this.x}px`;
     this.element.style.top = `${this.y}px`;
     this.element.style.opacity = this.life;
@@ -216,7 +211,6 @@ class Meteor {
       }
     });
 
-    // Add new trail particles periodically
     if (Math.random() < 0.3) {
       this.addTrailParticle();
     }
@@ -239,7 +233,6 @@ class Meteor {
       }
     }
 
-    // Enhanced removal condition with fading
     if (
       this.x < -50 ||
       this.x > this.containerRect.width + 50 ||
@@ -260,7 +253,6 @@ class Meteor {
   }
 
   remove() {
-    // Add explosion effect when meteor dies
     if (this.life > 0.3) {
       this.createExplosion();
     }

src/js/animation/Star.js

@@ -13,7 +13,6 @@ class Star {
     this.x = Math.random() * 100;
     this.y = Math.random() * 100;
 
-    // Add color variation
     this.color = this.getRandomStarColor();
     this.init();
   }

src/js/animation/starBackground.js

@@ -1,14 +1,12 @@
 import Star from "./Star.js";
 import Meteor from "./Meteor.js";
 
-// State
 const starInstances = [];
 const meteorInstances = [];
 
-// Enhanced star creation with more stars
 function createStars() {
   const stars = document.getElementById("stars");
-  const count = 400; // More stars for richer background
+  const count = 400;
   stars.innerHTML = "";
   starInstances.length = 0;
 
@@ -18,7 +16,6 @@ function createStars() {
   }
 }
 
-// Inject required CSS for star animations
 function injectStarCSS() {
   const style = document.createElement("style");
   style.textContent = `
@@ -36,9 +33,8 @@ function injectStarCSS() {
   document.head.appendChild(style);
 }
 
-// More frequent meteor spawning with variable rates
 function trySpawnMeteor() {
-  const spawnChance = 0.12; // Increased spawn rate
+  const spawnChance = 0.12;
   if (Math.random() < spawnChance) {
     const stars = document.getElementById("stars");
     const newMeteor = new Meteor(stars);
@@ -46,7 +42,6 @@ function trySpawnMeteor() {
   }
 }
 
-// Enhanced animation loop
 function animateStars() {
   starInstances.forEach((star) => star.update());
 
@@ -60,7 +55,6 @@ function animateStars() {
   requestAnimationFrame(animateStars);
 }
 
-// Meteor burst effect
 function createMeteorBurst() {
   for (let i = 0; i < 3; i++) {
     setTimeout(() => {
@@ -71,20 +65,15 @@ function createMeteorBurst() {
   }
 }
 
-// Initialize everything
 function init() {
   injectStarCSS();
   createStars();
   animateStars();
 
-  // More frequent meteor spawning
   setInterval(trySpawnMeteor, 2000);
-
-  // Add occasional meteor bursts
   setInterval(createMeteorBurst, 15000);
 }
 
-// Start when DOM is ready
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", init);
 } else {