Sebastian Krüger
ce0b2e8470
- Next.js 16 with Turbopack - React 19 - Tailwind CSS 4 with CSS-first config - Framer Motion animations - Animated logo and hero section - Tool cards for Vert and Paint - Glassmorphism effects and gradient animations - Fully responsive design - Docker support with Nginx - Static export ready 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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>
|
|
);
|
|
}
|