COSMIC
Vite + TypeScript · Three.js five-object atlas · GSAP ScrollTrigger · Lenis smooth scroll · GLSL lensing + bloom · Web Audio pad
An Atlas of Extreme Objects — a scroll-driven single-page WebGL experience where the visitor descends through five real astrophysical objects, each a distinct 3D scene state: the Black Hole (event horizon + lensed accretion disk), the Galaxy (spiral particle structure + dark-matter halo), the Nebula (volumetric emission cloud), the Pulsar (neutron star + sweeping radio beams), and the Star (the Sun's structure and fate). Three.js drives a bloom-composited scene over a GPU starfield, GSAP ScrollTrigger + Lenis tie camera descents to scroll progress, GLSL shaders render the lensing, nebula volume and star surface, and a Web Audio ambient pad sits behind a SILENCE toggle. No backend — every fact and asset is compiled into a static Vite build served from Vercel's CDN.
Generated 14 Jun 2026 · 17 files · 9 components · 3 flows
File Architecture
The full source tree as a layered graph — every file with its role, imports, exports and reverse dependencies.
System Design
Runtime topology across the five zones — client, edge, application, data and external services.
Flow Graph
The five most significant application flows, step by step — startup, auth, write, read and error recovery.
Technology
| Component | Technology | Version | Source of Detection |
|---|---|---|---|
| Renderer | three (WebGLRenderer + EffectComposer + UnrealBloomPass) | ^0.166.1 | package.json |
| Motion | gsap (ScrollTrigger) | ^3.12.5 | package.json |
| Smooth scroll | lenis | ^1.1.13 | package.json |
| Language | TypeScript (strict) | ^5.5.4 | package.json |
| Bundler / dev server | Vite | ^5.4.11 | package.json |
| Shaders | custom GLSL (lensing / nebula volume / star surface) | — | src/shaders.ts |
| Audio | Web Audio API (ambient pad + SILENCE toggle) | — | src/audio.ts |
| Hosting | Vercel static + SPA rewrites | — | vercel.json |