Night Room
View LiveTechnologies used
- Three.js
- WebGL
- React Three Fiber
- Tone.js
- Zustand
- Sound Design
Night Room is a personal audiovisual experiment built for the hours when sleep won't come. The whole thing runs in the browser as a single WebGL scene: low poly geometry, flat shading, analogue texture. No goals, no UI to speak of, just a space designed to slow you down.
Analogue, illustrative direction
The scene deliberately embraces imperfection. Subtle film grain, slow motion camera follow, muted nighttime tones and subtle sound bed all lean into warmth and feeling over fidelity. The look and feel is heavily inspired by modern graphic art styles, with its "flat" shading and stylistic, low poly details.
Built with React Three Fiber on top of Three.js, the scene is composed declaratively as React components, which made it far easier to iterate on lighting, camera drift, and object placement without fighting imperative Three.js boilerplate. Camera movement is intentionally minimal: a slow, almost imperceptible drift rather than anything resembling navigation.
Touch points & Oscilloscope
Several touch points throughout the scene are highlighted with a subtle mouse cursor change, for example, you can open and close the window, play the thumb piano. All sounds were pre-recorded and routed through the same output node in tone.js , this output visualised on the scene oscilloscope; as you play the thumb piano or trigger beats, the oscilloscope shows the waveforms produced in real-time.