We tested five UI sound families. Warm Pulse won.
Thirty click cues went into one private test page. We kept six, removed hover audio, and gave email three notes.
We tested 30 generated click sounds, chose Warm Pulse, removed hover audio, and gave email its own motif.
A cursor can cross twenty cards in seconds. If each one makes a sound, the interface becomes a toy. We heard that problem before shipping it: hover stayed silent, and the six final sounds now play only after deliberate clicks.
Five families, six jobs
On 27 July 2026, we built a private sound lab for GattyWorks. It contained Soft Glass, Crisp Signal, Warm Pulse, Tiny Click, and Future Scan. Each family covered navigation, primary actions, email actions, content cards, footer links, and utility controls. Five families times six jobs gave us 30 cues to compare.
The useful comparison was not which isolated beep sounded nicest. It was whether six related sounds could share a page without turning every click into the same noise. Warm Pulse was the most restrained set that still made each job recognizable.
Warm Pulse
Ready. Hover is silent.
Warm Pulse is one small recipe
The browser makes each cue with the Web Audio API. Warm Pulse uses sine oscillators, a 160 ms envelope, a 2.8 kHz low-pass filter, a pitch multiplier of 0.84, and a slight downward sweep. Lower notes make it rounder than a normal interface click. The short envelope keeps it from becoming a notification sound.
const warmPulse = {
wave: "sine",
gain: 0.046,
duration: 0.16,
gap: 0.052,
pitch: 0.84,
sweep: -0.035,
filter: 2800,
};The family stays consistent, but each role changes the base frequency and note interval.
Laptop speakers, phone speakers, and headphones will not reproduce these cues in exactly the same way. The numbers are a repeatable starting point, not proof that the sound will feel identical everywhere.
Email gets three notes
Email is the only three-note cue. A mailto link leaves the site and opens a communication action, so it should not sound like opening a blog card. The motif confirms the kind of action, not whether a message was sent. The mail app can still fail to open or the user can cancel.
Hover is silent
Hover happened too often and had a browser constraint. Browsers normally require a user gesture before Web Audio can start, so early hover sounds would be blocked anyway. More importantly, moving a pointer is not a decision. We kept sound on click and removed the hover listener entirely.
One listener sorts six roles
We did not add an audio handler to every button. One delegated document click listener finds the nearest eligible control and assigns a role. Email is checked first because a mail link may also use a primary button class. Cards, footer links, primary actions, navigation, and utility controls follow.
const role =
target.closest('a[href^="mailto:"]') ? "email" :
target.closest(CARD_SELECTOR) ? "card" :
target.closest("footer a, footer button") ? "footer" :
target.closest(PRIMARY_SELECTOR) ? "primary" :
target.closest(NAV_SELECTOR) ? "nav" :
target.closest(UTILITY_SELECTOR) ? "utility" : null;A data-gw-sound="off" attribute is the escape hatch for controls that must stay quiet. The same classifier covers the header, blog, news, tools, footer, copy buttons, filters, and future cards without scattering sound code through those components.
No audio files leave less to load
The first eligible click creates an AudioContext. The component schedules its oscillators, closes the context when it unmounts, and sends no sound asset request. The sound layer adds no audio files, package, tracker, cookie, or local storage.
Generated audio is harder to art-direct than a recorded brand sound, and the site does not yet expose a mute preference. We kept the cues quiet and click-only. If real visitor feedback says they distract more than they help, the next change is a visible sound control, not a louder mix.