[{"data":1,"prerenderedAt":188},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-introduction":47,"-getting-started-introduction-surround":185},[4,26],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Data modes","\u002Fgetting-started\u002Fdata-modes","1.getting-started\u002F3.data-modes","i-lucide-git-fork",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Reference","i-lucide-book-open","\u002Freference","2.reference",[32,37,42],{"title":33,"path":34,"stem":35,"icon":36},"Props, events & methods","\u002Freference\u002Fprops","2.reference\u002F1.props","i-lucide-sliders-horizontal",{"title":38,"path":39,"stem":40,"icon":41},"Gradients","\u002Freference\u002Fgradients","2.reference\u002F2.gradients","i-lucide-palette",{"title":43,"path":44,"stem":45,"icon":46},"Composables & protocol","\u002Freference\u002Fcomposables","2.reference\u002F3.composables","i-lucide-plug",{"id":48,"title":11,"body":49,"description":178,"extension":179,"links":180,"meta":181,"navigation":182,"path":12,"seo":183,"stem":13,"__hash__":184},"docs\u002F1.getting-started\u002F1.introduction.md",{"type":50,"value":51,"toc":171},"minimark",[52,73,80,85,139,143,150,157,161],[53,54,55,59,60,64,65,68,69,72],"p",{},[56,57,58],"strong",{},"FFT Visualizer"," (",[61,62,63],"code",{},"vue-fft-visualizer",") is a high-performance, WebGL-based real-time\naudio ",[56,66,67],{},"spectrum analyzer"," and ",[56,70,71],{},"FFT visualizer"," component for Vue 3.",[53,74,75,76,79],{},"The entire visual — bars, LED segments, radial layout, gradient, glow, reflection — is\ndrawn by a ",[56,77,78],{},"single fragment shader in one GPU draw call",", so it stays smooth even at\n120 fps with 80 bands in stereo.",[81,82,84],"h2",{"id":83},"highlights","Highlights",[86,87,88,95,101,107,113,119,125],"ul",{},[89,90,91,94],"li",{},[56,92,93],{},"WebGL fragment-shader rendering"," — the whole spectrum is one draw call; no per-bar canvas ops.",[89,96,97,100],{},[56,98,99],{},"Three data sources"," — capture audio locally (mic or tab\u002Fsystem), stream pre-computed FFT over WebSocket, or feed your own data via props.",[89,102,103,106],{},[56,104,105],{},"In-browser FFT"," — optional Rust\u002FWASM FFT processor, lazy-loaded only when you capture audio locally.",[89,108,109,112],{},[56,110,111],{},"Rich visual modes"," — LED segments (two styles), radial, stereo, mirrored reflection, glow, rotation, per-level or per-axis coloring.",[89,114,115,118],{},[56,116,117],{},"Flexible gradients"," — 10 built-in presets or custom stops in any CSS color format.",[89,120,121,124],{},[56,122,123],{},"One peer dependency"," — just Vue 3; rendering uses native WebGL.",[89,126,127,130,131,134,135,138],{},[56,128,129],{},"SSR-safe"," — all browser access is deferred to ",[61,132,133],{},"onMounted","; works with Nuxt via ",[61,136,137],{},"\u003CClientOnly>",".",[81,140,142],{"id":141},"why-this-instead-of-a-canvas-visualizer","Why this instead of a canvas visualizer?",[53,144,145,146,149],{},"Most spectrum visualizers (e.g. audioMotion-analyzer) draw to a 2D canvas. FFT Visualizer\nrenders the entire frame — every bar, LED gap, gradient, glow and reflection — in a\n",[56,147,148],{},"single WebGL fragment shader \u002F draw call",", which keeps it cheap at high band counts and\nframe rates.",[53,151,152,153,156],{},"It also ships a ",[56,154,155],{},"WebSocket remote-FFT protocol"," with reference servers (Python, Node.js,\nRust), so the FFT can run on a separate device — a Raspberry Pi, a media server — and the\nbrowser only draws. That's a case canvas visualizers don't cover.",[81,158,160],{"id":159},"browser-support","Browser support",[53,162,163,164,167,168,138],{},"Requires WebGL (all modern browsers): Chrome 56+, Firefox 51+, Safari 15+, Edge 79+.\nLocal capture additionally needs ",[61,165,166],{},"getUserMedia"," \u002F ",[61,169,170],{},"getDisplayMedia",{"title":172,"searchDepth":173,"depth":173,"links":174},"",2,[175,176,177],{"id":83,"depth":173,"text":84},{"id":141,"depth":173,"text":142},{"id":159,"depth":173,"text":160},"What FFT Visualizer is, and why it renders differently from other audio visualizers.","md",null,{},{"icon":14},{"title":11,"description":178},"FKh-lBunLbdvIQDzr4ocWkufkF7AYSgKxL4ZelR5ZXg",[180,186],{"title":16,"path":17,"stem":18,"description":187,"icon":19,"children":-1},"Install the package and render your first spectrum in under a minute.",1784469224092]