explaingit

freedisch/cosmos

0TypeScriptAudience · developerComplexity · 3/5ActiveSetup · easy

TLDR

Scroll-driven Next.js website that animates 13.8 billion years of cosmic history with React Three Fiber visuals, Friedmann-equation physics, and live Tone.js audio.

Mindmap

mindmap
  root((cosmos))
    Inputs
      Scroll position
      Era timeline
      Friedmann equations
    Outputs
      3D scene
      Procedural audio
      Physics overlay panel
    Use Cases
      Cosmology explainer site
      Portfolio showcase
      Generative art demo
    Tech Stack
      TypeScript
      Next.js
      React Three Fiber
      Three.js
      Tone.js

Things people build with this

USE CASE 1

Run a scroll-driven cosmology explainer in the browser

USE CASE 2

Study how React Three Fiber pairs with physics-driven audio

USE CASE 3

Fork it as a template for narrative WebGL scrollytelling sites

Tech stack

TypeScriptNext.jsReact Three FiberThree.jsTone.jsNode.js

Getting it running

Difficulty · easy Time to first run · 5min

Standard npm install on Node 18+; a GPU helps for smooth React Three Fiber playback.

In plain English

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.

Copy-paste prompts

Prompt 1
Walk me through how Cosmos maps scroll position to one of the 13 cosmic eras
Prompt 2
Show me where the Friedmann equation solver lives and how it drives the visuals
Prompt 3
Add a new era between recombination and galaxy formation with a custom shader
Prompt 4
Replace Tone.js with a sample-based audio engine while keeping the same physics hooks
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.