070500

src/components/TwinklingStars.astro

@@ -0,0 +1,62 @@
+---
+/**
+ * TwinkleStars.astro
+ * This component creates twinkling stars that are appended to the galaxy on interval.
+ * Twinkle stars are removed from the document after the animation is completed.
+ * The svg below is just a template for the script to clone and append to the galaxy.
+ */
+---
+
+<svg 
+  id="twinkle-star" 
+  class="template" 
+  width="149" 
+  height="149" 
+  viewBox="0 0 149 149" 
+  fill="none" 
+  xmlns="http://www.w3.org/2000/svg"
+  class="absolute left-full animate-twinkle"
+>
+  <circle cx="74" cy="74" r="11" fill="white"/>
+  <rect y="141.421" width="200" height="10" transform="rotate(-45 0 141.421)" fill="url(#paint0_linear_4_2)"/>
+  <rect x="7.07107" width="200" height="10" transform="rotate(45 7.07107 0)" fill="url(#paint1_linear_4_2)"/>
+  <defs>
+    <linearGradient id="paint0_linear_4_2" x1="0" y1="146.421" x2="200" y2="146.421" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#1E1E1E"/>
+      <stop offset="0.445" stop-color="white"/>
+      <stop offset="0.58721" stop-color="white"/>
+      <stop offset="1" stop-color="#1E1E1E"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_4_2" x1="7.07107" y1="5" x2="207.071" y2="5" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#1E1E1E"/>
+      <stop offset="0.42" stop-color="white"/>
+      <stop offset="0.555" stop-color="white"/>
+      <stop offset="1" stop-color="#1E1E1E"/>
+    </linearGradient>
+  </defs>
+</svg>
+
+<script is:inline>
+  // Generate a twinkle star and append it to the galaxy, remove it after animation.
+  function generateTwinkleStar() {
+    const twinkleStarTemplate = document.getElementById("twinkle-star")
+    if (!twinkleStarTemplate) { return; }
+    // Clone the twinkle star template and set its attributes.
+    const twinkleStar = twinkleStarTemplate.cloneNode(true);
+    twinkleStar.style.position = "absolute";
+    twinkleStar.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
+    twinkleStar.style.top = Math.floor(Math.random() * (window.innerHeight/3)) + "px";
+    twinkleStar.style.width = window.innerWidth < 768 ? Math.floor(Math.random() * (15 - 7.5 + 1) + 7.5) : Math.floor(Math.random() * (30 - 15 + 1) + 15) + "px";
+    twinkleStar.style.height = twinkleStar.style.width;
+    twinkleStar.classList.add("twinkle");
+    document.getElementById("galaxy").appendChild(twinkleStar);
+
+    // Remove the twinkle star after the animation is completed.
+    setTimeout(() => {
+      twinkleStar.remove();
+    }, 2500);
+  }
+
+  setInterval(generateTwinkleStar, 5000);
+</script>
+