[{"data":1,"prerenderedAt":54369},["ShallowReactive",2],{"guide-docs":3,"component-docs":26048,"user-pro-status-data":54045,"doc-/docs/components/posterize":54047,"doc-surr-/docs/components/posterize":54366},[4,176,1515,1912,2149,2991,4471,7110,9112,11887,13949,17617,19967,20335,20970,21613,22512,23129,23707,24249,24844,25368],{"id":5,"title":6,"body":7,"category":165,"description":166,"exclude":167,"extension":168,"forceFramework":167,"icon":169,"meta":170,"navigation":171,"path":172,"seo":173,"stem":174,"__hash__":175},"guide/docs/guide/0.index.md","What is Shaders?",{"type":8,"value":9,"toc":159},"minimark",[10,14,18,22,27,35,42,126,129,133,136,140,143,147,155],[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\":\"Plasma\",\"props\":{\"colorA\":\"#2c2c42\",\"density\":0.8}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"cutout\":true,\"edgeSoftness\":0.15,\"fresnel\":0.17,\"fresnelSoftness\":0.46,\"highlight\":0.85,\"highlightColor\":\"#8dacd9\",\"highlightSoftness\":0.77,\"lightAngle\":271,\"refraction\":1.74,\"scale\":0.8,\"shapeSdfUrl\":\"https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33zS4Xxx0NjGvAM3AtKamS9oX0s/gzrDN-c-jsAR_sdf.bin\",\"shapeType\":\"svg\",\"thickness\":0.22,\"tintPreserveLuminosity\":false},\"children\":[{\"type\":\"Godrays\",\"props\":{\"backgroundColor\":\"#141405\",\"center\":{\"x\":0.78,\"y\":0.56},\"density\":0.1,\"rayColor\":\"#b5b5eb\",\"speed\":0.7}},{\"type\":\"WaveDistortion\",\"props\":{\"angle\":125,\"frequency\":0.1,\"speed\":0.8,\"strength\":0.55}},{\"type\":\"ChromaticAberration\",\"props\":{\"angle\":190,\"strength\":0.1}}]},{\"type\":\"FilmGrain\",\"props\":{\"strength\":0.04}}]}",[23,24,26],"h2",{"id":25},"how-does-it-work","How does it work?",[15,28,29,30,34],{},"You define components and props within a ",[31,32,33],"code",{},"\u003CShader>"," tag, and we compile that into a WebGPU shader program, and handle any blending/masking/etc. to output the final look.",[15,36,37,38,41],{},"It all renders to a single ",[31,39,40],{},"\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.",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-vue-html shiki shiki-themes github-dark","\u003CShader class=\"absolute inset-0 -z-10\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n\u003C/Shader>\n","vue-html","",[31,50,51,78,106,116],{"__ignoreMap":48},[52,53,56,60,64,68,71,75],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"s95oV","\u003C",[52,61,63],{"class":62},"s4JwU","Shader",[52,65,67],{"class":66},"svObZ"," class",[52,69,70],{"class":58},"=",[52,72,74],{"class":73},"sU2Wk","\"absolute inset-0 -z-10\"",[52,76,77],{"class":58},">\n",[52,79,81,84,87,90,92,95,98,100,103],{"class":54,"line":80},2,[52,82,83],{"class":58}," \u003C",[52,85,86],{"class":62},"LinearGradient",[52,88,89],{"class":66}," colorA",[52,91,70],{"class":58},[52,93,94],{"class":73},"\"#0f172a\"",[52,96,97],{"class":66}," colorB",[52,99,70],{"class":58},[52,101,102],{"class":73},"\"#7c3aed\"",[52,104,105],{"class":58}," />\n",[52,107,109,111,114],{"class":54,"line":108},3,[52,110,83],{"class":58},[52,112,113],{"class":62},"CursorTrail",[52,115,105],{"class":58},[52,117,119,122,124],{"class":54,"line":118},4,[52,120,121],{"class":58},"\u003C/",[52,123,63],{"class":62},[52,125,77],{"class":58},[15,127,128],{},"There's no crazy math to learn, no GLSL to write, and no render loop to manage. Changes to prop values update instantly without recompiling the shader, keeping things lightweight for the browser.",[23,130,132],{"id":131},"what-can-you-build","What can you build?",[15,134,135],{},"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.",[23,137,139],{"id":138},"supported-frameworks","Supported frameworks",[15,141,142],{},"Shaders ships a single package with dedicated entry points for each framework. Component-based frameworks (Vue, React, Svelte, Solid) share the same declarative API. The JavaScript API uses a preset config approach better suited to imperative workflows.",[23,144,146],{"id":145},"requirements","Requirements",[15,148,149,150,154],{},"Shaders uses ",[151,152,153],"strong",{},"WebGPU",", which is supported in most modern browsers now. When WebGPU is unavailable, we fallback gracefully to WebGLv2.",[156,157,158],"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 .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":48,"searchDepth":80,"depth":80,"links":160},[161,162,163,164],{"id":25,"depth":80,"text":26},{"id":131,"depth":80,"text":132},{"id":138,"depth":80,"text":139},{"id":145,"depth":80,"text":146},"concepts","GPU-accelerated visual effects for Vue, React, Svelte, Solid & JS",null,"md","hand-wave",{},true,"/docs/guide",{"title":6,"description":166},"docs/guide/0.index","YcBlPQ1q81whLb4MWCKkDlhiXpOjPLxFTF1U-zS8xxM",{"id":177,"title":178,"body":179,"category":165,"description":1506,"exclude":1507,"extension":168,"forceFramework":167,"icon":1509,"meta":1510,"navigation":171,"path":1511,"seo":1512,"stem":1513,"__hash__":1514},"guide/docs/guide/1.quickstart.md","Quickstart",{"type":8,"value":180,"toc":1497},[181,184,188,206,209,213,216,290,294,300,527,530,541,545,548,1128,1131,1135,1144,1453,1457,1460,1464,1494],[11,182,178],{"id":183},"quickstart",[23,185,187],{"id":186},"installation","Installation",[43,189,193],{"className":190,"code":191,"language":192,"meta":48,"style":48},"language-bash shiki shiki-themes github-dark","npm install shaders\n","bash",[31,194,195],{"__ignoreMap":48},[52,196,197,200,203],{"class":54,"line":55},[52,198,199],{"class":66},"npm",[52,201,202],{"class":73}," install",[52,204,205],{"class":73}," shaders\n",[15,207,208],{},"Shaders is a single package regardless of your framework. No framework-specific adapters needed.",[23,210,212],{"id":211},"import-your-components","Import your components",[15,214,215],{},"Import from the entry point that matches your framework:",[217,218,220,242,258,274],"code-group",{":tabs":219},"[\"Vue\", \"React\", \"Svelte\", \"Solid\"]",[43,221,225],{"className":222,"code":223,"language":224,"meta":48,"style":48},"language-javascript shiki shiki-themes github-dark","import { Shader, LinearGradient, CursorTrail } from 'shaders/vue'\n","javascript",[31,226,227],{"__ignoreMap":48},[52,228,229,233,236,239],{"class":54,"line":55},[52,230,232],{"class":231},"snl16","import",[52,234,235],{"class":58}," { Shader, LinearGradient, CursorTrail } ",[52,237,238],{"class":231},"from",[52,240,241],{"class":73}," 'shaders/vue'\n",[43,243,245],{"className":222,"code":244,"language":224,"meta":48,"style":48},"import { Shader, LinearGradient, CursorTrail } from 'shaders/react'\n",[31,246,247],{"__ignoreMap":48},[52,248,249,251,253,255],{"class":54,"line":55},[52,250,232],{"class":231},[52,252,235],{"class":58},[52,254,238],{"class":231},[52,256,257],{"class":73}," 'shaders/react'\n",[43,259,261],{"className":222,"code":260,"language":224,"meta":48,"style":48},"import { Shader, LinearGradient, CursorTrail } from 'shaders/svelte'\n",[31,262,263],{"__ignoreMap":48},[52,264,265,267,269,271],{"class":54,"line":55},[52,266,232],{"class":231},[52,268,235],{"class":58},[52,270,238],{"class":231},[52,272,273],{"class":73}," 'shaders/svelte'\n",[43,275,277],{"className":222,"code":276,"language":224,"meta":48,"style":48},"import { Shader, LinearGradient, CursorTrail } from 'shaders/solid'\n",[31,278,279],{"__ignoreMap":48},[52,280,281,283,285,287],{"class":54,"line":55},[52,282,232],{"class":231},[52,284,235],{"class":58},[52,286,238],{"class":231},[52,288,289],{"class":73}," 'shaders/solid'\n",[23,291,293],{"id":292},"your-first-shader","Your first shader",[15,295,296,297,299],{},"Wrap your effects in a ",[31,298,33],{}," component and add children inside:",[217,301,302,358,417,473],{":tabs":219},[43,303,305],{"className":45,"code":304,"language":47,"meta":48,"style":48},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n\u003C/Shader>\n",[31,306,307,322,342,350],{"__ignoreMap":48},[52,308,309,311,313,315,317,320],{"class":54,"line":55},[52,310,59],{"class":58},[52,312,63],{"class":62},[52,314,67],{"class":66},[52,316,70],{"class":58},[52,318,319],{"class":73},"\"w-full h-64\"",[52,321,77],{"class":58},[52,323,324,326,328,330,332,334,336,338,340],{"class":54,"line":80},[52,325,83],{"class":58},[52,327,86],{"class":62},[52,329,89],{"class":66},[52,331,70],{"class":58},[52,333,94],{"class":73},[52,335,97],{"class":66},[52,337,70],{"class":58},[52,339,102],{"class":73},[52,341,105],{"class":58},[52,343,344,346,348],{"class":54,"line":108},[52,345,83],{"class":58},[52,347,113],{"class":62},[52,349,105],{"class":58},[52,351,352,354,356],{"class":54,"line":118},[52,353,121],{"class":58},[52,355,63],{"class":62},[52,357,77],{"class":58},[43,359,363],{"className":360,"code":361,"language":362,"meta":48,"style":48},"language-jsx shiki shiki-themes github-dark","\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient colorA=\"#0f172a\" colorB=\"#7c3aed\" />\n \u003CCursorTrail />\n\u003C/Shader>\n","jsx",[31,364,365,381,401,409],{"__ignoreMap":48},[52,366,367,369,372,375,377,379],{"class":54,"line":55},[52,368,59],{"class":58},[52,370,63],{"class":371},"sDLfK",[52,373,374],{"class":66}," className",[52,376,70],{"class":231},[52,378,319],{"class":73},[52,380,77],{"class":58},[52,382,383,385,387,389,391,393,395,397,399],{"class":54,"line":80},[52,384,83],{"class":58},[52,386,86],{"class":371},[52,388,89],{"class":66},[52,390,70],{"class":231},[52,392,94],{"class":73},[52,394,97],{"class":66},[52,396,70],{"class":231},[52,398,102],{"class":73},[52,400,105],{"class":58},[52,402,403,405,407],{"class":54,"line":108},[52,404,83],{"class":58},[52,406,113],{"class":371},[52,408,105],{"class":58},[52,410,411,413,415],{"class":54,"line":118},[52,412,121],{"class":58},[52,414,63],{"class":371},[52,416,77],{"class":58},[43,418,421],{"className":419,"code":304,"language":420,"meta":48,"style":48},"language-tsx shiki shiki-themes github-dark","tsx",[31,422,423,437,457,465],{"__ignoreMap":48},[52,424,425,427,429,431,433,435],{"class":54,"line":55},[52,426,59],{"class":58},[52,428,63],{"class":371},[52,430,67],{"class":66},[52,432,70],{"class":231},[52,434,319],{"class":73},[52,436,77],{"class":58},[52,438,439,441,443,445,447,449,451,453,455],{"class":54,"line":80},[52,440,83],{"class":58},[52,442,86],{"class":371},[52,444,89],{"class":66},[52,446,70],{"class":231},[52,448,94],{"class":73},[52,450,97],{"class":66},[52,452,70],{"class":231},[52,454,102],{"class":73},[52,456,105],{"class":58},[52,458,459,461,463],{"class":54,"line":108},[52,460,83],{"class":58},[52,462,113],{"class":371},[52,464,105],{"class":58},[52,466,467,469,471],{"class":54,"line":118},[52,468,121],{"class":58},[52,470,63],{"class":371},[52,472,77],{"class":58},[43,474,475],{"className":419,"code":304,"language":420,"meta":48,"style":48},[31,476,477,491,511,519],{"__ignoreMap":48},[52,478,479,481,483,485,487,489],{"class":54,"line":55},[52,480,59],{"class":58},[52,482,63],{"class":371},[52,484,67],{"class":66},[52,486,70],{"class":231},[52,488,319],{"class":73},[52,490,77],{"class":58},[52,492,493,495,497,499,501,503,505,507,509],{"class":54,"line":80},[52,494,83],{"class":58},[52,496,86],{"class":371},[52,498,89],{"class":66},[52,500,70],{"class":231},[52,502,94],{"class":73},[52,504,97],{"class":66},[52,506,70],{"class":231},[52,508,102],{"class":73},[52,510,105],{"class":58},[52,512,513,515,517],{"class":54,"line":108},[52,514,83],{"class":58},[52,516,113],{"class":371},[52,518,105],{"class":58},[52,520,521,523,525],{"class":54,"line":118},[52,522,121],{"class":58},[52,524,63],{"class":371},[52,526,77],{"class":58},[19,528],{":preset":529},"{\"components\":[{\"type\":\"LinearGradient\",\"props\":{\"colorA\":\"#0f172a\",\"colorB\":\"#7c3aed\"}},{\"type\":\"CursorTrail\"}]}",[15,531,532,534,535,537,538,540],{},[31,533,33],{}," renders a ",[31,536,40],{}," element. The child components are visual layers — evaluated top to bottom, blended together on the GPU. The class or style you apply to ",[31,539,33],{}," controls the canvas size and position.",[23,542,544],{"id":543},"sizing-the-canvas","Sizing the canvas",[15,546,547],{},"The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works — Tailwind classes, inline styles, or a custom class:",[217,549,550,714,857,995],{":tabs":219},[43,551,553],{"className":45,"code":552,"language":47,"meta":48,"style":48},"\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",[31,554,555,561,576,584,592,598,604,651,660,669,674,680,696,705],{"__ignoreMap":48},[52,556,557],{"class":54,"line":55},[52,558,560],{"class":559},"sAwPA","\u003C!-- Fill the viewport -->\n",[52,562,563,565,567,569,571,574],{"class":54,"line":80},[52,564,59],{"class":58},[52,566,63],{"class":62},[52,568,67],{"class":66},[52,570,70],{"class":58},[52,572,573],{"class":73},"\"w-screen h-screen\"",[52,575,77],{"class":58},[52,577,578,580,582],{"class":54,"line":108},[52,579,83],{"class":58},[52,581,86],{"class":62},[52,583,105],{"class":58},[52,585,586,588,590],{"class":54,"line":118},[52,587,121],{"class":58},[52,589,63],{"class":62},[52,591,77],{"class":58},[52,593,595],{"class":54,"line":594},5,[52,596,597],{"emptyLinePlaceholder":171},"\n",[52,599,601],{"class":54,"line":600},6,[52,602,603],{"class":559},"\u003C!-- Fixed dimensions -->\n",[52,605,607,609,611,614,616,619,622,625,628,631,634,637,639,642,644,647,649],{"class":54,"line":606},7,[52,608,59],{"class":58},[52,610,63],{"class":62},[52,612,613],{"class":66}," style",[52,615,70],{"class":58},[52,617,618],{"class":73},"\"",[52,620,621],{"class":371},"width",[52,623,624],{"class":58},": ",[52,626,627],{"class":371},"600",[52,629,630],{"class":231},"px",[52,632,633],{"class":58},"; ",[52,635,636],{"class":371},"height",[52,638,624],{"class":58},[52,640,641],{"class":371},"400",[52,643,630],{"class":231},[52,645,646],{"class":58},";",[52,648,618],{"class":73},[52,650,77],{"class":58},[52,652,654,656,658],{"class":54,"line":653},8,[52,655,83],{"class":58},[52,657,86],{"class":62},[52,659,105],{"class":58},[52,661,663,665,667],{"class":54,"line":662},9,[52,664,121],{"class":58},[52,666,63],{"class":62},[52,668,77],{"class":58},[52,670,672],{"class":54,"line":671},10,[52,673,597],{"emptyLinePlaceholder":171},[52,675,677],{"class":54,"line":676},11,[52,678,679],{"class":559},"\u003C!-- Aspect ratio with fluid width -->\n",[52,681,683,685,687,689,691,694],{"class":54,"line":682},12,[52,684,59],{"class":58},[52,686,63],{"class":62},[52,688,67],{"class":66},[52,690,70],{"class":58},[52,692,693],{"class":73},"\"w-full aspect-video\"",[52,695,77],{"class":58},[52,697,699,701,703],{"class":54,"line":698},13,[52,700,83],{"class":58},[52,702,86],{"class":62},[52,704,105],{"class":58},[52,706,708,710,712],{"class":54,"line":707},14,[52,709,121],{"class":58},[52,711,63],{"class":62},[52,713,77],{"class":58},[43,715,717],{"className":360,"code":716,"language":362,"meta":48,"style":48},"{/* 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",[31,718,719,730,744,752,760,764,773,798,806,814,818,827,841,849],{"__ignoreMap":48},[52,720,721,724,727],{"class":54,"line":55},[52,722,723],{"class":58},"{",[52,725,726],{"class":559},"/* Fill the viewport */",[52,728,729],{"class":58},"}\n",[52,731,732,734,736,738,740,742],{"class":54,"line":80},[52,733,59],{"class":58},[52,735,63],{"class":371},[52,737,374],{"class":66},[52,739,70],{"class":231},[52,741,573],{"class":73},[52,743,77],{"class":58},[52,745,746,748,750],{"class":54,"line":108},[52,747,83],{"class":58},[52,749,86],{"class":371},[52,751,105],{"class":58},[52,753,754,756,758],{"class":54,"line":118},[52,755,121],{"class":58},[52,757,63],{"class":371},[52,759,77],{"class":58},[52,761,762],{"class":54,"line":594},[52,763,597],{"emptyLinePlaceholder":171},[52,765,766,768,771],{"class":54,"line":600},[52,767,723],{"class":58},[52,769,770],{"class":559},"/* Fixed dimensions */",[52,772,729],{"class":58},[52,774,775,777,779,781,783,786,789,792,795],{"class":54,"line":606},[52,776,59],{"class":58},[52,778,63],{"class":371},[52,780,613],{"class":66},[52,782,70],{"class":231},[52,784,785],{"class":58},"{{ width: ",[52,787,788],{"class":73},"'600px'",[52,790,791],{"class":58},", height: ",[52,793,794],{"class":73},"'400px'",[52,796,797],{"class":58}," }}>\n",[52,799,800,802,804],{"class":54,"line":653},[52,801,83],{"class":58},[52,803,86],{"class":371},[52,805,105],{"class":58},[52,807,808,810,812],{"class":54,"line":662},[52,809,121],{"class":58},[52,811,63],{"class":371},[52,813,77],{"class":58},[52,815,816],{"class":54,"line":671},[52,817,597],{"emptyLinePlaceholder":171},[52,819,820,822,825],{"class":54,"line":676},[52,821,723],{"class":58},[52,823,824],{"class":559},"/* Aspect ratio with fluid width */",[52,826,729],{"class":58},[52,828,829,831,833,835,837,839],{"class":54,"line":682},[52,830,59],{"class":58},[52,832,63],{"class":371},[52,834,374],{"class":66},[52,836,70],{"class":231},[52,838,693],{"class":73},[52,840,77],{"class":58},[52,842,843,845,847],{"class":54,"line":698},[52,844,83],{"class":58},[52,846,86],{"class":371},[52,848,105],{"class":58},[52,850,851,853,855],{"class":54,"line":707},[52,852,121],{"class":58},[52,854,63],{"class":371},[52,856,77],{"class":58},[43,858,859],{"className":419,"code":552,"language":420,"meta":48,"style":48},[31,860,861,872,886,894,902,906,915,930,938,946,950,965,979,987],{"__ignoreMap":48},[52,862,863,866,869],{"class":54,"line":55},[52,864,865],{"class":231},"\u003C!--",[52,867,868],{"class":58}," Fill the viewport ",[52,870,871],{"class":231},"-->\n",[52,873,874,876,878,880,882,884],{"class":54,"line":80},[52,875,59],{"class":58},[52,877,63],{"class":371},[52,879,67],{"class":66},[52,881,70],{"class":231},[52,883,573],{"class":73},[52,885,77],{"class":58},[52,887,888,890,892],{"class":54,"line":108},[52,889,83],{"class":58},[52,891,86],{"class":371},[52,893,105],{"class":58},[52,895,896,898,900],{"class":54,"line":118},[52,897,121],{"class":58},[52,899,63],{"class":371},[52,901,77],{"class":58},[52,903,904],{"class":54,"line":594},[52,905,597],{"emptyLinePlaceholder":171},[52,907,908,910,913],{"class":54,"line":600},[52,909,865],{"class":231},[52,911,912],{"class":58}," Fixed dimensions ",[52,914,871],{"class":231},[52,916,917,919,921,923,925,928],{"class":54,"line":606},[52,918,59],{"class":58},[52,920,63],{"class":371},[52,922,613],{"class":66},[52,924,70],{"class":231},[52,926,927],{"class":73},"\"width: 600px; height: 400px;\"",[52,929,77],{"class":58},[52,931,932,934,936],{"class":54,"line":653},[52,933,83],{"class":58},[52,935,86],{"class":371},[52,937,105],{"class":58},[52,939,940,942,944],{"class":54,"line":662},[52,941,121],{"class":58},[52,943,63],{"class":371},[52,945,77],{"class":58},[52,947,948],{"class":54,"line":671},[52,949,597],{"emptyLinePlaceholder":171},[52,951,952,954,957,960,963],{"class":54,"line":676},[52,953,865],{"class":231},[52,955,956],{"class":58}," Aspect ratio ",[52,958,959],{"class":231},"with",[52,961,962],{"class":58}," fluid width ",[52,964,871],{"class":231},[52,966,967,969,971,973,975,977],{"class":54,"line":682},[52,968,59],{"class":58},[52,970,63],{"class":371},[52,972,67],{"class":66},[52,974,70],{"class":231},[52,976,693],{"class":73},[52,978,77],{"class":58},[52,980,981,983,985],{"class":54,"line":698},[52,982,83],{"class":58},[52,984,86],{"class":371},[52,986,105],{"class":58},[52,988,989,991,993],{"class":54,"line":707},[52,990,121],{"class":58},[52,992,63],{"class":371},[52,994,77],{"class":58},[43,996,998],{"className":419,"code":997,"language":420,"meta":48,"style":48},"{/* 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",[31,999,1000,1008,1022,1030,1038,1042,1050,1070,1078,1086,1090,1098,1112,1120],{"__ignoreMap":48},[52,1001,1002,1004,1006],{"class":54,"line":55},[52,1003,723],{"class":58},[52,1005,726],{"class":559},[52,1007,729],{"class":58},[52,1009,1010,1012,1014,1016,1018,1020],{"class":54,"line":80},[52,1011,59],{"class":58},[52,1013,63],{"class":371},[52,1015,67],{"class":66},[52,1017,70],{"class":231},[52,1019,573],{"class":73},[52,1021,77],{"class":58},[52,1023,1024,1026,1028],{"class":54,"line":108},[52,1025,83],{"class":58},[52,1027,86],{"class":371},[52,1029,105],{"class":58},[52,1031,1032,1034,1036],{"class":54,"line":118},[52,1033,121],{"class":58},[52,1035,63],{"class":371},[52,1037,77],{"class":58},[52,1039,1040],{"class":54,"line":594},[52,1041,597],{"emptyLinePlaceholder":171},[52,1043,1044,1046,1048],{"class":54,"line":600},[52,1045,723],{"class":58},[52,1047,770],{"class":559},[52,1049,729],{"class":58},[52,1051,1052,1054,1056,1058,1060,1062,1064,1066,1068],{"class":54,"line":606},[52,1053,59],{"class":58},[52,1055,63],{"class":371},[52,1057,613],{"class":66},[52,1059,70],{"class":231},[52,1061,785],{"class":58},[52,1063,788],{"class":73},[52,1065,791],{"class":58},[52,1067,794],{"class":73},[52,1069,797],{"class":58},[52,1071,1072,1074,1076],{"class":54,"line":653},[52,1073,83],{"class":58},[52,1075,86],{"class":371},[52,1077,105],{"class":58},[52,1079,1080,1082,1084],{"class":54,"line":662},[52,1081,121],{"class":58},[52,1083,63],{"class":371},[52,1085,77],{"class":58},[52,1087,1088],{"class":54,"line":671},[52,1089,597],{"emptyLinePlaceholder":171},[52,1091,1092,1094,1096],{"class":54,"line":676},[52,1093,723],{"class":58},[52,1095,824],{"class":559},[52,1097,729],{"class":58},[52,1099,1100,1102,1104,1106,1108,1110],{"class":54,"line":682},[52,1101,59],{"class":58},[52,1103,63],{"class":371},[52,1105,67],{"class":66},[52,1107,70],{"class":231},[52,1109,693],{"class":73},[52,1111,77],{"class":58},[52,1113,1114,1116,1118],{"class":54,"line":698},[52,1115,83],{"class":58},[52,1117,86],{"class":371},[52,1119,105],{"class":58},[52,1121,1122,1124,1126],{"class":54,"line":707},[52,1123,121],{"class":58},[52,1125,63],{"class":371},[52,1127,77],{"class":58},[15,1129,1130],{},"The canvas automatically resizes when its CSS dimensions change — no manual resize calls needed.",[23,1132,1134],{"id":1133},"configuring-components","Configuring components",[15,1136,1137,1138,1143],{},"Each component accepts props that control its appearance. Browse the ",[1139,1140,1142],"a",{"href":1141},"/docs/components","Component Docs"," for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:",[217,1145,1146,1233,1308,1381],{":tabs":219},[43,1147,1149],{"className":45,"code":1148,"language":47,"meta":48,"style":48},"\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",[31,1150,1151,1165,1172,1182,1192,1210,1220,1225],{"__ignoreMap":48},[52,1152,1153,1155,1157,1159,1161,1163],{"class":54,"line":55},[52,1154,59],{"class":58},[52,1156,63],{"class":62},[52,1158,67],{"class":66},[52,1160,70],{"class":58},[52,1162,319],{"class":73},[52,1164,77],{"class":58},[52,1166,1167,1169],{"class":54,"line":80},[52,1168,83],{"class":58},[52,1170,1171],{"class":62},"LinearGradient\n",[52,1173,1174,1177,1179],{"class":54,"line":108},[52,1175,1176],{"class":66}," colorA",[52,1178,70],{"class":58},[52,1180,1181],{"class":73},"\"#ff6b6b\"\n",[52,1183,1184,1187,1189],{"class":54,"line":118},[52,1185,1186],{"class":66}," colorB",[52,1188,70],{"class":58},[52,1190,1191],{"class":73},"\"#4ecdc4\"\n",[52,1193,1194,1197,1200,1202,1204,1207],{"class":54,"line":594},[52,1195,1196],{"class":58}," :",[52,1198,1199],{"class":66},"angle",[52,1201,70],{"class":58},[52,1203,618],{"class":73},[52,1205,1206],{"class":371},"45",[52,1208,1209],{"class":73},"\"\n",[52,1211,1212,1215,1217],{"class":54,"line":600},[52,1213,1214],{"class":66}," color-space",[52,1216,70],{"class":58},[52,1218,1219],{"class":73},"\"oklch\"\n",[52,1221,1222],{"class":54,"line":606},[52,1223,1224],{"class":58}," />\n",[52,1226,1227,1229,1231],{"class":54,"line":653},[52,1228,121],{"class":58},[52,1230,63],{"class":62},[52,1232,77],{"class":58},[43,1234,1236],{"className":360,"code":1235,"language":362,"meta":48,"style":48},"\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",[31,1237,1238,1252,1258,1266,1274,1287,1296,1300],{"__ignoreMap":48},[52,1239,1240,1242,1244,1246,1248,1250],{"class":54,"line":55},[52,1241,59],{"class":58},[52,1243,63],{"class":371},[52,1245,374],{"class":66},[52,1247,70],{"class":231},[52,1249,319],{"class":73},[52,1251,77],{"class":58},[52,1253,1254,1256],{"class":54,"line":80},[52,1255,83],{"class":58},[52,1257,1171],{"class":371},[52,1259,1260,1262,1264],{"class":54,"line":108},[52,1261,1176],{"class":66},[52,1263,70],{"class":231},[52,1265,1181],{"class":73},[52,1267,1268,1270,1272],{"class":54,"line":118},[52,1269,1186],{"class":66},[52,1271,70],{"class":231},[52,1273,1191],{"class":73},[52,1275,1276,1279,1281,1283,1285],{"class":54,"line":594},[52,1277,1278],{"class":66}," angle",[52,1280,70],{"class":231},[52,1282,723],{"class":58},[52,1284,1206],{"class":371},[52,1286,729],{"class":58},[52,1288,1289,1292,1294],{"class":54,"line":600},[52,1290,1291],{"class":66}," colorSpace",[52,1293,70],{"class":231},[52,1295,1219],{"class":73},[52,1297,1298],{"class":54,"line":606},[52,1299,1224],{"class":58},[52,1301,1302,1304,1306],{"class":54,"line":653},[52,1303,121],{"class":58},[52,1305,63],{"class":371},[52,1307,77],{"class":58},[43,1309,1311],{"className":419,"code":1310,"language":420,"meta":48,"style":48},"\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",[31,1312,1313,1327,1333,1341,1349,1361,1369,1373],{"__ignoreMap":48},[52,1314,1315,1317,1319,1321,1323,1325],{"class":54,"line":55},[52,1316,59],{"class":58},[52,1318,63],{"class":371},[52,1320,67],{"class":66},[52,1322,70],{"class":231},[52,1324,319],{"class":73},[52,1326,77],{"class":58},[52,1328,1329,1331],{"class":54,"line":80},[52,1330,83],{"class":58},[52,1332,1171],{"class":371},[52,1334,1335,1337,1339],{"class":54,"line":108},[52,1336,1176],{"class":66},[52,1338,70],{"class":231},[52,1340,1181],{"class":73},[52,1342,1343,1345,1347],{"class":54,"line":118},[52,1344,1186],{"class":66},[52,1346,70],{"class":231},[52,1348,1191],{"class":73},[52,1350,1351,1353,1355,1357,1359],{"class":54,"line":594},[52,1352,1278],{"class":66},[52,1354,70],{"class":231},[52,1356,723],{"class":58},[52,1358,1206],{"class":371},[52,1360,729],{"class":58},[52,1362,1363,1365,1367],{"class":54,"line":600},[52,1364,1291],{"class":66},[52,1366,70],{"class":231},[52,1368,1219],{"class":73},[52,1370,1371],{"class":54,"line":606},[52,1372,1224],{"class":58},[52,1374,1375,1377,1379],{"class":54,"line":653},[52,1376,121],{"class":58},[52,1378,63],{"class":371},[52,1380,77],{"class":58},[43,1382,1383],{"className":419,"code":1310,"language":420,"meta":48,"style":48},[31,1384,1385,1399,1405,1413,1421,1433,1441,1445],{"__ignoreMap":48},[52,1386,1387,1389,1391,1393,1395,1397],{"class":54,"line":55},[52,1388,59],{"class":58},[52,1390,63],{"class":371},[52,1392,67],{"class":66},[52,1394,70],{"class":231},[52,1396,319],{"class":73},[52,1398,77],{"class":58},[52,1400,1401,1403],{"class":54,"line":80},[52,1402,83],{"class":58},[52,1404,1171],{"class":371},[52,1406,1407,1409,1411],{"class":54,"line":108},[52,1408,1176],{"class":66},[52,1410,70],{"class":231},[52,1412,1181],{"class":73},[52,1414,1415,1417,1419],{"class":54,"line":118},[52,1416,1186],{"class":66},[52,1418,70],{"class":231},[52,1420,1191],{"class":73},[52,1422,1423,1425,1427,1429,1431],{"class":54,"line":594},[52,1424,1278],{"class":66},[52,1426,70],{"class":231},[52,1428,723],{"class":58},[52,1430,1206],{"class":371},[52,1432,729],{"class":58},[52,1434,1435,1437,1439],{"class":54,"line":600},[52,1436,1291],{"class":66},[52,1438,70],{"class":231},[52,1440,1219],{"class":73},[52,1442,1443],{"class":54,"line":606},[52,1444,1224],{"class":58},[52,1446,1447,1449,1451],{"class":54,"line":653},[52,1448,121],{"class":58},[52,1450,63],{"class":371},[52,1452,77],{"class":58},[23,1454,1456],{"id":1455},"using-with-ssr-frameworks","Using with SSR frameworks",[15,1458,1459],{},"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.",[23,1461,1463],{"id":1462},"next-steps","Next steps",[1465,1466,1467,1475,1482,1489],"ul",{},[1468,1469,1470,1474],"li",{},[1139,1471,1473],{"href":1472},"/docs/guide/composing-effects","Composing Effects"," — stack and nest components for complex results",[1468,1476,1477,1481],{},[1139,1478,1480],{"href":1479},"/docs/guide/layout-positioning","Layout & Positioning"," — position the canvas in your UI",[1468,1483,1484,1488],{},[1139,1485,1487],{"href":1486},"/docs/guide/props-reactivity","Props & Reactivity"," — bind state and animate props",[1468,1490,1491,1493],{},[1139,1492,1142],{"href":1141}," — browse all available shaders",[156,1495,1496],{},"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 .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":48,"searchDepth":80,"depth":80,"links":1498},[1499,1500,1501,1502,1503,1504,1505],{"id":186,"depth":80,"text":187},{"id":211,"depth":80,"text":212},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":1455,"depth":80,"text":1456},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect",[1508],"js","rocket",{},"/docs/guide/quickstart",{"title":178,"description":1506},"docs/guide/1.quickstart","5TV-vu9Iuv9U5dTiOSh12-39AgrLAfx1KvE6_yB9RKM",{"id":1516,"title":1517,"body":1518,"category":1904,"description":1905,"exclude":167,"extension":168,"forceFramework":167,"icon":1906,"meta":1907,"navigation":171,"path":1908,"seo":1909,"stem":1910,"__hash__":1911},"guide/docs/guide/10.color-space.md","Color Space",{"type":8,"value":1519,"toc":1901},[1520,1523,1530,1541,1779,1819,1823,1837,1858,1875,1898],[11,1521,1517],{"id":1522},"color-space",[15,1524,1525,1526,1529],{},"By default, Shaders uses ",[151,1527,1528],{},"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,1531,1532,1533,1536,1537,1540],{},"To match your design tool exactly, set ",[31,1534,1535],{},"colorSpace"," to ",[31,1538,1539],{},"'srgb'",":",[217,1542,1544,1590,1632,1672,1712],{":tabs":1543},"[\"Vue\", \"React\", \"Svelte\", \"Solid\", \"JS\"]",[43,1545,1547],{"className":45,"code":1546,"language":47,"meta":48,"style":48},"\u003CShader color-space=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" />\n\u003C/Shader>\n",[31,1548,1549,1565,1582],{"__ignoreMap":48},[52,1550,1551,1553,1555,1558,1560,1563],{"class":54,"line":55},[52,1552,59],{"class":58},[52,1554,63],{"class":62},[52,1556,1557],{"class":66}," color-space",[52,1559,70],{"class":58},[52,1561,1562],{"class":73},"\"srgb\"",[52,1564,77],{"class":58},[52,1566,1567,1569,1572,1575,1577,1580],{"class":54,"line":80},[52,1568,83],{"class":58},[52,1570,1571],{"class":62},"SolidColor",[52,1573,1574],{"class":66}," color",[52,1576,70],{"class":58},[52,1578,1579],{"class":73},"\"#5b18ca\"",[52,1581,105],{"class":58},[52,1583,1584,1586,1588],{"class":54,"line":108},[52,1585,121],{"class":58},[52,1587,63],{"class":62},[52,1589,77],{"class":58},[43,1591,1593],{"className":360,"code":1592,"language":362,"meta":48,"style":48},"\u003CShader colorSpace=\"srgb\">\n \u003CSolidColor color=\"#5b18ca\" />\n\u003C/Shader>\n",[31,1594,1595,1610,1624],{"__ignoreMap":48},[52,1596,1597,1599,1601,1604,1606,1608],{"class":54,"line":55},[52,1598,59],{"class":58},[52,1600,63],{"class":371},[52,1602,1603],{"class":66}," colorSpace",[52,1605,70],{"class":231},[52,1607,1562],{"class":73},[52,1609,77],{"class":58},[52,1611,1612,1614,1616,1618,1620,1622],{"class":54,"line":80},[52,1613,83],{"class":58},[52,1615,1571],{"class":371},[52,1617,1574],{"class":66},[52,1619,70],{"class":231},[52,1621,1579],{"class":73},[52,1623,105],{"class":58},[52,1625,1626,1628,1630],{"class":54,"line":108},[52,1627,121],{"class":58},[52,1629,63],{"class":371},[52,1631,77],{"class":58},[43,1633,1634],{"className":419,"code":1592,"language":420,"meta":48,"style":48},[31,1635,1636,1650,1664],{"__ignoreMap":48},[52,1637,1638,1640,1642,1644,1646,1648],{"class":54,"line":55},[52,1639,59],{"class":58},[52,1641,63],{"class":371},[52,1643,1603],{"class":66},[52,1645,70],{"class":231},[52,1647,1562],{"class":73},[52,1649,77],{"class":58},[52,1651,1652,1654,1656,1658,1660,1662],{"class":54,"line":80},[52,1653,83],{"class":58},[52,1655,1571],{"class":371},[52,1657,1574],{"class":66},[52,1659,70],{"class":231},[52,1661,1579],{"class":73},[52,1663,105],{"class":58},[52,1665,1666,1668,1670],{"class":54,"line":108},[52,1667,121],{"class":58},[52,1669,63],{"class":371},[52,1671,77],{"class":58},[43,1673,1674],{"className":419,"code":1592,"language":420,"meta":48,"style":48},[31,1675,1676,1690,1704],{"__ignoreMap":48},[52,1677,1678,1680,1682,1684,1686,1688],{"class":54,"line":55},[52,1679,59],{"class":58},[52,1681,63],{"class":371},[52,1683,1603],{"class":66},[52,1685,70],{"class":231},[52,1687,1562],{"class":73},[52,1689,77],{"class":58},[52,1691,1692,1694,1696,1698,1700,1702],{"class":54,"line":80},[52,1693,83],{"class":58},[52,1695,1571],{"class":371},[52,1697,1574],{"class":66},[52,1699,70],{"class":231},[52,1701,1579],{"class":73},[52,1703,105],{"class":58},[52,1705,1706,1708,1710],{"class":54,"line":108},[52,1707,121],{"class":58},[52,1709,63],{"class":371},[52,1711,77],{"class":58},[43,1713,1715],{"className":222,"code":1714,"language":224,"meta":48,"style":48},"const shader = await createShader(canvas, {\n colorSpace: 'srgb',\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[31,1716,1717,1737,1747,1752,1769,1774],{"__ignoreMap":48},[52,1718,1719,1722,1725,1728,1731,1734],{"class":54,"line":55},[52,1720,1721],{"class":231},"const",[52,1723,1724],{"class":371}," shader",[52,1726,1727],{"class":231}," =",[52,1729,1730],{"class":231}," await",[52,1732,1733],{"class":66}," createShader",[52,1735,1736],{"class":58},"(canvas, {\n",[52,1738,1739,1742,1744],{"class":54,"line":80},[52,1740,1741],{"class":58}," colorSpace: ",[52,1743,1539],{"class":73},[52,1745,1746],{"class":58},",\n",[52,1748,1749],{"class":54,"line":108},[52,1750,1751],{"class":58}," components: [\n",[52,1753,1754,1757,1760,1763,1766],{"class":54,"line":118},[52,1755,1756],{"class":58}," { type: ",[52,1758,1759],{"class":73},"'SolidColor'",[52,1761,1762],{"class":58},", props: { color: ",[52,1764,1765],{"class":73},"'#5b18ca'",[52,1767,1768],{"class":58}," } }\n",[52,1770,1771],{"class":54,"line":594},[52,1772,1773],{"class":58}," ]\n",[52,1775,1776],{"class":54,"line":600},[52,1777,1778],{"class":58},"})\n",[1780,1781,1782,1795],"table",{},[1783,1784,1785],"thead",{},[1786,1787,1788,1792],"tr",{},[1789,1790,1791],"th",{},"Value",[1789,1793,1794],{},"Description",[1796,1797,1798,1809],"tbody",{},[1786,1799,1800,1806],{},[1801,1802,1803],"td",{},[31,1804,1805],{},"p3-linear",[1801,1807,1808],{},"Display P3 linear (default). Wide gamut, physically accurate blending.",[1786,1810,1811,1816],{},[1801,1812,1813],{},[31,1814,1815],{},"srgb",[1801,1817,1818],{},"sRGB. Matches hex colors from Figma, Sketch, and Adobe XD exactly.",[23,1820,1822],{"id":1821},"output-space-vs-gradient-interpolation","Output space vs. gradient interpolation",[15,1824,1825,1826,1828,1829,1831,1832,1836],{},"The ",[31,1827,1535],{}," prop on ",[31,1830,33],{}," controls the ",[1833,1834,1835],"em",{},"output rendering space"," — how final pixel values are interpreted by your display.",[15,1838,1839,1840,1842,1843,1846,1847,1850,1851,1854,1855,1857],{},"Several gradient and color components also have their own ",[31,1841,1535],{}," prop that controls how colors ",[1833,1844,1845],{},"interpolate between stops"," (for example, between ",[31,1848,1849],{},"colorA"," and ",[31,1852,1853],{},"colorB"," in a ",[31,1856,86],{},"). These are two separate concepts:",[1465,1859,1860,1869],{},[1468,1861,1862,1865,1866,1868],{},[151,1863,1864],{},"Output color space"," — set on the root ",[31,1867,33],{},", affects the entire canvas output",[1468,1870,1871,1874],{},[151,1872,1873],{},"Interpolation color space"," — set per-component, controls color blending within that effect",[15,1876,1877,1878,1881,1882,1881,1885,1881,1888,1881,1891,1881,1894,1897],{},"Available interpolation modes (where supported): ",[31,1879,1880],{},"linear",", ",[31,1883,1884],{},"oklch",[31,1886,1887],{},"oklab",[31,1889,1890],{},"hsl",[31,1892,1893],{},"hsv",[31,1895,1896],{},"lch",". See individual component docs for options.",[156,1899,1900],{},"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":48,"searchDepth":80,"depth":80,"links":1902},[1903],{"id":1821,"depth":80,"text":1822},"advanced","Configure output color space for accurate color matching with design tools","palette",{},"/docs/guide/color-space",{"title":1517,"description":1905},"docs/guide/10.color-space","H8DBuarsEZ3Az-uKqVPOdWtesDd4Gp23dpjS6DotXVM",{"id":1913,"title":1914,"body":1915,"category":1904,"description":2142,"exclude":167,"extension":168,"forceFramework":167,"icon":2143,"meta":2144,"navigation":171,"path":2145,"seo":2146,"stem":2147,"__hash__":2148},"guide/docs/guide/11.telemetry.md","Telemetry",{"type":8,"value":1916,"toc":2140},[1917,1920,1923,1934,1937,2138],[11,1918,1914],{"id":1919},"telemetry",[15,1921,1922],{},"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,1924,1925,1926,1929,1930,1933],{},"Telemetry is ",[151,1927,1928],{},"automatically disabled"," when running on ",[31,1931,1932],{},"localhost"," or in development environments.",[15,1935,1936],{},"To disable it explicitly in production:",[217,1938,1939,1976,2016,2052,2088],{":tabs":1543},[43,1940,1942],{"className":45,"code":1941,"language":47,"meta":48,"style":48},"\u003CShader :disable-telemetry=\"true\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,1943,1944,1960,1968],{"__ignoreMap":48},[52,1945,1946,1948,1950,1953,1955,1958],{"class":54,"line":55},[52,1947,59],{"class":58},[52,1949,63],{"class":62},[52,1951,1952],{"class":66}," :disable-telemetry",[52,1954,70],{"class":58},[52,1956,1957],{"class":73},"\"true\"",[52,1959,77],{"class":58},[52,1961,1962,1964,1966],{"class":54,"line":80},[52,1963,83],{"class":58},[52,1965,86],{"class":62},[52,1967,105],{"class":58},[52,1969,1970,1972,1974],{"class":54,"line":108},[52,1971,121],{"class":58},[52,1973,63],{"class":62},[52,1975,77],{"class":58},[43,1977,1979],{"className":360,"code":1978,"language":362,"meta":48,"style":48},"\u003CShader disableTelemetry={true}>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,1980,1981,2000,2008],{"__ignoreMap":48},[52,1982,1983,1985,1987,1990,1992,1994,1997],{"class":54,"line":55},[52,1984,59],{"class":58},[52,1986,63],{"class":371},[52,1988,1989],{"class":66}," disableTelemetry",[52,1991,70],{"class":231},[52,1993,723],{"class":58},[52,1995,1996],{"class":371},"true",[52,1998,1999],{"class":58},"}>\n",[52,2001,2002,2004,2006],{"class":54,"line":80},[52,2003,83],{"class":58},[52,2005,86],{"class":371},[52,2007,105],{"class":58},[52,2009,2010,2012,2014],{"class":54,"line":108},[52,2011,121],{"class":58},[52,2013,63],{"class":371},[52,2015,77],{"class":58},[43,2017,2018],{"className":419,"code":1978,"language":420,"meta":48,"style":48},[31,2019,2020,2036,2044],{"__ignoreMap":48},[52,2021,2022,2024,2026,2028,2030,2032,2034],{"class":54,"line":55},[52,2023,59],{"class":58},[52,2025,63],{"class":371},[52,2027,1989],{"class":66},[52,2029,70],{"class":231},[52,2031,723],{"class":58},[52,2033,1996],{"class":371},[52,2035,1999],{"class":58},[52,2037,2038,2040,2042],{"class":54,"line":80},[52,2039,83],{"class":58},[52,2041,86],{"class":371},[52,2043,105],{"class":58},[52,2045,2046,2048,2050],{"class":54,"line":108},[52,2047,121],{"class":58},[52,2049,63],{"class":371},[52,2051,77],{"class":58},[43,2053,2054],{"className":419,"code":1978,"language":420,"meta":48,"style":48},[31,2055,2056,2072,2080],{"__ignoreMap":48},[52,2057,2058,2060,2062,2064,2066,2068,2070],{"class":54,"line":55},[52,2059,59],{"class":58},[52,2061,63],{"class":371},[52,2063,1989],{"class":66},[52,2065,70],{"class":231},[52,2067,723],{"class":58},[52,2069,1996],{"class":371},[52,2071,1999],{"class":58},[52,2073,2074,2076,2078],{"class":54,"line":80},[52,2075,83],{"class":58},[52,2077,86],{"class":371},[52,2079,105],{"class":58},[52,2081,2082,2084,2086],{"class":54,"line":108},[52,2083,121],{"class":58},[52,2085,63],{"class":371},[52,2087,77],{"class":58},[43,2089,2091],{"className":222,"code":2090,"language":224,"meta":48,"style":48},"const shader = await createShader(canvas, {\n disableTelemetry: true,\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[31,2092,2093,2107,2116,2120,2130,2134],{"__ignoreMap":48},[52,2094,2095,2097,2099,2101,2103,2105],{"class":54,"line":55},[52,2096,1721],{"class":231},[52,2098,1724],{"class":371},[52,2100,1727],{"class":231},[52,2102,1730],{"class":231},[52,2104,1733],{"class":66},[52,2106,1736],{"class":58},[52,2108,2109,2112,2114],{"class":54,"line":80},[52,2110,2111],{"class":58}," disableTelemetry: ",[52,2113,1996],{"class":371},[52,2115,1746],{"class":58},[52,2117,2118],{"class":54,"line":108},[52,2119,1751],{"class":58},[52,2121,2122,2124,2127],{"class":54,"line":118},[52,2123,1756],{"class":58},[52,2125,2126],{"class":73},"'LinearGradient'",[52,2128,2129],{"class":58},", props: {} }\n",[52,2131,2132],{"class":54,"line":594},[52,2133,1773],{"class":58},[52,2135,2136],{"class":54,"line":600},[52,2137,1778],{"class":58},[156,2139,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":2141},[],"Anonymous usage data collection and how to disable it","chart-simple",{},"/docs/guide/telemetry",{"title":1914,"description":2142},"docs/guide/11.telemetry","fUSVHGwnhd89JhU2ysis7Ll0lm0fqlBCMu08GiTMRA4",{"id":2150,"title":2151,"body":2152,"category":1904,"description":2984,"exclude":167,"extension":168,"forceFramework":167,"icon":2985,"meta":2986,"navigation":171,"path":2987,"seo":2988,"stem":2989,"__hash__":2990},"guide/docs/guide/12.hooks-events.md","Hooks & Events",{"type":8,"value":2153,"toc":2978},[2154,2157,2160,2164,2169,2924,2929,2934,2948,2955,2959,2975],[11,2155,2151],{"id":2156},"hooks-events",[15,2158,2159],{},"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.",[23,2161,2163],{"id":2162},"onready","onReady",[15,2165,1825,2166,2168],{},[31,2167,2163],{}," 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.",[217,2170,2171,2334,2505,2634,2784],{":tabs":1543},[43,2172,2174],{"className":45,"code":2173,"language":47,"meta":48,"style":48},"\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",[31,2175,2176,2185,2209,2226,2235,2243,2247,2259,2271,2275,2296,2300,2311,2321,2325],{"__ignoreMap":48},[52,2177,2178,2180,2183],{"class":54,"line":55},[52,2179,59],{"class":58},[52,2181,2182],{"class":62},"template",[52,2184,77],{"class":58},[52,2186,2187,2189,2191,2194,2196,2199,2202,2204,2207],{"class":54,"line":80},[52,2188,83],{"class":58},[52,2190,63],{"class":62},[52,2192,2193],{"class":66}," @ready",[52,2195,70],{"class":58},[52,2197,2198],{"class":73},"\"onShaderReady\"",[52,2200,2201],{"class":66}," :style",[52,2203,70],{"class":58},[52,2205,2206],{"class":73},"\"{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }\"",[52,2208,77],{"class":58},[52,2210,2211,2214,2217,2219,2221,2224],{"class":54,"line":108},[52,2212,2213],{"class":58}," \u003C",[52,2215,2216],{"class":62},"Circle",[52,2218,1574],{"class":66},[52,2220,70],{"class":58},[52,2222,2223],{"class":73},"\"#ff0088\"",[52,2225,105],{"class":58},[52,2227,2228,2231,2233],{"class":54,"line":118},[52,2229,2230],{"class":58}," \u003C/",[52,2232,63],{"class":62},[52,2234,77],{"class":58},[52,2236,2237,2239,2241],{"class":54,"line":594},[52,2238,121],{"class":58},[52,2240,2182],{"class":62},[52,2242,77],{"class":58},[52,2244,2245],{"class":54,"line":600},[52,2246,597],{"emptyLinePlaceholder":171},[52,2248,2249,2251,2254,2257],{"class":54,"line":606},[52,2250,59],{"class":58},[52,2252,2253],{"class":62},"script",[52,2255,2256],{"class":66}," setup",[52,2258,77],{"class":58},[52,2260,2261,2263,2266,2268],{"class":54,"line":653},[52,2262,232],{"class":231},[52,2264,2265],{"class":58}," { ref } ",[52,2267,238],{"class":231},[52,2269,2270],{"class":73}," 'vue'\n",[52,2272,2273],{"class":54,"line":662},[52,2274,597],{"emptyLinePlaceholder":171},[52,2276,2277,2279,2282,2284,2287,2290,2293],{"class":54,"line":671},[52,2278,1721],{"class":231},[52,2280,2281],{"class":371}," visible",[52,2283,1727],{"class":231},[52,2285,2286],{"class":66}," ref",[52,2288,2289],{"class":58},"(",[52,2291,2292],{"class":371},"false",[52,2294,2295],{"class":58},")\n",[52,2297,2298],{"class":54,"line":676},[52,2299,597],{"emptyLinePlaceholder":171},[52,2301,2302,2305,2308],{"class":54,"line":682},[52,2303,2304],{"class":231},"function",[52,2306,2307],{"class":66}," onShaderReady",[52,2309,2310],{"class":58},"() {\n",[52,2312,2313,2316,2318],{"class":54,"line":698},[52,2314,2315],{"class":58}," visible.value ",[52,2317,70],{"class":231},[52,2319,2320],{"class":371}," true\n",[52,2322,2323],{"class":54,"line":707},[52,2324,729],{"class":58},[52,2326,2328,2330,2332],{"class":54,"line":2327},15,[52,2329,121],{"class":58},[52,2331,2253],{"class":62},[52,2333,77],{"class":58},[43,2335,2337],{"className":360,"code":2336,"language":362,"meta":48,"style":48},"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",[31,2338,2339,2351,2355,2364,2394,2398,2406,2413,2436,2467,2472,2487,2496,2501],{"__ignoreMap":48},[52,2340,2341,2343,2346,2348],{"class":54,"line":55},[52,2342,232],{"class":231},[52,2344,2345],{"class":58}," { useState } ",[52,2347,238],{"class":231},[52,2349,2350],{"class":73}," 'react'\n",[52,2352,2353],{"class":54,"line":80},[52,2354,597],{"emptyLinePlaceholder":171},[52,2356,2357,2359,2362],{"class":54,"line":108},[52,2358,2304],{"class":231},[52,2360,2361],{"class":66}," App",[52,2363,2310],{"class":58},[52,2365,2366,2369,2372,2375,2377,2380,2383,2385,2388,2390,2392],{"class":54,"line":118},[52,2367,2368],{"class":231}," const",[52,2370,2371],{"class":58}," [",[52,2373,2374],{"class":371},"visible",[52,2376,1881],{"class":58},[52,2378,2379],{"class":371},"setVisible",[52,2381,2382],{"class":58},"] ",[52,2384,70],{"class":231},[52,2386,2387],{"class":66}," useState",[52,2389,2289],{"class":58},[52,2391,2292],{"class":371},[52,2393,2295],{"class":58},[52,2395,2396],{"class":54,"line":594},[52,2397,597],{"emptyLinePlaceholder":171},[52,2399,2400,2403],{"class":54,"line":600},[52,2401,2402],{"class":231}," return",[52,2404,2405],{"class":58}," (\n",[52,2407,2408,2410],{"class":54,"line":606},[52,2409,2213],{"class":58},[52,2411,2412],{"class":371},"Shader\n",[52,2414,2415,2418,2420,2423,2426,2429,2431,2433],{"class":54,"line":653},[52,2416,2417],{"class":66}," onReady",[52,2419,70],{"class":231},[52,2421,2422],{"class":58},"{() ",[52,2424,2425],{"class":231},"=>",[52,2427,2428],{"class":66}," setVisible",[52,2430,2289],{"class":58},[52,2432,1996],{"class":371},[52,2434,2435],{"class":58},")}\n",[52,2437,2438,2441,2443,2446,2449,2452,2455,2458,2461,2464],{"class":54,"line":662},[52,2439,2440],{"class":66}," style",[52,2442,70],{"class":231},[52,2444,2445],{"class":58},"{{ opacity: visible ",[52,2447,2448],{"class":231},"?",[52,2450,2451],{"class":371}," 1",[52,2453,2454],{"class":231}," :",[52,2456,2457],{"class":371}," 0",[52,2459,2460],{"class":58},", transition: ",[52,2462,2463],{"class":73},"'opacity 0.5s'",[52,2465,2466],{"class":58}," }}\n",[52,2468,2469],{"class":54,"line":671},[52,2470,2471],{"class":58}," >\n",[52,2473,2474,2477,2479,2481,2483,2485],{"class":54,"line":676},[52,2475,2476],{"class":58}," \u003C",[52,2478,2216],{"class":371},[52,2480,1574],{"class":66},[52,2482,70],{"class":231},[52,2484,2223],{"class":73},[52,2486,105],{"class":58},[52,2488,2489,2492,2494],{"class":54,"line":682},[52,2490,2491],{"class":58}," \u003C/",[52,2493,63],{"class":371},[52,2495,77],{"class":58},[52,2497,2498],{"class":54,"line":698},[52,2499,2500],{"class":58}," )\n",[52,2502,2503],{"class":54,"line":707},[52,2504,729],{"class":58},[43,2506,2510],{"className":2507,"code":2508,"language":2509,"meta":48,"style":48},"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",[31,2511,2512,2520,2542,2550,2554,2612,2626],{"__ignoreMap":48},[52,2513,2514,2516,2518],{"class":54,"line":55},[52,2515,59],{"class":58},[52,2517,2253],{"class":62},[52,2519,77],{"class":58},[52,2521,2522,2525,2528,2530,2533,2536,2538,2540],{"class":54,"line":80},[52,2523,2524],{"class":231}," let",[52,2526,2527],{"class":58}," visible ",[52,2529,70],{"class":231},[52,2531,2532],{"class":58}," $",[52,2534,2535],{"class":66},"state",[52,2537,2289],{"class":58},[52,2539,2292],{"class":371},[52,2541,2295],{"class":58},[52,2543,2544,2546,2548],{"class":54,"line":108},[52,2545,121],{"class":58},[52,2547,2253],{"class":62},[52,2549,77],{"class":58},[52,2551,2552],{"class":54,"line":118},[52,2553,597],{"emptyLinePlaceholder":171},[52,2555,2556,2558,2560,2563,2566,2568,2570,2572,2575,2578,2580,2582,2585,2588,2590,2592,2594,2596,2598,2600,2602,2605,2607,2610],{"class":54,"line":594},[52,2557,59],{"class":58},[52,2559,63],{"class":371},[52,2561,2562],{"class":66}," onready",[52,2564,2565],{"class":58},"={() ",[52,2567,2425],{"class":231},[52,2569,2527],{"class":58},[52,2571,70],{"class":231},[52,2573,2574],{"class":371}," true",[52,2576,2577],{"class":58},"} ",[52,2579,156],{"class":66},[52,2581,1540],{"class":58},[52,2583,2584],{"class":371},"opacity",[52,2586,2587],{"class":58},"={visible ",[52,2589,2448],{"class":231},[52,2591,2451],{"class":371},[52,2593,2454],{"class":231},[52,2595,2457],{"class":371},[52,2597,2577],{"class":58},[52,2599,156],{"class":66},[52,2601,1540],{"class":58},[52,2603,2604],{"class":371},"transition",[52,2606,70],{"class":58},[52,2608,2609],{"class":73},"\"opacity 0.5s\"",[52,2611,77],{"class":58},[52,2613,2614,2616,2618,2620,2622,2624],{"class":54,"line":600},[52,2615,83],{"class":58},[52,2617,2216],{"class":371},[52,2619,1574],{"class":66},[52,2621,70],{"class":58},[52,2623,2223],{"class":73},[52,2625,105],{"class":58},[52,2627,2628,2630,2632],{"class":54,"line":606},[52,2629,121],{"class":58},[52,2631,63],{"class":371},[52,2633,77],{"class":58},[43,2635,2637],{"className":419,"code":2636,"language":420,"meta":48,"style":48},"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",[31,2638,2639,2651,2655,2663,2688,2692,2698,2704,2722,2750,2754,2768,2776,2780],{"__ignoreMap":48},[52,2640,2641,2643,2646,2648],{"class":54,"line":55},[52,2642,232],{"class":231},[52,2644,2645],{"class":58}," { createSignal } ",[52,2647,238],{"class":231},[52,2649,2650],{"class":73}," 'solid-js'\n",[52,2652,2653],{"class":54,"line":80},[52,2654,597],{"emptyLinePlaceholder":171},[52,2656,2657,2659,2661],{"class":54,"line":108},[52,2658,2304],{"class":231},[52,2660,2361],{"class":66},[52,2662,2310],{"class":58},[52,2664,2665,2667,2669,2671,2673,2675,2677,2679,2682,2684,2686],{"class":54,"line":118},[52,2666,2368],{"class":231},[52,2668,2371],{"class":58},[52,2670,2374],{"class":371},[52,2672,1881],{"class":58},[52,2674,2379],{"class":371},[52,2676,2382],{"class":58},[52,2678,70],{"class":231},[52,2680,2681],{"class":66}," createSignal",[52,2683,2289],{"class":58},[52,2685,2292],{"class":371},[52,2687,2295],{"class":58},[52,2689,2690],{"class":54,"line":594},[52,2691,597],{"emptyLinePlaceholder":171},[52,2693,2694,2696],{"class":54,"line":600},[52,2695,2402],{"class":231},[52,2697,2405],{"class":58},[52,2699,2700,2702],{"class":54,"line":606},[52,2701,2213],{"class":58},[52,2703,2412],{"class":371},[52,2705,2706,2708,2710,2712,2714,2716,2718,2720],{"class":54,"line":653},[52,2707,2417],{"class":66},[52,2709,70],{"class":231},[52,2711,2422],{"class":58},[52,2713,2425],{"class":231},[52,2715,2428],{"class":66},[52,2717,2289],{"class":58},[52,2719,1996],{"class":371},[52,2721,2435],{"class":58},[52,2723,2724,2726,2728,2731,2733,2736,2738,2740,2742,2744,2746,2748],{"class":54,"line":662},[52,2725,2440],{"class":66},[52,2727,70],{"class":231},[52,2729,2730],{"class":58},"{{ opacity: ",[52,2732,2374],{"class":66},[52,2734,2735],{"class":58},"() ",[52,2737,2448],{"class":231},[52,2739,2451],{"class":371},[52,2741,2454],{"class":231},[52,2743,2457],{"class":371},[52,2745,2460],{"class":58},[52,2747,2463],{"class":73},[52,2749,2466],{"class":58},[52,2751,2752],{"class":54,"line":671},[52,2753,2471],{"class":58},[52,2755,2756,2758,2760,2762,2764,2766],{"class":54,"line":676},[52,2757,2476],{"class":58},[52,2759,2216],{"class":371},[52,2761,1574],{"class":66},[52,2763,70],{"class":231},[52,2765,2223],{"class":73},[52,2767,105],{"class":58},[52,2769,2770,2772,2774],{"class":54,"line":682},[52,2771,2491],{"class":58},[52,2773,63],{"class":371},[52,2775,77],{"class":58},[52,2777,2778],{"class":54,"line":698},[52,2779,2500],{"class":58},[52,2781,2782],{"class":54,"line":707},[52,2783,729],{"class":58},[43,2785,2788],{"className":2786,"code":2787,"language":1508,"meta":48,"style":48},"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",[31,2789,2790,2812,2816,2821,2831,2841,2845,2859,2863,2883,2887,2892,2905,2915,2920],{"__ignoreMap":48},[52,2791,2792,2794,2797,2799,2802,2805,2807,2810],{"class":54,"line":55},[52,2793,1721],{"class":231},[52,2795,2796],{"class":371}," canvas",[52,2798,1727],{"class":231},[52,2800,2801],{"class":58}," document.",[52,2803,2804],{"class":66},"getElementById",[52,2806,2289],{"class":58},[52,2808,2809],{"class":73},"'my-canvas'",[52,2811,2295],{"class":58},[52,2813,2814],{"class":54,"line":80},[52,2815,597],{"emptyLinePlaceholder":171},[52,2817,2818],{"class":54,"line":108},[52,2819,2820],{"class":559},"// Start hidden\n",[52,2822,2823,2826,2828],{"class":54,"line":118},[52,2824,2825],{"class":58},"canvas.style.opacity ",[52,2827,70],{"class":231},[52,2829,2830],{"class":73}," '0'\n",[52,2832,2833,2836,2838],{"class":54,"line":594},[52,2834,2835],{"class":58},"canvas.style.transition ",[52,2837,70],{"class":231},[52,2839,2840],{"class":73}," 'opacity 0.5s'\n",[52,2842,2843],{"class":54,"line":600},[52,2844,597],{"emptyLinePlaceholder":171},[52,2846,2847,2849,2851,2853,2855,2857],{"class":54,"line":606},[52,2848,1721],{"class":231},[52,2850,1724],{"class":371},[52,2852,1727],{"class":231},[52,2854,1730],{"class":231},[52,2856,1733],{"class":66},[52,2858,1736],{"class":58},[52,2860,2861],{"class":54,"line":653},[52,2862,1751],{"class":58},[52,2864,2865,2867,2870,2873,2876,2878,2881],{"class":54,"line":662},[52,2866,1756],{"class":58},[52,2868,2869],{"class":73},"'Circle'",[52,2871,2872],{"class":58},", id: ",[52,2874,2875],{"class":73},"'c1'",[52,2877,1762],{"class":58},[52,2879,2880],{"class":73},"'#ff0088'",[52,2882,1768],{"class":58},[52,2884,2885],{"class":54,"line":671},[52,2886,1773],{"class":58},[52,2888,2889],{"class":54,"line":676},[52,2890,2891],{"class":58},"}, {\n",[52,2893,2894,2897,2900,2902],{"class":54,"line":682},[52,2895,2896],{"class":66}," onReady",[52,2898,2899],{"class":58},": () ",[52,2901,2425],{"class":231},[52,2903,2904],{"class":58}," {\n",[52,2906,2907,2910,2912],{"class":54,"line":698},[52,2908,2909],{"class":58}," canvas.style.opacity ",[52,2911,70],{"class":231},[52,2913,2914],{"class":73}," '1'\n",[52,2916,2917],{"class":54,"line":707},[52,2918,2919],{"class":58}," }\n",[52,2921,2922],{"class":54,"line":2327},[52,2923,1778],{"class":58},[2925,2926,2928],"h3",{"id":2927},"timing","Timing",[15,2930,2931,2933],{},[31,2932,2163],{}," fires after the shader's node tree has been compiled into a GPU material and is actively rendering. This means:",[1465,2935,2936,2939,2942,2945],{},[1468,2937,2938],{},"The WebGPU (or WebGL fallback) renderer is initialized",[1468,2940,2941],{},"All child shader components have registered",[1468,2943,2944],{},"The composed shader material has been compiled",[1468,2946,2947],{},"The first frame is ready to display",[15,2949,2950,2951,2954],{},"The callback fires ",[151,2952,2953],{},"once"," per shader lifecycle. If the component is unmounted and remounted, it will fire again after recompilation.",[2925,2956,2958],{"id":2957},"notes","Notes",[1465,2960,2961,2966],{},[1468,2962,2963,2965],{},[31,2964,2163],{}," is called asynchronously (via microtask) so the rendered frame is available by the time your callback executes",[1468,2967,2968,2969,2971,2972,2974],{},"If the ",[31,2970,33],{}," component starts off-screen and initializes lazily when scrolled into view, ",[31,2973,2163],{}," fires after that deferred initialization completes",[156,2976,2977],{},"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":48,"searchDepth":80,"depth":80,"links":2979},[2980],{"id":2162,"depth":80,"text":2163,"children":2981},[2982,2983],{"id":2927,"depth":108,"text":2928},{"id":2957,"depth":108,"text":2958},"Respond to shader lifecycle events like GPU compilation and readiness","bell",{},"/docs/guide/hooks-events",{"title":2151,"description":2984},"docs/guide/12.hooks-events","1Y2jpJZEZftP0XGdQIJZp6OiLZNuAsGn_NFeBRn2GhU",{"id":2992,"title":1473,"body":2993,"category":165,"description":4465,"exclude":167,"extension":168,"forceFramework":167,"icon":4466,"meta":4467,"navigation":171,"path":1472,"seo":4468,"stem":4469,"__hash__":4470},"guide/docs/guide/2.composing-effects.md",{"type":8,"value":2994,"toc":4461},[2995,2998,3004,3008,3015,3459,3462,3466,3484,3906,3909,3918,4455,4458],[11,2996,1473],{"id":2997},"composing-effects",[15,2999,3000,3001,3003],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[31,3002,33],{}," component is the root of your effect. Every instance of this renders its own GPU canvas. Visual output is created by stacking child components.",[23,3005,3007],{"id":3006},"stacking-components","Stacking Components",[15,3009,3010,3011,3014],{},"Components are evaluated ",[151,3012,3013],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[217,3016,3017,3100,3197,3287,3377],{":tabs":1543},[43,3018,3020],{"className":45,"code":3019,"language":47,"meta":48,"style":48},"\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",[31,3021,3022,3030,3035,3043,3047,3052,3074,3078,3083,3092],{"__ignoreMap":48},[52,3023,3024,3026,3028],{"class":54,"line":55},[52,3025,59],{"class":58},[52,3027,63],{"class":62},[52,3029,77],{"class":58},[52,3031,3032],{"class":54,"line":80},[52,3033,3034],{"class":559}," \u003C!-- Bottom layer -->\n",[52,3036,3037,3039,3041],{"class":54,"line":108},[52,3038,83],{"class":58},[52,3040,86],{"class":62},[52,3042,105],{"class":58},[52,3044,3045],{"class":54,"line":118},[52,3046,597],{"emptyLinePlaceholder":171},[52,3048,3049],{"class":54,"line":594},[52,3050,3051],{"class":559}," \u003C!-- Middle layer -->\n",[52,3053,3054,3056,3058,3060,3062,3064,3067,3069,3072],{"class":54,"line":600},[52,3055,83],{"class":58},[52,3057,2216],{"class":62},[52,3059,1574],{"class":66},[52,3061,70],{"class":58},[52,3063,2223],{"class":73},[52,3065,3066],{"class":66}," radius",[52,3068,70],{"class":58},[52,3070,3071],{"class":73},"\"0.8\"",[52,3073,105],{"class":58},[52,3075,3076],{"class":54,"line":606},[52,3077,597],{"emptyLinePlaceholder":171},[52,3079,3080],{"class":54,"line":653},[52,3081,3082],{"class":559}," \u003C!-- Top layer -->\n",[52,3084,3085,3087,3090],{"class":54,"line":662},[52,3086,83],{"class":58},[52,3088,3089],{"class":62},"GlassTiles",[52,3091,105],{"class":58},[52,3093,3094,3096,3098],{"class":54,"line":671},[52,3095,121],{"class":58},[52,3097,63],{"class":62},[52,3099,77],{"class":58},[43,3101,3103],{"className":360,"code":3102,"language":362,"meta":48,"style":48},"\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",[31,3104,3105,3113,3123,3131,3135,3144,3168,3172,3181,3189],{"__ignoreMap":48},[52,3106,3107,3109,3111],{"class":54,"line":55},[52,3108,59],{"class":58},[52,3110,63],{"class":371},[52,3112,77],{"class":58},[52,3114,3115,3118,3121],{"class":54,"line":80},[52,3116,3117],{"class":58}," {",[52,3119,3120],{"class":559},"/* Bottom layer */",[52,3122,729],{"class":58},[52,3124,3125,3127,3129],{"class":54,"line":108},[52,3126,83],{"class":58},[52,3128,86],{"class":371},[52,3130,105],{"class":58},[52,3132,3133],{"class":54,"line":118},[52,3134,597],{"emptyLinePlaceholder":171},[52,3136,3137,3139,3142],{"class":54,"line":594},[52,3138,3117],{"class":58},[52,3140,3141],{"class":559},"/* Middle layer */",[52,3143,729],{"class":58},[52,3145,3146,3148,3150,3152,3154,3156,3158,3160,3162,3165],{"class":54,"line":600},[52,3147,83],{"class":58},[52,3149,2216],{"class":371},[52,3151,1574],{"class":66},[52,3153,70],{"class":231},[52,3155,2223],{"class":73},[52,3157,3066],{"class":66},[52,3159,70],{"class":231},[52,3161,723],{"class":58},[52,3163,3164],{"class":371},"0.8",[52,3166,3167],{"class":58},"} />\n",[52,3169,3170],{"class":54,"line":606},[52,3171,597],{"emptyLinePlaceholder":171},[52,3173,3174,3176,3179],{"class":54,"line":653},[52,3175,3117],{"class":58},[52,3177,3178],{"class":559},"/* Top layer */",[52,3180,729],{"class":58},[52,3182,3183,3185,3187],{"class":54,"line":662},[52,3184,83],{"class":58},[52,3186,3089],{"class":371},[52,3188,105],{"class":58},[52,3190,3191,3193,3195],{"class":54,"line":671},[52,3192,121],{"class":58},[52,3194,63],{"class":371},[52,3196,77],{"class":58},[43,3198,3199],{"className":419,"code":3102,"language":420,"meta":48,"style":48},[31,3200,3201,3209,3217,3225,3229,3237,3259,3263,3271,3279],{"__ignoreMap":48},[52,3202,3203,3205,3207],{"class":54,"line":55},[52,3204,59],{"class":58},[52,3206,63],{"class":371},[52,3208,77],{"class":58},[52,3210,3211,3213,3215],{"class":54,"line":80},[52,3212,3117],{"class":58},[52,3214,3120],{"class":559},[52,3216,729],{"class":58},[52,3218,3219,3221,3223],{"class":54,"line":108},[52,3220,83],{"class":58},[52,3222,86],{"class":371},[52,3224,105],{"class":58},[52,3226,3227],{"class":54,"line":118},[52,3228,597],{"emptyLinePlaceholder":171},[52,3230,3231,3233,3235],{"class":54,"line":594},[52,3232,3117],{"class":58},[52,3234,3141],{"class":559},[52,3236,729],{"class":58},[52,3238,3239,3241,3243,3245,3247,3249,3251,3253,3255,3257],{"class":54,"line":600},[52,3240,83],{"class":58},[52,3242,2216],{"class":371},[52,3244,1574],{"class":66},[52,3246,70],{"class":231},[52,3248,2223],{"class":73},[52,3250,3066],{"class":66},[52,3252,70],{"class":231},[52,3254,723],{"class":58},[52,3256,3164],{"class":371},[52,3258,3167],{"class":58},[52,3260,3261],{"class":54,"line":606},[52,3262,597],{"emptyLinePlaceholder":171},[52,3264,3265,3267,3269],{"class":54,"line":653},[52,3266,3117],{"class":58},[52,3268,3178],{"class":559},[52,3270,729],{"class":58},[52,3272,3273,3275,3277],{"class":54,"line":662},[52,3274,83],{"class":58},[52,3276,3089],{"class":371},[52,3278,105],{"class":58},[52,3280,3281,3283,3285],{"class":54,"line":671},[52,3282,121],{"class":58},[52,3284,63],{"class":371},[52,3286,77],{"class":58},[43,3288,3289],{"className":419,"code":3102,"language":420,"meta":48,"style":48},[31,3290,3291,3299,3307,3315,3319,3327,3349,3353,3361,3369],{"__ignoreMap":48},[52,3292,3293,3295,3297],{"class":54,"line":55},[52,3294,59],{"class":58},[52,3296,63],{"class":371},[52,3298,77],{"class":58},[52,3300,3301,3303,3305],{"class":54,"line":80},[52,3302,3117],{"class":58},[52,3304,3120],{"class":559},[52,3306,729],{"class":58},[52,3308,3309,3311,3313],{"class":54,"line":108},[52,3310,83],{"class":58},[52,3312,86],{"class":371},[52,3314,105],{"class":58},[52,3316,3317],{"class":54,"line":118},[52,3318,597],{"emptyLinePlaceholder":171},[52,3320,3321,3323,3325],{"class":54,"line":594},[52,3322,3117],{"class":58},[52,3324,3141],{"class":559},[52,3326,729],{"class":58},[52,3328,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347],{"class":54,"line":600},[52,3330,83],{"class":58},[52,3332,2216],{"class":371},[52,3334,1574],{"class":66},[52,3336,70],{"class":231},[52,3338,2223],{"class":73},[52,3340,3066],{"class":66},[52,3342,70],{"class":231},[52,3344,723],{"class":58},[52,3346,3164],{"class":371},[52,3348,3167],{"class":58},[52,3350,3351],{"class":54,"line":606},[52,3352,597],{"emptyLinePlaceholder":171},[52,3354,3355,3357,3359],{"class":54,"line":653},[52,3356,3117],{"class":58},[52,3358,3178],{"class":559},[52,3360,729],{"class":58},[52,3362,3363,3365,3367],{"class":54,"line":662},[52,3364,83],{"class":58},[52,3366,3089],{"class":371},[52,3368,105],{"class":58},[52,3370,3371,3373,3375],{"class":54,"line":671},[52,3372,121],{"class":58},[52,3374,63],{"class":371},[52,3376,77],{"class":58},[43,3378,3380],{"className":222,"code":3379,"language":224,"meta":48,"style":48},"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",[31,3381,3382,3396,3400,3405,3414,3419,3437,3442,3451,3455],{"__ignoreMap":48},[52,3383,3384,3386,3388,3390,3392,3394],{"class":54,"line":55},[52,3385,1721],{"class":231},[52,3387,1724],{"class":371},[52,3389,1727],{"class":231},[52,3391,1730],{"class":231},[52,3393,1733],{"class":66},[52,3395,1736],{"class":58},[52,3397,3398],{"class":54,"line":80},[52,3399,1751],{"class":58},[52,3401,3402],{"class":54,"line":108},[52,3403,3404],{"class":559}," // Bottom layer\n",[52,3406,3407,3409,3411],{"class":54,"line":118},[52,3408,1756],{"class":58},[52,3410,2126],{"class":73},[52,3412,3413],{"class":58},", props: {} },\n",[52,3415,3416],{"class":54,"line":594},[52,3417,3418],{"class":559}," // Middle layer\n",[52,3420,3421,3423,3425,3427,3429,3432,3434],{"class":54,"line":600},[52,3422,1756],{"class":58},[52,3424,2869],{"class":73},[52,3426,1762],{"class":58},[52,3428,2880],{"class":73},[52,3430,3431],{"class":58},", radius: ",[52,3433,3164],{"class":371},[52,3435,3436],{"class":58}," } },\n",[52,3438,3439],{"class":54,"line":606},[52,3440,3441],{"class":559}," // Top layer\n",[52,3443,3444,3446,3449],{"class":54,"line":653},[52,3445,1756],{"class":58},[52,3447,3448],{"class":73},"'GlassTiles'",[52,3450,2129],{"class":58},[52,3452,3453],{"class":54,"line":662},[52,3454,1773],{"class":58},[52,3456,3457],{"class":54,"line":671},[52,3458,1778],{"class":58},[19,3460],{":preset":3461},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,3463,3465],{"id":3464},"nesting-components","Nesting Components",[15,3467,3468,3469,3472,3473,3476,3477,3480,3481,3483],{},"Notice how the ",[31,3470,3471],{},"\u003CGlassTiles>"," component in the above example applies to all proceeding sibling components. If you wanted to ",[1833,3474,3475],{},"only"," apply glass tiles to the ",[31,3478,3479],{},"\u003CCircle>"," component, you can nest it inside the ",[31,3482,3471],{}," component:",[217,3485,3486,3565,3654,3740,3826],{":tabs":1543},[43,3487,3489],{"className":45,"code":3488,"language":47,"meta":48,"style":48},"\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",[31,3490,3491,3499,3504,3512,3516,3521,3529,3549,3557],{"__ignoreMap":48},[52,3492,3493,3495,3497],{"class":54,"line":55},[52,3494,59],{"class":58},[52,3496,63],{"class":62},[52,3498,77],{"class":58},[52,3500,3501],{"class":54,"line":80},[52,3502,3503],{"class":559}," \u003C!-- This gradient is NOT affected -->\n",[52,3505,3506,3508,3510],{"class":54,"line":108},[52,3507,83],{"class":58},[52,3509,86],{"class":62},[52,3511,105],{"class":58},[52,3513,3514],{"class":54,"line":118},[52,3515,597],{"emptyLinePlaceholder":171},[52,3517,3518],{"class":54,"line":594},[52,3519,3520],{"class":559}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[52,3522,3523,3525,3527],{"class":54,"line":600},[52,3524,83],{"class":58},[52,3526,3089],{"class":62},[52,3528,77],{"class":58},[52,3530,3531,3533,3535,3537,3539,3541,3543,3545,3547],{"class":54,"line":606},[52,3532,2213],{"class":58},[52,3534,2216],{"class":62},[52,3536,1574],{"class":66},[52,3538,70],{"class":58},[52,3540,2223],{"class":73},[52,3542,3066],{"class":66},[52,3544,70],{"class":58},[52,3546,3071],{"class":73},[52,3548,105],{"class":58},[52,3550,3551,3553,3555],{"class":54,"line":653},[52,3552,2230],{"class":58},[52,3554,3089],{"class":62},[52,3556,77],{"class":58},[52,3558,3559,3561,3563],{"class":54,"line":662},[52,3560,121],{"class":58},[52,3562,63],{"class":62},[52,3564,77],{"class":58},[43,3566,3568],{"className":360,"code":3567,"language":362,"meta":48,"style":48},"\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",[31,3569,3570,3578,3587,3595,3599,3608,3616,3638,3646],{"__ignoreMap":48},[52,3571,3572,3574,3576],{"class":54,"line":55},[52,3573,59],{"class":58},[52,3575,63],{"class":371},[52,3577,77],{"class":58},[52,3579,3580,3582,3585],{"class":54,"line":80},[52,3581,3117],{"class":58},[52,3583,3584],{"class":559},"/* This gradient is NOT affected */",[52,3586,729],{"class":58},[52,3588,3589,3591,3593],{"class":54,"line":108},[52,3590,83],{"class":58},[52,3592,86],{"class":371},[52,3594,105],{"class":58},[52,3596,3597],{"class":54,"line":118},[52,3598,597],{"emptyLinePlaceholder":171},[52,3600,3601,3603,3606],{"class":54,"line":594},[52,3602,3117],{"class":58},[52,3604,3605],{"class":559},"/* Only the Circle inside has glass tiles applied */",[52,3607,729],{"class":58},[52,3609,3610,3612,3614],{"class":54,"line":600},[52,3611,83],{"class":58},[52,3613,3089],{"class":371},[52,3615,77],{"class":58},[52,3617,3618,3620,3622,3624,3626,3628,3630,3632,3634,3636],{"class":54,"line":606},[52,3619,2213],{"class":58},[52,3621,2216],{"class":371},[52,3623,1574],{"class":66},[52,3625,70],{"class":231},[52,3627,2223],{"class":73},[52,3629,3066],{"class":66},[52,3631,70],{"class":231},[52,3633,723],{"class":58},[52,3635,3164],{"class":371},[52,3637,3167],{"class":58},[52,3639,3640,3642,3644],{"class":54,"line":653},[52,3641,2230],{"class":58},[52,3643,3089],{"class":371},[52,3645,77],{"class":58},[52,3647,3648,3650,3652],{"class":54,"line":662},[52,3649,121],{"class":58},[52,3651,63],{"class":371},[52,3653,77],{"class":58},[43,3655,3656],{"className":419,"code":3567,"language":420,"meta":48,"style":48},[31,3657,3658,3666,3674,3682,3686,3694,3702,3724,3732],{"__ignoreMap":48},[52,3659,3660,3662,3664],{"class":54,"line":55},[52,3661,59],{"class":58},[52,3663,63],{"class":371},[52,3665,77],{"class":58},[52,3667,3668,3670,3672],{"class":54,"line":80},[52,3669,3117],{"class":58},[52,3671,3584],{"class":559},[52,3673,729],{"class":58},[52,3675,3676,3678,3680],{"class":54,"line":108},[52,3677,83],{"class":58},[52,3679,86],{"class":371},[52,3681,105],{"class":58},[52,3683,3684],{"class":54,"line":118},[52,3685,597],{"emptyLinePlaceholder":171},[52,3687,3688,3690,3692],{"class":54,"line":594},[52,3689,3117],{"class":58},[52,3691,3605],{"class":559},[52,3693,729],{"class":58},[52,3695,3696,3698,3700],{"class":54,"line":600},[52,3697,83],{"class":58},[52,3699,3089],{"class":371},[52,3701,77],{"class":58},[52,3703,3704,3706,3708,3710,3712,3714,3716,3718,3720,3722],{"class":54,"line":606},[52,3705,2213],{"class":58},[52,3707,2216],{"class":371},[52,3709,1574],{"class":66},[52,3711,70],{"class":231},[52,3713,2223],{"class":73},[52,3715,3066],{"class":66},[52,3717,70],{"class":231},[52,3719,723],{"class":58},[52,3721,3164],{"class":371},[52,3723,3167],{"class":58},[52,3725,3726,3728,3730],{"class":54,"line":653},[52,3727,2230],{"class":58},[52,3729,3089],{"class":371},[52,3731,77],{"class":58},[52,3733,3734,3736,3738],{"class":54,"line":662},[52,3735,121],{"class":58},[52,3737,63],{"class":371},[52,3739,77],{"class":58},[43,3741,3742],{"className":419,"code":3567,"language":420,"meta":48,"style":48},[31,3743,3744,3752,3760,3768,3772,3780,3788,3810,3818],{"__ignoreMap":48},[52,3745,3746,3748,3750],{"class":54,"line":55},[52,3747,59],{"class":58},[52,3749,63],{"class":371},[52,3751,77],{"class":58},[52,3753,3754,3756,3758],{"class":54,"line":80},[52,3755,3117],{"class":58},[52,3757,3584],{"class":559},[52,3759,729],{"class":58},[52,3761,3762,3764,3766],{"class":54,"line":108},[52,3763,83],{"class":58},[52,3765,86],{"class":371},[52,3767,105],{"class":58},[52,3769,3770],{"class":54,"line":118},[52,3771,597],{"emptyLinePlaceholder":171},[52,3773,3774,3776,3778],{"class":54,"line":594},[52,3775,3117],{"class":58},[52,3777,3605],{"class":559},[52,3779,729],{"class":58},[52,3781,3782,3784,3786],{"class":54,"line":600},[52,3783,83],{"class":58},[52,3785,3089],{"class":371},[52,3787,77],{"class":58},[52,3789,3790,3792,3794,3796,3798,3800,3802,3804,3806,3808],{"class":54,"line":606},[52,3791,2213],{"class":58},[52,3793,2216],{"class":371},[52,3795,1574],{"class":66},[52,3797,70],{"class":231},[52,3799,2223],{"class":73},[52,3801,3066],{"class":66},[52,3803,70],{"class":231},[52,3805,723],{"class":58},[52,3807,3164],{"class":371},[52,3809,3167],{"class":58},[52,3811,3812,3814,3816],{"class":54,"line":653},[52,3813,2230],{"class":58},[52,3815,3089],{"class":371},[52,3817,77],{"class":58},[52,3819,3820,3822,3824],{"class":54,"line":662},[52,3821,121],{"class":58},[52,3823,63],{"class":371},[52,3825,77],{"class":58},[43,3827,3829],{"className":222,"code":3828,"language":224,"meta":48,"style":48},"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",[31,3830,3831,3845,3849,3854,3862,3867,3876,3893,3898,3902],{"__ignoreMap":48},[52,3832,3833,3835,3837,3839,3841,3843],{"class":54,"line":55},[52,3834,1721],{"class":231},[52,3836,1724],{"class":371},[52,3838,1727],{"class":231},[52,3840,1730],{"class":231},[52,3842,1733],{"class":66},[52,3844,1736],{"class":58},[52,3846,3847],{"class":54,"line":80},[52,3848,1751],{"class":58},[52,3850,3851],{"class":54,"line":108},[52,3852,3853],{"class":559}," // This gradient is NOT affected\n",[52,3855,3856,3858,3860],{"class":54,"line":118},[52,3857,1756],{"class":58},[52,3859,2126],{"class":73},[52,3861,3413],{"class":58},[52,3863,3864],{"class":54,"line":594},[52,3865,3866],{"class":559}," // Only the Circle inside has glass tiles applied\n",[52,3868,3869,3871,3873],{"class":54,"line":600},[52,3870,1756],{"class":58},[52,3872,3448],{"class":73},[52,3874,3875],{"class":58},", props: {}, children: [\n",[52,3877,3878,3881,3883,3885,3887,3889,3891],{"class":54,"line":606},[52,3879,3880],{"class":58}," { type: ",[52,3882,2869],{"class":73},[52,3884,1762],{"class":58},[52,3886,2880],{"class":73},[52,3888,3431],{"class":58},[52,3890,3164],{"class":371},[52,3892,1768],{"class":58},[52,3894,3895],{"class":54,"line":653},[52,3896,3897],{"class":58}," ]}\n",[52,3899,3900],{"class":54,"line":662},[52,3901,1773],{"class":58},[52,3903,3904],{"class":54,"line":671},[52,3905,1778],{"class":58},[19,3907],{":preset":3908},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,3910,3911,3912,3914,3915,3917],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[31,3913,86],{},") don't accept children, whereas components that apply effects (such as ",[31,3916,3089],{},") do. The component reference in this documentation shows if the particular component accepts children.",[217,3919,3920,4023,4137,4247,4357],{":tabs":1543},[43,3921,3923],{"className":45,"code":3922,"language":47,"meta":48,"style":48},"\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/GlassTiles>\n \u003C/GridDistortion>\n\u003C/Shader>\n",[31,3924,3925,3933,3938,3946,3950,3955,3971,3979,3999,4007,4015],{"__ignoreMap":48},[52,3926,3927,3929,3931],{"class":54,"line":55},[52,3928,59],{"class":58},[52,3930,63],{"class":62},[52,3932,77],{"class":58},[52,3934,3935],{"class":54,"line":80},[52,3936,3937],{"class":559}," \u003C!-- Unaffected -->\n",[52,3939,3940,3942,3944],{"class":54,"line":108},[52,3941,83],{"class":58},[52,3943,86],{"class":62},[52,3945,105],{"class":58},[52,3947,3948],{"class":54,"line":118},[52,3949,597],{"emptyLinePlaceholder":171},[52,3951,3952],{"class":54,"line":594},[52,3953,3954],{"class":559}," \u003C!-- Nested effects apply only to Circle -->\n",[52,3956,3957,3959,3962,3964,3966,3969],{"class":54,"line":600},[52,3958,83],{"class":58},[52,3960,3961],{"class":62},"GridDistortion",[52,3963,3066],{"class":66},[52,3965,70],{"class":58},[52,3967,3968],{"class":73},"\"2\"",[52,3970,77],{"class":58},[52,3972,3973,3975,3977],{"class":54,"line":606},[52,3974,2213],{"class":58},[52,3976,3089],{"class":62},[52,3978,77],{"class":58},[52,3980,3981,3983,3985,3987,3989,3991,3993,3995,3997],{"class":54,"line":653},[52,3982,2476],{"class":58},[52,3984,2216],{"class":62},[52,3986,1574],{"class":66},[52,3988,70],{"class":58},[52,3990,2223],{"class":73},[52,3992,3066],{"class":66},[52,3994,70],{"class":58},[52,3996,3071],{"class":73},[52,3998,105],{"class":58},[52,4000,4001,4003,4005],{"class":54,"line":662},[52,4002,2491],{"class":58},[52,4004,3089],{"class":62},[52,4006,77],{"class":58},[52,4008,4009,4011,4013],{"class":54,"line":671},[52,4010,2230],{"class":58},[52,4012,3961],{"class":62},[52,4014,77],{"class":58},[52,4016,4017,4019,4021],{"class":54,"line":676},[52,4018,121],{"class":58},[52,4020,63],{"class":62},[52,4022,77],{"class":58},[43,4024,4026],{"className":360,"code":4025,"language":362,"meta":48,"style":48},"\u003CShader>\n {/* Unaffected */}\n \u003CLinearGradient />\n\n {/* Nested effects apply only to Circle */}\n \u003CGridDistortion radius={2}>\n \u003CGlassTiles>\n \u003CCircle color=\"#ff0088\" radius={0.8} />\n \u003C/GlassTiles>\n \u003C/GridDistortion>\n\u003C/Shader>\n",[31,4027,4028,4036,4045,4053,4057,4066,4083,4091,4113,4121,4129],{"__ignoreMap":48},[52,4029,4030,4032,4034],{"class":54,"line":55},[52,4031,59],{"class":58},[52,4033,63],{"class":371},[52,4035,77],{"class":58},[52,4037,4038,4040,4043],{"class":54,"line":80},[52,4039,3117],{"class":58},[52,4041,4042],{"class":559},"/* Unaffected */",[52,4044,729],{"class":58},[52,4046,4047,4049,4051],{"class":54,"line":108},[52,4048,83],{"class":58},[52,4050,86],{"class":371},[52,4052,105],{"class":58},[52,4054,4055],{"class":54,"line":118},[52,4056,597],{"emptyLinePlaceholder":171},[52,4058,4059,4061,4064],{"class":54,"line":594},[52,4060,3117],{"class":58},[52,4062,4063],{"class":559},"/* Nested effects apply only to Circle */",[52,4065,729],{"class":58},[52,4067,4068,4070,4072,4074,4076,4078,4081],{"class":54,"line":600},[52,4069,83],{"class":58},[52,4071,3961],{"class":371},[52,4073,3066],{"class":66},[52,4075,70],{"class":231},[52,4077,723],{"class":58},[52,4079,4080],{"class":371},"2",[52,4082,1999],{"class":58},[52,4084,4085,4087,4089],{"class":54,"line":606},[52,4086,2213],{"class":58},[52,4088,3089],{"class":371},[52,4090,77],{"class":58},[52,4092,4093,4095,4097,4099,4101,4103,4105,4107,4109,4111],{"class":54,"line":653},[52,4094,2476],{"class":58},[52,4096,2216],{"class":371},[52,4098,1574],{"class":66},[52,4100,70],{"class":231},[52,4102,2223],{"class":73},[52,4104,3066],{"class":66},[52,4106,70],{"class":231},[52,4108,723],{"class":58},[52,4110,3164],{"class":371},[52,4112,3167],{"class":58},[52,4114,4115,4117,4119],{"class":54,"line":662},[52,4116,2491],{"class":58},[52,4118,3089],{"class":371},[52,4120,77],{"class":58},[52,4122,4123,4125,4127],{"class":54,"line":671},[52,4124,2230],{"class":58},[52,4126,3961],{"class":371},[52,4128,77],{"class":58},[52,4130,4131,4133,4135],{"class":54,"line":676},[52,4132,121],{"class":58},[52,4134,63],{"class":371},[52,4136,77],{"class":58},[43,4138,4139],{"className":419,"code":4025,"language":420,"meta":48,"style":48},[31,4140,4141,4149,4157,4165,4169,4177,4193,4201,4223,4231,4239],{"__ignoreMap":48},[52,4142,4143,4145,4147],{"class":54,"line":55},[52,4144,59],{"class":58},[52,4146,63],{"class":371},[52,4148,77],{"class":58},[52,4150,4151,4153,4155],{"class":54,"line":80},[52,4152,3117],{"class":58},[52,4154,4042],{"class":559},[52,4156,729],{"class":58},[52,4158,4159,4161,4163],{"class":54,"line":108},[52,4160,83],{"class":58},[52,4162,86],{"class":371},[52,4164,105],{"class":58},[52,4166,4167],{"class":54,"line":118},[52,4168,597],{"emptyLinePlaceholder":171},[52,4170,4171,4173,4175],{"class":54,"line":594},[52,4172,3117],{"class":58},[52,4174,4063],{"class":559},[52,4176,729],{"class":58},[52,4178,4179,4181,4183,4185,4187,4189,4191],{"class":54,"line":600},[52,4180,83],{"class":58},[52,4182,3961],{"class":371},[52,4184,3066],{"class":66},[52,4186,70],{"class":231},[52,4188,723],{"class":58},[52,4190,4080],{"class":371},[52,4192,1999],{"class":58},[52,4194,4195,4197,4199],{"class":54,"line":606},[52,4196,2213],{"class":58},[52,4198,3089],{"class":371},[52,4200,77],{"class":58},[52,4202,4203,4205,4207,4209,4211,4213,4215,4217,4219,4221],{"class":54,"line":653},[52,4204,2476],{"class":58},[52,4206,2216],{"class":371},[52,4208,1574],{"class":66},[52,4210,70],{"class":231},[52,4212,2223],{"class":73},[52,4214,3066],{"class":66},[52,4216,70],{"class":231},[52,4218,723],{"class":58},[52,4220,3164],{"class":371},[52,4222,3167],{"class":58},[52,4224,4225,4227,4229],{"class":54,"line":662},[52,4226,2491],{"class":58},[52,4228,3089],{"class":371},[52,4230,77],{"class":58},[52,4232,4233,4235,4237],{"class":54,"line":671},[52,4234,2230],{"class":58},[52,4236,3961],{"class":371},[52,4238,77],{"class":58},[52,4240,4241,4243,4245],{"class":54,"line":676},[52,4242,121],{"class":58},[52,4244,63],{"class":371},[52,4246,77],{"class":58},[43,4248,4249],{"className":419,"code":4025,"language":420,"meta":48,"style":48},[31,4250,4251,4259,4267,4275,4279,4287,4303,4311,4333,4341,4349],{"__ignoreMap":48},[52,4252,4253,4255,4257],{"class":54,"line":55},[52,4254,59],{"class":58},[52,4256,63],{"class":371},[52,4258,77],{"class":58},[52,4260,4261,4263,4265],{"class":54,"line":80},[52,4262,3117],{"class":58},[52,4264,4042],{"class":559},[52,4266,729],{"class":58},[52,4268,4269,4271,4273],{"class":54,"line":108},[52,4270,83],{"class":58},[52,4272,86],{"class":371},[52,4274,105],{"class":58},[52,4276,4277],{"class":54,"line":118},[52,4278,597],{"emptyLinePlaceholder":171},[52,4280,4281,4283,4285],{"class":54,"line":594},[52,4282,3117],{"class":58},[52,4284,4063],{"class":559},[52,4286,729],{"class":58},[52,4288,4289,4291,4293,4295,4297,4299,4301],{"class":54,"line":600},[52,4290,83],{"class":58},[52,4292,3961],{"class":371},[52,4294,3066],{"class":66},[52,4296,70],{"class":231},[52,4298,723],{"class":58},[52,4300,4080],{"class":371},[52,4302,1999],{"class":58},[52,4304,4305,4307,4309],{"class":54,"line":606},[52,4306,2213],{"class":58},[52,4308,3089],{"class":371},[52,4310,77],{"class":58},[52,4312,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331],{"class":54,"line":653},[52,4314,2476],{"class":58},[52,4316,2216],{"class":371},[52,4318,1574],{"class":66},[52,4320,70],{"class":231},[52,4322,2223],{"class":73},[52,4324,3066],{"class":66},[52,4326,70],{"class":231},[52,4328,723],{"class":58},[52,4330,3164],{"class":371},[52,4332,3167],{"class":58},[52,4334,4335,4337,4339],{"class":54,"line":662},[52,4336,2491],{"class":58},[52,4338,3089],{"class":371},[52,4340,77],{"class":58},[52,4342,4343,4345,4347],{"class":54,"line":671},[52,4344,2230],{"class":58},[52,4346,3961],{"class":371},[52,4348,77],{"class":58},[52,4350,4351,4353,4355],{"class":54,"line":676},[52,4352,121],{"class":58},[52,4354,63],{"class":371},[52,4356,77],{"class":58},[43,4358,4360],{"className":222,"code":4359,"language":224,"meta":48,"style":48},"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",[31,4361,4362,4376,4380,4385,4393,4398,4413,4421,4438,4443,4447,4451],{"__ignoreMap":48},[52,4363,4364,4366,4368,4370,4372,4374],{"class":54,"line":55},[52,4365,1721],{"class":231},[52,4367,1724],{"class":371},[52,4369,1727],{"class":231},[52,4371,1730],{"class":231},[52,4373,1733],{"class":66},[52,4375,1736],{"class":58},[52,4377,4378],{"class":54,"line":80},[52,4379,1751],{"class":58},[52,4381,4382],{"class":54,"line":108},[52,4383,4384],{"class":559}," // Unaffected\n",[52,4386,4387,4389,4391],{"class":54,"line":118},[52,4388,1756],{"class":58},[52,4390,2126],{"class":73},[52,4392,3413],{"class":58},[52,4394,4395],{"class":54,"line":594},[52,4396,4397],{"class":559}," // Nested effects apply only to Circle\n",[52,4399,4400,4402,4405,4408,4410],{"class":54,"line":600},[52,4401,1756],{"class":58},[52,4403,4404],{"class":73},"'GridDistortion'",[52,4406,4407],{"class":58},", props: { radius: ",[52,4409,4080],{"class":371},[52,4411,4412],{"class":58}," }, children: [\n",[52,4414,4415,4417,4419],{"class":54,"line":606},[52,4416,3880],{"class":58},[52,4418,3448],{"class":73},[52,4420,3875],{"class":58},[52,4422,4423,4426,4428,4430,4432,4434,4436],{"class":54,"line":653},[52,4424,4425],{"class":58}," { type: ",[52,4427,2869],{"class":73},[52,4429,1762],{"class":58},[52,4431,2880],{"class":73},[52,4433,3431],{"class":58},[52,4435,3164],{"class":371},[52,4437,1768],{"class":58},[52,4439,4440],{"class":54,"line":662},[52,4441,4442],{"class":58}," ]}\n",[52,4444,4445],{"class":54,"line":671},[52,4446,3897],{"class":58},[52,4448,4449],{"class":54,"line":676},[52,4450,1773],{"class":58},[52,4452,4453],{"class":54,"line":682},[52,4454,1778],{"class":58},[19,4456],{":preset":4457},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[156,4459,4460],{},"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":48,"searchDepth":80,"depth":80,"links":4462},[4463,4464],{"id":3006,"depth":80,"text":3007},{"id":3464,"depth":80,"text":3465},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1473,"description":4465},"docs/guide/2.composing-effects","5LYxb9Lo1q--M770AtDR45qeulw8wiudjDStJCjsgMk",{"id":4472,"title":4473,"body":4474,"category":7102,"description":7103,"exclude":167,"extension":168,"forceFramework":167,"icon":7104,"meta":7105,"navigation":171,"path":7106,"seo":7107,"stem":7108,"__hash__":7109},"guide/docs/guide/3.blending-masking.md","Blending & Masking",{"type":8,"value":4475,"toc":7092},[4476,4479,4482,4486,4497,4840,4843,4848,4944,4948,4951,5526,5529,5532,5546,5861,5864,5867,5871,5882,5904,5915,5919,5934,5940,6349,6352,6358,6362,6369,6403,7087,7090],[11,4477,4473],{"id":4478},"blending-masking",[15,4480,4481],{},"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.",[23,4483,4485],{"id":4484},"blend-modes","Blend Modes",[15,4487,4488,4489,4492,4493,4496],{},"Every component has a ",[31,4490,4491],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[31,4494,4495],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[217,4498,4499,4566,4639,4709,4779],{":tabs":1543},[43,4500,4502],{"className":45,"code":4501,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\n \u003C!-- Multiply darkens by multiplying colors -->\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" blendMode=\"multiply\" />\n\u003C/Shader>\n",[31,4503,4504,4512,4520,4524,4529,4558],{"__ignoreMap":48},[52,4505,4506,4508,4510],{"class":54,"line":55},[52,4507,59],{"class":58},[52,4509,63],{"class":62},[52,4511,77],{"class":58},[52,4513,4514,4516,4518],{"class":54,"line":80},[52,4515,83],{"class":58},[52,4517,86],{"class":62},[52,4519,105],{"class":58},[52,4521,4522],{"class":54,"line":108},[52,4523,597],{"emptyLinePlaceholder":171},[52,4525,4526],{"class":54,"line":118},[52,4527,4528],{"class":559}," \u003C!-- Multiply darkens by multiplying colors -->\n",[52,4530,4531,4533,4535,4537,4539,4541,4543,4545,4548,4551,4553,4556],{"class":54,"line":594},[52,4532,83],{"class":58},[52,4534,2216],{"class":62},[52,4536,1574],{"class":66},[52,4538,70],{"class":58},[52,4540,2223],{"class":73},[52,4542,3066],{"class":66},[52,4544,70],{"class":58},[52,4546,4547],{"class":73},"\"0.5\"",[52,4549,4550],{"class":66}," blendMode",[52,4552,70],{"class":58},[52,4554,4555],{"class":73},"\"multiply\"",[52,4557,105],{"class":58},[52,4559,4560,4562,4564],{"class":54,"line":600},[52,4561,121],{"class":58},[52,4563,63],{"class":62},[52,4565,77],{"class":58},[43,4567,4569],{"className":360,"code":4568,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\n {/* Multiply darkens by multiplying colors */}\n \u003CCircle color=\"#ff0088\" radius={0.5} blendMode=\"multiply\" />\n\u003C/Shader>\n",[31,4570,4571,4579,4587,4591,4600,4631],{"__ignoreMap":48},[52,4572,4573,4575,4577],{"class":54,"line":55},[52,4574,59],{"class":58},[52,4576,63],{"class":371},[52,4578,77],{"class":58},[52,4580,4581,4583,4585],{"class":54,"line":80},[52,4582,83],{"class":58},[52,4584,86],{"class":371},[52,4586,105],{"class":58},[52,4588,4589],{"class":54,"line":108},[52,4590,597],{"emptyLinePlaceholder":171},[52,4592,4593,4595,4598],{"class":54,"line":118},[52,4594,3117],{"class":58},[52,4596,4597],{"class":559},"/* Multiply darkens by multiplying colors */",[52,4599,729],{"class":58},[52,4601,4602,4604,4606,4608,4610,4612,4614,4616,4618,4621,4623,4625,4627,4629],{"class":54,"line":594},[52,4603,83],{"class":58},[52,4605,2216],{"class":371},[52,4607,1574],{"class":66},[52,4609,70],{"class":231},[52,4611,2223],{"class":73},[52,4613,3066],{"class":66},[52,4615,70],{"class":231},[52,4617,723],{"class":58},[52,4619,4620],{"class":371},"0.5",[52,4622,2577],{"class":58},[52,4624,4491],{"class":66},[52,4626,70],{"class":231},[52,4628,4555],{"class":73},[52,4630,105],{"class":58},[52,4632,4633,4635,4637],{"class":54,"line":600},[52,4634,121],{"class":58},[52,4636,63],{"class":371},[52,4638,77],{"class":58},[43,4640,4641],{"className":419,"code":4568,"language":420,"meta":48,"style":48},[31,4642,4643,4651,4659,4663,4671,4701],{"__ignoreMap":48},[52,4644,4645,4647,4649],{"class":54,"line":55},[52,4646,59],{"class":58},[52,4648,63],{"class":371},[52,4650,77],{"class":58},[52,4652,4653,4655,4657],{"class":54,"line":80},[52,4654,83],{"class":58},[52,4656,86],{"class":371},[52,4658,105],{"class":58},[52,4660,4661],{"class":54,"line":108},[52,4662,597],{"emptyLinePlaceholder":171},[52,4664,4665,4667,4669],{"class":54,"line":118},[52,4666,3117],{"class":58},[52,4668,4597],{"class":559},[52,4670,729],{"class":58},[52,4672,4673,4675,4677,4679,4681,4683,4685,4687,4689,4691,4693,4695,4697,4699],{"class":54,"line":594},[52,4674,83],{"class":58},[52,4676,2216],{"class":371},[52,4678,1574],{"class":66},[52,4680,70],{"class":231},[52,4682,2223],{"class":73},[52,4684,3066],{"class":66},[52,4686,70],{"class":231},[52,4688,723],{"class":58},[52,4690,4620],{"class":371},[52,4692,2577],{"class":58},[52,4694,4491],{"class":66},[52,4696,70],{"class":231},[52,4698,4555],{"class":73},[52,4700,105],{"class":58},[52,4702,4703,4705,4707],{"class":54,"line":600},[52,4704,121],{"class":58},[52,4706,63],{"class":371},[52,4708,77],{"class":58},[43,4710,4711],{"className":419,"code":4568,"language":420,"meta":48,"style":48},[31,4712,4713,4721,4729,4733,4741,4771],{"__ignoreMap":48},[52,4714,4715,4717,4719],{"class":54,"line":55},[52,4716,59],{"class":58},[52,4718,63],{"class":371},[52,4720,77],{"class":58},[52,4722,4723,4725,4727],{"class":54,"line":80},[52,4724,83],{"class":58},[52,4726,86],{"class":371},[52,4728,105],{"class":58},[52,4730,4731],{"class":54,"line":108},[52,4732,597],{"emptyLinePlaceholder":171},[52,4734,4735,4737,4739],{"class":54,"line":118},[52,4736,3117],{"class":58},[52,4738,4597],{"class":559},[52,4740,729],{"class":58},[52,4742,4743,4745,4747,4749,4751,4753,4755,4757,4759,4761,4763,4765,4767,4769],{"class":54,"line":594},[52,4744,83],{"class":58},[52,4746,2216],{"class":371},[52,4748,1574],{"class":66},[52,4750,70],{"class":231},[52,4752,2223],{"class":73},[52,4754,3066],{"class":66},[52,4756,70],{"class":231},[52,4758,723],{"class":58},[52,4760,4620],{"class":371},[52,4762,2577],{"class":58},[52,4764,4491],{"class":66},[52,4766,70],{"class":231},[52,4768,4555],{"class":73},[52,4770,105],{"class":58},[52,4772,4773,4775,4777],{"class":54,"line":600},[52,4774,121],{"class":58},[52,4776,63],{"class":371},[52,4778,77],{"class":58},[43,4780,4782],{"className":222,"code":4781,"language":224,"meta":48,"style":48},"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",[31,4783,4784,4798,4802,4810,4832,4836],{"__ignoreMap":48},[52,4785,4786,4788,4790,4792,4794,4796],{"class":54,"line":55},[52,4787,1721],{"class":231},[52,4789,1724],{"class":371},[52,4791,1727],{"class":231},[52,4793,1730],{"class":231},[52,4795,1733],{"class":66},[52,4797,1736],{"class":58},[52,4799,4800],{"class":54,"line":80},[52,4801,1751],{"class":58},[52,4803,4804,4806,4808],{"class":54,"line":108},[52,4805,1756],{"class":58},[52,4807,2126],{"class":73},[52,4809,3413],{"class":58},[52,4811,4812,4814,4816,4818,4820,4822,4824,4827,4830],{"class":54,"line":118},[52,4813,1756],{"class":58},[52,4815,2869],{"class":73},[52,4817,1762],{"class":58},[52,4819,2880],{"class":73},[52,4821,3431],{"class":58},[52,4823,4620],{"class":371},[52,4825,4826],{"class":58},", blendMode: ",[52,4828,4829],{"class":73},"'multiply'",[52,4831,1768],{"class":58},[52,4833,4834],{"class":54,"line":594},[52,4835,1773],{"class":58},[52,4837,4838],{"class":54,"line":600},[52,4839,1778],{"class":58},[19,4841],{":preset":4842},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,4844,4845],{},[151,4846,4847],{},"Available blend modes:",[1465,4849,4850,4857,4874,4891,4905,4916,4933],{},[1468,4851,4852,624,4855],{},[151,4853,4854],{},"Basic",[31,4856,4495],{},[1468,4858,4859,624,4862,1881,4865,1881,4868,1881,4871],{},[151,4860,4861],{},"Darkening",[31,4863,4864],{},"multiply",[31,4866,4867],{},"darken",[31,4869,4870],{},"colorBurn",[31,4872,4873],{},"linearBurn",[1468,4875,4876,624,4879,1881,4882,1881,4885,1881,4888],{},[151,4877,4878],{},"Lightening",[31,4880,4881],{},"screen",[31,4883,4884],{},"lighten",[31,4886,4887],{},"colorDodge",[31,4889,4890],{},"linearDodge",[1468,4892,4893,624,4896,1881,4899,1881,4902],{},[151,4894,4895],{},"Contrast",[31,4897,4898],{},"overlay",[31,4900,4901],{},"softLight",[31,4903,4904],{},"hardLight",[1468,4906,4907,624,4910,1881,4913],{},[151,4908,4909],{},"Difference",[31,4911,4912],{},"difference",[31,4914,4915],{},"exclusion",[1468,4917,4918,624,4921,1881,4924,1881,4927,1881,4930],{},[151,4919,4920],{},"Color",[31,4922,4923],{},"hue",[31,4925,4926],{},"saturation",[31,4928,4929],{},"color",[31,4931,4932],{},"luminosity",[1468,4934,4935,624,4938,1881,4941],{},[151,4936,4937],{},"Color Space Blending",[31,4939,4940],{},"normal-oklab",[31,4942,4943],{},"normal-oklch",[2925,4945,4947],{"id":4946},"combining-blend-modes","Combining Blend Modes",[15,4949,4950],{},"Use different blend modes on multiple layers to create complex interactions:",[217,4952,4953,5058,5185,5305,5425],{":tabs":1543},[43,4954,4956],{"className":45,"code":4955,"language":47,"meta":48,"style":48},"\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",[31,4957,4958,4966,4974,4978,5015,5050],{"__ignoreMap":48},[52,4959,4960,4962,4964],{"class":54,"line":55},[52,4961,59],{"class":58},[52,4963,63],{"class":62},[52,4965,77],{"class":58},[52,4967,4968,4970,4972],{"class":54,"line":80},[52,4969,83],{"class":58},[52,4971,86],{"class":62},[52,4973,105],{"class":58},[52,4975,4976],{"class":54,"line":108},[52,4977,597],{"emptyLinePlaceholder":171},[52,4979,4980,4982,4984,4986,4988,4991,4993,4995,4998,5001,5003,5006,5008,5010,5013],{"class":54,"line":118},[52,4981,83],{"class":58},[52,4983,2216],{"class":62},[52,4985,1574],{"class":66},[52,4987,70],{"class":58},[52,4989,4990],{"class":73},"\"#00ffff\"",[52,4992,3066],{"class":66},[52,4994,70],{"class":58},[52,4996,4997],{"class":73},"\"0.6\"",[52,4999,5000],{"class":66}," :center",[52,5002,70],{"class":58},[52,5004,5005],{"class":73},"\"{ x: 0.4, y: 0.5 }\"",[52,5007,4550],{"class":66},[52,5009,70],{"class":58},[52,5011,5012],{"class":73},"\"screen\"",[52,5014,105],{"class":58},[52,5016,5017,5019,5021,5023,5025,5028,5030,5032,5034,5036,5038,5041,5043,5045,5048],{"class":54,"line":594},[52,5018,83],{"class":58},[52,5020,2216],{"class":62},[52,5022,1574],{"class":66},[52,5024,70],{"class":58},[52,5026,5027],{"class":73},"\"#ff00ff\"",[52,5029,3066],{"class":66},[52,5031,70],{"class":58},[52,5033,4997],{"class":73},[52,5035,5000],{"class":66},[52,5037,70],{"class":58},[52,5039,5040],{"class":73},"\"{ x: 0.6, y: 0.5 }\"",[52,5042,4550],{"class":66},[52,5044,70],{"class":58},[52,5046,5047],{"class":73},"\"difference\"",[52,5049,105],{"class":58},[52,5051,5052,5054,5056],{"class":54,"line":600},[52,5053,121],{"class":58},[52,5055,63],{"class":62},[52,5057,77],{"class":58},[43,5059,5061],{"className":360,"code":5060,"language":362,"meta":48,"style":48},"\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",[31,5062,5063,5071,5079,5083,5133,5177],{"__ignoreMap":48},[52,5064,5065,5067,5069],{"class":54,"line":55},[52,5066,59],{"class":58},[52,5068,63],{"class":371},[52,5070,77],{"class":58},[52,5072,5073,5075,5077],{"class":54,"line":80},[52,5074,83],{"class":58},[52,5076,86],{"class":371},[52,5078,105],{"class":58},[52,5080,5081],{"class":54,"line":108},[52,5082,597],{"emptyLinePlaceholder":171},[52,5084,5085,5087,5089,5091,5093,5095,5097,5099,5101,5104,5106,5109,5111,5114,5117,5120,5122,5125,5127,5129,5131],{"class":54,"line":118},[52,5086,83],{"class":58},[52,5088,2216],{"class":371},[52,5090,1574],{"class":66},[52,5092,70],{"class":231},[52,5094,4990],{"class":73},[52,5096,3066],{"class":66},[52,5098,70],{"class":231},[52,5100,723],{"class":58},[52,5102,5103],{"class":371},"0.6",[52,5105,2577],{"class":58},[52,5107,5108],{"class":66},"center",[52,5110,70],{"class":231},[52,5112,5113],{"class":58},"{{ x: ",[52,5115,5116],{"class":371},"0.4",[52,5118,5119],{"class":58},", y: ",[52,5121,4620],{"class":371},[52,5123,5124],{"class":58}," }} ",[52,5126,4491],{"class":66},[52,5128,70],{"class":231},[52,5130,5012],{"class":73},[52,5132,105],{"class":58},[52,5134,5135,5137,5139,5141,5143,5145,5147,5149,5151,5153,5155,5157,5159,5161,5163,5165,5167,5169,5171,5173,5175],{"class":54,"line":594},[52,5136,83],{"class":58},[52,5138,2216],{"class":371},[52,5140,1574],{"class":66},[52,5142,70],{"class":231},[52,5144,5027],{"class":73},[52,5146,3066],{"class":66},[52,5148,70],{"class":231},[52,5150,723],{"class":58},[52,5152,5103],{"class":371},[52,5154,2577],{"class":58},[52,5156,5108],{"class":66},[52,5158,70],{"class":231},[52,5160,5113],{"class":58},[52,5162,5103],{"class":371},[52,5164,5119],{"class":58},[52,5166,4620],{"class":371},[52,5168,5124],{"class":58},[52,5170,4491],{"class":66},[52,5172,70],{"class":231},[52,5174,5047],{"class":73},[52,5176,105],{"class":58},[52,5178,5179,5181,5183],{"class":54,"line":600},[52,5180,121],{"class":58},[52,5182,63],{"class":371},[52,5184,77],{"class":58},[43,5186,5187],{"className":419,"code":5060,"language":420,"meta":48,"style":48},[31,5188,5189,5197,5205,5209,5253,5297],{"__ignoreMap":48},[52,5190,5191,5193,5195],{"class":54,"line":55},[52,5192,59],{"class":58},[52,5194,63],{"class":371},[52,5196,77],{"class":58},[52,5198,5199,5201,5203],{"class":54,"line":80},[52,5200,83],{"class":58},[52,5202,86],{"class":371},[52,5204,105],{"class":58},[52,5206,5207],{"class":54,"line":108},[52,5208,597],{"emptyLinePlaceholder":171},[52,5210,5211,5213,5215,5217,5219,5221,5223,5225,5227,5229,5231,5233,5235,5237,5239,5241,5243,5245,5247,5249,5251],{"class":54,"line":118},[52,5212,83],{"class":58},[52,5214,2216],{"class":371},[52,5216,1574],{"class":66},[52,5218,70],{"class":231},[52,5220,4990],{"class":73},[52,5222,3066],{"class":66},[52,5224,70],{"class":231},[52,5226,723],{"class":58},[52,5228,5103],{"class":371},[52,5230,2577],{"class":58},[52,5232,5108],{"class":66},[52,5234,70],{"class":231},[52,5236,5113],{"class":58},[52,5238,5116],{"class":371},[52,5240,5119],{"class":58},[52,5242,4620],{"class":371},[52,5244,5124],{"class":58},[52,5246,4491],{"class":66},[52,5248,70],{"class":231},[52,5250,5012],{"class":73},[52,5252,105],{"class":58},[52,5254,5255,5257,5259,5261,5263,5265,5267,5269,5271,5273,5275,5277,5279,5281,5283,5285,5287,5289,5291,5293,5295],{"class":54,"line":594},[52,5256,83],{"class":58},[52,5258,2216],{"class":371},[52,5260,1574],{"class":66},[52,5262,70],{"class":231},[52,5264,5027],{"class":73},[52,5266,3066],{"class":66},[52,5268,70],{"class":231},[52,5270,723],{"class":58},[52,5272,5103],{"class":371},[52,5274,2577],{"class":58},[52,5276,5108],{"class":66},[52,5278,70],{"class":231},[52,5280,5113],{"class":58},[52,5282,5103],{"class":371},[52,5284,5119],{"class":58},[52,5286,4620],{"class":371},[52,5288,5124],{"class":58},[52,5290,4491],{"class":66},[52,5292,70],{"class":231},[52,5294,5047],{"class":73},[52,5296,105],{"class":58},[52,5298,5299,5301,5303],{"class":54,"line":600},[52,5300,121],{"class":58},[52,5302,63],{"class":371},[52,5304,77],{"class":58},[43,5306,5307],{"className":419,"code":5060,"language":420,"meta":48,"style":48},[31,5308,5309,5317,5325,5329,5373,5417],{"__ignoreMap":48},[52,5310,5311,5313,5315],{"class":54,"line":55},[52,5312,59],{"class":58},[52,5314,63],{"class":371},[52,5316,77],{"class":58},[52,5318,5319,5321,5323],{"class":54,"line":80},[52,5320,83],{"class":58},[52,5322,86],{"class":371},[52,5324,105],{"class":58},[52,5326,5327],{"class":54,"line":108},[52,5328,597],{"emptyLinePlaceholder":171},[52,5330,5331,5333,5335,5337,5339,5341,5343,5345,5347,5349,5351,5353,5355,5357,5359,5361,5363,5365,5367,5369,5371],{"class":54,"line":118},[52,5332,83],{"class":58},[52,5334,2216],{"class":371},[52,5336,1574],{"class":66},[52,5338,70],{"class":231},[52,5340,4990],{"class":73},[52,5342,3066],{"class":66},[52,5344,70],{"class":231},[52,5346,723],{"class":58},[52,5348,5103],{"class":371},[52,5350,2577],{"class":58},[52,5352,5108],{"class":66},[52,5354,70],{"class":231},[52,5356,5113],{"class":58},[52,5358,5116],{"class":371},[52,5360,5119],{"class":58},[52,5362,4620],{"class":371},[52,5364,5124],{"class":58},[52,5366,4491],{"class":66},[52,5368,70],{"class":231},[52,5370,5012],{"class":73},[52,5372,105],{"class":58},[52,5374,5375,5377,5379,5381,5383,5385,5387,5389,5391,5393,5395,5397,5399,5401,5403,5405,5407,5409,5411,5413,5415],{"class":54,"line":594},[52,5376,83],{"class":58},[52,5378,2216],{"class":371},[52,5380,1574],{"class":66},[52,5382,70],{"class":231},[52,5384,5027],{"class":73},[52,5386,3066],{"class":66},[52,5388,70],{"class":231},[52,5390,723],{"class":58},[52,5392,5103],{"class":371},[52,5394,2577],{"class":58},[52,5396,5108],{"class":66},[52,5398,70],{"class":231},[52,5400,5113],{"class":58},[52,5402,5103],{"class":371},[52,5404,5119],{"class":58},[52,5406,4620],{"class":371},[52,5408,5124],{"class":58},[52,5410,4491],{"class":66},[52,5412,70],{"class":231},[52,5414,5047],{"class":73},[52,5416,105],{"class":58},[52,5418,5419,5421,5423],{"class":54,"line":600},[52,5420,121],{"class":58},[52,5422,63],{"class":371},[52,5424,77],{"class":58},[43,5426,5428],{"className":222,"code":5427,"language":224,"meta":48,"style":48},"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",[31,5429,5430,5444,5448,5456,5488,5518,5522],{"__ignoreMap":48},[52,5431,5432,5434,5436,5438,5440,5442],{"class":54,"line":55},[52,5433,1721],{"class":231},[52,5435,1724],{"class":371},[52,5437,1727],{"class":231},[52,5439,1730],{"class":231},[52,5441,1733],{"class":66},[52,5443,1736],{"class":58},[52,5445,5446],{"class":54,"line":80},[52,5447,1751],{"class":58},[52,5449,5450,5452,5454],{"class":54,"line":108},[52,5451,1756],{"class":58},[52,5453,2126],{"class":73},[52,5455,3413],{"class":58},[52,5457,5458,5460,5462,5464,5467,5469,5471,5474,5476,5478,5480,5483,5486],{"class":54,"line":118},[52,5459,1756],{"class":58},[52,5461,2869],{"class":73},[52,5463,1762],{"class":58},[52,5465,5466],{"class":73},"'#00ffff'",[52,5468,3431],{"class":58},[52,5470,5103],{"class":371},[52,5472,5473],{"class":58},", center: { x: ",[52,5475,5116],{"class":371},[52,5477,5119],{"class":58},[52,5479,4620],{"class":371},[52,5481,5482],{"class":58}," }, blendMode: ",[52,5484,5485],{"class":73},"'screen'",[52,5487,3436],{"class":58},[52,5489,5490,5492,5494,5496,5499,5501,5503,5505,5507,5509,5511,5513,5516],{"class":54,"line":594},[52,5491,1756],{"class":58},[52,5493,2869],{"class":73},[52,5495,1762],{"class":58},[52,5497,5498],{"class":73},"'#ff00ff'",[52,5500,3431],{"class":58},[52,5502,5103],{"class":371},[52,5504,5473],{"class":58},[52,5506,5103],{"class":371},[52,5508,5119],{"class":58},[52,5510,4620],{"class":371},[52,5512,5482],{"class":58},[52,5514,5515],{"class":73},"'difference'",[52,5517,1768],{"class":58},[52,5519,5520],{"class":54,"line":600},[52,5521,1773],{"class":58},[52,5523,5524],{"class":54,"line":606},[52,5525,1778],{"class":58},[19,5527],{":preset":5528},"{\"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\"}}]}",[23,5530,5531],{"id":2584},"Opacity",[15,5533,5534,5535,5537,5538,5541,5542,5545],{},"Control layer transparency with the ",[31,5536,2584],{}," prop. Values range from ",[31,5539,5540],{},"0"," (fully transparent) to ",[31,5543,5544],{},"1"," (fully opaque):",[217,5547,5548,5608,5673,5737,5801],{":tabs":1543},[43,5549,5551],{"className":45,"code":5550,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\n \u003CCircle color=\"#ff0088\" radius=\"0.8\" opacity=\"0.5\" />\n\u003C/Shader>\n",[31,5552,5553,5561,5569,5573,5600],{"__ignoreMap":48},[52,5554,5555,5557,5559],{"class":54,"line":55},[52,5556,59],{"class":58},[52,5558,63],{"class":62},[52,5560,77],{"class":58},[52,5562,5563,5565,5567],{"class":54,"line":80},[52,5564,83],{"class":58},[52,5566,86],{"class":62},[52,5568,105],{"class":58},[52,5570,5571],{"class":54,"line":108},[52,5572,597],{"emptyLinePlaceholder":171},[52,5574,5575,5577,5579,5581,5583,5585,5587,5589,5591,5594,5596,5598],{"class":54,"line":118},[52,5576,83],{"class":58},[52,5578,2216],{"class":62},[52,5580,1574],{"class":66},[52,5582,70],{"class":58},[52,5584,2223],{"class":73},[52,5586,3066],{"class":66},[52,5588,70],{"class":58},[52,5590,3071],{"class":73},[52,5592,5593],{"class":66}," opacity",[52,5595,70],{"class":58},[52,5597,4547],{"class":73},[52,5599,105],{"class":58},[52,5601,5602,5604,5606],{"class":54,"line":594},[52,5603,121],{"class":58},[52,5605,63],{"class":62},[52,5607,77],{"class":58},[43,5609,5611],{"className":360,"code":5610,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\n \u003CCircle color=\"#ff0088\" radius={0.8} opacity={0.5} />\n\u003C/Shader>\n",[31,5612,5613,5621,5629,5633,5665],{"__ignoreMap":48},[52,5614,5615,5617,5619],{"class":54,"line":55},[52,5616,59],{"class":58},[52,5618,63],{"class":371},[52,5620,77],{"class":58},[52,5622,5623,5625,5627],{"class":54,"line":80},[52,5624,83],{"class":58},[52,5626,86],{"class":371},[52,5628,105],{"class":58},[52,5630,5631],{"class":54,"line":108},[52,5632,597],{"emptyLinePlaceholder":171},[52,5634,5635,5637,5639,5641,5643,5645,5647,5649,5651,5653,5655,5657,5659,5661,5663],{"class":54,"line":118},[52,5636,83],{"class":58},[52,5638,2216],{"class":371},[52,5640,1574],{"class":66},[52,5642,70],{"class":231},[52,5644,2223],{"class":73},[52,5646,3066],{"class":66},[52,5648,70],{"class":231},[52,5650,723],{"class":58},[52,5652,3164],{"class":371},[52,5654,2577],{"class":58},[52,5656,2584],{"class":66},[52,5658,70],{"class":231},[52,5660,723],{"class":58},[52,5662,4620],{"class":371},[52,5664,3167],{"class":58},[52,5666,5667,5669,5671],{"class":54,"line":594},[52,5668,121],{"class":58},[52,5670,63],{"class":371},[52,5672,77],{"class":58},[43,5674,5675],{"className":419,"code":5610,"language":420,"meta":48,"style":48},[31,5676,5677,5685,5693,5697,5729],{"__ignoreMap":48},[52,5678,5679,5681,5683],{"class":54,"line":55},[52,5680,59],{"class":58},[52,5682,63],{"class":371},[52,5684,77],{"class":58},[52,5686,5687,5689,5691],{"class":54,"line":80},[52,5688,83],{"class":58},[52,5690,86],{"class":371},[52,5692,105],{"class":58},[52,5694,5695],{"class":54,"line":108},[52,5696,597],{"emptyLinePlaceholder":171},[52,5698,5699,5701,5703,5705,5707,5709,5711,5713,5715,5717,5719,5721,5723,5725,5727],{"class":54,"line":118},[52,5700,83],{"class":58},[52,5702,2216],{"class":371},[52,5704,1574],{"class":66},[52,5706,70],{"class":231},[52,5708,2223],{"class":73},[52,5710,3066],{"class":66},[52,5712,70],{"class":231},[52,5714,723],{"class":58},[52,5716,3164],{"class":371},[52,5718,2577],{"class":58},[52,5720,2584],{"class":66},[52,5722,70],{"class":231},[52,5724,723],{"class":58},[52,5726,4620],{"class":371},[52,5728,3167],{"class":58},[52,5730,5731,5733,5735],{"class":54,"line":594},[52,5732,121],{"class":58},[52,5734,63],{"class":371},[52,5736,77],{"class":58},[43,5738,5739],{"className":419,"code":5610,"language":420,"meta":48,"style":48},[31,5740,5741,5749,5757,5761,5793],{"__ignoreMap":48},[52,5742,5743,5745,5747],{"class":54,"line":55},[52,5744,59],{"class":58},[52,5746,63],{"class":371},[52,5748,77],{"class":58},[52,5750,5751,5753,5755],{"class":54,"line":80},[52,5752,83],{"class":58},[52,5754,86],{"class":371},[52,5756,105],{"class":58},[52,5758,5759],{"class":54,"line":108},[52,5760,597],{"emptyLinePlaceholder":171},[52,5762,5763,5765,5767,5769,5771,5773,5775,5777,5779,5781,5783,5785,5787,5789,5791],{"class":54,"line":118},[52,5764,83],{"class":58},[52,5766,2216],{"class":371},[52,5768,1574],{"class":66},[52,5770,70],{"class":231},[52,5772,2223],{"class":73},[52,5774,3066],{"class":66},[52,5776,70],{"class":231},[52,5778,723],{"class":58},[52,5780,3164],{"class":371},[52,5782,2577],{"class":58},[52,5784,2584],{"class":66},[52,5786,70],{"class":231},[52,5788,723],{"class":58},[52,5790,4620],{"class":371},[52,5792,3167],{"class":58},[52,5794,5795,5797,5799],{"class":54,"line":594},[52,5796,121],{"class":58},[52,5798,63],{"class":371},[52,5800,77],{"class":58},[43,5802,5804],{"className":222,"code":5803,"language":224,"meta":48,"style":48},"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",[31,5805,5806,5820,5824,5832,5853,5857],{"__ignoreMap":48},[52,5807,5808,5810,5812,5814,5816,5818],{"class":54,"line":55},[52,5809,1721],{"class":231},[52,5811,1724],{"class":371},[52,5813,1727],{"class":231},[52,5815,1730],{"class":231},[52,5817,1733],{"class":66},[52,5819,1736],{"class":58},[52,5821,5822],{"class":54,"line":80},[52,5823,1751],{"class":58},[52,5825,5826,5828,5830],{"class":54,"line":108},[52,5827,1756],{"class":58},[52,5829,2126],{"class":73},[52,5831,3413],{"class":58},[52,5833,5834,5836,5838,5840,5842,5844,5846,5849,5851],{"class":54,"line":118},[52,5835,1756],{"class":58},[52,5837,2869],{"class":73},[52,5839,1762],{"class":58},[52,5841,2880],{"class":73},[52,5843,3431],{"class":58},[52,5845,3164],{"class":371},[52,5847,5848],{"class":58},", opacity: ",[52,5850,4620],{"class":371},[52,5852,1768],{"class":58},[52,5854,5855],{"class":54,"line":594},[52,5856,1773],{"class":58},[52,5858,5859],{"class":54,"line":600},[52,5860,1778],{"class":58},[19,5862],{":preset":5863},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,5865,5866],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,5868,5870],{"id":5869},"visibility","Visibility",[15,5872,4488,5873,5875,5876,5878,5879,5881],{},[31,5874,2374],{}," prop that defaults to ",[31,5877,1996],{},". Setting it to ",[31,5880,2292],{}," completely removes the component from the composition, as if it wasn't there at all:",[43,5883,5887],{"className":5884,"code":5885,"language":5886,"meta":48,"style":48},"language-vue shiki shiki-themes github-dark","\u003CCircle visible={false} />\n","vue",[31,5888,5889],{"__ignoreMap":48},[52,5890,5891,5893,5895,5897,5899,5902],{"class":54,"line":55},[52,5892,59],{"class":58},[52,5894,2216],{"class":62},[52,5896,2281],{"class":66},[52,5898,70],{"class":58},[52,5900,5901],{"class":73},"{false}",[52,5903,105],{"class":58},[15,5905,5906,5907,5910,5911,5914],{},"This is different from ",[31,5908,5909],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[31,5912,5913],{},"visible={false}"," when you want a component to exist in the tree (perhaps as a mask source) but not appear in the final output.",[23,5916,5918],{"id":5917},"masking","Masking",[15,5920,5921,5922,5925,5926,5929,5930,5933],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[31,5923,5924],{},"id"," property (",[31,5927,5928],{},"string",") and then set ",[31,5931,5932],{},"maskSource"," to that ID on another component to use it as a mask.",[15,5935,5936,5937,5939],{},"Masks typically have ",[31,5938,5913],{}," so they don't appear in the final output—they only control visibility of other components:",[217,5941,5942,6022,6111,6197,6283],{":tabs":1543},[43,5943,5945],{"className":45,"code":5944,"language":47,"meta":48,"style":48},"\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",[31,5946,5947,5955,5960,5990,5994,5999,6014],{"__ignoreMap":48},[52,5948,5949,5951,5953],{"class":54,"line":55},[52,5950,59],{"class":58},[52,5952,63],{"class":62},[52,5954,77],{"class":58},[52,5956,5957],{"class":54,"line":80},[52,5958,5959],{"class":559}," \u003C!-- This circle acts as the mask -->\n",[52,5961,5962,5964,5966,5969,5971,5974,5976,5978,5980,5983,5985,5988],{"class":54,"line":108},[52,5963,83],{"class":58},[52,5965,2216],{"class":62},[52,5967,5968],{"class":66}," id",[52,5970,70],{"class":58},[52,5972,5973],{"class":73},"\"myMask\"",[52,5975,3066],{"class":66},[52,5977,70],{"class":58},[52,5979,3071],{"class":73},[52,5981,5982],{"class":66}," :visible",[52,5984,70],{"class":58},[52,5986,5987],{"class":73},"\"false\"",[52,5989,105],{"class":58},[52,5991,5992],{"class":54,"line":118},[52,5993,597],{"emptyLinePlaceholder":171},[52,5995,5996],{"class":54,"line":594},[52,5997,5998],{"class":559}," \u003C!-- This gradient is masked by the circle -->\n",[52,6000,6001,6003,6005,6008,6010,6012],{"class":54,"line":600},[52,6002,83],{"class":58},[52,6004,86],{"class":62},[52,6006,6007],{"class":66}," maskSource",[52,6009,70],{"class":58},[52,6011,5973],{"class":73},[52,6013,105],{"class":58},[52,6015,6016,6018,6020],{"class":54,"line":606},[52,6017,121],{"class":58},[52,6019,63],{"class":62},[52,6021,77],{"class":58},[43,6023,6025],{"className":360,"code":6024,"language":362,"meta":48,"style":48},"\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",[31,6026,6027,6035,6044,6076,6080,6089,6103],{"__ignoreMap":48},[52,6028,6029,6031,6033],{"class":54,"line":55},[52,6030,59],{"class":58},[52,6032,63],{"class":371},[52,6034,77],{"class":58},[52,6036,6037,6039,6042],{"class":54,"line":80},[52,6038,3117],{"class":58},[52,6040,6041],{"class":559},"/* This circle acts as the mask */",[52,6043,729],{"class":58},[52,6045,6046,6048,6050,6052,6054,6056,6058,6060,6062,6064,6066,6068,6070,6072,6074],{"class":54,"line":108},[52,6047,83],{"class":58},[52,6049,2216],{"class":371},[52,6051,5968],{"class":66},[52,6053,70],{"class":231},[52,6055,5973],{"class":73},[52,6057,3066],{"class":66},[52,6059,70],{"class":231},[52,6061,723],{"class":58},[52,6063,3164],{"class":371},[52,6065,2577],{"class":58},[52,6067,2374],{"class":66},[52,6069,70],{"class":231},[52,6071,723],{"class":58},[52,6073,2292],{"class":371},[52,6075,3167],{"class":58},[52,6077,6078],{"class":54,"line":118},[52,6079,597],{"emptyLinePlaceholder":171},[52,6081,6082,6084,6087],{"class":54,"line":594},[52,6083,3117],{"class":58},[52,6085,6086],{"class":559},"/* This gradient is masked by the circle */",[52,6088,729],{"class":58},[52,6090,6091,6093,6095,6097,6099,6101],{"class":54,"line":600},[52,6092,83],{"class":58},[52,6094,86],{"class":371},[52,6096,6007],{"class":66},[52,6098,70],{"class":231},[52,6100,5973],{"class":73},[52,6102,105],{"class":58},[52,6104,6105,6107,6109],{"class":54,"line":606},[52,6106,121],{"class":58},[52,6108,63],{"class":371},[52,6110,77],{"class":58},[43,6112,6113],{"className":419,"code":6024,"language":420,"meta":48,"style":48},[31,6114,6115,6123,6131,6163,6167,6175,6189],{"__ignoreMap":48},[52,6116,6117,6119,6121],{"class":54,"line":55},[52,6118,59],{"class":58},[52,6120,63],{"class":371},[52,6122,77],{"class":58},[52,6124,6125,6127,6129],{"class":54,"line":80},[52,6126,3117],{"class":58},[52,6128,6041],{"class":559},[52,6130,729],{"class":58},[52,6132,6133,6135,6137,6139,6141,6143,6145,6147,6149,6151,6153,6155,6157,6159,6161],{"class":54,"line":108},[52,6134,83],{"class":58},[52,6136,2216],{"class":371},[52,6138,5968],{"class":66},[52,6140,70],{"class":231},[52,6142,5973],{"class":73},[52,6144,3066],{"class":66},[52,6146,70],{"class":231},[52,6148,723],{"class":58},[52,6150,3164],{"class":371},[52,6152,2577],{"class":58},[52,6154,2374],{"class":66},[52,6156,70],{"class":231},[52,6158,723],{"class":58},[52,6160,2292],{"class":371},[52,6162,3167],{"class":58},[52,6164,6165],{"class":54,"line":118},[52,6166,597],{"emptyLinePlaceholder":171},[52,6168,6169,6171,6173],{"class":54,"line":594},[52,6170,3117],{"class":58},[52,6172,6086],{"class":559},[52,6174,729],{"class":58},[52,6176,6177,6179,6181,6183,6185,6187],{"class":54,"line":600},[52,6178,83],{"class":58},[52,6180,86],{"class":371},[52,6182,6007],{"class":66},[52,6184,70],{"class":231},[52,6186,5973],{"class":73},[52,6188,105],{"class":58},[52,6190,6191,6193,6195],{"class":54,"line":606},[52,6192,121],{"class":58},[52,6194,63],{"class":371},[52,6196,77],{"class":58},[43,6198,6199],{"className":419,"code":6024,"language":420,"meta":48,"style":48},[31,6200,6201,6209,6217,6249,6253,6261,6275],{"__ignoreMap":48},[52,6202,6203,6205,6207],{"class":54,"line":55},[52,6204,59],{"class":58},[52,6206,63],{"class":371},[52,6208,77],{"class":58},[52,6210,6211,6213,6215],{"class":54,"line":80},[52,6212,3117],{"class":58},[52,6214,6041],{"class":559},[52,6216,729],{"class":58},[52,6218,6219,6221,6223,6225,6227,6229,6231,6233,6235,6237,6239,6241,6243,6245,6247],{"class":54,"line":108},[52,6220,83],{"class":58},[52,6222,2216],{"class":371},[52,6224,5968],{"class":66},[52,6226,70],{"class":231},[52,6228,5973],{"class":73},[52,6230,3066],{"class":66},[52,6232,70],{"class":231},[52,6234,723],{"class":58},[52,6236,3164],{"class":371},[52,6238,2577],{"class":58},[52,6240,2374],{"class":66},[52,6242,70],{"class":231},[52,6244,723],{"class":58},[52,6246,2292],{"class":371},[52,6248,3167],{"class":58},[52,6250,6251],{"class":54,"line":118},[52,6252,597],{"emptyLinePlaceholder":171},[52,6254,6255,6257,6259],{"class":54,"line":594},[52,6256,3117],{"class":58},[52,6258,6086],{"class":559},[52,6260,729],{"class":58},[52,6262,6263,6265,6267,6269,6271,6273],{"class":54,"line":600},[52,6264,83],{"class":58},[52,6266,86],{"class":371},[52,6268,6007],{"class":66},[52,6270,70],{"class":231},[52,6272,5973],{"class":73},[52,6274,105],{"class":58},[52,6276,6277,6279,6281],{"class":54,"line":606},[52,6278,121],{"class":58},[52,6280,63],{"class":371},[52,6282,77],{"class":58},[43,6284,6286],{"className":222,"code":6285,"language":224,"meta":48,"style":48},"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",[31,6287,6288,6302,6306,6328,6341,6345],{"__ignoreMap":48},[52,6289,6290,6292,6294,6296,6298,6300],{"class":54,"line":55},[52,6291,1721],{"class":231},[52,6293,1724],{"class":371},[52,6295,1727],{"class":231},[52,6297,1730],{"class":231},[52,6299,1733],{"class":66},[52,6301,1736],{"class":58},[52,6303,6304],{"class":54,"line":80},[52,6305,1751],{"class":58},[52,6307,6308,6310,6312,6314,6317,6319,6321,6324,6326],{"class":54,"line":108},[52,6309,1756],{"class":58},[52,6311,2869],{"class":73},[52,6313,2872],{"class":58},[52,6315,6316],{"class":73},"'myMask'",[52,6318,4407],{"class":58},[52,6320,3164],{"class":371},[52,6322,6323],{"class":58},", visible: ",[52,6325,2292],{"class":371},[52,6327,3436],{"class":58},[52,6329,6330,6332,6334,6337,6339],{"class":54,"line":118},[52,6331,1756],{"class":58},[52,6333,2126],{"class":73},[52,6335,6336],{"class":58},", props: { maskSource: ",[52,6338,6316],{"class":73},[52,6340,1768],{"class":58},[52,6342,6343],{"class":54,"line":594},[52,6344,1773],{"class":58},[52,6346,6347],{"class":54,"line":600},[52,6348,1778],{"class":58},[19,6350],{":preset":6351},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,6353,6354,6355,6357],{},"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 ",[31,6356,5913],{},".",[2925,6359,6361],{"id":6360},"mask-types","Mask Types",[15,6363,6364,6365,6368],{},"Control how the mask is interpreted with the ",[31,6366,6367],{},"maskType"," prop:",[1465,6370,6371,6379,6387,6395],{},[1468,6372,6373,6378],{},[151,6374,6375],{},[31,6376,6377],{},"alpha",": Uses the mask's alpha channel (default)",[1468,6380,6381,6386],{},[151,6382,6383],{},[31,6384,6385],{},"alphaInverted",": Uses the inverted alpha channel",[1468,6388,6389,6394],{},[151,6390,6391],{},[31,6392,6393],{},"luminance",": Uses the mask's brightness",[1468,6396,6397,6402],{},[151,6398,6399],{},[31,6400,6401],{},"luminanceInverted",": Uses the inverted brightness",[217,6404,6405,6555,6703,6847,6991],{":tabs":1543},[43,6406,6408],{"className":45,"code":6407,"language":47,"meta":48,"style":48},"\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",[31,6409,6410,6418,6426,6430,6435,6442,6452,6461,6470,6480,6484,6488,6493,6500,6510,6520,6530,6541,6546],{"__ignoreMap":48},[52,6411,6412,6414,6416],{"class":54,"line":55},[52,6413,59],{"class":58},[52,6415,63],{"class":62},[52,6417,77],{"class":58},[52,6419,6420,6422,6424],{"class":54,"line":80},[52,6421,83],{"class":58},[52,6423,86],{"class":62},[52,6425,105],{"class":58},[52,6427,6428],{"class":54,"line":108},[52,6429,597],{"emptyLinePlaceholder":171},[52,6431,6432],{"class":54,"line":118},[52,6433,6434],{"class":559}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[52,6436,6437,6439],{"class":54,"line":594},[52,6438,83],{"class":58},[52,6440,6441],{"class":62},"Checkerboard\n",[52,6443,6444,6447,6449],{"class":54,"line":600},[52,6445,6446],{"class":66}," id",[52,6448,70],{"class":58},[52,6450,6451],{"class":73},"\"mask\"\n",[52,6453,6454,6456,6458],{"class":54,"line":606},[52,6455,1176],{"class":66},[52,6457,70],{"class":58},[52,6459,6460],{"class":73},"\"#ffffff\"\n",[52,6462,6463,6465,6467],{"class":54,"line":653},[52,6464,1186],{"class":66},[52,6466,70],{"class":58},[52,6468,6469],{"class":73},"\"#111111\"\n",[52,6471,6472,6475,6477],{"class":54,"line":662},[52,6473,6474],{"class":66}," :visible",[52,6476,70],{"class":58},[52,6478,6479],{"class":73},"\"false\"\n",[52,6481,6482],{"class":54,"line":671},[52,6483,1224],{"class":58},[52,6485,6486],{"class":54,"line":676},[52,6487,597],{"emptyLinePlaceholder":171},[52,6489,6490],{"class":54,"line":682},[52,6491,6492],{"class":559}," \u003C!-- Visible where mask is bright -->\n",[52,6494,6495,6497],{"class":54,"line":698},[52,6496,83],{"class":58},[52,6498,6499],{"class":62},"Circle\n",[52,6501,6502,6505,6507],{"class":54,"line":707},[52,6503,6504],{"class":66}," color",[52,6506,70],{"class":58},[52,6508,6509],{"class":73},"\"#ff0088\"\n",[52,6511,6512,6515,6517],{"class":54,"line":2327},[52,6513,6514],{"class":66}," radius",[52,6516,70],{"class":58},[52,6518,6519],{"class":73},"\"0.8\"\n",[52,6521,6523,6526,6528],{"class":54,"line":6522},16,[52,6524,6525],{"class":66}," maskSource",[52,6527,70],{"class":58},[52,6529,6451],{"class":73},[52,6531,6533,6536,6538],{"class":54,"line":6532},17,[52,6534,6535],{"class":66}," maskType",[52,6537,70],{"class":58},[52,6539,6540],{"class":73},"\"luminance\"\n",[52,6542,6544],{"class":54,"line":6543},18,[52,6545,1224],{"class":58},[52,6547,6549,6551,6553],{"class":54,"line":6548},19,[52,6550,121],{"class":58},[52,6552,63],{"class":62},[52,6554,77],{"class":58},[43,6556,6558],{"className":360,"code":6557,"language":362,"meta":48,"style":48},"\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",[31,6559,6560,6568,6576,6580,6589,6595,6603,6611,6619,6632,6636,6640,6649,6655,6663,6675,6683,6691,6695],{"__ignoreMap":48},[52,6561,6562,6564,6566],{"class":54,"line":55},[52,6563,59],{"class":58},[52,6565,63],{"class":371},[52,6567,77],{"class":58},[52,6569,6570,6572,6574],{"class":54,"line":80},[52,6571,83],{"class":58},[52,6573,86],{"class":371},[52,6575,105],{"class":58},[52,6577,6578],{"class":54,"line":108},[52,6579,597],{"emptyLinePlaceholder":171},[52,6581,6582,6584,6587],{"class":54,"line":118},[52,6583,3117],{"class":58},[52,6585,6586],{"class":559},"/* Hidden checkerboard mask controls visibility */",[52,6588,729],{"class":58},[52,6590,6591,6593],{"class":54,"line":594},[52,6592,83],{"class":58},[52,6594,6441],{"class":371},[52,6596,6597,6599,6601],{"class":54,"line":600},[52,6598,6446],{"class":66},[52,6600,70],{"class":231},[52,6602,6451],{"class":73},[52,6604,6605,6607,6609],{"class":54,"line":606},[52,6606,1176],{"class":66},[52,6608,70],{"class":231},[52,6610,6460],{"class":73},[52,6612,6613,6615,6617],{"class":54,"line":653},[52,6614,1186],{"class":66},[52,6616,70],{"class":231},[52,6618,6469],{"class":73},[52,6620,6621,6624,6626,6628,6630],{"class":54,"line":662},[52,6622,6623],{"class":66}," visible",[52,6625,70],{"class":231},[52,6627,723],{"class":58},[52,6629,2292],{"class":371},[52,6631,729],{"class":58},[52,6633,6634],{"class":54,"line":671},[52,6635,1224],{"class":58},[52,6637,6638],{"class":54,"line":676},[52,6639,597],{"emptyLinePlaceholder":171},[52,6641,6642,6644,6647],{"class":54,"line":682},[52,6643,3117],{"class":58},[52,6645,6646],{"class":559},"/* Visible where mask is bright */",[52,6648,729],{"class":58},[52,6650,6651,6653],{"class":54,"line":698},[52,6652,83],{"class":58},[52,6654,6499],{"class":371},[52,6656,6657,6659,6661],{"class":54,"line":707},[52,6658,6504],{"class":66},[52,6660,70],{"class":231},[52,6662,6509],{"class":73},[52,6664,6665,6667,6669,6671,6673],{"class":54,"line":2327},[52,6666,6514],{"class":66},[52,6668,70],{"class":231},[52,6670,723],{"class":58},[52,6672,3164],{"class":371},[52,6674,729],{"class":58},[52,6676,6677,6679,6681],{"class":54,"line":6522},[52,6678,6525],{"class":66},[52,6680,70],{"class":231},[52,6682,6451],{"class":73},[52,6684,6685,6687,6689],{"class":54,"line":6532},[52,6686,6535],{"class":66},[52,6688,70],{"class":231},[52,6690,6540],{"class":73},[52,6692,6693],{"class":54,"line":6543},[52,6694,1224],{"class":58},[52,6696,6697,6699,6701],{"class":54,"line":6548},[52,6698,121],{"class":58},[52,6700,63],{"class":371},[52,6702,77],{"class":58},[43,6704,6705],{"className":419,"code":6557,"language":420,"meta":48,"style":48},[31,6706,6707,6715,6723,6727,6735,6741,6749,6757,6765,6777,6781,6785,6793,6799,6807,6819,6827,6835,6839],{"__ignoreMap":48},[52,6708,6709,6711,6713],{"class":54,"line":55},[52,6710,59],{"class":58},[52,6712,63],{"class":371},[52,6714,77],{"class":58},[52,6716,6717,6719,6721],{"class":54,"line":80},[52,6718,83],{"class":58},[52,6720,86],{"class":371},[52,6722,105],{"class":58},[52,6724,6725],{"class":54,"line":108},[52,6726,597],{"emptyLinePlaceholder":171},[52,6728,6729,6731,6733],{"class":54,"line":118},[52,6730,3117],{"class":58},[52,6732,6586],{"class":559},[52,6734,729],{"class":58},[52,6736,6737,6739],{"class":54,"line":594},[52,6738,83],{"class":58},[52,6740,6441],{"class":371},[52,6742,6743,6745,6747],{"class":54,"line":600},[52,6744,6446],{"class":66},[52,6746,70],{"class":231},[52,6748,6451],{"class":73},[52,6750,6751,6753,6755],{"class":54,"line":606},[52,6752,1176],{"class":66},[52,6754,70],{"class":231},[52,6756,6460],{"class":73},[52,6758,6759,6761,6763],{"class":54,"line":653},[52,6760,1186],{"class":66},[52,6762,70],{"class":231},[52,6764,6469],{"class":73},[52,6766,6767,6769,6771,6773,6775],{"class":54,"line":662},[52,6768,6623],{"class":66},[52,6770,70],{"class":231},[52,6772,723],{"class":58},[52,6774,2292],{"class":371},[52,6776,729],{"class":58},[52,6778,6779],{"class":54,"line":671},[52,6780,1224],{"class":58},[52,6782,6783],{"class":54,"line":676},[52,6784,597],{"emptyLinePlaceholder":171},[52,6786,6787,6789,6791],{"class":54,"line":682},[52,6788,3117],{"class":58},[52,6790,6646],{"class":559},[52,6792,729],{"class":58},[52,6794,6795,6797],{"class":54,"line":698},[52,6796,83],{"class":58},[52,6798,6499],{"class":371},[52,6800,6801,6803,6805],{"class":54,"line":707},[52,6802,6504],{"class":66},[52,6804,70],{"class":231},[52,6806,6509],{"class":73},[52,6808,6809,6811,6813,6815,6817],{"class":54,"line":2327},[52,6810,6514],{"class":66},[52,6812,70],{"class":231},[52,6814,723],{"class":58},[52,6816,3164],{"class":371},[52,6818,729],{"class":58},[52,6820,6821,6823,6825],{"class":54,"line":6522},[52,6822,6525],{"class":66},[52,6824,70],{"class":231},[52,6826,6451],{"class":73},[52,6828,6829,6831,6833],{"class":54,"line":6532},[52,6830,6535],{"class":66},[52,6832,70],{"class":231},[52,6834,6540],{"class":73},[52,6836,6837],{"class":54,"line":6543},[52,6838,1224],{"class":58},[52,6840,6841,6843,6845],{"class":54,"line":6548},[52,6842,121],{"class":58},[52,6844,63],{"class":371},[52,6846,77],{"class":58},[43,6848,6849],{"className":419,"code":6557,"language":420,"meta":48,"style":48},[31,6850,6851,6859,6867,6871,6879,6885,6893,6901,6909,6921,6925,6929,6937,6943,6951,6963,6971,6979,6983],{"__ignoreMap":48},[52,6852,6853,6855,6857],{"class":54,"line":55},[52,6854,59],{"class":58},[52,6856,63],{"class":371},[52,6858,77],{"class":58},[52,6860,6861,6863,6865],{"class":54,"line":80},[52,6862,83],{"class":58},[52,6864,86],{"class":371},[52,6866,105],{"class":58},[52,6868,6869],{"class":54,"line":108},[52,6870,597],{"emptyLinePlaceholder":171},[52,6872,6873,6875,6877],{"class":54,"line":118},[52,6874,3117],{"class":58},[52,6876,6586],{"class":559},[52,6878,729],{"class":58},[52,6880,6881,6883],{"class":54,"line":594},[52,6882,83],{"class":58},[52,6884,6441],{"class":371},[52,6886,6887,6889,6891],{"class":54,"line":600},[52,6888,6446],{"class":66},[52,6890,70],{"class":231},[52,6892,6451],{"class":73},[52,6894,6895,6897,6899],{"class":54,"line":606},[52,6896,1176],{"class":66},[52,6898,70],{"class":231},[52,6900,6460],{"class":73},[52,6902,6903,6905,6907],{"class":54,"line":653},[52,6904,1186],{"class":66},[52,6906,70],{"class":231},[52,6908,6469],{"class":73},[52,6910,6911,6913,6915,6917,6919],{"class":54,"line":662},[52,6912,6623],{"class":66},[52,6914,70],{"class":231},[52,6916,723],{"class":58},[52,6918,2292],{"class":371},[52,6920,729],{"class":58},[52,6922,6923],{"class":54,"line":671},[52,6924,1224],{"class":58},[52,6926,6927],{"class":54,"line":676},[52,6928,597],{"emptyLinePlaceholder":171},[52,6930,6931,6933,6935],{"class":54,"line":682},[52,6932,3117],{"class":58},[52,6934,6646],{"class":559},[52,6936,729],{"class":58},[52,6938,6939,6941],{"class":54,"line":698},[52,6940,83],{"class":58},[52,6942,6499],{"class":371},[52,6944,6945,6947,6949],{"class":54,"line":707},[52,6946,6504],{"class":66},[52,6948,70],{"class":231},[52,6950,6509],{"class":73},[52,6952,6953,6955,6957,6959,6961],{"class":54,"line":2327},[52,6954,6514],{"class":66},[52,6956,70],{"class":231},[52,6958,723],{"class":58},[52,6960,3164],{"class":371},[52,6962,729],{"class":58},[52,6964,6965,6967,6969],{"class":54,"line":6522},[52,6966,6525],{"class":66},[52,6968,70],{"class":231},[52,6970,6451],{"class":73},[52,6972,6973,6975,6977],{"class":54,"line":6532},[52,6974,6535],{"class":66},[52,6976,70],{"class":231},[52,6978,6540],{"class":73},[52,6980,6981],{"class":54,"line":6543},[52,6982,1224],{"class":58},[52,6984,6985,6987,6989],{"class":54,"line":6548},[52,6986,121],{"class":58},[52,6988,63],{"class":371},[52,6990,77],{"class":58},[43,6992,6994],{"className":222,"code":6993,"language":224,"meta":48,"style":48},"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",[31,6995,6996,7010,7014,7022,7052,7079,7083],{"__ignoreMap":48},[52,6997,6998,7000,7002,7004,7006,7008],{"class":54,"line":55},[52,6999,1721],{"class":231},[52,7001,1724],{"class":371},[52,7003,1727],{"class":231},[52,7005,1730],{"class":231},[52,7007,1733],{"class":66},[52,7009,1736],{"class":58},[52,7011,7012],{"class":54,"line":80},[52,7013,1751],{"class":58},[52,7015,7016,7018,7020],{"class":54,"line":108},[52,7017,1756],{"class":58},[52,7019,2126],{"class":73},[52,7021,3413],{"class":58},[52,7023,7024,7026,7029,7031,7034,7037,7040,7043,7046,7048,7050],{"class":54,"line":118},[52,7025,1756],{"class":58},[52,7027,7028],{"class":73},"'Checkerboard'",[52,7030,2872],{"class":58},[52,7032,7033],{"class":73},"'mask'",[52,7035,7036],{"class":58},", props: { colorA: ",[52,7038,7039],{"class":73},"'#ffffff'",[52,7041,7042],{"class":58},", colorB: ",[52,7044,7045],{"class":73},"'#111111'",[52,7047,6323],{"class":58},[52,7049,2292],{"class":371},[52,7051,3436],{"class":58},[52,7053,7054,7056,7058,7060,7062,7064,7066,7069,7071,7074,7077],{"class":54,"line":594},[52,7055,1756],{"class":58},[52,7057,2869],{"class":73},[52,7059,1762],{"class":58},[52,7061,2880],{"class":73},[52,7063,3431],{"class":58},[52,7065,3164],{"class":371},[52,7067,7068],{"class":58},", maskSource: ",[52,7070,7033],{"class":73},[52,7072,7073],{"class":58},", maskType: ",[52,7075,7076],{"class":73},"'luminance'",[52,7078,1768],{"class":58},[52,7080,7081],{"class":54,"line":600},[52,7082,1773],{"class":58},[52,7084,7085],{"class":54,"line":606},[52,7086,1778],{"class":58},[19,7088],{":preset":7089},"{\"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\"}}]}",[156,7091,4460],{},{"title":48,"searchDepth":80,"depth":80,"links":7093},[7094,7097,7098,7099],{"id":4484,"depth":80,"text":4485,"children":7095},[7096],{"id":4946,"depth":108,"text":4947},{"id":2584,"depth":80,"text":5531},{"id":5869,"depth":80,"text":5870},{"id":5917,"depth":80,"text":5918,"children":7100},[7101],{"id":6360,"depth":108,"text":6361},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"/docs/guide/blending-masking",{"title":4473,"description":7103},"docs/guide/3.blending-masking","DB4mG55LrsfgecKvStxFmWb3SIn-tGs51Tr-D2t5pHs",{"id":7111,"title":1487,"body":7112,"category":7102,"description":9106,"exclude":167,"extension":168,"forceFramework":167,"icon":9107,"meta":9108,"navigation":171,"path":1486,"seo":9109,"stem":9110,"__hash__":9111},"guide/docs/guide/4.props-reactivity.md",{"type":8,"value":7113,"toc":9099},[7114,7117,7120,7124,7127,7344,7347,7351,7354,8517,8520,8525,8528,8532,8535,8540,8580,8585,8624,8629,8680,8685,8711,8714,8718,8721,8727,9059,9063,9066,9070,9073,9093,9096],[11,7115,1487],{"id":7116},"props-reactivity",[15,7118,7119],{},"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.",[23,7121,7123],{"id":7122},"basic-props","Basic Props",[15,7125,7126],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[217,7128,7129,7170,7213,7255,7297],{":tabs":1543},[43,7130,7132],{"className":45,"code":7131,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" />\n\u003C/Shader>\n",[31,7133,7134,7142,7162],{"__ignoreMap":48},[52,7135,7136,7138,7140],{"class":54,"line":55},[52,7137,59],{"class":58},[52,7139,63],{"class":62},[52,7141,77],{"class":58},[52,7143,7144,7146,7148,7150,7152,7154,7156,7158,7160],{"class":54,"line":80},[52,7145,83],{"class":58},[52,7147,2216],{"class":62},[52,7149,1574],{"class":66},[52,7151,70],{"class":58},[52,7153,2223],{"class":73},[52,7155,3066],{"class":66},[52,7157,70],{"class":58},[52,7159,4547],{"class":73},[52,7161,105],{"class":58},[52,7163,7164,7166,7168],{"class":54,"line":108},[52,7165,121],{"class":58},[52,7167,63],{"class":62},[52,7169,77],{"class":58},[43,7171,7173],{"className":360,"code":7172,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} />\n\u003C/Shader>\n",[31,7174,7175,7183,7205],{"__ignoreMap":48},[52,7176,7177,7179,7181],{"class":54,"line":55},[52,7178,59],{"class":58},[52,7180,63],{"class":371},[52,7182,77],{"class":58},[52,7184,7185,7187,7189,7191,7193,7195,7197,7199,7201,7203],{"class":54,"line":80},[52,7186,83],{"class":58},[52,7188,2216],{"class":371},[52,7190,1574],{"class":66},[52,7192,70],{"class":231},[52,7194,2223],{"class":73},[52,7196,3066],{"class":66},[52,7198,70],{"class":231},[52,7200,723],{"class":58},[52,7202,4620],{"class":371},[52,7204,3167],{"class":58},[52,7206,7207,7209,7211],{"class":54,"line":108},[52,7208,121],{"class":58},[52,7210,63],{"class":371},[52,7212,77],{"class":58},[43,7214,7215],{"className":419,"code":7172,"language":420,"meta":48,"style":48},[31,7216,7217,7225,7247],{"__ignoreMap":48},[52,7218,7219,7221,7223],{"class":54,"line":55},[52,7220,59],{"class":58},[52,7222,63],{"class":371},[52,7224,77],{"class":58},[52,7226,7227,7229,7231,7233,7235,7237,7239,7241,7243,7245],{"class":54,"line":80},[52,7228,83],{"class":58},[52,7230,2216],{"class":371},[52,7232,1574],{"class":66},[52,7234,70],{"class":231},[52,7236,2223],{"class":73},[52,7238,3066],{"class":66},[52,7240,70],{"class":231},[52,7242,723],{"class":58},[52,7244,4620],{"class":371},[52,7246,3167],{"class":58},[52,7248,7249,7251,7253],{"class":54,"line":108},[52,7250,121],{"class":58},[52,7252,63],{"class":371},[52,7254,77],{"class":58},[43,7256,7257],{"className":419,"code":7172,"language":420,"meta":48,"style":48},[31,7258,7259,7267,7289],{"__ignoreMap":48},[52,7260,7261,7263,7265],{"class":54,"line":55},[52,7262,59],{"class":58},[52,7264,63],{"class":371},[52,7266,77],{"class":58},[52,7268,7269,7271,7273,7275,7277,7279,7281,7283,7285,7287],{"class":54,"line":80},[52,7270,83],{"class":58},[52,7272,2216],{"class":371},[52,7274,1574],{"class":66},[52,7276,70],{"class":231},[52,7278,2223],{"class":73},[52,7280,3066],{"class":66},[52,7282,70],{"class":231},[52,7284,723],{"class":58},[52,7286,4620],{"class":371},[52,7288,3167],{"class":58},[52,7290,7291,7293,7295],{"class":54,"line":108},[52,7292,121],{"class":58},[52,7294,63],{"class":371},[52,7296,77],{"class":58},[43,7298,7300],{"className":222,"code":7299,"language":224,"meta":48,"style":48},"const shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ff0088', radius: 0.5 } }\n ]\n})\n",[31,7301,7302,7316,7320,7336,7340],{"__ignoreMap":48},[52,7303,7304,7306,7308,7310,7312,7314],{"class":54,"line":55},[52,7305,1721],{"class":231},[52,7307,1724],{"class":371},[52,7309,1727],{"class":231},[52,7311,1730],{"class":231},[52,7313,1733],{"class":66},[52,7315,1736],{"class":58},[52,7317,7318],{"class":54,"line":80},[52,7319,1751],{"class":58},[52,7321,7322,7324,7326,7328,7330,7332,7334],{"class":54,"line":108},[52,7323,1756],{"class":58},[52,7325,2869],{"class":73},[52,7327,1762],{"class":58},[52,7329,2880],{"class":73},[52,7331,3431],{"class":58},[52,7333,4620],{"class":371},[52,7335,1768],{"class":58},[52,7337,7338],{"class":54,"line":118},[52,7339,1773],{"class":58},[52,7341,7342],{"class":54,"line":594},[52,7343,1778],{"class":58},[15,7345,7346],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,7348,7350],{"id":7349},"reactive-props","Reactive Props",[15,7352,7353],{},"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.",[217,7355,7356,7589,7878,8100,8374],{":tabs":1543},[43,7357,7359],{"className":45,"code":7358,"language":47,"meta":48,"style":48},"\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",[31,7360,7361,7371,7381,7392,7396,7413,7421,7425,7433,7442,7464,7484,7504,7512,7516,7524,7551,7573,7581],{"__ignoreMap":48},[52,7362,7363,7365,7367,7369],{"class":54,"line":55},[52,7364,59],{"class":58},[52,7366,2253],{"class":62},[52,7368,2256],{"class":66},[52,7370,77],{"class":58},[52,7372,7373,7375,7377,7379],{"class":54,"line":80},[52,7374,232],{"class":231},[52,7376,2265],{"class":58},[52,7378,238],{"class":231},[52,7380,2270],{"class":73},[52,7382,7383,7385,7388,7390],{"class":54,"line":108},[52,7384,232],{"class":231},[52,7386,7387],{"class":58}," { Shader, LinearGradient, Circle } ",[52,7389,238],{"class":231},[52,7391,241],{"class":73},[52,7393,7394],{"class":54,"line":118},[52,7395,597],{"emptyLinePlaceholder":171},[52,7397,7398,7400,7403,7405,7407,7409,7411],{"class":54,"line":594},[52,7399,1721],{"class":231},[52,7401,7402],{"class":371}," angle",[52,7404,1727],{"class":231},[52,7406,2286],{"class":66},[52,7408,2289],{"class":58},[52,7410,5540],{"class":371},[52,7412,2295],{"class":58},[52,7414,7415,7417,7419],{"class":54,"line":600},[52,7416,121],{"class":58},[52,7418,2253],{"class":62},[52,7420,77],{"class":58},[52,7422,7423],{"class":54,"line":606},[52,7424,597],{"emptyLinePlaceholder":171},[52,7426,7427,7429,7431],{"class":54,"line":653},[52,7428,59],{"class":58},[52,7430,2182],{"class":62},[52,7432,77],{"class":58},[52,7434,7435,7437,7440],{"class":54,"line":662},[52,7436,83],{"class":58},[52,7438,7439],{"class":62},"div",[52,7441,77],{"class":58},[52,7443,7444,7446,7449,7452,7454,7457,7460,7462],{"class":54,"line":671},[52,7445,2213],{"class":58},[52,7447,7448],{"class":62},"button",[52,7450,7451],{"class":66}," @click",[52,7453,70],{"class":58},[52,7455,7456],{"class":73},"\"angle += 45\"",[52,7458,7459],{"class":58},">Rotate +45°\u003C/",[52,7461,7448],{"class":62},[52,7463,77],{"class":58},[52,7465,7466,7468,7470,7472,7474,7477,7480,7482],{"class":54,"line":676},[52,7467,2213],{"class":58},[52,7469,7448],{"class":62},[52,7471,7451],{"class":66},[52,7473,70],{"class":58},[52,7475,7476],{"class":73},"\"angle -= 45\"",[52,7478,7479],{"class":58},">Rotate -45°\u003C/",[52,7481,7448],{"class":62},[52,7483,77],{"class":58},[52,7485,7486,7488,7490,7492,7494,7497,7500,7502],{"class":54,"line":682},[52,7487,2213],{"class":58},[52,7489,7448],{"class":62},[52,7491,7451],{"class":66},[52,7493,70],{"class":58},[52,7495,7496],{"class":73},"\"angle = 0\"",[52,7498,7499],{"class":58},">Reset\u003C/",[52,7501,7448],{"class":62},[52,7503,77],{"class":58},[52,7505,7506,7508,7510],{"class":54,"line":698},[52,7507,2230],{"class":58},[52,7509,7439],{"class":62},[52,7511,77],{"class":58},[52,7513,7514],{"class":54,"line":707},[52,7515,597],{"emptyLinePlaceholder":171},[52,7517,7518,7520,7522],{"class":54,"line":2327},[52,7519,83],{"class":58},[52,7521,63],{"class":62},[52,7523,77],{"class":58},[52,7525,7526,7528,7530,7532,7534,7537,7539,7541,7543,7545,7547,7549],{"class":54,"line":6522},[52,7527,2213],{"class":58},[52,7529,2216],{"class":62},[52,7531,5968],{"class":66},[52,7533,70],{"class":58},[52,7535,7536],{"class":73},"\"mask\"",[52,7538,3066],{"class":66},[52,7540,70],{"class":58},[52,7542,3071],{"class":73},[52,7544,5982],{"class":66},[52,7546,70],{"class":58},[52,7548,5987],{"class":73},[52,7550,105],{"class":58},[52,7552,7553,7555,7557,7560,7562,7565,7567,7569,7571],{"class":54,"line":6532},[52,7554,2213],{"class":58},[52,7556,86],{"class":62},[52,7558,7559],{"class":66}," :angle",[52,7561,70],{"class":58},[52,7563,7564],{"class":73},"\"angle\"",[52,7566,6007],{"class":66},[52,7568,70],{"class":58},[52,7570,7536],{"class":73},[52,7572,105],{"class":58},[52,7574,7575,7577,7579],{"class":54,"line":6543},[52,7576,2230],{"class":58},[52,7578,63],{"class":62},[52,7580,77],{"class":58},[52,7582,7583,7585,7587],{"class":54,"line":6548},[52,7584,121],{"class":58},[52,7586,2182],{"class":62},[52,7588,77],{"class":58},[43,7590,7592],{"className":360,"code":7591,"language":362,"meta":48,"style":48},"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",[31,7593,7594,7604,7614,7618,7627,7652,7656,7662,7667,7675,7718,7754,7781,7790,7794,7802,7834,7855,7863,7868,7873],{"__ignoreMap":48},[52,7595,7596,7598,7600,7602],{"class":54,"line":55},[52,7597,232],{"class":231},[52,7599,2345],{"class":58},[52,7601,238],{"class":231},[52,7603,2350],{"class":73},[52,7605,7606,7608,7610,7612],{"class":54,"line":80},[52,7607,232],{"class":231},[52,7609,7387],{"class":58},[52,7611,238],{"class":231},[52,7613,257],{"class":73},[52,7615,7616],{"class":54,"line":108},[52,7617,597],{"emptyLinePlaceholder":171},[52,7619,7620,7622,7625],{"class":54,"line":118},[52,7621,2304],{"class":231},[52,7623,7624],{"class":66}," MyComponent",[52,7626,2310],{"class":58},[52,7628,7629,7631,7633,7635,7637,7640,7642,7644,7646,7648,7650],{"class":54,"line":594},[52,7630,2368],{"class":231},[52,7632,2371],{"class":58},[52,7634,1199],{"class":371},[52,7636,1881],{"class":58},[52,7638,7639],{"class":371},"setAngle",[52,7641,2382],{"class":58},[52,7643,70],{"class":231},[52,7645,2387],{"class":66},[52,7647,2289],{"class":58},[52,7649,5540],{"class":371},[52,7651,2295],{"class":58},[52,7653,7654],{"class":54,"line":600},[52,7655,597],{"emptyLinePlaceholder":171},[52,7657,7658,7660],{"class":54,"line":606},[52,7659,2402],{"class":231},[52,7661,2405],{"class":58},[52,7663,7664],{"class":54,"line":653},[52,7665,7666],{"class":58}," \u003C>\n",[52,7668,7669,7671,7673],{"class":54,"line":662},[52,7670,2476],{"class":58},[52,7672,7439],{"class":62},[52,7674,77],{"class":58},[52,7676,7677,7680,7682,7685,7687,7689,7691,7694,7696,7699,7702,7705,7708,7711,7714,7716],{"class":54,"line":671},[52,7678,7679],{"class":58}," \u003C",[52,7681,7448],{"class":62},[52,7683,7684],{"class":66}," onClick",[52,7686,70],{"class":231},[52,7688,2422],{"class":58},[52,7690,2425],{"class":231},[52,7692,7693],{"class":66}," setAngle",[52,7695,2289],{"class":58},[52,7697,1139],{"class":7698},"s9osk",[52,7700,7701],{"class":231}," =>",[52,7703,7704],{"class":58}," a ",[52,7706,7707],{"class":231},"+",[52,7709,7710],{"class":371}," 45",[52,7712,7713],{"class":58},")}>Rotate +45°\u003C/",[52,7715,7448],{"class":62},[52,7717,77],{"class":58},[52,7719,7720,7722,7724,7726,7728,7730,7732,7734,7736,7738,7740,7742,7745,7747,7750,7752],{"class":54,"line":676},[52,7721,7679],{"class":58},[52,7723,7448],{"class":62},[52,7725,7684],{"class":66},[52,7727,70],{"class":231},[52,7729,2422],{"class":58},[52,7731,2425],{"class":231},[52,7733,7693],{"class":66},[52,7735,2289],{"class":58},[52,7737,1139],{"class":7698},[52,7739,7701],{"class":231},[52,7741,7704],{"class":58},[52,7743,7744],{"class":231},"-",[52,7746,7710],{"class":371},[52,7748,7749],{"class":58},")}>Rotate -45°\u003C/",[52,7751,7448],{"class":62},[52,7753,77],{"class":58},[52,7755,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774,7777,7779],{"class":54,"line":682},[52,7757,7679],{"class":58},[52,7759,7448],{"class":62},[52,7761,7684],{"class":66},[52,7763,70],{"class":231},[52,7765,2422],{"class":58},[52,7767,2425],{"class":231},[52,7769,7693],{"class":66},[52,7771,2289],{"class":58},[52,7773,5540],{"class":371},[52,7775,7776],{"class":58},")}>Reset\u003C/",[52,7778,7448],{"class":62},[52,7780,77],{"class":58},[52,7782,7783,7786,7788],{"class":54,"line":698},[52,7784,7785],{"class":58}," \u003C/",[52,7787,7439],{"class":62},[52,7789,77],{"class":58},[52,7791,7792],{"class":54,"line":707},[52,7793,597],{"emptyLinePlaceholder":171},[52,7795,7796,7798,7800],{"class":54,"line":2327},[52,7797,2476],{"class":58},[52,7799,63],{"class":371},[52,7801,77],{"class":58},[52,7803,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824,7826,7828,7830,7832],{"class":54,"line":6522},[52,7805,7679],{"class":58},[52,7807,2216],{"class":371},[52,7809,5968],{"class":66},[52,7811,70],{"class":231},[52,7813,7536],{"class":73},[52,7815,3066],{"class":66},[52,7817,70],{"class":231},[52,7819,723],{"class":58},[52,7821,3164],{"class":371},[52,7823,2577],{"class":58},[52,7825,2374],{"class":66},[52,7827,70],{"class":231},[52,7829,723],{"class":58},[52,7831,2292],{"class":371},[52,7833,3167],{"class":58},[52,7835,7836,7838,7840,7842,7844,7847,7849,7851,7853],{"class":54,"line":6532},[52,7837,7679],{"class":58},[52,7839,86],{"class":371},[52,7841,7402],{"class":66},[52,7843,70],{"class":231},[52,7845,7846],{"class":58},"{angle} ",[52,7848,5932],{"class":66},[52,7850,70],{"class":231},[52,7852,7536],{"class":73},[52,7854,105],{"class":58},[52,7856,7857,7859,7861],{"class":54,"line":6543},[52,7858,7785],{"class":58},[52,7860,63],{"class":371},[52,7862,77],{"class":58},[52,7864,7865],{"class":54,"line":6548},[52,7866,7867],{"class":58}," \u003C/>\n",[52,7869,7871],{"class":54,"line":7870},20,[52,7872,2500],{"class":58},[52,7874,7876],{"class":54,"line":7875},21,[52,7877,729],{"class":58},[43,7879,7881],{"className":419,"code":7880,"language":420,"meta":48,"style":48},"\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",[31,7882,7883,7891,7896,7900,7905,7913,7917,7925,7960,7992,8023,8031,8035,8043,8075,8092],{"__ignoreMap":48},[52,7884,7885,7887,7889],{"class":54,"line":55},[52,7886,59],{"class":58},[52,7888,2253],{"class":62},[52,7890,77],{"class":58},[52,7892,7893],{"class":54,"line":80},[52,7894,7895],{"class":58}," import { Shader, LinearGradient, Circle } from 'shaders/svelte'\n",[52,7897,7898],{"class":54,"line":108},[52,7899,597],{"emptyLinePlaceholder":171},[52,7901,7902],{"class":54,"line":118},[52,7903,7904],{"class":58}," let angle = 0\n",[52,7906,7907,7909,7911],{"class":54,"line":594},[52,7908,121],{"class":58},[52,7910,2253],{"class":62},[52,7912,77],{"class":58},[52,7914,7915],{"class":54,"line":600},[52,7916,597],{"emptyLinePlaceholder":171},[52,7918,7919,7921,7923],{"class":54,"line":606},[52,7920,59],{"class":58},[52,7922,7439],{"class":62},[52,7924,77],{"class":58},[52,7926,7927,7929,7931,7934,7936,7939,7941,7943,7945,7948,7951,7953,7956,7958],{"class":54,"line":653},[52,7928,83],{"class":58},[52,7930,7448],{"class":62},[52,7932,7933],{"class":66}," on",[52,7935,1540],{"class":58},[52,7937,7938],{"class":66},"click",[52,7940,70],{"class":231},[52,7942,2422],{"class":58},[52,7944,2425],{"class":231},[52,7946,7947],{"class":58}," angle ",[52,7949,7950],{"class":231},"+=",[52,7952,7710],{"class":371},[52,7954,7955],{"class":58},"}>Rotate +45°\u003C/",[52,7957,7448],{"class":62},[52,7959,77],{"class":58},[52,7961,7962,7964,7966,7968,7970,7972,7974,7976,7978,7980,7983,7985,7988,7990],{"class":54,"line":662},[52,7963,83],{"class":58},[52,7965,7448],{"class":62},[52,7967,7933],{"class":66},[52,7969,1540],{"class":58},[52,7971,7938],{"class":66},[52,7973,70],{"class":231},[52,7975,2422],{"class":58},[52,7977,2425],{"class":231},[52,7979,7947],{"class":58},[52,7981,7982],{"class":231},"-=",[52,7984,7710],{"class":371},[52,7986,7987],{"class":58},"}>Rotate -45°\u003C/",[52,7989,7448],{"class":62},[52,7991,77],{"class":58},[52,7993,7994,7996,7998,8000,8002,8004,8006,8008,8010,8012,8014,8016,8019,8021],{"class":54,"line":671},[52,7995,83],{"class":58},[52,7997,7448],{"class":62},[52,7999,7933],{"class":66},[52,8001,1540],{"class":58},[52,8003,7938],{"class":66},[52,8005,70],{"class":231},[52,8007,2422],{"class":58},[52,8009,2425],{"class":231},[52,8011,7947],{"class":58},[52,8013,70],{"class":231},[52,8015,2457],{"class":371},[52,8017,8018],{"class":58},"}>Reset\u003C/",[52,8020,7448],{"class":62},[52,8022,77],{"class":58},[52,8024,8025,8027,8029],{"class":54,"line":676},[52,8026,121],{"class":58},[52,8028,7439],{"class":62},[52,8030,77],{"class":58},[52,8032,8033],{"class":54,"line":682},[52,8034,597],{"emptyLinePlaceholder":171},[52,8036,8037,8039,8041],{"class":54,"line":698},[52,8038,59],{"class":58},[52,8040,63],{"class":371},[52,8042,77],{"class":58},[52,8044,8045,8047,8049,8051,8053,8055,8057,8059,8061,8063,8065,8067,8069,8071,8073],{"class":54,"line":707},[52,8046,83],{"class":58},[52,8048,2216],{"class":371},[52,8050,5968],{"class":66},[52,8052,70],{"class":231},[52,8054,7536],{"class":73},[52,8056,3066],{"class":66},[52,8058,70],{"class":231},[52,8060,723],{"class":58},[52,8062,3164],{"class":371},[52,8064,2577],{"class":58},[52,8066,2374],{"class":66},[52,8068,70],{"class":231},[52,8070,723],{"class":58},[52,8072,2292],{"class":371},[52,8074,3167],{"class":58},[52,8076,8077,8079,8081,8084,8086,8088,8090],{"class":54,"line":2327},[52,8078,83],{"class":58},[52,8080,86],{"class":371},[52,8082,8083],{"class":58}," {angle} ",[52,8085,5932],{"class":66},[52,8087,70],{"class":231},[52,8089,7536],{"class":73},[52,8091,105],{"class":58},[52,8093,8094,8096,8098],{"class":54,"line":6522},[52,8095,121],{"class":58},[52,8097,63],{"class":371},[52,8099,77],{"class":58},[43,8101,8103],{"className":419,"code":8102,"language":420,"meta":48,"style":48},"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",[31,8104,8105,8115,8125,8129,8137,8161,8165,8171,8175,8183,8217,8251,8277,8285,8289,8297,8329,8354,8362,8366,8370],{"__ignoreMap":48},[52,8106,8107,8109,8111,8113],{"class":54,"line":55},[52,8108,232],{"class":231},[52,8110,2645],{"class":58},[52,8112,238],{"class":231},[52,8114,2650],{"class":73},[52,8116,8117,8119,8121,8123],{"class":54,"line":80},[52,8118,232],{"class":231},[52,8120,7387],{"class":58},[52,8122,238],{"class":231},[52,8124,289],{"class":73},[52,8126,8127],{"class":54,"line":108},[52,8128,597],{"emptyLinePlaceholder":171},[52,8130,8131,8133,8135],{"class":54,"line":118},[52,8132,2304],{"class":231},[52,8134,7624],{"class":66},[52,8136,2310],{"class":58},[52,8138,8139,8141,8143,8145,8147,8149,8151,8153,8155,8157,8159],{"class":54,"line":594},[52,8140,2368],{"class":231},[52,8142,2371],{"class":58},[52,8144,1199],{"class":371},[52,8146,1881],{"class":58},[52,8148,7639],{"class":371},[52,8150,2382],{"class":58},[52,8152,70],{"class":231},[52,8154,2681],{"class":66},[52,8156,2289],{"class":58},[52,8158,5540],{"class":371},[52,8160,2295],{"class":58},[52,8162,8163],{"class":54,"line":600},[52,8164,597],{"emptyLinePlaceholder":171},[52,8166,8167,8169],{"class":54,"line":606},[52,8168,2402],{"class":231},[52,8170,2405],{"class":58},[52,8172,8173],{"class":54,"line":653},[52,8174,7666],{"class":58},[52,8176,8177,8179,8181],{"class":54,"line":662},[52,8178,2476],{"class":58},[52,8180,7439],{"class":62},[52,8182,77],{"class":58},[52,8184,8185,8187,8189,8191,8193,8195,8197,8199,8201,8203,8205,8207,8209,8211,8213,8215],{"class":54,"line":671},[52,8186,7679],{"class":58},[52,8188,7448],{"class":62},[52,8190,7684],{"class":66},[52,8192,70],{"class":231},[52,8194,2422],{"class":58},[52,8196,2425],{"class":231},[52,8198,7693],{"class":66},[52,8200,2289],{"class":58},[52,8202,1139],{"class":7698},[52,8204,7701],{"class":231},[52,8206,7704],{"class":58},[52,8208,7707],{"class":231},[52,8210,7710],{"class":371},[52,8212,7713],{"class":58},[52,8214,7448],{"class":62},[52,8216,77],{"class":58},[52,8218,8219,8221,8223,8225,8227,8229,8231,8233,8235,8237,8239,8241,8243,8245,8247,8249],{"class":54,"line":676},[52,8220,7679],{"class":58},[52,8222,7448],{"class":62},[52,8224,7684],{"class":66},[52,8226,70],{"class":231},[52,8228,2422],{"class":58},[52,8230,2425],{"class":231},[52,8232,7693],{"class":66},[52,8234,2289],{"class":58},[52,8236,1139],{"class":7698},[52,8238,7701],{"class":231},[52,8240,7704],{"class":58},[52,8242,7744],{"class":231},[52,8244,7710],{"class":371},[52,8246,7749],{"class":58},[52,8248,7448],{"class":62},[52,8250,77],{"class":58},[52,8252,8253,8255,8257,8259,8261,8263,8265,8267,8269,8271,8273,8275],{"class":54,"line":682},[52,8254,7679],{"class":58},[52,8256,7448],{"class":62},[52,8258,7684],{"class":66},[52,8260,70],{"class":231},[52,8262,2422],{"class":58},[52,8264,2425],{"class":231},[52,8266,7693],{"class":66},[52,8268,2289],{"class":58},[52,8270,5540],{"class":371},[52,8272,7776],{"class":58},[52,8274,7448],{"class":62},[52,8276,77],{"class":58},[52,8278,8279,8281,8283],{"class":54,"line":698},[52,8280,7785],{"class":58},[52,8282,7439],{"class":62},[52,8284,77],{"class":58},[52,8286,8287],{"class":54,"line":707},[52,8288,597],{"emptyLinePlaceholder":171},[52,8290,8291,8293,8295],{"class":54,"line":2327},[52,8292,2476],{"class":58},[52,8294,63],{"class":371},[52,8296,77],{"class":58},[52,8298,8299,8301,8303,8305,8307,8309,8311,8313,8315,8317,8319,8321,8323,8325,8327],{"class":54,"line":6522},[52,8300,7679],{"class":58},[52,8302,2216],{"class":371},[52,8304,5968],{"class":66},[52,8306,70],{"class":231},[52,8308,7536],{"class":73},[52,8310,3066],{"class":66},[52,8312,70],{"class":231},[52,8314,723],{"class":58},[52,8316,3164],{"class":371},[52,8318,2577],{"class":58},[52,8320,2374],{"class":66},[52,8322,70],{"class":231},[52,8324,723],{"class":58},[52,8326,2292],{"class":371},[52,8328,3167],{"class":58},[52,8330,8331,8333,8335,8337,8339,8341,8343,8346,8348,8350,8352],{"class":54,"line":6532},[52,8332,7679],{"class":58},[52,8334,86],{"class":371},[52,8336,7402],{"class":66},[52,8338,70],{"class":231},[52,8340,723],{"class":58},[52,8342,1199],{"class":66},[52,8344,8345],{"class":58},"()} ",[52,8347,5932],{"class":66},[52,8349,70],{"class":231},[52,8351,7536],{"class":73},[52,8353,105],{"class":58},[52,8355,8356,8358,8360],{"class":54,"line":6543},[52,8357,7785],{"class":58},[52,8359,63],{"class":371},[52,8361,77],{"class":58},[52,8363,8364],{"class":54,"line":6548},[52,8365,7867],{"class":58},[52,8367,8368],{"class":54,"line":7870},[52,8369,2500],{"class":58},[52,8371,8372],{"class":54,"line":7875},[52,8373,729],{"class":58},[43,8375,8377],{"className":222,"code":8376,"language":224,"meta":48,"style":48},"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",[31,8378,8379,8391,8395,8409,8413,8433,8455,8459,8463,8467,8472,8492,8496,8501],{"__ignoreMap":48},[52,8380,8381,8383,8386,8388],{"class":54,"line":55},[52,8382,232],{"class":231},[52,8384,8385],{"class":58}," { createShader } ",[52,8387,238],{"class":231},[52,8389,8390],{"class":73}," 'shaders/js'\n",[52,8392,8393],{"class":54,"line":80},[52,8394,597],{"emptyLinePlaceholder":171},[52,8396,8397,8399,8401,8403,8405,8407],{"class":54,"line":108},[52,8398,1721],{"class":231},[52,8400,1724],{"class":371},[52,8402,1727],{"class":231},[52,8404,1730],{"class":231},[52,8406,1733],{"class":66},[52,8408,1736],{"class":58},[52,8410,8411],{"class":54,"line":118},[52,8412,1751],{"class":58},[52,8414,8415,8417,8419,8421,8423,8425,8427,8429,8431],{"class":54,"line":594},[52,8416,1756],{"class":58},[52,8418,2869],{"class":73},[52,8420,2872],{"class":58},[52,8422,7033],{"class":73},[52,8424,4407],{"class":58},[52,8426,3164],{"class":371},[52,8428,6323],{"class":58},[52,8430,2292],{"class":371},[52,8432,3436],{"class":58},[52,8434,8435,8437,8439,8441,8444,8447,8449,8451,8453],{"class":54,"line":600},[52,8436,1756],{"class":58},[52,8438,2126],{"class":73},[52,8440,2872],{"class":58},[52,8442,8443],{"class":73},"'gradient'",[52,8445,8446],{"class":58},", props: { angle: ",[52,8448,5540],{"class":371},[52,8450,7068],{"class":58},[52,8452,7033],{"class":73},[52,8454,1768],{"class":58},[52,8456,8457],{"class":54,"line":606},[52,8458,1773],{"class":58},[52,8460,8461],{"class":54,"line":653},[52,8462,1778],{"class":58},[52,8464,8465],{"class":54,"line":662},[52,8466,597],{"emptyLinePlaceholder":171},[52,8468,8469],{"class":54,"line":671},[52,8470,8471],{"class":559},"// Update angle at runtime\n",[52,8473,8474,8477,8480,8482,8484,8487,8489],{"class":54,"line":676},[52,8475,8476],{"class":58},"shader.",[52,8478,8479],{"class":66},"update",[52,8481,2289],{"class":58},[52,8483,8443],{"class":73},[52,8485,8486],{"class":58},", { angle: ",[52,8488,1206],{"class":371},[52,8490,8491],{"class":58}," })\n",[52,8493,8494],{"class":54,"line":682},[52,8495,597],{"emptyLinePlaceholder":171},[52,8497,8498],{"class":54,"line":698},[52,8499,8500],{"class":559},"// Reset angle\n",[52,8502,8503,8505,8507,8509,8511,8513,8515],{"class":54,"line":707},[52,8504,8476],{"class":58},[52,8506,8479],{"class":66},[52,8508,2289],{"class":58},[52,8510,8443],{"class":73},[52,8512,8486],{"class":58},[52,8514,5540],{"class":371},[52,8516,8491],{"class":58},[15,8518,8519],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[8521,8522],"interactive-shader-demo",{":controls":8523,":preset":8524},"[{\"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,8526,8527],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,8529,8531],{"id":8530},"common-reactive-props","Common Reactive Props",[15,8533,8534],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,8536,8537,1540],{},[151,8538,8539],{},"Position and Size",[43,8541,8543],{"className":5884,"code":8542,"language":5886,"meta":48,"style":48},"\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" />\n",[31,8544,8545],{"__ignoreMap":48},[52,8546,8547,8549,8551,8553,8556,8558,8560,8563,8565,8567,8569,8571,8573,8576,8578],{"class":54,"line":55},[52,8548,59],{"class":58},[52,8550,2216],{"class":62},[52,8552,2454],{"class":58},[52,8554,8555],{"class":66},"radius",[52,8557,70],{"class":58},[52,8559,618],{"class":73},[52,8561,8562],{"class":58},"size",[52,8564,618],{"class":73},[52,8566,2454],{"class":58},[52,8568,5108],{"class":66},[52,8570,70],{"class":58},[52,8572,618],{"class":73},[52,8574,8575],{"class":58},"{ x: posX, y: posY }",[52,8577,618],{"class":73},[52,8579,105],{"class":58},[15,8581,8582,1540],{},[151,8583,8584],{},"Colors",[43,8586,8588],{"className":5884,"code":8587,"language":5886,"meta":48,"style":48},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" />\n",[31,8589,8590],{"__ignoreMap":48},[52,8591,8592,8594,8596,8598,8600,8602,8604,8607,8609,8611,8613,8615,8617,8620,8622],{"class":54,"line":55},[52,8593,59],{"class":58},[52,8595,86],{"class":62},[52,8597,2454],{"class":58},[52,8599,1849],{"class":66},[52,8601,70],{"class":58},[52,8603,618],{"class":73},[52,8605,8606],{"class":58},"startColor",[52,8608,618],{"class":73},[52,8610,2454],{"class":58},[52,8612,1853],{"class":66},[52,8614,70],{"class":58},[52,8616,618],{"class":73},[52,8618,8619],{"class":58},"endColor",[52,8621,618],{"class":73},[52,8623,105],{"class":58},[15,8625,8626,1540],{},[151,8627,8628],{},"Intensity and Strength",[43,8630,8632],{"className":5884,"code":8631,"language":5886,"meta":48,"style":48},"\u003CBlur :intensity=\"blurAmount\" />\n\u003CGlow :strength=\"glowPower\" />\n",[31,8633,8634,8657],{"__ignoreMap":48},[52,8635,8636,8638,8641,8643,8646,8648,8650,8653,8655],{"class":54,"line":55},[52,8637,59],{"class":58},[52,8639,8640],{"class":62},"Blur",[52,8642,2454],{"class":58},[52,8644,8645],{"class":66},"intensity",[52,8647,70],{"class":58},[52,8649,618],{"class":73},[52,8651,8652],{"class":58},"blurAmount",[52,8654,618],{"class":73},[52,8656,105],{"class":58},[52,8658,8659,8661,8664,8666,8669,8671,8673,8676,8678],{"class":54,"line":80},[52,8660,59],{"class":58},[52,8662,8663],{"class":62},"Glow",[52,8665,2454],{"class":58},[52,8667,8668],{"class":66},"strength",[52,8670,70],{"class":58},[52,8672,618],{"class":73},[52,8674,8675],{"class":58},"glowPower",[52,8677,618],{"class":73},[52,8679,105],{"class":58},[15,8681,8682,1540],{},[151,8683,8684],{},"Angles and Rotation",[43,8686,8688],{"className":5884,"code":8687,"language":5886,"meta":48,"style":48},"\u003CLinearGradient :angle=\"rotation\" />\n",[31,8689,8690],{"__ignoreMap":48},[52,8691,8692,8694,8696,8698,8700,8702,8704,8707,8709],{"class":54,"line":55},[52,8693,59],{"class":58},[52,8695,86],{"class":62},[52,8697,2454],{"class":58},[52,8699,1199],{"class":66},[52,8701,70],{"class":58},[52,8703,618],{"class":73},[52,8705,8706],{"class":58},"rotation",[52,8708,618],{"class":73},[52,8710,105],{"class":58},[15,8712,8713],{},"Every numerical prop, color prop, and position prop can be reactive. Bind them to sliders, scroll position, mouse coordinates, or any other dynamic value.",[23,8715,8717],{"id":8716},"animating-props","Animating Props",[15,8719,8720],{},"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,8722,8723,8726],{},[151,8724,8725],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte/Solid.",[43,8728,8730],{"className":360,"code":8729,"language":362,"meta":48,"style":48},"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",[31,8731,8732,8742,8754,8764,8768,8776,8801,8805,8818,8823,8839,8848,8858,8880,8885,8901,8909,8918,8934,8938,8942,8946,8953,8958,8976,8981,8990,9020,9035,9044,9049,9054],{"__ignoreMap":48},[52,8733,8734,8736,8738,8740],{"class":54,"line":55},[52,8735,232],{"class":231},[52,8737,2345],{"class":58},[52,8739,238],{"class":231},[52,8741,2350],{"class":73},[52,8743,8744,8746,8749,8751],{"class":54,"line":80},[52,8745,232],{"class":231},[52,8747,8748],{"class":58}," { animate } ",[52,8750,238],{"class":231},[52,8752,8753],{"class":73}," 'motion'\n",[52,8755,8756,8758,8760,8762],{"class":54,"line":108},[52,8757,232],{"class":231},[52,8759,7387],{"class":58},[52,8761,238],{"class":231},[52,8763,257],{"class":73},[52,8765,8766],{"class":54,"line":118},[52,8767,597],{"emptyLinePlaceholder":171},[52,8769,8770,8772,8774],{"class":54,"line":594},[52,8771,2304],{"class":231},[52,8773,7624],{"class":66},[52,8775,2310],{"class":58},[52,8777,8778,8780,8782,8784,8786,8789,8791,8793,8795,8797,8799],{"class":54,"line":600},[52,8779,2368],{"class":231},[52,8781,2371],{"class":58},[52,8783,8555],{"class":371},[52,8785,1881],{"class":58},[52,8787,8788],{"class":371},"setRadius",[52,8790,2382],{"class":58},[52,8792,70],{"class":231},[52,8794,2387],{"class":66},[52,8796,2289],{"class":58},[52,8798,5103],{"class":371},[52,8800,2295],{"class":58},[52,8802,8803],{"class":54,"line":606},[52,8804,597],{"emptyLinePlaceholder":171},[52,8806,8807,8810,8813,8816],{"class":54,"line":653},[52,8808,8809],{"class":231}," async",[52,8811,8812],{"class":231}," function",[52,8814,8815],{"class":66}," pulse",[52,8817,2310],{"class":58},[52,8819,8820],{"class":54,"line":662},[52,8821,8822],{"class":559}," // Grow then shrink with smooth easing\n",[52,8824,8825,8828,8831,8834,8836],{"class":54,"line":671},[52,8826,8827],{"class":231}," await",[52,8829,8830],{"class":66}," animate",[52,8832,8833],{"class":58},"(radius, ",[52,8835,5544],{"class":371},[52,8837,8838],{"class":58},", {\n",[52,8840,8841,8844,8846],{"class":54,"line":676},[52,8842,8843],{"class":58}," duration: ",[52,8845,4620],{"class":371},[52,8847,1746],{"class":58},[52,8849,8850,8853,8856],{"class":54,"line":682},[52,8851,8852],{"class":58}," easing: ",[52,8854,8855],{"class":73},"'ease-out'",[52,8857,1746],{"class":58},[52,8859,8860,8863,8866,8869,8872,8874,8877],{"class":54,"line":698},[52,8861,8862],{"class":66}," onUpdate",[52,8864,8865],{"class":58},": (",[52,8867,8868],{"class":7698},"latest",[52,8870,8871],{"class":58},") ",[52,8873,2425],{"class":231},[52,8875,8876],{"class":66}," setRadius",[52,8878,8879],{"class":58},"(latest)\n",[52,8881,8882],{"class":54,"line":707},[52,8883,8884],{"class":58}," })\n",[52,8886,8887,8889,8891,8893,8895,8897,8899],{"class":54,"line":2327},[52,8888,8827],{"class":231},[52,8890,8830],{"class":66},[52,8892,2289],{"class":58},[52,8894,5544],{"class":371},[52,8896,1881],{"class":58},[52,8898,5103],{"class":371},[52,8900,8838],{"class":58},[52,8902,8903,8905,8907],{"class":54,"line":6522},[52,8904,8843],{"class":58},[52,8906,4620],{"class":371},[52,8908,1746],{"class":58},[52,8910,8911,8913,8916],{"class":54,"line":6532},[52,8912,8852],{"class":58},[52,8914,8915],{"class":73},"'ease-in'",[52,8917,1746],{"class":58},[52,8919,8920,8922,8924,8926,8928,8930,8932],{"class":54,"line":6543},[52,8921,8862],{"class":66},[52,8923,8865],{"class":58},[52,8925,8868],{"class":7698},[52,8927,8871],{"class":58},[52,8929,2425],{"class":231},[52,8931,8876],{"class":66},[52,8933,8879],{"class":58},[52,8935,8936],{"class":54,"line":6548},[52,8937,8884],{"class":58},[52,8939,8940],{"class":54,"line":7870},[52,8941,2919],{"class":58},[52,8943,8944],{"class":54,"line":7875},[52,8945,597],{"emptyLinePlaceholder":171},[52,8947,8949,8951],{"class":54,"line":8948},22,[52,8950,2402],{"class":231},[52,8952,2405],{"class":58},[52,8954,8956],{"class":54,"line":8955},23,[52,8957,7666],{"class":58},[52,8959,8961,8963,8965,8967,8969,8972,8974],{"class":54,"line":8960},24,[52,8962,2476],{"class":58},[52,8964,7448],{"class":62},[52,8966,7684],{"class":66},[52,8968,70],{"class":231},[52,8970,8971],{"class":58},"{pulse}>Pulse\u003C/",[52,8973,7448],{"class":62},[52,8975,77],{"class":58},[52,8977,8979],{"class":54,"line":8978},25,[52,8980,597],{"emptyLinePlaceholder":171},[52,8982,8984,8986,8988],{"class":54,"line":8983},26,[52,8985,2476],{"class":58},[52,8987,63],{"class":371},[52,8989,77],{"class":58},[52,8991,8993,8995,8997,8999,9001,9003,9005,9007,9010,9012,9014,9016,9018],{"class":54,"line":8992},27,[52,8994,7679],{"class":58},[52,8996,2216],{"class":371},[52,8998,5968],{"class":66},[52,9000,70],{"class":231},[52,9002,7536],{"class":73},[52,9004,3066],{"class":66},[52,9006,70],{"class":231},[52,9008,9009],{"class":58},"{radius} ",[52,9011,2374],{"class":66},[52,9013,70],{"class":231},[52,9015,723],{"class":58},[52,9017,2292],{"class":371},[52,9019,3167],{"class":58},[52,9021,9023,9025,9027,9029,9031,9033],{"class":54,"line":9022},28,[52,9024,7679],{"class":58},[52,9026,86],{"class":371},[52,9028,6007],{"class":66},[52,9030,70],{"class":231},[52,9032,7536],{"class":73},[52,9034,105],{"class":58},[52,9036,9038,9040,9042],{"class":54,"line":9037},29,[52,9039,7785],{"class":58},[52,9041,63],{"class":371},[52,9043,77],{"class":58},[52,9045,9047],{"class":54,"line":9046},30,[52,9048,7867],{"class":58},[52,9050,9052],{"class":54,"line":9051},31,[52,9053,2500],{"class":58},[52,9055,9057],{"class":54,"line":9056},32,[52,9058,729],{"class":58},[8521,9060],{":controls":9061,":preset":9062},"[{\"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,9064,9065],{},"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.",[23,9067,9069],{"id":9068},"performance-notes","Performance Notes",[15,9071,9072],{},"Reactive props update GPU uniforms directly. This means:",[1465,9074,9075,9081,9087],{},[1468,9076,9077,9080],{},[151,9078,9079],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[1468,9082,9083,9086],{},[151,9084,9085],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[1468,9088,9089,9092],{},[151,9090,9091],{},"Frame-rate friendly",": Animate as many props as you need",[15,9094,9095],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[156,9097,9098],{},"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":48,"searchDepth":80,"depth":80,"links":9100},[9101,9102,9103,9104,9105],{"id":7122,"depth":80,"text":7123},{"id":7349,"depth":80,"text":7350},{"id":8530,"depth":80,"text":8531},{"id":8716,"depth":80,"text":8717},{"id":9068,"depth":80,"text":9069},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1487,"description":9106},"docs/guide/4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":9113,"title":1480,"body":9114,"category":165,"description":11881,"exclude":167,"extension":168,"forceFramework":167,"icon":11882,"meta":11883,"navigation":171,"path":1479,"seo":11884,"stem":11885,"__hash__":11886},"guide/docs/guide/5.layout-positioning.md",{"type":8,"value":9115,"toc":11865},[9116,9119,9127,9131,9140,9142,9147,9446,9450,9454,9457,9885,9889,9899,10247,10251,10254,10815,10819,10822,11136,11140,11144,11151,11292,11304,11308,11319,11394,11398,11401,11628,11632,11635,11862],[11,9117,1480],{"id":9118},"layout-positioning",[15,9120,1825,9121,9123,9124,9126],{},[31,9122,33],{}," component renders a ",[31,9125,40],{}," 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.",[23,9128,9130],{"id":9129},"the-canvas-model","The canvas model",[15,9132,9133,9134,9136,9137,9139],{},"Every ",[31,9135,33],{}," renders exactly one ",[31,9138,40],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,9141,544],{"id":543},[15,9143,9144,9145,3483],{},"Apply classes or styles directly to the ",[31,9146,33],{},[217,9148,9149,9268,9303,9338,9372],{":tabs":1543},[43,9150,9152],{"className":45,"code":9151,"language":47,"meta":48,"style":48},"\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",[31,9153,9154,9159,9173,9181,9189,9193,9198,9213,9221,9229,9233,9238,9252,9260],{"__ignoreMap":48},[52,9155,9156],{"class":54,"line":55},[52,9157,9158],{"class":559},"\u003C!-- Tailwind -->\n",[52,9160,9161,9163,9165,9167,9169,9171],{"class":54,"line":80},[52,9162,59],{"class":58},[52,9164,63],{"class":62},[52,9166,67],{"class":66},[52,9168,70],{"class":58},[52,9170,319],{"class":73},[52,9172,77],{"class":58},[52,9174,9175,9177,9179],{"class":54,"line":108},[52,9176,83],{"class":58},[52,9178,86],{"class":62},[52,9180,105],{"class":58},[52,9182,9183,9185,9187],{"class":54,"line":118},[52,9184,121],{"class":58},[52,9186,63],{"class":62},[52,9188,77],{"class":58},[52,9190,9191],{"class":54,"line":594},[52,9192,597],{"emptyLinePlaceholder":171},[52,9194,9195],{"class":54,"line":600},[52,9196,9197],{"class":559},"\u003C!-- CSS class -->\n",[52,9199,9200,9202,9204,9206,9208,9211],{"class":54,"line":606},[52,9201,59],{"class":58},[52,9203,63],{"class":62},[52,9205,67],{"class":66},[52,9207,70],{"class":58},[52,9209,9210],{"class":73},"\"hero-shader\"",[52,9212,77],{"class":58},[52,9214,9215,9217,9219],{"class":54,"line":653},[52,9216,83],{"class":58},[52,9218,86],{"class":62},[52,9220,105],{"class":58},[52,9222,9223,9225,9227],{"class":54,"line":662},[52,9224,121],{"class":58},[52,9226,63],{"class":62},[52,9228,77],{"class":58},[52,9230,9231],{"class":54,"line":671},[52,9232,597],{"emptyLinePlaceholder":171},[52,9234,9235],{"class":54,"line":676},[52,9236,9237],{"class":559},"\u003C!-- Inline -->\n",[52,9239,9240,9242,9244,9246,9248,9250],{"class":54,"line":682},[52,9241,59],{"class":58},[52,9243,63],{"class":62},[52,9245,613],{"class":66},[52,9247,70],{"class":58},[52,9249,927],{"class":73},[52,9251,77],{"class":58},[52,9253,9254,9256,9258],{"class":54,"line":698},[52,9255,83],{"class":58},[52,9257,86],{"class":62},[52,9259,105],{"class":58},[52,9261,9262,9264,9266],{"class":54,"line":707},[52,9263,121],{"class":58},[52,9265,63],{"class":62},[52,9267,77],{"class":58},[43,9269,9271],{"className":360,"code":9270,"language":362,"meta":48,"style":48},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,9272,9273,9287,9295],{"__ignoreMap":48},[52,9274,9275,9277,9279,9281,9283,9285],{"class":54,"line":55},[52,9276,59],{"class":58},[52,9278,63],{"class":371},[52,9280,374],{"class":66},[52,9282,70],{"class":231},[52,9284,319],{"class":73},[52,9286,77],{"class":58},[52,9288,9289,9291,9293],{"class":54,"line":80},[52,9290,83],{"class":58},[52,9292,86],{"class":371},[52,9294,105],{"class":58},[52,9296,9297,9299,9301],{"class":54,"line":108},[52,9298,121],{"class":58},[52,9300,63],{"class":371},[52,9302,77],{"class":58},[43,9304,9306],{"className":419,"code":9305,"language":420,"meta":48,"style":48},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,9307,9308,9322,9330],{"__ignoreMap":48},[52,9309,9310,9312,9314,9316,9318,9320],{"class":54,"line":55},[52,9311,59],{"class":58},[52,9313,63],{"class":371},[52,9315,67],{"class":66},[52,9317,70],{"class":231},[52,9319,319],{"class":73},[52,9321,77],{"class":58},[52,9323,9324,9326,9328],{"class":54,"line":80},[52,9325,83],{"class":58},[52,9327,86],{"class":371},[52,9329,105],{"class":58},[52,9331,9332,9334,9336],{"class":54,"line":108},[52,9333,121],{"class":58},[52,9335,63],{"class":371},[52,9337,77],{"class":58},[43,9339,9340],{"className":419,"code":9305,"language":420,"meta":48,"style":48},[31,9341,9342,9356,9364],{"__ignoreMap":48},[52,9343,9344,9346,9348,9350,9352,9354],{"class":54,"line":55},[52,9345,59],{"class":58},[52,9347,63],{"class":371},[52,9349,67],{"class":66},[52,9351,70],{"class":231},[52,9353,319],{"class":73},[52,9355,77],{"class":58},[52,9357,9358,9360,9362],{"class":54,"line":80},[52,9359,83],{"class":58},[52,9361,86],{"class":371},[52,9363,105],{"class":58},[52,9365,9366,9368,9370],{"class":54,"line":108},[52,9367,121],{"class":58},[52,9369,63],{"class":371},[52,9371,77],{"class":58},[43,9373,9375],{"className":222,"code":9374,"language":224,"meta":48,"style":48},"// 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",[31,9376,9377,9382,9401,9411,9421,9425],{"__ignoreMap":48},[52,9378,9379],{"class":54,"line":55},[52,9380,9381],{"class":559},"// Apply sizing to the canvas element before calling createShader\n",[52,9383,9384,9386,9388,9390,9392,9394,9396,9399],{"class":54,"line":80},[52,9385,1721],{"class":231},[52,9387,2796],{"class":371},[52,9389,1727],{"class":231},[52,9391,2801],{"class":58},[52,9393,2804],{"class":66},[52,9395,2289],{"class":58},[52,9397,9398],{"class":73},"'my-shader'",[52,9400,2295],{"class":58},[52,9402,9403,9406,9408],{"class":54,"line":108},[52,9404,9405],{"class":58},"canvas.style.width ",[52,9407,70],{"class":231},[52,9409,9410],{"class":73}," '100%'\n",[52,9412,9413,9416,9418],{"class":54,"line":118},[52,9414,9415],{"class":58},"canvas.style.height ",[52,9417,70],{"class":231},[52,9419,9420],{"class":73}," '400px'\n",[52,9422,9423],{"class":54,"line":594},[52,9424,597],{"emptyLinePlaceholder":171},[52,9426,9427,9429,9431,9433,9435,9437,9440,9443],{"class":54,"line":600},[52,9428,1721],{"class":231},[52,9430,1724],{"class":371},[52,9432,1727],{"class":231},[52,9434,1730],{"class":231},[52,9436,1733],{"class":66},[52,9438,9439],{"class":58},"(canvas, { components: [",[52,9441,9442],{"class":231},"...",[52,9444,9445],{"class":58},"] })\n",[23,9447,9449],{"id":9448},"common-layout-patterns","Common layout patterns",[2925,9451,9453],{"id":9452},"full-page-background","Full-page background",[15,9455,9456],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[217,9458,9459,9534,9611,9677,9750],{":tabs":1543},[43,9460,9462],{"className":45,"code":9461,"language":47,"meta":48,"style":48},"\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",[31,9463,9464,9469,9484,9493,9501,9505,9521,9526],{"__ignoreMap":48},[52,9465,9466],{"class":54,"line":55},[52,9467,9468],{"class":559},"\u003C!-- In your layout or App.vue -->\n",[52,9470,9471,9473,9475,9477,9479,9482],{"class":54,"line":80},[52,9472,59],{"class":58},[52,9474,63],{"class":62},[52,9476,67],{"class":66},[52,9478,70],{"class":58},[52,9480,9481],{"class":73},"\"fixed inset-0 -z-10\"",[52,9483,77],{"class":58},[52,9485,9486,9488,9491],{"class":54,"line":108},[52,9487,83],{"class":58},[52,9489,9490],{"class":62},"Aurora",[52,9492,105],{"class":58},[52,9494,9495,9497,9499],{"class":54,"line":118},[52,9496,121],{"class":58},[52,9498,63],{"class":62},[52,9500,77],{"class":58},[52,9502,9503],{"class":54,"line":594},[52,9504,597],{"emptyLinePlaceholder":171},[52,9506,9507,9509,9512,9514,9516,9519],{"class":54,"line":600},[52,9508,59],{"class":58},[52,9510,9511],{"class":62},"main",[52,9513,67],{"class":66},[52,9515,70],{"class":58},[52,9517,9518],{"class":73},"\"relative z-10\"",[52,9520,77],{"class":58},[52,9522,9523],{"class":54,"line":606},[52,9524,9525],{"class":559}," \u003C!-- Your page content scrolls over the shader -->\n",[52,9527,9528,9530,9532],{"class":54,"line":653},[52,9529,121],{"class":58},[52,9531,9511],{"class":62},[52,9533,77],{"class":58},[43,9535,9537],{"className":360,"code":9536,"language":362,"meta":48,"style":48},"\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",[31,9538,9539,9544,9558,9566,9574,9588,9598,9606],{"__ignoreMap":48},[52,9540,9541],{"class":54,"line":55},[52,9542,9543],{"class":58},"\u003C>\n",[52,9545,9546,9548,9550,9552,9554,9556],{"class":54,"line":80},[52,9547,83],{"class":58},[52,9549,63],{"class":371},[52,9551,374],{"class":66},[52,9553,70],{"class":231},[52,9555,9481],{"class":73},[52,9557,77],{"class":58},[52,9559,9560,9562,9564],{"class":54,"line":108},[52,9561,2213],{"class":58},[52,9563,9490],{"class":371},[52,9565,105],{"class":58},[52,9567,9568,9570,9572],{"class":54,"line":118},[52,9569,2230],{"class":58},[52,9571,63],{"class":371},[52,9573,77],{"class":58},[52,9575,9576,9578,9580,9582,9584,9586],{"class":54,"line":594},[52,9577,83],{"class":58},[52,9579,9511],{"class":62},[52,9581,374],{"class":66},[52,9583,70],{"class":231},[52,9585,9518],{"class":73},[52,9587,77],{"class":58},[52,9589,9590,9593,9596],{"class":54,"line":600},[52,9591,9592],{"class":58}," {",[52,9594,9595],{"class":559},"/* Your page content */",[52,9597,729],{"class":58},[52,9599,9600,9602,9604],{"class":54,"line":606},[52,9601,2230],{"class":58},[52,9603,9511],{"class":62},[52,9605,77],{"class":58},[52,9607,9608],{"class":54,"line":653},[52,9609,9610],{"class":58},"\u003C/>\n",[43,9612,9614],{"className":419,"code":9613,"language":420,"meta":48,"style":48},"\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",[31,9615,9616,9630,9638,9646,9650,9664,9669],{"__ignoreMap":48},[52,9617,9618,9620,9622,9624,9626,9628],{"class":54,"line":55},[52,9619,59],{"class":58},[52,9621,63],{"class":371},[52,9623,67],{"class":66},[52,9625,70],{"class":231},[52,9627,9481],{"class":73},[52,9629,77],{"class":58},[52,9631,9632,9634,9636],{"class":54,"line":80},[52,9633,83],{"class":58},[52,9635,9490],{"class":371},[52,9637,105],{"class":58},[52,9639,9640,9642,9644],{"class":54,"line":108},[52,9641,121],{"class":58},[52,9643,63],{"class":371},[52,9645,77],{"class":58},[52,9647,9648],{"class":54,"line":118},[52,9649,597],{"emptyLinePlaceholder":171},[52,9651,9652,9654,9656,9658,9660,9662],{"class":54,"line":594},[52,9653,59],{"class":58},[52,9655,9511],{"class":62},[52,9657,67],{"class":66},[52,9659,70],{"class":231},[52,9661,9518],{"class":73},[52,9663,77],{"class":58},[52,9665,9666],{"class":54,"line":600},[52,9667,9668],{"class":58}," \u003C!-- Your page content -->\n",[52,9670,9671,9673,9675],{"class":54,"line":606},[52,9672,121],{"class":58},[52,9674,9511],{"class":62},[52,9676,77],{"class":58},[43,9678,9680],{"className":419,"code":9679,"language":420,"meta":48,"style":48},"\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",[31,9681,9682,9686,9700,9708,9716,9730,9738,9746],{"__ignoreMap":48},[52,9683,9684],{"class":54,"line":55},[52,9685,9543],{"class":58},[52,9687,9688,9690,9692,9694,9696,9698],{"class":54,"line":80},[52,9689,83],{"class":58},[52,9691,63],{"class":371},[52,9693,67],{"class":66},[52,9695,70],{"class":231},[52,9697,9481],{"class":73},[52,9699,77],{"class":58},[52,9701,9702,9704,9706],{"class":54,"line":108},[52,9703,2213],{"class":58},[52,9705,9490],{"class":371},[52,9707,105],{"class":58},[52,9709,9710,9712,9714],{"class":54,"line":118},[52,9711,2230],{"class":58},[52,9713,63],{"class":371},[52,9715,77],{"class":58},[52,9717,9718,9720,9722,9724,9726,9728],{"class":54,"line":594},[52,9719,83],{"class":58},[52,9721,9511],{"class":62},[52,9723,67],{"class":66},[52,9725,70],{"class":231},[52,9727,9518],{"class":73},[52,9729,77],{"class":58},[52,9731,9732,9734,9736],{"class":54,"line":600},[52,9733,9592],{"class":58},[52,9735,9595],{"class":559},[52,9737,729],{"class":58},[52,9739,9740,9742,9744],{"class":54,"line":606},[52,9741,2230],{"class":58},[52,9743,9511],{"class":62},[52,9745,77],{"class":58},[52,9747,9748],{"class":54,"line":653},[52,9749,9610],{"class":58},[43,9751,9755],{"className":9752,"code":9753,"language":9754,"meta":48,"style":48},"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",[31,9756,9757,9785,9805,9809,9825,9836,9861,9872,9877],{"__ignoreMap":48},[52,9758,9759,9761,9764,9766,9768,9771,9773,9775,9778,9781,9783],{"class":54,"line":55},[52,9760,59],{"class":58},[52,9762,9763],{"class":62},"canvas",[52,9765,5968],{"class":66},[52,9767,70],{"class":58},[52,9769,9770],{"class":73},"\"bg\"",[52,9772,613],{"class":66},[52,9774,70],{"class":58},[52,9776,9777],{"class":73},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[52,9779,9780],{"class":58},">\u003C/",[52,9782,9763],{"class":62},[52,9784,77],{"class":58},[52,9786,9787,9789,9791,9793,9795,9798,9801,9803],{"class":54,"line":80},[52,9788,59],{"class":58},[52,9790,9511],{"class":62},[52,9792,613],{"class":66},[52,9794,70],{"class":58},[52,9796,9797],{"class":73},"\"position:relative;z-index:10;\"",[52,9799,9800],{"class":58},">Your content\u003C/",[52,9802,9511],{"class":62},[52,9804,77],{"class":58},[52,9806,9807],{"class":54,"line":108},[52,9808,597],{"emptyLinePlaceholder":171},[52,9810,9811,9813,9815,9818,9820,9823],{"class":54,"line":118},[52,9812,59],{"class":58},[52,9814,2253],{"class":62},[52,9816,9817],{"class":66}," type",[52,9819,70],{"class":58},[52,9821,9822],{"class":73},"\"module\"",[52,9824,77],{"class":58},[52,9826,9827,9830,9832,9834],{"class":54,"line":594},[52,9828,9829],{"class":231}," import",[52,9831,8385],{"class":58},[52,9833,238],{"class":231},[52,9835,8390],{"class":73},[52,9837,9838,9840,9842,9844,9846,9848,9851,9853,9855,9858],{"class":54,"line":600},[52,9839,2368],{"class":231},[52,9841,1724],{"class":371},[52,9843,1727],{"class":231},[52,9845,1730],{"class":231},[52,9847,1733],{"class":66},[52,9849,9850],{"class":58},"(document.",[52,9852,2804],{"class":66},[52,9854,2289],{"class":58},[52,9856,9857],{"class":73},"'bg'",[52,9859,9860],{"class":58},"), {\n",[52,9862,9863,9866,9869],{"class":54,"line":606},[52,9864,9865],{"class":58}," components: [{ type: ",[52,9867,9868],{"class":73},"'Aurora'",[52,9870,9871],{"class":58},", props: {} }]\n",[52,9873,9874],{"class":54,"line":653},[52,9875,9876],{"class":58}," })\n",[52,9878,9879,9881,9883],{"class":54,"line":662},[52,9880,121],{"class":58},[52,9882,2253],{"class":62},[52,9884,77],{"class":58},[2925,9886,9888],{"id":9887},"section-background","Section background",[15,9890,9891,9892,1850,9895,9898],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[31,9893,9894],{},"position: relative",[31,9896,9897],{},"overflow: hidden"," to contain the canvas:",[217,9900,9901,10005,10098,10173],{":tabs":219},[43,9902,9904],{"className":45,"code":9903,"language":47,"meta":48,"style":48},"\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",[31,9905,9906,9922,9936,9945,9953,9957,9977,9997],{"__ignoreMap":48},[52,9907,9908,9910,9913,9915,9917,9920],{"class":54,"line":55},[52,9909,59],{"class":58},[52,9911,9912],{"class":62},"section",[52,9914,67],{"class":66},[52,9916,70],{"class":58},[52,9918,9919],{"class":73},"\"relative overflow-hidden py-24 px-8\"",[52,9921,77],{"class":58},[52,9923,9924,9926,9928,9930,9932,9934],{"class":54,"line":80},[52,9925,83],{"class":58},[52,9927,63],{"class":62},[52,9929,67],{"class":66},[52,9931,70],{"class":58},[52,9933,74],{"class":73},[52,9935,77],{"class":58},[52,9937,9938,9940,9943],{"class":54,"line":108},[52,9939,2213],{"class":58},[52,9941,9942],{"class":62},"Plasma",[52,9944,105],{"class":58},[52,9946,9947,9949,9951],{"class":54,"line":118},[52,9948,2230],{"class":58},[52,9950,63],{"class":62},[52,9952,77],{"class":58},[52,9954,9955],{"class":54,"line":594},[52,9956,597],{"emptyLinePlaceholder":171},[52,9958,9959,9961,9963,9965,9967,9970,9973,9975],{"class":54,"line":600},[52,9960,83],{"class":58},[52,9962,23],{"class":62},[52,9964,67],{"class":66},[52,9966,70],{"class":58},[52,9968,9969],{"class":73},"\"relative text-4xl font-bold text-white\"",[52,9971,9972],{"class":58},">Section Heading\u003C/",[52,9974,23],{"class":62},[52,9976,77],{"class":58},[52,9978,9979,9981,9983,9985,9987,9990,9993,9995],{"class":54,"line":606},[52,9980,83],{"class":58},[52,9982,15],{"class":62},[52,9984,67],{"class":66},[52,9986,70],{"class":58},[52,9988,9989],{"class":73},"\"relative text-white/80 mt-4\"",[52,9991,9992],{"class":58},">Content above the shader.\u003C/",[52,9994,15],{"class":62},[52,9996,77],{"class":58},[52,9998,9999,10001,10003],{"class":54,"line":653},[52,10000,121],{"class":58},[52,10002,9912],{"class":62},[52,10004,77],{"class":58},[43,10006,10008],{"className":360,"code":10007,"language":362,"meta":48,"style":48},"\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",[31,10009,10010,10024,10038,10046,10054,10072,10090],{"__ignoreMap":48},[52,10011,10012,10014,10016,10018,10020,10022],{"class":54,"line":55},[52,10013,59],{"class":58},[52,10015,9912],{"class":62},[52,10017,374],{"class":66},[52,10019,70],{"class":231},[52,10021,9919],{"class":73},[52,10023,77],{"class":58},[52,10025,10026,10028,10030,10032,10034,10036],{"class":54,"line":80},[52,10027,83],{"class":58},[52,10029,63],{"class":371},[52,10031,374],{"class":66},[52,10033,70],{"class":231},[52,10035,74],{"class":73},[52,10037,77],{"class":58},[52,10039,10040,10042,10044],{"class":54,"line":108},[52,10041,2213],{"class":58},[52,10043,9942],{"class":371},[52,10045,105],{"class":58},[52,10047,10048,10050,10052],{"class":54,"line":118},[52,10049,2230],{"class":58},[52,10051,63],{"class":371},[52,10053,77],{"class":58},[52,10055,10056,10058,10060,10062,10064,10066,10068,10070],{"class":54,"line":594},[52,10057,83],{"class":58},[52,10059,23],{"class":62},[52,10061,374],{"class":66},[52,10063,70],{"class":231},[52,10065,9969],{"class":73},[52,10067,9972],{"class":58},[52,10069,23],{"class":62},[52,10071,77],{"class":58},[52,10073,10074,10076,10078,10080,10082,10084,10086,10088],{"class":54,"line":600},[52,10075,83],{"class":58},[52,10077,15],{"class":62},[52,10079,374],{"class":66},[52,10081,70],{"class":231},[52,10083,9989],{"class":73},[52,10085,9992],{"class":58},[52,10087,15],{"class":62},[52,10089,77],{"class":58},[52,10091,10092,10094,10096],{"class":54,"line":606},[52,10093,121],{"class":58},[52,10095,9912],{"class":62},[52,10097,77],{"class":58},[43,10099,10101],{"className":419,"code":10100,"language":420,"meta":48,"style":48},"\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",[31,10102,10103,10117,10131,10139,10147,10165],{"__ignoreMap":48},[52,10104,10105,10107,10109,10111,10113,10115],{"class":54,"line":55},[52,10106,59],{"class":58},[52,10108,9912],{"class":62},[52,10110,67],{"class":66},[52,10112,70],{"class":231},[52,10114,9919],{"class":73},[52,10116,77],{"class":58},[52,10118,10119,10121,10123,10125,10127,10129],{"class":54,"line":80},[52,10120,83],{"class":58},[52,10122,63],{"class":371},[52,10124,67],{"class":66},[52,10126,70],{"class":231},[52,10128,74],{"class":73},[52,10130,77],{"class":58},[52,10132,10133,10135,10137],{"class":54,"line":108},[52,10134,2213],{"class":58},[52,10136,9942],{"class":371},[52,10138,105],{"class":58},[52,10140,10141,10143,10145],{"class":54,"line":118},[52,10142,2230],{"class":58},[52,10144,63],{"class":371},[52,10146,77],{"class":58},[52,10148,10149,10151,10153,10155,10157,10159,10161,10163],{"class":54,"line":594},[52,10150,83],{"class":58},[52,10152,23],{"class":62},[52,10154,67],{"class":66},[52,10156,70],{"class":231},[52,10158,9969],{"class":73},[52,10160,9972],{"class":58},[52,10162,23],{"class":62},[52,10164,77],{"class":58},[52,10166,10167,10169,10171],{"class":54,"line":600},[52,10168,121],{"class":58},[52,10170,9912],{"class":62},[52,10172,77],{"class":58},[43,10174,10175],{"className":419,"code":10100,"language":420,"meta":48,"style":48},[31,10176,10177,10191,10205,10213,10221,10239],{"__ignoreMap":48},[52,10178,10179,10181,10183,10185,10187,10189],{"class":54,"line":55},[52,10180,59],{"class":58},[52,10182,9912],{"class":62},[52,10184,67],{"class":66},[52,10186,70],{"class":231},[52,10188,9919],{"class":73},[52,10190,77],{"class":58},[52,10192,10193,10195,10197,10199,10201,10203],{"class":54,"line":80},[52,10194,83],{"class":58},[52,10196,63],{"class":371},[52,10198,67],{"class":66},[52,10200,70],{"class":231},[52,10202,74],{"class":73},[52,10204,77],{"class":58},[52,10206,10207,10209,10211],{"class":54,"line":108},[52,10208,2213],{"class":58},[52,10210,9942],{"class":371},[52,10212,105],{"class":58},[52,10214,10215,10217,10219],{"class":54,"line":118},[52,10216,2230],{"class":58},[52,10218,63],{"class":371},[52,10220,77],{"class":58},[52,10222,10223,10225,10227,10229,10231,10233,10235,10237],{"class":54,"line":594},[52,10224,83],{"class":58},[52,10226,23],{"class":62},[52,10228,67],{"class":66},[52,10230,70],{"class":231},[52,10232,9969],{"class":73},[52,10234,9972],{"class":58},[52,10236,23],{"class":62},[52,10238,77],{"class":58},[52,10240,10241,10243,10245],{"class":54,"line":600},[52,10242,121],{"class":58},[52,10244,9912],{"class":62},[52,10246,77],{"class":58},[2925,10248,10250],{"id":10249},"card-with-shader-fill","Card with shader fill",[15,10252,10253],{},"A shader used as the visual background of a card or panel:",[217,10255,10256,10416,10562,10689],{":tabs":219},[43,10257,10259],{"className":45,"code":10258,"language":47,"meta":48,"style":48},"\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",[31,10260,10261,10276,10291,10306,10329,10337,10341,10346,10360,10380,10400,10408],{"__ignoreMap":48},[52,10262,10263,10265,10267,10269,10271,10274],{"class":54,"line":55},[52,10264,59],{"class":58},[52,10266,7439],{"class":62},[52,10268,67],{"class":66},[52,10270,70],{"class":58},[52,10272,10273],{"class":73},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[52,10275,77],{"class":58},[52,10277,10278,10280,10282,10284,10286,10289],{"class":54,"line":80},[52,10279,83],{"class":58},[52,10281,63],{"class":62},[52,10283,67],{"class":66},[52,10285,70],{"class":58},[52,10287,10288],{"class":73},"\"absolute inset-0\"",[52,10290,77],{"class":58},[52,10292,10293,10295,10297,10299,10301,10304],{"class":54,"line":108},[52,10294,2213],{"class":58},[52,10296,1571],{"class":62},[52,10298,1574],{"class":66},[52,10300,70],{"class":58},[52,10302,10303],{"class":73},"\"#1e1b4b\"",[52,10305,105],{"class":58},[52,10307,10308,10310,10312,10315,10317,10320,10322,10324,10327],{"class":54,"line":118},[52,10309,2213],{"class":58},[52,10311,8663],{"class":62},[52,10313,10314],{"class":66}," :intensity",[52,10316,70],{"class":58},[52,10318,10319],{"class":73},"\"0.4\"",[52,10321,1574],{"class":66},[52,10323,70],{"class":58},[52,10325,10326],{"class":73},"\"#6366f1\"",[52,10328,105],{"class":58},[52,10330,10331,10333,10335],{"class":54,"line":594},[52,10332,2230],{"class":58},[52,10334,63],{"class":62},[52,10336,77],{"class":58},[52,10338,10339],{"class":54,"line":600},[52,10340,597],{"emptyLinePlaceholder":171},[52,10342,10343],{"class":54,"line":606},[52,10344,10345],{"class":559}," \u003C!-- Content sits above the shader -->\n",[52,10347,10348,10350,10352,10354,10356,10358],{"class":54,"line":653},[52,10349,83],{"class":58},[52,10351,7439],{"class":62},[52,10353,67],{"class":66},[52,10355,70],{"class":58},[52,10357,9518],{"class":73},[52,10359,77],{"class":58},[52,10361,10362,10364,10366,10368,10370,10373,10376,10378],{"class":54,"line":662},[52,10363,2213],{"class":58},[52,10365,2925],{"class":62},[52,10367,67],{"class":66},[52,10369,70],{"class":58},[52,10371,10372],{"class":73},"\"text-xl font-semibold\"",[52,10374,10375],{"class":58},">Card Title\u003C/",[52,10377,2925],{"class":62},[52,10379,77],{"class":58},[52,10381,10382,10384,10386,10388,10390,10393,10396,10398],{"class":54,"line":671},[52,10383,2213],{"class":58},[52,10385,15],{"class":62},[52,10387,67],{"class":66},[52,10389,70],{"class":58},[52,10391,10392],{"class":73},"\"text-white/70 mt-2\"",[52,10394,10395],{"class":58},">Card description here.\u003C/",[52,10397,15],{"class":62},[52,10399,77],{"class":58},[52,10401,10402,10404,10406],{"class":54,"line":676},[52,10403,2230],{"class":58},[52,10405,7439],{"class":62},[52,10407,77],{"class":58},[52,10409,10410,10412,10414],{"class":54,"line":682},[52,10411,121],{"class":58},[52,10413,7439],{"class":62},[52,10415,77],{"class":58},[43,10417,10419],{"className":360,"code":10418,"language":362,"meta":48,"style":48},"\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",[31,10420,10421,10435,10449,10463,10488,10496,10510,10528,10546,10554],{"__ignoreMap":48},[52,10422,10423,10425,10427,10429,10431,10433],{"class":54,"line":55},[52,10424,59],{"class":58},[52,10426,7439],{"class":62},[52,10428,374],{"class":66},[52,10430,70],{"class":231},[52,10432,10273],{"class":73},[52,10434,77],{"class":58},[52,10436,10437,10439,10441,10443,10445,10447],{"class":54,"line":80},[52,10438,83],{"class":58},[52,10440,63],{"class":371},[52,10442,374],{"class":66},[52,10444,70],{"class":231},[52,10446,10288],{"class":73},[52,10448,77],{"class":58},[52,10450,10451,10453,10455,10457,10459,10461],{"class":54,"line":108},[52,10452,2213],{"class":58},[52,10454,1571],{"class":371},[52,10456,1574],{"class":66},[52,10458,70],{"class":231},[52,10460,10303],{"class":73},[52,10462,105],{"class":58},[52,10464,10465,10467,10469,10472,10474,10476,10478,10480,10482,10484,10486],{"class":54,"line":118},[52,10466,2213],{"class":58},[52,10468,8663],{"class":371},[52,10470,10471],{"class":66}," intensity",[52,10473,70],{"class":231},[52,10475,723],{"class":58},[52,10477,5116],{"class":371},[52,10479,2577],{"class":58},[52,10481,4929],{"class":66},[52,10483,70],{"class":231},[52,10485,10326],{"class":73},[52,10487,105],{"class":58},[52,10489,10490,10492,10494],{"class":54,"line":594},[52,10491,2230],{"class":58},[52,10493,63],{"class":371},[52,10495,77],{"class":58},[52,10497,10498,10500,10502,10504,10506,10508],{"class":54,"line":600},[52,10499,83],{"class":58},[52,10501,7439],{"class":62},[52,10503,374],{"class":66},[52,10505,70],{"class":231},[52,10507,9518],{"class":73},[52,10509,77],{"class":58},[52,10511,10512,10514,10516,10518,10520,10522,10524,10526],{"class":54,"line":606},[52,10513,2213],{"class":58},[52,10515,2925],{"class":62},[52,10517,374],{"class":66},[52,10519,70],{"class":231},[52,10521,10372],{"class":73},[52,10523,10375],{"class":58},[52,10525,2925],{"class":62},[52,10527,77],{"class":58},[52,10529,10530,10532,10534,10536,10538,10540,10542,10544],{"class":54,"line":653},[52,10531,2213],{"class":58},[52,10533,15],{"class":62},[52,10535,374],{"class":66},[52,10537,70],{"class":231},[52,10539,10392],{"class":73},[52,10541,10395],{"class":58},[52,10543,15],{"class":62},[52,10545,77],{"class":58},[52,10547,10548,10550,10552],{"class":54,"line":662},[52,10549,2230],{"class":58},[52,10551,7439],{"class":62},[52,10553,77],{"class":58},[52,10555,10556,10558,10560],{"class":54,"line":671},[52,10557,121],{"class":58},[52,10559,7439],{"class":62},[52,10561,77],{"class":58},[43,10563,10565],{"className":419,"code":10564,"language":420,"meta":48,"style":48},"\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",[31,10566,10567,10581,10595,10609,10633,10641,10655,10673,10681],{"__ignoreMap":48},[52,10568,10569,10571,10573,10575,10577,10579],{"class":54,"line":55},[52,10570,59],{"class":58},[52,10572,7439],{"class":62},[52,10574,67],{"class":66},[52,10576,70],{"class":231},[52,10578,10273],{"class":73},[52,10580,77],{"class":58},[52,10582,10583,10585,10587,10589,10591,10593],{"class":54,"line":80},[52,10584,83],{"class":58},[52,10586,63],{"class":371},[52,10588,67],{"class":66},[52,10590,70],{"class":231},[52,10592,10288],{"class":73},[52,10594,77],{"class":58},[52,10596,10597,10599,10601,10603,10605,10607],{"class":54,"line":108},[52,10598,2213],{"class":58},[52,10600,1571],{"class":371},[52,10602,1574],{"class":66},[52,10604,70],{"class":231},[52,10606,10303],{"class":73},[52,10608,105],{"class":58},[52,10610,10611,10613,10615,10617,10619,10621,10623,10625,10627,10629,10631],{"class":54,"line":118},[52,10612,2213],{"class":58},[52,10614,8663],{"class":371},[52,10616,10471],{"class":66},[52,10618,70],{"class":231},[52,10620,723],{"class":58},[52,10622,5116],{"class":371},[52,10624,2577],{"class":58},[52,10626,4929],{"class":66},[52,10628,70],{"class":231},[52,10630,10326],{"class":73},[52,10632,105],{"class":58},[52,10634,10635,10637,10639],{"class":54,"line":594},[52,10636,2230],{"class":58},[52,10638,63],{"class":371},[52,10640,77],{"class":58},[52,10642,10643,10645,10647,10649,10651,10653],{"class":54,"line":600},[52,10644,83],{"class":58},[52,10646,7439],{"class":62},[52,10648,67],{"class":66},[52,10650,70],{"class":231},[52,10652,9518],{"class":73},[52,10654,77],{"class":58},[52,10656,10657,10659,10661,10663,10665,10667,10669,10671],{"class":54,"line":606},[52,10658,2213],{"class":58},[52,10660,2925],{"class":62},[52,10662,67],{"class":66},[52,10664,70],{"class":231},[52,10666,10372],{"class":73},[52,10668,10375],{"class":58},[52,10670,2925],{"class":62},[52,10672,77],{"class":58},[52,10674,10675,10677,10679],{"class":54,"line":653},[52,10676,2230],{"class":58},[52,10678,7439],{"class":62},[52,10680,77],{"class":58},[52,10682,10683,10685,10687],{"class":54,"line":662},[52,10684,121],{"class":58},[52,10686,7439],{"class":62},[52,10688,77],{"class":58},[43,10690,10691],{"className":419,"code":10564,"language":420,"meta":48,"style":48},[31,10692,10693,10707,10721,10735,10759,10767,10781,10799,10807],{"__ignoreMap":48},[52,10694,10695,10697,10699,10701,10703,10705],{"class":54,"line":55},[52,10696,59],{"class":58},[52,10698,7439],{"class":62},[52,10700,67],{"class":66},[52,10702,70],{"class":231},[52,10704,10273],{"class":73},[52,10706,77],{"class":58},[52,10708,10709,10711,10713,10715,10717,10719],{"class":54,"line":80},[52,10710,83],{"class":58},[52,10712,63],{"class":371},[52,10714,67],{"class":66},[52,10716,70],{"class":231},[52,10718,10288],{"class":73},[52,10720,77],{"class":58},[52,10722,10723,10725,10727,10729,10731,10733],{"class":54,"line":108},[52,10724,2213],{"class":58},[52,10726,1571],{"class":371},[52,10728,1574],{"class":66},[52,10730,70],{"class":231},[52,10732,10303],{"class":73},[52,10734,105],{"class":58},[52,10736,10737,10739,10741,10743,10745,10747,10749,10751,10753,10755,10757],{"class":54,"line":118},[52,10738,2213],{"class":58},[52,10740,8663],{"class":371},[52,10742,10471],{"class":66},[52,10744,70],{"class":231},[52,10746,723],{"class":58},[52,10748,5116],{"class":371},[52,10750,2577],{"class":58},[52,10752,4929],{"class":66},[52,10754,70],{"class":231},[52,10756,10326],{"class":73},[52,10758,105],{"class":58},[52,10760,10761,10763,10765],{"class":54,"line":594},[52,10762,2230],{"class":58},[52,10764,63],{"class":371},[52,10766,77],{"class":58},[52,10768,10769,10771,10773,10775,10777,10779],{"class":54,"line":600},[52,10770,83],{"class":58},[52,10772,7439],{"class":62},[52,10774,67],{"class":66},[52,10776,70],{"class":231},[52,10778,9518],{"class":73},[52,10780,77],{"class":58},[52,10782,10783,10785,10787,10789,10791,10793,10795,10797],{"class":54,"line":606},[52,10784,2213],{"class":58},[52,10786,2925],{"class":62},[52,10788,67],{"class":66},[52,10790,70],{"class":231},[52,10792,10372],{"class":73},[52,10794,10375],{"class":58},[52,10796,2925],{"class":62},[52,10798,77],{"class":58},[52,10800,10801,10803,10805],{"class":54,"line":653},[52,10802,2230],{"class":58},[52,10804,7439],{"class":62},[52,10806,77],{"class":58},[52,10808,10809,10811,10813],{"class":54,"line":662},[52,10810,121],{"class":58},[52,10812,7439],{"class":62},[52,10814,77],{"class":58},[2925,10816,10818],{"id":10817},"inline-content-block","Inline content block",[15,10820,10821],{},"A shader that flows naturally in document layout, like an image or video:",[217,10823,10824,10912,10987,11062],{":tabs":219},[43,10825,10827],{"className":45,"code":10826,"language":47,"meta":48,"style":48},"\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",[31,10828,10829,10838,10851,10855,10870,10879,10887,10891,10904],{"__ignoreMap":48},[52,10830,10831,10833,10836],{"class":54,"line":55},[52,10832,59],{"class":58},[52,10834,10835],{"class":62},"article",[52,10837,77],{"class":58},[52,10839,10840,10842,10844,10847,10849],{"class":54,"line":80},[52,10841,83],{"class":58},[52,10843,15],{"class":62},[52,10845,10846],{"class":58},">Text before the shader.\u003C/",[52,10848,15],{"class":62},[52,10850,77],{"class":58},[52,10852,10853],{"class":54,"line":108},[52,10854,597],{"emptyLinePlaceholder":171},[52,10856,10857,10859,10861,10863,10865,10868],{"class":54,"line":118},[52,10858,83],{"class":58},[52,10860,63],{"class":62},[52,10862,67],{"class":66},[52,10864,70],{"class":58},[52,10866,10867],{"class":73},"\"w-full aspect-video my-8 rounded-xl\"",[52,10869,77],{"class":58},[52,10871,10872,10874,10877],{"class":54,"line":594},[52,10873,2213],{"class":58},[52,10875,10876],{"class":62},"Swirl",[52,10878,105],{"class":58},[52,10880,10881,10883,10885],{"class":54,"line":600},[52,10882,2230],{"class":58},[52,10884,63],{"class":62},[52,10886,77],{"class":58},[52,10888,10889],{"class":54,"line":606},[52,10890,597],{"emptyLinePlaceholder":171},[52,10892,10893,10895,10897,10900,10902],{"class":54,"line":653},[52,10894,83],{"class":58},[52,10896,15],{"class":62},[52,10898,10899],{"class":58},">Text after the shader continues here.\u003C/",[52,10901,15],{"class":62},[52,10903,77],{"class":58},[52,10905,10906,10908,10910],{"class":54,"line":662},[52,10907,121],{"class":58},[52,10909,10835],{"class":62},[52,10911,77],{"class":58},[43,10913,10915],{"className":360,"code":10914,"language":362,"meta":48,"style":48},"\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",[31,10916,10917,10925,10937,10951,10959,10967,10979],{"__ignoreMap":48},[52,10918,10919,10921,10923],{"class":54,"line":55},[52,10920,59],{"class":58},[52,10922,10835],{"class":62},[52,10924,77],{"class":58},[52,10926,10927,10929,10931,10933,10935],{"class":54,"line":80},[52,10928,83],{"class":58},[52,10930,15],{"class":62},[52,10932,10846],{"class":58},[52,10934,15],{"class":62},[52,10936,77],{"class":58},[52,10938,10939,10941,10943,10945,10947,10949],{"class":54,"line":108},[52,10940,83],{"class":58},[52,10942,63],{"class":371},[52,10944,374],{"class":66},[52,10946,70],{"class":231},[52,10948,10867],{"class":73},[52,10950,77],{"class":58},[52,10952,10953,10955,10957],{"class":54,"line":118},[52,10954,2213],{"class":58},[52,10956,10876],{"class":371},[52,10958,105],{"class":58},[52,10960,10961,10963,10965],{"class":54,"line":594},[52,10962,2230],{"class":58},[52,10964,63],{"class":371},[52,10966,77],{"class":58},[52,10968,10969,10971,10973,10975,10977],{"class":54,"line":600},[52,10970,83],{"class":58},[52,10972,15],{"class":62},[52,10974,10899],{"class":58},[52,10976,15],{"class":62},[52,10978,77],{"class":58},[52,10980,10981,10983,10985],{"class":54,"line":606},[52,10982,121],{"class":58},[52,10984,10835],{"class":62},[52,10986,77],{"class":58},[43,10988,10990],{"className":419,"code":10989,"language":420,"meta":48,"style":48},"\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",[31,10991,10992,11000,11012,11026,11034,11042,11054],{"__ignoreMap":48},[52,10993,10994,10996,10998],{"class":54,"line":55},[52,10995,59],{"class":58},[52,10997,10835],{"class":62},[52,10999,77],{"class":58},[52,11001,11002,11004,11006,11008,11010],{"class":54,"line":80},[52,11003,83],{"class":58},[52,11005,15],{"class":62},[52,11007,10846],{"class":58},[52,11009,15],{"class":62},[52,11011,77],{"class":58},[52,11013,11014,11016,11018,11020,11022,11024],{"class":54,"line":108},[52,11015,83],{"class":58},[52,11017,63],{"class":371},[52,11019,67],{"class":66},[52,11021,70],{"class":231},[52,11023,10867],{"class":73},[52,11025,77],{"class":58},[52,11027,11028,11030,11032],{"class":54,"line":118},[52,11029,2213],{"class":58},[52,11031,10876],{"class":371},[52,11033,105],{"class":58},[52,11035,11036,11038,11040],{"class":54,"line":594},[52,11037,2230],{"class":58},[52,11039,63],{"class":371},[52,11041,77],{"class":58},[52,11043,11044,11046,11048,11050,11052],{"class":54,"line":600},[52,11045,83],{"class":58},[52,11047,15],{"class":62},[52,11049,10899],{"class":58},[52,11051,15],{"class":62},[52,11053,77],{"class":58},[52,11055,11056,11058,11060],{"class":54,"line":606},[52,11057,121],{"class":58},[52,11059,10835],{"class":62},[52,11061,77],{"class":58},[43,11063,11064],{"className":419,"code":10989,"language":420,"meta":48,"style":48},[31,11065,11066,11074,11086,11100,11108,11116,11128],{"__ignoreMap":48},[52,11067,11068,11070,11072],{"class":54,"line":55},[52,11069,59],{"class":58},[52,11071,10835],{"class":62},[52,11073,77],{"class":58},[52,11075,11076,11078,11080,11082,11084],{"class":54,"line":80},[52,11077,83],{"class":58},[52,11079,15],{"class":62},[52,11081,10846],{"class":58},[52,11083,15],{"class":62},[52,11085,77],{"class":58},[52,11087,11088,11090,11092,11094,11096,11098],{"class":54,"line":108},[52,11089,83],{"class":58},[52,11091,63],{"class":371},[52,11093,67],{"class":66},[52,11095,70],{"class":231},[52,11097,10867],{"class":73},[52,11099,77],{"class":58},[52,11101,11102,11104,11106],{"class":54,"line":118},[52,11103,2213],{"class":58},[52,11105,10876],{"class":371},[52,11107,105],{"class":58},[52,11109,11110,11112,11114],{"class":54,"line":594},[52,11111,2230],{"class":58},[52,11113,63],{"class":371},[52,11115,77],{"class":58},[52,11117,11118,11120,11122,11124,11126],{"class":54,"line":600},[52,11119,83],{"class":58},[52,11121,15],{"class":62},[52,11123,10899],{"class":58},[52,11125,15],{"class":62},[52,11127,77],{"class":58},[52,11129,11130,11132,11134],{"class":54,"line":606},[52,11131,121],{"class":58},[52,11133,10835],{"class":62},[52,11135,77],{"class":58},[23,11137,11139],{"id":11138},"layering-content-over-shaders","Layering content over shaders",[2925,11141,11143],{"id":11142},"pointer-events","Pointer events",[15,11145,11146,11147,11150],{},"Canvases capture all pointer events by default. Add ",[31,11148,11149],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[217,11152,11153,11189,11224,11258],{":tabs":219},[43,11154,11156],{"className":45,"code":11155,"language":47,"meta":48,"style":48},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[31,11157,11158,11173,11181],{"__ignoreMap":48},[52,11159,11160,11162,11164,11166,11168,11171],{"class":54,"line":55},[52,11161,59],{"class":58},[52,11163,63],{"class":62},[52,11165,67],{"class":66},[52,11167,70],{"class":58},[52,11169,11170],{"class":73},"\"absolute inset-0 pointer-events-none\"",[52,11172,77],{"class":58},[52,11174,11175,11177,11179],{"class":54,"line":80},[52,11176,83],{"class":58},[52,11178,9490],{"class":62},[52,11180,105],{"class":58},[52,11182,11183,11185,11187],{"class":54,"line":108},[52,11184,121],{"class":58},[52,11186,63],{"class":62},[52,11188,77],{"class":58},[43,11190,11192],{"className":360,"code":11191,"language":362,"meta":48,"style":48},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[31,11193,11194,11208,11216],{"__ignoreMap":48},[52,11195,11196,11198,11200,11202,11204,11206],{"class":54,"line":55},[52,11197,59],{"class":58},[52,11199,63],{"class":371},[52,11201,374],{"class":66},[52,11203,70],{"class":231},[52,11205,11170],{"class":73},[52,11207,77],{"class":58},[52,11209,11210,11212,11214],{"class":54,"line":80},[52,11211,83],{"class":58},[52,11213,9490],{"class":371},[52,11215,105],{"class":58},[52,11217,11218,11220,11222],{"class":54,"line":108},[52,11219,121],{"class":58},[52,11221,63],{"class":371},[52,11223,77],{"class":58},[43,11225,11226],{"className":419,"code":11155,"language":420,"meta":48,"style":48},[31,11227,11228,11242,11250],{"__ignoreMap":48},[52,11229,11230,11232,11234,11236,11238,11240],{"class":54,"line":55},[52,11231,59],{"class":58},[52,11233,63],{"class":371},[52,11235,67],{"class":66},[52,11237,70],{"class":231},[52,11239,11170],{"class":73},[52,11241,77],{"class":58},[52,11243,11244,11246,11248],{"class":54,"line":80},[52,11245,83],{"class":58},[52,11247,9490],{"class":371},[52,11249,105],{"class":58},[52,11251,11252,11254,11256],{"class":54,"line":108},[52,11253,121],{"class":58},[52,11255,63],{"class":371},[52,11257,77],{"class":58},[43,11259,11260],{"className":419,"code":11155,"language":420,"meta":48,"style":48},[31,11261,11262,11276,11284],{"__ignoreMap":48},[52,11263,11264,11266,11268,11270,11272,11274],{"class":54,"line":55},[52,11265,59],{"class":58},[52,11267,63],{"class":371},[52,11269,67],{"class":66},[52,11271,70],{"class":231},[52,11273,11170],{"class":73},[52,11275,77],{"class":58},[52,11277,11278,11280,11282],{"class":54,"line":80},[52,11279,83],{"class":58},[52,11281,9490],{"class":371},[52,11283,105],{"class":58},[52,11285,11286,11288,11290],{"class":54,"line":108},[52,11287,121],{"class":58},[52,11289,63],{"class":371},[52,11291,77],{"class":58},[15,11293,11294,11295,1850,11297,11300,11301,11303],{},"Interactive effects like ",[31,11296,113],{},[31,11298,11299],{},"CursorRipples"," still track global mouse position even with ",[31,11302,11149],{}," — they listen on the window rather than the canvas element.",[2925,11305,11307],{"id":11306},"stacking-context-and-z-index","Stacking context and z-index",[15,11309,11310,11313,11314,11316,11317,1540],{},[31,11311,11312],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[31,11315,9894],{}," (or similar) and a higher ",[31,11318,11312],{},[43,11320,11322],{"className":9752,"code":11321,"language":9754,"meta":48,"style":48},"\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",[31,11323,11324,11339,11344,11362,11367,11386],{"__ignoreMap":48},[52,11325,11326,11328,11330,11332,11334,11337],{"class":54,"line":55},[52,11327,59],{"class":58},[52,11329,7439],{"class":62},[52,11331,67],{"class":66},[52,11333,70],{"class":58},[52,11335,11336],{"class":73},"\"relative\"",[52,11338,77],{"class":58},[52,11340,11341],{"class":54,"line":80},[52,11342,11343],{"class":559}," \u003C!-- canvas at z-0 -->\n",[52,11345,11346,11348,11350,11352,11354,11356,11358,11360],{"class":54,"line":108},[52,11347,83],{"class":58},[52,11349,9763],{"class":62},[52,11351,67],{"class":66},[52,11353,70],{"class":58},[52,11355,10288],{"class":73},[52,11357,9780],{"class":58},[52,11359,9763],{"class":62},[52,11361,77],{"class":58},[52,11363,11364],{"class":54,"line":118},[52,11365,11366],{"class":559}," \u003C!-- content above canvas -->\n",[52,11368,11369,11371,11373,11375,11377,11379,11382,11384],{"class":54,"line":594},[52,11370,83],{"class":58},[52,11372,7439],{"class":62},[52,11374,67],{"class":66},[52,11376,70],{"class":58},[52,11378,9518],{"class":73},[52,11380,11381],{"class":58},">I appear above the canvas\u003C/",[52,11383,7439],{"class":62},[52,11385,77],{"class":58},[52,11387,11388,11390,11392],{"class":54,"line":600},[52,11389,121],{"class":58},[52,11391,7439],{"class":62},[52,11393,77],{"class":58},[23,11395,11397],{"id":11396},"responsive-sizing","Responsive sizing",[15,11399,11400],{},"Shaders responds to any CSS-based resize:",[217,11402,11403,11524,11559,11594],{":tabs":219},[43,11404,11406],{"className":45,"code":11405,"language":47,"meta":48,"style":48},"\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",[31,11407,11408,11413,11428,11436,11444,11448,11453,11468,11476,11484,11488,11493,11508,11516],{"__ignoreMap":48},[52,11409,11410],{"class":54,"line":55},[52,11411,11412],{"class":559},"\u003C!-- Different heights at breakpoints -->\n",[52,11414,11415,11417,11419,11421,11423,11426],{"class":54,"line":80},[52,11416,59],{"class":58},[52,11418,63],{"class":62},[52,11420,67],{"class":66},[52,11422,70],{"class":58},[52,11424,11425],{"class":73},"\"w-full h-48 md:h-72 lg:h-screen\"",[52,11427,77],{"class":58},[52,11429,11430,11432,11434],{"class":54,"line":108},[52,11431,83],{"class":58},[52,11433,86],{"class":62},[52,11435,105],{"class":58},[52,11437,11438,11440,11442],{"class":54,"line":118},[52,11439,121],{"class":58},[52,11441,63],{"class":62},[52,11443,77],{"class":58},[52,11445,11446],{"class":54,"line":594},[52,11447,597],{"emptyLinePlaceholder":171},[52,11449,11450],{"class":54,"line":600},[52,11451,11452],{"class":559},"\u003C!-- Aspect ratio preserving at any width -->\n",[52,11454,11455,11457,11459,11461,11463,11466],{"class":54,"line":606},[52,11456,59],{"class":58},[52,11458,63],{"class":62},[52,11460,67],{"class":66},[52,11462,70],{"class":58},[52,11464,11465],{"class":73},"\"w-full aspect-square md:aspect-video\"",[52,11467,77],{"class":58},[52,11469,11470,11472,11474],{"class":54,"line":653},[52,11471,83],{"class":58},[52,11473,10876],{"class":62},[52,11475,105],{"class":58},[52,11477,11478,11480,11482],{"class":54,"line":662},[52,11479,121],{"class":58},[52,11481,63],{"class":62},[52,11483,77],{"class":58},[52,11485,11486],{"class":54,"line":671},[52,11487,597],{"emptyLinePlaceholder":171},[52,11489,11490],{"class":54,"line":676},[52,11491,11492],{"class":559},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[52,11494,11495,11497,11499,11501,11503,11506],{"class":54,"line":682},[52,11496,59],{"class":58},[52,11498,63],{"class":62},[52,11500,67],{"class":66},[52,11502,70],{"class":58},[52,11504,11505],{"class":73},"\"w-full h-[100dvh]\"",[52,11507,77],{"class":58},[52,11509,11510,11512,11514],{"class":54,"line":698},[52,11511,83],{"class":58},[52,11513,9490],{"class":62},[52,11515,105],{"class":58},[52,11517,11518,11520,11522],{"class":54,"line":707},[52,11519,121],{"class":58},[52,11521,63],{"class":62},[52,11523,77],{"class":58},[43,11525,11527],{"className":360,"code":11526,"language":362,"meta":48,"style":48},"\u003CShader className=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,11528,11529,11543,11551],{"__ignoreMap":48},[52,11530,11531,11533,11535,11537,11539,11541],{"class":54,"line":55},[52,11532,59],{"class":58},[52,11534,63],{"class":371},[52,11536,374],{"class":66},[52,11538,70],{"class":231},[52,11540,11425],{"class":73},[52,11542,77],{"class":58},[52,11544,11545,11547,11549],{"class":54,"line":80},[52,11546,83],{"class":58},[52,11548,86],{"class":371},[52,11550,105],{"class":58},[52,11552,11553,11555,11557],{"class":54,"line":108},[52,11554,121],{"class":58},[52,11556,63],{"class":371},[52,11558,77],{"class":58},[43,11560,11562],{"className":419,"code":11561,"language":420,"meta":48,"style":48},"\u003CShader class=\"w-full h-48 md:h-72 lg:h-screen\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,11563,11564,11578,11586],{"__ignoreMap":48},[52,11565,11566,11568,11570,11572,11574,11576],{"class":54,"line":55},[52,11567,59],{"class":58},[52,11569,63],{"class":371},[52,11571,67],{"class":66},[52,11573,70],{"class":231},[52,11575,11425],{"class":73},[52,11577,77],{"class":58},[52,11579,11580,11582,11584],{"class":54,"line":80},[52,11581,83],{"class":58},[52,11583,86],{"class":371},[52,11585,105],{"class":58},[52,11587,11588,11590,11592],{"class":54,"line":108},[52,11589,121],{"class":58},[52,11591,63],{"class":371},[52,11593,77],{"class":58},[43,11595,11596],{"className":419,"code":11561,"language":420,"meta":48,"style":48},[31,11597,11598,11612,11620],{"__ignoreMap":48},[52,11599,11600,11602,11604,11606,11608,11610],{"class":54,"line":55},[52,11601,59],{"class":58},[52,11603,63],{"class":371},[52,11605,67],{"class":66},[52,11607,70],{"class":231},[52,11609,11425],{"class":73},[52,11611,77],{"class":58},[52,11613,11614,11616,11618],{"class":54,"line":80},[52,11615,83],{"class":58},[52,11617,86],{"class":371},[52,11619,105],{"class":58},[52,11621,11622,11624,11626],{"class":54,"line":108},[52,11623,121],{"class":58},[52,11625,63],{"class":371},[52,11627,77],{"class":58},[23,11629,11631],{"id":11630},"other-css-properties","Other CSS properties",[15,11633,11634],{},"The canvas element is fully styleable with standard CSS:",[217,11636,11637,11758,11793,11828],{":tabs":219},[43,11638,11640],{"className":45,"code":11639,"language":47,"meta":48,"style":48},"\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",[31,11641,11642,11647,11662,11670,11678,11682,11687,11702,11710,11718,11722,11727,11742,11750],{"__ignoreMap":48},[52,11643,11644],{"class":54,"line":55},[52,11645,11646],{"class":559},"\u003C!-- Rounded with border -->\n",[52,11648,11649,11651,11653,11655,11657,11660],{"class":54,"line":80},[52,11650,59],{"class":58},[52,11652,63],{"class":62},[52,11654,67],{"class":66},[52,11656,70],{"class":58},[52,11658,11659],{"class":73},"\"rounded-2xl border border-white/10 w-full h-48\"",[52,11661,77],{"class":58},[52,11663,11664,11666,11668],{"class":54,"line":108},[52,11665,83],{"class":58},[52,11667,86],{"class":62},[52,11669,105],{"class":58},[52,11671,11672,11674,11676],{"class":54,"line":118},[52,11673,121],{"class":58},[52,11675,63],{"class":62},[52,11677,77],{"class":58},[52,11679,11680],{"class":54,"line":594},[52,11681,597],{"emptyLinePlaceholder":171},[52,11683,11684],{"class":54,"line":600},[52,11685,11686],{"class":559},"\u003C!-- Drop shadow -->\n",[52,11688,11689,11691,11693,11695,11697,11700],{"class":54,"line":606},[52,11690,59],{"class":58},[52,11692,63],{"class":62},[52,11694,67],{"class":66},[52,11696,70],{"class":58},[52,11698,11699],{"class":73},"\"shadow-2xl shadow-indigo-500/30 rounded-xl w-64 h-64\"",[52,11701,77],{"class":58},[52,11703,11704,11706,11708],{"class":54,"line":653},[52,11705,83],{"class":58},[52,11707,9942],{"class":62},[52,11709,105],{"class":58},[52,11711,11712,11714,11716],{"class":54,"line":662},[52,11713,121],{"class":58},[52,11715,63],{"class":62},[52,11717,77],{"class":58},[52,11719,11720],{"class":54,"line":671},[52,11721,597],{"emptyLinePlaceholder":171},[52,11723,11724],{"class":54,"line":676},[52,11725,11726],{"class":559},"\u003C!-- CSS blur (applied after GPU render) -->\n",[52,11728,11729,11731,11733,11735,11737,11740],{"class":54,"line":682},[52,11730,59],{"class":58},[52,11732,63],{"class":62},[52,11734,67],{"class":66},[52,11736,70],{"class":58},[52,11738,11739],{"class":73},"\"blur-sm w-full h-32\"",[52,11741,77],{"class":58},[52,11743,11744,11746,11748],{"class":54,"line":698},[52,11745,83],{"class":58},[52,11747,86],{"class":62},[52,11749,105],{"class":58},[52,11751,11752,11754,11756],{"class":54,"line":707},[52,11753,121],{"class":58},[52,11755,63],{"class":62},[52,11757,77],{"class":58},[43,11759,11761],{"className":360,"code":11760,"language":362,"meta":48,"style":48},"\u003CShader className=\"rounded-2xl border border-white/10 w-full h-48\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,11762,11763,11777,11785],{"__ignoreMap":48},[52,11764,11765,11767,11769,11771,11773,11775],{"class":54,"line":55},[52,11766,59],{"class":58},[52,11768,63],{"class":371},[52,11770,374],{"class":66},[52,11772,70],{"class":231},[52,11774,11659],{"class":73},[52,11776,77],{"class":58},[52,11778,11779,11781,11783],{"class":54,"line":80},[52,11780,83],{"class":58},[52,11782,86],{"class":371},[52,11784,105],{"class":58},[52,11786,11787,11789,11791],{"class":54,"line":108},[52,11788,121],{"class":58},[52,11790,63],{"class":371},[52,11792,77],{"class":58},[43,11794,11796],{"className":419,"code":11795,"language":420,"meta":48,"style":48},"\u003CShader class=\"rounded-2xl border border-white/10 w-full h-48\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,11797,11798,11812,11820],{"__ignoreMap":48},[52,11799,11800,11802,11804,11806,11808,11810],{"class":54,"line":55},[52,11801,59],{"class":58},[52,11803,63],{"class":371},[52,11805,67],{"class":66},[52,11807,70],{"class":231},[52,11809,11659],{"class":73},[52,11811,77],{"class":58},[52,11813,11814,11816,11818],{"class":54,"line":80},[52,11815,83],{"class":58},[52,11817,86],{"class":371},[52,11819,105],{"class":58},[52,11821,11822,11824,11826],{"class":54,"line":108},[52,11823,121],{"class":58},[52,11825,63],{"class":371},[52,11827,77],{"class":58},[43,11829,11830],{"className":419,"code":11795,"language":420,"meta":48,"style":48},[31,11831,11832,11846,11854],{"__ignoreMap":48},[52,11833,11834,11836,11838,11840,11842,11844],{"class":54,"line":55},[52,11835,59],{"class":58},[52,11837,63],{"class":371},[52,11839,67],{"class":66},[52,11841,70],{"class":231},[52,11843,11659],{"class":73},[52,11845,77],{"class":58},[52,11847,11848,11850,11852],{"class":54,"line":80},[52,11849,83],{"class":58},[52,11851,86],{"class":371},[52,11853,105],{"class":58},[52,11855,11856,11858,11860],{"class":54,"line":108},[52,11857,121],{"class":58},[52,11859,63],{"class":371},[52,11861,77],{"class":58},[156,11863,11864],{},"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":48,"searchDepth":80,"depth":80,"links":11866},[11867,11868,11869,11875,11879,11880],{"id":9129,"depth":80,"text":9130},{"id":543,"depth":80,"text":544},{"id":9448,"depth":80,"text":9449,"children":11870},[11871,11872,11873,11874],{"id":9452,"depth":108,"text":9453},{"id":9887,"depth":108,"text":9888},{"id":10249,"depth":108,"text":10250},{"id":10817,"depth":108,"text":10818},{"id":11138,"depth":80,"text":11139,"children":11876},[11877,11878],{"id":11142,"depth":108,"text":11143},{"id":11306,"depth":108,"text":11307},{"id":11396,"depth":80,"text":11397},{"id":11630,"depth":80,"text":11631},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1480,"description":11881},"docs/guide/5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":11888,"title":11889,"body":11890,"category":7102,"description":13942,"exclude":167,"extension":168,"forceFramework":167,"icon":13943,"meta":13944,"navigation":171,"path":13945,"seo":13946,"stem":13947,"__hash__":13948},"guide/docs/guide/6.transforms.md","Transforms",{"type":8,"value":11891,"toc":13934},[11892,11895,11902,11909,11980,11984,11990,12171,12175,12657,12660,12664,12671,12691,12763,12767,12773,12826,12897,12901,12904,13902,13914,13918,13925,13928,13931],[11,11893,11889],{"id":11894},"transforms",[15,11896,11897,11898,11901],{},"Every component accepts a ",[31,11899,11900],{},"transform"," prop that moves, rotates, and scales it in UV space — the coordinate system the shader uses to sample its output.",[15,11903,11904,11905,11908],{},"This is different from CSS transforms. A CSS transform moves the canvas element in the DOM layout. A shader transform shifts how the shader ",[1833,11906,11907],{},"samples its coordinate system",", so the effect itself shifts without touching the DOM.",[43,11910,11912],{"className":45,"code":11911,"language":47,"meta":48,"style":48},"\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",[31,11913,11914,11919,11939,11943,11948,11956,11972],{"__ignoreMap":48},[52,11915,11916],{"class":54,"line":55},[52,11917,11918],{"class":559},"\u003C!-- CSS transform: moves the DOM element -->\n",[52,11920,11921,11923,11925,11927,11929,11932,11935,11937],{"class":54,"line":80},[52,11922,59],{"class":58},[52,11924,63],{"class":62},[52,11926,67],{"class":66},[52,11928,70],{"class":58},[52,11930,11931],{"class":73},"\"-translate-x-4\"",[52,11933,11934],{"class":58},">...\u003C/",[52,11936,63],{"class":62},[52,11938,77],{"class":58},[52,11940,11941],{"class":54,"line":108},[52,11942,597],{"emptyLinePlaceholder":171},[52,11944,11945],{"class":54,"line":118},[52,11946,11947],{"class":559},"\u003C!-- Shader transform: shifts content within the canvas -->\n",[52,11949,11950,11952,11954],{"class":54,"line":594},[52,11951,59],{"class":58},[52,11953,63],{"class":62},[52,11955,77],{"class":58},[52,11957,11958,11960,11962,11965,11967,11970],{"class":54,"line":600},[52,11959,83],{"class":58},[52,11961,86],{"class":62},[52,11963,11964],{"class":66}," :transform",[52,11966,70],{"class":58},[52,11968,11969],{"class":73},"\"{ offsetX: -0.2 }\"",[52,11971,105],{"class":58},[52,11973,11974,11976,11978],{"class":54,"line":606},[52,11975,121],{"class":58},[52,11977,63],{"class":62},[52,11979,77],{"class":58},[23,11981,11983],{"id":11982},"transform-properties","Transform properties",[15,11985,11986,11987,11989],{},"Pass a partial object to the ",[31,11988,11900],{}," prop — only include what you want to change:",[1780,11991,11992,12007],{},[1783,11993,11994],{},[1786,11995,11996,11999,12002,12005],{},[1789,11997,11998],{},"Prop",[1789,12000,12001],{},"Type",[1789,12003,12004],{},"Default",[1789,12006,1794],{},[1796,12008,12009,12041,12063,12080,12104,12128,12152],{},[1786,12010,12011,12016,12021,12025],{},[1801,12012,12013],{},[31,12014,12015],{},"offsetX",[1801,12017,12018],{},[31,12019,12020],{},"number",[1801,12022,12023],{},[31,12024,5540],{},[1801,12026,12027,12028,1536,12031,12034,12035,12037,12038,12040],{},"Horizontal shift. ",[31,12029,12030],{},"-1",[31,12032,12033],{},"+1",". ",[31,12036,12030],{}," shifts content fully left, ",[31,12039,12033],{}," fully right.",[1786,12042,12043,12048,12052,12056],{},[1801,12044,12045],{},[31,12046,12047],{},"offsetY",[1801,12049,12050],{},[31,12051,12020],{},[1801,12053,12054],{},[31,12055,5540],{},[1801,12057,12058,12059,1536,12061,6357],{},"Vertical shift. ",[31,12060,12030],{},[31,12062,12033],{},[1786,12064,12065,12069,12073,12077],{},[1801,12066,12067],{},[31,12068,8706],{},[1801,12070,12071],{},[31,12072,12020],{},[1801,12074,12075],{},[31,12076,5540],{},[1801,12078,12079],{},"Rotation in degrees. Positive = clockwise.",[1786,12081,12082,12087,12091,12095],{},[1801,12083,12084],{},[31,12085,12086],{},"scale",[1801,12088,12089],{},[31,12090,12020],{},[1801,12092,12093],{},[31,12094,5544],{},[1801,12096,12097,12098,12100,12101,12103],{},"Scale multiplier. ",[31,12099,4620],{}," = half size, ",[31,12102,4080],{}," = double.",[1786,12105,12106,12111,12115,12119],{},[1801,12107,12108],{},[31,12109,12110],{},"anchorX",[1801,12112,12113],{},[31,12114,12020],{},[1801,12116,12117],{},[31,12118,4620],{},[1801,12120,12121,12122,12124,12125,12127],{},"Horizontal pivot point for rotation and scale. ",[31,12123,5540],{}," = left, ",[31,12126,5544],{}," = right.",[1786,12129,12130,12135,12139,12143],{},[1801,12131,12132],{},[31,12133,12134],{},"anchorY",[1801,12136,12137],{},[31,12138,12020],{},[1801,12140,12141],{},[31,12142,4620],{},[1801,12144,12145,12146,12148,12149,12151],{},"Vertical pivot point. ",[31,12147,5540],{}," = top, ",[31,12150,5544],{}," = bottom.",[1786,12153,12154,12159,12163,12168],{},[1801,12155,12156],{},[31,12157,12158],{},"edges",[1801,12160,12161],{},[31,12162,5928],{},[1801,12164,12165],{},[31,12166,12167],{},"'transparent'",[1801,12169,12170],{},"What to show when the transform pushes content out of bounds. See below.",[23,12172,12174],{"id":12173},"basic-usage","Basic usage",[217,12176,12177,12272,12372,12461,12549],{":tabs":1543},[43,12178,12180],{"className":45,"code":12179,"language":47,"meta":48,"style":48},"\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",[31,12181,12182,12196,12201,12216,12220,12225,12240,12244,12249,12264],{"__ignoreMap":48},[52,12183,12184,12186,12188,12190,12192,12194],{"class":54,"line":55},[52,12185,59],{"class":58},[52,12187,63],{"class":62},[52,12189,67],{"class":66},[52,12191,70],{"class":58},[52,12193,319],{"class":73},[52,12195,77],{"class":58},[52,12197,12198],{"class":54,"line":80},[52,12199,12200],{"class":559}," \u003C!-- Rotate 45 degrees -->\n",[52,12202,12203,12205,12207,12209,12211,12214],{"class":54,"line":108},[52,12204,83],{"class":58},[52,12206,86],{"class":62},[52,12208,11964],{"class":66},[52,12210,70],{"class":58},[52,12212,12213],{"class":73},"\"{ rotation: 45 }\"",[52,12215,105],{"class":58},[52,12217,12218],{"class":54,"line":118},[52,12219,597],{"emptyLinePlaceholder":171},[52,12221,12222],{"class":54,"line":594},[52,12223,12224],{"class":559}," \u003C!-- Scale up and shift right -->\n",[52,12226,12227,12229,12231,12233,12235,12238],{"class":54,"line":600},[52,12228,83],{"class":58},[52,12230,2216],{"class":62},[52,12232,11964],{"class":66},[52,12234,70],{"class":58},[52,12236,12237],{"class":73},"\"{ scale: 1.5, offsetX: 0.2 }\"",[52,12239,105],{"class":58},[52,12241,12242],{"class":54,"line":606},[52,12243,597],{"emptyLinePlaceholder":171},[52,12245,12246],{"class":54,"line":653},[52,12247,12248],{"class":559}," \u003C!-- Multiple transforms together -->\n",[52,12250,12251,12253,12255,12257,12259,12262],{"class":54,"line":662},[52,12252,83],{"class":58},[52,12254,10876],{"class":62},[52,12256,11964],{"class":66},[52,12258,70],{"class":58},[52,12260,12261],{"class":73},"\"{ rotation: 30, scale: 0.8, offsetY: -0.1 }\"",[52,12263,105],{"class":58},[52,12265,12266,12268,12270],{"class":54,"line":671},[52,12267,121],{"class":58},[52,12269,63],{"class":62},[52,12271,77],{"class":58},[43,12273,12275],{"className":360,"code":12274,"language":362,"meta":48,"style":48},"\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",[31,12276,12277,12291,12310,12334,12364],{"__ignoreMap":48},[52,12278,12279,12281,12283,12285,12287,12289],{"class":54,"line":55},[52,12280,59],{"class":58},[52,12282,63],{"class":371},[52,12284,374],{"class":66},[52,12286,70],{"class":231},[52,12288,319],{"class":73},[52,12290,77],{"class":58},[52,12292,12293,12295,12297,12300,12302,12305,12307],{"class":54,"line":80},[52,12294,83],{"class":58},[52,12296,86],{"class":371},[52,12298,12299],{"class":66}," transform",[52,12301,70],{"class":231},[52,12303,12304],{"class":58},"{{ rotation: ",[52,12306,1206],{"class":371},[52,12308,12309],{"class":58}," }} />\n",[52,12311,12312,12314,12316,12318,12320,12323,12326,12329,12332],{"class":54,"line":108},[52,12313,83],{"class":58},[52,12315,2216],{"class":371},[52,12317,12299],{"class":66},[52,12319,70],{"class":231},[52,12321,12322],{"class":58},"{{ scale: ",[52,12324,12325],{"class":371},"1.5",[52,12327,12328],{"class":58},", offsetX: ",[52,12330,12331],{"class":371},"0.2",[52,12333,12309],{"class":58},[52,12335,12336,12338,12340,12342,12344,12346,12349,12352,12354,12357,12359,12362],{"class":54,"line":118},[52,12337,83],{"class":58},[52,12339,10876],{"class":371},[52,12341,12299],{"class":66},[52,12343,70],{"class":231},[52,12345,12304],{"class":58},[52,12347,12348],{"class":371},"30",[52,12350,12351],{"class":58},", scale: ",[52,12353,3164],{"class":371},[52,12355,12356],{"class":58},", offsetY: ",[52,12358,7744],{"class":231},[52,12360,12361],{"class":371},"0.1",[52,12363,12309],{"class":58},[52,12365,12366,12368,12370],{"class":54,"line":594},[52,12367,121],{"class":58},[52,12369,63],{"class":371},[52,12371,77],{"class":58},[43,12373,12375],{"className":419,"code":12374,"language":420,"meta":48,"style":48},"\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",[31,12376,12377,12391,12407,12427,12453],{"__ignoreMap":48},[52,12378,12379,12381,12383,12385,12387,12389],{"class":54,"line":55},[52,12380,59],{"class":58},[52,12382,63],{"class":371},[52,12384,67],{"class":66},[52,12386,70],{"class":231},[52,12388,319],{"class":73},[52,12390,77],{"class":58},[52,12392,12393,12395,12397,12399,12401,12403,12405],{"class":54,"line":80},[52,12394,83],{"class":58},[52,12396,86],{"class":371},[52,12398,12299],{"class":66},[52,12400,70],{"class":231},[52,12402,12304],{"class":58},[52,12404,1206],{"class":371},[52,12406,12309],{"class":58},[52,12408,12409,12411,12413,12415,12417,12419,12421,12423,12425],{"class":54,"line":108},[52,12410,83],{"class":58},[52,12412,2216],{"class":371},[52,12414,12299],{"class":66},[52,12416,70],{"class":231},[52,12418,12322],{"class":58},[52,12420,12325],{"class":371},[52,12422,12328],{"class":58},[52,12424,12331],{"class":371},[52,12426,12309],{"class":58},[52,12428,12429,12431,12433,12435,12437,12439,12441,12443,12445,12447,12449,12451],{"class":54,"line":118},[52,12430,83],{"class":58},[52,12432,10876],{"class":371},[52,12434,12299],{"class":66},[52,12436,70],{"class":231},[52,12438,12304],{"class":58},[52,12440,12348],{"class":371},[52,12442,12351],{"class":58},[52,12444,3164],{"class":371},[52,12446,12356],{"class":58},[52,12448,7744],{"class":231},[52,12450,12361],{"class":371},[52,12452,12309],{"class":58},[52,12454,12455,12457,12459],{"class":54,"line":594},[52,12456,121],{"class":58},[52,12458,63],{"class":371},[52,12460,77],{"class":58},[43,12462,12463],{"className":419,"code":12374,"language":420,"meta":48,"style":48},[31,12464,12465,12479,12495,12515,12541],{"__ignoreMap":48},[52,12466,12467,12469,12471,12473,12475,12477],{"class":54,"line":55},[52,12468,59],{"class":58},[52,12470,63],{"class":371},[52,12472,67],{"class":66},[52,12474,70],{"class":231},[52,12476,319],{"class":73},[52,12478,77],{"class":58},[52,12480,12481,12483,12485,12487,12489,12491,12493],{"class":54,"line":80},[52,12482,83],{"class":58},[52,12484,86],{"class":371},[52,12486,12299],{"class":66},[52,12488,70],{"class":231},[52,12490,12304],{"class":58},[52,12492,1206],{"class":371},[52,12494,12309],{"class":58},[52,12496,12497,12499,12501,12503,12505,12507,12509,12511,12513],{"class":54,"line":108},[52,12498,83],{"class":58},[52,12500,2216],{"class":371},[52,12502,12299],{"class":66},[52,12504,70],{"class":231},[52,12506,12322],{"class":58},[52,12508,12325],{"class":371},[52,12510,12328],{"class":58},[52,12512,12331],{"class":371},[52,12514,12309],{"class":58},[52,12516,12517,12519,12521,12523,12525,12527,12529,12531,12533,12535,12537,12539],{"class":54,"line":118},[52,12518,83],{"class":58},[52,12520,10876],{"class":371},[52,12522,12299],{"class":66},[52,12524,70],{"class":231},[52,12526,12304],{"class":58},[52,12528,12348],{"class":371},[52,12530,12351],{"class":58},[52,12532,3164],{"class":371},[52,12534,12356],{"class":58},[52,12536,7744],{"class":231},[52,12538,12361],{"class":371},[52,12540,12309],{"class":58},[52,12542,12543,12545,12547],{"class":54,"line":594},[52,12544,121],{"class":58},[52,12546,63],{"class":371},[52,12548,77],{"class":58},[43,12550,12552],{"className":222,"code":12551,"language":224,"meta":48,"style":48},"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",[31,12553,12554,12568,12572,12577,12586,12591,12601,12606,12611,12615,12623,12627,12640,12644,12649,12653],{"__ignoreMap":48},[52,12555,12556,12558,12560,12562,12564,12566],{"class":54,"line":55},[52,12557,1721],{"class":231},[52,12559,1724],{"class":371},[52,12561,1727],{"class":231},[52,12563,1730],{"class":231},[52,12565,1733],{"class":66},[52,12567,1736],{"class":58},[52,12569,12570],{"class":54,"line":80},[52,12571,1751],{"class":58},[52,12573,12574],{"class":54,"line":108},[52,12575,12576],{"class":58}," {\n",[52,12578,12579,12582,12584],{"class":54,"line":118},[52,12580,12581],{"class":58}," type: ",[52,12583,2126],{"class":73},[52,12585,1746],{"class":58},[52,12587,12588],{"class":54,"line":594},[52,12589,12590],{"class":58}," props: {\n",[52,12592,12593,12596,12598],{"class":54,"line":600},[52,12594,12595],{"class":58}," transform: { rotation: ",[52,12597,1206],{"class":371},[52,12599,12600],{"class":58}," }\n",[52,12602,12603],{"class":54,"line":606},[52,12604,12605],{"class":58}," }\n",[52,12607,12608],{"class":54,"line":653},[52,12609,12610],{"class":58}," },\n",[52,12612,12613],{"class":54,"line":662},[52,12614,12576],{"class":58},[52,12616,12617,12619,12621],{"class":54,"line":671},[52,12618,12581],{"class":58},[52,12620,2869],{"class":73},[52,12622,1746],{"class":58},[52,12624,12625],{"class":54,"line":676},[52,12626,12590],{"class":58},[52,12628,12629,12632,12634,12636,12638],{"class":54,"line":682},[52,12630,12631],{"class":58}," transform: { scale: ",[52,12633,12325],{"class":371},[52,12635,12328],{"class":58},[52,12637,12331],{"class":371},[52,12639,12600],{"class":58},[52,12641,12642],{"class":54,"line":698},[52,12643,12605],{"class":58},[52,12645,12646],{"class":54,"line":707},[52,12647,12648],{"class":58}," }\n",[52,12650,12651],{"class":54,"line":2327},[52,12652,1773],{"class":58},[52,12654,12655],{"class":54,"line":6522},[52,12656,1778],{"class":58},[15,12658,12659],{},"You only need to include the properties you want to change — unspecified values stay at their defaults.",[23,12661,12663],{"id":12662},"anchor-point","Anchor point",[15,12665,12666,12667,12670],{},"The anchor point controls where rotation and scale are applied from. The default ",[31,12668,12669],{},"0.5, 0.5"," anchors to the center of the canvas.",[1465,12672,12673,12679,12685],{},[1468,12674,12675,12678],{},[31,12676,12677],{},"{ anchorX: 0, anchorY: 0 }"," — top-left corner",[1468,12680,12681,12684],{},[31,12682,12683],{},"{ anchorX: 0.5, anchorY: 0.5 }"," — center (default)",[1468,12686,12687,12690],{},[31,12688,12689],{},"{ anchorX: 1, anchorY: 1 }"," — bottom-right corner",[43,12692,12694],{"className":45,"code":12693,"language":47,"meta":48,"style":48},"\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",[31,12695,12696,12701,12715,12719,12724,12739,12743,12748],{"__ignoreMap":48},[52,12697,12698],{"class":54,"line":55},[52,12699,12700],{"class":559},"\u003C!-- Rotates around the center (default) -->\n",[52,12702,12703,12705,12707,12709,12711,12713],{"class":54,"line":80},[52,12704,59],{"class":58},[52,12706,2216],{"class":62},[52,12708,11964],{"class":66},[52,12710,70],{"class":58},[52,12712,12213],{"class":73},[52,12714,105],{"class":58},[52,12716,12717],{"class":54,"line":108},[52,12718,597],{"emptyLinePlaceholder":171},[52,12720,12721],{"class":54,"line":118},[52,12722,12723],{"class":559},"\u003C!-- Rotates around the top-left corner -->\n",[52,12725,12726,12728,12730,12732,12734,12737],{"class":54,"line":594},[52,12727,59],{"class":58},[52,12729,2216],{"class":62},[52,12731,11964],{"class":66},[52,12733,70],{"class":58},[52,12735,12736],{"class":73},"\"{ rotation: 45, anchorX: 0, anchorY: 0 }\"",[52,12738,105],{"class":58},[52,12740,12741],{"class":54,"line":600},[52,12742,597],{"emptyLinePlaceholder":171},[52,12744,12745],{"class":54,"line":606},[52,12746,12747],{"class":559},"\u003C!-- Scales from the top edge -->\n",[52,12749,12750,12752,12754,12756,12758,12761],{"class":54,"line":653},[52,12751,59],{"class":58},[52,12753,86],{"class":62},[52,12755,11964],{"class":66},[52,12757,70],{"class":58},[52,12759,12760],{"class":73},"\"{ scale: 2, anchorY: 0 }\"",[52,12762,105],{"class":58},[23,12764,12766],{"id":12765},"edge-modes","Edge modes",[15,12768,12769,12770,12772],{},"When a transform shifts or scales content beyond the canvas boundaries, the ",[31,12771,12158],{}," property controls what fills the out-of-bounds area:",[1780,12774,12775,12784],{},[1783,12776,12777],{},[1786,12778,12779,12781],{},[1789,12780,1791],{},[1789,12782,12783],{},"Behavior",[1796,12785,12786,12796,12806,12816],{},[1786,12787,12788,12793],{},[1801,12789,12790],{},[31,12791,12792],{},"transparent",[1801,12794,12795],{},"Out-of-bounds pixels are fully transparent (default)",[1786,12797,12798,12803],{},[1801,12799,12800],{},[31,12801,12802],{},"stretch",[1801,12804,12805],{},"The edge pixels repeat to fill",[1786,12807,12808,12813],{},[1801,12809,12810],{},[31,12811,12812],{},"mirror",[1801,12814,12815],{},"Content reflects at the edges like a mirror",[1786,12817,12818,12823],{},[1801,12819,12820],{},[31,12821,12822],{},"wrap",[1801,12824,12825],{},"Content tiles seamlessly",[43,12827,12829],{"className":45,"code":12828,"language":47,"meta":48,"style":48},"\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",[31,12830,12831,12845,12850,12865,12869,12874,12889],{"__ignoreMap":48},[52,12832,12833,12835,12837,12839,12841,12843],{"class":54,"line":55},[52,12834,59],{"class":58},[52,12836,63],{"class":62},[52,12838,67],{"class":66},[52,12840,70],{"class":58},[52,12842,319],{"class":73},[52,12844,77],{"class":58},[52,12846,12847],{"class":54,"line":80},[52,12848,12849],{"class":559}," \u003C!-- Offset with wrapping — tiles the effect -->\n",[52,12851,12852,12854,12856,12858,12860,12863],{"class":54,"line":108},[52,12853,83],{"class":58},[52,12855,86],{"class":62},[52,12857,11964],{"class":66},[52,12859,70],{"class":58},[52,12861,12862],{"class":73},"\"{ offsetX: 0.3, edges: 'wrap' }\"",[52,12864,105],{"class":58},[52,12866,12867],{"class":54,"line":118},[52,12868,597],{"emptyLinePlaceholder":171},[52,12870,12871],{"class":54,"line":594},[52,12872,12873],{"class":559}," \u003C!-- Offset with mirror — reflects the edge -->\n",[52,12875,12876,12878,12880,12882,12884,12887],{"class":54,"line":600},[52,12877,83],{"class":58},[52,12879,10876],{"class":62},[52,12881,11964],{"class":66},[52,12883,70],{"class":58},[52,12885,12886],{"class":73},"\"{ offsetX: 0.3, edges: 'mirror' }\"",[52,12888,105],{"class":58},[52,12890,12891,12893,12895],{"class":54,"line":606},[52,12892,121],{"class":58},[52,12894,63],{"class":62},[52,12896,77],{"class":58},[23,12898,12900],{"id":12899},"animating-transforms","Animating transforms",[15,12902,12903],{},"Transforms are reactive props — you can bind them to state and animate them:",[217,12905,12906,13131,13360,13521,13735],{":tabs":1543},[43,12907,12909],{"className":45,"code":12908,"language":47,"meta":48,"style":48},"\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",[31,12910,12911,12921,12932,12936,12953,12961,12965,12977,12992,13015,13028,13032,13043,13047,13051,13066,13074,13078,13086,13100,13115,13123],{"__ignoreMap":48},[52,12912,12913,12915,12917,12919],{"class":54,"line":55},[52,12914,59],{"class":58},[52,12916,2253],{"class":62},[52,12918,2256],{"class":66},[52,12920,77],{"class":58},[52,12922,12923,12925,12928,12930],{"class":54,"line":80},[52,12924,232],{"class":231},[52,12926,12927],{"class":58}," { ref, onMounted, onUnmounted } ",[52,12929,238],{"class":231},[52,12931,2270],{"class":73},[52,12933,12934],{"class":54,"line":108},[52,12935,597],{"emptyLinePlaceholder":171},[52,12937,12938,12940,12943,12945,12947,12949,12951],{"class":54,"line":118},[52,12939,1721],{"class":231},[52,12941,12942],{"class":371}," rotation",[52,12944,1727],{"class":231},[52,12946,2286],{"class":66},[52,12948,2289],{"class":58},[52,12950,5540],{"class":371},[52,12952,2295],{"class":58},[52,12954,12955,12958],{"class":54,"line":594},[52,12956,12957],{"class":231},"let",[52,12959,12960],{"class":58}," animFrame\n",[52,12962,12963],{"class":54,"line":600},[52,12964,597],{"emptyLinePlaceholder":171},[52,12966,12967,12970,12973,12975],{"class":54,"line":606},[52,12968,12969],{"class":66},"onMounted",[52,12971,12972],{"class":58},"(() ",[52,12974,2425],{"class":231},[52,12976,2904],{"class":58},[52,12978,12979,12981,12983,12985,12988,12990],{"class":54,"line":653},[52,12980,2368],{"class":231},[52,12982,8830],{"class":66},[52,12984,1727],{"class":231},[52,12986,12987],{"class":58}," () ",[52,12989,2425],{"class":231},[52,12991,2904],{"class":58},[52,12993,12994,12997,12999,13002,13004,13007,13009,13012],{"class":54,"line":662},[52,12995,12996],{"class":58}," rotation.value ",[52,12998,70],{"class":231},[52,13000,13001],{"class":58}," (rotation.value ",[52,13003,7707],{"class":231},[52,13005,13006],{"class":371}," 0.5",[52,13008,8871],{"class":58},[52,13010,13011],{"class":231},"%",[52,13013,13014],{"class":371}," 360\n",[52,13016,13017,13020,13022,13025],{"class":54,"line":671},[52,13018,13019],{"class":58}," animFrame ",[52,13021,70],{"class":231},[52,13023,13024],{"class":66}," requestAnimationFrame",[52,13026,13027],{"class":58},"(animate)\n",[52,13029,13030],{"class":54,"line":676},[52,13031,2919],{"class":58},[52,13033,13034,13037,13039,13041],{"class":54,"line":682},[52,13035,13036],{"class":58}," animFrame ",[52,13038,70],{"class":231},[52,13040,13024],{"class":66},[52,13042,13027],{"class":58},[52,13044,13045],{"class":54,"line":698},[52,13046,1778],{"class":58},[52,13048,13049],{"class":54,"line":707},[52,13050,597],{"emptyLinePlaceholder":171},[52,13052,13053,13056,13058,13060,13063],{"class":54,"line":2327},[52,13054,13055],{"class":66},"onUnmounted",[52,13057,12972],{"class":58},[52,13059,2425],{"class":231},[52,13061,13062],{"class":66}," cancelAnimationFrame",[52,13064,13065],{"class":58},"(animFrame))\n",[52,13067,13068,13070,13072],{"class":54,"line":6522},[52,13069,121],{"class":58},[52,13071,2253],{"class":62},[52,13073,77],{"class":58},[52,13075,13076],{"class":54,"line":6532},[52,13077,597],{"emptyLinePlaceholder":171},[52,13079,13080,13082,13084],{"class":54,"line":6543},[52,13081,59],{"class":58},[52,13083,2182],{"class":62},[52,13085,77],{"class":58},[52,13087,13088,13090,13092,13094,13096,13098],{"class":54,"line":6548},[52,13089,83],{"class":58},[52,13091,63],{"class":62},[52,13093,67],{"class":66},[52,13095,70],{"class":58},[52,13097,319],{"class":73},[52,13099,77],{"class":58},[52,13101,13102,13104,13106,13108,13110,13113],{"class":54,"line":7870},[52,13103,2213],{"class":58},[52,13105,86],{"class":62},[52,13107,11964],{"class":66},[52,13109,70],{"class":58},[52,13111,13112],{"class":73},"\"{ rotation }\"",[52,13114,105],{"class":58},[52,13116,13117,13119,13121],{"class":54,"line":7875},[52,13118,2230],{"class":58},[52,13120,63],{"class":62},[52,13122,77],{"class":58},[52,13124,13125,13127,13129],{"class":54,"line":8948},[52,13126,121],{"class":58},[52,13128,2182],{"class":62},[52,13130,77],{"class":58},[43,13132,13134],{"className":360,"code":13133,"language":362,"meta":48,"style":48},"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",[31,13135,13136,13147,13151,13160,13185,13204,13208,13219,13234,13262,13273,13277,13288,13302,13307,13311,13317,13331,13344,13352,13356],{"__ignoreMap":48},[52,13137,13138,13140,13143,13145],{"class":54,"line":55},[52,13139,232],{"class":231},[52,13141,13142],{"class":58}," { useState, useEffect, useRef } ",[52,13144,238],{"class":231},[52,13146,2350],{"class":73},[52,13148,13149],{"class":54,"line":80},[52,13150,597],{"emptyLinePlaceholder":171},[52,13152,13153,13155,13158],{"class":54,"line":108},[52,13154,2304],{"class":231},[52,13156,13157],{"class":66}," SpinningGradient",[52,13159,2310],{"class":58},[52,13161,13162,13164,13166,13168,13170,13173,13175,13177,13179,13181,13183],{"class":54,"line":118},[52,13163,2368],{"class":231},[52,13165,2371],{"class":58},[52,13167,8706],{"class":371},[52,13169,1881],{"class":58},[52,13171,13172],{"class":371},"setRotation",[52,13174,2382],{"class":58},[52,13176,70],{"class":231},[52,13178,2387],{"class":66},[52,13180,2289],{"class":58},[52,13182,5540],{"class":371},[52,13184,2295],{"class":58},[52,13186,13187,13189,13192,13194,13197,13199,13202],{"class":54,"line":594},[52,13188,2368],{"class":231},[52,13190,13191],{"class":371}," frameRef",[52,13193,1727],{"class":231},[52,13195,13196],{"class":66}," useRef",[52,13198,2289],{"class":58},[52,13200,13201],{"class":371},"null",[52,13203,2295],{"class":58},[52,13205,13206],{"class":54,"line":600},[52,13207,597],{"emptyLinePlaceholder":171},[52,13209,13210,13213,13215,13217],{"class":54,"line":606},[52,13211,13212],{"class":66}," useEffect",[52,13214,12972],{"class":58},[52,13216,2425],{"class":231},[52,13218,2904],{"class":58},[52,13220,13221,13224,13226,13228,13230,13232],{"class":54,"line":653},[52,13222,13223],{"class":231}," const",[52,13225,8830],{"class":66},[52,13227,1727],{"class":231},[52,13229,12987],{"class":58},[52,13231,2425],{"class":231},[52,13233,2904],{"class":58},[52,13235,13236,13239,13241,13244,13246,13249,13251,13253,13255,13257,13260],{"class":54,"line":662},[52,13237,13238],{"class":66}," setRotation",[52,13240,2289],{"class":58},[52,13242,13243],{"class":7698},"r",[52,13245,7701],{"class":231},[52,13247,13248],{"class":58}," (r ",[52,13250,7707],{"class":231},[52,13252,13006],{"class":371},[52,13254,8871],{"class":58},[52,13256,13011],{"class":231},[52,13258,13259],{"class":371}," 360",[52,13261,2295],{"class":58},[52,13263,13264,13267,13269,13271],{"class":54,"line":671},[52,13265,13266],{"class":58}," frameRef.current ",[52,13268,70],{"class":231},[52,13270,13024],{"class":66},[52,13272,13027],{"class":58},[52,13274,13275],{"class":54,"line":676},[52,13276,12648],{"class":58},[52,13278,13279,13282,13284,13286],{"class":54,"line":682},[52,13280,13281],{"class":58}," frameRef.current ",[52,13283,70],{"class":231},[52,13285,13024],{"class":66},[52,13287,13027],{"class":58},[52,13289,13290,13293,13295,13297,13299],{"class":54,"line":698},[52,13291,13292],{"class":231}," return",[52,13294,12987],{"class":58},[52,13296,2425],{"class":231},[52,13298,13062],{"class":66},[52,13300,13301],{"class":58},"(frameRef.current)\n",[52,13303,13304],{"class":54,"line":707},[52,13305,13306],{"class":58}," }, [])\n",[52,13308,13309],{"class":54,"line":2327},[52,13310,597],{"emptyLinePlaceholder":171},[52,13312,13313,13315],{"class":54,"line":6522},[52,13314,2402],{"class":231},[52,13316,2405],{"class":58},[52,13318,13319,13321,13323,13325,13327,13329],{"class":54,"line":6532},[52,13320,2213],{"class":58},[52,13322,63],{"class":371},[52,13324,374],{"class":66},[52,13326,70],{"class":231},[52,13328,319],{"class":73},[52,13330,77],{"class":58},[52,13332,13333,13335,13337,13339,13341],{"class":54,"line":6543},[52,13334,2476],{"class":58},[52,13336,86],{"class":371},[52,13338,12299],{"class":66},[52,13340,70],{"class":231},[52,13342,13343],{"class":58},"{{ rotation }} />\n",[52,13345,13346,13348,13350],{"class":54,"line":6548},[52,13347,2491],{"class":58},[52,13349,63],{"class":371},[52,13351,77],{"class":58},[52,13353,13354],{"class":54,"line":7870},[52,13355,2500],{"class":58},[52,13357,13358],{"class":54,"line":7875},[52,13359,729],{"class":58},[43,13361,13363],{"className":419,"code":13362,"language":420,"meta":48,"style":48},"\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",[31,13364,13365,13373,13378,13382,13387,13392,13396,13401,13417,13437,13448,13452,13462,13466,13470,13475,13483,13487,13501,13513],{"__ignoreMap":48},[52,13366,13367,13369,13371],{"class":54,"line":55},[52,13368,59],{"class":58},[52,13370,2253],{"class":62},[52,13372,77],{"class":58},[52,13374,13375],{"class":54,"line":80},[52,13376,13377],{"class":58}," import { onMount, onDestroy } from 'svelte'\n",[52,13379,13380],{"class":54,"line":108},[52,13381,597],{"emptyLinePlaceholder":171},[52,13383,13384],{"class":54,"line":118},[52,13385,13386],{"class":58}," let rotation = 0\n",[52,13388,13389],{"class":54,"line":594},[52,13390,13391],{"class":58}," let animFrame\n",[52,13393,13394],{"class":54,"line":600},[52,13395,597],{"emptyLinePlaceholder":171},[52,13397,13398],{"class":54,"line":606},[52,13399,13400],{"class":58}," onMount(() => {\n",[52,13402,13403,13406,13409,13411,13413,13415],{"class":54,"line":653},[52,13404,13405],{"class":58}," const ",[52,13407,13408],{"class":66},"animate",[52,13410,1727],{"class":231},[52,13412,12987],{"class":58},[52,13414,2425],{"class":231},[52,13416,2904],{"class":58},[52,13418,13419,13422,13424,13427,13429,13431,13433,13435],{"class":54,"line":662},[52,13420,13421],{"class":58}," rotation ",[52,13423,70],{"class":231},[52,13425,13426],{"class":58}," (rotation ",[52,13428,7707],{"class":231},[52,13430,13006],{"class":371},[52,13432,8871],{"class":58},[52,13434,13011],{"class":231},[52,13436,13014],{"class":371},[52,13438,13439,13442,13444,13446],{"class":54,"line":671},[52,13440,13441],{"class":58}," animFrame ",[52,13443,70],{"class":231},[52,13445,13024],{"class":66},[52,13447,13027],{"class":58},[52,13449,13450],{"class":54,"line":676},[52,13451,12648],{"class":58},[52,13453,13454,13456,13458,13460],{"class":54,"line":682},[52,13455,13019],{"class":58},[52,13457,70],{"class":231},[52,13459,13024],{"class":66},[52,13461,13027],{"class":58},[52,13463,13464],{"class":54,"line":698},[52,13465,9876],{"class":58},[52,13467,13468],{"class":54,"line":707},[52,13469,597],{"emptyLinePlaceholder":171},[52,13471,13472],{"class":54,"line":2327},[52,13473,13474],{"class":58}," onDestroy(() => cancelAnimationFrame(animFrame))\n",[52,13476,13477,13479,13481],{"class":54,"line":6522},[52,13478,121],{"class":58},[52,13480,2253],{"class":62},[52,13482,77],{"class":58},[52,13484,13485],{"class":54,"line":6532},[52,13486,597],{"emptyLinePlaceholder":171},[52,13488,13489,13491,13493,13495,13497,13499],{"class":54,"line":6543},[52,13490,59],{"class":58},[52,13492,63],{"class":371},[52,13494,67],{"class":66},[52,13496,70],{"class":231},[52,13498,319],{"class":73},[52,13500,77],{"class":58},[52,13502,13503,13505,13507,13509,13511],{"class":54,"line":6548},[52,13504,83],{"class":58},[52,13506,86],{"class":371},[52,13508,12299],{"class":66},[52,13510,70],{"class":231},[52,13512,13343],{"class":58},[52,13514,13515,13517,13519],{"class":54,"line":7870},[52,13516,121],{"class":58},[52,13518,63],{"class":371},[52,13520,77],{"class":58},[43,13522,13524],{"className":419,"code":13523,"language":420,"meta":48,"style":48},"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",[31,13525,13526,13537,13541,13549,13573,13577,13588,13596,13610,13634,13645,13649,13660,13674,13678,13682,13688,13702,13719,13727,13731],{"__ignoreMap":48},[52,13527,13528,13530,13533,13535],{"class":54,"line":55},[52,13529,232],{"class":231},[52,13531,13532],{"class":58}," { createSignal, onMount, onCleanup } ",[52,13534,238],{"class":231},[52,13536,2650],{"class":73},[52,13538,13539],{"class":54,"line":80},[52,13540,597],{"emptyLinePlaceholder":171},[52,13542,13543,13545,13547],{"class":54,"line":108},[52,13544,2304],{"class":231},[52,13546,13157],{"class":66},[52,13548,2310],{"class":58},[52,13550,13551,13553,13555,13557,13559,13561,13563,13565,13567,13569,13571],{"class":54,"line":118},[52,13552,2368],{"class":231},[52,13554,2371],{"class":58},[52,13556,8706],{"class":371},[52,13558,1881],{"class":58},[52,13560,13172],{"class":371},[52,13562,2382],{"class":58},[52,13564,70],{"class":231},[52,13566,2681],{"class":66},[52,13568,2289],{"class":58},[52,13570,5540],{"class":371},[52,13572,2295],{"class":58},[52,13574,13575],{"class":54,"line":594},[52,13576,597],{"emptyLinePlaceholder":171},[52,13578,13579,13582,13584,13586],{"class":54,"line":600},[52,13580,13581],{"class":66}," onMount",[52,13583,12972],{"class":58},[52,13585,2425],{"class":231},[52,13587,2904],{"class":58},[52,13589,13590,13593],{"class":54,"line":606},[52,13591,13592],{"class":231}," let",[52,13594,13595],{"class":58}," frame\n",[52,13597,13598,13600,13602,13604,13606,13608],{"class":54,"line":653},[52,13599,13223],{"class":231},[52,13601,8830],{"class":66},[52,13603,1727],{"class":231},[52,13605,12987],{"class":58},[52,13607,2425],{"class":231},[52,13609,2904],{"class":58},[52,13611,13612,13614,13616,13618,13620,13622,13624,13626,13628,13630,13632],{"class":54,"line":662},[52,13613,13238],{"class":66},[52,13615,2289],{"class":58},[52,13617,13243],{"class":7698},[52,13619,7701],{"class":231},[52,13621,13248],{"class":58},[52,13623,7707],{"class":231},[52,13625,13006],{"class":371},[52,13627,8871],{"class":58},[52,13629,13011],{"class":231},[52,13631,13259],{"class":371},[52,13633,2295],{"class":58},[52,13635,13636,13639,13641,13643],{"class":54,"line":671},[52,13637,13638],{"class":58}," frame ",[52,13640,70],{"class":231},[52,13642,13024],{"class":66},[52,13644,13027],{"class":58},[52,13646,13647],{"class":54,"line":676},[52,13648,12648],{"class":58},[52,13650,13651,13654,13656,13658],{"class":54,"line":682},[52,13652,13653],{"class":58}," frame ",[52,13655,70],{"class":231},[52,13657,13024],{"class":66},[52,13659,13027],{"class":58},[52,13661,13662,13665,13667,13669,13671],{"class":54,"line":698},[52,13663,13664],{"class":66}," onCleanup",[52,13666,12972],{"class":58},[52,13668,2425],{"class":231},[52,13670,13062],{"class":66},[52,13672,13673],{"class":58},"(frame))\n",[52,13675,13676],{"class":54,"line":707},[52,13677,9876],{"class":58},[52,13679,13680],{"class":54,"line":2327},[52,13681,597],{"emptyLinePlaceholder":171},[52,13683,13684,13686],{"class":54,"line":6522},[52,13685,2402],{"class":231},[52,13687,2405],{"class":58},[52,13689,13690,13692,13694,13696,13698,13700],{"class":54,"line":6532},[52,13691,2213],{"class":58},[52,13693,63],{"class":371},[52,13695,67],{"class":66},[52,13697,70],{"class":231},[52,13699,319],{"class":73},[52,13701,77],{"class":58},[52,13703,13704,13706,13708,13710,13712,13714,13716],{"class":54,"line":6543},[52,13705,2476],{"class":58},[52,13707,86],{"class":371},[52,13709,12299],{"class":66},[52,13711,70],{"class":231},[52,13713,12304],{"class":58},[52,13715,8706],{"class":66},[52,13717,13718],{"class":58},"() }} />\n",[52,13720,13721,13723,13725],{"class":54,"line":6548},[52,13722,2491],{"class":58},[52,13724,63],{"class":371},[52,13726,77],{"class":58},[52,13728,13729],{"class":54,"line":7870},[52,13730,2500],{"class":58},[52,13732,13733],{"class":54,"line":7875},[52,13734,729],{"class":58},[43,13736,13738],{"className":222,"code":13737,"language":224,"meta":48,"style":48},"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",[31,13739,13740,13750,13754,13772,13786,13790,13813,13817,13821,13825,13837,13851,13870,13884,13891,13895],{"__ignoreMap":48},[52,13741,13742,13744,13746,13748],{"class":54,"line":55},[52,13743,232],{"class":231},[52,13745,8385],{"class":58},[52,13747,238],{"class":231},[52,13749,8390],{"class":73},[52,13751,13752],{"class":54,"line":80},[52,13753,597],{"emptyLinePlaceholder":171},[52,13755,13756,13758,13760,13762,13764,13766,13768,13770],{"class":54,"line":108},[52,13757,1721],{"class":231},[52,13759,2796],{"class":371},[52,13761,1727],{"class":231},[52,13763,2801],{"class":58},[52,13765,2804],{"class":66},[52,13767,2289],{"class":58},[52,13769,9398],{"class":73},[52,13771,2295],{"class":58},[52,13773,13774,13776,13778,13780,13782,13784],{"class":54,"line":118},[52,13775,1721],{"class":231},[52,13777,1724],{"class":371},[52,13779,1727],{"class":231},[52,13781,1730],{"class":231},[52,13783,1733],{"class":66},[52,13785,1736],{"class":58},[52,13787,13788],{"class":54,"line":594},[52,13789,1751],{"class":58},[52,13791,13792,13794,13796,13798,13801,13803,13806,13808,13811],{"class":54,"line":600},[52,13793,1756],{"class":58},[52,13795,2126],{"class":73},[52,13797,2872],{"class":58},[52,13799,13800],{"class":73},"'grad'",[52,13802,7036],{"class":58},[52,13804,13805],{"class":73},"'#0f172a'",[52,13807,7042],{"class":58},[52,13809,13810],{"class":73},"'#7c3aed'",[52,13812,1768],{"class":58},[52,13814,13815],{"class":54,"line":606},[52,13816,1773],{"class":58},[52,13818,13819],{"class":54,"line":653},[52,13820,1778],{"class":58},[52,13822,13823],{"class":54,"line":662},[52,13824,597],{"emptyLinePlaceholder":171},[52,13826,13827,13829,13832,13834],{"class":54,"line":671},[52,13828,12957],{"class":231},[52,13830,13831],{"class":58}," rotation ",[52,13833,70],{"class":231},[52,13835,13836],{"class":371}," 0\n",[52,13838,13839,13841,13843,13845,13847,13849],{"class":54,"line":676},[52,13840,1721],{"class":231},[52,13842,8830],{"class":66},[52,13844,1727],{"class":231},[52,13846,12987],{"class":58},[52,13848,2425],{"class":231},[52,13850,2904],{"class":58},[52,13852,13853,13856,13858,13860,13862,13864,13866,13868],{"class":54,"line":682},[52,13854,13855],{"class":58}," rotation ",[52,13857,70],{"class":231},[52,13859,13426],{"class":58},[52,13861,7707],{"class":231},[52,13863,13006],{"class":371},[52,13865,8871],{"class":58},[52,13867,13011],{"class":231},[52,13869,13014],{"class":371},[52,13871,13872,13875,13877,13879,13881],{"class":54,"line":698},[52,13873,13874],{"class":58}," shader.",[52,13876,8479],{"class":66},[52,13878,2289],{"class":58},[52,13880,13800],{"class":73},[52,13882,13883],{"class":58},", { transform: { rotation } })\n",[52,13885,13886,13889],{"class":54,"line":707},[52,13887,13888],{"class":66}," requestAnimationFrame",[52,13890,13027],{"class":58},[52,13892,13893],{"class":54,"line":2327},[52,13894,729],{"class":58},[52,13896,13897,13900],{"class":54,"line":6522},[52,13898,13899],{"class":66},"requestAnimationFrame",[52,13901,13027],{"class":58},[15,13903,13904,13905,13909,13910,13913],{},"For continuous animations like rotation, consider using a ",[1139,13906,13908],{"href":13907},"/docs/guide/dynamic-props","Prop Driver"," instead — the ",[31,13911,13912],{},"auto-animate"," driver handles this declaratively without any component code.",[23,13915,13917],{"id":13916},"performance","Performance",[15,13919,13920,13921,13924],{},"Transforms have ",[151,13922,13923],{},"zero overhead when all values are at their defaults",". The renderer checks for non-default values before activating the UV transformation pass.",[15,13926,13927],{},"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,13929,13930],{},"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.",[156,13932,13933],{},"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":48,"searchDepth":80,"depth":80,"links":13935},[13936,13937,13938,13939,13940,13941],{"id":11982,"depth":80,"text":11983},{"id":12173,"depth":80,"text":12174},{"id":12662,"depth":80,"text":12663},{"id":12765,"depth":80,"text":12766},{"id":12899,"depth":80,"text":12900},{"id":13916,"depth":80,"text":13917},"Reposition, rotate, and scale any shader component in UV space","arrows-to-circle",{},"/docs/guide/transforms",{"title":11889,"description":13942},"docs/guide/6.transforms","I6UL4PDAPMEAXn2HXal6IZYN8IJaEN-UqIZcjXIiNCw",{"id":13950,"title":13951,"body":13952,"category":7102,"description":17611,"exclude":167,"extension":168,"forceFramework":167,"icon":17612,"meta":17613,"navigation":171,"path":13907,"seo":17614,"stem":17615,"__hash__":17616},"guide/docs/guide/7.dynamic-props.md","Dynamic Props",{"type":8,"value":13953,"toc":17603},[13954,13957,13960,13963,14012,14014,14017,14554,14557,14562,14690,14702,14705,14721,15189,15192,15196,15396,15408,15440,15443,15446,15928,15931,15935,16064,16069,16072,16075,16081,16802,16805,16809,16950,16955,16959,16962,17442,17446,17453,17601],[11,13955,13951],{"id":13956},"dynamic-props",[15,13958,13959],{},"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,13961,13962],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[43,13964,13966],{"className":45,"code":13965,"language":47,"meta":48,"style":48},"\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",[31,13967,13968,13973,13988,13992,13997],{"__ignoreMap":48},[52,13969,13970],{"class":54,"line":55},[52,13971,13972],{"class":559},"\u003C!-- Static value -->\n",[52,13974,13975,13977,13979,13982,13984,13986],{"class":54,"line":80},[52,13976,59],{"class":58},[52,13978,2216],{"class":62},[52,13980,13981],{"class":66}," :radius",[52,13983,70],{"class":58},[52,13985,4547],{"class":73},[52,13987,105],{"class":58},[52,13989,13990],{"class":54,"line":108},[52,13991,597],{"emptyLinePlaceholder":171},[52,13993,13994],{"class":54,"line":118},[52,13995,13996],{"class":559},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[52,13998,13999,14001,14003,14005,14007,14010],{"class":54,"line":594},[52,14000,59],{"class":58},[52,14002,2216],{"class":62},[52,14004,13981],{"class":66},[52,14006,70],{"class":58},[52,14008,14009],{"class":73},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[52,14011,105],{"class":58},[23,14013,13912],{"id":13912},[15,14015,14016],{},"Continuously animates a numeric prop between two values over time.",[217,14018,14019,14110,14222,14325,14427],{":tabs":1543},[43,14020,14022],{"className":45,"code":14021,"language":47,"meta":48,"style":48},"\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",[31,14023,14024,14038,14044,14053,14063,14068,14073,14078,14083,14088,14093,14098,14102],{"__ignoreMap":48},[52,14025,14026,14028,14030,14032,14034,14036],{"class":54,"line":55},[52,14027,59],{"class":58},[52,14029,63],{"class":62},[52,14031,67],{"class":66},[52,14033,70],{"class":58},[52,14035,319],{"class":73},[52,14037,77],{"class":58},[52,14039,14040,14042],{"class":54,"line":80},[52,14041,83],{"class":58},[52,14043,6499],{"class":62},[52,14045,14046,14048,14050],{"class":54,"line":108},[52,14047,6504],{"class":66},[52,14049,70],{"class":58},[52,14051,14052],{"class":73},"\"#6366f1\"\n",[52,14054,14055,14058,14060],{"class":54,"line":118},[52,14056,14057],{"class":66}," :radius",[52,14059,70],{"class":58},[52,14061,14062],{"class":73},"\"{\n",[52,14064,14065],{"class":54,"line":594},[52,14066,14067],{"class":73}," type: 'auto-animate',\n",[52,14069,14070],{"class":54,"line":600},[52,14071,14072],{"class":73}," mode: 'ping-pong',\n",[52,14074,14075],{"class":54,"line":606},[52,14076,14077],{"class":73}," outputMin: 0.2,\n",[52,14079,14080],{"class":54,"line":653},[52,14081,14082],{"class":73}," outputMax: 0.6,\n",[52,14084,14085],{"class":54,"line":662},[52,14086,14087],{"class":73}," speed: 0.8,\n",[52,14089,14090],{"class":54,"line":671},[52,14091,14092],{"class":73}," easing: 'sine'\n",[52,14094,14095],{"class":54,"line":676},[52,14096,14097],{"class":73}," }\"\n",[52,14099,14100],{"class":54,"line":682},[52,14101,1224],{"class":58},[52,14103,14104,14106,14108],{"class":54,"line":698},[52,14105,121],{"class":58},[52,14107,63],{"class":62},[52,14109,77],{"class":58},[43,14111,14113],{"className":360,"code":14112,"language":362,"meta":48,"style":48},"\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",[31,14114,14115,14129,14135,14143,14152,14161,14171,14180,14189,14198,14205,14210,14214],{"__ignoreMap":48},[52,14116,14117,14119,14121,14123,14125,14127],{"class":54,"line":55},[52,14118,59],{"class":58},[52,14120,63],{"class":371},[52,14122,374],{"class":66},[52,14124,70],{"class":231},[52,14126,319],{"class":73},[52,14128,77],{"class":58},[52,14130,14131,14133],{"class":54,"line":80},[52,14132,83],{"class":58},[52,14134,6499],{"class":371},[52,14136,14137,14139,14141],{"class":54,"line":108},[52,14138,6504],{"class":66},[52,14140,70],{"class":231},[52,14142,14052],{"class":73},[52,14144,14145,14147,14149],{"class":54,"line":118},[52,14146,6514],{"class":66},[52,14148,70],{"class":231},[52,14150,14151],{"class":58},"{{\n",[52,14153,14154,14156,14159],{"class":54,"line":594},[52,14155,12581],{"class":58},[52,14157,14158],{"class":73},"'auto-animate'",[52,14160,1746],{"class":58},[52,14162,14163,14166,14169],{"class":54,"line":600},[52,14164,14165],{"class":58}," mode: ",[52,14167,14168],{"class":73},"'ping-pong'",[52,14170,1746],{"class":58},[52,14172,14173,14176,14178],{"class":54,"line":606},[52,14174,14175],{"class":58}," outputMin: ",[52,14177,12331],{"class":371},[52,14179,1746],{"class":58},[52,14181,14182,14185,14187],{"class":54,"line":653},[52,14183,14184],{"class":58}," outputMax: ",[52,14186,5103],{"class":371},[52,14188,1746],{"class":58},[52,14190,14191,14194,14196],{"class":54,"line":662},[52,14192,14193],{"class":58}," speed: ",[52,14195,3164],{"class":371},[52,14197,1746],{"class":58},[52,14199,14200,14202],{"class":54,"line":671},[52,14201,8852],{"class":58},[52,14203,14204],{"class":73},"'sine'\n",[52,14206,14207],{"class":54,"line":676},[52,14208,14209],{"class":58}," }}\n",[52,14211,14212],{"class":54,"line":682},[52,14213,1224],{"class":58},[52,14215,14216,14218,14220],{"class":54,"line":698},[52,14217,121],{"class":58},[52,14219,63],{"class":371},[52,14221,77],{"class":58},[43,14223,14225],{"className":419,"code":14224,"language":420,"meta":48,"style":48},"\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",[31,14226,14227,14241,14247,14255,14263,14271,14279,14287,14295,14303,14309,14313,14317],{"__ignoreMap":48},[52,14228,14229,14231,14233,14235,14237,14239],{"class":54,"line":55},[52,14230,59],{"class":58},[52,14232,63],{"class":371},[52,14234,67],{"class":66},[52,14236,70],{"class":231},[52,14238,319],{"class":73},[52,14240,77],{"class":58},[52,14242,14243,14245],{"class":54,"line":80},[52,14244,83],{"class":58},[52,14246,6499],{"class":371},[52,14248,14249,14251,14253],{"class":54,"line":108},[52,14250,6504],{"class":66},[52,14252,70],{"class":231},[52,14254,14052],{"class":73},[52,14256,14257,14259,14261],{"class":54,"line":118},[52,14258,6514],{"class":66},[52,14260,70],{"class":231},[52,14262,14151],{"class":58},[52,14264,14265,14267,14269],{"class":54,"line":594},[52,14266,12581],{"class":58},[52,14268,14158],{"class":73},[52,14270,1746],{"class":58},[52,14272,14273,14275,14277],{"class":54,"line":600},[52,14274,14165],{"class":58},[52,14276,14168],{"class":73},[52,14278,1746],{"class":58},[52,14280,14281,14283,14285],{"class":54,"line":606},[52,14282,14175],{"class":58},[52,14284,12331],{"class":371},[52,14286,1746],{"class":58},[52,14288,14289,14291,14293],{"class":54,"line":653},[52,14290,14184],{"class":58},[52,14292,5103],{"class":371},[52,14294,1746],{"class":58},[52,14296,14297,14299,14301],{"class":54,"line":662},[52,14298,14193],{"class":58},[52,14300,3164],{"class":371},[52,14302,1746],{"class":58},[52,14304,14305,14307],{"class":54,"line":671},[52,14306,8852],{"class":58},[52,14308,14204],{"class":73},[52,14310,14311],{"class":54,"line":676},[52,14312,14209],{"class":58},[52,14314,14315],{"class":54,"line":682},[52,14316,1224],{"class":58},[52,14318,14319,14321,14323],{"class":54,"line":698},[52,14320,121],{"class":58},[52,14322,63],{"class":371},[52,14324,77],{"class":58},[43,14326,14327],{"className":419,"code":14224,"language":420,"meta":48,"style":48},[31,14328,14329,14343,14349,14357,14365,14373,14381,14389,14397,14405,14411,14415,14419],{"__ignoreMap":48},[52,14330,14331,14333,14335,14337,14339,14341],{"class":54,"line":55},[52,14332,59],{"class":58},[52,14334,63],{"class":371},[52,14336,67],{"class":66},[52,14338,70],{"class":231},[52,14340,319],{"class":73},[52,14342,77],{"class":58},[52,14344,14345,14347],{"class":54,"line":80},[52,14346,83],{"class":58},[52,14348,6499],{"class":371},[52,14350,14351,14353,14355],{"class":54,"line":108},[52,14352,6504],{"class":66},[52,14354,70],{"class":231},[52,14356,14052],{"class":73},[52,14358,14359,14361,14363],{"class":54,"line":118},[52,14360,6514],{"class":66},[52,14362,70],{"class":231},[52,14364,14151],{"class":58},[52,14366,14367,14369,14371],{"class":54,"line":594},[52,14368,12581],{"class":58},[52,14370,14158],{"class":73},[52,14372,1746],{"class":58},[52,14374,14375,14377,14379],{"class":54,"line":600},[52,14376,14165],{"class":58},[52,14378,14168],{"class":73},[52,14380,1746],{"class":58},[52,14382,14383,14385,14387],{"class":54,"line":606},[52,14384,14175],{"class":58},[52,14386,12331],{"class":371},[52,14388,1746],{"class":58},[52,14390,14391,14393,14395],{"class":54,"line":653},[52,14392,14184],{"class":58},[52,14394,5103],{"class":371},[52,14396,1746],{"class":58},[52,14398,14399,14401,14403],{"class":54,"line":662},[52,14400,14193],{"class":58},[52,14402,3164],{"class":371},[52,14404,1746],{"class":58},[52,14406,14407,14409],{"class":54,"line":671},[52,14408,8852],{"class":58},[52,14410,14204],{"class":73},[52,14412,14413],{"class":54,"line":676},[52,14414,14209],{"class":58},[52,14416,14417],{"class":54,"line":682},[52,14418,1224],{"class":58},[52,14420,14421,14423,14425],{"class":54,"line":698},[52,14422,121],{"class":58},[52,14424,63],{"class":371},[52,14426,77],{"class":58},[43,14428,14430],{"className":222,"code":14429,"language":224,"meta":48,"style":48},"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",[31,14431,14432,14446,14450,14454,14462,14466,14476,14481,14490,14499,14508,14517,14526,14533,14538,14542,14546,14550],{"__ignoreMap":48},[52,14433,14434,14436,14438,14440,14442,14444],{"class":54,"line":55},[52,14435,1721],{"class":231},[52,14437,1724],{"class":371},[52,14439,1727],{"class":231},[52,14441,1730],{"class":231},[52,14443,1733],{"class":66},[52,14445,1736],{"class":58},[52,14447,14448],{"class":54,"line":80},[52,14449,1751],{"class":58},[52,14451,14452],{"class":54,"line":108},[52,14453,12576],{"class":58},[52,14455,14456,14458,14460],{"class":54,"line":118},[52,14457,12581],{"class":58},[52,14459,2869],{"class":73},[52,14461,1746],{"class":58},[52,14463,14464],{"class":54,"line":594},[52,14465,12590],{"class":58},[52,14467,14468,14471,14474],{"class":54,"line":600},[52,14469,14470],{"class":58}," color: ",[52,14472,14473],{"class":73},"'#6366f1'",[52,14475,1746],{"class":58},[52,14477,14478],{"class":54,"line":606},[52,14479,14480],{"class":58}," radius: {\n",[52,14482,14483,14486,14488],{"class":54,"line":653},[52,14484,14485],{"class":58}," type: ",[52,14487,14158],{"class":73},[52,14489,1746],{"class":58},[52,14491,14492,14495,14497],{"class":54,"line":662},[52,14493,14494],{"class":58}," mode: ",[52,14496,14168],{"class":73},[52,14498,1746],{"class":58},[52,14500,14501,14504,14506],{"class":54,"line":671},[52,14502,14503],{"class":58}," outputMin: ",[52,14505,12331],{"class":371},[52,14507,1746],{"class":58},[52,14509,14510,14513,14515],{"class":54,"line":676},[52,14511,14512],{"class":58}," outputMax: ",[52,14514,5103],{"class":371},[52,14516,1746],{"class":58},[52,14518,14519,14522,14524],{"class":54,"line":682},[52,14520,14521],{"class":58}," speed: ",[52,14523,3164],{"class":371},[52,14525,1746],{"class":58},[52,14527,14528,14531],{"class":54,"line":698},[52,14529,14530],{"class":58}," easing: ",[52,14532,14204],{"class":73},[52,14534,14535],{"class":54,"line":707},[52,14536,14537],{"class":58}," }\n",[52,14539,14540],{"class":54,"line":2327},[52,14541,12605],{"class":58},[52,14543,14544],{"class":54,"line":6522},[52,14545,12648],{"class":58},[52,14547,14548],{"class":54,"line":6532},[52,14549,1773],{"class":58},[52,14551,14552],{"class":54,"line":6543},[52,14553,1778],{"class":58},[19,14555],{":preset":14556},"{\"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,14558,14559],{},[151,14560,14561],{},"Properties:",[1780,14563,14564,14576],{},[1783,14565,14566],{},[1786,14567,14568,14570,14572,14574],{},[1789,14569,11998],{},[1789,14571,12001],{},[1789,14573,12004],{},[1789,14575,1794],{},[1796,14577,14578,14603,14619,14635,14654],{},[1786,14579,14580,14585,14590,14593],{},[1801,14581,14582],{},[31,14583,14584],{},"mode",[1801,14586,14587],{},[31,14588,14589],{},"'ping-pong' | 'loop'",[1801,14591,14592],{},"required",[1801,14594,14595,14598,14599,14602],{},[31,14596,14597],{},"ping-pong"," oscillates between min and max. ",[31,14600,14601],{},"loop"," advances from min to max then wraps.",[1786,14604,14605,14610,14614,14616],{},[1801,14606,14607],{},[31,14608,14609],{},"outputMin",[1801,14611,14612],{},[31,14613,12020],{},[1801,14615,14592],{},[1801,14617,14618],{},"Value at the start/bottom of the range.",[1786,14620,14621,14626,14630,14632],{},[1801,14622,14623],{},[31,14624,14625],{},"outputMax",[1801,14627,14628],{},[31,14629,12020],{},[1801,14631,14592],{},[1801,14633,14634],{},"Value at the end/top of the range.",[1786,14636,14637,14642,14646,14651],{},[1801,14638,14639],{},[31,14640,14641],{},"speed",[1801,14643,14644],{},[31,14645,12020],{},[1801,14647,14648],{},[31,14649,14650],{},"1.0",[1801,14652,14653],{},"Cycles per second. Negative values reverse the loop direction.",[1786,14655,14656,14661,14665,14670],{},[1801,14657,14658],{},[31,14659,14660],{},"easing",[1801,14662,14663],{},[31,14664,5928],{},[1801,14666,14667],{},[31,14668,14669],{},"'sine'",[1801,14671,14672,14673,14675,14676,1881,14679,1881,14681,1881,14684,1881,14687,6357],{},"Easing curve for ",[31,14674,14597],{}," mode. Options: ",[31,14677,14678],{},"sine",[31,14680,1880],{},[31,14682,14683],{},"quad",[31,14685,14686],{},"expo",[31,14688,14689],{},"bounce",[15,14691,14692,14695,14696,14698,14699,6357],{},[151,14693,14694],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[31,14697,14601],{}," mode and ",[31,14700,14701],{},"outputMin: 0, outputMax: 360",[23,14703,14704],{"id":14704},"mouse-position",[15,14706,14707,14708,14711,14712,1881,14714,14717,14718,6357],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[31,14709,14710],{},"{ x, y }"," coordinates, such as ",[31,14713,5108],{},[31,14715,14716],{},"position",", or ",[31,14719,14720],{},"offset",[217,14722,14723,14805,14903,14994,15084],{":tabs":1543},[43,14724,14726],{"className":45,"code":14725,"language":47,"meta":48,"style":48},"\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",[31,14727,14728,14742,14748,14756,14765,14774,14779,14784,14789,14793,14797],{"__ignoreMap":48},[52,14729,14730,14732,14734,14736,14738,14740],{"class":54,"line":55},[52,14731,59],{"class":58},[52,14733,63],{"class":62},[52,14735,67],{"class":66},[52,14737,70],{"class":58},[52,14739,319],{"class":73},[52,14741,77],{"class":58},[52,14743,14744,14746],{"class":54,"line":80},[52,14745,83],{"class":58},[52,14747,6499],{"class":62},[52,14749,14750,14752,14754],{"class":54,"line":108},[52,14751,6504],{"class":66},[52,14753,70],{"class":58},[52,14755,14052],{"class":73},[52,14757,14758,14760,14762],{"class":54,"line":118},[52,14759,14057],{"class":66},[52,14761,70],{"class":58},[52,14763,14764],{"class":73},"\"0.15\"\n",[52,14766,14767,14770,14772],{"class":54,"line":594},[52,14768,14769],{"class":66}," :center",[52,14771,70],{"class":58},[52,14773,14062],{"class":73},[52,14775,14776],{"class":54,"line":600},[52,14777,14778],{"class":73}," type: 'mouse-position',\n",[52,14780,14781],{"class":54,"line":606},[52,14782,14783],{"class":73}," smoothing: 0.12,\n",[52,14785,14786],{"class":54,"line":653},[52,14787,14788],{"class":73}," momentum: 0.2\n",[52,14790,14791],{"class":54,"line":662},[52,14792,14097],{"class":73},[52,14794,14795],{"class":54,"line":671},[52,14796,1224],{"class":58},[52,14798,14799,14801,14803],{"class":54,"line":676},[52,14800,121],{"class":58},[52,14802,63],{"class":62},[52,14804,77],{"class":58},[43,14806,14808],{"className":360,"code":14807,"language":362,"meta":48,"style":48},"\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",[31,14809,14810,14824,14830,14838,14851,14860,14869,14879,14887,14891,14895],{"__ignoreMap":48},[52,14811,14812,14814,14816,14818,14820,14822],{"class":54,"line":55},[52,14813,59],{"class":58},[52,14815,63],{"class":371},[52,14817,374],{"class":66},[52,14819,70],{"class":231},[52,14821,319],{"class":73},[52,14823,77],{"class":58},[52,14825,14826,14828],{"class":54,"line":80},[52,14827,83],{"class":58},[52,14829,6499],{"class":371},[52,14831,14832,14834,14836],{"class":54,"line":108},[52,14833,6504],{"class":66},[52,14835,70],{"class":231},[52,14837,14052],{"class":73},[52,14839,14840,14842,14844,14846,14849],{"class":54,"line":118},[52,14841,6514],{"class":66},[52,14843,70],{"class":231},[52,14845,723],{"class":58},[52,14847,14848],{"class":371},"0.15",[52,14850,729],{"class":58},[52,14852,14853,14856,14858],{"class":54,"line":594},[52,14854,14855],{"class":66}," center",[52,14857,70],{"class":231},[52,14859,14151],{"class":58},[52,14861,14862,14864,14867],{"class":54,"line":600},[52,14863,12581],{"class":58},[52,14865,14866],{"class":73},"'mouse-position'",[52,14868,1746],{"class":58},[52,14870,14871,14874,14877],{"class":54,"line":606},[52,14872,14873],{"class":58}," smoothing: ",[52,14875,14876],{"class":371},"0.12",[52,14878,1746],{"class":58},[52,14880,14881,14884],{"class":54,"line":653},[52,14882,14883],{"class":58}," momentum: ",[52,14885,14886],{"class":371},"0.2\n",[52,14888,14889],{"class":54,"line":662},[52,14890,14209],{"class":58},[52,14892,14893],{"class":54,"line":671},[52,14894,1224],{"class":58},[52,14896,14897,14899,14901],{"class":54,"line":676},[52,14898,121],{"class":58},[52,14900,63],{"class":371},[52,14902,77],{"class":58},[43,14904,14906],{"className":419,"code":14905,"language":420,"meta":48,"style":48},"\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",[31,14907,14908,14922,14928,14936,14948,14956,14964,14972,14978,14982,14986],{"__ignoreMap":48},[52,14909,14910,14912,14914,14916,14918,14920],{"class":54,"line":55},[52,14911,59],{"class":58},[52,14913,63],{"class":371},[52,14915,67],{"class":66},[52,14917,70],{"class":231},[52,14919,319],{"class":73},[52,14921,77],{"class":58},[52,14923,14924,14926],{"class":54,"line":80},[52,14925,83],{"class":58},[52,14927,6499],{"class":371},[52,14929,14930,14932,14934],{"class":54,"line":108},[52,14931,6504],{"class":66},[52,14933,70],{"class":231},[52,14935,14052],{"class":73},[52,14937,14938,14940,14942,14944,14946],{"class":54,"line":118},[52,14939,6514],{"class":66},[52,14941,70],{"class":231},[52,14943,723],{"class":58},[52,14945,14848],{"class":371},[52,14947,729],{"class":58},[52,14949,14950,14952,14954],{"class":54,"line":594},[52,14951,14855],{"class":66},[52,14953,70],{"class":231},[52,14955,14151],{"class":58},[52,14957,14958,14960,14962],{"class":54,"line":600},[52,14959,12581],{"class":58},[52,14961,14866],{"class":73},[52,14963,1746],{"class":58},[52,14965,14966,14968,14970],{"class":54,"line":606},[52,14967,14873],{"class":58},[52,14969,14876],{"class":371},[52,14971,1746],{"class":58},[52,14973,14974,14976],{"class":54,"line":653},[52,14975,14883],{"class":58},[52,14977,14886],{"class":371},[52,14979,14980],{"class":54,"line":662},[52,14981,14209],{"class":58},[52,14983,14984],{"class":54,"line":671},[52,14985,1224],{"class":58},[52,14987,14988,14990,14992],{"class":54,"line":676},[52,14989,121],{"class":58},[52,14991,63],{"class":371},[52,14993,77],{"class":58},[43,14995,14996],{"className":419,"code":14905,"language":420,"meta":48,"style":48},[31,14997,14998,15012,15018,15026,15038,15046,15054,15062,15068,15072,15076],{"__ignoreMap":48},[52,14999,15000,15002,15004,15006,15008,15010],{"class":54,"line":55},[52,15001,59],{"class":58},[52,15003,63],{"class":371},[52,15005,67],{"class":66},[52,15007,70],{"class":231},[52,15009,319],{"class":73},[52,15011,77],{"class":58},[52,15013,15014,15016],{"class":54,"line":80},[52,15015,83],{"class":58},[52,15017,6499],{"class":371},[52,15019,15020,15022,15024],{"class":54,"line":108},[52,15021,6504],{"class":66},[52,15023,70],{"class":231},[52,15025,14052],{"class":73},[52,15027,15028,15030,15032,15034,15036],{"class":54,"line":118},[52,15029,6514],{"class":66},[52,15031,70],{"class":231},[52,15033,723],{"class":58},[52,15035,14848],{"class":371},[52,15037,729],{"class":58},[52,15039,15040,15042,15044],{"class":54,"line":594},[52,15041,14855],{"class":66},[52,15043,70],{"class":231},[52,15045,14151],{"class":58},[52,15047,15048,15050,15052],{"class":54,"line":600},[52,15049,12581],{"class":58},[52,15051,14866],{"class":73},[52,15053,1746],{"class":58},[52,15055,15056,15058,15060],{"class":54,"line":606},[52,15057,14873],{"class":58},[52,15059,14876],{"class":371},[52,15061,1746],{"class":58},[52,15063,15064,15066],{"class":54,"line":653},[52,15065,14883],{"class":58},[52,15067,14886],{"class":371},[52,15069,15070],{"class":54,"line":662},[52,15071,14209],{"class":58},[52,15073,15074],{"class":54,"line":671},[52,15075,1224],{"class":58},[52,15077,15078,15080,15082],{"class":54,"line":676},[52,15079,121],{"class":58},[52,15081,63],{"class":371},[52,15083,77],{"class":58},[43,15085,15087],{"className":222,"code":15086,"language":224,"meta":48,"style":48},"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",[31,15088,15089,15103,15107,15111,15119,15123,15131,15140,15145,15153,15162,15169,15173,15177,15181,15185],{"__ignoreMap":48},[52,15090,15091,15093,15095,15097,15099,15101],{"class":54,"line":55},[52,15092,1721],{"class":231},[52,15094,1724],{"class":371},[52,15096,1727],{"class":231},[52,15098,1730],{"class":231},[52,15100,1733],{"class":66},[52,15102,1736],{"class":58},[52,15104,15105],{"class":54,"line":80},[52,15106,1751],{"class":58},[52,15108,15109],{"class":54,"line":108},[52,15110,12576],{"class":58},[52,15112,15113,15115,15117],{"class":54,"line":118},[52,15114,12581],{"class":58},[52,15116,2869],{"class":73},[52,15118,1746],{"class":58},[52,15120,15121],{"class":54,"line":594},[52,15122,12590],{"class":58},[52,15124,15125,15127,15129],{"class":54,"line":600},[52,15126,14470],{"class":58},[52,15128,14473],{"class":73},[52,15130,1746],{"class":58},[52,15132,15133,15136,15138],{"class":54,"line":606},[52,15134,15135],{"class":58}," radius: ",[52,15137,14848],{"class":371},[52,15139,1746],{"class":58},[52,15141,15142],{"class":54,"line":653},[52,15143,15144],{"class":58}," center: {\n",[52,15146,15147,15149,15151],{"class":54,"line":662},[52,15148,14485],{"class":58},[52,15150,14866],{"class":73},[52,15152,1746],{"class":58},[52,15154,15155,15158,15160],{"class":54,"line":671},[52,15156,15157],{"class":58}," smoothing: ",[52,15159,14876],{"class":371},[52,15161,1746],{"class":58},[52,15163,15164,15167],{"class":54,"line":676},[52,15165,15166],{"class":58}," momentum: ",[52,15168,14886],{"class":371},[52,15170,15171],{"class":54,"line":682},[52,15172,14537],{"class":58},[52,15174,15175],{"class":54,"line":698},[52,15176,12605],{"class":58},[52,15178,15179],{"class":54,"line":707},[52,15180,12648],{"class":58},[52,15182,15183],{"class":54,"line":2327},[52,15184,1773],{"class":58},[52,15186,15187],{"class":54,"line":6522},[52,15188,1778],{"class":58},[19,15190],{":preset":15191},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,15193,15194],{},[151,15195,14561],{},[1780,15197,15198,15210],{},[1783,15199,15200],{},[1786,15201,15202,15204,15206,15208],{},[1789,15203,11998],{},[1789,15205,12001],{},[1789,15207,12004],{},[1789,15209,1794],{},[1796,15211,15212,15234,15254,15273,15291,15312,15333,15360,15378],{},[1786,15213,15214,15219,15224,15229],{},[1801,15215,15216],{},[31,15217,15218],{},"x",[1801,15220,15221],{},[31,15222,15223],{},"'mouse' | number",[1801,15225,15226],{},[31,15227,15228],{},"'mouse'",[1801,15230,15231,15233],{},[31,15232,15228],{}," tracks cursor X. A number pins it to that value (0–1).",[1786,15235,15236,15241,15245,15249],{},[1801,15237,15238],{},[31,15239,15240],{},"y",[1801,15242,15243],{},[31,15244,15223],{},[1801,15246,15247],{},[31,15248,15228],{},[1801,15250,15251,15253],{},[31,15252,15228],{}," tracks cursor Y. A number pins it to that value (0–1).",[1786,15255,15256,15261,15266,15270],{},[1801,15257,15258],{},[31,15259,15260],{},"invertX",[1801,15262,15263],{},[31,15264,15265],{},"boolean",[1801,15267,15268],{},[31,15269,2292],{},[1801,15271,15272],{},"Flips the X direction — cursor moving right moves position left.",[1786,15274,15275,15280,15284,15288],{},[1801,15276,15277],{},[31,15278,15279],{},"invertY",[1801,15281,15282],{},[31,15283,15265],{},[1801,15285,15286],{},[31,15287,2292],{},[1801,15289,15290],{},"Flips the Y direction.",[1786,15292,15293,15298,15302,15306],{},[1801,15294,15295],{},[31,15296,15297],{},"smoothing",[1801,15299,15300],{},[31,15301,12020],{},[1801,15303,15304],{},[31,15305,5540],{},[1801,15307,15308,15309,15311],{},"Lag amount (0–1). ",[31,15310,5540],{}," = instant, higher values = sluggish follow.",[1786,15313,15314,15319,15323,15327],{},[1801,15315,15316],{},[31,15317,15318],{},"momentum",[1801,15320,15321],{},[31,15322,12020],{},[1801,15324,15325],{},[31,15326,5540],{},[1801,15328,15329,15330,15332],{},"Spring bounce (0–1). ",[31,15331,5540],{}," = no overshoot, values near 1 = springy.",[1786,15334,15335,15340,15344,15348],{},[1801,15336,15337],{},[31,15338,15339],{},"reach",[1801,15341,15342],{},[31,15343,12020],{},[1801,15345,15346],{},[31,15347,5544],{},[1801,15349,15350,15351,15353,15354,15356,15357,15359],{},"Displacement scale. ",[31,15352,5544],{}," = 1:1 with cursor. ",[31,15355,4080],{}," = twice the displacement. ",[31,15358,5540],{}," = pinned to origin.",[1786,15361,15362,15367,15371,15375],{},[1801,15363,15364],{},[31,15365,15366],{},"originX",[1801,15368,15369],{},[31,15370,12020],{},[1801,15372,15373],{},[31,15374,4620],{},[1801,15376,15377],{},"X coordinate of the origin point that displacement scales from.",[1786,15379,15380,15385,15389,15393],{},[1801,15381,15382],{},[31,15383,15384],{},"originY",[1801,15386,15387],{},[31,15388,12020],{},[1801,15390,15391],{},[31,15392,4620],{},[1801,15394,15395],{},"Y coordinate of the origin point.",[15,15397,15398,15401,15402,15404,15405,15407],{},[151,15399,15400],{},"Pinning one axis:"," Set ",[31,15403,15218],{}," or ",[31,15406,15240],{}," to a number to fix that axis while the other tracks the mouse:",[43,15409,15411],{"className":45,"code":15410,"language":47,"meta":48,"style":48},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n\u003CCircle :radius=\"0.15\" :center=\"{ type: 'mouse-position', y: 0.5 }\" />\n",[31,15412,15413,15418],{"__ignoreMap":48},[52,15414,15415],{"class":54,"line":55},[52,15416,15417],{"class":559},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[52,15419,15420,15422,15424,15426,15428,15431,15433,15435,15438],{"class":54,"line":80},[52,15421,59],{"class":58},[52,15423,2216],{"class":62},[52,15425,13981],{"class":66},[52,15427,70],{"class":58},[52,15429,15430],{"class":73},"\"0.15\"",[52,15432,5000],{"class":66},[52,15434,70],{"class":58},[52,15436,15437],{"class":73},"\"{ type: 'mouse-position', y: 0.5 }\"",[52,15439,105],{"class":58},[23,15441,15442],{"id":15442},"mouse",[15,15444,15445],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[217,15447,15448,15530,15629,15724,15818],{":tabs":1543},[43,15449,15451],{"className":45,"code":15450,"language":47,"meta":48,"style":48},"\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",[31,15452,15453,15467,15473,15481,15489,15494,15499,15504,15509,15514,15518,15522],{"__ignoreMap":48},[52,15454,15455,15457,15459,15461,15463,15465],{"class":54,"line":55},[52,15456,59],{"class":58},[52,15458,63],{"class":62},[52,15460,67],{"class":66},[52,15462,70],{"class":58},[52,15464,319],{"class":73},[52,15466,77],{"class":58},[52,15468,15469,15471],{"class":54,"line":80},[52,15470,83],{"class":58},[52,15472,6499],{"class":62},[52,15474,15475,15477,15479],{"class":54,"line":108},[52,15476,6504],{"class":66},[52,15478,70],{"class":58},[52,15480,14052],{"class":73},[52,15482,15483,15485,15487],{"class":54,"line":118},[52,15484,14057],{"class":66},[52,15486,70],{"class":58},[52,15488,14062],{"class":73},[52,15490,15491],{"class":54,"line":594},[52,15492,15493],{"class":73}," type: 'mouse',\n",[52,15495,15496],{"class":54,"line":600},[52,15497,15498],{"class":73}," axis: 'x',\n",[52,15500,15501],{"class":54,"line":606},[52,15502,15503],{"class":73}," outputMin: 0.1,\n",[52,15505,15506],{"class":54,"line":653},[52,15507,15508],{"class":73}," outputMax: 0.7,\n",[52,15510,15511],{"class":54,"line":662},[52,15512,15513],{"class":73}," smoothing: 0.1\n",[52,15515,15516],{"class":54,"line":671},[52,15517,14097],{"class":73},[52,15519,15520],{"class":54,"line":676},[52,15521,1224],{"class":58},[52,15523,15524,15526,15528],{"class":54,"line":682},[52,15525,121],{"class":58},[52,15527,63],{"class":62},[52,15529,77],{"class":58},[43,15531,15533],{"className":360,"code":15532,"language":362,"meta":48,"style":48},"\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",[31,15534,15535,15549,15555,15563,15571,15579,15589,15597,15606,15613,15617,15621],{"__ignoreMap":48},[52,15536,15537,15539,15541,15543,15545,15547],{"class":54,"line":55},[52,15538,59],{"class":58},[52,15540,63],{"class":371},[52,15542,374],{"class":66},[52,15544,70],{"class":231},[52,15546,319],{"class":73},[52,15548,77],{"class":58},[52,15550,15551,15553],{"class":54,"line":80},[52,15552,83],{"class":58},[52,15554,6499],{"class":371},[52,15556,15557,15559,15561],{"class":54,"line":108},[52,15558,6504],{"class":66},[52,15560,70],{"class":231},[52,15562,14052],{"class":73},[52,15564,15565,15567,15569],{"class":54,"line":118},[52,15566,6514],{"class":66},[52,15568,70],{"class":231},[52,15570,14151],{"class":58},[52,15572,15573,15575,15577],{"class":54,"line":594},[52,15574,12581],{"class":58},[52,15576,15228],{"class":73},[52,15578,1746],{"class":58},[52,15580,15581,15584,15587],{"class":54,"line":600},[52,15582,15583],{"class":58}," axis: ",[52,15585,15586],{"class":73},"'x'",[52,15588,1746],{"class":58},[52,15590,15591,15593,15595],{"class":54,"line":606},[52,15592,14175],{"class":58},[52,15594,12361],{"class":371},[52,15596,1746],{"class":58},[52,15598,15599,15601,15604],{"class":54,"line":653},[52,15600,14184],{"class":58},[52,15602,15603],{"class":371},"0.7",[52,15605,1746],{"class":58},[52,15607,15608,15610],{"class":54,"line":662},[52,15609,14873],{"class":58},[52,15611,15612],{"class":371},"0.1\n",[52,15614,15615],{"class":54,"line":671},[52,15616,14209],{"class":58},[52,15618,15619],{"class":54,"line":676},[52,15620,1224],{"class":58},[52,15622,15623,15625,15627],{"class":54,"line":682},[52,15624,121],{"class":58},[52,15626,63],{"class":371},[52,15628,77],{"class":58},[43,15630,15632],{"className":419,"code":15631,"language":420,"meta":48,"style":48},"\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",[31,15633,15634,15648,15654,15662,15670,15678,15686,15694,15702,15708,15712,15716],{"__ignoreMap":48},[52,15635,15636,15638,15640,15642,15644,15646],{"class":54,"line":55},[52,15637,59],{"class":58},[52,15639,63],{"class":371},[52,15641,67],{"class":66},[52,15643,70],{"class":231},[52,15645,319],{"class":73},[52,15647,77],{"class":58},[52,15649,15650,15652],{"class":54,"line":80},[52,15651,83],{"class":58},[52,15653,6499],{"class":371},[52,15655,15656,15658,15660],{"class":54,"line":108},[52,15657,6504],{"class":66},[52,15659,70],{"class":231},[52,15661,14052],{"class":73},[52,15663,15664,15666,15668],{"class":54,"line":118},[52,15665,6514],{"class":66},[52,15667,70],{"class":231},[52,15669,14151],{"class":58},[52,15671,15672,15674,15676],{"class":54,"line":594},[52,15673,12581],{"class":58},[52,15675,15228],{"class":73},[52,15677,1746],{"class":58},[52,15679,15680,15682,15684],{"class":54,"line":600},[52,15681,15583],{"class":58},[52,15683,15586],{"class":73},[52,15685,1746],{"class":58},[52,15687,15688,15690,15692],{"class":54,"line":606},[52,15689,14175],{"class":58},[52,15691,12361],{"class":371},[52,15693,1746],{"class":58},[52,15695,15696,15698,15700],{"class":54,"line":653},[52,15697,14184],{"class":58},[52,15699,15603],{"class":371},[52,15701,1746],{"class":58},[52,15703,15704,15706],{"class":54,"line":662},[52,15705,14873],{"class":58},[52,15707,15612],{"class":371},[52,15709,15710],{"class":54,"line":671},[52,15711,14209],{"class":58},[52,15713,15714],{"class":54,"line":676},[52,15715,1224],{"class":58},[52,15717,15718,15720,15722],{"class":54,"line":682},[52,15719,121],{"class":58},[52,15721,63],{"class":371},[52,15723,77],{"class":58},[43,15725,15726],{"className":419,"code":15631,"language":420,"meta":48,"style":48},[31,15727,15728,15742,15748,15756,15764,15772,15780,15788,15796,15802,15806,15810],{"__ignoreMap":48},[52,15729,15730,15732,15734,15736,15738,15740],{"class":54,"line":55},[52,15731,59],{"class":58},[52,15733,63],{"class":371},[52,15735,67],{"class":66},[52,15737,70],{"class":231},[52,15739,319],{"class":73},[52,15741,77],{"class":58},[52,15743,15744,15746],{"class":54,"line":80},[52,15745,83],{"class":58},[52,15747,6499],{"class":371},[52,15749,15750,15752,15754],{"class":54,"line":108},[52,15751,6504],{"class":66},[52,15753,70],{"class":231},[52,15755,14052],{"class":73},[52,15757,15758,15760,15762],{"class":54,"line":118},[52,15759,6514],{"class":66},[52,15761,70],{"class":231},[52,15763,14151],{"class":58},[52,15765,15766,15768,15770],{"class":54,"line":594},[52,15767,12581],{"class":58},[52,15769,15228],{"class":73},[52,15771,1746],{"class":58},[52,15773,15774,15776,15778],{"class":54,"line":600},[52,15775,15583],{"class":58},[52,15777,15586],{"class":73},[52,15779,1746],{"class":58},[52,15781,15782,15784,15786],{"class":54,"line":606},[52,15783,14175],{"class":58},[52,15785,12361],{"class":371},[52,15787,1746],{"class":58},[52,15789,15790,15792,15794],{"class":54,"line":653},[52,15791,14184],{"class":58},[52,15793,15603],{"class":371},[52,15795,1746],{"class":58},[52,15797,15798,15800],{"class":54,"line":662},[52,15799,14873],{"class":58},[52,15801,15612],{"class":371},[52,15803,15804],{"class":54,"line":671},[52,15805,14209],{"class":58},[52,15807,15808],{"class":54,"line":676},[52,15809,1224],{"class":58},[52,15811,15812,15814,15816],{"class":54,"line":682},[52,15813,121],{"class":58},[52,15815,63],{"class":371},[52,15817,77],{"class":58},[43,15819,15821],{"className":222,"code":15820,"language":224,"meta":48,"style":48},"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",[31,15822,15823,15837,15841,15845,15853,15857,15865,15869,15877,15886,15894,15902,15908,15912,15916,15920,15924],{"__ignoreMap":48},[52,15824,15825,15827,15829,15831,15833,15835],{"class":54,"line":55},[52,15826,1721],{"class":231},[52,15828,1724],{"class":371},[52,15830,1727],{"class":231},[52,15832,1730],{"class":231},[52,15834,1733],{"class":66},[52,15836,1736],{"class":58},[52,15838,15839],{"class":54,"line":80},[52,15840,1751],{"class":58},[52,15842,15843],{"class":54,"line":108},[52,15844,12576],{"class":58},[52,15846,15847,15849,15851],{"class":54,"line":118},[52,15848,12581],{"class":58},[52,15850,2869],{"class":73},[52,15852,1746],{"class":58},[52,15854,15855],{"class":54,"line":594},[52,15856,12590],{"class":58},[52,15858,15859,15861,15863],{"class":54,"line":600},[52,15860,14470],{"class":58},[52,15862,14473],{"class":73},[52,15864,1746],{"class":58},[52,15866,15867],{"class":54,"line":606},[52,15868,14480],{"class":58},[52,15870,15871,15873,15875],{"class":54,"line":653},[52,15872,14485],{"class":58},[52,15874,15228],{"class":73},[52,15876,1746],{"class":58},[52,15878,15879,15882,15884],{"class":54,"line":662},[52,15880,15881],{"class":58}," axis: ",[52,15883,15586],{"class":73},[52,15885,1746],{"class":58},[52,15887,15888,15890,15892],{"class":54,"line":671},[52,15889,14503],{"class":58},[52,15891,12361],{"class":371},[52,15893,1746],{"class":58},[52,15895,15896,15898,15900],{"class":54,"line":676},[52,15897,14512],{"class":58},[52,15899,15603],{"class":371},[52,15901,1746],{"class":58},[52,15903,15904,15906],{"class":54,"line":682},[52,15905,15157],{"class":58},[52,15907,15612],{"class":371},[52,15909,15910],{"class":54,"line":698},[52,15911,14537],{"class":58},[52,15913,15914],{"class":54,"line":707},[52,15915,12605],{"class":58},[52,15917,15918],{"class":54,"line":2327},[52,15919,12648],{"class":58},[52,15921,15922],{"class":54,"line":6522},[52,15923,1773],{"class":58},[52,15925,15926],{"class":54,"line":6532},[52,15927,1778],{"class":58},[19,15929],{":preset":15930},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,15932,15933],{},[151,15934,14561],{},[1780,15936,15937,15949],{},[1783,15938,15939],{},[1786,15940,15941,15943,15945,15947],{},[1789,15942,11998],{},[1789,15944,12001],{},[1789,15946,12004],{},[1789,15948,1794],{},[1796,15950,15951,15968,15983,15998,16026,16045],{},[1786,15952,15953,15958,15963,15965],{},[1801,15954,15955],{},[31,15956,15957],{},"axis",[1801,15959,15960],{},[31,15961,15962],{},"'x' | 'y'",[1801,15964,14592],{},[1801,15966,15967],{},"Which pointer axis drives this prop.",[1786,15969,15970,15974,15978,15980],{},[1801,15971,15972],{},[31,15973,14609],{},[1801,15975,15976],{},[31,15977,12020],{},[1801,15979,14592],{},[1801,15981,15982],{},"Output value when axis is at 0 (left or top).",[1786,15984,15985,15989,15993,15995],{},[1801,15986,15987],{},[31,15988,14625],{},[1801,15990,15991],{},[31,15992,12020],{},[1801,15994,14592],{},[1801,15996,15997],{},"Output value when axis is at 1 (right or bottom).",[1786,15999,16000,16005,16009,16013],{},[1801,16001,16002],{},[31,16003,16004],{},"curve",[1801,16006,16007],{},[31,16008,12020],{},[1801,16010,16011],{},[31,16012,5540],{},[1801,16014,16015,16016,1536,16018,16020,16021,16023,16024,6357],{},"Power curve: ",[31,16017,12030],{},[31,16019,12033],{},". Negative = biased toward ",[31,16022,14609],{},", positive = toward ",[31,16025,14625],{},[1786,16027,16028,16032,16036,16040],{},[1801,16029,16030],{},[31,16031,15297],{},[1801,16033,16034],{},[31,16035,12020],{},[1801,16037,16038],{},[31,16039,5540],{},[1801,16041,16042,16043,6357],{},"Lag (0–1). Same as ",[31,16044,14704],{},[1786,16046,16047,16051,16055,16059],{},[1801,16048,16049],{},[31,16050,15318],{},[1801,16052,16053],{},[31,16054,12020],{},[1801,16056,16057],{},[31,16058,5540],{},[1801,16060,16061,16062,6357],{},"Spring bounce (0–1). Same as ",[31,16063,14704],{},[15,16065,16066,16068],{},[151,16067,14694],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,16070,16071],{"id":16071},"map",[15,16073,16074],{},"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,16076,16077,16078,16080],{},"First, give the source component an ",[31,16079,5924],{},". Then reference that id in the driver:",[217,16082,16083,16221,16366,16503,16639],{":tabs":1543},[43,16084,16086],{"className":45,"code":16085,"language":47,"meta":48,"style":48},"\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",[31,16087,16088,16102,16107,16113,16122,16132,16141,16145,16149,16154,16161,16170,16175,16180,16185,16190,16195,16200,16205,16209,16213],{"__ignoreMap":48},[52,16089,16090,16092,16094,16096,16098,16100],{"class":54,"line":55},[52,16091,59],{"class":58},[52,16093,63],{"class":62},[52,16095,67],{"class":66},[52,16097,70],{"class":58},[52,16099,319],{"class":73},[52,16101,77],{"class":58},[52,16103,16104],{"class":54,"line":80},[52,16105,16106],{"class":559}," \u003C!-- Source layer: named 'grad' -->\n",[52,16108,16109,16111],{"class":54,"line":108},[52,16110,83],{"class":58},[52,16112,1171],{"class":62},[52,16114,16115,16117,16119],{"class":54,"line":118},[52,16116,6446],{"class":66},[52,16118,70],{"class":58},[52,16120,16121],{"class":73},"\"grad\"\n",[52,16123,16124,16127,16129],{"class":54,"line":594},[52,16125,16126],{"class":66}," color-a",[52,16128,70],{"class":58},[52,16130,16131],{"class":73},"\"#000000\"\n",[52,16133,16134,16137,16139],{"class":54,"line":600},[52,16135,16136],{"class":66}," color-b",[52,16138,70],{"class":58},[52,16140,6460],{"class":73},[52,16142,16143],{"class":54,"line":606},[52,16144,1224],{"class":58},[52,16146,16147],{"class":54,"line":653},[52,16148,597],{"emptyLinePlaceholder":171},[52,16150,16151],{"class":54,"line":662},[52,16152,16153],{"class":559}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[52,16155,16156,16158],{"class":54,"line":671},[52,16157,83],{"class":58},[52,16159,16160],{"class":62},"DotGrid\n",[52,16162,16163,16166,16168],{"class":54,"line":676},[52,16164,16165],{"class":66}," :dot-size",[52,16167,70],{"class":58},[52,16169,14062],{"class":73},[52,16171,16172],{"class":54,"line":682},[52,16173,16174],{"class":73}," type: 'map',\n",[52,16176,16177],{"class":54,"line":698},[52,16178,16179],{"class":73}," source: 'grad',\n",[52,16181,16182],{"class":54,"line":707},[52,16183,16184],{"class":73}," channel: 'luminance',\n",[52,16186,16187],{"class":54,"line":2327},[52,16188,16189],{"class":73}," inputMin: 0,\n",[52,16191,16192],{"class":54,"line":6522},[52,16193,16194],{"class":73}," inputMax: 1,\n",[52,16196,16197],{"class":54,"line":6532},[52,16198,16199],{"class":73}," outputMin: 0.02,\n",[52,16201,16202],{"class":54,"line":6543},[52,16203,16204],{"class":73}," outputMax: 0.12\n",[52,16206,16207],{"class":54,"line":6548},[52,16208,14097],{"class":73},[52,16210,16211],{"class":54,"line":7870},[52,16212,1224],{"class":58},[52,16214,16215,16217,16219],{"class":54,"line":7875},[52,16216,121],{"class":58},[52,16218,63],{"class":62},[52,16220,77],{"class":58},[43,16222,16224],{"className":360,"code":16223,"language":362,"meta":48,"style":48},"\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",[31,16225,16226,16240,16246,16254,16262,16270,16274,16280,16289,16298,16307,16316,16325,16334,16343,16350,16354,16358],{"__ignoreMap":48},[52,16227,16228,16230,16232,16234,16236,16238],{"class":54,"line":55},[52,16229,59],{"class":58},[52,16231,63],{"class":371},[52,16233,374],{"class":66},[52,16235,70],{"class":231},[52,16237,319],{"class":73},[52,16239,77],{"class":58},[52,16241,16242,16244],{"class":54,"line":80},[52,16243,83],{"class":58},[52,16245,1171],{"class":371},[52,16247,16248,16250,16252],{"class":54,"line":108},[52,16249,6446],{"class":66},[52,16251,70],{"class":231},[52,16253,16121],{"class":73},[52,16255,16256,16258,16260],{"class":54,"line":118},[52,16257,1176],{"class":66},[52,16259,70],{"class":231},[52,16261,16131],{"class":73},[52,16263,16264,16266,16268],{"class":54,"line":594},[52,16265,1186],{"class":66},[52,16267,70],{"class":231},[52,16269,6460],{"class":73},[52,16271,16272],{"class":54,"line":600},[52,16273,1224],{"class":58},[52,16275,16276,16278],{"class":54,"line":606},[52,16277,83],{"class":58},[52,16279,16160],{"class":371},[52,16281,16282,16285,16287],{"class":54,"line":653},[52,16283,16284],{"class":66}," dotSize",[52,16286,70],{"class":231},[52,16288,14151],{"class":58},[52,16290,16291,16293,16296],{"class":54,"line":662},[52,16292,12581],{"class":58},[52,16294,16295],{"class":73},"'map'",[52,16297,1746],{"class":58},[52,16299,16300,16303,16305],{"class":54,"line":671},[52,16301,16302],{"class":58}," source: ",[52,16304,13800],{"class":73},[52,16306,1746],{"class":58},[52,16308,16309,16312,16314],{"class":54,"line":676},[52,16310,16311],{"class":58}," channel: ",[52,16313,7076],{"class":73},[52,16315,1746],{"class":58},[52,16317,16318,16321,16323],{"class":54,"line":682},[52,16319,16320],{"class":58}," inputMin: ",[52,16322,5540],{"class":371},[52,16324,1746],{"class":58},[52,16326,16327,16330,16332],{"class":54,"line":698},[52,16328,16329],{"class":58}," inputMax: ",[52,16331,5544],{"class":371},[52,16333,1746],{"class":58},[52,16335,16336,16338,16341],{"class":54,"line":707},[52,16337,14175],{"class":58},[52,16339,16340],{"class":371},"0.02",[52,16342,1746],{"class":58},[52,16344,16345,16347],{"class":54,"line":2327},[52,16346,14184],{"class":58},[52,16348,16349],{"class":371},"0.12\n",[52,16351,16352],{"class":54,"line":6522},[52,16353,14209],{"class":58},[52,16355,16356],{"class":54,"line":6532},[52,16357,1224],{"class":58},[52,16359,16360,16362,16364],{"class":54,"line":6543},[52,16361,121],{"class":58},[52,16363,63],{"class":371},[52,16365,77],{"class":58},[43,16367,16369],{"className":419,"code":16368,"language":420,"meta":48,"style":48},"\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",[31,16370,16371,16385,16391,16399,16407,16415,16419,16425,16433,16441,16449,16457,16465,16473,16481,16487,16491,16495],{"__ignoreMap":48},[52,16372,16373,16375,16377,16379,16381,16383],{"class":54,"line":55},[52,16374,59],{"class":58},[52,16376,63],{"class":371},[52,16378,67],{"class":66},[52,16380,70],{"class":231},[52,16382,319],{"class":73},[52,16384,77],{"class":58},[52,16386,16387,16389],{"class":54,"line":80},[52,16388,83],{"class":58},[52,16390,1171],{"class":371},[52,16392,16393,16395,16397],{"class":54,"line":108},[52,16394,6446],{"class":66},[52,16396,70],{"class":231},[52,16398,16121],{"class":73},[52,16400,16401,16403,16405],{"class":54,"line":118},[52,16402,1176],{"class":66},[52,16404,70],{"class":231},[52,16406,16131],{"class":73},[52,16408,16409,16411,16413],{"class":54,"line":594},[52,16410,1186],{"class":66},[52,16412,70],{"class":231},[52,16414,6460],{"class":73},[52,16416,16417],{"class":54,"line":600},[52,16418,1224],{"class":58},[52,16420,16421,16423],{"class":54,"line":606},[52,16422,83],{"class":58},[52,16424,16160],{"class":371},[52,16426,16427,16429,16431],{"class":54,"line":653},[52,16428,16284],{"class":66},[52,16430,70],{"class":231},[52,16432,14151],{"class":58},[52,16434,16435,16437,16439],{"class":54,"line":662},[52,16436,12581],{"class":58},[52,16438,16295],{"class":73},[52,16440,1746],{"class":58},[52,16442,16443,16445,16447],{"class":54,"line":671},[52,16444,16302],{"class":58},[52,16446,13800],{"class":73},[52,16448,1746],{"class":58},[52,16450,16451,16453,16455],{"class":54,"line":676},[52,16452,16311],{"class":58},[52,16454,7076],{"class":73},[52,16456,1746],{"class":58},[52,16458,16459,16461,16463],{"class":54,"line":682},[52,16460,16320],{"class":58},[52,16462,5540],{"class":371},[52,16464,1746],{"class":58},[52,16466,16467,16469,16471],{"class":54,"line":698},[52,16468,16329],{"class":58},[52,16470,5544],{"class":371},[52,16472,1746],{"class":58},[52,16474,16475,16477,16479],{"class":54,"line":707},[52,16476,14175],{"class":58},[52,16478,16340],{"class":371},[52,16480,1746],{"class":58},[52,16482,16483,16485],{"class":54,"line":2327},[52,16484,14184],{"class":58},[52,16486,16349],{"class":371},[52,16488,16489],{"class":54,"line":6522},[52,16490,14209],{"class":58},[52,16492,16493],{"class":54,"line":6532},[52,16494,1224],{"class":58},[52,16496,16497,16499,16501],{"class":54,"line":6543},[52,16498,121],{"class":58},[52,16500,63],{"class":371},[52,16502,77],{"class":58},[43,16504,16505],{"className":419,"code":16368,"language":420,"meta":48,"style":48},[31,16506,16507,16521,16527,16535,16543,16551,16555,16561,16569,16577,16585,16593,16601,16609,16617,16623,16627,16631],{"__ignoreMap":48},[52,16508,16509,16511,16513,16515,16517,16519],{"class":54,"line":55},[52,16510,59],{"class":58},[52,16512,63],{"class":371},[52,16514,67],{"class":66},[52,16516,70],{"class":231},[52,16518,319],{"class":73},[52,16520,77],{"class":58},[52,16522,16523,16525],{"class":54,"line":80},[52,16524,83],{"class":58},[52,16526,1171],{"class":371},[52,16528,16529,16531,16533],{"class":54,"line":108},[52,16530,6446],{"class":66},[52,16532,70],{"class":231},[52,16534,16121],{"class":73},[52,16536,16537,16539,16541],{"class":54,"line":118},[52,16538,1176],{"class":66},[52,16540,70],{"class":231},[52,16542,16131],{"class":73},[52,16544,16545,16547,16549],{"class":54,"line":594},[52,16546,1186],{"class":66},[52,16548,70],{"class":231},[52,16550,6460],{"class":73},[52,16552,16553],{"class":54,"line":600},[52,16554,1224],{"class":58},[52,16556,16557,16559],{"class":54,"line":606},[52,16558,83],{"class":58},[52,16560,16160],{"class":371},[52,16562,16563,16565,16567],{"class":54,"line":653},[52,16564,16284],{"class":66},[52,16566,70],{"class":231},[52,16568,14151],{"class":58},[52,16570,16571,16573,16575],{"class":54,"line":662},[52,16572,12581],{"class":58},[52,16574,16295],{"class":73},[52,16576,1746],{"class":58},[52,16578,16579,16581,16583],{"class":54,"line":671},[52,16580,16302],{"class":58},[52,16582,13800],{"class":73},[52,16584,1746],{"class":58},[52,16586,16587,16589,16591],{"class":54,"line":676},[52,16588,16311],{"class":58},[52,16590,7076],{"class":73},[52,16592,1746],{"class":58},[52,16594,16595,16597,16599],{"class":54,"line":682},[52,16596,16320],{"class":58},[52,16598,5540],{"class":371},[52,16600,1746],{"class":58},[52,16602,16603,16605,16607],{"class":54,"line":698},[52,16604,16329],{"class":58},[52,16606,5544],{"class":371},[52,16608,1746],{"class":58},[52,16610,16611,16613,16615],{"class":54,"line":707},[52,16612,14175],{"class":58},[52,16614,16340],{"class":371},[52,16616,1746],{"class":58},[52,16618,16619,16621],{"class":54,"line":2327},[52,16620,14184],{"class":58},[52,16622,16349],{"class":371},[52,16624,16625],{"class":54,"line":6522},[52,16626,14209],{"class":58},[52,16628,16629],{"class":54,"line":6532},[52,16630,1224],{"class":58},[52,16632,16633,16635,16637],{"class":54,"line":6543},[52,16634,121],{"class":58},[52,16636,63],{"class":371},[52,16638,77],{"class":58},[43,16640,16642],{"className":222,"code":16641,"language":224,"meta":48,"style":48},"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",[31,16643,16644,16658,16662,16666,16674,16683,16697,16701,16705,16714,16718,16723,16731,16740,16749,16758,16767,16775,16782,16786,16790,16794,16798],{"__ignoreMap":48},[52,16645,16646,16648,16650,16652,16654,16656],{"class":54,"line":55},[52,16647,1721],{"class":231},[52,16649,1724],{"class":371},[52,16651,1727],{"class":231},[52,16653,1730],{"class":231},[52,16655,1733],{"class":66},[52,16657,1736],{"class":58},[52,16659,16660],{"class":54,"line":80},[52,16661,1751],{"class":58},[52,16663,16664],{"class":54,"line":108},[52,16665,12576],{"class":58},[52,16667,16668,16670,16672],{"class":54,"line":118},[52,16669,12581],{"class":58},[52,16671,2126],{"class":73},[52,16673,1746],{"class":58},[52,16675,16676,16679,16681],{"class":54,"line":594},[52,16677,16678],{"class":58}," id: ",[52,16680,13800],{"class":73},[52,16682,1746],{"class":58},[52,16684,16685,16688,16691,16693,16695],{"class":54,"line":600},[52,16686,16687],{"class":58}," props: { colorA: ",[52,16689,16690],{"class":73},"'#000000'",[52,16692,7042],{"class":58},[52,16694,7039],{"class":73},[52,16696,12600],{"class":58},[52,16698,16699],{"class":54,"line":606},[52,16700,12610],{"class":58},[52,16702,16703],{"class":54,"line":653},[52,16704,12576],{"class":58},[52,16706,16707,16709,16712],{"class":54,"line":662},[52,16708,12581],{"class":58},[52,16710,16711],{"class":73},"'DotGrid'",[52,16713,1746],{"class":58},[52,16715,16716],{"class":54,"line":671},[52,16717,12590],{"class":58},[52,16719,16720],{"class":54,"line":676},[52,16721,16722],{"class":58}," dotSize: {\n",[52,16724,16725,16727,16729],{"class":54,"line":682},[52,16726,14485],{"class":58},[52,16728,16295],{"class":73},[52,16730,1746],{"class":58},[52,16732,16733,16736,16738],{"class":54,"line":698},[52,16734,16735],{"class":58}," source: ",[52,16737,13800],{"class":73},[52,16739,1746],{"class":58},[52,16741,16742,16745,16747],{"class":54,"line":707},[52,16743,16744],{"class":58}," channel: ",[52,16746,7076],{"class":73},[52,16748,1746],{"class":58},[52,16750,16751,16754,16756],{"class":54,"line":2327},[52,16752,16753],{"class":58}," inputMin: ",[52,16755,5540],{"class":371},[52,16757,1746],{"class":58},[52,16759,16760,16763,16765],{"class":54,"line":6522},[52,16761,16762],{"class":58}," inputMax: ",[52,16764,5544],{"class":371},[52,16766,1746],{"class":58},[52,16768,16769,16771,16773],{"class":54,"line":6532},[52,16770,14503],{"class":58},[52,16772,5540],{"class":371},[52,16774,1746],{"class":58},[52,16776,16777,16779],{"class":54,"line":6543},[52,16778,14512],{"class":58},[52,16780,16781],{"class":371},"1\n",[52,16783,16784],{"class":54,"line":6548},[52,16785,14537],{"class":58},[52,16787,16788],{"class":54,"line":7870},[52,16789,12605],{"class":58},[52,16791,16792],{"class":54,"line":7875},[52,16793,12648],{"class":58},[52,16795,16796],{"class":54,"line":8948},[52,16797,1773],{"class":58},[52,16799,16800],{"class":54,"line":8955},[52,16801,1778],{"class":58},[19,16803],{":preset":16804},"{\"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,16806,16807],{},[151,16808,14561],{},[1780,16810,16811,16823],{},[1783,16812,16813],{},[1786,16814,16815,16817,16819,16821],{},[1789,16816,11998],{},[1789,16818,12001],{},[1789,16820,12004],{},[1789,16822,1794],{},[1796,16824,16825,16843,16867,16883,16899,16914,16929],{},[1786,16826,16827,16832,16836,16838],{},[1801,16828,16829],{},[31,16830,16831],{},"source",[1801,16833,16834],{},[31,16835,5928],{},[1801,16837,14592],{},[1801,16839,1825,16840,16842],{},[31,16841,5924],{}," of the source component to sample from.",[1786,16844,16845,16850,16854,16856],{},[1801,16846,16847],{},[31,16848,16849],{},"channel",[1801,16851,16852],{},[31,16853,5928],{},[1801,16855,14592],{},[1801,16857,16858,16859,1881,16861,1881,16863,1881,16865,6357],{},"Which channel to extract. ",[31,16860,6377],{},[31,16862,6385],{},[31,16864,6393],{},[31,16866,6401],{},[1786,16868,16869,16874,16878,16880],{},[1801,16870,16871],{},[31,16872,16873],{},"inputMin",[1801,16875,16876],{},[31,16877,12020],{},[1801,16879,14592],{},[1801,16881,16882],{},"Source values at or below this are treated as 0.",[1786,16884,16885,16890,16894,16896],{},[1801,16886,16887],{},[31,16888,16889],{},"inputMax",[1801,16891,16892],{},[31,16893,12020],{},[1801,16895,14592],{},[1801,16897,16898],{},"Source values at or above this are treated as 1.",[1786,16900,16901,16905,16909,16911],{},[1801,16902,16903],{},[31,16904,14609],{},[1801,16906,16907],{},[31,16908,12020],{},[1801,16910,14592],{},[1801,16912,16913],{},"Output value when input = 0.",[1786,16915,16916,16920,16924,16926],{},[1801,16917,16918],{},[31,16919,14625],{},[1801,16921,16922],{},[31,16923,12020],{},[1801,16925,14592],{},[1801,16927,16928],{},"Output value when input = 1.",[1786,16930,16931,16935,16939,16943],{},[1801,16932,16933],{},[31,16934,16004],{},[1801,16936,16937],{},[31,16938,12020],{},[1801,16940,16941],{},[31,16942,5540],{},[1801,16944,16945,16946,1536,16948,6357],{},"Power curve applied after normalization. ",[31,16947,12030],{},[31,16949,12033],{},[15,16951,1825,16952,16954],{},[31,16953,16071],{}," 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.",[23,16956,16958],{"id":16957},"combining-dynamic-props","Combining dynamic props",[15,16960,16961],{},"Multiple dynamic props can be active on the same component — one per prop:",[217,16963,16964,17070,17197,17320],{":tabs":219},[43,16965,16967],{"className":45,"code":16966,"language":47,"meta":48,"style":48},"\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",[31,16968,16969,16983,17006,17013,17022,17031,17035,17039,17044,17049,17054,17058,17062],{"__ignoreMap":48},[52,16970,16971,16973,16975,16977,16979,16981],{"class":54,"line":55},[52,16972,59],{"class":58},[52,16974,63],{"class":62},[52,16976,67],{"class":66},[52,16978,70],{"class":58},[52,16980,319],{"class":73},[52,16982,77],{"class":58},[52,16984,16985,16987,16989,16992,16994,16996,16999,17001,17004],{"class":54,"line":80},[52,16986,83],{"class":58},[52,16988,86],{"class":62},[52,16990,16991],{"class":66}," color-a",[52,16993,70],{"class":58},[52,16995,94],{"class":73},[52,16997,16998],{"class":66}," color-b",[52,17000,70],{"class":58},[52,17002,17003],{"class":73},"\"#4f46e5\"",[52,17005,105],{"class":58},[52,17007,17008,17010],{"class":54,"line":108},[52,17009,83],{"class":58},[52,17011,17012],{"class":62},"LensFlare\n",[52,17014,17015,17017,17019],{"class":54,"line":118},[52,17016,14769],{"class":66},[52,17018,70],{"class":58},[52,17020,17021],{"class":73},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[52,17023,17024,17027,17029],{"class":54,"line":594},[52,17025,17026],{"class":66}," :intensity",[52,17028,70],{"class":58},[52,17030,14062],{"class":73},[52,17032,17033],{"class":54,"line":600},[52,17034,14067],{"class":73},[52,17036,17037],{"class":54,"line":606},[52,17038,14072],{"class":73},[52,17040,17041],{"class":54,"line":653},[52,17042,17043],{"class":73}," outputMin: 0.4,\n",[52,17045,17046],{"class":54,"line":662},[52,17047,17048],{"class":73}," outputMax: 1.0,\n",[52,17050,17051],{"class":54,"line":671},[52,17052,17053],{"class":73}," speed: 0.6\n",[52,17055,17056],{"class":54,"line":676},[52,17057,14097],{"class":73},[52,17059,17060],{"class":54,"line":682},[52,17061,1224],{"class":58},[52,17063,17064,17066,17068],{"class":54,"line":698},[52,17065,121],{"class":58},[52,17067,63],{"class":62},[52,17069,77],{"class":58},[43,17071,17073],{"className":360,"code":17072,"language":362,"meta":48,"style":48},"\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",[31,17074,17075,17089,17109,17115,17133,17142,17150,17158,17166,17174,17181,17185,17189],{"__ignoreMap":48},[52,17076,17077,17079,17081,17083,17085,17087],{"class":54,"line":55},[52,17078,59],{"class":58},[52,17080,63],{"class":371},[52,17082,374],{"class":66},[52,17084,70],{"class":231},[52,17086,319],{"class":73},[52,17088,77],{"class":58},[52,17090,17091,17093,17095,17097,17099,17101,17103,17105,17107],{"class":54,"line":80},[52,17092,83],{"class":58},[52,17094,86],{"class":371},[52,17096,89],{"class":66},[52,17098,70],{"class":231},[52,17100,94],{"class":73},[52,17102,97],{"class":66},[52,17104,70],{"class":231},[52,17106,17003],{"class":73},[52,17108,105],{"class":58},[52,17110,17111,17113],{"class":54,"line":108},[52,17112,83],{"class":58},[52,17114,17012],{"class":371},[52,17116,17117,17119,17121,17124,17126,17129,17131],{"class":54,"line":118},[52,17118,14855],{"class":66},[52,17120,70],{"class":231},[52,17122,17123],{"class":58},"{{ type: ",[52,17125,14866],{"class":73},[52,17127,17128],{"class":58},", smoothing: ",[52,17130,12361],{"class":371},[52,17132,2466],{"class":58},[52,17134,17135,17138,17140],{"class":54,"line":594},[52,17136,17137],{"class":66}," intensity",[52,17139,70],{"class":231},[52,17141,14151],{"class":58},[52,17143,17144,17146,17148],{"class":54,"line":600},[52,17145,12581],{"class":58},[52,17147,14158],{"class":73},[52,17149,1746],{"class":58},[52,17151,17152,17154,17156],{"class":54,"line":606},[52,17153,14165],{"class":58},[52,17155,14168],{"class":73},[52,17157,1746],{"class":58},[52,17159,17160,17162,17164],{"class":54,"line":653},[52,17161,14175],{"class":58},[52,17163,5116],{"class":371},[52,17165,1746],{"class":58},[52,17167,17168,17170,17172],{"class":54,"line":662},[52,17169,14184],{"class":58},[52,17171,14650],{"class":371},[52,17173,1746],{"class":58},[52,17175,17176,17178],{"class":54,"line":671},[52,17177,14193],{"class":58},[52,17179,17180],{"class":371},"0.6\n",[52,17182,17183],{"class":54,"line":676},[52,17184,14209],{"class":58},[52,17186,17187],{"class":54,"line":682},[52,17188,1224],{"class":58},[52,17190,17191,17193,17195],{"class":54,"line":698},[52,17192,121],{"class":58},[52,17194,63],{"class":371},[52,17196,77],{"class":58},[43,17198,17200],{"className":419,"code":17199,"language":420,"meta":48,"style":48},"\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",[31,17201,17202,17216,17236,17242,17258,17266,17274,17282,17290,17298,17304,17308,17312],{"__ignoreMap":48},[52,17203,17204,17206,17208,17210,17212,17214],{"class":54,"line":55},[52,17205,59],{"class":58},[52,17207,63],{"class":371},[52,17209,67],{"class":66},[52,17211,70],{"class":231},[52,17213,319],{"class":73},[52,17215,77],{"class":58},[52,17217,17218,17220,17222,17224,17226,17228,17230,17232,17234],{"class":54,"line":80},[52,17219,83],{"class":58},[52,17221,86],{"class":371},[52,17223,89],{"class":66},[52,17225,70],{"class":231},[52,17227,94],{"class":73},[52,17229,97],{"class":66},[52,17231,70],{"class":231},[52,17233,17003],{"class":73},[52,17235,105],{"class":58},[52,17237,17238,17240],{"class":54,"line":108},[52,17239,83],{"class":58},[52,17241,17012],{"class":371},[52,17243,17244,17246,17248,17250,17252,17254,17256],{"class":54,"line":118},[52,17245,14855],{"class":66},[52,17247,70],{"class":231},[52,17249,17123],{"class":58},[52,17251,14866],{"class":73},[52,17253,17128],{"class":58},[52,17255,12361],{"class":371},[52,17257,2466],{"class":58},[52,17259,17260,17262,17264],{"class":54,"line":594},[52,17261,17137],{"class":66},[52,17263,70],{"class":231},[52,17265,14151],{"class":58},[52,17267,17268,17270,17272],{"class":54,"line":600},[52,17269,12581],{"class":58},[52,17271,14158],{"class":73},[52,17273,1746],{"class":58},[52,17275,17276,17278,17280],{"class":54,"line":606},[52,17277,14165],{"class":58},[52,17279,14168],{"class":73},[52,17281,1746],{"class":58},[52,17283,17284,17286,17288],{"class":54,"line":653},[52,17285,14175],{"class":58},[52,17287,5116],{"class":371},[52,17289,1746],{"class":58},[52,17291,17292,17294,17296],{"class":54,"line":662},[52,17293,14184],{"class":58},[52,17295,14650],{"class":371},[52,17297,1746],{"class":58},[52,17299,17300,17302],{"class":54,"line":671},[52,17301,14193],{"class":58},[52,17303,17180],{"class":371},[52,17305,17306],{"class":54,"line":676},[52,17307,14209],{"class":58},[52,17309,17310],{"class":54,"line":682},[52,17311,1224],{"class":58},[52,17313,17314,17316,17318],{"class":54,"line":698},[52,17315,121],{"class":58},[52,17317,63],{"class":371},[52,17319,77],{"class":58},[43,17321,17322],{"className":419,"code":17199,"language":420,"meta":48,"style":48},[31,17323,17324,17338,17358,17364,17380,17388,17396,17404,17412,17420,17426,17430,17434],{"__ignoreMap":48},[52,17325,17326,17328,17330,17332,17334,17336],{"class":54,"line":55},[52,17327,59],{"class":58},[52,17329,63],{"class":371},[52,17331,67],{"class":66},[52,17333,70],{"class":231},[52,17335,319],{"class":73},[52,17337,77],{"class":58},[52,17339,17340,17342,17344,17346,17348,17350,17352,17354,17356],{"class":54,"line":80},[52,17341,83],{"class":58},[52,17343,86],{"class":371},[52,17345,89],{"class":66},[52,17347,70],{"class":231},[52,17349,94],{"class":73},[52,17351,97],{"class":66},[52,17353,70],{"class":231},[52,17355,17003],{"class":73},[52,17357,105],{"class":58},[52,17359,17360,17362],{"class":54,"line":108},[52,17361,83],{"class":58},[52,17363,17012],{"class":371},[52,17365,17366,17368,17370,17372,17374,17376,17378],{"class":54,"line":118},[52,17367,14855],{"class":66},[52,17369,70],{"class":231},[52,17371,17123],{"class":58},[52,17373,14866],{"class":73},[52,17375,17128],{"class":58},[52,17377,12361],{"class":371},[52,17379,2466],{"class":58},[52,17381,17382,17384,17386],{"class":54,"line":594},[52,17383,17137],{"class":66},[52,17385,70],{"class":231},[52,17387,14151],{"class":58},[52,17389,17390,17392,17394],{"class":54,"line":600},[52,17391,12581],{"class":58},[52,17393,14158],{"class":73},[52,17395,1746],{"class":58},[52,17397,17398,17400,17402],{"class":54,"line":606},[52,17399,14165],{"class":58},[52,17401,14168],{"class":73},[52,17403,1746],{"class":58},[52,17405,17406,17408,17410],{"class":54,"line":653},[52,17407,14175],{"class":58},[52,17409,5116],{"class":371},[52,17411,1746],{"class":58},[52,17413,17414,17416,17418],{"class":54,"line":662},[52,17415,14184],{"class":58},[52,17417,14650],{"class":371},[52,17419,1746],{"class":58},[52,17421,17422,17424],{"class":54,"line":671},[52,17423,14193],{"class":58},[52,17425,17180],{"class":371},[52,17427,17428],{"class":54,"line":676},[52,17429,14209],{"class":58},[52,17431,17432],{"class":54,"line":682},[52,17433,1224],{"class":58},[52,17435,17436,17438,17440],{"class":54,"line":698},[52,17437,121],{"class":58},[52,17439,63],{"class":371},[52,17441,77],{"class":58},[23,17443,17445],{"id":17444},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,17447,17448,17449,17452],{},"In the JavaScript API, ",[31,17450,17451],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[43,17454,17456],{"className":222,"code":17455,"language":224,"meta":48,"style":48},"// 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",[31,17457,17458,17463,17477,17481,17498,17502,17506,17510,17515,17527,17532,17541,17550,17559,17567,17571,17575,17579,17584],{"__ignoreMap":48},[52,17459,17460],{"class":54,"line":55},[52,17461,17462],{"class":559},"// Start with a static value\n",[52,17464,17465,17467,17469,17471,17473,17475],{"class":54,"line":80},[52,17466,1721],{"class":231},[52,17468,1724],{"class":371},[52,17470,1727],{"class":231},[52,17472,1730],{"class":231},[52,17474,1733],{"class":66},[52,17476,1736],{"class":58},[52,17478,17479],{"class":54,"line":108},[52,17480,1751],{"class":58},[52,17482,17483,17485,17487,17489,17492,17494,17496],{"class":54,"line":118},[52,17484,1756],{"class":58},[52,17486,2869],{"class":73},[52,17488,2872],{"class":58},[52,17490,17491],{"class":73},"'c'",[52,17493,4407],{"class":58},[52,17495,5116],{"class":371},[52,17497,1768],{"class":58},[52,17499,17500],{"class":54,"line":594},[52,17501,1773],{"class":58},[52,17503,17504],{"class":54,"line":600},[52,17505,1778],{"class":58},[52,17507,17508],{"class":54,"line":606},[52,17509,597],{"emptyLinePlaceholder":171},[52,17511,17512],{"class":54,"line":653},[52,17513,17514],{"class":559},"// Later: switch to animated\n",[52,17516,17517,17519,17521,17523,17525],{"class":54,"line":662},[52,17518,8476],{"class":58},[52,17520,8479],{"class":66},[52,17522,2289],{"class":58},[52,17524,17491],{"class":73},[52,17526,8838],{"class":58},[52,17528,17529],{"class":54,"line":671},[52,17530,17531],{"class":58}," radius: {\n",[52,17533,17534,17537,17539],{"class":54,"line":676},[52,17535,17536],{"class":58}," type: ",[52,17538,14158],{"class":73},[52,17540,1746],{"class":58},[52,17542,17543,17546,17548],{"class":54,"line":682},[52,17544,17545],{"class":58}," mode: ",[52,17547,14168],{"class":73},[52,17549,1746],{"class":58},[52,17551,17552,17555,17557],{"class":54,"line":698},[52,17553,17554],{"class":58}," outputMin: ",[52,17556,12331],{"class":371},[52,17558,1746],{"class":58},[52,17560,17561,17564],{"class":54,"line":707},[52,17562,17563],{"class":58}," outputMax: ",[52,17565,17566],{"class":371},"0.7\n",[52,17568,17569],{"class":54,"line":2327},[52,17570,2919],{"class":58},[52,17572,17573],{"class":54,"line":6522},[52,17574,1778],{"class":58},[52,17576,17577],{"class":54,"line":6532},[52,17578,597],{"emptyLinePlaceholder":171},[52,17580,17581],{"class":54,"line":6543},[52,17582,17583],{"class":559},"// Later: switch back to static\n",[52,17585,17586,17588,17590,17592,17594,17597,17599],{"class":54,"line":6548},[52,17587,8476],{"class":58},[52,17589,8479],{"class":66},[52,17591,2289],{"class":58},[52,17593,17491],{"class":73},[52,17595,17596],{"class":58},", { radius: ",[52,17598,5116],{"class":371},[52,17600,8491],{"class":58},[156,17602,11864],{},{"title":48,"searchDepth":80,"depth":80,"links":17604},[17605,17606,17607,17608,17609,17610],{"id":13912,"depth":80,"text":13912},{"id":14704,"depth":80,"text":14704},{"id":15442,"depth":80,"text":15442},{"id":16071,"depth":80,"text":16071},{"id":16957,"depth":80,"text":16958},{"id":17444,"depth":80,"text":17445},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":13951,"description":17611},"docs/guide/7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":17618,"title":17619,"body":17620,"category":7102,"description":19960,"exclude":167,"extension":168,"forceFramework":167,"icon":19961,"meta":19962,"navigation":171,"path":19963,"seo":19964,"stem":19965,"__hash__":19966},"guide/docs/guide/8.shape-effects.md","Shape / SDF Effects",{"type":8,"value":17621,"toc":19932},[17622,17625,17646,17649,17653,17669,18313,18316,18320,18326,18329,18362,18392,18394,18401,18404,18471,18516,18518,18525,18528,18613,18667,18669,18675,18678,18767,18817,18819,18826,18829,18918,18968,18970,18977,18980,19032,19067,19069,19076,19079,19166,19217,19219,19226,19229,19312,19361,19363,19370,19373,19446,19489,19491,19498,19501,19585,19636,19638,19645,19648,19732,19784,19786,19790,19793,19811,19930],[11,17623,17619],{"id":17624},"shape-sdf-effects",[15,17626,17627,17628,1881,17631,17634,17635,17638,17639,17642,17643,17645],{},"Several components — such as ",[151,17629,17630],{},"Glass",[151,17632,17633],{},"Neon",", and ",[151,17636,17637],{},"Emboss"," — are driven by a ",[1833,17640,17641],{},"shape",". These effects accept a ",[31,17644,17641],{}," 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,17647,17648],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[23,17650,17652],{"id":17651},"configuration","Configuration",[15,17654,1825,17655,17657,17658,17661,17662,15404,17665,17668],{},[31,17656,17641],{}," prop accepts a configuration object. The only required key is ",[31,17659,17660],{},"type",", which selects one of the built-in analytical shapes, like ",[31,17663,17664],{},"circleSDF",[31,17666,17667],{},"starSDF",". Everything else is shape-specific and optional (sensible defaults apply).",[217,17670,17671,17745,17890,18014,18138],{":tabs":1543},[43,17672,17674],{"className":45,"code":17673,"language":47,"meta":48,"style":48},"\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",[31,17675,17676,17681,17697,17701,17706,17721,17725,17730],{"__ignoreMap":48},[52,17677,17678],{"class":54,"line":55},[52,17679,17680],{"class":559},"\u003C!-- Circle (default) -->\n",[52,17682,17683,17685,17687,17690,17692,17695],{"class":54,"line":80},[52,17684,59],{"class":58},[52,17686,17630],{"class":62},[52,17688,17689],{"class":66}," :shape",[52,17691,70],{"class":58},[52,17693,17694],{"class":73},"'{ type: \"circleSDF\", radius: 0.35 }'",[52,17696,105],{"class":58},[52,17698,17699],{"class":54,"line":108},[52,17700,597],{"emptyLinePlaceholder":171},[52,17702,17703],{"class":54,"line":118},[52,17704,17705],{"class":559},"\u003C!-- Six-pointed star -->\n",[52,17707,17708,17710,17712,17714,17716,17719],{"class":54,"line":594},[52,17709,59],{"class":58},[52,17711,17633],{"class":62},[52,17713,17689],{"class":66},[52,17715,70],{"class":58},[52,17717,17718],{"class":73},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[52,17720,105],{"class":58},[52,17722,17723],{"class":54,"line":600},[52,17724,597],{"emptyLinePlaceholder":171},[52,17726,17727],{"class":54,"line":606},[52,17728,17729],{"class":559},"\u003C!-- Rounded rectangle -->\n",[52,17731,17732,17734,17736,17738,17740,17743],{"class":54,"line":653},[52,17733,59],{"class":58},[52,17735,17637],{"class":62},[52,17737,17689],{"class":66},[52,17739,70],{"class":58},[52,17741,17742],{"class":73},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[52,17744,105],{"class":58},[43,17746,17748],{"className":360,"code":17747,"language":362,"meta":48,"style":48},"// 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",[31,17749,17750,17755,17790,17794,17799,17840,17844,17849],{"__ignoreMap":48},[52,17751,17752],{"class":54,"line":55},[52,17753,17754],{"class":559},"// Circle (default)\n",[52,17756,17757,17759,17761,17764,17766,17768,17771,17773,17776,17779,17782,17784,17787],{"class":54,"line":80},[52,17758,59],{"class":58},[52,17760,17630],{"class":371},[52,17762,17763],{"class":66}," shape",[52,17765,70],{"class":231},[52,17767,723],{"class":58},[52,17769,17770],{"class":371},"JSON",[52,17772,6357],{"class":58},[52,17774,17775],{"class":66},"stringify",[52,17777,17778],{"class":58},"({ type: ",[52,17780,17781],{"class":73},"\"circleSDF\"",[52,17783,3431],{"class":58},[52,17785,17786],{"class":371},"0.35",[52,17788,17789],{"class":58}," })} />\n",[52,17791,17792],{"class":54,"line":108},[52,17793,597],{"emptyLinePlaceholder":171},[52,17795,17796],{"class":54,"line":118},[52,17797,17798],{"class":559},"// Six-pointed star\n",[52,17800,17801,17803,17805,17807,17809,17811,17813,17815,17817,17819,17822,17824,17826,17829,17832,17835,17838],{"class":54,"line":594},[52,17802,59],{"class":58},[52,17804,17633],{"class":371},[52,17806,17763],{"class":66},[52,17808,70],{"class":231},[52,17810,723],{"class":58},[52,17812,17770],{"class":371},[52,17814,6357],{"class":58},[52,17816,17775],{"class":66},[52,17818,17778],{"class":58},[52,17820,17821],{"class":73},"\"starSDF\"",[52,17823,3431],{"class":58},[52,17825,17786],{"class":371},[52,17827,17828],{"class":58},", sides: ",[52,17830,17831],{"class":371},"6",[52,17833,17834],{"class":58},", innerRatio: ",[52,17836,17837],{"class":371},"0.45",[52,17839,17789],{"class":58},[52,17841,17842],{"class":54,"line":600},[52,17843,597],{"emptyLinePlaceholder":171},[52,17845,17846],{"class":54,"line":606},[52,17847,17848],{"class":559},"// Rounded rectangle\n",[52,17850,17851,17853,17855,17857,17859,17861,17863,17865,17867,17869,17872,17875,17877,17879,17882,17885,17888],{"class":54,"line":653},[52,17852,59],{"class":58},[52,17854,17637],{"class":371},[52,17856,17763],{"class":66},[52,17858,70],{"class":231},[52,17860,723],{"class":58},[52,17862,17770],{"class":371},[52,17864,6357],{"class":58},[52,17866,17775],{"class":66},[52,17868,17778],{"class":58},[52,17870,17871],{"class":73},"\"roundedRectSDF\"",[52,17873,17874],{"class":58},", width: ",[52,17876,5116],{"class":371},[52,17878,791],{"class":58},[52,17880,17881],{"class":371},"0.25",[52,17883,17884],{"class":58},", rounding: ",[52,17886,17887],{"class":371},"0.06",[52,17889,17789],{"class":58},[43,17891,17892],{"className":419,"code":17747,"language":420,"meta":48,"style":48},[31,17893,17894,17898,17926,17930,17934,17970,17974,17978],{"__ignoreMap":48},[52,17895,17896],{"class":54,"line":55},[52,17897,17754],{"class":559},[52,17899,17900,17902,17904,17906,17908,17910,17912,17914,17916,17918,17920,17922,17924],{"class":54,"line":80},[52,17901,59],{"class":58},[52,17903,17630],{"class":371},[52,17905,17763],{"class":66},[52,17907,70],{"class":231},[52,17909,723],{"class":58},[52,17911,17770],{"class":371},[52,17913,6357],{"class":58},[52,17915,17775],{"class":66},[52,17917,17778],{"class":58},[52,17919,17781],{"class":73},[52,17921,3431],{"class":58},[52,17923,17786],{"class":371},[52,17925,17789],{"class":58},[52,17927,17928],{"class":54,"line":108},[52,17929,597],{"emptyLinePlaceholder":171},[52,17931,17932],{"class":54,"line":118},[52,17933,17798],{"class":559},[52,17935,17936,17938,17940,17942,17944,17946,17948,17950,17952,17954,17956,17958,17960,17962,17964,17966,17968],{"class":54,"line":594},[52,17937,59],{"class":58},[52,17939,17633],{"class":371},[52,17941,17763],{"class":66},[52,17943,70],{"class":231},[52,17945,723],{"class":58},[52,17947,17770],{"class":371},[52,17949,6357],{"class":58},[52,17951,17775],{"class":66},[52,17953,17778],{"class":58},[52,17955,17821],{"class":73},[52,17957,3431],{"class":58},[52,17959,17786],{"class":371},[52,17961,17828],{"class":58},[52,17963,17831],{"class":371},[52,17965,17834],{"class":58},[52,17967,17837],{"class":371},[52,17969,17789],{"class":58},[52,17971,17972],{"class":54,"line":600},[52,17973,597],{"emptyLinePlaceholder":171},[52,17975,17976],{"class":54,"line":606},[52,17977,17848],{"class":559},[52,17979,17980,17982,17984,17986,17988,17990,17992,17994,17996,17998,18000,18002,18004,18006,18008,18010,18012],{"class":54,"line":653},[52,17981,59],{"class":58},[52,17983,17637],{"class":371},[52,17985,17763],{"class":66},[52,17987,70],{"class":231},[52,17989,723],{"class":58},[52,17991,17770],{"class":371},[52,17993,6357],{"class":58},[52,17995,17775],{"class":66},[52,17997,17778],{"class":58},[52,17999,17871],{"class":73},[52,18001,17874],{"class":58},[52,18003,5116],{"class":371},[52,18005,791],{"class":58},[52,18007,17881],{"class":371},[52,18009,17884],{"class":58},[52,18011,17887],{"class":371},[52,18013,17789],{"class":58},[43,18015,18016],{"className":419,"code":17747,"language":420,"meta":48,"style":48},[31,18017,18018,18022,18050,18054,18058,18094,18098,18102],{"__ignoreMap":48},[52,18019,18020],{"class":54,"line":55},[52,18021,17754],{"class":559},[52,18023,18024,18026,18028,18030,18032,18034,18036,18038,18040,18042,18044,18046,18048],{"class":54,"line":80},[52,18025,59],{"class":58},[52,18027,17630],{"class":371},[52,18029,17763],{"class":66},[52,18031,70],{"class":231},[52,18033,723],{"class":58},[52,18035,17770],{"class":371},[52,18037,6357],{"class":58},[52,18039,17775],{"class":66},[52,18041,17778],{"class":58},[52,18043,17781],{"class":73},[52,18045,3431],{"class":58},[52,18047,17786],{"class":371},[52,18049,17789],{"class":58},[52,18051,18052],{"class":54,"line":108},[52,18053,597],{"emptyLinePlaceholder":171},[52,18055,18056],{"class":54,"line":118},[52,18057,17798],{"class":559},[52,18059,18060,18062,18064,18066,18068,18070,18072,18074,18076,18078,18080,18082,18084,18086,18088,18090,18092],{"class":54,"line":594},[52,18061,59],{"class":58},[52,18063,17633],{"class":371},[52,18065,17763],{"class":66},[52,18067,70],{"class":231},[52,18069,723],{"class":58},[52,18071,17770],{"class":371},[52,18073,6357],{"class":58},[52,18075,17775],{"class":66},[52,18077,17778],{"class":58},[52,18079,17821],{"class":73},[52,18081,3431],{"class":58},[52,18083,17786],{"class":371},[52,18085,17828],{"class":58},[52,18087,17831],{"class":371},[52,18089,17834],{"class":58},[52,18091,17837],{"class":371},[52,18093,17789],{"class":58},[52,18095,18096],{"class":54,"line":600},[52,18097,597],{"emptyLinePlaceholder":171},[52,18099,18100],{"class":54,"line":606},[52,18101,17848],{"class":559},[52,18103,18104,18106,18108,18110,18112,18114,18116,18118,18120,18122,18124,18126,18128,18130,18132,18134,18136],{"class":54,"line":653},[52,18105,59],{"class":58},[52,18107,17637],{"class":371},[52,18109,17763],{"class":66},[52,18111,70],{"class":231},[52,18113,723],{"class":58},[52,18115,17770],{"class":371},[52,18117,6357],{"class":58},[52,18119,17775],{"class":66},[52,18121,17778],{"class":58},[52,18123,17871],{"class":73},[52,18125,17874],{"class":58},[52,18127,5116],{"class":371},[52,18129,791],{"class":58},[52,18131,17881],{"class":371},[52,18133,17884],{"class":58},[52,18135,17887],{"class":371},[52,18137,17789],{"class":58},[43,18139,18141],{"className":222,"code":18140,"language":224,"meta":48,"style":48},"// 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",[31,18142,18143,18147,18161,18165,18185,18189,18193,18197,18201,18215,18219,18245,18249,18253,18257,18261,18275,18279,18305,18309],{"__ignoreMap":48},[52,18144,18145],{"class":54,"line":55},[52,18146,17754],{"class":559},[52,18148,18149,18151,18153,18155,18157,18159],{"class":54,"line":80},[52,18150,1721],{"class":231},[52,18152,1724],{"class":371},[52,18154,1727],{"class":231},[52,18156,1730],{"class":231},[52,18158,1733],{"class":66},[52,18160,1736],{"class":58},[52,18162,18163],{"class":54,"line":108},[52,18164,1751],{"class":58},[52,18166,18167,18169,18172,18175,18178,18180,18182],{"class":54,"line":118},[52,18168,1756],{"class":58},[52,18170,18171],{"class":73},"'Glass'",[52,18173,18174],{"class":58},", props: { shape: { type: ",[52,18176,18177],{"class":73},"'circleSDF'",[52,18179,3431],{"class":58},[52,18181,17786],{"class":371},[52,18183,18184],{"class":58}," } } }\n",[52,18186,18187],{"class":54,"line":594},[52,18188,1773],{"class":58},[52,18190,18191],{"class":54,"line":600},[52,18192,1778],{"class":58},[52,18194,18195],{"class":54,"line":606},[52,18196,597],{"emptyLinePlaceholder":171},[52,18198,18199],{"class":54,"line":653},[52,18200,17798],{"class":559},[52,18202,18203,18205,18207,18209,18211,18213],{"class":54,"line":662},[52,18204,1721],{"class":231},[52,18206,1724],{"class":371},[52,18208,1727],{"class":231},[52,18210,1730],{"class":231},[52,18212,1733],{"class":66},[52,18214,1736],{"class":58},[52,18216,18217],{"class":54,"line":671},[52,18218,1751],{"class":58},[52,18220,18221,18223,18226,18228,18231,18233,18235,18237,18239,18241,18243],{"class":54,"line":676},[52,18222,1756],{"class":58},[52,18224,18225],{"class":73},"'Neon'",[52,18227,18174],{"class":58},[52,18229,18230],{"class":73},"'starSDF'",[52,18232,3431],{"class":58},[52,18234,17786],{"class":371},[52,18236,17828],{"class":58},[52,18238,17831],{"class":371},[52,18240,17834],{"class":58},[52,18242,17837],{"class":371},[52,18244,18184],{"class":58},[52,18246,18247],{"class":54,"line":682},[52,18248,1773],{"class":58},[52,18250,18251],{"class":54,"line":698},[52,18252,1778],{"class":58},[52,18254,18255],{"class":54,"line":707},[52,18256,597],{"emptyLinePlaceholder":171},[52,18258,18259],{"class":54,"line":2327},[52,18260,17848],{"class":559},[52,18262,18263,18265,18267,18269,18271,18273],{"class":54,"line":6522},[52,18264,1721],{"class":231},[52,18266,1724],{"class":371},[52,18268,1727],{"class":231},[52,18270,1730],{"class":231},[52,18272,1733],{"class":66},[52,18274,1736],{"class":58},[52,18276,18277],{"class":54,"line":6532},[52,18278,1751],{"class":58},[52,18280,18281,18283,18286,18288,18291,18293,18295,18297,18299,18301,18303],{"class":54,"line":6543},[52,18282,1756],{"class":58},[52,18284,18285],{"class":73},"'Emboss'",[52,18287,18174],{"class":58},[52,18289,18290],{"class":73},"'roundedRectSDF'",[52,18292,17874],{"class":58},[52,18294,5116],{"class":371},[52,18296,791],{"class":58},[52,18298,17881],{"class":371},[52,18300,17884],{"class":58},[52,18302,17887],{"class":371},[52,18304,18184],{"class":58},[52,18306,18307],{"class":54,"line":6548},[52,18308,1773],{"class":58},[52,18310,18311],{"class":54,"line":7870},[52,18312,1778],{"class":58},[18314,18315],"hr",{},[23,18317,18319],{"id":18318},"built-in-shapes","Built-in shapes",[2925,18321,18323,18324],{"id":18322},"circle-circlesdf","Circle — ",[31,18325,17664],{},[15,18327,18328],{},"A perfect circle. The default shape for all shape effects.",[1780,18330,18331,18343],{},[1783,18332,18333],{},[1786,18334,18335,18337,18339,18341],{},[1789,18336,11998],{},[1789,18338,12001],{},[1789,18340,12004],{},[1789,18342,1794],{},[1796,18344,18345],{},[1786,18346,18347,18351,18355,18359],{},[1801,18348,18349],{},[31,18350,8555],{},[1801,18352,18353],{},[31,18354,12020],{},[1801,18356,18357],{},[31,18358,17786],{},[1801,18360,18361],{},"Circle radius in UV space",[43,18363,18367],{"className":18364,"code":18365,"language":18366,"meta":48,"style":48},"language-json shiki shiki-themes github-dark","{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n","json",[31,18368,18369],{"__ignoreMap":48},[52,18370,18371,18374,18377,18379,18381,18383,18386,18388,18390],{"class":54,"line":55},[52,18372,18373],{"class":58},"{ ",[52,18375,18376],{"class":371},"\"type\"",[52,18378,624],{"class":58},[52,18380,17781],{"class":73},[52,18382,1881],{"class":58},[52,18384,18385],{"class":371},"\"radius\"",[52,18387,624],{"class":58},[52,18389,17786],{"class":371},[52,18391,12600],{"class":58},[18314,18393],{},[2925,18395,18397,18398],{"id":18396},"ellipse-ellipsesdf","Ellipse — ",[31,18399,18400],{},"ellipseSDF",[15,18402,18403],{},"A stretched circle with independent horizontal and vertical radii.",[1780,18405,18406,18418],{},[1783,18407,18408],{},[1786,18409,18410,18412,18414,18416],{},[1789,18411,11998],{},[1789,18413,12001],{},[1789,18415,12004],{},[1789,18417,1794],{},[1796,18419,18420,18437,18454],{},[1786,18421,18422,18426,18430,18434],{},[1801,18423,18424],{},[31,18425,621],{},[1801,18427,18428],{},[31,18429,12020],{},[1801,18431,18432],{},[31,18433,5116],{},[1801,18435,18436],{},"Horizontal radius (semi-major axis)",[1786,18438,18439,18443,18447,18451],{},[1801,18440,18441],{},[31,18442,636],{},[1801,18444,18445],{},[31,18446,12020],{},[1801,18448,18449],{},[31,18450,17881],{},[1801,18452,18453],{},"Vertical radius (semi-minor axis)",[1786,18455,18456,18460,18464,18468],{},[1801,18457,18458],{},[31,18459,8706],{},[1801,18461,18462],{},[31,18463,12020],{},[1801,18465,18466],{},[31,18467,5540],{},[1801,18469,18470],{},"Rotation in degrees",[43,18472,18474],{"className":18364,"code":18473,"language":18366,"meta":48,"style":48},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[31,18475,18476],{"__ignoreMap":48},[52,18477,18478,18480,18482,18484,18487,18489,18492,18494,18496,18498,18501,18503,18505,18507,18510,18512,18514],{"class":54,"line":55},[52,18479,18373],{"class":58},[52,18481,18376],{"class":371},[52,18483,624],{"class":58},[52,18485,18486],{"class":73},"\"ellipseSDF\"",[52,18488,1881],{"class":58},[52,18490,18491],{"class":371},"\"width\"",[52,18493,624],{"class":58},[52,18495,5116],{"class":371},[52,18497,1881],{"class":58},[52,18499,18500],{"class":371},"\"height\"",[52,18502,624],{"class":58},[52,18504,17881],{"class":371},[52,18506,1881],{"class":58},[52,18508,18509],{"class":371},"\"rotation\"",[52,18511,624],{"class":58},[52,18513,5540],{"class":371},[52,18515,12600],{"class":58},[18314,18517],{},[2925,18519,18521,18522],{"id":18520},"polygon-polygonsdf","Polygon — ",[31,18523,18524],{},"polygonSDF",[15,18526,18527],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1780,18529,18530,18542],{},[1783,18531,18532],{},[1786,18533,18534,18536,18538,18540],{},[1789,18535,11998],{},[1789,18537,12001],{},[1789,18539,12004],{},[1789,18541,1794],{},[1796,18543,18544,18561,18579,18597],{},[1786,18545,18546,18550,18554,18558],{},[1801,18547,18548],{},[31,18549,8555],{},[1801,18551,18552],{},[31,18553,12020],{},[1801,18555,18556],{},[31,18557,17786],{},[1801,18559,18560],{},"Distance from center to nearest edge midpoint",[1786,18562,18563,18568,18572,18576],{},[1801,18564,18565],{},[31,18566,18567],{},"sides",[1801,18569,18570],{},[31,18571,12020],{},[1801,18573,18574],{},[31,18575,17831],{},[1801,18577,18578],{},"Number of sides",[1786,18580,18581,18586,18590,18594],{},[1801,18582,18583],{},[31,18584,18585],{},"rounding",[1801,18587,18588],{},[31,18589,12020],{},[1801,18591,18592],{},[31,18593,5540],{},[1801,18595,18596],{},"Corner rounding amount",[1786,18598,18599,18603,18607,18611],{},[1801,18600,18601],{},[31,18602,8706],{},[1801,18604,18605],{},[31,18606,12020],{},[1801,18608,18609],{},[31,18610,5540],{},[1801,18612,18470],{},[43,18614,18616],{"className":18364,"code":18615,"language":18366,"meta":48,"style":48},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[31,18617,18618],{"__ignoreMap":48},[52,18619,18620,18622,18624,18626,18629,18631,18633,18635,18638,18640,18643,18645,18647,18649,18652,18654,18657,18659,18661,18663,18665],{"class":54,"line":55},[52,18621,18373],{"class":58},[52,18623,18376],{"class":371},[52,18625,624],{"class":58},[52,18627,18628],{"class":73},"\"polygonSDF\"",[52,18630,1881],{"class":58},[52,18632,18385],{"class":371},[52,18634,624],{"class":58},[52,18636,18637],{"class":371},"0.3",[52,18639,1881],{"class":58},[52,18641,18642],{"class":371},"\"sides\"",[52,18644,624],{"class":58},[52,18646,17831],{"class":371},[52,18648,1881],{"class":58},[52,18650,18651],{"class":371},"\"rounding\"",[52,18653,624],{"class":58},[52,18655,18656],{"class":371},"0.05",[52,18658,1881],{"class":58},[52,18660,18509],{"class":371},[52,18662,624],{"class":58},[52,18664,5540],{"class":371},[52,18666,12600],{"class":58},[18314,18668],{},[2925,18670,18672,18673],{"id":18671},"star-starsdf","Star — ",[31,18674,17667],{},[15,18676,18677],{},"An N-pointed star with configurable inner/outer radius ratio.",[1780,18679,18680,18692],{},[1783,18681,18682],{},[1786,18683,18684,18686,18688,18690],{},[1789,18685,11998],{},[1789,18687,12001],{},[1789,18689,12004],{},[1789,18691,1794],{},[1796,18693,18694,18711,18729,18751],{},[1786,18695,18696,18700,18704,18708],{},[1801,18697,18698],{},[31,18699,8555],{},[1801,18701,18702],{},[31,18703,12020],{},[1801,18705,18706],{},[31,18707,17786],{},[1801,18709,18710],{},"Outer tip radius",[1786,18712,18713,18717,18721,18726],{},[1801,18714,18715],{},[31,18716,18567],{},[1801,18718,18719],{},[31,18720,12020],{},[1801,18722,18723],{},[31,18724,18725],{},"5",[1801,18727,18728],{},"Number of points",[1786,18730,18731,18736,18740,18745],{},[1801,18732,18733],{},[31,18734,18735],{},"innerRatio",[1801,18737,18738],{},[31,18739,12020],{},[1801,18741,18742],{},[31,18743,18744],{},"0.382",[1801,18746,18747,18748,18750],{},"Inner vertex radius as a fraction of outer radius — ",[31,18749,18744],{}," gives the classic golden-ratio 5-star",[1786,18752,18753,18757,18761,18765],{},[1801,18754,18755],{},[31,18756,8706],{},[1801,18758,18759],{},[31,18760,12020],{},[1801,18762,18763],{},[31,18764,5540],{},[1801,18766,18470],{},[43,18768,18770],{"className":18364,"code":18769,"language":18366,"meta":48,"style":48},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[31,18771,18772],{"__ignoreMap":48},[52,18773,18774,18776,18778,18780,18782,18784,18786,18788,18790,18792,18794,18796,18798,18800,18803,18805,18807,18809,18811,18813,18815],{"class":54,"line":55},[52,18775,18373],{"class":58},[52,18777,18376],{"class":371},[52,18779,624],{"class":58},[52,18781,17821],{"class":73},[52,18783,1881],{"class":58},[52,18785,18385],{"class":371},[52,18787,624],{"class":58},[52,18789,17786],{"class":371},[52,18791,1881],{"class":58},[52,18793,18642],{"class":371},[52,18795,624],{"class":58},[52,18797,18725],{"class":371},[52,18799,1881],{"class":58},[52,18801,18802],{"class":371},"\"innerRatio\"",[52,18804,624],{"class":58},[52,18806,18744],{"class":371},[52,18808,1881],{"class":58},[52,18810,18509],{"class":371},[52,18812,624],{"class":58},[52,18814,5540],{"class":371},[52,18816,12600],{"class":58},[18314,18818],{},[2925,18820,18822,18823],{"id":18821},"flower-flowersdf","Flower — ",[31,18824,18825],{},"flowerSDF",[15,18827,18828],{},"An N-petalled flower with smooth concave valleys between petals.",[1780,18830,18831,18843],{},[1783,18832,18833],{},[1786,18834,18835,18837,18839,18841],{},[1789,18836,11998],{},[1789,18838,12001],{},[1789,18840,12004],{},[1789,18842,1794],{},[1796,18844,18845,18862,18879,18902],{},[1786,18846,18847,18851,18855,18859],{},[1801,18848,18849],{},[31,18850,8555],{},[1801,18852,18853],{},[31,18854,12020],{},[1801,18856,18857],{},[31,18858,17786],{},[1801,18860,18861],{},"Outer petal tip radius",[1786,18863,18864,18868,18872,18876],{},[1801,18865,18866],{},[31,18867,18567],{},[1801,18869,18870],{},[31,18871,12020],{},[1801,18873,18874],{},[31,18875,17831],{},[1801,18877,18878],{},"Number of petals",[1786,18880,18881,18885,18889,18893],{},[1801,18882,18883],{},[31,18884,18735],{},[1801,18886,18887],{},[31,18888,12020],{},[1801,18890,18891],{},[31,18892,4620],{},[1801,18894,18895,18896,18898,18899,18901],{},"Valley depth — ",[31,18897,12331],{}," = deep narrow valleys, ",[31,18900,3164],{}," = subtle scalloped edge",[1786,18903,18904,18908,18912,18916],{},[1801,18905,18906],{},[31,18907,8706],{},[1801,18909,18910],{},[31,18911,12020],{},[1801,18913,18914],{},[31,18915,5540],{},[1801,18917,18470],{},[43,18919,18921],{"className":18364,"code":18920,"language":18366,"meta":48,"style":48},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[31,18922,18923],{"__ignoreMap":48},[52,18924,18925,18927,18929,18931,18934,18936,18938,18940,18942,18944,18946,18948,18950,18952,18954,18956,18958,18960,18962,18964,18966],{"class":54,"line":55},[52,18926,18373],{"class":58},[52,18928,18376],{"class":371},[52,18930,624],{"class":58},[52,18932,18933],{"class":73},"\"flowerSDF\"",[52,18935,1881],{"class":58},[52,18937,18385],{"class":371},[52,18939,624],{"class":58},[52,18941,17786],{"class":371},[52,18943,1881],{"class":58},[52,18945,18642],{"class":371},[52,18947,624],{"class":58},[52,18949,17831],{"class":371},[52,18951,1881],{"class":58},[52,18953,18802],{"class":371},[52,18955,624],{"class":58},[52,18957,4620],{"class":371},[52,18959,1881],{"class":58},[52,18961,18509],{"class":371},[52,18963,624],{"class":58},[52,18965,5540],{"class":371},[52,18967,12600],{"class":58},[18314,18969],{},[2925,18971,18973,18974],{"id":18972},"ring-ringsdf","Ring — ",[31,18975,18976],{},"ringSDF",[15,18978,18979],{},"A hollow ring / annulus. The effect applies to the ring material itself, not the interior hole.",[1780,18981,18982,18994],{},[1783,18983,18984],{},[1786,18985,18986,18988,18990,18992],{},[1789,18987,11998],{},[1789,18989,12001],{},[1789,18991,12004],{},[1789,18993,1794],{},[1796,18995,18996,19013],{},[1786,18997,18998,19002,19006,19010],{},[1801,18999,19000],{},[31,19001,8555],{},[1801,19003,19004],{},[31,19005,12020],{},[1801,19007,19008],{},[31,19009,18637],{},[1801,19011,19012],{},"Distance from center to the ring centerline",[1786,19014,19015,19020,19024,19029],{},[1801,19016,19017],{},[31,19018,19019],{},"thickness",[1801,19021,19022],{},[31,19023,12020],{},[1801,19025,19026],{},[31,19027,19028],{},"0.08",[1801,19030,19031],{},"Half-width of the ring on each side of the centerline",[43,19033,19035],{"className":18364,"code":19034,"language":18366,"meta":48,"style":48},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[31,19036,19037],{"__ignoreMap":48},[52,19038,19039,19041,19043,19045,19048,19050,19052,19054,19056,19058,19061,19063,19065],{"class":54,"line":55},[52,19040,18373],{"class":58},[52,19042,18376],{"class":371},[52,19044,624],{"class":58},[52,19046,19047],{"class":73},"\"ringSDF\"",[52,19049,1881],{"class":58},[52,19051,18385],{"class":371},[52,19053,624],{"class":58},[52,19055,18637],{"class":371},[52,19057,1881],{"class":58},[52,19059,19060],{"class":371},"\"thickness\"",[52,19062,624],{"class":58},[52,19064,19028],{"class":371},[52,19066,12600],{"class":58},[18314,19068],{},[2925,19070,19072,19073],{"id":19071},"cross-crosssdf","Cross — ",[31,19074,19075],{},"crossSDF",[15,19077,19078],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1780,19080,19081,19093],{},[1783,19082,19083],{},[1786,19084,19085,19087,19089,19091],{},[1789,19086,11998],{},[1789,19088,12001],{},[1789,19090,12004],{},[1789,19092,1794],{},[1796,19094,19095,19112,19129,19146],{},[1786,19096,19097,19101,19105,19109],{},[1801,19098,19099],{},[31,19100,8562],{},[1801,19102,19103],{},[31,19104,12020],{},[1801,19106,19107],{},[31,19108,17881],{},[1801,19110,19111],{},"Arm half-length",[1786,19113,19114,19118,19122,19126],{},[1801,19115,19116],{},[31,19117,19019],{},[1801,19119,19120],{},[31,19121,12020],{},[1801,19123,19124],{},[31,19125,19028],{},[1801,19127,19128],{},"Arm half-width",[1786,19130,19131,19135,19139,19143],{},[1801,19132,19133],{},[31,19134,18585],{},[1801,19136,19137],{},[31,19138,12020],{},[1801,19140,19141],{},[31,19142,16340],{},[1801,19144,19145],{},"Corner rounding at arm ends and intersections",[1786,19147,19148,19152,19156,19160],{},[1801,19149,19150],{},[31,19151,8706],{},[1801,19153,19154],{},[31,19155,12020],{},[1801,19157,19158],{},[31,19159,5540],{},[1801,19161,19162,19163,19165],{},"Rotation in degrees — use ",[31,19164,1206],{}," for an X shape",[43,19167,19169],{"className":18364,"code":19168,"language":18366,"meta":48,"style":48},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[31,19170,19171],{"__ignoreMap":48},[52,19172,19173,19175,19177,19179,19182,19184,19187,19189,19191,19193,19195,19197,19199,19201,19203,19205,19207,19209,19211,19213,19215],{"class":54,"line":55},[52,19174,18373],{"class":58},[52,19176,18376],{"class":371},[52,19178,624],{"class":58},[52,19180,19181],{"class":73},"\"crossSDF\"",[52,19183,1881],{"class":58},[52,19185,19186],{"class":371},"\"size\"",[52,19188,624],{"class":58},[52,19190,17881],{"class":371},[52,19192,1881],{"class":58},[52,19194,19060],{"class":371},[52,19196,624],{"class":58},[52,19198,19028],{"class":371},[52,19200,1881],{"class":58},[52,19202,18651],{"class":371},[52,19204,624],{"class":58},[52,19206,16340],{"class":371},[52,19208,1881],{"class":58},[52,19210,18509],{"class":371},[52,19212,624],{"class":58},[52,19214,5540],{"class":371},[52,19216,12600],{"class":58},[18314,19218],{},[2925,19220,19222,19223],{"id":19221},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[31,19224,19225],{},"roundedRectSDF",[15,19227,19228],{},"A rectangle with uniformly rounded corners.",[1780,19230,19231,19243],{},[1783,19232,19233],{},[1786,19234,19235,19237,19239,19241],{},[1789,19236,11998],{},[1789,19238,12001],{},[1789,19240,12004],{},[1789,19242,1794],{},[1796,19244,19245,19262,19279,19296],{},[1786,19246,19247,19251,19255,19259],{},[1801,19248,19249],{},[31,19250,621],{},[1801,19252,19253],{},[31,19254,12020],{},[1801,19256,19257],{},[31,19258,17786],{},[1801,19260,19261],{},"Half-width",[1786,19263,19264,19268,19272,19276],{},[1801,19265,19266],{},[31,19267,636],{},[1801,19269,19270],{},[31,19271,12020],{},[1801,19273,19274],{},[31,19275,17881],{},[1801,19277,19278],{},"Half-height",[1786,19280,19281,19285,19289,19293],{},[1801,19282,19283],{},[31,19284,18585],{},[1801,19286,19287],{},[31,19288,12020],{},[1801,19290,19291],{},[31,19292,18656],{},[1801,19294,19295],{},"Corner rounding radius",[1786,19297,19298,19302,19306,19310],{},[1801,19299,19300],{},[31,19301,8706],{},[1801,19303,19304],{},[31,19305,12020],{},[1801,19307,19308],{},[31,19309,5540],{},[1801,19311,18470],{},[43,19313,19315],{"className":18364,"code":19314,"language":18366,"meta":48,"style":48},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[31,19316,19317],{"__ignoreMap":48},[52,19318,19319,19321,19323,19325,19327,19329,19331,19333,19335,19337,19339,19341,19343,19345,19347,19349,19351,19353,19355,19357,19359],{"class":54,"line":55},[52,19320,18373],{"class":58},[52,19322,18376],{"class":371},[52,19324,624],{"class":58},[52,19326,17871],{"class":73},[52,19328,1881],{"class":58},[52,19330,18491],{"class":371},[52,19332,624],{"class":58},[52,19334,17786],{"class":371},[52,19336,1881],{"class":58},[52,19338,18500],{"class":371},[52,19340,624],{"class":58},[52,19342,17881],{"class":371},[52,19344,1881],{"class":58},[52,19346,18651],{"class":371},[52,19348,624],{"class":58},[52,19350,18656],{"class":371},[52,19352,1881],{"class":58},[52,19354,18509],{"class":371},[52,19356,624],{"class":58},[52,19358,5540],{"class":371},[52,19360,12600],{"class":58},[18314,19362],{},[2925,19364,19366,19367],{"id":19365},"vesica-vesicasdf","Vesica — ",[31,19368,19369],{},"vesicaSDF",[15,19371,19372],{},"A lens / eye shape formed by the intersection of two overlapping circles.",[1780,19374,19375,19387],{},[1783,19376,19377],{},[1786,19378,19379,19381,19383,19385],{},[1789,19380,11998],{},[1789,19382,12001],{},[1789,19384,12004],{},[1789,19386,1794],{},[1796,19388,19389,19406,19430],{},[1786,19390,19391,19395,19399,19403],{},[1801,19392,19393],{},[31,19394,8555],{},[1801,19396,19397],{},[31,19398,12020],{},[1801,19400,19401],{},[31,19402,17786],{},[1801,19404,19405],{},"Radius of each circle",[1786,19407,19408,19413,19417,19421],{},[1801,19409,19410],{},[31,19411,19412],{},"spread",[1801,19414,19415],{},[31,19416,12020],{},[1801,19418,19419],{},[31,19420,4620],{},[1801,19422,19423,19424,19426,19427,19429],{},"Half-distance between circle centers as a fraction of radius — ",[31,19425,5540],{}," = a single circle, ",[31,19428,5544],{}," = an infinitely thin lens",[1786,19431,19432,19436,19440,19444],{},[1801,19433,19434],{},[31,19435,8706],{},[1801,19437,19438],{},[31,19439,12020],{},[1801,19441,19442],{},[31,19443,5540],{},[1801,19445,18470],{},[43,19447,19449],{"className":18364,"code":19448,"language":18366,"meta":48,"style":48},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[31,19450,19451],{"__ignoreMap":48},[52,19452,19453,19455,19457,19459,19462,19464,19466,19468,19470,19472,19475,19477,19479,19481,19483,19485,19487],{"class":54,"line":55},[52,19454,18373],{"class":58},[52,19456,18376],{"class":371},[52,19458,624],{"class":58},[52,19460,19461],{"class":73},"\"vesicaSDF\"",[52,19463,1881],{"class":58},[52,19465,18385],{"class":371},[52,19467,624],{"class":58},[52,19469,17786],{"class":371},[52,19471,1881],{"class":58},[52,19473,19474],{"class":371},"\"spread\"",[52,19476,624],{"class":58},[52,19478,4620],{"class":371},[52,19480,1881],{"class":58},[52,19482,18509],{"class":371},[52,19484,624],{"class":58},[52,19486,5540],{"class":371},[52,19488,12600],{"class":58},[18314,19490],{},[2925,19492,19494,19495],{"id":19493},"crescent-crescentsdf","Crescent — ",[31,19496,19497],{},"crescentSDF",[15,19499,19500],{},"A crescent / moon shape formed by subtracting a smaller offset circle from a larger one.",[1780,19502,19503,19515],{},[1783,19504,19505],{},[1786,19506,19507,19509,19511,19513],{},[1789,19508,11998],{},[1789,19510,12001],{},[1789,19512,12004],{},[1789,19514,1794],{},[1796,19516,19517,19534,19552,19569],{},[1786,19518,19519,19523,19527,19531],{},[1801,19520,19521],{},[31,19522,8555],{},[1801,19524,19525],{},[31,19526,12020],{},[1801,19528,19529],{},[31,19530,17786],{},[1801,19532,19533],{},"Outer circle radius",[1786,19535,19536,19540,19544,19549],{},[1801,19537,19538],{},[31,19539,18735],{},[1801,19541,19542],{},[31,19543,12020],{},[1801,19545,19546],{},[31,19547,19548],{},"0.75",[1801,19550,19551],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1786,19553,19554,19558,19562,19566],{},[1801,19555,19556],{},[31,19557,14720],{},[1801,19559,19560],{},[31,19561,12020],{},[1801,19563,19564],{},[31,19565,14848],{},[1801,19567,19568],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1786,19570,19571,19575,19579,19583],{},[1801,19572,19573],{},[31,19574,8706],{},[1801,19576,19577],{},[31,19578,12020],{},[1801,19580,19581],{},[31,19582,5540],{},[1801,19584,18470],{},[43,19586,19588],{"className":18364,"code":19587,"language":18366,"meta":48,"style":48},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[31,19589,19590],{"__ignoreMap":48},[52,19591,19592,19594,19596,19598,19601,19603,19605,19607,19609,19611,19613,19615,19617,19619,19622,19624,19626,19628,19630,19632,19634],{"class":54,"line":55},[52,19593,18373],{"class":58},[52,19595,18376],{"class":371},[52,19597,624],{"class":58},[52,19599,19600],{"class":73},"\"crescentSDF\"",[52,19602,1881],{"class":58},[52,19604,18385],{"class":371},[52,19606,624],{"class":58},[52,19608,17786],{"class":371},[52,19610,1881],{"class":58},[52,19612,18802],{"class":371},[52,19614,624],{"class":58},[52,19616,19548],{"class":371},[52,19618,1881],{"class":58},[52,19620,19621],{"class":371},"\"offset\"",[52,19623,624],{"class":58},[52,19625,14848],{"class":371},[52,19627,1881],{"class":58},[52,19629,18509],{"class":371},[52,19631,624],{"class":58},[52,19633,5540],{"class":371},[52,19635,12600],{"class":58},[18314,19637],{},[2925,19639,19641,19642],{"id":19640},"trapezoid-trapezoidsdf","Trapezoid — ",[31,19643,19644],{},"trapezoidSDF",[15,19646,19647],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1780,19649,19650,19662],{},[1783,19651,19652],{},[1786,19653,19654,19656,19658,19660],{},[1789,19655,11998],{},[1789,19657,12001],{},[1789,19659,12004],{},[1789,19661,1794],{},[1796,19663,19664,19682,19700,19716],{},[1786,19665,19666,19671,19675,19679],{},[1801,19667,19668],{},[31,19669,19670],{},"bottomWidth",[1801,19672,19673],{},[31,19674,12020],{},[1801,19676,19677],{},[31,19678,17786],{},[1801,19680,19681],{},"Bottom edge half-width",[1786,19683,19684,19689,19693,19697],{},[1801,19685,19686],{},[31,19687,19688],{},"topWidth",[1801,19690,19691],{},[31,19692,12020],{},[1801,19694,19695],{},[31,19696,12331],{},[1801,19698,19699],{},"Top edge half-width",[1786,19701,19702,19706,19710,19714],{},[1801,19703,19704],{},[31,19705,636],{},[1801,19707,19708],{},[31,19709,12020],{},[1801,19711,19712],{},[31,19713,17881],{},[1801,19715,19278],{},[1786,19717,19718,19722,19726,19730],{},[1801,19719,19720],{},[31,19721,8706],{},[1801,19723,19724],{},[31,19725,12020],{},[1801,19727,19728],{},[31,19729,5540],{},[1801,19731,18470],{},[43,19733,19735],{"className":18364,"code":19734,"language":18366,"meta":48,"style":48},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[31,19736,19737],{"__ignoreMap":48},[52,19738,19739,19741,19743,19745,19748,19750,19753,19755,19757,19759,19762,19764,19766,19768,19770,19772,19774,19776,19778,19780,19782],{"class":54,"line":55},[52,19740,18373],{"class":58},[52,19742,18376],{"class":371},[52,19744,624],{"class":58},[52,19746,19747],{"class":73},"\"trapezoidSDF\"",[52,19749,1881],{"class":58},[52,19751,19752],{"class":371},"\"bottomWidth\"",[52,19754,624],{"class":58},[52,19756,17786],{"class":371},[52,19758,1881],{"class":58},[52,19760,19761],{"class":371},"\"topWidth\"",[52,19763,624],{"class":58},[52,19765,12331],{"class":371},[52,19767,1881],{"class":58},[52,19769,18500],{"class":371},[52,19771,624],{"class":58},[52,19773,17881],{"class":371},[52,19775,1881],{"class":58},[52,19777,18509],{"class":371},[52,19779,624],{"class":58},[52,19781,5540],{"class":371},[52,19783,12600],{"class":58},[18314,19785],{},[23,19787,19789],{"id":19788},"custom-shapes","Custom shapes",[15,19791,19792],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,19794,19795,19796,19799,19800,19803,19804,19806,19807,19810],{},"To use an SVG shape, simply set ",[31,19797,19798],{},":shapeSdfUrl"," to the URL of the SDF ",[31,19801,19802],{},".bin"," file. Note that at the moment the SDF conversion occurs within the design editor, so it's recommended to use the ",[31,19805,19802],{}," file provided in the code export from the editor. In the near future we'll release a standalone ",[31,19808,19809],{},"SVG -> SDF"," conversion tool here for non-Pro users.",[217,19812,19813,19834,19853,19869,19885],{":tabs":1543},[43,19814,19816],{"className":45,"code":19815,"language":47,"meta":48,"style":48},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" />\n",[31,19817,19818],{"__ignoreMap":48},[52,19819,19820,19822,19824,19827,19829,19832],{"class":54,"line":55},[52,19821,59],{"class":58},[52,19823,17630],{"class":62},[52,19825,19826],{"class":66}," :shapeSdfUrl",[52,19828,70],{"class":58},[52,19830,19831],{"class":73},"\"myLogoUrl\"",[52,19833,105],{"class":58},[43,19835,19837],{"className":360,"code":19836,"language":362,"meta":48,"style":48},"\u003CGlass shapeSdfUrl={myLogoUrl} />\n",[31,19838,19839],{"__ignoreMap":48},[52,19840,19841,19843,19845,19848,19850],{"class":54,"line":55},[52,19842,59],{"class":58},[52,19844,17630],{"class":371},[52,19846,19847],{"class":66}," shapeSdfUrl",[52,19849,70],{"class":231},[52,19851,19852],{"class":58},"{myLogoUrl} />\n",[43,19854,19855],{"className":419,"code":19836,"language":420,"meta":48,"style":48},[31,19856,19857],{"__ignoreMap":48},[52,19858,19859,19861,19863,19865,19867],{"class":54,"line":55},[52,19860,59],{"class":58},[52,19862,17630],{"class":371},[52,19864,19847],{"class":66},[52,19866,70],{"class":231},[52,19868,19852],{"class":58},[43,19870,19871],{"className":419,"code":19836,"language":420,"meta":48,"style":48},[31,19872,19873],{"__ignoreMap":48},[52,19874,19875,19877,19879,19881,19883],{"class":54,"line":55},[52,19876,59],{"class":58},[52,19878,17630],{"class":371},[52,19880,19847],{"class":66},[52,19882,70],{"class":231},[52,19884,19852],{"class":58},[43,19886,19888],{"className":222,"code":19887,"language":224,"meta":48,"style":48},"const shader = await createShader(canvas, {\n components: [\n { type: 'Glass', props: { shapeSdfUrl: 'https://example.com/my-logo.bin' } }\n ]\n})\n",[31,19889,19890,19904,19908,19922,19926],{"__ignoreMap":48},[52,19891,19892,19894,19896,19898,19900,19902],{"class":54,"line":55},[52,19893,1721],{"class":231},[52,19895,1724],{"class":371},[52,19897,1727],{"class":231},[52,19899,1730],{"class":231},[52,19901,1733],{"class":66},[52,19903,1736],{"class":58},[52,19905,19906],{"class":54,"line":80},[52,19907,1751],{"class":58},[52,19909,19910,19912,19914,19917,19920],{"class":54,"line":108},[52,19911,1756],{"class":58},[52,19913,18171],{"class":73},[52,19915,19916],{"class":58},", props: { shapeSdfUrl: ",[52,19918,19919],{"class":73},"'https://example.com/my-logo.bin'",[52,19921,1768],{"class":58},[52,19923,19924],{"class":54,"line":118},[52,19925,1773],{"class":58},[52,19927,19928],{"class":54,"line":594},[52,19929,1778],{"class":58},[156,19931,11864],{},{"title":48,"searchDepth":80,"depth":80,"links":19933},[19934,19935,19959],{"id":17651,"depth":80,"text":17652},{"id":18318,"depth":80,"text":18319,"children":19936},[19937,19939,19941,19943,19945,19947,19949,19951,19953,19955,19957],{"id":18322,"depth":108,"text":19938},"Circle — circleSDF",{"id":18396,"depth":108,"text":19940},"Ellipse — ellipseSDF",{"id":18520,"depth":108,"text":19942},"Polygon — polygonSDF",{"id":18671,"depth":108,"text":19944},"Star — starSDF",{"id":18821,"depth":108,"text":19946},"Flower — flowerSDF",{"id":18972,"depth":108,"text":19948},"Ring — ringSDF",{"id":19071,"depth":108,"text":19950},"Cross — crossSDF",{"id":19221,"depth":108,"text":19952},"Rounded Rectangle — roundedRectSDF",{"id":19365,"depth":108,"text":19954},"Vesica — vesicaSDF",{"id":19493,"depth":108,"text":19956},"Crescent — crescentSDF",{"id":19640,"depth":108,"text":19958},"Trapezoid — trapezoidSDF",{"id":19788,"depth":80,"text":19789},"How to use and configure the built-in shape system","shapes",{},"/docs/guide/shape-effects",{"title":17619,"description":19960},"docs/guide/8.shape-effects","UiYWbvX2HwX3Cm-5eWV79KOJLkVIgz7QULXXdxMzqjI",{"id":19968,"title":13917,"body":19969,"category":1904,"description":20328,"exclude":167,"extension":168,"forceFramework":167,"icon":20329,"meta":20330,"navigation":171,"path":20331,"seo":20332,"stem":20333,"__hash__":20334},"guide/docs/guide/9.performance.md",{"type":8,"value":19970,"toc":20322},[19971,19973,19976,19980,19987,19990,19994,19997,20003,20013,20018,20079,20082,20086,20089,20094,20116,20122,20276,20280,20286,20292,20307,20313,20319],[11,19972,13917],{"id":13916},[15,19974,19975],{},"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.",[23,19977,19979],{"id":19978},"the-frame-budget","The frame budget",[15,19981,19982,19983,19986],{},"At 60fps, the GPU has ",[151,19984,19985],{},"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,19988,19989],{},"The renderer automatically drops to ~1fps when the canvas is scrolled out of the viewport — so effects that aren't visible consume almost nothing.",[23,19991,19993],{"id":19992},"generator-vs-filter-effects","Generator vs. filter effects",[15,19995,19996],{},"Effects fall into two broad categories with very different cost profiles:",[15,19998,19999,20002],{},[151,20000,20001],{},"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,20004,20005,20008,20009,20012],{},[151,20006,20007],{},"Filter/Effect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[151,20010,20011],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,20014,20015],{},[151,20016,20017],{},"Rough cost categories:",[1780,20019,20020,20033],{},[1783,20021,20022],{},[1786,20023,20024,20027,20030],{},[1789,20025,20026],{},"Category",[1789,20028,20029],{},"Examples",[1789,20031,20032],{},"Relative cost",[1796,20034,20035,20046,20057,20068],{},[1786,20036,20037,20040,20043],{},[1801,20038,20039],{},"Very light",[1801,20041,20042],{},"SolidColor, LinearGradient, RadialGradient",[1801,20044,20045],{},"~0–0.1ms",[1786,20047,20048,20051,20054],{},[1801,20049,20050],{},"Light",[1801,20052,20053],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1801,20055,20056],{},"~0.1–0.5ms",[1786,20058,20059,20062,20065],{},[1801,20060,20061],{},"Medium",[1801,20063,20064],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1801,20066,20067],{},"~0.5–2ms",[1786,20069,20070,20073,20076],{},[1801,20071,20072],{},"Heavy",[1801,20074,20075],{},"Glass, GlassTiles, multiple nested RTT effects",[1801,20077,20078],{},"~1-2ms+",[15,20080,20081],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,20083,20085],{"id":20084},"render-to-texture-rtt","Render-to-texture (RTT)",[15,20087,20088],{},"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,20090,20091],{},[151,20092,20093],{},"What triggers RTT:",[1465,20095,20096,20099,20107,20110],{},[1468,20097,20098],{},"Filter/effect components that need input (Blur, Glass, GlassTiles, etc.)",[1468,20100,1825,20101,20103,20104,20106],{},[31,20102,16071],{}," ",[1139,20105,13908],{"href":13907}," on any component (the source layer is RTT'd)",[1468,20108,20109],{},"The masking system when a layer is used as a mask source",[1468,20111,20112,20113,20115],{},"Non-default ",[1139,20114,11889],{"href":13945}," on a component",[15,20117,20118,20121],{},[151,20119,20120],{},"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:",[43,20123,20125],{"className":45,"code":20124,"language":47,"meta":48,"style":48},"\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",[31,20126,20127,20132,20140,20148,20156,20164,20179,20187,20195,20203,20211,20219,20223,20228,20236,20244,20252,20260,20268],{"__ignoreMap":48},[52,20128,20129],{"class":54,"line":55},[52,20130,20131],{"class":559},"\u003C!-- Avoid: three RTT passes in series -->\n",[52,20133,20134,20136,20138],{"class":54,"line":80},[52,20135,59],{"class":58},[52,20137,63],{"class":62},[52,20139,77],{"class":58},[52,20141,20142,20144,20146],{"class":54,"line":108},[52,20143,83],{"class":58},[52,20145,86],{"class":62},[52,20147,105],{"class":58},[52,20149,20150,20152,20154],{"class":54,"line":118},[52,20151,83],{"class":58},[52,20153,3089],{"class":62},[52,20155,77],{"class":58},[52,20157,20158,20160,20162],{"class":54,"line":594},[52,20159,2213],{"class":58},[52,20161,17630],{"class":62},[52,20163,77],{"class":58},[52,20165,20166,20168,20170,20172,20174,20177],{"class":54,"line":600},[52,20167,2476],{"class":58},[52,20169,8640],{"class":62},[52,20171,13981],{"class":66},[52,20173,70],{"class":58},[52,20175,20176],{"class":73},"\"20\"",[52,20178,77],{"class":58},[52,20180,20181,20183,20185],{"class":54,"line":606},[52,20182,7679],{"class":58},[52,20184,2216],{"class":62},[52,20186,105],{"class":58},[52,20188,20189,20191,20193],{"class":54,"line":653},[52,20190,7785],{"class":58},[52,20192,8640],{"class":62},[52,20194,77],{"class":58},[52,20196,20197,20199,20201],{"class":54,"line":662},[52,20198,2491],{"class":58},[52,20200,17630],{"class":62},[52,20202,77],{"class":58},[52,20204,20205,20207,20209],{"class":54,"line":671},[52,20206,2230],{"class":58},[52,20208,3089],{"class":62},[52,20210,77],{"class":58},[52,20212,20213,20215,20217],{"class":54,"line":676},[52,20214,121],{"class":58},[52,20216,63],{"class":62},[52,20218,77],{"class":58},[52,20220,20221],{"class":54,"line":682},[52,20222,597],{"emptyLinePlaceholder":171},[52,20224,20225],{"class":54,"line":698},[52,20226,20227],{"class":559},"\u003C!-- Better: fewer RTT boundaries -->\n",[52,20229,20230,20232,20234],{"class":54,"line":707},[52,20231,59],{"class":58},[52,20233,63],{"class":62},[52,20235,77],{"class":58},[52,20237,20238,20240,20242],{"class":54,"line":2327},[52,20239,83],{"class":58},[52,20241,86],{"class":62},[52,20243,105],{"class":58},[52,20245,20246,20248,20250],{"class":54,"line":6522},[52,20247,83],{"class":58},[52,20249,3089],{"class":62},[52,20251,77],{"class":58},[52,20253,20254,20256,20258],{"class":54,"line":6532},[52,20255,2213],{"class":58},[52,20257,2216],{"class":62},[52,20259,105],{"class":58},[52,20261,20262,20264,20266],{"class":54,"line":6543},[52,20263,2230],{"class":58},[52,20265,3089],{"class":62},[52,20267,77],{"class":58},[52,20269,20270,20272,20274],{"class":54,"line":6548},[52,20271,121],{"class":58},[52,20273,63],{"class":62},[52,20275,77],{"class":58},[23,20277,20279],{"id":20278},"practical-tips","Practical tips",[15,20281,20282,20285],{},[151,20283,20284],{},"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,20287,20288,20291],{},[151,20289,20290],{},"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,20293,20294,20297,20298,20300,20301,20303,20304,20306],{},[151,20295,20296],{},"Invisible layers still cost."," A hidden layer with ",[31,20299,5913],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[31,20302,5540],{}," still renders the layer. Use ",[31,20305,5913],{}," to truly exclude layers you don't need.",[15,20308,20309,20312],{},[151,20310,20311],{},"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,20314,20315,20318],{},[151,20316,20317],{},"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.",[156,20320,20321],{},"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":48,"searchDepth":80,"depth":80,"links":20323},[20324,20325,20326,20327],{"id":19978,"depth":80,"text":19979},{"id":19992,"depth":80,"text":19993},{"id":20084,"depth":80,"text":20085},{"id":20278,"depth":80,"text":20279},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"/docs/guide/performance",{"title":13917,"description":20328},"docs/guide/9.performance","CBj3Z8Zk4h6dwXGq1AOtOkCjEyK5HRjDjSB9VgDuwHw",{"id":20336,"title":178,"body":20337,"category":165,"description":20964,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":20965,"navigation":171,"path":20966,"seo":20967,"stem":20968,"__hash__":20969},"guide/docs/guide/js/1.quickstart.md",{"type":8,"value":20338,"toc":20954},[20339,20343,20346,20350,20362,20366,20372,20403,20405,20412,20504,20506,20512,20514,20522,20624,20631,20655,20657,20664,20756,20760,20769,20889,20896,20902,20906,20913,20927,20930,20932,20951],[11,20340,20342],{"id":20341},"quickstart-javascript","Quickstart (JavaScript)",[15,20344,20345],{},"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.",[23,20347,20349],{"id":20348},"install-the-npm-package","Install the npm package",[43,20351,20352],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,20353,20354],{"__ignoreMap":48},[52,20355,20356,20358,20360],{"class":54,"line":55},[52,20357,199],{"class":66},[52,20359,202],{"class":73},[52,20361,205],{"class":73},[23,20363,20365],{"id":20364},"set-up-a-canvas","Set up a canvas",[15,20367,20368,20369,20371],{},"Create a ",[31,20370,40],{}," element in your HTML and give it a size:",[43,20373,20375],{"className":9752,"code":20374,"language":9754,"meta":48,"style":48},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C/canvas>\n",[31,20376,20377],{"__ignoreMap":48},[52,20378,20379,20381,20383,20385,20387,20390,20392,20394,20397,20399,20401],{"class":54,"line":55},[52,20380,59],{"class":58},[52,20382,9763],{"class":62},[52,20384,5968],{"class":66},[52,20386,70],{"class":58},[52,20388,20389],{"class":73},"\"my-shader\"",[52,20391,613],{"class":66},[52,20393,70],{"class":58},[52,20395,20396],{"class":73},"\"width: 100%; height: 400px;\"",[52,20398,9780],{"class":58},[52,20400,9763],{"class":62},[52,20402,77],{"class":58},[23,20404,293],{"id":292},[15,20406,20407,20408,20411],{},"Import ",[31,20409,20410],{},"createShader",", pass it the canvas and a list of components:",[43,20413,20415],{"className":222,"code":20414,"language":224,"meta":48,"style":48},"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",[31,20416,20417,20427,20431,20449,20453,20467,20471,20487,20496,20500],{"__ignoreMap":48},[52,20418,20419,20421,20423,20425],{"class":54,"line":55},[52,20420,232],{"class":231},[52,20422,8385],{"class":58},[52,20424,238],{"class":231},[52,20426,8390],{"class":73},[52,20428,20429],{"class":54,"line":80},[52,20430,597],{"emptyLinePlaceholder":171},[52,20432,20433,20435,20437,20439,20441,20443,20445,20447],{"class":54,"line":108},[52,20434,1721],{"class":231},[52,20436,2796],{"class":371},[52,20438,1727],{"class":231},[52,20440,2801],{"class":58},[52,20442,2804],{"class":66},[52,20444,2289],{"class":58},[52,20446,9398],{"class":73},[52,20448,2295],{"class":58},[52,20450,20451],{"class":54,"line":118},[52,20452,597],{"emptyLinePlaceholder":171},[52,20454,20455,20457,20459,20461,20463,20465],{"class":54,"line":594},[52,20456,1721],{"class":231},[52,20458,1724],{"class":371},[52,20460,1727],{"class":231},[52,20462,1730],{"class":231},[52,20464,1733],{"class":66},[52,20466,1736],{"class":58},[52,20468,20469],{"class":54,"line":600},[52,20470,1751],{"class":58},[52,20472,20473,20475,20477,20479,20481,20483,20485],{"class":54,"line":606},[52,20474,1756],{"class":58},[52,20476,2126],{"class":73},[52,20478,7036],{"class":58},[52,20480,13805],{"class":73},[52,20482,7042],{"class":58},[52,20484,13810],{"class":73},[52,20486,3436],{"class":58},[52,20488,20489,20491,20494],{"class":54,"line":653},[52,20490,1756],{"class":58},[52,20492,20493],{"class":73},"'CursorTrail'",[52,20495,2129],{"class":58},[52,20497,20498],{"class":54,"line":662},[52,20499,1773],{"class":58},[52,20501,20502],{"class":54,"line":671},[52,20503,1778],{"class":58},[19,20505],{":preset":529},[15,20507,1825,20508,20511],{},[31,20509,20510],{},"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.",[23,20513,544],{"id":543},[15,20515,1825,20516,20518,20519,1540],{},[31,20517,40],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[31,20520,20521],{},"ResizeObserver",[43,20523,20525],{"className":9752,"code":20524,"language":9754,"meta":48,"style":48},"\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",[31,20526,20527,20532,20557,20561,20566,20591,20595,20600],{"__ignoreMap":48},[52,20528,20529],{"class":54,"line":55},[52,20530,20531],{"class":559},"\u003C!-- Fixed size -->\n",[52,20533,20534,20536,20538,20540,20542,20545,20547,20549,20551,20553,20555],{"class":54,"line":80},[52,20535,59],{"class":58},[52,20537,9763],{"class":62},[52,20539,5968],{"class":66},[52,20541,70],{"class":58},[52,20543,20544],{"class":73},"\"shader\"",[52,20546,613],{"class":66},[52,20548,70],{"class":58},[52,20550,927],{"class":73},[52,20552,9780],{"class":58},[52,20554,9763],{"class":62},[52,20556,77],{"class":58},[52,20558,20559],{"class":54,"line":108},[52,20560,597],{"emptyLinePlaceholder":171},[52,20562,20563],{"class":54,"line":118},[52,20564,20565],{"class":559},"\u003C!-- Full viewport -->\n",[52,20567,20568,20570,20572,20574,20576,20578,20580,20582,20585,20587,20589],{"class":54,"line":594},[52,20569,59],{"class":58},[52,20571,9763],{"class":62},[52,20573,5968],{"class":66},[52,20575,70],{"class":58},[52,20577,20544],{"class":73},[52,20579,613],{"class":66},[52,20581,70],{"class":58},[52,20583,20584],{"class":73},"\"width: 100vw; height: 100dvh;\"",[52,20586,9780],{"class":58},[52,20588,9763],{"class":62},[52,20590,77],{"class":58},[52,20592,20593],{"class":54,"line":600},[52,20594,597],{"emptyLinePlaceholder":171},[52,20596,20597],{"class":54,"line":606},[52,20598,20599],{"class":559},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[52,20601,20602,20604,20606,20608,20610,20612,20614,20616,20618,20620,20622],{"class":54,"line":653},[52,20603,59],{"class":58},[52,20605,9763],{"class":62},[52,20607,5968],{"class":66},[52,20609,70],{"class":58},[52,20611,20544],{"class":73},[52,20613,67],{"class":66},[52,20615,70],{"class":58},[52,20617,693],{"class":73},[52,20619,9780],{"class":58},[52,20621,9763],{"class":62},[52,20623,77],{"class":58},[15,20625,20626,20627,20630],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[31,20628,20629],{},"shader.resize()"," to sync:",[43,20632,20634],{"className":222,"code":20633,"language":224,"meta":48,"style":48},"canvas.style.height = '600px'\nshader.resize()\n",[31,20635,20636,20645],{"__ignoreMap":48},[52,20637,20638,20640,20642],{"class":54,"line":55},[52,20639,9415],{"class":58},[52,20641,70],{"class":231},[52,20643,20644],{"class":73}," '600px'\n",[52,20646,20647,20649,20652],{"class":54,"line":80},[52,20648,8476],{"class":58},[52,20650,20651],{"class":66},"resize",[52,20653,20654],{"class":58},"()\n",[23,20656,1134],{"id":1133},[15,20658,20659,20660,20663],{},"Props are passed in the ",[31,20661,20662],{},"props"," object for each component. All prop names are camelCase:",[43,20665,20667],{"className":222,"code":20666,"language":224,"meta":48,"style":48},"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",[31,20668,20669,20683,20687,20691,20699,20703,20713,20723,20732,20740,20744,20748,20752],{"__ignoreMap":48},[52,20670,20671,20673,20675,20677,20679,20681],{"class":54,"line":55},[52,20672,1721],{"class":231},[52,20674,1724],{"class":371},[52,20676,1727],{"class":231},[52,20678,1730],{"class":231},[52,20680,1733],{"class":66},[52,20682,1736],{"class":58},[52,20684,20685],{"class":54,"line":80},[52,20686,1751],{"class":58},[52,20688,20689],{"class":54,"line":108},[52,20690,12576],{"class":58},[52,20692,20693,20695,20697],{"class":54,"line":118},[52,20694,12581],{"class":58},[52,20696,2126],{"class":73},[52,20698,1746],{"class":58},[52,20700,20701],{"class":54,"line":594},[52,20702,12590],{"class":58},[52,20704,20705,20708,20711],{"class":54,"line":600},[52,20706,20707],{"class":58}," colorA: ",[52,20709,20710],{"class":73},"'#ff6b6b'",[52,20712,1746],{"class":58},[52,20714,20715,20718,20721],{"class":54,"line":606},[52,20716,20717],{"class":58}," colorB: ",[52,20719,20720],{"class":73},"'#4ecdc4'",[52,20722,1746],{"class":58},[52,20724,20725,20728,20730],{"class":54,"line":653},[52,20726,20727],{"class":58}," angle: ",[52,20729,1206],{"class":371},[52,20731,1746],{"class":58},[52,20733,20734,20737],{"class":54,"line":662},[52,20735,20736],{"class":58}," colorSpace: ",[52,20738,20739],{"class":73},"'oklch'\n",[52,20741,20742],{"class":54,"line":671},[52,20743,12605],{"class":58},[52,20745,20746],{"class":54,"line":676},[52,20747,12648],{"class":58},[52,20749,20750],{"class":54,"line":682},[52,20751,1773],{"class":58},[52,20753,20754],{"class":54,"line":698},[52,20755,1778],{"class":58},[23,20757,20759],{"id":20758},"updating-at-runtime","Updating at runtime",[15,20761,20762,20763,20765,20766,20768],{},"Assign an ",[31,20764,5924],{}," to any component, then use ",[31,20767,17451],{}," to change its props at any time:",[43,20770,20772],{"className":222,"code":20771,"language":224,"meta":48,"style":48},"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",[31,20773,20774,20788,20792,20817,20821,20825,20829,20834,20867,20885],{"__ignoreMap":48},[52,20775,20776,20778,20780,20782,20784,20786],{"class":54,"line":55},[52,20777,1721],{"class":231},[52,20779,1724],{"class":371},[52,20781,1727],{"class":231},[52,20783,1730],{"class":231},[52,20785,1733],{"class":66},[52,20787,1736],{"class":58},[52,20789,20790],{"class":54,"line":80},[52,20791,1751],{"class":58},[52,20793,20794,20796,20798,20800,20802,20804,20806,20808,20810,20813,20815],{"class":54,"line":108},[52,20795,1756],{"class":58},[52,20797,2126],{"class":73},[52,20799,2872],{"class":58},[52,20801,8443],{"class":73},[52,20803,7036],{"class":58},[52,20805,13805],{"class":73},[52,20807,7042],{"class":58},[52,20809,13810],{"class":73},[52,20811,20812],{"class":58},", angle: ",[52,20814,5540],{"class":371},[52,20816,1768],{"class":58},[52,20818,20819],{"class":54,"line":118},[52,20820,1773],{"class":58},[52,20822,20823],{"class":54,"line":594},[52,20824,1778],{"class":58},[52,20826,20827],{"class":54,"line":600},[52,20828,597],{"emptyLinePlaceholder":171},[52,20830,20831],{"class":54,"line":606},[52,20832,20833],{"class":559},"// Hook up a slider\n",[52,20835,20836,20839,20842,20844,20847,20850,20853,20855,20858,20860,20863,20865],{"class":54,"line":653},[52,20837,20838],{"class":58},"document.",[52,20840,20841],{"class":66},"querySelector",[52,20843,2289],{"class":58},[52,20845,20846],{"class":73},"'#angle-slider'",[52,20848,20849],{"class":58},").",[52,20851,20852],{"class":66},"addEventListener",[52,20854,2289],{"class":58},[52,20856,20857],{"class":73},"'input'",[52,20859,1881],{"class":58},[52,20861,20862],{"class":7698},"e",[52,20864,7701],{"class":231},[52,20866,2904],{"class":58},[52,20868,20869,20871,20873,20875,20877,20879,20882],{"class":54,"line":662},[52,20870,13874],{"class":58},[52,20872,8479],{"class":66},[52,20874,2289],{"class":58},[52,20876,8443],{"class":73},[52,20878,8486],{"class":58},[52,20880,20881],{"class":66},"Number",[52,20883,20884],{"class":58},"(e.target.value) })\n",[52,20886,20887],{"class":54,"line":671},[52,20888,1778],{"class":58},[15,20890,20891,20892,20895],{},"When ",[31,20893,20894],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,20897,20898,20899,20901],{},"Browse the ",[1139,20900,1142],{"href":1141}," for the full prop reference on every component.",[23,20903,20905],{"id":20904},"cleanup","Cleanup",[15,20907,20908,20909,20912],{},"When you're done, call ",[31,20910,20911],{},"destroy()"," to free GPU resources:",[43,20914,20916],{"className":222,"code":20915,"language":224,"meta":48,"style":48},"shader.destroy()\n",[31,20917,20918],{"__ignoreMap":48},[52,20919,20920,20922,20925],{"class":54,"line":55},[52,20921,8476],{"class":58},[52,20923,20924],{"class":66},"destroy",[52,20926,20654],{"class":58},[15,20928,20929],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,20931,1463],{"id":1462},[1465,20933,20934,20938,20942,20947],{},[1468,20935,20936,1474],{},[1139,20937,1473],{"href":1472},[1468,20939,20940,1481],{},[1139,20941,1480],{"href":1479},[1468,20943,20944,20946],{},[1139,20945,13951],{"href":13907}," — animate and mouse-track props declaratively",[1468,20948,20949,1493],{},[1139,20950,1142],{"href":1141},[156,20952,20953],{},"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":48,"searchDepth":80,"depth":80,"links":20955},[20956,20957,20958,20959,20960,20961,20962,20963],{"id":20348,"depth":80,"text":20349},{"id":20364,"depth":80,"text":20365},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":20758,"depth":80,"text":20759},{"id":20904,"depth":80,"text":20905},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"/docs/guide/js/quickstart",{"title":178,"description":20964},"docs/guide/js/1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":20971,"title":178,"body":20972,"category":165,"description":21607,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":21608,"navigation":171,"path":21609,"seo":21610,"stem":21611,"__hash__":21612},"guide/docs/guide/react/1.quickstart.md",{"type":8,"value":20973,"toc":21598},[20974,20978,20982,20984,20996,21000,21014,21016,21019,21073,21075,21082,21084,21097,21231,21245,21247,21250,21322,21329,21558,21563,21567,21571,21579,21581,21595],[11,20975,20977],{"id":20976},"quickstart-react","Quickstart (React)",[20979,20980],"you-tube-embed",{"id":20981},"836NxwU1Wwk",[23,20983,20349],{"id":20348},[43,20985,20986],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,20987,20988],{"__ignoreMap":48},[52,20989,20990,20992,20994],{"class":54,"line":55},[52,20991,199],{"class":66},[52,20993,202],{"class":73},[52,20995,205],{"class":73},[23,20997,20999],{"id":20998},"import-some-components","Import some components",[43,21001,21002],{"className":222,"code":244,"language":224,"meta":48,"style":48},[31,21003,21004],{"__ignoreMap":48},[52,21005,21006,21008,21010,21012],{"class":54,"line":55},[52,21007,232],{"class":231},[52,21009,235],{"class":58},[52,21011,238],{"class":231},[52,21013,257],{"class":73},[23,21015,293],{"id":292},[15,21017,21018],{},"Let's create a very simple shader:",[43,21020,21021],{"className":360,"code":361,"language":362,"meta":48,"style":48},[31,21022,21023,21037,21057,21065],{"__ignoreMap":48},[52,21024,21025,21027,21029,21031,21033,21035],{"class":54,"line":55},[52,21026,59],{"class":58},[52,21028,63],{"class":371},[52,21030,374],{"class":66},[52,21032,70],{"class":231},[52,21034,319],{"class":73},[52,21036,77],{"class":58},[52,21038,21039,21041,21043,21045,21047,21049,21051,21053,21055],{"class":54,"line":80},[52,21040,83],{"class":58},[52,21042,86],{"class":371},[52,21044,89],{"class":66},[52,21046,70],{"class":231},[52,21048,94],{"class":73},[52,21050,97],{"class":66},[52,21052,70],{"class":231},[52,21054,102],{"class":73},[52,21056,105],{"class":58},[52,21058,21059,21061,21063],{"class":54,"line":108},[52,21060,83],{"class":58},[52,21062,113],{"class":371},[52,21064,105],{"class":58},[52,21066,21067,21069,21071],{"class":54,"line":118},[52,21068,121],{"class":58},[52,21070,63],{"class":371},[52,21072,77],{"class":58},[19,21074],{":preset":529},[15,21076,21077,534,21079,21081],{},[31,21078,33],{},[31,21080,40],{}," 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.",[23,21083,544],{"id":543},[15,21085,1825,21086,21088,21089,15404,21092,21094,21095,540],{},[31,21087,40],{}," has no intrinsic size. The ",[31,21090,21091],{},"className",[31,21093,156],{}," you apply to ",[31,21096,33],{},[43,21098,21100],{"className":360,"code":21099,"language":362,"meta":48,"style":48},"{/* 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",[31,21101,21102,21110,21124,21132,21140,21144,21152,21172,21180,21188,21192,21201,21215,21223],{"__ignoreMap":48},[52,21103,21104,21106,21108],{"class":54,"line":55},[52,21105,723],{"class":58},[52,21107,726],{"class":559},[52,21109,729],{"class":58},[52,21111,21112,21114,21116,21118,21120,21122],{"class":54,"line":80},[52,21113,59],{"class":58},[52,21115,63],{"class":371},[52,21117,374],{"class":66},[52,21119,70],{"class":231},[52,21121,573],{"class":73},[52,21123,77],{"class":58},[52,21125,21126,21128,21130],{"class":54,"line":108},[52,21127,83],{"class":58},[52,21129,86],{"class":371},[52,21131,105],{"class":58},[52,21133,21134,21136,21138],{"class":54,"line":118},[52,21135,121],{"class":58},[52,21137,63],{"class":371},[52,21139,77],{"class":58},[52,21141,21142],{"class":54,"line":594},[52,21143,597],{"emptyLinePlaceholder":171},[52,21145,21146,21148,21150],{"class":54,"line":600},[52,21147,723],{"class":58},[52,21149,770],{"class":559},[52,21151,729],{"class":58},[52,21153,21154,21156,21158,21160,21162,21164,21166,21168,21170],{"class":54,"line":606},[52,21155,59],{"class":58},[52,21157,63],{"class":371},[52,21159,613],{"class":66},[52,21161,70],{"class":231},[52,21163,785],{"class":58},[52,21165,788],{"class":73},[52,21167,791],{"class":58},[52,21169,794],{"class":73},[52,21171,797],{"class":58},[52,21173,21174,21176,21178],{"class":54,"line":653},[52,21175,83],{"class":58},[52,21177,86],{"class":371},[52,21179,105],{"class":58},[52,21181,21182,21184,21186],{"class":54,"line":662},[52,21183,121],{"class":58},[52,21185,63],{"class":371},[52,21187,77],{"class":58},[52,21189,21190],{"class":54,"line":671},[52,21191,597],{"emptyLinePlaceholder":171},[52,21193,21194,21196,21199],{"class":54,"line":676},[52,21195,723],{"class":58},[52,21197,21198],{"class":559},"/* Fluid with aspect ratio */",[52,21200,729],{"class":58},[52,21202,21203,21205,21207,21209,21211,21213],{"class":54,"line":682},[52,21204,59],{"class":58},[52,21206,63],{"class":371},[52,21208,374],{"class":66},[52,21210,70],{"class":231},[52,21212,693],{"class":73},[52,21214,77],{"class":58},[52,21216,21217,21219,21221],{"class":54,"line":698},[52,21218,83],{"class":58},[52,21220,86],{"class":371},[52,21222,105],{"class":58},[52,21224,21225,21227,21229],{"class":54,"line":707},[52,21226,121],{"class":58},[52,21228,63],{"class":371},[52,21230,77],{"class":58},[15,21232,21233,21234,15404,21236,21238,21239,21241,21242,21244],{},"Applying a ",[31,21235,21091],{},[31,21237,156],{}," to the ",[31,21240,33],{}," tag is preferred over trying to target the ",[31,21243,40],{}," element directly, as the internal DOM structure may change in the future.",[23,21246,1134],{"id":1133},[15,21248,21249],{},"Pass props directly to configure each component. All props use camelCase:",[43,21251,21252],{"className":360,"code":1235,"language":362,"meta":48,"style":48},[31,21253,21254,21268,21274,21282,21290,21302,21310,21314],{"__ignoreMap":48},[52,21255,21256,21258,21260,21262,21264,21266],{"class":54,"line":55},[52,21257,59],{"class":58},[52,21259,63],{"class":371},[52,21261,374],{"class":66},[52,21263,70],{"class":231},[52,21265,319],{"class":73},[52,21267,77],{"class":58},[52,21269,21270,21272],{"class":54,"line":80},[52,21271,83],{"class":58},[52,21273,1171],{"class":371},[52,21275,21276,21278,21280],{"class":54,"line":108},[52,21277,1176],{"class":66},[52,21279,70],{"class":231},[52,21281,1181],{"class":73},[52,21283,21284,21286,21288],{"class":54,"line":118},[52,21285,1186],{"class":66},[52,21287,70],{"class":231},[52,21289,1191],{"class":73},[52,21291,21292,21294,21296,21298,21300],{"class":54,"line":594},[52,21293,1278],{"class":66},[52,21295,70],{"class":231},[52,21297,723],{"class":58},[52,21299,1206],{"class":371},[52,21301,729],{"class":58},[52,21303,21304,21306,21308],{"class":54,"line":600},[52,21305,1291],{"class":66},[52,21307,70],{"class":231},[52,21309,1219],{"class":73},[52,21311,21312],{"class":54,"line":606},[52,21313,1224],{"class":58},[52,21315,21316,21318,21320],{"class":54,"line":653},[52,21317,121],{"class":58},[52,21319,63],{"class":371},[52,21321,77],{"class":58},[15,21323,21324,21325,21328],{},"Props also accept state — ",[31,21326,21327],{},"useState"," and any other reactive value work exactly as you'd expect:",[43,21330,21332],{"className":360,"code":21331,"language":362,"meta":48,"style":48},"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",[31,21333,21334,21344,21355,21359,21374,21398,21402,21408,21412,21426,21453,21461,21465,21472,21482,21495,21509,21519,21541,21546,21550,21554],{"__ignoreMap":48},[52,21335,21336,21338,21340,21342],{"class":54,"line":55},[52,21337,232],{"class":231},[52,21339,2345],{"class":58},[52,21341,238],{"class":231},[52,21343,2350],{"class":73},[52,21345,21346,21348,21351,21353],{"class":54,"line":80},[52,21347,232],{"class":231},[52,21349,21350],{"class":58}," { Shader, LinearGradient } ",[52,21352,238],{"class":231},[52,21354,257],{"class":73},[52,21356,21357],{"class":54,"line":108},[52,21358,597],{"emptyLinePlaceholder":171},[52,21360,21361,21364,21367,21369,21372],{"class":54,"line":118},[52,21362,21363],{"class":231},"export",[52,21365,21366],{"class":231}," default",[52,21368,8812],{"class":231},[52,21370,21371],{"class":66}," MyShader",[52,21373,2310],{"class":58},[52,21375,21376,21378,21380,21382,21384,21386,21388,21390,21392,21394,21396],{"class":54,"line":594},[52,21377,2368],{"class":231},[52,21379,2371],{"class":58},[52,21381,1199],{"class":371},[52,21383,1881],{"class":58},[52,21385,7639],{"class":371},[52,21387,2382],{"class":58},[52,21389,70],{"class":231},[52,21391,2387],{"class":66},[52,21393,2289],{"class":58},[52,21395,5540],{"class":371},[52,21397,2295],{"class":58},[52,21399,21400],{"class":54,"line":600},[52,21401,597],{"emptyLinePlaceholder":171},[52,21403,21404,21406],{"class":54,"line":606},[52,21405,2402],{"class":231},[52,21407,2405],{"class":58},[52,21409,21410],{"class":54,"line":653},[52,21411,7666],{"class":58},[52,21413,21414,21416,21418,21420,21422,21424],{"class":54,"line":662},[52,21415,2476],{"class":58},[52,21417,63],{"class":371},[52,21419,374],{"class":66},[52,21421,70],{"class":231},[52,21423,319],{"class":73},[52,21425,77],{"class":58},[52,21427,21428,21430,21432,21434,21436,21439,21441,21443,21446,21448,21450],{"class":54,"line":671},[52,21429,7679],{"class":58},[52,21431,86],{"class":371},[52,21433,89],{"class":66},[52,21435,70],{"class":231},[52,21437,21438],{"class":73},"\"#ff6b6b\"",[52,21440,97],{"class":66},[52,21442,70],{"class":231},[52,21444,21445],{"class":73},"\"#4ecdc4\"",[52,21447,7402],{"class":66},[52,21449,70],{"class":231},[52,21451,21452],{"class":58},"{angle} />\n",[52,21454,21455,21457,21459],{"class":54,"line":676},[52,21456,7785],{"class":58},[52,21458,63],{"class":371},[52,21460,77],{"class":58},[52,21462,21463],{"class":54,"line":682},[52,21464,597],{"emptyLinePlaceholder":171},[52,21466,21467,21469],{"class":54,"line":698},[52,21468,2476],{"class":58},[52,21470,21471],{"class":62},"input\n",[52,21473,21474,21477,21479],{"class":54,"line":707},[52,21475,21476],{"class":66}," type",[52,21478,70],{"class":231},[52,21480,21481],{"class":73},"\"range\"\n",[52,21483,21484,21487,21489,21491,21493],{"class":54,"line":2327},[52,21485,21486],{"class":66}," min",[52,21488,70],{"class":231},[52,21490,723],{"class":58},[52,21492,5540],{"class":371},[52,21494,729],{"class":58},[52,21496,21497,21500,21502,21504,21507],{"class":54,"line":6522},[52,21498,21499],{"class":66}," max",[52,21501,70],{"class":231},[52,21503,723],{"class":58},[52,21505,21506],{"class":371},"360",[52,21508,729],{"class":58},[52,21510,21511,21514,21516],{"class":54,"line":6532},[52,21512,21513],{"class":66}," value",[52,21515,70],{"class":231},[52,21517,21518],{"class":58},"{angle}\n",[52,21520,21521,21524,21526,21528,21530,21532,21534,21536,21538],{"class":54,"line":6543},[52,21522,21523],{"class":66}," onChange",[52,21525,70],{"class":231},[52,21527,723],{"class":58},[52,21529,20862],{"class":7698},[52,21531,7701],{"class":231},[52,21533,7693],{"class":66},[52,21535,2289],{"class":58},[52,21537,20881],{"class":66},[52,21539,21540],{"class":58},"(e.target.value))}\n",[52,21542,21543],{"class":54,"line":6548},[52,21544,21545],{"class":58}," />\n",[52,21547,21548],{"class":54,"line":7870},[52,21549,7867],{"class":58},[52,21551,21552],{"class":54,"line":7875},[52,21553,2500],{"class":58},[52,21555,21556],{"class":54,"line":8948},[52,21557,729],{"class":58},[15,21559,20891,21560,21562],{},[31,21561,1199],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,21564,20898,21565,20901],{},[1139,21566,1142],{"href":1141},[23,21568,21570],{"id":21569},"using-with-nextjs-ssr","Using with Next.js / SSR",[15,21572,21573,21574,21578],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[1139,21575,21577],{"href":21576},"/docs/guide/react/ssr","Next.js / SSR"," guide for how to set it up with server-side rendering.",[23,21580,1463],{"id":1462},[1465,21582,21583,21587,21591],{},[1468,21584,21585,1474],{},[1139,21586,1473],{"href":1472},[1468,21588,21589,1481],{},[1139,21590,1480],{"href":1479},[1468,21592,21593,1493],{},[1139,21594,1142],{"href":1141},[156,21596,21597],{},"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":48,"searchDepth":80,"depth":80,"links":21599},[21600,21601,21602,21603,21604,21605,21606],{"id":20348,"depth":80,"text":20349},{"id":20998,"depth":80,"text":20999},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":21569,"depth":80,"text":21570},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with React",{},"/docs/guide/react/quickstart",{"title":178,"description":21607},"docs/guide/react/1.quickstart","eUXTjqH1sSIhKpDvkRJgcK9YGAu0Hqp7qDlza5DLZ5k",{"id":21614,"title":21577,"body":21615,"category":1904,"description":22506,"exclude":167,"extension":168,"forceFramework":167,"icon":22507,"meta":22508,"navigation":171,"path":21576,"seo":22509,"stem":22510,"__hash__":22511},"guide/docs/guide/react/ssr.md",{"type":8,"value":21616,"toc":22497},[21617,21621,21624,21631,21634,21743,21746,21836,21841,21851,21857,21982,21985,21989,21995,22113,22117,22120,22227,22318,22322,22325,22494],[11,21618,21620],{"id":21619},"ssr-with-nextjs-react","SSR with Next.js / React",[15,21622,21623],{},"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.",[23,21625,21627,21628],{"id":21626},"app-router-use-client","App Router: ",[31,21629,21630],{},"'use client'",[15,21632,21633],{},"In Next.js App Router, create a client component wrapper:",[43,21635,21637],{"className":360,"code":21636,"language":362,"meta":48,"style":48},"// 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",[31,21638,21639,21644,21649,21653,21663,21667,21679,21685,21699,21719,21727,21735,21739],{"__ignoreMap":48},[52,21640,21641],{"class":54,"line":55},[52,21642,21643],{"class":559},"// components/MyShader.jsx\n",[52,21645,21646],{"class":54,"line":80},[52,21647,21648],{"class":73},"'use client'\n",[52,21650,21651],{"class":54,"line":108},[52,21652,597],{"emptyLinePlaceholder":171},[52,21654,21655,21657,21659,21661],{"class":54,"line":118},[52,21656,232],{"class":231},[52,21658,235],{"class":58},[52,21660,238],{"class":231},[52,21662,257],{"class":73},[52,21664,21665],{"class":54,"line":594},[52,21666,597],{"emptyLinePlaceholder":171},[52,21668,21669,21671,21673,21675,21677],{"class":54,"line":600},[52,21670,21363],{"class":231},[52,21672,21366],{"class":231},[52,21674,8812],{"class":231},[52,21676,21371],{"class":66},[52,21678,2310],{"class":58},[52,21680,21681,21683],{"class":54,"line":606},[52,21682,2402],{"class":231},[52,21684,2405],{"class":58},[52,21686,21687,21689,21691,21693,21695,21697],{"class":54,"line":653},[52,21688,2213],{"class":58},[52,21690,63],{"class":371},[52,21692,374],{"class":66},[52,21694,70],{"class":231},[52,21696,319],{"class":73},[52,21698,77],{"class":58},[52,21700,21701,21703,21705,21707,21709,21711,21713,21715,21717],{"class":54,"line":662},[52,21702,2476],{"class":58},[52,21704,86],{"class":371},[52,21706,89],{"class":66},[52,21708,70],{"class":231},[52,21710,94],{"class":73},[52,21712,97],{"class":66},[52,21714,70],{"class":231},[52,21716,102],{"class":73},[52,21718,105],{"class":58},[52,21720,21721,21723,21725],{"class":54,"line":671},[52,21722,2476],{"class":58},[52,21724,113],{"class":371},[52,21726,105],{"class":58},[52,21728,21729,21731,21733],{"class":54,"line":676},[52,21730,2491],{"class":58},[52,21732,63],{"class":371},[52,21734,77],{"class":58},[52,21736,21737],{"class":54,"line":682},[52,21738,2500],{"class":58},[52,21740,21741],{"class":54,"line":698},[52,21742,729],{"class":58},[15,21744,21745],{},"Then use it in a Server Component:",[43,21747,21749],{"className":360,"code":21748,"language":362,"meta":48,"style":48},"// 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",[31,21750,21751,21756,21768,21772,21785,21791,21799,21808,21820,21828,21832],{"__ignoreMap":48},[52,21752,21753],{"class":54,"line":55},[52,21754,21755],{"class":559},"// app/page.jsx (Server Component)\n",[52,21757,21758,21760,21763,21765],{"class":54,"line":80},[52,21759,232],{"class":231},[52,21761,21762],{"class":58}," MyShader ",[52,21764,238],{"class":231},[52,21766,21767],{"class":73}," '@/components/MyShader'\n",[52,21769,21770],{"class":54,"line":108},[52,21771,597],{"emptyLinePlaceholder":171},[52,21773,21774,21776,21778,21780,21783],{"class":54,"line":118},[52,21775,21363],{"class":231},[52,21777,21366],{"class":231},[52,21779,8812],{"class":231},[52,21781,21782],{"class":66}," Page",[52,21784,2310],{"class":58},[52,21786,21787,21789],{"class":54,"line":594},[52,21788,2402],{"class":231},[52,21790,2405],{"class":58},[52,21792,21793,21795,21797],{"class":54,"line":600},[52,21794,2213],{"class":58},[52,21796,9511],{"class":62},[52,21798,77],{"class":58},[52,21800,21801,21803,21806],{"class":54,"line":606},[52,21802,2476],{"class":58},[52,21804,21805],{"class":371},"MyShader",[52,21807,105],{"class":58},[52,21809,21810,21812,21814,21816,21818],{"class":54,"line":653},[52,21811,2476],{"class":58},[52,21813,11],{"class":62},[52,21815,9800],{"class":58},[52,21817,11],{"class":62},[52,21819,77],{"class":58},[52,21821,21822,21824,21826],{"class":54,"line":662},[52,21823,2491],{"class":58},[52,21825,9511],{"class":62},[52,21827,77],{"class":58},[52,21829,21830],{"class":54,"line":671},[52,21831,2500],{"class":58},[52,21833,21834],{"class":54,"line":676},[52,21835,729],{"class":58},[15,21837,1825,21838,21840],{},[31,21839,21630],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,21842,21627,21844,21847,21848],{"id":21843},"app-router-nextdynamic-with-ssr-false",[31,21845,21846],{},"next/dynamic"," with ",[31,21849,21850],{},"ssr: false",[15,21852,21853,21854,21856],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[31,21855,21846],{}," to disable SSR:",[43,21858,21860],{"className":360,"code":21859,"language":362,"meta":48,"style":48},"// 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",[31,21861,21862,21867,21879,21883,21897,21915,21924,21928,21932,21944,21950,21958,21966,21974,21978],{"__ignoreMap":48},[52,21863,21864],{"class":54,"line":55},[52,21865,21866],{"class":559},"// app/page.jsx\n",[52,21868,21869,21871,21874,21876],{"class":54,"line":80},[52,21870,232],{"class":231},[52,21872,21873],{"class":58}," dynamic ",[52,21875,238],{"class":231},[52,21877,21878],{"class":73}," 'next/dynamic'\n",[52,21880,21881],{"class":54,"line":108},[52,21882,597],{"emptyLinePlaceholder":171},[52,21884,21885,21887,21889,21891,21894],{"class":54,"line":118},[52,21886,1721],{"class":231},[52,21888,21371],{"class":371},[52,21890,1727],{"class":231},[52,21892,21893],{"class":66}," dynamic",[52,21895,21896],{"class":58},"(\n",[52,21898,21899,21902,21904,21907,21909,21912],{"class":54,"line":594},[52,21900,21901],{"class":58}," () ",[52,21903,2425],{"class":231},[52,21905,21906],{"class":231}," import",[52,21908,2289],{"class":58},[52,21910,21911],{"class":73},"'@/components/MyShader'",[52,21913,21914],{"class":58},"),\n",[52,21916,21917,21920,21922],{"class":54,"line":600},[52,21918,21919],{"class":58}," { ssr: ",[52,21921,2292],{"class":371},[52,21923,12600],{"class":58},[52,21925,21926],{"class":54,"line":606},[52,21927,2295],{"class":58},[52,21929,21930],{"class":54,"line":653},[52,21931,597],{"emptyLinePlaceholder":171},[52,21933,21934,21936,21938,21940,21942],{"class":54,"line":662},[52,21935,21363],{"class":231},[52,21937,21366],{"class":231},[52,21939,8812],{"class":231},[52,21941,21782],{"class":66},[52,21943,2310],{"class":58},[52,21945,21946,21948],{"class":54,"line":671},[52,21947,2402],{"class":231},[52,21949,2405],{"class":58},[52,21951,21952,21954,21956],{"class":54,"line":676},[52,21953,2213],{"class":58},[52,21955,9511],{"class":62},[52,21957,77],{"class":58},[52,21959,21960,21962,21964],{"class":54,"line":682},[52,21961,2476],{"class":58},[52,21963,21805],{"class":371},[52,21965,105],{"class":58},[52,21967,21968,21970,21972],{"class":54,"line":698},[52,21969,2491],{"class":58},[52,21971,9511],{"class":62},[52,21973,77],{"class":58},[52,21975,21976],{"class":54,"line":707},[52,21977,2500],{"class":58},[52,21979,21980],{"class":54,"line":2327},[52,21981,729],{"class":58},[15,21983,21984],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,21986,21988],{"id":21987},"pages-router","Pages Router",[15,21990,21991,21992,21994],{},"In the Pages Router, the same ",[31,21993,21846],{}," approach works:",[43,21996,21998],{"className":360,"code":21997,"language":362,"meta":48,"style":48},"// 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",[31,21999,22000,22005,22015,22019,22031,22046,22054,22058,22062,22075,22081,22089,22097,22105,22109],{"__ignoreMap":48},[52,22001,22002],{"class":54,"line":55},[52,22003,22004],{"class":559},"// pages/index.jsx\n",[52,22006,22007,22009,22011,22013],{"class":54,"line":80},[52,22008,232],{"class":231},[52,22010,21873],{"class":58},[52,22012,238],{"class":231},[52,22014,21878],{"class":73},[52,22016,22017],{"class":54,"line":108},[52,22018,597],{"emptyLinePlaceholder":171},[52,22020,22021,22023,22025,22027,22029],{"class":54,"line":118},[52,22022,1721],{"class":231},[52,22024,21371],{"class":371},[52,22026,1727],{"class":231},[52,22028,21893],{"class":66},[52,22030,21896],{"class":58},[52,22032,22033,22035,22037,22039,22041,22044],{"class":54,"line":594},[52,22034,21901],{"class":58},[52,22036,2425],{"class":231},[52,22038,21906],{"class":231},[52,22040,2289],{"class":58},[52,22042,22043],{"class":73},"'../components/MyShader'",[52,22045,21914],{"class":58},[52,22047,22048,22050,22052],{"class":54,"line":600},[52,22049,21919],{"class":58},[52,22051,2292],{"class":371},[52,22053,12600],{"class":58},[52,22055,22056],{"class":54,"line":606},[52,22057,2295],{"class":58},[52,22059,22060],{"class":54,"line":653},[52,22061,597],{"emptyLinePlaceholder":171},[52,22063,22064,22066,22068,22070,22073],{"class":54,"line":662},[52,22065,21363],{"class":231},[52,22067,21366],{"class":231},[52,22069,8812],{"class":231},[52,22071,22072],{"class":66}," Home",[52,22074,2310],{"class":58},[52,22076,22077,22079],{"class":54,"line":671},[52,22078,2402],{"class":231},[52,22080,2405],{"class":58},[52,22082,22083,22085,22087],{"class":54,"line":676},[52,22084,2213],{"class":58},[52,22086,7439],{"class":62},[52,22088,77],{"class":58},[52,22090,22091,22093,22095],{"class":54,"line":682},[52,22092,2476],{"class":58},[52,22094,21805],{"class":371},[52,22096,105],{"class":58},[52,22098,22099,22101,22103],{"class":54,"line":698},[52,22100,2491],{"class":58},[52,22102,7439],{"class":62},[52,22104,77],{"class":58},[52,22106,22107],{"class":54,"line":707},[52,22108,2500],{"class":58},[52,22110,22111],{"class":54,"line":2327},[52,22112,729],{"class":58},[23,22114,22116],{"id":22115},"in-a-root-layout","In a root layout",[15,22118,22119],{},"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:",[43,22121,22123],{"className":360,"code":22122,"language":362,"meta":48,"style":48},"// 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",[31,22124,22125,22130,22142,22146,22166,22172,22180,22189,22198,22203,22211,22219,22223],{"__ignoreMap":48},[52,22126,22127],{"class":54,"line":55},[52,22128,22129],{"class":559},"// app/layout.jsx\n",[52,22131,22132,22134,22137,22139],{"class":54,"line":80},[52,22133,232],{"class":231},[52,22135,22136],{"class":58}," BackgroundShader ",[52,22138,238],{"class":231},[52,22140,22141],{"class":73}," '@/components/BackgroundShader'\n",[52,22143,22144],{"class":54,"line":108},[52,22145,597],{"emptyLinePlaceholder":171},[52,22147,22148,22150,22152,22154,22157,22160,22163],{"class":54,"line":118},[52,22149,21363],{"class":231},[52,22151,21366],{"class":231},[52,22153,8812],{"class":231},[52,22155,22156],{"class":66}," RootLayout",[52,22158,22159],{"class":58},"({ ",[52,22161,22162],{"class":7698},"children",[52,22164,22165],{"class":58}," }) {\n",[52,22167,22168,22170],{"class":54,"line":594},[52,22169,2402],{"class":231},[52,22171,2405],{"class":58},[52,22173,22174,22176,22178],{"class":54,"line":600},[52,22175,2213],{"class":58},[52,22177,9754],{"class":62},[52,22179,77],{"class":58},[52,22181,22182,22184,22187],{"class":54,"line":606},[52,22183,2476],{"class":58},[52,22185,22186],{"class":62},"body",[52,22188,77],{"class":58},[52,22190,22191,22193,22196],{"class":54,"line":653},[52,22192,7679],{"class":58},[52,22194,22195],{"class":371},"BackgroundShader",[52,22197,105],{"class":58},[52,22199,22200],{"class":54,"line":662},[52,22201,22202],{"class":58}," {children}\n",[52,22204,22205,22207,22209],{"class":54,"line":671},[52,22206,7785],{"class":58},[52,22208,22186],{"class":62},[52,22210,77],{"class":58},[52,22212,22213,22215,22217],{"class":54,"line":676},[52,22214,2491],{"class":58},[52,22216,9754],{"class":62},[52,22218,77],{"class":58},[52,22220,22221],{"class":54,"line":682},[52,22222,2500],{"class":58},[52,22224,22225],{"class":54,"line":698},[52,22226,729],{"class":58},[43,22228,22230],{"className":360,"code":22229,"language":362,"meta":48,"style":48},"// 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",[31,22231,22232,22237,22241,22245,22256,22260,22273,22279,22294,22302,22310,22314],{"__ignoreMap":48},[52,22233,22234],{"class":54,"line":55},[52,22235,22236],{"class":559},"// components/BackgroundShader.jsx\n",[52,22238,22239],{"class":54,"line":80},[52,22240,21648],{"class":73},[52,22242,22243],{"class":54,"line":108},[52,22244,597],{"emptyLinePlaceholder":171},[52,22246,22247,22249,22252,22254],{"class":54,"line":118},[52,22248,232],{"class":231},[52,22250,22251],{"class":58}," { Shader, Aurora } ",[52,22253,238],{"class":231},[52,22255,257],{"class":73},[52,22257,22258],{"class":54,"line":594},[52,22259,597],{"emptyLinePlaceholder":171},[52,22261,22262,22264,22266,22268,22271],{"class":54,"line":600},[52,22263,21363],{"class":231},[52,22265,21366],{"class":231},[52,22267,8812],{"class":231},[52,22269,22270],{"class":66}," BackgroundShader",[52,22272,2310],{"class":58},[52,22274,22275,22277],{"class":54,"line":606},[52,22276,2402],{"class":231},[52,22278,2405],{"class":58},[52,22280,22281,22283,22285,22287,22289,22292],{"class":54,"line":653},[52,22282,2213],{"class":58},[52,22284,63],{"class":371},[52,22286,374],{"class":66},[52,22288,70],{"class":231},[52,22290,22291],{"class":73},"\"fixed inset-0 -z-10 pointer-events-none\"",[52,22293,77],{"class":58},[52,22295,22296,22298,22300],{"class":54,"line":662},[52,22297,2476],{"class":58},[52,22299,9490],{"class":371},[52,22301,105],{"class":58},[52,22303,22304,22306,22308],{"class":54,"line":671},[52,22305,2491],{"class":58},[52,22307,63],{"class":371},[52,22309,77],{"class":58},[52,22311,22312],{"class":54,"line":676},[52,22313,2500],{"class":58},[52,22315,22316],{"class":54,"line":682},[52,22317,729],{"class":58},[23,22319,22321],{"id":22320},"react-without-nextjs","React (without Next.js)",[15,22323,22324],{},"In a React SSR setup without Next.js, use a mounted state guard:",[43,22326,22328],{"className":360,"code":22327,"language":362,"meta":48,"style":48},"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",[31,22329,22330,22341,22351,22355,22367,22393,22397,22407,22418,22422,22426,22446,22450,22456,22470,22478,22486,22490],{"__ignoreMap":48},[52,22331,22332,22334,22337,22339],{"class":54,"line":55},[52,22333,232],{"class":231},[52,22335,22336],{"class":58}," { useState, useEffect } ",[52,22338,238],{"class":231},[52,22340,2350],{"class":73},[52,22342,22343,22345,22347,22349],{"class":54,"line":80},[52,22344,232],{"class":231},[52,22346,21350],{"class":58},[52,22348,238],{"class":231},[52,22350,257],{"class":73},[52,22352,22353],{"class":54,"line":108},[52,22354,597],{"emptyLinePlaceholder":171},[52,22356,22357,22359,22361,22363,22365],{"class":54,"line":118},[52,22358,21363],{"class":231},[52,22360,21366],{"class":231},[52,22362,8812],{"class":231},[52,22364,21371],{"class":66},[52,22366,2310],{"class":58},[52,22368,22369,22371,22373,22376,22378,22381,22383,22385,22387,22389,22391],{"class":54,"line":594},[52,22370,2368],{"class":231},[52,22372,2371],{"class":58},[52,22374,22375],{"class":371},"mounted",[52,22377,1881],{"class":58},[52,22379,22380],{"class":371},"setMounted",[52,22382,2382],{"class":58},[52,22384,70],{"class":231},[52,22386,2387],{"class":66},[52,22388,2289],{"class":58},[52,22390,2292],{"class":371},[52,22392,2295],{"class":58},[52,22394,22395],{"class":54,"line":600},[52,22396,597],{"emptyLinePlaceholder":171},[52,22398,22399,22401,22403,22405],{"class":54,"line":606},[52,22400,13212],{"class":66},[52,22402,12972],{"class":58},[52,22404,2425],{"class":231},[52,22406,2904],{"class":58},[52,22408,22409,22412,22414,22416],{"class":54,"line":653},[52,22410,22411],{"class":66}," setMounted",[52,22413,2289],{"class":58},[52,22415,1996],{"class":371},[52,22417,2295],{"class":58},[52,22419,22420],{"class":54,"line":662},[52,22421,13306],{"class":58},[52,22423,22424],{"class":54,"line":671},[52,22425,597],{"emptyLinePlaceholder":171},[52,22427,22428,22431,22434,22437,22440,22443],{"class":54,"line":676},[52,22429,22430],{"class":231}," if",[52,22432,22433],{"class":58}," (",[52,22435,22436],{"class":231},"!",[52,22438,22439],{"class":58},"mounted) ",[52,22441,22442],{"class":231},"return",[52,22444,22445],{"class":371}," null\n",[52,22447,22448],{"class":54,"line":682},[52,22449,597],{"emptyLinePlaceholder":171},[52,22451,22452,22454],{"class":54,"line":698},[52,22453,2402],{"class":231},[52,22455,2405],{"class":58},[52,22457,22458,22460,22462,22464,22466,22468],{"class":54,"line":707},[52,22459,2213],{"class":58},[52,22461,63],{"class":371},[52,22463,374],{"class":66},[52,22465,70],{"class":231},[52,22467,319],{"class":73},[52,22469,77],{"class":58},[52,22471,22472,22474,22476],{"class":54,"line":2327},[52,22473,2476],{"class":58},[52,22475,86],{"class":371},[52,22477,105],{"class":58},[52,22479,22480,22482,22484],{"class":54,"line":6522},[52,22481,2491],{"class":58},[52,22483,63],{"class":371},[52,22485,77],{"class":58},[52,22487,22488],{"class":54,"line":6532},[52,22489,2500],{"class":58},[52,22491,22492],{"class":54,"line":6543},[52,22493,729],{"class":58},[156,22495,22496],{},"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":48,"searchDepth":80,"depth":80,"links":22498},[22499,22501,22503,22504,22505],{"id":21626,"depth":80,"text":22500},"App Router: 'use client'",{"id":21843,"depth":80,"text":22502},"App Router: next/dynamic with ssr: false",{"id":21987,"depth":80,"text":21988},{"id":22115,"depth":80,"text":22116},{"id":22320,"depth":80,"text":22321},"Using Shaders in Next.js and React SSR applications","server",{},{"title":21577,"description":22506},"docs/guide/react/ssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":22513,"title":178,"body":22514,"category":165,"description":23123,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":23124,"navigation":171,"path":23125,"seo":23126,"stem":23127,"__hash__":23128},"guide/docs/guide/solid/1.quickstart.md",{"type":8,"value":22515,"toc":23114},[22516,22520,22522,22534,22536,22550,22552,22554,22608,22610,22616,22618,22629,22762,22772,22774,22777,22849,22856,23079,23082,23086,23090,23096,23098,23112],[11,22517,22519],{"id":22518},"quickstart-solid","Quickstart (Solid)",[23,22521,20349],{"id":20348},[43,22523,22524],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,22525,22526],{"__ignoreMap":48},[52,22527,22528,22530,22532],{"class":54,"line":55},[52,22529,199],{"class":66},[52,22531,202],{"class":73},[52,22533,205],{"class":73},[23,22535,20999],{"id":20998},[43,22537,22538],{"className":222,"code":276,"language":224,"meta":48,"style":48},[31,22539,22540],{"__ignoreMap":48},[52,22541,22542,22544,22546,22548],{"class":54,"line":55},[52,22543,232],{"class":231},[52,22545,235],{"class":58},[52,22547,238],{"class":231},[52,22549,289],{"class":73},[23,22551,293],{"id":292},[15,22553,21018],{},[43,22555,22556],{"className":419,"code":304,"language":420,"meta":48,"style":48},[31,22557,22558,22572,22592,22600],{"__ignoreMap":48},[52,22559,22560,22562,22564,22566,22568,22570],{"class":54,"line":55},[52,22561,59],{"class":58},[52,22563,63],{"class":371},[52,22565,67],{"class":66},[52,22567,70],{"class":231},[52,22569,319],{"class":73},[52,22571,77],{"class":58},[52,22573,22574,22576,22578,22580,22582,22584,22586,22588,22590],{"class":54,"line":80},[52,22575,83],{"class":58},[52,22577,86],{"class":371},[52,22579,89],{"class":66},[52,22581,70],{"class":231},[52,22583,94],{"class":73},[52,22585,97],{"class":66},[52,22587,70],{"class":231},[52,22589,102],{"class":73},[52,22591,105],{"class":58},[52,22593,22594,22596,22598],{"class":54,"line":108},[52,22595,83],{"class":58},[52,22597,113],{"class":371},[52,22599,105],{"class":58},[52,22601,22602,22604,22606],{"class":54,"line":118},[52,22603,121],{"class":58},[52,22605,63],{"class":371},[52,22607,77],{"class":58},[19,22609],{":preset":529},[15,22611,22612,534,22614,21081],{},[31,22613,33],{},[31,22615,40],{},[23,22617,544],{"id":543},[15,22619,1825,22620,21088,22622,15404,22625,21094,22627,540],{},[31,22621,40],{},[31,22623,22624],{},"class",[31,22626,156],{},[31,22628,33],{},[43,22630,22632],{"className":419,"code":22631,"language":420,"meta":48,"style":48},"{/* 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",[31,22633,22634,22642,22656,22664,22672,22676,22684,22704,22712,22720,22724,22732,22746,22754],{"__ignoreMap":48},[52,22635,22636,22638,22640],{"class":54,"line":55},[52,22637,723],{"class":58},[52,22639,726],{"class":559},[52,22641,729],{"class":58},[52,22643,22644,22646,22648,22650,22652,22654],{"class":54,"line":80},[52,22645,59],{"class":58},[52,22647,63],{"class":371},[52,22649,67],{"class":66},[52,22651,70],{"class":231},[52,22653,573],{"class":73},[52,22655,77],{"class":58},[52,22657,22658,22660,22662],{"class":54,"line":108},[52,22659,83],{"class":58},[52,22661,86],{"class":371},[52,22663,105],{"class":58},[52,22665,22666,22668,22670],{"class":54,"line":118},[52,22667,121],{"class":58},[52,22669,63],{"class":371},[52,22671,77],{"class":58},[52,22673,22674],{"class":54,"line":594},[52,22675,597],{"emptyLinePlaceholder":171},[52,22677,22678,22680,22682],{"class":54,"line":600},[52,22679,723],{"class":58},[52,22681,770],{"class":559},[52,22683,729],{"class":58},[52,22685,22686,22688,22690,22692,22694,22696,22698,22700,22702],{"class":54,"line":606},[52,22687,59],{"class":58},[52,22689,63],{"class":371},[52,22691,613],{"class":66},[52,22693,70],{"class":231},[52,22695,785],{"class":58},[52,22697,788],{"class":73},[52,22699,791],{"class":58},[52,22701,794],{"class":73},[52,22703,797],{"class":58},[52,22705,22706,22708,22710],{"class":54,"line":653},[52,22707,83],{"class":58},[52,22709,86],{"class":371},[52,22711,105],{"class":58},[52,22713,22714,22716,22718],{"class":54,"line":662},[52,22715,121],{"class":58},[52,22717,63],{"class":371},[52,22719,77],{"class":58},[52,22721,22722],{"class":54,"line":671},[52,22723,597],{"emptyLinePlaceholder":171},[52,22725,22726,22728,22730],{"class":54,"line":676},[52,22727,723],{"class":58},[52,22729,21198],{"class":559},[52,22731,729],{"class":58},[52,22733,22734,22736,22738,22740,22742,22744],{"class":54,"line":682},[52,22735,59],{"class":58},[52,22737,63],{"class":371},[52,22739,67],{"class":66},[52,22741,70],{"class":231},[52,22743,693],{"class":73},[52,22745,77],{"class":58},[52,22747,22748,22750,22752],{"class":54,"line":698},[52,22749,83],{"class":58},[52,22751,86],{"class":371},[52,22753,105],{"class":58},[52,22755,22756,22758,22760],{"class":54,"line":707},[52,22757,121],{"class":58},[52,22759,63],{"class":371},[52,22761,77],{"class":58},[15,22763,21233,22764,15404,22766,21238,22768,21241,22770,21244],{},[31,22765,22624],{},[31,22767,156],{},[31,22769,33],{},[31,22771,40],{},[23,22773,1134],{"id":1133},[15,22775,22776],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[43,22778,22779],{"className":419,"code":1310,"language":420,"meta":48,"style":48},[31,22780,22781,22795,22801,22809,22817,22829,22837,22841],{"__ignoreMap":48},[52,22782,22783,22785,22787,22789,22791,22793],{"class":54,"line":55},[52,22784,59],{"class":58},[52,22786,63],{"class":371},[52,22788,67],{"class":66},[52,22790,70],{"class":231},[52,22792,319],{"class":73},[52,22794,77],{"class":58},[52,22796,22797,22799],{"class":54,"line":80},[52,22798,83],{"class":58},[52,22800,1171],{"class":371},[52,22802,22803,22805,22807],{"class":54,"line":108},[52,22804,1176],{"class":66},[52,22806,70],{"class":231},[52,22808,1181],{"class":73},[52,22810,22811,22813,22815],{"class":54,"line":118},[52,22812,1186],{"class":66},[52,22814,70],{"class":231},[52,22816,1191],{"class":73},[52,22818,22819,22821,22823,22825,22827],{"class":54,"line":594},[52,22820,1278],{"class":66},[52,22822,70],{"class":231},[52,22824,723],{"class":58},[52,22826,1206],{"class":371},[52,22828,729],{"class":58},[52,22830,22831,22833,22835],{"class":54,"line":600},[52,22832,1291],{"class":66},[52,22834,70],{"class":231},[52,22836,1219],{"class":73},[52,22838,22839],{"class":54,"line":606},[52,22840,1224],{"class":58},[52,22842,22843,22845,22847],{"class":54,"line":653},[52,22844,121],{"class":58},[52,22846,63],{"class":371},[52,22848,77],{"class":58},[15,22850,22851,22852,22855],{},"Props also accept signals — ",[31,22853,22854],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[43,22857,22859],{"className":419,"code":22858,"language":420,"meta":48,"style":48},"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",[31,22860,22861,22871,22881,22885,22897,22921,22925,22931,22935,22949,22978,22986,22990,22996,23004,23016,23028,23041,23063,23067,23071,23075],{"__ignoreMap":48},[52,22862,22863,22865,22867,22869],{"class":54,"line":55},[52,22864,232],{"class":231},[52,22866,2645],{"class":58},[52,22868,238],{"class":231},[52,22870,2650],{"class":73},[52,22872,22873,22875,22877,22879],{"class":54,"line":80},[52,22874,232],{"class":231},[52,22876,21350],{"class":58},[52,22878,238],{"class":231},[52,22880,289],{"class":73},[52,22882,22883],{"class":54,"line":108},[52,22884,597],{"emptyLinePlaceholder":171},[52,22886,22887,22889,22891,22893,22895],{"class":54,"line":118},[52,22888,21363],{"class":231},[52,22890,21366],{"class":231},[52,22892,8812],{"class":231},[52,22894,21371],{"class":66},[52,22896,2310],{"class":58},[52,22898,22899,22901,22903,22905,22907,22909,22911,22913,22915,22917,22919],{"class":54,"line":594},[52,22900,2368],{"class":231},[52,22902,2371],{"class":58},[52,22904,1199],{"class":371},[52,22906,1881],{"class":58},[52,22908,7639],{"class":371},[52,22910,2382],{"class":58},[52,22912,70],{"class":231},[52,22914,2681],{"class":66},[52,22916,2289],{"class":58},[52,22918,5540],{"class":371},[52,22920,2295],{"class":58},[52,22922,22923],{"class":54,"line":600},[52,22924,597],{"emptyLinePlaceholder":171},[52,22926,22927,22929],{"class":54,"line":606},[52,22928,2402],{"class":231},[52,22930,2405],{"class":58},[52,22932,22933],{"class":54,"line":653},[52,22934,7666],{"class":58},[52,22936,22937,22939,22941,22943,22945,22947],{"class":54,"line":662},[52,22938,2476],{"class":58},[52,22940,63],{"class":371},[52,22942,67],{"class":66},[52,22944,70],{"class":231},[52,22946,319],{"class":73},[52,22948,77],{"class":58},[52,22950,22951,22953,22955,22957,22959,22961,22963,22965,22967,22969,22971,22973,22975],{"class":54,"line":671},[52,22952,7679],{"class":58},[52,22954,86],{"class":371},[52,22956,89],{"class":66},[52,22958,70],{"class":231},[52,22960,21438],{"class":73},[52,22962,97],{"class":66},[52,22964,70],{"class":231},[52,22966,21445],{"class":73},[52,22968,7402],{"class":66},[52,22970,70],{"class":231},[52,22972,723],{"class":58},[52,22974,1199],{"class":66},[52,22976,22977],{"class":58},"()} />\n",[52,22979,22980,22982,22984],{"class":54,"line":676},[52,22981,7785],{"class":58},[52,22983,63],{"class":371},[52,22985,77],{"class":58},[52,22987,22988],{"class":54,"line":682},[52,22989,597],{"emptyLinePlaceholder":171},[52,22991,22992,22994],{"class":54,"line":698},[52,22993,2476],{"class":58},[52,22995,21471],{"class":62},[52,22997,22998,23000,23002],{"class":54,"line":707},[52,22999,21476],{"class":66},[52,23001,70],{"class":231},[52,23003,21481],{"class":73},[52,23005,23006,23008,23010,23012,23014],{"class":54,"line":2327},[52,23007,21486],{"class":66},[52,23009,70],{"class":231},[52,23011,723],{"class":58},[52,23013,5540],{"class":371},[52,23015,729],{"class":58},[52,23017,23018,23020,23022,23024,23026],{"class":54,"line":6522},[52,23019,21499],{"class":66},[52,23021,70],{"class":231},[52,23023,723],{"class":58},[52,23025,21506],{"class":371},[52,23027,729],{"class":58},[52,23029,23030,23032,23034,23036,23038],{"class":54,"line":6532},[52,23031,21513],{"class":66},[52,23033,70],{"class":231},[52,23035,723],{"class":58},[52,23037,1199],{"class":66},[52,23039,23040],{"class":58},"()}\n",[52,23042,23043,23046,23048,23050,23052,23054,23056,23058,23060],{"class":54,"line":6543},[52,23044,23045],{"class":66}," onInput",[52,23047,70],{"class":231},[52,23049,723],{"class":58},[52,23051,20862],{"class":7698},[52,23053,7701],{"class":231},[52,23055,7693],{"class":66},[52,23057,2289],{"class":58},[52,23059,20881],{"class":66},[52,23061,23062],{"class":58},"(e.currentTarget.value))}\n",[52,23064,23065],{"class":54,"line":6548},[52,23066,21545],{"class":58},[52,23068,23069],{"class":54,"line":7870},[52,23070,7867],{"class":58},[52,23072,23073],{"class":54,"line":7875},[52,23074,2500],{"class":58},[52,23076,23077],{"class":54,"line":8948},[52,23078,729],{"class":58},[15,23080,23081],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,23083,20898,23084,20901],{},[1139,23085,1142],{"href":1141},[23,23087,23089],{"id":23088},"using-with-solidstart-ssr","Using with SolidStart / SSR",[15,23091,21573,23092,21578],{},[1139,23093,23095],{"href":23094},"/docs/guide/solid/ssr","SolidStart / SSR",[23,23097,1463],{"id":1462},[1465,23099,23100,23104,23108],{},[1468,23101,23102,1474],{},[1139,23103,1473],{"href":1472},[1468,23105,23106,1481],{},[1139,23107,1480],{"href":1479},[1468,23109,23110,1493],{},[1139,23111,1142],{"href":1141},[156,23113,21597],{},{"title":48,"searchDepth":80,"depth":80,"links":23115},[23116,23117,23118,23119,23120,23121,23122],{"id":20348,"depth":80,"text":20349},{"id":20998,"depth":80,"text":20999},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":23088,"depth":80,"text":23089},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"/docs/guide/solid/quickstart",{"title":178,"description":23123},"docs/guide/solid/1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":23130,"title":23095,"body":23131,"category":1904,"description":23702,"exclude":167,"extension":168,"forceFramework":167,"icon":22507,"meta":23703,"navigation":171,"path":23094,"seo":23704,"stem":23705,"__hash__":23706},"guide/docs/guide/solid/ssr.md",{"type":8,"value":23132,"toc":23693},[23133,23137,23140,23147,23153,23244,23360,23372,23379,23388,23490,23496,23502,23680,23684,23690],[11,23134,23136],{"id":23135},"ssr-with-solidstart-solid","SSR with SolidStart / Solid",[15,23138,23139],{},"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.",[23,23141,23143,23146],{"id":23142},"clientonly-solidstart",[31,23144,23145],{},"clientOnly"," (SolidStart)",[15,23148,23149,23150,23152],{},"SolidStart provides a ",[31,23151,23145],{}," utility that defers a component entirely to the client. This is the recommended approach:",[43,23154,23156],{"className":360,"code":23155,"language":362,"meta":48,"style":48},"// 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",[31,23157,23158,23162,23172,23176,23188,23194,23208,23228,23236,23240],{"__ignoreMap":48},[52,23159,23160],{"class":54,"line":55},[52,23161,21643],{"class":559},[52,23163,23164,23166,23168,23170],{"class":54,"line":80},[52,23165,232],{"class":231},[52,23167,21350],{"class":58},[52,23169,238],{"class":231},[52,23171,289],{"class":73},[52,23173,23174],{"class":54,"line":108},[52,23175,597],{"emptyLinePlaceholder":171},[52,23177,23178,23180,23182,23184,23186],{"class":54,"line":118},[52,23179,21363],{"class":231},[52,23181,21366],{"class":231},[52,23183,8812],{"class":231},[52,23185,21371],{"class":66},[52,23187,2310],{"class":58},[52,23189,23190,23192],{"class":54,"line":594},[52,23191,2402],{"class":231},[52,23193,2405],{"class":58},[52,23195,23196,23198,23200,23202,23204,23206],{"class":54,"line":600},[52,23197,2213],{"class":58},[52,23199,63],{"class":371},[52,23201,67],{"class":66},[52,23203,70],{"class":231},[52,23205,319],{"class":73},[52,23207,77],{"class":58},[52,23209,23210,23212,23214,23216,23218,23220,23222,23224,23226],{"class":54,"line":606},[52,23211,2476],{"class":58},[52,23213,86],{"class":371},[52,23215,89],{"class":66},[52,23217,70],{"class":231},[52,23219,94],{"class":73},[52,23221,97],{"class":66},[52,23223,70],{"class":231},[52,23225,102],{"class":73},[52,23227,105],{"class":58},[52,23229,23230,23232,23234],{"class":54,"line":653},[52,23231,2491],{"class":58},[52,23233,63],{"class":371},[52,23235,77],{"class":58},[52,23237,23238],{"class":54,"line":662},[52,23239,2500],{"class":58},[52,23241,23242],{"class":54,"line":671},[52,23243,729],{"class":58},[43,23245,23247],{"className":360,"code":23246,"language":362,"meta":48,"style":48},"// 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",[31,23248,23249,23254,23266,23270,23294,23298,23310,23316,23324,23332,23344,23352,23356],{"__ignoreMap":48},[52,23250,23251],{"class":54,"line":55},[52,23252,23253],{"class":559},"// routes/index.jsx\n",[52,23255,23256,23258,23261,23263],{"class":54,"line":80},[52,23257,232],{"class":231},[52,23259,23260],{"class":58}," { clientOnly } ",[52,23262,238],{"class":231},[52,23264,23265],{"class":73}," '@solidjs/start'\n",[52,23267,23268],{"class":54,"line":108},[52,23269,597],{"emptyLinePlaceholder":171},[52,23271,23272,23274,23276,23278,23281,23283,23285,23287,23289,23291],{"class":54,"line":118},[52,23273,1721],{"class":231},[52,23275,21371],{"class":371},[52,23277,1727],{"class":231},[52,23279,23280],{"class":66}," clientOnly",[52,23282,12972],{"class":58},[52,23284,2425],{"class":231},[52,23286,21906],{"class":231},[52,23288,2289],{"class":58},[52,23290,22043],{"class":73},[52,23292,23293],{"class":58},"))\n",[52,23295,23296],{"class":54,"line":594},[52,23297,597],{"emptyLinePlaceholder":171},[52,23299,23300,23302,23304,23306,23308],{"class":54,"line":600},[52,23301,21363],{"class":231},[52,23303,21366],{"class":231},[52,23305,8812],{"class":231},[52,23307,21782],{"class":66},[52,23309,2310],{"class":58},[52,23311,23312,23314],{"class":54,"line":606},[52,23313,2402],{"class":231},[52,23315,2405],{"class":58},[52,23317,23318,23320,23322],{"class":54,"line":653},[52,23319,2213],{"class":58},[52,23321,9511],{"class":62},[52,23323,77],{"class":58},[52,23325,23326,23328,23330],{"class":54,"line":662},[52,23327,2476],{"class":58},[52,23329,21805],{"class":371},[52,23331,105],{"class":58},[52,23333,23334,23336,23338,23340,23342],{"class":54,"line":671},[52,23335,2476],{"class":58},[52,23337,11],{"class":62},[52,23339,9800],{"class":58},[52,23341,11],{"class":62},[52,23343,77],{"class":58},[52,23345,23346,23348,23350],{"class":54,"line":676},[52,23347,2491],{"class":58},[52,23349,9511],{"class":62},[52,23351,77],{"class":58},[52,23353,23354],{"class":54,"line":682},[52,23355,2500],{"class":58},[52,23357,23358],{"class":54,"line":698},[52,23359,729],{"class":58},[15,23361,23362,23364,23365,23368,23369,23371],{},[31,23363,23145],{}," wraps the component in a ",[31,23366,23367],{},"Suspense"," boundary and only renders it in the browser — it returns ",[31,23370,13201],{}," during SSR.",[23,23373,23375,23378],{"id":23374},"isserver-guard",[31,23376,23377],{},"isServer"," guard",[15,23380,23381,23382,23384,23385,1540],{},"For finer control, check ",[31,23383,23377],{}," from ",[31,23386,23387],{},"solid-js/web",[43,23389,23391],{"className":360,"code":23390,"language":362,"meta":48,"style":48},"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",[31,23392,23393,23405,23415,23419,23431,23442,23446,23452,23466,23474,23482,23486],{"__ignoreMap":48},[52,23394,23395,23397,23400,23402],{"class":54,"line":55},[52,23396,232],{"class":231},[52,23398,23399],{"class":58}," { isServer } ",[52,23401,238],{"class":231},[52,23403,23404],{"class":73}," 'solid-js/web'\n",[52,23406,23407,23409,23411,23413],{"class":54,"line":80},[52,23408,232],{"class":231},[52,23410,21350],{"class":58},[52,23412,238],{"class":231},[52,23414,289],{"class":73},[52,23416,23417],{"class":54,"line":108},[52,23418,597],{"emptyLinePlaceholder":171},[52,23420,23421,23423,23425,23427,23429],{"class":54,"line":118},[52,23422,21363],{"class":231},[52,23424,21366],{"class":231},[52,23426,8812],{"class":231},[52,23428,21371],{"class":66},[52,23430,2310],{"class":58},[52,23432,23433,23435,23438,23440],{"class":54,"line":594},[52,23434,22430],{"class":231},[52,23436,23437],{"class":58}," (isServer) ",[52,23439,22442],{"class":231},[52,23441,22445],{"class":371},[52,23443,23444],{"class":54,"line":600},[52,23445,597],{"emptyLinePlaceholder":171},[52,23447,23448,23450],{"class":54,"line":606},[52,23449,2402],{"class":231},[52,23451,2405],{"class":58},[52,23453,23454,23456,23458,23460,23462,23464],{"class":54,"line":653},[52,23455,2213],{"class":58},[52,23457,63],{"class":371},[52,23459,67],{"class":66},[52,23461,70],{"class":231},[52,23463,319],{"class":73},[52,23465,77],{"class":58},[52,23467,23468,23470,23472],{"class":54,"line":662},[52,23469,2476],{"class":58},[52,23471,86],{"class":371},[52,23473,105],{"class":58},[52,23475,23476,23478,23480],{"class":54,"line":671},[52,23477,2491],{"class":58},[52,23479,63],{"class":371},[52,23481,77],{"class":58},[52,23483,23484],{"class":54,"line":676},[52,23485,2500],{"class":58},[52,23487,23488],{"class":54,"line":682},[52,23489,729],{"class":58},[23,23491,23493,23378],{"id":23492},"onmount-guard",[31,23494,23495],{},"onMount",[15,23497,23498,23499,23501],{},"Alternatively, use ",[31,23500,23495],{}," with a signal to defer rendering until the component is mounted in the browser:",[43,23503,23505],{"className":360,"code":23504,"language":362,"meta":48,"style":48},"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",[31,23506,23507,23518,23528,23532,23544,23568,23572,23589,23593,23599,23613,23627,23641,23650,23659,23664,23672,23676],{"__ignoreMap":48},[52,23508,23509,23511,23514,23516],{"class":54,"line":55},[52,23510,232],{"class":231},[52,23512,23513],{"class":58}," { createSignal, onMount } ",[52,23515,238],{"class":231},[52,23517,2650],{"class":73},[52,23519,23520,23522,23524,23526],{"class":54,"line":80},[52,23521,232],{"class":231},[52,23523,21350],{"class":58},[52,23525,238],{"class":231},[52,23527,289],{"class":73},[52,23529,23530],{"class":54,"line":108},[52,23531,597],{"emptyLinePlaceholder":171},[52,23533,23534,23536,23538,23540,23542],{"class":54,"line":118},[52,23535,21363],{"class":231},[52,23537,21366],{"class":231},[52,23539,8812],{"class":231},[52,23541,21371],{"class":66},[52,23543,2310],{"class":58},[52,23545,23546,23548,23550,23552,23554,23556,23558,23560,23562,23564,23566],{"class":54,"line":594},[52,23547,2368],{"class":231},[52,23549,2371],{"class":58},[52,23551,22375],{"class":371},[52,23553,1881],{"class":58},[52,23555,22380],{"class":371},[52,23557,2382],{"class":58},[52,23559,70],{"class":231},[52,23561,2681],{"class":66},[52,23563,2289],{"class":58},[52,23565,2292],{"class":371},[52,23567,2295],{"class":58},[52,23569,23570],{"class":54,"line":600},[52,23571,597],{"emptyLinePlaceholder":171},[52,23573,23574,23576,23578,23580,23583,23585,23587],{"class":54,"line":606},[52,23575,13581],{"class":66},[52,23577,12972],{"class":58},[52,23579,2425],{"class":231},[52,23581,23582],{"class":66}," setMounted",[52,23584,2289],{"class":58},[52,23586,1996],{"class":371},[52,23588,23293],{"class":58},[52,23590,23591],{"class":54,"line":653},[52,23592,597],{"emptyLinePlaceholder":171},[52,23594,23595,23597],{"class":54,"line":662},[52,23596,2402],{"class":231},[52,23598,2405],{"class":58},[52,23600,23601,23603,23605,23607,23609,23611],{"class":54,"line":671},[52,23602,2213],{"class":58},[52,23604,7439],{"class":62},[52,23606,67],{"class":66},[52,23608,70],{"class":231},[52,23610,319],{"class":73},[52,23612,77],{"class":58},[52,23614,23615,23618,23620,23622,23625],{"class":54,"line":676},[52,23616,23617],{"class":58}," {",[52,23619,22375],{"class":66},[52,23621,2735],{"class":58},[52,23623,23624],{"class":231},"&&",[52,23626,2405],{"class":58},[52,23628,23629,23631,23633,23635,23637,23639],{"class":54,"line":682},[52,23630,7679],{"class":58},[52,23632,63],{"class":371},[52,23634,67],{"class":66},[52,23636,70],{"class":231},[52,23638,319],{"class":73},[52,23640,77],{"class":58},[52,23642,23643,23646,23648],{"class":54,"line":698},[52,23644,23645],{"class":58}," \u003C",[52,23647,86],{"class":371},[52,23649,105],{"class":58},[52,23651,23652,23655,23657],{"class":54,"line":707},[52,23653,23654],{"class":58}," \u003C/",[52,23656,63],{"class":371},[52,23658,77],{"class":58},[52,23660,23661],{"class":54,"line":2327},[52,23662,23663],{"class":58}," )}\n",[52,23665,23666,23668,23670],{"class":54,"line":6522},[52,23667,2491],{"class":58},[52,23669,7439],{"class":62},[52,23671,77],{"class":58},[52,23673,23674],{"class":54,"line":6532},[52,23675,2500],{"class":58},[52,23677,23678],{"class":54,"line":6543},[52,23679,729],{"class":58},[23,23681,23683],{"id":23682},"solid-without-solidstart","Solid (without SolidStart)",[15,23685,23686,23687,23689],{},"In a Solid app without SolidStart, the ",[31,23688,23495],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[156,23691,23692],{},"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":48,"searchDepth":80,"depth":80,"links":23694},[23695,23697,23699,23701],{"id":23142,"depth":80,"text":23696},"clientOnly (SolidStart)",{"id":23374,"depth":80,"text":23698},"isServer guard",{"id":23492,"depth":80,"text":23700},"onMount guard",{"id":23682,"depth":80,"text":23683},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":23095,"description":23702},"docs/guide/solid/ssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":23708,"title":178,"body":23709,"category":165,"description":24243,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":24244,"navigation":171,"path":24245,"seo":24246,"stem":24247,"__hash__":24248},"guide/docs/guide/svelte/1.quickstart.md",{"type":8,"value":23710,"toc":24234},[23711,23715,23717,23729,23731,23745,23747,23749,23803,23805,23811,23813,23823,23939,23949,23951,23958,24029,24039,24197,24201,24205,24209,24215,24217,24231],[11,23712,23714],{"id":23713},"quickstart-svelte","Quickstart (Svelte)",[23,23716,20349],{"id":20348},[43,23718,23719],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,23720,23721],{"__ignoreMap":48},[52,23722,23723,23725,23727],{"class":54,"line":55},[52,23724,199],{"class":66},[52,23726,202],{"class":73},[52,23728,205],{"class":73},[23,23730,20999],{"id":20998},[43,23732,23733],{"className":222,"code":260,"language":224,"meta":48,"style":48},[31,23734,23735],{"__ignoreMap":48},[52,23736,23737,23739,23741,23743],{"class":54,"line":55},[52,23738,232],{"class":231},[52,23740,235],{"class":58},[52,23742,238],{"class":231},[52,23744,273],{"class":73},[23,23746,293],{"id":292},[15,23748,21018],{},[43,23750,23751],{"className":2507,"code":304,"language":2509,"meta":48,"style":48},[31,23752,23753,23767,23787,23795],{"__ignoreMap":48},[52,23754,23755,23757,23759,23761,23763,23765],{"class":54,"line":55},[52,23756,59],{"class":58},[52,23758,63],{"class":371},[52,23760,67],{"class":66},[52,23762,70],{"class":58},[52,23764,319],{"class":73},[52,23766,77],{"class":58},[52,23768,23769,23771,23773,23775,23777,23779,23781,23783,23785],{"class":54,"line":80},[52,23770,83],{"class":58},[52,23772,86],{"class":371},[52,23774,89],{"class":66},[52,23776,70],{"class":58},[52,23778,94],{"class":73},[52,23780,97],{"class":66},[52,23782,70],{"class":58},[52,23784,102],{"class":73},[52,23786,105],{"class":58},[52,23788,23789,23791,23793],{"class":54,"line":108},[52,23790,83],{"class":58},[52,23792,113],{"class":371},[52,23794,105],{"class":58},[52,23796,23797,23799,23801],{"class":54,"line":118},[52,23798,121],{"class":58},[52,23800,63],{"class":371},[52,23802,77],{"class":58},[19,23804],{":preset":529},[15,23806,23807,534,23809,21081],{},[31,23808,33],{},[31,23810,40],{},[23,23812,544],{"id":543},[15,23814,1825,23815,21088,23817,15404,23819,21094,23821,540],{},[31,23816,40],{},[31,23818,22624],{},[31,23820,156],{},[31,23822,33],{},[43,23824,23826],{"className":2507,"code":23825,"language":2509,"meta":48,"style":48},"\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",[31,23827,23828,23832,23846,23854,23862,23866,23870,23884,23892,23900,23904,23909,23923,23931],{"__ignoreMap":48},[52,23829,23830],{"class":54,"line":55},[52,23831,560],{"class":559},[52,23833,23834,23836,23838,23840,23842,23844],{"class":54,"line":80},[52,23835,59],{"class":58},[52,23837,63],{"class":371},[52,23839,67],{"class":66},[52,23841,70],{"class":58},[52,23843,573],{"class":73},[52,23845,77],{"class":58},[52,23847,23848,23850,23852],{"class":54,"line":108},[52,23849,83],{"class":58},[52,23851,86],{"class":371},[52,23853,105],{"class":58},[52,23855,23856,23858,23860],{"class":54,"line":118},[52,23857,121],{"class":58},[52,23859,63],{"class":371},[52,23861,77],{"class":58},[52,23863,23864],{"class":54,"line":594},[52,23865,597],{"emptyLinePlaceholder":171},[52,23867,23868],{"class":54,"line":600},[52,23869,603],{"class":559},[52,23871,23872,23874,23876,23878,23880,23882],{"class":54,"line":606},[52,23873,59],{"class":58},[52,23875,63],{"class":371},[52,23877,613],{"class":66},[52,23879,70],{"class":58},[52,23881,927],{"class":73},[52,23883,77],{"class":58},[52,23885,23886,23888,23890],{"class":54,"line":653},[52,23887,83],{"class":58},[52,23889,86],{"class":371},[52,23891,105],{"class":58},[52,23893,23894,23896,23898],{"class":54,"line":662},[52,23895,121],{"class":58},[52,23897,63],{"class":371},[52,23899,77],{"class":58},[52,23901,23902],{"class":54,"line":671},[52,23903,597],{"emptyLinePlaceholder":171},[52,23905,23906],{"class":54,"line":676},[52,23907,23908],{"class":559},"\u003C!-- Fluid with aspect ratio -->\n",[52,23910,23911,23913,23915,23917,23919,23921],{"class":54,"line":682},[52,23912,59],{"class":58},[52,23914,63],{"class":371},[52,23916,67],{"class":66},[52,23918,70],{"class":58},[52,23920,693],{"class":73},[52,23922,77],{"class":58},[52,23924,23925,23927,23929],{"class":54,"line":698},[52,23926,83],{"class":58},[52,23928,86],{"class":371},[52,23930,105],{"class":58},[52,23932,23933,23935,23937],{"class":54,"line":707},[52,23934,121],{"class":58},[52,23936,63],{"class":371},[52,23938,77],{"class":58},[15,23940,21233,23941,15404,23943,21238,23945,21241,23947,21244],{},[31,23942,22624],{},[31,23944,156],{},[31,23946,33],{},[31,23948,40],{},[23,23950,1134],{"id":1133},[15,23952,23953,23954,23957],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[31,23955,23956],{},"{expression}"," syntax:",[43,23959,23960],{"className":2507,"code":1310,"language":2509,"meta":48,"style":48},[31,23961,23962,23976,23982,23990,23998,24009,24017,24021],{"__ignoreMap":48},[52,23963,23964,23966,23968,23970,23972,23974],{"class":54,"line":55},[52,23965,59],{"class":58},[52,23967,63],{"class":371},[52,23969,67],{"class":66},[52,23971,70],{"class":58},[52,23973,319],{"class":73},[52,23975,77],{"class":58},[52,23977,23978,23980],{"class":54,"line":80},[52,23979,83],{"class":58},[52,23981,1171],{"class":371},[52,23983,23984,23986,23988],{"class":54,"line":108},[52,23985,1176],{"class":66},[52,23987,70],{"class":58},[52,23989,1181],{"class":73},[52,23991,23992,23994,23996],{"class":54,"line":118},[52,23993,1186],{"class":66},[52,23995,70],{"class":58},[52,23997,1191],{"class":73},[52,23999,24000,24002,24005,24007],{"class":54,"line":594},[52,24001,1278],{"class":66},[52,24003,24004],{"class":58},"={",[52,24006,1206],{"class":371},[52,24008,729],{"class":58},[52,24010,24011,24013,24015],{"class":54,"line":600},[52,24012,1291],{"class":66},[52,24014,70],{"class":58},[52,24016,1219],{"class":73},[52,24018,24019],{"class":54,"line":606},[52,24020,1224],{"class":58},[52,24022,24023,24025,24027],{"class":54,"line":653},[52,24024,121],{"class":58},[52,24026,63],{"class":371},[52,24028,77],{"class":58},[15,24030,24031,24032,24035,24036,24038],{},"Props also accept reactive state — Svelte's ",[31,24033,24034],{},"$state"," rune (or ",[31,24037,12957],{}," in Svelte 4) works exactly as you'd expect:",[43,24040,24042],{"className":2507,"code":24041,"language":2509,"meta":48,"style":48},"\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",[31,24043,24044,24052,24062,24066,24084,24092,24096,24110,24138,24146,24150],{"__ignoreMap":48},[52,24045,24046,24048,24050],{"class":54,"line":55},[52,24047,59],{"class":58},[52,24049,2253],{"class":62},[52,24051,77],{"class":58},[52,24053,24054,24056,24058,24060],{"class":54,"line":80},[52,24055,9829],{"class":231},[52,24057,21350],{"class":58},[52,24059,238],{"class":231},[52,24061,273],{"class":73},[52,24063,24064],{"class":54,"line":108},[52,24065,597],{"emptyLinePlaceholder":171},[52,24067,24068,24070,24072,24074,24076,24078,24080,24082],{"class":54,"line":118},[52,24069,2524],{"class":231},[52,24071,7947],{"class":58},[52,24073,70],{"class":231},[52,24075,2532],{"class":58},[52,24077,2535],{"class":66},[52,24079,2289],{"class":58},[52,24081,5540],{"class":371},[52,24083,2295],{"class":58},[52,24085,24086,24088,24090],{"class":54,"line":594},[52,24087,121],{"class":58},[52,24089,2253],{"class":62},[52,24091,77],{"class":58},[52,24093,24094],{"class":54,"line":600},[52,24095,597],{"emptyLinePlaceholder":171},[52,24097,24098,24100,24102,24104,24106,24108],{"class":54,"line":606},[52,24099,59],{"class":58},[52,24101,63],{"class":371},[52,24103,67],{"class":66},[52,24105,70],{"class":58},[52,24107,319],{"class":73},[52,24109,77],{"class":58},[52,24111,24112,24114,24116,24118,24120,24122,24124,24126,24128,24131,24133,24136],{"class":54,"line":653},[52,24113,83],{"class":58},[52,24115,86],{"class":371},[52,24117,89],{"class":66},[52,24119,70],{"class":58},[52,24121,21438],{"class":73},[52,24123,97],{"class":66},[52,24125,70],{"class":58},[52,24127,21445],{"class":73},[52,24129,24130],{"class":66}," {",[52,24132,1199],{"class":58},[52,24134,24135],{"class":66},"}",[52,24137,105],{"class":58},[52,24139,24140,24142,24144],{"class":54,"line":662},[52,24141,121],{"class":58},[52,24143,63],{"class":371},[52,24145,77],{"class":58},[52,24147,24148],{"class":54,"line":671},[52,24149,597],{"emptyLinePlaceholder":171},[52,24151,24152,24154,24157,24159,24161,24164,24167,24169,24171,24173,24175,24178,24180,24182,24184,24186,24189,24191,24194],{"class":54,"line":676},[52,24153,59],{"class":58},[52,24155,24156],{"class":62},"input",[52,24158,9817],{"class":66},[52,24160,70],{"class":58},[52,24162,24163],{"class":73},"\"range\"",[52,24165,24166],{"class":66}," min",[52,24168,70],{"class":58},[52,24170,618],{"class":73},[52,24172,5540],{"class":371},[52,24174,618],{"class":73},[52,24176,24177],{"class":66}," max",[52,24179,70],{"class":58},[52,24181,618],{"class":73},[52,24183,21506],{"class":371},[52,24185,618],{"class":73},[52,24187,24188],{"class":231}," bind",[52,24190,1540],{"class":58},[52,24192,24193],{"class":66},"value",[52,24195,24196],{"class":58},"={angle} />\n",[15,24198,20891,24199,21562],{},[31,24200,1199],{},[15,24202,20898,24203,20901],{},[1139,24204,1142],{"href":1141},[23,24206,24208],{"id":24207},"using-with-sveltekit-ssr","Using with SvelteKit / SSR",[15,24210,21573,24211,21578],{},[1139,24212,24214],{"href":24213},"/docs/guide/svelte/ssr","SvelteKit / SSR",[23,24216,1463],{"id":1462},[1465,24218,24219,24223,24227],{},[1468,24220,24221,1474],{},[1139,24222,1473],{"href":1472},[1468,24224,24225,1481],{},[1139,24226,1480],{"href":1479},[1468,24228,24229,1493],{},[1139,24230,1142],{"href":1141},[156,24232,24233],{},"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":48,"searchDepth":80,"depth":80,"links":24235},[24236,24237,24238,24239,24240,24241,24242],{"id":20348,"depth":80,"text":20349},{"id":20998,"depth":80,"text":20999},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":24207,"depth":80,"text":24208},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"/docs/guide/svelte/quickstart",{"title":178,"description":24243},"docs/guide/svelte/1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":24250,"title":24214,"body":24251,"category":1904,"description":24839,"exclude":167,"extension":168,"forceFramework":167,"icon":22507,"meta":24840,"navigation":171,"path":24213,"seo":24841,"stem":24842,"__hash__":24843},"guide/docs/guide/svelte/ssr.md",{"type":8,"value":24252,"toc":24831},[24253,24257,24260,24264,24270,24273,24338,24341,24347,24352,24484,24491,24497,24624,24627,24631,24634,24828],[11,24254,24256],{"id":24255},"ssr-with-sveltekit-svelte","SSR with SvelteKit / Svelte",[15,24258,24259],{},"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.",[23,24261,24263],{"id":24262},"the-default-behavior","The default behavior",[15,24265,24266,24267,24269],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[31,24268,33],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,24271,24272],{},"In many cases, you don't need any special handling:",[43,24274,24276],{"className":2507,"code":24275,"language":2509,"meta":48,"style":48},"\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",[31,24277,24278,24286,24296,24304,24308,24322,24330],{"__ignoreMap":48},[52,24279,24280,24282,24284],{"class":54,"line":55},[52,24281,59],{"class":58},[52,24283,2253],{"class":62},[52,24285,77],{"class":58},[52,24287,24288,24290,24292,24294],{"class":54,"line":80},[52,24289,9829],{"class":231},[52,24291,21350],{"class":58},[52,24293,238],{"class":231},[52,24295,273],{"class":73},[52,24297,24298,24300,24302],{"class":54,"line":108},[52,24299,121],{"class":58},[52,24301,2253],{"class":62},[52,24303,77],{"class":58},[52,24305,24306],{"class":54,"line":118},[52,24307,597],{"emptyLinePlaceholder":171},[52,24309,24310,24312,24314,24316,24318,24320],{"class":54,"line":594},[52,24311,59],{"class":58},[52,24313,63],{"class":371},[52,24315,67],{"class":66},[52,24317,70],{"class":58},[52,24319,319],{"class":73},[52,24321,77],{"class":58},[52,24323,24324,24326,24328],{"class":54,"line":600},[52,24325,83],{"class":58},[52,24327,86],{"class":371},[52,24329,105],{"class":58},[52,24331,24332,24334,24336],{"class":54,"line":606},[52,24333,121],{"class":58},[52,24335,63],{"class":371},[52,24337,77],{"class":58},[15,24339,24340],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,24342,24344,24346],{"id":24343},"onmount-for-browser-only-code",[31,24345,23495],{}," for browser-only code",[15,24348,24349,24350,1540],{},"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 ",[31,24351,23495],{},[43,24353,24355],{"className":2507,"code":24354,"language":2509,"meta":48,"style":48},"\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",[31,24356,24357,24365,24377,24387,24391,24398,24402,24412,24417,24428,24432,24440,24444,24468,24476],{"__ignoreMap":48},[52,24358,24359,24361,24363],{"class":54,"line":55},[52,24360,59],{"class":58},[52,24362,2253],{"class":62},[52,24364,77],{"class":58},[52,24366,24367,24369,24372,24374],{"class":54,"line":80},[52,24368,9829],{"class":231},[52,24370,24371],{"class":58}," { onMount } ",[52,24373,238],{"class":231},[52,24375,24376],{"class":73}," 'svelte'\n",[52,24378,24379,24381,24383,24385],{"class":54,"line":108},[52,24380,9829],{"class":231},[52,24382,21350],{"class":58},[52,24384,238],{"class":231},[52,24386,273],{"class":73},[52,24388,24389],{"class":54,"line":118},[52,24390,597],{"emptyLinePlaceholder":171},[52,24392,24393,24395],{"class":54,"line":594},[52,24394,2524],{"class":231},[52,24396,24397],{"class":58}," shaderEl\n",[52,24399,24400],{"class":54,"line":600},[52,24401,597],{"emptyLinePlaceholder":171},[52,24403,24404,24406,24408,24410],{"class":54,"line":606},[52,24405,13581],{"class":66},[52,24407,12972],{"class":58},[52,24409,2425],{"class":231},[52,24411,2904],{"class":58},[52,24413,24414],{"class":54,"line":653},[52,24415,24416],{"class":559}," // Safe to interact with the DOM and canvas here\n",[52,24418,24419,24422,24425],{"class":54,"line":662},[52,24420,24421],{"class":58}," console.",[52,24423,24424],{"class":66},"log",[52,24426,24427],{"class":58},"(shaderEl)\n",[52,24429,24430],{"class":54,"line":671},[52,24431,9876],{"class":58},[52,24433,24434,24436,24438],{"class":54,"line":676},[52,24435,121],{"class":58},[52,24437,2253],{"class":62},[52,24439,77],{"class":58},[52,24441,24442],{"class":54,"line":682},[52,24443,597],{"emptyLinePlaceholder":171},[52,24445,24446,24448,24450,24452,24454,24457,24460,24462,24464,24466],{"class":54,"line":698},[52,24447,59],{"class":58},[52,24449,63],{"class":371},[52,24451,24188],{"class":231},[52,24453,1540],{"class":58},[52,24455,24456],{"class":371},"this",[52,24458,24459],{"class":58},"={shaderEl} ",[52,24461,22624],{"class":66},[52,24463,70],{"class":58},[52,24465,319],{"class":73},[52,24467,77],{"class":58},[52,24469,24470,24472,24474],{"class":54,"line":707},[52,24471,83],{"class":58},[52,24473,86],{"class":371},[52,24475,105],{"class":58},[52,24477,24478,24480,24482],{"class":54,"line":2327},[52,24479,121],{"class":58},[52,24481,63],{"class":371},[52,24483,77],{"class":58},[23,24485,24487,24488],{"id":24486},"conditional-rendering-with-browser","Conditional rendering with ",[31,24489,24490],{},"browser",[15,24492,24493,24494,1540],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[31,24495,24496],{},"$app/environment",[43,24498,24500],{"className":2507,"code":24499,"language":2509,"meta":48,"style":48},"\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",[31,24501,24502,24510,24522,24532,24540,24544,24555,24569,24577,24585,24595,24600,24615],{"__ignoreMap":48},[52,24503,24504,24506,24508],{"class":54,"line":55},[52,24505,59],{"class":58},[52,24507,2253],{"class":62},[52,24509,77],{"class":58},[52,24511,24512,24514,24517,24519],{"class":54,"line":80},[52,24513,9829],{"class":231},[52,24515,24516],{"class":58}," { browser } ",[52,24518,238],{"class":231},[52,24520,24521],{"class":73}," '$app/environment'\n",[52,24523,24524,24526,24528,24530],{"class":54,"line":108},[52,24525,9829],{"class":231},[52,24527,21350],{"class":58},[52,24529,238],{"class":231},[52,24531,273],{"class":73},[52,24533,24534,24536,24538],{"class":54,"line":118},[52,24535,121],{"class":58},[52,24537,2253],{"class":62},[52,24539,77],{"class":58},[52,24541,24542],{"class":54,"line":594},[52,24543,597],{"emptyLinePlaceholder":171},[52,24545,24546,24549,24552],{"class":54,"line":600},[52,24547,24548],{"class":58},"{#",[52,24550,24551],{"class":231},"if",[52,24553,24554],{"class":58}," browser}\n",[52,24556,24557,24559,24561,24563,24565,24567],{"class":54,"line":606},[52,24558,83],{"class":58},[52,24560,63],{"class":371},[52,24562,67],{"class":66},[52,24564,70],{"class":58},[52,24566,319],{"class":73},[52,24568,77],{"class":58},[52,24570,24571,24573,24575],{"class":54,"line":653},[52,24572,2213],{"class":58},[52,24574,86],{"class":371},[52,24576,105],{"class":58},[52,24578,24579,24581,24583],{"class":54,"line":662},[52,24580,2230],{"class":58},[52,24582,63],{"class":371},[52,24584,77],{"class":58},[52,24586,24587,24590,24593],{"class":54,"line":671},[52,24588,24589],{"class":58},"{:",[52,24591,24592],{"class":231},"else",[52,24594,729],{"class":58},[52,24596,24597],{"class":54,"line":676},[52,24598,24599],{"class":559}," \u003C!-- Optional server-rendered placeholder -->\n",[52,24601,24602,24604,24606,24608,24610,24613],{"class":54,"line":682},[52,24603,83],{"class":58},[52,24605,7439],{"class":62},[52,24607,67],{"class":66},[52,24609,70],{"class":58},[52,24611,24612],{"class":73},"\"w-full h-64 bg-gray-900 rounded\"",[52,24614,105],{"class":58},[52,24616,24617,24620,24622],{"class":54,"line":698},[52,24618,24619],{"class":58},"{/",[52,24621,24551],{"class":231},[52,24623,729],{"class":58},[15,24625,24626],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,24628,24630],{"id":24629},"lazy-loading","Lazy loading",[15,24632,24633],{},"To defer loading the Shaders bundle entirely until client-side:",[43,24635,24637],{"className":2507,"code":24636,"language":2509,"meta":48,"style":48},"\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",[31,24638,24639,24647,24657,24661,24668,24675,24679,24694,24723,24733,24743,24747,24755,24759,24768,24793,24808,24820],{"__ignoreMap":48},[52,24640,24641,24643,24645],{"class":54,"line":55},[52,24642,59],{"class":58},[52,24644,2253],{"class":62},[52,24646,77],{"class":58},[52,24648,24649,24651,24653,24655],{"class":54,"line":80},[52,24650,9829],{"class":231},[52,24652,24371],{"class":58},[52,24654,238],{"class":231},[52,24656,24376],{"class":73},[52,24658,24659],{"class":54,"line":108},[52,24660,597],{"emptyLinePlaceholder":171},[52,24662,24663,24665],{"class":54,"line":118},[52,24664,2524],{"class":231},[52,24666,24667],{"class":58}," ShaderComponent\n",[52,24669,24670,24672],{"class":54,"line":594},[52,24671,2524],{"class":231},[52,24673,24674],{"class":58}," LinearGradientComponent\n",[52,24676,24677],{"class":54,"line":600},[52,24678,597],{"emptyLinePlaceholder":171},[52,24680,24681,24683,24685,24688,24690,24692],{"class":54,"line":606},[52,24682,13581],{"class":66},[52,24684,2289],{"class":58},[52,24686,24687],{"class":231},"async",[52,24689,12987],{"class":58},[52,24691,2425],{"class":231},[52,24693,2904],{"class":58},[52,24695,24696,24698,24701,24703,24705,24707,24710,24712,24714,24716,24718,24721],{"class":54,"line":653},[52,24697,13223],{"class":231},[52,24699,24700],{"class":58}," { ",[52,24702,63],{"class":371},[52,24704,1881],{"class":58},[52,24706,86],{"class":371},[52,24708,24709],{"class":58}," } ",[52,24711,70],{"class":231},[52,24713,1730],{"class":231},[52,24715,21906],{"class":231},[52,24717,2289],{"class":58},[52,24719,24720],{"class":73},"'shaders/svelte'",[52,24722,2295],{"class":58},[52,24724,24725,24728,24730],{"class":54,"line":662},[52,24726,24727],{"class":58}," ShaderComponent ",[52,24729,70],{"class":231},[52,24731,24732],{"class":58}," Shader\n",[52,24734,24735,24738,24740],{"class":54,"line":671},[52,24736,24737],{"class":58}," LinearGradientComponent ",[52,24739,70],{"class":231},[52,24741,24742],{"class":58}," LinearGradient\n",[52,24744,24745],{"class":54,"line":676},[52,24746,9876],{"class":58},[52,24748,24749,24751,24753],{"class":54,"line":682},[52,24750,121],{"class":58},[52,24752,2253],{"class":62},[52,24754,77],{"class":58},[52,24756,24757],{"class":54,"line":698},[52,24758,597],{"emptyLinePlaceholder":171},[52,24760,24761,24763,24765],{"class":54,"line":707},[52,24762,24548],{"class":58},[52,24764,24551],{"class":231},[52,24766,24767],{"class":58}," ShaderComponent}\n",[52,24769,24770,24772,24774,24776,24779,24782,24785,24787,24789,24791],{"class":54,"line":2327},[52,24771,83],{"class":58},[52,24773,2509],{"class":231},[52,24775,1540],{"class":58},[52,24777,24778],{"class":62},"component",[52,24780,24781],{"class":66}," this",[52,24783,24784],{"class":58},"={ShaderComponent} ",[52,24786,22624],{"class":66},[52,24788,70],{"class":58},[52,24790,319],{"class":73},[52,24792,77],{"class":58},[52,24794,24795,24797,24799,24801,24803,24805],{"class":54,"line":6522},[52,24796,2213],{"class":58},[52,24798,2509],{"class":231},[52,24800,1540],{"class":58},[52,24802,24778],{"class":62},[52,24804,24781],{"class":66},[52,24806,24807],{"class":58},"={LinearGradientComponent} />\n",[52,24809,24810,24812,24814,24816,24818],{"class":54,"line":6532},[52,24811,2230],{"class":58},[52,24813,2509],{"class":231},[52,24815,1540],{"class":58},[52,24817,24778],{"class":62},[52,24819,77],{"class":58},[52,24821,24822,24824,24826],{"class":54,"line":6543},[52,24823,24619],{"class":58},[52,24825,24551],{"class":231},[52,24827,729],{"class":58},[156,24829,24830],{},"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":48,"searchDepth":80,"depth":80,"links":24832},[24833,24834,24836,24838],{"id":24262,"depth":80,"text":24263},{"id":24343,"depth":80,"text":24835},"onMount for browser-only code",{"id":24486,"depth":80,"text":24837},"Conditional rendering with browser",{"id":24629,"depth":80,"text":24630},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":24214,"description":24839},"docs/guide/svelte/ssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":24845,"title":178,"body":24846,"category":165,"description":25362,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":25363,"navigation":171,"path":25364,"seo":25365,"stem":25366,"__hash__":25367},"guide/docs/guide/vue/1.quickstart.md",{"type":8,"value":24847,"toc":25353},[24848,24852,24854,24866,24868,24882,24884,24886,24940,24942,24948,24950,24957,25071,25078,25080,25086,25157,25160,25330,25334,25338,25342,25348,25350],[11,24849,24851],{"id":24850},"quickstart-vue","Quickstart (Vue)",[23,24853,20349],{"id":20348},[43,24855,24856],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,24857,24858],{"__ignoreMap":48},[52,24859,24860,24862,24864],{"class":54,"line":55},[52,24861,199],{"class":66},[52,24863,202],{"class":73},[52,24865,205],{"class":73},[23,24867,20999],{"id":20998},[43,24869,24870],{"className":222,"code":223,"language":224,"meta":48,"style":48},[31,24871,24872],{"__ignoreMap":48},[52,24873,24874,24876,24878,24880],{"class":54,"line":55},[52,24875,232],{"class":231},[52,24877,235],{"class":58},[52,24879,238],{"class":231},[52,24881,241],{"class":73},[23,24883,293],{"id":292},[15,24885,21018],{},[43,24887,24888],{"className":45,"code":304,"language":47,"meta":48,"style":48},[31,24889,24890,24904,24924,24932],{"__ignoreMap":48},[52,24891,24892,24894,24896,24898,24900,24902],{"class":54,"line":55},[52,24893,59],{"class":58},[52,24895,63],{"class":62},[52,24897,67],{"class":66},[52,24899,70],{"class":58},[52,24901,319],{"class":73},[52,24903,77],{"class":58},[52,24905,24906,24908,24910,24912,24914,24916,24918,24920,24922],{"class":54,"line":80},[52,24907,83],{"class":58},[52,24909,86],{"class":62},[52,24911,89],{"class":66},[52,24913,70],{"class":58},[52,24915,94],{"class":73},[52,24917,97],{"class":66},[52,24919,70],{"class":58},[52,24921,102],{"class":73},[52,24923,105],{"class":58},[52,24925,24926,24928,24930],{"class":54,"line":108},[52,24927,83],{"class":58},[52,24929,113],{"class":62},[52,24931,105],{"class":58},[52,24933,24934,24936,24938],{"class":54,"line":118},[52,24935,121],{"class":58},[52,24937,63],{"class":62},[52,24939,77],{"class":58},[19,24941],{":preset":529},[15,24943,24944,534,24946,21081],{},[31,24945,33],{},[31,24947,40],{},[23,24949,544],{"id":543},[15,24951,1825,24952,24954,24955,540],{},[31,24953,40],{}," has no intrinsic size. The class or style you apply to ",[31,24956,33],{},[43,24958,24959],{"className":45,"code":23825,"language":47,"meta":48,"style":48},[31,24960,24961,24965,24979,24987,24995,24999,25003,25017,25025,25033,25037,25041,25055,25063],{"__ignoreMap":48},[52,24962,24963],{"class":54,"line":55},[52,24964,560],{"class":559},[52,24966,24967,24969,24971,24973,24975,24977],{"class":54,"line":80},[52,24968,59],{"class":58},[52,24970,63],{"class":62},[52,24972,67],{"class":66},[52,24974,70],{"class":58},[52,24976,573],{"class":73},[52,24978,77],{"class":58},[52,24980,24981,24983,24985],{"class":54,"line":108},[52,24982,83],{"class":58},[52,24984,86],{"class":62},[52,24986,105],{"class":58},[52,24988,24989,24991,24993],{"class":54,"line":118},[52,24990,121],{"class":58},[52,24992,63],{"class":62},[52,24994,77],{"class":58},[52,24996,24997],{"class":54,"line":594},[52,24998,597],{"emptyLinePlaceholder":171},[52,25000,25001],{"class":54,"line":600},[52,25002,603],{"class":559},[52,25004,25005,25007,25009,25011,25013,25015],{"class":54,"line":606},[52,25006,59],{"class":58},[52,25008,63],{"class":62},[52,25010,613],{"class":66},[52,25012,70],{"class":58},[52,25014,927],{"class":73},[52,25016,77],{"class":58},[52,25018,25019,25021,25023],{"class":54,"line":653},[52,25020,83],{"class":58},[52,25022,86],{"class":62},[52,25024,105],{"class":58},[52,25026,25027,25029,25031],{"class":54,"line":662},[52,25028,121],{"class":58},[52,25030,63],{"class":62},[52,25032,77],{"class":58},[52,25034,25035],{"class":54,"line":671},[52,25036,597],{"emptyLinePlaceholder":171},[52,25038,25039],{"class":54,"line":676},[52,25040,23908],{"class":559},[52,25042,25043,25045,25047,25049,25051,25053],{"class":54,"line":682},[52,25044,59],{"class":58},[52,25046,63],{"class":62},[52,25048,67],{"class":66},[52,25050,70],{"class":58},[52,25052,693],{"class":73},[52,25054,77],{"class":58},[52,25056,25057,25059,25061],{"class":54,"line":698},[52,25058,83],{"class":58},[52,25060,86],{"class":62},[52,25062,105],{"class":58},[52,25064,25065,25067,25069],{"class":54,"line":707},[52,25066,121],{"class":58},[52,25068,63],{"class":62},[52,25070,77],{"class":58},[15,25072,25073,25074,21241,25076,21244],{},"Applying a class or style to the ",[31,25075,33],{},[31,25077,40],{},[23,25079,1134],{"id":1133},[15,25081,25082,25083,25085],{},"Pass props directly to configure each component. Numeric props use Vue's ",[31,25084,1540],{}," binding syntax, strings can be passed plain:",[43,25087,25089],{"className":45,"code":25088,"language":47,"meta":48,"style":48},"\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",[31,25090,25091,25105,25111,25119,25127,25137,25145,25149],{"__ignoreMap":48},[52,25092,25093,25095,25097,25099,25101,25103],{"class":54,"line":55},[52,25094,59],{"class":58},[52,25096,63],{"class":62},[52,25098,67],{"class":66},[52,25100,70],{"class":58},[52,25102,319],{"class":73},[52,25104,77],{"class":58},[52,25106,25107,25109],{"class":54,"line":80},[52,25108,83],{"class":58},[52,25110,1171],{"class":62},[52,25112,25113,25115,25117],{"class":54,"line":108},[52,25114,16126],{"class":66},[52,25116,70],{"class":58},[52,25118,1181],{"class":73},[52,25120,25121,25123,25125],{"class":54,"line":118},[52,25122,16136],{"class":66},[52,25124,70],{"class":58},[52,25126,1191],{"class":73},[52,25128,25129,25132,25134],{"class":54,"line":594},[52,25130,25131],{"class":66}," :angle",[52,25133,70],{"class":58},[52,25135,25136],{"class":73},"\"45\"\n",[52,25138,25139,25141,25143],{"class":54,"line":600},[52,25140,1214],{"class":66},[52,25142,70],{"class":58},[52,25144,1219],{"class":73},[52,25146,25147],{"class":54,"line":606},[52,25148,1224],{"class":58},[52,25150,25151,25153,25155],{"class":54,"line":653},[52,25152,121],{"class":58},[52,25154,63],{"class":62},[52,25156,77],{"class":58},[15,25158,25159],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[43,25161,25163],{"className":5884,"code":25162,"language":5886,"meta":48,"style":48},"\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",[31,25164,25165,25175,25185,25195,25199,25215,25223,25227,25235,25249,25275,25283,25287,25322],{"__ignoreMap":48},[52,25166,25167,25169,25171,25173],{"class":54,"line":55},[52,25168,59],{"class":58},[52,25170,2253],{"class":62},[52,25172,2256],{"class":66},[52,25174,77],{"class":58},[52,25176,25177,25179,25181,25183],{"class":54,"line":80},[52,25178,232],{"class":231},[52,25180,2265],{"class":58},[52,25182,238],{"class":231},[52,25184,2270],{"class":73},[52,25186,25187,25189,25191,25193],{"class":54,"line":108},[52,25188,232],{"class":231},[52,25190,21350],{"class":58},[52,25192,238],{"class":231},[52,25194,241],{"class":73},[52,25196,25197],{"class":54,"line":118},[52,25198,597],{"emptyLinePlaceholder":171},[52,25200,25201,25203,25205,25207,25209,25211,25213],{"class":54,"line":594},[52,25202,1721],{"class":231},[52,25204,7402],{"class":371},[52,25206,1727],{"class":231},[52,25208,2286],{"class":66},[52,25210,2289],{"class":58},[52,25212,5540],{"class":371},[52,25214,2295],{"class":58},[52,25216,25217,25219,25221],{"class":54,"line":600},[52,25218,121],{"class":58},[52,25220,2253],{"class":62},[52,25222,77],{"class":58},[52,25224,25225],{"class":54,"line":606},[52,25226,597],{"emptyLinePlaceholder":171},[52,25228,25229,25231,25233],{"class":54,"line":653},[52,25230,59],{"class":58},[52,25232,2182],{"class":62},[52,25234,77],{"class":58},[52,25236,25237,25239,25241,25243,25245,25247],{"class":54,"line":662},[52,25238,83],{"class":58},[52,25240,63],{"class":62},[52,25242,67],{"class":66},[52,25244,70],{"class":58},[52,25246,319],{"class":73},[52,25248,77],{"class":58},[52,25250,25251,25253,25255,25257,25259,25261,25263,25265,25267,25269,25271,25273],{"class":54,"line":671},[52,25252,2213],{"class":58},[52,25254,86],{"class":62},[52,25256,16991],{"class":66},[52,25258,70],{"class":58},[52,25260,21438],{"class":73},[52,25262,16998],{"class":66},[52,25264,70],{"class":58},[52,25266,21445],{"class":73},[52,25268,7559],{"class":66},[52,25270,70],{"class":58},[52,25272,7564],{"class":73},[52,25274,105],{"class":58},[52,25276,25277,25279,25281],{"class":54,"line":676},[52,25278,2230],{"class":58},[52,25280,63],{"class":62},[52,25282,77],{"class":58},[52,25284,25285],{"class":54,"line":682},[52,25286,597],{"emptyLinePlaceholder":171},[52,25288,25289,25291,25293,25295,25297,25299,25301,25303,25306,25308,25310,25313,25316,25318,25320],{"class":54,"line":698},[52,25290,83],{"class":58},[52,25292,24156],{"class":62},[52,25294,9817],{"class":66},[52,25296,70],{"class":58},[52,25298,24163],{"class":73},[52,25300,24166],{"class":66},[52,25302,70],{"class":58},[52,25304,25305],{"class":73},"\"0\"",[52,25307,24177],{"class":66},[52,25309,70],{"class":58},[52,25311,25312],{"class":73},"\"360\"",[52,25314,25315],{"class":66}," v-model.number",[52,25317,70],{"class":58},[52,25319,7564],{"class":73},[52,25321,105],{"class":58},[52,25323,25324,25326,25328],{"class":54,"line":707},[52,25325,121],{"class":58},[52,25327,2182],{"class":62},[52,25329,77],{"class":58},[15,25331,20891,25332,21562],{},[31,25333,1199],{},[15,25335,20898,25336,20901],{},[1139,25337,1142],{"href":1141},[23,25339,25341],{"id":25340},"using-with-nuxt-ssr","Using with Nuxt / SSR",[15,25343,21573,25344,21578],{},[1139,25345,25347],{"href":25346},"/docs/guide/vue/ssr","Nuxt / SSR",[23,25349,1463],{"id":1462},[156,25351,25352],{},"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":48,"searchDepth":80,"depth":80,"links":25354},[25355,25356,25357,25358,25359,25360,25361],{"id":20348,"depth":80,"text":20349},{"id":20998,"depth":80,"text":20999},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":25340,"depth":80,"text":25341},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"/docs/guide/vue/quickstart",{"title":178,"description":25362},"docs/guide/vue/1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":25369,"title":25347,"body":25370,"category":1904,"description":26043,"exclude":167,"extension":168,"forceFramework":167,"icon":22507,"meta":26044,"navigation":171,"path":25346,"seo":26045,"stem":26046,"__hash__":26047},"guide/docs/guide/vue/ssr.md",{"type":8,"value":25371,"toc":26036},[25372,25376,25379,25386,25392,25444,25447,25450,25546,25550,25557,25709,25713,25716,25917,25924,26013,26019,26023,26033],[11,25373,25375],{"id":25374},"ssr-with-nuxt-vue","SSR with Nuxt / Vue",[15,25377,25378],{},"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.",[23,25380,25382,25383],{"id":25381},"nuxt-clientonly","Nuxt: ",[31,25384,25385],{},"\u003CClientOnly>",[15,25387,25388,25389,25391],{},"Nuxt provides a built-in ",[31,25390,25385],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[43,25393,25395],{"className":45,"code":25394,"language":47,"meta":48,"style":48},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n\u003C/ClientOnly>\n",[31,25396,25397,25406,25420,25428,25436],{"__ignoreMap":48},[52,25398,25399,25401,25404],{"class":54,"line":55},[52,25400,59],{"class":58},[52,25402,25403],{"class":62},"ClientOnly",[52,25405,77],{"class":58},[52,25407,25408,25410,25412,25414,25416,25418],{"class":54,"line":80},[52,25409,83],{"class":58},[52,25411,63],{"class":62},[52,25413,67],{"class":66},[52,25415,70],{"class":58},[52,25417,319],{"class":73},[52,25419,77],{"class":58},[52,25421,25422,25424,25426],{"class":54,"line":108},[52,25423,2213],{"class":58},[52,25425,86],{"class":62},[52,25427,105],{"class":58},[52,25429,25430,25432,25434],{"class":54,"line":118},[52,25431,2230],{"class":58},[52,25433,63],{"class":62},[52,25435,77],{"class":58},[52,25437,25438,25440,25442],{"class":54,"line":594},[52,25439,121],{"class":58},[52,25441,25403],{"class":62},[52,25443,77],{"class":58},[15,25445,25446],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,25448,25449],{},"You can add a placeholder slot to show something while the client-side shader loads:",[43,25451,25453],{"className":45,"code":25452,"language":47,"meta":48,"style":48},"\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",[31,25454,25455,25463,25477,25485,25493,25497,25511,25530,25538],{"__ignoreMap":48},[52,25456,25457,25459,25461],{"class":54,"line":55},[52,25458,59],{"class":58},[52,25460,25403],{"class":62},[52,25462,77],{"class":58},[52,25464,25465,25467,25469,25471,25473,25475],{"class":54,"line":80},[52,25466,83],{"class":58},[52,25468,63],{"class":62},[52,25470,67],{"class":66},[52,25472,70],{"class":58},[52,25474,319],{"class":73},[52,25476,77],{"class":58},[52,25478,25479,25481,25483],{"class":54,"line":108},[52,25480,2213],{"class":58},[52,25482,86],{"class":62},[52,25484,105],{"class":58},[52,25486,25487,25489,25491],{"class":54,"line":118},[52,25488,2230],{"class":58},[52,25490,63],{"class":62},[52,25492,77],{"class":58},[52,25494,25495],{"class":54,"line":594},[52,25496,597],{"emptyLinePlaceholder":171},[52,25498,25499,25501,25503,25506,25509],{"class":54,"line":600},[52,25500,83],{"class":58},[52,25502,2182],{"class":62},[52,25504,25505],{"class":58}," #",[52,25507,25508],{"class":66},"fallback",[52,25510,77],{"class":58},[52,25512,25513,25515,25517,25519,25521,25524,25528],{"class":54,"line":606},[52,25514,2213],{"class":58},[52,25516,7439],{"class":62},[52,25518,67],{"class":66},[52,25520,70],{"class":58},[52,25522,25523],{"class":73},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[52,25525,25527],{"class":25526},"s6RL2"," /",[52,25529,77],{"class":58},[52,25531,25532,25534,25536],{"class":54,"line":653},[52,25533,2230],{"class":58},[52,25535,2182],{"class":62},[52,25537,77],{"class":58},[52,25539,25540,25542,25544],{"class":54,"line":662},[52,25541,121],{"class":58},[52,25543,25403],{"class":62},[52,25545,77],{"class":58},[23,25547,25549],{"id":25548},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,25551,25552,25553,25556],{},"If you're using Vue SSR without Nuxt, use ",[31,25554,25555],{},"v-if"," with a mounted flag:",[43,25558,25560],{"className":5884,"code":25559,"language":5886,"meta":48,"style":48},"\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",[31,25561,25562,25572,25583,25587,25604,25621,25629,25633,25641,25655,25677,25685,25693,25701],{"__ignoreMap":48},[52,25563,25564,25566,25568,25570],{"class":54,"line":55},[52,25565,59],{"class":58},[52,25567,2253],{"class":62},[52,25569,2256],{"class":66},[52,25571,77],{"class":58},[52,25573,25574,25576,25579,25581],{"class":54,"line":80},[52,25575,232],{"class":231},[52,25577,25578],{"class":58}," { ref, onMounted } ",[52,25580,238],{"class":231},[52,25582,2270],{"class":73},[52,25584,25585],{"class":54,"line":108},[52,25586,597],{"emptyLinePlaceholder":171},[52,25588,25589,25591,25594,25596,25598,25600,25602],{"class":54,"line":118},[52,25590,1721],{"class":231},[52,25592,25593],{"class":371}," isMounted",[52,25595,1727],{"class":231},[52,25597,2286],{"class":66},[52,25599,2289],{"class":58},[52,25601,2292],{"class":371},[52,25603,2295],{"class":58},[52,25605,25606,25608,25610,25612,25615,25617,25619],{"class":54,"line":594},[52,25607,12969],{"class":66},[52,25609,12972],{"class":58},[52,25611,2425],{"class":231},[52,25613,25614],{"class":58}," { isMounted.value ",[52,25616,70],{"class":231},[52,25618,2574],{"class":371},[52,25620,8491],{"class":58},[52,25622,25623,25625,25627],{"class":54,"line":600},[52,25624,121],{"class":58},[52,25626,2253],{"class":62},[52,25628,77],{"class":58},[52,25630,25631],{"class":54,"line":606},[52,25632,597],{"emptyLinePlaceholder":171},[52,25634,25635,25637,25639],{"class":54,"line":653},[52,25636,59],{"class":58},[52,25638,2182],{"class":62},[52,25640,77],{"class":58},[52,25642,25643,25645,25647,25649,25651,25653],{"class":54,"line":662},[52,25644,83],{"class":58},[52,25646,7439],{"class":62},[52,25648,67],{"class":66},[52,25650,70],{"class":58},[52,25652,319],{"class":73},[52,25654,77],{"class":58},[52,25656,25657,25659,25661,25664,25666,25669,25671,25673,25675],{"class":54,"line":671},[52,25658,2213],{"class":58},[52,25660,63],{"class":62},[52,25662,25663],{"class":66}," v-if",[52,25665,70],{"class":58},[52,25667,25668],{"class":73},"\"isMounted\"",[52,25670,67],{"class":66},[52,25672,70],{"class":58},[52,25674,319],{"class":73},[52,25676,77],{"class":58},[52,25678,25679,25681,25683],{"class":54,"line":676},[52,25680,2476],{"class":58},[52,25682,86],{"class":62},[52,25684,105],{"class":58},[52,25686,25687,25689,25691],{"class":54,"line":682},[52,25688,2491],{"class":58},[52,25690,63],{"class":62},[52,25692,77],{"class":58},[52,25694,25695,25697,25699],{"class":54,"line":698},[52,25696,2230],{"class":58},[52,25698,7439],{"class":62},[52,25700,77],{"class":58},[52,25702,25703,25705,25707],{"class":54,"line":707},[52,25704,121],{"class":58},[52,25706,2182],{"class":62},[52,25708,77],{"class":58},[23,25710,25712],{"id":25711},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,25714,25715],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[43,25717,25719],{"className":5884,"code":25718,"language":5886,"meta":48,"style":48},"\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",[31,25720,25721,25731,25742,25746,25762,25778,25782,25787,25825,25859,25867,25871,25879,25893,25901,25909],{"__ignoreMap":48},[52,25722,25723,25725,25727,25729],{"class":54,"line":55},[52,25724,59],{"class":58},[52,25726,2253],{"class":62},[52,25728,2256],{"class":66},[52,25730,77],{"class":58},[52,25732,25733,25735,25738,25740],{"class":54,"line":80},[52,25734,232],{"class":231},[52,25736,25737],{"class":58}," { defineAsyncComponent, ref, onMounted } ",[52,25739,238],{"class":231},[52,25741,2270],{"class":73},[52,25743,25744],{"class":54,"line":108},[52,25745,597],{"emptyLinePlaceholder":171},[52,25747,25748,25750,25752,25754,25756,25758,25760],{"class":54,"line":118},[52,25749,1721],{"class":231},[52,25751,25593],{"class":371},[52,25753,1727],{"class":231},[52,25755,2286],{"class":66},[52,25757,2289],{"class":58},[52,25759,2292],{"class":371},[52,25761,2295],{"class":58},[52,25763,25764,25766,25768,25770,25772,25774,25776],{"class":54,"line":594},[52,25765,12969],{"class":66},[52,25767,12972],{"class":58},[52,25769,2425],{"class":231},[52,25771,25614],{"class":58},[52,25773,70],{"class":231},[52,25775,2574],{"class":371},[52,25777,8491],{"class":58},[52,25779,25780],{"class":54,"line":600},[52,25781,597],{"emptyLinePlaceholder":171},[52,25783,25784],{"class":54,"line":606},[52,25785,25786],{"class":559},"// Lazy-load shader components — only fetched client-side when rendered\n",[52,25788,25789,25791,25794,25796,25799,25801,25803,25805,25807,25810,25812,25815,25817,25820,25822],{"class":54,"line":653},[52,25790,1721],{"class":231},[52,25792,25793],{"class":371}," Shader",[52,25795,1727],{"class":231},[52,25797,25798],{"class":66}," defineAsyncComponent",[52,25800,12972],{"class":58},[52,25802,2425],{"class":231},[52,25804,21906],{"class":231},[52,25806,2289],{"class":58},[52,25808,25809],{"class":73},"'shaders/vue'",[52,25811,20849],{"class":58},[52,25813,25814],{"class":66},"then",[52,25816,2289],{"class":58},[52,25818,25819],{"class":7698},"m",[52,25821,7701],{"class":231},[52,25823,25824],{"class":58}," m.Shader))\n",[52,25826,25827,25829,25832,25834,25836,25838,25840,25842,25844,25846,25848,25850,25852,25854,25856],{"class":54,"line":662},[52,25828,1721],{"class":231},[52,25830,25831],{"class":371}," LinearGradient",[52,25833,1727],{"class":231},[52,25835,25798],{"class":66},[52,25837,12972],{"class":58},[52,25839,2425],{"class":231},[52,25841,21906],{"class":231},[52,25843,2289],{"class":58},[52,25845,25809],{"class":73},[52,25847,20849],{"class":58},[52,25849,25814],{"class":66},[52,25851,2289],{"class":58},[52,25853,25819],{"class":7698},[52,25855,7701],{"class":231},[52,25857,25858],{"class":58}," m.LinearGradient))\n",[52,25860,25861,25863,25865],{"class":54,"line":671},[52,25862,121],{"class":58},[52,25864,2253],{"class":62},[52,25866,77],{"class":58},[52,25868,25869],{"class":54,"line":676},[52,25870,597],{"emptyLinePlaceholder":171},[52,25872,25873,25875,25877],{"class":54,"line":682},[52,25874,59],{"class":58},[52,25876,2182],{"class":62},[52,25878,77],{"class":58},[52,25880,25881,25883,25885,25887,25889,25891],{"class":54,"line":698},[52,25882,83],{"class":58},[52,25884,63],{"class":62},[52,25886,25663],{"class":66},[52,25888,70],{"class":58},[52,25890,25668],{"class":73},[52,25892,77],{"class":58},[52,25894,25895,25897,25899],{"class":54,"line":707},[52,25896,2213],{"class":58},[52,25898,86],{"class":62},[52,25900,105],{"class":58},[52,25902,25903,25905,25907],{"class":54,"line":2327},[52,25904,2230],{"class":58},[52,25906,63],{"class":62},[52,25908,77],{"class":58},[52,25910,25911,25913,25915],{"class":54,"line":6522},[52,25912,121],{"class":58},[52,25914,2182],{"class":62},[52,25916,77],{"class":58},[15,25918,25919,25920,25923],{},"Or in Nuxt, use ",[31,25921,25922],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[43,25925,25927],{"className":222,"code":25926,"language":224,"meta":48,"style":48},"// 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",[31,25928,25929,25934,25946,25956,25960,25981,25996,26009],{"__ignoreMap":48},[52,25930,25931],{"class":54,"line":55},[52,25932,25933],{"class":559},"// plugins/shaders.client.ts\n",[52,25935,25936,25938,25941,25943],{"class":54,"line":80},[52,25937,232],{"class":231},[52,25939,25940],{"class":58}," { defineNuxtPlugin } ",[52,25942,238],{"class":231},[52,25944,25945],{"class":73}," '#app'\n",[52,25947,25948,25950,25952,25954],{"class":54,"line":108},[52,25949,232],{"class":231},[52,25951,21350],{"class":58},[52,25953,238],{"class":231},[52,25955,241],{"class":73},[52,25957,25958],{"class":54,"line":118},[52,25959,597],{"emptyLinePlaceholder":171},[52,25961,25962,25964,25966,25969,25972,25975,25977,25979],{"class":54,"line":594},[52,25963,21363],{"class":231},[52,25965,21366],{"class":231},[52,25967,25968],{"class":66}," defineNuxtPlugin",[52,25970,25971],{"class":58},"((",[52,25973,25974],{"class":7698},"nuxtApp",[52,25976,8871],{"class":58},[52,25978,2425],{"class":231},[52,25980,2904],{"class":58},[52,25982,25983,25986,25988,25990,25993],{"class":54,"line":600},[52,25984,25985],{"class":58}," nuxtApp.vueApp.",[52,25987,24778],{"class":66},[52,25989,2289],{"class":58},[52,25991,25992],{"class":73},"'Shader'",[52,25994,25995],{"class":58},", Shader)\n",[52,25997,25998,26000,26002,26004,26006],{"class":54,"line":606},[52,25999,25985],{"class":58},[52,26001,24778],{"class":66},[52,26003,2289],{"class":58},[52,26005,2126],{"class":73},[52,26007,26008],{"class":58},", LinearGradient)\n",[52,26010,26011],{"class":54,"line":653},[52,26012,1778],{"class":58},[15,26014,1825,26015,26018],{},[31,26016,26017],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,26020,26022],{"id":26021},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,26024,1825,26025,9123,26027,26029,26030,26032],{},[31,26026,33],{},[31,26028,40],{}," 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 ",[31,26031,25385],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[156,26034,26035],{},"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":48,"searchDepth":80,"depth":80,"links":26037},[26038,26040,26041,26042],{"id":25381,"depth":80,"text":26039},"Nuxt: \u003CClientOnly>",{"id":25548,"depth":80,"text":25549},{"id":25711,"depth":80,"text":25712},{"id":26021,"depth":80,"text":26022},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":25347,"description":26043},"docs/guide/vue/ssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[26049,26391,26669,26927,27127,27327,27660,27937,28271,28547,28823,29022,29327,29603,29893,30225,30425,30701,30994,31287,31564,31944,32198,32398,32731,33007,33250,33619,33895,34140,34414,34614,34890,35090,35366,35659,35859,36135,36409,36740,37072,37403,37659,37929,38174,38550,38821,39097,39297,39573,39773,40043,40319,40574,40906,41104,41482,41757,41957,42250,42526,42802,43078,43333,43711,44003,44336,44668,44924,45256,45548,45748,45993,46324,46600,46980,47180,47425,47701,47945,48277,48477,48769,48969,49244,49444,49691,49890,50222,50545,50790,51066,51266,51598,51890,52223,52423,52837,53037,53313,53513,53713],{"id":26050,"title":26051,"body":26052,"category":26385,"componentType":20007,"description":26059,"extension":168,"meta":26386,"navigation":171,"path":26387,"requiresChild":171,"seo":26388,"stem":26389,"__hash__":26390},"components/docs/components/AngularBlur.md","AngularBlur",{"type":8,"value":26053,"toc":26381},[26054,26057,26060,26063,26066,26070,26074,26379],[11,26055,26051],{"id":26056},"angularblur",[15,26058,26059],{},"Radial motion blur rotating around a center point",[26061,26062],"shader-preview",{"component":26051},[23,26064,26065],{"id":20662},"Props",[26067,26068],"props-table",{":props":26069},"[{\"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\"}]",[23,26071,26073],{"id":26072},"usage","Usage",[217,26075,26076,26134,26194,26250,26308],{":tabs":1543},[43,26077,26079],{"className":45,"code":26078,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26080,26081,26089,26096,26105,26110,26118,26126],{"__ignoreMap":48},[52,26082,26083,26085,26087],{"class":54,"line":55},[52,26084,59],{"class":58},[52,26086,63],{"class":62},[52,26088,77],{"class":58},[52,26090,26091,26093],{"class":54,"line":80},[52,26092,83],{"class":58},[52,26094,26095],{"class":62},"AngularBlur\n",[52,26097,26098,26100,26102],{"class":54,"line":108},[52,26099,17026],{"class":66},[52,26101,70],{"class":58},[52,26103,26104],{"class":73},"\"20\"\n",[52,26106,26107],{"class":54,"line":118},[52,26108,26109],{"class":58}," >\n",[52,26111,26112,26114,26116],{"class":54,"line":594},[52,26113,2213],{"class":58},[52,26115,2216],{"class":62},[52,26117,105],{"class":58},[52,26119,26120,26122,26124],{"class":54,"line":600},[52,26121,2230],{"class":58},[52,26123,26051],{"class":62},[52,26125,77],{"class":58},[52,26127,26128,26130,26132],{"class":54,"line":606},[52,26129,121],{"class":58},[52,26131,63],{"class":62},[52,26133,77],{"class":58},[43,26135,26137],{"className":360,"code":26136,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26138,26139,26147,26153,26166,26170,26178,26186],{"__ignoreMap":48},[52,26140,26141,26143,26145],{"class":54,"line":55},[52,26142,59],{"class":58},[52,26144,63],{"class":371},[52,26146,77],{"class":58},[52,26148,26149,26151],{"class":54,"line":80},[52,26150,83],{"class":58},[52,26152,26095],{"class":371},[52,26154,26155,26157,26159,26161,26164],{"class":54,"line":108},[52,26156,17137],{"class":66},[52,26158,70],{"class":231},[52,26160,723],{"class":58},[52,26162,26163],{"class":371},"20",[52,26165,729],{"class":58},[52,26167,26168],{"class":54,"line":118},[52,26169,26109],{"class":58},[52,26171,26172,26174,26176],{"class":54,"line":594},[52,26173,2213],{"class":58},[52,26175,2216],{"class":371},[52,26177,105],{"class":58},[52,26179,26180,26182,26184],{"class":54,"line":600},[52,26181,2230],{"class":58},[52,26183,26051],{"class":371},[52,26185,77],{"class":58},[52,26187,26188,26190,26192],{"class":54,"line":606},[52,26189,121],{"class":58},[52,26191,63],{"class":371},[52,26193,77],{"class":58},[43,26195,26196],{"className":2507,"code":26136,"language":2509,"meta":48,"style":48},[31,26197,26198,26206,26212,26222,26226,26234,26242],{"__ignoreMap":48},[52,26199,26200,26202,26204],{"class":54,"line":55},[52,26201,59],{"class":58},[52,26203,63],{"class":371},[52,26205,77],{"class":58},[52,26207,26208,26210],{"class":54,"line":80},[52,26209,83],{"class":58},[52,26211,26095],{"class":371},[52,26213,26214,26216,26218,26220],{"class":54,"line":108},[52,26215,17137],{"class":66},[52,26217,24004],{"class":58},[52,26219,26163],{"class":371},[52,26221,729],{"class":58},[52,26223,26224],{"class":54,"line":118},[52,26225,26109],{"class":58},[52,26227,26228,26230,26232],{"class":54,"line":594},[52,26229,2213],{"class":58},[52,26231,2216],{"class":371},[52,26233,105],{"class":58},[52,26235,26236,26238,26240],{"class":54,"line":600},[52,26237,2230],{"class":58},[52,26239,26051],{"class":371},[52,26241,77],{"class":58},[52,26243,26244,26246,26248],{"class":54,"line":606},[52,26245,121],{"class":58},[52,26247,63],{"class":371},[52,26249,77],{"class":58},[43,26251,26252],{"className":419,"code":26136,"language":420,"meta":48,"style":48},[31,26253,26254,26262,26268,26280,26284,26292,26300],{"__ignoreMap":48},[52,26255,26256,26258,26260],{"class":54,"line":55},[52,26257,59],{"class":58},[52,26259,63],{"class":371},[52,26261,77],{"class":58},[52,26263,26264,26266],{"class":54,"line":80},[52,26265,83],{"class":58},[52,26267,26095],{"class":371},[52,26269,26270,26272,26274,26276,26278],{"class":54,"line":108},[52,26271,17137],{"class":66},[52,26273,70],{"class":231},[52,26275,723],{"class":58},[52,26277,26163],{"class":371},[52,26279,729],{"class":58},[52,26281,26282],{"class":54,"line":118},[52,26283,26109],{"class":58},[52,26285,26286,26288,26290],{"class":54,"line":594},[52,26287,2213],{"class":58},[52,26289,2216],{"class":371},[52,26291,105],{"class":58},[52,26293,26294,26296,26298],{"class":54,"line":600},[52,26295,2230],{"class":58},[52,26297,26051],{"class":371},[52,26299,77],{"class":58},[52,26301,26302,26304,26306],{"class":54,"line":606},[52,26303,121],{"class":58},[52,26305,63],{"class":371},[52,26307,77],{"class":58},[43,26309,26311],{"className":222,"code":26310,"language":224,"meta":48,"style":48},"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",[31,26312,26313,26323,26327,26341,26345,26359,26367,26371,26375],{"__ignoreMap":48},[52,26314,26315,26317,26319,26321],{"class":54,"line":55},[52,26316,232],{"class":231},[52,26318,8385],{"class":58},[52,26320,238],{"class":231},[52,26322,8390],{"class":73},[52,26324,26325],{"class":54,"line":80},[52,26326,597],{"emptyLinePlaceholder":171},[52,26328,26329,26331,26333,26335,26337,26339],{"class":54,"line":108},[52,26330,1721],{"class":231},[52,26332,1724],{"class":371},[52,26334,1727],{"class":231},[52,26336,1730],{"class":231},[52,26338,1733],{"class":66},[52,26340,1736],{"class":58},[52,26342,26343],{"class":54,"line":118},[52,26344,1751],{"class":58},[52,26346,26347,26349,26352,26355,26357],{"class":54,"line":594},[52,26348,1756],{"class":58},[52,26350,26351],{"class":73},"'AngularBlur'",[52,26353,26354],{"class":58},", props: { intensity: ",[52,26356,26163],{"class":371},[52,26358,4412],{"class":58},[52,26360,26361,26363,26365],{"class":54,"line":600},[52,26362,3880],{"class":58},[52,26364,2869],{"class":73},[52,26366,2129],{"class":58},[52,26368,26369],{"class":54,"line":606},[52,26370,3897],{"class":58},[52,26372,26373],{"class":54,"line":653},[52,26374,1773],{"class":58},[52,26376,26377],{"class":54,"line":662},[52,26378,1778],{"class":58},[156,26380,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":26382},[26383,26384],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Blurs",{},"/docs/components/angularblur",{"title":26051,"description":26059},"docs/components/AngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":26392,"title":26393,"body":26394,"category":26663,"componentType":20007,"description":26401,"extension":168,"meta":26664,"navigation":171,"path":26665,"requiresChild":171,"seo":26666,"stem":26667,"__hash__":26668},"components/docs/components/Ascii.md","Ascii",{"type":8,"value":26395,"toc":26659},[26396,26399,26402,26404,26406,26409,26411,26656],[11,26397,26393],{"id":26398},"ascii",[15,26400,26401],{},"Convert imagery to ASCII character art",[26061,26403],{"component":26393},[23,26405,26065],{"id":20662},[26067,26407],{":props":26408},"[{\"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.\"}]",[23,26410,26073],{"id":26072},[217,26412,26413,26458,26502,26546,26590],{":tabs":1543},[43,26414,26416],{"className":45,"code":26415,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAscii>\n \u003CCircle />\n \u003C/Ascii>\n\u003C/Shader>\n",[31,26417,26418,26426,26434,26442,26450],{"__ignoreMap":48},[52,26419,26420,26422,26424],{"class":54,"line":55},[52,26421,59],{"class":58},[52,26423,63],{"class":62},[52,26425,77],{"class":58},[52,26427,26428,26430,26432],{"class":54,"line":80},[52,26429,83],{"class":58},[52,26431,26393],{"class":62},[52,26433,77],{"class":58},[52,26435,26436,26438,26440],{"class":54,"line":108},[52,26437,2213],{"class":58},[52,26439,2216],{"class":62},[52,26441,105],{"class":58},[52,26443,26444,26446,26448],{"class":54,"line":118},[52,26445,2230],{"class":58},[52,26447,26393],{"class":62},[52,26449,77],{"class":58},[52,26451,26452,26454,26456],{"class":54,"line":594},[52,26453,121],{"class":58},[52,26455,63],{"class":62},[52,26457,77],{"class":58},[43,26459,26460],{"className":360,"code":26415,"language":362,"meta":48,"style":48},[31,26461,26462,26470,26478,26486,26494],{"__ignoreMap":48},[52,26463,26464,26466,26468],{"class":54,"line":55},[52,26465,59],{"class":58},[52,26467,63],{"class":371},[52,26469,77],{"class":58},[52,26471,26472,26474,26476],{"class":54,"line":80},[52,26473,83],{"class":58},[52,26475,26393],{"class":371},[52,26477,77],{"class":58},[52,26479,26480,26482,26484],{"class":54,"line":108},[52,26481,2213],{"class":58},[52,26483,2216],{"class":371},[52,26485,105],{"class":58},[52,26487,26488,26490,26492],{"class":54,"line":118},[52,26489,2230],{"class":58},[52,26491,26393],{"class":371},[52,26493,77],{"class":58},[52,26495,26496,26498,26500],{"class":54,"line":594},[52,26497,121],{"class":58},[52,26499,63],{"class":371},[52,26501,77],{"class":58},[43,26503,26504],{"className":2507,"code":26415,"language":2509,"meta":48,"style":48},[31,26505,26506,26514,26522,26530,26538],{"__ignoreMap":48},[52,26507,26508,26510,26512],{"class":54,"line":55},[52,26509,59],{"class":58},[52,26511,63],{"class":371},[52,26513,77],{"class":58},[52,26515,26516,26518,26520],{"class":54,"line":80},[52,26517,83],{"class":58},[52,26519,26393],{"class":371},[52,26521,77],{"class":58},[52,26523,26524,26526,26528],{"class":54,"line":108},[52,26525,2213],{"class":58},[52,26527,2216],{"class":371},[52,26529,105],{"class":58},[52,26531,26532,26534,26536],{"class":54,"line":118},[52,26533,2230],{"class":58},[52,26535,26393],{"class":371},[52,26537,77],{"class":58},[52,26539,26540,26542,26544],{"class":54,"line":594},[52,26541,121],{"class":58},[52,26543,63],{"class":371},[52,26545,77],{"class":58},[43,26547,26548],{"className":419,"code":26415,"language":420,"meta":48,"style":48},[31,26549,26550,26558,26566,26574,26582],{"__ignoreMap":48},[52,26551,26552,26554,26556],{"class":54,"line":55},[52,26553,59],{"class":58},[52,26555,63],{"class":371},[52,26557,77],{"class":58},[52,26559,26560,26562,26564],{"class":54,"line":80},[52,26561,83],{"class":58},[52,26563,26393],{"class":371},[52,26565,77],{"class":58},[52,26567,26568,26570,26572],{"class":54,"line":108},[52,26569,2213],{"class":58},[52,26571,2216],{"class":371},[52,26573,105],{"class":58},[52,26575,26576,26578,26580],{"class":54,"line":118},[52,26577,2230],{"class":58},[52,26579,26393],{"class":371},[52,26581,77],{"class":58},[52,26583,26584,26586,26588],{"class":54,"line":594},[52,26585,121],{"class":58},[52,26587,63],{"class":371},[52,26589,77],{"class":58},[43,26591,26593],{"className":222,"code":26592,"language":224,"meta":48,"style":48},"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",[31,26594,26595,26605,26609,26623,26627,26636,26644,26648,26652],{"__ignoreMap":48},[52,26596,26597,26599,26601,26603],{"class":54,"line":55},[52,26598,232],{"class":231},[52,26600,8385],{"class":58},[52,26602,238],{"class":231},[52,26604,8390],{"class":73},[52,26606,26607],{"class":54,"line":80},[52,26608,597],{"emptyLinePlaceholder":171},[52,26610,26611,26613,26615,26617,26619,26621],{"class":54,"line":108},[52,26612,1721],{"class":231},[52,26614,1724],{"class":371},[52,26616,1727],{"class":231},[52,26618,1730],{"class":231},[52,26620,1733],{"class":66},[52,26622,1736],{"class":58},[52,26624,26625],{"class":54,"line":118},[52,26626,1751],{"class":58},[52,26628,26629,26631,26634],{"class":54,"line":594},[52,26630,1756],{"class":58},[52,26632,26633],{"class":73},"'Ascii'",[52,26635,3875],{"class":58},[52,26637,26638,26640,26642],{"class":54,"line":600},[52,26639,3880],{"class":58},[52,26641,2869],{"class":73},[52,26643,2129],{"class":58},[52,26645,26646],{"class":54,"line":606},[52,26647,3897],{"class":58},[52,26649,26650],{"class":54,"line":653},[52,26651,1773],{"class":58},[52,26653,26654],{"class":54,"line":662},[52,26655,1778],{"class":58},[156,26657,26658],{},"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":48,"searchDepth":80,"depth":80,"links":26660},[26661,26662],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Stylize",{},"/docs/components/ascii",{"title":26393,"description":26401},"docs/components/Ascii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":26670,"title":9490,"body":26671,"category":26920,"componentType":20001,"description":26678,"extension":168,"meta":26921,"navigation":171,"path":26922,"requiresChild":26923,"seo":26924,"stem":26925,"__hash__":26926},"components/docs/components/Aurora.md",{"type":8,"value":26672,"toc":26916},[26673,26676,26679,26681,26683,26686,26688,26914],[11,26674,9490],{"id":26675},"aurora",[15,26677,26678],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[26061,26680],{"component":9490},[23,26682,26065],{"id":20662},[26067,26684],{":props":26685},"[{\"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\"}]",[23,26687,26073],{"id":26072},[217,26689,26690,26731,26775,26815,26857],{":tabs":1543},[43,26691,26693],{"className":45,"code":26692,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n />\n\u003C/Shader>\n",[31,26694,26695,26703,26710,26719,26723],{"__ignoreMap":48},[52,26696,26697,26699,26701],{"class":54,"line":55},[52,26698,59],{"class":58},[52,26700,63],{"class":62},[52,26702,77],{"class":58},[52,26704,26705,26707],{"class":54,"line":80},[52,26706,83],{"class":58},[52,26708,26709],{"class":62},"Aurora\n",[52,26711,26712,26714,26716],{"class":54,"line":108},[52,26713,17026],{"class":66},[52,26715,70],{"class":58},[52,26717,26718],{"class":73},"\"80\"\n",[52,26720,26721],{"class":54,"line":118},[52,26722,1224],{"class":58},[52,26724,26725,26727,26729],{"class":54,"line":594},[52,26726,121],{"class":58},[52,26728,63],{"class":62},[52,26730,77],{"class":58},[43,26732,26734],{"className":360,"code":26733,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n intensity={80}\n />\n\u003C/Shader>\n",[31,26735,26736,26744,26750,26763,26767],{"__ignoreMap":48},[52,26737,26738,26740,26742],{"class":54,"line":55},[52,26739,59],{"class":58},[52,26741,63],{"class":371},[52,26743,77],{"class":58},[52,26745,26746,26748],{"class":54,"line":80},[52,26747,83],{"class":58},[52,26749,26709],{"class":371},[52,26751,26752,26754,26756,26758,26761],{"class":54,"line":108},[52,26753,17137],{"class":66},[52,26755,70],{"class":231},[52,26757,723],{"class":58},[52,26759,26760],{"class":371},"80",[52,26762,729],{"class":58},[52,26764,26765],{"class":54,"line":118},[52,26766,1224],{"class":58},[52,26768,26769,26771,26773],{"class":54,"line":594},[52,26770,121],{"class":58},[52,26772,63],{"class":371},[52,26774,77],{"class":58},[43,26776,26777],{"className":2507,"code":26733,"language":2509,"meta":48,"style":48},[31,26778,26779,26787,26793,26803,26807],{"__ignoreMap":48},[52,26780,26781,26783,26785],{"class":54,"line":55},[52,26782,59],{"class":58},[52,26784,63],{"class":371},[52,26786,77],{"class":58},[52,26788,26789,26791],{"class":54,"line":80},[52,26790,83],{"class":58},[52,26792,26709],{"class":371},[52,26794,26795,26797,26799,26801],{"class":54,"line":108},[52,26796,17137],{"class":66},[52,26798,24004],{"class":58},[52,26800,26760],{"class":371},[52,26802,729],{"class":58},[52,26804,26805],{"class":54,"line":118},[52,26806,1224],{"class":58},[52,26808,26809,26811,26813],{"class":54,"line":594},[52,26810,121],{"class":58},[52,26812,63],{"class":371},[52,26814,77],{"class":58},[43,26816,26817],{"className":419,"code":26733,"language":420,"meta":48,"style":48},[31,26818,26819,26827,26833,26845,26849],{"__ignoreMap":48},[52,26820,26821,26823,26825],{"class":54,"line":55},[52,26822,59],{"class":58},[52,26824,63],{"class":371},[52,26826,77],{"class":58},[52,26828,26829,26831],{"class":54,"line":80},[52,26830,83],{"class":58},[52,26832,26709],{"class":371},[52,26834,26835,26837,26839,26841,26843],{"class":54,"line":108},[52,26836,17137],{"class":66},[52,26838,70],{"class":231},[52,26840,723],{"class":58},[52,26842,26760],{"class":371},[52,26844,729],{"class":58},[52,26846,26847],{"class":54,"line":118},[52,26848,1224],{"class":58},[52,26850,26851,26853,26855],{"class":54,"line":594},[52,26852,121],{"class":58},[52,26854,63],{"class":371},[52,26856,77],{"class":58},[43,26858,26860],{"className":222,"code":26859,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Aurora', props: { intensity: 80 } }\n ]\n})\n",[31,26861,26862,26872,26876,26890,26894,26906,26910],{"__ignoreMap":48},[52,26863,26864,26866,26868,26870],{"class":54,"line":55},[52,26865,232],{"class":231},[52,26867,8385],{"class":58},[52,26869,238],{"class":231},[52,26871,8390],{"class":73},[52,26873,26874],{"class":54,"line":80},[52,26875,597],{"emptyLinePlaceholder":171},[52,26877,26878,26880,26882,26884,26886,26888],{"class":54,"line":108},[52,26879,1721],{"class":231},[52,26881,1724],{"class":371},[52,26883,1727],{"class":231},[52,26885,1730],{"class":231},[52,26887,1733],{"class":66},[52,26889,1736],{"class":58},[52,26891,26892],{"class":54,"line":118},[52,26893,1751],{"class":58},[52,26895,26896,26898,26900,26902,26904],{"class":54,"line":594},[52,26897,1756],{"class":58},[52,26899,9868],{"class":73},[52,26901,26354],{"class":58},[52,26903,26760],{"class":371},[52,26905,1768],{"class":58},[52,26907,26908],{"class":54,"line":600},[52,26909,1773],{"class":58},[52,26911,26912],{"class":54,"line":606},[52,26913,1778],{"class":58},[156,26915,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":26917},[26918,26919],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Textures",{},"/docs/components/aurora",false,{"title":9490,"description":26678},"docs/components/Aurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":26928,"title":26929,"body":26930,"category":26920,"componentType":20001,"description":26937,"extension":168,"meta":27122,"navigation":171,"path":27123,"requiresChild":26923,"seo":27124,"stem":27125,"__hash__":27126},"components/docs/components/Beam.md","Beam",{"type":8,"value":26931,"toc":27118},[26932,26935,26938,26940,26942,26945,26947,27116],[11,26933,26929],{"id":26934},"beam",[15,26936,26937],{},"A beam of light from one point to another.",[26061,26939],{"component":26929},[23,26941,26065],{"id":20662},[26067,26943],{":props":26944},"[{\"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\"}]",[23,26946,26073],{"id":26072},[217,26948,26949,26978,27006,27034,27062],{":tabs":1543},[43,26950,26952],{"className":45,"code":26951,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBeam />\n\u003C/Shader>\n",[31,26953,26954,26962,26970],{"__ignoreMap":48},[52,26955,26956,26958,26960],{"class":54,"line":55},[52,26957,59],{"class":58},[52,26959,63],{"class":62},[52,26961,77],{"class":58},[52,26963,26964,26966,26968],{"class":54,"line":80},[52,26965,83],{"class":58},[52,26967,26929],{"class":62},[52,26969,105],{"class":58},[52,26971,26972,26974,26976],{"class":54,"line":108},[52,26973,121],{"class":58},[52,26975,63],{"class":62},[52,26977,77],{"class":58},[43,26979,26980],{"className":360,"code":26951,"language":362,"meta":48,"style":48},[31,26981,26982,26990,26998],{"__ignoreMap":48},[52,26983,26984,26986,26988],{"class":54,"line":55},[52,26985,59],{"class":58},[52,26987,63],{"class":371},[52,26989,77],{"class":58},[52,26991,26992,26994,26996],{"class":54,"line":80},[52,26993,83],{"class":58},[52,26995,26929],{"class":371},[52,26997,105],{"class":58},[52,26999,27000,27002,27004],{"class":54,"line":108},[52,27001,121],{"class":58},[52,27003,63],{"class":371},[52,27005,77],{"class":58},[43,27007,27008],{"className":2507,"code":26951,"language":2509,"meta":48,"style":48},[31,27009,27010,27018,27026],{"__ignoreMap":48},[52,27011,27012,27014,27016],{"class":54,"line":55},[52,27013,59],{"class":58},[52,27015,63],{"class":371},[52,27017,77],{"class":58},[52,27019,27020,27022,27024],{"class":54,"line":80},[52,27021,83],{"class":58},[52,27023,26929],{"class":371},[52,27025,105],{"class":58},[52,27027,27028,27030,27032],{"class":54,"line":108},[52,27029,121],{"class":58},[52,27031,63],{"class":371},[52,27033,77],{"class":58},[43,27035,27036],{"className":419,"code":26951,"language":420,"meta":48,"style":48},[31,27037,27038,27046,27054],{"__ignoreMap":48},[52,27039,27040,27042,27044],{"class":54,"line":55},[52,27041,59],{"class":58},[52,27043,63],{"class":371},[52,27045,77],{"class":58},[52,27047,27048,27050,27052],{"class":54,"line":80},[52,27049,83],{"class":58},[52,27051,26929],{"class":371},[52,27053,105],{"class":58},[52,27055,27056,27058,27060],{"class":54,"line":108},[52,27057,121],{"class":58},[52,27059,63],{"class":371},[52,27061,77],{"class":58},[43,27063,27065],{"className":222,"code":27064,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Beam', props: {} }\n ]\n})\n",[31,27066,27067,27077,27081,27095,27099,27108,27112],{"__ignoreMap":48},[52,27068,27069,27071,27073,27075],{"class":54,"line":55},[52,27070,232],{"class":231},[52,27072,8385],{"class":58},[52,27074,238],{"class":231},[52,27076,8390],{"class":73},[52,27078,27079],{"class":54,"line":80},[52,27080,597],{"emptyLinePlaceholder":171},[52,27082,27083,27085,27087,27089,27091,27093],{"class":54,"line":108},[52,27084,1721],{"class":231},[52,27086,1724],{"class":371},[52,27088,1727],{"class":231},[52,27090,1730],{"class":231},[52,27092,1733],{"class":66},[52,27094,1736],{"class":58},[52,27096,27097],{"class":54,"line":118},[52,27098,1751],{"class":58},[52,27100,27101,27103,27106],{"class":54,"line":594},[52,27102,1756],{"class":58},[52,27104,27105],{"class":73},"'Beam'",[52,27107,2129],{"class":58},[52,27109,27110],{"class":54,"line":600},[52,27111,1773],{"class":58},[52,27113,27114],{"class":54,"line":606},[52,27115,1778],{"class":58},[156,27117,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":27119},[27120,27121],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/beam",{"title":26929,"description":26937},"docs/components/Beam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":27128,"title":27129,"body":27130,"category":26920,"componentType":20001,"description":27137,"extension":168,"meta":27322,"navigation":171,"path":27323,"requiresChild":26923,"seo":27324,"stem":27325,"__hash__":27326},"components/docs/components/Blob.md","Blob",{"type":8,"value":27131,"toc":27318},[27132,27135,27138,27140,27142,27145,27147,27316],[11,27133,27129],{"id":27134},"blob",[15,27136,27137],{},"Organic animated blob with 3D lighting and gradients",[26061,27139],{"component":27129},[23,27141,26065],{"id":20662},[26067,27143],{":props":27144},"[{\"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\"}]",[23,27146,26073],{"id":26072},[217,27148,27149,27178,27206,27234,27262],{":tabs":1543},[43,27150,27152],{"className":45,"code":27151,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlob />\n\u003C/Shader>\n",[31,27153,27154,27162,27170],{"__ignoreMap":48},[52,27155,27156,27158,27160],{"class":54,"line":55},[52,27157,59],{"class":58},[52,27159,63],{"class":62},[52,27161,77],{"class":58},[52,27163,27164,27166,27168],{"class":54,"line":80},[52,27165,83],{"class":58},[52,27167,27129],{"class":62},[52,27169,105],{"class":58},[52,27171,27172,27174,27176],{"class":54,"line":108},[52,27173,121],{"class":58},[52,27175,63],{"class":62},[52,27177,77],{"class":58},[43,27179,27180],{"className":360,"code":27151,"language":362,"meta":48,"style":48},[31,27181,27182,27190,27198],{"__ignoreMap":48},[52,27183,27184,27186,27188],{"class":54,"line":55},[52,27185,59],{"class":58},[52,27187,63],{"class":371},[52,27189,77],{"class":58},[52,27191,27192,27194,27196],{"class":54,"line":80},[52,27193,83],{"class":58},[52,27195,27129],{"class":371},[52,27197,105],{"class":58},[52,27199,27200,27202,27204],{"class":54,"line":108},[52,27201,121],{"class":58},[52,27203,63],{"class":371},[52,27205,77],{"class":58},[43,27207,27208],{"className":2507,"code":27151,"language":2509,"meta":48,"style":48},[31,27209,27210,27218,27226],{"__ignoreMap":48},[52,27211,27212,27214,27216],{"class":54,"line":55},[52,27213,59],{"class":58},[52,27215,63],{"class":371},[52,27217,77],{"class":58},[52,27219,27220,27222,27224],{"class":54,"line":80},[52,27221,83],{"class":58},[52,27223,27129],{"class":371},[52,27225,105],{"class":58},[52,27227,27228,27230,27232],{"class":54,"line":108},[52,27229,121],{"class":58},[52,27231,63],{"class":371},[52,27233,77],{"class":58},[43,27235,27236],{"className":419,"code":27151,"language":420,"meta":48,"style":48},[31,27237,27238,27246,27254],{"__ignoreMap":48},[52,27239,27240,27242,27244],{"class":54,"line":55},[52,27241,59],{"class":58},[52,27243,63],{"class":371},[52,27245,77],{"class":58},[52,27247,27248,27250,27252],{"class":54,"line":80},[52,27249,83],{"class":58},[52,27251,27129],{"class":371},[52,27253,105],{"class":58},[52,27255,27256,27258,27260],{"class":54,"line":108},[52,27257,121],{"class":58},[52,27259,63],{"class":371},[52,27261,77],{"class":58},[43,27263,27265],{"className":222,"code":27264,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blob', props: {} }\n ]\n})\n",[31,27266,27267,27277,27281,27295,27299,27308,27312],{"__ignoreMap":48},[52,27268,27269,27271,27273,27275],{"class":54,"line":55},[52,27270,232],{"class":231},[52,27272,8385],{"class":58},[52,27274,238],{"class":231},[52,27276,8390],{"class":73},[52,27278,27279],{"class":54,"line":80},[52,27280,597],{"emptyLinePlaceholder":171},[52,27282,27283,27285,27287,27289,27291,27293],{"class":54,"line":108},[52,27284,1721],{"class":231},[52,27286,1724],{"class":371},[52,27288,1727],{"class":231},[52,27290,1730],{"class":231},[52,27292,1733],{"class":66},[52,27294,1736],{"class":58},[52,27296,27297],{"class":54,"line":118},[52,27298,1751],{"class":58},[52,27300,27301,27303,27306],{"class":54,"line":594},[52,27302,1756],{"class":58},[52,27304,27305],{"class":73},"'Blob'",[52,27307,2129],{"class":58},[52,27309,27310],{"class":54,"line":600},[52,27311,1773],{"class":58},[52,27313,27314],{"class":54,"line":606},[52,27315,1778],{"class":58},[156,27317,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":27319},[27320,27321],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/blob",{"title":27129,"description":27137},"docs/components/Blob","2a5XrgmcJxcBLcEQkxs8e3ZaxmxCERp56Moc00FmMUE",{"id":27328,"title":8640,"body":27329,"category":26385,"componentType":20007,"description":27336,"extension":168,"meta":27655,"navigation":171,"path":27656,"requiresChild":171,"seo":27657,"stem":27658,"__hash__":27659},"components/docs/components/Blur.md",{"type":8,"value":27330,"toc":27651},[27331,27334,27337,27339,27341,27344,27346,27649],[11,27332,8640],{"id":27333},"blur",[15,27335,27336],{},"A simple Gaussian blur effect",[26061,27338],{"component":8640},[23,27340,26065],{"id":20662},[26067,27342],{":props":27343},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,27345,26073],{"id":26072},[217,27347,27348,27405,27465,27521,27579],{":tabs":1543},[43,27349,27351],{"className":45,"code":27350,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,27352,27353,27361,27368,27377,27381,27389,27397],{"__ignoreMap":48},[52,27354,27355,27357,27359],{"class":54,"line":55},[52,27356,59],{"class":58},[52,27358,63],{"class":62},[52,27360,77],{"class":58},[52,27362,27363,27365],{"class":54,"line":80},[52,27364,83],{"class":58},[52,27366,27367],{"class":62},"Blur\n",[52,27369,27370,27372,27374],{"class":54,"line":108},[52,27371,17026],{"class":66},[52,27373,70],{"class":58},[52,27375,27376],{"class":73},"\"50\"\n",[52,27378,27379],{"class":54,"line":118},[52,27380,26109],{"class":58},[52,27382,27383,27385,27387],{"class":54,"line":594},[52,27384,2213],{"class":58},[52,27386,2216],{"class":62},[52,27388,105],{"class":58},[52,27390,27391,27393,27395],{"class":54,"line":600},[52,27392,2230],{"class":58},[52,27394,8640],{"class":62},[52,27396,77],{"class":58},[52,27398,27399,27401,27403],{"class":54,"line":606},[52,27400,121],{"class":58},[52,27402,63],{"class":62},[52,27404,77],{"class":58},[43,27406,27408],{"className":360,"code":27407,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,27409,27410,27418,27424,27437,27441,27449,27457],{"__ignoreMap":48},[52,27411,27412,27414,27416],{"class":54,"line":55},[52,27413,59],{"class":58},[52,27415,63],{"class":371},[52,27417,77],{"class":58},[52,27419,27420,27422],{"class":54,"line":80},[52,27421,83],{"class":58},[52,27423,27367],{"class":371},[52,27425,27426,27428,27430,27432,27435],{"class":54,"line":108},[52,27427,17137],{"class":66},[52,27429,70],{"class":231},[52,27431,723],{"class":58},[52,27433,27434],{"class":371},"50",[52,27436,729],{"class":58},[52,27438,27439],{"class":54,"line":118},[52,27440,26109],{"class":58},[52,27442,27443,27445,27447],{"class":54,"line":594},[52,27444,2213],{"class":58},[52,27446,2216],{"class":371},[52,27448,105],{"class":58},[52,27450,27451,27453,27455],{"class":54,"line":600},[52,27452,2230],{"class":58},[52,27454,8640],{"class":371},[52,27456,77],{"class":58},[52,27458,27459,27461,27463],{"class":54,"line":606},[52,27460,121],{"class":58},[52,27462,63],{"class":371},[52,27464,77],{"class":58},[43,27466,27467],{"className":2507,"code":27407,"language":2509,"meta":48,"style":48},[31,27468,27469,27477,27483,27493,27497,27505,27513],{"__ignoreMap":48},[52,27470,27471,27473,27475],{"class":54,"line":55},[52,27472,59],{"class":58},[52,27474,63],{"class":371},[52,27476,77],{"class":58},[52,27478,27479,27481],{"class":54,"line":80},[52,27480,83],{"class":58},[52,27482,27367],{"class":371},[52,27484,27485,27487,27489,27491],{"class":54,"line":108},[52,27486,17137],{"class":66},[52,27488,24004],{"class":58},[52,27490,27434],{"class":371},[52,27492,729],{"class":58},[52,27494,27495],{"class":54,"line":118},[52,27496,26109],{"class":58},[52,27498,27499,27501,27503],{"class":54,"line":594},[52,27500,2213],{"class":58},[52,27502,2216],{"class":371},[52,27504,105],{"class":58},[52,27506,27507,27509,27511],{"class":54,"line":600},[52,27508,2230],{"class":58},[52,27510,8640],{"class":371},[52,27512,77],{"class":58},[52,27514,27515,27517,27519],{"class":54,"line":606},[52,27516,121],{"class":58},[52,27518,63],{"class":371},[52,27520,77],{"class":58},[43,27522,27523],{"className":419,"code":27407,"language":420,"meta":48,"style":48},[31,27524,27525,27533,27539,27551,27555,27563,27571],{"__ignoreMap":48},[52,27526,27527,27529,27531],{"class":54,"line":55},[52,27528,59],{"class":58},[52,27530,63],{"class":371},[52,27532,77],{"class":58},[52,27534,27535,27537],{"class":54,"line":80},[52,27536,83],{"class":58},[52,27538,27367],{"class":371},[52,27540,27541,27543,27545,27547,27549],{"class":54,"line":108},[52,27542,17137],{"class":66},[52,27544,70],{"class":231},[52,27546,723],{"class":58},[52,27548,27434],{"class":371},[52,27550,729],{"class":58},[52,27552,27553],{"class":54,"line":118},[52,27554,26109],{"class":58},[52,27556,27557,27559,27561],{"class":54,"line":594},[52,27558,2213],{"class":58},[52,27560,2216],{"class":371},[52,27562,105],{"class":58},[52,27564,27565,27567,27569],{"class":54,"line":600},[52,27566,2230],{"class":58},[52,27568,8640],{"class":371},[52,27570,77],{"class":58},[52,27572,27573,27575,27577],{"class":54,"line":606},[52,27574,121],{"class":58},[52,27576,63],{"class":371},[52,27578,77],{"class":58},[43,27580,27582],{"className":222,"code":27581,"language":224,"meta":48,"style":48},"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",[31,27583,27584,27594,27598,27612,27616,27629,27637,27641,27645],{"__ignoreMap":48},[52,27585,27586,27588,27590,27592],{"class":54,"line":55},[52,27587,232],{"class":231},[52,27589,8385],{"class":58},[52,27591,238],{"class":231},[52,27593,8390],{"class":73},[52,27595,27596],{"class":54,"line":80},[52,27597,597],{"emptyLinePlaceholder":171},[52,27599,27600,27602,27604,27606,27608,27610],{"class":54,"line":108},[52,27601,1721],{"class":231},[52,27603,1724],{"class":371},[52,27605,1727],{"class":231},[52,27607,1730],{"class":231},[52,27609,1733],{"class":66},[52,27611,1736],{"class":58},[52,27613,27614],{"class":54,"line":118},[52,27615,1751],{"class":58},[52,27617,27618,27620,27623,27625,27627],{"class":54,"line":594},[52,27619,1756],{"class":58},[52,27621,27622],{"class":73},"'Blur'",[52,27624,26354],{"class":58},[52,27626,27434],{"class":371},[52,27628,4412],{"class":58},[52,27630,27631,27633,27635],{"class":54,"line":600},[52,27632,3880],{"class":58},[52,27634,2869],{"class":73},[52,27636,2129],{"class":58},[52,27638,27639],{"class":54,"line":606},[52,27640,3897],{"class":58},[52,27642,27643],{"class":54,"line":653},[52,27644,1773],{"class":58},[52,27646,27647],{"class":54,"line":662},[52,27648,1778],{"class":58},[156,27650,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":27652},[27653,27654],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/blur",{"title":8640,"description":27336},"docs/components/Blur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":27661,"title":27662,"body":27663,"category":27931,"componentType":20007,"description":27670,"extension":168,"meta":27932,"navigation":171,"path":27933,"requiresChild":171,"seo":27934,"stem":27935,"__hash__":27936},"components/docs/components/BrightnessContrast.md","BrightnessContrast",{"type":8,"value":27664,"toc":27927},[27665,27668,27671,27673,27675,27678,27680,27925],[11,27666,27662],{"id":27667},"brightnesscontrast",[15,27669,27670],{},"Adjust brightness and contrast of the image",[26061,27672],{"component":27662},[23,27674,26065],{"id":20662},[26067,27676],{":props":27677},"[{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Brightness adjustment (-1 to 1)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Contrast adjustment (-1 to 1)\"}]",[23,27679,26073],{"id":26072},[217,27681,27682,27727,27771,27815,27859],{":tabs":1543},[43,27683,27685],{"className":45,"code":27684,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle />\n \u003C/BrightnessContrast>\n\u003C/Shader>\n",[31,27686,27687,27695,27703,27711,27719],{"__ignoreMap":48},[52,27688,27689,27691,27693],{"class":54,"line":55},[52,27690,59],{"class":58},[52,27692,63],{"class":62},[52,27694,77],{"class":58},[52,27696,27697,27699,27701],{"class":54,"line":80},[52,27698,83],{"class":58},[52,27700,27662],{"class":62},[52,27702,77],{"class":58},[52,27704,27705,27707,27709],{"class":54,"line":108},[52,27706,2213],{"class":58},[52,27708,2216],{"class":62},[52,27710,105],{"class":58},[52,27712,27713,27715,27717],{"class":54,"line":118},[52,27714,2230],{"class":58},[52,27716,27662],{"class":62},[52,27718,77],{"class":58},[52,27720,27721,27723,27725],{"class":54,"line":594},[52,27722,121],{"class":58},[52,27724,63],{"class":62},[52,27726,77],{"class":58},[43,27728,27729],{"className":360,"code":27684,"language":362,"meta":48,"style":48},[31,27730,27731,27739,27747,27755,27763],{"__ignoreMap":48},[52,27732,27733,27735,27737],{"class":54,"line":55},[52,27734,59],{"class":58},[52,27736,63],{"class":371},[52,27738,77],{"class":58},[52,27740,27741,27743,27745],{"class":54,"line":80},[52,27742,83],{"class":58},[52,27744,27662],{"class":371},[52,27746,77],{"class":58},[52,27748,27749,27751,27753],{"class":54,"line":108},[52,27750,2213],{"class":58},[52,27752,2216],{"class":371},[52,27754,105],{"class":58},[52,27756,27757,27759,27761],{"class":54,"line":118},[52,27758,2230],{"class":58},[52,27760,27662],{"class":371},[52,27762,77],{"class":58},[52,27764,27765,27767,27769],{"class":54,"line":594},[52,27766,121],{"class":58},[52,27768,63],{"class":371},[52,27770,77],{"class":58},[43,27772,27773],{"className":2507,"code":27684,"language":2509,"meta":48,"style":48},[31,27774,27775,27783,27791,27799,27807],{"__ignoreMap":48},[52,27776,27777,27779,27781],{"class":54,"line":55},[52,27778,59],{"class":58},[52,27780,63],{"class":371},[52,27782,77],{"class":58},[52,27784,27785,27787,27789],{"class":54,"line":80},[52,27786,83],{"class":58},[52,27788,27662],{"class":371},[52,27790,77],{"class":58},[52,27792,27793,27795,27797],{"class":54,"line":108},[52,27794,2213],{"class":58},[52,27796,2216],{"class":371},[52,27798,105],{"class":58},[52,27800,27801,27803,27805],{"class":54,"line":118},[52,27802,2230],{"class":58},[52,27804,27662],{"class":371},[52,27806,77],{"class":58},[52,27808,27809,27811,27813],{"class":54,"line":594},[52,27810,121],{"class":58},[52,27812,63],{"class":371},[52,27814,77],{"class":58},[43,27816,27817],{"className":419,"code":27684,"language":420,"meta":48,"style":48},[31,27818,27819,27827,27835,27843,27851],{"__ignoreMap":48},[52,27820,27821,27823,27825],{"class":54,"line":55},[52,27822,59],{"class":58},[52,27824,63],{"class":371},[52,27826,77],{"class":58},[52,27828,27829,27831,27833],{"class":54,"line":80},[52,27830,83],{"class":58},[52,27832,27662],{"class":371},[52,27834,77],{"class":58},[52,27836,27837,27839,27841],{"class":54,"line":108},[52,27838,2213],{"class":58},[52,27840,2216],{"class":371},[52,27842,105],{"class":58},[52,27844,27845,27847,27849],{"class":54,"line":118},[52,27846,2230],{"class":58},[52,27848,27662],{"class":371},[52,27850,77],{"class":58},[52,27852,27853,27855,27857],{"class":54,"line":594},[52,27854,121],{"class":58},[52,27856,63],{"class":371},[52,27858,77],{"class":58},[43,27860,27862],{"className":222,"code":27861,"language":224,"meta":48,"style":48},"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",[31,27863,27864,27874,27878,27892,27896,27905,27913,27917,27921],{"__ignoreMap":48},[52,27865,27866,27868,27870,27872],{"class":54,"line":55},[52,27867,232],{"class":231},[52,27869,8385],{"class":58},[52,27871,238],{"class":231},[52,27873,8390],{"class":73},[52,27875,27876],{"class":54,"line":80},[52,27877,597],{"emptyLinePlaceholder":171},[52,27879,27880,27882,27884,27886,27888,27890],{"class":54,"line":108},[52,27881,1721],{"class":231},[52,27883,1724],{"class":371},[52,27885,1727],{"class":231},[52,27887,1730],{"class":231},[52,27889,1733],{"class":66},[52,27891,1736],{"class":58},[52,27893,27894],{"class":54,"line":118},[52,27895,1751],{"class":58},[52,27897,27898,27900,27903],{"class":54,"line":594},[52,27899,1756],{"class":58},[52,27901,27902],{"class":73},"'BrightnessContrast'",[52,27904,3875],{"class":58},[52,27906,27907,27909,27911],{"class":54,"line":600},[52,27908,3880],{"class":58},[52,27910,2869],{"class":73},[52,27912,2129],{"class":58},[52,27914,27915],{"class":54,"line":606},[52,27916,3897],{"class":58},[52,27918,27919],{"class":54,"line":653},[52,27920,1773],{"class":58},[52,27922,27923],{"class":54,"line":662},[52,27924,1778],{"class":58},[156,27926,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":27928},[27929,27930],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Adjustments",{},"/docs/components/brightnesscontrast",{"title":27662,"description":27670},"docs/components/BrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":27938,"title":27939,"body":27940,"category":28265,"componentType":20007,"description":27947,"extension":168,"meta":28266,"navigation":171,"path":28267,"requiresChild":171,"seo":28268,"stem":28269,"__hash__":28270},"components/docs/components/Bulge.md","Bulge",{"type":8,"value":27941,"toc":28261},[27942,27945,27948,27950,27952,27955,27957,28259],[11,27943,27939],{"id":27944},"bulge",[15,27946,27947],{},"Magnify or pinch content around a center point",[26061,27949],{"component":27939},[23,27951,26065],{"id":20662},[26067,27953],{":props":27954},"[{\"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\"}]",[23,27956,26073],{"id":26072},[217,27958,27959,28016,28075,28131,28189],{":tabs":1543},[43,27960,27962],{"className":45,"code":27961,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,27963,27964,27972,27979,27988,27992,28000,28008],{"__ignoreMap":48},[52,27965,27966,27968,27970],{"class":54,"line":55},[52,27967,59],{"class":58},[52,27969,63],{"class":62},[52,27971,77],{"class":58},[52,27973,27974,27976],{"class":54,"line":80},[52,27975,83],{"class":58},[52,27977,27978],{"class":62},"Bulge\n",[52,27980,27981,27983,27985],{"class":54,"line":108},[52,27982,14057],{"class":66},[52,27984,70],{"class":58},[52,27986,27987],{"class":73},"\"1\"\n",[52,27989,27990],{"class":54,"line":118},[52,27991,26109],{"class":58},[52,27993,27994,27996,27998],{"class":54,"line":594},[52,27995,2213],{"class":58},[52,27997,2216],{"class":62},[52,27999,105],{"class":58},[52,28001,28002,28004,28006],{"class":54,"line":600},[52,28003,2230],{"class":58},[52,28005,27939],{"class":62},[52,28007,77],{"class":58},[52,28009,28010,28012,28014],{"class":54,"line":606},[52,28011,121],{"class":58},[52,28013,63],{"class":62},[52,28015,77],{"class":58},[43,28017,28019],{"className":360,"code":28018,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28020,28021,28029,28035,28047,28051,28059,28067],{"__ignoreMap":48},[52,28022,28023,28025,28027],{"class":54,"line":55},[52,28024,59],{"class":58},[52,28026,63],{"class":371},[52,28028,77],{"class":58},[52,28030,28031,28033],{"class":54,"line":80},[52,28032,83],{"class":58},[52,28034,27978],{"class":371},[52,28036,28037,28039,28041,28043,28045],{"class":54,"line":108},[52,28038,6514],{"class":66},[52,28040,70],{"class":231},[52,28042,723],{"class":58},[52,28044,5544],{"class":371},[52,28046,729],{"class":58},[52,28048,28049],{"class":54,"line":118},[52,28050,26109],{"class":58},[52,28052,28053,28055,28057],{"class":54,"line":594},[52,28054,2213],{"class":58},[52,28056,2216],{"class":371},[52,28058,105],{"class":58},[52,28060,28061,28063,28065],{"class":54,"line":600},[52,28062,2230],{"class":58},[52,28064,27939],{"class":371},[52,28066,77],{"class":58},[52,28068,28069,28071,28073],{"class":54,"line":606},[52,28070,121],{"class":58},[52,28072,63],{"class":371},[52,28074,77],{"class":58},[43,28076,28077],{"className":2507,"code":28018,"language":2509,"meta":48,"style":48},[31,28078,28079,28087,28093,28103,28107,28115,28123],{"__ignoreMap":48},[52,28080,28081,28083,28085],{"class":54,"line":55},[52,28082,59],{"class":58},[52,28084,63],{"class":371},[52,28086,77],{"class":58},[52,28088,28089,28091],{"class":54,"line":80},[52,28090,83],{"class":58},[52,28092,27978],{"class":371},[52,28094,28095,28097,28099,28101],{"class":54,"line":108},[52,28096,6514],{"class":66},[52,28098,24004],{"class":58},[52,28100,5544],{"class":371},[52,28102,729],{"class":58},[52,28104,28105],{"class":54,"line":118},[52,28106,26109],{"class":58},[52,28108,28109,28111,28113],{"class":54,"line":594},[52,28110,2213],{"class":58},[52,28112,2216],{"class":371},[52,28114,105],{"class":58},[52,28116,28117,28119,28121],{"class":54,"line":600},[52,28118,2230],{"class":58},[52,28120,27939],{"class":371},[52,28122,77],{"class":58},[52,28124,28125,28127,28129],{"class":54,"line":606},[52,28126,121],{"class":58},[52,28128,63],{"class":371},[52,28130,77],{"class":58},[43,28132,28133],{"className":419,"code":28018,"language":420,"meta":48,"style":48},[31,28134,28135,28143,28149,28161,28165,28173,28181],{"__ignoreMap":48},[52,28136,28137,28139,28141],{"class":54,"line":55},[52,28138,59],{"class":58},[52,28140,63],{"class":371},[52,28142,77],{"class":58},[52,28144,28145,28147],{"class":54,"line":80},[52,28146,83],{"class":58},[52,28148,27978],{"class":371},[52,28150,28151,28153,28155,28157,28159],{"class":54,"line":108},[52,28152,6514],{"class":66},[52,28154,70],{"class":231},[52,28156,723],{"class":58},[52,28158,5544],{"class":371},[52,28160,729],{"class":58},[52,28162,28163],{"class":54,"line":118},[52,28164,26109],{"class":58},[52,28166,28167,28169,28171],{"class":54,"line":594},[52,28168,2213],{"class":58},[52,28170,2216],{"class":371},[52,28172,105],{"class":58},[52,28174,28175,28177,28179],{"class":54,"line":600},[52,28176,2230],{"class":58},[52,28178,27939],{"class":371},[52,28180,77],{"class":58},[52,28182,28183,28185,28187],{"class":54,"line":606},[52,28184,121],{"class":58},[52,28186,63],{"class":371},[52,28188,77],{"class":58},[43,28190,28192],{"className":222,"code":28191,"language":224,"meta":48,"style":48},"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",[31,28193,28194,28204,28208,28222,28226,28239,28247,28251,28255],{"__ignoreMap":48},[52,28195,28196,28198,28200,28202],{"class":54,"line":55},[52,28197,232],{"class":231},[52,28199,8385],{"class":58},[52,28201,238],{"class":231},[52,28203,8390],{"class":73},[52,28205,28206],{"class":54,"line":80},[52,28207,597],{"emptyLinePlaceholder":171},[52,28209,28210,28212,28214,28216,28218,28220],{"class":54,"line":108},[52,28211,1721],{"class":231},[52,28213,1724],{"class":371},[52,28215,1727],{"class":231},[52,28217,1730],{"class":231},[52,28219,1733],{"class":66},[52,28221,1736],{"class":58},[52,28223,28224],{"class":54,"line":118},[52,28225,1751],{"class":58},[52,28227,28228,28230,28233,28235,28237],{"class":54,"line":594},[52,28229,1756],{"class":58},[52,28231,28232],{"class":73},"'Bulge'",[52,28234,4407],{"class":58},[52,28236,5544],{"class":371},[52,28238,4412],{"class":58},[52,28240,28241,28243,28245],{"class":54,"line":600},[52,28242,3880],{"class":58},[52,28244,2869],{"class":73},[52,28246,2129],{"class":58},[52,28248,28249],{"class":54,"line":606},[52,28250,3897],{"class":58},[52,28252,28253],{"class":54,"line":653},[52,28254,1773],{"class":58},[52,28256,28257],{"class":54,"line":662},[52,28258,1778],{"class":58},[156,28260,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28262},[28263,28264],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Distortions",{},"/docs/components/bulge",{"title":27939,"description":27947},"docs/components/Bulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":28272,"title":28273,"body":28274,"category":26663,"componentType":20007,"description":28281,"extension":168,"meta":28542,"navigation":171,"path":28543,"requiresChild":171,"seo":28544,"stem":28545,"__hash__":28546},"components/docs/components/CRTScreen.md","CRTScreen",{"type":8,"value":28275,"toc":28538},[28276,28279,28282,28284,28286,28289,28291,28536],[11,28277,28273],{"id":28278},"crtscreen",[15,28280,28281],{},"Retro CRT monitor simulation with scanlines",[26061,28283],{"component":28273},[23,28285,26065],{"id":20662},[26067,28287],{":props":28288},"[{\"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)\"}]",[23,28290,26073],{"id":26072},[217,28292,28293,28338,28382,28426,28470],{":tabs":1543},[43,28294,28296],{"className":45,"code":28295,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle />\n \u003C/CRTScreen>\n\u003C/Shader>\n",[31,28297,28298,28306,28314,28322,28330],{"__ignoreMap":48},[52,28299,28300,28302,28304],{"class":54,"line":55},[52,28301,59],{"class":58},[52,28303,63],{"class":62},[52,28305,77],{"class":58},[52,28307,28308,28310,28312],{"class":54,"line":80},[52,28309,83],{"class":58},[52,28311,28273],{"class":62},[52,28313,77],{"class":58},[52,28315,28316,28318,28320],{"class":54,"line":108},[52,28317,2213],{"class":58},[52,28319,2216],{"class":62},[52,28321,105],{"class":58},[52,28323,28324,28326,28328],{"class":54,"line":118},[52,28325,2230],{"class":58},[52,28327,28273],{"class":62},[52,28329,77],{"class":58},[52,28331,28332,28334,28336],{"class":54,"line":594},[52,28333,121],{"class":58},[52,28335,63],{"class":62},[52,28337,77],{"class":58},[43,28339,28340],{"className":360,"code":28295,"language":362,"meta":48,"style":48},[31,28341,28342,28350,28358,28366,28374],{"__ignoreMap":48},[52,28343,28344,28346,28348],{"class":54,"line":55},[52,28345,59],{"class":58},[52,28347,63],{"class":371},[52,28349,77],{"class":58},[52,28351,28352,28354,28356],{"class":54,"line":80},[52,28353,83],{"class":58},[52,28355,28273],{"class":371},[52,28357,77],{"class":58},[52,28359,28360,28362,28364],{"class":54,"line":108},[52,28361,2213],{"class":58},[52,28363,2216],{"class":371},[52,28365,105],{"class":58},[52,28367,28368,28370,28372],{"class":54,"line":118},[52,28369,2230],{"class":58},[52,28371,28273],{"class":371},[52,28373,77],{"class":58},[52,28375,28376,28378,28380],{"class":54,"line":594},[52,28377,121],{"class":58},[52,28379,63],{"class":371},[52,28381,77],{"class":58},[43,28383,28384],{"className":2507,"code":28295,"language":2509,"meta":48,"style":48},[31,28385,28386,28394,28402,28410,28418],{"__ignoreMap":48},[52,28387,28388,28390,28392],{"class":54,"line":55},[52,28389,59],{"class":58},[52,28391,63],{"class":371},[52,28393,77],{"class":58},[52,28395,28396,28398,28400],{"class":54,"line":80},[52,28397,83],{"class":58},[52,28399,28273],{"class":371},[52,28401,77],{"class":58},[52,28403,28404,28406,28408],{"class":54,"line":108},[52,28405,2213],{"class":58},[52,28407,2216],{"class":371},[52,28409,105],{"class":58},[52,28411,28412,28414,28416],{"class":54,"line":118},[52,28413,2230],{"class":58},[52,28415,28273],{"class":371},[52,28417,77],{"class":58},[52,28419,28420,28422,28424],{"class":54,"line":594},[52,28421,121],{"class":58},[52,28423,63],{"class":371},[52,28425,77],{"class":58},[43,28427,28428],{"className":419,"code":28295,"language":420,"meta":48,"style":48},[31,28429,28430,28438,28446,28454,28462],{"__ignoreMap":48},[52,28431,28432,28434,28436],{"class":54,"line":55},[52,28433,59],{"class":58},[52,28435,63],{"class":371},[52,28437,77],{"class":58},[52,28439,28440,28442,28444],{"class":54,"line":80},[52,28441,83],{"class":58},[52,28443,28273],{"class":371},[52,28445,77],{"class":58},[52,28447,28448,28450,28452],{"class":54,"line":108},[52,28449,2213],{"class":58},[52,28451,2216],{"class":371},[52,28453,105],{"class":58},[52,28455,28456,28458,28460],{"class":54,"line":118},[52,28457,2230],{"class":58},[52,28459,28273],{"class":371},[52,28461,77],{"class":58},[52,28463,28464,28466,28468],{"class":54,"line":594},[52,28465,121],{"class":58},[52,28467,63],{"class":371},[52,28469,77],{"class":58},[43,28471,28473],{"className":222,"code":28472,"language":224,"meta":48,"style":48},"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",[31,28474,28475,28485,28489,28503,28507,28516,28524,28528,28532],{"__ignoreMap":48},[52,28476,28477,28479,28481,28483],{"class":54,"line":55},[52,28478,232],{"class":231},[52,28480,8385],{"class":58},[52,28482,238],{"class":231},[52,28484,8390],{"class":73},[52,28486,28487],{"class":54,"line":80},[52,28488,597],{"emptyLinePlaceholder":171},[52,28490,28491,28493,28495,28497,28499,28501],{"class":54,"line":108},[52,28492,1721],{"class":231},[52,28494,1724],{"class":371},[52,28496,1727],{"class":231},[52,28498,1730],{"class":231},[52,28500,1733],{"class":66},[52,28502,1736],{"class":58},[52,28504,28505],{"class":54,"line":118},[52,28506,1751],{"class":58},[52,28508,28509,28511,28514],{"class":54,"line":594},[52,28510,1756],{"class":58},[52,28512,28513],{"class":73},"'CRTScreen'",[52,28515,3875],{"class":58},[52,28517,28518,28520,28522],{"class":54,"line":600},[52,28519,3880],{"class":58},[52,28521,2869],{"class":73},[52,28523,2129],{"class":58},[52,28525,28526],{"class":54,"line":606},[52,28527,3897],{"class":58},[52,28529,28530],{"class":54,"line":653},[52,28531,1773],{"class":58},[52,28533,28534],{"class":54,"line":662},[52,28535,1778],{"class":58},[156,28537,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":28539},[28540,28541],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/crtscreen",{"title":28273,"description":28281},"docs/components/CRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":28548,"title":28549,"body":28550,"category":26385,"componentType":20007,"description":28557,"extension":168,"meta":28818,"navigation":171,"path":28819,"requiresChild":171,"seo":28820,"stem":28821,"__hash__":28822},"components/docs/components/ChannelBlur.md","ChannelBlur",{"type":8,"value":28551,"toc":28814},[28552,28555,28558,28560,28562,28565,28567,28812],[11,28553,28549],{"id":28554},"channelblur",[15,28556,28557],{},"Independent blur for red, green, and blue channels",[26061,28559],{"component":28549},[23,28561,26065],{"id":20662},[26067,28563],{":props":28564},"[{\"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\"}]",[23,28566,26073],{"id":26072},[217,28568,28569,28614,28658,28702,28746],{":tabs":1543},[43,28570,28572],{"className":45,"code":28571,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle />\n \u003C/ChannelBlur>\n\u003C/Shader>\n",[31,28573,28574,28582,28590,28598,28606],{"__ignoreMap":48},[52,28575,28576,28578,28580],{"class":54,"line":55},[52,28577,59],{"class":58},[52,28579,63],{"class":62},[52,28581,77],{"class":58},[52,28583,28584,28586,28588],{"class":54,"line":80},[52,28585,83],{"class":58},[52,28587,28549],{"class":62},[52,28589,77],{"class":58},[52,28591,28592,28594,28596],{"class":54,"line":108},[52,28593,2213],{"class":58},[52,28595,2216],{"class":62},[52,28597,105],{"class":58},[52,28599,28600,28602,28604],{"class":54,"line":118},[52,28601,2230],{"class":58},[52,28603,28549],{"class":62},[52,28605,77],{"class":58},[52,28607,28608,28610,28612],{"class":54,"line":594},[52,28609,121],{"class":58},[52,28611,63],{"class":62},[52,28613,77],{"class":58},[43,28615,28616],{"className":360,"code":28571,"language":362,"meta":48,"style":48},[31,28617,28618,28626,28634,28642,28650],{"__ignoreMap":48},[52,28619,28620,28622,28624],{"class":54,"line":55},[52,28621,59],{"class":58},[52,28623,63],{"class":371},[52,28625,77],{"class":58},[52,28627,28628,28630,28632],{"class":54,"line":80},[52,28629,83],{"class":58},[52,28631,28549],{"class":371},[52,28633,77],{"class":58},[52,28635,28636,28638,28640],{"class":54,"line":108},[52,28637,2213],{"class":58},[52,28639,2216],{"class":371},[52,28641,105],{"class":58},[52,28643,28644,28646,28648],{"class":54,"line":118},[52,28645,2230],{"class":58},[52,28647,28549],{"class":371},[52,28649,77],{"class":58},[52,28651,28652,28654,28656],{"class":54,"line":594},[52,28653,121],{"class":58},[52,28655,63],{"class":371},[52,28657,77],{"class":58},[43,28659,28660],{"className":2507,"code":28571,"language":2509,"meta":48,"style":48},[31,28661,28662,28670,28678,28686,28694],{"__ignoreMap":48},[52,28663,28664,28666,28668],{"class":54,"line":55},[52,28665,59],{"class":58},[52,28667,63],{"class":371},[52,28669,77],{"class":58},[52,28671,28672,28674,28676],{"class":54,"line":80},[52,28673,83],{"class":58},[52,28675,28549],{"class":371},[52,28677,77],{"class":58},[52,28679,28680,28682,28684],{"class":54,"line":108},[52,28681,2213],{"class":58},[52,28683,2216],{"class":371},[52,28685,105],{"class":58},[52,28687,28688,28690,28692],{"class":54,"line":118},[52,28689,2230],{"class":58},[52,28691,28549],{"class":371},[52,28693,77],{"class":58},[52,28695,28696,28698,28700],{"class":54,"line":594},[52,28697,121],{"class":58},[52,28699,63],{"class":371},[52,28701,77],{"class":58},[43,28703,28704],{"className":419,"code":28571,"language":420,"meta":48,"style":48},[31,28705,28706,28714,28722,28730,28738],{"__ignoreMap":48},[52,28707,28708,28710,28712],{"class":54,"line":55},[52,28709,59],{"class":58},[52,28711,63],{"class":371},[52,28713,77],{"class":58},[52,28715,28716,28718,28720],{"class":54,"line":80},[52,28717,83],{"class":58},[52,28719,28549],{"class":371},[52,28721,77],{"class":58},[52,28723,28724,28726,28728],{"class":54,"line":108},[52,28725,2213],{"class":58},[52,28727,2216],{"class":371},[52,28729,105],{"class":58},[52,28731,28732,28734,28736],{"class":54,"line":118},[52,28733,2230],{"class":58},[52,28735,28549],{"class":371},[52,28737,77],{"class":58},[52,28739,28740,28742,28744],{"class":54,"line":594},[52,28741,121],{"class":58},[52,28743,63],{"class":371},[52,28745,77],{"class":58},[43,28747,28749],{"className":222,"code":28748,"language":224,"meta":48,"style":48},"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",[31,28750,28751,28761,28765,28779,28783,28792,28800,28804,28808],{"__ignoreMap":48},[52,28752,28753,28755,28757,28759],{"class":54,"line":55},[52,28754,232],{"class":231},[52,28756,8385],{"class":58},[52,28758,238],{"class":231},[52,28760,8390],{"class":73},[52,28762,28763],{"class":54,"line":80},[52,28764,597],{"emptyLinePlaceholder":171},[52,28766,28767,28769,28771,28773,28775,28777],{"class":54,"line":108},[52,28768,1721],{"class":231},[52,28770,1724],{"class":371},[52,28772,1727],{"class":231},[52,28774,1730],{"class":231},[52,28776,1733],{"class":66},[52,28778,1736],{"class":58},[52,28780,28781],{"class":54,"line":118},[52,28782,1751],{"class":58},[52,28784,28785,28787,28790],{"class":54,"line":594},[52,28786,1756],{"class":58},[52,28788,28789],{"class":73},"'ChannelBlur'",[52,28791,3875],{"class":58},[52,28793,28794,28796,28798],{"class":54,"line":600},[52,28795,3880],{"class":58},[52,28797,2869],{"class":73},[52,28799,2129],{"class":58},[52,28801,28802],{"class":54,"line":606},[52,28803,3897],{"class":58},[52,28805,28806],{"class":54,"line":653},[52,28807,1773],{"class":58},[52,28809,28810],{"class":54,"line":662},[52,28811,1778],{"class":58},[156,28813,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":28815},[28816,28817],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/channelblur",{"title":28549,"description":28557},"docs/components/ChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":28824,"title":28825,"body":28826,"category":26920,"componentType":20001,"description":28833,"extension":168,"meta":29017,"navigation":171,"path":29018,"requiresChild":26923,"seo":29019,"stem":29020,"__hash__":29021},"components/docs/components/Checkerboard.md","Checkerboard",{"type":8,"value":28827,"toc":29013},[28828,28831,28834,28836,28838,28841,28843,29011],[11,28829,28825],{"id":28830},"checkerboard",[15,28832,28833],{},"Classic checkerboard pattern with two alternating colors",[26061,28835],{"component":28825},[23,28837,26065],{"id":20662},[26067,28839],{":props":28840},"[{\"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\"}]",[23,28842,26073],{"id":26072},[217,28844,28845,28874,28902,28930,28958],{":tabs":1543},[43,28846,28848],{"className":45,"code":28847,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCheckerboard />\n\u003C/Shader>\n",[31,28849,28850,28858,28866],{"__ignoreMap":48},[52,28851,28852,28854,28856],{"class":54,"line":55},[52,28853,59],{"class":58},[52,28855,63],{"class":62},[52,28857,77],{"class":58},[52,28859,28860,28862,28864],{"class":54,"line":80},[52,28861,83],{"class":58},[52,28863,28825],{"class":62},[52,28865,105],{"class":58},[52,28867,28868,28870,28872],{"class":54,"line":108},[52,28869,121],{"class":58},[52,28871,63],{"class":62},[52,28873,77],{"class":58},[43,28875,28876],{"className":360,"code":28847,"language":362,"meta":48,"style":48},[31,28877,28878,28886,28894],{"__ignoreMap":48},[52,28879,28880,28882,28884],{"class":54,"line":55},[52,28881,59],{"class":58},[52,28883,63],{"class":371},[52,28885,77],{"class":58},[52,28887,28888,28890,28892],{"class":54,"line":80},[52,28889,83],{"class":58},[52,28891,28825],{"class":371},[52,28893,105],{"class":58},[52,28895,28896,28898,28900],{"class":54,"line":108},[52,28897,121],{"class":58},[52,28899,63],{"class":371},[52,28901,77],{"class":58},[43,28903,28904],{"className":2507,"code":28847,"language":2509,"meta":48,"style":48},[31,28905,28906,28914,28922],{"__ignoreMap":48},[52,28907,28908,28910,28912],{"class":54,"line":55},[52,28909,59],{"class":58},[52,28911,63],{"class":371},[52,28913,77],{"class":58},[52,28915,28916,28918,28920],{"class":54,"line":80},[52,28917,83],{"class":58},[52,28919,28825],{"class":371},[52,28921,105],{"class":58},[52,28923,28924,28926,28928],{"class":54,"line":108},[52,28925,121],{"class":58},[52,28927,63],{"class":371},[52,28929,77],{"class":58},[43,28931,28932],{"className":419,"code":28847,"language":420,"meta":48,"style":48},[31,28933,28934,28942,28950],{"__ignoreMap":48},[52,28935,28936,28938,28940],{"class":54,"line":55},[52,28937,59],{"class":58},[52,28939,63],{"class":371},[52,28941,77],{"class":58},[52,28943,28944,28946,28948],{"class":54,"line":80},[52,28945,83],{"class":58},[52,28947,28825],{"class":371},[52,28949,105],{"class":58},[52,28951,28952,28954,28956],{"class":54,"line":108},[52,28953,121],{"class":58},[52,28955,63],{"class":371},[52,28957,77],{"class":58},[43,28959,28961],{"className":222,"code":28960,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Checkerboard', props: {} }\n ]\n})\n",[31,28962,28963,28973,28977,28991,28995,29003,29007],{"__ignoreMap":48},[52,28964,28965,28967,28969,28971],{"class":54,"line":55},[52,28966,232],{"class":231},[52,28968,8385],{"class":58},[52,28970,238],{"class":231},[52,28972,8390],{"class":73},[52,28974,28975],{"class":54,"line":80},[52,28976,597],{"emptyLinePlaceholder":171},[52,28978,28979,28981,28983,28985,28987,28989],{"class":54,"line":108},[52,28980,1721],{"class":231},[52,28982,1724],{"class":371},[52,28984,1727],{"class":231},[52,28986,1730],{"class":231},[52,28988,1733],{"class":66},[52,28990,1736],{"class":58},[52,28992,28993],{"class":54,"line":118},[52,28994,1751],{"class":58},[52,28996,28997,28999,29001],{"class":54,"line":594},[52,28998,1756],{"class":58},[52,29000,7028],{"class":73},[52,29002,2129],{"class":58},[52,29004,29005],{"class":54,"line":600},[52,29006,1773],{"class":58},[52,29008,29009],{"class":54,"line":606},[52,29010,1778],{"class":58},[156,29012,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":29014},[29015,29016],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/checkerboard",{"title":28825,"description":28833},"docs/components/Checkerboard","xWgOFlPxz08f5-WceoXS-EG20wY1632N5T-U9eHKWKo",{"id":29023,"title":29024,"body":29025,"category":29321,"componentType":20001,"description":29032,"extension":168,"meta":29322,"navigation":171,"path":29323,"requiresChild":26923,"seo":29324,"stem":29325,"__hash__":29326},"components/docs/components/ChromaFlow.md","ChromaFlow",{"type":8,"value":29026,"toc":29317},[29027,29030,29033,29035,29037,29040,29042,29315],[11,29028,29024],{"id":29029},"chromaflow",[15,29031,29032],{},"Interactive liquid flow effect that follows your cursor",[26061,29034],{"component":29024},[23,29036,26065],{"id":20662},[26067,29038],{":props":29039},"[{\"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\"}]",[23,29041,26073],{"id":26072},[217,29043,29044,29093,29149,29199,29253],{":tabs":1543},[43,29045,29047],{"className":45,"code":29046,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n />\n\u003C/Shader>\n",[31,29048,29049,29057,29064,29072,29081,29085],{"__ignoreMap":48},[52,29050,29051,29053,29055],{"class":54,"line":55},[52,29052,59],{"class":58},[52,29054,63],{"class":62},[52,29056,77],{"class":58},[52,29058,29059,29061],{"class":54,"line":80},[52,29060,83],{"class":58},[52,29062,29063],{"class":62},"ChromaFlow\n",[52,29065,29066,29068,29070],{"class":54,"line":108},[52,29067,17026],{"class":66},[52,29069,70],{"class":58},[52,29071,27987],{"class":73},[52,29073,29074,29076,29078],{"class":54,"line":118},[52,29075,14057],{"class":66},[52,29077,70],{"class":58},[52,29079,29080],{"class":73},"\"3\"\n",[52,29082,29083],{"class":54,"line":594},[52,29084,1224],{"class":58},[52,29086,29087,29089,29091],{"class":54,"line":600},[52,29088,121],{"class":58},[52,29090,63],{"class":62},[52,29092,77],{"class":58},[43,29094,29096],{"className":360,"code":29095,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n />\n\u003C/Shader>\n",[31,29097,29098,29106,29112,29124,29137,29141],{"__ignoreMap":48},[52,29099,29100,29102,29104],{"class":54,"line":55},[52,29101,59],{"class":58},[52,29103,63],{"class":371},[52,29105,77],{"class":58},[52,29107,29108,29110],{"class":54,"line":80},[52,29109,83],{"class":58},[52,29111,29063],{"class":371},[52,29113,29114,29116,29118,29120,29122],{"class":54,"line":108},[52,29115,17137],{"class":66},[52,29117,70],{"class":231},[52,29119,723],{"class":58},[52,29121,5544],{"class":371},[52,29123,729],{"class":58},[52,29125,29126,29128,29130,29132,29135],{"class":54,"line":118},[52,29127,6514],{"class":66},[52,29129,70],{"class":231},[52,29131,723],{"class":58},[52,29133,29134],{"class":371},"3",[52,29136,729],{"class":58},[52,29138,29139],{"class":54,"line":594},[52,29140,1224],{"class":58},[52,29142,29143,29145,29147],{"class":54,"line":600},[52,29144,121],{"class":58},[52,29146,63],{"class":371},[52,29148,77],{"class":58},[43,29150,29151],{"className":2507,"code":29095,"language":2509,"meta":48,"style":48},[31,29152,29153,29161,29167,29177,29187,29191],{"__ignoreMap":48},[52,29154,29155,29157,29159],{"class":54,"line":55},[52,29156,59],{"class":58},[52,29158,63],{"class":371},[52,29160,77],{"class":58},[52,29162,29163,29165],{"class":54,"line":80},[52,29164,83],{"class":58},[52,29166,29063],{"class":371},[52,29168,29169,29171,29173,29175],{"class":54,"line":108},[52,29170,17137],{"class":66},[52,29172,24004],{"class":58},[52,29174,5544],{"class":371},[52,29176,729],{"class":58},[52,29178,29179,29181,29183,29185],{"class":54,"line":118},[52,29180,6514],{"class":66},[52,29182,24004],{"class":58},[52,29184,29134],{"class":371},[52,29186,729],{"class":58},[52,29188,29189],{"class":54,"line":594},[52,29190,1224],{"class":58},[52,29192,29193,29195,29197],{"class":54,"line":600},[52,29194,121],{"class":58},[52,29196,63],{"class":371},[52,29198,77],{"class":58},[43,29200,29201],{"className":419,"code":29095,"language":420,"meta":48,"style":48},[31,29202,29203,29211,29217,29229,29241,29245],{"__ignoreMap":48},[52,29204,29205,29207,29209],{"class":54,"line":55},[52,29206,59],{"class":58},[52,29208,63],{"class":371},[52,29210,77],{"class":58},[52,29212,29213,29215],{"class":54,"line":80},[52,29214,83],{"class":58},[52,29216,29063],{"class":371},[52,29218,29219,29221,29223,29225,29227],{"class":54,"line":108},[52,29220,17137],{"class":66},[52,29222,70],{"class":231},[52,29224,723],{"class":58},[52,29226,5544],{"class":371},[52,29228,729],{"class":58},[52,29230,29231,29233,29235,29237,29239],{"class":54,"line":118},[52,29232,6514],{"class":66},[52,29234,70],{"class":231},[52,29236,723],{"class":58},[52,29238,29134],{"class":371},[52,29240,729],{"class":58},[52,29242,29243],{"class":54,"line":594},[52,29244,1224],{"class":58},[52,29246,29247,29249,29251],{"class":54,"line":600},[52,29248,121],{"class":58},[52,29250,63],{"class":371},[52,29252,77],{"class":58},[43,29254,29256],{"className":222,"code":29255,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaFlow', props: { intensity: 1, radius: 3 } }\n ]\n})\n",[31,29257,29258,29268,29272,29286,29290,29307,29311],{"__ignoreMap":48},[52,29259,29260,29262,29264,29266],{"class":54,"line":55},[52,29261,232],{"class":231},[52,29263,8385],{"class":58},[52,29265,238],{"class":231},[52,29267,8390],{"class":73},[52,29269,29270],{"class":54,"line":80},[52,29271,597],{"emptyLinePlaceholder":171},[52,29273,29274,29276,29278,29280,29282,29284],{"class":54,"line":108},[52,29275,1721],{"class":231},[52,29277,1724],{"class":371},[52,29279,1727],{"class":231},[52,29281,1730],{"class":231},[52,29283,1733],{"class":66},[52,29285,1736],{"class":58},[52,29287,29288],{"class":54,"line":118},[52,29289,1751],{"class":58},[52,29291,29292,29294,29297,29299,29301,29303,29305],{"class":54,"line":594},[52,29293,1756],{"class":58},[52,29295,29296],{"class":73},"'ChromaFlow'",[52,29298,26354],{"class":58},[52,29300,5544],{"class":371},[52,29302,3431],{"class":58},[52,29304,29134],{"class":371},[52,29306,1768],{"class":58},[52,29308,29309],{"class":54,"line":600},[52,29310,1773],{"class":58},[52,29312,29313],{"class":54,"line":606},[52,29314,1778],{"class":58},[156,29316,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":29318},[29319,29320],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Interactive",{},"/docs/components/chromaflow",{"title":29024,"description":29032},"docs/components/ChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":29328,"title":29329,"body":29330,"category":26663,"componentType":20007,"description":29337,"extension":168,"meta":29598,"navigation":171,"path":29599,"requiresChild":171,"seo":29600,"stem":29601,"__hash__":29602},"components/docs/components/ChromaticAberration.md","ChromaticAberration",{"type":8,"value":29331,"toc":29594},[29332,29335,29338,29340,29342,29345,29347,29592],[11,29333,29329],{"id":29334},"chromaticaberration",[15,29336,29337],{},"Separate RGB channels for a prismatic distortion effect",[26061,29339],{"component":29329},[23,29341,26065],{"id":20662},[26067,29343],{":props":29344},"[{\"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\"}]",[23,29346,26073],{"id":26072},[217,29348,29349,29394,29438,29482,29526],{":tabs":1543},[43,29350,29352],{"className":45,"code":29351,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle />\n \u003C/ChromaticAberration>\n\u003C/Shader>\n",[31,29353,29354,29362,29370,29378,29386],{"__ignoreMap":48},[52,29355,29356,29358,29360],{"class":54,"line":55},[52,29357,59],{"class":58},[52,29359,63],{"class":62},[52,29361,77],{"class":58},[52,29363,29364,29366,29368],{"class":54,"line":80},[52,29365,83],{"class":58},[52,29367,29329],{"class":62},[52,29369,77],{"class":58},[52,29371,29372,29374,29376],{"class":54,"line":108},[52,29373,2213],{"class":58},[52,29375,2216],{"class":62},[52,29377,105],{"class":58},[52,29379,29380,29382,29384],{"class":54,"line":118},[52,29381,2230],{"class":58},[52,29383,29329],{"class":62},[52,29385,77],{"class":58},[52,29387,29388,29390,29392],{"class":54,"line":594},[52,29389,121],{"class":58},[52,29391,63],{"class":62},[52,29393,77],{"class":58},[43,29395,29396],{"className":360,"code":29351,"language":362,"meta":48,"style":48},[31,29397,29398,29406,29414,29422,29430],{"__ignoreMap":48},[52,29399,29400,29402,29404],{"class":54,"line":55},[52,29401,59],{"class":58},[52,29403,63],{"class":371},[52,29405,77],{"class":58},[52,29407,29408,29410,29412],{"class":54,"line":80},[52,29409,83],{"class":58},[52,29411,29329],{"class":371},[52,29413,77],{"class":58},[52,29415,29416,29418,29420],{"class":54,"line":108},[52,29417,2213],{"class":58},[52,29419,2216],{"class":371},[52,29421,105],{"class":58},[52,29423,29424,29426,29428],{"class":54,"line":118},[52,29425,2230],{"class":58},[52,29427,29329],{"class":371},[52,29429,77],{"class":58},[52,29431,29432,29434,29436],{"class":54,"line":594},[52,29433,121],{"class":58},[52,29435,63],{"class":371},[52,29437,77],{"class":58},[43,29439,29440],{"className":2507,"code":29351,"language":2509,"meta":48,"style":48},[31,29441,29442,29450,29458,29466,29474],{"__ignoreMap":48},[52,29443,29444,29446,29448],{"class":54,"line":55},[52,29445,59],{"class":58},[52,29447,63],{"class":371},[52,29449,77],{"class":58},[52,29451,29452,29454,29456],{"class":54,"line":80},[52,29453,83],{"class":58},[52,29455,29329],{"class":371},[52,29457,77],{"class":58},[52,29459,29460,29462,29464],{"class":54,"line":108},[52,29461,2213],{"class":58},[52,29463,2216],{"class":371},[52,29465,105],{"class":58},[52,29467,29468,29470,29472],{"class":54,"line":118},[52,29469,2230],{"class":58},[52,29471,29329],{"class":371},[52,29473,77],{"class":58},[52,29475,29476,29478,29480],{"class":54,"line":594},[52,29477,121],{"class":58},[52,29479,63],{"class":371},[52,29481,77],{"class":58},[43,29483,29484],{"className":419,"code":29351,"language":420,"meta":48,"style":48},[31,29485,29486,29494,29502,29510,29518],{"__ignoreMap":48},[52,29487,29488,29490,29492],{"class":54,"line":55},[52,29489,59],{"class":58},[52,29491,63],{"class":371},[52,29493,77],{"class":58},[52,29495,29496,29498,29500],{"class":54,"line":80},[52,29497,83],{"class":58},[52,29499,29329],{"class":371},[52,29501,77],{"class":58},[52,29503,29504,29506,29508],{"class":54,"line":108},[52,29505,2213],{"class":58},[52,29507,2216],{"class":371},[52,29509,105],{"class":58},[52,29511,29512,29514,29516],{"class":54,"line":118},[52,29513,2230],{"class":58},[52,29515,29329],{"class":371},[52,29517,77],{"class":58},[52,29519,29520,29522,29524],{"class":54,"line":594},[52,29521,121],{"class":58},[52,29523,63],{"class":371},[52,29525,77],{"class":58},[43,29527,29529],{"className":222,"code":29528,"language":224,"meta":48,"style":48},"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",[31,29530,29531,29541,29545,29559,29563,29572,29580,29584,29588],{"__ignoreMap":48},[52,29532,29533,29535,29537,29539],{"class":54,"line":55},[52,29534,232],{"class":231},[52,29536,8385],{"class":58},[52,29538,238],{"class":231},[52,29540,8390],{"class":73},[52,29542,29543],{"class":54,"line":80},[52,29544,597],{"emptyLinePlaceholder":171},[52,29546,29547,29549,29551,29553,29555,29557],{"class":54,"line":108},[52,29548,1721],{"class":231},[52,29550,1724],{"class":371},[52,29552,1727],{"class":231},[52,29554,1730],{"class":231},[52,29556,1733],{"class":66},[52,29558,1736],{"class":58},[52,29560,29561],{"class":54,"line":118},[52,29562,1751],{"class":58},[52,29564,29565,29567,29570],{"class":54,"line":594},[52,29566,1756],{"class":58},[52,29568,29569],{"class":73},"'ChromaticAberration'",[52,29571,3875],{"class":58},[52,29573,29574,29576,29578],{"class":54,"line":600},[52,29575,3880],{"class":58},[52,29577,2869],{"class":73},[52,29579,2129],{"class":58},[52,29581,29582],{"class":54,"line":606},[52,29583,3897],{"class":58},[52,29585,29586],{"class":54,"line":653},[52,29587,1773],{"class":58},[52,29589,29590],{"class":54,"line":662},[52,29591,1778],{"class":58},[156,29593,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":29595},[29596,29597],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/chromaticaberration",{"title":29329,"description":29337},"docs/components/ChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":29604,"title":2216,"body":29605,"category":29887,"componentType":20001,"description":29612,"extension":168,"meta":29888,"navigation":171,"path":29889,"requiresChild":26923,"seo":29890,"stem":29891,"__hash__":29892},"components/docs/components/Circle.md",{"type":8,"value":29606,"toc":29883},[29607,29610,29613,29615,29617,29620,29622,29881],[11,29608,2216],{"id":29609},"circle",[15,29611,29612],{},"Generate a circle with adjustable size and softness",[26061,29614],{"component":2216},[23,29616,26065],{"id":20662},[26067,29618],{":props":29619},"[{\"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\"}]",[23,29621,26073],{"id":26072},[217,29623,29624,29671,29722,29770,29820],{":tabs":1543},[43,29625,29627],{"className":45,"code":29626,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,29628,29629,29637,29643,29651,29659,29663],{"__ignoreMap":48},[52,29630,29631,29633,29635],{"class":54,"line":55},[52,29632,59],{"class":58},[52,29634,63],{"class":62},[52,29636,77],{"class":58},[52,29638,29639,29641],{"class":54,"line":80},[52,29640,83],{"class":58},[52,29642,6499],{"class":62},[52,29644,29645,29647,29649],{"class":54,"line":108},[52,29646,6504],{"class":66},[52,29648,70],{"class":58},[52,29650,6460],{"class":73},[52,29652,29653,29655,29657],{"class":54,"line":118},[52,29654,14057],{"class":66},[52,29656,70],{"class":58},[52,29658,27987],{"class":73},[52,29660,29661],{"class":54,"line":594},[52,29662,1224],{"class":58},[52,29664,29665,29667,29669],{"class":54,"line":600},[52,29666,121],{"class":58},[52,29668,63],{"class":62},[52,29670,77],{"class":58},[43,29672,29674],{"className":360,"code":29673,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n />\n\u003C/Shader>\n",[31,29675,29676,29684,29690,29698,29710,29714],{"__ignoreMap":48},[52,29677,29678,29680,29682],{"class":54,"line":55},[52,29679,59],{"class":58},[52,29681,63],{"class":371},[52,29683,77],{"class":58},[52,29685,29686,29688],{"class":54,"line":80},[52,29687,83],{"class":58},[52,29689,6499],{"class":371},[52,29691,29692,29694,29696],{"class":54,"line":108},[52,29693,6504],{"class":66},[52,29695,70],{"class":231},[52,29697,6460],{"class":73},[52,29699,29700,29702,29704,29706,29708],{"class":54,"line":118},[52,29701,6514],{"class":66},[52,29703,70],{"class":231},[52,29705,723],{"class":58},[52,29707,5544],{"class":371},[52,29709,729],{"class":58},[52,29711,29712],{"class":54,"line":594},[52,29713,1224],{"class":58},[52,29715,29716,29718,29720],{"class":54,"line":600},[52,29717,121],{"class":58},[52,29719,63],{"class":371},[52,29721,77],{"class":58},[43,29723,29724],{"className":2507,"code":29673,"language":2509,"meta":48,"style":48},[31,29725,29726,29734,29740,29748,29758,29762],{"__ignoreMap":48},[52,29727,29728,29730,29732],{"class":54,"line":55},[52,29729,59],{"class":58},[52,29731,63],{"class":371},[52,29733,77],{"class":58},[52,29735,29736,29738],{"class":54,"line":80},[52,29737,83],{"class":58},[52,29739,6499],{"class":371},[52,29741,29742,29744,29746],{"class":54,"line":108},[52,29743,6504],{"class":66},[52,29745,70],{"class":58},[52,29747,6460],{"class":73},[52,29749,29750,29752,29754,29756],{"class":54,"line":118},[52,29751,6514],{"class":66},[52,29753,24004],{"class":58},[52,29755,5544],{"class":371},[52,29757,729],{"class":58},[52,29759,29760],{"class":54,"line":594},[52,29761,1224],{"class":58},[52,29763,29764,29766,29768],{"class":54,"line":600},[52,29765,121],{"class":58},[52,29767,63],{"class":371},[52,29769,77],{"class":58},[43,29771,29772],{"className":419,"code":29673,"language":420,"meta":48,"style":48},[31,29773,29774,29782,29788,29796,29808,29812],{"__ignoreMap":48},[52,29775,29776,29778,29780],{"class":54,"line":55},[52,29777,59],{"class":58},[52,29779,63],{"class":371},[52,29781,77],{"class":58},[52,29783,29784,29786],{"class":54,"line":80},[52,29785,83],{"class":58},[52,29787,6499],{"class":371},[52,29789,29790,29792,29794],{"class":54,"line":108},[52,29791,6504],{"class":66},[52,29793,70],{"class":231},[52,29795,6460],{"class":73},[52,29797,29798,29800,29802,29804,29806],{"class":54,"line":118},[52,29799,6514],{"class":66},[52,29801,70],{"class":231},[52,29803,723],{"class":58},[52,29805,5544],{"class":371},[52,29807,729],{"class":58},[52,29809,29810],{"class":54,"line":594},[52,29811,1224],{"class":58},[52,29813,29814,29816,29818],{"class":54,"line":600},[52,29815,121],{"class":58},[52,29817,63],{"class":371},[52,29819,77],{"class":58},[43,29821,29823],{"className":222,"code":29822,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ffffff', radius: 1 } }\n ]\n})\n",[31,29824,29825,29835,29839,29853,29857,29873,29877],{"__ignoreMap":48},[52,29826,29827,29829,29831,29833],{"class":54,"line":55},[52,29828,232],{"class":231},[52,29830,8385],{"class":58},[52,29832,238],{"class":231},[52,29834,8390],{"class":73},[52,29836,29837],{"class":54,"line":80},[52,29838,597],{"emptyLinePlaceholder":171},[52,29840,29841,29843,29845,29847,29849,29851],{"class":54,"line":108},[52,29842,1721],{"class":231},[52,29844,1724],{"class":371},[52,29846,1727],{"class":231},[52,29848,1730],{"class":231},[52,29850,1733],{"class":66},[52,29852,1736],{"class":58},[52,29854,29855],{"class":54,"line":118},[52,29856,1751],{"class":58},[52,29858,29859,29861,29863,29865,29867,29869,29871],{"class":54,"line":594},[52,29860,1756],{"class":58},[52,29862,2869],{"class":73},[52,29864,1762],{"class":58},[52,29866,7039],{"class":73},[52,29868,3431],{"class":58},[52,29870,5544],{"class":371},[52,29872,1768],{"class":58},[52,29874,29875],{"class":54,"line":600},[52,29876,1773],{"class":58},[52,29878,29879],{"class":54,"line":606},[52,29880,1778],{"class":58},[156,29882,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":29884},[29885,29886],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Shapes",{},"/docs/components/circle",{"title":2216,"description":29612},"docs/components/Circle","6IkEAtPpkShaYl4sjatYzEXoZbaTyrMxJZqPHqQVqW4",{"id":29894,"title":29895,"body":29896,"category":28265,"componentType":20007,"description":29903,"extension":168,"meta":30220,"navigation":171,"path":30221,"requiresChild":171,"seo":30222,"stem":30223,"__hash__":30224},"components/docs/components/ConcentricSpin.md","ConcentricSpin",{"type":8,"value":29897,"toc":30216},[29898,29901,29904,29906,29908,29911,29913,30214],[11,29899,29895],{"id":29900},"concentricspin",[15,29902,29903],{},"Concentric rings that each rotate the underlying image by different amounts",[26061,29905],{"component":29895},[23,29907,26065],{"id":20662},[26067,29909],{":props":29910},"[{\"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\"}]",[23,29912,26073],{"id":26072},[217,29914,29915,29971,30030,30086,30144],{":tabs":1543},[43,29916,29918],{"className":45,"code":29917,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,29919,29920,29928,29935,29943,29947,29955,29963],{"__ignoreMap":48},[52,29921,29922,29924,29926],{"class":54,"line":55},[52,29923,59],{"class":58},[52,29925,63],{"class":62},[52,29927,77],{"class":58},[52,29929,29930,29932],{"class":54,"line":80},[52,29931,83],{"class":58},[52,29933,29934],{"class":62},"ConcentricSpin\n",[52,29936,29937,29939,29941],{"class":54,"line":108},[52,29938,17026],{"class":66},[52,29940,70],{"class":58},[52,29942,26104],{"class":73},[52,29944,29945],{"class":54,"line":118},[52,29946,26109],{"class":58},[52,29948,29949,29951,29953],{"class":54,"line":594},[52,29950,2213],{"class":58},[52,29952,2216],{"class":62},[52,29954,105],{"class":58},[52,29956,29957,29959,29961],{"class":54,"line":600},[52,29958,2230],{"class":58},[52,29960,29895],{"class":62},[52,29962,77],{"class":58},[52,29964,29965,29967,29969],{"class":54,"line":606},[52,29966,121],{"class":58},[52,29968,63],{"class":62},[52,29970,77],{"class":58},[43,29972,29974],{"className":360,"code":29973,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,29975,29976,29984,29990,30002,30006,30014,30022],{"__ignoreMap":48},[52,29977,29978,29980,29982],{"class":54,"line":55},[52,29979,59],{"class":58},[52,29981,63],{"class":371},[52,29983,77],{"class":58},[52,29985,29986,29988],{"class":54,"line":80},[52,29987,83],{"class":58},[52,29989,29934],{"class":371},[52,29991,29992,29994,29996,29998,30000],{"class":54,"line":108},[52,29993,17137],{"class":66},[52,29995,70],{"class":231},[52,29997,723],{"class":58},[52,29999,26163],{"class":371},[52,30001,729],{"class":58},[52,30003,30004],{"class":54,"line":118},[52,30005,26109],{"class":58},[52,30007,30008,30010,30012],{"class":54,"line":594},[52,30009,2213],{"class":58},[52,30011,2216],{"class":371},[52,30013,105],{"class":58},[52,30015,30016,30018,30020],{"class":54,"line":600},[52,30017,2230],{"class":58},[52,30019,29895],{"class":371},[52,30021,77],{"class":58},[52,30023,30024,30026,30028],{"class":54,"line":606},[52,30025,121],{"class":58},[52,30027,63],{"class":371},[52,30029,77],{"class":58},[43,30031,30032],{"className":2507,"code":29973,"language":2509,"meta":48,"style":48},[31,30033,30034,30042,30048,30058,30062,30070,30078],{"__ignoreMap":48},[52,30035,30036,30038,30040],{"class":54,"line":55},[52,30037,59],{"class":58},[52,30039,63],{"class":371},[52,30041,77],{"class":58},[52,30043,30044,30046],{"class":54,"line":80},[52,30045,83],{"class":58},[52,30047,29934],{"class":371},[52,30049,30050,30052,30054,30056],{"class":54,"line":108},[52,30051,17137],{"class":66},[52,30053,24004],{"class":58},[52,30055,26163],{"class":371},[52,30057,729],{"class":58},[52,30059,30060],{"class":54,"line":118},[52,30061,26109],{"class":58},[52,30063,30064,30066,30068],{"class":54,"line":594},[52,30065,2213],{"class":58},[52,30067,2216],{"class":371},[52,30069,105],{"class":58},[52,30071,30072,30074,30076],{"class":54,"line":600},[52,30073,2230],{"class":58},[52,30075,29895],{"class":371},[52,30077,77],{"class":58},[52,30079,30080,30082,30084],{"class":54,"line":606},[52,30081,121],{"class":58},[52,30083,63],{"class":371},[52,30085,77],{"class":58},[43,30087,30088],{"className":419,"code":29973,"language":420,"meta":48,"style":48},[31,30089,30090,30098,30104,30116,30120,30128,30136],{"__ignoreMap":48},[52,30091,30092,30094,30096],{"class":54,"line":55},[52,30093,59],{"class":58},[52,30095,63],{"class":371},[52,30097,77],{"class":58},[52,30099,30100,30102],{"class":54,"line":80},[52,30101,83],{"class":58},[52,30103,29934],{"class":371},[52,30105,30106,30108,30110,30112,30114],{"class":54,"line":108},[52,30107,17137],{"class":66},[52,30109,70],{"class":231},[52,30111,723],{"class":58},[52,30113,26163],{"class":371},[52,30115,729],{"class":58},[52,30117,30118],{"class":54,"line":118},[52,30119,26109],{"class":58},[52,30121,30122,30124,30126],{"class":54,"line":594},[52,30123,2213],{"class":58},[52,30125,2216],{"class":371},[52,30127,105],{"class":58},[52,30129,30130,30132,30134],{"class":54,"line":600},[52,30131,2230],{"class":58},[52,30133,29895],{"class":371},[52,30135,77],{"class":58},[52,30137,30138,30140,30142],{"class":54,"line":606},[52,30139,121],{"class":58},[52,30141,63],{"class":371},[52,30143,77],{"class":58},[43,30145,30147],{"className":222,"code":30146,"language":224,"meta":48,"style":48},"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",[31,30148,30149,30159,30163,30177,30181,30194,30202,30206,30210],{"__ignoreMap":48},[52,30150,30151,30153,30155,30157],{"class":54,"line":55},[52,30152,232],{"class":231},[52,30154,8385],{"class":58},[52,30156,238],{"class":231},[52,30158,8390],{"class":73},[52,30160,30161],{"class":54,"line":80},[52,30162,597],{"emptyLinePlaceholder":171},[52,30164,30165,30167,30169,30171,30173,30175],{"class":54,"line":108},[52,30166,1721],{"class":231},[52,30168,1724],{"class":371},[52,30170,1727],{"class":231},[52,30172,1730],{"class":231},[52,30174,1733],{"class":66},[52,30176,1736],{"class":58},[52,30178,30179],{"class":54,"line":118},[52,30180,1751],{"class":58},[52,30182,30183,30185,30188,30190,30192],{"class":54,"line":594},[52,30184,1756],{"class":58},[52,30186,30187],{"class":73},"'ConcentricSpin'",[52,30189,26354],{"class":58},[52,30191,26163],{"class":371},[52,30193,4412],{"class":58},[52,30195,30196,30198,30200],{"class":54,"line":600},[52,30197,3880],{"class":58},[52,30199,2869],{"class":73},[52,30201,2129],{"class":58},[52,30203,30204],{"class":54,"line":606},[52,30205,3897],{"class":58},[52,30207,30208],{"class":54,"line":653},[52,30209,1773],{"class":58},[52,30211,30212],{"class":54,"line":662},[52,30213,1778],{"class":58},[156,30215,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30217},[30218,30219],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/concentricspin",{"title":29895,"description":29903},"docs/components/ConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":30226,"title":30227,"body":30228,"category":26920,"componentType":20001,"description":30235,"extension":168,"meta":30420,"navigation":171,"path":30421,"requiresChild":26923,"seo":30422,"stem":30423,"__hash__":30424},"components/docs/components/ConicGradient.md","ConicGradient",{"type":8,"value":30229,"toc":30416},[30230,30233,30236,30238,30240,30243,30245,30414],[11,30231,30227],{"id":30232},"conicgradient",[15,30234,30235],{},"Colors sweep in a full circle around a center point, like a color wheel",[26061,30237],{"component":30227},[23,30239,26065],{"id":20662},[26067,30241],{":props":30242},"[{\"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\"}]",[23,30244,26073],{"id":26072},[217,30246,30247,30276,30304,30332,30360],{":tabs":1543},[43,30248,30250],{"className":45,"code":30249,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConicGradient />\n\u003C/Shader>\n",[31,30251,30252,30260,30268],{"__ignoreMap":48},[52,30253,30254,30256,30258],{"class":54,"line":55},[52,30255,59],{"class":58},[52,30257,63],{"class":62},[52,30259,77],{"class":58},[52,30261,30262,30264,30266],{"class":54,"line":80},[52,30263,83],{"class":58},[52,30265,30227],{"class":62},[52,30267,105],{"class":58},[52,30269,30270,30272,30274],{"class":54,"line":108},[52,30271,121],{"class":58},[52,30273,63],{"class":62},[52,30275,77],{"class":58},[43,30277,30278],{"className":360,"code":30249,"language":362,"meta":48,"style":48},[31,30279,30280,30288,30296],{"__ignoreMap":48},[52,30281,30282,30284,30286],{"class":54,"line":55},[52,30283,59],{"class":58},[52,30285,63],{"class":371},[52,30287,77],{"class":58},[52,30289,30290,30292,30294],{"class":54,"line":80},[52,30291,83],{"class":58},[52,30293,30227],{"class":371},[52,30295,105],{"class":58},[52,30297,30298,30300,30302],{"class":54,"line":108},[52,30299,121],{"class":58},[52,30301,63],{"class":371},[52,30303,77],{"class":58},[43,30305,30306],{"className":2507,"code":30249,"language":2509,"meta":48,"style":48},[31,30307,30308,30316,30324],{"__ignoreMap":48},[52,30309,30310,30312,30314],{"class":54,"line":55},[52,30311,59],{"class":58},[52,30313,63],{"class":371},[52,30315,77],{"class":58},[52,30317,30318,30320,30322],{"class":54,"line":80},[52,30319,83],{"class":58},[52,30321,30227],{"class":371},[52,30323,105],{"class":58},[52,30325,30326,30328,30330],{"class":54,"line":108},[52,30327,121],{"class":58},[52,30329,63],{"class":371},[52,30331,77],{"class":58},[43,30333,30334],{"className":419,"code":30249,"language":420,"meta":48,"style":48},[31,30335,30336,30344,30352],{"__ignoreMap":48},[52,30337,30338,30340,30342],{"class":54,"line":55},[52,30339,59],{"class":58},[52,30341,63],{"class":371},[52,30343,77],{"class":58},[52,30345,30346,30348,30350],{"class":54,"line":80},[52,30347,83],{"class":58},[52,30349,30227],{"class":371},[52,30351,105],{"class":58},[52,30353,30354,30356,30358],{"class":54,"line":108},[52,30355,121],{"class":58},[52,30357,63],{"class":371},[52,30359,77],{"class":58},[43,30361,30363],{"className":222,"code":30362,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConicGradient', props: {} }\n ]\n})\n",[31,30364,30365,30375,30379,30393,30397,30406,30410],{"__ignoreMap":48},[52,30366,30367,30369,30371,30373],{"class":54,"line":55},[52,30368,232],{"class":231},[52,30370,8385],{"class":58},[52,30372,238],{"class":231},[52,30374,8390],{"class":73},[52,30376,30377],{"class":54,"line":80},[52,30378,597],{"emptyLinePlaceholder":171},[52,30380,30381,30383,30385,30387,30389,30391],{"class":54,"line":108},[52,30382,1721],{"class":231},[52,30384,1724],{"class":371},[52,30386,1727],{"class":231},[52,30388,1730],{"class":231},[52,30390,1733],{"class":66},[52,30392,1736],{"class":58},[52,30394,30395],{"class":54,"line":118},[52,30396,1751],{"class":58},[52,30398,30399,30401,30404],{"class":54,"line":594},[52,30400,1756],{"class":58},[52,30402,30403],{"class":73},"'ConicGradient'",[52,30405,2129],{"class":58},[52,30407,30408],{"class":54,"line":600},[52,30409,1773],{"class":58},[52,30411,30412],{"class":54,"line":606},[52,30413,1778],{"class":58},[156,30415,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":30417},[30418,30419],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/conicgradient",{"title":30227,"description":30235},"docs/components/ConicGradient","NIVNPxXJkDB1SOPz03uSQXaV6QUuIWABabpG6Qi-clQ",{"id":30426,"title":30427,"body":30428,"category":26663,"componentType":20007,"description":30435,"extension":168,"meta":30696,"navigation":171,"path":30697,"requiresChild":171,"seo":30698,"stem":30699,"__hash__":30700},"components/docs/components/ContourLines.md","ContourLines",{"type":8,"value":30429,"toc":30692},[30430,30433,30436,30438,30440,30443,30445,30690],[11,30431,30427],{"id":30432},"contourlines",[15,30434,30435],{},"Draw topographical contour lines based on luminance or alpha",[26061,30437],{"component":30427},[23,30439,26065],{"id":20662},[26067,30441],{":props":30442},"[{\"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)\"}]",[23,30444,26073],{"id":26072},[217,30446,30447,30492,30536,30580,30624],{":tabs":1543},[43,30448,30450],{"className":45,"code":30449,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CContourLines>\n \u003CCircle />\n \u003C/ContourLines>\n\u003C/Shader>\n",[31,30451,30452,30460,30468,30476,30484],{"__ignoreMap":48},[52,30453,30454,30456,30458],{"class":54,"line":55},[52,30455,59],{"class":58},[52,30457,63],{"class":62},[52,30459,77],{"class":58},[52,30461,30462,30464,30466],{"class":54,"line":80},[52,30463,83],{"class":58},[52,30465,30427],{"class":62},[52,30467,77],{"class":58},[52,30469,30470,30472,30474],{"class":54,"line":108},[52,30471,2213],{"class":58},[52,30473,2216],{"class":62},[52,30475,105],{"class":58},[52,30477,30478,30480,30482],{"class":54,"line":118},[52,30479,2230],{"class":58},[52,30481,30427],{"class":62},[52,30483,77],{"class":58},[52,30485,30486,30488,30490],{"class":54,"line":594},[52,30487,121],{"class":58},[52,30489,63],{"class":62},[52,30491,77],{"class":58},[43,30493,30494],{"className":360,"code":30449,"language":362,"meta":48,"style":48},[31,30495,30496,30504,30512,30520,30528],{"__ignoreMap":48},[52,30497,30498,30500,30502],{"class":54,"line":55},[52,30499,59],{"class":58},[52,30501,63],{"class":371},[52,30503,77],{"class":58},[52,30505,30506,30508,30510],{"class":54,"line":80},[52,30507,83],{"class":58},[52,30509,30427],{"class":371},[52,30511,77],{"class":58},[52,30513,30514,30516,30518],{"class":54,"line":108},[52,30515,2213],{"class":58},[52,30517,2216],{"class":371},[52,30519,105],{"class":58},[52,30521,30522,30524,30526],{"class":54,"line":118},[52,30523,2230],{"class":58},[52,30525,30427],{"class":371},[52,30527,77],{"class":58},[52,30529,30530,30532,30534],{"class":54,"line":594},[52,30531,121],{"class":58},[52,30533,63],{"class":371},[52,30535,77],{"class":58},[43,30537,30538],{"className":2507,"code":30449,"language":2509,"meta":48,"style":48},[31,30539,30540,30548,30556,30564,30572],{"__ignoreMap":48},[52,30541,30542,30544,30546],{"class":54,"line":55},[52,30543,59],{"class":58},[52,30545,63],{"class":371},[52,30547,77],{"class":58},[52,30549,30550,30552,30554],{"class":54,"line":80},[52,30551,83],{"class":58},[52,30553,30427],{"class":371},[52,30555,77],{"class":58},[52,30557,30558,30560,30562],{"class":54,"line":108},[52,30559,2213],{"class":58},[52,30561,2216],{"class":371},[52,30563,105],{"class":58},[52,30565,30566,30568,30570],{"class":54,"line":118},[52,30567,2230],{"class":58},[52,30569,30427],{"class":371},[52,30571,77],{"class":58},[52,30573,30574,30576,30578],{"class":54,"line":594},[52,30575,121],{"class":58},[52,30577,63],{"class":371},[52,30579,77],{"class":58},[43,30581,30582],{"className":419,"code":30449,"language":420,"meta":48,"style":48},[31,30583,30584,30592,30600,30608,30616],{"__ignoreMap":48},[52,30585,30586,30588,30590],{"class":54,"line":55},[52,30587,59],{"class":58},[52,30589,63],{"class":371},[52,30591,77],{"class":58},[52,30593,30594,30596,30598],{"class":54,"line":80},[52,30595,83],{"class":58},[52,30597,30427],{"class":371},[52,30599,77],{"class":58},[52,30601,30602,30604,30606],{"class":54,"line":108},[52,30603,2213],{"class":58},[52,30605,2216],{"class":371},[52,30607,105],{"class":58},[52,30609,30610,30612,30614],{"class":54,"line":118},[52,30611,2230],{"class":58},[52,30613,30427],{"class":371},[52,30615,77],{"class":58},[52,30617,30618,30620,30622],{"class":54,"line":594},[52,30619,121],{"class":58},[52,30621,63],{"class":371},[52,30623,77],{"class":58},[43,30625,30627],{"className":222,"code":30626,"language":224,"meta":48,"style":48},"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",[31,30628,30629,30639,30643,30657,30661,30670,30678,30682,30686],{"__ignoreMap":48},[52,30630,30631,30633,30635,30637],{"class":54,"line":55},[52,30632,232],{"class":231},[52,30634,8385],{"class":58},[52,30636,238],{"class":231},[52,30638,8390],{"class":73},[52,30640,30641],{"class":54,"line":80},[52,30642,597],{"emptyLinePlaceholder":171},[52,30644,30645,30647,30649,30651,30653,30655],{"class":54,"line":108},[52,30646,1721],{"class":231},[52,30648,1724],{"class":371},[52,30650,1727],{"class":231},[52,30652,1730],{"class":231},[52,30654,1733],{"class":66},[52,30656,1736],{"class":58},[52,30658,30659],{"class":54,"line":118},[52,30660,1751],{"class":58},[52,30662,30663,30665,30668],{"class":54,"line":594},[52,30664,1756],{"class":58},[52,30666,30667],{"class":73},"'ContourLines'",[52,30669,3875],{"class":58},[52,30671,30672,30674,30676],{"class":54,"line":600},[52,30673,3880],{"class":58},[52,30675,2869],{"class":73},[52,30677,2129],{"class":58},[52,30679,30680],{"class":54,"line":606},[52,30681,3897],{"class":58},[52,30683,30684],{"class":54,"line":653},[52,30685,1773],{"class":58},[52,30687,30688],{"class":54,"line":662},[52,30689,1778],{"class":58},[156,30691,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":30693},[30694,30695],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/contourlines",{"title":30427,"description":30435},"docs/components/ContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":30702,"title":30703,"body":30704,"category":29887,"componentType":20001,"description":30711,"extension":168,"meta":30989,"navigation":171,"path":30990,"requiresChild":26923,"seo":30991,"stem":30992,"__hash__":30993},"components/docs/components/Crescent.md","Crescent",{"type":8,"value":30705,"toc":30985},[30706,30709,30712,30714,30716,30719,30721,30983],[11,30707,30703],{"id":30708},"crescent",[15,30710,30711],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[26061,30713],{"component":30703},[23,30715,26065],{"id":20662},[26067,30717],{":props":30718},"[{\"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\"}]",[23,30720,26073],{"id":26072},[217,30722,30723,30772,30823,30871,30921],{":tabs":1543},[43,30724,30726],{"className":45,"code":30725,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,30727,30728,30736,30743,30751,30760,30764],{"__ignoreMap":48},[52,30729,30730,30732,30734],{"class":54,"line":55},[52,30731,59],{"class":58},[52,30733,63],{"class":62},[52,30735,77],{"class":58},[52,30737,30738,30740],{"class":54,"line":80},[52,30739,83],{"class":58},[52,30741,30742],{"class":62},"Crescent\n",[52,30744,30745,30747,30749],{"class":54,"line":108},[52,30746,6504],{"class":66},[52,30748,70],{"class":58},[52,30750,6460],{"class":73},[52,30752,30753,30755,30757],{"class":54,"line":118},[52,30754,14057],{"class":66},[52,30756,70],{"class":58},[52,30758,30759],{"class":73},"\"0.3\"\n",[52,30761,30762],{"class":54,"line":594},[52,30763,1224],{"class":58},[52,30765,30766,30768,30770],{"class":54,"line":600},[52,30767,121],{"class":58},[52,30769,63],{"class":62},[52,30771,77],{"class":58},[43,30773,30775],{"className":360,"code":30774,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,30776,30777,30785,30791,30799,30811,30815],{"__ignoreMap":48},[52,30778,30779,30781,30783],{"class":54,"line":55},[52,30780,59],{"class":58},[52,30782,63],{"class":371},[52,30784,77],{"class":58},[52,30786,30787,30789],{"class":54,"line":80},[52,30788,83],{"class":58},[52,30790,30742],{"class":371},[52,30792,30793,30795,30797],{"class":54,"line":108},[52,30794,6504],{"class":66},[52,30796,70],{"class":231},[52,30798,6460],{"class":73},[52,30800,30801,30803,30805,30807,30809],{"class":54,"line":118},[52,30802,6514],{"class":66},[52,30804,70],{"class":231},[52,30806,723],{"class":58},[52,30808,18637],{"class":371},[52,30810,729],{"class":58},[52,30812,30813],{"class":54,"line":594},[52,30814,1224],{"class":58},[52,30816,30817,30819,30821],{"class":54,"line":600},[52,30818,121],{"class":58},[52,30820,63],{"class":371},[52,30822,77],{"class":58},[43,30824,30825],{"className":2507,"code":30774,"language":2509,"meta":48,"style":48},[31,30826,30827,30835,30841,30849,30859,30863],{"__ignoreMap":48},[52,30828,30829,30831,30833],{"class":54,"line":55},[52,30830,59],{"class":58},[52,30832,63],{"class":371},[52,30834,77],{"class":58},[52,30836,30837,30839],{"class":54,"line":80},[52,30838,83],{"class":58},[52,30840,30742],{"class":371},[52,30842,30843,30845,30847],{"class":54,"line":108},[52,30844,6504],{"class":66},[52,30846,70],{"class":58},[52,30848,6460],{"class":73},[52,30850,30851,30853,30855,30857],{"class":54,"line":118},[52,30852,6514],{"class":66},[52,30854,24004],{"class":58},[52,30856,18637],{"class":371},[52,30858,729],{"class":58},[52,30860,30861],{"class":54,"line":594},[52,30862,1224],{"class":58},[52,30864,30865,30867,30869],{"class":54,"line":600},[52,30866,121],{"class":58},[52,30868,63],{"class":371},[52,30870,77],{"class":58},[43,30872,30873],{"className":419,"code":30774,"language":420,"meta":48,"style":48},[31,30874,30875,30883,30889,30897,30909,30913],{"__ignoreMap":48},[52,30876,30877,30879,30881],{"class":54,"line":55},[52,30878,59],{"class":58},[52,30880,63],{"class":371},[52,30882,77],{"class":58},[52,30884,30885,30887],{"class":54,"line":80},[52,30886,83],{"class":58},[52,30888,30742],{"class":371},[52,30890,30891,30893,30895],{"class":54,"line":108},[52,30892,6504],{"class":66},[52,30894,70],{"class":231},[52,30896,6460],{"class":73},[52,30898,30899,30901,30903,30905,30907],{"class":54,"line":118},[52,30900,6514],{"class":66},[52,30902,70],{"class":231},[52,30904,723],{"class":58},[52,30906,18637],{"class":371},[52,30908,729],{"class":58},[52,30910,30911],{"class":54,"line":594},[52,30912,1224],{"class":58},[52,30914,30915,30917,30919],{"class":54,"line":600},[52,30916,121],{"class":58},[52,30918,63],{"class":371},[52,30920,77],{"class":58},[43,30922,30924],{"className":222,"code":30923,"language":224,"meta":48,"style":48},"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",[31,30925,30926,30936,30940,30954,30958,30975,30979],{"__ignoreMap":48},[52,30927,30928,30930,30932,30934],{"class":54,"line":55},[52,30929,232],{"class":231},[52,30931,8385],{"class":58},[52,30933,238],{"class":231},[52,30935,8390],{"class":73},[52,30937,30938],{"class":54,"line":80},[52,30939,597],{"emptyLinePlaceholder":171},[52,30941,30942,30944,30946,30948,30950,30952],{"class":54,"line":108},[52,30943,1721],{"class":231},[52,30945,1724],{"class":371},[52,30947,1727],{"class":231},[52,30949,1730],{"class":231},[52,30951,1733],{"class":66},[52,30953,1736],{"class":58},[52,30955,30956],{"class":54,"line":118},[52,30957,1751],{"class":58},[52,30959,30960,30962,30965,30967,30969,30971,30973],{"class":54,"line":594},[52,30961,1756],{"class":58},[52,30963,30964],{"class":73},"'Crescent'",[52,30966,1762],{"class":58},[52,30968,7039],{"class":73},[52,30970,3431],{"class":58},[52,30972,18637],{"class":371},[52,30974,1768],{"class":58},[52,30976,30977],{"class":54,"line":600},[52,30978,1773],{"class":58},[52,30980,30981],{"class":54,"line":606},[52,30982,1778],{"class":58},[156,30984,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30986},[30987,30988],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/crescent",{"title":30703,"description":30711},"docs/components/Crescent","ObqUw-47jUNAlPME041OasGzcc_jSvwXgXEVE3NCaLk",{"id":30995,"title":30996,"body":30997,"category":29887,"componentType":20001,"description":31004,"extension":168,"meta":31282,"navigation":171,"path":31283,"requiresChild":26923,"seo":31284,"stem":31285,"__hash__":31286},"components/docs/components/Cross.md","Cross",{"type":8,"value":30998,"toc":31278},[30999,31002,31005,31007,31009,31012,31014,31276],[11,31000,30996],{"id":31001},"cross",[15,31003,31004],{},"Plus / cross shape with adjustable arm length, width, and rounding",[26061,31006],{"component":30996},[23,31008,26065],{"id":20662},[26067,31010],{":props":31011},"[{\"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\"}]",[23,31013,26073],{"id":26072},[217,31015,31016,31065,31116,31164,31214],{":tabs":1543},[43,31017,31019],{"className":45,"code":31018,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,31020,31021,31029,31036,31044,31053,31057],{"__ignoreMap":48},[52,31022,31023,31025,31027],{"class":54,"line":55},[52,31024,59],{"class":58},[52,31026,63],{"class":62},[52,31028,77],{"class":58},[52,31030,31031,31033],{"class":54,"line":80},[52,31032,83],{"class":58},[52,31034,31035],{"class":62},"Cross\n",[52,31037,31038,31040,31042],{"class":54,"line":108},[52,31039,6504],{"class":66},[52,31041,70],{"class":58},[52,31043,6460],{"class":73},[52,31045,31046,31048,31050],{"class":54,"line":118},[52,31047,14057],{"class":66},[52,31049,70],{"class":58},[52,31051,31052],{"class":73},"\"0.35\"\n",[52,31054,31055],{"class":54,"line":594},[52,31056,1224],{"class":58},[52,31058,31059,31061,31063],{"class":54,"line":600},[52,31060,121],{"class":58},[52,31062,63],{"class":62},[52,31064,77],{"class":58},[43,31066,31068],{"className":360,"code":31067,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,31069,31070,31078,31084,31092,31104,31108],{"__ignoreMap":48},[52,31071,31072,31074,31076],{"class":54,"line":55},[52,31073,59],{"class":58},[52,31075,63],{"class":371},[52,31077,77],{"class":58},[52,31079,31080,31082],{"class":54,"line":80},[52,31081,83],{"class":58},[52,31083,31035],{"class":371},[52,31085,31086,31088,31090],{"class":54,"line":108},[52,31087,6504],{"class":66},[52,31089,70],{"class":231},[52,31091,6460],{"class":73},[52,31093,31094,31096,31098,31100,31102],{"class":54,"line":118},[52,31095,6514],{"class":66},[52,31097,70],{"class":231},[52,31099,723],{"class":58},[52,31101,17786],{"class":371},[52,31103,729],{"class":58},[52,31105,31106],{"class":54,"line":594},[52,31107,1224],{"class":58},[52,31109,31110,31112,31114],{"class":54,"line":600},[52,31111,121],{"class":58},[52,31113,63],{"class":371},[52,31115,77],{"class":58},[43,31117,31118],{"className":2507,"code":31067,"language":2509,"meta":48,"style":48},[31,31119,31120,31128,31134,31142,31152,31156],{"__ignoreMap":48},[52,31121,31122,31124,31126],{"class":54,"line":55},[52,31123,59],{"class":58},[52,31125,63],{"class":371},[52,31127,77],{"class":58},[52,31129,31130,31132],{"class":54,"line":80},[52,31131,83],{"class":58},[52,31133,31035],{"class":371},[52,31135,31136,31138,31140],{"class":54,"line":108},[52,31137,6504],{"class":66},[52,31139,70],{"class":58},[52,31141,6460],{"class":73},[52,31143,31144,31146,31148,31150],{"class":54,"line":118},[52,31145,6514],{"class":66},[52,31147,24004],{"class":58},[52,31149,17786],{"class":371},[52,31151,729],{"class":58},[52,31153,31154],{"class":54,"line":594},[52,31155,1224],{"class":58},[52,31157,31158,31160,31162],{"class":54,"line":600},[52,31159,121],{"class":58},[52,31161,63],{"class":371},[52,31163,77],{"class":58},[43,31165,31166],{"className":419,"code":31067,"language":420,"meta":48,"style":48},[31,31167,31168,31176,31182,31190,31202,31206],{"__ignoreMap":48},[52,31169,31170,31172,31174],{"class":54,"line":55},[52,31171,59],{"class":58},[52,31173,63],{"class":371},[52,31175,77],{"class":58},[52,31177,31178,31180],{"class":54,"line":80},[52,31179,83],{"class":58},[52,31181,31035],{"class":371},[52,31183,31184,31186,31188],{"class":54,"line":108},[52,31185,6504],{"class":66},[52,31187,70],{"class":231},[52,31189,6460],{"class":73},[52,31191,31192,31194,31196,31198,31200],{"class":54,"line":118},[52,31193,6514],{"class":66},[52,31195,70],{"class":231},[52,31197,723],{"class":58},[52,31199,17786],{"class":371},[52,31201,729],{"class":58},[52,31203,31204],{"class":54,"line":594},[52,31205,1224],{"class":58},[52,31207,31208,31210,31212],{"class":54,"line":600},[52,31209,121],{"class":58},[52,31211,63],{"class":371},[52,31213,77],{"class":58},[43,31215,31217],{"className":222,"code":31216,"language":224,"meta":48,"style":48},"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",[31,31218,31219,31229,31233,31247,31251,31268,31272],{"__ignoreMap":48},[52,31220,31221,31223,31225,31227],{"class":54,"line":55},[52,31222,232],{"class":231},[52,31224,8385],{"class":58},[52,31226,238],{"class":231},[52,31228,8390],{"class":73},[52,31230,31231],{"class":54,"line":80},[52,31232,597],{"emptyLinePlaceholder":171},[52,31234,31235,31237,31239,31241,31243,31245],{"class":54,"line":108},[52,31236,1721],{"class":231},[52,31238,1724],{"class":371},[52,31240,1727],{"class":231},[52,31242,1730],{"class":231},[52,31244,1733],{"class":66},[52,31246,1736],{"class":58},[52,31248,31249],{"class":54,"line":118},[52,31250,1751],{"class":58},[52,31252,31253,31255,31258,31260,31262,31264,31266],{"class":54,"line":594},[52,31254,1756],{"class":58},[52,31256,31257],{"class":73},"'Cross'",[52,31259,1762],{"class":58},[52,31261,7039],{"class":73},[52,31263,3431],{"class":58},[52,31265,17786],{"class":371},[52,31267,1768],{"class":58},[52,31269,31270],{"class":54,"line":600},[52,31271,1773],{"class":58},[52,31273,31274],{"class":54,"line":606},[52,31275,1778],{"class":58},[156,31277,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31279},[31280,31281],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/cross",{"title":30996,"description":31004},"docs/components/Cross","8h8ZHf2RZRmwG-7PmNT2Lcb_l-kH3tvrmVN0fWFbTNs",{"id":31288,"title":31289,"body":31290,"category":31558,"componentType":20007,"description":31297,"extension":168,"meta":31559,"navigation":171,"path":31560,"requiresChild":171,"seo":31561,"stem":31562,"__hash__":31563},"components/docs/components/Crystal.md","Crystal",{"type":8,"value":31291,"toc":31554},[31292,31295,31298,31300,31302,31305,31307,31552],[11,31293,31289],{"id":31294},"crystal",[15,31296,31297],{},"Diamond-like crystal lens with faceted refraction.",[26061,31299],{"component":31289},[23,31301,26065],{"id":20662},[26067,31303],{":props":31304},"[{\"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.\"}]",[23,31306,26073],{"id":26072},[217,31308,31309,31354,31398,31442,31486],{":tabs":1543},[43,31310,31312],{"className":45,"code":31311,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrystal>\n \u003CCircle />\n \u003C/Crystal>\n\u003C/Shader>\n",[31,31313,31314,31322,31330,31338,31346],{"__ignoreMap":48},[52,31315,31316,31318,31320],{"class":54,"line":55},[52,31317,59],{"class":58},[52,31319,63],{"class":62},[52,31321,77],{"class":58},[52,31323,31324,31326,31328],{"class":54,"line":80},[52,31325,83],{"class":58},[52,31327,31289],{"class":62},[52,31329,77],{"class":58},[52,31331,31332,31334,31336],{"class":54,"line":108},[52,31333,2213],{"class":58},[52,31335,2216],{"class":62},[52,31337,105],{"class":58},[52,31339,31340,31342,31344],{"class":54,"line":118},[52,31341,2230],{"class":58},[52,31343,31289],{"class":62},[52,31345,77],{"class":58},[52,31347,31348,31350,31352],{"class":54,"line":594},[52,31349,121],{"class":58},[52,31351,63],{"class":62},[52,31353,77],{"class":58},[43,31355,31356],{"className":360,"code":31311,"language":362,"meta":48,"style":48},[31,31357,31358,31366,31374,31382,31390],{"__ignoreMap":48},[52,31359,31360,31362,31364],{"class":54,"line":55},[52,31361,59],{"class":58},[52,31363,63],{"class":371},[52,31365,77],{"class":58},[52,31367,31368,31370,31372],{"class":54,"line":80},[52,31369,83],{"class":58},[52,31371,31289],{"class":371},[52,31373,77],{"class":58},[52,31375,31376,31378,31380],{"class":54,"line":108},[52,31377,2213],{"class":58},[52,31379,2216],{"class":371},[52,31381,105],{"class":58},[52,31383,31384,31386,31388],{"class":54,"line":118},[52,31385,2230],{"class":58},[52,31387,31289],{"class":371},[52,31389,77],{"class":58},[52,31391,31392,31394,31396],{"class":54,"line":594},[52,31393,121],{"class":58},[52,31395,63],{"class":371},[52,31397,77],{"class":58},[43,31399,31400],{"className":2507,"code":31311,"language":2509,"meta":48,"style":48},[31,31401,31402,31410,31418,31426,31434],{"__ignoreMap":48},[52,31403,31404,31406,31408],{"class":54,"line":55},[52,31405,59],{"class":58},[52,31407,63],{"class":371},[52,31409,77],{"class":58},[52,31411,31412,31414,31416],{"class":54,"line":80},[52,31413,83],{"class":58},[52,31415,31289],{"class":371},[52,31417,77],{"class":58},[52,31419,31420,31422,31424],{"class":54,"line":108},[52,31421,2213],{"class":58},[52,31423,2216],{"class":371},[52,31425,105],{"class":58},[52,31427,31428,31430,31432],{"class":54,"line":118},[52,31429,2230],{"class":58},[52,31431,31289],{"class":371},[52,31433,77],{"class":58},[52,31435,31436,31438,31440],{"class":54,"line":594},[52,31437,121],{"class":58},[52,31439,63],{"class":371},[52,31441,77],{"class":58},[43,31443,31444],{"className":419,"code":31311,"language":420,"meta":48,"style":48},[31,31445,31446,31454,31462,31470,31478],{"__ignoreMap":48},[52,31447,31448,31450,31452],{"class":54,"line":55},[52,31449,59],{"class":58},[52,31451,63],{"class":371},[52,31453,77],{"class":58},[52,31455,31456,31458,31460],{"class":54,"line":80},[52,31457,83],{"class":58},[52,31459,31289],{"class":371},[52,31461,77],{"class":58},[52,31463,31464,31466,31468],{"class":54,"line":108},[52,31465,2213],{"class":58},[52,31467,2216],{"class":371},[52,31469,105],{"class":58},[52,31471,31472,31474,31476],{"class":54,"line":118},[52,31473,2230],{"class":58},[52,31475,31289],{"class":371},[52,31477,77],{"class":58},[52,31479,31480,31482,31484],{"class":54,"line":594},[52,31481,121],{"class":58},[52,31483,63],{"class":371},[52,31485,77],{"class":58},[43,31487,31489],{"className":222,"code":31488,"language":224,"meta":48,"style":48},"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",[31,31490,31491,31501,31505,31519,31523,31532,31540,31544,31548],{"__ignoreMap":48},[52,31492,31493,31495,31497,31499],{"class":54,"line":55},[52,31494,232],{"class":231},[52,31496,8385],{"class":58},[52,31498,238],{"class":231},[52,31500,8390],{"class":73},[52,31502,31503],{"class":54,"line":80},[52,31504,597],{"emptyLinePlaceholder":171},[52,31506,31507,31509,31511,31513,31515,31517],{"class":54,"line":108},[52,31508,1721],{"class":231},[52,31510,1724],{"class":371},[52,31512,1727],{"class":231},[52,31514,1730],{"class":231},[52,31516,1733],{"class":66},[52,31518,1736],{"class":58},[52,31520,31521],{"class":54,"line":118},[52,31522,1751],{"class":58},[52,31524,31525,31527,31530],{"class":54,"line":594},[52,31526,1756],{"class":58},[52,31528,31529],{"class":73},"'Crystal'",[52,31531,3875],{"class":58},[52,31533,31534,31536,31538],{"class":54,"line":600},[52,31535,3880],{"class":58},[52,31537,2869],{"class":73},[52,31539,2129],{"class":58},[52,31541,31542],{"class":54,"line":606},[52,31543,3897],{"class":58},[52,31545,31546],{"class":54,"line":653},[52,31547,1773],{"class":58},[52,31549,31550],{"class":54,"line":662},[52,31551,1778],{"class":58},[156,31553,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":31555},[31556,31557],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},"Shape Effects",{},"/docs/components/crystal",{"title":31289,"description":31297},"docs/components/Crystal","-FxLCmCZzp_ueV9QfIlLY-OvVQZj_IC4AWXu45eZ9YA",{"id":31565,"title":11299,"body":31566,"category":29321,"componentType":20007,"description":31573,"extension":168,"meta":31939,"navigation":171,"path":31940,"requiresChild":171,"seo":31941,"stem":31942,"__hash__":31943},"components/docs/components/CursorRipples.md",{"type":8,"value":31567,"toc":31935},[31568,31571,31574,31576,31578,31581,31583,31933],[11,31569,11299],{"id":31570},"cursorripples",[15,31572,31573],{},"Fluid-like ripple distortion",[26061,31575],{"component":11299},[23,31577,26065],{"id":20662},[26067,31579],{":props":31580},"[{\"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\"}]",[23,31582,26073],{"id":26072},[217,31584,31585,31651,31723,31789,31859],{":tabs":1543},[43,31586,31588],{"className":45,"code":31587,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorRipples\n :intensity=\"10\"\n :radius=\"0.5\"\n >\n \u003CCircle />\n \u003C/CursorRipples>\n\u003C/Shader>\n",[31,31589,31590,31598,31605,31614,31623,31627,31635,31643],{"__ignoreMap":48},[52,31591,31592,31594,31596],{"class":54,"line":55},[52,31593,59],{"class":58},[52,31595,63],{"class":62},[52,31597,77],{"class":58},[52,31599,31600,31602],{"class":54,"line":80},[52,31601,83],{"class":58},[52,31603,31604],{"class":62},"CursorRipples\n",[52,31606,31607,31609,31611],{"class":54,"line":108},[52,31608,17026],{"class":66},[52,31610,70],{"class":58},[52,31612,31613],{"class":73},"\"10\"\n",[52,31615,31616,31618,31620],{"class":54,"line":118},[52,31617,14057],{"class":66},[52,31619,70],{"class":58},[52,31621,31622],{"class":73},"\"0.5\"\n",[52,31624,31625],{"class":54,"line":594},[52,31626,26109],{"class":58},[52,31628,31629,31631,31633],{"class":54,"line":600},[52,31630,2213],{"class":58},[52,31632,2216],{"class":62},[52,31634,105],{"class":58},[52,31636,31637,31639,31641],{"class":54,"line":606},[52,31638,2230],{"class":58},[52,31640,11299],{"class":62},[52,31642,77],{"class":58},[52,31644,31645,31647,31649],{"class":54,"line":653},[52,31646,121],{"class":58},[52,31648,63],{"class":62},[52,31650,77],{"class":58},[43,31652,31654],{"className":360,"code":31653,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorRipples\n intensity={10}\n radius={0.5}\n >\n \u003CCircle />\n \u003C/CursorRipples>\n\u003C/Shader>\n",[31,31655,31656,31664,31670,31683,31695,31699,31707,31715],{"__ignoreMap":48},[52,31657,31658,31660,31662],{"class":54,"line":55},[52,31659,59],{"class":58},[52,31661,63],{"class":371},[52,31663,77],{"class":58},[52,31665,31666,31668],{"class":54,"line":80},[52,31667,83],{"class":58},[52,31669,31604],{"class":371},[52,31671,31672,31674,31676,31678,31681],{"class":54,"line":108},[52,31673,17137],{"class":66},[52,31675,70],{"class":231},[52,31677,723],{"class":58},[52,31679,31680],{"class":371},"10",[52,31682,729],{"class":58},[52,31684,31685,31687,31689,31691,31693],{"class":54,"line":118},[52,31686,6514],{"class":66},[52,31688,70],{"class":231},[52,31690,723],{"class":58},[52,31692,4620],{"class":371},[52,31694,729],{"class":58},[52,31696,31697],{"class":54,"line":594},[52,31698,26109],{"class":58},[52,31700,31701,31703,31705],{"class":54,"line":600},[52,31702,2213],{"class":58},[52,31704,2216],{"class":371},[52,31706,105],{"class":58},[52,31708,31709,31711,31713],{"class":54,"line":606},[52,31710,2230],{"class":58},[52,31712,11299],{"class":371},[52,31714,77],{"class":58},[52,31716,31717,31719,31721],{"class":54,"line":653},[52,31718,121],{"class":58},[52,31720,63],{"class":371},[52,31722,77],{"class":58},[43,31724,31725],{"className":2507,"code":31653,"language":2509,"meta":48,"style":48},[31,31726,31727,31735,31741,31751,31761,31765,31773,31781],{"__ignoreMap":48},[52,31728,31729,31731,31733],{"class":54,"line":55},[52,31730,59],{"class":58},[52,31732,63],{"class":371},[52,31734,77],{"class":58},[52,31736,31737,31739],{"class":54,"line":80},[52,31738,83],{"class":58},[52,31740,31604],{"class":371},[52,31742,31743,31745,31747,31749],{"class":54,"line":108},[52,31744,17137],{"class":66},[52,31746,24004],{"class":58},[52,31748,31680],{"class":371},[52,31750,729],{"class":58},[52,31752,31753,31755,31757,31759],{"class":54,"line":118},[52,31754,6514],{"class":66},[52,31756,24004],{"class":58},[52,31758,4620],{"class":371},[52,31760,729],{"class":58},[52,31762,31763],{"class":54,"line":594},[52,31764,26109],{"class":58},[52,31766,31767,31769,31771],{"class":54,"line":600},[52,31768,2213],{"class":58},[52,31770,2216],{"class":371},[52,31772,105],{"class":58},[52,31774,31775,31777,31779],{"class":54,"line":606},[52,31776,2230],{"class":58},[52,31778,11299],{"class":371},[52,31780,77],{"class":58},[52,31782,31783,31785,31787],{"class":54,"line":653},[52,31784,121],{"class":58},[52,31786,63],{"class":371},[52,31788,77],{"class":58},[43,31790,31791],{"className":419,"code":31653,"language":420,"meta":48,"style":48},[31,31792,31793,31801,31807,31819,31831,31835,31843,31851],{"__ignoreMap":48},[52,31794,31795,31797,31799],{"class":54,"line":55},[52,31796,59],{"class":58},[52,31798,63],{"class":371},[52,31800,77],{"class":58},[52,31802,31803,31805],{"class":54,"line":80},[52,31804,83],{"class":58},[52,31806,31604],{"class":371},[52,31808,31809,31811,31813,31815,31817],{"class":54,"line":108},[52,31810,17137],{"class":66},[52,31812,70],{"class":231},[52,31814,723],{"class":58},[52,31816,31680],{"class":371},[52,31818,729],{"class":58},[52,31820,31821,31823,31825,31827,31829],{"class":54,"line":118},[52,31822,6514],{"class":66},[52,31824,70],{"class":231},[52,31826,723],{"class":58},[52,31828,4620],{"class":371},[52,31830,729],{"class":58},[52,31832,31833],{"class":54,"line":594},[52,31834,26109],{"class":58},[52,31836,31837,31839,31841],{"class":54,"line":600},[52,31838,2213],{"class":58},[52,31840,2216],{"class":371},[52,31842,105],{"class":58},[52,31844,31845,31847,31849],{"class":54,"line":606},[52,31846,2230],{"class":58},[52,31848,11299],{"class":371},[52,31850,77],{"class":58},[52,31852,31853,31855,31857],{"class":54,"line":653},[52,31854,121],{"class":58},[52,31856,63],{"class":371},[52,31858,77],{"class":58},[43,31860,31862],{"className":222,"code":31861,"language":224,"meta":48,"style":48},"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",[31,31863,31864,31874,31878,31892,31896,31913,31921,31925,31929],{"__ignoreMap":48},[52,31865,31866,31868,31870,31872],{"class":54,"line":55},[52,31867,232],{"class":231},[52,31869,8385],{"class":58},[52,31871,238],{"class":231},[52,31873,8390],{"class":73},[52,31875,31876],{"class":54,"line":80},[52,31877,597],{"emptyLinePlaceholder":171},[52,31879,31880,31882,31884,31886,31888,31890],{"class":54,"line":108},[52,31881,1721],{"class":231},[52,31883,1724],{"class":371},[52,31885,1727],{"class":231},[52,31887,1730],{"class":231},[52,31889,1733],{"class":66},[52,31891,1736],{"class":58},[52,31893,31894],{"class":54,"line":118},[52,31895,1751],{"class":58},[52,31897,31898,31900,31903,31905,31907,31909,31911],{"class":54,"line":594},[52,31899,1756],{"class":58},[52,31901,31902],{"class":73},"'CursorRipples'",[52,31904,26354],{"class":58},[52,31906,31680],{"class":371},[52,31908,3431],{"class":58},[52,31910,4620],{"class":371},[52,31912,4412],{"class":58},[52,31914,31915,31917,31919],{"class":54,"line":600},[52,31916,3880],{"class":58},[52,31918,2869],{"class":73},[52,31920,2129],{"class":58},[52,31922,31923],{"class":54,"line":606},[52,31924,3897],{"class":58},[52,31926,31927],{"class":54,"line":653},[52,31928,1773],{"class":58},[52,31930,31931],{"class":54,"line":662},[52,31932,1778],{"class":58},[156,31934,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31936},[31937,31938],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/cursorripples",{"title":11299,"description":31573},"docs/components/CursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":31945,"title":113,"body":31946,"category":29321,"componentType":20001,"description":31953,"extension":168,"meta":32193,"navigation":171,"path":32194,"requiresChild":26923,"seo":32195,"stem":32196,"__hash__":32197},"components/docs/components/CursorTrail.md",{"type":8,"value":31947,"toc":32189},[31948,31951,31954,31956,31958,31961,31963,32187],[11,31949,113],{"id":31950},"cursortrail",[15,31952,31953],{},"Animated trail effect that tracks cursor movement",[26061,31955],{"component":113},[23,31957,26065],{"id":20662},[26067,31959],{":props":31960},"[{\"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\"}]",[23,31962,26073],{"id":26072},[217,31964,31965,32005,32048,32088,32130],{":tabs":1543},[43,31966,31968],{"className":45,"code":31967,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n />\n\u003C/Shader>\n",[31,31969,31970,31978,31985,31993,31997],{"__ignoreMap":48},[52,31971,31972,31974,31976],{"class":54,"line":55},[52,31973,59],{"class":58},[52,31975,63],{"class":62},[52,31977,77],{"class":58},[52,31979,31980,31982],{"class":54,"line":80},[52,31981,83],{"class":58},[52,31983,31984],{"class":62},"CursorTrail\n",[52,31986,31987,31989,31991],{"class":54,"line":108},[52,31988,14057],{"class":66},[52,31990,70],{"class":58},[52,31992,31622],{"class":73},[52,31994,31995],{"class":54,"line":118},[52,31996,1224],{"class":58},[52,31998,31999,32001,32003],{"class":54,"line":594},[52,32000,121],{"class":58},[52,32002,63],{"class":62},[52,32004,77],{"class":58},[43,32006,32008],{"className":360,"code":32007,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n />\n\u003C/Shader>\n",[31,32009,32010,32018,32024,32036,32040],{"__ignoreMap":48},[52,32011,32012,32014,32016],{"class":54,"line":55},[52,32013,59],{"class":58},[52,32015,63],{"class":371},[52,32017,77],{"class":58},[52,32019,32020,32022],{"class":54,"line":80},[52,32021,83],{"class":58},[52,32023,31984],{"class":371},[52,32025,32026,32028,32030,32032,32034],{"class":54,"line":108},[52,32027,6514],{"class":66},[52,32029,70],{"class":231},[52,32031,723],{"class":58},[52,32033,4620],{"class":371},[52,32035,729],{"class":58},[52,32037,32038],{"class":54,"line":118},[52,32039,1224],{"class":58},[52,32041,32042,32044,32046],{"class":54,"line":594},[52,32043,121],{"class":58},[52,32045,63],{"class":371},[52,32047,77],{"class":58},[43,32049,32050],{"className":2507,"code":32007,"language":2509,"meta":48,"style":48},[31,32051,32052,32060,32066,32076,32080],{"__ignoreMap":48},[52,32053,32054,32056,32058],{"class":54,"line":55},[52,32055,59],{"class":58},[52,32057,63],{"class":371},[52,32059,77],{"class":58},[52,32061,32062,32064],{"class":54,"line":80},[52,32063,83],{"class":58},[52,32065,31984],{"class":371},[52,32067,32068,32070,32072,32074],{"class":54,"line":108},[52,32069,6514],{"class":66},[52,32071,24004],{"class":58},[52,32073,4620],{"class":371},[52,32075,729],{"class":58},[52,32077,32078],{"class":54,"line":118},[52,32079,1224],{"class":58},[52,32081,32082,32084,32086],{"class":54,"line":594},[52,32083,121],{"class":58},[52,32085,63],{"class":371},[52,32087,77],{"class":58},[43,32089,32090],{"className":419,"code":32007,"language":420,"meta":48,"style":48},[31,32091,32092,32100,32106,32118,32122],{"__ignoreMap":48},[52,32093,32094,32096,32098],{"class":54,"line":55},[52,32095,59],{"class":58},[52,32097,63],{"class":371},[52,32099,77],{"class":58},[52,32101,32102,32104],{"class":54,"line":80},[52,32103,83],{"class":58},[52,32105,31984],{"class":371},[52,32107,32108,32110,32112,32114,32116],{"class":54,"line":108},[52,32109,6514],{"class":66},[52,32111,70],{"class":231},[52,32113,723],{"class":58},[52,32115,4620],{"class":371},[52,32117,729],{"class":58},[52,32119,32120],{"class":54,"line":118},[52,32121,1224],{"class":58},[52,32123,32124,32126,32128],{"class":54,"line":594},[52,32125,121],{"class":58},[52,32127,63],{"class":371},[52,32129,77],{"class":58},[43,32131,32133],{"className":222,"code":32132,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorTrail', props: { radius: 0.5 } }\n ]\n})\n",[31,32134,32135,32145,32149,32163,32167,32179,32183],{"__ignoreMap":48},[52,32136,32137,32139,32141,32143],{"class":54,"line":55},[52,32138,232],{"class":231},[52,32140,8385],{"class":58},[52,32142,238],{"class":231},[52,32144,8390],{"class":73},[52,32146,32147],{"class":54,"line":80},[52,32148,597],{"emptyLinePlaceholder":171},[52,32150,32151,32153,32155,32157,32159,32161],{"class":54,"line":108},[52,32152,1721],{"class":231},[52,32154,1724],{"class":371},[52,32156,1727],{"class":231},[52,32158,1730],{"class":231},[52,32160,1733],{"class":66},[52,32162,1736],{"class":58},[52,32164,32165],{"class":54,"line":118},[52,32166,1751],{"class":58},[52,32168,32169,32171,32173,32175,32177],{"class":54,"line":594},[52,32170,1756],{"class":58},[52,32172,20493],{"class":73},[52,32174,4407],{"class":58},[52,32176,4620],{"class":371},[52,32178,1768],{"class":58},[52,32180,32181],{"class":54,"line":600},[52,32182,1773],{"class":58},[52,32184,32185],{"class":54,"line":606},[52,32186,1778],{"class":58},[156,32188,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32190},[32191,32192],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/cursortrail",{"title":113,"description":31953},"docs/components/CursorTrail","wUUBquiR90VnfJRcmSsJKwtWkuTdT_kDTHSJz6U1CeI",{"id":32199,"title":32200,"body":32201,"category":26920,"componentType":20001,"description":32208,"extension":168,"meta":32393,"navigation":171,"path":32394,"requiresChild":26923,"seo":32395,"stem":32396,"__hash__":32397},"components/docs/components/DiamondGradient.md","DiamondGradient",{"type":8,"value":32202,"toc":32389},[32203,32206,32209,32211,32213,32216,32218,32387],[11,32204,32200],{"id":32205},"diamondgradient",[15,32207,32208],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[26061,32210],{"component":32200},[23,32212,26065],{"id":20662},[26067,32214],{":props":32215},"[{\"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\"}]",[23,32217,26073],{"id":26072},[217,32219,32220,32249,32277,32305,32333],{":tabs":1543},[43,32221,32223],{"className":45,"code":32222,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[31,32224,32225,32233,32241],{"__ignoreMap":48},[52,32226,32227,32229,32231],{"class":54,"line":55},[52,32228,59],{"class":58},[52,32230,63],{"class":62},[52,32232,77],{"class":58},[52,32234,32235,32237,32239],{"class":54,"line":80},[52,32236,83],{"class":58},[52,32238,32200],{"class":62},[52,32240,105],{"class":58},[52,32242,32243,32245,32247],{"class":54,"line":108},[52,32244,121],{"class":58},[52,32246,63],{"class":62},[52,32248,77],{"class":58},[43,32250,32251],{"className":360,"code":32222,"language":362,"meta":48,"style":48},[31,32252,32253,32261,32269],{"__ignoreMap":48},[52,32254,32255,32257,32259],{"class":54,"line":55},[52,32256,59],{"class":58},[52,32258,63],{"class":371},[52,32260,77],{"class":58},[52,32262,32263,32265,32267],{"class":54,"line":80},[52,32264,83],{"class":58},[52,32266,32200],{"class":371},[52,32268,105],{"class":58},[52,32270,32271,32273,32275],{"class":54,"line":108},[52,32272,121],{"class":58},[52,32274,63],{"class":371},[52,32276,77],{"class":58},[43,32278,32279],{"className":2507,"code":32222,"language":2509,"meta":48,"style":48},[31,32280,32281,32289,32297],{"__ignoreMap":48},[52,32282,32283,32285,32287],{"class":54,"line":55},[52,32284,59],{"class":58},[52,32286,63],{"class":371},[52,32288,77],{"class":58},[52,32290,32291,32293,32295],{"class":54,"line":80},[52,32292,83],{"class":58},[52,32294,32200],{"class":371},[52,32296,105],{"class":58},[52,32298,32299,32301,32303],{"class":54,"line":108},[52,32300,121],{"class":58},[52,32302,63],{"class":371},[52,32304,77],{"class":58},[43,32306,32307],{"className":419,"code":32222,"language":420,"meta":48,"style":48},[31,32308,32309,32317,32325],{"__ignoreMap":48},[52,32310,32311,32313,32315],{"class":54,"line":55},[52,32312,59],{"class":58},[52,32314,63],{"class":371},[52,32316,77],{"class":58},[52,32318,32319,32321,32323],{"class":54,"line":80},[52,32320,83],{"class":58},[52,32322,32200],{"class":371},[52,32324,105],{"class":58},[52,32326,32327,32329,32331],{"class":54,"line":108},[52,32328,121],{"class":58},[52,32330,63],{"class":371},[52,32332,77],{"class":58},[43,32334,32336],{"className":222,"code":32335,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiamondGradient', props: {} }\n ]\n})\n",[31,32337,32338,32348,32352,32366,32370,32379,32383],{"__ignoreMap":48},[52,32339,32340,32342,32344,32346],{"class":54,"line":55},[52,32341,232],{"class":231},[52,32343,8385],{"class":58},[52,32345,238],{"class":231},[52,32347,8390],{"class":73},[52,32349,32350],{"class":54,"line":80},[52,32351,597],{"emptyLinePlaceholder":171},[52,32353,32354,32356,32358,32360,32362,32364],{"class":54,"line":108},[52,32355,1721],{"class":231},[52,32357,1724],{"class":371},[52,32359,1727],{"class":231},[52,32361,1730],{"class":231},[52,32363,1733],{"class":66},[52,32365,1736],{"class":58},[52,32367,32368],{"class":54,"line":118},[52,32369,1751],{"class":58},[52,32371,32372,32374,32377],{"class":54,"line":594},[52,32373,1756],{"class":58},[52,32375,32376],{"class":73},"'DiamondGradient'",[52,32378,2129],{"class":58},[52,32380,32381],{"class":54,"line":600},[52,32382,1773],{"class":58},[52,32384,32385],{"class":54,"line":606},[52,32386,1778],{"class":58},[156,32388,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":32390},[32391,32392],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/diamondgradient",{"title":32200,"description":32208},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":32399,"title":32400,"body":32401,"category":26385,"componentType":20007,"description":32408,"extension":168,"meta":32726,"navigation":171,"path":32727,"requiresChild":171,"seo":32728,"stem":32729,"__hash__":32730},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":32402,"toc":32722},[32403,32406,32409,32411,32413,32416,32418,32720],[11,32404,32400],{"id":32405},"diffuseblur",[15,32407,32408],{},"Grain-like pixel displacement at random",[26061,32410],{"component":32400},[23,32412,26065],{"id":20662},[26067,32414],{":props":32415},"[{\"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\"}]",[23,32417,26073],{"id":26072},[217,32419,32420,32477,32536,32592,32650],{":tabs":1543},[43,32421,32423],{"className":45,"code":32422,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,32424,32425,32433,32440,32449,32453,32461,32469],{"__ignoreMap":48},[52,32426,32427,32429,32431],{"class":54,"line":55},[52,32428,59],{"class":58},[52,32430,63],{"class":62},[52,32432,77],{"class":58},[52,32434,32435,32437],{"class":54,"line":80},[52,32436,83],{"class":58},[52,32438,32439],{"class":62},"DiffuseBlur\n",[52,32441,32442,32444,32446],{"class":54,"line":108},[52,32443,17026],{"class":66},[52,32445,70],{"class":58},[52,32447,32448],{"class":73},"\"30\"\n",[52,32450,32451],{"class":54,"line":118},[52,32452,26109],{"class":58},[52,32454,32455,32457,32459],{"class":54,"line":594},[52,32456,2213],{"class":58},[52,32458,2216],{"class":62},[52,32460,105],{"class":58},[52,32462,32463,32465,32467],{"class":54,"line":600},[52,32464,2230],{"class":58},[52,32466,32400],{"class":62},[52,32468,77],{"class":58},[52,32470,32471,32473,32475],{"class":54,"line":606},[52,32472,121],{"class":58},[52,32474,63],{"class":62},[52,32476,77],{"class":58},[43,32478,32480],{"className":360,"code":32479,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,32481,32482,32490,32496,32508,32512,32520,32528],{"__ignoreMap":48},[52,32483,32484,32486,32488],{"class":54,"line":55},[52,32485,59],{"class":58},[52,32487,63],{"class":371},[52,32489,77],{"class":58},[52,32491,32492,32494],{"class":54,"line":80},[52,32493,83],{"class":58},[52,32495,32439],{"class":371},[52,32497,32498,32500,32502,32504,32506],{"class":54,"line":108},[52,32499,17137],{"class":66},[52,32501,70],{"class":231},[52,32503,723],{"class":58},[52,32505,12348],{"class":371},[52,32507,729],{"class":58},[52,32509,32510],{"class":54,"line":118},[52,32511,26109],{"class":58},[52,32513,32514,32516,32518],{"class":54,"line":594},[52,32515,2213],{"class":58},[52,32517,2216],{"class":371},[52,32519,105],{"class":58},[52,32521,32522,32524,32526],{"class":54,"line":600},[52,32523,2230],{"class":58},[52,32525,32400],{"class":371},[52,32527,77],{"class":58},[52,32529,32530,32532,32534],{"class":54,"line":606},[52,32531,121],{"class":58},[52,32533,63],{"class":371},[52,32535,77],{"class":58},[43,32537,32538],{"className":2507,"code":32479,"language":2509,"meta":48,"style":48},[31,32539,32540,32548,32554,32564,32568,32576,32584],{"__ignoreMap":48},[52,32541,32542,32544,32546],{"class":54,"line":55},[52,32543,59],{"class":58},[52,32545,63],{"class":371},[52,32547,77],{"class":58},[52,32549,32550,32552],{"class":54,"line":80},[52,32551,83],{"class":58},[52,32553,32439],{"class":371},[52,32555,32556,32558,32560,32562],{"class":54,"line":108},[52,32557,17137],{"class":66},[52,32559,24004],{"class":58},[52,32561,12348],{"class":371},[52,32563,729],{"class":58},[52,32565,32566],{"class":54,"line":118},[52,32567,26109],{"class":58},[52,32569,32570,32572,32574],{"class":54,"line":594},[52,32571,2213],{"class":58},[52,32573,2216],{"class":371},[52,32575,105],{"class":58},[52,32577,32578,32580,32582],{"class":54,"line":600},[52,32579,2230],{"class":58},[52,32581,32400],{"class":371},[52,32583,77],{"class":58},[52,32585,32586,32588,32590],{"class":54,"line":606},[52,32587,121],{"class":58},[52,32589,63],{"class":371},[52,32591,77],{"class":58},[43,32593,32594],{"className":419,"code":32479,"language":420,"meta":48,"style":48},[31,32595,32596,32604,32610,32622,32626,32634,32642],{"__ignoreMap":48},[52,32597,32598,32600,32602],{"class":54,"line":55},[52,32599,59],{"class":58},[52,32601,63],{"class":371},[52,32603,77],{"class":58},[52,32605,32606,32608],{"class":54,"line":80},[52,32607,83],{"class":58},[52,32609,32439],{"class":371},[52,32611,32612,32614,32616,32618,32620],{"class":54,"line":108},[52,32613,17137],{"class":66},[52,32615,70],{"class":231},[52,32617,723],{"class":58},[52,32619,12348],{"class":371},[52,32621,729],{"class":58},[52,32623,32624],{"class":54,"line":118},[52,32625,26109],{"class":58},[52,32627,32628,32630,32632],{"class":54,"line":594},[52,32629,2213],{"class":58},[52,32631,2216],{"class":371},[52,32633,105],{"class":58},[52,32635,32636,32638,32640],{"class":54,"line":600},[52,32637,2230],{"class":58},[52,32639,32400],{"class":371},[52,32641,77],{"class":58},[52,32643,32644,32646,32648],{"class":54,"line":606},[52,32645,121],{"class":58},[52,32647,63],{"class":371},[52,32649,77],{"class":58},[43,32651,32653],{"className":222,"code":32652,"language":224,"meta":48,"style":48},"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",[31,32654,32655,32665,32669,32683,32687,32700,32708,32712,32716],{"__ignoreMap":48},[52,32656,32657,32659,32661,32663],{"class":54,"line":55},[52,32658,232],{"class":231},[52,32660,8385],{"class":58},[52,32662,238],{"class":231},[52,32664,8390],{"class":73},[52,32666,32667],{"class":54,"line":80},[52,32668,597],{"emptyLinePlaceholder":171},[52,32670,32671,32673,32675,32677,32679,32681],{"class":54,"line":108},[52,32672,1721],{"class":231},[52,32674,1724],{"class":371},[52,32676,1727],{"class":231},[52,32678,1730],{"class":231},[52,32680,1733],{"class":66},[52,32682,1736],{"class":58},[52,32684,32685],{"class":54,"line":118},[52,32686,1751],{"class":58},[52,32688,32689,32691,32694,32696,32698],{"class":54,"line":594},[52,32690,1756],{"class":58},[52,32692,32693],{"class":73},"'DiffuseBlur'",[52,32695,26354],{"class":58},[52,32697,12348],{"class":371},[52,32699,4412],{"class":58},[52,32701,32702,32704,32706],{"class":54,"line":600},[52,32703,3880],{"class":58},[52,32705,2869],{"class":73},[52,32707,2129],{"class":58},[52,32709,32710],{"class":54,"line":606},[52,32711,3897],{"class":58},[52,32713,32714],{"class":54,"line":653},[52,32715,1773],{"class":58},[52,32717,32718],{"class":54,"line":662},[52,32719,1778],{"class":58},[156,32721,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32723},[32724,32725],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/diffuseblur",{"title":32400,"description":32408},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":32732,"title":32733,"body":32734,"category":26663,"componentType":20007,"description":32741,"extension":168,"meta":33002,"navigation":171,"path":33003,"requiresChild":171,"seo":33004,"stem":33005,"__hash__":33006},"components/docs/components/Dither.md","Dither",{"type":8,"value":32735,"toc":32998},[32736,32739,32742,32744,32746,32749,32751,32996],[11,32737,32733],{"id":32738},"dither",[15,32740,32741],{},"Dithering effect with multiple pattern options",[26061,32743],{"component":32733},[23,32745,26065],{"id":20662},[26067,32747],{":props":32748},"[{\"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\"}]",[23,32750,26073],{"id":26072},[217,32752,32753,32798,32842,32886,32930],{":tabs":1543},[43,32754,32756],{"className":45,"code":32755,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[31,32757,32758,32766,32774,32782,32790],{"__ignoreMap":48},[52,32759,32760,32762,32764],{"class":54,"line":55},[52,32761,59],{"class":58},[52,32763,63],{"class":62},[52,32765,77],{"class":58},[52,32767,32768,32770,32772],{"class":54,"line":80},[52,32769,83],{"class":58},[52,32771,32733],{"class":62},[52,32773,77],{"class":58},[52,32775,32776,32778,32780],{"class":54,"line":108},[52,32777,2213],{"class":58},[52,32779,2216],{"class":62},[52,32781,105],{"class":58},[52,32783,32784,32786,32788],{"class":54,"line":118},[52,32785,2230],{"class":58},[52,32787,32733],{"class":62},[52,32789,77],{"class":58},[52,32791,32792,32794,32796],{"class":54,"line":594},[52,32793,121],{"class":58},[52,32795,63],{"class":62},[52,32797,77],{"class":58},[43,32799,32800],{"className":360,"code":32755,"language":362,"meta":48,"style":48},[31,32801,32802,32810,32818,32826,32834],{"__ignoreMap":48},[52,32803,32804,32806,32808],{"class":54,"line":55},[52,32805,59],{"class":58},[52,32807,63],{"class":371},[52,32809,77],{"class":58},[52,32811,32812,32814,32816],{"class":54,"line":80},[52,32813,83],{"class":58},[52,32815,32733],{"class":371},[52,32817,77],{"class":58},[52,32819,32820,32822,32824],{"class":54,"line":108},[52,32821,2213],{"class":58},[52,32823,2216],{"class":371},[52,32825,105],{"class":58},[52,32827,32828,32830,32832],{"class":54,"line":118},[52,32829,2230],{"class":58},[52,32831,32733],{"class":371},[52,32833,77],{"class":58},[52,32835,32836,32838,32840],{"class":54,"line":594},[52,32837,121],{"class":58},[52,32839,63],{"class":371},[52,32841,77],{"class":58},[43,32843,32844],{"className":2507,"code":32755,"language":2509,"meta":48,"style":48},[31,32845,32846,32854,32862,32870,32878],{"__ignoreMap":48},[52,32847,32848,32850,32852],{"class":54,"line":55},[52,32849,59],{"class":58},[52,32851,63],{"class":371},[52,32853,77],{"class":58},[52,32855,32856,32858,32860],{"class":54,"line":80},[52,32857,83],{"class":58},[52,32859,32733],{"class":371},[52,32861,77],{"class":58},[52,32863,32864,32866,32868],{"class":54,"line":108},[52,32865,2213],{"class":58},[52,32867,2216],{"class":371},[52,32869,105],{"class":58},[52,32871,32872,32874,32876],{"class":54,"line":118},[52,32873,2230],{"class":58},[52,32875,32733],{"class":371},[52,32877,77],{"class":58},[52,32879,32880,32882,32884],{"class":54,"line":594},[52,32881,121],{"class":58},[52,32883,63],{"class":371},[52,32885,77],{"class":58},[43,32887,32888],{"className":419,"code":32755,"language":420,"meta":48,"style":48},[31,32889,32890,32898,32906,32914,32922],{"__ignoreMap":48},[52,32891,32892,32894,32896],{"class":54,"line":55},[52,32893,59],{"class":58},[52,32895,63],{"class":371},[52,32897,77],{"class":58},[52,32899,32900,32902,32904],{"class":54,"line":80},[52,32901,83],{"class":58},[52,32903,32733],{"class":371},[52,32905,77],{"class":58},[52,32907,32908,32910,32912],{"class":54,"line":108},[52,32909,2213],{"class":58},[52,32911,2216],{"class":371},[52,32913,105],{"class":58},[52,32915,32916,32918,32920],{"class":54,"line":118},[52,32917,2230],{"class":58},[52,32919,32733],{"class":371},[52,32921,77],{"class":58},[52,32923,32924,32926,32928],{"class":54,"line":594},[52,32925,121],{"class":58},[52,32927,63],{"class":371},[52,32929,77],{"class":58},[43,32931,32933],{"className":222,"code":32932,"language":224,"meta":48,"style":48},"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",[31,32934,32935,32945,32949,32963,32967,32976,32984,32988,32992],{"__ignoreMap":48},[52,32936,32937,32939,32941,32943],{"class":54,"line":55},[52,32938,232],{"class":231},[52,32940,8385],{"class":58},[52,32942,238],{"class":231},[52,32944,8390],{"class":73},[52,32946,32947],{"class":54,"line":80},[52,32948,597],{"emptyLinePlaceholder":171},[52,32950,32951,32953,32955,32957,32959,32961],{"class":54,"line":108},[52,32952,1721],{"class":231},[52,32954,1724],{"class":371},[52,32956,1727],{"class":231},[52,32958,1730],{"class":231},[52,32960,1733],{"class":66},[52,32962,1736],{"class":58},[52,32964,32965],{"class":54,"line":118},[52,32966,1751],{"class":58},[52,32968,32969,32971,32974],{"class":54,"line":594},[52,32970,1756],{"class":58},[52,32972,32973],{"class":73},"'Dither'",[52,32975,3875],{"class":58},[52,32977,32978,32980,32982],{"class":54,"line":600},[52,32979,3880],{"class":58},[52,32981,2869],{"class":73},[52,32983,2129],{"class":58},[52,32985,32986],{"class":54,"line":606},[52,32987,3897],{"class":58},[52,32989,32990],{"class":54,"line":653},[52,32991,1773],{"class":58},[52,32993,32994],{"class":54,"line":662},[52,32995,1778],{"class":58},[156,32997,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":32999},[33000,33001],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/dither",{"title":32733,"description":32741},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":33008,"title":33009,"body":33010,"category":26920,"componentType":20001,"description":33017,"extension":168,"meta":33245,"navigation":171,"path":33246,"requiresChild":26923,"seo":33247,"stem":33248,"__hash__":33249},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":33011,"toc":33241},[33012,33015,33018,33020,33022,33025,33027,33239],[11,33013,33009],{"id":33014},"dotgrid",[15,33016,33017],{},"Grid of dots with optional twinkling animation",[26061,33019],{"component":33009},[23,33021,26065],{"id":20662},[26067,33023],{":props":33024},"[{\"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)\"}]",[23,33026,26073],{"id":26072},[217,33028,33029,33068,33106,33144,33182],{":tabs":1543},[43,33030,33032],{"className":45,"code":33031,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,33033,33034,33042,33048,33056,33060],{"__ignoreMap":48},[52,33035,33036,33038,33040],{"class":54,"line":55},[52,33037,59],{"class":58},[52,33039,63],{"class":62},[52,33041,77],{"class":58},[52,33043,33044,33046],{"class":54,"line":80},[52,33045,83],{"class":58},[52,33047,16160],{"class":62},[52,33049,33050,33052,33054],{"class":54,"line":108},[52,33051,6504],{"class":66},[52,33053,70],{"class":58},[52,33055,6460],{"class":73},[52,33057,33058],{"class":54,"line":118},[52,33059,1224],{"class":58},[52,33061,33062,33064,33066],{"class":54,"line":594},[52,33063,121],{"class":58},[52,33065,63],{"class":62},[52,33067,77],{"class":58},[43,33069,33070],{"className":360,"code":33031,"language":362,"meta":48,"style":48},[31,33071,33072,33080,33086,33094,33098],{"__ignoreMap":48},[52,33073,33074,33076,33078],{"class":54,"line":55},[52,33075,59],{"class":58},[52,33077,63],{"class":371},[52,33079,77],{"class":58},[52,33081,33082,33084],{"class":54,"line":80},[52,33083,83],{"class":58},[52,33085,16160],{"class":371},[52,33087,33088,33090,33092],{"class":54,"line":108},[52,33089,6504],{"class":66},[52,33091,70],{"class":231},[52,33093,6460],{"class":73},[52,33095,33096],{"class":54,"line":118},[52,33097,1224],{"class":58},[52,33099,33100,33102,33104],{"class":54,"line":594},[52,33101,121],{"class":58},[52,33103,63],{"class":371},[52,33105,77],{"class":58},[43,33107,33108],{"className":2507,"code":33031,"language":2509,"meta":48,"style":48},[31,33109,33110,33118,33124,33132,33136],{"__ignoreMap":48},[52,33111,33112,33114,33116],{"class":54,"line":55},[52,33113,59],{"class":58},[52,33115,63],{"class":371},[52,33117,77],{"class":58},[52,33119,33120,33122],{"class":54,"line":80},[52,33121,83],{"class":58},[52,33123,16160],{"class":371},[52,33125,33126,33128,33130],{"class":54,"line":108},[52,33127,6504],{"class":66},[52,33129,70],{"class":58},[52,33131,6460],{"class":73},[52,33133,33134],{"class":54,"line":118},[52,33135,1224],{"class":58},[52,33137,33138,33140,33142],{"class":54,"line":594},[52,33139,121],{"class":58},[52,33141,63],{"class":371},[52,33143,77],{"class":58},[43,33145,33146],{"className":419,"code":33031,"language":420,"meta":48,"style":48},[31,33147,33148,33156,33162,33170,33174],{"__ignoreMap":48},[52,33149,33150,33152,33154],{"class":54,"line":55},[52,33151,59],{"class":58},[52,33153,63],{"class":371},[52,33155,77],{"class":58},[52,33157,33158,33160],{"class":54,"line":80},[52,33159,83],{"class":58},[52,33161,16160],{"class":371},[52,33163,33164,33166,33168],{"class":54,"line":108},[52,33165,6504],{"class":66},[52,33167,70],{"class":231},[52,33169,6460],{"class":73},[52,33171,33172],{"class":54,"line":118},[52,33173,1224],{"class":58},[52,33175,33176,33178,33180],{"class":54,"line":594},[52,33177,121],{"class":58},[52,33179,63],{"class":371},[52,33181,77],{"class":58},[43,33183,33185],{"className":222,"code":33184,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DotGrid', props: { color: '#ffffff' } }\n ]\n})\n",[31,33186,33187,33197,33201,33215,33219,33231,33235],{"__ignoreMap":48},[52,33188,33189,33191,33193,33195],{"class":54,"line":55},[52,33190,232],{"class":231},[52,33192,8385],{"class":58},[52,33194,238],{"class":231},[52,33196,8390],{"class":73},[52,33198,33199],{"class":54,"line":80},[52,33200,597],{"emptyLinePlaceholder":171},[52,33202,33203,33205,33207,33209,33211,33213],{"class":54,"line":108},[52,33204,1721],{"class":231},[52,33206,1724],{"class":371},[52,33208,1727],{"class":231},[52,33210,1730],{"class":231},[52,33212,1733],{"class":66},[52,33214,1736],{"class":58},[52,33216,33217],{"class":54,"line":118},[52,33218,1751],{"class":58},[52,33220,33221,33223,33225,33227,33229],{"class":54,"line":594},[52,33222,1756],{"class":58},[52,33224,16711],{"class":73},[52,33226,1762],{"class":58},[52,33228,7039],{"class":73},[52,33230,1768],{"class":58},[52,33232,33233],{"class":54,"line":600},[52,33234,1773],{"class":58},[52,33236,33237],{"class":54,"line":606},[52,33238,1778],{"class":58},[156,33240,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33242},[33243,33244],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/dotgrid",{"title":33009,"description":33017},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":33251,"title":33252,"body":33253,"category":26663,"componentType":20007,"description":33260,"extension":168,"meta":33614,"navigation":171,"path":33615,"requiresChild":171,"seo":33616,"stem":33617,"__hash__":33618},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":33254,"toc":33610},[33255,33258,33261,33263,33265,33268,33270,33608],[11,33256,33252],{"id":33257},"dropshadow",[15,33259,33260],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[26061,33262],{"component":33252},[23,33264,26065],{"id":20662},[26067,33266],{":props":33267},"[{\"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\"},{\"name\":\"cutout\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Hide the original layer and show only the shadow\"}]",[23,33269,26073],{"id":26072},[217,33271,33272,33336,33403,33467,33533],{":tabs":1543},[43,33273,33275],{"className":45,"code":33274,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/DropShadow>\n\u003C/Shader>\n",[31,33276,33277,33285,33292,33300,33308,33312,33320,33328],{"__ignoreMap":48},[52,33278,33279,33281,33283],{"class":54,"line":55},[52,33280,59],{"class":58},[52,33282,63],{"class":62},[52,33284,77],{"class":58},[52,33286,33287,33289],{"class":54,"line":80},[52,33288,83],{"class":58},[52,33290,33291],{"class":62},"DropShadow\n",[52,33293,33294,33296,33298],{"class":54,"line":108},[52,33295,6504],{"class":66},[52,33297,70],{"class":58},[52,33299,16131],{"class":73},[52,33301,33302,33304,33306],{"class":54,"line":118},[52,33303,17026],{"class":66},[52,33305,70],{"class":58},[52,33307,31622],{"class":73},[52,33309,33310],{"class":54,"line":594},[52,33311,26109],{"class":58},[52,33313,33314,33316,33318],{"class":54,"line":600},[52,33315,2213],{"class":58},[52,33317,2216],{"class":62},[52,33319,105],{"class":58},[52,33321,33322,33324,33326],{"class":54,"line":606},[52,33323,2230],{"class":58},[52,33325,33252],{"class":62},[52,33327,77],{"class":58},[52,33329,33330,33332,33334],{"class":54,"line":653},[52,33331,121],{"class":58},[52,33333,63],{"class":62},[52,33335,77],{"class":58},[43,33337,33339],{"className":360,"code":33338,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/DropShadow>\n\u003C/Shader>\n",[31,33340,33341,33349,33355,33363,33375,33379,33387,33395],{"__ignoreMap":48},[52,33342,33343,33345,33347],{"class":54,"line":55},[52,33344,59],{"class":58},[52,33346,63],{"class":371},[52,33348,77],{"class":58},[52,33350,33351,33353],{"class":54,"line":80},[52,33352,83],{"class":58},[52,33354,33291],{"class":371},[52,33356,33357,33359,33361],{"class":54,"line":108},[52,33358,6504],{"class":66},[52,33360,70],{"class":231},[52,33362,16131],{"class":73},[52,33364,33365,33367,33369,33371,33373],{"class":54,"line":118},[52,33366,17137],{"class":66},[52,33368,70],{"class":231},[52,33370,723],{"class":58},[52,33372,4620],{"class":371},[52,33374,729],{"class":58},[52,33376,33377],{"class":54,"line":594},[52,33378,26109],{"class":58},[52,33380,33381,33383,33385],{"class":54,"line":600},[52,33382,2213],{"class":58},[52,33384,2216],{"class":371},[52,33386,105],{"class":58},[52,33388,33389,33391,33393],{"class":54,"line":606},[52,33390,2230],{"class":58},[52,33392,33252],{"class":371},[52,33394,77],{"class":58},[52,33396,33397,33399,33401],{"class":54,"line":653},[52,33398,121],{"class":58},[52,33400,63],{"class":371},[52,33402,77],{"class":58},[43,33404,33405],{"className":2507,"code":33338,"language":2509,"meta":48,"style":48},[31,33406,33407,33415,33421,33429,33439,33443,33451,33459],{"__ignoreMap":48},[52,33408,33409,33411,33413],{"class":54,"line":55},[52,33410,59],{"class":58},[52,33412,63],{"class":371},[52,33414,77],{"class":58},[52,33416,33417,33419],{"class":54,"line":80},[52,33418,83],{"class":58},[52,33420,33291],{"class":371},[52,33422,33423,33425,33427],{"class":54,"line":108},[52,33424,6504],{"class":66},[52,33426,70],{"class":58},[52,33428,16131],{"class":73},[52,33430,33431,33433,33435,33437],{"class":54,"line":118},[52,33432,17137],{"class":66},[52,33434,24004],{"class":58},[52,33436,4620],{"class":371},[52,33438,729],{"class":58},[52,33440,33441],{"class":54,"line":594},[52,33442,26109],{"class":58},[52,33444,33445,33447,33449],{"class":54,"line":600},[52,33446,2213],{"class":58},[52,33448,2216],{"class":371},[52,33450,105],{"class":58},[52,33452,33453,33455,33457],{"class":54,"line":606},[52,33454,2230],{"class":58},[52,33456,33252],{"class":371},[52,33458,77],{"class":58},[52,33460,33461,33463,33465],{"class":54,"line":653},[52,33462,121],{"class":58},[52,33464,63],{"class":371},[52,33466,77],{"class":58},[43,33468,33469],{"className":419,"code":33338,"language":420,"meta":48,"style":48},[31,33470,33471,33479,33485,33493,33505,33509,33517,33525],{"__ignoreMap":48},[52,33472,33473,33475,33477],{"class":54,"line":55},[52,33474,59],{"class":58},[52,33476,63],{"class":371},[52,33478,77],{"class":58},[52,33480,33481,33483],{"class":54,"line":80},[52,33482,83],{"class":58},[52,33484,33291],{"class":371},[52,33486,33487,33489,33491],{"class":54,"line":108},[52,33488,6504],{"class":66},[52,33490,70],{"class":231},[52,33492,16131],{"class":73},[52,33494,33495,33497,33499,33501,33503],{"class":54,"line":118},[52,33496,17137],{"class":66},[52,33498,70],{"class":231},[52,33500,723],{"class":58},[52,33502,4620],{"class":371},[52,33504,729],{"class":58},[52,33506,33507],{"class":54,"line":594},[52,33508,26109],{"class":58},[52,33510,33511,33513,33515],{"class":54,"line":600},[52,33512,2213],{"class":58},[52,33514,2216],{"class":371},[52,33516,105],{"class":58},[52,33518,33519,33521,33523],{"class":54,"line":606},[52,33520,2230],{"class":58},[52,33522,33252],{"class":371},[52,33524,77],{"class":58},[52,33526,33527,33529,33531],{"class":54,"line":653},[52,33528,121],{"class":58},[52,33530,63],{"class":371},[52,33532,77],{"class":58},[43,33534,33536],{"className":222,"code":33535,"language":224,"meta":48,"style":48},"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",[31,33537,33538,33548,33552,33566,33570,33588,33596,33600,33604],{"__ignoreMap":48},[52,33539,33540,33542,33544,33546],{"class":54,"line":55},[52,33541,232],{"class":231},[52,33543,8385],{"class":58},[52,33545,238],{"class":231},[52,33547,8390],{"class":73},[52,33549,33550],{"class":54,"line":80},[52,33551,597],{"emptyLinePlaceholder":171},[52,33553,33554,33556,33558,33560,33562,33564],{"class":54,"line":108},[52,33555,1721],{"class":231},[52,33557,1724],{"class":371},[52,33559,1727],{"class":231},[52,33561,1730],{"class":231},[52,33563,1733],{"class":66},[52,33565,1736],{"class":58},[52,33567,33568],{"class":54,"line":118},[52,33569,1751],{"class":58},[52,33571,33572,33574,33577,33579,33581,33584,33586],{"class":54,"line":594},[52,33573,1756],{"class":58},[52,33575,33576],{"class":73},"'DropShadow'",[52,33578,1762],{"class":58},[52,33580,16690],{"class":73},[52,33582,33583],{"class":58},", intensity: ",[52,33585,4620],{"class":371},[52,33587,4412],{"class":58},[52,33589,33590,33592,33594],{"class":54,"line":600},[52,33591,3880],{"class":58},[52,33593,2869],{"class":73},[52,33595,2129],{"class":58},[52,33597,33598],{"class":54,"line":606},[52,33599,3897],{"class":58},[52,33601,33602],{"class":54,"line":653},[52,33603,1773],{"class":58},[52,33605,33606],{"class":54,"line":662},[52,33607,1778],{"class":58},[156,33609,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33611},[33612,33613],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/dropshadow",{"title":33252,"description":33260},"docs/components/DropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":33620,"title":33621,"body":33622,"category":27931,"componentType":20007,"description":33629,"extension":168,"meta":33890,"navigation":171,"path":33891,"requiresChild":171,"seo":33892,"stem":33893,"__hash__":33894},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":33623,"toc":33886},[33624,33627,33630,33632,33634,33637,33639,33884],[11,33625,33621],{"id":33626},"duotone",[15,33628,33629],{},"Map colors to two tones based on luminance",[26061,33631],{"component":33621},[23,33633,26065],{"id":20662},[26067,33635],{":props":33636},"[{\"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\"}]",[23,33638,26073],{"id":26072},[217,33640,33641,33686,33730,33774,33818],{":tabs":1543},[43,33642,33644],{"className":45,"code":33643,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[31,33645,33646,33654,33662,33670,33678],{"__ignoreMap":48},[52,33647,33648,33650,33652],{"class":54,"line":55},[52,33649,59],{"class":58},[52,33651,63],{"class":62},[52,33653,77],{"class":58},[52,33655,33656,33658,33660],{"class":54,"line":80},[52,33657,83],{"class":58},[52,33659,33621],{"class":62},[52,33661,77],{"class":58},[52,33663,33664,33666,33668],{"class":54,"line":108},[52,33665,2213],{"class":58},[52,33667,2216],{"class":62},[52,33669,105],{"class":58},[52,33671,33672,33674,33676],{"class":54,"line":118},[52,33673,2230],{"class":58},[52,33675,33621],{"class":62},[52,33677,77],{"class":58},[52,33679,33680,33682,33684],{"class":54,"line":594},[52,33681,121],{"class":58},[52,33683,63],{"class":62},[52,33685,77],{"class":58},[43,33687,33688],{"className":360,"code":33643,"language":362,"meta":48,"style":48},[31,33689,33690,33698,33706,33714,33722],{"__ignoreMap":48},[52,33691,33692,33694,33696],{"class":54,"line":55},[52,33693,59],{"class":58},[52,33695,63],{"class":371},[52,33697,77],{"class":58},[52,33699,33700,33702,33704],{"class":54,"line":80},[52,33701,83],{"class":58},[52,33703,33621],{"class":371},[52,33705,77],{"class":58},[52,33707,33708,33710,33712],{"class":54,"line":108},[52,33709,2213],{"class":58},[52,33711,2216],{"class":371},[52,33713,105],{"class":58},[52,33715,33716,33718,33720],{"class":54,"line":118},[52,33717,2230],{"class":58},[52,33719,33621],{"class":371},[52,33721,77],{"class":58},[52,33723,33724,33726,33728],{"class":54,"line":594},[52,33725,121],{"class":58},[52,33727,63],{"class":371},[52,33729,77],{"class":58},[43,33731,33732],{"className":2507,"code":33643,"language":2509,"meta":48,"style":48},[31,33733,33734,33742,33750,33758,33766],{"__ignoreMap":48},[52,33735,33736,33738,33740],{"class":54,"line":55},[52,33737,59],{"class":58},[52,33739,63],{"class":371},[52,33741,77],{"class":58},[52,33743,33744,33746,33748],{"class":54,"line":80},[52,33745,83],{"class":58},[52,33747,33621],{"class":371},[52,33749,77],{"class":58},[52,33751,33752,33754,33756],{"class":54,"line":108},[52,33753,2213],{"class":58},[52,33755,2216],{"class":371},[52,33757,105],{"class":58},[52,33759,33760,33762,33764],{"class":54,"line":118},[52,33761,2230],{"class":58},[52,33763,33621],{"class":371},[52,33765,77],{"class":58},[52,33767,33768,33770,33772],{"class":54,"line":594},[52,33769,121],{"class":58},[52,33771,63],{"class":371},[52,33773,77],{"class":58},[43,33775,33776],{"className":419,"code":33643,"language":420,"meta":48,"style":48},[31,33777,33778,33786,33794,33802,33810],{"__ignoreMap":48},[52,33779,33780,33782,33784],{"class":54,"line":55},[52,33781,59],{"class":58},[52,33783,63],{"class":371},[52,33785,77],{"class":58},[52,33787,33788,33790,33792],{"class":54,"line":80},[52,33789,83],{"class":58},[52,33791,33621],{"class":371},[52,33793,77],{"class":58},[52,33795,33796,33798,33800],{"class":54,"line":108},[52,33797,2213],{"class":58},[52,33799,2216],{"class":371},[52,33801,105],{"class":58},[52,33803,33804,33806,33808],{"class":54,"line":118},[52,33805,2230],{"class":58},[52,33807,33621],{"class":371},[52,33809,77],{"class":58},[52,33811,33812,33814,33816],{"class":54,"line":594},[52,33813,121],{"class":58},[52,33815,63],{"class":371},[52,33817,77],{"class":58},[43,33819,33821],{"className":222,"code":33820,"language":224,"meta":48,"style":48},"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",[31,33822,33823,33833,33837,33851,33855,33864,33872,33876,33880],{"__ignoreMap":48},[52,33824,33825,33827,33829,33831],{"class":54,"line":55},[52,33826,232],{"class":231},[52,33828,8385],{"class":58},[52,33830,238],{"class":231},[52,33832,8390],{"class":73},[52,33834,33835],{"class":54,"line":80},[52,33836,597],{"emptyLinePlaceholder":171},[52,33838,33839,33841,33843,33845,33847,33849],{"class":54,"line":108},[52,33840,1721],{"class":231},[52,33842,1724],{"class":371},[52,33844,1727],{"class":231},[52,33846,1730],{"class":231},[52,33848,1733],{"class":66},[52,33850,1736],{"class":58},[52,33852,33853],{"class":54,"line":118},[52,33854,1751],{"class":58},[52,33856,33857,33859,33862],{"class":54,"line":594},[52,33858,1756],{"class":58},[52,33860,33861],{"class":73},"'Duotone'",[52,33863,3875],{"class":58},[52,33865,33866,33868,33870],{"class":54,"line":600},[52,33867,3880],{"class":58},[52,33869,2869],{"class":73},[52,33871,2129],{"class":58},[52,33873,33874],{"class":54,"line":606},[52,33875,3897],{"class":58},[52,33877,33878],{"class":54,"line":653},[52,33879,1773],{"class":58},[52,33881,33882],{"class":54,"line":662},[52,33883,1778],{"class":58},[156,33885,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":33887},[33888,33889],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/duotone",{"title":33621,"description":33629},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":33896,"title":33897,"body":33898,"category":29887,"componentType":20001,"description":33905,"extension":168,"meta":34135,"navigation":171,"path":34136,"requiresChild":26923,"seo":34137,"stem":34138,"__hash__":34139},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":33899,"toc":34131},[33900,33903,33906,33908,33910,33913,33915,34129],[11,33901,33897],{"id":33902},"ellipse",[15,33904,33905],{},"Ellipse with independently adjustable horizontal and vertical radii",[26061,33907],{"component":33897},[23,33909,26065],{"id":20662},[26067,33911],{":props":33912},"[{\"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\"}]",[23,33914,26073],{"id":26072},[217,33916,33917,33957,33995,34033,34071],{":tabs":1543},[43,33918,33920],{"className":45,"code":33919,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,33921,33922,33930,33937,33945,33949],{"__ignoreMap":48},[52,33923,33924,33926,33928],{"class":54,"line":55},[52,33925,59],{"class":58},[52,33927,63],{"class":62},[52,33929,77],{"class":58},[52,33931,33932,33934],{"class":54,"line":80},[52,33933,83],{"class":58},[52,33935,33936],{"class":62},"Ellipse\n",[52,33938,33939,33941,33943],{"class":54,"line":108},[52,33940,6504],{"class":66},[52,33942,70],{"class":58},[52,33944,6460],{"class":73},[52,33946,33947],{"class":54,"line":118},[52,33948,1224],{"class":58},[52,33950,33951,33953,33955],{"class":54,"line":594},[52,33952,121],{"class":58},[52,33954,63],{"class":62},[52,33956,77],{"class":58},[43,33958,33959],{"className":360,"code":33919,"language":362,"meta":48,"style":48},[31,33960,33961,33969,33975,33983,33987],{"__ignoreMap":48},[52,33962,33963,33965,33967],{"class":54,"line":55},[52,33964,59],{"class":58},[52,33966,63],{"class":371},[52,33968,77],{"class":58},[52,33970,33971,33973],{"class":54,"line":80},[52,33972,83],{"class":58},[52,33974,33936],{"class":371},[52,33976,33977,33979,33981],{"class":54,"line":108},[52,33978,6504],{"class":66},[52,33980,70],{"class":231},[52,33982,6460],{"class":73},[52,33984,33985],{"class":54,"line":118},[52,33986,1224],{"class":58},[52,33988,33989,33991,33993],{"class":54,"line":594},[52,33990,121],{"class":58},[52,33992,63],{"class":371},[52,33994,77],{"class":58},[43,33996,33997],{"className":2507,"code":33919,"language":2509,"meta":48,"style":48},[31,33998,33999,34007,34013,34021,34025],{"__ignoreMap":48},[52,34000,34001,34003,34005],{"class":54,"line":55},[52,34002,59],{"class":58},[52,34004,63],{"class":371},[52,34006,77],{"class":58},[52,34008,34009,34011],{"class":54,"line":80},[52,34010,83],{"class":58},[52,34012,33936],{"class":371},[52,34014,34015,34017,34019],{"class":54,"line":108},[52,34016,6504],{"class":66},[52,34018,70],{"class":58},[52,34020,6460],{"class":73},[52,34022,34023],{"class":54,"line":118},[52,34024,1224],{"class":58},[52,34026,34027,34029,34031],{"class":54,"line":594},[52,34028,121],{"class":58},[52,34030,63],{"class":371},[52,34032,77],{"class":58},[43,34034,34035],{"className":419,"code":33919,"language":420,"meta":48,"style":48},[31,34036,34037,34045,34051,34059,34063],{"__ignoreMap":48},[52,34038,34039,34041,34043],{"class":54,"line":55},[52,34040,59],{"class":58},[52,34042,63],{"class":371},[52,34044,77],{"class":58},[52,34046,34047,34049],{"class":54,"line":80},[52,34048,83],{"class":58},[52,34050,33936],{"class":371},[52,34052,34053,34055,34057],{"class":54,"line":108},[52,34054,6504],{"class":66},[52,34056,70],{"class":231},[52,34058,6460],{"class":73},[52,34060,34061],{"class":54,"line":118},[52,34062,1224],{"class":58},[52,34064,34065,34067,34069],{"class":54,"line":594},[52,34066,121],{"class":58},[52,34068,63],{"class":371},[52,34070,77],{"class":58},[43,34072,34074],{"className":222,"code":34073,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ellipse', props: { color: '#ffffff' } }\n ]\n})\n",[31,34075,34076,34086,34090,34104,34108,34121,34125],{"__ignoreMap":48},[52,34077,34078,34080,34082,34084],{"class":54,"line":55},[52,34079,232],{"class":231},[52,34081,8385],{"class":58},[52,34083,238],{"class":231},[52,34085,8390],{"class":73},[52,34087,34088],{"class":54,"line":80},[52,34089,597],{"emptyLinePlaceholder":171},[52,34091,34092,34094,34096,34098,34100,34102],{"class":54,"line":108},[52,34093,1721],{"class":231},[52,34095,1724],{"class":371},[52,34097,1727],{"class":231},[52,34099,1730],{"class":231},[52,34101,1733],{"class":66},[52,34103,1736],{"class":58},[52,34105,34106],{"class":54,"line":118},[52,34107,1751],{"class":58},[52,34109,34110,34112,34115,34117,34119],{"class":54,"line":594},[52,34111,1756],{"class":58},[52,34113,34114],{"class":73},"'Ellipse'",[52,34116,1762],{"class":58},[52,34118,7039],{"class":73},[52,34120,1768],{"class":58},[52,34122,34123],{"class":54,"line":600},[52,34124,1773],{"class":58},[52,34126,34127],{"class":54,"line":606},[52,34128,1778],{"class":58},[156,34130,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34132},[34133,34134],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/ellipse",{"title":33897,"description":33905},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":34141,"title":17637,"body":34142,"category":31558,"componentType":20007,"description":34149,"extension":168,"meta":34409,"navigation":171,"path":34410,"requiresChild":171,"seo":34411,"stem":34412,"__hash__":34413},"components/docs/components/Emboss.md",{"type":8,"value":34143,"toc":34405},[34144,34147,34150,34152,34154,34157,34159,34403],[11,34145,17637],{"id":34146},"emboss",[15,34148,34149],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[26061,34151],{"component":17637},[23,34153,26065],{"id":20662},[26067,34155],{":props":34156},"[{\"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.\"}]",[23,34158,26073],{"id":26072},[217,34160,34161,34206,34250,34294,34338],{":tabs":1543},[43,34162,34164],{"className":45,"code":34163,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[31,34165,34166,34174,34182,34190,34198],{"__ignoreMap":48},[52,34167,34168,34170,34172],{"class":54,"line":55},[52,34169,59],{"class":58},[52,34171,63],{"class":62},[52,34173,77],{"class":58},[52,34175,34176,34178,34180],{"class":54,"line":80},[52,34177,83],{"class":58},[52,34179,17637],{"class":62},[52,34181,77],{"class":58},[52,34183,34184,34186,34188],{"class":54,"line":108},[52,34185,2213],{"class":58},[52,34187,2216],{"class":62},[52,34189,105],{"class":58},[52,34191,34192,34194,34196],{"class":54,"line":118},[52,34193,2230],{"class":58},[52,34195,17637],{"class":62},[52,34197,77],{"class":58},[52,34199,34200,34202,34204],{"class":54,"line":594},[52,34201,121],{"class":58},[52,34203,63],{"class":62},[52,34205,77],{"class":58},[43,34207,34208],{"className":360,"code":34163,"language":362,"meta":48,"style":48},[31,34209,34210,34218,34226,34234,34242],{"__ignoreMap":48},[52,34211,34212,34214,34216],{"class":54,"line":55},[52,34213,59],{"class":58},[52,34215,63],{"class":371},[52,34217,77],{"class":58},[52,34219,34220,34222,34224],{"class":54,"line":80},[52,34221,83],{"class":58},[52,34223,17637],{"class":371},[52,34225,77],{"class":58},[52,34227,34228,34230,34232],{"class":54,"line":108},[52,34229,2213],{"class":58},[52,34231,2216],{"class":371},[52,34233,105],{"class":58},[52,34235,34236,34238,34240],{"class":54,"line":118},[52,34237,2230],{"class":58},[52,34239,17637],{"class":371},[52,34241,77],{"class":58},[52,34243,34244,34246,34248],{"class":54,"line":594},[52,34245,121],{"class":58},[52,34247,63],{"class":371},[52,34249,77],{"class":58},[43,34251,34252],{"className":2507,"code":34163,"language":2509,"meta":48,"style":48},[31,34253,34254,34262,34270,34278,34286],{"__ignoreMap":48},[52,34255,34256,34258,34260],{"class":54,"line":55},[52,34257,59],{"class":58},[52,34259,63],{"class":371},[52,34261,77],{"class":58},[52,34263,34264,34266,34268],{"class":54,"line":80},[52,34265,83],{"class":58},[52,34267,17637],{"class":371},[52,34269,77],{"class":58},[52,34271,34272,34274,34276],{"class":54,"line":108},[52,34273,2213],{"class":58},[52,34275,2216],{"class":371},[52,34277,105],{"class":58},[52,34279,34280,34282,34284],{"class":54,"line":118},[52,34281,2230],{"class":58},[52,34283,17637],{"class":371},[52,34285,77],{"class":58},[52,34287,34288,34290,34292],{"class":54,"line":594},[52,34289,121],{"class":58},[52,34291,63],{"class":371},[52,34293,77],{"class":58},[43,34295,34296],{"className":419,"code":34163,"language":420,"meta":48,"style":48},[31,34297,34298,34306,34314,34322,34330],{"__ignoreMap":48},[52,34299,34300,34302,34304],{"class":54,"line":55},[52,34301,59],{"class":58},[52,34303,63],{"class":371},[52,34305,77],{"class":58},[52,34307,34308,34310,34312],{"class":54,"line":80},[52,34309,83],{"class":58},[52,34311,17637],{"class":371},[52,34313,77],{"class":58},[52,34315,34316,34318,34320],{"class":54,"line":108},[52,34317,2213],{"class":58},[52,34319,2216],{"class":371},[52,34321,105],{"class":58},[52,34323,34324,34326,34328],{"class":54,"line":118},[52,34325,2230],{"class":58},[52,34327,17637],{"class":371},[52,34329,77],{"class":58},[52,34331,34332,34334,34336],{"class":54,"line":594},[52,34333,121],{"class":58},[52,34335,63],{"class":371},[52,34337,77],{"class":58},[43,34339,34341],{"className":222,"code":34340,"language":224,"meta":48,"style":48},"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",[31,34342,34343,34353,34357,34371,34375,34383,34391,34395,34399],{"__ignoreMap":48},[52,34344,34345,34347,34349,34351],{"class":54,"line":55},[52,34346,232],{"class":231},[52,34348,8385],{"class":58},[52,34350,238],{"class":231},[52,34352,8390],{"class":73},[52,34354,34355],{"class":54,"line":80},[52,34356,597],{"emptyLinePlaceholder":171},[52,34358,34359,34361,34363,34365,34367,34369],{"class":54,"line":108},[52,34360,1721],{"class":231},[52,34362,1724],{"class":371},[52,34364,1727],{"class":231},[52,34366,1730],{"class":231},[52,34368,1733],{"class":66},[52,34370,1736],{"class":58},[52,34372,34373],{"class":54,"line":118},[52,34374,1751],{"class":58},[52,34376,34377,34379,34381],{"class":54,"line":594},[52,34378,1756],{"class":58},[52,34380,18285],{"class":73},[52,34382,3875],{"class":58},[52,34384,34385,34387,34389],{"class":54,"line":600},[52,34386,3880],{"class":58},[52,34388,2869],{"class":73},[52,34390,2129],{"class":58},[52,34392,34393],{"class":54,"line":606},[52,34394,3897],{"class":58},[52,34396,34397],{"class":54,"line":653},[52,34398,1773],{"class":58},[52,34400,34401],{"class":54,"line":662},[52,34402,1778],{"class":58},[156,34404,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":34406},[34407,34408],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/emboss",{"title":17637,"description":34149},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":34415,"title":34416,"body":34417,"category":26920,"componentType":20001,"description":34424,"extension":168,"meta":34609,"navigation":171,"path":34610,"requiresChild":26923,"seo":34611,"stem":34612,"__hash__":34613},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":34418,"toc":34605},[34419,34422,34425,34427,34429,34432,34434,34603],[11,34420,34416],{"id":34421},"fallinglines",[15,34423,34424],{},"Directional falling lines with a leading-to-trailing color fade",[26061,34426],{"component":34416},[23,34428,26065],{"id":20662},[26067,34430],{":props":34431},"[{\"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)\"}]",[23,34433,26073],{"id":26072},[217,34435,34436,34465,34493,34521,34549],{":tabs":1543},[43,34437,34439],{"className":45,"code":34438,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[31,34440,34441,34449,34457],{"__ignoreMap":48},[52,34442,34443,34445,34447],{"class":54,"line":55},[52,34444,59],{"class":58},[52,34446,63],{"class":62},[52,34448,77],{"class":58},[52,34450,34451,34453,34455],{"class":54,"line":80},[52,34452,83],{"class":58},[52,34454,34416],{"class":62},[52,34456,105],{"class":58},[52,34458,34459,34461,34463],{"class":54,"line":108},[52,34460,121],{"class":58},[52,34462,63],{"class":62},[52,34464,77],{"class":58},[43,34466,34467],{"className":360,"code":34438,"language":362,"meta":48,"style":48},[31,34468,34469,34477,34485],{"__ignoreMap":48},[52,34470,34471,34473,34475],{"class":54,"line":55},[52,34472,59],{"class":58},[52,34474,63],{"class":371},[52,34476,77],{"class":58},[52,34478,34479,34481,34483],{"class":54,"line":80},[52,34480,83],{"class":58},[52,34482,34416],{"class":371},[52,34484,105],{"class":58},[52,34486,34487,34489,34491],{"class":54,"line":108},[52,34488,121],{"class":58},[52,34490,63],{"class":371},[52,34492,77],{"class":58},[43,34494,34495],{"className":2507,"code":34438,"language":2509,"meta":48,"style":48},[31,34496,34497,34505,34513],{"__ignoreMap":48},[52,34498,34499,34501,34503],{"class":54,"line":55},[52,34500,59],{"class":58},[52,34502,63],{"class":371},[52,34504,77],{"class":58},[52,34506,34507,34509,34511],{"class":54,"line":80},[52,34508,83],{"class":58},[52,34510,34416],{"class":371},[52,34512,105],{"class":58},[52,34514,34515,34517,34519],{"class":54,"line":108},[52,34516,121],{"class":58},[52,34518,63],{"class":371},[52,34520,77],{"class":58},[43,34522,34523],{"className":419,"code":34438,"language":420,"meta":48,"style":48},[31,34524,34525,34533,34541],{"__ignoreMap":48},[52,34526,34527,34529,34531],{"class":54,"line":55},[52,34528,59],{"class":58},[52,34530,63],{"class":371},[52,34532,77],{"class":58},[52,34534,34535,34537,34539],{"class":54,"line":80},[52,34536,83],{"class":58},[52,34538,34416],{"class":371},[52,34540,105],{"class":58},[52,34542,34543,34545,34547],{"class":54,"line":108},[52,34544,121],{"class":58},[52,34546,63],{"class":371},[52,34548,77],{"class":58},[43,34550,34552],{"className":222,"code":34551,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FallingLines', props: {} }\n ]\n})\n",[31,34553,34554,34564,34568,34582,34586,34595,34599],{"__ignoreMap":48},[52,34555,34556,34558,34560,34562],{"class":54,"line":55},[52,34557,232],{"class":231},[52,34559,8385],{"class":58},[52,34561,238],{"class":231},[52,34563,8390],{"class":73},[52,34565,34566],{"class":54,"line":80},[52,34567,597],{"emptyLinePlaceholder":171},[52,34569,34570,34572,34574,34576,34578,34580],{"class":54,"line":108},[52,34571,1721],{"class":231},[52,34573,1724],{"class":371},[52,34575,1727],{"class":231},[52,34577,1730],{"class":231},[52,34579,1733],{"class":66},[52,34581,1736],{"class":58},[52,34583,34584],{"class":54,"line":118},[52,34585,1751],{"class":58},[52,34587,34588,34590,34593],{"class":54,"line":594},[52,34589,1756],{"class":58},[52,34591,34592],{"class":73},"'FallingLines'",[52,34594,2129],{"class":58},[52,34596,34597],{"class":54,"line":600},[52,34598,1773],{"class":58},[52,34600,34601],{"class":54,"line":606},[52,34602,1778],{"class":58},[156,34604,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":34606},[34607,34608],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/fallinglines",{"title":34416,"description":34424},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":34615,"title":34616,"body":34617,"category":26663,"componentType":20007,"description":34624,"extension":168,"meta":34885,"navigation":171,"path":34886,"requiresChild":171,"seo":34887,"stem":34888,"__hash__":34889},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":34618,"toc":34881},[34619,34622,34625,34627,34629,34632,34634,34879],[11,34620,34616],{"id":34621},"filmgrain",[15,34623,34624],{},"Analog film grain texture overlay",[26061,34626],{"component":34616},[23,34628,26065],{"id":20662},[26067,34630],{":props":34631},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"}]",[23,34633,26073],{"id":26072},[217,34635,34636,34681,34725,34769,34813],{":tabs":1543},[43,34637,34639],{"className":45,"code":34638,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[31,34640,34641,34649,34657,34665,34673],{"__ignoreMap":48},[52,34642,34643,34645,34647],{"class":54,"line":55},[52,34644,59],{"class":58},[52,34646,63],{"class":62},[52,34648,77],{"class":58},[52,34650,34651,34653,34655],{"class":54,"line":80},[52,34652,83],{"class":58},[52,34654,34616],{"class":62},[52,34656,77],{"class":58},[52,34658,34659,34661,34663],{"class":54,"line":108},[52,34660,2213],{"class":58},[52,34662,2216],{"class":62},[52,34664,105],{"class":58},[52,34666,34667,34669,34671],{"class":54,"line":118},[52,34668,2230],{"class":58},[52,34670,34616],{"class":62},[52,34672,77],{"class":58},[52,34674,34675,34677,34679],{"class":54,"line":594},[52,34676,121],{"class":58},[52,34678,63],{"class":62},[52,34680,77],{"class":58},[43,34682,34683],{"className":360,"code":34638,"language":362,"meta":48,"style":48},[31,34684,34685,34693,34701,34709,34717],{"__ignoreMap":48},[52,34686,34687,34689,34691],{"class":54,"line":55},[52,34688,59],{"class":58},[52,34690,63],{"class":371},[52,34692,77],{"class":58},[52,34694,34695,34697,34699],{"class":54,"line":80},[52,34696,83],{"class":58},[52,34698,34616],{"class":371},[52,34700,77],{"class":58},[52,34702,34703,34705,34707],{"class":54,"line":108},[52,34704,2213],{"class":58},[52,34706,2216],{"class":371},[52,34708,105],{"class":58},[52,34710,34711,34713,34715],{"class":54,"line":118},[52,34712,2230],{"class":58},[52,34714,34616],{"class":371},[52,34716,77],{"class":58},[52,34718,34719,34721,34723],{"class":54,"line":594},[52,34720,121],{"class":58},[52,34722,63],{"class":371},[52,34724,77],{"class":58},[43,34726,34727],{"className":2507,"code":34638,"language":2509,"meta":48,"style":48},[31,34728,34729,34737,34745,34753,34761],{"__ignoreMap":48},[52,34730,34731,34733,34735],{"class":54,"line":55},[52,34732,59],{"class":58},[52,34734,63],{"class":371},[52,34736,77],{"class":58},[52,34738,34739,34741,34743],{"class":54,"line":80},[52,34740,83],{"class":58},[52,34742,34616],{"class":371},[52,34744,77],{"class":58},[52,34746,34747,34749,34751],{"class":54,"line":108},[52,34748,2213],{"class":58},[52,34750,2216],{"class":371},[52,34752,105],{"class":58},[52,34754,34755,34757,34759],{"class":54,"line":118},[52,34756,2230],{"class":58},[52,34758,34616],{"class":371},[52,34760,77],{"class":58},[52,34762,34763,34765,34767],{"class":54,"line":594},[52,34764,121],{"class":58},[52,34766,63],{"class":371},[52,34768,77],{"class":58},[43,34770,34771],{"className":419,"code":34638,"language":420,"meta":48,"style":48},[31,34772,34773,34781,34789,34797,34805],{"__ignoreMap":48},[52,34774,34775,34777,34779],{"class":54,"line":55},[52,34776,59],{"class":58},[52,34778,63],{"class":371},[52,34780,77],{"class":58},[52,34782,34783,34785,34787],{"class":54,"line":80},[52,34784,83],{"class":58},[52,34786,34616],{"class":371},[52,34788,77],{"class":58},[52,34790,34791,34793,34795],{"class":54,"line":108},[52,34792,2213],{"class":58},[52,34794,2216],{"class":371},[52,34796,105],{"class":58},[52,34798,34799,34801,34803],{"class":54,"line":118},[52,34800,2230],{"class":58},[52,34802,34616],{"class":371},[52,34804,77],{"class":58},[52,34806,34807,34809,34811],{"class":54,"line":594},[52,34808,121],{"class":58},[52,34810,63],{"class":371},[52,34812,77],{"class":58},[43,34814,34816],{"className":222,"code":34815,"language":224,"meta":48,"style":48},"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",[31,34817,34818,34828,34832,34846,34850,34859,34867,34871,34875],{"__ignoreMap":48},[52,34819,34820,34822,34824,34826],{"class":54,"line":55},[52,34821,232],{"class":231},[52,34823,8385],{"class":58},[52,34825,238],{"class":231},[52,34827,8390],{"class":73},[52,34829,34830],{"class":54,"line":80},[52,34831,597],{"emptyLinePlaceholder":171},[52,34833,34834,34836,34838,34840,34842,34844],{"class":54,"line":108},[52,34835,1721],{"class":231},[52,34837,1724],{"class":371},[52,34839,1727],{"class":231},[52,34841,1730],{"class":231},[52,34843,1733],{"class":66},[52,34845,1736],{"class":58},[52,34847,34848],{"class":54,"line":118},[52,34849,1751],{"class":58},[52,34851,34852,34854,34857],{"class":54,"line":594},[52,34853,1756],{"class":58},[52,34855,34856],{"class":73},"'FilmGrain'",[52,34858,3875],{"class":58},[52,34860,34861,34863,34865],{"class":54,"line":600},[52,34862,3880],{"class":58},[52,34864,2869],{"class":73},[52,34866,2129],{"class":58},[52,34868,34869],{"class":54,"line":606},[52,34870,3897],{"class":58},[52,34872,34873],{"class":54,"line":653},[52,34874,1773],{"class":58},[52,34876,34877],{"class":54,"line":662},[52,34878,1778],{"class":58},[156,34880,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":34882},[34883,34884],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/filmgrain",{"title":34616,"description":34624},"docs/components/FilmGrain","oDbJl1STzhPHE6Df_wrMx0Zjj08jAQ3NPWF6sPUQzvw",{"id":34891,"title":34892,"body":34893,"category":26920,"componentType":20001,"description":34900,"extension":168,"meta":35085,"navigation":171,"path":35086,"requiresChild":26923,"seo":35087,"stem":35088,"__hash__":35089},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":34894,"toc":35081},[34895,34898,34901,34903,34905,34908,34910,35079],[11,34896,34892],{"id":34897},"floatingparticles",[15,34899,34900],{},"Animated floating particles with twinkle effects",[26061,34902],{"component":34892},[23,34904,26065],{"id":20662},[26067,34906],{":props":34907},"[{\"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)\"}]",[23,34909,26073],{"id":26072},[217,34911,34912,34941,34969,34997,35025],{":tabs":1543},[43,34913,34915],{"className":45,"code":34914,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[31,34916,34917,34925,34933],{"__ignoreMap":48},[52,34918,34919,34921,34923],{"class":54,"line":55},[52,34920,59],{"class":58},[52,34922,63],{"class":62},[52,34924,77],{"class":58},[52,34926,34927,34929,34931],{"class":54,"line":80},[52,34928,83],{"class":58},[52,34930,34892],{"class":62},[52,34932,105],{"class":58},[52,34934,34935,34937,34939],{"class":54,"line":108},[52,34936,121],{"class":58},[52,34938,63],{"class":62},[52,34940,77],{"class":58},[43,34942,34943],{"className":360,"code":34914,"language":362,"meta":48,"style":48},[31,34944,34945,34953,34961],{"__ignoreMap":48},[52,34946,34947,34949,34951],{"class":54,"line":55},[52,34948,59],{"class":58},[52,34950,63],{"class":371},[52,34952,77],{"class":58},[52,34954,34955,34957,34959],{"class":54,"line":80},[52,34956,83],{"class":58},[52,34958,34892],{"class":371},[52,34960,105],{"class":58},[52,34962,34963,34965,34967],{"class":54,"line":108},[52,34964,121],{"class":58},[52,34966,63],{"class":371},[52,34968,77],{"class":58},[43,34970,34971],{"className":2507,"code":34914,"language":2509,"meta":48,"style":48},[31,34972,34973,34981,34989],{"__ignoreMap":48},[52,34974,34975,34977,34979],{"class":54,"line":55},[52,34976,59],{"class":58},[52,34978,63],{"class":371},[52,34980,77],{"class":58},[52,34982,34983,34985,34987],{"class":54,"line":80},[52,34984,83],{"class":58},[52,34986,34892],{"class":371},[52,34988,105],{"class":58},[52,34990,34991,34993,34995],{"class":54,"line":108},[52,34992,121],{"class":58},[52,34994,63],{"class":371},[52,34996,77],{"class":58},[43,34998,34999],{"className":419,"code":34914,"language":420,"meta":48,"style":48},[31,35000,35001,35009,35017],{"__ignoreMap":48},[52,35002,35003,35005,35007],{"class":54,"line":55},[52,35004,59],{"class":58},[52,35006,63],{"class":371},[52,35008,77],{"class":58},[52,35010,35011,35013,35015],{"class":54,"line":80},[52,35012,83],{"class":58},[52,35014,34892],{"class":371},[52,35016,105],{"class":58},[52,35018,35019,35021,35023],{"class":54,"line":108},[52,35020,121],{"class":58},[52,35022,63],{"class":371},[52,35024,77],{"class":58},[43,35026,35028],{"className":222,"code":35027,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FloatingParticles', props: {} }\n ]\n})\n",[31,35029,35030,35040,35044,35058,35062,35071,35075],{"__ignoreMap":48},[52,35031,35032,35034,35036,35038],{"class":54,"line":55},[52,35033,232],{"class":231},[52,35035,8385],{"class":58},[52,35037,238],{"class":231},[52,35039,8390],{"class":73},[52,35041,35042],{"class":54,"line":80},[52,35043,597],{"emptyLinePlaceholder":171},[52,35045,35046,35048,35050,35052,35054,35056],{"class":54,"line":108},[52,35047,1721],{"class":231},[52,35049,1724],{"class":371},[52,35051,1727],{"class":231},[52,35053,1730],{"class":231},[52,35055,1733],{"class":66},[52,35057,1736],{"class":58},[52,35059,35060],{"class":54,"line":118},[52,35061,1751],{"class":58},[52,35063,35064,35066,35069],{"class":54,"line":594},[52,35065,1756],{"class":58},[52,35067,35068],{"class":73},"'FloatingParticles'",[52,35070,2129],{"class":58},[52,35072,35073],{"class":54,"line":600},[52,35074,1773],{"class":58},[52,35076,35077],{"class":54,"line":606},[52,35078,1778],{"class":58},[156,35080,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":35082},[35083,35084],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/floatingparticles",{"title":34892,"description":34900},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":35091,"title":35092,"body":35093,"category":28265,"componentType":20007,"description":35100,"extension":168,"meta":35361,"navigation":171,"path":35362,"requiresChild":171,"seo":35363,"stem":35364,"__hash__":35365},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":35094,"toc":35357},[35095,35098,35101,35103,35105,35108,35110,35355],[11,35096,35092],{"id":35097},"flowfield",[15,35099,35100],{},"Fluid-like distortion with constant smooth motion",[26061,35102],{"component":35092},[23,35104,26065],{"id":20662},[26067,35106],{":props":35107},"[{\"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\"}]",[23,35109,26073],{"id":26072},[217,35111,35112,35157,35201,35245,35289],{":tabs":1543},[43,35113,35115],{"className":45,"code":35114,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[31,35116,35117,35125,35133,35141,35149],{"__ignoreMap":48},[52,35118,35119,35121,35123],{"class":54,"line":55},[52,35120,59],{"class":58},[52,35122,63],{"class":62},[52,35124,77],{"class":58},[52,35126,35127,35129,35131],{"class":54,"line":80},[52,35128,83],{"class":58},[52,35130,35092],{"class":62},[52,35132,77],{"class":58},[52,35134,35135,35137,35139],{"class":54,"line":108},[52,35136,2213],{"class":58},[52,35138,2216],{"class":62},[52,35140,105],{"class":58},[52,35142,35143,35145,35147],{"class":54,"line":118},[52,35144,2230],{"class":58},[52,35146,35092],{"class":62},[52,35148,77],{"class":58},[52,35150,35151,35153,35155],{"class":54,"line":594},[52,35152,121],{"class":58},[52,35154,63],{"class":62},[52,35156,77],{"class":58},[43,35158,35159],{"className":360,"code":35114,"language":362,"meta":48,"style":48},[31,35160,35161,35169,35177,35185,35193],{"__ignoreMap":48},[52,35162,35163,35165,35167],{"class":54,"line":55},[52,35164,59],{"class":58},[52,35166,63],{"class":371},[52,35168,77],{"class":58},[52,35170,35171,35173,35175],{"class":54,"line":80},[52,35172,83],{"class":58},[52,35174,35092],{"class":371},[52,35176,77],{"class":58},[52,35178,35179,35181,35183],{"class":54,"line":108},[52,35180,2213],{"class":58},[52,35182,2216],{"class":371},[52,35184,105],{"class":58},[52,35186,35187,35189,35191],{"class":54,"line":118},[52,35188,2230],{"class":58},[52,35190,35092],{"class":371},[52,35192,77],{"class":58},[52,35194,35195,35197,35199],{"class":54,"line":594},[52,35196,121],{"class":58},[52,35198,63],{"class":371},[52,35200,77],{"class":58},[43,35202,35203],{"className":2507,"code":35114,"language":2509,"meta":48,"style":48},[31,35204,35205,35213,35221,35229,35237],{"__ignoreMap":48},[52,35206,35207,35209,35211],{"class":54,"line":55},[52,35208,59],{"class":58},[52,35210,63],{"class":371},[52,35212,77],{"class":58},[52,35214,35215,35217,35219],{"class":54,"line":80},[52,35216,83],{"class":58},[52,35218,35092],{"class":371},[52,35220,77],{"class":58},[52,35222,35223,35225,35227],{"class":54,"line":108},[52,35224,2213],{"class":58},[52,35226,2216],{"class":371},[52,35228,105],{"class":58},[52,35230,35231,35233,35235],{"class":54,"line":118},[52,35232,2230],{"class":58},[52,35234,35092],{"class":371},[52,35236,77],{"class":58},[52,35238,35239,35241,35243],{"class":54,"line":594},[52,35240,121],{"class":58},[52,35242,63],{"class":371},[52,35244,77],{"class":58},[43,35246,35247],{"className":419,"code":35114,"language":420,"meta":48,"style":48},[31,35248,35249,35257,35265,35273,35281],{"__ignoreMap":48},[52,35250,35251,35253,35255],{"class":54,"line":55},[52,35252,59],{"class":58},[52,35254,63],{"class":371},[52,35256,77],{"class":58},[52,35258,35259,35261,35263],{"class":54,"line":80},[52,35260,83],{"class":58},[52,35262,35092],{"class":371},[52,35264,77],{"class":58},[52,35266,35267,35269,35271],{"class":54,"line":108},[52,35268,2213],{"class":58},[52,35270,2216],{"class":371},[52,35272,105],{"class":58},[52,35274,35275,35277,35279],{"class":54,"line":118},[52,35276,2230],{"class":58},[52,35278,35092],{"class":371},[52,35280,77],{"class":58},[52,35282,35283,35285,35287],{"class":54,"line":594},[52,35284,121],{"class":58},[52,35286,63],{"class":371},[52,35288,77],{"class":58},[43,35290,35292],{"className":222,"code":35291,"language":224,"meta":48,"style":48},"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",[31,35293,35294,35304,35308,35322,35326,35335,35343,35347,35351],{"__ignoreMap":48},[52,35295,35296,35298,35300,35302],{"class":54,"line":55},[52,35297,232],{"class":231},[52,35299,8385],{"class":58},[52,35301,238],{"class":231},[52,35303,8390],{"class":73},[52,35305,35306],{"class":54,"line":80},[52,35307,597],{"emptyLinePlaceholder":171},[52,35309,35310,35312,35314,35316,35318,35320],{"class":54,"line":108},[52,35311,1721],{"class":231},[52,35313,1724],{"class":371},[52,35315,1727],{"class":231},[52,35317,1730],{"class":231},[52,35319,1733],{"class":66},[52,35321,1736],{"class":58},[52,35323,35324],{"class":54,"line":118},[52,35325,1751],{"class":58},[52,35327,35328,35330,35333],{"class":54,"line":594},[52,35329,1756],{"class":58},[52,35331,35332],{"class":73},"'FlowField'",[52,35334,3875],{"class":58},[52,35336,35337,35339,35341],{"class":54,"line":600},[52,35338,3880],{"class":58},[52,35340,2869],{"class":73},[52,35342,2129],{"class":58},[52,35344,35345],{"class":54,"line":606},[52,35346,3897],{"class":58},[52,35348,35349],{"class":54,"line":653},[52,35350,1773],{"class":58},[52,35352,35353],{"class":54,"line":662},[52,35354,1778],{"class":58},[156,35356,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":35358},[35359,35360],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/flowfield",{"title":35092,"description":35100},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":35367,"title":35368,"body":35369,"category":29887,"componentType":20001,"description":35376,"extension":168,"meta":35654,"navigation":171,"path":35655,"requiresChild":26923,"seo":35656,"stem":35657,"__hash__":35658},"components/docs/components/Flower.md","Flower",{"type":8,"value":35370,"toc":35650},[35371,35374,35377,35379,35381,35384,35386,35648],[11,35372,35368],{"id":35373},"flower",[15,35375,35376],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[26061,35378],{"component":35368},[23,35380,26065],{"id":20662},[26067,35382],{":props":35383},"[{\"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\"}]",[23,35385,26073],{"id":26072},[217,35387,35388,35437,35488,35536,35586],{":tabs":1543},[43,35389,35391],{"className":45,"code":35390,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,35392,35393,35401,35408,35416,35425,35429],{"__ignoreMap":48},[52,35394,35395,35397,35399],{"class":54,"line":55},[52,35396,59],{"class":58},[52,35398,63],{"class":62},[52,35400,77],{"class":58},[52,35402,35403,35405],{"class":54,"line":80},[52,35404,83],{"class":58},[52,35406,35407],{"class":62},"Flower\n",[52,35409,35410,35412,35414],{"class":54,"line":108},[52,35411,6504],{"class":66},[52,35413,70],{"class":58},[52,35415,6460],{"class":73},[52,35417,35418,35420,35422],{"class":54,"line":118},[52,35419,14057],{"class":66},[52,35421,70],{"class":58},[52,35423,35424],{"class":73},"\"0.4\"\n",[52,35426,35427],{"class":54,"line":594},[52,35428,1224],{"class":58},[52,35430,35431,35433,35435],{"class":54,"line":600},[52,35432,121],{"class":58},[52,35434,63],{"class":62},[52,35436,77],{"class":58},[43,35438,35440],{"className":360,"code":35439,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,35441,35442,35450,35456,35464,35476,35480],{"__ignoreMap":48},[52,35443,35444,35446,35448],{"class":54,"line":55},[52,35445,59],{"class":58},[52,35447,63],{"class":371},[52,35449,77],{"class":58},[52,35451,35452,35454],{"class":54,"line":80},[52,35453,83],{"class":58},[52,35455,35407],{"class":371},[52,35457,35458,35460,35462],{"class":54,"line":108},[52,35459,6504],{"class":66},[52,35461,70],{"class":231},[52,35463,6460],{"class":73},[52,35465,35466,35468,35470,35472,35474],{"class":54,"line":118},[52,35467,6514],{"class":66},[52,35469,70],{"class":231},[52,35471,723],{"class":58},[52,35473,5116],{"class":371},[52,35475,729],{"class":58},[52,35477,35478],{"class":54,"line":594},[52,35479,1224],{"class":58},[52,35481,35482,35484,35486],{"class":54,"line":600},[52,35483,121],{"class":58},[52,35485,63],{"class":371},[52,35487,77],{"class":58},[43,35489,35490],{"className":2507,"code":35439,"language":2509,"meta":48,"style":48},[31,35491,35492,35500,35506,35514,35524,35528],{"__ignoreMap":48},[52,35493,35494,35496,35498],{"class":54,"line":55},[52,35495,59],{"class":58},[52,35497,63],{"class":371},[52,35499,77],{"class":58},[52,35501,35502,35504],{"class":54,"line":80},[52,35503,83],{"class":58},[52,35505,35407],{"class":371},[52,35507,35508,35510,35512],{"class":54,"line":108},[52,35509,6504],{"class":66},[52,35511,70],{"class":58},[52,35513,6460],{"class":73},[52,35515,35516,35518,35520,35522],{"class":54,"line":118},[52,35517,6514],{"class":66},[52,35519,24004],{"class":58},[52,35521,5116],{"class":371},[52,35523,729],{"class":58},[52,35525,35526],{"class":54,"line":594},[52,35527,1224],{"class":58},[52,35529,35530,35532,35534],{"class":54,"line":600},[52,35531,121],{"class":58},[52,35533,63],{"class":371},[52,35535,77],{"class":58},[43,35537,35538],{"className":419,"code":35439,"language":420,"meta":48,"style":48},[31,35539,35540,35548,35554,35562,35574,35578],{"__ignoreMap":48},[52,35541,35542,35544,35546],{"class":54,"line":55},[52,35543,59],{"class":58},[52,35545,63],{"class":371},[52,35547,77],{"class":58},[52,35549,35550,35552],{"class":54,"line":80},[52,35551,83],{"class":58},[52,35553,35407],{"class":371},[52,35555,35556,35558,35560],{"class":54,"line":108},[52,35557,6504],{"class":66},[52,35559,70],{"class":231},[52,35561,6460],{"class":73},[52,35563,35564,35566,35568,35570,35572],{"class":54,"line":118},[52,35565,6514],{"class":66},[52,35567,70],{"class":231},[52,35569,723],{"class":58},[52,35571,5116],{"class":371},[52,35573,729],{"class":58},[52,35575,35576],{"class":54,"line":594},[52,35577,1224],{"class":58},[52,35579,35580,35582,35584],{"class":54,"line":600},[52,35581,121],{"class":58},[52,35583,63],{"class":371},[52,35585,77],{"class":58},[43,35587,35589],{"className":222,"code":35588,"language":224,"meta":48,"style":48},"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",[31,35590,35591,35601,35605,35619,35623,35640,35644],{"__ignoreMap":48},[52,35592,35593,35595,35597,35599],{"class":54,"line":55},[52,35594,232],{"class":231},[52,35596,8385],{"class":58},[52,35598,238],{"class":231},[52,35600,8390],{"class":73},[52,35602,35603],{"class":54,"line":80},[52,35604,597],{"emptyLinePlaceholder":171},[52,35606,35607,35609,35611,35613,35615,35617],{"class":54,"line":108},[52,35608,1721],{"class":231},[52,35610,1724],{"class":371},[52,35612,1727],{"class":231},[52,35614,1730],{"class":231},[52,35616,1733],{"class":66},[52,35618,1736],{"class":58},[52,35620,35621],{"class":54,"line":118},[52,35622,1751],{"class":58},[52,35624,35625,35627,35630,35632,35634,35636,35638],{"class":54,"line":594},[52,35626,1756],{"class":58},[52,35628,35629],{"class":73},"'Flower'",[52,35631,1762],{"class":58},[52,35633,7039],{"class":73},[52,35635,3431],{"class":58},[52,35637,5116],{"class":371},[52,35639,1768],{"class":58},[52,35641,35642],{"class":54,"line":600},[52,35643,1773],{"class":58},[52,35645,35646],{"class":54,"line":606},[52,35647,1778],{"class":58},[156,35649,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":35651},[35652,35653],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/flower",{"title":35368,"description":35376},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":35660,"title":35661,"body":35662,"category":26920,"componentType":20001,"description":35669,"extension":168,"meta":35854,"navigation":171,"path":35855,"requiresChild":26923,"seo":35856,"stem":35857,"__hash__":35858},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":35663,"toc":35850},[35664,35667,35670,35672,35674,35677,35679,35848],[11,35665,35661],{"id":35666},"flowinggradient",[15,35668,35669],{},"Liquid silk gradient with organic flowing color bands",[26061,35671],{"component":35661},[23,35673,26065],{"id":20662},[26067,35675],{":props":35676},"[{\"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\"}]",[23,35678,26073],{"id":26072},[217,35680,35681,35710,35738,35766,35794],{":tabs":1543},[43,35682,35684],{"className":45,"code":35683,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[31,35685,35686,35694,35702],{"__ignoreMap":48},[52,35687,35688,35690,35692],{"class":54,"line":55},[52,35689,59],{"class":58},[52,35691,63],{"class":62},[52,35693,77],{"class":58},[52,35695,35696,35698,35700],{"class":54,"line":80},[52,35697,83],{"class":58},[52,35699,35661],{"class":62},[52,35701,105],{"class":58},[52,35703,35704,35706,35708],{"class":54,"line":108},[52,35705,121],{"class":58},[52,35707,63],{"class":62},[52,35709,77],{"class":58},[43,35711,35712],{"className":360,"code":35683,"language":362,"meta":48,"style":48},[31,35713,35714,35722,35730],{"__ignoreMap":48},[52,35715,35716,35718,35720],{"class":54,"line":55},[52,35717,59],{"class":58},[52,35719,63],{"class":371},[52,35721,77],{"class":58},[52,35723,35724,35726,35728],{"class":54,"line":80},[52,35725,83],{"class":58},[52,35727,35661],{"class":371},[52,35729,105],{"class":58},[52,35731,35732,35734,35736],{"class":54,"line":108},[52,35733,121],{"class":58},[52,35735,63],{"class":371},[52,35737,77],{"class":58},[43,35739,35740],{"className":2507,"code":35683,"language":2509,"meta":48,"style":48},[31,35741,35742,35750,35758],{"__ignoreMap":48},[52,35743,35744,35746,35748],{"class":54,"line":55},[52,35745,59],{"class":58},[52,35747,63],{"class":371},[52,35749,77],{"class":58},[52,35751,35752,35754,35756],{"class":54,"line":80},[52,35753,83],{"class":58},[52,35755,35661],{"class":371},[52,35757,105],{"class":58},[52,35759,35760,35762,35764],{"class":54,"line":108},[52,35761,121],{"class":58},[52,35763,63],{"class":371},[52,35765,77],{"class":58},[43,35767,35768],{"className":419,"code":35683,"language":420,"meta":48,"style":48},[31,35769,35770,35778,35786],{"__ignoreMap":48},[52,35771,35772,35774,35776],{"class":54,"line":55},[52,35773,59],{"class":58},[52,35775,63],{"class":371},[52,35777,77],{"class":58},[52,35779,35780,35782,35784],{"class":54,"line":80},[52,35781,83],{"class":58},[52,35783,35661],{"class":371},[52,35785,105],{"class":58},[52,35787,35788,35790,35792],{"class":54,"line":108},[52,35789,121],{"class":58},[52,35791,63],{"class":371},[52,35793,77],{"class":58},[43,35795,35797],{"className":222,"code":35796,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowingGradient', props: {} }\n ]\n})\n",[31,35798,35799,35809,35813,35827,35831,35840,35844],{"__ignoreMap":48},[52,35800,35801,35803,35805,35807],{"class":54,"line":55},[52,35802,232],{"class":231},[52,35804,8385],{"class":58},[52,35806,238],{"class":231},[52,35808,8390],{"class":73},[52,35810,35811],{"class":54,"line":80},[52,35812,597],{"emptyLinePlaceholder":171},[52,35814,35815,35817,35819,35821,35823,35825],{"class":54,"line":108},[52,35816,1721],{"class":231},[52,35818,1724],{"class":371},[52,35820,1727],{"class":231},[52,35822,1730],{"class":231},[52,35824,1733],{"class":66},[52,35826,1736],{"class":58},[52,35828,35829],{"class":54,"line":118},[52,35830,1751],{"class":58},[52,35832,35833,35835,35838],{"class":54,"line":594},[52,35834,1756],{"class":58},[52,35836,35837],{"class":73},"'FlowingGradient'",[52,35839,2129],{"class":58},[52,35841,35842],{"class":54,"line":600},[52,35843,1773],{"class":58},[52,35845,35846],{"class":54,"line":606},[52,35847,1778],{"class":58},[156,35849,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":35851},[35852,35853],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/flowinggradient",{"title":35661,"description":35669},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":35860,"title":35861,"body":35862,"category":28265,"componentType":20007,"description":35869,"extension":168,"meta":36130,"navigation":171,"path":36131,"requiresChild":171,"seo":36132,"stem":36133,"__hash__":36134},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":35863,"toc":36126},[35864,35867,35870,35872,35874,35877,35879,36124],[11,35865,35861],{"id":35866},"form3d",[15,35868,35869],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26061,35871],{"component":35861},[23,35873,26065],{"id":20662},[26067,35875],{":props":35876},"[{\"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\"}]",[23,35878,26073],{"id":26072},[217,35880,35881,35926,35970,36014,36058],{":tabs":1543},[43,35882,35884],{"className":45,"code":35883,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,35885,35886,35894,35902,35910,35918],{"__ignoreMap":48},[52,35887,35888,35890,35892],{"class":54,"line":55},[52,35889,59],{"class":58},[52,35891,63],{"class":62},[52,35893,77],{"class":58},[52,35895,35896,35898,35900],{"class":54,"line":80},[52,35897,83],{"class":58},[52,35899,35861],{"class":62},[52,35901,77],{"class":58},[52,35903,35904,35906,35908],{"class":54,"line":108},[52,35905,2213],{"class":58},[52,35907,2216],{"class":62},[52,35909,105],{"class":58},[52,35911,35912,35914,35916],{"class":54,"line":118},[52,35913,2230],{"class":58},[52,35915,35861],{"class":62},[52,35917,77],{"class":58},[52,35919,35920,35922,35924],{"class":54,"line":594},[52,35921,121],{"class":58},[52,35923,63],{"class":62},[52,35925,77],{"class":58},[43,35927,35928],{"className":360,"code":35883,"language":362,"meta":48,"style":48},[31,35929,35930,35938,35946,35954,35962],{"__ignoreMap":48},[52,35931,35932,35934,35936],{"class":54,"line":55},[52,35933,59],{"class":58},[52,35935,63],{"class":371},[52,35937,77],{"class":58},[52,35939,35940,35942,35944],{"class":54,"line":80},[52,35941,83],{"class":58},[52,35943,35861],{"class":371},[52,35945,77],{"class":58},[52,35947,35948,35950,35952],{"class":54,"line":108},[52,35949,2213],{"class":58},[52,35951,2216],{"class":371},[52,35953,105],{"class":58},[52,35955,35956,35958,35960],{"class":54,"line":118},[52,35957,2230],{"class":58},[52,35959,35861],{"class":371},[52,35961,77],{"class":58},[52,35963,35964,35966,35968],{"class":54,"line":594},[52,35965,121],{"class":58},[52,35967,63],{"class":371},[52,35969,77],{"class":58},[43,35971,35972],{"className":2507,"code":35883,"language":2509,"meta":48,"style":48},[31,35973,35974,35982,35990,35998,36006],{"__ignoreMap":48},[52,35975,35976,35978,35980],{"class":54,"line":55},[52,35977,59],{"class":58},[52,35979,63],{"class":371},[52,35981,77],{"class":58},[52,35983,35984,35986,35988],{"class":54,"line":80},[52,35985,83],{"class":58},[52,35987,35861],{"class":371},[52,35989,77],{"class":58},[52,35991,35992,35994,35996],{"class":54,"line":108},[52,35993,2213],{"class":58},[52,35995,2216],{"class":371},[52,35997,105],{"class":58},[52,35999,36000,36002,36004],{"class":54,"line":118},[52,36001,2230],{"class":58},[52,36003,35861],{"class":371},[52,36005,77],{"class":58},[52,36007,36008,36010,36012],{"class":54,"line":594},[52,36009,121],{"class":58},[52,36011,63],{"class":371},[52,36013,77],{"class":58},[43,36015,36016],{"className":419,"code":35883,"language":420,"meta":48,"style":48},[31,36017,36018,36026,36034,36042,36050],{"__ignoreMap":48},[52,36019,36020,36022,36024],{"class":54,"line":55},[52,36021,59],{"class":58},[52,36023,63],{"class":371},[52,36025,77],{"class":58},[52,36027,36028,36030,36032],{"class":54,"line":80},[52,36029,83],{"class":58},[52,36031,35861],{"class":371},[52,36033,77],{"class":58},[52,36035,36036,36038,36040],{"class":54,"line":108},[52,36037,2213],{"class":58},[52,36039,2216],{"class":371},[52,36041,105],{"class":58},[52,36043,36044,36046,36048],{"class":54,"line":118},[52,36045,2230],{"class":58},[52,36047,35861],{"class":371},[52,36049,77],{"class":58},[52,36051,36052,36054,36056],{"class":54,"line":594},[52,36053,121],{"class":58},[52,36055,63],{"class":371},[52,36057,77],{"class":58},[43,36059,36061],{"className":222,"code":36060,"language":224,"meta":48,"style":48},"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",[31,36062,36063,36073,36077,36091,36095,36104,36112,36116,36120],{"__ignoreMap":48},[52,36064,36065,36067,36069,36071],{"class":54,"line":55},[52,36066,232],{"class":231},[52,36068,8385],{"class":58},[52,36070,238],{"class":231},[52,36072,8390],{"class":73},[52,36074,36075],{"class":54,"line":80},[52,36076,597],{"emptyLinePlaceholder":171},[52,36078,36079,36081,36083,36085,36087,36089],{"class":54,"line":108},[52,36080,1721],{"class":231},[52,36082,1724],{"class":371},[52,36084,1727],{"class":231},[52,36086,1730],{"class":231},[52,36088,1733],{"class":66},[52,36090,1736],{"class":58},[52,36092,36093],{"class":54,"line":118},[52,36094,1751],{"class":58},[52,36096,36097,36099,36102],{"class":54,"line":594},[52,36098,1756],{"class":58},[52,36100,36101],{"class":73},"'Form3D'",[52,36103,3875],{"class":58},[52,36105,36106,36108,36110],{"class":54,"line":600},[52,36107,3880],{"class":58},[52,36109,2869],{"class":73},[52,36111,2129],{"class":58},[52,36113,36114],{"class":54,"line":606},[52,36115,3897],{"class":58},[52,36117,36118],{"class":54,"line":653},[52,36119,1773],{"class":58},[52,36121,36122],{"class":54,"line":662},[52,36123,1778],{"class":58},[156,36125,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":36127},[36128,36129],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/form3d",{"title":35861,"description":35869},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":36136,"title":17630,"body":36137,"category":31558,"componentType":20007,"description":36144,"extension":168,"meta":36404,"navigation":171,"path":36405,"requiresChild":171,"seo":36406,"stem":36407,"__hash__":36408},"components/docs/components/Glass.md",{"type":8,"value":36138,"toc":36400},[36139,36142,36145,36147,36149,36152,36154,36398],[11,36140,17630],{"id":36141},"glass",[15,36143,36144],{},"Optically realistic glass lens driven in a custom shape",[26061,36146],{"component":17630},[23,36148,26065],{"id":20662},[26067,36150],{":props":36151},"[{\"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.\"}]",[23,36153,26073],{"id":26072},[217,36155,36156,36201,36245,36289,36333],{":tabs":1543},[43,36157,36159],{"className":45,"code":36158,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[31,36160,36161,36169,36177,36185,36193],{"__ignoreMap":48},[52,36162,36163,36165,36167],{"class":54,"line":55},[52,36164,59],{"class":58},[52,36166,63],{"class":62},[52,36168,77],{"class":58},[52,36170,36171,36173,36175],{"class":54,"line":80},[52,36172,83],{"class":58},[52,36174,17630],{"class":62},[52,36176,77],{"class":58},[52,36178,36179,36181,36183],{"class":54,"line":108},[52,36180,2213],{"class":58},[52,36182,2216],{"class":62},[52,36184,105],{"class":58},[52,36186,36187,36189,36191],{"class":54,"line":118},[52,36188,2230],{"class":58},[52,36190,17630],{"class":62},[52,36192,77],{"class":58},[52,36194,36195,36197,36199],{"class":54,"line":594},[52,36196,121],{"class":58},[52,36198,63],{"class":62},[52,36200,77],{"class":58},[43,36202,36203],{"className":360,"code":36158,"language":362,"meta":48,"style":48},[31,36204,36205,36213,36221,36229,36237],{"__ignoreMap":48},[52,36206,36207,36209,36211],{"class":54,"line":55},[52,36208,59],{"class":58},[52,36210,63],{"class":371},[52,36212,77],{"class":58},[52,36214,36215,36217,36219],{"class":54,"line":80},[52,36216,83],{"class":58},[52,36218,17630],{"class":371},[52,36220,77],{"class":58},[52,36222,36223,36225,36227],{"class":54,"line":108},[52,36224,2213],{"class":58},[52,36226,2216],{"class":371},[52,36228,105],{"class":58},[52,36230,36231,36233,36235],{"class":54,"line":118},[52,36232,2230],{"class":58},[52,36234,17630],{"class":371},[52,36236,77],{"class":58},[52,36238,36239,36241,36243],{"class":54,"line":594},[52,36240,121],{"class":58},[52,36242,63],{"class":371},[52,36244,77],{"class":58},[43,36246,36247],{"className":2507,"code":36158,"language":2509,"meta":48,"style":48},[31,36248,36249,36257,36265,36273,36281],{"__ignoreMap":48},[52,36250,36251,36253,36255],{"class":54,"line":55},[52,36252,59],{"class":58},[52,36254,63],{"class":371},[52,36256,77],{"class":58},[52,36258,36259,36261,36263],{"class":54,"line":80},[52,36260,83],{"class":58},[52,36262,17630],{"class":371},[52,36264,77],{"class":58},[52,36266,36267,36269,36271],{"class":54,"line":108},[52,36268,2213],{"class":58},[52,36270,2216],{"class":371},[52,36272,105],{"class":58},[52,36274,36275,36277,36279],{"class":54,"line":118},[52,36276,2230],{"class":58},[52,36278,17630],{"class":371},[52,36280,77],{"class":58},[52,36282,36283,36285,36287],{"class":54,"line":594},[52,36284,121],{"class":58},[52,36286,63],{"class":371},[52,36288,77],{"class":58},[43,36290,36291],{"className":419,"code":36158,"language":420,"meta":48,"style":48},[31,36292,36293,36301,36309,36317,36325],{"__ignoreMap":48},[52,36294,36295,36297,36299],{"class":54,"line":55},[52,36296,59],{"class":58},[52,36298,63],{"class":371},[52,36300,77],{"class":58},[52,36302,36303,36305,36307],{"class":54,"line":80},[52,36304,83],{"class":58},[52,36306,17630],{"class":371},[52,36308,77],{"class":58},[52,36310,36311,36313,36315],{"class":54,"line":108},[52,36312,2213],{"class":58},[52,36314,2216],{"class":371},[52,36316,105],{"class":58},[52,36318,36319,36321,36323],{"class":54,"line":118},[52,36320,2230],{"class":58},[52,36322,17630],{"class":371},[52,36324,77],{"class":58},[52,36326,36327,36329,36331],{"class":54,"line":594},[52,36328,121],{"class":58},[52,36330,63],{"class":371},[52,36332,77],{"class":58},[43,36334,36336],{"className":222,"code":36335,"language":224,"meta":48,"style":48},"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",[31,36337,36338,36348,36352,36366,36370,36378,36386,36390,36394],{"__ignoreMap":48},[52,36339,36340,36342,36344,36346],{"class":54,"line":55},[52,36341,232],{"class":231},[52,36343,8385],{"class":58},[52,36345,238],{"class":231},[52,36347,8390],{"class":73},[52,36349,36350],{"class":54,"line":80},[52,36351,597],{"emptyLinePlaceholder":171},[52,36353,36354,36356,36358,36360,36362,36364],{"class":54,"line":108},[52,36355,1721],{"class":231},[52,36357,1724],{"class":371},[52,36359,1727],{"class":231},[52,36361,1730],{"class":231},[52,36363,1733],{"class":66},[52,36365,1736],{"class":58},[52,36367,36368],{"class":54,"line":118},[52,36369,1751],{"class":58},[52,36371,36372,36374,36376],{"class":54,"line":594},[52,36373,1756],{"class":58},[52,36375,18171],{"class":73},[52,36377,3875],{"class":58},[52,36379,36380,36382,36384],{"class":54,"line":600},[52,36381,3880],{"class":58},[52,36383,2869],{"class":73},[52,36385,2129],{"class":58},[52,36387,36388],{"class":54,"line":606},[52,36389,3897],{"class":58},[52,36391,36392],{"class":54,"line":653},[52,36393,1773],{"class":58},[52,36395,36396],{"class":54,"line":662},[52,36397,1778],{"class":58},[156,36399,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":36401},[36402,36403],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/glass",{"title":17630,"description":36144},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":36410,"title":3089,"body":36411,"category":28265,"componentType":20007,"description":36418,"extension":168,"meta":36735,"navigation":171,"path":36736,"requiresChild":171,"seo":36737,"stem":36738,"__hash__":36739},"components/docs/components/GlassTiles.md",{"type":8,"value":36412,"toc":36731},[36413,36416,36419,36421,36423,36426,36428,36729],[11,36414,3089],{"id":36415},"glasstiles",[15,36417,36418],{},"Refraction-like distortion in a tile grid pattern",[26061,36420],{"component":3089},[23,36422,26065],{"id":20662},[26067,36424],{":props":36425},"[{\"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\"}]",[23,36427,26073],{"id":26072},[217,36429,36430,36487,36546,36602,36660],{":tabs":1543},[43,36431,36433],{"className":45,"code":36432,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,36434,36435,36443,36450,36459,36463,36471,36479],{"__ignoreMap":48},[52,36436,36437,36439,36441],{"class":54,"line":55},[52,36438,59],{"class":58},[52,36440,63],{"class":62},[52,36442,77],{"class":58},[52,36444,36445,36447],{"class":54,"line":80},[52,36446,83],{"class":58},[52,36448,36449],{"class":62},"GlassTiles\n",[52,36451,36452,36454,36456],{"class":54,"line":108},[52,36453,17026],{"class":66},[52,36455,70],{"class":58},[52,36457,36458],{"class":73},"\"2\"\n",[52,36460,36461],{"class":54,"line":118},[52,36462,26109],{"class":58},[52,36464,36465,36467,36469],{"class":54,"line":594},[52,36466,2213],{"class":58},[52,36468,2216],{"class":62},[52,36470,105],{"class":58},[52,36472,36473,36475,36477],{"class":54,"line":600},[52,36474,2230],{"class":58},[52,36476,3089],{"class":62},[52,36478,77],{"class":58},[52,36480,36481,36483,36485],{"class":54,"line":606},[52,36482,121],{"class":58},[52,36484,63],{"class":62},[52,36486,77],{"class":58},[43,36488,36490],{"className":360,"code":36489,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,36491,36492,36500,36506,36518,36522,36530,36538],{"__ignoreMap":48},[52,36493,36494,36496,36498],{"class":54,"line":55},[52,36495,59],{"class":58},[52,36497,63],{"class":371},[52,36499,77],{"class":58},[52,36501,36502,36504],{"class":54,"line":80},[52,36503,83],{"class":58},[52,36505,36449],{"class":371},[52,36507,36508,36510,36512,36514,36516],{"class":54,"line":108},[52,36509,17137],{"class":66},[52,36511,70],{"class":231},[52,36513,723],{"class":58},[52,36515,4080],{"class":371},[52,36517,729],{"class":58},[52,36519,36520],{"class":54,"line":118},[52,36521,26109],{"class":58},[52,36523,36524,36526,36528],{"class":54,"line":594},[52,36525,2213],{"class":58},[52,36527,2216],{"class":371},[52,36529,105],{"class":58},[52,36531,36532,36534,36536],{"class":54,"line":600},[52,36533,2230],{"class":58},[52,36535,3089],{"class":371},[52,36537,77],{"class":58},[52,36539,36540,36542,36544],{"class":54,"line":606},[52,36541,121],{"class":58},[52,36543,63],{"class":371},[52,36545,77],{"class":58},[43,36547,36548],{"className":2507,"code":36489,"language":2509,"meta":48,"style":48},[31,36549,36550,36558,36564,36574,36578,36586,36594],{"__ignoreMap":48},[52,36551,36552,36554,36556],{"class":54,"line":55},[52,36553,59],{"class":58},[52,36555,63],{"class":371},[52,36557,77],{"class":58},[52,36559,36560,36562],{"class":54,"line":80},[52,36561,83],{"class":58},[52,36563,36449],{"class":371},[52,36565,36566,36568,36570,36572],{"class":54,"line":108},[52,36567,17137],{"class":66},[52,36569,24004],{"class":58},[52,36571,4080],{"class":371},[52,36573,729],{"class":58},[52,36575,36576],{"class":54,"line":118},[52,36577,26109],{"class":58},[52,36579,36580,36582,36584],{"class":54,"line":594},[52,36581,2213],{"class":58},[52,36583,2216],{"class":371},[52,36585,105],{"class":58},[52,36587,36588,36590,36592],{"class":54,"line":600},[52,36589,2230],{"class":58},[52,36591,3089],{"class":371},[52,36593,77],{"class":58},[52,36595,36596,36598,36600],{"class":54,"line":606},[52,36597,121],{"class":58},[52,36599,63],{"class":371},[52,36601,77],{"class":58},[43,36603,36604],{"className":419,"code":36489,"language":420,"meta":48,"style":48},[31,36605,36606,36614,36620,36632,36636,36644,36652],{"__ignoreMap":48},[52,36607,36608,36610,36612],{"class":54,"line":55},[52,36609,59],{"class":58},[52,36611,63],{"class":371},[52,36613,77],{"class":58},[52,36615,36616,36618],{"class":54,"line":80},[52,36617,83],{"class":58},[52,36619,36449],{"class":371},[52,36621,36622,36624,36626,36628,36630],{"class":54,"line":108},[52,36623,17137],{"class":66},[52,36625,70],{"class":231},[52,36627,723],{"class":58},[52,36629,4080],{"class":371},[52,36631,729],{"class":58},[52,36633,36634],{"class":54,"line":118},[52,36635,26109],{"class":58},[52,36637,36638,36640,36642],{"class":54,"line":594},[52,36639,2213],{"class":58},[52,36641,2216],{"class":371},[52,36643,105],{"class":58},[52,36645,36646,36648,36650],{"class":54,"line":600},[52,36647,2230],{"class":58},[52,36649,3089],{"class":371},[52,36651,77],{"class":58},[52,36653,36654,36656,36658],{"class":54,"line":606},[52,36655,121],{"class":58},[52,36657,63],{"class":371},[52,36659,77],{"class":58},[43,36661,36663],{"className":222,"code":36662,"language":224,"meta":48,"style":48},"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",[31,36664,36665,36675,36679,36693,36697,36709,36717,36721,36725],{"__ignoreMap":48},[52,36666,36667,36669,36671,36673],{"class":54,"line":55},[52,36668,232],{"class":231},[52,36670,8385],{"class":58},[52,36672,238],{"class":231},[52,36674,8390],{"class":73},[52,36676,36677],{"class":54,"line":80},[52,36678,597],{"emptyLinePlaceholder":171},[52,36680,36681,36683,36685,36687,36689,36691],{"class":54,"line":108},[52,36682,1721],{"class":231},[52,36684,1724],{"class":371},[52,36686,1727],{"class":231},[52,36688,1730],{"class":231},[52,36690,1733],{"class":66},[52,36692,1736],{"class":58},[52,36694,36695],{"class":54,"line":118},[52,36696,1751],{"class":58},[52,36698,36699,36701,36703,36705,36707],{"class":54,"line":594},[52,36700,1756],{"class":58},[52,36702,3448],{"class":73},[52,36704,26354],{"class":58},[52,36706,4080],{"class":371},[52,36708,4412],{"class":58},[52,36710,36711,36713,36715],{"class":54,"line":600},[52,36712,3880],{"class":58},[52,36714,2869],{"class":73},[52,36716,2129],{"class":58},[52,36718,36719],{"class":54,"line":606},[52,36720,3897],{"class":58},[52,36722,36723],{"class":54,"line":653},[52,36724,1773],{"class":58},[52,36726,36727],{"class":54,"line":662},[52,36728,1778],{"class":58},[156,36730,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":36732},[36733,36734],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/glasstiles",{"title":3089,"description":36418},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":36741,"title":36742,"body":36743,"category":26663,"componentType":20007,"description":36750,"extension":168,"meta":37067,"navigation":171,"path":37068,"requiresChild":171,"seo":37069,"stem":37070,"__hash__":37071},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":36744,"toc":37063},[36745,36748,36751,36753,36755,36758,36760,37061],[11,36746,36742],{"id":36747},"glitch",[15,36749,36750],{},"Digital glitch that melts pixels and distorts colors",[26061,36752],{"component":36742},[23,36754,26065],{"id":20662},[26067,36756],{":props":36757},"[{\"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\"}]",[23,36759,26073],{"id":26072},[217,36761,36762,36818,36877,36933,36991],{":tabs":1543},[43,36763,36765],{"className":45,"code":36764,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,36766,36767,36775,36782,36790,36794,36802,36810],{"__ignoreMap":48},[52,36768,36769,36771,36773],{"class":54,"line":55},[52,36770,59],{"class":58},[52,36772,63],{"class":62},[52,36774,77],{"class":58},[52,36776,36777,36779],{"class":54,"line":80},[52,36778,83],{"class":58},[52,36780,36781],{"class":62},"Glitch\n",[52,36783,36784,36786,36788],{"class":54,"line":108},[52,36785,17026],{"class":66},[52,36787,70],{"class":58},[52,36789,31622],{"class":73},[52,36791,36792],{"class":54,"line":118},[52,36793,26109],{"class":58},[52,36795,36796,36798,36800],{"class":54,"line":594},[52,36797,2213],{"class":58},[52,36799,2216],{"class":62},[52,36801,105],{"class":58},[52,36803,36804,36806,36808],{"class":54,"line":600},[52,36805,2230],{"class":58},[52,36807,36742],{"class":62},[52,36809,77],{"class":58},[52,36811,36812,36814,36816],{"class":54,"line":606},[52,36813,121],{"class":58},[52,36815,63],{"class":62},[52,36817,77],{"class":58},[43,36819,36821],{"className":360,"code":36820,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,36822,36823,36831,36837,36849,36853,36861,36869],{"__ignoreMap":48},[52,36824,36825,36827,36829],{"class":54,"line":55},[52,36826,59],{"class":58},[52,36828,63],{"class":371},[52,36830,77],{"class":58},[52,36832,36833,36835],{"class":54,"line":80},[52,36834,83],{"class":58},[52,36836,36781],{"class":371},[52,36838,36839,36841,36843,36845,36847],{"class":54,"line":108},[52,36840,17137],{"class":66},[52,36842,70],{"class":231},[52,36844,723],{"class":58},[52,36846,4620],{"class":371},[52,36848,729],{"class":58},[52,36850,36851],{"class":54,"line":118},[52,36852,26109],{"class":58},[52,36854,36855,36857,36859],{"class":54,"line":594},[52,36856,2213],{"class":58},[52,36858,2216],{"class":371},[52,36860,105],{"class":58},[52,36862,36863,36865,36867],{"class":54,"line":600},[52,36864,2230],{"class":58},[52,36866,36742],{"class":371},[52,36868,77],{"class":58},[52,36870,36871,36873,36875],{"class":54,"line":606},[52,36872,121],{"class":58},[52,36874,63],{"class":371},[52,36876,77],{"class":58},[43,36878,36879],{"className":2507,"code":36820,"language":2509,"meta":48,"style":48},[31,36880,36881,36889,36895,36905,36909,36917,36925],{"__ignoreMap":48},[52,36882,36883,36885,36887],{"class":54,"line":55},[52,36884,59],{"class":58},[52,36886,63],{"class":371},[52,36888,77],{"class":58},[52,36890,36891,36893],{"class":54,"line":80},[52,36892,83],{"class":58},[52,36894,36781],{"class":371},[52,36896,36897,36899,36901,36903],{"class":54,"line":108},[52,36898,17137],{"class":66},[52,36900,24004],{"class":58},[52,36902,4620],{"class":371},[52,36904,729],{"class":58},[52,36906,36907],{"class":54,"line":118},[52,36908,26109],{"class":58},[52,36910,36911,36913,36915],{"class":54,"line":594},[52,36912,2213],{"class":58},[52,36914,2216],{"class":371},[52,36916,105],{"class":58},[52,36918,36919,36921,36923],{"class":54,"line":600},[52,36920,2230],{"class":58},[52,36922,36742],{"class":371},[52,36924,77],{"class":58},[52,36926,36927,36929,36931],{"class":54,"line":606},[52,36928,121],{"class":58},[52,36930,63],{"class":371},[52,36932,77],{"class":58},[43,36934,36935],{"className":419,"code":36820,"language":420,"meta":48,"style":48},[31,36936,36937,36945,36951,36963,36967,36975,36983],{"__ignoreMap":48},[52,36938,36939,36941,36943],{"class":54,"line":55},[52,36940,59],{"class":58},[52,36942,63],{"class":371},[52,36944,77],{"class":58},[52,36946,36947,36949],{"class":54,"line":80},[52,36948,83],{"class":58},[52,36950,36781],{"class":371},[52,36952,36953,36955,36957,36959,36961],{"class":54,"line":108},[52,36954,17137],{"class":66},[52,36956,70],{"class":231},[52,36958,723],{"class":58},[52,36960,4620],{"class":371},[52,36962,729],{"class":58},[52,36964,36965],{"class":54,"line":118},[52,36966,26109],{"class":58},[52,36968,36969,36971,36973],{"class":54,"line":594},[52,36970,2213],{"class":58},[52,36972,2216],{"class":371},[52,36974,105],{"class":58},[52,36976,36977,36979,36981],{"class":54,"line":600},[52,36978,2230],{"class":58},[52,36980,36742],{"class":371},[52,36982,77],{"class":58},[52,36984,36985,36987,36989],{"class":54,"line":606},[52,36986,121],{"class":58},[52,36988,63],{"class":371},[52,36990,77],{"class":58},[43,36992,36994],{"className":222,"code":36993,"language":224,"meta":48,"style":48},"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",[31,36995,36996,37006,37010,37024,37028,37041,37049,37053,37057],{"__ignoreMap":48},[52,36997,36998,37000,37002,37004],{"class":54,"line":55},[52,36999,232],{"class":231},[52,37001,8385],{"class":58},[52,37003,238],{"class":231},[52,37005,8390],{"class":73},[52,37007,37008],{"class":54,"line":80},[52,37009,597],{"emptyLinePlaceholder":171},[52,37011,37012,37014,37016,37018,37020,37022],{"class":54,"line":108},[52,37013,1721],{"class":231},[52,37015,1724],{"class":371},[52,37017,1727],{"class":231},[52,37019,1730],{"class":231},[52,37021,1733],{"class":66},[52,37023,1736],{"class":58},[52,37025,37026],{"class":54,"line":118},[52,37027,1751],{"class":58},[52,37029,37030,37032,37035,37037,37039],{"class":54,"line":594},[52,37031,1756],{"class":58},[52,37033,37034],{"class":73},"'Glitch'",[52,37036,26354],{"class":58},[52,37038,4620],{"class":371},[52,37040,4412],{"class":58},[52,37042,37043,37045,37047],{"class":54,"line":600},[52,37044,3880],{"class":58},[52,37046,2869],{"class":73},[52,37048,2129],{"class":58},[52,37050,37051],{"class":54,"line":606},[52,37052,3897],{"class":58},[52,37054,37055],{"class":54,"line":653},[52,37056,1773],{"class":58},[52,37058,37059],{"class":54,"line":662},[52,37060,1778],{"class":58},[156,37062,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37064},[37065,37066],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/glitch",{"title":36742,"description":36750},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":37073,"title":8663,"body":37074,"category":26663,"componentType":20007,"description":37081,"extension":168,"meta":37398,"navigation":171,"path":37399,"requiresChild":171,"seo":37400,"stem":37401,"__hash__":37402},"components/docs/components/Glow.md",{"type":8,"value":37075,"toc":37394},[37076,37079,37082,37084,37086,37089,37091,37392],[11,37077,8663],{"id":37078},"glow",[15,37080,37081],{},"Soft glow effect with adjustable intensity",[26061,37083],{"component":8663},[23,37085,26065],{"id":20662},[26067,37087],{":props":37088},"[{\"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\"}]",[23,37090,26073],{"id":26072},[217,37092,37093,37149,37208,37264,37322],{":tabs":1543},[43,37094,37096],{"className":45,"code":37095,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,37097,37098,37106,37113,37121,37125,37133,37141],{"__ignoreMap":48},[52,37099,37100,37102,37104],{"class":54,"line":55},[52,37101,59],{"class":58},[52,37103,63],{"class":62},[52,37105,77],{"class":58},[52,37107,37108,37110],{"class":54,"line":80},[52,37109,83],{"class":58},[52,37111,37112],{"class":62},"Glow\n",[52,37114,37115,37117,37119],{"class":54,"line":108},[52,37116,17026],{"class":66},[52,37118,70],{"class":58},[52,37120,27987],{"class":73},[52,37122,37123],{"class":54,"line":118},[52,37124,26109],{"class":58},[52,37126,37127,37129,37131],{"class":54,"line":594},[52,37128,2213],{"class":58},[52,37130,2216],{"class":62},[52,37132,105],{"class":58},[52,37134,37135,37137,37139],{"class":54,"line":600},[52,37136,2230],{"class":58},[52,37138,8663],{"class":62},[52,37140,77],{"class":58},[52,37142,37143,37145,37147],{"class":54,"line":606},[52,37144,121],{"class":58},[52,37146,63],{"class":62},[52,37148,77],{"class":58},[43,37150,37152],{"className":360,"code":37151,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,37153,37154,37162,37168,37180,37184,37192,37200],{"__ignoreMap":48},[52,37155,37156,37158,37160],{"class":54,"line":55},[52,37157,59],{"class":58},[52,37159,63],{"class":371},[52,37161,77],{"class":58},[52,37163,37164,37166],{"class":54,"line":80},[52,37165,83],{"class":58},[52,37167,37112],{"class":371},[52,37169,37170,37172,37174,37176,37178],{"class":54,"line":108},[52,37171,17137],{"class":66},[52,37173,70],{"class":231},[52,37175,723],{"class":58},[52,37177,5544],{"class":371},[52,37179,729],{"class":58},[52,37181,37182],{"class":54,"line":118},[52,37183,26109],{"class":58},[52,37185,37186,37188,37190],{"class":54,"line":594},[52,37187,2213],{"class":58},[52,37189,2216],{"class":371},[52,37191,105],{"class":58},[52,37193,37194,37196,37198],{"class":54,"line":600},[52,37195,2230],{"class":58},[52,37197,8663],{"class":371},[52,37199,77],{"class":58},[52,37201,37202,37204,37206],{"class":54,"line":606},[52,37203,121],{"class":58},[52,37205,63],{"class":371},[52,37207,77],{"class":58},[43,37209,37210],{"className":2507,"code":37151,"language":2509,"meta":48,"style":48},[31,37211,37212,37220,37226,37236,37240,37248,37256],{"__ignoreMap":48},[52,37213,37214,37216,37218],{"class":54,"line":55},[52,37215,59],{"class":58},[52,37217,63],{"class":371},[52,37219,77],{"class":58},[52,37221,37222,37224],{"class":54,"line":80},[52,37223,83],{"class":58},[52,37225,37112],{"class":371},[52,37227,37228,37230,37232,37234],{"class":54,"line":108},[52,37229,17137],{"class":66},[52,37231,24004],{"class":58},[52,37233,5544],{"class":371},[52,37235,729],{"class":58},[52,37237,37238],{"class":54,"line":118},[52,37239,26109],{"class":58},[52,37241,37242,37244,37246],{"class":54,"line":594},[52,37243,2213],{"class":58},[52,37245,2216],{"class":371},[52,37247,105],{"class":58},[52,37249,37250,37252,37254],{"class":54,"line":600},[52,37251,2230],{"class":58},[52,37253,8663],{"class":371},[52,37255,77],{"class":58},[52,37257,37258,37260,37262],{"class":54,"line":606},[52,37259,121],{"class":58},[52,37261,63],{"class":371},[52,37263,77],{"class":58},[43,37265,37266],{"className":419,"code":37151,"language":420,"meta":48,"style":48},[31,37267,37268,37276,37282,37294,37298,37306,37314],{"__ignoreMap":48},[52,37269,37270,37272,37274],{"class":54,"line":55},[52,37271,59],{"class":58},[52,37273,63],{"class":371},[52,37275,77],{"class":58},[52,37277,37278,37280],{"class":54,"line":80},[52,37279,83],{"class":58},[52,37281,37112],{"class":371},[52,37283,37284,37286,37288,37290,37292],{"class":54,"line":108},[52,37285,17137],{"class":66},[52,37287,70],{"class":231},[52,37289,723],{"class":58},[52,37291,5544],{"class":371},[52,37293,729],{"class":58},[52,37295,37296],{"class":54,"line":118},[52,37297,26109],{"class":58},[52,37299,37300,37302,37304],{"class":54,"line":594},[52,37301,2213],{"class":58},[52,37303,2216],{"class":371},[52,37305,105],{"class":58},[52,37307,37308,37310,37312],{"class":54,"line":600},[52,37309,2230],{"class":58},[52,37311,8663],{"class":371},[52,37313,77],{"class":58},[52,37315,37316,37318,37320],{"class":54,"line":606},[52,37317,121],{"class":58},[52,37319,63],{"class":371},[52,37321,77],{"class":58},[43,37323,37325],{"className":222,"code":37324,"language":224,"meta":48,"style":48},"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",[31,37326,37327,37337,37341,37355,37359,37372,37380,37384,37388],{"__ignoreMap":48},[52,37328,37329,37331,37333,37335],{"class":54,"line":55},[52,37330,232],{"class":231},[52,37332,8385],{"class":58},[52,37334,238],{"class":231},[52,37336,8390],{"class":73},[52,37338,37339],{"class":54,"line":80},[52,37340,597],{"emptyLinePlaceholder":171},[52,37342,37343,37345,37347,37349,37351,37353],{"class":54,"line":108},[52,37344,1721],{"class":231},[52,37346,1724],{"class":371},[52,37348,1727],{"class":231},[52,37350,1730],{"class":231},[52,37352,1733],{"class":66},[52,37354,1736],{"class":58},[52,37356,37357],{"class":54,"line":118},[52,37358,1751],{"class":58},[52,37360,37361,37363,37366,37368,37370],{"class":54,"line":594},[52,37362,1756],{"class":58},[52,37364,37365],{"class":73},"'Glow'",[52,37367,26354],{"class":58},[52,37369,5544],{"class":371},[52,37371,4412],{"class":58},[52,37373,37374,37376,37378],{"class":54,"line":600},[52,37375,3880],{"class":58},[52,37377,2869],{"class":73},[52,37379,2129],{"class":58},[52,37381,37382],{"class":54,"line":606},[52,37383,3897],{"class":58},[52,37385,37386],{"class":54,"line":653},[52,37387,1773],{"class":58},[52,37389,37390],{"class":54,"line":662},[52,37391,1778],{"class":58},[156,37393,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37395},[37396,37397],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/glow",{"title":8663,"description":37081},"docs/components/Glow","nY6FLTxSC0jk4JC2WGI4IwGXHT0zG4brVxkpPPza0M0",{"id":37404,"title":37405,"body":37406,"category":26920,"componentType":20001,"description":37413,"extension":168,"meta":37654,"navigation":171,"path":37655,"requiresChild":26923,"seo":37656,"stem":37657,"__hash__":37658},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":37407,"toc":37650},[37408,37411,37414,37416,37418,37421,37423,37648],[11,37409,37405],{"id":37410},"godrays",[15,37412,37413],{},"Volumetric light rays emanating from a point",[26061,37415],{"component":37405},[23,37417,26065],{"id":20662},[26067,37419],{":props":37420},"[{\"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\"}]",[23,37422,26073],{"id":26072},[217,37424,37425,37465,37508,37548,37590],{":tabs":1543},[43,37426,37428],{"className":45,"code":37427,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,37429,37430,37438,37445,37453,37457],{"__ignoreMap":48},[52,37431,37432,37434,37436],{"class":54,"line":55},[52,37433,59],{"class":58},[52,37435,63],{"class":62},[52,37437,77],{"class":58},[52,37439,37440,37442],{"class":54,"line":80},[52,37441,83],{"class":58},[52,37443,37444],{"class":62},"Godrays\n",[52,37446,37447,37449,37451],{"class":54,"line":108},[52,37448,17026],{"class":66},[52,37450,70],{"class":58},[52,37452,6519],{"class":73},[52,37454,37455],{"class":54,"line":118},[52,37456,1224],{"class":58},[52,37458,37459,37461,37463],{"class":54,"line":594},[52,37460,121],{"class":58},[52,37462,63],{"class":62},[52,37464,77],{"class":58},[43,37466,37468],{"className":360,"code":37467,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,37469,37470,37478,37484,37496,37500],{"__ignoreMap":48},[52,37471,37472,37474,37476],{"class":54,"line":55},[52,37473,59],{"class":58},[52,37475,63],{"class":371},[52,37477,77],{"class":58},[52,37479,37480,37482],{"class":54,"line":80},[52,37481,83],{"class":58},[52,37483,37444],{"class":371},[52,37485,37486,37488,37490,37492,37494],{"class":54,"line":108},[52,37487,17137],{"class":66},[52,37489,70],{"class":231},[52,37491,723],{"class":58},[52,37493,3164],{"class":371},[52,37495,729],{"class":58},[52,37497,37498],{"class":54,"line":118},[52,37499,1224],{"class":58},[52,37501,37502,37504,37506],{"class":54,"line":594},[52,37503,121],{"class":58},[52,37505,63],{"class":371},[52,37507,77],{"class":58},[43,37509,37510],{"className":2507,"code":37467,"language":2509,"meta":48,"style":48},[31,37511,37512,37520,37526,37536,37540],{"__ignoreMap":48},[52,37513,37514,37516,37518],{"class":54,"line":55},[52,37515,59],{"class":58},[52,37517,63],{"class":371},[52,37519,77],{"class":58},[52,37521,37522,37524],{"class":54,"line":80},[52,37523,83],{"class":58},[52,37525,37444],{"class":371},[52,37527,37528,37530,37532,37534],{"class":54,"line":108},[52,37529,17137],{"class":66},[52,37531,24004],{"class":58},[52,37533,3164],{"class":371},[52,37535,729],{"class":58},[52,37537,37538],{"class":54,"line":118},[52,37539,1224],{"class":58},[52,37541,37542,37544,37546],{"class":54,"line":594},[52,37543,121],{"class":58},[52,37545,63],{"class":371},[52,37547,77],{"class":58},[43,37549,37550],{"className":419,"code":37467,"language":420,"meta":48,"style":48},[31,37551,37552,37560,37566,37578,37582],{"__ignoreMap":48},[52,37553,37554,37556,37558],{"class":54,"line":55},[52,37555,59],{"class":58},[52,37557,63],{"class":371},[52,37559,77],{"class":58},[52,37561,37562,37564],{"class":54,"line":80},[52,37563,83],{"class":58},[52,37565,37444],{"class":371},[52,37567,37568,37570,37572,37574,37576],{"class":54,"line":108},[52,37569,17137],{"class":66},[52,37571,70],{"class":231},[52,37573,723],{"class":58},[52,37575,3164],{"class":371},[52,37577,729],{"class":58},[52,37579,37580],{"class":54,"line":118},[52,37581,1224],{"class":58},[52,37583,37584,37586,37588],{"class":54,"line":594},[52,37585,121],{"class":58},[52,37587,63],{"class":371},[52,37589,77],{"class":58},[43,37591,37593],{"className":222,"code":37592,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Godrays', props: { intensity: 0.8 } }\n ]\n})\n",[31,37594,37595,37605,37609,37623,37627,37640,37644],{"__ignoreMap":48},[52,37596,37597,37599,37601,37603],{"class":54,"line":55},[52,37598,232],{"class":231},[52,37600,8385],{"class":58},[52,37602,238],{"class":231},[52,37604,8390],{"class":73},[52,37606,37607],{"class":54,"line":80},[52,37608,597],{"emptyLinePlaceholder":171},[52,37610,37611,37613,37615,37617,37619,37621],{"class":54,"line":108},[52,37612,1721],{"class":231},[52,37614,1724],{"class":371},[52,37616,1727],{"class":231},[52,37618,1730],{"class":231},[52,37620,1733],{"class":66},[52,37622,1736],{"class":58},[52,37624,37625],{"class":54,"line":118},[52,37626,1751],{"class":58},[52,37628,37629,37631,37634,37636,37638],{"class":54,"line":594},[52,37630,1756],{"class":58},[52,37632,37633],{"class":73},"'Godrays'",[52,37635,26354],{"class":58},[52,37637,3164],{"class":371},[52,37639,1768],{"class":58},[52,37641,37642],{"class":54,"line":600},[52,37643,1773],{"class":58},[52,37645,37646],{"class":54,"line":606},[52,37647,1778],{"class":58},[156,37649,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37651},[37652,37653],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/godrays",{"title":37405,"description":37413},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":37660,"title":37661,"body":37662,"category":27931,"componentType":20007,"description":37669,"extension":168,"meta":37924,"navigation":171,"path":37925,"requiresChild":171,"seo":37926,"stem":37927,"__hash__":37928},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":37663,"toc":37921},[37664,37667,37670,37672,37674,37919],[11,37665,37661],{"id":37666},"grayscale",[15,37668,37669],{},"Convert colors to black and white",[26061,37671],{"component":37661},[23,37673,26073],{"id":26072},[217,37675,37676,37721,37765,37809,37853],{":tabs":1543},[43,37677,37679],{"className":45,"code":37678,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,37680,37681,37689,37697,37705,37713],{"__ignoreMap":48},[52,37682,37683,37685,37687],{"class":54,"line":55},[52,37684,59],{"class":58},[52,37686,63],{"class":62},[52,37688,77],{"class":58},[52,37690,37691,37693,37695],{"class":54,"line":80},[52,37692,83],{"class":58},[52,37694,37661],{"class":62},[52,37696,77],{"class":58},[52,37698,37699,37701,37703],{"class":54,"line":108},[52,37700,2213],{"class":58},[52,37702,2216],{"class":62},[52,37704,105],{"class":58},[52,37706,37707,37709,37711],{"class":54,"line":118},[52,37708,2230],{"class":58},[52,37710,37661],{"class":62},[52,37712,77],{"class":58},[52,37714,37715,37717,37719],{"class":54,"line":594},[52,37716,121],{"class":58},[52,37718,63],{"class":62},[52,37720,77],{"class":58},[43,37722,37723],{"className":360,"code":37678,"language":362,"meta":48,"style":48},[31,37724,37725,37733,37741,37749,37757],{"__ignoreMap":48},[52,37726,37727,37729,37731],{"class":54,"line":55},[52,37728,59],{"class":58},[52,37730,63],{"class":371},[52,37732,77],{"class":58},[52,37734,37735,37737,37739],{"class":54,"line":80},[52,37736,83],{"class":58},[52,37738,37661],{"class":371},[52,37740,77],{"class":58},[52,37742,37743,37745,37747],{"class":54,"line":108},[52,37744,2213],{"class":58},[52,37746,2216],{"class":371},[52,37748,105],{"class":58},[52,37750,37751,37753,37755],{"class":54,"line":118},[52,37752,2230],{"class":58},[52,37754,37661],{"class":371},[52,37756,77],{"class":58},[52,37758,37759,37761,37763],{"class":54,"line":594},[52,37760,121],{"class":58},[52,37762,63],{"class":371},[52,37764,77],{"class":58},[43,37766,37767],{"className":2507,"code":37678,"language":2509,"meta":48,"style":48},[31,37768,37769,37777,37785,37793,37801],{"__ignoreMap":48},[52,37770,37771,37773,37775],{"class":54,"line":55},[52,37772,59],{"class":58},[52,37774,63],{"class":371},[52,37776,77],{"class":58},[52,37778,37779,37781,37783],{"class":54,"line":80},[52,37780,83],{"class":58},[52,37782,37661],{"class":371},[52,37784,77],{"class":58},[52,37786,37787,37789,37791],{"class":54,"line":108},[52,37788,2213],{"class":58},[52,37790,2216],{"class":371},[52,37792,105],{"class":58},[52,37794,37795,37797,37799],{"class":54,"line":118},[52,37796,2230],{"class":58},[52,37798,37661],{"class":371},[52,37800,77],{"class":58},[52,37802,37803,37805,37807],{"class":54,"line":594},[52,37804,121],{"class":58},[52,37806,63],{"class":371},[52,37808,77],{"class":58},[43,37810,37811],{"className":419,"code":37678,"language":420,"meta":48,"style":48},[31,37812,37813,37821,37829,37837,37845],{"__ignoreMap":48},[52,37814,37815,37817,37819],{"class":54,"line":55},[52,37816,59],{"class":58},[52,37818,63],{"class":371},[52,37820,77],{"class":58},[52,37822,37823,37825,37827],{"class":54,"line":80},[52,37824,83],{"class":58},[52,37826,37661],{"class":371},[52,37828,77],{"class":58},[52,37830,37831,37833,37835],{"class":54,"line":108},[52,37832,2213],{"class":58},[52,37834,2216],{"class":371},[52,37836,105],{"class":58},[52,37838,37839,37841,37843],{"class":54,"line":118},[52,37840,2230],{"class":58},[52,37842,37661],{"class":371},[52,37844,77],{"class":58},[52,37846,37847,37849,37851],{"class":54,"line":594},[52,37848,121],{"class":58},[52,37850,63],{"class":371},[52,37852,77],{"class":58},[43,37854,37856],{"className":222,"code":37855,"language":224,"meta":48,"style":48},"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",[31,37857,37858,37868,37872,37886,37890,37899,37907,37911,37915],{"__ignoreMap":48},[52,37859,37860,37862,37864,37866],{"class":54,"line":55},[52,37861,232],{"class":231},[52,37863,8385],{"class":58},[52,37865,238],{"class":231},[52,37867,8390],{"class":73},[52,37869,37870],{"class":54,"line":80},[52,37871,597],{"emptyLinePlaceholder":171},[52,37873,37874,37876,37878,37880,37882,37884],{"class":54,"line":108},[52,37875,1721],{"class":231},[52,37877,1724],{"class":371},[52,37879,1727],{"class":231},[52,37881,1730],{"class":231},[52,37883,1733],{"class":66},[52,37885,1736],{"class":58},[52,37887,37888],{"class":54,"line":118},[52,37889,1751],{"class":58},[52,37891,37892,37894,37897],{"class":54,"line":594},[52,37893,1756],{"class":58},[52,37895,37896],{"class":73},"'Grayscale'",[52,37898,3875],{"class":58},[52,37900,37901,37903,37905],{"class":54,"line":600},[52,37902,3880],{"class":58},[52,37904,2869],{"class":73},[52,37906,2129],{"class":58},[52,37908,37909],{"class":54,"line":606},[52,37910,3897],{"class":58},[52,37912,37913],{"class":54,"line":653},[52,37914,1773],{"class":58},[52,37916,37917],{"class":54,"line":662},[52,37918,1778],{"class":58},[156,37920,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":37922},[37923],{"id":26072,"depth":80,"text":26073},{},"/docs/components/grayscale",{"title":37661,"description":37669},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":37930,"title":37931,"body":37932,"category":26920,"componentType":20001,"description":37939,"extension":168,"meta":38169,"navigation":171,"path":38170,"requiresChild":26923,"seo":38171,"stem":38172,"__hash__":38173},"components/docs/components/Grid.md","Grid",{"type":8,"value":37933,"toc":38165},[37934,37937,37940,37942,37944,37947,37949,38163],[11,37935,37931],{"id":37936},"grid",[15,37938,37939],{},"Simple grid lines pattern with adjustable thickness and rotation",[26061,37941],{"component":37931},[23,37943,26065],{"id":20662},[26067,37945],{":props":37946},"[{\"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.\"}]",[23,37948,26073],{"id":26072},[217,37950,37951,37991,38029,38067,38105],{":tabs":1543},[43,37952,37954],{"className":45,"code":37953,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,37955,37956,37964,37971,37979,37983],{"__ignoreMap":48},[52,37957,37958,37960,37962],{"class":54,"line":55},[52,37959,59],{"class":58},[52,37961,63],{"class":62},[52,37963,77],{"class":58},[52,37965,37966,37968],{"class":54,"line":80},[52,37967,83],{"class":58},[52,37969,37970],{"class":62},"Grid\n",[52,37972,37973,37975,37977],{"class":54,"line":108},[52,37974,6504],{"class":66},[52,37976,70],{"class":58},[52,37978,6460],{"class":73},[52,37980,37981],{"class":54,"line":118},[52,37982,1224],{"class":58},[52,37984,37985,37987,37989],{"class":54,"line":594},[52,37986,121],{"class":58},[52,37988,63],{"class":62},[52,37990,77],{"class":58},[43,37992,37993],{"className":360,"code":37953,"language":362,"meta":48,"style":48},[31,37994,37995,38003,38009,38017,38021],{"__ignoreMap":48},[52,37996,37997,37999,38001],{"class":54,"line":55},[52,37998,59],{"class":58},[52,38000,63],{"class":371},[52,38002,77],{"class":58},[52,38004,38005,38007],{"class":54,"line":80},[52,38006,83],{"class":58},[52,38008,37970],{"class":371},[52,38010,38011,38013,38015],{"class":54,"line":108},[52,38012,6504],{"class":66},[52,38014,70],{"class":231},[52,38016,6460],{"class":73},[52,38018,38019],{"class":54,"line":118},[52,38020,1224],{"class":58},[52,38022,38023,38025,38027],{"class":54,"line":594},[52,38024,121],{"class":58},[52,38026,63],{"class":371},[52,38028,77],{"class":58},[43,38030,38031],{"className":2507,"code":37953,"language":2509,"meta":48,"style":48},[31,38032,38033,38041,38047,38055,38059],{"__ignoreMap":48},[52,38034,38035,38037,38039],{"class":54,"line":55},[52,38036,59],{"class":58},[52,38038,63],{"class":371},[52,38040,77],{"class":58},[52,38042,38043,38045],{"class":54,"line":80},[52,38044,83],{"class":58},[52,38046,37970],{"class":371},[52,38048,38049,38051,38053],{"class":54,"line":108},[52,38050,6504],{"class":66},[52,38052,70],{"class":58},[52,38054,6460],{"class":73},[52,38056,38057],{"class":54,"line":118},[52,38058,1224],{"class":58},[52,38060,38061,38063,38065],{"class":54,"line":594},[52,38062,121],{"class":58},[52,38064,63],{"class":371},[52,38066,77],{"class":58},[43,38068,38069],{"className":419,"code":37953,"language":420,"meta":48,"style":48},[31,38070,38071,38079,38085,38093,38097],{"__ignoreMap":48},[52,38072,38073,38075,38077],{"class":54,"line":55},[52,38074,59],{"class":58},[52,38076,63],{"class":371},[52,38078,77],{"class":58},[52,38080,38081,38083],{"class":54,"line":80},[52,38082,83],{"class":58},[52,38084,37970],{"class":371},[52,38086,38087,38089,38091],{"class":54,"line":108},[52,38088,6504],{"class":66},[52,38090,70],{"class":231},[52,38092,6460],{"class":73},[52,38094,38095],{"class":54,"line":118},[52,38096,1224],{"class":58},[52,38098,38099,38101,38103],{"class":54,"line":594},[52,38100,121],{"class":58},[52,38102,63],{"class":371},[52,38104,77],{"class":58},[43,38106,38108],{"className":222,"code":38107,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Grid', props: { color: '#ffffff' } }\n ]\n})\n",[31,38109,38110,38120,38124,38138,38142,38155,38159],{"__ignoreMap":48},[52,38111,38112,38114,38116,38118],{"class":54,"line":55},[52,38113,232],{"class":231},[52,38115,8385],{"class":58},[52,38117,238],{"class":231},[52,38119,8390],{"class":73},[52,38121,38122],{"class":54,"line":80},[52,38123,597],{"emptyLinePlaceholder":171},[52,38125,38126,38128,38130,38132,38134,38136],{"class":54,"line":108},[52,38127,1721],{"class":231},[52,38129,1724],{"class":371},[52,38131,1727],{"class":231},[52,38133,1730],{"class":231},[52,38135,1733],{"class":66},[52,38137,1736],{"class":58},[52,38139,38140],{"class":54,"line":118},[52,38141,1751],{"class":58},[52,38143,38144,38146,38149,38151,38153],{"class":54,"line":594},[52,38145,1756],{"class":58},[52,38147,38148],{"class":73},"'Grid'",[52,38150,1762],{"class":58},[52,38152,7039],{"class":73},[52,38154,1768],{"class":58},[52,38156,38157],{"class":54,"line":600},[52,38158,1773],{"class":58},[52,38160,38161],{"class":54,"line":606},[52,38162,1778],{"class":58},[156,38164,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38166},[38167,38168],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/grid",{"title":37931,"description":37939},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":38175,"title":3961,"body":38176,"category":29321,"componentType":20007,"description":38183,"extension":168,"meta":38545,"navigation":171,"path":38546,"requiresChild":171,"seo":38547,"stem":38548,"__hash__":38549},"components/docs/components/GridDistortion.md",{"type":8,"value":38177,"toc":38541},[38178,38181,38184,38186,38188,38191,38193,38539],[11,38179,3961],{"id":38180},"griddistortion",[15,38182,38183],{},"Interactive grid distortion controlled by mouse position",[26061,38185],{"component":3961},[23,38187,26065],{"id":20662},[26067,38189],{":props":38190},"[{\"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\"}]",[23,38192,26073],{"id":26072},[217,38194,38195,38259,38330,38396,38466],{":tabs":1543},[43,38196,38198],{"className":45,"code":38197,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGridDistortion\n :intensity=\"1\"\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/GridDistortion>\n\u003C/Shader>\n",[31,38199,38200,38208,38215,38223,38231,38235,38243,38251],{"__ignoreMap":48},[52,38201,38202,38204,38206],{"class":54,"line":55},[52,38203,59],{"class":58},[52,38205,63],{"class":62},[52,38207,77],{"class":58},[52,38209,38210,38212],{"class":54,"line":80},[52,38211,83],{"class":58},[52,38213,38214],{"class":62},"GridDistortion\n",[52,38216,38217,38219,38221],{"class":54,"line":108},[52,38218,17026],{"class":66},[52,38220,70],{"class":58},[52,38222,27987],{"class":73},[52,38224,38225,38227,38229],{"class":54,"line":118},[52,38226,14057],{"class":66},[52,38228,70],{"class":58},[52,38230,27987],{"class":73},[52,38232,38233],{"class":54,"line":594},[52,38234,26109],{"class":58},[52,38236,38237,38239,38241],{"class":54,"line":600},[52,38238,2213],{"class":58},[52,38240,2216],{"class":62},[52,38242,105],{"class":58},[52,38244,38245,38247,38249],{"class":54,"line":606},[52,38246,2230],{"class":58},[52,38248,3961],{"class":62},[52,38250,77],{"class":58},[52,38252,38253,38255,38257],{"class":54,"line":653},[52,38254,121],{"class":58},[52,38256,63],{"class":62},[52,38258,77],{"class":58},[43,38260,38262],{"className":360,"code":38261,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGridDistortion\n intensity={1}\n radius={1}\n >\n \u003CCircle />\n \u003C/GridDistortion>\n\u003C/Shader>\n",[31,38263,38264,38272,38278,38290,38302,38306,38314,38322],{"__ignoreMap":48},[52,38265,38266,38268,38270],{"class":54,"line":55},[52,38267,59],{"class":58},[52,38269,63],{"class":371},[52,38271,77],{"class":58},[52,38273,38274,38276],{"class":54,"line":80},[52,38275,83],{"class":58},[52,38277,38214],{"class":371},[52,38279,38280,38282,38284,38286,38288],{"class":54,"line":108},[52,38281,17137],{"class":66},[52,38283,70],{"class":231},[52,38285,723],{"class":58},[52,38287,5544],{"class":371},[52,38289,729],{"class":58},[52,38291,38292,38294,38296,38298,38300],{"class":54,"line":118},[52,38293,6514],{"class":66},[52,38295,70],{"class":231},[52,38297,723],{"class":58},[52,38299,5544],{"class":371},[52,38301,729],{"class":58},[52,38303,38304],{"class":54,"line":594},[52,38305,26109],{"class":58},[52,38307,38308,38310,38312],{"class":54,"line":600},[52,38309,2213],{"class":58},[52,38311,2216],{"class":371},[52,38313,105],{"class":58},[52,38315,38316,38318,38320],{"class":54,"line":606},[52,38317,2230],{"class":58},[52,38319,3961],{"class":371},[52,38321,77],{"class":58},[52,38323,38324,38326,38328],{"class":54,"line":653},[52,38325,121],{"class":58},[52,38327,63],{"class":371},[52,38329,77],{"class":58},[43,38331,38332],{"className":2507,"code":38261,"language":2509,"meta":48,"style":48},[31,38333,38334,38342,38348,38358,38368,38372,38380,38388],{"__ignoreMap":48},[52,38335,38336,38338,38340],{"class":54,"line":55},[52,38337,59],{"class":58},[52,38339,63],{"class":371},[52,38341,77],{"class":58},[52,38343,38344,38346],{"class":54,"line":80},[52,38345,83],{"class":58},[52,38347,38214],{"class":371},[52,38349,38350,38352,38354,38356],{"class":54,"line":108},[52,38351,17137],{"class":66},[52,38353,24004],{"class":58},[52,38355,5544],{"class":371},[52,38357,729],{"class":58},[52,38359,38360,38362,38364,38366],{"class":54,"line":118},[52,38361,6514],{"class":66},[52,38363,24004],{"class":58},[52,38365,5544],{"class":371},[52,38367,729],{"class":58},[52,38369,38370],{"class":54,"line":594},[52,38371,26109],{"class":58},[52,38373,38374,38376,38378],{"class":54,"line":600},[52,38375,2213],{"class":58},[52,38377,2216],{"class":371},[52,38379,105],{"class":58},[52,38381,38382,38384,38386],{"class":54,"line":606},[52,38383,2230],{"class":58},[52,38385,3961],{"class":371},[52,38387,77],{"class":58},[52,38389,38390,38392,38394],{"class":54,"line":653},[52,38391,121],{"class":58},[52,38393,63],{"class":371},[52,38395,77],{"class":58},[43,38397,38398],{"className":419,"code":38261,"language":420,"meta":48,"style":48},[31,38399,38400,38408,38414,38426,38438,38442,38450,38458],{"__ignoreMap":48},[52,38401,38402,38404,38406],{"class":54,"line":55},[52,38403,59],{"class":58},[52,38405,63],{"class":371},[52,38407,77],{"class":58},[52,38409,38410,38412],{"class":54,"line":80},[52,38411,83],{"class":58},[52,38413,38214],{"class":371},[52,38415,38416,38418,38420,38422,38424],{"class":54,"line":108},[52,38417,17137],{"class":66},[52,38419,70],{"class":231},[52,38421,723],{"class":58},[52,38423,5544],{"class":371},[52,38425,729],{"class":58},[52,38427,38428,38430,38432,38434,38436],{"class":54,"line":118},[52,38429,6514],{"class":66},[52,38431,70],{"class":231},[52,38433,723],{"class":58},[52,38435,5544],{"class":371},[52,38437,729],{"class":58},[52,38439,38440],{"class":54,"line":594},[52,38441,26109],{"class":58},[52,38443,38444,38446,38448],{"class":54,"line":600},[52,38445,2213],{"class":58},[52,38447,2216],{"class":371},[52,38449,105],{"class":58},[52,38451,38452,38454,38456],{"class":54,"line":606},[52,38453,2230],{"class":58},[52,38455,3961],{"class":371},[52,38457,77],{"class":58},[52,38459,38460,38462,38464],{"class":54,"line":653},[52,38461,121],{"class":58},[52,38463,63],{"class":371},[52,38465,77],{"class":58},[43,38467,38469],{"className":222,"code":38468,"language":224,"meta":48,"style":48},"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",[31,38470,38471,38481,38485,38499,38503,38519,38527,38531,38535],{"__ignoreMap":48},[52,38472,38473,38475,38477,38479],{"class":54,"line":55},[52,38474,232],{"class":231},[52,38476,8385],{"class":58},[52,38478,238],{"class":231},[52,38480,8390],{"class":73},[52,38482,38483],{"class":54,"line":80},[52,38484,597],{"emptyLinePlaceholder":171},[52,38486,38487,38489,38491,38493,38495,38497],{"class":54,"line":108},[52,38488,1721],{"class":231},[52,38490,1724],{"class":371},[52,38492,1727],{"class":231},[52,38494,1730],{"class":231},[52,38496,1733],{"class":66},[52,38498,1736],{"class":58},[52,38500,38501],{"class":54,"line":118},[52,38502,1751],{"class":58},[52,38504,38505,38507,38509,38511,38513,38515,38517],{"class":54,"line":594},[52,38506,1756],{"class":58},[52,38508,4404],{"class":73},[52,38510,26354],{"class":58},[52,38512,5544],{"class":371},[52,38514,3431],{"class":58},[52,38516,5544],{"class":371},[52,38518,4412],{"class":58},[52,38520,38521,38523,38525],{"class":54,"line":600},[52,38522,3880],{"class":58},[52,38524,2869],{"class":73},[52,38526,2129],{"class":58},[52,38528,38529],{"class":54,"line":606},[52,38530,3897],{"class":58},[52,38532,38533],{"class":54,"line":653},[52,38534,1773],{"class":58},[52,38536,38537],{"class":54,"line":662},[52,38538,1778],{"class":58},[156,38540,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38542},[38543,38544],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/griddistortion",{"title":3961,"description":38183},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":38551,"title":38552,"body":38553,"category":38815,"componentType":20007,"description":38560,"extension":168,"meta":38816,"navigation":171,"path":38817,"requiresChild":171,"seo":38818,"stem":38819,"__hash__":38820},"components/docs/components/Group.md","Group",{"type":8,"value":38554,"toc":38812},[38555,38558,38561,38563,38565,38810],[11,38556,38552],{"id":38557},"group",[15,38559,38560],{},"Container for organizing and composing child effects",[26061,38562],{"component":38552},[23,38564,26073],{"id":26072},[217,38566,38567,38612,38656,38700,38744],{":tabs":1543},[43,38568,38570],{"className":45,"code":38569,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,38571,38572,38580,38588,38596,38604],{"__ignoreMap":48},[52,38573,38574,38576,38578],{"class":54,"line":55},[52,38575,59],{"class":58},[52,38577,63],{"class":62},[52,38579,77],{"class":58},[52,38581,38582,38584,38586],{"class":54,"line":80},[52,38583,83],{"class":58},[52,38585,38552],{"class":62},[52,38587,77],{"class":58},[52,38589,38590,38592,38594],{"class":54,"line":108},[52,38591,2213],{"class":58},[52,38593,2216],{"class":62},[52,38595,105],{"class":58},[52,38597,38598,38600,38602],{"class":54,"line":118},[52,38599,2230],{"class":58},[52,38601,38552],{"class":62},[52,38603,77],{"class":58},[52,38605,38606,38608,38610],{"class":54,"line":594},[52,38607,121],{"class":58},[52,38609,63],{"class":62},[52,38611,77],{"class":58},[43,38613,38614],{"className":360,"code":38569,"language":362,"meta":48,"style":48},[31,38615,38616,38624,38632,38640,38648],{"__ignoreMap":48},[52,38617,38618,38620,38622],{"class":54,"line":55},[52,38619,59],{"class":58},[52,38621,63],{"class":371},[52,38623,77],{"class":58},[52,38625,38626,38628,38630],{"class":54,"line":80},[52,38627,83],{"class":58},[52,38629,38552],{"class":371},[52,38631,77],{"class":58},[52,38633,38634,38636,38638],{"class":54,"line":108},[52,38635,2213],{"class":58},[52,38637,2216],{"class":371},[52,38639,105],{"class":58},[52,38641,38642,38644,38646],{"class":54,"line":118},[52,38643,2230],{"class":58},[52,38645,38552],{"class":371},[52,38647,77],{"class":58},[52,38649,38650,38652,38654],{"class":54,"line":594},[52,38651,121],{"class":58},[52,38653,63],{"class":371},[52,38655,77],{"class":58},[43,38657,38658],{"className":2507,"code":38569,"language":2509,"meta":48,"style":48},[31,38659,38660,38668,38676,38684,38692],{"__ignoreMap":48},[52,38661,38662,38664,38666],{"class":54,"line":55},[52,38663,59],{"class":58},[52,38665,63],{"class":371},[52,38667,77],{"class":58},[52,38669,38670,38672,38674],{"class":54,"line":80},[52,38671,83],{"class":58},[52,38673,38552],{"class":371},[52,38675,77],{"class":58},[52,38677,38678,38680,38682],{"class":54,"line":108},[52,38679,2213],{"class":58},[52,38681,2216],{"class":371},[52,38683,105],{"class":58},[52,38685,38686,38688,38690],{"class":54,"line":118},[52,38687,2230],{"class":58},[52,38689,38552],{"class":371},[52,38691,77],{"class":58},[52,38693,38694,38696,38698],{"class":54,"line":594},[52,38695,121],{"class":58},[52,38697,63],{"class":371},[52,38699,77],{"class":58},[43,38701,38702],{"className":419,"code":38569,"language":420,"meta":48,"style":48},[31,38703,38704,38712,38720,38728,38736],{"__ignoreMap":48},[52,38705,38706,38708,38710],{"class":54,"line":55},[52,38707,59],{"class":58},[52,38709,63],{"class":371},[52,38711,77],{"class":58},[52,38713,38714,38716,38718],{"class":54,"line":80},[52,38715,83],{"class":58},[52,38717,38552],{"class":371},[52,38719,77],{"class":58},[52,38721,38722,38724,38726],{"class":54,"line":108},[52,38723,2213],{"class":58},[52,38725,2216],{"class":371},[52,38727,105],{"class":58},[52,38729,38730,38732,38734],{"class":54,"line":118},[52,38731,2230],{"class":58},[52,38733,38552],{"class":371},[52,38735,77],{"class":58},[52,38737,38738,38740,38742],{"class":54,"line":594},[52,38739,121],{"class":58},[52,38741,63],{"class":371},[52,38743,77],{"class":58},[43,38745,38747],{"className":222,"code":38746,"language":224,"meta":48,"style":48},"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",[31,38748,38749,38759,38763,38777,38781,38790,38798,38802,38806],{"__ignoreMap":48},[52,38750,38751,38753,38755,38757],{"class":54,"line":55},[52,38752,232],{"class":231},[52,38754,8385],{"class":58},[52,38756,238],{"class":231},[52,38758,8390],{"class":73},[52,38760,38761],{"class":54,"line":80},[52,38762,597],{"emptyLinePlaceholder":171},[52,38764,38765,38767,38769,38771,38773,38775],{"class":54,"line":108},[52,38766,1721],{"class":231},[52,38768,1724],{"class":371},[52,38770,1727],{"class":231},[52,38772,1730],{"class":231},[52,38774,1733],{"class":66},[52,38776,1736],{"class":58},[52,38778,38779],{"class":54,"line":118},[52,38780,1751],{"class":58},[52,38782,38783,38785,38788],{"class":54,"line":594},[52,38784,1756],{"class":58},[52,38786,38787],{"class":73},"'Group'",[52,38789,3875],{"class":58},[52,38791,38792,38794,38796],{"class":54,"line":600},[52,38793,3880],{"class":58},[52,38795,2869],{"class":73},[52,38797,2129],{"class":58},[52,38799,38800],{"class":54,"line":606},[52,38801,3897],{"class":58},[52,38803,38804],{"class":54,"line":653},[52,38805,1773],{"class":58},[52,38807,38808],{"class":54,"line":662},[52,38809,1778],{"class":58},[156,38811,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":38813},[38814],{"id":26072,"depth":80,"text":26073},"Utilities",{},"/docs/components/group",{"title":38552,"description":38560},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":38822,"title":38823,"body":38824,"category":26663,"componentType":20007,"description":38831,"extension":168,"meta":39092,"navigation":171,"path":39093,"requiresChild":171,"seo":39094,"stem":39095,"__hash__":39096},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":38825,"toc":39088},[38826,38829,38832,38834,38836,38839,38841,39086],[11,38827,38823],{"id":38828},"halftone",[15,38830,38831],{},"Halftone dot pattern effect for printing aesthetics",[26061,38833],{"component":38823},[23,38835,26065],{"id":20662},[26067,38837],{":props":38838},"[{\"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\"}]",[23,38840,26073],{"id":26072},[217,38842,38843,38888,38932,38976,39020],{":tabs":1543},[43,38844,38846],{"className":45,"code":38845,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[31,38847,38848,38856,38864,38872,38880],{"__ignoreMap":48},[52,38849,38850,38852,38854],{"class":54,"line":55},[52,38851,59],{"class":58},[52,38853,63],{"class":62},[52,38855,77],{"class":58},[52,38857,38858,38860,38862],{"class":54,"line":80},[52,38859,83],{"class":58},[52,38861,38823],{"class":62},[52,38863,77],{"class":58},[52,38865,38866,38868,38870],{"class":54,"line":108},[52,38867,2213],{"class":58},[52,38869,2216],{"class":62},[52,38871,105],{"class":58},[52,38873,38874,38876,38878],{"class":54,"line":118},[52,38875,2230],{"class":58},[52,38877,38823],{"class":62},[52,38879,77],{"class":58},[52,38881,38882,38884,38886],{"class":54,"line":594},[52,38883,121],{"class":58},[52,38885,63],{"class":62},[52,38887,77],{"class":58},[43,38889,38890],{"className":360,"code":38845,"language":362,"meta":48,"style":48},[31,38891,38892,38900,38908,38916,38924],{"__ignoreMap":48},[52,38893,38894,38896,38898],{"class":54,"line":55},[52,38895,59],{"class":58},[52,38897,63],{"class":371},[52,38899,77],{"class":58},[52,38901,38902,38904,38906],{"class":54,"line":80},[52,38903,83],{"class":58},[52,38905,38823],{"class":371},[52,38907,77],{"class":58},[52,38909,38910,38912,38914],{"class":54,"line":108},[52,38911,2213],{"class":58},[52,38913,2216],{"class":371},[52,38915,105],{"class":58},[52,38917,38918,38920,38922],{"class":54,"line":118},[52,38919,2230],{"class":58},[52,38921,38823],{"class":371},[52,38923,77],{"class":58},[52,38925,38926,38928,38930],{"class":54,"line":594},[52,38927,121],{"class":58},[52,38929,63],{"class":371},[52,38931,77],{"class":58},[43,38933,38934],{"className":2507,"code":38845,"language":2509,"meta":48,"style":48},[31,38935,38936,38944,38952,38960,38968],{"__ignoreMap":48},[52,38937,38938,38940,38942],{"class":54,"line":55},[52,38939,59],{"class":58},[52,38941,63],{"class":371},[52,38943,77],{"class":58},[52,38945,38946,38948,38950],{"class":54,"line":80},[52,38947,83],{"class":58},[52,38949,38823],{"class":371},[52,38951,77],{"class":58},[52,38953,38954,38956,38958],{"class":54,"line":108},[52,38955,2213],{"class":58},[52,38957,2216],{"class":371},[52,38959,105],{"class":58},[52,38961,38962,38964,38966],{"class":54,"line":118},[52,38963,2230],{"class":58},[52,38965,38823],{"class":371},[52,38967,77],{"class":58},[52,38969,38970,38972,38974],{"class":54,"line":594},[52,38971,121],{"class":58},[52,38973,63],{"class":371},[52,38975,77],{"class":58},[43,38977,38978],{"className":419,"code":38845,"language":420,"meta":48,"style":48},[31,38979,38980,38988,38996,39004,39012],{"__ignoreMap":48},[52,38981,38982,38984,38986],{"class":54,"line":55},[52,38983,59],{"class":58},[52,38985,63],{"class":371},[52,38987,77],{"class":58},[52,38989,38990,38992,38994],{"class":54,"line":80},[52,38991,83],{"class":58},[52,38993,38823],{"class":371},[52,38995,77],{"class":58},[52,38997,38998,39000,39002],{"class":54,"line":108},[52,38999,2213],{"class":58},[52,39001,2216],{"class":371},[52,39003,105],{"class":58},[52,39005,39006,39008,39010],{"class":54,"line":118},[52,39007,2230],{"class":58},[52,39009,38823],{"class":371},[52,39011,77],{"class":58},[52,39013,39014,39016,39018],{"class":54,"line":594},[52,39015,121],{"class":58},[52,39017,63],{"class":371},[52,39019,77],{"class":58},[43,39021,39023],{"className":222,"code":39022,"language":224,"meta":48,"style":48},"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",[31,39024,39025,39035,39039,39053,39057,39066,39074,39078,39082],{"__ignoreMap":48},[52,39026,39027,39029,39031,39033],{"class":54,"line":55},[52,39028,232],{"class":231},[52,39030,8385],{"class":58},[52,39032,238],{"class":231},[52,39034,8390],{"class":73},[52,39036,39037],{"class":54,"line":80},[52,39038,597],{"emptyLinePlaceholder":171},[52,39040,39041,39043,39045,39047,39049,39051],{"class":54,"line":108},[52,39042,1721],{"class":231},[52,39044,1724],{"class":371},[52,39046,1727],{"class":231},[52,39048,1730],{"class":231},[52,39050,1733],{"class":66},[52,39052,1736],{"class":58},[52,39054,39055],{"class":54,"line":118},[52,39056,1751],{"class":58},[52,39058,39059,39061,39064],{"class":54,"line":594},[52,39060,1756],{"class":58},[52,39062,39063],{"class":73},"'Halftone'",[52,39065,3875],{"class":58},[52,39067,39068,39070,39072],{"class":54,"line":600},[52,39069,3880],{"class":58},[52,39071,2869],{"class":73},[52,39073,2129],{"class":58},[52,39075,39076],{"class":54,"line":606},[52,39077,3897],{"class":58},[52,39079,39080],{"class":54,"line":653},[52,39081,1773],{"class":58},[52,39083,39084],{"class":54,"line":662},[52,39085,1778],{"class":58},[156,39087,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":39089},[39090,39091],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/halftone",{"title":38823,"description":38831},"docs/components/Halftone","FE9bbvMNDaNzrmALJi6cgBqUj0aRisbj-Tjo1odmRlE",{"id":39098,"title":39099,"body":39100,"category":26920,"componentType":20001,"description":39107,"extension":168,"meta":39292,"navigation":171,"path":39293,"requiresChild":26923,"seo":39294,"stem":39295,"__hash__":39296},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":39101,"toc":39288},[39102,39105,39108,39110,39112,39115,39117,39286],[11,39103,39099],{"id":39104},"hexgrid",[15,39106,39107],{},"Honeycomb hexagonal grid pattern",[26061,39109],{"component":39099},[23,39111,26065],{"id":20662},[26067,39113],{":props":39114},"[{\"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\"}]",[23,39116,26073],{"id":26072},[217,39118,39119,39148,39176,39204,39232],{":tabs":1543},[43,39120,39122],{"className":45,"code":39121,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,39123,39124,39132,39140],{"__ignoreMap":48},[52,39125,39126,39128,39130],{"class":54,"line":55},[52,39127,59],{"class":58},[52,39129,63],{"class":62},[52,39131,77],{"class":58},[52,39133,39134,39136,39138],{"class":54,"line":80},[52,39135,83],{"class":58},[52,39137,39099],{"class":62},[52,39139,105],{"class":58},[52,39141,39142,39144,39146],{"class":54,"line":108},[52,39143,121],{"class":58},[52,39145,63],{"class":62},[52,39147,77],{"class":58},[43,39149,39150],{"className":360,"code":39121,"language":362,"meta":48,"style":48},[31,39151,39152,39160,39168],{"__ignoreMap":48},[52,39153,39154,39156,39158],{"class":54,"line":55},[52,39155,59],{"class":58},[52,39157,63],{"class":371},[52,39159,77],{"class":58},[52,39161,39162,39164,39166],{"class":54,"line":80},[52,39163,83],{"class":58},[52,39165,39099],{"class":371},[52,39167,105],{"class":58},[52,39169,39170,39172,39174],{"class":54,"line":108},[52,39171,121],{"class":58},[52,39173,63],{"class":371},[52,39175,77],{"class":58},[43,39177,39178],{"className":2507,"code":39121,"language":2509,"meta":48,"style":48},[31,39179,39180,39188,39196],{"__ignoreMap":48},[52,39181,39182,39184,39186],{"class":54,"line":55},[52,39183,59],{"class":58},[52,39185,63],{"class":371},[52,39187,77],{"class":58},[52,39189,39190,39192,39194],{"class":54,"line":80},[52,39191,83],{"class":58},[52,39193,39099],{"class":371},[52,39195,105],{"class":58},[52,39197,39198,39200,39202],{"class":54,"line":108},[52,39199,121],{"class":58},[52,39201,63],{"class":371},[52,39203,77],{"class":58},[43,39205,39206],{"className":419,"code":39121,"language":420,"meta":48,"style":48},[31,39207,39208,39216,39224],{"__ignoreMap":48},[52,39209,39210,39212,39214],{"class":54,"line":55},[52,39211,59],{"class":58},[52,39213,63],{"class":371},[52,39215,77],{"class":58},[52,39217,39218,39220,39222],{"class":54,"line":80},[52,39219,83],{"class":58},[52,39221,39099],{"class":371},[52,39223,105],{"class":58},[52,39225,39226,39228,39230],{"class":54,"line":108},[52,39227,121],{"class":58},[52,39229,63],{"class":371},[52,39231,77],{"class":58},[43,39233,39235],{"className":222,"code":39234,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HexGrid', props: {} }\n ]\n})\n",[31,39236,39237,39247,39251,39265,39269,39278,39282],{"__ignoreMap":48},[52,39238,39239,39241,39243,39245],{"class":54,"line":55},[52,39240,232],{"class":231},[52,39242,8385],{"class":58},[52,39244,238],{"class":231},[52,39246,8390],{"class":73},[52,39248,39249],{"class":54,"line":80},[52,39250,597],{"emptyLinePlaceholder":171},[52,39252,39253,39255,39257,39259,39261,39263],{"class":54,"line":108},[52,39254,1721],{"class":231},[52,39256,1724],{"class":371},[52,39258,1727],{"class":231},[52,39260,1730],{"class":231},[52,39262,1733],{"class":66},[52,39264,1736],{"class":58},[52,39266,39267],{"class":54,"line":118},[52,39268,1751],{"class":58},[52,39270,39271,39273,39276],{"class":54,"line":594},[52,39272,1756],{"class":58},[52,39274,39275],{"class":73},"'HexGrid'",[52,39277,2129],{"class":58},[52,39279,39280],{"class":54,"line":600},[52,39281,1773],{"class":58},[52,39283,39284],{"class":54,"line":606},[52,39285,1778],{"class":58},[156,39287,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":39289},[39290,39291],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/hexgrid",{"title":39099,"description":39107},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":39298,"title":39299,"body":39300,"category":27931,"componentType":20007,"description":39307,"extension":168,"meta":39568,"navigation":171,"path":39569,"requiresChild":171,"seo":39570,"stem":39571,"__hash__":39572},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":39301,"toc":39564},[39302,39305,39308,39310,39312,39315,39317,39562],[11,39303,39299],{"id":39304},"hueshift",[15,39306,39307],{},"Rotate hue around the color wheel",[26061,39309],{"component":39299},[23,39311,26065],{"id":20662},[26067,39313],{":props":39314},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,39316,26073],{"id":26072},[217,39318,39319,39364,39408,39452,39496],{":tabs":1543},[43,39320,39322],{"className":45,"code":39321,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,39323,39324,39332,39340,39348,39356],{"__ignoreMap":48},[52,39325,39326,39328,39330],{"class":54,"line":55},[52,39327,59],{"class":58},[52,39329,63],{"class":62},[52,39331,77],{"class":58},[52,39333,39334,39336,39338],{"class":54,"line":80},[52,39335,83],{"class":58},[52,39337,39299],{"class":62},[52,39339,77],{"class":58},[52,39341,39342,39344,39346],{"class":54,"line":108},[52,39343,2213],{"class":58},[52,39345,2216],{"class":62},[52,39347,105],{"class":58},[52,39349,39350,39352,39354],{"class":54,"line":118},[52,39351,2230],{"class":58},[52,39353,39299],{"class":62},[52,39355,77],{"class":58},[52,39357,39358,39360,39362],{"class":54,"line":594},[52,39359,121],{"class":58},[52,39361,63],{"class":62},[52,39363,77],{"class":58},[43,39365,39366],{"className":360,"code":39321,"language":362,"meta":48,"style":48},[31,39367,39368,39376,39384,39392,39400],{"__ignoreMap":48},[52,39369,39370,39372,39374],{"class":54,"line":55},[52,39371,59],{"class":58},[52,39373,63],{"class":371},[52,39375,77],{"class":58},[52,39377,39378,39380,39382],{"class":54,"line":80},[52,39379,83],{"class":58},[52,39381,39299],{"class":371},[52,39383,77],{"class":58},[52,39385,39386,39388,39390],{"class":54,"line":108},[52,39387,2213],{"class":58},[52,39389,2216],{"class":371},[52,39391,105],{"class":58},[52,39393,39394,39396,39398],{"class":54,"line":118},[52,39395,2230],{"class":58},[52,39397,39299],{"class":371},[52,39399,77],{"class":58},[52,39401,39402,39404,39406],{"class":54,"line":594},[52,39403,121],{"class":58},[52,39405,63],{"class":371},[52,39407,77],{"class":58},[43,39409,39410],{"className":2507,"code":39321,"language":2509,"meta":48,"style":48},[31,39411,39412,39420,39428,39436,39444],{"__ignoreMap":48},[52,39413,39414,39416,39418],{"class":54,"line":55},[52,39415,59],{"class":58},[52,39417,63],{"class":371},[52,39419,77],{"class":58},[52,39421,39422,39424,39426],{"class":54,"line":80},[52,39423,83],{"class":58},[52,39425,39299],{"class":371},[52,39427,77],{"class":58},[52,39429,39430,39432,39434],{"class":54,"line":108},[52,39431,2213],{"class":58},[52,39433,2216],{"class":371},[52,39435,105],{"class":58},[52,39437,39438,39440,39442],{"class":54,"line":118},[52,39439,2230],{"class":58},[52,39441,39299],{"class":371},[52,39443,77],{"class":58},[52,39445,39446,39448,39450],{"class":54,"line":594},[52,39447,121],{"class":58},[52,39449,63],{"class":371},[52,39451,77],{"class":58},[43,39453,39454],{"className":419,"code":39321,"language":420,"meta":48,"style":48},[31,39455,39456,39464,39472,39480,39488],{"__ignoreMap":48},[52,39457,39458,39460,39462],{"class":54,"line":55},[52,39459,59],{"class":58},[52,39461,63],{"class":371},[52,39463,77],{"class":58},[52,39465,39466,39468,39470],{"class":54,"line":80},[52,39467,83],{"class":58},[52,39469,39299],{"class":371},[52,39471,77],{"class":58},[52,39473,39474,39476,39478],{"class":54,"line":108},[52,39475,2213],{"class":58},[52,39477,2216],{"class":371},[52,39479,105],{"class":58},[52,39481,39482,39484,39486],{"class":54,"line":118},[52,39483,2230],{"class":58},[52,39485,39299],{"class":371},[52,39487,77],{"class":58},[52,39489,39490,39492,39494],{"class":54,"line":594},[52,39491,121],{"class":58},[52,39493,63],{"class":371},[52,39495,77],{"class":58},[43,39497,39499],{"className":222,"code":39498,"language":224,"meta":48,"style":48},"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",[31,39500,39501,39511,39515,39529,39533,39542,39550,39554,39558],{"__ignoreMap":48},[52,39502,39503,39505,39507,39509],{"class":54,"line":55},[52,39504,232],{"class":231},[52,39506,8385],{"class":58},[52,39508,238],{"class":231},[52,39510,8390],{"class":73},[52,39512,39513],{"class":54,"line":80},[52,39514,597],{"emptyLinePlaceholder":171},[52,39516,39517,39519,39521,39523,39525,39527],{"class":54,"line":108},[52,39518,1721],{"class":231},[52,39520,1724],{"class":371},[52,39522,1727],{"class":231},[52,39524,1730],{"class":231},[52,39526,1733],{"class":66},[52,39528,1736],{"class":58},[52,39530,39531],{"class":54,"line":118},[52,39532,1751],{"class":58},[52,39534,39535,39537,39540],{"class":54,"line":594},[52,39536,1756],{"class":58},[52,39538,39539],{"class":73},"'HueShift'",[52,39541,3875],{"class":58},[52,39543,39544,39546,39548],{"class":54,"line":600},[52,39545,3880],{"class":58},[52,39547,2869],{"class":73},[52,39549,2129],{"class":58},[52,39551,39552],{"class":54,"line":606},[52,39553,3897],{"class":58},[52,39555,39556],{"class":54,"line":653},[52,39557,1773],{"class":58},[52,39559,39560],{"class":54,"line":662},[52,39561,1778],{"class":58},[156,39563,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":39565},[39566,39567],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/hueshift",{"title":39299,"description":39307},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":39574,"title":39575,"body":39576,"category":26920,"componentType":20001,"description":39583,"extension":168,"meta":39768,"navigation":171,"path":39769,"requiresChild":26923,"seo":39770,"stem":39771,"__hash__":39772},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":39577,"toc":39764},[39578,39581,39584,39586,39588,39591,39593,39762],[11,39579,39575],{"id":39580},"imagetexture",[15,39582,39583],{},"Display an image with customizable object-fit modes",[26061,39585],{"component":39575},[23,39587,26065],{"id":20662},[26067,39589],{":props":39590},"[{\"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\"}]",[23,39592,26073],{"id":26072},[217,39594,39595,39624,39652,39680,39708],{":tabs":1543},[43,39596,39598],{"className":45,"code":39597,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,39599,39600,39608,39616],{"__ignoreMap":48},[52,39601,39602,39604,39606],{"class":54,"line":55},[52,39603,59],{"class":58},[52,39605,63],{"class":62},[52,39607,77],{"class":58},[52,39609,39610,39612,39614],{"class":54,"line":80},[52,39611,83],{"class":58},[52,39613,39575],{"class":62},[52,39615,105],{"class":58},[52,39617,39618,39620,39622],{"class":54,"line":108},[52,39619,121],{"class":58},[52,39621,63],{"class":62},[52,39623,77],{"class":58},[43,39625,39626],{"className":360,"code":39597,"language":362,"meta":48,"style":48},[31,39627,39628,39636,39644],{"__ignoreMap":48},[52,39629,39630,39632,39634],{"class":54,"line":55},[52,39631,59],{"class":58},[52,39633,63],{"class":371},[52,39635,77],{"class":58},[52,39637,39638,39640,39642],{"class":54,"line":80},[52,39639,83],{"class":58},[52,39641,39575],{"class":371},[52,39643,105],{"class":58},[52,39645,39646,39648,39650],{"class":54,"line":108},[52,39647,121],{"class":58},[52,39649,63],{"class":371},[52,39651,77],{"class":58},[43,39653,39654],{"className":2507,"code":39597,"language":2509,"meta":48,"style":48},[31,39655,39656,39664,39672],{"__ignoreMap":48},[52,39657,39658,39660,39662],{"class":54,"line":55},[52,39659,59],{"class":58},[52,39661,63],{"class":371},[52,39663,77],{"class":58},[52,39665,39666,39668,39670],{"class":54,"line":80},[52,39667,83],{"class":58},[52,39669,39575],{"class":371},[52,39671,105],{"class":58},[52,39673,39674,39676,39678],{"class":54,"line":108},[52,39675,121],{"class":58},[52,39677,63],{"class":371},[52,39679,77],{"class":58},[43,39681,39682],{"className":419,"code":39597,"language":420,"meta":48,"style":48},[31,39683,39684,39692,39700],{"__ignoreMap":48},[52,39685,39686,39688,39690],{"class":54,"line":55},[52,39687,59],{"class":58},[52,39689,63],{"class":371},[52,39691,77],{"class":58},[52,39693,39694,39696,39698],{"class":54,"line":80},[52,39695,83],{"class":58},[52,39697,39575],{"class":371},[52,39699,105],{"class":58},[52,39701,39702,39704,39706],{"class":54,"line":108},[52,39703,121],{"class":58},[52,39705,63],{"class":371},[52,39707,77],{"class":58},[43,39709,39711],{"className":222,"code":39710,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ImageTexture', props: {} }\n ]\n})\n",[31,39712,39713,39723,39727,39741,39745,39754,39758],{"__ignoreMap":48},[52,39714,39715,39717,39719,39721],{"class":54,"line":55},[52,39716,232],{"class":231},[52,39718,8385],{"class":58},[52,39720,238],{"class":231},[52,39722,8390],{"class":73},[52,39724,39725],{"class":54,"line":80},[52,39726,597],{"emptyLinePlaceholder":171},[52,39728,39729,39731,39733,39735,39737,39739],{"class":54,"line":108},[52,39730,1721],{"class":231},[52,39732,1724],{"class":371},[52,39734,1727],{"class":231},[52,39736,1730],{"class":231},[52,39738,1733],{"class":66},[52,39740,1736],{"class":58},[52,39742,39743],{"class":54,"line":118},[52,39744,1751],{"class":58},[52,39746,39747,39749,39752],{"class":54,"line":594},[52,39748,1756],{"class":58},[52,39750,39751],{"class":73},"'ImageTexture'",[52,39753,2129],{"class":58},[52,39755,39756],{"class":54,"line":600},[52,39757,1773],{"class":58},[52,39759,39760],{"class":54,"line":606},[52,39761,1778],{"class":58},[156,39763,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":39765},[39766,39767],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/imagetexture",{"title":39575,"description":39583},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":39774,"title":39775,"body":39776,"category":27931,"componentType":20007,"description":39783,"extension":168,"meta":40038,"navigation":171,"path":40039,"requiresChild":171,"seo":40040,"stem":40041,"__hash__":40042},"components/docs/components/Invert.md","Invert",{"type":8,"value":39777,"toc":40035},[39778,39781,39784,39786,39788,40033],[11,39779,39775],{"id":39780},"invert",[15,39782,39783],{},"Invert RGB colors while preserving alpha",[26061,39785],{"component":39775},[23,39787,26073],{"id":26072},[217,39789,39790,39835,39879,39923,39967],{":tabs":1543},[43,39791,39793],{"className":45,"code":39792,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,39794,39795,39803,39811,39819,39827],{"__ignoreMap":48},[52,39796,39797,39799,39801],{"class":54,"line":55},[52,39798,59],{"class":58},[52,39800,63],{"class":62},[52,39802,77],{"class":58},[52,39804,39805,39807,39809],{"class":54,"line":80},[52,39806,83],{"class":58},[52,39808,39775],{"class":62},[52,39810,77],{"class":58},[52,39812,39813,39815,39817],{"class":54,"line":108},[52,39814,2213],{"class":58},[52,39816,2216],{"class":62},[52,39818,105],{"class":58},[52,39820,39821,39823,39825],{"class":54,"line":118},[52,39822,2230],{"class":58},[52,39824,39775],{"class":62},[52,39826,77],{"class":58},[52,39828,39829,39831,39833],{"class":54,"line":594},[52,39830,121],{"class":58},[52,39832,63],{"class":62},[52,39834,77],{"class":58},[43,39836,39837],{"className":360,"code":39792,"language":362,"meta":48,"style":48},[31,39838,39839,39847,39855,39863,39871],{"__ignoreMap":48},[52,39840,39841,39843,39845],{"class":54,"line":55},[52,39842,59],{"class":58},[52,39844,63],{"class":371},[52,39846,77],{"class":58},[52,39848,39849,39851,39853],{"class":54,"line":80},[52,39850,83],{"class":58},[52,39852,39775],{"class":371},[52,39854,77],{"class":58},[52,39856,39857,39859,39861],{"class":54,"line":108},[52,39858,2213],{"class":58},[52,39860,2216],{"class":371},[52,39862,105],{"class":58},[52,39864,39865,39867,39869],{"class":54,"line":118},[52,39866,2230],{"class":58},[52,39868,39775],{"class":371},[52,39870,77],{"class":58},[52,39872,39873,39875,39877],{"class":54,"line":594},[52,39874,121],{"class":58},[52,39876,63],{"class":371},[52,39878,77],{"class":58},[43,39880,39881],{"className":2507,"code":39792,"language":2509,"meta":48,"style":48},[31,39882,39883,39891,39899,39907,39915],{"__ignoreMap":48},[52,39884,39885,39887,39889],{"class":54,"line":55},[52,39886,59],{"class":58},[52,39888,63],{"class":371},[52,39890,77],{"class":58},[52,39892,39893,39895,39897],{"class":54,"line":80},[52,39894,83],{"class":58},[52,39896,39775],{"class":371},[52,39898,77],{"class":58},[52,39900,39901,39903,39905],{"class":54,"line":108},[52,39902,2213],{"class":58},[52,39904,2216],{"class":371},[52,39906,105],{"class":58},[52,39908,39909,39911,39913],{"class":54,"line":118},[52,39910,2230],{"class":58},[52,39912,39775],{"class":371},[52,39914,77],{"class":58},[52,39916,39917,39919,39921],{"class":54,"line":594},[52,39918,121],{"class":58},[52,39920,63],{"class":371},[52,39922,77],{"class":58},[43,39924,39925],{"className":419,"code":39792,"language":420,"meta":48,"style":48},[31,39926,39927,39935,39943,39951,39959],{"__ignoreMap":48},[52,39928,39929,39931,39933],{"class":54,"line":55},[52,39930,59],{"class":58},[52,39932,63],{"class":371},[52,39934,77],{"class":58},[52,39936,39937,39939,39941],{"class":54,"line":80},[52,39938,83],{"class":58},[52,39940,39775],{"class":371},[52,39942,77],{"class":58},[52,39944,39945,39947,39949],{"class":54,"line":108},[52,39946,2213],{"class":58},[52,39948,2216],{"class":371},[52,39950,105],{"class":58},[52,39952,39953,39955,39957],{"class":54,"line":118},[52,39954,2230],{"class":58},[52,39956,39775],{"class":371},[52,39958,77],{"class":58},[52,39960,39961,39963,39965],{"class":54,"line":594},[52,39962,121],{"class":58},[52,39964,63],{"class":371},[52,39966,77],{"class":58},[43,39968,39970],{"className":222,"code":39969,"language":224,"meta":48,"style":48},"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",[31,39971,39972,39982,39986,40000,40004,40013,40021,40025,40029],{"__ignoreMap":48},[52,39973,39974,39976,39978,39980],{"class":54,"line":55},[52,39975,232],{"class":231},[52,39977,8385],{"class":58},[52,39979,238],{"class":231},[52,39981,8390],{"class":73},[52,39983,39984],{"class":54,"line":80},[52,39985,597],{"emptyLinePlaceholder":171},[52,39987,39988,39990,39992,39994,39996,39998],{"class":54,"line":108},[52,39989,1721],{"class":231},[52,39991,1724],{"class":371},[52,39993,1727],{"class":231},[52,39995,1730],{"class":231},[52,39997,1733],{"class":66},[52,39999,1736],{"class":58},[52,40001,40002],{"class":54,"line":118},[52,40003,1751],{"class":58},[52,40005,40006,40008,40011],{"class":54,"line":594},[52,40007,1756],{"class":58},[52,40009,40010],{"class":73},"'Invert'",[52,40012,3875],{"class":58},[52,40014,40015,40017,40019],{"class":54,"line":600},[52,40016,3880],{"class":58},[52,40018,2869],{"class":73},[52,40020,2129],{"class":58},[52,40022,40023],{"class":54,"line":606},[52,40024,3897],{"class":58},[52,40026,40027],{"class":54,"line":653},[52,40028,1773],{"class":58},[52,40030,40031],{"class":54,"line":662},[52,40032,1778],{"class":58},[156,40034,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":40036},[40037],{"id":26072,"depth":80,"text":26073},{},"/docs/components/invert",{"title":39775,"description":39783},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":40044,"title":40045,"body":40046,"category":28265,"componentType":20007,"description":40053,"extension":168,"meta":40314,"navigation":171,"path":40315,"requiresChild":171,"seo":40316,"stem":40317,"__hash__":40318},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":40047,"toc":40310},[40048,40051,40054,40056,40058,40061,40063,40308],[11,40049,40045],{"id":40050},"kaleidoscope",[15,40052,40053],{},"Create a kaleidoscope effect with radial mirrored segments",[26061,40055],{"component":40045},[23,40057,26065],{"id":20662},[26067,40059],{":props":40060},"[{\"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\"}]",[23,40062,26073],{"id":26072},[217,40064,40065,40110,40154,40198,40242],{":tabs":1543},[43,40066,40068],{"className":45,"code":40067,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,40069,40070,40078,40086,40094,40102],{"__ignoreMap":48},[52,40071,40072,40074,40076],{"class":54,"line":55},[52,40073,59],{"class":58},[52,40075,63],{"class":62},[52,40077,77],{"class":58},[52,40079,40080,40082,40084],{"class":54,"line":80},[52,40081,83],{"class":58},[52,40083,40045],{"class":62},[52,40085,77],{"class":58},[52,40087,40088,40090,40092],{"class":54,"line":108},[52,40089,2213],{"class":58},[52,40091,2216],{"class":62},[52,40093,105],{"class":58},[52,40095,40096,40098,40100],{"class":54,"line":118},[52,40097,2230],{"class":58},[52,40099,40045],{"class":62},[52,40101,77],{"class":58},[52,40103,40104,40106,40108],{"class":54,"line":594},[52,40105,121],{"class":58},[52,40107,63],{"class":62},[52,40109,77],{"class":58},[43,40111,40112],{"className":360,"code":40067,"language":362,"meta":48,"style":48},[31,40113,40114,40122,40130,40138,40146],{"__ignoreMap":48},[52,40115,40116,40118,40120],{"class":54,"line":55},[52,40117,59],{"class":58},[52,40119,63],{"class":371},[52,40121,77],{"class":58},[52,40123,40124,40126,40128],{"class":54,"line":80},[52,40125,83],{"class":58},[52,40127,40045],{"class":371},[52,40129,77],{"class":58},[52,40131,40132,40134,40136],{"class":54,"line":108},[52,40133,2213],{"class":58},[52,40135,2216],{"class":371},[52,40137,105],{"class":58},[52,40139,40140,40142,40144],{"class":54,"line":118},[52,40141,2230],{"class":58},[52,40143,40045],{"class":371},[52,40145,77],{"class":58},[52,40147,40148,40150,40152],{"class":54,"line":594},[52,40149,121],{"class":58},[52,40151,63],{"class":371},[52,40153,77],{"class":58},[43,40155,40156],{"className":2507,"code":40067,"language":2509,"meta":48,"style":48},[31,40157,40158,40166,40174,40182,40190],{"__ignoreMap":48},[52,40159,40160,40162,40164],{"class":54,"line":55},[52,40161,59],{"class":58},[52,40163,63],{"class":371},[52,40165,77],{"class":58},[52,40167,40168,40170,40172],{"class":54,"line":80},[52,40169,83],{"class":58},[52,40171,40045],{"class":371},[52,40173,77],{"class":58},[52,40175,40176,40178,40180],{"class":54,"line":108},[52,40177,2213],{"class":58},[52,40179,2216],{"class":371},[52,40181,105],{"class":58},[52,40183,40184,40186,40188],{"class":54,"line":118},[52,40185,2230],{"class":58},[52,40187,40045],{"class":371},[52,40189,77],{"class":58},[52,40191,40192,40194,40196],{"class":54,"line":594},[52,40193,121],{"class":58},[52,40195,63],{"class":371},[52,40197,77],{"class":58},[43,40199,40200],{"className":419,"code":40067,"language":420,"meta":48,"style":48},[31,40201,40202,40210,40218,40226,40234],{"__ignoreMap":48},[52,40203,40204,40206,40208],{"class":54,"line":55},[52,40205,59],{"class":58},[52,40207,63],{"class":371},[52,40209,77],{"class":58},[52,40211,40212,40214,40216],{"class":54,"line":80},[52,40213,83],{"class":58},[52,40215,40045],{"class":371},[52,40217,77],{"class":58},[52,40219,40220,40222,40224],{"class":54,"line":108},[52,40221,2213],{"class":58},[52,40223,2216],{"class":371},[52,40225,105],{"class":58},[52,40227,40228,40230,40232],{"class":54,"line":118},[52,40229,2230],{"class":58},[52,40231,40045],{"class":371},[52,40233,77],{"class":58},[52,40235,40236,40238,40240],{"class":54,"line":594},[52,40237,121],{"class":58},[52,40239,63],{"class":371},[52,40241,77],{"class":58},[43,40243,40245],{"className":222,"code":40244,"language":224,"meta":48,"style":48},"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",[31,40246,40247,40257,40261,40275,40279,40288,40296,40300,40304],{"__ignoreMap":48},[52,40248,40249,40251,40253,40255],{"class":54,"line":55},[52,40250,232],{"class":231},[52,40252,8385],{"class":58},[52,40254,238],{"class":231},[52,40256,8390],{"class":73},[52,40258,40259],{"class":54,"line":80},[52,40260,597],{"emptyLinePlaceholder":171},[52,40262,40263,40265,40267,40269,40271,40273],{"class":54,"line":108},[52,40264,1721],{"class":231},[52,40266,1724],{"class":371},[52,40268,1727],{"class":231},[52,40270,1730],{"class":231},[52,40272,1733],{"class":66},[52,40274,1736],{"class":58},[52,40276,40277],{"class":54,"line":118},[52,40278,1751],{"class":58},[52,40280,40281,40283,40286],{"class":54,"line":594},[52,40282,1756],{"class":58},[52,40284,40285],{"class":73},"'Kaleidoscope'",[52,40287,3875],{"class":58},[52,40289,40290,40292,40294],{"class":54,"line":600},[52,40291,3880],{"class":58},[52,40293,2869],{"class":73},[52,40295,2129],{"class":58},[52,40297,40298],{"class":54,"line":606},[52,40299,3897],{"class":58},[52,40301,40302],{"class":54,"line":653},[52,40303,1773],{"class":58},[52,40305,40306],{"class":54,"line":662},[52,40307,1778],{"class":58},[156,40309,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":40311},[40312,40313],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/kaleidoscope",{"title":40045,"description":40053},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":40320,"title":40321,"body":40322,"category":26663,"componentType":20001,"description":40329,"extension":168,"meta":40569,"navigation":171,"path":40570,"requiresChild":26923,"seo":40571,"stem":40572,"__hash__":40573},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":40323,"toc":40565},[40324,40327,40330,40332,40334,40337,40339,40563],[11,40325,40321],{"id":40326},"lensflare",[15,40328,40329],{},"Realistic camera lens flare with artifacts.",[26061,40331],{"component":40321},[23,40333,26065],{"id":20662},[26067,40335],{":props":40336},"[{\"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\"}]",[23,40338,26073],{"id":26072},[217,40340,40341,40380,40423,40463,40505],{":tabs":1543},[43,40342,40344],{"className":45,"code":40343,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,40345,40346,40354,40360,40368,40372],{"__ignoreMap":48},[52,40347,40348,40350,40352],{"class":54,"line":55},[52,40349,59],{"class":58},[52,40351,63],{"class":62},[52,40353,77],{"class":58},[52,40355,40356,40358],{"class":54,"line":80},[52,40357,83],{"class":58},[52,40359,17012],{"class":62},[52,40361,40362,40364,40366],{"class":54,"line":108},[52,40363,17026],{"class":66},[52,40365,70],{"class":58},[52,40367,31622],{"class":73},[52,40369,40370],{"class":54,"line":118},[52,40371,1224],{"class":58},[52,40373,40374,40376,40378],{"class":54,"line":594},[52,40375,121],{"class":58},[52,40377,63],{"class":62},[52,40379,77],{"class":58},[43,40381,40383],{"className":360,"code":40382,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,40384,40385,40393,40399,40411,40415],{"__ignoreMap":48},[52,40386,40387,40389,40391],{"class":54,"line":55},[52,40388,59],{"class":58},[52,40390,63],{"class":371},[52,40392,77],{"class":58},[52,40394,40395,40397],{"class":54,"line":80},[52,40396,83],{"class":58},[52,40398,17012],{"class":371},[52,40400,40401,40403,40405,40407,40409],{"class":54,"line":108},[52,40402,17137],{"class":66},[52,40404,70],{"class":231},[52,40406,723],{"class":58},[52,40408,4620],{"class":371},[52,40410,729],{"class":58},[52,40412,40413],{"class":54,"line":118},[52,40414,1224],{"class":58},[52,40416,40417,40419,40421],{"class":54,"line":594},[52,40418,121],{"class":58},[52,40420,63],{"class":371},[52,40422,77],{"class":58},[43,40424,40425],{"className":2507,"code":40382,"language":2509,"meta":48,"style":48},[31,40426,40427,40435,40441,40451,40455],{"__ignoreMap":48},[52,40428,40429,40431,40433],{"class":54,"line":55},[52,40430,59],{"class":58},[52,40432,63],{"class":371},[52,40434,77],{"class":58},[52,40436,40437,40439],{"class":54,"line":80},[52,40438,83],{"class":58},[52,40440,17012],{"class":371},[52,40442,40443,40445,40447,40449],{"class":54,"line":108},[52,40444,17137],{"class":66},[52,40446,24004],{"class":58},[52,40448,4620],{"class":371},[52,40450,729],{"class":58},[52,40452,40453],{"class":54,"line":118},[52,40454,1224],{"class":58},[52,40456,40457,40459,40461],{"class":54,"line":594},[52,40458,121],{"class":58},[52,40460,63],{"class":371},[52,40462,77],{"class":58},[43,40464,40465],{"className":419,"code":40382,"language":420,"meta":48,"style":48},[31,40466,40467,40475,40481,40493,40497],{"__ignoreMap":48},[52,40468,40469,40471,40473],{"class":54,"line":55},[52,40470,59],{"class":58},[52,40472,63],{"class":371},[52,40474,77],{"class":58},[52,40476,40477,40479],{"class":54,"line":80},[52,40478,83],{"class":58},[52,40480,17012],{"class":371},[52,40482,40483,40485,40487,40489,40491],{"class":54,"line":108},[52,40484,17137],{"class":66},[52,40486,70],{"class":231},[52,40488,723],{"class":58},[52,40490,4620],{"class":371},[52,40492,729],{"class":58},[52,40494,40495],{"class":54,"line":118},[52,40496,1224],{"class":58},[52,40498,40499,40501,40503],{"class":54,"line":594},[52,40500,121],{"class":58},[52,40502,63],{"class":371},[52,40504,77],{"class":58},[43,40506,40508],{"className":222,"code":40507,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LensFlare', props: { intensity: 0.5 } }\n ]\n})\n",[31,40509,40510,40520,40524,40538,40542,40555,40559],{"__ignoreMap":48},[52,40511,40512,40514,40516,40518],{"class":54,"line":55},[52,40513,232],{"class":231},[52,40515,8385],{"class":58},[52,40517,238],{"class":231},[52,40519,8390],{"class":73},[52,40521,40522],{"class":54,"line":80},[52,40523,597],{"emptyLinePlaceholder":171},[52,40525,40526,40528,40530,40532,40534,40536],{"class":54,"line":108},[52,40527,1721],{"class":231},[52,40529,1724],{"class":371},[52,40531,1727],{"class":231},[52,40533,1730],{"class":231},[52,40535,1733],{"class":66},[52,40537,1736],{"class":58},[52,40539,40540],{"class":54,"line":118},[52,40541,1751],{"class":58},[52,40543,40544,40546,40549,40551,40553],{"class":54,"line":594},[52,40545,1756],{"class":58},[52,40547,40548],{"class":73},"'LensFlare'",[52,40550,26354],{"class":58},[52,40552,4620],{"class":371},[52,40554,1768],{"class":58},[52,40556,40557],{"class":54,"line":600},[52,40558,1773],{"class":58},[52,40560,40561],{"class":54,"line":606},[52,40562,1778],{"class":58},[156,40564,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":40566},[40567,40568],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/lensflare",{"title":40321,"description":40329},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":40575,"title":40576,"body":40577,"category":26385,"componentType":20007,"description":40584,"extension":168,"meta":40901,"navigation":171,"path":40902,"requiresChild":171,"seo":40903,"stem":40904,"__hash__":40905},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":40578,"toc":40897},[40579,40582,40585,40587,40589,40592,40594,40895],[11,40580,40576],{"id":40581},"linearblur",[15,40583,40584],{},"Directional motion blur in a specific angle",[26061,40586],{"component":40576},[23,40588,26065],{"id":20662},[26067,40590],{":props":40591},"[{\"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)\"}]",[23,40593,26073],{"id":26072},[217,40595,40596,40652,40711,40767,40825],{":tabs":1543},[43,40597,40599],{"className":45,"code":40598,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,40600,40601,40609,40616,40624,40628,40636,40644],{"__ignoreMap":48},[52,40602,40603,40605,40607],{"class":54,"line":55},[52,40604,59],{"class":58},[52,40606,63],{"class":62},[52,40608,77],{"class":58},[52,40610,40611,40613],{"class":54,"line":80},[52,40612,83],{"class":58},[52,40614,40615],{"class":62},"LinearBlur\n",[52,40617,40618,40620,40622],{"class":54,"line":108},[52,40619,17026],{"class":66},[52,40621,70],{"class":58},[52,40623,32448],{"class":73},[52,40625,40626],{"class":54,"line":118},[52,40627,26109],{"class":58},[52,40629,40630,40632,40634],{"class":54,"line":594},[52,40631,2213],{"class":58},[52,40633,2216],{"class":62},[52,40635,105],{"class":58},[52,40637,40638,40640,40642],{"class":54,"line":600},[52,40639,2230],{"class":58},[52,40641,40576],{"class":62},[52,40643,77],{"class":58},[52,40645,40646,40648,40650],{"class":54,"line":606},[52,40647,121],{"class":58},[52,40649,63],{"class":62},[52,40651,77],{"class":58},[43,40653,40655],{"className":360,"code":40654,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,40656,40657,40665,40671,40683,40687,40695,40703],{"__ignoreMap":48},[52,40658,40659,40661,40663],{"class":54,"line":55},[52,40660,59],{"class":58},[52,40662,63],{"class":371},[52,40664,77],{"class":58},[52,40666,40667,40669],{"class":54,"line":80},[52,40668,83],{"class":58},[52,40670,40615],{"class":371},[52,40672,40673,40675,40677,40679,40681],{"class":54,"line":108},[52,40674,17137],{"class":66},[52,40676,70],{"class":231},[52,40678,723],{"class":58},[52,40680,12348],{"class":371},[52,40682,729],{"class":58},[52,40684,40685],{"class":54,"line":118},[52,40686,26109],{"class":58},[52,40688,40689,40691,40693],{"class":54,"line":594},[52,40690,2213],{"class":58},[52,40692,2216],{"class":371},[52,40694,105],{"class":58},[52,40696,40697,40699,40701],{"class":54,"line":600},[52,40698,2230],{"class":58},[52,40700,40576],{"class":371},[52,40702,77],{"class":58},[52,40704,40705,40707,40709],{"class":54,"line":606},[52,40706,121],{"class":58},[52,40708,63],{"class":371},[52,40710,77],{"class":58},[43,40712,40713],{"className":2507,"code":40654,"language":2509,"meta":48,"style":48},[31,40714,40715,40723,40729,40739,40743,40751,40759],{"__ignoreMap":48},[52,40716,40717,40719,40721],{"class":54,"line":55},[52,40718,59],{"class":58},[52,40720,63],{"class":371},[52,40722,77],{"class":58},[52,40724,40725,40727],{"class":54,"line":80},[52,40726,83],{"class":58},[52,40728,40615],{"class":371},[52,40730,40731,40733,40735,40737],{"class":54,"line":108},[52,40732,17137],{"class":66},[52,40734,24004],{"class":58},[52,40736,12348],{"class":371},[52,40738,729],{"class":58},[52,40740,40741],{"class":54,"line":118},[52,40742,26109],{"class":58},[52,40744,40745,40747,40749],{"class":54,"line":594},[52,40746,2213],{"class":58},[52,40748,2216],{"class":371},[52,40750,105],{"class":58},[52,40752,40753,40755,40757],{"class":54,"line":600},[52,40754,2230],{"class":58},[52,40756,40576],{"class":371},[52,40758,77],{"class":58},[52,40760,40761,40763,40765],{"class":54,"line":606},[52,40762,121],{"class":58},[52,40764,63],{"class":371},[52,40766,77],{"class":58},[43,40768,40769],{"className":419,"code":40654,"language":420,"meta":48,"style":48},[31,40770,40771,40779,40785,40797,40801,40809,40817],{"__ignoreMap":48},[52,40772,40773,40775,40777],{"class":54,"line":55},[52,40774,59],{"class":58},[52,40776,63],{"class":371},[52,40778,77],{"class":58},[52,40780,40781,40783],{"class":54,"line":80},[52,40782,83],{"class":58},[52,40784,40615],{"class":371},[52,40786,40787,40789,40791,40793,40795],{"class":54,"line":108},[52,40788,17137],{"class":66},[52,40790,70],{"class":231},[52,40792,723],{"class":58},[52,40794,12348],{"class":371},[52,40796,729],{"class":58},[52,40798,40799],{"class":54,"line":118},[52,40800,26109],{"class":58},[52,40802,40803,40805,40807],{"class":54,"line":594},[52,40804,2213],{"class":58},[52,40806,2216],{"class":371},[52,40808,105],{"class":58},[52,40810,40811,40813,40815],{"class":54,"line":600},[52,40812,2230],{"class":58},[52,40814,40576],{"class":371},[52,40816,77],{"class":58},[52,40818,40819,40821,40823],{"class":54,"line":606},[52,40820,121],{"class":58},[52,40822,63],{"class":371},[52,40824,77],{"class":58},[43,40826,40828],{"className":222,"code":40827,"language":224,"meta":48,"style":48},"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",[31,40829,40830,40840,40844,40858,40862,40875,40883,40887,40891],{"__ignoreMap":48},[52,40831,40832,40834,40836,40838],{"class":54,"line":55},[52,40833,232],{"class":231},[52,40835,8385],{"class":58},[52,40837,238],{"class":231},[52,40839,8390],{"class":73},[52,40841,40842],{"class":54,"line":80},[52,40843,597],{"emptyLinePlaceholder":171},[52,40845,40846,40848,40850,40852,40854,40856],{"class":54,"line":108},[52,40847,1721],{"class":231},[52,40849,1724],{"class":371},[52,40851,1727],{"class":231},[52,40853,1730],{"class":231},[52,40855,1733],{"class":66},[52,40857,1736],{"class":58},[52,40859,40860],{"class":54,"line":118},[52,40861,1751],{"class":58},[52,40863,40864,40866,40869,40871,40873],{"class":54,"line":594},[52,40865,1756],{"class":58},[52,40867,40868],{"class":73},"'LinearBlur'",[52,40870,26354],{"class":58},[52,40872,12348],{"class":371},[52,40874,4412],{"class":58},[52,40876,40877,40879,40881],{"class":54,"line":600},[52,40878,3880],{"class":58},[52,40880,2869],{"class":73},[52,40882,2129],{"class":58},[52,40884,40885],{"class":54,"line":606},[52,40886,3897],{"class":58},[52,40888,40889],{"class":54,"line":653},[52,40890,1773],{"class":58},[52,40892,40893],{"class":54,"line":662},[52,40894,1778],{"class":58},[156,40896,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":40898},[40899,40900],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/linearblur",{"title":40576,"description":40584},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":40907,"title":86,"body":40908,"category":26920,"componentType":20001,"description":40915,"extension":168,"meta":41099,"navigation":171,"path":41100,"requiresChild":26923,"seo":41101,"stem":41102,"__hash__":41103},"components/docs/components/LinearGradient.md",{"type":8,"value":40909,"toc":41095},[40910,40913,40916,40918,40920,40923,40925,41093],[11,40911,86],{"id":40912},"lineargradient",[15,40914,40915],{},"Create smooth linear color gradients",[26061,40917],{"component":86},[23,40919,26065],{"id":20662},[26067,40921],{":props":40922},"[{\"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\"}]",[23,40924,26073],{"id":26072},[217,40926,40927,40956,40984,41012,41040],{":tabs":1543},[43,40928,40930],{"className":45,"code":40929,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,40931,40932,40940,40948],{"__ignoreMap":48},[52,40933,40934,40936,40938],{"class":54,"line":55},[52,40935,59],{"class":58},[52,40937,63],{"class":62},[52,40939,77],{"class":58},[52,40941,40942,40944,40946],{"class":54,"line":80},[52,40943,83],{"class":58},[52,40945,86],{"class":62},[52,40947,105],{"class":58},[52,40949,40950,40952,40954],{"class":54,"line":108},[52,40951,121],{"class":58},[52,40953,63],{"class":62},[52,40955,77],{"class":58},[43,40957,40958],{"className":360,"code":40929,"language":362,"meta":48,"style":48},[31,40959,40960,40968,40976],{"__ignoreMap":48},[52,40961,40962,40964,40966],{"class":54,"line":55},[52,40963,59],{"class":58},[52,40965,63],{"class":371},[52,40967,77],{"class":58},[52,40969,40970,40972,40974],{"class":54,"line":80},[52,40971,83],{"class":58},[52,40973,86],{"class":371},[52,40975,105],{"class":58},[52,40977,40978,40980,40982],{"class":54,"line":108},[52,40979,121],{"class":58},[52,40981,63],{"class":371},[52,40983,77],{"class":58},[43,40985,40986],{"className":2507,"code":40929,"language":2509,"meta":48,"style":48},[31,40987,40988,40996,41004],{"__ignoreMap":48},[52,40989,40990,40992,40994],{"class":54,"line":55},[52,40991,59],{"class":58},[52,40993,63],{"class":371},[52,40995,77],{"class":58},[52,40997,40998,41000,41002],{"class":54,"line":80},[52,40999,83],{"class":58},[52,41001,86],{"class":371},[52,41003,105],{"class":58},[52,41005,41006,41008,41010],{"class":54,"line":108},[52,41007,121],{"class":58},[52,41009,63],{"class":371},[52,41011,77],{"class":58},[43,41013,41014],{"className":419,"code":40929,"language":420,"meta":48,"style":48},[31,41015,41016,41024,41032],{"__ignoreMap":48},[52,41017,41018,41020,41022],{"class":54,"line":55},[52,41019,59],{"class":58},[52,41021,63],{"class":371},[52,41023,77],{"class":58},[52,41025,41026,41028,41030],{"class":54,"line":80},[52,41027,83],{"class":58},[52,41029,86],{"class":371},[52,41031,105],{"class":58},[52,41033,41034,41036,41038],{"class":54,"line":108},[52,41035,121],{"class":58},[52,41037,63],{"class":371},[52,41039,77],{"class":58},[43,41041,41043],{"className":222,"code":41042,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'LinearGradient', props: {} }\n ]\n})\n",[31,41044,41045,41055,41059,41073,41077,41085,41089],{"__ignoreMap":48},[52,41046,41047,41049,41051,41053],{"class":54,"line":55},[52,41048,232],{"class":231},[52,41050,8385],{"class":58},[52,41052,238],{"class":231},[52,41054,8390],{"class":73},[52,41056,41057],{"class":54,"line":80},[52,41058,597],{"emptyLinePlaceholder":171},[52,41060,41061,41063,41065,41067,41069,41071],{"class":54,"line":108},[52,41062,1721],{"class":231},[52,41064,1724],{"class":371},[52,41066,1727],{"class":231},[52,41068,1730],{"class":231},[52,41070,1733],{"class":66},[52,41072,1736],{"class":58},[52,41074,41075],{"class":54,"line":118},[52,41076,1751],{"class":58},[52,41078,41079,41081,41083],{"class":54,"line":594},[52,41080,1756],{"class":58},[52,41082,2126],{"class":73},[52,41084,2129],{"class":58},[52,41086,41087],{"class":54,"line":600},[52,41088,1773],{"class":58},[52,41090,41091],{"class":54,"line":606},[52,41092,1778],{"class":58},[156,41094,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":41096},[41097,41098],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/lineargradient",{"title":86,"description":40915},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":41105,"title":41106,"body":41107,"category":29321,"componentType":20007,"description":41114,"extension":168,"meta":41477,"navigation":171,"path":41478,"requiresChild":171,"seo":41479,"stem":41480,"__hash__":41481},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":41108,"toc":41473},[41109,41112,41115,41117,41119,41122,41124,41471],[11,41110,41106],{"id":41111},"liquify",[15,41113,41114],{},"Liquid-like interactive deformation effect",[26061,41116],{"component":41106},[23,41118,26065],{"id":20662},[26067,41120],{":props":41121},"[{\"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\"}]",[23,41123,26073],{"id":26072},[217,41125,41126,41190,41261,41327,41397],{":tabs":1543},[43,41127,41129],{"className":45,"code":41128,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLiquify\n :intensity=\"10\"\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Liquify>\n\u003C/Shader>\n",[31,41130,41131,41139,41146,41154,41162,41166,41174,41182],{"__ignoreMap":48},[52,41132,41133,41135,41137],{"class":54,"line":55},[52,41134,59],{"class":58},[52,41136,63],{"class":62},[52,41138,77],{"class":58},[52,41140,41141,41143],{"class":54,"line":80},[52,41142,83],{"class":58},[52,41144,41145],{"class":62},"Liquify\n",[52,41147,41148,41150,41152],{"class":54,"line":108},[52,41149,17026],{"class":66},[52,41151,70],{"class":58},[52,41153,31613],{"class":73},[52,41155,41156,41158,41160],{"class":54,"line":118},[52,41157,14057],{"class":66},[52,41159,70],{"class":58},[52,41161,27987],{"class":73},[52,41163,41164],{"class":54,"line":594},[52,41165,26109],{"class":58},[52,41167,41168,41170,41172],{"class":54,"line":600},[52,41169,2213],{"class":58},[52,41171,2216],{"class":62},[52,41173,105],{"class":58},[52,41175,41176,41178,41180],{"class":54,"line":606},[52,41177,2230],{"class":58},[52,41179,41106],{"class":62},[52,41181,77],{"class":58},[52,41183,41184,41186,41188],{"class":54,"line":653},[52,41185,121],{"class":58},[52,41187,63],{"class":62},[52,41189,77],{"class":58},[43,41191,41193],{"className":360,"code":41192,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLiquify\n intensity={10}\n radius={1}\n >\n \u003CCircle />\n \u003C/Liquify>\n\u003C/Shader>\n",[31,41194,41195,41203,41209,41221,41233,41237,41245,41253],{"__ignoreMap":48},[52,41196,41197,41199,41201],{"class":54,"line":55},[52,41198,59],{"class":58},[52,41200,63],{"class":371},[52,41202,77],{"class":58},[52,41204,41205,41207],{"class":54,"line":80},[52,41206,83],{"class":58},[52,41208,41145],{"class":371},[52,41210,41211,41213,41215,41217,41219],{"class":54,"line":108},[52,41212,17137],{"class":66},[52,41214,70],{"class":231},[52,41216,723],{"class":58},[52,41218,31680],{"class":371},[52,41220,729],{"class":58},[52,41222,41223,41225,41227,41229,41231],{"class":54,"line":118},[52,41224,6514],{"class":66},[52,41226,70],{"class":231},[52,41228,723],{"class":58},[52,41230,5544],{"class":371},[52,41232,729],{"class":58},[52,41234,41235],{"class":54,"line":594},[52,41236,26109],{"class":58},[52,41238,41239,41241,41243],{"class":54,"line":600},[52,41240,2213],{"class":58},[52,41242,2216],{"class":371},[52,41244,105],{"class":58},[52,41246,41247,41249,41251],{"class":54,"line":606},[52,41248,2230],{"class":58},[52,41250,41106],{"class":371},[52,41252,77],{"class":58},[52,41254,41255,41257,41259],{"class":54,"line":653},[52,41256,121],{"class":58},[52,41258,63],{"class":371},[52,41260,77],{"class":58},[43,41262,41263],{"className":2507,"code":41192,"language":2509,"meta":48,"style":48},[31,41264,41265,41273,41279,41289,41299,41303,41311,41319],{"__ignoreMap":48},[52,41266,41267,41269,41271],{"class":54,"line":55},[52,41268,59],{"class":58},[52,41270,63],{"class":371},[52,41272,77],{"class":58},[52,41274,41275,41277],{"class":54,"line":80},[52,41276,83],{"class":58},[52,41278,41145],{"class":371},[52,41280,41281,41283,41285,41287],{"class":54,"line":108},[52,41282,17137],{"class":66},[52,41284,24004],{"class":58},[52,41286,31680],{"class":371},[52,41288,729],{"class":58},[52,41290,41291,41293,41295,41297],{"class":54,"line":118},[52,41292,6514],{"class":66},[52,41294,24004],{"class":58},[52,41296,5544],{"class":371},[52,41298,729],{"class":58},[52,41300,41301],{"class":54,"line":594},[52,41302,26109],{"class":58},[52,41304,41305,41307,41309],{"class":54,"line":600},[52,41306,2213],{"class":58},[52,41308,2216],{"class":371},[52,41310,105],{"class":58},[52,41312,41313,41315,41317],{"class":54,"line":606},[52,41314,2230],{"class":58},[52,41316,41106],{"class":371},[52,41318,77],{"class":58},[52,41320,41321,41323,41325],{"class":54,"line":653},[52,41322,121],{"class":58},[52,41324,63],{"class":371},[52,41326,77],{"class":58},[43,41328,41329],{"className":419,"code":41192,"language":420,"meta":48,"style":48},[31,41330,41331,41339,41345,41357,41369,41373,41381,41389],{"__ignoreMap":48},[52,41332,41333,41335,41337],{"class":54,"line":55},[52,41334,59],{"class":58},[52,41336,63],{"class":371},[52,41338,77],{"class":58},[52,41340,41341,41343],{"class":54,"line":80},[52,41342,83],{"class":58},[52,41344,41145],{"class":371},[52,41346,41347,41349,41351,41353,41355],{"class":54,"line":108},[52,41348,17137],{"class":66},[52,41350,70],{"class":231},[52,41352,723],{"class":58},[52,41354,31680],{"class":371},[52,41356,729],{"class":58},[52,41358,41359,41361,41363,41365,41367],{"class":54,"line":118},[52,41360,6514],{"class":66},[52,41362,70],{"class":231},[52,41364,723],{"class":58},[52,41366,5544],{"class":371},[52,41368,729],{"class":58},[52,41370,41371],{"class":54,"line":594},[52,41372,26109],{"class":58},[52,41374,41375,41377,41379],{"class":54,"line":600},[52,41376,2213],{"class":58},[52,41378,2216],{"class":371},[52,41380,105],{"class":58},[52,41382,41383,41385,41387],{"class":54,"line":606},[52,41384,2230],{"class":58},[52,41386,41106],{"class":371},[52,41388,77],{"class":58},[52,41390,41391,41393,41395],{"class":54,"line":653},[52,41392,121],{"class":58},[52,41394,63],{"class":371},[52,41396,77],{"class":58},[43,41398,41400],{"className":222,"code":41399,"language":224,"meta":48,"style":48},"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",[31,41401,41402,41412,41416,41430,41434,41451,41459,41463,41467],{"__ignoreMap":48},[52,41403,41404,41406,41408,41410],{"class":54,"line":55},[52,41405,232],{"class":231},[52,41407,8385],{"class":58},[52,41409,238],{"class":231},[52,41411,8390],{"class":73},[52,41413,41414],{"class":54,"line":80},[52,41415,597],{"emptyLinePlaceholder":171},[52,41417,41418,41420,41422,41424,41426,41428],{"class":54,"line":108},[52,41419,1721],{"class":231},[52,41421,1724],{"class":371},[52,41423,1727],{"class":231},[52,41425,1730],{"class":231},[52,41427,1733],{"class":66},[52,41429,1736],{"class":58},[52,41431,41432],{"class":54,"line":118},[52,41433,1751],{"class":58},[52,41435,41436,41438,41441,41443,41445,41447,41449],{"class":54,"line":594},[52,41437,1756],{"class":58},[52,41439,41440],{"class":73},"'Liquify'",[52,41442,26354],{"class":58},[52,41444,31680],{"class":371},[52,41446,3431],{"class":58},[52,41448,5544],{"class":371},[52,41450,4412],{"class":58},[52,41452,41453,41455,41457],{"class":54,"line":600},[52,41454,3880],{"class":58},[52,41456,2869],{"class":73},[52,41458,2129],{"class":58},[52,41460,41461],{"class":54,"line":606},[52,41462,3897],{"class":58},[52,41464,41465],{"class":54,"line":653},[52,41466,1773],{"class":58},[52,41468,41469],{"class":54,"line":662},[52,41470,1778],{"class":58},[156,41472,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41474},[41475,41476],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/liquify",{"title":41106,"description":41114},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":41483,"title":41484,"body":41485,"category":28265,"componentType":20007,"description":41491,"extension":168,"meta":41752,"navigation":171,"path":41753,"requiresChild":171,"seo":41754,"stem":41755,"__hash__":41756},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":41486,"toc":41748},[41487,41489,41492,41494,41496,41499,41501,41746],[11,41488,41484],{"id":12812},[15,41490,41491],{},"Mirror content across a line defined by center point and angle",[26061,41493],{"component":41484},[23,41495,26065],{"id":20662},[26067,41497],{":props":41498},"[{\"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\"}]",[23,41500,26073],{"id":26072},[217,41502,41503,41548,41592,41636,41680],{":tabs":1543},[43,41504,41506],{"className":45,"code":41505,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,41507,41508,41516,41524,41532,41540],{"__ignoreMap":48},[52,41509,41510,41512,41514],{"class":54,"line":55},[52,41511,59],{"class":58},[52,41513,63],{"class":62},[52,41515,77],{"class":58},[52,41517,41518,41520,41522],{"class":54,"line":80},[52,41519,83],{"class":58},[52,41521,41484],{"class":62},[52,41523,77],{"class":58},[52,41525,41526,41528,41530],{"class":54,"line":108},[52,41527,2213],{"class":58},[52,41529,2216],{"class":62},[52,41531,105],{"class":58},[52,41533,41534,41536,41538],{"class":54,"line":118},[52,41535,2230],{"class":58},[52,41537,41484],{"class":62},[52,41539,77],{"class":58},[52,41541,41542,41544,41546],{"class":54,"line":594},[52,41543,121],{"class":58},[52,41545,63],{"class":62},[52,41547,77],{"class":58},[43,41549,41550],{"className":360,"code":41505,"language":362,"meta":48,"style":48},[31,41551,41552,41560,41568,41576,41584],{"__ignoreMap":48},[52,41553,41554,41556,41558],{"class":54,"line":55},[52,41555,59],{"class":58},[52,41557,63],{"class":371},[52,41559,77],{"class":58},[52,41561,41562,41564,41566],{"class":54,"line":80},[52,41563,83],{"class":58},[52,41565,41484],{"class":371},[52,41567,77],{"class":58},[52,41569,41570,41572,41574],{"class":54,"line":108},[52,41571,2213],{"class":58},[52,41573,2216],{"class":371},[52,41575,105],{"class":58},[52,41577,41578,41580,41582],{"class":54,"line":118},[52,41579,2230],{"class":58},[52,41581,41484],{"class":371},[52,41583,77],{"class":58},[52,41585,41586,41588,41590],{"class":54,"line":594},[52,41587,121],{"class":58},[52,41589,63],{"class":371},[52,41591,77],{"class":58},[43,41593,41594],{"className":2507,"code":41505,"language":2509,"meta":48,"style":48},[31,41595,41596,41604,41612,41620,41628],{"__ignoreMap":48},[52,41597,41598,41600,41602],{"class":54,"line":55},[52,41599,59],{"class":58},[52,41601,63],{"class":371},[52,41603,77],{"class":58},[52,41605,41606,41608,41610],{"class":54,"line":80},[52,41607,83],{"class":58},[52,41609,41484],{"class":371},[52,41611,77],{"class":58},[52,41613,41614,41616,41618],{"class":54,"line":108},[52,41615,2213],{"class":58},[52,41617,2216],{"class":371},[52,41619,105],{"class":58},[52,41621,41622,41624,41626],{"class":54,"line":118},[52,41623,2230],{"class":58},[52,41625,41484],{"class":371},[52,41627,77],{"class":58},[52,41629,41630,41632,41634],{"class":54,"line":594},[52,41631,121],{"class":58},[52,41633,63],{"class":371},[52,41635,77],{"class":58},[43,41637,41638],{"className":419,"code":41505,"language":420,"meta":48,"style":48},[31,41639,41640,41648,41656,41664,41672],{"__ignoreMap":48},[52,41641,41642,41644,41646],{"class":54,"line":55},[52,41643,59],{"class":58},[52,41645,63],{"class":371},[52,41647,77],{"class":58},[52,41649,41650,41652,41654],{"class":54,"line":80},[52,41651,83],{"class":58},[52,41653,41484],{"class":371},[52,41655,77],{"class":58},[52,41657,41658,41660,41662],{"class":54,"line":108},[52,41659,2213],{"class":58},[52,41661,2216],{"class":371},[52,41663,105],{"class":58},[52,41665,41666,41668,41670],{"class":54,"line":118},[52,41667,2230],{"class":58},[52,41669,41484],{"class":371},[52,41671,77],{"class":58},[52,41673,41674,41676,41678],{"class":54,"line":594},[52,41675,121],{"class":58},[52,41677,63],{"class":371},[52,41679,77],{"class":58},[43,41681,41683],{"className":222,"code":41682,"language":224,"meta":48,"style":48},"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",[31,41684,41685,41695,41699,41713,41717,41726,41734,41738,41742],{"__ignoreMap":48},[52,41686,41687,41689,41691,41693],{"class":54,"line":55},[52,41688,232],{"class":231},[52,41690,8385],{"class":58},[52,41692,238],{"class":231},[52,41694,8390],{"class":73},[52,41696,41697],{"class":54,"line":80},[52,41698,597],{"emptyLinePlaceholder":171},[52,41700,41701,41703,41705,41707,41709,41711],{"class":54,"line":108},[52,41702,1721],{"class":231},[52,41704,1724],{"class":371},[52,41706,1727],{"class":231},[52,41708,1730],{"class":231},[52,41710,1733],{"class":66},[52,41712,1736],{"class":58},[52,41714,41715],{"class":54,"line":118},[52,41716,1751],{"class":58},[52,41718,41719,41721,41724],{"class":54,"line":594},[52,41720,1756],{"class":58},[52,41722,41723],{"class":73},"'Mirror'",[52,41725,3875],{"class":58},[52,41727,41728,41730,41732],{"class":54,"line":600},[52,41729,3880],{"class":58},[52,41731,2869],{"class":73},[52,41733,2129],{"class":58},[52,41735,41736],{"class":54,"line":606},[52,41737,3897],{"class":58},[52,41739,41740],{"class":54,"line":653},[52,41741,1773],{"class":58},[52,41743,41744],{"class":54,"line":662},[52,41745,1778],{"class":58},[156,41747,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":41749},[41750,41751],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/mirror",{"title":41484,"description":41491},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":41758,"title":41759,"body":41760,"category":26920,"componentType":20001,"description":41767,"extension":168,"meta":41952,"navigation":171,"path":41953,"requiresChild":26923,"seo":41954,"stem":41955,"__hash__":41956},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":41761,"toc":41948},[41762,41765,41768,41770,41772,41775,41777,41946],[11,41763,41759],{"id":41764},"multipointgradient",[15,41766,41767],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26061,41769],{"component":41759},[23,41771,26065],{"id":20662},[26067,41773],{":props":41774},"[{\"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.\"}]",[23,41776,26073],{"id":26072},[217,41778,41779,41808,41836,41864,41892],{":tabs":1543},[43,41780,41782],{"className":45,"code":41781,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,41783,41784,41792,41800],{"__ignoreMap":48},[52,41785,41786,41788,41790],{"class":54,"line":55},[52,41787,59],{"class":58},[52,41789,63],{"class":62},[52,41791,77],{"class":58},[52,41793,41794,41796,41798],{"class":54,"line":80},[52,41795,83],{"class":58},[52,41797,41759],{"class":62},[52,41799,105],{"class":58},[52,41801,41802,41804,41806],{"class":54,"line":108},[52,41803,121],{"class":58},[52,41805,63],{"class":62},[52,41807,77],{"class":58},[43,41809,41810],{"className":360,"code":41781,"language":362,"meta":48,"style":48},[31,41811,41812,41820,41828],{"__ignoreMap":48},[52,41813,41814,41816,41818],{"class":54,"line":55},[52,41815,59],{"class":58},[52,41817,63],{"class":371},[52,41819,77],{"class":58},[52,41821,41822,41824,41826],{"class":54,"line":80},[52,41823,83],{"class":58},[52,41825,41759],{"class":371},[52,41827,105],{"class":58},[52,41829,41830,41832,41834],{"class":54,"line":108},[52,41831,121],{"class":58},[52,41833,63],{"class":371},[52,41835,77],{"class":58},[43,41837,41838],{"className":2507,"code":41781,"language":2509,"meta":48,"style":48},[31,41839,41840,41848,41856],{"__ignoreMap":48},[52,41841,41842,41844,41846],{"class":54,"line":55},[52,41843,59],{"class":58},[52,41845,63],{"class":371},[52,41847,77],{"class":58},[52,41849,41850,41852,41854],{"class":54,"line":80},[52,41851,83],{"class":58},[52,41853,41759],{"class":371},[52,41855,105],{"class":58},[52,41857,41858,41860,41862],{"class":54,"line":108},[52,41859,121],{"class":58},[52,41861,63],{"class":371},[52,41863,77],{"class":58},[43,41865,41866],{"className":419,"code":41781,"language":420,"meta":48,"style":48},[31,41867,41868,41876,41884],{"__ignoreMap":48},[52,41869,41870,41872,41874],{"class":54,"line":55},[52,41871,59],{"class":58},[52,41873,63],{"class":371},[52,41875,77],{"class":58},[52,41877,41878,41880,41882],{"class":54,"line":80},[52,41879,83],{"class":58},[52,41881,41759],{"class":371},[52,41883,105],{"class":58},[52,41885,41886,41888,41890],{"class":54,"line":108},[52,41887,121],{"class":58},[52,41889,63],{"class":371},[52,41891,77],{"class":58},[43,41893,41895],{"className":222,"code":41894,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'MultiPointGradient', props: {} }\n ]\n})\n",[31,41896,41897,41907,41911,41925,41929,41938,41942],{"__ignoreMap":48},[52,41898,41899,41901,41903,41905],{"class":54,"line":55},[52,41900,232],{"class":231},[52,41902,8385],{"class":58},[52,41904,238],{"class":231},[52,41906,8390],{"class":73},[52,41908,41909],{"class":54,"line":80},[52,41910,597],{"emptyLinePlaceholder":171},[52,41912,41913,41915,41917,41919,41921,41923],{"class":54,"line":108},[52,41914,1721],{"class":231},[52,41916,1724],{"class":371},[52,41918,1727],{"class":231},[52,41920,1730],{"class":231},[52,41922,1733],{"class":66},[52,41924,1736],{"class":58},[52,41926,41927],{"class":54,"line":118},[52,41928,1751],{"class":58},[52,41930,41931,41933,41936],{"class":54,"line":594},[52,41932,1756],{"class":58},[52,41934,41935],{"class":73},"'MultiPointGradient'",[52,41937,2129],{"class":58},[52,41939,41940],{"class":54,"line":600},[52,41941,1773],{"class":58},[52,41943,41944],{"class":54,"line":606},[52,41945,1778],{"class":58},[156,41947,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":41949},[41950,41951],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/multipointgradient",{"title":41759,"description":41767},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":41958,"title":17633,"body":41959,"category":31558,"componentType":20001,"description":41966,"extension":168,"meta":42245,"navigation":171,"path":42246,"requiresChild":26923,"seo":42247,"stem":42248,"__hash__":42249},"components/docs/components/Neon.md",{"type":8,"value":41960,"toc":42241},[41961,41964,41967,41969,41971,41974,41976,42239],[11,41962,17633],{"id":41963},"neon",[15,41965,41966],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26061,41968],{"component":17633},[23,41970,26065],{"id":20662},[26067,41972],{":props":41973},"[{\"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.\"}]",[23,41975,26073],{"id":26072},[217,41977,41978,42028,42079,42127,42177],{":tabs":1543},[43,41979,41981],{"className":45,"code":41980,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,41982,41983,41991,41998,42007,42016,42020],{"__ignoreMap":48},[52,41984,41985,41987,41989],{"class":54,"line":55},[52,41986,59],{"class":58},[52,41988,63],{"class":62},[52,41990,77],{"class":58},[52,41992,41993,41995],{"class":54,"line":80},[52,41994,83],{"class":58},[52,41996,41997],{"class":62},"Neon\n",[52,41999,42000,42002,42004],{"class":54,"line":108},[52,42001,6504],{"class":66},[52,42003,70],{"class":58},[52,42005,42006],{"class":73},"\"#00ddff\"\n",[52,42008,42009,42011,42013],{"class":54,"line":118},[52,42010,17026],{"class":66},[52,42012,70],{"class":58},[52,42014,42015],{"class":73},"\"1.5\"\n",[52,42017,42018],{"class":54,"line":594},[52,42019,1224],{"class":58},[52,42021,42022,42024,42026],{"class":54,"line":600},[52,42023,121],{"class":58},[52,42025,63],{"class":62},[52,42027,77],{"class":58},[43,42029,42031],{"className":360,"code":42030,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,42032,42033,42041,42047,42055,42067,42071],{"__ignoreMap":48},[52,42034,42035,42037,42039],{"class":54,"line":55},[52,42036,59],{"class":58},[52,42038,63],{"class":371},[52,42040,77],{"class":58},[52,42042,42043,42045],{"class":54,"line":80},[52,42044,83],{"class":58},[52,42046,41997],{"class":371},[52,42048,42049,42051,42053],{"class":54,"line":108},[52,42050,6504],{"class":66},[52,42052,70],{"class":231},[52,42054,42006],{"class":73},[52,42056,42057,42059,42061,42063,42065],{"class":54,"line":118},[52,42058,17137],{"class":66},[52,42060,70],{"class":231},[52,42062,723],{"class":58},[52,42064,12325],{"class":371},[52,42066,729],{"class":58},[52,42068,42069],{"class":54,"line":594},[52,42070,1224],{"class":58},[52,42072,42073,42075,42077],{"class":54,"line":600},[52,42074,121],{"class":58},[52,42076,63],{"class":371},[52,42078,77],{"class":58},[43,42080,42081],{"className":2507,"code":42030,"language":2509,"meta":48,"style":48},[31,42082,42083,42091,42097,42105,42115,42119],{"__ignoreMap":48},[52,42084,42085,42087,42089],{"class":54,"line":55},[52,42086,59],{"class":58},[52,42088,63],{"class":371},[52,42090,77],{"class":58},[52,42092,42093,42095],{"class":54,"line":80},[52,42094,83],{"class":58},[52,42096,41997],{"class":371},[52,42098,42099,42101,42103],{"class":54,"line":108},[52,42100,6504],{"class":66},[52,42102,70],{"class":58},[52,42104,42006],{"class":73},[52,42106,42107,42109,42111,42113],{"class":54,"line":118},[52,42108,17137],{"class":66},[52,42110,24004],{"class":58},[52,42112,12325],{"class":371},[52,42114,729],{"class":58},[52,42116,42117],{"class":54,"line":594},[52,42118,1224],{"class":58},[52,42120,42121,42123,42125],{"class":54,"line":600},[52,42122,121],{"class":58},[52,42124,63],{"class":371},[52,42126,77],{"class":58},[43,42128,42129],{"className":419,"code":42030,"language":420,"meta":48,"style":48},[31,42130,42131,42139,42145,42153,42165,42169],{"__ignoreMap":48},[52,42132,42133,42135,42137],{"class":54,"line":55},[52,42134,59],{"class":58},[52,42136,63],{"class":371},[52,42138,77],{"class":58},[52,42140,42141,42143],{"class":54,"line":80},[52,42142,83],{"class":58},[52,42144,41997],{"class":371},[52,42146,42147,42149,42151],{"class":54,"line":108},[52,42148,6504],{"class":66},[52,42150,70],{"class":231},[52,42152,42006],{"class":73},[52,42154,42155,42157,42159,42161,42163],{"class":54,"line":118},[52,42156,17137],{"class":66},[52,42158,70],{"class":231},[52,42160,723],{"class":58},[52,42162,12325],{"class":371},[52,42164,729],{"class":58},[52,42166,42167],{"class":54,"line":594},[52,42168,1224],{"class":58},[52,42170,42171,42173,42175],{"class":54,"line":600},[52,42172,121],{"class":58},[52,42174,63],{"class":371},[52,42176,77],{"class":58},[43,42178,42180],{"className":222,"code":42179,"language":224,"meta":48,"style":48},"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",[31,42181,42182,42192,42196,42210,42214,42231,42235],{"__ignoreMap":48},[52,42183,42184,42186,42188,42190],{"class":54,"line":55},[52,42185,232],{"class":231},[52,42187,8385],{"class":58},[52,42189,238],{"class":231},[52,42191,8390],{"class":73},[52,42193,42194],{"class":54,"line":80},[52,42195,597],{"emptyLinePlaceholder":171},[52,42197,42198,42200,42202,42204,42206,42208],{"class":54,"line":108},[52,42199,1721],{"class":231},[52,42201,1724],{"class":371},[52,42203,1727],{"class":231},[52,42205,1730],{"class":231},[52,42207,1733],{"class":66},[52,42209,1736],{"class":58},[52,42211,42212],{"class":54,"line":118},[52,42213,1751],{"class":58},[52,42215,42216,42218,42220,42222,42225,42227,42229],{"class":54,"line":594},[52,42217,1756],{"class":58},[52,42219,18225],{"class":73},[52,42221,1762],{"class":58},[52,42223,42224],{"class":73},"'#00ddff'",[52,42226,33583],{"class":58},[52,42228,12325],{"class":371},[52,42230,1768],{"class":58},[52,42232,42233],{"class":54,"line":600},[52,42234,1773],{"class":58},[52,42236,42237],{"class":54,"line":606},[52,42238,1778],{"class":58},[156,42240,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42242},[42243,42244],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/neon",{"title":17633,"description":41966},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":42251,"title":42252,"body":42253,"category":26663,"componentType":20007,"description":42260,"extension":168,"meta":42521,"navigation":171,"path":42522,"requiresChild":171,"seo":42523,"stem":42524,"__hash__":42525},"components/docs/components/Paper.md","Paper",{"type":8,"value":42254,"toc":42517},[42255,42258,42261,42263,42265,42268,42270,42515],[11,42256,42252],{"id":42257},"paper",[15,42259,42260],{},"Applies realistic paper grain and surface roughness to child content",[26061,42262],{"component":42252},[23,42264,26065],{"id":20662},[26067,42266],{":props":42267},"[{\"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\"}]",[23,42269,26073],{"id":26072},[217,42271,42272,42317,42361,42405,42449],{":tabs":1543},[43,42273,42275],{"className":45,"code":42274,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,42276,42277,42285,42293,42301,42309],{"__ignoreMap":48},[52,42278,42279,42281,42283],{"class":54,"line":55},[52,42280,59],{"class":58},[52,42282,63],{"class":62},[52,42284,77],{"class":58},[52,42286,42287,42289,42291],{"class":54,"line":80},[52,42288,83],{"class":58},[52,42290,42252],{"class":62},[52,42292,77],{"class":58},[52,42294,42295,42297,42299],{"class":54,"line":108},[52,42296,2213],{"class":58},[52,42298,2216],{"class":62},[52,42300,105],{"class":58},[52,42302,42303,42305,42307],{"class":54,"line":118},[52,42304,2230],{"class":58},[52,42306,42252],{"class":62},[52,42308,77],{"class":58},[52,42310,42311,42313,42315],{"class":54,"line":594},[52,42312,121],{"class":58},[52,42314,63],{"class":62},[52,42316,77],{"class":58},[43,42318,42319],{"className":360,"code":42274,"language":362,"meta":48,"style":48},[31,42320,42321,42329,42337,42345,42353],{"__ignoreMap":48},[52,42322,42323,42325,42327],{"class":54,"line":55},[52,42324,59],{"class":58},[52,42326,63],{"class":371},[52,42328,77],{"class":58},[52,42330,42331,42333,42335],{"class":54,"line":80},[52,42332,83],{"class":58},[52,42334,42252],{"class":371},[52,42336,77],{"class":58},[52,42338,42339,42341,42343],{"class":54,"line":108},[52,42340,2213],{"class":58},[52,42342,2216],{"class":371},[52,42344,105],{"class":58},[52,42346,42347,42349,42351],{"class":54,"line":118},[52,42348,2230],{"class":58},[52,42350,42252],{"class":371},[52,42352,77],{"class":58},[52,42354,42355,42357,42359],{"class":54,"line":594},[52,42356,121],{"class":58},[52,42358,63],{"class":371},[52,42360,77],{"class":58},[43,42362,42363],{"className":2507,"code":42274,"language":2509,"meta":48,"style":48},[31,42364,42365,42373,42381,42389,42397],{"__ignoreMap":48},[52,42366,42367,42369,42371],{"class":54,"line":55},[52,42368,59],{"class":58},[52,42370,63],{"class":371},[52,42372,77],{"class":58},[52,42374,42375,42377,42379],{"class":54,"line":80},[52,42376,83],{"class":58},[52,42378,42252],{"class":371},[52,42380,77],{"class":58},[52,42382,42383,42385,42387],{"class":54,"line":108},[52,42384,2213],{"class":58},[52,42386,2216],{"class":371},[52,42388,105],{"class":58},[52,42390,42391,42393,42395],{"class":54,"line":118},[52,42392,2230],{"class":58},[52,42394,42252],{"class":371},[52,42396,77],{"class":58},[52,42398,42399,42401,42403],{"class":54,"line":594},[52,42400,121],{"class":58},[52,42402,63],{"class":371},[52,42404,77],{"class":58},[43,42406,42407],{"className":419,"code":42274,"language":420,"meta":48,"style":48},[31,42408,42409,42417,42425,42433,42441],{"__ignoreMap":48},[52,42410,42411,42413,42415],{"class":54,"line":55},[52,42412,59],{"class":58},[52,42414,63],{"class":371},[52,42416,77],{"class":58},[52,42418,42419,42421,42423],{"class":54,"line":80},[52,42420,83],{"class":58},[52,42422,42252],{"class":371},[52,42424,77],{"class":58},[52,42426,42427,42429,42431],{"class":54,"line":108},[52,42428,2213],{"class":58},[52,42430,2216],{"class":371},[52,42432,105],{"class":58},[52,42434,42435,42437,42439],{"class":54,"line":118},[52,42436,2230],{"class":58},[52,42438,42252],{"class":371},[52,42440,77],{"class":58},[52,42442,42443,42445,42447],{"class":54,"line":594},[52,42444,121],{"class":58},[52,42446,63],{"class":371},[52,42448,77],{"class":58},[43,42450,42452],{"className":222,"code":42451,"language":224,"meta":48,"style":48},"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",[31,42453,42454,42464,42468,42482,42486,42495,42503,42507,42511],{"__ignoreMap":48},[52,42455,42456,42458,42460,42462],{"class":54,"line":55},[52,42457,232],{"class":231},[52,42459,8385],{"class":58},[52,42461,238],{"class":231},[52,42463,8390],{"class":73},[52,42465,42466],{"class":54,"line":80},[52,42467,597],{"emptyLinePlaceholder":171},[52,42469,42470,42472,42474,42476,42478,42480],{"class":54,"line":108},[52,42471,1721],{"class":231},[52,42473,1724],{"class":371},[52,42475,1727],{"class":231},[52,42477,1730],{"class":231},[52,42479,1733],{"class":66},[52,42481,1736],{"class":58},[52,42483,42484],{"class":54,"line":118},[52,42485,1751],{"class":58},[52,42487,42488,42490,42493],{"class":54,"line":594},[52,42489,1756],{"class":58},[52,42491,42492],{"class":73},"'Paper'",[52,42494,3875],{"class":58},[52,42496,42497,42499,42501],{"class":54,"line":600},[52,42498,3880],{"class":58},[52,42500,2869],{"class":73},[52,42502,2129],{"class":58},[52,42504,42505],{"class":54,"line":606},[52,42506,3897],{"class":58},[52,42508,42509],{"class":54,"line":653},[52,42510,1773],{"class":58},[52,42512,42513],{"class":54,"line":662},[52,42514,1778],{"class":58},[156,42516,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":42518},[42519,42520],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/paper",{"title":42252,"description":42260},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":42527,"title":42528,"body":42529,"category":28265,"componentType":20007,"description":42536,"extension":168,"meta":42797,"navigation":171,"path":42798,"requiresChild":171,"seo":42799,"stem":42800,"__hash__":42801},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":42530,"toc":42793},[42531,42534,42537,42539,42541,42544,42546,42791],[11,42532,42528],{"id":42533},"perspective",[15,42535,42536],{},"Rotate the plane in 3D space with pan and tilt",[26061,42538],{"component":42528},[23,42540,26065],{"id":20662},[26067,42542],{":props":42543},"[{\"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\"}]",[23,42545,26073],{"id":26072},[217,42547,42548,42593,42637,42681,42725],{":tabs":1543},[43,42549,42551],{"className":45,"code":42550,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[31,42552,42553,42561,42569,42577,42585],{"__ignoreMap":48},[52,42554,42555,42557,42559],{"class":54,"line":55},[52,42556,59],{"class":58},[52,42558,63],{"class":62},[52,42560,77],{"class":58},[52,42562,42563,42565,42567],{"class":54,"line":80},[52,42564,83],{"class":58},[52,42566,42528],{"class":62},[52,42568,77],{"class":58},[52,42570,42571,42573,42575],{"class":54,"line":108},[52,42572,2213],{"class":58},[52,42574,2216],{"class":62},[52,42576,105],{"class":58},[52,42578,42579,42581,42583],{"class":54,"line":118},[52,42580,2230],{"class":58},[52,42582,42528],{"class":62},[52,42584,77],{"class":58},[52,42586,42587,42589,42591],{"class":54,"line":594},[52,42588,121],{"class":58},[52,42590,63],{"class":62},[52,42592,77],{"class":58},[43,42594,42595],{"className":360,"code":42550,"language":362,"meta":48,"style":48},[31,42596,42597,42605,42613,42621,42629],{"__ignoreMap":48},[52,42598,42599,42601,42603],{"class":54,"line":55},[52,42600,59],{"class":58},[52,42602,63],{"class":371},[52,42604,77],{"class":58},[52,42606,42607,42609,42611],{"class":54,"line":80},[52,42608,83],{"class":58},[52,42610,42528],{"class":371},[52,42612,77],{"class":58},[52,42614,42615,42617,42619],{"class":54,"line":108},[52,42616,2213],{"class":58},[52,42618,2216],{"class":371},[52,42620,105],{"class":58},[52,42622,42623,42625,42627],{"class":54,"line":118},[52,42624,2230],{"class":58},[52,42626,42528],{"class":371},[52,42628,77],{"class":58},[52,42630,42631,42633,42635],{"class":54,"line":594},[52,42632,121],{"class":58},[52,42634,63],{"class":371},[52,42636,77],{"class":58},[43,42638,42639],{"className":2507,"code":42550,"language":2509,"meta":48,"style":48},[31,42640,42641,42649,42657,42665,42673],{"__ignoreMap":48},[52,42642,42643,42645,42647],{"class":54,"line":55},[52,42644,59],{"class":58},[52,42646,63],{"class":371},[52,42648,77],{"class":58},[52,42650,42651,42653,42655],{"class":54,"line":80},[52,42652,83],{"class":58},[52,42654,42528],{"class":371},[52,42656,77],{"class":58},[52,42658,42659,42661,42663],{"class":54,"line":108},[52,42660,2213],{"class":58},[52,42662,2216],{"class":371},[52,42664,105],{"class":58},[52,42666,42667,42669,42671],{"class":54,"line":118},[52,42668,2230],{"class":58},[52,42670,42528],{"class":371},[52,42672,77],{"class":58},[52,42674,42675,42677,42679],{"class":54,"line":594},[52,42676,121],{"class":58},[52,42678,63],{"class":371},[52,42680,77],{"class":58},[43,42682,42683],{"className":419,"code":42550,"language":420,"meta":48,"style":48},[31,42684,42685,42693,42701,42709,42717],{"__ignoreMap":48},[52,42686,42687,42689,42691],{"class":54,"line":55},[52,42688,59],{"class":58},[52,42690,63],{"class":371},[52,42692,77],{"class":58},[52,42694,42695,42697,42699],{"class":54,"line":80},[52,42696,83],{"class":58},[52,42698,42528],{"class":371},[52,42700,77],{"class":58},[52,42702,42703,42705,42707],{"class":54,"line":108},[52,42704,2213],{"class":58},[52,42706,2216],{"class":371},[52,42708,105],{"class":58},[52,42710,42711,42713,42715],{"class":54,"line":118},[52,42712,2230],{"class":58},[52,42714,42528],{"class":371},[52,42716,77],{"class":58},[52,42718,42719,42721,42723],{"class":54,"line":594},[52,42720,121],{"class":58},[52,42722,63],{"class":371},[52,42724,77],{"class":58},[43,42726,42728],{"className":222,"code":42727,"language":224,"meta":48,"style":48},"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",[31,42729,42730,42740,42744,42758,42762,42771,42779,42783,42787],{"__ignoreMap":48},[52,42731,42732,42734,42736,42738],{"class":54,"line":55},[52,42733,232],{"class":231},[52,42735,8385],{"class":58},[52,42737,238],{"class":231},[52,42739,8390],{"class":73},[52,42741,42742],{"class":54,"line":80},[52,42743,597],{"emptyLinePlaceholder":171},[52,42745,42746,42748,42750,42752,42754,42756],{"class":54,"line":108},[52,42747,1721],{"class":231},[52,42749,1724],{"class":371},[52,42751,1727],{"class":231},[52,42753,1730],{"class":231},[52,42755,1733],{"class":66},[52,42757,1736],{"class":58},[52,42759,42760],{"class":54,"line":118},[52,42761,1751],{"class":58},[52,42763,42764,42766,42769],{"class":54,"line":594},[52,42765,1756],{"class":58},[52,42767,42768],{"class":73},"'Perspective'",[52,42770,3875],{"class":58},[52,42772,42773,42775,42777],{"class":54,"line":600},[52,42774,3880],{"class":58},[52,42776,2869],{"class":73},[52,42778,2129],{"class":58},[52,42780,42781],{"class":54,"line":606},[52,42782,3897],{"class":58},[52,42784,42785],{"class":54,"line":653},[52,42786,1773],{"class":58},[52,42788,42789],{"class":54,"line":662},[52,42790,1778],{"class":58},[156,42792,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":42794},[42795,42796],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/perspective",{"title":42528,"description":42536},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":42803,"title":42804,"body":42805,"category":26663,"componentType":20007,"description":42812,"extension":168,"meta":43073,"navigation":171,"path":43074,"requiresChild":171,"seo":43075,"stem":43076,"__hash__":43077},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":42806,"toc":43069},[42807,42810,42813,42815,42817,42820,42822,43067],[11,42808,42804],{"id":42809},"pixelate",[15,42811,42812],{},"Pixelation effect with adjustable cell size",[26061,42814],{"component":42804},[23,42816,26065],{"id":20662},[26067,42818],{":props":42819},"[{\"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)\"}]",[23,42821,26073],{"id":26072},[217,42823,42824,42869,42913,42957,43001],{":tabs":1543},[43,42825,42827],{"className":45,"code":42826,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[31,42828,42829,42837,42845,42853,42861],{"__ignoreMap":48},[52,42830,42831,42833,42835],{"class":54,"line":55},[52,42832,59],{"class":58},[52,42834,63],{"class":62},[52,42836,77],{"class":58},[52,42838,42839,42841,42843],{"class":54,"line":80},[52,42840,83],{"class":58},[52,42842,42804],{"class":62},[52,42844,77],{"class":58},[52,42846,42847,42849,42851],{"class":54,"line":108},[52,42848,2213],{"class":58},[52,42850,2216],{"class":62},[52,42852,105],{"class":58},[52,42854,42855,42857,42859],{"class":54,"line":118},[52,42856,2230],{"class":58},[52,42858,42804],{"class":62},[52,42860,77],{"class":58},[52,42862,42863,42865,42867],{"class":54,"line":594},[52,42864,121],{"class":58},[52,42866,63],{"class":62},[52,42868,77],{"class":58},[43,42870,42871],{"className":360,"code":42826,"language":362,"meta":48,"style":48},[31,42872,42873,42881,42889,42897,42905],{"__ignoreMap":48},[52,42874,42875,42877,42879],{"class":54,"line":55},[52,42876,59],{"class":58},[52,42878,63],{"class":371},[52,42880,77],{"class":58},[52,42882,42883,42885,42887],{"class":54,"line":80},[52,42884,83],{"class":58},[52,42886,42804],{"class":371},[52,42888,77],{"class":58},[52,42890,42891,42893,42895],{"class":54,"line":108},[52,42892,2213],{"class":58},[52,42894,2216],{"class":371},[52,42896,105],{"class":58},[52,42898,42899,42901,42903],{"class":54,"line":118},[52,42900,2230],{"class":58},[52,42902,42804],{"class":371},[52,42904,77],{"class":58},[52,42906,42907,42909,42911],{"class":54,"line":594},[52,42908,121],{"class":58},[52,42910,63],{"class":371},[52,42912,77],{"class":58},[43,42914,42915],{"className":2507,"code":42826,"language":2509,"meta":48,"style":48},[31,42916,42917,42925,42933,42941,42949],{"__ignoreMap":48},[52,42918,42919,42921,42923],{"class":54,"line":55},[52,42920,59],{"class":58},[52,42922,63],{"class":371},[52,42924,77],{"class":58},[52,42926,42927,42929,42931],{"class":54,"line":80},[52,42928,83],{"class":58},[52,42930,42804],{"class":371},[52,42932,77],{"class":58},[52,42934,42935,42937,42939],{"class":54,"line":108},[52,42936,2213],{"class":58},[52,42938,2216],{"class":371},[52,42940,105],{"class":58},[52,42942,42943,42945,42947],{"class":54,"line":118},[52,42944,2230],{"class":58},[52,42946,42804],{"class":371},[52,42948,77],{"class":58},[52,42950,42951,42953,42955],{"class":54,"line":594},[52,42952,121],{"class":58},[52,42954,63],{"class":371},[52,42956,77],{"class":58},[43,42958,42959],{"className":419,"code":42826,"language":420,"meta":48,"style":48},[31,42960,42961,42969,42977,42985,42993],{"__ignoreMap":48},[52,42962,42963,42965,42967],{"class":54,"line":55},[52,42964,59],{"class":58},[52,42966,63],{"class":371},[52,42968,77],{"class":58},[52,42970,42971,42973,42975],{"class":54,"line":80},[52,42972,83],{"class":58},[52,42974,42804],{"class":371},[52,42976,77],{"class":58},[52,42978,42979,42981,42983],{"class":54,"line":108},[52,42980,2213],{"class":58},[52,42982,2216],{"class":371},[52,42984,105],{"class":58},[52,42986,42987,42989,42991],{"class":54,"line":118},[52,42988,2230],{"class":58},[52,42990,42804],{"class":371},[52,42992,77],{"class":58},[52,42994,42995,42997,42999],{"class":54,"line":594},[52,42996,121],{"class":58},[52,42998,63],{"class":371},[52,43000,77],{"class":58},[43,43002,43004],{"className":222,"code":43003,"language":224,"meta":48,"style":48},"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",[31,43005,43006,43016,43020,43034,43038,43047,43055,43059,43063],{"__ignoreMap":48},[52,43007,43008,43010,43012,43014],{"class":54,"line":55},[52,43009,232],{"class":231},[52,43011,8385],{"class":58},[52,43013,238],{"class":231},[52,43015,8390],{"class":73},[52,43017,43018],{"class":54,"line":80},[52,43019,597],{"emptyLinePlaceholder":171},[52,43021,43022,43024,43026,43028,43030,43032],{"class":54,"line":108},[52,43023,1721],{"class":231},[52,43025,1724],{"class":371},[52,43027,1727],{"class":231},[52,43029,1730],{"class":231},[52,43031,1733],{"class":66},[52,43033,1736],{"class":58},[52,43035,43036],{"class":54,"line":118},[52,43037,1751],{"class":58},[52,43039,43040,43042,43045],{"class":54,"line":594},[52,43041,1756],{"class":58},[52,43043,43044],{"class":73},"'Pixelate'",[52,43046,3875],{"class":58},[52,43048,43049,43051,43053],{"class":54,"line":600},[52,43050,3880],{"class":58},[52,43052,2869],{"class":73},[52,43054,2129],{"class":58},[52,43056,43057],{"class":54,"line":606},[52,43058,3897],{"class":58},[52,43060,43061],{"class":54,"line":653},[52,43062,1773],{"class":58},[52,43064,43065],{"class":54,"line":662},[52,43066,1778],{"class":58},[156,43068,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":43070},[43071,43072],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/pixelate",{"title":42804,"description":42812},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":43079,"title":9942,"body":43080,"category":26920,"componentType":20001,"description":43087,"extension":168,"meta":43328,"navigation":171,"path":43329,"requiresChild":26923,"seo":43330,"stem":43331,"__hash__":43332},"components/docs/components/Plasma.md",{"type":8,"value":43081,"toc":43324},[43082,43085,43088,43090,43092,43095,43097,43322],[11,43083,9942],{"id":43084},"plasma",[15,43086,43087],{},"Animated effect of glowing plasma",[26061,43089],{"component":9942},[23,43091,26065],{"id":20662},[26067,43093],{":props":43094},"[{\"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\"}]",[23,43096,26073],{"id":26072},[217,43098,43099,43139,43182,43222,43264],{":tabs":1543},[43,43100,43102],{"className":45,"code":43101,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,43103,43104,43112,43119,43127,43131],{"__ignoreMap":48},[52,43105,43106,43108,43110],{"class":54,"line":55},[52,43107,59],{"class":58},[52,43109,63],{"class":62},[52,43111,77],{"class":58},[52,43113,43114,43116],{"class":54,"line":80},[52,43115,83],{"class":58},[52,43117,43118],{"class":62},"Plasma\n",[52,43120,43121,43123,43125],{"class":54,"line":108},[52,43122,17026],{"class":66},[52,43124,70],{"class":58},[52,43126,42015],{"class":73},[52,43128,43129],{"class":54,"line":118},[52,43130,1224],{"class":58},[52,43132,43133,43135,43137],{"class":54,"line":594},[52,43134,121],{"class":58},[52,43136,63],{"class":62},[52,43138,77],{"class":58},[43,43140,43142],{"className":360,"code":43141,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,43143,43144,43152,43158,43170,43174],{"__ignoreMap":48},[52,43145,43146,43148,43150],{"class":54,"line":55},[52,43147,59],{"class":58},[52,43149,63],{"class":371},[52,43151,77],{"class":58},[52,43153,43154,43156],{"class":54,"line":80},[52,43155,83],{"class":58},[52,43157,43118],{"class":371},[52,43159,43160,43162,43164,43166,43168],{"class":54,"line":108},[52,43161,17137],{"class":66},[52,43163,70],{"class":231},[52,43165,723],{"class":58},[52,43167,12325],{"class":371},[52,43169,729],{"class":58},[52,43171,43172],{"class":54,"line":118},[52,43173,1224],{"class":58},[52,43175,43176,43178,43180],{"class":54,"line":594},[52,43177,121],{"class":58},[52,43179,63],{"class":371},[52,43181,77],{"class":58},[43,43183,43184],{"className":2507,"code":43141,"language":2509,"meta":48,"style":48},[31,43185,43186,43194,43200,43210,43214],{"__ignoreMap":48},[52,43187,43188,43190,43192],{"class":54,"line":55},[52,43189,59],{"class":58},[52,43191,63],{"class":371},[52,43193,77],{"class":58},[52,43195,43196,43198],{"class":54,"line":80},[52,43197,83],{"class":58},[52,43199,43118],{"class":371},[52,43201,43202,43204,43206,43208],{"class":54,"line":108},[52,43203,17137],{"class":66},[52,43205,24004],{"class":58},[52,43207,12325],{"class":371},[52,43209,729],{"class":58},[52,43211,43212],{"class":54,"line":118},[52,43213,1224],{"class":58},[52,43215,43216,43218,43220],{"class":54,"line":594},[52,43217,121],{"class":58},[52,43219,63],{"class":371},[52,43221,77],{"class":58},[43,43223,43224],{"className":419,"code":43141,"language":420,"meta":48,"style":48},[31,43225,43226,43234,43240,43252,43256],{"__ignoreMap":48},[52,43227,43228,43230,43232],{"class":54,"line":55},[52,43229,59],{"class":58},[52,43231,63],{"class":371},[52,43233,77],{"class":58},[52,43235,43236,43238],{"class":54,"line":80},[52,43237,83],{"class":58},[52,43239,43118],{"class":371},[52,43241,43242,43244,43246,43248,43250],{"class":54,"line":108},[52,43243,17137],{"class":66},[52,43245,70],{"class":231},[52,43247,723],{"class":58},[52,43249,12325],{"class":371},[52,43251,729],{"class":58},[52,43253,43254],{"class":54,"line":118},[52,43255,1224],{"class":58},[52,43257,43258,43260,43262],{"class":54,"line":594},[52,43259,121],{"class":58},[52,43261,63],{"class":371},[52,43263,77],{"class":58},[43,43265,43267],{"className":222,"code":43266,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Plasma', props: { intensity: 1.5 } }\n ]\n})\n",[31,43268,43269,43279,43283,43297,43301,43314,43318],{"__ignoreMap":48},[52,43270,43271,43273,43275,43277],{"class":54,"line":55},[52,43272,232],{"class":231},[52,43274,8385],{"class":58},[52,43276,238],{"class":231},[52,43278,8390],{"class":73},[52,43280,43281],{"class":54,"line":80},[52,43282,597],{"emptyLinePlaceholder":171},[52,43284,43285,43287,43289,43291,43293,43295],{"class":54,"line":108},[52,43286,1721],{"class":231},[52,43288,1724],{"class":371},[52,43290,1727],{"class":231},[52,43292,1730],{"class":231},[52,43294,1733],{"class":66},[52,43296,1736],{"class":58},[52,43298,43299],{"class":54,"line":118},[52,43300,1751],{"class":58},[52,43302,43303,43305,43308,43310,43312],{"class":54,"line":594},[52,43304,1756],{"class":58},[52,43306,43307],{"class":73},"'Plasma'",[52,43309,26354],{"class":58},[52,43311,12325],{"class":371},[52,43313,1768],{"class":58},[52,43315,43316],{"class":54,"line":600},[52,43317,1773],{"class":58},[52,43319,43320],{"class":54,"line":606},[52,43321,1778],{"class":58},[156,43323,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43325},[43326,43327],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/plasma",{"title":9942,"description":43087},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":43334,"title":43335,"body":43336,"category":28265,"componentType":20007,"description":43343,"extension":168,"meta":43706,"navigation":171,"path":43707,"requiresChild":171,"seo":43708,"stem":43709,"__hash__":43710},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":43337,"toc":43702},[43338,43341,43344,43346,43348,43351,43353,43700],[11,43339,43335],{"id":43340},"polarcoordinates",[15,43342,43343],{},"Convert rectangular coordinates to polar space",[26061,43345],{"component":43335},[23,43347,26065],{"id":20662},[26067,43349],{":props":43350},"[{\"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\"}]",[23,43352,26073],{"id":26072},[217,43354,43355,43419,43490,43556,43626],{":tabs":1543},[43,43356,43358],{"className":45,"code":43357,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolarCoordinates\n :radius=\"1\"\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/PolarCoordinates>\n\u003C/Shader>\n",[31,43359,43360,43368,43375,43383,43391,43395,43403,43411],{"__ignoreMap":48},[52,43361,43362,43364,43366],{"class":54,"line":55},[52,43363,59],{"class":58},[52,43365,63],{"class":62},[52,43367,77],{"class":58},[52,43369,43370,43372],{"class":54,"line":80},[52,43371,83],{"class":58},[52,43373,43374],{"class":62},"PolarCoordinates\n",[52,43376,43377,43379,43381],{"class":54,"line":108},[52,43378,14057],{"class":66},[52,43380,70],{"class":58},[52,43382,27987],{"class":73},[52,43384,43385,43387,43389],{"class":54,"line":118},[52,43386,17026],{"class":66},[52,43388,70],{"class":58},[52,43390,27987],{"class":73},[52,43392,43393],{"class":54,"line":594},[52,43394,26109],{"class":58},[52,43396,43397,43399,43401],{"class":54,"line":600},[52,43398,2213],{"class":58},[52,43400,2216],{"class":62},[52,43402,105],{"class":58},[52,43404,43405,43407,43409],{"class":54,"line":606},[52,43406,2230],{"class":58},[52,43408,43335],{"class":62},[52,43410,77],{"class":58},[52,43412,43413,43415,43417],{"class":54,"line":653},[52,43414,121],{"class":58},[52,43416,63],{"class":62},[52,43418,77],{"class":58},[43,43420,43422],{"className":360,"code":43421,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolarCoordinates\n radius={1}\n intensity={1}\n >\n \u003CCircle />\n \u003C/PolarCoordinates>\n\u003C/Shader>\n",[31,43423,43424,43432,43438,43450,43462,43466,43474,43482],{"__ignoreMap":48},[52,43425,43426,43428,43430],{"class":54,"line":55},[52,43427,59],{"class":58},[52,43429,63],{"class":371},[52,43431,77],{"class":58},[52,43433,43434,43436],{"class":54,"line":80},[52,43435,83],{"class":58},[52,43437,43374],{"class":371},[52,43439,43440,43442,43444,43446,43448],{"class":54,"line":108},[52,43441,6514],{"class":66},[52,43443,70],{"class":231},[52,43445,723],{"class":58},[52,43447,5544],{"class":371},[52,43449,729],{"class":58},[52,43451,43452,43454,43456,43458,43460],{"class":54,"line":118},[52,43453,17137],{"class":66},[52,43455,70],{"class":231},[52,43457,723],{"class":58},[52,43459,5544],{"class":371},[52,43461,729],{"class":58},[52,43463,43464],{"class":54,"line":594},[52,43465,26109],{"class":58},[52,43467,43468,43470,43472],{"class":54,"line":600},[52,43469,2213],{"class":58},[52,43471,2216],{"class":371},[52,43473,105],{"class":58},[52,43475,43476,43478,43480],{"class":54,"line":606},[52,43477,2230],{"class":58},[52,43479,43335],{"class":371},[52,43481,77],{"class":58},[52,43483,43484,43486,43488],{"class":54,"line":653},[52,43485,121],{"class":58},[52,43487,63],{"class":371},[52,43489,77],{"class":58},[43,43491,43492],{"className":2507,"code":43421,"language":2509,"meta":48,"style":48},[31,43493,43494,43502,43508,43518,43528,43532,43540,43548],{"__ignoreMap":48},[52,43495,43496,43498,43500],{"class":54,"line":55},[52,43497,59],{"class":58},[52,43499,63],{"class":371},[52,43501,77],{"class":58},[52,43503,43504,43506],{"class":54,"line":80},[52,43505,83],{"class":58},[52,43507,43374],{"class":371},[52,43509,43510,43512,43514,43516],{"class":54,"line":108},[52,43511,6514],{"class":66},[52,43513,24004],{"class":58},[52,43515,5544],{"class":371},[52,43517,729],{"class":58},[52,43519,43520,43522,43524,43526],{"class":54,"line":118},[52,43521,17137],{"class":66},[52,43523,24004],{"class":58},[52,43525,5544],{"class":371},[52,43527,729],{"class":58},[52,43529,43530],{"class":54,"line":594},[52,43531,26109],{"class":58},[52,43533,43534,43536,43538],{"class":54,"line":600},[52,43535,2213],{"class":58},[52,43537,2216],{"class":371},[52,43539,105],{"class":58},[52,43541,43542,43544,43546],{"class":54,"line":606},[52,43543,2230],{"class":58},[52,43545,43335],{"class":371},[52,43547,77],{"class":58},[52,43549,43550,43552,43554],{"class":54,"line":653},[52,43551,121],{"class":58},[52,43553,63],{"class":371},[52,43555,77],{"class":58},[43,43557,43558],{"className":419,"code":43421,"language":420,"meta":48,"style":48},[31,43559,43560,43568,43574,43586,43598,43602,43610,43618],{"__ignoreMap":48},[52,43561,43562,43564,43566],{"class":54,"line":55},[52,43563,59],{"class":58},[52,43565,63],{"class":371},[52,43567,77],{"class":58},[52,43569,43570,43572],{"class":54,"line":80},[52,43571,83],{"class":58},[52,43573,43374],{"class":371},[52,43575,43576,43578,43580,43582,43584],{"class":54,"line":108},[52,43577,6514],{"class":66},[52,43579,70],{"class":231},[52,43581,723],{"class":58},[52,43583,5544],{"class":371},[52,43585,729],{"class":58},[52,43587,43588,43590,43592,43594,43596],{"class":54,"line":118},[52,43589,17137],{"class":66},[52,43591,70],{"class":231},[52,43593,723],{"class":58},[52,43595,5544],{"class":371},[52,43597,729],{"class":58},[52,43599,43600],{"class":54,"line":594},[52,43601,26109],{"class":58},[52,43603,43604,43606,43608],{"class":54,"line":600},[52,43605,2213],{"class":58},[52,43607,2216],{"class":371},[52,43609,105],{"class":58},[52,43611,43612,43614,43616],{"class":54,"line":606},[52,43613,2230],{"class":58},[52,43615,43335],{"class":371},[52,43617,77],{"class":58},[52,43619,43620,43622,43624],{"class":54,"line":653},[52,43621,121],{"class":58},[52,43623,63],{"class":371},[52,43625,77],{"class":58},[43,43627,43629],{"className":222,"code":43628,"language":224,"meta":48,"style":48},"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",[31,43630,43631,43641,43645,43659,43663,43680,43688,43692,43696],{"__ignoreMap":48},[52,43632,43633,43635,43637,43639],{"class":54,"line":55},[52,43634,232],{"class":231},[52,43636,8385],{"class":58},[52,43638,238],{"class":231},[52,43640,8390],{"class":73},[52,43642,43643],{"class":54,"line":80},[52,43644,597],{"emptyLinePlaceholder":171},[52,43646,43647,43649,43651,43653,43655,43657],{"class":54,"line":108},[52,43648,1721],{"class":231},[52,43650,1724],{"class":371},[52,43652,1727],{"class":231},[52,43654,1730],{"class":231},[52,43656,1733],{"class":66},[52,43658,1736],{"class":58},[52,43660,43661],{"class":54,"line":118},[52,43662,1751],{"class":58},[52,43664,43665,43667,43670,43672,43674,43676,43678],{"class":54,"line":594},[52,43666,1756],{"class":58},[52,43668,43669],{"class":73},"'PolarCoordinates'",[52,43671,4407],{"class":58},[52,43673,5544],{"class":371},[52,43675,33583],{"class":58},[52,43677,5544],{"class":371},[52,43679,4412],{"class":58},[52,43681,43682,43684,43686],{"class":54,"line":600},[52,43683,3880],{"class":58},[52,43685,2869],{"class":73},[52,43687,2129],{"class":58},[52,43689,43690],{"class":54,"line":606},[52,43691,3897],{"class":58},[52,43693,43694],{"class":54,"line":653},[52,43695,1773],{"class":58},[52,43697,43698],{"class":54,"line":662},[52,43699,1778],{"class":58},[156,43701,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43703},[43704,43705],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/polarcoordinates",{"title":43335,"description":43343},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":43712,"title":43713,"body":43714,"category":29887,"componentType":20001,"description":43721,"extension":168,"meta":43998,"navigation":171,"path":43999,"requiresChild":26923,"seo":44000,"stem":44001,"__hash__":44002},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":43715,"toc":43994},[43716,43719,43722,43724,43726,43729,43731,43992],[11,43717,43713],{"id":43718},"polygon",[15,43720,43721],{},"Regular polygon with adjustable sides and corner rounding",[26061,43723],{"component":43713},[23,43725,26065],{"id":20662},[26067,43727],{":props":43728},"[{\"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\"}]",[23,43730,26073],{"id":26072},[217,43732,43733,43781,43832,43880,43930],{":tabs":1543},[43,43734,43736],{"className":45,"code":43735,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,43737,43738,43746,43753,43761,43769,43773],{"__ignoreMap":48},[52,43739,43740,43742,43744],{"class":54,"line":55},[52,43741,59],{"class":58},[52,43743,63],{"class":62},[52,43745,77],{"class":58},[52,43747,43748,43750],{"class":54,"line":80},[52,43749,83],{"class":58},[52,43751,43752],{"class":62},"Polygon\n",[52,43754,43755,43757,43759],{"class":54,"line":108},[52,43756,6504],{"class":66},[52,43758,70],{"class":58},[52,43760,6460],{"class":73},[52,43762,43763,43765,43767],{"class":54,"line":118},[52,43764,14057],{"class":66},[52,43766,70],{"class":58},[52,43768,35424],{"class":73},[52,43770,43771],{"class":54,"line":594},[52,43772,1224],{"class":58},[52,43774,43775,43777,43779],{"class":54,"line":600},[52,43776,121],{"class":58},[52,43778,63],{"class":62},[52,43780,77],{"class":58},[43,43782,43784],{"className":360,"code":43783,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,43785,43786,43794,43800,43808,43820,43824],{"__ignoreMap":48},[52,43787,43788,43790,43792],{"class":54,"line":55},[52,43789,59],{"class":58},[52,43791,63],{"class":371},[52,43793,77],{"class":58},[52,43795,43796,43798],{"class":54,"line":80},[52,43797,83],{"class":58},[52,43799,43752],{"class":371},[52,43801,43802,43804,43806],{"class":54,"line":108},[52,43803,6504],{"class":66},[52,43805,70],{"class":231},[52,43807,6460],{"class":73},[52,43809,43810,43812,43814,43816,43818],{"class":54,"line":118},[52,43811,6514],{"class":66},[52,43813,70],{"class":231},[52,43815,723],{"class":58},[52,43817,5116],{"class":371},[52,43819,729],{"class":58},[52,43821,43822],{"class":54,"line":594},[52,43823,1224],{"class":58},[52,43825,43826,43828,43830],{"class":54,"line":600},[52,43827,121],{"class":58},[52,43829,63],{"class":371},[52,43831,77],{"class":58},[43,43833,43834],{"className":2507,"code":43783,"language":2509,"meta":48,"style":48},[31,43835,43836,43844,43850,43858,43868,43872],{"__ignoreMap":48},[52,43837,43838,43840,43842],{"class":54,"line":55},[52,43839,59],{"class":58},[52,43841,63],{"class":371},[52,43843,77],{"class":58},[52,43845,43846,43848],{"class":54,"line":80},[52,43847,83],{"class":58},[52,43849,43752],{"class":371},[52,43851,43852,43854,43856],{"class":54,"line":108},[52,43853,6504],{"class":66},[52,43855,70],{"class":58},[52,43857,6460],{"class":73},[52,43859,43860,43862,43864,43866],{"class":54,"line":118},[52,43861,6514],{"class":66},[52,43863,24004],{"class":58},[52,43865,5116],{"class":371},[52,43867,729],{"class":58},[52,43869,43870],{"class":54,"line":594},[52,43871,1224],{"class":58},[52,43873,43874,43876,43878],{"class":54,"line":600},[52,43875,121],{"class":58},[52,43877,63],{"class":371},[52,43879,77],{"class":58},[43,43881,43882],{"className":419,"code":43783,"language":420,"meta":48,"style":48},[31,43883,43884,43892,43898,43906,43918,43922],{"__ignoreMap":48},[52,43885,43886,43888,43890],{"class":54,"line":55},[52,43887,59],{"class":58},[52,43889,63],{"class":371},[52,43891,77],{"class":58},[52,43893,43894,43896],{"class":54,"line":80},[52,43895,83],{"class":58},[52,43897,43752],{"class":371},[52,43899,43900,43902,43904],{"class":54,"line":108},[52,43901,6504],{"class":66},[52,43903,70],{"class":231},[52,43905,6460],{"class":73},[52,43907,43908,43910,43912,43914,43916],{"class":54,"line":118},[52,43909,6514],{"class":66},[52,43911,70],{"class":231},[52,43913,723],{"class":58},[52,43915,5116],{"class":371},[52,43917,729],{"class":58},[52,43919,43920],{"class":54,"line":594},[52,43921,1224],{"class":58},[52,43923,43924,43926,43928],{"class":54,"line":600},[52,43925,121],{"class":58},[52,43927,63],{"class":371},[52,43929,77],{"class":58},[43,43931,43933],{"className":222,"code":43932,"language":224,"meta":48,"style":48},"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",[31,43934,43935,43945,43949,43963,43967,43984,43988],{"__ignoreMap":48},[52,43936,43937,43939,43941,43943],{"class":54,"line":55},[52,43938,232],{"class":231},[52,43940,8385],{"class":58},[52,43942,238],{"class":231},[52,43944,8390],{"class":73},[52,43946,43947],{"class":54,"line":80},[52,43948,597],{"emptyLinePlaceholder":171},[52,43950,43951,43953,43955,43957,43959,43961],{"class":54,"line":108},[52,43952,1721],{"class":231},[52,43954,1724],{"class":371},[52,43956,1727],{"class":231},[52,43958,1730],{"class":231},[52,43960,1733],{"class":66},[52,43962,1736],{"class":58},[52,43964,43965],{"class":54,"line":118},[52,43966,1751],{"class":58},[52,43968,43969,43971,43974,43976,43978,43980,43982],{"class":54,"line":594},[52,43970,1756],{"class":58},[52,43972,43973],{"class":73},"'Polygon'",[52,43975,1762],{"class":58},[52,43977,7039],{"class":73},[52,43979,3431],{"class":58},[52,43981,5116],{"class":371},[52,43983,1768],{"class":58},[52,43985,43986],{"class":54,"line":600},[52,43987,1773],{"class":58},[52,43989,43990],{"class":54,"line":606},[52,43991,1778],{"class":58},[156,43993,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43995},[43996,43997],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/polygon",{"title":43713,"description":43721},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":44004,"title":44005,"body":44006,"category":27931,"componentType":20007,"description":44013,"extension":168,"meta":44331,"navigation":171,"path":44332,"requiresChild":171,"seo":44333,"stem":44334,"__hash__":44335},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":44007,"toc":44327},[44008,44011,44014,44016,44018,44021,44023,44325],[11,44009,44005],{"id":44010},"posterize",[15,44012,44013],{},"Reduce color depth to create a poster effect",[26061,44015],{"component":44005},[23,44017,26065],{"id":20662},[26067,44019],{":props":44020},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,44022,26073],{"id":26072},[217,44024,44025,44082,44141,44197,44255],{":tabs":1543},[43,44026,44028],{"className":45,"code":44027,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,44029,44030,44038,44045,44054,44058,44066,44074],{"__ignoreMap":48},[52,44031,44032,44034,44036],{"class":54,"line":55},[52,44033,59],{"class":58},[52,44035,63],{"class":62},[52,44037,77],{"class":58},[52,44039,44040,44042],{"class":54,"line":80},[52,44041,83],{"class":58},[52,44043,44044],{"class":62},"Posterize\n",[52,44046,44047,44049,44051],{"class":54,"line":108},[52,44048,17026],{"class":66},[52,44050,70],{"class":58},[52,44052,44053],{"class":73},"\"5\"\n",[52,44055,44056],{"class":54,"line":118},[52,44057,26109],{"class":58},[52,44059,44060,44062,44064],{"class":54,"line":594},[52,44061,2213],{"class":58},[52,44063,2216],{"class":62},[52,44065,105],{"class":58},[52,44067,44068,44070,44072],{"class":54,"line":600},[52,44069,2230],{"class":58},[52,44071,44005],{"class":62},[52,44073,77],{"class":58},[52,44075,44076,44078,44080],{"class":54,"line":606},[52,44077,121],{"class":58},[52,44079,63],{"class":62},[52,44081,77],{"class":58},[43,44083,44085],{"className":360,"code":44084,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,44086,44087,44095,44101,44113,44117,44125,44133],{"__ignoreMap":48},[52,44088,44089,44091,44093],{"class":54,"line":55},[52,44090,59],{"class":58},[52,44092,63],{"class":371},[52,44094,77],{"class":58},[52,44096,44097,44099],{"class":54,"line":80},[52,44098,83],{"class":58},[52,44100,44044],{"class":371},[52,44102,44103,44105,44107,44109,44111],{"class":54,"line":108},[52,44104,17137],{"class":66},[52,44106,70],{"class":231},[52,44108,723],{"class":58},[52,44110,18725],{"class":371},[52,44112,729],{"class":58},[52,44114,44115],{"class":54,"line":118},[52,44116,26109],{"class":58},[52,44118,44119,44121,44123],{"class":54,"line":594},[52,44120,2213],{"class":58},[52,44122,2216],{"class":371},[52,44124,105],{"class":58},[52,44126,44127,44129,44131],{"class":54,"line":600},[52,44128,2230],{"class":58},[52,44130,44005],{"class":371},[52,44132,77],{"class":58},[52,44134,44135,44137,44139],{"class":54,"line":606},[52,44136,121],{"class":58},[52,44138,63],{"class":371},[52,44140,77],{"class":58},[43,44142,44143],{"className":2507,"code":44084,"language":2509,"meta":48,"style":48},[31,44144,44145,44153,44159,44169,44173,44181,44189],{"__ignoreMap":48},[52,44146,44147,44149,44151],{"class":54,"line":55},[52,44148,59],{"class":58},[52,44150,63],{"class":371},[52,44152,77],{"class":58},[52,44154,44155,44157],{"class":54,"line":80},[52,44156,83],{"class":58},[52,44158,44044],{"class":371},[52,44160,44161,44163,44165,44167],{"class":54,"line":108},[52,44162,17137],{"class":66},[52,44164,24004],{"class":58},[52,44166,18725],{"class":371},[52,44168,729],{"class":58},[52,44170,44171],{"class":54,"line":118},[52,44172,26109],{"class":58},[52,44174,44175,44177,44179],{"class":54,"line":594},[52,44176,2213],{"class":58},[52,44178,2216],{"class":371},[52,44180,105],{"class":58},[52,44182,44183,44185,44187],{"class":54,"line":600},[52,44184,2230],{"class":58},[52,44186,44005],{"class":371},[52,44188,77],{"class":58},[52,44190,44191,44193,44195],{"class":54,"line":606},[52,44192,121],{"class":58},[52,44194,63],{"class":371},[52,44196,77],{"class":58},[43,44198,44199],{"className":419,"code":44084,"language":420,"meta":48,"style":48},[31,44200,44201,44209,44215,44227,44231,44239,44247],{"__ignoreMap":48},[52,44202,44203,44205,44207],{"class":54,"line":55},[52,44204,59],{"class":58},[52,44206,63],{"class":371},[52,44208,77],{"class":58},[52,44210,44211,44213],{"class":54,"line":80},[52,44212,83],{"class":58},[52,44214,44044],{"class":371},[52,44216,44217,44219,44221,44223,44225],{"class":54,"line":108},[52,44218,17137],{"class":66},[52,44220,70],{"class":231},[52,44222,723],{"class":58},[52,44224,18725],{"class":371},[52,44226,729],{"class":58},[52,44228,44229],{"class":54,"line":118},[52,44230,26109],{"class":58},[52,44232,44233,44235,44237],{"class":54,"line":594},[52,44234,2213],{"class":58},[52,44236,2216],{"class":371},[52,44238,105],{"class":58},[52,44240,44241,44243,44245],{"class":54,"line":600},[52,44242,2230],{"class":58},[52,44244,44005],{"class":371},[52,44246,77],{"class":58},[52,44248,44249,44251,44253],{"class":54,"line":606},[52,44250,121],{"class":58},[52,44252,63],{"class":371},[52,44254,77],{"class":58},[43,44256,44258],{"className":222,"code":44257,"language":224,"meta":48,"style":48},"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",[31,44259,44260,44270,44274,44288,44292,44305,44313,44317,44321],{"__ignoreMap":48},[52,44261,44262,44264,44266,44268],{"class":54,"line":55},[52,44263,232],{"class":231},[52,44265,8385],{"class":58},[52,44267,238],{"class":231},[52,44269,8390],{"class":73},[52,44271,44272],{"class":54,"line":80},[52,44273,597],{"emptyLinePlaceholder":171},[52,44275,44276,44278,44280,44282,44284,44286],{"class":54,"line":108},[52,44277,1721],{"class":231},[52,44279,1724],{"class":371},[52,44281,1727],{"class":231},[52,44283,1730],{"class":231},[52,44285,1733],{"class":66},[52,44287,1736],{"class":58},[52,44289,44290],{"class":54,"line":118},[52,44291,1751],{"class":58},[52,44293,44294,44296,44299,44301,44303],{"class":54,"line":594},[52,44295,1756],{"class":58},[52,44297,44298],{"class":73},"'Posterize'",[52,44300,26354],{"class":58},[52,44302,18725],{"class":371},[52,44304,4412],{"class":58},[52,44306,44307,44309,44311],{"class":54,"line":600},[52,44308,3880],{"class":58},[52,44310,2869],{"class":73},[52,44312,2129],{"class":58},[52,44314,44315],{"class":54,"line":606},[52,44316,3897],{"class":58},[52,44318,44319],{"class":54,"line":653},[52,44320,1773],{"class":58},[52,44322,44323],{"class":54,"line":662},[52,44324,1778],{"class":58},[156,44326,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44328},[44329,44330],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/posterize",{"title":44005,"description":44013},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":44337,"title":44338,"body":44339,"category":26385,"componentType":20007,"description":44346,"extension":168,"meta":44663,"navigation":171,"path":44664,"requiresChild":171,"seo":44665,"stem":44666,"__hash__":44667},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":44340,"toc":44659},[44341,44344,44347,44349,44351,44354,44356,44657],[11,44342,44338],{"id":44343},"progressiveblur",[15,44345,44346],{},"Blur that increases progressively in one direction",[26061,44348],{"component":44338},[23,44350,26065],{"id":20662},[26067,44352],{":props":44353},"[{\"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\"}]",[23,44355,26073],{"id":26072},[217,44357,44358,44414,44473,44529,44587],{":tabs":1543},[43,44359,44361],{"className":45,"code":44360,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,44362,44363,44371,44378,44386,44390,44398,44406],{"__ignoreMap":48},[52,44364,44365,44367,44369],{"class":54,"line":55},[52,44366,59],{"class":58},[52,44368,63],{"class":62},[52,44370,77],{"class":58},[52,44372,44373,44375],{"class":54,"line":80},[52,44374,83],{"class":58},[52,44376,44377],{"class":62},"ProgressiveBlur\n",[52,44379,44380,44382,44384],{"class":54,"line":108},[52,44381,17026],{"class":66},[52,44383,70],{"class":58},[52,44385,27376],{"class":73},[52,44387,44388],{"class":54,"line":118},[52,44389,26109],{"class":58},[52,44391,44392,44394,44396],{"class":54,"line":594},[52,44393,2213],{"class":58},[52,44395,2216],{"class":62},[52,44397,105],{"class":58},[52,44399,44400,44402,44404],{"class":54,"line":600},[52,44401,2230],{"class":58},[52,44403,44338],{"class":62},[52,44405,77],{"class":58},[52,44407,44408,44410,44412],{"class":54,"line":606},[52,44409,121],{"class":58},[52,44411,63],{"class":62},[52,44413,77],{"class":58},[43,44415,44417],{"className":360,"code":44416,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,44418,44419,44427,44433,44445,44449,44457,44465],{"__ignoreMap":48},[52,44420,44421,44423,44425],{"class":54,"line":55},[52,44422,59],{"class":58},[52,44424,63],{"class":371},[52,44426,77],{"class":58},[52,44428,44429,44431],{"class":54,"line":80},[52,44430,83],{"class":58},[52,44432,44377],{"class":371},[52,44434,44435,44437,44439,44441,44443],{"class":54,"line":108},[52,44436,17137],{"class":66},[52,44438,70],{"class":231},[52,44440,723],{"class":58},[52,44442,27434],{"class":371},[52,44444,729],{"class":58},[52,44446,44447],{"class":54,"line":118},[52,44448,26109],{"class":58},[52,44450,44451,44453,44455],{"class":54,"line":594},[52,44452,2213],{"class":58},[52,44454,2216],{"class":371},[52,44456,105],{"class":58},[52,44458,44459,44461,44463],{"class":54,"line":600},[52,44460,2230],{"class":58},[52,44462,44338],{"class":371},[52,44464,77],{"class":58},[52,44466,44467,44469,44471],{"class":54,"line":606},[52,44468,121],{"class":58},[52,44470,63],{"class":371},[52,44472,77],{"class":58},[43,44474,44475],{"className":2507,"code":44416,"language":2509,"meta":48,"style":48},[31,44476,44477,44485,44491,44501,44505,44513,44521],{"__ignoreMap":48},[52,44478,44479,44481,44483],{"class":54,"line":55},[52,44480,59],{"class":58},[52,44482,63],{"class":371},[52,44484,77],{"class":58},[52,44486,44487,44489],{"class":54,"line":80},[52,44488,83],{"class":58},[52,44490,44377],{"class":371},[52,44492,44493,44495,44497,44499],{"class":54,"line":108},[52,44494,17137],{"class":66},[52,44496,24004],{"class":58},[52,44498,27434],{"class":371},[52,44500,729],{"class":58},[52,44502,44503],{"class":54,"line":118},[52,44504,26109],{"class":58},[52,44506,44507,44509,44511],{"class":54,"line":594},[52,44508,2213],{"class":58},[52,44510,2216],{"class":371},[52,44512,105],{"class":58},[52,44514,44515,44517,44519],{"class":54,"line":600},[52,44516,2230],{"class":58},[52,44518,44338],{"class":371},[52,44520,77],{"class":58},[52,44522,44523,44525,44527],{"class":54,"line":606},[52,44524,121],{"class":58},[52,44526,63],{"class":371},[52,44528,77],{"class":58},[43,44530,44531],{"className":419,"code":44416,"language":420,"meta":48,"style":48},[31,44532,44533,44541,44547,44559,44563,44571,44579],{"__ignoreMap":48},[52,44534,44535,44537,44539],{"class":54,"line":55},[52,44536,59],{"class":58},[52,44538,63],{"class":371},[52,44540,77],{"class":58},[52,44542,44543,44545],{"class":54,"line":80},[52,44544,83],{"class":58},[52,44546,44377],{"class":371},[52,44548,44549,44551,44553,44555,44557],{"class":54,"line":108},[52,44550,17137],{"class":66},[52,44552,70],{"class":231},[52,44554,723],{"class":58},[52,44556,27434],{"class":371},[52,44558,729],{"class":58},[52,44560,44561],{"class":54,"line":118},[52,44562,26109],{"class":58},[52,44564,44565,44567,44569],{"class":54,"line":594},[52,44566,2213],{"class":58},[52,44568,2216],{"class":371},[52,44570,105],{"class":58},[52,44572,44573,44575,44577],{"class":54,"line":600},[52,44574,2230],{"class":58},[52,44576,44338],{"class":371},[52,44578,77],{"class":58},[52,44580,44581,44583,44585],{"class":54,"line":606},[52,44582,121],{"class":58},[52,44584,63],{"class":371},[52,44586,77],{"class":58},[43,44588,44590],{"className":222,"code":44589,"language":224,"meta":48,"style":48},"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",[31,44591,44592,44602,44606,44620,44624,44637,44645,44649,44653],{"__ignoreMap":48},[52,44593,44594,44596,44598,44600],{"class":54,"line":55},[52,44595,232],{"class":231},[52,44597,8385],{"class":58},[52,44599,238],{"class":231},[52,44601,8390],{"class":73},[52,44603,44604],{"class":54,"line":80},[52,44605,597],{"emptyLinePlaceholder":171},[52,44607,44608,44610,44612,44614,44616,44618],{"class":54,"line":108},[52,44609,1721],{"class":231},[52,44611,1724],{"class":371},[52,44613,1727],{"class":231},[52,44615,1730],{"class":231},[52,44617,1733],{"class":66},[52,44619,1736],{"class":58},[52,44621,44622],{"class":54,"line":118},[52,44623,1751],{"class":58},[52,44625,44626,44628,44631,44633,44635],{"class":54,"line":594},[52,44627,1756],{"class":58},[52,44629,44630],{"class":73},"'ProgressiveBlur'",[52,44632,26354],{"class":58},[52,44634,27434],{"class":371},[52,44636,4412],{"class":58},[52,44638,44639,44641,44643],{"class":54,"line":600},[52,44640,3880],{"class":58},[52,44642,2869],{"class":73},[52,44644,2129],{"class":58},[52,44646,44647],{"class":54,"line":606},[52,44648,3897],{"class":58},[52,44650,44651],{"class":54,"line":653},[52,44652,1773],{"class":58},[52,44654,44655],{"class":54,"line":662},[52,44656,1778],{"class":58},[156,44658,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44660},[44661,44662],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/progressiveblur",{"title":44338,"description":44346},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":44669,"title":44670,"body":44671,"category":26920,"componentType":20001,"description":44678,"extension":168,"meta":44919,"navigation":171,"path":44920,"requiresChild":26923,"seo":44921,"stem":44922,"__hash__":44923},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":44672,"toc":44915},[44673,44676,44679,44681,44683,44686,44688,44913],[11,44674,44670],{"id":44675},"radialgradient",[15,44677,44678],{},"Radial gradient radiating from a center point",[26061,44680],{"component":44670},[23,44682,26065],{"id":20662},[26067,44684],{":props":44685},"[{\"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\"}]",[23,44687,26073],{"id":26072},[217,44689,44690,44730,44773,44813,44855],{":tabs":1543},[43,44691,44693],{"className":45,"code":44692,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,44694,44695,44703,44710,44718,44722],{"__ignoreMap":48},[52,44696,44697,44699,44701],{"class":54,"line":55},[52,44698,59],{"class":58},[52,44700,63],{"class":62},[52,44702,77],{"class":58},[52,44704,44705,44707],{"class":54,"line":80},[52,44706,83],{"class":58},[52,44708,44709],{"class":62},"RadialGradient\n",[52,44711,44712,44714,44716],{"class":54,"line":108},[52,44713,14057],{"class":66},[52,44715,70],{"class":58},[52,44717,27987],{"class":73},[52,44719,44720],{"class":54,"line":118},[52,44721,1224],{"class":58},[52,44723,44724,44726,44728],{"class":54,"line":594},[52,44725,121],{"class":58},[52,44727,63],{"class":62},[52,44729,77],{"class":58},[43,44731,44733],{"className":360,"code":44732,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,44734,44735,44743,44749,44761,44765],{"__ignoreMap":48},[52,44736,44737,44739,44741],{"class":54,"line":55},[52,44738,59],{"class":58},[52,44740,63],{"class":371},[52,44742,77],{"class":58},[52,44744,44745,44747],{"class":54,"line":80},[52,44746,83],{"class":58},[52,44748,44709],{"class":371},[52,44750,44751,44753,44755,44757,44759],{"class":54,"line":108},[52,44752,6514],{"class":66},[52,44754,70],{"class":231},[52,44756,723],{"class":58},[52,44758,5544],{"class":371},[52,44760,729],{"class":58},[52,44762,44763],{"class":54,"line":118},[52,44764,1224],{"class":58},[52,44766,44767,44769,44771],{"class":54,"line":594},[52,44768,121],{"class":58},[52,44770,63],{"class":371},[52,44772,77],{"class":58},[43,44774,44775],{"className":2507,"code":44732,"language":2509,"meta":48,"style":48},[31,44776,44777,44785,44791,44801,44805],{"__ignoreMap":48},[52,44778,44779,44781,44783],{"class":54,"line":55},[52,44780,59],{"class":58},[52,44782,63],{"class":371},[52,44784,77],{"class":58},[52,44786,44787,44789],{"class":54,"line":80},[52,44788,83],{"class":58},[52,44790,44709],{"class":371},[52,44792,44793,44795,44797,44799],{"class":54,"line":108},[52,44794,6514],{"class":66},[52,44796,24004],{"class":58},[52,44798,5544],{"class":371},[52,44800,729],{"class":58},[52,44802,44803],{"class":54,"line":118},[52,44804,1224],{"class":58},[52,44806,44807,44809,44811],{"class":54,"line":594},[52,44808,121],{"class":58},[52,44810,63],{"class":371},[52,44812,77],{"class":58},[43,44814,44815],{"className":419,"code":44732,"language":420,"meta":48,"style":48},[31,44816,44817,44825,44831,44843,44847],{"__ignoreMap":48},[52,44818,44819,44821,44823],{"class":54,"line":55},[52,44820,59],{"class":58},[52,44822,63],{"class":371},[52,44824,77],{"class":58},[52,44826,44827,44829],{"class":54,"line":80},[52,44828,83],{"class":58},[52,44830,44709],{"class":371},[52,44832,44833,44835,44837,44839,44841],{"class":54,"line":108},[52,44834,6514],{"class":66},[52,44836,70],{"class":231},[52,44838,723],{"class":58},[52,44840,5544],{"class":371},[52,44842,729],{"class":58},[52,44844,44845],{"class":54,"line":118},[52,44846,1224],{"class":58},[52,44848,44849,44851,44853],{"class":54,"line":594},[52,44850,121],{"class":58},[52,44852,63],{"class":371},[52,44854,77],{"class":58},[43,44856,44858],{"className":222,"code":44857,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RadialGradient', props: { radius: 1 } }\n ]\n})\n",[31,44859,44860,44870,44874,44888,44892,44905,44909],{"__ignoreMap":48},[52,44861,44862,44864,44866,44868],{"class":54,"line":55},[52,44863,232],{"class":231},[52,44865,8385],{"class":58},[52,44867,238],{"class":231},[52,44869,8390],{"class":73},[52,44871,44872],{"class":54,"line":80},[52,44873,597],{"emptyLinePlaceholder":171},[52,44875,44876,44878,44880,44882,44884,44886],{"class":54,"line":108},[52,44877,1721],{"class":231},[52,44879,1724],{"class":371},[52,44881,1727],{"class":231},[52,44883,1730],{"class":231},[52,44885,1733],{"class":66},[52,44887,1736],{"class":58},[52,44889,44890],{"class":54,"line":118},[52,44891,1751],{"class":58},[52,44893,44894,44896,44899,44901,44903],{"class":54,"line":594},[52,44895,1756],{"class":58},[52,44897,44898],{"class":73},"'RadialGradient'",[52,44900,4407],{"class":58},[52,44902,5544],{"class":371},[52,44904,1768],{"class":58},[52,44906,44907],{"class":54,"line":600},[52,44908,1773],{"class":58},[52,44910,44911],{"class":54,"line":606},[52,44912,1778],{"class":58},[156,44914,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44916},[44917,44918],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/radialgradient",{"title":44670,"description":44678},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":44925,"title":44926,"body":44927,"category":28265,"componentType":20007,"description":44934,"extension":168,"meta":45251,"navigation":171,"path":45252,"requiresChild":171,"seo":45253,"stem":45254,"__hash__":45255},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":44928,"toc":45247},[44929,44932,44935,44937,44939,44942,44944,45245],[11,44930,44926],{"id":44931},"rectangularcoordinates",[15,44933,44934],{},"Convert polar coordinates back to rectangular space",[26061,44936],{"component":44926},[23,44938,26065],{"id":20662},[26067,44940],{":props":44941},"[{\"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\"}]",[23,44943,26073],{"id":26072},[217,44945,44946,45002,45061,45117,45175],{":tabs":1543},[43,44947,44949],{"className":45,"code":44948,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,44950,44951,44959,44966,44974,44978,44986,44994],{"__ignoreMap":48},[52,44952,44953,44955,44957],{"class":54,"line":55},[52,44954,59],{"class":58},[52,44956,63],{"class":62},[52,44958,77],{"class":58},[52,44960,44961,44963],{"class":54,"line":80},[52,44962,83],{"class":58},[52,44964,44965],{"class":62},"RectangularCoordinates\n",[52,44967,44968,44970,44972],{"class":54,"line":108},[52,44969,17026],{"class":66},[52,44971,70],{"class":58},[52,44973,27987],{"class":73},[52,44975,44976],{"class":54,"line":118},[52,44977,26109],{"class":58},[52,44979,44980,44982,44984],{"class":54,"line":594},[52,44981,2213],{"class":58},[52,44983,2216],{"class":62},[52,44985,105],{"class":58},[52,44987,44988,44990,44992],{"class":54,"line":600},[52,44989,2230],{"class":58},[52,44991,44926],{"class":62},[52,44993,77],{"class":58},[52,44995,44996,44998,45000],{"class":54,"line":606},[52,44997,121],{"class":58},[52,44999,63],{"class":62},[52,45001,77],{"class":58},[43,45003,45005],{"className":360,"code":45004,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,45006,45007,45015,45021,45033,45037,45045,45053],{"__ignoreMap":48},[52,45008,45009,45011,45013],{"class":54,"line":55},[52,45010,59],{"class":58},[52,45012,63],{"class":371},[52,45014,77],{"class":58},[52,45016,45017,45019],{"class":54,"line":80},[52,45018,83],{"class":58},[52,45020,44965],{"class":371},[52,45022,45023,45025,45027,45029,45031],{"class":54,"line":108},[52,45024,17137],{"class":66},[52,45026,70],{"class":231},[52,45028,723],{"class":58},[52,45030,5544],{"class":371},[52,45032,729],{"class":58},[52,45034,45035],{"class":54,"line":118},[52,45036,26109],{"class":58},[52,45038,45039,45041,45043],{"class":54,"line":594},[52,45040,2213],{"class":58},[52,45042,2216],{"class":371},[52,45044,105],{"class":58},[52,45046,45047,45049,45051],{"class":54,"line":600},[52,45048,2230],{"class":58},[52,45050,44926],{"class":371},[52,45052,77],{"class":58},[52,45054,45055,45057,45059],{"class":54,"line":606},[52,45056,121],{"class":58},[52,45058,63],{"class":371},[52,45060,77],{"class":58},[43,45062,45063],{"className":2507,"code":45004,"language":2509,"meta":48,"style":48},[31,45064,45065,45073,45079,45089,45093,45101,45109],{"__ignoreMap":48},[52,45066,45067,45069,45071],{"class":54,"line":55},[52,45068,59],{"class":58},[52,45070,63],{"class":371},[52,45072,77],{"class":58},[52,45074,45075,45077],{"class":54,"line":80},[52,45076,83],{"class":58},[52,45078,44965],{"class":371},[52,45080,45081,45083,45085,45087],{"class":54,"line":108},[52,45082,17137],{"class":66},[52,45084,24004],{"class":58},[52,45086,5544],{"class":371},[52,45088,729],{"class":58},[52,45090,45091],{"class":54,"line":118},[52,45092,26109],{"class":58},[52,45094,45095,45097,45099],{"class":54,"line":594},[52,45096,2213],{"class":58},[52,45098,2216],{"class":371},[52,45100,105],{"class":58},[52,45102,45103,45105,45107],{"class":54,"line":600},[52,45104,2230],{"class":58},[52,45106,44926],{"class":371},[52,45108,77],{"class":58},[52,45110,45111,45113,45115],{"class":54,"line":606},[52,45112,121],{"class":58},[52,45114,63],{"class":371},[52,45116,77],{"class":58},[43,45118,45119],{"className":419,"code":45004,"language":420,"meta":48,"style":48},[31,45120,45121,45129,45135,45147,45151,45159,45167],{"__ignoreMap":48},[52,45122,45123,45125,45127],{"class":54,"line":55},[52,45124,59],{"class":58},[52,45126,63],{"class":371},[52,45128,77],{"class":58},[52,45130,45131,45133],{"class":54,"line":80},[52,45132,83],{"class":58},[52,45134,44965],{"class":371},[52,45136,45137,45139,45141,45143,45145],{"class":54,"line":108},[52,45138,17137],{"class":66},[52,45140,70],{"class":231},[52,45142,723],{"class":58},[52,45144,5544],{"class":371},[52,45146,729],{"class":58},[52,45148,45149],{"class":54,"line":118},[52,45150,26109],{"class":58},[52,45152,45153,45155,45157],{"class":54,"line":594},[52,45154,2213],{"class":58},[52,45156,2216],{"class":371},[52,45158,105],{"class":58},[52,45160,45161,45163,45165],{"class":54,"line":600},[52,45162,2230],{"class":58},[52,45164,44926],{"class":371},[52,45166,77],{"class":58},[52,45168,45169,45171,45173],{"class":54,"line":606},[52,45170,121],{"class":58},[52,45172,63],{"class":371},[52,45174,77],{"class":58},[43,45176,45178],{"className":222,"code":45177,"language":224,"meta":48,"style":48},"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",[31,45179,45180,45190,45194,45208,45212,45225,45233,45237,45241],{"__ignoreMap":48},[52,45181,45182,45184,45186,45188],{"class":54,"line":55},[52,45183,232],{"class":231},[52,45185,8385],{"class":58},[52,45187,238],{"class":231},[52,45189,8390],{"class":73},[52,45191,45192],{"class":54,"line":80},[52,45193,597],{"emptyLinePlaceholder":171},[52,45195,45196,45198,45200,45202,45204,45206],{"class":54,"line":108},[52,45197,1721],{"class":231},[52,45199,1724],{"class":371},[52,45201,1727],{"class":231},[52,45203,1730],{"class":231},[52,45205,1733],{"class":66},[52,45207,1736],{"class":58},[52,45209,45210],{"class":54,"line":118},[52,45211,1751],{"class":58},[52,45213,45214,45216,45219,45221,45223],{"class":54,"line":594},[52,45215,1756],{"class":58},[52,45217,45218],{"class":73},"'RectangularCoordinates'",[52,45220,26354],{"class":58},[52,45222,5544],{"class":371},[52,45224,4412],{"class":58},[52,45226,45227,45229,45231],{"class":54,"line":600},[52,45228,3880],{"class":58},[52,45230,2869],{"class":73},[52,45232,2129],{"class":58},[52,45234,45235],{"class":54,"line":606},[52,45236,3897],{"class":58},[52,45238,45239],{"class":54,"line":653},[52,45240,1773],{"class":58},[52,45242,45243],{"class":54,"line":662},[52,45244,1778],{"class":58},[156,45246,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45248},[45249,45250],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/rectangularcoordinates",{"title":44926,"description":44934},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":45257,"title":45258,"body":45259,"category":29887,"componentType":20001,"description":45266,"extension":168,"meta":45543,"navigation":171,"path":45544,"requiresChild":26923,"seo":45545,"stem":45546,"__hash__":45547},"components/docs/components/Ring.md","Ring",{"type":8,"value":45260,"toc":45539},[45261,45264,45267,45269,45271,45274,45276,45537],[11,45262,45258],{"id":45263},"ring",[15,45265,45266],{},"Annular ring (donut) with adjustable radius and band thickness",[26061,45268],{"component":45258},[23,45270,26065],{"id":20662},[26067,45272],{":props":45273},"[{\"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\"}]",[23,45275,26073],{"id":26072},[217,45277,45278,45326,45377,45425,45475],{":tabs":1543},[43,45279,45281],{"className":45,"code":45280,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,45282,45283,45291,45298,45306,45314,45318],{"__ignoreMap":48},[52,45284,45285,45287,45289],{"class":54,"line":55},[52,45286,59],{"class":58},[52,45288,63],{"class":62},[52,45290,77],{"class":58},[52,45292,45293,45295],{"class":54,"line":80},[52,45294,83],{"class":58},[52,45296,45297],{"class":62},"Ring\n",[52,45299,45300,45302,45304],{"class":54,"line":108},[52,45301,6504],{"class":66},[52,45303,70],{"class":58},[52,45305,6460],{"class":73},[52,45307,45308,45310,45312],{"class":54,"line":118},[52,45309,14057],{"class":66},[52,45311,70],{"class":58},[52,45313,30759],{"class":73},[52,45315,45316],{"class":54,"line":594},[52,45317,1224],{"class":58},[52,45319,45320,45322,45324],{"class":54,"line":600},[52,45321,121],{"class":58},[52,45323,63],{"class":62},[52,45325,77],{"class":58},[43,45327,45329],{"className":360,"code":45328,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,45330,45331,45339,45345,45353,45365,45369],{"__ignoreMap":48},[52,45332,45333,45335,45337],{"class":54,"line":55},[52,45334,59],{"class":58},[52,45336,63],{"class":371},[52,45338,77],{"class":58},[52,45340,45341,45343],{"class":54,"line":80},[52,45342,83],{"class":58},[52,45344,45297],{"class":371},[52,45346,45347,45349,45351],{"class":54,"line":108},[52,45348,6504],{"class":66},[52,45350,70],{"class":231},[52,45352,6460],{"class":73},[52,45354,45355,45357,45359,45361,45363],{"class":54,"line":118},[52,45356,6514],{"class":66},[52,45358,70],{"class":231},[52,45360,723],{"class":58},[52,45362,18637],{"class":371},[52,45364,729],{"class":58},[52,45366,45367],{"class":54,"line":594},[52,45368,1224],{"class":58},[52,45370,45371,45373,45375],{"class":54,"line":600},[52,45372,121],{"class":58},[52,45374,63],{"class":371},[52,45376,77],{"class":58},[43,45378,45379],{"className":2507,"code":45328,"language":2509,"meta":48,"style":48},[31,45380,45381,45389,45395,45403,45413,45417],{"__ignoreMap":48},[52,45382,45383,45385,45387],{"class":54,"line":55},[52,45384,59],{"class":58},[52,45386,63],{"class":371},[52,45388,77],{"class":58},[52,45390,45391,45393],{"class":54,"line":80},[52,45392,83],{"class":58},[52,45394,45297],{"class":371},[52,45396,45397,45399,45401],{"class":54,"line":108},[52,45398,6504],{"class":66},[52,45400,70],{"class":58},[52,45402,6460],{"class":73},[52,45404,45405,45407,45409,45411],{"class":54,"line":118},[52,45406,6514],{"class":66},[52,45408,24004],{"class":58},[52,45410,18637],{"class":371},[52,45412,729],{"class":58},[52,45414,45415],{"class":54,"line":594},[52,45416,1224],{"class":58},[52,45418,45419,45421,45423],{"class":54,"line":600},[52,45420,121],{"class":58},[52,45422,63],{"class":371},[52,45424,77],{"class":58},[43,45426,45427],{"className":419,"code":45328,"language":420,"meta":48,"style":48},[31,45428,45429,45437,45443,45451,45463,45467],{"__ignoreMap":48},[52,45430,45431,45433,45435],{"class":54,"line":55},[52,45432,59],{"class":58},[52,45434,63],{"class":371},[52,45436,77],{"class":58},[52,45438,45439,45441],{"class":54,"line":80},[52,45440,83],{"class":58},[52,45442,45297],{"class":371},[52,45444,45445,45447,45449],{"class":54,"line":108},[52,45446,6504],{"class":66},[52,45448,70],{"class":231},[52,45450,6460],{"class":73},[52,45452,45453,45455,45457,45459,45461],{"class":54,"line":118},[52,45454,6514],{"class":66},[52,45456,70],{"class":231},[52,45458,723],{"class":58},[52,45460,18637],{"class":371},[52,45462,729],{"class":58},[52,45464,45465],{"class":54,"line":594},[52,45466,1224],{"class":58},[52,45468,45469,45471,45473],{"class":54,"line":600},[52,45470,121],{"class":58},[52,45472,63],{"class":371},[52,45474,77],{"class":58},[43,45476,45478],{"className":222,"code":45477,"language":224,"meta":48,"style":48},"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",[31,45479,45480,45490,45494,45508,45512,45529,45533],{"__ignoreMap":48},[52,45481,45482,45484,45486,45488],{"class":54,"line":55},[52,45483,232],{"class":231},[52,45485,8385],{"class":58},[52,45487,238],{"class":231},[52,45489,8390],{"class":73},[52,45491,45492],{"class":54,"line":80},[52,45493,597],{"emptyLinePlaceholder":171},[52,45495,45496,45498,45500,45502,45504,45506],{"class":54,"line":108},[52,45497,1721],{"class":231},[52,45499,1724],{"class":371},[52,45501,1727],{"class":231},[52,45503,1730],{"class":231},[52,45505,1733],{"class":66},[52,45507,1736],{"class":58},[52,45509,45510],{"class":54,"line":118},[52,45511,1751],{"class":58},[52,45513,45514,45516,45519,45521,45523,45525,45527],{"class":54,"line":594},[52,45515,1756],{"class":58},[52,45517,45518],{"class":73},"'Ring'",[52,45520,1762],{"class":58},[52,45522,7039],{"class":73},[52,45524,3431],{"class":58},[52,45526,18637],{"class":371},[52,45528,1768],{"class":58},[52,45530,45531],{"class":54,"line":600},[52,45532,1773],{"class":58},[52,45534,45535],{"class":54,"line":606},[52,45536,1778],{"class":58},[156,45538,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45540},[45541,45542],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/ring",{"title":45258,"description":45266},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":45549,"title":45550,"body":45551,"category":26920,"componentType":20001,"description":45558,"extension":168,"meta":45743,"navigation":171,"path":45744,"requiresChild":26923,"seo":45745,"stem":45746,"__hash__":45747},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":45552,"toc":45739},[45553,45556,45559,45561,45563,45566,45568,45737],[11,45554,45550],{"id":45555},"ripples",[15,45557,45558],{},"Concentric animated ripples emanating from a point",[26061,45560],{"component":45550},[23,45562,26065],{"id":20662},[26067,45564],{":props":45565},"[{\"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\"}]",[23,45567,26073],{"id":26072},[217,45569,45570,45599,45627,45655,45683],{":tabs":1543},[43,45571,45573],{"className":45,"code":45572,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,45574,45575,45583,45591],{"__ignoreMap":48},[52,45576,45577,45579,45581],{"class":54,"line":55},[52,45578,59],{"class":58},[52,45580,63],{"class":62},[52,45582,77],{"class":58},[52,45584,45585,45587,45589],{"class":54,"line":80},[52,45586,83],{"class":58},[52,45588,45550],{"class":62},[52,45590,105],{"class":58},[52,45592,45593,45595,45597],{"class":54,"line":108},[52,45594,121],{"class":58},[52,45596,63],{"class":62},[52,45598,77],{"class":58},[43,45600,45601],{"className":360,"code":45572,"language":362,"meta":48,"style":48},[31,45602,45603,45611,45619],{"__ignoreMap":48},[52,45604,45605,45607,45609],{"class":54,"line":55},[52,45606,59],{"class":58},[52,45608,63],{"class":371},[52,45610,77],{"class":58},[52,45612,45613,45615,45617],{"class":54,"line":80},[52,45614,83],{"class":58},[52,45616,45550],{"class":371},[52,45618,105],{"class":58},[52,45620,45621,45623,45625],{"class":54,"line":108},[52,45622,121],{"class":58},[52,45624,63],{"class":371},[52,45626,77],{"class":58},[43,45628,45629],{"className":2507,"code":45572,"language":2509,"meta":48,"style":48},[31,45630,45631,45639,45647],{"__ignoreMap":48},[52,45632,45633,45635,45637],{"class":54,"line":55},[52,45634,59],{"class":58},[52,45636,63],{"class":371},[52,45638,77],{"class":58},[52,45640,45641,45643,45645],{"class":54,"line":80},[52,45642,83],{"class":58},[52,45644,45550],{"class":371},[52,45646,105],{"class":58},[52,45648,45649,45651,45653],{"class":54,"line":108},[52,45650,121],{"class":58},[52,45652,63],{"class":371},[52,45654,77],{"class":58},[43,45656,45657],{"className":419,"code":45572,"language":420,"meta":48,"style":48},[31,45658,45659,45667,45675],{"__ignoreMap":48},[52,45660,45661,45663,45665],{"class":54,"line":55},[52,45662,59],{"class":58},[52,45664,63],{"class":371},[52,45666,77],{"class":58},[52,45668,45669,45671,45673],{"class":54,"line":80},[52,45670,83],{"class":58},[52,45672,45550],{"class":371},[52,45674,105],{"class":58},[52,45676,45677,45679,45681],{"class":54,"line":108},[52,45678,121],{"class":58},[52,45680,63],{"class":371},[52,45682,77],{"class":58},[43,45684,45686],{"className":222,"code":45685,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ripples', props: {} }\n ]\n})\n",[31,45687,45688,45698,45702,45716,45720,45729,45733],{"__ignoreMap":48},[52,45689,45690,45692,45694,45696],{"class":54,"line":55},[52,45691,232],{"class":231},[52,45693,8385],{"class":58},[52,45695,238],{"class":231},[52,45697,8390],{"class":73},[52,45699,45700],{"class":54,"line":80},[52,45701,597],{"emptyLinePlaceholder":171},[52,45703,45704,45706,45708,45710,45712,45714],{"class":54,"line":108},[52,45705,1721],{"class":231},[52,45707,1724],{"class":371},[52,45709,1727],{"class":231},[52,45711,1730],{"class":231},[52,45713,1733],{"class":66},[52,45715,1736],{"class":58},[52,45717,45718],{"class":54,"line":118},[52,45719,1751],{"class":58},[52,45721,45722,45724,45727],{"class":54,"line":594},[52,45723,1756],{"class":58},[52,45725,45726],{"class":73},"'Ripples'",[52,45728,2129],{"class":58},[52,45730,45731],{"class":54,"line":600},[52,45732,1773],{"class":58},[52,45734,45735],{"class":54,"line":606},[52,45736,1778],{"class":58},[156,45738,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":45740},[45741,45742],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/ripples",{"title":45550,"description":45558},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":45749,"title":45750,"body":45751,"category":29887,"componentType":20001,"description":45758,"extension":168,"meta":45988,"navigation":171,"path":45989,"requiresChild":26923,"seo":45990,"stem":45991,"__hash__":45992},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":45752,"toc":45984},[45753,45756,45759,45761,45763,45766,45768,45982],[11,45754,45750],{"id":45755},"roundedrect",[15,45757,45758],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26061,45760],{"component":45750},[23,45762,26065],{"id":20662},[26067,45764],{":props":45765},"[{\"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\"}]",[23,45767,26073],{"id":26072},[217,45769,45770,45810,45848,45886,45924],{":tabs":1543},[43,45771,45773],{"className":45,"code":45772,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,45774,45775,45783,45790,45798,45802],{"__ignoreMap":48},[52,45776,45777,45779,45781],{"class":54,"line":55},[52,45778,59],{"class":58},[52,45780,63],{"class":62},[52,45782,77],{"class":58},[52,45784,45785,45787],{"class":54,"line":80},[52,45786,83],{"class":58},[52,45788,45789],{"class":62},"RoundedRect\n",[52,45791,45792,45794,45796],{"class":54,"line":108},[52,45793,6504],{"class":66},[52,45795,70],{"class":58},[52,45797,6460],{"class":73},[52,45799,45800],{"class":54,"line":118},[52,45801,1224],{"class":58},[52,45803,45804,45806,45808],{"class":54,"line":594},[52,45805,121],{"class":58},[52,45807,63],{"class":62},[52,45809,77],{"class":58},[43,45811,45812],{"className":360,"code":45772,"language":362,"meta":48,"style":48},[31,45813,45814,45822,45828,45836,45840],{"__ignoreMap":48},[52,45815,45816,45818,45820],{"class":54,"line":55},[52,45817,59],{"class":58},[52,45819,63],{"class":371},[52,45821,77],{"class":58},[52,45823,45824,45826],{"class":54,"line":80},[52,45825,83],{"class":58},[52,45827,45789],{"class":371},[52,45829,45830,45832,45834],{"class":54,"line":108},[52,45831,6504],{"class":66},[52,45833,70],{"class":231},[52,45835,6460],{"class":73},[52,45837,45838],{"class":54,"line":118},[52,45839,1224],{"class":58},[52,45841,45842,45844,45846],{"class":54,"line":594},[52,45843,121],{"class":58},[52,45845,63],{"class":371},[52,45847,77],{"class":58},[43,45849,45850],{"className":2507,"code":45772,"language":2509,"meta":48,"style":48},[31,45851,45852,45860,45866,45874,45878],{"__ignoreMap":48},[52,45853,45854,45856,45858],{"class":54,"line":55},[52,45855,59],{"class":58},[52,45857,63],{"class":371},[52,45859,77],{"class":58},[52,45861,45862,45864],{"class":54,"line":80},[52,45863,83],{"class":58},[52,45865,45789],{"class":371},[52,45867,45868,45870,45872],{"class":54,"line":108},[52,45869,6504],{"class":66},[52,45871,70],{"class":58},[52,45873,6460],{"class":73},[52,45875,45876],{"class":54,"line":118},[52,45877,1224],{"class":58},[52,45879,45880,45882,45884],{"class":54,"line":594},[52,45881,121],{"class":58},[52,45883,63],{"class":371},[52,45885,77],{"class":58},[43,45887,45888],{"className":419,"code":45772,"language":420,"meta":48,"style":48},[31,45889,45890,45898,45904,45912,45916],{"__ignoreMap":48},[52,45891,45892,45894,45896],{"class":54,"line":55},[52,45893,59],{"class":58},[52,45895,63],{"class":371},[52,45897,77],{"class":58},[52,45899,45900,45902],{"class":54,"line":80},[52,45901,83],{"class":58},[52,45903,45789],{"class":371},[52,45905,45906,45908,45910],{"class":54,"line":108},[52,45907,6504],{"class":66},[52,45909,70],{"class":231},[52,45911,6460],{"class":73},[52,45913,45914],{"class":54,"line":118},[52,45915,1224],{"class":58},[52,45917,45918,45920,45922],{"class":54,"line":594},[52,45919,121],{"class":58},[52,45921,63],{"class":371},[52,45923,77],{"class":58},[43,45925,45927],{"className":222,"code":45926,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'RoundedRect', props: { color: '#ffffff' } }\n ]\n})\n",[31,45928,45929,45939,45943,45957,45961,45974,45978],{"__ignoreMap":48},[52,45930,45931,45933,45935,45937],{"class":54,"line":55},[52,45932,232],{"class":231},[52,45934,8385],{"class":58},[52,45936,238],{"class":231},[52,45938,8390],{"class":73},[52,45940,45941],{"class":54,"line":80},[52,45942,597],{"emptyLinePlaceholder":171},[52,45944,45945,45947,45949,45951,45953,45955],{"class":54,"line":108},[52,45946,1721],{"class":231},[52,45948,1724],{"class":371},[52,45950,1727],{"class":231},[52,45952,1730],{"class":231},[52,45954,1733],{"class":66},[52,45956,1736],{"class":58},[52,45958,45959],{"class":54,"line":118},[52,45960,1751],{"class":58},[52,45962,45963,45965,45968,45970,45972],{"class":54,"line":594},[52,45964,1756],{"class":58},[52,45966,45967],{"class":73},"'RoundedRect'",[52,45969,1762],{"class":58},[52,45971,7039],{"class":73},[52,45973,1768],{"class":58},[52,45975,45976],{"class":54,"line":600},[52,45977,1773],{"class":58},[52,45979,45980],{"class":54,"line":606},[52,45981,1778],{"class":58},[156,45983,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45985},[45986,45987],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/roundedrect",{"title":45750,"description":45758},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":45994,"title":45995,"body":45996,"category":27931,"componentType":20007,"description":46002,"extension":168,"meta":46319,"navigation":171,"path":46320,"requiresChild":171,"seo":46321,"stem":46322,"__hash__":46323},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":45997,"toc":46315},[45998,46000,46003,46005,46007,46010,46012,46313],[11,45999,45995],{"id":4926},[15,46001,46002],{},"Adjust color saturation intensity",[26061,46004],{"component":45995},[23,46006,26065],{"id":20662},[26067,46008],{":props":46009},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,46011,26073],{"id":26072},[217,46013,46014,46070,46129,46185,46243],{":tabs":1543},[43,46015,46017],{"className":45,"code":46016,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,46018,46019,46027,46034,46042,46046,46054,46062],{"__ignoreMap":48},[52,46020,46021,46023,46025],{"class":54,"line":55},[52,46022,59],{"class":58},[52,46024,63],{"class":62},[52,46026,77],{"class":58},[52,46028,46029,46031],{"class":54,"line":80},[52,46030,83],{"class":58},[52,46032,46033],{"class":62},"Saturation\n",[52,46035,46036,46038,46040],{"class":54,"line":108},[52,46037,17026],{"class":66},[52,46039,70],{"class":58},[52,46041,27987],{"class":73},[52,46043,46044],{"class":54,"line":118},[52,46045,26109],{"class":58},[52,46047,46048,46050,46052],{"class":54,"line":594},[52,46049,2213],{"class":58},[52,46051,2216],{"class":62},[52,46053,105],{"class":58},[52,46055,46056,46058,46060],{"class":54,"line":600},[52,46057,2230],{"class":58},[52,46059,45995],{"class":62},[52,46061,77],{"class":58},[52,46063,46064,46066,46068],{"class":54,"line":606},[52,46065,121],{"class":58},[52,46067,63],{"class":62},[52,46069,77],{"class":58},[43,46071,46073],{"className":360,"code":46072,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,46074,46075,46083,46089,46101,46105,46113,46121],{"__ignoreMap":48},[52,46076,46077,46079,46081],{"class":54,"line":55},[52,46078,59],{"class":58},[52,46080,63],{"class":371},[52,46082,77],{"class":58},[52,46084,46085,46087],{"class":54,"line":80},[52,46086,83],{"class":58},[52,46088,46033],{"class":371},[52,46090,46091,46093,46095,46097,46099],{"class":54,"line":108},[52,46092,17137],{"class":66},[52,46094,70],{"class":231},[52,46096,723],{"class":58},[52,46098,5544],{"class":371},[52,46100,729],{"class":58},[52,46102,46103],{"class":54,"line":118},[52,46104,26109],{"class":58},[52,46106,46107,46109,46111],{"class":54,"line":594},[52,46108,2213],{"class":58},[52,46110,2216],{"class":371},[52,46112,105],{"class":58},[52,46114,46115,46117,46119],{"class":54,"line":600},[52,46116,2230],{"class":58},[52,46118,45995],{"class":371},[52,46120,77],{"class":58},[52,46122,46123,46125,46127],{"class":54,"line":606},[52,46124,121],{"class":58},[52,46126,63],{"class":371},[52,46128,77],{"class":58},[43,46130,46131],{"className":2507,"code":46072,"language":2509,"meta":48,"style":48},[31,46132,46133,46141,46147,46157,46161,46169,46177],{"__ignoreMap":48},[52,46134,46135,46137,46139],{"class":54,"line":55},[52,46136,59],{"class":58},[52,46138,63],{"class":371},[52,46140,77],{"class":58},[52,46142,46143,46145],{"class":54,"line":80},[52,46144,83],{"class":58},[52,46146,46033],{"class":371},[52,46148,46149,46151,46153,46155],{"class":54,"line":108},[52,46150,17137],{"class":66},[52,46152,24004],{"class":58},[52,46154,5544],{"class":371},[52,46156,729],{"class":58},[52,46158,46159],{"class":54,"line":118},[52,46160,26109],{"class":58},[52,46162,46163,46165,46167],{"class":54,"line":594},[52,46164,2213],{"class":58},[52,46166,2216],{"class":371},[52,46168,105],{"class":58},[52,46170,46171,46173,46175],{"class":54,"line":600},[52,46172,2230],{"class":58},[52,46174,45995],{"class":371},[52,46176,77],{"class":58},[52,46178,46179,46181,46183],{"class":54,"line":606},[52,46180,121],{"class":58},[52,46182,63],{"class":371},[52,46184,77],{"class":58},[43,46186,46187],{"className":419,"code":46072,"language":420,"meta":48,"style":48},[31,46188,46189,46197,46203,46215,46219,46227,46235],{"__ignoreMap":48},[52,46190,46191,46193,46195],{"class":54,"line":55},[52,46192,59],{"class":58},[52,46194,63],{"class":371},[52,46196,77],{"class":58},[52,46198,46199,46201],{"class":54,"line":80},[52,46200,83],{"class":58},[52,46202,46033],{"class":371},[52,46204,46205,46207,46209,46211,46213],{"class":54,"line":108},[52,46206,17137],{"class":66},[52,46208,70],{"class":231},[52,46210,723],{"class":58},[52,46212,5544],{"class":371},[52,46214,729],{"class":58},[52,46216,46217],{"class":54,"line":118},[52,46218,26109],{"class":58},[52,46220,46221,46223,46225],{"class":54,"line":594},[52,46222,2213],{"class":58},[52,46224,2216],{"class":371},[52,46226,105],{"class":58},[52,46228,46229,46231,46233],{"class":54,"line":600},[52,46230,2230],{"class":58},[52,46232,45995],{"class":371},[52,46234,77],{"class":58},[52,46236,46237,46239,46241],{"class":54,"line":606},[52,46238,121],{"class":58},[52,46240,63],{"class":371},[52,46242,77],{"class":58},[43,46244,46246],{"className":222,"code":46245,"language":224,"meta":48,"style":48},"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",[31,46247,46248,46258,46262,46276,46280,46293,46301,46305,46309],{"__ignoreMap":48},[52,46249,46250,46252,46254,46256],{"class":54,"line":55},[52,46251,232],{"class":231},[52,46253,8385],{"class":58},[52,46255,238],{"class":231},[52,46257,8390],{"class":73},[52,46259,46260],{"class":54,"line":80},[52,46261,597],{"emptyLinePlaceholder":171},[52,46263,46264,46266,46268,46270,46272,46274],{"class":54,"line":108},[52,46265,1721],{"class":231},[52,46267,1724],{"class":371},[52,46269,1727],{"class":231},[52,46271,1730],{"class":231},[52,46273,1733],{"class":66},[52,46275,1736],{"class":58},[52,46277,46278],{"class":54,"line":118},[52,46279,1751],{"class":58},[52,46281,46282,46284,46287,46289,46291],{"class":54,"line":594},[52,46283,1756],{"class":58},[52,46285,46286],{"class":73},"'Saturation'",[52,46288,26354],{"class":58},[52,46290,5544],{"class":371},[52,46292,4412],{"class":58},[52,46294,46295,46297,46299],{"class":54,"line":600},[52,46296,3880],{"class":58},[52,46298,2869],{"class":73},[52,46300,2129],{"class":58},[52,46302,46303],{"class":54,"line":606},[52,46304,3897],{"class":58},[52,46306,46307],{"class":54,"line":653},[52,46308,1773],{"class":58},[52,46310,46311],{"class":54,"line":662},[52,46312,1778],{"class":58},[156,46314,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46316},[46317,46318],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/saturation",{"title":45995,"description":46002},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":46325,"title":46326,"body":46327,"category":27931,"componentType":20007,"description":46334,"extension":168,"meta":46595,"navigation":171,"path":46596,"requiresChild":171,"seo":46597,"stem":46598,"__hash__":46599},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":46328,"toc":46591},[46329,46332,46335,46337,46339,46342,46344,46589],[11,46330,46326],{"id":46331},"sharpness",[15,46333,46334],{},"Adjust image sharpness using a convolution kernel",[26061,46336],{"component":46326},[23,46338,26065],{"id":20662},[26067,46340],{":props":46341},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,46343,26073],{"id":26072},[217,46345,46346,46391,46435,46479,46523],{":tabs":1543},[43,46347,46349],{"className":45,"code":46348,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,46350,46351,46359,46367,46375,46383],{"__ignoreMap":48},[52,46352,46353,46355,46357],{"class":54,"line":55},[52,46354,59],{"class":58},[52,46356,63],{"class":62},[52,46358,77],{"class":58},[52,46360,46361,46363,46365],{"class":54,"line":80},[52,46362,83],{"class":58},[52,46364,46326],{"class":62},[52,46366,77],{"class":58},[52,46368,46369,46371,46373],{"class":54,"line":108},[52,46370,2213],{"class":58},[52,46372,2216],{"class":62},[52,46374,105],{"class":58},[52,46376,46377,46379,46381],{"class":54,"line":118},[52,46378,2230],{"class":58},[52,46380,46326],{"class":62},[52,46382,77],{"class":58},[52,46384,46385,46387,46389],{"class":54,"line":594},[52,46386,121],{"class":58},[52,46388,63],{"class":62},[52,46390,77],{"class":58},[43,46392,46393],{"className":360,"code":46348,"language":362,"meta":48,"style":48},[31,46394,46395,46403,46411,46419,46427],{"__ignoreMap":48},[52,46396,46397,46399,46401],{"class":54,"line":55},[52,46398,59],{"class":58},[52,46400,63],{"class":371},[52,46402,77],{"class":58},[52,46404,46405,46407,46409],{"class":54,"line":80},[52,46406,83],{"class":58},[52,46408,46326],{"class":371},[52,46410,77],{"class":58},[52,46412,46413,46415,46417],{"class":54,"line":108},[52,46414,2213],{"class":58},[52,46416,2216],{"class":371},[52,46418,105],{"class":58},[52,46420,46421,46423,46425],{"class":54,"line":118},[52,46422,2230],{"class":58},[52,46424,46326],{"class":371},[52,46426,77],{"class":58},[52,46428,46429,46431,46433],{"class":54,"line":594},[52,46430,121],{"class":58},[52,46432,63],{"class":371},[52,46434,77],{"class":58},[43,46436,46437],{"className":2507,"code":46348,"language":2509,"meta":48,"style":48},[31,46438,46439,46447,46455,46463,46471],{"__ignoreMap":48},[52,46440,46441,46443,46445],{"class":54,"line":55},[52,46442,59],{"class":58},[52,46444,63],{"class":371},[52,46446,77],{"class":58},[52,46448,46449,46451,46453],{"class":54,"line":80},[52,46450,83],{"class":58},[52,46452,46326],{"class":371},[52,46454,77],{"class":58},[52,46456,46457,46459,46461],{"class":54,"line":108},[52,46458,2213],{"class":58},[52,46460,2216],{"class":371},[52,46462,105],{"class":58},[52,46464,46465,46467,46469],{"class":54,"line":118},[52,46466,2230],{"class":58},[52,46468,46326],{"class":371},[52,46470,77],{"class":58},[52,46472,46473,46475,46477],{"class":54,"line":594},[52,46474,121],{"class":58},[52,46476,63],{"class":371},[52,46478,77],{"class":58},[43,46480,46481],{"className":419,"code":46348,"language":420,"meta":48,"style":48},[31,46482,46483,46491,46499,46507,46515],{"__ignoreMap":48},[52,46484,46485,46487,46489],{"class":54,"line":55},[52,46486,59],{"class":58},[52,46488,63],{"class":371},[52,46490,77],{"class":58},[52,46492,46493,46495,46497],{"class":54,"line":80},[52,46494,83],{"class":58},[52,46496,46326],{"class":371},[52,46498,77],{"class":58},[52,46500,46501,46503,46505],{"class":54,"line":108},[52,46502,2213],{"class":58},[52,46504,2216],{"class":371},[52,46506,105],{"class":58},[52,46508,46509,46511,46513],{"class":54,"line":118},[52,46510,2230],{"class":58},[52,46512,46326],{"class":371},[52,46514,77],{"class":58},[52,46516,46517,46519,46521],{"class":54,"line":594},[52,46518,121],{"class":58},[52,46520,63],{"class":371},[52,46522,77],{"class":58},[43,46524,46526],{"className":222,"code":46525,"language":224,"meta":48,"style":48},"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",[31,46527,46528,46538,46542,46556,46560,46569,46577,46581,46585],{"__ignoreMap":48},[52,46529,46530,46532,46534,46536],{"class":54,"line":55},[52,46531,232],{"class":231},[52,46533,8385],{"class":58},[52,46535,238],{"class":231},[52,46537,8390],{"class":73},[52,46539,46540],{"class":54,"line":80},[52,46541,597],{"emptyLinePlaceholder":171},[52,46543,46544,46546,46548,46550,46552,46554],{"class":54,"line":108},[52,46545,1721],{"class":231},[52,46547,1724],{"class":371},[52,46549,1727],{"class":231},[52,46551,1730],{"class":231},[52,46553,1733],{"class":66},[52,46555,1736],{"class":58},[52,46557,46558],{"class":54,"line":118},[52,46559,1751],{"class":58},[52,46561,46562,46564,46567],{"class":54,"line":594},[52,46563,1756],{"class":58},[52,46565,46566],{"class":73},"'Sharpness'",[52,46568,3875],{"class":58},[52,46570,46571,46573,46575],{"class":54,"line":600},[52,46572,3880],{"class":58},[52,46574,2869],{"class":73},[52,46576,2129],{"class":58},[52,46578,46579],{"class":54,"line":606},[52,46580,3897],{"class":58},[52,46582,46583],{"class":54,"line":653},[52,46584,1773],{"class":58},[52,46586,46587],{"class":54,"line":662},[52,46588,1778],{"class":58},[156,46590,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":46592},[46593,46594],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/sharpness",{"title":46326,"description":46334},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":46601,"title":46602,"body":46603,"category":29321,"componentType":20007,"description":46610,"extension":168,"meta":46975,"navigation":171,"path":46976,"requiresChild":171,"seo":46977,"stem":46978,"__hash__":46979},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":46604,"toc":46971},[46605,46608,46611,46613,46615,46618,46620,46969],[11,46606,46602],{"id":46607},"shatter",[15,46609,46610],{},"Broken glass effect with tectonic plate displacement",[26061,46612],{"component":46602},[23,46614,26065],{"id":20662},[26067,46616],{":props":46617},"[{\"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\"}]",[23,46619,26073],{"id":26072},[217,46621,46622,46687,46759,46825,46895],{":tabs":1543},[43,46623,46625],{"className":45,"code":46624,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CShatter\n :intensity=\"4\"\n :radius=\"0.4\"\n >\n \u003CCircle />\n \u003C/Shatter>\n\u003C/Shader>\n",[31,46626,46627,46635,46642,46651,46659,46663,46671,46679],{"__ignoreMap":48},[52,46628,46629,46631,46633],{"class":54,"line":55},[52,46630,59],{"class":58},[52,46632,63],{"class":62},[52,46634,77],{"class":58},[52,46636,46637,46639],{"class":54,"line":80},[52,46638,83],{"class":58},[52,46640,46641],{"class":62},"Shatter\n",[52,46643,46644,46646,46648],{"class":54,"line":108},[52,46645,17026],{"class":66},[52,46647,70],{"class":58},[52,46649,46650],{"class":73},"\"4\"\n",[52,46652,46653,46655,46657],{"class":54,"line":118},[52,46654,14057],{"class":66},[52,46656,70],{"class":58},[52,46658,35424],{"class":73},[52,46660,46661],{"class":54,"line":594},[52,46662,26109],{"class":58},[52,46664,46665,46667,46669],{"class":54,"line":600},[52,46666,2213],{"class":58},[52,46668,2216],{"class":62},[52,46670,105],{"class":58},[52,46672,46673,46675,46677],{"class":54,"line":606},[52,46674,2230],{"class":58},[52,46676,46602],{"class":62},[52,46678,77],{"class":58},[52,46680,46681,46683,46685],{"class":54,"line":653},[52,46682,121],{"class":58},[52,46684,63],{"class":62},[52,46686,77],{"class":58},[43,46688,46690],{"className":360,"code":46689,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CShatter\n intensity={4}\n radius={0.4}\n >\n \u003CCircle />\n \u003C/Shatter>\n\u003C/Shader>\n",[31,46691,46692,46700,46706,46719,46731,46735,46743,46751],{"__ignoreMap":48},[52,46693,46694,46696,46698],{"class":54,"line":55},[52,46695,59],{"class":58},[52,46697,63],{"class":371},[52,46699,77],{"class":58},[52,46701,46702,46704],{"class":54,"line":80},[52,46703,83],{"class":58},[52,46705,46641],{"class":371},[52,46707,46708,46710,46712,46714,46717],{"class":54,"line":108},[52,46709,17137],{"class":66},[52,46711,70],{"class":231},[52,46713,723],{"class":58},[52,46715,46716],{"class":371},"4",[52,46718,729],{"class":58},[52,46720,46721,46723,46725,46727,46729],{"class":54,"line":118},[52,46722,6514],{"class":66},[52,46724,70],{"class":231},[52,46726,723],{"class":58},[52,46728,5116],{"class":371},[52,46730,729],{"class":58},[52,46732,46733],{"class":54,"line":594},[52,46734,26109],{"class":58},[52,46736,46737,46739,46741],{"class":54,"line":600},[52,46738,2213],{"class":58},[52,46740,2216],{"class":371},[52,46742,105],{"class":58},[52,46744,46745,46747,46749],{"class":54,"line":606},[52,46746,2230],{"class":58},[52,46748,46602],{"class":371},[52,46750,77],{"class":58},[52,46752,46753,46755,46757],{"class":54,"line":653},[52,46754,121],{"class":58},[52,46756,63],{"class":371},[52,46758,77],{"class":58},[43,46760,46761],{"className":2507,"code":46689,"language":2509,"meta":48,"style":48},[31,46762,46763,46771,46777,46787,46797,46801,46809,46817],{"__ignoreMap":48},[52,46764,46765,46767,46769],{"class":54,"line":55},[52,46766,59],{"class":58},[52,46768,63],{"class":371},[52,46770,77],{"class":58},[52,46772,46773,46775],{"class":54,"line":80},[52,46774,83],{"class":58},[52,46776,46641],{"class":371},[52,46778,46779,46781,46783,46785],{"class":54,"line":108},[52,46780,17137],{"class":66},[52,46782,24004],{"class":58},[52,46784,46716],{"class":371},[52,46786,729],{"class":58},[52,46788,46789,46791,46793,46795],{"class":54,"line":118},[52,46790,6514],{"class":66},[52,46792,24004],{"class":58},[52,46794,5116],{"class":371},[52,46796,729],{"class":58},[52,46798,46799],{"class":54,"line":594},[52,46800,26109],{"class":58},[52,46802,46803,46805,46807],{"class":54,"line":600},[52,46804,2213],{"class":58},[52,46806,2216],{"class":371},[52,46808,105],{"class":58},[52,46810,46811,46813,46815],{"class":54,"line":606},[52,46812,2230],{"class":58},[52,46814,46602],{"class":371},[52,46816,77],{"class":58},[52,46818,46819,46821,46823],{"class":54,"line":653},[52,46820,121],{"class":58},[52,46822,63],{"class":371},[52,46824,77],{"class":58},[43,46826,46827],{"className":419,"code":46689,"language":420,"meta":48,"style":48},[31,46828,46829,46837,46843,46855,46867,46871,46879,46887],{"__ignoreMap":48},[52,46830,46831,46833,46835],{"class":54,"line":55},[52,46832,59],{"class":58},[52,46834,63],{"class":371},[52,46836,77],{"class":58},[52,46838,46839,46841],{"class":54,"line":80},[52,46840,83],{"class":58},[52,46842,46641],{"class":371},[52,46844,46845,46847,46849,46851,46853],{"class":54,"line":108},[52,46846,17137],{"class":66},[52,46848,70],{"class":231},[52,46850,723],{"class":58},[52,46852,46716],{"class":371},[52,46854,729],{"class":58},[52,46856,46857,46859,46861,46863,46865],{"class":54,"line":118},[52,46858,6514],{"class":66},[52,46860,70],{"class":231},[52,46862,723],{"class":58},[52,46864,5116],{"class":371},[52,46866,729],{"class":58},[52,46868,46869],{"class":54,"line":594},[52,46870,26109],{"class":58},[52,46872,46873,46875,46877],{"class":54,"line":600},[52,46874,2213],{"class":58},[52,46876,2216],{"class":371},[52,46878,105],{"class":58},[52,46880,46881,46883,46885],{"class":54,"line":606},[52,46882,2230],{"class":58},[52,46884,46602],{"class":371},[52,46886,77],{"class":58},[52,46888,46889,46891,46893],{"class":54,"line":653},[52,46890,121],{"class":58},[52,46892,63],{"class":371},[52,46894,77],{"class":58},[43,46896,46898],{"className":222,"code":46897,"language":224,"meta":48,"style":48},"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",[31,46899,46900,46910,46914,46928,46932,46949,46957,46961,46965],{"__ignoreMap":48},[52,46901,46902,46904,46906,46908],{"class":54,"line":55},[52,46903,232],{"class":231},[52,46905,8385],{"class":58},[52,46907,238],{"class":231},[52,46909,8390],{"class":73},[52,46911,46912],{"class":54,"line":80},[52,46913,597],{"emptyLinePlaceholder":171},[52,46915,46916,46918,46920,46922,46924,46926],{"class":54,"line":108},[52,46917,1721],{"class":231},[52,46919,1724],{"class":371},[52,46921,1727],{"class":231},[52,46923,1730],{"class":231},[52,46925,1733],{"class":66},[52,46927,1736],{"class":58},[52,46929,46930],{"class":54,"line":118},[52,46931,1751],{"class":58},[52,46933,46934,46936,46939,46941,46943,46945,46947],{"class":54,"line":594},[52,46935,1756],{"class":58},[52,46937,46938],{"class":73},"'Shatter'",[52,46940,26354],{"class":58},[52,46942,46716],{"class":371},[52,46944,3431],{"class":58},[52,46946,5116],{"class":371},[52,46948,4412],{"class":58},[52,46950,46951,46953,46955],{"class":54,"line":600},[52,46952,3880],{"class":58},[52,46954,2869],{"class":73},[52,46956,2129],{"class":58},[52,46958,46959],{"class":54,"line":606},[52,46960,3897],{"class":58},[52,46962,46963],{"class":54,"line":653},[52,46964,1773],{"class":58},[52,46966,46967],{"class":54,"line":662},[52,46968,1778],{"class":58},[156,46970,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46972},[46973,46974],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/shatter",{"title":46602,"description":46610},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":46981,"title":46982,"body":46983,"category":26920,"componentType":20001,"description":46990,"extension":168,"meta":47175,"navigation":171,"path":47176,"requiresChild":26923,"seo":47177,"stem":47178,"__hash__":47179},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":46984,"toc":47171},[46985,46988,46991,46993,46995,46998,47000,47169],[11,46986,46982],{"id":46987},"simplexnoise",[15,46989,46990],{},"Organic noise with animated movement",[26061,46992],{"component":46982},[23,46994,26065],{"id":20662},[26067,46996],{":props":46997},"[{\"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\"}]",[23,46999,26073],{"id":26072},[217,47001,47002,47031,47059,47087,47115],{":tabs":1543},[43,47003,47005],{"className":45,"code":47004,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,47006,47007,47015,47023],{"__ignoreMap":48},[52,47008,47009,47011,47013],{"class":54,"line":55},[52,47010,59],{"class":58},[52,47012,63],{"class":62},[52,47014,77],{"class":58},[52,47016,47017,47019,47021],{"class":54,"line":80},[52,47018,83],{"class":58},[52,47020,46982],{"class":62},[52,47022,105],{"class":58},[52,47024,47025,47027,47029],{"class":54,"line":108},[52,47026,121],{"class":58},[52,47028,63],{"class":62},[52,47030,77],{"class":58},[43,47032,47033],{"className":360,"code":47004,"language":362,"meta":48,"style":48},[31,47034,47035,47043,47051],{"__ignoreMap":48},[52,47036,47037,47039,47041],{"class":54,"line":55},[52,47038,59],{"class":58},[52,47040,63],{"class":371},[52,47042,77],{"class":58},[52,47044,47045,47047,47049],{"class":54,"line":80},[52,47046,83],{"class":58},[52,47048,46982],{"class":371},[52,47050,105],{"class":58},[52,47052,47053,47055,47057],{"class":54,"line":108},[52,47054,121],{"class":58},[52,47056,63],{"class":371},[52,47058,77],{"class":58},[43,47060,47061],{"className":2507,"code":47004,"language":2509,"meta":48,"style":48},[31,47062,47063,47071,47079],{"__ignoreMap":48},[52,47064,47065,47067,47069],{"class":54,"line":55},[52,47066,59],{"class":58},[52,47068,63],{"class":371},[52,47070,77],{"class":58},[52,47072,47073,47075,47077],{"class":54,"line":80},[52,47074,83],{"class":58},[52,47076,46982],{"class":371},[52,47078,105],{"class":58},[52,47080,47081,47083,47085],{"class":54,"line":108},[52,47082,121],{"class":58},[52,47084,63],{"class":371},[52,47086,77],{"class":58},[43,47088,47089],{"className":419,"code":47004,"language":420,"meta":48,"style":48},[31,47090,47091,47099,47107],{"__ignoreMap":48},[52,47092,47093,47095,47097],{"class":54,"line":55},[52,47094,59],{"class":58},[52,47096,63],{"class":371},[52,47098,77],{"class":58},[52,47100,47101,47103,47105],{"class":54,"line":80},[52,47102,83],{"class":58},[52,47104,46982],{"class":371},[52,47106,105],{"class":58},[52,47108,47109,47111,47113],{"class":54,"line":108},[52,47110,121],{"class":58},[52,47112,63],{"class":371},[52,47114,77],{"class":58},[43,47116,47118],{"className":222,"code":47117,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SimplexNoise', props: {} }\n ]\n})\n",[31,47119,47120,47130,47134,47148,47152,47161,47165],{"__ignoreMap":48},[52,47121,47122,47124,47126,47128],{"class":54,"line":55},[52,47123,232],{"class":231},[52,47125,8385],{"class":58},[52,47127,238],{"class":231},[52,47129,8390],{"class":73},[52,47131,47132],{"class":54,"line":80},[52,47133,597],{"emptyLinePlaceholder":171},[52,47135,47136,47138,47140,47142,47144,47146],{"class":54,"line":108},[52,47137,1721],{"class":231},[52,47139,1724],{"class":371},[52,47141,1727],{"class":231},[52,47143,1730],{"class":231},[52,47145,1733],{"class":66},[52,47147,1736],{"class":58},[52,47149,47150],{"class":54,"line":118},[52,47151,1751],{"class":58},[52,47153,47154,47156,47159],{"class":54,"line":594},[52,47155,1756],{"class":58},[52,47157,47158],{"class":73},"'SimplexNoise'",[52,47160,2129],{"class":58},[52,47162,47163],{"class":54,"line":600},[52,47164,1773],{"class":58},[52,47166,47167],{"class":54,"line":606},[52,47168,1778],{"class":58},[156,47170,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":47172},[47173,47174],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/simplexnoise",{"title":46982,"description":46990},"docs/components/SimplexNoise","d0mO4mGGih-voEAS5386XslXJGaXC6JFX720cMm4EPY",{"id":47181,"title":47182,"body":47183,"category":26920,"componentType":20001,"description":47190,"extension":168,"meta":47420,"navigation":171,"path":47421,"requiresChild":26923,"seo":47422,"stem":47423,"__hash__":47424},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":47184,"toc":47416},[47185,47188,47191,47193,47195,47198,47200,47414],[11,47186,47182],{"id":47187},"sinewave",[15,47189,47190],{},"Animated wave with thickness and softness",[26061,47192],{"component":47182},[23,47194,26065],{"id":20662},[26067,47196],{":props":47197},"[{\"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\"}]",[23,47199,26073],{"id":26072},[217,47201,47202,47242,47280,47318,47356],{":tabs":1543},[43,47203,47205],{"className":45,"code":47204,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,47206,47207,47215,47222,47230,47234],{"__ignoreMap":48},[52,47208,47209,47211,47213],{"class":54,"line":55},[52,47210,59],{"class":58},[52,47212,63],{"class":62},[52,47214,77],{"class":58},[52,47216,47217,47219],{"class":54,"line":80},[52,47218,83],{"class":58},[52,47220,47221],{"class":62},"SineWave\n",[52,47223,47224,47226,47228],{"class":54,"line":108},[52,47225,6504],{"class":66},[52,47227,70],{"class":58},[52,47229,6460],{"class":73},[52,47231,47232],{"class":54,"line":118},[52,47233,1224],{"class":58},[52,47235,47236,47238,47240],{"class":54,"line":594},[52,47237,121],{"class":58},[52,47239,63],{"class":62},[52,47241,77],{"class":58},[43,47243,47244],{"className":360,"code":47204,"language":362,"meta":48,"style":48},[31,47245,47246,47254,47260,47268,47272],{"__ignoreMap":48},[52,47247,47248,47250,47252],{"class":54,"line":55},[52,47249,59],{"class":58},[52,47251,63],{"class":371},[52,47253,77],{"class":58},[52,47255,47256,47258],{"class":54,"line":80},[52,47257,83],{"class":58},[52,47259,47221],{"class":371},[52,47261,47262,47264,47266],{"class":54,"line":108},[52,47263,6504],{"class":66},[52,47265,70],{"class":231},[52,47267,6460],{"class":73},[52,47269,47270],{"class":54,"line":118},[52,47271,1224],{"class":58},[52,47273,47274,47276,47278],{"class":54,"line":594},[52,47275,121],{"class":58},[52,47277,63],{"class":371},[52,47279,77],{"class":58},[43,47281,47282],{"className":2507,"code":47204,"language":2509,"meta":48,"style":48},[31,47283,47284,47292,47298,47306,47310],{"__ignoreMap":48},[52,47285,47286,47288,47290],{"class":54,"line":55},[52,47287,59],{"class":58},[52,47289,63],{"class":371},[52,47291,77],{"class":58},[52,47293,47294,47296],{"class":54,"line":80},[52,47295,83],{"class":58},[52,47297,47221],{"class":371},[52,47299,47300,47302,47304],{"class":54,"line":108},[52,47301,6504],{"class":66},[52,47303,70],{"class":58},[52,47305,6460],{"class":73},[52,47307,47308],{"class":54,"line":118},[52,47309,1224],{"class":58},[52,47311,47312,47314,47316],{"class":54,"line":594},[52,47313,121],{"class":58},[52,47315,63],{"class":371},[52,47317,77],{"class":58},[43,47319,47320],{"className":419,"code":47204,"language":420,"meta":48,"style":48},[31,47321,47322,47330,47336,47344,47348],{"__ignoreMap":48},[52,47323,47324,47326,47328],{"class":54,"line":55},[52,47325,59],{"class":58},[52,47327,63],{"class":371},[52,47329,77],{"class":58},[52,47331,47332,47334],{"class":54,"line":80},[52,47333,83],{"class":58},[52,47335,47221],{"class":371},[52,47337,47338,47340,47342],{"class":54,"line":108},[52,47339,6504],{"class":66},[52,47341,70],{"class":231},[52,47343,6460],{"class":73},[52,47345,47346],{"class":54,"line":118},[52,47347,1224],{"class":58},[52,47349,47350,47352,47354],{"class":54,"line":594},[52,47351,121],{"class":58},[52,47353,63],{"class":371},[52,47355,77],{"class":58},[43,47357,47359],{"className":222,"code":47358,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SineWave', props: { color: '#ffffff' } }\n ]\n})\n",[31,47360,47361,47371,47375,47389,47393,47406,47410],{"__ignoreMap":48},[52,47362,47363,47365,47367,47369],{"class":54,"line":55},[52,47364,232],{"class":231},[52,47366,8385],{"class":58},[52,47368,238],{"class":231},[52,47370,8390],{"class":73},[52,47372,47373],{"class":54,"line":80},[52,47374,597],{"emptyLinePlaceholder":171},[52,47376,47377,47379,47381,47383,47385,47387],{"class":54,"line":108},[52,47378,1721],{"class":231},[52,47380,1724],{"class":371},[52,47382,1727],{"class":231},[52,47384,1730],{"class":231},[52,47386,1733],{"class":66},[52,47388,1736],{"class":58},[52,47390,47391],{"class":54,"line":118},[52,47392,1751],{"class":58},[52,47394,47395,47397,47400,47402,47404],{"class":54,"line":594},[52,47396,1756],{"class":58},[52,47398,47399],{"class":73},"'SineWave'",[52,47401,1762],{"class":58},[52,47403,7039],{"class":73},[52,47405,1768],{"class":58},[52,47407,47408],{"class":54,"line":600},[52,47409,1773],{"class":58},[52,47411,47412],{"class":54,"line":606},[52,47413,1778],{"class":58},[156,47415,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47417},[47418,47419],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/sinewave",{"title":47182,"description":47190},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":47426,"title":47427,"body":47428,"category":27931,"componentType":20007,"description":47435,"extension":168,"meta":47696,"navigation":171,"path":47697,"requiresChild":171,"seo":47698,"stem":47699,"__hash__":47700},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":47429,"toc":47692},[47430,47433,47436,47438,47440,47443,47445,47690],[11,47431,47427],{"id":47432},"solarize",[15,47434,47435],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26061,47437],{"component":47427},[23,47439,26065],{"id":20662},[26067,47441],{":props":47442},"[{\"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)\"}]",[23,47444,26073],{"id":26072},[217,47446,47447,47492,47536,47580,47624],{":tabs":1543},[43,47448,47450],{"className":45,"code":47449,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,47451,47452,47460,47468,47476,47484],{"__ignoreMap":48},[52,47453,47454,47456,47458],{"class":54,"line":55},[52,47455,59],{"class":58},[52,47457,63],{"class":62},[52,47459,77],{"class":58},[52,47461,47462,47464,47466],{"class":54,"line":80},[52,47463,83],{"class":58},[52,47465,47427],{"class":62},[52,47467,77],{"class":58},[52,47469,47470,47472,47474],{"class":54,"line":108},[52,47471,2213],{"class":58},[52,47473,2216],{"class":62},[52,47475,105],{"class":58},[52,47477,47478,47480,47482],{"class":54,"line":118},[52,47479,2230],{"class":58},[52,47481,47427],{"class":62},[52,47483,77],{"class":58},[52,47485,47486,47488,47490],{"class":54,"line":594},[52,47487,121],{"class":58},[52,47489,63],{"class":62},[52,47491,77],{"class":58},[43,47493,47494],{"className":360,"code":47449,"language":362,"meta":48,"style":48},[31,47495,47496,47504,47512,47520,47528],{"__ignoreMap":48},[52,47497,47498,47500,47502],{"class":54,"line":55},[52,47499,59],{"class":58},[52,47501,63],{"class":371},[52,47503,77],{"class":58},[52,47505,47506,47508,47510],{"class":54,"line":80},[52,47507,83],{"class":58},[52,47509,47427],{"class":371},[52,47511,77],{"class":58},[52,47513,47514,47516,47518],{"class":54,"line":108},[52,47515,2213],{"class":58},[52,47517,2216],{"class":371},[52,47519,105],{"class":58},[52,47521,47522,47524,47526],{"class":54,"line":118},[52,47523,2230],{"class":58},[52,47525,47427],{"class":371},[52,47527,77],{"class":58},[52,47529,47530,47532,47534],{"class":54,"line":594},[52,47531,121],{"class":58},[52,47533,63],{"class":371},[52,47535,77],{"class":58},[43,47537,47538],{"className":2507,"code":47449,"language":2509,"meta":48,"style":48},[31,47539,47540,47548,47556,47564,47572],{"__ignoreMap":48},[52,47541,47542,47544,47546],{"class":54,"line":55},[52,47543,59],{"class":58},[52,47545,63],{"class":371},[52,47547,77],{"class":58},[52,47549,47550,47552,47554],{"class":54,"line":80},[52,47551,83],{"class":58},[52,47553,47427],{"class":371},[52,47555,77],{"class":58},[52,47557,47558,47560,47562],{"class":54,"line":108},[52,47559,2213],{"class":58},[52,47561,2216],{"class":371},[52,47563,105],{"class":58},[52,47565,47566,47568,47570],{"class":54,"line":118},[52,47567,2230],{"class":58},[52,47569,47427],{"class":371},[52,47571,77],{"class":58},[52,47573,47574,47576,47578],{"class":54,"line":594},[52,47575,121],{"class":58},[52,47577,63],{"class":371},[52,47579,77],{"class":58},[43,47581,47582],{"className":419,"code":47449,"language":420,"meta":48,"style":48},[31,47583,47584,47592,47600,47608,47616],{"__ignoreMap":48},[52,47585,47586,47588,47590],{"class":54,"line":55},[52,47587,59],{"class":58},[52,47589,63],{"class":371},[52,47591,77],{"class":58},[52,47593,47594,47596,47598],{"class":54,"line":80},[52,47595,83],{"class":58},[52,47597,47427],{"class":371},[52,47599,77],{"class":58},[52,47601,47602,47604,47606],{"class":54,"line":108},[52,47603,2213],{"class":58},[52,47605,2216],{"class":371},[52,47607,105],{"class":58},[52,47609,47610,47612,47614],{"class":54,"line":118},[52,47611,2230],{"class":58},[52,47613,47427],{"class":371},[52,47615,77],{"class":58},[52,47617,47618,47620,47622],{"class":54,"line":594},[52,47619,121],{"class":58},[52,47621,63],{"class":371},[52,47623,77],{"class":58},[43,47625,47627],{"className":222,"code":47626,"language":224,"meta":48,"style":48},"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",[31,47628,47629,47639,47643,47657,47661,47670,47678,47682,47686],{"__ignoreMap":48},[52,47630,47631,47633,47635,47637],{"class":54,"line":55},[52,47632,232],{"class":231},[52,47634,8385],{"class":58},[52,47636,238],{"class":231},[52,47638,8390],{"class":73},[52,47640,47641],{"class":54,"line":80},[52,47642,597],{"emptyLinePlaceholder":171},[52,47644,47645,47647,47649,47651,47653,47655],{"class":54,"line":108},[52,47646,1721],{"class":231},[52,47648,1724],{"class":371},[52,47650,1727],{"class":231},[52,47652,1730],{"class":231},[52,47654,1733],{"class":66},[52,47656,1736],{"class":58},[52,47658,47659],{"class":54,"line":118},[52,47660,1751],{"class":58},[52,47662,47663,47665,47668],{"class":54,"line":594},[52,47664,1756],{"class":58},[52,47666,47667],{"class":73},"'Solarize'",[52,47669,3875],{"class":58},[52,47671,47672,47674,47676],{"class":54,"line":600},[52,47673,3880],{"class":58},[52,47675,2869],{"class":73},[52,47677,2129],{"class":58},[52,47679,47680],{"class":54,"line":606},[52,47681,3897],{"class":58},[52,47683,47684],{"class":54,"line":653},[52,47685,1773],{"class":58},[52,47687,47688],{"class":54,"line":662},[52,47689,1778],{"class":58},[156,47691,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":47693},[47694,47695],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/solarize",{"title":47427,"description":47435},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":47702,"title":1571,"body":47703,"category":26920,"componentType":20001,"description":47710,"extension":168,"meta":47940,"navigation":171,"path":47941,"requiresChild":26923,"seo":47942,"stem":47943,"__hash__":47944},"components/docs/components/SolidColor.md",{"type":8,"value":47704,"toc":47936},[47705,47708,47711,47713,47715,47718,47720,47934],[11,47706,1571],{"id":47707},"solidcolor",[15,47709,47710],{},"Fill the canvas with a single solid color",[26061,47712],{"component":1571},[23,47714,26065],{"id":20662},[26067,47716],{":props":47717},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,47719,26073],{"id":26072},[217,47721,47722,47763,47801,47839,47877],{":tabs":1543},[43,47723,47725],{"className":45,"code":47724,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,47726,47727,47735,47742,47751,47755],{"__ignoreMap":48},[52,47728,47729,47731,47733],{"class":54,"line":55},[52,47730,59],{"class":58},[52,47732,63],{"class":62},[52,47734,77],{"class":58},[52,47736,47737,47739],{"class":54,"line":80},[52,47738,83],{"class":58},[52,47740,47741],{"class":62},"SolidColor\n",[52,47743,47744,47746,47748],{"class":54,"line":108},[52,47745,6504],{"class":66},[52,47747,70],{"class":58},[52,47749,47750],{"class":73},"\"#5b18ca\"\n",[52,47752,47753],{"class":54,"line":118},[52,47754,1224],{"class":58},[52,47756,47757,47759,47761],{"class":54,"line":594},[52,47758,121],{"class":58},[52,47760,63],{"class":62},[52,47762,77],{"class":58},[43,47764,47765],{"className":360,"code":47724,"language":362,"meta":48,"style":48},[31,47766,47767,47775,47781,47789,47793],{"__ignoreMap":48},[52,47768,47769,47771,47773],{"class":54,"line":55},[52,47770,59],{"class":58},[52,47772,63],{"class":371},[52,47774,77],{"class":58},[52,47776,47777,47779],{"class":54,"line":80},[52,47778,83],{"class":58},[52,47780,47741],{"class":371},[52,47782,47783,47785,47787],{"class":54,"line":108},[52,47784,6504],{"class":66},[52,47786,70],{"class":231},[52,47788,47750],{"class":73},[52,47790,47791],{"class":54,"line":118},[52,47792,1224],{"class":58},[52,47794,47795,47797,47799],{"class":54,"line":594},[52,47796,121],{"class":58},[52,47798,63],{"class":371},[52,47800,77],{"class":58},[43,47802,47803],{"className":2507,"code":47724,"language":2509,"meta":48,"style":48},[31,47804,47805,47813,47819,47827,47831],{"__ignoreMap":48},[52,47806,47807,47809,47811],{"class":54,"line":55},[52,47808,59],{"class":58},[52,47810,63],{"class":371},[52,47812,77],{"class":58},[52,47814,47815,47817],{"class":54,"line":80},[52,47816,83],{"class":58},[52,47818,47741],{"class":371},[52,47820,47821,47823,47825],{"class":54,"line":108},[52,47822,6504],{"class":66},[52,47824,70],{"class":58},[52,47826,47750],{"class":73},[52,47828,47829],{"class":54,"line":118},[52,47830,1224],{"class":58},[52,47832,47833,47835,47837],{"class":54,"line":594},[52,47834,121],{"class":58},[52,47836,63],{"class":371},[52,47838,77],{"class":58},[43,47840,47841],{"className":419,"code":47724,"language":420,"meta":48,"style":48},[31,47842,47843,47851,47857,47865,47869],{"__ignoreMap":48},[52,47844,47845,47847,47849],{"class":54,"line":55},[52,47846,59],{"class":58},[52,47848,63],{"class":371},[52,47850,77],{"class":58},[52,47852,47853,47855],{"class":54,"line":80},[52,47854,83],{"class":58},[52,47856,47741],{"class":371},[52,47858,47859,47861,47863],{"class":54,"line":108},[52,47860,6504],{"class":66},[52,47862,70],{"class":231},[52,47864,47750],{"class":73},[52,47866,47867],{"class":54,"line":118},[52,47868,1224],{"class":58},[52,47870,47871,47873,47875],{"class":54,"line":594},[52,47872,121],{"class":58},[52,47874,63],{"class":371},[52,47876,77],{"class":58},[43,47878,47880],{"className":222,"code":47879,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SolidColor', props: { color: '#5b18ca' } }\n ]\n})\n",[31,47881,47882,47892,47896,47910,47914,47926,47930],{"__ignoreMap":48},[52,47883,47884,47886,47888,47890],{"class":54,"line":55},[52,47885,232],{"class":231},[52,47887,8385],{"class":58},[52,47889,238],{"class":231},[52,47891,8390],{"class":73},[52,47893,47894],{"class":54,"line":80},[52,47895,597],{"emptyLinePlaceholder":171},[52,47897,47898,47900,47902,47904,47906,47908],{"class":54,"line":108},[52,47899,1721],{"class":231},[52,47901,1724],{"class":371},[52,47903,1727],{"class":231},[52,47905,1730],{"class":231},[52,47907,1733],{"class":66},[52,47909,1736],{"class":58},[52,47911,47912],{"class":54,"line":118},[52,47913,1751],{"class":58},[52,47915,47916,47918,47920,47922,47924],{"class":54,"line":594},[52,47917,1756],{"class":58},[52,47919,1759],{"class":73},[52,47921,1762],{"class":58},[52,47923,1765],{"class":73},[52,47925,1768],{"class":58},[52,47927,47928],{"class":54,"line":600},[52,47929,1773],{"class":58},[52,47931,47932],{"class":54,"line":606},[52,47933,1778],{"class":58},[156,47935,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47937},[47938,47939],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/solidcolor",{"title":1571,"description":47710},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":47946,"title":47947,"body":47948,"category":28265,"componentType":20007,"description":47955,"extension":168,"meta":48272,"navigation":171,"path":48273,"requiresChild":171,"seo":48274,"stem":48275,"__hash__":48276},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":47949,"toc":48268},[47950,47953,47956,47958,47960,47963,47965,48266],[11,47951,47947],{"id":47952},"spherize",[15,47954,47955],{},"Map content onto a 3D sphere surface with depth distortion",[26061,47957],{"component":47947},[23,47959,26065],{"id":20662},[26067,47961],{":props":47962},"[{\"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\"}]",[23,47964,26073],{"id":26072},[217,47966,47967,48023,48082,48138,48196],{":tabs":1543},[43,47968,47970],{"className":45,"code":47969,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,47971,47972,47980,47987,47995,47999,48007,48015],{"__ignoreMap":48},[52,47973,47974,47976,47978],{"class":54,"line":55},[52,47975,59],{"class":58},[52,47977,63],{"class":62},[52,47979,77],{"class":58},[52,47981,47982,47984],{"class":54,"line":80},[52,47983,83],{"class":58},[52,47985,47986],{"class":62},"Spherize\n",[52,47988,47989,47991,47993],{"class":54,"line":108},[52,47990,14057],{"class":66},[52,47992,70],{"class":58},[52,47994,27987],{"class":73},[52,47996,47997],{"class":54,"line":118},[52,47998,26109],{"class":58},[52,48000,48001,48003,48005],{"class":54,"line":594},[52,48002,2213],{"class":58},[52,48004,2216],{"class":62},[52,48006,105],{"class":58},[52,48008,48009,48011,48013],{"class":54,"line":600},[52,48010,2230],{"class":58},[52,48012,47947],{"class":62},[52,48014,77],{"class":58},[52,48016,48017,48019,48021],{"class":54,"line":606},[52,48018,121],{"class":58},[52,48020,63],{"class":62},[52,48022,77],{"class":58},[43,48024,48026],{"className":360,"code":48025,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,48027,48028,48036,48042,48054,48058,48066,48074],{"__ignoreMap":48},[52,48029,48030,48032,48034],{"class":54,"line":55},[52,48031,59],{"class":58},[52,48033,63],{"class":371},[52,48035,77],{"class":58},[52,48037,48038,48040],{"class":54,"line":80},[52,48039,83],{"class":58},[52,48041,47986],{"class":371},[52,48043,48044,48046,48048,48050,48052],{"class":54,"line":108},[52,48045,6514],{"class":66},[52,48047,70],{"class":231},[52,48049,723],{"class":58},[52,48051,5544],{"class":371},[52,48053,729],{"class":58},[52,48055,48056],{"class":54,"line":118},[52,48057,26109],{"class":58},[52,48059,48060,48062,48064],{"class":54,"line":594},[52,48061,2213],{"class":58},[52,48063,2216],{"class":371},[52,48065,105],{"class":58},[52,48067,48068,48070,48072],{"class":54,"line":600},[52,48069,2230],{"class":58},[52,48071,47947],{"class":371},[52,48073,77],{"class":58},[52,48075,48076,48078,48080],{"class":54,"line":606},[52,48077,121],{"class":58},[52,48079,63],{"class":371},[52,48081,77],{"class":58},[43,48083,48084],{"className":2507,"code":48025,"language":2509,"meta":48,"style":48},[31,48085,48086,48094,48100,48110,48114,48122,48130],{"__ignoreMap":48},[52,48087,48088,48090,48092],{"class":54,"line":55},[52,48089,59],{"class":58},[52,48091,63],{"class":371},[52,48093,77],{"class":58},[52,48095,48096,48098],{"class":54,"line":80},[52,48097,83],{"class":58},[52,48099,47986],{"class":371},[52,48101,48102,48104,48106,48108],{"class":54,"line":108},[52,48103,6514],{"class":66},[52,48105,24004],{"class":58},[52,48107,5544],{"class":371},[52,48109,729],{"class":58},[52,48111,48112],{"class":54,"line":118},[52,48113,26109],{"class":58},[52,48115,48116,48118,48120],{"class":54,"line":594},[52,48117,2213],{"class":58},[52,48119,2216],{"class":371},[52,48121,105],{"class":58},[52,48123,48124,48126,48128],{"class":54,"line":600},[52,48125,2230],{"class":58},[52,48127,47947],{"class":371},[52,48129,77],{"class":58},[52,48131,48132,48134,48136],{"class":54,"line":606},[52,48133,121],{"class":58},[52,48135,63],{"class":371},[52,48137,77],{"class":58},[43,48139,48140],{"className":419,"code":48025,"language":420,"meta":48,"style":48},[31,48141,48142,48150,48156,48168,48172,48180,48188],{"__ignoreMap":48},[52,48143,48144,48146,48148],{"class":54,"line":55},[52,48145,59],{"class":58},[52,48147,63],{"class":371},[52,48149,77],{"class":58},[52,48151,48152,48154],{"class":54,"line":80},[52,48153,83],{"class":58},[52,48155,47986],{"class":371},[52,48157,48158,48160,48162,48164,48166],{"class":54,"line":108},[52,48159,6514],{"class":66},[52,48161,70],{"class":231},[52,48163,723],{"class":58},[52,48165,5544],{"class":371},[52,48167,729],{"class":58},[52,48169,48170],{"class":54,"line":118},[52,48171,26109],{"class":58},[52,48173,48174,48176,48178],{"class":54,"line":594},[52,48175,2213],{"class":58},[52,48177,2216],{"class":371},[52,48179,105],{"class":58},[52,48181,48182,48184,48186],{"class":54,"line":600},[52,48183,2230],{"class":58},[52,48185,47947],{"class":371},[52,48187,77],{"class":58},[52,48189,48190,48192,48194],{"class":54,"line":606},[52,48191,121],{"class":58},[52,48193,63],{"class":371},[52,48195,77],{"class":58},[43,48197,48199],{"className":222,"code":48198,"language":224,"meta":48,"style":48},"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",[31,48200,48201,48211,48215,48229,48233,48246,48254,48258,48262],{"__ignoreMap":48},[52,48202,48203,48205,48207,48209],{"class":54,"line":55},[52,48204,232],{"class":231},[52,48206,8385],{"class":58},[52,48208,238],{"class":231},[52,48210,8390],{"class":73},[52,48212,48213],{"class":54,"line":80},[52,48214,597],{"emptyLinePlaceholder":171},[52,48216,48217,48219,48221,48223,48225,48227],{"class":54,"line":108},[52,48218,1721],{"class":231},[52,48220,1724],{"class":371},[52,48222,1727],{"class":231},[52,48224,1730],{"class":231},[52,48226,1733],{"class":66},[52,48228,1736],{"class":58},[52,48230,48231],{"class":54,"line":118},[52,48232,1751],{"class":58},[52,48234,48235,48237,48240,48242,48244],{"class":54,"line":594},[52,48236,1756],{"class":58},[52,48238,48239],{"class":73},"'Spherize'",[52,48241,4407],{"class":58},[52,48243,5544],{"class":371},[52,48245,4412],{"class":58},[52,48247,48248,48250,48252],{"class":54,"line":600},[52,48249,3880],{"class":58},[52,48251,2869],{"class":73},[52,48253,2129],{"class":58},[52,48255,48256],{"class":54,"line":606},[52,48257,3897],{"class":58},[52,48259,48260],{"class":54,"line":653},[52,48261,1773],{"class":58},[52,48263,48264],{"class":54,"line":662},[52,48265,1778],{"class":58},[156,48267,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48269},[48270,48271],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/spherize",{"title":47947,"description":47955},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":48278,"title":48279,"body":48280,"category":26920,"componentType":20001,"description":48287,"extension":168,"meta":48472,"navigation":171,"path":48473,"requiresChild":26923,"seo":48474,"stem":48475,"__hash__":48476},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":48281,"toc":48468},[48282,48285,48288,48290,48292,48295,48297,48466],[11,48283,48279],{"id":48284},"spiral",[15,48286,48287],{},"Rotating spiral pattern with animated movement",[26061,48289],{"component":48279},[23,48291,26065],{"id":20662},[26067,48293],{":props":48294},"[{\"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\"}]",[23,48296,26073],{"id":26072},[217,48298,48299,48328,48356,48384,48412],{":tabs":1543},[43,48300,48302],{"className":45,"code":48301,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,48303,48304,48312,48320],{"__ignoreMap":48},[52,48305,48306,48308,48310],{"class":54,"line":55},[52,48307,59],{"class":58},[52,48309,63],{"class":62},[52,48311,77],{"class":58},[52,48313,48314,48316,48318],{"class":54,"line":80},[52,48315,83],{"class":58},[52,48317,48279],{"class":62},[52,48319,105],{"class":58},[52,48321,48322,48324,48326],{"class":54,"line":108},[52,48323,121],{"class":58},[52,48325,63],{"class":62},[52,48327,77],{"class":58},[43,48329,48330],{"className":360,"code":48301,"language":362,"meta":48,"style":48},[31,48331,48332,48340,48348],{"__ignoreMap":48},[52,48333,48334,48336,48338],{"class":54,"line":55},[52,48335,59],{"class":58},[52,48337,63],{"class":371},[52,48339,77],{"class":58},[52,48341,48342,48344,48346],{"class":54,"line":80},[52,48343,83],{"class":58},[52,48345,48279],{"class":371},[52,48347,105],{"class":58},[52,48349,48350,48352,48354],{"class":54,"line":108},[52,48351,121],{"class":58},[52,48353,63],{"class":371},[52,48355,77],{"class":58},[43,48357,48358],{"className":2507,"code":48301,"language":2509,"meta":48,"style":48},[31,48359,48360,48368,48376],{"__ignoreMap":48},[52,48361,48362,48364,48366],{"class":54,"line":55},[52,48363,59],{"class":58},[52,48365,63],{"class":371},[52,48367,77],{"class":58},[52,48369,48370,48372,48374],{"class":54,"line":80},[52,48371,83],{"class":58},[52,48373,48279],{"class":371},[52,48375,105],{"class":58},[52,48377,48378,48380,48382],{"class":54,"line":108},[52,48379,121],{"class":58},[52,48381,63],{"class":371},[52,48383,77],{"class":58},[43,48385,48386],{"className":419,"code":48301,"language":420,"meta":48,"style":48},[31,48387,48388,48396,48404],{"__ignoreMap":48},[52,48389,48390,48392,48394],{"class":54,"line":55},[52,48391,59],{"class":58},[52,48393,63],{"class":371},[52,48395,77],{"class":58},[52,48397,48398,48400,48402],{"class":54,"line":80},[52,48399,83],{"class":58},[52,48401,48279],{"class":371},[52,48403,105],{"class":58},[52,48405,48406,48408,48410],{"class":54,"line":108},[52,48407,121],{"class":58},[52,48409,63],{"class":371},[52,48411,77],{"class":58},[43,48413,48415],{"className":222,"code":48414,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Spiral', props: {} }\n ]\n})\n",[31,48416,48417,48427,48431,48445,48449,48458,48462],{"__ignoreMap":48},[52,48418,48419,48421,48423,48425],{"class":54,"line":55},[52,48420,232],{"class":231},[52,48422,8385],{"class":58},[52,48424,238],{"class":231},[52,48426,8390],{"class":73},[52,48428,48429],{"class":54,"line":80},[52,48430,597],{"emptyLinePlaceholder":171},[52,48432,48433,48435,48437,48439,48441,48443],{"class":54,"line":108},[52,48434,1721],{"class":231},[52,48436,1724],{"class":371},[52,48438,1727],{"class":231},[52,48440,1730],{"class":231},[52,48442,1733],{"class":66},[52,48444,1736],{"class":58},[52,48446,48447],{"class":54,"line":118},[52,48448,1751],{"class":58},[52,48450,48451,48453,48456],{"class":54,"line":594},[52,48452,1756],{"class":58},[52,48454,48455],{"class":73},"'Spiral'",[52,48457,2129],{"class":58},[52,48459,48460],{"class":54,"line":600},[52,48461,1773],{"class":58},[52,48463,48464],{"class":54,"line":606},[52,48465,1778],{"class":58},[156,48467,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":48469},[48470,48471],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/spiral",{"title":48279,"description":48287},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":48478,"title":48479,"body":48480,"category":29887,"componentType":20001,"description":48487,"extension":168,"meta":48764,"navigation":171,"path":48765,"requiresChild":26923,"seo":48766,"stem":48767,"__hash__":48768},"components/docs/components/Star.md","Star",{"type":8,"value":48481,"toc":48760},[48482,48485,48488,48490,48492,48495,48497,48758],[11,48483,48479],{"id":48484},"star",[15,48486,48487],{},"Classic star polygon with straight sides and sharp pointed tips",[26061,48489],{"component":48479},[23,48491,26065],{"id":20662},[26067,48493],{":props":48494},"[{\"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\"}]",[23,48496,26073],{"id":26072},[217,48498,48499,48547,48598,48646,48696],{":tabs":1543},[43,48500,48502],{"className":45,"code":48501,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,48503,48504,48512,48519,48527,48535,48539],{"__ignoreMap":48},[52,48505,48506,48508,48510],{"class":54,"line":55},[52,48507,59],{"class":58},[52,48509,63],{"class":62},[52,48511,77],{"class":58},[52,48513,48514,48516],{"class":54,"line":80},[52,48515,83],{"class":58},[52,48517,48518],{"class":62},"Star\n",[52,48520,48521,48523,48525],{"class":54,"line":108},[52,48522,6504],{"class":66},[52,48524,70],{"class":58},[52,48526,6460],{"class":73},[52,48528,48529,48531,48533],{"class":54,"line":118},[52,48530,14057],{"class":66},[52,48532,70],{"class":58},[52,48534,35424],{"class":73},[52,48536,48537],{"class":54,"line":594},[52,48538,1224],{"class":58},[52,48540,48541,48543,48545],{"class":54,"line":600},[52,48542,121],{"class":58},[52,48544,63],{"class":62},[52,48546,77],{"class":58},[43,48548,48550],{"className":360,"code":48549,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,48551,48552,48560,48566,48574,48586,48590],{"__ignoreMap":48},[52,48553,48554,48556,48558],{"class":54,"line":55},[52,48555,59],{"class":58},[52,48557,63],{"class":371},[52,48559,77],{"class":58},[52,48561,48562,48564],{"class":54,"line":80},[52,48563,83],{"class":58},[52,48565,48518],{"class":371},[52,48567,48568,48570,48572],{"class":54,"line":108},[52,48569,6504],{"class":66},[52,48571,70],{"class":231},[52,48573,6460],{"class":73},[52,48575,48576,48578,48580,48582,48584],{"class":54,"line":118},[52,48577,6514],{"class":66},[52,48579,70],{"class":231},[52,48581,723],{"class":58},[52,48583,5116],{"class":371},[52,48585,729],{"class":58},[52,48587,48588],{"class":54,"line":594},[52,48589,1224],{"class":58},[52,48591,48592,48594,48596],{"class":54,"line":600},[52,48593,121],{"class":58},[52,48595,63],{"class":371},[52,48597,77],{"class":58},[43,48599,48600],{"className":2507,"code":48549,"language":2509,"meta":48,"style":48},[31,48601,48602,48610,48616,48624,48634,48638],{"__ignoreMap":48},[52,48603,48604,48606,48608],{"class":54,"line":55},[52,48605,59],{"class":58},[52,48607,63],{"class":371},[52,48609,77],{"class":58},[52,48611,48612,48614],{"class":54,"line":80},[52,48613,83],{"class":58},[52,48615,48518],{"class":371},[52,48617,48618,48620,48622],{"class":54,"line":108},[52,48619,6504],{"class":66},[52,48621,70],{"class":58},[52,48623,6460],{"class":73},[52,48625,48626,48628,48630,48632],{"class":54,"line":118},[52,48627,6514],{"class":66},[52,48629,24004],{"class":58},[52,48631,5116],{"class":371},[52,48633,729],{"class":58},[52,48635,48636],{"class":54,"line":594},[52,48637,1224],{"class":58},[52,48639,48640,48642,48644],{"class":54,"line":600},[52,48641,121],{"class":58},[52,48643,63],{"class":371},[52,48645,77],{"class":58},[43,48647,48648],{"className":419,"code":48549,"language":420,"meta":48,"style":48},[31,48649,48650,48658,48664,48672,48684,48688],{"__ignoreMap":48},[52,48651,48652,48654,48656],{"class":54,"line":55},[52,48653,59],{"class":58},[52,48655,63],{"class":371},[52,48657,77],{"class":58},[52,48659,48660,48662],{"class":54,"line":80},[52,48661,83],{"class":58},[52,48663,48518],{"class":371},[52,48665,48666,48668,48670],{"class":54,"line":108},[52,48667,6504],{"class":66},[52,48669,70],{"class":231},[52,48671,6460],{"class":73},[52,48673,48674,48676,48678,48680,48682],{"class":54,"line":118},[52,48675,6514],{"class":66},[52,48677,70],{"class":231},[52,48679,723],{"class":58},[52,48681,5116],{"class":371},[52,48683,729],{"class":58},[52,48685,48686],{"class":54,"line":594},[52,48687,1224],{"class":58},[52,48689,48690,48692,48694],{"class":54,"line":600},[52,48691,121],{"class":58},[52,48693,63],{"class":371},[52,48695,77],{"class":58},[43,48697,48699],{"className":222,"code":48698,"language":224,"meta":48,"style":48},"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",[31,48700,48701,48711,48715,48729,48733,48750,48754],{"__ignoreMap":48},[52,48702,48703,48705,48707,48709],{"class":54,"line":55},[52,48704,232],{"class":231},[52,48706,8385],{"class":58},[52,48708,238],{"class":231},[52,48710,8390],{"class":73},[52,48712,48713],{"class":54,"line":80},[52,48714,597],{"emptyLinePlaceholder":171},[52,48716,48717,48719,48721,48723,48725,48727],{"class":54,"line":108},[52,48718,1721],{"class":231},[52,48720,1724],{"class":371},[52,48722,1727],{"class":231},[52,48724,1730],{"class":231},[52,48726,1733],{"class":66},[52,48728,1736],{"class":58},[52,48730,48731],{"class":54,"line":118},[52,48732,1751],{"class":58},[52,48734,48735,48737,48740,48742,48744,48746,48748],{"class":54,"line":594},[52,48736,1756],{"class":58},[52,48738,48739],{"class":73},"'Star'",[52,48741,1762],{"class":58},[52,48743,7039],{"class":73},[52,48745,3431],{"class":58},[52,48747,5116],{"class":371},[52,48749,1768],{"class":58},[52,48751,48752],{"class":54,"line":600},[52,48753,1773],{"class":58},[52,48755,48756],{"class":54,"line":606},[52,48757,1778],{"class":58},[156,48759,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48761},[48762,48763],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/star",{"title":48479,"description":48487},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":48770,"title":48771,"body":48772,"category":26920,"componentType":20001,"description":48779,"extension":168,"meta":48964,"navigation":171,"path":48965,"requiresChild":26923,"seo":48966,"stem":48967,"__hash__":48968},"components/docs/components/Strands.md","Strands",{"type":8,"value":48773,"toc":48960},[48774,48777,48780,48782,48784,48787,48789,48958],[11,48775,48771],{"id":48776},"strands",[15,48778,48779],{},"Procedural wavy strands with layered animation",[26061,48781],{"component":48771},[23,48783,26065],{"id":20662},[26067,48785],{":props":48786},"[{\"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\"}]",[23,48788,26073],{"id":26072},[217,48790,48791,48820,48848,48876,48904],{":tabs":1543},[43,48792,48794],{"className":45,"code":48793,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,48795,48796,48804,48812],{"__ignoreMap":48},[52,48797,48798,48800,48802],{"class":54,"line":55},[52,48799,59],{"class":58},[52,48801,63],{"class":62},[52,48803,77],{"class":58},[52,48805,48806,48808,48810],{"class":54,"line":80},[52,48807,83],{"class":58},[52,48809,48771],{"class":62},[52,48811,105],{"class":58},[52,48813,48814,48816,48818],{"class":54,"line":108},[52,48815,121],{"class":58},[52,48817,63],{"class":62},[52,48819,77],{"class":58},[43,48821,48822],{"className":360,"code":48793,"language":362,"meta":48,"style":48},[31,48823,48824,48832,48840],{"__ignoreMap":48},[52,48825,48826,48828,48830],{"class":54,"line":55},[52,48827,59],{"class":58},[52,48829,63],{"class":371},[52,48831,77],{"class":58},[52,48833,48834,48836,48838],{"class":54,"line":80},[52,48835,83],{"class":58},[52,48837,48771],{"class":371},[52,48839,105],{"class":58},[52,48841,48842,48844,48846],{"class":54,"line":108},[52,48843,121],{"class":58},[52,48845,63],{"class":371},[52,48847,77],{"class":58},[43,48849,48850],{"className":2507,"code":48793,"language":2509,"meta":48,"style":48},[31,48851,48852,48860,48868],{"__ignoreMap":48},[52,48853,48854,48856,48858],{"class":54,"line":55},[52,48855,59],{"class":58},[52,48857,63],{"class":371},[52,48859,77],{"class":58},[52,48861,48862,48864,48866],{"class":54,"line":80},[52,48863,83],{"class":58},[52,48865,48771],{"class":371},[52,48867,105],{"class":58},[52,48869,48870,48872,48874],{"class":54,"line":108},[52,48871,121],{"class":58},[52,48873,63],{"class":371},[52,48875,77],{"class":58},[43,48877,48878],{"className":419,"code":48793,"language":420,"meta":48,"style":48},[31,48879,48880,48888,48896],{"__ignoreMap":48},[52,48881,48882,48884,48886],{"class":54,"line":55},[52,48883,59],{"class":58},[52,48885,63],{"class":371},[52,48887,77],{"class":58},[52,48889,48890,48892,48894],{"class":54,"line":80},[52,48891,83],{"class":58},[52,48893,48771],{"class":371},[52,48895,105],{"class":58},[52,48897,48898,48900,48902],{"class":54,"line":108},[52,48899,121],{"class":58},[52,48901,63],{"class":371},[52,48903,77],{"class":58},[43,48905,48907],{"className":222,"code":48906,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Strands', props: {} }\n ]\n})\n",[31,48908,48909,48919,48923,48937,48941,48950,48954],{"__ignoreMap":48},[52,48910,48911,48913,48915,48917],{"class":54,"line":55},[52,48912,232],{"class":231},[52,48914,8385],{"class":58},[52,48916,238],{"class":231},[52,48918,8390],{"class":73},[52,48920,48921],{"class":54,"line":80},[52,48922,597],{"emptyLinePlaceholder":171},[52,48924,48925,48927,48929,48931,48933,48935],{"class":54,"line":108},[52,48926,1721],{"class":231},[52,48928,1724],{"class":371},[52,48930,1727],{"class":231},[52,48932,1730],{"class":231},[52,48934,1733],{"class":66},[52,48936,1736],{"class":58},[52,48938,48939],{"class":54,"line":118},[52,48940,1751],{"class":58},[52,48942,48943,48945,48948],{"class":54,"line":594},[52,48944,1756],{"class":58},[52,48946,48947],{"class":73},"'Strands'",[52,48949,2129],{"class":58},[52,48951,48952],{"class":54,"line":600},[52,48953,1773],{"class":58},[52,48955,48956],{"class":54,"line":606},[52,48957,1778],{"class":58},[156,48959,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":48961},[48962,48963],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/strands",{"title":48771,"description":48779},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":48970,"title":48971,"body":48972,"category":28265,"componentType":20007,"description":48978,"extension":168,"meta":49239,"navigation":171,"path":49240,"requiresChild":171,"seo":49241,"stem":49242,"__hash__":49243},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":48973,"toc":49235},[48974,48976,48979,48981,48983,48986,48988,49233],[11,48975,48971],{"id":12802},[15,48977,48978],{},"Stretch content towards a direction from a center point",[26061,48980],{"component":48971},[23,48982,26065],{"id":20662},[26067,48984],{":props":48985},"[{\"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\"}]",[23,48987,26073],{"id":26072},[217,48989,48990,49035,49079,49123,49167],{":tabs":1543},[43,48991,48993],{"className":45,"code":48992,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,48994,48995,49003,49011,49019,49027],{"__ignoreMap":48},[52,48996,48997,48999,49001],{"class":54,"line":55},[52,48998,59],{"class":58},[52,49000,63],{"class":62},[52,49002,77],{"class":58},[52,49004,49005,49007,49009],{"class":54,"line":80},[52,49006,83],{"class":58},[52,49008,48971],{"class":62},[52,49010,77],{"class":58},[52,49012,49013,49015,49017],{"class":54,"line":108},[52,49014,2213],{"class":58},[52,49016,2216],{"class":62},[52,49018,105],{"class":58},[52,49020,49021,49023,49025],{"class":54,"line":118},[52,49022,2230],{"class":58},[52,49024,48971],{"class":62},[52,49026,77],{"class":58},[52,49028,49029,49031,49033],{"class":54,"line":594},[52,49030,121],{"class":58},[52,49032,63],{"class":62},[52,49034,77],{"class":58},[43,49036,49037],{"className":360,"code":48992,"language":362,"meta":48,"style":48},[31,49038,49039,49047,49055,49063,49071],{"__ignoreMap":48},[52,49040,49041,49043,49045],{"class":54,"line":55},[52,49042,59],{"class":58},[52,49044,63],{"class":371},[52,49046,77],{"class":58},[52,49048,49049,49051,49053],{"class":54,"line":80},[52,49050,83],{"class":58},[52,49052,48971],{"class":371},[52,49054,77],{"class":58},[52,49056,49057,49059,49061],{"class":54,"line":108},[52,49058,2213],{"class":58},[52,49060,2216],{"class":371},[52,49062,105],{"class":58},[52,49064,49065,49067,49069],{"class":54,"line":118},[52,49066,2230],{"class":58},[52,49068,48971],{"class":371},[52,49070,77],{"class":58},[52,49072,49073,49075,49077],{"class":54,"line":594},[52,49074,121],{"class":58},[52,49076,63],{"class":371},[52,49078,77],{"class":58},[43,49080,49081],{"className":2507,"code":48992,"language":2509,"meta":48,"style":48},[31,49082,49083,49091,49099,49107,49115],{"__ignoreMap":48},[52,49084,49085,49087,49089],{"class":54,"line":55},[52,49086,59],{"class":58},[52,49088,63],{"class":371},[52,49090,77],{"class":58},[52,49092,49093,49095,49097],{"class":54,"line":80},[52,49094,83],{"class":58},[52,49096,48971],{"class":371},[52,49098,77],{"class":58},[52,49100,49101,49103,49105],{"class":54,"line":108},[52,49102,2213],{"class":58},[52,49104,2216],{"class":371},[52,49106,105],{"class":58},[52,49108,49109,49111,49113],{"class":54,"line":118},[52,49110,2230],{"class":58},[52,49112,48971],{"class":371},[52,49114,77],{"class":58},[52,49116,49117,49119,49121],{"class":54,"line":594},[52,49118,121],{"class":58},[52,49120,63],{"class":371},[52,49122,77],{"class":58},[43,49124,49125],{"className":419,"code":48992,"language":420,"meta":48,"style":48},[31,49126,49127,49135,49143,49151,49159],{"__ignoreMap":48},[52,49128,49129,49131,49133],{"class":54,"line":55},[52,49130,59],{"class":58},[52,49132,63],{"class":371},[52,49134,77],{"class":58},[52,49136,49137,49139,49141],{"class":54,"line":80},[52,49138,83],{"class":58},[52,49140,48971],{"class":371},[52,49142,77],{"class":58},[52,49144,49145,49147,49149],{"class":54,"line":108},[52,49146,2213],{"class":58},[52,49148,2216],{"class":371},[52,49150,105],{"class":58},[52,49152,49153,49155,49157],{"class":54,"line":118},[52,49154,2230],{"class":58},[52,49156,48971],{"class":371},[52,49158,77],{"class":58},[52,49160,49161,49163,49165],{"class":54,"line":594},[52,49162,121],{"class":58},[52,49164,63],{"class":371},[52,49166,77],{"class":58},[43,49168,49170],{"className":222,"code":49169,"language":224,"meta":48,"style":48},"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",[31,49171,49172,49182,49186,49200,49204,49213,49221,49225,49229],{"__ignoreMap":48},[52,49173,49174,49176,49178,49180],{"class":54,"line":55},[52,49175,232],{"class":231},[52,49177,8385],{"class":58},[52,49179,238],{"class":231},[52,49181,8390],{"class":73},[52,49183,49184],{"class":54,"line":80},[52,49185,597],{"emptyLinePlaceholder":171},[52,49187,49188,49190,49192,49194,49196,49198],{"class":54,"line":108},[52,49189,1721],{"class":231},[52,49191,1724],{"class":371},[52,49193,1727],{"class":231},[52,49195,1730],{"class":231},[52,49197,1733],{"class":66},[52,49199,1736],{"class":58},[52,49201,49202],{"class":54,"line":118},[52,49203,1751],{"class":58},[52,49205,49206,49208,49211],{"class":54,"line":594},[52,49207,1756],{"class":58},[52,49209,49210],{"class":73},"'Stretch'",[52,49212,3875],{"class":58},[52,49214,49215,49217,49219],{"class":54,"line":600},[52,49216,3880],{"class":58},[52,49218,2869],{"class":73},[52,49220,2129],{"class":58},[52,49222,49223],{"class":54,"line":606},[52,49224,3897],{"class":58},[52,49226,49227],{"class":54,"line":653},[52,49228,1773],{"class":58},[52,49230,49231],{"class":54,"line":662},[52,49232,1778],{"class":58},[156,49234,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":49236},[49237,49238],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/stretch",{"title":48971,"description":48978},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":49245,"title":49246,"body":49247,"category":26920,"componentType":20001,"description":49254,"extension":168,"meta":49439,"navigation":171,"path":49440,"requiresChild":26923,"seo":49441,"stem":49442,"__hash__":49443},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":49248,"toc":49435},[49249,49252,49255,49257,49259,49262,49264,49433],[11,49250,49246],{"id":49251},"stripes",[15,49253,49254],{},"Alternating colored stripes with animation",[26061,49256],{"component":49246},[23,49258,26065],{"id":20662},[26067,49260],{":props":49261},"[{\"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\"}]",[23,49263,26073],{"id":26072},[217,49265,49266,49295,49323,49351,49379],{":tabs":1543},[43,49267,49269],{"className":45,"code":49268,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,49270,49271,49279,49287],{"__ignoreMap":48},[52,49272,49273,49275,49277],{"class":54,"line":55},[52,49274,59],{"class":58},[52,49276,63],{"class":62},[52,49278,77],{"class":58},[52,49280,49281,49283,49285],{"class":54,"line":80},[52,49282,83],{"class":58},[52,49284,49246],{"class":62},[52,49286,105],{"class":58},[52,49288,49289,49291,49293],{"class":54,"line":108},[52,49290,121],{"class":58},[52,49292,63],{"class":62},[52,49294,77],{"class":58},[43,49296,49297],{"className":360,"code":49268,"language":362,"meta":48,"style":48},[31,49298,49299,49307,49315],{"__ignoreMap":48},[52,49300,49301,49303,49305],{"class":54,"line":55},[52,49302,59],{"class":58},[52,49304,63],{"class":371},[52,49306,77],{"class":58},[52,49308,49309,49311,49313],{"class":54,"line":80},[52,49310,83],{"class":58},[52,49312,49246],{"class":371},[52,49314,105],{"class":58},[52,49316,49317,49319,49321],{"class":54,"line":108},[52,49318,121],{"class":58},[52,49320,63],{"class":371},[52,49322,77],{"class":58},[43,49324,49325],{"className":2507,"code":49268,"language":2509,"meta":48,"style":48},[31,49326,49327,49335,49343],{"__ignoreMap":48},[52,49328,49329,49331,49333],{"class":54,"line":55},[52,49330,59],{"class":58},[52,49332,63],{"class":371},[52,49334,77],{"class":58},[52,49336,49337,49339,49341],{"class":54,"line":80},[52,49338,83],{"class":58},[52,49340,49246],{"class":371},[52,49342,105],{"class":58},[52,49344,49345,49347,49349],{"class":54,"line":108},[52,49346,121],{"class":58},[52,49348,63],{"class":371},[52,49350,77],{"class":58},[43,49352,49353],{"className":419,"code":49268,"language":420,"meta":48,"style":48},[31,49354,49355,49363,49371],{"__ignoreMap":48},[52,49356,49357,49359,49361],{"class":54,"line":55},[52,49358,59],{"class":58},[52,49360,63],{"class":371},[52,49362,77],{"class":58},[52,49364,49365,49367,49369],{"class":54,"line":80},[52,49366,83],{"class":58},[52,49368,49246],{"class":371},[52,49370,105],{"class":58},[52,49372,49373,49375,49377],{"class":54,"line":108},[52,49374,121],{"class":58},[52,49376,63],{"class":371},[52,49378,77],{"class":58},[43,49380,49382],{"className":222,"code":49381,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Stripes', props: {} }\n ]\n})\n",[31,49383,49384,49394,49398,49412,49416,49425,49429],{"__ignoreMap":48},[52,49385,49386,49388,49390,49392],{"class":54,"line":55},[52,49387,232],{"class":231},[52,49389,8385],{"class":58},[52,49391,238],{"class":231},[52,49393,8390],{"class":73},[52,49395,49396],{"class":54,"line":80},[52,49397,597],{"emptyLinePlaceholder":171},[52,49399,49400,49402,49404,49406,49408,49410],{"class":54,"line":108},[52,49401,1721],{"class":231},[52,49403,1724],{"class":371},[52,49405,1727],{"class":231},[52,49407,1730],{"class":231},[52,49409,1733],{"class":66},[52,49411,1736],{"class":58},[52,49413,49414],{"class":54,"line":118},[52,49415,1751],{"class":58},[52,49417,49418,49420,49423],{"class":54,"line":594},[52,49419,1756],{"class":58},[52,49421,49422],{"class":73},"'Stripes'",[52,49424,2129],{"class":58},[52,49426,49427],{"class":54,"line":600},[52,49428,1773],{"class":58},[52,49430,49431],{"class":54,"line":606},[52,49432,1778],{"class":58},[156,49434,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":49436},[49437,49438],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/stripes",{"title":49246,"description":49254},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":49445,"title":49446,"body":49447,"category":26920,"componentType":20001,"description":49454,"extension":168,"meta":49686,"navigation":171,"path":49687,"requiresChild":26923,"seo":49688,"stem":49689,"__hash__":49690},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":49448,"toc":49682},[49449,49452,49455,49457,49459,49462,49464,49680],[11,49450,49446],{"id":49451},"studiobackground",[15,49453,49454],{},"Multi-light studio background with ambient motion.",[26061,49456],{"component":49446},[23,49458,26065],{"id":20662},[26067,49460],{":props":49461},"[{\"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\"}]",[23,49463,26073],{"id":26072},[217,49465,49466,49507,49545,49583,49621],{":tabs":1543},[43,49467,49469],{"className":45,"code":49468,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,49470,49471,49479,49486,49495,49499],{"__ignoreMap":48},[52,49472,49473,49475,49477],{"class":54,"line":55},[52,49474,59],{"class":58},[52,49476,63],{"class":62},[52,49478,77],{"class":58},[52,49480,49481,49483],{"class":54,"line":80},[52,49482,83],{"class":58},[52,49484,49485],{"class":62},"StudioBackground\n",[52,49487,49488,49490,49492],{"class":54,"line":108},[52,49489,6504],{"class":66},[52,49491,70],{"class":58},[52,49493,49494],{"class":73},"\"#d8dbec\"\n",[52,49496,49497],{"class":54,"line":118},[52,49498,1224],{"class":58},[52,49500,49501,49503,49505],{"class":54,"line":594},[52,49502,121],{"class":58},[52,49504,63],{"class":62},[52,49506,77],{"class":58},[43,49508,49509],{"className":360,"code":49468,"language":362,"meta":48,"style":48},[31,49510,49511,49519,49525,49533,49537],{"__ignoreMap":48},[52,49512,49513,49515,49517],{"class":54,"line":55},[52,49514,59],{"class":58},[52,49516,63],{"class":371},[52,49518,77],{"class":58},[52,49520,49521,49523],{"class":54,"line":80},[52,49522,83],{"class":58},[52,49524,49485],{"class":371},[52,49526,49527,49529,49531],{"class":54,"line":108},[52,49528,6504],{"class":66},[52,49530,70],{"class":231},[52,49532,49494],{"class":73},[52,49534,49535],{"class":54,"line":118},[52,49536,1224],{"class":58},[52,49538,49539,49541,49543],{"class":54,"line":594},[52,49540,121],{"class":58},[52,49542,63],{"class":371},[52,49544,77],{"class":58},[43,49546,49547],{"className":2507,"code":49468,"language":2509,"meta":48,"style":48},[31,49548,49549,49557,49563,49571,49575],{"__ignoreMap":48},[52,49550,49551,49553,49555],{"class":54,"line":55},[52,49552,59],{"class":58},[52,49554,63],{"class":371},[52,49556,77],{"class":58},[52,49558,49559,49561],{"class":54,"line":80},[52,49560,83],{"class":58},[52,49562,49485],{"class":371},[52,49564,49565,49567,49569],{"class":54,"line":108},[52,49566,6504],{"class":66},[52,49568,70],{"class":58},[52,49570,49494],{"class":73},[52,49572,49573],{"class":54,"line":118},[52,49574,1224],{"class":58},[52,49576,49577,49579,49581],{"class":54,"line":594},[52,49578,121],{"class":58},[52,49580,63],{"class":371},[52,49582,77],{"class":58},[43,49584,49585],{"className":419,"code":49468,"language":420,"meta":48,"style":48},[31,49586,49587,49595,49601,49609,49613],{"__ignoreMap":48},[52,49588,49589,49591,49593],{"class":54,"line":55},[52,49590,59],{"class":58},[52,49592,63],{"class":371},[52,49594,77],{"class":58},[52,49596,49597,49599],{"class":54,"line":80},[52,49598,83],{"class":58},[52,49600,49485],{"class":371},[52,49602,49603,49605,49607],{"class":54,"line":108},[52,49604,6504],{"class":66},[52,49606,70],{"class":231},[52,49608,49494],{"class":73},[52,49610,49611],{"class":54,"line":118},[52,49612,1224],{"class":58},[52,49614,49615,49617,49619],{"class":54,"line":594},[52,49616,121],{"class":58},[52,49618,63],{"class":371},[52,49620,77],{"class":58},[43,49622,49624],{"className":222,"code":49623,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'StudioBackground', props: { color: '#d8dbec' } }\n ]\n})\n",[31,49625,49626,49636,49640,49654,49658,49672,49676],{"__ignoreMap":48},[52,49627,49628,49630,49632,49634],{"class":54,"line":55},[52,49629,232],{"class":231},[52,49631,8385],{"class":58},[52,49633,238],{"class":231},[52,49635,8390],{"class":73},[52,49637,49638],{"class":54,"line":80},[52,49639,597],{"emptyLinePlaceholder":171},[52,49641,49642,49644,49646,49648,49650,49652],{"class":54,"line":108},[52,49643,1721],{"class":231},[52,49645,1724],{"class":371},[52,49647,1727],{"class":231},[52,49649,1730],{"class":231},[52,49651,1733],{"class":66},[52,49653,1736],{"class":58},[52,49655,49656],{"class":54,"line":118},[52,49657,1751],{"class":58},[52,49659,49660,49662,49665,49667,49670],{"class":54,"line":594},[52,49661,1756],{"class":58},[52,49663,49664],{"class":73},"'StudioBackground'",[52,49666,1762],{"class":58},[52,49668,49669],{"class":73},"'#d8dbec'",[52,49671,1768],{"class":58},[52,49673,49674],{"class":54,"line":600},[52,49675,1773],{"class":58},[52,49677,49678],{"class":54,"line":606},[52,49679,1778],{"class":58},[156,49681,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49683},[49684,49685],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/studiobackground",{"title":49446,"description":49454},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":49692,"title":10876,"body":49693,"category":26920,"componentType":20001,"description":49700,"extension":168,"meta":49885,"navigation":171,"path":49886,"requiresChild":26923,"seo":49887,"stem":49888,"__hash__":49889},"components/docs/components/Swirl.md",{"type":8,"value":49694,"toc":49881},[49695,49698,49701,49703,49705,49708,49710,49879],[11,49696,10876],{"id":49697},"swirl",[15,49699,49700],{},"Flowing swirl pattern with multi-layered noise",[26061,49702],{"component":10876},[23,49704,26065],{"id":20662},[26067,49706],{":props":49707},"[{\"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\"}]",[23,49709,26073],{"id":26072},[217,49711,49712,49741,49769,49797,49825],{":tabs":1543},[43,49713,49715],{"className":45,"code":49714,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,49716,49717,49725,49733],{"__ignoreMap":48},[52,49718,49719,49721,49723],{"class":54,"line":55},[52,49720,59],{"class":58},[52,49722,63],{"class":62},[52,49724,77],{"class":58},[52,49726,49727,49729,49731],{"class":54,"line":80},[52,49728,83],{"class":58},[52,49730,10876],{"class":62},[52,49732,105],{"class":58},[52,49734,49735,49737,49739],{"class":54,"line":108},[52,49736,121],{"class":58},[52,49738,63],{"class":62},[52,49740,77],{"class":58},[43,49742,49743],{"className":360,"code":49714,"language":362,"meta":48,"style":48},[31,49744,49745,49753,49761],{"__ignoreMap":48},[52,49746,49747,49749,49751],{"class":54,"line":55},[52,49748,59],{"class":58},[52,49750,63],{"class":371},[52,49752,77],{"class":58},[52,49754,49755,49757,49759],{"class":54,"line":80},[52,49756,83],{"class":58},[52,49758,10876],{"class":371},[52,49760,105],{"class":58},[52,49762,49763,49765,49767],{"class":54,"line":108},[52,49764,121],{"class":58},[52,49766,63],{"class":371},[52,49768,77],{"class":58},[43,49770,49771],{"className":2507,"code":49714,"language":2509,"meta":48,"style":48},[31,49772,49773,49781,49789],{"__ignoreMap":48},[52,49774,49775,49777,49779],{"class":54,"line":55},[52,49776,59],{"class":58},[52,49778,63],{"class":371},[52,49780,77],{"class":58},[52,49782,49783,49785,49787],{"class":54,"line":80},[52,49784,83],{"class":58},[52,49786,10876],{"class":371},[52,49788,105],{"class":58},[52,49790,49791,49793,49795],{"class":54,"line":108},[52,49792,121],{"class":58},[52,49794,63],{"class":371},[52,49796,77],{"class":58},[43,49798,49799],{"className":419,"code":49714,"language":420,"meta":48,"style":48},[31,49800,49801,49809,49817],{"__ignoreMap":48},[52,49802,49803,49805,49807],{"class":54,"line":55},[52,49804,59],{"class":58},[52,49806,63],{"class":371},[52,49808,77],{"class":58},[52,49810,49811,49813,49815],{"class":54,"line":80},[52,49812,83],{"class":58},[52,49814,10876],{"class":371},[52,49816,105],{"class":58},[52,49818,49819,49821,49823],{"class":54,"line":108},[52,49820,121],{"class":58},[52,49822,63],{"class":371},[52,49824,77],{"class":58},[43,49826,49828],{"className":222,"code":49827,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Swirl', props: {} }\n ]\n})\n",[31,49829,49830,49840,49844,49858,49862,49871,49875],{"__ignoreMap":48},[52,49831,49832,49834,49836,49838],{"class":54,"line":55},[52,49833,232],{"class":231},[52,49835,8385],{"class":58},[52,49837,238],{"class":231},[52,49839,8390],{"class":73},[52,49841,49842],{"class":54,"line":80},[52,49843,597],{"emptyLinePlaceholder":171},[52,49845,49846,49848,49850,49852,49854,49856],{"class":54,"line":108},[52,49847,1721],{"class":231},[52,49849,1724],{"class":371},[52,49851,1727],{"class":231},[52,49853,1730],{"class":231},[52,49855,1733],{"class":66},[52,49857,1736],{"class":58},[52,49859,49860],{"class":54,"line":118},[52,49861,1751],{"class":58},[52,49863,49864,49866,49869],{"class":54,"line":594},[52,49865,1756],{"class":58},[52,49867,49868],{"class":73},"'Swirl'",[52,49870,2129],{"class":58},[52,49872,49873],{"class":54,"line":600},[52,49874,1773],{"class":58},[52,49876,49877],{"class":54,"line":606},[52,49878,1778],{"class":58},[156,49880,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":49882},[49883,49884],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/swirl",{"title":10876,"description":49700},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":49891,"title":49892,"body":49893,"category":26385,"componentType":20007,"description":49900,"extension":168,"meta":50217,"navigation":171,"path":50218,"requiresChild":171,"seo":50219,"stem":50220,"__hash__":50221},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":49894,"toc":50213},[49895,49898,49901,49903,49905,49908,49910,50211],[11,49896,49892],{"id":49897},"tiltshift",[15,49899,49900],{},"Selective focus blur mimicking tilt-shift photography",[26061,49902],{"component":49892},[23,49904,26065],{"id":20662},[26067,49906],{":props":49907},"[{\"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\"}]",[23,49909,26073],{"id":26072},[217,49911,49912,49968,50027,50083,50141],{":tabs":1543},[43,49913,49915],{"className":45,"code":49914,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,49916,49917,49925,49932,49940,49944,49952,49960],{"__ignoreMap":48},[52,49918,49919,49921,49923],{"class":54,"line":55},[52,49920,59],{"class":58},[52,49922,63],{"class":62},[52,49924,77],{"class":58},[52,49926,49927,49929],{"class":54,"line":80},[52,49928,83],{"class":58},[52,49930,49931],{"class":62},"TiltShift\n",[52,49933,49934,49936,49938],{"class":54,"line":108},[52,49935,17026],{"class":66},[52,49937,70],{"class":58},[52,49939,27376],{"class":73},[52,49941,49942],{"class":54,"line":118},[52,49943,26109],{"class":58},[52,49945,49946,49948,49950],{"class":54,"line":594},[52,49947,2213],{"class":58},[52,49949,2216],{"class":62},[52,49951,105],{"class":58},[52,49953,49954,49956,49958],{"class":54,"line":600},[52,49955,2230],{"class":58},[52,49957,49892],{"class":62},[52,49959,77],{"class":58},[52,49961,49962,49964,49966],{"class":54,"line":606},[52,49963,121],{"class":58},[52,49965,63],{"class":62},[52,49967,77],{"class":58},[43,49969,49971],{"className":360,"code":49970,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,49972,49973,49981,49987,49999,50003,50011,50019],{"__ignoreMap":48},[52,49974,49975,49977,49979],{"class":54,"line":55},[52,49976,59],{"class":58},[52,49978,63],{"class":371},[52,49980,77],{"class":58},[52,49982,49983,49985],{"class":54,"line":80},[52,49984,83],{"class":58},[52,49986,49931],{"class":371},[52,49988,49989,49991,49993,49995,49997],{"class":54,"line":108},[52,49990,17137],{"class":66},[52,49992,70],{"class":231},[52,49994,723],{"class":58},[52,49996,27434],{"class":371},[52,49998,729],{"class":58},[52,50000,50001],{"class":54,"line":118},[52,50002,26109],{"class":58},[52,50004,50005,50007,50009],{"class":54,"line":594},[52,50006,2213],{"class":58},[52,50008,2216],{"class":371},[52,50010,105],{"class":58},[52,50012,50013,50015,50017],{"class":54,"line":600},[52,50014,2230],{"class":58},[52,50016,49892],{"class":371},[52,50018,77],{"class":58},[52,50020,50021,50023,50025],{"class":54,"line":606},[52,50022,121],{"class":58},[52,50024,63],{"class":371},[52,50026,77],{"class":58},[43,50028,50029],{"className":2507,"code":49970,"language":2509,"meta":48,"style":48},[31,50030,50031,50039,50045,50055,50059,50067,50075],{"__ignoreMap":48},[52,50032,50033,50035,50037],{"class":54,"line":55},[52,50034,59],{"class":58},[52,50036,63],{"class":371},[52,50038,77],{"class":58},[52,50040,50041,50043],{"class":54,"line":80},[52,50042,83],{"class":58},[52,50044,49931],{"class":371},[52,50046,50047,50049,50051,50053],{"class":54,"line":108},[52,50048,17137],{"class":66},[52,50050,24004],{"class":58},[52,50052,27434],{"class":371},[52,50054,729],{"class":58},[52,50056,50057],{"class":54,"line":118},[52,50058,26109],{"class":58},[52,50060,50061,50063,50065],{"class":54,"line":594},[52,50062,2213],{"class":58},[52,50064,2216],{"class":371},[52,50066,105],{"class":58},[52,50068,50069,50071,50073],{"class":54,"line":600},[52,50070,2230],{"class":58},[52,50072,49892],{"class":371},[52,50074,77],{"class":58},[52,50076,50077,50079,50081],{"class":54,"line":606},[52,50078,121],{"class":58},[52,50080,63],{"class":371},[52,50082,77],{"class":58},[43,50084,50085],{"className":419,"code":49970,"language":420,"meta":48,"style":48},[31,50086,50087,50095,50101,50113,50117,50125,50133],{"__ignoreMap":48},[52,50088,50089,50091,50093],{"class":54,"line":55},[52,50090,59],{"class":58},[52,50092,63],{"class":371},[52,50094,77],{"class":58},[52,50096,50097,50099],{"class":54,"line":80},[52,50098,83],{"class":58},[52,50100,49931],{"class":371},[52,50102,50103,50105,50107,50109,50111],{"class":54,"line":108},[52,50104,17137],{"class":66},[52,50106,70],{"class":231},[52,50108,723],{"class":58},[52,50110,27434],{"class":371},[52,50112,729],{"class":58},[52,50114,50115],{"class":54,"line":118},[52,50116,26109],{"class":58},[52,50118,50119,50121,50123],{"class":54,"line":594},[52,50120,2213],{"class":58},[52,50122,2216],{"class":371},[52,50124,105],{"class":58},[52,50126,50127,50129,50131],{"class":54,"line":600},[52,50128,2230],{"class":58},[52,50130,49892],{"class":371},[52,50132,77],{"class":58},[52,50134,50135,50137,50139],{"class":54,"line":606},[52,50136,121],{"class":58},[52,50138,63],{"class":371},[52,50140,77],{"class":58},[43,50142,50144],{"className":222,"code":50143,"language":224,"meta":48,"style":48},"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",[31,50145,50146,50156,50160,50174,50178,50191,50199,50203,50207],{"__ignoreMap":48},[52,50147,50148,50150,50152,50154],{"class":54,"line":55},[52,50149,232],{"class":231},[52,50151,8385],{"class":58},[52,50153,238],{"class":231},[52,50155,8390],{"class":73},[52,50157,50158],{"class":54,"line":80},[52,50159,597],{"emptyLinePlaceholder":171},[52,50161,50162,50164,50166,50168,50170,50172],{"class":54,"line":108},[52,50163,1721],{"class":231},[52,50165,1724],{"class":371},[52,50167,1727],{"class":231},[52,50169,1730],{"class":231},[52,50171,1733],{"class":66},[52,50173,1736],{"class":58},[52,50175,50176],{"class":54,"line":118},[52,50177,1751],{"class":58},[52,50179,50180,50182,50185,50187,50189],{"class":54,"line":594},[52,50181,1756],{"class":58},[52,50183,50184],{"class":73},"'TiltShift'",[52,50186,26354],{"class":58},[52,50188,27434],{"class":371},[52,50190,4412],{"class":58},[52,50192,50193,50195,50197],{"class":54,"line":600},[52,50194,3880],{"class":58},[52,50196,2869],{"class":73},[52,50198,2129],{"class":58},[52,50200,50201],{"class":54,"line":606},[52,50202,3897],{"class":58},[52,50204,50205],{"class":54,"line":653},[52,50206,1773],{"class":58},[52,50208,50209],{"class":54,"line":662},[52,50210,1778],{"class":58},[156,50212,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50214},[50215,50216],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/tiltshift",{"title":49892,"description":49900},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":50223,"title":50224,"body":50225,"category":27931,"componentType":20007,"description":50232,"extension":168,"meta":50540,"navigation":171,"path":50541,"requiresChild":171,"seo":50542,"stem":50543,"__hash__":50544},"components/docs/components/Tint.md","Tint",{"type":8,"value":50226,"toc":50536},[50227,50230,50233,50235,50237,50240,50242,50534],[11,50228,50224],{"id":50229},"tint",[15,50231,50232],{},"Apply a color tint to the image",[26061,50234],{"component":50224},[23,50236,26065],{"id":20662},[26067,50238],{":props":50239},"[{\"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\"}]",[23,50241,26073],{"id":26072},[217,50243,50244,50301,50355,50409,50463],{":tabs":1543},[43,50245,50247],{"className":45,"code":50246,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,50248,50249,50257,50264,50273,50277,50285,50293],{"__ignoreMap":48},[52,50250,50251,50253,50255],{"class":54,"line":55},[52,50252,59],{"class":58},[52,50254,63],{"class":62},[52,50256,77],{"class":58},[52,50258,50259,50261],{"class":54,"line":80},[52,50260,83],{"class":58},[52,50262,50263],{"class":62},"Tint\n",[52,50265,50266,50268,50270],{"class":54,"line":108},[52,50267,6504],{"class":66},[52,50269,70],{"class":58},[52,50271,50272],{"class":73},"\"#ff8800\"\n",[52,50274,50275],{"class":54,"line":118},[52,50276,26109],{"class":58},[52,50278,50279,50281,50283],{"class":54,"line":594},[52,50280,2213],{"class":58},[52,50282,2216],{"class":62},[52,50284,105],{"class":58},[52,50286,50287,50289,50291],{"class":54,"line":600},[52,50288,2230],{"class":58},[52,50290,50224],{"class":62},[52,50292,77],{"class":58},[52,50294,50295,50297,50299],{"class":54,"line":606},[52,50296,121],{"class":58},[52,50298,63],{"class":62},[52,50300,77],{"class":58},[43,50302,50303],{"className":360,"code":50246,"language":362,"meta":48,"style":48},[31,50304,50305,50313,50319,50327,50331,50339,50347],{"__ignoreMap":48},[52,50306,50307,50309,50311],{"class":54,"line":55},[52,50308,59],{"class":58},[52,50310,63],{"class":371},[52,50312,77],{"class":58},[52,50314,50315,50317],{"class":54,"line":80},[52,50316,83],{"class":58},[52,50318,50263],{"class":371},[52,50320,50321,50323,50325],{"class":54,"line":108},[52,50322,6504],{"class":66},[52,50324,70],{"class":231},[52,50326,50272],{"class":73},[52,50328,50329],{"class":54,"line":118},[52,50330,26109],{"class":58},[52,50332,50333,50335,50337],{"class":54,"line":594},[52,50334,2213],{"class":58},[52,50336,2216],{"class":371},[52,50338,105],{"class":58},[52,50340,50341,50343,50345],{"class":54,"line":600},[52,50342,2230],{"class":58},[52,50344,50224],{"class":371},[52,50346,77],{"class":58},[52,50348,50349,50351,50353],{"class":54,"line":606},[52,50350,121],{"class":58},[52,50352,63],{"class":371},[52,50354,77],{"class":58},[43,50356,50357],{"className":2507,"code":50246,"language":2509,"meta":48,"style":48},[31,50358,50359,50367,50373,50381,50385,50393,50401],{"__ignoreMap":48},[52,50360,50361,50363,50365],{"class":54,"line":55},[52,50362,59],{"class":58},[52,50364,63],{"class":371},[52,50366,77],{"class":58},[52,50368,50369,50371],{"class":54,"line":80},[52,50370,83],{"class":58},[52,50372,50263],{"class":371},[52,50374,50375,50377,50379],{"class":54,"line":108},[52,50376,6504],{"class":66},[52,50378,70],{"class":58},[52,50380,50272],{"class":73},[52,50382,50383],{"class":54,"line":118},[52,50384,26109],{"class":58},[52,50386,50387,50389,50391],{"class":54,"line":594},[52,50388,2213],{"class":58},[52,50390,2216],{"class":371},[52,50392,105],{"class":58},[52,50394,50395,50397,50399],{"class":54,"line":600},[52,50396,2230],{"class":58},[52,50398,50224],{"class":371},[52,50400,77],{"class":58},[52,50402,50403,50405,50407],{"class":54,"line":606},[52,50404,121],{"class":58},[52,50406,63],{"class":371},[52,50408,77],{"class":58},[43,50410,50411],{"className":419,"code":50246,"language":420,"meta":48,"style":48},[31,50412,50413,50421,50427,50435,50439,50447,50455],{"__ignoreMap":48},[52,50414,50415,50417,50419],{"class":54,"line":55},[52,50416,59],{"class":58},[52,50418,63],{"class":371},[52,50420,77],{"class":58},[52,50422,50423,50425],{"class":54,"line":80},[52,50424,83],{"class":58},[52,50426,50263],{"class":371},[52,50428,50429,50431,50433],{"class":54,"line":108},[52,50430,6504],{"class":66},[52,50432,70],{"class":231},[52,50434,50272],{"class":73},[52,50436,50437],{"class":54,"line":118},[52,50438,26109],{"class":58},[52,50440,50441,50443,50445],{"class":54,"line":594},[52,50442,2213],{"class":58},[52,50444,2216],{"class":371},[52,50446,105],{"class":58},[52,50448,50449,50451,50453],{"class":54,"line":600},[52,50450,2230],{"class":58},[52,50452,50224],{"class":371},[52,50454,77],{"class":58},[52,50456,50457,50459,50461],{"class":54,"line":606},[52,50458,121],{"class":58},[52,50460,63],{"class":371},[52,50462,77],{"class":58},[43,50464,50466],{"className":222,"code":50465,"language":224,"meta":48,"style":48},"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",[31,50467,50468,50478,50482,50496,50500,50514,50522,50526,50530],{"__ignoreMap":48},[52,50469,50470,50472,50474,50476],{"class":54,"line":55},[52,50471,232],{"class":231},[52,50473,8385],{"class":58},[52,50475,238],{"class":231},[52,50477,8390],{"class":73},[52,50479,50480],{"class":54,"line":80},[52,50481,597],{"emptyLinePlaceholder":171},[52,50483,50484,50486,50488,50490,50492,50494],{"class":54,"line":108},[52,50485,1721],{"class":231},[52,50487,1724],{"class":371},[52,50489,1727],{"class":231},[52,50491,1730],{"class":231},[52,50493,1733],{"class":66},[52,50495,1736],{"class":58},[52,50497,50498],{"class":54,"line":118},[52,50499,1751],{"class":58},[52,50501,50502,50504,50507,50509,50512],{"class":54,"line":594},[52,50503,1756],{"class":58},[52,50505,50506],{"class":73},"'Tint'",[52,50508,1762],{"class":58},[52,50510,50511],{"class":73},"'#ff8800'",[52,50513,4412],{"class":58},[52,50515,50516,50518,50520],{"class":54,"line":600},[52,50517,3880],{"class":58},[52,50519,2869],{"class":73},[52,50521,2129],{"class":58},[52,50523,50524],{"class":54,"line":606},[52,50525,3897],{"class":58},[52,50527,50528],{"class":54,"line":653},[52,50529,1773],{"class":58},[52,50531,50532],{"class":54,"line":662},[52,50533,1778],{"class":58},[156,50535,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50537},[50538,50539],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/tint",{"title":50224,"description":50232},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":50546,"title":50547,"body":50548,"category":29887,"componentType":20001,"description":50555,"extension":168,"meta":50785,"navigation":171,"path":50786,"requiresChild":26923,"seo":50787,"stem":50788,"__hash__":50789},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":50549,"toc":50781},[50550,50553,50556,50558,50560,50563,50565,50779],[11,50551,50547],{"id":50552},"trapezoid",[15,50554,50555],{},"Trapezoid with adjustable top and bottom widths and height",[26061,50557],{"component":50547},[23,50559,26065],{"id":20662},[26067,50561],{":props":50562},"[{\"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\"}]",[23,50564,26073],{"id":26072},[217,50566,50567,50607,50645,50683,50721],{":tabs":1543},[43,50568,50570],{"className":45,"code":50569,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,50571,50572,50580,50587,50595,50599],{"__ignoreMap":48},[52,50573,50574,50576,50578],{"class":54,"line":55},[52,50575,59],{"class":58},[52,50577,63],{"class":62},[52,50579,77],{"class":58},[52,50581,50582,50584],{"class":54,"line":80},[52,50583,83],{"class":58},[52,50585,50586],{"class":62},"Trapezoid\n",[52,50588,50589,50591,50593],{"class":54,"line":108},[52,50590,6504],{"class":66},[52,50592,70],{"class":58},[52,50594,6460],{"class":73},[52,50596,50597],{"class":54,"line":118},[52,50598,1224],{"class":58},[52,50600,50601,50603,50605],{"class":54,"line":594},[52,50602,121],{"class":58},[52,50604,63],{"class":62},[52,50606,77],{"class":58},[43,50608,50609],{"className":360,"code":50569,"language":362,"meta":48,"style":48},[31,50610,50611,50619,50625,50633,50637],{"__ignoreMap":48},[52,50612,50613,50615,50617],{"class":54,"line":55},[52,50614,59],{"class":58},[52,50616,63],{"class":371},[52,50618,77],{"class":58},[52,50620,50621,50623],{"class":54,"line":80},[52,50622,83],{"class":58},[52,50624,50586],{"class":371},[52,50626,50627,50629,50631],{"class":54,"line":108},[52,50628,6504],{"class":66},[52,50630,70],{"class":231},[52,50632,6460],{"class":73},[52,50634,50635],{"class":54,"line":118},[52,50636,1224],{"class":58},[52,50638,50639,50641,50643],{"class":54,"line":594},[52,50640,121],{"class":58},[52,50642,63],{"class":371},[52,50644,77],{"class":58},[43,50646,50647],{"className":2507,"code":50569,"language":2509,"meta":48,"style":48},[31,50648,50649,50657,50663,50671,50675],{"__ignoreMap":48},[52,50650,50651,50653,50655],{"class":54,"line":55},[52,50652,59],{"class":58},[52,50654,63],{"class":371},[52,50656,77],{"class":58},[52,50658,50659,50661],{"class":54,"line":80},[52,50660,83],{"class":58},[52,50662,50586],{"class":371},[52,50664,50665,50667,50669],{"class":54,"line":108},[52,50666,6504],{"class":66},[52,50668,70],{"class":58},[52,50670,6460],{"class":73},[52,50672,50673],{"class":54,"line":118},[52,50674,1224],{"class":58},[52,50676,50677,50679,50681],{"class":54,"line":594},[52,50678,121],{"class":58},[52,50680,63],{"class":371},[52,50682,77],{"class":58},[43,50684,50685],{"className":419,"code":50569,"language":420,"meta":48,"style":48},[31,50686,50687,50695,50701,50709,50713],{"__ignoreMap":48},[52,50688,50689,50691,50693],{"class":54,"line":55},[52,50690,59],{"class":58},[52,50692,63],{"class":371},[52,50694,77],{"class":58},[52,50696,50697,50699],{"class":54,"line":80},[52,50698,83],{"class":58},[52,50700,50586],{"class":371},[52,50702,50703,50705,50707],{"class":54,"line":108},[52,50704,6504],{"class":66},[52,50706,70],{"class":231},[52,50708,6460],{"class":73},[52,50710,50711],{"class":54,"line":118},[52,50712,1224],{"class":58},[52,50714,50715,50717,50719],{"class":54,"line":594},[52,50716,121],{"class":58},[52,50718,63],{"class":371},[52,50720,77],{"class":58},[43,50722,50724],{"className":222,"code":50723,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Trapezoid', props: { color: '#ffffff' } }\n ]\n})\n",[31,50725,50726,50736,50740,50754,50758,50771,50775],{"__ignoreMap":48},[52,50727,50728,50730,50732,50734],{"class":54,"line":55},[52,50729,232],{"class":231},[52,50731,8385],{"class":58},[52,50733,238],{"class":231},[52,50735,8390],{"class":73},[52,50737,50738],{"class":54,"line":80},[52,50739,597],{"emptyLinePlaceholder":171},[52,50741,50742,50744,50746,50748,50750,50752],{"class":54,"line":108},[52,50743,1721],{"class":231},[52,50745,1724],{"class":371},[52,50747,1727],{"class":231},[52,50749,1730],{"class":231},[52,50751,1733],{"class":66},[52,50753,1736],{"class":58},[52,50755,50756],{"class":54,"line":118},[52,50757,1751],{"class":58},[52,50759,50760,50762,50765,50767,50769],{"class":54,"line":594},[52,50761,1756],{"class":58},[52,50763,50764],{"class":73},"'Trapezoid'",[52,50766,1762],{"class":58},[52,50768,7039],{"class":73},[52,50770,1768],{"class":58},[52,50772,50773],{"class":54,"line":600},[52,50774,1773],{"class":58},[52,50776,50777],{"class":54,"line":606},[52,50778,1778],{"class":58},[156,50780,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50782},[50783,50784],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/trapezoid",{"title":50547,"description":50555},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":50791,"title":50792,"body":50793,"category":27931,"componentType":20007,"description":50800,"extension":168,"meta":51061,"navigation":171,"path":51062,"requiresChild":171,"seo":51063,"stem":51064,"__hash__":51065},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":50794,"toc":51057},[50795,50798,50801,50803,50805,50808,50810,51055],[11,50796,50792],{"id":50797},"tritone",[15,50799,50800],{},"Map colors to three tones: shadows, midtones, highlights",[26061,50802],{"component":50792},[23,50804,26065],{"id":20662},[26067,50806],{":props":50807},"[{\"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\"}]",[23,50809,26073],{"id":26072},[217,50811,50812,50857,50901,50945,50989],{":tabs":1543},[43,50813,50815],{"className":45,"code":50814,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,50816,50817,50825,50833,50841,50849],{"__ignoreMap":48},[52,50818,50819,50821,50823],{"class":54,"line":55},[52,50820,59],{"class":58},[52,50822,63],{"class":62},[52,50824,77],{"class":58},[52,50826,50827,50829,50831],{"class":54,"line":80},[52,50828,83],{"class":58},[52,50830,50792],{"class":62},[52,50832,77],{"class":58},[52,50834,50835,50837,50839],{"class":54,"line":108},[52,50836,2213],{"class":58},[52,50838,2216],{"class":62},[52,50840,105],{"class":58},[52,50842,50843,50845,50847],{"class":54,"line":118},[52,50844,2230],{"class":58},[52,50846,50792],{"class":62},[52,50848,77],{"class":58},[52,50850,50851,50853,50855],{"class":54,"line":594},[52,50852,121],{"class":58},[52,50854,63],{"class":62},[52,50856,77],{"class":58},[43,50858,50859],{"className":360,"code":50814,"language":362,"meta":48,"style":48},[31,50860,50861,50869,50877,50885,50893],{"__ignoreMap":48},[52,50862,50863,50865,50867],{"class":54,"line":55},[52,50864,59],{"class":58},[52,50866,63],{"class":371},[52,50868,77],{"class":58},[52,50870,50871,50873,50875],{"class":54,"line":80},[52,50872,83],{"class":58},[52,50874,50792],{"class":371},[52,50876,77],{"class":58},[52,50878,50879,50881,50883],{"class":54,"line":108},[52,50880,2213],{"class":58},[52,50882,2216],{"class":371},[52,50884,105],{"class":58},[52,50886,50887,50889,50891],{"class":54,"line":118},[52,50888,2230],{"class":58},[52,50890,50792],{"class":371},[52,50892,77],{"class":58},[52,50894,50895,50897,50899],{"class":54,"line":594},[52,50896,121],{"class":58},[52,50898,63],{"class":371},[52,50900,77],{"class":58},[43,50902,50903],{"className":2507,"code":50814,"language":2509,"meta":48,"style":48},[31,50904,50905,50913,50921,50929,50937],{"__ignoreMap":48},[52,50906,50907,50909,50911],{"class":54,"line":55},[52,50908,59],{"class":58},[52,50910,63],{"class":371},[52,50912,77],{"class":58},[52,50914,50915,50917,50919],{"class":54,"line":80},[52,50916,83],{"class":58},[52,50918,50792],{"class":371},[52,50920,77],{"class":58},[52,50922,50923,50925,50927],{"class":54,"line":108},[52,50924,2213],{"class":58},[52,50926,2216],{"class":371},[52,50928,105],{"class":58},[52,50930,50931,50933,50935],{"class":54,"line":118},[52,50932,2230],{"class":58},[52,50934,50792],{"class":371},[52,50936,77],{"class":58},[52,50938,50939,50941,50943],{"class":54,"line":594},[52,50940,121],{"class":58},[52,50942,63],{"class":371},[52,50944,77],{"class":58},[43,50946,50947],{"className":419,"code":50814,"language":420,"meta":48,"style":48},[31,50948,50949,50957,50965,50973,50981],{"__ignoreMap":48},[52,50950,50951,50953,50955],{"class":54,"line":55},[52,50952,59],{"class":58},[52,50954,63],{"class":371},[52,50956,77],{"class":58},[52,50958,50959,50961,50963],{"class":54,"line":80},[52,50960,83],{"class":58},[52,50962,50792],{"class":371},[52,50964,77],{"class":58},[52,50966,50967,50969,50971],{"class":54,"line":108},[52,50968,2213],{"class":58},[52,50970,2216],{"class":371},[52,50972,105],{"class":58},[52,50974,50975,50977,50979],{"class":54,"line":118},[52,50976,2230],{"class":58},[52,50978,50792],{"class":371},[52,50980,77],{"class":58},[52,50982,50983,50985,50987],{"class":54,"line":594},[52,50984,121],{"class":58},[52,50986,63],{"class":371},[52,50988,77],{"class":58},[43,50990,50992],{"className":222,"code":50991,"language":224,"meta":48,"style":48},"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",[31,50993,50994,51004,51008,51022,51026,51035,51043,51047,51051],{"__ignoreMap":48},[52,50995,50996,50998,51000,51002],{"class":54,"line":55},[52,50997,232],{"class":231},[52,50999,8385],{"class":58},[52,51001,238],{"class":231},[52,51003,8390],{"class":73},[52,51005,51006],{"class":54,"line":80},[52,51007,597],{"emptyLinePlaceholder":171},[52,51009,51010,51012,51014,51016,51018,51020],{"class":54,"line":108},[52,51011,1721],{"class":231},[52,51013,1724],{"class":371},[52,51015,1727],{"class":231},[52,51017,1730],{"class":231},[52,51019,1733],{"class":66},[52,51021,1736],{"class":58},[52,51023,51024],{"class":54,"line":118},[52,51025,1751],{"class":58},[52,51027,51028,51030,51033],{"class":54,"line":594},[52,51029,1756],{"class":58},[52,51031,51032],{"class":73},"'Tritone'",[52,51034,3875],{"class":58},[52,51036,51037,51039,51041],{"class":54,"line":600},[52,51038,3880],{"class":58},[52,51040,2869],{"class":73},[52,51042,2129],{"class":58},[52,51044,51045],{"class":54,"line":606},[52,51046,3897],{"class":58},[52,51048,51049],{"class":54,"line":653},[52,51050,1773],{"class":58},[52,51052,51053],{"class":54,"line":662},[52,51054,1778],{"class":58},[156,51056,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":51058},[51059,51060],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/tritone",{"title":50792,"description":50800},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":51067,"title":51068,"body":51069,"category":26920,"componentType":20001,"description":51076,"extension":168,"meta":51261,"navigation":171,"path":51262,"requiresChild":26923,"seo":51263,"stem":51264,"__hash__":51265},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":51070,"toc":51257},[51071,51074,51077,51079,51081,51084,51086,51255],[11,51072,51068],{"id":51073},"truchet",[15,51075,51076],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26061,51078],{"component":51068},[23,51080,26065],{"id":20662},[26067,51082],{":props":51083},"[{\"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\"}]",[23,51085,26073],{"id":26072},[217,51087,51088,51117,51145,51173,51201],{":tabs":1543},[43,51089,51091],{"className":45,"code":51090,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,51092,51093,51101,51109],{"__ignoreMap":48},[52,51094,51095,51097,51099],{"class":54,"line":55},[52,51096,59],{"class":58},[52,51098,63],{"class":62},[52,51100,77],{"class":58},[52,51102,51103,51105,51107],{"class":54,"line":80},[52,51104,83],{"class":58},[52,51106,51068],{"class":62},[52,51108,105],{"class":58},[52,51110,51111,51113,51115],{"class":54,"line":108},[52,51112,121],{"class":58},[52,51114,63],{"class":62},[52,51116,77],{"class":58},[43,51118,51119],{"className":360,"code":51090,"language":362,"meta":48,"style":48},[31,51120,51121,51129,51137],{"__ignoreMap":48},[52,51122,51123,51125,51127],{"class":54,"line":55},[52,51124,59],{"class":58},[52,51126,63],{"class":371},[52,51128,77],{"class":58},[52,51130,51131,51133,51135],{"class":54,"line":80},[52,51132,83],{"class":58},[52,51134,51068],{"class":371},[52,51136,105],{"class":58},[52,51138,51139,51141,51143],{"class":54,"line":108},[52,51140,121],{"class":58},[52,51142,63],{"class":371},[52,51144,77],{"class":58},[43,51146,51147],{"className":2507,"code":51090,"language":2509,"meta":48,"style":48},[31,51148,51149,51157,51165],{"__ignoreMap":48},[52,51150,51151,51153,51155],{"class":54,"line":55},[52,51152,59],{"class":58},[52,51154,63],{"class":371},[52,51156,77],{"class":58},[52,51158,51159,51161,51163],{"class":54,"line":80},[52,51160,83],{"class":58},[52,51162,51068],{"class":371},[52,51164,105],{"class":58},[52,51166,51167,51169,51171],{"class":54,"line":108},[52,51168,121],{"class":58},[52,51170,63],{"class":371},[52,51172,77],{"class":58},[43,51174,51175],{"className":419,"code":51090,"language":420,"meta":48,"style":48},[31,51176,51177,51185,51193],{"__ignoreMap":48},[52,51178,51179,51181,51183],{"class":54,"line":55},[52,51180,59],{"class":58},[52,51182,63],{"class":371},[52,51184,77],{"class":58},[52,51186,51187,51189,51191],{"class":54,"line":80},[52,51188,83],{"class":58},[52,51190,51068],{"class":371},[52,51192,105],{"class":58},[52,51194,51195,51197,51199],{"class":54,"line":108},[52,51196,121],{"class":58},[52,51198,63],{"class":371},[52,51200,77],{"class":58},[43,51202,51204],{"className":222,"code":51203,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Truchet', props: {} }\n ]\n})\n",[31,51205,51206,51216,51220,51234,51238,51247,51251],{"__ignoreMap":48},[52,51207,51208,51210,51212,51214],{"class":54,"line":55},[52,51209,232],{"class":231},[52,51211,8385],{"class":58},[52,51213,238],{"class":231},[52,51215,8390],{"class":73},[52,51217,51218],{"class":54,"line":80},[52,51219,597],{"emptyLinePlaceholder":171},[52,51221,51222,51224,51226,51228,51230,51232],{"class":54,"line":108},[52,51223,1721],{"class":231},[52,51225,1724],{"class":371},[52,51227,1727],{"class":231},[52,51229,1730],{"class":231},[52,51231,1733],{"class":66},[52,51233,1736],{"class":58},[52,51235,51236],{"class":54,"line":118},[52,51237,1751],{"class":58},[52,51239,51240,51242,51245],{"class":54,"line":594},[52,51241,1756],{"class":58},[52,51243,51244],{"class":73},"'Truchet'",[52,51246,2129],{"class":58},[52,51248,51249],{"class":54,"line":600},[52,51250,1773],{"class":58},[52,51252,51253],{"class":54,"line":606},[52,51254,1778],{"class":58},[156,51256,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":51258},[51259,51260],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/truchet",{"title":51068,"description":51076},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":51267,"title":51268,"body":51269,"category":28265,"componentType":20007,"description":51276,"extension":168,"meta":51593,"navigation":171,"path":51594,"requiresChild":171,"seo":51595,"stem":51596,"__hash__":51597},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":51270,"toc":51589},[51271,51274,51277,51279,51281,51284,51286,51587],[11,51272,51268],{"id":51273},"twirl",[15,51275,51276],{},"Rotate and twist content around a center point",[26061,51278],{"component":51268},[23,51280,26065],{"id":20662},[26067,51282],{":props":51283},"[{\"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\"}]",[23,51285,26073],{"id":26072},[217,51287,51288,51344,51403,51459,51517],{":tabs":1543},[43,51289,51291],{"className":45,"code":51290,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,51292,51293,51301,51308,51316,51320,51328,51336],{"__ignoreMap":48},[52,51294,51295,51297,51299],{"class":54,"line":55},[52,51296,59],{"class":58},[52,51298,63],{"class":62},[52,51300,77],{"class":58},[52,51302,51303,51305],{"class":54,"line":80},[52,51304,83],{"class":58},[52,51306,51307],{"class":62},"Twirl\n",[52,51309,51310,51312,51314],{"class":54,"line":108},[52,51311,17026],{"class":66},[52,51313,70],{"class":58},[52,51315,27987],{"class":73},[52,51317,51318],{"class":54,"line":118},[52,51319,26109],{"class":58},[52,51321,51322,51324,51326],{"class":54,"line":594},[52,51323,2213],{"class":58},[52,51325,2216],{"class":62},[52,51327,105],{"class":58},[52,51329,51330,51332,51334],{"class":54,"line":600},[52,51331,2230],{"class":58},[52,51333,51268],{"class":62},[52,51335,77],{"class":58},[52,51337,51338,51340,51342],{"class":54,"line":606},[52,51339,121],{"class":58},[52,51341,63],{"class":62},[52,51343,77],{"class":58},[43,51345,51347],{"className":360,"code":51346,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,51348,51349,51357,51363,51375,51379,51387,51395],{"__ignoreMap":48},[52,51350,51351,51353,51355],{"class":54,"line":55},[52,51352,59],{"class":58},[52,51354,63],{"class":371},[52,51356,77],{"class":58},[52,51358,51359,51361],{"class":54,"line":80},[52,51360,83],{"class":58},[52,51362,51307],{"class":371},[52,51364,51365,51367,51369,51371,51373],{"class":54,"line":108},[52,51366,17137],{"class":66},[52,51368,70],{"class":231},[52,51370,723],{"class":58},[52,51372,5544],{"class":371},[52,51374,729],{"class":58},[52,51376,51377],{"class":54,"line":118},[52,51378,26109],{"class":58},[52,51380,51381,51383,51385],{"class":54,"line":594},[52,51382,2213],{"class":58},[52,51384,2216],{"class":371},[52,51386,105],{"class":58},[52,51388,51389,51391,51393],{"class":54,"line":600},[52,51390,2230],{"class":58},[52,51392,51268],{"class":371},[52,51394,77],{"class":58},[52,51396,51397,51399,51401],{"class":54,"line":606},[52,51398,121],{"class":58},[52,51400,63],{"class":371},[52,51402,77],{"class":58},[43,51404,51405],{"className":2507,"code":51346,"language":2509,"meta":48,"style":48},[31,51406,51407,51415,51421,51431,51435,51443,51451],{"__ignoreMap":48},[52,51408,51409,51411,51413],{"class":54,"line":55},[52,51410,59],{"class":58},[52,51412,63],{"class":371},[52,51414,77],{"class":58},[52,51416,51417,51419],{"class":54,"line":80},[52,51418,83],{"class":58},[52,51420,51307],{"class":371},[52,51422,51423,51425,51427,51429],{"class":54,"line":108},[52,51424,17137],{"class":66},[52,51426,24004],{"class":58},[52,51428,5544],{"class":371},[52,51430,729],{"class":58},[52,51432,51433],{"class":54,"line":118},[52,51434,26109],{"class":58},[52,51436,51437,51439,51441],{"class":54,"line":594},[52,51438,2213],{"class":58},[52,51440,2216],{"class":371},[52,51442,105],{"class":58},[52,51444,51445,51447,51449],{"class":54,"line":600},[52,51446,2230],{"class":58},[52,51448,51268],{"class":371},[52,51450,77],{"class":58},[52,51452,51453,51455,51457],{"class":54,"line":606},[52,51454,121],{"class":58},[52,51456,63],{"class":371},[52,51458,77],{"class":58},[43,51460,51461],{"className":419,"code":51346,"language":420,"meta":48,"style":48},[31,51462,51463,51471,51477,51489,51493,51501,51509],{"__ignoreMap":48},[52,51464,51465,51467,51469],{"class":54,"line":55},[52,51466,59],{"class":58},[52,51468,63],{"class":371},[52,51470,77],{"class":58},[52,51472,51473,51475],{"class":54,"line":80},[52,51474,83],{"class":58},[52,51476,51307],{"class":371},[52,51478,51479,51481,51483,51485,51487],{"class":54,"line":108},[52,51480,17137],{"class":66},[52,51482,70],{"class":231},[52,51484,723],{"class":58},[52,51486,5544],{"class":371},[52,51488,729],{"class":58},[52,51490,51491],{"class":54,"line":118},[52,51492,26109],{"class":58},[52,51494,51495,51497,51499],{"class":54,"line":594},[52,51496,2213],{"class":58},[52,51498,2216],{"class":371},[52,51500,105],{"class":58},[52,51502,51503,51505,51507],{"class":54,"line":600},[52,51504,2230],{"class":58},[52,51506,51268],{"class":371},[52,51508,77],{"class":58},[52,51510,51511,51513,51515],{"class":54,"line":606},[52,51512,121],{"class":58},[52,51514,63],{"class":371},[52,51516,77],{"class":58},[43,51518,51520],{"className":222,"code":51519,"language":224,"meta":48,"style":48},"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",[31,51521,51522,51532,51536,51550,51554,51567,51575,51579,51583],{"__ignoreMap":48},[52,51523,51524,51526,51528,51530],{"class":54,"line":55},[52,51525,232],{"class":231},[52,51527,8385],{"class":58},[52,51529,238],{"class":231},[52,51531,8390],{"class":73},[52,51533,51534],{"class":54,"line":80},[52,51535,597],{"emptyLinePlaceholder":171},[52,51537,51538,51540,51542,51544,51546,51548],{"class":54,"line":108},[52,51539,1721],{"class":231},[52,51541,1724],{"class":371},[52,51543,1727],{"class":231},[52,51545,1730],{"class":231},[52,51547,1733],{"class":66},[52,51549,1736],{"class":58},[52,51551,51552],{"class":54,"line":118},[52,51553,1751],{"class":58},[52,51555,51556,51558,51561,51563,51565],{"class":54,"line":594},[52,51557,1756],{"class":58},[52,51559,51560],{"class":73},"'Twirl'",[52,51562,26354],{"class":58},[52,51564,5544],{"class":371},[52,51566,4412],{"class":58},[52,51568,51569,51571,51573],{"class":54,"line":600},[52,51570,3880],{"class":58},[52,51572,2869],{"class":73},[52,51574,2129],{"class":58},[52,51576,51577],{"class":54,"line":606},[52,51578,3897],{"class":58},[52,51580,51581],{"class":54,"line":653},[52,51582,1773],{"class":58},[52,51584,51585],{"class":54,"line":662},[52,51586,1778],{"class":58},[156,51588,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51590},[51591,51592],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/twirl",{"title":51268,"description":51276},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":51599,"title":51600,"body":51601,"category":29887,"componentType":20001,"description":51608,"extension":168,"meta":51885,"navigation":171,"path":51886,"requiresChild":26923,"seo":51887,"stem":51888,"__hash__":51889},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":51602,"toc":51881},[51603,51606,51609,51611,51613,51616,51618,51879],[11,51604,51600],{"id":51605},"vesica",[15,51607,51608],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26061,51610],{"component":51600},[23,51612,26065],{"id":20662},[26067,51614],{":props":51615},"[{\"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\"}]",[23,51617,26073],{"id":26072},[217,51619,51620,51668,51719,51767,51817],{":tabs":1543},[43,51621,51623],{"className":45,"code":51622,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,51624,51625,51633,51640,51648,51656,51660],{"__ignoreMap":48},[52,51626,51627,51629,51631],{"class":54,"line":55},[52,51628,59],{"class":58},[52,51630,63],{"class":62},[52,51632,77],{"class":58},[52,51634,51635,51637],{"class":54,"line":80},[52,51636,83],{"class":58},[52,51638,51639],{"class":62},"Vesica\n",[52,51641,51642,51644,51646],{"class":54,"line":108},[52,51643,6504],{"class":66},[52,51645,70],{"class":58},[52,51647,6460],{"class":73},[52,51649,51650,51652,51654],{"class":54,"line":118},[52,51651,14057],{"class":66},[52,51653,70],{"class":58},[52,51655,31052],{"class":73},[52,51657,51658],{"class":54,"line":594},[52,51659,1224],{"class":58},[52,51661,51662,51664,51666],{"class":54,"line":600},[52,51663,121],{"class":58},[52,51665,63],{"class":62},[52,51667,77],{"class":58},[43,51669,51671],{"className":360,"code":51670,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,51672,51673,51681,51687,51695,51707,51711],{"__ignoreMap":48},[52,51674,51675,51677,51679],{"class":54,"line":55},[52,51676,59],{"class":58},[52,51678,63],{"class":371},[52,51680,77],{"class":58},[52,51682,51683,51685],{"class":54,"line":80},[52,51684,83],{"class":58},[52,51686,51639],{"class":371},[52,51688,51689,51691,51693],{"class":54,"line":108},[52,51690,6504],{"class":66},[52,51692,70],{"class":231},[52,51694,6460],{"class":73},[52,51696,51697,51699,51701,51703,51705],{"class":54,"line":118},[52,51698,6514],{"class":66},[52,51700,70],{"class":231},[52,51702,723],{"class":58},[52,51704,17786],{"class":371},[52,51706,729],{"class":58},[52,51708,51709],{"class":54,"line":594},[52,51710,1224],{"class":58},[52,51712,51713,51715,51717],{"class":54,"line":600},[52,51714,121],{"class":58},[52,51716,63],{"class":371},[52,51718,77],{"class":58},[43,51720,51721],{"className":2507,"code":51670,"language":2509,"meta":48,"style":48},[31,51722,51723,51731,51737,51745,51755,51759],{"__ignoreMap":48},[52,51724,51725,51727,51729],{"class":54,"line":55},[52,51726,59],{"class":58},[52,51728,63],{"class":371},[52,51730,77],{"class":58},[52,51732,51733,51735],{"class":54,"line":80},[52,51734,83],{"class":58},[52,51736,51639],{"class":371},[52,51738,51739,51741,51743],{"class":54,"line":108},[52,51740,6504],{"class":66},[52,51742,70],{"class":58},[52,51744,6460],{"class":73},[52,51746,51747,51749,51751,51753],{"class":54,"line":118},[52,51748,6514],{"class":66},[52,51750,24004],{"class":58},[52,51752,17786],{"class":371},[52,51754,729],{"class":58},[52,51756,51757],{"class":54,"line":594},[52,51758,1224],{"class":58},[52,51760,51761,51763,51765],{"class":54,"line":600},[52,51762,121],{"class":58},[52,51764,63],{"class":371},[52,51766,77],{"class":58},[43,51768,51769],{"className":419,"code":51670,"language":420,"meta":48,"style":48},[31,51770,51771,51779,51785,51793,51805,51809],{"__ignoreMap":48},[52,51772,51773,51775,51777],{"class":54,"line":55},[52,51774,59],{"class":58},[52,51776,63],{"class":371},[52,51778,77],{"class":58},[52,51780,51781,51783],{"class":54,"line":80},[52,51782,83],{"class":58},[52,51784,51639],{"class":371},[52,51786,51787,51789,51791],{"class":54,"line":108},[52,51788,6504],{"class":66},[52,51790,70],{"class":231},[52,51792,6460],{"class":73},[52,51794,51795,51797,51799,51801,51803],{"class":54,"line":118},[52,51796,6514],{"class":66},[52,51798,70],{"class":231},[52,51800,723],{"class":58},[52,51802,17786],{"class":371},[52,51804,729],{"class":58},[52,51806,51807],{"class":54,"line":594},[52,51808,1224],{"class":58},[52,51810,51811,51813,51815],{"class":54,"line":600},[52,51812,121],{"class":58},[52,51814,63],{"class":371},[52,51816,77],{"class":58},[43,51818,51820],{"className":222,"code":51819,"language":224,"meta":48,"style":48},"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",[31,51821,51822,51832,51836,51850,51854,51871,51875],{"__ignoreMap":48},[52,51823,51824,51826,51828,51830],{"class":54,"line":55},[52,51825,232],{"class":231},[52,51827,8385],{"class":58},[52,51829,238],{"class":231},[52,51831,8390],{"class":73},[52,51833,51834],{"class":54,"line":80},[52,51835,597],{"emptyLinePlaceholder":171},[52,51837,51838,51840,51842,51844,51846,51848],{"class":54,"line":108},[52,51839,1721],{"class":231},[52,51841,1724],{"class":371},[52,51843,1727],{"class":231},[52,51845,1730],{"class":231},[52,51847,1733],{"class":66},[52,51849,1736],{"class":58},[52,51851,51852],{"class":54,"line":118},[52,51853,1751],{"class":58},[52,51855,51856,51858,51861,51863,51865,51867,51869],{"class":54,"line":594},[52,51857,1756],{"class":58},[52,51859,51860],{"class":73},"'Vesica'",[52,51862,1762],{"class":58},[52,51864,7039],{"class":73},[52,51866,3431],{"class":58},[52,51868,17786],{"class":371},[52,51870,1768],{"class":58},[52,51872,51873],{"class":54,"line":600},[52,51874,1773],{"class":58},[52,51876,51877],{"class":54,"line":606},[52,51878,1778],{"class":58},[156,51880,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51882},[51883,51884],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/vesica",{"title":51600,"description":51608},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":51891,"title":51892,"body":51893,"category":27931,"componentType":20007,"description":51900,"extension":168,"meta":52218,"navigation":171,"path":52219,"requiresChild":171,"seo":52220,"stem":52221,"__hash__":52222},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":51894,"toc":52214},[51895,51898,51901,51903,51905,51908,51910,52212],[11,51896,51892],{"id":51897},"vibrance",[15,51899,51900],{},"Selective saturation adjustment protecting skin tones",[26061,51902],{"component":51892},[23,51904,26065],{"id":20662},[26067,51906],{":props":51907},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,51909,26073],{"id":26072},[217,51911,51912,51969,52028,52084,52142],{":tabs":1543},[43,51913,51915],{"className":45,"code":51914,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,51916,51917,51925,51932,51941,51945,51953,51961],{"__ignoreMap":48},[52,51918,51919,51921,51923],{"class":54,"line":55},[52,51920,59],{"class":58},[52,51922,63],{"class":62},[52,51924,77],{"class":58},[52,51926,51927,51929],{"class":54,"line":80},[52,51928,83],{"class":58},[52,51930,51931],{"class":62},"Vibrance\n",[52,51933,51934,51936,51938],{"class":54,"line":108},[52,51935,17026],{"class":66},[52,51937,70],{"class":58},[52,51939,51940],{"class":73},"\"0\"\n",[52,51942,51943],{"class":54,"line":118},[52,51944,26109],{"class":58},[52,51946,51947,51949,51951],{"class":54,"line":594},[52,51948,2213],{"class":58},[52,51950,2216],{"class":62},[52,51952,105],{"class":58},[52,51954,51955,51957,51959],{"class":54,"line":600},[52,51956,2230],{"class":58},[52,51958,51892],{"class":62},[52,51960,77],{"class":58},[52,51962,51963,51965,51967],{"class":54,"line":606},[52,51964,121],{"class":58},[52,51966,63],{"class":62},[52,51968,77],{"class":58},[43,51970,51972],{"className":360,"code":51971,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,51973,51974,51982,51988,52000,52004,52012,52020],{"__ignoreMap":48},[52,51975,51976,51978,51980],{"class":54,"line":55},[52,51977,59],{"class":58},[52,51979,63],{"class":371},[52,51981,77],{"class":58},[52,51983,51984,51986],{"class":54,"line":80},[52,51985,83],{"class":58},[52,51987,51931],{"class":371},[52,51989,51990,51992,51994,51996,51998],{"class":54,"line":108},[52,51991,17137],{"class":66},[52,51993,70],{"class":231},[52,51995,723],{"class":58},[52,51997,5540],{"class":371},[52,51999,729],{"class":58},[52,52001,52002],{"class":54,"line":118},[52,52003,26109],{"class":58},[52,52005,52006,52008,52010],{"class":54,"line":594},[52,52007,2213],{"class":58},[52,52009,2216],{"class":371},[52,52011,105],{"class":58},[52,52013,52014,52016,52018],{"class":54,"line":600},[52,52015,2230],{"class":58},[52,52017,51892],{"class":371},[52,52019,77],{"class":58},[52,52021,52022,52024,52026],{"class":54,"line":606},[52,52023,121],{"class":58},[52,52025,63],{"class":371},[52,52027,77],{"class":58},[43,52029,52030],{"className":2507,"code":51971,"language":2509,"meta":48,"style":48},[31,52031,52032,52040,52046,52056,52060,52068,52076],{"__ignoreMap":48},[52,52033,52034,52036,52038],{"class":54,"line":55},[52,52035,59],{"class":58},[52,52037,63],{"class":371},[52,52039,77],{"class":58},[52,52041,52042,52044],{"class":54,"line":80},[52,52043,83],{"class":58},[52,52045,51931],{"class":371},[52,52047,52048,52050,52052,52054],{"class":54,"line":108},[52,52049,17137],{"class":66},[52,52051,24004],{"class":58},[52,52053,5540],{"class":371},[52,52055,729],{"class":58},[52,52057,52058],{"class":54,"line":118},[52,52059,26109],{"class":58},[52,52061,52062,52064,52066],{"class":54,"line":594},[52,52063,2213],{"class":58},[52,52065,2216],{"class":371},[52,52067,105],{"class":58},[52,52069,52070,52072,52074],{"class":54,"line":600},[52,52071,2230],{"class":58},[52,52073,51892],{"class":371},[52,52075,77],{"class":58},[52,52077,52078,52080,52082],{"class":54,"line":606},[52,52079,121],{"class":58},[52,52081,63],{"class":371},[52,52083,77],{"class":58},[43,52085,52086],{"className":419,"code":51971,"language":420,"meta":48,"style":48},[31,52087,52088,52096,52102,52114,52118,52126,52134],{"__ignoreMap":48},[52,52089,52090,52092,52094],{"class":54,"line":55},[52,52091,59],{"class":58},[52,52093,63],{"class":371},[52,52095,77],{"class":58},[52,52097,52098,52100],{"class":54,"line":80},[52,52099,83],{"class":58},[52,52101,51931],{"class":371},[52,52103,52104,52106,52108,52110,52112],{"class":54,"line":108},[52,52105,17137],{"class":66},[52,52107,70],{"class":231},[52,52109,723],{"class":58},[52,52111,5540],{"class":371},[52,52113,729],{"class":58},[52,52115,52116],{"class":54,"line":118},[52,52117,26109],{"class":58},[52,52119,52120,52122,52124],{"class":54,"line":594},[52,52121,2213],{"class":58},[52,52123,2216],{"class":371},[52,52125,105],{"class":58},[52,52127,52128,52130,52132],{"class":54,"line":600},[52,52129,2230],{"class":58},[52,52131,51892],{"class":371},[52,52133,77],{"class":58},[52,52135,52136,52138,52140],{"class":54,"line":606},[52,52137,121],{"class":58},[52,52139,63],{"class":371},[52,52141,77],{"class":58},[43,52143,52145],{"className":222,"code":52144,"language":224,"meta":48,"style":48},"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",[31,52146,52147,52157,52161,52175,52179,52192,52200,52204,52208],{"__ignoreMap":48},[52,52148,52149,52151,52153,52155],{"class":54,"line":55},[52,52150,232],{"class":231},[52,52152,8385],{"class":58},[52,52154,238],{"class":231},[52,52156,8390],{"class":73},[52,52158,52159],{"class":54,"line":80},[52,52160,597],{"emptyLinePlaceholder":171},[52,52162,52163,52165,52167,52169,52171,52173],{"class":54,"line":108},[52,52164,1721],{"class":231},[52,52166,1724],{"class":371},[52,52168,1727],{"class":231},[52,52170,1730],{"class":231},[52,52172,1733],{"class":66},[52,52174,1736],{"class":58},[52,52176,52177],{"class":54,"line":118},[52,52178,1751],{"class":58},[52,52180,52181,52183,52186,52188,52190],{"class":54,"line":594},[52,52182,1756],{"class":58},[52,52184,52185],{"class":73},"'Vibrance'",[52,52187,26354],{"class":58},[52,52189,5540],{"class":371},[52,52191,4412],{"class":58},[52,52193,52194,52196,52198],{"class":54,"line":600},[52,52195,3880],{"class":58},[52,52197,2869],{"class":73},[52,52199,2129],{"class":58},[52,52201,52202],{"class":54,"line":606},[52,52203,3897],{"class":58},[52,52205,52206],{"class":54,"line":653},[52,52207,1773],{"class":58},[52,52209,52210],{"class":54,"line":662},[52,52211,1778],{"class":58},[156,52213,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52215},[52216,52217],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/vibrance",{"title":51892,"description":51900},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":52224,"title":52225,"body":52226,"category":26920,"componentType":20001,"description":52233,"extension":168,"meta":52418,"navigation":171,"path":52419,"requiresChild":26923,"seo":52420,"stem":52421,"__hash__":52422},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":52227,"toc":52414},[52228,52231,52234,52236,52238,52241,52243,52412],[11,52229,52225],{"id":52230},"videotexture",[15,52232,52233],{},"Display a video with customizable playback and object-fit modes",[26061,52235],{"component":52225},[23,52237,26065],{"id":20662},[26067,52239],{":props":52240},"[{\"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\"}]",[23,52242,26073],{"id":26072},[217,52244,52245,52274,52302,52330,52358],{":tabs":1543},[43,52246,52248],{"className":45,"code":52247,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,52249,52250,52258,52266],{"__ignoreMap":48},[52,52251,52252,52254,52256],{"class":54,"line":55},[52,52253,59],{"class":58},[52,52255,63],{"class":62},[52,52257,77],{"class":58},[52,52259,52260,52262,52264],{"class":54,"line":80},[52,52261,83],{"class":58},[52,52263,52225],{"class":62},[52,52265,105],{"class":58},[52,52267,52268,52270,52272],{"class":54,"line":108},[52,52269,121],{"class":58},[52,52271,63],{"class":62},[52,52273,77],{"class":58},[43,52275,52276],{"className":360,"code":52247,"language":362,"meta":48,"style":48},[31,52277,52278,52286,52294],{"__ignoreMap":48},[52,52279,52280,52282,52284],{"class":54,"line":55},[52,52281,59],{"class":58},[52,52283,63],{"class":371},[52,52285,77],{"class":58},[52,52287,52288,52290,52292],{"class":54,"line":80},[52,52289,83],{"class":58},[52,52291,52225],{"class":371},[52,52293,105],{"class":58},[52,52295,52296,52298,52300],{"class":54,"line":108},[52,52297,121],{"class":58},[52,52299,63],{"class":371},[52,52301,77],{"class":58},[43,52303,52304],{"className":2507,"code":52247,"language":2509,"meta":48,"style":48},[31,52305,52306,52314,52322],{"__ignoreMap":48},[52,52307,52308,52310,52312],{"class":54,"line":55},[52,52309,59],{"class":58},[52,52311,63],{"class":371},[52,52313,77],{"class":58},[52,52315,52316,52318,52320],{"class":54,"line":80},[52,52317,83],{"class":58},[52,52319,52225],{"class":371},[52,52321,105],{"class":58},[52,52323,52324,52326,52328],{"class":54,"line":108},[52,52325,121],{"class":58},[52,52327,63],{"class":371},[52,52329,77],{"class":58},[43,52331,52332],{"className":419,"code":52247,"language":420,"meta":48,"style":48},[31,52333,52334,52342,52350],{"__ignoreMap":48},[52,52335,52336,52338,52340],{"class":54,"line":55},[52,52337,59],{"class":58},[52,52339,63],{"class":371},[52,52341,77],{"class":58},[52,52343,52344,52346,52348],{"class":54,"line":80},[52,52345,83],{"class":58},[52,52347,52225],{"class":371},[52,52349,105],{"class":58},[52,52351,52352,52354,52356],{"class":54,"line":108},[52,52353,121],{"class":58},[52,52355,63],{"class":371},[52,52357,77],{"class":58},[43,52359,52361],{"className":222,"code":52360,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VideoTexture', props: {} }\n ]\n})\n",[31,52362,52363,52373,52377,52391,52395,52404,52408],{"__ignoreMap":48},[52,52364,52365,52367,52369,52371],{"class":54,"line":55},[52,52366,232],{"class":231},[52,52368,8385],{"class":58},[52,52370,238],{"class":231},[52,52372,8390],{"class":73},[52,52374,52375],{"class":54,"line":80},[52,52376,597],{"emptyLinePlaceholder":171},[52,52378,52379,52381,52383,52385,52387,52389],{"class":54,"line":108},[52,52380,1721],{"class":231},[52,52382,1724],{"class":371},[52,52384,1727],{"class":231},[52,52386,1730],{"class":231},[52,52388,1733],{"class":66},[52,52390,1736],{"class":58},[52,52392,52393],{"class":54,"line":118},[52,52394,1751],{"class":58},[52,52396,52397,52399,52402],{"class":54,"line":594},[52,52398,1756],{"class":58},[52,52400,52401],{"class":73},"'VideoTexture'",[52,52403,2129],{"class":58},[52,52405,52406],{"class":54,"line":600},[52,52407,1773],{"class":58},[52,52409,52410],{"class":54,"line":606},[52,52411,1778],{"class":58},[156,52413,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":52415},[52416,52417],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/videotexture",{"title":52225,"description":52233},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":52424,"title":52425,"body":52426,"category":26663,"componentType":20007,"description":52433,"extension":168,"meta":52832,"navigation":171,"path":52833,"requiresChild":171,"seo":52834,"stem":52835,"__hash__":52836},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":52427,"toc":52828},[52428,52431,52434,52436,52438,52441,52443,52826],[11,52429,52425],{"id":52430},"vignette",[15,52432,52433],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26061,52435],{"component":52425},[23,52437,26065],{"id":20662},[26067,52439],{":props":52440},"[{\"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\"}]",[23,52442,26073],{"id":26072},[217,52444,52445,52517,52596,52670,52748],{":tabs":1543},[43,52446,52448],{"className":45,"code":52447,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVignette\n color=\"#000000\"\n :radius=\"0.5\"\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Vignette>\n\u003C/Shader>\n",[31,52449,52450,52458,52465,52473,52481,52489,52493,52501,52509],{"__ignoreMap":48},[52,52451,52452,52454,52456],{"class":54,"line":55},[52,52453,59],{"class":58},[52,52455,63],{"class":62},[52,52457,77],{"class":58},[52,52459,52460,52462],{"class":54,"line":80},[52,52461,83],{"class":58},[52,52463,52464],{"class":62},"Vignette\n",[52,52466,52467,52469,52471],{"class":54,"line":108},[52,52468,6504],{"class":66},[52,52470,70],{"class":58},[52,52472,16131],{"class":73},[52,52474,52475,52477,52479],{"class":54,"line":118},[52,52476,14057],{"class":66},[52,52478,70],{"class":58},[52,52480,31622],{"class":73},[52,52482,52483,52485,52487],{"class":54,"line":594},[52,52484,17026],{"class":66},[52,52486,70],{"class":58},[52,52488,27987],{"class":73},[52,52490,52491],{"class":54,"line":600},[52,52492,26109],{"class":58},[52,52494,52495,52497,52499],{"class":54,"line":606},[52,52496,2213],{"class":58},[52,52498,2216],{"class":62},[52,52500,105],{"class":58},[52,52502,52503,52505,52507],{"class":54,"line":653},[52,52504,2230],{"class":58},[52,52506,52425],{"class":62},[52,52508,77],{"class":58},[52,52510,52511,52513,52515],{"class":54,"line":662},[52,52512,121],{"class":58},[52,52514,63],{"class":62},[52,52516,77],{"class":58},[43,52518,52520],{"className":360,"code":52519,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVignette\n color=\"#000000\"\n radius={0.5}\n intensity={1}\n >\n \u003CCircle />\n \u003C/Vignette>\n\u003C/Shader>\n",[31,52521,52522,52530,52536,52544,52556,52568,52572,52580,52588],{"__ignoreMap":48},[52,52523,52524,52526,52528],{"class":54,"line":55},[52,52525,59],{"class":58},[52,52527,63],{"class":371},[52,52529,77],{"class":58},[52,52531,52532,52534],{"class":54,"line":80},[52,52533,83],{"class":58},[52,52535,52464],{"class":371},[52,52537,52538,52540,52542],{"class":54,"line":108},[52,52539,6504],{"class":66},[52,52541,70],{"class":231},[52,52543,16131],{"class":73},[52,52545,52546,52548,52550,52552,52554],{"class":54,"line":118},[52,52547,6514],{"class":66},[52,52549,70],{"class":231},[52,52551,723],{"class":58},[52,52553,4620],{"class":371},[52,52555,729],{"class":58},[52,52557,52558,52560,52562,52564,52566],{"class":54,"line":594},[52,52559,17137],{"class":66},[52,52561,70],{"class":231},[52,52563,723],{"class":58},[52,52565,5544],{"class":371},[52,52567,729],{"class":58},[52,52569,52570],{"class":54,"line":600},[52,52571,26109],{"class":58},[52,52573,52574,52576,52578],{"class":54,"line":606},[52,52575,2213],{"class":58},[52,52577,2216],{"class":371},[52,52579,105],{"class":58},[52,52581,52582,52584,52586],{"class":54,"line":653},[52,52583,2230],{"class":58},[52,52585,52425],{"class":371},[52,52587,77],{"class":58},[52,52589,52590,52592,52594],{"class":54,"line":662},[52,52591,121],{"class":58},[52,52593,63],{"class":371},[52,52595,77],{"class":58},[43,52597,52598],{"className":2507,"code":52519,"language":2509,"meta":48,"style":48},[31,52599,52600,52608,52614,52622,52632,52642,52646,52654,52662],{"__ignoreMap":48},[52,52601,52602,52604,52606],{"class":54,"line":55},[52,52603,59],{"class":58},[52,52605,63],{"class":371},[52,52607,77],{"class":58},[52,52609,52610,52612],{"class":54,"line":80},[52,52611,83],{"class":58},[52,52613,52464],{"class":371},[52,52615,52616,52618,52620],{"class":54,"line":108},[52,52617,6504],{"class":66},[52,52619,70],{"class":58},[52,52621,16131],{"class":73},[52,52623,52624,52626,52628,52630],{"class":54,"line":118},[52,52625,6514],{"class":66},[52,52627,24004],{"class":58},[52,52629,4620],{"class":371},[52,52631,729],{"class":58},[52,52633,52634,52636,52638,52640],{"class":54,"line":594},[52,52635,17137],{"class":66},[52,52637,24004],{"class":58},[52,52639,5544],{"class":371},[52,52641,729],{"class":58},[52,52643,52644],{"class":54,"line":600},[52,52645,26109],{"class":58},[52,52647,52648,52650,52652],{"class":54,"line":606},[52,52649,2213],{"class":58},[52,52651,2216],{"class":371},[52,52653,105],{"class":58},[52,52655,52656,52658,52660],{"class":54,"line":653},[52,52657,2230],{"class":58},[52,52659,52425],{"class":371},[52,52661,77],{"class":58},[52,52663,52664,52666,52668],{"class":54,"line":662},[52,52665,121],{"class":58},[52,52667,63],{"class":371},[52,52669,77],{"class":58},[43,52671,52672],{"className":419,"code":52519,"language":420,"meta":48,"style":48},[31,52673,52674,52682,52688,52696,52708,52720,52724,52732,52740],{"__ignoreMap":48},[52,52675,52676,52678,52680],{"class":54,"line":55},[52,52677,59],{"class":58},[52,52679,63],{"class":371},[52,52681,77],{"class":58},[52,52683,52684,52686],{"class":54,"line":80},[52,52685,83],{"class":58},[52,52687,52464],{"class":371},[52,52689,52690,52692,52694],{"class":54,"line":108},[52,52691,6504],{"class":66},[52,52693,70],{"class":231},[52,52695,16131],{"class":73},[52,52697,52698,52700,52702,52704,52706],{"class":54,"line":118},[52,52699,6514],{"class":66},[52,52701,70],{"class":231},[52,52703,723],{"class":58},[52,52705,4620],{"class":371},[52,52707,729],{"class":58},[52,52709,52710,52712,52714,52716,52718],{"class":54,"line":594},[52,52711,17137],{"class":66},[52,52713,70],{"class":231},[52,52715,723],{"class":58},[52,52717,5544],{"class":371},[52,52719,729],{"class":58},[52,52721,52722],{"class":54,"line":600},[52,52723,26109],{"class":58},[52,52725,52726,52728,52730],{"class":54,"line":606},[52,52727,2213],{"class":58},[52,52729,2216],{"class":371},[52,52731,105],{"class":58},[52,52733,52734,52736,52738],{"class":54,"line":653},[52,52735,2230],{"class":58},[52,52737,52425],{"class":371},[52,52739,77],{"class":58},[52,52741,52742,52744,52746],{"class":54,"line":662},[52,52743,121],{"class":58},[52,52745,63],{"class":371},[52,52747,77],{"class":58},[43,52749,52751],{"className":222,"code":52750,"language":224,"meta":48,"style":48},"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",[31,52752,52753,52763,52767,52781,52785,52806,52814,52818,52822],{"__ignoreMap":48},[52,52754,52755,52757,52759,52761],{"class":54,"line":55},[52,52756,232],{"class":231},[52,52758,8385],{"class":58},[52,52760,238],{"class":231},[52,52762,8390],{"class":73},[52,52764,52765],{"class":54,"line":80},[52,52766,597],{"emptyLinePlaceholder":171},[52,52768,52769,52771,52773,52775,52777,52779],{"class":54,"line":108},[52,52770,1721],{"class":231},[52,52772,1724],{"class":371},[52,52774,1727],{"class":231},[52,52776,1730],{"class":231},[52,52778,1733],{"class":66},[52,52780,1736],{"class":58},[52,52782,52783],{"class":54,"line":118},[52,52784,1751],{"class":58},[52,52786,52787,52789,52792,52794,52796,52798,52800,52802,52804],{"class":54,"line":594},[52,52788,1756],{"class":58},[52,52790,52791],{"class":73},"'Vignette'",[52,52793,1762],{"class":58},[52,52795,16690],{"class":73},[52,52797,3431],{"class":58},[52,52799,4620],{"class":371},[52,52801,33583],{"class":58},[52,52803,5544],{"class":371},[52,52805,4412],{"class":58},[52,52807,52808,52810,52812],{"class":54,"line":600},[52,52809,3880],{"class":58},[52,52811,2869],{"class":73},[52,52813,2129],{"class":58},[52,52815,52816],{"class":54,"line":606},[52,52817,3897],{"class":58},[52,52819,52820],{"class":54,"line":653},[52,52821,1773],{"class":58},[52,52823,52824],{"class":54,"line":662},[52,52825,1778],{"class":58},[156,52827,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52829},[52830,52831],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/vignette",{"title":52425,"description":52433},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":52838,"title":52839,"body":52840,"category":26920,"componentType":20001,"description":52847,"extension":168,"meta":53032,"navigation":171,"path":53033,"requiresChild":26923,"seo":53034,"stem":53035,"__hash__":53036},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":52841,"toc":53028},[52842,52845,52848,52850,52852,52855,52857,53026],[11,52843,52839],{"id":52844},"voronoi",[15,52846,52847],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26061,52849],{"component":52839},[23,52851,26065],{"id":20662},[26067,52853],{":props":52854},"[{\"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\"}]",[23,52856,26073],{"id":26072},[217,52858,52859,52888,52916,52944,52972],{":tabs":1543},[43,52860,52862],{"className":45,"code":52861,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,52863,52864,52872,52880],{"__ignoreMap":48},[52,52865,52866,52868,52870],{"class":54,"line":55},[52,52867,59],{"class":58},[52,52869,63],{"class":62},[52,52871,77],{"class":58},[52,52873,52874,52876,52878],{"class":54,"line":80},[52,52875,83],{"class":58},[52,52877,52839],{"class":62},[52,52879,105],{"class":58},[52,52881,52882,52884,52886],{"class":54,"line":108},[52,52883,121],{"class":58},[52,52885,63],{"class":62},[52,52887,77],{"class":58},[43,52889,52890],{"className":360,"code":52861,"language":362,"meta":48,"style":48},[31,52891,52892,52900,52908],{"__ignoreMap":48},[52,52893,52894,52896,52898],{"class":54,"line":55},[52,52895,59],{"class":58},[52,52897,63],{"class":371},[52,52899,77],{"class":58},[52,52901,52902,52904,52906],{"class":54,"line":80},[52,52903,83],{"class":58},[52,52905,52839],{"class":371},[52,52907,105],{"class":58},[52,52909,52910,52912,52914],{"class":54,"line":108},[52,52911,121],{"class":58},[52,52913,63],{"class":371},[52,52915,77],{"class":58},[43,52917,52918],{"className":2507,"code":52861,"language":2509,"meta":48,"style":48},[31,52919,52920,52928,52936],{"__ignoreMap":48},[52,52921,52922,52924,52926],{"class":54,"line":55},[52,52923,59],{"class":58},[52,52925,63],{"class":371},[52,52927,77],{"class":58},[52,52929,52930,52932,52934],{"class":54,"line":80},[52,52931,83],{"class":58},[52,52933,52839],{"class":371},[52,52935,105],{"class":58},[52,52937,52938,52940,52942],{"class":54,"line":108},[52,52939,121],{"class":58},[52,52941,63],{"class":371},[52,52943,77],{"class":58},[43,52945,52946],{"className":419,"code":52861,"language":420,"meta":48,"style":48},[31,52947,52948,52956,52964],{"__ignoreMap":48},[52,52949,52950,52952,52954],{"class":54,"line":55},[52,52951,59],{"class":58},[52,52953,63],{"class":371},[52,52955,77],{"class":58},[52,52957,52958,52960,52962],{"class":54,"line":80},[52,52959,83],{"class":58},[52,52961,52839],{"class":371},[52,52963,105],{"class":58},[52,52965,52966,52968,52970],{"class":54,"line":108},[52,52967,121],{"class":58},[52,52969,63],{"class":371},[52,52971,77],{"class":58},[43,52973,52975],{"className":222,"code":52974,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Voronoi', props: {} }\n ]\n})\n",[31,52976,52977,52987,52991,53005,53009,53018,53022],{"__ignoreMap":48},[52,52978,52979,52981,52983,52985],{"class":54,"line":55},[52,52980,232],{"class":231},[52,52982,8385],{"class":58},[52,52984,238],{"class":231},[52,52986,8390],{"class":73},[52,52988,52989],{"class":54,"line":80},[52,52990,597],{"emptyLinePlaceholder":171},[52,52992,52993,52995,52997,52999,53001,53003],{"class":54,"line":108},[52,52994,1721],{"class":231},[52,52996,1724],{"class":371},[52,52998,1727],{"class":231},[52,53000,1730],{"class":231},[52,53002,1733],{"class":66},[52,53004,1736],{"class":58},[52,53006,53007],{"class":54,"line":118},[52,53008,1751],{"class":58},[52,53010,53011,53013,53016],{"class":54,"line":594},[52,53012,1756],{"class":58},[52,53014,53015],{"class":73},"'Voronoi'",[52,53017,2129],{"class":58},[52,53019,53020],{"class":54,"line":600},[52,53021,1773],{"class":58},[52,53023,53024],{"class":54,"line":606},[52,53025,1778],{"class":58},[156,53027,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":53029},[53030,53031],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/voronoi",{"title":52839,"description":52847},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":53038,"title":53039,"body":53040,"category":28265,"componentType":20007,"description":53047,"extension":168,"meta":53308,"navigation":171,"path":53309,"requiresChild":171,"seo":53310,"stem":53311,"__hash__":53312},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":53041,"toc":53304},[53042,53045,53048,53050,53052,53055,53057,53302],[11,53043,53039],{"id":53044},"wavedistortion",[15,53046,53047],{},"Wave-based distortion with multiple waveform types",[26061,53049],{"component":53039},[23,53051,26065],{"id":20662},[26067,53053],{":props":53054},"[{\"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\"}]",[23,53056,26073],{"id":26072},[217,53058,53059,53104,53148,53192,53236],{":tabs":1543},[43,53060,53062],{"className":45,"code":53061,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,53063,53064,53072,53080,53088,53096],{"__ignoreMap":48},[52,53065,53066,53068,53070],{"class":54,"line":55},[52,53067,59],{"class":58},[52,53069,63],{"class":62},[52,53071,77],{"class":58},[52,53073,53074,53076,53078],{"class":54,"line":80},[52,53075,83],{"class":58},[52,53077,53039],{"class":62},[52,53079,77],{"class":58},[52,53081,53082,53084,53086],{"class":54,"line":108},[52,53083,2213],{"class":58},[52,53085,2216],{"class":62},[52,53087,105],{"class":58},[52,53089,53090,53092,53094],{"class":54,"line":118},[52,53091,2230],{"class":58},[52,53093,53039],{"class":62},[52,53095,77],{"class":58},[52,53097,53098,53100,53102],{"class":54,"line":594},[52,53099,121],{"class":58},[52,53101,63],{"class":62},[52,53103,77],{"class":58},[43,53105,53106],{"className":360,"code":53061,"language":362,"meta":48,"style":48},[31,53107,53108,53116,53124,53132,53140],{"__ignoreMap":48},[52,53109,53110,53112,53114],{"class":54,"line":55},[52,53111,59],{"class":58},[52,53113,63],{"class":371},[52,53115,77],{"class":58},[52,53117,53118,53120,53122],{"class":54,"line":80},[52,53119,83],{"class":58},[52,53121,53039],{"class":371},[52,53123,77],{"class":58},[52,53125,53126,53128,53130],{"class":54,"line":108},[52,53127,2213],{"class":58},[52,53129,2216],{"class":371},[52,53131,105],{"class":58},[52,53133,53134,53136,53138],{"class":54,"line":118},[52,53135,2230],{"class":58},[52,53137,53039],{"class":371},[52,53139,77],{"class":58},[52,53141,53142,53144,53146],{"class":54,"line":594},[52,53143,121],{"class":58},[52,53145,63],{"class":371},[52,53147,77],{"class":58},[43,53149,53150],{"className":2507,"code":53061,"language":2509,"meta":48,"style":48},[31,53151,53152,53160,53168,53176,53184],{"__ignoreMap":48},[52,53153,53154,53156,53158],{"class":54,"line":55},[52,53155,59],{"class":58},[52,53157,63],{"class":371},[52,53159,77],{"class":58},[52,53161,53162,53164,53166],{"class":54,"line":80},[52,53163,83],{"class":58},[52,53165,53039],{"class":371},[52,53167,77],{"class":58},[52,53169,53170,53172,53174],{"class":54,"line":108},[52,53171,2213],{"class":58},[52,53173,2216],{"class":371},[52,53175,105],{"class":58},[52,53177,53178,53180,53182],{"class":54,"line":118},[52,53179,2230],{"class":58},[52,53181,53039],{"class":371},[52,53183,77],{"class":58},[52,53185,53186,53188,53190],{"class":54,"line":594},[52,53187,121],{"class":58},[52,53189,63],{"class":371},[52,53191,77],{"class":58},[43,53193,53194],{"className":419,"code":53061,"language":420,"meta":48,"style":48},[31,53195,53196,53204,53212,53220,53228],{"__ignoreMap":48},[52,53197,53198,53200,53202],{"class":54,"line":55},[52,53199,59],{"class":58},[52,53201,63],{"class":371},[52,53203,77],{"class":58},[52,53205,53206,53208,53210],{"class":54,"line":80},[52,53207,83],{"class":58},[52,53209,53039],{"class":371},[52,53211,77],{"class":58},[52,53213,53214,53216,53218],{"class":54,"line":108},[52,53215,2213],{"class":58},[52,53217,2216],{"class":371},[52,53219,105],{"class":58},[52,53221,53222,53224,53226],{"class":54,"line":118},[52,53223,2230],{"class":58},[52,53225,53039],{"class":371},[52,53227,77],{"class":58},[52,53229,53230,53232,53234],{"class":54,"line":594},[52,53231,121],{"class":58},[52,53233,63],{"class":371},[52,53235,77],{"class":58},[43,53237,53239],{"className":222,"code":53238,"language":224,"meta":48,"style":48},"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",[31,53240,53241,53251,53255,53269,53273,53282,53290,53294,53298],{"__ignoreMap":48},[52,53242,53243,53245,53247,53249],{"class":54,"line":55},[52,53244,232],{"class":231},[52,53246,8385],{"class":58},[52,53248,238],{"class":231},[52,53250,8390],{"class":73},[52,53252,53253],{"class":54,"line":80},[52,53254,597],{"emptyLinePlaceholder":171},[52,53256,53257,53259,53261,53263,53265,53267],{"class":54,"line":108},[52,53258,1721],{"class":231},[52,53260,1724],{"class":371},[52,53262,1727],{"class":231},[52,53264,1730],{"class":231},[52,53266,1733],{"class":66},[52,53268,1736],{"class":58},[52,53270,53271],{"class":54,"line":118},[52,53272,1751],{"class":58},[52,53274,53275,53277,53280],{"class":54,"line":594},[52,53276,1756],{"class":58},[52,53278,53279],{"class":73},"'WaveDistortion'",[52,53281,3875],{"class":58},[52,53283,53284,53286,53288],{"class":54,"line":600},[52,53285,3880],{"class":58},[52,53287,2869],{"class":73},[52,53289,2129],{"class":58},[52,53291,53292],{"class":54,"line":606},[52,53293,3897],{"class":58},[52,53295,53296],{"class":54,"line":653},[52,53297,1773],{"class":58},[52,53299,53300],{"class":54,"line":662},[52,53301,1778],{"class":58},[156,53303,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":53305},[53306,53307],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/wavedistortion",{"title":53039,"description":53047},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":53314,"title":53315,"body":53316,"category":26920,"componentType":20001,"description":53323,"extension":168,"meta":53508,"navigation":171,"path":53509,"requiresChild":26923,"seo":53510,"stem":53511,"__hash__":53512},"components/docs/components/Weave.md","Weave",{"type":8,"value":53317,"toc":53504},[53318,53321,53324,53326,53328,53331,53333,53502],[11,53319,53315],{"id":53320},"weave",[15,53322,53323],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26061,53325],{"component":53315},[23,53327,26065],{"id":20662},[26067,53329],{":props":53330},"[{\"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\"}]",[23,53332,26073],{"id":26072},[217,53334,53335,53364,53392,53420,53448],{":tabs":1543},[43,53336,53338],{"className":45,"code":53337,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,53339,53340,53348,53356],{"__ignoreMap":48},[52,53341,53342,53344,53346],{"class":54,"line":55},[52,53343,59],{"class":58},[52,53345,63],{"class":62},[52,53347,77],{"class":58},[52,53349,53350,53352,53354],{"class":54,"line":80},[52,53351,83],{"class":58},[52,53353,53315],{"class":62},[52,53355,105],{"class":58},[52,53357,53358,53360,53362],{"class":54,"line":108},[52,53359,121],{"class":58},[52,53361,63],{"class":62},[52,53363,77],{"class":58},[43,53365,53366],{"className":360,"code":53337,"language":362,"meta":48,"style":48},[31,53367,53368,53376,53384],{"__ignoreMap":48},[52,53369,53370,53372,53374],{"class":54,"line":55},[52,53371,59],{"class":58},[52,53373,63],{"class":371},[52,53375,77],{"class":58},[52,53377,53378,53380,53382],{"class":54,"line":80},[52,53379,83],{"class":58},[52,53381,53315],{"class":371},[52,53383,105],{"class":58},[52,53385,53386,53388,53390],{"class":54,"line":108},[52,53387,121],{"class":58},[52,53389,63],{"class":371},[52,53391,77],{"class":58},[43,53393,53394],{"className":2507,"code":53337,"language":2509,"meta":48,"style":48},[31,53395,53396,53404,53412],{"__ignoreMap":48},[52,53397,53398,53400,53402],{"class":54,"line":55},[52,53399,59],{"class":58},[52,53401,63],{"class":371},[52,53403,77],{"class":58},[52,53405,53406,53408,53410],{"class":54,"line":80},[52,53407,83],{"class":58},[52,53409,53315],{"class":371},[52,53411,105],{"class":58},[52,53413,53414,53416,53418],{"class":54,"line":108},[52,53415,121],{"class":58},[52,53417,63],{"class":371},[52,53419,77],{"class":58},[43,53421,53422],{"className":419,"code":53337,"language":420,"meta":48,"style":48},[31,53423,53424,53432,53440],{"__ignoreMap":48},[52,53425,53426,53428,53430],{"class":54,"line":55},[52,53427,59],{"class":58},[52,53429,63],{"class":371},[52,53431,77],{"class":58},[52,53433,53434,53436,53438],{"class":54,"line":80},[52,53435,83],{"class":58},[52,53437,53315],{"class":371},[52,53439,105],{"class":58},[52,53441,53442,53444,53446],{"class":54,"line":108},[52,53443,121],{"class":58},[52,53445,63],{"class":371},[52,53447,77],{"class":58},[43,53449,53451],{"className":222,"code":53450,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Weave', props: {} }\n ]\n})\n",[31,53452,53453,53463,53467,53481,53485,53494,53498],{"__ignoreMap":48},[52,53454,53455,53457,53459,53461],{"class":54,"line":55},[52,53456,232],{"class":231},[52,53458,8385],{"class":58},[52,53460,238],{"class":231},[52,53462,8390],{"class":73},[52,53464,53465],{"class":54,"line":80},[52,53466,597],{"emptyLinePlaceholder":171},[52,53468,53469,53471,53473,53475,53477,53479],{"class":54,"line":108},[52,53470,1721],{"class":231},[52,53472,1724],{"class":371},[52,53474,1727],{"class":231},[52,53476,1730],{"class":231},[52,53478,1733],{"class":66},[52,53480,1736],{"class":58},[52,53482,53483],{"class":54,"line":118},[52,53484,1751],{"class":58},[52,53486,53487,53489,53492],{"class":54,"line":594},[52,53488,1756],{"class":58},[52,53490,53491],{"class":73},"'Weave'",[52,53493,2129],{"class":58},[52,53495,53496],{"class":54,"line":600},[52,53497,1773],{"class":58},[52,53499,53500],{"class":54,"line":606},[52,53501,1778],{"class":58},[156,53503,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":53505},[53506,53507],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/weave",{"title":53315,"description":53323},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":53514,"title":53515,"body":53516,"category":26920,"componentType":20001,"description":53523,"extension":168,"meta":53708,"navigation":171,"path":53709,"requiresChild":26923,"seo":53710,"stem":53711,"__hash__":53712},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":53517,"toc":53704},[53518,53521,53524,53526,53528,53531,53533,53702],[11,53519,53515],{"id":53520},"webcamtexture",[15,53522,53523],{},"Display a live webcam feed with customizable object-fit modes",[26061,53525],{"component":53515},[23,53527,26065],{"id":20662},[26067,53529],{":props":53530},"[{\"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)\"}]",[23,53532,26073],{"id":26072},[217,53534,53535,53564,53592,53620,53648],{":tabs":1543},[43,53536,53538],{"className":45,"code":53537,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[31,53539,53540,53548,53556],{"__ignoreMap":48},[52,53541,53542,53544,53546],{"class":54,"line":55},[52,53543,59],{"class":58},[52,53545,63],{"class":62},[52,53547,77],{"class":58},[52,53549,53550,53552,53554],{"class":54,"line":80},[52,53551,83],{"class":58},[52,53553,53515],{"class":62},[52,53555,105],{"class":58},[52,53557,53558,53560,53562],{"class":54,"line":108},[52,53559,121],{"class":58},[52,53561,63],{"class":62},[52,53563,77],{"class":58},[43,53565,53566],{"className":360,"code":53537,"language":362,"meta":48,"style":48},[31,53567,53568,53576,53584],{"__ignoreMap":48},[52,53569,53570,53572,53574],{"class":54,"line":55},[52,53571,59],{"class":58},[52,53573,63],{"class":371},[52,53575,77],{"class":58},[52,53577,53578,53580,53582],{"class":54,"line":80},[52,53579,83],{"class":58},[52,53581,53515],{"class":371},[52,53583,105],{"class":58},[52,53585,53586,53588,53590],{"class":54,"line":108},[52,53587,121],{"class":58},[52,53589,63],{"class":371},[52,53591,77],{"class":58},[43,53593,53594],{"className":2507,"code":53537,"language":2509,"meta":48,"style":48},[31,53595,53596,53604,53612],{"__ignoreMap":48},[52,53597,53598,53600,53602],{"class":54,"line":55},[52,53599,59],{"class":58},[52,53601,63],{"class":371},[52,53603,77],{"class":58},[52,53605,53606,53608,53610],{"class":54,"line":80},[52,53607,83],{"class":58},[52,53609,53515],{"class":371},[52,53611,105],{"class":58},[52,53613,53614,53616,53618],{"class":54,"line":108},[52,53615,121],{"class":58},[52,53617,63],{"class":371},[52,53619,77],{"class":58},[43,53621,53622],{"className":419,"code":53537,"language":420,"meta":48,"style":48},[31,53623,53624,53632,53640],{"__ignoreMap":48},[52,53625,53626,53628,53630],{"class":54,"line":55},[52,53627,59],{"class":58},[52,53629,63],{"class":371},[52,53631,77],{"class":58},[52,53633,53634,53636,53638],{"class":54,"line":80},[52,53635,83],{"class":58},[52,53637,53515],{"class":371},[52,53639,105],{"class":58},[52,53641,53642,53644,53646],{"class":54,"line":108},[52,53643,121],{"class":58},[52,53645,63],{"class":371},[52,53647,77],{"class":58},[43,53649,53651],{"className":222,"code":53650,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WebcamTexture', props: {} }\n ]\n})\n",[31,53652,53653,53663,53667,53681,53685,53694,53698],{"__ignoreMap":48},[52,53654,53655,53657,53659,53661],{"class":54,"line":55},[52,53656,232],{"class":231},[52,53658,8385],{"class":58},[52,53660,238],{"class":231},[52,53662,8390],{"class":73},[52,53664,53665],{"class":54,"line":80},[52,53666,597],{"emptyLinePlaceholder":171},[52,53668,53669,53671,53673,53675,53677,53679],{"class":54,"line":108},[52,53670,1721],{"class":231},[52,53672,1724],{"class":371},[52,53674,1727],{"class":231},[52,53676,1730],{"class":231},[52,53678,1733],{"class":66},[52,53680,1736],{"class":58},[52,53682,53683],{"class":54,"line":118},[52,53684,1751],{"class":58},[52,53686,53687,53689,53692],{"class":54,"line":594},[52,53688,1756],{"class":58},[52,53690,53691],{"class":73},"'WebcamTexture'",[52,53693,2129],{"class":58},[52,53695,53696],{"class":54,"line":600},[52,53697,1773],{"class":58},[52,53699,53700],{"class":54,"line":606},[52,53701,1778],{"class":58},[156,53703,26658],{},{"title":48,"searchDepth":80,"depth":80,"links":53705},[53706,53707],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/webcamtexture",{"title":53515,"description":53523},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":53714,"title":53715,"body":53716,"category":26385,"componentType":20007,"description":53723,"extension":168,"meta":54040,"navigation":171,"path":54041,"requiresChild":171,"seo":54042,"stem":54043,"__hash__":54044},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":53717,"toc":54036},[53718,53721,53724,53726,53728,53731,53733,54034],[11,53719,53715],{"id":53720},"zoomblur",[15,53722,53723],{},"Radial zoom blur expanding from a center point",[26061,53725],{"component":53715},[23,53727,26065],{"id":20662},[26067,53729],{":props":53730},"[{\"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\"}]",[23,53732,26073],{"id":26072},[217,53734,53735,53791,53850,53906,53964],{":tabs":1543},[43,53736,53738],{"className":45,"code":53737,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,53739,53740,53748,53755,53763,53767,53775,53783],{"__ignoreMap":48},[52,53741,53742,53744,53746],{"class":54,"line":55},[52,53743,59],{"class":58},[52,53745,63],{"class":62},[52,53747,77],{"class":58},[52,53749,53750,53752],{"class":54,"line":80},[52,53751,83],{"class":58},[52,53753,53754],{"class":62},"ZoomBlur\n",[52,53756,53757,53759,53761],{"class":54,"line":108},[52,53758,17026],{"class":66},[52,53760,70],{"class":58},[52,53762,32448],{"class":73},[52,53764,53765],{"class":54,"line":118},[52,53766,26109],{"class":58},[52,53768,53769,53771,53773],{"class":54,"line":594},[52,53770,2213],{"class":58},[52,53772,2216],{"class":62},[52,53774,105],{"class":58},[52,53776,53777,53779,53781],{"class":54,"line":600},[52,53778,2230],{"class":58},[52,53780,53715],{"class":62},[52,53782,77],{"class":58},[52,53784,53785,53787,53789],{"class":54,"line":606},[52,53786,121],{"class":58},[52,53788,63],{"class":62},[52,53790,77],{"class":58},[43,53792,53794],{"className":360,"code":53793,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,53795,53796,53804,53810,53822,53826,53834,53842],{"__ignoreMap":48},[52,53797,53798,53800,53802],{"class":54,"line":55},[52,53799,59],{"class":58},[52,53801,63],{"class":371},[52,53803,77],{"class":58},[52,53805,53806,53808],{"class":54,"line":80},[52,53807,83],{"class":58},[52,53809,53754],{"class":371},[52,53811,53812,53814,53816,53818,53820],{"class":54,"line":108},[52,53813,17137],{"class":66},[52,53815,70],{"class":231},[52,53817,723],{"class":58},[52,53819,12348],{"class":371},[52,53821,729],{"class":58},[52,53823,53824],{"class":54,"line":118},[52,53825,26109],{"class":58},[52,53827,53828,53830,53832],{"class":54,"line":594},[52,53829,2213],{"class":58},[52,53831,2216],{"class":371},[52,53833,105],{"class":58},[52,53835,53836,53838,53840],{"class":54,"line":600},[52,53837,2230],{"class":58},[52,53839,53715],{"class":371},[52,53841,77],{"class":58},[52,53843,53844,53846,53848],{"class":54,"line":606},[52,53845,121],{"class":58},[52,53847,63],{"class":371},[52,53849,77],{"class":58},[43,53851,53852],{"className":2507,"code":53793,"language":2509,"meta":48,"style":48},[31,53853,53854,53862,53868,53878,53882,53890,53898],{"__ignoreMap":48},[52,53855,53856,53858,53860],{"class":54,"line":55},[52,53857,59],{"class":58},[52,53859,63],{"class":371},[52,53861,77],{"class":58},[52,53863,53864,53866],{"class":54,"line":80},[52,53865,83],{"class":58},[52,53867,53754],{"class":371},[52,53869,53870,53872,53874,53876],{"class":54,"line":108},[52,53871,17137],{"class":66},[52,53873,24004],{"class":58},[52,53875,12348],{"class":371},[52,53877,729],{"class":58},[52,53879,53880],{"class":54,"line":118},[52,53881,26109],{"class":58},[52,53883,53884,53886,53888],{"class":54,"line":594},[52,53885,2213],{"class":58},[52,53887,2216],{"class":371},[52,53889,105],{"class":58},[52,53891,53892,53894,53896],{"class":54,"line":600},[52,53893,2230],{"class":58},[52,53895,53715],{"class":371},[52,53897,77],{"class":58},[52,53899,53900,53902,53904],{"class":54,"line":606},[52,53901,121],{"class":58},[52,53903,63],{"class":371},[52,53905,77],{"class":58},[43,53907,53908],{"className":419,"code":53793,"language":420,"meta":48,"style":48},[31,53909,53910,53918,53924,53936,53940,53948,53956],{"__ignoreMap":48},[52,53911,53912,53914,53916],{"class":54,"line":55},[52,53913,59],{"class":58},[52,53915,63],{"class":371},[52,53917,77],{"class":58},[52,53919,53920,53922],{"class":54,"line":80},[52,53921,83],{"class":58},[52,53923,53754],{"class":371},[52,53925,53926,53928,53930,53932,53934],{"class":54,"line":108},[52,53927,17137],{"class":66},[52,53929,70],{"class":231},[52,53931,723],{"class":58},[52,53933,12348],{"class":371},[52,53935,729],{"class":58},[52,53937,53938],{"class":54,"line":118},[52,53939,26109],{"class":58},[52,53941,53942,53944,53946],{"class":54,"line":594},[52,53943,2213],{"class":58},[52,53945,2216],{"class":371},[52,53947,105],{"class":58},[52,53949,53950,53952,53954],{"class":54,"line":600},[52,53951,2230],{"class":58},[52,53953,53715],{"class":371},[52,53955,77],{"class":58},[52,53957,53958,53960,53962],{"class":54,"line":606},[52,53959,121],{"class":58},[52,53961,63],{"class":371},[52,53963,77],{"class":58},[43,53965,53967],{"className":222,"code":53966,"language":224,"meta":48,"style":48},"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",[31,53968,53969,53979,53983,53997,54001,54014,54022,54026,54030],{"__ignoreMap":48},[52,53970,53971,53973,53975,53977],{"class":54,"line":55},[52,53972,232],{"class":231},[52,53974,8385],{"class":58},[52,53976,238],{"class":231},[52,53978,8390],{"class":73},[52,53980,53981],{"class":54,"line":80},[52,53982,597],{"emptyLinePlaceholder":171},[52,53984,53985,53987,53989,53991,53993,53995],{"class":54,"line":108},[52,53986,1721],{"class":231},[52,53988,1724],{"class":371},[52,53990,1727],{"class":231},[52,53992,1730],{"class":231},[52,53994,1733],{"class":66},[52,53996,1736],{"class":58},[52,53998,53999],{"class":54,"line":118},[52,54000,1751],{"class":58},[52,54002,54003,54005,54008,54010,54012],{"class":54,"line":594},[52,54004,1756],{"class":58},[52,54006,54007],{"class":73},"'ZoomBlur'",[52,54009,26354],{"class":58},[52,54011,12348],{"class":371},[52,54013,4412],{"class":58},[52,54015,54016,54018,54020],{"class":54,"line":600},[52,54017,3880],{"class":58},[52,54019,2869],{"class":73},[52,54021,2129],{"class":58},[52,54023,54024],{"class":54,"line":606},[52,54025,3897],{"class":58},[52,54027,54028],{"class":54,"line":653},[52,54029,1773],{"class":58},[52,54031,54032],{"class":54,"line":662},[52,54033,1778],{"class":58},[156,54035,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54037},[54038,54039],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},"/docs/components/zoomblur",{"title":53715,"description":53723},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":26923,"error":54046},"Not authenticated",{"id":44004,"title":44005,"body":54048,"category":27931,"componentType":20007,"description":44013,"extension":168,"meta":54364,"navigation":171,"path":44332,"requiresChild":171,"seo":54365,"stem":44334,"__hash__":44335},{"type":8,"value":54049,"toc":54360},[54050,54052,54054,54056,54058,54060,54062,54358],[11,54051,44005],{"id":44010},[15,54053,44013],{},[26061,54055],{"component":44005},[23,54057,26065],{"id":20662},[26067,54059],{":props":44020},[23,54061,26073],{"id":26072},[217,54063,54064,54118,54176,54232,54290],{":tabs":1543},[43,54065,54066],{"className":45,"code":44027,"language":47,"meta":48,"style":48},[31,54067,54068,54076,54082,54090,54094,54102,54110],{"__ignoreMap":48},[52,54069,54070,54072,54074],{"class":54,"line":55},[52,54071,59],{"class":58},[52,54073,63],{"class":62},[52,54075,77],{"class":58},[52,54077,54078,54080],{"class":54,"line":80},[52,54079,83],{"class":58},[52,54081,44044],{"class":62},[52,54083,54084,54086,54088],{"class":54,"line":108},[52,54085,17026],{"class":66},[52,54087,70],{"class":58},[52,54089,44053],{"class":73},[52,54091,54092],{"class":54,"line":118},[52,54093,26109],{"class":58},[52,54095,54096,54098,54100],{"class":54,"line":594},[52,54097,2213],{"class":58},[52,54099,2216],{"class":62},[52,54101,105],{"class":58},[52,54103,54104,54106,54108],{"class":54,"line":600},[52,54105,2230],{"class":58},[52,54107,44005],{"class":62},[52,54109,77],{"class":58},[52,54111,54112,54114,54116],{"class":54,"line":606},[52,54113,121],{"class":58},[52,54115,63],{"class":62},[52,54117,77],{"class":58},[43,54119,54120],{"className":360,"code":44084,"language":362,"meta":48,"style":48},[31,54121,54122,54130,54136,54148,54152,54160,54168],{"__ignoreMap":48},[52,54123,54124,54126,54128],{"class":54,"line":55},[52,54125,59],{"class":58},[52,54127,63],{"class":371},[52,54129,77],{"class":58},[52,54131,54132,54134],{"class":54,"line":80},[52,54133,83],{"class":58},[52,54135,44044],{"class":371},[52,54137,54138,54140,54142,54144,54146],{"class":54,"line":108},[52,54139,17137],{"class":66},[52,54141,70],{"class":231},[52,54143,723],{"class":58},[52,54145,18725],{"class":371},[52,54147,729],{"class":58},[52,54149,54150],{"class":54,"line":118},[52,54151,26109],{"class":58},[52,54153,54154,54156,54158],{"class":54,"line":594},[52,54155,2213],{"class":58},[52,54157,2216],{"class":371},[52,54159,105],{"class":58},[52,54161,54162,54164,54166],{"class":54,"line":600},[52,54163,2230],{"class":58},[52,54165,44005],{"class":371},[52,54167,77],{"class":58},[52,54169,54170,54172,54174],{"class":54,"line":606},[52,54171,121],{"class":58},[52,54173,63],{"class":371},[52,54175,77],{"class":58},[43,54177,54178],{"className":2507,"code":44084,"language":2509,"meta":48,"style":48},[31,54179,54180,54188,54194,54204,54208,54216,54224],{"__ignoreMap":48},[52,54181,54182,54184,54186],{"class":54,"line":55},[52,54183,59],{"class":58},[52,54185,63],{"class":371},[52,54187,77],{"class":58},[52,54189,54190,54192],{"class":54,"line":80},[52,54191,83],{"class":58},[52,54193,44044],{"class":371},[52,54195,54196,54198,54200,54202],{"class":54,"line":108},[52,54197,17137],{"class":66},[52,54199,24004],{"class":58},[52,54201,18725],{"class":371},[52,54203,729],{"class":58},[52,54205,54206],{"class":54,"line":118},[52,54207,26109],{"class":58},[52,54209,54210,54212,54214],{"class":54,"line":594},[52,54211,2213],{"class":58},[52,54213,2216],{"class":371},[52,54215,105],{"class":58},[52,54217,54218,54220,54222],{"class":54,"line":600},[52,54219,2230],{"class":58},[52,54221,44005],{"class":371},[52,54223,77],{"class":58},[52,54225,54226,54228,54230],{"class":54,"line":606},[52,54227,121],{"class":58},[52,54229,63],{"class":371},[52,54231,77],{"class":58},[43,54233,54234],{"className":419,"code":44084,"language":420,"meta":48,"style":48},[31,54235,54236,54244,54250,54262,54266,54274,54282],{"__ignoreMap":48},[52,54237,54238,54240,54242],{"class":54,"line":55},[52,54239,59],{"class":58},[52,54241,63],{"class":371},[52,54243,77],{"class":58},[52,54245,54246,54248],{"class":54,"line":80},[52,54247,83],{"class":58},[52,54249,44044],{"class":371},[52,54251,54252,54254,54256,54258,54260],{"class":54,"line":108},[52,54253,17137],{"class":66},[52,54255,70],{"class":231},[52,54257,723],{"class":58},[52,54259,18725],{"class":371},[52,54261,729],{"class":58},[52,54263,54264],{"class":54,"line":118},[52,54265,26109],{"class":58},[52,54267,54268,54270,54272],{"class":54,"line":594},[52,54269,2213],{"class":58},[52,54271,2216],{"class":371},[52,54273,105],{"class":58},[52,54275,54276,54278,54280],{"class":54,"line":600},[52,54277,2230],{"class":58},[52,54279,44005],{"class":371},[52,54281,77],{"class":58},[52,54283,54284,54286,54288],{"class":54,"line":606},[52,54285,121],{"class":58},[52,54287,63],{"class":371},[52,54289,77],{"class":58},[43,54291,54292],{"className":222,"code":44257,"language":224,"meta":48,"style":48},[31,54293,54294,54304,54308,54322,54326,54338,54346,54350,54354],{"__ignoreMap":48},[52,54295,54296,54298,54300,54302],{"class":54,"line":55},[52,54297,232],{"class":231},[52,54299,8385],{"class":58},[52,54301,238],{"class":231},[52,54303,8390],{"class":73},[52,54305,54306],{"class":54,"line":80},[52,54307,597],{"emptyLinePlaceholder":171},[52,54309,54310,54312,54314,54316,54318,54320],{"class":54,"line":108},[52,54311,1721],{"class":231},[52,54313,1724],{"class":371},[52,54315,1727],{"class":231},[52,54317,1730],{"class":231},[52,54319,1733],{"class":66},[52,54321,1736],{"class":58},[52,54323,54324],{"class":54,"line":118},[52,54325,1751],{"class":58},[52,54327,54328,54330,54332,54334,54336],{"class":54,"line":594},[52,54329,1756],{"class":58},[52,54331,44298],{"class":73},[52,54333,26354],{"class":58},[52,54335,18725],{"class":371},[52,54337,4412],{"class":58},[52,54339,54340,54342,54344],{"class":54,"line":600},[52,54341,3880],{"class":58},[52,54343,2869],{"class":73},[52,54345,2129],{"class":58},[52,54347,54348],{"class":54,"line":606},[52,54349,3897],{"class":58},[52,54351,54352],{"class":54,"line":653},[52,54353,1773],{"class":58},[52,54355,54356],{"class":54,"line":662},[52,54357,1778],{"class":58},[156,54359,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54361},[54362,54363],{"id":20662,"depth":80,"text":26065},{"id":26072,"depth":80,"text":26073},{},{"title":44005,"description":44013},[54367,54368],{"title":43713,"path":43999,"stem":44001,"children":-1},{"title":44338,"path":44664,"stem":44666,"children":-1},1775677515878]