Display simulated time

index.html

@@ -7,10 +7,24 @@
     <style>
         html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
         #vanta { width: 100vw; height: 100vh; }
+        #clock {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            color: #e6dfd1;
+            font-family: monospace;
+            font-size: 16px;
+            background: rgba(28, 27, 31, 0.5);
+            padding: 8px 14px;
+            border-radius: 6px;
+            z-index: 10;
+            letter-spacing: 1px;
+        }
     </style>
 </head>
 <body>
     <div id="vanta"></div>
+    <div id="clock">00:00</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.24/dist/vanta.clouds.min.js"></script>
     <script>
@@ -78,6 +92,14 @@
         }
 
         var startTime = Date.now();
+        var clockEl = document.getElementById('clock');
+
+        function formatTime(totalMinutes) {
+            var hours = Math.floor(totalMinutes / 60) % 24;
+            var minutes = Math.floor(totalMinutes % 60);
+            var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
+            return pad(hours) + ':' + pad(minutes);
+        }
 
         function animate() {
             var elapsed = (Date.now() - startTime) % CYCLE;
@@ -88,6 +110,7 @@
                 cloudColor: c.cloud,
                 lightColor: c.light
             });
+            clockEl.textContent = formatTime(t * 1440);
             requestAnimationFrame(animate);
         }