The sound layer your product deserves

<!-- Tag any element with a behavior -->
<button data-sf-press data-sf-release>Save</button>
<a href="/docs" data-sf-hover="hover-soft">Docs</a>
<input type="checkbox" data-sf-toggle>
<button data-sf="success">Publish</button>

import { bind, play, setVolume } from "sonic-flow";

bind();                          // wire every data-sf-* element
setVolume(0.7);                  // master volume, 0 to 1

play("success");                 // at master volume
play("error", { volume: 0.3 });  // quieter, this call only

import { useEffect } from "react";
import { bind, play } from "sonic-flow";

export default function App() {
  useEffect(() => { bind(); }, []);

  return (
    <button data-sf-press onClick={() => play("success")}>
      Save
    </button>
  );
}

<script setup>
import { onMounted } from "vue";
import { bind } from "sonic-flow";

onMounted(() => bind());
</script>

<template>
  <button data-sf-press data-sf-release>Save</button>
</template>