Sebastian Krüger
2000623c67
- Add Figlet text converter with font selection and history - Add Pastel color palette generator and manipulation suite - Add comprehensive Units converter with category-based logic - Introduce AppShell with Sidebar and Header for navigation - Modernize theme system with CSS variables and new animations - Update project configuration and dependencies
35 lines
1.6 KiB
TypeScript
35 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
export default function AnimatedBackground() {
|
|
return (
|
|
<div className="fixed inset-0 -z-10 overflow-hidden bg-background transition-colors duration-500">
|
|
{/* Animated gradient background */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.08] dark: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',
|
|
}}
|
|
/>
|
|
|
|
{/* Signature Grid pattern overlay - Original landing page specification */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.05] dark: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 dark:mix-blend-normal filter blur-3xl opacity-[0.03] dark: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 dark:mix-blend-normal filter blur-3xl opacity-[0.03] dark: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 dark:mix-blend-normal filter blur-3xl opacity-[0.03] dark:opacity-20 animate-float" style={{ animationDelay: '4s' }} />
|
|
</div>
|
|
);
|
|
}
|