Add moon and sun visuals with day cycle

index.html

@@ -7,6 +7,34 @@
     <style>
         html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
         #vanta { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
+        #moon {
+            position: fixed;
+            top: 80px;
+            right: 80px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 35% 35%, #e6dfd1, #999187);
+            box-shadow: 0 0 30px rgba(229, 224, 209, 0.4);
+            opacity: 0;
+            transition: opacity 0.5s;
+            z-index: 5;
+            pointer-events: none;
+        }
+        #sun {
+            position: fixed;
+            top: 80px;
+            right: 80px;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 35% 35%, #f3ede1, #e0914f);
+            box-shadow: 0 0 60px rgba(224, 145, 79, 0.6);
+            opacity: 0;
+            transition: opacity 0.5s;
+            z-index: 5;
+            pointer-events: none;
+        }
         #clock {
             position: fixed;
             top: 20px;
@@ -24,6 +52,8 @@
 </head>
 <body>
     <div id="vanta"></div>
+    <div id="moon"></div>
+    <div id="sun"></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@latest/dist/vanta.clouds2.min.js"></script>
@@ -66,17 +96,17 @@
         var CYCLE = 20000;
 
         var palette = [
-            { t: 0.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x2a2822, bg: 0x0a0a14 },
+            { t: 0.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x999187, bg: 0x0a0a14, moon: 1, sun: 0 },
-            { t: 0.08, sky: 0x141428, cloud: 0x2a2822, light: 0x4a383d, bg: 0x1a1428 },
+            { t: 0.08, sky: 0x141428, cloud: 0x2a2822, light: 0x999187, bg: 0x1a1428, moon: 1, sun: 0 },
-            { t: 0.18, sky: 0x3a2a28, cloud: 0x4a2e1c, light: 0xa85f1d, bg: 0x4a2820 },
+            { t: 0.18, sky: 0x3a2a28, cloud: 0x4a2e1c, light: 0xa85f1d, bg: 0x4a2820, moon: 0.3, sun: 0.3 },
-            { t: 0.28, sky: 0x6a4030, cloud: 0x5a3a28, light: 0xd6824a, bg: 0x7a4530 },
+            { t: 0.28, sky: 0x6a4030, cloud: 0x5a3a28, light: 0xd6824a, bg: 0x7a4530, moon: 0, sun: 0.8 },
-            { t: 0.40, sky: 0x4a5060, cloud: 0x6d6a63, light: 0xe0d4be, bg: 0x506080 },
+            { t: 0.40, sky: 0x4a5060, cloud: 0x6d6a63, light: 0xe0d4be, bg: 0x506080, moon: 0, sun: 1 },
-            { t: 0.50, sky: 0x3a4458, cloud: 0x6d6a63, light: 0xe6dfd1, bg: 0x445878 },
+            { t: 0.50, sky: 0x3a4458, cloud: 0x6d6a63, light: 0xe6dfd1, bg: 0x445878, moon: 0, sun: 1 },
-            { t: 0.60, sky: 0x4a5060, cloud: 0x5a5a55, light: 0xd6b46a, bg: 0x506070 },
+            { t: 0.60, sky: 0x4a5060, cloud: 0x5a5a55, light: 0xd6b46a, bg: 0x506070, moon: 0, sun: 0.9 },
-            { t: 0.70, sky: 0x5a4030, cloud: 0x4a3a28, light: 0xe0914f, bg: 0x6a4530 },
+            { t: 0.70, sky: 0x5a4030, cloud: 0x4a3a28, light: 0xe0914f, bg: 0x6a4530, moon: 0, sun: 0.7 },
-            { t: 0.82, sky: 0x3a2030, cloud: 0x3a2a2a, light: 0xa85f1d, bg: 0x4a2030 },
+            { t: 0.82, sky: 0x3a2030, cloud: 0x3a2a2a, light: 0xa85f1d, bg: 0x4a2030, moon: 0.3, sun: 0.2 },
-            { t: 0.92, sky: 0x1a1428, cloud: 0x2a2822, light: 0x4a383d, bg: 0x1a1428 },
+            { t: 0.92, sky: 0x1a1428, cloud: 0x2a2822, light: 0x999187, bg: 0x1a1428, moon: 0.9, sun: 0 },
-            { t: 1.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x2a2822, bg: 0x0a0a14 }
+            { t: 1.00, sky: 0x0a0a14, cloud: 0x2a2822, light: 0x999187, bg: 0x0a0a14, moon: 1, sun: 0 }
         ];
 
         function getColor(t) {
@@ -90,15 +120,19 @@
                         sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
                         cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
                         light: lerpColor(palette[i].light, palette[i + 1].light, s),
-                        bg: lerpColor(palette[i].bg, palette[i + 1].bg, s)
+                        bg: lerpColor(palette[i].bg, palette[i + 1].bg, s),
+                        moon: palette[i].moon + (palette[i + 1].moon - palette[i].moon) * s,
+                        sun: palette[i].sun + (palette[i + 1].sun - palette[i].sun) * s
                     };
                 }
             }
-            return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light, bg: palette[0].bg };
+            return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light, bg: palette[0].bg, moon: 1, sun: 0 };
         }
 
         var startTime = Date.now();
         var clockEl = document.getElementById('clock');
+        var moonEl = document.getElementById('moon');
+        var sunEl = document.getElementById('sun');
 
         function formatTime(totalMinutes) {
             var hours = Math.floor(totalMinutes / 60) % 24;
@@ -118,6 +152,8 @@
                 backgroundColor: c.bg
             });
             document.body.style.backgroundColor = '#' + ('00000' + c.bg.toString(16)).slice(-6);
+            moonEl.style.opacity = c.moon;
+            sunEl.style.opacity = c.sun;
             clockEl.textContent = formatTime(t * 1440);
             requestAnimationFrame(animate);
         }