Skip to content

Audio Waveform

Animated equalizer bars

Audio Waveform preview image 1

Summary

Animated equalizer bars

Description

Shape comes in four options: rounded, line, dot, or tapered. Mirror mode splits bars from the center outward; turn it off and they rise from the bottom. Edge fade shortens bars toward the sides so the waveform tapers naturally instead of cutting off hard.

Each bar gets a two-color gradient — Color A to Color B — with optional glow. Speed and smoothing let you dial it from twitchy to slow and liquid. Bar count goes from 6 to 80, and you can control width, gap, and min/max height.

Liquid Glass mode wraps the whole thing in a frosted container: backdrop blur, subtle border, specular highlights. Tint color, blur amount, and border opacity are all configurable.

On the Framer canvas or when reduced motion is active, it renders a static CSS fallback instead of the canvas animation.

Rank history How rankings work →

11001200129348/149/49/2610/1811/9
  • All · #2055

Details

More like this