54 lines
3.1 KiB
TypeScript
54 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
|
|
export const SpaceBackground: React.FC = () => {
|
|
return (
|
|
<div className="fixed inset-0 z-[-1] overflow-hidden bg-[#050510]">
|
|
{/* Deep Space Gradients */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(17,24,39,0)_0%,#050510_100%)]" />
|
|
<div className="absolute top-[-20%] left-[-20%] w-[80%] h-[80%] bg-purple-900/10 rounded-full blur-[150px] animate-pulse" />
|
|
<div className="absolute bottom-[-20%] right-[-20%] w-[80%] h-[80%] bg-blue-900/10 rounded-full blur-[150px] animate-pulse" style={{ animationDelay: '3s' }} />
|
|
|
|
{/* Stars */}
|
|
<div className="absolute inset-0 opacity-60">
|
|
{[...Array(80)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="absolute rounded-full bg-white animate-twinkle"
|
|
style={{
|
|
top: `${Math.random() * 100}%`,
|
|
left: `${Math.random() * 100}%`,
|
|
width: `${Math.random() * 2 + 1}px`,
|
|
height: `${Math.random() * 2 + 1}px`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
boxShadow: `0 0 ${Math.random() * 4}px rgba(255, 255, 255, 0.8)`
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Shooting Stars */}
|
|
<div className="absolute top-[10%] left-[80%] w-[2px] h-[2px] bg-white shadow-[0_0_20px_2px_white] animate-shoot opacity-0" />
|
|
<div className="absolute top-[30%] left-[90%] w-[2px] h-[2px] bg-white shadow-[0_0_20px_2px_white] animate-shoot opacity-0" style={{ animationDelay: '5s' }} />
|
|
<div className="absolute top-[5%] left-[60%] w-[3px] h-[3px] bg-cyan-200 shadow-[0_0_20px_2px_cyan] animate-shoot opacity-0" style={{ animationDelay: '12s', animationDuration: '6s' }} />
|
|
|
|
|
|
{/* Nebula Blobs - More intense */}
|
|
<div className="absolute top-1/4 left-1/4 w-[400px] h-[400px] bg-pink-900/10 rounded-full blur-[100px] animate-float" style={{ animationDuration: '20s' }} />
|
|
<div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-indigo-900/10 rounded-full blur-[120px] animate-float" style={{ animationDelay: '2s', animationDuration: '25s' }} />
|
|
|
|
{/* Orbiting Planets - Detailed */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[900px] border border-white/5 rounded-full animate-spin-slow">
|
|
{/* Planet 1 */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-gradient-to-br from-blue-400 to-blue-900 shadow-[0_0_30px_rgba(59,130,246,0.4)]">
|
|
<div className="absolute inset-0 rounded-full bg-black/20" style={{ clipPath: 'inset(0 0 50% 0)' }}></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] border border-white/5 rounded-full animate-spin-slow" style={{ animationDirection: 'reverse', animationDuration: '90s' }}>
|
|
{/* Planet 2 */}
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-900 shadow-[0_0_20px_rgba(168,85,247,0.4)]"></div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}; |