React Animated Waves is a ReactJS component which uses the Canvas API to create customisable wave animations.

When I was building voice agents at VoiceXD, I wanted to implement reactive wave animations to provide visual feedback to the user when they spoke into the microphone. I really enjoyed the idea of layered waves flowing in one direction (kind of like the ocean) that “wake up” by an external force (e.g. someone speaking into the microphone). While experimenting, I came across some visual references like this dribble preview and siriwave.js, and I took them as inspiration to build that similar effect into a reusable component.

The idea behind the animation is pretty simple - it’s a set of moving sine waves with small variations added their amplitude, frequency, and opacity. Each wave oscillates it’s amplitude ever-so-slightly to provide the illusion of “breathing” or just waves moving along the ocean. When an external influence immediately changes the amplitude of the waveform, the change is deliberately straggered across different frames to provide a smooth transition.