UI Sound Kit — 96 Interface Sounds, Player and Source

Most sound packs are a folder of unrelated clips. Pick three and they clash — different keys, different loudness, different ideas of what a click should be. This kit was designed as one set, in one sitting, to three rules.

One pitch set. Every sound sits in C major pentatonic, so two that overlap — a notification landing while a menu opens — still agree with each other.

Direction carries meaning. Rising intervals mean forward, open, on and yes; falling means back, closed, off and no. "toggle-on" rises and "toggle-off" falls; "nav-forward" rises and "nav-back" falls. Users learn this in a minute without being told, and it is why the set feels like a language rather than a collection.

Level by importance. A keystroke and a payment confirmation should not arrive at the same volume. Every sound is measured and levelled to one of four targets — micro at -30 LUFS, ordinary actions at -26, feedback at -23, and only genuine alerts at -21. That spread is what stops an interface feeling noisy.

The 96 sounds cover 16 families: taps and clicks, toggles, navigation, modals, feedback, notifications, messaging, progress, transitions, text input, commerce, media controls, drag and drop, system events, micro-interactions, and voice and AI. Nothing has a reverb tail, because interfaces are used in rooms, not concert halls, and almost everything is under 250 ms.

Nothing here is recorded or sampled. Every sound is synthesised by the code included in the download — FM synthesis, a plucked-string model, filtered noise and state-variable filters at 48 kHz. That means no sample-library clearance, no attribution chain, nothing a content-matching system can claim on your product video, and no possibility that another product bought the same clip from the same library. It also means the kit is yours to change: run the source and get the whole set transposed, brighter, duller, or with your own sounds added in the same voice.

The player is one file with no dependencies — 10 KB of commented source, 3.6 KB over the wire. It uses one AudioContext rather than an audio element per sound, so rapid clicks overlap cleanly; it handles the browser rule that keeps pages silent until the user interacts, by failing quietly rather than throwing; it stays silent while the tab is hidden; it throttles repeats; and it remembers mute. There is an ES module, a plain-script build, TypeScript definitions with all 96 names as a union type, and a React hook. If you would rather use Howler or your own code, a sprite and a JSON map are in the download too.

What the documentation spends most of its words on is restraint, because that is the hard part. A product that plays a sound on every click, hover and toast is exhausting within a minute however good the sounds are. There is a starting twelve to use and ignore the rest, a note on which sounds to be careful with and why, and a section on doing it accessibly: sound is never the only signal, the off switch belongs somewhere people can find it, and prefers-reduced-motion is not a sound setting.

The demo is the kit itself, in four parts. A playground where a working interface — buttons, switches, tabs, a dialog, notifications, a background job, a cart, a reorder list — plays exactly what it would play in your product, and names the sound each control used. A library where all 96 are playable and searchable by name, by element or by intent, filtered by importance, direction or length, with a detail panel for each one. An integration section with working code for JavaScript, TypeScript, React, a plain script tag and the sprite. And a customisation section showing exactly what the generator lets you change.