Sound Wave Bars

Sound Wave Bars is a Framer component that adds a looping, animated waveform to any layout.

Sound Wave Bars is a Framer component that adds a looping, animated waveform to any layout. Each bar pulses independently in a smooth, continuous rhythm — giving your design a sense of life without a single line of custom code. Adjust the number of bars, animation speed, stagger phase, and height range to dial in anything from a subtle ambient pulse to a high-energy audio visualizer. No extra libraries required. The animation runs entirely on Framer's built-in motion engine and works out of the box on any project. How to Set It Up Drop the component onto your canvas, open the properties panel, and start adjusting. Change the bar count with the Bars slider, set the Gap between bars in pixels, and use Min % and Max % to define how far each bar travels. Increase the Stagger value for a fluid wave-like motion, or lower it for a synchronized bounce. Speed controls the animation frequency in Hz. Where It Works Best Sound Wave Bars is built for layouts where a static element would feel flat. It fits naturally into music players, podcast pages, audio tools, and SaaS products in the media or creator space. It also works well as a loading indicator, a hero section accent, or a visual cue inside a now-playing UI. If you're working on a Framer template, it drops in without any layout adjustments. Features Looping wave animation with per-bar stagger effect Control bar count, gap, min/max height, and speed from the properties panel Stagger slider — low for sync bounce, high for fluid wave motion Fully customizable color and opacity Scales to any container size No coding required Compatible with any Framer project or template

Animated sound wave bars