Run a scroll-driven cosmology explainer in the browser
Study how React Three Fiber pairs with physics-driven audio
Fork it as a template for narrative WebGL scrollytelling sites
Standard npm install on Node 18+; a GPU helps for smooth React Three Fiber playback.
Cosmos is a website that turns the scroll wheel of your browser into a guided journey through the 13.8 billion year history of the universe. As you scroll down, a three dimensional animation plays out from the Big Bang to the present day, accompanied by procedurally generated sound and an overlay panel that shows numbers like temperature, density, and the radius of the observable universe at each moment. The README frames the project as a single sensory experience that blends cosmology, real time graphics, and synthesised audio. The history is split into thirteen named eras, each with its own visual treatment. Early stages are abstract: a flash for the singularity, quantum noise for the Planck epoch, a quark gluon soup, fusion chimes during nucleosynthesis, a shell of microwave background radiation. Later eras show galaxies forming, the solar system condensing from dust, and Earth itself morphing through molten rock, oceans, a snowball ice phase, green continents, and finally a modern globe lit by the lights of cities. Under the hood the page is built with Next.js and renders the 3D scene using React Three Fiber, a React wrapper around the Three.js graphics library. A small physics module solves the Friedmann equations from cosmology to compute how the universe expands over time, and a colour module based on the Tanner Helland algorithm turns each computed temperature into the right shade of glow. Audio is produced live by the Tone.js library, with the synthesiser parameters tied directly to the physics variables. Local setup is the standard Node.js routine: clone the repository, run npm install, and start the development server. Node 18 or later is recommended. The README does not specify a license.
Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.