[{"data":1,"prerenderedAt":113},["ShallowReactive",2],{"products":3,"post:why-ui-sound-matters":100,"product-by-slug:web-have-sounds":108},[4,23,38,60,73,85],{"title":5,"tagline":6,"description":7,"status":8,"kind":9,"order":10,"art":11,"artAlt":12,"platforms":13,"facts":16,"links":20,"slug":11,"path":22},"Fold","Journaling, but cool.","The journaling app for Gen Z. Photos, voice notes and quick thoughts, captured with a tap, a hold, or a swipe.","waitlist","app",1,"fold","A skeleton reading a book in a field of roses",[14,15],"iOS","Android",[17,18,19],"Free","Coming 2026","No account, no cloud",{"waitlist":21},"https:\u002F\u002Ffold.taohq.org","\u002Fproducts\u002Ffold",{"title":24,"tagline":25,"description":26,"status":27,"kind":9,"order":28,"art":29,"artAlt":30,"platforms":31,"facts":33,"links":35,"slug":29,"path":37},"Bottles","Bookmarks and docs, filed properly.","A quiet place for your links, notes and files. No feed, no noise. One space for what you keep, one for what you write.","live",2,"bottles","A skull resting in still water, surrounded by rings of ripples",[32],"Web",[34],"Live now",{"app":36},"https:\u002F\u002Fbottles.taohq.org","\u002Fproducts\u002Fbottles",{"title":39,"tagline":40,"description":41,"status":42,"kind":43,"order":44,"art":39,"artAlt":45,"platforms":46,"facts":51,"links":54,"install":58,"slug":39,"path":59},"opendraw","Hand-drawn diagrams, as one component.","A free, open-source hand-drawn whiteboard for your app. Draw hand-drawn diagrams with shapes, arrows, text and sticky notes, one component for Vue, Nuxt, React and Svelte.","open-source","library",3,"A hand-drawn diagram: a rectangle, an ellipse, an arrow, a sticky note, a diamond and a spark",[47,48,49,50],"Vue","Nuxt","React","Svelte",[52,53],"MIT license","Autosaves to localStorage",{"app":55,"github":56,"npm":57},"https:\u002F\u002Fopendraw.taohq.org","https:\u002F\u002Fgithub.com\u002FTheAlphaOnes\u002Fopendraw","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@opendrawjs\u002Fnuxt","npm i @opendrawjs\u002Fnuxt","\u002Fproducts\u002Fopendraw",{"title":61,"tagline":62,"description":63,"status":64,"kind":9,"order":65,"art":66,"artAlt":67,"platforms":68,"facts":69,"slug":66,"path":72},"Bubbles.space","Your AI assistant's home.","A personal AI workspace OS built for the way you actually think. Bubbles, your assistant, lives and works alongside you.","in-development",4,"bubbles-space","A small figure sitting under a blossoming tree beneath a full moon",[],[70,71],"Part of the Bubbles family","AI-agent first","\u002Fproducts\u002Fbubbles-space",{"title":74,"tagline":75,"description":76,"status":64,"kind":9,"order":77,"art":78,"artAlt":79,"platforms":80,"facts":82,"slug":78,"path":84},"Bubbles.mail","It reads your inbox so you don't have to.","An intelligent mail client that turns the raw chaos of email into a short report of what matters, what can wait, and what to hand off.",5,"bubbles-mail","A skull crowned with blossoms, pierced by an arrow",[81],"macOS",[70,83],"Native macOS","\u002Fproducts\u002Fbubbles-mail",{"title":86,"tagline":87,"description":88,"status":42,"kind":43,"order":89,"art":86,"artAlt":90,"platforms":91,"facts":93,"links":95,"install":98,"slug":86,"path":99},"web-have-sounds","UI sounds, generated with math.","A zero-dependency JavaScript library for UI sound effects. No audio files, no network requests. Just the Web Audio API.",6,"A crow perched on a skull inside an arched frame",[32,92],"npm",[94],"Zero dependencies",{"github":96,"npm":97},"https:\u002F\u002Fgithub.com\u002FNormVg\u002Fweb-have-sound","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@thenormvg\u002Fweb-have-sounds","npm i @thenormvg\u002Fweb-have-sounds","\u002Fproducts\u002Fweb-have-sounds",{"title":101,"description":102,"date":103,"author":104,"product":86,"slug":105,"path":106,"readingMinutes":28,"html":107},"Why UI Sound Matters","Good interfaces talk back. On designing audio feedback that informs instead of annoys, and why synthesis beats shipping audio files.","2026-08-05","taohq","why-ui-sound-matters","\u002Fwriting\u002Fwhy-ui-sound-matters","\u003Cp>Take stock of everything your screen does to talk to you. It's almost all light: something flashes, something turns green, a badge appears. One channel sits there almost unused — sound.\u003C\u002Fp>\n\u003Cp>That's not because sound doesn't work. It's because sound is easy to do badly and embarrassing to do loudly, so most teams skip it. Done right, it's the difference between an interface that watches you and one that answers you.\u003C\u002Fp>\n\u003Ch2>What sound is actually for\u003C\u002Fh2>\n\u003Cp>Audio feedback earns its place at exactly three moments:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Confirmation.\u003C\u002Fstrong> The button you clicked is doing the thing. A click costs nothing to hear and instantly tells you the press registered — before any visual change happens.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Completion.\u003C\u002Fstrong> A task that finishes while you're looking elsewhere. A short chime means you can stop waiting and stop checking.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Warning.\u003C\u002Fstrong> Something went wrong, and it should be findable without scanning the screen.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Notice what's missing: ambience, personality jingles, sound as decoration. If a sound isn't telling you something you'd otherwise miss, it's noise.\u003C\u002Fp>\n\u003Ch2>The four rules we design by\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Gate it on a gesture.\u003C\u002Fstrong> Browsers require a user interaction before audio can play anyway — treat that policy as a design constraint, not an obstacle. Sound belongs inside a click, a keypress, a drag. Never on page load, never uninvited.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Make it quiet by default.\u003C\u002Fstrong> The right volume for UI sound is the volume at which you'd notice its absence, not its presence. Anyone who wants it louder can turn it up; nobody forgives a loud default.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Keep the mapping consistent.\u003C\u002Fstrong> The same event should always make the same sound, everywhere in the product. Sound is a learned language; inconsistent sound is noise with branding.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Never let it carry the message alone.\u003C\u002Fstrong> Sound is one channel among sight, motion and text. Every piece of audio feedback needs a visual twin — for muted machines, for screen readers, for people who simply prefer silence.\u003C\u002Fp>\n\u003Ch2>Why we synthesize instead of shipping files\u003C\u002Fh2>\n\u003Cp>The traditional cost of UI sound is a stack of \u003Ccode>.wav\u003C\u002Fcode> files: bytes in the bundle, a fetch before playback, decode latency on the first press, and an art pipeline to keep every variant in sync.\u003C\u002Fp>\n\u003Cp>The Web Audio API can generate all of this in real time — oscillators, envelopes, filters, math. A click is a few milliseconds of shaped noise. A success chime is two sine tones with a fast decay. Nothing to download, nothing to decode, and the sound plays on the very frame you ask for it.\u003C\u002Fp>\n\u003Cp>That's why we built \u003Ca href=\"\u002Fproducts\u002Fweb-have-sounds\">web-have-sounds\u003C\u002Fa>: nine sound types — click, pop, toggle, tick, drop, success, error, whoosh, notification — each tuned for a real interaction, and nine themes so the voice matches the interface. Zero dependencies, no audio files, no network requests:\u003C\u002Fp>\n\u003Cpre class=\"shiki taohq\" style=\"background-color:#201e25;color:#ece8f3\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B2A0D8\">import\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#ECE8F3\"> playUISound \u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#B2A0D8\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> '\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">@thenormvg\u002Fweb-have-sounds\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ECE8F3\">button\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">.\u003C\u002Fspan>\u003Cspan style=\"color:#ECE8F3\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">(\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">click\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">,\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> ()\u003C\u002Fspan>\u003Cspan style=\"color:#B2A0D8\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ECE8F3\">  playUISound\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">(\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">pop\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A39DAD\">})\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2>Try one sound\u003C\u002Fh2>\n\u003Cp>You don't adopt a sound design by decree. Pick one interaction in your product — the one people repeat most — and give it one quiet, gesture-gated sound. Live with it for a week. What you'll find is what we found: the sound isn't the feature. The feature is that your interface stopped being mute.\u003C\u002Fp>\n\u003Cp>The \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@thenormvg\u002Fweb-have-sounds\">npm package\u003C\u002Fa> installs in seconds, and the \u003Ca href=\"\u002Fwriting\u002Fwe-shipped-web-have-sounds\">ship notes\u003C\u002Fa> cover the why in more detail.\u003C\u002Fp>\n",{"title":86,"tagline":87,"description":88,"status":42,"kind":43,"order":89,"art":86,"artAlt":90,"platforms":109,"facts":110,"links":111,"install":98,"slug":86,"path":99,"html":112},[32,92],[94],{"github":96,"npm":97},"\u003Cp>\u003Cstrong>We are building a sound library for web developers who want interactive audio feedback without the payload — pure math, native APIs, zero compromise.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Ch2>The Problem\u003C\u002Fh2>\n\u003Cp>Adding sound to a web app has always felt like a slightly embarrassing trade-off. You either load a bunch of \u003Ccode>.wav\u003C\u002Fcode> or \u003Ccode>.mp3\u003C\u002Fcode> files that bloat your bundle, introduce network latency, and sometimes just don't play at all — or you skip audio entirely and ship an interface that feels a little quieter than it should.\u003C\u002Fp>\n\u003Cp>The Web Audio API has been sitting in browsers for years, capable of generating rich sound entirely through code. But the mental overhead of working with it directly is real. Oscillators, gain nodes, buffer sources, timing — it's a lot to learn just to make a button go \u003Cem>click\u003C\u002Fem>.\u003C\u002Fp>\n\u003Cp>We wanted a better path.\u003C\u002Fp>\n\u003Ch2>The Solution\u003C\u002Fh2>\n\u003Cp>\u003Ccode>@thenormvg\u002Fweb-have-sounds\u003C\u002Fcode> is a professional, open-source JavaScript and TypeScript library that generates UI sound effects entirely through mathematics. No audio files. No CDN. No network requests. Just the Web Audio API doing what it was always capable of, wrapped in a clean, minimal interface.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Zero Dependencies\u003C\u002Fstrong>: Extremely lightweight. Nothing to install beyond the library itself.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Instant Playback\u003C\u002Fstrong>: Because the sound is generated in real-time, there's no buffering, no decoding delay. It plays the moment you call it.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Nine Sound Types\u003C\u002Fstrong>: From crisp \u003Ccode>click\u003C\u002Fcode>s to ascending \u003Ccode>success\u003C\u002Fcode> chimes, to bubbling \u003Ccode>pop\u003C\u002Fcode>s and descending \u003Ccode>drop\u003C\u002Fcode>s — tailored to fit real interaction contexts, not just demos.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Themeable\u003C\u002Fstrong>: Nine distinct sonic palettes — \u003Cem>aero\u003C\u002Fem>, \u003Cem>arcade\u003C\u002Fem>, \u003Cem>glass\u003C\u002Fem>, and more — so the sound matches the feeling of your interface.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Framework Agnostic\u003C\u002Fstrong>: Works with React, Vue, Svelte, Vanilla JS. If it runs in a browser, this library runs in it.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Getting Started\u003C\u002Fh2>\n\u003Cp>Install via your package manager of choice:\u003C\u002Fp>\n\u003Cpre class=\"shiki taohq\" style=\"background-color:#201e25;color:#ece8f3\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#ECE8F3\">npm \u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">install\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\"> @thenormvg\u002Fweb-have-sounds\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Then attach it to any user interaction:\u003C\u002Fp>\n\u003Cpre class=\"shiki taohq\" style=\"background-color:#201e25;color:#ece8f3\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B2A0D8\">import\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> {\u003C\u002Fspan>\u003Cspan style=\"color:#ECE8F3\"> playUISound \u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">}\u003C\u002Fspan>\u003Cspan style=\"color:#B2A0D8\"> from\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> '\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">@thenormvg\u002Fweb-have-sounds\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ECE8F3\">document\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">.\u003C\u002Fspan>\u003Cspan style=\"color:#ECE8F3\">querySelector\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">(\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">#submit-btn\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">).\u003C\u002Fspan>\u003Cspan style=\"color:#ECE8F3\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">(\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">click\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">,\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> ()\u003C\u002Fspan>\u003Cspan style=\"color:#B2A0D8\"> =>\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#ECE8F3\">  playUISound\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">(\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#C4B5E3\">pop\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">'\u003C\u002Fspan>\u003Cspan style=\"color:#A39DAD\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#A39DAD\">});\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>One thing worth knowing: browsers require a user gesture before the Web Audio API will play anything. Call \u003Ccode>playUISound\u003C\u002Fcode> inside a click or keypress handler and you'll be fine. More details in the docs.\u003C\u002Fp>\n\u003Ch2>Where to Find It\u003C\u002Fh2>\n\u003Cp>This is one of the first open-source tools we've shipped at \u003Ca href=\"\u002Fabout\">taohq\u003C\u002Fa>. We believe in building in the open — not just for visibility, but because the best tools get sharper when more people use them.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>npm\u003C\u002Fstrong>: \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@thenormvg\u002Fweb-have-sounds\">npmjs.com\u002Fpackage\u002F@thenormvg\u002Fweb-have-sounds\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>GitHub\u003C\u002Fstrong>: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FNormVg\u002Fweb-have-sound\">github.com\u002FNormVg\u002Fweb-have-sound\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Updates\u003C\u002Fstrong>: \u003Ca href=\"https:\u002F\u002Fx.com\u002FTheNormVg\">X\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>If you use it in a project, we'd genuinely love to hear about it.\u003C\u002Fp>\n",1793498088341]