[{"data":1,"prerenderedAt":212},["ShallowReactive",2],{"navigation_docs":3,"landing":81},[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":83,"body":84,"description":83,"extension":203,"meta":204,"navigation":205,"path":206,"seo":207,"stem":210,"__hash__":211},"landing\u002Findex.md","",{"type":85,"value":86,"toc":200},"minimark",[87,132,138],[88,89,91,95,98,110],"u-page-hero",{"orientation":90},"horizontal",[92,93,94],"template",{"v-slot:title":83},"Real-time audio spectrum, on the GPU",[92,96,97],{"v-slot:description":83},"A high-performance, WebGL-based audio spectrum analyzer and FFT visualizer for the web —\na framework-agnostic TypeScript core with a first-class Vue 3 component. Visualize the\nmicrophone, tab\u002Fsystem audio, a WebSocket stream, or your own data — the entire frame\ndrawn by a single fragment shader.",[99,100,103],"div",{"className":101},[102],"hero-visual",[104,105],"img",{"alt":106,"height":107,"src":108,"width":109},"FFT Visualizer radial spectrum",926,"\u002Fhero.png",1034,[92,111,112,119,126],{"v-slot:links":83},[113,114,118],"u-button",{"color":115,"size":116,"to":12,"trailing-icon":117},"neutral","xl","i-lucide-arrow-right","Get started",[113,120,125],{"color":115,"size":116,"to":121,"icon":122,"variant":123,"target":124},"https:\u002F\u002Fdemo.fftvisualizer.com\u002F","i-lucide-play","subtle","_blank","Live demo",[113,127,131],{"color":115,"size":116,"to":128,"icon":129,"variant":130},"https:\u002F\u002Fgithub.com\u002Fharmonics-audio\u002Ffft-visualizer","i-simple-icons-github","outline","View on GitHub",[133,134,135],"u-container",{},[136,137],"demo-player",{},[139,140,141,144],"u-page-section",{},[92,142,143],{"v-slot:title":83},"Why FFT Visualizer",[92,145,146,156,165,174,182,191],{"v-slot:features":83},[147,148,150,153],"u-page-feature",{"icon":149},"i-lucide-cpu",[92,151,152],{"v-slot:title":83},"Single-draw-call WebGL",[92,154,155],{"v-slot:description":83},"Every bar, LED segment, gradient, glow and reflection is rendered by one fragment\nshader — smooth at 120fps with 80 bands in stereo.",[147,157,159,162],{"icon":158},"i-lucide-mic",[92,160,161],{"v-slot:title":83},"Three data sources",[92,163,164],{"v-slot:description":83},"Capture audio locally (mic or tab\u002Fsystem), stream pre-computed FFT over WebSocket,\nor feed your own magnitudes via props.",[147,166,168,171],{"icon":167},"i-lucide-waves",[92,169,170],{"v-slot:title":83},"In-browser FFT (Rust\u002FWASM)",[92,172,173],{"v-slot:description":83},"Optional WebAssembly FFT processor, lazy-loaded only when you capture audio locally.\nZero backend required.",[147,175,176,179],{"icon":34},[92,177,178],{"v-slot:title":83},"Rich visual modes",[92,180,181],{"v-slot:description":83},"LED segments, radial layout, stereo, mirrored reflection, glow, rotation, and 10\ngradient presets or your own CSS-color stops.",[147,183,185,188],{"icon":184},"i-lucide-package",[92,186,187],{"v-slot:title":83},"Framework-agnostic core",[92,189,190],{"v-slot:description":83},"A vanilla-TypeScript engine with thin wrappers — Vue today, React next. Rendering uses\nnative WebGL: no charting library, no canvas 2D.",[147,192,194,197],{"icon":193},"i-lucide-square-dashed",[92,195,196],{"v-slot:title":83},"Transparent & themeable",[92,198,199],{"v-slot:description":83},"Any background color, including a fully transparent canvas that blends into your\npage. SSR-safe for Nuxt.",{"title":83,"searchDepth":201,"depth":201,"links":202},2,[],"md",{},true,"\u002F",{"title":208,"description":209},"WebGL Audio Spectrum Analyzer for the Web","A high-performance, WebGL audio spectrum analyzer and FFT visualizer for the web — a framework-agnostic TypeScript core with a Vue 3 component. Visualize a mic, tab\u002Fsystem audio, a WebSocket stream, or your own data, all on the GPU.","index","6VET-IcjtwczB0rIwX7oALVfcVxKInImJR4bElCglEk",1784963432335]