Aetherium

Aetherium started with a question: what does a sound look like before you hear it? The brief was self-set — design a product launch for an instrument that does not exist, and make the object itself the interface. No renders. No video. One WebGL scene that carries the whole story.

The product is a spatial-audio instrument with three adjustable frequencies. Instead of explaining it with a feature list, the page lets you feel the idea: a single chrome form that changes shape as the frequencies move.

Each scroll segment moves the camera, changes the chrome's distortion, and brings a new frequency into the mix. A custom vertex displacement pass lets the form breathe without losing the hard reflections that make it feel manufactured.

The interaction is deliberately small: move, hold, listen, scroll. Nothing competes with the object. Typography sits at the edges like a control surface, and the chrome does the emotional work.

The scene uses a high-resolution torus knot with a physical material and a procedural room environment for reflections. A lightweight Web Audio layer synthesizes three sine-based tones; the same values drive the object's scale, emissive rim, and orbital rings.

GSAP ScrollTrigger choreographs the camera and the DOM typography. On mobile the mesh density drops, the particle field halves, and audio stays opt-in. The scene pauses when it leaves the viewport or the tab is hidden.