Designing sound for glass, switched off by default
We planned a careful audition of recorded sound effects for the portfolio. In the end, every sound is synthesised in the browser, with no audio files at all.
- Project
- Portfolio sound
- Year
- 2026
- What we did
- Sound direction, Web Audio
- Built with
- Web Audio API
The glass portfolio has sound. It is off on every visit, behind a small control in the corner, because sound on the web should be invited, never assumed. Once it's on, it should feel like touching the thing on screen and nothing more.
Three directions
We wrote down three directions before listening to anything:
| Direction | Character | Role |
|---|---|---|
| Soft glass | A muted touch with a short resonance | The baseline for every cue |
| Elastic glass | A small bend in pitch | Only for large transitions |
| Dry precision | Compact ticks | The benchmark for restraint |
The recommendation was soft glass with an elastic touch for the big moments. Just as useful was the list of what to rule out on paper: long crystal rings, shattering, water drops, cartoon boings, cinematic impacts and any constant noise while scrolling. Searching sound libraries for "glass" alone mostly turns up breakage and long ringing, which is the opposite of what we wanted.
A plan for auditions
The plan was thorough. We shortlisted two free libraries and two paid ones, set a budget of 250 KB for the first set of sounds, and wrote a scoring sheet that weighted how comfortable a sound is to hear the hundredth time above how well it fits the brand:
- comfort when repeated: 30%
- fit with the direction: 25%
- timing with the motion: 20%
- clarity on small speakers: 15%
- consistency with the other cues: 10%
It also said that silence could win. For some moments, like the spiral coming to rest, no sound was a valid answer.
What we built instead
We never ran those auditions. Instead, every cue on the site is synthesised in the browser with the Web Audio API, so there are no sound files to download at all:
- A tap is a short sine tone with three quieter partials at uneven ratios above it, each fading faster than the last, plus a tiny filtered click. The uneven partials are what make it read as glass rather than a beep.
- Switching views glides between two pitches over 0.16 seconds, then taps.
- Opening the menu is a soft breath of filtered noise rising in pitch. Closing it falls.
Everything runs through one gentle compressor, and no more than three sounds play at once.
Navigation never waits for audio. Sound follows the interface; it never holds it up.
The rules
The rules mattered more than the sounds:
- Cues are dropped, never queued. If a sound would arrive late, it doesn't play at all.
- Navigation never waits for audio. Sound follows the interface. It never holds it up.
- Every cue has a rate limit. Taps can't repeat faster than every 60 ms, and the stickers on the contact section are capped at four a second.
- Some things stay silent. Scrolling and the About section make no sound.
The audition plan is still on file. If we ever add recorded sounds, they'll have to beat a synthesised set that weighs nothing and never loads late.
