A dynamic waveform effect that visualizes audio input with animated bars.
npx shadcn@latest add @refinery/waveform-bars| Name | Type | Description |
|---|---|---|
| btnBackgroundColor | string | Button background color when toggled on. |
| backgroundColor | string | Tailwind class for the waveform bars color. |
| iconSize | string | Size class for the microphone icon. |
The component consists of a series of bars that represent the amplitude of the audio signal. When the mic is toggled on, the bars animate with varying heights and a subtle horizontal movement to simulate the feel of a real audio waveform. The animation is achieved using Motion, with each bar having its own animation parameters for a more organic look. The bars are styled with a gradient color that can be customized via CSS variables, allowing for easy theming. The component is designed to be responsive and visually appealing, making it suitable for use in voice-enabled applications or as a decorative element in a UI. The waveform bars animate vertically with a randomized height, animated with motion, when the mic is toggled. The transition in the button div as well as waveform bars div is based on custom cubic-bezier curve (achieved from easings.co). You can adjust the waveform bars animation speed by tweaking the 'duration' and 'delay' parameter. As well as, you can change the color of the mic and bars (visible when the button is toggled on) as per your brand colors.