The sound layer your product deserves
850+ synthesized interaction sounds. No audio files, no dependencies, no loading. Pure oscillators at runtime in under 3 kB.
One attribute. Instant feedback.
Drop data-sf-* on any element, call bind() once. Every interaction below is live — go ahead, try them.
data-sf-pressTactile confirmation on tap. Perfect for likes, reactions, and primary actions.
data-sf-toggleDistinct tones for on and off states. Works with any checkbox, switch, or toggle.
data-sf-press + releasePaired mouse-down and mouse-up. Creates the feel of pressing a physical button.
Every sound, generated at runtime.
No files to host, no CDN to rely on. Tap a card below to hear the difference.
Ship sound in under a minute.
1. Install the package
<!-- paste before </body> -->
<script src="https://unpkg.com/sonic-flow@latest"></script>
<script>SonicFlow.bind();</script>No build step required with the script tag. Works in any HTML page, any framework.
2. Connect your interface
Tag elements with data-sf-* attributes, then call bind() on page load. That's the entire setup.
1 2 3 4<!-- tag any element with a behavior --> <button data-sf-press data-sf-release>Save</button> <a data-sf-hover="tick">Docs</a> <input data-sf-toggle type="checkbox" />
1 2 3 4 5 6 7import { bind, play, setVolume } from "sonic-flow"; bind(); // wires every data-sf-* element setVolume(0.7); // master volume, 0 to 1 play("success"); // uses master volume play("success", { volume: 0.4 }); // override per call
1 2 3 4 5 6 7 8<!-- no bundler needed --> <script src="https://unpkg.com/sonic-flow@latest"></script> <button data-sf-press>Click me</button> <script> SonicFlow.bind(); </script>