35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
export default function AnimatedBackground() {
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 -z-10 overflow-hidden">
|
||
|
|
{/* Animated gradient background */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 opacity-50"
|
||
|
|
style={{
|
||
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #667eea 100%)',
|
||
|
|
backgroundSize: '400% 400%',
|
||
|
|
animation: 'gradient 15s ease infinite',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Grid pattern overlay */}
|
||
|
|
<div
|
||
|
|
className="absolute inset-0 opacity-10"
|
||
|
|
style={{
|
||
|
|
backgroundImage: `
|
||
|
|
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)
|
||
|
|
`,
|
||
|
|
backgroundSize: '50px 50px',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Floating orbs */}
|
||
|
|
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float" />
|
||
|
|
<div className="absolute top-1/3 right-1/4 w-96 h-96 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float" style={{ animationDelay: '2s' }} />
|
||
|
|
<div className="absolute bottom-1/4 left-1/3 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-float" style={{ animationDelay: '4s' }} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|