feat: shooting stars

components/stars.tsx

@@ -20,6 +20,28 @@ export function StarsRenderer() {
       alpha: number;
       speed: number;
     }[] = [];
+    const shootingStars: {
+      x: number;
+      y: number;
+      vx: number;
+      vy: number;
+      life: number;
+      maxLife: number;
+    }[] = [];
+
+    function spawnShootingStar() {
+      const angle = Math.PI / 4 + Math.random() * 0.3;
+      const speed = 6 + Math.random() * 4;
+
+      shootingStars.push({
+        x: Math.random() * canvas.width,
+        y: Math.random() * canvas.height * 0.5,
+        vx: Math.cos(angle) * speed,
+        vy: Math.sin(angle) * speed,
+        life: 0,
+        maxLife: 30,
+      });
+    }
 
     function resize() {
       canvas.width = window.innerWidth;
@@ -34,7 +56,7 @@ export function StarsRenderer() {
         y: Math.random() * canvas.height,
         r: Math.random() * 1.5,
         alpha: Math.random(),
-        speed: Math.random() * 0.04,
+        speed: Math.random() * 0.03,
       });
     }
 
@@ -54,13 +76,41 @@ export function StarsRenderer() {
           s.speed *= -1;
         }
 
-        ctx.globalAlpha = s.alpha;
+        ctx.globalAlpha = Math.min(s.alpha, 1);
         ctx.beginPath();
         ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
         ctx.fillStyle = "white";
         ctx.fill();
       }
 
+      if (Math.random() < 0.002) {
+        spawnShootingStar();
+      }
+
+      for (let i = shootingStars.length - 1; i >= 0; i--) {
+        const s = shootingStars[i];
+
+        s.x += s.vx;
+        s.y += s.vy;
+        s.life++;
+
+        const t = s.life / s.maxLife;
+
+        const alpha = 1 - t;
+
+        ctx.strokeStyle = `rgba(255,255,255,${alpha})`;
+        ctx.lineWidth = 2;
+
+        ctx.beginPath();
+        ctx.moveTo(s.x, s.y);
+        ctx.lineTo(s.x - s.vx * 5, s.y - s.vy * 5);
+        ctx.stroke();
+
+        if (s.life > s.maxLife) {
+          shootingStars.splice(i, 1);
+        }
+      }
+
       requestAnimationFrame(draw);
     }