Interface SFX

Most interfaces are silent, and most that aren't are annoying. The difference is scale: good interface sound works like haptics — tiny, quiet confirmations of physical actions, not announcements.

Tick — navigationPop — open / dismissConfirm — successToggle — switchesHover — nav links

These are the sounds this site uses — from the Minimal patch, synthesized on the fly. No audio files.

Principles

• Attach sound to user actions, never to things that merely happen. A click can tick; an incoming update should stay silent.
• Keep it short and quiet. Under 100ms, mixed well below speech volume. If a sound is noticeable in isolation, it's too loud.
• Vary by meaning. Navigation, confirmation, and toggles each get their own voice, so the ear learns the vocabulary without thinking.
• Always provide mute, persisted. Sound is opt-in texture; the site must be complete without it.

Synthesized, not sampled

This site uses @web-kits/audio to describe sounds as plain objects — an oscillator, an envelope, a gain — synthesized by the Web Audio API at play time. The palette is a subset of the Minimal patch: pure sines, tiny envelopes, gains under 0.1. No audio files, no network requests:

const patch = definePatch({
  name: "Minimal",
  sounds: {
    tick: {
      source: { type: "sine", frequency: 1200 },
      envelope: { attack: 0, decay: 0.012, sustain: 0, release: 0.004 },
      gain: 0.08,
    },
  },
});

patch.play("tick");

A falling sine reads as "dismiss", two quick ascending sines as "success" — three parameters away from a whole sound vocabulary.