Cosmic Core
View Live →Cosmic Core transforms raw student cohort data into an immersive 3D particle experience. Built in React with a custom HTML5 Canvas renderer - no WebGL, no Three.js - it uses a polar-clustering model to distribute 16,000 particles across a rotating sphere, with real-time depth projection, ambient soundscape, heartbeat pulse, and a 9-year timeline scrubber.
The Concept
What if student data wasn't a spreadsheet - but a universe? Cosmic Core gives each of 16,000 students their own particle, orbiting in a living sphere that pulses, rotates, and breathes. The brief was to make cohort data feel human at scale.
Technical Approach
The entire 3D projection is achieved with custom polar-coordinate math on an HTML5 Canvas - no WebGL required. A polar-clustering model concentrates 80% of particles at the north and south poles, leaving an equatorial exclusion zone that enhances depth readability. Particle size scales from 0.4 px to 3.5 px based on Z-position, creating convincing volume without a scene graph.
16,000 Students. One Living Universe.
Features
Timeline scrubber (2017-2025), 'Grow' animation that streams new cohort particles into the sphere, heartbeat pulse synced to ambient sound, 5 rhythm speeds, outline mode, 8 preset palettes + custom hex input, colour spectrum picker, and a collapsible single-row control panel.