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 (
|
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">
|
<div className="flex flex-row flex-grow flex-1 overflow-hidden relative">
|
||||||
{/* Sidebar and Navbar components hidden but kept in codebase */}
|
{/* Sidebar and Navbar components hidden but kept in codebase */}
|
||||||
{false && (
|
{false && (
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,78 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@plugin "@tailwindcss/typography";
|
@plugin "@tailwindcss/typography";
|
||||||
@config "../tailwind.config.js";
|
@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