A cinematic, scroll-driven WebGL experience about the death of a star. Seven chapters carry you from the quiet prologue of a dying sun through its collapse, supernova, and rebirth as a new world — rendered entirely in the browser with custom GLSL shaders.
- Custom shader systems — animated star-surface noise, corona sprites, volumetric-feel nebula clouds, a 45k-particle supernova burst with expanding shockwave ring, accretion disc, planet formation, and atmosphere glow.
- Scroll choreography — a smoothed 0–7 timeline drives camera paths, particle behaviour, bloom, fog, and narration. Every chapter handoff is positionally continuous: no cuts, only movement.
- Procedural audio — a WebAudio engine builds everything live (no assets): gliding chord pads with convolution reverb, chord-tuned shimmer, stereo wind, and a layered supernova boom. Toggle with the HUD button.
- Post-processing — bloom, film grain, chromatic aberration, vignette.
- Adaptive resolution — render scale steps based on frame timing to stay smooth on weaker GPUs (0.55×–1.0× on phones, with capped pixel ratio and trimmed particle budgets).
- Touch-first — swipe to drift with flick momentum, safe-area-aware HUD,
larger touch targets, and full
prefers-reduced-motionsupport.
| input | action |
|---|---|
| scroll / swipe | move through the story |
| click rail dots | jump to chapter |
| arrow keys | step forward / back |
| sound button | toggle procedural score |
Static single file — no build step.
# any static server works
python -m http.server 8000
# then open http://localhost:8000/LUMEN/Or just open index.html directly (internet needed for the three.js CDN import).
Three.js r170 via ES-module import map, EffectComposer post pipeline, hand-written GLSL for every material, zero external assets or media files.