LUMEN

LUMEN was created to break the boundaries of flat 2D web galleries by transforming web navigation into a high-performance 3D story telling experience. Inspired by interactive museum exhibits, we aimed to prove that complex generative math, real-time GLSL physics, and spatial audio can live seamlessly on the open web without sacrificing loading speed or performance.

We built LUMEN using React Three Fiber, Three.js, GSAP, and Tailwind CSS**. As users scroll, a custom Hermite camera rig guides them through four interactive exhibits—featuring dielectric glass refraction, titanium gyroscopic rotations, and dynamic wave ripples calculated via custom GLSL vertex shaders To heighten immersion, we also engineered a Web Audio API synthesizer that generates procedural hover sound sweeps and ambient drone loops in real time.

Our biggest challenge was maintaining a locked 60 FPS while rendering 500 interactive vector particles alongside real-time floor reflection mirrors and post-processing bloom. By using GPU particle instancing and decoupling 3D frame logic from React DOM re-renders, we achieved buttery-smooth interactivity. Building LUMEN taught us the power of GPU-accelerated math, and moving forward, we plan to expand the gallery with Web XR VR support and a community portal for 3D artists.