Update.

src/snek/templates/sandbox.html

@@ -53,4 +53,63 @@ function updateStarColorDelayed(color) {
 app.ws.addEventListener("set_typing", (data) => {
   updateStarColorDelayed(data.data.color);
 });
+
+
+class StarField {
+  constructor(container = document.body, options = {}) {
+    this.container = container;
+    this.stars = [];
+    this.setOptions(options);
+  }
+
+  setOptions({
+    starCount = 200,
+    minSize = 1,
+    maxSize = 3,
+    speed = 5,
+    color = "white"
+  }) {
+    this.options = { starCount, minSize, maxSize, speed, color };
+  }
+
+  clear() {
+    this.stars.forEach(star => star.remove());
+    this.stars = [];
+  }
+
+  generate() {
+    this.clear();
+    const { starCount, minSize, maxSize, speed, color } = this.options;
+
+    for (let i = 0; i < starCount; i++) {
+      const star = document.createElement("div");
+      star.classList.add("star");
+      const size = Math.random() * (maxSize - minSize) + minSize;
+
+      Object.assign(star.style, {
+        left: `${Math.random() * 100}%`,
+        top: `${Math.random() * 100}%`,
+        width: `${size}px`,
+        height: `${size}px`,
+        backgroundColor: color,
+        position: "absolute",
+        borderRadius: "50%",
+        opacity: "0.8",
+        animation: `twinkle ${speed}s ease-in-out infinite`,
+      });
+
+      this.container.appendChild(star);
+      this.stars.push(star);
+    }
+  }
+}
+
+const starField = new StarField(document.body, {
+  starCount: 200,
+  minSize: 1,
+  maxSize: 3,
+  speed: 5,
+  color: "white"    
+});
+
 </script>