5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T9b4,

Real-Time Audio Visualizer for Framer

Bring your designs to life with a high-performance audio-reactive waveform visualizer. This component captures live microphone input and transforms it into a smooth, glowing waveform with a premium cinematic feel.

Designed for modern UI/UX, it blends perfectly into dark interfaces, music platforms, portfolios, and interactive landing pages.

Key Features

Auto Microphone Activation

Starts automatically on load
No setup required
Seamless real-time audio input

Smooth Waveform Animation

Fluid, high-resolution waveform rendering
Optimized smoothing for clean motion
Real-time amplitude response

Glow + Depth Effects

Subtle glow layer for premium feel
Dual-layer rendering (wave + glow)
Enhanced visual depth and clarity

Cinematic Edge Fade

Dark gradient fade on left and right
Blends naturally into any background
Creates immersive, focused visuals

Customizable Controls Panel

Toggle visualizer control button
Show/hide grid background
Adjust colors and opacity
Enable/disable idle animation

Fully Customizable Design

Wave color
Glow color
Background color
Grid opacity

Performance Optimized

Uses efficient Canvas rendering
Smooth animation at 60fps
Lightweight and fast

Perfect For

Music apps & audio tools
Portfolio websites
Creative landing pages
Hero sections with interaction
Streaming or podcast UI
Experimental UI/UX designs

Why This Component Stands Out

Minimal yet visually striking
Plug-and-play (no setup friction)
Designed for modern dark UI trends
Marketplace-ready quality
Built specifically for Framer workflows.

5a:[["$","$L5d",null,{"post":{"id":"019db474-de76-73b7-b383-f75552dd9eb5","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"63236348-0a2a-46a1-a8b4-336d7528c9a7","name":"Viper Guy","slug":"viper-guy","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"rpGFQyk811MeazsbQaqX","resolved":true,"title":"SoundVisualizer","body":"$5e","bodyJson":null,"introduction":"Audio Reactive Wave Visualizer UI","slug":"soundvisualizer","author":{"framerUserId":"63236348-0a2a-46a1-a8b4-336d7528c9a7","name":"Viper Guy","slug":"viper-guy","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/rpGFQyk811MeazsbQaqX/soundvisualizer-IznJVOrkW74B63AMomqSDrwKn7znnB","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-07T16:24:34.423Z","updatedAt":"2026-06-01T05:17:30.022Z","publishedAt":"2026-04-22T09:10:51.254Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-reason-877032.framer.app/","price":"2","paymentUrl":"https://buy.polar.sh/polar_cl_ZA0N1xuLLzMNVXuH0HG9KAp8iFQA2pg25Tajm4dL32h","workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"ay5E7pDgJZ0XJlvja2Hq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-22T09:10:51.254Z","updatedAt":"2026-04-22T09:10:51.254Z","reported":false}}],"$L5f"]

Suggested for you