Sonix — UI Sound Effects Library

Micro UX audio for interactive web applications. Zero dependencies. Copy-paste ready.

Live Demo · Browse Sounds · CLI

Features

• 14 sounds — clicks, hovers, success, error, notifications, transitions, and more
• Zero dependencies — every snippet is standalone Web Audio API code
• Copy & paste — hit the copy button on any card to get production-ready code
• CLI — npx @akshatbuilds/sonix add pop to scaffold sounds into your project
• Framework agnostic — works with React, Vue, Svelte, vanilla JS, anything
• Dark mode — with cinematic circular reveal transition
• prefers-reduced-motion — respects user accessibility preferences

Quick Start

Web Audio (no files needed)

const ctx = new AudioContext();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.type = 'sine';
osc.frequency.setValueAtTime(800, ctx.currentTime);
gain.gain.setValueAtTime(0.25, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
osc.connect(gain).connect(ctx.destination);
osc.start();
osc.stop(ctx.currentTime + 0.15);

MP3 (for button clicks)

const audio = new Audio('/sonix/click1.mp3');
audio.volume = 0.5;
audio.play();

React Hook

import { playPop } from '@/components/sonix';

function MyButton() {
  return <button onClick={playPop}>Click</button>;
}

CLI

Add sounds to any project with the CLI:

npx @akshatbuilds/sonix list              # List all available sounds
npx @akshatbuilds/sonix add pop           # Add a single sound
npx @akshatbuilds/sonix add pop swoosh    # Add multiple sounds

Sounds are written to components/sonix/ as standalone files — no runtime dependency. MP3 assets are downloaded automatically to public/sonix/.

Available Sounds

| Name | Category | Source | Use Case | |------|----------|--------|----------| | button-click | Interaction | MP3 | Primary button presses | | button-click-secondary | Interaction | MP3 | Secondary / ghost buttons | | hover-blip | Feedback | Web Audio | Hovering over interactive elements | | hover-soft | Feedback | Web Audio | Subtle hover feedback | | success-chime | Notification | Web Audio | Form submissions, saves | | success-bell | Notification | Web Audio | Achievements, milestones | | error-buzz | Alert | Web Audio | Validation errors, failed actions | | error-beep | Alert | Web Audio | Warnings, blocked actions | | notification-ping | Alert | Web Audio | New messages, alerts | | notification-subtle | Alert | Web Audio | Background updates | | swoosh | Transition | Web Audio | Page transitions, panel slides | | pop | Interaction | Web Audio | Tooltips, popovers, reveals | | slider-tick | Interaction | Web Audio | Sliders, range inputs | | key-press | Interaction | Web Audio | Text inputs, keyboards |

Accessibility

All sounds respect prefers-reduced-motion: reduce. When the user has requested reduced motion, sounds are automatically silenced.

To manually control sound:

// Check user preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (!prefersReducedMotion) {
  playPop();
}

Development

pnpm install
pnpm dev

Build

pnpm build

Registry

The project includes a shadcn-style registry at public/registry/. To rebuild:

node scripts/build-registry.mjs

License

MIT — see LICENSE.