From b33bde6b0ec9e73a96ce9553c827279d292dd589 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Sat, 21 Jun 2025 13:58:11 +1000
Subject: [PATCH] Use CSS custom property for cleaner random animation delay

- Move animation-delay to CSS using custom property --random-delay
- JavaScript still required to generate random value (CSS has no random functions)
- Cleaner separation between styling (CSS) and logic (JavaScript)
- Maintains same functionality with better organization
---
 examples/chat-ui/src/components/ChatApp.tsx | 2 +-
 examples/chat-ui/src/index.css              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

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);
 }