The Evolving 3D Micro-Cosmos: Time-Shift Simulation

Prompt

Act as a Senior WebGL Creative Engineer and UI/UX Art Director. Your mission is to code an "Evolving Mini World", a high-fidelity 3D interactive experience contained in exactly one single HTML file (index.html). The code must be complete, functional "out-of-the-box", and use only CDNs. Mandatory Tech Stack: Three.js (via CDN) for 3D rendering. GSAP (via CDN) for interpolation animations and smooth era transitions. Tailwind CSS (via CDN script) for the HUD and Glassmorphism interface. Core Concept and Mechanics (The World): Create a low-poly floating island in the center of the screen. The island must not use external .gltf or .obj models; all geometry and shaders must be procedurally generated in the code using Three.js primitives (cylinders, boxes, icosahedrons). The island should rotate slowly. The Timeline (The Eras): Implement 4 distinct eras. When the user slides the time bar, the world must "morph" (smooth transition using GSAP) between the eras, dynamically altering colors, lighting, particles, and the geometry sprouting from the island: Primordial Era (Year -10,000): Warm lighting. The island is rocky with glowing lava. Volcanic ash particles floating. Classical Era (Year 1,000): Natural sun lighting (simulated HDRI or soft directional lights). Lush green vegetation (green cones and spheres), a small classical white temple made of simple blocks. Falling leaves particles. Industrial Era (Year 1920): Dramatic and polluted lighting (sepia fog). Vegetation shrinks, replaced by dark smokestacks emitting black smoke particles (simple sprites). The ground turns to concrete. Cyberpunk Singularity (Year 2150): The background becomes pitch black like deep space. Neon lighting (Cyan and Magenta) using PointLights. Geometric towers with emissive MeshStandardMaterial. Flying vehicles (small glowing particles orbiting the city) and digital rain. The HUD (Heads-Up Display): Create an immersive interface overlaying the 3D canvas using Tailwind CSS with a frosted glass effect (backdrop-blur, bg-white/10, subtle white borders). The HUD must contain: Top Left: Name of the current Era with a sci-fi typography and a fictional "Population" counter that dynamically scales up or down depending on the era. Top Right: An ecosystem status panel (e.g., "CO2 Level", "Main Energy Source" - e.g., Geothermal, Coal, Nuclear Fusion). Footer (The Time Controller): A styled, wide range input (slider) going from year -10,000 to 2150. It must have visible tick marks. This slider is the main trigger: moving it fires the GSAP transition function to seamlessly alter the 3D world in real-time. Quality and "Out-of-the-Box" Guidelines: Implement OrbitControls so the user can rotate around the mini world. Add simple post-processing if possible (like Bloom via EffectComposer) to make the lava and neons glow. The JS code must be clean and modular within the <script> tag, managing the eras through an array of configuration objects. Output ONLY the complete HTML code block. No additional explanations, just the code of the artwork.

A system prompt was added to support web rendering