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:
parent
15bb63670a
commit
668ecaff91
2 changed files with 76 additions and 1 deletions
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue