From 29ce2fe3b1f02bdf6a3e68bf152588d91389be6a Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 7 Nov 2022 12:10:18 +0100
Subject: [PATCH] refactor(landing-page): starfield script on splash component

---
 apps/landing-page/src/sections/splash.astro | 99 ++++++++++++++++++++-
 1 file changed, 97 insertions(+), 2 deletions(-)

diff --git a/apps/landing-page/src/sections/splash.astro b/apps/landing-page/src/sections/splash.astro
index aec113a..34a48b9 100644
--- a/apps/landing-page/src/sections/splash.astro
+++ b/apps/landing-page/src/sections/splash.astro
@@ -1,7 +1,6 @@
 ---
 import { generateImage } from "astro-eleventy-img";
 import { Icon } from "astro-icon";
-import Starfield from "~/sections/starfield.astro";
 import Copynpm from "~/components/copynpm.astro";
 
 const widths = [450, 800];
@@ -20,7 +19,9 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
 ---
 
 <section class="h-screen flex flex-col px-10 astro relative">
-  <Starfield client:load />
+  <div id="starfield" class="absolute -z-10 inset-0">
+    <canvas id="starfield-canvas"></canvas>
+  </div>
   <div
     class="relative flex flex-col-reverse justify-end pt-16 h-full astro-lg:grid-cols-2 place-items-center astro-lg:grid astro-lg:pt-0 astro-img:pt-10"
   >
@@ -67,6 +68,100 @@ const pngSrcset = png.map(({ srcset }) => srcset).join(",");
   </div>
 </section>
 
+<script>
+  const COUNT = 800;
+  const SPEED = 0.3;
+
+  class Star {
+    x: number;
+    y: number;
+    z: number;
+    xPrev: number;
+    yPrev: number;
+
+    constructor(x = 0, y = 0, z = 0) {
+      this.x = x;
+      this.y = y;
+      this.z = z;
+      this.xPrev = x;
+      this.yPrev = y;
+    }
+
+    update(width: number, height: number, speed: number) {
+      this.xPrev = this.x;
+      this.yPrev = this.y;
+      this.z += speed * 0.0675;
+      this.x += this.x * (speed * 0.0225) * this.z;
+      this.y += this.y * (speed * 0.0225) * this.z;
+      if (
+        this.x > width / 2 ||
+        this.x < -width / 2 ||
+        this.y > height / 2 ||
+        this.y < -height / 2
+      ) {
+        this.x = Math.random() * width - width / 2;
+        this.y = Math.random() * height - height / 2;
+        this.xPrev = this.x;
+        this.yPrev = this.y;
+        this.z = 0;
+      }
+    }
+
+    draw(ctx: CanvasRenderingContext2D) {
+      ctx.lineWidth = this.z;
+      ctx.beginPath();
+      ctx.moveTo(this.x, this.y);
+      ctx.lineTo(this.xPrev, this.yPrev);
+      ctx.stroke();
+    }
+  }
+
+  const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
+  let rafId = 0;
+
+  const canvas: HTMLCanvasElement = document.querySelector("#starfield-canvas");
+  const ctx = canvas.getContext("2d");
+
+  const container = document.querySelector("#starfield");
+  const resizeObserver = new ResizeObserver(setup);
+  resizeObserver.observe(container);
+
+  function setup() {
+    rafId > 0 && cancelAnimationFrame(rafId);
+    const { clientWidth: width, clientHeight: height } = container;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    ctx.scale(dpr, dpr);
+
+    for (const star of stars) {
+      star.x = Math.random() * width - width / 2;
+      star.y = Math.random() * height - height / 2;
+      star.z = 0;
+    }
+
+    ctx.translate(width / 2, height / 2);
+    ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
+    ctx.strokeStyle = "white";
+    rafId = requestAnimationFrame(frame);
+  }
+
+  function frame() {
+    const { clientWidth: width, clientHeight: height } = container;
+
+    for (const star of stars) {
+      star.update(width, height, SPEED);
+      star.draw(ctx);
+    }
+
+    ctx.fillRect(-width / 2, -height / 2, width, height);
+    rafId = requestAnimationFrame(frame);
+  }
+</script>
+
 <style>
   @keyframes float {
     0% {