Test

Prompt

You are a world-class creative front-end developer and art director who has won Awwwards and FWA site-of-the-day awards. Build a single, self-contained, production-quality HTML file (HTML + CSS + vanilla JS, no frameworks, no build step) for an immersive website about SPACE with BLACK HOLES as the hero experience. THE CONCEPT Title: "Beyond the Event Horizon". The visitor "falls" through the cosmos as they scroll: Solar System → Nebulae → Galaxies → Neutron Stars → a Black Hole → Singularity. Each section is a chapter with its own mood, color palette, and motion. MUST-HAVE CREATIVE FEATURES 1. Hero: a real-time, GPU-accelerated black hole on a <canvas> or WebGL (raw WebGL or Three.js via CDN) with gravitational lensing, a glowing accretion disk, Doppler-shifted colors (one side brighter), and a photon ring. Mouse movement subtly tilts the camera. 2. Starfield with parallax depth layers, twinkling, and shooting stars. Stars should visibly bend near the black hole. 3. Scroll-driven storytelling: use IntersectionObserver / scroll progress to trigger cinematic text reveals, zooming, and color transitions between chapters. 4. Interactive "Gravity Lab": a canvas where the user clicks to drop particles/planets and watches them orbit, spiral in, and get "spaghettified" by a black hole. Include sliders for black hole mass and particle speed. 5. "Time Dilation" widget: a slider for distance from the event horizon that shows how much slower time passes (using the Schwarzschild formula), with a live clock comparison. 6. Interactive scale comparison: Earth → Sun → Sagittarius A* → TON 618, with animated size reveal. 7. A custom cursor (glowing orb that leaves a fading trail) and subtle sound-free micro-interactions on every hover. 8. A loading intro animation (a star igniting, then expanding to the page). CONTENT (scientifically accurate, written concisely and poetically) - What is a black hole, event horizon, singularity, accretion disk, Hawking radiation - Types: stellar, intermediate, supermassive, primordial - Famous ones: Cygnus X-1, Sagittarius A*, M87*, TON 618 - 6 mind-blowing facts in animated cards - A timeline of discoveries (Einstein 1915 → Schwarzschild → Hawking → EHT image 2019 → Sgr A* image 2022) DESIGN DIRECTION - Palette: deep void black (#02020a), nebula purple/magenta, ember orange accretion glow, cold cyan accents. Avoid generic "purple gradient on white" looks. - Typography: pair a striking display font (e.g., Orbitron, Syncopate, or Space Grotesk) with a refined readable body font via Google Fonts. Use large, confident type with dramatic spacing. - Glassmorphism panels, thin glowing borders, noise/grain overlay, vignette, and subtle lens-flare accents. - Fully responsive (mobile-first), 60fps performance, respects prefers-reduced-motion, accessible contrast and semantic HTML. TECHNICAL REQUIREMENTS - One file, well-commented, organized into clear sections. - Use requestAnimationFrame, avoid layout thrashing, pause animations when the tab is hidden. - No placeholder text, no lorem ipsum, no broken images (generate everything with code: canvas, SVG, CSS gradients). - Add a sticky minimal navigation with progress indicator. OUTPUT Return the complete code in one code block, then a short list of 5 creative decisions you made and why. Aim to surprise me: go beyond the obvious and make something people would screenshot and share.

A system prompt was added to support web rendering