Update stars.

src/snek/static/sandbox.css

@@ -0,0 +1,28 @@
+/* each star */
+    .star {
+      position: absolute;
+      width: 2px;
+      height: 2px;
+      background: #fff;
+      border-radius: 50%;
+      opacity: 0;
+      /* flicker animation */
+      animation: twinkle ease-in-out infinite;
+    }
+
+    @keyframes twinkle {
+      0%, 100% { opacity: 0; }
+      50%      { opacity: 1; }
+    }
+
+    /* optional page content */
+    .content {
+      position: relative;
+      z-index: 1;
+      color: #eee;
+      font-family: sans-serif;
+      text-align: center;
+      top: 40%;
+      transform: translateY(-40%);
+    }
+

src/snek/templates/app.html

@@ -19,6 +19,7 @@
   <script src="/user-list.js"></script>
   <script src="/message-list.js" type="module"></script>
   <script src="/chat-input.js" type="module"></script>
+  <link rel="stylesheet" href="/sandbox.css">
   <link rel="stylesheet" href="/user-list.css">
 
   <link rel="stylesheet" href="/base.css">
@@ -78,5 +79,6 @@ let installPrompt = null
     
         ;
     </script>
+    {% include "sandbox.html" %}
 </body>
 </html>

src/snek/templates/sandbox.html

@@ -0,0 +1,31 @@
+
+							<script>
+                            	
+    // number of stars you want
+    const STAR_COUNT = 200;
+    const body = document.body;
+
+    for (let i = 0; i < STAR_COUNT; i++) {
+      const star = document.createElement('div');
+      star.classList.add('star');
+
+      // random position within the viewport
+      star.style.left  = Math.random() * 100 + '%';
+      star.style.top   = Math.random() * 100 + '%';
+
+      // random size (optional)
+      const size = Math.random() * 2 + 1; // between 1px and 3px
+      star.style.width  = size + 'px';
+      star.style.height = size + 'px';
+
+      // random animation timing for natural flicker
+      const duration = Math.random() * 3 + 2;   // 2s–5s
+      const delay    = Math.random() * 5;       // 0s–5s
+      star.style.animationDuration = duration + 's';
+      star.style.animationDelay    = delay + 's';
+
+      body.appendChild(star);
+    }
+  
+
+							</script>