[{"data":1,"prerenderedAt":468},["ShallowReactive",2],{"navigation_docs":3,"-reference-gradients":47,"-reference-gradients-surround":463},[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":38,"body":49,"description":456,"extension":457,"links":458,"meta":459,"navigation":460,"path":39,"seo":461,"stem":40,"__hash__":462},"docs\u002F2.reference\u002F2.gradients.md",{"type":50,"value":51,"toc":450},"minimark",[52,56,61,115,126,159,163,174,323,327,343,347,350,446],[53,54,55],"p",{},"Bar colors are rasterized into a 256×1 lookup texture, so any CSS color and native gradient\ninterpolation work. Pass a preset name or an array of custom stops.",[57,58,60],"h2",{"id":59},"presets","Presets",[62,63,68],"pre",{"className":64,"code":65,"language":66,"meta":67,"style":67},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFFTVisualizer mode=\"local\" gradient=\"sunset\" \u002F>\n","vue","",[69,70,71],"code",{"__ignoreMap":67},[72,73,76,80,84,88,91,94,98,100,103,105,107,110,112],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"sMK4o","\u003C",[72,81,83],{"class":82},"swJcz","FFTVisualizer",[72,85,87],{"class":86},"spNyl"," mode",[72,89,90],{"class":78},"=",[72,92,93],{"class":78},"\"",[72,95,97],{"class":96},"sfazB","local",[72,99,93],{"class":78},[72,101,102],{"class":86}," gradient",[72,104,90],{"class":78},[72,106,93],{"class":78},[72,108,109],{"class":96},"sunset",[72,111,93],{"class":78},[72,113,114],{"class":78}," \u002F>\n",[53,116,117,118,121,122,125],{},"Built-in presets (exported as ",[69,119,120],{},"gradientPresets"," \u002F ",[69,123,124],{},"gradientNames","):",[53,127,128,131,132,131,135,131,138,131,141,131,144,131,147,149,150,131,153,131,156],{},[69,129,130],{},"classic"," · ",[69,133,134],{},"rainbow",[69,136,137],{},"blue",[69,139,140],{},"prism",[69,142,143],{},"orangered",[69,145,146],{},"steelblue",[69,148,109],{}," ·\n",[69,151,152],{},"aurora",[69,154,155],{},"dusk",[69,157,158],{},"mono",[57,160,162],{"id":161},"custom-stops","Custom stops",[53,164,165,166,169,170,173],{},"Any CSS color format works — hex, ",[69,167,168],{},"rgb()",", ",[69,171,172],{},"hsl()",", named colors:",[62,175,177],{"className":64,"code":176,"language":66,"meta":67,"style":67},"\u003CFFTVisualizer\n  mode=\"local\"\n  :gradient=\"[\n    { stop: 0, color: '#001233' },\n    { stop: 0.5, color: 'rgb(15, 155, 142)' },\n    { stop: 1, color: 'hsl(280, 95%, 75%)' }\n  ]\"\n\u002F>\n",[69,178,179,186,201,218,254,281,309,317],{"__ignoreMap":67},[72,180,181,183],{"class":74,"line":75},[72,182,79],{"class":78},[72,184,185],{"class":82},"FFTVisualizer\n",[72,187,189,192,194,196,198],{"class":74,"line":188},2,[72,190,191],{"class":86},"  mode",[72,193,90],{"class":78},[72,195,93],{"class":78},[72,197,97],{"class":96},[72,199,200],{"class":78},"\"\n",[72,202,204,207,210,212,214],{"class":74,"line":203},3,[72,205,206],{"class":78},"  :",[72,208,209],{"class":86},"gradient",[72,211,90],{"class":78},[72,213,93],{"class":78},[72,215,217],{"class":216},"sTEyZ","[\n",[72,219,221,224,227,230,234,237,240,242,245,248,251],{"class":74,"line":220},4,[72,222,223],{"class":78},"    {",[72,225,226],{"class":82}," stop",[72,228,229],{"class":78},":",[72,231,233],{"class":232},"sbssI"," 0",[72,235,236],{"class":78},",",[72,238,239],{"class":82}," color",[72,241,229],{"class":78},[72,243,244],{"class":78}," '",[72,246,247],{"class":96},"#001233",[72,249,250],{"class":78},"'",[72,252,253],{"class":78}," },\n",[72,255,257,259,261,263,266,268,270,272,274,277,279],{"class":74,"line":256},5,[72,258,223],{"class":78},[72,260,226],{"class":82},[72,262,229],{"class":78},[72,264,265],{"class":232}," 0.5",[72,267,236],{"class":78},[72,269,239],{"class":82},[72,271,229],{"class":78},[72,273,244],{"class":78},[72,275,276],{"class":96},"rgb(15, 155, 142)",[72,278,250],{"class":78},[72,280,253],{"class":78},[72,282,284,286,288,290,293,295,297,299,301,304,306],{"class":74,"line":283},6,[72,285,223],{"class":78},[72,287,226],{"class":82},[72,289,229],{"class":78},[72,291,292],{"class":232}," 1",[72,294,236],{"class":78},[72,296,239],{"class":82},[72,298,229],{"class":78},[72,300,244],{"class":78},[72,302,303],{"class":96},"hsl(280, 95%, 75%)",[72,305,250],{"class":78},[72,307,308],{"class":78}," }\n",[72,310,312,315],{"class":74,"line":311},7,[72,313,314],{"class":216},"  ]",[72,316,200],{"class":78},[72,318,320],{"class":74,"line":319},8,[72,321,322],{"class":216},"\u002F>\n",[57,324,326],{"id":325},"direction-color-mode","Direction & color mode",[328,329,330,337],"ul",{},[331,332,333,336],"li",{},[69,334,335],{},"gradientDirection=\"horizontal\""," runs the gradient across the frequency axis instead of the level axis.",[331,338,339,342],{},[69,340,341],{},"colorMode=\"bar-level\""," colors each whole bar by its current level (a VU-meter feel) rather than by position along the gradient axis.",[57,344,346],{"id":345},"helpers","Helpers",[53,348,349],{},"For building settings UIs or your own rendering, these are exported:",[62,351,355],{"className":352,"code":353,"language":354,"meta":67,"style":67},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  gradientPresets,\n  gradientNames,\n  resolveGradientStops,\n  buildGradientLUT,\n  GRADIENT_LUT_SIZE,\n  type GradientStop,\n  type GradientName,\n  type GradientInput\n} from 'vue-fft-visualizer'\n","ts",[69,356,357,366,374,381,388,395,402,412,421,429],{"__ignoreMap":67},[72,358,359,363],{"class":74,"line":75},[72,360,362],{"class":361},"s7zQu","import",[72,364,365],{"class":78}," {\n",[72,367,368,371],{"class":74,"line":188},[72,369,370],{"class":216},"  gradientPresets",[72,372,373],{"class":78},",\n",[72,375,376,379],{"class":74,"line":203},[72,377,378],{"class":216},"  gradientNames",[72,380,373],{"class":78},[72,382,383,386],{"class":74,"line":220},[72,384,385],{"class":216},"  resolveGradientStops",[72,387,373],{"class":78},[72,389,390,393],{"class":74,"line":256},[72,391,392],{"class":216},"  buildGradientLUT",[72,394,373],{"class":78},[72,396,397,400],{"class":74,"line":283},[72,398,399],{"class":216},"  GRADIENT_LUT_SIZE",[72,401,373],{"class":78},[72,403,404,407,410],{"class":74,"line":311},[72,405,406],{"class":361},"  type",[72,408,409],{"class":216}," GradientStop",[72,411,373],{"class":78},[72,413,414,416,419],{"class":74,"line":319},[72,415,406],{"class":361},[72,417,418],{"class":216}," GradientName",[72,420,373],{"class":78},[72,422,424,426],{"class":74,"line":423},9,[72,425,406],{"class":361},[72,427,428],{"class":216}," GradientInput\n",[72,430,432,435,438,440,443],{"class":74,"line":431},10,[72,433,434],{"class":78},"}",[72,436,437],{"class":361}," from",[72,439,244],{"class":78},[72,441,442],{"class":96},"vue-fft-visualizer",[72,444,445],{"class":78},"'\n",[447,448,449],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":67,"searchDepth":188,"depth":188,"links":451},[452,453,454,455],{"id":59,"depth":188,"text":60},{"id":161,"depth":188,"text":162},{"id":325,"depth":188,"text":326},{"id":345,"depth":188,"text":346},"Color the bars with a built-in preset or your own CSS-color stops.","md",null,{},{"icon":41},{"title":38,"description":456},"QsQMoIjVM5R2fqufvi7Ka04cuFdzVfLwakjL_Y1ILQk",[464,466],{"title":33,"path":34,"stem":35,"description":465,"icon":36,"children":-1},"The complete component API — every prop, event, exposed method, and slot.",{"title":43,"path":44,"stem":45,"description":467,"icon":46,"children":-1},"The standalone data pipelines and the WebSocket FFT protocol.",1784469224092]