Tactile UI Sound Engine.
Zero-asset Web Audio API synthesizers designed for responsive physical feedback. Ultra-low latency, crisp transient decays, and 0kb audio downloads.
Click any sound below to trigger tactile synthesis in real-time.
Subtle Tactile Click
Crisp 800Hz-to-400Hz downward sine decay designed for micro buttons and controls.
Soft Surface Tap
Subtle 600Hz tap sound for list item touches, tab presses, and keyboard interactions.
Bubble Pop Tone
Ascending 320Hz-to-720Hz bubble burst for dropdown reveals, card popovers, and accordions.
Fluid Toggle Snap
Triangle wave 440Hz-to-660Hz tone representing state changes, switches, and checkmarks.
Magnetic Select Ping
Harmonic 540Hz sine ping when picking an option in magnetic dropdowns or radio chips.
Harmonic Success Chime
Polyphonic Major 3rd arpeggio (C5 → E5 → C6) celebrating form submit or task completion.
AI Generation Sparkle
High-frequency 1.2kHz-to-2.2kHz sine sweep for AI generation triggers, magic enhancements, and insights.
Modal Reveal Swoosh
Deep 220Hz upward sweep for sliding drawers, floating sheets, and full-screen transitions.
Modal Dismiss Sweep
Downward 880Hz-to-220Hz sweep when closing dialogs, command bars, and overlays.
Slider Scrub Tick
Low-amplitude 300Hz tick dispatched during drag gestures, reordering, and timeline scrubbing.
Digital Telemetry Beep
Crisp square wave 880Hz pulse for system alerts, timers, and critical telemetry updates.
Destructive Action Blip
Downward sawtooth 400Hz-to-150Hz decay providing audio weight when deleting or archiving items.
Snapshot Shutter Sound
Mechanical 1.2kHz downward click mimicking camera shutters, canvas exports, and screenshot triggers.
How it works: Web Audio Synthesizer
All sounds in Smooth UI are synthesized on the fly via the browser's native Web Audio API (`AudioContext`). This means instantaneous playback without HTTP request lag or broken asset paths.
// 1. Trigger anywhere in React
import { playUISound } from "@/components/layout/sound-engine";
<button
onClick={() => {
playUISound("toggle");
handleToggle();
}}
>
Toggle View
</button>