https://github.com/agrawal-rohit/react-animated-waves
A React component for creating beautiful audio visualizations or UI loading states using animated waves
https://github.com/agrawal-rohit/react-animated-waves
animated-wave audio-visualization loader-animation reactjs
Last synced: 8 months ago
JSON representation
A React component for creating beautiful audio visualizations or UI loading states using animated waves
- Host: GitHub
- URL: https://github.com/agrawal-rohit/react-animated-waves
- Owner: agrawal-rohit
- License: mit
- Created: 2024-01-17T06:28:21.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-08-31T20:06:15.000Z (9 months ago)
- Last Synced: 2025-08-31T22:11:34.291Z (9 months ago)
- Topics: animated-wave, audio-visualization, loader-animation, reactjs
- Language: TypeScript
- Homepage:
- Size: 282 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## React Animated Waves
[Installation](#installation) • [Demo](https://codesandbox.io/p/sandbox/react-animated-waves-example-6z9hlh) • [Usage](#usage) • [Props](#props) • [Contributing](#contributing) • [License](#license)
A canvas-based component built with React for creating fluid animated waves _(ideally used in audio visualizations, voice UIs, progress loaders, etc.)_.
## Installation
The easiest way to get the latest version of `react-animated-waves` is to install it via npm, yarn or pnpm:
```bash
npm install react-animated-waves
```
## Usage
Import the `Waves` component from the library and use it in your React app. Check out an interactive demo [here](https://codesandbox.io/p/sandbox/react-animated-waves-example-6z9hlh).
```jsx
import Waves from "react-animated-waves";
;
```
## Props
The `Waves` component accepts the following props:
| Prop | Description | Default |
| ----------- | --------------------------------------------------------------------------- | ------------- |
| `amplitude` | Defines the height of the waveform. Higher values result in taller waves. | `20` |
| `colors` | An array of colors used to create a linear gradient effect on the waveform. | `['#436EDB']` |
## Contributing
Contributions are welcome. Please read the [contributing guide](CONTRIBUTING.md) for more information.
## License
[MIT License](LICENSE).