From 50e97bb613ee18504d13f69ed7a0a46dcf9f4b03 Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Mon, 23 Jun 2025 15:52:34 +1000
Subject: [PATCH] Isolate hue-rotate animation to background layer only

- Create separate background layer using ::before pseudo-element
- Move hue-rotate animation to background layer with z-index: -1
- Remove filter from main container to prevent inheritance
- Use equivalent gradient colors in CSS (pink-100, purple-50, indigo-100)
- Foreground elements (brain emoji, text) now maintain original colors
- Background still animates smoothly without affecting content
---
 examples/chat-ui/src/components/ChatApp.tsx |  2 +-
 examples/chat-ui/src/index.css              | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index d747e4e..caa52c5 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -104,7 +104,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"
+      className="flex h-dvh w-screen overflow-clip animated-bg-container"
       style={{ '--random-delay': `${animationDelay}s` } as React.CSSProperties}
     >
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
diff --git a/examples/chat-ui/src/index.css b/examples/chat-ui/src/index.css
index 8eef8e2..647e290 100644
--- a/examples/chat-ui/src/index.css
+++ b/examples/chat-ui/src/index.css
@@ -11,7 +11,19 @@
   }
 }
 
-.animated-hue-bg {
+.animated-bg-container {
+  position: relative;
+}
+
+.animated-bg-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #fdf2f8, #faf5ff, #eef2ff);
   animation: hue-rotate 60s linear infinite;
   animation-delay: var(--random-delay, 0s);
+  z-index: -1;
 }