From f94a80cbd92a3f30187a4c6cdacdc0c84eb6b13f Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Fri, 20 Jun 2025 21:03:52 +1000
Subject: [PATCH] Switch to hue-rotate animation for background gradient
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Revert complex conical gradient approach
- Return to original linear gradient (pink-100 → purple-50 → indigo-100)
- Add hue-rotate filter animation cycling through 360 degrees
- 8s duration for fast testing
- Simpler implementation with continuous color shifting
- Less control over saturation but smoother performance
---
 examples/chat-ui/src/components/ChatApp.tsx |  2 +-
 examples/chat-ui/src/index.css              | 72 ++-------------------
 2 files changed, 6 insertions(+), 68 deletions(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index 6025693..256afc4 100644
--- a/examples/chat-ui/src/components/ChatApp.tsx
+++ b/examples/chat-ui/src/components/ChatApp.tsx
@@ -102,7 +102,7 @@ const ChatApp: React.FC<ChatAppProps> = () => {
   };
 
   return (
-    <div className="flex h-dvh w-screen overflow-clip animated-gradient-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">
       <div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
         {/* Sidebar and Navbar components hidden but kept in codebase */}
         {false && (
diff --git a/examples/chat-ui/src/index.css b/examples/chat-ui/src/index.css
index b655fee..c29185c 100644
--- a/examples/chat-ui/src/index.css
+++ b/examples/chat-ui/src/index.css
@@ -2,77 +2,15 @@
 @plugin "@tailwindcss/typography";
 @config "../tailwind.config.js";
 
-@keyframes rotate-gradient {
+@keyframes hue-rotate {
   0% {
-    transform: rotate(0deg);
+    filter: hue-rotate(0deg);
   }
   100% {
-    transform: rotate(360deg);
+    filter: hue-rotate(360deg);
   }
 }
 
-.animated-gradient-bg {
-  position: relative;
-  overflow: hidden;
-}
-
-.animated-gradient-bg::before {
-  content: '';
-  position: absolute;
-  top: -200%;
-  left: -200%;
-  width: 500%;
-  height: 500%;
-  background: conic-gradient(
-    from 0deg,
-    #fef7ff,
-    #fce7f3,
-    #f3e8ff,
-    #e0e7ff,
-    #dbeafe,
-    #dcfce7,
-    #fef3c7,
-    #fed7aa,
-    #fecaca,
-    #fbb6ce,
-    #e9d5ff,
-    #c7d2fe,
-    #bfdbfe,
-    #bbf7d0,
-    #fef08a,
-    #fdba74,
-    #fca5a5,
-    #f9a8d4,
-    #ddd6fe,
-    #a5b4fc,
-    #93c5fd,
-    #86efac,
-    #facc15,
-    #fb923c,
-    #f87171,
-    #f472b6,
-    #c4b5fd,
-    #818cf8,
-    #60a5fa,
-    #4ade80,
-    #eab308,
-    #ea580c,
-    #ef4444,
-    #ec4899,
-    #a78bfa,
-    #6366f1,
-    #3b82f6,
-    #22c55e,
-    #ca8a04,
-    #dc2626,
-    #dc2626,
-    #db2777,
-    #9333ea,
-    #4f46e5,
-    #2563eb,
-    #16a34a,
-    #fef7ff
-  );
-  animation: rotate-gradient 8s linear infinite;
-  z-index: -1;
+.animated-hue-bg {
+  animation: hue-rotate 8s linear infinite;
 }