diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index ad1f614..30c5776 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -105,7 +105,7 @@ 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"
-      style={{ animationDelay: `${animationDelay}s` }}
+      style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}
diff --git a/examples/chat-ui/src/index.css b/examples/chat-ui/src/index.css
index 23f9a23..8eef8e2 100644
--- a/examples/chat-ui/src/index.css
+++ b/examples/chat-ui/src/index.css
@@ -13,4 +13,5 @@
 
 .animated-hue-bg {
   animation: hue-rotate 60s linear infinite;
+  animation-delay: var(--random-delay, 0s);
 }