Kimi 多行星文明电影感网站

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.