[{"data":1,"prerenderedAt":243},["ShallowReactive",2],{"navigation_docs":3,"-guide-introduction":81,"-guide-introduction-surround":240},[4,41,62],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":40},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fguide\u002Fintroduction","1.guide\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"How it works","\u002Fguide\u002Fhow-it-works","1.guide\u002F2.how-it-works","i-lucide-workflow",{"title":21,"path":22,"stem":23,"icon":24},"Data modes","\u002Fguide\u002Fdata-modes","1.guide\u002F3.data-modes","i-lucide-git-fork",{"title":26,"path":27,"stem":28,"icon":29},"Options","\u002Fguide\u002Foptions","1.guide\u002F4.options","i-lucide-settings-2",{"title":31,"path":32,"stem":33,"icon":34},"Gradients","\u002Fguide\u002Fgradients","1.guide\u002F5.gradients","i-lucide-palette",{"title":36,"path":37,"stem":38,"icon":39},"WebSocket protocol","\u002Fguide\u002Fwebsocket-protocol","1.guide\u002F6.websocket-protocol","i-lucide-radio",false,{"title":42,"icon":43,"path":44,"stem":45,"children":46,"page":40},"Core","i-lucide-box","\u002Fcore","2.core",[47,52,57],{"title":48,"path":49,"stem":50,"icon":51},"Installation","\u002Fcore\u002Finstallation","2.core\u002F1.installation","i-lucide-download",{"title":53,"path":54,"stem":55,"icon":56},"API reference","\u002Fcore\u002Fapi","2.core\u002F2.api","i-lucide-code",{"title":58,"path":59,"stem":60,"icon":61},"Audio engines","\u002Fcore\u002Faudio-engines","2.core\u002F3.audio-engines","i-lucide-audio-lines",{"title":63,"icon":64,"path":65,"stem":66,"children":67,"page":40},"Vue","i-simple-icons-vuedotjs","\u002Fvue","3.vue",[68,71,76],{"title":48,"path":69,"stem":70,"icon":51},"\u002Fvue\u002Finstallation","3.vue\u002F1.installation",{"title":72,"path":73,"stem":74,"icon":75},"Props, events & methods","\u002Fvue\u002Fprops","3.vue\u002F2.props","i-lucide-sliders-horizontal",{"title":77,"path":78,"stem":79,"icon":80},"Composables","\u002Fvue\u002Fcomposables","3.vue\u002F3.composables","i-lucide-plug",{"id":82,"title":11,"body":83,"description":233,"extension":234,"links":235,"meta":236,"navigation":237,"path":12,"seo":238,"stem":13,"__hash__":239},"docs\u002F1.guide\u002F1.introduction.md",{"type":84,"value":85,"toc":226},"minimark",[86,102,109,142,147,193,197,204,211,215],[87,88,89,93,94,97,98,101],"p",{},[90,91,92],"strong",{},"FFT Visualizer"," is a high-performance, WebGL-based real-time audio ",[90,95,96],{},"spectrum analyzer","\nand ",[90,99,100],{},"FFT visualizer"," for the web.",[87,103,104,105,108],{},"The entire visual — bars, LED segments, radial layout, gradient, glow, reflection — is\ndrawn by a ",[90,106,107],{},"single fragment shader in one GPU draw call",", so it stays smooth even at\n120 fps with 80 bands in stereo.",[110,111,112,113,120,121,127,128,131,132,137,138,141],"note",{},"It ships as two packages from ",[114,115,119],"a",{"href":116,"rel":117},"https:\u002F\u002Fgithub.com\u002Fharmonics-audio\u002Ffft-visualizer",[118],"nofollow","one monorepo",":\n",[114,122,123],{"href":49},[124,125,126],"code",{},"fft-visualizer-core"," — a framework-agnostic vanilla-TypeScript class\nyou drop onto a ",[124,129,130],{},"\u003Ccanvas>"," in any framework, or none — and\n",[114,133,134],{"href":69},[124,135,136],{},"fft-visualizer-vue",", a thin Vue 3 wrapper around it. A React wrapper is\nplanned. ",[90,139,140],{},"This Guide covers the shared concepts;"," the Core and Vue tabs cover each\npackage's own API.",[143,144,146],"h2",{"id":145},"highlights","Highlights",[148,149,150,157,163,169,175,181,187],"ul",{},[151,152,153,156],"li",{},[90,154,155],{},"WebGL fragment-shader rendering"," — the whole spectrum is one draw call; no per-bar canvas ops.",[151,158,159,162],{},[90,160,161],{},"Three data sources"," — capture audio locally (mic or tab\u002Fsystem), stream pre-computed FFT over WebSocket, or feed your own data.",[151,164,165,168],{},[90,166,167],{},"In-browser FFT"," — optional Rust\u002FWASM FFT processor, lazy-loaded only when you capture audio locally.",[151,170,171,174],{},[90,172,173],{},"Rich visual modes"," — LED segments (two styles), radial, stereo, mirrored reflection, glow, rotation, per-level or per-axis coloring.",[151,176,177,180],{},[90,178,179],{},"Flexible gradients"," — 10 built-in presets or custom stops in any CSS color format.",[151,182,183,186],{},[90,184,185],{},"Zero rendering dependencies"," — the whole visual is native WebGL; no charting library, no canvas 2D.",[151,188,189,192],{},[90,190,191],{},"Framework-agnostic"," — a vanilla-TS core with thin per-framework wrappers (Vue today, React next).",[143,194,196],{"id":195},"why-this-instead-of-a-canvas-visualizer","Why this instead of a canvas visualizer?",[87,198,199,200,203],{},"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",[90,201,202],{},"single WebGL fragment shader \u002F draw call",", which keeps it cheap at high band counts and\nframe rates.",[87,205,206,207,210],{},"It also ships a ",[90,208,209],{},"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.",[143,212,214],{"id":213},"browser-support","Browser support",[87,216,217,218,221,222,225],{},"Requires WebGL (all modern browsers): Chrome 56+, Firefox 51+, Safari 15+, Edge 79+.\nLocal capture additionally needs ",[124,219,220],{},"getUserMedia"," \u002F ",[124,223,224],{},"getDisplayMedia",".",{"title":227,"searchDepth":228,"depth":228,"links":229},"",2,[230,231,232],{"id":145,"depth":228,"text":146},{"id":195,"depth":228,"text":196},{"id":213,"depth":228,"text":214},"What FFT Visualizer is, and why it renders differently from other audio visualizers.","md",null,{},{"icon":14},{"title":11,"description":233},"2c5c0GEodYKMCQ6aG68JAufjSvdzFMJe44sMkxKuYHU",[235,241],{"title":16,"path":17,"stem":18,"description":242,"icon":19,"children":-1},"The signal pipeline from raw audio to rendered bars — and where the FFT actually runs.",1784963432588]