From 668ecaff918a2fc7668f736b52569c7a5f09bbcc Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@glenmaddern.com>
Date: Fri, 20 Jun 2025 20:46:24 +1000
Subject: [PATCH] Add animated rotating conical gradient background

- Create large 500% conical gradient with pastel color cycle
- Position gradient off-screen (-200% top/left) for smooth rotation
- Add 8s linear infinite rotation animation for fast testing
- Use ::before pseudo-element to avoid repainting main content
- Cycle through various pastel shades (pink, purple, blue, green, yellow, orange)
- Performance-optimized: only transforms, no gradient repainting
---
 examples/chat-ui/src/components/ChatApp.tsx |  2 +-
 examples/chat-ui/src/index.css              | 75 +++++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/examples/chat-ui/src/components/ChatApp.tsx b/examples/chat-ui/src/components/ChatApp.tsx
index b1e65af..6025693 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 bg-gradient-to-br from-pink-100 via-purple-50 to-indigo-100">
+    <div className="flex h-dvh w-screen overflow-clip animated-gradient-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 9e728b8..b655fee 100644
--- a/examples/chat-ui/src/index.css
+++ b/examples/chat-ui/src/index.css
@@ -1,3 +1,78 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 @config "../tailwind.config.js";
+
+@keyframes rotate-gradient {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: 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;
+}