5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:T70d,

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

59:[["$","$L5c",null,{"post":{"id":"019d6f30-2e62-7db3-b21d-a082e15693a6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"563714eb-1750-436a-8d0c-0caafcb63e47","name":"Adam Sebesta","slug":"sebadam","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28848/Profile%20pic%201-KBbXTPmDVdpc0to1t94fshyMXlYT6c.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7ntsA1Fg3S4tkpbDO7bC","resolved":true,"title":"Sound Wave Bars","body":"$5d","bodyJson":null,"introduction":"Animated sound wave bars","slug":"sound-wave-bars","author":{"framerUserId":"563714eb-1750-436a-8d0c-0caafcb63e47","name":"Adam Sebesta","slug":"sebadam","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28848/Profile%20pic%201-KBbXTPmDVdpc0to1t94fshyMXlYT6c.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/7ntsA1Fg3S4tkpbDO7bC/sound-wave-bars-rP3CzU2eTzmhzBttwsj5jLVCiCxU9N"}],"post":null,"createdAt":"2026-04-08T22:20:20.960Z","updatedAt":"2026-04-08T22:31:24.403Z","publishedAt":"2026-04-08T22:22:01.826Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.click/m/Wavebars-ckmMEv.js@SPYIxUVT0Tduo6pyIER7","previewUrl":"https://magnetic-button-component.framer.website/components/wave-bars","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"SPYIxUVT0Tduo6pyIER7"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-08T22:22:01.826Z","updatedAt":"2026-04-08T22:22:01.826Z","reported":false}}],"$L5e"]

Suggested for you