1 files changed, 57 insertions, 0 deletions
diff --git a/stars.js b/stars.js
new file mode 100644
index 0000000..347d7c0
--- /dev/null
+++ b/stars.js
@@ -0,0 +1,57 @@
+function animate() {
+    const bg = document.querySelector("#bg");
+
+    for (const star of bg.children) {
+        star.x += star.vx;
+        star.y += star.vy;
+        
+        star.style.left = `${star.x}px`;
+        star.style.top = `${star.y}px`;
+    }
+    
+    requestAnimationFrame(animate);
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const bg = document.createElement("div");
+    bg.setAttribute("id", "bg");
+
+    const numStars = Math.floor((window.innerWidth * window.innerHeight)/10_000);
+    for (let i = 0; i < numStars; i++) {
+        const star = document.createElement("div");
+        star.classList.add("star");
+        
+        star.x = Math.random() * window.innerWidth;
+        star.y = Math.random() * window.innerHeight;
+        
+        star.vx = (Math.random() - 0.5) * 0.2;
+        star.vy = (Math.random() - 0.5) * 0.2;
+        
+        star.style.left = `${star.x}px`;
+        star.style.top = `${star.y}px`;
+        
+        bg.appendChild(star);
+    }
+    document.body.prepend(bg);
+
+    var styleBlock = document.createElement("style");
+    styleBlock.textContent = `
+        #bg {
+            position: fixed;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .star {
+            position: absolute;
+            width: 3px;
+            height: 3px;
+            border-radius: 50%;
+            background: #e6e6e6;
+            box-shadow: 0 0 4px white;
+        }
+    `;
+    document.head.append(styleBlock);
+
+    requestAnimationFrame(animate);
+})
+\ No newline at end of file