File size: 1,902 Bytes
88c4c60 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | "use client";
export default function AnimatedBackground() {
return (
<>
{/* Animated Background */}
<div className="fixed inset-0 -z-10 overflow-hidden pointer-events-none">
{/* Grid pattern */}
<div
className="absolute inset-0 opacity-[0.08]"
style={{
backgroundImage: `linear-gradient(to right, #f97815 1px, transparent 1px), linear-gradient(to bottom, #f97815 1px, transparent 1px)`,
backgroundSize: '50px 50px'
}}
/>
{/* Animated gradient orbs */}
<div className="absolute -top-20 left-1/4 w-[600px] h-[600px] bg-[#f97815]/20 rounded-full blur-[120px] animate-blob" />
<div className="absolute top-1/3 -right-20 w-[500px] h-[500px] bg-purple-500/15 rounded-full blur-[120px] animate-blob-delayed-1" />
<div className="absolute -bottom-20 left-1/2 w-[550px] h-[550px] bg-blue-500/12 rounded-full blur-[120px] animate-blob-delayed-2" />
{/* Vignette effect */}
<div
className="absolute inset-0"
style={{
background: 'radial-gradient(circle at center, transparent 0%, rgba(24, 20, 17, 0.4) 100%)'
}}
/>
</div>
{/* CSS Animations */}
<style jsx global>{`
@keyframes blob {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
.animate-blob {
animation: blob 20s ease-in-out infinite;
}
.animate-blob-delayed-1 {
animation: blob 22s ease-in-out 2s infinite;
}
.animate-blob-delayed-2 {
animation: blob 25s ease-in-out 4s infinite;
}
`}</style>
</>
);
}
|