Interface sounds, synthesized. 113 semantic UI cues generated live with the Web Audio API — no audio files, no runtime dependencies. The whole palette weighs less than one MP3.
oto (音) is Japanese for "sound".
Every sound is a declarative recipe: a few layers of pure tones and filtered noise, each with a micro-envelope (attack / decay / peak), optional pitch or filter glides, and an optional shimmer — a soft feedback-delay tail.
The palette follows a consistent design language:
- ascending intervals = affirmation (
success,connect,level-up) - descending intervals = negation or departure (
error,close,disconnect) - noise bursts under 25 ms = physical touch (
tap,click,key) - pitch glides = motion (
open,swipe,collapse)
113 cues across 16 semantic categories: input, selection, navigation, feedback, communication, progress, editing, media, alert, social, commerce, assistant, reward, game, sci-fi, system.
import { play, setVolume } from "otokit";
play("success");
play("error", { volume: 0.5 });
setVolume(0.8);The engine lazily creates a shared AudioContext with a compressor output
stage, so overlapping cues never clip. Server-side imports are no-ops.
Every cue can be rendered offline and exported as a normalized 16-bit WAV — entirely in the browser:
import { renderSound, downloadWav } from "otokit";
await downloadWav("notification"); // saves otokit-notification.wavnpm install
npm run devThe site is styled as a vintage sound console — aged-paper light theme and tube-amp dark theme, hand-drawn icon set, an analog VU meter that tracks the master output, and audio-reactive "room" lighting that washes the walls with the color of whatever cue you play. It ships a Three.js audio-reactive icosphere in the hero, a live playground of wired-up UI widgets, and a per-cue inspector with pitch (±12 st) and volume controls that the WAV export honors.
A QA harness renders the full palette headlessly and reports peak level and
duration per cue: open /?check=1 in dev mode and read #otokit-check.
MIT