[{"data":1,"prerenderedAt":55362},["ShallowReactive",2],{"guide-docs":3,"component-docs":27100,"user-pro-status-data":55092,"doc-/docs/components/solarize":55094,"doc-surr-/docs/components/solarize":55359},[4,1330,2606,2992,3227,4063,5540,8171,10171,12946,15005,18672,21022,21390,22024,22667,23566,24183,24761,25303,25898,26420],{"id":5,"title":6,"body":7,"category":1320,"description":1321,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":1324,"meta":1325,"navigation":119,"path":1326,"seo":1327,"stem":1328,"__hash__":1329},"guide/docs/guide/0.index.md","What is Shaders?",{"type":8,"value":9,"toc":1314},"minimark",[10,14,18,22,1201,1206,1209,1216,1277,1280,1284,1287,1291,1298,1302,1310],[11,12,6],"h1",{"id":13},"what-is-shaders",[15,16,17],"p",{},"Shaders is a component library for building GPU-accelerated visual effects directly in the browser. You describe what you want using the same declarative, component-based syntax you already know from building your frontend UI — and Shaders handles all the GPU-side work for you.",[19,20],"shader-demo",{":preset":21},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"angle\":180,\"center\":{\"x\":0.5,\"y\":0.5},\"colorSpace\":\"oklab\",\"endColor\":\"#0000ff\",\"startColor\":\"#1aff00\"}},{\"type\":\"Dither\",\"id\":\"idmgijmh7s6y9u9f0ao\",\"props\":{\"opacity\":0,\"pixelSize\":5,\"threshold\":0.24,\"visible\":false},\"children\":[{\"type\":\"SineWave\",\"props\":{\"amplitude\":0.32,\"angle\":309,\"frequency\":1.1,\"softness\":0.79,\"thickness\":0.81}}]},{\"type\":\"LinearGradient\",\"props\":{\"center\":{\"x\":0.5,\"y\":0.5},\"endColor\":\"#0000ff\",\"maskSource\":\"idmgijmh7s6y9u9f0ao\",\"startColor\":\"#1aff00\"}}]}",[23,24,26,278,541,758,985],"code-group",{":tabs":25},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-vue-html shiki shiki-themes github-dark","\u003CShader class=\"w-full h-64\">\n \u003C!-- Base gradient -->\n \u003CLinearGradient :angle=\"180\" color-space=\"oklab\" start-color=\"#1aff00\" end-color=\"#0000ff\" />\n\n \u003C!-- Hidden sine wave used as a mask shape -->\n \u003CDither id=\"wave-mask\" :visible=\"false\" :pixel-size=\"5\" :threshold=\"0.24\">\n \u003CSineWave :amplitude=\"0.32\" :angle=\"309\" :frequency=\"1.1\" :softness=\"0.79\" :thickness=\"0.81\" />\n \u003C/Dither>\n\n \u003C!-- Second gradient, revealed only through the wave mask -->\n \u003CLinearGradient start-color=\"#1aff00\" end-color=\"#0000ff\" mask-source=\"wave-mask\" />\n\u003C/Shader>\n","vue-html","",[34,35,36,63,70,114,121,127,169,219,229,234,240,268],"code",{"__ignoreMap":32},[37,38,41,45,49,53,56,60],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"s95oV","\u003C",[37,46,48],{"class":47},"s4JwU","Shader",[37,50,52],{"class":51},"svObZ"," class",[37,54,55],{"class":43},"=",[37,57,59],{"class":58},"sU2Wk","\"w-full h-64\"",[37,61,62],{"class":43},">\n",[37,64,66],{"class":39,"line":65},2,[37,67,69],{"class":68},"sAwPA"," \u003C!-- Base gradient -->\n",[37,71,73,76,79,82,84,87,90,92,95,98,100,103,106,108,111],{"class":39,"line":72},3,[37,74,75],{"class":43}," \u003C",[37,77,78],{"class":47},"LinearGradient",[37,80,81],{"class":51}," :angle",[37,83,55],{"class":43},[37,85,86],{"class":58},"\"180\"",[37,88,89],{"class":51}," color-space",[37,91,55],{"class":43},[37,93,94],{"class":58},"\"oklab\"",[37,96,97],{"class":51}," start-color",[37,99,55],{"class":43},[37,101,102],{"class":58},"\"#1aff00\"",[37,104,105],{"class":51}," end-color",[37,107,55],{"class":43},[37,109,110],{"class":58},"\"#0000ff\"",[37,112,113],{"class":43}," />\n",[37,115,117],{"class":39,"line":116},4,[37,118,120],{"emptyLinePlaceholder":119},true,"\n",[37,122,124],{"class":39,"line":123},5,[37,125,126],{"class":68}," \u003C!-- Hidden sine wave used as a mask shape -->\n",[37,128,130,132,135,138,140,143,146,148,151,154,156,159,162,164,167],{"class":39,"line":129},6,[37,131,75],{"class":43},[37,133,134],{"class":47},"Dither",[37,136,137],{"class":51}," id",[37,139,55],{"class":43},[37,141,142],{"class":58},"\"wave-mask\"",[37,144,145],{"class":51}," :visible",[37,147,55],{"class":43},[37,149,150],{"class":58},"\"false\"",[37,152,153],{"class":51}," :pixel-size",[37,155,55],{"class":43},[37,157,158],{"class":58},"\"5\"",[37,160,161],{"class":51}," :threshold",[37,163,55],{"class":43},[37,165,166],{"class":58},"\"0.24\"",[37,168,62],{"class":43},[37,170,172,175,178,181,183,186,188,190,193,196,198,201,204,206,209,212,214,217],{"class":39,"line":171},7,[37,173,174],{"class":43}," \u003C",[37,176,177],{"class":47},"SineWave",[37,179,180],{"class":51}," :amplitude",[37,182,55],{"class":43},[37,184,185],{"class":58},"\"0.32\"",[37,187,81],{"class":51},[37,189,55],{"class":43},[37,191,192],{"class":58},"\"309\"",[37,194,195],{"class":51}," :frequency",[37,197,55],{"class":43},[37,199,200],{"class":58},"\"1.1\"",[37,202,203],{"class":51}," :softness",[37,205,55],{"class":43},[37,207,208],{"class":58},"\"0.79\"",[37,210,211],{"class":51}," :thickness",[37,213,55],{"class":43},[37,215,216],{"class":58},"\"0.81\"",[37,218,113],{"class":43},[37,220,222,225,227],{"class":39,"line":221},8,[37,223,224],{"class":43}," \u003C/",[37,226,134],{"class":47},[37,228,62],{"class":43},[37,230,232],{"class":39,"line":231},9,[37,233,120],{"emptyLinePlaceholder":119},[37,235,237],{"class":39,"line":236},10,[37,238,239],{"class":68}," \u003C!-- Second gradient, revealed only through the wave mask -->\n",[37,241,243,245,247,249,251,253,255,257,259,262,264,266],{"class":39,"line":242},11,[37,244,75],{"class":43},[37,246,78],{"class":47},[37,248,97],{"class":51},[37,250,55],{"class":43},[37,252,102],{"class":58},[37,254,105],{"class":51},[37,256,55],{"class":43},[37,258,110],{"class":58},[37,260,261],{"class":51}," mask-source",[37,263,55],{"class":43},[37,265,142],{"class":58},[37,267,113],{"class":43},[37,269,271,274,276],{"class":39,"line":270},12,[37,272,273],{"class":43},"\u003C/",[37,275,48],{"class":47},[37,277,62],{"class":43},[27,279,283],{"className":280,"code":281,"language":282,"meta":32,"style":32},"language-jsx shiki shiki-themes github-dark","\u003CShader className=\"w-full h-64\">\n {/* Base gradient */}\n \u003CLinearGradient angle={180} colorSpace=\"oklab\" startColor=\"#1aff00\" endColor=\"#0000ff\" />\n\n {/* Hidden sine wave used as a mask shape */}\n \u003CDither id=\"wave-mask\" visible={false} pixelSize={5} threshold={0.24}>\n \u003CSineWave amplitude={0.32} angle={309} frequency={1.1} softness={0.79} thickness={0.81} />\n \u003C/Dither>\n\n {/* Second gradient, revealed only through the wave mask */}\n \u003CLinearGradient startColor=\"#1aff00\" endColor=\"#0000ff\" maskSource=\"wave-mask\" />\n\u003C/Shader>\n","jsx",[34,284,285,302,313,356,360,369,418,485,493,497,506,533],{"__ignoreMap":32},[37,286,287,289,292,295,298,300],{"class":39,"line":40},[37,288,44],{"class":43},[37,290,48],{"class":291},"sDLfK",[37,293,294],{"class":51}," className",[37,296,55],{"class":297},"snl16",[37,299,59],{"class":58},[37,301,62],{"class":43},[37,303,304,307,310],{"class":39,"line":65},[37,305,306],{"class":43}," {",[37,308,309],{"class":68},"/* Base gradient */",[37,311,312],{"class":43},"}\n",[37,314,315,317,319,322,324,327,330,333,336,338,340,343,345,347,350,352,354],{"class":39,"line":72},[37,316,75],{"class":43},[37,318,78],{"class":291},[37,320,321],{"class":51}," angle",[37,323,55],{"class":297},[37,325,326],{"class":43},"{",[37,328,329],{"class":291},"180",[37,331,332],{"class":43},"} ",[37,334,335],{"class":51},"colorSpace",[37,337,55],{"class":297},[37,339,94],{"class":58},[37,341,342],{"class":51}," startColor",[37,344,55],{"class":297},[37,346,102],{"class":58},[37,348,349],{"class":51}," endColor",[37,351,55],{"class":297},[37,353,110],{"class":58},[37,355,113],{"class":43},[37,357,358],{"class":39,"line":116},[37,359,120],{"emptyLinePlaceholder":119},[37,361,362,364,367],{"class":39,"line":123},[37,363,306],{"class":43},[37,365,366],{"class":68},"/* Hidden sine wave used as a mask shape */",[37,368,312],{"class":43},[37,370,371,373,375,377,379,381,384,386,388,391,393,396,398,400,403,405,408,410,412,415],{"class":39,"line":129},[37,372,75],{"class":43},[37,374,134],{"class":291},[37,376,137],{"class":51},[37,378,55],{"class":297},[37,380,142],{"class":58},[37,382,383],{"class":51}," visible",[37,385,55],{"class":297},[37,387,326],{"class":43},[37,389,390],{"class":291},"false",[37,392,332],{"class":43},[37,394,395],{"class":51},"pixelSize",[37,397,55],{"class":297},[37,399,326],{"class":43},[37,401,402],{"class":291},"5",[37,404,332],{"class":43},[37,406,407],{"class":51},"threshold",[37,409,55],{"class":297},[37,411,326],{"class":43},[37,413,414],{"class":291},"0.24",[37,416,417],{"class":43},"}>\n",[37,419,420,422,424,427,429,431,434,436,439,441,443,446,448,451,453,455,458,460,463,465,467,470,472,475,477,479,482],{"class":39,"line":171},[37,421,174],{"class":43},[37,423,177],{"class":291},[37,425,426],{"class":51}," amplitude",[37,428,55],{"class":297},[37,430,326],{"class":43},[37,432,433],{"class":291},"0.32",[37,435,332],{"class":43},[37,437,438],{"class":51},"angle",[37,440,55],{"class":297},[37,442,326],{"class":43},[37,444,445],{"class":291},"309",[37,447,332],{"class":43},[37,449,450],{"class":51},"frequency",[37,452,55],{"class":297},[37,454,326],{"class":43},[37,456,457],{"class":291},"1.1",[37,459,332],{"class":43},[37,461,462],{"class":51},"softness",[37,464,55],{"class":297},[37,466,326],{"class":43},[37,468,469],{"class":291},"0.79",[37,471,332],{"class":43},[37,473,474],{"class":51},"thickness",[37,476,55],{"class":297},[37,478,326],{"class":43},[37,480,481],{"class":291},"0.81",[37,483,484],{"class":43},"} />\n",[37,486,487,489,491],{"class":39,"line":221},[37,488,224],{"class":43},[37,490,134],{"class":291},[37,492,62],{"class":43},[37,494,495],{"class":39,"line":231},[37,496,120],{"emptyLinePlaceholder":119},[37,498,499,501,504],{"class":39,"line":236},[37,500,306],{"class":43},[37,502,503],{"class":68},"/* Second gradient, revealed only through the wave mask */",[37,505,312],{"class":43},[37,507,508,510,512,514,516,518,520,522,524,527,529,531],{"class":39,"line":242},[37,509,75],{"class":43},[37,511,78],{"class":291},[37,513,342],{"class":51},[37,515,55],{"class":297},[37,517,102],{"class":58},[37,519,349],{"class":51},[37,521,55],{"class":297},[37,523,110],{"class":58},[37,525,526],{"class":51}," maskSource",[37,528,55],{"class":297},[37,530,142],{"class":58},[37,532,113],{"class":43},[37,534,535,537,539],{"class":39,"line":270},[37,536,273],{"class":43},[37,538,48],{"class":291},[37,540,62],{"class":43},[27,542,546],{"className":543,"code":544,"language":545,"meta":32,"style":32},"language-tsx shiki shiki-themes github-dark","\u003CShader class=\"w-full h-64\">\n \u003C!-- Base gradient -->\n \u003CLinearGradient angle={180} colorSpace=\"oklab\" startColor=\"#1aff00\" endColor=\"#0000ff\" />\n\n \u003C!-- Hidden sine wave used as a mask shape -->\n \u003CDither id=\"wave-mask\" visible={false} pixelSize={5} threshold={0.24}>\n \u003CSineWave amplitude={0.32} angle={309} frequency={1.1} softness={0.79} thickness={0.81} />\n \u003C/Dither>\n\n \u003C!-- Second gradient, revealed only through the wave mask -->\n \u003CLinearGradient startColor=\"#1aff00\" endColor=\"#0000ff\" maskSource=\"wave-mask\" />\n\u003C/Shader>\n","tsx",[34,547,548,562,566,602,606,610,652,708,716,720,724,750],{"__ignoreMap":32},[37,549,550,552,554,556,558,560],{"class":39,"line":40},[37,551,44],{"class":43},[37,553,48],{"class":291},[37,555,52],{"class":51},[37,557,55],{"class":297},[37,559,59],{"class":58},[37,561,62],{"class":43},[37,563,564],{"class":39,"line":65},[37,565,69],{"class":43},[37,567,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600],{"class":39,"line":72},[37,569,75],{"class":43},[37,571,78],{"class":291},[37,573,321],{"class":51},[37,575,55],{"class":297},[37,577,326],{"class":43},[37,579,329],{"class":291},[37,581,332],{"class":43},[37,583,335],{"class":51},[37,585,55],{"class":297},[37,587,94],{"class":58},[37,589,342],{"class":51},[37,591,55],{"class":297},[37,593,102],{"class":58},[37,595,349],{"class":51},[37,597,55],{"class":297},[37,599,110],{"class":58},[37,601,113],{"class":43},[37,603,604],{"class":39,"line":116},[37,605,120],{"emptyLinePlaceholder":119},[37,607,608],{"class":39,"line":123},[37,609,126],{"class":43},[37,611,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650],{"class":39,"line":129},[37,613,75],{"class":43},[37,615,134],{"class":291},[37,617,137],{"class":51},[37,619,55],{"class":297},[37,621,142],{"class":58},[37,623,383],{"class":51},[37,625,55],{"class":297},[37,627,326],{"class":43},[37,629,390],{"class":291},[37,631,332],{"class":43},[37,633,395],{"class":51},[37,635,55],{"class":297},[37,637,326],{"class":43},[37,639,402],{"class":291},[37,641,332],{"class":43},[37,643,407],{"class":51},[37,645,55],{"class":297},[37,647,326],{"class":43},[37,649,414],{"class":291},[37,651,417],{"class":43},[37,653,654,656,658,660,662,664,666,668,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,706],{"class":39,"line":171},[37,655,174],{"class":43},[37,657,177],{"class":291},[37,659,426],{"class":51},[37,661,55],{"class":297},[37,663,326],{"class":43},[37,665,433],{"class":291},[37,667,332],{"class":43},[37,669,438],{"class":51},[37,671,55],{"class":297},[37,673,326],{"class":43},[37,675,445],{"class":291},[37,677,332],{"class":43},[37,679,450],{"class":51},[37,681,55],{"class":297},[37,683,326],{"class":43},[37,685,457],{"class":291},[37,687,332],{"class":43},[37,689,462],{"class":51},[37,691,55],{"class":297},[37,693,326],{"class":43},[37,695,469],{"class":291},[37,697,332],{"class":43},[37,699,474],{"class":51},[37,701,55],{"class":297},[37,703,326],{"class":43},[37,705,481],{"class":291},[37,707,484],{"class":43},[37,709,710,712,714],{"class":39,"line":221},[37,711,224],{"class":43},[37,713,134],{"class":291},[37,715,62],{"class":43},[37,717,718],{"class":39,"line":231},[37,719,120],{"emptyLinePlaceholder":119},[37,721,722],{"class":39,"line":236},[37,723,239],{"class":43},[37,725,726,728,730,732,734,736,738,740,742,744,746,748],{"class":39,"line":242},[37,727,75],{"class":43},[37,729,78],{"class":291},[37,731,342],{"class":51},[37,733,55],{"class":297},[37,735,102],{"class":58},[37,737,349],{"class":51},[37,739,55],{"class":297},[37,741,110],{"class":58},[37,743,526],{"class":51},[37,745,55],{"class":297},[37,747,142],{"class":58},[37,749,113],{"class":43},[37,751,752,754,756],{"class":39,"line":270},[37,753,273],{"class":43},[37,755,48],{"class":291},[37,757,62],{"class":43},[27,759,761],{"className":543,"code":760,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n {/* Base gradient */}\n \u003CLinearGradient angle={180} colorSpace=\"oklab\" startColor=\"#1aff00\" endColor=\"#0000ff\" />\n\n {/* Hidden sine wave used as a mask shape */}\n \u003CDither id=\"wave-mask\" visible={false} pixelSize={5} threshold={0.24}>\n \u003CSineWave amplitude={0.32} angle={309} frequency={1.1} softness={0.79} thickness={0.81} />\n \u003C/Dither>\n\n {/* Second gradient, revealed only through the wave mask */}\n \u003CLinearGradient startColor=\"#1aff00\" endColor=\"#0000ff\" maskSource=\"wave-mask\" />\n\u003C/Shader>\n",[34,762,763,777,785,821,825,833,875,931,939,943,951,977],{"__ignoreMap":32},[37,764,765,767,769,771,773,775],{"class":39,"line":40},[37,766,44],{"class":43},[37,768,48],{"class":291},[37,770,52],{"class":51},[37,772,55],{"class":297},[37,774,59],{"class":58},[37,776,62],{"class":43},[37,778,779,781,783],{"class":39,"line":65},[37,780,306],{"class":43},[37,782,309],{"class":68},[37,784,312],{"class":43},[37,786,787,789,791,793,795,797,799,801,803,805,807,809,811,813,815,817,819],{"class":39,"line":72},[37,788,75],{"class":43},[37,790,78],{"class":291},[37,792,321],{"class":51},[37,794,55],{"class":297},[37,796,326],{"class":43},[37,798,329],{"class":291},[37,800,332],{"class":43},[37,802,335],{"class":51},[37,804,55],{"class":297},[37,806,94],{"class":58},[37,808,342],{"class":51},[37,810,55],{"class":297},[37,812,102],{"class":58},[37,814,349],{"class":51},[37,816,55],{"class":297},[37,818,110],{"class":58},[37,820,113],{"class":43},[37,822,823],{"class":39,"line":116},[37,824,120],{"emptyLinePlaceholder":119},[37,826,827,829,831],{"class":39,"line":123},[37,828,306],{"class":43},[37,830,366],{"class":68},[37,832,312],{"class":43},[37,834,835,837,839,841,843,845,847,849,851,853,855,857,859,861,863,865,867,869,871,873],{"class":39,"line":129},[37,836,75],{"class":43},[37,838,134],{"class":291},[37,840,137],{"class":51},[37,842,55],{"class":297},[37,844,142],{"class":58},[37,846,383],{"class":51},[37,848,55],{"class":297},[37,850,326],{"class":43},[37,852,390],{"class":291},[37,854,332],{"class":43},[37,856,395],{"class":51},[37,858,55],{"class":297},[37,860,326],{"class":43},[37,862,402],{"class":291},[37,864,332],{"class":43},[37,866,407],{"class":51},[37,868,55],{"class":297},[37,870,326],{"class":43},[37,872,414],{"class":291},[37,874,417],{"class":43},[37,876,877,879,881,883,885,887,889,891,893,895,897,899,901,903,905,907,909,911,913,915,917,919,921,923,925,927,929],{"class":39,"line":171},[37,878,174],{"class":43},[37,880,177],{"class":291},[37,882,426],{"class":51},[37,884,55],{"class":297},[37,886,326],{"class":43},[37,888,433],{"class":291},[37,890,332],{"class":43},[37,892,438],{"class":51},[37,894,55],{"class":297},[37,896,326],{"class":43},[37,898,445],{"class":291},[37,900,332],{"class":43},[37,902,450],{"class":51},[37,904,55],{"class":297},[37,906,326],{"class":43},[37,908,457],{"class":291},[37,910,332],{"class":43},[37,912,462],{"class":51},[37,914,55],{"class":297},[37,916,326],{"class":43},[37,918,469],{"class":291},[37,920,332],{"class":43},[37,922,474],{"class":51},[37,924,55],{"class":297},[37,926,326],{"class":43},[37,928,481],{"class":291},[37,930,484],{"class":43},[37,932,933,935,937],{"class":39,"line":221},[37,934,224],{"class":43},[37,936,134],{"class":291},[37,938,62],{"class":43},[37,940,941],{"class":39,"line":231},[37,942,120],{"emptyLinePlaceholder":119},[37,944,945,947,949],{"class":39,"line":236},[37,946,306],{"class":43},[37,948,503],{"class":68},[37,950,312],{"class":43},[37,952,953,955,957,959,961,963,965,967,969,971,973,975],{"class":39,"line":242},[37,954,75],{"class":43},[37,956,78],{"class":291},[37,958,342],{"class":51},[37,960,55],{"class":297},[37,962,102],{"class":58},[37,964,349],{"class":51},[37,966,55],{"class":297},[37,968,110],{"class":58},[37,970,526],{"class":51},[37,972,55],{"class":297},[37,974,142],{"class":58},[37,976,113],{"class":43},[37,978,979,981,983],{"class":39,"line":270},[37,980,273],{"class":43},[37,982,48],{"class":291},[37,984,62],{"class":43},[27,986,990],{"className":987,"code":988,"language":989,"meta":32,"style":32},"language-javascript shiki shiki-themes github-dark","await createShader(canvas, {\n components: [\n // Base gradient\n { type: 'LinearGradient', props: { angle: 180, colorSpace: 'oklab', startColor: '#1aff00', endColor: '#0000ff' } },\n\n // Hidden sine wave used as a mask shape\n {\n type: 'Dither',\n id: 'wave-mask',\n props: { visible: false, pixelSize: 5, threshold: 0.24 },\n children: [\n { type: 'SineWave', props: { amplitude: 0.32, angle: 309, frequency: 1.1, softness: 0.79, thickness: 0.81 } }\n ]\n },\n\n // Second gradient, revealed only through the wave mask\n { type: 'LinearGradient', props: { startColor: '#1aff00', endColor: '#0000ff', maskSource: 'wave-mask' } }\n ]\n})\n","javascript",[34,991,992,1003,1008,1013,1047,1051,1056,1061,1072,1082,1102,1107,1143,1149,1155,1160,1166,1189,1195],{"__ignoreMap":32},[37,993,994,997,1000],{"class":39,"line":40},[37,995,996],{"class":297},"await",[37,998,999],{"class":51}," createShader",[37,1001,1002],{"class":43},"(canvas, {\n",[37,1004,1005],{"class":39,"line":65},[37,1006,1007],{"class":43}," components: [\n",[37,1009,1010],{"class":39,"line":72},[37,1011,1012],{"class":68}," // Base gradient\n",[37,1014,1015,1018,1021,1024,1026,1029,1032,1035,1038,1041,1044],{"class":39,"line":116},[37,1016,1017],{"class":43}," { type: ",[37,1019,1020],{"class":58},"'LinearGradient'",[37,1022,1023],{"class":43},", props: { angle: ",[37,1025,329],{"class":291},[37,1027,1028],{"class":43},", colorSpace: ",[37,1030,1031],{"class":58},"'oklab'",[37,1033,1034],{"class":43},", startColor: ",[37,1036,1037],{"class":58},"'#1aff00'",[37,1039,1040],{"class":43},", endColor: ",[37,1042,1043],{"class":58},"'#0000ff'",[37,1045,1046],{"class":43}," } },\n",[37,1048,1049],{"class":39,"line":123},[37,1050,120],{"emptyLinePlaceholder":119},[37,1052,1053],{"class":39,"line":129},[37,1054,1055],{"class":68}," // Hidden sine wave used as a mask shape\n",[37,1057,1058],{"class":39,"line":171},[37,1059,1060],{"class":43}," {\n",[37,1062,1063,1066,1069],{"class":39,"line":221},[37,1064,1065],{"class":43}," type: ",[37,1067,1068],{"class":58},"'Dither'",[37,1070,1071],{"class":43},",\n",[37,1073,1074,1077,1080],{"class":39,"line":231},[37,1075,1076],{"class":43}," id: ",[37,1078,1079],{"class":58},"'wave-mask'",[37,1081,1071],{"class":43},[37,1083,1084,1087,1089,1092,1094,1097,1099],{"class":39,"line":236},[37,1085,1086],{"class":43}," props: { visible: ",[37,1088,390],{"class":291},[37,1090,1091],{"class":43},", pixelSize: ",[37,1093,402],{"class":291},[37,1095,1096],{"class":43},", threshold: ",[37,1098,414],{"class":291},[37,1100,1101],{"class":43}," },\n",[37,1103,1104],{"class":39,"line":242},[37,1105,1106],{"class":43}," children: [\n",[37,1108,1109,1112,1115,1118,1120,1123,1125,1128,1130,1133,1135,1138,1140],{"class":39,"line":270},[37,1110,1111],{"class":43}," { type: ",[37,1113,1114],{"class":58},"'SineWave'",[37,1116,1117],{"class":43},", props: { amplitude: ",[37,1119,433],{"class":291},[37,1121,1122],{"class":43},", angle: ",[37,1124,445],{"class":291},[37,1126,1127],{"class":43},", frequency: ",[37,1129,457],{"class":291},[37,1131,1132],{"class":43},", softness: ",[37,1134,469],{"class":291},[37,1136,1137],{"class":43},", thickness: ",[37,1139,481],{"class":291},[37,1141,1142],{"class":43}," } }\n",[37,1144,1146],{"class":39,"line":1145},13,[37,1147,1148],{"class":43}," ]\n",[37,1150,1152],{"class":39,"line":1151},14,[37,1153,1154],{"class":43}," },\n",[37,1156,1158],{"class":39,"line":1157},15,[37,1159,120],{"emptyLinePlaceholder":119},[37,1161,1163],{"class":39,"line":1162},16,[37,1164,1165],{"class":68}," // Second gradient, revealed only through the wave mask\n",[37,1167,1169,1171,1173,1176,1178,1180,1182,1185,1187],{"class":39,"line":1168},17,[37,1170,1017],{"class":43},[37,1172,1020],{"class":58},[37,1174,1175],{"class":43},", props: { startColor: ",[37,1177,1037],{"class":58},[37,1179,1040],{"class":43},[37,1181,1043],{"class":58},[37,1183,1184],{"class":43},", maskSource: ",[37,1186,1079],{"class":58},[37,1188,1142],{"class":43},[37,1190,1192],{"class":39,"line":1191},18,[37,1193,1194],{"class":43}," ]\n",[37,1196,1198],{"class":39,"line":1197},19,[37,1199,1200],{"class":43},"})\n",[1202,1203,1205],"h2",{"id":1204},"how-does-it-work","How does it work?",[15,1207,1208],{},"Under the hood, Shaders uses Three/TSL to compile each component in the component tree into a portion of a single shader program, and handles any blending/masking/etc. to output the final look.",[15,1210,1211,1212,1215],{},"It all renders to a single ",[34,1213,1214],{},"\u003Ccanvas>"," element. You size and position it with CSS, just like any other HTML element. No matter how many nested layers you define, the result is always a single visual element.",[27,1217,1219],{"className":29,"code":1218,"language":31,"meta":32,"style":32},"\u003CShader class=\"absolute inset-0 -z-10\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n\u003C/Shader>\n",[34,1220,1221,1236,1260,1269],{"__ignoreMap":32},[37,1222,1223,1225,1227,1229,1231,1234],{"class":39,"line":40},[37,1224,44],{"class":43},[37,1226,48],{"class":47},[37,1228,52],{"class":51},[37,1230,55],{"class":43},[37,1232,1233],{"class":58},"\"absolute inset-0 -z-10\"",[37,1235,62],{"class":43},[37,1237,1238,1240,1242,1245,1247,1250,1253,1255,1258],{"class":39,"line":65},[37,1239,75],{"class":43},[37,1241,78],{"class":47},[37,1243,1244],{"class":51}," colorA",[37,1246,55],{"class":43},[37,1248,1249],{"class":58},"\"#0f172a\"",[37,1251,1252],{"class":51}," colorB",[37,1254,55],{"class":43},[37,1256,1257],{"class":58},"\"#7c3aed\"",[37,1259,113],{"class":43},[37,1261,1262,1264,1267],{"class":39,"line":72},[37,1263,75],{"class":43},[37,1265,1266],{"class":47},"CursorTrail",[37,1268,113],{"class":43},[37,1270,1271,1273,1275],{"class":39,"line":116},[37,1272,273],{"class":43},[37,1274,48],{"class":47},[37,1276,62],{"class":43},[15,1278,1279],{},"There's no canvas API to learn, no GLSL to write, and no render loop to manage. Prop changes update the GPU uniforms (inputs) instantly without recompiling the shader, keeping things lightweight and snappy.",[1202,1281,1283],{"id":1282},"what-can-you-build","What can you build?",[15,1285,1286],{},"You can build a TON of different effects with Shaders, ranging from hero section backgrounds to interactive and stylized media. Every component comes with configurable props that, when combined, can create a wide range of different interesting visuals. Power features like masking, blending, and dynamic props provide even more ways to build something that's truly unique.",[1202,1288,1290],{"id":1289},"supported-frameworks","Supported frameworks",[15,1292,1293,1294,1297],{},"Shaders ships a single package with dedicated entry points for each framework. Component-based frameworks (Vue, React, Svelte, Solid) share the same declarative API — you compose ",[34,1295,1296],{},"\u003CShader>"," trees just like any other component. The JavaScript API uses a preset config approach better suited to imperative workflows.",[1202,1299,1301],{"id":1300},"requirements","Requirements",[15,1303,1304,1305,1309],{},"Shaders uses ",[1306,1307,1308],"strong",{},"WebGPU",", which is supported in Chrome 113+, Edge 113+, and Safari 18+ (macOS/iOS). When WebGPU is unavailable we fallback gracefully to WebGLv2, which is supported in all major browsers.",[1311,1312,1313],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":32,"searchDepth":65,"depth":65,"links":1315},[1316,1317,1318,1319],{"id":1204,"depth":65,"text":1205},{"id":1282,"depth":65,"text":1283},{"id":1289,"depth":65,"text":1290},{"id":1300,"depth":65,"text":1301},"concepts","GPU-accelerated visual effects for Vue, React, Svelte, Solid & JS",null,"md","hand-wave",{},"/docs/guide",{"title":6,"description":1321},"docs/guide/0.index","qIo-CpaTTJoYdtHOUlqN-OdjYxwj4VSzXe0jcjT9Bxg",{"id":1331,"title":1332,"body":1333,"category":1320,"description":2597,"exclude":2598,"extension":1323,"forceFramework":1322,"icon":2600,"meta":2601,"navigation":119,"path":2602,"seo":2603,"stem":2604,"__hash__":2605},"guide/docs/guide/1.quickstart.md","Quickstart",{"type":8,"value":1334,"toc":2588},[1335,1338,1342,1360,1363,1367,1370,1440,1444,1450,1670,1673,1684,1688,1691,2226,2229,2233,2242,2544,2548,2551,2555,2585],[11,1336,1332],{"id":1337},"quickstart",[1202,1339,1341],{"id":1340},"installation","Installation",[27,1343,1347],{"className":1344,"code":1345,"language":1346,"meta":32,"style":32},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash",[34,1348,1349],{"__ignoreMap":32},[37,1350,1351,1354,1357],{"class":39,"line":40},[37,1352,1353],{"class":51},"npm",[37,1355,1356],{"class":58}," install",[37,1358,1359],{"class":58}," shaders\n",[15,1361,1362],{},"Shaders is a single package regardless of your framework. No framework-specific adapters needed.",[1202,1364,1366],{"id":1365},"import-your-components","Import your components",[15,1368,1369],{},"Import from the entry point that matches your framework:",[23,1371,1373,1392,1408,1424],{":tabs":1372},"[\"Vue\", \"React\", \"Svelte\", \"Solid\"]",[27,1374,1376],{"className":987,"code":1375,"language":989,"meta":32,"style":32},"import { Shader, LinearGradient, CursorTrail } from 'shaders/vue'\n",[34,1377,1378],{"__ignoreMap":32},[37,1379,1380,1383,1386,1389],{"class":39,"line":40},[37,1381,1382],{"class":297},"import",[37,1384,1385],{"class":43}," { Shader, LinearGradient, CursorTrail } ",[37,1387,1388],{"class":297},"from",[37,1390,1391],{"class":58}," 'shaders/vue'\n",[27,1393,1395],{"className":987,"code":1394,"language":989,"meta":32,"style":32},"import { Shader, LinearGradient, CursorTrail } from 'shaders/react'\n",[34,1396,1397],{"__ignoreMap":32},[37,1398,1399,1401,1403,1405],{"class":39,"line":40},[37,1400,1382],{"class":297},[37,1402,1385],{"class":43},[37,1404,1388],{"class":297},[37,1406,1407],{"class":58}," 'shaders/react'\n",[27,1409,1411],{"className":987,"code":1410,"language":989,"meta":32,"style":32},"import { Shader, LinearGradient, CursorTrail } from 'shaders/svelte'\n",[34,1412,1413],{"__ignoreMap":32},[37,1414,1415,1417,1419,1421],{"class":39,"line":40},[37,1416,1382],{"class":297},[37,1418,1385],{"class":43},[37,1420,1388],{"class":297},[37,1422,1423],{"class":58}," 'shaders/svelte'\n",[27,1425,1427],{"className":987,"code":1426,"language":989,"meta":32,"style":32},"import { Shader, LinearGradient, CursorTrail } from 'shaders/solid'\n",[34,1428,1429],{"__ignoreMap":32},[37,1430,1431,1433,1435,1437],{"class":39,"line":40},[37,1432,1382],{"class":297},[37,1434,1385],{"class":43},[37,1436,1388],{"class":297},[37,1438,1439],{"class":58}," 'shaders/solid'\n",[1202,1441,1443],{"id":1442},"your-first-shader","Your first shader",[15,1445,1446,1447,1449],{},"Wrap your effects in a ",[34,1448,1296],{}," component and add children inside:",[23,1451,1452,1507,1562,1616],{":tabs":1372},[27,1453,1455],{"className":29,"code":1454,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n\u003C/Shader>\n",[34,1456,1457,1471,1491,1499],{"__ignoreMap":32},[37,1458,1459,1461,1463,1465,1467,1469],{"class":39,"line":40},[37,1460,44],{"class":43},[37,1462,48],{"class":47},[37,1464,52],{"class":51},[37,1466,55],{"class":43},[37,1468,59],{"class":58},[37,1470,62],{"class":43},[37,1472,1473,1475,1477,1479,1481,1483,1485,1487,1489],{"class":39,"line":65},[37,1474,75],{"class":43},[37,1476,78],{"class":47},[37,1478,1244],{"class":51},[37,1480,55],{"class":43},[37,1482,1249],{"class":58},[37,1484,1252],{"class":51},[37,1486,55],{"class":43},[37,1488,1257],{"class":58},[37,1490,113],{"class":43},[37,1492,1493,1495,1497],{"class":39,"line":72},[37,1494,75],{"class":43},[37,1496,1266],{"class":47},[37,1498,113],{"class":43},[37,1500,1501,1503,1505],{"class":39,"line":116},[37,1502,273],{"class":43},[37,1504,48],{"class":47},[37,1506,62],{"class":43},[27,1508,1510],{"className":280,"code":1509,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n\u003C/Shader>\n",[34,1511,1512,1526,1546,1554],{"__ignoreMap":32},[37,1513,1514,1516,1518,1520,1522,1524],{"class":39,"line":40},[37,1515,44],{"class":43},[37,1517,48],{"class":291},[37,1519,294],{"class":51},[37,1521,55],{"class":297},[37,1523,59],{"class":58},[37,1525,62],{"class":43},[37,1527,1528,1530,1532,1534,1536,1538,1540,1542,1544],{"class":39,"line":65},[37,1529,75],{"class":43},[37,1531,78],{"class":291},[37,1533,1244],{"class":51},[37,1535,55],{"class":297},[37,1537,1249],{"class":58},[37,1539,1252],{"class":51},[37,1541,55],{"class":297},[37,1543,1257],{"class":58},[37,1545,113],{"class":43},[37,1547,1548,1550,1552],{"class":39,"line":72},[37,1549,75],{"class":43},[37,1551,1266],{"class":291},[37,1553,113],{"class":43},[37,1555,1556,1558,1560],{"class":39,"line":116},[37,1557,273],{"class":43},[37,1559,48],{"class":291},[37,1561,62],{"class":43},[27,1563,1564],{"className":543,"code":1454,"language":545,"meta":32,"style":32},[34,1565,1566,1580,1600,1608],{"__ignoreMap":32},[37,1567,1568,1570,1572,1574,1576,1578],{"class":39,"line":40},[37,1569,44],{"class":43},[37,1571,48],{"class":291},[37,1573,52],{"class":51},[37,1575,55],{"class":297},[37,1577,59],{"class":58},[37,1579,62],{"class":43},[37,1581,1582,1584,1586,1588,1590,1592,1594,1596,1598],{"class":39,"line":65},[37,1583,75],{"class":43},[37,1585,78],{"class":291},[37,1587,1244],{"class":51},[37,1589,55],{"class":297},[37,1591,1249],{"class":58},[37,1593,1252],{"class":51},[37,1595,55],{"class":297},[37,1597,1257],{"class":58},[37,1599,113],{"class":43},[37,1601,1602,1604,1606],{"class":39,"line":72},[37,1603,75],{"class":43},[37,1605,1266],{"class":291},[37,1607,113],{"class":43},[37,1609,1610,1612,1614],{"class":39,"line":116},[37,1611,273],{"class":43},[37,1613,48],{"class":291},[37,1615,62],{"class":43},[27,1617,1618],{"className":543,"code":1454,"language":545,"meta":32,"style":32},[34,1619,1620,1634,1654,1662],{"__ignoreMap":32},[37,1621,1622,1624,1626,1628,1630,1632],{"class":39,"line":40},[37,1623,44],{"class":43},[37,1625,48],{"class":291},[37,1627,52],{"class":51},[37,1629,55],{"class":297},[37,1631,59],{"class":58},[37,1633,62],{"class":43},[37,1635,1636,1638,1640,1642,1644,1646,1648,1650,1652],{"class":39,"line":65},[37,1637,75],{"class":43},[37,1639,78],{"class":291},[37,1641,1244],{"class":51},[37,1643,55],{"class":297},[37,1645,1249],{"class":58},[37,1647,1252],{"class":51},[37,1649,55],{"class":297},[37,1651,1257],{"class":58},[37,1653,113],{"class":43},[37,1655,1656,1658,1660],{"class":39,"line":72},[37,1657,75],{"class":43},[37,1659,1266],{"class":291},[37,1661,113],{"class":43},[37,1663,1664,1666,1668],{"class":39,"line":116},[37,1665,273],{"class":43},[37,1667,48],{"class":291},[37,1669,62],{"class":43},[19,1671],{":preset":1672},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[15,1674,1675,1677,1678,1680,1681,1683],{},[34,1676,1296],{}," renders a ",[34,1679,1214],{}," element. The child components are visual layers — evaluated top to bottom, blended together on the GPU. The class or style you apply to ",[34,1682,1296],{}," controls the canvas size and position.",[1202,1685,1687],{"id":1686},"sizing-the-canvas","Sizing the canvas",[15,1689,1690],{},"The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works — Tailwind classes, inline styles, or a custom class:",[23,1692,1693,1815,1956,2093],{":tabs":1372},[27,1694,1696],{"className":29,"code":1695,"language":31,"meta":32,"style":32},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Aspect ratio with fluid width -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,1697,1698,1703,1718,1726,1734,1738,1743,1759,1767,1775,1779,1784,1799,1807],{"__ignoreMap":32},[37,1699,1700],{"class":39,"line":40},[37,1701,1702],{"class":68},"\u003C!-- Fill the viewport -->\n",[37,1704,1705,1707,1709,1711,1713,1716],{"class":39,"line":65},[37,1706,44],{"class":43},[37,1708,48],{"class":47},[37,1710,52],{"class":51},[37,1712,55],{"class":43},[37,1714,1715],{"class":58},"\"w-screen h-screen\"",[37,1717,62],{"class":43},[37,1719,1720,1722,1724],{"class":39,"line":72},[37,1721,75],{"class":43},[37,1723,78],{"class":47},[37,1725,113],{"class":43},[37,1727,1728,1730,1732],{"class":39,"line":116},[37,1729,273],{"class":43},[37,1731,48],{"class":47},[37,1733,62],{"class":43},[37,1735,1736],{"class":39,"line":123},[37,1737,120],{"emptyLinePlaceholder":119},[37,1739,1740],{"class":39,"line":129},[37,1741,1742],{"class":68},"\u003C!-- Fixed dimensions -->\n",[37,1744,1745,1747,1749,1752,1754,1757],{"class":39,"line":171},[37,1746,44],{"class":43},[37,1748,48],{"class":47},[37,1750,1751],{"class":51}," style",[37,1753,55],{"class":43},[37,1755,1756],{"class":58},"\"width: 600px; height: 400px;\"",[37,1758,62],{"class":43},[37,1760,1761,1763,1765],{"class":39,"line":221},[37,1762,75],{"class":43},[37,1764,78],{"class":47},[37,1766,113],{"class":43},[37,1768,1769,1771,1773],{"class":39,"line":231},[37,1770,273],{"class":43},[37,1772,48],{"class":47},[37,1774,62],{"class":43},[37,1776,1777],{"class":39,"line":236},[37,1778,120],{"emptyLinePlaceholder":119},[37,1780,1781],{"class":39,"line":242},[37,1782,1783],{"class":68},"\u003C!-- Aspect ratio with fluid width -->\n",[37,1785,1786,1788,1790,1792,1794,1797],{"class":39,"line":270},[37,1787,44],{"class":43},[37,1789,48],{"class":47},[37,1791,52],{"class":51},[37,1793,55],{"class":43},[37,1795,1796],{"class":58},"\"w-full aspect-video\"",[37,1798,62],{"class":43},[37,1800,1801,1803,1805],{"class":39,"line":1145},[37,1802,75],{"class":43},[37,1804,78],{"class":47},[37,1806,113],{"class":43},[37,1808,1809,1811,1813],{"class":39,"line":1151},[37,1810,273],{"class":43},[37,1812,48],{"class":47},[37,1814,62],{"class":43},[27,1816,1818],{"className":280,"code":1817,"language":282,"meta":32,"style":32},"{/* Fill the viewport */}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Fixed dimensions */}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Aspect ratio with fluid width */}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,1819,1820,1829,1843,1851,1859,1863,1872,1897,1905,1913,1917,1926,1940,1948],{"__ignoreMap":32},[37,1821,1822,1824,1827],{"class":39,"line":40},[37,1823,326],{"class":43},[37,1825,1826],{"class":68},"/* Fill the viewport */",[37,1828,312],{"class":43},[37,1830,1831,1833,1835,1837,1839,1841],{"class":39,"line":65},[37,1832,44],{"class":43},[37,1834,48],{"class":291},[37,1836,294],{"class":51},[37,1838,55],{"class":297},[37,1840,1715],{"class":58},[37,1842,62],{"class":43},[37,1844,1845,1847,1849],{"class":39,"line":72},[37,1846,75],{"class":43},[37,1848,78],{"class":291},[37,1850,113],{"class":43},[37,1852,1853,1855,1857],{"class":39,"line":116},[37,1854,273],{"class":43},[37,1856,48],{"class":291},[37,1858,62],{"class":43},[37,1860,1861],{"class":39,"line":123},[37,1862,120],{"emptyLinePlaceholder":119},[37,1864,1865,1867,1870],{"class":39,"line":129},[37,1866,326],{"class":43},[37,1868,1869],{"class":68},"/* Fixed dimensions */",[37,1871,312],{"class":43},[37,1873,1874,1876,1878,1880,1882,1885,1888,1891,1894],{"class":39,"line":171},[37,1875,44],{"class":43},[37,1877,48],{"class":291},[37,1879,1751],{"class":51},[37,1881,55],{"class":297},[37,1883,1884],{"class":43},"{{ width: ",[37,1886,1887],{"class":58},"'600px'",[37,1889,1890],{"class":43},", height: ",[37,1892,1893],{"class":58},"'400px'",[37,1895,1896],{"class":43}," }}>\n",[37,1898,1899,1901,1903],{"class":39,"line":221},[37,1900,75],{"class":43},[37,1902,78],{"class":291},[37,1904,113],{"class":43},[37,1906,1907,1909,1911],{"class":39,"line":231},[37,1908,273],{"class":43},[37,1910,48],{"class":291},[37,1912,62],{"class":43},[37,1914,1915],{"class":39,"line":236},[37,1916,120],{"emptyLinePlaceholder":119},[37,1918,1919,1921,1924],{"class":39,"line":242},[37,1920,326],{"class":43},[37,1922,1923],{"class":68},"/* Aspect ratio with fluid width */",[37,1925,312],{"class":43},[37,1927,1928,1930,1932,1934,1936,1938],{"class":39,"line":270},[37,1929,44],{"class":43},[37,1931,48],{"class":291},[37,1933,294],{"class":51},[37,1935,55],{"class":297},[37,1937,1796],{"class":58},[37,1939,62],{"class":43},[37,1941,1942,1944,1946],{"class":39,"line":1145},[37,1943,75],{"class":43},[37,1945,78],{"class":291},[37,1947,113],{"class":43},[37,1949,1950,1952,1954],{"class":39,"line":1151},[37,1951,273],{"class":43},[37,1953,48],{"class":291},[37,1955,62],{"class":43},[27,1957,1958],{"className":543,"code":1695,"language":545,"meta":32,"style":32},[34,1959,1960,1971,1985,1993,2001,2005,2014,2028,2036,2044,2048,2063,2077,2085],{"__ignoreMap":32},[37,1961,1962,1965,1968],{"class":39,"line":40},[37,1963,1964],{"class":297},"\u003C!--",[37,1966,1967],{"class":43}," Fill the viewport ",[37,1969,1970],{"class":297},"-->\n",[37,1972,1973,1975,1977,1979,1981,1983],{"class":39,"line":65},[37,1974,44],{"class":43},[37,1976,48],{"class":291},[37,1978,52],{"class":51},[37,1980,55],{"class":297},[37,1982,1715],{"class":58},[37,1984,62],{"class":43},[37,1986,1987,1989,1991],{"class":39,"line":72},[37,1988,75],{"class":43},[37,1990,78],{"class":291},[37,1992,113],{"class":43},[37,1994,1995,1997,1999],{"class":39,"line":116},[37,1996,273],{"class":43},[37,1998,48],{"class":291},[37,2000,62],{"class":43},[37,2002,2003],{"class":39,"line":123},[37,2004,120],{"emptyLinePlaceholder":119},[37,2006,2007,2009,2012],{"class":39,"line":129},[37,2008,1964],{"class":297},[37,2010,2011],{"class":43}," Fixed dimensions ",[37,2013,1970],{"class":297},[37,2015,2016,2018,2020,2022,2024,2026],{"class":39,"line":171},[37,2017,44],{"class":43},[37,2019,48],{"class":291},[37,2021,1751],{"class":51},[37,2023,55],{"class":297},[37,2025,1756],{"class":58},[37,2027,62],{"class":43},[37,2029,2030,2032,2034],{"class":39,"line":221},[37,2031,75],{"class":43},[37,2033,78],{"class":291},[37,2035,113],{"class":43},[37,2037,2038,2040,2042],{"class":39,"line":231},[37,2039,273],{"class":43},[37,2041,48],{"class":291},[37,2043,62],{"class":43},[37,2045,2046],{"class":39,"line":236},[37,2047,120],{"emptyLinePlaceholder":119},[37,2049,2050,2052,2055,2058,2061],{"class":39,"line":242},[37,2051,1964],{"class":297},[37,2053,2054],{"class":43}," Aspect ratio ",[37,2056,2057],{"class":297},"with",[37,2059,2060],{"class":43}," fluid width ",[37,2062,1970],{"class":297},[37,2064,2065,2067,2069,2071,2073,2075],{"class":39,"line":270},[37,2066,44],{"class":43},[37,2068,48],{"class":291},[37,2070,52],{"class":51},[37,2072,55],{"class":297},[37,2074,1796],{"class":58},[37,2076,62],{"class":43},[37,2078,2079,2081,2083],{"class":39,"line":1145},[37,2080,75],{"class":43},[37,2082,78],{"class":291},[37,2084,113],{"class":43},[37,2086,2087,2089,2091],{"class":39,"line":1151},[37,2088,273],{"class":43},[37,2090,48],{"class":291},[37,2092,62],{"class":43},[27,2094,2096],{"className":543,"code":2095,"language":545,"meta":32,"style":32},"{/* Fill the viewport */}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Fixed dimensions */}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Aspect ratio with fluid width */}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,2097,2098,2106,2120,2128,2136,2140,2148,2168,2176,2184,2188,2196,2210,2218],{"__ignoreMap":32},[37,2099,2100,2102,2104],{"class":39,"line":40},[37,2101,326],{"class":43},[37,2103,1826],{"class":68},[37,2105,312],{"class":43},[37,2107,2108,2110,2112,2114,2116,2118],{"class":39,"line":65},[37,2109,44],{"class":43},[37,2111,48],{"class":291},[37,2113,52],{"class":51},[37,2115,55],{"class":297},[37,2117,1715],{"class":58},[37,2119,62],{"class":43},[37,2121,2122,2124,2126],{"class":39,"line":72},[37,2123,75],{"class":43},[37,2125,78],{"class":291},[37,2127,113],{"class":43},[37,2129,2130,2132,2134],{"class":39,"line":116},[37,2131,273],{"class":43},[37,2133,48],{"class":291},[37,2135,62],{"class":43},[37,2137,2138],{"class":39,"line":123},[37,2139,120],{"emptyLinePlaceholder":119},[37,2141,2142,2144,2146],{"class":39,"line":129},[37,2143,326],{"class":43},[37,2145,1869],{"class":68},[37,2147,312],{"class":43},[37,2149,2150,2152,2154,2156,2158,2160,2162,2164,2166],{"class":39,"line":171},[37,2151,44],{"class":43},[37,2153,48],{"class":291},[37,2155,1751],{"class":51},[37,2157,55],{"class":297},[37,2159,1884],{"class":43},[37,2161,1887],{"class":58},[37,2163,1890],{"class":43},[37,2165,1893],{"class":58},[37,2167,1896],{"class":43},[37,2169,2170,2172,2174],{"class":39,"line":221},[37,2171,75],{"class":43},[37,2173,78],{"class":291},[37,2175,113],{"class":43},[37,2177,2178,2180,2182],{"class":39,"line":231},[37,2179,273],{"class":43},[37,2181,48],{"class":291},[37,2183,62],{"class":43},[37,2185,2186],{"class":39,"line":236},[37,2187,120],{"emptyLinePlaceholder":119},[37,2189,2190,2192,2194],{"class":39,"line":242},[37,2191,326],{"class":43},[37,2193,1923],{"class":68},[37,2195,312],{"class":43},[37,2197,2198,2200,2202,2204,2206,2208],{"class":39,"line":270},[37,2199,44],{"class":43},[37,2201,48],{"class":291},[37,2203,52],{"class":51},[37,2205,55],{"class":297},[37,2207,1796],{"class":58},[37,2209,62],{"class":43},[37,2211,2212,2214,2216],{"class":39,"line":1145},[37,2213,75],{"class":43},[37,2215,78],{"class":291},[37,2217,113],{"class":43},[37,2219,2220,2222,2224],{"class":39,"line":1151},[37,2221,273],{"class":43},[37,2223,48],{"class":291},[37,2225,62],{"class":43},[15,2227,2228],{},"The canvas automatically resizes when its CSS dimensions change — no manual resize calls needed.",[1202,2230,2232],{"id":2231},"configuring-components","Configuring components",[15,2234,2235,2236,2241],{},"Each component accepts props that control its appearance. Browse the ",[2237,2238,2240],"a",{"href":2239},"/docs/components","Component Docs"," for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:",[23,2243,2244,2323,2399,2472],{":tabs":1372},[27,2245,2247],{"className":29,"code":2246,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n />\n\u003C/Shader>\n",[34,2248,2249,2263,2270,2280,2290,2300,2310,2315],{"__ignoreMap":32},[37,2250,2251,2253,2255,2257,2259,2261],{"class":39,"line":40},[37,2252,44],{"class":43},[37,2254,48],{"class":47},[37,2256,52],{"class":51},[37,2258,55],{"class":43},[37,2260,59],{"class":58},[37,2262,62],{"class":43},[37,2264,2265,2267],{"class":39,"line":65},[37,2266,75],{"class":43},[37,2268,2269],{"class":47},"LinearGradient\n",[37,2271,2272,2275,2277],{"class":39,"line":72},[37,2273,2274],{"class":51}," colorA",[37,2276,55],{"class":43},[37,2278,2279],{"class":58},"\"#ff6b6b\"\n",[37,2281,2282,2285,2287],{"class":39,"line":116},[37,2283,2284],{"class":51}," colorB",[37,2286,55],{"class":43},[37,2288,2289],{"class":58},"\"#4ecdc4\"\n",[37,2291,2292,2295,2297],{"class":39,"line":123},[37,2293,2294],{"class":51}," :angle",[37,2296,55],{"class":43},[37,2298,2299],{"class":58},"\"45\"\n",[37,2301,2302,2305,2307],{"class":39,"line":129},[37,2303,2304],{"class":51}," color-space",[37,2306,55],{"class":43},[37,2308,2309],{"class":58},"\"oklch\"\n",[37,2311,2312],{"class":39,"line":171},[37,2313,2314],{"class":43}," />\n",[37,2316,2317,2319,2321],{"class":39,"line":221},[37,2318,273],{"class":43},[37,2320,48],{"class":47},[37,2322,62],{"class":43},[27,2324,2326],{"className":280,"code":2325,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n />\n\u003C/Shader>\n",[34,2327,2328,2342,2348,2356,2364,2378,2387,2391],{"__ignoreMap":32},[37,2329,2330,2332,2334,2336,2338,2340],{"class":39,"line":40},[37,2331,44],{"class":43},[37,2333,48],{"class":291},[37,2335,294],{"class":51},[37,2337,55],{"class":297},[37,2339,59],{"class":58},[37,2341,62],{"class":43},[37,2343,2344,2346],{"class":39,"line":65},[37,2345,75],{"class":43},[37,2347,2269],{"class":291},[37,2349,2350,2352,2354],{"class":39,"line":72},[37,2351,2274],{"class":51},[37,2353,55],{"class":297},[37,2355,2279],{"class":58},[37,2357,2358,2360,2362],{"class":39,"line":116},[37,2359,2284],{"class":51},[37,2361,55],{"class":297},[37,2363,2289],{"class":58},[37,2365,2366,2369,2371,2373,2376],{"class":39,"line":123},[37,2367,2368],{"class":51}," angle",[37,2370,55],{"class":297},[37,2372,326],{"class":43},[37,2374,2375],{"class":291},"45",[37,2377,312],{"class":43},[37,2379,2380,2383,2385],{"class":39,"line":129},[37,2381,2382],{"class":51}," colorSpace",[37,2384,55],{"class":297},[37,2386,2309],{"class":58},[37,2388,2389],{"class":39,"line":171},[37,2390,2314],{"class":43},[37,2392,2393,2395,2397],{"class":39,"line":221},[37,2394,273],{"class":43},[37,2396,48],{"class":291},[37,2398,62],{"class":43},[27,2400,2402],{"className":543,"code":2401,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n colorA=\"#ff6b6b\"\n colorB=\"#4ecdc4\"\n angle={45}\n colorSpace=\"oklch\"\n />\n\u003C/Shader>\n",[34,2403,2404,2418,2424,2432,2440,2452,2460,2464],{"__ignoreMap":32},[37,2405,2406,2408,2410,2412,2414,2416],{"class":39,"line":40},[37,2407,44],{"class":43},[37,2409,48],{"class":291},[37,2411,52],{"class":51},[37,2413,55],{"class":297},[37,2415,59],{"class":58},[37,2417,62],{"class":43},[37,2419,2420,2422],{"class":39,"line":65},[37,2421,75],{"class":43},[37,2423,2269],{"class":291},[37,2425,2426,2428,2430],{"class":39,"line":72},[37,2427,2274],{"class":51},[37,2429,55],{"class":297},[37,2431,2279],{"class":58},[37,2433,2434,2436,2438],{"class":39,"line":116},[37,2435,2284],{"class":51},[37,2437,55],{"class":297},[37,2439,2289],{"class":58},[37,2441,2442,2444,2446,2448,2450],{"class":39,"line":123},[37,2443,2368],{"class":51},[37,2445,55],{"class":297},[37,2447,326],{"class":43},[37,2449,2375],{"class":291},[37,2451,312],{"class":43},[37,2453,2454,2456,2458],{"class":39,"line":129},[37,2455,2382],{"class":51},[37,2457,55],{"class":297},[37,2459,2309],{"class":58},[37,2461,2462],{"class":39,"line":171},[37,2463,2314],{"class":43},[37,2465,2466,2468,2470],{"class":39,"line":221},[37,2467,273],{"class":43},[37,2469,48],{"class":291},[37,2471,62],{"class":43},[27,2473,2474],{"className":543,"code":2401,"language":545,"meta":32,"style":32},[34,2475,2476,2490,2496,2504,2512,2524,2532,2536],{"__ignoreMap":32},[37,2477,2478,2480,2482,2484,2486,2488],{"class":39,"line":40},[37,2479,44],{"class":43},[37,2481,48],{"class":291},[37,2483,52],{"class":51},[37,2485,55],{"class":297},[37,2487,59],{"class":58},[37,2489,62],{"class":43},[37,2491,2492,2494],{"class":39,"line":65},[37,2493,75],{"class":43},[37,2495,2269],{"class":291},[37,2497,2498,2500,2502],{"class":39,"line":72},[37,2499,2274],{"class":51},[37,2501,55],{"class":297},[37,2503,2279],{"class":58},[37,2505,2506,2508,2510],{"class":39,"line":116},[37,2507,2284],{"class":51},[37,2509,55],{"class":297},[37,2511,2289],{"class":58},[37,2513,2514,2516,2518,2520,2522],{"class":39,"line":123},[37,2515,2368],{"class":51},[37,2517,55],{"class":297},[37,2519,326],{"class":43},[37,2521,2375],{"class":291},[37,2523,312],{"class":43},[37,2525,2526,2528,2530],{"class":39,"line":129},[37,2527,2382],{"class":51},[37,2529,55],{"class":297},[37,2531,2309],{"class":58},[37,2533,2534],{"class":39,"line":171},[37,2535,2314],{"class":43},[37,2537,2538,2540,2542],{"class":39,"line":221},[37,2539,273],{"class":43},[37,2541,48],{"class":291},[37,2543,62],{"class":43},[1202,2545,2547],{"id":2546},"using-with-ssr-frameworks","Using with SSR frameworks",[15,2549,2550],{},"Shaders uses WebGPU, which requires a browser environment. If you're using Nuxt, Next.js, SvelteKit, or SolidStart, see the framework-specific SSR guide for your setup.",[1202,2552,2554],{"id":2553},"next-steps","Next steps",[2556,2557,2558,2566,2573,2580],"ul",{},[2559,2560,2561,2565],"li",{},[2237,2562,2564],{"href":2563},"/docs/guide/composing-effects","Composing Effects"," — stack and nest components for complex results",[2559,2567,2568,2572],{},[2237,2569,2571],{"href":2570},"/docs/guide/layout-positioning","Layout & Positioning"," — position the canvas in your UI",[2559,2574,2575,2579],{},[2237,2576,2578],{"href":2577},"/docs/guide/props-reactivity","Props & Reactivity"," — bind state and animate props",[2559,2581,2582,2584],{},[2237,2583,2240],{"href":2239}," — browse all available shaders",[1311,2586,2587],{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":32,"searchDepth":65,"depth":65,"links":2589},[2590,2591,2592,2593,2594,2595,2596],{"id":1340,"depth":65,"text":1341},{"id":1365,"depth":65,"text":1366},{"id":1442,"depth":65,"text":1443},{"id":1686,"depth":65,"text":1687},{"id":2231,"depth":65,"text":2232},{"id":2546,"depth":65,"text":2547},{"id":2553,"depth":65,"text":2554},"Install Shaders and build your first GPU-accelerated effect",[2599],"js","rocket",{},"/docs/guide/quickstart",{"title":1332,"description":2597},"docs/guide/1.quickstart","RLtYLVxbyz880RPys2dp6cNKLwK4NqJJSna_QbNEVBQ",{"id":2607,"title":2608,"body":2609,"category":2984,"description":2985,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":2986,"meta":2987,"navigation":119,"path":2988,"seo":2989,"stem":2990,"__hash__":2991},"guide/docs/guide/10.color-space.md","Color Space",{"type":8,"value":2610,"toc":2981},[2611,2614,2621,2631,2859,2899,2903,2917,2938,2955,2978],[11,2612,2608],{"id":2613},"color-space",[15,2615,2616,2617,2620],{},"By default, Shaders uses ",[1306,2618,2619],{},"Display P3 linear"," color space for output. This delivers vibrant, wide-gamut colors on modern displays. However, if you're copying hex colors from Figma, Sketch, or Adobe XD, those tools work in sRGB — so the same hex value may render slightly differently in Shaders.",[15,2622,2623,2624,2626,2627,2630],{},"To match your design tool exactly, set ",[34,2625,335],{}," to ",[34,2628,2629],{},"'srgb'",":",[23,2632,2633,2678,2720,2760,2800],{":tabs":25},[27,2634,2636],{"className":29,"code":2635,"language":31,"meta":32,"style":32},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" />\n\u003C/Shader>\n",[34,2637,2638,2653,2670],{"__ignoreMap":32},[37,2639,2640,2642,2644,2646,2648,2651],{"class":39,"line":40},[37,2641,44],{"class":43},[37,2643,48],{"class":47},[37,2645,89],{"class":51},[37,2647,55],{"class":43},[37,2649,2650],{"class":58},"\"srgb\"",[37,2652,62],{"class":43},[37,2654,2655,2657,2660,2663,2665,2668],{"class":39,"line":65},[37,2656,75],{"class":43},[37,2658,2659],{"class":47},"SolidColor",[37,2661,2662],{"class":51}," color",[37,2664,55],{"class":43},[37,2666,2667],{"class":58},"\"#5b18ca\"",[37,2669,113],{"class":43},[37,2671,2672,2674,2676],{"class":39,"line":72},[37,2673,273],{"class":43},[37,2675,48],{"class":47},[37,2677,62],{"class":43},[27,2679,2681],{"className":280,"code":2680,"language":282,"meta":32,"style":32},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" />\n\u003C/Shader>\n",[34,2682,2683,2698,2712],{"__ignoreMap":32},[37,2684,2685,2687,2689,2692,2694,2696],{"class":39,"line":40},[37,2686,44],{"class":43},[37,2688,48],{"class":291},[37,2690,2691],{"class":51}," colorSpace",[37,2693,55],{"class":297},[37,2695,2650],{"class":58},[37,2697,62],{"class":43},[37,2699,2700,2702,2704,2706,2708,2710],{"class":39,"line":65},[37,2701,75],{"class":43},[37,2703,2659],{"class":291},[37,2705,2662],{"class":51},[37,2707,55],{"class":297},[37,2709,2667],{"class":58},[37,2711,113],{"class":43},[37,2713,2714,2716,2718],{"class":39,"line":72},[37,2715,273],{"class":43},[37,2717,48],{"class":291},[37,2719,62],{"class":43},[27,2721,2722],{"className":543,"code":2680,"language":545,"meta":32,"style":32},[34,2723,2724,2738,2752],{"__ignoreMap":32},[37,2725,2726,2728,2730,2732,2734,2736],{"class":39,"line":40},[37,2727,44],{"class":43},[37,2729,48],{"class":291},[37,2731,2691],{"class":51},[37,2733,55],{"class":297},[37,2735,2650],{"class":58},[37,2737,62],{"class":43},[37,2739,2740,2742,2744,2746,2748,2750],{"class":39,"line":65},[37,2741,75],{"class":43},[37,2743,2659],{"class":291},[37,2745,2662],{"class":51},[37,2747,55],{"class":297},[37,2749,2667],{"class":58},[37,2751,113],{"class":43},[37,2753,2754,2756,2758],{"class":39,"line":72},[37,2755,273],{"class":43},[37,2757,48],{"class":291},[37,2759,62],{"class":43},[27,2761,2762],{"className":543,"code":2680,"language":545,"meta":32,"style":32},[34,2763,2764,2778,2792],{"__ignoreMap":32},[37,2765,2766,2768,2770,2772,2774,2776],{"class":39,"line":40},[37,2767,44],{"class":43},[37,2769,48],{"class":291},[37,2771,2691],{"class":51},[37,2773,55],{"class":297},[37,2775,2650],{"class":58},[37,2777,62],{"class":43},[37,2779,2780,2782,2784,2786,2788,2790],{"class":39,"line":65},[37,2781,75],{"class":43},[37,2783,2659],{"class":291},[37,2785,2662],{"class":51},[37,2787,55],{"class":297},[37,2789,2667],{"class":58},[37,2791,113],{"class":43},[37,2793,2794,2796,2798],{"class":39,"line":72},[37,2795,273],{"class":43},[37,2797,48],{"class":291},[37,2799,62],{"class":43},[27,2801,2803],{"className":987,"code":2802,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[34,2804,2805,2823,2832,2836,2851,2855],{"__ignoreMap":32},[37,2806,2807,2810,2813,2816,2819,2821],{"class":39,"line":40},[37,2808,2809],{"class":297},"const",[37,2811,2812],{"class":291}," shader",[37,2814,2815],{"class":297}," =",[37,2817,2818],{"class":297}," await",[37,2820,999],{"class":51},[37,2822,1002],{"class":43},[37,2824,2825,2828,2830],{"class":39,"line":65},[37,2826,2827],{"class":43}," colorSpace: ",[37,2829,2629],{"class":58},[37,2831,1071],{"class":43},[37,2833,2834],{"class":39,"line":72},[37,2835,1007],{"class":43},[37,2837,2838,2840,2843,2846,2849],{"class":39,"line":116},[37,2839,1017],{"class":43},[37,2841,2842],{"class":58},"'SolidColor'",[37,2844,2845],{"class":43},", props: { color: ",[37,2847,2848],{"class":58},"'#5b18ca'",[37,2850,1142],{"class":43},[37,2852,2853],{"class":39,"line":123},[37,2854,1194],{"class":43},[37,2856,2857],{"class":39,"line":129},[37,2858,1200],{"class":43},[2860,2861,2862,2875],"table",{},[2863,2864,2865],"thead",{},[2866,2867,2868,2872],"tr",{},[2869,2870,2871],"th",{},"Value",[2869,2873,2874],{},"Description",[2876,2877,2878,2889],"tbody",{},[2866,2879,2880,2886],{},[2881,2882,2883],"td",{},[34,2884,2885],{},"p3-linear",[2881,2887,2888],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[2866,2890,2891,2896],{},[2881,2892,2893],{},[34,2894,2895],{},"srgb",[2881,2897,2898],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[1202,2900,2902],{"id":2901},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,2904,2905,2906,2908,2909,2911,2912,2916],{},"The ",[34,2907,335],{}," prop on ",[34,2910,1296],{}," controls the ",[2913,2914,2915],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,2918,2919,2920,2922,2923,2926,2927,2930,2931,2934,2935,2937],{},"Several gradient and color components also have their own ",[34,2921,335],{}," prop that controls how colors ",[2913,2924,2925],{},"interpolate between stops"," (for example, between ",[34,2928,2929],{},"colorA"," and ",[34,2932,2933],{},"colorB"," in a ",[34,2936,78],{},"). These are two separate concepts:",[2556,2939,2940,2949],{},[2559,2941,2942,2945,2946,2948],{},[1306,2943,2944],{},"Output color space"," — set on the root ",[34,2947,1296],{},", affects the entire canvas output",[2559,2950,2951,2954],{},[1306,2952,2953],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,2956,2957,2958,2961,2962,2961,2965,2961,2968,2961,2971,2961,2974,2977],{},"Available interpolation modes (where supported): ",[34,2959,2960],{},"linear",", ",[34,2963,2964],{},"oklch",[34,2966,2967],{},"oklab",[34,2969,2970],{},"hsl",[34,2972,2973],{},"hsv",[34,2975,2976],{},"lch",". See individual component docs for options.",[1311,2979,2980],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":32,"searchDepth":65,"depth":65,"links":2982},[2983],{"id":2901,"depth":65,"text":2902},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"/docs/guide/color-space",{"title":2608,"description":2985},"docs/guide/10.color-space","H8DBuarsEZ3Az-uKqVPOdWtesDd4Gp23dpjS6DotXVM",{"id":2993,"title":2994,"body":2995,"category":2984,"description":3220,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":3221,"meta":3222,"navigation":119,"path":3223,"seo":3224,"stem":3225,"__hash__":3226},"guide/docs/guide/11.telemetry.md","Telemetry",{"type":8,"value":2996,"toc":3218},[2997,3000,3003,3014,3017,3216],[11,2998,2994],{"id":2999},"telemetry",[15,3001,3002],{},"Shaders collects anonymous usage data to help improve the library. This includes the domain where the shader is installed and runtime FPS data. No personal information is captured.",[15,3004,3005,3006,3009,3010,3013],{},"Telemetry is ",[1306,3007,3008],{},"automatically disabled"," when running on ",[34,3011,3012],{},"localhost"," or in development environments.",[15,3015,3016],{},"To disable it explicitly in production:",[23,3018,3019,3056,3095,3131,3167],{":tabs":25},[27,3020,3022],{"className":29,"code":3021,"language":31,"meta":32,"style":32},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,3023,3024,3040,3048],{"__ignoreMap":32},[37,3025,3026,3028,3030,3033,3035,3038],{"class":39,"line":40},[37,3027,44],{"class":43},[37,3029,48],{"class":47},[37,3031,3032],{"class":51}," :disable-telemetry",[37,3034,55],{"class":43},[37,3036,3037],{"class":58},"\"true\"",[37,3039,62],{"class":43},[37,3041,3042,3044,3046],{"class":39,"line":65},[37,3043,75],{"class":43},[37,3045,78],{"class":47},[37,3047,113],{"class":43},[37,3049,3050,3052,3054],{"class":39,"line":72},[37,3051,273],{"class":43},[37,3053,48],{"class":47},[37,3055,62],{"class":43},[27,3057,3059],{"className":280,"code":3058,"language":282,"meta":32,"style":32},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,3060,3061,3079,3087],{"__ignoreMap":32},[37,3062,3063,3065,3067,3070,3072,3074,3077],{"class":39,"line":40},[37,3064,44],{"class":43},[37,3066,48],{"class":291},[37,3068,3069],{"class":51}," disableTelemetry",[37,3071,55],{"class":297},[37,3073,326],{"class":43},[37,3075,3076],{"class":291},"true",[37,3078,417],{"class":43},[37,3080,3081,3083,3085],{"class":39,"line":65},[37,3082,75],{"class":43},[37,3084,78],{"class":291},[37,3086,113],{"class":43},[37,3088,3089,3091,3093],{"class":39,"line":72},[37,3090,273],{"class":43},[37,3092,48],{"class":291},[37,3094,62],{"class":43},[27,3096,3097],{"className":543,"code":3058,"language":545,"meta":32,"style":32},[34,3098,3099,3115,3123],{"__ignoreMap":32},[37,3100,3101,3103,3105,3107,3109,3111,3113],{"class":39,"line":40},[37,3102,44],{"class":43},[37,3104,48],{"class":291},[37,3106,3069],{"class":51},[37,3108,55],{"class":297},[37,3110,326],{"class":43},[37,3112,3076],{"class":291},[37,3114,417],{"class":43},[37,3116,3117,3119,3121],{"class":39,"line":65},[37,3118,75],{"class":43},[37,3120,78],{"class":291},[37,3122,113],{"class":43},[37,3124,3125,3127,3129],{"class":39,"line":72},[37,3126,273],{"class":43},[37,3128,48],{"class":291},[37,3130,62],{"class":43},[27,3132,3133],{"className":543,"code":3058,"language":545,"meta":32,"style":32},[34,3134,3135,3151,3159],{"__ignoreMap":32},[37,3136,3137,3139,3141,3143,3145,3147,3149],{"class":39,"line":40},[37,3138,44],{"class":43},[37,3140,48],{"class":291},[37,3142,3069],{"class":51},[37,3144,55],{"class":297},[37,3146,326],{"class":43},[37,3148,3076],{"class":291},[37,3150,417],{"class":43},[37,3152,3153,3155,3157],{"class":39,"line":65},[37,3154,75],{"class":43},[37,3156,78],{"class":291},[37,3158,113],{"class":43},[37,3160,3161,3163,3165],{"class":39,"line":72},[37,3162,273],{"class":43},[37,3164,48],{"class":291},[37,3166,62],{"class":43},[27,3168,3170],{"className":987,"code":3169,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[34,3171,3172,3186,3195,3199,3208,3212],{"__ignoreMap":32},[37,3173,3174,3176,3178,3180,3182,3184],{"class":39,"line":40},[37,3175,2809],{"class":297},[37,3177,2812],{"class":291},[37,3179,2815],{"class":297},[37,3181,2818],{"class":297},[37,3183,999],{"class":51},[37,3185,1002],{"class":43},[37,3187,3188,3191,3193],{"class":39,"line":65},[37,3189,3190],{"class":43}," disableTelemetry: ",[37,3192,3076],{"class":291},[37,3194,1071],{"class":43},[37,3196,3197],{"class":39,"line":72},[37,3198,1007],{"class":43},[37,3200,3201,3203,3205],{"class":39,"line":116},[37,3202,1017],{"class":43},[37,3204,1020],{"class":58},[37,3206,3207],{"class":43},", props: {} }\n",[37,3209,3210],{"class":39,"line":123},[37,3211,1194],{"class":43},[37,3213,3214],{"class":39,"line":129},[37,3215,1200],{"class":43},[1311,3217,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":3219},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"/docs/guide/telemetry",{"title":2994,"description":3220},"docs/guide/11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":3228,"title":3229,"body":3230,"category":2984,"description":4056,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":4057,"meta":4058,"navigation":119,"path":4059,"seo":4060,"stem":4061,"__hash__":4062},"guide/docs/guide/12.hooks-events.md","Hooks & Events",{"type":8,"value":3231,"toc":4050},[3232,3235,3238,3242,3247,3996,4001,4006,4020,4027,4031,4047],[11,3233,3229],{"id":3234},"hooks-events",[15,3236,3237],{},"Shaders provides lifecycle hooks that let you respond to key moments in the rendering pipeline. This is useful for orchestrating UI transitions, hiding loading states, or triggering animations once the shader is ready.",[1202,3239,3241],{"id":3240},"onready","onReady",[15,3243,2905,3244,3246],{},[34,3245,3241],{}," hook fires once after the GPU has compiled the shader and the first frame is ready to render. This is the ideal moment to fade in the shader, remove a loading skeleton, or start a dependent animation.",[23,3248,3249,3407,3578,3706,3856],{":tabs":25},[27,3250,3252],{"className":29,"code":3251,"language":31,"meta":32,"style":32},"\u003Ctemplate>\n \u003CShader @ready=\"onShaderReady\" :style=\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\">\n \u003CCircle color=\"#ff0088\" />\n \u003C/Shader>\n\u003C/template>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst visible = ref(false)\n\nfunction onShaderReady() {\n visible.value = true\n}\n\u003C/script>\n",[34,3253,3254,3263,3287,3303,3311,3319,3323,3335,3347,3351,3370,3374,3385,3395,3399],{"__ignoreMap":32},[37,3255,3256,3258,3261],{"class":39,"line":40},[37,3257,44],{"class":43},[37,3259,3260],{"class":47},"template",[37,3262,62],{"class":43},[37,3264,3265,3267,3269,3272,3274,3277,3280,3282,3285],{"class":39,"line":65},[37,3266,75],{"class":43},[37,3268,48],{"class":47},[37,3270,3271],{"class":51}," @ready",[37,3273,55],{"class":43},[37,3275,3276],{"class":58},"\"onShaderReady\"",[37,3278,3279],{"class":51}," :style",[37,3281,55],{"class":43},[37,3283,3284],{"class":58},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[37,3286,62],{"class":43},[37,3288,3289,3291,3294,3296,3298,3301],{"class":39,"line":72},[37,3290,174],{"class":43},[37,3292,3293],{"class":47},"Circle",[37,3295,2662],{"class":51},[37,3297,55],{"class":43},[37,3299,3300],{"class":58},"\"#ff0088\"",[37,3302,113],{"class":43},[37,3304,3305,3307,3309],{"class":39,"line":116},[37,3306,224],{"class":43},[37,3308,48],{"class":47},[37,3310,62],{"class":43},[37,3312,3313,3315,3317],{"class":39,"line":123},[37,3314,273],{"class":43},[37,3316,3260],{"class":47},[37,3318,62],{"class":43},[37,3320,3321],{"class":39,"line":129},[37,3322,120],{"emptyLinePlaceholder":119},[37,3324,3325,3327,3330,3333],{"class":39,"line":171},[37,3326,44],{"class":43},[37,3328,3329],{"class":47},"script",[37,3331,3332],{"class":51}," setup",[37,3334,62],{"class":43},[37,3336,3337,3339,3342,3344],{"class":39,"line":221},[37,3338,1382],{"class":297},[37,3340,3341],{"class":43}," { ref } ",[37,3343,1388],{"class":297},[37,3345,3346],{"class":58}," 'vue'\n",[37,3348,3349],{"class":39,"line":231},[37,3350,120],{"emptyLinePlaceholder":119},[37,3352,3353,3355,3357,3359,3362,3365,3367],{"class":39,"line":236},[37,3354,2809],{"class":297},[37,3356,383],{"class":291},[37,3358,2815],{"class":297},[37,3360,3361],{"class":51}," ref",[37,3363,3364],{"class":43},"(",[37,3366,390],{"class":291},[37,3368,3369],{"class":43},")\n",[37,3371,3372],{"class":39,"line":242},[37,3373,120],{"emptyLinePlaceholder":119},[37,3375,3376,3379,3382],{"class":39,"line":270},[37,3377,3378],{"class":297},"function",[37,3380,3381],{"class":51}," onShaderReady",[37,3383,3384],{"class":43},"() {\n",[37,3386,3387,3390,3392],{"class":39,"line":1145},[37,3388,3389],{"class":43}," visible.value ",[37,3391,55],{"class":297},[37,3393,3394],{"class":291}," true\n",[37,3396,3397],{"class":39,"line":1151},[37,3398,312],{"class":43},[37,3400,3401,3403,3405],{"class":39,"line":1157},[37,3402,273],{"class":43},[37,3404,3329],{"class":47},[37,3406,62],{"class":43},[27,3408,3410],{"className":280,"code":3409,"language":282,"meta":32,"style":32},"import { useState } from 'react'\n\nfunction App() {\n const [visible, setVisible] = useState(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" />\n \u003C/Shader>\n )\n}\n",[34,3411,3412,3424,3428,3437,3467,3471,3479,3486,3509,3540,3545,3560,3569,3574],{"__ignoreMap":32},[37,3413,3414,3416,3419,3421],{"class":39,"line":40},[37,3415,1382],{"class":297},[37,3417,3418],{"class":43}," { useState } ",[37,3420,1388],{"class":297},[37,3422,3423],{"class":58}," 'react'\n",[37,3425,3426],{"class":39,"line":65},[37,3427,120],{"emptyLinePlaceholder":119},[37,3429,3430,3432,3435],{"class":39,"line":72},[37,3431,3378],{"class":297},[37,3433,3434],{"class":51}," App",[37,3436,3384],{"class":43},[37,3438,3439,3442,3445,3448,3450,3453,3456,3458,3461,3463,3465],{"class":39,"line":116},[37,3440,3441],{"class":297}," const",[37,3443,3444],{"class":43}," [",[37,3446,3447],{"class":291},"visible",[37,3449,2961],{"class":43},[37,3451,3452],{"class":291},"setVisible",[37,3454,3455],{"class":43},"] ",[37,3457,55],{"class":297},[37,3459,3460],{"class":51}," useState",[37,3462,3364],{"class":43},[37,3464,390],{"class":291},[37,3466,3369],{"class":43},[37,3468,3469],{"class":39,"line":123},[37,3470,120],{"emptyLinePlaceholder":119},[37,3472,3473,3476],{"class":39,"line":129},[37,3474,3475],{"class":297}," return",[37,3477,3478],{"class":43}," (\n",[37,3480,3481,3483],{"class":39,"line":171},[37,3482,174],{"class":43},[37,3484,3485],{"class":291},"Shader\n",[37,3487,3488,3491,3493,3496,3499,3502,3504,3506],{"class":39,"line":221},[37,3489,3490],{"class":51}," onReady",[37,3492,55],{"class":297},[37,3494,3495],{"class":43},"{() ",[37,3497,3498],{"class":297},"=>",[37,3500,3501],{"class":51}," setVisible",[37,3503,3364],{"class":43},[37,3505,3076],{"class":291},[37,3507,3508],{"class":43},")}\n",[37,3510,3511,3514,3516,3519,3522,3525,3528,3531,3534,3537],{"class":39,"line":231},[37,3512,3513],{"class":51}," style",[37,3515,55],{"class":297},[37,3517,3518],{"class":43},"{{ opacity: visible ",[37,3520,3521],{"class":297},"?",[37,3523,3524],{"class":291}," 1",[37,3526,3527],{"class":297}," :",[37,3529,3530],{"class":291}," 0",[37,3532,3533],{"class":43},", transition: ",[37,3535,3536],{"class":58},"'opacity 0.5s'",[37,3538,3539],{"class":43}," }}\n",[37,3541,3542],{"class":39,"line":236},[37,3543,3544],{"class":43}," >\n",[37,3546,3547,3550,3552,3554,3556,3558],{"class":39,"line":242},[37,3548,3549],{"class":43}," \u003C",[37,3551,3293],{"class":291},[37,3553,2662],{"class":51},[37,3555,55],{"class":297},[37,3557,3300],{"class":58},[37,3559,113],{"class":43},[37,3561,3562,3565,3567],{"class":39,"line":270},[37,3563,3564],{"class":43}," \u003C/",[37,3566,48],{"class":291},[37,3568,62],{"class":43},[37,3570,3571],{"class":39,"line":1145},[37,3572,3573],{"class":43}," )\n",[37,3575,3576],{"class":39,"line":1151},[37,3577,312],{"class":43},[27,3579,3583],{"className":3580,"code":3581,"language":3582,"meta":32,"style":32},"language-svelte shiki shiki-themes github-dark","\u003Cscript>\n let visible = $state(false)\n\u003C/script>\n\n\u003CShader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition=\"opacity 0.5s\">\n \u003CCircle color=\"#ff0088\" />\n\u003C/Shader>\n","svelte",[34,3584,3585,3593,3615,3623,3627,3684,3698],{"__ignoreMap":32},[37,3586,3587,3589,3591],{"class":39,"line":40},[37,3588,44],{"class":43},[37,3590,3329],{"class":47},[37,3592,62],{"class":43},[37,3594,3595,3598,3601,3603,3606,3609,3611,3613],{"class":39,"line":65},[37,3596,3597],{"class":297}," let",[37,3599,3600],{"class":43}," visible ",[37,3602,55],{"class":297},[37,3604,3605],{"class":43}," $",[37,3607,3608],{"class":51},"state",[37,3610,3364],{"class":43},[37,3612,390],{"class":291},[37,3614,3369],{"class":43},[37,3616,3617,3619,3621],{"class":39,"line":72},[37,3618,273],{"class":43},[37,3620,3329],{"class":47},[37,3622,62],{"class":43},[37,3624,3625],{"class":39,"line":116},[37,3626,120],{"emptyLinePlaceholder":119},[37,3628,3629,3631,3633,3636,3639,3641,3643,3645,3648,3650,3652,3654,3657,3660,3662,3664,3666,3668,3670,3672,3674,3677,3679,3682],{"class":39,"line":123},[37,3630,44],{"class":43},[37,3632,48],{"class":291},[37,3634,3635],{"class":51}," onready",[37,3637,3638],{"class":43},"={() ",[37,3640,3498],{"class":297},[37,3642,3600],{"class":43},[37,3644,55],{"class":297},[37,3646,3647],{"class":291}," true",[37,3649,332],{"class":43},[37,3651,1311],{"class":51},[37,3653,2630],{"class":43},[37,3655,3656],{"class":291},"opacity",[37,3658,3659],{"class":43},"={visible ",[37,3661,3521],{"class":297},[37,3663,3524],{"class":291},[37,3665,3527],{"class":297},[37,3667,3530],{"class":291},[37,3669,332],{"class":43},[37,3671,1311],{"class":51},[37,3673,2630],{"class":43},[37,3675,3676],{"class":291},"transition",[37,3678,55],{"class":43},[37,3680,3681],{"class":58},"\"opacity 0.5s\"",[37,3683,62],{"class":43},[37,3685,3686,3688,3690,3692,3694,3696],{"class":39,"line":129},[37,3687,75],{"class":43},[37,3689,3293],{"class":291},[37,3691,2662],{"class":51},[37,3693,55],{"class":43},[37,3695,3300],{"class":58},[37,3697,113],{"class":43},[37,3699,3700,3702,3704],{"class":39,"line":171},[37,3701,273],{"class":43},[37,3703,48],{"class":291},[37,3705,62],{"class":43},[27,3707,3709],{"className":543,"code":3708,"language":545,"meta":32,"style":32},"import { createSignal } from 'solid-js'\n\nfunction App() {\n const [visible, setVisible] = createSignal(false)\n\n return (\n \u003CShader\n onReady={() => setVisible(true)}\n style={{ opacity: visible() ? 1 : 0, transition: 'opacity 0.5s' }}\n >\n \u003CCircle color=\"#ff0088\" />\n \u003C/Shader>\n )\n}\n",[34,3710,3711,3723,3727,3735,3760,3764,3770,3776,3794,3822,3826,3840,3848,3852],{"__ignoreMap":32},[37,3712,3713,3715,3718,3720],{"class":39,"line":40},[37,3714,1382],{"class":297},[37,3716,3717],{"class":43}," { createSignal } ",[37,3719,1388],{"class":297},[37,3721,3722],{"class":58}," 'solid-js'\n",[37,3724,3725],{"class":39,"line":65},[37,3726,120],{"emptyLinePlaceholder":119},[37,3728,3729,3731,3733],{"class":39,"line":72},[37,3730,3378],{"class":297},[37,3732,3434],{"class":51},[37,3734,3384],{"class":43},[37,3736,3737,3739,3741,3743,3745,3747,3749,3751,3754,3756,3758],{"class":39,"line":116},[37,3738,3441],{"class":297},[37,3740,3444],{"class":43},[37,3742,3447],{"class":291},[37,3744,2961],{"class":43},[37,3746,3452],{"class":291},[37,3748,3455],{"class":43},[37,3750,55],{"class":297},[37,3752,3753],{"class":51}," createSignal",[37,3755,3364],{"class":43},[37,3757,390],{"class":291},[37,3759,3369],{"class":43},[37,3761,3762],{"class":39,"line":123},[37,3763,120],{"emptyLinePlaceholder":119},[37,3765,3766,3768],{"class":39,"line":129},[37,3767,3475],{"class":297},[37,3769,3478],{"class":43},[37,3771,3772,3774],{"class":39,"line":171},[37,3773,174],{"class":43},[37,3775,3485],{"class":291},[37,3777,3778,3780,3782,3784,3786,3788,3790,3792],{"class":39,"line":221},[37,3779,3490],{"class":51},[37,3781,55],{"class":297},[37,3783,3495],{"class":43},[37,3785,3498],{"class":297},[37,3787,3501],{"class":51},[37,3789,3364],{"class":43},[37,3791,3076],{"class":291},[37,3793,3508],{"class":43},[37,3795,3796,3798,3800,3803,3805,3808,3810,3812,3814,3816,3818,3820],{"class":39,"line":231},[37,3797,3513],{"class":51},[37,3799,55],{"class":297},[37,3801,3802],{"class":43},"{{ opacity: ",[37,3804,3447],{"class":51},[37,3806,3807],{"class":43},"() ",[37,3809,3521],{"class":297},[37,3811,3524],{"class":291},[37,3813,3527],{"class":297},[37,3815,3530],{"class":291},[37,3817,3533],{"class":43},[37,3819,3536],{"class":58},[37,3821,3539],{"class":43},[37,3823,3824],{"class":39,"line":236},[37,3825,3544],{"class":43},[37,3827,3828,3830,3832,3834,3836,3838],{"class":39,"line":242},[37,3829,3549],{"class":43},[37,3831,3293],{"class":291},[37,3833,2662],{"class":51},[37,3835,55],{"class":297},[37,3837,3300],{"class":58},[37,3839,113],{"class":43},[37,3841,3842,3844,3846],{"class":39,"line":270},[37,3843,3564],{"class":43},[37,3845,48],{"class":291},[37,3847,62],{"class":43},[37,3849,3850],{"class":39,"line":1145},[37,3851,3573],{"class":43},[37,3853,3854],{"class":39,"line":1151},[37,3855,312],{"class":43},[27,3857,3860],{"className":3858,"code":3859,"language":2599,"meta":32,"style":32},"language-js shiki shiki-themes github-dark","const canvas = document.getElementById('my-canvas')\n\n// Start hidden\ncanvas.style.opacity = '0'\ncanvas.style.transition = 'opacity 0.5s'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }\n ]\n}, {\n onReady: () => {\n canvas.style.opacity = '1'\n }\n})\n",[34,3861,3862,3884,3888,3893,3903,3913,3917,3931,3935,3955,3959,3964,3977,3987,3992],{"__ignoreMap":32},[37,3863,3864,3866,3869,3871,3874,3877,3879,3882],{"class":39,"line":40},[37,3865,2809],{"class":297},[37,3867,3868],{"class":291}," canvas",[37,3870,2815],{"class":297},[37,3872,3873],{"class":43}," document.",[37,3875,3876],{"class":51},"getElementById",[37,3878,3364],{"class":43},[37,3880,3881],{"class":58},"'my-canvas'",[37,3883,3369],{"class":43},[37,3885,3886],{"class":39,"line":65},[37,3887,120],{"emptyLinePlaceholder":119},[37,3889,3890],{"class":39,"line":72},[37,3891,3892],{"class":68},"// Start hidden\n",[37,3894,3895,3898,3900],{"class":39,"line":116},[37,3896,3897],{"class":43},"canvas.style.opacity ",[37,3899,55],{"class":297},[37,3901,3902],{"class":58}," '0'\n",[37,3904,3905,3908,3910],{"class":39,"line":123},[37,3906,3907],{"class":43},"canvas.style.transition ",[37,3909,55],{"class":297},[37,3911,3912],{"class":58}," 'opacity 0.5s'\n",[37,3914,3915],{"class":39,"line":129},[37,3916,120],{"emptyLinePlaceholder":119},[37,3918,3919,3921,3923,3925,3927,3929],{"class":39,"line":171},[37,3920,2809],{"class":297},[37,3922,2812],{"class":291},[37,3924,2815],{"class":297},[37,3926,2818],{"class":297},[37,3928,999],{"class":51},[37,3930,1002],{"class":43},[37,3932,3933],{"class":39,"line":221},[37,3934,1007],{"class":43},[37,3936,3937,3939,3942,3945,3948,3950,3953],{"class":39,"line":231},[37,3938,1017],{"class":43},[37,3940,3941],{"class":58},"'Circle'",[37,3943,3944],{"class":43},", id: ",[37,3946,3947],{"class":58},"'c1'",[37,3949,2845],{"class":43},[37,3951,3952],{"class":58},"'#ff0088'",[37,3954,1142],{"class":43},[37,3956,3957],{"class":39,"line":236},[37,3958,1194],{"class":43},[37,3960,3961],{"class":39,"line":242},[37,3962,3963],{"class":43},"}, {\n",[37,3965,3966,3969,3972,3974],{"class":39,"line":270},[37,3967,3968],{"class":51}," onReady",[37,3970,3971],{"class":43},": () ",[37,3973,3498],{"class":297},[37,3975,3976],{"class":43}," {\n",[37,3978,3979,3982,3984],{"class":39,"line":1145},[37,3980,3981],{"class":43}," canvas.style.opacity ",[37,3983,55],{"class":297},[37,3985,3986],{"class":58}," '1'\n",[37,3988,3989],{"class":39,"line":1151},[37,3990,3991],{"class":43}," }\n",[37,3993,3994],{"class":39,"line":1157},[37,3995,1200],{"class":43},[3997,3998,4000],"h3",{"id":3999},"timing","Timing",[15,4002,4003,4005],{},[34,4004,3241],{}," fires after the shader's node tree has been compiled into a GPU material and is actively rendering. This means:",[2556,4007,4008,4011,4014,4017],{},[2559,4009,4010],{},"The WebGPU (or WebGL fallback) renderer is initialized",[2559,4012,4013],{},"All child shader components have registered",[2559,4015,4016],{},"The composed shader material has been compiled",[2559,4018,4019],{},"The first frame is ready to display",[15,4021,4022,4023,4026],{},"The callback fires ",[1306,4024,4025],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[3997,4028,4030],{"id":4029},"notes","Notes",[2556,4032,4033,4038],{},[2559,4034,4035,4037],{},[34,4036,3241],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[2559,4039,4040,4041,4043,4044,4046],{},"If the ",[34,4042,1296],{}," component starts off-screen and initializes lazily when scrolled into view, ",[34,4045,3241],{}," fires after that deferred initialization completes",[1311,4048,4049],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":32,"searchDepth":65,"depth":65,"links":4051},[4052],{"id":3240,"depth":65,"text":3241,"children":4053},[4054,4055],{"id":3999,"depth":72,"text":4000},{"id":4029,"depth":72,"text":4030},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"/docs/guide/hooks-events",{"title":3229,"description":4056},"docs/guide/12.hooks-events","1Y2jpJZEZftP0XGdQIJZp6OiLZNuAsGn_NFeBRn2GhU",{"id":4064,"title":2564,"body":4065,"category":1320,"description":5534,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":5535,"meta":5536,"navigation":119,"path":2563,"seo":5537,"stem":5538,"__hash__":5539},"guide/docs/guide/2.composing-effects.md",{"type":8,"value":4066,"toc":5530},[4067,4070,4076,4080,4087,4528,4531,4535,4553,4975,4978,4987,5524,5527],[11,4068,2564],{"id":4069},"composing-effects",[15,4071,4072,4073,4075],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[34,4074,1296],{}," component is the root of your effect. Every instance of this renders its own GPU canvas. Visual output is created by stacking child components.",[1202,4077,4079],{"id":4078},"stacking-components","Stacking Components",[15,4081,4082,4083,4086],{},"Components are evaluated ",[1306,4084,4085],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[23,4088,4089,4172,4267,4357,4447],{":tabs":25},[27,4090,4092],{"className":29,"code":4091,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003C!-- Bottom layer -->\n \u003CLinearGradient />\n\n \u003C!-- Middle layer -->\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" />\n\n \u003C!-- Top layer -->\n \u003CGlassTiles />\n\u003C/Shader>\n",[34,4093,4094,4102,4107,4115,4119,4124,4146,4150,4155,4164],{"__ignoreMap":32},[37,4095,4096,4098,4100],{"class":39,"line":40},[37,4097,44],{"class":43},[37,4099,48],{"class":47},[37,4101,62],{"class":43},[37,4103,4104],{"class":39,"line":65},[37,4105,4106],{"class":68}," \u003C!-- Bottom layer -->\n",[37,4108,4109,4111,4113],{"class":39,"line":72},[37,4110,75],{"class":43},[37,4112,78],{"class":47},[37,4114,113],{"class":43},[37,4116,4117],{"class":39,"line":116},[37,4118,120],{"emptyLinePlaceholder":119},[37,4120,4121],{"class":39,"line":123},[37,4122,4123],{"class":68}," \u003C!-- Middle layer -->\n",[37,4125,4126,4128,4130,4132,4134,4136,4139,4141,4144],{"class":39,"line":129},[37,4127,75],{"class":43},[37,4129,3293],{"class":47},[37,4131,2662],{"class":51},[37,4133,55],{"class":43},[37,4135,3300],{"class":58},[37,4137,4138],{"class":51}," radius",[37,4140,55],{"class":43},[37,4142,4143],{"class":58},"\"0.8\"",[37,4145,113],{"class":43},[37,4147,4148],{"class":39,"line":171},[37,4149,120],{"emptyLinePlaceholder":119},[37,4151,4152],{"class":39,"line":221},[37,4153,4154],{"class":68}," \u003C!-- Top layer -->\n",[37,4156,4157,4159,4162],{"class":39,"line":231},[37,4158,75],{"class":43},[37,4160,4161],{"class":47},"GlassTiles",[37,4163,113],{"class":43},[37,4165,4166,4168,4170],{"class":39,"line":236},[37,4167,273],{"class":43},[37,4169,48],{"class":47},[37,4171,62],{"class":43},[27,4173,4175],{"className":280,"code":4174,"language":282,"meta":32,"style":32},"\u003CShader>\n {/* Bottom layer */}\n \u003CLinearGradient />\n\n {/* Middle layer */}\n \u003CCircle color=\"#ff0088\" radius={0.8} />\n\n {/* Top layer */}\n \u003CGlassTiles />\n\u003C/Shader>\n",[34,4176,4177,4185,4194,4202,4206,4215,4238,4242,4251,4259],{"__ignoreMap":32},[37,4178,4179,4181,4183],{"class":39,"line":40},[37,4180,44],{"class":43},[37,4182,48],{"class":291},[37,4184,62],{"class":43},[37,4186,4187,4189,4192],{"class":39,"line":65},[37,4188,306],{"class":43},[37,4190,4191],{"class":68},"/* Bottom layer */",[37,4193,312],{"class":43},[37,4195,4196,4198,4200],{"class":39,"line":72},[37,4197,75],{"class":43},[37,4199,78],{"class":291},[37,4201,113],{"class":43},[37,4203,4204],{"class":39,"line":116},[37,4205,120],{"emptyLinePlaceholder":119},[37,4207,4208,4210,4213],{"class":39,"line":123},[37,4209,306],{"class":43},[37,4211,4212],{"class":68},"/* Middle layer */",[37,4214,312],{"class":43},[37,4216,4217,4219,4221,4223,4225,4227,4229,4231,4233,4236],{"class":39,"line":129},[37,4218,75],{"class":43},[37,4220,3293],{"class":291},[37,4222,2662],{"class":51},[37,4224,55],{"class":297},[37,4226,3300],{"class":58},[37,4228,4138],{"class":51},[37,4230,55],{"class":297},[37,4232,326],{"class":43},[37,4234,4235],{"class":291},"0.8",[37,4237,484],{"class":43},[37,4239,4240],{"class":39,"line":171},[37,4241,120],{"emptyLinePlaceholder":119},[37,4243,4244,4246,4249],{"class":39,"line":221},[37,4245,306],{"class":43},[37,4247,4248],{"class":68},"/* Top layer */",[37,4250,312],{"class":43},[37,4252,4253,4255,4257],{"class":39,"line":231},[37,4254,75],{"class":43},[37,4256,4161],{"class":291},[37,4258,113],{"class":43},[37,4260,4261,4263,4265],{"class":39,"line":236},[37,4262,273],{"class":43},[37,4264,48],{"class":291},[37,4266,62],{"class":43},[27,4268,4269],{"className":543,"code":4174,"language":545,"meta":32,"style":32},[34,4270,4271,4279,4287,4295,4299,4307,4329,4333,4341,4349],{"__ignoreMap":32},[37,4272,4273,4275,4277],{"class":39,"line":40},[37,4274,44],{"class":43},[37,4276,48],{"class":291},[37,4278,62],{"class":43},[37,4280,4281,4283,4285],{"class":39,"line":65},[37,4282,306],{"class":43},[37,4284,4191],{"class":68},[37,4286,312],{"class":43},[37,4288,4289,4291,4293],{"class":39,"line":72},[37,4290,75],{"class":43},[37,4292,78],{"class":291},[37,4294,113],{"class":43},[37,4296,4297],{"class":39,"line":116},[37,4298,120],{"emptyLinePlaceholder":119},[37,4300,4301,4303,4305],{"class":39,"line":123},[37,4302,306],{"class":43},[37,4304,4212],{"class":68},[37,4306,312],{"class":43},[37,4308,4309,4311,4313,4315,4317,4319,4321,4323,4325,4327],{"class":39,"line":129},[37,4310,75],{"class":43},[37,4312,3293],{"class":291},[37,4314,2662],{"class":51},[37,4316,55],{"class":297},[37,4318,3300],{"class":58},[37,4320,4138],{"class":51},[37,4322,55],{"class":297},[37,4324,326],{"class":43},[37,4326,4235],{"class":291},[37,4328,484],{"class":43},[37,4330,4331],{"class":39,"line":171},[37,4332,120],{"emptyLinePlaceholder":119},[37,4334,4335,4337,4339],{"class":39,"line":221},[37,4336,306],{"class":43},[37,4338,4248],{"class":68},[37,4340,312],{"class":43},[37,4342,4343,4345,4347],{"class":39,"line":231},[37,4344,75],{"class":43},[37,4346,4161],{"class":291},[37,4348,113],{"class":43},[37,4350,4351,4353,4355],{"class":39,"line":236},[37,4352,273],{"class":43},[37,4354,48],{"class":291},[37,4356,62],{"class":43},[27,4358,4359],{"className":543,"code":4174,"language":545,"meta":32,"style":32},[34,4360,4361,4369,4377,4385,4389,4397,4419,4423,4431,4439],{"__ignoreMap":32},[37,4362,4363,4365,4367],{"class":39,"line":40},[37,4364,44],{"class":43},[37,4366,48],{"class":291},[37,4368,62],{"class":43},[37,4370,4371,4373,4375],{"class":39,"line":65},[37,4372,306],{"class":43},[37,4374,4191],{"class":68},[37,4376,312],{"class":43},[37,4378,4379,4381,4383],{"class":39,"line":72},[37,4380,75],{"class":43},[37,4382,78],{"class":291},[37,4384,113],{"class":43},[37,4386,4387],{"class":39,"line":116},[37,4388,120],{"emptyLinePlaceholder":119},[37,4390,4391,4393,4395],{"class":39,"line":123},[37,4392,306],{"class":43},[37,4394,4212],{"class":68},[37,4396,312],{"class":43},[37,4398,4399,4401,4403,4405,4407,4409,4411,4413,4415,4417],{"class":39,"line":129},[37,4400,75],{"class":43},[37,4402,3293],{"class":291},[37,4404,2662],{"class":51},[37,4406,55],{"class":297},[37,4408,3300],{"class":58},[37,4410,4138],{"class":51},[37,4412,55],{"class":297},[37,4414,326],{"class":43},[37,4416,4235],{"class":291},[37,4418,484],{"class":43},[37,4420,4421],{"class":39,"line":171},[37,4422,120],{"emptyLinePlaceholder":119},[37,4424,4425,4427,4429],{"class":39,"line":221},[37,4426,306],{"class":43},[37,4428,4248],{"class":68},[37,4430,312],{"class":43},[37,4432,4433,4435,4437],{"class":39,"line":231},[37,4434,75],{"class":43},[37,4436,4161],{"class":291},[37,4438,113],{"class":43},[37,4440,4441,4443,4445],{"class":39,"line":236},[37,4442,273],{"class":43},[37,4444,48],{"class":291},[37,4446,62],{"class":43},[27,4448,4450],{"className":987,"code":4449,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n // Bottom layer\n { type: 'LinearGradient', props: {} },\n // Middle layer\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } },\n // Top layer\n { type: 'GlassTiles', props: {} }\n ]\n})\n",[34,4451,4452,4466,4470,4475,4484,4489,4506,4511,4520,4524],{"__ignoreMap":32},[37,4453,4454,4456,4458,4460,4462,4464],{"class":39,"line":40},[37,4455,2809],{"class":297},[37,4457,2812],{"class":291},[37,4459,2815],{"class":297},[37,4461,2818],{"class":297},[37,4463,999],{"class":51},[37,4465,1002],{"class":43},[37,4467,4468],{"class":39,"line":65},[37,4469,1007],{"class":43},[37,4471,4472],{"class":39,"line":72},[37,4473,4474],{"class":68}," // Bottom layer\n",[37,4476,4477,4479,4481],{"class":39,"line":116},[37,4478,1017],{"class":43},[37,4480,1020],{"class":58},[37,4482,4483],{"class":43},", props: {} },\n",[37,4485,4486],{"class":39,"line":123},[37,4487,4488],{"class":68}," // Middle layer\n",[37,4490,4491,4493,4495,4497,4499,4502,4504],{"class":39,"line":129},[37,4492,1017],{"class":43},[37,4494,3941],{"class":58},[37,4496,2845],{"class":43},[37,4498,3952],{"class":58},[37,4500,4501],{"class":43},", radius: ",[37,4503,4235],{"class":291},[37,4505,1046],{"class":43},[37,4507,4508],{"class":39,"line":171},[37,4509,4510],{"class":68}," // Top layer\n",[37,4512,4513,4515,4518],{"class":39,"line":221},[37,4514,1017],{"class":43},[37,4516,4517],{"class":58},"'GlassTiles'",[37,4519,3207],{"class":43},[37,4521,4522],{"class":39,"line":231},[37,4523,1194],{"class":43},[37,4525,4526],{"class":39,"line":236},[37,4527,1200],{"class":43},[19,4529],{":preset":4530},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[1202,4532,4534],{"id":4533},"nesting-components","Nesting Components",[15,4536,4537,4538,4541,4542,4545,4546,4549,4550,4552],{},"Notice how the ",[34,4539,4540],{},"\u003CGlassTiles>"," component in the above example applies to all proceeding sibling components. If you wanted to ",[2913,4543,4544],{},"only"," apply glass tiles to the ",[34,4547,4548],{},"\u003CCircle>"," component, you can nest it inside the ",[34,4551,4540],{}," component:",[23,4554,4555,4634,4723,4809,4895],{":tabs":25},[27,4556,4558],{"className":29,"code":4557,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003C!-- This gradient is NOT affected -->\n \u003CLinearGradient />\n\n \u003C!-- Only the Circle inside has glass tiles applied -->\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[34,4559,4560,4568,4573,4581,4585,4590,4598,4618,4626],{"__ignoreMap":32},[37,4561,4562,4564,4566],{"class":39,"line":40},[37,4563,44],{"class":43},[37,4565,48],{"class":47},[37,4567,62],{"class":43},[37,4569,4570],{"class":39,"line":65},[37,4571,4572],{"class":68}," \u003C!-- This gradient is NOT affected -->\n",[37,4574,4575,4577,4579],{"class":39,"line":72},[37,4576,75],{"class":43},[37,4578,78],{"class":47},[37,4580,113],{"class":43},[37,4582,4583],{"class":39,"line":116},[37,4584,120],{"emptyLinePlaceholder":119},[37,4586,4587],{"class":39,"line":123},[37,4588,4589],{"class":68}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[37,4591,4592,4594,4596],{"class":39,"line":129},[37,4593,75],{"class":43},[37,4595,4161],{"class":47},[37,4597,62],{"class":43},[37,4599,4600,4602,4604,4606,4608,4610,4612,4614,4616],{"class":39,"line":171},[37,4601,174],{"class":43},[37,4603,3293],{"class":47},[37,4605,2662],{"class":51},[37,4607,55],{"class":43},[37,4609,3300],{"class":58},[37,4611,4138],{"class":51},[37,4613,55],{"class":43},[37,4615,4143],{"class":58},[37,4617,113],{"class":43},[37,4619,4620,4622,4624],{"class":39,"line":221},[37,4621,224],{"class":43},[37,4623,4161],{"class":47},[37,4625,62],{"class":43},[37,4627,4628,4630,4632],{"class":39,"line":231},[37,4629,273],{"class":43},[37,4631,48],{"class":47},[37,4633,62],{"class":43},[27,4635,4637],{"className":280,"code":4636,"language":282,"meta":32,"style":32},"\u003CShader>\n {/* This gradient is NOT affected */}\n \u003CLinearGradient />\n\n {/* Only the Circle inside has glass tiles applied */}\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius={0.8} />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[34,4638,4639,4647,4656,4664,4668,4677,4685,4707,4715],{"__ignoreMap":32},[37,4640,4641,4643,4645],{"class":39,"line":40},[37,4642,44],{"class":43},[37,4644,48],{"class":291},[37,4646,62],{"class":43},[37,4648,4649,4651,4654],{"class":39,"line":65},[37,4650,306],{"class":43},[37,4652,4653],{"class":68},"/* This gradient is NOT affected */",[37,4655,312],{"class":43},[37,4657,4658,4660,4662],{"class":39,"line":72},[37,4659,75],{"class":43},[37,4661,78],{"class":291},[37,4663,113],{"class":43},[37,4665,4666],{"class":39,"line":116},[37,4667,120],{"emptyLinePlaceholder":119},[37,4669,4670,4672,4675],{"class":39,"line":123},[37,4671,306],{"class":43},[37,4673,4674],{"class":68},"/* Only the Circle inside has glass tiles applied */",[37,4676,312],{"class":43},[37,4678,4679,4681,4683],{"class":39,"line":129},[37,4680,75],{"class":43},[37,4682,4161],{"class":291},[37,4684,62],{"class":43},[37,4686,4687,4689,4691,4693,4695,4697,4699,4701,4703,4705],{"class":39,"line":171},[37,4688,174],{"class":43},[37,4690,3293],{"class":291},[37,4692,2662],{"class":51},[37,4694,55],{"class":297},[37,4696,3300],{"class":58},[37,4698,4138],{"class":51},[37,4700,55],{"class":297},[37,4702,326],{"class":43},[37,4704,4235],{"class":291},[37,4706,484],{"class":43},[37,4708,4709,4711,4713],{"class":39,"line":221},[37,4710,224],{"class":43},[37,4712,4161],{"class":291},[37,4714,62],{"class":43},[37,4716,4717,4719,4721],{"class":39,"line":231},[37,4718,273],{"class":43},[37,4720,48],{"class":291},[37,4722,62],{"class":43},[27,4724,4725],{"className":543,"code":4636,"language":545,"meta":32,"style":32},[34,4726,4727,4735,4743,4751,4755,4763,4771,4793,4801],{"__ignoreMap":32},[37,4728,4729,4731,4733],{"class":39,"line":40},[37,4730,44],{"class":43},[37,4732,48],{"class":291},[37,4734,62],{"class":43},[37,4736,4737,4739,4741],{"class":39,"line":65},[37,4738,306],{"class":43},[37,4740,4653],{"class":68},[37,4742,312],{"class":43},[37,4744,4745,4747,4749],{"class":39,"line":72},[37,4746,75],{"class":43},[37,4748,78],{"class":291},[37,4750,113],{"class":43},[37,4752,4753],{"class":39,"line":116},[37,4754,120],{"emptyLinePlaceholder":119},[37,4756,4757,4759,4761],{"class":39,"line":123},[37,4758,306],{"class":43},[37,4760,4674],{"class":68},[37,4762,312],{"class":43},[37,4764,4765,4767,4769],{"class":39,"line":129},[37,4766,75],{"class":43},[37,4768,4161],{"class":291},[37,4770,62],{"class":43},[37,4772,4773,4775,4777,4779,4781,4783,4785,4787,4789,4791],{"class":39,"line":171},[37,4774,174],{"class":43},[37,4776,3293],{"class":291},[37,4778,2662],{"class":51},[37,4780,55],{"class":297},[37,4782,3300],{"class":58},[37,4784,4138],{"class":51},[37,4786,55],{"class":297},[37,4788,326],{"class":43},[37,4790,4235],{"class":291},[37,4792,484],{"class":43},[37,4794,4795,4797,4799],{"class":39,"line":221},[37,4796,224],{"class":43},[37,4798,4161],{"class":291},[37,4800,62],{"class":43},[37,4802,4803,4805,4807],{"class":39,"line":231},[37,4804,273],{"class":43},[37,4806,48],{"class":291},[37,4808,62],{"class":43},[27,4810,4811],{"className":543,"code":4636,"language":545,"meta":32,"style":32},[34,4812,4813,4821,4829,4837,4841,4849,4857,4879,4887],{"__ignoreMap":32},[37,4814,4815,4817,4819],{"class":39,"line":40},[37,4816,44],{"class":43},[37,4818,48],{"class":291},[37,4820,62],{"class":43},[37,4822,4823,4825,4827],{"class":39,"line":65},[37,4824,306],{"class":43},[37,4826,4653],{"class":68},[37,4828,312],{"class":43},[37,4830,4831,4833,4835],{"class":39,"line":72},[37,4832,75],{"class":43},[37,4834,78],{"class":291},[37,4836,113],{"class":43},[37,4838,4839],{"class":39,"line":116},[37,4840,120],{"emptyLinePlaceholder":119},[37,4842,4843,4845,4847],{"class":39,"line":123},[37,4844,306],{"class":43},[37,4846,4674],{"class":68},[37,4848,312],{"class":43},[37,4850,4851,4853,4855],{"class":39,"line":129},[37,4852,75],{"class":43},[37,4854,4161],{"class":291},[37,4856,62],{"class":43},[37,4858,4859,4861,4863,4865,4867,4869,4871,4873,4875,4877],{"class":39,"line":171},[37,4860,174],{"class":43},[37,4862,3293],{"class":291},[37,4864,2662],{"class":51},[37,4866,55],{"class":297},[37,4868,3300],{"class":58},[37,4870,4138],{"class":51},[37,4872,55],{"class":297},[37,4874,326],{"class":43},[37,4876,4235],{"class":291},[37,4878,484],{"class":43},[37,4880,4881,4883,4885],{"class":39,"line":221},[37,4882,224],{"class":43},[37,4884,4161],{"class":291},[37,4886,62],{"class":43},[37,4888,4889,4891,4893],{"class":39,"line":231},[37,4890,273],{"class":43},[37,4892,48],{"class":291},[37,4894,62],{"class":43},[27,4896,4898],{"className":987,"code":4897,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n // This gradient is NOT affected\n { type: 'LinearGradient', props: {} },\n // Only the Circle inside has glass tiles applied\n { type: 'GlassTiles', props: {}, children: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } }\n ]}\n ]\n})\n",[34,4899,4900,4914,4918,4923,4931,4936,4945,4962,4967,4971],{"__ignoreMap":32},[37,4901,4902,4904,4906,4908,4910,4912],{"class":39,"line":40},[37,4903,2809],{"class":297},[37,4905,2812],{"class":291},[37,4907,2815],{"class":297},[37,4909,2818],{"class":297},[37,4911,999],{"class":51},[37,4913,1002],{"class":43},[37,4915,4916],{"class":39,"line":65},[37,4917,1007],{"class":43},[37,4919,4920],{"class":39,"line":72},[37,4921,4922],{"class":68}," // This gradient is NOT affected\n",[37,4924,4925,4927,4929],{"class":39,"line":116},[37,4926,1017],{"class":43},[37,4928,1020],{"class":58},[37,4930,4483],{"class":43},[37,4932,4933],{"class":39,"line":123},[37,4934,4935],{"class":68}," // Only the Circle inside has glass tiles applied\n",[37,4937,4938,4940,4942],{"class":39,"line":129},[37,4939,1017],{"class":43},[37,4941,4517],{"class":58},[37,4943,4944],{"class":43},", props: {}, children: [\n",[37,4946,4947,4950,4952,4954,4956,4958,4960],{"class":39,"line":171},[37,4948,4949],{"class":43}," { type: ",[37,4951,3941],{"class":58},[37,4953,2845],{"class":43},[37,4955,3952],{"class":58},[37,4957,4501],{"class":43},[37,4959,4235],{"class":291},[37,4961,1142],{"class":43},[37,4963,4964],{"class":39,"line":221},[37,4965,4966],{"class":43}," ]}\n",[37,4968,4969],{"class":39,"line":231},[37,4970,1194],{"class":43},[37,4972,4973],{"class":39,"line":236},[37,4974,1200],{"class":43},[19,4976],{":preset":4977},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,4979,4980,4981,4983,4984,4986],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[34,4982,78],{},") don't accept children, whereas components that apply effects (such as ",[34,4985,4161],{},") do. The component reference in this documentation shows if the particular component accepts children.",[23,4988,4989,5093,5207,5317,5427],{":tabs":25},[27,4990,4992],{"className":29,"code":4991,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003C!-- Unaffected -->\n \u003CLinearGradient />\n\n \u003C!-- Nested effects apply only to Circle -->\n \u003CGridDistortion radius=\"2\">\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" />\n \u003C/Halftone>\n \u003C/GridDistortion>\n\u003C/Shader>\n",[34,4993,4994,5002,5007,5015,5019,5024,5040,5048,5068,5077,5085],{"__ignoreMap":32},[37,4995,4996,4998,5000],{"class":39,"line":40},[37,4997,44],{"class":43},[37,4999,48],{"class":47},[37,5001,62],{"class":43},[37,5003,5004],{"class":39,"line":65},[37,5005,5006],{"class":68}," \u003C!-- Unaffected -->\n",[37,5008,5009,5011,5013],{"class":39,"line":72},[37,5010,75],{"class":43},[37,5012,78],{"class":47},[37,5014,113],{"class":43},[37,5016,5017],{"class":39,"line":116},[37,5018,120],{"emptyLinePlaceholder":119},[37,5020,5021],{"class":39,"line":123},[37,5022,5023],{"class":68}," \u003C!-- Nested effects apply only to Circle -->\n",[37,5025,5026,5028,5031,5033,5035,5038],{"class":39,"line":129},[37,5027,75],{"class":43},[37,5029,5030],{"class":47},"GridDistortion",[37,5032,4138],{"class":51},[37,5034,55],{"class":43},[37,5036,5037],{"class":58},"\"2\"",[37,5039,62],{"class":43},[37,5041,5042,5044,5046],{"class":39,"line":171},[37,5043,174],{"class":43},[37,5045,4161],{"class":47},[37,5047,62],{"class":43},[37,5049,5050,5052,5054,5056,5058,5060,5062,5064,5066],{"class":39,"line":221},[37,5051,3549],{"class":43},[37,5053,3293],{"class":47},[37,5055,2662],{"class":51},[37,5057,55],{"class":43},[37,5059,3300],{"class":58},[37,5061,4138],{"class":51},[37,5063,55],{"class":43},[37,5065,4143],{"class":58},[37,5067,113],{"class":43},[37,5069,5070,5072,5075],{"class":39,"line":231},[37,5071,3564],{"class":43},[37,5073,5074],{"class":47},"Halftone",[37,5076,62],{"class":43},[37,5078,5079,5081,5083],{"class":39,"line":236},[37,5080,224],{"class":43},[37,5082,5030],{"class":47},[37,5084,62],{"class":43},[37,5086,5087,5089,5091],{"class":39,"line":242},[37,5088,273],{"class":43},[37,5090,48],{"class":47},[37,5092,62],{"class":43},[27,5094,5096],{"className":280,"code":5095,"language":282,"meta":32,"style":32},"\u003CShader>\n {/* Unaffected */}\n \u003CLinearGradient />\n\n {/* Nested effects apply only to Circle */}\n \u003CGridDistortion radius={2}>\n \u003CHalftone>\n \u003CCircle color=\"#ff0088\" radius={0.8} />\n \u003C/Halftone>\n \u003C/GridDistortion>\n\u003C/Shader>\n",[34,5097,5098,5106,5115,5123,5127,5136,5153,5161,5183,5191,5199],{"__ignoreMap":32},[37,5099,5100,5102,5104],{"class":39,"line":40},[37,5101,44],{"class":43},[37,5103,48],{"class":291},[37,5105,62],{"class":43},[37,5107,5108,5110,5113],{"class":39,"line":65},[37,5109,306],{"class":43},[37,5111,5112],{"class":68},"/* Unaffected */",[37,5114,312],{"class":43},[37,5116,5117,5119,5121],{"class":39,"line":72},[37,5118,75],{"class":43},[37,5120,78],{"class":291},[37,5122,113],{"class":43},[37,5124,5125],{"class":39,"line":116},[37,5126,120],{"emptyLinePlaceholder":119},[37,5128,5129,5131,5134],{"class":39,"line":123},[37,5130,306],{"class":43},[37,5132,5133],{"class":68},"/* Nested effects apply only to Circle */",[37,5135,312],{"class":43},[37,5137,5138,5140,5142,5144,5146,5148,5151],{"class":39,"line":129},[37,5139,75],{"class":43},[37,5141,5030],{"class":291},[37,5143,4138],{"class":51},[37,5145,55],{"class":297},[37,5147,326],{"class":43},[37,5149,5150],{"class":291},"2",[37,5152,417],{"class":43},[37,5154,5155,5157,5159],{"class":39,"line":171},[37,5156,174],{"class":43},[37,5158,5074],{"class":291},[37,5160,62],{"class":43},[37,5162,5163,5165,5167,5169,5171,5173,5175,5177,5179,5181],{"class":39,"line":221},[37,5164,3549],{"class":43},[37,5166,3293],{"class":291},[37,5168,2662],{"class":51},[37,5170,55],{"class":297},[37,5172,3300],{"class":58},[37,5174,4138],{"class":51},[37,5176,55],{"class":297},[37,5178,326],{"class":43},[37,5180,4235],{"class":291},[37,5182,484],{"class":43},[37,5184,5185,5187,5189],{"class":39,"line":231},[37,5186,3564],{"class":43},[37,5188,5074],{"class":291},[37,5190,62],{"class":43},[37,5192,5193,5195,5197],{"class":39,"line":236},[37,5194,224],{"class":43},[37,5196,5030],{"class":291},[37,5198,62],{"class":43},[37,5200,5201,5203,5205],{"class":39,"line":242},[37,5202,273],{"class":43},[37,5204,48],{"class":291},[37,5206,62],{"class":43},[27,5208,5209],{"className":543,"code":5095,"language":545,"meta":32,"style":32},[34,5210,5211,5219,5227,5235,5239,5247,5263,5271,5293,5301,5309],{"__ignoreMap":32},[37,5212,5213,5215,5217],{"class":39,"line":40},[37,5214,44],{"class":43},[37,5216,48],{"class":291},[37,5218,62],{"class":43},[37,5220,5221,5223,5225],{"class":39,"line":65},[37,5222,306],{"class":43},[37,5224,5112],{"class":68},[37,5226,312],{"class":43},[37,5228,5229,5231,5233],{"class":39,"line":72},[37,5230,75],{"class":43},[37,5232,78],{"class":291},[37,5234,113],{"class":43},[37,5236,5237],{"class":39,"line":116},[37,5238,120],{"emptyLinePlaceholder":119},[37,5240,5241,5243,5245],{"class":39,"line":123},[37,5242,306],{"class":43},[37,5244,5133],{"class":68},[37,5246,312],{"class":43},[37,5248,5249,5251,5253,5255,5257,5259,5261],{"class":39,"line":129},[37,5250,75],{"class":43},[37,5252,5030],{"class":291},[37,5254,4138],{"class":51},[37,5256,55],{"class":297},[37,5258,326],{"class":43},[37,5260,5150],{"class":291},[37,5262,417],{"class":43},[37,5264,5265,5267,5269],{"class":39,"line":171},[37,5266,174],{"class":43},[37,5268,5074],{"class":291},[37,5270,62],{"class":43},[37,5272,5273,5275,5277,5279,5281,5283,5285,5287,5289,5291],{"class":39,"line":221},[37,5274,3549],{"class":43},[37,5276,3293],{"class":291},[37,5278,2662],{"class":51},[37,5280,55],{"class":297},[37,5282,3300],{"class":58},[37,5284,4138],{"class":51},[37,5286,55],{"class":297},[37,5288,326],{"class":43},[37,5290,4235],{"class":291},[37,5292,484],{"class":43},[37,5294,5295,5297,5299],{"class":39,"line":231},[37,5296,3564],{"class":43},[37,5298,5074],{"class":291},[37,5300,62],{"class":43},[37,5302,5303,5305,5307],{"class":39,"line":236},[37,5304,224],{"class":43},[37,5306,5030],{"class":291},[37,5308,62],{"class":43},[37,5310,5311,5313,5315],{"class":39,"line":242},[37,5312,273],{"class":43},[37,5314,48],{"class":291},[37,5316,62],{"class":43},[27,5318,5319],{"className":543,"code":5095,"language":545,"meta":32,"style":32},[34,5320,5321,5329,5337,5345,5349,5357,5373,5381,5403,5411,5419],{"__ignoreMap":32},[37,5322,5323,5325,5327],{"class":39,"line":40},[37,5324,44],{"class":43},[37,5326,48],{"class":291},[37,5328,62],{"class":43},[37,5330,5331,5333,5335],{"class":39,"line":65},[37,5332,306],{"class":43},[37,5334,5112],{"class":68},[37,5336,312],{"class":43},[37,5338,5339,5341,5343],{"class":39,"line":72},[37,5340,75],{"class":43},[37,5342,78],{"class":291},[37,5344,113],{"class":43},[37,5346,5347],{"class":39,"line":116},[37,5348,120],{"emptyLinePlaceholder":119},[37,5350,5351,5353,5355],{"class":39,"line":123},[37,5352,306],{"class":43},[37,5354,5133],{"class":68},[37,5356,312],{"class":43},[37,5358,5359,5361,5363,5365,5367,5369,5371],{"class":39,"line":129},[37,5360,75],{"class":43},[37,5362,5030],{"class":291},[37,5364,4138],{"class":51},[37,5366,55],{"class":297},[37,5368,326],{"class":43},[37,5370,5150],{"class":291},[37,5372,417],{"class":43},[37,5374,5375,5377,5379],{"class":39,"line":171},[37,5376,174],{"class":43},[37,5378,5074],{"class":291},[37,5380,62],{"class":43},[37,5382,5383,5385,5387,5389,5391,5393,5395,5397,5399,5401],{"class":39,"line":221},[37,5384,3549],{"class":43},[37,5386,3293],{"class":291},[37,5388,2662],{"class":51},[37,5390,55],{"class":297},[37,5392,3300],{"class":58},[37,5394,4138],{"class":51},[37,5396,55],{"class":297},[37,5398,326],{"class":43},[37,5400,4235],{"class":291},[37,5402,484],{"class":43},[37,5404,5405,5407,5409],{"class":39,"line":231},[37,5406,3564],{"class":43},[37,5408,5074],{"class":291},[37,5410,62],{"class":43},[37,5412,5413,5415,5417],{"class":39,"line":236},[37,5414,224],{"class":43},[37,5416,5030],{"class":291},[37,5418,62],{"class":43},[37,5420,5421,5423,5425],{"class":39,"line":242},[37,5422,273],{"class":43},[37,5424,48],{"class":291},[37,5426,62],{"class":43},[27,5428,5430],{"className":987,"code":5429,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n // Unaffected\n { type: 'LinearGradient', props: {} },\n // Nested effects apply only to Circle\n { type: 'GridDistortion', props: { radius: 2 }, children: [\n { type: 'GlassTiles', props: {}, children: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8 } }\n ]}\n ]}\n ]\n})\n",[34,5431,5432,5446,5450,5455,5463,5468,5483,5491,5507,5512,5516,5520],{"__ignoreMap":32},[37,5433,5434,5436,5438,5440,5442,5444],{"class":39,"line":40},[37,5435,2809],{"class":297},[37,5437,2812],{"class":291},[37,5439,2815],{"class":297},[37,5441,2818],{"class":297},[37,5443,999],{"class":51},[37,5445,1002],{"class":43},[37,5447,5448],{"class":39,"line":65},[37,5449,1007],{"class":43},[37,5451,5452],{"class":39,"line":72},[37,5453,5454],{"class":68}," // Unaffected\n",[37,5456,5457,5459,5461],{"class":39,"line":116},[37,5458,1017],{"class":43},[37,5460,1020],{"class":58},[37,5462,4483],{"class":43},[37,5464,5465],{"class":39,"line":123},[37,5466,5467],{"class":68}," // Nested effects apply only to Circle\n",[37,5469,5470,5472,5475,5478,5480],{"class":39,"line":129},[37,5471,1017],{"class":43},[37,5473,5474],{"class":58},"'GridDistortion'",[37,5476,5477],{"class":43},", props: { radius: ",[37,5479,5150],{"class":291},[37,5481,5482],{"class":43}," }, children: [\n",[37,5484,5485,5487,5489],{"class":39,"line":171},[37,5486,4949],{"class":43},[37,5488,4517],{"class":58},[37,5490,4944],{"class":43},[37,5492,5493,5495,5497,5499,5501,5503,5505],{"class":39,"line":221},[37,5494,1111],{"class":43},[37,5496,3941],{"class":58},[37,5498,2845],{"class":43},[37,5500,3952],{"class":58},[37,5502,4501],{"class":43},[37,5504,4235],{"class":291},[37,5506,1142],{"class":43},[37,5508,5509],{"class":39,"line":231},[37,5510,5511],{"class":43}," ]}\n",[37,5513,5514],{"class":39,"line":236},[37,5515,4966],{"class":43},[37,5517,5518],{"class":39,"line":242},[37,5519,1194],{"class":43},[37,5521,5522],{"class":39,"line":270},[37,5523,1200],{"class":43},[19,5525],{":preset":5526},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[1311,5528,5529],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":32,"searchDepth":65,"depth":65,"links":5531},[5532,5533],{"id":4078,"depth":65,"text":4079},{"id":4533,"depth":65,"text":4534},"How to stack and nest components to create complex effects","layer-plus",{},{"title":2564,"description":5534},"docs/guide/2.composing-effects","OdgUhfcABoGzo0LND0YxKaS1qWVMT72Z7Zcf1g_C17k",{"id":5541,"title":5542,"body":5543,"category":8163,"description":8164,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":8165,"meta":8166,"navigation":119,"path":8167,"seo":8168,"stem":8169,"__hash__":8170},"guide/docs/guide/3.blending-masking.md","Blending & Masking",{"type":8,"value":5544,"toc":8153},[5545,5548,5551,5555,5566,5909,5912,5917,6014,6018,6021,6596,6599,6602,6616,6931,6934,6937,6941,6952,6974,6985,6989,7004,7010,7415,7418,7424,7428,7435,7469,8148,8151],[11,5546,5542],{"id":5547},"blending-masking",[15,5549,5550],{},"Beyond stacking and nesting, you have precise control over how components combine and interact. Blend modes determine how layers mix together, while masks let you selectively show or hide portions of your effects.",[1202,5552,5554],{"id":5553},"blend-modes","Blend Modes",[15,5556,5557,5558,5561,5562,5565],{},"Every component has a ",[34,5559,5560],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[34,5563,5564],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[23,5567,5568,5635,5708,5778,5848],{":tabs":25},[27,5569,5571],{"className":29,"code":5570,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n \u003C!-- Multiply darkens by multiplying colors -->\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" blendMode=\"multiply\" />\n\u003C/Shader>\n",[34,5572,5573,5581,5589,5593,5598,5627],{"__ignoreMap":32},[37,5574,5575,5577,5579],{"class":39,"line":40},[37,5576,44],{"class":43},[37,5578,48],{"class":47},[37,5580,62],{"class":43},[37,5582,5583,5585,5587],{"class":39,"line":65},[37,5584,75],{"class":43},[37,5586,78],{"class":47},[37,5588,113],{"class":43},[37,5590,5591],{"class":39,"line":72},[37,5592,120],{"emptyLinePlaceholder":119},[37,5594,5595],{"class":39,"line":116},[37,5596,5597],{"class":68}," \u003C!-- Multiply darkens by multiplying colors -->\n",[37,5599,5600,5602,5604,5606,5608,5610,5612,5614,5617,5620,5622,5625],{"class":39,"line":123},[37,5601,75],{"class":43},[37,5603,3293],{"class":47},[37,5605,2662],{"class":51},[37,5607,55],{"class":43},[37,5609,3300],{"class":58},[37,5611,4138],{"class":51},[37,5613,55],{"class":43},[37,5615,5616],{"class":58},"\"0.5\"",[37,5618,5619],{"class":51}," blendMode",[37,5621,55],{"class":43},[37,5623,5624],{"class":58},"\"multiply\"",[37,5626,113],{"class":43},[37,5628,5629,5631,5633],{"class":39,"line":129},[37,5630,273],{"class":43},[37,5632,48],{"class":47},[37,5634,62],{"class":43},[27,5636,5638],{"className":280,"code":5637,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n {/* Multiply darkens by multiplying colors */}\n \u003CCircle color=\"#ff0088\" radius={0.5} blendMode=\"multiply\" />\n\u003C/Shader>\n",[34,5639,5640,5648,5656,5660,5669,5700],{"__ignoreMap":32},[37,5641,5642,5644,5646],{"class":39,"line":40},[37,5643,44],{"class":43},[37,5645,48],{"class":291},[37,5647,62],{"class":43},[37,5649,5650,5652,5654],{"class":39,"line":65},[37,5651,75],{"class":43},[37,5653,78],{"class":291},[37,5655,113],{"class":43},[37,5657,5658],{"class":39,"line":72},[37,5659,120],{"emptyLinePlaceholder":119},[37,5661,5662,5664,5667],{"class":39,"line":116},[37,5663,306],{"class":43},[37,5665,5666],{"class":68},"/* Multiply darkens by multiplying colors */",[37,5668,312],{"class":43},[37,5670,5671,5673,5675,5677,5679,5681,5683,5685,5687,5690,5692,5694,5696,5698],{"class":39,"line":123},[37,5672,75],{"class":43},[37,5674,3293],{"class":291},[37,5676,2662],{"class":51},[37,5678,55],{"class":297},[37,5680,3300],{"class":58},[37,5682,4138],{"class":51},[37,5684,55],{"class":297},[37,5686,326],{"class":43},[37,5688,5689],{"class":291},"0.5",[37,5691,332],{"class":43},[37,5693,5560],{"class":51},[37,5695,55],{"class":297},[37,5697,5624],{"class":58},[37,5699,113],{"class":43},[37,5701,5702,5704,5706],{"class":39,"line":129},[37,5703,273],{"class":43},[37,5705,48],{"class":291},[37,5707,62],{"class":43},[27,5709,5710],{"className":543,"code":5637,"language":545,"meta":32,"style":32},[34,5711,5712,5720,5728,5732,5740,5770],{"__ignoreMap":32},[37,5713,5714,5716,5718],{"class":39,"line":40},[37,5715,44],{"class":43},[37,5717,48],{"class":291},[37,5719,62],{"class":43},[37,5721,5722,5724,5726],{"class":39,"line":65},[37,5723,75],{"class":43},[37,5725,78],{"class":291},[37,5727,113],{"class":43},[37,5729,5730],{"class":39,"line":72},[37,5731,120],{"emptyLinePlaceholder":119},[37,5733,5734,5736,5738],{"class":39,"line":116},[37,5735,306],{"class":43},[37,5737,5666],{"class":68},[37,5739,312],{"class":43},[37,5741,5742,5744,5746,5748,5750,5752,5754,5756,5758,5760,5762,5764,5766,5768],{"class":39,"line":123},[37,5743,75],{"class":43},[37,5745,3293],{"class":291},[37,5747,2662],{"class":51},[37,5749,55],{"class":297},[37,5751,3300],{"class":58},[37,5753,4138],{"class":51},[37,5755,55],{"class":297},[37,5757,326],{"class":43},[37,5759,5689],{"class":291},[37,5761,332],{"class":43},[37,5763,5560],{"class":51},[37,5765,55],{"class":297},[37,5767,5624],{"class":58},[37,5769,113],{"class":43},[37,5771,5772,5774,5776],{"class":39,"line":129},[37,5773,273],{"class":43},[37,5775,48],{"class":291},[37,5777,62],{"class":43},[27,5779,5780],{"className":543,"code":5637,"language":545,"meta":32,"style":32},[34,5781,5782,5790,5798,5802,5810,5840],{"__ignoreMap":32},[37,5783,5784,5786,5788],{"class":39,"line":40},[37,5785,44],{"class":43},[37,5787,48],{"class":291},[37,5789,62],{"class":43},[37,5791,5792,5794,5796],{"class":39,"line":65},[37,5793,75],{"class":43},[37,5795,78],{"class":291},[37,5797,113],{"class":43},[37,5799,5800],{"class":39,"line":72},[37,5801,120],{"emptyLinePlaceholder":119},[37,5803,5804,5806,5808],{"class":39,"line":116},[37,5805,306],{"class":43},[37,5807,5666],{"class":68},[37,5809,312],{"class":43},[37,5811,5812,5814,5816,5818,5820,5822,5824,5826,5828,5830,5832,5834,5836,5838],{"class":39,"line":123},[37,5813,75],{"class":43},[37,5815,3293],{"class":291},[37,5817,2662],{"class":51},[37,5819,55],{"class":297},[37,5821,3300],{"class":58},[37,5823,4138],{"class":51},[37,5825,55],{"class":297},[37,5827,326],{"class":43},[37,5829,5689],{"class":291},[37,5831,332],{"class":43},[37,5833,5560],{"class":51},[37,5835,55],{"class":297},[37,5837,5624],{"class":58},[37,5839,113],{"class":43},[37,5841,5842,5844,5846],{"class":39,"line":129},[37,5843,273],{"class":43},[37,5845,48],{"class":291},[37,5847,62],{"class":43},[27,5849,5851],{"className":987,"code":5850,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Circle', props: { color: '#ff0088', radius: 0.5, blendMode: 'multiply' } }\n ]\n})\n",[34,5852,5853,5867,5871,5879,5901,5905],{"__ignoreMap":32},[37,5854,5855,5857,5859,5861,5863,5865],{"class":39,"line":40},[37,5856,2809],{"class":297},[37,5858,2812],{"class":291},[37,5860,2815],{"class":297},[37,5862,2818],{"class":297},[37,5864,999],{"class":51},[37,5866,1002],{"class":43},[37,5868,5869],{"class":39,"line":65},[37,5870,1007],{"class":43},[37,5872,5873,5875,5877],{"class":39,"line":72},[37,5874,1017],{"class":43},[37,5876,1020],{"class":58},[37,5878,4483],{"class":43},[37,5880,5881,5883,5885,5887,5889,5891,5893,5896,5899],{"class":39,"line":116},[37,5882,1017],{"class":43},[37,5884,3941],{"class":58},[37,5886,2845],{"class":43},[37,5888,3952],{"class":58},[37,5890,4501],{"class":43},[37,5892,5689],{"class":291},[37,5894,5895],{"class":43},", blendMode: ",[37,5897,5898],{"class":58},"'multiply'",[37,5900,1142],{"class":43},[37,5902,5903],{"class":39,"line":123},[37,5904,1194],{"class":43},[37,5906,5907],{"class":39,"line":129},[37,5908,1200],{"class":43},[19,5910],{":preset":5911},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,5913,5914],{},[1306,5915,5916],{},"Available blend modes:",[2556,5918,5919,5927,5944,5961,5975,5986,6003],{},[2559,5920,5921,5924,5925],{},[1306,5922,5923],{},"Basic",": ",[34,5926,5564],{},[2559,5928,5929,5924,5932,2961,5935,2961,5938,2961,5941],{},[1306,5930,5931],{},"Darkening",[34,5933,5934],{},"multiply",[34,5936,5937],{},"darken",[34,5939,5940],{},"colorBurn",[34,5942,5943],{},"linearBurn",[2559,5945,5946,5924,5949,2961,5952,2961,5955,2961,5958],{},[1306,5947,5948],{},"Lightening",[34,5950,5951],{},"screen",[34,5953,5954],{},"lighten",[34,5956,5957],{},"colorDodge",[34,5959,5960],{},"linearDodge",[2559,5962,5963,5924,5966,2961,5969,2961,5972],{},[1306,5964,5965],{},"Contrast",[34,5967,5968],{},"overlay",[34,5970,5971],{},"softLight",[34,5973,5974],{},"hardLight",[2559,5976,5977,5924,5980,2961,5983],{},[1306,5978,5979],{},"Difference",[34,5981,5982],{},"difference",[34,5984,5985],{},"exclusion",[2559,5987,5988,5924,5991,2961,5994,2961,5997,2961,6000],{},[1306,5989,5990],{},"Color",[34,5992,5993],{},"hue",[34,5995,5996],{},"saturation",[34,5998,5999],{},"color",[34,6001,6002],{},"luminosity",[2559,6004,6005,5924,6008,2961,6011],{},[1306,6006,6007],{},"Color Space Blending",[34,6009,6010],{},"normal-oklab",[34,6012,6013],{},"normal-oklch",[3997,6015,6017],{"id":6016},"combining-blend-modes","Combining Blend Modes",[15,6019,6020],{},"Use different blend modes on multiple layers to create complex interactions:",[23,6022,6023,6128,6255,6375,6495],{":tabs":25},[27,6024,6026],{"className":29,"code":6025,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n \u003CCircle color=\"#00ffff\" radius=\"0.6\" :center=\"{ x: 0.4, y: 0.5 }\" blendMode=\"screen\" />\n \u003CCircle color=\"#ff00ff\" radius=\"0.6\" :center=\"{ x: 0.6, y: 0.5 }\" blendMode=\"difference\" />\n\u003C/Shader>\n",[34,6027,6028,6036,6044,6048,6085,6120],{"__ignoreMap":32},[37,6029,6030,6032,6034],{"class":39,"line":40},[37,6031,44],{"class":43},[37,6033,48],{"class":47},[37,6035,62],{"class":43},[37,6037,6038,6040,6042],{"class":39,"line":65},[37,6039,75],{"class":43},[37,6041,78],{"class":47},[37,6043,113],{"class":43},[37,6045,6046],{"class":39,"line":72},[37,6047,120],{"emptyLinePlaceholder":119},[37,6049,6050,6052,6054,6056,6058,6061,6063,6065,6068,6071,6073,6076,6078,6080,6083],{"class":39,"line":116},[37,6051,75],{"class":43},[37,6053,3293],{"class":47},[37,6055,2662],{"class":51},[37,6057,55],{"class":43},[37,6059,6060],{"class":58},"\"#00ffff\"",[37,6062,4138],{"class":51},[37,6064,55],{"class":43},[37,6066,6067],{"class":58},"\"0.6\"",[37,6069,6070],{"class":51}," :center",[37,6072,55],{"class":43},[37,6074,6075],{"class":58},"\"{ x: 0.4, y: 0.5 }\"",[37,6077,5619],{"class":51},[37,6079,55],{"class":43},[37,6081,6082],{"class":58},"\"screen\"",[37,6084,113],{"class":43},[37,6086,6087,6089,6091,6093,6095,6098,6100,6102,6104,6106,6108,6111,6113,6115,6118],{"class":39,"line":123},[37,6088,75],{"class":43},[37,6090,3293],{"class":47},[37,6092,2662],{"class":51},[37,6094,55],{"class":43},[37,6096,6097],{"class":58},"\"#ff00ff\"",[37,6099,4138],{"class":51},[37,6101,55],{"class":43},[37,6103,6067],{"class":58},[37,6105,6070],{"class":51},[37,6107,55],{"class":43},[37,6109,6110],{"class":58},"\"{ x: 0.6, y: 0.5 }\"",[37,6112,5619],{"class":51},[37,6114,55],{"class":43},[37,6116,6117],{"class":58},"\"difference\"",[37,6119,113],{"class":43},[37,6121,6122,6124,6126],{"class":39,"line":129},[37,6123,273],{"class":43},[37,6125,48],{"class":47},[37,6127,62],{"class":43},[27,6129,6131],{"className":280,"code":6130,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n \u003CCircle color=\"#00ffff\" radius={0.6} center={{ x: 0.4, y: 0.5 }} blendMode=\"screen\" />\n \u003CCircle color=\"#ff00ff\" radius={0.6} center={{ x: 0.6, y: 0.5 }} blendMode=\"difference\" />\n\u003C/Shader>\n",[34,6132,6133,6141,6149,6153,6203,6247],{"__ignoreMap":32},[37,6134,6135,6137,6139],{"class":39,"line":40},[37,6136,44],{"class":43},[37,6138,48],{"class":291},[37,6140,62],{"class":43},[37,6142,6143,6145,6147],{"class":39,"line":65},[37,6144,75],{"class":43},[37,6146,78],{"class":291},[37,6148,113],{"class":43},[37,6150,6151],{"class":39,"line":72},[37,6152,120],{"emptyLinePlaceholder":119},[37,6154,6155,6157,6159,6161,6163,6165,6167,6169,6171,6174,6176,6179,6181,6184,6187,6190,6192,6195,6197,6199,6201],{"class":39,"line":116},[37,6156,75],{"class":43},[37,6158,3293],{"class":291},[37,6160,2662],{"class":51},[37,6162,55],{"class":297},[37,6164,6060],{"class":58},[37,6166,4138],{"class":51},[37,6168,55],{"class":297},[37,6170,326],{"class":43},[37,6172,6173],{"class":291},"0.6",[37,6175,332],{"class":43},[37,6177,6178],{"class":51},"center",[37,6180,55],{"class":297},[37,6182,6183],{"class":43},"{{ x: ",[37,6185,6186],{"class":291},"0.4",[37,6188,6189],{"class":43},", y: ",[37,6191,5689],{"class":291},[37,6193,6194],{"class":43}," }} ",[37,6196,5560],{"class":51},[37,6198,55],{"class":297},[37,6200,6082],{"class":58},[37,6202,113],{"class":43},[37,6204,6205,6207,6209,6211,6213,6215,6217,6219,6221,6223,6225,6227,6229,6231,6233,6235,6237,6239,6241,6243,6245],{"class":39,"line":123},[37,6206,75],{"class":43},[37,6208,3293],{"class":291},[37,6210,2662],{"class":51},[37,6212,55],{"class":297},[37,6214,6097],{"class":58},[37,6216,4138],{"class":51},[37,6218,55],{"class":297},[37,6220,326],{"class":43},[37,6222,6173],{"class":291},[37,6224,332],{"class":43},[37,6226,6178],{"class":51},[37,6228,55],{"class":297},[37,6230,6183],{"class":43},[37,6232,6173],{"class":291},[37,6234,6189],{"class":43},[37,6236,5689],{"class":291},[37,6238,6194],{"class":43},[37,6240,5560],{"class":51},[37,6242,55],{"class":297},[37,6244,6117],{"class":58},[37,6246,113],{"class":43},[37,6248,6249,6251,6253],{"class":39,"line":129},[37,6250,273],{"class":43},[37,6252,48],{"class":291},[37,6254,62],{"class":43},[27,6256,6257],{"className":543,"code":6130,"language":545,"meta":32,"style":32},[34,6258,6259,6267,6275,6279,6323,6367],{"__ignoreMap":32},[37,6260,6261,6263,6265],{"class":39,"line":40},[37,6262,44],{"class":43},[37,6264,48],{"class":291},[37,6266,62],{"class":43},[37,6268,6269,6271,6273],{"class":39,"line":65},[37,6270,75],{"class":43},[37,6272,78],{"class":291},[37,6274,113],{"class":43},[37,6276,6277],{"class":39,"line":72},[37,6278,120],{"emptyLinePlaceholder":119},[37,6280,6281,6283,6285,6287,6289,6291,6293,6295,6297,6299,6301,6303,6305,6307,6309,6311,6313,6315,6317,6319,6321],{"class":39,"line":116},[37,6282,75],{"class":43},[37,6284,3293],{"class":291},[37,6286,2662],{"class":51},[37,6288,55],{"class":297},[37,6290,6060],{"class":58},[37,6292,4138],{"class":51},[37,6294,55],{"class":297},[37,6296,326],{"class":43},[37,6298,6173],{"class":291},[37,6300,332],{"class":43},[37,6302,6178],{"class":51},[37,6304,55],{"class":297},[37,6306,6183],{"class":43},[37,6308,6186],{"class":291},[37,6310,6189],{"class":43},[37,6312,5689],{"class":291},[37,6314,6194],{"class":43},[37,6316,5560],{"class":51},[37,6318,55],{"class":297},[37,6320,6082],{"class":58},[37,6322,113],{"class":43},[37,6324,6325,6327,6329,6331,6333,6335,6337,6339,6341,6343,6345,6347,6349,6351,6353,6355,6357,6359,6361,6363,6365],{"class":39,"line":123},[37,6326,75],{"class":43},[37,6328,3293],{"class":291},[37,6330,2662],{"class":51},[37,6332,55],{"class":297},[37,6334,6097],{"class":58},[37,6336,4138],{"class":51},[37,6338,55],{"class":297},[37,6340,326],{"class":43},[37,6342,6173],{"class":291},[37,6344,332],{"class":43},[37,6346,6178],{"class":51},[37,6348,55],{"class":297},[37,6350,6183],{"class":43},[37,6352,6173],{"class":291},[37,6354,6189],{"class":43},[37,6356,5689],{"class":291},[37,6358,6194],{"class":43},[37,6360,5560],{"class":51},[37,6362,55],{"class":297},[37,6364,6117],{"class":58},[37,6366,113],{"class":43},[37,6368,6369,6371,6373],{"class":39,"line":129},[37,6370,273],{"class":43},[37,6372,48],{"class":291},[37,6374,62],{"class":43},[27,6376,6377],{"className":543,"code":6130,"language":545,"meta":32,"style":32},[34,6378,6379,6387,6395,6399,6443,6487],{"__ignoreMap":32},[37,6380,6381,6383,6385],{"class":39,"line":40},[37,6382,44],{"class":43},[37,6384,48],{"class":291},[37,6386,62],{"class":43},[37,6388,6389,6391,6393],{"class":39,"line":65},[37,6390,75],{"class":43},[37,6392,78],{"class":291},[37,6394,113],{"class":43},[37,6396,6397],{"class":39,"line":72},[37,6398,120],{"emptyLinePlaceholder":119},[37,6400,6401,6403,6405,6407,6409,6411,6413,6415,6417,6419,6421,6423,6425,6427,6429,6431,6433,6435,6437,6439,6441],{"class":39,"line":116},[37,6402,75],{"class":43},[37,6404,3293],{"class":291},[37,6406,2662],{"class":51},[37,6408,55],{"class":297},[37,6410,6060],{"class":58},[37,6412,4138],{"class":51},[37,6414,55],{"class":297},[37,6416,326],{"class":43},[37,6418,6173],{"class":291},[37,6420,332],{"class":43},[37,6422,6178],{"class":51},[37,6424,55],{"class":297},[37,6426,6183],{"class":43},[37,6428,6186],{"class":291},[37,6430,6189],{"class":43},[37,6432,5689],{"class":291},[37,6434,6194],{"class":43},[37,6436,5560],{"class":51},[37,6438,55],{"class":297},[37,6440,6082],{"class":58},[37,6442,113],{"class":43},[37,6444,6445,6447,6449,6451,6453,6455,6457,6459,6461,6463,6465,6467,6469,6471,6473,6475,6477,6479,6481,6483,6485],{"class":39,"line":123},[37,6446,75],{"class":43},[37,6448,3293],{"class":291},[37,6450,2662],{"class":51},[37,6452,55],{"class":297},[37,6454,6097],{"class":58},[37,6456,4138],{"class":51},[37,6458,55],{"class":297},[37,6460,326],{"class":43},[37,6462,6173],{"class":291},[37,6464,332],{"class":43},[37,6466,6178],{"class":51},[37,6468,55],{"class":297},[37,6470,6183],{"class":43},[37,6472,6173],{"class":291},[37,6474,6189],{"class":43},[37,6476,5689],{"class":291},[37,6478,6194],{"class":43},[37,6480,5560],{"class":51},[37,6482,55],{"class":297},[37,6484,6117],{"class":58},[37,6486,113],{"class":43},[37,6488,6489,6491,6493],{"class":39,"line":129},[37,6490,273],{"class":43},[37,6492,48],{"class":291},[37,6494,62],{"class":43},[27,6496,6498],{"className":987,"code":6497,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Circle', props: { color: '#00ffff', radius: 0.6, center: { x: 0.4, y: 0.5 }, blendMode: 'screen' } },\n { type: 'Circle', props: { color: '#ff00ff', radius: 0.6, center: { x: 0.6, y: 0.5 }, blendMode: 'difference' } }\n ]\n})\n",[34,6499,6500,6514,6518,6526,6558,6588,6592],{"__ignoreMap":32},[37,6501,6502,6504,6506,6508,6510,6512],{"class":39,"line":40},[37,6503,2809],{"class":297},[37,6505,2812],{"class":291},[37,6507,2815],{"class":297},[37,6509,2818],{"class":297},[37,6511,999],{"class":51},[37,6513,1002],{"class":43},[37,6515,6516],{"class":39,"line":65},[37,6517,1007],{"class":43},[37,6519,6520,6522,6524],{"class":39,"line":72},[37,6521,1017],{"class":43},[37,6523,1020],{"class":58},[37,6525,4483],{"class":43},[37,6527,6528,6530,6532,6534,6537,6539,6541,6544,6546,6548,6550,6553,6556],{"class":39,"line":116},[37,6529,1017],{"class":43},[37,6531,3941],{"class":58},[37,6533,2845],{"class":43},[37,6535,6536],{"class":58},"'#00ffff'",[37,6538,4501],{"class":43},[37,6540,6173],{"class":291},[37,6542,6543],{"class":43},", center: { x: ",[37,6545,6186],{"class":291},[37,6547,6189],{"class":43},[37,6549,5689],{"class":291},[37,6551,6552],{"class":43}," }, blendMode: ",[37,6554,6555],{"class":58},"'screen'",[37,6557,1046],{"class":43},[37,6559,6560,6562,6564,6566,6569,6571,6573,6575,6577,6579,6581,6583,6586],{"class":39,"line":123},[37,6561,1017],{"class":43},[37,6563,3941],{"class":58},[37,6565,2845],{"class":43},[37,6567,6568],{"class":58},"'#ff00ff'",[37,6570,4501],{"class":43},[37,6572,6173],{"class":291},[37,6574,6543],{"class":43},[37,6576,6173],{"class":291},[37,6578,6189],{"class":43},[37,6580,5689],{"class":291},[37,6582,6552],{"class":43},[37,6584,6585],{"class":58},"'difference'",[37,6587,1142],{"class":43},[37,6589,6590],{"class":39,"line":129},[37,6591,1194],{"class":43},[37,6593,6594],{"class":39,"line":171},[37,6595,1200],{"class":43},[19,6597],{":preset":6598},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#00ffff\",\"radius\":0.6,\"center\":{\"x\":0.4,\"y\":0.5},\"blendMode\":\"screen\"}},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff00ff\",\"radius\":0.6,\"center\":{\"x\":0.6,\"y\":0.5},\"blendMode\":\"difference\"}}]}",[1202,6600,6601],{"id":3656},"Opacity",[15,6603,6604,6605,6607,6608,6611,6612,6615],{},"Control layer transparency with the ",[34,6606,3656],{}," prop. Values range from ",[34,6609,6610],{},"0"," (fully transparent) to ",[34,6613,6614],{},"1"," (fully opaque):",[23,6617,6618,6678,6743,6807,6871],{":tabs":25},[27,6619,6621],{"className":29,"code":6620,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" opacity=\"0.5\" />\n\u003C/Shader>\n",[34,6622,6623,6631,6639,6643,6670],{"__ignoreMap":32},[37,6624,6625,6627,6629],{"class":39,"line":40},[37,6626,44],{"class":43},[37,6628,48],{"class":47},[37,6630,62],{"class":43},[37,6632,6633,6635,6637],{"class":39,"line":65},[37,6634,75],{"class":43},[37,6636,78],{"class":47},[37,6638,113],{"class":43},[37,6640,6641],{"class":39,"line":72},[37,6642,120],{"emptyLinePlaceholder":119},[37,6644,6645,6647,6649,6651,6653,6655,6657,6659,6661,6664,6666,6668],{"class":39,"line":116},[37,6646,75],{"class":43},[37,6648,3293],{"class":47},[37,6650,2662],{"class":51},[37,6652,55],{"class":43},[37,6654,3300],{"class":58},[37,6656,4138],{"class":51},[37,6658,55],{"class":43},[37,6660,4143],{"class":58},[37,6662,6663],{"class":51}," opacity",[37,6665,55],{"class":43},[37,6667,5616],{"class":58},[37,6669,113],{"class":43},[37,6671,6672,6674,6676],{"class":39,"line":123},[37,6673,273],{"class":43},[37,6675,48],{"class":47},[37,6677,62],{"class":43},[27,6679,6681],{"className":280,"code":6680,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n \u003CCircle color=\"#ff0088\" radius={0.8} opacity={0.5} />\n\u003C/Shader>\n",[34,6682,6683,6691,6699,6703,6735],{"__ignoreMap":32},[37,6684,6685,6687,6689],{"class":39,"line":40},[37,6686,44],{"class":43},[37,6688,48],{"class":291},[37,6690,62],{"class":43},[37,6692,6693,6695,6697],{"class":39,"line":65},[37,6694,75],{"class":43},[37,6696,78],{"class":291},[37,6698,113],{"class":43},[37,6700,6701],{"class":39,"line":72},[37,6702,120],{"emptyLinePlaceholder":119},[37,6704,6705,6707,6709,6711,6713,6715,6717,6719,6721,6723,6725,6727,6729,6731,6733],{"class":39,"line":116},[37,6706,75],{"class":43},[37,6708,3293],{"class":291},[37,6710,2662],{"class":51},[37,6712,55],{"class":297},[37,6714,3300],{"class":58},[37,6716,4138],{"class":51},[37,6718,55],{"class":297},[37,6720,326],{"class":43},[37,6722,4235],{"class":291},[37,6724,332],{"class":43},[37,6726,3656],{"class":51},[37,6728,55],{"class":297},[37,6730,326],{"class":43},[37,6732,5689],{"class":291},[37,6734,484],{"class":43},[37,6736,6737,6739,6741],{"class":39,"line":123},[37,6738,273],{"class":43},[37,6740,48],{"class":291},[37,6742,62],{"class":43},[27,6744,6745],{"className":543,"code":6680,"language":545,"meta":32,"style":32},[34,6746,6747,6755,6763,6767,6799],{"__ignoreMap":32},[37,6748,6749,6751,6753],{"class":39,"line":40},[37,6750,44],{"class":43},[37,6752,48],{"class":291},[37,6754,62],{"class":43},[37,6756,6757,6759,6761],{"class":39,"line":65},[37,6758,75],{"class":43},[37,6760,78],{"class":291},[37,6762,113],{"class":43},[37,6764,6765],{"class":39,"line":72},[37,6766,120],{"emptyLinePlaceholder":119},[37,6768,6769,6771,6773,6775,6777,6779,6781,6783,6785,6787,6789,6791,6793,6795,6797],{"class":39,"line":116},[37,6770,75],{"class":43},[37,6772,3293],{"class":291},[37,6774,2662],{"class":51},[37,6776,55],{"class":297},[37,6778,3300],{"class":58},[37,6780,4138],{"class":51},[37,6782,55],{"class":297},[37,6784,326],{"class":43},[37,6786,4235],{"class":291},[37,6788,332],{"class":43},[37,6790,3656],{"class":51},[37,6792,55],{"class":297},[37,6794,326],{"class":43},[37,6796,5689],{"class":291},[37,6798,484],{"class":43},[37,6800,6801,6803,6805],{"class":39,"line":123},[37,6802,273],{"class":43},[37,6804,48],{"class":291},[37,6806,62],{"class":43},[27,6808,6809],{"className":543,"code":6680,"language":545,"meta":32,"style":32},[34,6810,6811,6819,6827,6831,6863],{"__ignoreMap":32},[37,6812,6813,6815,6817],{"class":39,"line":40},[37,6814,44],{"class":43},[37,6816,48],{"class":291},[37,6818,62],{"class":43},[37,6820,6821,6823,6825],{"class":39,"line":65},[37,6822,75],{"class":43},[37,6824,78],{"class":291},[37,6826,113],{"class":43},[37,6828,6829],{"class":39,"line":72},[37,6830,120],{"emptyLinePlaceholder":119},[37,6832,6833,6835,6837,6839,6841,6843,6845,6847,6849,6851,6853,6855,6857,6859,6861],{"class":39,"line":116},[37,6834,75],{"class":43},[37,6836,3293],{"class":291},[37,6838,2662],{"class":51},[37,6840,55],{"class":297},[37,6842,3300],{"class":58},[37,6844,4138],{"class":51},[37,6846,55],{"class":297},[37,6848,326],{"class":43},[37,6850,4235],{"class":291},[37,6852,332],{"class":43},[37,6854,3656],{"class":51},[37,6856,55],{"class":297},[37,6858,326],{"class":43},[37,6860,5689],{"class":291},[37,6862,484],{"class":43},[37,6864,6865,6867,6869],{"class":39,"line":123},[37,6866,273],{"class":43},[37,6868,48],{"class":291},[37,6870,62],{"class":43},[27,6872,6874],{"className":987,"code":6873,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8, opacity: 0.5 } }\n ]\n})\n",[34,6875,6876,6890,6894,6902,6923,6927],{"__ignoreMap":32},[37,6877,6878,6880,6882,6884,6886,6888],{"class":39,"line":40},[37,6879,2809],{"class":297},[37,6881,2812],{"class":291},[37,6883,2815],{"class":297},[37,6885,2818],{"class":297},[37,6887,999],{"class":51},[37,6889,1002],{"class":43},[37,6891,6892],{"class":39,"line":65},[37,6893,1007],{"class":43},[37,6895,6896,6898,6900],{"class":39,"line":72},[37,6897,1017],{"class":43},[37,6899,1020],{"class":58},[37,6901,4483],{"class":43},[37,6903,6904,6906,6908,6910,6912,6914,6916,6919,6921],{"class":39,"line":116},[37,6905,1017],{"class":43},[37,6907,3941],{"class":58},[37,6909,2845],{"class":43},[37,6911,3952],{"class":58},[37,6913,4501],{"class":43},[37,6915,4235],{"class":291},[37,6917,6918],{"class":43},", opacity: ",[37,6920,5689],{"class":291},[37,6922,1142],{"class":43},[37,6924,6925],{"class":39,"line":123},[37,6926,1194],{"class":43},[37,6928,6929],{"class":39,"line":129},[37,6930,1200],{"class":43},[19,6932],{":preset":6933},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,6935,6936],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[1202,6938,6940],{"id":6939},"visibility","Visibility",[15,6942,5557,6943,6945,6946,6948,6949,6951],{},[34,6944,3447],{}," prop that defaults to ",[34,6947,3076],{},". Setting it to ",[34,6950,390],{}," completely removes the component from the composition, as if it wasn't there at all:",[27,6953,6957],{"className":6954,"code":6955,"language":6956,"meta":32,"style":32},"language-vue shiki shiki-themes github-dark","\u003CCircle visible={false} />\n","vue",[34,6958,6959],{"__ignoreMap":32},[37,6960,6961,6963,6965,6967,6969,6972],{"class":39,"line":40},[37,6962,44],{"class":43},[37,6964,3293],{"class":47},[37,6966,383],{"class":51},[37,6968,55],{"class":43},[37,6970,6971],{"class":58},"{false}",[37,6973,113],{"class":43},[15,6975,6976,6977,6980,6981,6984],{},"This is different from ",[34,6978,6979],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[34,6982,6983],{},"visible={false}"," when you want a component to exist in the tree (perhaps as a mask source) but not appear in the final output.",[1202,6986,6988],{"id":6987},"masking","Masking",[15,6990,6991,6992,6995,6996,6999,7000,7003],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[34,6993,6994],{},"id"," property (",[34,6997,6998],{},"string",") and then set ",[34,7001,7002],{},"maskSource"," to that ID on another component to use it as a mask.",[15,7005,7006,7007,7009],{},"Masks typically have ",[34,7008,6983],{}," so they don't appear in the final output—they only control visibility of other components:",[23,7011,7012,7088,7177,7263,7349],{":tabs":25},[27,7013,7015],{"className":29,"code":7014,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003C!-- This circle acts as the mask -->\n \u003CCircle id=\"myMask\" radius=\"0.8\" :visible=\"false\" />\n\n \u003C!-- This gradient is masked by the circle -->\n \u003CLinearGradient maskSource=\"myMask\" />\n\u003C/Shader>\n",[34,7016,7017,7025,7030,7057,7061,7066,7080],{"__ignoreMap":32},[37,7018,7019,7021,7023],{"class":39,"line":40},[37,7020,44],{"class":43},[37,7022,48],{"class":47},[37,7024,62],{"class":43},[37,7026,7027],{"class":39,"line":65},[37,7028,7029],{"class":68}," \u003C!-- This circle acts as the mask -->\n",[37,7031,7032,7034,7036,7038,7040,7043,7045,7047,7049,7051,7053,7055],{"class":39,"line":72},[37,7033,75],{"class":43},[37,7035,3293],{"class":47},[37,7037,137],{"class":51},[37,7039,55],{"class":43},[37,7041,7042],{"class":58},"\"myMask\"",[37,7044,4138],{"class":51},[37,7046,55],{"class":43},[37,7048,4143],{"class":58},[37,7050,145],{"class":51},[37,7052,55],{"class":43},[37,7054,150],{"class":58},[37,7056,113],{"class":43},[37,7058,7059],{"class":39,"line":116},[37,7060,120],{"emptyLinePlaceholder":119},[37,7062,7063],{"class":39,"line":123},[37,7064,7065],{"class":68}," \u003C!-- This gradient is masked by the circle -->\n",[37,7067,7068,7070,7072,7074,7076,7078],{"class":39,"line":129},[37,7069,75],{"class":43},[37,7071,78],{"class":47},[37,7073,526],{"class":51},[37,7075,55],{"class":43},[37,7077,7042],{"class":58},[37,7079,113],{"class":43},[37,7081,7082,7084,7086],{"class":39,"line":171},[37,7083,273],{"class":43},[37,7085,48],{"class":47},[37,7087,62],{"class":43},[27,7089,7091],{"className":280,"code":7090,"language":282,"meta":32,"style":32},"\u003CShader>\n {/* This circle acts as the mask */}\n \u003CCircle id=\"myMask\" radius={0.8} visible={false} />\n\n {/* This gradient is masked by the circle */}\n \u003CLinearGradient maskSource=\"myMask\" />\n\u003C/Shader>\n",[34,7092,7093,7101,7110,7142,7146,7155,7169],{"__ignoreMap":32},[37,7094,7095,7097,7099],{"class":39,"line":40},[37,7096,44],{"class":43},[37,7098,48],{"class":291},[37,7100,62],{"class":43},[37,7102,7103,7105,7108],{"class":39,"line":65},[37,7104,306],{"class":43},[37,7106,7107],{"class":68},"/* This circle acts as the mask */",[37,7109,312],{"class":43},[37,7111,7112,7114,7116,7118,7120,7122,7124,7126,7128,7130,7132,7134,7136,7138,7140],{"class":39,"line":72},[37,7113,75],{"class":43},[37,7115,3293],{"class":291},[37,7117,137],{"class":51},[37,7119,55],{"class":297},[37,7121,7042],{"class":58},[37,7123,4138],{"class":51},[37,7125,55],{"class":297},[37,7127,326],{"class":43},[37,7129,4235],{"class":291},[37,7131,332],{"class":43},[37,7133,3447],{"class":51},[37,7135,55],{"class":297},[37,7137,326],{"class":43},[37,7139,390],{"class":291},[37,7141,484],{"class":43},[37,7143,7144],{"class":39,"line":116},[37,7145,120],{"emptyLinePlaceholder":119},[37,7147,7148,7150,7153],{"class":39,"line":123},[37,7149,306],{"class":43},[37,7151,7152],{"class":68},"/* This gradient is masked by the circle */",[37,7154,312],{"class":43},[37,7156,7157,7159,7161,7163,7165,7167],{"class":39,"line":129},[37,7158,75],{"class":43},[37,7160,78],{"class":291},[37,7162,526],{"class":51},[37,7164,55],{"class":297},[37,7166,7042],{"class":58},[37,7168,113],{"class":43},[37,7170,7171,7173,7175],{"class":39,"line":171},[37,7172,273],{"class":43},[37,7174,48],{"class":291},[37,7176,62],{"class":43},[27,7178,7179],{"className":543,"code":7090,"language":545,"meta":32,"style":32},[34,7180,7181,7189,7197,7229,7233,7241,7255],{"__ignoreMap":32},[37,7182,7183,7185,7187],{"class":39,"line":40},[37,7184,44],{"class":43},[37,7186,48],{"class":291},[37,7188,62],{"class":43},[37,7190,7191,7193,7195],{"class":39,"line":65},[37,7192,306],{"class":43},[37,7194,7107],{"class":68},[37,7196,312],{"class":43},[37,7198,7199,7201,7203,7205,7207,7209,7211,7213,7215,7217,7219,7221,7223,7225,7227],{"class":39,"line":72},[37,7200,75],{"class":43},[37,7202,3293],{"class":291},[37,7204,137],{"class":51},[37,7206,55],{"class":297},[37,7208,7042],{"class":58},[37,7210,4138],{"class":51},[37,7212,55],{"class":297},[37,7214,326],{"class":43},[37,7216,4235],{"class":291},[37,7218,332],{"class":43},[37,7220,3447],{"class":51},[37,7222,55],{"class":297},[37,7224,326],{"class":43},[37,7226,390],{"class":291},[37,7228,484],{"class":43},[37,7230,7231],{"class":39,"line":116},[37,7232,120],{"emptyLinePlaceholder":119},[37,7234,7235,7237,7239],{"class":39,"line":123},[37,7236,306],{"class":43},[37,7238,7152],{"class":68},[37,7240,312],{"class":43},[37,7242,7243,7245,7247,7249,7251,7253],{"class":39,"line":129},[37,7244,75],{"class":43},[37,7246,78],{"class":291},[37,7248,526],{"class":51},[37,7250,55],{"class":297},[37,7252,7042],{"class":58},[37,7254,113],{"class":43},[37,7256,7257,7259,7261],{"class":39,"line":171},[37,7258,273],{"class":43},[37,7260,48],{"class":291},[37,7262,62],{"class":43},[27,7264,7265],{"className":543,"code":7090,"language":545,"meta":32,"style":32},[34,7266,7267,7275,7283,7315,7319,7327,7341],{"__ignoreMap":32},[37,7268,7269,7271,7273],{"class":39,"line":40},[37,7270,44],{"class":43},[37,7272,48],{"class":291},[37,7274,62],{"class":43},[37,7276,7277,7279,7281],{"class":39,"line":65},[37,7278,306],{"class":43},[37,7280,7107],{"class":68},[37,7282,312],{"class":43},[37,7284,7285,7287,7289,7291,7293,7295,7297,7299,7301,7303,7305,7307,7309,7311,7313],{"class":39,"line":72},[37,7286,75],{"class":43},[37,7288,3293],{"class":291},[37,7290,137],{"class":51},[37,7292,55],{"class":297},[37,7294,7042],{"class":58},[37,7296,4138],{"class":51},[37,7298,55],{"class":297},[37,7300,326],{"class":43},[37,7302,4235],{"class":291},[37,7304,332],{"class":43},[37,7306,3447],{"class":51},[37,7308,55],{"class":297},[37,7310,326],{"class":43},[37,7312,390],{"class":291},[37,7314,484],{"class":43},[37,7316,7317],{"class":39,"line":116},[37,7318,120],{"emptyLinePlaceholder":119},[37,7320,7321,7323,7325],{"class":39,"line":123},[37,7322,306],{"class":43},[37,7324,7152],{"class":68},[37,7326,312],{"class":43},[37,7328,7329,7331,7333,7335,7337,7339],{"class":39,"line":129},[37,7330,75],{"class":43},[37,7332,78],{"class":291},[37,7334,526],{"class":51},[37,7336,55],{"class":297},[37,7338,7042],{"class":58},[37,7340,113],{"class":43},[37,7342,7343,7345,7347],{"class":39,"line":171},[37,7344,273],{"class":43},[37,7346,48],{"class":291},[37,7348,62],{"class":43},[27,7350,7352],{"className":987,"code":7351,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'myMask', props: { radius: 0.8, visible: false } },\n { type: 'LinearGradient', props: { maskSource: 'myMask' } }\n ]\n})\n",[34,7353,7354,7368,7372,7394,7407,7411],{"__ignoreMap":32},[37,7355,7356,7358,7360,7362,7364,7366],{"class":39,"line":40},[37,7357,2809],{"class":297},[37,7359,2812],{"class":291},[37,7361,2815],{"class":297},[37,7363,2818],{"class":297},[37,7365,999],{"class":51},[37,7367,1002],{"class":43},[37,7369,7370],{"class":39,"line":65},[37,7371,1007],{"class":43},[37,7373,7374,7376,7378,7380,7383,7385,7387,7390,7392],{"class":39,"line":72},[37,7375,1017],{"class":43},[37,7377,3941],{"class":58},[37,7379,3944],{"class":43},[37,7381,7382],{"class":58},"'myMask'",[37,7384,5477],{"class":43},[37,7386,4235],{"class":291},[37,7388,7389],{"class":43},", visible: ",[37,7391,390],{"class":291},[37,7393,1046],{"class":43},[37,7395,7396,7398,7400,7403,7405],{"class":39,"line":116},[37,7397,1017],{"class":43},[37,7399,1020],{"class":58},[37,7401,7402],{"class":43},", props: { maskSource: ",[37,7404,7382],{"class":58},[37,7406,1142],{"class":43},[37,7408,7409],{"class":39,"line":123},[37,7410,1194],{"class":43},[37,7412,7413],{"class":39,"line":129},[37,7414,1200],{"class":43},[19,7416],{":preset":7417},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,7419,7420,7421,7423],{},"Note that layer order doesn't matter for masking, you can render the mask on top or below of the layer that's using it. Most of the time this won't matter anyway, as you'll likely have the mask layer set to ",[34,7422,6983],{},".",[3997,7425,7427],{"id":7426},"mask-types","Mask Types",[15,7429,7430,7431,7434],{},"Control how the mask is interpreted with the ",[34,7432,7433],{},"maskType"," prop:",[2556,7436,7437,7445,7453,7461],{},[2559,7438,7439,7444],{},[1306,7440,7441],{},[34,7442,7443],{},"alpha",": Uses the mask's alpha channel (default)",[2559,7446,7447,7452],{},[1306,7448,7449],{},[34,7450,7451],{},"alphaInverted",": Uses the inverted alpha channel",[2559,7454,7455,7460],{},[1306,7456,7457],{},[34,7458,7459],{},"luminance",": Uses the mask's brightness",[2559,7462,7463,7468],{},[1306,7464,7465],{},[34,7466,7467],{},"luminanceInverted",": Uses the inverted brightness",[23,7470,7471,7617,7765,7909,8053],{":tabs":25},[27,7472,7474],{"className":29,"code":7473,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n \u003C!-- Hidden checkerboard mask controls visibility -->\n \u003CCheckerboard\n id=\"mask\"\n colorA=\"#ffffff\"\n colorB=\"#111111\"\n :visible=\"false\"\n />\n\n \u003C!-- Visible where mask is bright -->\n \u003CCircle\n color=\"#ff0088\"\n radius=\"0.8\"\n maskSource=\"mask\"\n maskType=\"luminance\"\n />\n\u003C/Shader>\n",[34,7475,7476,7484,7492,7496,7501,7508,7518,7527,7536,7546,7550,7554,7559,7566,7576,7586,7595,7605,7609],{"__ignoreMap":32},[37,7477,7478,7480,7482],{"class":39,"line":40},[37,7479,44],{"class":43},[37,7481,48],{"class":47},[37,7483,62],{"class":43},[37,7485,7486,7488,7490],{"class":39,"line":65},[37,7487,75],{"class":43},[37,7489,78],{"class":47},[37,7491,113],{"class":43},[37,7493,7494],{"class":39,"line":72},[37,7495,120],{"emptyLinePlaceholder":119},[37,7497,7498],{"class":39,"line":116},[37,7499,7500],{"class":68}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[37,7502,7503,7505],{"class":39,"line":123},[37,7504,75],{"class":43},[37,7506,7507],{"class":47},"Checkerboard\n",[37,7509,7510,7513,7515],{"class":39,"line":129},[37,7511,7512],{"class":51}," id",[37,7514,55],{"class":43},[37,7516,7517],{"class":58},"\"mask\"\n",[37,7519,7520,7522,7524],{"class":39,"line":171},[37,7521,2274],{"class":51},[37,7523,55],{"class":43},[37,7525,7526],{"class":58},"\"#ffffff\"\n",[37,7528,7529,7531,7533],{"class":39,"line":221},[37,7530,2284],{"class":51},[37,7532,55],{"class":43},[37,7534,7535],{"class":58},"\"#111111\"\n",[37,7537,7538,7541,7543],{"class":39,"line":231},[37,7539,7540],{"class":51}," :visible",[37,7542,55],{"class":43},[37,7544,7545],{"class":58},"\"false\"\n",[37,7547,7548],{"class":39,"line":236},[37,7549,2314],{"class":43},[37,7551,7552],{"class":39,"line":242},[37,7553,120],{"emptyLinePlaceholder":119},[37,7555,7556],{"class":39,"line":270},[37,7557,7558],{"class":68}," \u003C!-- Visible where mask is bright -->\n",[37,7560,7561,7563],{"class":39,"line":1145},[37,7562,75],{"class":43},[37,7564,7565],{"class":47},"Circle\n",[37,7567,7568,7571,7573],{"class":39,"line":1151},[37,7569,7570],{"class":51}," color",[37,7572,55],{"class":43},[37,7574,7575],{"class":58},"\"#ff0088\"\n",[37,7577,7578,7581,7583],{"class":39,"line":1157},[37,7579,7580],{"class":51}," radius",[37,7582,55],{"class":43},[37,7584,7585],{"class":58},"\"0.8\"\n",[37,7587,7588,7591,7593],{"class":39,"line":1162},[37,7589,7590],{"class":51}," maskSource",[37,7592,55],{"class":43},[37,7594,7517],{"class":58},[37,7596,7597,7600,7602],{"class":39,"line":1168},[37,7598,7599],{"class":51}," maskType",[37,7601,55],{"class":43},[37,7603,7604],{"class":58},"\"luminance\"\n",[37,7606,7607],{"class":39,"line":1191},[37,7608,2314],{"class":43},[37,7610,7611,7613,7615],{"class":39,"line":1197},[37,7612,273],{"class":43},[37,7614,48],{"class":47},[37,7616,62],{"class":43},[27,7618,7620],{"className":280,"code":7619,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\n {/* Hidden checkerboard mask controls visibility */}\n \u003CCheckerboard\n id=\"mask\"\n colorA=\"#ffffff\"\n colorB=\"#111111\"\n visible={false}\n />\n\n {/* Visible where mask is bright */}\n \u003CCircle\n color=\"#ff0088\"\n radius={0.8}\n maskSource=\"mask\"\n maskType=\"luminance\"\n />\n\u003C/Shader>\n",[34,7621,7622,7630,7638,7642,7651,7657,7665,7673,7681,7694,7698,7702,7711,7717,7725,7737,7745,7753,7757],{"__ignoreMap":32},[37,7623,7624,7626,7628],{"class":39,"line":40},[37,7625,44],{"class":43},[37,7627,48],{"class":291},[37,7629,62],{"class":43},[37,7631,7632,7634,7636],{"class":39,"line":65},[37,7633,75],{"class":43},[37,7635,78],{"class":291},[37,7637,113],{"class":43},[37,7639,7640],{"class":39,"line":72},[37,7641,120],{"emptyLinePlaceholder":119},[37,7643,7644,7646,7649],{"class":39,"line":116},[37,7645,306],{"class":43},[37,7647,7648],{"class":68},"/* Hidden checkerboard mask controls visibility */",[37,7650,312],{"class":43},[37,7652,7653,7655],{"class":39,"line":123},[37,7654,75],{"class":43},[37,7656,7507],{"class":291},[37,7658,7659,7661,7663],{"class":39,"line":129},[37,7660,7512],{"class":51},[37,7662,55],{"class":297},[37,7664,7517],{"class":58},[37,7666,7667,7669,7671],{"class":39,"line":171},[37,7668,2274],{"class":51},[37,7670,55],{"class":297},[37,7672,7526],{"class":58},[37,7674,7675,7677,7679],{"class":39,"line":221},[37,7676,2284],{"class":51},[37,7678,55],{"class":297},[37,7680,7535],{"class":58},[37,7682,7683,7686,7688,7690,7692],{"class":39,"line":231},[37,7684,7685],{"class":51}," visible",[37,7687,55],{"class":297},[37,7689,326],{"class":43},[37,7691,390],{"class":291},[37,7693,312],{"class":43},[37,7695,7696],{"class":39,"line":236},[37,7697,2314],{"class":43},[37,7699,7700],{"class":39,"line":242},[37,7701,120],{"emptyLinePlaceholder":119},[37,7703,7704,7706,7709],{"class":39,"line":270},[37,7705,306],{"class":43},[37,7707,7708],{"class":68},"/* Visible where mask is bright */",[37,7710,312],{"class":43},[37,7712,7713,7715],{"class":39,"line":1145},[37,7714,75],{"class":43},[37,7716,7565],{"class":291},[37,7718,7719,7721,7723],{"class":39,"line":1151},[37,7720,7570],{"class":51},[37,7722,55],{"class":297},[37,7724,7575],{"class":58},[37,7726,7727,7729,7731,7733,7735],{"class":39,"line":1157},[37,7728,7580],{"class":51},[37,7730,55],{"class":297},[37,7732,326],{"class":43},[37,7734,4235],{"class":291},[37,7736,312],{"class":43},[37,7738,7739,7741,7743],{"class":39,"line":1162},[37,7740,7590],{"class":51},[37,7742,55],{"class":297},[37,7744,7517],{"class":58},[37,7746,7747,7749,7751],{"class":39,"line":1168},[37,7748,7599],{"class":51},[37,7750,55],{"class":297},[37,7752,7604],{"class":58},[37,7754,7755],{"class":39,"line":1191},[37,7756,2314],{"class":43},[37,7758,7759,7761,7763],{"class":39,"line":1197},[37,7760,273],{"class":43},[37,7762,48],{"class":291},[37,7764,62],{"class":43},[27,7766,7767],{"className":543,"code":7619,"language":545,"meta":32,"style":32},[34,7768,7769,7777,7785,7789,7797,7803,7811,7819,7827,7839,7843,7847,7855,7861,7869,7881,7889,7897,7901],{"__ignoreMap":32},[37,7770,7771,7773,7775],{"class":39,"line":40},[37,7772,44],{"class":43},[37,7774,48],{"class":291},[37,7776,62],{"class":43},[37,7778,7779,7781,7783],{"class":39,"line":65},[37,7780,75],{"class":43},[37,7782,78],{"class":291},[37,7784,113],{"class":43},[37,7786,7787],{"class":39,"line":72},[37,7788,120],{"emptyLinePlaceholder":119},[37,7790,7791,7793,7795],{"class":39,"line":116},[37,7792,306],{"class":43},[37,7794,7648],{"class":68},[37,7796,312],{"class":43},[37,7798,7799,7801],{"class":39,"line":123},[37,7800,75],{"class":43},[37,7802,7507],{"class":291},[37,7804,7805,7807,7809],{"class":39,"line":129},[37,7806,7512],{"class":51},[37,7808,55],{"class":297},[37,7810,7517],{"class":58},[37,7812,7813,7815,7817],{"class":39,"line":171},[37,7814,2274],{"class":51},[37,7816,55],{"class":297},[37,7818,7526],{"class":58},[37,7820,7821,7823,7825],{"class":39,"line":221},[37,7822,2284],{"class":51},[37,7824,55],{"class":297},[37,7826,7535],{"class":58},[37,7828,7829,7831,7833,7835,7837],{"class":39,"line":231},[37,7830,7685],{"class":51},[37,7832,55],{"class":297},[37,7834,326],{"class":43},[37,7836,390],{"class":291},[37,7838,312],{"class":43},[37,7840,7841],{"class":39,"line":236},[37,7842,2314],{"class":43},[37,7844,7845],{"class":39,"line":242},[37,7846,120],{"emptyLinePlaceholder":119},[37,7848,7849,7851,7853],{"class":39,"line":270},[37,7850,306],{"class":43},[37,7852,7708],{"class":68},[37,7854,312],{"class":43},[37,7856,7857,7859],{"class":39,"line":1145},[37,7858,75],{"class":43},[37,7860,7565],{"class":291},[37,7862,7863,7865,7867],{"class":39,"line":1151},[37,7864,7570],{"class":51},[37,7866,55],{"class":297},[37,7868,7575],{"class":58},[37,7870,7871,7873,7875,7877,7879],{"class":39,"line":1157},[37,7872,7580],{"class":51},[37,7874,55],{"class":297},[37,7876,326],{"class":43},[37,7878,4235],{"class":291},[37,7880,312],{"class":43},[37,7882,7883,7885,7887],{"class":39,"line":1162},[37,7884,7590],{"class":51},[37,7886,55],{"class":297},[37,7888,7517],{"class":58},[37,7890,7891,7893,7895],{"class":39,"line":1168},[37,7892,7599],{"class":51},[37,7894,55],{"class":297},[37,7896,7604],{"class":58},[37,7898,7899],{"class":39,"line":1191},[37,7900,2314],{"class":43},[37,7902,7903,7905,7907],{"class":39,"line":1197},[37,7904,273],{"class":43},[37,7906,48],{"class":291},[37,7908,62],{"class":43},[27,7910,7911],{"className":543,"code":7619,"language":545,"meta":32,"style":32},[34,7912,7913,7921,7929,7933,7941,7947,7955,7963,7971,7983,7987,7991,7999,8005,8013,8025,8033,8041,8045],{"__ignoreMap":32},[37,7914,7915,7917,7919],{"class":39,"line":40},[37,7916,44],{"class":43},[37,7918,48],{"class":291},[37,7920,62],{"class":43},[37,7922,7923,7925,7927],{"class":39,"line":65},[37,7924,75],{"class":43},[37,7926,78],{"class":291},[37,7928,113],{"class":43},[37,7930,7931],{"class":39,"line":72},[37,7932,120],{"emptyLinePlaceholder":119},[37,7934,7935,7937,7939],{"class":39,"line":116},[37,7936,306],{"class":43},[37,7938,7648],{"class":68},[37,7940,312],{"class":43},[37,7942,7943,7945],{"class":39,"line":123},[37,7944,75],{"class":43},[37,7946,7507],{"class":291},[37,7948,7949,7951,7953],{"class":39,"line":129},[37,7950,7512],{"class":51},[37,7952,55],{"class":297},[37,7954,7517],{"class":58},[37,7956,7957,7959,7961],{"class":39,"line":171},[37,7958,2274],{"class":51},[37,7960,55],{"class":297},[37,7962,7526],{"class":58},[37,7964,7965,7967,7969],{"class":39,"line":221},[37,7966,2284],{"class":51},[37,7968,55],{"class":297},[37,7970,7535],{"class":58},[37,7972,7973,7975,7977,7979,7981],{"class":39,"line":231},[37,7974,7685],{"class":51},[37,7976,55],{"class":297},[37,7978,326],{"class":43},[37,7980,390],{"class":291},[37,7982,312],{"class":43},[37,7984,7985],{"class":39,"line":236},[37,7986,2314],{"class":43},[37,7988,7989],{"class":39,"line":242},[37,7990,120],{"emptyLinePlaceholder":119},[37,7992,7993,7995,7997],{"class":39,"line":270},[37,7994,306],{"class":43},[37,7996,7708],{"class":68},[37,7998,312],{"class":43},[37,8000,8001,8003],{"class":39,"line":1145},[37,8002,75],{"class":43},[37,8004,7565],{"class":291},[37,8006,8007,8009,8011],{"class":39,"line":1151},[37,8008,7570],{"class":51},[37,8010,55],{"class":297},[37,8012,7575],{"class":58},[37,8014,8015,8017,8019,8021,8023],{"class":39,"line":1157},[37,8016,7580],{"class":51},[37,8018,55],{"class":297},[37,8020,326],{"class":43},[37,8022,4235],{"class":291},[37,8024,312],{"class":43},[37,8026,8027,8029,8031],{"class":39,"line":1162},[37,8028,7590],{"class":51},[37,8030,55],{"class":297},[37,8032,7517],{"class":58},[37,8034,8035,8037,8039],{"class":39,"line":1168},[37,8036,7599],{"class":51},[37,8038,55],{"class":297},[37,8040,7604],{"class":58},[37,8042,8043],{"class":39,"line":1191},[37,8044,2314],{"class":43},[37,8046,8047,8049,8051],{"class":39,"line":1197},[37,8048,273],{"class":43},[37,8050,48],{"class":291},[37,8052,62],{"class":43},[27,8054,8056],{"className":987,"code":8055,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} },\n { type: 'Checkerboard', id: 'mask', props: { colorA: '#ffffff', colorB: '#111111', visible: false } },\n { type: 'Circle', props: { color: '#ff0088', radius: 0.8, maskSource: 'mask', maskType: 'luminance' } }\n ]\n})\n",[34,8057,8058,8072,8076,8084,8114,8140,8144],{"__ignoreMap":32},[37,8059,8060,8062,8064,8066,8068,8070],{"class":39,"line":40},[37,8061,2809],{"class":297},[37,8063,2812],{"class":291},[37,8065,2815],{"class":297},[37,8067,2818],{"class":297},[37,8069,999],{"class":51},[37,8071,1002],{"class":43},[37,8073,8074],{"class":39,"line":65},[37,8075,1007],{"class":43},[37,8077,8078,8080,8082],{"class":39,"line":72},[37,8079,1017],{"class":43},[37,8081,1020],{"class":58},[37,8083,4483],{"class":43},[37,8085,8086,8088,8091,8093,8096,8099,8102,8105,8108,8110,8112],{"class":39,"line":116},[37,8087,1017],{"class":43},[37,8089,8090],{"class":58},"'Checkerboard'",[37,8092,3944],{"class":43},[37,8094,8095],{"class":58},"'mask'",[37,8097,8098],{"class":43},", props: { colorA: ",[37,8100,8101],{"class":58},"'#ffffff'",[37,8103,8104],{"class":43},", colorB: ",[37,8106,8107],{"class":58},"'#111111'",[37,8109,7389],{"class":43},[37,8111,390],{"class":291},[37,8113,1046],{"class":43},[37,8115,8116,8118,8120,8122,8124,8126,8128,8130,8132,8135,8138],{"class":39,"line":123},[37,8117,1017],{"class":43},[37,8119,3941],{"class":58},[37,8121,2845],{"class":43},[37,8123,3952],{"class":58},[37,8125,4501],{"class":43},[37,8127,4235],{"class":291},[37,8129,1184],{"class":43},[37,8131,8095],{"class":58},[37,8133,8134],{"class":43},", maskType: ",[37,8136,8137],{"class":58},"'luminance'",[37,8139,1142],{"class":43},[37,8141,8142],{"class":39,"line":129},[37,8143,1194],{"class":43},[37,8145,8146],{"class":39,"line":171},[37,8147,1200],{"class":43},[19,8149],{":preset":8150},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Checkerboard\",\"id\":\"mask\",\"props\":{\"colorA\":\"#ffffff\",\"colorB\":\"#111111\",\"visible\":false}},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"maskSource\":\"mask\",\"maskType\":\"luminance\"}}]}",[1311,8152,5529],{},{"title":32,"searchDepth":65,"depth":65,"links":8154},[8155,8158,8159,8160],{"id":5553,"depth":65,"text":5554,"children":8156},[8157],{"id":6016,"depth":72,"text":6017},{"id":3656,"depth":65,"text":6601},{"id":6939,"depth":65,"text":6940},{"id":6987,"depth":65,"text":6988,"children":8161},[8162],{"id":7426,"depth":72,"text":7427},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"/docs/guide/blending-masking",{"title":5542,"description":8164},"docs/guide/3.blending-masking","DB4mG55LrsfgecKvStxFmWb3SIn-tGs51Tr-D2t5pHs",{"id":8172,"title":2578,"body":8173,"category":8163,"description":10165,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":10166,"meta":10167,"navigation":119,"path":2577,"seo":10168,"stem":10169,"__hash__":10170},"guide/docs/guide/4.props-reactivity.md",{"type":8,"value":8174,"toc":10158},[8175,8178,8181,8185,8188,8405,8408,8412,8415,9575,9578,9583,9586,9590,9593,9598,9639,9644,9683,9688,9739,9744,9770,9773,9777,9780,9786,10118,10122,10125,10129,10132,10152,10155],[11,8176,2578],{"id":8177},"props-reactivity",[15,8179,8180],{},"Every shader component accepts props that control its appearance and behavior. These props are fully reactive—change a value in your component state, and the shader updates instantly.",[1202,8182,8184],{"id":8183},"basic-props","Basic Props",[15,8186,8187],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[23,8189,8190,8231,8274,8316,8358],{":tabs":25},[27,8191,8193],{"className":29,"code":8192,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" />\n\u003C/Shader>\n",[34,8194,8195,8203,8223],{"__ignoreMap":32},[37,8196,8197,8199,8201],{"class":39,"line":40},[37,8198,44],{"class":43},[37,8200,48],{"class":47},[37,8202,62],{"class":43},[37,8204,8205,8207,8209,8211,8213,8215,8217,8219,8221],{"class":39,"line":65},[37,8206,75],{"class":43},[37,8208,3293],{"class":47},[37,8210,2662],{"class":51},[37,8212,55],{"class":43},[37,8214,3300],{"class":58},[37,8216,4138],{"class":51},[37,8218,55],{"class":43},[37,8220,5616],{"class":58},[37,8222,113],{"class":43},[37,8224,8225,8227,8229],{"class":39,"line":72},[37,8226,273],{"class":43},[37,8228,48],{"class":47},[37,8230,62],{"class":43},[27,8232,8234],{"className":280,"code":8233,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} />\n\u003C/Shader>\n",[34,8235,8236,8244,8266],{"__ignoreMap":32},[37,8237,8238,8240,8242],{"class":39,"line":40},[37,8239,44],{"class":43},[37,8241,48],{"class":291},[37,8243,62],{"class":43},[37,8245,8246,8248,8250,8252,8254,8256,8258,8260,8262,8264],{"class":39,"line":65},[37,8247,75],{"class":43},[37,8249,3293],{"class":291},[37,8251,2662],{"class":51},[37,8253,55],{"class":297},[37,8255,3300],{"class":58},[37,8257,4138],{"class":51},[37,8259,55],{"class":297},[37,8261,326],{"class":43},[37,8263,5689],{"class":291},[37,8265,484],{"class":43},[37,8267,8268,8270,8272],{"class":39,"line":72},[37,8269,273],{"class":43},[37,8271,48],{"class":291},[37,8273,62],{"class":43},[27,8275,8276],{"className":543,"code":8233,"language":545,"meta":32,"style":32},[34,8277,8278,8286,8308],{"__ignoreMap":32},[37,8279,8280,8282,8284],{"class":39,"line":40},[37,8281,44],{"class":43},[37,8283,48],{"class":291},[37,8285,62],{"class":43},[37,8287,8288,8290,8292,8294,8296,8298,8300,8302,8304,8306],{"class":39,"line":65},[37,8289,75],{"class":43},[37,8291,3293],{"class":291},[37,8293,2662],{"class":51},[37,8295,55],{"class":297},[37,8297,3300],{"class":58},[37,8299,4138],{"class":51},[37,8301,55],{"class":297},[37,8303,326],{"class":43},[37,8305,5689],{"class":291},[37,8307,484],{"class":43},[37,8309,8310,8312,8314],{"class":39,"line":72},[37,8311,273],{"class":43},[37,8313,48],{"class":291},[37,8315,62],{"class":43},[27,8317,8318],{"className":543,"code":8233,"language":545,"meta":32,"style":32},[34,8319,8320,8328,8350],{"__ignoreMap":32},[37,8321,8322,8324,8326],{"class":39,"line":40},[37,8323,44],{"class":43},[37,8325,48],{"class":291},[37,8327,62],{"class":43},[37,8329,8330,8332,8334,8336,8338,8340,8342,8344,8346,8348],{"class":39,"line":65},[37,8331,75],{"class":43},[37,8333,3293],{"class":291},[37,8335,2662],{"class":51},[37,8337,55],{"class":297},[37,8339,3300],{"class":58},[37,8341,4138],{"class":51},[37,8343,55],{"class":297},[37,8345,326],{"class":43},[37,8347,5689],{"class":291},[37,8349,484],{"class":43},[37,8351,8352,8354,8356],{"class":39,"line":72},[37,8353,273],{"class":43},[37,8355,48],{"class":291},[37,8357,62],{"class":43},[27,8359,8361],{"className":987,"code":8360,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.5 } }\n ]\n})\n",[34,8362,8363,8377,8381,8397,8401],{"__ignoreMap":32},[37,8364,8365,8367,8369,8371,8373,8375],{"class":39,"line":40},[37,8366,2809],{"class":297},[37,8368,2812],{"class":291},[37,8370,2815],{"class":297},[37,8372,2818],{"class":297},[37,8374,999],{"class":51},[37,8376,1002],{"class":43},[37,8378,8379],{"class":39,"line":65},[37,8380,1007],{"class":43},[37,8382,8383,8385,8387,8389,8391,8393,8395],{"class":39,"line":72},[37,8384,1017],{"class":43},[37,8386,3941],{"class":58},[37,8388,2845],{"class":43},[37,8390,3952],{"class":58},[37,8392,4501],{"class":43},[37,8394,5689],{"class":291},[37,8396,1142],{"class":43},[37,8398,8399],{"class":39,"line":116},[37,8400,1194],{"class":43},[37,8402,8403],{"class":39,"line":123},[37,8404,1200],{"class":43},[15,8406,8407],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[1202,8409,8411],{"id":8410},"reactive-props","Reactive Props",[15,8413,8414],{},"Bind props to your component's state, and the shader updates automatically when the state changes. This happens efficiently—prop changes update GPU uniforms directly without recompiling shaders.",[23,8416,8417,8648,8937,9159,9433],{":tabs":25},[27,8418,8420],{"className":29,"code":8419,"language":31,"meta":32,"style":32},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient, Circle } from 'shaders/vue'\n\nconst angle = ref(0)\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cbutton @click=\"angle += 45\">Rotate +45°\u003C/button>\n \u003Cbutton @click=\"angle -= 45\">Rotate -45°\u003C/button>\n \u003Cbutton @click=\"angle = 0\">Reset\u003C/button>\n \u003C/div>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius=\"0.8\" :visible=\"false\" />\n \u003CLinearGradient :angle=\"angle\" maskSource=\"mask\" />\n \u003C/Shader>\n\u003C/template>\n",[34,8421,8422,8432,8442,8453,8457,8473,8481,8485,8493,8502,8524,8544,8564,8572,8576,8584,8611,8632,8640],{"__ignoreMap":32},[37,8423,8424,8426,8428,8430],{"class":39,"line":40},[37,8425,44],{"class":43},[37,8427,3329],{"class":47},[37,8429,3332],{"class":51},[37,8431,62],{"class":43},[37,8433,8434,8436,8438,8440],{"class":39,"line":65},[37,8435,1382],{"class":297},[37,8437,3341],{"class":43},[37,8439,1388],{"class":297},[37,8441,3346],{"class":58},[37,8443,8444,8446,8449,8451],{"class":39,"line":72},[37,8445,1382],{"class":297},[37,8447,8448],{"class":43}," { Shader, LinearGradient, Circle } ",[37,8450,1388],{"class":297},[37,8452,1391],{"class":58},[37,8454,8455],{"class":39,"line":116},[37,8456,120],{"emptyLinePlaceholder":119},[37,8458,8459,8461,8463,8465,8467,8469,8471],{"class":39,"line":123},[37,8460,2809],{"class":297},[37,8462,321],{"class":291},[37,8464,2815],{"class":297},[37,8466,3361],{"class":51},[37,8468,3364],{"class":43},[37,8470,6610],{"class":291},[37,8472,3369],{"class":43},[37,8474,8475,8477,8479],{"class":39,"line":129},[37,8476,273],{"class":43},[37,8478,3329],{"class":47},[37,8480,62],{"class":43},[37,8482,8483],{"class":39,"line":171},[37,8484,120],{"emptyLinePlaceholder":119},[37,8486,8487,8489,8491],{"class":39,"line":221},[37,8488,44],{"class":43},[37,8490,3260],{"class":47},[37,8492,62],{"class":43},[37,8494,8495,8497,8500],{"class":39,"line":231},[37,8496,75],{"class":43},[37,8498,8499],{"class":47},"div",[37,8501,62],{"class":43},[37,8503,8504,8506,8509,8512,8514,8517,8520,8522],{"class":39,"line":236},[37,8505,174],{"class":43},[37,8507,8508],{"class":47},"button",[37,8510,8511],{"class":51}," @click",[37,8513,55],{"class":43},[37,8515,8516],{"class":58},"\"angle += 45\"",[37,8518,8519],{"class":43},">Rotate +45°\u003C/",[37,8521,8508],{"class":47},[37,8523,62],{"class":43},[37,8525,8526,8528,8530,8532,8534,8537,8540,8542],{"class":39,"line":242},[37,8527,174],{"class":43},[37,8529,8508],{"class":47},[37,8531,8511],{"class":51},[37,8533,55],{"class":43},[37,8535,8536],{"class":58},"\"angle -= 45\"",[37,8538,8539],{"class":43},">Rotate -45°\u003C/",[37,8541,8508],{"class":47},[37,8543,62],{"class":43},[37,8545,8546,8548,8550,8552,8554,8557,8560,8562],{"class":39,"line":270},[37,8547,174],{"class":43},[37,8549,8508],{"class":47},[37,8551,8511],{"class":51},[37,8553,55],{"class":43},[37,8555,8556],{"class":58},"\"angle = 0\"",[37,8558,8559],{"class":43},">Reset\u003C/",[37,8561,8508],{"class":47},[37,8563,62],{"class":43},[37,8565,8566,8568,8570],{"class":39,"line":1145},[37,8567,224],{"class":43},[37,8569,8499],{"class":47},[37,8571,62],{"class":43},[37,8573,8574],{"class":39,"line":1151},[37,8575,120],{"emptyLinePlaceholder":119},[37,8577,8578,8580,8582],{"class":39,"line":1157},[37,8579,75],{"class":43},[37,8581,48],{"class":47},[37,8583,62],{"class":43},[37,8585,8586,8588,8590,8592,8594,8597,8599,8601,8603,8605,8607,8609],{"class":39,"line":1162},[37,8587,174],{"class":43},[37,8589,3293],{"class":47},[37,8591,137],{"class":51},[37,8593,55],{"class":43},[37,8595,8596],{"class":58},"\"mask\"",[37,8598,4138],{"class":51},[37,8600,55],{"class":43},[37,8602,4143],{"class":58},[37,8604,145],{"class":51},[37,8606,55],{"class":43},[37,8608,150],{"class":58},[37,8610,113],{"class":43},[37,8612,8613,8615,8617,8619,8621,8624,8626,8628,8630],{"class":39,"line":1168},[37,8614,174],{"class":43},[37,8616,78],{"class":47},[37,8618,81],{"class":51},[37,8620,55],{"class":43},[37,8622,8623],{"class":58},"\"angle\"",[37,8625,526],{"class":51},[37,8627,55],{"class":43},[37,8629,8596],{"class":58},[37,8631,113],{"class":43},[37,8633,8634,8636,8638],{"class":39,"line":1191},[37,8635,224],{"class":43},[37,8637,48],{"class":47},[37,8639,62],{"class":43},[37,8641,8642,8644,8646],{"class":39,"line":1197},[37,8643,273],{"class":43},[37,8645,3260],{"class":47},[37,8647,62],{"class":43},[27,8649,8651],{"className":280,"code":8650,"language":282,"meta":32,"style":32},"import { useState } from 'react'\nimport { Shader, LinearGradient, Circle } from 'shaders/react'\n\nfunction MyComponent() {\n const [angle, setAngle] = useState(0)\n\n return (\n \u003C>\n \u003Cdiv>\n \u003Cbutton onClick={() => setAngle(a => a + 45)}>Rotate +45°\u003C/button>\n \u003Cbutton onClick={() => setAngle(a => a - 45)}>Rotate -45°\u003C/button>\n \u003Cbutton onClick={() => setAngle(0)}>Reset\u003C/button>\n \u003C/div>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} />\n \u003CLinearGradient angle={angle} maskSource=\"mask\" />\n \u003C/Shader>\n \u003C/>\n )\n}\n",[34,8652,8653,8663,8673,8677,8686,8711,8715,8721,8726,8734,8777,8813,8840,8849,8853,8861,8893,8914,8922,8927,8932],{"__ignoreMap":32},[37,8654,8655,8657,8659,8661],{"class":39,"line":40},[37,8656,1382],{"class":297},[37,8658,3418],{"class":43},[37,8660,1388],{"class":297},[37,8662,3423],{"class":58},[37,8664,8665,8667,8669,8671],{"class":39,"line":65},[37,8666,1382],{"class":297},[37,8668,8448],{"class":43},[37,8670,1388],{"class":297},[37,8672,1407],{"class":58},[37,8674,8675],{"class":39,"line":72},[37,8676,120],{"emptyLinePlaceholder":119},[37,8678,8679,8681,8684],{"class":39,"line":116},[37,8680,3378],{"class":297},[37,8682,8683],{"class":51}," MyComponent",[37,8685,3384],{"class":43},[37,8687,8688,8690,8692,8694,8696,8699,8701,8703,8705,8707,8709],{"class":39,"line":123},[37,8689,3441],{"class":297},[37,8691,3444],{"class":43},[37,8693,438],{"class":291},[37,8695,2961],{"class":43},[37,8697,8698],{"class":291},"setAngle",[37,8700,3455],{"class":43},[37,8702,55],{"class":297},[37,8704,3460],{"class":51},[37,8706,3364],{"class":43},[37,8708,6610],{"class":291},[37,8710,3369],{"class":43},[37,8712,8713],{"class":39,"line":129},[37,8714,120],{"emptyLinePlaceholder":119},[37,8716,8717,8719],{"class":39,"line":171},[37,8718,3475],{"class":297},[37,8720,3478],{"class":43},[37,8722,8723],{"class":39,"line":221},[37,8724,8725],{"class":43}," \u003C>\n",[37,8727,8728,8730,8732],{"class":39,"line":231},[37,8729,3549],{"class":43},[37,8731,8499],{"class":47},[37,8733,62],{"class":43},[37,8735,8736,8739,8741,8744,8746,8748,8750,8753,8755,8758,8761,8764,8767,8770,8773,8775],{"class":39,"line":236},[37,8737,8738],{"class":43}," \u003C",[37,8740,8508],{"class":47},[37,8742,8743],{"class":51}," onClick",[37,8745,55],{"class":297},[37,8747,3495],{"class":43},[37,8749,3498],{"class":297},[37,8751,8752],{"class":51}," setAngle",[37,8754,3364],{"class":43},[37,8756,2237],{"class":8757},"s9osk",[37,8759,8760],{"class":297}," =>",[37,8762,8763],{"class":43}," a ",[37,8765,8766],{"class":297},"+",[37,8768,8769],{"class":291}," 45",[37,8771,8772],{"class":43},")}>Rotate +45°\u003C/",[37,8774,8508],{"class":47},[37,8776,62],{"class":43},[37,8778,8779,8781,8783,8785,8787,8789,8791,8793,8795,8797,8799,8801,8804,8806,8809,8811],{"class":39,"line":242},[37,8780,8738],{"class":43},[37,8782,8508],{"class":47},[37,8784,8743],{"class":51},[37,8786,55],{"class":297},[37,8788,3495],{"class":43},[37,8790,3498],{"class":297},[37,8792,8752],{"class":51},[37,8794,3364],{"class":43},[37,8796,2237],{"class":8757},[37,8798,8760],{"class":297},[37,8800,8763],{"class":43},[37,8802,8803],{"class":297},"-",[37,8805,8769],{"class":291},[37,8807,8808],{"class":43},")}>Rotate -45°\u003C/",[37,8810,8508],{"class":47},[37,8812,62],{"class":43},[37,8814,8815,8817,8819,8821,8823,8825,8827,8829,8831,8833,8836,8838],{"class":39,"line":270},[37,8816,8738],{"class":43},[37,8818,8508],{"class":47},[37,8820,8743],{"class":51},[37,8822,55],{"class":297},[37,8824,3495],{"class":43},[37,8826,3498],{"class":297},[37,8828,8752],{"class":51},[37,8830,3364],{"class":43},[37,8832,6610],{"class":291},[37,8834,8835],{"class":43},")}>Reset\u003C/",[37,8837,8508],{"class":47},[37,8839,62],{"class":43},[37,8841,8842,8845,8847],{"class":39,"line":1145},[37,8843,8844],{"class":43}," \u003C/",[37,8846,8499],{"class":47},[37,8848,62],{"class":43},[37,8850,8851],{"class":39,"line":1151},[37,8852,120],{"emptyLinePlaceholder":119},[37,8854,8855,8857,8859],{"class":39,"line":1157},[37,8856,3549],{"class":43},[37,8858,48],{"class":291},[37,8860,62],{"class":43},[37,8862,8863,8865,8867,8869,8871,8873,8875,8877,8879,8881,8883,8885,8887,8889,8891],{"class":39,"line":1162},[37,8864,8738],{"class":43},[37,8866,3293],{"class":291},[37,8868,137],{"class":51},[37,8870,55],{"class":297},[37,8872,8596],{"class":58},[37,8874,4138],{"class":51},[37,8876,55],{"class":297},[37,8878,326],{"class":43},[37,8880,4235],{"class":291},[37,8882,332],{"class":43},[37,8884,3447],{"class":51},[37,8886,55],{"class":297},[37,8888,326],{"class":43},[37,8890,390],{"class":291},[37,8892,484],{"class":43},[37,8894,8895,8897,8899,8901,8903,8906,8908,8910,8912],{"class":39,"line":1168},[37,8896,8738],{"class":43},[37,8898,78],{"class":291},[37,8900,321],{"class":51},[37,8902,55],{"class":297},[37,8904,8905],{"class":43},"{angle} ",[37,8907,7002],{"class":51},[37,8909,55],{"class":297},[37,8911,8596],{"class":58},[37,8913,113],{"class":43},[37,8915,8916,8918,8920],{"class":39,"line":1191},[37,8917,8844],{"class":43},[37,8919,48],{"class":291},[37,8921,62],{"class":43},[37,8923,8924],{"class":39,"line":1197},[37,8925,8926],{"class":43}," \u003C/>\n",[37,8928,8930],{"class":39,"line":8929},20,[37,8931,3573],{"class":43},[37,8933,8935],{"class":39,"line":8934},21,[37,8936,312],{"class":43},[27,8938,8940],{"className":543,"code":8939,"language":545,"meta":32,"style":32},"\u003Cscript>\n import { Shader, LinearGradient, Circle } from 'shaders/svelte'\n\n let angle = 0\n\u003C/script>\n\n\u003Cdiv>\n \u003Cbutton on:click={() => angle += 45}>Rotate +45°\u003C/button>\n \u003Cbutton on:click={() => angle -= 45}>Rotate -45°\u003C/button>\n \u003Cbutton on:click={() => angle = 0}>Reset\u003C/button>\n\u003C/div>\n\n\u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} />\n \u003CLinearGradient {angle} maskSource=\"mask\" />\n\u003C/Shader>\n",[34,8941,8942,8950,8955,8959,8964,8972,8976,8984,9019,9051,9082,9090,9094,9102,9134,9151],{"__ignoreMap":32},[37,8943,8944,8946,8948],{"class":39,"line":40},[37,8945,44],{"class":43},[37,8947,3329],{"class":47},[37,8949,62],{"class":43},[37,8951,8952],{"class":39,"line":65},[37,8953,8954],{"class":43}," import { Shader, LinearGradient, Circle } from 'shaders/svelte'\n",[37,8956,8957],{"class":39,"line":72},[37,8958,120],{"emptyLinePlaceholder":119},[37,8960,8961],{"class":39,"line":116},[37,8962,8963],{"class":43}," let angle = 0\n",[37,8965,8966,8968,8970],{"class":39,"line":123},[37,8967,273],{"class":43},[37,8969,3329],{"class":47},[37,8971,62],{"class":43},[37,8973,8974],{"class":39,"line":129},[37,8975,120],{"emptyLinePlaceholder":119},[37,8977,8978,8980,8982],{"class":39,"line":171},[37,8979,44],{"class":43},[37,8981,8499],{"class":47},[37,8983,62],{"class":43},[37,8985,8986,8988,8990,8993,8995,8998,9000,9002,9004,9007,9010,9012,9015,9017],{"class":39,"line":221},[37,8987,75],{"class":43},[37,8989,8508],{"class":47},[37,8991,8992],{"class":51}," on",[37,8994,2630],{"class":43},[37,8996,8997],{"class":51},"click",[37,8999,55],{"class":297},[37,9001,3495],{"class":43},[37,9003,3498],{"class":297},[37,9005,9006],{"class":43}," angle ",[37,9008,9009],{"class":297},"+=",[37,9011,8769],{"class":291},[37,9013,9014],{"class":43},"}>Rotate +45°\u003C/",[37,9016,8508],{"class":47},[37,9018,62],{"class":43},[37,9020,9021,9023,9025,9027,9029,9031,9033,9035,9037,9039,9042,9044,9047,9049],{"class":39,"line":231},[37,9022,75],{"class":43},[37,9024,8508],{"class":47},[37,9026,8992],{"class":51},[37,9028,2630],{"class":43},[37,9030,8997],{"class":51},[37,9032,55],{"class":297},[37,9034,3495],{"class":43},[37,9036,3498],{"class":297},[37,9038,9006],{"class":43},[37,9040,9041],{"class":297},"-=",[37,9043,8769],{"class":291},[37,9045,9046],{"class":43},"}>Rotate -45°\u003C/",[37,9048,8508],{"class":47},[37,9050,62],{"class":43},[37,9052,9053,9055,9057,9059,9061,9063,9065,9067,9069,9071,9073,9075,9078,9080],{"class":39,"line":236},[37,9054,75],{"class":43},[37,9056,8508],{"class":47},[37,9058,8992],{"class":51},[37,9060,2630],{"class":43},[37,9062,8997],{"class":51},[37,9064,55],{"class":297},[37,9066,3495],{"class":43},[37,9068,3498],{"class":297},[37,9070,9006],{"class":43},[37,9072,55],{"class":297},[37,9074,3530],{"class":291},[37,9076,9077],{"class":43},"}>Reset\u003C/",[37,9079,8508],{"class":47},[37,9081,62],{"class":43},[37,9083,9084,9086,9088],{"class":39,"line":242},[37,9085,273],{"class":43},[37,9087,8499],{"class":47},[37,9089,62],{"class":43},[37,9091,9092],{"class":39,"line":270},[37,9093,120],{"emptyLinePlaceholder":119},[37,9095,9096,9098,9100],{"class":39,"line":1145},[37,9097,44],{"class":43},[37,9099,48],{"class":291},[37,9101,62],{"class":43},[37,9103,9104,9106,9108,9110,9112,9114,9116,9118,9120,9122,9124,9126,9128,9130,9132],{"class":39,"line":1151},[37,9105,75],{"class":43},[37,9107,3293],{"class":291},[37,9109,137],{"class":51},[37,9111,55],{"class":297},[37,9113,8596],{"class":58},[37,9115,4138],{"class":51},[37,9117,55],{"class":297},[37,9119,326],{"class":43},[37,9121,4235],{"class":291},[37,9123,332],{"class":43},[37,9125,3447],{"class":51},[37,9127,55],{"class":297},[37,9129,326],{"class":43},[37,9131,390],{"class":291},[37,9133,484],{"class":43},[37,9135,9136,9138,9140,9143,9145,9147,9149],{"class":39,"line":1157},[37,9137,75],{"class":43},[37,9139,78],{"class":291},[37,9141,9142],{"class":43}," {angle} ",[37,9144,7002],{"class":51},[37,9146,55],{"class":297},[37,9148,8596],{"class":58},[37,9150,113],{"class":43},[37,9152,9153,9155,9157],{"class":39,"line":1162},[37,9154,273],{"class":43},[37,9156,48],{"class":291},[37,9158,62],{"class":43},[27,9160,9162],{"className":543,"code":9161,"language":545,"meta":32,"style":32},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient, Circle } from 'shaders/solid'\n\nfunction MyComponent() {\n const [angle, setAngle] = createSignal(0)\n\n return (\n \u003C>\n \u003Cdiv>\n \u003Cbutton onClick={() => setAngle(a => a + 45)}>Rotate +45°\u003C/button>\n \u003Cbutton onClick={() => setAngle(a => a - 45)}>Rotate -45°\u003C/button>\n \u003Cbutton onClick={() => setAngle(0)}>Reset\u003C/button>\n \u003C/div>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={0.8} visible={false} />\n \u003CLinearGradient angle={angle()} maskSource=\"mask\" />\n \u003C/Shader>\n \u003C/>\n )\n}\n",[34,9163,9164,9174,9184,9188,9196,9220,9224,9230,9234,9242,9276,9310,9336,9344,9348,9356,9388,9413,9421,9425,9429],{"__ignoreMap":32},[37,9165,9166,9168,9170,9172],{"class":39,"line":40},[37,9167,1382],{"class":297},[37,9169,3717],{"class":43},[37,9171,1388],{"class":297},[37,9173,3722],{"class":58},[37,9175,9176,9178,9180,9182],{"class":39,"line":65},[37,9177,1382],{"class":297},[37,9179,8448],{"class":43},[37,9181,1388],{"class":297},[37,9183,1439],{"class":58},[37,9185,9186],{"class":39,"line":72},[37,9187,120],{"emptyLinePlaceholder":119},[37,9189,9190,9192,9194],{"class":39,"line":116},[37,9191,3378],{"class":297},[37,9193,8683],{"class":51},[37,9195,3384],{"class":43},[37,9197,9198,9200,9202,9204,9206,9208,9210,9212,9214,9216,9218],{"class":39,"line":123},[37,9199,3441],{"class":297},[37,9201,3444],{"class":43},[37,9203,438],{"class":291},[37,9205,2961],{"class":43},[37,9207,8698],{"class":291},[37,9209,3455],{"class":43},[37,9211,55],{"class":297},[37,9213,3753],{"class":51},[37,9215,3364],{"class":43},[37,9217,6610],{"class":291},[37,9219,3369],{"class":43},[37,9221,9222],{"class":39,"line":129},[37,9223,120],{"emptyLinePlaceholder":119},[37,9225,9226,9228],{"class":39,"line":171},[37,9227,3475],{"class":297},[37,9229,3478],{"class":43},[37,9231,9232],{"class":39,"line":221},[37,9233,8725],{"class":43},[37,9235,9236,9238,9240],{"class":39,"line":231},[37,9237,3549],{"class":43},[37,9239,8499],{"class":47},[37,9241,62],{"class":43},[37,9243,9244,9246,9248,9250,9252,9254,9256,9258,9260,9262,9264,9266,9268,9270,9272,9274],{"class":39,"line":236},[37,9245,8738],{"class":43},[37,9247,8508],{"class":47},[37,9249,8743],{"class":51},[37,9251,55],{"class":297},[37,9253,3495],{"class":43},[37,9255,3498],{"class":297},[37,9257,8752],{"class":51},[37,9259,3364],{"class":43},[37,9261,2237],{"class":8757},[37,9263,8760],{"class":297},[37,9265,8763],{"class":43},[37,9267,8766],{"class":297},[37,9269,8769],{"class":291},[37,9271,8772],{"class":43},[37,9273,8508],{"class":47},[37,9275,62],{"class":43},[37,9277,9278,9280,9282,9284,9286,9288,9290,9292,9294,9296,9298,9300,9302,9304,9306,9308],{"class":39,"line":242},[37,9279,8738],{"class":43},[37,9281,8508],{"class":47},[37,9283,8743],{"class":51},[37,9285,55],{"class":297},[37,9287,3495],{"class":43},[37,9289,3498],{"class":297},[37,9291,8752],{"class":51},[37,9293,3364],{"class":43},[37,9295,2237],{"class":8757},[37,9297,8760],{"class":297},[37,9299,8763],{"class":43},[37,9301,8803],{"class":297},[37,9303,8769],{"class":291},[37,9305,8808],{"class":43},[37,9307,8508],{"class":47},[37,9309,62],{"class":43},[37,9311,9312,9314,9316,9318,9320,9322,9324,9326,9328,9330,9332,9334],{"class":39,"line":270},[37,9313,8738],{"class":43},[37,9315,8508],{"class":47},[37,9317,8743],{"class":51},[37,9319,55],{"class":297},[37,9321,3495],{"class":43},[37,9323,3498],{"class":297},[37,9325,8752],{"class":51},[37,9327,3364],{"class":43},[37,9329,6610],{"class":291},[37,9331,8835],{"class":43},[37,9333,8508],{"class":47},[37,9335,62],{"class":43},[37,9337,9338,9340,9342],{"class":39,"line":1145},[37,9339,8844],{"class":43},[37,9341,8499],{"class":47},[37,9343,62],{"class":43},[37,9345,9346],{"class":39,"line":1151},[37,9347,120],{"emptyLinePlaceholder":119},[37,9349,9350,9352,9354],{"class":39,"line":1157},[37,9351,3549],{"class":43},[37,9353,48],{"class":291},[37,9355,62],{"class":43},[37,9357,9358,9360,9362,9364,9366,9368,9370,9372,9374,9376,9378,9380,9382,9384,9386],{"class":39,"line":1162},[37,9359,8738],{"class":43},[37,9361,3293],{"class":291},[37,9363,137],{"class":51},[37,9365,55],{"class":297},[37,9367,8596],{"class":58},[37,9369,4138],{"class":51},[37,9371,55],{"class":297},[37,9373,326],{"class":43},[37,9375,4235],{"class":291},[37,9377,332],{"class":43},[37,9379,3447],{"class":51},[37,9381,55],{"class":297},[37,9383,326],{"class":43},[37,9385,390],{"class":291},[37,9387,484],{"class":43},[37,9389,9390,9392,9394,9396,9398,9400,9402,9405,9407,9409,9411],{"class":39,"line":1168},[37,9391,8738],{"class":43},[37,9393,78],{"class":291},[37,9395,321],{"class":51},[37,9397,55],{"class":297},[37,9399,326],{"class":43},[37,9401,438],{"class":51},[37,9403,9404],{"class":43},"()} ",[37,9406,7002],{"class":51},[37,9408,55],{"class":297},[37,9410,8596],{"class":58},[37,9412,113],{"class":43},[37,9414,9415,9417,9419],{"class":39,"line":1191},[37,9416,8844],{"class":43},[37,9418,48],{"class":291},[37,9420,62],{"class":43},[37,9422,9423],{"class":39,"line":1197},[37,9424,8926],{"class":43},[37,9426,9427],{"class":39,"line":8929},[37,9428,3573],{"class":43},[37,9430,9431],{"class":39,"line":8934},[37,9432,312],{"class":43},[27,9434,9436],{"className":987,"code":9435,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'mask', props: { radius: 0.8, visible: false } },\n { type: 'LinearGradient', id: 'gradient', props: { angle: 0, maskSource: 'mask' } }\n ]\n})\n\n// Update angle at runtime\nshader.update('gradient', { angle: 45 })\n\n// Reset angle\nshader.update('gradient', { angle: 0 })\n",[34,9437,9438,9450,9454,9468,9472,9492,9513,9517,9521,9525,9530,9550,9554,9559],{"__ignoreMap":32},[37,9439,9440,9442,9445,9447],{"class":39,"line":40},[37,9441,1382],{"class":297},[37,9443,9444],{"class":43}," { createShader } ",[37,9446,1388],{"class":297},[37,9448,9449],{"class":58}," 'shaders/js'\n",[37,9451,9452],{"class":39,"line":65},[37,9453,120],{"emptyLinePlaceholder":119},[37,9455,9456,9458,9460,9462,9464,9466],{"class":39,"line":72},[37,9457,2809],{"class":297},[37,9459,2812],{"class":291},[37,9461,2815],{"class":297},[37,9463,2818],{"class":297},[37,9465,999],{"class":51},[37,9467,1002],{"class":43},[37,9469,9470],{"class":39,"line":116},[37,9471,1007],{"class":43},[37,9473,9474,9476,9478,9480,9482,9484,9486,9488,9490],{"class":39,"line":123},[37,9475,1017],{"class":43},[37,9477,3941],{"class":58},[37,9479,3944],{"class":43},[37,9481,8095],{"class":58},[37,9483,5477],{"class":43},[37,9485,4235],{"class":291},[37,9487,7389],{"class":43},[37,9489,390],{"class":291},[37,9491,1046],{"class":43},[37,9493,9494,9496,9498,9500,9503,9505,9507,9509,9511],{"class":39,"line":129},[37,9495,1017],{"class":43},[37,9497,1020],{"class":58},[37,9499,3944],{"class":43},[37,9501,9502],{"class":58},"'gradient'",[37,9504,1023],{"class":43},[37,9506,6610],{"class":291},[37,9508,1184],{"class":43},[37,9510,8095],{"class":58},[37,9512,1142],{"class":43},[37,9514,9515],{"class":39,"line":171},[37,9516,1194],{"class":43},[37,9518,9519],{"class":39,"line":221},[37,9520,1200],{"class":43},[37,9522,9523],{"class":39,"line":231},[37,9524,120],{"emptyLinePlaceholder":119},[37,9526,9527],{"class":39,"line":236},[37,9528,9529],{"class":68},"// Update angle at runtime\n",[37,9531,9532,9535,9538,9540,9542,9545,9547],{"class":39,"line":242},[37,9533,9534],{"class":43},"shader.",[37,9536,9537],{"class":51},"update",[37,9539,3364],{"class":43},[37,9541,9502],{"class":58},[37,9543,9544],{"class":43},", { angle: ",[37,9546,2375],{"class":291},[37,9548,9549],{"class":43}," })\n",[37,9551,9552],{"class":39,"line":270},[37,9553,120],{"emptyLinePlaceholder":119},[37,9555,9556],{"class":39,"line":1145},[37,9557,9558],{"class":68},"// Reset angle\n",[37,9560,9561,9563,9565,9567,9569,9571,9573],{"class":39,"line":1151},[37,9562,9534],{"class":43},[37,9564,9537],{"class":51},[37,9566,3364],{"class":43},[37,9568,9502],{"class":58},[37,9570,9544],{"class":43},[37,9572,6610],{"class":291},[37,9574,9549],{"class":43},[15,9576,9577],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[9579,9580],"interactive-shader-demo",{":controls":9581,":preset":9582},"[{\"type\":\"button\",\"label\":\"Rotate +45°\",\"action\":\"increment\",\"prop\":\"angle\",\"value\":45},{\"type\":\"button\",\"label\":\"Rotate -45°\",\"action\":\"increment\",\"prop\":\"angle\",\"value\":-45},{\"type\":\"button\",\"label\":\"Reset\",\"action\":\"set\",\"prop\":\"angle\",\"value\":0}]","{\"components\":[{\"type\":\"Circle\",\"id\":\"mask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"angle\":0,\"maskSource\":\"mask\"}}]}",[15,9584,9585],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[1202,9587,9589],{"id":9588},"common-reactive-props","Common Reactive Props",[15,9591,9592],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,9594,9595,2630],{},[1306,9596,9597],{},"Position and Size",[27,9599,9601],{"className":6954,"code":9600,"language":6956,"meta":32,"style":32},"\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" />\n",[34,9602,9603],{"__ignoreMap":32},[37,9604,9605,9607,9609,9611,9614,9616,9619,9622,9624,9626,9628,9630,9632,9635,9637],{"class":39,"line":40},[37,9606,44],{"class":43},[37,9608,3293],{"class":47},[37,9610,3527],{"class":43},[37,9612,9613],{"class":51},"radius",[37,9615,55],{"class":43},[37,9617,9618],{"class":58},"\"",[37,9620,9621],{"class":43},"size",[37,9623,9618],{"class":58},[37,9625,3527],{"class":43},[37,9627,6178],{"class":51},[37,9629,55],{"class":43},[37,9631,9618],{"class":58},[37,9633,9634],{"class":43},"{ x: posX, y: posY }",[37,9636,9618],{"class":58},[37,9638,113],{"class":43},[15,9640,9641,2630],{},[1306,9642,9643],{},"Colors",[27,9645,9647],{"className":6954,"code":9646,"language":6956,"meta":32,"style":32},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" />\n",[34,9648,9649],{"__ignoreMap":32},[37,9650,9651,9653,9655,9657,9659,9661,9663,9666,9668,9670,9672,9674,9676,9679,9681],{"class":39,"line":40},[37,9652,44],{"class":43},[37,9654,78],{"class":47},[37,9656,3527],{"class":43},[37,9658,2929],{"class":51},[37,9660,55],{"class":43},[37,9662,9618],{"class":58},[37,9664,9665],{"class":43},"startColor",[37,9667,9618],{"class":58},[37,9669,3527],{"class":43},[37,9671,2933],{"class":51},[37,9673,55],{"class":43},[37,9675,9618],{"class":58},[37,9677,9678],{"class":43},"endColor",[37,9680,9618],{"class":58},[37,9682,113],{"class":43},[15,9684,9685,2630],{},[1306,9686,9687],{},"Intensity and Strength",[27,9689,9691],{"className":6954,"code":9690,"language":6956,"meta":32,"style":32},"\u003CBlur :intensity=\"blurAmount\" />\n\u003CGlow :strength=\"glowPower\" />\n",[34,9692,9693,9716],{"__ignoreMap":32},[37,9694,9695,9697,9700,9702,9705,9707,9709,9712,9714],{"class":39,"line":40},[37,9696,44],{"class":43},[37,9698,9699],{"class":47},"Blur",[37,9701,3527],{"class":43},[37,9703,9704],{"class":51},"intensity",[37,9706,55],{"class":43},[37,9708,9618],{"class":58},[37,9710,9711],{"class":43},"blurAmount",[37,9713,9618],{"class":58},[37,9715,113],{"class":43},[37,9717,9718,9720,9723,9725,9728,9730,9732,9735,9737],{"class":39,"line":65},[37,9719,44],{"class":43},[37,9721,9722],{"class":47},"Glow",[37,9724,3527],{"class":43},[37,9726,9727],{"class":51},"strength",[37,9729,55],{"class":43},[37,9731,9618],{"class":58},[37,9733,9734],{"class":43},"glowPower",[37,9736,9618],{"class":58},[37,9738,113],{"class":43},[15,9740,9741,2630],{},[1306,9742,9743],{},"Angles and Rotation",[27,9745,9747],{"className":6954,"code":9746,"language":6956,"meta":32,"style":32},"\u003CLinearGradient :angle=\"rotation\" />\n",[34,9748,9749],{"__ignoreMap":32},[37,9750,9751,9753,9755,9757,9759,9761,9763,9766,9768],{"class":39,"line":40},[37,9752,44],{"class":43},[37,9754,78],{"class":47},[37,9756,3527],{"class":43},[37,9758,438],{"class":51},[37,9760,55],{"class":43},[37,9762,9618],{"class":58},[37,9764,9765],{"class":43},"rotation",[37,9767,9618],{"class":58},[37,9769,113],{"class":43},[15,9771,9772],{},"Every numerical prop, color prop, and position prop can be reactive. Bind them to sliders, scroll position, mouse coordinates, or any other dynamic value.",[1202,9774,9776],{"id":9775},"animating-props","Animating Props",[15,9778,9779],{},"Props aren't just for user interactions—they're perfect for animations too. Animation libraries like Motion make it easy to create smooth, choreographed transitions.",[15,9781,9782,9785],{},[1306,9783,9784],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte/Solid.",[27,9787,9789],{"className":280,"code":9788,"language":282,"meta":32,"style":32},"import { useState } from 'react'\nimport { animate } from 'motion'\nimport { Shader, LinearGradient, Circle } from 'shaders/react'\n\nfunction MyComponent() {\n const [radius, setRadius] = useState(0.6)\n\n async function pulse() {\n // Grow then shrink with smooth easing\n await animate(radius, 1, {\n duration: 0.5,\n easing: 'ease-out',\n onUpdate: (latest) => setRadius(latest)\n })\n await animate(1, 0.6, {\n duration: 0.5,\n easing: 'ease-in',\n onUpdate: (latest) => setRadius(latest)\n })\n }\n\n return (\n \u003C>\n \u003Cbutton onClick={pulse}>Pulse\u003C/button>\n\n \u003CShader>\n \u003CCircle id=\"mask\" radius={radius} visible={false} />\n \u003CLinearGradient maskSource=\"mask\" />\n \u003C/Shader>\n \u003C/>\n )\n}\n",[34,9790,9791,9801,9813,9823,9827,9835,9860,9864,9877,9882,9898,9907,9917,9939,9944,9960,9968,9977,9993,9997,10001,10005,10012,10017,10035,10040,10049,10079,10094,10103,10108,10113],{"__ignoreMap":32},[37,9792,9793,9795,9797,9799],{"class":39,"line":40},[37,9794,1382],{"class":297},[37,9796,3418],{"class":43},[37,9798,1388],{"class":297},[37,9800,3423],{"class":58},[37,9802,9803,9805,9808,9810],{"class":39,"line":65},[37,9804,1382],{"class":297},[37,9806,9807],{"class":43}," { animate } ",[37,9809,1388],{"class":297},[37,9811,9812],{"class":58}," 'motion'\n",[37,9814,9815,9817,9819,9821],{"class":39,"line":72},[37,9816,1382],{"class":297},[37,9818,8448],{"class":43},[37,9820,1388],{"class":297},[37,9822,1407],{"class":58},[37,9824,9825],{"class":39,"line":116},[37,9826,120],{"emptyLinePlaceholder":119},[37,9828,9829,9831,9833],{"class":39,"line":123},[37,9830,3378],{"class":297},[37,9832,8683],{"class":51},[37,9834,3384],{"class":43},[37,9836,9837,9839,9841,9843,9845,9848,9850,9852,9854,9856,9858],{"class":39,"line":129},[37,9838,3441],{"class":297},[37,9840,3444],{"class":43},[37,9842,9613],{"class":291},[37,9844,2961],{"class":43},[37,9846,9847],{"class":291},"setRadius",[37,9849,3455],{"class":43},[37,9851,55],{"class":297},[37,9853,3460],{"class":51},[37,9855,3364],{"class":43},[37,9857,6173],{"class":291},[37,9859,3369],{"class":43},[37,9861,9862],{"class":39,"line":171},[37,9863,120],{"emptyLinePlaceholder":119},[37,9865,9866,9869,9872,9875],{"class":39,"line":221},[37,9867,9868],{"class":297}," async",[37,9870,9871],{"class":297}," function",[37,9873,9874],{"class":51}," pulse",[37,9876,3384],{"class":43},[37,9878,9879],{"class":39,"line":231},[37,9880,9881],{"class":68}," // Grow then shrink with smooth easing\n",[37,9883,9884,9887,9890,9893,9895],{"class":39,"line":236},[37,9885,9886],{"class":297}," await",[37,9888,9889],{"class":51}," animate",[37,9891,9892],{"class":43},"(radius, ",[37,9894,6614],{"class":291},[37,9896,9897],{"class":43},", {\n",[37,9899,9900,9903,9905],{"class":39,"line":242},[37,9901,9902],{"class":43}," duration: ",[37,9904,5689],{"class":291},[37,9906,1071],{"class":43},[37,9908,9909,9912,9915],{"class":39,"line":270},[37,9910,9911],{"class":43}," easing: ",[37,9913,9914],{"class":58},"'ease-out'",[37,9916,1071],{"class":43},[37,9918,9919,9922,9925,9928,9931,9933,9936],{"class":39,"line":1145},[37,9920,9921],{"class":51}," onUpdate",[37,9923,9924],{"class":43},": (",[37,9926,9927],{"class":8757},"latest",[37,9929,9930],{"class":43},") ",[37,9932,3498],{"class":297},[37,9934,9935],{"class":51}," setRadius",[37,9937,9938],{"class":43},"(latest)\n",[37,9940,9941],{"class":39,"line":1151},[37,9942,9943],{"class":43}," })\n",[37,9945,9946,9948,9950,9952,9954,9956,9958],{"class":39,"line":1157},[37,9947,9886],{"class":297},[37,9949,9889],{"class":51},[37,9951,3364],{"class":43},[37,9953,6614],{"class":291},[37,9955,2961],{"class":43},[37,9957,6173],{"class":291},[37,9959,9897],{"class":43},[37,9961,9962,9964,9966],{"class":39,"line":1162},[37,9963,9902],{"class":43},[37,9965,5689],{"class":291},[37,9967,1071],{"class":43},[37,9969,9970,9972,9975],{"class":39,"line":1168},[37,9971,9911],{"class":43},[37,9973,9974],{"class":58},"'ease-in'",[37,9976,1071],{"class":43},[37,9978,9979,9981,9983,9985,9987,9989,9991],{"class":39,"line":1191},[37,9980,9921],{"class":51},[37,9982,9924],{"class":43},[37,9984,9927],{"class":8757},[37,9986,9930],{"class":43},[37,9988,3498],{"class":297},[37,9990,9935],{"class":51},[37,9992,9938],{"class":43},[37,9994,9995],{"class":39,"line":1197},[37,9996,9943],{"class":43},[37,9998,9999],{"class":39,"line":8929},[37,10000,3991],{"class":43},[37,10002,10003],{"class":39,"line":8934},[37,10004,120],{"emptyLinePlaceholder":119},[37,10006,10008,10010],{"class":39,"line":10007},22,[37,10009,3475],{"class":297},[37,10011,3478],{"class":43},[37,10013,10015],{"class":39,"line":10014},23,[37,10016,8725],{"class":43},[37,10018,10020,10022,10024,10026,10028,10031,10033],{"class":39,"line":10019},24,[37,10021,3549],{"class":43},[37,10023,8508],{"class":47},[37,10025,8743],{"class":51},[37,10027,55],{"class":297},[37,10029,10030],{"class":43},"{pulse}>Pulse\u003C/",[37,10032,8508],{"class":47},[37,10034,62],{"class":43},[37,10036,10038],{"class":39,"line":10037},25,[37,10039,120],{"emptyLinePlaceholder":119},[37,10041,10043,10045,10047],{"class":39,"line":10042},26,[37,10044,3549],{"class":43},[37,10046,48],{"class":291},[37,10048,62],{"class":43},[37,10050,10052,10054,10056,10058,10060,10062,10064,10066,10069,10071,10073,10075,10077],{"class":39,"line":10051},27,[37,10053,8738],{"class":43},[37,10055,3293],{"class":291},[37,10057,137],{"class":51},[37,10059,55],{"class":297},[37,10061,8596],{"class":58},[37,10063,4138],{"class":51},[37,10065,55],{"class":297},[37,10067,10068],{"class":43},"{radius} ",[37,10070,3447],{"class":51},[37,10072,55],{"class":297},[37,10074,326],{"class":43},[37,10076,390],{"class":291},[37,10078,484],{"class":43},[37,10080,10082,10084,10086,10088,10090,10092],{"class":39,"line":10081},28,[37,10083,8738],{"class":43},[37,10085,78],{"class":291},[37,10087,526],{"class":51},[37,10089,55],{"class":297},[37,10091,8596],{"class":58},[37,10093,113],{"class":43},[37,10095,10097,10099,10101],{"class":39,"line":10096},29,[37,10098,8844],{"class":43},[37,10100,48],{"class":291},[37,10102,62],{"class":43},[37,10104,10106],{"class":39,"line":10105},30,[37,10107,8926],{"class":43},[37,10109,10111],{"class":39,"line":10110},31,[37,10112,3573],{"class":43},[37,10114,10116],{"class":39,"line":10115},32,[37,10117,312],{"class":43},[9579,10119],{":controls":10120,":preset":10121},"[{\"type\":\"button\",\"label\":\"Pulse\",\"action\":\"sequence\",\"sequence\":[{\"prop\":\"radius\",\"to\":1,\"duration\":500,\"easing\":\"ease-out\"},{\"prop\":\"radius\",\"to\":0.6,\"duration\":500,\"easing\":\"ease-in\"}]}]","{\"components\":[{\"type\":\"Circle\",\"id\":\"mask\",\"props\":{\"radius\":0.6,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"mask\"}}]}",[15,10123,10124],{},"Motion handles the tweening automatically, giving you smooth animations with minimal code. Because prop updates are efficient, you can animate multiple properties simultaneously without performance concerns.",[1202,10126,10128],{"id":10127},"performance-notes","Performance Notes",[15,10130,10131],{},"Reactive props update GPU uniforms directly. This means:",[2556,10133,10134,10140,10146],{},[2559,10135,10136,10139],{},[1306,10137,10138],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[2559,10141,10142,10145],{},[1306,10143,10144],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[2559,10147,10148,10151],{},[1306,10149,10150],{},"Frame-rate friendly",": Animate as many props as you need",[15,10153,10154],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[1311,10156,10157],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":32,"searchDepth":65,"depth":65,"links":10159},[10160,10161,10162,10163,10164],{"id":8183,"depth":65,"text":8184},{"id":8410,"depth":65,"text":8411},{"id":9588,"depth":65,"text":9589},{"id":9775,"depth":65,"text":9776},{"id":10127,"depth":65,"text":10128},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":2578,"description":10165},"docs/guide/4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":10172,"title":2571,"body":10173,"category":1320,"description":12940,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":12941,"meta":12942,"navigation":119,"path":2570,"seo":12943,"stem":12944,"__hash__":12945},"guide/docs/guide/5.layout-positioning.md",{"type":8,"value":10174,"toc":12924},[10175,10178,10186,10190,10199,10201,10206,10505,10509,10513,10516,10944,10948,10958,11306,11310,11313,11874,11878,11881,12195,12199,12203,12210,12351,12363,12367,12378,12453,12457,12460,12687,12691,12694,12921],[11,10176,2571],{"id":10177},"layout-positioning",[15,10179,2905,10180,10182,10183,10185],{},[34,10181,1296],{}," component renders a ",[34,10184,1214],{}," element — a standard HTML block element with no intrinsic size. You control its dimensions and position entirely through CSS, the same way you would any other element. Understanding this model unlocks the full range of creative possibilities.",[1202,10187,10189],{"id":10188},"the-canvas-model","The canvas model",[15,10191,10192,10193,10195,10196,10198],{},"Every ",[34,10194,1296],{}," renders exactly one ",[34,10197,1214],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[1202,10200,1687],{"id":1686},[15,10202,10203,10204,4552],{},"Apply classes or styles directly to the ",[34,10205,1296],{},[23,10207,10208,10327,10362,10397,10431],{":tabs":25},[27,10209,10211],{"className":29,"code":10210,"language":31,"meta":32,"style":32},"\u003C!-- Tailwind -->\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- CSS class -->\n\u003CShader class=\"hero-shader\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Inline -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,10212,10213,10218,10232,10240,10248,10252,10257,10272,10280,10288,10292,10297,10311,10319],{"__ignoreMap":32},[37,10214,10215],{"class":39,"line":40},[37,10216,10217],{"class":68},"\u003C!-- Tailwind -->\n",[37,10219,10220,10222,10224,10226,10228,10230],{"class":39,"line":65},[37,10221,44],{"class":43},[37,10223,48],{"class":47},[37,10225,52],{"class":51},[37,10227,55],{"class":43},[37,10229,59],{"class":58},[37,10231,62],{"class":43},[37,10233,10234,10236,10238],{"class":39,"line":72},[37,10235,75],{"class":43},[37,10237,78],{"class":47},[37,10239,113],{"class":43},[37,10241,10242,10244,10246],{"class":39,"line":116},[37,10243,273],{"class":43},[37,10245,48],{"class":47},[37,10247,62],{"class":43},[37,10249,10250],{"class":39,"line":123},[37,10251,120],{"emptyLinePlaceholder":119},[37,10253,10254],{"class":39,"line":129},[37,10255,10256],{"class":68},"\u003C!-- CSS class -->\n",[37,10258,10259,10261,10263,10265,10267,10270],{"class":39,"line":171},[37,10260,44],{"class":43},[37,10262,48],{"class":47},[37,10264,52],{"class":51},[37,10266,55],{"class":43},[37,10268,10269],{"class":58},"\"hero-shader\"",[37,10271,62],{"class":43},[37,10273,10274,10276,10278],{"class":39,"line":221},[37,10275,75],{"class":43},[37,10277,78],{"class":47},[37,10279,113],{"class":43},[37,10281,10282,10284,10286],{"class":39,"line":231},[37,10283,273],{"class":43},[37,10285,48],{"class":47},[37,10287,62],{"class":43},[37,10289,10290],{"class":39,"line":236},[37,10291,120],{"emptyLinePlaceholder":119},[37,10293,10294],{"class":39,"line":242},[37,10295,10296],{"class":68},"\u003C!-- Inline -->\n",[37,10298,10299,10301,10303,10305,10307,10309],{"class":39,"line":270},[37,10300,44],{"class":43},[37,10302,48],{"class":47},[37,10304,1751],{"class":51},[37,10306,55],{"class":43},[37,10308,1756],{"class":58},[37,10310,62],{"class":43},[37,10312,10313,10315,10317],{"class":39,"line":1145},[37,10314,75],{"class":43},[37,10316,78],{"class":47},[37,10318,113],{"class":43},[37,10320,10321,10323,10325],{"class":39,"line":1151},[37,10322,273],{"class":43},[37,10324,48],{"class":47},[37,10326,62],{"class":43},[27,10328,10330],{"className":280,"code":10329,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,10331,10332,10346,10354],{"__ignoreMap":32},[37,10333,10334,10336,10338,10340,10342,10344],{"class":39,"line":40},[37,10335,44],{"class":43},[37,10337,48],{"class":291},[37,10339,294],{"class":51},[37,10341,55],{"class":297},[37,10343,59],{"class":58},[37,10345,62],{"class":43},[37,10347,10348,10350,10352],{"class":39,"line":65},[37,10349,75],{"class":43},[37,10351,78],{"class":291},[37,10353,113],{"class":43},[37,10355,10356,10358,10360],{"class":39,"line":72},[37,10357,273],{"class":43},[37,10359,48],{"class":291},[37,10361,62],{"class":43},[27,10363,10365],{"className":543,"code":10364,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,10366,10367,10381,10389],{"__ignoreMap":32},[37,10368,10369,10371,10373,10375,10377,10379],{"class":39,"line":40},[37,10370,44],{"class":43},[37,10372,48],{"class":291},[37,10374,52],{"class":51},[37,10376,55],{"class":297},[37,10378,59],{"class":58},[37,10380,62],{"class":43},[37,10382,10383,10385,10387],{"class":39,"line":65},[37,10384,75],{"class":43},[37,10386,78],{"class":291},[37,10388,113],{"class":43},[37,10390,10391,10393,10395],{"class":39,"line":72},[37,10392,273],{"class":43},[37,10394,48],{"class":291},[37,10396,62],{"class":43},[27,10398,10399],{"className":543,"code":10364,"language":545,"meta":32,"style":32},[34,10400,10401,10415,10423],{"__ignoreMap":32},[37,10402,10403,10405,10407,10409,10411,10413],{"class":39,"line":40},[37,10404,44],{"class":43},[37,10406,48],{"class":291},[37,10408,52],{"class":51},[37,10410,55],{"class":297},[37,10412,59],{"class":58},[37,10414,62],{"class":43},[37,10416,10417,10419,10421],{"class":39,"line":65},[37,10418,75],{"class":43},[37,10420,78],{"class":291},[37,10422,113],{"class":43},[37,10424,10425,10427,10429],{"class":39,"line":72},[37,10426,273],{"class":43},[37,10428,48],{"class":291},[37,10430,62],{"class":43},[27,10432,10434],{"className":987,"code":10433,"language":989,"meta":32,"style":32},"// Apply sizing to the canvas element before calling createShader\nconst canvas = document.getElementById('my-shader')\ncanvas.style.width = '100%'\ncanvas.style.height = '400px'\n\nconst shader = await createShader(canvas, { components: [...] })\n",[34,10435,10436,10441,10460,10470,10480,10484],{"__ignoreMap":32},[37,10437,10438],{"class":39,"line":40},[37,10439,10440],{"class":68},"// Apply sizing to the canvas element before calling createShader\n",[37,10442,10443,10445,10447,10449,10451,10453,10455,10458],{"class":39,"line":65},[37,10444,2809],{"class":297},[37,10446,3868],{"class":291},[37,10448,2815],{"class":297},[37,10450,3873],{"class":43},[37,10452,3876],{"class":51},[37,10454,3364],{"class":43},[37,10456,10457],{"class":58},"'my-shader'",[37,10459,3369],{"class":43},[37,10461,10462,10465,10467],{"class":39,"line":72},[37,10463,10464],{"class":43},"canvas.style.width ",[37,10466,55],{"class":297},[37,10468,10469],{"class":58}," '100%'\n",[37,10471,10472,10475,10477],{"class":39,"line":116},[37,10473,10474],{"class":43},"canvas.style.height ",[37,10476,55],{"class":297},[37,10478,10479],{"class":58}," '400px'\n",[37,10481,10482],{"class":39,"line":123},[37,10483,120],{"emptyLinePlaceholder":119},[37,10485,10486,10488,10490,10492,10494,10496,10499,10502],{"class":39,"line":129},[37,10487,2809],{"class":297},[37,10489,2812],{"class":291},[37,10491,2815],{"class":297},[37,10493,2818],{"class":297},[37,10495,999],{"class":51},[37,10497,10498],{"class":43},"(canvas, { components: [",[37,10500,10501],{"class":297},"...",[37,10503,10504],{"class":43},"] })\n",[1202,10506,10508],{"id":10507},"common-layout-patterns","Common layout patterns",[3997,10510,10512],{"id":10511},"full-page-background","Full-page background",[15,10514,10515],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[23,10517,10518,10593,10670,10736,10809],{":tabs":25},[27,10519,10521],{"className":29,"code":10520,"language":31,"meta":32,"style":32},"\u003C!-- In your layout or App.vue -->\n\u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora />\n\u003C/Shader>\n\n\u003Cmain class=\"relative z-10\">\n \u003C!-- Your page content scrolls over the shader -->\n\u003C/main>\n",[34,10522,10523,10528,10543,10552,10560,10564,10580,10585],{"__ignoreMap":32},[37,10524,10525],{"class":39,"line":40},[37,10526,10527],{"class":68},"\u003C!-- In your layout or App.vue -->\n",[37,10529,10530,10532,10534,10536,10538,10541],{"class":39,"line":65},[37,10531,44],{"class":43},[37,10533,48],{"class":47},[37,10535,52],{"class":51},[37,10537,55],{"class":43},[37,10539,10540],{"class":58},"\"fixed inset-0 -z-10\"",[37,10542,62],{"class":43},[37,10544,10545,10547,10550],{"class":39,"line":72},[37,10546,75],{"class":43},[37,10548,10549],{"class":47},"Aurora",[37,10551,113],{"class":43},[37,10553,10554,10556,10558],{"class":39,"line":116},[37,10555,273],{"class":43},[37,10557,48],{"class":47},[37,10559,62],{"class":43},[37,10561,10562],{"class":39,"line":123},[37,10563,120],{"emptyLinePlaceholder":119},[37,10565,10566,10568,10571,10573,10575,10578],{"class":39,"line":129},[37,10567,44],{"class":43},[37,10569,10570],{"class":47},"main",[37,10572,52],{"class":51},[37,10574,55],{"class":43},[37,10576,10577],{"class":58},"\"relative z-10\"",[37,10579,62],{"class":43},[37,10581,10582],{"class":39,"line":171},[37,10583,10584],{"class":68}," \u003C!-- Your page content scrolls over the shader -->\n",[37,10586,10587,10589,10591],{"class":39,"line":221},[37,10588,273],{"class":43},[37,10590,10570],{"class":47},[37,10592,62],{"class":43},[27,10594,10596],{"className":280,"code":10595,"language":282,"meta":32,"style":32},"\u003C>\n \u003CShader className=\"fixed inset-0 -z-10\">\n \u003CAurora />\n \u003C/Shader>\n \u003Cmain className=\"relative z-10\">\n {/* Your page content */}\n \u003C/main>\n\u003C/>\n",[34,10597,10598,10603,10617,10625,10633,10647,10657,10665],{"__ignoreMap":32},[37,10599,10600],{"class":39,"line":40},[37,10601,10602],{"class":43},"\u003C>\n",[37,10604,10605,10607,10609,10611,10613,10615],{"class":39,"line":65},[37,10606,75],{"class":43},[37,10608,48],{"class":291},[37,10610,294],{"class":51},[37,10612,55],{"class":297},[37,10614,10540],{"class":58},[37,10616,62],{"class":43},[37,10618,10619,10621,10623],{"class":39,"line":72},[37,10620,174],{"class":43},[37,10622,10549],{"class":291},[37,10624,113],{"class":43},[37,10626,10627,10629,10631],{"class":39,"line":116},[37,10628,224],{"class":43},[37,10630,48],{"class":291},[37,10632,62],{"class":43},[37,10634,10635,10637,10639,10641,10643,10645],{"class":39,"line":123},[37,10636,75],{"class":43},[37,10638,10570],{"class":47},[37,10640,294],{"class":51},[37,10642,55],{"class":297},[37,10644,10577],{"class":58},[37,10646,62],{"class":43},[37,10648,10649,10652,10655],{"class":39,"line":129},[37,10650,10651],{"class":43}," {",[37,10653,10654],{"class":68},"/* Your page content */",[37,10656,312],{"class":43},[37,10658,10659,10661,10663],{"class":39,"line":171},[37,10660,224],{"class":43},[37,10662,10570],{"class":47},[37,10664,62],{"class":43},[37,10666,10667],{"class":39,"line":221},[37,10668,10669],{"class":43},"\u003C/>\n",[27,10671,10673],{"className":543,"code":10672,"language":545,"meta":32,"style":32},"\u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora />\n\u003C/Shader>\n\n\u003Cmain class=\"relative z-10\">\n \u003C!-- Your page content -->\n\u003C/main>\n",[34,10674,10675,10689,10697,10705,10709,10723,10728],{"__ignoreMap":32},[37,10676,10677,10679,10681,10683,10685,10687],{"class":39,"line":40},[37,10678,44],{"class":43},[37,10680,48],{"class":291},[37,10682,52],{"class":51},[37,10684,55],{"class":297},[37,10686,10540],{"class":58},[37,10688,62],{"class":43},[37,10690,10691,10693,10695],{"class":39,"line":65},[37,10692,75],{"class":43},[37,10694,10549],{"class":291},[37,10696,113],{"class":43},[37,10698,10699,10701,10703],{"class":39,"line":72},[37,10700,273],{"class":43},[37,10702,48],{"class":291},[37,10704,62],{"class":43},[37,10706,10707],{"class":39,"line":116},[37,10708,120],{"emptyLinePlaceholder":119},[37,10710,10711,10713,10715,10717,10719,10721],{"class":39,"line":123},[37,10712,44],{"class":43},[37,10714,10570],{"class":47},[37,10716,52],{"class":51},[37,10718,55],{"class":297},[37,10720,10577],{"class":58},[37,10722,62],{"class":43},[37,10724,10725],{"class":39,"line":129},[37,10726,10727],{"class":43}," \u003C!-- Your page content -->\n",[37,10729,10730,10732,10734],{"class":39,"line":171},[37,10731,273],{"class":43},[37,10733,10570],{"class":47},[37,10735,62],{"class":43},[27,10737,10739],{"className":543,"code":10738,"language":545,"meta":32,"style":32},"\u003C>\n \u003CShader class=\"fixed inset-0 -z-10\">\n \u003CAurora />\n \u003C/Shader>\n \u003Cmain class=\"relative z-10\">\n {/* Your page content */}\n \u003C/main>\n\u003C/>\n",[34,10740,10741,10745,10759,10767,10775,10789,10797,10805],{"__ignoreMap":32},[37,10742,10743],{"class":39,"line":40},[37,10744,10602],{"class":43},[37,10746,10747,10749,10751,10753,10755,10757],{"class":39,"line":65},[37,10748,75],{"class":43},[37,10750,48],{"class":291},[37,10752,52],{"class":51},[37,10754,55],{"class":297},[37,10756,10540],{"class":58},[37,10758,62],{"class":43},[37,10760,10761,10763,10765],{"class":39,"line":72},[37,10762,174],{"class":43},[37,10764,10549],{"class":291},[37,10766,113],{"class":43},[37,10768,10769,10771,10773],{"class":39,"line":116},[37,10770,224],{"class":43},[37,10772,48],{"class":291},[37,10774,62],{"class":43},[37,10776,10777,10779,10781,10783,10785,10787],{"class":39,"line":123},[37,10778,75],{"class":43},[37,10780,10570],{"class":47},[37,10782,52],{"class":51},[37,10784,55],{"class":297},[37,10786,10577],{"class":58},[37,10788,62],{"class":43},[37,10790,10791,10793,10795],{"class":39,"line":129},[37,10792,10651],{"class":43},[37,10794,10654],{"class":68},[37,10796,312],{"class":43},[37,10798,10799,10801,10803],{"class":39,"line":171},[37,10800,224],{"class":43},[37,10802,10570],{"class":47},[37,10804,62],{"class":43},[37,10806,10807],{"class":39,"line":221},[37,10808,10669],{"class":43},[27,10810,10814],{"className":10811,"code":10812,"language":10813,"meta":32,"style":32},"language-html shiki shiki-themes github-dark","\u003Ccanvas id=\"bg\" style=\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\">\u003C/canvas>\n\u003Cmain style=\"position:relative;z-index:10;\">Your content\u003C/main>\n\n\u003Cscript type=\"module\">\n import { createShader } from 'shaders/js'\n const shader = await createShader(document.getElementById('bg'), {\n components: [{ type: 'Aurora', props: {} }]\n })\n\u003C/script>\n","html",[34,10815,10816,10844,10864,10868,10884,10895,10920,10931,10936],{"__ignoreMap":32},[37,10817,10818,10820,10823,10825,10827,10830,10832,10834,10837,10840,10842],{"class":39,"line":40},[37,10819,44],{"class":43},[37,10821,10822],{"class":47},"canvas",[37,10824,137],{"class":51},[37,10826,55],{"class":43},[37,10828,10829],{"class":58},"\"bg\"",[37,10831,1751],{"class":51},[37,10833,55],{"class":43},[37,10835,10836],{"class":58},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[37,10838,10839],{"class":43},">\u003C/",[37,10841,10822],{"class":47},[37,10843,62],{"class":43},[37,10845,10846,10848,10850,10852,10854,10857,10860,10862],{"class":39,"line":65},[37,10847,44],{"class":43},[37,10849,10570],{"class":47},[37,10851,1751],{"class":51},[37,10853,55],{"class":43},[37,10855,10856],{"class":58},"\"position:relative;z-index:10;\"",[37,10858,10859],{"class":43},">Your content\u003C/",[37,10861,10570],{"class":47},[37,10863,62],{"class":43},[37,10865,10866],{"class":39,"line":72},[37,10867,120],{"emptyLinePlaceholder":119},[37,10869,10870,10872,10874,10877,10879,10882],{"class":39,"line":116},[37,10871,44],{"class":43},[37,10873,3329],{"class":47},[37,10875,10876],{"class":51}," type",[37,10878,55],{"class":43},[37,10880,10881],{"class":58},"\"module\"",[37,10883,62],{"class":43},[37,10885,10886,10889,10891,10893],{"class":39,"line":123},[37,10887,10888],{"class":297}," import",[37,10890,9444],{"class":43},[37,10892,1388],{"class":297},[37,10894,9449],{"class":58},[37,10896,10897,10899,10901,10903,10905,10907,10910,10912,10914,10917],{"class":39,"line":129},[37,10898,3441],{"class":297},[37,10900,2812],{"class":291},[37,10902,2815],{"class":297},[37,10904,2818],{"class":297},[37,10906,999],{"class":51},[37,10908,10909],{"class":43},"(document.",[37,10911,3876],{"class":51},[37,10913,3364],{"class":43},[37,10915,10916],{"class":58},"'bg'",[37,10918,10919],{"class":43},"), {\n",[37,10921,10922,10925,10928],{"class":39,"line":171},[37,10923,10924],{"class":43}," components: [{ type: ",[37,10926,10927],{"class":58},"'Aurora'",[37,10929,10930],{"class":43},", props: {} }]\n",[37,10932,10933],{"class":39,"line":221},[37,10934,10935],{"class":43}," })\n",[37,10937,10938,10940,10942],{"class":39,"line":231},[37,10939,273],{"class":43},[37,10941,3329],{"class":47},[37,10943,62],{"class":43},[3997,10945,10947],{"id":10946},"section-background","Section background",[15,10949,10950,10951,2930,10954,10957],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[34,10952,10953],{},"position: relative",[34,10955,10956],{},"overflow: hidden"," to contain the canvas:",[23,10959,10960,11064,11157,11232],{":tabs":1372},[27,10961,10963],{"className":29,"code":10962,"language":31,"meta":32,"style":32},"\u003Csection class=\"relative overflow-hidden py-24 px-8\">\n \u003CShader class=\"absolute inset-0 -z-10\">\n \u003CPlasma />\n \u003C/Shader>\n\n \u003Ch2 class=\"relative text-4xl font-bold text-white\">Section Heading\u003C/h2>\n \u003Cp class=\"relative text-white/80 mt-4\">Content above the shader.\u003C/p>\n\u003C/section>\n",[34,10964,10965,10981,10995,11004,11012,11016,11036,11056],{"__ignoreMap":32},[37,10966,10967,10969,10972,10974,10976,10979],{"class":39,"line":40},[37,10968,44],{"class":43},[37,10970,10971],{"class":47},"section",[37,10973,52],{"class":51},[37,10975,55],{"class":43},[37,10977,10978],{"class":58},"\"relative overflow-hidden py-24 px-8\"",[37,10980,62],{"class":43},[37,10982,10983,10985,10987,10989,10991,10993],{"class":39,"line":65},[37,10984,75],{"class":43},[37,10986,48],{"class":47},[37,10988,52],{"class":51},[37,10990,55],{"class":43},[37,10992,1233],{"class":58},[37,10994,62],{"class":43},[37,10996,10997,10999,11002],{"class":39,"line":72},[37,10998,174],{"class":43},[37,11000,11001],{"class":47},"Plasma",[37,11003,113],{"class":43},[37,11005,11006,11008,11010],{"class":39,"line":116},[37,11007,224],{"class":43},[37,11009,48],{"class":47},[37,11011,62],{"class":43},[37,11013,11014],{"class":39,"line":123},[37,11015,120],{"emptyLinePlaceholder":119},[37,11017,11018,11020,11022,11024,11026,11029,11032,11034],{"class":39,"line":129},[37,11019,75],{"class":43},[37,11021,1202],{"class":47},[37,11023,52],{"class":51},[37,11025,55],{"class":43},[37,11027,11028],{"class":58},"\"relative text-4xl font-bold text-white\"",[37,11030,11031],{"class":43},">Section Heading\u003C/",[37,11033,1202],{"class":47},[37,11035,62],{"class":43},[37,11037,11038,11040,11042,11044,11046,11049,11052,11054],{"class":39,"line":171},[37,11039,75],{"class":43},[37,11041,15],{"class":47},[37,11043,52],{"class":51},[37,11045,55],{"class":43},[37,11047,11048],{"class":58},"\"relative text-white/80 mt-4\"",[37,11050,11051],{"class":43},">Content above the shader.\u003C/",[37,11053,15],{"class":47},[37,11055,62],{"class":43},[37,11057,11058,11060,11062],{"class":39,"line":221},[37,11059,273],{"class":43},[37,11061,10971],{"class":47},[37,11063,62],{"class":43},[27,11065,11067],{"className":280,"code":11066,"language":282,"meta":32,"style":32},"\u003Csection className=\"relative overflow-hidden py-24 px-8\">\n \u003CShader className=\"absolute inset-0 -z-10\">\n \u003CPlasma />\n \u003C/Shader>\n \u003Ch2 className=\"relative text-4xl font-bold text-white\">Section Heading\u003C/h2>\n \u003Cp className=\"relative text-white/80 mt-4\">Content above the shader.\u003C/p>\n\u003C/section>\n",[34,11068,11069,11083,11097,11105,11113,11131,11149],{"__ignoreMap":32},[37,11070,11071,11073,11075,11077,11079,11081],{"class":39,"line":40},[37,11072,44],{"class":43},[37,11074,10971],{"class":47},[37,11076,294],{"class":51},[37,11078,55],{"class":297},[37,11080,10978],{"class":58},[37,11082,62],{"class":43},[37,11084,11085,11087,11089,11091,11093,11095],{"class":39,"line":65},[37,11086,75],{"class":43},[37,11088,48],{"class":291},[37,11090,294],{"class":51},[37,11092,55],{"class":297},[37,11094,1233],{"class":58},[37,11096,62],{"class":43},[37,11098,11099,11101,11103],{"class":39,"line":72},[37,11100,174],{"class":43},[37,11102,11001],{"class":291},[37,11104,113],{"class":43},[37,11106,11107,11109,11111],{"class":39,"line":116},[37,11108,224],{"class":43},[37,11110,48],{"class":291},[37,11112,62],{"class":43},[37,11114,11115,11117,11119,11121,11123,11125,11127,11129],{"class":39,"line":123},[37,11116,75],{"class":43},[37,11118,1202],{"class":47},[37,11120,294],{"class":51},[37,11122,55],{"class":297},[37,11124,11028],{"class":58},[37,11126,11031],{"class":43},[37,11128,1202],{"class":47},[37,11130,62],{"class":43},[37,11132,11133,11135,11137,11139,11141,11143,11145,11147],{"class":39,"line":129},[37,11134,75],{"class":43},[37,11136,15],{"class":47},[37,11138,294],{"class":51},[37,11140,55],{"class":297},[37,11142,11048],{"class":58},[37,11144,11051],{"class":43},[37,11146,15],{"class":47},[37,11148,62],{"class":43},[37,11150,11151,11153,11155],{"class":39,"line":171},[37,11152,273],{"class":43},[37,11154,10971],{"class":47},[37,11156,62],{"class":43},[27,11158,11160],{"className":543,"code":11159,"language":545,"meta":32,"style":32},"\u003Csection class=\"relative overflow-hidden py-24 px-8\">\n \u003CShader class=\"absolute inset-0 -z-10\">\n \u003CPlasma />\n \u003C/Shader>\n \u003Ch2 class=\"relative text-4xl font-bold text-white\">Section Heading\u003C/h2>\n\u003C/section>\n",[34,11161,11162,11176,11190,11198,11206,11224],{"__ignoreMap":32},[37,11163,11164,11166,11168,11170,11172,11174],{"class":39,"line":40},[37,11165,44],{"class":43},[37,11167,10971],{"class":47},[37,11169,52],{"class":51},[37,11171,55],{"class":297},[37,11173,10978],{"class":58},[37,11175,62],{"class":43},[37,11177,11178,11180,11182,11184,11186,11188],{"class":39,"line":65},[37,11179,75],{"class":43},[37,11181,48],{"class":291},[37,11183,52],{"class":51},[37,11185,55],{"class":297},[37,11187,1233],{"class":58},[37,11189,62],{"class":43},[37,11191,11192,11194,11196],{"class":39,"line":72},[37,11193,174],{"class":43},[37,11195,11001],{"class":291},[37,11197,113],{"class":43},[37,11199,11200,11202,11204],{"class":39,"line":116},[37,11201,224],{"class":43},[37,11203,48],{"class":291},[37,11205,62],{"class":43},[37,11207,11208,11210,11212,11214,11216,11218,11220,11222],{"class":39,"line":123},[37,11209,75],{"class":43},[37,11211,1202],{"class":47},[37,11213,52],{"class":51},[37,11215,55],{"class":297},[37,11217,11028],{"class":58},[37,11219,11031],{"class":43},[37,11221,1202],{"class":47},[37,11223,62],{"class":43},[37,11225,11226,11228,11230],{"class":39,"line":129},[37,11227,273],{"class":43},[37,11229,10971],{"class":47},[37,11231,62],{"class":43},[27,11233,11234],{"className":543,"code":11159,"language":545,"meta":32,"style":32},[34,11235,11236,11250,11264,11272,11280,11298],{"__ignoreMap":32},[37,11237,11238,11240,11242,11244,11246,11248],{"class":39,"line":40},[37,11239,44],{"class":43},[37,11241,10971],{"class":47},[37,11243,52],{"class":51},[37,11245,55],{"class":297},[37,11247,10978],{"class":58},[37,11249,62],{"class":43},[37,11251,11252,11254,11256,11258,11260,11262],{"class":39,"line":65},[37,11253,75],{"class":43},[37,11255,48],{"class":291},[37,11257,52],{"class":51},[37,11259,55],{"class":297},[37,11261,1233],{"class":58},[37,11263,62],{"class":43},[37,11265,11266,11268,11270],{"class":39,"line":72},[37,11267,174],{"class":43},[37,11269,11001],{"class":291},[37,11271,113],{"class":43},[37,11273,11274,11276,11278],{"class":39,"line":116},[37,11275,224],{"class":43},[37,11277,48],{"class":291},[37,11279,62],{"class":43},[37,11281,11282,11284,11286,11288,11290,11292,11294,11296],{"class":39,"line":123},[37,11283,75],{"class":43},[37,11285,1202],{"class":47},[37,11287,52],{"class":51},[37,11289,55],{"class":297},[37,11291,11028],{"class":58},[37,11293,11031],{"class":43},[37,11295,1202],{"class":47},[37,11297,62],{"class":43},[37,11299,11300,11302,11304],{"class":39,"line":129},[37,11301,273],{"class":43},[37,11303,10971],{"class":47},[37,11305,62],{"class":43},[3997,11307,11309],{"id":11308},"card-with-shader-fill","Card with shader fill",[15,11311,11312],{},"A shader used as the visual background of a card or panel:",[23,11314,11315,11475,11621,11748],{":tabs":1372},[27,11316,11318],{"className":29,"code":11317,"language":31,"meta":32,"style":32},"\u003Cdiv class=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader class=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" />\n \u003CGlow :intensity=\"0.4\" color=\"#6366f1\" />\n \u003C/Shader>\n\n \u003C!-- Content sits above the shader -->\n \u003Cdiv class=\"relative z-10\">\n \u003Ch3 class=\"text-xl font-semibold\">Card Title\u003C/h3>\n \u003Cp class=\"text-white/70 mt-2\">Card description here.\u003C/p>\n \u003C/div>\n\u003C/div>\n",[34,11319,11320,11335,11350,11365,11388,11396,11400,11405,11419,11439,11459,11467],{"__ignoreMap":32},[37,11321,11322,11324,11326,11328,11330,11333],{"class":39,"line":40},[37,11323,44],{"class":43},[37,11325,8499],{"class":47},[37,11327,52],{"class":51},[37,11329,55],{"class":43},[37,11331,11332],{"class":58},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[37,11334,62],{"class":43},[37,11336,11337,11339,11341,11343,11345,11348],{"class":39,"line":65},[37,11338,75],{"class":43},[37,11340,48],{"class":47},[37,11342,52],{"class":51},[37,11344,55],{"class":43},[37,11346,11347],{"class":58},"\"absolute inset-0\"",[37,11349,62],{"class":43},[37,11351,11352,11354,11356,11358,11360,11363],{"class":39,"line":72},[37,11353,174],{"class":43},[37,11355,2659],{"class":47},[37,11357,2662],{"class":51},[37,11359,55],{"class":43},[37,11361,11362],{"class":58},"\"#1e1b4b\"",[37,11364,113],{"class":43},[37,11366,11367,11369,11371,11374,11376,11379,11381,11383,11386],{"class":39,"line":116},[37,11368,174],{"class":43},[37,11370,9722],{"class":47},[37,11372,11373],{"class":51}," :intensity",[37,11375,55],{"class":43},[37,11377,11378],{"class":58},"\"0.4\"",[37,11380,2662],{"class":51},[37,11382,55],{"class":43},[37,11384,11385],{"class":58},"\"#6366f1\"",[37,11387,113],{"class":43},[37,11389,11390,11392,11394],{"class":39,"line":123},[37,11391,224],{"class":43},[37,11393,48],{"class":47},[37,11395,62],{"class":43},[37,11397,11398],{"class":39,"line":129},[37,11399,120],{"emptyLinePlaceholder":119},[37,11401,11402],{"class":39,"line":171},[37,11403,11404],{"class":68}," \u003C!-- Content sits above the shader -->\n",[37,11406,11407,11409,11411,11413,11415,11417],{"class":39,"line":221},[37,11408,75],{"class":43},[37,11410,8499],{"class":47},[37,11412,52],{"class":51},[37,11414,55],{"class":43},[37,11416,10577],{"class":58},[37,11418,62],{"class":43},[37,11420,11421,11423,11425,11427,11429,11432,11435,11437],{"class":39,"line":231},[37,11422,174],{"class":43},[37,11424,3997],{"class":47},[37,11426,52],{"class":51},[37,11428,55],{"class":43},[37,11430,11431],{"class":58},"\"text-xl font-semibold\"",[37,11433,11434],{"class":43},">Card Title\u003C/",[37,11436,3997],{"class":47},[37,11438,62],{"class":43},[37,11440,11441,11443,11445,11447,11449,11452,11455,11457],{"class":39,"line":236},[37,11442,174],{"class":43},[37,11444,15],{"class":47},[37,11446,52],{"class":51},[37,11448,55],{"class":43},[37,11450,11451],{"class":58},"\"text-white/70 mt-2\"",[37,11453,11454],{"class":43},">Card description here.\u003C/",[37,11456,15],{"class":47},[37,11458,62],{"class":43},[37,11460,11461,11463,11465],{"class":39,"line":242},[37,11462,224],{"class":43},[37,11464,8499],{"class":47},[37,11466,62],{"class":43},[37,11468,11469,11471,11473],{"class":39,"line":270},[37,11470,273],{"class":43},[37,11472,8499],{"class":47},[37,11474,62],{"class":43},[27,11476,11478],{"className":280,"code":11477,"language":282,"meta":32,"style":32},"\u003Cdiv className=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader className=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" />\n \u003CGlow intensity={0.4} color=\"#6366f1\" />\n \u003C/Shader>\n \u003Cdiv className=\"relative z-10\">\n \u003Ch3 className=\"text-xl font-semibold\">Card Title\u003C/h3>\n \u003Cp className=\"text-white/70 mt-2\">Card description here.\u003C/p>\n \u003C/div>\n\u003C/div>\n",[34,11479,11480,11494,11508,11522,11547,11555,11569,11587,11605,11613],{"__ignoreMap":32},[37,11481,11482,11484,11486,11488,11490,11492],{"class":39,"line":40},[37,11483,44],{"class":43},[37,11485,8499],{"class":47},[37,11487,294],{"class":51},[37,11489,55],{"class":297},[37,11491,11332],{"class":58},[37,11493,62],{"class":43},[37,11495,11496,11498,11500,11502,11504,11506],{"class":39,"line":65},[37,11497,75],{"class":43},[37,11499,48],{"class":291},[37,11501,294],{"class":51},[37,11503,55],{"class":297},[37,11505,11347],{"class":58},[37,11507,62],{"class":43},[37,11509,11510,11512,11514,11516,11518,11520],{"class":39,"line":72},[37,11511,174],{"class":43},[37,11513,2659],{"class":291},[37,11515,2662],{"class":51},[37,11517,55],{"class":297},[37,11519,11362],{"class":58},[37,11521,113],{"class":43},[37,11523,11524,11526,11528,11531,11533,11535,11537,11539,11541,11543,11545],{"class":39,"line":116},[37,11525,174],{"class":43},[37,11527,9722],{"class":291},[37,11529,11530],{"class":51}," intensity",[37,11532,55],{"class":297},[37,11534,326],{"class":43},[37,11536,6186],{"class":291},[37,11538,332],{"class":43},[37,11540,5999],{"class":51},[37,11542,55],{"class":297},[37,11544,11385],{"class":58},[37,11546,113],{"class":43},[37,11548,11549,11551,11553],{"class":39,"line":123},[37,11550,224],{"class":43},[37,11552,48],{"class":291},[37,11554,62],{"class":43},[37,11556,11557,11559,11561,11563,11565,11567],{"class":39,"line":129},[37,11558,75],{"class":43},[37,11560,8499],{"class":47},[37,11562,294],{"class":51},[37,11564,55],{"class":297},[37,11566,10577],{"class":58},[37,11568,62],{"class":43},[37,11570,11571,11573,11575,11577,11579,11581,11583,11585],{"class":39,"line":171},[37,11572,174],{"class":43},[37,11574,3997],{"class":47},[37,11576,294],{"class":51},[37,11578,55],{"class":297},[37,11580,11431],{"class":58},[37,11582,11434],{"class":43},[37,11584,3997],{"class":47},[37,11586,62],{"class":43},[37,11588,11589,11591,11593,11595,11597,11599,11601,11603],{"class":39,"line":221},[37,11590,174],{"class":43},[37,11592,15],{"class":47},[37,11594,294],{"class":51},[37,11596,55],{"class":297},[37,11598,11451],{"class":58},[37,11600,11454],{"class":43},[37,11602,15],{"class":47},[37,11604,62],{"class":43},[37,11606,11607,11609,11611],{"class":39,"line":231},[37,11608,224],{"class":43},[37,11610,8499],{"class":47},[37,11612,62],{"class":43},[37,11614,11615,11617,11619],{"class":39,"line":236},[37,11616,273],{"class":43},[37,11618,8499],{"class":47},[37,11620,62],{"class":43},[27,11622,11624],{"className":543,"code":11623,"language":545,"meta":32,"style":32},"\u003Cdiv class=\"relative rounded-2xl overflow-hidden p-8 text-white\">\n \u003CShader class=\"absolute inset-0\">\n \u003CSolidColor color=\"#1e1b4b\" />\n \u003CGlow intensity={0.4} color=\"#6366f1\" />\n \u003C/Shader>\n \u003Cdiv class=\"relative z-10\">\n \u003Ch3 class=\"text-xl font-semibold\">Card Title\u003C/h3>\n \u003C/div>\n\u003C/div>\n",[34,11625,11626,11640,11654,11668,11692,11700,11714,11732,11740],{"__ignoreMap":32},[37,11627,11628,11630,11632,11634,11636,11638],{"class":39,"line":40},[37,11629,44],{"class":43},[37,11631,8499],{"class":47},[37,11633,52],{"class":51},[37,11635,55],{"class":297},[37,11637,11332],{"class":58},[37,11639,62],{"class":43},[37,11641,11642,11644,11646,11648,11650,11652],{"class":39,"line":65},[37,11643,75],{"class":43},[37,11645,48],{"class":291},[37,11647,52],{"class":51},[37,11649,55],{"class":297},[37,11651,11347],{"class":58},[37,11653,62],{"class":43},[37,11655,11656,11658,11660,11662,11664,11666],{"class":39,"line":72},[37,11657,174],{"class":43},[37,11659,2659],{"class":291},[37,11661,2662],{"class":51},[37,11663,55],{"class":297},[37,11665,11362],{"class":58},[37,11667,113],{"class":43},[37,11669,11670,11672,11674,11676,11678,11680,11682,11684,11686,11688,11690],{"class":39,"line":116},[37,11671,174],{"class":43},[37,11673,9722],{"class":291},[37,11675,11530],{"class":51},[37,11677,55],{"class":297},[37,11679,326],{"class":43},[37,11681,6186],{"class":291},[37,11683,332],{"class":43},[37,11685,5999],{"class":51},[37,11687,55],{"class":297},[37,11689,11385],{"class":58},[37,11691,113],{"class":43},[37,11693,11694,11696,11698],{"class":39,"line":123},[37,11695,224],{"class":43},[37,11697,48],{"class":291},[37,11699,62],{"class":43},[37,11701,11702,11704,11706,11708,11710,11712],{"class":39,"line":129},[37,11703,75],{"class":43},[37,11705,8499],{"class":47},[37,11707,52],{"class":51},[37,11709,55],{"class":297},[37,11711,10577],{"class":58},[37,11713,62],{"class":43},[37,11715,11716,11718,11720,11722,11724,11726,11728,11730],{"class":39,"line":171},[37,11717,174],{"class":43},[37,11719,3997],{"class":47},[37,11721,52],{"class":51},[37,11723,55],{"class":297},[37,11725,11431],{"class":58},[37,11727,11434],{"class":43},[37,11729,3997],{"class":47},[37,11731,62],{"class":43},[37,11733,11734,11736,11738],{"class":39,"line":221},[37,11735,224],{"class":43},[37,11737,8499],{"class":47},[37,11739,62],{"class":43},[37,11741,11742,11744,11746],{"class":39,"line":231},[37,11743,273],{"class":43},[37,11745,8499],{"class":47},[37,11747,62],{"class":43},[27,11749,11750],{"className":543,"code":11623,"language":545,"meta":32,"style":32},[34,11751,11752,11766,11780,11794,11818,11826,11840,11858,11866],{"__ignoreMap":32},[37,11753,11754,11756,11758,11760,11762,11764],{"class":39,"line":40},[37,11755,44],{"class":43},[37,11757,8499],{"class":47},[37,11759,52],{"class":51},[37,11761,55],{"class":297},[37,11763,11332],{"class":58},[37,11765,62],{"class":43},[37,11767,11768,11770,11772,11774,11776,11778],{"class":39,"line":65},[37,11769,75],{"class":43},[37,11771,48],{"class":291},[37,11773,52],{"class":51},[37,11775,55],{"class":297},[37,11777,11347],{"class":58},[37,11779,62],{"class":43},[37,11781,11782,11784,11786,11788,11790,11792],{"class":39,"line":72},[37,11783,174],{"class":43},[37,11785,2659],{"class":291},[37,11787,2662],{"class":51},[37,11789,55],{"class":297},[37,11791,11362],{"class":58},[37,11793,113],{"class":43},[37,11795,11796,11798,11800,11802,11804,11806,11808,11810,11812,11814,11816],{"class":39,"line":116},[37,11797,174],{"class":43},[37,11799,9722],{"class":291},[37,11801,11530],{"class":51},[37,11803,55],{"class":297},[37,11805,326],{"class":43},[37,11807,6186],{"class":291},[37,11809,332],{"class":43},[37,11811,5999],{"class":51},[37,11813,55],{"class":297},[37,11815,11385],{"class":58},[37,11817,113],{"class":43},[37,11819,11820,11822,11824],{"class":39,"line":123},[37,11821,224],{"class":43},[37,11823,48],{"class":291},[37,11825,62],{"class":43},[37,11827,11828,11830,11832,11834,11836,11838],{"class":39,"line":129},[37,11829,75],{"class":43},[37,11831,8499],{"class":47},[37,11833,52],{"class":51},[37,11835,55],{"class":297},[37,11837,10577],{"class":58},[37,11839,62],{"class":43},[37,11841,11842,11844,11846,11848,11850,11852,11854,11856],{"class":39,"line":171},[37,11843,174],{"class":43},[37,11845,3997],{"class":47},[37,11847,52],{"class":51},[37,11849,55],{"class":297},[37,11851,11431],{"class":58},[37,11853,11434],{"class":43},[37,11855,3997],{"class":47},[37,11857,62],{"class":43},[37,11859,11860,11862,11864],{"class":39,"line":221},[37,11861,224],{"class":43},[37,11863,8499],{"class":47},[37,11865,62],{"class":43},[37,11867,11868,11870,11872],{"class":39,"line":231},[37,11869,273],{"class":43},[37,11871,8499],{"class":47},[37,11873,62],{"class":43},[3997,11875,11877],{"id":11876},"inline-content-block","Inline content block",[15,11879,11880],{},"A shader that flows naturally in document layout, like an image or video:",[23,11882,11883,11971,12046,12121],{":tabs":1372},[27,11884,11886],{"className":29,"code":11885,"language":31,"meta":32,"style":32},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C/p>\n\n \u003CShader class=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl />\n \u003C/Shader>\n\n \u003Cp>Text after the shader continues here.\u003C/p>\n\u003C/article>\n",[34,11887,11888,11897,11910,11914,11929,11938,11946,11950,11963],{"__ignoreMap":32},[37,11889,11890,11892,11895],{"class":39,"line":40},[37,11891,44],{"class":43},[37,11893,11894],{"class":47},"article",[37,11896,62],{"class":43},[37,11898,11899,11901,11903,11906,11908],{"class":39,"line":65},[37,11900,75],{"class":43},[37,11902,15],{"class":47},[37,11904,11905],{"class":43},">Text before the shader.\u003C/",[37,11907,15],{"class":47},[37,11909,62],{"class":43},[37,11911,11912],{"class":39,"line":72},[37,11913,120],{"emptyLinePlaceholder":119},[37,11915,11916,11918,11920,11922,11924,11927],{"class":39,"line":116},[37,11917,75],{"class":43},[37,11919,48],{"class":47},[37,11921,52],{"class":51},[37,11923,55],{"class":43},[37,11925,11926],{"class":58},"\"w-full aspect-video my-8 rounded-xl\"",[37,11928,62],{"class":43},[37,11930,11931,11933,11936],{"class":39,"line":123},[37,11932,174],{"class":43},[37,11934,11935],{"class":47},"Swirl",[37,11937,113],{"class":43},[37,11939,11940,11942,11944],{"class":39,"line":129},[37,11941,224],{"class":43},[37,11943,48],{"class":47},[37,11945,62],{"class":43},[37,11947,11948],{"class":39,"line":171},[37,11949,120],{"emptyLinePlaceholder":119},[37,11951,11952,11954,11956,11959,11961],{"class":39,"line":221},[37,11953,75],{"class":43},[37,11955,15],{"class":47},[37,11957,11958],{"class":43},">Text after the shader continues here.\u003C/",[37,11960,15],{"class":47},[37,11962,62],{"class":43},[37,11964,11965,11967,11969],{"class":39,"line":231},[37,11966,273],{"class":43},[37,11968,11894],{"class":47},[37,11970,62],{"class":43},[27,11972,11974],{"className":280,"code":11973,"language":282,"meta":32,"style":32},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C/p>\n \u003CShader className=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl />\n \u003C/Shader>\n \u003Cp>Text after the shader continues here.\u003C/p>\n\u003C/article>\n",[34,11975,11976,11984,11996,12010,12018,12026,12038],{"__ignoreMap":32},[37,11977,11978,11980,11982],{"class":39,"line":40},[37,11979,44],{"class":43},[37,11981,11894],{"class":47},[37,11983,62],{"class":43},[37,11985,11986,11988,11990,11992,11994],{"class":39,"line":65},[37,11987,75],{"class":43},[37,11989,15],{"class":47},[37,11991,11905],{"class":43},[37,11993,15],{"class":47},[37,11995,62],{"class":43},[37,11997,11998,12000,12002,12004,12006,12008],{"class":39,"line":72},[37,11999,75],{"class":43},[37,12001,48],{"class":291},[37,12003,294],{"class":51},[37,12005,55],{"class":297},[37,12007,11926],{"class":58},[37,12009,62],{"class":43},[37,12011,12012,12014,12016],{"class":39,"line":116},[37,12013,174],{"class":43},[37,12015,11935],{"class":291},[37,12017,113],{"class":43},[37,12019,12020,12022,12024],{"class":39,"line":123},[37,12021,224],{"class":43},[37,12023,48],{"class":291},[37,12025,62],{"class":43},[37,12027,12028,12030,12032,12034,12036],{"class":39,"line":129},[37,12029,75],{"class":43},[37,12031,15],{"class":47},[37,12033,11958],{"class":43},[37,12035,15],{"class":47},[37,12037,62],{"class":43},[37,12039,12040,12042,12044],{"class":39,"line":171},[37,12041,273],{"class":43},[37,12043,11894],{"class":47},[37,12045,62],{"class":43},[27,12047,12049],{"className":543,"code":12048,"language":545,"meta":32,"style":32},"\u003Carticle>\n \u003Cp>Text before the shader.\u003C/p>\n \u003CShader class=\"w-full aspect-video my-8 rounded-xl\">\n \u003CSwirl />\n \u003C/Shader>\n \u003Cp>Text after the shader continues here.\u003C/p>\n\u003C/article>\n",[34,12050,12051,12059,12071,12085,12093,12101,12113],{"__ignoreMap":32},[37,12052,12053,12055,12057],{"class":39,"line":40},[37,12054,44],{"class":43},[37,12056,11894],{"class":47},[37,12058,62],{"class":43},[37,12060,12061,12063,12065,12067,12069],{"class":39,"line":65},[37,12062,75],{"class":43},[37,12064,15],{"class":47},[37,12066,11905],{"class":43},[37,12068,15],{"class":47},[37,12070,62],{"class":43},[37,12072,12073,12075,12077,12079,12081,12083],{"class":39,"line":72},[37,12074,75],{"class":43},[37,12076,48],{"class":291},[37,12078,52],{"class":51},[37,12080,55],{"class":297},[37,12082,11926],{"class":58},[37,12084,62],{"class":43},[37,12086,12087,12089,12091],{"class":39,"line":116},[37,12088,174],{"class":43},[37,12090,11935],{"class":291},[37,12092,113],{"class":43},[37,12094,12095,12097,12099],{"class":39,"line":123},[37,12096,224],{"class":43},[37,12098,48],{"class":291},[37,12100,62],{"class":43},[37,12102,12103,12105,12107,12109,12111],{"class":39,"line":129},[37,12104,75],{"class":43},[37,12106,15],{"class":47},[37,12108,11958],{"class":43},[37,12110,15],{"class":47},[37,12112,62],{"class":43},[37,12114,12115,12117,12119],{"class":39,"line":171},[37,12116,273],{"class":43},[37,12118,11894],{"class":47},[37,12120,62],{"class":43},[27,12122,12123],{"className":543,"code":12048,"language":545,"meta":32,"style":32},[34,12124,12125,12133,12145,12159,12167,12175,12187],{"__ignoreMap":32},[37,12126,12127,12129,12131],{"class":39,"line":40},[37,12128,44],{"class":43},[37,12130,11894],{"class":47},[37,12132,62],{"class":43},[37,12134,12135,12137,12139,12141,12143],{"class":39,"line":65},[37,12136,75],{"class":43},[37,12138,15],{"class":47},[37,12140,11905],{"class":43},[37,12142,15],{"class":47},[37,12144,62],{"class":43},[37,12146,12147,12149,12151,12153,12155,12157],{"class":39,"line":72},[37,12148,75],{"class":43},[37,12150,48],{"class":291},[37,12152,52],{"class":51},[37,12154,55],{"class":297},[37,12156,11926],{"class":58},[37,12158,62],{"class":43},[37,12160,12161,12163,12165],{"class":39,"line":116},[37,12162,174],{"class":43},[37,12164,11935],{"class":291},[37,12166,113],{"class":43},[37,12168,12169,12171,12173],{"class":39,"line":123},[37,12170,224],{"class":43},[37,12172,48],{"class":291},[37,12174,62],{"class":43},[37,12176,12177,12179,12181,12183,12185],{"class":39,"line":129},[37,12178,75],{"class":43},[37,12180,15],{"class":47},[37,12182,11958],{"class":43},[37,12184,15],{"class":47},[37,12186,62],{"class":43},[37,12188,12189,12191,12193],{"class":39,"line":171},[37,12190,273],{"class":43},[37,12192,11894],{"class":47},[37,12194,62],{"class":43},[1202,12196,12198],{"id":12197},"layering-content-over-shaders","Layering content over shaders",[3997,12200,12202],{"id":12201},"pointer-events","Pointer events",[15,12204,12205,12206,12209],{},"Canvases capture all pointer events by default. Add ",[34,12207,12208],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[23,12211,12212,12248,12283,12317],{":tabs":1372},[27,12213,12215],{"className":29,"code":12214,"language":31,"meta":32,"style":32},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[34,12216,12217,12232,12240],{"__ignoreMap":32},[37,12218,12219,12221,12223,12225,12227,12230],{"class":39,"line":40},[37,12220,44],{"class":43},[37,12222,48],{"class":47},[37,12224,52],{"class":51},[37,12226,55],{"class":43},[37,12228,12229],{"class":58},"\"absolute inset-0 pointer-events-none\"",[37,12231,62],{"class":43},[37,12233,12234,12236,12238],{"class":39,"line":65},[37,12235,75],{"class":43},[37,12237,10549],{"class":47},[37,12239,113],{"class":43},[37,12241,12242,12244,12246],{"class":39,"line":72},[37,12243,273],{"class":43},[37,12245,48],{"class":47},[37,12247,62],{"class":43},[27,12249,12251],{"className":280,"code":12250,"language":282,"meta":32,"style":32},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[34,12252,12253,12267,12275],{"__ignoreMap":32},[37,12254,12255,12257,12259,12261,12263,12265],{"class":39,"line":40},[37,12256,44],{"class":43},[37,12258,48],{"class":291},[37,12260,294],{"class":51},[37,12262,55],{"class":297},[37,12264,12229],{"class":58},[37,12266,62],{"class":43},[37,12268,12269,12271,12273],{"class":39,"line":65},[37,12270,75],{"class":43},[37,12272,10549],{"class":291},[37,12274,113],{"class":43},[37,12276,12277,12279,12281],{"class":39,"line":72},[37,12278,273],{"class":43},[37,12280,48],{"class":291},[37,12282,62],{"class":43},[27,12284,12285],{"className":543,"code":12214,"language":545,"meta":32,"style":32},[34,12286,12287,12301,12309],{"__ignoreMap":32},[37,12288,12289,12291,12293,12295,12297,12299],{"class":39,"line":40},[37,12290,44],{"class":43},[37,12292,48],{"class":291},[37,12294,52],{"class":51},[37,12296,55],{"class":297},[37,12298,12229],{"class":58},[37,12300,62],{"class":43},[37,12302,12303,12305,12307],{"class":39,"line":65},[37,12304,75],{"class":43},[37,12306,10549],{"class":291},[37,12308,113],{"class":43},[37,12310,12311,12313,12315],{"class":39,"line":72},[37,12312,273],{"class":43},[37,12314,48],{"class":291},[37,12316,62],{"class":43},[27,12318,12319],{"className":543,"code":12214,"language":545,"meta":32,"style":32},[34,12320,12321,12335,12343],{"__ignoreMap":32},[37,12322,12323,12325,12327,12329,12331,12333],{"class":39,"line":40},[37,12324,44],{"class":43},[37,12326,48],{"class":291},[37,12328,52],{"class":51},[37,12330,55],{"class":297},[37,12332,12229],{"class":58},[37,12334,62],{"class":43},[37,12336,12337,12339,12341],{"class":39,"line":65},[37,12338,75],{"class":43},[37,12340,10549],{"class":291},[37,12342,113],{"class":43},[37,12344,12345,12347,12349],{"class":39,"line":72},[37,12346,273],{"class":43},[37,12348,48],{"class":291},[37,12350,62],{"class":43},[15,12352,12353,12354,2930,12356,12359,12360,12362],{},"Interactive effects like ",[34,12355,1266],{},[34,12357,12358],{},"CursorRipples"," still track global mouse position even with ",[34,12361,12208],{}," — they listen on the window rather than the canvas element.",[3997,12364,12366],{"id":12365},"stacking-context-and-z-index","Stacking context and z-index",[15,12368,12369,12372,12373,12375,12376,2630],{},[34,12370,12371],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[34,12374,10953],{}," (or similar) and a higher ",[34,12377,12371],{},[27,12379,12381],{"className":10811,"code":12380,"language":10813,"meta":32,"style":32},"\u003Cdiv class=\"relative\">\n \u003C!-- canvas at z-0 -->\n \u003Ccanvas class=\"absolute inset-0\">\u003C/canvas>\n \u003C!-- content above canvas -->\n \u003Cdiv class=\"relative z-10\">I appear above the canvas\u003C/div>\n\u003C/div>\n",[34,12382,12383,12398,12403,12421,12426,12445],{"__ignoreMap":32},[37,12384,12385,12387,12389,12391,12393,12396],{"class":39,"line":40},[37,12386,44],{"class":43},[37,12388,8499],{"class":47},[37,12390,52],{"class":51},[37,12392,55],{"class":43},[37,12394,12395],{"class":58},"\"relative\"",[37,12397,62],{"class":43},[37,12399,12400],{"class":39,"line":65},[37,12401,12402],{"class":68}," \u003C!-- canvas at z-0 -->\n",[37,12404,12405,12407,12409,12411,12413,12415,12417,12419],{"class":39,"line":72},[37,12406,75],{"class":43},[37,12408,10822],{"class":47},[37,12410,52],{"class":51},[37,12412,55],{"class":43},[37,12414,11347],{"class":58},[37,12416,10839],{"class":43},[37,12418,10822],{"class":47},[37,12420,62],{"class":43},[37,12422,12423],{"class":39,"line":116},[37,12424,12425],{"class":68}," \u003C!-- content above canvas -->\n",[37,12427,12428,12430,12432,12434,12436,12438,12441,12443],{"class":39,"line":123},[37,12429,75],{"class":43},[37,12431,8499],{"class":47},[37,12433,52],{"class":51},[37,12435,55],{"class":43},[37,12437,10577],{"class":58},[37,12439,12440],{"class":43},">I appear above the canvas\u003C/",[37,12442,8499],{"class":47},[37,12444,62],{"class":43},[37,12446,12447,12449,12451],{"class":39,"line":129},[37,12448,273],{"class":43},[37,12450,8499],{"class":47},[37,12452,62],{"class":43},[1202,12454,12456],{"id":12455},"responsive-sizing","Responsive sizing",[15,12458,12459],{},"Shaders responds to any CSS-based resize:",[23,12461,12462,12583,12618,12653],{":tabs":1372},[27,12463,12465],{"className":29,"code":12464,"language":31,"meta":32,"style":32},"\u003C!-- Different heights at breakpoints -->\n\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Aspect ratio preserving at any width -->\n\u003CShader class=\"w-full aspect-square md:aspect-video\">\n \u003CSwirl />\n\u003C/Shader>\n\n\u003C!-- Dynamic viewport height (mobile-safe) -->\n\u003CShader class=\"w-full h-[100dvh]\">\n \u003CAurora />\n\u003C/Shader>\n",[34,12466,12467,12472,12487,12495,12503,12507,12512,12527,12535,12543,12547,12552,12567,12575],{"__ignoreMap":32},[37,12468,12469],{"class":39,"line":40},[37,12470,12471],{"class":68},"\u003C!-- Different heights at breakpoints -->\n",[37,12473,12474,12476,12478,12480,12482,12485],{"class":39,"line":65},[37,12475,44],{"class":43},[37,12477,48],{"class":47},[37,12479,52],{"class":51},[37,12481,55],{"class":43},[37,12483,12484],{"class":58},"\"w-full h-48 md:h-72 lg:h-screen\"",[37,12486,62],{"class":43},[37,12488,12489,12491,12493],{"class":39,"line":72},[37,12490,75],{"class":43},[37,12492,78],{"class":47},[37,12494,113],{"class":43},[37,12496,12497,12499,12501],{"class":39,"line":116},[37,12498,273],{"class":43},[37,12500,48],{"class":47},[37,12502,62],{"class":43},[37,12504,12505],{"class":39,"line":123},[37,12506,120],{"emptyLinePlaceholder":119},[37,12508,12509],{"class":39,"line":129},[37,12510,12511],{"class":68},"\u003C!-- Aspect ratio preserving at any width -->\n",[37,12513,12514,12516,12518,12520,12522,12525],{"class":39,"line":171},[37,12515,44],{"class":43},[37,12517,48],{"class":47},[37,12519,52],{"class":51},[37,12521,55],{"class":43},[37,12523,12524],{"class":58},"\"w-full aspect-square md:aspect-video\"",[37,12526,62],{"class":43},[37,12528,12529,12531,12533],{"class":39,"line":221},[37,12530,75],{"class":43},[37,12532,11935],{"class":47},[37,12534,113],{"class":43},[37,12536,12537,12539,12541],{"class":39,"line":231},[37,12538,273],{"class":43},[37,12540,48],{"class":47},[37,12542,62],{"class":43},[37,12544,12545],{"class":39,"line":236},[37,12546,120],{"emptyLinePlaceholder":119},[37,12548,12549],{"class":39,"line":242},[37,12550,12551],{"class":68},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[37,12553,12554,12556,12558,12560,12562,12565],{"class":39,"line":270},[37,12555,44],{"class":43},[37,12557,48],{"class":47},[37,12559,52],{"class":51},[37,12561,55],{"class":43},[37,12563,12564],{"class":58},"\"w-full h-[100dvh]\"",[37,12566,62],{"class":43},[37,12568,12569,12571,12573],{"class":39,"line":1145},[37,12570,75],{"class":43},[37,12572,10549],{"class":47},[37,12574,113],{"class":43},[37,12576,12577,12579,12581],{"class":39,"line":1151},[37,12578,273],{"class":43},[37,12580,48],{"class":47},[37,12582,62],{"class":43},[27,12584,12586],{"className":280,"code":12585,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,12587,12588,12602,12610],{"__ignoreMap":32},[37,12589,12590,12592,12594,12596,12598,12600],{"class":39,"line":40},[37,12591,44],{"class":43},[37,12593,48],{"class":291},[37,12595,294],{"class":51},[37,12597,55],{"class":297},[37,12599,12484],{"class":58},[37,12601,62],{"class":43},[37,12603,12604,12606,12608],{"class":39,"line":65},[37,12605,75],{"class":43},[37,12607,78],{"class":291},[37,12609,113],{"class":43},[37,12611,12612,12614,12616],{"class":39,"line":72},[37,12613,273],{"class":43},[37,12615,48],{"class":291},[37,12617,62],{"class":43},[27,12619,12621],{"className":543,"code":12620,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,12622,12623,12637,12645],{"__ignoreMap":32},[37,12624,12625,12627,12629,12631,12633,12635],{"class":39,"line":40},[37,12626,44],{"class":43},[37,12628,48],{"class":291},[37,12630,52],{"class":51},[37,12632,55],{"class":297},[37,12634,12484],{"class":58},[37,12636,62],{"class":43},[37,12638,12639,12641,12643],{"class":39,"line":65},[37,12640,75],{"class":43},[37,12642,78],{"class":291},[37,12644,113],{"class":43},[37,12646,12647,12649,12651],{"class":39,"line":72},[37,12648,273],{"class":43},[37,12650,48],{"class":291},[37,12652,62],{"class":43},[27,12654,12655],{"className":543,"code":12620,"language":545,"meta":32,"style":32},[34,12656,12657,12671,12679],{"__ignoreMap":32},[37,12658,12659,12661,12663,12665,12667,12669],{"class":39,"line":40},[37,12660,44],{"class":43},[37,12662,48],{"class":291},[37,12664,52],{"class":51},[37,12666,55],{"class":297},[37,12668,12484],{"class":58},[37,12670,62],{"class":43},[37,12672,12673,12675,12677],{"class":39,"line":65},[37,12674,75],{"class":43},[37,12676,78],{"class":291},[37,12678,113],{"class":43},[37,12680,12681,12683,12685],{"class":39,"line":72},[37,12682,273],{"class":43},[37,12684,48],{"class":291},[37,12686,62],{"class":43},[1202,12688,12690],{"id":12689},"other-css-properties","Other CSS properties",[15,12692,12693],{},"The canvas element is fully styleable with standard CSS:",[23,12695,12696,12817,12852,12887],{":tabs":1372},[27,12697,12699],{"className":29,"code":12698,"language":31,"meta":32,"style":32},"\u003C!-- Rounded with border -->\n\u003CShader class=\"rounded-2xl border border-white/10 w-full h-48\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Drop shadow -->\n\u003CShader class=\"shadow-2xl shadow-indigo-500/30 rounded-xl w-64 h-64\">\n \u003CPlasma />\n\u003C/Shader>\n\n\u003C!-- CSS blur (applied after GPU render) -->\n\u003CShader class=\"blur-sm w-full h-32\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,12700,12701,12706,12721,12729,12737,12741,12746,12761,12769,12777,12781,12786,12801,12809],{"__ignoreMap":32},[37,12702,12703],{"class":39,"line":40},[37,12704,12705],{"class":68},"\u003C!-- Rounded with border -->\n",[37,12707,12708,12710,12712,12714,12716,12719],{"class":39,"line":65},[37,12709,44],{"class":43},[37,12711,48],{"class":47},[37,12713,52],{"class":51},[37,12715,55],{"class":43},[37,12717,12718],{"class":58},"\"rounded-2xl border border-white/10 w-full h-48\"",[37,12720,62],{"class":43},[37,12722,12723,12725,12727],{"class":39,"line":72},[37,12724,75],{"class":43},[37,12726,78],{"class":47},[37,12728,113],{"class":43},[37,12730,12731,12733,12735],{"class":39,"line":116},[37,12732,273],{"class":43},[37,12734,48],{"class":47},[37,12736,62],{"class":43},[37,12738,12739],{"class":39,"line":123},[37,12740,120],{"emptyLinePlaceholder":119},[37,12742,12743],{"class":39,"line":129},[37,12744,12745],{"class":68},"\u003C!-- Drop shadow -->\n",[37,12747,12748,12750,12752,12754,12756,12759],{"class":39,"line":171},[37,12749,44],{"class":43},[37,12751,48],{"class":47},[37,12753,52],{"class":51},[37,12755,55],{"class":43},[37,12757,12758],{"class":58},"\"shadow-2xl shadow-indigo-500/30 rounded-xl w-64 h-64\"",[37,12760,62],{"class":43},[37,12762,12763,12765,12767],{"class":39,"line":221},[37,12764,75],{"class":43},[37,12766,11001],{"class":47},[37,12768,113],{"class":43},[37,12770,12771,12773,12775],{"class":39,"line":231},[37,12772,273],{"class":43},[37,12774,48],{"class":47},[37,12776,62],{"class":43},[37,12778,12779],{"class":39,"line":236},[37,12780,120],{"emptyLinePlaceholder":119},[37,12782,12783],{"class":39,"line":242},[37,12784,12785],{"class":68},"\u003C!-- CSS blur (applied after GPU render) -->\n",[37,12787,12788,12790,12792,12794,12796,12799],{"class":39,"line":270},[37,12789,44],{"class":43},[37,12791,48],{"class":47},[37,12793,52],{"class":51},[37,12795,55],{"class":43},[37,12797,12798],{"class":58},"\"blur-sm w-full h-32\"",[37,12800,62],{"class":43},[37,12802,12803,12805,12807],{"class":39,"line":1145},[37,12804,75],{"class":43},[37,12806,78],{"class":47},[37,12808,113],{"class":43},[37,12810,12811,12813,12815],{"class":39,"line":1151},[37,12812,273],{"class":43},[37,12814,48],{"class":47},[37,12816,62],{"class":43},[27,12818,12820],{"className":280,"code":12819,"language":282,"meta":32,"style":32},"\u003CShader className=\"rounded-2xl border border-white/10 w-full h-48\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,12821,12822,12836,12844],{"__ignoreMap":32},[37,12823,12824,12826,12828,12830,12832,12834],{"class":39,"line":40},[37,12825,44],{"class":43},[37,12827,48],{"class":291},[37,12829,294],{"class":51},[37,12831,55],{"class":297},[37,12833,12718],{"class":58},[37,12835,62],{"class":43},[37,12837,12838,12840,12842],{"class":39,"line":65},[37,12839,75],{"class":43},[37,12841,78],{"class":291},[37,12843,113],{"class":43},[37,12845,12846,12848,12850],{"class":39,"line":72},[37,12847,273],{"class":43},[37,12849,48],{"class":291},[37,12851,62],{"class":43},[27,12853,12855],{"className":543,"code":12854,"language":545,"meta":32,"style":32},"\u003CShader class=\"rounded-2xl border border-white/10 w-full h-48\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,12856,12857,12871,12879],{"__ignoreMap":32},[37,12858,12859,12861,12863,12865,12867,12869],{"class":39,"line":40},[37,12860,44],{"class":43},[37,12862,48],{"class":291},[37,12864,52],{"class":51},[37,12866,55],{"class":297},[37,12868,12718],{"class":58},[37,12870,62],{"class":43},[37,12872,12873,12875,12877],{"class":39,"line":65},[37,12874,75],{"class":43},[37,12876,78],{"class":291},[37,12878,113],{"class":43},[37,12880,12881,12883,12885],{"class":39,"line":72},[37,12882,273],{"class":43},[37,12884,48],{"class":291},[37,12886,62],{"class":43},[27,12888,12889],{"className":543,"code":12854,"language":545,"meta":32,"style":32},[34,12890,12891,12905,12913],{"__ignoreMap":32},[37,12892,12893,12895,12897,12899,12901,12903],{"class":39,"line":40},[37,12894,44],{"class":43},[37,12896,48],{"class":291},[37,12898,52],{"class":51},[37,12900,55],{"class":297},[37,12902,12718],{"class":58},[37,12904,62],{"class":43},[37,12906,12907,12909,12911],{"class":39,"line":65},[37,12908,75],{"class":43},[37,12910,78],{"class":291},[37,12912,113],{"class":43},[37,12914,12915,12917,12919],{"class":39,"line":72},[37,12916,273],{"class":43},[37,12918,48],{"class":291},[37,12920,62],{"class":43},[1311,12922,12923],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":32,"searchDepth":65,"depth":65,"links":12925},[12926,12927,12928,12934,12938,12939],{"id":10188,"depth":65,"text":10189},{"id":1686,"depth":65,"text":1687},{"id":10507,"depth":65,"text":10508,"children":12929},[12930,12931,12932,12933],{"id":10511,"depth":72,"text":10512},{"id":10946,"depth":72,"text":10947},{"id":11308,"depth":72,"text":11309},{"id":11876,"depth":72,"text":11877},{"id":12197,"depth":65,"text":12198,"children":12935},[12936,12937],{"id":12201,"depth":72,"text":12202},{"id":12365,"depth":72,"text":12366},{"id":12455,"depth":65,"text":12456},{"id":12689,"depth":65,"text":12690},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":2571,"description":12940},"docs/guide/5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":12947,"title":12948,"body":12949,"category":8163,"description":14998,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":14999,"meta":15000,"navigation":119,"path":15001,"seo":15002,"stem":15003,"__hash__":15004},"guide/docs/guide/6.transforms.md","Transforms",{"type":8,"value":12950,"toc":14990},[12951,12954,12961,12968,13039,13043,13049,13230,13234,13713,13716,13720,13727,13747,13819,13823,13829,13882,13953,13957,13960,14958,14970,14974,14981,14984,14987],[11,12952,12948],{"id":12953},"transforms",[15,12955,12956,12957,12960],{},"Every component accepts a ",[34,12958,12959],{},"transform"," prop that moves, rotates, and scales it in UV space — the coordinate system the shader uses to sample its output.",[15,12962,12963,12964,12967],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A shader transform shifts how the shader ",[2913,12965,12966],{},"samples its coordinate system",", so the effect itself shifts without touching the DOM.",[27,12969,12971],{"className":29,"code":12970,"language":31,"meta":32,"style":32},"\u003C!-- CSS transform: moves the DOM element -->\n\u003CShader class=\"-translate-x-4\">...\u003C/Shader>\n\n\u003C!-- Shader transform: shifts content within the canvas -->\n\u003CShader>\n \u003CLinearGradient :transform=\"{ offsetX: -0.2 }\" />\n\u003C/Shader>\n",[34,12972,12973,12978,12998,13002,13007,13015,13031],{"__ignoreMap":32},[37,12974,12975],{"class":39,"line":40},[37,12976,12977],{"class":68},"\u003C!-- CSS transform: moves the DOM element -->\n",[37,12979,12980,12982,12984,12986,12988,12991,12994,12996],{"class":39,"line":65},[37,12981,44],{"class":43},[37,12983,48],{"class":47},[37,12985,52],{"class":51},[37,12987,55],{"class":43},[37,12989,12990],{"class":58},"\"-translate-x-4\"",[37,12992,12993],{"class":43},">...\u003C/",[37,12995,48],{"class":47},[37,12997,62],{"class":43},[37,12999,13000],{"class":39,"line":72},[37,13001,120],{"emptyLinePlaceholder":119},[37,13003,13004],{"class":39,"line":116},[37,13005,13006],{"class":68},"\u003C!-- Shader transform: shifts content within the canvas -->\n",[37,13008,13009,13011,13013],{"class":39,"line":123},[37,13010,44],{"class":43},[37,13012,48],{"class":47},[37,13014,62],{"class":43},[37,13016,13017,13019,13021,13024,13026,13029],{"class":39,"line":129},[37,13018,75],{"class":43},[37,13020,78],{"class":47},[37,13022,13023],{"class":51}," :transform",[37,13025,55],{"class":43},[37,13027,13028],{"class":58},"\"{ offsetX: -0.2 }\"",[37,13030,113],{"class":43},[37,13032,13033,13035,13037],{"class":39,"line":171},[37,13034,273],{"class":43},[37,13036,48],{"class":47},[37,13038,62],{"class":43},[1202,13040,13042],{"id":13041},"transform-properties","Transform properties",[15,13044,13045,13046,13048],{},"Pass a partial object to the ",[34,13047,12959],{}," prop — only include what you want to change:",[2860,13050,13051,13066],{},[2863,13052,13053],{},[2866,13054,13055,13058,13061,13064],{},[2869,13056,13057],{},"Prop",[2869,13059,13060],{},"Type",[2869,13062,13063],{},"Default",[2869,13065,2874],{},[2876,13067,13068,13100,13122,13139,13163,13187,13211],{},[2866,13069,13070,13075,13080,13084],{},[2881,13071,13072],{},[34,13073,13074],{},"offsetX",[2881,13076,13077],{},[34,13078,13079],{},"number",[2881,13081,13082],{},[34,13083,6610],{},[2881,13085,13086,13087,2626,13090,13093,13094,13096,13097,13099],{},"Horizontal shift. ",[34,13088,13089],{},"-1",[34,13091,13092],{},"+1",". ",[34,13095,13089],{}," shifts content fully left, ",[34,13098,13092],{}," fully right.",[2866,13101,13102,13107,13111,13115],{},[2881,13103,13104],{},[34,13105,13106],{},"offsetY",[2881,13108,13109],{},[34,13110,13079],{},[2881,13112,13113],{},[34,13114,6610],{},[2881,13116,13117,13118,2626,13120,7423],{},"Vertical shift. ",[34,13119,13089],{},[34,13121,13092],{},[2866,13123,13124,13128,13132,13136],{},[2881,13125,13126],{},[34,13127,9765],{},[2881,13129,13130],{},[34,13131,13079],{},[2881,13133,13134],{},[34,13135,6610],{},[2881,13137,13138],{},"Rotation in degrees. Positive = clockwise.",[2866,13140,13141,13146,13150,13154],{},[2881,13142,13143],{},[34,13144,13145],{},"scale",[2881,13147,13148],{},[34,13149,13079],{},[2881,13151,13152],{},[34,13153,6614],{},[2881,13155,13156,13157,13159,13160,13162],{},"Scale multiplier. ",[34,13158,5689],{}," = half size, ",[34,13161,5150],{}," = double.",[2866,13164,13165,13170,13174,13178],{},[2881,13166,13167],{},[34,13168,13169],{},"anchorX",[2881,13171,13172],{},[34,13173,13079],{},[2881,13175,13176],{},[34,13177,5689],{},[2881,13179,13180,13181,13183,13184,13186],{},"Horizontal pivot point for rotation and scale. ",[34,13182,6610],{}," = left, ",[34,13185,6614],{}," = right.",[2866,13188,13189,13194,13198,13202],{},[2881,13190,13191],{},[34,13192,13193],{},"anchorY",[2881,13195,13196],{},[34,13197,13079],{},[2881,13199,13200],{},[34,13201,5689],{},[2881,13203,13204,13205,13207,13208,13210],{},"Vertical pivot point. ",[34,13206,6610],{}," = top, ",[34,13209,6614],{}," = bottom.",[2866,13212,13213,13218,13222,13227],{},[2881,13214,13215],{},[34,13216,13217],{},"edges",[2881,13219,13220],{},[34,13221,6998],{},[2881,13223,13224],{},[34,13225,13226],{},"'transparent'",[2881,13228,13229],{},"What to show when the transform pushes content out of bounds. See below.",[1202,13231,13233],{"id":13232},"basic-usage","Basic usage",[23,13235,13236,13331,13431,13520,13608],{":tabs":25},[27,13237,13239],{"className":29,"code":13238,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003C!-- Rotate 45 degrees -->\n \u003CLinearGradient :transform=\"{ rotation: 45 }\" />\n\n \u003C!-- Scale up and shift right -->\n \u003CCircle :transform=\"{ scale: 1.5, offsetX: 0.2 }\" />\n\n \u003C!-- Multiple transforms together -->\n \u003CSwirl :transform=\"{ rotation: 30, scale: 0.8, offsetY: -0.1 }\" />\n\u003C/Shader>\n",[34,13240,13241,13255,13260,13275,13279,13284,13299,13303,13308,13323],{"__ignoreMap":32},[37,13242,13243,13245,13247,13249,13251,13253],{"class":39,"line":40},[37,13244,44],{"class":43},[37,13246,48],{"class":47},[37,13248,52],{"class":51},[37,13250,55],{"class":43},[37,13252,59],{"class":58},[37,13254,62],{"class":43},[37,13256,13257],{"class":39,"line":65},[37,13258,13259],{"class":68}," \u003C!-- Rotate 45 degrees -->\n",[37,13261,13262,13264,13266,13268,13270,13273],{"class":39,"line":72},[37,13263,75],{"class":43},[37,13265,78],{"class":47},[37,13267,13023],{"class":51},[37,13269,55],{"class":43},[37,13271,13272],{"class":58},"\"{ rotation: 45 }\"",[37,13274,113],{"class":43},[37,13276,13277],{"class":39,"line":116},[37,13278,120],{"emptyLinePlaceholder":119},[37,13280,13281],{"class":39,"line":123},[37,13282,13283],{"class":68}," \u003C!-- Scale up and shift right -->\n",[37,13285,13286,13288,13290,13292,13294,13297],{"class":39,"line":129},[37,13287,75],{"class":43},[37,13289,3293],{"class":47},[37,13291,13023],{"class":51},[37,13293,55],{"class":43},[37,13295,13296],{"class":58},"\"{ scale: 1.5, offsetX: 0.2 }\"",[37,13298,113],{"class":43},[37,13300,13301],{"class":39,"line":171},[37,13302,120],{"emptyLinePlaceholder":119},[37,13304,13305],{"class":39,"line":221},[37,13306,13307],{"class":68}," \u003C!-- Multiple transforms together -->\n",[37,13309,13310,13312,13314,13316,13318,13321],{"class":39,"line":231},[37,13311,75],{"class":43},[37,13313,11935],{"class":47},[37,13315,13023],{"class":51},[37,13317,55],{"class":43},[37,13319,13320],{"class":58},"\"{ rotation: 30, scale: 0.8, offsetY: -0.1 }\"",[37,13322,113],{"class":43},[37,13324,13325,13327,13329],{"class":39,"line":236},[37,13326,273],{"class":43},[37,13328,48],{"class":47},[37,13330,62],{"class":43},[27,13332,13334],{"className":280,"code":13333,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient transform={{ rotation: 45 }} />\n \u003CCircle transform={{ scale: 1.5, offsetX: 0.2 }} />\n \u003CSwirl transform={{ rotation: 30, scale: 0.8, offsetY: -0.1 }} />\n\u003C/Shader>\n",[34,13335,13336,13350,13369,13393,13423],{"__ignoreMap":32},[37,13337,13338,13340,13342,13344,13346,13348],{"class":39,"line":40},[37,13339,44],{"class":43},[37,13341,48],{"class":291},[37,13343,294],{"class":51},[37,13345,55],{"class":297},[37,13347,59],{"class":58},[37,13349,62],{"class":43},[37,13351,13352,13354,13356,13359,13361,13364,13366],{"class":39,"line":65},[37,13353,75],{"class":43},[37,13355,78],{"class":291},[37,13357,13358],{"class":51}," transform",[37,13360,55],{"class":297},[37,13362,13363],{"class":43},"{{ rotation: ",[37,13365,2375],{"class":291},[37,13367,13368],{"class":43}," }} />\n",[37,13370,13371,13373,13375,13377,13379,13382,13385,13388,13391],{"class":39,"line":72},[37,13372,75],{"class":43},[37,13374,3293],{"class":291},[37,13376,13358],{"class":51},[37,13378,55],{"class":297},[37,13380,13381],{"class":43},"{{ scale: ",[37,13383,13384],{"class":291},"1.5",[37,13386,13387],{"class":43},", offsetX: ",[37,13389,13390],{"class":291},"0.2",[37,13392,13368],{"class":43},[37,13394,13395,13397,13399,13401,13403,13405,13408,13411,13413,13416,13418,13421],{"class":39,"line":116},[37,13396,75],{"class":43},[37,13398,11935],{"class":291},[37,13400,13358],{"class":51},[37,13402,55],{"class":297},[37,13404,13363],{"class":43},[37,13406,13407],{"class":291},"30",[37,13409,13410],{"class":43},", scale: ",[37,13412,4235],{"class":291},[37,13414,13415],{"class":43},", offsetY: ",[37,13417,8803],{"class":297},[37,13419,13420],{"class":291},"0.1",[37,13422,13368],{"class":43},[37,13424,13425,13427,13429],{"class":39,"line":123},[37,13426,273],{"class":43},[37,13428,48],{"class":291},[37,13430,62],{"class":43},[27,13432,13434],{"className":543,"code":13433,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient transform={{ rotation: 45 }} />\n \u003CCircle transform={{ scale: 1.5, offsetX: 0.2 }} />\n \u003CSwirl transform={{ rotation: 30, scale: 0.8, offsetY: -0.1 }} />\n\u003C/Shader>\n",[34,13435,13436,13450,13466,13486,13512],{"__ignoreMap":32},[37,13437,13438,13440,13442,13444,13446,13448],{"class":39,"line":40},[37,13439,44],{"class":43},[37,13441,48],{"class":291},[37,13443,52],{"class":51},[37,13445,55],{"class":297},[37,13447,59],{"class":58},[37,13449,62],{"class":43},[37,13451,13452,13454,13456,13458,13460,13462,13464],{"class":39,"line":65},[37,13453,75],{"class":43},[37,13455,78],{"class":291},[37,13457,13358],{"class":51},[37,13459,55],{"class":297},[37,13461,13363],{"class":43},[37,13463,2375],{"class":291},[37,13465,13368],{"class":43},[37,13467,13468,13470,13472,13474,13476,13478,13480,13482,13484],{"class":39,"line":72},[37,13469,75],{"class":43},[37,13471,3293],{"class":291},[37,13473,13358],{"class":51},[37,13475,55],{"class":297},[37,13477,13381],{"class":43},[37,13479,13384],{"class":291},[37,13481,13387],{"class":43},[37,13483,13390],{"class":291},[37,13485,13368],{"class":43},[37,13487,13488,13490,13492,13494,13496,13498,13500,13502,13504,13506,13508,13510],{"class":39,"line":116},[37,13489,75],{"class":43},[37,13491,11935],{"class":291},[37,13493,13358],{"class":51},[37,13495,55],{"class":297},[37,13497,13363],{"class":43},[37,13499,13407],{"class":291},[37,13501,13410],{"class":43},[37,13503,4235],{"class":291},[37,13505,13415],{"class":43},[37,13507,8803],{"class":297},[37,13509,13420],{"class":291},[37,13511,13368],{"class":43},[37,13513,13514,13516,13518],{"class":39,"line":123},[37,13515,273],{"class":43},[37,13517,48],{"class":291},[37,13519,62],{"class":43},[27,13521,13522],{"className":543,"code":13433,"language":545,"meta":32,"style":32},[34,13523,13524,13538,13554,13574,13600],{"__ignoreMap":32},[37,13525,13526,13528,13530,13532,13534,13536],{"class":39,"line":40},[37,13527,44],{"class":43},[37,13529,48],{"class":291},[37,13531,52],{"class":51},[37,13533,55],{"class":297},[37,13535,59],{"class":58},[37,13537,62],{"class":43},[37,13539,13540,13542,13544,13546,13548,13550,13552],{"class":39,"line":65},[37,13541,75],{"class":43},[37,13543,78],{"class":291},[37,13545,13358],{"class":51},[37,13547,55],{"class":297},[37,13549,13363],{"class":43},[37,13551,2375],{"class":291},[37,13553,13368],{"class":43},[37,13555,13556,13558,13560,13562,13564,13566,13568,13570,13572],{"class":39,"line":72},[37,13557,75],{"class":43},[37,13559,3293],{"class":291},[37,13561,13358],{"class":51},[37,13563,55],{"class":297},[37,13565,13381],{"class":43},[37,13567,13384],{"class":291},[37,13569,13387],{"class":43},[37,13571,13390],{"class":291},[37,13573,13368],{"class":43},[37,13575,13576,13578,13580,13582,13584,13586,13588,13590,13592,13594,13596,13598],{"class":39,"line":116},[37,13577,75],{"class":43},[37,13579,11935],{"class":291},[37,13581,13358],{"class":51},[37,13583,55],{"class":297},[37,13585,13363],{"class":43},[37,13587,13407],{"class":291},[37,13589,13410],{"class":43},[37,13591,4235],{"class":291},[37,13593,13415],{"class":43},[37,13595,8803],{"class":297},[37,13597,13420],{"class":291},[37,13599,13368],{"class":43},[37,13601,13602,13604,13606],{"class":39,"line":123},[37,13603,273],{"class":43},[37,13605,48],{"class":291},[37,13607,62],{"class":43},[27,13609,13611],{"className":987,"code":13610,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n props: {\n transform: { rotation: 45 }\n }\n },\n {\n type: 'Circle',\n props: {\n transform: { scale: 1.5, offsetX: 0.2 }\n }\n }\n ]\n})\n",[34,13612,13613,13627,13631,13635,13643,13648,13658,13663,13667,13671,13679,13683,13696,13700,13705,13709],{"__ignoreMap":32},[37,13614,13615,13617,13619,13621,13623,13625],{"class":39,"line":40},[37,13616,2809],{"class":297},[37,13618,2812],{"class":291},[37,13620,2815],{"class":297},[37,13622,2818],{"class":297},[37,13624,999],{"class":51},[37,13626,1002],{"class":43},[37,13628,13629],{"class":39,"line":65},[37,13630,1007],{"class":43},[37,13632,13633],{"class":39,"line":72},[37,13634,1060],{"class":43},[37,13636,13637,13639,13641],{"class":39,"line":116},[37,13638,1065],{"class":43},[37,13640,1020],{"class":58},[37,13642,1071],{"class":43},[37,13644,13645],{"class":39,"line":123},[37,13646,13647],{"class":43}," props: {\n",[37,13649,13650,13653,13655],{"class":39,"line":129},[37,13651,13652],{"class":43}," transform: { rotation: ",[37,13654,2375],{"class":291},[37,13656,13657],{"class":43}," }\n",[37,13659,13660],{"class":39,"line":171},[37,13661,13662],{"class":43}," }\n",[37,13664,13665],{"class":39,"line":221},[37,13666,1154],{"class":43},[37,13668,13669],{"class":39,"line":231},[37,13670,1060],{"class":43},[37,13672,13673,13675,13677],{"class":39,"line":236},[37,13674,1065],{"class":43},[37,13676,3941],{"class":58},[37,13678,1071],{"class":43},[37,13680,13681],{"class":39,"line":242},[37,13682,13647],{"class":43},[37,13684,13685,13688,13690,13692,13694],{"class":39,"line":270},[37,13686,13687],{"class":43}," transform: { scale: ",[37,13689,13384],{"class":291},[37,13691,13387],{"class":43},[37,13693,13390],{"class":291},[37,13695,13657],{"class":43},[37,13697,13698],{"class":39,"line":1145},[37,13699,13662],{"class":43},[37,13701,13702],{"class":39,"line":1151},[37,13703,13704],{"class":43}," }\n",[37,13706,13707],{"class":39,"line":1157},[37,13708,1194],{"class":43},[37,13710,13711],{"class":39,"line":1162},[37,13712,1200],{"class":43},[15,13714,13715],{},"You only need to include the properties you want to change — unspecified values stay at their defaults.",[1202,13717,13719],{"id":13718},"anchor-point","Anchor point",[15,13721,13722,13723,13726],{},"The anchor point controls where rotation and scale are applied from. The default ",[34,13724,13725],{},"0.5, 0.5"," anchors to the center of the canvas.",[2556,13728,13729,13735,13741],{},[2559,13730,13731,13734],{},[34,13732,13733],{},"{ anchorX: 0, anchorY: 0 }"," — top-left corner",[2559,13736,13737,13740],{},[34,13738,13739],{},"{ anchorX: 0.5, anchorY: 0.5 }"," — center (default)",[2559,13742,13743,13746],{},[34,13744,13745],{},"{ anchorX: 1, anchorY: 1 }"," — bottom-right corner",[27,13748,13750],{"className":29,"code":13749,"language":31,"meta":32,"style":32},"\u003C!-- Rotates around the center (default) -->\n\u003CCircle :transform=\"{ rotation: 45 }\" />\n\n\u003C!-- Rotates around the top-left corner -->\n\u003CCircle :transform=\"{ rotation: 45, anchorX: 0, anchorY: 0 }\" />\n\n\u003C!-- Scales from the top edge -->\n\u003CLinearGradient :transform=\"{ scale: 2, anchorY: 0 }\" />\n",[34,13751,13752,13757,13771,13775,13780,13795,13799,13804],{"__ignoreMap":32},[37,13753,13754],{"class":39,"line":40},[37,13755,13756],{"class":68},"\u003C!-- Rotates around the center (default) -->\n",[37,13758,13759,13761,13763,13765,13767,13769],{"class":39,"line":65},[37,13760,44],{"class":43},[37,13762,3293],{"class":47},[37,13764,13023],{"class":51},[37,13766,55],{"class":43},[37,13768,13272],{"class":58},[37,13770,113],{"class":43},[37,13772,13773],{"class":39,"line":72},[37,13774,120],{"emptyLinePlaceholder":119},[37,13776,13777],{"class":39,"line":116},[37,13778,13779],{"class":68},"\u003C!-- Rotates around the top-left corner -->\n",[37,13781,13782,13784,13786,13788,13790,13793],{"class":39,"line":123},[37,13783,44],{"class":43},[37,13785,3293],{"class":47},[37,13787,13023],{"class":51},[37,13789,55],{"class":43},[37,13791,13792],{"class":58},"\"{ rotation: 45, anchorX: 0, anchorY: 0 }\"",[37,13794,113],{"class":43},[37,13796,13797],{"class":39,"line":129},[37,13798,120],{"emptyLinePlaceholder":119},[37,13800,13801],{"class":39,"line":171},[37,13802,13803],{"class":68},"\u003C!-- Scales from the top edge -->\n",[37,13805,13806,13808,13810,13812,13814,13817],{"class":39,"line":221},[37,13807,44],{"class":43},[37,13809,78],{"class":47},[37,13811,13023],{"class":51},[37,13813,55],{"class":43},[37,13815,13816],{"class":58},"\"{ scale: 2, anchorY: 0 }\"",[37,13818,113],{"class":43},[1202,13820,13822],{"id":13821},"edge-modes","Edge modes",[15,13824,13825,13826,13828],{},"When a transform shifts or scales content beyond the canvas boundaries, the ",[34,13827,13217],{}," property controls what fills the out-of-bounds area:",[2860,13830,13831,13840],{},[2863,13832,13833],{},[2866,13834,13835,13837],{},[2869,13836,2871],{},[2869,13838,13839],{},"Behavior",[2876,13841,13842,13852,13862,13872],{},[2866,13843,13844,13849],{},[2881,13845,13846],{},[34,13847,13848],{},"transparent",[2881,13850,13851],{},"Out-of-bounds pixels are fully transparent (default)",[2866,13853,13854,13859],{},[2881,13855,13856],{},[34,13857,13858],{},"stretch",[2881,13860,13861],{},"The edge pixels repeat to fill",[2866,13863,13864,13869],{},[2881,13865,13866],{},[34,13867,13868],{},"mirror",[2881,13870,13871],{},"Content reflects at the edges like a mirror",[2866,13873,13874,13879],{},[2881,13875,13876],{},[34,13877,13878],{},"wrap",[2881,13880,13881],{},"Content tiles seamlessly",[27,13883,13885],{"className":29,"code":13884,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003C!-- Offset with wrapping — tiles the effect -->\n \u003CLinearGradient :transform=\"{ offsetX: 0.3, edges: 'wrap' }\" />\n\n \u003C!-- Offset with mirror — reflects the edge -->\n \u003CSwirl :transform=\"{ offsetX: 0.3, edges: 'mirror' }\" />\n\u003C/Shader>\n",[34,13886,13887,13901,13906,13921,13925,13930,13945],{"__ignoreMap":32},[37,13888,13889,13891,13893,13895,13897,13899],{"class":39,"line":40},[37,13890,44],{"class":43},[37,13892,48],{"class":47},[37,13894,52],{"class":51},[37,13896,55],{"class":43},[37,13898,59],{"class":58},[37,13900,62],{"class":43},[37,13902,13903],{"class":39,"line":65},[37,13904,13905],{"class":68}," \u003C!-- Offset with wrapping — tiles the effect -->\n",[37,13907,13908,13910,13912,13914,13916,13919],{"class":39,"line":72},[37,13909,75],{"class":43},[37,13911,78],{"class":47},[37,13913,13023],{"class":51},[37,13915,55],{"class":43},[37,13917,13918],{"class":58},"\"{ offsetX: 0.3, edges: 'wrap' }\"",[37,13920,113],{"class":43},[37,13922,13923],{"class":39,"line":116},[37,13924,120],{"emptyLinePlaceholder":119},[37,13926,13927],{"class":39,"line":123},[37,13928,13929],{"class":68}," \u003C!-- Offset with mirror — reflects the edge -->\n",[37,13931,13932,13934,13936,13938,13940,13943],{"class":39,"line":129},[37,13933,75],{"class":43},[37,13935,11935],{"class":47},[37,13937,13023],{"class":51},[37,13939,55],{"class":43},[37,13941,13942],{"class":58},"\"{ offsetX: 0.3, edges: 'mirror' }\"",[37,13944,113],{"class":43},[37,13946,13947,13949,13951],{"class":39,"line":171},[37,13948,273],{"class":43},[37,13950,48],{"class":47},[37,13952,62],{"class":43},[1202,13954,13956],{"id":13955},"animating-transforms","Animating transforms",[15,13958,13959],{},"Transforms are reactive props — you can bind them to state and animate them:",[23,13961,13962,14187,14416,14577,14791],{":tabs":25},[27,13963,13965],{"className":29,"code":13964,"language":31,"meta":32,"style":32},"\u003Cscript setup>\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nconst rotation = ref(0)\nlet animFrame\n\nonMounted(() => {\n const animate = () => {\n rotation.value = (rotation.value + 0.5) % 360\n animFrame = requestAnimationFrame(animate)\n }\n animFrame = requestAnimationFrame(animate)\n})\n\nonUnmounted(() => cancelAnimationFrame(animFrame))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient :transform=\"{ rotation }\" />\n \u003C/Shader>\n\u003C/template>\n",[34,13966,13967,13977,13988,13992,14009,14017,14021,14033,14048,14071,14084,14088,14099,14103,14107,14122,14130,14134,14142,14156,14171,14179],{"__ignoreMap":32},[37,13968,13969,13971,13973,13975],{"class":39,"line":40},[37,13970,44],{"class":43},[37,13972,3329],{"class":47},[37,13974,3332],{"class":51},[37,13976,62],{"class":43},[37,13978,13979,13981,13984,13986],{"class":39,"line":65},[37,13980,1382],{"class":297},[37,13982,13983],{"class":43}," { ref, onMounted, onUnmounted } ",[37,13985,1388],{"class":297},[37,13987,3346],{"class":58},[37,13989,13990],{"class":39,"line":72},[37,13991,120],{"emptyLinePlaceholder":119},[37,13993,13994,13996,13999,14001,14003,14005,14007],{"class":39,"line":116},[37,13995,2809],{"class":297},[37,13997,13998],{"class":291}," rotation",[37,14000,2815],{"class":297},[37,14002,3361],{"class":51},[37,14004,3364],{"class":43},[37,14006,6610],{"class":291},[37,14008,3369],{"class":43},[37,14010,14011,14014],{"class":39,"line":123},[37,14012,14013],{"class":297},"let",[37,14015,14016],{"class":43}," animFrame\n",[37,14018,14019],{"class":39,"line":129},[37,14020,120],{"emptyLinePlaceholder":119},[37,14022,14023,14026,14029,14031],{"class":39,"line":171},[37,14024,14025],{"class":51},"onMounted",[37,14027,14028],{"class":43},"(() ",[37,14030,3498],{"class":297},[37,14032,3976],{"class":43},[37,14034,14035,14037,14039,14041,14044,14046],{"class":39,"line":221},[37,14036,3441],{"class":297},[37,14038,9889],{"class":51},[37,14040,2815],{"class":297},[37,14042,14043],{"class":43}," () ",[37,14045,3498],{"class":297},[37,14047,3976],{"class":43},[37,14049,14050,14053,14055,14058,14060,14063,14065,14068],{"class":39,"line":231},[37,14051,14052],{"class":43}," rotation.value ",[37,14054,55],{"class":297},[37,14056,14057],{"class":43}," (rotation.value ",[37,14059,8766],{"class":297},[37,14061,14062],{"class":291}," 0.5",[37,14064,9930],{"class":43},[37,14066,14067],{"class":297},"%",[37,14069,14070],{"class":291}," 360\n",[37,14072,14073,14076,14078,14081],{"class":39,"line":236},[37,14074,14075],{"class":43}," animFrame ",[37,14077,55],{"class":297},[37,14079,14080],{"class":51}," requestAnimationFrame",[37,14082,14083],{"class":43},"(animate)\n",[37,14085,14086],{"class":39,"line":242},[37,14087,3991],{"class":43},[37,14089,14090,14093,14095,14097],{"class":39,"line":270},[37,14091,14092],{"class":43}," animFrame ",[37,14094,55],{"class":297},[37,14096,14080],{"class":51},[37,14098,14083],{"class":43},[37,14100,14101],{"class":39,"line":1145},[37,14102,1200],{"class":43},[37,14104,14105],{"class":39,"line":1151},[37,14106,120],{"emptyLinePlaceholder":119},[37,14108,14109,14112,14114,14116,14119],{"class":39,"line":1157},[37,14110,14111],{"class":51},"onUnmounted",[37,14113,14028],{"class":43},[37,14115,3498],{"class":297},[37,14117,14118],{"class":51}," cancelAnimationFrame",[37,14120,14121],{"class":43},"(animFrame))\n",[37,14123,14124,14126,14128],{"class":39,"line":1162},[37,14125,273],{"class":43},[37,14127,3329],{"class":47},[37,14129,62],{"class":43},[37,14131,14132],{"class":39,"line":1168},[37,14133,120],{"emptyLinePlaceholder":119},[37,14135,14136,14138,14140],{"class":39,"line":1191},[37,14137,44],{"class":43},[37,14139,3260],{"class":47},[37,14141,62],{"class":43},[37,14143,14144,14146,14148,14150,14152,14154],{"class":39,"line":1197},[37,14145,75],{"class":43},[37,14147,48],{"class":47},[37,14149,52],{"class":51},[37,14151,55],{"class":43},[37,14153,59],{"class":58},[37,14155,62],{"class":43},[37,14157,14158,14160,14162,14164,14166,14169],{"class":39,"line":8929},[37,14159,174],{"class":43},[37,14161,78],{"class":47},[37,14163,13023],{"class":51},[37,14165,55],{"class":43},[37,14167,14168],{"class":58},"\"{ rotation }\"",[37,14170,113],{"class":43},[37,14172,14173,14175,14177],{"class":39,"line":8934},[37,14174,224],{"class":43},[37,14176,48],{"class":47},[37,14178,62],{"class":43},[37,14180,14181,14183,14185],{"class":39,"line":10007},[37,14182,273],{"class":43},[37,14184,3260],{"class":47},[37,14186,62],{"class":43},[27,14188,14190],{"className":280,"code":14189,"language":282,"meta":32,"style":32},"import { useState, useEffect, useRef } from 'react'\n\nfunction SpinningGradient() {\n const [rotation, setRotation] = useState(0)\n const frameRef = useRef(null)\n\n useEffect(() => {\n const animate = () => {\n setRotation(r => (r + 0.5) % 360)\n frameRef.current = requestAnimationFrame(animate)\n }\n frameRef.current = requestAnimationFrame(animate)\n return () => cancelAnimationFrame(frameRef.current)\n }, [])\n\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient transform={{ rotation }} />\n \u003C/Shader>\n )\n}\n",[34,14191,14192,14203,14207,14216,14241,14260,14264,14275,14290,14318,14329,14333,14344,14358,14363,14367,14373,14387,14400,14408,14412],{"__ignoreMap":32},[37,14193,14194,14196,14199,14201],{"class":39,"line":40},[37,14195,1382],{"class":297},[37,14197,14198],{"class":43}," { useState, useEffect, useRef } ",[37,14200,1388],{"class":297},[37,14202,3423],{"class":58},[37,14204,14205],{"class":39,"line":65},[37,14206,120],{"emptyLinePlaceholder":119},[37,14208,14209,14211,14214],{"class":39,"line":72},[37,14210,3378],{"class":297},[37,14212,14213],{"class":51}," SpinningGradient",[37,14215,3384],{"class":43},[37,14217,14218,14220,14222,14224,14226,14229,14231,14233,14235,14237,14239],{"class":39,"line":116},[37,14219,3441],{"class":297},[37,14221,3444],{"class":43},[37,14223,9765],{"class":291},[37,14225,2961],{"class":43},[37,14227,14228],{"class":291},"setRotation",[37,14230,3455],{"class":43},[37,14232,55],{"class":297},[37,14234,3460],{"class":51},[37,14236,3364],{"class":43},[37,14238,6610],{"class":291},[37,14240,3369],{"class":43},[37,14242,14243,14245,14248,14250,14253,14255,14258],{"class":39,"line":123},[37,14244,3441],{"class":297},[37,14246,14247],{"class":291}," frameRef",[37,14249,2815],{"class":297},[37,14251,14252],{"class":51}," useRef",[37,14254,3364],{"class":43},[37,14256,14257],{"class":291},"null",[37,14259,3369],{"class":43},[37,14261,14262],{"class":39,"line":129},[37,14263,120],{"emptyLinePlaceholder":119},[37,14265,14266,14269,14271,14273],{"class":39,"line":171},[37,14267,14268],{"class":51}," useEffect",[37,14270,14028],{"class":43},[37,14272,3498],{"class":297},[37,14274,3976],{"class":43},[37,14276,14277,14280,14282,14284,14286,14288],{"class":39,"line":221},[37,14278,14279],{"class":297}," const",[37,14281,9889],{"class":51},[37,14283,2815],{"class":297},[37,14285,14043],{"class":43},[37,14287,3498],{"class":297},[37,14289,3976],{"class":43},[37,14291,14292,14295,14297,14300,14302,14305,14307,14309,14311,14313,14316],{"class":39,"line":231},[37,14293,14294],{"class":51}," setRotation",[37,14296,3364],{"class":43},[37,14298,14299],{"class":8757},"r",[37,14301,8760],{"class":297},[37,14303,14304],{"class":43}," (r ",[37,14306,8766],{"class":297},[37,14308,14062],{"class":291},[37,14310,9930],{"class":43},[37,14312,14067],{"class":297},[37,14314,14315],{"class":291}," 360",[37,14317,3369],{"class":43},[37,14319,14320,14323,14325,14327],{"class":39,"line":236},[37,14321,14322],{"class":43}," frameRef.current ",[37,14324,55],{"class":297},[37,14326,14080],{"class":51},[37,14328,14083],{"class":43},[37,14330,14331],{"class":39,"line":242},[37,14332,13704],{"class":43},[37,14334,14335,14338,14340,14342],{"class":39,"line":270},[37,14336,14337],{"class":43}," frameRef.current ",[37,14339,55],{"class":297},[37,14341,14080],{"class":51},[37,14343,14083],{"class":43},[37,14345,14346,14349,14351,14353,14355],{"class":39,"line":1145},[37,14347,14348],{"class":297}," return",[37,14350,14043],{"class":43},[37,14352,3498],{"class":297},[37,14354,14118],{"class":51},[37,14356,14357],{"class":43},"(frameRef.current)\n",[37,14359,14360],{"class":39,"line":1151},[37,14361,14362],{"class":43}," }, [])\n",[37,14364,14365],{"class":39,"line":1157},[37,14366,120],{"emptyLinePlaceholder":119},[37,14368,14369,14371],{"class":39,"line":1162},[37,14370,3475],{"class":297},[37,14372,3478],{"class":43},[37,14374,14375,14377,14379,14381,14383,14385],{"class":39,"line":1168},[37,14376,174],{"class":43},[37,14378,48],{"class":291},[37,14380,294],{"class":51},[37,14382,55],{"class":297},[37,14384,59],{"class":58},[37,14386,62],{"class":43},[37,14388,14389,14391,14393,14395,14397],{"class":39,"line":1191},[37,14390,3549],{"class":43},[37,14392,78],{"class":291},[37,14394,13358],{"class":51},[37,14396,55],{"class":297},[37,14398,14399],{"class":43},"{{ rotation }} />\n",[37,14401,14402,14404,14406],{"class":39,"line":1197},[37,14403,3564],{"class":43},[37,14405,48],{"class":291},[37,14407,62],{"class":43},[37,14409,14410],{"class":39,"line":8929},[37,14411,3573],{"class":43},[37,14413,14414],{"class":39,"line":8934},[37,14415,312],{"class":43},[27,14417,14419],{"className":543,"code":14418,"language":545,"meta":32,"style":32},"\u003Cscript>\n import { onMount, onDestroy } from 'svelte'\n\n let rotation = 0\n let animFrame\n\n onMount(() => {\n const animate = () => {\n rotation = (rotation + 0.5) % 360\n animFrame = requestAnimationFrame(animate)\n }\n animFrame = requestAnimationFrame(animate)\n })\n\n onDestroy(() => cancelAnimationFrame(animFrame))\n\u003C/script>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient transform={{ rotation }} />\n\u003C/Shader>\n",[34,14420,14421,14429,14434,14438,14443,14448,14452,14457,14473,14493,14504,14508,14518,14522,14526,14531,14539,14543,14557,14569],{"__ignoreMap":32},[37,14422,14423,14425,14427],{"class":39,"line":40},[37,14424,44],{"class":43},[37,14426,3329],{"class":47},[37,14428,62],{"class":43},[37,14430,14431],{"class":39,"line":65},[37,14432,14433],{"class":43}," import { onMount, onDestroy } from 'svelte'\n",[37,14435,14436],{"class":39,"line":72},[37,14437,120],{"emptyLinePlaceholder":119},[37,14439,14440],{"class":39,"line":116},[37,14441,14442],{"class":43}," let rotation = 0\n",[37,14444,14445],{"class":39,"line":123},[37,14446,14447],{"class":43}," let animFrame\n",[37,14449,14450],{"class":39,"line":129},[37,14451,120],{"emptyLinePlaceholder":119},[37,14453,14454],{"class":39,"line":171},[37,14455,14456],{"class":43}," onMount(() => {\n",[37,14458,14459,14462,14465,14467,14469,14471],{"class":39,"line":221},[37,14460,14461],{"class":43}," const ",[37,14463,14464],{"class":51},"animate",[37,14466,2815],{"class":297},[37,14468,14043],{"class":43},[37,14470,3498],{"class":297},[37,14472,3976],{"class":43},[37,14474,14475,14478,14480,14483,14485,14487,14489,14491],{"class":39,"line":231},[37,14476,14477],{"class":43}," rotation ",[37,14479,55],{"class":297},[37,14481,14482],{"class":43}," (rotation ",[37,14484,8766],{"class":297},[37,14486,14062],{"class":291},[37,14488,9930],{"class":43},[37,14490,14067],{"class":297},[37,14492,14070],{"class":291},[37,14494,14495,14498,14500,14502],{"class":39,"line":236},[37,14496,14497],{"class":43}," animFrame ",[37,14499,55],{"class":297},[37,14501,14080],{"class":51},[37,14503,14083],{"class":43},[37,14505,14506],{"class":39,"line":242},[37,14507,13704],{"class":43},[37,14509,14510,14512,14514,14516],{"class":39,"line":270},[37,14511,14075],{"class":43},[37,14513,55],{"class":297},[37,14515,14080],{"class":51},[37,14517,14083],{"class":43},[37,14519,14520],{"class":39,"line":1145},[37,14521,10935],{"class":43},[37,14523,14524],{"class":39,"line":1151},[37,14525,120],{"emptyLinePlaceholder":119},[37,14527,14528],{"class":39,"line":1157},[37,14529,14530],{"class":43}," onDestroy(() => cancelAnimationFrame(animFrame))\n",[37,14532,14533,14535,14537],{"class":39,"line":1162},[37,14534,273],{"class":43},[37,14536,3329],{"class":47},[37,14538,62],{"class":43},[37,14540,14541],{"class":39,"line":1168},[37,14542,120],{"emptyLinePlaceholder":119},[37,14544,14545,14547,14549,14551,14553,14555],{"class":39,"line":1191},[37,14546,44],{"class":43},[37,14548,48],{"class":291},[37,14550,52],{"class":51},[37,14552,55],{"class":297},[37,14554,59],{"class":58},[37,14556,62],{"class":43},[37,14558,14559,14561,14563,14565,14567],{"class":39,"line":1197},[37,14560,75],{"class":43},[37,14562,78],{"class":291},[37,14564,13358],{"class":51},[37,14566,55],{"class":297},[37,14568,14399],{"class":43},[37,14570,14571,14573,14575],{"class":39,"line":8929},[37,14572,273],{"class":43},[37,14574,48],{"class":291},[37,14576,62],{"class":43},[27,14578,14580],{"className":543,"code":14579,"language":545,"meta":32,"style":32},"import { createSignal, onMount, onCleanup } from 'solid-js'\n\nfunction SpinningGradient() {\n const [rotation, setRotation] = createSignal(0)\n\n onMount(() => {\n let frame\n const animate = () => {\n setRotation(r => (r + 0.5) % 360)\n frame = requestAnimationFrame(animate)\n }\n frame = requestAnimationFrame(animate)\n onCleanup(() => cancelAnimationFrame(frame))\n })\n\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient transform={{ rotation: rotation() }} />\n \u003C/Shader>\n )\n}\n",[34,14581,14582,14593,14597,14605,14629,14633,14644,14652,14666,14690,14701,14705,14716,14730,14734,14738,14744,14758,14775,14783,14787],{"__ignoreMap":32},[37,14583,14584,14586,14589,14591],{"class":39,"line":40},[37,14585,1382],{"class":297},[37,14587,14588],{"class":43}," { createSignal, onMount, onCleanup } ",[37,14590,1388],{"class":297},[37,14592,3722],{"class":58},[37,14594,14595],{"class":39,"line":65},[37,14596,120],{"emptyLinePlaceholder":119},[37,14598,14599,14601,14603],{"class":39,"line":72},[37,14600,3378],{"class":297},[37,14602,14213],{"class":51},[37,14604,3384],{"class":43},[37,14606,14607,14609,14611,14613,14615,14617,14619,14621,14623,14625,14627],{"class":39,"line":116},[37,14608,3441],{"class":297},[37,14610,3444],{"class":43},[37,14612,9765],{"class":291},[37,14614,2961],{"class":43},[37,14616,14228],{"class":291},[37,14618,3455],{"class":43},[37,14620,55],{"class":297},[37,14622,3753],{"class":51},[37,14624,3364],{"class":43},[37,14626,6610],{"class":291},[37,14628,3369],{"class":43},[37,14630,14631],{"class":39,"line":123},[37,14632,120],{"emptyLinePlaceholder":119},[37,14634,14635,14638,14640,14642],{"class":39,"line":129},[37,14636,14637],{"class":51}," onMount",[37,14639,14028],{"class":43},[37,14641,3498],{"class":297},[37,14643,3976],{"class":43},[37,14645,14646,14649],{"class":39,"line":171},[37,14647,14648],{"class":297}," let",[37,14650,14651],{"class":43}," frame\n",[37,14653,14654,14656,14658,14660,14662,14664],{"class":39,"line":221},[37,14655,14279],{"class":297},[37,14657,9889],{"class":51},[37,14659,2815],{"class":297},[37,14661,14043],{"class":43},[37,14663,3498],{"class":297},[37,14665,3976],{"class":43},[37,14667,14668,14670,14672,14674,14676,14678,14680,14682,14684,14686,14688],{"class":39,"line":231},[37,14669,14294],{"class":51},[37,14671,3364],{"class":43},[37,14673,14299],{"class":8757},[37,14675,8760],{"class":297},[37,14677,14304],{"class":43},[37,14679,8766],{"class":297},[37,14681,14062],{"class":291},[37,14683,9930],{"class":43},[37,14685,14067],{"class":297},[37,14687,14315],{"class":291},[37,14689,3369],{"class":43},[37,14691,14692,14695,14697,14699],{"class":39,"line":236},[37,14693,14694],{"class":43}," frame ",[37,14696,55],{"class":297},[37,14698,14080],{"class":51},[37,14700,14083],{"class":43},[37,14702,14703],{"class":39,"line":242},[37,14704,13704],{"class":43},[37,14706,14707,14710,14712,14714],{"class":39,"line":270},[37,14708,14709],{"class":43}," frame ",[37,14711,55],{"class":297},[37,14713,14080],{"class":51},[37,14715,14083],{"class":43},[37,14717,14718,14721,14723,14725,14727],{"class":39,"line":1145},[37,14719,14720],{"class":51}," onCleanup",[37,14722,14028],{"class":43},[37,14724,3498],{"class":297},[37,14726,14118],{"class":51},[37,14728,14729],{"class":43},"(frame))\n",[37,14731,14732],{"class":39,"line":1151},[37,14733,10935],{"class":43},[37,14735,14736],{"class":39,"line":1157},[37,14737,120],{"emptyLinePlaceholder":119},[37,14739,14740,14742],{"class":39,"line":1162},[37,14741,3475],{"class":297},[37,14743,3478],{"class":43},[37,14745,14746,14748,14750,14752,14754,14756],{"class":39,"line":1168},[37,14747,174],{"class":43},[37,14749,48],{"class":291},[37,14751,52],{"class":51},[37,14753,55],{"class":297},[37,14755,59],{"class":58},[37,14757,62],{"class":43},[37,14759,14760,14762,14764,14766,14768,14770,14772],{"class":39,"line":1191},[37,14761,3549],{"class":43},[37,14763,78],{"class":291},[37,14765,13358],{"class":51},[37,14767,55],{"class":297},[37,14769,13363],{"class":43},[37,14771,9765],{"class":51},[37,14773,14774],{"class":43},"() }} />\n",[37,14776,14777,14779,14781],{"class":39,"line":1197},[37,14778,3564],{"class":43},[37,14780,48],{"class":291},[37,14782,62],{"class":43},[37,14784,14785],{"class":39,"line":8929},[37,14786,3573],{"class":43},[37,14788,14789],{"class":39,"line":8934},[37,14790,312],{"class":43},[27,14792,14794],{"className":987,"code":14793,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst canvas = document.getElementById('my-shader')\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', id: 'grad', props: { colorA: '#0f172a', colorB: '#7c3aed' } }\n ]\n})\n\nlet rotation = 0\nconst animate = () => {\n rotation = (rotation + 0.5) % 360\n shader.update('grad', { transform: { rotation } })\n requestAnimationFrame(animate)\n}\nrequestAnimationFrame(animate)\n",[34,14795,14796,14806,14810,14828,14842,14846,14869,14873,14877,14881,14893,14907,14926,14940,14947,14951],{"__ignoreMap":32},[37,14797,14798,14800,14802,14804],{"class":39,"line":40},[37,14799,1382],{"class":297},[37,14801,9444],{"class":43},[37,14803,1388],{"class":297},[37,14805,9449],{"class":58},[37,14807,14808],{"class":39,"line":65},[37,14809,120],{"emptyLinePlaceholder":119},[37,14811,14812,14814,14816,14818,14820,14822,14824,14826],{"class":39,"line":72},[37,14813,2809],{"class":297},[37,14815,3868],{"class":291},[37,14817,2815],{"class":297},[37,14819,3873],{"class":43},[37,14821,3876],{"class":51},[37,14823,3364],{"class":43},[37,14825,10457],{"class":58},[37,14827,3369],{"class":43},[37,14829,14830,14832,14834,14836,14838,14840],{"class":39,"line":116},[37,14831,2809],{"class":297},[37,14833,2812],{"class":291},[37,14835,2815],{"class":297},[37,14837,2818],{"class":297},[37,14839,999],{"class":51},[37,14841,1002],{"class":43},[37,14843,14844],{"class":39,"line":123},[37,14845,1007],{"class":43},[37,14847,14848,14850,14852,14854,14857,14859,14862,14864,14867],{"class":39,"line":129},[37,14849,1017],{"class":43},[37,14851,1020],{"class":58},[37,14853,3944],{"class":43},[37,14855,14856],{"class":58},"'grad'",[37,14858,8098],{"class":43},[37,14860,14861],{"class":58},"'#0f172a'",[37,14863,8104],{"class":43},[37,14865,14866],{"class":58},"'#7c3aed'",[37,14868,1142],{"class":43},[37,14870,14871],{"class":39,"line":171},[37,14872,1194],{"class":43},[37,14874,14875],{"class":39,"line":221},[37,14876,1200],{"class":43},[37,14878,14879],{"class":39,"line":231},[37,14880,120],{"emptyLinePlaceholder":119},[37,14882,14883,14885,14888,14890],{"class":39,"line":236},[37,14884,14013],{"class":297},[37,14886,14887],{"class":43}," rotation ",[37,14889,55],{"class":297},[37,14891,14892],{"class":291}," 0\n",[37,14894,14895,14897,14899,14901,14903,14905],{"class":39,"line":242},[37,14896,2809],{"class":297},[37,14898,9889],{"class":51},[37,14900,2815],{"class":297},[37,14902,14043],{"class":43},[37,14904,3498],{"class":297},[37,14906,3976],{"class":43},[37,14908,14909,14912,14914,14916,14918,14920,14922,14924],{"class":39,"line":270},[37,14910,14911],{"class":43}," rotation ",[37,14913,55],{"class":297},[37,14915,14482],{"class":43},[37,14917,8766],{"class":297},[37,14919,14062],{"class":291},[37,14921,9930],{"class":43},[37,14923,14067],{"class":297},[37,14925,14070],{"class":291},[37,14927,14928,14931,14933,14935,14937],{"class":39,"line":1145},[37,14929,14930],{"class":43}," shader.",[37,14932,9537],{"class":51},[37,14934,3364],{"class":43},[37,14936,14856],{"class":58},[37,14938,14939],{"class":43},", { transform: { rotation } })\n",[37,14941,14942,14945],{"class":39,"line":1151},[37,14943,14944],{"class":51}," requestAnimationFrame",[37,14946,14083],{"class":43},[37,14948,14949],{"class":39,"line":1157},[37,14950,312],{"class":43},[37,14952,14953,14956],{"class":39,"line":1162},[37,14954,14955],{"class":51},"requestAnimationFrame",[37,14957,14083],{"class":43},[15,14959,14960,14961,14965,14966,14969],{},"For continuous animations like rotation, consider using a ",[2237,14962,14964],{"href":14963},"/docs/guide/dynamic-props","Prop Driver"," instead — the ",[34,14967,14968],{},"auto-animate"," driver handles this declaratively without any component code.",[1202,14971,14973],{"id":14972},"performance","Performance",[15,14975,14976,14977,14980],{},"Transforms have ",[1306,14978,14979],{},"zero overhead when all values are at their defaults",". The renderer checks for non-default values before activating the UV transformation pass.",[15,14982,14983],{},"Once a non-default transform is applied, a render-to-texture (RTT) pass activates for that component. This RTT persists for the lifetime of the component — even if values return to defaults — to prevent a recompilation flash during animations.",[15,14985,14986],{},"The practical implication: if you're conditionally showing/hiding a transform during an animation, the small RTT cost is paid once and stays, rather than toggling on and off.",[1311,14988,14989],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":32,"searchDepth":65,"depth":65,"links":14991},[14992,14993,14994,14995,14996,14997],{"id":13041,"depth":65,"text":13042},{"id":13232,"depth":65,"text":13233},{"id":13718,"depth":65,"text":13719},{"id":13821,"depth":65,"text":13822},{"id":13955,"depth":65,"text":13956},{"id":14972,"depth":65,"text":14973},"Reposition, rotate, and scale any shader component in UV space","arrows-to-circle",{},"/docs/guide/transforms",{"title":12948,"description":14998},"docs/guide/6.transforms","I6UL4PDAPMEAXn2HXal6IZYN8IJaEN-UqIZcjXIiNCw",{"id":15006,"title":15007,"body":15008,"category":8163,"description":18666,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":18667,"meta":18668,"navigation":119,"path":14963,"seo":18669,"stem":18670,"__hash__":18671},"guide/docs/guide/7.dynamic-props.md","Dynamic Props",{"type":8,"value":15009,"toc":18658},[15010,15013,15016,15019,15068,15070,15073,15610,15613,15618,15746,15758,15761,15777,16245,16248,16252,16452,16464,16496,16499,16502,16984,16987,16991,17120,17125,17128,17131,17137,17857,17860,17864,18005,18010,18014,18017,18497,18501,18508,18656],[11,15011,15007],{"id":15012},"dynamic-props",[15,15014,15015],{},"Dynamic props let any numeric or position prop respond to time, mouse position, or the visual output of another layer — declared directly as a prop value.",[15,15017,15018],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[27,15020,15022],{"className":29,"code":15021,"language":31,"meta":32,"style":32},"\u003C!-- Static value -->\n\u003CCircle :radius=\"0.5\" />\n\n\u003C!-- Dynamic prop: animates radius automatically -->\n\u003CCircle :radius=\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\" />\n",[34,15023,15024,15029,15044,15048,15053],{"__ignoreMap":32},[37,15025,15026],{"class":39,"line":40},[37,15027,15028],{"class":68},"\u003C!-- Static value -->\n",[37,15030,15031,15033,15035,15038,15040,15042],{"class":39,"line":65},[37,15032,44],{"class":43},[37,15034,3293],{"class":47},[37,15036,15037],{"class":51}," :radius",[37,15039,55],{"class":43},[37,15041,5616],{"class":58},[37,15043,113],{"class":43},[37,15045,15046],{"class":39,"line":72},[37,15047,120],{"emptyLinePlaceholder":119},[37,15049,15050],{"class":39,"line":116},[37,15051,15052],{"class":68},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[37,15054,15055,15057,15059,15061,15063,15066],{"class":39,"line":123},[37,15056,44],{"class":43},[37,15058,3293],{"class":47},[37,15060,15037],{"class":51},[37,15062,55],{"class":43},[37,15064,15065],{"class":58},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[37,15067,113],{"class":43},[1202,15069,14968],{"id":14968},[15,15071,15072],{},"Continuously animates a numeric prop between two values over time.",[23,15074,15075,15166,15278,15381,15483],{":tabs":25},[27,15076,15078],{"className":29,"code":15077,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n :radius=\"{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }\"\n />\n\u003C/Shader>\n",[34,15079,15080,15094,15100,15109,15119,15124,15129,15134,15139,15144,15149,15154,15158],{"__ignoreMap":32},[37,15081,15082,15084,15086,15088,15090,15092],{"class":39,"line":40},[37,15083,44],{"class":43},[37,15085,48],{"class":47},[37,15087,52],{"class":51},[37,15089,55],{"class":43},[37,15091,59],{"class":58},[37,15093,62],{"class":43},[37,15095,15096,15098],{"class":39,"line":65},[37,15097,75],{"class":43},[37,15099,7565],{"class":47},[37,15101,15102,15104,15106],{"class":39,"line":72},[37,15103,7570],{"class":51},[37,15105,55],{"class":43},[37,15107,15108],{"class":58},"\"#6366f1\"\n",[37,15110,15111,15114,15116],{"class":39,"line":116},[37,15112,15113],{"class":51}," :radius",[37,15115,55],{"class":43},[37,15117,15118],{"class":58},"\"{\n",[37,15120,15121],{"class":39,"line":123},[37,15122,15123],{"class":58}," type: 'auto-animate',\n",[37,15125,15126],{"class":39,"line":129},[37,15127,15128],{"class":58}," mode: 'ping-pong',\n",[37,15130,15131],{"class":39,"line":171},[37,15132,15133],{"class":58}," outputMin: 0.2,\n",[37,15135,15136],{"class":39,"line":221},[37,15137,15138],{"class":58}," outputMax: 0.6,\n",[37,15140,15141],{"class":39,"line":231},[37,15142,15143],{"class":58}," speed: 0.8,\n",[37,15145,15146],{"class":39,"line":236},[37,15147,15148],{"class":58}," easing: 'sine'\n",[37,15150,15151],{"class":39,"line":242},[37,15152,15153],{"class":58}," }\"\n",[37,15155,15156],{"class":39,"line":270},[37,15157,2314],{"class":43},[37,15159,15160,15162,15164],{"class":39,"line":1145},[37,15161,273],{"class":43},[37,15163,48],{"class":47},[37,15165,62],{"class":43},[27,15167,15169],{"className":280,"code":15168,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }}\n />\n\u003C/Shader>\n",[34,15170,15171,15185,15191,15199,15208,15217,15227,15236,15245,15254,15261,15266,15270],{"__ignoreMap":32},[37,15172,15173,15175,15177,15179,15181,15183],{"class":39,"line":40},[37,15174,44],{"class":43},[37,15176,48],{"class":291},[37,15178,294],{"class":51},[37,15180,55],{"class":297},[37,15182,59],{"class":58},[37,15184,62],{"class":43},[37,15186,15187,15189],{"class":39,"line":65},[37,15188,75],{"class":43},[37,15190,7565],{"class":291},[37,15192,15193,15195,15197],{"class":39,"line":72},[37,15194,7570],{"class":51},[37,15196,55],{"class":297},[37,15198,15108],{"class":58},[37,15200,15201,15203,15205],{"class":39,"line":116},[37,15202,7580],{"class":51},[37,15204,55],{"class":297},[37,15206,15207],{"class":43},"{{\n",[37,15209,15210,15212,15215],{"class":39,"line":123},[37,15211,1065],{"class":43},[37,15213,15214],{"class":58},"'auto-animate'",[37,15216,1071],{"class":43},[37,15218,15219,15222,15225],{"class":39,"line":129},[37,15220,15221],{"class":43}," mode: ",[37,15223,15224],{"class":58},"'ping-pong'",[37,15226,1071],{"class":43},[37,15228,15229,15232,15234],{"class":39,"line":171},[37,15230,15231],{"class":43}," outputMin: ",[37,15233,13390],{"class":291},[37,15235,1071],{"class":43},[37,15237,15238,15241,15243],{"class":39,"line":221},[37,15239,15240],{"class":43}," outputMax: ",[37,15242,6173],{"class":291},[37,15244,1071],{"class":43},[37,15246,15247,15250,15252],{"class":39,"line":231},[37,15248,15249],{"class":43}," speed: ",[37,15251,4235],{"class":291},[37,15253,1071],{"class":43},[37,15255,15256,15258],{"class":39,"line":236},[37,15257,9911],{"class":43},[37,15259,15260],{"class":58},"'sine'\n",[37,15262,15263],{"class":39,"line":242},[37,15264,15265],{"class":43}," }}\n",[37,15267,15268],{"class":39,"line":270},[37,15269,2314],{"class":43},[37,15271,15272,15274,15276],{"class":39,"line":1145},[37,15273,273],{"class":43},[37,15275,48],{"class":291},[37,15277,62],{"class":43},[27,15279,15281],{"className":543,"code":15280,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }}\n />\n\u003C/Shader>\n",[34,15282,15283,15297,15303,15311,15319,15327,15335,15343,15351,15359,15365,15369,15373],{"__ignoreMap":32},[37,15284,15285,15287,15289,15291,15293,15295],{"class":39,"line":40},[37,15286,44],{"class":43},[37,15288,48],{"class":291},[37,15290,52],{"class":51},[37,15292,55],{"class":297},[37,15294,59],{"class":58},[37,15296,62],{"class":43},[37,15298,15299,15301],{"class":39,"line":65},[37,15300,75],{"class":43},[37,15302,7565],{"class":291},[37,15304,15305,15307,15309],{"class":39,"line":72},[37,15306,7570],{"class":51},[37,15308,55],{"class":297},[37,15310,15108],{"class":58},[37,15312,15313,15315,15317],{"class":39,"line":116},[37,15314,7580],{"class":51},[37,15316,55],{"class":297},[37,15318,15207],{"class":43},[37,15320,15321,15323,15325],{"class":39,"line":123},[37,15322,1065],{"class":43},[37,15324,15214],{"class":58},[37,15326,1071],{"class":43},[37,15328,15329,15331,15333],{"class":39,"line":129},[37,15330,15221],{"class":43},[37,15332,15224],{"class":58},[37,15334,1071],{"class":43},[37,15336,15337,15339,15341],{"class":39,"line":171},[37,15338,15231],{"class":43},[37,15340,13390],{"class":291},[37,15342,1071],{"class":43},[37,15344,15345,15347,15349],{"class":39,"line":221},[37,15346,15240],{"class":43},[37,15348,6173],{"class":291},[37,15350,1071],{"class":43},[37,15352,15353,15355,15357],{"class":39,"line":231},[37,15354,15249],{"class":43},[37,15356,4235],{"class":291},[37,15358,1071],{"class":43},[37,15360,15361,15363],{"class":39,"line":236},[37,15362,9911],{"class":43},[37,15364,15260],{"class":58},[37,15366,15367],{"class":39,"line":242},[37,15368,15265],{"class":43},[37,15370,15371],{"class":39,"line":270},[37,15372,2314],{"class":43},[37,15374,15375,15377,15379],{"class":39,"line":1145},[37,15376,273],{"class":43},[37,15378,48],{"class":291},[37,15380,62],{"class":43},[27,15382,15383],{"className":543,"code":15280,"language":545,"meta":32,"style":32},[34,15384,15385,15399,15405,15413,15421,15429,15437,15445,15453,15461,15467,15471,15475],{"__ignoreMap":32},[37,15386,15387,15389,15391,15393,15395,15397],{"class":39,"line":40},[37,15388,44],{"class":43},[37,15390,48],{"class":291},[37,15392,52],{"class":51},[37,15394,55],{"class":297},[37,15396,59],{"class":58},[37,15398,62],{"class":43},[37,15400,15401,15403],{"class":39,"line":65},[37,15402,75],{"class":43},[37,15404,7565],{"class":291},[37,15406,15407,15409,15411],{"class":39,"line":72},[37,15408,7570],{"class":51},[37,15410,55],{"class":297},[37,15412,15108],{"class":58},[37,15414,15415,15417,15419],{"class":39,"line":116},[37,15416,7580],{"class":51},[37,15418,55],{"class":297},[37,15420,15207],{"class":43},[37,15422,15423,15425,15427],{"class":39,"line":123},[37,15424,1065],{"class":43},[37,15426,15214],{"class":58},[37,15428,1071],{"class":43},[37,15430,15431,15433,15435],{"class":39,"line":129},[37,15432,15221],{"class":43},[37,15434,15224],{"class":58},[37,15436,1071],{"class":43},[37,15438,15439,15441,15443],{"class":39,"line":171},[37,15440,15231],{"class":43},[37,15442,13390],{"class":291},[37,15444,1071],{"class":43},[37,15446,15447,15449,15451],{"class":39,"line":221},[37,15448,15240],{"class":43},[37,15450,6173],{"class":291},[37,15452,1071],{"class":43},[37,15454,15455,15457,15459],{"class":39,"line":231},[37,15456,15249],{"class":43},[37,15458,4235],{"class":291},[37,15460,1071],{"class":43},[37,15462,15463,15465],{"class":39,"line":236},[37,15464,9911],{"class":43},[37,15466,15260],{"class":58},[37,15468,15469],{"class":39,"line":242},[37,15470,15265],{"class":43},[37,15472,15473],{"class":39,"line":270},[37,15474,2314],{"class":43},[37,15476,15477,15479,15481],{"class":39,"line":1145},[37,15478,273],{"class":43},[37,15480,48],{"class":291},[37,15482,62],{"class":43},[27,15484,15486],{"className":987,"code":15485,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Circle',\n props: {\n color: '#6366f1',\n radius: {\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.6,\n speed: 0.8,\n easing: 'sine'\n }\n }\n }\n ]\n})\n",[34,15487,15488,15502,15506,15510,15518,15522,15532,15537,15546,15555,15564,15573,15582,15589,15594,15598,15602,15606],{"__ignoreMap":32},[37,15489,15490,15492,15494,15496,15498,15500],{"class":39,"line":40},[37,15491,2809],{"class":297},[37,15493,2812],{"class":291},[37,15495,2815],{"class":297},[37,15497,2818],{"class":297},[37,15499,999],{"class":51},[37,15501,1002],{"class":43},[37,15503,15504],{"class":39,"line":65},[37,15505,1007],{"class":43},[37,15507,15508],{"class":39,"line":72},[37,15509,1060],{"class":43},[37,15511,15512,15514,15516],{"class":39,"line":116},[37,15513,1065],{"class":43},[37,15515,3941],{"class":58},[37,15517,1071],{"class":43},[37,15519,15520],{"class":39,"line":123},[37,15521,13647],{"class":43},[37,15523,15524,15527,15530],{"class":39,"line":129},[37,15525,15526],{"class":43}," color: ",[37,15528,15529],{"class":58},"'#6366f1'",[37,15531,1071],{"class":43},[37,15533,15534],{"class":39,"line":171},[37,15535,15536],{"class":43}," radius: {\n",[37,15538,15539,15542,15544],{"class":39,"line":221},[37,15540,15541],{"class":43}," type: ",[37,15543,15214],{"class":58},[37,15545,1071],{"class":43},[37,15547,15548,15551,15553],{"class":39,"line":231},[37,15549,15550],{"class":43}," mode: ",[37,15552,15224],{"class":58},[37,15554,1071],{"class":43},[37,15556,15557,15560,15562],{"class":39,"line":236},[37,15558,15559],{"class":43}," outputMin: ",[37,15561,13390],{"class":291},[37,15563,1071],{"class":43},[37,15565,15566,15569,15571],{"class":39,"line":242},[37,15567,15568],{"class":43}," outputMax: ",[37,15570,6173],{"class":291},[37,15572,1071],{"class":43},[37,15574,15575,15578,15580],{"class":39,"line":270},[37,15576,15577],{"class":43}," speed: ",[37,15579,4235],{"class":291},[37,15581,1071],{"class":43},[37,15583,15584,15587],{"class":39,"line":1145},[37,15585,15586],{"class":43}," easing: ",[37,15588,15260],{"class":58},[37,15590,15591],{"class":39,"line":1151},[37,15592,15593],{"class":43}," }\n",[37,15595,15596],{"class":39,"line":1157},[37,15597,13662],{"class":43},[37,15599,15600],{"class":39,"line":1162},[37,15601,13704],{"class":43},[37,15603,15604],{"class":39,"line":1168},[37,15605,1194],{"class":43},[37,15607,15608],{"class":39,"line":1191},[37,15609,1200],{"class":43},[19,15611],{":preset":15612},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"auto-animate\",\"mode\":\"ping-pong\",\"outputMin\":0.2,\"outputMax\":0.6,\"speed\":0.8,\"easing\":\"sine\"}}}]}",[15,15614,15615],{},[1306,15616,15617],{},"Properties:",[2860,15619,15620,15632],{},[2863,15621,15622],{},[2866,15623,15624,15626,15628,15630],{},[2869,15625,13057],{},[2869,15627,13060],{},[2869,15629,13063],{},[2869,15631,2874],{},[2876,15633,15634,15659,15675,15691,15710],{},[2866,15635,15636,15641,15646,15649],{},[2881,15637,15638],{},[34,15639,15640],{},"mode",[2881,15642,15643],{},[34,15644,15645],{},"'ping-pong' | 'loop'",[2881,15647,15648],{},"required",[2881,15650,15651,15654,15655,15658],{},[34,15652,15653],{},"ping-pong"," oscillates between min and max. ",[34,15656,15657],{},"loop"," advances from min to max then wraps.",[2866,15660,15661,15666,15670,15672],{},[2881,15662,15663],{},[34,15664,15665],{},"outputMin",[2881,15667,15668],{},[34,15669,13079],{},[2881,15671,15648],{},[2881,15673,15674],{},"Value at the start/bottom of the range.",[2866,15676,15677,15682,15686,15688],{},[2881,15678,15679],{},[34,15680,15681],{},"outputMax",[2881,15683,15684],{},[34,15685,13079],{},[2881,15687,15648],{},[2881,15689,15690],{},"Value at the end/top of the range.",[2866,15692,15693,15698,15702,15707],{},[2881,15694,15695],{},[34,15696,15697],{},"speed",[2881,15699,15700],{},[34,15701,13079],{},[2881,15703,15704],{},[34,15705,15706],{},"1.0",[2881,15708,15709],{},"Cycles per second. Negative values reverse the loop direction.",[2866,15711,15712,15717,15721,15726],{},[2881,15713,15714],{},[34,15715,15716],{},"easing",[2881,15718,15719],{},[34,15720,6998],{},[2881,15722,15723],{},[34,15724,15725],{},"'sine'",[2881,15727,15728,15729,15731,15732,2961,15735,2961,15737,2961,15740,2961,15743,7423],{},"Easing curve for ",[34,15730,15653],{}," mode. Options: ",[34,15733,15734],{},"sine",[34,15736,2960],{},[34,15738,15739],{},"quad",[34,15741,15742],{},"expo",[34,15744,15745],{},"bounce",[15,15747,15748,15751,15752,15754,15755,7423],{},[1306,15749,15750],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[34,15753,15657],{}," mode and ",[34,15756,15757],{},"outputMin: 0, outputMax: 360",[1202,15759,15760],{"id":15760},"mouse-position",[15,15762,15763,15764,15767,15768,2961,15770,15773,15774,7423],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[34,15765,15766],{},"{ x, y }"," coordinates, such as ",[34,15769,6178],{},[34,15771,15772],{},"position",", or ",[34,15775,15776],{},"offset",[23,15778,15779,15861,15959,16050,16140],{":tabs":25},[27,15780,15782],{"className":29,"code":15781,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n :radius=\"0.15\"\n :center=\"{\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }\"\n />\n\u003C/Shader>\n",[34,15783,15784,15798,15804,15812,15821,15830,15835,15840,15845,15849,15853],{"__ignoreMap":32},[37,15785,15786,15788,15790,15792,15794,15796],{"class":39,"line":40},[37,15787,44],{"class":43},[37,15789,48],{"class":47},[37,15791,52],{"class":51},[37,15793,55],{"class":43},[37,15795,59],{"class":58},[37,15797,62],{"class":43},[37,15799,15800,15802],{"class":39,"line":65},[37,15801,75],{"class":43},[37,15803,7565],{"class":47},[37,15805,15806,15808,15810],{"class":39,"line":72},[37,15807,7570],{"class":51},[37,15809,55],{"class":43},[37,15811,15108],{"class":58},[37,15813,15814,15816,15818],{"class":39,"line":116},[37,15815,15113],{"class":51},[37,15817,55],{"class":43},[37,15819,15820],{"class":58},"\"0.15\"\n",[37,15822,15823,15826,15828],{"class":39,"line":123},[37,15824,15825],{"class":51}," :center",[37,15827,55],{"class":43},[37,15829,15118],{"class":58},[37,15831,15832],{"class":39,"line":129},[37,15833,15834],{"class":58}," type: 'mouse-position',\n",[37,15836,15837],{"class":39,"line":171},[37,15838,15839],{"class":58}," smoothing: 0.12,\n",[37,15841,15842],{"class":39,"line":221},[37,15843,15844],{"class":58}," momentum: 0.2\n",[37,15846,15847],{"class":39,"line":231},[37,15848,15153],{"class":58},[37,15850,15851],{"class":39,"line":236},[37,15852,2314],{"class":43},[37,15854,15855,15857,15859],{"class":39,"line":242},[37,15856,273],{"class":43},[37,15858,48],{"class":47},[37,15860,62],{"class":43},[27,15862,15864],{"className":280,"code":15863,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={0.15}\n center={{\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }}\n />\n\u003C/Shader>\n",[34,15865,15866,15880,15886,15894,15907,15916,15925,15935,15943,15947,15951],{"__ignoreMap":32},[37,15867,15868,15870,15872,15874,15876,15878],{"class":39,"line":40},[37,15869,44],{"class":43},[37,15871,48],{"class":291},[37,15873,294],{"class":51},[37,15875,55],{"class":297},[37,15877,59],{"class":58},[37,15879,62],{"class":43},[37,15881,15882,15884],{"class":39,"line":65},[37,15883,75],{"class":43},[37,15885,7565],{"class":291},[37,15887,15888,15890,15892],{"class":39,"line":72},[37,15889,7570],{"class":51},[37,15891,55],{"class":297},[37,15893,15108],{"class":58},[37,15895,15896,15898,15900,15902,15905],{"class":39,"line":116},[37,15897,7580],{"class":51},[37,15899,55],{"class":297},[37,15901,326],{"class":43},[37,15903,15904],{"class":291},"0.15",[37,15906,312],{"class":43},[37,15908,15909,15912,15914],{"class":39,"line":123},[37,15910,15911],{"class":51}," center",[37,15913,55],{"class":297},[37,15915,15207],{"class":43},[37,15917,15918,15920,15923],{"class":39,"line":129},[37,15919,1065],{"class":43},[37,15921,15922],{"class":58},"'mouse-position'",[37,15924,1071],{"class":43},[37,15926,15927,15930,15933],{"class":39,"line":171},[37,15928,15929],{"class":43}," smoothing: ",[37,15931,15932],{"class":291},"0.12",[37,15934,1071],{"class":43},[37,15936,15937,15940],{"class":39,"line":221},[37,15938,15939],{"class":43}," momentum: ",[37,15941,15942],{"class":291},"0.2\n",[37,15944,15945],{"class":39,"line":231},[37,15946,15265],{"class":43},[37,15948,15949],{"class":39,"line":236},[37,15950,2314],{"class":43},[37,15952,15953,15955,15957],{"class":39,"line":242},[37,15954,273],{"class":43},[37,15956,48],{"class":291},[37,15958,62],{"class":43},[27,15960,15962],{"className":543,"code":15961,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={0.15}\n center={{\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }}\n />\n\u003C/Shader>\n",[34,15963,15964,15978,15984,15992,16004,16012,16020,16028,16034,16038,16042],{"__ignoreMap":32},[37,15965,15966,15968,15970,15972,15974,15976],{"class":39,"line":40},[37,15967,44],{"class":43},[37,15969,48],{"class":291},[37,15971,52],{"class":51},[37,15973,55],{"class":297},[37,15975,59],{"class":58},[37,15977,62],{"class":43},[37,15979,15980,15982],{"class":39,"line":65},[37,15981,75],{"class":43},[37,15983,7565],{"class":291},[37,15985,15986,15988,15990],{"class":39,"line":72},[37,15987,7570],{"class":51},[37,15989,55],{"class":297},[37,15991,15108],{"class":58},[37,15993,15994,15996,15998,16000,16002],{"class":39,"line":116},[37,15995,7580],{"class":51},[37,15997,55],{"class":297},[37,15999,326],{"class":43},[37,16001,15904],{"class":291},[37,16003,312],{"class":43},[37,16005,16006,16008,16010],{"class":39,"line":123},[37,16007,15911],{"class":51},[37,16009,55],{"class":297},[37,16011,15207],{"class":43},[37,16013,16014,16016,16018],{"class":39,"line":129},[37,16015,1065],{"class":43},[37,16017,15922],{"class":58},[37,16019,1071],{"class":43},[37,16021,16022,16024,16026],{"class":39,"line":171},[37,16023,15929],{"class":43},[37,16025,15932],{"class":291},[37,16027,1071],{"class":43},[37,16029,16030,16032],{"class":39,"line":221},[37,16031,15939],{"class":43},[37,16033,15942],{"class":291},[37,16035,16036],{"class":39,"line":231},[37,16037,15265],{"class":43},[37,16039,16040],{"class":39,"line":236},[37,16041,2314],{"class":43},[37,16043,16044,16046,16048],{"class":39,"line":242},[37,16045,273],{"class":43},[37,16047,48],{"class":291},[37,16049,62],{"class":43},[27,16051,16052],{"className":543,"code":15961,"language":545,"meta":32,"style":32},[34,16053,16054,16068,16074,16082,16094,16102,16110,16118,16124,16128,16132],{"__ignoreMap":32},[37,16055,16056,16058,16060,16062,16064,16066],{"class":39,"line":40},[37,16057,44],{"class":43},[37,16059,48],{"class":291},[37,16061,52],{"class":51},[37,16063,55],{"class":297},[37,16065,59],{"class":58},[37,16067,62],{"class":43},[37,16069,16070,16072],{"class":39,"line":65},[37,16071,75],{"class":43},[37,16073,7565],{"class":291},[37,16075,16076,16078,16080],{"class":39,"line":72},[37,16077,7570],{"class":51},[37,16079,55],{"class":297},[37,16081,15108],{"class":58},[37,16083,16084,16086,16088,16090,16092],{"class":39,"line":116},[37,16085,7580],{"class":51},[37,16087,55],{"class":297},[37,16089,326],{"class":43},[37,16091,15904],{"class":291},[37,16093,312],{"class":43},[37,16095,16096,16098,16100],{"class":39,"line":123},[37,16097,15911],{"class":51},[37,16099,55],{"class":297},[37,16101,15207],{"class":43},[37,16103,16104,16106,16108],{"class":39,"line":129},[37,16105,1065],{"class":43},[37,16107,15922],{"class":58},[37,16109,1071],{"class":43},[37,16111,16112,16114,16116],{"class":39,"line":171},[37,16113,15929],{"class":43},[37,16115,15932],{"class":291},[37,16117,1071],{"class":43},[37,16119,16120,16122],{"class":39,"line":221},[37,16121,15939],{"class":43},[37,16123,15942],{"class":291},[37,16125,16126],{"class":39,"line":231},[37,16127,15265],{"class":43},[37,16129,16130],{"class":39,"line":236},[37,16131,2314],{"class":43},[37,16133,16134,16136,16138],{"class":39,"line":242},[37,16135,273],{"class":43},[37,16137,48],{"class":291},[37,16139,62],{"class":43},[27,16141,16143],{"className":987,"code":16142,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Circle',\n props: {\n color: '#6366f1',\n radius: 0.15,\n center: {\n type: 'mouse-position',\n smoothing: 0.12,\n momentum: 0.2\n }\n }\n }\n ]\n})\n",[34,16144,16145,16159,16163,16167,16175,16179,16187,16196,16201,16209,16218,16225,16229,16233,16237,16241],{"__ignoreMap":32},[37,16146,16147,16149,16151,16153,16155,16157],{"class":39,"line":40},[37,16148,2809],{"class":297},[37,16150,2812],{"class":291},[37,16152,2815],{"class":297},[37,16154,2818],{"class":297},[37,16156,999],{"class":51},[37,16158,1002],{"class":43},[37,16160,16161],{"class":39,"line":65},[37,16162,1007],{"class":43},[37,16164,16165],{"class":39,"line":72},[37,16166,1060],{"class":43},[37,16168,16169,16171,16173],{"class":39,"line":116},[37,16170,1065],{"class":43},[37,16172,3941],{"class":58},[37,16174,1071],{"class":43},[37,16176,16177],{"class":39,"line":123},[37,16178,13647],{"class":43},[37,16180,16181,16183,16185],{"class":39,"line":129},[37,16182,15526],{"class":43},[37,16184,15529],{"class":58},[37,16186,1071],{"class":43},[37,16188,16189,16192,16194],{"class":39,"line":171},[37,16190,16191],{"class":43}," radius: ",[37,16193,15904],{"class":291},[37,16195,1071],{"class":43},[37,16197,16198],{"class":39,"line":221},[37,16199,16200],{"class":43}," center: {\n",[37,16202,16203,16205,16207],{"class":39,"line":231},[37,16204,15541],{"class":43},[37,16206,15922],{"class":58},[37,16208,1071],{"class":43},[37,16210,16211,16214,16216],{"class":39,"line":236},[37,16212,16213],{"class":43}," smoothing: ",[37,16215,15932],{"class":291},[37,16217,1071],{"class":43},[37,16219,16220,16223],{"class":39,"line":242},[37,16221,16222],{"class":43}," momentum: ",[37,16224,15942],{"class":291},[37,16226,16227],{"class":39,"line":270},[37,16228,15593],{"class":43},[37,16230,16231],{"class":39,"line":1145},[37,16232,13662],{"class":43},[37,16234,16235],{"class":39,"line":1151},[37,16236,13704],{"class":43},[37,16238,16239],{"class":39,"line":1157},[37,16240,1194],{"class":43},[37,16242,16243],{"class":39,"line":1162},[37,16244,1200],{"class":43},[19,16246],{":preset":16247},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,16249,16250],{},[1306,16251,15617],{},[2860,16253,16254,16266],{},[2863,16255,16256],{},[2866,16257,16258,16260,16262,16264],{},[2869,16259,13057],{},[2869,16261,13060],{},[2869,16263,13063],{},[2869,16265,2874],{},[2876,16267,16268,16290,16310,16329,16347,16368,16389,16416,16434],{},[2866,16269,16270,16275,16280,16285],{},[2881,16271,16272],{},[34,16273,16274],{},"x",[2881,16276,16277],{},[34,16278,16279],{},"'mouse' | number",[2881,16281,16282],{},[34,16283,16284],{},"'mouse'",[2881,16286,16287,16289],{},[34,16288,16284],{}," tracks cursor X. A number pins it to that value (0–1).",[2866,16291,16292,16297,16301,16305],{},[2881,16293,16294],{},[34,16295,16296],{},"y",[2881,16298,16299],{},[34,16300,16279],{},[2881,16302,16303],{},[34,16304,16284],{},[2881,16306,16307,16309],{},[34,16308,16284],{}," tracks cursor Y. A number pins it to that value (0–1).",[2866,16311,16312,16317,16322,16326],{},[2881,16313,16314],{},[34,16315,16316],{},"invertX",[2881,16318,16319],{},[34,16320,16321],{},"boolean",[2881,16323,16324],{},[34,16325,390],{},[2881,16327,16328],{},"Flips the X direction — cursor moving right moves position left.",[2866,16330,16331,16336,16340,16344],{},[2881,16332,16333],{},[34,16334,16335],{},"invertY",[2881,16337,16338],{},[34,16339,16321],{},[2881,16341,16342],{},[34,16343,390],{},[2881,16345,16346],{},"Flips the Y direction.",[2866,16348,16349,16354,16358,16362],{},[2881,16350,16351],{},[34,16352,16353],{},"smoothing",[2881,16355,16356],{},[34,16357,13079],{},[2881,16359,16360],{},[34,16361,6610],{},[2881,16363,16364,16365,16367],{},"Lag amount (0–1). ",[34,16366,6610],{}," = instant, higher values = sluggish follow.",[2866,16369,16370,16375,16379,16383],{},[2881,16371,16372],{},[34,16373,16374],{},"momentum",[2881,16376,16377],{},[34,16378,13079],{},[2881,16380,16381],{},[34,16382,6610],{},[2881,16384,16385,16386,16388],{},"Spring bounce (0–1). ",[34,16387,6610],{}," = no overshoot, values near 1 = springy.",[2866,16390,16391,16396,16400,16404],{},[2881,16392,16393],{},[34,16394,16395],{},"reach",[2881,16397,16398],{},[34,16399,13079],{},[2881,16401,16402],{},[34,16403,6614],{},[2881,16405,16406,16407,16409,16410,16412,16413,16415],{},"Displacement scale. ",[34,16408,6614],{}," = 1:1 with cursor. ",[34,16411,5150],{}," = twice the displacement. ",[34,16414,6610],{}," = pinned to origin.",[2866,16417,16418,16423,16427,16431],{},[2881,16419,16420],{},[34,16421,16422],{},"originX",[2881,16424,16425],{},[34,16426,13079],{},[2881,16428,16429],{},[34,16430,5689],{},[2881,16432,16433],{},"X coordinate of the origin point that displacement scales from.",[2866,16435,16436,16441,16445,16449],{},[2881,16437,16438],{},[34,16439,16440],{},"originY",[2881,16442,16443],{},[34,16444,13079],{},[2881,16446,16447],{},[34,16448,5689],{},[2881,16450,16451],{},"Y coordinate of the origin point.",[15,16453,16454,16457,16458,16460,16461,16463],{},[1306,16455,16456],{},"Pinning one axis:"," Set ",[34,16459,16274],{}," or ",[34,16462,16296],{}," to a number to fix that axis while the other tracks the mouse:",[27,16465,16467],{"className":29,"code":16466,"language":31,"meta":32,"style":32},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n\u003CCircle :radius=\"0.15\" :center=\"{ type: 'mouse-position', y: 0.5 }\" />\n",[34,16468,16469,16474],{"__ignoreMap":32},[37,16470,16471],{"class":39,"line":40},[37,16472,16473],{"class":68},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[37,16475,16476,16478,16480,16482,16484,16487,16489,16491,16494],{"class":39,"line":65},[37,16477,44],{"class":43},[37,16479,3293],{"class":47},[37,16481,15037],{"class":51},[37,16483,55],{"class":43},[37,16485,16486],{"class":58},"\"0.15\"",[37,16488,6070],{"class":51},[37,16490,55],{"class":43},[37,16492,16493],{"class":58},"\"{ type: 'mouse-position', y: 0.5 }\"",[37,16495,113],{"class":43},[1202,16497,16498],{"id":16498},"mouse",[15,16500,16501],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[23,16503,16504,16586,16685,16780,16874],{":tabs":25},[27,16505,16507],{"className":29,"code":16506,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n :radius=\"{\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }\"\n />\n\u003C/Shader>\n",[34,16508,16509,16523,16529,16537,16545,16550,16555,16560,16565,16570,16574,16578],{"__ignoreMap":32},[37,16510,16511,16513,16515,16517,16519,16521],{"class":39,"line":40},[37,16512,44],{"class":43},[37,16514,48],{"class":47},[37,16516,52],{"class":51},[37,16518,55],{"class":43},[37,16520,59],{"class":58},[37,16522,62],{"class":43},[37,16524,16525,16527],{"class":39,"line":65},[37,16526,75],{"class":43},[37,16528,7565],{"class":47},[37,16530,16531,16533,16535],{"class":39,"line":72},[37,16532,7570],{"class":51},[37,16534,55],{"class":43},[37,16536,15108],{"class":58},[37,16538,16539,16541,16543],{"class":39,"line":116},[37,16540,15113],{"class":51},[37,16542,55],{"class":43},[37,16544,15118],{"class":58},[37,16546,16547],{"class":39,"line":123},[37,16548,16549],{"class":58}," type: 'mouse',\n",[37,16551,16552],{"class":39,"line":129},[37,16553,16554],{"class":58}," axis: 'x',\n",[37,16556,16557],{"class":39,"line":171},[37,16558,16559],{"class":58}," outputMin: 0.1,\n",[37,16561,16562],{"class":39,"line":221},[37,16563,16564],{"class":58}," outputMax: 0.7,\n",[37,16566,16567],{"class":39,"line":231},[37,16568,16569],{"class":58}," smoothing: 0.1\n",[37,16571,16572],{"class":39,"line":236},[37,16573,15153],{"class":58},[37,16575,16576],{"class":39,"line":242},[37,16577,2314],{"class":43},[37,16579,16580,16582,16584],{"class":39,"line":270},[37,16581,273],{"class":43},[37,16583,48],{"class":47},[37,16585,62],{"class":43},[27,16587,16589],{"className":280,"code":16588,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }}\n />\n\u003C/Shader>\n",[34,16590,16591,16605,16611,16619,16627,16635,16645,16653,16662,16669,16673,16677],{"__ignoreMap":32},[37,16592,16593,16595,16597,16599,16601,16603],{"class":39,"line":40},[37,16594,44],{"class":43},[37,16596,48],{"class":291},[37,16598,294],{"class":51},[37,16600,55],{"class":297},[37,16602,59],{"class":58},[37,16604,62],{"class":43},[37,16606,16607,16609],{"class":39,"line":65},[37,16608,75],{"class":43},[37,16610,7565],{"class":291},[37,16612,16613,16615,16617],{"class":39,"line":72},[37,16614,7570],{"class":51},[37,16616,55],{"class":297},[37,16618,15108],{"class":58},[37,16620,16621,16623,16625],{"class":39,"line":116},[37,16622,7580],{"class":51},[37,16624,55],{"class":297},[37,16626,15207],{"class":43},[37,16628,16629,16631,16633],{"class":39,"line":123},[37,16630,1065],{"class":43},[37,16632,16284],{"class":58},[37,16634,1071],{"class":43},[37,16636,16637,16640,16643],{"class":39,"line":129},[37,16638,16639],{"class":43}," axis: ",[37,16641,16642],{"class":58},"'x'",[37,16644,1071],{"class":43},[37,16646,16647,16649,16651],{"class":39,"line":171},[37,16648,15231],{"class":43},[37,16650,13420],{"class":291},[37,16652,1071],{"class":43},[37,16654,16655,16657,16660],{"class":39,"line":221},[37,16656,15240],{"class":43},[37,16658,16659],{"class":291},"0.7",[37,16661,1071],{"class":43},[37,16663,16664,16666],{"class":39,"line":231},[37,16665,15929],{"class":43},[37,16667,16668],{"class":291},"0.1\n",[37,16670,16671],{"class":39,"line":236},[37,16672,15265],{"class":43},[37,16674,16675],{"class":39,"line":242},[37,16676,2314],{"class":43},[37,16678,16679,16681,16683],{"class":39,"line":270},[37,16680,273],{"class":43},[37,16682,48],{"class":291},[37,16684,62],{"class":43},[27,16686,16688],{"className":543,"code":16687,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CCircle\n color=\"#6366f1\"\n radius={{\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }}\n />\n\u003C/Shader>\n",[34,16689,16690,16704,16710,16718,16726,16734,16742,16750,16758,16764,16768,16772],{"__ignoreMap":32},[37,16691,16692,16694,16696,16698,16700,16702],{"class":39,"line":40},[37,16693,44],{"class":43},[37,16695,48],{"class":291},[37,16697,52],{"class":51},[37,16699,55],{"class":297},[37,16701,59],{"class":58},[37,16703,62],{"class":43},[37,16705,16706,16708],{"class":39,"line":65},[37,16707,75],{"class":43},[37,16709,7565],{"class":291},[37,16711,16712,16714,16716],{"class":39,"line":72},[37,16713,7570],{"class":51},[37,16715,55],{"class":297},[37,16717,15108],{"class":58},[37,16719,16720,16722,16724],{"class":39,"line":116},[37,16721,7580],{"class":51},[37,16723,55],{"class":297},[37,16725,15207],{"class":43},[37,16727,16728,16730,16732],{"class":39,"line":123},[37,16729,1065],{"class":43},[37,16731,16284],{"class":58},[37,16733,1071],{"class":43},[37,16735,16736,16738,16740],{"class":39,"line":129},[37,16737,16639],{"class":43},[37,16739,16642],{"class":58},[37,16741,1071],{"class":43},[37,16743,16744,16746,16748],{"class":39,"line":171},[37,16745,15231],{"class":43},[37,16747,13420],{"class":291},[37,16749,1071],{"class":43},[37,16751,16752,16754,16756],{"class":39,"line":221},[37,16753,15240],{"class":43},[37,16755,16659],{"class":291},[37,16757,1071],{"class":43},[37,16759,16760,16762],{"class":39,"line":231},[37,16761,15929],{"class":43},[37,16763,16668],{"class":291},[37,16765,16766],{"class":39,"line":236},[37,16767,15265],{"class":43},[37,16769,16770],{"class":39,"line":242},[37,16771,2314],{"class":43},[37,16773,16774,16776,16778],{"class":39,"line":270},[37,16775,273],{"class":43},[37,16777,48],{"class":291},[37,16779,62],{"class":43},[27,16781,16782],{"className":543,"code":16687,"language":545,"meta":32,"style":32},[34,16783,16784,16798,16804,16812,16820,16828,16836,16844,16852,16858,16862,16866],{"__ignoreMap":32},[37,16785,16786,16788,16790,16792,16794,16796],{"class":39,"line":40},[37,16787,44],{"class":43},[37,16789,48],{"class":291},[37,16791,52],{"class":51},[37,16793,55],{"class":297},[37,16795,59],{"class":58},[37,16797,62],{"class":43},[37,16799,16800,16802],{"class":39,"line":65},[37,16801,75],{"class":43},[37,16803,7565],{"class":291},[37,16805,16806,16808,16810],{"class":39,"line":72},[37,16807,7570],{"class":51},[37,16809,55],{"class":297},[37,16811,15108],{"class":58},[37,16813,16814,16816,16818],{"class":39,"line":116},[37,16815,7580],{"class":51},[37,16817,55],{"class":297},[37,16819,15207],{"class":43},[37,16821,16822,16824,16826],{"class":39,"line":123},[37,16823,1065],{"class":43},[37,16825,16284],{"class":58},[37,16827,1071],{"class":43},[37,16829,16830,16832,16834],{"class":39,"line":129},[37,16831,16639],{"class":43},[37,16833,16642],{"class":58},[37,16835,1071],{"class":43},[37,16837,16838,16840,16842],{"class":39,"line":171},[37,16839,15231],{"class":43},[37,16841,13420],{"class":291},[37,16843,1071],{"class":43},[37,16845,16846,16848,16850],{"class":39,"line":221},[37,16847,15240],{"class":43},[37,16849,16659],{"class":291},[37,16851,1071],{"class":43},[37,16853,16854,16856],{"class":39,"line":231},[37,16855,15929],{"class":43},[37,16857,16668],{"class":291},[37,16859,16860],{"class":39,"line":236},[37,16861,15265],{"class":43},[37,16863,16864],{"class":39,"line":242},[37,16865,2314],{"class":43},[37,16867,16868,16870,16872],{"class":39,"line":270},[37,16869,273],{"class":43},[37,16871,48],{"class":291},[37,16873,62],{"class":43},[27,16875,16877],{"className":987,"code":16876,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'Circle',\n props: {\n color: '#6366f1',\n radius: {\n type: 'mouse',\n axis: 'x',\n outputMin: 0.1,\n outputMax: 0.7,\n smoothing: 0.1\n }\n }\n }\n ]\n})\n",[34,16878,16879,16893,16897,16901,16909,16913,16921,16925,16933,16942,16950,16958,16964,16968,16972,16976,16980],{"__ignoreMap":32},[37,16880,16881,16883,16885,16887,16889,16891],{"class":39,"line":40},[37,16882,2809],{"class":297},[37,16884,2812],{"class":291},[37,16886,2815],{"class":297},[37,16888,2818],{"class":297},[37,16890,999],{"class":51},[37,16892,1002],{"class":43},[37,16894,16895],{"class":39,"line":65},[37,16896,1007],{"class":43},[37,16898,16899],{"class":39,"line":72},[37,16900,1060],{"class":43},[37,16902,16903,16905,16907],{"class":39,"line":116},[37,16904,1065],{"class":43},[37,16906,3941],{"class":58},[37,16908,1071],{"class":43},[37,16910,16911],{"class":39,"line":123},[37,16912,13647],{"class":43},[37,16914,16915,16917,16919],{"class":39,"line":129},[37,16916,15526],{"class":43},[37,16918,15529],{"class":58},[37,16920,1071],{"class":43},[37,16922,16923],{"class":39,"line":171},[37,16924,15536],{"class":43},[37,16926,16927,16929,16931],{"class":39,"line":221},[37,16928,15541],{"class":43},[37,16930,16284],{"class":58},[37,16932,1071],{"class":43},[37,16934,16935,16938,16940],{"class":39,"line":231},[37,16936,16937],{"class":43}," axis: ",[37,16939,16642],{"class":58},[37,16941,1071],{"class":43},[37,16943,16944,16946,16948],{"class":39,"line":236},[37,16945,15559],{"class":43},[37,16947,13420],{"class":291},[37,16949,1071],{"class":43},[37,16951,16952,16954,16956],{"class":39,"line":242},[37,16953,15568],{"class":43},[37,16955,16659],{"class":291},[37,16957,1071],{"class":43},[37,16959,16960,16962],{"class":39,"line":270},[37,16961,16213],{"class":43},[37,16963,16668],{"class":291},[37,16965,16966],{"class":39,"line":1145},[37,16967,15593],{"class":43},[37,16969,16970],{"class":39,"line":1151},[37,16971,13662],{"class":43},[37,16973,16974],{"class":39,"line":1157},[37,16975,13704],{"class":43},[37,16977,16978],{"class":39,"line":1162},[37,16979,1194],{"class":43},[37,16981,16982],{"class":39,"line":1168},[37,16983,1200],{"class":43},[19,16985],{":preset":16986},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,16988,16989],{},[1306,16990,15617],{},[2860,16992,16993,17005],{},[2863,16994,16995],{},[2866,16996,16997,16999,17001,17003],{},[2869,16998,13057],{},[2869,17000,13060],{},[2869,17002,13063],{},[2869,17004,2874],{},[2876,17006,17007,17024,17039,17054,17082,17101],{},[2866,17008,17009,17014,17019,17021],{},[2881,17010,17011],{},[34,17012,17013],{},"axis",[2881,17015,17016],{},[34,17017,17018],{},"'x' | 'y'",[2881,17020,15648],{},[2881,17022,17023],{},"Which pointer axis drives this prop.",[2866,17025,17026,17030,17034,17036],{},[2881,17027,17028],{},[34,17029,15665],{},[2881,17031,17032],{},[34,17033,13079],{},[2881,17035,15648],{},[2881,17037,17038],{},"Output value when axis is at 0 (left or top).",[2866,17040,17041,17045,17049,17051],{},[2881,17042,17043],{},[34,17044,15681],{},[2881,17046,17047],{},[34,17048,13079],{},[2881,17050,15648],{},[2881,17052,17053],{},"Output value when axis is at 1 (right or bottom).",[2866,17055,17056,17061,17065,17069],{},[2881,17057,17058],{},[34,17059,17060],{},"curve",[2881,17062,17063],{},[34,17064,13079],{},[2881,17066,17067],{},[34,17068,6610],{},[2881,17070,17071,17072,2626,17074,17076,17077,17079,17080,7423],{},"Power curve: ",[34,17073,13089],{},[34,17075,13092],{},". Negative = biased toward ",[34,17078,15665],{},", positive = toward ",[34,17081,15681],{},[2866,17083,17084,17088,17092,17096],{},[2881,17085,17086],{},[34,17087,16353],{},[2881,17089,17090],{},[34,17091,13079],{},[2881,17093,17094],{},[34,17095,6610],{},[2881,17097,17098,17099,7423],{},"Lag (0–1). Same as ",[34,17100,15760],{},[2866,17102,17103,17107,17111,17115],{},[2881,17104,17105],{},[34,17106,16374],{},[2881,17108,17109],{},[34,17110,13079],{},[2881,17112,17113],{},[34,17114,6610],{},[2881,17116,17117,17118,7423],{},"Spring bounce (0–1). Same as ",[34,17119,15760],{},[15,17121,17122,17124],{},[1306,17123,15750],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[1202,17126,17127],{"id":17127},"map",[15,17129,17130],{},"Drives a numeric prop from the visual output (alpha channel or luminance) of another named layer. The source layer's rendered pixels become a control signal.",[15,17132,17133,17134,17136],{},"First, give the source component an ",[34,17135,6994],{},". Then reference that id in the driver:",[23,17138,17139,17277,17422,17559,17695],{":tabs":25},[27,17140,17142],{"className":29,"code":17141,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003C!-- Source layer: named 'grad' -->\n \u003CLinearGradient\n id=\"grad\"\n color-a=\"#000000\"\n color-b=\"#ffffff\"\n />\n\n \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n \u003CDotGrid\n :dot-size=\"{\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0.02,\n outputMax: 0.12\n }\"\n />\n\u003C/Shader>\n",[34,17143,17144,17158,17163,17169,17178,17188,17197,17201,17205,17210,17217,17226,17231,17236,17241,17246,17251,17256,17261,17265,17269],{"__ignoreMap":32},[37,17145,17146,17148,17150,17152,17154,17156],{"class":39,"line":40},[37,17147,44],{"class":43},[37,17149,48],{"class":47},[37,17151,52],{"class":51},[37,17153,55],{"class":43},[37,17155,59],{"class":58},[37,17157,62],{"class":43},[37,17159,17160],{"class":39,"line":65},[37,17161,17162],{"class":68}," \u003C!-- Source layer: named 'grad' -->\n",[37,17164,17165,17167],{"class":39,"line":72},[37,17166,75],{"class":43},[37,17168,2269],{"class":47},[37,17170,17171,17173,17175],{"class":39,"line":116},[37,17172,7512],{"class":51},[37,17174,55],{"class":43},[37,17176,17177],{"class":58},"\"grad\"\n",[37,17179,17180,17183,17185],{"class":39,"line":123},[37,17181,17182],{"class":51}," color-a",[37,17184,55],{"class":43},[37,17186,17187],{"class":58},"\"#000000\"\n",[37,17189,17190,17193,17195],{"class":39,"line":129},[37,17191,17192],{"class":51}," color-b",[37,17194,55],{"class":43},[37,17196,7526],{"class":58},[37,17198,17199],{"class":39,"line":171},[37,17200,2314],{"class":43},[37,17202,17203],{"class":39,"line":221},[37,17204,120],{"emptyLinePlaceholder":119},[37,17206,17207],{"class":39,"line":231},[37,17208,17209],{"class":68}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[37,17211,17212,17214],{"class":39,"line":236},[37,17213,75],{"class":43},[37,17215,17216],{"class":47},"DotGrid\n",[37,17218,17219,17222,17224],{"class":39,"line":242},[37,17220,17221],{"class":51}," :dot-size",[37,17223,55],{"class":43},[37,17225,15118],{"class":58},[37,17227,17228],{"class":39,"line":270},[37,17229,17230],{"class":58}," type: 'map',\n",[37,17232,17233],{"class":39,"line":1145},[37,17234,17235],{"class":58}," source: 'grad',\n",[37,17237,17238],{"class":39,"line":1151},[37,17239,17240],{"class":58}," channel: 'luminance',\n",[37,17242,17243],{"class":39,"line":1157},[37,17244,17245],{"class":58}," inputMin: 0,\n",[37,17247,17248],{"class":39,"line":1162},[37,17249,17250],{"class":58}," inputMax: 1,\n",[37,17252,17253],{"class":39,"line":1168},[37,17254,17255],{"class":58}," outputMin: 0.02,\n",[37,17257,17258],{"class":39,"line":1191},[37,17259,17260],{"class":58}," outputMax: 0.12\n",[37,17262,17263],{"class":39,"line":1197},[37,17264,15153],{"class":58},[37,17266,17267],{"class":39,"line":8929},[37,17268,2314],{"class":43},[37,17270,17271,17273,17275],{"class":39,"line":8934},[37,17272,273],{"class":43},[37,17274,48],{"class":47},[37,17276,62],{"class":43},[27,17278,17280],{"className":280,"code":17279,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient\n id=\"grad\"\n colorA=\"#000000\"\n colorB=\"#ffffff\"\n />\n \u003CDotGrid\n dotSize={{\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0.02,\n outputMax: 0.12\n }}\n />\n\u003C/Shader>\n",[34,17281,17282,17296,17302,17310,17318,17326,17330,17336,17345,17354,17363,17372,17381,17390,17399,17406,17410,17414],{"__ignoreMap":32},[37,17283,17284,17286,17288,17290,17292,17294],{"class":39,"line":40},[37,17285,44],{"class":43},[37,17287,48],{"class":291},[37,17289,294],{"class":51},[37,17291,55],{"class":297},[37,17293,59],{"class":58},[37,17295,62],{"class":43},[37,17297,17298,17300],{"class":39,"line":65},[37,17299,75],{"class":43},[37,17301,2269],{"class":291},[37,17303,17304,17306,17308],{"class":39,"line":72},[37,17305,7512],{"class":51},[37,17307,55],{"class":297},[37,17309,17177],{"class":58},[37,17311,17312,17314,17316],{"class":39,"line":116},[37,17313,2274],{"class":51},[37,17315,55],{"class":297},[37,17317,17187],{"class":58},[37,17319,17320,17322,17324],{"class":39,"line":123},[37,17321,2284],{"class":51},[37,17323,55],{"class":297},[37,17325,7526],{"class":58},[37,17327,17328],{"class":39,"line":129},[37,17329,2314],{"class":43},[37,17331,17332,17334],{"class":39,"line":171},[37,17333,75],{"class":43},[37,17335,17216],{"class":291},[37,17337,17338,17341,17343],{"class":39,"line":221},[37,17339,17340],{"class":51}," dotSize",[37,17342,55],{"class":297},[37,17344,15207],{"class":43},[37,17346,17347,17349,17352],{"class":39,"line":231},[37,17348,1065],{"class":43},[37,17350,17351],{"class":58},"'map'",[37,17353,1071],{"class":43},[37,17355,17356,17359,17361],{"class":39,"line":236},[37,17357,17358],{"class":43}," source: ",[37,17360,14856],{"class":58},[37,17362,1071],{"class":43},[37,17364,17365,17368,17370],{"class":39,"line":242},[37,17366,17367],{"class":43}," channel: ",[37,17369,8137],{"class":58},[37,17371,1071],{"class":43},[37,17373,17374,17377,17379],{"class":39,"line":270},[37,17375,17376],{"class":43}," inputMin: ",[37,17378,6610],{"class":291},[37,17380,1071],{"class":43},[37,17382,17383,17386,17388],{"class":39,"line":1145},[37,17384,17385],{"class":43}," inputMax: ",[37,17387,6614],{"class":291},[37,17389,1071],{"class":43},[37,17391,17392,17394,17397],{"class":39,"line":1151},[37,17393,15231],{"class":43},[37,17395,17396],{"class":291},"0.02",[37,17398,1071],{"class":43},[37,17400,17401,17403],{"class":39,"line":1157},[37,17402,15240],{"class":43},[37,17404,17405],{"class":291},"0.12\n",[37,17407,17408],{"class":39,"line":1162},[37,17409,15265],{"class":43},[37,17411,17412],{"class":39,"line":1168},[37,17413,2314],{"class":43},[37,17415,17416,17418,17420],{"class":39,"line":1191},[37,17417,273],{"class":43},[37,17419,48],{"class":291},[37,17421,62],{"class":43},[27,17423,17425],{"className":543,"code":17424,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n id=\"grad\"\n colorA=\"#000000\"\n colorB=\"#ffffff\"\n />\n \u003CDotGrid\n dotSize={{\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0.02,\n outputMax: 0.12\n }}\n />\n\u003C/Shader>\n",[34,17426,17427,17441,17447,17455,17463,17471,17475,17481,17489,17497,17505,17513,17521,17529,17537,17543,17547,17551],{"__ignoreMap":32},[37,17428,17429,17431,17433,17435,17437,17439],{"class":39,"line":40},[37,17430,44],{"class":43},[37,17432,48],{"class":291},[37,17434,52],{"class":51},[37,17436,55],{"class":297},[37,17438,59],{"class":58},[37,17440,62],{"class":43},[37,17442,17443,17445],{"class":39,"line":65},[37,17444,75],{"class":43},[37,17446,2269],{"class":291},[37,17448,17449,17451,17453],{"class":39,"line":72},[37,17450,7512],{"class":51},[37,17452,55],{"class":297},[37,17454,17177],{"class":58},[37,17456,17457,17459,17461],{"class":39,"line":116},[37,17458,2274],{"class":51},[37,17460,55],{"class":297},[37,17462,17187],{"class":58},[37,17464,17465,17467,17469],{"class":39,"line":123},[37,17466,2284],{"class":51},[37,17468,55],{"class":297},[37,17470,7526],{"class":58},[37,17472,17473],{"class":39,"line":129},[37,17474,2314],{"class":43},[37,17476,17477,17479],{"class":39,"line":171},[37,17478,75],{"class":43},[37,17480,17216],{"class":291},[37,17482,17483,17485,17487],{"class":39,"line":221},[37,17484,17340],{"class":51},[37,17486,55],{"class":297},[37,17488,15207],{"class":43},[37,17490,17491,17493,17495],{"class":39,"line":231},[37,17492,1065],{"class":43},[37,17494,17351],{"class":58},[37,17496,1071],{"class":43},[37,17498,17499,17501,17503],{"class":39,"line":236},[37,17500,17358],{"class":43},[37,17502,14856],{"class":58},[37,17504,1071],{"class":43},[37,17506,17507,17509,17511],{"class":39,"line":242},[37,17508,17367],{"class":43},[37,17510,8137],{"class":58},[37,17512,1071],{"class":43},[37,17514,17515,17517,17519],{"class":39,"line":270},[37,17516,17376],{"class":43},[37,17518,6610],{"class":291},[37,17520,1071],{"class":43},[37,17522,17523,17525,17527],{"class":39,"line":1145},[37,17524,17385],{"class":43},[37,17526,6614],{"class":291},[37,17528,1071],{"class":43},[37,17530,17531,17533,17535],{"class":39,"line":1151},[37,17532,15231],{"class":43},[37,17534,17396],{"class":291},[37,17536,1071],{"class":43},[37,17538,17539,17541],{"class":39,"line":1157},[37,17540,15240],{"class":43},[37,17542,17405],{"class":291},[37,17544,17545],{"class":39,"line":1162},[37,17546,15265],{"class":43},[37,17548,17549],{"class":39,"line":1168},[37,17550,2314],{"class":43},[37,17552,17553,17555,17557],{"class":39,"line":1191},[37,17554,273],{"class":43},[37,17556,48],{"class":291},[37,17558,62],{"class":43},[27,17560,17561],{"className":543,"code":17424,"language":545,"meta":32,"style":32},[34,17562,17563,17577,17583,17591,17599,17607,17611,17617,17625,17633,17641,17649,17657,17665,17673,17679,17683,17687],{"__ignoreMap":32},[37,17564,17565,17567,17569,17571,17573,17575],{"class":39,"line":40},[37,17566,44],{"class":43},[37,17568,48],{"class":291},[37,17570,52],{"class":51},[37,17572,55],{"class":297},[37,17574,59],{"class":58},[37,17576,62],{"class":43},[37,17578,17579,17581],{"class":39,"line":65},[37,17580,75],{"class":43},[37,17582,2269],{"class":291},[37,17584,17585,17587,17589],{"class":39,"line":72},[37,17586,7512],{"class":51},[37,17588,55],{"class":297},[37,17590,17177],{"class":58},[37,17592,17593,17595,17597],{"class":39,"line":116},[37,17594,2274],{"class":51},[37,17596,55],{"class":297},[37,17598,17187],{"class":58},[37,17600,17601,17603,17605],{"class":39,"line":123},[37,17602,2284],{"class":51},[37,17604,55],{"class":297},[37,17606,7526],{"class":58},[37,17608,17609],{"class":39,"line":129},[37,17610,2314],{"class":43},[37,17612,17613,17615],{"class":39,"line":171},[37,17614,75],{"class":43},[37,17616,17216],{"class":291},[37,17618,17619,17621,17623],{"class":39,"line":221},[37,17620,17340],{"class":51},[37,17622,55],{"class":297},[37,17624,15207],{"class":43},[37,17626,17627,17629,17631],{"class":39,"line":231},[37,17628,1065],{"class":43},[37,17630,17351],{"class":58},[37,17632,1071],{"class":43},[37,17634,17635,17637,17639],{"class":39,"line":236},[37,17636,17358],{"class":43},[37,17638,14856],{"class":58},[37,17640,1071],{"class":43},[37,17642,17643,17645,17647],{"class":39,"line":242},[37,17644,17367],{"class":43},[37,17646,8137],{"class":58},[37,17648,1071],{"class":43},[37,17650,17651,17653,17655],{"class":39,"line":270},[37,17652,17376],{"class":43},[37,17654,6610],{"class":291},[37,17656,1071],{"class":43},[37,17658,17659,17661,17663],{"class":39,"line":1145},[37,17660,17385],{"class":43},[37,17662,6614],{"class":291},[37,17664,1071],{"class":43},[37,17666,17667,17669,17671],{"class":39,"line":1151},[37,17668,15231],{"class":43},[37,17670,17396],{"class":291},[37,17672,1071],{"class":43},[37,17674,17675,17677],{"class":39,"line":1157},[37,17676,15240],{"class":43},[37,17678,17405],{"class":291},[37,17680,17681],{"class":39,"line":1162},[37,17682,15265],{"class":43},[37,17684,17685],{"class":39,"line":1168},[37,17686,2314],{"class":43},[37,17688,17689,17691,17693],{"class":39,"line":1191},[37,17690,273],{"class":43},[37,17692,48],{"class":291},[37,17694,62],{"class":43},[27,17696,17698],{"className":987,"code":17697,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n id: 'grad',\n props: { colorA: '#000000', colorB: '#ffffff' }\n },\n {\n type: 'DotGrid',\n props: {\n dotSize: {\n type: 'map',\n source: 'grad',\n channel: 'luminance',\n inputMin: 0,\n inputMax: 1,\n outputMin: 0,\n outputMax: 1\n }\n }\n }\n ]\n})\n",[34,17699,17700,17714,17718,17722,17730,17738,17752,17756,17760,17769,17773,17778,17786,17795,17804,17813,17822,17830,17837,17841,17845,17849,17853],{"__ignoreMap":32},[37,17701,17702,17704,17706,17708,17710,17712],{"class":39,"line":40},[37,17703,2809],{"class":297},[37,17705,2812],{"class":291},[37,17707,2815],{"class":297},[37,17709,2818],{"class":297},[37,17711,999],{"class":51},[37,17713,1002],{"class":43},[37,17715,17716],{"class":39,"line":65},[37,17717,1007],{"class":43},[37,17719,17720],{"class":39,"line":72},[37,17721,1060],{"class":43},[37,17723,17724,17726,17728],{"class":39,"line":116},[37,17725,1065],{"class":43},[37,17727,1020],{"class":58},[37,17729,1071],{"class":43},[37,17731,17732,17734,17736],{"class":39,"line":123},[37,17733,1076],{"class":43},[37,17735,14856],{"class":58},[37,17737,1071],{"class":43},[37,17739,17740,17743,17746,17748,17750],{"class":39,"line":129},[37,17741,17742],{"class":43}," props: { colorA: ",[37,17744,17745],{"class":58},"'#000000'",[37,17747,8104],{"class":43},[37,17749,8101],{"class":58},[37,17751,13657],{"class":43},[37,17753,17754],{"class":39,"line":171},[37,17755,1154],{"class":43},[37,17757,17758],{"class":39,"line":221},[37,17759,1060],{"class":43},[37,17761,17762,17764,17767],{"class":39,"line":231},[37,17763,1065],{"class":43},[37,17765,17766],{"class":58},"'DotGrid'",[37,17768,1071],{"class":43},[37,17770,17771],{"class":39,"line":236},[37,17772,13647],{"class":43},[37,17774,17775],{"class":39,"line":242},[37,17776,17777],{"class":43}," dotSize: {\n",[37,17779,17780,17782,17784],{"class":39,"line":270},[37,17781,15541],{"class":43},[37,17783,17351],{"class":58},[37,17785,1071],{"class":43},[37,17787,17788,17791,17793],{"class":39,"line":1145},[37,17789,17790],{"class":43}," source: ",[37,17792,14856],{"class":58},[37,17794,1071],{"class":43},[37,17796,17797,17800,17802],{"class":39,"line":1151},[37,17798,17799],{"class":43}," channel: ",[37,17801,8137],{"class":58},[37,17803,1071],{"class":43},[37,17805,17806,17809,17811],{"class":39,"line":1157},[37,17807,17808],{"class":43}," inputMin: ",[37,17810,6610],{"class":291},[37,17812,1071],{"class":43},[37,17814,17815,17818,17820],{"class":39,"line":1162},[37,17816,17817],{"class":43}," inputMax: ",[37,17819,6614],{"class":291},[37,17821,1071],{"class":43},[37,17823,17824,17826,17828],{"class":39,"line":1168},[37,17825,15559],{"class":43},[37,17827,6610],{"class":291},[37,17829,1071],{"class":43},[37,17831,17832,17834],{"class":39,"line":1191},[37,17833,15568],{"class":43},[37,17835,17836],{"class":291},"1\n",[37,17838,17839],{"class":39,"line":1197},[37,17840,15593],{"class":43},[37,17842,17843],{"class":39,"line":8929},[37,17844,13662],{"class":43},[37,17846,17847],{"class":39,"line":8934},[37,17848,13704],{"class":43},[37,17850,17851],{"class":39,"line":10007},[37,17852,1194],{"class":43},[37,17854,17855],{"class":39,"line":10014},[37,17856,1200],{"class":43},[19,17858],{":preset":17859},"{\"components\":[{\"type\":\"LinearGradient\",\"id\":\"grad\",\"props\":{\"colorA\":\"#000000\",\"colorB\":\"#ffffff\",\"angle\":45,\"visible\":false}},{\"type\":\"DotGrid\",\"props\":{\"dotSize\":{\"type\":\"map\",\"source\":\"grad\",\"channel\":\"luminance\",\"inputMin\":0,\"inputMax\":1,\"outputMin\":0,\"outputMax\":0.8}}}]}",[15,17861,17862],{},[1306,17863,15617],{},[2860,17865,17866,17878],{},[2863,17867,17868],{},[2866,17869,17870,17872,17874,17876],{},[2869,17871,13057],{},[2869,17873,13060],{},[2869,17875,13063],{},[2869,17877,2874],{},[2876,17879,17880,17898,17922,17938,17954,17969,17984],{},[2866,17881,17882,17887,17891,17893],{},[2881,17883,17884],{},[34,17885,17886],{},"source",[2881,17888,17889],{},[34,17890,6998],{},[2881,17892,15648],{},[2881,17894,2905,17895,17897],{},[34,17896,6994],{}," of the source component to sample from.",[2866,17899,17900,17905,17909,17911],{},[2881,17901,17902],{},[34,17903,17904],{},"channel",[2881,17906,17907],{},[34,17908,6998],{},[2881,17910,15648],{},[2881,17912,17913,17914,2961,17916,2961,17918,2961,17920,7423],{},"Which channel to extract. ",[34,17915,7443],{},[34,17917,7451],{},[34,17919,7459],{},[34,17921,7467],{},[2866,17923,17924,17929,17933,17935],{},[2881,17925,17926],{},[34,17927,17928],{},"inputMin",[2881,17930,17931],{},[34,17932,13079],{},[2881,17934,15648],{},[2881,17936,17937],{},"Source values at or below this are treated as 0.",[2866,17939,17940,17945,17949,17951],{},[2881,17941,17942],{},[34,17943,17944],{},"inputMax",[2881,17946,17947],{},[34,17948,13079],{},[2881,17950,15648],{},[2881,17952,17953],{},"Source values at or above this are treated as 1.",[2866,17955,17956,17960,17964,17966],{},[2881,17957,17958],{},[34,17959,15665],{},[2881,17961,17962],{},[34,17963,13079],{},[2881,17965,15648],{},[2881,17967,17968],{},"Output value when input = 0.",[2866,17970,17971,17975,17979,17981],{},[2881,17972,17973],{},[34,17974,15681],{},[2881,17976,17977],{},[34,17978,13079],{},[2881,17980,15648],{},[2881,17982,17983],{},"Output value when input = 1.",[2866,17985,17986,17990,17994,17998],{},[2881,17987,17988],{},[34,17989,17060],{},[2881,17991,17992],{},[34,17993,13079],{},[2881,17995,17996],{},[34,17997,6610],{},[2881,17999,18000,18001,2626,18003,7423],{},"Power curve applied after normalization. ",[34,18002,13089],{},[34,18004,13092],{},[15,18006,2905,18007,18009],{},[34,18008,17127],{}," type causes the source layer to be rendered to a texture (RTT) on first use. This is a one-time cost. The source renders independently and its output is sampled each frame.",[1202,18011,18013],{"id":18012},"combining-dynamic-props","Combining dynamic props",[15,18015,18016],{},"Multiple dynamic props can be active on the same component — one per prop:",[23,18018,18019,18125,18252,18375],{":tabs":1372},[27,18020,18022],{"className":29,"code":18021,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient color-a=\"#0f172a\" color-b=\"#4f46e5\" />\n \u003CLensFlare\n :center=\"{ type: 'mouse-position', smoothing: 0.1 }\"\n :intensity=\"{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.4,\n outputMax: 1.0,\n speed: 0.6\n }\"\n />\n\u003C/Shader>\n",[34,18023,18024,18038,18061,18068,18077,18086,18090,18094,18099,18104,18109,18113,18117],{"__ignoreMap":32},[37,18025,18026,18028,18030,18032,18034,18036],{"class":39,"line":40},[37,18027,44],{"class":43},[37,18029,48],{"class":47},[37,18031,52],{"class":51},[37,18033,55],{"class":43},[37,18035,59],{"class":58},[37,18037,62],{"class":43},[37,18039,18040,18042,18044,18047,18049,18051,18054,18056,18059],{"class":39,"line":65},[37,18041,75],{"class":43},[37,18043,78],{"class":47},[37,18045,18046],{"class":51}," color-a",[37,18048,55],{"class":43},[37,18050,1249],{"class":58},[37,18052,18053],{"class":51}," color-b",[37,18055,55],{"class":43},[37,18057,18058],{"class":58},"\"#4f46e5\"",[37,18060,113],{"class":43},[37,18062,18063,18065],{"class":39,"line":72},[37,18064,75],{"class":43},[37,18066,18067],{"class":47},"LensFlare\n",[37,18069,18070,18072,18074],{"class":39,"line":116},[37,18071,15825],{"class":51},[37,18073,55],{"class":43},[37,18075,18076],{"class":58},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[37,18078,18079,18082,18084],{"class":39,"line":123},[37,18080,18081],{"class":51}," :intensity",[37,18083,55],{"class":43},[37,18085,15118],{"class":58},[37,18087,18088],{"class":39,"line":129},[37,18089,15123],{"class":58},[37,18091,18092],{"class":39,"line":171},[37,18093,15128],{"class":58},[37,18095,18096],{"class":39,"line":221},[37,18097,18098],{"class":58}," outputMin: 0.4,\n",[37,18100,18101],{"class":39,"line":231},[37,18102,18103],{"class":58}," outputMax: 1.0,\n",[37,18105,18106],{"class":39,"line":236},[37,18107,18108],{"class":58}," speed: 0.6\n",[37,18110,18111],{"class":39,"line":242},[37,18112,15153],{"class":58},[37,18114,18115],{"class":39,"line":270},[37,18116,2314],{"class":43},[37,18118,18119,18121,18123],{"class":39,"line":1145},[37,18120,273],{"class":43},[37,18122,48],{"class":47},[37,18124,62],{"class":43},[27,18126,18128],{"className":280,"code":18127,"language":282,"meta":32,"style":32},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#4f46e5\" />\n \u003CLensFlare\n center={{ type: 'mouse-position', smoothing: 0.1 }}\n intensity={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.4,\n outputMax: 1.0,\n speed: 0.6\n }}\n />\n\u003C/Shader>\n",[34,18129,18130,18144,18164,18170,18188,18197,18205,18213,18221,18229,18236,18240,18244],{"__ignoreMap":32},[37,18131,18132,18134,18136,18138,18140,18142],{"class":39,"line":40},[37,18133,44],{"class":43},[37,18135,48],{"class":291},[37,18137,294],{"class":51},[37,18139,55],{"class":297},[37,18141,59],{"class":58},[37,18143,62],{"class":43},[37,18145,18146,18148,18150,18152,18154,18156,18158,18160,18162],{"class":39,"line":65},[37,18147,75],{"class":43},[37,18149,78],{"class":291},[37,18151,1244],{"class":51},[37,18153,55],{"class":297},[37,18155,1249],{"class":58},[37,18157,1252],{"class":51},[37,18159,55],{"class":297},[37,18161,18058],{"class":58},[37,18163,113],{"class":43},[37,18165,18166,18168],{"class":39,"line":72},[37,18167,75],{"class":43},[37,18169,18067],{"class":291},[37,18171,18172,18174,18176,18179,18181,18184,18186],{"class":39,"line":116},[37,18173,15911],{"class":51},[37,18175,55],{"class":297},[37,18177,18178],{"class":43},"{{ type: ",[37,18180,15922],{"class":58},[37,18182,18183],{"class":43},", smoothing: ",[37,18185,13420],{"class":291},[37,18187,3539],{"class":43},[37,18189,18190,18193,18195],{"class":39,"line":123},[37,18191,18192],{"class":51}," intensity",[37,18194,55],{"class":297},[37,18196,15207],{"class":43},[37,18198,18199,18201,18203],{"class":39,"line":129},[37,18200,1065],{"class":43},[37,18202,15214],{"class":58},[37,18204,1071],{"class":43},[37,18206,18207,18209,18211],{"class":39,"line":171},[37,18208,15221],{"class":43},[37,18210,15224],{"class":58},[37,18212,1071],{"class":43},[37,18214,18215,18217,18219],{"class":39,"line":221},[37,18216,15231],{"class":43},[37,18218,6186],{"class":291},[37,18220,1071],{"class":43},[37,18222,18223,18225,18227],{"class":39,"line":231},[37,18224,15240],{"class":43},[37,18226,15706],{"class":291},[37,18228,1071],{"class":43},[37,18230,18231,18233],{"class":39,"line":236},[37,18232,15249],{"class":43},[37,18234,18235],{"class":291},"0.6\n",[37,18237,18238],{"class":39,"line":242},[37,18239,15265],{"class":43},[37,18241,18242],{"class":39,"line":270},[37,18243,2314],{"class":43},[37,18245,18246,18248,18250],{"class":39,"line":1145},[37,18247,273],{"class":43},[37,18249,48],{"class":291},[37,18251,62],{"class":43},[27,18253,18255],{"className":543,"code":18254,"language":545,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#4f46e5\" />\n \u003CLensFlare\n center={{ type: 'mouse-position', smoothing: 0.1 }}\n intensity={{\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.4,\n outputMax: 1.0,\n speed: 0.6\n }}\n />\n\u003C/Shader>\n",[34,18256,18257,18271,18291,18297,18313,18321,18329,18337,18345,18353,18359,18363,18367],{"__ignoreMap":32},[37,18258,18259,18261,18263,18265,18267,18269],{"class":39,"line":40},[37,18260,44],{"class":43},[37,18262,48],{"class":291},[37,18264,52],{"class":51},[37,18266,55],{"class":297},[37,18268,59],{"class":58},[37,18270,62],{"class":43},[37,18272,18273,18275,18277,18279,18281,18283,18285,18287,18289],{"class":39,"line":65},[37,18274,75],{"class":43},[37,18276,78],{"class":291},[37,18278,1244],{"class":51},[37,18280,55],{"class":297},[37,18282,1249],{"class":58},[37,18284,1252],{"class":51},[37,18286,55],{"class":297},[37,18288,18058],{"class":58},[37,18290,113],{"class":43},[37,18292,18293,18295],{"class":39,"line":72},[37,18294,75],{"class":43},[37,18296,18067],{"class":291},[37,18298,18299,18301,18303,18305,18307,18309,18311],{"class":39,"line":116},[37,18300,15911],{"class":51},[37,18302,55],{"class":297},[37,18304,18178],{"class":43},[37,18306,15922],{"class":58},[37,18308,18183],{"class":43},[37,18310,13420],{"class":291},[37,18312,3539],{"class":43},[37,18314,18315,18317,18319],{"class":39,"line":123},[37,18316,18192],{"class":51},[37,18318,55],{"class":297},[37,18320,15207],{"class":43},[37,18322,18323,18325,18327],{"class":39,"line":129},[37,18324,1065],{"class":43},[37,18326,15214],{"class":58},[37,18328,1071],{"class":43},[37,18330,18331,18333,18335],{"class":39,"line":171},[37,18332,15221],{"class":43},[37,18334,15224],{"class":58},[37,18336,1071],{"class":43},[37,18338,18339,18341,18343],{"class":39,"line":221},[37,18340,15231],{"class":43},[37,18342,6186],{"class":291},[37,18344,1071],{"class":43},[37,18346,18347,18349,18351],{"class":39,"line":231},[37,18348,15240],{"class":43},[37,18350,15706],{"class":291},[37,18352,1071],{"class":43},[37,18354,18355,18357],{"class":39,"line":236},[37,18356,15249],{"class":43},[37,18358,18235],{"class":291},[37,18360,18361],{"class":39,"line":242},[37,18362,15265],{"class":43},[37,18364,18365],{"class":39,"line":270},[37,18366,2314],{"class":43},[37,18368,18369,18371,18373],{"class":39,"line":1145},[37,18370,273],{"class":43},[37,18372,48],{"class":291},[37,18374,62],{"class":43},[27,18376,18377],{"className":543,"code":18254,"language":545,"meta":32,"style":32},[34,18378,18379,18393,18413,18419,18435,18443,18451,18459,18467,18475,18481,18485,18489],{"__ignoreMap":32},[37,18380,18381,18383,18385,18387,18389,18391],{"class":39,"line":40},[37,18382,44],{"class":43},[37,18384,48],{"class":291},[37,18386,52],{"class":51},[37,18388,55],{"class":297},[37,18390,59],{"class":58},[37,18392,62],{"class":43},[37,18394,18395,18397,18399,18401,18403,18405,18407,18409,18411],{"class":39,"line":65},[37,18396,75],{"class":43},[37,18398,78],{"class":291},[37,18400,1244],{"class":51},[37,18402,55],{"class":297},[37,18404,1249],{"class":58},[37,18406,1252],{"class":51},[37,18408,55],{"class":297},[37,18410,18058],{"class":58},[37,18412,113],{"class":43},[37,18414,18415,18417],{"class":39,"line":72},[37,18416,75],{"class":43},[37,18418,18067],{"class":291},[37,18420,18421,18423,18425,18427,18429,18431,18433],{"class":39,"line":116},[37,18422,15911],{"class":51},[37,18424,55],{"class":297},[37,18426,18178],{"class":43},[37,18428,15922],{"class":58},[37,18430,18183],{"class":43},[37,18432,13420],{"class":291},[37,18434,3539],{"class":43},[37,18436,18437,18439,18441],{"class":39,"line":123},[37,18438,18192],{"class":51},[37,18440,55],{"class":297},[37,18442,15207],{"class":43},[37,18444,18445,18447,18449],{"class":39,"line":129},[37,18446,1065],{"class":43},[37,18448,15214],{"class":58},[37,18450,1071],{"class":43},[37,18452,18453,18455,18457],{"class":39,"line":171},[37,18454,15221],{"class":43},[37,18456,15224],{"class":58},[37,18458,1071],{"class":43},[37,18460,18461,18463,18465],{"class":39,"line":221},[37,18462,15231],{"class":43},[37,18464,6186],{"class":291},[37,18466,1071],{"class":43},[37,18468,18469,18471,18473],{"class":39,"line":231},[37,18470,15240],{"class":43},[37,18472,15706],{"class":291},[37,18474,1071],{"class":43},[37,18476,18477,18479],{"class":39,"line":236},[37,18478,15249],{"class":43},[37,18480,18235],{"class":291},[37,18482,18483],{"class":39,"line":242},[37,18484,15265],{"class":43},[37,18486,18487],{"class":39,"line":270},[37,18488,2314],{"class":43},[37,18490,18491,18493,18495],{"class":39,"line":1145},[37,18492,273],{"class":43},[37,18494,48],{"class":291},[37,18496,62],{"class":43},[1202,18498,18500],{"id":18499},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,18502,18503,18504,18507],{},"In the JavaScript API, ",[34,18505,18506],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[27,18509,18511],{"className":987,"code":18510,"language":989,"meta":32,"style":32},"// Start with a static value\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', id: 'c', props: { radius: 0.4 } }\n ]\n})\n\n// Later: switch to animated\nshader.update('c', {\n radius: {\n type: 'auto-animate',\n mode: 'ping-pong',\n outputMin: 0.2,\n outputMax: 0.7\n }\n})\n\n// Later: switch back to static\nshader.update('c', { radius: 0.4 })\n",[34,18512,18513,18518,18532,18536,18553,18557,18561,18565,18570,18582,18587,18596,18605,18614,18622,18626,18630,18634,18639],{"__ignoreMap":32},[37,18514,18515],{"class":39,"line":40},[37,18516,18517],{"class":68},"// Start with a static value\n",[37,18519,18520,18522,18524,18526,18528,18530],{"class":39,"line":65},[37,18521,2809],{"class":297},[37,18523,2812],{"class":291},[37,18525,2815],{"class":297},[37,18527,2818],{"class":297},[37,18529,999],{"class":51},[37,18531,1002],{"class":43},[37,18533,18534],{"class":39,"line":72},[37,18535,1007],{"class":43},[37,18537,18538,18540,18542,18544,18547,18549,18551],{"class":39,"line":116},[37,18539,1017],{"class":43},[37,18541,3941],{"class":58},[37,18543,3944],{"class":43},[37,18545,18546],{"class":58},"'c'",[37,18548,5477],{"class":43},[37,18550,6186],{"class":291},[37,18552,1142],{"class":43},[37,18554,18555],{"class":39,"line":123},[37,18556,1194],{"class":43},[37,18558,18559],{"class":39,"line":129},[37,18560,1200],{"class":43},[37,18562,18563],{"class":39,"line":171},[37,18564,120],{"emptyLinePlaceholder":119},[37,18566,18567],{"class":39,"line":221},[37,18568,18569],{"class":68},"// Later: switch to animated\n",[37,18571,18572,18574,18576,18578,18580],{"class":39,"line":231},[37,18573,9534],{"class":43},[37,18575,9537],{"class":51},[37,18577,3364],{"class":43},[37,18579,18546],{"class":58},[37,18581,9897],{"class":43},[37,18583,18584],{"class":39,"line":236},[37,18585,18586],{"class":43}," radius: {\n",[37,18588,18589,18592,18594],{"class":39,"line":242},[37,18590,18591],{"class":43}," type: ",[37,18593,15214],{"class":58},[37,18595,1071],{"class":43},[37,18597,18598,18601,18603],{"class":39,"line":270},[37,18599,18600],{"class":43}," mode: ",[37,18602,15224],{"class":58},[37,18604,1071],{"class":43},[37,18606,18607,18610,18612],{"class":39,"line":1145},[37,18608,18609],{"class":43}," outputMin: ",[37,18611,13390],{"class":291},[37,18613,1071],{"class":43},[37,18615,18616,18619],{"class":39,"line":1151},[37,18617,18618],{"class":43}," outputMax: ",[37,18620,18621],{"class":291},"0.7\n",[37,18623,18624],{"class":39,"line":1157},[37,18625,3991],{"class":43},[37,18627,18628],{"class":39,"line":1162},[37,18629,1200],{"class":43},[37,18631,18632],{"class":39,"line":1168},[37,18633,120],{"emptyLinePlaceholder":119},[37,18635,18636],{"class":39,"line":1191},[37,18637,18638],{"class":68},"// Later: switch back to static\n",[37,18640,18641,18643,18645,18647,18649,18652,18654],{"class":39,"line":1197},[37,18642,9534],{"class":43},[37,18644,9537],{"class":51},[37,18646,3364],{"class":43},[37,18648,18546],{"class":58},[37,18650,18651],{"class":43},", { radius: ",[37,18653,6186],{"class":291},[37,18655,9549],{"class":43},[1311,18657,12923],{},{"title":32,"searchDepth":65,"depth":65,"links":18659},[18660,18661,18662,18663,18664,18665],{"id":14968,"depth":65,"text":14968},{"id":15760,"depth":65,"text":15760},{"id":16498,"depth":65,"text":16498},{"id":17127,"depth":65,"text":17127},{"id":18012,"depth":65,"text":18013},{"id":18499,"depth":65,"text":18500},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":15007,"description":18666},"docs/guide/7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":18673,"title":18674,"body":18675,"category":8163,"description":21015,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":21016,"meta":21017,"navigation":119,"path":21018,"seo":21019,"stem":21020,"__hash__":21021},"guide/docs/guide/8.shape-effects.md","Shape / SDF Effects",{"type":8,"value":18676,"toc":20987},[18677,18680,18701,18704,18708,18724,19368,19371,19375,19381,19384,19417,19447,19449,19456,19459,19528,19573,19575,19582,19585,19670,19724,19726,19732,19735,19823,19873,19875,19882,19885,19974,20024,20026,20033,20036,20087,20122,20124,20131,20134,20221,20272,20274,20281,20284,20367,20416,20418,20425,20428,20501,20544,20546,20553,20556,20640,20691,20693,20700,20703,20787,20839,20841,20845,20848,20866,20985],[11,18678,18674],{"id":18679},"shape-sdf-effects",[15,18681,18682,18683,2961,18686,18689,18690,18693,18694,18697,18698,18700],{},"Several components — such as ",[1306,18684,18685],{},"Glass",[1306,18687,18688],{},"Neon",", and ",[1306,18691,18692],{},"Emboss"," — are driven by a ",[2913,18695,18696],{},"shape",". These effects accept a ",[34,18699,18696],{}," prop that describes which shape to use and how it should be configured. They use what is called an \"SDF\" (or \"signed distance field\") texture to render the shape. An SDF is a mathematical representation of a shape that determines the distance from any pixel to the shape's boundary.",[15,18702,18703],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[1202,18705,18707],{"id":18706},"configuration","Configuration",[15,18709,2905,18710,18712,18713,18716,18717,16460,18720,18723],{},[34,18711,18696],{}," prop accepts a configuration object. The only required key is ",[34,18714,18715],{},"type",", which selects one of the built-in analytical shapes, like ",[34,18718,18719],{},"circleSDF",[34,18721,18722],{},"starSDF",". Everything else is shape-specific and optional (sensible defaults apply).",[23,18725,18726,18800,18945,19069,19193],{":tabs":25},[27,18727,18729],{"className":29,"code":18728,"language":31,"meta":32,"style":32},"\u003C!-- Circle (default) -->\n\u003CGlass :shape='{ type: \"circleSDF\", radius: 0.35 }' />\n\n\u003C!-- Six-pointed star -->\n\u003CNeon :shape='{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }' />\n\n\u003C!-- Rounded rectangle -->\n\u003CEmboss :shape='{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }' />\n",[34,18730,18731,18736,18752,18756,18761,18776,18780,18785],{"__ignoreMap":32},[37,18732,18733],{"class":39,"line":40},[37,18734,18735],{"class":68},"\u003C!-- Circle (default) -->\n",[37,18737,18738,18740,18742,18745,18747,18750],{"class":39,"line":65},[37,18739,44],{"class":43},[37,18741,18685],{"class":47},[37,18743,18744],{"class":51}," :shape",[37,18746,55],{"class":43},[37,18748,18749],{"class":58},"'{ type: \"circleSDF\", radius: 0.35 }'",[37,18751,113],{"class":43},[37,18753,18754],{"class":39,"line":72},[37,18755,120],{"emptyLinePlaceholder":119},[37,18757,18758],{"class":39,"line":116},[37,18759,18760],{"class":68},"\u003C!-- Six-pointed star -->\n",[37,18762,18763,18765,18767,18769,18771,18774],{"class":39,"line":123},[37,18764,44],{"class":43},[37,18766,18688],{"class":47},[37,18768,18744],{"class":51},[37,18770,55],{"class":43},[37,18772,18773],{"class":58},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[37,18775,113],{"class":43},[37,18777,18778],{"class":39,"line":129},[37,18779,120],{"emptyLinePlaceholder":119},[37,18781,18782],{"class":39,"line":171},[37,18783,18784],{"class":68},"\u003C!-- Rounded rectangle -->\n",[37,18786,18787,18789,18791,18793,18795,18798],{"class":39,"line":221},[37,18788,44],{"class":43},[37,18790,18692],{"class":47},[37,18792,18744],{"class":51},[37,18794,55],{"class":43},[37,18796,18797],{"class":58},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[37,18799,113],{"class":43},[27,18801,18803],{"className":280,"code":18802,"language":282,"meta":32,"style":32},"// Circle (default)\n\u003CGlass shape={JSON.stringify({ type: \"circleSDF\", radius: 0.35 })} />\n\n// Six-pointed star\n\u003CNeon shape={JSON.stringify({ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 })} />\n\n// Rounded rectangle\n\u003CEmboss shape={JSON.stringify({ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 })} />\n",[34,18804,18805,18810,18845,18849,18854,18895,18899,18904],{"__ignoreMap":32},[37,18806,18807],{"class":39,"line":40},[37,18808,18809],{"class":68},"// Circle (default)\n",[37,18811,18812,18814,18816,18819,18821,18823,18826,18828,18831,18834,18837,18839,18842],{"class":39,"line":65},[37,18813,44],{"class":43},[37,18815,18685],{"class":291},[37,18817,18818],{"class":51}," shape",[37,18820,55],{"class":297},[37,18822,326],{"class":43},[37,18824,18825],{"class":291},"JSON",[37,18827,7423],{"class":43},[37,18829,18830],{"class":51},"stringify",[37,18832,18833],{"class":43},"({ type: ",[37,18835,18836],{"class":58},"\"circleSDF\"",[37,18838,4501],{"class":43},[37,18840,18841],{"class":291},"0.35",[37,18843,18844],{"class":43}," })} />\n",[37,18846,18847],{"class":39,"line":72},[37,18848,120],{"emptyLinePlaceholder":119},[37,18850,18851],{"class":39,"line":116},[37,18852,18853],{"class":68},"// Six-pointed star\n",[37,18855,18856,18858,18860,18862,18864,18866,18868,18870,18872,18874,18877,18879,18881,18884,18887,18890,18893],{"class":39,"line":123},[37,18857,44],{"class":43},[37,18859,18688],{"class":291},[37,18861,18818],{"class":51},[37,18863,55],{"class":297},[37,18865,326],{"class":43},[37,18867,18825],{"class":291},[37,18869,7423],{"class":43},[37,18871,18830],{"class":51},[37,18873,18833],{"class":43},[37,18875,18876],{"class":58},"\"starSDF\"",[37,18878,4501],{"class":43},[37,18880,18841],{"class":291},[37,18882,18883],{"class":43},", sides: ",[37,18885,18886],{"class":291},"6",[37,18888,18889],{"class":43},", innerRatio: ",[37,18891,18892],{"class":291},"0.45",[37,18894,18844],{"class":43},[37,18896,18897],{"class":39,"line":129},[37,18898,120],{"emptyLinePlaceholder":119},[37,18900,18901],{"class":39,"line":171},[37,18902,18903],{"class":68},"// Rounded rectangle\n",[37,18905,18906,18908,18910,18912,18914,18916,18918,18920,18922,18924,18927,18930,18932,18934,18937,18940,18943],{"class":39,"line":221},[37,18907,44],{"class":43},[37,18909,18692],{"class":291},[37,18911,18818],{"class":51},[37,18913,55],{"class":297},[37,18915,326],{"class":43},[37,18917,18825],{"class":291},[37,18919,7423],{"class":43},[37,18921,18830],{"class":51},[37,18923,18833],{"class":43},[37,18925,18926],{"class":58},"\"roundedRectSDF\"",[37,18928,18929],{"class":43},", width: ",[37,18931,6186],{"class":291},[37,18933,1890],{"class":43},[37,18935,18936],{"class":291},"0.25",[37,18938,18939],{"class":43},", rounding: ",[37,18941,18942],{"class":291},"0.06",[37,18944,18844],{"class":43},[27,18946,18947],{"className":543,"code":18802,"language":545,"meta":32,"style":32},[34,18948,18949,18953,18981,18985,18989,19025,19029,19033],{"__ignoreMap":32},[37,18950,18951],{"class":39,"line":40},[37,18952,18809],{"class":68},[37,18954,18955,18957,18959,18961,18963,18965,18967,18969,18971,18973,18975,18977,18979],{"class":39,"line":65},[37,18956,44],{"class":43},[37,18958,18685],{"class":291},[37,18960,18818],{"class":51},[37,18962,55],{"class":297},[37,18964,326],{"class":43},[37,18966,18825],{"class":291},[37,18968,7423],{"class":43},[37,18970,18830],{"class":51},[37,18972,18833],{"class":43},[37,18974,18836],{"class":58},[37,18976,4501],{"class":43},[37,18978,18841],{"class":291},[37,18980,18844],{"class":43},[37,18982,18983],{"class":39,"line":72},[37,18984,120],{"emptyLinePlaceholder":119},[37,18986,18987],{"class":39,"line":116},[37,18988,18853],{"class":68},[37,18990,18991,18993,18995,18997,18999,19001,19003,19005,19007,19009,19011,19013,19015,19017,19019,19021,19023],{"class":39,"line":123},[37,18992,44],{"class":43},[37,18994,18688],{"class":291},[37,18996,18818],{"class":51},[37,18998,55],{"class":297},[37,19000,326],{"class":43},[37,19002,18825],{"class":291},[37,19004,7423],{"class":43},[37,19006,18830],{"class":51},[37,19008,18833],{"class":43},[37,19010,18876],{"class":58},[37,19012,4501],{"class":43},[37,19014,18841],{"class":291},[37,19016,18883],{"class":43},[37,19018,18886],{"class":291},[37,19020,18889],{"class":43},[37,19022,18892],{"class":291},[37,19024,18844],{"class":43},[37,19026,19027],{"class":39,"line":129},[37,19028,120],{"emptyLinePlaceholder":119},[37,19030,19031],{"class":39,"line":171},[37,19032,18903],{"class":68},[37,19034,19035,19037,19039,19041,19043,19045,19047,19049,19051,19053,19055,19057,19059,19061,19063,19065,19067],{"class":39,"line":221},[37,19036,44],{"class":43},[37,19038,18692],{"class":291},[37,19040,18818],{"class":51},[37,19042,55],{"class":297},[37,19044,326],{"class":43},[37,19046,18825],{"class":291},[37,19048,7423],{"class":43},[37,19050,18830],{"class":51},[37,19052,18833],{"class":43},[37,19054,18926],{"class":58},[37,19056,18929],{"class":43},[37,19058,6186],{"class":291},[37,19060,1890],{"class":43},[37,19062,18936],{"class":291},[37,19064,18939],{"class":43},[37,19066,18942],{"class":291},[37,19068,18844],{"class":43},[27,19070,19071],{"className":543,"code":18802,"language":545,"meta":32,"style":32},[34,19072,19073,19077,19105,19109,19113,19149,19153,19157],{"__ignoreMap":32},[37,19074,19075],{"class":39,"line":40},[37,19076,18809],{"class":68},[37,19078,19079,19081,19083,19085,19087,19089,19091,19093,19095,19097,19099,19101,19103],{"class":39,"line":65},[37,19080,44],{"class":43},[37,19082,18685],{"class":291},[37,19084,18818],{"class":51},[37,19086,55],{"class":297},[37,19088,326],{"class":43},[37,19090,18825],{"class":291},[37,19092,7423],{"class":43},[37,19094,18830],{"class":51},[37,19096,18833],{"class":43},[37,19098,18836],{"class":58},[37,19100,4501],{"class":43},[37,19102,18841],{"class":291},[37,19104,18844],{"class":43},[37,19106,19107],{"class":39,"line":72},[37,19108,120],{"emptyLinePlaceholder":119},[37,19110,19111],{"class":39,"line":116},[37,19112,18853],{"class":68},[37,19114,19115,19117,19119,19121,19123,19125,19127,19129,19131,19133,19135,19137,19139,19141,19143,19145,19147],{"class":39,"line":123},[37,19116,44],{"class":43},[37,19118,18688],{"class":291},[37,19120,18818],{"class":51},[37,19122,55],{"class":297},[37,19124,326],{"class":43},[37,19126,18825],{"class":291},[37,19128,7423],{"class":43},[37,19130,18830],{"class":51},[37,19132,18833],{"class":43},[37,19134,18876],{"class":58},[37,19136,4501],{"class":43},[37,19138,18841],{"class":291},[37,19140,18883],{"class":43},[37,19142,18886],{"class":291},[37,19144,18889],{"class":43},[37,19146,18892],{"class":291},[37,19148,18844],{"class":43},[37,19150,19151],{"class":39,"line":129},[37,19152,120],{"emptyLinePlaceholder":119},[37,19154,19155],{"class":39,"line":171},[37,19156,18903],{"class":68},[37,19158,19159,19161,19163,19165,19167,19169,19171,19173,19175,19177,19179,19181,19183,19185,19187,19189,19191],{"class":39,"line":221},[37,19160,44],{"class":43},[37,19162,18692],{"class":291},[37,19164,18818],{"class":51},[37,19166,55],{"class":297},[37,19168,326],{"class":43},[37,19170,18825],{"class":291},[37,19172,7423],{"class":43},[37,19174,18830],{"class":51},[37,19176,18833],{"class":43},[37,19178,18926],{"class":58},[37,19180,18929],{"class":43},[37,19182,6186],{"class":291},[37,19184,1890],{"class":43},[37,19186,18936],{"class":291},[37,19188,18939],{"class":43},[37,19190,18942],{"class":291},[37,19192,18844],{"class":43},[27,19194,19196],{"className":987,"code":19195,"language":989,"meta":32,"style":32},"// Circle (default)\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shape: { type: 'circleSDF', radius: 0.35 } } }\n ]\n})\n\n// Six-pointed star\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Neon', props: { shape: { type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 } } }\n ]\n})\n\n// Rounded rectangle\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Emboss', props: { shape: { type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 } } }\n ]\n})\n",[34,19197,19198,19202,19216,19220,19240,19244,19248,19252,19256,19270,19274,19300,19304,19308,19312,19316,19330,19334,19360,19364],{"__ignoreMap":32},[37,19199,19200],{"class":39,"line":40},[37,19201,18809],{"class":68},[37,19203,19204,19206,19208,19210,19212,19214],{"class":39,"line":65},[37,19205,2809],{"class":297},[37,19207,2812],{"class":291},[37,19209,2815],{"class":297},[37,19211,2818],{"class":297},[37,19213,999],{"class":51},[37,19215,1002],{"class":43},[37,19217,19218],{"class":39,"line":72},[37,19219,1007],{"class":43},[37,19221,19222,19224,19227,19230,19233,19235,19237],{"class":39,"line":116},[37,19223,1017],{"class":43},[37,19225,19226],{"class":58},"'Glass'",[37,19228,19229],{"class":43},", props: { shape: { type: ",[37,19231,19232],{"class":58},"'circleSDF'",[37,19234,4501],{"class":43},[37,19236,18841],{"class":291},[37,19238,19239],{"class":43}," } } }\n",[37,19241,19242],{"class":39,"line":123},[37,19243,1194],{"class":43},[37,19245,19246],{"class":39,"line":129},[37,19247,1200],{"class":43},[37,19249,19250],{"class":39,"line":171},[37,19251,120],{"emptyLinePlaceholder":119},[37,19253,19254],{"class":39,"line":221},[37,19255,18853],{"class":68},[37,19257,19258,19260,19262,19264,19266,19268],{"class":39,"line":231},[37,19259,2809],{"class":297},[37,19261,2812],{"class":291},[37,19263,2815],{"class":297},[37,19265,2818],{"class":297},[37,19267,999],{"class":51},[37,19269,1002],{"class":43},[37,19271,19272],{"class":39,"line":236},[37,19273,1007],{"class":43},[37,19275,19276,19278,19281,19283,19286,19288,19290,19292,19294,19296,19298],{"class":39,"line":242},[37,19277,1017],{"class":43},[37,19279,19280],{"class":58},"'Neon'",[37,19282,19229],{"class":43},[37,19284,19285],{"class":58},"'starSDF'",[37,19287,4501],{"class":43},[37,19289,18841],{"class":291},[37,19291,18883],{"class":43},[37,19293,18886],{"class":291},[37,19295,18889],{"class":43},[37,19297,18892],{"class":291},[37,19299,19239],{"class":43},[37,19301,19302],{"class":39,"line":270},[37,19303,1194],{"class":43},[37,19305,19306],{"class":39,"line":1145},[37,19307,1200],{"class":43},[37,19309,19310],{"class":39,"line":1151},[37,19311,120],{"emptyLinePlaceholder":119},[37,19313,19314],{"class":39,"line":1157},[37,19315,18903],{"class":68},[37,19317,19318,19320,19322,19324,19326,19328],{"class":39,"line":1162},[37,19319,2809],{"class":297},[37,19321,2812],{"class":291},[37,19323,2815],{"class":297},[37,19325,2818],{"class":297},[37,19327,999],{"class":51},[37,19329,1002],{"class":43},[37,19331,19332],{"class":39,"line":1168},[37,19333,1007],{"class":43},[37,19335,19336,19338,19341,19343,19346,19348,19350,19352,19354,19356,19358],{"class":39,"line":1191},[37,19337,1017],{"class":43},[37,19339,19340],{"class":58},"'Emboss'",[37,19342,19229],{"class":43},[37,19344,19345],{"class":58},"'roundedRectSDF'",[37,19347,18929],{"class":43},[37,19349,6186],{"class":291},[37,19351,1890],{"class":43},[37,19353,18936],{"class":291},[37,19355,18939],{"class":43},[37,19357,18942],{"class":291},[37,19359,19239],{"class":43},[37,19361,19362],{"class":39,"line":1197},[37,19363,1194],{"class":43},[37,19365,19366],{"class":39,"line":8929},[37,19367,1200],{"class":43},[19369,19370],"hr",{},[1202,19372,19374],{"id":19373},"built-in-shapes","Built-in shapes",[3997,19376,19378,19379],{"id":19377},"circle-circlesdf","Circle — ",[34,19380,18719],{},[15,19382,19383],{},"A perfect circle. The default shape for all shape effects.",[2860,19385,19386,19398],{},[2863,19387,19388],{},[2866,19389,19390,19392,19394,19396],{},[2869,19391,13057],{},[2869,19393,13060],{},[2869,19395,13063],{},[2869,19397,2874],{},[2876,19399,19400],{},[2866,19401,19402,19406,19410,19414],{},[2881,19403,19404],{},[34,19405,9613],{},[2881,19407,19408],{},[34,19409,13079],{},[2881,19411,19412],{},[34,19413,18841],{},[2881,19415,19416],{},"Circle radius in UV space",[27,19418,19422],{"className":19419,"code":19420,"language":19421,"meta":32,"style":32},"language-json shiki shiki-themes github-dark","{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n","json",[34,19423,19424],{"__ignoreMap":32},[37,19425,19426,19429,19432,19434,19436,19438,19441,19443,19445],{"class":39,"line":40},[37,19427,19428],{"class":43},"{ ",[37,19430,19431],{"class":291},"\"type\"",[37,19433,5924],{"class":43},[37,19435,18836],{"class":58},[37,19437,2961],{"class":43},[37,19439,19440],{"class":291},"\"radius\"",[37,19442,5924],{"class":43},[37,19444,18841],{"class":291},[37,19446,13657],{"class":43},[19369,19448],{},[3997,19450,19452,19453],{"id":19451},"ellipse-ellipsesdf","Ellipse — ",[34,19454,19455],{},"ellipseSDF",[15,19457,19458],{},"A stretched circle with independent horizontal and vertical radii.",[2860,19460,19461,19473],{},[2863,19462,19463],{},[2866,19464,19465,19467,19469,19471],{},[2869,19466,13057],{},[2869,19468,13060],{},[2869,19470,13063],{},[2869,19472,2874],{},[2876,19474,19475,19493,19511],{},[2866,19476,19477,19482,19486,19490],{},[2881,19478,19479],{},[34,19480,19481],{},"width",[2881,19483,19484],{},[34,19485,13079],{},[2881,19487,19488],{},[34,19489,6186],{},[2881,19491,19492],{},"Horizontal radius (semi-major axis)",[2866,19494,19495,19500,19504,19508],{},[2881,19496,19497],{},[34,19498,19499],{},"height",[2881,19501,19502],{},[34,19503,13079],{},[2881,19505,19506],{},[34,19507,18936],{},[2881,19509,19510],{},"Vertical radius (semi-minor axis)",[2866,19512,19513,19517,19521,19525],{},[2881,19514,19515],{},[34,19516,9765],{},[2881,19518,19519],{},[34,19520,13079],{},[2881,19522,19523],{},[34,19524,6610],{},[2881,19526,19527],{},"Rotation in degrees",[27,19529,19531],{"className":19419,"code":19530,"language":19421,"meta":32,"style":32},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[34,19532,19533],{"__ignoreMap":32},[37,19534,19535,19537,19539,19541,19544,19546,19549,19551,19553,19555,19558,19560,19562,19564,19567,19569,19571],{"class":39,"line":40},[37,19536,19428],{"class":43},[37,19538,19431],{"class":291},[37,19540,5924],{"class":43},[37,19542,19543],{"class":58},"\"ellipseSDF\"",[37,19545,2961],{"class":43},[37,19547,19548],{"class":291},"\"width\"",[37,19550,5924],{"class":43},[37,19552,6186],{"class":291},[37,19554,2961],{"class":43},[37,19556,19557],{"class":291},"\"height\"",[37,19559,5924],{"class":43},[37,19561,18936],{"class":291},[37,19563,2961],{"class":43},[37,19565,19566],{"class":291},"\"rotation\"",[37,19568,5924],{"class":43},[37,19570,6610],{"class":291},[37,19572,13657],{"class":43},[19369,19574],{},[3997,19576,19578,19579],{"id":19577},"polygon-polygonsdf","Polygon — ",[34,19580,19581],{},"polygonSDF",[15,19583,19584],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[2860,19586,19587,19599],{},[2863,19588,19589],{},[2866,19590,19591,19593,19595,19597],{},[2869,19592,13057],{},[2869,19594,13060],{},[2869,19596,13063],{},[2869,19598,2874],{},[2876,19600,19601,19618,19636,19654],{},[2866,19602,19603,19607,19611,19615],{},[2881,19604,19605],{},[34,19606,9613],{},[2881,19608,19609],{},[34,19610,13079],{},[2881,19612,19613],{},[34,19614,18841],{},[2881,19616,19617],{},"Distance from center to nearest edge midpoint",[2866,19619,19620,19625,19629,19633],{},[2881,19621,19622],{},[34,19623,19624],{},"sides",[2881,19626,19627],{},[34,19628,13079],{},[2881,19630,19631],{},[34,19632,18886],{},[2881,19634,19635],{},"Number of sides",[2866,19637,19638,19643,19647,19651],{},[2881,19639,19640],{},[34,19641,19642],{},"rounding",[2881,19644,19645],{},[34,19646,13079],{},[2881,19648,19649],{},[34,19650,6610],{},[2881,19652,19653],{},"Corner rounding amount",[2866,19655,19656,19660,19664,19668],{},[2881,19657,19658],{},[34,19659,9765],{},[2881,19661,19662],{},[34,19663,13079],{},[2881,19665,19666],{},[34,19667,6610],{},[2881,19669,19527],{},[27,19671,19673],{"className":19419,"code":19672,"language":19421,"meta":32,"style":32},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[34,19674,19675],{"__ignoreMap":32},[37,19676,19677,19679,19681,19683,19686,19688,19690,19692,19695,19697,19700,19702,19704,19706,19709,19711,19714,19716,19718,19720,19722],{"class":39,"line":40},[37,19678,19428],{"class":43},[37,19680,19431],{"class":291},[37,19682,5924],{"class":43},[37,19684,19685],{"class":58},"\"polygonSDF\"",[37,19687,2961],{"class":43},[37,19689,19440],{"class":291},[37,19691,5924],{"class":43},[37,19693,19694],{"class":291},"0.3",[37,19696,2961],{"class":43},[37,19698,19699],{"class":291},"\"sides\"",[37,19701,5924],{"class":43},[37,19703,18886],{"class":291},[37,19705,2961],{"class":43},[37,19707,19708],{"class":291},"\"rounding\"",[37,19710,5924],{"class":43},[37,19712,19713],{"class":291},"0.05",[37,19715,2961],{"class":43},[37,19717,19566],{"class":291},[37,19719,5924],{"class":43},[37,19721,6610],{"class":291},[37,19723,13657],{"class":43},[19369,19725],{},[3997,19727,19729,19730],{"id":19728},"star-starsdf","Star — ",[34,19731,18722],{},[15,19733,19734],{},"An N-pointed star with configurable inner/outer radius ratio.",[2860,19736,19737,19749],{},[2863,19738,19739],{},[2866,19740,19741,19743,19745,19747],{},[2869,19742,13057],{},[2869,19744,13060],{},[2869,19746,13063],{},[2869,19748,2874],{},[2876,19750,19751,19768,19785,19807],{},[2866,19752,19753,19757,19761,19765],{},[2881,19754,19755],{},[34,19756,9613],{},[2881,19758,19759],{},[34,19760,13079],{},[2881,19762,19763],{},[34,19764,18841],{},[2881,19766,19767],{},"Outer tip radius",[2866,19769,19770,19774,19778,19782],{},[2881,19771,19772],{},[34,19773,19624],{},[2881,19775,19776],{},[34,19777,13079],{},[2881,19779,19780],{},[34,19781,402],{},[2881,19783,19784],{},"Number of points",[2866,19786,19787,19792,19796,19801],{},[2881,19788,19789],{},[34,19790,19791],{},"innerRatio",[2881,19793,19794],{},[34,19795,13079],{},[2881,19797,19798],{},[34,19799,19800],{},"0.382",[2881,19802,19803,19804,19806],{},"Inner vertex radius as a fraction of outer radius — ",[34,19805,19800],{}," gives the classic golden-ratio 5-star",[2866,19808,19809,19813,19817,19821],{},[2881,19810,19811],{},[34,19812,9765],{},[2881,19814,19815],{},[34,19816,13079],{},[2881,19818,19819],{},[34,19820,6610],{},[2881,19822,19527],{},[27,19824,19826],{"className":19419,"code":19825,"language":19421,"meta":32,"style":32},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[34,19827,19828],{"__ignoreMap":32},[37,19829,19830,19832,19834,19836,19838,19840,19842,19844,19846,19848,19850,19852,19854,19856,19859,19861,19863,19865,19867,19869,19871],{"class":39,"line":40},[37,19831,19428],{"class":43},[37,19833,19431],{"class":291},[37,19835,5924],{"class":43},[37,19837,18876],{"class":58},[37,19839,2961],{"class":43},[37,19841,19440],{"class":291},[37,19843,5924],{"class":43},[37,19845,18841],{"class":291},[37,19847,2961],{"class":43},[37,19849,19699],{"class":291},[37,19851,5924],{"class":43},[37,19853,402],{"class":291},[37,19855,2961],{"class":43},[37,19857,19858],{"class":291},"\"innerRatio\"",[37,19860,5924],{"class":43},[37,19862,19800],{"class":291},[37,19864,2961],{"class":43},[37,19866,19566],{"class":291},[37,19868,5924],{"class":43},[37,19870,6610],{"class":291},[37,19872,13657],{"class":43},[19369,19874],{},[3997,19876,19878,19879],{"id":19877},"flower-flowersdf","Flower — ",[34,19880,19881],{},"flowerSDF",[15,19883,19884],{},"An N-petalled flower with smooth concave valleys between petals.",[2860,19886,19887,19899],{},[2863,19888,19889],{},[2866,19890,19891,19893,19895,19897],{},[2869,19892,13057],{},[2869,19894,13060],{},[2869,19896,13063],{},[2869,19898,2874],{},[2876,19900,19901,19918,19935,19958],{},[2866,19902,19903,19907,19911,19915],{},[2881,19904,19905],{},[34,19906,9613],{},[2881,19908,19909],{},[34,19910,13079],{},[2881,19912,19913],{},[34,19914,18841],{},[2881,19916,19917],{},"Outer petal tip radius",[2866,19919,19920,19924,19928,19932],{},[2881,19921,19922],{},[34,19923,19624],{},[2881,19925,19926],{},[34,19927,13079],{},[2881,19929,19930],{},[34,19931,18886],{},[2881,19933,19934],{},"Number of petals",[2866,19936,19937,19941,19945,19949],{},[2881,19938,19939],{},[34,19940,19791],{},[2881,19942,19943],{},[34,19944,13079],{},[2881,19946,19947],{},[34,19948,5689],{},[2881,19950,19951,19952,19954,19955,19957],{},"Valley depth — ",[34,19953,13390],{}," = deep narrow valleys, ",[34,19956,4235],{}," = subtle scalloped edge",[2866,19959,19960,19964,19968,19972],{},[2881,19961,19962],{},[34,19963,9765],{},[2881,19965,19966],{},[34,19967,13079],{},[2881,19969,19970],{},[34,19971,6610],{},[2881,19973,19527],{},[27,19975,19977],{"className":19419,"code":19976,"language":19421,"meta":32,"style":32},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[34,19978,19979],{"__ignoreMap":32},[37,19980,19981,19983,19985,19987,19990,19992,19994,19996,19998,20000,20002,20004,20006,20008,20010,20012,20014,20016,20018,20020,20022],{"class":39,"line":40},[37,19982,19428],{"class":43},[37,19984,19431],{"class":291},[37,19986,5924],{"class":43},[37,19988,19989],{"class":58},"\"flowerSDF\"",[37,19991,2961],{"class":43},[37,19993,19440],{"class":291},[37,19995,5924],{"class":43},[37,19997,18841],{"class":291},[37,19999,2961],{"class":43},[37,20001,19699],{"class":291},[37,20003,5924],{"class":43},[37,20005,18886],{"class":291},[37,20007,2961],{"class":43},[37,20009,19858],{"class":291},[37,20011,5924],{"class":43},[37,20013,5689],{"class":291},[37,20015,2961],{"class":43},[37,20017,19566],{"class":291},[37,20019,5924],{"class":43},[37,20021,6610],{"class":291},[37,20023,13657],{"class":43},[19369,20025],{},[3997,20027,20029,20030],{"id":20028},"ring-ringsdf","Ring — ",[34,20031,20032],{},"ringSDF",[15,20034,20035],{},"A hollow ring / annulus. The effect applies to the ring material itself, not the interior hole.",[2860,20037,20038,20050],{},[2863,20039,20040],{},[2866,20041,20042,20044,20046,20048],{},[2869,20043,13057],{},[2869,20045,13060],{},[2869,20047,13063],{},[2869,20049,2874],{},[2876,20051,20052,20069],{},[2866,20053,20054,20058,20062,20066],{},[2881,20055,20056],{},[34,20057,9613],{},[2881,20059,20060],{},[34,20061,13079],{},[2881,20063,20064],{},[34,20065,19694],{},[2881,20067,20068],{},"Distance from center to the ring centerline",[2866,20070,20071,20075,20079,20084],{},[2881,20072,20073],{},[34,20074,474],{},[2881,20076,20077],{},[34,20078,13079],{},[2881,20080,20081],{},[34,20082,20083],{},"0.08",[2881,20085,20086],{},"Half-width of the ring on each side of the centerline",[27,20088,20090],{"className":19419,"code":20089,"language":19421,"meta":32,"style":32},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[34,20091,20092],{"__ignoreMap":32},[37,20093,20094,20096,20098,20100,20103,20105,20107,20109,20111,20113,20116,20118,20120],{"class":39,"line":40},[37,20095,19428],{"class":43},[37,20097,19431],{"class":291},[37,20099,5924],{"class":43},[37,20101,20102],{"class":58},"\"ringSDF\"",[37,20104,2961],{"class":43},[37,20106,19440],{"class":291},[37,20108,5924],{"class":43},[37,20110,19694],{"class":291},[37,20112,2961],{"class":43},[37,20114,20115],{"class":291},"\"thickness\"",[37,20117,5924],{"class":43},[37,20119,20083],{"class":291},[37,20121,13657],{"class":43},[19369,20123],{},[3997,20125,20127,20128],{"id":20126},"cross-crosssdf","Cross — ",[34,20129,20130],{},"crossSDF",[15,20132,20133],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[2860,20135,20136,20148],{},[2863,20137,20138],{},[2866,20139,20140,20142,20144,20146],{},[2869,20141,13057],{},[2869,20143,13060],{},[2869,20145,13063],{},[2869,20147,2874],{},[2876,20149,20150,20167,20184,20201],{},[2866,20151,20152,20156,20160,20164],{},[2881,20153,20154],{},[34,20155,9621],{},[2881,20157,20158],{},[34,20159,13079],{},[2881,20161,20162],{},[34,20163,18936],{},[2881,20165,20166],{},"Arm half-length",[2866,20168,20169,20173,20177,20181],{},[2881,20170,20171],{},[34,20172,474],{},[2881,20174,20175],{},[34,20176,13079],{},[2881,20178,20179],{},[34,20180,20083],{},[2881,20182,20183],{},"Arm half-width",[2866,20185,20186,20190,20194,20198],{},[2881,20187,20188],{},[34,20189,19642],{},[2881,20191,20192],{},[34,20193,13079],{},[2881,20195,20196],{},[34,20197,17396],{},[2881,20199,20200],{},"Corner rounding at arm ends and intersections",[2866,20202,20203,20207,20211,20215],{},[2881,20204,20205],{},[34,20206,9765],{},[2881,20208,20209],{},[34,20210,13079],{},[2881,20212,20213],{},[34,20214,6610],{},[2881,20216,20217,20218,20220],{},"Rotation in degrees — use ",[34,20219,2375],{}," for an X shape",[27,20222,20224],{"className":19419,"code":20223,"language":19421,"meta":32,"style":32},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[34,20225,20226],{"__ignoreMap":32},[37,20227,20228,20230,20232,20234,20237,20239,20242,20244,20246,20248,20250,20252,20254,20256,20258,20260,20262,20264,20266,20268,20270],{"class":39,"line":40},[37,20229,19428],{"class":43},[37,20231,19431],{"class":291},[37,20233,5924],{"class":43},[37,20235,20236],{"class":58},"\"crossSDF\"",[37,20238,2961],{"class":43},[37,20240,20241],{"class":291},"\"size\"",[37,20243,5924],{"class":43},[37,20245,18936],{"class":291},[37,20247,2961],{"class":43},[37,20249,20115],{"class":291},[37,20251,5924],{"class":43},[37,20253,20083],{"class":291},[37,20255,2961],{"class":43},[37,20257,19708],{"class":291},[37,20259,5924],{"class":43},[37,20261,17396],{"class":291},[37,20263,2961],{"class":43},[37,20265,19566],{"class":291},[37,20267,5924],{"class":43},[37,20269,6610],{"class":291},[37,20271,13657],{"class":43},[19369,20273],{},[3997,20275,20277,20278],{"id":20276},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[34,20279,20280],{},"roundedRectSDF",[15,20282,20283],{},"A rectangle with uniformly rounded corners.",[2860,20285,20286,20298],{},[2863,20287,20288],{},[2866,20289,20290,20292,20294,20296],{},[2869,20291,13057],{},[2869,20293,13060],{},[2869,20295,13063],{},[2869,20297,2874],{},[2876,20299,20300,20317,20334,20351],{},[2866,20301,20302,20306,20310,20314],{},[2881,20303,20304],{},[34,20305,19481],{},[2881,20307,20308],{},[34,20309,13079],{},[2881,20311,20312],{},[34,20313,18841],{},[2881,20315,20316],{},"Half-width",[2866,20318,20319,20323,20327,20331],{},[2881,20320,20321],{},[34,20322,19499],{},[2881,20324,20325],{},[34,20326,13079],{},[2881,20328,20329],{},[34,20330,18936],{},[2881,20332,20333],{},"Half-height",[2866,20335,20336,20340,20344,20348],{},[2881,20337,20338],{},[34,20339,19642],{},[2881,20341,20342],{},[34,20343,13079],{},[2881,20345,20346],{},[34,20347,19713],{},[2881,20349,20350],{},"Corner rounding radius",[2866,20352,20353,20357,20361,20365],{},[2881,20354,20355],{},[34,20356,9765],{},[2881,20358,20359],{},[34,20360,13079],{},[2881,20362,20363],{},[34,20364,6610],{},[2881,20366,19527],{},[27,20368,20370],{"className":19419,"code":20369,"language":19421,"meta":32,"style":32},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[34,20371,20372],{"__ignoreMap":32},[37,20373,20374,20376,20378,20380,20382,20384,20386,20388,20390,20392,20394,20396,20398,20400,20402,20404,20406,20408,20410,20412,20414],{"class":39,"line":40},[37,20375,19428],{"class":43},[37,20377,19431],{"class":291},[37,20379,5924],{"class":43},[37,20381,18926],{"class":58},[37,20383,2961],{"class":43},[37,20385,19548],{"class":291},[37,20387,5924],{"class":43},[37,20389,18841],{"class":291},[37,20391,2961],{"class":43},[37,20393,19557],{"class":291},[37,20395,5924],{"class":43},[37,20397,18936],{"class":291},[37,20399,2961],{"class":43},[37,20401,19708],{"class":291},[37,20403,5924],{"class":43},[37,20405,19713],{"class":291},[37,20407,2961],{"class":43},[37,20409,19566],{"class":291},[37,20411,5924],{"class":43},[37,20413,6610],{"class":291},[37,20415,13657],{"class":43},[19369,20417],{},[3997,20419,20421,20422],{"id":20420},"vesica-vesicasdf","Vesica — ",[34,20423,20424],{},"vesicaSDF",[15,20426,20427],{},"A lens / eye shape formed by the intersection of two overlapping circles.",[2860,20429,20430,20442],{},[2863,20431,20432],{},[2866,20433,20434,20436,20438,20440],{},[2869,20435,13057],{},[2869,20437,13060],{},[2869,20439,13063],{},[2869,20441,2874],{},[2876,20443,20444,20461,20485],{},[2866,20445,20446,20450,20454,20458],{},[2881,20447,20448],{},[34,20449,9613],{},[2881,20451,20452],{},[34,20453,13079],{},[2881,20455,20456],{},[34,20457,18841],{},[2881,20459,20460],{},"Radius of each circle",[2866,20462,20463,20468,20472,20476],{},[2881,20464,20465],{},[34,20466,20467],{},"spread",[2881,20469,20470],{},[34,20471,13079],{},[2881,20473,20474],{},[34,20475,5689],{},[2881,20477,20478,20479,20481,20482,20484],{},"Half-distance between circle centers as a fraction of radius — ",[34,20480,6610],{}," = a single circle, ",[34,20483,6614],{}," = an infinitely thin lens",[2866,20486,20487,20491,20495,20499],{},[2881,20488,20489],{},[34,20490,9765],{},[2881,20492,20493],{},[34,20494,13079],{},[2881,20496,20497],{},[34,20498,6610],{},[2881,20500,19527],{},[27,20502,20504],{"className":19419,"code":20503,"language":19421,"meta":32,"style":32},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[34,20505,20506],{"__ignoreMap":32},[37,20507,20508,20510,20512,20514,20517,20519,20521,20523,20525,20527,20530,20532,20534,20536,20538,20540,20542],{"class":39,"line":40},[37,20509,19428],{"class":43},[37,20511,19431],{"class":291},[37,20513,5924],{"class":43},[37,20515,20516],{"class":58},"\"vesicaSDF\"",[37,20518,2961],{"class":43},[37,20520,19440],{"class":291},[37,20522,5924],{"class":43},[37,20524,18841],{"class":291},[37,20526,2961],{"class":43},[37,20528,20529],{"class":291},"\"spread\"",[37,20531,5924],{"class":43},[37,20533,5689],{"class":291},[37,20535,2961],{"class":43},[37,20537,19566],{"class":291},[37,20539,5924],{"class":43},[37,20541,6610],{"class":291},[37,20543,13657],{"class":43},[19369,20545],{},[3997,20547,20549,20550],{"id":20548},"crescent-crescentsdf","Crescent — ",[34,20551,20552],{},"crescentSDF",[15,20554,20555],{},"A crescent / moon shape formed by subtracting a smaller offset circle from a larger one.",[2860,20557,20558,20570],{},[2863,20559,20560],{},[2866,20561,20562,20564,20566,20568],{},[2869,20563,13057],{},[2869,20565,13060],{},[2869,20567,13063],{},[2869,20569,2874],{},[2876,20571,20572,20589,20607,20624],{},[2866,20573,20574,20578,20582,20586],{},[2881,20575,20576],{},[34,20577,9613],{},[2881,20579,20580],{},[34,20581,13079],{},[2881,20583,20584],{},[34,20585,18841],{},[2881,20587,20588],{},"Outer circle radius",[2866,20590,20591,20595,20599,20604],{},[2881,20592,20593],{},[34,20594,19791],{},[2881,20596,20597],{},[34,20598,13079],{},[2881,20600,20601],{},[34,20602,20603],{},"0.75",[2881,20605,20606],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[2866,20608,20609,20613,20617,20621],{},[2881,20610,20611],{},[34,20612,15776],{},[2881,20614,20615],{},[34,20616,13079],{},[2881,20618,20619],{},[34,20620,15904],{},[2881,20622,20623],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[2866,20625,20626,20630,20634,20638],{},[2881,20627,20628],{},[34,20629,9765],{},[2881,20631,20632],{},[34,20633,13079],{},[2881,20635,20636],{},[34,20637,6610],{},[2881,20639,19527],{},[27,20641,20643],{"className":19419,"code":20642,"language":19421,"meta":32,"style":32},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[34,20644,20645],{"__ignoreMap":32},[37,20646,20647,20649,20651,20653,20656,20658,20660,20662,20664,20666,20668,20670,20672,20674,20677,20679,20681,20683,20685,20687,20689],{"class":39,"line":40},[37,20648,19428],{"class":43},[37,20650,19431],{"class":291},[37,20652,5924],{"class":43},[37,20654,20655],{"class":58},"\"crescentSDF\"",[37,20657,2961],{"class":43},[37,20659,19440],{"class":291},[37,20661,5924],{"class":43},[37,20663,18841],{"class":291},[37,20665,2961],{"class":43},[37,20667,19858],{"class":291},[37,20669,5924],{"class":43},[37,20671,20603],{"class":291},[37,20673,2961],{"class":43},[37,20675,20676],{"class":291},"\"offset\"",[37,20678,5924],{"class":43},[37,20680,15904],{"class":291},[37,20682,2961],{"class":43},[37,20684,19566],{"class":291},[37,20686,5924],{"class":43},[37,20688,6610],{"class":291},[37,20690,13657],{"class":43},[19369,20692],{},[3997,20694,20696,20697],{"id":20695},"trapezoid-trapezoidsdf","Trapezoid — ",[34,20698,20699],{},"trapezoidSDF",[15,20701,20702],{},"A quadrilateral with parallel top and bottom edges of different widths.",[2860,20704,20705,20717],{},[2863,20706,20707],{},[2866,20708,20709,20711,20713,20715],{},[2869,20710,13057],{},[2869,20712,13060],{},[2869,20714,13063],{},[2869,20716,2874],{},[2876,20718,20719,20737,20755,20771],{},[2866,20720,20721,20726,20730,20734],{},[2881,20722,20723],{},[34,20724,20725],{},"bottomWidth",[2881,20727,20728],{},[34,20729,13079],{},[2881,20731,20732],{},[34,20733,18841],{},[2881,20735,20736],{},"Bottom edge half-width",[2866,20738,20739,20744,20748,20752],{},[2881,20740,20741],{},[34,20742,20743],{},"topWidth",[2881,20745,20746],{},[34,20747,13079],{},[2881,20749,20750],{},[34,20751,13390],{},[2881,20753,20754],{},"Top edge half-width",[2866,20756,20757,20761,20765,20769],{},[2881,20758,20759],{},[34,20760,19499],{},[2881,20762,20763],{},[34,20764,13079],{},[2881,20766,20767],{},[34,20768,18936],{},[2881,20770,20333],{},[2866,20772,20773,20777,20781,20785],{},[2881,20774,20775],{},[34,20776,9765],{},[2881,20778,20779],{},[34,20780,13079],{},[2881,20782,20783],{},[34,20784,6610],{},[2881,20786,19527],{},[27,20788,20790],{"className":19419,"code":20789,"language":19421,"meta":32,"style":32},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[34,20791,20792],{"__ignoreMap":32},[37,20793,20794,20796,20798,20800,20803,20805,20808,20810,20812,20814,20817,20819,20821,20823,20825,20827,20829,20831,20833,20835,20837],{"class":39,"line":40},[37,20795,19428],{"class":43},[37,20797,19431],{"class":291},[37,20799,5924],{"class":43},[37,20801,20802],{"class":58},"\"trapezoidSDF\"",[37,20804,2961],{"class":43},[37,20806,20807],{"class":291},"\"bottomWidth\"",[37,20809,5924],{"class":43},[37,20811,18841],{"class":291},[37,20813,2961],{"class":43},[37,20815,20816],{"class":291},"\"topWidth\"",[37,20818,5924],{"class":43},[37,20820,13390],{"class":291},[37,20822,2961],{"class":43},[37,20824,19557],{"class":291},[37,20826,5924],{"class":43},[37,20828,18936],{"class":291},[37,20830,2961],{"class":43},[37,20832,19566],{"class":291},[37,20834,5924],{"class":43},[37,20836,6610],{"class":291},[37,20838,13657],{"class":43},[19369,20840],{},[1202,20842,20844],{"id":20843},"custom-shapes","Custom shapes",[15,20846,20847],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,20849,20850,20851,20854,20855,20858,20859,20861,20862,20865],{},"To use an SVG shape, simply set ",[34,20852,20853],{},":shapeSdfUrl"," to the URL of the SDF ",[34,20856,20857],{},".bin"," file. Note that at the moment the SDF conversion occurs within the design editor, so it's recommended to use the ",[34,20860,20857],{}," file provided in the code export from the editor. In the near future we'll release a standalone ",[34,20863,20864],{},"SVG -> SDF"," conversion tool here for non-Pro users.",[23,20867,20868,20889,20908,20924,20940],{":tabs":25},[27,20869,20871],{"className":29,"code":20870,"language":31,"meta":32,"style":32},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" />\n",[34,20872,20873],{"__ignoreMap":32},[37,20874,20875,20877,20879,20882,20884,20887],{"class":39,"line":40},[37,20876,44],{"class":43},[37,20878,18685],{"class":47},[37,20880,20881],{"class":51}," :shapeSdfUrl",[37,20883,55],{"class":43},[37,20885,20886],{"class":58},"\"myLogoUrl\"",[37,20888,113],{"class":43},[27,20890,20892],{"className":280,"code":20891,"language":282,"meta":32,"style":32},"\u003CGlass shapeSdfUrl={myLogoUrl} />\n",[34,20893,20894],{"__ignoreMap":32},[37,20895,20896,20898,20900,20903,20905],{"class":39,"line":40},[37,20897,44],{"class":43},[37,20899,18685],{"class":291},[37,20901,20902],{"class":51}," shapeSdfUrl",[37,20904,55],{"class":297},[37,20906,20907],{"class":43},"{myLogoUrl} />\n",[27,20909,20910],{"className":543,"code":20891,"language":545,"meta":32,"style":32},[34,20911,20912],{"__ignoreMap":32},[37,20913,20914,20916,20918,20920,20922],{"class":39,"line":40},[37,20915,44],{"class":43},[37,20917,18685],{"class":291},[37,20919,20902],{"class":51},[37,20921,55],{"class":297},[37,20923,20907],{"class":43},[27,20925,20926],{"className":543,"code":20891,"language":545,"meta":32,"style":32},[34,20927,20928],{"__ignoreMap":32},[37,20929,20930,20932,20934,20936,20938],{"class":39,"line":40},[37,20931,44],{"class":43},[37,20933,18685],{"class":291},[37,20935,20902],{"class":51},[37,20937,55],{"class":297},[37,20939,20907],{"class":43},[27,20941,20943],{"className":987,"code":20942,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shapeSdfUrl: 'https://example.com/my-logo.bin' } }\n ]\n})\n",[34,20944,20945,20959,20963,20977,20981],{"__ignoreMap":32},[37,20946,20947,20949,20951,20953,20955,20957],{"class":39,"line":40},[37,20948,2809],{"class":297},[37,20950,2812],{"class":291},[37,20952,2815],{"class":297},[37,20954,2818],{"class":297},[37,20956,999],{"class":51},[37,20958,1002],{"class":43},[37,20960,20961],{"class":39,"line":65},[37,20962,1007],{"class":43},[37,20964,20965,20967,20969,20972,20975],{"class":39,"line":72},[37,20966,1017],{"class":43},[37,20968,19226],{"class":58},[37,20970,20971],{"class":43},", props: { shapeSdfUrl: ",[37,20973,20974],{"class":58},"'https://example.com/my-logo.bin'",[37,20976,1142],{"class":43},[37,20978,20979],{"class":39,"line":116},[37,20980,1194],{"class":43},[37,20982,20983],{"class":39,"line":123},[37,20984,1200],{"class":43},[1311,20986,12923],{},{"title":32,"searchDepth":65,"depth":65,"links":20988},[20989,20990,21014],{"id":18706,"depth":65,"text":18707},{"id":19373,"depth":65,"text":19374,"children":20991},[20992,20994,20996,20998,21000,21002,21004,21006,21008,21010,21012],{"id":19377,"depth":72,"text":20993},"Circle — circleSDF",{"id":19451,"depth":72,"text":20995},"Ellipse — ellipseSDF",{"id":19577,"depth":72,"text":20997},"Polygon — polygonSDF",{"id":19728,"depth":72,"text":20999},"Star — starSDF",{"id":19877,"depth":72,"text":21001},"Flower — flowerSDF",{"id":20028,"depth":72,"text":21003},"Ring — ringSDF",{"id":20126,"depth":72,"text":21005},"Cross — crossSDF",{"id":20276,"depth":72,"text":21007},"Rounded Rectangle — roundedRectSDF",{"id":20420,"depth":72,"text":21009},"Vesica — vesicaSDF",{"id":20548,"depth":72,"text":21011},"Crescent — crescentSDF",{"id":20695,"depth":72,"text":21013},"Trapezoid — trapezoidSDF",{"id":20843,"depth":65,"text":20844},"How to use and configure the built-in shape system","shapes",{},"/docs/guide/shape-effects",{"title":18674,"description":21015},"docs/guide/8.shape-effects","UiYWbvX2HwX3Cm-5eWV79KOJLkVIgz7QULXXdxMzqjI",{"id":21023,"title":14973,"body":21024,"category":2984,"description":21383,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":21384,"meta":21385,"navigation":119,"path":21386,"seo":21387,"stem":21388,"__hash__":21389},"guide/docs/guide/9.performance.md",{"type":8,"value":21025,"toc":21377},[21026,21028,21031,21035,21042,21045,21049,21052,21058,21068,21073,21134,21137,21141,21144,21149,21171,21177,21331,21335,21341,21347,21362,21368,21374],[11,21027,14973],{"id":14972},[15,21029,21030],{},"Shaders runs on the GPU, which means most effects are significantly faster than equivalent CSS or canvas2D solutions. That said, the GPU isn't free — some patterns cost more than others. Understanding what drives GPU cost helps you design effects that stay smooth.",[1202,21032,21034],{"id":21033},"the-frame-budget","The frame budget",[15,21036,21037,21038,21041],{},"At 60fps, the GPU has ",[1306,21039,21040],{},"16.67ms per frame",". Shaders renders once per frame, compositing all visible layers together. Simple setups render in under 1ms. Complex nesting with multiple effects can push toward that budget.",[15,21043,21044],{},"The renderer automatically drops to ~1fps when the canvas is scrolled out of the viewport — so effects that aren't visible consume almost nothing.",[1202,21046,21048],{"id":21047},"generator-vs-filter-effects","Generator vs. filter effects",[15,21050,21051],{},"Effects fall into two broad categories with very different cost profiles:",[15,21053,21054,21057],{},[1306,21055,21056],{},"Generator"," components (LinearGradient, Circle, Plasma, Swirl, etc.) create pixels from scratch by evaluating a mathematical function per-pixel. They're extremely fast — a full-screen gradient or noise pattern takes fractions of a millisecond.",[15,21059,21060,21063,21064,21067],{},[1306,21061,21062],{},"Filter/Effect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[1306,21065,21066],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,21069,21070],{},[1306,21071,21072],{},"Rough cost categories:",[2860,21074,21075,21088],{},[2863,21076,21077],{},[2866,21078,21079,21082,21085],{},[2869,21080,21081],{},"Category",[2869,21083,21084],{},"Examples",[2869,21086,21087],{},"Relative cost",[2876,21089,21090,21101,21112,21123],{},[2866,21091,21092,21095,21098],{},[2881,21093,21094],{},"Very light",[2881,21096,21097],{},"SolidColor, LinearGradient, RadialGradient",[2881,21099,21100],{},"~0–0.1ms",[2866,21102,21103,21106,21109],{},[2881,21104,21105],{},"Light",[2881,21107,21108],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[2881,21110,21111],{},"~0.1–0.5ms",[2866,21113,21114,21117,21120],{},[2881,21115,21116],{},"Medium",[2881,21118,21119],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[2881,21121,21122],{},"~0.5–2ms",[2866,21124,21125,21128,21131],{},[2881,21126,21127],{},"Heavy",[2881,21129,21130],{},"Glass, GlassTiles, multiple nested RTT effects",[2881,21132,21133],{},"~1-2ms+",[15,21135,21136],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[1202,21138,21140],{"id":21139},"render-to-texture-rtt","Render-to-texture (RTT)",[15,21142,21143],{},"RTT is what happens when one effect needs to read the rendered output of another. The renderer first renders the source layer to an intermediate texture, then the effect samples from it.",[15,21145,21146],{},[1306,21147,21148],{},"What triggers RTT:",[2556,21150,21151,21154,21162,21165],{},[2559,21152,21153],{},"Filter/effect components that need input (Blur, Glass, GlassTiles, etc.)",[2559,21155,2905,21156,21158,21159,21161],{},[34,21157,17127],{}," ",[2237,21160,14964],{"href":14963}," on any component (the source layer is RTT'd)",[2559,21163,21164],{},"The masking system when a layer is used as a mask source",[2559,21166,21167,21168,21170],{},"Non-default ",[2237,21169,12948],{"href":15001}," on a component",[15,21172,21173,21176],{},[1306,21174,21175],{},"The cost scales with nesting."," One RTT pass is cheap. Three nested RTT effects means three serial passes. Avoid deep nesting of heavy filter effects:",[27,21178,21180],{"className":29,"code":21179,"language":31,"meta":32,"style":32},"\u003C!-- Avoid: three RTT passes in series -->\n\u003CShader>\n \u003CLinearGradient />\n \u003CGlassTiles>\n \u003CGlass>\n \u003CBlur :radius=\"20\">\n \u003CCircle />\n \u003C/Blur>\n \u003C/Glass>\n \u003C/GlassTiles>\n\u003C/Shader>\n\n\u003C!-- Better: fewer RTT boundaries -->\n\u003CShader>\n \u003CLinearGradient />\n \u003CGlassTiles>\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[34,21181,21182,21187,21195,21203,21211,21219,21234,21242,21250,21258,21266,21274,21278,21283,21291,21299,21307,21315,21323],{"__ignoreMap":32},[37,21183,21184],{"class":39,"line":40},[37,21185,21186],{"class":68},"\u003C!-- Avoid: three RTT passes in series -->\n",[37,21188,21189,21191,21193],{"class":39,"line":65},[37,21190,44],{"class":43},[37,21192,48],{"class":47},[37,21194,62],{"class":43},[37,21196,21197,21199,21201],{"class":39,"line":72},[37,21198,75],{"class":43},[37,21200,78],{"class":47},[37,21202,113],{"class":43},[37,21204,21205,21207,21209],{"class":39,"line":116},[37,21206,75],{"class":43},[37,21208,4161],{"class":47},[37,21210,62],{"class":43},[37,21212,21213,21215,21217],{"class":39,"line":123},[37,21214,174],{"class":43},[37,21216,18685],{"class":47},[37,21218,62],{"class":43},[37,21220,21221,21223,21225,21227,21229,21232],{"class":39,"line":129},[37,21222,3549],{"class":43},[37,21224,9699],{"class":47},[37,21226,15037],{"class":51},[37,21228,55],{"class":43},[37,21230,21231],{"class":58},"\"20\"",[37,21233,62],{"class":43},[37,21235,21236,21238,21240],{"class":39,"line":171},[37,21237,8738],{"class":43},[37,21239,3293],{"class":47},[37,21241,113],{"class":43},[37,21243,21244,21246,21248],{"class":39,"line":221},[37,21245,8844],{"class":43},[37,21247,9699],{"class":47},[37,21249,62],{"class":43},[37,21251,21252,21254,21256],{"class":39,"line":231},[37,21253,3564],{"class":43},[37,21255,18685],{"class":47},[37,21257,62],{"class":43},[37,21259,21260,21262,21264],{"class":39,"line":236},[37,21261,224],{"class":43},[37,21263,4161],{"class":47},[37,21265,62],{"class":43},[37,21267,21268,21270,21272],{"class":39,"line":242},[37,21269,273],{"class":43},[37,21271,48],{"class":47},[37,21273,62],{"class":43},[37,21275,21276],{"class":39,"line":270},[37,21277,120],{"emptyLinePlaceholder":119},[37,21279,21280],{"class":39,"line":1145},[37,21281,21282],{"class":68},"\u003C!-- Better: fewer RTT boundaries -->\n",[37,21284,21285,21287,21289],{"class":39,"line":1151},[37,21286,44],{"class":43},[37,21288,48],{"class":47},[37,21290,62],{"class":43},[37,21292,21293,21295,21297],{"class":39,"line":1157},[37,21294,75],{"class":43},[37,21296,78],{"class":47},[37,21298,113],{"class":43},[37,21300,21301,21303,21305],{"class":39,"line":1162},[37,21302,75],{"class":43},[37,21304,4161],{"class":47},[37,21306,62],{"class":43},[37,21308,21309,21311,21313],{"class":39,"line":1168},[37,21310,174],{"class":43},[37,21312,3293],{"class":47},[37,21314,113],{"class":43},[37,21316,21317,21319,21321],{"class":39,"line":1191},[37,21318,224],{"class":43},[37,21320,4161],{"class":47},[37,21322,62],{"class":43},[37,21324,21325,21327,21329],{"class":39,"line":1197},[37,21326,273],{"class":43},[37,21328,48],{"class":47},[37,21330,62],{"class":43},[1202,21332,21334],{"id":21333},"practical-tips","Practical tips",[15,21336,21337,21340],{},[1306,21338,21339],{},"Use generators as backgrounds."," LinearGradient, Plasma, SimplexNoise, and similar generators are nearly free. Build your base layer with these before adding filter effects on top.",[15,21342,21343,21346],{},[1306,21344,21345],{},"Limit nested filter effects."," Each nesting boundary where a filter effect wraps children creates an RTT pass. Three flat filter layers is cheaper than three nested ones.",[15,21348,21349,21352,21353,21355,21356,21358,21359,21361],{},[1306,21350,21351],{},"Invisible layers still cost."," A hidden layer with ",[34,21354,6983],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[34,21357,6610],{}," still renders the layer. Use ",[34,21360,6983],{}," to truly exclude layers you don't need.",[15,21363,21364,21367],{},[1306,21365,21366],{},"Canvas size matters."," RTT textures scale with the canvas resolution. A full-screen Glass effect on a 4K display will be more expensive than on a 1080p display. This is automatic behavior, not something you control directly, but it's worth knowing for very large canvases.",[15,21369,21370,21373],{},[1306,21371,21372],{},"Prefer runtime props over compile-time ones."," Most props update instantly by writing a new GPU uniform value. A small number of props are marked as \"compile-time\" — changing them triggers a shader recompile, which pauses rendering briefly. The component docs flag these where applicable. Avoid animating compile-time props.",[1311,21375,21376],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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);}",{"title":32,"searchDepth":65,"depth":65,"links":21378},[21379,21380,21381,21382],{"id":21033,"depth":65,"text":21034},{"id":21047,"depth":65,"text":21048},{"id":21139,"depth":65,"text":21140},{"id":21333,"depth":65,"text":21334},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"/docs/guide/performance",{"title":14973,"description":21383},"docs/guide/9.performance","CBj3Z8Zk4h6dwXGq1AOtOkCjEyK5HRjDjSB9VgDuwHw",{"id":21391,"title":1332,"body":21392,"category":1320,"description":22018,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":2600,"meta":22019,"navigation":119,"path":22020,"seo":22021,"stem":22022,"__hash__":22023},"guide/docs/guide/js/1.quickstart.md",{"type":8,"value":21393,"toc":22008},[21394,21398,21401,21405,21417,21421,21427,21458,21460,21467,21559,21561,21567,21569,21577,21679,21686,21710,21712,21719,21811,21815,21824,21943,21950,21956,21960,21967,21981,21984,21986,22005],[11,21395,21397],{"id":21396},"quickstart-javascript","Quickstart (JavaScript)",[15,21399,21400],{},"Shaders provides a vanilla JavaScript API that works with any bundler-based JS environment (Vite, Webpack, etc.), Web Components, or plain HTML with an ESM-compatible setup — no framework required.",[1202,21402,21404],{"id":21403},"install-the-npm-package","Install the npm package",[27,21406,21407],{"className":1344,"code":1345,"language":1346,"meta":32,"style":32},[34,21408,21409],{"__ignoreMap":32},[37,21410,21411,21413,21415],{"class":39,"line":40},[37,21412,1353],{"class":51},[37,21414,1356],{"class":58},[37,21416,1359],{"class":58},[1202,21418,21420],{"id":21419},"set-up-a-canvas","Set up a canvas",[15,21422,21423,21424,21426],{},"Create a ",[34,21425,1214],{}," element in your HTML and give it a size:",[27,21428,21430],{"className":10811,"code":21429,"language":10813,"meta":32,"style":32},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C/canvas>\n",[34,21431,21432],{"__ignoreMap":32},[37,21433,21434,21436,21438,21440,21442,21445,21447,21449,21452,21454,21456],{"class":39,"line":40},[37,21435,44],{"class":43},[37,21437,10822],{"class":47},[37,21439,137],{"class":51},[37,21441,55],{"class":43},[37,21443,21444],{"class":58},"\"my-shader\"",[37,21446,1751],{"class":51},[37,21448,55],{"class":43},[37,21450,21451],{"class":58},"\"width: 100%; height: 400px;\"",[37,21453,10839],{"class":43},[37,21455,10822],{"class":47},[37,21457,62],{"class":43},[1202,21459,1443],{"id":1442},[15,21461,21462,21463,21466],{},"Import ",[34,21464,21465],{},"createShader",", pass it the canvas and a list of components:",[27,21468,21470],{"className":987,"code":21469,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst canvas = document.getElementById('my-shader')\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } },\n { type: 'CursorTrail', props: {} }\n ]\n})\n",[34,21471,21472,21482,21486,21504,21508,21522,21526,21542,21551,21555],{"__ignoreMap":32},[37,21473,21474,21476,21478,21480],{"class":39,"line":40},[37,21475,1382],{"class":297},[37,21477,9444],{"class":43},[37,21479,1388],{"class":297},[37,21481,9449],{"class":58},[37,21483,21484],{"class":39,"line":65},[37,21485,120],{"emptyLinePlaceholder":119},[37,21487,21488,21490,21492,21494,21496,21498,21500,21502],{"class":39,"line":72},[37,21489,2809],{"class":297},[37,21491,3868],{"class":291},[37,21493,2815],{"class":297},[37,21495,3873],{"class":43},[37,21497,3876],{"class":51},[37,21499,3364],{"class":43},[37,21501,10457],{"class":58},[37,21503,3369],{"class":43},[37,21505,21506],{"class":39,"line":116},[37,21507,120],{"emptyLinePlaceholder":119},[37,21509,21510,21512,21514,21516,21518,21520],{"class":39,"line":123},[37,21511,2809],{"class":297},[37,21513,2812],{"class":291},[37,21515,2815],{"class":297},[37,21517,2818],{"class":297},[37,21519,999],{"class":51},[37,21521,1002],{"class":43},[37,21523,21524],{"class":39,"line":129},[37,21525,1007],{"class":43},[37,21527,21528,21530,21532,21534,21536,21538,21540],{"class":39,"line":171},[37,21529,1017],{"class":43},[37,21531,1020],{"class":58},[37,21533,8098],{"class":43},[37,21535,14861],{"class":58},[37,21537,8104],{"class":43},[37,21539,14866],{"class":58},[37,21541,1046],{"class":43},[37,21543,21544,21546,21549],{"class":39,"line":221},[37,21545,1017],{"class":43},[37,21547,21548],{"class":58},"'CursorTrail'",[37,21550,3207],{"class":43},[37,21552,21553],{"class":39,"line":231},[37,21554,1194],{"class":43},[37,21556,21557],{"class":39,"line":236},[37,21558,1200],{"class":43},[19,21560],{":preset":1672},[15,21562,2905,21563,21566],{},[34,21564,21565],{},"components"," array defines your visual layers, evaluated top to bottom, blended together on the GPU. In this example, we render the linear gradient first, and then the cursor trail effect on top of that.",[1202,21568,1687],{"id":1686},[15,21570,2905,21571,21573,21574,2630],{},[34,21572,1214],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[34,21575,21576],{},"ResizeObserver",[27,21578,21580],{"className":10811,"code":21579,"language":10813,"meta":32,"style":32},"\u003C!-- Fixed size -->\n\u003Ccanvas id=\"shader\" style=\"width: 600px; height: 400px;\">\u003C/canvas>\n\n\u003C!-- Full viewport -->\n\u003Ccanvas id=\"shader\" style=\"width: 100vw; height: 100dvh;\">\u003C/canvas>\n\n\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n\u003Ccanvas id=\"shader\" class=\"w-full aspect-video\">\u003C/canvas>\n",[34,21581,21582,21587,21612,21616,21621,21646,21650,21655],{"__ignoreMap":32},[37,21583,21584],{"class":39,"line":40},[37,21585,21586],{"class":68},"\u003C!-- Fixed size -->\n",[37,21588,21589,21591,21593,21595,21597,21600,21602,21604,21606,21608,21610],{"class":39,"line":65},[37,21590,44],{"class":43},[37,21592,10822],{"class":47},[37,21594,137],{"class":51},[37,21596,55],{"class":43},[37,21598,21599],{"class":58},"\"shader\"",[37,21601,1751],{"class":51},[37,21603,55],{"class":43},[37,21605,1756],{"class":58},[37,21607,10839],{"class":43},[37,21609,10822],{"class":47},[37,21611,62],{"class":43},[37,21613,21614],{"class":39,"line":72},[37,21615,120],{"emptyLinePlaceholder":119},[37,21617,21618],{"class":39,"line":116},[37,21619,21620],{"class":68},"\u003C!-- Full viewport -->\n",[37,21622,21623,21625,21627,21629,21631,21633,21635,21637,21640,21642,21644],{"class":39,"line":123},[37,21624,44],{"class":43},[37,21626,10822],{"class":47},[37,21628,137],{"class":51},[37,21630,55],{"class":43},[37,21632,21599],{"class":58},[37,21634,1751],{"class":51},[37,21636,55],{"class":43},[37,21638,21639],{"class":58},"\"width: 100vw; height: 100dvh;\"",[37,21641,10839],{"class":43},[37,21643,10822],{"class":47},[37,21645,62],{"class":43},[37,21647,21648],{"class":39,"line":129},[37,21649,120],{"emptyLinePlaceholder":119},[37,21651,21652],{"class":39,"line":171},[37,21653,21654],{"class":68},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[37,21656,21657,21659,21661,21663,21665,21667,21669,21671,21673,21675,21677],{"class":39,"line":221},[37,21658,44],{"class":43},[37,21660,10822],{"class":47},[37,21662,137],{"class":51},[37,21664,55],{"class":43},[37,21666,21599],{"class":58},[37,21668,52],{"class":51},[37,21670,55],{"class":43},[37,21672,1796],{"class":58},[37,21674,10839],{"class":43},[37,21676,10822],{"class":47},[37,21678,62],{"class":43},[15,21680,21681,21682,21685],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[34,21683,21684],{},"shader.resize()"," to sync:",[27,21687,21689],{"className":987,"code":21688,"language":989,"meta":32,"style":32},"canvas.style.height = '600px'\nshader.resize()\n",[34,21690,21691,21700],{"__ignoreMap":32},[37,21692,21693,21695,21697],{"class":39,"line":40},[37,21694,10474],{"class":43},[37,21696,55],{"class":297},[37,21698,21699],{"class":58}," '600px'\n",[37,21701,21702,21704,21707],{"class":39,"line":65},[37,21703,9534],{"class":43},[37,21705,21706],{"class":51},"resize",[37,21708,21709],{"class":43},"()\n",[1202,21711,2232],{"id":2231},[15,21713,21714,21715,21718],{},"Props are passed in the ",[34,21716,21717],{},"props"," object for each component. All prop names are camelCase:",[27,21720,21722],{"className":987,"code":21721,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n {\n type: 'LinearGradient',\n props: {\n colorA: '#ff6b6b',\n colorB: '#4ecdc4',\n angle: 45,\n colorSpace: 'oklch'\n }\n }\n ]\n})\n",[34,21723,21724,21738,21742,21746,21754,21758,21768,21778,21787,21795,21799,21803,21807],{"__ignoreMap":32},[37,21725,21726,21728,21730,21732,21734,21736],{"class":39,"line":40},[37,21727,2809],{"class":297},[37,21729,2812],{"class":291},[37,21731,2815],{"class":297},[37,21733,2818],{"class":297},[37,21735,999],{"class":51},[37,21737,1002],{"class":43},[37,21739,21740],{"class":39,"line":65},[37,21741,1007],{"class":43},[37,21743,21744],{"class":39,"line":72},[37,21745,1060],{"class":43},[37,21747,21748,21750,21752],{"class":39,"line":116},[37,21749,1065],{"class":43},[37,21751,1020],{"class":58},[37,21753,1071],{"class":43},[37,21755,21756],{"class":39,"line":123},[37,21757,13647],{"class":43},[37,21759,21760,21763,21766],{"class":39,"line":129},[37,21761,21762],{"class":43}," colorA: ",[37,21764,21765],{"class":58},"'#ff6b6b'",[37,21767,1071],{"class":43},[37,21769,21770,21773,21776],{"class":39,"line":171},[37,21771,21772],{"class":43}," colorB: ",[37,21774,21775],{"class":58},"'#4ecdc4'",[37,21777,1071],{"class":43},[37,21779,21780,21783,21785],{"class":39,"line":221},[37,21781,21782],{"class":43}," angle: ",[37,21784,2375],{"class":291},[37,21786,1071],{"class":43},[37,21788,21789,21792],{"class":39,"line":231},[37,21790,21791],{"class":43}," colorSpace: ",[37,21793,21794],{"class":58},"'oklch'\n",[37,21796,21797],{"class":39,"line":236},[37,21798,13662],{"class":43},[37,21800,21801],{"class":39,"line":242},[37,21802,13704],{"class":43},[37,21804,21805],{"class":39,"line":270},[37,21806,1194],{"class":43},[37,21808,21809],{"class":39,"line":1145},[37,21810,1200],{"class":43},[1202,21812,21814],{"id":21813},"updating-at-runtime","Updating at runtime",[15,21816,21817,21818,21820,21821,21823],{},"Assign an ",[34,21819,6994],{}," to any component, then use ",[34,21822,18506],{}," to change its props at any time:",[27,21825,21827],{"className":987,"code":21826,"language":989,"meta":32,"style":32},"const shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', id: 'gradient', props: { colorA: '#0f172a', colorB: '#7c3aed', angle: 0 } }\n ]\n})\n\n// Hook up a slider\ndocument.querySelector('#angle-slider').addEventListener('input', e => {\n shader.update('gradient', { angle: Number(e.target.value) })\n})\n",[34,21828,21829,21843,21847,21871,21875,21879,21883,21888,21921,21939],{"__ignoreMap":32},[37,21830,21831,21833,21835,21837,21839,21841],{"class":39,"line":40},[37,21832,2809],{"class":297},[37,21834,2812],{"class":291},[37,21836,2815],{"class":297},[37,21838,2818],{"class":297},[37,21840,999],{"class":51},[37,21842,1002],{"class":43},[37,21844,21845],{"class":39,"line":65},[37,21846,1007],{"class":43},[37,21848,21849,21851,21853,21855,21857,21859,21861,21863,21865,21867,21869],{"class":39,"line":72},[37,21850,1017],{"class":43},[37,21852,1020],{"class":58},[37,21854,3944],{"class":43},[37,21856,9502],{"class":58},[37,21858,8098],{"class":43},[37,21860,14861],{"class":58},[37,21862,8104],{"class":43},[37,21864,14866],{"class":58},[37,21866,1122],{"class":43},[37,21868,6610],{"class":291},[37,21870,1142],{"class":43},[37,21872,21873],{"class":39,"line":116},[37,21874,1194],{"class":43},[37,21876,21877],{"class":39,"line":123},[37,21878,1200],{"class":43},[37,21880,21881],{"class":39,"line":129},[37,21882,120],{"emptyLinePlaceholder":119},[37,21884,21885],{"class":39,"line":171},[37,21886,21887],{"class":68},"// Hook up a slider\n",[37,21889,21890,21893,21896,21898,21901,21904,21907,21909,21912,21914,21917,21919],{"class":39,"line":221},[37,21891,21892],{"class":43},"document.",[37,21894,21895],{"class":51},"querySelector",[37,21897,3364],{"class":43},[37,21899,21900],{"class":58},"'#angle-slider'",[37,21902,21903],{"class":43},").",[37,21905,21906],{"class":51},"addEventListener",[37,21908,3364],{"class":43},[37,21910,21911],{"class":58},"'input'",[37,21913,2961],{"class":43},[37,21915,21916],{"class":8757},"e",[37,21918,8760],{"class":297},[37,21920,3976],{"class":43},[37,21922,21923,21925,21927,21929,21931,21933,21936],{"class":39,"line":231},[37,21924,14930],{"class":43},[37,21926,9537],{"class":51},[37,21928,3364],{"class":43},[37,21930,9502],{"class":58},[37,21932,9544],{"class":43},[37,21934,21935],{"class":51},"Number",[37,21937,21938],{"class":43},"(e.target.value) })\n",[37,21940,21941],{"class":39,"line":236},[37,21942,1200],{"class":43},[15,21944,21945,21946,21949],{},"When ",[34,21947,21948],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,21951,21952,21953,21955],{},"Browse the ",[2237,21954,2240],{"href":2239}," for the full prop reference on every component.",[1202,21957,21959],{"id":21958},"cleanup","Cleanup",[15,21961,21962,21963,21966],{},"When you're done, call ",[34,21964,21965],{},"destroy()"," to free GPU resources:",[27,21968,21970],{"className":987,"code":21969,"language":989,"meta":32,"style":32},"shader.destroy()\n",[34,21971,21972],{"__ignoreMap":32},[37,21973,21974,21976,21979],{"class":39,"line":40},[37,21975,9534],{"class":43},[37,21977,21978],{"class":51},"destroy",[37,21980,21709],{"class":43},[15,21982,21983],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[1202,21985,2554],{"id":2553},[2556,21987,21988,21992,21996,22001],{},[2559,21989,21990,2565],{},[2237,21991,2564],{"href":2563},[2559,21993,21994,2572],{},[2237,21995,2571],{"href":2570},[2559,21997,21998,22000],{},[2237,21999,15007],{"href":14963}," — animate and mouse-track props declaratively",[2559,22002,22003,2584],{},[2237,22004,2240],{"href":2239},[1311,22006,22007],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":32,"searchDepth":65,"depth":65,"links":22009},[22010,22011,22012,22013,22014,22015,22016,22017],{"id":21403,"depth":65,"text":21404},{"id":21419,"depth":65,"text":21420},{"id":1442,"depth":65,"text":1443},{"id":1686,"depth":65,"text":1687},{"id":2231,"depth":65,"text":2232},{"id":21813,"depth":65,"text":21814},{"id":21958,"depth":65,"text":21959},{"id":2553,"depth":65,"text":2554},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"/docs/guide/js/quickstart",{"title":1332,"description":22018},"docs/guide/js/1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":22025,"title":1332,"body":22026,"category":1320,"description":22661,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":2600,"meta":22662,"navigation":119,"path":22663,"seo":22664,"stem":22665,"__hash__":22666},"guide/docs/guide/react/1.quickstart.md",{"type":8,"value":22027,"toc":22652},[22028,22032,22036,22038,22050,22054,22068,22070,22073,22127,22129,22136,22138,22151,22285,22299,22301,22304,22376,22383,22612,22617,22621,22625,22633,22635,22649],[11,22029,22031],{"id":22030},"quickstart-react","Quickstart (React)",[22033,22034],"you-tube-embed",{"id":22035},"836NxwU1Wwk",[1202,22037,21404],{"id":21403},[27,22039,22040],{"className":1344,"code":1345,"language":1346,"meta":32,"style":32},[34,22041,22042],{"__ignoreMap":32},[37,22043,22044,22046,22048],{"class":39,"line":40},[37,22045,1353],{"class":51},[37,22047,1356],{"class":58},[37,22049,1359],{"class":58},[1202,22051,22053],{"id":22052},"import-some-components","Import some components",[27,22055,22056],{"className":987,"code":1394,"language":989,"meta":32,"style":32},[34,22057,22058],{"__ignoreMap":32},[37,22059,22060,22062,22064,22066],{"class":39,"line":40},[37,22061,1382],{"class":297},[37,22063,1385],{"class":43},[37,22065,1388],{"class":297},[37,22067,1407],{"class":58},[1202,22069,1443],{"id":1442},[15,22071,22072],{},"Let's create a very simple shader:",[27,22074,22075],{"className":280,"code":1509,"language":282,"meta":32,"style":32},[34,22076,22077,22091,22111,22119],{"__ignoreMap":32},[37,22078,22079,22081,22083,22085,22087,22089],{"class":39,"line":40},[37,22080,44],{"class":43},[37,22082,48],{"class":291},[37,22084,294],{"class":51},[37,22086,55],{"class":297},[37,22088,59],{"class":58},[37,22090,62],{"class":43},[37,22092,22093,22095,22097,22099,22101,22103,22105,22107,22109],{"class":39,"line":65},[37,22094,75],{"class":43},[37,22096,78],{"class":291},[37,22098,1244],{"class":51},[37,22100,55],{"class":297},[37,22102,1249],{"class":58},[37,22104,1252],{"class":51},[37,22106,55],{"class":297},[37,22108,1257],{"class":58},[37,22110,113],{"class":43},[37,22112,22113,22115,22117],{"class":39,"line":72},[37,22114,75],{"class":43},[37,22116,1266],{"class":291},[37,22118,113],{"class":43},[37,22120,22121,22123,22125],{"class":39,"line":116},[37,22122,273],{"class":43},[37,22124,48],{"class":291},[37,22126,62],{"class":43},[19,22128],{":preset":1672},[15,22130,22131,1677,22133,22135],{},[34,22132,1296],{},[34,22134,1214],{}," element. Child components are visual layers evaluated top to bottom, blended together on the GPU. In this example, we render the linear gradient first, and then the cursor trail effect on top of that.",[1202,22137,1687],{"id":1686},[15,22139,2905,22140,22142,22143,16460,22146,22148,22149,1683],{},[34,22141,1214],{}," has no intrinsic size. The ",[34,22144,22145],{},"className",[34,22147,1311],{}," you apply to ",[34,22150,1296],{},[27,22152,22154],{"className":280,"code":22153,"language":282,"meta":32,"style":32},"{/* Fill the viewport */}\n\u003CShader className=\"w-screen h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Fixed dimensions */}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Fluid with aspect ratio */}\n\u003CShader className=\"w-full aspect-video\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,22155,22156,22164,22178,22186,22194,22198,22206,22226,22234,22242,22246,22255,22269,22277],{"__ignoreMap":32},[37,22157,22158,22160,22162],{"class":39,"line":40},[37,22159,326],{"class":43},[37,22161,1826],{"class":68},[37,22163,312],{"class":43},[37,22165,22166,22168,22170,22172,22174,22176],{"class":39,"line":65},[37,22167,44],{"class":43},[37,22169,48],{"class":291},[37,22171,294],{"class":51},[37,22173,55],{"class":297},[37,22175,1715],{"class":58},[37,22177,62],{"class":43},[37,22179,22180,22182,22184],{"class":39,"line":72},[37,22181,75],{"class":43},[37,22183,78],{"class":291},[37,22185,113],{"class":43},[37,22187,22188,22190,22192],{"class":39,"line":116},[37,22189,273],{"class":43},[37,22191,48],{"class":291},[37,22193,62],{"class":43},[37,22195,22196],{"class":39,"line":123},[37,22197,120],{"emptyLinePlaceholder":119},[37,22199,22200,22202,22204],{"class":39,"line":129},[37,22201,326],{"class":43},[37,22203,1869],{"class":68},[37,22205,312],{"class":43},[37,22207,22208,22210,22212,22214,22216,22218,22220,22222,22224],{"class":39,"line":171},[37,22209,44],{"class":43},[37,22211,48],{"class":291},[37,22213,1751],{"class":51},[37,22215,55],{"class":297},[37,22217,1884],{"class":43},[37,22219,1887],{"class":58},[37,22221,1890],{"class":43},[37,22223,1893],{"class":58},[37,22225,1896],{"class":43},[37,22227,22228,22230,22232],{"class":39,"line":221},[37,22229,75],{"class":43},[37,22231,78],{"class":291},[37,22233,113],{"class":43},[37,22235,22236,22238,22240],{"class":39,"line":231},[37,22237,273],{"class":43},[37,22239,48],{"class":291},[37,22241,62],{"class":43},[37,22243,22244],{"class":39,"line":236},[37,22245,120],{"emptyLinePlaceholder":119},[37,22247,22248,22250,22253],{"class":39,"line":242},[37,22249,326],{"class":43},[37,22251,22252],{"class":68},"/* Fluid with aspect ratio */",[37,22254,312],{"class":43},[37,22256,22257,22259,22261,22263,22265,22267],{"class":39,"line":270},[37,22258,44],{"class":43},[37,22260,48],{"class":291},[37,22262,294],{"class":51},[37,22264,55],{"class":297},[37,22266,1796],{"class":58},[37,22268,62],{"class":43},[37,22270,22271,22273,22275],{"class":39,"line":1145},[37,22272,75],{"class":43},[37,22274,78],{"class":291},[37,22276,113],{"class":43},[37,22278,22279,22281,22283],{"class":39,"line":1151},[37,22280,273],{"class":43},[37,22282,48],{"class":291},[37,22284,62],{"class":43},[15,22286,22287,22288,16460,22290,22292,22293,22295,22296,22298],{},"Applying a ",[34,22289,22145],{},[34,22291,1311],{}," to the ",[34,22294,1296],{}," tag is preferred over trying to target the ",[34,22297,1214],{}," element directly, as the internal DOM structure may change in the future.",[1202,22300,2232],{"id":2231},[15,22302,22303],{},"Pass props directly to configure each component. All props use camelCase:",[27,22305,22306],{"className":280,"code":2325,"language":282,"meta":32,"style":32},[34,22307,22308,22322,22328,22336,22344,22356,22364,22368],{"__ignoreMap":32},[37,22309,22310,22312,22314,22316,22318,22320],{"class":39,"line":40},[37,22311,44],{"class":43},[37,22313,48],{"class":291},[37,22315,294],{"class":51},[37,22317,55],{"class":297},[37,22319,59],{"class":58},[37,22321,62],{"class":43},[37,22323,22324,22326],{"class":39,"line":65},[37,22325,75],{"class":43},[37,22327,2269],{"class":291},[37,22329,22330,22332,22334],{"class":39,"line":72},[37,22331,2274],{"class":51},[37,22333,55],{"class":297},[37,22335,2279],{"class":58},[37,22337,22338,22340,22342],{"class":39,"line":116},[37,22339,2284],{"class":51},[37,22341,55],{"class":297},[37,22343,2289],{"class":58},[37,22345,22346,22348,22350,22352,22354],{"class":39,"line":123},[37,22347,2368],{"class":51},[37,22349,55],{"class":297},[37,22351,326],{"class":43},[37,22353,2375],{"class":291},[37,22355,312],{"class":43},[37,22357,22358,22360,22362],{"class":39,"line":129},[37,22359,2382],{"class":51},[37,22361,55],{"class":297},[37,22363,2309],{"class":58},[37,22365,22366],{"class":39,"line":171},[37,22367,2314],{"class":43},[37,22369,22370,22372,22374],{"class":39,"line":221},[37,22371,273],{"class":43},[37,22373,48],{"class":291},[37,22375,62],{"class":43},[15,22377,22378,22379,22382],{},"Props also accept state — ",[34,22380,22381],{},"useState"," and any other reactive value work exactly as you'd expect:",[27,22384,22386],{"className":280,"code":22385,"language":282,"meta":32,"style":32},"import { useState } from 'react'\nimport { Shader, LinearGradient } from 'shaders/react'\n\nexport default function MyShader() {\n const [angle, setAngle] = useState(0)\n\n return (\n \u003C>\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" angle={angle} />\n \u003C/Shader>\n\n \u003Cinput\n type=\"range\"\n min={0}\n max={360}\n value={angle}\n onChange={e => setAngle(Number(e.target.value))}\n />\n \u003C/>\n )\n}\n",[34,22387,22388,22398,22409,22413,22428,22452,22456,22462,22466,22480,22507,22515,22519,22526,22536,22549,22563,22573,22595,22600,22604,22608],{"__ignoreMap":32},[37,22389,22390,22392,22394,22396],{"class":39,"line":40},[37,22391,1382],{"class":297},[37,22393,3418],{"class":43},[37,22395,1388],{"class":297},[37,22397,3423],{"class":58},[37,22399,22400,22402,22405,22407],{"class":39,"line":65},[37,22401,1382],{"class":297},[37,22403,22404],{"class":43}," { Shader, LinearGradient } ",[37,22406,1388],{"class":297},[37,22408,1407],{"class":58},[37,22410,22411],{"class":39,"line":72},[37,22412,120],{"emptyLinePlaceholder":119},[37,22414,22415,22418,22421,22423,22426],{"class":39,"line":116},[37,22416,22417],{"class":297},"export",[37,22419,22420],{"class":297}," default",[37,22422,9871],{"class":297},[37,22424,22425],{"class":51}," MyShader",[37,22427,3384],{"class":43},[37,22429,22430,22432,22434,22436,22438,22440,22442,22444,22446,22448,22450],{"class":39,"line":123},[37,22431,3441],{"class":297},[37,22433,3444],{"class":43},[37,22435,438],{"class":291},[37,22437,2961],{"class":43},[37,22439,8698],{"class":291},[37,22441,3455],{"class":43},[37,22443,55],{"class":297},[37,22445,3460],{"class":51},[37,22447,3364],{"class":43},[37,22449,6610],{"class":291},[37,22451,3369],{"class":43},[37,22453,22454],{"class":39,"line":129},[37,22455,120],{"emptyLinePlaceholder":119},[37,22457,22458,22460],{"class":39,"line":171},[37,22459,3475],{"class":297},[37,22461,3478],{"class":43},[37,22463,22464],{"class":39,"line":221},[37,22465,8725],{"class":43},[37,22467,22468,22470,22472,22474,22476,22478],{"class":39,"line":231},[37,22469,3549],{"class":43},[37,22471,48],{"class":291},[37,22473,294],{"class":51},[37,22475,55],{"class":297},[37,22477,59],{"class":58},[37,22479,62],{"class":43},[37,22481,22482,22484,22486,22488,22490,22493,22495,22497,22500,22502,22504],{"class":39,"line":236},[37,22483,8738],{"class":43},[37,22485,78],{"class":291},[37,22487,1244],{"class":51},[37,22489,55],{"class":297},[37,22491,22492],{"class":58},"\"#ff6b6b\"",[37,22494,1252],{"class":51},[37,22496,55],{"class":297},[37,22498,22499],{"class":58},"\"#4ecdc4\"",[37,22501,321],{"class":51},[37,22503,55],{"class":297},[37,22505,22506],{"class":43},"{angle} />\n",[37,22508,22509,22511,22513],{"class":39,"line":242},[37,22510,8844],{"class":43},[37,22512,48],{"class":291},[37,22514,62],{"class":43},[37,22516,22517],{"class":39,"line":270},[37,22518,120],{"emptyLinePlaceholder":119},[37,22520,22521,22523],{"class":39,"line":1145},[37,22522,3549],{"class":43},[37,22524,22525],{"class":47},"input\n",[37,22527,22528,22531,22533],{"class":39,"line":1151},[37,22529,22530],{"class":51}," type",[37,22532,55],{"class":297},[37,22534,22535],{"class":58},"\"range\"\n",[37,22537,22538,22541,22543,22545,22547],{"class":39,"line":1157},[37,22539,22540],{"class":51}," min",[37,22542,55],{"class":297},[37,22544,326],{"class":43},[37,22546,6610],{"class":291},[37,22548,312],{"class":43},[37,22550,22551,22554,22556,22558,22561],{"class":39,"line":1162},[37,22552,22553],{"class":51}," max",[37,22555,55],{"class":297},[37,22557,326],{"class":43},[37,22559,22560],{"class":291},"360",[37,22562,312],{"class":43},[37,22564,22565,22568,22570],{"class":39,"line":1168},[37,22566,22567],{"class":51}," value",[37,22569,55],{"class":297},[37,22571,22572],{"class":43},"{angle}\n",[37,22574,22575,22578,22580,22582,22584,22586,22588,22590,22592],{"class":39,"line":1191},[37,22576,22577],{"class":51}," onChange",[37,22579,55],{"class":297},[37,22581,326],{"class":43},[37,22583,21916],{"class":8757},[37,22585,8760],{"class":297},[37,22587,8752],{"class":51},[37,22589,3364],{"class":43},[37,22591,21935],{"class":51},[37,22593,22594],{"class":43},"(e.target.value))}\n",[37,22596,22597],{"class":39,"line":1197},[37,22598,22599],{"class":43}," />\n",[37,22601,22602],{"class":39,"line":8929},[37,22603,8926],{"class":43},[37,22605,22606],{"class":39,"line":8934},[37,22607,3573],{"class":43},[37,22609,22610],{"class":39,"line":10007},[37,22611,312],{"class":43},[15,22613,21945,22614,22616],{},[34,22615,438],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,22618,21952,22619,21955],{},[2237,22620,2240],{"href":2239},[1202,22622,22624],{"id":22623},"using-with-nextjs-ssr","Using with Next.js / SSR",[15,22626,22627,22628,22632],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[2237,22629,22631],{"href":22630},"/docs/guide/react/ssr","Next.js / SSR"," guide for how to set it up with server-side rendering.",[1202,22634,2554],{"id":2553},[2556,22636,22637,22641,22645],{},[2559,22638,22639,2565],{},[2237,22640,2564],{"href":2563},[2559,22642,22643,2572],{},[2237,22644,2571],{"href":2570},[2559,22646,22647,2584],{},[2237,22648,2240],{"href":2239},[1311,22650,22651],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":32,"searchDepth":65,"depth":65,"links":22653},[22654,22655,22656,22657,22658,22659,22660],{"id":21403,"depth":65,"text":21404},{"id":22052,"depth":65,"text":22053},{"id":1442,"depth":65,"text":1443},{"id":1686,"depth":65,"text":1687},{"id":2231,"depth":65,"text":2232},{"id":22623,"depth":65,"text":22624},{"id":2553,"depth":65,"text":2554},"Install Shaders and build your first GPU-accelerated effect with React",{},"/docs/guide/react/quickstart",{"title":1332,"description":22661},"docs/guide/react/1.quickstart","eUXTjqH1sSIhKpDvkRJgcK9YGAu0Hqp7qDlza5DLZ5k",{"id":22668,"title":22631,"body":22669,"category":2984,"description":23560,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":23561,"meta":23562,"navigation":119,"path":22630,"seo":23563,"stem":23564,"__hash__":23565},"guide/docs/guide/react/ssr.md",{"type":8,"value":22670,"toc":23551},[22671,22675,22678,22685,22688,22797,22800,22890,22895,22905,22911,23036,23039,23043,23049,23167,23171,23174,23281,23372,23376,23379,23548],[11,22672,22674],{"id":22673},"ssr-with-nextjs-react","SSR with Next.js / React",[15,22676,22677],{},"Shaders uses WebGPU, which requires a browser environment and cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled React applications.",[1202,22679,22681,22682],{"id":22680},"app-router-use-client","App Router: ",[34,22683,22684],{},"'use client'",[15,22686,22687],{},"In Next.js App Router, create a client component wrapper:",[27,22689,22691],{"className":280,"code":22690,"language":282,"meta":32,"style":32},"// components/MyShader.jsx\n'use client'\n\nimport { Shader, LinearGradient, CursorTrail } from 'shaders/react'\n\nexport default function MyShader() {\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n \u003C/Shader>\n )\n}\n",[34,22692,22693,22698,22703,22707,22717,22721,22733,22739,22753,22773,22781,22789,22793],{"__ignoreMap":32},[37,22694,22695],{"class":39,"line":40},[37,22696,22697],{"class":68},"// components/MyShader.jsx\n",[37,22699,22700],{"class":39,"line":65},[37,22701,22702],{"class":58},"'use client'\n",[37,22704,22705],{"class":39,"line":72},[37,22706,120],{"emptyLinePlaceholder":119},[37,22708,22709,22711,22713,22715],{"class":39,"line":116},[37,22710,1382],{"class":297},[37,22712,1385],{"class":43},[37,22714,1388],{"class":297},[37,22716,1407],{"class":58},[37,22718,22719],{"class":39,"line":123},[37,22720,120],{"emptyLinePlaceholder":119},[37,22722,22723,22725,22727,22729,22731],{"class":39,"line":129},[37,22724,22417],{"class":297},[37,22726,22420],{"class":297},[37,22728,9871],{"class":297},[37,22730,22425],{"class":51},[37,22732,3384],{"class":43},[37,22734,22735,22737],{"class":39,"line":171},[37,22736,3475],{"class":297},[37,22738,3478],{"class":43},[37,22740,22741,22743,22745,22747,22749,22751],{"class":39,"line":221},[37,22742,174],{"class":43},[37,22744,48],{"class":291},[37,22746,294],{"class":51},[37,22748,55],{"class":297},[37,22750,59],{"class":58},[37,22752,62],{"class":43},[37,22754,22755,22757,22759,22761,22763,22765,22767,22769,22771],{"class":39,"line":231},[37,22756,3549],{"class":43},[37,22758,78],{"class":291},[37,22760,1244],{"class":51},[37,22762,55],{"class":297},[37,22764,1249],{"class":58},[37,22766,1252],{"class":51},[37,22768,55],{"class":297},[37,22770,1257],{"class":58},[37,22772,113],{"class":43},[37,22774,22775,22777,22779],{"class":39,"line":236},[37,22776,3549],{"class":43},[37,22778,1266],{"class":291},[37,22780,113],{"class":43},[37,22782,22783,22785,22787],{"class":39,"line":242},[37,22784,3564],{"class":43},[37,22786,48],{"class":291},[37,22788,62],{"class":43},[37,22790,22791],{"class":39,"line":270},[37,22792,3573],{"class":43},[37,22794,22795],{"class":39,"line":1145},[37,22796,312],{"class":43},[15,22798,22799],{},"Then use it in a Server Component:",[27,22801,22803],{"className":280,"code":22802,"language":282,"meta":32,"style":32},"// app/page.jsx (Server Component)\nimport MyShader from '@/components/MyShader'\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader />\n \u003Ch1>Your content\u003C/h1>\n \u003C/main>\n )\n}\n",[34,22804,22805,22810,22822,22826,22839,22845,22853,22862,22874,22882,22886],{"__ignoreMap":32},[37,22806,22807],{"class":39,"line":40},[37,22808,22809],{"class":68},"// app/page.jsx (Server Component)\n",[37,22811,22812,22814,22817,22819],{"class":39,"line":65},[37,22813,1382],{"class":297},[37,22815,22816],{"class":43}," MyShader ",[37,22818,1388],{"class":297},[37,22820,22821],{"class":58}," '@/components/MyShader'\n",[37,22823,22824],{"class":39,"line":72},[37,22825,120],{"emptyLinePlaceholder":119},[37,22827,22828,22830,22832,22834,22837],{"class":39,"line":116},[37,22829,22417],{"class":297},[37,22831,22420],{"class":297},[37,22833,9871],{"class":297},[37,22835,22836],{"class":51}," Page",[37,22838,3384],{"class":43},[37,22840,22841,22843],{"class":39,"line":123},[37,22842,3475],{"class":297},[37,22844,3478],{"class":43},[37,22846,22847,22849,22851],{"class":39,"line":129},[37,22848,174],{"class":43},[37,22850,10570],{"class":47},[37,22852,62],{"class":43},[37,22854,22855,22857,22860],{"class":39,"line":171},[37,22856,3549],{"class":43},[37,22858,22859],{"class":291},"MyShader",[37,22861,113],{"class":43},[37,22863,22864,22866,22868,22870,22872],{"class":39,"line":221},[37,22865,3549],{"class":43},[37,22867,11],{"class":47},[37,22869,10859],{"class":43},[37,22871,11],{"class":47},[37,22873,62],{"class":43},[37,22875,22876,22878,22880],{"class":39,"line":231},[37,22877,3564],{"class":43},[37,22879,10570],{"class":47},[37,22881,62],{"class":43},[37,22883,22884],{"class":39,"line":236},[37,22885,3573],{"class":43},[37,22887,22888],{"class":39,"line":242},[37,22889,312],{"class":43},[15,22891,2905,22892,22894],{},[34,22893,22684],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[1202,22896,22681,22898,22901,22902],{"id":22897},"app-router-nextdynamic-with-ssr-false",[34,22899,22900],{},"next/dynamic"," with ",[34,22903,22904],{},"ssr: false",[15,22906,22907,22908,22910],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[34,22909,22900],{}," to disable SSR:",[27,22912,22914],{"className":280,"code":22913,"language":282,"meta":32,"style":32},"// app/page.jsx\nimport dynamic from 'next/dynamic'\n\nconst MyShader = dynamic(\n () => import('@/components/MyShader'),\n { ssr: false }\n)\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader />\n \u003C/main>\n )\n}\n",[34,22915,22916,22921,22933,22937,22951,22969,22978,22982,22986,22998,23004,23012,23020,23028,23032],{"__ignoreMap":32},[37,22917,22918],{"class":39,"line":40},[37,22919,22920],{"class":68},"// app/page.jsx\n",[37,22922,22923,22925,22928,22930],{"class":39,"line":65},[37,22924,1382],{"class":297},[37,22926,22927],{"class":43}," dynamic ",[37,22929,1388],{"class":297},[37,22931,22932],{"class":58}," 'next/dynamic'\n",[37,22934,22935],{"class":39,"line":72},[37,22936,120],{"emptyLinePlaceholder":119},[37,22938,22939,22941,22943,22945,22948],{"class":39,"line":116},[37,22940,2809],{"class":297},[37,22942,22425],{"class":291},[37,22944,2815],{"class":297},[37,22946,22947],{"class":51}," dynamic",[37,22949,22950],{"class":43},"(\n",[37,22952,22953,22956,22958,22961,22963,22966],{"class":39,"line":123},[37,22954,22955],{"class":43}," () ",[37,22957,3498],{"class":297},[37,22959,22960],{"class":297}," import",[37,22962,3364],{"class":43},[37,22964,22965],{"class":58},"'@/components/MyShader'",[37,22967,22968],{"class":43},"),\n",[37,22970,22971,22974,22976],{"class":39,"line":129},[37,22972,22973],{"class":43}," { ssr: ",[37,22975,390],{"class":291},[37,22977,13657],{"class":43},[37,22979,22980],{"class":39,"line":171},[37,22981,3369],{"class":43},[37,22983,22984],{"class":39,"line":221},[37,22985,120],{"emptyLinePlaceholder":119},[37,22987,22988,22990,22992,22994,22996],{"class":39,"line":231},[37,22989,22417],{"class":297},[37,22991,22420],{"class":297},[37,22993,9871],{"class":297},[37,22995,22836],{"class":51},[37,22997,3384],{"class":43},[37,22999,23000,23002],{"class":39,"line":236},[37,23001,3475],{"class":297},[37,23003,3478],{"class":43},[37,23005,23006,23008,23010],{"class":39,"line":242},[37,23007,174],{"class":43},[37,23009,10570],{"class":47},[37,23011,62],{"class":43},[37,23013,23014,23016,23018],{"class":39,"line":270},[37,23015,3549],{"class":43},[37,23017,22859],{"class":291},[37,23019,113],{"class":43},[37,23021,23022,23024,23026],{"class":39,"line":1145},[37,23023,3564],{"class":43},[37,23025,10570],{"class":47},[37,23027,62],{"class":43},[37,23029,23030],{"class":39,"line":1151},[37,23031,3573],{"class":43},[37,23033,23034],{"class":39,"line":1157},[37,23035,312],{"class":43},[15,23037,23038],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[1202,23040,23042],{"id":23041},"pages-router","Pages Router",[15,23044,23045,23046,23048],{},"In the Pages Router, the same ",[34,23047,22900],{}," approach works:",[27,23050,23052],{"className":280,"code":23051,"language":282,"meta":32,"style":32},"// pages/index.jsx\nimport dynamic from 'next/dynamic'\n\nconst MyShader = dynamic(\n () => import('../components/MyShader'),\n { ssr: false }\n)\n\nexport default function Home() {\n return (\n \u003Cdiv>\n \u003CMyShader />\n \u003C/div>\n )\n}\n",[34,23053,23054,23059,23069,23073,23085,23100,23108,23112,23116,23129,23135,23143,23151,23159,23163],{"__ignoreMap":32},[37,23055,23056],{"class":39,"line":40},[37,23057,23058],{"class":68},"// pages/index.jsx\n",[37,23060,23061,23063,23065,23067],{"class":39,"line":65},[37,23062,1382],{"class":297},[37,23064,22927],{"class":43},[37,23066,1388],{"class":297},[37,23068,22932],{"class":58},[37,23070,23071],{"class":39,"line":72},[37,23072,120],{"emptyLinePlaceholder":119},[37,23074,23075,23077,23079,23081,23083],{"class":39,"line":116},[37,23076,2809],{"class":297},[37,23078,22425],{"class":291},[37,23080,2815],{"class":297},[37,23082,22947],{"class":51},[37,23084,22950],{"class":43},[37,23086,23087,23089,23091,23093,23095,23098],{"class":39,"line":123},[37,23088,22955],{"class":43},[37,23090,3498],{"class":297},[37,23092,22960],{"class":297},[37,23094,3364],{"class":43},[37,23096,23097],{"class":58},"'../components/MyShader'",[37,23099,22968],{"class":43},[37,23101,23102,23104,23106],{"class":39,"line":129},[37,23103,22973],{"class":43},[37,23105,390],{"class":291},[37,23107,13657],{"class":43},[37,23109,23110],{"class":39,"line":171},[37,23111,3369],{"class":43},[37,23113,23114],{"class":39,"line":221},[37,23115,120],{"emptyLinePlaceholder":119},[37,23117,23118,23120,23122,23124,23127],{"class":39,"line":231},[37,23119,22417],{"class":297},[37,23121,22420],{"class":297},[37,23123,9871],{"class":297},[37,23125,23126],{"class":51}," Home",[37,23128,3384],{"class":43},[37,23130,23131,23133],{"class":39,"line":236},[37,23132,3475],{"class":297},[37,23134,3478],{"class":43},[37,23136,23137,23139,23141],{"class":39,"line":242},[37,23138,174],{"class":43},[37,23140,8499],{"class":47},[37,23142,62],{"class":43},[37,23144,23145,23147,23149],{"class":39,"line":270},[37,23146,3549],{"class":43},[37,23148,22859],{"class":291},[37,23150,113],{"class":43},[37,23152,23153,23155,23157],{"class":39,"line":1145},[37,23154,3564],{"class":43},[37,23156,8499],{"class":47},[37,23158,62],{"class":43},[37,23160,23161],{"class":39,"line":1151},[37,23162,3573],{"class":43},[37,23164,23165],{"class":39,"line":1157},[37,23166,312],{"class":43},[1202,23168,23170],{"id":23169},"in-a-root-layout","In a root layout",[15,23172,23173],{},"If you want a shader to appear across all pages (for example, a full-page background), add it to your root layout as a client component:",[27,23175,23177],{"className":280,"code":23176,"language":282,"meta":32,"style":32},"// app/layout.jsx\nimport BackgroundShader from '@/components/BackgroundShader'\n\nexport default function RootLayout({ children }) {\n return (\n \u003Chtml>\n \u003Cbody>\n \u003CBackgroundShader />\n {children}\n \u003C/body>\n \u003C/html>\n )\n}\n",[34,23178,23179,23184,23196,23200,23220,23226,23234,23243,23252,23257,23265,23273,23277],{"__ignoreMap":32},[37,23180,23181],{"class":39,"line":40},[37,23182,23183],{"class":68},"// app/layout.jsx\n",[37,23185,23186,23188,23191,23193],{"class":39,"line":65},[37,23187,1382],{"class":297},[37,23189,23190],{"class":43}," BackgroundShader ",[37,23192,1388],{"class":297},[37,23194,23195],{"class":58}," '@/components/BackgroundShader'\n",[37,23197,23198],{"class":39,"line":72},[37,23199,120],{"emptyLinePlaceholder":119},[37,23201,23202,23204,23206,23208,23211,23214,23217],{"class":39,"line":116},[37,23203,22417],{"class":297},[37,23205,22420],{"class":297},[37,23207,9871],{"class":297},[37,23209,23210],{"class":51}," RootLayout",[37,23212,23213],{"class":43},"({ ",[37,23215,23216],{"class":8757},"children",[37,23218,23219],{"class":43}," }) {\n",[37,23221,23222,23224],{"class":39,"line":123},[37,23223,3475],{"class":297},[37,23225,3478],{"class":43},[37,23227,23228,23230,23232],{"class":39,"line":129},[37,23229,174],{"class":43},[37,23231,10813],{"class":47},[37,23233,62],{"class":43},[37,23235,23236,23238,23241],{"class":39,"line":171},[37,23237,3549],{"class":43},[37,23239,23240],{"class":47},"body",[37,23242,62],{"class":43},[37,23244,23245,23247,23250],{"class":39,"line":221},[37,23246,8738],{"class":43},[37,23248,23249],{"class":291},"BackgroundShader",[37,23251,113],{"class":43},[37,23253,23254],{"class":39,"line":231},[37,23255,23256],{"class":43}," {children}\n",[37,23258,23259,23261,23263],{"class":39,"line":236},[37,23260,8844],{"class":43},[37,23262,23240],{"class":47},[37,23264,62],{"class":43},[37,23266,23267,23269,23271],{"class":39,"line":242},[37,23268,3564],{"class":43},[37,23270,10813],{"class":47},[37,23272,62],{"class":43},[37,23274,23275],{"class":39,"line":270},[37,23276,3573],{"class":43},[37,23278,23279],{"class":39,"line":1145},[37,23280,312],{"class":43},[27,23282,23284],{"className":280,"code":23283,"language":282,"meta":32,"style":32},"// components/BackgroundShader.jsx\n'use client'\n\nimport { Shader, Aurora } from 'shaders/react'\n\nexport default function BackgroundShader() {\n return (\n \u003CShader className=\"fixed inset-0 -z-10 pointer-events-none\">\n \u003CAurora />\n \u003C/Shader>\n )\n}\n",[34,23285,23286,23291,23295,23299,23310,23314,23327,23333,23348,23356,23364,23368],{"__ignoreMap":32},[37,23287,23288],{"class":39,"line":40},[37,23289,23290],{"class":68},"// components/BackgroundShader.jsx\n",[37,23292,23293],{"class":39,"line":65},[37,23294,22702],{"class":58},[37,23296,23297],{"class":39,"line":72},[37,23298,120],{"emptyLinePlaceholder":119},[37,23300,23301,23303,23306,23308],{"class":39,"line":116},[37,23302,1382],{"class":297},[37,23304,23305],{"class":43}," { Shader, Aurora } ",[37,23307,1388],{"class":297},[37,23309,1407],{"class":58},[37,23311,23312],{"class":39,"line":123},[37,23313,120],{"emptyLinePlaceholder":119},[37,23315,23316,23318,23320,23322,23325],{"class":39,"line":129},[37,23317,22417],{"class":297},[37,23319,22420],{"class":297},[37,23321,9871],{"class":297},[37,23323,23324],{"class":51}," BackgroundShader",[37,23326,3384],{"class":43},[37,23328,23329,23331],{"class":39,"line":171},[37,23330,3475],{"class":297},[37,23332,3478],{"class":43},[37,23334,23335,23337,23339,23341,23343,23346],{"class":39,"line":221},[37,23336,174],{"class":43},[37,23338,48],{"class":291},[37,23340,294],{"class":51},[37,23342,55],{"class":297},[37,23344,23345],{"class":58},"\"fixed inset-0 -z-10 pointer-events-none\"",[37,23347,62],{"class":43},[37,23349,23350,23352,23354],{"class":39,"line":231},[37,23351,3549],{"class":43},[37,23353,10549],{"class":291},[37,23355,113],{"class":43},[37,23357,23358,23360,23362],{"class":39,"line":236},[37,23359,3564],{"class":43},[37,23361,48],{"class":291},[37,23363,62],{"class":43},[37,23365,23366],{"class":39,"line":242},[37,23367,3573],{"class":43},[37,23369,23370],{"class":39,"line":270},[37,23371,312],{"class":43},[1202,23373,23375],{"id":23374},"react-without-nextjs","React (without Next.js)",[15,23377,23378],{},"In a React SSR setup without Next.js, use a mounted state guard:",[27,23380,23382],{"className":280,"code":23381,"language":282,"meta":32,"style":32},"import { useState, useEffect } from 'react'\nimport { Shader, LinearGradient } from 'shaders/react'\n\nexport default function MyShader() {\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n setMounted(true)\n }, [])\n\n if (!mounted) return null\n\n return (\n \u003CShader className=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n )\n}\n",[34,23383,23384,23395,23405,23409,23421,23447,23451,23461,23472,23476,23480,23500,23504,23510,23524,23532,23540,23544],{"__ignoreMap":32},[37,23385,23386,23388,23391,23393],{"class":39,"line":40},[37,23387,1382],{"class":297},[37,23389,23390],{"class":43}," { useState, useEffect } ",[37,23392,1388],{"class":297},[37,23394,3423],{"class":58},[37,23396,23397,23399,23401,23403],{"class":39,"line":65},[37,23398,1382],{"class":297},[37,23400,22404],{"class":43},[37,23402,1388],{"class":297},[37,23404,1407],{"class":58},[37,23406,23407],{"class":39,"line":72},[37,23408,120],{"emptyLinePlaceholder":119},[37,23410,23411,23413,23415,23417,23419],{"class":39,"line":116},[37,23412,22417],{"class":297},[37,23414,22420],{"class":297},[37,23416,9871],{"class":297},[37,23418,22425],{"class":51},[37,23420,3384],{"class":43},[37,23422,23423,23425,23427,23430,23432,23435,23437,23439,23441,23443,23445],{"class":39,"line":123},[37,23424,3441],{"class":297},[37,23426,3444],{"class":43},[37,23428,23429],{"class":291},"mounted",[37,23431,2961],{"class":43},[37,23433,23434],{"class":291},"setMounted",[37,23436,3455],{"class":43},[37,23438,55],{"class":297},[37,23440,3460],{"class":51},[37,23442,3364],{"class":43},[37,23444,390],{"class":291},[37,23446,3369],{"class":43},[37,23448,23449],{"class":39,"line":129},[37,23450,120],{"emptyLinePlaceholder":119},[37,23452,23453,23455,23457,23459],{"class":39,"line":171},[37,23454,14268],{"class":51},[37,23456,14028],{"class":43},[37,23458,3498],{"class":297},[37,23460,3976],{"class":43},[37,23462,23463,23466,23468,23470],{"class":39,"line":221},[37,23464,23465],{"class":51}," setMounted",[37,23467,3364],{"class":43},[37,23469,3076],{"class":291},[37,23471,3369],{"class":43},[37,23473,23474],{"class":39,"line":231},[37,23475,14362],{"class":43},[37,23477,23478],{"class":39,"line":236},[37,23479,120],{"emptyLinePlaceholder":119},[37,23481,23482,23485,23488,23491,23494,23497],{"class":39,"line":242},[37,23483,23484],{"class":297}," if",[37,23486,23487],{"class":43}," (",[37,23489,23490],{"class":297},"!",[37,23492,23493],{"class":43},"mounted) ",[37,23495,23496],{"class":297},"return",[37,23498,23499],{"class":291}," null\n",[37,23501,23502],{"class":39,"line":270},[37,23503,120],{"emptyLinePlaceholder":119},[37,23505,23506,23508],{"class":39,"line":1145},[37,23507,3475],{"class":297},[37,23509,3478],{"class":43},[37,23511,23512,23514,23516,23518,23520,23522],{"class":39,"line":1151},[37,23513,174],{"class":43},[37,23515,48],{"class":291},[37,23517,294],{"class":51},[37,23519,55],{"class":297},[37,23521,59],{"class":58},[37,23523,62],{"class":43},[37,23525,23526,23528,23530],{"class":39,"line":1157},[37,23527,3549],{"class":43},[37,23529,78],{"class":291},[37,23531,113],{"class":43},[37,23533,23534,23536,23538],{"class":39,"line":1162},[37,23535,3564],{"class":43},[37,23537,48],{"class":291},[37,23539,62],{"class":43},[37,23541,23542],{"class":39,"line":1168},[37,23543,3573],{"class":43},[37,23545,23546],{"class":39,"line":1191},[37,23547,312],{"class":43},[1311,23549,23550],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":32,"searchDepth":65,"depth":65,"links":23552},[23553,23555,23557,23558,23559],{"id":22680,"depth":65,"text":23554},"App Router: 'use client'",{"id":22897,"depth":65,"text":23556},"App Router: next/dynamic with ssr: false",{"id":23041,"depth":65,"text":23042},{"id":23169,"depth":65,"text":23170},{"id":23374,"depth":65,"text":23375},"Using Shaders in Next.js and React SSR applications","server",{},{"title":22631,"description":23560},"docs/guide/react/ssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":23567,"title":1332,"body":23568,"category":1320,"description":24177,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":2600,"meta":24178,"navigation":119,"path":24179,"seo":24180,"stem":24181,"__hash__":24182},"guide/docs/guide/solid/1.quickstart.md",{"type":8,"value":23569,"toc":24168},[23570,23574,23576,23588,23590,23604,23606,23608,23662,23664,23670,23672,23683,23816,23826,23828,23831,23903,23910,24133,24136,24140,24144,24150,24152,24166],[11,23571,23573],{"id":23572},"quickstart-solid","Quickstart (Solid)",[1202,23575,21404],{"id":21403},[27,23577,23578],{"className":1344,"code":1345,"language":1346,"meta":32,"style":32},[34,23579,23580],{"__ignoreMap":32},[37,23581,23582,23584,23586],{"class":39,"line":40},[37,23583,1353],{"class":51},[37,23585,1356],{"class":58},[37,23587,1359],{"class":58},[1202,23589,22053],{"id":22052},[27,23591,23592],{"className":987,"code":1426,"language":989,"meta":32,"style":32},[34,23593,23594],{"__ignoreMap":32},[37,23595,23596,23598,23600,23602],{"class":39,"line":40},[37,23597,1382],{"class":297},[37,23599,1385],{"class":43},[37,23601,1388],{"class":297},[37,23603,1439],{"class":58},[1202,23605,1443],{"id":1442},[15,23607,22072],{},[27,23609,23610],{"className":543,"code":1454,"language":545,"meta":32,"style":32},[34,23611,23612,23626,23646,23654],{"__ignoreMap":32},[37,23613,23614,23616,23618,23620,23622,23624],{"class":39,"line":40},[37,23615,44],{"class":43},[37,23617,48],{"class":291},[37,23619,52],{"class":51},[37,23621,55],{"class":297},[37,23623,59],{"class":58},[37,23625,62],{"class":43},[37,23627,23628,23630,23632,23634,23636,23638,23640,23642,23644],{"class":39,"line":65},[37,23629,75],{"class":43},[37,23631,78],{"class":291},[37,23633,1244],{"class":51},[37,23635,55],{"class":297},[37,23637,1249],{"class":58},[37,23639,1252],{"class":51},[37,23641,55],{"class":297},[37,23643,1257],{"class":58},[37,23645,113],{"class":43},[37,23647,23648,23650,23652],{"class":39,"line":72},[37,23649,75],{"class":43},[37,23651,1266],{"class":291},[37,23653,113],{"class":43},[37,23655,23656,23658,23660],{"class":39,"line":116},[37,23657,273],{"class":43},[37,23659,48],{"class":291},[37,23661,62],{"class":43},[19,23663],{":preset":1672},[15,23665,23666,1677,23668,22135],{},[34,23667,1296],{},[34,23669,1214],{},[1202,23671,1687],{"id":1686},[15,23673,2905,23674,22142,23676,16460,23679,22148,23681,1683],{},[34,23675,1214],{},[34,23677,23678],{},"class",[34,23680,1311],{},[34,23682,1296],{},[27,23684,23686],{"className":543,"code":23685,"language":545,"meta":32,"style":32},"{/* Fill the viewport */}\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Fixed dimensions */}\n\u003CShader style={{ width: '600px', height: '400px' }}>\n \u003CLinearGradient />\n\u003C/Shader>\n\n{/* Fluid with aspect ratio */}\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,23687,23688,23696,23710,23718,23726,23730,23738,23758,23766,23774,23778,23786,23800,23808],{"__ignoreMap":32},[37,23689,23690,23692,23694],{"class":39,"line":40},[37,23691,326],{"class":43},[37,23693,1826],{"class":68},[37,23695,312],{"class":43},[37,23697,23698,23700,23702,23704,23706,23708],{"class":39,"line":65},[37,23699,44],{"class":43},[37,23701,48],{"class":291},[37,23703,52],{"class":51},[37,23705,55],{"class":297},[37,23707,1715],{"class":58},[37,23709,62],{"class":43},[37,23711,23712,23714,23716],{"class":39,"line":72},[37,23713,75],{"class":43},[37,23715,78],{"class":291},[37,23717,113],{"class":43},[37,23719,23720,23722,23724],{"class":39,"line":116},[37,23721,273],{"class":43},[37,23723,48],{"class":291},[37,23725,62],{"class":43},[37,23727,23728],{"class":39,"line":123},[37,23729,120],{"emptyLinePlaceholder":119},[37,23731,23732,23734,23736],{"class":39,"line":129},[37,23733,326],{"class":43},[37,23735,1869],{"class":68},[37,23737,312],{"class":43},[37,23739,23740,23742,23744,23746,23748,23750,23752,23754,23756],{"class":39,"line":171},[37,23741,44],{"class":43},[37,23743,48],{"class":291},[37,23745,1751],{"class":51},[37,23747,55],{"class":297},[37,23749,1884],{"class":43},[37,23751,1887],{"class":58},[37,23753,1890],{"class":43},[37,23755,1893],{"class":58},[37,23757,1896],{"class":43},[37,23759,23760,23762,23764],{"class":39,"line":221},[37,23761,75],{"class":43},[37,23763,78],{"class":291},[37,23765,113],{"class":43},[37,23767,23768,23770,23772],{"class":39,"line":231},[37,23769,273],{"class":43},[37,23771,48],{"class":291},[37,23773,62],{"class":43},[37,23775,23776],{"class":39,"line":236},[37,23777,120],{"emptyLinePlaceholder":119},[37,23779,23780,23782,23784],{"class":39,"line":242},[37,23781,326],{"class":43},[37,23783,22252],{"class":68},[37,23785,312],{"class":43},[37,23787,23788,23790,23792,23794,23796,23798],{"class":39,"line":270},[37,23789,44],{"class":43},[37,23791,48],{"class":291},[37,23793,52],{"class":51},[37,23795,55],{"class":297},[37,23797,1796],{"class":58},[37,23799,62],{"class":43},[37,23801,23802,23804,23806],{"class":39,"line":1145},[37,23803,75],{"class":43},[37,23805,78],{"class":291},[37,23807,113],{"class":43},[37,23809,23810,23812,23814],{"class":39,"line":1151},[37,23811,273],{"class":43},[37,23813,48],{"class":291},[37,23815,62],{"class":43},[15,23817,22287,23818,16460,23820,22292,23822,22295,23824,22298],{},[34,23819,23678],{},[34,23821,1311],{},[34,23823,1296],{},[34,23825,1214],{},[1202,23827,2232],{"id":2231},[15,23829,23830],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[27,23832,23833],{"className":543,"code":2401,"language":545,"meta":32,"style":32},[34,23834,23835,23849,23855,23863,23871,23883,23891,23895],{"__ignoreMap":32},[37,23836,23837,23839,23841,23843,23845,23847],{"class":39,"line":40},[37,23838,44],{"class":43},[37,23840,48],{"class":291},[37,23842,52],{"class":51},[37,23844,55],{"class":297},[37,23846,59],{"class":58},[37,23848,62],{"class":43},[37,23850,23851,23853],{"class":39,"line":65},[37,23852,75],{"class":43},[37,23854,2269],{"class":291},[37,23856,23857,23859,23861],{"class":39,"line":72},[37,23858,2274],{"class":51},[37,23860,55],{"class":297},[37,23862,2279],{"class":58},[37,23864,23865,23867,23869],{"class":39,"line":116},[37,23866,2284],{"class":51},[37,23868,55],{"class":297},[37,23870,2289],{"class":58},[37,23872,23873,23875,23877,23879,23881],{"class":39,"line":123},[37,23874,2368],{"class":51},[37,23876,55],{"class":297},[37,23878,326],{"class":43},[37,23880,2375],{"class":291},[37,23882,312],{"class":43},[37,23884,23885,23887,23889],{"class":39,"line":129},[37,23886,2382],{"class":51},[37,23888,55],{"class":297},[37,23890,2309],{"class":58},[37,23892,23893],{"class":39,"line":171},[37,23894,2314],{"class":43},[37,23896,23897,23899,23901],{"class":39,"line":221},[37,23898,273],{"class":43},[37,23900,48],{"class":291},[37,23902,62],{"class":43},[15,23904,23905,23906,23909],{},"Props also accept signals — ",[34,23907,23908],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[27,23911,23913],{"className":543,"code":23912,"language":545,"meta":32,"style":32},"import { createSignal } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders/solid'\n\nexport default function MyShader() {\n const [angle, setAngle] = createSignal(0)\n\n return (\n \u003C>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" angle={angle()} />\n \u003C/Shader>\n\n \u003Cinput\n type=\"range\"\n min={0}\n max={360}\n value={angle()}\n onInput={e => setAngle(Number(e.currentTarget.value))}\n />\n \u003C/>\n )\n}\n",[34,23914,23915,23925,23935,23939,23951,23975,23979,23985,23989,24003,24032,24040,24044,24050,24058,24070,24082,24095,24117,24121,24125,24129],{"__ignoreMap":32},[37,23916,23917,23919,23921,23923],{"class":39,"line":40},[37,23918,1382],{"class":297},[37,23920,3717],{"class":43},[37,23922,1388],{"class":297},[37,23924,3722],{"class":58},[37,23926,23927,23929,23931,23933],{"class":39,"line":65},[37,23928,1382],{"class":297},[37,23930,22404],{"class":43},[37,23932,1388],{"class":297},[37,23934,1439],{"class":58},[37,23936,23937],{"class":39,"line":72},[37,23938,120],{"emptyLinePlaceholder":119},[37,23940,23941,23943,23945,23947,23949],{"class":39,"line":116},[37,23942,22417],{"class":297},[37,23944,22420],{"class":297},[37,23946,9871],{"class":297},[37,23948,22425],{"class":51},[37,23950,3384],{"class":43},[37,23952,23953,23955,23957,23959,23961,23963,23965,23967,23969,23971,23973],{"class":39,"line":123},[37,23954,3441],{"class":297},[37,23956,3444],{"class":43},[37,23958,438],{"class":291},[37,23960,2961],{"class":43},[37,23962,8698],{"class":291},[37,23964,3455],{"class":43},[37,23966,55],{"class":297},[37,23968,3753],{"class":51},[37,23970,3364],{"class":43},[37,23972,6610],{"class":291},[37,23974,3369],{"class":43},[37,23976,23977],{"class":39,"line":129},[37,23978,120],{"emptyLinePlaceholder":119},[37,23980,23981,23983],{"class":39,"line":171},[37,23982,3475],{"class":297},[37,23984,3478],{"class":43},[37,23986,23987],{"class":39,"line":221},[37,23988,8725],{"class":43},[37,23990,23991,23993,23995,23997,23999,24001],{"class":39,"line":231},[37,23992,3549],{"class":43},[37,23994,48],{"class":291},[37,23996,52],{"class":51},[37,23998,55],{"class":297},[37,24000,59],{"class":58},[37,24002,62],{"class":43},[37,24004,24005,24007,24009,24011,24013,24015,24017,24019,24021,24023,24025,24027,24029],{"class":39,"line":236},[37,24006,8738],{"class":43},[37,24008,78],{"class":291},[37,24010,1244],{"class":51},[37,24012,55],{"class":297},[37,24014,22492],{"class":58},[37,24016,1252],{"class":51},[37,24018,55],{"class":297},[37,24020,22499],{"class":58},[37,24022,321],{"class":51},[37,24024,55],{"class":297},[37,24026,326],{"class":43},[37,24028,438],{"class":51},[37,24030,24031],{"class":43},"()} />\n",[37,24033,24034,24036,24038],{"class":39,"line":242},[37,24035,8844],{"class":43},[37,24037,48],{"class":291},[37,24039,62],{"class":43},[37,24041,24042],{"class":39,"line":270},[37,24043,120],{"emptyLinePlaceholder":119},[37,24045,24046,24048],{"class":39,"line":1145},[37,24047,3549],{"class":43},[37,24049,22525],{"class":47},[37,24051,24052,24054,24056],{"class":39,"line":1151},[37,24053,22530],{"class":51},[37,24055,55],{"class":297},[37,24057,22535],{"class":58},[37,24059,24060,24062,24064,24066,24068],{"class":39,"line":1157},[37,24061,22540],{"class":51},[37,24063,55],{"class":297},[37,24065,326],{"class":43},[37,24067,6610],{"class":291},[37,24069,312],{"class":43},[37,24071,24072,24074,24076,24078,24080],{"class":39,"line":1162},[37,24073,22553],{"class":51},[37,24075,55],{"class":297},[37,24077,326],{"class":43},[37,24079,22560],{"class":291},[37,24081,312],{"class":43},[37,24083,24084,24086,24088,24090,24092],{"class":39,"line":1168},[37,24085,22567],{"class":51},[37,24087,55],{"class":297},[37,24089,326],{"class":43},[37,24091,438],{"class":51},[37,24093,24094],{"class":43},"()}\n",[37,24096,24097,24100,24102,24104,24106,24108,24110,24112,24114],{"class":39,"line":1191},[37,24098,24099],{"class":51}," onInput",[37,24101,55],{"class":297},[37,24103,326],{"class":43},[37,24105,21916],{"class":8757},[37,24107,8760],{"class":297},[37,24109,8752],{"class":51},[37,24111,3364],{"class":43},[37,24113,21935],{"class":51},[37,24115,24116],{"class":43},"(e.currentTarget.value))}\n",[37,24118,24119],{"class":39,"line":1197},[37,24120,22599],{"class":43},[37,24122,24123],{"class":39,"line":8929},[37,24124,8926],{"class":43},[37,24126,24127],{"class":39,"line":8934},[37,24128,3573],{"class":43},[37,24130,24131],{"class":39,"line":10007},[37,24132,312],{"class":43},[15,24134,24135],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,24137,21952,24138,21955],{},[2237,24139,2240],{"href":2239},[1202,24141,24143],{"id":24142},"using-with-solidstart-ssr","Using with SolidStart / SSR",[15,24145,22627,24146,22632],{},[2237,24147,24149],{"href":24148},"/docs/guide/solid/ssr","SolidStart / SSR",[1202,24151,2554],{"id":2553},[2556,24153,24154,24158,24162],{},[2559,24155,24156,2565],{},[2237,24157,2564],{"href":2563},[2559,24159,24160,2572],{},[2237,24161,2571],{"href":2570},[2559,24163,24164,2584],{},[2237,24165,2240],{"href":2239},[1311,24167,22651],{},{"title":32,"searchDepth":65,"depth":65,"links":24169},[24170,24171,24172,24173,24174,24175,24176],{"id":21403,"depth":65,"text":21404},{"id":22052,"depth":65,"text":22053},{"id":1442,"depth":65,"text":1443},{"id":1686,"depth":65,"text":1687},{"id":2231,"depth":65,"text":2232},{"id":24142,"depth":65,"text":24143},{"id":2553,"depth":65,"text":2554},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"/docs/guide/solid/quickstart",{"title":1332,"description":24177},"docs/guide/solid/1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":24184,"title":24149,"body":24185,"category":2984,"description":24756,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":23561,"meta":24757,"navigation":119,"path":24148,"seo":24758,"stem":24759,"__hash__":24760},"guide/docs/guide/solid/ssr.md",{"type":8,"value":24186,"toc":24747},[24187,24191,24194,24201,24207,24298,24414,24426,24433,24442,24544,24550,24556,24734,24738,24744],[11,24188,24190],{"id":24189},"ssr-with-solidstart-solid","SSR with SolidStart / Solid",[15,24192,24193],{},"Shaders uses WebGPU, which requires a browser environment and cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled Solid applications.",[1202,24195,24197,24200],{"id":24196},"clientonly-solidstart",[34,24198,24199],{},"clientOnly"," (SolidStart)",[15,24202,24203,24204,24206],{},"SolidStart provides a ",[34,24205,24199],{}," utility that defers a component entirely to the client. This is the recommended approach:",[27,24208,24210],{"className":280,"code":24209,"language":282,"meta":32,"style":32},"// components/MyShader.jsx\nimport { Shader, LinearGradient } from 'shaders/solid'\n\nexport default function MyShader() {\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003C/Shader>\n )\n}\n",[34,24211,24212,24216,24226,24230,24242,24248,24262,24282,24290,24294],{"__ignoreMap":32},[37,24213,24214],{"class":39,"line":40},[37,24215,22697],{"class":68},[37,24217,24218,24220,24222,24224],{"class":39,"line":65},[37,24219,1382],{"class":297},[37,24221,22404],{"class":43},[37,24223,1388],{"class":297},[37,24225,1439],{"class":58},[37,24227,24228],{"class":39,"line":72},[37,24229,120],{"emptyLinePlaceholder":119},[37,24231,24232,24234,24236,24238,24240],{"class":39,"line":116},[37,24233,22417],{"class":297},[37,24235,22420],{"class":297},[37,24237,9871],{"class":297},[37,24239,22425],{"class":51},[37,24241,3384],{"class":43},[37,24243,24244,24246],{"class":39,"line":123},[37,24245,3475],{"class":297},[37,24247,3478],{"class":43},[37,24249,24250,24252,24254,24256,24258,24260],{"class":39,"line":129},[37,24251,174],{"class":43},[37,24253,48],{"class":291},[37,24255,52],{"class":51},[37,24257,55],{"class":297},[37,24259,59],{"class":58},[37,24261,62],{"class":43},[37,24263,24264,24266,24268,24270,24272,24274,24276,24278,24280],{"class":39,"line":171},[37,24265,3549],{"class":43},[37,24267,78],{"class":291},[37,24269,1244],{"class":51},[37,24271,55],{"class":297},[37,24273,1249],{"class":58},[37,24275,1252],{"class":51},[37,24277,55],{"class":297},[37,24279,1257],{"class":58},[37,24281,113],{"class":43},[37,24283,24284,24286,24288],{"class":39,"line":221},[37,24285,3564],{"class":43},[37,24287,48],{"class":291},[37,24289,62],{"class":43},[37,24291,24292],{"class":39,"line":231},[37,24293,3573],{"class":43},[37,24295,24296],{"class":39,"line":236},[37,24297,312],{"class":43},[27,24299,24301],{"className":280,"code":24300,"language":282,"meta":32,"style":32},"// routes/index.jsx\nimport { clientOnly } from '@solidjs/start'\n\nconst MyShader = clientOnly(() => import('../components/MyShader'))\n\nexport default function Page() {\n return (\n \u003Cmain>\n \u003CMyShader />\n \u003Ch1>Your content\u003C/h1>\n \u003C/main>\n )\n}\n",[34,24302,24303,24308,24320,24324,24348,24352,24364,24370,24378,24386,24398,24406,24410],{"__ignoreMap":32},[37,24304,24305],{"class":39,"line":40},[37,24306,24307],{"class":68},"// routes/index.jsx\n",[37,24309,24310,24312,24315,24317],{"class":39,"line":65},[37,24311,1382],{"class":297},[37,24313,24314],{"class":43}," { clientOnly } ",[37,24316,1388],{"class":297},[37,24318,24319],{"class":58}," '@solidjs/start'\n",[37,24321,24322],{"class":39,"line":72},[37,24323,120],{"emptyLinePlaceholder":119},[37,24325,24326,24328,24330,24332,24335,24337,24339,24341,24343,24345],{"class":39,"line":116},[37,24327,2809],{"class":297},[37,24329,22425],{"class":291},[37,24331,2815],{"class":297},[37,24333,24334],{"class":51}," clientOnly",[37,24336,14028],{"class":43},[37,24338,3498],{"class":297},[37,24340,22960],{"class":297},[37,24342,3364],{"class":43},[37,24344,23097],{"class":58},[37,24346,24347],{"class":43},"))\n",[37,24349,24350],{"class":39,"line":123},[37,24351,120],{"emptyLinePlaceholder":119},[37,24353,24354,24356,24358,24360,24362],{"class":39,"line":129},[37,24355,22417],{"class":297},[37,24357,22420],{"class":297},[37,24359,9871],{"class":297},[37,24361,22836],{"class":51},[37,24363,3384],{"class":43},[37,24365,24366,24368],{"class":39,"line":171},[37,24367,3475],{"class":297},[37,24369,3478],{"class":43},[37,24371,24372,24374,24376],{"class":39,"line":221},[37,24373,174],{"class":43},[37,24375,10570],{"class":47},[37,24377,62],{"class":43},[37,24379,24380,24382,24384],{"class":39,"line":231},[37,24381,3549],{"class":43},[37,24383,22859],{"class":291},[37,24385,113],{"class":43},[37,24387,24388,24390,24392,24394,24396],{"class":39,"line":236},[37,24389,3549],{"class":43},[37,24391,11],{"class":47},[37,24393,10859],{"class":43},[37,24395,11],{"class":47},[37,24397,62],{"class":43},[37,24399,24400,24402,24404],{"class":39,"line":242},[37,24401,3564],{"class":43},[37,24403,10570],{"class":47},[37,24405,62],{"class":43},[37,24407,24408],{"class":39,"line":270},[37,24409,3573],{"class":43},[37,24411,24412],{"class":39,"line":1145},[37,24413,312],{"class":43},[15,24415,24416,24418,24419,24422,24423,24425],{},[34,24417,24199],{}," wraps the component in a ",[34,24420,24421],{},"Suspense"," boundary and only renders it in the browser — it returns ",[34,24424,14257],{}," during SSR.",[1202,24427,24429,24432],{"id":24428},"isserver-guard",[34,24430,24431],{},"isServer"," guard",[15,24434,24435,24436,24438,24439,2630],{},"For finer control, check ",[34,24437,24431],{}," from ",[34,24440,24441],{},"solid-js/web",[27,24443,24445],{"className":280,"code":24444,"language":282,"meta":32,"style":32},"import { isServer } from 'solid-js/web'\nimport { Shader, LinearGradient } from 'shaders/solid'\n\nexport default function MyShader() {\n if (isServer) return null\n\n return (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n )\n}\n",[34,24446,24447,24459,24469,24473,24485,24496,24500,24506,24520,24528,24536,24540],{"__ignoreMap":32},[37,24448,24449,24451,24454,24456],{"class":39,"line":40},[37,24450,1382],{"class":297},[37,24452,24453],{"class":43}," { isServer } ",[37,24455,1388],{"class":297},[37,24457,24458],{"class":58}," 'solid-js/web'\n",[37,24460,24461,24463,24465,24467],{"class":39,"line":65},[37,24462,1382],{"class":297},[37,24464,22404],{"class":43},[37,24466,1388],{"class":297},[37,24468,1439],{"class":58},[37,24470,24471],{"class":39,"line":72},[37,24472,120],{"emptyLinePlaceholder":119},[37,24474,24475,24477,24479,24481,24483],{"class":39,"line":116},[37,24476,22417],{"class":297},[37,24478,22420],{"class":297},[37,24480,9871],{"class":297},[37,24482,22425],{"class":51},[37,24484,3384],{"class":43},[37,24486,24487,24489,24492,24494],{"class":39,"line":123},[37,24488,23484],{"class":297},[37,24490,24491],{"class":43}," (isServer) ",[37,24493,23496],{"class":297},[37,24495,23499],{"class":291},[37,24497,24498],{"class":39,"line":129},[37,24499,120],{"emptyLinePlaceholder":119},[37,24501,24502,24504],{"class":39,"line":171},[37,24503,3475],{"class":297},[37,24505,3478],{"class":43},[37,24507,24508,24510,24512,24514,24516,24518],{"class":39,"line":221},[37,24509,174],{"class":43},[37,24511,48],{"class":291},[37,24513,52],{"class":51},[37,24515,55],{"class":297},[37,24517,59],{"class":58},[37,24519,62],{"class":43},[37,24521,24522,24524,24526],{"class":39,"line":231},[37,24523,3549],{"class":43},[37,24525,78],{"class":291},[37,24527,113],{"class":43},[37,24529,24530,24532,24534],{"class":39,"line":236},[37,24531,3564],{"class":43},[37,24533,48],{"class":291},[37,24535,62],{"class":43},[37,24537,24538],{"class":39,"line":242},[37,24539,3573],{"class":43},[37,24541,24542],{"class":39,"line":270},[37,24543,312],{"class":43},[1202,24545,24547,24432],{"id":24546},"onmount-guard",[34,24548,24549],{},"onMount",[15,24551,24552,24553,24555],{},"Alternatively, use ",[34,24554,24549],{}," with a signal to defer rendering until the component is mounted in the browser:",[27,24557,24559],{"className":280,"code":24558,"language":282,"meta":32,"style":32},"import { createSignal, onMount } from 'solid-js'\nimport { Shader, LinearGradient } from 'shaders/solid'\n\nexport default function MyShader() {\n const [mounted, setMounted] = createSignal(false)\n\n onMount(() => setMounted(true))\n\n return (\n \u003Cdiv class=\"w-full h-64\">\n {mounted() && (\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n )}\n \u003C/div>\n )\n}\n",[34,24560,24561,24572,24582,24586,24598,24622,24626,24643,24647,24653,24667,24681,24695,24704,24713,24718,24726,24730],{"__ignoreMap":32},[37,24562,24563,24565,24568,24570],{"class":39,"line":40},[37,24564,1382],{"class":297},[37,24566,24567],{"class":43}," { createSignal, onMount } ",[37,24569,1388],{"class":297},[37,24571,3722],{"class":58},[37,24573,24574,24576,24578,24580],{"class":39,"line":65},[37,24575,1382],{"class":297},[37,24577,22404],{"class":43},[37,24579,1388],{"class":297},[37,24581,1439],{"class":58},[37,24583,24584],{"class":39,"line":72},[37,24585,120],{"emptyLinePlaceholder":119},[37,24587,24588,24590,24592,24594,24596],{"class":39,"line":116},[37,24589,22417],{"class":297},[37,24591,22420],{"class":297},[37,24593,9871],{"class":297},[37,24595,22425],{"class":51},[37,24597,3384],{"class":43},[37,24599,24600,24602,24604,24606,24608,24610,24612,24614,24616,24618,24620],{"class":39,"line":123},[37,24601,3441],{"class":297},[37,24603,3444],{"class":43},[37,24605,23429],{"class":291},[37,24607,2961],{"class":43},[37,24609,23434],{"class":291},[37,24611,3455],{"class":43},[37,24613,55],{"class":297},[37,24615,3753],{"class":51},[37,24617,3364],{"class":43},[37,24619,390],{"class":291},[37,24621,3369],{"class":43},[37,24623,24624],{"class":39,"line":129},[37,24625,120],{"emptyLinePlaceholder":119},[37,24627,24628,24630,24632,24634,24637,24639,24641],{"class":39,"line":171},[37,24629,14637],{"class":51},[37,24631,14028],{"class":43},[37,24633,3498],{"class":297},[37,24635,24636],{"class":51}," setMounted",[37,24638,3364],{"class":43},[37,24640,3076],{"class":291},[37,24642,24347],{"class":43},[37,24644,24645],{"class":39,"line":221},[37,24646,120],{"emptyLinePlaceholder":119},[37,24648,24649,24651],{"class":39,"line":231},[37,24650,3475],{"class":297},[37,24652,3478],{"class":43},[37,24654,24655,24657,24659,24661,24663,24665],{"class":39,"line":236},[37,24656,174],{"class":43},[37,24658,8499],{"class":47},[37,24660,52],{"class":51},[37,24662,55],{"class":297},[37,24664,59],{"class":58},[37,24666,62],{"class":43},[37,24668,24669,24672,24674,24676,24679],{"class":39,"line":242},[37,24670,24671],{"class":43}," {",[37,24673,23429],{"class":51},[37,24675,3807],{"class":43},[37,24677,24678],{"class":297},"&&",[37,24680,3478],{"class":43},[37,24682,24683,24685,24687,24689,24691,24693],{"class":39,"line":270},[37,24684,8738],{"class":43},[37,24686,48],{"class":291},[37,24688,52],{"class":51},[37,24690,55],{"class":297},[37,24692,59],{"class":58},[37,24694,62],{"class":43},[37,24696,24697,24700,24702],{"class":39,"line":1145},[37,24698,24699],{"class":43}," \u003C",[37,24701,78],{"class":291},[37,24703,113],{"class":43},[37,24705,24706,24709,24711],{"class":39,"line":1151},[37,24707,24708],{"class":43}," \u003C/",[37,24710,48],{"class":291},[37,24712,62],{"class":43},[37,24714,24715],{"class":39,"line":1157},[37,24716,24717],{"class":43}," )}\n",[37,24719,24720,24722,24724],{"class":39,"line":1162},[37,24721,3564],{"class":43},[37,24723,8499],{"class":47},[37,24725,62],{"class":43},[37,24727,24728],{"class":39,"line":1168},[37,24729,3573],{"class":43},[37,24731,24732],{"class":39,"line":1191},[37,24733,312],{"class":43},[1202,24735,24737],{"id":24736},"solid-without-solidstart","Solid (without SolidStart)",[15,24739,24740,24741,24743],{},"In a Solid app without SolidStart, the ",[34,24742,24549],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[1311,24745,24746],{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}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 pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":32,"searchDepth":65,"depth":65,"links":24748},[24749,24751,24753,24755],{"id":24196,"depth":65,"text":24750},"clientOnly (SolidStart)",{"id":24428,"depth":65,"text":24752},"isServer guard",{"id":24546,"depth":65,"text":24754},"onMount guard",{"id":24736,"depth":65,"text":24737},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":24149,"description":24756},"docs/guide/solid/ssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":24762,"title":1332,"body":24763,"category":1320,"description":25297,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":2600,"meta":25298,"navigation":119,"path":25299,"seo":25300,"stem":25301,"__hash__":25302},"guide/docs/guide/svelte/1.quickstart.md",{"type":8,"value":24764,"toc":25288},[24765,24769,24771,24783,24785,24799,24801,24803,24857,24859,24865,24867,24877,24993,25003,25005,25012,25083,25093,25251,25255,25259,25263,25269,25271,25285],[11,24766,24768],{"id":24767},"quickstart-svelte","Quickstart (Svelte)",[1202,24770,21404],{"id":21403},[27,24772,24773],{"className":1344,"code":1345,"language":1346,"meta":32,"style":32},[34,24774,24775],{"__ignoreMap":32},[37,24776,24777,24779,24781],{"class":39,"line":40},[37,24778,1353],{"class":51},[37,24780,1356],{"class":58},[37,24782,1359],{"class":58},[1202,24784,22053],{"id":22052},[27,24786,24787],{"className":987,"code":1410,"language":989,"meta":32,"style":32},[34,24788,24789],{"__ignoreMap":32},[37,24790,24791,24793,24795,24797],{"class":39,"line":40},[37,24792,1382],{"class":297},[37,24794,1385],{"class":43},[37,24796,1388],{"class":297},[37,24798,1423],{"class":58},[1202,24800,1443],{"id":1442},[15,24802,22072],{},[27,24804,24805],{"className":3580,"code":1454,"language":3582,"meta":32,"style":32},[34,24806,24807,24821,24841,24849],{"__ignoreMap":32},[37,24808,24809,24811,24813,24815,24817,24819],{"class":39,"line":40},[37,24810,44],{"class":43},[37,24812,48],{"class":291},[37,24814,52],{"class":51},[37,24816,55],{"class":43},[37,24818,59],{"class":58},[37,24820,62],{"class":43},[37,24822,24823,24825,24827,24829,24831,24833,24835,24837,24839],{"class":39,"line":65},[37,24824,75],{"class":43},[37,24826,78],{"class":291},[37,24828,1244],{"class":51},[37,24830,55],{"class":43},[37,24832,1249],{"class":58},[37,24834,1252],{"class":51},[37,24836,55],{"class":43},[37,24838,1257],{"class":58},[37,24840,113],{"class":43},[37,24842,24843,24845,24847],{"class":39,"line":72},[37,24844,75],{"class":43},[37,24846,1266],{"class":291},[37,24848,113],{"class":43},[37,24850,24851,24853,24855],{"class":39,"line":116},[37,24852,273],{"class":43},[37,24854,48],{"class":291},[37,24856,62],{"class":43},[19,24858],{":preset":1672},[15,24860,24861,1677,24863,22135],{},[34,24862,1296],{},[34,24864,1214],{},[1202,24866,1687],{"id":1686},[15,24868,2905,24869,22142,24871,16460,24873,22148,24875,1683],{},[34,24870,1214],{},[34,24872,23678],{},[34,24874,1311],{},[34,24876,1296],{},[27,24878,24880],{"className":3580,"code":24879,"language":3582,"meta":32,"style":32},"\u003C!-- Fill the viewport -->\n\u003CShader class=\"w-screen h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Fixed dimensions -->\n\u003CShader style=\"width: 600px; height: 400px;\">\n \u003CLinearGradient />\n\u003C/Shader>\n\n\u003C!-- Fluid with aspect ratio -->\n\u003CShader class=\"w-full aspect-video\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,24881,24882,24886,24900,24908,24916,24920,24924,24938,24946,24954,24958,24963,24977,24985],{"__ignoreMap":32},[37,24883,24884],{"class":39,"line":40},[37,24885,1702],{"class":68},[37,24887,24888,24890,24892,24894,24896,24898],{"class":39,"line":65},[37,24889,44],{"class":43},[37,24891,48],{"class":291},[37,24893,52],{"class":51},[37,24895,55],{"class":43},[37,24897,1715],{"class":58},[37,24899,62],{"class":43},[37,24901,24902,24904,24906],{"class":39,"line":72},[37,24903,75],{"class":43},[37,24905,78],{"class":291},[37,24907,113],{"class":43},[37,24909,24910,24912,24914],{"class":39,"line":116},[37,24911,273],{"class":43},[37,24913,48],{"class":291},[37,24915,62],{"class":43},[37,24917,24918],{"class":39,"line":123},[37,24919,120],{"emptyLinePlaceholder":119},[37,24921,24922],{"class":39,"line":129},[37,24923,1742],{"class":68},[37,24925,24926,24928,24930,24932,24934,24936],{"class":39,"line":171},[37,24927,44],{"class":43},[37,24929,48],{"class":291},[37,24931,1751],{"class":51},[37,24933,55],{"class":43},[37,24935,1756],{"class":58},[37,24937,62],{"class":43},[37,24939,24940,24942,24944],{"class":39,"line":221},[37,24941,75],{"class":43},[37,24943,78],{"class":291},[37,24945,113],{"class":43},[37,24947,24948,24950,24952],{"class":39,"line":231},[37,24949,273],{"class":43},[37,24951,48],{"class":291},[37,24953,62],{"class":43},[37,24955,24956],{"class":39,"line":236},[37,24957,120],{"emptyLinePlaceholder":119},[37,24959,24960],{"class":39,"line":242},[37,24961,24962],{"class":68},"\u003C!-- Fluid with aspect ratio -->\n",[37,24964,24965,24967,24969,24971,24973,24975],{"class":39,"line":270},[37,24966,44],{"class":43},[37,24968,48],{"class":291},[37,24970,52],{"class":51},[37,24972,55],{"class":43},[37,24974,1796],{"class":58},[37,24976,62],{"class":43},[37,24978,24979,24981,24983],{"class":39,"line":1145},[37,24980,75],{"class":43},[37,24982,78],{"class":291},[37,24984,113],{"class":43},[37,24986,24987,24989,24991],{"class":39,"line":1151},[37,24988,273],{"class":43},[37,24990,48],{"class":291},[37,24992,62],{"class":43},[15,24994,22287,24995,16460,24997,22292,24999,22295,25001,22298],{},[34,24996,23678],{},[34,24998,1311],{},[34,25000,1296],{},[34,25002,1214],{},[1202,25004,2232],{"id":2231},[15,25006,25007,25008,25011],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[34,25009,25010],{},"{expression}"," syntax:",[27,25013,25014],{"className":3580,"code":2401,"language":3582,"meta":32,"style":32},[34,25015,25016,25030,25036,25044,25052,25063,25071,25075],{"__ignoreMap":32},[37,25017,25018,25020,25022,25024,25026,25028],{"class":39,"line":40},[37,25019,44],{"class":43},[37,25021,48],{"class":291},[37,25023,52],{"class":51},[37,25025,55],{"class":43},[37,25027,59],{"class":58},[37,25029,62],{"class":43},[37,25031,25032,25034],{"class":39,"line":65},[37,25033,75],{"class":43},[37,25035,2269],{"class":291},[37,25037,25038,25040,25042],{"class":39,"line":72},[37,25039,2274],{"class":51},[37,25041,55],{"class":43},[37,25043,2279],{"class":58},[37,25045,25046,25048,25050],{"class":39,"line":116},[37,25047,2284],{"class":51},[37,25049,55],{"class":43},[37,25051,2289],{"class":58},[37,25053,25054,25056,25059,25061],{"class":39,"line":123},[37,25055,2368],{"class":51},[37,25057,25058],{"class":43},"={",[37,25060,2375],{"class":291},[37,25062,312],{"class":43},[37,25064,25065,25067,25069],{"class":39,"line":129},[37,25066,2382],{"class":51},[37,25068,55],{"class":43},[37,25070,2309],{"class":58},[37,25072,25073],{"class":39,"line":171},[37,25074,2314],{"class":43},[37,25076,25077,25079,25081],{"class":39,"line":221},[37,25078,273],{"class":43},[37,25080,48],{"class":291},[37,25082,62],{"class":43},[15,25084,25085,25086,25089,25090,25092],{},"Props also accept reactive state — Svelte's ",[34,25087,25088],{},"$state"," rune (or ",[34,25091,14013],{}," in Svelte 4) works exactly as you'd expect:",[27,25094,25096],{"className":3580,"code":25095,"language":3582,"meta":32,"style":32},"\u003Cscript>\n import { Shader, LinearGradient } from 'shaders/svelte'\n\n let angle = $state(0)\n\u003C/script>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#ff6b6b\" colorB=\"#4ecdc4\" {angle} />\n\u003C/Shader>\n\n\u003Cinput type=\"range\" min=\"0\" max=\"360\" bind:value={angle} />\n",[34,25097,25098,25106,25116,25120,25138,25146,25150,25164,25192,25200,25204],{"__ignoreMap":32},[37,25099,25100,25102,25104],{"class":39,"line":40},[37,25101,44],{"class":43},[37,25103,3329],{"class":47},[37,25105,62],{"class":43},[37,25107,25108,25110,25112,25114],{"class":39,"line":65},[37,25109,10888],{"class":297},[37,25111,22404],{"class":43},[37,25113,1388],{"class":297},[37,25115,1423],{"class":58},[37,25117,25118],{"class":39,"line":72},[37,25119,120],{"emptyLinePlaceholder":119},[37,25121,25122,25124,25126,25128,25130,25132,25134,25136],{"class":39,"line":116},[37,25123,3597],{"class":297},[37,25125,9006],{"class":43},[37,25127,55],{"class":297},[37,25129,3605],{"class":43},[37,25131,3608],{"class":51},[37,25133,3364],{"class":43},[37,25135,6610],{"class":291},[37,25137,3369],{"class":43},[37,25139,25140,25142,25144],{"class":39,"line":123},[37,25141,273],{"class":43},[37,25143,3329],{"class":47},[37,25145,62],{"class":43},[37,25147,25148],{"class":39,"line":129},[37,25149,120],{"emptyLinePlaceholder":119},[37,25151,25152,25154,25156,25158,25160,25162],{"class":39,"line":171},[37,25153,44],{"class":43},[37,25155,48],{"class":291},[37,25157,52],{"class":51},[37,25159,55],{"class":43},[37,25161,59],{"class":58},[37,25163,62],{"class":43},[37,25165,25166,25168,25170,25172,25174,25176,25178,25180,25182,25185,25187,25190],{"class":39,"line":221},[37,25167,75],{"class":43},[37,25169,78],{"class":291},[37,25171,1244],{"class":51},[37,25173,55],{"class":43},[37,25175,22492],{"class":58},[37,25177,1252],{"class":51},[37,25179,55],{"class":43},[37,25181,22499],{"class":58},[37,25183,25184],{"class":51}," {",[37,25186,438],{"class":43},[37,25188,25189],{"class":51},"}",[37,25191,113],{"class":43},[37,25193,25194,25196,25198],{"class":39,"line":231},[37,25195,273],{"class":43},[37,25197,48],{"class":291},[37,25199,62],{"class":43},[37,25201,25202],{"class":39,"line":236},[37,25203,120],{"emptyLinePlaceholder":119},[37,25205,25206,25208,25211,25213,25215,25218,25221,25223,25225,25227,25229,25232,25234,25236,25238,25240,25243,25245,25248],{"class":39,"line":242},[37,25207,44],{"class":43},[37,25209,25210],{"class":47},"input",[37,25212,10876],{"class":51},[37,25214,55],{"class":43},[37,25216,25217],{"class":58},"\"range\"",[37,25219,25220],{"class":51}," min",[37,25222,55],{"class":43},[37,25224,9618],{"class":58},[37,25226,6610],{"class":291},[37,25228,9618],{"class":58},[37,25230,25231],{"class":51}," max",[37,25233,55],{"class":43},[37,25235,9618],{"class":58},[37,25237,22560],{"class":291},[37,25239,9618],{"class":58},[37,25241,25242],{"class":297}," bind",[37,25244,2630],{"class":43},[37,25246,25247],{"class":51},"value",[37,25249,25250],{"class":43},"={angle} />\n",[15,25252,21945,25253,22616],{},[34,25254,438],{},[15,25256,21952,25257,21955],{},[2237,25258,2240],{"href":2239},[1202,25260,25262],{"id":25261},"using-with-sveltekit-ssr","Using with SvelteKit / SSR",[15,25264,22627,25265,22632],{},[2237,25266,25268],{"href":25267},"/docs/guide/svelte/ssr","SvelteKit / SSR",[1202,25270,2554],{"id":2553},[2556,25272,25273,25277,25281],{},[2559,25274,25275,2565],{},[2237,25276,2564],{"href":2563},[2559,25278,25279,2572],{},[2237,25280,2571],{"href":2570},[2559,25282,25283,2584],{},[2237,25284,2240],{"href":2239},[1311,25286,25287],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}",{"title":32,"searchDepth":65,"depth":65,"links":25289},[25290,25291,25292,25293,25294,25295,25296],{"id":21403,"depth":65,"text":21404},{"id":22052,"depth":65,"text":22053},{"id":1442,"depth":65,"text":1443},{"id":1686,"depth":65,"text":1687},{"id":2231,"depth":65,"text":2232},{"id":25261,"depth":65,"text":25262},{"id":2553,"depth":65,"text":2554},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"/docs/guide/svelte/quickstart",{"title":1332,"description":25297},"docs/guide/svelte/1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":25304,"title":25268,"body":25305,"category":2984,"description":25893,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":23561,"meta":25894,"navigation":119,"path":25267,"seo":25895,"stem":25896,"__hash__":25897},"guide/docs/guide/svelte/ssr.md",{"type":8,"value":25306,"toc":25885},[25307,25311,25314,25318,25324,25327,25392,25395,25401,25406,25538,25545,25551,25678,25681,25685,25688,25882],[11,25308,25310],{"id":25309},"ssr-with-sveltekit-svelte","SSR with SvelteKit / Svelte",[15,25312,25313],{},"Shaders uses WebGPU, which requires a browser environment. While the Svelte package is built to be SSR-aware, the underlying WebGPU renderer requires a browser context to initialize. This page covers how to handle this correctly in SvelteKit.",[1202,25315,25317],{"id":25316},"the-default-behavior","The default behavior",[15,25319,25320,25321,25323],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[34,25322,1296],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,25325,25326],{},"In many cases, you don't need any special handling:",[27,25328,25330],{"className":3580,"code":25329,"language":3582,"meta":32,"style":32},"\u003Cscript>\n import { Shader, LinearGradient } from 'shaders/svelte'\n\u003C/script>\n\n\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,25331,25332,25340,25350,25358,25362,25376,25384],{"__ignoreMap":32},[37,25333,25334,25336,25338],{"class":39,"line":40},[37,25335,44],{"class":43},[37,25337,3329],{"class":47},[37,25339,62],{"class":43},[37,25341,25342,25344,25346,25348],{"class":39,"line":65},[37,25343,10888],{"class":297},[37,25345,22404],{"class":43},[37,25347,1388],{"class":297},[37,25349,1423],{"class":58},[37,25351,25352,25354,25356],{"class":39,"line":72},[37,25353,273],{"class":43},[37,25355,3329],{"class":47},[37,25357,62],{"class":43},[37,25359,25360],{"class":39,"line":116},[37,25361,120],{"emptyLinePlaceholder":119},[37,25363,25364,25366,25368,25370,25372,25374],{"class":39,"line":123},[37,25365,44],{"class":43},[37,25367,48],{"class":291},[37,25369,52],{"class":51},[37,25371,55],{"class":43},[37,25373,59],{"class":58},[37,25375,62],{"class":43},[37,25377,25378,25380,25382],{"class":39,"line":129},[37,25379,75],{"class":43},[37,25381,78],{"class":291},[37,25383,113],{"class":43},[37,25385,25386,25388,25390],{"class":39,"line":171},[37,25387,273],{"class":43},[37,25389,48],{"class":291},[37,25391,62],{"class":43},[15,25393,25394],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[1202,25396,25398,25400],{"id":25397},"onmount-for-browser-only-code",[34,25399,24549],{}," for browser-only code",[15,25402,25403,25404,2630],{},"If you have component-level code that depends on the shader being initialized (for example, you need to access the canvas element), wrap it in ",[34,25405,24549],{},[27,25407,25409],{"className":3580,"code":25408,"language":3582,"meta":32,"style":32},"\u003Cscript>\n import { onMount } from 'svelte'\n import { Shader, LinearGradient } from 'shaders/svelte'\n\n let shaderEl\n\n onMount(() => {\n // Safe to interact with the DOM and canvas here\n console.log(shaderEl)\n })\n\u003C/script>\n\n\u003CShader bind:this={shaderEl} class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,25410,25411,25419,25431,25441,25445,25452,25456,25466,25471,25482,25486,25494,25498,25522,25530],{"__ignoreMap":32},[37,25412,25413,25415,25417],{"class":39,"line":40},[37,25414,44],{"class":43},[37,25416,3329],{"class":47},[37,25418,62],{"class":43},[37,25420,25421,25423,25426,25428],{"class":39,"line":65},[37,25422,10888],{"class":297},[37,25424,25425],{"class":43}," { onMount } ",[37,25427,1388],{"class":297},[37,25429,25430],{"class":58}," 'svelte'\n",[37,25432,25433,25435,25437,25439],{"class":39,"line":72},[37,25434,10888],{"class":297},[37,25436,22404],{"class":43},[37,25438,1388],{"class":297},[37,25440,1423],{"class":58},[37,25442,25443],{"class":39,"line":116},[37,25444,120],{"emptyLinePlaceholder":119},[37,25446,25447,25449],{"class":39,"line":123},[37,25448,3597],{"class":297},[37,25450,25451],{"class":43}," shaderEl\n",[37,25453,25454],{"class":39,"line":129},[37,25455,120],{"emptyLinePlaceholder":119},[37,25457,25458,25460,25462,25464],{"class":39,"line":171},[37,25459,14637],{"class":51},[37,25461,14028],{"class":43},[37,25463,3498],{"class":297},[37,25465,3976],{"class":43},[37,25467,25468],{"class":39,"line":221},[37,25469,25470],{"class":68}," // Safe to interact with the DOM and canvas here\n",[37,25472,25473,25476,25479],{"class":39,"line":231},[37,25474,25475],{"class":43}," console.",[37,25477,25478],{"class":51},"log",[37,25480,25481],{"class":43},"(shaderEl)\n",[37,25483,25484],{"class":39,"line":236},[37,25485,10935],{"class":43},[37,25487,25488,25490,25492],{"class":39,"line":242},[37,25489,273],{"class":43},[37,25491,3329],{"class":47},[37,25493,62],{"class":43},[37,25495,25496],{"class":39,"line":270},[37,25497,120],{"emptyLinePlaceholder":119},[37,25499,25500,25502,25504,25506,25508,25511,25514,25516,25518,25520],{"class":39,"line":1145},[37,25501,44],{"class":43},[37,25503,48],{"class":291},[37,25505,25242],{"class":297},[37,25507,2630],{"class":43},[37,25509,25510],{"class":291},"this",[37,25512,25513],{"class":43},"={shaderEl} ",[37,25515,23678],{"class":51},[37,25517,55],{"class":43},[37,25519,59],{"class":58},[37,25521,62],{"class":43},[37,25523,25524,25526,25528],{"class":39,"line":1151},[37,25525,75],{"class":43},[37,25527,78],{"class":291},[37,25529,113],{"class":43},[37,25531,25532,25534,25536],{"class":39,"line":1157},[37,25533,273],{"class":43},[37,25535,48],{"class":291},[37,25537,62],{"class":43},[1202,25539,25541,25542],{"id":25540},"conditional-rendering-with-browser","Conditional rendering with ",[34,25543,25544],{},"browser",[15,25546,25547,25548,2630],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[34,25549,25550],{},"$app/environment",[27,25552,25554],{"className":3580,"code":25553,"language":3582,"meta":32,"style":32},"\u003Cscript>\n import { browser } from '$app/environment'\n import { Shader, LinearGradient } from 'shaders/svelte'\n\u003C/script>\n\n{#if browser}\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n{:else}\n \u003C!-- Optional server-rendered placeholder -->\n \u003Cdiv class=\"w-full h-64 bg-gray-900 rounded\" />\n{/if}\n",[34,25555,25556,25564,25576,25586,25594,25598,25609,25623,25631,25639,25649,25654,25669],{"__ignoreMap":32},[37,25557,25558,25560,25562],{"class":39,"line":40},[37,25559,44],{"class":43},[37,25561,3329],{"class":47},[37,25563,62],{"class":43},[37,25565,25566,25568,25571,25573],{"class":39,"line":65},[37,25567,10888],{"class":297},[37,25569,25570],{"class":43}," { browser } ",[37,25572,1388],{"class":297},[37,25574,25575],{"class":58}," '$app/environment'\n",[37,25577,25578,25580,25582,25584],{"class":39,"line":72},[37,25579,10888],{"class":297},[37,25581,22404],{"class":43},[37,25583,1388],{"class":297},[37,25585,1423],{"class":58},[37,25587,25588,25590,25592],{"class":39,"line":116},[37,25589,273],{"class":43},[37,25591,3329],{"class":47},[37,25593,62],{"class":43},[37,25595,25596],{"class":39,"line":123},[37,25597,120],{"emptyLinePlaceholder":119},[37,25599,25600,25603,25606],{"class":39,"line":129},[37,25601,25602],{"class":43},"{#",[37,25604,25605],{"class":297},"if",[37,25607,25608],{"class":43}," browser}\n",[37,25610,25611,25613,25615,25617,25619,25621],{"class":39,"line":171},[37,25612,75],{"class":43},[37,25614,48],{"class":291},[37,25616,52],{"class":51},[37,25618,55],{"class":43},[37,25620,59],{"class":58},[37,25622,62],{"class":43},[37,25624,25625,25627,25629],{"class":39,"line":221},[37,25626,174],{"class":43},[37,25628,78],{"class":291},[37,25630,113],{"class":43},[37,25632,25633,25635,25637],{"class":39,"line":231},[37,25634,224],{"class":43},[37,25636,48],{"class":291},[37,25638,62],{"class":43},[37,25640,25641,25644,25647],{"class":39,"line":236},[37,25642,25643],{"class":43},"{:",[37,25645,25646],{"class":297},"else",[37,25648,312],{"class":43},[37,25650,25651],{"class":39,"line":242},[37,25652,25653],{"class":68}," \u003C!-- Optional server-rendered placeholder -->\n",[37,25655,25656,25658,25660,25662,25664,25667],{"class":39,"line":270},[37,25657,75],{"class":43},[37,25659,8499],{"class":47},[37,25661,52],{"class":51},[37,25663,55],{"class":43},[37,25665,25666],{"class":58},"\"w-full h-64 bg-gray-900 rounded\"",[37,25668,113],{"class":43},[37,25670,25671,25674,25676],{"class":39,"line":1145},[37,25672,25673],{"class":43},"{/",[37,25675,25605],{"class":297},[37,25677,312],{"class":43},[15,25679,25680],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[1202,25682,25684],{"id":25683},"lazy-loading","Lazy loading",[15,25686,25687],{},"To defer loading the Shaders bundle entirely until client-side:",[27,25689,25691],{"className":3580,"code":25690,"language":3582,"meta":32,"style":32},"\u003Cscript>\n import { onMount } from 'svelte'\n\n let ShaderComponent\n let LinearGradientComponent\n\n onMount(async () => {\n const { Shader, LinearGradient } = await import('shaders/svelte')\n ShaderComponent = Shader\n LinearGradientComponent = LinearGradient\n })\n\u003C/script>\n\n{#if ShaderComponent}\n \u003Csvelte:component this={ShaderComponent} class=\"w-full h-64\">\n \u003Csvelte:component this={LinearGradientComponent} />\n \u003C/svelte:component>\n{/if}\n",[34,25692,25693,25701,25711,25715,25722,25729,25733,25748,25777,25787,25797,25801,25809,25813,25822,25847,25862,25874],{"__ignoreMap":32},[37,25694,25695,25697,25699],{"class":39,"line":40},[37,25696,44],{"class":43},[37,25698,3329],{"class":47},[37,25700,62],{"class":43},[37,25702,25703,25705,25707,25709],{"class":39,"line":65},[37,25704,10888],{"class":297},[37,25706,25425],{"class":43},[37,25708,1388],{"class":297},[37,25710,25430],{"class":58},[37,25712,25713],{"class":39,"line":72},[37,25714,120],{"emptyLinePlaceholder":119},[37,25716,25717,25719],{"class":39,"line":116},[37,25718,3597],{"class":297},[37,25720,25721],{"class":43}," ShaderComponent\n",[37,25723,25724,25726],{"class":39,"line":123},[37,25725,3597],{"class":297},[37,25727,25728],{"class":43}," LinearGradientComponent\n",[37,25730,25731],{"class":39,"line":129},[37,25732,120],{"emptyLinePlaceholder":119},[37,25734,25735,25737,25739,25742,25744,25746],{"class":39,"line":171},[37,25736,14637],{"class":51},[37,25738,3364],{"class":43},[37,25740,25741],{"class":297},"async",[37,25743,14043],{"class":43},[37,25745,3498],{"class":297},[37,25747,3976],{"class":43},[37,25749,25750,25752,25755,25757,25759,25761,25764,25766,25768,25770,25772,25775],{"class":39,"line":221},[37,25751,14279],{"class":297},[37,25753,25754],{"class":43}," { ",[37,25756,48],{"class":291},[37,25758,2961],{"class":43},[37,25760,78],{"class":291},[37,25762,25763],{"class":43}," } ",[37,25765,55],{"class":297},[37,25767,2818],{"class":297},[37,25769,22960],{"class":297},[37,25771,3364],{"class":43},[37,25773,25774],{"class":58},"'shaders/svelte'",[37,25776,3369],{"class":43},[37,25778,25779,25782,25784],{"class":39,"line":231},[37,25780,25781],{"class":43}," ShaderComponent ",[37,25783,55],{"class":297},[37,25785,25786],{"class":43}," Shader\n",[37,25788,25789,25792,25794],{"class":39,"line":236},[37,25790,25791],{"class":43}," LinearGradientComponent ",[37,25793,55],{"class":297},[37,25795,25796],{"class":43}," LinearGradient\n",[37,25798,25799],{"class":39,"line":242},[37,25800,10935],{"class":43},[37,25802,25803,25805,25807],{"class":39,"line":270},[37,25804,273],{"class":43},[37,25806,3329],{"class":47},[37,25808,62],{"class":43},[37,25810,25811],{"class":39,"line":1145},[37,25812,120],{"emptyLinePlaceholder":119},[37,25814,25815,25817,25819],{"class":39,"line":1151},[37,25816,25602],{"class":43},[37,25818,25605],{"class":297},[37,25820,25821],{"class":43}," ShaderComponent}\n",[37,25823,25824,25826,25828,25830,25833,25836,25839,25841,25843,25845],{"class":39,"line":1157},[37,25825,75],{"class":43},[37,25827,3582],{"class":297},[37,25829,2630],{"class":43},[37,25831,25832],{"class":47},"component",[37,25834,25835],{"class":51}," this",[37,25837,25838],{"class":43},"={ShaderComponent} ",[37,25840,23678],{"class":51},[37,25842,55],{"class":43},[37,25844,59],{"class":58},[37,25846,62],{"class":43},[37,25848,25849,25851,25853,25855,25857,25859],{"class":39,"line":1162},[37,25850,174],{"class":43},[37,25852,3582],{"class":297},[37,25854,2630],{"class":43},[37,25856,25832],{"class":47},[37,25858,25835],{"class":51},[37,25860,25861],{"class":43},"={LinearGradientComponent} />\n",[37,25863,25864,25866,25868,25870,25872],{"class":39,"line":1168},[37,25865,224],{"class":43},[37,25867,3582],{"class":297},[37,25869,2630],{"class":43},[37,25871,25832],{"class":47},[37,25873,62],{"class":43},[37,25875,25876,25878,25880],{"class":39,"line":1191},[37,25877,25673],{"class":43},[37,25879,25605],{"class":297},[37,25881,312],{"class":43},[1311,25883,25884],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}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 pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}",{"title":32,"searchDepth":65,"depth":65,"links":25886},[25887,25888,25890,25892],{"id":25316,"depth":65,"text":25317},{"id":25397,"depth":65,"text":25889},"onMount for browser-only code",{"id":25540,"depth":65,"text":25891},"Conditional rendering with browser",{"id":25683,"depth":65,"text":25684},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":25268,"description":25893},"docs/guide/svelte/ssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":25899,"title":1332,"body":25900,"category":1320,"description":26414,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":2600,"meta":26415,"navigation":119,"path":26416,"seo":26417,"stem":26418,"__hash__":26419},"guide/docs/guide/vue/1.quickstart.md",{"type":8,"value":25901,"toc":26405},[25902,25906,25908,25920,25922,25936,25938,25940,25994,25996,26002,26004,26011,26125,26132,26134,26140,26209,26212,26382,26386,26390,26394,26400,26402],[11,25903,25905],{"id":25904},"quickstart-vue","Quickstart (Vue)",[1202,25907,21404],{"id":21403},[27,25909,25910],{"className":1344,"code":1345,"language":1346,"meta":32,"style":32},[34,25911,25912],{"__ignoreMap":32},[37,25913,25914,25916,25918],{"class":39,"line":40},[37,25915,1353],{"class":51},[37,25917,1356],{"class":58},[37,25919,1359],{"class":58},[1202,25921,22053],{"id":22052},[27,25923,25924],{"className":987,"code":1375,"language":989,"meta":32,"style":32},[34,25925,25926],{"__ignoreMap":32},[37,25927,25928,25930,25932,25934],{"class":39,"line":40},[37,25929,1382],{"class":297},[37,25931,1385],{"class":43},[37,25933,1388],{"class":297},[37,25935,1391],{"class":58},[1202,25937,1443],{"id":1442},[15,25939,22072],{},[27,25941,25942],{"className":29,"code":1454,"language":31,"meta":32,"style":32},[34,25943,25944,25958,25978,25986],{"__ignoreMap":32},[37,25945,25946,25948,25950,25952,25954,25956],{"class":39,"line":40},[37,25947,44],{"class":43},[37,25949,48],{"class":47},[37,25951,52],{"class":51},[37,25953,55],{"class":43},[37,25955,59],{"class":58},[37,25957,62],{"class":43},[37,25959,25960,25962,25964,25966,25968,25970,25972,25974,25976],{"class":39,"line":65},[37,25961,75],{"class":43},[37,25963,78],{"class":47},[37,25965,1244],{"class":51},[37,25967,55],{"class":43},[37,25969,1249],{"class":58},[37,25971,1252],{"class":51},[37,25973,55],{"class":43},[37,25975,1257],{"class":58},[37,25977,113],{"class":43},[37,25979,25980,25982,25984],{"class":39,"line":72},[37,25981,75],{"class":43},[37,25983,1266],{"class":47},[37,25985,113],{"class":43},[37,25987,25988,25990,25992],{"class":39,"line":116},[37,25989,273],{"class":43},[37,25991,48],{"class":47},[37,25993,62],{"class":43},[19,25995],{":preset":1672},[15,25997,25998,1677,26000,22135],{},[34,25999,1296],{},[34,26001,1214],{},[1202,26003,1687],{"id":1686},[15,26005,2905,26006,26008,26009,1683],{},[34,26007,1214],{}," has no intrinsic size. The class or style you apply to ",[34,26010,1296],{},[27,26012,26013],{"className":29,"code":24879,"language":31,"meta":32,"style":32},[34,26014,26015,26019,26033,26041,26049,26053,26057,26071,26079,26087,26091,26095,26109,26117],{"__ignoreMap":32},[37,26016,26017],{"class":39,"line":40},[37,26018,1702],{"class":68},[37,26020,26021,26023,26025,26027,26029,26031],{"class":39,"line":65},[37,26022,44],{"class":43},[37,26024,48],{"class":47},[37,26026,52],{"class":51},[37,26028,55],{"class":43},[37,26030,1715],{"class":58},[37,26032,62],{"class":43},[37,26034,26035,26037,26039],{"class":39,"line":72},[37,26036,75],{"class":43},[37,26038,78],{"class":47},[37,26040,113],{"class":43},[37,26042,26043,26045,26047],{"class":39,"line":116},[37,26044,273],{"class":43},[37,26046,48],{"class":47},[37,26048,62],{"class":43},[37,26050,26051],{"class":39,"line":123},[37,26052,120],{"emptyLinePlaceholder":119},[37,26054,26055],{"class":39,"line":129},[37,26056,1742],{"class":68},[37,26058,26059,26061,26063,26065,26067,26069],{"class":39,"line":171},[37,26060,44],{"class":43},[37,26062,48],{"class":47},[37,26064,1751],{"class":51},[37,26066,55],{"class":43},[37,26068,1756],{"class":58},[37,26070,62],{"class":43},[37,26072,26073,26075,26077],{"class":39,"line":221},[37,26074,75],{"class":43},[37,26076,78],{"class":47},[37,26078,113],{"class":43},[37,26080,26081,26083,26085],{"class":39,"line":231},[37,26082,273],{"class":43},[37,26084,48],{"class":47},[37,26086,62],{"class":43},[37,26088,26089],{"class":39,"line":236},[37,26090,120],{"emptyLinePlaceholder":119},[37,26092,26093],{"class":39,"line":242},[37,26094,24962],{"class":68},[37,26096,26097,26099,26101,26103,26105,26107],{"class":39,"line":270},[37,26098,44],{"class":43},[37,26100,48],{"class":47},[37,26102,52],{"class":51},[37,26104,55],{"class":43},[37,26106,1796],{"class":58},[37,26108,62],{"class":43},[37,26110,26111,26113,26115],{"class":39,"line":1145},[37,26112,75],{"class":43},[37,26114,78],{"class":47},[37,26116,113],{"class":43},[37,26118,26119,26121,26123],{"class":39,"line":1151},[37,26120,273],{"class":43},[37,26122,48],{"class":47},[37,26124,62],{"class":43},[15,26126,26127,26128,22295,26130,22298],{},"Applying a class or style to the ",[34,26129,1296],{},[34,26131,1214],{},[1202,26133,2232],{"id":2231},[15,26135,26136,26137,26139],{},"Pass props directly to configure each component. Numeric props use Vue's ",[34,26138,2630],{}," binding syntax, strings can be passed plain:",[27,26141,26143],{"className":29,"code":26142,"language":31,"meta":32,"style":32},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient\n color-a=\"#ff6b6b\"\n color-b=\"#4ecdc4\"\n :angle=\"45\"\n color-space=\"oklch\"\n />\n\u003C/Shader>\n",[34,26144,26145,26159,26165,26173,26181,26189,26197,26201],{"__ignoreMap":32},[37,26146,26147,26149,26151,26153,26155,26157],{"class":39,"line":40},[37,26148,44],{"class":43},[37,26150,48],{"class":47},[37,26152,52],{"class":51},[37,26154,55],{"class":43},[37,26156,59],{"class":58},[37,26158,62],{"class":43},[37,26160,26161,26163],{"class":39,"line":65},[37,26162,75],{"class":43},[37,26164,2269],{"class":47},[37,26166,26167,26169,26171],{"class":39,"line":72},[37,26168,17182],{"class":51},[37,26170,55],{"class":43},[37,26172,2279],{"class":58},[37,26174,26175,26177,26179],{"class":39,"line":116},[37,26176,17192],{"class":51},[37,26178,55],{"class":43},[37,26180,2289],{"class":58},[37,26182,26183,26185,26187],{"class":39,"line":123},[37,26184,2294],{"class":51},[37,26186,55],{"class":43},[37,26188,2299],{"class":58},[37,26190,26191,26193,26195],{"class":39,"line":129},[37,26192,2304],{"class":51},[37,26194,55],{"class":43},[37,26196,2309],{"class":58},[37,26198,26199],{"class":39,"line":171},[37,26200,2314],{"class":43},[37,26202,26203,26205,26207],{"class":39,"line":221},[37,26204,273],{"class":43},[37,26206,48],{"class":47},[37,26208,62],{"class":43},[15,26210,26211],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[27,26213,26215],{"className":6954,"code":26214,"language":6956,"meta":32,"style":32},"\u003Cscript setup>\nimport { ref } from 'vue'\nimport { Shader, LinearGradient } from 'shaders/vue'\n\nconst angle = ref(0)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient color-a=\"#ff6b6b\" color-b=\"#4ecdc4\" :angle=\"angle\" />\n \u003C/Shader>\n\n \u003Cinput type=\"range\" min=\"0\" max=\"360\" v-model.number=\"angle\" />\n\u003C/template>\n",[34,26216,26217,26227,26237,26247,26251,26267,26275,26279,26287,26301,26327,26335,26339,26374],{"__ignoreMap":32},[37,26218,26219,26221,26223,26225],{"class":39,"line":40},[37,26220,44],{"class":43},[37,26222,3329],{"class":47},[37,26224,3332],{"class":51},[37,26226,62],{"class":43},[37,26228,26229,26231,26233,26235],{"class":39,"line":65},[37,26230,1382],{"class":297},[37,26232,3341],{"class":43},[37,26234,1388],{"class":297},[37,26236,3346],{"class":58},[37,26238,26239,26241,26243,26245],{"class":39,"line":72},[37,26240,1382],{"class":297},[37,26242,22404],{"class":43},[37,26244,1388],{"class":297},[37,26246,1391],{"class":58},[37,26248,26249],{"class":39,"line":116},[37,26250,120],{"emptyLinePlaceholder":119},[37,26252,26253,26255,26257,26259,26261,26263,26265],{"class":39,"line":123},[37,26254,2809],{"class":297},[37,26256,321],{"class":291},[37,26258,2815],{"class":297},[37,26260,3361],{"class":51},[37,26262,3364],{"class":43},[37,26264,6610],{"class":291},[37,26266,3369],{"class":43},[37,26268,26269,26271,26273],{"class":39,"line":129},[37,26270,273],{"class":43},[37,26272,3329],{"class":47},[37,26274,62],{"class":43},[37,26276,26277],{"class":39,"line":171},[37,26278,120],{"emptyLinePlaceholder":119},[37,26280,26281,26283,26285],{"class":39,"line":221},[37,26282,44],{"class":43},[37,26284,3260],{"class":47},[37,26286,62],{"class":43},[37,26288,26289,26291,26293,26295,26297,26299],{"class":39,"line":231},[37,26290,75],{"class":43},[37,26292,48],{"class":47},[37,26294,52],{"class":51},[37,26296,55],{"class":43},[37,26298,59],{"class":58},[37,26300,62],{"class":43},[37,26302,26303,26305,26307,26309,26311,26313,26315,26317,26319,26321,26323,26325],{"class":39,"line":236},[37,26304,174],{"class":43},[37,26306,78],{"class":47},[37,26308,18046],{"class":51},[37,26310,55],{"class":43},[37,26312,22492],{"class":58},[37,26314,18053],{"class":51},[37,26316,55],{"class":43},[37,26318,22499],{"class":58},[37,26320,81],{"class":51},[37,26322,55],{"class":43},[37,26324,8623],{"class":58},[37,26326,113],{"class":43},[37,26328,26329,26331,26333],{"class":39,"line":242},[37,26330,224],{"class":43},[37,26332,48],{"class":47},[37,26334,62],{"class":43},[37,26336,26337],{"class":39,"line":270},[37,26338,120],{"emptyLinePlaceholder":119},[37,26340,26341,26343,26345,26347,26349,26351,26353,26355,26358,26360,26362,26365,26368,26370,26372],{"class":39,"line":1145},[37,26342,75],{"class":43},[37,26344,25210],{"class":47},[37,26346,10876],{"class":51},[37,26348,55],{"class":43},[37,26350,25217],{"class":58},[37,26352,25220],{"class":51},[37,26354,55],{"class":43},[37,26356,26357],{"class":58},"\"0\"",[37,26359,25231],{"class":51},[37,26361,55],{"class":43},[37,26363,26364],{"class":58},"\"360\"",[37,26366,26367],{"class":51}," v-model.number",[37,26369,55],{"class":43},[37,26371,8623],{"class":58},[37,26373,113],{"class":43},[37,26375,26376,26378,26380],{"class":39,"line":1151},[37,26377,273],{"class":43},[37,26379,3260],{"class":47},[37,26381,62],{"class":43},[15,26383,21945,26384,22616],{},[34,26385,438],{},[15,26387,21952,26388,21955],{},[2237,26389,2240],{"href":2239},[1202,26391,26393],{"id":26392},"using-with-nuxt-ssr","Using with Nuxt / SSR",[15,26395,22627,26396,22632],{},[2237,26397,26399],{"href":26398},"/docs/guide/vue/ssr","Nuxt / SSR",[1202,26401,2554],{"id":2553},[1311,26403,26404],{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":32,"searchDepth":65,"depth":65,"links":26406},[26407,26408,26409,26410,26411,26412,26413],{"id":21403,"depth":65,"text":21404},{"id":22052,"depth":65,"text":22053},{"id":1442,"depth":65,"text":1443},{"id":1686,"depth":65,"text":1687},{"id":2231,"depth":65,"text":2232},{"id":26392,"depth":65,"text":26393},{"id":2553,"depth":65,"text":2554},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"/docs/guide/vue/quickstart",{"title":1332,"description":26414},"docs/guide/vue/1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":26421,"title":26399,"body":26422,"category":2984,"description":27095,"exclude":1322,"extension":1323,"forceFramework":1322,"icon":23561,"meta":27096,"navigation":119,"path":26398,"seo":27097,"stem":27098,"__hash__":27099},"guide/docs/guide/vue/ssr.md",{"type":8,"value":26423,"toc":27088},[26424,26428,26431,26438,26444,26496,26499,26502,26598,26602,26609,26761,26765,26768,26969,26976,27065,27071,27075,27085],[11,26425,26427],{"id":26426},"ssr-with-nuxt-vue","SSR with Nuxt / Vue",[15,26429,26430],{},"Shaders uses WebGPU, which requires a browser environment. It cannot run during server-side rendering. This page covers how to safely use Shaders in SSR-enabled Vue applications.",[1202,26432,26434,26435],{"id":26433},"nuxt-clientonly","Nuxt: ",[34,26436,26437],{},"\u003CClientOnly>",[15,26439,26440,26441,26443],{},"Nuxt provides a built-in ",[34,26442,26437],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[27,26445,26447],{"className":29,"code":26446,"language":31,"meta":32,"style":32},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n\u003C/ClientOnly>\n",[34,26448,26449,26458,26472,26480,26488],{"__ignoreMap":32},[37,26450,26451,26453,26456],{"class":39,"line":40},[37,26452,44],{"class":43},[37,26454,26455],{"class":47},"ClientOnly",[37,26457,62],{"class":43},[37,26459,26460,26462,26464,26466,26468,26470],{"class":39,"line":65},[37,26461,75],{"class":43},[37,26463,48],{"class":47},[37,26465,52],{"class":51},[37,26467,55],{"class":43},[37,26469,59],{"class":58},[37,26471,62],{"class":43},[37,26473,26474,26476,26478],{"class":39,"line":72},[37,26475,174],{"class":43},[37,26477,78],{"class":47},[37,26479,113],{"class":43},[37,26481,26482,26484,26486],{"class":39,"line":116},[37,26483,224],{"class":43},[37,26485,48],{"class":47},[37,26487,62],{"class":43},[37,26489,26490,26492,26494],{"class":39,"line":123},[37,26491,273],{"class":43},[37,26493,26455],{"class":47},[37,26495,62],{"class":43},[15,26497,26498],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,26500,26501],{},"You can add a placeholder slot to show something while the client-side shader loads:",[27,26503,26505],{"className":29,"code":26504,"language":31,"meta":32,"style":32},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n\n \u003Ctemplate #fallback>\n \u003Cdiv class=\"w-full h-64 bg-gray-900 animate-pulse rounded\" />\n \u003C/template>\n\u003C/ClientOnly>\n",[34,26506,26507,26515,26529,26537,26545,26549,26563,26582,26590],{"__ignoreMap":32},[37,26508,26509,26511,26513],{"class":39,"line":40},[37,26510,44],{"class":43},[37,26512,26455],{"class":47},[37,26514,62],{"class":43},[37,26516,26517,26519,26521,26523,26525,26527],{"class":39,"line":65},[37,26518,75],{"class":43},[37,26520,48],{"class":47},[37,26522,52],{"class":51},[37,26524,55],{"class":43},[37,26526,59],{"class":58},[37,26528,62],{"class":43},[37,26530,26531,26533,26535],{"class":39,"line":72},[37,26532,174],{"class":43},[37,26534,78],{"class":47},[37,26536,113],{"class":43},[37,26538,26539,26541,26543],{"class":39,"line":116},[37,26540,224],{"class":43},[37,26542,48],{"class":47},[37,26544,62],{"class":43},[37,26546,26547],{"class":39,"line":123},[37,26548,120],{"emptyLinePlaceholder":119},[37,26550,26551,26553,26555,26558,26561],{"class":39,"line":129},[37,26552,75],{"class":43},[37,26554,3260],{"class":47},[37,26556,26557],{"class":43}," #",[37,26559,26560],{"class":51},"fallback",[37,26562,62],{"class":43},[37,26564,26565,26567,26569,26571,26573,26576,26580],{"class":39,"line":171},[37,26566,174],{"class":43},[37,26568,8499],{"class":47},[37,26570,52],{"class":51},[37,26572,55],{"class":43},[37,26574,26575],{"class":58},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[37,26577,26579],{"class":26578},"s6RL2"," /",[37,26581,62],{"class":43},[37,26583,26584,26586,26588],{"class":39,"line":221},[37,26585,224],{"class":43},[37,26587,3260],{"class":47},[37,26589,62],{"class":43},[37,26591,26592,26594,26596],{"class":39,"line":231},[37,26593,273],{"class":43},[37,26595,26455],{"class":47},[37,26597,62],{"class":43},[1202,26599,26601],{"id":26600},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,26603,26604,26605,26608],{},"If you're using Vue SSR without Nuxt, use ",[34,26606,26607],{},"v-if"," with a mounted flag:",[27,26610,26612],{"className":6954,"code":26611,"language":6956,"meta":32,"style":32},"\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\n\nconst isMounted = ref(false)\nonMounted(() => { isMounted.value = true })\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"w-full h-64\">\n \u003CShader v-if=\"isMounted\" class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n \u003C/div>\n\u003C/template>\n",[34,26613,26614,26624,26635,26639,26656,26673,26681,26685,26693,26707,26729,26737,26745,26753],{"__ignoreMap":32},[37,26615,26616,26618,26620,26622],{"class":39,"line":40},[37,26617,44],{"class":43},[37,26619,3329],{"class":47},[37,26621,3332],{"class":51},[37,26623,62],{"class":43},[37,26625,26626,26628,26631,26633],{"class":39,"line":65},[37,26627,1382],{"class":297},[37,26629,26630],{"class":43}," { ref, onMounted } ",[37,26632,1388],{"class":297},[37,26634,3346],{"class":58},[37,26636,26637],{"class":39,"line":72},[37,26638,120],{"emptyLinePlaceholder":119},[37,26640,26641,26643,26646,26648,26650,26652,26654],{"class":39,"line":116},[37,26642,2809],{"class":297},[37,26644,26645],{"class":291}," isMounted",[37,26647,2815],{"class":297},[37,26649,3361],{"class":51},[37,26651,3364],{"class":43},[37,26653,390],{"class":291},[37,26655,3369],{"class":43},[37,26657,26658,26660,26662,26664,26667,26669,26671],{"class":39,"line":123},[37,26659,14025],{"class":51},[37,26661,14028],{"class":43},[37,26663,3498],{"class":297},[37,26665,26666],{"class":43}," { isMounted.value ",[37,26668,55],{"class":297},[37,26670,3647],{"class":291},[37,26672,9549],{"class":43},[37,26674,26675,26677,26679],{"class":39,"line":129},[37,26676,273],{"class":43},[37,26678,3329],{"class":47},[37,26680,62],{"class":43},[37,26682,26683],{"class":39,"line":171},[37,26684,120],{"emptyLinePlaceholder":119},[37,26686,26687,26689,26691],{"class":39,"line":221},[37,26688,44],{"class":43},[37,26690,3260],{"class":47},[37,26692,62],{"class":43},[37,26694,26695,26697,26699,26701,26703,26705],{"class":39,"line":231},[37,26696,75],{"class":43},[37,26698,8499],{"class":47},[37,26700,52],{"class":51},[37,26702,55],{"class":43},[37,26704,59],{"class":58},[37,26706,62],{"class":43},[37,26708,26709,26711,26713,26716,26718,26721,26723,26725,26727],{"class":39,"line":236},[37,26710,174],{"class":43},[37,26712,48],{"class":47},[37,26714,26715],{"class":51}," v-if",[37,26717,55],{"class":43},[37,26719,26720],{"class":58},"\"isMounted\"",[37,26722,52],{"class":51},[37,26724,55],{"class":43},[37,26726,59],{"class":58},[37,26728,62],{"class":43},[37,26730,26731,26733,26735],{"class":39,"line":242},[37,26732,3549],{"class":43},[37,26734,78],{"class":47},[37,26736,113],{"class":43},[37,26738,26739,26741,26743],{"class":39,"line":270},[37,26740,3564],{"class":43},[37,26742,48],{"class":47},[37,26744,62],{"class":43},[37,26746,26747,26749,26751],{"class":39,"line":1145},[37,26748,224],{"class":43},[37,26750,8499],{"class":47},[37,26752,62],{"class":43},[37,26754,26755,26757,26759],{"class":39,"line":1151},[37,26756,273],{"class":43},[37,26758,3260],{"class":47},[37,26760,62],{"class":43},[1202,26762,26764],{"id":26763},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,26766,26767],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[27,26769,26771],{"className":6954,"code":26770,"language":6956,"meta":32,"style":32},"\u003Cscript setup>\nimport { defineAsyncComponent, ref, onMounted } from 'vue'\n\nconst isMounted = ref(false)\nonMounted(() => { isMounted.value = true })\n\n// Lazy-load shader components — only fetched client-side when rendered\nconst Shader = defineAsyncComponent(() => import('shaders/vue').then(m => m.Shader))\nconst LinearGradient = defineAsyncComponent(() => import('shaders/vue').then(m => m.LinearGradient))\n\u003C/script>\n\n\u003Ctemplate>\n \u003CShader v-if=\"isMounted\">\n \u003CLinearGradient />\n \u003C/Shader>\n\u003C/template>\n",[34,26772,26773,26783,26794,26798,26814,26830,26834,26839,26877,26911,26919,26923,26931,26945,26953,26961],{"__ignoreMap":32},[37,26774,26775,26777,26779,26781],{"class":39,"line":40},[37,26776,44],{"class":43},[37,26778,3329],{"class":47},[37,26780,3332],{"class":51},[37,26782,62],{"class":43},[37,26784,26785,26787,26790,26792],{"class":39,"line":65},[37,26786,1382],{"class":297},[37,26788,26789],{"class":43}," { defineAsyncComponent, ref, onMounted } ",[37,26791,1388],{"class":297},[37,26793,3346],{"class":58},[37,26795,26796],{"class":39,"line":72},[37,26797,120],{"emptyLinePlaceholder":119},[37,26799,26800,26802,26804,26806,26808,26810,26812],{"class":39,"line":116},[37,26801,2809],{"class":297},[37,26803,26645],{"class":291},[37,26805,2815],{"class":297},[37,26807,3361],{"class":51},[37,26809,3364],{"class":43},[37,26811,390],{"class":291},[37,26813,3369],{"class":43},[37,26815,26816,26818,26820,26822,26824,26826,26828],{"class":39,"line":123},[37,26817,14025],{"class":51},[37,26819,14028],{"class":43},[37,26821,3498],{"class":297},[37,26823,26666],{"class":43},[37,26825,55],{"class":297},[37,26827,3647],{"class":291},[37,26829,9549],{"class":43},[37,26831,26832],{"class":39,"line":129},[37,26833,120],{"emptyLinePlaceholder":119},[37,26835,26836],{"class":39,"line":171},[37,26837,26838],{"class":68},"// Lazy-load shader components — only fetched client-side when rendered\n",[37,26840,26841,26843,26846,26848,26851,26853,26855,26857,26859,26862,26864,26867,26869,26872,26874],{"class":39,"line":221},[37,26842,2809],{"class":297},[37,26844,26845],{"class":291}," Shader",[37,26847,2815],{"class":297},[37,26849,26850],{"class":51}," defineAsyncComponent",[37,26852,14028],{"class":43},[37,26854,3498],{"class":297},[37,26856,22960],{"class":297},[37,26858,3364],{"class":43},[37,26860,26861],{"class":58},"'shaders/vue'",[37,26863,21903],{"class":43},[37,26865,26866],{"class":51},"then",[37,26868,3364],{"class":43},[37,26870,26871],{"class":8757},"m",[37,26873,8760],{"class":297},[37,26875,26876],{"class":43}," m.Shader))\n",[37,26878,26879,26881,26884,26886,26888,26890,26892,26894,26896,26898,26900,26902,26904,26906,26908],{"class":39,"line":231},[37,26880,2809],{"class":297},[37,26882,26883],{"class":291}," LinearGradient",[37,26885,2815],{"class":297},[37,26887,26850],{"class":51},[37,26889,14028],{"class":43},[37,26891,3498],{"class":297},[37,26893,22960],{"class":297},[37,26895,3364],{"class":43},[37,26897,26861],{"class":58},[37,26899,21903],{"class":43},[37,26901,26866],{"class":51},[37,26903,3364],{"class":43},[37,26905,26871],{"class":8757},[37,26907,8760],{"class":297},[37,26909,26910],{"class":43}," m.LinearGradient))\n",[37,26912,26913,26915,26917],{"class":39,"line":236},[37,26914,273],{"class":43},[37,26916,3329],{"class":47},[37,26918,62],{"class":43},[37,26920,26921],{"class":39,"line":242},[37,26922,120],{"emptyLinePlaceholder":119},[37,26924,26925,26927,26929],{"class":39,"line":270},[37,26926,44],{"class":43},[37,26928,3260],{"class":47},[37,26930,62],{"class":43},[37,26932,26933,26935,26937,26939,26941,26943],{"class":39,"line":1145},[37,26934,75],{"class":43},[37,26936,48],{"class":47},[37,26938,26715],{"class":51},[37,26940,55],{"class":43},[37,26942,26720],{"class":58},[37,26944,62],{"class":43},[37,26946,26947,26949,26951],{"class":39,"line":1151},[37,26948,174],{"class":43},[37,26950,78],{"class":47},[37,26952,113],{"class":43},[37,26954,26955,26957,26959],{"class":39,"line":1157},[37,26956,224],{"class":43},[37,26958,48],{"class":47},[37,26960,62],{"class":43},[37,26962,26963,26965,26967],{"class":39,"line":1162},[37,26964,273],{"class":43},[37,26966,3260],{"class":47},[37,26968,62],{"class":43},[15,26970,26971,26972,26975],{},"Or in Nuxt, use ",[34,26973,26974],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[27,26977,26979],{"className":987,"code":26978,"language":989,"meta":32,"style":32},"// plugins/shaders.client.ts\nimport { defineNuxtPlugin } from '#app'\nimport { Shader, LinearGradient } from 'shaders/vue'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n nuxtApp.vueApp.component('Shader', Shader)\n nuxtApp.vueApp.component('LinearGradient', LinearGradient)\n})\n",[34,26980,26981,26986,26998,27008,27012,27033,27048,27061],{"__ignoreMap":32},[37,26982,26983],{"class":39,"line":40},[37,26984,26985],{"class":68},"// plugins/shaders.client.ts\n",[37,26987,26988,26990,26993,26995],{"class":39,"line":65},[37,26989,1382],{"class":297},[37,26991,26992],{"class":43}," { defineNuxtPlugin } ",[37,26994,1388],{"class":297},[37,26996,26997],{"class":58}," '#app'\n",[37,26999,27000,27002,27004,27006],{"class":39,"line":72},[37,27001,1382],{"class":297},[37,27003,22404],{"class":43},[37,27005,1388],{"class":297},[37,27007,1391],{"class":58},[37,27009,27010],{"class":39,"line":116},[37,27011,120],{"emptyLinePlaceholder":119},[37,27013,27014,27016,27018,27021,27024,27027,27029,27031],{"class":39,"line":123},[37,27015,22417],{"class":297},[37,27017,22420],{"class":297},[37,27019,27020],{"class":51}," defineNuxtPlugin",[37,27022,27023],{"class":43},"((",[37,27025,27026],{"class":8757},"nuxtApp",[37,27028,9930],{"class":43},[37,27030,3498],{"class":297},[37,27032,3976],{"class":43},[37,27034,27035,27038,27040,27042,27045],{"class":39,"line":129},[37,27036,27037],{"class":43}," nuxtApp.vueApp.",[37,27039,25832],{"class":51},[37,27041,3364],{"class":43},[37,27043,27044],{"class":58},"'Shader'",[37,27046,27047],{"class":43},", Shader)\n",[37,27049,27050,27052,27054,27056,27058],{"class":39,"line":171},[37,27051,27037],{"class":43},[37,27053,25832],{"class":51},[37,27055,3364],{"class":43},[37,27057,1020],{"class":58},[37,27059,27060],{"class":43},", LinearGradient)\n",[37,27062,27063],{"class":39,"line":221},[37,27064,1200],{"class":43},[15,27066,2905,27067,27070],{},[34,27068,27069],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[1202,27072,27074],{"id":27073},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,27076,2905,27077,10182,27079,27081,27082,27084],{},[34,27078,1296],{},[34,27080,1214],{}," element. Canvas elements have no server-rendered HTML output — there's nothing for Vue to hydrate or compare. This means there's no hydration mismatch warning even if the canvas appears in the initial HTML. That said, the GPU initialization still requires a browser, so the ",[34,27083,26437],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[1311,27086,27087],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":32,"searchDepth":65,"depth":65,"links":27089},[27090,27092,27093,27094],{"id":26433,"depth":65,"text":27091},"Nuxt: \u003CClientOnly>",{"id":26600,"depth":65,"text":26601},{"id":26763,"depth":65,"text":26764},{"id":27073,"depth":65,"text":27074},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":26399,"description":27095},"docs/guide/vue/ssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[27101,27443,27721,27979,28179,28379,28712,28989,29323,29599,29875,30074,30379,30655,30945,31277,31477,31753,32046,32339,32616,32996,33250,33450,33783,34057,34300,34669,34945,35190,35464,35664,35940,36140,36416,36709,36909,37185,37459,37790,38122,38453,38709,38979,39224,39600,39871,40146,40346,40622,40822,41092,41368,41623,41955,42153,42531,42806,43006,43299,43575,43851,44127,44382,44760,45052,45385,45717,45973,46305,46597,46797,47042,47373,47649,48029,48229,48472,48748,48992,49324,49524,49816,50016,50291,50491,50738,50937,51269,51592,51837,52113,52313,52645,52937,53270,53470,53884,54084,54360,54560,54760],{"id":27102,"title":27103,"body":27104,"category":27437,"componentType":21062,"description":27111,"extension":1323,"meta":27438,"navigation":119,"path":27439,"requiresChild":119,"seo":27440,"stem":27441,"__hash__":27442},"components/docs/components/AngularBlur.md","AngularBlur",{"type":8,"value":27105,"toc":27433},[27106,27109,27112,27115,27118,27122,27126,27431],[11,27107,27103],{"id":27108},"angularblur",[15,27110,27111],{},"Radial motion blur rotating around a center point",[27113,27114],"shader-preview",{"component":27103},[1202,27116,27117],{"id":21717},"Props",[27119,27120],"props-table",{":props":27121},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Intensity of the angular blur effect\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the rotation\"}]",[1202,27123,27125],{"id":27124},"usage","Usage",[23,27127,27128,27186,27246,27302,27360],{":tabs":25},[27,27129,27131],{"className":29,"code":27130,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[34,27132,27133,27141,27148,27157,27162,27170,27178],{"__ignoreMap":32},[37,27134,27135,27137,27139],{"class":39,"line":40},[37,27136,44],{"class":43},[37,27138,48],{"class":47},[37,27140,62],{"class":43},[37,27142,27143,27145],{"class":39,"line":65},[37,27144,75],{"class":43},[37,27146,27147],{"class":47},"AngularBlur\n",[37,27149,27150,27152,27154],{"class":39,"line":72},[37,27151,18081],{"class":51},[37,27153,55],{"class":43},[37,27155,27156],{"class":58},"\"20\"\n",[37,27158,27159],{"class":39,"line":116},[37,27160,27161],{"class":43}," >\n",[37,27163,27164,27166,27168],{"class":39,"line":123},[37,27165,174],{"class":43},[37,27167,3293],{"class":47},[37,27169,113],{"class":43},[37,27171,27172,27174,27176],{"class":39,"line":129},[37,27173,224],{"class":43},[37,27175,27103],{"class":47},[37,27177,62],{"class":43},[37,27179,27180,27182,27184],{"class":39,"line":171},[37,27181,273],{"class":43},[37,27183,48],{"class":47},[37,27185,62],{"class":43},[27,27187,27189],{"className":280,"code":27188,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[34,27190,27191,27199,27205,27218,27222,27230,27238],{"__ignoreMap":32},[37,27192,27193,27195,27197],{"class":39,"line":40},[37,27194,44],{"class":43},[37,27196,48],{"class":291},[37,27198,62],{"class":43},[37,27200,27201,27203],{"class":39,"line":65},[37,27202,75],{"class":43},[37,27204,27147],{"class":291},[37,27206,27207,27209,27211,27213,27216],{"class":39,"line":72},[37,27208,18192],{"class":51},[37,27210,55],{"class":297},[37,27212,326],{"class":43},[37,27214,27215],{"class":291},"20",[37,27217,312],{"class":43},[37,27219,27220],{"class":39,"line":116},[37,27221,27161],{"class":43},[37,27223,27224,27226,27228],{"class":39,"line":123},[37,27225,174],{"class":43},[37,27227,3293],{"class":291},[37,27229,113],{"class":43},[37,27231,27232,27234,27236],{"class":39,"line":129},[37,27233,224],{"class":43},[37,27235,27103],{"class":291},[37,27237,62],{"class":43},[37,27239,27240,27242,27244],{"class":39,"line":171},[37,27241,273],{"class":43},[37,27243,48],{"class":291},[37,27245,62],{"class":43},[27,27247,27248],{"className":3580,"code":27188,"language":3582,"meta":32,"style":32},[34,27249,27250,27258,27264,27274,27278,27286,27294],{"__ignoreMap":32},[37,27251,27252,27254,27256],{"class":39,"line":40},[37,27253,44],{"class":43},[37,27255,48],{"class":291},[37,27257,62],{"class":43},[37,27259,27260,27262],{"class":39,"line":65},[37,27261,75],{"class":43},[37,27263,27147],{"class":291},[37,27265,27266,27268,27270,27272],{"class":39,"line":72},[37,27267,18192],{"class":51},[37,27269,25058],{"class":43},[37,27271,27215],{"class":291},[37,27273,312],{"class":43},[37,27275,27276],{"class":39,"line":116},[37,27277,27161],{"class":43},[37,27279,27280,27282,27284],{"class":39,"line":123},[37,27281,174],{"class":43},[37,27283,3293],{"class":291},[37,27285,113],{"class":43},[37,27287,27288,27290,27292],{"class":39,"line":129},[37,27289,224],{"class":43},[37,27291,27103],{"class":291},[37,27293,62],{"class":43},[37,27295,27296,27298,27300],{"class":39,"line":171},[37,27297,273],{"class":43},[37,27299,48],{"class":291},[37,27301,62],{"class":43},[27,27303,27304],{"className":543,"code":27188,"language":545,"meta":32,"style":32},[34,27305,27306,27314,27320,27332,27336,27344,27352],{"__ignoreMap":32},[37,27307,27308,27310,27312],{"class":39,"line":40},[37,27309,44],{"class":43},[37,27311,48],{"class":291},[37,27313,62],{"class":43},[37,27315,27316,27318],{"class":39,"line":65},[37,27317,75],{"class":43},[37,27319,27147],{"class":291},[37,27321,27322,27324,27326,27328,27330],{"class":39,"line":72},[37,27323,18192],{"class":51},[37,27325,55],{"class":297},[37,27327,326],{"class":43},[37,27329,27215],{"class":291},[37,27331,312],{"class":43},[37,27333,27334],{"class":39,"line":116},[37,27335,27161],{"class":43},[37,27337,27338,27340,27342],{"class":39,"line":123},[37,27339,174],{"class":43},[37,27341,3293],{"class":291},[37,27343,113],{"class":43},[37,27345,27346,27348,27350],{"class":39,"line":129},[37,27347,224],{"class":43},[37,27349,27103],{"class":291},[37,27351,62],{"class":43},[37,27353,27354,27356,27358],{"class":39,"line":171},[37,27355,273],{"class":43},[37,27357,48],{"class":291},[37,27359,62],{"class":43},[27,27361,27363],{"className":987,"code":27362,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'AngularBlur', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,27364,27365,27375,27379,27393,27397,27411,27419,27423,27427],{"__ignoreMap":32},[37,27366,27367,27369,27371,27373],{"class":39,"line":40},[37,27368,1382],{"class":297},[37,27370,9444],{"class":43},[37,27372,1388],{"class":297},[37,27374,9449],{"class":58},[37,27376,27377],{"class":39,"line":65},[37,27378,120],{"emptyLinePlaceholder":119},[37,27380,27381,27383,27385,27387,27389,27391],{"class":39,"line":72},[37,27382,2809],{"class":297},[37,27384,2812],{"class":291},[37,27386,2815],{"class":297},[37,27388,2818],{"class":297},[37,27390,999],{"class":51},[37,27392,1002],{"class":43},[37,27394,27395],{"class":39,"line":116},[37,27396,1007],{"class":43},[37,27398,27399,27401,27404,27407,27409],{"class":39,"line":123},[37,27400,1017],{"class":43},[37,27402,27403],{"class":58},"'AngularBlur'",[37,27405,27406],{"class":43},", props: { intensity: ",[37,27408,27215],{"class":291},[37,27410,5482],{"class":43},[37,27412,27413,27415,27417],{"class":39,"line":129},[37,27414,4949],{"class":43},[37,27416,3941],{"class":58},[37,27418,3207],{"class":43},[37,27420,27421],{"class":39,"line":171},[37,27422,4966],{"class":43},[37,27424,27425],{"class":39,"line":221},[37,27426,1194],{"class":43},[37,27428,27429],{"class":39,"line":231},[37,27430,1200],{"class":43},[1311,27432,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":27434},[27435,27436],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Blurs",{},"/docs/components/angularblur",{"title":27103,"description":27111},"docs/components/AngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":27444,"title":27445,"body":27446,"category":27715,"componentType":21062,"description":27453,"extension":1323,"meta":27716,"navigation":119,"path":27717,"requiresChild":119,"seo":27718,"stem":27719,"__hash__":27720},"components/docs/components/Ascii.md","Ascii",{"type":8,"value":27447,"toc":27711},[27448,27451,27454,27456,27458,27461,27463,27708],[11,27449,27445],{"id":27450},"ascii",[15,27452,27453],{},"Convert imagery to ASCII character art",[27113,27455],{"component":27445},[1202,27457,27117],{"id":21717},[27119,27459],{":props":27460},"[{\"name\":\"characters\",\"type\":\"string\",\"default\":\"@%#*+=-:.\",\"description\":\"Characters ordered from dense to sparse. First character is used for bright areas, last for dark areas.\"},{\"name\":\"cellSize\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Size of each ASCII character cell (normalized to 1080p reference, scales proportionally at other resolutions)\"},{\"name\":\"fontFamily\",\"type\":\"\\\"Azeret Mono\\\" | \\\"Courier Prime\\\" | \\\"Cutive Mono\\\" | \\\"Fira Code\\\" | \\\"Geist Mono\\\" | \\\"IBM Plex Mono\\\" | \\\"JetBrains Mono\\\" | \\\"Major Mono Display\\\" | \\\"Martian Mono\\\" | \\\"Nova Mono\\\" | \\\"Press Start 2P\\\" | \\\"Roboto Mono\\\" | \\\"Share Tech Mono\\\" | \\\"Silkscreen\\\" | \\\"Source Code Pro\\\" | \\\"Space Mono\\\" | \\\"Syne Mono\\\" | \\\"VT323\\\" | \\\"Xanh Mono\\\"\",\"default\":\"JetBrains Mono\",\"description\":\"Font family for characters\"},{\"name\":\"spacing\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Character size within each cell (1.0 = optimal size, 0.0 = smallest)\"},{\"name\":\"gamma\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness curve adjustment. \u003C1 brightens darks (more light characters), >1 darkens midtones (more dark characters). Use to better fit characters to image brightness range.\"},{\"name\":\"alphaThreshold\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pixels with alpha below this threshold become fully transparent.\"},{\"name\":\"preserveAlpha\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"When enabled, output alpha matches input alpha. When disabled, pixels above the alpha threshold become fully opaque.\"}]",[1202,27462,27125],{"id":27124},[23,27464,27465,27510,27554,27598,27642],{":tabs":25},[27,27466,27468],{"className":29,"code":27467,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CAscii>\n \u003CCircle />\n \u003C/Ascii>\n\u003C/Shader>\n",[34,27469,27470,27478,27486,27494,27502],{"__ignoreMap":32},[37,27471,27472,27474,27476],{"class":39,"line":40},[37,27473,44],{"class":43},[37,27475,48],{"class":47},[37,27477,62],{"class":43},[37,27479,27480,27482,27484],{"class":39,"line":65},[37,27481,75],{"class":43},[37,27483,27445],{"class":47},[37,27485,62],{"class":43},[37,27487,27488,27490,27492],{"class":39,"line":72},[37,27489,174],{"class":43},[37,27491,3293],{"class":47},[37,27493,113],{"class":43},[37,27495,27496,27498,27500],{"class":39,"line":116},[37,27497,224],{"class":43},[37,27499,27445],{"class":47},[37,27501,62],{"class":43},[37,27503,27504,27506,27508],{"class":39,"line":123},[37,27505,273],{"class":43},[37,27507,48],{"class":47},[37,27509,62],{"class":43},[27,27511,27512],{"className":280,"code":27467,"language":282,"meta":32,"style":32},[34,27513,27514,27522,27530,27538,27546],{"__ignoreMap":32},[37,27515,27516,27518,27520],{"class":39,"line":40},[37,27517,44],{"class":43},[37,27519,48],{"class":291},[37,27521,62],{"class":43},[37,27523,27524,27526,27528],{"class":39,"line":65},[37,27525,75],{"class":43},[37,27527,27445],{"class":291},[37,27529,62],{"class":43},[37,27531,27532,27534,27536],{"class":39,"line":72},[37,27533,174],{"class":43},[37,27535,3293],{"class":291},[37,27537,113],{"class":43},[37,27539,27540,27542,27544],{"class":39,"line":116},[37,27541,224],{"class":43},[37,27543,27445],{"class":291},[37,27545,62],{"class":43},[37,27547,27548,27550,27552],{"class":39,"line":123},[37,27549,273],{"class":43},[37,27551,48],{"class":291},[37,27553,62],{"class":43},[27,27555,27556],{"className":3580,"code":27467,"language":3582,"meta":32,"style":32},[34,27557,27558,27566,27574,27582,27590],{"__ignoreMap":32},[37,27559,27560,27562,27564],{"class":39,"line":40},[37,27561,44],{"class":43},[37,27563,48],{"class":291},[37,27565,62],{"class":43},[37,27567,27568,27570,27572],{"class":39,"line":65},[37,27569,75],{"class":43},[37,27571,27445],{"class":291},[37,27573,62],{"class":43},[37,27575,27576,27578,27580],{"class":39,"line":72},[37,27577,174],{"class":43},[37,27579,3293],{"class":291},[37,27581,113],{"class":43},[37,27583,27584,27586,27588],{"class":39,"line":116},[37,27585,224],{"class":43},[37,27587,27445],{"class":291},[37,27589,62],{"class":43},[37,27591,27592,27594,27596],{"class":39,"line":123},[37,27593,273],{"class":43},[37,27595,48],{"class":291},[37,27597,62],{"class":43},[27,27599,27600],{"className":543,"code":27467,"language":545,"meta":32,"style":32},[34,27601,27602,27610,27618,27626,27634],{"__ignoreMap":32},[37,27603,27604,27606,27608],{"class":39,"line":40},[37,27605,44],{"class":43},[37,27607,48],{"class":291},[37,27609,62],{"class":43},[37,27611,27612,27614,27616],{"class":39,"line":65},[37,27613,75],{"class":43},[37,27615,27445],{"class":291},[37,27617,62],{"class":43},[37,27619,27620,27622,27624],{"class":39,"line":72},[37,27621,174],{"class":43},[37,27623,3293],{"class":291},[37,27625,113],{"class":43},[37,27627,27628,27630,27632],{"class":39,"line":116},[37,27629,224],{"class":43},[37,27631,27445],{"class":291},[37,27633,62],{"class":43},[37,27635,27636,27638,27640],{"class":39,"line":123},[37,27637,273],{"class":43},[37,27639,48],{"class":291},[37,27641,62],{"class":43},[27,27643,27645],{"className":987,"code":27644,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ascii', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,27646,27647,27657,27661,27675,27679,27688,27696,27700,27704],{"__ignoreMap":32},[37,27648,27649,27651,27653,27655],{"class":39,"line":40},[37,27650,1382],{"class":297},[37,27652,9444],{"class":43},[37,27654,1388],{"class":297},[37,27656,9449],{"class":58},[37,27658,27659],{"class":39,"line":65},[37,27660,120],{"emptyLinePlaceholder":119},[37,27662,27663,27665,27667,27669,27671,27673],{"class":39,"line":72},[37,27664,2809],{"class":297},[37,27666,2812],{"class":291},[37,27668,2815],{"class":297},[37,27670,2818],{"class":297},[37,27672,999],{"class":51},[37,27674,1002],{"class":43},[37,27676,27677],{"class":39,"line":116},[37,27678,1007],{"class":43},[37,27680,27681,27683,27686],{"class":39,"line":123},[37,27682,1017],{"class":43},[37,27684,27685],{"class":58},"'Ascii'",[37,27687,4944],{"class":43},[37,27689,27690,27692,27694],{"class":39,"line":129},[37,27691,4949],{"class":43},[37,27693,3941],{"class":58},[37,27695,3207],{"class":43},[37,27697,27698],{"class":39,"line":171},[37,27699,4966],{"class":43},[37,27701,27702],{"class":39,"line":221},[37,27703,1194],{"class":43},[37,27705,27706],{"class":39,"line":231},[37,27707,1200],{"class":43},[1311,27709,27710],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}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 pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":32,"searchDepth":65,"depth":65,"links":27712},[27713,27714],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Stylize",{},"/docs/components/ascii",{"title":27445,"description":27453},"docs/components/Ascii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":27722,"title":10549,"body":27723,"category":27972,"componentType":21056,"description":27730,"extension":1323,"meta":27973,"navigation":119,"path":27974,"requiresChild":27975,"seo":27976,"stem":27977,"__hash__":27978},"components/docs/components/Aurora.md",{"type":8,"value":27724,"toc":27968},[27725,27728,27731,27733,27735,27738,27740,27966],[11,27726,10549],{"id":27727},"aurora",[15,27729,27730],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[27113,27732],{"component":10549},[1202,27734,27117],{"id":21717},[27119,27736],{":props":27737},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#a533f8\",\"description\":\"Edge color at the curtain base\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#22ee88\",\"description\":\"Core color in the bright center\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#1694e8\",\"description\":\"Tip color at the ray ends\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Shifts color distribution across the curtain height\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"80\",\"description\":\"Overall aurora brightness\"},{\"name\":\"curtainCount\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Number of aurora curtain layers\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Animation speed\"},{\"name\":\"waviness\",\"type\":\"number\",\"default\":\"50\",\"description\":\"How much the curtains undulate\"},{\"name\":\"rayDensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Density of vertical ray structures\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"120\",\"description\":\"How tall the aurora extends\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0}\",\"description\":\"Center position of the aurora\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for variation\"}]",[1202,27739,27125],{"id":27124},[23,27741,27742,27783,27827,27867,27909],{":tabs":25},[27,27743,27745],{"className":29,"code":27744,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n />\n\u003C/Shader>\n",[34,27746,27747,27755,27762,27771,27775],{"__ignoreMap":32},[37,27748,27749,27751,27753],{"class":39,"line":40},[37,27750,44],{"class":43},[37,27752,48],{"class":47},[37,27754,62],{"class":43},[37,27756,27757,27759],{"class":39,"line":65},[37,27758,75],{"class":43},[37,27760,27761],{"class":47},"Aurora\n",[37,27763,27764,27766,27768],{"class":39,"line":72},[37,27765,18081],{"class":51},[37,27767,55],{"class":43},[37,27769,27770],{"class":58},"\"80\"\n",[37,27772,27773],{"class":39,"line":116},[37,27774,2314],{"class":43},[37,27776,27777,27779,27781],{"class":39,"line":123},[37,27778,273],{"class":43},[37,27780,48],{"class":47},[37,27782,62],{"class":43},[27,27784,27786],{"className":280,"code":27785,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CAurora\n intensity={80}\n />\n\u003C/Shader>\n",[34,27787,27788,27796,27802,27815,27819],{"__ignoreMap":32},[37,27789,27790,27792,27794],{"class":39,"line":40},[37,27791,44],{"class":43},[37,27793,48],{"class":291},[37,27795,62],{"class":43},[37,27797,27798,27800],{"class":39,"line":65},[37,27799,75],{"class":43},[37,27801,27761],{"class":291},[37,27803,27804,27806,27808,27810,27813],{"class":39,"line":72},[37,27805,18192],{"class":51},[37,27807,55],{"class":297},[37,27809,326],{"class":43},[37,27811,27812],{"class":291},"80",[37,27814,312],{"class":43},[37,27816,27817],{"class":39,"line":116},[37,27818,2314],{"class":43},[37,27820,27821,27823,27825],{"class":39,"line":123},[37,27822,273],{"class":43},[37,27824,48],{"class":291},[37,27826,62],{"class":43},[27,27828,27829],{"className":3580,"code":27785,"language":3582,"meta":32,"style":32},[34,27830,27831,27839,27845,27855,27859],{"__ignoreMap":32},[37,27832,27833,27835,27837],{"class":39,"line":40},[37,27834,44],{"class":43},[37,27836,48],{"class":291},[37,27838,62],{"class":43},[37,27840,27841,27843],{"class":39,"line":65},[37,27842,75],{"class":43},[37,27844,27761],{"class":291},[37,27846,27847,27849,27851,27853],{"class":39,"line":72},[37,27848,18192],{"class":51},[37,27850,25058],{"class":43},[37,27852,27812],{"class":291},[37,27854,312],{"class":43},[37,27856,27857],{"class":39,"line":116},[37,27858,2314],{"class":43},[37,27860,27861,27863,27865],{"class":39,"line":123},[37,27862,273],{"class":43},[37,27864,48],{"class":291},[37,27866,62],{"class":43},[27,27868,27869],{"className":543,"code":27785,"language":545,"meta":32,"style":32},[34,27870,27871,27879,27885,27897,27901],{"__ignoreMap":32},[37,27872,27873,27875,27877],{"class":39,"line":40},[37,27874,44],{"class":43},[37,27876,48],{"class":291},[37,27878,62],{"class":43},[37,27880,27881,27883],{"class":39,"line":65},[37,27882,75],{"class":43},[37,27884,27761],{"class":291},[37,27886,27887,27889,27891,27893,27895],{"class":39,"line":72},[37,27888,18192],{"class":51},[37,27890,55],{"class":297},[37,27892,326],{"class":43},[37,27894,27812],{"class":291},[37,27896,312],{"class":43},[37,27898,27899],{"class":39,"line":116},[37,27900,2314],{"class":43},[37,27902,27903,27905,27907],{"class":39,"line":123},[37,27904,273],{"class":43},[37,27906,48],{"class":291},[37,27908,62],{"class":43},[27,27910,27912],{"className":987,"code":27911,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Aurora', props: { intensity: 80 } }\n ]\n})\n",[34,27913,27914,27924,27928,27942,27946,27958,27962],{"__ignoreMap":32},[37,27915,27916,27918,27920,27922],{"class":39,"line":40},[37,27917,1382],{"class":297},[37,27919,9444],{"class":43},[37,27921,1388],{"class":297},[37,27923,9449],{"class":58},[37,27925,27926],{"class":39,"line":65},[37,27927,120],{"emptyLinePlaceholder":119},[37,27929,27930,27932,27934,27936,27938,27940],{"class":39,"line":72},[37,27931,2809],{"class":297},[37,27933,2812],{"class":291},[37,27935,2815],{"class":297},[37,27937,2818],{"class":297},[37,27939,999],{"class":51},[37,27941,1002],{"class":43},[37,27943,27944],{"class":39,"line":116},[37,27945,1007],{"class":43},[37,27947,27948,27950,27952,27954,27956],{"class":39,"line":123},[37,27949,1017],{"class":43},[37,27951,10927],{"class":58},[37,27953,27406],{"class":43},[37,27955,27812],{"class":291},[37,27957,1142],{"class":43},[37,27959,27960],{"class":39,"line":129},[37,27961,1194],{"class":43},[37,27963,27964],{"class":39,"line":171},[37,27965,1200],{"class":43},[1311,27967,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":27969},[27970,27971],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Textures",{},"/docs/components/aurora",false,{"title":10549,"description":27730},"docs/components/Aurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":27980,"title":27981,"body":27982,"category":27972,"componentType":21056,"description":27989,"extension":1323,"meta":28174,"navigation":119,"path":28175,"requiresChild":27975,"seo":28176,"stem":28177,"__hash__":28178},"components/docs/components/Beam.md","Beam",{"type":8,"value":27983,"toc":28170},[27984,27987,27990,27992,27994,27997,27999,28168],[11,27985,27981],{"id":27986},"beam",[15,27988,27989],{},"A beam of light from one point to another.",[27113,27991],{"component":27981},[1202,27993,27117],{"id":21717},[27119,27995],{":props":27996},"[{\"name\":\"startPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.5}\",\"description\":\"Starting point of the beam\"},{\"name\":\"endPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.5}\",\"description\":\"Ending point of the beam\"},{\"name\":\"startThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Thickness at the start of the beam\"},{\"name\":\"endThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Thickness at the end of the beam\"},{\"name\":\"startSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness at the start of the beam\"},{\"name\":\"endSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness at the end of the beam\"},{\"name\":\"insideColor\",\"type\":\"string\",\"default\":\"#FF0000\",\"description\":\"Color at the center of the beam\"},{\"name\":\"outsideColor\",\"type\":\"string\",\"default\":\"#0000FF\",\"description\":\"Color at the edges of the beam\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,27998,27125],{"id":27124},[23,28000,28001,28030,28058,28086,28114],{":tabs":25},[27,28002,28004],{"className":29,"code":28003,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CBeam />\n\u003C/Shader>\n",[34,28005,28006,28014,28022],{"__ignoreMap":32},[37,28007,28008,28010,28012],{"class":39,"line":40},[37,28009,44],{"class":43},[37,28011,48],{"class":47},[37,28013,62],{"class":43},[37,28015,28016,28018,28020],{"class":39,"line":65},[37,28017,75],{"class":43},[37,28019,27981],{"class":47},[37,28021,113],{"class":43},[37,28023,28024,28026,28028],{"class":39,"line":72},[37,28025,273],{"class":43},[37,28027,48],{"class":47},[37,28029,62],{"class":43},[27,28031,28032],{"className":280,"code":28003,"language":282,"meta":32,"style":32},[34,28033,28034,28042,28050],{"__ignoreMap":32},[37,28035,28036,28038,28040],{"class":39,"line":40},[37,28037,44],{"class":43},[37,28039,48],{"class":291},[37,28041,62],{"class":43},[37,28043,28044,28046,28048],{"class":39,"line":65},[37,28045,75],{"class":43},[37,28047,27981],{"class":291},[37,28049,113],{"class":43},[37,28051,28052,28054,28056],{"class":39,"line":72},[37,28053,273],{"class":43},[37,28055,48],{"class":291},[37,28057,62],{"class":43},[27,28059,28060],{"className":3580,"code":28003,"language":3582,"meta":32,"style":32},[34,28061,28062,28070,28078],{"__ignoreMap":32},[37,28063,28064,28066,28068],{"class":39,"line":40},[37,28065,44],{"class":43},[37,28067,48],{"class":291},[37,28069,62],{"class":43},[37,28071,28072,28074,28076],{"class":39,"line":65},[37,28073,75],{"class":43},[37,28075,27981],{"class":291},[37,28077,113],{"class":43},[37,28079,28080,28082,28084],{"class":39,"line":72},[37,28081,273],{"class":43},[37,28083,48],{"class":291},[37,28085,62],{"class":43},[27,28087,28088],{"className":543,"code":28003,"language":545,"meta":32,"style":32},[34,28089,28090,28098,28106],{"__ignoreMap":32},[37,28091,28092,28094,28096],{"class":39,"line":40},[37,28093,44],{"class":43},[37,28095,48],{"class":291},[37,28097,62],{"class":43},[37,28099,28100,28102,28104],{"class":39,"line":65},[37,28101,75],{"class":43},[37,28103,27981],{"class":291},[37,28105,113],{"class":43},[37,28107,28108,28110,28112],{"class":39,"line":72},[37,28109,273],{"class":43},[37,28111,48],{"class":291},[37,28113,62],{"class":43},[27,28115,28117],{"className":987,"code":28116,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Beam', props: {} }\n ]\n})\n",[34,28118,28119,28129,28133,28147,28151,28160,28164],{"__ignoreMap":32},[37,28120,28121,28123,28125,28127],{"class":39,"line":40},[37,28122,1382],{"class":297},[37,28124,9444],{"class":43},[37,28126,1388],{"class":297},[37,28128,9449],{"class":58},[37,28130,28131],{"class":39,"line":65},[37,28132,120],{"emptyLinePlaceholder":119},[37,28134,28135,28137,28139,28141,28143,28145],{"class":39,"line":72},[37,28136,2809],{"class":297},[37,28138,2812],{"class":291},[37,28140,2815],{"class":297},[37,28142,2818],{"class":297},[37,28144,999],{"class":51},[37,28146,1002],{"class":43},[37,28148,28149],{"class":39,"line":116},[37,28150,1007],{"class":43},[37,28152,28153,28155,28158],{"class":39,"line":123},[37,28154,1017],{"class":43},[37,28156,28157],{"class":58},"'Beam'",[37,28159,3207],{"class":43},[37,28161,28162],{"class":39,"line":129},[37,28163,1194],{"class":43},[37,28165,28166],{"class":39,"line":171},[37,28167,1200],{"class":43},[1311,28169,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":28171},[28172,28173],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/beam",{"title":27981,"description":27989},"docs/components/Beam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":28180,"title":28181,"body":28182,"category":27972,"componentType":21056,"description":28189,"extension":1323,"meta":28374,"navigation":119,"path":28375,"requiresChild":27975,"seo":28376,"stem":28377,"__hash__":28378},"components/docs/components/Blob.md","Blob",{"type":8,"value":28183,"toc":28370},[28184,28187,28190,28192,28194,28197,28199,28368],[11,28185,28181],{"id":28186},"blob",[15,28188,28189],{},"Organic animated blob with 3D lighting and gradients",[27113,28191],{"component":28181},[1202,28193,27117],{"id":21717},[27119,28195],{":props":28196},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff6b35\",\"description\":\"Primary color of the blob\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e91e63\",\"description\":\"Secondary color of the blob\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Size of the blob\"},{\"name\":\"deformation\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How organic and blobby the shape is (0 = circle, 1 = very blobby)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the blob edges (combines edge width and transition curve)\"},{\"name\":\"highlightIntensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of specular highlight effect\"},{\"name\":\"highlightX\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Light direction X component\"},{\"name\":\"highlightY\",\"type\":\"number\",\"default\":\"-0.3\",\"description\":\"Light direction Y component\"},{\"name\":\"highlightZ\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Light direction Z component\"},{\"name\":\"highlightColor\",\"type\":\"string\",\"default\":\"#ffe11a\",\"description\":\"Color of the specular highlight\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Adjusts the starting state, useful for variation\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the blob\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,28198,27125],{"id":27124},[23,28200,28201,28230,28258,28286,28314],{":tabs":25},[27,28202,28204],{"className":29,"code":28203,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CBlob />\n\u003C/Shader>\n",[34,28205,28206,28214,28222],{"__ignoreMap":32},[37,28207,28208,28210,28212],{"class":39,"line":40},[37,28209,44],{"class":43},[37,28211,48],{"class":47},[37,28213,62],{"class":43},[37,28215,28216,28218,28220],{"class":39,"line":65},[37,28217,75],{"class":43},[37,28219,28181],{"class":47},[37,28221,113],{"class":43},[37,28223,28224,28226,28228],{"class":39,"line":72},[37,28225,273],{"class":43},[37,28227,48],{"class":47},[37,28229,62],{"class":43},[27,28231,28232],{"className":280,"code":28203,"language":282,"meta":32,"style":32},[34,28233,28234,28242,28250],{"__ignoreMap":32},[37,28235,28236,28238,28240],{"class":39,"line":40},[37,28237,44],{"class":43},[37,28239,48],{"class":291},[37,28241,62],{"class":43},[37,28243,28244,28246,28248],{"class":39,"line":65},[37,28245,75],{"class":43},[37,28247,28181],{"class":291},[37,28249,113],{"class":43},[37,28251,28252,28254,28256],{"class":39,"line":72},[37,28253,273],{"class":43},[37,28255,48],{"class":291},[37,28257,62],{"class":43},[27,28259,28260],{"className":3580,"code":28203,"language":3582,"meta":32,"style":32},[34,28261,28262,28270,28278],{"__ignoreMap":32},[37,28263,28264,28266,28268],{"class":39,"line":40},[37,28265,44],{"class":43},[37,28267,48],{"class":291},[37,28269,62],{"class":43},[37,28271,28272,28274,28276],{"class":39,"line":65},[37,28273,75],{"class":43},[37,28275,28181],{"class":291},[37,28277,113],{"class":43},[37,28279,28280,28282,28284],{"class":39,"line":72},[37,28281,273],{"class":43},[37,28283,48],{"class":291},[37,28285,62],{"class":43},[27,28287,28288],{"className":543,"code":28203,"language":545,"meta":32,"style":32},[34,28289,28290,28298,28306],{"__ignoreMap":32},[37,28291,28292,28294,28296],{"class":39,"line":40},[37,28293,44],{"class":43},[37,28295,48],{"class":291},[37,28297,62],{"class":43},[37,28299,28300,28302,28304],{"class":39,"line":65},[37,28301,75],{"class":43},[37,28303,28181],{"class":291},[37,28305,113],{"class":43},[37,28307,28308,28310,28312],{"class":39,"line":72},[37,28309,273],{"class":43},[37,28311,48],{"class":291},[37,28313,62],{"class":43},[27,28315,28317],{"className":987,"code":28316,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blob', props: {} }\n ]\n})\n",[34,28318,28319,28329,28333,28347,28351,28360,28364],{"__ignoreMap":32},[37,28320,28321,28323,28325,28327],{"class":39,"line":40},[37,28322,1382],{"class":297},[37,28324,9444],{"class":43},[37,28326,1388],{"class":297},[37,28328,9449],{"class":58},[37,28330,28331],{"class":39,"line":65},[37,28332,120],{"emptyLinePlaceholder":119},[37,28334,28335,28337,28339,28341,28343,28345],{"class":39,"line":72},[37,28336,2809],{"class":297},[37,28338,2812],{"class":291},[37,28340,2815],{"class":297},[37,28342,2818],{"class":297},[37,28344,999],{"class":51},[37,28346,1002],{"class":43},[37,28348,28349],{"class":39,"line":116},[37,28350,1007],{"class":43},[37,28352,28353,28355,28358],{"class":39,"line":123},[37,28354,1017],{"class":43},[37,28356,28357],{"class":58},"'Blob'",[37,28359,3207],{"class":43},[37,28361,28362],{"class":39,"line":129},[37,28363,1194],{"class":43},[37,28365,28366],{"class":39,"line":171},[37,28367,1200],{"class":43},[1311,28369,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":28371},[28372,28373],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/blob",{"title":28181,"description":28189},"docs/components/Blob","2a5XrgmcJxcBLcEQkxs8e3ZaxmxCERp56Moc00FmMUE",{"id":28380,"title":9699,"body":28381,"category":27437,"componentType":21062,"description":28388,"extension":1323,"meta":28707,"navigation":119,"path":28708,"requiresChild":119,"seo":28709,"stem":28710,"__hash__":28711},"components/docs/components/Blur.md",{"type":8,"value":28382,"toc":28703},[28383,28386,28389,28391,28393,28396,28398,28701],[11,28384,9699],{"id":28385},"blur",[15,28387,28388],{},"A simple Gaussian blur effect",[27113,28390],{"component":9699},[1202,28392,27117],{"id":21717},[27119,28394],{":props":28395},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[1202,28397,27125],{"id":27124},[23,28399,28400,28457,28517,28573,28631],{":tabs":25},[27,28401,28403],{"className":29,"code":28402,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[34,28404,28405,28413,28420,28429,28433,28441,28449],{"__ignoreMap":32},[37,28406,28407,28409,28411],{"class":39,"line":40},[37,28408,44],{"class":43},[37,28410,48],{"class":47},[37,28412,62],{"class":43},[37,28414,28415,28417],{"class":39,"line":65},[37,28416,75],{"class":43},[37,28418,28419],{"class":47},"Blur\n",[37,28421,28422,28424,28426],{"class":39,"line":72},[37,28423,18081],{"class":51},[37,28425,55],{"class":43},[37,28427,28428],{"class":58},"\"50\"\n",[37,28430,28431],{"class":39,"line":116},[37,28432,27161],{"class":43},[37,28434,28435,28437,28439],{"class":39,"line":123},[37,28436,174],{"class":43},[37,28438,3293],{"class":47},[37,28440,113],{"class":43},[37,28442,28443,28445,28447],{"class":39,"line":129},[37,28444,224],{"class":43},[37,28446,9699],{"class":47},[37,28448,62],{"class":43},[37,28450,28451,28453,28455],{"class":39,"line":171},[37,28452,273],{"class":43},[37,28454,48],{"class":47},[37,28456,62],{"class":43},[27,28458,28460],{"className":280,"code":28459,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[34,28461,28462,28470,28476,28489,28493,28501,28509],{"__ignoreMap":32},[37,28463,28464,28466,28468],{"class":39,"line":40},[37,28465,44],{"class":43},[37,28467,48],{"class":291},[37,28469,62],{"class":43},[37,28471,28472,28474],{"class":39,"line":65},[37,28473,75],{"class":43},[37,28475,28419],{"class":291},[37,28477,28478,28480,28482,28484,28487],{"class":39,"line":72},[37,28479,18192],{"class":51},[37,28481,55],{"class":297},[37,28483,326],{"class":43},[37,28485,28486],{"class":291},"50",[37,28488,312],{"class":43},[37,28490,28491],{"class":39,"line":116},[37,28492,27161],{"class":43},[37,28494,28495,28497,28499],{"class":39,"line":123},[37,28496,174],{"class":43},[37,28498,3293],{"class":291},[37,28500,113],{"class":43},[37,28502,28503,28505,28507],{"class":39,"line":129},[37,28504,224],{"class":43},[37,28506,9699],{"class":291},[37,28508,62],{"class":43},[37,28510,28511,28513,28515],{"class":39,"line":171},[37,28512,273],{"class":43},[37,28514,48],{"class":291},[37,28516,62],{"class":43},[27,28518,28519],{"className":3580,"code":28459,"language":3582,"meta":32,"style":32},[34,28520,28521,28529,28535,28545,28549,28557,28565],{"__ignoreMap":32},[37,28522,28523,28525,28527],{"class":39,"line":40},[37,28524,44],{"class":43},[37,28526,48],{"class":291},[37,28528,62],{"class":43},[37,28530,28531,28533],{"class":39,"line":65},[37,28532,75],{"class":43},[37,28534,28419],{"class":291},[37,28536,28537,28539,28541,28543],{"class":39,"line":72},[37,28538,18192],{"class":51},[37,28540,25058],{"class":43},[37,28542,28486],{"class":291},[37,28544,312],{"class":43},[37,28546,28547],{"class":39,"line":116},[37,28548,27161],{"class":43},[37,28550,28551,28553,28555],{"class":39,"line":123},[37,28552,174],{"class":43},[37,28554,3293],{"class":291},[37,28556,113],{"class":43},[37,28558,28559,28561,28563],{"class":39,"line":129},[37,28560,224],{"class":43},[37,28562,9699],{"class":291},[37,28564,62],{"class":43},[37,28566,28567,28569,28571],{"class":39,"line":171},[37,28568,273],{"class":43},[37,28570,48],{"class":291},[37,28572,62],{"class":43},[27,28574,28575],{"className":543,"code":28459,"language":545,"meta":32,"style":32},[34,28576,28577,28585,28591,28603,28607,28615,28623],{"__ignoreMap":32},[37,28578,28579,28581,28583],{"class":39,"line":40},[37,28580,44],{"class":43},[37,28582,48],{"class":291},[37,28584,62],{"class":43},[37,28586,28587,28589],{"class":39,"line":65},[37,28588,75],{"class":43},[37,28590,28419],{"class":291},[37,28592,28593,28595,28597,28599,28601],{"class":39,"line":72},[37,28594,18192],{"class":51},[37,28596,55],{"class":297},[37,28598,326],{"class":43},[37,28600,28486],{"class":291},[37,28602,312],{"class":43},[37,28604,28605],{"class":39,"line":116},[37,28606,27161],{"class":43},[37,28608,28609,28611,28613],{"class":39,"line":123},[37,28610,174],{"class":43},[37,28612,3293],{"class":291},[37,28614,113],{"class":43},[37,28616,28617,28619,28621],{"class":39,"line":129},[37,28618,224],{"class":43},[37,28620,9699],{"class":291},[37,28622,62],{"class":43},[37,28624,28625,28627,28629],{"class":39,"line":171},[37,28626,273],{"class":43},[37,28628,48],{"class":291},[37,28630,62],{"class":43},[27,28632,28634],{"className":987,"code":28633,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blur', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,28635,28636,28646,28650,28664,28668,28681,28689,28693,28697],{"__ignoreMap":32},[37,28637,28638,28640,28642,28644],{"class":39,"line":40},[37,28639,1382],{"class":297},[37,28641,9444],{"class":43},[37,28643,1388],{"class":297},[37,28645,9449],{"class":58},[37,28647,28648],{"class":39,"line":65},[37,28649,120],{"emptyLinePlaceholder":119},[37,28651,28652,28654,28656,28658,28660,28662],{"class":39,"line":72},[37,28653,2809],{"class":297},[37,28655,2812],{"class":291},[37,28657,2815],{"class":297},[37,28659,2818],{"class":297},[37,28661,999],{"class":51},[37,28663,1002],{"class":43},[37,28665,28666],{"class":39,"line":116},[37,28667,1007],{"class":43},[37,28669,28670,28672,28675,28677,28679],{"class":39,"line":123},[37,28671,1017],{"class":43},[37,28673,28674],{"class":58},"'Blur'",[37,28676,27406],{"class":43},[37,28678,28486],{"class":291},[37,28680,5482],{"class":43},[37,28682,28683,28685,28687],{"class":39,"line":129},[37,28684,4949],{"class":43},[37,28686,3941],{"class":58},[37,28688,3207],{"class":43},[37,28690,28691],{"class":39,"line":171},[37,28692,4966],{"class":43},[37,28694,28695],{"class":39,"line":221},[37,28696,1194],{"class":43},[37,28698,28699],{"class":39,"line":231},[37,28700,1200],{"class":43},[1311,28702,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":28704},[28705,28706],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/blur",{"title":9699,"description":28388},"docs/components/Blur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":28713,"title":28714,"body":28715,"category":28983,"componentType":21062,"description":28722,"extension":1323,"meta":28984,"navigation":119,"path":28985,"requiresChild":119,"seo":28986,"stem":28987,"__hash__":28988},"components/docs/components/BrightnessContrast.md","BrightnessContrast",{"type":8,"value":28716,"toc":28979},[28717,28720,28723,28725,28727,28730,28732,28977],[11,28718,28714],{"id":28719},"brightnesscontrast",[15,28721,28722],{},"Adjust brightness and contrast of the image",[27113,28724],{"component":28714},[1202,28726,27117],{"id":21717},[27119,28728],{":props":28729},"[{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Brightness adjustment (-1 to 1)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Contrast adjustment (-1 to 1)\"}]",[1202,28731,27125],{"id":27124},[23,28733,28734,28779,28823,28867,28911],{":tabs":25},[27,28735,28737],{"className":29,"code":28736,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle />\n \u003C/BrightnessContrast>\n\u003C/Shader>\n",[34,28738,28739,28747,28755,28763,28771],{"__ignoreMap":32},[37,28740,28741,28743,28745],{"class":39,"line":40},[37,28742,44],{"class":43},[37,28744,48],{"class":47},[37,28746,62],{"class":43},[37,28748,28749,28751,28753],{"class":39,"line":65},[37,28750,75],{"class":43},[37,28752,28714],{"class":47},[37,28754,62],{"class":43},[37,28756,28757,28759,28761],{"class":39,"line":72},[37,28758,174],{"class":43},[37,28760,3293],{"class":47},[37,28762,113],{"class":43},[37,28764,28765,28767,28769],{"class":39,"line":116},[37,28766,224],{"class":43},[37,28768,28714],{"class":47},[37,28770,62],{"class":43},[37,28772,28773,28775,28777],{"class":39,"line":123},[37,28774,273],{"class":43},[37,28776,48],{"class":47},[37,28778,62],{"class":43},[27,28780,28781],{"className":280,"code":28736,"language":282,"meta":32,"style":32},[34,28782,28783,28791,28799,28807,28815],{"__ignoreMap":32},[37,28784,28785,28787,28789],{"class":39,"line":40},[37,28786,44],{"class":43},[37,28788,48],{"class":291},[37,28790,62],{"class":43},[37,28792,28793,28795,28797],{"class":39,"line":65},[37,28794,75],{"class":43},[37,28796,28714],{"class":291},[37,28798,62],{"class":43},[37,28800,28801,28803,28805],{"class":39,"line":72},[37,28802,174],{"class":43},[37,28804,3293],{"class":291},[37,28806,113],{"class":43},[37,28808,28809,28811,28813],{"class":39,"line":116},[37,28810,224],{"class":43},[37,28812,28714],{"class":291},[37,28814,62],{"class":43},[37,28816,28817,28819,28821],{"class":39,"line":123},[37,28818,273],{"class":43},[37,28820,48],{"class":291},[37,28822,62],{"class":43},[27,28824,28825],{"className":3580,"code":28736,"language":3582,"meta":32,"style":32},[34,28826,28827,28835,28843,28851,28859],{"__ignoreMap":32},[37,28828,28829,28831,28833],{"class":39,"line":40},[37,28830,44],{"class":43},[37,28832,48],{"class":291},[37,28834,62],{"class":43},[37,28836,28837,28839,28841],{"class":39,"line":65},[37,28838,75],{"class":43},[37,28840,28714],{"class":291},[37,28842,62],{"class":43},[37,28844,28845,28847,28849],{"class":39,"line":72},[37,28846,174],{"class":43},[37,28848,3293],{"class":291},[37,28850,113],{"class":43},[37,28852,28853,28855,28857],{"class":39,"line":116},[37,28854,224],{"class":43},[37,28856,28714],{"class":291},[37,28858,62],{"class":43},[37,28860,28861,28863,28865],{"class":39,"line":123},[37,28862,273],{"class":43},[37,28864,48],{"class":291},[37,28866,62],{"class":43},[27,28868,28869],{"className":543,"code":28736,"language":545,"meta":32,"style":32},[34,28870,28871,28879,28887,28895,28903],{"__ignoreMap":32},[37,28872,28873,28875,28877],{"class":39,"line":40},[37,28874,44],{"class":43},[37,28876,48],{"class":291},[37,28878,62],{"class":43},[37,28880,28881,28883,28885],{"class":39,"line":65},[37,28882,75],{"class":43},[37,28884,28714],{"class":291},[37,28886,62],{"class":43},[37,28888,28889,28891,28893],{"class":39,"line":72},[37,28890,174],{"class":43},[37,28892,3293],{"class":291},[37,28894,113],{"class":43},[37,28896,28897,28899,28901],{"class":39,"line":116},[37,28898,224],{"class":43},[37,28900,28714],{"class":291},[37,28902,62],{"class":43},[37,28904,28905,28907,28909],{"class":39,"line":123},[37,28906,273],{"class":43},[37,28908,48],{"class":291},[37,28910,62],{"class":43},[27,28912,28914],{"className":987,"code":28913,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrightnessContrast', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,28915,28916,28926,28930,28944,28948,28957,28965,28969,28973],{"__ignoreMap":32},[37,28917,28918,28920,28922,28924],{"class":39,"line":40},[37,28919,1382],{"class":297},[37,28921,9444],{"class":43},[37,28923,1388],{"class":297},[37,28925,9449],{"class":58},[37,28927,28928],{"class":39,"line":65},[37,28929,120],{"emptyLinePlaceholder":119},[37,28931,28932,28934,28936,28938,28940,28942],{"class":39,"line":72},[37,28933,2809],{"class":297},[37,28935,2812],{"class":291},[37,28937,2815],{"class":297},[37,28939,2818],{"class":297},[37,28941,999],{"class":51},[37,28943,1002],{"class":43},[37,28945,28946],{"class":39,"line":116},[37,28947,1007],{"class":43},[37,28949,28950,28952,28955],{"class":39,"line":123},[37,28951,1017],{"class":43},[37,28953,28954],{"class":58},"'BrightnessContrast'",[37,28956,4944],{"class":43},[37,28958,28959,28961,28963],{"class":39,"line":129},[37,28960,4949],{"class":43},[37,28962,3941],{"class":58},[37,28964,3207],{"class":43},[37,28966,28967],{"class":39,"line":171},[37,28968,4966],{"class":43},[37,28970,28971],{"class":39,"line":221},[37,28972,1194],{"class":43},[37,28974,28975],{"class":39,"line":231},[37,28976,1200],{"class":43},[1311,28978,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":28980},[28981,28982],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Adjustments",{},"/docs/components/brightnesscontrast",{"title":28714,"description":28722},"docs/components/BrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":28990,"title":28991,"body":28992,"category":29317,"componentType":21062,"description":28999,"extension":1323,"meta":29318,"navigation":119,"path":29319,"requiresChild":119,"seo":29320,"stem":29321,"__hash__":29322},"components/docs/components/Bulge.md","Bulge",{"type":8,"value":28993,"toc":29313},[28994,28997,29000,29002,29004,29007,29009,29311],[11,28995,28991],{"id":28996},"bulge",[15,28998,28999],{},"Magnify or pinch content around a center point",[27113,29001],{"component":28991},[1202,29003,27117],{"id":21717},[27119,29005],{":props":29006},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the bulge effect\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the bulge effect (positive = bulge out, negative = pinch in)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The radius of the bulge effect area\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Controls the smoothness of the transition (0 = hard edge, 1 = very smooth)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,29008,27125],{"id":27124},[23,29010,29011,29068,29127,29183,29241],{":tabs":25},[27,29012,29014],{"className":29,"code":29013,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[34,29015,29016,29024,29031,29040,29044,29052,29060],{"__ignoreMap":32},[37,29017,29018,29020,29022],{"class":39,"line":40},[37,29019,44],{"class":43},[37,29021,48],{"class":47},[37,29023,62],{"class":43},[37,29025,29026,29028],{"class":39,"line":65},[37,29027,75],{"class":43},[37,29029,29030],{"class":47},"Bulge\n",[37,29032,29033,29035,29037],{"class":39,"line":72},[37,29034,15113],{"class":51},[37,29036,55],{"class":43},[37,29038,29039],{"class":58},"\"1\"\n",[37,29041,29042],{"class":39,"line":116},[37,29043,27161],{"class":43},[37,29045,29046,29048,29050],{"class":39,"line":123},[37,29047,174],{"class":43},[37,29049,3293],{"class":47},[37,29051,113],{"class":43},[37,29053,29054,29056,29058],{"class":39,"line":129},[37,29055,224],{"class":43},[37,29057,28991],{"class":47},[37,29059,62],{"class":43},[37,29061,29062,29064,29066],{"class":39,"line":171},[37,29063,273],{"class":43},[37,29065,48],{"class":47},[37,29067,62],{"class":43},[27,29069,29071],{"className":280,"code":29070,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[34,29072,29073,29081,29087,29099,29103,29111,29119],{"__ignoreMap":32},[37,29074,29075,29077,29079],{"class":39,"line":40},[37,29076,44],{"class":43},[37,29078,48],{"class":291},[37,29080,62],{"class":43},[37,29082,29083,29085],{"class":39,"line":65},[37,29084,75],{"class":43},[37,29086,29030],{"class":291},[37,29088,29089,29091,29093,29095,29097],{"class":39,"line":72},[37,29090,7580],{"class":51},[37,29092,55],{"class":297},[37,29094,326],{"class":43},[37,29096,6614],{"class":291},[37,29098,312],{"class":43},[37,29100,29101],{"class":39,"line":116},[37,29102,27161],{"class":43},[37,29104,29105,29107,29109],{"class":39,"line":123},[37,29106,174],{"class":43},[37,29108,3293],{"class":291},[37,29110,113],{"class":43},[37,29112,29113,29115,29117],{"class":39,"line":129},[37,29114,224],{"class":43},[37,29116,28991],{"class":291},[37,29118,62],{"class":43},[37,29120,29121,29123,29125],{"class":39,"line":171},[37,29122,273],{"class":43},[37,29124,48],{"class":291},[37,29126,62],{"class":43},[27,29128,29129],{"className":3580,"code":29070,"language":3582,"meta":32,"style":32},[34,29130,29131,29139,29145,29155,29159,29167,29175],{"__ignoreMap":32},[37,29132,29133,29135,29137],{"class":39,"line":40},[37,29134,44],{"class":43},[37,29136,48],{"class":291},[37,29138,62],{"class":43},[37,29140,29141,29143],{"class":39,"line":65},[37,29142,75],{"class":43},[37,29144,29030],{"class":291},[37,29146,29147,29149,29151,29153],{"class":39,"line":72},[37,29148,7580],{"class":51},[37,29150,25058],{"class":43},[37,29152,6614],{"class":291},[37,29154,312],{"class":43},[37,29156,29157],{"class":39,"line":116},[37,29158,27161],{"class":43},[37,29160,29161,29163,29165],{"class":39,"line":123},[37,29162,174],{"class":43},[37,29164,3293],{"class":291},[37,29166,113],{"class":43},[37,29168,29169,29171,29173],{"class":39,"line":129},[37,29170,224],{"class":43},[37,29172,28991],{"class":291},[37,29174,62],{"class":43},[37,29176,29177,29179,29181],{"class":39,"line":171},[37,29178,273],{"class":43},[37,29180,48],{"class":291},[37,29182,62],{"class":43},[27,29184,29185],{"className":543,"code":29070,"language":545,"meta":32,"style":32},[34,29186,29187,29195,29201,29213,29217,29225,29233],{"__ignoreMap":32},[37,29188,29189,29191,29193],{"class":39,"line":40},[37,29190,44],{"class":43},[37,29192,48],{"class":291},[37,29194,62],{"class":43},[37,29196,29197,29199],{"class":39,"line":65},[37,29198,75],{"class":43},[37,29200,29030],{"class":291},[37,29202,29203,29205,29207,29209,29211],{"class":39,"line":72},[37,29204,7580],{"class":51},[37,29206,55],{"class":297},[37,29208,326],{"class":43},[37,29210,6614],{"class":291},[37,29212,312],{"class":43},[37,29214,29215],{"class":39,"line":116},[37,29216,27161],{"class":43},[37,29218,29219,29221,29223],{"class":39,"line":123},[37,29220,174],{"class":43},[37,29222,3293],{"class":291},[37,29224,113],{"class":43},[37,29226,29227,29229,29231],{"class":39,"line":129},[37,29228,224],{"class":43},[37,29230,28991],{"class":291},[37,29232,62],{"class":43},[37,29234,29235,29237,29239],{"class":39,"line":171},[37,29236,273],{"class":43},[37,29238,48],{"class":291},[37,29240,62],{"class":43},[27,29242,29244],{"className":987,"code":29243,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bulge', props: { radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,29245,29246,29256,29260,29274,29278,29291,29299,29303,29307],{"__ignoreMap":32},[37,29247,29248,29250,29252,29254],{"class":39,"line":40},[37,29249,1382],{"class":297},[37,29251,9444],{"class":43},[37,29253,1388],{"class":297},[37,29255,9449],{"class":58},[37,29257,29258],{"class":39,"line":65},[37,29259,120],{"emptyLinePlaceholder":119},[37,29261,29262,29264,29266,29268,29270,29272],{"class":39,"line":72},[37,29263,2809],{"class":297},[37,29265,2812],{"class":291},[37,29267,2815],{"class":297},[37,29269,2818],{"class":297},[37,29271,999],{"class":51},[37,29273,1002],{"class":43},[37,29275,29276],{"class":39,"line":116},[37,29277,1007],{"class":43},[37,29279,29280,29282,29285,29287,29289],{"class":39,"line":123},[37,29281,1017],{"class":43},[37,29283,29284],{"class":58},"'Bulge'",[37,29286,5477],{"class":43},[37,29288,6614],{"class":291},[37,29290,5482],{"class":43},[37,29292,29293,29295,29297],{"class":39,"line":129},[37,29294,4949],{"class":43},[37,29296,3941],{"class":58},[37,29298,3207],{"class":43},[37,29300,29301],{"class":39,"line":171},[37,29302,4966],{"class":43},[37,29304,29305],{"class":39,"line":221},[37,29306,1194],{"class":43},[37,29308,29309],{"class":39,"line":231},[37,29310,1200],{"class":43},[1311,29312,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":29314},[29315,29316],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Distortions",{},"/docs/components/bulge",{"title":28991,"description":28999},"docs/components/Bulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":29324,"title":29325,"body":29326,"category":27715,"componentType":21062,"description":29333,"extension":1323,"meta":29594,"navigation":119,"path":29595,"requiresChild":119,"seo":29596,"stem":29597,"__hash__":29598},"components/docs/components/CRTScreen.md","CRTScreen",{"type":8,"value":29327,"toc":29590},[29328,29331,29334,29336,29338,29341,29343,29588],[11,29329,29325],{"id":29330},"crtscreen",[15,29332,29333],{},"Retro CRT monitor simulation with scanlines",[27113,29335],{"component":29325},[1202,29337,27117],{"id":21717},[27119,29339],{":props":29340},"[{\"name\":\"pixelSize\",\"type\":\"number\",\"default\":\"128\",\"description\":\"Size of individual TV pixels (lower = more pixels)\"},{\"name\":\"colorShift\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Chromatic aberration amount\"},{\"name\":\"scanlineIntensity\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Strength of horizontal scanlines\"},{\"name\":\"scanlineFrequency\",\"type\":\"number\",\"default\":\"200\",\"description\":\"Number of scanlines across screen\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Screen brightness boost\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Screen contrast enhancement\"},{\"name\":\"vignetteIntensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of corner darkening effect (0 = off)\"},{\"name\":\"vignetteRadius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the vignette extends inward (0 = edges only, 1 = reaches center)\"}]",[1202,29342,27125],{"id":27124},[23,29344,29345,29390,29434,29478,29522],{":tabs":25},[27,29346,29348],{"className":29,"code":29347,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle />\n \u003C/CRTScreen>\n\u003C/Shader>\n",[34,29349,29350,29358,29366,29374,29382],{"__ignoreMap":32},[37,29351,29352,29354,29356],{"class":39,"line":40},[37,29353,44],{"class":43},[37,29355,48],{"class":47},[37,29357,62],{"class":43},[37,29359,29360,29362,29364],{"class":39,"line":65},[37,29361,75],{"class":43},[37,29363,29325],{"class":47},[37,29365,62],{"class":43},[37,29367,29368,29370,29372],{"class":39,"line":72},[37,29369,174],{"class":43},[37,29371,3293],{"class":47},[37,29373,113],{"class":43},[37,29375,29376,29378,29380],{"class":39,"line":116},[37,29377,224],{"class":43},[37,29379,29325],{"class":47},[37,29381,62],{"class":43},[37,29383,29384,29386,29388],{"class":39,"line":123},[37,29385,273],{"class":43},[37,29387,48],{"class":47},[37,29389,62],{"class":43},[27,29391,29392],{"className":280,"code":29347,"language":282,"meta":32,"style":32},[34,29393,29394,29402,29410,29418,29426],{"__ignoreMap":32},[37,29395,29396,29398,29400],{"class":39,"line":40},[37,29397,44],{"class":43},[37,29399,48],{"class":291},[37,29401,62],{"class":43},[37,29403,29404,29406,29408],{"class":39,"line":65},[37,29405,75],{"class":43},[37,29407,29325],{"class":291},[37,29409,62],{"class":43},[37,29411,29412,29414,29416],{"class":39,"line":72},[37,29413,174],{"class":43},[37,29415,3293],{"class":291},[37,29417,113],{"class":43},[37,29419,29420,29422,29424],{"class":39,"line":116},[37,29421,224],{"class":43},[37,29423,29325],{"class":291},[37,29425,62],{"class":43},[37,29427,29428,29430,29432],{"class":39,"line":123},[37,29429,273],{"class":43},[37,29431,48],{"class":291},[37,29433,62],{"class":43},[27,29435,29436],{"className":3580,"code":29347,"language":3582,"meta":32,"style":32},[34,29437,29438,29446,29454,29462,29470],{"__ignoreMap":32},[37,29439,29440,29442,29444],{"class":39,"line":40},[37,29441,44],{"class":43},[37,29443,48],{"class":291},[37,29445,62],{"class":43},[37,29447,29448,29450,29452],{"class":39,"line":65},[37,29449,75],{"class":43},[37,29451,29325],{"class":291},[37,29453,62],{"class":43},[37,29455,29456,29458,29460],{"class":39,"line":72},[37,29457,174],{"class":43},[37,29459,3293],{"class":291},[37,29461,113],{"class":43},[37,29463,29464,29466,29468],{"class":39,"line":116},[37,29465,224],{"class":43},[37,29467,29325],{"class":291},[37,29469,62],{"class":43},[37,29471,29472,29474,29476],{"class":39,"line":123},[37,29473,273],{"class":43},[37,29475,48],{"class":291},[37,29477,62],{"class":43},[27,29479,29480],{"className":543,"code":29347,"language":545,"meta":32,"style":32},[34,29481,29482,29490,29498,29506,29514],{"__ignoreMap":32},[37,29483,29484,29486,29488],{"class":39,"line":40},[37,29485,44],{"class":43},[37,29487,48],{"class":291},[37,29489,62],{"class":43},[37,29491,29492,29494,29496],{"class":39,"line":65},[37,29493,75],{"class":43},[37,29495,29325],{"class":291},[37,29497,62],{"class":43},[37,29499,29500,29502,29504],{"class":39,"line":72},[37,29501,174],{"class":43},[37,29503,3293],{"class":291},[37,29505,113],{"class":43},[37,29507,29508,29510,29512],{"class":39,"line":116},[37,29509,224],{"class":43},[37,29511,29325],{"class":291},[37,29513,62],{"class":43},[37,29515,29516,29518,29520],{"class":39,"line":123},[37,29517,273],{"class":43},[37,29519,48],{"class":291},[37,29521,62],{"class":43},[27,29523,29525],{"className":987,"code":29524,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CRTScreen', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,29526,29527,29537,29541,29555,29559,29568,29576,29580,29584],{"__ignoreMap":32},[37,29528,29529,29531,29533,29535],{"class":39,"line":40},[37,29530,1382],{"class":297},[37,29532,9444],{"class":43},[37,29534,1388],{"class":297},[37,29536,9449],{"class":58},[37,29538,29539],{"class":39,"line":65},[37,29540,120],{"emptyLinePlaceholder":119},[37,29542,29543,29545,29547,29549,29551,29553],{"class":39,"line":72},[37,29544,2809],{"class":297},[37,29546,2812],{"class":291},[37,29548,2815],{"class":297},[37,29550,2818],{"class":297},[37,29552,999],{"class":51},[37,29554,1002],{"class":43},[37,29556,29557],{"class":39,"line":116},[37,29558,1007],{"class":43},[37,29560,29561,29563,29566],{"class":39,"line":123},[37,29562,1017],{"class":43},[37,29564,29565],{"class":58},"'CRTScreen'",[37,29567,4944],{"class":43},[37,29569,29570,29572,29574],{"class":39,"line":129},[37,29571,4949],{"class":43},[37,29573,3941],{"class":58},[37,29575,3207],{"class":43},[37,29577,29578],{"class":39,"line":171},[37,29579,4966],{"class":43},[37,29581,29582],{"class":39,"line":221},[37,29583,1194],{"class":43},[37,29585,29586],{"class":39,"line":231},[37,29587,1200],{"class":43},[1311,29589,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":29591},[29592,29593],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/crtscreen",{"title":29325,"description":29333},"docs/components/CRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":29600,"title":29601,"body":29602,"category":27437,"componentType":21062,"description":29609,"extension":1323,"meta":29870,"navigation":119,"path":29871,"requiresChild":119,"seo":29872,"stem":29873,"__hash__":29874},"components/docs/components/ChannelBlur.md","ChannelBlur",{"type":8,"value":29603,"toc":29866},[29604,29607,29610,29612,29614,29617,29619,29864],[11,29605,29601],{"id":29606},"channelblur",[15,29608,29609],{},"Independent blur for red, green, and blue channels",[27113,29611],{"component":29601},[1202,29613,27117],{"id":21717},[27119,29615],{":props":29616},"[{\"name\":\"redIntensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Blur intensity for red channel\"},{\"name\":\"greenIntensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Blur intensity for green channel\"},{\"name\":\"blueIntensity\",\"type\":\"number\",\"default\":\"40\",\"description\":\"Blur intensity for blue channel\"}]",[1202,29618,27125],{"id":27124},[23,29620,29621,29666,29710,29754,29798],{":tabs":25},[27,29622,29624],{"className":29,"code":29623,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle />\n \u003C/ChannelBlur>\n\u003C/Shader>\n",[34,29625,29626,29634,29642,29650,29658],{"__ignoreMap":32},[37,29627,29628,29630,29632],{"class":39,"line":40},[37,29629,44],{"class":43},[37,29631,48],{"class":47},[37,29633,62],{"class":43},[37,29635,29636,29638,29640],{"class":39,"line":65},[37,29637,75],{"class":43},[37,29639,29601],{"class":47},[37,29641,62],{"class":43},[37,29643,29644,29646,29648],{"class":39,"line":72},[37,29645,174],{"class":43},[37,29647,3293],{"class":47},[37,29649,113],{"class":43},[37,29651,29652,29654,29656],{"class":39,"line":116},[37,29653,224],{"class":43},[37,29655,29601],{"class":47},[37,29657,62],{"class":43},[37,29659,29660,29662,29664],{"class":39,"line":123},[37,29661,273],{"class":43},[37,29663,48],{"class":47},[37,29665,62],{"class":43},[27,29667,29668],{"className":280,"code":29623,"language":282,"meta":32,"style":32},[34,29669,29670,29678,29686,29694,29702],{"__ignoreMap":32},[37,29671,29672,29674,29676],{"class":39,"line":40},[37,29673,44],{"class":43},[37,29675,48],{"class":291},[37,29677,62],{"class":43},[37,29679,29680,29682,29684],{"class":39,"line":65},[37,29681,75],{"class":43},[37,29683,29601],{"class":291},[37,29685,62],{"class":43},[37,29687,29688,29690,29692],{"class":39,"line":72},[37,29689,174],{"class":43},[37,29691,3293],{"class":291},[37,29693,113],{"class":43},[37,29695,29696,29698,29700],{"class":39,"line":116},[37,29697,224],{"class":43},[37,29699,29601],{"class":291},[37,29701,62],{"class":43},[37,29703,29704,29706,29708],{"class":39,"line":123},[37,29705,273],{"class":43},[37,29707,48],{"class":291},[37,29709,62],{"class":43},[27,29711,29712],{"className":3580,"code":29623,"language":3582,"meta":32,"style":32},[34,29713,29714,29722,29730,29738,29746],{"__ignoreMap":32},[37,29715,29716,29718,29720],{"class":39,"line":40},[37,29717,44],{"class":43},[37,29719,48],{"class":291},[37,29721,62],{"class":43},[37,29723,29724,29726,29728],{"class":39,"line":65},[37,29725,75],{"class":43},[37,29727,29601],{"class":291},[37,29729,62],{"class":43},[37,29731,29732,29734,29736],{"class":39,"line":72},[37,29733,174],{"class":43},[37,29735,3293],{"class":291},[37,29737,113],{"class":43},[37,29739,29740,29742,29744],{"class":39,"line":116},[37,29741,224],{"class":43},[37,29743,29601],{"class":291},[37,29745,62],{"class":43},[37,29747,29748,29750,29752],{"class":39,"line":123},[37,29749,273],{"class":43},[37,29751,48],{"class":291},[37,29753,62],{"class":43},[27,29755,29756],{"className":543,"code":29623,"language":545,"meta":32,"style":32},[34,29757,29758,29766,29774,29782,29790],{"__ignoreMap":32},[37,29759,29760,29762,29764],{"class":39,"line":40},[37,29761,44],{"class":43},[37,29763,48],{"class":291},[37,29765,62],{"class":43},[37,29767,29768,29770,29772],{"class":39,"line":65},[37,29769,75],{"class":43},[37,29771,29601],{"class":291},[37,29773,62],{"class":43},[37,29775,29776,29778,29780],{"class":39,"line":72},[37,29777,174],{"class":43},[37,29779,3293],{"class":291},[37,29781,113],{"class":43},[37,29783,29784,29786,29788],{"class":39,"line":116},[37,29785,224],{"class":43},[37,29787,29601],{"class":291},[37,29789,62],{"class":43},[37,29791,29792,29794,29796],{"class":39,"line":123},[37,29793,273],{"class":43},[37,29795,48],{"class":291},[37,29797,62],{"class":43},[27,29799,29801],{"className":987,"code":29800,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChannelBlur', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,29802,29803,29813,29817,29831,29835,29844,29852,29856,29860],{"__ignoreMap":32},[37,29804,29805,29807,29809,29811],{"class":39,"line":40},[37,29806,1382],{"class":297},[37,29808,9444],{"class":43},[37,29810,1388],{"class":297},[37,29812,9449],{"class":58},[37,29814,29815],{"class":39,"line":65},[37,29816,120],{"emptyLinePlaceholder":119},[37,29818,29819,29821,29823,29825,29827,29829],{"class":39,"line":72},[37,29820,2809],{"class":297},[37,29822,2812],{"class":291},[37,29824,2815],{"class":297},[37,29826,2818],{"class":297},[37,29828,999],{"class":51},[37,29830,1002],{"class":43},[37,29832,29833],{"class":39,"line":116},[37,29834,1007],{"class":43},[37,29836,29837,29839,29842],{"class":39,"line":123},[37,29838,1017],{"class":43},[37,29840,29841],{"class":58},"'ChannelBlur'",[37,29843,4944],{"class":43},[37,29845,29846,29848,29850],{"class":39,"line":129},[37,29847,4949],{"class":43},[37,29849,3941],{"class":58},[37,29851,3207],{"class":43},[37,29853,29854],{"class":39,"line":171},[37,29855,4966],{"class":43},[37,29857,29858],{"class":39,"line":221},[37,29859,1194],{"class":43},[37,29861,29862],{"class":39,"line":231},[37,29863,1200],{"class":43},[1311,29865,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":29867},[29868,29869],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/channelblur",{"title":29601,"description":29609},"docs/components/ChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":29876,"title":29877,"body":29878,"category":27972,"componentType":21056,"description":29885,"extension":1323,"meta":30069,"navigation":119,"path":30070,"requiresChild":27975,"seo":30071,"stem":30072,"__hash__":30073},"components/docs/components/Checkerboard.md","Checkerboard",{"type":8,"value":29879,"toc":30065},[29880,29883,29886,29888,29890,29893,29895,30063],[11,29881,29877],{"id":29882},"checkerboard",[15,29884,29885],{},"Classic checkerboard pattern with two alternating colors",[27113,29887],{"component":29877},[1202,29889,27117],{"id":21717},[27119,29891],{":props":29892},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#cccccc\",\"description\":\"First color of the checkerboard pattern\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#999999\",\"description\":\"Second color of the checkerboard pattern\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of cells along the shortest canvas edge (creates square cells)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Smoothness of the transition between colors (0 = hard edges, 1 = very soft)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,29894,27125],{"id":27124},[23,29896,29897,29926,29954,29982,30010],{":tabs":25},[27,29898,29900],{"className":29,"code":29899,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCheckerboard />\n\u003C/Shader>\n",[34,29901,29902,29910,29918],{"__ignoreMap":32},[37,29903,29904,29906,29908],{"class":39,"line":40},[37,29905,44],{"class":43},[37,29907,48],{"class":47},[37,29909,62],{"class":43},[37,29911,29912,29914,29916],{"class":39,"line":65},[37,29913,75],{"class":43},[37,29915,29877],{"class":47},[37,29917,113],{"class":43},[37,29919,29920,29922,29924],{"class":39,"line":72},[37,29921,273],{"class":43},[37,29923,48],{"class":47},[37,29925,62],{"class":43},[27,29927,29928],{"className":280,"code":29899,"language":282,"meta":32,"style":32},[34,29929,29930,29938,29946],{"__ignoreMap":32},[37,29931,29932,29934,29936],{"class":39,"line":40},[37,29933,44],{"class":43},[37,29935,48],{"class":291},[37,29937,62],{"class":43},[37,29939,29940,29942,29944],{"class":39,"line":65},[37,29941,75],{"class":43},[37,29943,29877],{"class":291},[37,29945,113],{"class":43},[37,29947,29948,29950,29952],{"class":39,"line":72},[37,29949,273],{"class":43},[37,29951,48],{"class":291},[37,29953,62],{"class":43},[27,29955,29956],{"className":3580,"code":29899,"language":3582,"meta":32,"style":32},[34,29957,29958,29966,29974],{"__ignoreMap":32},[37,29959,29960,29962,29964],{"class":39,"line":40},[37,29961,44],{"class":43},[37,29963,48],{"class":291},[37,29965,62],{"class":43},[37,29967,29968,29970,29972],{"class":39,"line":65},[37,29969,75],{"class":43},[37,29971,29877],{"class":291},[37,29973,113],{"class":43},[37,29975,29976,29978,29980],{"class":39,"line":72},[37,29977,273],{"class":43},[37,29979,48],{"class":291},[37,29981,62],{"class":43},[27,29983,29984],{"className":543,"code":29899,"language":545,"meta":32,"style":32},[34,29985,29986,29994,30002],{"__ignoreMap":32},[37,29987,29988,29990,29992],{"class":39,"line":40},[37,29989,44],{"class":43},[37,29991,48],{"class":291},[37,29993,62],{"class":43},[37,29995,29996,29998,30000],{"class":39,"line":65},[37,29997,75],{"class":43},[37,29999,29877],{"class":291},[37,30001,113],{"class":43},[37,30003,30004,30006,30008],{"class":39,"line":72},[37,30005,273],{"class":43},[37,30007,48],{"class":291},[37,30009,62],{"class":43},[27,30011,30013],{"className":987,"code":30012,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Checkerboard', props: {} }\n ]\n})\n",[34,30014,30015,30025,30029,30043,30047,30055,30059],{"__ignoreMap":32},[37,30016,30017,30019,30021,30023],{"class":39,"line":40},[37,30018,1382],{"class":297},[37,30020,9444],{"class":43},[37,30022,1388],{"class":297},[37,30024,9449],{"class":58},[37,30026,30027],{"class":39,"line":65},[37,30028,120],{"emptyLinePlaceholder":119},[37,30030,30031,30033,30035,30037,30039,30041],{"class":39,"line":72},[37,30032,2809],{"class":297},[37,30034,2812],{"class":291},[37,30036,2815],{"class":297},[37,30038,2818],{"class":297},[37,30040,999],{"class":51},[37,30042,1002],{"class":43},[37,30044,30045],{"class":39,"line":116},[37,30046,1007],{"class":43},[37,30048,30049,30051,30053],{"class":39,"line":123},[37,30050,1017],{"class":43},[37,30052,8090],{"class":58},[37,30054,3207],{"class":43},[37,30056,30057],{"class":39,"line":129},[37,30058,1194],{"class":43},[37,30060,30061],{"class":39,"line":171},[37,30062,1200],{"class":43},[1311,30064,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":30066},[30067,30068],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/checkerboard",{"title":29877,"description":29885},"docs/components/Checkerboard","xWgOFlPxz08f5-WceoXS-EG20wY1632N5T-U9eHKWKo",{"id":30075,"title":30076,"body":30077,"category":30373,"componentType":21056,"description":30084,"extension":1323,"meta":30374,"navigation":119,"path":30375,"requiresChild":27975,"seo":30376,"stem":30377,"__hash__":30378},"components/docs/components/ChromaFlow.md","ChromaFlow",{"type":8,"value":30078,"toc":30369},[30079,30082,30085,30087,30089,30092,30094,30367],[11,30080,30076],{"id":30081},"chromaflow",[15,30083,30084],{},"Interactive liquid flow effect that follows your cursor",[27113,30086],{"component":30076},[1202,30088,27117],{"id":21717},[27119,30090],{":props":30091},"[{\"name\":\"baseColor\",\"type\":\"string\",\"default\":\"#0066ff\",\"description\":\"Base liquid color\"},{\"name\":\"upColor\",\"type\":\"string\",\"default\":\"#00ff00\",\"description\":\"Color for upward movement\"},{\"name\":\"downColor\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"Color for downward movement\"},{\"name\":\"leftColor\",\"type\":\"string\",\"default\":\"#0000ff\",\"description\":\"Color for leftward movement\"},{\"name\":\"rightColor\",\"type\":\"string\",\"default\":\"#ffff00\",\"description\":\"Color for rightward movement\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the liquid effect\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Radius of the liquid effect\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"30\",\"description\":\"How much momentum colors retain in their flow direction\"}]",[1202,30093,27125],{"id":27124},[23,30095,30096,30145,30201,30251,30305],{":tabs":25},[27,30097,30099],{"className":29,"code":30098,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n />\n\u003C/Shader>\n",[34,30100,30101,30109,30116,30124,30133,30137],{"__ignoreMap":32},[37,30102,30103,30105,30107],{"class":39,"line":40},[37,30104,44],{"class":43},[37,30106,48],{"class":47},[37,30108,62],{"class":43},[37,30110,30111,30113],{"class":39,"line":65},[37,30112,75],{"class":43},[37,30114,30115],{"class":47},"ChromaFlow\n",[37,30117,30118,30120,30122],{"class":39,"line":72},[37,30119,18081],{"class":51},[37,30121,55],{"class":43},[37,30123,29039],{"class":58},[37,30125,30126,30128,30130],{"class":39,"line":116},[37,30127,15113],{"class":51},[37,30129,55],{"class":43},[37,30131,30132],{"class":58},"\"3\"\n",[37,30134,30135],{"class":39,"line":123},[37,30136,2314],{"class":43},[37,30138,30139,30141,30143],{"class":39,"line":129},[37,30140,273],{"class":43},[37,30142,48],{"class":47},[37,30144,62],{"class":43},[27,30146,30148],{"className":280,"code":30147,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n />\n\u003C/Shader>\n",[34,30149,30150,30158,30164,30176,30189,30193],{"__ignoreMap":32},[37,30151,30152,30154,30156],{"class":39,"line":40},[37,30153,44],{"class":43},[37,30155,48],{"class":291},[37,30157,62],{"class":43},[37,30159,30160,30162],{"class":39,"line":65},[37,30161,75],{"class":43},[37,30163,30115],{"class":291},[37,30165,30166,30168,30170,30172,30174],{"class":39,"line":72},[37,30167,18192],{"class":51},[37,30169,55],{"class":297},[37,30171,326],{"class":43},[37,30173,6614],{"class":291},[37,30175,312],{"class":43},[37,30177,30178,30180,30182,30184,30187],{"class":39,"line":116},[37,30179,7580],{"class":51},[37,30181,55],{"class":297},[37,30183,326],{"class":43},[37,30185,30186],{"class":291},"3",[37,30188,312],{"class":43},[37,30190,30191],{"class":39,"line":123},[37,30192,2314],{"class":43},[37,30194,30195,30197,30199],{"class":39,"line":129},[37,30196,273],{"class":43},[37,30198,48],{"class":291},[37,30200,62],{"class":43},[27,30202,30203],{"className":3580,"code":30147,"language":3582,"meta":32,"style":32},[34,30204,30205,30213,30219,30229,30239,30243],{"__ignoreMap":32},[37,30206,30207,30209,30211],{"class":39,"line":40},[37,30208,44],{"class":43},[37,30210,48],{"class":291},[37,30212,62],{"class":43},[37,30214,30215,30217],{"class":39,"line":65},[37,30216,75],{"class":43},[37,30218,30115],{"class":291},[37,30220,30221,30223,30225,30227],{"class":39,"line":72},[37,30222,18192],{"class":51},[37,30224,25058],{"class":43},[37,30226,6614],{"class":291},[37,30228,312],{"class":43},[37,30230,30231,30233,30235,30237],{"class":39,"line":116},[37,30232,7580],{"class":51},[37,30234,25058],{"class":43},[37,30236,30186],{"class":291},[37,30238,312],{"class":43},[37,30240,30241],{"class":39,"line":123},[37,30242,2314],{"class":43},[37,30244,30245,30247,30249],{"class":39,"line":129},[37,30246,273],{"class":43},[37,30248,48],{"class":291},[37,30250,62],{"class":43},[27,30252,30253],{"className":543,"code":30147,"language":545,"meta":32,"style":32},[34,30254,30255,30263,30269,30281,30293,30297],{"__ignoreMap":32},[37,30256,30257,30259,30261],{"class":39,"line":40},[37,30258,44],{"class":43},[37,30260,48],{"class":291},[37,30262,62],{"class":43},[37,30264,30265,30267],{"class":39,"line":65},[37,30266,75],{"class":43},[37,30268,30115],{"class":291},[37,30270,30271,30273,30275,30277,30279],{"class":39,"line":72},[37,30272,18192],{"class":51},[37,30274,55],{"class":297},[37,30276,326],{"class":43},[37,30278,6614],{"class":291},[37,30280,312],{"class":43},[37,30282,30283,30285,30287,30289,30291],{"class":39,"line":116},[37,30284,7580],{"class":51},[37,30286,55],{"class":297},[37,30288,326],{"class":43},[37,30290,30186],{"class":291},[37,30292,312],{"class":43},[37,30294,30295],{"class":39,"line":123},[37,30296,2314],{"class":43},[37,30298,30299,30301,30303],{"class":39,"line":129},[37,30300,273],{"class":43},[37,30302,48],{"class":291},[37,30304,62],{"class":43},[27,30306,30308],{"className":987,"code":30307,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaFlow', props: { intensity: 1, radius: 3 } }\n ]\n})\n",[34,30309,30310,30320,30324,30338,30342,30359,30363],{"__ignoreMap":32},[37,30311,30312,30314,30316,30318],{"class":39,"line":40},[37,30313,1382],{"class":297},[37,30315,9444],{"class":43},[37,30317,1388],{"class":297},[37,30319,9449],{"class":58},[37,30321,30322],{"class":39,"line":65},[37,30323,120],{"emptyLinePlaceholder":119},[37,30325,30326,30328,30330,30332,30334,30336],{"class":39,"line":72},[37,30327,2809],{"class":297},[37,30329,2812],{"class":291},[37,30331,2815],{"class":297},[37,30333,2818],{"class":297},[37,30335,999],{"class":51},[37,30337,1002],{"class":43},[37,30339,30340],{"class":39,"line":116},[37,30341,1007],{"class":43},[37,30343,30344,30346,30349,30351,30353,30355,30357],{"class":39,"line":123},[37,30345,1017],{"class":43},[37,30347,30348],{"class":58},"'ChromaFlow'",[37,30350,27406],{"class":43},[37,30352,6614],{"class":291},[37,30354,4501],{"class":43},[37,30356,30186],{"class":291},[37,30358,1142],{"class":43},[37,30360,30361],{"class":39,"line":129},[37,30362,1194],{"class":43},[37,30364,30365],{"class":39,"line":171},[37,30366,1200],{"class":43},[1311,30368,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":30370},[30371,30372],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Interactive",{},"/docs/components/chromaflow",{"title":30076,"description":30084},"docs/components/ChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":30380,"title":30381,"body":30382,"category":27715,"componentType":21062,"description":30389,"extension":1323,"meta":30650,"navigation":119,"path":30651,"requiresChild":119,"seo":30652,"stem":30653,"__hash__":30654},"components/docs/components/ChromaticAberration.md","ChromaticAberration",{"type":8,"value":30383,"toc":30646},[30384,30387,30390,30392,30394,30397,30399,30644],[11,30385,30381],{"id":30386},"chromaticaberration",[15,30388,30389],{},"Separate RGB channels for a prismatic distortion effect",[27113,30391],{"component":30381},[1202,30393,27117],{"id":21717},[27119,30395],{":props":30396},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Overall strength of the chromatic aberration effect\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the chromatic aberration in degrees\"},{\"name\":\"redOffset\",\"type\":\"number\",\"default\":\"-1\",\"description\":\"Red channel offset multiplier\"},{\"name\":\"greenOffset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Green channel offset multiplier\"},{\"name\":\"blueOffset\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blue channel offset multiplier\"}]",[1202,30398,27125],{"id":27124},[23,30400,30401,30446,30490,30534,30578],{":tabs":25},[27,30402,30404],{"className":29,"code":30403,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle />\n \u003C/ChromaticAberration>\n\u003C/Shader>\n",[34,30405,30406,30414,30422,30430,30438],{"__ignoreMap":32},[37,30407,30408,30410,30412],{"class":39,"line":40},[37,30409,44],{"class":43},[37,30411,48],{"class":47},[37,30413,62],{"class":43},[37,30415,30416,30418,30420],{"class":39,"line":65},[37,30417,75],{"class":43},[37,30419,30381],{"class":47},[37,30421,62],{"class":43},[37,30423,30424,30426,30428],{"class":39,"line":72},[37,30425,174],{"class":43},[37,30427,3293],{"class":47},[37,30429,113],{"class":43},[37,30431,30432,30434,30436],{"class":39,"line":116},[37,30433,224],{"class":43},[37,30435,30381],{"class":47},[37,30437,62],{"class":43},[37,30439,30440,30442,30444],{"class":39,"line":123},[37,30441,273],{"class":43},[37,30443,48],{"class":47},[37,30445,62],{"class":43},[27,30447,30448],{"className":280,"code":30403,"language":282,"meta":32,"style":32},[34,30449,30450,30458,30466,30474,30482],{"__ignoreMap":32},[37,30451,30452,30454,30456],{"class":39,"line":40},[37,30453,44],{"class":43},[37,30455,48],{"class":291},[37,30457,62],{"class":43},[37,30459,30460,30462,30464],{"class":39,"line":65},[37,30461,75],{"class":43},[37,30463,30381],{"class":291},[37,30465,62],{"class":43},[37,30467,30468,30470,30472],{"class":39,"line":72},[37,30469,174],{"class":43},[37,30471,3293],{"class":291},[37,30473,113],{"class":43},[37,30475,30476,30478,30480],{"class":39,"line":116},[37,30477,224],{"class":43},[37,30479,30381],{"class":291},[37,30481,62],{"class":43},[37,30483,30484,30486,30488],{"class":39,"line":123},[37,30485,273],{"class":43},[37,30487,48],{"class":291},[37,30489,62],{"class":43},[27,30491,30492],{"className":3580,"code":30403,"language":3582,"meta":32,"style":32},[34,30493,30494,30502,30510,30518,30526],{"__ignoreMap":32},[37,30495,30496,30498,30500],{"class":39,"line":40},[37,30497,44],{"class":43},[37,30499,48],{"class":291},[37,30501,62],{"class":43},[37,30503,30504,30506,30508],{"class":39,"line":65},[37,30505,75],{"class":43},[37,30507,30381],{"class":291},[37,30509,62],{"class":43},[37,30511,30512,30514,30516],{"class":39,"line":72},[37,30513,174],{"class":43},[37,30515,3293],{"class":291},[37,30517,113],{"class":43},[37,30519,30520,30522,30524],{"class":39,"line":116},[37,30521,224],{"class":43},[37,30523,30381],{"class":291},[37,30525,62],{"class":43},[37,30527,30528,30530,30532],{"class":39,"line":123},[37,30529,273],{"class":43},[37,30531,48],{"class":291},[37,30533,62],{"class":43},[27,30535,30536],{"className":543,"code":30403,"language":545,"meta":32,"style":32},[34,30537,30538,30546,30554,30562,30570],{"__ignoreMap":32},[37,30539,30540,30542,30544],{"class":39,"line":40},[37,30541,44],{"class":43},[37,30543,48],{"class":291},[37,30545,62],{"class":43},[37,30547,30548,30550,30552],{"class":39,"line":65},[37,30549,75],{"class":43},[37,30551,30381],{"class":291},[37,30553,62],{"class":43},[37,30555,30556,30558,30560],{"class":39,"line":72},[37,30557,174],{"class":43},[37,30559,3293],{"class":291},[37,30561,113],{"class":43},[37,30563,30564,30566,30568],{"class":39,"line":116},[37,30565,224],{"class":43},[37,30567,30381],{"class":291},[37,30569,62],{"class":43},[37,30571,30572,30574,30576],{"class":39,"line":123},[37,30573,273],{"class":43},[37,30575,48],{"class":291},[37,30577,62],{"class":43},[27,30579,30581],{"className":987,"code":30580,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaticAberration', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,30582,30583,30593,30597,30611,30615,30624,30632,30636,30640],{"__ignoreMap":32},[37,30584,30585,30587,30589,30591],{"class":39,"line":40},[37,30586,1382],{"class":297},[37,30588,9444],{"class":43},[37,30590,1388],{"class":297},[37,30592,9449],{"class":58},[37,30594,30595],{"class":39,"line":65},[37,30596,120],{"emptyLinePlaceholder":119},[37,30598,30599,30601,30603,30605,30607,30609],{"class":39,"line":72},[37,30600,2809],{"class":297},[37,30602,2812],{"class":291},[37,30604,2815],{"class":297},[37,30606,2818],{"class":297},[37,30608,999],{"class":51},[37,30610,1002],{"class":43},[37,30612,30613],{"class":39,"line":116},[37,30614,1007],{"class":43},[37,30616,30617,30619,30622],{"class":39,"line":123},[37,30618,1017],{"class":43},[37,30620,30621],{"class":58},"'ChromaticAberration'",[37,30623,4944],{"class":43},[37,30625,30626,30628,30630],{"class":39,"line":129},[37,30627,4949],{"class":43},[37,30629,3941],{"class":58},[37,30631,3207],{"class":43},[37,30633,30634],{"class":39,"line":171},[37,30635,4966],{"class":43},[37,30637,30638],{"class":39,"line":221},[37,30639,1194],{"class":43},[37,30641,30642],{"class":39,"line":231},[37,30643,1200],{"class":43},[1311,30645,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":30647},[30648,30649],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/chromaticaberration",{"title":30381,"description":30389},"docs/components/ChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":30656,"title":3293,"body":30657,"category":30939,"componentType":21056,"description":30664,"extension":1323,"meta":30940,"navigation":119,"path":30941,"requiresChild":27975,"seo":30942,"stem":30943,"__hash__":30944},"components/docs/components/Circle.md",{"type":8,"value":30658,"toc":30935},[30659,30662,30665,30667,30669,30672,30674,30933],[11,30660,3293],{"id":30661},"circle",[15,30663,30664],{},"Generate a circle with adjustable size and softness",[27113,30666],{"component":3293},[1202,30668,27117],{"id":21717},[27119,30670],{":props":30671},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the circle\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The radius of the circle. A value of one (1) is sets the circle to fit the canvas.\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the circle\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The thickness of the stroke outline. Zero (0) means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"The color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the circle edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors in soft edges\"}]",[1202,30673,27125],{"id":27124},[23,30675,30676,30723,30774,30822,30872],{":tabs":25},[27,30677,30679],{"className":29,"code":30678,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n />\n\u003C/Shader>\n",[34,30680,30681,30689,30695,30703,30711,30715],{"__ignoreMap":32},[37,30682,30683,30685,30687],{"class":39,"line":40},[37,30684,44],{"class":43},[37,30686,48],{"class":47},[37,30688,62],{"class":43},[37,30690,30691,30693],{"class":39,"line":65},[37,30692,75],{"class":43},[37,30694,7565],{"class":47},[37,30696,30697,30699,30701],{"class":39,"line":72},[37,30698,7570],{"class":51},[37,30700,55],{"class":43},[37,30702,7526],{"class":58},[37,30704,30705,30707,30709],{"class":39,"line":116},[37,30706,15113],{"class":51},[37,30708,55],{"class":43},[37,30710,29039],{"class":58},[37,30712,30713],{"class":39,"line":123},[37,30714,2314],{"class":43},[37,30716,30717,30719,30721],{"class":39,"line":129},[37,30718,273],{"class":43},[37,30720,48],{"class":47},[37,30722,62],{"class":43},[27,30724,30726],{"className":280,"code":30725,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n />\n\u003C/Shader>\n",[34,30727,30728,30736,30742,30750,30762,30766],{"__ignoreMap":32},[37,30729,30730,30732,30734],{"class":39,"line":40},[37,30731,44],{"class":43},[37,30733,48],{"class":291},[37,30735,62],{"class":43},[37,30737,30738,30740],{"class":39,"line":65},[37,30739,75],{"class":43},[37,30741,7565],{"class":291},[37,30743,30744,30746,30748],{"class":39,"line":72},[37,30745,7570],{"class":51},[37,30747,55],{"class":297},[37,30749,7526],{"class":58},[37,30751,30752,30754,30756,30758,30760],{"class":39,"line":116},[37,30753,7580],{"class":51},[37,30755,55],{"class":297},[37,30757,326],{"class":43},[37,30759,6614],{"class":291},[37,30761,312],{"class":43},[37,30763,30764],{"class":39,"line":123},[37,30765,2314],{"class":43},[37,30767,30768,30770,30772],{"class":39,"line":129},[37,30769,273],{"class":43},[37,30771,48],{"class":291},[37,30773,62],{"class":43},[27,30775,30776],{"className":3580,"code":30725,"language":3582,"meta":32,"style":32},[34,30777,30778,30786,30792,30800,30810,30814],{"__ignoreMap":32},[37,30779,30780,30782,30784],{"class":39,"line":40},[37,30781,44],{"class":43},[37,30783,48],{"class":291},[37,30785,62],{"class":43},[37,30787,30788,30790],{"class":39,"line":65},[37,30789,75],{"class":43},[37,30791,7565],{"class":291},[37,30793,30794,30796,30798],{"class":39,"line":72},[37,30795,7570],{"class":51},[37,30797,55],{"class":43},[37,30799,7526],{"class":58},[37,30801,30802,30804,30806,30808],{"class":39,"line":116},[37,30803,7580],{"class":51},[37,30805,25058],{"class":43},[37,30807,6614],{"class":291},[37,30809,312],{"class":43},[37,30811,30812],{"class":39,"line":123},[37,30813,2314],{"class":43},[37,30815,30816,30818,30820],{"class":39,"line":129},[37,30817,273],{"class":43},[37,30819,48],{"class":291},[37,30821,62],{"class":43},[27,30823,30824],{"className":543,"code":30725,"language":545,"meta":32,"style":32},[34,30825,30826,30834,30840,30848,30860,30864],{"__ignoreMap":32},[37,30827,30828,30830,30832],{"class":39,"line":40},[37,30829,44],{"class":43},[37,30831,48],{"class":291},[37,30833,62],{"class":43},[37,30835,30836,30838],{"class":39,"line":65},[37,30837,75],{"class":43},[37,30839,7565],{"class":291},[37,30841,30842,30844,30846],{"class":39,"line":72},[37,30843,7570],{"class":51},[37,30845,55],{"class":297},[37,30847,7526],{"class":58},[37,30849,30850,30852,30854,30856,30858],{"class":39,"line":116},[37,30851,7580],{"class":51},[37,30853,55],{"class":297},[37,30855,326],{"class":43},[37,30857,6614],{"class":291},[37,30859,312],{"class":43},[37,30861,30862],{"class":39,"line":123},[37,30863,2314],{"class":43},[37,30865,30866,30868,30870],{"class":39,"line":129},[37,30867,273],{"class":43},[37,30869,48],{"class":291},[37,30871,62],{"class":43},[27,30873,30875],{"className":987,"code":30874,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ffffff', radius: 1 } }\n ]\n})\n",[34,30876,30877,30887,30891,30905,30909,30925,30929],{"__ignoreMap":32},[37,30878,30879,30881,30883,30885],{"class":39,"line":40},[37,30880,1382],{"class":297},[37,30882,9444],{"class":43},[37,30884,1388],{"class":297},[37,30886,9449],{"class":58},[37,30888,30889],{"class":39,"line":65},[37,30890,120],{"emptyLinePlaceholder":119},[37,30892,30893,30895,30897,30899,30901,30903],{"class":39,"line":72},[37,30894,2809],{"class":297},[37,30896,2812],{"class":291},[37,30898,2815],{"class":297},[37,30900,2818],{"class":297},[37,30902,999],{"class":51},[37,30904,1002],{"class":43},[37,30906,30907],{"class":39,"line":116},[37,30908,1007],{"class":43},[37,30910,30911,30913,30915,30917,30919,30921,30923],{"class":39,"line":123},[37,30912,1017],{"class":43},[37,30914,3941],{"class":58},[37,30916,2845],{"class":43},[37,30918,8101],{"class":58},[37,30920,4501],{"class":43},[37,30922,6614],{"class":291},[37,30924,1142],{"class":43},[37,30926,30927],{"class":39,"line":129},[37,30928,1194],{"class":43},[37,30930,30931],{"class":39,"line":171},[37,30932,1200],{"class":43},[1311,30934,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":30936},[30937,30938],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Shapes",{},"/docs/components/circle",{"title":3293,"description":30664},"docs/components/Circle","6IkEAtPpkShaYl4sjatYzEXoZbaTyrMxJZqPHqQVqW4",{"id":30946,"title":30947,"body":30948,"category":29317,"componentType":21062,"description":30955,"extension":1323,"meta":31272,"navigation":119,"path":31273,"requiresChild":119,"seo":31274,"stem":31275,"__hash__":31276},"components/docs/components/ConcentricSpin.md","ConcentricSpin",{"type":8,"value":30949,"toc":31268},[30950,30953,30956,30958,30960,30963,30965,31266],[11,30951,30947],{"id":30952},"concentricspin",[15,30954,30955],{},"Concentric rings that each rotate the underlying image by different amounts",[27113,30957],{"component":30947},[1202,30959,27117],{"id":21717},[27119,30961],{":props":30962},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Maximum rotation angle per ring\"},{\"name\":\"rings\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of concentric rings\"},{\"name\":\"smoothness\",\"type\":\"number\",\"default\":\"0.03\",\"description\":\"Softness of transitions between rings\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Randomization seed for per-ring rotation variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Speed of continuous ring rotation\"},{\"name\":\"speedRandomness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How much each ring varies in rotation speed and direction\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the concentric rings\"}]",[1202,30964,27125],{"id":27124},[23,30966,30967,31023,31082,31138,31196],{":tabs":25},[27,30968,30970],{"className":29,"code":30969,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[34,30971,30972,30980,30987,30995,30999,31007,31015],{"__ignoreMap":32},[37,30973,30974,30976,30978],{"class":39,"line":40},[37,30975,44],{"class":43},[37,30977,48],{"class":47},[37,30979,62],{"class":43},[37,30981,30982,30984],{"class":39,"line":65},[37,30983,75],{"class":43},[37,30985,30986],{"class":47},"ConcentricSpin\n",[37,30988,30989,30991,30993],{"class":39,"line":72},[37,30990,18081],{"class":51},[37,30992,55],{"class":43},[37,30994,27156],{"class":58},[37,30996,30997],{"class":39,"line":116},[37,30998,27161],{"class":43},[37,31000,31001,31003,31005],{"class":39,"line":123},[37,31002,174],{"class":43},[37,31004,3293],{"class":47},[37,31006,113],{"class":43},[37,31008,31009,31011,31013],{"class":39,"line":129},[37,31010,224],{"class":43},[37,31012,30947],{"class":47},[37,31014,62],{"class":43},[37,31016,31017,31019,31021],{"class":39,"line":171},[37,31018,273],{"class":43},[37,31020,48],{"class":47},[37,31022,62],{"class":43},[27,31024,31026],{"className":280,"code":31025,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[34,31027,31028,31036,31042,31054,31058,31066,31074],{"__ignoreMap":32},[37,31029,31030,31032,31034],{"class":39,"line":40},[37,31031,44],{"class":43},[37,31033,48],{"class":291},[37,31035,62],{"class":43},[37,31037,31038,31040],{"class":39,"line":65},[37,31039,75],{"class":43},[37,31041,30986],{"class":291},[37,31043,31044,31046,31048,31050,31052],{"class":39,"line":72},[37,31045,18192],{"class":51},[37,31047,55],{"class":297},[37,31049,326],{"class":43},[37,31051,27215],{"class":291},[37,31053,312],{"class":43},[37,31055,31056],{"class":39,"line":116},[37,31057,27161],{"class":43},[37,31059,31060,31062,31064],{"class":39,"line":123},[37,31061,174],{"class":43},[37,31063,3293],{"class":291},[37,31065,113],{"class":43},[37,31067,31068,31070,31072],{"class":39,"line":129},[37,31069,224],{"class":43},[37,31071,30947],{"class":291},[37,31073,62],{"class":43},[37,31075,31076,31078,31080],{"class":39,"line":171},[37,31077,273],{"class":43},[37,31079,48],{"class":291},[37,31081,62],{"class":43},[27,31083,31084],{"className":3580,"code":31025,"language":3582,"meta":32,"style":32},[34,31085,31086,31094,31100,31110,31114,31122,31130],{"__ignoreMap":32},[37,31087,31088,31090,31092],{"class":39,"line":40},[37,31089,44],{"class":43},[37,31091,48],{"class":291},[37,31093,62],{"class":43},[37,31095,31096,31098],{"class":39,"line":65},[37,31097,75],{"class":43},[37,31099,30986],{"class":291},[37,31101,31102,31104,31106,31108],{"class":39,"line":72},[37,31103,18192],{"class":51},[37,31105,25058],{"class":43},[37,31107,27215],{"class":291},[37,31109,312],{"class":43},[37,31111,31112],{"class":39,"line":116},[37,31113,27161],{"class":43},[37,31115,31116,31118,31120],{"class":39,"line":123},[37,31117,174],{"class":43},[37,31119,3293],{"class":291},[37,31121,113],{"class":43},[37,31123,31124,31126,31128],{"class":39,"line":129},[37,31125,224],{"class":43},[37,31127,30947],{"class":291},[37,31129,62],{"class":43},[37,31131,31132,31134,31136],{"class":39,"line":171},[37,31133,273],{"class":43},[37,31135,48],{"class":291},[37,31137,62],{"class":43},[27,31139,31140],{"className":543,"code":31025,"language":545,"meta":32,"style":32},[34,31141,31142,31150,31156,31168,31172,31180,31188],{"__ignoreMap":32},[37,31143,31144,31146,31148],{"class":39,"line":40},[37,31145,44],{"class":43},[37,31147,48],{"class":291},[37,31149,62],{"class":43},[37,31151,31152,31154],{"class":39,"line":65},[37,31153,75],{"class":43},[37,31155,30986],{"class":291},[37,31157,31158,31160,31162,31164,31166],{"class":39,"line":72},[37,31159,18192],{"class":51},[37,31161,55],{"class":297},[37,31163,326],{"class":43},[37,31165,27215],{"class":291},[37,31167,312],{"class":43},[37,31169,31170],{"class":39,"line":116},[37,31171,27161],{"class":43},[37,31173,31174,31176,31178],{"class":39,"line":123},[37,31175,174],{"class":43},[37,31177,3293],{"class":291},[37,31179,113],{"class":43},[37,31181,31182,31184,31186],{"class":39,"line":129},[37,31183,224],{"class":43},[37,31185,30947],{"class":291},[37,31187,62],{"class":43},[37,31189,31190,31192,31194],{"class":39,"line":171},[37,31191,273],{"class":43},[37,31193,48],{"class":291},[37,31195,62],{"class":43},[27,31197,31199],{"className":987,"code":31198,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConcentricSpin', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,31200,31201,31211,31215,31229,31233,31246,31254,31258,31262],{"__ignoreMap":32},[37,31202,31203,31205,31207,31209],{"class":39,"line":40},[37,31204,1382],{"class":297},[37,31206,9444],{"class":43},[37,31208,1388],{"class":297},[37,31210,9449],{"class":58},[37,31212,31213],{"class":39,"line":65},[37,31214,120],{"emptyLinePlaceholder":119},[37,31216,31217,31219,31221,31223,31225,31227],{"class":39,"line":72},[37,31218,2809],{"class":297},[37,31220,2812],{"class":291},[37,31222,2815],{"class":297},[37,31224,2818],{"class":297},[37,31226,999],{"class":51},[37,31228,1002],{"class":43},[37,31230,31231],{"class":39,"line":116},[37,31232,1007],{"class":43},[37,31234,31235,31237,31240,31242,31244],{"class":39,"line":123},[37,31236,1017],{"class":43},[37,31238,31239],{"class":58},"'ConcentricSpin'",[37,31241,27406],{"class":43},[37,31243,27215],{"class":291},[37,31245,5482],{"class":43},[37,31247,31248,31250,31252],{"class":39,"line":129},[37,31249,4949],{"class":43},[37,31251,3941],{"class":58},[37,31253,3207],{"class":43},[37,31255,31256],{"class":39,"line":171},[37,31257,4966],{"class":43},[37,31259,31260],{"class":39,"line":221},[37,31261,1194],{"class":43},[37,31263,31264],{"class":39,"line":231},[37,31265,1200],{"class":43},[1311,31267,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":31269},[31270,31271],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/concentricspin",{"title":30947,"description":30955},"docs/components/ConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":31278,"title":31279,"body":31280,"category":27972,"componentType":21056,"description":31287,"extension":1323,"meta":31472,"navigation":119,"path":31473,"requiresChild":27975,"seo":31474,"stem":31475,"__hash__":31476},"components/docs/components/ConicGradient.md","ConicGradient",{"type":8,"value":31281,"toc":31468},[31282,31285,31288,31290,31292,31295,31297,31466],[11,31283,31279],{"id":31284},"conicgradient",[15,31286,31287],{},"Colors sweep in a full circle around a center point, like a color wheel",[27113,31289],{"component":31279},[1202,31291,27117],{"id":21717},[27119,31293],{":props":31294},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#FF0080\",\"description\":\"Starting color of the sweep\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#00BFFF\",\"description\":\"Ending color of the sweep (wraps back to Color A)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the sweep\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation offset in degrees — shifts where Color A begins\"},{\"name\":\"repeat\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern.\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"}]",[1202,31296,27125],{"id":27124},[23,31298,31299,31328,31356,31384,31412],{":tabs":25},[27,31300,31302],{"className":29,"code":31301,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CConicGradient />\n\u003C/Shader>\n",[34,31303,31304,31312,31320],{"__ignoreMap":32},[37,31305,31306,31308,31310],{"class":39,"line":40},[37,31307,44],{"class":43},[37,31309,48],{"class":47},[37,31311,62],{"class":43},[37,31313,31314,31316,31318],{"class":39,"line":65},[37,31315,75],{"class":43},[37,31317,31279],{"class":47},[37,31319,113],{"class":43},[37,31321,31322,31324,31326],{"class":39,"line":72},[37,31323,273],{"class":43},[37,31325,48],{"class":47},[37,31327,62],{"class":43},[27,31329,31330],{"className":280,"code":31301,"language":282,"meta":32,"style":32},[34,31331,31332,31340,31348],{"__ignoreMap":32},[37,31333,31334,31336,31338],{"class":39,"line":40},[37,31335,44],{"class":43},[37,31337,48],{"class":291},[37,31339,62],{"class":43},[37,31341,31342,31344,31346],{"class":39,"line":65},[37,31343,75],{"class":43},[37,31345,31279],{"class":291},[37,31347,113],{"class":43},[37,31349,31350,31352,31354],{"class":39,"line":72},[37,31351,273],{"class":43},[37,31353,48],{"class":291},[37,31355,62],{"class":43},[27,31357,31358],{"className":3580,"code":31301,"language":3582,"meta":32,"style":32},[34,31359,31360,31368,31376],{"__ignoreMap":32},[37,31361,31362,31364,31366],{"class":39,"line":40},[37,31363,44],{"class":43},[37,31365,48],{"class":291},[37,31367,62],{"class":43},[37,31369,31370,31372,31374],{"class":39,"line":65},[37,31371,75],{"class":43},[37,31373,31279],{"class":291},[37,31375,113],{"class":43},[37,31377,31378,31380,31382],{"class":39,"line":72},[37,31379,273],{"class":43},[37,31381,48],{"class":291},[37,31383,62],{"class":43},[27,31385,31386],{"className":543,"code":31301,"language":545,"meta":32,"style":32},[34,31387,31388,31396,31404],{"__ignoreMap":32},[37,31389,31390,31392,31394],{"class":39,"line":40},[37,31391,44],{"class":43},[37,31393,48],{"class":291},[37,31395,62],{"class":43},[37,31397,31398,31400,31402],{"class":39,"line":65},[37,31399,75],{"class":43},[37,31401,31279],{"class":291},[37,31403,113],{"class":43},[37,31405,31406,31408,31410],{"class":39,"line":72},[37,31407,273],{"class":43},[37,31409,48],{"class":291},[37,31411,62],{"class":43},[27,31413,31415],{"className":987,"code":31414,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConicGradient', props: {} }\n ]\n})\n",[34,31416,31417,31427,31431,31445,31449,31458,31462],{"__ignoreMap":32},[37,31418,31419,31421,31423,31425],{"class":39,"line":40},[37,31420,1382],{"class":297},[37,31422,9444],{"class":43},[37,31424,1388],{"class":297},[37,31426,9449],{"class":58},[37,31428,31429],{"class":39,"line":65},[37,31430,120],{"emptyLinePlaceholder":119},[37,31432,31433,31435,31437,31439,31441,31443],{"class":39,"line":72},[37,31434,2809],{"class":297},[37,31436,2812],{"class":291},[37,31438,2815],{"class":297},[37,31440,2818],{"class":297},[37,31442,999],{"class":51},[37,31444,1002],{"class":43},[37,31446,31447],{"class":39,"line":116},[37,31448,1007],{"class":43},[37,31450,31451,31453,31456],{"class":39,"line":123},[37,31452,1017],{"class":43},[37,31454,31455],{"class":58},"'ConicGradient'",[37,31457,3207],{"class":43},[37,31459,31460],{"class":39,"line":129},[37,31461,1194],{"class":43},[37,31463,31464],{"class":39,"line":171},[37,31465,1200],{"class":43},[1311,31467,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":31469},[31470,31471],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/conicgradient",{"title":31279,"description":31287},"docs/components/ConicGradient","NIVNPxXJkDB1SOPz03uSQXaV6QUuIWABabpG6Qi-clQ",{"id":31478,"title":31479,"body":31480,"category":27715,"componentType":21062,"description":31487,"extension":1323,"meta":31748,"navigation":119,"path":31749,"requiresChild":119,"seo":31750,"stem":31751,"__hash__":31752},"components/docs/components/ContourLines.md","ContourLines",{"type":8,"value":31481,"toc":31744},[31482,31485,31488,31490,31492,31495,31497,31742],[11,31483,31479],{"id":31484},"contourlines",[15,31486,31487],{},"Draw topographical contour lines based on luminance or alpha",[27113,31489],{"component":31479},[1202,31491,27117],{"id":21717},[27119,31493],{":props":31494},"[{\"name\":\"levels\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of contour levels\"},{\"name\":\"lineWidth\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Width of the contour lines in pixels\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness of the lines (0 = sharp, 1 = soft)\"},{\"name\":\"gamma\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Contour distribution. \u003C1 clusters in bright, >1 clusters in dark\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Invert the source values\"},{\"name\":\"source\",\"type\":\"\\\"luminance\\\" | \\\"alpha\\\"\",\"default\":\"luminance\",\"description\":\"Use luminance or alpha channel for contours\"},{\"name\":\"colorMode\",\"type\":\"\\\"source\\\" | \\\"custom\\\"\",\"default\":\"source\",\"description\":\"Use source image colors or custom colors\"},{\"name\":\"lineColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the contour lines (custom mode)\"},{\"name\":\"backgroundColor\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Background color (custom mode)\"}]",[1202,31496,27125],{"id":27124},[23,31498,31499,31544,31588,31632,31676],{":tabs":25},[27,31500,31502],{"className":29,"code":31501,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CContourLines>\n \u003CCircle />\n \u003C/ContourLines>\n\u003C/Shader>\n",[34,31503,31504,31512,31520,31528,31536],{"__ignoreMap":32},[37,31505,31506,31508,31510],{"class":39,"line":40},[37,31507,44],{"class":43},[37,31509,48],{"class":47},[37,31511,62],{"class":43},[37,31513,31514,31516,31518],{"class":39,"line":65},[37,31515,75],{"class":43},[37,31517,31479],{"class":47},[37,31519,62],{"class":43},[37,31521,31522,31524,31526],{"class":39,"line":72},[37,31523,174],{"class":43},[37,31525,3293],{"class":47},[37,31527,113],{"class":43},[37,31529,31530,31532,31534],{"class":39,"line":116},[37,31531,224],{"class":43},[37,31533,31479],{"class":47},[37,31535,62],{"class":43},[37,31537,31538,31540,31542],{"class":39,"line":123},[37,31539,273],{"class":43},[37,31541,48],{"class":47},[37,31543,62],{"class":43},[27,31545,31546],{"className":280,"code":31501,"language":282,"meta":32,"style":32},[34,31547,31548,31556,31564,31572,31580],{"__ignoreMap":32},[37,31549,31550,31552,31554],{"class":39,"line":40},[37,31551,44],{"class":43},[37,31553,48],{"class":291},[37,31555,62],{"class":43},[37,31557,31558,31560,31562],{"class":39,"line":65},[37,31559,75],{"class":43},[37,31561,31479],{"class":291},[37,31563,62],{"class":43},[37,31565,31566,31568,31570],{"class":39,"line":72},[37,31567,174],{"class":43},[37,31569,3293],{"class":291},[37,31571,113],{"class":43},[37,31573,31574,31576,31578],{"class":39,"line":116},[37,31575,224],{"class":43},[37,31577,31479],{"class":291},[37,31579,62],{"class":43},[37,31581,31582,31584,31586],{"class":39,"line":123},[37,31583,273],{"class":43},[37,31585,48],{"class":291},[37,31587,62],{"class":43},[27,31589,31590],{"className":3580,"code":31501,"language":3582,"meta":32,"style":32},[34,31591,31592,31600,31608,31616,31624],{"__ignoreMap":32},[37,31593,31594,31596,31598],{"class":39,"line":40},[37,31595,44],{"class":43},[37,31597,48],{"class":291},[37,31599,62],{"class":43},[37,31601,31602,31604,31606],{"class":39,"line":65},[37,31603,75],{"class":43},[37,31605,31479],{"class":291},[37,31607,62],{"class":43},[37,31609,31610,31612,31614],{"class":39,"line":72},[37,31611,174],{"class":43},[37,31613,3293],{"class":291},[37,31615,113],{"class":43},[37,31617,31618,31620,31622],{"class":39,"line":116},[37,31619,224],{"class":43},[37,31621,31479],{"class":291},[37,31623,62],{"class":43},[37,31625,31626,31628,31630],{"class":39,"line":123},[37,31627,273],{"class":43},[37,31629,48],{"class":291},[37,31631,62],{"class":43},[27,31633,31634],{"className":543,"code":31501,"language":545,"meta":32,"style":32},[34,31635,31636,31644,31652,31660,31668],{"__ignoreMap":32},[37,31637,31638,31640,31642],{"class":39,"line":40},[37,31639,44],{"class":43},[37,31641,48],{"class":291},[37,31643,62],{"class":43},[37,31645,31646,31648,31650],{"class":39,"line":65},[37,31647,75],{"class":43},[37,31649,31479],{"class":291},[37,31651,62],{"class":43},[37,31653,31654,31656,31658],{"class":39,"line":72},[37,31655,174],{"class":43},[37,31657,3293],{"class":291},[37,31659,113],{"class":43},[37,31661,31662,31664,31666],{"class":39,"line":116},[37,31663,224],{"class":43},[37,31665,31479],{"class":291},[37,31667,62],{"class":43},[37,31669,31670,31672,31674],{"class":39,"line":123},[37,31671,273],{"class":43},[37,31673,48],{"class":291},[37,31675,62],{"class":43},[27,31677,31679],{"className":987,"code":31678,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ContourLines', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,31680,31681,31691,31695,31709,31713,31722,31730,31734,31738],{"__ignoreMap":32},[37,31682,31683,31685,31687,31689],{"class":39,"line":40},[37,31684,1382],{"class":297},[37,31686,9444],{"class":43},[37,31688,1388],{"class":297},[37,31690,9449],{"class":58},[37,31692,31693],{"class":39,"line":65},[37,31694,120],{"emptyLinePlaceholder":119},[37,31696,31697,31699,31701,31703,31705,31707],{"class":39,"line":72},[37,31698,2809],{"class":297},[37,31700,2812],{"class":291},[37,31702,2815],{"class":297},[37,31704,2818],{"class":297},[37,31706,999],{"class":51},[37,31708,1002],{"class":43},[37,31710,31711],{"class":39,"line":116},[37,31712,1007],{"class":43},[37,31714,31715,31717,31720],{"class":39,"line":123},[37,31716,1017],{"class":43},[37,31718,31719],{"class":58},"'ContourLines'",[37,31721,4944],{"class":43},[37,31723,31724,31726,31728],{"class":39,"line":129},[37,31725,4949],{"class":43},[37,31727,3941],{"class":58},[37,31729,3207],{"class":43},[37,31731,31732],{"class":39,"line":171},[37,31733,4966],{"class":43},[37,31735,31736],{"class":39,"line":221},[37,31737,1194],{"class":43},[37,31739,31740],{"class":39,"line":231},[37,31741,1200],{"class":43},[1311,31743,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":31745},[31746,31747],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/contourlines",{"title":31479,"description":31487},"docs/components/ContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":31754,"title":31755,"body":31756,"category":30939,"componentType":21056,"description":31763,"extension":1323,"meta":32041,"navigation":119,"path":32042,"requiresChild":27975,"seo":32043,"stem":32044,"__hash__":32045},"components/docs/components/Crescent.md","Crescent",{"type":8,"value":31757,"toc":32037},[31758,31761,31764,31766,31768,31771,31773,32035],[11,31759,31755],{"id":31760},"crescent",[15,31762,31763],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[27113,31765],{"component":31755},[1202,31767,27117],{"id":21717},[27119,31769],{":props":31770},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the crescent\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the crescent\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Outer circle radius\"},{\"name\":\"innerRatio\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Inner (bite) circle radius as a fraction of outer radius\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Horizontal distance the bite circle is shifted from center\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,31772,27125],{"id":27124},[23,31774,31775,31824,31875,31923,31973],{":tabs":25},[27,31776,31778],{"className":29,"code":31777,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[34,31779,31780,31788,31795,31803,31812,31816],{"__ignoreMap":32},[37,31781,31782,31784,31786],{"class":39,"line":40},[37,31783,44],{"class":43},[37,31785,48],{"class":47},[37,31787,62],{"class":43},[37,31789,31790,31792],{"class":39,"line":65},[37,31791,75],{"class":43},[37,31793,31794],{"class":47},"Crescent\n",[37,31796,31797,31799,31801],{"class":39,"line":72},[37,31798,7570],{"class":51},[37,31800,55],{"class":43},[37,31802,7526],{"class":58},[37,31804,31805,31807,31809],{"class":39,"line":116},[37,31806,15113],{"class":51},[37,31808,55],{"class":43},[37,31810,31811],{"class":58},"\"0.3\"\n",[37,31813,31814],{"class":39,"line":123},[37,31815,2314],{"class":43},[37,31817,31818,31820,31822],{"class":39,"line":129},[37,31819,273],{"class":43},[37,31821,48],{"class":47},[37,31823,62],{"class":43},[27,31825,31827],{"className":280,"code":31826,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[34,31828,31829,31837,31843,31851,31863,31867],{"__ignoreMap":32},[37,31830,31831,31833,31835],{"class":39,"line":40},[37,31832,44],{"class":43},[37,31834,48],{"class":291},[37,31836,62],{"class":43},[37,31838,31839,31841],{"class":39,"line":65},[37,31840,75],{"class":43},[37,31842,31794],{"class":291},[37,31844,31845,31847,31849],{"class":39,"line":72},[37,31846,7570],{"class":51},[37,31848,55],{"class":297},[37,31850,7526],{"class":58},[37,31852,31853,31855,31857,31859,31861],{"class":39,"line":116},[37,31854,7580],{"class":51},[37,31856,55],{"class":297},[37,31858,326],{"class":43},[37,31860,19694],{"class":291},[37,31862,312],{"class":43},[37,31864,31865],{"class":39,"line":123},[37,31866,2314],{"class":43},[37,31868,31869,31871,31873],{"class":39,"line":129},[37,31870,273],{"class":43},[37,31872,48],{"class":291},[37,31874,62],{"class":43},[27,31876,31877],{"className":3580,"code":31826,"language":3582,"meta":32,"style":32},[34,31878,31879,31887,31893,31901,31911,31915],{"__ignoreMap":32},[37,31880,31881,31883,31885],{"class":39,"line":40},[37,31882,44],{"class":43},[37,31884,48],{"class":291},[37,31886,62],{"class":43},[37,31888,31889,31891],{"class":39,"line":65},[37,31890,75],{"class":43},[37,31892,31794],{"class":291},[37,31894,31895,31897,31899],{"class":39,"line":72},[37,31896,7570],{"class":51},[37,31898,55],{"class":43},[37,31900,7526],{"class":58},[37,31902,31903,31905,31907,31909],{"class":39,"line":116},[37,31904,7580],{"class":51},[37,31906,25058],{"class":43},[37,31908,19694],{"class":291},[37,31910,312],{"class":43},[37,31912,31913],{"class":39,"line":123},[37,31914,2314],{"class":43},[37,31916,31917,31919,31921],{"class":39,"line":129},[37,31918,273],{"class":43},[37,31920,48],{"class":291},[37,31922,62],{"class":43},[27,31924,31925],{"className":543,"code":31826,"language":545,"meta":32,"style":32},[34,31926,31927,31935,31941,31949,31961,31965],{"__ignoreMap":32},[37,31928,31929,31931,31933],{"class":39,"line":40},[37,31930,44],{"class":43},[37,31932,48],{"class":291},[37,31934,62],{"class":43},[37,31936,31937,31939],{"class":39,"line":65},[37,31938,75],{"class":43},[37,31940,31794],{"class":291},[37,31942,31943,31945,31947],{"class":39,"line":72},[37,31944,7570],{"class":51},[37,31946,55],{"class":297},[37,31948,7526],{"class":58},[37,31950,31951,31953,31955,31957,31959],{"class":39,"line":116},[37,31952,7580],{"class":51},[37,31954,55],{"class":297},[37,31956,326],{"class":43},[37,31958,19694],{"class":291},[37,31960,312],{"class":43},[37,31962,31963],{"class":39,"line":123},[37,31964,2314],{"class":43},[37,31966,31967,31969,31971],{"class":39,"line":129},[37,31968,273],{"class":43},[37,31970,48],{"class":291},[37,31972,62],{"class":43},[27,31974,31976],{"className":987,"code":31975,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Crescent', props: { color: '#ffffff', radius: 0.3 } }\n ]\n})\n",[34,31977,31978,31988,31992,32006,32010,32027,32031],{"__ignoreMap":32},[37,31979,31980,31982,31984,31986],{"class":39,"line":40},[37,31981,1382],{"class":297},[37,31983,9444],{"class":43},[37,31985,1388],{"class":297},[37,31987,9449],{"class":58},[37,31989,31990],{"class":39,"line":65},[37,31991,120],{"emptyLinePlaceholder":119},[37,31993,31994,31996,31998,32000,32002,32004],{"class":39,"line":72},[37,31995,2809],{"class":297},[37,31997,2812],{"class":291},[37,31999,2815],{"class":297},[37,32001,2818],{"class":297},[37,32003,999],{"class":51},[37,32005,1002],{"class":43},[37,32007,32008],{"class":39,"line":116},[37,32009,1007],{"class":43},[37,32011,32012,32014,32017,32019,32021,32023,32025],{"class":39,"line":123},[37,32013,1017],{"class":43},[37,32015,32016],{"class":58},"'Crescent'",[37,32018,2845],{"class":43},[37,32020,8101],{"class":58},[37,32022,4501],{"class":43},[37,32024,19694],{"class":291},[37,32026,1142],{"class":43},[37,32028,32029],{"class":39,"line":129},[37,32030,1194],{"class":43},[37,32032,32033],{"class":39,"line":171},[37,32034,1200],{"class":43},[1311,32036,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":32038},[32039,32040],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/crescent",{"title":31755,"description":31763},"docs/components/Crescent","ObqUw-47jUNAlPME041OasGzcc_jSvwXgXEVE3NCaLk",{"id":32047,"title":32048,"body":32049,"category":30939,"componentType":21056,"description":32056,"extension":1323,"meta":32334,"navigation":119,"path":32335,"requiresChild":27975,"seo":32336,"stem":32337,"__hash__":32338},"components/docs/components/Cross.md","Cross",{"type":8,"value":32050,"toc":32330},[32051,32054,32057,32059,32061,32064,32066,32328],[11,32052,32048],{"id":32053},"cross",[15,32055,32056],{},"Plus / cross shape with adjustable arm length, width, and rounding",[27113,32058],{"component":32048},[1202,32060,27117],{"id":21717},[27119,32062],{":props":32063},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the cross\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the cross\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Arm half-length — distance from center to the end of each arm\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.08\",\"description\":\"Arm half-width — controls how wide each arm is\"},{\"name\":\"rounding\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Corner rounding — rounds the arm ends and concave corners\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees (45° turns a plus into an ×)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,32065,27125],{"id":27124},[23,32067,32068,32117,32168,32216,32266],{":tabs":25},[27,32069,32071],{"className":29,"code":32070,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[34,32072,32073,32081,32088,32096,32105,32109],{"__ignoreMap":32},[37,32074,32075,32077,32079],{"class":39,"line":40},[37,32076,44],{"class":43},[37,32078,48],{"class":47},[37,32080,62],{"class":43},[37,32082,32083,32085],{"class":39,"line":65},[37,32084,75],{"class":43},[37,32086,32087],{"class":47},"Cross\n",[37,32089,32090,32092,32094],{"class":39,"line":72},[37,32091,7570],{"class":51},[37,32093,55],{"class":43},[37,32095,7526],{"class":58},[37,32097,32098,32100,32102],{"class":39,"line":116},[37,32099,15113],{"class":51},[37,32101,55],{"class":43},[37,32103,32104],{"class":58},"\"0.35\"\n",[37,32106,32107],{"class":39,"line":123},[37,32108,2314],{"class":43},[37,32110,32111,32113,32115],{"class":39,"line":129},[37,32112,273],{"class":43},[37,32114,48],{"class":47},[37,32116,62],{"class":43},[27,32118,32120],{"className":280,"code":32119,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[34,32121,32122,32130,32136,32144,32156,32160],{"__ignoreMap":32},[37,32123,32124,32126,32128],{"class":39,"line":40},[37,32125,44],{"class":43},[37,32127,48],{"class":291},[37,32129,62],{"class":43},[37,32131,32132,32134],{"class":39,"line":65},[37,32133,75],{"class":43},[37,32135,32087],{"class":291},[37,32137,32138,32140,32142],{"class":39,"line":72},[37,32139,7570],{"class":51},[37,32141,55],{"class":297},[37,32143,7526],{"class":58},[37,32145,32146,32148,32150,32152,32154],{"class":39,"line":116},[37,32147,7580],{"class":51},[37,32149,55],{"class":297},[37,32151,326],{"class":43},[37,32153,18841],{"class":291},[37,32155,312],{"class":43},[37,32157,32158],{"class":39,"line":123},[37,32159,2314],{"class":43},[37,32161,32162,32164,32166],{"class":39,"line":129},[37,32163,273],{"class":43},[37,32165,48],{"class":291},[37,32167,62],{"class":43},[27,32169,32170],{"className":3580,"code":32119,"language":3582,"meta":32,"style":32},[34,32171,32172,32180,32186,32194,32204,32208],{"__ignoreMap":32},[37,32173,32174,32176,32178],{"class":39,"line":40},[37,32175,44],{"class":43},[37,32177,48],{"class":291},[37,32179,62],{"class":43},[37,32181,32182,32184],{"class":39,"line":65},[37,32183,75],{"class":43},[37,32185,32087],{"class":291},[37,32187,32188,32190,32192],{"class":39,"line":72},[37,32189,7570],{"class":51},[37,32191,55],{"class":43},[37,32193,7526],{"class":58},[37,32195,32196,32198,32200,32202],{"class":39,"line":116},[37,32197,7580],{"class":51},[37,32199,25058],{"class":43},[37,32201,18841],{"class":291},[37,32203,312],{"class":43},[37,32205,32206],{"class":39,"line":123},[37,32207,2314],{"class":43},[37,32209,32210,32212,32214],{"class":39,"line":129},[37,32211,273],{"class":43},[37,32213,48],{"class":291},[37,32215,62],{"class":43},[27,32217,32218],{"className":543,"code":32119,"language":545,"meta":32,"style":32},[34,32219,32220,32228,32234,32242,32254,32258],{"__ignoreMap":32},[37,32221,32222,32224,32226],{"class":39,"line":40},[37,32223,44],{"class":43},[37,32225,48],{"class":291},[37,32227,62],{"class":43},[37,32229,32230,32232],{"class":39,"line":65},[37,32231,75],{"class":43},[37,32233,32087],{"class":291},[37,32235,32236,32238,32240],{"class":39,"line":72},[37,32237,7570],{"class":51},[37,32239,55],{"class":297},[37,32241,7526],{"class":58},[37,32243,32244,32246,32248,32250,32252],{"class":39,"line":116},[37,32245,7580],{"class":51},[37,32247,55],{"class":297},[37,32249,326],{"class":43},[37,32251,18841],{"class":291},[37,32253,312],{"class":43},[37,32255,32256],{"class":39,"line":123},[37,32257,2314],{"class":43},[37,32259,32260,32262,32264],{"class":39,"line":129},[37,32261,273],{"class":43},[37,32263,48],{"class":291},[37,32265,62],{"class":43},[27,32267,32269],{"className":987,"code":32268,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Cross', props: { color: '#ffffff', radius: 0.35 } }\n ]\n})\n",[34,32270,32271,32281,32285,32299,32303,32320,32324],{"__ignoreMap":32},[37,32272,32273,32275,32277,32279],{"class":39,"line":40},[37,32274,1382],{"class":297},[37,32276,9444],{"class":43},[37,32278,1388],{"class":297},[37,32280,9449],{"class":58},[37,32282,32283],{"class":39,"line":65},[37,32284,120],{"emptyLinePlaceholder":119},[37,32286,32287,32289,32291,32293,32295,32297],{"class":39,"line":72},[37,32288,2809],{"class":297},[37,32290,2812],{"class":291},[37,32292,2815],{"class":297},[37,32294,2818],{"class":297},[37,32296,999],{"class":51},[37,32298,1002],{"class":43},[37,32300,32301],{"class":39,"line":116},[37,32302,1007],{"class":43},[37,32304,32305,32307,32310,32312,32314,32316,32318],{"class":39,"line":123},[37,32306,1017],{"class":43},[37,32308,32309],{"class":58},"'Cross'",[37,32311,2845],{"class":43},[37,32313,8101],{"class":58},[37,32315,4501],{"class":43},[37,32317,18841],{"class":291},[37,32319,1142],{"class":43},[37,32321,32322],{"class":39,"line":129},[37,32323,1194],{"class":43},[37,32325,32326],{"class":39,"line":171},[37,32327,1200],{"class":43},[1311,32329,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":32331},[32332,32333],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/cross",{"title":32048,"description":32056},"docs/components/Cross","8h8ZHf2RZRmwG-7PmNT2Lcb_l-kH3tvrmVN0fWFbTNs",{"id":32340,"title":32341,"body":32342,"category":32610,"componentType":21062,"description":32349,"extension":1323,"meta":32611,"navigation":119,"path":32612,"requiresChild":119,"seo":32613,"stem":32614,"__hash__":32615},"components/docs/components/Crystal.md","Crystal",{"type":8,"value":32343,"toc":32606},[32344,32347,32350,32352,32354,32357,32359,32604],[11,32345,32341],{"id":32346},"crystal",[15,32348,32349],{},"Diamond-like crystal lens with faceted refraction.",[27113,32351],{"component":32341},[1202,32353,27117],{"id":21717},[27119,32355],{":props":32356},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the crystal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the crystal shape (1 = default size)\"},{\"name\":\"cutout\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Cut out alpha outside the crystal shape\"},{\"name\":\"refraction\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How strongly the crystal refracts content beneath\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Prismatic rainbow dispersion — splits light into spectral colors\"},{\"name\":\"facets\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Symmetry order — how many times the facet pattern repeats around the center\"},{\"name\":\"fresnel\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Fresnel rim glow intensity around the crystal boundary\"},{\"name\":\"fresnelSoftness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Fresnel rim width — higher values spread the glow further inward\"},{\"name\":\"fresnelColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the fresnel rim glow\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the crystal boundary edge\"},{\"name\":\"innerZoom\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Magnification of content seen through the crystal\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"270\",\"description\":\"Light direction angle in degrees\"},{\"name\":\"highlights\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Additive brightness on light-facing facets — never darkens\"},{\"name\":\"shadows\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Darkening on shadow-facing facets — never brightens\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Overall crystal brightness — higher values push facets toward brilliant white\"},{\"name\":\"tintColor\",\"type\":\"string\",\"default\":\"#e8e0ff\",\"description\":\"Crystal body tint color\"},{\"name\":\"tintIntensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How much tint color is applied to the crystal interior\"},{\"name\":\"tintPreserveLuminosity\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Preserve original brightness when tinting\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"polygonSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](/docs/guide/shape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](/docs/guide/shape-effects) for how to generate an SDF from an SVG.\"}]",[1202,32358,27125],{"id":27124},[23,32360,32361,32406,32450,32494,32538],{":tabs":25},[27,32362,32364],{"className":29,"code":32363,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCrystal>\n \u003CCircle />\n \u003C/Crystal>\n\u003C/Shader>\n",[34,32365,32366,32374,32382,32390,32398],{"__ignoreMap":32},[37,32367,32368,32370,32372],{"class":39,"line":40},[37,32369,44],{"class":43},[37,32371,48],{"class":47},[37,32373,62],{"class":43},[37,32375,32376,32378,32380],{"class":39,"line":65},[37,32377,75],{"class":43},[37,32379,32341],{"class":47},[37,32381,62],{"class":43},[37,32383,32384,32386,32388],{"class":39,"line":72},[37,32385,174],{"class":43},[37,32387,3293],{"class":47},[37,32389,113],{"class":43},[37,32391,32392,32394,32396],{"class":39,"line":116},[37,32393,224],{"class":43},[37,32395,32341],{"class":47},[37,32397,62],{"class":43},[37,32399,32400,32402,32404],{"class":39,"line":123},[37,32401,273],{"class":43},[37,32403,48],{"class":47},[37,32405,62],{"class":43},[27,32407,32408],{"className":280,"code":32363,"language":282,"meta":32,"style":32},[34,32409,32410,32418,32426,32434,32442],{"__ignoreMap":32},[37,32411,32412,32414,32416],{"class":39,"line":40},[37,32413,44],{"class":43},[37,32415,48],{"class":291},[37,32417,62],{"class":43},[37,32419,32420,32422,32424],{"class":39,"line":65},[37,32421,75],{"class":43},[37,32423,32341],{"class":291},[37,32425,62],{"class":43},[37,32427,32428,32430,32432],{"class":39,"line":72},[37,32429,174],{"class":43},[37,32431,3293],{"class":291},[37,32433,113],{"class":43},[37,32435,32436,32438,32440],{"class":39,"line":116},[37,32437,224],{"class":43},[37,32439,32341],{"class":291},[37,32441,62],{"class":43},[37,32443,32444,32446,32448],{"class":39,"line":123},[37,32445,273],{"class":43},[37,32447,48],{"class":291},[37,32449,62],{"class":43},[27,32451,32452],{"className":3580,"code":32363,"language":3582,"meta":32,"style":32},[34,32453,32454,32462,32470,32478,32486],{"__ignoreMap":32},[37,32455,32456,32458,32460],{"class":39,"line":40},[37,32457,44],{"class":43},[37,32459,48],{"class":291},[37,32461,62],{"class":43},[37,32463,32464,32466,32468],{"class":39,"line":65},[37,32465,75],{"class":43},[37,32467,32341],{"class":291},[37,32469,62],{"class":43},[37,32471,32472,32474,32476],{"class":39,"line":72},[37,32473,174],{"class":43},[37,32475,3293],{"class":291},[37,32477,113],{"class":43},[37,32479,32480,32482,32484],{"class":39,"line":116},[37,32481,224],{"class":43},[37,32483,32341],{"class":291},[37,32485,62],{"class":43},[37,32487,32488,32490,32492],{"class":39,"line":123},[37,32489,273],{"class":43},[37,32491,48],{"class":291},[37,32493,62],{"class":43},[27,32495,32496],{"className":543,"code":32363,"language":545,"meta":32,"style":32},[34,32497,32498,32506,32514,32522,32530],{"__ignoreMap":32},[37,32499,32500,32502,32504],{"class":39,"line":40},[37,32501,44],{"class":43},[37,32503,48],{"class":291},[37,32505,62],{"class":43},[37,32507,32508,32510,32512],{"class":39,"line":65},[37,32509,75],{"class":43},[37,32511,32341],{"class":291},[37,32513,62],{"class":43},[37,32515,32516,32518,32520],{"class":39,"line":72},[37,32517,174],{"class":43},[37,32519,3293],{"class":291},[37,32521,113],{"class":43},[37,32523,32524,32526,32528],{"class":39,"line":116},[37,32525,224],{"class":43},[37,32527,32341],{"class":291},[37,32529,62],{"class":43},[37,32531,32532,32534,32536],{"class":39,"line":123},[37,32533,273],{"class":43},[37,32535,48],{"class":291},[37,32537,62],{"class":43},[27,32539,32541],{"className":987,"code":32540,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Crystal', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,32542,32543,32553,32557,32571,32575,32584,32592,32596,32600],{"__ignoreMap":32},[37,32544,32545,32547,32549,32551],{"class":39,"line":40},[37,32546,1382],{"class":297},[37,32548,9444],{"class":43},[37,32550,1388],{"class":297},[37,32552,9449],{"class":58},[37,32554,32555],{"class":39,"line":65},[37,32556,120],{"emptyLinePlaceholder":119},[37,32558,32559,32561,32563,32565,32567,32569],{"class":39,"line":72},[37,32560,2809],{"class":297},[37,32562,2812],{"class":291},[37,32564,2815],{"class":297},[37,32566,2818],{"class":297},[37,32568,999],{"class":51},[37,32570,1002],{"class":43},[37,32572,32573],{"class":39,"line":116},[37,32574,1007],{"class":43},[37,32576,32577,32579,32582],{"class":39,"line":123},[37,32578,1017],{"class":43},[37,32580,32581],{"class":58},"'Crystal'",[37,32583,4944],{"class":43},[37,32585,32586,32588,32590],{"class":39,"line":129},[37,32587,4949],{"class":43},[37,32589,3941],{"class":58},[37,32591,3207],{"class":43},[37,32593,32594],{"class":39,"line":171},[37,32595,4966],{"class":43},[37,32597,32598],{"class":39,"line":221},[37,32599,1194],{"class":43},[37,32601,32602],{"class":39,"line":231},[37,32603,1200],{"class":43},[1311,32605,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":32607},[32608,32609],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},"Shape Effects",{},"/docs/components/crystal",{"title":32341,"description":32349},"docs/components/Crystal","-FxLCmCZzp_ueV9QfIlLY-OvVQZj_IC4AWXu45eZ9YA",{"id":32617,"title":12358,"body":32618,"category":30373,"componentType":21062,"description":32625,"extension":1323,"meta":32991,"navigation":119,"path":32992,"requiresChild":119,"seo":32993,"stem":32994,"__hash__":32995},"components/docs/components/CursorRipples.md",{"type":8,"value":32619,"toc":32987},[32620,32623,32626,32628,32630,32633,32635,32985],[11,32621,12358],{"id":32622},"cursorripples",[15,32624,32625],{},"Fluid-like ripple distortion",[27113,32627],{"component":12358},[1202,32629,27117],{"id":21717},[27119,32631],{":props":32632},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Strength of the ripple distortion\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"10\",\"description\":\"How quickly ripples fade (higher = faster)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Radius of cursor influence\"},{\"name\":\"chromaticSplit\",\"type\":\"number\",\"default\":\"1\",\"description\":\"RGB channel separation along ripple edges\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,32634,27125],{"id":27124},[23,32636,32637,32703,32775,32841,32911],{":tabs":25},[27,32638,32640],{"className":29,"code":32639,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCursorRipples\n :intensity=\"10\"\n :radius=\"0.5\"\n >\n \u003CCircle />\n \u003C/CursorRipples>\n\u003C/Shader>\n",[34,32641,32642,32650,32657,32666,32675,32679,32687,32695],{"__ignoreMap":32},[37,32643,32644,32646,32648],{"class":39,"line":40},[37,32645,44],{"class":43},[37,32647,48],{"class":47},[37,32649,62],{"class":43},[37,32651,32652,32654],{"class":39,"line":65},[37,32653,75],{"class":43},[37,32655,32656],{"class":47},"CursorRipples\n",[37,32658,32659,32661,32663],{"class":39,"line":72},[37,32660,18081],{"class":51},[37,32662,55],{"class":43},[37,32664,32665],{"class":58},"\"10\"\n",[37,32667,32668,32670,32672],{"class":39,"line":116},[37,32669,15113],{"class":51},[37,32671,55],{"class":43},[37,32673,32674],{"class":58},"\"0.5\"\n",[37,32676,32677],{"class":39,"line":123},[37,32678,27161],{"class":43},[37,32680,32681,32683,32685],{"class":39,"line":129},[37,32682,174],{"class":43},[37,32684,3293],{"class":47},[37,32686,113],{"class":43},[37,32688,32689,32691,32693],{"class":39,"line":171},[37,32690,224],{"class":43},[37,32692,12358],{"class":47},[37,32694,62],{"class":43},[37,32696,32697,32699,32701],{"class":39,"line":221},[37,32698,273],{"class":43},[37,32700,48],{"class":47},[37,32702,62],{"class":43},[27,32704,32706],{"className":280,"code":32705,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CCursorRipples\n intensity={10}\n radius={0.5}\n >\n \u003CCircle />\n \u003C/CursorRipples>\n\u003C/Shader>\n",[34,32707,32708,32716,32722,32735,32747,32751,32759,32767],{"__ignoreMap":32},[37,32709,32710,32712,32714],{"class":39,"line":40},[37,32711,44],{"class":43},[37,32713,48],{"class":291},[37,32715,62],{"class":43},[37,32717,32718,32720],{"class":39,"line":65},[37,32719,75],{"class":43},[37,32721,32656],{"class":291},[37,32723,32724,32726,32728,32730,32733],{"class":39,"line":72},[37,32725,18192],{"class":51},[37,32727,55],{"class":297},[37,32729,326],{"class":43},[37,32731,32732],{"class":291},"10",[37,32734,312],{"class":43},[37,32736,32737,32739,32741,32743,32745],{"class":39,"line":116},[37,32738,7580],{"class":51},[37,32740,55],{"class":297},[37,32742,326],{"class":43},[37,32744,5689],{"class":291},[37,32746,312],{"class":43},[37,32748,32749],{"class":39,"line":123},[37,32750,27161],{"class":43},[37,32752,32753,32755,32757],{"class":39,"line":129},[37,32754,174],{"class":43},[37,32756,3293],{"class":291},[37,32758,113],{"class":43},[37,32760,32761,32763,32765],{"class":39,"line":171},[37,32762,224],{"class":43},[37,32764,12358],{"class":291},[37,32766,62],{"class":43},[37,32768,32769,32771,32773],{"class":39,"line":221},[37,32770,273],{"class":43},[37,32772,48],{"class":291},[37,32774,62],{"class":43},[27,32776,32777],{"className":3580,"code":32705,"language":3582,"meta":32,"style":32},[34,32778,32779,32787,32793,32803,32813,32817,32825,32833],{"__ignoreMap":32},[37,32780,32781,32783,32785],{"class":39,"line":40},[37,32782,44],{"class":43},[37,32784,48],{"class":291},[37,32786,62],{"class":43},[37,32788,32789,32791],{"class":39,"line":65},[37,32790,75],{"class":43},[37,32792,32656],{"class":291},[37,32794,32795,32797,32799,32801],{"class":39,"line":72},[37,32796,18192],{"class":51},[37,32798,25058],{"class":43},[37,32800,32732],{"class":291},[37,32802,312],{"class":43},[37,32804,32805,32807,32809,32811],{"class":39,"line":116},[37,32806,7580],{"class":51},[37,32808,25058],{"class":43},[37,32810,5689],{"class":291},[37,32812,312],{"class":43},[37,32814,32815],{"class":39,"line":123},[37,32816,27161],{"class":43},[37,32818,32819,32821,32823],{"class":39,"line":129},[37,32820,174],{"class":43},[37,32822,3293],{"class":291},[37,32824,113],{"class":43},[37,32826,32827,32829,32831],{"class":39,"line":171},[37,32828,224],{"class":43},[37,32830,12358],{"class":291},[37,32832,62],{"class":43},[37,32834,32835,32837,32839],{"class":39,"line":221},[37,32836,273],{"class":43},[37,32838,48],{"class":291},[37,32840,62],{"class":43},[27,32842,32843],{"className":543,"code":32705,"language":545,"meta":32,"style":32},[34,32844,32845,32853,32859,32871,32883,32887,32895,32903],{"__ignoreMap":32},[37,32846,32847,32849,32851],{"class":39,"line":40},[37,32848,44],{"class":43},[37,32850,48],{"class":291},[37,32852,62],{"class":43},[37,32854,32855,32857],{"class":39,"line":65},[37,32856,75],{"class":43},[37,32858,32656],{"class":291},[37,32860,32861,32863,32865,32867,32869],{"class":39,"line":72},[37,32862,18192],{"class":51},[37,32864,55],{"class":297},[37,32866,326],{"class":43},[37,32868,32732],{"class":291},[37,32870,312],{"class":43},[37,32872,32873,32875,32877,32879,32881],{"class":39,"line":116},[37,32874,7580],{"class":51},[37,32876,55],{"class":297},[37,32878,326],{"class":43},[37,32880,5689],{"class":291},[37,32882,312],{"class":43},[37,32884,32885],{"class":39,"line":123},[37,32886,27161],{"class":43},[37,32888,32889,32891,32893],{"class":39,"line":129},[37,32890,174],{"class":43},[37,32892,3293],{"class":291},[37,32894,113],{"class":43},[37,32896,32897,32899,32901],{"class":39,"line":171},[37,32898,224],{"class":43},[37,32900,12358],{"class":291},[37,32902,62],{"class":43},[37,32904,32905,32907,32909],{"class":39,"line":221},[37,32906,273],{"class":43},[37,32908,48],{"class":291},[37,32910,62],{"class":43},[27,32912,32914],{"className":987,"code":32913,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorRipples', props: { intensity: 10, radius: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,32915,32916,32926,32930,32944,32948,32965,32973,32977,32981],{"__ignoreMap":32},[37,32917,32918,32920,32922,32924],{"class":39,"line":40},[37,32919,1382],{"class":297},[37,32921,9444],{"class":43},[37,32923,1388],{"class":297},[37,32925,9449],{"class":58},[37,32927,32928],{"class":39,"line":65},[37,32929,120],{"emptyLinePlaceholder":119},[37,32931,32932,32934,32936,32938,32940,32942],{"class":39,"line":72},[37,32933,2809],{"class":297},[37,32935,2812],{"class":291},[37,32937,2815],{"class":297},[37,32939,2818],{"class":297},[37,32941,999],{"class":51},[37,32943,1002],{"class":43},[37,32945,32946],{"class":39,"line":116},[37,32947,1007],{"class":43},[37,32949,32950,32952,32955,32957,32959,32961,32963],{"class":39,"line":123},[37,32951,1017],{"class":43},[37,32953,32954],{"class":58},"'CursorRipples'",[37,32956,27406],{"class":43},[37,32958,32732],{"class":291},[37,32960,4501],{"class":43},[37,32962,5689],{"class":291},[37,32964,5482],{"class":43},[37,32966,32967,32969,32971],{"class":39,"line":129},[37,32968,4949],{"class":43},[37,32970,3941],{"class":58},[37,32972,3207],{"class":43},[37,32974,32975],{"class":39,"line":171},[37,32976,4966],{"class":43},[37,32978,32979],{"class":39,"line":221},[37,32980,1194],{"class":43},[37,32982,32983],{"class":39,"line":231},[37,32984,1200],{"class":43},[1311,32986,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":32988},[32989,32990],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/cursorripples",{"title":12358,"description":32625},"docs/components/CursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":32997,"title":1266,"body":32998,"category":30373,"componentType":21056,"description":33005,"extension":1323,"meta":33245,"navigation":119,"path":33246,"requiresChild":27975,"seo":33247,"stem":33248,"__hash__":33249},"components/docs/components/CursorTrail.md",{"type":8,"value":32999,"toc":33241},[33000,33003,33006,33008,33010,33013,33015,33239],[11,33001,1266],{"id":33002},"cursortrail",[15,33004,33005],{},"Animated trail effect that tracks cursor movement",[27113,33007],{"component":1266},[1202,33009,27117],{"id":21717},[27119,33011],{":props":33012},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#00aaff\",\"description\":\"Color of fresh trails\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff00aa\",\"description\":\"Color trails transition to as they fade\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Base radius of trail circles\"},{\"name\":\"length\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How long trail circles persist (in seconds)\"},{\"name\":\"shrink\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much circles shrink as they fade out (0 = no shrink, 1 = full shrink)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,33014,27125],{"id":27124},[23,33016,33017,33057,33100,33140,33182],{":tabs":25},[27,33018,33020],{"className":29,"code":33019,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n />\n\u003C/Shader>\n",[34,33021,33022,33030,33037,33045,33049],{"__ignoreMap":32},[37,33023,33024,33026,33028],{"class":39,"line":40},[37,33025,44],{"class":43},[37,33027,48],{"class":47},[37,33029,62],{"class":43},[37,33031,33032,33034],{"class":39,"line":65},[37,33033,75],{"class":43},[37,33035,33036],{"class":47},"CursorTrail\n",[37,33038,33039,33041,33043],{"class":39,"line":72},[37,33040,15113],{"class":51},[37,33042,55],{"class":43},[37,33044,32674],{"class":58},[37,33046,33047],{"class":39,"line":116},[37,33048,2314],{"class":43},[37,33050,33051,33053,33055],{"class":39,"line":123},[37,33052,273],{"class":43},[37,33054,48],{"class":47},[37,33056,62],{"class":43},[27,33058,33060],{"className":280,"code":33059,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n />\n\u003C/Shader>\n",[34,33061,33062,33070,33076,33088,33092],{"__ignoreMap":32},[37,33063,33064,33066,33068],{"class":39,"line":40},[37,33065,44],{"class":43},[37,33067,48],{"class":291},[37,33069,62],{"class":43},[37,33071,33072,33074],{"class":39,"line":65},[37,33073,75],{"class":43},[37,33075,33036],{"class":291},[37,33077,33078,33080,33082,33084,33086],{"class":39,"line":72},[37,33079,7580],{"class":51},[37,33081,55],{"class":297},[37,33083,326],{"class":43},[37,33085,5689],{"class":291},[37,33087,312],{"class":43},[37,33089,33090],{"class":39,"line":116},[37,33091,2314],{"class":43},[37,33093,33094,33096,33098],{"class":39,"line":123},[37,33095,273],{"class":43},[37,33097,48],{"class":291},[37,33099,62],{"class":43},[27,33101,33102],{"className":3580,"code":33059,"language":3582,"meta":32,"style":32},[34,33103,33104,33112,33118,33128,33132],{"__ignoreMap":32},[37,33105,33106,33108,33110],{"class":39,"line":40},[37,33107,44],{"class":43},[37,33109,48],{"class":291},[37,33111,62],{"class":43},[37,33113,33114,33116],{"class":39,"line":65},[37,33115,75],{"class":43},[37,33117,33036],{"class":291},[37,33119,33120,33122,33124,33126],{"class":39,"line":72},[37,33121,7580],{"class":51},[37,33123,25058],{"class":43},[37,33125,5689],{"class":291},[37,33127,312],{"class":43},[37,33129,33130],{"class":39,"line":116},[37,33131,2314],{"class":43},[37,33133,33134,33136,33138],{"class":39,"line":123},[37,33135,273],{"class":43},[37,33137,48],{"class":291},[37,33139,62],{"class":43},[27,33141,33142],{"className":543,"code":33059,"language":545,"meta":32,"style":32},[34,33143,33144,33152,33158,33170,33174],{"__ignoreMap":32},[37,33145,33146,33148,33150],{"class":39,"line":40},[37,33147,44],{"class":43},[37,33149,48],{"class":291},[37,33151,62],{"class":43},[37,33153,33154,33156],{"class":39,"line":65},[37,33155,75],{"class":43},[37,33157,33036],{"class":291},[37,33159,33160,33162,33164,33166,33168],{"class":39,"line":72},[37,33161,7580],{"class":51},[37,33163,55],{"class":297},[37,33165,326],{"class":43},[37,33167,5689],{"class":291},[37,33169,312],{"class":43},[37,33171,33172],{"class":39,"line":116},[37,33173,2314],{"class":43},[37,33175,33176,33178,33180],{"class":39,"line":123},[37,33177,273],{"class":43},[37,33179,48],{"class":291},[37,33181,62],{"class":43},[27,33183,33185],{"className":987,"code":33184,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorTrail', props: { radius: 0.5 } }\n ]\n})\n",[34,33186,33187,33197,33201,33215,33219,33231,33235],{"__ignoreMap":32},[37,33188,33189,33191,33193,33195],{"class":39,"line":40},[37,33190,1382],{"class":297},[37,33192,9444],{"class":43},[37,33194,1388],{"class":297},[37,33196,9449],{"class":58},[37,33198,33199],{"class":39,"line":65},[37,33200,120],{"emptyLinePlaceholder":119},[37,33202,33203,33205,33207,33209,33211,33213],{"class":39,"line":72},[37,33204,2809],{"class":297},[37,33206,2812],{"class":291},[37,33208,2815],{"class":297},[37,33210,2818],{"class":297},[37,33212,999],{"class":51},[37,33214,1002],{"class":43},[37,33216,33217],{"class":39,"line":116},[37,33218,1007],{"class":43},[37,33220,33221,33223,33225,33227,33229],{"class":39,"line":123},[37,33222,1017],{"class":43},[37,33224,21548],{"class":58},[37,33226,5477],{"class":43},[37,33228,5689],{"class":291},[37,33230,1142],{"class":43},[37,33232,33233],{"class":39,"line":129},[37,33234,1194],{"class":43},[37,33236,33237],{"class":39,"line":171},[37,33238,1200],{"class":43},[1311,33240,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":33242},[33243,33244],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/cursortrail",{"title":1266,"description":33005},"docs/components/CursorTrail","wUUBquiR90VnfJRcmSsJKwtWkuTdT_kDTHSJz6U1CeI",{"id":33251,"title":33252,"body":33253,"category":27972,"componentType":21056,"description":33260,"extension":1323,"meta":33445,"navigation":119,"path":33446,"requiresChild":27975,"seo":33447,"stem":33448,"__hash__":33449},"components/docs/components/DiamondGradient.md","DiamondGradient",{"type":8,"value":33254,"toc":33441},[33255,33258,33261,33263,33265,33268,33270,33439],[11,33256,33252],{"id":33257},"diamondgradient",[15,33259,33260],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[27113,33262],{"component":33252},[1202,33264,27117],{"id":21717},[27119,33266],{":props":33267},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#4ffb4a\",\"description\":\"Color at the center of the diamond\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#4f1238\",\"description\":\"Color at the outer edges of the diamond\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the diamond\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Extent of the gradient — controls how far Color A reaches before transitioning to Color B\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees — tilts the diamond into a rhombus\"},{\"name\":\"repeat\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands.\"},{\"name\":\"roundness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Morphs from a sharp diamond (0) to a square (1)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"}]",[1202,33269,27125],{"id":27124},[23,33271,33272,33301,33329,33357,33385],{":tabs":25},[27,33273,33275],{"className":29,"code":33274,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[34,33276,33277,33285,33293],{"__ignoreMap":32},[37,33278,33279,33281,33283],{"class":39,"line":40},[37,33280,44],{"class":43},[37,33282,48],{"class":47},[37,33284,62],{"class":43},[37,33286,33287,33289,33291],{"class":39,"line":65},[37,33288,75],{"class":43},[37,33290,33252],{"class":47},[37,33292,113],{"class":43},[37,33294,33295,33297,33299],{"class":39,"line":72},[37,33296,273],{"class":43},[37,33298,48],{"class":47},[37,33300,62],{"class":43},[27,33302,33303],{"className":280,"code":33274,"language":282,"meta":32,"style":32},[34,33304,33305,33313,33321],{"__ignoreMap":32},[37,33306,33307,33309,33311],{"class":39,"line":40},[37,33308,44],{"class":43},[37,33310,48],{"class":291},[37,33312,62],{"class":43},[37,33314,33315,33317,33319],{"class":39,"line":65},[37,33316,75],{"class":43},[37,33318,33252],{"class":291},[37,33320,113],{"class":43},[37,33322,33323,33325,33327],{"class":39,"line":72},[37,33324,273],{"class":43},[37,33326,48],{"class":291},[37,33328,62],{"class":43},[27,33330,33331],{"className":3580,"code":33274,"language":3582,"meta":32,"style":32},[34,33332,33333,33341,33349],{"__ignoreMap":32},[37,33334,33335,33337,33339],{"class":39,"line":40},[37,33336,44],{"class":43},[37,33338,48],{"class":291},[37,33340,62],{"class":43},[37,33342,33343,33345,33347],{"class":39,"line":65},[37,33344,75],{"class":43},[37,33346,33252],{"class":291},[37,33348,113],{"class":43},[37,33350,33351,33353,33355],{"class":39,"line":72},[37,33352,273],{"class":43},[37,33354,48],{"class":291},[37,33356,62],{"class":43},[27,33358,33359],{"className":543,"code":33274,"language":545,"meta":32,"style":32},[34,33360,33361,33369,33377],{"__ignoreMap":32},[37,33362,33363,33365,33367],{"class":39,"line":40},[37,33364,44],{"class":43},[37,33366,48],{"class":291},[37,33368,62],{"class":43},[37,33370,33371,33373,33375],{"class":39,"line":65},[37,33372,75],{"class":43},[37,33374,33252],{"class":291},[37,33376,113],{"class":43},[37,33378,33379,33381,33383],{"class":39,"line":72},[37,33380,273],{"class":43},[37,33382,48],{"class":291},[37,33384,62],{"class":43},[27,33386,33388],{"className":987,"code":33387,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiamondGradient', props: {} }\n ]\n})\n",[34,33389,33390,33400,33404,33418,33422,33431,33435],{"__ignoreMap":32},[37,33391,33392,33394,33396,33398],{"class":39,"line":40},[37,33393,1382],{"class":297},[37,33395,9444],{"class":43},[37,33397,1388],{"class":297},[37,33399,9449],{"class":58},[37,33401,33402],{"class":39,"line":65},[37,33403,120],{"emptyLinePlaceholder":119},[37,33405,33406,33408,33410,33412,33414,33416],{"class":39,"line":72},[37,33407,2809],{"class":297},[37,33409,2812],{"class":291},[37,33411,2815],{"class":297},[37,33413,2818],{"class":297},[37,33415,999],{"class":51},[37,33417,1002],{"class":43},[37,33419,33420],{"class":39,"line":116},[37,33421,1007],{"class":43},[37,33423,33424,33426,33429],{"class":39,"line":123},[37,33425,1017],{"class":43},[37,33427,33428],{"class":58},"'DiamondGradient'",[37,33430,3207],{"class":43},[37,33432,33433],{"class":39,"line":129},[37,33434,1194],{"class":43},[37,33436,33437],{"class":39,"line":171},[37,33438,1200],{"class":43},[1311,33440,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":33442},[33443,33444],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/diamondgradient",{"title":33252,"description":33260},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":33451,"title":33452,"body":33453,"category":27437,"componentType":21062,"description":33460,"extension":1323,"meta":33778,"navigation":119,"path":33779,"requiresChild":119,"seo":33780,"stem":33781,"__hash__":33782},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":33454,"toc":33774},[33455,33458,33461,33463,33465,33468,33470,33772],[11,33456,33452],{"id":33457},"diffuseblur",[15,33459,33460],{},"Grain-like pixel displacement at random",[27113,33462],{"component":33452},[1202,33464,27117],{"id":21717},[27119,33466],{":props":33467},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Intensity of the diffuse blur effect\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,33469,27125],{"id":27124},[23,33471,33472,33529,33588,33644,33702],{":tabs":25},[27,33473,33475],{"className":29,"code":33474,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[34,33476,33477,33485,33492,33501,33505,33513,33521],{"__ignoreMap":32},[37,33478,33479,33481,33483],{"class":39,"line":40},[37,33480,44],{"class":43},[37,33482,48],{"class":47},[37,33484,62],{"class":43},[37,33486,33487,33489],{"class":39,"line":65},[37,33488,75],{"class":43},[37,33490,33491],{"class":47},"DiffuseBlur\n",[37,33493,33494,33496,33498],{"class":39,"line":72},[37,33495,18081],{"class":51},[37,33497,55],{"class":43},[37,33499,33500],{"class":58},"\"30\"\n",[37,33502,33503],{"class":39,"line":116},[37,33504,27161],{"class":43},[37,33506,33507,33509,33511],{"class":39,"line":123},[37,33508,174],{"class":43},[37,33510,3293],{"class":47},[37,33512,113],{"class":43},[37,33514,33515,33517,33519],{"class":39,"line":129},[37,33516,224],{"class":43},[37,33518,33452],{"class":47},[37,33520,62],{"class":43},[37,33522,33523,33525,33527],{"class":39,"line":171},[37,33524,273],{"class":43},[37,33526,48],{"class":47},[37,33528,62],{"class":43},[27,33530,33532],{"className":280,"code":33531,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[34,33533,33534,33542,33548,33560,33564,33572,33580],{"__ignoreMap":32},[37,33535,33536,33538,33540],{"class":39,"line":40},[37,33537,44],{"class":43},[37,33539,48],{"class":291},[37,33541,62],{"class":43},[37,33543,33544,33546],{"class":39,"line":65},[37,33545,75],{"class":43},[37,33547,33491],{"class":291},[37,33549,33550,33552,33554,33556,33558],{"class":39,"line":72},[37,33551,18192],{"class":51},[37,33553,55],{"class":297},[37,33555,326],{"class":43},[37,33557,13407],{"class":291},[37,33559,312],{"class":43},[37,33561,33562],{"class":39,"line":116},[37,33563,27161],{"class":43},[37,33565,33566,33568,33570],{"class":39,"line":123},[37,33567,174],{"class":43},[37,33569,3293],{"class":291},[37,33571,113],{"class":43},[37,33573,33574,33576,33578],{"class":39,"line":129},[37,33575,224],{"class":43},[37,33577,33452],{"class":291},[37,33579,62],{"class":43},[37,33581,33582,33584,33586],{"class":39,"line":171},[37,33583,273],{"class":43},[37,33585,48],{"class":291},[37,33587,62],{"class":43},[27,33589,33590],{"className":3580,"code":33531,"language":3582,"meta":32,"style":32},[34,33591,33592,33600,33606,33616,33620,33628,33636],{"__ignoreMap":32},[37,33593,33594,33596,33598],{"class":39,"line":40},[37,33595,44],{"class":43},[37,33597,48],{"class":291},[37,33599,62],{"class":43},[37,33601,33602,33604],{"class":39,"line":65},[37,33603,75],{"class":43},[37,33605,33491],{"class":291},[37,33607,33608,33610,33612,33614],{"class":39,"line":72},[37,33609,18192],{"class":51},[37,33611,25058],{"class":43},[37,33613,13407],{"class":291},[37,33615,312],{"class":43},[37,33617,33618],{"class":39,"line":116},[37,33619,27161],{"class":43},[37,33621,33622,33624,33626],{"class":39,"line":123},[37,33623,174],{"class":43},[37,33625,3293],{"class":291},[37,33627,113],{"class":43},[37,33629,33630,33632,33634],{"class":39,"line":129},[37,33631,224],{"class":43},[37,33633,33452],{"class":291},[37,33635,62],{"class":43},[37,33637,33638,33640,33642],{"class":39,"line":171},[37,33639,273],{"class":43},[37,33641,48],{"class":291},[37,33643,62],{"class":43},[27,33645,33646],{"className":543,"code":33531,"language":545,"meta":32,"style":32},[34,33647,33648,33656,33662,33674,33678,33686,33694],{"__ignoreMap":32},[37,33649,33650,33652,33654],{"class":39,"line":40},[37,33651,44],{"class":43},[37,33653,48],{"class":291},[37,33655,62],{"class":43},[37,33657,33658,33660],{"class":39,"line":65},[37,33659,75],{"class":43},[37,33661,33491],{"class":291},[37,33663,33664,33666,33668,33670,33672],{"class":39,"line":72},[37,33665,18192],{"class":51},[37,33667,55],{"class":297},[37,33669,326],{"class":43},[37,33671,13407],{"class":291},[37,33673,312],{"class":43},[37,33675,33676],{"class":39,"line":116},[37,33677,27161],{"class":43},[37,33679,33680,33682,33684],{"class":39,"line":123},[37,33681,174],{"class":43},[37,33683,3293],{"class":291},[37,33685,113],{"class":43},[37,33687,33688,33690,33692],{"class":39,"line":129},[37,33689,224],{"class":43},[37,33691,33452],{"class":291},[37,33693,62],{"class":43},[37,33695,33696,33698,33700],{"class":39,"line":171},[37,33697,273],{"class":43},[37,33699,48],{"class":291},[37,33701,62],{"class":43},[27,33703,33705],{"className":987,"code":33704,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiffuseBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,33706,33707,33717,33721,33735,33739,33752,33760,33764,33768],{"__ignoreMap":32},[37,33708,33709,33711,33713,33715],{"class":39,"line":40},[37,33710,1382],{"class":297},[37,33712,9444],{"class":43},[37,33714,1388],{"class":297},[37,33716,9449],{"class":58},[37,33718,33719],{"class":39,"line":65},[37,33720,120],{"emptyLinePlaceholder":119},[37,33722,33723,33725,33727,33729,33731,33733],{"class":39,"line":72},[37,33724,2809],{"class":297},[37,33726,2812],{"class":291},[37,33728,2815],{"class":297},[37,33730,2818],{"class":297},[37,33732,999],{"class":51},[37,33734,1002],{"class":43},[37,33736,33737],{"class":39,"line":116},[37,33738,1007],{"class":43},[37,33740,33741,33743,33746,33748,33750],{"class":39,"line":123},[37,33742,1017],{"class":43},[37,33744,33745],{"class":58},"'DiffuseBlur'",[37,33747,27406],{"class":43},[37,33749,13407],{"class":291},[37,33751,5482],{"class":43},[37,33753,33754,33756,33758],{"class":39,"line":129},[37,33755,4949],{"class":43},[37,33757,3941],{"class":58},[37,33759,3207],{"class":43},[37,33761,33762],{"class":39,"line":171},[37,33763,4966],{"class":43},[37,33765,33766],{"class":39,"line":221},[37,33767,1194],{"class":43},[37,33769,33770],{"class":39,"line":231},[37,33771,1200],{"class":43},[1311,33773,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":33775},[33776,33777],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/diffuseblur",{"title":33452,"description":33460},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":33784,"title":134,"body":33785,"category":27715,"componentType":21062,"description":33792,"extension":1323,"meta":34052,"navigation":119,"path":34053,"requiresChild":119,"seo":34054,"stem":34055,"__hash__":34056},"components/docs/components/Dither.md",{"type":8,"value":33786,"toc":34048},[33787,33790,33793,33795,33797,33800,33802,34046],[11,33788,134],{"id":33789},"dither",[15,33791,33792],{},"Dithering effect with multiple pattern options",[27113,33794],{"component":134},[1202,33796,27117],{"id":21717},[27119,33798],{":props":33799},"[{\"name\":\"pattern\",\"type\":\"\\\"bayer2\\\" | \\\"bayer4\\\" | \\\"bayer8\\\" | \\\"clusteredDot\\\" | \\\"blueNoise\\\" | \\\"whiteNoise\\\"\",\"default\":\"bayer4\",\"description\":\"Dithering pattern algorithm\"},{\"name\":\"pixelSize\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Size of dithering pixels\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Luminance threshold for dithering\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much of the luminance range participates in dithering (lower = more solid areas)\"},{\"name\":\"colorMode\",\"type\":\"\\\"custom\\\" | \\\"source\\\"\",\"default\":\"custom\",\"description\":\"How colors are determined\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Dark color for dithering\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Light color for dithering\"}]",[1202,33801,27125],{"id":27124},[23,33803,33804,33849,33893,33937,33981],{":tabs":25},[27,33805,33807],{"className":29,"code":33806,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[34,33808,33809,33817,33825,33833,33841],{"__ignoreMap":32},[37,33810,33811,33813,33815],{"class":39,"line":40},[37,33812,44],{"class":43},[37,33814,48],{"class":47},[37,33816,62],{"class":43},[37,33818,33819,33821,33823],{"class":39,"line":65},[37,33820,75],{"class":43},[37,33822,134],{"class":47},[37,33824,62],{"class":43},[37,33826,33827,33829,33831],{"class":39,"line":72},[37,33828,174],{"class":43},[37,33830,3293],{"class":47},[37,33832,113],{"class":43},[37,33834,33835,33837,33839],{"class":39,"line":116},[37,33836,224],{"class":43},[37,33838,134],{"class":47},[37,33840,62],{"class":43},[37,33842,33843,33845,33847],{"class":39,"line":123},[37,33844,273],{"class":43},[37,33846,48],{"class":47},[37,33848,62],{"class":43},[27,33850,33851],{"className":280,"code":33806,"language":282,"meta":32,"style":32},[34,33852,33853,33861,33869,33877,33885],{"__ignoreMap":32},[37,33854,33855,33857,33859],{"class":39,"line":40},[37,33856,44],{"class":43},[37,33858,48],{"class":291},[37,33860,62],{"class":43},[37,33862,33863,33865,33867],{"class":39,"line":65},[37,33864,75],{"class":43},[37,33866,134],{"class":291},[37,33868,62],{"class":43},[37,33870,33871,33873,33875],{"class":39,"line":72},[37,33872,174],{"class":43},[37,33874,3293],{"class":291},[37,33876,113],{"class":43},[37,33878,33879,33881,33883],{"class":39,"line":116},[37,33880,224],{"class":43},[37,33882,134],{"class":291},[37,33884,62],{"class":43},[37,33886,33887,33889,33891],{"class":39,"line":123},[37,33888,273],{"class":43},[37,33890,48],{"class":291},[37,33892,62],{"class":43},[27,33894,33895],{"className":3580,"code":33806,"language":3582,"meta":32,"style":32},[34,33896,33897,33905,33913,33921,33929],{"__ignoreMap":32},[37,33898,33899,33901,33903],{"class":39,"line":40},[37,33900,44],{"class":43},[37,33902,48],{"class":291},[37,33904,62],{"class":43},[37,33906,33907,33909,33911],{"class":39,"line":65},[37,33908,75],{"class":43},[37,33910,134],{"class":291},[37,33912,62],{"class":43},[37,33914,33915,33917,33919],{"class":39,"line":72},[37,33916,174],{"class":43},[37,33918,3293],{"class":291},[37,33920,113],{"class":43},[37,33922,33923,33925,33927],{"class":39,"line":116},[37,33924,224],{"class":43},[37,33926,134],{"class":291},[37,33928,62],{"class":43},[37,33930,33931,33933,33935],{"class":39,"line":123},[37,33932,273],{"class":43},[37,33934,48],{"class":291},[37,33936,62],{"class":43},[27,33938,33939],{"className":543,"code":33806,"language":545,"meta":32,"style":32},[34,33940,33941,33949,33957,33965,33973],{"__ignoreMap":32},[37,33942,33943,33945,33947],{"class":39,"line":40},[37,33944,44],{"class":43},[37,33946,48],{"class":291},[37,33948,62],{"class":43},[37,33950,33951,33953,33955],{"class":39,"line":65},[37,33952,75],{"class":43},[37,33954,134],{"class":291},[37,33956,62],{"class":43},[37,33958,33959,33961,33963],{"class":39,"line":72},[37,33960,174],{"class":43},[37,33962,3293],{"class":291},[37,33964,113],{"class":43},[37,33966,33967,33969,33971],{"class":39,"line":116},[37,33968,224],{"class":43},[37,33970,134],{"class":291},[37,33972,62],{"class":43},[37,33974,33975,33977,33979],{"class":39,"line":123},[37,33976,273],{"class":43},[37,33978,48],{"class":291},[37,33980,62],{"class":43},[27,33982,33984],{"className":987,"code":33983,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Dither', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,33985,33986,33996,34000,34014,34018,34026,34034,34038,34042],{"__ignoreMap":32},[37,33987,33988,33990,33992,33994],{"class":39,"line":40},[37,33989,1382],{"class":297},[37,33991,9444],{"class":43},[37,33993,1388],{"class":297},[37,33995,9449],{"class":58},[37,33997,33998],{"class":39,"line":65},[37,33999,120],{"emptyLinePlaceholder":119},[37,34001,34002,34004,34006,34008,34010,34012],{"class":39,"line":72},[37,34003,2809],{"class":297},[37,34005,2812],{"class":291},[37,34007,2815],{"class":297},[37,34009,2818],{"class":297},[37,34011,999],{"class":51},[37,34013,1002],{"class":43},[37,34015,34016],{"class":39,"line":116},[37,34017,1007],{"class":43},[37,34019,34020,34022,34024],{"class":39,"line":123},[37,34021,1017],{"class":43},[37,34023,1068],{"class":58},[37,34025,4944],{"class":43},[37,34027,34028,34030,34032],{"class":39,"line":129},[37,34029,4949],{"class":43},[37,34031,3941],{"class":58},[37,34033,3207],{"class":43},[37,34035,34036],{"class":39,"line":171},[37,34037,4966],{"class":43},[37,34039,34040],{"class":39,"line":221},[37,34041,1194],{"class":43},[37,34043,34044],{"class":39,"line":231},[37,34045,1200],{"class":43},[1311,34047,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":34049},[34050,34051],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/dither",{"title":134,"description":33792},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":34058,"title":34059,"body":34060,"category":27972,"componentType":21056,"description":34067,"extension":1323,"meta":34295,"navigation":119,"path":34296,"requiresChild":27975,"seo":34297,"stem":34298,"__hash__":34299},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":34061,"toc":34291},[34062,34065,34068,34070,34072,34075,34077,34289],[11,34063,34059],{"id":34064},"dotgrid",[15,34066,34067],{},"Grid of dots with optional twinkling animation",[27113,34069],{"component":34059},[1202,34071,27117],{"id":21717},[27119,34073],{":props":34074},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the dot\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"30\",\"description\":\"The number of dots on the longest canvas edge\"},{\"name\":\"dotSize\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Intensity of the twinkle effect (0 = off, 1 = full twinkle)\"}]",[1202,34076,27125],{"id":27124},[23,34078,34079,34118,34156,34194,34232],{":tabs":25},[27,34080,34082],{"className":29,"code":34081,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[34,34083,34084,34092,34098,34106,34110],{"__ignoreMap":32},[37,34085,34086,34088,34090],{"class":39,"line":40},[37,34087,44],{"class":43},[37,34089,48],{"class":47},[37,34091,62],{"class":43},[37,34093,34094,34096],{"class":39,"line":65},[37,34095,75],{"class":43},[37,34097,17216],{"class":47},[37,34099,34100,34102,34104],{"class":39,"line":72},[37,34101,7570],{"class":51},[37,34103,55],{"class":43},[37,34105,7526],{"class":58},[37,34107,34108],{"class":39,"line":116},[37,34109,2314],{"class":43},[37,34111,34112,34114,34116],{"class":39,"line":123},[37,34113,273],{"class":43},[37,34115,48],{"class":47},[37,34117,62],{"class":43},[27,34119,34120],{"className":280,"code":34081,"language":282,"meta":32,"style":32},[34,34121,34122,34130,34136,34144,34148],{"__ignoreMap":32},[37,34123,34124,34126,34128],{"class":39,"line":40},[37,34125,44],{"class":43},[37,34127,48],{"class":291},[37,34129,62],{"class":43},[37,34131,34132,34134],{"class":39,"line":65},[37,34133,75],{"class":43},[37,34135,17216],{"class":291},[37,34137,34138,34140,34142],{"class":39,"line":72},[37,34139,7570],{"class":51},[37,34141,55],{"class":297},[37,34143,7526],{"class":58},[37,34145,34146],{"class":39,"line":116},[37,34147,2314],{"class":43},[37,34149,34150,34152,34154],{"class":39,"line":123},[37,34151,273],{"class":43},[37,34153,48],{"class":291},[37,34155,62],{"class":43},[27,34157,34158],{"className":3580,"code":34081,"language":3582,"meta":32,"style":32},[34,34159,34160,34168,34174,34182,34186],{"__ignoreMap":32},[37,34161,34162,34164,34166],{"class":39,"line":40},[37,34163,44],{"class":43},[37,34165,48],{"class":291},[37,34167,62],{"class":43},[37,34169,34170,34172],{"class":39,"line":65},[37,34171,75],{"class":43},[37,34173,17216],{"class":291},[37,34175,34176,34178,34180],{"class":39,"line":72},[37,34177,7570],{"class":51},[37,34179,55],{"class":43},[37,34181,7526],{"class":58},[37,34183,34184],{"class":39,"line":116},[37,34185,2314],{"class":43},[37,34187,34188,34190,34192],{"class":39,"line":123},[37,34189,273],{"class":43},[37,34191,48],{"class":291},[37,34193,62],{"class":43},[27,34195,34196],{"className":543,"code":34081,"language":545,"meta":32,"style":32},[34,34197,34198,34206,34212,34220,34224],{"__ignoreMap":32},[37,34199,34200,34202,34204],{"class":39,"line":40},[37,34201,44],{"class":43},[37,34203,48],{"class":291},[37,34205,62],{"class":43},[37,34207,34208,34210],{"class":39,"line":65},[37,34209,75],{"class":43},[37,34211,17216],{"class":291},[37,34213,34214,34216,34218],{"class":39,"line":72},[37,34215,7570],{"class":51},[37,34217,55],{"class":297},[37,34219,7526],{"class":58},[37,34221,34222],{"class":39,"line":116},[37,34223,2314],{"class":43},[37,34225,34226,34228,34230],{"class":39,"line":123},[37,34227,273],{"class":43},[37,34229,48],{"class":291},[37,34231,62],{"class":43},[27,34233,34235],{"className":987,"code":34234,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DotGrid', props: { color: '#ffffff' } }\n ]\n})\n",[34,34236,34237,34247,34251,34265,34269,34281,34285],{"__ignoreMap":32},[37,34238,34239,34241,34243,34245],{"class":39,"line":40},[37,34240,1382],{"class":297},[37,34242,9444],{"class":43},[37,34244,1388],{"class":297},[37,34246,9449],{"class":58},[37,34248,34249],{"class":39,"line":65},[37,34250,120],{"emptyLinePlaceholder":119},[37,34252,34253,34255,34257,34259,34261,34263],{"class":39,"line":72},[37,34254,2809],{"class":297},[37,34256,2812],{"class":291},[37,34258,2815],{"class":297},[37,34260,2818],{"class":297},[37,34262,999],{"class":51},[37,34264,1002],{"class":43},[37,34266,34267],{"class":39,"line":116},[37,34268,1007],{"class":43},[37,34270,34271,34273,34275,34277,34279],{"class":39,"line":123},[37,34272,1017],{"class":43},[37,34274,17766],{"class":58},[37,34276,2845],{"class":43},[37,34278,8101],{"class":58},[37,34280,1142],{"class":43},[37,34282,34283],{"class":39,"line":129},[37,34284,1194],{"class":43},[37,34286,34287],{"class":39,"line":171},[37,34288,1200],{"class":43},[1311,34290,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":34292},[34293,34294],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/dotgrid",{"title":34059,"description":34067},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":34301,"title":34302,"body":34303,"category":27715,"componentType":21062,"description":34310,"extension":1323,"meta":34664,"navigation":119,"path":34665,"requiresChild":119,"seo":34666,"stem":34667,"__hash__":34668},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":34304,"toc":34660},[34305,34308,34311,34313,34315,34318,34320,34658],[11,34306,34302],{"id":34307},"dropshadow",[15,34309,34310],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[27113,34312],{"component":34302},[1202,34314,27117],{"id":21717},[27119,34316],{":props":34317},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Shadow color\"},{\"name\":\"distance\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"How far the shadow is offset from the content\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"135\",\"description\":\"Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)\"},{\"name\":\"blur\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Shadow softness (blur radius in pixels)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Shadow intensity — how strong/visible the shadow is\"}]",[1202,34319,27125],{"id":27124},[23,34321,34322,34386,34453,34517,34583],{":tabs":25},[27,34323,34325],{"className":29,"code":34324,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/DropShadow>\n\u003C/Shader>\n",[34,34326,34327,34335,34342,34350,34358,34362,34370,34378],{"__ignoreMap":32},[37,34328,34329,34331,34333],{"class":39,"line":40},[37,34330,44],{"class":43},[37,34332,48],{"class":47},[37,34334,62],{"class":43},[37,34336,34337,34339],{"class":39,"line":65},[37,34338,75],{"class":43},[37,34340,34341],{"class":47},"DropShadow\n",[37,34343,34344,34346,34348],{"class":39,"line":72},[37,34345,7570],{"class":51},[37,34347,55],{"class":43},[37,34349,17187],{"class":58},[37,34351,34352,34354,34356],{"class":39,"line":116},[37,34353,18081],{"class":51},[37,34355,55],{"class":43},[37,34357,32674],{"class":58},[37,34359,34360],{"class":39,"line":123},[37,34361,27161],{"class":43},[37,34363,34364,34366,34368],{"class":39,"line":129},[37,34365,174],{"class":43},[37,34367,3293],{"class":47},[37,34369,113],{"class":43},[37,34371,34372,34374,34376],{"class":39,"line":171},[37,34373,224],{"class":43},[37,34375,34302],{"class":47},[37,34377,62],{"class":43},[37,34379,34380,34382,34384],{"class":39,"line":221},[37,34381,273],{"class":43},[37,34383,48],{"class":47},[37,34385,62],{"class":43},[27,34387,34389],{"className":280,"code":34388,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/DropShadow>\n\u003C/Shader>\n",[34,34390,34391,34399,34405,34413,34425,34429,34437,34445],{"__ignoreMap":32},[37,34392,34393,34395,34397],{"class":39,"line":40},[37,34394,44],{"class":43},[37,34396,48],{"class":291},[37,34398,62],{"class":43},[37,34400,34401,34403],{"class":39,"line":65},[37,34402,75],{"class":43},[37,34404,34341],{"class":291},[37,34406,34407,34409,34411],{"class":39,"line":72},[37,34408,7570],{"class":51},[37,34410,55],{"class":297},[37,34412,17187],{"class":58},[37,34414,34415,34417,34419,34421,34423],{"class":39,"line":116},[37,34416,18192],{"class":51},[37,34418,55],{"class":297},[37,34420,326],{"class":43},[37,34422,5689],{"class":291},[37,34424,312],{"class":43},[37,34426,34427],{"class":39,"line":123},[37,34428,27161],{"class":43},[37,34430,34431,34433,34435],{"class":39,"line":129},[37,34432,174],{"class":43},[37,34434,3293],{"class":291},[37,34436,113],{"class":43},[37,34438,34439,34441,34443],{"class":39,"line":171},[37,34440,224],{"class":43},[37,34442,34302],{"class":291},[37,34444,62],{"class":43},[37,34446,34447,34449,34451],{"class":39,"line":221},[37,34448,273],{"class":43},[37,34450,48],{"class":291},[37,34452,62],{"class":43},[27,34454,34455],{"className":3580,"code":34388,"language":3582,"meta":32,"style":32},[34,34456,34457,34465,34471,34479,34489,34493,34501,34509],{"__ignoreMap":32},[37,34458,34459,34461,34463],{"class":39,"line":40},[37,34460,44],{"class":43},[37,34462,48],{"class":291},[37,34464,62],{"class":43},[37,34466,34467,34469],{"class":39,"line":65},[37,34468,75],{"class":43},[37,34470,34341],{"class":291},[37,34472,34473,34475,34477],{"class":39,"line":72},[37,34474,7570],{"class":51},[37,34476,55],{"class":43},[37,34478,17187],{"class":58},[37,34480,34481,34483,34485,34487],{"class":39,"line":116},[37,34482,18192],{"class":51},[37,34484,25058],{"class":43},[37,34486,5689],{"class":291},[37,34488,312],{"class":43},[37,34490,34491],{"class":39,"line":123},[37,34492,27161],{"class":43},[37,34494,34495,34497,34499],{"class":39,"line":129},[37,34496,174],{"class":43},[37,34498,3293],{"class":291},[37,34500,113],{"class":43},[37,34502,34503,34505,34507],{"class":39,"line":171},[37,34504,224],{"class":43},[37,34506,34302],{"class":291},[37,34508,62],{"class":43},[37,34510,34511,34513,34515],{"class":39,"line":221},[37,34512,273],{"class":43},[37,34514,48],{"class":291},[37,34516,62],{"class":43},[27,34518,34519],{"className":543,"code":34388,"language":545,"meta":32,"style":32},[34,34520,34521,34529,34535,34543,34555,34559,34567,34575],{"__ignoreMap":32},[37,34522,34523,34525,34527],{"class":39,"line":40},[37,34524,44],{"class":43},[37,34526,48],{"class":291},[37,34528,62],{"class":43},[37,34530,34531,34533],{"class":39,"line":65},[37,34532,75],{"class":43},[37,34534,34341],{"class":291},[37,34536,34537,34539,34541],{"class":39,"line":72},[37,34538,7570],{"class":51},[37,34540,55],{"class":297},[37,34542,17187],{"class":58},[37,34544,34545,34547,34549,34551,34553],{"class":39,"line":116},[37,34546,18192],{"class":51},[37,34548,55],{"class":297},[37,34550,326],{"class":43},[37,34552,5689],{"class":291},[37,34554,312],{"class":43},[37,34556,34557],{"class":39,"line":123},[37,34558,27161],{"class":43},[37,34560,34561,34563,34565],{"class":39,"line":129},[37,34562,174],{"class":43},[37,34564,3293],{"class":291},[37,34566,113],{"class":43},[37,34568,34569,34571,34573],{"class":39,"line":171},[37,34570,224],{"class":43},[37,34572,34302],{"class":291},[37,34574,62],{"class":43},[37,34576,34577,34579,34581],{"class":39,"line":221},[37,34578,273],{"class":43},[37,34580,48],{"class":291},[37,34582,62],{"class":43},[27,34584,34586],{"className":987,"code":34585,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DropShadow', props: { color: '#000000', intensity: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,34587,34588,34598,34602,34616,34620,34638,34646,34650,34654],{"__ignoreMap":32},[37,34589,34590,34592,34594,34596],{"class":39,"line":40},[37,34591,1382],{"class":297},[37,34593,9444],{"class":43},[37,34595,1388],{"class":297},[37,34597,9449],{"class":58},[37,34599,34600],{"class":39,"line":65},[37,34601,120],{"emptyLinePlaceholder":119},[37,34603,34604,34606,34608,34610,34612,34614],{"class":39,"line":72},[37,34605,2809],{"class":297},[37,34607,2812],{"class":291},[37,34609,2815],{"class":297},[37,34611,2818],{"class":297},[37,34613,999],{"class":51},[37,34615,1002],{"class":43},[37,34617,34618],{"class":39,"line":116},[37,34619,1007],{"class":43},[37,34621,34622,34624,34627,34629,34631,34634,34636],{"class":39,"line":123},[37,34623,1017],{"class":43},[37,34625,34626],{"class":58},"'DropShadow'",[37,34628,2845],{"class":43},[37,34630,17745],{"class":58},[37,34632,34633],{"class":43},", intensity: ",[37,34635,5689],{"class":291},[37,34637,5482],{"class":43},[37,34639,34640,34642,34644],{"class":39,"line":129},[37,34641,4949],{"class":43},[37,34643,3941],{"class":58},[37,34645,3207],{"class":43},[37,34647,34648],{"class":39,"line":171},[37,34649,4966],{"class":43},[37,34651,34652],{"class":39,"line":221},[37,34653,1194],{"class":43},[37,34655,34656],{"class":39,"line":231},[37,34657,1200],{"class":43},[1311,34659,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":34661},[34662,34663],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/dropshadow",{"title":34302,"description":34310},"docs/components/DropShadow","4VP3z0G-gKKUME2WSmgmpD_UMoKtW_YCZIM7OBxPclc",{"id":34670,"title":34671,"body":34672,"category":28983,"componentType":21062,"description":34679,"extension":1323,"meta":34940,"navigation":119,"path":34941,"requiresChild":119,"seo":34942,"stem":34943,"__hash__":34944},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":34673,"toc":34936},[34674,34677,34680,34682,34684,34687,34689,34934],[11,34675,34671],{"id":34676},"duotone",[15,34678,34679],{},"Map colors to two tones based on luminance",[27113,34681],{"component":34671},[1202,34683,27117],{"id":21717},[27119,34685],{":props":34686},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"First color (used for darker areas)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#023af4\",\"description\":\"Second color (used for brighter areas)\"},{\"name\":\"blend\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Blend point between the two colors\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,34688,27125],{"id":27124},[23,34690,34691,34736,34780,34824,34868],{":tabs":25},[27,34692,34694],{"className":29,"code":34693,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[34,34695,34696,34704,34712,34720,34728],{"__ignoreMap":32},[37,34697,34698,34700,34702],{"class":39,"line":40},[37,34699,44],{"class":43},[37,34701,48],{"class":47},[37,34703,62],{"class":43},[37,34705,34706,34708,34710],{"class":39,"line":65},[37,34707,75],{"class":43},[37,34709,34671],{"class":47},[37,34711,62],{"class":43},[37,34713,34714,34716,34718],{"class":39,"line":72},[37,34715,174],{"class":43},[37,34717,3293],{"class":47},[37,34719,113],{"class":43},[37,34721,34722,34724,34726],{"class":39,"line":116},[37,34723,224],{"class":43},[37,34725,34671],{"class":47},[37,34727,62],{"class":43},[37,34729,34730,34732,34734],{"class":39,"line":123},[37,34731,273],{"class":43},[37,34733,48],{"class":47},[37,34735,62],{"class":43},[27,34737,34738],{"className":280,"code":34693,"language":282,"meta":32,"style":32},[34,34739,34740,34748,34756,34764,34772],{"__ignoreMap":32},[37,34741,34742,34744,34746],{"class":39,"line":40},[37,34743,44],{"class":43},[37,34745,48],{"class":291},[37,34747,62],{"class":43},[37,34749,34750,34752,34754],{"class":39,"line":65},[37,34751,75],{"class":43},[37,34753,34671],{"class":291},[37,34755,62],{"class":43},[37,34757,34758,34760,34762],{"class":39,"line":72},[37,34759,174],{"class":43},[37,34761,3293],{"class":291},[37,34763,113],{"class":43},[37,34765,34766,34768,34770],{"class":39,"line":116},[37,34767,224],{"class":43},[37,34769,34671],{"class":291},[37,34771,62],{"class":43},[37,34773,34774,34776,34778],{"class":39,"line":123},[37,34775,273],{"class":43},[37,34777,48],{"class":291},[37,34779,62],{"class":43},[27,34781,34782],{"className":3580,"code":34693,"language":3582,"meta":32,"style":32},[34,34783,34784,34792,34800,34808,34816],{"__ignoreMap":32},[37,34785,34786,34788,34790],{"class":39,"line":40},[37,34787,44],{"class":43},[37,34789,48],{"class":291},[37,34791,62],{"class":43},[37,34793,34794,34796,34798],{"class":39,"line":65},[37,34795,75],{"class":43},[37,34797,34671],{"class":291},[37,34799,62],{"class":43},[37,34801,34802,34804,34806],{"class":39,"line":72},[37,34803,174],{"class":43},[37,34805,3293],{"class":291},[37,34807,113],{"class":43},[37,34809,34810,34812,34814],{"class":39,"line":116},[37,34811,224],{"class":43},[37,34813,34671],{"class":291},[37,34815,62],{"class":43},[37,34817,34818,34820,34822],{"class":39,"line":123},[37,34819,273],{"class":43},[37,34821,48],{"class":291},[37,34823,62],{"class":43},[27,34825,34826],{"className":543,"code":34693,"language":545,"meta":32,"style":32},[34,34827,34828,34836,34844,34852,34860],{"__ignoreMap":32},[37,34829,34830,34832,34834],{"class":39,"line":40},[37,34831,44],{"class":43},[37,34833,48],{"class":291},[37,34835,62],{"class":43},[37,34837,34838,34840,34842],{"class":39,"line":65},[37,34839,75],{"class":43},[37,34841,34671],{"class":291},[37,34843,62],{"class":43},[37,34845,34846,34848,34850],{"class":39,"line":72},[37,34847,174],{"class":43},[37,34849,3293],{"class":291},[37,34851,113],{"class":43},[37,34853,34854,34856,34858],{"class":39,"line":116},[37,34855,224],{"class":43},[37,34857,34671],{"class":291},[37,34859,62],{"class":43},[37,34861,34862,34864,34866],{"class":39,"line":123},[37,34863,273],{"class":43},[37,34865,48],{"class":291},[37,34867,62],{"class":43},[27,34869,34871],{"className":987,"code":34870,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Duotone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,34872,34873,34883,34887,34901,34905,34914,34922,34926,34930],{"__ignoreMap":32},[37,34874,34875,34877,34879,34881],{"class":39,"line":40},[37,34876,1382],{"class":297},[37,34878,9444],{"class":43},[37,34880,1388],{"class":297},[37,34882,9449],{"class":58},[37,34884,34885],{"class":39,"line":65},[37,34886,120],{"emptyLinePlaceholder":119},[37,34888,34889,34891,34893,34895,34897,34899],{"class":39,"line":72},[37,34890,2809],{"class":297},[37,34892,2812],{"class":291},[37,34894,2815],{"class":297},[37,34896,2818],{"class":297},[37,34898,999],{"class":51},[37,34900,1002],{"class":43},[37,34902,34903],{"class":39,"line":116},[37,34904,1007],{"class":43},[37,34906,34907,34909,34912],{"class":39,"line":123},[37,34908,1017],{"class":43},[37,34910,34911],{"class":58},"'Duotone'",[37,34913,4944],{"class":43},[37,34915,34916,34918,34920],{"class":39,"line":129},[37,34917,4949],{"class":43},[37,34919,3941],{"class":58},[37,34921,3207],{"class":43},[37,34923,34924],{"class":39,"line":171},[37,34925,4966],{"class":43},[37,34927,34928],{"class":39,"line":221},[37,34929,1194],{"class":43},[37,34931,34932],{"class":39,"line":231},[37,34933,1200],{"class":43},[1311,34935,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":34937},[34938,34939],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/duotone",{"title":34671,"description":34679},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":34946,"title":34947,"body":34948,"category":30939,"componentType":21056,"description":34955,"extension":1323,"meta":35185,"navigation":119,"path":35186,"requiresChild":27975,"seo":35187,"stem":35188,"__hash__":35189},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":34949,"toc":35181},[34950,34953,34956,34958,34960,34963,34965,35179],[11,34951,34947],{"id":34952},"ellipse",[15,34954,34955],{},"Ellipse with independently adjustable horizontal and vertical radii",[27113,34957],{"component":34947},[1202,34959,27117],{"id":21717},[27119,34961],{":props":34962},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the ellipse\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the ellipse\"},{\"name\":\"radiusX\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Horizontal semi-axis radius\"},{\"name\":\"radiusY\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Vertical semi-axis radius\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,34964,27125],{"id":27124},[23,34966,34967,35007,35045,35083,35121],{":tabs":25},[27,34968,34970],{"className":29,"code":34969,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[34,34971,34972,34980,34987,34995,34999],{"__ignoreMap":32},[37,34973,34974,34976,34978],{"class":39,"line":40},[37,34975,44],{"class":43},[37,34977,48],{"class":47},[37,34979,62],{"class":43},[37,34981,34982,34984],{"class":39,"line":65},[37,34983,75],{"class":43},[37,34985,34986],{"class":47},"Ellipse\n",[37,34988,34989,34991,34993],{"class":39,"line":72},[37,34990,7570],{"class":51},[37,34992,55],{"class":43},[37,34994,7526],{"class":58},[37,34996,34997],{"class":39,"line":116},[37,34998,2314],{"class":43},[37,35000,35001,35003,35005],{"class":39,"line":123},[37,35002,273],{"class":43},[37,35004,48],{"class":47},[37,35006,62],{"class":43},[27,35008,35009],{"className":280,"code":34969,"language":282,"meta":32,"style":32},[34,35010,35011,35019,35025,35033,35037],{"__ignoreMap":32},[37,35012,35013,35015,35017],{"class":39,"line":40},[37,35014,44],{"class":43},[37,35016,48],{"class":291},[37,35018,62],{"class":43},[37,35020,35021,35023],{"class":39,"line":65},[37,35022,75],{"class":43},[37,35024,34986],{"class":291},[37,35026,35027,35029,35031],{"class":39,"line":72},[37,35028,7570],{"class":51},[37,35030,55],{"class":297},[37,35032,7526],{"class":58},[37,35034,35035],{"class":39,"line":116},[37,35036,2314],{"class":43},[37,35038,35039,35041,35043],{"class":39,"line":123},[37,35040,273],{"class":43},[37,35042,48],{"class":291},[37,35044,62],{"class":43},[27,35046,35047],{"className":3580,"code":34969,"language":3582,"meta":32,"style":32},[34,35048,35049,35057,35063,35071,35075],{"__ignoreMap":32},[37,35050,35051,35053,35055],{"class":39,"line":40},[37,35052,44],{"class":43},[37,35054,48],{"class":291},[37,35056,62],{"class":43},[37,35058,35059,35061],{"class":39,"line":65},[37,35060,75],{"class":43},[37,35062,34986],{"class":291},[37,35064,35065,35067,35069],{"class":39,"line":72},[37,35066,7570],{"class":51},[37,35068,55],{"class":43},[37,35070,7526],{"class":58},[37,35072,35073],{"class":39,"line":116},[37,35074,2314],{"class":43},[37,35076,35077,35079,35081],{"class":39,"line":123},[37,35078,273],{"class":43},[37,35080,48],{"class":291},[37,35082,62],{"class":43},[27,35084,35085],{"className":543,"code":34969,"language":545,"meta":32,"style":32},[34,35086,35087,35095,35101,35109,35113],{"__ignoreMap":32},[37,35088,35089,35091,35093],{"class":39,"line":40},[37,35090,44],{"class":43},[37,35092,48],{"class":291},[37,35094,62],{"class":43},[37,35096,35097,35099],{"class":39,"line":65},[37,35098,75],{"class":43},[37,35100,34986],{"class":291},[37,35102,35103,35105,35107],{"class":39,"line":72},[37,35104,7570],{"class":51},[37,35106,55],{"class":297},[37,35108,7526],{"class":58},[37,35110,35111],{"class":39,"line":116},[37,35112,2314],{"class":43},[37,35114,35115,35117,35119],{"class":39,"line":123},[37,35116,273],{"class":43},[37,35118,48],{"class":291},[37,35120,62],{"class":43},[27,35122,35124],{"className":987,"code":35123,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ellipse', props: { color: '#ffffff' } }\n ]\n})\n",[34,35125,35126,35136,35140,35154,35158,35171,35175],{"__ignoreMap":32},[37,35127,35128,35130,35132,35134],{"class":39,"line":40},[37,35129,1382],{"class":297},[37,35131,9444],{"class":43},[37,35133,1388],{"class":297},[37,35135,9449],{"class":58},[37,35137,35138],{"class":39,"line":65},[37,35139,120],{"emptyLinePlaceholder":119},[37,35141,35142,35144,35146,35148,35150,35152],{"class":39,"line":72},[37,35143,2809],{"class":297},[37,35145,2812],{"class":291},[37,35147,2815],{"class":297},[37,35149,2818],{"class":297},[37,35151,999],{"class":51},[37,35153,1002],{"class":43},[37,35155,35156],{"class":39,"line":116},[37,35157,1007],{"class":43},[37,35159,35160,35162,35165,35167,35169],{"class":39,"line":123},[37,35161,1017],{"class":43},[37,35163,35164],{"class":58},"'Ellipse'",[37,35166,2845],{"class":43},[37,35168,8101],{"class":58},[37,35170,1142],{"class":43},[37,35172,35173],{"class":39,"line":129},[37,35174,1194],{"class":43},[37,35176,35177],{"class":39,"line":171},[37,35178,1200],{"class":43},[1311,35180,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":35182},[35183,35184],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/ellipse",{"title":34947,"description":34955},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":35191,"title":18692,"body":35192,"category":32610,"componentType":21062,"description":35199,"extension":1323,"meta":35459,"navigation":119,"path":35460,"requiresChild":119,"seo":35461,"stem":35462,"__hash__":35463},"components/docs/components/Emboss.md",{"type":8,"value":35193,"toc":35455},[35194,35197,35200,35202,35204,35207,35209,35453],[11,35195,18692],{"id":35196},"emboss",[15,35198,35199],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[27113,35201],{"component":18692},[1202,35203,27117],{"id":21717},[27119,35205],{":props":35206},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the embossed shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the embossed shape (1 = default size)\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"-0.5\",\"description\":\"Relief depth — negative = inset (debossed), positive = raised (embossed)\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"260\",\"description\":\"Directional light angle in degrees — controls highlight and shadow direction\"},{\"name\":\"lightIntensity\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Strength of the directional edge highlights and shadows\"},{\"name\":\"shadowIntensity\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Darkness of the relief shadow\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](/docs/guide/shape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](/docs/guide/shape-effects) for how to generate an SDF from an SVG.\"}]",[1202,35208,27125],{"id":27124},[23,35210,35211,35256,35300,35344,35388],{":tabs":25},[27,35212,35214],{"className":29,"code":35213,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[34,35215,35216,35224,35232,35240,35248],{"__ignoreMap":32},[37,35217,35218,35220,35222],{"class":39,"line":40},[37,35219,44],{"class":43},[37,35221,48],{"class":47},[37,35223,62],{"class":43},[37,35225,35226,35228,35230],{"class":39,"line":65},[37,35227,75],{"class":43},[37,35229,18692],{"class":47},[37,35231,62],{"class":43},[37,35233,35234,35236,35238],{"class":39,"line":72},[37,35235,174],{"class":43},[37,35237,3293],{"class":47},[37,35239,113],{"class":43},[37,35241,35242,35244,35246],{"class":39,"line":116},[37,35243,224],{"class":43},[37,35245,18692],{"class":47},[37,35247,62],{"class":43},[37,35249,35250,35252,35254],{"class":39,"line":123},[37,35251,273],{"class":43},[37,35253,48],{"class":47},[37,35255,62],{"class":43},[27,35257,35258],{"className":280,"code":35213,"language":282,"meta":32,"style":32},[34,35259,35260,35268,35276,35284,35292],{"__ignoreMap":32},[37,35261,35262,35264,35266],{"class":39,"line":40},[37,35263,44],{"class":43},[37,35265,48],{"class":291},[37,35267,62],{"class":43},[37,35269,35270,35272,35274],{"class":39,"line":65},[37,35271,75],{"class":43},[37,35273,18692],{"class":291},[37,35275,62],{"class":43},[37,35277,35278,35280,35282],{"class":39,"line":72},[37,35279,174],{"class":43},[37,35281,3293],{"class":291},[37,35283,113],{"class":43},[37,35285,35286,35288,35290],{"class":39,"line":116},[37,35287,224],{"class":43},[37,35289,18692],{"class":291},[37,35291,62],{"class":43},[37,35293,35294,35296,35298],{"class":39,"line":123},[37,35295,273],{"class":43},[37,35297,48],{"class":291},[37,35299,62],{"class":43},[27,35301,35302],{"className":3580,"code":35213,"language":3582,"meta":32,"style":32},[34,35303,35304,35312,35320,35328,35336],{"__ignoreMap":32},[37,35305,35306,35308,35310],{"class":39,"line":40},[37,35307,44],{"class":43},[37,35309,48],{"class":291},[37,35311,62],{"class":43},[37,35313,35314,35316,35318],{"class":39,"line":65},[37,35315,75],{"class":43},[37,35317,18692],{"class":291},[37,35319,62],{"class":43},[37,35321,35322,35324,35326],{"class":39,"line":72},[37,35323,174],{"class":43},[37,35325,3293],{"class":291},[37,35327,113],{"class":43},[37,35329,35330,35332,35334],{"class":39,"line":116},[37,35331,224],{"class":43},[37,35333,18692],{"class":291},[37,35335,62],{"class":43},[37,35337,35338,35340,35342],{"class":39,"line":123},[37,35339,273],{"class":43},[37,35341,48],{"class":291},[37,35343,62],{"class":43},[27,35345,35346],{"className":543,"code":35213,"language":545,"meta":32,"style":32},[34,35347,35348,35356,35364,35372,35380],{"__ignoreMap":32},[37,35349,35350,35352,35354],{"class":39,"line":40},[37,35351,44],{"class":43},[37,35353,48],{"class":291},[37,35355,62],{"class":43},[37,35357,35358,35360,35362],{"class":39,"line":65},[37,35359,75],{"class":43},[37,35361,18692],{"class":291},[37,35363,62],{"class":43},[37,35365,35366,35368,35370],{"class":39,"line":72},[37,35367,174],{"class":43},[37,35369,3293],{"class":291},[37,35371,113],{"class":43},[37,35373,35374,35376,35378],{"class":39,"line":116},[37,35375,224],{"class":43},[37,35377,18692],{"class":291},[37,35379,62],{"class":43},[37,35381,35382,35384,35386],{"class":39,"line":123},[37,35383,273],{"class":43},[37,35385,48],{"class":291},[37,35387,62],{"class":43},[27,35389,35391],{"className":987,"code":35390,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Emboss', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,35392,35393,35403,35407,35421,35425,35433,35441,35445,35449],{"__ignoreMap":32},[37,35394,35395,35397,35399,35401],{"class":39,"line":40},[37,35396,1382],{"class":297},[37,35398,9444],{"class":43},[37,35400,1388],{"class":297},[37,35402,9449],{"class":58},[37,35404,35405],{"class":39,"line":65},[37,35406,120],{"emptyLinePlaceholder":119},[37,35408,35409,35411,35413,35415,35417,35419],{"class":39,"line":72},[37,35410,2809],{"class":297},[37,35412,2812],{"class":291},[37,35414,2815],{"class":297},[37,35416,2818],{"class":297},[37,35418,999],{"class":51},[37,35420,1002],{"class":43},[37,35422,35423],{"class":39,"line":116},[37,35424,1007],{"class":43},[37,35426,35427,35429,35431],{"class":39,"line":123},[37,35428,1017],{"class":43},[37,35430,19340],{"class":58},[37,35432,4944],{"class":43},[37,35434,35435,35437,35439],{"class":39,"line":129},[37,35436,4949],{"class":43},[37,35438,3941],{"class":58},[37,35440,3207],{"class":43},[37,35442,35443],{"class":39,"line":171},[37,35444,4966],{"class":43},[37,35446,35447],{"class":39,"line":221},[37,35448,1194],{"class":43},[37,35450,35451],{"class":39,"line":231},[37,35452,1200],{"class":43},[1311,35454,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":35456},[35457,35458],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/emboss",{"title":18692,"description":35199},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":35465,"title":35466,"body":35467,"category":27972,"componentType":21056,"description":35474,"extension":1323,"meta":35659,"navigation":119,"path":35660,"requiresChild":27975,"seo":35661,"stem":35662,"__hash__":35663},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":35468,"toc":35655},[35469,35472,35475,35477,35479,35482,35484,35653],[11,35470,35466],{"id":35471},"fallinglines",[15,35473,35474],{},"Directional falling lines with a leading-to-trailing color fade",[27113,35476],{"component":35466},[1202,35478,27117],{"id":21717},[27119,35480],{":props":35481},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color at the leading edge of each line\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff00\",\"description\":\"Color at the trailing edge (transparent by default)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation between lead and trail colors\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Direction of movement in degrees (90=down, 270=up, 0=right, 180=left)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Movement speed\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-line speed variance (0=uniform, 1=high variance)\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"15\",\"description\":\"Number of line columns across the canvas\"},{\"name\":\"trailLength\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Streak length relative to spacing (0=point, 1=continuous)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Color mix midpoint (0.5=linear, 0=all trailing/colorB, 1=all leading/colorA)\"},{\"name\":\"strokeWidth\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Line thickness as fraction of column width (0=hairline, 1=full width)\"},{\"name\":\"rounding\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Rounds the leading edge (0=flat/square, 1=fully rounded cap)\"}]",[1202,35483,27125],{"id":27124},[23,35485,35486,35515,35543,35571,35599],{":tabs":25},[27,35487,35489],{"className":29,"code":35488,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[34,35490,35491,35499,35507],{"__ignoreMap":32},[37,35492,35493,35495,35497],{"class":39,"line":40},[37,35494,44],{"class":43},[37,35496,48],{"class":47},[37,35498,62],{"class":43},[37,35500,35501,35503,35505],{"class":39,"line":65},[37,35502,75],{"class":43},[37,35504,35466],{"class":47},[37,35506,113],{"class":43},[37,35508,35509,35511,35513],{"class":39,"line":72},[37,35510,273],{"class":43},[37,35512,48],{"class":47},[37,35514,62],{"class":43},[27,35516,35517],{"className":280,"code":35488,"language":282,"meta":32,"style":32},[34,35518,35519,35527,35535],{"__ignoreMap":32},[37,35520,35521,35523,35525],{"class":39,"line":40},[37,35522,44],{"class":43},[37,35524,48],{"class":291},[37,35526,62],{"class":43},[37,35528,35529,35531,35533],{"class":39,"line":65},[37,35530,75],{"class":43},[37,35532,35466],{"class":291},[37,35534,113],{"class":43},[37,35536,35537,35539,35541],{"class":39,"line":72},[37,35538,273],{"class":43},[37,35540,48],{"class":291},[37,35542,62],{"class":43},[27,35544,35545],{"className":3580,"code":35488,"language":3582,"meta":32,"style":32},[34,35546,35547,35555,35563],{"__ignoreMap":32},[37,35548,35549,35551,35553],{"class":39,"line":40},[37,35550,44],{"class":43},[37,35552,48],{"class":291},[37,35554,62],{"class":43},[37,35556,35557,35559,35561],{"class":39,"line":65},[37,35558,75],{"class":43},[37,35560,35466],{"class":291},[37,35562,113],{"class":43},[37,35564,35565,35567,35569],{"class":39,"line":72},[37,35566,273],{"class":43},[37,35568,48],{"class":291},[37,35570,62],{"class":43},[27,35572,35573],{"className":543,"code":35488,"language":545,"meta":32,"style":32},[34,35574,35575,35583,35591],{"__ignoreMap":32},[37,35576,35577,35579,35581],{"class":39,"line":40},[37,35578,44],{"class":43},[37,35580,48],{"class":291},[37,35582,62],{"class":43},[37,35584,35585,35587,35589],{"class":39,"line":65},[37,35586,75],{"class":43},[37,35588,35466],{"class":291},[37,35590,113],{"class":43},[37,35592,35593,35595,35597],{"class":39,"line":72},[37,35594,273],{"class":43},[37,35596,48],{"class":291},[37,35598,62],{"class":43},[27,35600,35602],{"className":987,"code":35601,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FallingLines', props: {} }\n ]\n})\n",[34,35603,35604,35614,35618,35632,35636,35645,35649],{"__ignoreMap":32},[37,35605,35606,35608,35610,35612],{"class":39,"line":40},[37,35607,1382],{"class":297},[37,35609,9444],{"class":43},[37,35611,1388],{"class":297},[37,35613,9449],{"class":58},[37,35615,35616],{"class":39,"line":65},[37,35617,120],{"emptyLinePlaceholder":119},[37,35619,35620,35622,35624,35626,35628,35630],{"class":39,"line":72},[37,35621,2809],{"class":297},[37,35623,2812],{"class":291},[37,35625,2815],{"class":297},[37,35627,2818],{"class":297},[37,35629,999],{"class":51},[37,35631,1002],{"class":43},[37,35633,35634],{"class":39,"line":116},[37,35635,1007],{"class":43},[37,35637,35638,35640,35643],{"class":39,"line":123},[37,35639,1017],{"class":43},[37,35641,35642],{"class":58},"'FallingLines'",[37,35644,3207],{"class":43},[37,35646,35647],{"class":39,"line":129},[37,35648,1194],{"class":43},[37,35650,35651],{"class":39,"line":171},[37,35652,1200],{"class":43},[1311,35654,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":35656},[35657,35658],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/fallinglines",{"title":35466,"description":35474},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":35665,"title":35666,"body":35667,"category":27715,"componentType":21062,"description":35674,"extension":1323,"meta":35935,"navigation":119,"path":35936,"requiresChild":119,"seo":35937,"stem":35938,"__hash__":35939},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":35668,"toc":35931},[35669,35672,35675,35677,35679,35682,35684,35929],[11,35670,35666],{"id":35671},"filmgrain",[15,35673,35674],{},"Analog film grain texture overlay",[27113,35676],{"component":35666},[1202,35678,27117],{"id":21717},[27119,35680],{":props":35681},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"}]",[1202,35683,27125],{"id":27124},[23,35685,35686,35731,35775,35819,35863],{":tabs":25},[27,35687,35689],{"className":29,"code":35688,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[34,35690,35691,35699,35707,35715,35723],{"__ignoreMap":32},[37,35692,35693,35695,35697],{"class":39,"line":40},[37,35694,44],{"class":43},[37,35696,48],{"class":47},[37,35698,62],{"class":43},[37,35700,35701,35703,35705],{"class":39,"line":65},[37,35702,75],{"class":43},[37,35704,35666],{"class":47},[37,35706,62],{"class":43},[37,35708,35709,35711,35713],{"class":39,"line":72},[37,35710,174],{"class":43},[37,35712,3293],{"class":47},[37,35714,113],{"class":43},[37,35716,35717,35719,35721],{"class":39,"line":116},[37,35718,224],{"class":43},[37,35720,35666],{"class":47},[37,35722,62],{"class":43},[37,35724,35725,35727,35729],{"class":39,"line":123},[37,35726,273],{"class":43},[37,35728,48],{"class":47},[37,35730,62],{"class":43},[27,35732,35733],{"className":280,"code":35688,"language":282,"meta":32,"style":32},[34,35734,35735,35743,35751,35759,35767],{"__ignoreMap":32},[37,35736,35737,35739,35741],{"class":39,"line":40},[37,35738,44],{"class":43},[37,35740,48],{"class":291},[37,35742,62],{"class":43},[37,35744,35745,35747,35749],{"class":39,"line":65},[37,35746,75],{"class":43},[37,35748,35666],{"class":291},[37,35750,62],{"class":43},[37,35752,35753,35755,35757],{"class":39,"line":72},[37,35754,174],{"class":43},[37,35756,3293],{"class":291},[37,35758,113],{"class":43},[37,35760,35761,35763,35765],{"class":39,"line":116},[37,35762,224],{"class":43},[37,35764,35666],{"class":291},[37,35766,62],{"class":43},[37,35768,35769,35771,35773],{"class":39,"line":123},[37,35770,273],{"class":43},[37,35772,48],{"class":291},[37,35774,62],{"class":43},[27,35776,35777],{"className":3580,"code":35688,"language":3582,"meta":32,"style":32},[34,35778,35779,35787,35795,35803,35811],{"__ignoreMap":32},[37,35780,35781,35783,35785],{"class":39,"line":40},[37,35782,44],{"class":43},[37,35784,48],{"class":291},[37,35786,62],{"class":43},[37,35788,35789,35791,35793],{"class":39,"line":65},[37,35790,75],{"class":43},[37,35792,35666],{"class":291},[37,35794,62],{"class":43},[37,35796,35797,35799,35801],{"class":39,"line":72},[37,35798,174],{"class":43},[37,35800,3293],{"class":291},[37,35802,113],{"class":43},[37,35804,35805,35807,35809],{"class":39,"line":116},[37,35806,224],{"class":43},[37,35808,35666],{"class":291},[37,35810,62],{"class":43},[37,35812,35813,35815,35817],{"class":39,"line":123},[37,35814,273],{"class":43},[37,35816,48],{"class":291},[37,35818,62],{"class":43},[27,35820,35821],{"className":543,"code":35688,"language":545,"meta":32,"style":32},[34,35822,35823,35831,35839,35847,35855],{"__ignoreMap":32},[37,35824,35825,35827,35829],{"class":39,"line":40},[37,35826,44],{"class":43},[37,35828,48],{"class":291},[37,35830,62],{"class":43},[37,35832,35833,35835,35837],{"class":39,"line":65},[37,35834,75],{"class":43},[37,35836,35666],{"class":291},[37,35838,62],{"class":43},[37,35840,35841,35843,35845],{"class":39,"line":72},[37,35842,174],{"class":43},[37,35844,3293],{"class":291},[37,35846,113],{"class":43},[37,35848,35849,35851,35853],{"class":39,"line":116},[37,35850,224],{"class":43},[37,35852,35666],{"class":291},[37,35854,62],{"class":43},[37,35856,35857,35859,35861],{"class":39,"line":123},[37,35858,273],{"class":43},[37,35860,48],{"class":291},[37,35862,62],{"class":43},[27,35864,35866],{"className":987,"code":35865,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FilmGrain', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,35867,35868,35878,35882,35896,35900,35909,35917,35921,35925],{"__ignoreMap":32},[37,35869,35870,35872,35874,35876],{"class":39,"line":40},[37,35871,1382],{"class":297},[37,35873,9444],{"class":43},[37,35875,1388],{"class":297},[37,35877,9449],{"class":58},[37,35879,35880],{"class":39,"line":65},[37,35881,120],{"emptyLinePlaceholder":119},[37,35883,35884,35886,35888,35890,35892,35894],{"class":39,"line":72},[37,35885,2809],{"class":297},[37,35887,2812],{"class":291},[37,35889,2815],{"class":297},[37,35891,2818],{"class":297},[37,35893,999],{"class":51},[37,35895,1002],{"class":43},[37,35897,35898],{"class":39,"line":116},[37,35899,1007],{"class":43},[37,35901,35902,35904,35907],{"class":39,"line":123},[37,35903,1017],{"class":43},[37,35905,35906],{"class":58},"'FilmGrain'",[37,35908,4944],{"class":43},[37,35910,35911,35913,35915],{"class":39,"line":129},[37,35912,4949],{"class":43},[37,35914,3941],{"class":58},[37,35916,3207],{"class":43},[37,35918,35919],{"class":39,"line":171},[37,35920,4966],{"class":43},[37,35922,35923],{"class":39,"line":221},[37,35924,1194],{"class":43},[37,35926,35927],{"class":39,"line":231},[37,35928,1200],{"class":43},[1311,35930,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":35932},[35933,35934],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/filmgrain",{"title":35666,"description":35674},"docs/components/FilmGrain","oDbJl1STzhPHE6Df_wrMx0Zjj08jAQ3NPWF6sPUQzvw",{"id":35941,"title":35942,"body":35943,"category":27972,"componentType":21056,"description":35950,"extension":1323,"meta":36135,"navigation":119,"path":36136,"requiresChild":27975,"seo":36137,"stem":36138,"__hash__":36139},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":35944,"toc":36131},[35945,35948,35951,35953,35955,35958,35960,36129],[11,35946,35942],{"id":35947},"floatingparticles",[15,35949,35950],{},"Animated floating particles with twinkle effects",[27113,35952],{"component":35942},[1202,35954,27117],{"id":21717},[27119,35956],{":props":35957},"[{\"name\":\"randomness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Randomness of particle animation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Speed of particle movement\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Movement angle in degrees (0=right, 90=down, 180=left, 270=up)\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Size of particles\"},{\"name\":\"particleSoftness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness of particles (0 = sharp, 1 = very soft)\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the twinkle effect (0 = off, 1 = full twinkle)\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of particle layers\"},{\"name\":\"particleColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the particles\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-layer speed variance (0 = all layers same speed, 1 = high variance)\"},{\"name\":\"angleVariance\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Per-layer angle variance in degrees (0 = all layers same angle, 180 = full variance)\"},{\"name\":\"particleDensity\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Particle density (lower = more spread out, higher = more dense)\"}]",[1202,35959,27125],{"id":27124},[23,35961,35962,35991,36019,36047,36075],{":tabs":25},[27,35963,35965],{"className":29,"code":35964,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[34,35966,35967,35975,35983],{"__ignoreMap":32},[37,35968,35969,35971,35973],{"class":39,"line":40},[37,35970,44],{"class":43},[37,35972,48],{"class":47},[37,35974,62],{"class":43},[37,35976,35977,35979,35981],{"class":39,"line":65},[37,35978,75],{"class":43},[37,35980,35942],{"class":47},[37,35982,113],{"class":43},[37,35984,35985,35987,35989],{"class":39,"line":72},[37,35986,273],{"class":43},[37,35988,48],{"class":47},[37,35990,62],{"class":43},[27,35992,35993],{"className":280,"code":35964,"language":282,"meta":32,"style":32},[34,35994,35995,36003,36011],{"__ignoreMap":32},[37,35996,35997,35999,36001],{"class":39,"line":40},[37,35998,44],{"class":43},[37,36000,48],{"class":291},[37,36002,62],{"class":43},[37,36004,36005,36007,36009],{"class":39,"line":65},[37,36006,75],{"class":43},[37,36008,35942],{"class":291},[37,36010,113],{"class":43},[37,36012,36013,36015,36017],{"class":39,"line":72},[37,36014,273],{"class":43},[37,36016,48],{"class":291},[37,36018,62],{"class":43},[27,36020,36021],{"className":3580,"code":35964,"language":3582,"meta":32,"style":32},[34,36022,36023,36031,36039],{"__ignoreMap":32},[37,36024,36025,36027,36029],{"class":39,"line":40},[37,36026,44],{"class":43},[37,36028,48],{"class":291},[37,36030,62],{"class":43},[37,36032,36033,36035,36037],{"class":39,"line":65},[37,36034,75],{"class":43},[37,36036,35942],{"class":291},[37,36038,113],{"class":43},[37,36040,36041,36043,36045],{"class":39,"line":72},[37,36042,273],{"class":43},[37,36044,48],{"class":291},[37,36046,62],{"class":43},[27,36048,36049],{"className":543,"code":35964,"language":545,"meta":32,"style":32},[34,36050,36051,36059,36067],{"__ignoreMap":32},[37,36052,36053,36055,36057],{"class":39,"line":40},[37,36054,44],{"class":43},[37,36056,48],{"class":291},[37,36058,62],{"class":43},[37,36060,36061,36063,36065],{"class":39,"line":65},[37,36062,75],{"class":43},[37,36064,35942],{"class":291},[37,36066,113],{"class":43},[37,36068,36069,36071,36073],{"class":39,"line":72},[37,36070,273],{"class":43},[37,36072,48],{"class":291},[37,36074,62],{"class":43},[27,36076,36078],{"className":987,"code":36077,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FloatingParticles', props: {} }\n ]\n})\n",[34,36079,36080,36090,36094,36108,36112,36121,36125],{"__ignoreMap":32},[37,36081,36082,36084,36086,36088],{"class":39,"line":40},[37,36083,1382],{"class":297},[37,36085,9444],{"class":43},[37,36087,1388],{"class":297},[37,36089,9449],{"class":58},[37,36091,36092],{"class":39,"line":65},[37,36093,120],{"emptyLinePlaceholder":119},[37,36095,36096,36098,36100,36102,36104,36106],{"class":39,"line":72},[37,36097,2809],{"class":297},[37,36099,2812],{"class":291},[37,36101,2815],{"class":297},[37,36103,2818],{"class":297},[37,36105,999],{"class":51},[37,36107,1002],{"class":43},[37,36109,36110],{"class":39,"line":116},[37,36111,1007],{"class":43},[37,36113,36114,36116,36119],{"class":39,"line":123},[37,36115,1017],{"class":43},[37,36117,36118],{"class":58},"'FloatingParticles'",[37,36120,3207],{"class":43},[37,36122,36123],{"class":39,"line":129},[37,36124,1194],{"class":43},[37,36126,36127],{"class":39,"line":171},[37,36128,1200],{"class":43},[1311,36130,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":36132},[36133,36134],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/floatingparticles",{"title":35942,"description":35950},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":36141,"title":36142,"body":36143,"category":29317,"componentType":21062,"description":36150,"extension":1323,"meta":36411,"navigation":119,"path":36412,"requiresChild":119,"seo":36413,"stem":36414,"__hash__":36415},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":36144,"toc":36407},[36145,36148,36151,36153,36155,36158,36160,36405],[11,36146,36142],{"id":36147},"flowfield",[15,36149,36150],{},"Fluid-like distortion with constant smooth motion",[27113,36152],{"component":36142},[1202,36154,27117],{"id":21717},[27119,36156],{":props":36157},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Intensity of the flow distortion\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Scale of the flow patterns\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Speed of the flow\"},{\"name\":\"evolutionSpeed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How fast the flow field pattern reshapes over time\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,36159,27125],{"id":27124},[23,36161,36162,36207,36251,36295,36339],{":tabs":25},[27,36163,36165],{"className":29,"code":36164,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[34,36166,36167,36175,36183,36191,36199],{"__ignoreMap":32},[37,36168,36169,36171,36173],{"class":39,"line":40},[37,36170,44],{"class":43},[37,36172,48],{"class":47},[37,36174,62],{"class":43},[37,36176,36177,36179,36181],{"class":39,"line":65},[37,36178,75],{"class":43},[37,36180,36142],{"class":47},[37,36182,62],{"class":43},[37,36184,36185,36187,36189],{"class":39,"line":72},[37,36186,174],{"class":43},[37,36188,3293],{"class":47},[37,36190,113],{"class":43},[37,36192,36193,36195,36197],{"class":39,"line":116},[37,36194,224],{"class":43},[37,36196,36142],{"class":47},[37,36198,62],{"class":43},[37,36200,36201,36203,36205],{"class":39,"line":123},[37,36202,273],{"class":43},[37,36204,48],{"class":47},[37,36206,62],{"class":43},[27,36208,36209],{"className":280,"code":36164,"language":282,"meta":32,"style":32},[34,36210,36211,36219,36227,36235,36243],{"__ignoreMap":32},[37,36212,36213,36215,36217],{"class":39,"line":40},[37,36214,44],{"class":43},[37,36216,48],{"class":291},[37,36218,62],{"class":43},[37,36220,36221,36223,36225],{"class":39,"line":65},[37,36222,75],{"class":43},[37,36224,36142],{"class":291},[37,36226,62],{"class":43},[37,36228,36229,36231,36233],{"class":39,"line":72},[37,36230,174],{"class":43},[37,36232,3293],{"class":291},[37,36234,113],{"class":43},[37,36236,36237,36239,36241],{"class":39,"line":116},[37,36238,224],{"class":43},[37,36240,36142],{"class":291},[37,36242,62],{"class":43},[37,36244,36245,36247,36249],{"class":39,"line":123},[37,36246,273],{"class":43},[37,36248,48],{"class":291},[37,36250,62],{"class":43},[27,36252,36253],{"className":3580,"code":36164,"language":3582,"meta":32,"style":32},[34,36254,36255,36263,36271,36279,36287],{"__ignoreMap":32},[37,36256,36257,36259,36261],{"class":39,"line":40},[37,36258,44],{"class":43},[37,36260,48],{"class":291},[37,36262,62],{"class":43},[37,36264,36265,36267,36269],{"class":39,"line":65},[37,36266,75],{"class":43},[37,36268,36142],{"class":291},[37,36270,62],{"class":43},[37,36272,36273,36275,36277],{"class":39,"line":72},[37,36274,174],{"class":43},[37,36276,3293],{"class":291},[37,36278,113],{"class":43},[37,36280,36281,36283,36285],{"class":39,"line":116},[37,36282,224],{"class":43},[37,36284,36142],{"class":291},[37,36286,62],{"class":43},[37,36288,36289,36291,36293],{"class":39,"line":123},[37,36290,273],{"class":43},[37,36292,48],{"class":291},[37,36294,62],{"class":43},[27,36296,36297],{"className":543,"code":36164,"language":545,"meta":32,"style":32},[34,36298,36299,36307,36315,36323,36331],{"__ignoreMap":32},[37,36300,36301,36303,36305],{"class":39,"line":40},[37,36302,44],{"class":43},[37,36304,48],{"class":291},[37,36306,62],{"class":43},[37,36308,36309,36311,36313],{"class":39,"line":65},[37,36310,75],{"class":43},[37,36312,36142],{"class":291},[37,36314,62],{"class":43},[37,36316,36317,36319,36321],{"class":39,"line":72},[37,36318,174],{"class":43},[37,36320,3293],{"class":291},[37,36322,113],{"class":43},[37,36324,36325,36327,36329],{"class":39,"line":116},[37,36326,224],{"class":43},[37,36328,36142],{"class":291},[37,36330,62],{"class":43},[37,36332,36333,36335,36337],{"class":39,"line":123},[37,36334,273],{"class":43},[37,36336,48],{"class":291},[37,36338,62],{"class":43},[27,36340,36342],{"className":987,"code":36341,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowField', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,36343,36344,36354,36358,36372,36376,36385,36393,36397,36401],{"__ignoreMap":32},[37,36345,36346,36348,36350,36352],{"class":39,"line":40},[37,36347,1382],{"class":297},[37,36349,9444],{"class":43},[37,36351,1388],{"class":297},[37,36353,9449],{"class":58},[37,36355,36356],{"class":39,"line":65},[37,36357,120],{"emptyLinePlaceholder":119},[37,36359,36360,36362,36364,36366,36368,36370],{"class":39,"line":72},[37,36361,2809],{"class":297},[37,36363,2812],{"class":291},[37,36365,2815],{"class":297},[37,36367,2818],{"class":297},[37,36369,999],{"class":51},[37,36371,1002],{"class":43},[37,36373,36374],{"class":39,"line":116},[37,36375,1007],{"class":43},[37,36377,36378,36380,36383],{"class":39,"line":123},[37,36379,1017],{"class":43},[37,36381,36382],{"class":58},"'FlowField'",[37,36384,4944],{"class":43},[37,36386,36387,36389,36391],{"class":39,"line":129},[37,36388,4949],{"class":43},[37,36390,3941],{"class":58},[37,36392,3207],{"class":43},[37,36394,36395],{"class":39,"line":171},[37,36396,4966],{"class":43},[37,36398,36399],{"class":39,"line":221},[37,36400,1194],{"class":43},[37,36402,36403],{"class":39,"line":231},[37,36404,1200],{"class":43},[1311,36406,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":36408},[36409,36410],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/flowfield",{"title":36142,"description":36150},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":36417,"title":36418,"body":36419,"category":30939,"componentType":21056,"description":36426,"extension":1323,"meta":36704,"navigation":119,"path":36705,"requiresChild":27975,"seo":36706,"stem":36707,"__hash__":36708},"components/docs/components/Flower.md","Flower",{"type":8,"value":36420,"toc":36700},[36421,36424,36427,36429,36431,36434,36436,36698],[11,36422,36418],{"id":36423},"flower",[15,36425,36426],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[27113,36428],{"component":36418},[1202,36430,27117],{"id":21717},[27119,36432],{":props":36433},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the flower\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the flower\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Outer petal tip radius in UV space\"},{\"name\":\"sides\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of petals\"},{\"name\":\"innerRatio\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Inner valley radius as a ratio of outer radius — lower values make deeper notches\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,36435,27125],{"id":27124},[23,36437,36438,36487,36538,36586,36636],{":tabs":25},[27,36439,36441],{"className":29,"code":36440,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[34,36442,36443,36451,36458,36466,36475,36479],{"__ignoreMap":32},[37,36444,36445,36447,36449],{"class":39,"line":40},[37,36446,44],{"class":43},[37,36448,48],{"class":47},[37,36450,62],{"class":43},[37,36452,36453,36455],{"class":39,"line":65},[37,36454,75],{"class":43},[37,36456,36457],{"class":47},"Flower\n",[37,36459,36460,36462,36464],{"class":39,"line":72},[37,36461,7570],{"class":51},[37,36463,55],{"class":43},[37,36465,7526],{"class":58},[37,36467,36468,36470,36472],{"class":39,"line":116},[37,36469,15113],{"class":51},[37,36471,55],{"class":43},[37,36473,36474],{"class":58},"\"0.4\"\n",[37,36476,36477],{"class":39,"line":123},[37,36478,2314],{"class":43},[37,36480,36481,36483,36485],{"class":39,"line":129},[37,36482,273],{"class":43},[37,36484,48],{"class":47},[37,36486,62],{"class":43},[27,36488,36490],{"className":280,"code":36489,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[34,36491,36492,36500,36506,36514,36526,36530],{"__ignoreMap":32},[37,36493,36494,36496,36498],{"class":39,"line":40},[37,36495,44],{"class":43},[37,36497,48],{"class":291},[37,36499,62],{"class":43},[37,36501,36502,36504],{"class":39,"line":65},[37,36503,75],{"class":43},[37,36505,36457],{"class":291},[37,36507,36508,36510,36512],{"class":39,"line":72},[37,36509,7570],{"class":51},[37,36511,55],{"class":297},[37,36513,7526],{"class":58},[37,36515,36516,36518,36520,36522,36524],{"class":39,"line":116},[37,36517,7580],{"class":51},[37,36519,55],{"class":297},[37,36521,326],{"class":43},[37,36523,6186],{"class":291},[37,36525,312],{"class":43},[37,36527,36528],{"class":39,"line":123},[37,36529,2314],{"class":43},[37,36531,36532,36534,36536],{"class":39,"line":129},[37,36533,273],{"class":43},[37,36535,48],{"class":291},[37,36537,62],{"class":43},[27,36539,36540],{"className":3580,"code":36489,"language":3582,"meta":32,"style":32},[34,36541,36542,36550,36556,36564,36574,36578],{"__ignoreMap":32},[37,36543,36544,36546,36548],{"class":39,"line":40},[37,36545,44],{"class":43},[37,36547,48],{"class":291},[37,36549,62],{"class":43},[37,36551,36552,36554],{"class":39,"line":65},[37,36553,75],{"class":43},[37,36555,36457],{"class":291},[37,36557,36558,36560,36562],{"class":39,"line":72},[37,36559,7570],{"class":51},[37,36561,55],{"class":43},[37,36563,7526],{"class":58},[37,36565,36566,36568,36570,36572],{"class":39,"line":116},[37,36567,7580],{"class":51},[37,36569,25058],{"class":43},[37,36571,6186],{"class":291},[37,36573,312],{"class":43},[37,36575,36576],{"class":39,"line":123},[37,36577,2314],{"class":43},[37,36579,36580,36582,36584],{"class":39,"line":129},[37,36581,273],{"class":43},[37,36583,48],{"class":291},[37,36585,62],{"class":43},[27,36587,36588],{"className":543,"code":36489,"language":545,"meta":32,"style":32},[34,36589,36590,36598,36604,36612,36624,36628],{"__ignoreMap":32},[37,36591,36592,36594,36596],{"class":39,"line":40},[37,36593,44],{"class":43},[37,36595,48],{"class":291},[37,36597,62],{"class":43},[37,36599,36600,36602],{"class":39,"line":65},[37,36601,75],{"class":43},[37,36603,36457],{"class":291},[37,36605,36606,36608,36610],{"class":39,"line":72},[37,36607,7570],{"class":51},[37,36609,55],{"class":297},[37,36611,7526],{"class":58},[37,36613,36614,36616,36618,36620,36622],{"class":39,"line":116},[37,36615,7580],{"class":51},[37,36617,55],{"class":297},[37,36619,326],{"class":43},[37,36621,6186],{"class":291},[37,36623,312],{"class":43},[37,36625,36626],{"class":39,"line":123},[37,36627,2314],{"class":43},[37,36629,36630,36632,36634],{"class":39,"line":129},[37,36631,273],{"class":43},[37,36633,48],{"class":291},[37,36635,62],{"class":43},[27,36637,36639],{"className":987,"code":36638,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Flower', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[34,36640,36641,36651,36655,36669,36673,36690,36694],{"__ignoreMap":32},[37,36642,36643,36645,36647,36649],{"class":39,"line":40},[37,36644,1382],{"class":297},[37,36646,9444],{"class":43},[37,36648,1388],{"class":297},[37,36650,9449],{"class":58},[37,36652,36653],{"class":39,"line":65},[37,36654,120],{"emptyLinePlaceholder":119},[37,36656,36657,36659,36661,36663,36665,36667],{"class":39,"line":72},[37,36658,2809],{"class":297},[37,36660,2812],{"class":291},[37,36662,2815],{"class":297},[37,36664,2818],{"class":297},[37,36666,999],{"class":51},[37,36668,1002],{"class":43},[37,36670,36671],{"class":39,"line":116},[37,36672,1007],{"class":43},[37,36674,36675,36677,36680,36682,36684,36686,36688],{"class":39,"line":123},[37,36676,1017],{"class":43},[37,36678,36679],{"class":58},"'Flower'",[37,36681,2845],{"class":43},[37,36683,8101],{"class":58},[37,36685,4501],{"class":43},[37,36687,6186],{"class":291},[37,36689,1142],{"class":43},[37,36691,36692],{"class":39,"line":129},[37,36693,1194],{"class":43},[37,36695,36696],{"class":39,"line":171},[37,36697,1200],{"class":43},[1311,36699,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":36701},[36702,36703],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/flower",{"title":36418,"description":36426},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":36710,"title":36711,"body":36712,"category":27972,"componentType":21056,"description":36719,"extension":1323,"meta":36904,"navigation":119,"path":36905,"requiresChild":27975,"seo":36906,"stem":36907,"__hash__":36908},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":36713,"toc":36900},[36714,36717,36720,36722,36724,36727,36729,36898],[11,36715,36711],{"id":36716},"flowinggradient",[15,36718,36719],{},"Liquid silk gradient with organic flowing color bands",[27113,36721],{"component":36711},[1202,36723,27117],{"id":21717},[27119,36725],{":props":36726},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#0a0015\",\"description\":\"Deep background color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#6b17e6\",\"description\":\"Primary accent color\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#ff4d6a\",\"description\":\"Secondary accent color\"},{\"name\":\"colorD\",\"type\":\"string\",\"default\":\"#ff6b35\",\"description\":\"Tertiary accent color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"},{\"name\":\"distortion\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Organic distortion intensity\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for variation\"}]",[1202,36728,27125],{"id":27124},[23,36730,36731,36760,36788,36816,36844],{":tabs":25},[27,36732,36734],{"className":29,"code":36733,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[34,36735,36736,36744,36752],{"__ignoreMap":32},[37,36737,36738,36740,36742],{"class":39,"line":40},[37,36739,44],{"class":43},[37,36741,48],{"class":47},[37,36743,62],{"class":43},[37,36745,36746,36748,36750],{"class":39,"line":65},[37,36747,75],{"class":43},[37,36749,36711],{"class":47},[37,36751,113],{"class":43},[37,36753,36754,36756,36758],{"class":39,"line":72},[37,36755,273],{"class":43},[37,36757,48],{"class":47},[37,36759,62],{"class":43},[27,36761,36762],{"className":280,"code":36733,"language":282,"meta":32,"style":32},[34,36763,36764,36772,36780],{"__ignoreMap":32},[37,36765,36766,36768,36770],{"class":39,"line":40},[37,36767,44],{"class":43},[37,36769,48],{"class":291},[37,36771,62],{"class":43},[37,36773,36774,36776,36778],{"class":39,"line":65},[37,36775,75],{"class":43},[37,36777,36711],{"class":291},[37,36779,113],{"class":43},[37,36781,36782,36784,36786],{"class":39,"line":72},[37,36783,273],{"class":43},[37,36785,48],{"class":291},[37,36787,62],{"class":43},[27,36789,36790],{"className":3580,"code":36733,"language":3582,"meta":32,"style":32},[34,36791,36792,36800,36808],{"__ignoreMap":32},[37,36793,36794,36796,36798],{"class":39,"line":40},[37,36795,44],{"class":43},[37,36797,48],{"class":291},[37,36799,62],{"class":43},[37,36801,36802,36804,36806],{"class":39,"line":65},[37,36803,75],{"class":43},[37,36805,36711],{"class":291},[37,36807,113],{"class":43},[37,36809,36810,36812,36814],{"class":39,"line":72},[37,36811,273],{"class":43},[37,36813,48],{"class":291},[37,36815,62],{"class":43},[27,36817,36818],{"className":543,"code":36733,"language":545,"meta":32,"style":32},[34,36819,36820,36828,36836],{"__ignoreMap":32},[37,36821,36822,36824,36826],{"class":39,"line":40},[37,36823,44],{"class":43},[37,36825,48],{"class":291},[37,36827,62],{"class":43},[37,36829,36830,36832,36834],{"class":39,"line":65},[37,36831,75],{"class":43},[37,36833,36711],{"class":291},[37,36835,113],{"class":43},[37,36837,36838,36840,36842],{"class":39,"line":72},[37,36839,273],{"class":43},[37,36841,48],{"class":291},[37,36843,62],{"class":43},[27,36845,36847],{"className":987,"code":36846,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowingGradient', props: {} }\n ]\n})\n",[34,36848,36849,36859,36863,36877,36881,36890,36894],{"__ignoreMap":32},[37,36850,36851,36853,36855,36857],{"class":39,"line":40},[37,36852,1382],{"class":297},[37,36854,9444],{"class":43},[37,36856,1388],{"class":297},[37,36858,9449],{"class":58},[37,36860,36861],{"class":39,"line":65},[37,36862,120],{"emptyLinePlaceholder":119},[37,36864,36865,36867,36869,36871,36873,36875],{"class":39,"line":72},[37,36866,2809],{"class":297},[37,36868,2812],{"class":291},[37,36870,2815],{"class":297},[37,36872,2818],{"class":297},[37,36874,999],{"class":51},[37,36876,1002],{"class":43},[37,36878,36879],{"class":39,"line":116},[37,36880,1007],{"class":43},[37,36882,36883,36885,36888],{"class":39,"line":123},[37,36884,1017],{"class":43},[37,36886,36887],{"class":58},"'FlowingGradient'",[37,36889,3207],{"class":43},[37,36891,36892],{"class":39,"line":129},[37,36893,1194],{"class":43},[37,36895,36896],{"class":39,"line":171},[37,36897,1200],{"class":43},[1311,36899,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":36901},[36902,36903],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/flowinggradient",{"title":36711,"description":36719},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":36910,"title":36911,"body":36912,"category":29317,"componentType":21062,"description":36919,"extension":1323,"meta":37180,"navigation":119,"path":37181,"requiresChild":119,"seo":37182,"stem":37183,"__hash__":37184},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":36913,"toc":37176},[36914,36917,36920,36922,36924,36927,36929,37174],[11,36915,36911],{"id":36916},"form3d",[15,36918,36919],{},"Wraps child content onto a 3D raymarched shape with lighting.",[27113,36921],{"component":36911},[1202,36923,27117],{"id":21717},[27119,36925],{":props":36926},"[{\"name\":\"shape3d\",\"type\":\"string\",\"default\":\"{\\\"type\\\":\\\"ribbon\\\",\\\"angle\\\":0,\\\"twist\\\":50,\\\"width\\\":40,\\\"thickness\\\":20,\\\"seed\\\":0}\",\"description\":\"3D shape and its parameters\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the shape on screen\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Camera zoom level\"},{\"name\":\"glossiness\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Specular highlight intensity and sharpness\"},{\"name\":\"lighting\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Overall intensity of lighting effects\"},{\"name\":\"uvMode\",\"type\":\"\\\"stretch\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle UV coordinates at shape boundaries\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed — scales all spin rates\"}]",[1202,36928,27125],{"id":27124},[23,36930,36931,36976,37020,37064,37108],{":tabs":25},[27,36932,36934],{"className":29,"code":36933,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[34,36935,36936,36944,36952,36960,36968],{"__ignoreMap":32},[37,36937,36938,36940,36942],{"class":39,"line":40},[37,36939,44],{"class":43},[37,36941,48],{"class":47},[37,36943,62],{"class":43},[37,36945,36946,36948,36950],{"class":39,"line":65},[37,36947,75],{"class":43},[37,36949,36911],{"class":47},[37,36951,62],{"class":43},[37,36953,36954,36956,36958],{"class":39,"line":72},[37,36955,174],{"class":43},[37,36957,3293],{"class":47},[37,36959,113],{"class":43},[37,36961,36962,36964,36966],{"class":39,"line":116},[37,36963,224],{"class":43},[37,36965,36911],{"class":47},[37,36967,62],{"class":43},[37,36969,36970,36972,36974],{"class":39,"line":123},[37,36971,273],{"class":43},[37,36973,48],{"class":47},[37,36975,62],{"class":43},[27,36977,36978],{"className":280,"code":36933,"language":282,"meta":32,"style":32},[34,36979,36980,36988,36996,37004,37012],{"__ignoreMap":32},[37,36981,36982,36984,36986],{"class":39,"line":40},[37,36983,44],{"class":43},[37,36985,48],{"class":291},[37,36987,62],{"class":43},[37,36989,36990,36992,36994],{"class":39,"line":65},[37,36991,75],{"class":43},[37,36993,36911],{"class":291},[37,36995,62],{"class":43},[37,36997,36998,37000,37002],{"class":39,"line":72},[37,36999,174],{"class":43},[37,37001,3293],{"class":291},[37,37003,113],{"class":43},[37,37005,37006,37008,37010],{"class":39,"line":116},[37,37007,224],{"class":43},[37,37009,36911],{"class":291},[37,37011,62],{"class":43},[37,37013,37014,37016,37018],{"class":39,"line":123},[37,37015,273],{"class":43},[37,37017,48],{"class":291},[37,37019,62],{"class":43},[27,37021,37022],{"className":3580,"code":36933,"language":3582,"meta":32,"style":32},[34,37023,37024,37032,37040,37048,37056],{"__ignoreMap":32},[37,37025,37026,37028,37030],{"class":39,"line":40},[37,37027,44],{"class":43},[37,37029,48],{"class":291},[37,37031,62],{"class":43},[37,37033,37034,37036,37038],{"class":39,"line":65},[37,37035,75],{"class":43},[37,37037,36911],{"class":291},[37,37039,62],{"class":43},[37,37041,37042,37044,37046],{"class":39,"line":72},[37,37043,174],{"class":43},[37,37045,3293],{"class":291},[37,37047,113],{"class":43},[37,37049,37050,37052,37054],{"class":39,"line":116},[37,37051,224],{"class":43},[37,37053,36911],{"class":291},[37,37055,62],{"class":43},[37,37057,37058,37060,37062],{"class":39,"line":123},[37,37059,273],{"class":43},[37,37061,48],{"class":291},[37,37063,62],{"class":43},[27,37065,37066],{"className":543,"code":36933,"language":545,"meta":32,"style":32},[34,37067,37068,37076,37084,37092,37100],{"__ignoreMap":32},[37,37069,37070,37072,37074],{"class":39,"line":40},[37,37071,44],{"class":43},[37,37073,48],{"class":291},[37,37075,62],{"class":43},[37,37077,37078,37080,37082],{"class":39,"line":65},[37,37079,75],{"class":43},[37,37081,36911],{"class":291},[37,37083,62],{"class":43},[37,37085,37086,37088,37090],{"class":39,"line":72},[37,37087,174],{"class":43},[37,37089,3293],{"class":291},[37,37091,113],{"class":43},[37,37093,37094,37096,37098],{"class":39,"line":116},[37,37095,224],{"class":43},[37,37097,36911],{"class":291},[37,37099,62],{"class":43},[37,37101,37102,37104,37106],{"class":39,"line":123},[37,37103,273],{"class":43},[37,37105,48],{"class":291},[37,37107,62],{"class":43},[27,37109,37111],{"className":987,"code":37110,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Form3D', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,37112,37113,37123,37127,37141,37145,37154,37162,37166,37170],{"__ignoreMap":32},[37,37114,37115,37117,37119,37121],{"class":39,"line":40},[37,37116,1382],{"class":297},[37,37118,9444],{"class":43},[37,37120,1388],{"class":297},[37,37122,9449],{"class":58},[37,37124,37125],{"class":39,"line":65},[37,37126,120],{"emptyLinePlaceholder":119},[37,37128,37129,37131,37133,37135,37137,37139],{"class":39,"line":72},[37,37130,2809],{"class":297},[37,37132,2812],{"class":291},[37,37134,2815],{"class":297},[37,37136,2818],{"class":297},[37,37138,999],{"class":51},[37,37140,1002],{"class":43},[37,37142,37143],{"class":39,"line":116},[37,37144,1007],{"class":43},[37,37146,37147,37149,37152],{"class":39,"line":123},[37,37148,1017],{"class":43},[37,37150,37151],{"class":58},"'Form3D'",[37,37153,4944],{"class":43},[37,37155,37156,37158,37160],{"class":39,"line":129},[37,37157,4949],{"class":43},[37,37159,3941],{"class":58},[37,37161,3207],{"class":43},[37,37163,37164],{"class":39,"line":171},[37,37165,4966],{"class":43},[37,37167,37168],{"class":39,"line":221},[37,37169,1194],{"class":43},[37,37171,37172],{"class":39,"line":231},[37,37173,1200],{"class":43},[1311,37175,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":37177},[37178,37179],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/form3d",{"title":36911,"description":36919},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":37186,"title":18685,"body":37187,"category":32610,"componentType":21062,"description":37194,"extension":1323,"meta":37454,"navigation":119,"path":37455,"requiresChild":119,"seo":37456,"stem":37457,"__hash__":37458},"components/docs/components/Glass.md",{"type":8,"value":37188,"toc":37450},[37189,37192,37195,37197,37199,37202,37204,37448],[11,37190,18685],{"id":37191},"glass",[15,37193,37194],{},"Optically realistic glass lens driven in a custom shape",[27113,37196],{"component":18685},[1202,37198,27117],{"id":21717},[27119,37200],{":props":37201},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the glass shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the glass shape (1 = default size)\"},{\"name\":\"cutout\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Cut out the alpha outside the glass shape\"},{\"name\":\"refraction\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Lens refraction — how aggressively the edges warp content beneath (0 = none, 1 = max)\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Edge softness — higher values give a wider, softer fade at the glass boundary\"},{\"name\":\"blur\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Frosted blur amount — 0 = clear glass, higher = frosted/diffuse\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Glass depth — how far inward from the edge the refraction extends\"},{\"name\":\"aberration\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Chromatic aberration — splits RGB channels along the refraction vector\"},{\"name\":\"innerZoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Inner zoom level — magnifies content seen through the glass\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"300\",\"description\":\"Light angle in degrees\"},{\"name\":\"highlight\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Directional edge highlight — bright rim on the light-facing boundary\"},{\"name\":\"highlightColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the directional edge highlight and specular glint\"},{\"name\":\"highlightSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Specular highlight softness\"},{\"name\":\"fresnel\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Fresnel rim glow — a soft luminous halo around the glass boundary\"},{\"name\":\"fresnelSoftness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Fresnel rim width — higher values spread the glow further inward\"},{\"name\":\"fresnelColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the fresnel rim glow\"},{\"name\":\"tintColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color tint applied to the internal directional gradient\"},{\"name\":\"tintIntensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Intensity of the color tint applied to the glass interior\"},{\"name\":\"tintPreserveLuminosity\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Preserve original brightness when tinting\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](/docs/guide/shape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](/docs/guide/shape-effects) for how to generate an SDF from an SVG.\"}]",[1202,37203,27125],{"id":27124},[23,37205,37206,37251,37295,37339,37383],{":tabs":25},[27,37207,37209],{"className":29,"code":37208,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[34,37210,37211,37219,37227,37235,37243],{"__ignoreMap":32},[37,37212,37213,37215,37217],{"class":39,"line":40},[37,37214,44],{"class":43},[37,37216,48],{"class":47},[37,37218,62],{"class":43},[37,37220,37221,37223,37225],{"class":39,"line":65},[37,37222,75],{"class":43},[37,37224,18685],{"class":47},[37,37226,62],{"class":43},[37,37228,37229,37231,37233],{"class":39,"line":72},[37,37230,174],{"class":43},[37,37232,3293],{"class":47},[37,37234,113],{"class":43},[37,37236,37237,37239,37241],{"class":39,"line":116},[37,37238,224],{"class":43},[37,37240,18685],{"class":47},[37,37242,62],{"class":43},[37,37244,37245,37247,37249],{"class":39,"line":123},[37,37246,273],{"class":43},[37,37248,48],{"class":47},[37,37250,62],{"class":43},[27,37252,37253],{"className":280,"code":37208,"language":282,"meta":32,"style":32},[34,37254,37255,37263,37271,37279,37287],{"__ignoreMap":32},[37,37256,37257,37259,37261],{"class":39,"line":40},[37,37258,44],{"class":43},[37,37260,48],{"class":291},[37,37262,62],{"class":43},[37,37264,37265,37267,37269],{"class":39,"line":65},[37,37266,75],{"class":43},[37,37268,18685],{"class":291},[37,37270,62],{"class":43},[37,37272,37273,37275,37277],{"class":39,"line":72},[37,37274,174],{"class":43},[37,37276,3293],{"class":291},[37,37278,113],{"class":43},[37,37280,37281,37283,37285],{"class":39,"line":116},[37,37282,224],{"class":43},[37,37284,18685],{"class":291},[37,37286,62],{"class":43},[37,37288,37289,37291,37293],{"class":39,"line":123},[37,37290,273],{"class":43},[37,37292,48],{"class":291},[37,37294,62],{"class":43},[27,37296,37297],{"className":3580,"code":37208,"language":3582,"meta":32,"style":32},[34,37298,37299,37307,37315,37323,37331],{"__ignoreMap":32},[37,37300,37301,37303,37305],{"class":39,"line":40},[37,37302,44],{"class":43},[37,37304,48],{"class":291},[37,37306,62],{"class":43},[37,37308,37309,37311,37313],{"class":39,"line":65},[37,37310,75],{"class":43},[37,37312,18685],{"class":291},[37,37314,62],{"class":43},[37,37316,37317,37319,37321],{"class":39,"line":72},[37,37318,174],{"class":43},[37,37320,3293],{"class":291},[37,37322,113],{"class":43},[37,37324,37325,37327,37329],{"class":39,"line":116},[37,37326,224],{"class":43},[37,37328,18685],{"class":291},[37,37330,62],{"class":43},[37,37332,37333,37335,37337],{"class":39,"line":123},[37,37334,273],{"class":43},[37,37336,48],{"class":291},[37,37338,62],{"class":43},[27,37340,37341],{"className":543,"code":37208,"language":545,"meta":32,"style":32},[34,37342,37343,37351,37359,37367,37375],{"__ignoreMap":32},[37,37344,37345,37347,37349],{"class":39,"line":40},[37,37346,44],{"class":43},[37,37348,48],{"class":291},[37,37350,62],{"class":43},[37,37352,37353,37355,37357],{"class":39,"line":65},[37,37354,75],{"class":43},[37,37356,18685],{"class":291},[37,37358,62],{"class":43},[37,37360,37361,37363,37365],{"class":39,"line":72},[37,37362,174],{"class":43},[37,37364,3293],{"class":291},[37,37366,113],{"class":43},[37,37368,37369,37371,37373],{"class":39,"line":116},[37,37370,224],{"class":43},[37,37372,18685],{"class":291},[37,37374,62],{"class":43},[37,37376,37377,37379,37381],{"class":39,"line":123},[37,37378,273],{"class":43},[37,37380,48],{"class":291},[37,37382,62],{"class":43},[27,37384,37386],{"className":987,"code":37385,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,37387,37388,37398,37402,37416,37420,37428,37436,37440,37444],{"__ignoreMap":32},[37,37389,37390,37392,37394,37396],{"class":39,"line":40},[37,37391,1382],{"class":297},[37,37393,9444],{"class":43},[37,37395,1388],{"class":297},[37,37397,9449],{"class":58},[37,37399,37400],{"class":39,"line":65},[37,37401,120],{"emptyLinePlaceholder":119},[37,37403,37404,37406,37408,37410,37412,37414],{"class":39,"line":72},[37,37405,2809],{"class":297},[37,37407,2812],{"class":291},[37,37409,2815],{"class":297},[37,37411,2818],{"class":297},[37,37413,999],{"class":51},[37,37415,1002],{"class":43},[37,37417,37418],{"class":39,"line":116},[37,37419,1007],{"class":43},[37,37421,37422,37424,37426],{"class":39,"line":123},[37,37423,1017],{"class":43},[37,37425,19226],{"class":58},[37,37427,4944],{"class":43},[37,37429,37430,37432,37434],{"class":39,"line":129},[37,37431,4949],{"class":43},[37,37433,3941],{"class":58},[37,37435,3207],{"class":43},[37,37437,37438],{"class":39,"line":171},[37,37439,4966],{"class":43},[37,37441,37442],{"class":39,"line":221},[37,37443,1194],{"class":43},[37,37445,37446],{"class":39,"line":231},[37,37447,1200],{"class":43},[1311,37449,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":37451},[37452,37453],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/glass",{"title":18685,"description":37194},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":37460,"title":4161,"body":37461,"category":29317,"componentType":21062,"description":37468,"extension":1323,"meta":37785,"navigation":119,"path":37786,"requiresChild":119,"seo":37787,"stem":37788,"__hash__":37789},"components/docs/components/GlassTiles.md",{"type":8,"value":37462,"toc":37781},[37463,37466,37469,37471,37473,37476,37478,37779],[11,37464,4161],{"id":37465},"glasstiles",[15,37467,37468],{},"Refraction-like distortion in a tile grid pattern",[27113,37470],{"component":4161},[1202,37472,27117],{"id":21717},[27119,37474],{":props":37475},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"2\",\"description\":\"The intensity of the glass tiles effect\"},{\"name\":\"tileCount\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Number of tiles across the longest dimension\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle of the tile grid in degrees\"},{\"name\":\"roundness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Makes tiles more circular instead of square\"}]",[1202,37477,27125],{"id":27124},[23,37479,37480,37537,37596,37652,37710],{":tabs":25},[27,37481,37483],{"className":29,"code":37482,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[34,37484,37485,37493,37500,37509,37513,37521,37529],{"__ignoreMap":32},[37,37486,37487,37489,37491],{"class":39,"line":40},[37,37488,44],{"class":43},[37,37490,48],{"class":47},[37,37492,62],{"class":43},[37,37494,37495,37497],{"class":39,"line":65},[37,37496,75],{"class":43},[37,37498,37499],{"class":47},"GlassTiles\n",[37,37501,37502,37504,37506],{"class":39,"line":72},[37,37503,18081],{"class":51},[37,37505,55],{"class":43},[37,37507,37508],{"class":58},"\"2\"\n",[37,37510,37511],{"class":39,"line":116},[37,37512,27161],{"class":43},[37,37514,37515,37517,37519],{"class":39,"line":123},[37,37516,174],{"class":43},[37,37518,3293],{"class":47},[37,37520,113],{"class":43},[37,37522,37523,37525,37527],{"class":39,"line":129},[37,37524,224],{"class":43},[37,37526,4161],{"class":47},[37,37528,62],{"class":43},[37,37530,37531,37533,37535],{"class":39,"line":171},[37,37532,273],{"class":43},[37,37534,48],{"class":47},[37,37536,62],{"class":43},[27,37538,37540],{"className":280,"code":37539,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[34,37541,37542,37550,37556,37568,37572,37580,37588],{"__ignoreMap":32},[37,37543,37544,37546,37548],{"class":39,"line":40},[37,37545,44],{"class":43},[37,37547,48],{"class":291},[37,37549,62],{"class":43},[37,37551,37552,37554],{"class":39,"line":65},[37,37553,75],{"class":43},[37,37555,37499],{"class":291},[37,37557,37558,37560,37562,37564,37566],{"class":39,"line":72},[37,37559,18192],{"class":51},[37,37561,55],{"class":297},[37,37563,326],{"class":43},[37,37565,5150],{"class":291},[37,37567,312],{"class":43},[37,37569,37570],{"class":39,"line":116},[37,37571,27161],{"class":43},[37,37573,37574,37576,37578],{"class":39,"line":123},[37,37575,174],{"class":43},[37,37577,3293],{"class":291},[37,37579,113],{"class":43},[37,37581,37582,37584,37586],{"class":39,"line":129},[37,37583,224],{"class":43},[37,37585,4161],{"class":291},[37,37587,62],{"class":43},[37,37589,37590,37592,37594],{"class":39,"line":171},[37,37591,273],{"class":43},[37,37593,48],{"class":291},[37,37595,62],{"class":43},[27,37597,37598],{"className":3580,"code":37539,"language":3582,"meta":32,"style":32},[34,37599,37600,37608,37614,37624,37628,37636,37644],{"__ignoreMap":32},[37,37601,37602,37604,37606],{"class":39,"line":40},[37,37603,44],{"class":43},[37,37605,48],{"class":291},[37,37607,62],{"class":43},[37,37609,37610,37612],{"class":39,"line":65},[37,37611,75],{"class":43},[37,37613,37499],{"class":291},[37,37615,37616,37618,37620,37622],{"class":39,"line":72},[37,37617,18192],{"class":51},[37,37619,25058],{"class":43},[37,37621,5150],{"class":291},[37,37623,312],{"class":43},[37,37625,37626],{"class":39,"line":116},[37,37627,27161],{"class":43},[37,37629,37630,37632,37634],{"class":39,"line":123},[37,37631,174],{"class":43},[37,37633,3293],{"class":291},[37,37635,113],{"class":43},[37,37637,37638,37640,37642],{"class":39,"line":129},[37,37639,224],{"class":43},[37,37641,4161],{"class":291},[37,37643,62],{"class":43},[37,37645,37646,37648,37650],{"class":39,"line":171},[37,37647,273],{"class":43},[37,37649,48],{"class":291},[37,37651,62],{"class":43},[27,37653,37654],{"className":543,"code":37539,"language":545,"meta":32,"style":32},[34,37655,37656,37664,37670,37682,37686,37694,37702],{"__ignoreMap":32},[37,37657,37658,37660,37662],{"class":39,"line":40},[37,37659,44],{"class":43},[37,37661,48],{"class":291},[37,37663,62],{"class":43},[37,37665,37666,37668],{"class":39,"line":65},[37,37667,75],{"class":43},[37,37669,37499],{"class":291},[37,37671,37672,37674,37676,37678,37680],{"class":39,"line":72},[37,37673,18192],{"class":51},[37,37675,55],{"class":297},[37,37677,326],{"class":43},[37,37679,5150],{"class":291},[37,37681,312],{"class":43},[37,37683,37684],{"class":39,"line":116},[37,37685,27161],{"class":43},[37,37687,37688,37690,37692],{"class":39,"line":123},[37,37689,174],{"class":43},[37,37691,3293],{"class":291},[37,37693,113],{"class":43},[37,37695,37696,37698,37700],{"class":39,"line":129},[37,37697,224],{"class":43},[37,37699,4161],{"class":291},[37,37701,62],{"class":43},[37,37703,37704,37706,37708],{"class":39,"line":171},[37,37705,273],{"class":43},[37,37707,48],{"class":291},[37,37709,62],{"class":43},[27,37711,37713],{"className":987,"code":37712,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'GlassTiles', props: { intensity: 2 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,37714,37715,37725,37729,37743,37747,37759,37767,37771,37775],{"__ignoreMap":32},[37,37716,37717,37719,37721,37723],{"class":39,"line":40},[37,37718,1382],{"class":297},[37,37720,9444],{"class":43},[37,37722,1388],{"class":297},[37,37724,9449],{"class":58},[37,37726,37727],{"class":39,"line":65},[37,37728,120],{"emptyLinePlaceholder":119},[37,37730,37731,37733,37735,37737,37739,37741],{"class":39,"line":72},[37,37732,2809],{"class":297},[37,37734,2812],{"class":291},[37,37736,2815],{"class":297},[37,37738,2818],{"class":297},[37,37740,999],{"class":51},[37,37742,1002],{"class":43},[37,37744,37745],{"class":39,"line":116},[37,37746,1007],{"class":43},[37,37748,37749,37751,37753,37755,37757],{"class":39,"line":123},[37,37750,1017],{"class":43},[37,37752,4517],{"class":58},[37,37754,27406],{"class":43},[37,37756,5150],{"class":291},[37,37758,5482],{"class":43},[37,37760,37761,37763,37765],{"class":39,"line":129},[37,37762,4949],{"class":43},[37,37764,3941],{"class":58},[37,37766,3207],{"class":43},[37,37768,37769],{"class":39,"line":171},[37,37770,4966],{"class":43},[37,37772,37773],{"class":39,"line":221},[37,37774,1194],{"class":43},[37,37776,37777],{"class":39,"line":231},[37,37778,1200],{"class":43},[1311,37780,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":37782},[37783,37784],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/glasstiles",{"title":4161,"description":37468},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":37791,"title":37792,"body":37793,"category":27715,"componentType":21062,"description":37800,"extension":1323,"meta":38117,"navigation":119,"path":38118,"requiresChild":119,"seo":38119,"stem":38120,"__hash__":38121},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":37794,"toc":38113},[37795,37798,37801,37803,37805,37808,37810,38111],[11,37796,37792],{"id":37797},"glitch",[15,37799,37800],{},"Digital glitch that melts pixels and distorts colors",[27113,37802],{"component":37792},[1202,37804,27117],{"id":21717},[27119,37806],{":props":37807},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Overall glitch strength and frequency of glitch bursts\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How fast the glitch pattern evolves\"},{\"name\":\"rgbShift\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Amount of chromatic aberration (RGB channel splitting)\"},{\"name\":\"blockDensity\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Base number of horizontal glitch bands\"},{\"name\":\"colorBarIntensity\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Intensity of vivid neon color bar overlay in glitch regions\"},{\"name\":\"mirrorAmount\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Chance of glitch blocks showing mirrored/flipped content\"},{\"name\":\"scanlineIntensity\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Visibility of CRT-style horizontal scanlines in distorted areas\"}]",[1202,37809,27125],{"id":27124},[23,37811,37812,37868,37927,37983,38041],{":tabs":25},[27,37813,37815],{"className":29,"code":37814,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[34,37816,37817,37825,37832,37840,37844,37852,37860],{"__ignoreMap":32},[37,37818,37819,37821,37823],{"class":39,"line":40},[37,37820,44],{"class":43},[37,37822,48],{"class":47},[37,37824,62],{"class":43},[37,37826,37827,37829],{"class":39,"line":65},[37,37828,75],{"class":43},[37,37830,37831],{"class":47},"Glitch\n",[37,37833,37834,37836,37838],{"class":39,"line":72},[37,37835,18081],{"class":51},[37,37837,55],{"class":43},[37,37839,32674],{"class":58},[37,37841,37842],{"class":39,"line":116},[37,37843,27161],{"class":43},[37,37845,37846,37848,37850],{"class":39,"line":123},[37,37847,174],{"class":43},[37,37849,3293],{"class":47},[37,37851,113],{"class":43},[37,37853,37854,37856,37858],{"class":39,"line":129},[37,37855,224],{"class":43},[37,37857,37792],{"class":47},[37,37859,62],{"class":43},[37,37861,37862,37864,37866],{"class":39,"line":171},[37,37863,273],{"class":43},[37,37865,48],{"class":47},[37,37867,62],{"class":43},[27,37869,37871],{"className":280,"code":37870,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[34,37872,37873,37881,37887,37899,37903,37911,37919],{"__ignoreMap":32},[37,37874,37875,37877,37879],{"class":39,"line":40},[37,37876,44],{"class":43},[37,37878,48],{"class":291},[37,37880,62],{"class":43},[37,37882,37883,37885],{"class":39,"line":65},[37,37884,75],{"class":43},[37,37886,37831],{"class":291},[37,37888,37889,37891,37893,37895,37897],{"class":39,"line":72},[37,37890,18192],{"class":51},[37,37892,55],{"class":297},[37,37894,326],{"class":43},[37,37896,5689],{"class":291},[37,37898,312],{"class":43},[37,37900,37901],{"class":39,"line":116},[37,37902,27161],{"class":43},[37,37904,37905,37907,37909],{"class":39,"line":123},[37,37906,174],{"class":43},[37,37908,3293],{"class":291},[37,37910,113],{"class":43},[37,37912,37913,37915,37917],{"class":39,"line":129},[37,37914,224],{"class":43},[37,37916,37792],{"class":291},[37,37918,62],{"class":43},[37,37920,37921,37923,37925],{"class":39,"line":171},[37,37922,273],{"class":43},[37,37924,48],{"class":291},[37,37926,62],{"class":43},[27,37928,37929],{"className":3580,"code":37870,"language":3582,"meta":32,"style":32},[34,37930,37931,37939,37945,37955,37959,37967,37975],{"__ignoreMap":32},[37,37932,37933,37935,37937],{"class":39,"line":40},[37,37934,44],{"class":43},[37,37936,48],{"class":291},[37,37938,62],{"class":43},[37,37940,37941,37943],{"class":39,"line":65},[37,37942,75],{"class":43},[37,37944,37831],{"class":291},[37,37946,37947,37949,37951,37953],{"class":39,"line":72},[37,37948,18192],{"class":51},[37,37950,25058],{"class":43},[37,37952,5689],{"class":291},[37,37954,312],{"class":43},[37,37956,37957],{"class":39,"line":116},[37,37958,27161],{"class":43},[37,37960,37961,37963,37965],{"class":39,"line":123},[37,37962,174],{"class":43},[37,37964,3293],{"class":291},[37,37966,113],{"class":43},[37,37968,37969,37971,37973],{"class":39,"line":129},[37,37970,224],{"class":43},[37,37972,37792],{"class":291},[37,37974,62],{"class":43},[37,37976,37977,37979,37981],{"class":39,"line":171},[37,37978,273],{"class":43},[37,37980,48],{"class":291},[37,37982,62],{"class":43},[27,37984,37985],{"className":543,"code":37870,"language":545,"meta":32,"style":32},[34,37986,37987,37995,38001,38013,38017,38025,38033],{"__ignoreMap":32},[37,37988,37989,37991,37993],{"class":39,"line":40},[37,37990,44],{"class":43},[37,37992,48],{"class":291},[37,37994,62],{"class":43},[37,37996,37997,37999],{"class":39,"line":65},[37,37998,75],{"class":43},[37,38000,37831],{"class":291},[37,38002,38003,38005,38007,38009,38011],{"class":39,"line":72},[37,38004,18192],{"class":51},[37,38006,55],{"class":297},[37,38008,326],{"class":43},[37,38010,5689],{"class":291},[37,38012,312],{"class":43},[37,38014,38015],{"class":39,"line":116},[37,38016,27161],{"class":43},[37,38018,38019,38021,38023],{"class":39,"line":123},[37,38020,174],{"class":43},[37,38022,3293],{"class":291},[37,38024,113],{"class":43},[37,38026,38027,38029,38031],{"class":39,"line":129},[37,38028,224],{"class":43},[37,38030,37792],{"class":291},[37,38032,62],{"class":43},[37,38034,38035,38037,38039],{"class":39,"line":171},[37,38036,273],{"class":43},[37,38038,48],{"class":291},[37,38040,62],{"class":43},[27,38042,38044],{"className":987,"code":38043,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glitch', props: { intensity: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,38045,38046,38056,38060,38074,38078,38091,38099,38103,38107],{"__ignoreMap":32},[37,38047,38048,38050,38052,38054],{"class":39,"line":40},[37,38049,1382],{"class":297},[37,38051,9444],{"class":43},[37,38053,1388],{"class":297},[37,38055,9449],{"class":58},[37,38057,38058],{"class":39,"line":65},[37,38059,120],{"emptyLinePlaceholder":119},[37,38061,38062,38064,38066,38068,38070,38072],{"class":39,"line":72},[37,38063,2809],{"class":297},[37,38065,2812],{"class":291},[37,38067,2815],{"class":297},[37,38069,2818],{"class":297},[37,38071,999],{"class":51},[37,38073,1002],{"class":43},[37,38075,38076],{"class":39,"line":116},[37,38077,1007],{"class":43},[37,38079,38080,38082,38085,38087,38089],{"class":39,"line":123},[37,38081,1017],{"class":43},[37,38083,38084],{"class":58},"'Glitch'",[37,38086,27406],{"class":43},[37,38088,5689],{"class":291},[37,38090,5482],{"class":43},[37,38092,38093,38095,38097],{"class":39,"line":129},[37,38094,4949],{"class":43},[37,38096,3941],{"class":58},[37,38098,3207],{"class":43},[37,38100,38101],{"class":39,"line":171},[37,38102,4966],{"class":43},[37,38104,38105],{"class":39,"line":221},[37,38106,1194],{"class":43},[37,38108,38109],{"class":39,"line":231},[37,38110,1200],{"class":43},[1311,38112,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":38114},[38115,38116],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/glitch",{"title":37792,"description":37800},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":38123,"title":9722,"body":38124,"category":27715,"componentType":21062,"description":38131,"extension":1323,"meta":38448,"navigation":119,"path":38449,"requiresChild":119,"seo":38450,"stem":38451,"__hash__":38452},"components/docs/components/Glow.md",{"type":8,"value":38125,"toc":38444},[38126,38129,38132,38134,38136,38139,38141,38442],[11,38127,9722],{"id":38128},"glow",[15,38130,38131],{},"Soft glow effect with adjustable intensity",[27113,38133],{"component":9722},[1202,38135,27117],{"id":21717},[27119,38137],{":props":38138},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Glow intensity (brightness of the glow effect)\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Brightness threshold for glow extraction (lower = more glow)\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Size/spread of the glow effect\"}]",[1202,38140,27125],{"id":27124},[23,38142,38143,38199,38258,38314,38372],{":tabs":25},[27,38144,38146],{"className":29,"code":38145,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[34,38147,38148,38156,38163,38171,38175,38183,38191],{"__ignoreMap":32},[37,38149,38150,38152,38154],{"class":39,"line":40},[37,38151,44],{"class":43},[37,38153,48],{"class":47},[37,38155,62],{"class":43},[37,38157,38158,38160],{"class":39,"line":65},[37,38159,75],{"class":43},[37,38161,38162],{"class":47},"Glow\n",[37,38164,38165,38167,38169],{"class":39,"line":72},[37,38166,18081],{"class":51},[37,38168,55],{"class":43},[37,38170,29039],{"class":58},[37,38172,38173],{"class":39,"line":116},[37,38174,27161],{"class":43},[37,38176,38177,38179,38181],{"class":39,"line":123},[37,38178,174],{"class":43},[37,38180,3293],{"class":47},[37,38182,113],{"class":43},[37,38184,38185,38187,38189],{"class":39,"line":129},[37,38186,224],{"class":43},[37,38188,9722],{"class":47},[37,38190,62],{"class":43},[37,38192,38193,38195,38197],{"class":39,"line":171},[37,38194,273],{"class":43},[37,38196,48],{"class":47},[37,38198,62],{"class":43},[27,38200,38202],{"className":280,"code":38201,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[34,38203,38204,38212,38218,38230,38234,38242,38250],{"__ignoreMap":32},[37,38205,38206,38208,38210],{"class":39,"line":40},[37,38207,44],{"class":43},[37,38209,48],{"class":291},[37,38211,62],{"class":43},[37,38213,38214,38216],{"class":39,"line":65},[37,38215,75],{"class":43},[37,38217,38162],{"class":291},[37,38219,38220,38222,38224,38226,38228],{"class":39,"line":72},[37,38221,18192],{"class":51},[37,38223,55],{"class":297},[37,38225,326],{"class":43},[37,38227,6614],{"class":291},[37,38229,312],{"class":43},[37,38231,38232],{"class":39,"line":116},[37,38233,27161],{"class":43},[37,38235,38236,38238,38240],{"class":39,"line":123},[37,38237,174],{"class":43},[37,38239,3293],{"class":291},[37,38241,113],{"class":43},[37,38243,38244,38246,38248],{"class":39,"line":129},[37,38245,224],{"class":43},[37,38247,9722],{"class":291},[37,38249,62],{"class":43},[37,38251,38252,38254,38256],{"class":39,"line":171},[37,38253,273],{"class":43},[37,38255,48],{"class":291},[37,38257,62],{"class":43},[27,38259,38260],{"className":3580,"code":38201,"language":3582,"meta":32,"style":32},[34,38261,38262,38270,38276,38286,38290,38298,38306],{"__ignoreMap":32},[37,38263,38264,38266,38268],{"class":39,"line":40},[37,38265,44],{"class":43},[37,38267,48],{"class":291},[37,38269,62],{"class":43},[37,38271,38272,38274],{"class":39,"line":65},[37,38273,75],{"class":43},[37,38275,38162],{"class":291},[37,38277,38278,38280,38282,38284],{"class":39,"line":72},[37,38279,18192],{"class":51},[37,38281,25058],{"class":43},[37,38283,6614],{"class":291},[37,38285,312],{"class":43},[37,38287,38288],{"class":39,"line":116},[37,38289,27161],{"class":43},[37,38291,38292,38294,38296],{"class":39,"line":123},[37,38293,174],{"class":43},[37,38295,3293],{"class":291},[37,38297,113],{"class":43},[37,38299,38300,38302,38304],{"class":39,"line":129},[37,38301,224],{"class":43},[37,38303,9722],{"class":291},[37,38305,62],{"class":43},[37,38307,38308,38310,38312],{"class":39,"line":171},[37,38309,273],{"class":43},[37,38311,48],{"class":291},[37,38313,62],{"class":43},[27,38315,38316],{"className":543,"code":38201,"language":545,"meta":32,"style":32},[34,38317,38318,38326,38332,38344,38348,38356,38364],{"__ignoreMap":32},[37,38319,38320,38322,38324],{"class":39,"line":40},[37,38321,44],{"class":43},[37,38323,48],{"class":291},[37,38325,62],{"class":43},[37,38327,38328,38330],{"class":39,"line":65},[37,38329,75],{"class":43},[37,38331,38162],{"class":291},[37,38333,38334,38336,38338,38340,38342],{"class":39,"line":72},[37,38335,18192],{"class":51},[37,38337,55],{"class":297},[37,38339,326],{"class":43},[37,38341,6614],{"class":291},[37,38343,312],{"class":43},[37,38345,38346],{"class":39,"line":116},[37,38347,27161],{"class":43},[37,38349,38350,38352,38354],{"class":39,"line":123},[37,38351,174],{"class":43},[37,38353,3293],{"class":291},[37,38355,113],{"class":43},[37,38357,38358,38360,38362],{"class":39,"line":129},[37,38359,224],{"class":43},[37,38361,9722],{"class":291},[37,38363,62],{"class":43},[37,38365,38366,38368,38370],{"class":39,"line":171},[37,38367,273],{"class":43},[37,38369,48],{"class":291},[37,38371,62],{"class":43},[27,38373,38375],{"className":987,"code":38374,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Glow', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,38376,38377,38387,38391,38405,38409,38422,38430,38434,38438],{"__ignoreMap":32},[37,38378,38379,38381,38383,38385],{"class":39,"line":40},[37,38380,1382],{"class":297},[37,38382,9444],{"class":43},[37,38384,1388],{"class":297},[37,38386,9449],{"class":58},[37,38388,38389],{"class":39,"line":65},[37,38390,120],{"emptyLinePlaceholder":119},[37,38392,38393,38395,38397,38399,38401,38403],{"class":39,"line":72},[37,38394,2809],{"class":297},[37,38396,2812],{"class":291},[37,38398,2815],{"class":297},[37,38400,2818],{"class":297},[37,38402,999],{"class":51},[37,38404,1002],{"class":43},[37,38406,38407],{"class":39,"line":116},[37,38408,1007],{"class":43},[37,38410,38411,38413,38416,38418,38420],{"class":39,"line":123},[37,38412,1017],{"class":43},[37,38414,38415],{"class":58},"'Glow'",[37,38417,27406],{"class":43},[37,38419,6614],{"class":291},[37,38421,5482],{"class":43},[37,38423,38424,38426,38428],{"class":39,"line":129},[37,38425,4949],{"class":43},[37,38427,3941],{"class":58},[37,38429,3207],{"class":43},[37,38431,38432],{"class":39,"line":171},[37,38433,4966],{"class":43},[37,38435,38436],{"class":39,"line":221},[37,38437,1194],{"class":43},[37,38439,38440],{"class":39,"line":231},[37,38441,1200],{"class":43},[1311,38443,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":38445},[38446,38447],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/glow",{"title":9722,"description":38131},"docs/components/Glow","nY6FLTxSC0jk4JC2WGI4IwGXHT0zG4brVxkpPPza0M0",{"id":38454,"title":38455,"body":38456,"category":27972,"componentType":21056,"description":38463,"extension":1323,"meta":38704,"navigation":119,"path":38705,"requiresChild":27975,"seo":38706,"stem":38707,"__hash__":38708},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":38457,"toc":38700},[38458,38461,38464,38466,38468,38471,38473,38698],[11,38459,38455],{"id":38460},"godrays",[15,38462,38463],{},"Volumetric light rays emanating from a point",[27113,38465],{"component":38455},[1202,38467,27117],{"id":21717},[27119,38469],{":props":38470},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":0}\",\"description\":\"The center point of the god rays\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Frequency of ray sectors\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Ray visibility within sectors\"},{\"name\":\"spotty\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Density of spots on rays (higher = more spots)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed of the rays\"},{\"name\":\"rayColor\",\"type\":\"string\",\"default\":\"#4283fb\",\"description\":\"Color of the light rays\"},{\"name\":\"backgroundColor\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Background color\"}]",[1202,38472,27125],{"id":27124},[23,38474,38475,38515,38558,38598,38640],{":tabs":25},[27,38476,38478],{"className":29,"code":38477,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[34,38479,38480,38488,38495,38503,38507],{"__ignoreMap":32},[37,38481,38482,38484,38486],{"class":39,"line":40},[37,38483,44],{"class":43},[37,38485,48],{"class":47},[37,38487,62],{"class":43},[37,38489,38490,38492],{"class":39,"line":65},[37,38491,75],{"class":43},[37,38493,38494],{"class":47},"Godrays\n",[37,38496,38497,38499,38501],{"class":39,"line":72},[37,38498,18081],{"class":51},[37,38500,55],{"class":43},[37,38502,7585],{"class":58},[37,38504,38505],{"class":39,"line":116},[37,38506,2314],{"class":43},[37,38508,38509,38511,38513],{"class":39,"line":123},[37,38510,273],{"class":43},[37,38512,48],{"class":47},[37,38514,62],{"class":43},[27,38516,38518],{"className":280,"code":38517,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[34,38519,38520,38528,38534,38546,38550],{"__ignoreMap":32},[37,38521,38522,38524,38526],{"class":39,"line":40},[37,38523,44],{"class":43},[37,38525,48],{"class":291},[37,38527,62],{"class":43},[37,38529,38530,38532],{"class":39,"line":65},[37,38531,75],{"class":43},[37,38533,38494],{"class":291},[37,38535,38536,38538,38540,38542,38544],{"class":39,"line":72},[37,38537,18192],{"class":51},[37,38539,55],{"class":297},[37,38541,326],{"class":43},[37,38543,4235],{"class":291},[37,38545,312],{"class":43},[37,38547,38548],{"class":39,"line":116},[37,38549,2314],{"class":43},[37,38551,38552,38554,38556],{"class":39,"line":123},[37,38553,273],{"class":43},[37,38555,48],{"class":291},[37,38557,62],{"class":43},[27,38559,38560],{"className":3580,"code":38517,"language":3582,"meta":32,"style":32},[34,38561,38562,38570,38576,38586,38590],{"__ignoreMap":32},[37,38563,38564,38566,38568],{"class":39,"line":40},[37,38565,44],{"class":43},[37,38567,48],{"class":291},[37,38569,62],{"class":43},[37,38571,38572,38574],{"class":39,"line":65},[37,38573,75],{"class":43},[37,38575,38494],{"class":291},[37,38577,38578,38580,38582,38584],{"class":39,"line":72},[37,38579,18192],{"class":51},[37,38581,25058],{"class":43},[37,38583,4235],{"class":291},[37,38585,312],{"class":43},[37,38587,38588],{"class":39,"line":116},[37,38589,2314],{"class":43},[37,38591,38592,38594,38596],{"class":39,"line":123},[37,38593,273],{"class":43},[37,38595,48],{"class":291},[37,38597,62],{"class":43},[27,38599,38600],{"className":543,"code":38517,"language":545,"meta":32,"style":32},[34,38601,38602,38610,38616,38628,38632],{"__ignoreMap":32},[37,38603,38604,38606,38608],{"class":39,"line":40},[37,38605,44],{"class":43},[37,38607,48],{"class":291},[37,38609,62],{"class":43},[37,38611,38612,38614],{"class":39,"line":65},[37,38613,75],{"class":43},[37,38615,38494],{"class":291},[37,38617,38618,38620,38622,38624,38626],{"class":39,"line":72},[37,38619,18192],{"class":51},[37,38621,55],{"class":297},[37,38623,326],{"class":43},[37,38625,4235],{"class":291},[37,38627,312],{"class":43},[37,38629,38630],{"class":39,"line":116},[37,38631,2314],{"class":43},[37,38633,38634,38636,38638],{"class":39,"line":123},[37,38635,273],{"class":43},[37,38637,48],{"class":291},[37,38639,62],{"class":43},[27,38641,38643],{"className":987,"code":38642,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Godrays', props: { intensity: 0.8 } }\n ]\n})\n",[34,38644,38645,38655,38659,38673,38677,38690,38694],{"__ignoreMap":32},[37,38646,38647,38649,38651,38653],{"class":39,"line":40},[37,38648,1382],{"class":297},[37,38650,9444],{"class":43},[37,38652,1388],{"class":297},[37,38654,9449],{"class":58},[37,38656,38657],{"class":39,"line":65},[37,38658,120],{"emptyLinePlaceholder":119},[37,38660,38661,38663,38665,38667,38669,38671],{"class":39,"line":72},[37,38662,2809],{"class":297},[37,38664,2812],{"class":291},[37,38666,2815],{"class":297},[37,38668,2818],{"class":297},[37,38670,999],{"class":51},[37,38672,1002],{"class":43},[37,38674,38675],{"class":39,"line":116},[37,38676,1007],{"class":43},[37,38678,38679,38681,38684,38686,38688],{"class":39,"line":123},[37,38680,1017],{"class":43},[37,38682,38683],{"class":58},"'Godrays'",[37,38685,27406],{"class":43},[37,38687,4235],{"class":291},[37,38689,1142],{"class":43},[37,38691,38692],{"class":39,"line":129},[37,38693,1194],{"class":43},[37,38695,38696],{"class":39,"line":171},[37,38697,1200],{"class":43},[1311,38699,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":38701},[38702,38703],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/godrays",{"title":38455,"description":38463},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":38710,"title":38711,"body":38712,"category":28983,"componentType":21062,"description":38719,"extension":1323,"meta":38974,"navigation":119,"path":38975,"requiresChild":119,"seo":38976,"stem":38977,"__hash__":38978},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":38713,"toc":38971},[38714,38717,38720,38722,38724,38969],[11,38715,38711],{"id":38716},"grayscale",[15,38718,38719],{},"Convert colors to black and white",[27113,38721],{"component":38711},[1202,38723,27125],{"id":27124},[23,38725,38726,38771,38815,38859,38903],{":tabs":25},[27,38727,38729],{"className":29,"code":38728,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[34,38730,38731,38739,38747,38755,38763],{"__ignoreMap":32},[37,38732,38733,38735,38737],{"class":39,"line":40},[37,38734,44],{"class":43},[37,38736,48],{"class":47},[37,38738,62],{"class":43},[37,38740,38741,38743,38745],{"class":39,"line":65},[37,38742,75],{"class":43},[37,38744,38711],{"class":47},[37,38746,62],{"class":43},[37,38748,38749,38751,38753],{"class":39,"line":72},[37,38750,174],{"class":43},[37,38752,3293],{"class":47},[37,38754,113],{"class":43},[37,38756,38757,38759,38761],{"class":39,"line":116},[37,38758,224],{"class":43},[37,38760,38711],{"class":47},[37,38762,62],{"class":43},[37,38764,38765,38767,38769],{"class":39,"line":123},[37,38766,273],{"class":43},[37,38768,48],{"class":47},[37,38770,62],{"class":43},[27,38772,38773],{"className":280,"code":38728,"language":282,"meta":32,"style":32},[34,38774,38775,38783,38791,38799,38807],{"__ignoreMap":32},[37,38776,38777,38779,38781],{"class":39,"line":40},[37,38778,44],{"class":43},[37,38780,48],{"class":291},[37,38782,62],{"class":43},[37,38784,38785,38787,38789],{"class":39,"line":65},[37,38786,75],{"class":43},[37,38788,38711],{"class":291},[37,38790,62],{"class":43},[37,38792,38793,38795,38797],{"class":39,"line":72},[37,38794,174],{"class":43},[37,38796,3293],{"class":291},[37,38798,113],{"class":43},[37,38800,38801,38803,38805],{"class":39,"line":116},[37,38802,224],{"class":43},[37,38804,38711],{"class":291},[37,38806,62],{"class":43},[37,38808,38809,38811,38813],{"class":39,"line":123},[37,38810,273],{"class":43},[37,38812,48],{"class":291},[37,38814,62],{"class":43},[27,38816,38817],{"className":3580,"code":38728,"language":3582,"meta":32,"style":32},[34,38818,38819,38827,38835,38843,38851],{"__ignoreMap":32},[37,38820,38821,38823,38825],{"class":39,"line":40},[37,38822,44],{"class":43},[37,38824,48],{"class":291},[37,38826,62],{"class":43},[37,38828,38829,38831,38833],{"class":39,"line":65},[37,38830,75],{"class":43},[37,38832,38711],{"class":291},[37,38834,62],{"class":43},[37,38836,38837,38839,38841],{"class":39,"line":72},[37,38838,174],{"class":43},[37,38840,3293],{"class":291},[37,38842,113],{"class":43},[37,38844,38845,38847,38849],{"class":39,"line":116},[37,38846,224],{"class":43},[37,38848,38711],{"class":291},[37,38850,62],{"class":43},[37,38852,38853,38855,38857],{"class":39,"line":123},[37,38854,273],{"class":43},[37,38856,48],{"class":291},[37,38858,62],{"class":43},[27,38860,38861],{"className":543,"code":38728,"language":545,"meta":32,"style":32},[34,38862,38863,38871,38879,38887,38895],{"__ignoreMap":32},[37,38864,38865,38867,38869],{"class":39,"line":40},[37,38866,44],{"class":43},[37,38868,48],{"class":291},[37,38870,62],{"class":43},[37,38872,38873,38875,38877],{"class":39,"line":65},[37,38874,75],{"class":43},[37,38876,38711],{"class":291},[37,38878,62],{"class":43},[37,38880,38881,38883,38885],{"class":39,"line":72},[37,38882,174],{"class":43},[37,38884,3293],{"class":291},[37,38886,113],{"class":43},[37,38888,38889,38891,38893],{"class":39,"line":116},[37,38890,224],{"class":43},[37,38892,38711],{"class":291},[37,38894,62],{"class":43},[37,38896,38897,38899,38901],{"class":39,"line":123},[37,38898,273],{"class":43},[37,38900,48],{"class":291},[37,38902,62],{"class":43},[27,38904,38906],{"className":987,"code":38905,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Grayscale', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,38907,38908,38918,38922,38936,38940,38949,38957,38961,38965],{"__ignoreMap":32},[37,38909,38910,38912,38914,38916],{"class":39,"line":40},[37,38911,1382],{"class":297},[37,38913,9444],{"class":43},[37,38915,1388],{"class":297},[37,38917,9449],{"class":58},[37,38919,38920],{"class":39,"line":65},[37,38921,120],{"emptyLinePlaceholder":119},[37,38923,38924,38926,38928,38930,38932,38934],{"class":39,"line":72},[37,38925,2809],{"class":297},[37,38927,2812],{"class":291},[37,38929,2815],{"class":297},[37,38931,2818],{"class":297},[37,38933,999],{"class":51},[37,38935,1002],{"class":43},[37,38937,38938],{"class":39,"line":116},[37,38939,1007],{"class":43},[37,38941,38942,38944,38947],{"class":39,"line":123},[37,38943,1017],{"class":43},[37,38945,38946],{"class":58},"'Grayscale'",[37,38948,4944],{"class":43},[37,38950,38951,38953,38955],{"class":39,"line":129},[37,38952,4949],{"class":43},[37,38954,3941],{"class":58},[37,38956,3207],{"class":43},[37,38958,38959],{"class":39,"line":171},[37,38960,4966],{"class":43},[37,38962,38963],{"class":39,"line":221},[37,38964,1194],{"class":43},[37,38966,38967],{"class":39,"line":231},[37,38968,1200],{"class":43},[1311,38970,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":38972},[38973],{"id":27124,"depth":65,"text":27125},{},"/docs/components/grayscale",{"title":38711,"description":38719},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":38980,"title":38981,"body":38982,"category":27972,"componentType":21056,"description":38989,"extension":1323,"meta":39219,"navigation":119,"path":39220,"requiresChild":27975,"seo":39221,"stem":39222,"__hash__":39223},"components/docs/components/Grid.md","Grid",{"type":8,"value":38983,"toc":39215},[38984,38987,38990,38992,38994,38997,38999,39213],[11,38985,38981],{"id":38986},"grid",[15,38988,38989],{},"Simple grid lines pattern with adjustable thickness and rotation",[27113,38991],{"component":38981},[1202,38993,27117],{"id":21717},[27119,38995],{":props":38996},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the grid lines\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of cells along the shortest canvas edge (creates square cells)\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Thickness of grid lines (normalized, 0.0-1.0)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the grid in degrees. At 45° this produces a crosshatch/diamond pattern.\"}]",[1202,38998,27125],{"id":27124},[23,39000,39001,39041,39079,39117,39155],{":tabs":25},[27,39002,39004],{"className":29,"code":39003,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[34,39005,39006,39014,39021,39029,39033],{"__ignoreMap":32},[37,39007,39008,39010,39012],{"class":39,"line":40},[37,39009,44],{"class":43},[37,39011,48],{"class":47},[37,39013,62],{"class":43},[37,39015,39016,39018],{"class":39,"line":65},[37,39017,75],{"class":43},[37,39019,39020],{"class":47},"Grid\n",[37,39022,39023,39025,39027],{"class":39,"line":72},[37,39024,7570],{"class":51},[37,39026,55],{"class":43},[37,39028,7526],{"class":58},[37,39030,39031],{"class":39,"line":116},[37,39032,2314],{"class":43},[37,39034,39035,39037,39039],{"class":39,"line":123},[37,39036,273],{"class":43},[37,39038,48],{"class":47},[37,39040,62],{"class":43},[27,39042,39043],{"className":280,"code":39003,"language":282,"meta":32,"style":32},[34,39044,39045,39053,39059,39067,39071],{"__ignoreMap":32},[37,39046,39047,39049,39051],{"class":39,"line":40},[37,39048,44],{"class":43},[37,39050,48],{"class":291},[37,39052,62],{"class":43},[37,39054,39055,39057],{"class":39,"line":65},[37,39056,75],{"class":43},[37,39058,39020],{"class":291},[37,39060,39061,39063,39065],{"class":39,"line":72},[37,39062,7570],{"class":51},[37,39064,55],{"class":297},[37,39066,7526],{"class":58},[37,39068,39069],{"class":39,"line":116},[37,39070,2314],{"class":43},[37,39072,39073,39075,39077],{"class":39,"line":123},[37,39074,273],{"class":43},[37,39076,48],{"class":291},[37,39078,62],{"class":43},[27,39080,39081],{"className":3580,"code":39003,"language":3582,"meta":32,"style":32},[34,39082,39083,39091,39097,39105,39109],{"__ignoreMap":32},[37,39084,39085,39087,39089],{"class":39,"line":40},[37,39086,44],{"class":43},[37,39088,48],{"class":291},[37,39090,62],{"class":43},[37,39092,39093,39095],{"class":39,"line":65},[37,39094,75],{"class":43},[37,39096,39020],{"class":291},[37,39098,39099,39101,39103],{"class":39,"line":72},[37,39100,7570],{"class":51},[37,39102,55],{"class":43},[37,39104,7526],{"class":58},[37,39106,39107],{"class":39,"line":116},[37,39108,2314],{"class":43},[37,39110,39111,39113,39115],{"class":39,"line":123},[37,39112,273],{"class":43},[37,39114,48],{"class":291},[37,39116,62],{"class":43},[27,39118,39119],{"className":543,"code":39003,"language":545,"meta":32,"style":32},[34,39120,39121,39129,39135,39143,39147],{"__ignoreMap":32},[37,39122,39123,39125,39127],{"class":39,"line":40},[37,39124,44],{"class":43},[37,39126,48],{"class":291},[37,39128,62],{"class":43},[37,39130,39131,39133],{"class":39,"line":65},[37,39132,75],{"class":43},[37,39134,39020],{"class":291},[37,39136,39137,39139,39141],{"class":39,"line":72},[37,39138,7570],{"class":51},[37,39140,55],{"class":297},[37,39142,7526],{"class":58},[37,39144,39145],{"class":39,"line":116},[37,39146,2314],{"class":43},[37,39148,39149,39151,39153],{"class":39,"line":123},[37,39150,273],{"class":43},[37,39152,48],{"class":291},[37,39154,62],{"class":43},[27,39156,39158],{"className":987,"code":39157,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Grid', props: { color: '#ffffff' } }\n ]\n})\n",[34,39159,39160,39170,39174,39188,39192,39205,39209],{"__ignoreMap":32},[37,39161,39162,39164,39166,39168],{"class":39,"line":40},[37,39163,1382],{"class":297},[37,39165,9444],{"class":43},[37,39167,1388],{"class":297},[37,39169,9449],{"class":58},[37,39171,39172],{"class":39,"line":65},[37,39173,120],{"emptyLinePlaceholder":119},[37,39175,39176,39178,39180,39182,39184,39186],{"class":39,"line":72},[37,39177,2809],{"class":297},[37,39179,2812],{"class":291},[37,39181,2815],{"class":297},[37,39183,2818],{"class":297},[37,39185,999],{"class":51},[37,39187,1002],{"class":43},[37,39189,39190],{"class":39,"line":116},[37,39191,1007],{"class":43},[37,39193,39194,39196,39199,39201,39203],{"class":39,"line":123},[37,39195,1017],{"class":43},[37,39197,39198],{"class":58},"'Grid'",[37,39200,2845],{"class":43},[37,39202,8101],{"class":58},[37,39204,1142],{"class":43},[37,39206,39207],{"class":39,"line":129},[37,39208,1194],{"class":43},[37,39210,39211],{"class":39,"line":171},[37,39212,1200],{"class":43},[1311,39214,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":39216},[39217,39218],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/grid",{"title":38981,"description":38989},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":39225,"title":5030,"body":39226,"category":30373,"componentType":21062,"description":39233,"extension":1323,"meta":39595,"navigation":119,"path":39596,"requiresChild":119,"seo":39597,"stem":39598,"__hash__":39599},"components/docs/components/GridDistortion.md",{"type":8,"value":39227,"toc":39591},[39228,39231,39234,39236,39238,39241,39243,39589],[11,39229,5030],{"id":39230},"griddistortion",[15,39232,39233],{},"Interactive grid distortion controlled by mouse position",[27113,39235],{"component":5030},[1202,39237,27117],{"id":21717},[27119,39239],{":props":39240},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the distortion effect\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Rate of distortion decay (higher = faster)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Radius of the distortion effect\"},{\"name\":\"gridSize\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Resolution of the distortion grid (higher = more detailed)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,39242,27125],{"id":27124},[23,39244,39245,39309,39380,39446,39516],{":tabs":25},[27,39246,39248],{"className":29,"code":39247,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGridDistortion\n :intensity=\"1\"\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/GridDistortion>\n\u003C/Shader>\n",[34,39249,39250,39258,39265,39273,39281,39285,39293,39301],{"__ignoreMap":32},[37,39251,39252,39254,39256],{"class":39,"line":40},[37,39253,44],{"class":43},[37,39255,48],{"class":47},[37,39257,62],{"class":43},[37,39259,39260,39262],{"class":39,"line":65},[37,39261,75],{"class":43},[37,39263,39264],{"class":47},"GridDistortion\n",[37,39266,39267,39269,39271],{"class":39,"line":72},[37,39268,18081],{"class":51},[37,39270,55],{"class":43},[37,39272,29039],{"class":58},[37,39274,39275,39277,39279],{"class":39,"line":116},[37,39276,15113],{"class":51},[37,39278,55],{"class":43},[37,39280,29039],{"class":58},[37,39282,39283],{"class":39,"line":123},[37,39284,27161],{"class":43},[37,39286,39287,39289,39291],{"class":39,"line":129},[37,39288,174],{"class":43},[37,39290,3293],{"class":47},[37,39292,113],{"class":43},[37,39294,39295,39297,39299],{"class":39,"line":171},[37,39296,224],{"class":43},[37,39298,5030],{"class":47},[37,39300,62],{"class":43},[37,39302,39303,39305,39307],{"class":39,"line":221},[37,39304,273],{"class":43},[37,39306,48],{"class":47},[37,39308,62],{"class":43},[27,39310,39312],{"className":280,"code":39311,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CGridDistortion\n intensity={1}\n radius={1}\n >\n \u003CCircle />\n \u003C/GridDistortion>\n\u003C/Shader>\n",[34,39313,39314,39322,39328,39340,39352,39356,39364,39372],{"__ignoreMap":32},[37,39315,39316,39318,39320],{"class":39,"line":40},[37,39317,44],{"class":43},[37,39319,48],{"class":291},[37,39321,62],{"class":43},[37,39323,39324,39326],{"class":39,"line":65},[37,39325,75],{"class":43},[37,39327,39264],{"class":291},[37,39329,39330,39332,39334,39336,39338],{"class":39,"line":72},[37,39331,18192],{"class":51},[37,39333,55],{"class":297},[37,39335,326],{"class":43},[37,39337,6614],{"class":291},[37,39339,312],{"class":43},[37,39341,39342,39344,39346,39348,39350],{"class":39,"line":116},[37,39343,7580],{"class":51},[37,39345,55],{"class":297},[37,39347,326],{"class":43},[37,39349,6614],{"class":291},[37,39351,312],{"class":43},[37,39353,39354],{"class":39,"line":123},[37,39355,27161],{"class":43},[37,39357,39358,39360,39362],{"class":39,"line":129},[37,39359,174],{"class":43},[37,39361,3293],{"class":291},[37,39363,113],{"class":43},[37,39365,39366,39368,39370],{"class":39,"line":171},[37,39367,224],{"class":43},[37,39369,5030],{"class":291},[37,39371,62],{"class":43},[37,39373,39374,39376,39378],{"class":39,"line":221},[37,39375,273],{"class":43},[37,39377,48],{"class":291},[37,39379,62],{"class":43},[27,39381,39382],{"className":3580,"code":39311,"language":3582,"meta":32,"style":32},[34,39383,39384,39392,39398,39408,39418,39422,39430,39438],{"__ignoreMap":32},[37,39385,39386,39388,39390],{"class":39,"line":40},[37,39387,44],{"class":43},[37,39389,48],{"class":291},[37,39391,62],{"class":43},[37,39393,39394,39396],{"class":39,"line":65},[37,39395,75],{"class":43},[37,39397,39264],{"class":291},[37,39399,39400,39402,39404,39406],{"class":39,"line":72},[37,39401,18192],{"class":51},[37,39403,25058],{"class":43},[37,39405,6614],{"class":291},[37,39407,312],{"class":43},[37,39409,39410,39412,39414,39416],{"class":39,"line":116},[37,39411,7580],{"class":51},[37,39413,25058],{"class":43},[37,39415,6614],{"class":291},[37,39417,312],{"class":43},[37,39419,39420],{"class":39,"line":123},[37,39421,27161],{"class":43},[37,39423,39424,39426,39428],{"class":39,"line":129},[37,39425,174],{"class":43},[37,39427,3293],{"class":291},[37,39429,113],{"class":43},[37,39431,39432,39434,39436],{"class":39,"line":171},[37,39433,224],{"class":43},[37,39435,5030],{"class":291},[37,39437,62],{"class":43},[37,39439,39440,39442,39444],{"class":39,"line":221},[37,39441,273],{"class":43},[37,39443,48],{"class":291},[37,39445,62],{"class":43},[27,39447,39448],{"className":543,"code":39311,"language":545,"meta":32,"style":32},[34,39449,39450,39458,39464,39476,39488,39492,39500,39508],{"__ignoreMap":32},[37,39451,39452,39454,39456],{"class":39,"line":40},[37,39453,44],{"class":43},[37,39455,48],{"class":291},[37,39457,62],{"class":43},[37,39459,39460,39462],{"class":39,"line":65},[37,39461,75],{"class":43},[37,39463,39264],{"class":291},[37,39465,39466,39468,39470,39472,39474],{"class":39,"line":72},[37,39467,18192],{"class":51},[37,39469,55],{"class":297},[37,39471,326],{"class":43},[37,39473,6614],{"class":291},[37,39475,312],{"class":43},[37,39477,39478,39480,39482,39484,39486],{"class":39,"line":116},[37,39479,7580],{"class":51},[37,39481,55],{"class":297},[37,39483,326],{"class":43},[37,39485,6614],{"class":291},[37,39487,312],{"class":43},[37,39489,39490],{"class":39,"line":123},[37,39491,27161],{"class":43},[37,39493,39494,39496,39498],{"class":39,"line":129},[37,39495,174],{"class":43},[37,39497,3293],{"class":291},[37,39499,113],{"class":43},[37,39501,39502,39504,39506],{"class":39,"line":171},[37,39503,224],{"class":43},[37,39505,5030],{"class":291},[37,39507,62],{"class":43},[37,39509,39510,39512,39514],{"class":39,"line":221},[37,39511,273],{"class":43},[37,39513,48],{"class":291},[37,39515,62],{"class":43},[27,39517,39519],{"className":987,"code":39518,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'GridDistortion', props: { intensity: 1, radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,39520,39521,39531,39535,39549,39553,39569,39577,39581,39585],{"__ignoreMap":32},[37,39522,39523,39525,39527,39529],{"class":39,"line":40},[37,39524,1382],{"class":297},[37,39526,9444],{"class":43},[37,39528,1388],{"class":297},[37,39530,9449],{"class":58},[37,39532,39533],{"class":39,"line":65},[37,39534,120],{"emptyLinePlaceholder":119},[37,39536,39537,39539,39541,39543,39545,39547],{"class":39,"line":72},[37,39538,2809],{"class":297},[37,39540,2812],{"class":291},[37,39542,2815],{"class":297},[37,39544,2818],{"class":297},[37,39546,999],{"class":51},[37,39548,1002],{"class":43},[37,39550,39551],{"class":39,"line":116},[37,39552,1007],{"class":43},[37,39554,39555,39557,39559,39561,39563,39565,39567],{"class":39,"line":123},[37,39556,1017],{"class":43},[37,39558,5474],{"class":58},[37,39560,27406],{"class":43},[37,39562,6614],{"class":291},[37,39564,4501],{"class":43},[37,39566,6614],{"class":291},[37,39568,5482],{"class":43},[37,39570,39571,39573,39575],{"class":39,"line":129},[37,39572,4949],{"class":43},[37,39574,3941],{"class":58},[37,39576,3207],{"class":43},[37,39578,39579],{"class":39,"line":171},[37,39580,4966],{"class":43},[37,39582,39583],{"class":39,"line":221},[37,39584,1194],{"class":43},[37,39586,39587],{"class":39,"line":231},[37,39588,1200],{"class":43},[1311,39590,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":39592},[39593,39594],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/griddistortion",{"title":5030,"description":39233},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":39601,"title":39602,"body":39603,"category":39865,"componentType":21062,"description":39610,"extension":1323,"meta":39866,"navigation":119,"path":39867,"requiresChild":119,"seo":39868,"stem":39869,"__hash__":39870},"components/docs/components/Group.md","Group",{"type":8,"value":39604,"toc":39862},[39605,39608,39611,39613,39615,39860],[11,39606,39602],{"id":39607},"group",[15,39609,39610],{},"Container for organizing and composing child effects",[27113,39612],{"component":39602},[1202,39614,27125],{"id":27124},[23,39616,39617,39662,39706,39750,39794],{":tabs":25},[27,39618,39620],{"className":29,"code":39619,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[34,39621,39622,39630,39638,39646,39654],{"__ignoreMap":32},[37,39623,39624,39626,39628],{"class":39,"line":40},[37,39625,44],{"class":43},[37,39627,48],{"class":47},[37,39629,62],{"class":43},[37,39631,39632,39634,39636],{"class":39,"line":65},[37,39633,75],{"class":43},[37,39635,39602],{"class":47},[37,39637,62],{"class":43},[37,39639,39640,39642,39644],{"class":39,"line":72},[37,39641,174],{"class":43},[37,39643,3293],{"class":47},[37,39645,113],{"class":43},[37,39647,39648,39650,39652],{"class":39,"line":116},[37,39649,224],{"class":43},[37,39651,39602],{"class":47},[37,39653,62],{"class":43},[37,39655,39656,39658,39660],{"class":39,"line":123},[37,39657,273],{"class":43},[37,39659,48],{"class":47},[37,39661,62],{"class":43},[27,39663,39664],{"className":280,"code":39619,"language":282,"meta":32,"style":32},[34,39665,39666,39674,39682,39690,39698],{"__ignoreMap":32},[37,39667,39668,39670,39672],{"class":39,"line":40},[37,39669,44],{"class":43},[37,39671,48],{"class":291},[37,39673,62],{"class":43},[37,39675,39676,39678,39680],{"class":39,"line":65},[37,39677,75],{"class":43},[37,39679,39602],{"class":291},[37,39681,62],{"class":43},[37,39683,39684,39686,39688],{"class":39,"line":72},[37,39685,174],{"class":43},[37,39687,3293],{"class":291},[37,39689,113],{"class":43},[37,39691,39692,39694,39696],{"class":39,"line":116},[37,39693,224],{"class":43},[37,39695,39602],{"class":291},[37,39697,62],{"class":43},[37,39699,39700,39702,39704],{"class":39,"line":123},[37,39701,273],{"class":43},[37,39703,48],{"class":291},[37,39705,62],{"class":43},[27,39707,39708],{"className":3580,"code":39619,"language":3582,"meta":32,"style":32},[34,39709,39710,39718,39726,39734,39742],{"__ignoreMap":32},[37,39711,39712,39714,39716],{"class":39,"line":40},[37,39713,44],{"class":43},[37,39715,48],{"class":291},[37,39717,62],{"class":43},[37,39719,39720,39722,39724],{"class":39,"line":65},[37,39721,75],{"class":43},[37,39723,39602],{"class":291},[37,39725,62],{"class":43},[37,39727,39728,39730,39732],{"class":39,"line":72},[37,39729,174],{"class":43},[37,39731,3293],{"class":291},[37,39733,113],{"class":43},[37,39735,39736,39738,39740],{"class":39,"line":116},[37,39737,224],{"class":43},[37,39739,39602],{"class":291},[37,39741,62],{"class":43},[37,39743,39744,39746,39748],{"class":39,"line":123},[37,39745,273],{"class":43},[37,39747,48],{"class":291},[37,39749,62],{"class":43},[27,39751,39752],{"className":543,"code":39619,"language":545,"meta":32,"style":32},[34,39753,39754,39762,39770,39778,39786],{"__ignoreMap":32},[37,39755,39756,39758,39760],{"class":39,"line":40},[37,39757,44],{"class":43},[37,39759,48],{"class":291},[37,39761,62],{"class":43},[37,39763,39764,39766,39768],{"class":39,"line":65},[37,39765,75],{"class":43},[37,39767,39602],{"class":291},[37,39769,62],{"class":43},[37,39771,39772,39774,39776],{"class":39,"line":72},[37,39773,174],{"class":43},[37,39775,3293],{"class":291},[37,39777,113],{"class":43},[37,39779,39780,39782,39784],{"class":39,"line":116},[37,39781,224],{"class":43},[37,39783,39602],{"class":291},[37,39785,62],{"class":43},[37,39787,39788,39790,39792],{"class":39,"line":123},[37,39789,273],{"class":43},[37,39791,48],{"class":291},[37,39793,62],{"class":43},[27,39795,39797],{"className":987,"code":39796,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Group', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,39798,39799,39809,39813,39827,39831,39840,39848,39852,39856],{"__ignoreMap":32},[37,39800,39801,39803,39805,39807],{"class":39,"line":40},[37,39802,1382],{"class":297},[37,39804,9444],{"class":43},[37,39806,1388],{"class":297},[37,39808,9449],{"class":58},[37,39810,39811],{"class":39,"line":65},[37,39812,120],{"emptyLinePlaceholder":119},[37,39814,39815,39817,39819,39821,39823,39825],{"class":39,"line":72},[37,39816,2809],{"class":297},[37,39818,2812],{"class":291},[37,39820,2815],{"class":297},[37,39822,2818],{"class":297},[37,39824,999],{"class":51},[37,39826,1002],{"class":43},[37,39828,39829],{"class":39,"line":116},[37,39830,1007],{"class":43},[37,39832,39833,39835,39838],{"class":39,"line":123},[37,39834,1017],{"class":43},[37,39836,39837],{"class":58},"'Group'",[37,39839,4944],{"class":43},[37,39841,39842,39844,39846],{"class":39,"line":129},[37,39843,4949],{"class":43},[37,39845,3941],{"class":58},[37,39847,3207],{"class":43},[37,39849,39850],{"class":39,"line":171},[37,39851,4966],{"class":43},[37,39853,39854],{"class":39,"line":221},[37,39855,1194],{"class":43},[37,39857,39858],{"class":39,"line":231},[37,39859,1200],{"class":43},[1311,39861,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":39863},[39864],{"id":27124,"depth":65,"text":27125},"Utilities",{},"/docs/components/group",{"title":39602,"description":39610},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":39872,"title":5074,"body":39873,"category":27715,"componentType":21062,"description":39880,"extension":1323,"meta":40141,"navigation":119,"path":40142,"requiresChild":119,"seo":40143,"stem":40144,"__hash__":40145},"components/docs/components/Halftone.md",{"type":8,"value":39874,"toc":40137},[39875,39878,39881,39883,39885,39888,39890,40135],[11,39876,5074],{"id":39877},"halftone",[15,39879,39880],{},"Halftone dot pattern effect for printing aesthetics",[27113,39882],{"component":5074},[1202,39884,27117],{"id":21717},[27119,39886],{":props":39887},"[{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"100\",\"description\":\"Frequency of the halftone dots\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"45\",\"description\":\"Rotation angle of the pattern (in degrees)\"},{\"name\":\"smoothness\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Edge smoothness of the dots\"}]",[1202,39889,27125],{"id":27124},[23,39891,39892,39937,39981,40025,40069],{":tabs":25},[27,39893,39895],{"className":29,"code":39894,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[34,39896,39897,39905,39913,39921,39929],{"__ignoreMap":32},[37,39898,39899,39901,39903],{"class":39,"line":40},[37,39900,44],{"class":43},[37,39902,48],{"class":47},[37,39904,62],{"class":43},[37,39906,39907,39909,39911],{"class":39,"line":65},[37,39908,75],{"class":43},[37,39910,5074],{"class":47},[37,39912,62],{"class":43},[37,39914,39915,39917,39919],{"class":39,"line":72},[37,39916,174],{"class":43},[37,39918,3293],{"class":47},[37,39920,113],{"class":43},[37,39922,39923,39925,39927],{"class":39,"line":116},[37,39924,224],{"class":43},[37,39926,5074],{"class":47},[37,39928,62],{"class":43},[37,39930,39931,39933,39935],{"class":39,"line":123},[37,39932,273],{"class":43},[37,39934,48],{"class":47},[37,39936,62],{"class":43},[27,39938,39939],{"className":280,"code":39894,"language":282,"meta":32,"style":32},[34,39940,39941,39949,39957,39965,39973],{"__ignoreMap":32},[37,39942,39943,39945,39947],{"class":39,"line":40},[37,39944,44],{"class":43},[37,39946,48],{"class":291},[37,39948,62],{"class":43},[37,39950,39951,39953,39955],{"class":39,"line":65},[37,39952,75],{"class":43},[37,39954,5074],{"class":291},[37,39956,62],{"class":43},[37,39958,39959,39961,39963],{"class":39,"line":72},[37,39960,174],{"class":43},[37,39962,3293],{"class":291},[37,39964,113],{"class":43},[37,39966,39967,39969,39971],{"class":39,"line":116},[37,39968,224],{"class":43},[37,39970,5074],{"class":291},[37,39972,62],{"class":43},[37,39974,39975,39977,39979],{"class":39,"line":123},[37,39976,273],{"class":43},[37,39978,48],{"class":291},[37,39980,62],{"class":43},[27,39982,39983],{"className":3580,"code":39894,"language":3582,"meta":32,"style":32},[34,39984,39985,39993,40001,40009,40017],{"__ignoreMap":32},[37,39986,39987,39989,39991],{"class":39,"line":40},[37,39988,44],{"class":43},[37,39990,48],{"class":291},[37,39992,62],{"class":43},[37,39994,39995,39997,39999],{"class":39,"line":65},[37,39996,75],{"class":43},[37,39998,5074],{"class":291},[37,40000,62],{"class":43},[37,40002,40003,40005,40007],{"class":39,"line":72},[37,40004,174],{"class":43},[37,40006,3293],{"class":291},[37,40008,113],{"class":43},[37,40010,40011,40013,40015],{"class":39,"line":116},[37,40012,224],{"class":43},[37,40014,5074],{"class":291},[37,40016,62],{"class":43},[37,40018,40019,40021,40023],{"class":39,"line":123},[37,40020,273],{"class":43},[37,40022,48],{"class":291},[37,40024,62],{"class":43},[27,40026,40027],{"className":543,"code":39894,"language":545,"meta":32,"style":32},[34,40028,40029,40037,40045,40053,40061],{"__ignoreMap":32},[37,40030,40031,40033,40035],{"class":39,"line":40},[37,40032,44],{"class":43},[37,40034,48],{"class":291},[37,40036,62],{"class":43},[37,40038,40039,40041,40043],{"class":39,"line":65},[37,40040,75],{"class":43},[37,40042,5074],{"class":291},[37,40044,62],{"class":43},[37,40046,40047,40049,40051],{"class":39,"line":72},[37,40048,174],{"class":43},[37,40050,3293],{"class":291},[37,40052,113],{"class":43},[37,40054,40055,40057,40059],{"class":39,"line":116},[37,40056,224],{"class":43},[37,40058,5074],{"class":291},[37,40060,62],{"class":43},[37,40062,40063,40065,40067],{"class":39,"line":123},[37,40064,273],{"class":43},[37,40066,48],{"class":291},[37,40068,62],{"class":43},[27,40070,40072],{"className":987,"code":40071,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Halftone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,40073,40074,40084,40088,40102,40106,40115,40123,40127,40131],{"__ignoreMap":32},[37,40075,40076,40078,40080,40082],{"class":39,"line":40},[37,40077,1382],{"class":297},[37,40079,9444],{"class":43},[37,40081,1388],{"class":297},[37,40083,9449],{"class":58},[37,40085,40086],{"class":39,"line":65},[37,40087,120],{"emptyLinePlaceholder":119},[37,40089,40090,40092,40094,40096,40098,40100],{"class":39,"line":72},[37,40091,2809],{"class":297},[37,40093,2812],{"class":291},[37,40095,2815],{"class":297},[37,40097,2818],{"class":297},[37,40099,999],{"class":51},[37,40101,1002],{"class":43},[37,40103,40104],{"class":39,"line":116},[37,40105,1007],{"class":43},[37,40107,40108,40110,40113],{"class":39,"line":123},[37,40109,1017],{"class":43},[37,40111,40112],{"class":58},"'Halftone'",[37,40114,4944],{"class":43},[37,40116,40117,40119,40121],{"class":39,"line":129},[37,40118,4949],{"class":43},[37,40120,3941],{"class":58},[37,40122,3207],{"class":43},[37,40124,40125],{"class":39,"line":171},[37,40126,4966],{"class":43},[37,40128,40129],{"class":39,"line":221},[37,40130,1194],{"class":43},[37,40132,40133],{"class":39,"line":231},[37,40134,1200],{"class":43},[1311,40136,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":40138},[40139,40140],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/halftone",{"title":5074,"description":39880},"docs/components/Halftone","FE9bbvMNDaNzrmALJi6cgBqUj0aRisbj-Tjo1odmRlE",{"id":40147,"title":40148,"body":40149,"category":27972,"componentType":21056,"description":40156,"extension":1323,"meta":40341,"navigation":119,"path":40342,"requiresChild":27975,"seo":40343,"stem":40344,"__hash__":40345},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":40150,"toc":40337},[40151,40154,40157,40159,40161,40164,40166,40335],[11,40152,40148],{"id":40153},"hexgrid",[15,40155,40156],{},"Honeycomb hexagonal grid pattern",[27113,40158],{"component":40148},[1202,40160,27117],{"id":21717},[27119,40162],{":props":40163},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Cell fill color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Grid line color\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of hexagons across the shortest canvas edge\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Thickness of the hex grid lines\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,40165,27125],{"id":27124},[23,40167,40168,40197,40225,40253,40281],{":tabs":25},[27,40169,40171],{"className":29,"code":40170,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[34,40172,40173,40181,40189],{"__ignoreMap":32},[37,40174,40175,40177,40179],{"class":39,"line":40},[37,40176,44],{"class":43},[37,40178,48],{"class":47},[37,40180,62],{"class":43},[37,40182,40183,40185,40187],{"class":39,"line":65},[37,40184,75],{"class":43},[37,40186,40148],{"class":47},[37,40188,113],{"class":43},[37,40190,40191,40193,40195],{"class":39,"line":72},[37,40192,273],{"class":43},[37,40194,48],{"class":47},[37,40196,62],{"class":43},[27,40198,40199],{"className":280,"code":40170,"language":282,"meta":32,"style":32},[34,40200,40201,40209,40217],{"__ignoreMap":32},[37,40202,40203,40205,40207],{"class":39,"line":40},[37,40204,44],{"class":43},[37,40206,48],{"class":291},[37,40208,62],{"class":43},[37,40210,40211,40213,40215],{"class":39,"line":65},[37,40212,75],{"class":43},[37,40214,40148],{"class":291},[37,40216,113],{"class":43},[37,40218,40219,40221,40223],{"class":39,"line":72},[37,40220,273],{"class":43},[37,40222,48],{"class":291},[37,40224,62],{"class":43},[27,40226,40227],{"className":3580,"code":40170,"language":3582,"meta":32,"style":32},[34,40228,40229,40237,40245],{"__ignoreMap":32},[37,40230,40231,40233,40235],{"class":39,"line":40},[37,40232,44],{"class":43},[37,40234,48],{"class":291},[37,40236,62],{"class":43},[37,40238,40239,40241,40243],{"class":39,"line":65},[37,40240,75],{"class":43},[37,40242,40148],{"class":291},[37,40244,113],{"class":43},[37,40246,40247,40249,40251],{"class":39,"line":72},[37,40248,273],{"class":43},[37,40250,48],{"class":291},[37,40252,62],{"class":43},[27,40254,40255],{"className":543,"code":40170,"language":545,"meta":32,"style":32},[34,40256,40257,40265,40273],{"__ignoreMap":32},[37,40258,40259,40261,40263],{"class":39,"line":40},[37,40260,44],{"class":43},[37,40262,48],{"class":291},[37,40264,62],{"class":43},[37,40266,40267,40269,40271],{"class":39,"line":65},[37,40268,75],{"class":43},[37,40270,40148],{"class":291},[37,40272,113],{"class":43},[37,40274,40275,40277,40279],{"class":39,"line":72},[37,40276,273],{"class":43},[37,40278,48],{"class":291},[37,40280,62],{"class":43},[27,40282,40284],{"className":987,"code":40283,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HexGrid', props: {} }\n ]\n})\n",[34,40285,40286,40296,40300,40314,40318,40327,40331],{"__ignoreMap":32},[37,40287,40288,40290,40292,40294],{"class":39,"line":40},[37,40289,1382],{"class":297},[37,40291,9444],{"class":43},[37,40293,1388],{"class":297},[37,40295,9449],{"class":58},[37,40297,40298],{"class":39,"line":65},[37,40299,120],{"emptyLinePlaceholder":119},[37,40301,40302,40304,40306,40308,40310,40312],{"class":39,"line":72},[37,40303,2809],{"class":297},[37,40305,2812],{"class":291},[37,40307,2815],{"class":297},[37,40309,2818],{"class":297},[37,40311,999],{"class":51},[37,40313,1002],{"class":43},[37,40315,40316],{"class":39,"line":116},[37,40317,1007],{"class":43},[37,40319,40320,40322,40325],{"class":39,"line":123},[37,40321,1017],{"class":43},[37,40323,40324],{"class":58},"'HexGrid'",[37,40326,3207],{"class":43},[37,40328,40329],{"class":39,"line":129},[37,40330,1194],{"class":43},[37,40332,40333],{"class":39,"line":171},[37,40334,1200],{"class":43},[1311,40336,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":40338},[40339,40340],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/hexgrid",{"title":40148,"description":40156},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":40347,"title":40348,"body":40349,"category":28983,"componentType":21062,"description":40356,"extension":1323,"meta":40617,"navigation":119,"path":40618,"requiresChild":119,"seo":40619,"stem":40620,"__hash__":40621},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":40350,"toc":40613},[40351,40354,40357,40359,40361,40364,40366,40611],[11,40352,40348],{"id":40353},"hueshift",[15,40355,40356],{},"Rotate hue around the color wheel",[27113,40358],{"component":40348},[1202,40360,27117],{"id":21717},[27119,40362],{":props":40363},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[1202,40365,27125],{"id":27124},[23,40367,40368,40413,40457,40501,40545],{":tabs":25},[27,40369,40371],{"className":29,"code":40370,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[34,40372,40373,40381,40389,40397,40405],{"__ignoreMap":32},[37,40374,40375,40377,40379],{"class":39,"line":40},[37,40376,44],{"class":43},[37,40378,48],{"class":47},[37,40380,62],{"class":43},[37,40382,40383,40385,40387],{"class":39,"line":65},[37,40384,75],{"class":43},[37,40386,40348],{"class":47},[37,40388,62],{"class":43},[37,40390,40391,40393,40395],{"class":39,"line":72},[37,40392,174],{"class":43},[37,40394,3293],{"class":47},[37,40396,113],{"class":43},[37,40398,40399,40401,40403],{"class":39,"line":116},[37,40400,224],{"class":43},[37,40402,40348],{"class":47},[37,40404,62],{"class":43},[37,40406,40407,40409,40411],{"class":39,"line":123},[37,40408,273],{"class":43},[37,40410,48],{"class":47},[37,40412,62],{"class":43},[27,40414,40415],{"className":280,"code":40370,"language":282,"meta":32,"style":32},[34,40416,40417,40425,40433,40441,40449],{"__ignoreMap":32},[37,40418,40419,40421,40423],{"class":39,"line":40},[37,40420,44],{"class":43},[37,40422,48],{"class":291},[37,40424,62],{"class":43},[37,40426,40427,40429,40431],{"class":39,"line":65},[37,40428,75],{"class":43},[37,40430,40348],{"class":291},[37,40432,62],{"class":43},[37,40434,40435,40437,40439],{"class":39,"line":72},[37,40436,174],{"class":43},[37,40438,3293],{"class":291},[37,40440,113],{"class":43},[37,40442,40443,40445,40447],{"class":39,"line":116},[37,40444,224],{"class":43},[37,40446,40348],{"class":291},[37,40448,62],{"class":43},[37,40450,40451,40453,40455],{"class":39,"line":123},[37,40452,273],{"class":43},[37,40454,48],{"class":291},[37,40456,62],{"class":43},[27,40458,40459],{"className":3580,"code":40370,"language":3582,"meta":32,"style":32},[34,40460,40461,40469,40477,40485,40493],{"__ignoreMap":32},[37,40462,40463,40465,40467],{"class":39,"line":40},[37,40464,44],{"class":43},[37,40466,48],{"class":291},[37,40468,62],{"class":43},[37,40470,40471,40473,40475],{"class":39,"line":65},[37,40472,75],{"class":43},[37,40474,40348],{"class":291},[37,40476,62],{"class":43},[37,40478,40479,40481,40483],{"class":39,"line":72},[37,40480,174],{"class":43},[37,40482,3293],{"class":291},[37,40484,113],{"class":43},[37,40486,40487,40489,40491],{"class":39,"line":116},[37,40488,224],{"class":43},[37,40490,40348],{"class":291},[37,40492,62],{"class":43},[37,40494,40495,40497,40499],{"class":39,"line":123},[37,40496,273],{"class":43},[37,40498,48],{"class":291},[37,40500,62],{"class":43},[27,40502,40503],{"className":543,"code":40370,"language":545,"meta":32,"style":32},[34,40504,40505,40513,40521,40529,40537],{"__ignoreMap":32},[37,40506,40507,40509,40511],{"class":39,"line":40},[37,40508,44],{"class":43},[37,40510,48],{"class":291},[37,40512,62],{"class":43},[37,40514,40515,40517,40519],{"class":39,"line":65},[37,40516,75],{"class":43},[37,40518,40348],{"class":291},[37,40520,62],{"class":43},[37,40522,40523,40525,40527],{"class":39,"line":72},[37,40524,174],{"class":43},[37,40526,3293],{"class":291},[37,40528,113],{"class":43},[37,40530,40531,40533,40535],{"class":39,"line":116},[37,40532,224],{"class":43},[37,40534,40348],{"class":291},[37,40536,62],{"class":43},[37,40538,40539,40541,40543],{"class":39,"line":123},[37,40540,273],{"class":43},[37,40542,48],{"class":291},[37,40544,62],{"class":43},[27,40546,40548],{"className":987,"code":40547,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HueShift', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,40549,40550,40560,40564,40578,40582,40591,40599,40603,40607],{"__ignoreMap":32},[37,40551,40552,40554,40556,40558],{"class":39,"line":40},[37,40553,1382],{"class":297},[37,40555,9444],{"class":43},[37,40557,1388],{"class":297},[37,40559,9449],{"class":58},[37,40561,40562],{"class":39,"line":65},[37,40563,120],{"emptyLinePlaceholder":119},[37,40565,40566,40568,40570,40572,40574,40576],{"class":39,"line":72},[37,40567,2809],{"class":297},[37,40569,2812],{"class":291},[37,40571,2815],{"class":297},[37,40573,2818],{"class":297},[37,40575,999],{"class":51},[37,40577,1002],{"class":43},[37,40579,40580],{"class":39,"line":116},[37,40581,1007],{"class":43},[37,40583,40584,40586,40589],{"class":39,"line":123},[37,40585,1017],{"class":43},[37,40587,40588],{"class":58},"'HueShift'",[37,40590,4944],{"class":43},[37,40592,40593,40595,40597],{"class":39,"line":129},[37,40594,4949],{"class":43},[37,40596,3941],{"class":58},[37,40598,3207],{"class":43},[37,40600,40601],{"class":39,"line":171},[37,40602,4966],{"class":43},[37,40604,40605],{"class":39,"line":221},[37,40606,1194],{"class":43},[37,40608,40609],{"class":39,"line":231},[37,40610,1200],{"class":43},[1311,40612,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":40614},[40615,40616],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/hueshift",{"title":40348,"description":40356},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":40623,"title":40624,"body":40625,"category":27972,"componentType":21056,"description":40632,"extension":1323,"meta":40817,"navigation":119,"path":40818,"requiresChild":27975,"seo":40819,"stem":40820,"__hash__":40821},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":40626,"toc":40813},[40627,40630,40633,40635,40637,40640,40642,40811],[11,40628,40624],{"id":40629},"imagetexture",[15,40631,40632],{},"Display an image with customizable object-fit modes",[27113,40634],{"component":40624},[1202,40636,27117],{"id":21717},[27119,40638],{":props":40639},"[{\"name\":\"url\",\"type\":\"string\",\"default\":\"https://shaders.com/sample.jpg\",\"description\":\"Upload an image or provide a URL\"},{\"name\":\"objectFit\",\"type\":\"\\\"cover\\\" | \\\"contain\\\" | \\\"fill\\\" | \\\"scale-down\\\" | \\\"none\\\"\",\"default\":\"cover\",\"description\":\"How the image should be sized within the viewport\"}]",[1202,40641,27125],{"id":27124},[23,40643,40644,40673,40701,40729,40757],{":tabs":25},[27,40645,40647],{"className":29,"code":40646,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[34,40648,40649,40657,40665],{"__ignoreMap":32},[37,40650,40651,40653,40655],{"class":39,"line":40},[37,40652,44],{"class":43},[37,40654,48],{"class":47},[37,40656,62],{"class":43},[37,40658,40659,40661,40663],{"class":39,"line":65},[37,40660,75],{"class":43},[37,40662,40624],{"class":47},[37,40664,113],{"class":43},[37,40666,40667,40669,40671],{"class":39,"line":72},[37,40668,273],{"class":43},[37,40670,48],{"class":47},[37,40672,62],{"class":43},[27,40674,40675],{"className":280,"code":40646,"language":282,"meta":32,"style":32},[34,40676,40677,40685,40693],{"__ignoreMap":32},[37,40678,40679,40681,40683],{"class":39,"line":40},[37,40680,44],{"class":43},[37,40682,48],{"class":291},[37,40684,62],{"class":43},[37,40686,40687,40689,40691],{"class":39,"line":65},[37,40688,75],{"class":43},[37,40690,40624],{"class":291},[37,40692,113],{"class":43},[37,40694,40695,40697,40699],{"class":39,"line":72},[37,40696,273],{"class":43},[37,40698,48],{"class":291},[37,40700,62],{"class":43},[27,40702,40703],{"className":3580,"code":40646,"language":3582,"meta":32,"style":32},[34,40704,40705,40713,40721],{"__ignoreMap":32},[37,40706,40707,40709,40711],{"class":39,"line":40},[37,40708,44],{"class":43},[37,40710,48],{"class":291},[37,40712,62],{"class":43},[37,40714,40715,40717,40719],{"class":39,"line":65},[37,40716,75],{"class":43},[37,40718,40624],{"class":291},[37,40720,113],{"class":43},[37,40722,40723,40725,40727],{"class":39,"line":72},[37,40724,273],{"class":43},[37,40726,48],{"class":291},[37,40728,62],{"class":43},[27,40730,40731],{"className":543,"code":40646,"language":545,"meta":32,"style":32},[34,40732,40733,40741,40749],{"__ignoreMap":32},[37,40734,40735,40737,40739],{"class":39,"line":40},[37,40736,44],{"class":43},[37,40738,48],{"class":291},[37,40740,62],{"class":43},[37,40742,40743,40745,40747],{"class":39,"line":65},[37,40744,75],{"class":43},[37,40746,40624],{"class":291},[37,40748,113],{"class":43},[37,40750,40751,40753,40755],{"class":39,"line":72},[37,40752,273],{"class":43},[37,40754,48],{"class":291},[37,40756,62],{"class":43},[27,40758,40760],{"className":987,"code":40759,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ImageTexture', props: {} }\n ]\n})\n",[34,40761,40762,40772,40776,40790,40794,40803,40807],{"__ignoreMap":32},[37,40763,40764,40766,40768,40770],{"class":39,"line":40},[37,40765,1382],{"class":297},[37,40767,9444],{"class":43},[37,40769,1388],{"class":297},[37,40771,9449],{"class":58},[37,40773,40774],{"class":39,"line":65},[37,40775,120],{"emptyLinePlaceholder":119},[37,40777,40778,40780,40782,40784,40786,40788],{"class":39,"line":72},[37,40779,2809],{"class":297},[37,40781,2812],{"class":291},[37,40783,2815],{"class":297},[37,40785,2818],{"class":297},[37,40787,999],{"class":51},[37,40789,1002],{"class":43},[37,40791,40792],{"class":39,"line":116},[37,40793,1007],{"class":43},[37,40795,40796,40798,40801],{"class":39,"line":123},[37,40797,1017],{"class":43},[37,40799,40800],{"class":58},"'ImageTexture'",[37,40802,3207],{"class":43},[37,40804,40805],{"class":39,"line":129},[37,40806,1194],{"class":43},[37,40808,40809],{"class":39,"line":171},[37,40810,1200],{"class":43},[1311,40812,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":40814},[40815,40816],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/imagetexture",{"title":40624,"description":40632},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":40823,"title":40824,"body":40825,"category":28983,"componentType":21062,"description":40832,"extension":1323,"meta":41087,"navigation":119,"path":41088,"requiresChild":119,"seo":41089,"stem":41090,"__hash__":41091},"components/docs/components/Invert.md","Invert",{"type":8,"value":40826,"toc":41084},[40827,40830,40833,40835,40837,41082],[11,40828,40824],{"id":40829},"invert",[15,40831,40832],{},"Invert RGB colors while preserving alpha",[27113,40834],{"component":40824},[1202,40836,27125],{"id":27124},[23,40838,40839,40884,40928,40972,41016],{":tabs":25},[27,40840,40842],{"className":29,"code":40841,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[34,40843,40844,40852,40860,40868,40876],{"__ignoreMap":32},[37,40845,40846,40848,40850],{"class":39,"line":40},[37,40847,44],{"class":43},[37,40849,48],{"class":47},[37,40851,62],{"class":43},[37,40853,40854,40856,40858],{"class":39,"line":65},[37,40855,75],{"class":43},[37,40857,40824],{"class":47},[37,40859,62],{"class":43},[37,40861,40862,40864,40866],{"class":39,"line":72},[37,40863,174],{"class":43},[37,40865,3293],{"class":47},[37,40867,113],{"class":43},[37,40869,40870,40872,40874],{"class":39,"line":116},[37,40871,224],{"class":43},[37,40873,40824],{"class":47},[37,40875,62],{"class":43},[37,40877,40878,40880,40882],{"class":39,"line":123},[37,40879,273],{"class":43},[37,40881,48],{"class":47},[37,40883,62],{"class":43},[27,40885,40886],{"className":280,"code":40841,"language":282,"meta":32,"style":32},[34,40887,40888,40896,40904,40912,40920],{"__ignoreMap":32},[37,40889,40890,40892,40894],{"class":39,"line":40},[37,40891,44],{"class":43},[37,40893,48],{"class":291},[37,40895,62],{"class":43},[37,40897,40898,40900,40902],{"class":39,"line":65},[37,40899,75],{"class":43},[37,40901,40824],{"class":291},[37,40903,62],{"class":43},[37,40905,40906,40908,40910],{"class":39,"line":72},[37,40907,174],{"class":43},[37,40909,3293],{"class":291},[37,40911,113],{"class":43},[37,40913,40914,40916,40918],{"class":39,"line":116},[37,40915,224],{"class":43},[37,40917,40824],{"class":291},[37,40919,62],{"class":43},[37,40921,40922,40924,40926],{"class":39,"line":123},[37,40923,273],{"class":43},[37,40925,48],{"class":291},[37,40927,62],{"class":43},[27,40929,40930],{"className":3580,"code":40841,"language":3582,"meta":32,"style":32},[34,40931,40932,40940,40948,40956,40964],{"__ignoreMap":32},[37,40933,40934,40936,40938],{"class":39,"line":40},[37,40935,44],{"class":43},[37,40937,48],{"class":291},[37,40939,62],{"class":43},[37,40941,40942,40944,40946],{"class":39,"line":65},[37,40943,75],{"class":43},[37,40945,40824],{"class":291},[37,40947,62],{"class":43},[37,40949,40950,40952,40954],{"class":39,"line":72},[37,40951,174],{"class":43},[37,40953,3293],{"class":291},[37,40955,113],{"class":43},[37,40957,40958,40960,40962],{"class":39,"line":116},[37,40959,224],{"class":43},[37,40961,40824],{"class":291},[37,40963,62],{"class":43},[37,40965,40966,40968,40970],{"class":39,"line":123},[37,40967,273],{"class":43},[37,40969,48],{"class":291},[37,40971,62],{"class":43},[27,40973,40974],{"className":543,"code":40841,"language":545,"meta":32,"style":32},[34,40975,40976,40984,40992,41000,41008],{"__ignoreMap":32},[37,40977,40978,40980,40982],{"class":39,"line":40},[37,40979,44],{"class":43},[37,40981,48],{"class":291},[37,40983,62],{"class":43},[37,40985,40986,40988,40990],{"class":39,"line":65},[37,40987,75],{"class":43},[37,40989,40824],{"class":291},[37,40991,62],{"class":43},[37,40993,40994,40996,40998],{"class":39,"line":72},[37,40995,174],{"class":43},[37,40997,3293],{"class":291},[37,40999,113],{"class":43},[37,41001,41002,41004,41006],{"class":39,"line":116},[37,41003,224],{"class":43},[37,41005,40824],{"class":291},[37,41007,62],{"class":43},[37,41009,41010,41012,41014],{"class":39,"line":123},[37,41011,273],{"class":43},[37,41013,48],{"class":291},[37,41015,62],{"class":43},[27,41017,41019],{"className":987,"code":41018,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Invert', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,41020,41021,41031,41035,41049,41053,41062,41070,41074,41078],{"__ignoreMap":32},[37,41022,41023,41025,41027,41029],{"class":39,"line":40},[37,41024,1382],{"class":297},[37,41026,9444],{"class":43},[37,41028,1388],{"class":297},[37,41030,9449],{"class":58},[37,41032,41033],{"class":39,"line":65},[37,41034,120],{"emptyLinePlaceholder":119},[37,41036,41037,41039,41041,41043,41045,41047],{"class":39,"line":72},[37,41038,2809],{"class":297},[37,41040,2812],{"class":291},[37,41042,2815],{"class":297},[37,41044,2818],{"class":297},[37,41046,999],{"class":51},[37,41048,1002],{"class":43},[37,41050,41051],{"class":39,"line":116},[37,41052,1007],{"class":43},[37,41054,41055,41057,41060],{"class":39,"line":123},[37,41056,1017],{"class":43},[37,41058,41059],{"class":58},"'Invert'",[37,41061,4944],{"class":43},[37,41063,41064,41066,41068],{"class":39,"line":129},[37,41065,4949],{"class":43},[37,41067,3941],{"class":58},[37,41069,3207],{"class":43},[37,41071,41072],{"class":39,"line":171},[37,41073,4966],{"class":43},[37,41075,41076],{"class":39,"line":221},[37,41077,1194],{"class":43},[37,41079,41080],{"class":39,"line":231},[37,41081,1200],{"class":43},[1311,41083,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":41085},[41086],{"id":27124,"depth":65,"text":27125},{},"/docs/components/invert",{"title":40824,"description":40832},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":41093,"title":41094,"body":41095,"category":29317,"componentType":21062,"description":41102,"extension":1323,"meta":41363,"navigation":119,"path":41364,"requiresChild":119,"seo":41365,"stem":41366,"__hash__":41367},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":41096,"toc":41359},[41097,41100,41103,41105,41107,41110,41112,41357],[11,41098,41094],{"id":41099},"kaleidoscope",[15,41101,41102],{},"Create a kaleidoscope effect with radial mirrored segments",[27113,41104],{"component":41094},[1202,41106,27117],{"id":21717},[27119,41108],{":props":41109},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the kaleidoscope effect\"},{\"name\":\"segments\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of radial segments in the kaleidoscope\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation offset for the entire kaleidoscope pattern\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,41111,27125],{"id":27124},[23,41113,41114,41159,41203,41247,41291],{":tabs":25},[27,41115,41117],{"className":29,"code":41116,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[34,41118,41119,41127,41135,41143,41151],{"__ignoreMap":32},[37,41120,41121,41123,41125],{"class":39,"line":40},[37,41122,44],{"class":43},[37,41124,48],{"class":47},[37,41126,62],{"class":43},[37,41128,41129,41131,41133],{"class":39,"line":65},[37,41130,75],{"class":43},[37,41132,41094],{"class":47},[37,41134,62],{"class":43},[37,41136,41137,41139,41141],{"class":39,"line":72},[37,41138,174],{"class":43},[37,41140,3293],{"class":47},[37,41142,113],{"class":43},[37,41144,41145,41147,41149],{"class":39,"line":116},[37,41146,224],{"class":43},[37,41148,41094],{"class":47},[37,41150,62],{"class":43},[37,41152,41153,41155,41157],{"class":39,"line":123},[37,41154,273],{"class":43},[37,41156,48],{"class":47},[37,41158,62],{"class":43},[27,41160,41161],{"className":280,"code":41116,"language":282,"meta":32,"style":32},[34,41162,41163,41171,41179,41187,41195],{"__ignoreMap":32},[37,41164,41165,41167,41169],{"class":39,"line":40},[37,41166,44],{"class":43},[37,41168,48],{"class":291},[37,41170,62],{"class":43},[37,41172,41173,41175,41177],{"class":39,"line":65},[37,41174,75],{"class":43},[37,41176,41094],{"class":291},[37,41178,62],{"class":43},[37,41180,41181,41183,41185],{"class":39,"line":72},[37,41182,174],{"class":43},[37,41184,3293],{"class":291},[37,41186,113],{"class":43},[37,41188,41189,41191,41193],{"class":39,"line":116},[37,41190,224],{"class":43},[37,41192,41094],{"class":291},[37,41194,62],{"class":43},[37,41196,41197,41199,41201],{"class":39,"line":123},[37,41198,273],{"class":43},[37,41200,48],{"class":291},[37,41202,62],{"class":43},[27,41204,41205],{"className":3580,"code":41116,"language":3582,"meta":32,"style":32},[34,41206,41207,41215,41223,41231,41239],{"__ignoreMap":32},[37,41208,41209,41211,41213],{"class":39,"line":40},[37,41210,44],{"class":43},[37,41212,48],{"class":291},[37,41214,62],{"class":43},[37,41216,41217,41219,41221],{"class":39,"line":65},[37,41218,75],{"class":43},[37,41220,41094],{"class":291},[37,41222,62],{"class":43},[37,41224,41225,41227,41229],{"class":39,"line":72},[37,41226,174],{"class":43},[37,41228,3293],{"class":291},[37,41230,113],{"class":43},[37,41232,41233,41235,41237],{"class":39,"line":116},[37,41234,224],{"class":43},[37,41236,41094],{"class":291},[37,41238,62],{"class":43},[37,41240,41241,41243,41245],{"class":39,"line":123},[37,41242,273],{"class":43},[37,41244,48],{"class":291},[37,41246,62],{"class":43},[27,41248,41249],{"className":543,"code":41116,"language":545,"meta":32,"style":32},[34,41250,41251,41259,41267,41275,41283],{"__ignoreMap":32},[37,41252,41253,41255,41257],{"class":39,"line":40},[37,41254,44],{"class":43},[37,41256,48],{"class":291},[37,41258,62],{"class":43},[37,41260,41261,41263,41265],{"class":39,"line":65},[37,41262,75],{"class":43},[37,41264,41094],{"class":291},[37,41266,62],{"class":43},[37,41268,41269,41271,41273],{"class":39,"line":72},[37,41270,174],{"class":43},[37,41272,3293],{"class":291},[37,41274,113],{"class":43},[37,41276,41277,41279,41281],{"class":39,"line":116},[37,41278,224],{"class":43},[37,41280,41094],{"class":291},[37,41282,62],{"class":43},[37,41284,41285,41287,41289],{"class":39,"line":123},[37,41286,273],{"class":43},[37,41288,48],{"class":291},[37,41290,62],{"class":43},[27,41292,41294],{"className":987,"code":41293,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Kaleidoscope', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,41295,41296,41306,41310,41324,41328,41337,41345,41349,41353],{"__ignoreMap":32},[37,41297,41298,41300,41302,41304],{"class":39,"line":40},[37,41299,1382],{"class":297},[37,41301,9444],{"class":43},[37,41303,1388],{"class":297},[37,41305,9449],{"class":58},[37,41307,41308],{"class":39,"line":65},[37,41309,120],{"emptyLinePlaceholder":119},[37,41311,41312,41314,41316,41318,41320,41322],{"class":39,"line":72},[37,41313,2809],{"class":297},[37,41315,2812],{"class":291},[37,41317,2815],{"class":297},[37,41319,2818],{"class":297},[37,41321,999],{"class":51},[37,41323,1002],{"class":43},[37,41325,41326],{"class":39,"line":116},[37,41327,1007],{"class":43},[37,41329,41330,41332,41335],{"class":39,"line":123},[37,41331,1017],{"class":43},[37,41333,41334],{"class":58},"'Kaleidoscope'",[37,41336,4944],{"class":43},[37,41338,41339,41341,41343],{"class":39,"line":129},[37,41340,4949],{"class":43},[37,41342,3941],{"class":58},[37,41344,3207],{"class":43},[37,41346,41347],{"class":39,"line":171},[37,41348,4966],{"class":43},[37,41350,41351],{"class":39,"line":221},[37,41352,1194],{"class":43},[37,41354,41355],{"class":39,"line":231},[37,41356,1200],{"class":43},[1311,41358,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":41360},[41361,41362],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/kaleidoscope",{"title":41094,"description":41102},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":41369,"title":41370,"body":41371,"category":27715,"componentType":21056,"description":41378,"extension":1323,"meta":41618,"navigation":119,"path":41619,"requiresChild":27975,"seo":41620,"stem":41621,"__hash__":41622},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":41372,"toc":41614},[41373,41376,41379,41381,41383,41386,41388,41612],[11,41374,41370],{"id":41375},"lensflare",[15,41377,41378],{},"Realistic camera lens flare with artifacts.",[27113,41380],{"component":41370},[1202,41382,27117],{"id":21717},[27119,41384],{":props":41385},"[{\"name\":\"lightPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.3,\\\"y\\\":0.3}\",\"description\":\"Position of the light source\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Master brightness of the entire lens flare effect\"},{\"name\":\"ghostIntensity\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Brightness of internal reflection ghost discs along the flare axis\"},{\"name\":\"ghostSpread\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Spacing between ghost reflections along the flare axis\"},{\"name\":\"ghostChroma\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Rainbow chromatic fringing around ghost element edges\"},{\"name\":\"haloIntensity\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Brightness of the circular halo ring from internal reflection\"},{\"name\":\"haloRadius\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Radius of the halo ring\"},{\"name\":\"haloChroma\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Spectral dispersion on the halo creating rainbow color separation\"},{\"name\":\"haloSoftness\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Thickness and softness of the halo ring\"},{\"name\":\"starburstIntensity\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Brightness of diffraction spikes radiating from the light source\"},{\"name\":\"starburstPoints\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of starburst spikes (simulates aperture blade count)\"},{\"name\":\"streakIntensity\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Brightness of horizontal anamorphic light streak\"},{\"name\":\"streakLength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Horizontal extent of the anamorphic streak\"},{\"name\":\"glareIntensity\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Soft veiling glare that washes out contrast around the light\"},{\"name\":\"glareSize\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Size of the soft glare glow\"},{\"name\":\"edgeFade\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How much the flare fades when the light source is near the screen edge (0 = no fade, 1 = heavy fade)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Speed of subtle flare shimmer and starburst rotation\"}]",[1202,41387,27125],{"id":27124},[23,41389,41390,41429,41472,41512,41554],{":tabs":25},[27,41391,41393],{"className":29,"code":41392,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[34,41394,41395,41403,41409,41417,41421],{"__ignoreMap":32},[37,41396,41397,41399,41401],{"class":39,"line":40},[37,41398,44],{"class":43},[37,41400,48],{"class":47},[37,41402,62],{"class":43},[37,41404,41405,41407],{"class":39,"line":65},[37,41406,75],{"class":43},[37,41408,18067],{"class":47},[37,41410,41411,41413,41415],{"class":39,"line":72},[37,41412,18081],{"class":51},[37,41414,55],{"class":43},[37,41416,32674],{"class":58},[37,41418,41419],{"class":39,"line":116},[37,41420,2314],{"class":43},[37,41422,41423,41425,41427],{"class":39,"line":123},[37,41424,273],{"class":43},[37,41426,48],{"class":47},[37,41428,62],{"class":43},[27,41430,41432],{"className":280,"code":41431,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[34,41433,41434,41442,41448,41460,41464],{"__ignoreMap":32},[37,41435,41436,41438,41440],{"class":39,"line":40},[37,41437,44],{"class":43},[37,41439,48],{"class":291},[37,41441,62],{"class":43},[37,41443,41444,41446],{"class":39,"line":65},[37,41445,75],{"class":43},[37,41447,18067],{"class":291},[37,41449,41450,41452,41454,41456,41458],{"class":39,"line":72},[37,41451,18192],{"class":51},[37,41453,55],{"class":297},[37,41455,326],{"class":43},[37,41457,5689],{"class":291},[37,41459,312],{"class":43},[37,41461,41462],{"class":39,"line":116},[37,41463,2314],{"class":43},[37,41465,41466,41468,41470],{"class":39,"line":123},[37,41467,273],{"class":43},[37,41469,48],{"class":291},[37,41471,62],{"class":43},[27,41473,41474],{"className":3580,"code":41431,"language":3582,"meta":32,"style":32},[34,41475,41476,41484,41490,41500,41504],{"__ignoreMap":32},[37,41477,41478,41480,41482],{"class":39,"line":40},[37,41479,44],{"class":43},[37,41481,48],{"class":291},[37,41483,62],{"class":43},[37,41485,41486,41488],{"class":39,"line":65},[37,41487,75],{"class":43},[37,41489,18067],{"class":291},[37,41491,41492,41494,41496,41498],{"class":39,"line":72},[37,41493,18192],{"class":51},[37,41495,25058],{"class":43},[37,41497,5689],{"class":291},[37,41499,312],{"class":43},[37,41501,41502],{"class":39,"line":116},[37,41503,2314],{"class":43},[37,41505,41506,41508,41510],{"class":39,"line":123},[37,41507,273],{"class":43},[37,41509,48],{"class":291},[37,41511,62],{"class":43},[27,41513,41514],{"className":543,"code":41431,"language":545,"meta":32,"style":32},[34,41515,41516,41524,41530,41542,41546],{"__ignoreMap":32},[37,41517,41518,41520,41522],{"class":39,"line":40},[37,41519,44],{"class":43},[37,41521,48],{"class":291},[37,41523,62],{"class":43},[37,41525,41526,41528],{"class":39,"line":65},[37,41527,75],{"class":43},[37,41529,18067],{"class":291},[37,41531,41532,41534,41536,41538,41540],{"class":39,"line":72},[37,41533,18192],{"class":51},[37,41535,55],{"class":297},[37,41537,326],{"class":43},[37,41539,5689],{"class":291},[37,41541,312],{"class":43},[37,41543,41544],{"class":39,"line":116},[37,41545,2314],{"class":43},[37,41547,41548,41550,41552],{"class":39,"line":123},[37,41549,273],{"class":43},[37,41551,48],{"class":291},[37,41553,62],{"class":43},[27,41555,41557],{"className":987,"code":41556,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LensFlare', props: { intensity: 0.5 } }\n ]\n})\n",[34,41558,41559,41569,41573,41587,41591,41604,41608],{"__ignoreMap":32},[37,41560,41561,41563,41565,41567],{"class":39,"line":40},[37,41562,1382],{"class":297},[37,41564,9444],{"class":43},[37,41566,1388],{"class":297},[37,41568,9449],{"class":58},[37,41570,41571],{"class":39,"line":65},[37,41572,120],{"emptyLinePlaceholder":119},[37,41574,41575,41577,41579,41581,41583,41585],{"class":39,"line":72},[37,41576,2809],{"class":297},[37,41578,2812],{"class":291},[37,41580,2815],{"class":297},[37,41582,2818],{"class":297},[37,41584,999],{"class":51},[37,41586,1002],{"class":43},[37,41588,41589],{"class":39,"line":116},[37,41590,1007],{"class":43},[37,41592,41593,41595,41598,41600,41602],{"class":39,"line":123},[37,41594,1017],{"class":43},[37,41596,41597],{"class":58},"'LensFlare'",[37,41599,27406],{"class":43},[37,41601,5689],{"class":291},[37,41603,1142],{"class":43},[37,41605,41606],{"class":39,"line":129},[37,41607,1194],{"class":43},[37,41609,41610],{"class":39,"line":171},[37,41611,1200],{"class":43},[1311,41613,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":41615},[41616,41617],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/lensflare",{"title":41370,"description":41378},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":41624,"title":41625,"body":41626,"category":27437,"componentType":21062,"description":41633,"extension":1323,"meta":41950,"navigation":119,"path":41951,"requiresChild":119,"seo":41952,"stem":41953,"__hash__":41954},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":41627,"toc":41946},[41628,41631,41634,41636,41638,41641,41643,41944],[11,41629,41625],{"id":41630},"linearblur",[15,41632,41633],{},"Directional motion blur in a specific angle",[27113,41635],{"component":41625},[1202,41637,27117],{"id":21717},[27119,41639],{":props":41640},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Intensity of the linear blur effect\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the linear blur (in degrees)\"}]",[1202,41642,27125],{"id":27124},[23,41644,41645,41701,41760,41816,41874],{":tabs":25},[27,41646,41648],{"className":29,"code":41647,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[34,41649,41650,41658,41665,41673,41677,41685,41693],{"__ignoreMap":32},[37,41651,41652,41654,41656],{"class":39,"line":40},[37,41653,44],{"class":43},[37,41655,48],{"class":47},[37,41657,62],{"class":43},[37,41659,41660,41662],{"class":39,"line":65},[37,41661,75],{"class":43},[37,41663,41664],{"class":47},"LinearBlur\n",[37,41666,41667,41669,41671],{"class":39,"line":72},[37,41668,18081],{"class":51},[37,41670,55],{"class":43},[37,41672,33500],{"class":58},[37,41674,41675],{"class":39,"line":116},[37,41676,27161],{"class":43},[37,41678,41679,41681,41683],{"class":39,"line":123},[37,41680,174],{"class":43},[37,41682,3293],{"class":47},[37,41684,113],{"class":43},[37,41686,41687,41689,41691],{"class":39,"line":129},[37,41688,224],{"class":43},[37,41690,41625],{"class":47},[37,41692,62],{"class":43},[37,41694,41695,41697,41699],{"class":39,"line":171},[37,41696,273],{"class":43},[37,41698,48],{"class":47},[37,41700,62],{"class":43},[27,41702,41704],{"className":280,"code":41703,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[34,41705,41706,41714,41720,41732,41736,41744,41752],{"__ignoreMap":32},[37,41707,41708,41710,41712],{"class":39,"line":40},[37,41709,44],{"class":43},[37,41711,48],{"class":291},[37,41713,62],{"class":43},[37,41715,41716,41718],{"class":39,"line":65},[37,41717,75],{"class":43},[37,41719,41664],{"class":291},[37,41721,41722,41724,41726,41728,41730],{"class":39,"line":72},[37,41723,18192],{"class":51},[37,41725,55],{"class":297},[37,41727,326],{"class":43},[37,41729,13407],{"class":291},[37,41731,312],{"class":43},[37,41733,41734],{"class":39,"line":116},[37,41735,27161],{"class":43},[37,41737,41738,41740,41742],{"class":39,"line":123},[37,41739,174],{"class":43},[37,41741,3293],{"class":291},[37,41743,113],{"class":43},[37,41745,41746,41748,41750],{"class":39,"line":129},[37,41747,224],{"class":43},[37,41749,41625],{"class":291},[37,41751,62],{"class":43},[37,41753,41754,41756,41758],{"class":39,"line":171},[37,41755,273],{"class":43},[37,41757,48],{"class":291},[37,41759,62],{"class":43},[27,41761,41762],{"className":3580,"code":41703,"language":3582,"meta":32,"style":32},[34,41763,41764,41772,41778,41788,41792,41800,41808],{"__ignoreMap":32},[37,41765,41766,41768,41770],{"class":39,"line":40},[37,41767,44],{"class":43},[37,41769,48],{"class":291},[37,41771,62],{"class":43},[37,41773,41774,41776],{"class":39,"line":65},[37,41775,75],{"class":43},[37,41777,41664],{"class":291},[37,41779,41780,41782,41784,41786],{"class":39,"line":72},[37,41781,18192],{"class":51},[37,41783,25058],{"class":43},[37,41785,13407],{"class":291},[37,41787,312],{"class":43},[37,41789,41790],{"class":39,"line":116},[37,41791,27161],{"class":43},[37,41793,41794,41796,41798],{"class":39,"line":123},[37,41795,174],{"class":43},[37,41797,3293],{"class":291},[37,41799,113],{"class":43},[37,41801,41802,41804,41806],{"class":39,"line":129},[37,41803,224],{"class":43},[37,41805,41625],{"class":291},[37,41807,62],{"class":43},[37,41809,41810,41812,41814],{"class":39,"line":171},[37,41811,273],{"class":43},[37,41813,48],{"class":291},[37,41815,62],{"class":43},[27,41817,41818],{"className":543,"code":41703,"language":545,"meta":32,"style":32},[34,41819,41820,41828,41834,41846,41850,41858,41866],{"__ignoreMap":32},[37,41821,41822,41824,41826],{"class":39,"line":40},[37,41823,44],{"class":43},[37,41825,48],{"class":291},[37,41827,62],{"class":43},[37,41829,41830,41832],{"class":39,"line":65},[37,41831,75],{"class":43},[37,41833,41664],{"class":291},[37,41835,41836,41838,41840,41842,41844],{"class":39,"line":72},[37,41837,18192],{"class":51},[37,41839,55],{"class":297},[37,41841,326],{"class":43},[37,41843,13407],{"class":291},[37,41845,312],{"class":43},[37,41847,41848],{"class":39,"line":116},[37,41849,27161],{"class":43},[37,41851,41852,41854,41856],{"class":39,"line":123},[37,41853,174],{"class":43},[37,41855,3293],{"class":291},[37,41857,113],{"class":43},[37,41859,41860,41862,41864],{"class":39,"line":129},[37,41861,224],{"class":43},[37,41863,41625],{"class":291},[37,41865,62],{"class":43},[37,41867,41868,41870,41872],{"class":39,"line":171},[37,41869,273],{"class":43},[37,41871,48],{"class":291},[37,41873,62],{"class":43},[27,41875,41877],{"className":987,"code":41876,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,41878,41879,41889,41893,41907,41911,41924,41932,41936,41940],{"__ignoreMap":32},[37,41880,41881,41883,41885,41887],{"class":39,"line":40},[37,41882,1382],{"class":297},[37,41884,9444],{"class":43},[37,41886,1388],{"class":297},[37,41888,9449],{"class":58},[37,41890,41891],{"class":39,"line":65},[37,41892,120],{"emptyLinePlaceholder":119},[37,41894,41895,41897,41899,41901,41903,41905],{"class":39,"line":72},[37,41896,2809],{"class":297},[37,41898,2812],{"class":291},[37,41900,2815],{"class":297},[37,41902,2818],{"class":297},[37,41904,999],{"class":51},[37,41906,1002],{"class":43},[37,41908,41909],{"class":39,"line":116},[37,41910,1007],{"class":43},[37,41912,41913,41915,41918,41920,41922],{"class":39,"line":123},[37,41914,1017],{"class":43},[37,41916,41917],{"class":58},"'LinearBlur'",[37,41919,27406],{"class":43},[37,41921,13407],{"class":291},[37,41923,5482],{"class":43},[37,41925,41926,41928,41930],{"class":39,"line":129},[37,41927,4949],{"class":43},[37,41929,3941],{"class":58},[37,41931,3207],{"class":43},[37,41933,41934],{"class":39,"line":171},[37,41935,4966],{"class":43},[37,41937,41938],{"class":39,"line":221},[37,41939,1194],{"class":43},[37,41941,41942],{"class":39,"line":231},[37,41943,1200],{"class":43},[1311,41945,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":41947},[41948,41949],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/linearblur",{"title":41625,"description":41633},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":41956,"title":78,"body":41957,"category":27972,"componentType":21056,"description":41964,"extension":1323,"meta":42148,"navigation":119,"path":42149,"requiresChild":27975,"seo":42150,"stem":42151,"__hash__":42152},"components/docs/components/LinearGradient.md",{"type":8,"value":41958,"toc":42144},[41959,41962,41965,41967,41969,41972,41974,42142],[11,41960,78],{"id":41961},"lineargradient",[15,41963,41964],{},"Create smooth linear color gradients",[27113,41966],{"component":78},[1202,41968,27117],{"id":21717},[27119,41970],{":props":41971},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#1aff00\",\"description\":\"The starting color of the gradient\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#0000ff\",\"description\":\"The ending color of the gradient\"},{\"name\":\"start\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":0.5}\",\"description\":\"The starting point of the gradient\"},{\"name\":\"end\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":1,\\\"y\\\":0.5}\",\"description\":\"The ending point of the gradient\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Additional rotation angle of the gradient (in degrees)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle areas beyond the gradient endpoints\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,41973,27125],{"id":27124},[23,41975,41976,42005,42033,42061,42089],{":tabs":25},[27,41977,41979],{"className":29,"code":41978,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[34,41980,41981,41989,41997],{"__ignoreMap":32},[37,41982,41983,41985,41987],{"class":39,"line":40},[37,41984,44],{"class":43},[37,41986,48],{"class":47},[37,41988,62],{"class":43},[37,41990,41991,41993,41995],{"class":39,"line":65},[37,41992,75],{"class":43},[37,41994,78],{"class":47},[37,41996,113],{"class":43},[37,41998,41999,42001,42003],{"class":39,"line":72},[37,42000,273],{"class":43},[37,42002,48],{"class":47},[37,42004,62],{"class":43},[27,42006,42007],{"className":280,"code":41978,"language":282,"meta":32,"style":32},[34,42008,42009,42017,42025],{"__ignoreMap":32},[37,42010,42011,42013,42015],{"class":39,"line":40},[37,42012,44],{"class":43},[37,42014,48],{"class":291},[37,42016,62],{"class":43},[37,42018,42019,42021,42023],{"class":39,"line":65},[37,42020,75],{"class":43},[37,42022,78],{"class":291},[37,42024,113],{"class":43},[37,42026,42027,42029,42031],{"class":39,"line":72},[37,42028,273],{"class":43},[37,42030,48],{"class":291},[37,42032,62],{"class":43},[27,42034,42035],{"className":3580,"code":41978,"language":3582,"meta":32,"style":32},[34,42036,42037,42045,42053],{"__ignoreMap":32},[37,42038,42039,42041,42043],{"class":39,"line":40},[37,42040,44],{"class":43},[37,42042,48],{"class":291},[37,42044,62],{"class":43},[37,42046,42047,42049,42051],{"class":39,"line":65},[37,42048,75],{"class":43},[37,42050,78],{"class":291},[37,42052,113],{"class":43},[37,42054,42055,42057,42059],{"class":39,"line":72},[37,42056,273],{"class":43},[37,42058,48],{"class":291},[37,42060,62],{"class":43},[27,42062,42063],{"className":543,"code":41978,"language":545,"meta":32,"style":32},[34,42064,42065,42073,42081],{"__ignoreMap":32},[37,42066,42067,42069,42071],{"class":39,"line":40},[37,42068,44],{"class":43},[37,42070,48],{"class":291},[37,42072,62],{"class":43},[37,42074,42075,42077,42079],{"class":39,"line":65},[37,42076,75],{"class":43},[37,42078,78],{"class":291},[37,42080,113],{"class":43},[37,42082,42083,42085,42087],{"class":39,"line":72},[37,42084,273],{"class":43},[37,42086,48],{"class":291},[37,42088,62],{"class":43},[27,42090,42092],{"className":987,"code":42091,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[34,42093,42094,42104,42108,42122,42126,42134,42138],{"__ignoreMap":32},[37,42095,42096,42098,42100,42102],{"class":39,"line":40},[37,42097,1382],{"class":297},[37,42099,9444],{"class":43},[37,42101,1388],{"class":297},[37,42103,9449],{"class":58},[37,42105,42106],{"class":39,"line":65},[37,42107,120],{"emptyLinePlaceholder":119},[37,42109,42110,42112,42114,42116,42118,42120],{"class":39,"line":72},[37,42111,2809],{"class":297},[37,42113,2812],{"class":291},[37,42115,2815],{"class":297},[37,42117,2818],{"class":297},[37,42119,999],{"class":51},[37,42121,1002],{"class":43},[37,42123,42124],{"class":39,"line":116},[37,42125,1007],{"class":43},[37,42127,42128,42130,42132],{"class":39,"line":123},[37,42129,1017],{"class":43},[37,42131,1020],{"class":58},[37,42133,3207],{"class":43},[37,42135,42136],{"class":39,"line":129},[37,42137,1194],{"class":43},[37,42139,42140],{"class":39,"line":171},[37,42141,1200],{"class":43},[1311,42143,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":42145},[42146,42147],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/lineargradient",{"title":78,"description":41964},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":42154,"title":42155,"body":42156,"category":30373,"componentType":21062,"description":42163,"extension":1323,"meta":42526,"navigation":119,"path":42527,"requiresChild":119,"seo":42528,"stem":42529,"__hash__":42530},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":42157,"toc":42522},[42158,42161,42164,42166,42168,42171,42173,42520],[11,42159,42155],{"id":42160},"liquify",[15,42162,42163],{},"Liquid-like interactive deformation effect",[27113,42165],{"component":42155},[1202,42167,27117],{"id":21717},[27119,42169],{":props":42170},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Scale of the fabric displacement effect\"},{\"name\":\"stiffness\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Fabric rigidity (higher = stiffer canvas, lower = stretchy silk)\"},{\"name\":\"damping\",\"type\":\"number\",\"default\":\"3\",\"description\":\"How quickly fabric motion settles\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Cursor influence area\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,42172,27125],{"id":27124},[23,42174,42175,42239,42310,42376,42446],{":tabs":25},[27,42176,42178],{"className":29,"code":42177,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CLiquify\n :intensity=\"10\"\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Liquify>\n\u003C/Shader>\n",[34,42179,42180,42188,42195,42203,42211,42215,42223,42231],{"__ignoreMap":32},[37,42181,42182,42184,42186],{"class":39,"line":40},[37,42183,44],{"class":43},[37,42185,48],{"class":47},[37,42187,62],{"class":43},[37,42189,42190,42192],{"class":39,"line":65},[37,42191,75],{"class":43},[37,42193,42194],{"class":47},"Liquify\n",[37,42196,42197,42199,42201],{"class":39,"line":72},[37,42198,18081],{"class":51},[37,42200,55],{"class":43},[37,42202,32665],{"class":58},[37,42204,42205,42207,42209],{"class":39,"line":116},[37,42206,15113],{"class":51},[37,42208,55],{"class":43},[37,42210,29039],{"class":58},[37,42212,42213],{"class":39,"line":123},[37,42214,27161],{"class":43},[37,42216,42217,42219,42221],{"class":39,"line":129},[37,42218,174],{"class":43},[37,42220,3293],{"class":47},[37,42222,113],{"class":43},[37,42224,42225,42227,42229],{"class":39,"line":171},[37,42226,224],{"class":43},[37,42228,42155],{"class":47},[37,42230,62],{"class":43},[37,42232,42233,42235,42237],{"class":39,"line":221},[37,42234,273],{"class":43},[37,42236,48],{"class":47},[37,42238,62],{"class":43},[27,42240,42242],{"className":280,"code":42241,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CLiquify\n intensity={10}\n radius={1}\n >\n \u003CCircle />\n \u003C/Liquify>\n\u003C/Shader>\n",[34,42243,42244,42252,42258,42270,42282,42286,42294,42302],{"__ignoreMap":32},[37,42245,42246,42248,42250],{"class":39,"line":40},[37,42247,44],{"class":43},[37,42249,48],{"class":291},[37,42251,62],{"class":43},[37,42253,42254,42256],{"class":39,"line":65},[37,42255,75],{"class":43},[37,42257,42194],{"class":291},[37,42259,42260,42262,42264,42266,42268],{"class":39,"line":72},[37,42261,18192],{"class":51},[37,42263,55],{"class":297},[37,42265,326],{"class":43},[37,42267,32732],{"class":291},[37,42269,312],{"class":43},[37,42271,42272,42274,42276,42278,42280],{"class":39,"line":116},[37,42273,7580],{"class":51},[37,42275,55],{"class":297},[37,42277,326],{"class":43},[37,42279,6614],{"class":291},[37,42281,312],{"class":43},[37,42283,42284],{"class":39,"line":123},[37,42285,27161],{"class":43},[37,42287,42288,42290,42292],{"class":39,"line":129},[37,42289,174],{"class":43},[37,42291,3293],{"class":291},[37,42293,113],{"class":43},[37,42295,42296,42298,42300],{"class":39,"line":171},[37,42297,224],{"class":43},[37,42299,42155],{"class":291},[37,42301,62],{"class":43},[37,42303,42304,42306,42308],{"class":39,"line":221},[37,42305,273],{"class":43},[37,42307,48],{"class":291},[37,42309,62],{"class":43},[27,42311,42312],{"className":3580,"code":42241,"language":3582,"meta":32,"style":32},[34,42313,42314,42322,42328,42338,42348,42352,42360,42368],{"__ignoreMap":32},[37,42315,42316,42318,42320],{"class":39,"line":40},[37,42317,44],{"class":43},[37,42319,48],{"class":291},[37,42321,62],{"class":43},[37,42323,42324,42326],{"class":39,"line":65},[37,42325,75],{"class":43},[37,42327,42194],{"class":291},[37,42329,42330,42332,42334,42336],{"class":39,"line":72},[37,42331,18192],{"class":51},[37,42333,25058],{"class":43},[37,42335,32732],{"class":291},[37,42337,312],{"class":43},[37,42339,42340,42342,42344,42346],{"class":39,"line":116},[37,42341,7580],{"class":51},[37,42343,25058],{"class":43},[37,42345,6614],{"class":291},[37,42347,312],{"class":43},[37,42349,42350],{"class":39,"line":123},[37,42351,27161],{"class":43},[37,42353,42354,42356,42358],{"class":39,"line":129},[37,42355,174],{"class":43},[37,42357,3293],{"class":291},[37,42359,113],{"class":43},[37,42361,42362,42364,42366],{"class":39,"line":171},[37,42363,224],{"class":43},[37,42365,42155],{"class":291},[37,42367,62],{"class":43},[37,42369,42370,42372,42374],{"class":39,"line":221},[37,42371,273],{"class":43},[37,42373,48],{"class":291},[37,42375,62],{"class":43},[27,42377,42378],{"className":543,"code":42241,"language":545,"meta":32,"style":32},[34,42379,42380,42388,42394,42406,42418,42422,42430,42438],{"__ignoreMap":32},[37,42381,42382,42384,42386],{"class":39,"line":40},[37,42383,44],{"class":43},[37,42385,48],{"class":291},[37,42387,62],{"class":43},[37,42389,42390,42392],{"class":39,"line":65},[37,42391,75],{"class":43},[37,42393,42194],{"class":291},[37,42395,42396,42398,42400,42402,42404],{"class":39,"line":72},[37,42397,18192],{"class":51},[37,42399,55],{"class":297},[37,42401,326],{"class":43},[37,42403,32732],{"class":291},[37,42405,312],{"class":43},[37,42407,42408,42410,42412,42414,42416],{"class":39,"line":116},[37,42409,7580],{"class":51},[37,42411,55],{"class":297},[37,42413,326],{"class":43},[37,42415,6614],{"class":291},[37,42417,312],{"class":43},[37,42419,42420],{"class":39,"line":123},[37,42421,27161],{"class":43},[37,42423,42424,42426,42428],{"class":39,"line":129},[37,42425,174],{"class":43},[37,42427,3293],{"class":291},[37,42429,113],{"class":43},[37,42431,42432,42434,42436],{"class":39,"line":171},[37,42433,224],{"class":43},[37,42435,42155],{"class":291},[37,42437,62],{"class":43},[37,42439,42440,42442,42444],{"class":39,"line":221},[37,42441,273],{"class":43},[37,42443,48],{"class":291},[37,42445,62],{"class":43},[27,42447,42449],{"className":987,"code":42448,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Liquify', props: { intensity: 10, radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,42450,42451,42461,42465,42479,42483,42500,42508,42512,42516],{"__ignoreMap":32},[37,42452,42453,42455,42457,42459],{"class":39,"line":40},[37,42454,1382],{"class":297},[37,42456,9444],{"class":43},[37,42458,1388],{"class":297},[37,42460,9449],{"class":58},[37,42462,42463],{"class":39,"line":65},[37,42464,120],{"emptyLinePlaceholder":119},[37,42466,42467,42469,42471,42473,42475,42477],{"class":39,"line":72},[37,42468,2809],{"class":297},[37,42470,2812],{"class":291},[37,42472,2815],{"class":297},[37,42474,2818],{"class":297},[37,42476,999],{"class":51},[37,42478,1002],{"class":43},[37,42480,42481],{"class":39,"line":116},[37,42482,1007],{"class":43},[37,42484,42485,42487,42490,42492,42494,42496,42498],{"class":39,"line":123},[37,42486,1017],{"class":43},[37,42488,42489],{"class":58},"'Liquify'",[37,42491,27406],{"class":43},[37,42493,32732],{"class":291},[37,42495,4501],{"class":43},[37,42497,6614],{"class":291},[37,42499,5482],{"class":43},[37,42501,42502,42504,42506],{"class":39,"line":129},[37,42503,4949],{"class":43},[37,42505,3941],{"class":58},[37,42507,3207],{"class":43},[37,42509,42510],{"class":39,"line":171},[37,42511,4966],{"class":43},[37,42513,42514],{"class":39,"line":221},[37,42515,1194],{"class":43},[37,42517,42518],{"class":39,"line":231},[37,42519,1200],{"class":43},[1311,42521,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":42523},[42524,42525],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/liquify",{"title":42155,"description":42163},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":42532,"title":42533,"body":42534,"category":29317,"componentType":21062,"description":42540,"extension":1323,"meta":42801,"navigation":119,"path":42802,"requiresChild":119,"seo":42803,"stem":42804,"__hash__":42805},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":42535,"toc":42797},[42536,42538,42541,42543,42545,42548,42550,42795],[11,42537,42533],{"id":13868},[15,42539,42540],{},"Mirror content across a line defined by center point and angle",[27113,42542],{"component":42533},[1202,42544,27117],{"id":21717},[27119,42546],{":props":42547},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The point the mirror line passes through\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The angle of the mirror line in degrees\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,42549,27125],{"id":27124},[23,42551,42552,42597,42641,42685,42729],{":tabs":25},[27,42553,42555],{"className":29,"code":42554,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[34,42556,42557,42565,42573,42581,42589],{"__ignoreMap":32},[37,42558,42559,42561,42563],{"class":39,"line":40},[37,42560,44],{"class":43},[37,42562,48],{"class":47},[37,42564,62],{"class":43},[37,42566,42567,42569,42571],{"class":39,"line":65},[37,42568,75],{"class":43},[37,42570,42533],{"class":47},[37,42572,62],{"class":43},[37,42574,42575,42577,42579],{"class":39,"line":72},[37,42576,174],{"class":43},[37,42578,3293],{"class":47},[37,42580,113],{"class":43},[37,42582,42583,42585,42587],{"class":39,"line":116},[37,42584,224],{"class":43},[37,42586,42533],{"class":47},[37,42588,62],{"class":43},[37,42590,42591,42593,42595],{"class":39,"line":123},[37,42592,273],{"class":43},[37,42594,48],{"class":47},[37,42596,62],{"class":43},[27,42598,42599],{"className":280,"code":42554,"language":282,"meta":32,"style":32},[34,42600,42601,42609,42617,42625,42633],{"__ignoreMap":32},[37,42602,42603,42605,42607],{"class":39,"line":40},[37,42604,44],{"class":43},[37,42606,48],{"class":291},[37,42608,62],{"class":43},[37,42610,42611,42613,42615],{"class":39,"line":65},[37,42612,75],{"class":43},[37,42614,42533],{"class":291},[37,42616,62],{"class":43},[37,42618,42619,42621,42623],{"class":39,"line":72},[37,42620,174],{"class":43},[37,42622,3293],{"class":291},[37,42624,113],{"class":43},[37,42626,42627,42629,42631],{"class":39,"line":116},[37,42628,224],{"class":43},[37,42630,42533],{"class":291},[37,42632,62],{"class":43},[37,42634,42635,42637,42639],{"class":39,"line":123},[37,42636,273],{"class":43},[37,42638,48],{"class":291},[37,42640,62],{"class":43},[27,42642,42643],{"className":3580,"code":42554,"language":3582,"meta":32,"style":32},[34,42644,42645,42653,42661,42669,42677],{"__ignoreMap":32},[37,42646,42647,42649,42651],{"class":39,"line":40},[37,42648,44],{"class":43},[37,42650,48],{"class":291},[37,42652,62],{"class":43},[37,42654,42655,42657,42659],{"class":39,"line":65},[37,42656,75],{"class":43},[37,42658,42533],{"class":291},[37,42660,62],{"class":43},[37,42662,42663,42665,42667],{"class":39,"line":72},[37,42664,174],{"class":43},[37,42666,3293],{"class":291},[37,42668,113],{"class":43},[37,42670,42671,42673,42675],{"class":39,"line":116},[37,42672,224],{"class":43},[37,42674,42533],{"class":291},[37,42676,62],{"class":43},[37,42678,42679,42681,42683],{"class":39,"line":123},[37,42680,273],{"class":43},[37,42682,48],{"class":291},[37,42684,62],{"class":43},[27,42686,42687],{"className":543,"code":42554,"language":545,"meta":32,"style":32},[34,42688,42689,42697,42705,42713,42721],{"__ignoreMap":32},[37,42690,42691,42693,42695],{"class":39,"line":40},[37,42692,44],{"class":43},[37,42694,48],{"class":291},[37,42696,62],{"class":43},[37,42698,42699,42701,42703],{"class":39,"line":65},[37,42700,75],{"class":43},[37,42702,42533],{"class":291},[37,42704,62],{"class":43},[37,42706,42707,42709,42711],{"class":39,"line":72},[37,42708,174],{"class":43},[37,42710,3293],{"class":291},[37,42712,113],{"class":43},[37,42714,42715,42717,42719],{"class":39,"line":116},[37,42716,224],{"class":43},[37,42718,42533],{"class":291},[37,42720,62],{"class":43},[37,42722,42723,42725,42727],{"class":39,"line":123},[37,42724,273],{"class":43},[37,42726,48],{"class":291},[37,42728,62],{"class":43},[27,42730,42732],{"className":987,"code":42731,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Mirror', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,42733,42734,42744,42748,42762,42766,42775,42783,42787,42791],{"__ignoreMap":32},[37,42735,42736,42738,42740,42742],{"class":39,"line":40},[37,42737,1382],{"class":297},[37,42739,9444],{"class":43},[37,42741,1388],{"class":297},[37,42743,9449],{"class":58},[37,42745,42746],{"class":39,"line":65},[37,42747,120],{"emptyLinePlaceholder":119},[37,42749,42750,42752,42754,42756,42758,42760],{"class":39,"line":72},[37,42751,2809],{"class":297},[37,42753,2812],{"class":291},[37,42755,2815],{"class":297},[37,42757,2818],{"class":297},[37,42759,999],{"class":51},[37,42761,1002],{"class":43},[37,42763,42764],{"class":39,"line":116},[37,42765,1007],{"class":43},[37,42767,42768,42770,42773],{"class":39,"line":123},[37,42769,1017],{"class":43},[37,42771,42772],{"class":58},"'Mirror'",[37,42774,4944],{"class":43},[37,42776,42777,42779,42781],{"class":39,"line":129},[37,42778,4949],{"class":43},[37,42780,3941],{"class":58},[37,42782,3207],{"class":43},[37,42784,42785],{"class":39,"line":171},[37,42786,4966],{"class":43},[37,42788,42789],{"class":39,"line":221},[37,42790,1194],{"class":43},[37,42792,42793],{"class":39,"line":231},[37,42794,1200],{"class":43},[1311,42796,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":42798},[42799,42800],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/mirror",{"title":42533,"description":42540},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":42807,"title":42808,"body":42809,"category":27972,"componentType":21056,"description":42816,"extension":1323,"meta":43001,"navigation":119,"path":43002,"requiresChild":27975,"seo":43003,"stem":43004,"__hash__":43005},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":42810,"toc":42997},[42811,42814,42817,42819,42821,42824,42826,42995],[11,42812,42808],{"id":42813},"multipointgradient",[15,42815,42816],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[27113,42818],{"component":42808},[1202,42820,27117],{"id":21717},[27119,42822],{":props":42823},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#4776E6\",\"description\":\"Color of control point A\"},{\"name\":\"positionA\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.2}\",\"description\":\"Position of control point A\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#C44DFF\",\"description\":\"Color of control point B\"},{\"name\":\"positionB\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.2}\",\"description\":\"Position of control point B\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#1ABC9C\",\"description\":\"Color of control point C\"},{\"name\":\"positionC\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.8}\",\"description\":\"Position of control point C\"},{\"name\":\"colorD\",\"type\":\"string\",\"default\":\"#F8BBD9\",\"description\":\"Color of control point D\"},{\"name\":\"positionD\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.8}\",\"description\":\"Position of control point D\"},{\"name\":\"colorE\",\"type\":\"string\",\"default\":\"#FF8C42\",\"description\":\"Color of control point E\"},{\"name\":\"positionE\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Position of control point E\"},{\"name\":\"smoothness\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Controls how smoothly colors blend.\"}]",[1202,42825,27125],{"id":27124},[23,42827,42828,42857,42885,42913,42941],{":tabs":25},[27,42829,42831],{"className":29,"code":42830,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[34,42832,42833,42841,42849],{"__ignoreMap":32},[37,42834,42835,42837,42839],{"class":39,"line":40},[37,42836,44],{"class":43},[37,42838,48],{"class":47},[37,42840,62],{"class":43},[37,42842,42843,42845,42847],{"class":39,"line":65},[37,42844,75],{"class":43},[37,42846,42808],{"class":47},[37,42848,113],{"class":43},[37,42850,42851,42853,42855],{"class":39,"line":72},[37,42852,273],{"class":43},[37,42854,48],{"class":47},[37,42856,62],{"class":43},[27,42858,42859],{"className":280,"code":42830,"language":282,"meta":32,"style":32},[34,42860,42861,42869,42877],{"__ignoreMap":32},[37,42862,42863,42865,42867],{"class":39,"line":40},[37,42864,44],{"class":43},[37,42866,48],{"class":291},[37,42868,62],{"class":43},[37,42870,42871,42873,42875],{"class":39,"line":65},[37,42872,75],{"class":43},[37,42874,42808],{"class":291},[37,42876,113],{"class":43},[37,42878,42879,42881,42883],{"class":39,"line":72},[37,42880,273],{"class":43},[37,42882,48],{"class":291},[37,42884,62],{"class":43},[27,42886,42887],{"className":3580,"code":42830,"language":3582,"meta":32,"style":32},[34,42888,42889,42897,42905],{"__ignoreMap":32},[37,42890,42891,42893,42895],{"class":39,"line":40},[37,42892,44],{"class":43},[37,42894,48],{"class":291},[37,42896,62],{"class":43},[37,42898,42899,42901,42903],{"class":39,"line":65},[37,42900,75],{"class":43},[37,42902,42808],{"class":291},[37,42904,113],{"class":43},[37,42906,42907,42909,42911],{"class":39,"line":72},[37,42908,273],{"class":43},[37,42910,48],{"class":291},[37,42912,62],{"class":43},[27,42914,42915],{"className":543,"code":42830,"language":545,"meta":32,"style":32},[34,42916,42917,42925,42933],{"__ignoreMap":32},[37,42918,42919,42921,42923],{"class":39,"line":40},[37,42920,44],{"class":43},[37,42922,48],{"class":291},[37,42924,62],{"class":43},[37,42926,42927,42929,42931],{"class":39,"line":65},[37,42928,75],{"class":43},[37,42930,42808],{"class":291},[37,42932,113],{"class":43},[37,42934,42935,42937,42939],{"class":39,"line":72},[37,42936,273],{"class":43},[37,42938,48],{"class":291},[37,42940,62],{"class":43},[27,42942,42944],{"className":987,"code":42943,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'MultiPointGradient', props: {} }\n ]\n})\n",[34,42945,42946,42956,42960,42974,42978,42987,42991],{"__ignoreMap":32},[37,42947,42948,42950,42952,42954],{"class":39,"line":40},[37,42949,1382],{"class":297},[37,42951,9444],{"class":43},[37,42953,1388],{"class":297},[37,42955,9449],{"class":58},[37,42957,42958],{"class":39,"line":65},[37,42959,120],{"emptyLinePlaceholder":119},[37,42961,42962,42964,42966,42968,42970,42972],{"class":39,"line":72},[37,42963,2809],{"class":297},[37,42965,2812],{"class":291},[37,42967,2815],{"class":297},[37,42969,2818],{"class":297},[37,42971,999],{"class":51},[37,42973,1002],{"class":43},[37,42975,42976],{"class":39,"line":116},[37,42977,1007],{"class":43},[37,42979,42980,42982,42985],{"class":39,"line":123},[37,42981,1017],{"class":43},[37,42983,42984],{"class":58},"'MultiPointGradient'",[37,42986,3207],{"class":43},[37,42988,42989],{"class":39,"line":129},[37,42990,1194],{"class":43},[37,42992,42993],{"class":39,"line":171},[37,42994,1200],{"class":43},[1311,42996,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":42998},[42999,43000],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/multipointgradient",{"title":42808,"description":42816},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":43007,"title":18688,"body":43008,"category":32610,"componentType":21056,"description":43015,"extension":1323,"meta":43294,"navigation":119,"path":43295,"requiresChild":27975,"seo":43296,"stem":43297,"__hash__":43298},"components/docs/components/Neon.md",{"type":8,"value":43009,"toc":43290},[43010,43013,43016,43018,43020,43023,43025,43288],[11,43011,18688],{"id":43012},"neon",[15,43014,43015],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[27113,43017],{"component":18688},[1202,43019,27117],{"id":21717},[27119,43021],{":props":43022},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the neon shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the neon shape (1 = default size)\"},{\"name\":\"color\",\"type\":\"string\",\"default\":\"#00ddff\",\"description\":\"Primary neon tube color\"},{\"name\":\"secondaryColor\",\"type\":\"string\",\"default\":\"#ff00aa\",\"description\":\"Shadow-side color for a two-tone / dual-lit pipe look\"},{\"name\":\"secondaryBlend\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Blend between mono (0) and two-tone (1) tube coloring\"},{\"name\":\"glowColor\",\"type\":\"string\",\"default\":\"#00ddff\",\"description\":\"Color of the outer glow / bloom\"},{\"name\":\"tubeThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How far inward from the boundary the tube extends. Low = thin neon outline, high = thick 3D pipe\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Overall brightness multiplier\"},{\"name\":\"hotCoreIntensity\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Bright white-hot center line — the gas discharge glow inside the tube\"},{\"name\":\"glowIntensity\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Outer glow / bloom strength\"},{\"name\":\"glowRadius\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"How far the glow extends beyond the tube\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"300\",\"description\":\"Directional light angle in degrees — controls 3D shading on the tube\"},{\"name\":\"specularIntensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Specular highlight brightness on the tube surface\"},{\"name\":\"specularSize\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Specular highlight size — 0 = tight pinpoint, 1 = broad sheen\"},{\"name\":\"cornerSmoothing\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Rounds sharp corners to mimic how real glass tubes curve at bends\"},{\"name\":\"flickerSpeed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Flicker animation speed — 0 = off, higher = faster sporadic on/off\"},{\"name\":\"flickerAmount\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How often the neon flickers off — 0 = always on, 1 = frequent outages\"},{\"name\":\"flowSpeed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Flow animation speed — 0 = off, light rotates through the tube\"},{\"name\":\"flowAmount\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Strength of the flowing brightness variation — 0 = uniform, 1 = dramatic\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](/docs/guide/shape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](/docs/guide/shape-effects) for how to generate an SDF from an SVG.\"}]",[1202,43024,27125],{"id":27124},[23,43026,43027,43077,43128,43176,43226],{":tabs":25},[27,43028,43030],{"className":29,"code":43029,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[34,43031,43032,43040,43047,43056,43065,43069],{"__ignoreMap":32},[37,43033,43034,43036,43038],{"class":39,"line":40},[37,43035,44],{"class":43},[37,43037,48],{"class":47},[37,43039,62],{"class":43},[37,43041,43042,43044],{"class":39,"line":65},[37,43043,75],{"class":43},[37,43045,43046],{"class":47},"Neon\n",[37,43048,43049,43051,43053],{"class":39,"line":72},[37,43050,7570],{"class":51},[37,43052,55],{"class":43},[37,43054,43055],{"class":58},"\"#00ddff\"\n",[37,43057,43058,43060,43062],{"class":39,"line":116},[37,43059,18081],{"class":51},[37,43061,55],{"class":43},[37,43063,43064],{"class":58},"\"1.5\"\n",[37,43066,43067],{"class":39,"line":123},[37,43068,2314],{"class":43},[37,43070,43071,43073,43075],{"class":39,"line":129},[37,43072,273],{"class":43},[37,43074,48],{"class":47},[37,43076,62],{"class":43},[27,43078,43080],{"className":280,"code":43079,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[34,43081,43082,43090,43096,43104,43116,43120],{"__ignoreMap":32},[37,43083,43084,43086,43088],{"class":39,"line":40},[37,43085,44],{"class":43},[37,43087,48],{"class":291},[37,43089,62],{"class":43},[37,43091,43092,43094],{"class":39,"line":65},[37,43093,75],{"class":43},[37,43095,43046],{"class":291},[37,43097,43098,43100,43102],{"class":39,"line":72},[37,43099,7570],{"class":51},[37,43101,55],{"class":297},[37,43103,43055],{"class":58},[37,43105,43106,43108,43110,43112,43114],{"class":39,"line":116},[37,43107,18192],{"class":51},[37,43109,55],{"class":297},[37,43111,326],{"class":43},[37,43113,13384],{"class":291},[37,43115,312],{"class":43},[37,43117,43118],{"class":39,"line":123},[37,43119,2314],{"class":43},[37,43121,43122,43124,43126],{"class":39,"line":129},[37,43123,273],{"class":43},[37,43125,48],{"class":291},[37,43127,62],{"class":43},[27,43129,43130],{"className":3580,"code":43079,"language":3582,"meta":32,"style":32},[34,43131,43132,43140,43146,43154,43164,43168],{"__ignoreMap":32},[37,43133,43134,43136,43138],{"class":39,"line":40},[37,43135,44],{"class":43},[37,43137,48],{"class":291},[37,43139,62],{"class":43},[37,43141,43142,43144],{"class":39,"line":65},[37,43143,75],{"class":43},[37,43145,43046],{"class":291},[37,43147,43148,43150,43152],{"class":39,"line":72},[37,43149,7570],{"class":51},[37,43151,55],{"class":43},[37,43153,43055],{"class":58},[37,43155,43156,43158,43160,43162],{"class":39,"line":116},[37,43157,18192],{"class":51},[37,43159,25058],{"class":43},[37,43161,13384],{"class":291},[37,43163,312],{"class":43},[37,43165,43166],{"class":39,"line":123},[37,43167,2314],{"class":43},[37,43169,43170,43172,43174],{"class":39,"line":129},[37,43171,273],{"class":43},[37,43173,48],{"class":291},[37,43175,62],{"class":43},[27,43177,43178],{"className":543,"code":43079,"language":545,"meta":32,"style":32},[34,43179,43180,43188,43194,43202,43214,43218],{"__ignoreMap":32},[37,43181,43182,43184,43186],{"class":39,"line":40},[37,43183,44],{"class":43},[37,43185,48],{"class":291},[37,43187,62],{"class":43},[37,43189,43190,43192],{"class":39,"line":65},[37,43191,75],{"class":43},[37,43193,43046],{"class":291},[37,43195,43196,43198,43200],{"class":39,"line":72},[37,43197,7570],{"class":51},[37,43199,55],{"class":297},[37,43201,43055],{"class":58},[37,43203,43204,43206,43208,43210,43212],{"class":39,"line":116},[37,43205,18192],{"class":51},[37,43207,55],{"class":297},[37,43209,326],{"class":43},[37,43211,13384],{"class":291},[37,43213,312],{"class":43},[37,43215,43216],{"class":39,"line":123},[37,43217,2314],{"class":43},[37,43219,43220,43222,43224],{"class":39,"line":129},[37,43221,273],{"class":43},[37,43223,48],{"class":291},[37,43225,62],{"class":43},[27,43227,43229],{"className":987,"code":43228,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Neon', props: { color: '#00ddff', intensity: 1.5 } }\n ]\n})\n",[34,43230,43231,43241,43245,43259,43263,43280,43284],{"__ignoreMap":32},[37,43232,43233,43235,43237,43239],{"class":39,"line":40},[37,43234,1382],{"class":297},[37,43236,9444],{"class":43},[37,43238,1388],{"class":297},[37,43240,9449],{"class":58},[37,43242,43243],{"class":39,"line":65},[37,43244,120],{"emptyLinePlaceholder":119},[37,43246,43247,43249,43251,43253,43255,43257],{"class":39,"line":72},[37,43248,2809],{"class":297},[37,43250,2812],{"class":291},[37,43252,2815],{"class":297},[37,43254,2818],{"class":297},[37,43256,999],{"class":51},[37,43258,1002],{"class":43},[37,43260,43261],{"class":39,"line":116},[37,43262,1007],{"class":43},[37,43264,43265,43267,43269,43271,43274,43276,43278],{"class":39,"line":123},[37,43266,1017],{"class":43},[37,43268,19280],{"class":58},[37,43270,2845],{"class":43},[37,43272,43273],{"class":58},"'#00ddff'",[37,43275,34633],{"class":43},[37,43277,13384],{"class":291},[37,43279,1142],{"class":43},[37,43281,43282],{"class":39,"line":129},[37,43283,1194],{"class":43},[37,43285,43286],{"class":39,"line":171},[37,43287,1200],{"class":43},[1311,43289,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":43291},[43292,43293],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/neon",{"title":18688,"description":43015},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":43300,"title":43301,"body":43302,"category":27715,"componentType":21062,"description":43309,"extension":1323,"meta":43570,"navigation":119,"path":43571,"requiresChild":119,"seo":43572,"stem":43573,"__hash__":43574},"components/docs/components/Paper.md","Paper",{"type":8,"value":43303,"toc":43566},[43304,43307,43310,43312,43314,43317,43319,43564],[11,43305,43301],{"id":43306},"paper",[15,43308,43309],{},"Applies realistic paper grain and surface roughness to child content",[27113,43311],{"component":43301},[1202,43313,27117],{"id":21717},[27119,43315],{":props":43316},"[{\"name\":\"roughness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Surface roughness — higher values create more pronounced brightness variation\"},{\"name\":\"grainScale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the paper grain — lower = coarser, higher = finer\"},{\"name\":\"displacement\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Surface micro-roughness — shifts pixels at grain scale like real paper fiber bumps\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"}]",[1202,43318,27125],{"id":27124},[23,43320,43321,43366,43410,43454,43498],{":tabs":25},[27,43322,43324],{"className":29,"code":43323,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[34,43325,43326,43334,43342,43350,43358],{"__ignoreMap":32},[37,43327,43328,43330,43332],{"class":39,"line":40},[37,43329,44],{"class":43},[37,43331,48],{"class":47},[37,43333,62],{"class":43},[37,43335,43336,43338,43340],{"class":39,"line":65},[37,43337,75],{"class":43},[37,43339,43301],{"class":47},[37,43341,62],{"class":43},[37,43343,43344,43346,43348],{"class":39,"line":72},[37,43345,174],{"class":43},[37,43347,3293],{"class":47},[37,43349,113],{"class":43},[37,43351,43352,43354,43356],{"class":39,"line":116},[37,43353,224],{"class":43},[37,43355,43301],{"class":47},[37,43357,62],{"class":43},[37,43359,43360,43362,43364],{"class":39,"line":123},[37,43361,273],{"class":43},[37,43363,48],{"class":47},[37,43365,62],{"class":43},[27,43367,43368],{"className":280,"code":43323,"language":282,"meta":32,"style":32},[34,43369,43370,43378,43386,43394,43402],{"__ignoreMap":32},[37,43371,43372,43374,43376],{"class":39,"line":40},[37,43373,44],{"class":43},[37,43375,48],{"class":291},[37,43377,62],{"class":43},[37,43379,43380,43382,43384],{"class":39,"line":65},[37,43381,75],{"class":43},[37,43383,43301],{"class":291},[37,43385,62],{"class":43},[37,43387,43388,43390,43392],{"class":39,"line":72},[37,43389,174],{"class":43},[37,43391,3293],{"class":291},[37,43393,113],{"class":43},[37,43395,43396,43398,43400],{"class":39,"line":116},[37,43397,224],{"class":43},[37,43399,43301],{"class":291},[37,43401,62],{"class":43},[37,43403,43404,43406,43408],{"class":39,"line":123},[37,43405,273],{"class":43},[37,43407,48],{"class":291},[37,43409,62],{"class":43},[27,43411,43412],{"className":3580,"code":43323,"language":3582,"meta":32,"style":32},[34,43413,43414,43422,43430,43438,43446],{"__ignoreMap":32},[37,43415,43416,43418,43420],{"class":39,"line":40},[37,43417,44],{"class":43},[37,43419,48],{"class":291},[37,43421,62],{"class":43},[37,43423,43424,43426,43428],{"class":39,"line":65},[37,43425,75],{"class":43},[37,43427,43301],{"class":291},[37,43429,62],{"class":43},[37,43431,43432,43434,43436],{"class":39,"line":72},[37,43433,174],{"class":43},[37,43435,3293],{"class":291},[37,43437,113],{"class":43},[37,43439,43440,43442,43444],{"class":39,"line":116},[37,43441,224],{"class":43},[37,43443,43301],{"class":291},[37,43445,62],{"class":43},[37,43447,43448,43450,43452],{"class":39,"line":123},[37,43449,273],{"class":43},[37,43451,48],{"class":291},[37,43453,62],{"class":43},[27,43455,43456],{"className":543,"code":43323,"language":545,"meta":32,"style":32},[34,43457,43458,43466,43474,43482,43490],{"__ignoreMap":32},[37,43459,43460,43462,43464],{"class":39,"line":40},[37,43461,44],{"class":43},[37,43463,48],{"class":291},[37,43465,62],{"class":43},[37,43467,43468,43470,43472],{"class":39,"line":65},[37,43469,75],{"class":43},[37,43471,43301],{"class":291},[37,43473,62],{"class":43},[37,43475,43476,43478,43480],{"class":39,"line":72},[37,43477,174],{"class":43},[37,43479,3293],{"class":291},[37,43481,113],{"class":43},[37,43483,43484,43486,43488],{"class":39,"line":116},[37,43485,224],{"class":43},[37,43487,43301],{"class":291},[37,43489,62],{"class":43},[37,43491,43492,43494,43496],{"class":39,"line":123},[37,43493,273],{"class":43},[37,43495,48],{"class":291},[37,43497,62],{"class":43},[27,43499,43501],{"className":987,"code":43500,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Paper', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,43502,43503,43513,43517,43531,43535,43544,43552,43556,43560],{"__ignoreMap":32},[37,43504,43505,43507,43509,43511],{"class":39,"line":40},[37,43506,1382],{"class":297},[37,43508,9444],{"class":43},[37,43510,1388],{"class":297},[37,43512,9449],{"class":58},[37,43514,43515],{"class":39,"line":65},[37,43516,120],{"emptyLinePlaceholder":119},[37,43518,43519,43521,43523,43525,43527,43529],{"class":39,"line":72},[37,43520,2809],{"class":297},[37,43522,2812],{"class":291},[37,43524,2815],{"class":297},[37,43526,2818],{"class":297},[37,43528,999],{"class":51},[37,43530,1002],{"class":43},[37,43532,43533],{"class":39,"line":116},[37,43534,1007],{"class":43},[37,43536,43537,43539,43542],{"class":39,"line":123},[37,43538,1017],{"class":43},[37,43540,43541],{"class":58},"'Paper'",[37,43543,4944],{"class":43},[37,43545,43546,43548,43550],{"class":39,"line":129},[37,43547,4949],{"class":43},[37,43549,3941],{"class":58},[37,43551,3207],{"class":43},[37,43553,43554],{"class":39,"line":171},[37,43555,4966],{"class":43},[37,43557,43558],{"class":39,"line":221},[37,43559,1194],{"class":43},[37,43561,43562],{"class":39,"line":231},[37,43563,1200],{"class":43},[1311,43565,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":43567},[43568,43569],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/paper",{"title":43301,"description":43309},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":43576,"title":43577,"body":43578,"category":29317,"componentType":21062,"description":43585,"extension":1323,"meta":43846,"navigation":119,"path":43847,"requiresChild":119,"seo":43848,"stem":43849,"__hash__":43850},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":43579,"toc":43842},[43580,43583,43586,43588,43590,43593,43595,43840],[11,43581,43577],{"id":43582},"perspective",[15,43584,43585],{},"Rotate the plane in 3D space with pan and tilt",[27113,43587],{"component":43577},[1202,43589,27117],{"id":21717},[27119,43591],{":props":43592},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of rotation\"},{\"name\":\"pan\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Horizontal rotation (left/right)\"},{\"name\":\"tilt\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Vertical rotation (up/down)\"},{\"name\":\"fov\",\"type\":\"number\",\"default\":\"60\",\"description\":\"Field of view - controls perspective intensity\"},{\"name\":\"zoom\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Zoom in to fill the frame after rotation\"},{\"name\":\"offset\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Shift the result in X/Y\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges\"}]",[1202,43594,27125],{"id":27124},[23,43596,43597,43642,43686,43730,43774],{":tabs":25},[27,43598,43600],{"className":29,"code":43599,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[34,43601,43602,43610,43618,43626,43634],{"__ignoreMap":32},[37,43603,43604,43606,43608],{"class":39,"line":40},[37,43605,44],{"class":43},[37,43607,48],{"class":47},[37,43609,62],{"class":43},[37,43611,43612,43614,43616],{"class":39,"line":65},[37,43613,75],{"class":43},[37,43615,43577],{"class":47},[37,43617,62],{"class":43},[37,43619,43620,43622,43624],{"class":39,"line":72},[37,43621,174],{"class":43},[37,43623,3293],{"class":47},[37,43625,113],{"class":43},[37,43627,43628,43630,43632],{"class":39,"line":116},[37,43629,224],{"class":43},[37,43631,43577],{"class":47},[37,43633,62],{"class":43},[37,43635,43636,43638,43640],{"class":39,"line":123},[37,43637,273],{"class":43},[37,43639,48],{"class":47},[37,43641,62],{"class":43},[27,43643,43644],{"className":280,"code":43599,"language":282,"meta":32,"style":32},[34,43645,43646,43654,43662,43670,43678],{"__ignoreMap":32},[37,43647,43648,43650,43652],{"class":39,"line":40},[37,43649,44],{"class":43},[37,43651,48],{"class":291},[37,43653,62],{"class":43},[37,43655,43656,43658,43660],{"class":39,"line":65},[37,43657,75],{"class":43},[37,43659,43577],{"class":291},[37,43661,62],{"class":43},[37,43663,43664,43666,43668],{"class":39,"line":72},[37,43665,174],{"class":43},[37,43667,3293],{"class":291},[37,43669,113],{"class":43},[37,43671,43672,43674,43676],{"class":39,"line":116},[37,43673,224],{"class":43},[37,43675,43577],{"class":291},[37,43677,62],{"class":43},[37,43679,43680,43682,43684],{"class":39,"line":123},[37,43681,273],{"class":43},[37,43683,48],{"class":291},[37,43685,62],{"class":43},[27,43687,43688],{"className":3580,"code":43599,"language":3582,"meta":32,"style":32},[34,43689,43690,43698,43706,43714,43722],{"__ignoreMap":32},[37,43691,43692,43694,43696],{"class":39,"line":40},[37,43693,44],{"class":43},[37,43695,48],{"class":291},[37,43697,62],{"class":43},[37,43699,43700,43702,43704],{"class":39,"line":65},[37,43701,75],{"class":43},[37,43703,43577],{"class":291},[37,43705,62],{"class":43},[37,43707,43708,43710,43712],{"class":39,"line":72},[37,43709,174],{"class":43},[37,43711,3293],{"class":291},[37,43713,113],{"class":43},[37,43715,43716,43718,43720],{"class":39,"line":116},[37,43717,224],{"class":43},[37,43719,43577],{"class":291},[37,43721,62],{"class":43},[37,43723,43724,43726,43728],{"class":39,"line":123},[37,43725,273],{"class":43},[37,43727,48],{"class":291},[37,43729,62],{"class":43},[27,43731,43732],{"className":543,"code":43599,"language":545,"meta":32,"style":32},[34,43733,43734,43742,43750,43758,43766],{"__ignoreMap":32},[37,43735,43736,43738,43740],{"class":39,"line":40},[37,43737,44],{"class":43},[37,43739,48],{"class":291},[37,43741,62],{"class":43},[37,43743,43744,43746,43748],{"class":39,"line":65},[37,43745,75],{"class":43},[37,43747,43577],{"class":291},[37,43749,62],{"class":43},[37,43751,43752,43754,43756],{"class":39,"line":72},[37,43753,174],{"class":43},[37,43755,3293],{"class":291},[37,43757,113],{"class":43},[37,43759,43760,43762,43764],{"class":39,"line":116},[37,43761,224],{"class":43},[37,43763,43577],{"class":291},[37,43765,62],{"class":43},[37,43767,43768,43770,43772],{"class":39,"line":123},[37,43769,273],{"class":43},[37,43771,48],{"class":291},[37,43773,62],{"class":43},[27,43775,43777],{"className":987,"code":43776,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Perspective', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,43778,43779,43789,43793,43807,43811,43820,43828,43832,43836],{"__ignoreMap":32},[37,43780,43781,43783,43785,43787],{"class":39,"line":40},[37,43782,1382],{"class":297},[37,43784,9444],{"class":43},[37,43786,1388],{"class":297},[37,43788,9449],{"class":58},[37,43790,43791],{"class":39,"line":65},[37,43792,120],{"emptyLinePlaceholder":119},[37,43794,43795,43797,43799,43801,43803,43805],{"class":39,"line":72},[37,43796,2809],{"class":297},[37,43798,2812],{"class":291},[37,43800,2815],{"class":297},[37,43802,2818],{"class":297},[37,43804,999],{"class":51},[37,43806,1002],{"class":43},[37,43808,43809],{"class":39,"line":116},[37,43810,1007],{"class":43},[37,43812,43813,43815,43818],{"class":39,"line":123},[37,43814,1017],{"class":43},[37,43816,43817],{"class":58},"'Perspective'",[37,43819,4944],{"class":43},[37,43821,43822,43824,43826],{"class":39,"line":129},[37,43823,4949],{"class":43},[37,43825,3941],{"class":58},[37,43827,3207],{"class":43},[37,43829,43830],{"class":39,"line":171},[37,43831,4966],{"class":43},[37,43833,43834],{"class":39,"line":221},[37,43835,1194],{"class":43},[37,43837,43838],{"class":39,"line":231},[37,43839,1200],{"class":43},[1311,43841,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":43843},[43844,43845],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/perspective",{"title":43577,"description":43585},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":43852,"title":43853,"body":43854,"category":27715,"componentType":21062,"description":43861,"extension":1323,"meta":44122,"navigation":119,"path":44123,"requiresChild":119,"seo":44124,"stem":44125,"__hash__":44126},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":43855,"toc":44118},[43856,43859,43862,43864,43866,43869,43871,44116],[11,43857,43853],{"id":43858},"pixelate",[15,43860,43861],{},"Pixelation effect with adjustable cell size",[27113,43863],{"component":43853},[1202,43865,27117],{"id":21717},[27119,43867],{":props":43868},"[{\"name\":\"scale\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Number of pixels along the longest edge (higher = smaller pixels)\"},{\"name\":\"gap\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Space between pixels as a fraction of cell size (0 = no gap, 1 = fully invisible)\"},{\"name\":\"roundness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Roundness of each pixel's corners (0 = square, 1 = circle)\"}]",[1202,43870,27125],{"id":27124},[23,43872,43873,43918,43962,44006,44050],{":tabs":25},[27,43874,43876],{"className":29,"code":43875,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[34,43877,43878,43886,43894,43902,43910],{"__ignoreMap":32},[37,43879,43880,43882,43884],{"class":39,"line":40},[37,43881,44],{"class":43},[37,43883,48],{"class":47},[37,43885,62],{"class":43},[37,43887,43888,43890,43892],{"class":39,"line":65},[37,43889,75],{"class":43},[37,43891,43853],{"class":47},[37,43893,62],{"class":43},[37,43895,43896,43898,43900],{"class":39,"line":72},[37,43897,174],{"class":43},[37,43899,3293],{"class":47},[37,43901,113],{"class":43},[37,43903,43904,43906,43908],{"class":39,"line":116},[37,43905,224],{"class":43},[37,43907,43853],{"class":47},[37,43909,62],{"class":43},[37,43911,43912,43914,43916],{"class":39,"line":123},[37,43913,273],{"class":43},[37,43915,48],{"class":47},[37,43917,62],{"class":43},[27,43919,43920],{"className":280,"code":43875,"language":282,"meta":32,"style":32},[34,43921,43922,43930,43938,43946,43954],{"__ignoreMap":32},[37,43923,43924,43926,43928],{"class":39,"line":40},[37,43925,44],{"class":43},[37,43927,48],{"class":291},[37,43929,62],{"class":43},[37,43931,43932,43934,43936],{"class":39,"line":65},[37,43933,75],{"class":43},[37,43935,43853],{"class":291},[37,43937,62],{"class":43},[37,43939,43940,43942,43944],{"class":39,"line":72},[37,43941,174],{"class":43},[37,43943,3293],{"class":291},[37,43945,113],{"class":43},[37,43947,43948,43950,43952],{"class":39,"line":116},[37,43949,224],{"class":43},[37,43951,43853],{"class":291},[37,43953,62],{"class":43},[37,43955,43956,43958,43960],{"class":39,"line":123},[37,43957,273],{"class":43},[37,43959,48],{"class":291},[37,43961,62],{"class":43},[27,43963,43964],{"className":3580,"code":43875,"language":3582,"meta":32,"style":32},[34,43965,43966,43974,43982,43990,43998],{"__ignoreMap":32},[37,43967,43968,43970,43972],{"class":39,"line":40},[37,43969,44],{"class":43},[37,43971,48],{"class":291},[37,43973,62],{"class":43},[37,43975,43976,43978,43980],{"class":39,"line":65},[37,43977,75],{"class":43},[37,43979,43853],{"class":291},[37,43981,62],{"class":43},[37,43983,43984,43986,43988],{"class":39,"line":72},[37,43985,174],{"class":43},[37,43987,3293],{"class":291},[37,43989,113],{"class":43},[37,43991,43992,43994,43996],{"class":39,"line":116},[37,43993,224],{"class":43},[37,43995,43853],{"class":291},[37,43997,62],{"class":43},[37,43999,44000,44002,44004],{"class":39,"line":123},[37,44001,273],{"class":43},[37,44003,48],{"class":291},[37,44005,62],{"class":43},[27,44007,44008],{"className":543,"code":43875,"language":545,"meta":32,"style":32},[34,44009,44010,44018,44026,44034,44042],{"__ignoreMap":32},[37,44011,44012,44014,44016],{"class":39,"line":40},[37,44013,44],{"class":43},[37,44015,48],{"class":291},[37,44017,62],{"class":43},[37,44019,44020,44022,44024],{"class":39,"line":65},[37,44021,75],{"class":43},[37,44023,43853],{"class":291},[37,44025,62],{"class":43},[37,44027,44028,44030,44032],{"class":39,"line":72},[37,44029,174],{"class":43},[37,44031,3293],{"class":291},[37,44033,113],{"class":43},[37,44035,44036,44038,44040],{"class":39,"line":116},[37,44037,224],{"class":43},[37,44039,43853],{"class":291},[37,44041,62],{"class":43},[37,44043,44044,44046,44048],{"class":39,"line":123},[37,44045,273],{"class":43},[37,44047,48],{"class":291},[37,44049,62],{"class":43},[27,44051,44053],{"className":987,"code":44052,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Pixelate', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,44054,44055,44065,44069,44083,44087,44096,44104,44108,44112],{"__ignoreMap":32},[37,44056,44057,44059,44061,44063],{"class":39,"line":40},[37,44058,1382],{"class":297},[37,44060,9444],{"class":43},[37,44062,1388],{"class":297},[37,44064,9449],{"class":58},[37,44066,44067],{"class":39,"line":65},[37,44068,120],{"emptyLinePlaceholder":119},[37,44070,44071,44073,44075,44077,44079,44081],{"class":39,"line":72},[37,44072,2809],{"class":297},[37,44074,2812],{"class":291},[37,44076,2815],{"class":297},[37,44078,2818],{"class":297},[37,44080,999],{"class":51},[37,44082,1002],{"class":43},[37,44084,44085],{"class":39,"line":116},[37,44086,1007],{"class":43},[37,44088,44089,44091,44094],{"class":39,"line":123},[37,44090,1017],{"class":43},[37,44092,44093],{"class":58},"'Pixelate'",[37,44095,4944],{"class":43},[37,44097,44098,44100,44102],{"class":39,"line":129},[37,44099,4949],{"class":43},[37,44101,3941],{"class":58},[37,44103,3207],{"class":43},[37,44105,44106],{"class":39,"line":171},[37,44107,4966],{"class":43},[37,44109,44110],{"class":39,"line":221},[37,44111,1194],{"class":43},[37,44113,44114],{"class":39,"line":231},[37,44115,1200],{"class":43},[1311,44117,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":44119},[44120,44121],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/pixelate",{"title":43853,"description":43861},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":44128,"title":11001,"body":44129,"category":27972,"componentType":21056,"description":44136,"extension":1323,"meta":44377,"navigation":119,"path":44378,"requiresChild":27975,"seo":44379,"stem":44380,"__hash__":44381},"components/docs/components/Plasma.md",{"type":8,"value":44130,"toc":44373},[44131,44134,44137,44139,44141,44144,44146,44371],[11,44132,11001],{"id":44133},"plasma",[15,44135,44136],{},"Animated effect of glowing plasma",[27113,44138],{"component":11001},[1202,44140,27117],{"id":21717},[27119,44142],{":props":44143},"[{\"name\":\"density\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Density of the plasma pattern\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Animation speed\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Brightness and spread of the plasma glow\"},{\"name\":\"warp\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How much the flow distorts and swirls\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Push darks darker and lights lighter\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Skew color balance toward A (higher) or B (lower)\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#7018be\",\"description\":\"Primary color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Secondary color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,44145,27125],{"id":27124},[23,44147,44148,44188,44231,44271,44313],{":tabs":25},[27,44149,44151],{"className":29,"code":44150,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[34,44152,44153,44161,44168,44176,44180],{"__ignoreMap":32},[37,44154,44155,44157,44159],{"class":39,"line":40},[37,44156,44],{"class":43},[37,44158,48],{"class":47},[37,44160,62],{"class":43},[37,44162,44163,44165],{"class":39,"line":65},[37,44164,75],{"class":43},[37,44166,44167],{"class":47},"Plasma\n",[37,44169,44170,44172,44174],{"class":39,"line":72},[37,44171,18081],{"class":51},[37,44173,55],{"class":43},[37,44175,43064],{"class":58},[37,44177,44178],{"class":39,"line":116},[37,44179,2314],{"class":43},[37,44181,44182,44184,44186],{"class":39,"line":123},[37,44183,273],{"class":43},[37,44185,48],{"class":47},[37,44187,62],{"class":43},[27,44189,44191],{"className":280,"code":44190,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[34,44192,44193,44201,44207,44219,44223],{"__ignoreMap":32},[37,44194,44195,44197,44199],{"class":39,"line":40},[37,44196,44],{"class":43},[37,44198,48],{"class":291},[37,44200,62],{"class":43},[37,44202,44203,44205],{"class":39,"line":65},[37,44204,75],{"class":43},[37,44206,44167],{"class":291},[37,44208,44209,44211,44213,44215,44217],{"class":39,"line":72},[37,44210,18192],{"class":51},[37,44212,55],{"class":297},[37,44214,326],{"class":43},[37,44216,13384],{"class":291},[37,44218,312],{"class":43},[37,44220,44221],{"class":39,"line":116},[37,44222,2314],{"class":43},[37,44224,44225,44227,44229],{"class":39,"line":123},[37,44226,273],{"class":43},[37,44228,48],{"class":291},[37,44230,62],{"class":43},[27,44232,44233],{"className":3580,"code":44190,"language":3582,"meta":32,"style":32},[34,44234,44235,44243,44249,44259,44263],{"__ignoreMap":32},[37,44236,44237,44239,44241],{"class":39,"line":40},[37,44238,44],{"class":43},[37,44240,48],{"class":291},[37,44242,62],{"class":43},[37,44244,44245,44247],{"class":39,"line":65},[37,44246,75],{"class":43},[37,44248,44167],{"class":291},[37,44250,44251,44253,44255,44257],{"class":39,"line":72},[37,44252,18192],{"class":51},[37,44254,25058],{"class":43},[37,44256,13384],{"class":291},[37,44258,312],{"class":43},[37,44260,44261],{"class":39,"line":116},[37,44262,2314],{"class":43},[37,44264,44265,44267,44269],{"class":39,"line":123},[37,44266,273],{"class":43},[37,44268,48],{"class":291},[37,44270,62],{"class":43},[27,44272,44273],{"className":543,"code":44190,"language":545,"meta":32,"style":32},[34,44274,44275,44283,44289,44301,44305],{"__ignoreMap":32},[37,44276,44277,44279,44281],{"class":39,"line":40},[37,44278,44],{"class":43},[37,44280,48],{"class":291},[37,44282,62],{"class":43},[37,44284,44285,44287],{"class":39,"line":65},[37,44286,75],{"class":43},[37,44288,44167],{"class":291},[37,44290,44291,44293,44295,44297,44299],{"class":39,"line":72},[37,44292,18192],{"class":51},[37,44294,55],{"class":297},[37,44296,326],{"class":43},[37,44298,13384],{"class":291},[37,44300,312],{"class":43},[37,44302,44303],{"class":39,"line":116},[37,44304,2314],{"class":43},[37,44306,44307,44309,44311],{"class":39,"line":123},[37,44308,273],{"class":43},[37,44310,48],{"class":291},[37,44312,62],{"class":43},[27,44314,44316],{"className":987,"code":44315,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Plasma', props: { intensity: 1.5 } }\n ]\n})\n",[34,44317,44318,44328,44332,44346,44350,44363,44367],{"__ignoreMap":32},[37,44319,44320,44322,44324,44326],{"class":39,"line":40},[37,44321,1382],{"class":297},[37,44323,9444],{"class":43},[37,44325,1388],{"class":297},[37,44327,9449],{"class":58},[37,44329,44330],{"class":39,"line":65},[37,44331,120],{"emptyLinePlaceholder":119},[37,44333,44334,44336,44338,44340,44342,44344],{"class":39,"line":72},[37,44335,2809],{"class":297},[37,44337,2812],{"class":291},[37,44339,2815],{"class":297},[37,44341,2818],{"class":297},[37,44343,999],{"class":51},[37,44345,1002],{"class":43},[37,44347,44348],{"class":39,"line":116},[37,44349,1007],{"class":43},[37,44351,44352,44354,44357,44359,44361],{"class":39,"line":123},[37,44353,1017],{"class":43},[37,44355,44356],{"class":58},"'Plasma'",[37,44358,27406],{"class":43},[37,44360,13384],{"class":291},[37,44362,1142],{"class":43},[37,44364,44365],{"class":39,"line":129},[37,44366,1194],{"class":43},[37,44368,44369],{"class":39,"line":171},[37,44370,1200],{"class":43},[1311,44372,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":44374},[44375,44376],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/plasma",{"title":11001,"description":44136},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":44383,"title":44384,"body":44385,"category":29317,"componentType":21062,"description":44392,"extension":1323,"meta":44755,"navigation":119,"path":44756,"requiresChild":119,"seo":44757,"stem":44758,"__hash__":44759},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":44386,"toc":44751},[44387,44390,44393,44395,44397,44400,44402,44749],[11,44388,44384],{"id":44389},"polarcoordinates",[15,44391,44392],{},"Convert rectangular coordinates to polar space",[27113,44394],{"component":44384},[1202,44396,27117],{"id":21717},[27119,44398],{":props":44399},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point for polar coordinate conversion\"},{\"name\":\"wrap\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Controls how much of the angular range to use (1 = full 360°, 0.5 = 180°)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Controls how much of the radius range to use (affects the radial mapping)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blends between original UVs (0) and polar coordinates (1)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,44401,27125],{"id":27124},[23,44403,44404,44468,44539,44605,44675],{":tabs":25},[27,44405,44407],{"className":29,"code":44406,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPolarCoordinates\n :radius=\"1\"\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/PolarCoordinates>\n\u003C/Shader>\n",[34,44408,44409,44417,44424,44432,44440,44444,44452,44460],{"__ignoreMap":32},[37,44410,44411,44413,44415],{"class":39,"line":40},[37,44412,44],{"class":43},[37,44414,48],{"class":47},[37,44416,62],{"class":43},[37,44418,44419,44421],{"class":39,"line":65},[37,44420,75],{"class":43},[37,44422,44423],{"class":47},"PolarCoordinates\n",[37,44425,44426,44428,44430],{"class":39,"line":72},[37,44427,15113],{"class":51},[37,44429,55],{"class":43},[37,44431,29039],{"class":58},[37,44433,44434,44436,44438],{"class":39,"line":116},[37,44435,18081],{"class":51},[37,44437,55],{"class":43},[37,44439,29039],{"class":58},[37,44441,44442],{"class":39,"line":123},[37,44443,27161],{"class":43},[37,44445,44446,44448,44450],{"class":39,"line":129},[37,44447,174],{"class":43},[37,44449,3293],{"class":47},[37,44451,113],{"class":43},[37,44453,44454,44456,44458],{"class":39,"line":171},[37,44455,224],{"class":43},[37,44457,44384],{"class":47},[37,44459,62],{"class":43},[37,44461,44462,44464,44466],{"class":39,"line":221},[37,44463,273],{"class":43},[37,44465,48],{"class":47},[37,44467,62],{"class":43},[27,44469,44471],{"className":280,"code":44470,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CPolarCoordinates\n radius={1}\n intensity={1}\n >\n \u003CCircle />\n \u003C/PolarCoordinates>\n\u003C/Shader>\n",[34,44472,44473,44481,44487,44499,44511,44515,44523,44531],{"__ignoreMap":32},[37,44474,44475,44477,44479],{"class":39,"line":40},[37,44476,44],{"class":43},[37,44478,48],{"class":291},[37,44480,62],{"class":43},[37,44482,44483,44485],{"class":39,"line":65},[37,44484,75],{"class":43},[37,44486,44423],{"class":291},[37,44488,44489,44491,44493,44495,44497],{"class":39,"line":72},[37,44490,7580],{"class":51},[37,44492,55],{"class":297},[37,44494,326],{"class":43},[37,44496,6614],{"class":291},[37,44498,312],{"class":43},[37,44500,44501,44503,44505,44507,44509],{"class":39,"line":116},[37,44502,18192],{"class":51},[37,44504,55],{"class":297},[37,44506,326],{"class":43},[37,44508,6614],{"class":291},[37,44510,312],{"class":43},[37,44512,44513],{"class":39,"line":123},[37,44514,27161],{"class":43},[37,44516,44517,44519,44521],{"class":39,"line":129},[37,44518,174],{"class":43},[37,44520,3293],{"class":291},[37,44522,113],{"class":43},[37,44524,44525,44527,44529],{"class":39,"line":171},[37,44526,224],{"class":43},[37,44528,44384],{"class":291},[37,44530,62],{"class":43},[37,44532,44533,44535,44537],{"class":39,"line":221},[37,44534,273],{"class":43},[37,44536,48],{"class":291},[37,44538,62],{"class":43},[27,44540,44541],{"className":3580,"code":44470,"language":3582,"meta":32,"style":32},[34,44542,44543,44551,44557,44567,44577,44581,44589,44597],{"__ignoreMap":32},[37,44544,44545,44547,44549],{"class":39,"line":40},[37,44546,44],{"class":43},[37,44548,48],{"class":291},[37,44550,62],{"class":43},[37,44552,44553,44555],{"class":39,"line":65},[37,44554,75],{"class":43},[37,44556,44423],{"class":291},[37,44558,44559,44561,44563,44565],{"class":39,"line":72},[37,44560,7580],{"class":51},[37,44562,25058],{"class":43},[37,44564,6614],{"class":291},[37,44566,312],{"class":43},[37,44568,44569,44571,44573,44575],{"class":39,"line":116},[37,44570,18192],{"class":51},[37,44572,25058],{"class":43},[37,44574,6614],{"class":291},[37,44576,312],{"class":43},[37,44578,44579],{"class":39,"line":123},[37,44580,27161],{"class":43},[37,44582,44583,44585,44587],{"class":39,"line":129},[37,44584,174],{"class":43},[37,44586,3293],{"class":291},[37,44588,113],{"class":43},[37,44590,44591,44593,44595],{"class":39,"line":171},[37,44592,224],{"class":43},[37,44594,44384],{"class":291},[37,44596,62],{"class":43},[37,44598,44599,44601,44603],{"class":39,"line":221},[37,44600,273],{"class":43},[37,44602,48],{"class":291},[37,44604,62],{"class":43},[27,44606,44607],{"className":543,"code":44470,"language":545,"meta":32,"style":32},[34,44608,44609,44617,44623,44635,44647,44651,44659,44667],{"__ignoreMap":32},[37,44610,44611,44613,44615],{"class":39,"line":40},[37,44612,44],{"class":43},[37,44614,48],{"class":291},[37,44616,62],{"class":43},[37,44618,44619,44621],{"class":39,"line":65},[37,44620,75],{"class":43},[37,44622,44423],{"class":291},[37,44624,44625,44627,44629,44631,44633],{"class":39,"line":72},[37,44626,7580],{"class":51},[37,44628,55],{"class":297},[37,44630,326],{"class":43},[37,44632,6614],{"class":291},[37,44634,312],{"class":43},[37,44636,44637,44639,44641,44643,44645],{"class":39,"line":116},[37,44638,18192],{"class":51},[37,44640,55],{"class":297},[37,44642,326],{"class":43},[37,44644,6614],{"class":291},[37,44646,312],{"class":43},[37,44648,44649],{"class":39,"line":123},[37,44650,27161],{"class":43},[37,44652,44653,44655,44657],{"class":39,"line":129},[37,44654,174],{"class":43},[37,44656,3293],{"class":291},[37,44658,113],{"class":43},[37,44660,44661,44663,44665],{"class":39,"line":171},[37,44662,224],{"class":43},[37,44664,44384],{"class":291},[37,44666,62],{"class":43},[37,44668,44669,44671,44673],{"class":39,"line":221},[37,44670,273],{"class":43},[37,44672,48],{"class":291},[37,44674,62],{"class":43},[27,44676,44678],{"className":987,"code":44677,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'PolarCoordinates', props: { radius: 1, intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,44679,44680,44690,44694,44708,44712,44729,44737,44741,44745],{"__ignoreMap":32},[37,44681,44682,44684,44686,44688],{"class":39,"line":40},[37,44683,1382],{"class":297},[37,44685,9444],{"class":43},[37,44687,1388],{"class":297},[37,44689,9449],{"class":58},[37,44691,44692],{"class":39,"line":65},[37,44693,120],{"emptyLinePlaceholder":119},[37,44695,44696,44698,44700,44702,44704,44706],{"class":39,"line":72},[37,44697,2809],{"class":297},[37,44699,2812],{"class":291},[37,44701,2815],{"class":297},[37,44703,2818],{"class":297},[37,44705,999],{"class":51},[37,44707,1002],{"class":43},[37,44709,44710],{"class":39,"line":116},[37,44711,1007],{"class":43},[37,44713,44714,44716,44719,44721,44723,44725,44727],{"class":39,"line":123},[37,44715,1017],{"class":43},[37,44717,44718],{"class":58},"'PolarCoordinates'",[37,44720,5477],{"class":43},[37,44722,6614],{"class":291},[37,44724,34633],{"class":43},[37,44726,6614],{"class":291},[37,44728,5482],{"class":43},[37,44730,44731,44733,44735],{"class":39,"line":129},[37,44732,4949],{"class":43},[37,44734,3941],{"class":58},[37,44736,3207],{"class":43},[37,44738,44739],{"class":39,"line":171},[37,44740,4966],{"class":43},[37,44742,44743],{"class":39,"line":221},[37,44744,1194],{"class":43},[37,44746,44747],{"class":39,"line":231},[37,44748,1200],{"class":43},[1311,44750,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":44752},[44753,44754],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/polarcoordinates",{"title":44384,"description":44392},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":44761,"title":44762,"body":44763,"category":30939,"componentType":21056,"description":44770,"extension":1323,"meta":45047,"navigation":119,"path":45048,"requiresChild":27975,"seo":45049,"stem":45050,"__hash__":45051},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":44764,"toc":45043},[44765,44768,44771,44773,44775,44778,44780,45041],[11,44766,44762],{"id":44767},"polygon",[15,44769,44770],{},"Regular polygon with adjustable sides and corner rounding",[27113,44772],{"component":44762},[1202,44774,27117],{"id":21717},[27119,44776],{":props":44777},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the polygon\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the polygon\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Circumradius — distance from center to vertices in UV space\"},{\"name\":\"sides\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of sides (3 = triangle, 4 = square, 6 = hexagon, etc.)\"},{\"name\":\"rounding\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Corner rounding — 0 is sharp vertices, 1 morphs into a circle\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,44779,27125],{"id":27124},[23,44781,44782,44830,44881,44929,44979],{":tabs":25},[27,44783,44785],{"className":29,"code":44784,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[34,44786,44787,44795,44802,44810,44818,44822],{"__ignoreMap":32},[37,44788,44789,44791,44793],{"class":39,"line":40},[37,44790,44],{"class":43},[37,44792,48],{"class":47},[37,44794,62],{"class":43},[37,44796,44797,44799],{"class":39,"line":65},[37,44798,75],{"class":43},[37,44800,44801],{"class":47},"Polygon\n",[37,44803,44804,44806,44808],{"class":39,"line":72},[37,44805,7570],{"class":51},[37,44807,55],{"class":43},[37,44809,7526],{"class":58},[37,44811,44812,44814,44816],{"class":39,"line":116},[37,44813,15113],{"class":51},[37,44815,55],{"class":43},[37,44817,36474],{"class":58},[37,44819,44820],{"class":39,"line":123},[37,44821,2314],{"class":43},[37,44823,44824,44826,44828],{"class":39,"line":129},[37,44825,273],{"class":43},[37,44827,48],{"class":47},[37,44829,62],{"class":43},[27,44831,44833],{"className":280,"code":44832,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[34,44834,44835,44843,44849,44857,44869,44873],{"__ignoreMap":32},[37,44836,44837,44839,44841],{"class":39,"line":40},[37,44838,44],{"class":43},[37,44840,48],{"class":291},[37,44842,62],{"class":43},[37,44844,44845,44847],{"class":39,"line":65},[37,44846,75],{"class":43},[37,44848,44801],{"class":291},[37,44850,44851,44853,44855],{"class":39,"line":72},[37,44852,7570],{"class":51},[37,44854,55],{"class":297},[37,44856,7526],{"class":58},[37,44858,44859,44861,44863,44865,44867],{"class":39,"line":116},[37,44860,7580],{"class":51},[37,44862,55],{"class":297},[37,44864,326],{"class":43},[37,44866,6186],{"class":291},[37,44868,312],{"class":43},[37,44870,44871],{"class":39,"line":123},[37,44872,2314],{"class":43},[37,44874,44875,44877,44879],{"class":39,"line":129},[37,44876,273],{"class":43},[37,44878,48],{"class":291},[37,44880,62],{"class":43},[27,44882,44883],{"className":3580,"code":44832,"language":3582,"meta":32,"style":32},[34,44884,44885,44893,44899,44907,44917,44921],{"__ignoreMap":32},[37,44886,44887,44889,44891],{"class":39,"line":40},[37,44888,44],{"class":43},[37,44890,48],{"class":291},[37,44892,62],{"class":43},[37,44894,44895,44897],{"class":39,"line":65},[37,44896,75],{"class":43},[37,44898,44801],{"class":291},[37,44900,44901,44903,44905],{"class":39,"line":72},[37,44902,7570],{"class":51},[37,44904,55],{"class":43},[37,44906,7526],{"class":58},[37,44908,44909,44911,44913,44915],{"class":39,"line":116},[37,44910,7580],{"class":51},[37,44912,25058],{"class":43},[37,44914,6186],{"class":291},[37,44916,312],{"class":43},[37,44918,44919],{"class":39,"line":123},[37,44920,2314],{"class":43},[37,44922,44923,44925,44927],{"class":39,"line":129},[37,44924,273],{"class":43},[37,44926,48],{"class":291},[37,44928,62],{"class":43},[27,44930,44931],{"className":543,"code":44832,"language":545,"meta":32,"style":32},[34,44932,44933,44941,44947,44955,44967,44971],{"__ignoreMap":32},[37,44934,44935,44937,44939],{"class":39,"line":40},[37,44936,44],{"class":43},[37,44938,48],{"class":291},[37,44940,62],{"class":43},[37,44942,44943,44945],{"class":39,"line":65},[37,44944,75],{"class":43},[37,44946,44801],{"class":291},[37,44948,44949,44951,44953],{"class":39,"line":72},[37,44950,7570],{"class":51},[37,44952,55],{"class":297},[37,44954,7526],{"class":58},[37,44956,44957,44959,44961,44963,44965],{"class":39,"line":116},[37,44958,7580],{"class":51},[37,44960,55],{"class":297},[37,44962,326],{"class":43},[37,44964,6186],{"class":291},[37,44966,312],{"class":43},[37,44968,44969],{"class":39,"line":123},[37,44970,2314],{"class":43},[37,44972,44973,44975,44977],{"class":39,"line":129},[37,44974,273],{"class":43},[37,44976,48],{"class":291},[37,44978,62],{"class":43},[27,44980,44982],{"className":987,"code":44981,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Polygon', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[34,44983,44984,44994,44998,45012,45016,45033,45037],{"__ignoreMap":32},[37,44985,44986,44988,44990,44992],{"class":39,"line":40},[37,44987,1382],{"class":297},[37,44989,9444],{"class":43},[37,44991,1388],{"class":297},[37,44993,9449],{"class":58},[37,44995,44996],{"class":39,"line":65},[37,44997,120],{"emptyLinePlaceholder":119},[37,44999,45000,45002,45004,45006,45008,45010],{"class":39,"line":72},[37,45001,2809],{"class":297},[37,45003,2812],{"class":291},[37,45005,2815],{"class":297},[37,45007,2818],{"class":297},[37,45009,999],{"class":51},[37,45011,1002],{"class":43},[37,45013,45014],{"class":39,"line":116},[37,45015,1007],{"class":43},[37,45017,45018,45020,45023,45025,45027,45029,45031],{"class":39,"line":123},[37,45019,1017],{"class":43},[37,45021,45022],{"class":58},"'Polygon'",[37,45024,2845],{"class":43},[37,45026,8101],{"class":58},[37,45028,4501],{"class":43},[37,45030,6186],{"class":291},[37,45032,1142],{"class":43},[37,45034,45035],{"class":39,"line":129},[37,45036,1194],{"class":43},[37,45038,45039],{"class":39,"line":171},[37,45040,1200],{"class":43},[1311,45042,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":45044},[45045,45046],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/polygon",{"title":44762,"description":44770},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":45053,"title":45054,"body":45055,"category":28983,"componentType":21062,"description":45062,"extension":1323,"meta":45380,"navigation":119,"path":45381,"requiresChild":119,"seo":45382,"stem":45383,"__hash__":45384},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":45056,"toc":45376},[45057,45060,45063,45065,45067,45070,45072,45374],[11,45058,45054],{"id":45059},"posterize",[15,45061,45062],{},"Reduce color depth to create a poster effect",[27113,45064],{"component":45054},[1202,45066,27117],{"id":21717},[27119,45068],{":props":45069},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[1202,45071,27125],{"id":27124},[23,45073,45074,45131,45190,45246,45304],{":tabs":25},[27,45075,45077],{"className":29,"code":45076,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[34,45078,45079,45087,45094,45103,45107,45115,45123],{"__ignoreMap":32},[37,45080,45081,45083,45085],{"class":39,"line":40},[37,45082,44],{"class":43},[37,45084,48],{"class":47},[37,45086,62],{"class":43},[37,45088,45089,45091],{"class":39,"line":65},[37,45090,75],{"class":43},[37,45092,45093],{"class":47},"Posterize\n",[37,45095,45096,45098,45100],{"class":39,"line":72},[37,45097,18081],{"class":51},[37,45099,55],{"class":43},[37,45101,45102],{"class":58},"\"5\"\n",[37,45104,45105],{"class":39,"line":116},[37,45106,27161],{"class":43},[37,45108,45109,45111,45113],{"class":39,"line":123},[37,45110,174],{"class":43},[37,45112,3293],{"class":47},[37,45114,113],{"class":43},[37,45116,45117,45119,45121],{"class":39,"line":129},[37,45118,224],{"class":43},[37,45120,45054],{"class":47},[37,45122,62],{"class":43},[37,45124,45125,45127,45129],{"class":39,"line":171},[37,45126,273],{"class":43},[37,45128,48],{"class":47},[37,45130,62],{"class":43},[27,45132,45134],{"className":280,"code":45133,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[34,45135,45136,45144,45150,45162,45166,45174,45182],{"__ignoreMap":32},[37,45137,45138,45140,45142],{"class":39,"line":40},[37,45139,44],{"class":43},[37,45141,48],{"class":291},[37,45143,62],{"class":43},[37,45145,45146,45148],{"class":39,"line":65},[37,45147,75],{"class":43},[37,45149,45093],{"class":291},[37,45151,45152,45154,45156,45158,45160],{"class":39,"line":72},[37,45153,18192],{"class":51},[37,45155,55],{"class":297},[37,45157,326],{"class":43},[37,45159,402],{"class":291},[37,45161,312],{"class":43},[37,45163,45164],{"class":39,"line":116},[37,45165,27161],{"class":43},[37,45167,45168,45170,45172],{"class":39,"line":123},[37,45169,174],{"class":43},[37,45171,3293],{"class":291},[37,45173,113],{"class":43},[37,45175,45176,45178,45180],{"class":39,"line":129},[37,45177,224],{"class":43},[37,45179,45054],{"class":291},[37,45181,62],{"class":43},[37,45183,45184,45186,45188],{"class":39,"line":171},[37,45185,273],{"class":43},[37,45187,48],{"class":291},[37,45189,62],{"class":43},[27,45191,45192],{"className":3580,"code":45133,"language":3582,"meta":32,"style":32},[34,45193,45194,45202,45208,45218,45222,45230,45238],{"__ignoreMap":32},[37,45195,45196,45198,45200],{"class":39,"line":40},[37,45197,44],{"class":43},[37,45199,48],{"class":291},[37,45201,62],{"class":43},[37,45203,45204,45206],{"class":39,"line":65},[37,45205,75],{"class":43},[37,45207,45093],{"class":291},[37,45209,45210,45212,45214,45216],{"class":39,"line":72},[37,45211,18192],{"class":51},[37,45213,25058],{"class":43},[37,45215,402],{"class":291},[37,45217,312],{"class":43},[37,45219,45220],{"class":39,"line":116},[37,45221,27161],{"class":43},[37,45223,45224,45226,45228],{"class":39,"line":123},[37,45225,174],{"class":43},[37,45227,3293],{"class":291},[37,45229,113],{"class":43},[37,45231,45232,45234,45236],{"class":39,"line":129},[37,45233,224],{"class":43},[37,45235,45054],{"class":291},[37,45237,62],{"class":43},[37,45239,45240,45242,45244],{"class":39,"line":171},[37,45241,273],{"class":43},[37,45243,48],{"class":291},[37,45245,62],{"class":43},[27,45247,45248],{"className":543,"code":45133,"language":545,"meta":32,"style":32},[34,45249,45250,45258,45264,45276,45280,45288,45296],{"__ignoreMap":32},[37,45251,45252,45254,45256],{"class":39,"line":40},[37,45253,44],{"class":43},[37,45255,48],{"class":291},[37,45257,62],{"class":43},[37,45259,45260,45262],{"class":39,"line":65},[37,45261,75],{"class":43},[37,45263,45093],{"class":291},[37,45265,45266,45268,45270,45272,45274],{"class":39,"line":72},[37,45267,18192],{"class":51},[37,45269,55],{"class":297},[37,45271,326],{"class":43},[37,45273,402],{"class":291},[37,45275,312],{"class":43},[37,45277,45278],{"class":39,"line":116},[37,45279,27161],{"class":43},[37,45281,45282,45284,45286],{"class":39,"line":123},[37,45283,174],{"class":43},[37,45285,3293],{"class":291},[37,45287,113],{"class":43},[37,45289,45290,45292,45294],{"class":39,"line":129},[37,45291,224],{"class":43},[37,45293,45054],{"class":291},[37,45295,62],{"class":43},[37,45297,45298,45300,45302],{"class":39,"line":171},[37,45299,273],{"class":43},[37,45301,48],{"class":291},[37,45303,62],{"class":43},[27,45305,45307],{"className":987,"code":45306,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Posterize', props: { intensity: 5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,45308,45309,45319,45323,45337,45341,45354,45362,45366,45370],{"__ignoreMap":32},[37,45310,45311,45313,45315,45317],{"class":39,"line":40},[37,45312,1382],{"class":297},[37,45314,9444],{"class":43},[37,45316,1388],{"class":297},[37,45318,9449],{"class":58},[37,45320,45321],{"class":39,"line":65},[37,45322,120],{"emptyLinePlaceholder":119},[37,45324,45325,45327,45329,45331,45333,45335],{"class":39,"line":72},[37,45326,2809],{"class":297},[37,45328,2812],{"class":291},[37,45330,2815],{"class":297},[37,45332,2818],{"class":297},[37,45334,999],{"class":51},[37,45336,1002],{"class":43},[37,45338,45339],{"class":39,"line":116},[37,45340,1007],{"class":43},[37,45342,45343,45345,45348,45350,45352],{"class":39,"line":123},[37,45344,1017],{"class":43},[37,45346,45347],{"class":58},"'Posterize'",[37,45349,27406],{"class":43},[37,45351,402],{"class":291},[37,45353,5482],{"class":43},[37,45355,45356,45358,45360],{"class":39,"line":129},[37,45357,4949],{"class":43},[37,45359,3941],{"class":58},[37,45361,3207],{"class":43},[37,45363,45364],{"class":39,"line":171},[37,45365,4966],{"class":43},[37,45367,45368],{"class":39,"line":221},[37,45369,1194],{"class":43},[37,45371,45372],{"class":39,"line":231},[37,45373,1200],{"class":43},[1311,45375,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":45377},[45378,45379],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/posterize",{"title":45054,"description":45062},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":45386,"title":45387,"body":45388,"category":27437,"componentType":21062,"description":45395,"extension":1323,"meta":45712,"navigation":119,"path":45713,"requiresChild":119,"seo":45714,"stem":45715,"__hash__":45716},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":45389,"toc":45708},[45390,45393,45396,45398,45400,45403,45405,45706],[11,45391,45387],{"id":45392},"progressiveblur",[15,45394,45395],{},"Blur that increases progressively in one direction",[27113,45397],{"component":45387},[1202,45399,27117],{"id":21717},[27119,45401],{":props":45402},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Maximum intensity of the blur effect\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the blur gradient (in degrees)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":0.5}\",\"description\":\"Center point where blur begins\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Distance over which blur transitions to full strength\"}]",[1202,45404,27125],{"id":27124},[23,45406,45407,45463,45522,45578,45636],{":tabs":25},[27,45408,45410],{"className":29,"code":45409,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[34,45411,45412,45420,45427,45435,45439,45447,45455],{"__ignoreMap":32},[37,45413,45414,45416,45418],{"class":39,"line":40},[37,45415,44],{"class":43},[37,45417,48],{"class":47},[37,45419,62],{"class":43},[37,45421,45422,45424],{"class":39,"line":65},[37,45423,75],{"class":43},[37,45425,45426],{"class":47},"ProgressiveBlur\n",[37,45428,45429,45431,45433],{"class":39,"line":72},[37,45430,18081],{"class":51},[37,45432,55],{"class":43},[37,45434,28428],{"class":58},[37,45436,45437],{"class":39,"line":116},[37,45438,27161],{"class":43},[37,45440,45441,45443,45445],{"class":39,"line":123},[37,45442,174],{"class":43},[37,45444,3293],{"class":47},[37,45446,113],{"class":43},[37,45448,45449,45451,45453],{"class":39,"line":129},[37,45450,224],{"class":43},[37,45452,45387],{"class":47},[37,45454,62],{"class":43},[37,45456,45457,45459,45461],{"class":39,"line":171},[37,45458,273],{"class":43},[37,45460,48],{"class":47},[37,45462,62],{"class":43},[27,45464,45466],{"className":280,"code":45465,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[34,45467,45468,45476,45482,45494,45498,45506,45514],{"__ignoreMap":32},[37,45469,45470,45472,45474],{"class":39,"line":40},[37,45471,44],{"class":43},[37,45473,48],{"class":291},[37,45475,62],{"class":43},[37,45477,45478,45480],{"class":39,"line":65},[37,45479,75],{"class":43},[37,45481,45426],{"class":291},[37,45483,45484,45486,45488,45490,45492],{"class":39,"line":72},[37,45485,18192],{"class":51},[37,45487,55],{"class":297},[37,45489,326],{"class":43},[37,45491,28486],{"class":291},[37,45493,312],{"class":43},[37,45495,45496],{"class":39,"line":116},[37,45497,27161],{"class":43},[37,45499,45500,45502,45504],{"class":39,"line":123},[37,45501,174],{"class":43},[37,45503,3293],{"class":291},[37,45505,113],{"class":43},[37,45507,45508,45510,45512],{"class":39,"line":129},[37,45509,224],{"class":43},[37,45511,45387],{"class":291},[37,45513,62],{"class":43},[37,45515,45516,45518,45520],{"class":39,"line":171},[37,45517,273],{"class":43},[37,45519,48],{"class":291},[37,45521,62],{"class":43},[27,45523,45524],{"className":3580,"code":45465,"language":3582,"meta":32,"style":32},[34,45525,45526,45534,45540,45550,45554,45562,45570],{"__ignoreMap":32},[37,45527,45528,45530,45532],{"class":39,"line":40},[37,45529,44],{"class":43},[37,45531,48],{"class":291},[37,45533,62],{"class":43},[37,45535,45536,45538],{"class":39,"line":65},[37,45537,75],{"class":43},[37,45539,45426],{"class":291},[37,45541,45542,45544,45546,45548],{"class":39,"line":72},[37,45543,18192],{"class":51},[37,45545,25058],{"class":43},[37,45547,28486],{"class":291},[37,45549,312],{"class":43},[37,45551,45552],{"class":39,"line":116},[37,45553,27161],{"class":43},[37,45555,45556,45558,45560],{"class":39,"line":123},[37,45557,174],{"class":43},[37,45559,3293],{"class":291},[37,45561,113],{"class":43},[37,45563,45564,45566,45568],{"class":39,"line":129},[37,45565,224],{"class":43},[37,45567,45387],{"class":291},[37,45569,62],{"class":43},[37,45571,45572,45574,45576],{"class":39,"line":171},[37,45573,273],{"class":43},[37,45575,48],{"class":291},[37,45577,62],{"class":43},[27,45579,45580],{"className":543,"code":45465,"language":545,"meta":32,"style":32},[34,45581,45582,45590,45596,45608,45612,45620,45628],{"__ignoreMap":32},[37,45583,45584,45586,45588],{"class":39,"line":40},[37,45585,44],{"class":43},[37,45587,48],{"class":291},[37,45589,62],{"class":43},[37,45591,45592,45594],{"class":39,"line":65},[37,45593,75],{"class":43},[37,45595,45426],{"class":291},[37,45597,45598,45600,45602,45604,45606],{"class":39,"line":72},[37,45599,18192],{"class":51},[37,45601,55],{"class":297},[37,45603,326],{"class":43},[37,45605,28486],{"class":291},[37,45607,312],{"class":43},[37,45609,45610],{"class":39,"line":116},[37,45611,27161],{"class":43},[37,45613,45614,45616,45618],{"class":39,"line":123},[37,45615,174],{"class":43},[37,45617,3293],{"class":291},[37,45619,113],{"class":43},[37,45621,45622,45624,45626],{"class":39,"line":129},[37,45623,224],{"class":43},[37,45625,45387],{"class":291},[37,45627,62],{"class":43},[37,45629,45630,45632,45634],{"class":39,"line":171},[37,45631,273],{"class":43},[37,45633,48],{"class":291},[37,45635,62],{"class":43},[27,45637,45639],{"className":987,"code":45638,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ProgressiveBlur', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,45640,45641,45651,45655,45669,45673,45686,45694,45698,45702],{"__ignoreMap":32},[37,45642,45643,45645,45647,45649],{"class":39,"line":40},[37,45644,1382],{"class":297},[37,45646,9444],{"class":43},[37,45648,1388],{"class":297},[37,45650,9449],{"class":58},[37,45652,45653],{"class":39,"line":65},[37,45654,120],{"emptyLinePlaceholder":119},[37,45656,45657,45659,45661,45663,45665,45667],{"class":39,"line":72},[37,45658,2809],{"class":297},[37,45660,2812],{"class":291},[37,45662,2815],{"class":297},[37,45664,2818],{"class":297},[37,45666,999],{"class":51},[37,45668,1002],{"class":43},[37,45670,45671],{"class":39,"line":116},[37,45672,1007],{"class":43},[37,45674,45675,45677,45680,45682,45684],{"class":39,"line":123},[37,45676,1017],{"class":43},[37,45678,45679],{"class":58},"'ProgressiveBlur'",[37,45681,27406],{"class":43},[37,45683,28486],{"class":291},[37,45685,5482],{"class":43},[37,45687,45688,45690,45692],{"class":39,"line":129},[37,45689,4949],{"class":43},[37,45691,3941],{"class":58},[37,45693,3207],{"class":43},[37,45695,45696],{"class":39,"line":171},[37,45697,4966],{"class":43},[37,45699,45700],{"class":39,"line":221},[37,45701,1194],{"class":43},[37,45703,45704],{"class":39,"line":231},[37,45705,1200],{"class":43},[1311,45707,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":45709},[45710,45711],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/progressiveblur",{"title":45387,"description":45395},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":45718,"title":45719,"body":45720,"category":27972,"componentType":21056,"description":45727,"extension":1323,"meta":45968,"navigation":119,"path":45969,"requiresChild":27975,"seo":45970,"stem":45971,"__hash__":45972},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":45721,"toc":45964},[45722,45725,45728,45730,45732,45735,45737,45962],[11,45723,45719],{"id":45724},"radialgradient",[15,45726,45727],{},"Radial gradient radiating from a center point",[27113,45729],{"component":45719},[1202,45731,27117],{"id":21717},[27119,45733],{":props":45734},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"The starting color at the center of the gradient\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#0000ff\",\"description\":\"The ending color at the edge of the gradient\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the radial gradient\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The radius of the gradient (normalized, 0.0-1.0)\"},{\"name\":\"repeat\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of times the gradient repeats. Values above 1 create concentric rings.\"},{\"name\":\"aspect\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Stretches the gradient into an ellipse. Values below 1 compress vertically, above 1 compress horizontally.\"},{\"name\":\"skewAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotates the ellipse axis in degrees. Only visible when Aspect is not 1.\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,45736,27125],{"id":27124},[23,45738,45739,45779,45822,45862,45904],{":tabs":25},[27,45740,45742],{"className":29,"code":45741,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[34,45743,45744,45752,45759,45767,45771],{"__ignoreMap":32},[37,45745,45746,45748,45750],{"class":39,"line":40},[37,45747,44],{"class":43},[37,45749,48],{"class":47},[37,45751,62],{"class":43},[37,45753,45754,45756],{"class":39,"line":65},[37,45755,75],{"class":43},[37,45757,45758],{"class":47},"RadialGradient\n",[37,45760,45761,45763,45765],{"class":39,"line":72},[37,45762,15113],{"class":51},[37,45764,55],{"class":43},[37,45766,29039],{"class":58},[37,45768,45769],{"class":39,"line":116},[37,45770,2314],{"class":43},[37,45772,45773,45775,45777],{"class":39,"line":123},[37,45774,273],{"class":43},[37,45776,48],{"class":47},[37,45778,62],{"class":43},[27,45780,45782],{"className":280,"code":45781,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[34,45783,45784,45792,45798,45810,45814],{"__ignoreMap":32},[37,45785,45786,45788,45790],{"class":39,"line":40},[37,45787,44],{"class":43},[37,45789,48],{"class":291},[37,45791,62],{"class":43},[37,45793,45794,45796],{"class":39,"line":65},[37,45795,75],{"class":43},[37,45797,45758],{"class":291},[37,45799,45800,45802,45804,45806,45808],{"class":39,"line":72},[37,45801,7580],{"class":51},[37,45803,55],{"class":297},[37,45805,326],{"class":43},[37,45807,6614],{"class":291},[37,45809,312],{"class":43},[37,45811,45812],{"class":39,"line":116},[37,45813,2314],{"class":43},[37,45815,45816,45818,45820],{"class":39,"line":123},[37,45817,273],{"class":43},[37,45819,48],{"class":291},[37,45821,62],{"class":43},[27,45823,45824],{"className":3580,"code":45781,"language":3582,"meta":32,"style":32},[34,45825,45826,45834,45840,45850,45854],{"__ignoreMap":32},[37,45827,45828,45830,45832],{"class":39,"line":40},[37,45829,44],{"class":43},[37,45831,48],{"class":291},[37,45833,62],{"class":43},[37,45835,45836,45838],{"class":39,"line":65},[37,45837,75],{"class":43},[37,45839,45758],{"class":291},[37,45841,45842,45844,45846,45848],{"class":39,"line":72},[37,45843,7580],{"class":51},[37,45845,25058],{"class":43},[37,45847,6614],{"class":291},[37,45849,312],{"class":43},[37,45851,45852],{"class":39,"line":116},[37,45853,2314],{"class":43},[37,45855,45856,45858,45860],{"class":39,"line":123},[37,45857,273],{"class":43},[37,45859,48],{"class":291},[37,45861,62],{"class":43},[27,45863,45864],{"className":543,"code":45781,"language":545,"meta":32,"style":32},[34,45865,45866,45874,45880,45892,45896],{"__ignoreMap":32},[37,45867,45868,45870,45872],{"class":39,"line":40},[37,45869,44],{"class":43},[37,45871,48],{"class":291},[37,45873,62],{"class":43},[37,45875,45876,45878],{"class":39,"line":65},[37,45877,75],{"class":43},[37,45879,45758],{"class":291},[37,45881,45882,45884,45886,45888,45890],{"class":39,"line":72},[37,45883,7580],{"class":51},[37,45885,55],{"class":297},[37,45887,326],{"class":43},[37,45889,6614],{"class":291},[37,45891,312],{"class":43},[37,45893,45894],{"class":39,"line":116},[37,45895,2314],{"class":43},[37,45897,45898,45900,45902],{"class":39,"line":123},[37,45899,273],{"class":43},[37,45901,48],{"class":291},[37,45903,62],{"class":43},[27,45905,45907],{"className":987,"code":45906,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RadialGradient', props: { radius: 1 } }\n ]\n})\n",[34,45908,45909,45919,45923,45937,45941,45954,45958],{"__ignoreMap":32},[37,45910,45911,45913,45915,45917],{"class":39,"line":40},[37,45912,1382],{"class":297},[37,45914,9444],{"class":43},[37,45916,1388],{"class":297},[37,45918,9449],{"class":58},[37,45920,45921],{"class":39,"line":65},[37,45922,120],{"emptyLinePlaceholder":119},[37,45924,45925,45927,45929,45931,45933,45935],{"class":39,"line":72},[37,45926,2809],{"class":297},[37,45928,2812],{"class":291},[37,45930,2815],{"class":297},[37,45932,2818],{"class":297},[37,45934,999],{"class":51},[37,45936,1002],{"class":43},[37,45938,45939],{"class":39,"line":116},[37,45940,1007],{"class":43},[37,45942,45943,45945,45948,45950,45952],{"class":39,"line":123},[37,45944,1017],{"class":43},[37,45946,45947],{"class":58},"'RadialGradient'",[37,45949,5477],{"class":43},[37,45951,6614],{"class":291},[37,45953,1142],{"class":43},[37,45955,45956],{"class":39,"line":129},[37,45957,1194],{"class":43},[37,45959,45960],{"class":39,"line":171},[37,45961,1200],{"class":43},[1311,45963,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":45965},[45966,45967],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/radialgradient",{"title":45719,"description":45727},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":45974,"title":45975,"body":45976,"category":29317,"componentType":21062,"description":45983,"extension":1323,"meta":46300,"navigation":119,"path":46301,"requiresChild":119,"seo":46302,"stem":46303,"__hash__":46304},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":45977,"toc":46296},[45978,45981,45984,45986,45988,45991,45993,46294],[11,45979,45975],{"id":45980},"rectangularcoordinates",[15,45982,45983],{},"Convert polar coordinates back to rectangular space",[27113,45985],{"component":45975},[1202,45987,27117],{"id":21717},[27119,45989],{":props":45990},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point for rectangular coordinate conversion\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale factor for the rectangular output\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blends between original UVs (0) and rectangular coordinates (1)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"transparent\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,45992,27125],{"id":27124},[23,45994,45995,46051,46110,46166,46224],{":tabs":25},[27,45996,45998],{"className":29,"code":45997,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[34,45999,46000,46008,46015,46023,46027,46035,46043],{"__ignoreMap":32},[37,46001,46002,46004,46006],{"class":39,"line":40},[37,46003,44],{"class":43},[37,46005,48],{"class":47},[37,46007,62],{"class":43},[37,46009,46010,46012],{"class":39,"line":65},[37,46011,75],{"class":43},[37,46013,46014],{"class":47},"RectangularCoordinates\n",[37,46016,46017,46019,46021],{"class":39,"line":72},[37,46018,18081],{"class":51},[37,46020,55],{"class":43},[37,46022,29039],{"class":58},[37,46024,46025],{"class":39,"line":116},[37,46026,27161],{"class":43},[37,46028,46029,46031,46033],{"class":39,"line":123},[37,46030,174],{"class":43},[37,46032,3293],{"class":47},[37,46034,113],{"class":43},[37,46036,46037,46039,46041],{"class":39,"line":129},[37,46038,224],{"class":43},[37,46040,45975],{"class":47},[37,46042,62],{"class":43},[37,46044,46045,46047,46049],{"class":39,"line":171},[37,46046,273],{"class":43},[37,46048,48],{"class":47},[37,46050,62],{"class":43},[27,46052,46054],{"className":280,"code":46053,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[34,46055,46056,46064,46070,46082,46086,46094,46102],{"__ignoreMap":32},[37,46057,46058,46060,46062],{"class":39,"line":40},[37,46059,44],{"class":43},[37,46061,48],{"class":291},[37,46063,62],{"class":43},[37,46065,46066,46068],{"class":39,"line":65},[37,46067,75],{"class":43},[37,46069,46014],{"class":291},[37,46071,46072,46074,46076,46078,46080],{"class":39,"line":72},[37,46073,18192],{"class":51},[37,46075,55],{"class":297},[37,46077,326],{"class":43},[37,46079,6614],{"class":291},[37,46081,312],{"class":43},[37,46083,46084],{"class":39,"line":116},[37,46085,27161],{"class":43},[37,46087,46088,46090,46092],{"class":39,"line":123},[37,46089,174],{"class":43},[37,46091,3293],{"class":291},[37,46093,113],{"class":43},[37,46095,46096,46098,46100],{"class":39,"line":129},[37,46097,224],{"class":43},[37,46099,45975],{"class":291},[37,46101,62],{"class":43},[37,46103,46104,46106,46108],{"class":39,"line":171},[37,46105,273],{"class":43},[37,46107,48],{"class":291},[37,46109,62],{"class":43},[27,46111,46112],{"className":3580,"code":46053,"language":3582,"meta":32,"style":32},[34,46113,46114,46122,46128,46138,46142,46150,46158],{"__ignoreMap":32},[37,46115,46116,46118,46120],{"class":39,"line":40},[37,46117,44],{"class":43},[37,46119,48],{"class":291},[37,46121,62],{"class":43},[37,46123,46124,46126],{"class":39,"line":65},[37,46125,75],{"class":43},[37,46127,46014],{"class":291},[37,46129,46130,46132,46134,46136],{"class":39,"line":72},[37,46131,18192],{"class":51},[37,46133,25058],{"class":43},[37,46135,6614],{"class":291},[37,46137,312],{"class":43},[37,46139,46140],{"class":39,"line":116},[37,46141,27161],{"class":43},[37,46143,46144,46146,46148],{"class":39,"line":123},[37,46145,174],{"class":43},[37,46147,3293],{"class":291},[37,46149,113],{"class":43},[37,46151,46152,46154,46156],{"class":39,"line":129},[37,46153,224],{"class":43},[37,46155,45975],{"class":291},[37,46157,62],{"class":43},[37,46159,46160,46162,46164],{"class":39,"line":171},[37,46161,273],{"class":43},[37,46163,48],{"class":291},[37,46165,62],{"class":43},[27,46167,46168],{"className":543,"code":46053,"language":545,"meta":32,"style":32},[34,46169,46170,46178,46184,46196,46200,46208,46216],{"__ignoreMap":32},[37,46171,46172,46174,46176],{"class":39,"line":40},[37,46173,44],{"class":43},[37,46175,48],{"class":291},[37,46177,62],{"class":43},[37,46179,46180,46182],{"class":39,"line":65},[37,46181,75],{"class":43},[37,46183,46014],{"class":291},[37,46185,46186,46188,46190,46192,46194],{"class":39,"line":72},[37,46187,18192],{"class":51},[37,46189,55],{"class":297},[37,46191,326],{"class":43},[37,46193,6614],{"class":291},[37,46195,312],{"class":43},[37,46197,46198],{"class":39,"line":116},[37,46199,27161],{"class":43},[37,46201,46202,46204,46206],{"class":39,"line":123},[37,46203,174],{"class":43},[37,46205,3293],{"class":291},[37,46207,113],{"class":43},[37,46209,46210,46212,46214],{"class":39,"line":129},[37,46211,224],{"class":43},[37,46213,45975],{"class":291},[37,46215,62],{"class":43},[37,46217,46218,46220,46222],{"class":39,"line":171},[37,46219,273],{"class":43},[37,46221,48],{"class":291},[37,46223,62],{"class":43},[27,46225,46227],{"className":987,"code":46226,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RectangularCoordinates', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,46228,46229,46239,46243,46257,46261,46274,46282,46286,46290],{"__ignoreMap":32},[37,46230,46231,46233,46235,46237],{"class":39,"line":40},[37,46232,1382],{"class":297},[37,46234,9444],{"class":43},[37,46236,1388],{"class":297},[37,46238,9449],{"class":58},[37,46240,46241],{"class":39,"line":65},[37,46242,120],{"emptyLinePlaceholder":119},[37,46244,46245,46247,46249,46251,46253,46255],{"class":39,"line":72},[37,46246,2809],{"class":297},[37,46248,2812],{"class":291},[37,46250,2815],{"class":297},[37,46252,2818],{"class":297},[37,46254,999],{"class":51},[37,46256,1002],{"class":43},[37,46258,46259],{"class":39,"line":116},[37,46260,1007],{"class":43},[37,46262,46263,46265,46268,46270,46272],{"class":39,"line":123},[37,46264,1017],{"class":43},[37,46266,46267],{"class":58},"'RectangularCoordinates'",[37,46269,27406],{"class":43},[37,46271,6614],{"class":291},[37,46273,5482],{"class":43},[37,46275,46276,46278,46280],{"class":39,"line":129},[37,46277,4949],{"class":43},[37,46279,3941],{"class":58},[37,46281,3207],{"class":43},[37,46283,46284],{"class":39,"line":171},[37,46285,4966],{"class":43},[37,46287,46288],{"class":39,"line":221},[37,46289,1194],{"class":43},[37,46291,46292],{"class":39,"line":231},[37,46293,1200],{"class":43},[1311,46295,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":46297},[46298,46299],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/rectangularcoordinates",{"title":45975,"description":45983},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":46306,"title":46307,"body":46308,"category":30939,"componentType":21056,"description":46315,"extension":1323,"meta":46592,"navigation":119,"path":46593,"requiresChild":27975,"seo":46594,"stem":46595,"__hash__":46596},"components/docs/components/Ring.md","Ring",{"type":8,"value":46309,"toc":46588},[46310,46313,46316,46318,46320,46323,46325,46586],[11,46311,46307],{"id":46312},"ring",[15,46314,46315],{},"Annular ring (donut) with adjustable radius and band thickness",[27113,46317],{"component":46307},[1202,46319,27117],{"id":21717},[27119,46321],{":props":46322},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the ring\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the ring\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Distance from center to the ring's midline in UV space\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.07\",\"description\":\"Half-width of the ring band — total ring width is twice this value\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing (applied to both inner and outer ring edges)\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the ring edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,46324,27125],{"id":27124},[23,46326,46327,46375,46426,46474,46524],{":tabs":25},[27,46328,46330],{"className":29,"code":46329,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[34,46331,46332,46340,46347,46355,46363,46367],{"__ignoreMap":32},[37,46333,46334,46336,46338],{"class":39,"line":40},[37,46335,44],{"class":43},[37,46337,48],{"class":47},[37,46339,62],{"class":43},[37,46341,46342,46344],{"class":39,"line":65},[37,46343,75],{"class":43},[37,46345,46346],{"class":47},"Ring\n",[37,46348,46349,46351,46353],{"class":39,"line":72},[37,46350,7570],{"class":51},[37,46352,55],{"class":43},[37,46354,7526],{"class":58},[37,46356,46357,46359,46361],{"class":39,"line":116},[37,46358,15113],{"class":51},[37,46360,55],{"class":43},[37,46362,31811],{"class":58},[37,46364,46365],{"class":39,"line":123},[37,46366,2314],{"class":43},[37,46368,46369,46371,46373],{"class":39,"line":129},[37,46370,273],{"class":43},[37,46372,48],{"class":47},[37,46374,62],{"class":43},[27,46376,46378],{"className":280,"code":46377,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[34,46379,46380,46388,46394,46402,46414,46418],{"__ignoreMap":32},[37,46381,46382,46384,46386],{"class":39,"line":40},[37,46383,44],{"class":43},[37,46385,48],{"class":291},[37,46387,62],{"class":43},[37,46389,46390,46392],{"class":39,"line":65},[37,46391,75],{"class":43},[37,46393,46346],{"class":291},[37,46395,46396,46398,46400],{"class":39,"line":72},[37,46397,7570],{"class":51},[37,46399,55],{"class":297},[37,46401,7526],{"class":58},[37,46403,46404,46406,46408,46410,46412],{"class":39,"line":116},[37,46405,7580],{"class":51},[37,46407,55],{"class":297},[37,46409,326],{"class":43},[37,46411,19694],{"class":291},[37,46413,312],{"class":43},[37,46415,46416],{"class":39,"line":123},[37,46417,2314],{"class":43},[37,46419,46420,46422,46424],{"class":39,"line":129},[37,46421,273],{"class":43},[37,46423,48],{"class":291},[37,46425,62],{"class":43},[27,46427,46428],{"className":3580,"code":46377,"language":3582,"meta":32,"style":32},[34,46429,46430,46438,46444,46452,46462,46466],{"__ignoreMap":32},[37,46431,46432,46434,46436],{"class":39,"line":40},[37,46433,44],{"class":43},[37,46435,48],{"class":291},[37,46437,62],{"class":43},[37,46439,46440,46442],{"class":39,"line":65},[37,46441,75],{"class":43},[37,46443,46346],{"class":291},[37,46445,46446,46448,46450],{"class":39,"line":72},[37,46447,7570],{"class":51},[37,46449,55],{"class":43},[37,46451,7526],{"class":58},[37,46453,46454,46456,46458,46460],{"class":39,"line":116},[37,46455,7580],{"class":51},[37,46457,25058],{"class":43},[37,46459,19694],{"class":291},[37,46461,312],{"class":43},[37,46463,46464],{"class":39,"line":123},[37,46465,2314],{"class":43},[37,46467,46468,46470,46472],{"class":39,"line":129},[37,46469,273],{"class":43},[37,46471,48],{"class":291},[37,46473,62],{"class":43},[27,46475,46476],{"className":543,"code":46377,"language":545,"meta":32,"style":32},[34,46477,46478,46486,46492,46500,46512,46516],{"__ignoreMap":32},[37,46479,46480,46482,46484],{"class":39,"line":40},[37,46481,44],{"class":43},[37,46483,48],{"class":291},[37,46485,62],{"class":43},[37,46487,46488,46490],{"class":39,"line":65},[37,46489,75],{"class":43},[37,46491,46346],{"class":291},[37,46493,46494,46496,46498],{"class":39,"line":72},[37,46495,7570],{"class":51},[37,46497,55],{"class":297},[37,46499,7526],{"class":58},[37,46501,46502,46504,46506,46508,46510],{"class":39,"line":116},[37,46503,7580],{"class":51},[37,46505,55],{"class":297},[37,46507,326],{"class":43},[37,46509,19694],{"class":291},[37,46511,312],{"class":43},[37,46513,46514],{"class":39,"line":123},[37,46515,2314],{"class":43},[37,46517,46518,46520,46522],{"class":39,"line":129},[37,46519,273],{"class":43},[37,46521,48],{"class":291},[37,46523,62],{"class":43},[27,46525,46527],{"className":987,"code":46526,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ring', props: { color: '#ffffff', radius: 0.3 } }\n ]\n})\n",[34,46528,46529,46539,46543,46557,46561,46578,46582],{"__ignoreMap":32},[37,46530,46531,46533,46535,46537],{"class":39,"line":40},[37,46532,1382],{"class":297},[37,46534,9444],{"class":43},[37,46536,1388],{"class":297},[37,46538,9449],{"class":58},[37,46540,46541],{"class":39,"line":65},[37,46542,120],{"emptyLinePlaceholder":119},[37,46544,46545,46547,46549,46551,46553,46555],{"class":39,"line":72},[37,46546,2809],{"class":297},[37,46548,2812],{"class":291},[37,46550,2815],{"class":297},[37,46552,2818],{"class":297},[37,46554,999],{"class":51},[37,46556,1002],{"class":43},[37,46558,46559],{"class":39,"line":116},[37,46560,1007],{"class":43},[37,46562,46563,46565,46568,46570,46572,46574,46576],{"class":39,"line":123},[37,46564,1017],{"class":43},[37,46566,46567],{"class":58},"'Ring'",[37,46569,2845],{"class":43},[37,46571,8101],{"class":58},[37,46573,4501],{"class":43},[37,46575,19694],{"class":291},[37,46577,1142],{"class":43},[37,46579,46580],{"class":39,"line":129},[37,46581,1194],{"class":43},[37,46583,46584],{"class":39,"line":171},[37,46585,1200],{"class":43},[1311,46587,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":46589},[46590,46591],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/ring",{"title":46307,"description":46315},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":46598,"title":46599,"body":46600,"category":27972,"componentType":21056,"description":46607,"extension":1323,"meta":46792,"navigation":119,"path":46793,"requiresChild":27975,"seo":46794,"stem":46795,"__hash__":46796},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":46601,"toc":46788},[46602,46605,46608,46610,46612,46615,46617,46786],[11,46603,46599],{"id":46604},"ripples",[15,46606,46607],{},"Concentric animated ripples emanating from a point",[27113,46609],{"component":46599},[1202,46611,27117],{"id":21717},[27119,46613],{":props":46614},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point where ripples emanate from\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the ripple waves\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background color between ripples\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Speed of ripple animation\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Number of ripples/spacing between them\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of ripple edges\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Thickness of each ripple band\"},{\"name\":\"phase\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Phase offset for ripple animation\"}]",[1202,46616,27125],{"id":27124},[23,46618,46619,46648,46676,46704,46732],{":tabs":25},[27,46620,46622],{"className":29,"code":46621,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[34,46623,46624,46632,46640],{"__ignoreMap":32},[37,46625,46626,46628,46630],{"class":39,"line":40},[37,46627,44],{"class":43},[37,46629,48],{"class":47},[37,46631,62],{"class":43},[37,46633,46634,46636,46638],{"class":39,"line":65},[37,46635,75],{"class":43},[37,46637,46599],{"class":47},[37,46639,113],{"class":43},[37,46641,46642,46644,46646],{"class":39,"line":72},[37,46643,273],{"class":43},[37,46645,48],{"class":47},[37,46647,62],{"class":43},[27,46649,46650],{"className":280,"code":46621,"language":282,"meta":32,"style":32},[34,46651,46652,46660,46668],{"__ignoreMap":32},[37,46653,46654,46656,46658],{"class":39,"line":40},[37,46655,44],{"class":43},[37,46657,48],{"class":291},[37,46659,62],{"class":43},[37,46661,46662,46664,46666],{"class":39,"line":65},[37,46663,75],{"class":43},[37,46665,46599],{"class":291},[37,46667,113],{"class":43},[37,46669,46670,46672,46674],{"class":39,"line":72},[37,46671,273],{"class":43},[37,46673,48],{"class":291},[37,46675,62],{"class":43},[27,46677,46678],{"className":3580,"code":46621,"language":3582,"meta":32,"style":32},[34,46679,46680,46688,46696],{"__ignoreMap":32},[37,46681,46682,46684,46686],{"class":39,"line":40},[37,46683,44],{"class":43},[37,46685,48],{"class":291},[37,46687,62],{"class":43},[37,46689,46690,46692,46694],{"class":39,"line":65},[37,46691,75],{"class":43},[37,46693,46599],{"class":291},[37,46695,113],{"class":43},[37,46697,46698,46700,46702],{"class":39,"line":72},[37,46699,273],{"class":43},[37,46701,48],{"class":291},[37,46703,62],{"class":43},[27,46705,46706],{"className":543,"code":46621,"language":545,"meta":32,"style":32},[34,46707,46708,46716,46724],{"__ignoreMap":32},[37,46709,46710,46712,46714],{"class":39,"line":40},[37,46711,44],{"class":43},[37,46713,48],{"class":291},[37,46715,62],{"class":43},[37,46717,46718,46720,46722],{"class":39,"line":65},[37,46719,75],{"class":43},[37,46721,46599],{"class":291},[37,46723,113],{"class":43},[37,46725,46726,46728,46730],{"class":39,"line":72},[37,46727,273],{"class":43},[37,46729,48],{"class":291},[37,46731,62],{"class":43},[27,46733,46735],{"className":987,"code":46734,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ripples', props: {} }\n ]\n})\n",[34,46736,46737,46747,46751,46765,46769,46778,46782],{"__ignoreMap":32},[37,46738,46739,46741,46743,46745],{"class":39,"line":40},[37,46740,1382],{"class":297},[37,46742,9444],{"class":43},[37,46744,1388],{"class":297},[37,46746,9449],{"class":58},[37,46748,46749],{"class":39,"line":65},[37,46750,120],{"emptyLinePlaceholder":119},[37,46752,46753,46755,46757,46759,46761,46763],{"class":39,"line":72},[37,46754,2809],{"class":297},[37,46756,2812],{"class":291},[37,46758,2815],{"class":297},[37,46760,2818],{"class":297},[37,46762,999],{"class":51},[37,46764,1002],{"class":43},[37,46766,46767],{"class":39,"line":116},[37,46768,1007],{"class":43},[37,46770,46771,46773,46776],{"class":39,"line":123},[37,46772,1017],{"class":43},[37,46774,46775],{"class":58},"'Ripples'",[37,46777,3207],{"class":43},[37,46779,46780],{"class":39,"line":129},[37,46781,1194],{"class":43},[37,46783,46784],{"class":39,"line":171},[37,46785,1200],{"class":43},[1311,46787,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":46789},[46790,46791],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/ripples",{"title":46599,"description":46607},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":46798,"title":46799,"body":46800,"category":30939,"componentType":21056,"description":46807,"extension":1323,"meta":47037,"navigation":119,"path":47038,"requiresChild":27975,"seo":47039,"stem":47040,"__hash__":47041},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":46801,"toc":47033},[46802,46805,46808,46810,46812,46815,46817,47031],[11,46803,46799],{"id":46804},"roundedrect",[15,46806,46807],{},"Rounded rectangle with adjustable width, height, and corner rounding",[27113,46809],{"component":46799},[1202,46811,27117],{"id":21717},[27119,46813],{":props":46814},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the rectangle\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the rectangle\"},{\"name\":\"width\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Half-width of the rectangle\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Half-height of the rectangle\"},{\"name\":\"rounding\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Corner rounding radius — set to min(width, height) for a pill shape\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,46816,27125],{"id":27124},[23,46818,46819,46859,46897,46935,46973],{":tabs":25},[27,46820,46822],{"className":29,"code":46821,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[34,46823,46824,46832,46839,46847,46851],{"__ignoreMap":32},[37,46825,46826,46828,46830],{"class":39,"line":40},[37,46827,44],{"class":43},[37,46829,48],{"class":47},[37,46831,62],{"class":43},[37,46833,46834,46836],{"class":39,"line":65},[37,46835,75],{"class":43},[37,46837,46838],{"class":47},"RoundedRect\n",[37,46840,46841,46843,46845],{"class":39,"line":72},[37,46842,7570],{"class":51},[37,46844,55],{"class":43},[37,46846,7526],{"class":58},[37,46848,46849],{"class":39,"line":116},[37,46850,2314],{"class":43},[37,46852,46853,46855,46857],{"class":39,"line":123},[37,46854,273],{"class":43},[37,46856,48],{"class":47},[37,46858,62],{"class":43},[27,46860,46861],{"className":280,"code":46821,"language":282,"meta":32,"style":32},[34,46862,46863,46871,46877,46885,46889],{"__ignoreMap":32},[37,46864,46865,46867,46869],{"class":39,"line":40},[37,46866,44],{"class":43},[37,46868,48],{"class":291},[37,46870,62],{"class":43},[37,46872,46873,46875],{"class":39,"line":65},[37,46874,75],{"class":43},[37,46876,46838],{"class":291},[37,46878,46879,46881,46883],{"class":39,"line":72},[37,46880,7570],{"class":51},[37,46882,55],{"class":297},[37,46884,7526],{"class":58},[37,46886,46887],{"class":39,"line":116},[37,46888,2314],{"class":43},[37,46890,46891,46893,46895],{"class":39,"line":123},[37,46892,273],{"class":43},[37,46894,48],{"class":291},[37,46896,62],{"class":43},[27,46898,46899],{"className":3580,"code":46821,"language":3582,"meta":32,"style":32},[34,46900,46901,46909,46915,46923,46927],{"__ignoreMap":32},[37,46902,46903,46905,46907],{"class":39,"line":40},[37,46904,44],{"class":43},[37,46906,48],{"class":291},[37,46908,62],{"class":43},[37,46910,46911,46913],{"class":39,"line":65},[37,46912,75],{"class":43},[37,46914,46838],{"class":291},[37,46916,46917,46919,46921],{"class":39,"line":72},[37,46918,7570],{"class":51},[37,46920,55],{"class":43},[37,46922,7526],{"class":58},[37,46924,46925],{"class":39,"line":116},[37,46926,2314],{"class":43},[37,46928,46929,46931,46933],{"class":39,"line":123},[37,46930,273],{"class":43},[37,46932,48],{"class":291},[37,46934,62],{"class":43},[27,46936,46937],{"className":543,"code":46821,"language":545,"meta":32,"style":32},[34,46938,46939,46947,46953,46961,46965],{"__ignoreMap":32},[37,46940,46941,46943,46945],{"class":39,"line":40},[37,46942,44],{"class":43},[37,46944,48],{"class":291},[37,46946,62],{"class":43},[37,46948,46949,46951],{"class":39,"line":65},[37,46950,75],{"class":43},[37,46952,46838],{"class":291},[37,46954,46955,46957,46959],{"class":39,"line":72},[37,46956,7570],{"class":51},[37,46958,55],{"class":297},[37,46960,7526],{"class":58},[37,46962,46963],{"class":39,"line":116},[37,46964,2314],{"class":43},[37,46966,46967,46969,46971],{"class":39,"line":123},[37,46968,273],{"class":43},[37,46970,48],{"class":291},[37,46972,62],{"class":43},[27,46974,46976],{"className":987,"code":46975,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RoundedRect', props: { color: '#ffffff' } }\n ]\n})\n",[34,46977,46978,46988,46992,47006,47010,47023,47027],{"__ignoreMap":32},[37,46979,46980,46982,46984,46986],{"class":39,"line":40},[37,46981,1382],{"class":297},[37,46983,9444],{"class":43},[37,46985,1388],{"class":297},[37,46987,9449],{"class":58},[37,46989,46990],{"class":39,"line":65},[37,46991,120],{"emptyLinePlaceholder":119},[37,46993,46994,46996,46998,47000,47002,47004],{"class":39,"line":72},[37,46995,2809],{"class":297},[37,46997,2812],{"class":291},[37,46999,2815],{"class":297},[37,47001,2818],{"class":297},[37,47003,999],{"class":51},[37,47005,1002],{"class":43},[37,47007,47008],{"class":39,"line":116},[37,47009,1007],{"class":43},[37,47011,47012,47014,47017,47019,47021],{"class":39,"line":123},[37,47013,1017],{"class":43},[37,47015,47016],{"class":58},"'RoundedRect'",[37,47018,2845],{"class":43},[37,47020,8101],{"class":58},[37,47022,1142],{"class":43},[37,47024,47025],{"class":39,"line":129},[37,47026,1194],{"class":43},[37,47028,47029],{"class":39,"line":171},[37,47030,1200],{"class":43},[1311,47032,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":47034},[47035,47036],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/roundedrect",{"title":46799,"description":46807},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":47043,"title":47044,"body":47045,"category":28983,"componentType":21062,"description":47051,"extension":1323,"meta":47368,"navigation":119,"path":47369,"requiresChild":119,"seo":47370,"stem":47371,"__hash__":47372},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":47046,"toc":47364},[47047,47049,47052,47054,47056,47059,47061,47362],[11,47048,47044],{"id":5996},[15,47050,47051],{},"Adjust color saturation intensity",[27113,47053],{"component":47044},[1202,47055,27117],{"id":21717},[27119,47057],{":props":47058},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[1202,47060,27125],{"id":27124},[23,47062,47063,47119,47178,47234,47292],{":tabs":25},[27,47064,47066],{"className":29,"code":47065,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[34,47067,47068,47076,47083,47091,47095,47103,47111],{"__ignoreMap":32},[37,47069,47070,47072,47074],{"class":39,"line":40},[37,47071,44],{"class":43},[37,47073,48],{"class":47},[37,47075,62],{"class":43},[37,47077,47078,47080],{"class":39,"line":65},[37,47079,75],{"class":43},[37,47081,47082],{"class":47},"Saturation\n",[37,47084,47085,47087,47089],{"class":39,"line":72},[37,47086,18081],{"class":51},[37,47088,55],{"class":43},[37,47090,29039],{"class":58},[37,47092,47093],{"class":39,"line":116},[37,47094,27161],{"class":43},[37,47096,47097,47099,47101],{"class":39,"line":123},[37,47098,174],{"class":43},[37,47100,3293],{"class":47},[37,47102,113],{"class":43},[37,47104,47105,47107,47109],{"class":39,"line":129},[37,47106,224],{"class":43},[37,47108,47044],{"class":47},[37,47110,62],{"class":43},[37,47112,47113,47115,47117],{"class":39,"line":171},[37,47114,273],{"class":43},[37,47116,48],{"class":47},[37,47118,62],{"class":43},[27,47120,47122],{"className":280,"code":47121,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[34,47123,47124,47132,47138,47150,47154,47162,47170],{"__ignoreMap":32},[37,47125,47126,47128,47130],{"class":39,"line":40},[37,47127,44],{"class":43},[37,47129,48],{"class":291},[37,47131,62],{"class":43},[37,47133,47134,47136],{"class":39,"line":65},[37,47135,75],{"class":43},[37,47137,47082],{"class":291},[37,47139,47140,47142,47144,47146,47148],{"class":39,"line":72},[37,47141,18192],{"class":51},[37,47143,55],{"class":297},[37,47145,326],{"class":43},[37,47147,6614],{"class":291},[37,47149,312],{"class":43},[37,47151,47152],{"class":39,"line":116},[37,47153,27161],{"class":43},[37,47155,47156,47158,47160],{"class":39,"line":123},[37,47157,174],{"class":43},[37,47159,3293],{"class":291},[37,47161,113],{"class":43},[37,47163,47164,47166,47168],{"class":39,"line":129},[37,47165,224],{"class":43},[37,47167,47044],{"class":291},[37,47169,62],{"class":43},[37,47171,47172,47174,47176],{"class":39,"line":171},[37,47173,273],{"class":43},[37,47175,48],{"class":291},[37,47177,62],{"class":43},[27,47179,47180],{"className":3580,"code":47121,"language":3582,"meta":32,"style":32},[34,47181,47182,47190,47196,47206,47210,47218,47226],{"__ignoreMap":32},[37,47183,47184,47186,47188],{"class":39,"line":40},[37,47185,44],{"class":43},[37,47187,48],{"class":291},[37,47189,62],{"class":43},[37,47191,47192,47194],{"class":39,"line":65},[37,47193,75],{"class":43},[37,47195,47082],{"class":291},[37,47197,47198,47200,47202,47204],{"class":39,"line":72},[37,47199,18192],{"class":51},[37,47201,25058],{"class":43},[37,47203,6614],{"class":291},[37,47205,312],{"class":43},[37,47207,47208],{"class":39,"line":116},[37,47209,27161],{"class":43},[37,47211,47212,47214,47216],{"class":39,"line":123},[37,47213,174],{"class":43},[37,47215,3293],{"class":291},[37,47217,113],{"class":43},[37,47219,47220,47222,47224],{"class":39,"line":129},[37,47221,224],{"class":43},[37,47223,47044],{"class":291},[37,47225,62],{"class":43},[37,47227,47228,47230,47232],{"class":39,"line":171},[37,47229,273],{"class":43},[37,47231,48],{"class":291},[37,47233,62],{"class":43},[27,47235,47236],{"className":543,"code":47121,"language":545,"meta":32,"style":32},[34,47237,47238,47246,47252,47264,47268,47276,47284],{"__ignoreMap":32},[37,47239,47240,47242,47244],{"class":39,"line":40},[37,47241,44],{"class":43},[37,47243,48],{"class":291},[37,47245,62],{"class":43},[37,47247,47248,47250],{"class":39,"line":65},[37,47249,75],{"class":43},[37,47251,47082],{"class":291},[37,47253,47254,47256,47258,47260,47262],{"class":39,"line":72},[37,47255,18192],{"class":51},[37,47257,55],{"class":297},[37,47259,326],{"class":43},[37,47261,6614],{"class":291},[37,47263,312],{"class":43},[37,47265,47266],{"class":39,"line":116},[37,47267,27161],{"class":43},[37,47269,47270,47272,47274],{"class":39,"line":123},[37,47271,174],{"class":43},[37,47273,3293],{"class":291},[37,47275,113],{"class":43},[37,47277,47278,47280,47282],{"class":39,"line":129},[37,47279,224],{"class":43},[37,47281,47044],{"class":291},[37,47283,62],{"class":43},[37,47285,47286,47288,47290],{"class":39,"line":171},[37,47287,273],{"class":43},[37,47289,48],{"class":291},[37,47291,62],{"class":43},[27,47293,47295],{"className":987,"code":47294,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Saturation', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,47296,47297,47307,47311,47325,47329,47342,47350,47354,47358],{"__ignoreMap":32},[37,47298,47299,47301,47303,47305],{"class":39,"line":40},[37,47300,1382],{"class":297},[37,47302,9444],{"class":43},[37,47304,1388],{"class":297},[37,47306,9449],{"class":58},[37,47308,47309],{"class":39,"line":65},[37,47310,120],{"emptyLinePlaceholder":119},[37,47312,47313,47315,47317,47319,47321,47323],{"class":39,"line":72},[37,47314,2809],{"class":297},[37,47316,2812],{"class":291},[37,47318,2815],{"class":297},[37,47320,2818],{"class":297},[37,47322,999],{"class":51},[37,47324,1002],{"class":43},[37,47326,47327],{"class":39,"line":116},[37,47328,1007],{"class":43},[37,47330,47331,47333,47336,47338,47340],{"class":39,"line":123},[37,47332,1017],{"class":43},[37,47334,47335],{"class":58},"'Saturation'",[37,47337,27406],{"class":43},[37,47339,6614],{"class":291},[37,47341,5482],{"class":43},[37,47343,47344,47346,47348],{"class":39,"line":129},[37,47345,4949],{"class":43},[37,47347,3941],{"class":58},[37,47349,3207],{"class":43},[37,47351,47352],{"class":39,"line":171},[37,47353,4966],{"class":43},[37,47355,47356],{"class":39,"line":221},[37,47357,1194],{"class":43},[37,47359,47360],{"class":39,"line":231},[37,47361,1200],{"class":43},[1311,47363,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":47365},[47366,47367],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/saturation",{"title":47044,"description":47051},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":47374,"title":47375,"body":47376,"category":28983,"componentType":21062,"description":47383,"extension":1323,"meta":47644,"navigation":119,"path":47645,"requiresChild":119,"seo":47646,"stem":47647,"__hash__":47648},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":47377,"toc":47640},[47378,47381,47384,47386,47388,47391,47393,47638],[11,47379,47375],{"id":47380},"sharpness",[15,47382,47383],{},"Adjust image sharpness using a convolution kernel",[27113,47385],{"component":47375},[1202,47387,27117],{"id":21717},[27119,47389],{":props":47390},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[1202,47392,27125],{"id":27124},[23,47394,47395,47440,47484,47528,47572],{":tabs":25},[27,47396,47398],{"className":29,"code":47397,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[34,47399,47400,47408,47416,47424,47432],{"__ignoreMap":32},[37,47401,47402,47404,47406],{"class":39,"line":40},[37,47403,44],{"class":43},[37,47405,48],{"class":47},[37,47407,62],{"class":43},[37,47409,47410,47412,47414],{"class":39,"line":65},[37,47411,75],{"class":43},[37,47413,47375],{"class":47},[37,47415,62],{"class":43},[37,47417,47418,47420,47422],{"class":39,"line":72},[37,47419,174],{"class":43},[37,47421,3293],{"class":47},[37,47423,113],{"class":43},[37,47425,47426,47428,47430],{"class":39,"line":116},[37,47427,224],{"class":43},[37,47429,47375],{"class":47},[37,47431,62],{"class":43},[37,47433,47434,47436,47438],{"class":39,"line":123},[37,47435,273],{"class":43},[37,47437,48],{"class":47},[37,47439,62],{"class":43},[27,47441,47442],{"className":280,"code":47397,"language":282,"meta":32,"style":32},[34,47443,47444,47452,47460,47468,47476],{"__ignoreMap":32},[37,47445,47446,47448,47450],{"class":39,"line":40},[37,47447,44],{"class":43},[37,47449,48],{"class":291},[37,47451,62],{"class":43},[37,47453,47454,47456,47458],{"class":39,"line":65},[37,47455,75],{"class":43},[37,47457,47375],{"class":291},[37,47459,62],{"class":43},[37,47461,47462,47464,47466],{"class":39,"line":72},[37,47463,174],{"class":43},[37,47465,3293],{"class":291},[37,47467,113],{"class":43},[37,47469,47470,47472,47474],{"class":39,"line":116},[37,47471,224],{"class":43},[37,47473,47375],{"class":291},[37,47475,62],{"class":43},[37,47477,47478,47480,47482],{"class":39,"line":123},[37,47479,273],{"class":43},[37,47481,48],{"class":291},[37,47483,62],{"class":43},[27,47485,47486],{"className":3580,"code":47397,"language":3582,"meta":32,"style":32},[34,47487,47488,47496,47504,47512,47520],{"__ignoreMap":32},[37,47489,47490,47492,47494],{"class":39,"line":40},[37,47491,44],{"class":43},[37,47493,48],{"class":291},[37,47495,62],{"class":43},[37,47497,47498,47500,47502],{"class":39,"line":65},[37,47499,75],{"class":43},[37,47501,47375],{"class":291},[37,47503,62],{"class":43},[37,47505,47506,47508,47510],{"class":39,"line":72},[37,47507,174],{"class":43},[37,47509,3293],{"class":291},[37,47511,113],{"class":43},[37,47513,47514,47516,47518],{"class":39,"line":116},[37,47515,224],{"class":43},[37,47517,47375],{"class":291},[37,47519,62],{"class":43},[37,47521,47522,47524,47526],{"class":39,"line":123},[37,47523,273],{"class":43},[37,47525,48],{"class":291},[37,47527,62],{"class":43},[27,47529,47530],{"className":543,"code":47397,"language":545,"meta":32,"style":32},[34,47531,47532,47540,47548,47556,47564],{"__ignoreMap":32},[37,47533,47534,47536,47538],{"class":39,"line":40},[37,47535,44],{"class":43},[37,47537,48],{"class":291},[37,47539,62],{"class":43},[37,47541,47542,47544,47546],{"class":39,"line":65},[37,47543,75],{"class":43},[37,47545,47375],{"class":291},[37,47547,62],{"class":43},[37,47549,47550,47552,47554],{"class":39,"line":72},[37,47551,174],{"class":43},[37,47553,3293],{"class":291},[37,47555,113],{"class":43},[37,47557,47558,47560,47562],{"class":39,"line":116},[37,47559,224],{"class":43},[37,47561,47375],{"class":291},[37,47563,62],{"class":43},[37,47565,47566,47568,47570],{"class":39,"line":123},[37,47567,273],{"class":43},[37,47569,48],{"class":291},[37,47571,62],{"class":43},[27,47573,47575],{"className":987,"code":47574,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Sharpness', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,47576,47577,47587,47591,47605,47609,47618,47626,47630,47634],{"__ignoreMap":32},[37,47578,47579,47581,47583,47585],{"class":39,"line":40},[37,47580,1382],{"class":297},[37,47582,9444],{"class":43},[37,47584,1388],{"class":297},[37,47586,9449],{"class":58},[37,47588,47589],{"class":39,"line":65},[37,47590,120],{"emptyLinePlaceholder":119},[37,47592,47593,47595,47597,47599,47601,47603],{"class":39,"line":72},[37,47594,2809],{"class":297},[37,47596,2812],{"class":291},[37,47598,2815],{"class":297},[37,47600,2818],{"class":297},[37,47602,999],{"class":51},[37,47604,1002],{"class":43},[37,47606,47607],{"class":39,"line":116},[37,47608,1007],{"class":43},[37,47610,47611,47613,47616],{"class":39,"line":123},[37,47612,1017],{"class":43},[37,47614,47615],{"class":58},"'Sharpness'",[37,47617,4944],{"class":43},[37,47619,47620,47622,47624],{"class":39,"line":129},[37,47621,4949],{"class":43},[37,47623,3941],{"class":58},[37,47625,3207],{"class":43},[37,47627,47628],{"class":39,"line":171},[37,47629,4966],{"class":43},[37,47631,47632],{"class":39,"line":221},[37,47633,1194],{"class":43},[37,47635,47636],{"class":39,"line":231},[37,47637,1200],{"class":43},[1311,47639,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":47641},[47642,47643],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/sharpness",{"title":47375,"description":47383},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":47650,"title":47651,"body":47652,"category":30373,"componentType":21062,"description":47659,"extension":1323,"meta":48024,"navigation":119,"path":48025,"requiresChild":119,"seo":48026,"stem":48027,"__hash__":48028},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":47653,"toc":48020},[47654,47657,47660,47662,47664,47667,47669,48018],[11,47655,47651],{"id":47656},"shatter",[15,47658,47659],{},"Broken glass effect with tectonic plate displacement",[27113,47661],{"component":47651},[1202,47663,27117],{"id":21717},[27119,47665],{":props":47666},"[{\"name\":\"crackWidth\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Thickness of crack lines\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"4\",\"description\":\"How much shards shift\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Cursor influence radius\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How fast shards return to rest\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Random seed for pattern\"},{\"name\":\"chromaticSplit\",\"type\":\"number\",\"default\":\"1\",\"description\":\"RGB separation for prismatic glass effect\"},{\"name\":\"refractionStrength\",\"type\":\"number\",\"default\":\"5\",\"description\":\"How much cracks bend/distort the underlying image\"},{\"name\":\"shardLighting\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Subtle lighting on tilted shards for 3D depth\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when displacement pushes content out of bounds\"}]",[1202,47668,27125],{"id":27124},[23,47670,47671,47736,47808,47874,47944],{":tabs":25},[27,47672,47674],{"className":29,"code":47673,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CShatter\n :intensity=\"4\"\n :radius=\"0.4\"\n >\n \u003CCircle />\n \u003C/Shatter>\n\u003C/Shader>\n",[34,47675,47676,47684,47691,47700,47708,47712,47720,47728],{"__ignoreMap":32},[37,47677,47678,47680,47682],{"class":39,"line":40},[37,47679,44],{"class":43},[37,47681,48],{"class":47},[37,47683,62],{"class":43},[37,47685,47686,47688],{"class":39,"line":65},[37,47687,75],{"class":43},[37,47689,47690],{"class":47},"Shatter\n",[37,47692,47693,47695,47697],{"class":39,"line":72},[37,47694,18081],{"class":51},[37,47696,55],{"class":43},[37,47698,47699],{"class":58},"\"4\"\n",[37,47701,47702,47704,47706],{"class":39,"line":116},[37,47703,15113],{"class":51},[37,47705,55],{"class":43},[37,47707,36474],{"class":58},[37,47709,47710],{"class":39,"line":123},[37,47711,27161],{"class":43},[37,47713,47714,47716,47718],{"class":39,"line":129},[37,47715,174],{"class":43},[37,47717,3293],{"class":47},[37,47719,113],{"class":43},[37,47721,47722,47724,47726],{"class":39,"line":171},[37,47723,224],{"class":43},[37,47725,47651],{"class":47},[37,47727,62],{"class":43},[37,47729,47730,47732,47734],{"class":39,"line":221},[37,47731,273],{"class":43},[37,47733,48],{"class":47},[37,47735,62],{"class":43},[27,47737,47739],{"className":280,"code":47738,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CShatter\n intensity={4}\n radius={0.4}\n >\n \u003CCircle />\n \u003C/Shatter>\n\u003C/Shader>\n",[34,47740,47741,47749,47755,47768,47780,47784,47792,47800],{"__ignoreMap":32},[37,47742,47743,47745,47747],{"class":39,"line":40},[37,47744,44],{"class":43},[37,47746,48],{"class":291},[37,47748,62],{"class":43},[37,47750,47751,47753],{"class":39,"line":65},[37,47752,75],{"class":43},[37,47754,47690],{"class":291},[37,47756,47757,47759,47761,47763,47766],{"class":39,"line":72},[37,47758,18192],{"class":51},[37,47760,55],{"class":297},[37,47762,326],{"class":43},[37,47764,47765],{"class":291},"4",[37,47767,312],{"class":43},[37,47769,47770,47772,47774,47776,47778],{"class":39,"line":116},[37,47771,7580],{"class":51},[37,47773,55],{"class":297},[37,47775,326],{"class":43},[37,47777,6186],{"class":291},[37,47779,312],{"class":43},[37,47781,47782],{"class":39,"line":123},[37,47783,27161],{"class":43},[37,47785,47786,47788,47790],{"class":39,"line":129},[37,47787,174],{"class":43},[37,47789,3293],{"class":291},[37,47791,113],{"class":43},[37,47793,47794,47796,47798],{"class":39,"line":171},[37,47795,224],{"class":43},[37,47797,47651],{"class":291},[37,47799,62],{"class":43},[37,47801,47802,47804,47806],{"class":39,"line":221},[37,47803,273],{"class":43},[37,47805,48],{"class":291},[37,47807,62],{"class":43},[27,47809,47810],{"className":3580,"code":47738,"language":3582,"meta":32,"style":32},[34,47811,47812,47820,47826,47836,47846,47850,47858,47866],{"__ignoreMap":32},[37,47813,47814,47816,47818],{"class":39,"line":40},[37,47815,44],{"class":43},[37,47817,48],{"class":291},[37,47819,62],{"class":43},[37,47821,47822,47824],{"class":39,"line":65},[37,47823,75],{"class":43},[37,47825,47690],{"class":291},[37,47827,47828,47830,47832,47834],{"class":39,"line":72},[37,47829,18192],{"class":51},[37,47831,25058],{"class":43},[37,47833,47765],{"class":291},[37,47835,312],{"class":43},[37,47837,47838,47840,47842,47844],{"class":39,"line":116},[37,47839,7580],{"class":51},[37,47841,25058],{"class":43},[37,47843,6186],{"class":291},[37,47845,312],{"class":43},[37,47847,47848],{"class":39,"line":123},[37,47849,27161],{"class":43},[37,47851,47852,47854,47856],{"class":39,"line":129},[37,47853,174],{"class":43},[37,47855,3293],{"class":291},[37,47857,113],{"class":43},[37,47859,47860,47862,47864],{"class":39,"line":171},[37,47861,224],{"class":43},[37,47863,47651],{"class":291},[37,47865,62],{"class":43},[37,47867,47868,47870,47872],{"class":39,"line":221},[37,47869,273],{"class":43},[37,47871,48],{"class":291},[37,47873,62],{"class":43},[27,47875,47876],{"className":543,"code":47738,"language":545,"meta":32,"style":32},[34,47877,47878,47886,47892,47904,47916,47920,47928,47936],{"__ignoreMap":32},[37,47879,47880,47882,47884],{"class":39,"line":40},[37,47881,44],{"class":43},[37,47883,48],{"class":291},[37,47885,62],{"class":43},[37,47887,47888,47890],{"class":39,"line":65},[37,47889,75],{"class":43},[37,47891,47690],{"class":291},[37,47893,47894,47896,47898,47900,47902],{"class":39,"line":72},[37,47895,18192],{"class":51},[37,47897,55],{"class":297},[37,47899,326],{"class":43},[37,47901,47765],{"class":291},[37,47903,312],{"class":43},[37,47905,47906,47908,47910,47912,47914],{"class":39,"line":116},[37,47907,7580],{"class":51},[37,47909,55],{"class":297},[37,47911,326],{"class":43},[37,47913,6186],{"class":291},[37,47915,312],{"class":43},[37,47917,47918],{"class":39,"line":123},[37,47919,27161],{"class":43},[37,47921,47922,47924,47926],{"class":39,"line":129},[37,47923,174],{"class":43},[37,47925,3293],{"class":291},[37,47927,113],{"class":43},[37,47929,47930,47932,47934],{"class":39,"line":171},[37,47931,224],{"class":43},[37,47933,47651],{"class":291},[37,47935,62],{"class":43},[37,47937,47938,47940,47942],{"class":39,"line":221},[37,47939,273],{"class":43},[37,47941,48],{"class":291},[37,47943,62],{"class":43},[27,47945,47947],{"className":987,"code":47946,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Shatter', props: { intensity: 4, radius: 0.4 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,47948,47949,47959,47963,47977,47981,47998,48006,48010,48014],{"__ignoreMap":32},[37,47950,47951,47953,47955,47957],{"class":39,"line":40},[37,47952,1382],{"class":297},[37,47954,9444],{"class":43},[37,47956,1388],{"class":297},[37,47958,9449],{"class":58},[37,47960,47961],{"class":39,"line":65},[37,47962,120],{"emptyLinePlaceholder":119},[37,47964,47965,47967,47969,47971,47973,47975],{"class":39,"line":72},[37,47966,2809],{"class":297},[37,47968,2812],{"class":291},[37,47970,2815],{"class":297},[37,47972,2818],{"class":297},[37,47974,999],{"class":51},[37,47976,1002],{"class":43},[37,47978,47979],{"class":39,"line":116},[37,47980,1007],{"class":43},[37,47982,47983,47985,47988,47990,47992,47994,47996],{"class":39,"line":123},[37,47984,1017],{"class":43},[37,47986,47987],{"class":58},"'Shatter'",[37,47989,27406],{"class":43},[37,47991,47765],{"class":291},[37,47993,4501],{"class":43},[37,47995,6186],{"class":291},[37,47997,5482],{"class":43},[37,47999,48000,48002,48004],{"class":39,"line":129},[37,48001,4949],{"class":43},[37,48003,3941],{"class":58},[37,48005,3207],{"class":43},[37,48007,48008],{"class":39,"line":171},[37,48009,4966],{"class":43},[37,48011,48012],{"class":39,"line":221},[37,48013,1194],{"class":43},[37,48015,48016],{"class":39,"line":231},[37,48017,1200],{"class":43},[1311,48019,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":48021},[48022,48023],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/shatter",{"title":47651,"description":47659},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":48030,"title":48031,"body":48032,"category":27972,"componentType":21056,"description":48039,"extension":1323,"meta":48224,"navigation":119,"path":48225,"requiresChild":27975,"seo":48226,"stem":48227,"__hash__":48228},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":48033,"toc":48220},[48034,48037,48040,48042,48044,48047,48049,48218],[11,48035,48031],{"id":48036},"simplexnoise",[15,48038,48039],{},"Organic noise with animated movement",[27113,48041],{"component":48031},[1202,48043,27117],{"id":21717},[27119,48045],{":props":48046},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[1202,48048,27125],{"id":27124},[23,48050,48051,48080,48108,48136,48164],{":tabs":25},[27,48052,48054],{"className":29,"code":48053,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[34,48055,48056,48064,48072],{"__ignoreMap":32},[37,48057,48058,48060,48062],{"class":39,"line":40},[37,48059,44],{"class":43},[37,48061,48],{"class":47},[37,48063,62],{"class":43},[37,48065,48066,48068,48070],{"class":39,"line":65},[37,48067,75],{"class":43},[37,48069,48031],{"class":47},[37,48071,113],{"class":43},[37,48073,48074,48076,48078],{"class":39,"line":72},[37,48075,273],{"class":43},[37,48077,48],{"class":47},[37,48079,62],{"class":43},[27,48081,48082],{"className":280,"code":48053,"language":282,"meta":32,"style":32},[34,48083,48084,48092,48100],{"__ignoreMap":32},[37,48085,48086,48088,48090],{"class":39,"line":40},[37,48087,44],{"class":43},[37,48089,48],{"class":291},[37,48091,62],{"class":43},[37,48093,48094,48096,48098],{"class":39,"line":65},[37,48095,75],{"class":43},[37,48097,48031],{"class":291},[37,48099,113],{"class":43},[37,48101,48102,48104,48106],{"class":39,"line":72},[37,48103,273],{"class":43},[37,48105,48],{"class":291},[37,48107,62],{"class":43},[27,48109,48110],{"className":3580,"code":48053,"language":3582,"meta":32,"style":32},[34,48111,48112,48120,48128],{"__ignoreMap":32},[37,48113,48114,48116,48118],{"class":39,"line":40},[37,48115,44],{"class":43},[37,48117,48],{"class":291},[37,48119,62],{"class":43},[37,48121,48122,48124,48126],{"class":39,"line":65},[37,48123,75],{"class":43},[37,48125,48031],{"class":291},[37,48127,113],{"class":43},[37,48129,48130,48132,48134],{"class":39,"line":72},[37,48131,273],{"class":43},[37,48133,48],{"class":291},[37,48135,62],{"class":43},[27,48137,48138],{"className":543,"code":48053,"language":545,"meta":32,"style":32},[34,48139,48140,48148,48156],{"__ignoreMap":32},[37,48141,48142,48144,48146],{"class":39,"line":40},[37,48143,44],{"class":43},[37,48145,48],{"class":291},[37,48147,62],{"class":43},[37,48149,48150,48152,48154],{"class":39,"line":65},[37,48151,75],{"class":43},[37,48153,48031],{"class":291},[37,48155,113],{"class":43},[37,48157,48158,48160,48162],{"class":39,"line":72},[37,48159,273],{"class":43},[37,48161,48],{"class":291},[37,48163,62],{"class":43},[27,48165,48167],{"className":987,"code":48166,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SimplexNoise', props: {} }\n ]\n})\n",[34,48168,48169,48179,48183,48197,48201,48210,48214],{"__ignoreMap":32},[37,48170,48171,48173,48175,48177],{"class":39,"line":40},[37,48172,1382],{"class":297},[37,48174,9444],{"class":43},[37,48176,1388],{"class":297},[37,48178,9449],{"class":58},[37,48180,48181],{"class":39,"line":65},[37,48182,120],{"emptyLinePlaceholder":119},[37,48184,48185,48187,48189,48191,48193,48195],{"class":39,"line":72},[37,48186,2809],{"class":297},[37,48188,2812],{"class":291},[37,48190,2815],{"class":297},[37,48192,2818],{"class":297},[37,48194,999],{"class":51},[37,48196,1002],{"class":43},[37,48198,48199],{"class":39,"line":116},[37,48200,1007],{"class":43},[37,48202,48203,48205,48208],{"class":39,"line":123},[37,48204,1017],{"class":43},[37,48206,48207],{"class":58},"'SimplexNoise'",[37,48209,3207],{"class":43},[37,48211,48212],{"class":39,"line":129},[37,48213,1194],{"class":43},[37,48215,48216],{"class":39,"line":171},[37,48217,1200],{"class":43},[1311,48219,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":48221},[48222,48223],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/simplexnoise",{"title":48031,"description":48039},"docs/components/SimplexNoise","d0mO4mGGih-voEAS5386XslXJGaXC6JFX720cMm4EPY",{"id":48230,"title":177,"body":48231,"category":27972,"componentType":21056,"description":48238,"extension":1323,"meta":48467,"navigation":119,"path":48468,"requiresChild":27975,"seo":48469,"stem":48470,"__hash__":48471},"components/docs/components/SineWave.md",{"type":8,"value":48232,"toc":48463},[48233,48236,48239,48241,48243,48246,48248,48461],[11,48234,177],{"id":48235},"sinewave",[15,48237,48238],{},"Animated wave with thickness and softness",[27113,48240],{"component":177},[1202,48242,27117],{"id":21717},[27119,48244],{":props":48245},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the sine wave\"},{\"name\":\"amplitude\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"The height/amplitude of the sine wave\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The frequency/number of wave cycles\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The animation speed of the wave\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The rotation angle of the wave (in degrees)\"},{\"name\":\"position\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center position of the wave\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"The thickness of the wave line\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Edge softness of the wave line\"}]",[1202,48247,27125],{"id":27124},[23,48249,48250,48290,48328,48366,48404],{":tabs":25},[27,48251,48253],{"className":29,"code":48252,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[34,48254,48255,48263,48270,48278,48282],{"__ignoreMap":32},[37,48256,48257,48259,48261],{"class":39,"line":40},[37,48258,44],{"class":43},[37,48260,48],{"class":47},[37,48262,62],{"class":43},[37,48264,48265,48267],{"class":39,"line":65},[37,48266,75],{"class":43},[37,48268,48269],{"class":47},"SineWave\n",[37,48271,48272,48274,48276],{"class":39,"line":72},[37,48273,7570],{"class":51},[37,48275,55],{"class":43},[37,48277,7526],{"class":58},[37,48279,48280],{"class":39,"line":116},[37,48281,2314],{"class":43},[37,48283,48284,48286,48288],{"class":39,"line":123},[37,48285,273],{"class":43},[37,48287,48],{"class":47},[37,48289,62],{"class":43},[27,48291,48292],{"className":280,"code":48252,"language":282,"meta":32,"style":32},[34,48293,48294,48302,48308,48316,48320],{"__ignoreMap":32},[37,48295,48296,48298,48300],{"class":39,"line":40},[37,48297,44],{"class":43},[37,48299,48],{"class":291},[37,48301,62],{"class":43},[37,48303,48304,48306],{"class":39,"line":65},[37,48305,75],{"class":43},[37,48307,48269],{"class":291},[37,48309,48310,48312,48314],{"class":39,"line":72},[37,48311,7570],{"class":51},[37,48313,55],{"class":297},[37,48315,7526],{"class":58},[37,48317,48318],{"class":39,"line":116},[37,48319,2314],{"class":43},[37,48321,48322,48324,48326],{"class":39,"line":123},[37,48323,273],{"class":43},[37,48325,48],{"class":291},[37,48327,62],{"class":43},[27,48329,48330],{"className":3580,"code":48252,"language":3582,"meta":32,"style":32},[34,48331,48332,48340,48346,48354,48358],{"__ignoreMap":32},[37,48333,48334,48336,48338],{"class":39,"line":40},[37,48335,44],{"class":43},[37,48337,48],{"class":291},[37,48339,62],{"class":43},[37,48341,48342,48344],{"class":39,"line":65},[37,48343,75],{"class":43},[37,48345,48269],{"class":291},[37,48347,48348,48350,48352],{"class":39,"line":72},[37,48349,7570],{"class":51},[37,48351,55],{"class":43},[37,48353,7526],{"class":58},[37,48355,48356],{"class":39,"line":116},[37,48357,2314],{"class":43},[37,48359,48360,48362,48364],{"class":39,"line":123},[37,48361,273],{"class":43},[37,48363,48],{"class":291},[37,48365,62],{"class":43},[27,48367,48368],{"className":543,"code":48252,"language":545,"meta":32,"style":32},[34,48369,48370,48378,48384,48392,48396],{"__ignoreMap":32},[37,48371,48372,48374,48376],{"class":39,"line":40},[37,48373,44],{"class":43},[37,48375,48],{"class":291},[37,48377,62],{"class":43},[37,48379,48380,48382],{"class":39,"line":65},[37,48381,75],{"class":43},[37,48383,48269],{"class":291},[37,48385,48386,48388,48390],{"class":39,"line":72},[37,48387,7570],{"class":51},[37,48389,55],{"class":297},[37,48391,7526],{"class":58},[37,48393,48394],{"class":39,"line":116},[37,48395,2314],{"class":43},[37,48397,48398,48400,48402],{"class":39,"line":123},[37,48399,273],{"class":43},[37,48401,48],{"class":291},[37,48403,62],{"class":43},[27,48405,48407],{"className":987,"code":48406,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SineWave', props: { color: '#ffffff' } }\n ]\n})\n",[34,48408,48409,48419,48423,48437,48441,48453,48457],{"__ignoreMap":32},[37,48410,48411,48413,48415,48417],{"class":39,"line":40},[37,48412,1382],{"class":297},[37,48414,9444],{"class":43},[37,48416,1388],{"class":297},[37,48418,9449],{"class":58},[37,48420,48421],{"class":39,"line":65},[37,48422,120],{"emptyLinePlaceholder":119},[37,48424,48425,48427,48429,48431,48433,48435],{"class":39,"line":72},[37,48426,2809],{"class":297},[37,48428,2812],{"class":291},[37,48430,2815],{"class":297},[37,48432,2818],{"class":297},[37,48434,999],{"class":51},[37,48436,1002],{"class":43},[37,48438,48439],{"class":39,"line":116},[37,48440,1007],{"class":43},[37,48442,48443,48445,48447,48449,48451],{"class":39,"line":123},[37,48444,1017],{"class":43},[37,48446,1114],{"class":58},[37,48448,2845],{"class":43},[37,48450,8101],{"class":58},[37,48452,1142],{"class":43},[37,48454,48455],{"class":39,"line":129},[37,48456,1194],{"class":43},[37,48458,48459],{"class":39,"line":171},[37,48460,1200],{"class":43},[1311,48462,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":48464},[48465,48466],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/sinewave",{"title":177,"description":48238},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":48473,"title":48474,"body":48475,"category":28983,"componentType":21062,"description":48482,"extension":1323,"meta":48743,"navigation":119,"path":48744,"requiresChild":119,"seo":48745,"stem":48746,"__hash__":48747},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":48476,"toc":48739},[48477,48480,48483,48485,48487,48490,48492,48737],[11,48478,48474],{"id":48479},"solarize",[15,48481,48482],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[27113,48484],{"component":48474},[1202,48486,27117],{"id":21717},[27119,48488],{":props":48489},"[{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Luminance level above which colors are inverted. Pixels brighter than this threshold get flipped.\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blend between original (0) and fully solarized (1)\"}]",[1202,48491,27125],{"id":27124},[23,48493,48494,48539,48583,48627,48671],{":tabs":25},[27,48495,48497],{"className":29,"code":48496,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[34,48498,48499,48507,48515,48523,48531],{"__ignoreMap":32},[37,48500,48501,48503,48505],{"class":39,"line":40},[37,48502,44],{"class":43},[37,48504,48],{"class":47},[37,48506,62],{"class":43},[37,48508,48509,48511,48513],{"class":39,"line":65},[37,48510,75],{"class":43},[37,48512,48474],{"class":47},[37,48514,62],{"class":43},[37,48516,48517,48519,48521],{"class":39,"line":72},[37,48518,174],{"class":43},[37,48520,3293],{"class":47},[37,48522,113],{"class":43},[37,48524,48525,48527,48529],{"class":39,"line":116},[37,48526,224],{"class":43},[37,48528,48474],{"class":47},[37,48530,62],{"class":43},[37,48532,48533,48535,48537],{"class":39,"line":123},[37,48534,273],{"class":43},[37,48536,48],{"class":47},[37,48538,62],{"class":43},[27,48540,48541],{"className":280,"code":48496,"language":282,"meta":32,"style":32},[34,48542,48543,48551,48559,48567,48575],{"__ignoreMap":32},[37,48544,48545,48547,48549],{"class":39,"line":40},[37,48546,44],{"class":43},[37,48548,48],{"class":291},[37,48550,62],{"class":43},[37,48552,48553,48555,48557],{"class":39,"line":65},[37,48554,75],{"class":43},[37,48556,48474],{"class":291},[37,48558,62],{"class":43},[37,48560,48561,48563,48565],{"class":39,"line":72},[37,48562,174],{"class":43},[37,48564,3293],{"class":291},[37,48566,113],{"class":43},[37,48568,48569,48571,48573],{"class":39,"line":116},[37,48570,224],{"class":43},[37,48572,48474],{"class":291},[37,48574,62],{"class":43},[37,48576,48577,48579,48581],{"class":39,"line":123},[37,48578,273],{"class":43},[37,48580,48],{"class":291},[37,48582,62],{"class":43},[27,48584,48585],{"className":3580,"code":48496,"language":3582,"meta":32,"style":32},[34,48586,48587,48595,48603,48611,48619],{"__ignoreMap":32},[37,48588,48589,48591,48593],{"class":39,"line":40},[37,48590,44],{"class":43},[37,48592,48],{"class":291},[37,48594,62],{"class":43},[37,48596,48597,48599,48601],{"class":39,"line":65},[37,48598,75],{"class":43},[37,48600,48474],{"class":291},[37,48602,62],{"class":43},[37,48604,48605,48607,48609],{"class":39,"line":72},[37,48606,174],{"class":43},[37,48608,3293],{"class":291},[37,48610,113],{"class":43},[37,48612,48613,48615,48617],{"class":39,"line":116},[37,48614,224],{"class":43},[37,48616,48474],{"class":291},[37,48618,62],{"class":43},[37,48620,48621,48623,48625],{"class":39,"line":123},[37,48622,273],{"class":43},[37,48624,48],{"class":291},[37,48626,62],{"class":43},[27,48628,48629],{"className":543,"code":48496,"language":545,"meta":32,"style":32},[34,48630,48631,48639,48647,48655,48663],{"__ignoreMap":32},[37,48632,48633,48635,48637],{"class":39,"line":40},[37,48634,44],{"class":43},[37,48636,48],{"class":291},[37,48638,62],{"class":43},[37,48640,48641,48643,48645],{"class":39,"line":65},[37,48642,75],{"class":43},[37,48644,48474],{"class":291},[37,48646,62],{"class":43},[37,48648,48649,48651,48653],{"class":39,"line":72},[37,48650,174],{"class":43},[37,48652,3293],{"class":291},[37,48654,113],{"class":43},[37,48656,48657,48659,48661],{"class":39,"line":116},[37,48658,224],{"class":43},[37,48660,48474],{"class":291},[37,48662,62],{"class":43},[37,48664,48665,48667,48669],{"class":39,"line":123},[37,48666,273],{"class":43},[37,48668,48],{"class":291},[37,48670,62],{"class":43},[27,48672,48674],{"className":987,"code":48673,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Solarize', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,48675,48676,48686,48690,48704,48708,48717,48725,48729,48733],{"__ignoreMap":32},[37,48677,48678,48680,48682,48684],{"class":39,"line":40},[37,48679,1382],{"class":297},[37,48681,9444],{"class":43},[37,48683,1388],{"class":297},[37,48685,9449],{"class":58},[37,48687,48688],{"class":39,"line":65},[37,48689,120],{"emptyLinePlaceholder":119},[37,48691,48692,48694,48696,48698,48700,48702],{"class":39,"line":72},[37,48693,2809],{"class":297},[37,48695,2812],{"class":291},[37,48697,2815],{"class":297},[37,48699,2818],{"class":297},[37,48701,999],{"class":51},[37,48703,1002],{"class":43},[37,48705,48706],{"class":39,"line":116},[37,48707,1007],{"class":43},[37,48709,48710,48712,48715],{"class":39,"line":123},[37,48711,1017],{"class":43},[37,48713,48714],{"class":58},"'Solarize'",[37,48716,4944],{"class":43},[37,48718,48719,48721,48723],{"class":39,"line":129},[37,48720,4949],{"class":43},[37,48722,3941],{"class":58},[37,48724,3207],{"class":43},[37,48726,48727],{"class":39,"line":171},[37,48728,4966],{"class":43},[37,48730,48731],{"class":39,"line":221},[37,48732,1194],{"class":43},[37,48734,48735],{"class":39,"line":231},[37,48736,1200],{"class":43},[1311,48738,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":48740},[48741,48742],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/solarize",{"title":48474,"description":48482},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":48749,"title":2659,"body":48750,"category":27972,"componentType":21056,"description":48757,"extension":1323,"meta":48987,"navigation":119,"path":48988,"requiresChild":27975,"seo":48989,"stem":48990,"__hash__":48991},"components/docs/components/SolidColor.md",{"type":8,"value":48751,"toc":48983},[48752,48755,48758,48760,48762,48765,48767,48981],[11,48753,2659],{"id":48754},"solidcolor",[15,48756,48757],{},"Fill the canvas with a single solid color",[27113,48759],{"component":2659},[1202,48761,27117],{"id":21717},[27119,48763],{":props":48764},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[1202,48766,27125],{"id":27124},[23,48768,48769,48810,48848,48886,48924],{":tabs":25},[27,48770,48772],{"className":29,"code":48771,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[34,48773,48774,48782,48789,48798,48802],{"__ignoreMap":32},[37,48775,48776,48778,48780],{"class":39,"line":40},[37,48777,44],{"class":43},[37,48779,48],{"class":47},[37,48781,62],{"class":43},[37,48783,48784,48786],{"class":39,"line":65},[37,48785,75],{"class":43},[37,48787,48788],{"class":47},"SolidColor\n",[37,48790,48791,48793,48795],{"class":39,"line":72},[37,48792,7570],{"class":51},[37,48794,55],{"class":43},[37,48796,48797],{"class":58},"\"#5b18ca\"\n",[37,48799,48800],{"class":39,"line":116},[37,48801,2314],{"class":43},[37,48803,48804,48806,48808],{"class":39,"line":123},[37,48805,273],{"class":43},[37,48807,48],{"class":47},[37,48809,62],{"class":43},[27,48811,48812],{"className":280,"code":48771,"language":282,"meta":32,"style":32},[34,48813,48814,48822,48828,48836,48840],{"__ignoreMap":32},[37,48815,48816,48818,48820],{"class":39,"line":40},[37,48817,44],{"class":43},[37,48819,48],{"class":291},[37,48821,62],{"class":43},[37,48823,48824,48826],{"class":39,"line":65},[37,48825,75],{"class":43},[37,48827,48788],{"class":291},[37,48829,48830,48832,48834],{"class":39,"line":72},[37,48831,7570],{"class":51},[37,48833,55],{"class":297},[37,48835,48797],{"class":58},[37,48837,48838],{"class":39,"line":116},[37,48839,2314],{"class":43},[37,48841,48842,48844,48846],{"class":39,"line":123},[37,48843,273],{"class":43},[37,48845,48],{"class":291},[37,48847,62],{"class":43},[27,48849,48850],{"className":3580,"code":48771,"language":3582,"meta":32,"style":32},[34,48851,48852,48860,48866,48874,48878],{"__ignoreMap":32},[37,48853,48854,48856,48858],{"class":39,"line":40},[37,48855,44],{"class":43},[37,48857,48],{"class":291},[37,48859,62],{"class":43},[37,48861,48862,48864],{"class":39,"line":65},[37,48863,75],{"class":43},[37,48865,48788],{"class":291},[37,48867,48868,48870,48872],{"class":39,"line":72},[37,48869,7570],{"class":51},[37,48871,55],{"class":43},[37,48873,48797],{"class":58},[37,48875,48876],{"class":39,"line":116},[37,48877,2314],{"class":43},[37,48879,48880,48882,48884],{"class":39,"line":123},[37,48881,273],{"class":43},[37,48883,48],{"class":291},[37,48885,62],{"class":43},[27,48887,48888],{"className":543,"code":48771,"language":545,"meta":32,"style":32},[34,48889,48890,48898,48904,48912,48916],{"__ignoreMap":32},[37,48891,48892,48894,48896],{"class":39,"line":40},[37,48893,44],{"class":43},[37,48895,48],{"class":291},[37,48897,62],{"class":43},[37,48899,48900,48902],{"class":39,"line":65},[37,48901,75],{"class":43},[37,48903,48788],{"class":291},[37,48905,48906,48908,48910],{"class":39,"line":72},[37,48907,7570],{"class":51},[37,48909,55],{"class":297},[37,48911,48797],{"class":58},[37,48913,48914],{"class":39,"line":116},[37,48915,2314],{"class":43},[37,48917,48918,48920,48922],{"class":39,"line":123},[37,48919,273],{"class":43},[37,48921,48],{"class":291},[37,48923,62],{"class":43},[27,48925,48927],{"className":987,"code":48926,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[34,48928,48929,48939,48943,48957,48961,48973,48977],{"__ignoreMap":32},[37,48930,48931,48933,48935,48937],{"class":39,"line":40},[37,48932,1382],{"class":297},[37,48934,9444],{"class":43},[37,48936,1388],{"class":297},[37,48938,9449],{"class":58},[37,48940,48941],{"class":39,"line":65},[37,48942,120],{"emptyLinePlaceholder":119},[37,48944,48945,48947,48949,48951,48953,48955],{"class":39,"line":72},[37,48946,2809],{"class":297},[37,48948,2812],{"class":291},[37,48950,2815],{"class":297},[37,48952,2818],{"class":297},[37,48954,999],{"class":51},[37,48956,1002],{"class":43},[37,48958,48959],{"class":39,"line":116},[37,48960,1007],{"class":43},[37,48962,48963,48965,48967,48969,48971],{"class":39,"line":123},[37,48964,1017],{"class":43},[37,48966,2842],{"class":58},[37,48968,2845],{"class":43},[37,48970,2848],{"class":58},[37,48972,1142],{"class":43},[37,48974,48975],{"class":39,"line":129},[37,48976,1194],{"class":43},[37,48978,48979],{"class":39,"line":171},[37,48980,1200],{"class":43},[1311,48982,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":48984},[48985,48986],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/solidcolor",{"title":2659,"description":48757},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":48993,"title":48994,"body":48995,"category":29317,"componentType":21062,"description":49002,"extension":1323,"meta":49319,"navigation":119,"path":49320,"requiresChild":119,"seo":49321,"stem":49322,"__hash__":49323},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":48996,"toc":49315},[48997,49000,49003,49005,49007,49010,49012,49313],[11,48998,48994],{"id":48999},"spherize",[15,49001,49002],{},"Map content onto a 3D sphere surface with depth distortion",[27113,49004],{"component":48994},[1202,49006,27117],{"id":21717},[27119,49008],{":props":49009},"[{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Radius of the sphere (1 = half viewport height)\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much the sphere bulges toward viewer (0 = flat, higher = more bulge)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the sphere\"},{\"name\":\"lightPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.3,\\\"y\\\":0.3}\",\"description\":\"Position of the specular light source\"},{\"name\":\"lightIntensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the rim light (0 = off)\"},{\"name\":\"lightSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the rim light falloff (0 = hard edge, 1 = soft glow)\"},{\"name\":\"lightColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the specular highlight\"}]",[1202,49011,27125],{"id":27124},[23,49013,49014,49070,49129,49185,49243],{":tabs":25},[27,49015,49017],{"className":29,"code":49016,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[34,49018,49019,49027,49034,49042,49046,49054,49062],{"__ignoreMap":32},[37,49020,49021,49023,49025],{"class":39,"line":40},[37,49022,44],{"class":43},[37,49024,48],{"class":47},[37,49026,62],{"class":43},[37,49028,49029,49031],{"class":39,"line":65},[37,49030,75],{"class":43},[37,49032,49033],{"class":47},"Spherize\n",[37,49035,49036,49038,49040],{"class":39,"line":72},[37,49037,15113],{"class":51},[37,49039,55],{"class":43},[37,49041,29039],{"class":58},[37,49043,49044],{"class":39,"line":116},[37,49045,27161],{"class":43},[37,49047,49048,49050,49052],{"class":39,"line":123},[37,49049,174],{"class":43},[37,49051,3293],{"class":47},[37,49053,113],{"class":43},[37,49055,49056,49058,49060],{"class":39,"line":129},[37,49057,224],{"class":43},[37,49059,48994],{"class":47},[37,49061,62],{"class":43},[37,49063,49064,49066,49068],{"class":39,"line":171},[37,49065,273],{"class":43},[37,49067,48],{"class":47},[37,49069,62],{"class":43},[27,49071,49073],{"className":280,"code":49072,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[34,49074,49075,49083,49089,49101,49105,49113,49121],{"__ignoreMap":32},[37,49076,49077,49079,49081],{"class":39,"line":40},[37,49078,44],{"class":43},[37,49080,48],{"class":291},[37,49082,62],{"class":43},[37,49084,49085,49087],{"class":39,"line":65},[37,49086,75],{"class":43},[37,49088,49033],{"class":291},[37,49090,49091,49093,49095,49097,49099],{"class":39,"line":72},[37,49092,7580],{"class":51},[37,49094,55],{"class":297},[37,49096,326],{"class":43},[37,49098,6614],{"class":291},[37,49100,312],{"class":43},[37,49102,49103],{"class":39,"line":116},[37,49104,27161],{"class":43},[37,49106,49107,49109,49111],{"class":39,"line":123},[37,49108,174],{"class":43},[37,49110,3293],{"class":291},[37,49112,113],{"class":43},[37,49114,49115,49117,49119],{"class":39,"line":129},[37,49116,224],{"class":43},[37,49118,48994],{"class":291},[37,49120,62],{"class":43},[37,49122,49123,49125,49127],{"class":39,"line":171},[37,49124,273],{"class":43},[37,49126,48],{"class":291},[37,49128,62],{"class":43},[27,49130,49131],{"className":3580,"code":49072,"language":3582,"meta":32,"style":32},[34,49132,49133,49141,49147,49157,49161,49169,49177],{"__ignoreMap":32},[37,49134,49135,49137,49139],{"class":39,"line":40},[37,49136,44],{"class":43},[37,49138,48],{"class":291},[37,49140,62],{"class":43},[37,49142,49143,49145],{"class":39,"line":65},[37,49144,75],{"class":43},[37,49146,49033],{"class":291},[37,49148,49149,49151,49153,49155],{"class":39,"line":72},[37,49150,7580],{"class":51},[37,49152,25058],{"class":43},[37,49154,6614],{"class":291},[37,49156,312],{"class":43},[37,49158,49159],{"class":39,"line":116},[37,49160,27161],{"class":43},[37,49162,49163,49165,49167],{"class":39,"line":123},[37,49164,174],{"class":43},[37,49166,3293],{"class":291},[37,49168,113],{"class":43},[37,49170,49171,49173,49175],{"class":39,"line":129},[37,49172,224],{"class":43},[37,49174,48994],{"class":291},[37,49176,62],{"class":43},[37,49178,49179,49181,49183],{"class":39,"line":171},[37,49180,273],{"class":43},[37,49182,48],{"class":291},[37,49184,62],{"class":43},[27,49186,49187],{"className":543,"code":49072,"language":545,"meta":32,"style":32},[34,49188,49189,49197,49203,49215,49219,49227,49235],{"__ignoreMap":32},[37,49190,49191,49193,49195],{"class":39,"line":40},[37,49192,44],{"class":43},[37,49194,48],{"class":291},[37,49196,62],{"class":43},[37,49198,49199,49201],{"class":39,"line":65},[37,49200,75],{"class":43},[37,49202,49033],{"class":291},[37,49204,49205,49207,49209,49211,49213],{"class":39,"line":72},[37,49206,7580],{"class":51},[37,49208,55],{"class":297},[37,49210,326],{"class":43},[37,49212,6614],{"class":291},[37,49214,312],{"class":43},[37,49216,49217],{"class":39,"line":116},[37,49218,27161],{"class":43},[37,49220,49221,49223,49225],{"class":39,"line":123},[37,49222,174],{"class":43},[37,49224,3293],{"class":291},[37,49226,113],{"class":43},[37,49228,49229,49231,49233],{"class":39,"line":129},[37,49230,224],{"class":43},[37,49232,48994],{"class":291},[37,49234,62],{"class":43},[37,49236,49237,49239,49241],{"class":39,"line":171},[37,49238,273],{"class":43},[37,49240,48],{"class":291},[37,49242,62],{"class":43},[27,49244,49246],{"className":987,"code":49245,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Spherize', props: { radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,49247,49248,49258,49262,49276,49280,49293,49301,49305,49309],{"__ignoreMap":32},[37,49249,49250,49252,49254,49256],{"class":39,"line":40},[37,49251,1382],{"class":297},[37,49253,9444],{"class":43},[37,49255,1388],{"class":297},[37,49257,9449],{"class":58},[37,49259,49260],{"class":39,"line":65},[37,49261,120],{"emptyLinePlaceholder":119},[37,49263,49264,49266,49268,49270,49272,49274],{"class":39,"line":72},[37,49265,2809],{"class":297},[37,49267,2812],{"class":291},[37,49269,2815],{"class":297},[37,49271,2818],{"class":297},[37,49273,999],{"class":51},[37,49275,1002],{"class":43},[37,49277,49278],{"class":39,"line":116},[37,49279,1007],{"class":43},[37,49281,49282,49284,49287,49289,49291],{"class":39,"line":123},[37,49283,1017],{"class":43},[37,49285,49286],{"class":58},"'Spherize'",[37,49288,5477],{"class":43},[37,49290,6614],{"class":291},[37,49292,5482],{"class":43},[37,49294,49295,49297,49299],{"class":39,"line":129},[37,49296,4949],{"class":43},[37,49298,3941],{"class":58},[37,49300,3207],{"class":43},[37,49302,49303],{"class":39,"line":171},[37,49304,4966],{"class":43},[37,49306,49307],{"class":39,"line":221},[37,49308,1194],{"class":43},[37,49310,49311],{"class":39,"line":231},[37,49312,1200],{"class":43},[1311,49314,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":49316},[49317,49318],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/spherize",{"title":48994,"description":49002},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":49325,"title":49326,"body":49327,"category":27972,"componentType":21056,"description":49334,"extension":1323,"meta":49519,"navigation":119,"path":49520,"requiresChild":27975,"seo":49521,"stem":49522,"__hash__":49523},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":49328,"toc":49515},[49329,49332,49335,49337,49339,49342,49344,49513],[11,49330,49326],{"id":49331},"spiral",[15,49333,49334],{},"Rotating spiral pattern with animated movement",[27113,49336],{"component":49326},[1202,49338,27117],{"id":21717},[27119,49340],{":props":49341},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Spiral stroke color\"},{\"name\":\"strokeWidth\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Thickness of spiral stroke\"},{\"name\":\"strokeFalloff\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke losing width further from center\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Color transition sharpness (0 = hard edge, 1 = smooth fade)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed (negative values reverse direction)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the spiral\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale factor for spiral bands (higher = more bands, lower = fewer bands)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,49343,27125],{"id":27124},[23,49345,49346,49375,49403,49431,49459],{":tabs":25},[27,49347,49349],{"className":29,"code":49348,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[34,49350,49351,49359,49367],{"__ignoreMap":32},[37,49352,49353,49355,49357],{"class":39,"line":40},[37,49354,44],{"class":43},[37,49356,48],{"class":47},[37,49358,62],{"class":43},[37,49360,49361,49363,49365],{"class":39,"line":65},[37,49362,75],{"class":43},[37,49364,49326],{"class":47},[37,49366,113],{"class":43},[37,49368,49369,49371,49373],{"class":39,"line":72},[37,49370,273],{"class":43},[37,49372,48],{"class":47},[37,49374,62],{"class":43},[27,49376,49377],{"className":280,"code":49348,"language":282,"meta":32,"style":32},[34,49378,49379,49387,49395],{"__ignoreMap":32},[37,49380,49381,49383,49385],{"class":39,"line":40},[37,49382,44],{"class":43},[37,49384,48],{"class":291},[37,49386,62],{"class":43},[37,49388,49389,49391,49393],{"class":39,"line":65},[37,49390,75],{"class":43},[37,49392,49326],{"class":291},[37,49394,113],{"class":43},[37,49396,49397,49399,49401],{"class":39,"line":72},[37,49398,273],{"class":43},[37,49400,48],{"class":291},[37,49402,62],{"class":43},[27,49404,49405],{"className":3580,"code":49348,"language":3582,"meta":32,"style":32},[34,49406,49407,49415,49423],{"__ignoreMap":32},[37,49408,49409,49411,49413],{"class":39,"line":40},[37,49410,44],{"class":43},[37,49412,48],{"class":291},[37,49414,62],{"class":43},[37,49416,49417,49419,49421],{"class":39,"line":65},[37,49418,75],{"class":43},[37,49420,49326],{"class":291},[37,49422,113],{"class":43},[37,49424,49425,49427,49429],{"class":39,"line":72},[37,49426,273],{"class":43},[37,49428,48],{"class":291},[37,49430,62],{"class":43},[27,49432,49433],{"className":543,"code":49348,"language":545,"meta":32,"style":32},[34,49434,49435,49443,49451],{"__ignoreMap":32},[37,49436,49437,49439,49441],{"class":39,"line":40},[37,49438,44],{"class":43},[37,49440,48],{"class":291},[37,49442,62],{"class":43},[37,49444,49445,49447,49449],{"class":39,"line":65},[37,49446,75],{"class":43},[37,49448,49326],{"class":291},[37,49450,113],{"class":43},[37,49452,49453,49455,49457],{"class":39,"line":72},[37,49454,273],{"class":43},[37,49456,48],{"class":291},[37,49458,62],{"class":43},[27,49460,49462],{"className":987,"code":49461,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Spiral', props: {} }\n ]\n})\n",[34,49463,49464,49474,49478,49492,49496,49505,49509],{"__ignoreMap":32},[37,49465,49466,49468,49470,49472],{"class":39,"line":40},[37,49467,1382],{"class":297},[37,49469,9444],{"class":43},[37,49471,1388],{"class":297},[37,49473,9449],{"class":58},[37,49475,49476],{"class":39,"line":65},[37,49477,120],{"emptyLinePlaceholder":119},[37,49479,49480,49482,49484,49486,49488,49490],{"class":39,"line":72},[37,49481,2809],{"class":297},[37,49483,2812],{"class":291},[37,49485,2815],{"class":297},[37,49487,2818],{"class":297},[37,49489,999],{"class":51},[37,49491,1002],{"class":43},[37,49493,49494],{"class":39,"line":116},[37,49495,1007],{"class":43},[37,49497,49498,49500,49503],{"class":39,"line":123},[37,49499,1017],{"class":43},[37,49501,49502],{"class":58},"'Spiral'",[37,49504,3207],{"class":43},[37,49506,49507],{"class":39,"line":129},[37,49508,1194],{"class":43},[37,49510,49511],{"class":39,"line":171},[37,49512,1200],{"class":43},[1311,49514,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":49516},[49517,49518],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/spiral",{"title":49326,"description":49334},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":49525,"title":49526,"body":49527,"category":30939,"componentType":21056,"description":49534,"extension":1323,"meta":49811,"navigation":119,"path":49812,"requiresChild":27975,"seo":49813,"stem":49814,"__hash__":49815},"components/docs/components/Star.md","Star",{"type":8,"value":49528,"toc":49807},[49529,49532,49535,49537,49539,49542,49544,49805],[11,49530,49526],{"id":49531},"star",[15,49533,49534],{},"Classic star polygon with straight sides and sharp pointed tips",[27113,49536],{"component":49526},[1202,49538,27117],{"id":21717},[27119,49540],{":props":49541},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the star\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the star\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Outer tip radius — distance from center to the pointed tips\"},{\"name\":\"sides\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of points on the star\"},{\"name\":\"innerRatio\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Inner vertex radius as a ratio of outer radius (0.382 = golden-ratio 5-star)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,49543,27125],{"id":27124},[23,49545,49546,49594,49645,49693,49743],{":tabs":25},[27,49547,49549],{"className":29,"code":49548,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[34,49550,49551,49559,49566,49574,49582,49586],{"__ignoreMap":32},[37,49552,49553,49555,49557],{"class":39,"line":40},[37,49554,44],{"class":43},[37,49556,48],{"class":47},[37,49558,62],{"class":43},[37,49560,49561,49563],{"class":39,"line":65},[37,49562,75],{"class":43},[37,49564,49565],{"class":47},"Star\n",[37,49567,49568,49570,49572],{"class":39,"line":72},[37,49569,7570],{"class":51},[37,49571,55],{"class":43},[37,49573,7526],{"class":58},[37,49575,49576,49578,49580],{"class":39,"line":116},[37,49577,15113],{"class":51},[37,49579,55],{"class":43},[37,49581,36474],{"class":58},[37,49583,49584],{"class":39,"line":123},[37,49585,2314],{"class":43},[37,49587,49588,49590,49592],{"class":39,"line":129},[37,49589,273],{"class":43},[37,49591,48],{"class":47},[37,49593,62],{"class":43},[27,49595,49597],{"className":280,"code":49596,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[34,49598,49599,49607,49613,49621,49633,49637],{"__ignoreMap":32},[37,49600,49601,49603,49605],{"class":39,"line":40},[37,49602,44],{"class":43},[37,49604,48],{"class":291},[37,49606,62],{"class":43},[37,49608,49609,49611],{"class":39,"line":65},[37,49610,75],{"class":43},[37,49612,49565],{"class":291},[37,49614,49615,49617,49619],{"class":39,"line":72},[37,49616,7570],{"class":51},[37,49618,55],{"class":297},[37,49620,7526],{"class":58},[37,49622,49623,49625,49627,49629,49631],{"class":39,"line":116},[37,49624,7580],{"class":51},[37,49626,55],{"class":297},[37,49628,326],{"class":43},[37,49630,6186],{"class":291},[37,49632,312],{"class":43},[37,49634,49635],{"class":39,"line":123},[37,49636,2314],{"class":43},[37,49638,49639,49641,49643],{"class":39,"line":129},[37,49640,273],{"class":43},[37,49642,48],{"class":291},[37,49644,62],{"class":43},[27,49646,49647],{"className":3580,"code":49596,"language":3582,"meta":32,"style":32},[34,49648,49649,49657,49663,49671,49681,49685],{"__ignoreMap":32},[37,49650,49651,49653,49655],{"class":39,"line":40},[37,49652,44],{"class":43},[37,49654,48],{"class":291},[37,49656,62],{"class":43},[37,49658,49659,49661],{"class":39,"line":65},[37,49660,75],{"class":43},[37,49662,49565],{"class":291},[37,49664,49665,49667,49669],{"class":39,"line":72},[37,49666,7570],{"class":51},[37,49668,55],{"class":43},[37,49670,7526],{"class":58},[37,49672,49673,49675,49677,49679],{"class":39,"line":116},[37,49674,7580],{"class":51},[37,49676,25058],{"class":43},[37,49678,6186],{"class":291},[37,49680,312],{"class":43},[37,49682,49683],{"class":39,"line":123},[37,49684,2314],{"class":43},[37,49686,49687,49689,49691],{"class":39,"line":129},[37,49688,273],{"class":43},[37,49690,48],{"class":291},[37,49692,62],{"class":43},[27,49694,49695],{"className":543,"code":49596,"language":545,"meta":32,"style":32},[34,49696,49697,49705,49711,49719,49731,49735],{"__ignoreMap":32},[37,49698,49699,49701,49703],{"class":39,"line":40},[37,49700,44],{"class":43},[37,49702,48],{"class":291},[37,49704,62],{"class":43},[37,49706,49707,49709],{"class":39,"line":65},[37,49708,75],{"class":43},[37,49710,49565],{"class":291},[37,49712,49713,49715,49717],{"class":39,"line":72},[37,49714,7570],{"class":51},[37,49716,55],{"class":297},[37,49718,7526],{"class":58},[37,49720,49721,49723,49725,49727,49729],{"class":39,"line":116},[37,49722,7580],{"class":51},[37,49724,55],{"class":297},[37,49726,326],{"class":43},[37,49728,6186],{"class":291},[37,49730,312],{"class":43},[37,49732,49733],{"class":39,"line":123},[37,49734,2314],{"class":43},[37,49736,49737,49739,49741],{"class":39,"line":129},[37,49738,273],{"class":43},[37,49740,48],{"class":291},[37,49742,62],{"class":43},[27,49744,49746],{"className":987,"code":49745,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Star', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[34,49747,49748,49758,49762,49776,49780,49797,49801],{"__ignoreMap":32},[37,49749,49750,49752,49754,49756],{"class":39,"line":40},[37,49751,1382],{"class":297},[37,49753,9444],{"class":43},[37,49755,1388],{"class":297},[37,49757,9449],{"class":58},[37,49759,49760],{"class":39,"line":65},[37,49761,120],{"emptyLinePlaceholder":119},[37,49763,49764,49766,49768,49770,49772,49774],{"class":39,"line":72},[37,49765,2809],{"class":297},[37,49767,2812],{"class":291},[37,49769,2815],{"class":297},[37,49771,2818],{"class":297},[37,49773,999],{"class":51},[37,49775,1002],{"class":43},[37,49777,49778],{"class":39,"line":116},[37,49779,1007],{"class":43},[37,49781,49782,49784,49787,49789,49791,49793,49795],{"class":39,"line":123},[37,49783,1017],{"class":43},[37,49785,49786],{"class":58},"'Star'",[37,49788,2845],{"class":43},[37,49790,8101],{"class":58},[37,49792,4501],{"class":43},[37,49794,6186],{"class":291},[37,49796,1142],{"class":43},[37,49798,49799],{"class":39,"line":129},[37,49800,1194],{"class":43},[37,49802,49803],{"class":39,"line":171},[37,49804,1200],{"class":43},[1311,49806,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":49808},[49809,49810],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/star",{"title":49526,"description":49534},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":49817,"title":49818,"body":49819,"category":27972,"componentType":21056,"description":49826,"extension":1323,"meta":50011,"navigation":119,"path":50012,"requiresChild":27975,"seo":50013,"stem":50014,"__hash__":50015},"components/docs/components/Strands.md","Strands",{"type":8,"value":49820,"toc":50007},[49821,49824,49827,49829,49831,49834,49836,50005],[11,49822,49818],{"id":49823},"strands",[15,49825,49826],{},"Procedural wavy strands with layered animation",[27113,49828],{"component":49818},[1202,49830,27117],{"id":21717},[27119,49832],{":props":49833},"[{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Overall animation speed\"},{\"name\":\"amplitude\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Wave height amplitude\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Wave frequency\"},{\"name\":\"lineCount\",\"type\":\"number\",\"default\":\"12\",\"description\":\"Number of wave lines\"},{\"name\":\"lineWidth\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Width of wave lines\"},{\"name\":\"waveColor\",\"type\":\"string\",\"default\":\"#f1c907\",\"description\":\"Color of the waves\"},{\"name\":\"pinEdges\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Pin waves at edges (fade effect)\"},{\"name\":\"start\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0,\\\"y\\\":0.5}\",\"description\":\"Starting point of the waves\"},{\"name\":\"end\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":1,\\\"y\\\":0.5}\",\"description\":\"Ending point of the waves\"}]",[1202,49835,27125],{"id":27124},[23,49837,49838,49867,49895,49923,49951],{":tabs":25},[27,49839,49841],{"className":29,"code":49840,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[34,49842,49843,49851,49859],{"__ignoreMap":32},[37,49844,49845,49847,49849],{"class":39,"line":40},[37,49846,44],{"class":43},[37,49848,48],{"class":47},[37,49850,62],{"class":43},[37,49852,49853,49855,49857],{"class":39,"line":65},[37,49854,75],{"class":43},[37,49856,49818],{"class":47},[37,49858,113],{"class":43},[37,49860,49861,49863,49865],{"class":39,"line":72},[37,49862,273],{"class":43},[37,49864,48],{"class":47},[37,49866,62],{"class":43},[27,49868,49869],{"className":280,"code":49840,"language":282,"meta":32,"style":32},[34,49870,49871,49879,49887],{"__ignoreMap":32},[37,49872,49873,49875,49877],{"class":39,"line":40},[37,49874,44],{"class":43},[37,49876,48],{"class":291},[37,49878,62],{"class":43},[37,49880,49881,49883,49885],{"class":39,"line":65},[37,49882,75],{"class":43},[37,49884,49818],{"class":291},[37,49886,113],{"class":43},[37,49888,49889,49891,49893],{"class":39,"line":72},[37,49890,273],{"class":43},[37,49892,48],{"class":291},[37,49894,62],{"class":43},[27,49896,49897],{"className":3580,"code":49840,"language":3582,"meta":32,"style":32},[34,49898,49899,49907,49915],{"__ignoreMap":32},[37,49900,49901,49903,49905],{"class":39,"line":40},[37,49902,44],{"class":43},[37,49904,48],{"class":291},[37,49906,62],{"class":43},[37,49908,49909,49911,49913],{"class":39,"line":65},[37,49910,75],{"class":43},[37,49912,49818],{"class":291},[37,49914,113],{"class":43},[37,49916,49917,49919,49921],{"class":39,"line":72},[37,49918,273],{"class":43},[37,49920,48],{"class":291},[37,49922,62],{"class":43},[27,49924,49925],{"className":543,"code":49840,"language":545,"meta":32,"style":32},[34,49926,49927,49935,49943],{"__ignoreMap":32},[37,49928,49929,49931,49933],{"class":39,"line":40},[37,49930,44],{"class":43},[37,49932,48],{"class":291},[37,49934,62],{"class":43},[37,49936,49937,49939,49941],{"class":39,"line":65},[37,49938,75],{"class":43},[37,49940,49818],{"class":291},[37,49942,113],{"class":43},[37,49944,49945,49947,49949],{"class":39,"line":72},[37,49946,273],{"class":43},[37,49948,48],{"class":291},[37,49950,62],{"class":43},[27,49952,49954],{"className":987,"code":49953,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Strands', props: {} }\n ]\n})\n",[34,49955,49956,49966,49970,49984,49988,49997,50001],{"__ignoreMap":32},[37,49957,49958,49960,49962,49964],{"class":39,"line":40},[37,49959,1382],{"class":297},[37,49961,9444],{"class":43},[37,49963,1388],{"class":297},[37,49965,9449],{"class":58},[37,49967,49968],{"class":39,"line":65},[37,49969,120],{"emptyLinePlaceholder":119},[37,49971,49972,49974,49976,49978,49980,49982],{"class":39,"line":72},[37,49973,2809],{"class":297},[37,49975,2812],{"class":291},[37,49977,2815],{"class":297},[37,49979,2818],{"class":297},[37,49981,999],{"class":51},[37,49983,1002],{"class":43},[37,49985,49986],{"class":39,"line":116},[37,49987,1007],{"class":43},[37,49989,49990,49992,49995],{"class":39,"line":123},[37,49991,1017],{"class":43},[37,49993,49994],{"class":58},"'Strands'",[37,49996,3207],{"class":43},[37,49998,49999],{"class":39,"line":129},[37,50000,1194],{"class":43},[37,50002,50003],{"class":39,"line":171},[37,50004,1200],{"class":43},[1311,50006,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":50008},[50009,50010],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/strands",{"title":49818,"description":49826},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":50017,"title":50018,"body":50019,"category":29317,"componentType":21062,"description":50025,"extension":1323,"meta":50286,"navigation":119,"path":50287,"requiresChild":119,"seo":50288,"stem":50289,"__hash__":50290},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":50020,"toc":50282},[50021,50023,50026,50028,50030,50033,50035,50280],[11,50022,50018],{"id":13858},[15,50024,50025],{},"Stretch content towards a direction from a center point",[27113,50027],{"component":50018},[1202,50029,27117],{"id":21717},[27119,50031],{":props":50032},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the stretch effect\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the stretch effect\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The direction of the stretch in degrees\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Controls the sharpness of the transition (0 = sharp edge, 1 = gradual transition)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,50034,27125],{"id":27124},[23,50036,50037,50082,50126,50170,50214],{":tabs":25},[27,50038,50040],{"className":29,"code":50039,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[34,50041,50042,50050,50058,50066,50074],{"__ignoreMap":32},[37,50043,50044,50046,50048],{"class":39,"line":40},[37,50045,44],{"class":43},[37,50047,48],{"class":47},[37,50049,62],{"class":43},[37,50051,50052,50054,50056],{"class":39,"line":65},[37,50053,75],{"class":43},[37,50055,50018],{"class":47},[37,50057,62],{"class":43},[37,50059,50060,50062,50064],{"class":39,"line":72},[37,50061,174],{"class":43},[37,50063,3293],{"class":47},[37,50065,113],{"class":43},[37,50067,50068,50070,50072],{"class":39,"line":116},[37,50069,224],{"class":43},[37,50071,50018],{"class":47},[37,50073,62],{"class":43},[37,50075,50076,50078,50080],{"class":39,"line":123},[37,50077,273],{"class":43},[37,50079,48],{"class":47},[37,50081,62],{"class":43},[27,50083,50084],{"className":280,"code":50039,"language":282,"meta":32,"style":32},[34,50085,50086,50094,50102,50110,50118],{"__ignoreMap":32},[37,50087,50088,50090,50092],{"class":39,"line":40},[37,50089,44],{"class":43},[37,50091,48],{"class":291},[37,50093,62],{"class":43},[37,50095,50096,50098,50100],{"class":39,"line":65},[37,50097,75],{"class":43},[37,50099,50018],{"class":291},[37,50101,62],{"class":43},[37,50103,50104,50106,50108],{"class":39,"line":72},[37,50105,174],{"class":43},[37,50107,3293],{"class":291},[37,50109,113],{"class":43},[37,50111,50112,50114,50116],{"class":39,"line":116},[37,50113,224],{"class":43},[37,50115,50018],{"class":291},[37,50117,62],{"class":43},[37,50119,50120,50122,50124],{"class":39,"line":123},[37,50121,273],{"class":43},[37,50123,48],{"class":291},[37,50125,62],{"class":43},[27,50127,50128],{"className":3580,"code":50039,"language":3582,"meta":32,"style":32},[34,50129,50130,50138,50146,50154,50162],{"__ignoreMap":32},[37,50131,50132,50134,50136],{"class":39,"line":40},[37,50133,44],{"class":43},[37,50135,48],{"class":291},[37,50137,62],{"class":43},[37,50139,50140,50142,50144],{"class":39,"line":65},[37,50141,75],{"class":43},[37,50143,50018],{"class":291},[37,50145,62],{"class":43},[37,50147,50148,50150,50152],{"class":39,"line":72},[37,50149,174],{"class":43},[37,50151,3293],{"class":291},[37,50153,113],{"class":43},[37,50155,50156,50158,50160],{"class":39,"line":116},[37,50157,224],{"class":43},[37,50159,50018],{"class":291},[37,50161,62],{"class":43},[37,50163,50164,50166,50168],{"class":39,"line":123},[37,50165,273],{"class":43},[37,50167,48],{"class":291},[37,50169,62],{"class":43},[27,50171,50172],{"className":543,"code":50039,"language":545,"meta":32,"style":32},[34,50173,50174,50182,50190,50198,50206],{"__ignoreMap":32},[37,50175,50176,50178,50180],{"class":39,"line":40},[37,50177,44],{"class":43},[37,50179,48],{"class":291},[37,50181,62],{"class":43},[37,50183,50184,50186,50188],{"class":39,"line":65},[37,50185,75],{"class":43},[37,50187,50018],{"class":291},[37,50189,62],{"class":43},[37,50191,50192,50194,50196],{"class":39,"line":72},[37,50193,174],{"class":43},[37,50195,3293],{"class":291},[37,50197,113],{"class":43},[37,50199,50200,50202,50204],{"class":39,"line":116},[37,50201,224],{"class":43},[37,50203,50018],{"class":291},[37,50205,62],{"class":43},[37,50207,50208,50210,50212],{"class":39,"line":123},[37,50209,273],{"class":43},[37,50211,48],{"class":291},[37,50213,62],{"class":43},[27,50215,50217],{"className":987,"code":50216,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stretch', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,50218,50219,50229,50233,50247,50251,50260,50268,50272,50276],{"__ignoreMap":32},[37,50220,50221,50223,50225,50227],{"class":39,"line":40},[37,50222,1382],{"class":297},[37,50224,9444],{"class":43},[37,50226,1388],{"class":297},[37,50228,9449],{"class":58},[37,50230,50231],{"class":39,"line":65},[37,50232,120],{"emptyLinePlaceholder":119},[37,50234,50235,50237,50239,50241,50243,50245],{"class":39,"line":72},[37,50236,2809],{"class":297},[37,50238,2812],{"class":291},[37,50240,2815],{"class":297},[37,50242,2818],{"class":297},[37,50244,999],{"class":51},[37,50246,1002],{"class":43},[37,50248,50249],{"class":39,"line":116},[37,50250,1007],{"class":43},[37,50252,50253,50255,50258],{"class":39,"line":123},[37,50254,1017],{"class":43},[37,50256,50257],{"class":58},"'Stretch'",[37,50259,4944],{"class":43},[37,50261,50262,50264,50266],{"class":39,"line":129},[37,50263,4949],{"class":43},[37,50265,3941],{"class":58},[37,50267,3207],{"class":43},[37,50269,50270],{"class":39,"line":171},[37,50271,4966],{"class":43},[37,50273,50274],{"class":39,"line":221},[37,50275,1194],{"class":43},[37,50277,50278],{"class":39,"line":231},[37,50279,1200],{"class":43},[1311,50281,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":50283},[50284,50285],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/stretch",{"title":50018,"description":50025},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":50292,"title":50293,"body":50294,"category":27972,"componentType":21056,"description":50301,"extension":1323,"meta":50486,"navigation":119,"path":50487,"requiresChild":27975,"seo":50488,"stem":50489,"__hash__":50490},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":50295,"toc":50482},[50296,50299,50302,50304,50306,50309,50311,50480],[11,50297,50293],{"id":50298},"stripes",[15,50300,50301],{},"Alternating colored stripes with animation",[27113,50303],{"component":50293},[1202,50305,27117],{"id":21717},[27119,50307],{":props":50308},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"First stripe color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second stripe color\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"45\",\"description\":\"Angle of stripes in degrees\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of stripe pairs visible\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Ratio of the two colors\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Animation speed\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Phase offset for pattern positioning\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[1202,50310,27125],{"id":27124},[23,50312,50313,50342,50370,50398,50426],{":tabs":25},[27,50314,50316],{"className":29,"code":50315,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[34,50317,50318,50326,50334],{"__ignoreMap":32},[37,50319,50320,50322,50324],{"class":39,"line":40},[37,50321,44],{"class":43},[37,50323,48],{"class":47},[37,50325,62],{"class":43},[37,50327,50328,50330,50332],{"class":39,"line":65},[37,50329,75],{"class":43},[37,50331,50293],{"class":47},[37,50333,113],{"class":43},[37,50335,50336,50338,50340],{"class":39,"line":72},[37,50337,273],{"class":43},[37,50339,48],{"class":47},[37,50341,62],{"class":43},[27,50343,50344],{"className":280,"code":50315,"language":282,"meta":32,"style":32},[34,50345,50346,50354,50362],{"__ignoreMap":32},[37,50347,50348,50350,50352],{"class":39,"line":40},[37,50349,44],{"class":43},[37,50351,48],{"class":291},[37,50353,62],{"class":43},[37,50355,50356,50358,50360],{"class":39,"line":65},[37,50357,75],{"class":43},[37,50359,50293],{"class":291},[37,50361,113],{"class":43},[37,50363,50364,50366,50368],{"class":39,"line":72},[37,50365,273],{"class":43},[37,50367,48],{"class":291},[37,50369,62],{"class":43},[27,50371,50372],{"className":3580,"code":50315,"language":3582,"meta":32,"style":32},[34,50373,50374,50382,50390],{"__ignoreMap":32},[37,50375,50376,50378,50380],{"class":39,"line":40},[37,50377,44],{"class":43},[37,50379,48],{"class":291},[37,50381,62],{"class":43},[37,50383,50384,50386,50388],{"class":39,"line":65},[37,50385,75],{"class":43},[37,50387,50293],{"class":291},[37,50389,113],{"class":43},[37,50391,50392,50394,50396],{"class":39,"line":72},[37,50393,273],{"class":43},[37,50395,48],{"class":291},[37,50397,62],{"class":43},[27,50399,50400],{"className":543,"code":50315,"language":545,"meta":32,"style":32},[34,50401,50402,50410,50418],{"__ignoreMap":32},[37,50403,50404,50406,50408],{"class":39,"line":40},[37,50405,44],{"class":43},[37,50407,48],{"class":291},[37,50409,62],{"class":43},[37,50411,50412,50414,50416],{"class":39,"line":65},[37,50413,75],{"class":43},[37,50415,50293],{"class":291},[37,50417,113],{"class":43},[37,50419,50420,50422,50424],{"class":39,"line":72},[37,50421,273],{"class":43},[37,50423,48],{"class":291},[37,50425,62],{"class":43},[27,50427,50429],{"className":987,"code":50428,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stripes', props: {} }\n ]\n})\n",[34,50430,50431,50441,50445,50459,50463,50472,50476],{"__ignoreMap":32},[37,50432,50433,50435,50437,50439],{"class":39,"line":40},[37,50434,1382],{"class":297},[37,50436,9444],{"class":43},[37,50438,1388],{"class":297},[37,50440,9449],{"class":58},[37,50442,50443],{"class":39,"line":65},[37,50444,120],{"emptyLinePlaceholder":119},[37,50446,50447,50449,50451,50453,50455,50457],{"class":39,"line":72},[37,50448,2809],{"class":297},[37,50450,2812],{"class":291},[37,50452,2815],{"class":297},[37,50454,2818],{"class":297},[37,50456,999],{"class":51},[37,50458,1002],{"class":43},[37,50460,50461],{"class":39,"line":116},[37,50462,1007],{"class":43},[37,50464,50465,50467,50470],{"class":39,"line":123},[37,50466,1017],{"class":43},[37,50468,50469],{"class":58},"'Stripes'",[37,50471,3207],{"class":43},[37,50473,50474],{"class":39,"line":129},[37,50475,1194],{"class":43},[37,50477,50478],{"class":39,"line":171},[37,50479,1200],{"class":43},[1311,50481,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":50483},[50484,50485],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/stripes",{"title":50293,"description":50301},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":50492,"title":50493,"body":50494,"category":27972,"componentType":21056,"description":50501,"extension":1323,"meta":50733,"navigation":119,"path":50734,"requiresChild":27975,"seo":50735,"stem":50736,"__hash__":50737},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":50495,"toc":50729},[50496,50499,50502,50504,50506,50509,50511,50727],[11,50497,50493],{"id":50498},"studiobackground",[15,50500,50501],{},"Multi-light studio background with ambient motion.",[27113,50503],{"component":50493},[1202,50505,27117],{"id":21717},[27119,50507],{":props":50508},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#d8dbec\",\"description\":\"Base studio surface color\"},{\"name\":\"keyColor\",\"type\":\"string\",\"default\":\"#d5e4ea\",\"description\":\"Color of the overhead key light\"},{\"name\":\"keyIntensity\",\"type\":\"number\",\"default\":\"40\",\"description\":\"Intensity of the key light\"},{\"name\":\"keySoftness\",\"type\":\"number\",\"default\":\"50\",\"description\":\"How diffuse the key light is\"},{\"name\":\"fillColor\",\"type\":\"string\",\"default\":\"#d5e4ea\",\"description\":\"Color of the side fill lights\"},{\"name\":\"fillIntensity\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Intensity of the fill lights\"},{\"name\":\"fillSoftness\",\"type\":\"number\",\"default\":\"70\",\"description\":\"How diffuse the fill lights are\"},{\"name\":\"fillAngle\",\"type\":\"number\",\"default\":\"70\",\"description\":\"How far apart the fill lights are from center\"},{\"name\":\"backColor\",\"type\":\"string\",\"default\":\"#c8d4e8\",\"description\":\"Color of the upward back wash\"},{\"name\":\"backIntensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Intensity of the back wash\"},{\"name\":\"backSoftness\",\"type\":\"number\",\"default\":\"80\",\"description\":\"How diffuse the back wash is\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Overall ambient light level\"},{\"name\":\"vignette\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge darkening\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.8}\",\"description\":\"Where the spotlight meets the floor\"},{\"name\":\"lightTarget\",\"type\":\"number\",\"default\":\"100\",\"description\":\"How far toward the floor vs wall the spotlights aim\"},{\"name\":\"wallCurvature\",\"type\":\"number\",\"default\":\"10\",\"description\":\"How rounded the cove is\"},{\"name\":\"ambientIntensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of drifting ambient lights\"},{\"name\":\"ambientSpeed\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Drift speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Seed for ambient pattern\"}]",[1202,50510,27125],{"id":27124},[23,50512,50513,50554,50592,50630,50668],{":tabs":25},[27,50514,50516],{"className":29,"code":50515,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[34,50517,50518,50526,50533,50542,50546],{"__ignoreMap":32},[37,50519,50520,50522,50524],{"class":39,"line":40},[37,50521,44],{"class":43},[37,50523,48],{"class":47},[37,50525,62],{"class":43},[37,50527,50528,50530],{"class":39,"line":65},[37,50529,75],{"class":43},[37,50531,50532],{"class":47},"StudioBackground\n",[37,50534,50535,50537,50539],{"class":39,"line":72},[37,50536,7570],{"class":51},[37,50538,55],{"class":43},[37,50540,50541],{"class":58},"\"#d8dbec\"\n",[37,50543,50544],{"class":39,"line":116},[37,50545,2314],{"class":43},[37,50547,50548,50550,50552],{"class":39,"line":123},[37,50549,273],{"class":43},[37,50551,48],{"class":47},[37,50553,62],{"class":43},[27,50555,50556],{"className":280,"code":50515,"language":282,"meta":32,"style":32},[34,50557,50558,50566,50572,50580,50584],{"__ignoreMap":32},[37,50559,50560,50562,50564],{"class":39,"line":40},[37,50561,44],{"class":43},[37,50563,48],{"class":291},[37,50565,62],{"class":43},[37,50567,50568,50570],{"class":39,"line":65},[37,50569,75],{"class":43},[37,50571,50532],{"class":291},[37,50573,50574,50576,50578],{"class":39,"line":72},[37,50575,7570],{"class":51},[37,50577,55],{"class":297},[37,50579,50541],{"class":58},[37,50581,50582],{"class":39,"line":116},[37,50583,2314],{"class":43},[37,50585,50586,50588,50590],{"class":39,"line":123},[37,50587,273],{"class":43},[37,50589,48],{"class":291},[37,50591,62],{"class":43},[27,50593,50594],{"className":3580,"code":50515,"language":3582,"meta":32,"style":32},[34,50595,50596,50604,50610,50618,50622],{"__ignoreMap":32},[37,50597,50598,50600,50602],{"class":39,"line":40},[37,50599,44],{"class":43},[37,50601,48],{"class":291},[37,50603,62],{"class":43},[37,50605,50606,50608],{"class":39,"line":65},[37,50607,75],{"class":43},[37,50609,50532],{"class":291},[37,50611,50612,50614,50616],{"class":39,"line":72},[37,50613,7570],{"class":51},[37,50615,55],{"class":43},[37,50617,50541],{"class":58},[37,50619,50620],{"class":39,"line":116},[37,50621,2314],{"class":43},[37,50623,50624,50626,50628],{"class":39,"line":123},[37,50625,273],{"class":43},[37,50627,48],{"class":291},[37,50629,62],{"class":43},[27,50631,50632],{"className":543,"code":50515,"language":545,"meta":32,"style":32},[34,50633,50634,50642,50648,50656,50660],{"__ignoreMap":32},[37,50635,50636,50638,50640],{"class":39,"line":40},[37,50637,44],{"class":43},[37,50639,48],{"class":291},[37,50641,62],{"class":43},[37,50643,50644,50646],{"class":39,"line":65},[37,50645,75],{"class":43},[37,50647,50532],{"class":291},[37,50649,50650,50652,50654],{"class":39,"line":72},[37,50651,7570],{"class":51},[37,50653,55],{"class":297},[37,50655,50541],{"class":58},[37,50657,50658],{"class":39,"line":116},[37,50659,2314],{"class":43},[37,50661,50662,50664,50666],{"class":39,"line":123},[37,50663,273],{"class":43},[37,50665,48],{"class":291},[37,50667,62],{"class":43},[27,50669,50671],{"className":987,"code":50670,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'StudioBackground', props: { color: '#d8dbec' } }\n ]\n})\n",[34,50672,50673,50683,50687,50701,50705,50719,50723],{"__ignoreMap":32},[37,50674,50675,50677,50679,50681],{"class":39,"line":40},[37,50676,1382],{"class":297},[37,50678,9444],{"class":43},[37,50680,1388],{"class":297},[37,50682,9449],{"class":58},[37,50684,50685],{"class":39,"line":65},[37,50686,120],{"emptyLinePlaceholder":119},[37,50688,50689,50691,50693,50695,50697,50699],{"class":39,"line":72},[37,50690,2809],{"class":297},[37,50692,2812],{"class":291},[37,50694,2815],{"class":297},[37,50696,2818],{"class":297},[37,50698,999],{"class":51},[37,50700,1002],{"class":43},[37,50702,50703],{"class":39,"line":116},[37,50704,1007],{"class":43},[37,50706,50707,50709,50712,50714,50717],{"class":39,"line":123},[37,50708,1017],{"class":43},[37,50710,50711],{"class":58},"'StudioBackground'",[37,50713,2845],{"class":43},[37,50715,50716],{"class":58},"'#d8dbec'",[37,50718,1142],{"class":43},[37,50720,50721],{"class":39,"line":129},[37,50722,1194],{"class":43},[37,50724,50725],{"class":39,"line":171},[37,50726,1200],{"class":43},[1311,50728,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":50730},[50731,50732],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/studiobackground",{"title":50493,"description":50501},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":50739,"title":11935,"body":50740,"category":27972,"componentType":21056,"description":50747,"extension":1323,"meta":50932,"navigation":119,"path":50933,"requiresChild":27975,"seo":50934,"stem":50935,"__hash__":50936},"components/docs/components/Swirl.md",{"type":8,"value":50741,"toc":50928},[50742,50745,50748,50750,50752,50755,50757,50926],[11,50743,11935],{"id":50744},"swirl",[15,50746,50747],{},"Flowing swirl pattern with multi-layered noise",[27113,50749],{"component":11935},[1202,50751,27117],{"id":21717},[27119,50753],{":props":50754},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#1275d8\",\"description\":\"Primary gradient color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e19136\",\"description\":\"Secondary gradient color\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Flow animation speed\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Level of detail and intricacy in the swirl patterns\"},{\"name\":\"blend\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Skew color balance toward A (lower values) or B (higher values)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,50756,27125],{"id":27124},[23,50758,50759,50788,50816,50844,50872],{":tabs":25},[27,50760,50762],{"className":29,"code":50761,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[34,50763,50764,50772,50780],{"__ignoreMap":32},[37,50765,50766,50768,50770],{"class":39,"line":40},[37,50767,44],{"class":43},[37,50769,48],{"class":47},[37,50771,62],{"class":43},[37,50773,50774,50776,50778],{"class":39,"line":65},[37,50775,75],{"class":43},[37,50777,11935],{"class":47},[37,50779,113],{"class":43},[37,50781,50782,50784,50786],{"class":39,"line":72},[37,50783,273],{"class":43},[37,50785,48],{"class":47},[37,50787,62],{"class":43},[27,50789,50790],{"className":280,"code":50761,"language":282,"meta":32,"style":32},[34,50791,50792,50800,50808],{"__ignoreMap":32},[37,50793,50794,50796,50798],{"class":39,"line":40},[37,50795,44],{"class":43},[37,50797,48],{"class":291},[37,50799,62],{"class":43},[37,50801,50802,50804,50806],{"class":39,"line":65},[37,50803,75],{"class":43},[37,50805,11935],{"class":291},[37,50807,113],{"class":43},[37,50809,50810,50812,50814],{"class":39,"line":72},[37,50811,273],{"class":43},[37,50813,48],{"class":291},[37,50815,62],{"class":43},[27,50817,50818],{"className":3580,"code":50761,"language":3582,"meta":32,"style":32},[34,50819,50820,50828,50836],{"__ignoreMap":32},[37,50821,50822,50824,50826],{"class":39,"line":40},[37,50823,44],{"class":43},[37,50825,48],{"class":291},[37,50827,62],{"class":43},[37,50829,50830,50832,50834],{"class":39,"line":65},[37,50831,75],{"class":43},[37,50833,11935],{"class":291},[37,50835,113],{"class":43},[37,50837,50838,50840,50842],{"class":39,"line":72},[37,50839,273],{"class":43},[37,50841,48],{"class":291},[37,50843,62],{"class":43},[27,50845,50846],{"className":543,"code":50761,"language":545,"meta":32,"style":32},[34,50847,50848,50856,50864],{"__ignoreMap":32},[37,50849,50850,50852,50854],{"class":39,"line":40},[37,50851,44],{"class":43},[37,50853,48],{"class":291},[37,50855,62],{"class":43},[37,50857,50858,50860,50862],{"class":39,"line":65},[37,50859,75],{"class":43},[37,50861,11935],{"class":291},[37,50863,113],{"class":43},[37,50865,50866,50868,50870],{"class":39,"line":72},[37,50867,273],{"class":43},[37,50869,48],{"class":291},[37,50871,62],{"class":43},[27,50873,50875],{"className":987,"code":50874,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Swirl', props: {} }\n ]\n})\n",[34,50876,50877,50887,50891,50905,50909,50918,50922],{"__ignoreMap":32},[37,50878,50879,50881,50883,50885],{"class":39,"line":40},[37,50880,1382],{"class":297},[37,50882,9444],{"class":43},[37,50884,1388],{"class":297},[37,50886,9449],{"class":58},[37,50888,50889],{"class":39,"line":65},[37,50890,120],{"emptyLinePlaceholder":119},[37,50892,50893,50895,50897,50899,50901,50903],{"class":39,"line":72},[37,50894,2809],{"class":297},[37,50896,2812],{"class":291},[37,50898,2815],{"class":297},[37,50900,2818],{"class":297},[37,50902,999],{"class":51},[37,50904,1002],{"class":43},[37,50906,50907],{"class":39,"line":116},[37,50908,1007],{"class":43},[37,50910,50911,50913,50916],{"class":39,"line":123},[37,50912,1017],{"class":43},[37,50914,50915],{"class":58},"'Swirl'",[37,50917,3207],{"class":43},[37,50919,50920],{"class":39,"line":129},[37,50921,1194],{"class":43},[37,50923,50924],{"class":39,"line":171},[37,50925,1200],{"class":43},[1311,50927,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":50929},[50930,50931],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/swirl",{"title":11935,"description":50747},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":50938,"title":50939,"body":50940,"category":27437,"componentType":21062,"description":50947,"extension":1323,"meta":51264,"navigation":119,"path":51265,"requiresChild":119,"seo":51266,"stem":51267,"__hash__":51268},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":50941,"toc":51260},[50942,50945,50948,50950,50952,50955,50957,51258],[11,50943,50939],{"id":50944},"tiltshift",[15,50946,50947],{},"Selective focus blur mimicking tilt-shift photography",[27113,50949],{"component":50939},[1202,50951,27117],{"id":21717},[27119,50953],{":props":50954},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Maximum blur intensity at edges\"},{\"name\":\"width\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Width of the sharp focus area\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Distance over which blur transitions to full strength\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle of the focus line (in degrees)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the focus line\"}]",[1202,50956,27125],{"id":27124},[23,50958,50959,51015,51074,51130,51188],{":tabs":25},[27,50960,50962],{"className":29,"code":50961,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[34,50963,50964,50972,50979,50987,50991,50999,51007],{"__ignoreMap":32},[37,50965,50966,50968,50970],{"class":39,"line":40},[37,50967,44],{"class":43},[37,50969,48],{"class":47},[37,50971,62],{"class":43},[37,50973,50974,50976],{"class":39,"line":65},[37,50975,75],{"class":43},[37,50977,50978],{"class":47},"TiltShift\n",[37,50980,50981,50983,50985],{"class":39,"line":72},[37,50982,18081],{"class":51},[37,50984,55],{"class":43},[37,50986,28428],{"class":58},[37,50988,50989],{"class":39,"line":116},[37,50990,27161],{"class":43},[37,50992,50993,50995,50997],{"class":39,"line":123},[37,50994,174],{"class":43},[37,50996,3293],{"class":47},[37,50998,113],{"class":43},[37,51000,51001,51003,51005],{"class":39,"line":129},[37,51002,224],{"class":43},[37,51004,50939],{"class":47},[37,51006,62],{"class":43},[37,51008,51009,51011,51013],{"class":39,"line":171},[37,51010,273],{"class":43},[37,51012,48],{"class":47},[37,51014,62],{"class":43},[27,51016,51018],{"className":280,"code":51017,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[34,51019,51020,51028,51034,51046,51050,51058,51066],{"__ignoreMap":32},[37,51021,51022,51024,51026],{"class":39,"line":40},[37,51023,44],{"class":43},[37,51025,48],{"class":291},[37,51027,62],{"class":43},[37,51029,51030,51032],{"class":39,"line":65},[37,51031,75],{"class":43},[37,51033,50978],{"class":291},[37,51035,51036,51038,51040,51042,51044],{"class":39,"line":72},[37,51037,18192],{"class":51},[37,51039,55],{"class":297},[37,51041,326],{"class":43},[37,51043,28486],{"class":291},[37,51045,312],{"class":43},[37,51047,51048],{"class":39,"line":116},[37,51049,27161],{"class":43},[37,51051,51052,51054,51056],{"class":39,"line":123},[37,51053,174],{"class":43},[37,51055,3293],{"class":291},[37,51057,113],{"class":43},[37,51059,51060,51062,51064],{"class":39,"line":129},[37,51061,224],{"class":43},[37,51063,50939],{"class":291},[37,51065,62],{"class":43},[37,51067,51068,51070,51072],{"class":39,"line":171},[37,51069,273],{"class":43},[37,51071,48],{"class":291},[37,51073,62],{"class":43},[27,51075,51076],{"className":3580,"code":51017,"language":3582,"meta":32,"style":32},[34,51077,51078,51086,51092,51102,51106,51114,51122],{"__ignoreMap":32},[37,51079,51080,51082,51084],{"class":39,"line":40},[37,51081,44],{"class":43},[37,51083,48],{"class":291},[37,51085,62],{"class":43},[37,51087,51088,51090],{"class":39,"line":65},[37,51089,75],{"class":43},[37,51091,50978],{"class":291},[37,51093,51094,51096,51098,51100],{"class":39,"line":72},[37,51095,18192],{"class":51},[37,51097,25058],{"class":43},[37,51099,28486],{"class":291},[37,51101,312],{"class":43},[37,51103,51104],{"class":39,"line":116},[37,51105,27161],{"class":43},[37,51107,51108,51110,51112],{"class":39,"line":123},[37,51109,174],{"class":43},[37,51111,3293],{"class":291},[37,51113,113],{"class":43},[37,51115,51116,51118,51120],{"class":39,"line":129},[37,51117,224],{"class":43},[37,51119,50939],{"class":291},[37,51121,62],{"class":43},[37,51123,51124,51126,51128],{"class":39,"line":171},[37,51125,273],{"class":43},[37,51127,48],{"class":291},[37,51129,62],{"class":43},[27,51131,51132],{"className":543,"code":51017,"language":545,"meta":32,"style":32},[34,51133,51134,51142,51148,51160,51164,51172,51180],{"__ignoreMap":32},[37,51135,51136,51138,51140],{"class":39,"line":40},[37,51137,44],{"class":43},[37,51139,48],{"class":291},[37,51141,62],{"class":43},[37,51143,51144,51146],{"class":39,"line":65},[37,51145,75],{"class":43},[37,51147,50978],{"class":291},[37,51149,51150,51152,51154,51156,51158],{"class":39,"line":72},[37,51151,18192],{"class":51},[37,51153,55],{"class":297},[37,51155,326],{"class":43},[37,51157,28486],{"class":291},[37,51159,312],{"class":43},[37,51161,51162],{"class":39,"line":116},[37,51163,27161],{"class":43},[37,51165,51166,51168,51170],{"class":39,"line":123},[37,51167,174],{"class":43},[37,51169,3293],{"class":291},[37,51171,113],{"class":43},[37,51173,51174,51176,51178],{"class":39,"line":129},[37,51175,224],{"class":43},[37,51177,50939],{"class":291},[37,51179,62],{"class":43},[37,51181,51182,51184,51186],{"class":39,"line":171},[37,51183,273],{"class":43},[37,51185,48],{"class":291},[37,51187,62],{"class":43},[27,51189,51191],{"className":987,"code":51190,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'TiltShift', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,51192,51193,51203,51207,51221,51225,51238,51246,51250,51254],{"__ignoreMap":32},[37,51194,51195,51197,51199,51201],{"class":39,"line":40},[37,51196,1382],{"class":297},[37,51198,9444],{"class":43},[37,51200,1388],{"class":297},[37,51202,9449],{"class":58},[37,51204,51205],{"class":39,"line":65},[37,51206,120],{"emptyLinePlaceholder":119},[37,51208,51209,51211,51213,51215,51217,51219],{"class":39,"line":72},[37,51210,2809],{"class":297},[37,51212,2812],{"class":291},[37,51214,2815],{"class":297},[37,51216,2818],{"class":297},[37,51218,999],{"class":51},[37,51220,1002],{"class":43},[37,51222,51223],{"class":39,"line":116},[37,51224,1007],{"class":43},[37,51226,51227,51229,51232,51234,51236],{"class":39,"line":123},[37,51228,1017],{"class":43},[37,51230,51231],{"class":58},"'TiltShift'",[37,51233,27406],{"class":43},[37,51235,28486],{"class":291},[37,51237,5482],{"class":43},[37,51239,51240,51242,51244],{"class":39,"line":129},[37,51241,4949],{"class":43},[37,51243,3941],{"class":58},[37,51245,3207],{"class":43},[37,51247,51248],{"class":39,"line":171},[37,51249,4966],{"class":43},[37,51251,51252],{"class":39,"line":221},[37,51253,1194],{"class":43},[37,51255,51256],{"class":39,"line":231},[37,51257,1200],{"class":43},[1311,51259,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":51261},[51262,51263],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/tiltshift",{"title":50939,"description":50947},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":51270,"title":51271,"body":51272,"category":28983,"componentType":21062,"description":51279,"extension":1323,"meta":51587,"navigation":119,"path":51588,"requiresChild":119,"seo":51589,"stem":51590,"__hash__":51591},"components/docs/components/Tint.md","Tint",{"type":8,"value":51273,"toc":51583},[51274,51277,51280,51282,51284,51287,51289,51581],[11,51275,51271],{"id":51276},"tint",[15,51278,51279],{},"Apply a color tint to the image",[27113,51281],{"component":51271},[1202,51283,27117],{"id":21717},[27119,51285],{":props":51286},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ff8800\",\"description\":\"Tint color\"},{\"name\":\"amount\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Tint amount (0 = no tint, 1 = full tint)\"},{\"name\":\"preserveLuminosity\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Preserve original brightness\"}]",[1202,51288,27125],{"id":27124},[23,51290,51291,51348,51402,51456,51510],{":tabs":25},[27,51292,51294],{"className":29,"code":51293,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[34,51295,51296,51304,51311,51320,51324,51332,51340],{"__ignoreMap":32},[37,51297,51298,51300,51302],{"class":39,"line":40},[37,51299,44],{"class":43},[37,51301,48],{"class":47},[37,51303,62],{"class":43},[37,51305,51306,51308],{"class":39,"line":65},[37,51307,75],{"class":43},[37,51309,51310],{"class":47},"Tint\n",[37,51312,51313,51315,51317],{"class":39,"line":72},[37,51314,7570],{"class":51},[37,51316,55],{"class":43},[37,51318,51319],{"class":58},"\"#ff8800\"\n",[37,51321,51322],{"class":39,"line":116},[37,51323,27161],{"class":43},[37,51325,51326,51328,51330],{"class":39,"line":123},[37,51327,174],{"class":43},[37,51329,3293],{"class":47},[37,51331,113],{"class":43},[37,51333,51334,51336,51338],{"class":39,"line":129},[37,51335,224],{"class":43},[37,51337,51271],{"class":47},[37,51339,62],{"class":43},[37,51341,51342,51344,51346],{"class":39,"line":171},[37,51343,273],{"class":43},[37,51345,48],{"class":47},[37,51347,62],{"class":43},[27,51349,51350],{"className":280,"code":51293,"language":282,"meta":32,"style":32},[34,51351,51352,51360,51366,51374,51378,51386,51394],{"__ignoreMap":32},[37,51353,51354,51356,51358],{"class":39,"line":40},[37,51355,44],{"class":43},[37,51357,48],{"class":291},[37,51359,62],{"class":43},[37,51361,51362,51364],{"class":39,"line":65},[37,51363,75],{"class":43},[37,51365,51310],{"class":291},[37,51367,51368,51370,51372],{"class":39,"line":72},[37,51369,7570],{"class":51},[37,51371,55],{"class":297},[37,51373,51319],{"class":58},[37,51375,51376],{"class":39,"line":116},[37,51377,27161],{"class":43},[37,51379,51380,51382,51384],{"class":39,"line":123},[37,51381,174],{"class":43},[37,51383,3293],{"class":291},[37,51385,113],{"class":43},[37,51387,51388,51390,51392],{"class":39,"line":129},[37,51389,224],{"class":43},[37,51391,51271],{"class":291},[37,51393,62],{"class":43},[37,51395,51396,51398,51400],{"class":39,"line":171},[37,51397,273],{"class":43},[37,51399,48],{"class":291},[37,51401,62],{"class":43},[27,51403,51404],{"className":3580,"code":51293,"language":3582,"meta":32,"style":32},[34,51405,51406,51414,51420,51428,51432,51440,51448],{"__ignoreMap":32},[37,51407,51408,51410,51412],{"class":39,"line":40},[37,51409,44],{"class":43},[37,51411,48],{"class":291},[37,51413,62],{"class":43},[37,51415,51416,51418],{"class":39,"line":65},[37,51417,75],{"class":43},[37,51419,51310],{"class":291},[37,51421,51422,51424,51426],{"class":39,"line":72},[37,51423,7570],{"class":51},[37,51425,55],{"class":43},[37,51427,51319],{"class":58},[37,51429,51430],{"class":39,"line":116},[37,51431,27161],{"class":43},[37,51433,51434,51436,51438],{"class":39,"line":123},[37,51435,174],{"class":43},[37,51437,3293],{"class":291},[37,51439,113],{"class":43},[37,51441,51442,51444,51446],{"class":39,"line":129},[37,51443,224],{"class":43},[37,51445,51271],{"class":291},[37,51447,62],{"class":43},[37,51449,51450,51452,51454],{"class":39,"line":171},[37,51451,273],{"class":43},[37,51453,48],{"class":291},[37,51455,62],{"class":43},[27,51457,51458],{"className":543,"code":51293,"language":545,"meta":32,"style":32},[34,51459,51460,51468,51474,51482,51486,51494,51502],{"__ignoreMap":32},[37,51461,51462,51464,51466],{"class":39,"line":40},[37,51463,44],{"class":43},[37,51465,48],{"class":291},[37,51467,62],{"class":43},[37,51469,51470,51472],{"class":39,"line":65},[37,51471,75],{"class":43},[37,51473,51310],{"class":291},[37,51475,51476,51478,51480],{"class":39,"line":72},[37,51477,7570],{"class":51},[37,51479,55],{"class":297},[37,51481,51319],{"class":58},[37,51483,51484],{"class":39,"line":116},[37,51485,27161],{"class":43},[37,51487,51488,51490,51492],{"class":39,"line":123},[37,51489,174],{"class":43},[37,51491,3293],{"class":291},[37,51493,113],{"class":43},[37,51495,51496,51498,51500],{"class":39,"line":129},[37,51497,224],{"class":43},[37,51499,51271],{"class":291},[37,51501,62],{"class":43},[37,51503,51504,51506,51508],{"class":39,"line":171},[37,51505,273],{"class":43},[37,51507,48],{"class":291},[37,51509,62],{"class":43},[27,51511,51513],{"className":987,"code":51512,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Tint', props: { color: '#ff8800' }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,51514,51515,51525,51529,51543,51547,51561,51569,51573,51577],{"__ignoreMap":32},[37,51516,51517,51519,51521,51523],{"class":39,"line":40},[37,51518,1382],{"class":297},[37,51520,9444],{"class":43},[37,51522,1388],{"class":297},[37,51524,9449],{"class":58},[37,51526,51527],{"class":39,"line":65},[37,51528,120],{"emptyLinePlaceholder":119},[37,51530,51531,51533,51535,51537,51539,51541],{"class":39,"line":72},[37,51532,2809],{"class":297},[37,51534,2812],{"class":291},[37,51536,2815],{"class":297},[37,51538,2818],{"class":297},[37,51540,999],{"class":51},[37,51542,1002],{"class":43},[37,51544,51545],{"class":39,"line":116},[37,51546,1007],{"class":43},[37,51548,51549,51551,51554,51556,51559],{"class":39,"line":123},[37,51550,1017],{"class":43},[37,51552,51553],{"class":58},"'Tint'",[37,51555,2845],{"class":43},[37,51557,51558],{"class":58},"'#ff8800'",[37,51560,5482],{"class":43},[37,51562,51563,51565,51567],{"class":39,"line":129},[37,51564,4949],{"class":43},[37,51566,3941],{"class":58},[37,51568,3207],{"class":43},[37,51570,51571],{"class":39,"line":171},[37,51572,4966],{"class":43},[37,51574,51575],{"class":39,"line":221},[37,51576,1194],{"class":43},[37,51578,51579],{"class":39,"line":231},[37,51580,1200],{"class":43},[1311,51582,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":51584},[51585,51586],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/tint",{"title":51271,"description":51279},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":51593,"title":51594,"body":51595,"category":30939,"componentType":21056,"description":51602,"extension":1323,"meta":51832,"navigation":119,"path":51833,"requiresChild":27975,"seo":51834,"stem":51835,"__hash__":51836},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":51596,"toc":51828},[51597,51600,51603,51605,51607,51610,51612,51826],[11,51598,51594],{"id":51599},"trapezoid",[15,51601,51602],{},"Trapezoid with adjustable top and bottom widths and height",[27113,51604],{"component":51594},[1202,51606,27117],{"id":21717},[27119,51608],{":props":51609},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the trapezoid\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the trapezoid\"},{\"name\":\"bottomWidth\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Half-width of the bottom edge\"},{\"name\":\"topWidth\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Half-width of the top edge\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Half-height of the trapezoid\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,51611,27125],{"id":27124},[23,51613,51614,51654,51692,51730,51768],{":tabs":25},[27,51615,51617],{"className":29,"code":51616,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[34,51618,51619,51627,51634,51642,51646],{"__ignoreMap":32},[37,51620,51621,51623,51625],{"class":39,"line":40},[37,51622,44],{"class":43},[37,51624,48],{"class":47},[37,51626,62],{"class":43},[37,51628,51629,51631],{"class":39,"line":65},[37,51630,75],{"class":43},[37,51632,51633],{"class":47},"Trapezoid\n",[37,51635,51636,51638,51640],{"class":39,"line":72},[37,51637,7570],{"class":51},[37,51639,55],{"class":43},[37,51641,7526],{"class":58},[37,51643,51644],{"class":39,"line":116},[37,51645,2314],{"class":43},[37,51647,51648,51650,51652],{"class":39,"line":123},[37,51649,273],{"class":43},[37,51651,48],{"class":47},[37,51653,62],{"class":43},[27,51655,51656],{"className":280,"code":51616,"language":282,"meta":32,"style":32},[34,51657,51658,51666,51672,51680,51684],{"__ignoreMap":32},[37,51659,51660,51662,51664],{"class":39,"line":40},[37,51661,44],{"class":43},[37,51663,48],{"class":291},[37,51665,62],{"class":43},[37,51667,51668,51670],{"class":39,"line":65},[37,51669,75],{"class":43},[37,51671,51633],{"class":291},[37,51673,51674,51676,51678],{"class":39,"line":72},[37,51675,7570],{"class":51},[37,51677,55],{"class":297},[37,51679,7526],{"class":58},[37,51681,51682],{"class":39,"line":116},[37,51683,2314],{"class":43},[37,51685,51686,51688,51690],{"class":39,"line":123},[37,51687,273],{"class":43},[37,51689,48],{"class":291},[37,51691,62],{"class":43},[27,51693,51694],{"className":3580,"code":51616,"language":3582,"meta":32,"style":32},[34,51695,51696,51704,51710,51718,51722],{"__ignoreMap":32},[37,51697,51698,51700,51702],{"class":39,"line":40},[37,51699,44],{"class":43},[37,51701,48],{"class":291},[37,51703,62],{"class":43},[37,51705,51706,51708],{"class":39,"line":65},[37,51707,75],{"class":43},[37,51709,51633],{"class":291},[37,51711,51712,51714,51716],{"class":39,"line":72},[37,51713,7570],{"class":51},[37,51715,55],{"class":43},[37,51717,7526],{"class":58},[37,51719,51720],{"class":39,"line":116},[37,51721,2314],{"class":43},[37,51723,51724,51726,51728],{"class":39,"line":123},[37,51725,273],{"class":43},[37,51727,48],{"class":291},[37,51729,62],{"class":43},[27,51731,51732],{"className":543,"code":51616,"language":545,"meta":32,"style":32},[34,51733,51734,51742,51748,51756,51760],{"__ignoreMap":32},[37,51735,51736,51738,51740],{"class":39,"line":40},[37,51737,44],{"class":43},[37,51739,48],{"class":291},[37,51741,62],{"class":43},[37,51743,51744,51746],{"class":39,"line":65},[37,51745,75],{"class":43},[37,51747,51633],{"class":291},[37,51749,51750,51752,51754],{"class":39,"line":72},[37,51751,7570],{"class":51},[37,51753,55],{"class":297},[37,51755,7526],{"class":58},[37,51757,51758],{"class":39,"line":116},[37,51759,2314],{"class":43},[37,51761,51762,51764,51766],{"class":39,"line":123},[37,51763,273],{"class":43},[37,51765,48],{"class":291},[37,51767,62],{"class":43},[27,51769,51771],{"className":987,"code":51770,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Trapezoid', props: { color: '#ffffff' } }\n ]\n})\n",[34,51772,51773,51783,51787,51801,51805,51818,51822],{"__ignoreMap":32},[37,51774,51775,51777,51779,51781],{"class":39,"line":40},[37,51776,1382],{"class":297},[37,51778,9444],{"class":43},[37,51780,1388],{"class":297},[37,51782,9449],{"class":58},[37,51784,51785],{"class":39,"line":65},[37,51786,120],{"emptyLinePlaceholder":119},[37,51788,51789,51791,51793,51795,51797,51799],{"class":39,"line":72},[37,51790,2809],{"class":297},[37,51792,2812],{"class":291},[37,51794,2815],{"class":297},[37,51796,2818],{"class":297},[37,51798,999],{"class":51},[37,51800,1002],{"class":43},[37,51802,51803],{"class":39,"line":116},[37,51804,1007],{"class":43},[37,51806,51807,51809,51812,51814,51816],{"class":39,"line":123},[37,51808,1017],{"class":43},[37,51810,51811],{"class":58},"'Trapezoid'",[37,51813,2845],{"class":43},[37,51815,8101],{"class":58},[37,51817,1142],{"class":43},[37,51819,51820],{"class":39,"line":129},[37,51821,1194],{"class":43},[37,51823,51824],{"class":39,"line":171},[37,51825,1200],{"class":43},[1311,51827,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":51829},[51830,51831],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/trapezoid",{"title":51594,"description":51602},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":51838,"title":51839,"body":51840,"category":28983,"componentType":21062,"description":51847,"extension":1323,"meta":52108,"navigation":119,"path":52109,"requiresChild":119,"seo":52110,"stem":52111,"__hash__":52112},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":51841,"toc":52104},[51842,51845,51848,51850,51852,51855,51857,52102],[11,51843,51839],{"id":51844},"tritone",[15,51846,51847],{},"Map colors to three tones: shadows, midtones, highlights",[27113,51849],{"component":51839},[1202,51851,27117],{"id":21717},[27119,51853],{":props":51854},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ce1bea\",\"description\":\"First color (used for shadows/darkest areas)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#2fff00\",\"description\":\"Second color (used for midtones)\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#ffff00\",\"description\":\"Third color (used for highlights/brightest areas)\"},{\"name\":\"blendMid\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Midpoint position between the three colors\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,51856,27125],{"id":27124},[23,51858,51859,51904,51948,51992,52036],{":tabs":25},[27,51860,51862],{"className":29,"code":51861,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[34,51863,51864,51872,51880,51888,51896],{"__ignoreMap":32},[37,51865,51866,51868,51870],{"class":39,"line":40},[37,51867,44],{"class":43},[37,51869,48],{"class":47},[37,51871,62],{"class":43},[37,51873,51874,51876,51878],{"class":39,"line":65},[37,51875,75],{"class":43},[37,51877,51839],{"class":47},[37,51879,62],{"class":43},[37,51881,51882,51884,51886],{"class":39,"line":72},[37,51883,174],{"class":43},[37,51885,3293],{"class":47},[37,51887,113],{"class":43},[37,51889,51890,51892,51894],{"class":39,"line":116},[37,51891,224],{"class":43},[37,51893,51839],{"class":47},[37,51895,62],{"class":43},[37,51897,51898,51900,51902],{"class":39,"line":123},[37,51899,273],{"class":43},[37,51901,48],{"class":47},[37,51903,62],{"class":43},[27,51905,51906],{"className":280,"code":51861,"language":282,"meta":32,"style":32},[34,51907,51908,51916,51924,51932,51940],{"__ignoreMap":32},[37,51909,51910,51912,51914],{"class":39,"line":40},[37,51911,44],{"class":43},[37,51913,48],{"class":291},[37,51915,62],{"class":43},[37,51917,51918,51920,51922],{"class":39,"line":65},[37,51919,75],{"class":43},[37,51921,51839],{"class":291},[37,51923,62],{"class":43},[37,51925,51926,51928,51930],{"class":39,"line":72},[37,51927,174],{"class":43},[37,51929,3293],{"class":291},[37,51931,113],{"class":43},[37,51933,51934,51936,51938],{"class":39,"line":116},[37,51935,224],{"class":43},[37,51937,51839],{"class":291},[37,51939,62],{"class":43},[37,51941,51942,51944,51946],{"class":39,"line":123},[37,51943,273],{"class":43},[37,51945,48],{"class":291},[37,51947,62],{"class":43},[27,51949,51950],{"className":3580,"code":51861,"language":3582,"meta":32,"style":32},[34,51951,51952,51960,51968,51976,51984],{"__ignoreMap":32},[37,51953,51954,51956,51958],{"class":39,"line":40},[37,51955,44],{"class":43},[37,51957,48],{"class":291},[37,51959,62],{"class":43},[37,51961,51962,51964,51966],{"class":39,"line":65},[37,51963,75],{"class":43},[37,51965,51839],{"class":291},[37,51967,62],{"class":43},[37,51969,51970,51972,51974],{"class":39,"line":72},[37,51971,174],{"class":43},[37,51973,3293],{"class":291},[37,51975,113],{"class":43},[37,51977,51978,51980,51982],{"class":39,"line":116},[37,51979,224],{"class":43},[37,51981,51839],{"class":291},[37,51983,62],{"class":43},[37,51985,51986,51988,51990],{"class":39,"line":123},[37,51987,273],{"class":43},[37,51989,48],{"class":291},[37,51991,62],{"class":43},[27,51993,51994],{"className":543,"code":51861,"language":545,"meta":32,"style":32},[34,51995,51996,52004,52012,52020,52028],{"__ignoreMap":32},[37,51997,51998,52000,52002],{"class":39,"line":40},[37,51999,44],{"class":43},[37,52001,48],{"class":291},[37,52003,62],{"class":43},[37,52005,52006,52008,52010],{"class":39,"line":65},[37,52007,75],{"class":43},[37,52009,51839],{"class":291},[37,52011,62],{"class":43},[37,52013,52014,52016,52018],{"class":39,"line":72},[37,52015,174],{"class":43},[37,52017,3293],{"class":291},[37,52019,113],{"class":43},[37,52021,52022,52024,52026],{"class":39,"line":116},[37,52023,224],{"class":43},[37,52025,51839],{"class":291},[37,52027,62],{"class":43},[37,52029,52030,52032,52034],{"class":39,"line":123},[37,52031,273],{"class":43},[37,52033,48],{"class":291},[37,52035,62],{"class":43},[27,52037,52039],{"className":987,"code":52038,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Tritone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,52040,52041,52051,52055,52069,52073,52082,52090,52094,52098],{"__ignoreMap":32},[37,52042,52043,52045,52047,52049],{"class":39,"line":40},[37,52044,1382],{"class":297},[37,52046,9444],{"class":43},[37,52048,1388],{"class":297},[37,52050,9449],{"class":58},[37,52052,52053],{"class":39,"line":65},[37,52054,120],{"emptyLinePlaceholder":119},[37,52056,52057,52059,52061,52063,52065,52067],{"class":39,"line":72},[37,52058,2809],{"class":297},[37,52060,2812],{"class":291},[37,52062,2815],{"class":297},[37,52064,2818],{"class":297},[37,52066,999],{"class":51},[37,52068,1002],{"class":43},[37,52070,52071],{"class":39,"line":116},[37,52072,1007],{"class":43},[37,52074,52075,52077,52080],{"class":39,"line":123},[37,52076,1017],{"class":43},[37,52078,52079],{"class":58},"'Tritone'",[37,52081,4944],{"class":43},[37,52083,52084,52086,52088],{"class":39,"line":129},[37,52085,4949],{"class":43},[37,52087,3941],{"class":58},[37,52089,3207],{"class":43},[37,52091,52092],{"class":39,"line":171},[37,52093,4966],{"class":43},[37,52095,52096],{"class":39,"line":221},[37,52097,1194],{"class":43},[37,52099,52100],{"class":39,"line":231},[37,52101,1200],{"class":43},[1311,52103,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":52105},[52106,52107],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/tritone",{"title":51839,"description":51847},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":52114,"title":52115,"body":52116,"category":27972,"componentType":21056,"description":52123,"extension":1323,"meta":52308,"navigation":119,"path":52309,"requiresChild":27975,"seo":52310,"stem":52311,"__hash__":52312},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":52117,"toc":52304},[52118,52121,52124,52126,52128,52131,52133,52302],[11,52119,52115],{"id":52120},"truchet",[15,52122,52123],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[27113,52125],{"component":52115},[1202,52127,27117],{"id":21717},[27119,52129],{":props":52130},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background color between the arcs\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Arc line color\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of tiles across the shortest canvas edge\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Thickness of the arc lines\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — changes which tiles flip, producing a different maze pattern\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[1202,52132,27125],{"id":27124},[23,52134,52135,52164,52192,52220,52248],{":tabs":25},[27,52136,52138],{"className":29,"code":52137,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[34,52139,52140,52148,52156],{"__ignoreMap":32},[37,52141,52142,52144,52146],{"class":39,"line":40},[37,52143,44],{"class":43},[37,52145,48],{"class":47},[37,52147,62],{"class":43},[37,52149,52150,52152,52154],{"class":39,"line":65},[37,52151,75],{"class":43},[37,52153,52115],{"class":47},[37,52155,113],{"class":43},[37,52157,52158,52160,52162],{"class":39,"line":72},[37,52159,273],{"class":43},[37,52161,48],{"class":47},[37,52163,62],{"class":43},[27,52165,52166],{"className":280,"code":52137,"language":282,"meta":32,"style":32},[34,52167,52168,52176,52184],{"__ignoreMap":32},[37,52169,52170,52172,52174],{"class":39,"line":40},[37,52171,44],{"class":43},[37,52173,48],{"class":291},[37,52175,62],{"class":43},[37,52177,52178,52180,52182],{"class":39,"line":65},[37,52179,75],{"class":43},[37,52181,52115],{"class":291},[37,52183,113],{"class":43},[37,52185,52186,52188,52190],{"class":39,"line":72},[37,52187,273],{"class":43},[37,52189,48],{"class":291},[37,52191,62],{"class":43},[27,52193,52194],{"className":3580,"code":52137,"language":3582,"meta":32,"style":32},[34,52195,52196,52204,52212],{"__ignoreMap":32},[37,52197,52198,52200,52202],{"class":39,"line":40},[37,52199,44],{"class":43},[37,52201,48],{"class":291},[37,52203,62],{"class":43},[37,52205,52206,52208,52210],{"class":39,"line":65},[37,52207,75],{"class":43},[37,52209,52115],{"class":291},[37,52211,113],{"class":43},[37,52213,52214,52216,52218],{"class":39,"line":72},[37,52215,273],{"class":43},[37,52217,48],{"class":291},[37,52219,62],{"class":43},[27,52221,52222],{"className":543,"code":52137,"language":545,"meta":32,"style":32},[34,52223,52224,52232,52240],{"__ignoreMap":32},[37,52225,52226,52228,52230],{"class":39,"line":40},[37,52227,44],{"class":43},[37,52229,48],{"class":291},[37,52231,62],{"class":43},[37,52233,52234,52236,52238],{"class":39,"line":65},[37,52235,75],{"class":43},[37,52237,52115],{"class":291},[37,52239,113],{"class":43},[37,52241,52242,52244,52246],{"class":39,"line":72},[37,52243,273],{"class":43},[37,52245,48],{"class":291},[37,52247,62],{"class":43},[27,52249,52251],{"className":987,"code":52250,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Truchet', props: {} }\n ]\n})\n",[34,52252,52253,52263,52267,52281,52285,52294,52298],{"__ignoreMap":32},[37,52254,52255,52257,52259,52261],{"class":39,"line":40},[37,52256,1382],{"class":297},[37,52258,9444],{"class":43},[37,52260,1388],{"class":297},[37,52262,9449],{"class":58},[37,52264,52265],{"class":39,"line":65},[37,52266,120],{"emptyLinePlaceholder":119},[37,52268,52269,52271,52273,52275,52277,52279],{"class":39,"line":72},[37,52270,2809],{"class":297},[37,52272,2812],{"class":291},[37,52274,2815],{"class":297},[37,52276,2818],{"class":297},[37,52278,999],{"class":51},[37,52280,1002],{"class":43},[37,52282,52283],{"class":39,"line":116},[37,52284,1007],{"class":43},[37,52286,52287,52289,52292],{"class":39,"line":123},[37,52288,1017],{"class":43},[37,52290,52291],{"class":58},"'Truchet'",[37,52293,3207],{"class":43},[37,52295,52296],{"class":39,"line":129},[37,52297,1194],{"class":43},[37,52299,52300],{"class":39,"line":171},[37,52301,1200],{"class":43},[1311,52303,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":52305},[52306,52307],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/truchet",{"title":52115,"description":52123},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":52314,"title":52315,"body":52316,"category":29317,"componentType":21062,"description":52323,"extension":1323,"meta":52640,"navigation":119,"path":52641,"requiresChild":119,"seo":52642,"stem":52643,"__hash__":52644},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":52317,"toc":52636},[52318,52321,52324,52326,52328,52331,52333,52634],[11,52319,52315],{"id":52320},"twirl",[15,52322,52323],{},"Rotate and twist content around a center point",[27113,52325],{"component":52315},[1202,52327,27117],{"id":21717},[27119,52329],{":props":52330},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the twirl effect\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The strength of the twirl effect\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,52332,27125],{"id":27124},[23,52334,52335,52391,52450,52506,52564],{":tabs":25},[27,52336,52338],{"className":29,"code":52337,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[34,52339,52340,52348,52355,52363,52367,52375,52383],{"__ignoreMap":32},[37,52341,52342,52344,52346],{"class":39,"line":40},[37,52343,44],{"class":43},[37,52345,48],{"class":47},[37,52347,62],{"class":43},[37,52349,52350,52352],{"class":39,"line":65},[37,52351,75],{"class":43},[37,52353,52354],{"class":47},"Twirl\n",[37,52356,52357,52359,52361],{"class":39,"line":72},[37,52358,18081],{"class":51},[37,52360,55],{"class":43},[37,52362,29039],{"class":58},[37,52364,52365],{"class":39,"line":116},[37,52366,27161],{"class":43},[37,52368,52369,52371,52373],{"class":39,"line":123},[37,52370,174],{"class":43},[37,52372,3293],{"class":47},[37,52374,113],{"class":43},[37,52376,52377,52379,52381],{"class":39,"line":129},[37,52378,224],{"class":43},[37,52380,52315],{"class":47},[37,52382,62],{"class":43},[37,52384,52385,52387,52389],{"class":39,"line":171},[37,52386,273],{"class":43},[37,52388,48],{"class":47},[37,52390,62],{"class":43},[27,52392,52394],{"className":280,"code":52393,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[34,52395,52396,52404,52410,52422,52426,52434,52442],{"__ignoreMap":32},[37,52397,52398,52400,52402],{"class":39,"line":40},[37,52399,44],{"class":43},[37,52401,48],{"class":291},[37,52403,62],{"class":43},[37,52405,52406,52408],{"class":39,"line":65},[37,52407,75],{"class":43},[37,52409,52354],{"class":291},[37,52411,52412,52414,52416,52418,52420],{"class":39,"line":72},[37,52413,18192],{"class":51},[37,52415,55],{"class":297},[37,52417,326],{"class":43},[37,52419,6614],{"class":291},[37,52421,312],{"class":43},[37,52423,52424],{"class":39,"line":116},[37,52425,27161],{"class":43},[37,52427,52428,52430,52432],{"class":39,"line":123},[37,52429,174],{"class":43},[37,52431,3293],{"class":291},[37,52433,113],{"class":43},[37,52435,52436,52438,52440],{"class":39,"line":129},[37,52437,224],{"class":43},[37,52439,52315],{"class":291},[37,52441,62],{"class":43},[37,52443,52444,52446,52448],{"class":39,"line":171},[37,52445,273],{"class":43},[37,52447,48],{"class":291},[37,52449,62],{"class":43},[27,52451,52452],{"className":3580,"code":52393,"language":3582,"meta":32,"style":32},[34,52453,52454,52462,52468,52478,52482,52490,52498],{"__ignoreMap":32},[37,52455,52456,52458,52460],{"class":39,"line":40},[37,52457,44],{"class":43},[37,52459,48],{"class":291},[37,52461,62],{"class":43},[37,52463,52464,52466],{"class":39,"line":65},[37,52465,75],{"class":43},[37,52467,52354],{"class":291},[37,52469,52470,52472,52474,52476],{"class":39,"line":72},[37,52471,18192],{"class":51},[37,52473,25058],{"class":43},[37,52475,6614],{"class":291},[37,52477,312],{"class":43},[37,52479,52480],{"class":39,"line":116},[37,52481,27161],{"class":43},[37,52483,52484,52486,52488],{"class":39,"line":123},[37,52485,174],{"class":43},[37,52487,3293],{"class":291},[37,52489,113],{"class":43},[37,52491,52492,52494,52496],{"class":39,"line":129},[37,52493,224],{"class":43},[37,52495,52315],{"class":291},[37,52497,62],{"class":43},[37,52499,52500,52502,52504],{"class":39,"line":171},[37,52501,273],{"class":43},[37,52503,48],{"class":291},[37,52505,62],{"class":43},[27,52507,52508],{"className":543,"code":52393,"language":545,"meta":32,"style":32},[34,52509,52510,52518,52524,52536,52540,52548,52556],{"__ignoreMap":32},[37,52511,52512,52514,52516],{"class":39,"line":40},[37,52513,44],{"class":43},[37,52515,48],{"class":291},[37,52517,62],{"class":43},[37,52519,52520,52522],{"class":39,"line":65},[37,52521,75],{"class":43},[37,52523,52354],{"class":291},[37,52525,52526,52528,52530,52532,52534],{"class":39,"line":72},[37,52527,18192],{"class":51},[37,52529,55],{"class":297},[37,52531,326],{"class":43},[37,52533,6614],{"class":291},[37,52535,312],{"class":43},[37,52537,52538],{"class":39,"line":116},[37,52539,27161],{"class":43},[37,52541,52542,52544,52546],{"class":39,"line":123},[37,52543,174],{"class":43},[37,52545,3293],{"class":291},[37,52547,113],{"class":43},[37,52549,52550,52552,52554],{"class":39,"line":129},[37,52551,224],{"class":43},[37,52553,52315],{"class":291},[37,52555,62],{"class":43},[37,52557,52558,52560,52562],{"class":39,"line":171},[37,52559,273],{"class":43},[37,52561,48],{"class":291},[37,52563,62],{"class":43},[27,52565,52567],{"className":987,"code":52566,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Twirl', props: { intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,52568,52569,52579,52583,52597,52601,52614,52622,52626,52630],{"__ignoreMap":32},[37,52570,52571,52573,52575,52577],{"class":39,"line":40},[37,52572,1382],{"class":297},[37,52574,9444],{"class":43},[37,52576,1388],{"class":297},[37,52578,9449],{"class":58},[37,52580,52581],{"class":39,"line":65},[37,52582,120],{"emptyLinePlaceholder":119},[37,52584,52585,52587,52589,52591,52593,52595],{"class":39,"line":72},[37,52586,2809],{"class":297},[37,52588,2812],{"class":291},[37,52590,2815],{"class":297},[37,52592,2818],{"class":297},[37,52594,999],{"class":51},[37,52596,1002],{"class":43},[37,52598,52599],{"class":39,"line":116},[37,52600,1007],{"class":43},[37,52602,52603,52605,52608,52610,52612],{"class":39,"line":123},[37,52604,1017],{"class":43},[37,52606,52607],{"class":58},"'Twirl'",[37,52609,27406],{"class":43},[37,52611,6614],{"class":291},[37,52613,5482],{"class":43},[37,52615,52616,52618,52620],{"class":39,"line":129},[37,52617,4949],{"class":43},[37,52619,3941],{"class":58},[37,52621,3207],{"class":43},[37,52623,52624],{"class":39,"line":171},[37,52625,4966],{"class":43},[37,52627,52628],{"class":39,"line":221},[37,52629,1194],{"class":43},[37,52631,52632],{"class":39,"line":231},[37,52633,1200],{"class":43},[1311,52635,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":52637},[52638,52639],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/twirl",{"title":52315,"description":52323},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":52646,"title":52647,"body":52648,"category":30939,"componentType":21056,"description":52655,"extension":1323,"meta":52932,"navigation":119,"path":52933,"requiresChild":27975,"seo":52934,"stem":52935,"__hash__":52936},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":52649,"toc":52928},[52650,52653,52656,52658,52660,52663,52665,52926],[11,52651,52647],{"id":52652},"vesica",[15,52654,52655],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[27113,52657],{"component":52647},[1202,52659,27117],{"id":21717},[27119,52661],{":props":52662},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the vesica\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the vesica\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Radius of the two overlapping circles\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Circle separation — 0 = full circle overlap, 1 = infinitely thin lens\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[1202,52664,27125],{"id":27124},[23,52666,52667,52715,52766,52814,52864],{":tabs":25},[27,52668,52670],{"className":29,"code":52669,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[34,52671,52672,52680,52687,52695,52703,52707],{"__ignoreMap":32},[37,52673,52674,52676,52678],{"class":39,"line":40},[37,52675,44],{"class":43},[37,52677,48],{"class":47},[37,52679,62],{"class":43},[37,52681,52682,52684],{"class":39,"line":65},[37,52683,75],{"class":43},[37,52685,52686],{"class":47},"Vesica\n",[37,52688,52689,52691,52693],{"class":39,"line":72},[37,52690,7570],{"class":51},[37,52692,55],{"class":43},[37,52694,7526],{"class":58},[37,52696,52697,52699,52701],{"class":39,"line":116},[37,52698,15113],{"class":51},[37,52700,55],{"class":43},[37,52702,32104],{"class":58},[37,52704,52705],{"class":39,"line":123},[37,52706,2314],{"class":43},[37,52708,52709,52711,52713],{"class":39,"line":129},[37,52710,273],{"class":43},[37,52712,48],{"class":47},[37,52714,62],{"class":43},[27,52716,52718],{"className":280,"code":52717,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[34,52719,52720,52728,52734,52742,52754,52758],{"__ignoreMap":32},[37,52721,52722,52724,52726],{"class":39,"line":40},[37,52723,44],{"class":43},[37,52725,48],{"class":291},[37,52727,62],{"class":43},[37,52729,52730,52732],{"class":39,"line":65},[37,52731,75],{"class":43},[37,52733,52686],{"class":291},[37,52735,52736,52738,52740],{"class":39,"line":72},[37,52737,7570],{"class":51},[37,52739,55],{"class":297},[37,52741,7526],{"class":58},[37,52743,52744,52746,52748,52750,52752],{"class":39,"line":116},[37,52745,7580],{"class":51},[37,52747,55],{"class":297},[37,52749,326],{"class":43},[37,52751,18841],{"class":291},[37,52753,312],{"class":43},[37,52755,52756],{"class":39,"line":123},[37,52757,2314],{"class":43},[37,52759,52760,52762,52764],{"class":39,"line":129},[37,52761,273],{"class":43},[37,52763,48],{"class":291},[37,52765,62],{"class":43},[27,52767,52768],{"className":3580,"code":52717,"language":3582,"meta":32,"style":32},[34,52769,52770,52778,52784,52792,52802,52806],{"__ignoreMap":32},[37,52771,52772,52774,52776],{"class":39,"line":40},[37,52773,44],{"class":43},[37,52775,48],{"class":291},[37,52777,62],{"class":43},[37,52779,52780,52782],{"class":39,"line":65},[37,52781,75],{"class":43},[37,52783,52686],{"class":291},[37,52785,52786,52788,52790],{"class":39,"line":72},[37,52787,7570],{"class":51},[37,52789,55],{"class":43},[37,52791,7526],{"class":58},[37,52793,52794,52796,52798,52800],{"class":39,"line":116},[37,52795,7580],{"class":51},[37,52797,25058],{"class":43},[37,52799,18841],{"class":291},[37,52801,312],{"class":43},[37,52803,52804],{"class":39,"line":123},[37,52805,2314],{"class":43},[37,52807,52808,52810,52812],{"class":39,"line":129},[37,52809,273],{"class":43},[37,52811,48],{"class":291},[37,52813,62],{"class":43},[27,52815,52816],{"className":543,"code":52717,"language":545,"meta":32,"style":32},[34,52817,52818,52826,52832,52840,52852,52856],{"__ignoreMap":32},[37,52819,52820,52822,52824],{"class":39,"line":40},[37,52821,44],{"class":43},[37,52823,48],{"class":291},[37,52825,62],{"class":43},[37,52827,52828,52830],{"class":39,"line":65},[37,52829,75],{"class":43},[37,52831,52686],{"class":291},[37,52833,52834,52836,52838],{"class":39,"line":72},[37,52835,7570],{"class":51},[37,52837,55],{"class":297},[37,52839,7526],{"class":58},[37,52841,52842,52844,52846,52848,52850],{"class":39,"line":116},[37,52843,7580],{"class":51},[37,52845,55],{"class":297},[37,52847,326],{"class":43},[37,52849,18841],{"class":291},[37,52851,312],{"class":43},[37,52853,52854],{"class":39,"line":123},[37,52855,2314],{"class":43},[37,52857,52858,52860,52862],{"class":39,"line":129},[37,52859,273],{"class":43},[37,52861,48],{"class":291},[37,52863,62],{"class":43},[27,52865,52867],{"className":987,"code":52866,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Vesica', props: { color: '#ffffff', radius: 0.35 } }\n ]\n})\n",[34,52868,52869,52879,52883,52897,52901,52918,52922],{"__ignoreMap":32},[37,52870,52871,52873,52875,52877],{"class":39,"line":40},[37,52872,1382],{"class":297},[37,52874,9444],{"class":43},[37,52876,1388],{"class":297},[37,52878,9449],{"class":58},[37,52880,52881],{"class":39,"line":65},[37,52882,120],{"emptyLinePlaceholder":119},[37,52884,52885,52887,52889,52891,52893,52895],{"class":39,"line":72},[37,52886,2809],{"class":297},[37,52888,2812],{"class":291},[37,52890,2815],{"class":297},[37,52892,2818],{"class":297},[37,52894,999],{"class":51},[37,52896,1002],{"class":43},[37,52898,52899],{"class":39,"line":116},[37,52900,1007],{"class":43},[37,52902,52903,52905,52908,52910,52912,52914,52916],{"class":39,"line":123},[37,52904,1017],{"class":43},[37,52906,52907],{"class":58},"'Vesica'",[37,52909,2845],{"class":43},[37,52911,8101],{"class":58},[37,52913,4501],{"class":43},[37,52915,18841],{"class":291},[37,52917,1142],{"class":43},[37,52919,52920],{"class":39,"line":129},[37,52921,1194],{"class":43},[37,52923,52924],{"class":39,"line":171},[37,52925,1200],{"class":43},[1311,52927,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":52929},[52930,52931],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/vesica",{"title":52647,"description":52655},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":52938,"title":52939,"body":52940,"category":28983,"componentType":21062,"description":52947,"extension":1323,"meta":53265,"navigation":119,"path":53266,"requiresChild":119,"seo":53267,"stem":53268,"__hash__":53269},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":52941,"toc":53261},[52942,52945,52948,52950,52952,52955,52957,53259],[11,52943,52939],{"id":52944},"vibrance",[15,52946,52947],{},"Selective saturation adjustment protecting skin tones",[27113,52949],{"component":52939},[1202,52951,27117],{"id":21717},[27119,52953],{":props":52954},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[1202,52956,27125],{"id":27124},[23,52958,52959,53016,53075,53131,53189],{":tabs":25},[27,52960,52962],{"className":29,"code":52961,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[34,52963,52964,52972,52979,52988,52992,53000,53008],{"__ignoreMap":32},[37,52965,52966,52968,52970],{"class":39,"line":40},[37,52967,44],{"class":43},[37,52969,48],{"class":47},[37,52971,62],{"class":43},[37,52973,52974,52976],{"class":39,"line":65},[37,52975,75],{"class":43},[37,52977,52978],{"class":47},"Vibrance\n",[37,52980,52981,52983,52985],{"class":39,"line":72},[37,52982,18081],{"class":51},[37,52984,55],{"class":43},[37,52986,52987],{"class":58},"\"0\"\n",[37,52989,52990],{"class":39,"line":116},[37,52991,27161],{"class":43},[37,52993,52994,52996,52998],{"class":39,"line":123},[37,52995,174],{"class":43},[37,52997,3293],{"class":47},[37,52999,113],{"class":43},[37,53001,53002,53004,53006],{"class":39,"line":129},[37,53003,224],{"class":43},[37,53005,52939],{"class":47},[37,53007,62],{"class":43},[37,53009,53010,53012,53014],{"class":39,"line":171},[37,53011,273],{"class":43},[37,53013,48],{"class":47},[37,53015,62],{"class":43},[27,53017,53019],{"className":280,"code":53018,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[34,53020,53021,53029,53035,53047,53051,53059,53067],{"__ignoreMap":32},[37,53022,53023,53025,53027],{"class":39,"line":40},[37,53024,44],{"class":43},[37,53026,48],{"class":291},[37,53028,62],{"class":43},[37,53030,53031,53033],{"class":39,"line":65},[37,53032,75],{"class":43},[37,53034,52978],{"class":291},[37,53036,53037,53039,53041,53043,53045],{"class":39,"line":72},[37,53038,18192],{"class":51},[37,53040,55],{"class":297},[37,53042,326],{"class":43},[37,53044,6610],{"class":291},[37,53046,312],{"class":43},[37,53048,53049],{"class":39,"line":116},[37,53050,27161],{"class":43},[37,53052,53053,53055,53057],{"class":39,"line":123},[37,53054,174],{"class":43},[37,53056,3293],{"class":291},[37,53058,113],{"class":43},[37,53060,53061,53063,53065],{"class":39,"line":129},[37,53062,224],{"class":43},[37,53064,52939],{"class":291},[37,53066,62],{"class":43},[37,53068,53069,53071,53073],{"class":39,"line":171},[37,53070,273],{"class":43},[37,53072,48],{"class":291},[37,53074,62],{"class":43},[27,53076,53077],{"className":3580,"code":53018,"language":3582,"meta":32,"style":32},[34,53078,53079,53087,53093,53103,53107,53115,53123],{"__ignoreMap":32},[37,53080,53081,53083,53085],{"class":39,"line":40},[37,53082,44],{"class":43},[37,53084,48],{"class":291},[37,53086,62],{"class":43},[37,53088,53089,53091],{"class":39,"line":65},[37,53090,75],{"class":43},[37,53092,52978],{"class":291},[37,53094,53095,53097,53099,53101],{"class":39,"line":72},[37,53096,18192],{"class":51},[37,53098,25058],{"class":43},[37,53100,6610],{"class":291},[37,53102,312],{"class":43},[37,53104,53105],{"class":39,"line":116},[37,53106,27161],{"class":43},[37,53108,53109,53111,53113],{"class":39,"line":123},[37,53110,174],{"class":43},[37,53112,3293],{"class":291},[37,53114,113],{"class":43},[37,53116,53117,53119,53121],{"class":39,"line":129},[37,53118,224],{"class":43},[37,53120,52939],{"class":291},[37,53122,62],{"class":43},[37,53124,53125,53127,53129],{"class":39,"line":171},[37,53126,273],{"class":43},[37,53128,48],{"class":291},[37,53130,62],{"class":43},[27,53132,53133],{"className":543,"code":53018,"language":545,"meta":32,"style":32},[34,53134,53135,53143,53149,53161,53165,53173,53181],{"__ignoreMap":32},[37,53136,53137,53139,53141],{"class":39,"line":40},[37,53138,44],{"class":43},[37,53140,48],{"class":291},[37,53142,62],{"class":43},[37,53144,53145,53147],{"class":39,"line":65},[37,53146,75],{"class":43},[37,53148,52978],{"class":291},[37,53150,53151,53153,53155,53157,53159],{"class":39,"line":72},[37,53152,18192],{"class":51},[37,53154,55],{"class":297},[37,53156,326],{"class":43},[37,53158,6610],{"class":291},[37,53160,312],{"class":43},[37,53162,53163],{"class":39,"line":116},[37,53164,27161],{"class":43},[37,53166,53167,53169,53171],{"class":39,"line":123},[37,53168,174],{"class":43},[37,53170,3293],{"class":291},[37,53172,113],{"class":43},[37,53174,53175,53177,53179],{"class":39,"line":129},[37,53176,224],{"class":43},[37,53178,52939],{"class":291},[37,53180,62],{"class":43},[37,53182,53183,53185,53187],{"class":39,"line":171},[37,53184,273],{"class":43},[37,53186,48],{"class":291},[37,53188,62],{"class":43},[27,53190,53192],{"className":987,"code":53191,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Vibrance', props: { intensity: 0 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,53193,53194,53204,53208,53222,53226,53239,53247,53251,53255],{"__ignoreMap":32},[37,53195,53196,53198,53200,53202],{"class":39,"line":40},[37,53197,1382],{"class":297},[37,53199,9444],{"class":43},[37,53201,1388],{"class":297},[37,53203,9449],{"class":58},[37,53205,53206],{"class":39,"line":65},[37,53207,120],{"emptyLinePlaceholder":119},[37,53209,53210,53212,53214,53216,53218,53220],{"class":39,"line":72},[37,53211,2809],{"class":297},[37,53213,2812],{"class":291},[37,53215,2815],{"class":297},[37,53217,2818],{"class":297},[37,53219,999],{"class":51},[37,53221,1002],{"class":43},[37,53223,53224],{"class":39,"line":116},[37,53225,1007],{"class":43},[37,53227,53228,53230,53233,53235,53237],{"class":39,"line":123},[37,53229,1017],{"class":43},[37,53231,53232],{"class":58},"'Vibrance'",[37,53234,27406],{"class":43},[37,53236,6610],{"class":291},[37,53238,5482],{"class":43},[37,53240,53241,53243,53245],{"class":39,"line":129},[37,53242,4949],{"class":43},[37,53244,3941],{"class":58},[37,53246,3207],{"class":43},[37,53248,53249],{"class":39,"line":171},[37,53250,4966],{"class":43},[37,53252,53253],{"class":39,"line":221},[37,53254,1194],{"class":43},[37,53256,53257],{"class":39,"line":231},[37,53258,1200],{"class":43},[1311,53260,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":53262},[53263,53264],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/vibrance",{"title":52939,"description":52947},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":53271,"title":53272,"body":53273,"category":27972,"componentType":21056,"description":53280,"extension":1323,"meta":53465,"navigation":119,"path":53466,"requiresChild":27975,"seo":53467,"stem":53468,"__hash__":53469},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":53274,"toc":53461},[53275,53278,53281,53283,53285,53288,53290,53459],[11,53276,53272],{"id":53277},"videotexture",[15,53279,53280],{},"Display a video with customizable playback and object-fit modes",[27113,53282],{"component":53272},[1202,53284,27117],{"id":21717},[27119,53286],{":props":53287},"[{\"name\":\"url\",\"type\":\"string\",\"default\":\"https://shaders.com/sample.mp4\",\"description\":\"Upload a video or provide a URL\"},{\"name\":\"objectFit\",\"type\":\"\\\"cover\\\" | \\\"contain\\\" | \\\"fill\\\" | \\\"scale-down\\\" | \\\"none\\\"\",\"default\":\"cover\",\"description\":\"How the video should be sized within the viewport\"},{\"name\":\"loop\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Loop the video playback\"}]",[1202,53289,27125],{"id":27124},[23,53291,53292,53321,53349,53377,53405],{":tabs":25},[27,53293,53295],{"className":29,"code":53294,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[34,53296,53297,53305,53313],{"__ignoreMap":32},[37,53298,53299,53301,53303],{"class":39,"line":40},[37,53300,44],{"class":43},[37,53302,48],{"class":47},[37,53304,62],{"class":43},[37,53306,53307,53309,53311],{"class":39,"line":65},[37,53308,75],{"class":43},[37,53310,53272],{"class":47},[37,53312,113],{"class":43},[37,53314,53315,53317,53319],{"class":39,"line":72},[37,53316,273],{"class":43},[37,53318,48],{"class":47},[37,53320,62],{"class":43},[27,53322,53323],{"className":280,"code":53294,"language":282,"meta":32,"style":32},[34,53324,53325,53333,53341],{"__ignoreMap":32},[37,53326,53327,53329,53331],{"class":39,"line":40},[37,53328,44],{"class":43},[37,53330,48],{"class":291},[37,53332,62],{"class":43},[37,53334,53335,53337,53339],{"class":39,"line":65},[37,53336,75],{"class":43},[37,53338,53272],{"class":291},[37,53340,113],{"class":43},[37,53342,53343,53345,53347],{"class":39,"line":72},[37,53344,273],{"class":43},[37,53346,48],{"class":291},[37,53348,62],{"class":43},[27,53350,53351],{"className":3580,"code":53294,"language":3582,"meta":32,"style":32},[34,53352,53353,53361,53369],{"__ignoreMap":32},[37,53354,53355,53357,53359],{"class":39,"line":40},[37,53356,44],{"class":43},[37,53358,48],{"class":291},[37,53360,62],{"class":43},[37,53362,53363,53365,53367],{"class":39,"line":65},[37,53364,75],{"class":43},[37,53366,53272],{"class":291},[37,53368,113],{"class":43},[37,53370,53371,53373,53375],{"class":39,"line":72},[37,53372,273],{"class":43},[37,53374,48],{"class":291},[37,53376,62],{"class":43},[27,53378,53379],{"className":543,"code":53294,"language":545,"meta":32,"style":32},[34,53380,53381,53389,53397],{"__ignoreMap":32},[37,53382,53383,53385,53387],{"class":39,"line":40},[37,53384,44],{"class":43},[37,53386,48],{"class":291},[37,53388,62],{"class":43},[37,53390,53391,53393,53395],{"class":39,"line":65},[37,53392,75],{"class":43},[37,53394,53272],{"class":291},[37,53396,113],{"class":43},[37,53398,53399,53401,53403],{"class":39,"line":72},[37,53400,273],{"class":43},[37,53402,48],{"class":291},[37,53404,62],{"class":43},[27,53406,53408],{"className":987,"code":53407,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VideoTexture', props: {} }\n ]\n})\n",[34,53409,53410,53420,53424,53438,53442,53451,53455],{"__ignoreMap":32},[37,53411,53412,53414,53416,53418],{"class":39,"line":40},[37,53413,1382],{"class":297},[37,53415,9444],{"class":43},[37,53417,1388],{"class":297},[37,53419,9449],{"class":58},[37,53421,53422],{"class":39,"line":65},[37,53423,120],{"emptyLinePlaceholder":119},[37,53425,53426,53428,53430,53432,53434,53436],{"class":39,"line":72},[37,53427,2809],{"class":297},[37,53429,2812],{"class":291},[37,53431,2815],{"class":297},[37,53433,2818],{"class":297},[37,53435,999],{"class":51},[37,53437,1002],{"class":43},[37,53439,53440],{"class":39,"line":116},[37,53441,1007],{"class":43},[37,53443,53444,53446,53449],{"class":39,"line":123},[37,53445,1017],{"class":43},[37,53447,53448],{"class":58},"'VideoTexture'",[37,53450,3207],{"class":43},[37,53452,53453],{"class":39,"line":129},[37,53454,1194],{"class":43},[37,53456,53457],{"class":39,"line":171},[37,53458,1200],{"class":43},[1311,53460,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":53462},[53463,53464],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/videotexture",{"title":53272,"description":53280},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":53471,"title":53472,"body":53473,"category":27715,"componentType":21062,"description":53480,"extension":1323,"meta":53879,"navigation":119,"path":53880,"requiresChild":119,"seo":53881,"stem":53882,"__hash__":53883},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":53474,"toc":53875},[53475,53478,53481,53483,53485,53488,53490,53873],[11,53476,53472],{"id":53477},"vignette",[15,53479,53480],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[27113,53482],{"component":53472},[1202,53484,27117],{"id":21717},[27119,53486],{":props":53487},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the vignette at the edges\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center of the clear area where the vignette begins\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Distance from center where the vignette begins to fade in\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Width of the transition zone from clear to full vignette\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the vignette effect\"}]",[1202,53489,27125],{"id":27124},[23,53491,53492,53564,53643,53717,53795],{":tabs":25},[27,53493,53495],{"className":29,"code":53494,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CVignette\n color=\"#000000\"\n :radius=\"0.5\"\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Vignette>\n\u003C/Shader>\n",[34,53496,53497,53505,53512,53520,53528,53536,53540,53548,53556],{"__ignoreMap":32},[37,53498,53499,53501,53503],{"class":39,"line":40},[37,53500,44],{"class":43},[37,53502,48],{"class":47},[37,53504,62],{"class":43},[37,53506,53507,53509],{"class":39,"line":65},[37,53508,75],{"class":43},[37,53510,53511],{"class":47},"Vignette\n",[37,53513,53514,53516,53518],{"class":39,"line":72},[37,53515,7570],{"class":51},[37,53517,55],{"class":43},[37,53519,17187],{"class":58},[37,53521,53522,53524,53526],{"class":39,"line":116},[37,53523,15113],{"class":51},[37,53525,55],{"class":43},[37,53527,32674],{"class":58},[37,53529,53530,53532,53534],{"class":39,"line":123},[37,53531,18081],{"class":51},[37,53533,55],{"class":43},[37,53535,29039],{"class":58},[37,53537,53538],{"class":39,"line":129},[37,53539,27161],{"class":43},[37,53541,53542,53544,53546],{"class":39,"line":171},[37,53543,174],{"class":43},[37,53545,3293],{"class":47},[37,53547,113],{"class":43},[37,53549,53550,53552,53554],{"class":39,"line":221},[37,53551,224],{"class":43},[37,53553,53472],{"class":47},[37,53555,62],{"class":43},[37,53557,53558,53560,53562],{"class":39,"line":231},[37,53559,273],{"class":43},[37,53561,48],{"class":47},[37,53563,62],{"class":43},[27,53565,53567],{"className":280,"code":53566,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CVignette\n color=\"#000000\"\n radius={0.5}\n intensity={1}\n >\n \u003CCircle />\n \u003C/Vignette>\n\u003C/Shader>\n",[34,53568,53569,53577,53583,53591,53603,53615,53619,53627,53635],{"__ignoreMap":32},[37,53570,53571,53573,53575],{"class":39,"line":40},[37,53572,44],{"class":43},[37,53574,48],{"class":291},[37,53576,62],{"class":43},[37,53578,53579,53581],{"class":39,"line":65},[37,53580,75],{"class":43},[37,53582,53511],{"class":291},[37,53584,53585,53587,53589],{"class":39,"line":72},[37,53586,7570],{"class":51},[37,53588,55],{"class":297},[37,53590,17187],{"class":58},[37,53592,53593,53595,53597,53599,53601],{"class":39,"line":116},[37,53594,7580],{"class":51},[37,53596,55],{"class":297},[37,53598,326],{"class":43},[37,53600,5689],{"class":291},[37,53602,312],{"class":43},[37,53604,53605,53607,53609,53611,53613],{"class":39,"line":123},[37,53606,18192],{"class":51},[37,53608,55],{"class":297},[37,53610,326],{"class":43},[37,53612,6614],{"class":291},[37,53614,312],{"class":43},[37,53616,53617],{"class":39,"line":129},[37,53618,27161],{"class":43},[37,53620,53621,53623,53625],{"class":39,"line":171},[37,53622,174],{"class":43},[37,53624,3293],{"class":291},[37,53626,113],{"class":43},[37,53628,53629,53631,53633],{"class":39,"line":221},[37,53630,224],{"class":43},[37,53632,53472],{"class":291},[37,53634,62],{"class":43},[37,53636,53637,53639,53641],{"class":39,"line":231},[37,53638,273],{"class":43},[37,53640,48],{"class":291},[37,53642,62],{"class":43},[27,53644,53645],{"className":3580,"code":53566,"language":3582,"meta":32,"style":32},[34,53646,53647,53655,53661,53669,53679,53689,53693,53701,53709],{"__ignoreMap":32},[37,53648,53649,53651,53653],{"class":39,"line":40},[37,53650,44],{"class":43},[37,53652,48],{"class":291},[37,53654,62],{"class":43},[37,53656,53657,53659],{"class":39,"line":65},[37,53658,75],{"class":43},[37,53660,53511],{"class":291},[37,53662,53663,53665,53667],{"class":39,"line":72},[37,53664,7570],{"class":51},[37,53666,55],{"class":43},[37,53668,17187],{"class":58},[37,53670,53671,53673,53675,53677],{"class":39,"line":116},[37,53672,7580],{"class":51},[37,53674,25058],{"class":43},[37,53676,5689],{"class":291},[37,53678,312],{"class":43},[37,53680,53681,53683,53685,53687],{"class":39,"line":123},[37,53682,18192],{"class":51},[37,53684,25058],{"class":43},[37,53686,6614],{"class":291},[37,53688,312],{"class":43},[37,53690,53691],{"class":39,"line":129},[37,53692,27161],{"class":43},[37,53694,53695,53697,53699],{"class":39,"line":171},[37,53696,174],{"class":43},[37,53698,3293],{"class":291},[37,53700,113],{"class":43},[37,53702,53703,53705,53707],{"class":39,"line":221},[37,53704,224],{"class":43},[37,53706,53472],{"class":291},[37,53708,62],{"class":43},[37,53710,53711,53713,53715],{"class":39,"line":231},[37,53712,273],{"class":43},[37,53714,48],{"class":291},[37,53716,62],{"class":43},[27,53718,53719],{"className":543,"code":53566,"language":545,"meta":32,"style":32},[34,53720,53721,53729,53735,53743,53755,53767,53771,53779,53787],{"__ignoreMap":32},[37,53722,53723,53725,53727],{"class":39,"line":40},[37,53724,44],{"class":43},[37,53726,48],{"class":291},[37,53728,62],{"class":43},[37,53730,53731,53733],{"class":39,"line":65},[37,53732,75],{"class":43},[37,53734,53511],{"class":291},[37,53736,53737,53739,53741],{"class":39,"line":72},[37,53738,7570],{"class":51},[37,53740,55],{"class":297},[37,53742,17187],{"class":58},[37,53744,53745,53747,53749,53751,53753],{"class":39,"line":116},[37,53746,7580],{"class":51},[37,53748,55],{"class":297},[37,53750,326],{"class":43},[37,53752,5689],{"class":291},[37,53754,312],{"class":43},[37,53756,53757,53759,53761,53763,53765],{"class":39,"line":123},[37,53758,18192],{"class":51},[37,53760,55],{"class":297},[37,53762,326],{"class":43},[37,53764,6614],{"class":291},[37,53766,312],{"class":43},[37,53768,53769],{"class":39,"line":129},[37,53770,27161],{"class":43},[37,53772,53773,53775,53777],{"class":39,"line":171},[37,53774,174],{"class":43},[37,53776,3293],{"class":291},[37,53778,113],{"class":43},[37,53780,53781,53783,53785],{"class":39,"line":221},[37,53782,224],{"class":43},[37,53784,53472],{"class":291},[37,53786,62],{"class":43},[37,53788,53789,53791,53793],{"class":39,"line":231},[37,53790,273],{"class":43},[37,53792,48],{"class":291},[37,53794,62],{"class":43},[27,53796,53798],{"className":987,"code":53797,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Vignette', props: { color: '#000000', radius: 0.5, intensity: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,53799,53800,53810,53814,53828,53832,53853,53861,53865,53869],{"__ignoreMap":32},[37,53801,53802,53804,53806,53808],{"class":39,"line":40},[37,53803,1382],{"class":297},[37,53805,9444],{"class":43},[37,53807,1388],{"class":297},[37,53809,9449],{"class":58},[37,53811,53812],{"class":39,"line":65},[37,53813,120],{"emptyLinePlaceholder":119},[37,53815,53816,53818,53820,53822,53824,53826],{"class":39,"line":72},[37,53817,2809],{"class":297},[37,53819,2812],{"class":291},[37,53821,2815],{"class":297},[37,53823,2818],{"class":297},[37,53825,999],{"class":51},[37,53827,1002],{"class":43},[37,53829,53830],{"class":39,"line":116},[37,53831,1007],{"class":43},[37,53833,53834,53836,53839,53841,53843,53845,53847,53849,53851],{"class":39,"line":123},[37,53835,1017],{"class":43},[37,53837,53838],{"class":58},"'Vignette'",[37,53840,2845],{"class":43},[37,53842,17745],{"class":58},[37,53844,4501],{"class":43},[37,53846,5689],{"class":291},[37,53848,34633],{"class":43},[37,53850,6614],{"class":291},[37,53852,5482],{"class":43},[37,53854,53855,53857,53859],{"class":39,"line":129},[37,53856,4949],{"class":43},[37,53858,3941],{"class":58},[37,53860,3207],{"class":43},[37,53862,53863],{"class":39,"line":171},[37,53864,4966],{"class":43},[37,53866,53867],{"class":39,"line":221},[37,53868,1194],{"class":43},[37,53870,53871],{"class":39,"line":231},[37,53872,1200],{"class":43},[1311,53874,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":53876},[53877,53878],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/vignette",{"title":53472,"description":53480},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":53885,"title":53886,"body":53887,"category":27972,"componentType":21056,"description":53894,"extension":1323,"meta":54079,"navigation":119,"path":54080,"requiresChild":27975,"seo":54081,"stem":54082,"__hash__":54083},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":53888,"toc":54075},[53889,53892,53895,53897,53899,53902,53904,54073],[11,53890,53886],{"id":53891},"voronoi",[15,53893,53894],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[27113,53896],{"component":53886},[1202,53898,27117],{"id":21717},[27119,53900],{":props":53901},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#3186cf\",\"description\":\"Color near each cell's center point\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#fc02dd\",\"description\":\"Color at cell boundaries, far from any center point\"},{\"name\":\"colorBorder\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the cell boundary lines\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of cells across the canvas\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed — how fast the cell points drift\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — shifts the cell pattern without changing the overall structure\"},{\"name\":\"edgeIntensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Controls how much of the cell interior is filled by the edge color. Low = center color dominates with a sharp boundary. High = edge color spreads further into the cell.\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of the cell boundary lines.\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"}]",[1202,53903,27125],{"id":27124},[23,53905,53906,53935,53963,53991,54019],{":tabs":25},[27,53907,53909],{"className":29,"code":53908,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[34,53910,53911,53919,53927],{"__ignoreMap":32},[37,53912,53913,53915,53917],{"class":39,"line":40},[37,53914,44],{"class":43},[37,53916,48],{"class":47},[37,53918,62],{"class":43},[37,53920,53921,53923,53925],{"class":39,"line":65},[37,53922,75],{"class":43},[37,53924,53886],{"class":47},[37,53926,113],{"class":43},[37,53928,53929,53931,53933],{"class":39,"line":72},[37,53930,273],{"class":43},[37,53932,48],{"class":47},[37,53934,62],{"class":43},[27,53936,53937],{"className":280,"code":53908,"language":282,"meta":32,"style":32},[34,53938,53939,53947,53955],{"__ignoreMap":32},[37,53940,53941,53943,53945],{"class":39,"line":40},[37,53942,44],{"class":43},[37,53944,48],{"class":291},[37,53946,62],{"class":43},[37,53948,53949,53951,53953],{"class":39,"line":65},[37,53950,75],{"class":43},[37,53952,53886],{"class":291},[37,53954,113],{"class":43},[37,53956,53957,53959,53961],{"class":39,"line":72},[37,53958,273],{"class":43},[37,53960,48],{"class":291},[37,53962,62],{"class":43},[27,53964,53965],{"className":3580,"code":53908,"language":3582,"meta":32,"style":32},[34,53966,53967,53975,53983],{"__ignoreMap":32},[37,53968,53969,53971,53973],{"class":39,"line":40},[37,53970,44],{"class":43},[37,53972,48],{"class":291},[37,53974,62],{"class":43},[37,53976,53977,53979,53981],{"class":39,"line":65},[37,53978,75],{"class":43},[37,53980,53886],{"class":291},[37,53982,113],{"class":43},[37,53984,53985,53987,53989],{"class":39,"line":72},[37,53986,273],{"class":43},[37,53988,48],{"class":291},[37,53990,62],{"class":43},[27,53992,53993],{"className":543,"code":53908,"language":545,"meta":32,"style":32},[34,53994,53995,54003,54011],{"__ignoreMap":32},[37,53996,53997,53999,54001],{"class":39,"line":40},[37,53998,44],{"class":43},[37,54000,48],{"class":291},[37,54002,62],{"class":43},[37,54004,54005,54007,54009],{"class":39,"line":65},[37,54006,75],{"class":43},[37,54008,53886],{"class":291},[37,54010,113],{"class":43},[37,54012,54013,54015,54017],{"class":39,"line":72},[37,54014,273],{"class":43},[37,54016,48],{"class":291},[37,54018,62],{"class":43},[27,54020,54022],{"className":987,"code":54021,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Voronoi', props: {} }\n ]\n})\n",[34,54023,54024,54034,54038,54052,54056,54065,54069],{"__ignoreMap":32},[37,54025,54026,54028,54030,54032],{"class":39,"line":40},[37,54027,1382],{"class":297},[37,54029,9444],{"class":43},[37,54031,1388],{"class":297},[37,54033,9449],{"class":58},[37,54035,54036],{"class":39,"line":65},[37,54037,120],{"emptyLinePlaceholder":119},[37,54039,54040,54042,54044,54046,54048,54050],{"class":39,"line":72},[37,54041,2809],{"class":297},[37,54043,2812],{"class":291},[37,54045,2815],{"class":297},[37,54047,2818],{"class":297},[37,54049,999],{"class":51},[37,54051,1002],{"class":43},[37,54053,54054],{"class":39,"line":116},[37,54055,1007],{"class":43},[37,54057,54058,54060,54063],{"class":39,"line":123},[37,54059,1017],{"class":43},[37,54061,54062],{"class":58},"'Voronoi'",[37,54064,3207],{"class":43},[37,54066,54067],{"class":39,"line":129},[37,54068,1194],{"class":43},[37,54070,54071],{"class":39,"line":171},[37,54072,1200],{"class":43},[1311,54074,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":54076},[54077,54078],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/voronoi",{"title":53886,"description":53894},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":54085,"title":54086,"body":54087,"category":29317,"componentType":21062,"description":54094,"extension":1323,"meta":54355,"navigation":119,"path":54356,"requiresChild":119,"seo":54357,"stem":54358,"__hash__":54359},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":54088,"toc":54351},[54089,54092,54095,54097,54099,54102,54104,54349],[11,54090,54086],{"id":54091},"wavedistortion",[15,54093,54094],{},"Wave-based distortion with multiple waveform types",[27113,54096],{"component":54086},[1202,54098,27117],{"id":21717},[27119,54100],{":props":54101},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Distortion intensity\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of bends/waves\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of wave distortion in degrees\"},{\"name\":\"waveType\",\"type\":\"\\\"sine\\\" | \\\"triangle\\\" | \\\"square\\\" | \\\"sawtooth\\\" | \\\"bounce\\\"\",\"default\":\"sine\",\"description\":\"Shape of the distortion wave\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[1202,54103,27125],{"id":27124},[23,54105,54106,54151,54195,54239,54283],{":tabs":25},[27,54107,54109],{"className":29,"code":54108,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[34,54110,54111,54119,54127,54135,54143],{"__ignoreMap":32},[37,54112,54113,54115,54117],{"class":39,"line":40},[37,54114,44],{"class":43},[37,54116,48],{"class":47},[37,54118,62],{"class":43},[37,54120,54121,54123,54125],{"class":39,"line":65},[37,54122,75],{"class":43},[37,54124,54086],{"class":47},[37,54126,62],{"class":43},[37,54128,54129,54131,54133],{"class":39,"line":72},[37,54130,174],{"class":43},[37,54132,3293],{"class":47},[37,54134,113],{"class":43},[37,54136,54137,54139,54141],{"class":39,"line":116},[37,54138,224],{"class":43},[37,54140,54086],{"class":47},[37,54142,62],{"class":43},[37,54144,54145,54147,54149],{"class":39,"line":123},[37,54146,273],{"class":43},[37,54148,48],{"class":47},[37,54150,62],{"class":43},[27,54152,54153],{"className":280,"code":54108,"language":282,"meta":32,"style":32},[34,54154,54155,54163,54171,54179,54187],{"__ignoreMap":32},[37,54156,54157,54159,54161],{"class":39,"line":40},[37,54158,44],{"class":43},[37,54160,48],{"class":291},[37,54162,62],{"class":43},[37,54164,54165,54167,54169],{"class":39,"line":65},[37,54166,75],{"class":43},[37,54168,54086],{"class":291},[37,54170,62],{"class":43},[37,54172,54173,54175,54177],{"class":39,"line":72},[37,54174,174],{"class":43},[37,54176,3293],{"class":291},[37,54178,113],{"class":43},[37,54180,54181,54183,54185],{"class":39,"line":116},[37,54182,224],{"class":43},[37,54184,54086],{"class":291},[37,54186,62],{"class":43},[37,54188,54189,54191,54193],{"class":39,"line":123},[37,54190,273],{"class":43},[37,54192,48],{"class":291},[37,54194,62],{"class":43},[27,54196,54197],{"className":3580,"code":54108,"language":3582,"meta":32,"style":32},[34,54198,54199,54207,54215,54223,54231],{"__ignoreMap":32},[37,54200,54201,54203,54205],{"class":39,"line":40},[37,54202,44],{"class":43},[37,54204,48],{"class":291},[37,54206,62],{"class":43},[37,54208,54209,54211,54213],{"class":39,"line":65},[37,54210,75],{"class":43},[37,54212,54086],{"class":291},[37,54214,62],{"class":43},[37,54216,54217,54219,54221],{"class":39,"line":72},[37,54218,174],{"class":43},[37,54220,3293],{"class":291},[37,54222,113],{"class":43},[37,54224,54225,54227,54229],{"class":39,"line":116},[37,54226,224],{"class":43},[37,54228,54086],{"class":291},[37,54230,62],{"class":43},[37,54232,54233,54235,54237],{"class":39,"line":123},[37,54234,273],{"class":43},[37,54236,48],{"class":291},[37,54238,62],{"class":43},[27,54240,54241],{"className":543,"code":54108,"language":545,"meta":32,"style":32},[34,54242,54243,54251,54259,54267,54275],{"__ignoreMap":32},[37,54244,54245,54247,54249],{"class":39,"line":40},[37,54246,44],{"class":43},[37,54248,48],{"class":291},[37,54250,62],{"class":43},[37,54252,54253,54255,54257],{"class":39,"line":65},[37,54254,75],{"class":43},[37,54256,54086],{"class":291},[37,54258,62],{"class":43},[37,54260,54261,54263,54265],{"class":39,"line":72},[37,54262,174],{"class":43},[37,54264,3293],{"class":291},[37,54266,113],{"class":43},[37,54268,54269,54271,54273],{"class":39,"line":116},[37,54270,224],{"class":43},[37,54272,54086],{"class":291},[37,54274,62],{"class":43},[37,54276,54277,54279,54281],{"class":39,"line":123},[37,54278,273],{"class":43},[37,54280,48],{"class":291},[37,54282,62],{"class":43},[27,54284,54286],{"className":987,"code":54285,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WaveDistortion', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,54287,54288,54298,54302,54316,54320,54329,54337,54341,54345],{"__ignoreMap":32},[37,54289,54290,54292,54294,54296],{"class":39,"line":40},[37,54291,1382],{"class":297},[37,54293,9444],{"class":43},[37,54295,1388],{"class":297},[37,54297,9449],{"class":58},[37,54299,54300],{"class":39,"line":65},[37,54301,120],{"emptyLinePlaceholder":119},[37,54303,54304,54306,54308,54310,54312,54314],{"class":39,"line":72},[37,54305,2809],{"class":297},[37,54307,2812],{"class":291},[37,54309,2815],{"class":297},[37,54311,2818],{"class":297},[37,54313,999],{"class":51},[37,54315,1002],{"class":43},[37,54317,54318],{"class":39,"line":116},[37,54319,1007],{"class":43},[37,54321,54322,54324,54327],{"class":39,"line":123},[37,54323,1017],{"class":43},[37,54325,54326],{"class":58},"'WaveDistortion'",[37,54328,4944],{"class":43},[37,54330,54331,54333,54335],{"class":39,"line":129},[37,54332,4949],{"class":43},[37,54334,3941],{"class":58},[37,54336,3207],{"class":43},[37,54338,54339],{"class":39,"line":171},[37,54340,4966],{"class":43},[37,54342,54343],{"class":39,"line":221},[37,54344,1194],{"class":43},[37,54346,54347],{"class":39,"line":231},[37,54348,1200],{"class":43},[1311,54350,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":54352},[54353,54354],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/wavedistortion",{"title":54086,"description":54094},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":54361,"title":54362,"body":54363,"category":27972,"componentType":21056,"description":54370,"extension":1323,"meta":54555,"navigation":119,"path":54556,"requiresChild":27975,"seo":54557,"stem":54558,"__hash__":54559},"components/docs/components/Weave.md","Weave",{"type":8,"value":54364,"toc":54551},[54365,54368,54371,54373,54375,54378,54380,54549],[11,54366,54362],{"id":54367},"weave",[15,54369,54370],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[27113,54372],{"component":54362},[1202,54374,27117],{"id":21717},[27119,54376],{":props":54377},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#c4c4c4\",\"description\":\"Horizontal thread color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#4d4d4d\",\"description\":\"Vertical thread color\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of threads across the shortest canvas edge\"},{\"name\":\"gap\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Gap between threads (0 = no gap, 0.5 = maximum gap)\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation of the weave pattern in degrees\"}]",[1202,54379,27125],{"id":27124},[23,54381,54382,54411,54439,54467,54495],{":tabs":25},[27,54383,54385],{"className":29,"code":54384,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[34,54386,54387,54395,54403],{"__ignoreMap":32},[37,54388,54389,54391,54393],{"class":39,"line":40},[37,54390,44],{"class":43},[37,54392,48],{"class":47},[37,54394,62],{"class":43},[37,54396,54397,54399,54401],{"class":39,"line":65},[37,54398,75],{"class":43},[37,54400,54362],{"class":47},[37,54402,113],{"class":43},[37,54404,54405,54407,54409],{"class":39,"line":72},[37,54406,273],{"class":43},[37,54408,48],{"class":47},[37,54410,62],{"class":43},[27,54412,54413],{"className":280,"code":54384,"language":282,"meta":32,"style":32},[34,54414,54415,54423,54431],{"__ignoreMap":32},[37,54416,54417,54419,54421],{"class":39,"line":40},[37,54418,44],{"class":43},[37,54420,48],{"class":291},[37,54422,62],{"class":43},[37,54424,54425,54427,54429],{"class":39,"line":65},[37,54426,75],{"class":43},[37,54428,54362],{"class":291},[37,54430,113],{"class":43},[37,54432,54433,54435,54437],{"class":39,"line":72},[37,54434,273],{"class":43},[37,54436,48],{"class":291},[37,54438,62],{"class":43},[27,54440,54441],{"className":3580,"code":54384,"language":3582,"meta":32,"style":32},[34,54442,54443,54451,54459],{"__ignoreMap":32},[37,54444,54445,54447,54449],{"class":39,"line":40},[37,54446,44],{"class":43},[37,54448,48],{"class":291},[37,54450,62],{"class":43},[37,54452,54453,54455,54457],{"class":39,"line":65},[37,54454,75],{"class":43},[37,54456,54362],{"class":291},[37,54458,113],{"class":43},[37,54460,54461,54463,54465],{"class":39,"line":72},[37,54462,273],{"class":43},[37,54464,48],{"class":291},[37,54466,62],{"class":43},[27,54468,54469],{"className":543,"code":54384,"language":545,"meta":32,"style":32},[34,54470,54471,54479,54487],{"__ignoreMap":32},[37,54472,54473,54475,54477],{"class":39,"line":40},[37,54474,44],{"class":43},[37,54476,48],{"class":291},[37,54478,62],{"class":43},[37,54480,54481,54483,54485],{"class":39,"line":65},[37,54482,75],{"class":43},[37,54484,54362],{"class":291},[37,54486,113],{"class":43},[37,54488,54489,54491,54493],{"class":39,"line":72},[37,54490,273],{"class":43},[37,54492,48],{"class":291},[37,54494,62],{"class":43},[27,54496,54498],{"className":987,"code":54497,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Weave', props: {} }\n ]\n})\n",[34,54499,54500,54510,54514,54528,54532,54541,54545],{"__ignoreMap":32},[37,54501,54502,54504,54506,54508],{"class":39,"line":40},[37,54503,1382],{"class":297},[37,54505,9444],{"class":43},[37,54507,1388],{"class":297},[37,54509,9449],{"class":58},[37,54511,54512],{"class":39,"line":65},[37,54513,120],{"emptyLinePlaceholder":119},[37,54515,54516,54518,54520,54522,54524,54526],{"class":39,"line":72},[37,54517,2809],{"class":297},[37,54519,2812],{"class":291},[37,54521,2815],{"class":297},[37,54523,2818],{"class":297},[37,54525,999],{"class":51},[37,54527,1002],{"class":43},[37,54529,54530],{"class":39,"line":116},[37,54531,1007],{"class":43},[37,54533,54534,54536,54539],{"class":39,"line":123},[37,54535,1017],{"class":43},[37,54537,54538],{"class":58},"'Weave'",[37,54540,3207],{"class":43},[37,54542,54543],{"class":39,"line":129},[37,54544,1194],{"class":43},[37,54546,54547],{"class":39,"line":171},[37,54548,1200],{"class":43},[1311,54550,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":54552},[54553,54554],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/weave",{"title":54362,"description":54370},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":54561,"title":54562,"body":54563,"category":27972,"componentType":21056,"description":54570,"extension":1323,"meta":54755,"navigation":119,"path":54756,"requiresChild":27975,"seo":54757,"stem":54758,"__hash__":54759},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":54564,"toc":54751},[54565,54568,54571,54573,54575,54578,54580,54749],[11,54566,54562],{"id":54567},"webcamtexture",[15,54569,54570],{},"Display a live webcam feed with customizable object-fit modes",[27113,54572],{"component":54562},[1202,54574,27117],{"id":21717},[27119,54576],{":props":54577},"[{\"name\":\"objectFit\",\"type\":\"\\\"cover\\\" | \\\"contain\\\" | \\\"fill\\\" | \\\"scale-down\\\" | \\\"none\\\"\",\"default\":\"cover\",\"description\":\"How the webcam feed should be sized within the viewport\"},{\"name\":\"mirror\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Mirror the webcam feed horizontally (selfie mode)\"}]",[1202,54579,27125],{"id":27124},[23,54581,54582,54611,54639,54667,54695],{":tabs":25},[27,54583,54585],{"className":29,"code":54584,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[34,54586,54587,54595,54603],{"__ignoreMap":32},[37,54588,54589,54591,54593],{"class":39,"line":40},[37,54590,44],{"class":43},[37,54592,48],{"class":47},[37,54594,62],{"class":43},[37,54596,54597,54599,54601],{"class":39,"line":65},[37,54598,75],{"class":43},[37,54600,54562],{"class":47},[37,54602,113],{"class":43},[37,54604,54605,54607,54609],{"class":39,"line":72},[37,54606,273],{"class":43},[37,54608,48],{"class":47},[37,54610,62],{"class":43},[27,54612,54613],{"className":280,"code":54584,"language":282,"meta":32,"style":32},[34,54614,54615,54623,54631],{"__ignoreMap":32},[37,54616,54617,54619,54621],{"class":39,"line":40},[37,54618,44],{"class":43},[37,54620,48],{"class":291},[37,54622,62],{"class":43},[37,54624,54625,54627,54629],{"class":39,"line":65},[37,54626,75],{"class":43},[37,54628,54562],{"class":291},[37,54630,113],{"class":43},[37,54632,54633,54635,54637],{"class":39,"line":72},[37,54634,273],{"class":43},[37,54636,48],{"class":291},[37,54638,62],{"class":43},[27,54640,54641],{"className":3580,"code":54584,"language":3582,"meta":32,"style":32},[34,54642,54643,54651,54659],{"__ignoreMap":32},[37,54644,54645,54647,54649],{"class":39,"line":40},[37,54646,44],{"class":43},[37,54648,48],{"class":291},[37,54650,62],{"class":43},[37,54652,54653,54655,54657],{"class":39,"line":65},[37,54654,75],{"class":43},[37,54656,54562],{"class":291},[37,54658,113],{"class":43},[37,54660,54661,54663,54665],{"class":39,"line":72},[37,54662,273],{"class":43},[37,54664,48],{"class":291},[37,54666,62],{"class":43},[27,54668,54669],{"className":543,"code":54584,"language":545,"meta":32,"style":32},[34,54670,54671,54679,54687],{"__ignoreMap":32},[37,54672,54673,54675,54677],{"class":39,"line":40},[37,54674,44],{"class":43},[37,54676,48],{"class":291},[37,54678,62],{"class":43},[37,54680,54681,54683,54685],{"class":39,"line":65},[37,54682,75],{"class":43},[37,54684,54562],{"class":291},[37,54686,113],{"class":43},[37,54688,54689,54691,54693],{"class":39,"line":72},[37,54690,273],{"class":43},[37,54692,48],{"class":291},[37,54694,62],{"class":43},[27,54696,54698],{"className":987,"code":54697,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WebcamTexture', props: {} }\n ]\n})\n",[34,54699,54700,54710,54714,54728,54732,54741,54745],{"__ignoreMap":32},[37,54701,54702,54704,54706,54708],{"class":39,"line":40},[37,54703,1382],{"class":297},[37,54705,9444],{"class":43},[37,54707,1388],{"class":297},[37,54709,9449],{"class":58},[37,54711,54712],{"class":39,"line":65},[37,54713,120],{"emptyLinePlaceholder":119},[37,54715,54716,54718,54720,54722,54724,54726],{"class":39,"line":72},[37,54717,2809],{"class":297},[37,54719,2812],{"class":291},[37,54721,2815],{"class":297},[37,54723,2818],{"class":297},[37,54725,999],{"class":51},[37,54727,1002],{"class":43},[37,54729,54730],{"class":39,"line":116},[37,54731,1007],{"class":43},[37,54733,54734,54736,54739],{"class":39,"line":123},[37,54735,1017],{"class":43},[37,54737,54738],{"class":58},"'WebcamTexture'",[37,54740,3207],{"class":43},[37,54742,54743],{"class":39,"line":129},[37,54744,1194],{"class":43},[37,54746,54747],{"class":39,"line":171},[37,54748,1200],{"class":43},[1311,54750,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":54752},[54753,54754],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/webcamtexture",{"title":54562,"description":54570},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":54761,"title":54762,"body":54763,"category":27437,"componentType":21062,"description":54770,"extension":1323,"meta":55087,"navigation":119,"path":55088,"requiresChild":119,"seo":55089,"stem":55090,"__hash__":55091},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":54764,"toc":55083},[54765,54768,54771,54773,54775,54778,54780,55081],[11,54766,54762],{"id":54767},"zoomblur",[15,54769,54770],{},"Radial zoom blur expanding from a center point",[27113,54772],{"component":54762},[1202,54774,27117],{"id":21717},[27119,54776],{":props":54777},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Intensity of the zoom blur effect\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the zoom blur\"}]",[1202,54779,27125],{"id":27124},[23,54781,54782,54838,54897,54953,55011],{":tabs":25},[27,54783,54785],{"className":29,"code":54784,"language":31,"meta":32,"style":32},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[34,54786,54787,54795,54802,54810,54814,54822,54830],{"__ignoreMap":32},[37,54788,54789,54791,54793],{"class":39,"line":40},[37,54790,44],{"class":43},[37,54792,48],{"class":47},[37,54794,62],{"class":43},[37,54796,54797,54799],{"class":39,"line":65},[37,54798,75],{"class":43},[37,54800,54801],{"class":47},"ZoomBlur\n",[37,54803,54804,54806,54808],{"class":39,"line":72},[37,54805,18081],{"class":51},[37,54807,55],{"class":43},[37,54809,33500],{"class":58},[37,54811,54812],{"class":39,"line":116},[37,54813,27161],{"class":43},[37,54815,54816,54818,54820],{"class":39,"line":123},[37,54817,174],{"class":43},[37,54819,3293],{"class":47},[37,54821,113],{"class":43},[37,54823,54824,54826,54828],{"class":39,"line":129},[37,54825,224],{"class":43},[37,54827,54762],{"class":47},[37,54829,62],{"class":43},[37,54831,54832,54834,54836],{"class":39,"line":171},[37,54833,273],{"class":43},[37,54835,48],{"class":47},[37,54837,62],{"class":43},[27,54839,54841],{"className":280,"code":54840,"language":282,"meta":32,"style":32},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[34,54842,54843,54851,54857,54869,54873,54881,54889],{"__ignoreMap":32},[37,54844,54845,54847,54849],{"class":39,"line":40},[37,54846,44],{"class":43},[37,54848,48],{"class":291},[37,54850,62],{"class":43},[37,54852,54853,54855],{"class":39,"line":65},[37,54854,75],{"class":43},[37,54856,54801],{"class":291},[37,54858,54859,54861,54863,54865,54867],{"class":39,"line":72},[37,54860,18192],{"class":51},[37,54862,55],{"class":297},[37,54864,326],{"class":43},[37,54866,13407],{"class":291},[37,54868,312],{"class":43},[37,54870,54871],{"class":39,"line":116},[37,54872,27161],{"class":43},[37,54874,54875,54877,54879],{"class":39,"line":123},[37,54876,174],{"class":43},[37,54878,3293],{"class":291},[37,54880,113],{"class":43},[37,54882,54883,54885,54887],{"class":39,"line":129},[37,54884,224],{"class":43},[37,54886,54762],{"class":291},[37,54888,62],{"class":43},[37,54890,54891,54893,54895],{"class":39,"line":171},[37,54892,273],{"class":43},[37,54894,48],{"class":291},[37,54896,62],{"class":43},[27,54898,54899],{"className":3580,"code":54840,"language":3582,"meta":32,"style":32},[34,54900,54901,54909,54915,54925,54929,54937,54945],{"__ignoreMap":32},[37,54902,54903,54905,54907],{"class":39,"line":40},[37,54904,44],{"class":43},[37,54906,48],{"class":291},[37,54908,62],{"class":43},[37,54910,54911,54913],{"class":39,"line":65},[37,54912,75],{"class":43},[37,54914,54801],{"class":291},[37,54916,54917,54919,54921,54923],{"class":39,"line":72},[37,54918,18192],{"class":51},[37,54920,25058],{"class":43},[37,54922,13407],{"class":291},[37,54924,312],{"class":43},[37,54926,54927],{"class":39,"line":116},[37,54928,27161],{"class":43},[37,54930,54931,54933,54935],{"class":39,"line":123},[37,54932,174],{"class":43},[37,54934,3293],{"class":291},[37,54936,113],{"class":43},[37,54938,54939,54941,54943],{"class":39,"line":129},[37,54940,224],{"class":43},[37,54942,54762],{"class":291},[37,54944,62],{"class":43},[37,54946,54947,54949,54951],{"class":39,"line":171},[37,54948,273],{"class":43},[37,54950,48],{"class":291},[37,54952,62],{"class":43},[27,54954,54955],{"className":543,"code":54840,"language":545,"meta":32,"style":32},[34,54956,54957,54965,54971,54983,54987,54995,55003],{"__ignoreMap":32},[37,54958,54959,54961,54963],{"class":39,"line":40},[37,54960,44],{"class":43},[37,54962,48],{"class":291},[37,54964,62],{"class":43},[37,54966,54967,54969],{"class":39,"line":65},[37,54968,75],{"class":43},[37,54970,54801],{"class":291},[37,54972,54973,54975,54977,54979,54981],{"class":39,"line":72},[37,54974,18192],{"class":51},[37,54976,55],{"class":297},[37,54978,326],{"class":43},[37,54980,13407],{"class":291},[37,54982,312],{"class":43},[37,54984,54985],{"class":39,"line":116},[37,54986,27161],{"class":43},[37,54988,54989,54991,54993],{"class":39,"line":123},[37,54990,174],{"class":43},[37,54992,3293],{"class":291},[37,54994,113],{"class":43},[37,54996,54997,54999,55001],{"class":39,"line":129},[37,54998,224],{"class":43},[37,55000,54762],{"class":291},[37,55002,62],{"class":43},[37,55004,55005,55007,55009],{"class":39,"line":171},[37,55006,273],{"class":43},[37,55008,48],{"class":291},[37,55010,62],{"class":43},[27,55012,55014],{"className":987,"code":55013,"language":989,"meta":32,"style":32},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ZoomBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[34,55015,55016,55026,55030,55044,55048,55061,55069,55073,55077],{"__ignoreMap":32},[37,55017,55018,55020,55022,55024],{"class":39,"line":40},[37,55019,1382],{"class":297},[37,55021,9444],{"class":43},[37,55023,1388],{"class":297},[37,55025,9449],{"class":58},[37,55027,55028],{"class":39,"line":65},[37,55029,120],{"emptyLinePlaceholder":119},[37,55031,55032,55034,55036,55038,55040,55042],{"class":39,"line":72},[37,55033,2809],{"class":297},[37,55035,2812],{"class":291},[37,55037,2815],{"class":297},[37,55039,2818],{"class":297},[37,55041,999],{"class":51},[37,55043,1002],{"class":43},[37,55045,55046],{"class":39,"line":116},[37,55047,1007],{"class":43},[37,55049,55050,55052,55055,55057,55059],{"class":39,"line":123},[37,55051,1017],{"class":43},[37,55053,55054],{"class":58},"'ZoomBlur'",[37,55056,27406],{"class":43},[37,55058,13407],{"class":291},[37,55060,5482],{"class":43},[37,55062,55063,55065,55067],{"class":39,"line":129},[37,55064,4949],{"class":43},[37,55066,3941],{"class":58},[37,55068,3207],{"class":43},[37,55070,55071],{"class":39,"line":171},[37,55072,4966],{"class":43},[37,55074,55075],{"class":39,"line":221},[37,55076,1194],{"class":43},[37,55078,55079],{"class":39,"line":231},[37,55080,1200],{"class":43},[1311,55082,2980],{},{"title":32,"searchDepth":65,"depth":65,"links":55084},[55085,55086],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},"/docs/components/zoomblur",{"title":54762,"description":54770},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27975,"error":55093},"Not authenticated",{"id":48473,"title":48474,"body":55095,"category":28983,"componentType":21062,"description":48482,"extension":1323,"meta":55357,"navigation":119,"path":48744,"requiresChild":119,"seo":55358,"stem":48746,"__hash__":48747},{"type":8,"value":55096,"toc":55353},[55097,55099,55101,55103,55105,55107,55109,55351],[11,55098,48474],{"id":48479},[15,55100,48482],{},[27113,55102],{"component":48474},[1202,55104,27117],{"id":21717},[27119,55106],{":props":48489},[1202,55108,27125],{"id":27124},[23,55110,55111,55155,55199,55243,55287],{":tabs":25},[27,55112,55113],{"className":29,"code":48496,"language":31,"meta":32,"style":32},[34,55114,55115,55123,55131,55139,55147],{"__ignoreMap":32},[37,55116,55117,55119,55121],{"class":39,"line":40},[37,55118,44],{"class":43},[37,55120,48],{"class":47},[37,55122,62],{"class":43},[37,55124,55125,55127,55129],{"class":39,"line":65},[37,55126,75],{"class":43},[37,55128,48474],{"class":47},[37,55130,62],{"class":43},[37,55132,55133,55135,55137],{"class":39,"line":72},[37,55134,174],{"class":43},[37,55136,3293],{"class":47},[37,55138,113],{"class":43},[37,55140,55141,55143,55145],{"class":39,"line":116},[37,55142,224],{"class":43},[37,55144,48474],{"class":47},[37,55146,62],{"class":43},[37,55148,55149,55151,55153],{"class":39,"line":123},[37,55150,273],{"class":43},[37,55152,48],{"class":47},[37,55154,62],{"class":43},[27,55156,55157],{"className":280,"code":48496,"language":282,"meta":32,"style":32},[34,55158,55159,55167,55175,55183,55191],{"__ignoreMap":32},[37,55160,55161,55163,55165],{"class":39,"line":40},[37,55162,44],{"class":43},[37,55164,48],{"class":291},[37,55166,62],{"class":43},[37,55168,55169,55171,55173],{"class":39,"line":65},[37,55170,75],{"class":43},[37,55172,48474],{"class":291},[37,55174,62],{"class":43},[37,55176,55177,55179,55181],{"class":39,"line":72},[37,55178,174],{"class":43},[37,55180,3293],{"class":291},[37,55182,113],{"class":43},[37,55184,55185,55187,55189],{"class":39,"line":116},[37,55186,224],{"class":43},[37,55188,48474],{"class":291},[37,55190,62],{"class":43},[37,55192,55193,55195,55197],{"class":39,"line":123},[37,55194,273],{"class":43},[37,55196,48],{"class":291},[37,55198,62],{"class":43},[27,55200,55201],{"className":3580,"code":48496,"language":3582,"meta":32,"style":32},[34,55202,55203,55211,55219,55227,55235],{"__ignoreMap":32},[37,55204,55205,55207,55209],{"class":39,"line":40},[37,55206,44],{"class":43},[37,55208,48],{"class":291},[37,55210,62],{"class":43},[37,55212,55213,55215,55217],{"class":39,"line":65},[37,55214,75],{"class":43},[37,55216,48474],{"class":291},[37,55218,62],{"class":43},[37,55220,55221,55223,55225],{"class":39,"line":72},[37,55222,174],{"class":43},[37,55224,3293],{"class":291},[37,55226,113],{"class":43},[37,55228,55229,55231,55233],{"class":39,"line":116},[37,55230,224],{"class":43},[37,55232,48474],{"class":291},[37,55234,62],{"class":43},[37,55236,55237,55239,55241],{"class":39,"line":123},[37,55238,273],{"class":43},[37,55240,48],{"class":291},[37,55242,62],{"class":43},[27,55244,55245],{"className":543,"code":48496,"language":545,"meta":32,"style":32},[34,55246,55247,55255,55263,55271,55279],{"__ignoreMap":32},[37,55248,55249,55251,55253],{"class":39,"line":40},[37,55250,44],{"class":43},[37,55252,48],{"class":291},[37,55254,62],{"class":43},[37,55256,55257,55259,55261],{"class":39,"line":65},[37,55258,75],{"class":43},[37,55260,48474],{"class":291},[37,55262,62],{"class":43},[37,55264,55265,55267,55269],{"class":39,"line":72},[37,55266,174],{"class":43},[37,55268,3293],{"class":291},[37,55270,113],{"class":43},[37,55272,55273,55275,55277],{"class":39,"line":116},[37,55274,224],{"class":43},[37,55276,48474],{"class":291},[37,55278,62],{"class":43},[37,55280,55281,55283,55285],{"class":39,"line":123},[37,55282,273],{"class":43},[37,55284,48],{"class":291},[37,55286,62],{"class":43},[27,55288,55289],{"className":987,"code":48673,"language":989,"meta":32,"style":32},[34,55290,55291,55301,55305,55319,55323,55331,55339,55343,55347],{"__ignoreMap":32},[37,55292,55293,55295,55297,55299],{"class":39,"line":40},[37,55294,1382],{"class":297},[37,55296,9444],{"class":43},[37,55298,1388],{"class":297},[37,55300,9449],{"class":58},[37,55302,55303],{"class":39,"line":65},[37,55304,120],{"emptyLinePlaceholder":119},[37,55306,55307,55309,55311,55313,55315,55317],{"class":39,"line":72},[37,55308,2809],{"class":297},[37,55310,2812],{"class":291},[37,55312,2815],{"class":297},[37,55314,2818],{"class":297},[37,55316,999],{"class":51},[37,55318,1002],{"class":43},[37,55320,55321],{"class":39,"line":116},[37,55322,1007],{"class":43},[37,55324,55325,55327,55329],{"class":39,"line":123},[37,55326,1017],{"class":43},[37,55328,48714],{"class":58},[37,55330,4944],{"class":43},[37,55332,55333,55335,55337],{"class":39,"line":129},[37,55334,4949],{"class":43},[37,55336,3941],{"class":58},[37,55338,3207],{"class":43},[37,55340,55341],{"class":39,"line":171},[37,55342,4966],{"class":43},[37,55344,55345],{"class":39,"line":221},[37,55346,1194],{"class":43},[37,55348,55349],{"class":39,"line":231},[37,55350,1200],{"class":43},[1311,55352,27710],{},{"title":32,"searchDepth":65,"depth":65,"links":55354},[55355,55356],{"id":21717,"depth":65,"text":27117},{"id":27124,"depth":65,"text":27125},{},{"title":48474,"description":48482},[55360,55361],{"title":177,"path":48468,"stem":48470,"children":-1},{"title":2659,"path":48988,"stem":48990,"children":-1},1775246982697]