Inspiration Space has always been humanity's greatest source of wonder. We wanted to capture that feeling — the vertigo of staring into an infinite sky and realizing how small yet how significant we are. Most websites demand attention. We wanted to build one that earns it, pulling the user into a journey they didn't expect to take when they opened a browser tab.
What it does The Cosmos Within is a fully immersive, scroll-driven 3D space journey built entirely in the browser. As the user scrolls, a cinematic camera flies through deep space, past glowing nebulae, and toward a procedurally generated alien planet — complete with oceans, forests, ice caps, animated cloud layers, a ringed atmosphere, and a Saturn-style ring system. Every frame is rendered in real time with no pre-baked assets.
The experience has five acts:
Hero — a starfield intro with animated title Deep Space — drifting through billions of twinkling stars with mouse parallax Nebula Field — four layered particle clouds in purple, cyan, and magenta drift past the camera Exoplanet Approach — a procedurally shaded planet with live ocean specular glint and atmospheric rim lighting comes into view Finale — a close-up with the message: You are stardust. How we built it Three.js — core 3D scene, geometry, and render loop Custom GLSL shaders — written from scratch for every visual element: star twinkling, nebula drift, planet surface terrain (using 6-octave fractal Brownian motion noise), atmospheric rim glow, ring band patterns, and cosmic dust UnrealBloomPass (Three.js post-processing) — selective bloom that intensifies as the camera approaches the planet GSAP ScrollTrigger — scroll position drives the camera through five cinematic waypoints with easeInOut interpolation Web Audio API — a generative ambient drone synthesized from oscillators and a slow LFO, activated by the user Vanilla HTML/CSS — glassmorphism UI panels with backdrop blur, a radial scrim layer for text legibility, and smooth visibility transitions No 3D models were downloaded. Every visual is generated procedurally at runtime.
Challenges we ran into Text legibility vs. immersion — bright nebula particles and bloom effects initially bled through UI panels, making text unreadable. Solved with a layered approach: a full-screen radial scrim, stronger backdrop-filter blur on panels, and hard text-shadow values that create legibility halos independent of the background. Mouse parallax drift — adding per-frame mouse offset on top of a lerped camera position caused unbounded drift over time. Fixed by storing the scroll-driven base position separately and computing camera position as base + mouseOffset each frame rather than accumulating. Bloom eye strain — the default bloom threshold was too low, making the entire scene glow. Raised the threshold significantly so only genuinely bright surfaces (planet rim, star cores) bloom, while the background stays dark and comfortable. Hero fade-in animation — a single requestAnimationFrame fired before the browser committed a paint at opacity: 0, so the CSS transition never triggered. Fixed with a double requestAnimationFrame to guarantee a rendered frame exists before the transition starts. Accomplishments that we're proud of A fully procedural planet surface with terrain, clouds, specular ocean glint, and polar ice — generated entirely in a GLSL fragment shader with no textures A cinematic scroll-driven camera system that feels like a film cut, not a webpage scroll Generative ambient audio synthesized live in the browser — no audio files required The whole experience loads in under 2 seconds with zero external assets beyond Three.js What we learned Writing GLSL shaders from scratch forces you to think about graphics at the lowest level — every pixel is a math problem. We deepened our understanding of simplex noise, fractal Brownian motion, rim lighting, and additive blending. We also learned how critical the relationship between bloom, scene exposure, and background darkness is for visual comfort — a beautiful scene can become painful to look at with one parameter set too aggressively.
What's next for The Cosmos Within Audio reactivity — the ambient drone responding to scroll position, shifting pitch and texture as you move through each section Mobile touch support — swipe-driven camera with gyroscope parallax on mobile devices More worlds — a gas giant, a binary star system, and a black hole with gravitational lensing shader WebGPU upgrade — rewriting the particle systems using WebGPU compute shaders for 10× particle counts
Log in or sign up for Devpost to join the conversation.