circadian mode

app/layout.tsx

@@ -5,7 +5,7 @@ import './globals.css'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Functions Playground',
+  title: 'Web Chat',
   description: 'Navigate to URLs and perform realtime similarity search',
 }
 

app/page.module.css

@@ -22,18 +22,15 @@
   content: '';
   position: absolute;
   top: -50%; right: -50%; bottom: -50%; left: -50%;
-  background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent);
   background-repeat: no-repeat;
   background-position: 50%;
   transform: rotate(45deg) scale(1.5);
-  backdrop-filter: blur(30px);
 }
 
 .background::after {
   content: '';
   position: absolute;
   top: -50%; right: -50%; bottom: -50%; left: -50%;
-  background-image: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), transparent);
   background-repeat: no-repeat;
   background-position: 50%;
   transform: rotate(-45deg) scale(1.5);
@@ -405,3 +402,7 @@
   margin-right: 10px;
 }
 
+@keyframes moveClouds {
+  0% { background-position: 0 0; }
+  100% { background-position: 1000px 500px; }
+}

app/page.tsx

@@ -13,7 +13,7 @@ import { updateBackground } from './util';
 const Page: React.FC = () => {
   useEffect(() => {
     updateBackground();
-    const interval = setInterval(updateBackground, 6000);
+    const interval = setInterval(updateBackground, 600);
 
     return () => clearInterval(interval);
   }, []);

app/util.ts

@@ -8,48 +8,59 @@ export function updateBackground(): void {
         return;
     }
 
-    let color1, color2, color3; // Colors for the radial gradients and background
+    let color1, color2, color3, color4; // Colors for the radial gradients and background
+    let cloudStyle = ''; // Additional style for cloud effects
 
-    if (hour >= 6 && hour < 8) {
-        // Early morning
-        color1 = 'rgba(173, 216, 230, 0.3)';
-        color2 = 'rgba(135, 206, 250, 0.3)';
-        color3 = '#B0E0E6'; // Powder blue
-    } else if (hour >= 8 && hour < 10) {
-        // Mid-morning
-        color1 = 'rgba(240, 230, 140, 0.3)';
-        color2 = 'rgba(238, 232, 170, 0.3)';
-        color3 = '#F0E68C'; // Khaki
-    } else if (hour >= 10 && hour < 12) {
-        // Late morning
-        color1 = 'rgba(250, 250, 210, 0.3)';
-        color2 = 'rgba(255, 255, 224, 0.3)';
-        color3 = '#FFFACD'; // Lemon chiffon
-    } else if (hour >= 12 && hour < 14) {
-        // Early afternoon
-        color1 = 'rgba(255, 182, 193, 0.3)';
-        color2 = 'rgba(255, 192, 203, 0.3)';
-        color3 = '#FFB6C1'; // Light pink
-    } else if (hour >= 14 && hour < 16) {
-        // Mid-afternoon
-        color1 = 'rgba(255, 160, 122, 0.3)';
-        color2 = 'rgba(255, 127, 80, 0.3)';
-        color3 = '#FFA07A'; // Light salmon
-    } else if (hour >= 16 && hour < 18) {
-        // Late afternoon to early evening
-        color1 = 'rgba(255, 99, 71, 0.3)';
-        color2 = 'rgba(255, 69, 0, 0.3)';
-        color3 = '#FF4500'; // Orange red
+    if (hour >= 5 && hour < 7) {
+        // Dawn
+        color1 = 'rgba(255, 140, 0, 0.6)'; // Dark orange (sunrise)
+        color2 = 'rgba(135, 206, 250, 0.6)'; // Sky blue (light sky)
+        color3 = '#F0E68C'; // Light khaki (morning light)
+    } else if (hour >= 7 && hour < 17) {
+        // Daylight
+        color1 = 'rgba(135, 206, 250, 0.6)'; // Light sky blue (high sky)
+        color2 = 'rgba(255, 255, 255, 0.6)'; // White (sun)
+        color3 = '#87CEEB'; // Sky blue (clear day)
+        cloudStyle = ', radial-gradient(circle at 10% 30%, rgba(255, 255, 255, 0.8), transparent 80%), radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.8), transparent 80%)';
+    } else if (hour >= 17 && hour < 20) {
+        // Dusk
+        color1 = 'rgba(250, 128, 114, 0.6)'; // Salmon (sunset)
+        color2 = 'rgba(100, 149, 237, 0.6)'; // Cornflower blue (evening sky)
+        color3 = '#B0C4DE'; // Light steel blue (twilight)
     } else {
         // Night
-        color1 = 'black';
-        color2 = 'black';
-        color3 = '#000080'; // Navy blue for a slightly softer night effect
+        color1 = 'rgba(0, 0, 0, 1)'; // Pure black
+        color2 = 'rgba(0, 0, 0, 1)'; // Pure black
+        color3 = '#000000'; // Pure black
     }
 
-    // Set the background image and color
+    // Define color4 for the pseudo-elements
+    if (hour >= 6 && hour < 18) {
+        // Daytime: lighter color for a subtle effect
+        color4 = 'rgba(255, 255, 255, 0.2)';
+    } else {
+        // Nighttime: darker color for a stronger effect
+        color4 = 'rgba(0, 0, 0, 0.1)';
+    }
+
+    // Set the background image, color, and cloud effect
     background.style.backgroundImage = 
-        `radial-gradient(circle at 20% 20%, ${color1}, transparent 70%), 
-         radial-gradient(circle at 80% 80%, ${color2}, transparent 70%)`;
+        `radial-gradient(circle at 50% 20%, ${color1}, transparent 90%), 
+         radial-gradient(circle at 50% 80%, ${color2}, transparent 90%)${cloudStyle}`;
     background.style.backgroundColor = color3;
-}
+
+    // Cloud animation
+    if (cloudStyle) {
+        background.style.animation = 'moveClouds 60s linear infinite';
+    } else {
+        background.style.animation = 'none';
+    }
+    // Set the styles for the pseudo-elements
+    const beforeElement: any = document.querySelector('.background::before');
+    const afterElement: any = document.querySelector('.background::after');
+
+    if (beforeElement && afterElement) {
+        beforeElement.style.backgroundImage = `radial-gradient(closest-side, ${color4}, transparent)`;
+        afterElement.style.backgroundImage = `radial-gradient(closest-side, ${color4}, transparent)`;
+    }
+}