Tonely — zero-asset UI sound design system for modern web.

Modern web applications are visually polished but completely silent. Adding micro-interaction audio traditionally requires bundling heavy MP3/WAV assets, causing network latency (200-400ms), asset caching bugs, SSR hydration crashes in Next.js, and browser autoplay blocking policies.

Tonely synthesizes every chime, click, ping, and notification procedurally in runtime using the browser's native Web Audio API. With zero external audio files and less than 1.5 KB bundle size, it produces tactile, multi-sensory feedback with instant < 1ms latency.

import { tonely } from "tonely";

// 1. Play instant procedural notification sounds:
tonely.success(); // Pleasant rising chime (200 OK)
tonely.error();   // Gentle error tone (4xx / 5xx)

// 2. Play tactile micro-interaction audio:
tonely.click();   // Crisp 25ms button tap
tonely.glass();   // Apple-like glass ping
tonely.toggle();  // Switch toggle feedback

// 3. Auto-play based on API response status:
const res = await fetch("/api/checkout", { method: "POST" });
tonely.fromStatus(res.status); // 200 -> success, 400+ -> error

Tonely uses pure mathematical procedural synthesis (sine, square, triangle oscillators, gain envelope ADSR ramping, and resonant biquad filters). It creates zero HTTP network requests, guarantees 100% SSR-safety with graceful fallbacks, and handles browser audio unlock policies automatically.