feat: add StarField class with configurable twinkling stars to sandbox page

Introduce a new StarField JavaScript class that generates animated star elements with customizable count, size range, speed, and color. Instantiate it on document body with default settings to enhance the sandbox visual experience.

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>