drjones/my-loves-calendar
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
drjones
2026-02-16 21:05:27 -08:00
commit c373bbdab4
25 changed files with 2964 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
components/SpaceBackground.tsx Normal file
View File

@@ -0,0 +1,54 @@
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>
);
};