aaryan_kakad

Here's the prompt I used: Create a world-class, award-worthy website about humanity's urgent need for multiplanetary civilization. This must be the most visually stunning, emotionally compelling, and technically sophisticated website ever built on this topic. Core Message Present the existential case: There is a 1-in-1,000 chance every century that a catastrophic astronomical event (asteroid impact, gamma-ray burst, solar flare, supernova radiation) could cause human extinction. Our survival for the next thousand years depends on becoming a multiplanetary species. Visual & Technical Requirements Hero Section Epic animated background: Rotating Earth view transitioning to asteroid field, then Mars, then distant exoplanets Particle effects: Floating space dust, stars with parallax scrolling at multiple depths Dynamic countdown: Real-time probability calculator showing extinction risk accumulating Cinematic title reveal: Text that materializes from star particles with glowing edges Ambient sound option: Low, cosmic hum with toggle (space ambience) Animation & Effects Library Scroll-triggered animations: GSAP ScrollTrigger for every section 3D elements: Three.js rotating planets, orbital mechanics visualizations WebGL shaders: Atmospheric effects, nebula backgrounds, light refraction Lottie animations: Smooth vector animations for infographics Mouse-reactive particles: Interactive particle systems that respond to cursor Smooth page transitions: Barba.js or similar for seamless navigation Reveal animations: Intersection Observer for fade-ins, slide-ins, scale effects Number counters: Animated statistics that count up when visible Morphing SVGs: Icons and graphics that transform between states Glassmorphism UI: Frosted glass effects for cards and containers Sections to Include THE THREAT (Dark, ominous tone) Animated timeline of past extinction events (dinosaurs, etc.) Interactive probability calculator Visualization of near-miss asteroids in Earth's history Real NASA data on potentially hazardous objects Countdown showing risk accumulation in real-time THE SOLUTION (Hope, wonder, inspiration) Interactive solar system map showing colonization targets Mars terraforming visualization (animated progression) Orbital habitat concepts with 3D models Technology roadmap with milestone animations THE SCIENCE Animated explanations of each extinction threat Data visualizations of impact probabilities Expert quotes with elegant typography Video backgrounds of space phenomena THE VISION Futuristic city concepts on Mars/Moon (3D renders) Multi-generational ship designs Timeline to 3025: humanity across the stars Interactive galaxy map showing expansion potential TAKE ACTION How individuals can contribute Organizations to support Educational resources Shareable content generator Technical Stack Specifications Frontend Framework: React or Next.js for component architecture TypeScript for type safety Animation Libraries: GSAP (GreenSock) for premium animations Three.js for 3D graphics Framer Motion for React animations Lottie for vector animations Anime.js for additional effects Visual Effects: WebGL shaders (custom or Shadertoy imports) Canvas API for particle systems CSS3 advanced animations (keyframes, transforms) SVG morphing and path animations UI/UX Features: Smooth scrolling (Locomotive Scroll or Lenis) Lazy loading for performance Progressive image loading with blur-up effect Responsive design (mobile-first) Dark theme with cosmic color palette Custom cursor effects Preloader with percentage counter Easter eggs (hidden animations on clicks) Design Principles Color Palette: Deep space blacks (#0a0a0f) Cosmic blues (#1a2a6c, #2e3192) Mars reds (#c1440e, #8b0000) Stellar whites and golds for accents Gradient overlays everywhere Typography: Futuristic sans-serif for headings (Orbitron, Exo 2, Space Grotesk) Readable serif or clean sans for body (Inter, Work Sans) Glowing text effects on key phrases Kinetic typography animations Imagery: NASA high-resolution images ESA space photography SpaceX renders Custom illustrations Video backgrounds (cosmic phenomena, rocket launches) Depth-of-field blur effects Micro-interactions: Button hover effects (glow, particle burst) Card flip animations Ripple effects on clicks Floating/hovering elements Magnetic hover effects (elements attracted to cursor) Sound effects on interactions (optional) Advanced Features Interactive Data Visualizations D3.js charts showing extinction probabilities Animated infographics on resource distribution Timeline sliders for future projections 3D Model Viewer Rotatable spacecraft models Mars base walkthroughs Asteroid size comparisons Parallax Storytelling Multi-layer parallax scrolling Horizontal scroll sections Zoom transitions between sections Dynamic Content Real-time asteroid tracking data (NASA API) Live space mission updates Social media integration Immersive Elements VR/360° views (optional) Augmented reality previews (WebXR) Full-screen video backgrounds Atmospheric audio tracks Performance Optimization Code splitting for faster load times Image optimization (WebP, AVIF formats) Lazy loading for heavy animations Efficient WebGL rendering Cache strategies CDN delivery Emotional Journey Structure the narrative to take users through: Shock → See the real threat Fear → Understand what we could lose Wonder → Discover the possibilities Hope → See the solution Determination → Feel compelled to act Call-to-Actions "Join the Movement" (newsletter signup with particle burst effect) "Support Space Exploration" (donation/advocacy links) "Share Our Future" (social sharing with custom preview cards) "Learn More" (resource library) Unique Differentiators No generic templates - 100% custom design Award-quality animations - Smooth 60fps throughout Scientifically accurate - All data verified Emotionally resonant - Story-driven experience Technically flawless - No bugs, perfect responsiveness Accessible - WCAG compliant while maintaining visual impact Final Instructions Build this as if it's for NASA, SpaceX, and the United Nations combined. Every pixel should inspire awe. Every animation should feel intentional and meaningful. Every interaction should delight. This isn't just a website—it's a manifesto for human survival, a rallying cry for our species, and a work of digital art that makes people feel the urgency and possibility of our multiplanetary future. Make it so compelling that anyone who visits will become an advocate for space colonization. GO ALL IN. SPARE NO CREATIVE EFFORT. THIS IS HUMANITY'S STORY.