Sonarium turns any webpage into an acoustic space. Geometry becomes timbre, layout becomes a stereo stage, the DOM tree becomes harmony β with one script tag.
π§ wear headphones Β· click anything Β· your cursor is the microphone
Twelve shapes, one rule-set. Position sets the stereo placement, size sets pitch and weight, corner radius morphs the wave from square through sawtooth and triangle to sine β the Kiki/Bouba effect, made executable.
Hover to preview Β· click to play Β· click empty space to strum what's on screen, left to right
Ten mappings, each backed by cross-modal perception research β see the Mapping Canon for formulas and the research notes for citations.
An element's x/y becomes its place in a 3D sound field. Left button, left sound. HRTF spatialization.
Border radius morphs the oscillator: sharp corners bite (square), pills breathe (sine). Kiki/Bouba, executable.
Big elements speak low and loud; small ones chirp high and quiet β the physics of resonance, borrowed.
A square ticks; a long bar sweeps. Shape length maps to note length.
Deeply nested elements sound farther away and more muffled β the tree becomes acoustic depth.
Children of one parent climb the same scale. A nav is a run; a list is an arpeggio.
Page width sets the reverb. A phone is a dry booth; a wide desktop is a hall.
The hostname hashes to a musical key and scale β every site gets a deterministic sonic identity.
Box-shadow blur lifts an element into the reverb: elevated UI floats in the room.
Keystrokes tick upward as a field fills. Toggles answer with rising or falling fifths.
Bend one element's geometry and hear the mapping respond. The readout is sonarium.describe(element) β the library always explains itself.
Each demo is an unmodified page plus one script tag.
The ambisonic field, visualized live β IRCAM-Spat-style sources, extent, and field rotation.
A realistic SaaS UI. The only audio code on the page is one line.
Nested boxes β hear the DOM tree as acoustic distance and harmony.
On a phone: tilt to steer your ears, shake to strum the page.
Design this page's sound system β voices, operator, key β and export the patch as JSON.
The thesis mismatch experiment, live: does the Kiki/Bouba weave hold for your ears?