From da8e7e09b5f6bc3883d4b80a8f2ac35e4e463659 Mon Sep 17 00:00:00 2001
From: Richard Zink <Richard Zink>
Date: Wed, 7 Oct 2026 07:05:53 +0200
Subject: [PATCH] Test clouds2 effect with day cycle

---
 index.html | 45 ++++++++++++++++++---------------------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index e404d26..f194c0d 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vanta Clouds</title>
+    <title>Vanta Clouds2</title>
     <style>
         html, body { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; }
         #vanta { width: 100vw; height: 100vh; }
@@ -17,7 +17,7 @@
             background: rgba(28, 27, 31, 0.5);
             padding: 8px 14px;
             border-radius: 6px;
-            z-index: 10;
+            z-index: +10;
             letter-spacing: 1px;
         }
     </style>
@@ -26,7 +26,7 @@
     <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.21/dist/vanta.clouds.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds2.min.js"></script>
     <script>
         var effect = VANTA.CLOUDS({
             el: "#vanta",
@@ -42,10 +42,7 @@
             backgroundAlpha: 1,
             skyColor: 0x1c1b1f,
             cloudColor: 0x6d6a63,
-            cloudShadowColor: 0x100f12,
-            sunColor: 0xe0914f,
-            sunGlareColor: 0xc15c46,
-            sunlightColor: 0xd6b46a
+            lightColor: 0xe6dfd1
         });
 
         function hexToRgb(h) {
@@ -68,17 +65,17 @@
         var CYCLE = 20000;
 
         var palette = [
-            { t: 0.00, sky: 0x100f12, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x3a383d, sunGlare: 0x29282c, sunLight: 0x29282c },
-            { t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x4a4855, sunGlare: 0x3a383d, sunLight: 0x54514f },
-            { t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, cloudShadow: 0x1c1b1f, sun: 0xa85f1d, sunGlare: 0xc56a2b, sunLight: 0xd6b46a },
-            { t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, cloudShadow: 0x29282c, sun: 0xe0914f, sunGlare: 0xe0914f, sunLight: 0xe0914f },
-            { t: 0.40, sky: 0x4a3a30, cloud: 0x999187, cloudShadow: 0x54514f, sun: 0xe6dfd1, sunGlare: 0xe0914f, sunLight: 0xf3ede1 },
-            { t: 0.50, sky: 0x54514f, cloud: 0xb0a89a, cloudShadow: 0x54514f, sun: 0xf3ede1, sunGlare: 0xe6dfd1, sunLight: 0xf3ede1 },
-            { t: 0.60, sky: 0x4a4540, cloud: 0xa59a89, cloudShadow: 0x54514f, sun: 0xe6dfd1, sunGlare: 0xe0914f, sunLight: 0xe6dfd1 },
-            { t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, cloudShadow: 0x29282c, sun: 0xe0914f, sunGlare: 0xe0914f, sunLight: 0xe0914f },
-            { t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, cloudShadow: 0x1c1b1f, sun: 0xc15c46, sunGlare: 0xa85f1d, sunLight: 0xd6b46a },
-            { t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x54514f, sunGlare: 0x3a383d, sunLight: 0x54514f },
-            { t: 1.00, sky: 0x100f12, cloud: 0x54514f, cloudShadow: 0x100f12, sun: 0x3a383d, sunGlare: 0x29282c, sunLight: 0x29282c }
+            { t: 0.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d },
+            { t: 0.08, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x4a4855 },
+            { t: 0.18, sky: 0x2a2429, cloud: 0x6d5a4f, light: 0xa85f1d },
+            { t: 0.28, sky: 0x4a3528, cloud: 0x8a6a5a, light: 0xd6b46a },
+            { t: 0.40, sky: 0x4a3a30, cloud: 0x999187, light: 0xe0914f },
+            { t: 0.50, sky: 0x54514f, cloud: 0xb0a89a, light: 0xf3ede1 },
+            { t: 0.60, sky: 0x4a4540, cloud: 0xa59a89, light: 0xe6dfd1 },
+            { t: 0.70, sky: 0x3a2a22, cloud: 0x8a6a5a, light: 0xe0914f },
+            { t: 0.82, sky: 0x2a1f1f, cloud: 0x6d4a44, light: 0xc15c46 },
+            { t: 0.92, sky: 0x1c1b1f, cloud: 0x54514f, light: 0x54514f },
+            { t: 1.00, sky: 0x100f12, cloud: 0x54514f, light: 0x3a383d }
         ];
 
         function getColor(t) {
@@ -91,14 +88,11 @@
                     return {
                         sky: lerpColor(palette[i].sky, palette[i + 1].sky, s),
                         cloud: lerpColor(palette[i].cloud, palette[i + 1].cloud, s),
-                        cloudShadow: lerpColor(palette[i].cloudShadow, palette[i + 1].cloudShadow, s),
-                        sun: lerpColor(palette[i].sun, palette[i + 1].sun, s),
-                        sunGlare: lerpColor(palette[i].sunGlare, palette[i + 1].sunGlare, s),
-                        sunLight: lerpColor(palette[i].sunLight, palette[i + 1].sunLight, s)
+                        light: lerpColor(palette[i].light, palette[i + 1].light, s)
                     };
                 }
             }
-            return { sky: palette[0].sky, cloud: palette[0].cloud, cloudShadow: palette[0].cloudShadow, sun: palette[0].sun, sunGlare: palette[0].sunGlare, sunLight: palette[0].sunLight };
+            return { sky: palette[0].sky, cloud: palette[0].cloud, light: palette[0].light };
         }
 
         var startTime = Date.now();
@@ -118,10 +112,7 @@
             effect.setOptions({
                 skyColor: c.sky,
                 cloudColor: c.cloud,
-                cloudShadowColor: c.cloudShadow,
-                sunColor: c.sun,
-                sunGlareColor: c.sunGlare,
-                sunlightColor: c.sunLight
+                lightColor: c.light
             });
             clockEl.textContent = formatTime(t * 1440);
             requestAnimationFrame(animate);