From 433eac58f1178093c3c76a323fc0509a3a728f16 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Fri, 20 Jun 2025 21:05:39 +1000
Subject: [PATCH] Add random starting point for hue-rotate animation

- Generate random negative animation-delay between 0 and -60 seconds
- Starts animation at random point in the 60-second cycle
- Each page load will show different initial colors
- Uses useState with initializer function to set delay once on mount
- CSS doesn't have random functions, so JavaScript handles the randomization
---
 examples/chat-ui/src/components/ChatApp.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index 256afc4..ad1f614 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -22,6 +22,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
   const [selectedModel, setSelectedModel] = useState<Model>(getSelectedModel());
   const [apiKeyUpdateTrigger, setApiKeyUpdateTrigger] = useState<number>(0);
   const [mcpTools, setMcpTools] = useState<Tool[]>([]);
+  const [animationDelay] = useState<number>(() => -Math.random() * 60);
   const db = useIndexedDB();
 
   const handleApiKeyUpdate = () => {
@@ -102,7 +103,10 @@ const ChatApp: React.FC<ChatAppProps> = () => {
   };
 
   return (
-    <div className="flex h-dvh w-screen overflow-clip bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100 animated-hue-bg">
+    <div 
+      className="flex h-dvh w-screen overflow-clip bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100 animated-hue-bg"
+      style={{ animationDelay: `${animationDelay}s` }}
+    >
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}
         {false && (