Generative Audio Button

Installation

npx kinetic-ui-cli@latest add generative-audio-btn

How It Works

Most UI is completely silent, or relies on .mp3 files which bloat bundle sizes and can have latency issues. This component leverages the browser's native AudioContext API to generate waveforms (sine, sawtooth) mathematically in real-time. By connecting an Oscillator Node to a Gain Node (for volume enveloping) and modulating the frequency across a few milliseconds, we can synthesize crisp, high-tech physical haptic sounds exactly when the pointer presses down and lifts up.

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { GenerativeAudioBtn } from "@/components/creative/generative-audio-btn";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { GenerativeAudioBtn } from "@/components/creative/generative-audio-btn";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <GenerativeAudioBtn
        soundType{/* value */}
      >
        <div>Content goes here</div>
      </GenerativeAudioBtn>
    </div>
  );
}