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
This commit is contained in:
Glen Maddern 2025-06-20 20:46:24 +10:00
commit 668ecaff91
2 changed files with 76 additions and 1 deletions

View file

@ -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 && (

View file

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