[{"data":1,"prerenderedAt":771},["ShallowReactive",2],{"navigation_docs":3,"-guide-gradients":81,"-guide-gradients-surround":766},[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":31,"body":83,"description":759,"extension":760,"links":761,"meta":762,"navigation":763,"path":32,"seo":764,"stem":33,"__hash__":765},"docs\u002F1.guide\u002F5.gradients.md",{"type":84,"value":85,"toc":753},"minimark",[86,95,100,213,224,257,261,272,544,548,564,568,571,734,749],[87,88,89,90,94],"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 to the ",[91,92,93],"code",{},"gradient"," option.",[96,97,99],"h2",{"id":98},"presets","Presets",[101,102,103,172],"code-group",{},[104,105,110],"pre",{"className":106,"code":107,"filename":42,"language":108,"meta":109,"style":109},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","new FFTVisualizer(canvas, { mode: 'local', gradient: 'sunset' })\n","ts","",[91,111,112],{"__ignoreMap":109},[113,114,117,121,125,129,132,135,139,142,145,149,152,154,157,159,161,164,166,169],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sMK4o","new",[113,122,124],{"class":123},"s2Zo4"," FFTVisualizer",[113,126,128],{"class":127},"sTEyZ","(canvas",[113,130,131],{"class":119},",",[113,133,134],{"class":119}," {",[113,136,138],{"class":137},"swJcz"," mode",[113,140,141],{"class":119},":",[113,143,144],{"class":119}," '",[113,146,148],{"class":147},"sfazB","local",[113,150,151],{"class":119},"'",[113,153,131],{"class":119},[113,155,156],{"class":137}," gradient",[113,158,141],{"class":119},[113,160,144],{"class":119},[113,162,163],{"class":147},"sunset",[113,165,151],{"class":119},[113,167,168],{"class":119}," }",[113,170,171],{"class":127},")\n",[104,173,177],{"className":174,"code":175,"filename":63,"language":176,"meta":109,"style":109},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFFTVisualizer mode=\"local\" gradient=\"sunset\" \u002F>\n","vue",[91,178,179],{"__ignoreMap":109},[113,180,181,184,187,190,193,196,198,200,202,204,206,208,210],{"class":115,"line":116},[113,182,183],{"class":119},"\u003C",[113,185,186],{"class":137},"FFTVisualizer",[113,188,138],{"class":189},"spNyl",[113,191,192],{"class":119},"=",[113,194,195],{"class":119},"\"",[113,197,148],{"class":147},[113,199,195],{"class":119},[113,201,156],{"class":189},[113,203,192],{"class":119},[113,205,195],{"class":119},[113,207,163],{"class":147},[113,209,195],{"class":119},[113,211,212],{"class":119}," \u002F>\n",[87,214,215,216,219,220,223],{},"Built-in presets (exported as ",[91,217,218],{},"gradientPresets"," \u002F ",[91,221,222],{},"gradientNames","):",[87,225,226,229,230,229,233,229,236,229,239,229,242,229,245,247,248,229,251,229,254],{},[91,227,228],{},"classic"," · ",[91,231,232],{},"rainbow",[91,234,235],{},"blue",[91,237,238],{},"prism",[91,240,241],{},"orangered",[91,243,244],{},"steelblue",[91,246,163],{}," ·\n",[91,249,250],{},"aurora",[91,252,253],{},"dusk",[91,255,256],{},"mono",[96,258,260],{"id":259},"custom-stops","Custom stops",[87,262,263,264,267,268,271],{},"Any CSS color format works — hex, ",[91,265,266],{},"rgb()",", ",[91,269,270],{},"hsl()",", named colors:",[101,273,274,421],{},[104,275,277],{"className":106,"code":276,"filename":42,"language":108,"meta":109,"style":109},"new FFTVisualizer(canvas, {\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})\n",[91,278,279,292,309,320,352,379,407,413],{"__ignoreMap":109},[113,280,281,283,285,287,289],{"class":115,"line":116},[113,282,120],{"class":119},[113,284,124],{"class":123},[113,286,128],{"class":127},[113,288,131],{"class":119},[113,290,291],{"class":119}," {\n",[113,293,295,298,300,302,304,306],{"class":115,"line":294},2,[113,296,297],{"class":137},"  mode",[113,299,141],{"class":119},[113,301,144],{"class":119},[113,303,148],{"class":147},[113,305,151],{"class":119},[113,307,308],{"class":119},",\n",[113,310,312,315,317],{"class":115,"line":311},3,[113,313,314],{"class":137},"  gradient",[113,316,141],{"class":119},[113,318,319],{"class":127}," [\n",[113,321,323,326,329,331,335,337,340,342,344,347,349],{"class":115,"line":322},4,[113,324,325],{"class":119},"    {",[113,327,328],{"class":137}," stop",[113,330,141],{"class":119},[113,332,334],{"class":333},"sbssI"," 0",[113,336,131],{"class":119},[113,338,339],{"class":137}," color",[113,341,141],{"class":119},[113,343,144],{"class":119},[113,345,346],{"class":147},"#001233",[113,348,151],{"class":119},[113,350,351],{"class":119}," },\n",[113,353,355,357,359,361,364,366,368,370,372,375,377],{"class":115,"line":354},5,[113,356,325],{"class":119},[113,358,328],{"class":137},[113,360,141],{"class":119},[113,362,363],{"class":333}," 0.5",[113,365,131],{"class":119},[113,367,339],{"class":137},[113,369,141],{"class":119},[113,371,144],{"class":119},[113,373,374],{"class":147},"rgb(15, 155, 142)",[113,376,151],{"class":119},[113,378,351],{"class":119},[113,380,382,384,386,388,391,393,395,397,399,402,404],{"class":115,"line":381},6,[113,383,325],{"class":119},[113,385,328],{"class":137},[113,387,141],{"class":119},[113,389,390],{"class":333}," 1",[113,392,131],{"class":119},[113,394,339],{"class":137},[113,396,141],{"class":119},[113,398,144],{"class":119},[113,400,401],{"class":147},"hsl(280, 95%, 75%)",[113,403,151],{"class":119},[113,405,406],{"class":119}," }\n",[113,408,410],{"class":115,"line":409},7,[113,411,412],{"class":127},"  ]\n",[113,414,416,419],{"class":115,"line":415},8,[113,417,418],{"class":119},"}",[113,420,171],{"class":127},[104,422,424],{"className":174,"code":423,"filename":63,"language":176,"meta":109,"style":109},"\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",[91,425,426,433,446,460,484,508,532,539],{"__ignoreMap":109},[113,427,428,430],{"class":115,"line":116},[113,429,183],{"class":119},[113,431,432],{"class":137},"FFTVisualizer\n",[113,434,435,437,439,441,443],{"class":115,"line":294},[113,436,297],{"class":189},[113,438,192],{"class":119},[113,440,195],{"class":119},[113,442,148],{"class":147},[113,444,445],{"class":119},"\"\n",[113,447,448,451,453,455,457],{"class":115,"line":311},[113,449,450],{"class":119},"  :",[113,452,93],{"class":189},[113,454,192],{"class":119},[113,456,195],{"class":119},[113,458,459],{"class":127},"[\n",[113,461,462,464,466,468,470,472,474,476,478,480,482],{"class":115,"line":322},[113,463,325],{"class":119},[113,465,328],{"class":137},[113,467,141],{"class":119},[113,469,334],{"class":333},[113,471,131],{"class":119},[113,473,339],{"class":137},[113,475,141],{"class":119},[113,477,144],{"class":119},[113,479,346],{"class":147},[113,481,151],{"class":119},[113,483,351],{"class":119},[113,485,486,488,490,492,494,496,498,500,502,504,506],{"class":115,"line":354},[113,487,325],{"class":119},[113,489,328],{"class":137},[113,491,141],{"class":119},[113,493,363],{"class":333},[113,495,131],{"class":119},[113,497,339],{"class":137},[113,499,141],{"class":119},[113,501,144],{"class":119},[113,503,374],{"class":147},[113,505,151],{"class":119},[113,507,351],{"class":119},[113,509,510,512,514,516,518,520,522,524,526,528,530],{"class":115,"line":381},[113,511,325],{"class":119},[113,513,328],{"class":137},[113,515,141],{"class":119},[113,517,390],{"class":333},[113,519,131],{"class":119},[113,521,339],{"class":137},[113,523,141],{"class":119},[113,525,144],{"class":119},[113,527,401],{"class":147},[113,529,151],{"class":119},[113,531,406],{"class":119},[113,533,534,537],{"class":115,"line":409},[113,535,536],{"class":127},"  ]",[113,538,445],{"class":119},[113,540,541],{"class":115,"line":415},[113,542,543],{"class":127},"\u002F>\n",[96,545,547],{"id":546},"direction-color-mode","Direction & color mode",[549,550,551,558],"ul",{},[552,553,554,557],"li",{},[91,555,556],{},"gradientDirection: 'horizontal'"," runs the gradient across the frequency axis instead of the level axis.",[552,559,560,563],{},[91,561,562],{},"colorMode: 'bar-level'"," colors each whole bar by its current level (a VU-meter feel) rather than by position along the gradient axis.",[96,565,567],{"id":566},"helpers","Helpers",[87,569,570],{},"For building settings UIs or your own rendering, these are exported from both packages:",[101,572,573,664],{},[104,574,576],{"className":106,"code":575,"filename":42,"language":108,"meta":109,"style":109},"import {\n  gradientPresets,\n  gradientNames,\n  resolveGradientStops,\n  buildGradientLUT,\n  GRADIENT_LUT_SIZE,\n  type GradientStop,\n  type GradientName,\n  type GradientInput\n} from 'fft-visualizer-core'\n",[91,577,578,586,593,600,607,614,621,631,640,648],{"__ignoreMap":109},[113,579,580,584],{"class":115,"line":116},[113,581,583],{"class":582},"s7zQu","import",[113,585,291],{"class":119},[113,587,588,591],{"class":115,"line":294},[113,589,590],{"class":127},"  gradientPresets",[113,592,308],{"class":119},[113,594,595,598],{"class":115,"line":311},[113,596,597],{"class":127},"  gradientNames",[113,599,308],{"class":119},[113,601,602,605],{"class":115,"line":322},[113,603,604],{"class":127},"  resolveGradientStops",[113,606,308],{"class":119},[113,608,609,612],{"class":115,"line":354},[113,610,611],{"class":127},"  buildGradientLUT",[113,613,308],{"class":119},[113,615,616,619],{"class":115,"line":381},[113,617,618],{"class":127},"  GRADIENT_LUT_SIZE",[113,620,308],{"class":119},[113,622,623,626,629],{"class":115,"line":409},[113,624,625],{"class":582},"  type",[113,627,628],{"class":127}," GradientStop",[113,630,308],{"class":119},[113,632,633,635,638],{"class":115,"line":415},[113,634,625],{"class":582},[113,636,637],{"class":127}," GradientName",[113,639,308],{"class":119},[113,641,643,645],{"class":115,"line":642},9,[113,644,625],{"class":582},[113,646,647],{"class":127}," GradientInput\n",[113,649,651,653,656,658,661],{"class":115,"line":650},10,[113,652,418],{"class":119},[113,654,655],{"class":582}," from",[113,657,144],{"class":119},[113,659,660],{"class":147},"fft-visualizer-core",[113,662,663],{"class":119},"'\n",[104,665,667],{"className":106,"code":666,"filename":63,"language":108,"meta":109,"style":109},"import {\n  gradientPresets,\n  gradientNames,\n  resolveGradientStops,\n  buildGradientLUT,\n  type GradientStop,\n  type GradientName,\n  type GradientInput\n} from 'fft-visualizer-vue'\n",[91,668,669,675,681,687,693,699,707,715,721],{"__ignoreMap":109},[113,670,671,673],{"class":115,"line":116},[113,672,583],{"class":582},[113,674,291],{"class":119},[113,676,677,679],{"class":115,"line":294},[113,678,590],{"class":127},[113,680,308],{"class":119},[113,682,683,685],{"class":115,"line":311},[113,684,597],{"class":127},[113,686,308],{"class":119},[113,688,689,691],{"class":115,"line":322},[113,690,604],{"class":127},[113,692,308],{"class":119},[113,694,695,697],{"class":115,"line":354},[113,696,611],{"class":127},[113,698,308],{"class":119},[113,700,701,703,705],{"class":115,"line":381},[113,702,625],{"class":582},[113,704,628],{"class":127},[113,706,308],{"class":119},[113,708,709,711,713],{"class":115,"line":409},[113,710,625],{"class":582},[113,712,637],{"class":127},[113,714,308],{"class":119},[113,716,717,719],{"class":115,"line":415},[113,718,625],{"class":582},[113,720,647],{"class":127},[113,722,723,725,727,729,732],{"class":115,"line":642},[113,724,418],{"class":119},[113,726,655],{"class":582},[113,728,144],{"class":119},[113,730,731],{"class":147},"fft-visualizer-vue",[113,733,663],{"class":119},[87,735,736,737,740,741,745,746,748],{},"The Vue package re-exports these from the core for convenience. The ",[91,738,739],{},"GRADIENT_LUT_SIZE","\nconstant is ",[742,743,744],"strong",{},"core-only"," — import it from ",[91,747,660],{}," if you need it.",[750,751,752],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":109,"searchDepth":294,"depth":294,"links":754},[755,756,757,758],{"id":98,"depth":294,"text":99},{"id":259,"depth":294,"text":260},{"id":546,"depth":294,"text":547},{"id":566,"depth":294,"text":567},"Color the bars with a built-in preset or your own CSS-color stops.","md",null,{},{"icon":34},{"title":31,"description":759},"BYmKdAaPMhG40yTvthRntnBeq1M4-4_h_a0ES_RswB8",[767,769],{"title":26,"path":27,"stem":28,"description":768,"icon":29,"children":-1},"The canonical option reference — every visualizer option, its type, default, and meaning.",{"title":36,"path":37,"stem":38,"description":770,"icon":39,"children":-1},"The remote-FFT wire protocol the visualizer speaks in websocket mode, and the reference servers.",1784963432762]