[{"data":1,"prerenderedAt":55051},["ShallowReactive",2],{"guide-docs":3,"component-docs":26663,"user-pro-status-data":54860,"doc-/docs/components/domtexture":54862,"doc-surr-/docs/components/domtexture":55048},[4,176,1515,1912,2149,2991,3612,5092,7731,9732,12507,14567,18235,20583,20951,21586,22229,23128,23745,24323,24865,25459,25983],{"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":2993,"body":2994,"category":1904,"description":3605,"exclude":167,"extension":168,"forceFramework":167,"icon":3606,"meta":3607,"navigation":171,"path":3608,"seo":3609,"stem":3610,"__hash__":3611},"guide/docs/guide/13.mcp.md","MCP (Pro)",{"type":8,"value":2995,"toc":3599},[2996,2999,3002,3006,3009,3012,3016,3023,3376,3380,3383,3389,3395,3401,3407,3410,3449,3500,3543,3583,3587,3590,3593,3596],[11,2997,2993],{"id":2998},"mcp-pro",[15,3000,3001],{},"The Shaders MCP (Model Context Protocol) server lets your AI agent create stunning effects directly. It can browse your saved shaders, search across the full library of Pro presets, install and modify/hook up props, all without switching context.",[23,3003,3005],{"id":3004},"your-api-key","Your API key",[15,3007,3008],{},"You'll need a personal API key to authenticate the MCP server. Generate one below, then use it in the configuration step.",[3010,3011],"api-keys",{},[23,3013,3015],{"id":3014},"connect-your-tool","Connect your tool",[15,3017,3018,3019,3022],{},"Add the following to your MCP client configuration, replacing ",[31,3020,3021],{},"YOUR_API_KEY"," with the key from your dashboard.",[217,3024,3026,3060,3139,3206,3267,3303],{":tabs":3025},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Other\"]",[43,3027,3029],{"className":190,"code":3028,"language":192,"meta":48,"style":48},"claude mcp add --transport http shaders https://shaders.com/mcp --header \"Authorization: Bearer YOUR_API_KEY\"\n",[31,3030,3031],{"__ignoreMap":48},[52,3032,3033,3036,3039,3042,3045,3048,3051,3054,3057],{"class":54,"line":55},[52,3034,3035],{"class":66},"claude",[52,3037,3038],{"class":73}," mcp",[52,3040,3041],{"class":73}," add",[52,3043,3044],{"class":371}," --transport",[52,3046,3047],{"class":73}," http",[52,3049,3050],{"class":73}," shaders",[52,3052,3053],{"class":73}," https://shaders.com/mcp",[52,3055,3056],{"class":371}," --header",[52,3058,3059],{"class":73}," \"Authorization: Bearer YOUR_API_KEY\"\n",[43,3061,3065],{"className":3062,"code":3063,"language":3064,"meta":48,"style":48},"language-json shiki shiki-themes github-dark","// .cursor/mcp.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"url\": \"https://shaders.com/mcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n","json",[31,3066,3067,3072,3077,3085,3092,3104,3111,3121,3126,3131,3135],{"__ignoreMap":48},[52,3068,3069],{"class":54,"line":55},[52,3070,3071],{"class":559},"// .cursor/mcp.json\n",[52,3073,3074],{"class":54,"line":80},[52,3075,3076],{"class":58},"{\n",[52,3078,3079,3082],{"class":54,"line":108},[52,3080,3081],{"class":371}," \"mcpServers\"",[52,3083,3084],{"class":58},": {\n",[52,3086,3087,3090],{"class":54,"line":118},[52,3088,3089],{"class":371}," \"shaders\"",[52,3091,3084],{"class":58},[52,3093,3094,3097,3099,3102],{"class":54,"line":594},[52,3095,3096],{"class":371}," \"url\"",[52,3098,624],{"class":58},[52,3100,3101],{"class":73},"\"https://shaders.com/mcp\"",[52,3103,1746],{"class":58},[52,3105,3106,3109],{"class":54,"line":600},[52,3107,3108],{"class":371}," \"headers\"",[52,3110,3084],{"class":58},[52,3112,3113,3116,3118],{"class":54,"line":606},[52,3114,3115],{"class":371}," \"Authorization\"",[52,3117,624],{"class":58},[52,3119,3120],{"class":73},"\"Bearer YOUR_API_KEY\"\n",[52,3122,3123],{"class":54,"line":653},[52,3124,3125],{"class":58}," }\n",[52,3127,3128],{"class":54,"line":662},[52,3129,3130],{"class":58}," }\n",[52,3132,3133],{"class":54,"line":671},[52,3134,2919],{"class":58},[52,3136,3137],{"class":54,"line":676},[52,3138,729],{"class":58},[43,3140,3142],{"className":3062,"code":3141,"language":3064,"meta":48,"style":48},"// .windsurf/mcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https://shaders.com/mcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[31,3143,3144,3149,3153,3159,3165,3176,3182,3190,3194,3198,3202],{"__ignoreMap":48},[52,3145,3146],{"class":54,"line":55},[52,3147,3148],{"class":559},"// .windsurf/mcp_config.json\n",[52,3150,3151],{"class":54,"line":80},[52,3152,3076],{"class":58},[52,3154,3155,3157],{"class":54,"line":108},[52,3156,3081],{"class":371},[52,3158,3084],{"class":58},[52,3160,3161,3163],{"class":54,"line":118},[52,3162,3089],{"class":371},[52,3164,3084],{"class":58},[52,3166,3167,3170,3172,3174],{"class":54,"line":594},[52,3168,3169],{"class":371}," \"serverUrl\"",[52,3171,624],{"class":58},[52,3173,3101],{"class":73},[52,3175,1746],{"class":58},[52,3177,3178,3180],{"class":54,"line":600},[52,3179,3108],{"class":371},[52,3181,3084],{"class":58},[52,3183,3184,3186,3188],{"class":54,"line":606},[52,3185,3115],{"class":371},[52,3187,624],{"class":58},[52,3189,3120],{"class":73},[52,3191,3192],{"class":54,"line":653},[52,3193,3125],{"class":58},[52,3195,3196],{"class":54,"line":662},[52,3197,3130],{"class":58},[52,3199,3200],{"class":54,"line":671},[52,3201,2919],{"class":58},[52,3203,3204],{"class":54,"line":676},[52,3205,729],{"class":58},[43,3207,3209],{"className":3062,"code":3208,"language":3064,"meta":48,"style":48},"// Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https://shaders.com/mcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n}\n",[31,3210,3211,3216,3220,3232,3243,3250,3259,3263],{"__ignoreMap":48},[52,3212,3213],{"class":54,"line":55},[52,3214,3215],{"class":559},"// Lovable → Settings → Integrations → MCP Servers\n",[52,3217,3218],{"class":54,"line":80},[52,3219,3076],{"class":58},[52,3221,3222,3225,3227,3230],{"class":54,"line":108},[52,3223,3224],{"class":371}," \"name\"",[52,3226,624],{"class":58},[52,3228,3229],{"class":73},"\"shaders\"",[52,3231,1746],{"class":58},[52,3233,3234,3237,3239,3241],{"class":54,"line":118},[52,3235,3236],{"class":371}," \"url\"",[52,3238,624],{"class":58},[52,3240,3101],{"class":73},[52,3242,1746],{"class":58},[52,3244,3245,3248],{"class":54,"line":594},[52,3246,3247],{"class":371}," \"headers\"",[52,3249,3084],{"class":58},[52,3251,3252,3255,3257],{"class":54,"line":600},[52,3253,3254],{"class":371}," \"Authorization\"",[52,3256,624],{"class":58},[52,3258,3120],{"class":73},[52,3260,3261],{"class":54,"line":606},[52,3262,2919],{"class":58},[52,3264,3265],{"class":54,"line":653},[52,3266,729],{"class":58},[43,3268,3272],{"className":3269,"code":3270,"language":3271,"meta":48,"style":48},"language-toml shiki shiki-themes github-dark","[mcp_servers.shaders]\nenabled = true\nurl = \"https://shaders.com/mcp\"\n\n[mcp_servers.shaders.http_headers]\nAuthorization = \"Bearer YOUR_API_KEY\"\n","toml",[31,3273,3274,3279,3284,3289,3293,3298],{"__ignoreMap":48},[52,3275,3276],{"class":54,"line":55},[52,3277,3278],{},"[mcp_servers.shaders]\n",[52,3280,3281],{"class":54,"line":80},[52,3282,3283],{},"enabled = true\n",[52,3285,3286],{"class":54,"line":108},[52,3287,3288],{},"url = \"https://shaders.com/mcp\"\n",[52,3290,3291],{"class":54,"line":118},[52,3292,597],{"emptyLinePlaceholder":171},[52,3294,3295],{"class":54,"line":594},[52,3296,3297],{},"[mcp_servers.shaders.http_headers]\n",[52,3299,3300],{"class":54,"line":600},[52,3301,3302],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[43,3304,3306],{"className":3062,"code":3305,"language":3064,"meta":48,"style":48},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https://shaders.com/mcp\",\n \"headers\": {\n \"Authorization\": \"Bearer YOUR_API_KEY\"\n }\n }\n }\n}\n",[31,3307,3308,3312,3318,3324,3336,3346,3352,3360,3364,3368,3372],{"__ignoreMap":48},[52,3309,3310],{"class":54,"line":55},[52,3311,3076],{"class":58},[52,3313,3314,3316],{"class":54,"line":80},[52,3315,3081],{"class":371},[52,3317,3084],{"class":58},[52,3319,3320,3322],{"class":54,"line":108},[52,3321,3089],{"class":371},[52,3323,3084],{"class":58},[52,3325,3326,3329,3331,3334],{"class":54,"line":118},[52,3327,3328],{"class":371}," \"type\"",[52,3330,624],{"class":58},[52,3332,3333],{"class":73},"\"http\"",[52,3335,1746],{"class":58},[52,3337,3338,3340,3342,3344],{"class":54,"line":594},[52,3339,3096],{"class":371},[52,3341,624],{"class":58},[52,3343,3101],{"class":73},[52,3345,1746],{"class":58},[52,3347,3348,3350],{"class":54,"line":600},[52,3349,3108],{"class":371},[52,3351,3084],{"class":58},[52,3353,3354,3356,3358],{"class":54,"line":606},[52,3355,3115],{"class":371},[52,3357,624],{"class":58},[52,3359,3120],{"class":73},[52,3361,3362],{"class":54,"line":653},[52,3363,3125],{"class":58},[52,3365,3366],{"class":54,"line":662},[52,3367,3130],{"class":58},[52,3369,3370],{"class":54,"line":671},[52,3371,2919],{"class":58},[52,3373,3374],{"class":54,"line":676},[52,3375,729],{"class":58},[23,3377,3379],{"id":3378},"start-prompting","Start prompting",[15,3381,3382],{},"Once connected, your agent gains access to the following capabilities:",[15,3384,3385,3388],{},[151,3386,3387],{},"Browse and retrieve your shaders"," — list all effects saved to your Shaders account, then pull ready-to-use component code for any of them in your framework of choice (Vue, React, Svelte, Solid, or vanilla JS). Great for picking up a design you built in the editor and dropping it straight into your codebase.",[15,3390,3391,3394],{},[151,3392,3393],{},"Explore the Pro preset library"," — search and retrieve Pro collections and presets, complete with code exports, thumbnail previews, and additional context. Watch your agent find, install and customize from a high-quality starting point.",[15,3396,3397,3400],{},[151,3398,3399],{},"Modify and connect props to state"," — make changes to your shaders and presets in-code, then wire up props to reactive state in your framework of choice for compelling interactive effects.",[15,3402,3403,3406],{},[151,3404,3405],{},"Generate SDF from your SVG files"," — certain shape effects (like Glass, Emboss, or Neon) require what's called an \"SDF\" (Signed Distance Field) to work. You can just tell your agent to generate one for you from any SVG file in your codebase or from a public URL. It will generate and store the resulting SDF back in your codebase. In most cases, you won't have to worry about this, the agent knows it's needed and will just ask you which SVG you want to use.",[15,3408,3409],{},"Example prompts to get started:",[43,3411,3413],{"className":190,"code":3412,"language":192,"meta":48,"style":48},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[31,3414,3415],{"__ignoreMap":48},[52,3416,3417,3420,3423,3426,3428,3431,3434,3437,3440,3443,3446],{"class":54,"line":55},[52,3418,3419],{"class":66},"Install",[52,3421,3422],{"class":73}," my",[52,3424,3425],{"class":73}," \"Landing Hero\"",[52,3427,1724],{"class":73},[52,3429,3430],{"class":73}," in",[52,3432,3433],{"class":73}," the",[52,3435,3436],{"class":73}," hero",[52,3438,3439],{"class":73}," section",[52,3441,3442],{"class":73}," as",[52,3444,3445],{"class":73}," a",[52,3447,3448],{"class":73}," background.\n",[43,3450,3452],{"className":190,"code":3451,"language":192,"meta":48,"style":48},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[31,3453,3454],{"__ignoreMap":48},[52,3455,3456,3459,3461,3463,3466,3468,3471,3474,3477,3480,3483,3486,3489,3491,3494,3497],{"class":54,"line":55},[52,3457,3458],{"class":66},"Add",[52,3460,3445],{"class":73},[52,3462,1724],{"class":73},[52,3464,3465],{"class":73}," to",[52,3467,3433],{"class":73},[52,3469,3470],{"class":73}," background",[52,3472,3473],{"class":73}," of",[52,3475,3476],{"class":73}," this",[52,3478,3479],{"class":73}," card,",[52,3481,3482],{"class":73}," something",[52,3484,3485],{"class":73}," blue",[52,3487,3488],{"class":73}," with",[52,3490,3445],{"class":73},[52,3492,3493],{"class":73}," subtle",[52,3495,3496],{"class":73}," flowing",[52,3498,3499],{"class":73}," animation.\n",[43,3501,3503],{"className":190,"code":3502,"language":192,"meta":48,"style":48},"Make the circle in this shader get bigger as we scroll past the section.\n",[31,3504,3505],{"__ignoreMap":48},[52,3506,3507,3510,3512,3515,3517,3519,3521,3524,3527,3529,3532,3535,3538,3540],{"class":54,"line":55},[52,3508,3509],{"class":66},"Make",[52,3511,3433],{"class":73},[52,3513,3514],{"class":73}," circle",[52,3516,3430],{"class":73},[52,3518,3476],{"class":73},[52,3520,1724],{"class":73},[52,3522,3523],{"class":73}," get",[52,3525,3526],{"class":73}," bigger",[52,3528,3442],{"class":73},[52,3530,3531],{"class":73}," we",[52,3533,3534],{"class":73}," scroll",[52,3536,3537],{"class":73}," past",[52,3539,3433],{"class":73},[52,3541,3542],{"class":73}," section.\n",[43,3544,3546],{"className":190,"code":3545,"language":192,"meta":48,"style":48},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[31,3547,3548],{"__ignoreMap":48},[52,3549,3550,3552,3554,3557,3559,3561,3564,3567,3570,3573,3576,3578,3580],{"class":54,"line":55},[52,3551,3458],{"class":66},[52,3553,3422],{"class":73},[52,3555,3556],{"class":73}," logo.svg",[52,3558,3442],{"class":73},[52,3560,3445],{"class":73},[52,3562,3563],{"class":73}," liquid",[52,3565,3566],{"class":73}," glass",[52,3568,3569],{"class":73}," effect",[52,3571,3572],{"class":73}," on",[52,3574,3575],{"class":73}," top",[52,3577,3473],{"class":73},[52,3579,3476],{"class":73},[52,3581,3582],{"class":73}," shader.\n",[23,3584,3586],{"id":3585},"pro-knowledge-base","Pro knowledge base",[15,3588,3589],{},"Beyond account access, Shaders Pro MCP includes an exclusive knowledge base of expert notes added into your agent's context — detailed guidance on advanced composition patterns that aren't part of the public documentation. Your agent reads these automatically when relevant, so you get higher-quality implementations out of the box rather than having to work through trial and error.",[15,3591,3592],{},"Certain collections and presets also provide additional contextual information, which makes it easier for your agent to understand how to best implement the specific look of that effect.",[15,3594,3595],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[156,3597,3598],{},"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 .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}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}",{"title":48,"searchDepth":80,"depth":80,"links":3600},[3601,3602,3603,3604],{"id":3004,"depth":80,"text":3005},{"id":3014,"depth":80,"text":3015},{"id":3378,"depth":80,"text":3379},{"id":3585,"depth":80,"text":3586},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},"/docs/guide/mcp",{"title":2993,"description":3605},"docs/guide/13.mcp","8Fjv89IoNPQjCj7ceFNm-eB1TzQ3odLlSdfkeQOJWu0",{"id":3613,"title":1473,"body":3614,"category":165,"description":5086,"exclude":167,"extension":168,"forceFramework":167,"icon":5087,"meta":5088,"navigation":171,"path":1472,"seo":5089,"stem":5090,"__hash__":5091},"guide/docs/guide/2.composing-effects.md",{"type":8,"value":3615,"toc":5082},[3616,3619,3625,3629,3636,4080,4083,4087,4105,4527,4530,4539,5076,5079],[11,3617,1473],{"id":3618},"composing-effects",[15,3620,3621,3622,3624],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[31,3623,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,3626,3628],{"id":3627},"stacking-components","Stacking Components",[15,3630,3631,3632,3635],{},"Components are evaluated ",[151,3633,3634],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[217,3637,3638,3721,3818,3908,3998],{":tabs":1543},[43,3639,3641],{"className":45,"code":3640,"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,3642,3643,3651,3656,3664,3668,3673,3695,3699,3704,3713],{"__ignoreMap":48},[52,3644,3645,3647,3649],{"class":54,"line":55},[52,3646,59],{"class":58},[52,3648,63],{"class":62},[52,3650,77],{"class":58},[52,3652,3653],{"class":54,"line":80},[52,3654,3655],{"class":559}," \u003C!-- Bottom layer -->\n",[52,3657,3658,3660,3662],{"class":54,"line":108},[52,3659,83],{"class":58},[52,3661,86],{"class":62},[52,3663,105],{"class":58},[52,3665,3666],{"class":54,"line":118},[52,3667,597],{"emptyLinePlaceholder":171},[52,3669,3670],{"class":54,"line":594},[52,3671,3672],{"class":559}," \u003C!-- Middle layer -->\n",[52,3674,3675,3677,3679,3681,3683,3685,3688,3690,3693],{"class":54,"line":600},[52,3676,83],{"class":58},[52,3678,2216],{"class":62},[52,3680,1574],{"class":66},[52,3682,70],{"class":58},[52,3684,2223],{"class":73},[52,3686,3687],{"class":66}," radius",[52,3689,70],{"class":58},[52,3691,3692],{"class":73},"\"0.8\"",[52,3694,105],{"class":58},[52,3696,3697],{"class":54,"line":606},[52,3698,597],{"emptyLinePlaceholder":171},[52,3700,3701],{"class":54,"line":653},[52,3702,3703],{"class":559}," \u003C!-- Top layer -->\n",[52,3705,3706,3708,3711],{"class":54,"line":662},[52,3707,83],{"class":58},[52,3709,3710],{"class":62},"GlassTiles",[52,3712,105],{"class":58},[52,3714,3715,3717,3719],{"class":54,"line":671},[52,3716,121],{"class":58},[52,3718,63],{"class":62},[52,3720,77],{"class":58},[43,3722,3724],{"className":360,"code":3723,"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,3725,3726,3734,3744,3752,3756,3765,3789,3793,3802,3810],{"__ignoreMap":48},[52,3727,3728,3730,3732],{"class":54,"line":55},[52,3729,59],{"class":58},[52,3731,63],{"class":371},[52,3733,77],{"class":58},[52,3735,3736,3739,3742],{"class":54,"line":80},[52,3737,3738],{"class":58}," {",[52,3740,3741],{"class":559},"/* Bottom layer */",[52,3743,729],{"class":58},[52,3745,3746,3748,3750],{"class":54,"line":108},[52,3747,83],{"class":58},[52,3749,86],{"class":371},[52,3751,105],{"class":58},[52,3753,3754],{"class":54,"line":118},[52,3755,597],{"emptyLinePlaceholder":171},[52,3757,3758,3760,3763],{"class":54,"line":594},[52,3759,3738],{"class":58},[52,3761,3762],{"class":559},"/* Middle layer */",[52,3764,729],{"class":58},[52,3766,3767,3769,3771,3773,3775,3777,3779,3781,3783,3786],{"class":54,"line":600},[52,3768,83],{"class":58},[52,3770,2216],{"class":371},[52,3772,1574],{"class":66},[52,3774,70],{"class":231},[52,3776,2223],{"class":73},[52,3778,3687],{"class":66},[52,3780,70],{"class":231},[52,3782,723],{"class":58},[52,3784,3785],{"class":371},"0.8",[52,3787,3788],{"class":58},"} />\n",[52,3790,3791],{"class":54,"line":606},[52,3792,597],{"emptyLinePlaceholder":171},[52,3794,3795,3797,3800],{"class":54,"line":653},[52,3796,3738],{"class":58},[52,3798,3799],{"class":559},"/* Top layer */",[52,3801,729],{"class":58},[52,3803,3804,3806,3808],{"class":54,"line":662},[52,3805,83],{"class":58},[52,3807,3710],{"class":371},[52,3809,105],{"class":58},[52,3811,3812,3814,3816],{"class":54,"line":671},[52,3813,121],{"class":58},[52,3815,63],{"class":371},[52,3817,77],{"class":58},[43,3819,3820],{"className":419,"code":3723,"language":420,"meta":48,"style":48},[31,3821,3822,3830,3838,3846,3850,3858,3880,3884,3892,3900],{"__ignoreMap":48},[52,3823,3824,3826,3828],{"class":54,"line":55},[52,3825,59],{"class":58},[52,3827,63],{"class":371},[52,3829,77],{"class":58},[52,3831,3832,3834,3836],{"class":54,"line":80},[52,3833,3738],{"class":58},[52,3835,3741],{"class":559},[52,3837,729],{"class":58},[52,3839,3840,3842,3844],{"class":54,"line":108},[52,3841,83],{"class":58},[52,3843,86],{"class":371},[52,3845,105],{"class":58},[52,3847,3848],{"class":54,"line":118},[52,3849,597],{"emptyLinePlaceholder":171},[52,3851,3852,3854,3856],{"class":54,"line":594},[52,3853,3738],{"class":58},[52,3855,3762],{"class":559},[52,3857,729],{"class":58},[52,3859,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878],{"class":54,"line":600},[52,3861,83],{"class":58},[52,3863,2216],{"class":371},[52,3865,1574],{"class":66},[52,3867,70],{"class":231},[52,3869,2223],{"class":73},[52,3871,3687],{"class":66},[52,3873,70],{"class":231},[52,3875,723],{"class":58},[52,3877,3785],{"class":371},[52,3879,3788],{"class":58},[52,3881,3882],{"class":54,"line":606},[52,3883,597],{"emptyLinePlaceholder":171},[52,3885,3886,3888,3890],{"class":54,"line":653},[52,3887,3738],{"class":58},[52,3889,3799],{"class":559},[52,3891,729],{"class":58},[52,3893,3894,3896,3898],{"class":54,"line":662},[52,3895,83],{"class":58},[52,3897,3710],{"class":371},[52,3899,105],{"class":58},[52,3901,3902,3904,3906],{"class":54,"line":671},[52,3903,121],{"class":58},[52,3905,63],{"class":371},[52,3907,77],{"class":58},[43,3909,3910],{"className":419,"code":3723,"language":420,"meta":48,"style":48},[31,3911,3912,3920,3928,3936,3940,3948,3970,3974,3982,3990],{"__ignoreMap":48},[52,3913,3914,3916,3918],{"class":54,"line":55},[52,3915,59],{"class":58},[52,3917,63],{"class":371},[52,3919,77],{"class":58},[52,3921,3922,3924,3926],{"class":54,"line":80},[52,3923,3738],{"class":58},[52,3925,3741],{"class":559},[52,3927,729],{"class":58},[52,3929,3930,3932,3934],{"class":54,"line":108},[52,3931,83],{"class":58},[52,3933,86],{"class":371},[52,3935,105],{"class":58},[52,3937,3938],{"class":54,"line":118},[52,3939,597],{"emptyLinePlaceholder":171},[52,3941,3942,3944,3946],{"class":54,"line":594},[52,3943,3738],{"class":58},[52,3945,3762],{"class":559},[52,3947,729],{"class":58},[52,3949,3950,3952,3954,3956,3958,3960,3962,3964,3966,3968],{"class":54,"line":600},[52,3951,83],{"class":58},[52,3953,2216],{"class":371},[52,3955,1574],{"class":66},[52,3957,70],{"class":231},[52,3959,2223],{"class":73},[52,3961,3687],{"class":66},[52,3963,70],{"class":231},[52,3965,723],{"class":58},[52,3967,3785],{"class":371},[52,3969,3788],{"class":58},[52,3971,3972],{"class":54,"line":606},[52,3973,597],{"emptyLinePlaceholder":171},[52,3975,3976,3978,3980],{"class":54,"line":653},[52,3977,3738],{"class":58},[52,3979,3799],{"class":559},[52,3981,729],{"class":58},[52,3983,3984,3986,3988],{"class":54,"line":662},[52,3985,83],{"class":58},[52,3987,3710],{"class":371},[52,3989,105],{"class":58},[52,3991,3992,3994,3996],{"class":54,"line":671},[52,3993,121],{"class":58},[52,3995,63],{"class":371},[52,3997,77],{"class":58},[43,3999,4001],{"className":222,"code":4000,"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,4002,4003,4017,4021,4026,4035,4040,4058,4063,4072,4076],{"__ignoreMap":48},[52,4004,4005,4007,4009,4011,4013,4015],{"class":54,"line":55},[52,4006,1721],{"class":231},[52,4008,1724],{"class":371},[52,4010,1727],{"class":231},[52,4012,1730],{"class":231},[52,4014,1733],{"class":66},[52,4016,1736],{"class":58},[52,4018,4019],{"class":54,"line":80},[52,4020,1751],{"class":58},[52,4022,4023],{"class":54,"line":108},[52,4024,4025],{"class":559}," // Bottom layer\n",[52,4027,4028,4030,4032],{"class":54,"line":118},[52,4029,1756],{"class":58},[52,4031,2126],{"class":73},[52,4033,4034],{"class":58},", props: {} },\n",[52,4036,4037],{"class":54,"line":594},[52,4038,4039],{"class":559}," // Middle layer\n",[52,4041,4042,4044,4046,4048,4050,4053,4055],{"class":54,"line":600},[52,4043,1756],{"class":58},[52,4045,2869],{"class":73},[52,4047,1762],{"class":58},[52,4049,2880],{"class":73},[52,4051,4052],{"class":58},", radius: ",[52,4054,3785],{"class":371},[52,4056,4057],{"class":58}," } },\n",[52,4059,4060],{"class":54,"line":606},[52,4061,4062],{"class":559}," // Top layer\n",[52,4064,4065,4067,4070],{"class":54,"line":653},[52,4066,1756],{"class":58},[52,4068,4069],{"class":73},"'GlassTiles'",[52,4071,2129],{"class":58},[52,4073,4074],{"class":54,"line":662},[52,4075,1773],{"class":58},[52,4077,4078],{"class":54,"line":671},[52,4079,1778],{"class":58},[19,4081],{":preset":4082},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,4084,4086],{"id":4085},"nesting-components","Nesting Components",[15,4088,4089,4090,4093,4094,4097,4098,4101,4102,4104],{},"Notice how the ",[31,4091,4092],{},"\u003CGlassTiles>"," component in the above example applies to all proceeding sibling components. If you wanted to ",[1833,4095,4096],{},"only"," apply glass tiles to the ",[31,4099,4100],{},"\u003CCircle>"," component, you can nest it inside the ",[31,4103,4092],{}," component:",[217,4106,4107,4186,4275,4361,4447],{":tabs":1543},[43,4108,4110],{"className":45,"code":4109,"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,4111,4112,4120,4125,4133,4137,4142,4150,4170,4178],{"__ignoreMap":48},[52,4113,4114,4116,4118],{"class":54,"line":55},[52,4115,59],{"class":58},[52,4117,63],{"class":62},[52,4119,77],{"class":58},[52,4121,4122],{"class":54,"line":80},[52,4123,4124],{"class":559}," \u003C!-- This gradient is NOT affected -->\n",[52,4126,4127,4129,4131],{"class":54,"line":108},[52,4128,83],{"class":58},[52,4130,86],{"class":62},[52,4132,105],{"class":58},[52,4134,4135],{"class":54,"line":118},[52,4136,597],{"emptyLinePlaceholder":171},[52,4138,4139],{"class":54,"line":594},[52,4140,4141],{"class":559}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[52,4143,4144,4146,4148],{"class":54,"line":600},[52,4145,83],{"class":58},[52,4147,3710],{"class":62},[52,4149,77],{"class":58},[52,4151,4152,4154,4156,4158,4160,4162,4164,4166,4168],{"class":54,"line":606},[52,4153,2213],{"class":58},[52,4155,2216],{"class":62},[52,4157,1574],{"class":66},[52,4159,70],{"class":58},[52,4161,2223],{"class":73},[52,4163,3687],{"class":66},[52,4165,70],{"class":58},[52,4167,3692],{"class":73},[52,4169,105],{"class":58},[52,4171,4172,4174,4176],{"class":54,"line":653},[52,4173,2230],{"class":58},[52,4175,3710],{"class":62},[52,4177,77],{"class":58},[52,4179,4180,4182,4184],{"class":54,"line":662},[52,4181,121],{"class":58},[52,4183,63],{"class":62},[52,4185,77],{"class":58},[43,4187,4189],{"className":360,"code":4188,"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,4190,4191,4199,4208,4216,4220,4229,4237,4259,4267],{"__ignoreMap":48},[52,4192,4193,4195,4197],{"class":54,"line":55},[52,4194,59],{"class":58},[52,4196,63],{"class":371},[52,4198,77],{"class":58},[52,4200,4201,4203,4206],{"class":54,"line":80},[52,4202,3738],{"class":58},[52,4204,4205],{"class":559},"/* This gradient is NOT affected */",[52,4207,729],{"class":58},[52,4209,4210,4212,4214],{"class":54,"line":108},[52,4211,83],{"class":58},[52,4213,86],{"class":371},[52,4215,105],{"class":58},[52,4217,4218],{"class":54,"line":118},[52,4219,597],{"emptyLinePlaceholder":171},[52,4221,4222,4224,4227],{"class":54,"line":594},[52,4223,3738],{"class":58},[52,4225,4226],{"class":559},"/* Only the Circle inside has glass tiles applied */",[52,4228,729],{"class":58},[52,4230,4231,4233,4235],{"class":54,"line":600},[52,4232,83],{"class":58},[52,4234,3710],{"class":371},[52,4236,77],{"class":58},[52,4238,4239,4241,4243,4245,4247,4249,4251,4253,4255,4257],{"class":54,"line":606},[52,4240,2213],{"class":58},[52,4242,2216],{"class":371},[52,4244,1574],{"class":66},[52,4246,70],{"class":231},[52,4248,2223],{"class":73},[52,4250,3687],{"class":66},[52,4252,70],{"class":231},[52,4254,723],{"class":58},[52,4256,3785],{"class":371},[52,4258,3788],{"class":58},[52,4260,4261,4263,4265],{"class":54,"line":653},[52,4262,2230],{"class":58},[52,4264,3710],{"class":371},[52,4266,77],{"class":58},[52,4268,4269,4271,4273],{"class":54,"line":662},[52,4270,121],{"class":58},[52,4272,63],{"class":371},[52,4274,77],{"class":58},[43,4276,4277],{"className":419,"code":4188,"language":420,"meta":48,"style":48},[31,4278,4279,4287,4295,4303,4307,4315,4323,4345,4353],{"__ignoreMap":48},[52,4280,4281,4283,4285],{"class":54,"line":55},[52,4282,59],{"class":58},[52,4284,63],{"class":371},[52,4286,77],{"class":58},[52,4288,4289,4291,4293],{"class":54,"line":80},[52,4290,3738],{"class":58},[52,4292,4205],{"class":559},[52,4294,729],{"class":58},[52,4296,4297,4299,4301],{"class":54,"line":108},[52,4298,83],{"class":58},[52,4300,86],{"class":371},[52,4302,105],{"class":58},[52,4304,4305],{"class":54,"line":118},[52,4306,597],{"emptyLinePlaceholder":171},[52,4308,4309,4311,4313],{"class":54,"line":594},[52,4310,3738],{"class":58},[52,4312,4226],{"class":559},[52,4314,729],{"class":58},[52,4316,4317,4319,4321],{"class":54,"line":600},[52,4318,83],{"class":58},[52,4320,3710],{"class":371},[52,4322,77],{"class":58},[52,4324,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343],{"class":54,"line":606},[52,4326,2213],{"class":58},[52,4328,2216],{"class":371},[52,4330,1574],{"class":66},[52,4332,70],{"class":231},[52,4334,2223],{"class":73},[52,4336,3687],{"class":66},[52,4338,70],{"class":231},[52,4340,723],{"class":58},[52,4342,3785],{"class":371},[52,4344,3788],{"class":58},[52,4346,4347,4349,4351],{"class":54,"line":653},[52,4348,2230],{"class":58},[52,4350,3710],{"class":371},[52,4352,77],{"class":58},[52,4354,4355,4357,4359],{"class":54,"line":662},[52,4356,121],{"class":58},[52,4358,63],{"class":371},[52,4360,77],{"class":58},[43,4362,4363],{"className":419,"code":4188,"language":420,"meta":48,"style":48},[31,4364,4365,4373,4381,4389,4393,4401,4409,4431,4439],{"__ignoreMap":48},[52,4366,4367,4369,4371],{"class":54,"line":55},[52,4368,59],{"class":58},[52,4370,63],{"class":371},[52,4372,77],{"class":58},[52,4374,4375,4377,4379],{"class":54,"line":80},[52,4376,3738],{"class":58},[52,4378,4205],{"class":559},[52,4380,729],{"class":58},[52,4382,4383,4385,4387],{"class":54,"line":108},[52,4384,83],{"class":58},[52,4386,86],{"class":371},[52,4388,105],{"class":58},[52,4390,4391],{"class":54,"line":118},[52,4392,597],{"emptyLinePlaceholder":171},[52,4394,4395,4397,4399],{"class":54,"line":594},[52,4396,3738],{"class":58},[52,4398,4226],{"class":559},[52,4400,729],{"class":58},[52,4402,4403,4405,4407],{"class":54,"line":600},[52,4404,83],{"class":58},[52,4406,3710],{"class":371},[52,4408,77],{"class":58},[52,4410,4411,4413,4415,4417,4419,4421,4423,4425,4427,4429],{"class":54,"line":606},[52,4412,2213],{"class":58},[52,4414,2216],{"class":371},[52,4416,1574],{"class":66},[52,4418,70],{"class":231},[52,4420,2223],{"class":73},[52,4422,3687],{"class":66},[52,4424,70],{"class":231},[52,4426,723],{"class":58},[52,4428,3785],{"class":371},[52,4430,3788],{"class":58},[52,4432,4433,4435,4437],{"class":54,"line":653},[52,4434,2230],{"class":58},[52,4436,3710],{"class":371},[52,4438,77],{"class":58},[52,4440,4441,4443,4445],{"class":54,"line":662},[52,4442,121],{"class":58},[52,4444,63],{"class":371},[52,4446,77],{"class":58},[43,4448,4450],{"className":222,"code":4449,"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,4451,4452,4466,4470,4475,4483,4488,4497,4514,4519,4523],{"__ignoreMap":48},[52,4453,4454,4456,4458,4460,4462,4464],{"class":54,"line":55},[52,4455,1721],{"class":231},[52,4457,1724],{"class":371},[52,4459,1727],{"class":231},[52,4461,1730],{"class":231},[52,4463,1733],{"class":66},[52,4465,1736],{"class":58},[52,4467,4468],{"class":54,"line":80},[52,4469,1751],{"class":58},[52,4471,4472],{"class":54,"line":108},[52,4473,4474],{"class":559}," // This gradient is NOT affected\n",[52,4476,4477,4479,4481],{"class":54,"line":118},[52,4478,1756],{"class":58},[52,4480,2126],{"class":73},[52,4482,4034],{"class":58},[52,4484,4485],{"class":54,"line":594},[52,4486,4487],{"class":559}," // Only the Circle inside has glass tiles applied\n",[52,4489,4490,4492,4494],{"class":54,"line":600},[52,4491,1756],{"class":58},[52,4493,4069],{"class":73},[52,4495,4496],{"class":58},", props: {}, children: [\n",[52,4498,4499,4502,4504,4506,4508,4510,4512],{"class":54,"line":606},[52,4500,4501],{"class":58}," { type: ",[52,4503,2869],{"class":73},[52,4505,1762],{"class":58},[52,4507,2880],{"class":73},[52,4509,4052],{"class":58},[52,4511,3785],{"class":371},[52,4513,1768],{"class":58},[52,4515,4516],{"class":54,"line":653},[52,4517,4518],{"class":58}," ]}\n",[52,4520,4521],{"class":54,"line":662},[52,4522,1773],{"class":58},[52,4524,4525],{"class":54,"line":671},[52,4526,1778],{"class":58},[19,4528],{":preset":4529},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,4531,4532,4533,4535,4536,4538],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[31,4534,86],{},") don't accept children, whereas components that apply effects (such as ",[31,4537,3710],{},") do. The component reference in this documentation shows if the particular component accepts children.",[217,4540,4541,4644,4758,4868,4978],{":tabs":1543},[43,4542,4544],{"className":45,"code":4543,"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,4545,4546,4554,4559,4567,4571,4576,4592,4600,4620,4628,4636],{"__ignoreMap":48},[52,4547,4548,4550,4552],{"class":54,"line":55},[52,4549,59],{"class":58},[52,4551,63],{"class":62},[52,4553,77],{"class":58},[52,4555,4556],{"class":54,"line":80},[52,4557,4558],{"class":559}," \u003C!-- Unaffected -->\n",[52,4560,4561,4563,4565],{"class":54,"line":108},[52,4562,83],{"class":58},[52,4564,86],{"class":62},[52,4566,105],{"class":58},[52,4568,4569],{"class":54,"line":118},[52,4570,597],{"emptyLinePlaceholder":171},[52,4572,4573],{"class":54,"line":594},[52,4574,4575],{"class":559}," \u003C!-- Nested effects apply only to Circle -->\n",[52,4577,4578,4580,4583,4585,4587,4590],{"class":54,"line":600},[52,4579,83],{"class":58},[52,4581,4582],{"class":62},"GridDistortion",[52,4584,3687],{"class":66},[52,4586,70],{"class":58},[52,4588,4589],{"class":73},"\"2\"",[52,4591,77],{"class":58},[52,4593,4594,4596,4598],{"class":54,"line":606},[52,4595,2213],{"class":58},[52,4597,3710],{"class":62},[52,4599,77],{"class":58},[52,4601,4602,4604,4606,4608,4610,4612,4614,4616,4618],{"class":54,"line":653},[52,4603,2476],{"class":58},[52,4605,2216],{"class":62},[52,4607,1574],{"class":66},[52,4609,70],{"class":58},[52,4611,2223],{"class":73},[52,4613,3687],{"class":66},[52,4615,70],{"class":58},[52,4617,3692],{"class":73},[52,4619,105],{"class":58},[52,4621,4622,4624,4626],{"class":54,"line":662},[52,4623,2491],{"class":58},[52,4625,3710],{"class":62},[52,4627,77],{"class":58},[52,4629,4630,4632,4634],{"class":54,"line":671},[52,4631,2230],{"class":58},[52,4633,4582],{"class":62},[52,4635,77],{"class":58},[52,4637,4638,4640,4642],{"class":54,"line":676},[52,4639,121],{"class":58},[52,4641,63],{"class":62},[52,4643,77],{"class":58},[43,4645,4647],{"className":360,"code":4646,"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,4648,4649,4657,4666,4674,4678,4687,4704,4712,4734,4742,4750],{"__ignoreMap":48},[52,4650,4651,4653,4655],{"class":54,"line":55},[52,4652,59],{"class":58},[52,4654,63],{"class":371},[52,4656,77],{"class":58},[52,4658,4659,4661,4664],{"class":54,"line":80},[52,4660,3738],{"class":58},[52,4662,4663],{"class":559},"/* Unaffected */",[52,4665,729],{"class":58},[52,4667,4668,4670,4672],{"class":54,"line":108},[52,4669,83],{"class":58},[52,4671,86],{"class":371},[52,4673,105],{"class":58},[52,4675,4676],{"class":54,"line":118},[52,4677,597],{"emptyLinePlaceholder":171},[52,4679,4680,4682,4685],{"class":54,"line":594},[52,4681,3738],{"class":58},[52,4683,4684],{"class":559},"/* Nested effects apply only to Circle */",[52,4686,729],{"class":58},[52,4688,4689,4691,4693,4695,4697,4699,4702],{"class":54,"line":600},[52,4690,83],{"class":58},[52,4692,4582],{"class":371},[52,4694,3687],{"class":66},[52,4696,70],{"class":231},[52,4698,723],{"class":58},[52,4700,4701],{"class":371},"2",[52,4703,1999],{"class":58},[52,4705,4706,4708,4710],{"class":54,"line":606},[52,4707,2213],{"class":58},[52,4709,3710],{"class":371},[52,4711,77],{"class":58},[52,4713,4714,4716,4718,4720,4722,4724,4726,4728,4730,4732],{"class":54,"line":653},[52,4715,2476],{"class":58},[52,4717,2216],{"class":371},[52,4719,1574],{"class":66},[52,4721,70],{"class":231},[52,4723,2223],{"class":73},[52,4725,3687],{"class":66},[52,4727,70],{"class":231},[52,4729,723],{"class":58},[52,4731,3785],{"class":371},[52,4733,3788],{"class":58},[52,4735,4736,4738,4740],{"class":54,"line":662},[52,4737,2491],{"class":58},[52,4739,3710],{"class":371},[52,4741,77],{"class":58},[52,4743,4744,4746,4748],{"class":54,"line":671},[52,4745,2230],{"class":58},[52,4747,4582],{"class":371},[52,4749,77],{"class":58},[52,4751,4752,4754,4756],{"class":54,"line":676},[52,4753,121],{"class":58},[52,4755,63],{"class":371},[52,4757,77],{"class":58},[43,4759,4760],{"className":419,"code":4646,"language":420,"meta":48,"style":48},[31,4761,4762,4770,4778,4786,4790,4798,4814,4822,4844,4852,4860],{"__ignoreMap":48},[52,4763,4764,4766,4768],{"class":54,"line":55},[52,4765,59],{"class":58},[52,4767,63],{"class":371},[52,4769,77],{"class":58},[52,4771,4772,4774,4776],{"class":54,"line":80},[52,4773,3738],{"class":58},[52,4775,4663],{"class":559},[52,4777,729],{"class":58},[52,4779,4780,4782,4784],{"class":54,"line":108},[52,4781,83],{"class":58},[52,4783,86],{"class":371},[52,4785,105],{"class":58},[52,4787,4788],{"class":54,"line":118},[52,4789,597],{"emptyLinePlaceholder":171},[52,4791,4792,4794,4796],{"class":54,"line":594},[52,4793,3738],{"class":58},[52,4795,4684],{"class":559},[52,4797,729],{"class":58},[52,4799,4800,4802,4804,4806,4808,4810,4812],{"class":54,"line":600},[52,4801,83],{"class":58},[52,4803,4582],{"class":371},[52,4805,3687],{"class":66},[52,4807,70],{"class":231},[52,4809,723],{"class":58},[52,4811,4701],{"class":371},[52,4813,1999],{"class":58},[52,4815,4816,4818,4820],{"class":54,"line":606},[52,4817,2213],{"class":58},[52,4819,3710],{"class":371},[52,4821,77],{"class":58},[52,4823,4824,4826,4828,4830,4832,4834,4836,4838,4840,4842],{"class":54,"line":653},[52,4825,2476],{"class":58},[52,4827,2216],{"class":371},[52,4829,1574],{"class":66},[52,4831,70],{"class":231},[52,4833,2223],{"class":73},[52,4835,3687],{"class":66},[52,4837,70],{"class":231},[52,4839,723],{"class":58},[52,4841,3785],{"class":371},[52,4843,3788],{"class":58},[52,4845,4846,4848,4850],{"class":54,"line":662},[52,4847,2491],{"class":58},[52,4849,3710],{"class":371},[52,4851,77],{"class":58},[52,4853,4854,4856,4858],{"class":54,"line":671},[52,4855,2230],{"class":58},[52,4857,4582],{"class":371},[52,4859,77],{"class":58},[52,4861,4862,4864,4866],{"class":54,"line":676},[52,4863,121],{"class":58},[52,4865,63],{"class":371},[52,4867,77],{"class":58},[43,4869,4870],{"className":419,"code":4646,"language":420,"meta":48,"style":48},[31,4871,4872,4880,4888,4896,4900,4908,4924,4932,4954,4962,4970],{"__ignoreMap":48},[52,4873,4874,4876,4878],{"class":54,"line":55},[52,4875,59],{"class":58},[52,4877,63],{"class":371},[52,4879,77],{"class":58},[52,4881,4882,4884,4886],{"class":54,"line":80},[52,4883,3738],{"class":58},[52,4885,4663],{"class":559},[52,4887,729],{"class":58},[52,4889,4890,4892,4894],{"class":54,"line":108},[52,4891,83],{"class":58},[52,4893,86],{"class":371},[52,4895,105],{"class":58},[52,4897,4898],{"class":54,"line":118},[52,4899,597],{"emptyLinePlaceholder":171},[52,4901,4902,4904,4906],{"class":54,"line":594},[52,4903,3738],{"class":58},[52,4905,4684],{"class":559},[52,4907,729],{"class":58},[52,4909,4910,4912,4914,4916,4918,4920,4922],{"class":54,"line":600},[52,4911,83],{"class":58},[52,4913,4582],{"class":371},[52,4915,3687],{"class":66},[52,4917,70],{"class":231},[52,4919,723],{"class":58},[52,4921,4701],{"class":371},[52,4923,1999],{"class":58},[52,4925,4926,4928,4930],{"class":54,"line":606},[52,4927,2213],{"class":58},[52,4929,3710],{"class":371},[52,4931,77],{"class":58},[52,4933,4934,4936,4938,4940,4942,4944,4946,4948,4950,4952],{"class":54,"line":653},[52,4935,2476],{"class":58},[52,4937,2216],{"class":371},[52,4939,1574],{"class":66},[52,4941,70],{"class":231},[52,4943,2223],{"class":73},[52,4945,3687],{"class":66},[52,4947,70],{"class":231},[52,4949,723],{"class":58},[52,4951,3785],{"class":371},[52,4953,3788],{"class":58},[52,4955,4956,4958,4960],{"class":54,"line":662},[52,4957,2491],{"class":58},[52,4959,3710],{"class":371},[52,4961,77],{"class":58},[52,4963,4964,4966,4968],{"class":54,"line":671},[52,4965,2230],{"class":58},[52,4967,4582],{"class":371},[52,4969,77],{"class":58},[52,4971,4972,4974,4976],{"class":54,"line":676},[52,4973,121],{"class":58},[52,4975,63],{"class":371},[52,4977,77],{"class":58},[43,4979,4981],{"className":222,"code":4980,"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,4982,4983,4997,5001,5006,5014,5019,5034,5042,5059,5064,5068,5072],{"__ignoreMap":48},[52,4984,4985,4987,4989,4991,4993,4995],{"class":54,"line":55},[52,4986,1721],{"class":231},[52,4988,1724],{"class":371},[52,4990,1727],{"class":231},[52,4992,1730],{"class":231},[52,4994,1733],{"class":66},[52,4996,1736],{"class":58},[52,4998,4999],{"class":54,"line":80},[52,5000,1751],{"class":58},[52,5002,5003],{"class":54,"line":108},[52,5004,5005],{"class":559}," // Unaffected\n",[52,5007,5008,5010,5012],{"class":54,"line":118},[52,5009,1756],{"class":58},[52,5011,2126],{"class":73},[52,5013,4034],{"class":58},[52,5015,5016],{"class":54,"line":594},[52,5017,5018],{"class":559}," // Nested effects apply only to Circle\n",[52,5020,5021,5023,5026,5029,5031],{"class":54,"line":600},[52,5022,1756],{"class":58},[52,5024,5025],{"class":73},"'GridDistortion'",[52,5027,5028],{"class":58},", props: { radius: ",[52,5030,4701],{"class":371},[52,5032,5033],{"class":58}," }, children: [\n",[52,5035,5036,5038,5040],{"class":54,"line":606},[52,5037,4501],{"class":58},[52,5039,4069],{"class":73},[52,5041,4496],{"class":58},[52,5043,5044,5047,5049,5051,5053,5055,5057],{"class":54,"line":653},[52,5045,5046],{"class":58}," { type: ",[52,5048,2869],{"class":73},[52,5050,1762],{"class":58},[52,5052,2880],{"class":73},[52,5054,4052],{"class":58},[52,5056,3785],{"class":371},[52,5058,1768],{"class":58},[52,5060,5061],{"class":54,"line":662},[52,5062,5063],{"class":58}," ]}\n",[52,5065,5066],{"class":54,"line":671},[52,5067,4518],{"class":58},[52,5069,5070],{"class":54,"line":676},[52,5071,1773],{"class":58},[52,5073,5074],{"class":54,"line":682},[52,5075,1778],{"class":58},[19,5077],{":preset":5078},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[156,5080,5081],{},"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":5083},[5084,5085],{"id":3627,"depth":80,"text":3628},{"id":4085,"depth":80,"text":4086},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1473,"description":5086},"docs/guide/2.composing-effects","5LYxb9Lo1q--M770AtDR45qeulw8wiudjDStJCjsgMk",{"id":5093,"title":5094,"body":5095,"category":7723,"description":7724,"exclude":167,"extension":168,"forceFramework":167,"icon":7725,"meta":7726,"navigation":171,"path":7727,"seo":7728,"stem":7729,"__hash__":7730},"guide/docs/guide/3.blending-masking.md","Blending & Masking",{"type":8,"value":5096,"toc":7713},[5097,5100,5103,5107,5118,5461,5464,5469,5565,5569,5572,6147,6150,6153,6167,6482,6485,6488,6492,6503,6525,6536,6540,6555,6561,6970,6973,6979,6983,6990,7024,7708,7711],[11,5098,5094],{"id":5099},"blending-masking",[15,5101,5102],{},"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,5104,5106],{"id":5105},"blend-modes","Blend Modes",[15,5108,5109,5110,5113,5114,5117],{},"Every component has a ",[31,5111,5112],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[31,5115,5116],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[217,5119,5120,5187,5260,5330,5400],{":tabs":1543},[43,5121,5123],{"className":45,"code":5122,"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,5124,5125,5133,5141,5145,5150,5179],{"__ignoreMap":48},[52,5126,5127,5129,5131],{"class":54,"line":55},[52,5128,59],{"class":58},[52,5130,63],{"class":62},[52,5132,77],{"class":58},[52,5134,5135,5137,5139],{"class":54,"line":80},[52,5136,83],{"class":58},[52,5138,86],{"class":62},[52,5140,105],{"class":58},[52,5142,5143],{"class":54,"line":108},[52,5144,597],{"emptyLinePlaceholder":171},[52,5146,5147],{"class":54,"line":118},[52,5148,5149],{"class":559}," \u003C!-- Multiply darkens by multiplying colors -->\n",[52,5151,5152,5154,5156,5158,5160,5162,5164,5166,5169,5172,5174,5177],{"class":54,"line":594},[52,5153,83],{"class":58},[52,5155,2216],{"class":62},[52,5157,1574],{"class":66},[52,5159,70],{"class":58},[52,5161,2223],{"class":73},[52,5163,3687],{"class":66},[52,5165,70],{"class":58},[52,5167,5168],{"class":73},"\"0.5\"",[52,5170,5171],{"class":66}," blendMode",[52,5173,70],{"class":58},[52,5175,5176],{"class":73},"\"multiply\"",[52,5178,105],{"class":58},[52,5180,5181,5183,5185],{"class":54,"line":600},[52,5182,121],{"class":58},[52,5184,63],{"class":62},[52,5186,77],{"class":58},[43,5188,5190],{"className":360,"code":5189,"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,5191,5192,5200,5208,5212,5221,5252],{"__ignoreMap":48},[52,5193,5194,5196,5198],{"class":54,"line":55},[52,5195,59],{"class":58},[52,5197,63],{"class":371},[52,5199,77],{"class":58},[52,5201,5202,5204,5206],{"class":54,"line":80},[52,5203,83],{"class":58},[52,5205,86],{"class":371},[52,5207,105],{"class":58},[52,5209,5210],{"class":54,"line":108},[52,5211,597],{"emptyLinePlaceholder":171},[52,5213,5214,5216,5219],{"class":54,"line":118},[52,5215,3738],{"class":58},[52,5217,5218],{"class":559},"/* Multiply darkens by multiplying colors */",[52,5220,729],{"class":58},[52,5222,5223,5225,5227,5229,5231,5233,5235,5237,5239,5242,5244,5246,5248,5250],{"class":54,"line":594},[52,5224,83],{"class":58},[52,5226,2216],{"class":371},[52,5228,1574],{"class":66},[52,5230,70],{"class":231},[52,5232,2223],{"class":73},[52,5234,3687],{"class":66},[52,5236,70],{"class":231},[52,5238,723],{"class":58},[52,5240,5241],{"class":371},"0.5",[52,5243,2577],{"class":58},[52,5245,5112],{"class":66},[52,5247,70],{"class":231},[52,5249,5176],{"class":73},[52,5251,105],{"class":58},[52,5253,5254,5256,5258],{"class":54,"line":600},[52,5255,121],{"class":58},[52,5257,63],{"class":371},[52,5259,77],{"class":58},[43,5261,5262],{"className":419,"code":5189,"language":420,"meta":48,"style":48},[31,5263,5264,5272,5280,5284,5292,5322],{"__ignoreMap":48},[52,5265,5266,5268,5270],{"class":54,"line":55},[52,5267,59],{"class":58},[52,5269,63],{"class":371},[52,5271,77],{"class":58},[52,5273,5274,5276,5278],{"class":54,"line":80},[52,5275,83],{"class":58},[52,5277,86],{"class":371},[52,5279,105],{"class":58},[52,5281,5282],{"class":54,"line":108},[52,5283,597],{"emptyLinePlaceholder":171},[52,5285,5286,5288,5290],{"class":54,"line":118},[52,5287,3738],{"class":58},[52,5289,5218],{"class":559},[52,5291,729],{"class":58},[52,5293,5294,5296,5298,5300,5302,5304,5306,5308,5310,5312,5314,5316,5318,5320],{"class":54,"line":594},[52,5295,83],{"class":58},[52,5297,2216],{"class":371},[52,5299,1574],{"class":66},[52,5301,70],{"class":231},[52,5303,2223],{"class":73},[52,5305,3687],{"class":66},[52,5307,70],{"class":231},[52,5309,723],{"class":58},[52,5311,5241],{"class":371},[52,5313,2577],{"class":58},[52,5315,5112],{"class":66},[52,5317,70],{"class":231},[52,5319,5176],{"class":73},[52,5321,105],{"class":58},[52,5323,5324,5326,5328],{"class":54,"line":600},[52,5325,121],{"class":58},[52,5327,63],{"class":371},[52,5329,77],{"class":58},[43,5331,5332],{"className":419,"code":5189,"language":420,"meta":48,"style":48},[31,5333,5334,5342,5350,5354,5362,5392],{"__ignoreMap":48},[52,5335,5336,5338,5340],{"class":54,"line":55},[52,5337,59],{"class":58},[52,5339,63],{"class":371},[52,5341,77],{"class":58},[52,5343,5344,5346,5348],{"class":54,"line":80},[52,5345,83],{"class":58},[52,5347,86],{"class":371},[52,5349,105],{"class":58},[52,5351,5352],{"class":54,"line":108},[52,5353,597],{"emptyLinePlaceholder":171},[52,5355,5356,5358,5360],{"class":54,"line":118},[52,5357,3738],{"class":58},[52,5359,5218],{"class":559},[52,5361,729],{"class":58},[52,5363,5364,5366,5368,5370,5372,5374,5376,5378,5380,5382,5384,5386,5388,5390],{"class":54,"line":594},[52,5365,83],{"class":58},[52,5367,2216],{"class":371},[52,5369,1574],{"class":66},[52,5371,70],{"class":231},[52,5373,2223],{"class":73},[52,5375,3687],{"class":66},[52,5377,70],{"class":231},[52,5379,723],{"class":58},[52,5381,5241],{"class":371},[52,5383,2577],{"class":58},[52,5385,5112],{"class":66},[52,5387,70],{"class":231},[52,5389,5176],{"class":73},[52,5391,105],{"class":58},[52,5393,5394,5396,5398],{"class":54,"line":600},[52,5395,121],{"class":58},[52,5397,63],{"class":371},[52,5399,77],{"class":58},[43,5401,5403],{"className":222,"code":5402,"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,5404,5405,5419,5423,5431,5453,5457],{"__ignoreMap":48},[52,5406,5407,5409,5411,5413,5415,5417],{"class":54,"line":55},[52,5408,1721],{"class":231},[52,5410,1724],{"class":371},[52,5412,1727],{"class":231},[52,5414,1730],{"class":231},[52,5416,1733],{"class":66},[52,5418,1736],{"class":58},[52,5420,5421],{"class":54,"line":80},[52,5422,1751],{"class":58},[52,5424,5425,5427,5429],{"class":54,"line":108},[52,5426,1756],{"class":58},[52,5428,2126],{"class":73},[52,5430,4034],{"class":58},[52,5432,5433,5435,5437,5439,5441,5443,5445,5448,5451],{"class":54,"line":118},[52,5434,1756],{"class":58},[52,5436,2869],{"class":73},[52,5438,1762],{"class":58},[52,5440,2880],{"class":73},[52,5442,4052],{"class":58},[52,5444,5241],{"class":371},[52,5446,5447],{"class":58},", blendMode: ",[52,5449,5450],{"class":73},"'multiply'",[52,5452,1768],{"class":58},[52,5454,5455],{"class":54,"line":594},[52,5456,1773],{"class":58},[52,5458,5459],{"class":54,"line":600},[52,5460,1778],{"class":58},[19,5462],{":preset":5463},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,5465,5466],{},[151,5467,5468],{},"Available blend modes:",[1465,5470,5471,5478,5495,5512,5526,5537,5554],{},[1468,5472,5473,624,5476],{},[151,5474,5475],{},"Basic",[31,5477,5116],{},[1468,5479,5480,624,5483,1881,5486,1881,5489,1881,5492],{},[151,5481,5482],{},"Darkening",[31,5484,5485],{},"multiply",[31,5487,5488],{},"darken",[31,5490,5491],{},"colorBurn",[31,5493,5494],{},"linearBurn",[1468,5496,5497,624,5500,1881,5503,1881,5506,1881,5509],{},[151,5498,5499],{},"Lightening",[31,5501,5502],{},"screen",[31,5504,5505],{},"lighten",[31,5507,5508],{},"colorDodge",[31,5510,5511],{},"linearDodge",[1468,5513,5514,624,5517,1881,5520,1881,5523],{},[151,5515,5516],{},"Contrast",[31,5518,5519],{},"overlay",[31,5521,5522],{},"softLight",[31,5524,5525],{},"hardLight",[1468,5527,5528,624,5531,1881,5534],{},[151,5529,5530],{},"Difference",[31,5532,5533],{},"difference",[31,5535,5536],{},"exclusion",[1468,5538,5539,624,5542,1881,5545,1881,5548,1881,5551],{},[151,5540,5541],{},"Color",[31,5543,5544],{},"hue",[31,5546,5547],{},"saturation",[31,5549,5550],{},"color",[31,5552,5553],{},"luminosity",[1468,5555,5556,624,5559,1881,5562],{},[151,5557,5558],{},"Color Space Blending",[31,5560,5561],{},"normal-oklab",[31,5563,5564],{},"normal-oklch",[2925,5566,5568],{"id":5567},"combining-blend-modes","Combining Blend Modes",[15,5570,5571],{},"Use different blend modes on multiple layers to create complex interactions:",[217,5573,5574,5679,5806,5926,6046],{":tabs":1543},[43,5575,5577],{"className":45,"code":5576,"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,5578,5579,5587,5595,5599,5636,5671],{"__ignoreMap":48},[52,5580,5581,5583,5585],{"class":54,"line":55},[52,5582,59],{"class":58},[52,5584,63],{"class":62},[52,5586,77],{"class":58},[52,5588,5589,5591,5593],{"class":54,"line":80},[52,5590,83],{"class":58},[52,5592,86],{"class":62},[52,5594,105],{"class":58},[52,5596,5597],{"class":54,"line":108},[52,5598,597],{"emptyLinePlaceholder":171},[52,5600,5601,5603,5605,5607,5609,5612,5614,5616,5619,5622,5624,5627,5629,5631,5634],{"class":54,"line":118},[52,5602,83],{"class":58},[52,5604,2216],{"class":62},[52,5606,1574],{"class":66},[52,5608,70],{"class":58},[52,5610,5611],{"class":73},"\"#00ffff\"",[52,5613,3687],{"class":66},[52,5615,70],{"class":58},[52,5617,5618],{"class":73},"\"0.6\"",[52,5620,5621],{"class":66}," :center",[52,5623,70],{"class":58},[52,5625,5626],{"class":73},"\"{ x: 0.4, y: 0.5 }\"",[52,5628,5171],{"class":66},[52,5630,70],{"class":58},[52,5632,5633],{"class":73},"\"screen\"",[52,5635,105],{"class":58},[52,5637,5638,5640,5642,5644,5646,5649,5651,5653,5655,5657,5659,5662,5664,5666,5669],{"class":54,"line":594},[52,5639,83],{"class":58},[52,5641,2216],{"class":62},[52,5643,1574],{"class":66},[52,5645,70],{"class":58},[52,5647,5648],{"class":73},"\"#ff00ff\"",[52,5650,3687],{"class":66},[52,5652,70],{"class":58},[52,5654,5618],{"class":73},[52,5656,5621],{"class":66},[52,5658,70],{"class":58},[52,5660,5661],{"class":73},"\"{ x: 0.6, y: 0.5 }\"",[52,5663,5171],{"class":66},[52,5665,70],{"class":58},[52,5667,5668],{"class":73},"\"difference\"",[52,5670,105],{"class":58},[52,5672,5673,5675,5677],{"class":54,"line":600},[52,5674,121],{"class":58},[52,5676,63],{"class":62},[52,5678,77],{"class":58},[43,5680,5682],{"className":360,"code":5681,"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,5683,5684,5692,5700,5704,5754,5798],{"__ignoreMap":48},[52,5685,5686,5688,5690],{"class":54,"line":55},[52,5687,59],{"class":58},[52,5689,63],{"class":371},[52,5691,77],{"class":58},[52,5693,5694,5696,5698],{"class":54,"line":80},[52,5695,83],{"class":58},[52,5697,86],{"class":371},[52,5699,105],{"class":58},[52,5701,5702],{"class":54,"line":108},[52,5703,597],{"emptyLinePlaceholder":171},[52,5705,5706,5708,5710,5712,5714,5716,5718,5720,5722,5725,5727,5730,5732,5735,5738,5741,5743,5746,5748,5750,5752],{"class":54,"line":118},[52,5707,83],{"class":58},[52,5709,2216],{"class":371},[52,5711,1574],{"class":66},[52,5713,70],{"class":231},[52,5715,5611],{"class":73},[52,5717,3687],{"class":66},[52,5719,70],{"class":231},[52,5721,723],{"class":58},[52,5723,5724],{"class":371},"0.6",[52,5726,2577],{"class":58},[52,5728,5729],{"class":66},"center",[52,5731,70],{"class":231},[52,5733,5734],{"class":58},"{{ x: ",[52,5736,5737],{"class":371},"0.4",[52,5739,5740],{"class":58},", y: ",[52,5742,5241],{"class":371},[52,5744,5745],{"class":58}," }} ",[52,5747,5112],{"class":66},[52,5749,70],{"class":231},[52,5751,5633],{"class":73},[52,5753,105],{"class":58},[52,5755,5756,5758,5760,5762,5764,5766,5768,5770,5772,5774,5776,5778,5780,5782,5784,5786,5788,5790,5792,5794,5796],{"class":54,"line":594},[52,5757,83],{"class":58},[52,5759,2216],{"class":371},[52,5761,1574],{"class":66},[52,5763,70],{"class":231},[52,5765,5648],{"class":73},[52,5767,3687],{"class":66},[52,5769,70],{"class":231},[52,5771,723],{"class":58},[52,5773,5724],{"class":371},[52,5775,2577],{"class":58},[52,5777,5729],{"class":66},[52,5779,70],{"class":231},[52,5781,5734],{"class":58},[52,5783,5724],{"class":371},[52,5785,5740],{"class":58},[52,5787,5241],{"class":371},[52,5789,5745],{"class":58},[52,5791,5112],{"class":66},[52,5793,70],{"class":231},[52,5795,5668],{"class":73},[52,5797,105],{"class":58},[52,5799,5800,5802,5804],{"class":54,"line":600},[52,5801,121],{"class":58},[52,5803,63],{"class":371},[52,5805,77],{"class":58},[43,5807,5808],{"className":419,"code":5681,"language":420,"meta":48,"style":48},[31,5809,5810,5818,5826,5830,5874,5918],{"__ignoreMap":48},[52,5811,5812,5814,5816],{"class":54,"line":55},[52,5813,59],{"class":58},[52,5815,63],{"class":371},[52,5817,77],{"class":58},[52,5819,5820,5822,5824],{"class":54,"line":80},[52,5821,83],{"class":58},[52,5823,86],{"class":371},[52,5825,105],{"class":58},[52,5827,5828],{"class":54,"line":108},[52,5829,597],{"emptyLinePlaceholder":171},[52,5831,5832,5834,5836,5838,5840,5842,5844,5846,5848,5850,5852,5854,5856,5858,5860,5862,5864,5866,5868,5870,5872],{"class":54,"line":118},[52,5833,83],{"class":58},[52,5835,2216],{"class":371},[52,5837,1574],{"class":66},[52,5839,70],{"class":231},[52,5841,5611],{"class":73},[52,5843,3687],{"class":66},[52,5845,70],{"class":231},[52,5847,723],{"class":58},[52,5849,5724],{"class":371},[52,5851,2577],{"class":58},[52,5853,5729],{"class":66},[52,5855,70],{"class":231},[52,5857,5734],{"class":58},[52,5859,5737],{"class":371},[52,5861,5740],{"class":58},[52,5863,5241],{"class":371},[52,5865,5745],{"class":58},[52,5867,5112],{"class":66},[52,5869,70],{"class":231},[52,5871,5633],{"class":73},[52,5873,105],{"class":58},[52,5875,5876,5878,5880,5882,5884,5886,5888,5890,5892,5894,5896,5898,5900,5902,5904,5906,5908,5910,5912,5914,5916],{"class":54,"line":594},[52,5877,83],{"class":58},[52,5879,2216],{"class":371},[52,5881,1574],{"class":66},[52,5883,70],{"class":231},[52,5885,5648],{"class":73},[52,5887,3687],{"class":66},[52,5889,70],{"class":231},[52,5891,723],{"class":58},[52,5893,5724],{"class":371},[52,5895,2577],{"class":58},[52,5897,5729],{"class":66},[52,5899,70],{"class":231},[52,5901,5734],{"class":58},[52,5903,5724],{"class":371},[52,5905,5740],{"class":58},[52,5907,5241],{"class":371},[52,5909,5745],{"class":58},[52,5911,5112],{"class":66},[52,5913,70],{"class":231},[52,5915,5668],{"class":73},[52,5917,105],{"class":58},[52,5919,5920,5922,5924],{"class":54,"line":600},[52,5921,121],{"class":58},[52,5923,63],{"class":371},[52,5925,77],{"class":58},[43,5927,5928],{"className":419,"code":5681,"language":420,"meta":48,"style":48},[31,5929,5930,5938,5946,5950,5994,6038],{"__ignoreMap":48},[52,5931,5932,5934,5936],{"class":54,"line":55},[52,5933,59],{"class":58},[52,5935,63],{"class":371},[52,5937,77],{"class":58},[52,5939,5940,5942,5944],{"class":54,"line":80},[52,5941,83],{"class":58},[52,5943,86],{"class":371},[52,5945,105],{"class":58},[52,5947,5948],{"class":54,"line":108},[52,5949,597],{"emptyLinePlaceholder":171},[52,5951,5952,5954,5956,5958,5960,5962,5964,5966,5968,5970,5972,5974,5976,5978,5980,5982,5984,5986,5988,5990,5992],{"class":54,"line":118},[52,5953,83],{"class":58},[52,5955,2216],{"class":371},[52,5957,1574],{"class":66},[52,5959,70],{"class":231},[52,5961,5611],{"class":73},[52,5963,3687],{"class":66},[52,5965,70],{"class":231},[52,5967,723],{"class":58},[52,5969,5724],{"class":371},[52,5971,2577],{"class":58},[52,5973,5729],{"class":66},[52,5975,70],{"class":231},[52,5977,5734],{"class":58},[52,5979,5737],{"class":371},[52,5981,5740],{"class":58},[52,5983,5241],{"class":371},[52,5985,5745],{"class":58},[52,5987,5112],{"class":66},[52,5989,70],{"class":231},[52,5991,5633],{"class":73},[52,5993,105],{"class":58},[52,5995,5996,5998,6000,6002,6004,6006,6008,6010,6012,6014,6016,6018,6020,6022,6024,6026,6028,6030,6032,6034,6036],{"class":54,"line":594},[52,5997,83],{"class":58},[52,5999,2216],{"class":371},[52,6001,1574],{"class":66},[52,6003,70],{"class":231},[52,6005,5648],{"class":73},[52,6007,3687],{"class":66},[52,6009,70],{"class":231},[52,6011,723],{"class":58},[52,6013,5724],{"class":371},[52,6015,2577],{"class":58},[52,6017,5729],{"class":66},[52,6019,70],{"class":231},[52,6021,5734],{"class":58},[52,6023,5724],{"class":371},[52,6025,5740],{"class":58},[52,6027,5241],{"class":371},[52,6029,5745],{"class":58},[52,6031,5112],{"class":66},[52,6033,70],{"class":231},[52,6035,5668],{"class":73},[52,6037,105],{"class":58},[52,6039,6040,6042,6044],{"class":54,"line":600},[52,6041,121],{"class":58},[52,6043,63],{"class":371},[52,6045,77],{"class":58},[43,6047,6049],{"className":222,"code":6048,"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,6050,6051,6065,6069,6077,6109,6139,6143],{"__ignoreMap":48},[52,6052,6053,6055,6057,6059,6061,6063],{"class":54,"line":55},[52,6054,1721],{"class":231},[52,6056,1724],{"class":371},[52,6058,1727],{"class":231},[52,6060,1730],{"class":231},[52,6062,1733],{"class":66},[52,6064,1736],{"class":58},[52,6066,6067],{"class":54,"line":80},[52,6068,1751],{"class":58},[52,6070,6071,6073,6075],{"class":54,"line":108},[52,6072,1756],{"class":58},[52,6074,2126],{"class":73},[52,6076,4034],{"class":58},[52,6078,6079,6081,6083,6085,6088,6090,6092,6095,6097,6099,6101,6104,6107],{"class":54,"line":118},[52,6080,1756],{"class":58},[52,6082,2869],{"class":73},[52,6084,1762],{"class":58},[52,6086,6087],{"class":73},"'#00ffff'",[52,6089,4052],{"class":58},[52,6091,5724],{"class":371},[52,6093,6094],{"class":58},", center: { x: ",[52,6096,5737],{"class":371},[52,6098,5740],{"class":58},[52,6100,5241],{"class":371},[52,6102,6103],{"class":58}," }, blendMode: ",[52,6105,6106],{"class":73},"'screen'",[52,6108,4057],{"class":58},[52,6110,6111,6113,6115,6117,6120,6122,6124,6126,6128,6130,6132,6134,6137],{"class":54,"line":594},[52,6112,1756],{"class":58},[52,6114,2869],{"class":73},[52,6116,1762],{"class":58},[52,6118,6119],{"class":73},"'#ff00ff'",[52,6121,4052],{"class":58},[52,6123,5724],{"class":371},[52,6125,6094],{"class":58},[52,6127,5724],{"class":371},[52,6129,5740],{"class":58},[52,6131,5241],{"class":371},[52,6133,6103],{"class":58},[52,6135,6136],{"class":73},"'difference'",[52,6138,1768],{"class":58},[52,6140,6141],{"class":54,"line":600},[52,6142,1773],{"class":58},[52,6144,6145],{"class":54,"line":606},[52,6146,1778],{"class":58},[19,6148],{":preset":6149},"{\"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,6151,6152],{"id":2584},"Opacity",[15,6154,6155,6156,6158,6159,6162,6163,6166],{},"Control layer transparency with the ",[31,6157,2584],{}," prop. Values range from ",[31,6160,6161],{},"0"," (fully transparent) to ",[31,6164,6165],{},"1"," (fully opaque):",[217,6168,6169,6229,6294,6358,6422],{":tabs":1543},[43,6170,6172],{"className":45,"code":6171,"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,6173,6174,6182,6190,6194,6221],{"__ignoreMap":48},[52,6175,6176,6178,6180],{"class":54,"line":55},[52,6177,59],{"class":58},[52,6179,63],{"class":62},[52,6181,77],{"class":58},[52,6183,6184,6186,6188],{"class":54,"line":80},[52,6185,83],{"class":58},[52,6187,86],{"class":62},[52,6189,105],{"class":58},[52,6191,6192],{"class":54,"line":108},[52,6193,597],{"emptyLinePlaceholder":171},[52,6195,6196,6198,6200,6202,6204,6206,6208,6210,6212,6215,6217,6219],{"class":54,"line":118},[52,6197,83],{"class":58},[52,6199,2216],{"class":62},[52,6201,1574],{"class":66},[52,6203,70],{"class":58},[52,6205,2223],{"class":73},[52,6207,3687],{"class":66},[52,6209,70],{"class":58},[52,6211,3692],{"class":73},[52,6213,6214],{"class":66}," opacity",[52,6216,70],{"class":58},[52,6218,5168],{"class":73},[52,6220,105],{"class":58},[52,6222,6223,6225,6227],{"class":54,"line":594},[52,6224,121],{"class":58},[52,6226,63],{"class":62},[52,6228,77],{"class":58},[43,6230,6232],{"className":360,"code":6231,"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,6233,6234,6242,6250,6254,6286],{"__ignoreMap":48},[52,6235,6236,6238,6240],{"class":54,"line":55},[52,6237,59],{"class":58},[52,6239,63],{"class":371},[52,6241,77],{"class":58},[52,6243,6244,6246,6248],{"class":54,"line":80},[52,6245,83],{"class":58},[52,6247,86],{"class":371},[52,6249,105],{"class":58},[52,6251,6252],{"class":54,"line":108},[52,6253,597],{"emptyLinePlaceholder":171},[52,6255,6256,6258,6260,6262,6264,6266,6268,6270,6272,6274,6276,6278,6280,6282,6284],{"class":54,"line":118},[52,6257,83],{"class":58},[52,6259,2216],{"class":371},[52,6261,1574],{"class":66},[52,6263,70],{"class":231},[52,6265,2223],{"class":73},[52,6267,3687],{"class":66},[52,6269,70],{"class":231},[52,6271,723],{"class":58},[52,6273,3785],{"class":371},[52,6275,2577],{"class":58},[52,6277,2584],{"class":66},[52,6279,70],{"class":231},[52,6281,723],{"class":58},[52,6283,5241],{"class":371},[52,6285,3788],{"class":58},[52,6287,6288,6290,6292],{"class":54,"line":594},[52,6289,121],{"class":58},[52,6291,63],{"class":371},[52,6293,77],{"class":58},[43,6295,6296],{"className":419,"code":6231,"language":420,"meta":48,"style":48},[31,6297,6298,6306,6314,6318,6350],{"__ignoreMap":48},[52,6299,6300,6302,6304],{"class":54,"line":55},[52,6301,59],{"class":58},[52,6303,63],{"class":371},[52,6305,77],{"class":58},[52,6307,6308,6310,6312],{"class":54,"line":80},[52,6309,83],{"class":58},[52,6311,86],{"class":371},[52,6313,105],{"class":58},[52,6315,6316],{"class":54,"line":108},[52,6317,597],{"emptyLinePlaceholder":171},[52,6319,6320,6322,6324,6326,6328,6330,6332,6334,6336,6338,6340,6342,6344,6346,6348],{"class":54,"line":118},[52,6321,83],{"class":58},[52,6323,2216],{"class":371},[52,6325,1574],{"class":66},[52,6327,70],{"class":231},[52,6329,2223],{"class":73},[52,6331,3687],{"class":66},[52,6333,70],{"class":231},[52,6335,723],{"class":58},[52,6337,3785],{"class":371},[52,6339,2577],{"class":58},[52,6341,2584],{"class":66},[52,6343,70],{"class":231},[52,6345,723],{"class":58},[52,6347,5241],{"class":371},[52,6349,3788],{"class":58},[52,6351,6352,6354,6356],{"class":54,"line":594},[52,6353,121],{"class":58},[52,6355,63],{"class":371},[52,6357,77],{"class":58},[43,6359,6360],{"className":419,"code":6231,"language":420,"meta":48,"style":48},[31,6361,6362,6370,6378,6382,6414],{"__ignoreMap":48},[52,6363,6364,6366,6368],{"class":54,"line":55},[52,6365,59],{"class":58},[52,6367,63],{"class":371},[52,6369,77],{"class":58},[52,6371,6372,6374,6376],{"class":54,"line":80},[52,6373,83],{"class":58},[52,6375,86],{"class":371},[52,6377,105],{"class":58},[52,6379,6380],{"class":54,"line":108},[52,6381,597],{"emptyLinePlaceholder":171},[52,6383,6384,6386,6388,6390,6392,6394,6396,6398,6400,6402,6404,6406,6408,6410,6412],{"class":54,"line":118},[52,6385,83],{"class":58},[52,6387,2216],{"class":371},[52,6389,1574],{"class":66},[52,6391,70],{"class":231},[52,6393,2223],{"class":73},[52,6395,3687],{"class":66},[52,6397,70],{"class":231},[52,6399,723],{"class":58},[52,6401,3785],{"class":371},[52,6403,2577],{"class":58},[52,6405,2584],{"class":66},[52,6407,70],{"class":231},[52,6409,723],{"class":58},[52,6411,5241],{"class":371},[52,6413,3788],{"class":58},[52,6415,6416,6418,6420],{"class":54,"line":594},[52,6417,121],{"class":58},[52,6419,63],{"class":371},[52,6421,77],{"class":58},[43,6423,6425],{"className":222,"code":6424,"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,6426,6427,6441,6445,6453,6474,6478],{"__ignoreMap":48},[52,6428,6429,6431,6433,6435,6437,6439],{"class":54,"line":55},[52,6430,1721],{"class":231},[52,6432,1724],{"class":371},[52,6434,1727],{"class":231},[52,6436,1730],{"class":231},[52,6438,1733],{"class":66},[52,6440,1736],{"class":58},[52,6442,6443],{"class":54,"line":80},[52,6444,1751],{"class":58},[52,6446,6447,6449,6451],{"class":54,"line":108},[52,6448,1756],{"class":58},[52,6450,2126],{"class":73},[52,6452,4034],{"class":58},[52,6454,6455,6457,6459,6461,6463,6465,6467,6470,6472],{"class":54,"line":118},[52,6456,1756],{"class":58},[52,6458,2869],{"class":73},[52,6460,1762],{"class":58},[52,6462,2880],{"class":73},[52,6464,4052],{"class":58},[52,6466,3785],{"class":371},[52,6468,6469],{"class":58},", opacity: ",[52,6471,5241],{"class":371},[52,6473,1768],{"class":58},[52,6475,6476],{"class":54,"line":594},[52,6477,1773],{"class":58},[52,6479,6480],{"class":54,"line":600},[52,6481,1778],{"class":58},[19,6483],{":preset":6484},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,6486,6487],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,6489,6491],{"id":6490},"visibility","Visibility",[15,6493,5109,6494,6496,6497,6499,6500,6502],{},[31,6495,2374],{}," prop that defaults to ",[31,6498,1996],{},". Setting it to ",[31,6501,2292],{}," completely removes the component from the composition, as if it wasn't there at all:",[43,6504,6508],{"className":6505,"code":6506,"language":6507,"meta":48,"style":48},"language-vue shiki shiki-themes github-dark","\u003CCircle visible={false} />\n","vue",[31,6509,6510],{"__ignoreMap":48},[52,6511,6512,6514,6516,6518,6520,6523],{"class":54,"line":55},[52,6513,59],{"class":58},[52,6515,2216],{"class":62},[52,6517,2281],{"class":66},[52,6519,70],{"class":58},[52,6521,6522],{"class":73},"{false}",[52,6524,105],{"class":58},[15,6526,6527,6528,6531,6532,6535],{},"This is different from ",[31,6529,6530],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[31,6533,6534],{},"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,6537,6539],{"id":6538},"masking","Masking",[15,6541,6542,6543,6546,6547,6550,6551,6554],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[31,6544,6545],{},"id"," property (",[31,6548,6549],{},"string",") and then set ",[31,6552,6553],{},"maskSource"," to that ID on another component to use it as a mask.",[15,6556,6557,6558,6560],{},"Masks typically have ",[31,6559,6534],{}," so they don't appear in the final output—they only control visibility of other components:",[217,6562,6563,6643,6732,6818,6904],{":tabs":1543},[43,6564,6566],{"className":45,"code":6565,"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,6567,6568,6576,6581,6611,6615,6620,6635],{"__ignoreMap":48},[52,6569,6570,6572,6574],{"class":54,"line":55},[52,6571,59],{"class":58},[52,6573,63],{"class":62},[52,6575,77],{"class":58},[52,6577,6578],{"class":54,"line":80},[52,6579,6580],{"class":559}," \u003C!-- This circle acts as the mask -->\n",[52,6582,6583,6585,6587,6590,6592,6595,6597,6599,6601,6604,6606,6609],{"class":54,"line":108},[52,6584,83],{"class":58},[52,6586,2216],{"class":62},[52,6588,6589],{"class":66}," id",[52,6591,70],{"class":58},[52,6593,6594],{"class":73},"\"myMask\"",[52,6596,3687],{"class":66},[52,6598,70],{"class":58},[52,6600,3692],{"class":73},[52,6602,6603],{"class":66}," :visible",[52,6605,70],{"class":58},[52,6607,6608],{"class":73},"\"false\"",[52,6610,105],{"class":58},[52,6612,6613],{"class":54,"line":118},[52,6614,597],{"emptyLinePlaceholder":171},[52,6616,6617],{"class":54,"line":594},[52,6618,6619],{"class":559}," \u003C!-- This gradient is masked by the circle -->\n",[52,6621,6622,6624,6626,6629,6631,6633],{"class":54,"line":600},[52,6623,83],{"class":58},[52,6625,86],{"class":62},[52,6627,6628],{"class":66}," maskSource",[52,6630,70],{"class":58},[52,6632,6594],{"class":73},[52,6634,105],{"class":58},[52,6636,6637,6639,6641],{"class":54,"line":606},[52,6638,121],{"class":58},[52,6640,63],{"class":62},[52,6642,77],{"class":58},[43,6644,6646],{"className":360,"code":6645,"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,6647,6648,6656,6665,6697,6701,6710,6724],{"__ignoreMap":48},[52,6649,6650,6652,6654],{"class":54,"line":55},[52,6651,59],{"class":58},[52,6653,63],{"class":371},[52,6655,77],{"class":58},[52,6657,6658,6660,6663],{"class":54,"line":80},[52,6659,3738],{"class":58},[52,6661,6662],{"class":559},"/* This circle acts as the mask */",[52,6664,729],{"class":58},[52,6666,6667,6669,6671,6673,6675,6677,6679,6681,6683,6685,6687,6689,6691,6693,6695],{"class":54,"line":108},[52,6668,83],{"class":58},[52,6670,2216],{"class":371},[52,6672,6589],{"class":66},[52,6674,70],{"class":231},[52,6676,6594],{"class":73},[52,6678,3687],{"class":66},[52,6680,70],{"class":231},[52,6682,723],{"class":58},[52,6684,3785],{"class":371},[52,6686,2577],{"class":58},[52,6688,2374],{"class":66},[52,6690,70],{"class":231},[52,6692,723],{"class":58},[52,6694,2292],{"class":371},[52,6696,3788],{"class":58},[52,6698,6699],{"class":54,"line":118},[52,6700,597],{"emptyLinePlaceholder":171},[52,6702,6703,6705,6708],{"class":54,"line":594},[52,6704,3738],{"class":58},[52,6706,6707],{"class":559},"/* This gradient is masked by the circle */",[52,6709,729],{"class":58},[52,6711,6712,6714,6716,6718,6720,6722],{"class":54,"line":600},[52,6713,83],{"class":58},[52,6715,86],{"class":371},[52,6717,6628],{"class":66},[52,6719,70],{"class":231},[52,6721,6594],{"class":73},[52,6723,105],{"class":58},[52,6725,6726,6728,6730],{"class":54,"line":606},[52,6727,121],{"class":58},[52,6729,63],{"class":371},[52,6731,77],{"class":58},[43,6733,6734],{"className":419,"code":6645,"language":420,"meta":48,"style":48},[31,6735,6736,6744,6752,6784,6788,6796,6810],{"__ignoreMap":48},[52,6737,6738,6740,6742],{"class":54,"line":55},[52,6739,59],{"class":58},[52,6741,63],{"class":371},[52,6743,77],{"class":58},[52,6745,6746,6748,6750],{"class":54,"line":80},[52,6747,3738],{"class":58},[52,6749,6662],{"class":559},[52,6751,729],{"class":58},[52,6753,6754,6756,6758,6760,6762,6764,6766,6768,6770,6772,6774,6776,6778,6780,6782],{"class":54,"line":108},[52,6755,83],{"class":58},[52,6757,2216],{"class":371},[52,6759,6589],{"class":66},[52,6761,70],{"class":231},[52,6763,6594],{"class":73},[52,6765,3687],{"class":66},[52,6767,70],{"class":231},[52,6769,723],{"class":58},[52,6771,3785],{"class":371},[52,6773,2577],{"class":58},[52,6775,2374],{"class":66},[52,6777,70],{"class":231},[52,6779,723],{"class":58},[52,6781,2292],{"class":371},[52,6783,3788],{"class":58},[52,6785,6786],{"class":54,"line":118},[52,6787,597],{"emptyLinePlaceholder":171},[52,6789,6790,6792,6794],{"class":54,"line":594},[52,6791,3738],{"class":58},[52,6793,6707],{"class":559},[52,6795,729],{"class":58},[52,6797,6798,6800,6802,6804,6806,6808],{"class":54,"line":600},[52,6799,83],{"class":58},[52,6801,86],{"class":371},[52,6803,6628],{"class":66},[52,6805,70],{"class":231},[52,6807,6594],{"class":73},[52,6809,105],{"class":58},[52,6811,6812,6814,6816],{"class":54,"line":606},[52,6813,121],{"class":58},[52,6815,63],{"class":371},[52,6817,77],{"class":58},[43,6819,6820],{"className":419,"code":6645,"language":420,"meta":48,"style":48},[31,6821,6822,6830,6838,6870,6874,6882,6896],{"__ignoreMap":48},[52,6823,6824,6826,6828],{"class":54,"line":55},[52,6825,59],{"class":58},[52,6827,63],{"class":371},[52,6829,77],{"class":58},[52,6831,6832,6834,6836],{"class":54,"line":80},[52,6833,3738],{"class":58},[52,6835,6662],{"class":559},[52,6837,729],{"class":58},[52,6839,6840,6842,6844,6846,6848,6850,6852,6854,6856,6858,6860,6862,6864,6866,6868],{"class":54,"line":108},[52,6841,83],{"class":58},[52,6843,2216],{"class":371},[52,6845,6589],{"class":66},[52,6847,70],{"class":231},[52,6849,6594],{"class":73},[52,6851,3687],{"class":66},[52,6853,70],{"class":231},[52,6855,723],{"class":58},[52,6857,3785],{"class":371},[52,6859,2577],{"class":58},[52,6861,2374],{"class":66},[52,6863,70],{"class":231},[52,6865,723],{"class":58},[52,6867,2292],{"class":371},[52,6869,3788],{"class":58},[52,6871,6872],{"class":54,"line":118},[52,6873,597],{"emptyLinePlaceholder":171},[52,6875,6876,6878,6880],{"class":54,"line":594},[52,6877,3738],{"class":58},[52,6879,6707],{"class":559},[52,6881,729],{"class":58},[52,6883,6884,6886,6888,6890,6892,6894],{"class":54,"line":600},[52,6885,83],{"class":58},[52,6887,86],{"class":371},[52,6889,6628],{"class":66},[52,6891,70],{"class":231},[52,6893,6594],{"class":73},[52,6895,105],{"class":58},[52,6897,6898,6900,6902],{"class":54,"line":606},[52,6899,121],{"class":58},[52,6901,63],{"class":371},[52,6903,77],{"class":58},[43,6905,6907],{"className":222,"code":6906,"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,6908,6909,6923,6927,6949,6962,6966],{"__ignoreMap":48},[52,6910,6911,6913,6915,6917,6919,6921],{"class":54,"line":55},[52,6912,1721],{"class":231},[52,6914,1724],{"class":371},[52,6916,1727],{"class":231},[52,6918,1730],{"class":231},[52,6920,1733],{"class":66},[52,6922,1736],{"class":58},[52,6924,6925],{"class":54,"line":80},[52,6926,1751],{"class":58},[52,6928,6929,6931,6933,6935,6938,6940,6942,6945,6947],{"class":54,"line":108},[52,6930,1756],{"class":58},[52,6932,2869],{"class":73},[52,6934,2872],{"class":58},[52,6936,6937],{"class":73},"'myMask'",[52,6939,5028],{"class":58},[52,6941,3785],{"class":371},[52,6943,6944],{"class":58},", visible: ",[52,6946,2292],{"class":371},[52,6948,4057],{"class":58},[52,6950,6951,6953,6955,6958,6960],{"class":54,"line":118},[52,6952,1756],{"class":58},[52,6954,2126],{"class":73},[52,6956,6957],{"class":58},", props: { maskSource: ",[52,6959,6937],{"class":73},[52,6961,1768],{"class":58},[52,6963,6964],{"class":54,"line":594},[52,6965,1773],{"class":58},[52,6967,6968],{"class":54,"line":600},[52,6969,1778],{"class":58},[19,6971],{":preset":6972},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,6974,6975,6976,6978],{},"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,6977,6534],{},".",[2925,6980,6982],{"id":6981},"mask-types","Mask Types",[15,6984,6985,6986,6989],{},"Control how the mask is interpreted with the ",[31,6987,6988],{},"maskType"," prop:",[1465,6991,6992,7000,7008,7016],{},[1468,6993,6994,6999],{},[151,6995,6996],{},[31,6997,6998],{},"alpha",": Uses the mask's alpha channel (default)",[1468,7001,7002,7007],{},[151,7003,7004],{},[31,7005,7006],{},"alphaInverted",": Uses the inverted alpha channel",[1468,7009,7010,7015],{},[151,7011,7012],{},[31,7013,7014],{},"luminance",": Uses the mask's brightness",[1468,7017,7018,7023],{},[151,7019,7020],{},[31,7021,7022],{},"luminanceInverted",": Uses the inverted brightness",[217,7025,7026,7176,7324,7468,7612],{":tabs":1543},[43,7027,7029],{"className":45,"code":7028,"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,7030,7031,7039,7047,7051,7056,7063,7073,7082,7091,7101,7105,7109,7114,7121,7131,7141,7151,7162,7167],{"__ignoreMap":48},[52,7032,7033,7035,7037],{"class":54,"line":55},[52,7034,59],{"class":58},[52,7036,63],{"class":62},[52,7038,77],{"class":58},[52,7040,7041,7043,7045],{"class":54,"line":80},[52,7042,83],{"class":58},[52,7044,86],{"class":62},[52,7046,105],{"class":58},[52,7048,7049],{"class":54,"line":108},[52,7050,597],{"emptyLinePlaceholder":171},[52,7052,7053],{"class":54,"line":118},[52,7054,7055],{"class":559}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[52,7057,7058,7060],{"class":54,"line":594},[52,7059,83],{"class":58},[52,7061,7062],{"class":62},"Checkerboard\n",[52,7064,7065,7068,7070],{"class":54,"line":600},[52,7066,7067],{"class":66}," id",[52,7069,70],{"class":58},[52,7071,7072],{"class":73},"\"mask\"\n",[52,7074,7075,7077,7079],{"class":54,"line":606},[52,7076,1176],{"class":66},[52,7078,70],{"class":58},[52,7080,7081],{"class":73},"\"#ffffff\"\n",[52,7083,7084,7086,7088],{"class":54,"line":653},[52,7085,1186],{"class":66},[52,7087,70],{"class":58},[52,7089,7090],{"class":73},"\"#111111\"\n",[52,7092,7093,7096,7098],{"class":54,"line":662},[52,7094,7095],{"class":66}," :visible",[52,7097,70],{"class":58},[52,7099,7100],{"class":73},"\"false\"\n",[52,7102,7103],{"class":54,"line":671},[52,7104,1224],{"class":58},[52,7106,7107],{"class":54,"line":676},[52,7108,597],{"emptyLinePlaceholder":171},[52,7110,7111],{"class":54,"line":682},[52,7112,7113],{"class":559}," \u003C!-- Visible where mask is bright -->\n",[52,7115,7116,7118],{"class":54,"line":698},[52,7117,83],{"class":58},[52,7119,7120],{"class":62},"Circle\n",[52,7122,7123,7126,7128],{"class":54,"line":707},[52,7124,7125],{"class":66}," color",[52,7127,70],{"class":58},[52,7129,7130],{"class":73},"\"#ff0088\"\n",[52,7132,7133,7136,7138],{"class":54,"line":2327},[52,7134,7135],{"class":66}," radius",[52,7137,70],{"class":58},[52,7139,7140],{"class":73},"\"0.8\"\n",[52,7142,7144,7147,7149],{"class":54,"line":7143},16,[52,7145,7146],{"class":66}," maskSource",[52,7148,70],{"class":58},[52,7150,7072],{"class":73},[52,7152,7154,7157,7159],{"class":54,"line":7153},17,[52,7155,7156],{"class":66}," maskType",[52,7158,70],{"class":58},[52,7160,7161],{"class":73},"\"luminance\"\n",[52,7163,7165],{"class":54,"line":7164},18,[52,7166,1224],{"class":58},[52,7168,7170,7172,7174],{"class":54,"line":7169},19,[52,7171,121],{"class":58},[52,7173,63],{"class":62},[52,7175,77],{"class":58},[43,7177,7179],{"className":360,"code":7178,"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,7180,7181,7189,7197,7201,7210,7216,7224,7232,7240,7253,7257,7261,7270,7276,7284,7296,7304,7312,7316],{"__ignoreMap":48},[52,7182,7183,7185,7187],{"class":54,"line":55},[52,7184,59],{"class":58},[52,7186,63],{"class":371},[52,7188,77],{"class":58},[52,7190,7191,7193,7195],{"class":54,"line":80},[52,7192,83],{"class":58},[52,7194,86],{"class":371},[52,7196,105],{"class":58},[52,7198,7199],{"class":54,"line":108},[52,7200,597],{"emptyLinePlaceholder":171},[52,7202,7203,7205,7208],{"class":54,"line":118},[52,7204,3738],{"class":58},[52,7206,7207],{"class":559},"/* Hidden checkerboard mask controls visibility */",[52,7209,729],{"class":58},[52,7211,7212,7214],{"class":54,"line":594},[52,7213,83],{"class":58},[52,7215,7062],{"class":371},[52,7217,7218,7220,7222],{"class":54,"line":600},[52,7219,7067],{"class":66},[52,7221,70],{"class":231},[52,7223,7072],{"class":73},[52,7225,7226,7228,7230],{"class":54,"line":606},[52,7227,1176],{"class":66},[52,7229,70],{"class":231},[52,7231,7081],{"class":73},[52,7233,7234,7236,7238],{"class":54,"line":653},[52,7235,1186],{"class":66},[52,7237,70],{"class":231},[52,7239,7090],{"class":73},[52,7241,7242,7245,7247,7249,7251],{"class":54,"line":662},[52,7243,7244],{"class":66}," visible",[52,7246,70],{"class":231},[52,7248,723],{"class":58},[52,7250,2292],{"class":371},[52,7252,729],{"class":58},[52,7254,7255],{"class":54,"line":671},[52,7256,1224],{"class":58},[52,7258,7259],{"class":54,"line":676},[52,7260,597],{"emptyLinePlaceholder":171},[52,7262,7263,7265,7268],{"class":54,"line":682},[52,7264,3738],{"class":58},[52,7266,7267],{"class":559},"/* Visible where mask is bright */",[52,7269,729],{"class":58},[52,7271,7272,7274],{"class":54,"line":698},[52,7273,83],{"class":58},[52,7275,7120],{"class":371},[52,7277,7278,7280,7282],{"class":54,"line":707},[52,7279,7125],{"class":66},[52,7281,70],{"class":231},[52,7283,7130],{"class":73},[52,7285,7286,7288,7290,7292,7294],{"class":54,"line":2327},[52,7287,7135],{"class":66},[52,7289,70],{"class":231},[52,7291,723],{"class":58},[52,7293,3785],{"class":371},[52,7295,729],{"class":58},[52,7297,7298,7300,7302],{"class":54,"line":7143},[52,7299,7146],{"class":66},[52,7301,70],{"class":231},[52,7303,7072],{"class":73},[52,7305,7306,7308,7310],{"class":54,"line":7153},[52,7307,7156],{"class":66},[52,7309,70],{"class":231},[52,7311,7161],{"class":73},[52,7313,7314],{"class":54,"line":7164},[52,7315,1224],{"class":58},[52,7317,7318,7320,7322],{"class":54,"line":7169},[52,7319,121],{"class":58},[52,7321,63],{"class":371},[52,7323,77],{"class":58},[43,7325,7326],{"className":419,"code":7178,"language":420,"meta":48,"style":48},[31,7327,7328,7336,7344,7348,7356,7362,7370,7378,7386,7398,7402,7406,7414,7420,7428,7440,7448,7456,7460],{"__ignoreMap":48},[52,7329,7330,7332,7334],{"class":54,"line":55},[52,7331,59],{"class":58},[52,7333,63],{"class":371},[52,7335,77],{"class":58},[52,7337,7338,7340,7342],{"class":54,"line":80},[52,7339,83],{"class":58},[52,7341,86],{"class":371},[52,7343,105],{"class":58},[52,7345,7346],{"class":54,"line":108},[52,7347,597],{"emptyLinePlaceholder":171},[52,7349,7350,7352,7354],{"class":54,"line":118},[52,7351,3738],{"class":58},[52,7353,7207],{"class":559},[52,7355,729],{"class":58},[52,7357,7358,7360],{"class":54,"line":594},[52,7359,83],{"class":58},[52,7361,7062],{"class":371},[52,7363,7364,7366,7368],{"class":54,"line":600},[52,7365,7067],{"class":66},[52,7367,70],{"class":231},[52,7369,7072],{"class":73},[52,7371,7372,7374,7376],{"class":54,"line":606},[52,7373,1176],{"class":66},[52,7375,70],{"class":231},[52,7377,7081],{"class":73},[52,7379,7380,7382,7384],{"class":54,"line":653},[52,7381,1186],{"class":66},[52,7383,70],{"class":231},[52,7385,7090],{"class":73},[52,7387,7388,7390,7392,7394,7396],{"class":54,"line":662},[52,7389,7244],{"class":66},[52,7391,70],{"class":231},[52,7393,723],{"class":58},[52,7395,2292],{"class":371},[52,7397,729],{"class":58},[52,7399,7400],{"class":54,"line":671},[52,7401,1224],{"class":58},[52,7403,7404],{"class":54,"line":676},[52,7405,597],{"emptyLinePlaceholder":171},[52,7407,7408,7410,7412],{"class":54,"line":682},[52,7409,3738],{"class":58},[52,7411,7267],{"class":559},[52,7413,729],{"class":58},[52,7415,7416,7418],{"class":54,"line":698},[52,7417,83],{"class":58},[52,7419,7120],{"class":371},[52,7421,7422,7424,7426],{"class":54,"line":707},[52,7423,7125],{"class":66},[52,7425,70],{"class":231},[52,7427,7130],{"class":73},[52,7429,7430,7432,7434,7436,7438],{"class":54,"line":2327},[52,7431,7135],{"class":66},[52,7433,70],{"class":231},[52,7435,723],{"class":58},[52,7437,3785],{"class":371},[52,7439,729],{"class":58},[52,7441,7442,7444,7446],{"class":54,"line":7143},[52,7443,7146],{"class":66},[52,7445,70],{"class":231},[52,7447,7072],{"class":73},[52,7449,7450,7452,7454],{"class":54,"line":7153},[52,7451,7156],{"class":66},[52,7453,70],{"class":231},[52,7455,7161],{"class":73},[52,7457,7458],{"class":54,"line":7164},[52,7459,1224],{"class":58},[52,7461,7462,7464,7466],{"class":54,"line":7169},[52,7463,121],{"class":58},[52,7465,63],{"class":371},[52,7467,77],{"class":58},[43,7469,7470],{"className":419,"code":7178,"language":420,"meta":48,"style":48},[31,7471,7472,7480,7488,7492,7500,7506,7514,7522,7530,7542,7546,7550,7558,7564,7572,7584,7592,7600,7604],{"__ignoreMap":48},[52,7473,7474,7476,7478],{"class":54,"line":55},[52,7475,59],{"class":58},[52,7477,63],{"class":371},[52,7479,77],{"class":58},[52,7481,7482,7484,7486],{"class":54,"line":80},[52,7483,83],{"class":58},[52,7485,86],{"class":371},[52,7487,105],{"class":58},[52,7489,7490],{"class":54,"line":108},[52,7491,597],{"emptyLinePlaceholder":171},[52,7493,7494,7496,7498],{"class":54,"line":118},[52,7495,3738],{"class":58},[52,7497,7207],{"class":559},[52,7499,729],{"class":58},[52,7501,7502,7504],{"class":54,"line":594},[52,7503,83],{"class":58},[52,7505,7062],{"class":371},[52,7507,7508,7510,7512],{"class":54,"line":600},[52,7509,7067],{"class":66},[52,7511,70],{"class":231},[52,7513,7072],{"class":73},[52,7515,7516,7518,7520],{"class":54,"line":606},[52,7517,1176],{"class":66},[52,7519,70],{"class":231},[52,7521,7081],{"class":73},[52,7523,7524,7526,7528],{"class":54,"line":653},[52,7525,1186],{"class":66},[52,7527,70],{"class":231},[52,7529,7090],{"class":73},[52,7531,7532,7534,7536,7538,7540],{"class":54,"line":662},[52,7533,7244],{"class":66},[52,7535,70],{"class":231},[52,7537,723],{"class":58},[52,7539,2292],{"class":371},[52,7541,729],{"class":58},[52,7543,7544],{"class":54,"line":671},[52,7545,1224],{"class":58},[52,7547,7548],{"class":54,"line":676},[52,7549,597],{"emptyLinePlaceholder":171},[52,7551,7552,7554,7556],{"class":54,"line":682},[52,7553,3738],{"class":58},[52,7555,7267],{"class":559},[52,7557,729],{"class":58},[52,7559,7560,7562],{"class":54,"line":698},[52,7561,83],{"class":58},[52,7563,7120],{"class":371},[52,7565,7566,7568,7570],{"class":54,"line":707},[52,7567,7125],{"class":66},[52,7569,70],{"class":231},[52,7571,7130],{"class":73},[52,7573,7574,7576,7578,7580,7582],{"class":54,"line":2327},[52,7575,7135],{"class":66},[52,7577,70],{"class":231},[52,7579,723],{"class":58},[52,7581,3785],{"class":371},[52,7583,729],{"class":58},[52,7585,7586,7588,7590],{"class":54,"line":7143},[52,7587,7146],{"class":66},[52,7589,70],{"class":231},[52,7591,7072],{"class":73},[52,7593,7594,7596,7598],{"class":54,"line":7153},[52,7595,7156],{"class":66},[52,7597,70],{"class":231},[52,7599,7161],{"class":73},[52,7601,7602],{"class":54,"line":7164},[52,7603,1224],{"class":58},[52,7605,7606,7608,7610],{"class":54,"line":7169},[52,7607,121],{"class":58},[52,7609,63],{"class":371},[52,7611,77],{"class":58},[43,7613,7615],{"className":222,"code":7614,"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,7616,7617,7631,7635,7643,7673,7700,7704],{"__ignoreMap":48},[52,7618,7619,7621,7623,7625,7627,7629],{"class":54,"line":55},[52,7620,1721],{"class":231},[52,7622,1724],{"class":371},[52,7624,1727],{"class":231},[52,7626,1730],{"class":231},[52,7628,1733],{"class":66},[52,7630,1736],{"class":58},[52,7632,7633],{"class":54,"line":80},[52,7634,1751],{"class":58},[52,7636,7637,7639,7641],{"class":54,"line":108},[52,7638,1756],{"class":58},[52,7640,2126],{"class":73},[52,7642,4034],{"class":58},[52,7644,7645,7647,7650,7652,7655,7658,7661,7664,7667,7669,7671],{"class":54,"line":118},[52,7646,1756],{"class":58},[52,7648,7649],{"class":73},"'Checkerboard'",[52,7651,2872],{"class":58},[52,7653,7654],{"class":73},"'mask'",[52,7656,7657],{"class":58},", props: { colorA: ",[52,7659,7660],{"class":73},"'#ffffff'",[52,7662,7663],{"class":58},", colorB: ",[52,7665,7666],{"class":73},"'#111111'",[52,7668,6944],{"class":58},[52,7670,2292],{"class":371},[52,7672,4057],{"class":58},[52,7674,7675,7677,7679,7681,7683,7685,7687,7690,7692,7695,7698],{"class":54,"line":594},[52,7676,1756],{"class":58},[52,7678,2869],{"class":73},[52,7680,1762],{"class":58},[52,7682,2880],{"class":73},[52,7684,4052],{"class":58},[52,7686,3785],{"class":371},[52,7688,7689],{"class":58},", maskSource: ",[52,7691,7654],{"class":73},[52,7693,7694],{"class":58},", maskType: ",[52,7696,7697],{"class":73},"'luminance'",[52,7699,1768],{"class":58},[52,7701,7702],{"class":54,"line":600},[52,7703,1773],{"class":58},[52,7705,7706],{"class":54,"line":606},[52,7707,1778],{"class":58},[19,7709],{":preset":7710},"{\"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,7712,5081],{},{"title":48,"searchDepth":80,"depth":80,"links":7714},[7715,7718,7719,7720],{"id":5105,"depth":80,"text":5106,"children":7716},[7717],{"id":5567,"depth":108,"text":5568},{"id":2584,"depth":80,"text":6152},{"id":6490,"depth":80,"text":6491},{"id":6538,"depth":80,"text":6539,"children":7721},[7722],{"id":6981,"depth":108,"text":6982},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"/docs/guide/blending-masking",{"title":5094,"description":7724},"docs/guide/3.blending-masking","DB4mG55LrsfgecKvStxFmWb3SIn-tGs51Tr-D2t5pHs",{"id":7732,"title":1487,"body":7733,"category":7723,"description":9726,"exclude":167,"extension":168,"forceFramework":167,"icon":9727,"meta":9728,"navigation":171,"path":1486,"seo":9729,"stem":9730,"__hash__":9731},"guide/docs/guide/4.props-reactivity.md",{"type":8,"value":7734,"toc":9719},[7735,7738,7741,7745,7748,7965,7968,7972,7975,9137,9140,9145,9148,9152,9155,9160,9200,9205,9244,9249,9300,9305,9331,9334,9338,9341,9347,9679,9683,9686,9690,9693,9713,9716],[11,7736,1487],{"id":7737},"props-reactivity",[15,7739,7740],{},"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,7742,7744],{"id":7743},"basic-props","Basic Props",[15,7746,7747],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[217,7749,7750,7791,7834,7876,7918],{":tabs":1543},[43,7751,7753],{"className":45,"code":7752,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" />\n\u003C/Shader>\n",[31,7754,7755,7763,7783],{"__ignoreMap":48},[52,7756,7757,7759,7761],{"class":54,"line":55},[52,7758,59],{"class":58},[52,7760,63],{"class":62},[52,7762,77],{"class":58},[52,7764,7765,7767,7769,7771,7773,7775,7777,7779,7781],{"class":54,"line":80},[52,7766,83],{"class":58},[52,7768,2216],{"class":62},[52,7770,1574],{"class":66},[52,7772,70],{"class":58},[52,7774,2223],{"class":73},[52,7776,3687],{"class":66},[52,7778,70],{"class":58},[52,7780,5168],{"class":73},[52,7782,105],{"class":58},[52,7784,7785,7787,7789],{"class":54,"line":108},[52,7786,121],{"class":58},[52,7788,63],{"class":62},[52,7790,77],{"class":58},[43,7792,7794],{"className":360,"code":7793,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} />\n\u003C/Shader>\n",[31,7795,7796,7804,7826],{"__ignoreMap":48},[52,7797,7798,7800,7802],{"class":54,"line":55},[52,7799,59],{"class":58},[52,7801,63],{"class":371},[52,7803,77],{"class":58},[52,7805,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824],{"class":54,"line":80},[52,7807,83],{"class":58},[52,7809,2216],{"class":371},[52,7811,1574],{"class":66},[52,7813,70],{"class":231},[52,7815,2223],{"class":73},[52,7817,3687],{"class":66},[52,7819,70],{"class":231},[52,7821,723],{"class":58},[52,7823,5241],{"class":371},[52,7825,3788],{"class":58},[52,7827,7828,7830,7832],{"class":54,"line":108},[52,7829,121],{"class":58},[52,7831,63],{"class":371},[52,7833,77],{"class":58},[43,7835,7836],{"className":419,"code":7793,"language":420,"meta":48,"style":48},[31,7837,7838,7846,7868],{"__ignoreMap":48},[52,7839,7840,7842,7844],{"class":54,"line":55},[52,7841,59],{"class":58},[52,7843,63],{"class":371},[52,7845,77],{"class":58},[52,7847,7848,7850,7852,7854,7856,7858,7860,7862,7864,7866],{"class":54,"line":80},[52,7849,83],{"class":58},[52,7851,2216],{"class":371},[52,7853,1574],{"class":66},[52,7855,70],{"class":231},[52,7857,2223],{"class":73},[52,7859,3687],{"class":66},[52,7861,70],{"class":231},[52,7863,723],{"class":58},[52,7865,5241],{"class":371},[52,7867,3788],{"class":58},[52,7869,7870,7872,7874],{"class":54,"line":108},[52,7871,121],{"class":58},[52,7873,63],{"class":371},[52,7875,77],{"class":58},[43,7877,7878],{"className":419,"code":7793,"language":420,"meta":48,"style":48},[31,7879,7880,7888,7910],{"__ignoreMap":48},[52,7881,7882,7884,7886],{"class":54,"line":55},[52,7883,59],{"class":58},[52,7885,63],{"class":371},[52,7887,77],{"class":58},[52,7889,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908],{"class":54,"line":80},[52,7891,83],{"class":58},[52,7893,2216],{"class":371},[52,7895,1574],{"class":66},[52,7897,70],{"class":231},[52,7899,2223],{"class":73},[52,7901,3687],{"class":66},[52,7903,70],{"class":231},[52,7905,723],{"class":58},[52,7907,5241],{"class":371},[52,7909,3788],{"class":58},[52,7911,7912,7914,7916],{"class":54,"line":108},[52,7913,121],{"class":58},[52,7915,63],{"class":371},[52,7917,77],{"class":58},[43,7919,7921],{"className":222,"code":7920,"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,7922,7923,7937,7941,7957,7961],{"__ignoreMap":48},[52,7924,7925,7927,7929,7931,7933,7935],{"class":54,"line":55},[52,7926,1721],{"class":231},[52,7928,1724],{"class":371},[52,7930,1727],{"class":231},[52,7932,1730],{"class":231},[52,7934,1733],{"class":66},[52,7936,1736],{"class":58},[52,7938,7939],{"class":54,"line":80},[52,7940,1751],{"class":58},[52,7942,7943,7945,7947,7949,7951,7953,7955],{"class":54,"line":108},[52,7944,1756],{"class":58},[52,7946,2869],{"class":73},[52,7948,1762],{"class":58},[52,7950,2880],{"class":73},[52,7952,4052],{"class":58},[52,7954,5241],{"class":371},[52,7956,1768],{"class":58},[52,7958,7959],{"class":54,"line":118},[52,7960,1773],{"class":58},[52,7962,7963],{"class":54,"line":594},[52,7964,1778],{"class":58},[15,7966,7967],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,7969,7971],{"id":7970},"reactive-props","Reactive Props",[15,7973,7974],{},"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,7976,7977,8210,8499,8720,8994],{":tabs":1543},[43,7978,7980],{"className":45,"code":7979,"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,7981,7982,7992,8002,8013,8017,8034,8042,8046,8054,8063,8085,8105,8125,8133,8137,8145,8172,8194,8202],{"__ignoreMap":48},[52,7983,7984,7986,7988,7990],{"class":54,"line":55},[52,7985,59],{"class":58},[52,7987,2253],{"class":62},[52,7989,2256],{"class":66},[52,7991,77],{"class":58},[52,7993,7994,7996,7998,8000],{"class":54,"line":80},[52,7995,232],{"class":231},[52,7997,2265],{"class":58},[52,7999,238],{"class":231},[52,8001,2270],{"class":73},[52,8003,8004,8006,8009,8011],{"class":54,"line":108},[52,8005,232],{"class":231},[52,8007,8008],{"class":58}," { Shader, LinearGradient, Circle } ",[52,8010,238],{"class":231},[52,8012,241],{"class":73},[52,8014,8015],{"class":54,"line":118},[52,8016,597],{"emptyLinePlaceholder":171},[52,8018,8019,8021,8024,8026,8028,8030,8032],{"class":54,"line":594},[52,8020,1721],{"class":231},[52,8022,8023],{"class":371}," angle",[52,8025,1727],{"class":231},[52,8027,2286],{"class":66},[52,8029,2289],{"class":58},[52,8031,6161],{"class":371},[52,8033,2295],{"class":58},[52,8035,8036,8038,8040],{"class":54,"line":600},[52,8037,121],{"class":58},[52,8039,2253],{"class":62},[52,8041,77],{"class":58},[52,8043,8044],{"class":54,"line":606},[52,8045,597],{"emptyLinePlaceholder":171},[52,8047,8048,8050,8052],{"class":54,"line":653},[52,8049,59],{"class":58},[52,8051,2182],{"class":62},[52,8053,77],{"class":58},[52,8055,8056,8058,8061],{"class":54,"line":662},[52,8057,83],{"class":58},[52,8059,8060],{"class":62},"div",[52,8062,77],{"class":58},[52,8064,8065,8067,8070,8073,8075,8078,8081,8083],{"class":54,"line":671},[52,8066,2213],{"class":58},[52,8068,8069],{"class":62},"button",[52,8071,8072],{"class":66}," @click",[52,8074,70],{"class":58},[52,8076,8077],{"class":73},"\"angle += 45\"",[52,8079,8080],{"class":58},">Rotate +45°\u003C/",[52,8082,8069],{"class":62},[52,8084,77],{"class":58},[52,8086,8087,8089,8091,8093,8095,8098,8101,8103],{"class":54,"line":676},[52,8088,2213],{"class":58},[52,8090,8069],{"class":62},[52,8092,8072],{"class":66},[52,8094,70],{"class":58},[52,8096,8097],{"class":73},"\"angle -= 45\"",[52,8099,8100],{"class":58},">Rotate -45°\u003C/",[52,8102,8069],{"class":62},[52,8104,77],{"class":58},[52,8106,8107,8109,8111,8113,8115,8118,8121,8123],{"class":54,"line":682},[52,8108,2213],{"class":58},[52,8110,8069],{"class":62},[52,8112,8072],{"class":66},[52,8114,70],{"class":58},[52,8116,8117],{"class":73},"\"angle = 0\"",[52,8119,8120],{"class":58},">Reset\u003C/",[52,8122,8069],{"class":62},[52,8124,77],{"class":58},[52,8126,8127,8129,8131],{"class":54,"line":698},[52,8128,2230],{"class":58},[52,8130,8060],{"class":62},[52,8132,77],{"class":58},[52,8134,8135],{"class":54,"line":707},[52,8136,597],{"emptyLinePlaceholder":171},[52,8138,8139,8141,8143],{"class":54,"line":2327},[52,8140,83],{"class":58},[52,8142,63],{"class":62},[52,8144,77],{"class":58},[52,8146,8147,8149,8151,8153,8155,8158,8160,8162,8164,8166,8168,8170],{"class":54,"line":7143},[52,8148,2213],{"class":58},[52,8150,2216],{"class":62},[52,8152,6589],{"class":66},[52,8154,70],{"class":58},[52,8156,8157],{"class":73},"\"mask\"",[52,8159,3687],{"class":66},[52,8161,70],{"class":58},[52,8163,3692],{"class":73},[52,8165,6603],{"class":66},[52,8167,70],{"class":58},[52,8169,6608],{"class":73},[52,8171,105],{"class":58},[52,8173,8174,8176,8178,8181,8183,8186,8188,8190,8192],{"class":54,"line":7153},[52,8175,2213],{"class":58},[52,8177,86],{"class":62},[52,8179,8180],{"class":66}," :angle",[52,8182,70],{"class":58},[52,8184,8185],{"class":73},"\"angle\"",[52,8187,6628],{"class":66},[52,8189,70],{"class":58},[52,8191,8157],{"class":73},[52,8193,105],{"class":58},[52,8195,8196,8198,8200],{"class":54,"line":7164},[52,8197,2230],{"class":58},[52,8199,63],{"class":62},[52,8201,77],{"class":58},[52,8203,8204,8206,8208],{"class":54,"line":7169},[52,8205,121],{"class":58},[52,8207,2182],{"class":62},[52,8209,77],{"class":58},[43,8211,8213],{"className":360,"code":8212,"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,8214,8215,8225,8235,8239,8248,8273,8277,8283,8288,8296,8339,8375,8402,8411,8415,8423,8455,8476,8484,8489,8494],{"__ignoreMap":48},[52,8216,8217,8219,8221,8223],{"class":54,"line":55},[52,8218,232],{"class":231},[52,8220,2345],{"class":58},[52,8222,238],{"class":231},[52,8224,2350],{"class":73},[52,8226,8227,8229,8231,8233],{"class":54,"line":80},[52,8228,232],{"class":231},[52,8230,8008],{"class":58},[52,8232,238],{"class":231},[52,8234,257],{"class":73},[52,8236,8237],{"class":54,"line":108},[52,8238,597],{"emptyLinePlaceholder":171},[52,8240,8241,8243,8246],{"class":54,"line":118},[52,8242,2304],{"class":231},[52,8244,8245],{"class":66}," MyComponent",[52,8247,2310],{"class":58},[52,8249,8250,8252,8254,8256,8258,8261,8263,8265,8267,8269,8271],{"class":54,"line":594},[52,8251,2368],{"class":231},[52,8253,2371],{"class":58},[52,8255,1199],{"class":371},[52,8257,1881],{"class":58},[52,8259,8260],{"class":371},"setAngle",[52,8262,2382],{"class":58},[52,8264,70],{"class":231},[52,8266,2387],{"class":66},[52,8268,2289],{"class":58},[52,8270,6161],{"class":371},[52,8272,2295],{"class":58},[52,8274,8275],{"class":54,"line":600},[52,8276,597],{"emptyLinePlaceholder":171},[52,8278,8279,8281],{"class":54,"line":606},[52,8280,2402],{"class":231},[52,8282,2405],{"class":58},[52,8284,8285],{"class":54,"line":653},[52,8286,8287],{"class":58}," \u003C>\n",[52,8289,8290,8292,8294],{"class":54,"line":662},[52,8291,2476],{"class":58},[52,8293,8060],{"class":62},[52,8295,77],{"class":58},[52,8297,8298,8301,8303,8306,8308,8310,8312,8315,8317,8320,8323,8326,8329,8332,8335,8337],{"class":54,"line":671},[52,8299,8300],{"class":58}," \u003C",[52,8302,8069],{"class":62},[52,8304,8305],{"class":66}," onClick",[52,8307,70],{"class":231},[52,8309,2422],{"class":58},[52,8311,2425],{"class":231},[52,8313,8314],{"class":66}," setAngle",[52,8316,2289],{"class":58},[52,8318,1139],{"class":8319},"s9osk",[52,8321,8322],{"class":231}," =>",[52,8324,8325],{"class":58}," a ",[52,8327,8328],{"class":231},"+",[52,8330,8331],{"class":371}," 45",[52,8333,8334],{"class":58},")}>Rotate +45°\u003C/",[52,8336,8069],{"class":62},[52,8338,77],{"class":58},[52,8340,8341,8343,8345,8347,8349,8351,8353,8355,8357,8359,8361,8363,8366,8368,8371,8373],{"class":54,"line":676},[52,8342,8300],{"class":58},[52,8344,8069],{"class":62},[52,8346,8305],{"class":66},[52,8348,70],{"class":231},[52,8350,2422],{"class":58},[52,8352,2425],{"class":231},[52,8354,8314],{"class":66},[52,8356,2289],{"class":58},[52,8358,1139],{"class":8319},[52,8360,8322],{"class":231},[52,8362,8325],{"class":58},[52,8364,8365],{"class":231},"-",[52,8367,8331],{"class":371},[52,8369,8370],{"class":58},")}>Rotate -45°\u003C/",[52,8372,8069],{"class":62},[52,8374,77],{"class":58},[52,8376,8377,8379,8381,8383,8385,8387,8389,8391,8393,8395,8398,8400],{"class":54,"line":682},[52,8378,8300],{"class":58},[52,8380,8069],{"class":62},[52,8382,8305],{"class":66},[52,8384,70],{"class":231},[52,8386,2422],{"class":58},[52,8388,2425],{"class":231},[52,8390,8314],{"class":66},[52,8392,2289],{"class":58},[52,8394,6161],{"class":371},[52,8396,8397],{"class":58},")}>Reset\u003C/",[52,8399,8069],{"class":62},[52,8401,77],{"class":58},[52,8403,8404,8407,8409],{"class":54,"line":698},[52,8405,8406],{"class":58}," \u003C/",[52,8408,8060],{"class":62},[52,8410,77],{"class":58},[52,8412,8413],{"class":54,"line":707},[52,8414,597],{"emptyLinePlaceholder":171},[52,8416,8417,8419,8421],{"class":54,"line":2327},[52,8418,2476],{"class":58},[52,8420,63],{"class":371},[52,8422,77],{"class":58},[52,8424,8425,8427,8429,8431,8433,8435,8437,8439,8441,8443,8445,8447,8449,8451,8453],{"class":54,"line":7143},[52,8426,8300],{"class":58},[52,8428,2216],{"class":371},[52,8430,6589],{"class":66},[52,8432,70],{"class":231},[52,8434,8157],{"class":73},[52,8436,3687],{"class":66},[52,8438,70],{"class":231},[52,8440,723],{"class":58},[52,8442,3785],{"class":371},[52,8444,2577],{"class":58},[52,8446,2374],{"class":66},[52,8448,70],{"class":231},[52,8450,723],{"class":58},[52,8452,2292],{"class":371},[52,8454,3788],{"class":58},[52,8456,8457,8459,8461,8463,8465,8468,8470,8472,8474],{"class":54,"line":7153},[52,8458,8300],{"class":58},[52,8460,86],{"class":371},[52,8462,8023],{"class":66},[52,8464,70],{"class":231},[52,8466,8467],{"class":58},"{angle} ",[52,8469,6553],{"class":66},[52,8471,70],{"class":231},[52,8473,8157],{"class":73},[52,8475,105],{"class":58},[52,8477,8478,8480,8482],{"class":54,"line":7164},[52,8479,8406],{"class":58},[52,8481,63],{"class":371},[52,8483,77],{"class":58},[52,8485,8486],{"class":54,"line":7169},[52,8487,8488],{"class":58}," \u003C/>\n",[52,8490,8492],{"class":54,"line":8491},20,[52,8493,2500],{"class":58},[52,8495,8497],{"class":54,"line":8496},21,[52,8498,729],{"class":58},[43,8500,8502],{"className":419,"code":8501,"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,8503,8504,8512,8517,8521,8526,8534,8538,8546,8580,8612,8643,8651,8655,8663,8695,8712],{"__ignoreMap":48},[52,8505,8506,8508,8510],{"class":54,"line":55},[52,8507,59],{"class":58},[52,8509,2253],{"class":62},[52,8511,77],{"class":58},[52,8513,8514],{"class":54,"line":80},[52,8515,8516],{"class":58}," import { Shader, LinearGradient, Circle } from 'shaders/svelte'\n",[52,8518,8519],{"class":54,"line":108},[52,8520,597],{"emptyLinePlaceholder":171},[52,8522,8523],{"class":54,"line":118},[52,8524,8525],{"class":58}," let angle = 0\n",[52,8527,8528,8530,8532],{"class":54,"line":594},[52,8529,121],{"class":58},[52,8531,2253],{"class":62},[52,8533,77],{"class":58},[52,8535,8536],{"class":54,"line":600},[52,8537,597],{"emptyLinePlaceholder":171},[52,8539,8540,8542,8544],{"class":54,"line":606},[52,8541,59],{"class":58},[52,8543,8060],{"class":62},[52,8545,77],{"class":58},[52,8547,8548,8550,8552,8554,8556,8559,8561,8563,8565,8568,8571,8573,8576,8578],{"class":54,"line":653},[52,8549,83],{"class":58},[52,8551,8069],{"class":62},[52,8553,3572],{"class":66},[52,8555,1540],{"class":58},[52,8557,8558],{"class":66},"click",[52,8560,70],{"class":231},[52,8562,2422],{"class":58},[52,8564,2425],{"class":231},[52,8566,8567],{"class":58}," angle ",[52,8569,8570],{"class":231},"+=",[52,8572,8331],{"class":371},[52,8574,8575],{"class":58},"}>Rotate +45°\u003C/",[52,8577,8069],{"class":62},[52,8579,77],{"class":58},[52,8581,8582,8584,8586,8588,8590,8592,8594,8596,8598,8600,8603,8605,8608,8610],{"class":54,"line":662},[52,8583,83],{"class":58},[52,8585,8069],{"class":62},[52,8587,3572],{"class":66},[52,8589,1540],{"class":58},[52,8591,8558],{"class":66},[52,8593,70],{"class":231},[52,8595,2422],{"class":58},[52,8597,2425],{"class":231},[52,8599,8567],{"class":58},[52,8601,8602],{"class":231},"-=",[52,8604,8331],{"class":371},[52,8606,8607],{"class":58},"}>Rotate -45°\u003C/",[52,8609,8069],{"class":62},[52,8611,77],{"class":58},[52,8613,8614,8616,8618,8620,8622,8624,8626,8628,8630,8632,8634,8636,8639,8641],{"class":54,"line":671},[52,8615,83],{"class":58},[52,8617,8069],{"class":62},[52,8619,3572],{"class":66},[52,8621,1540],{"class":58},[52,8623,8558],{"class":66},[52,8625,70],{"class":231},[52,8627,2422],{"class":58},[52,8629,2425],{"class":231},[52,8631,8567],{"class":58},[52,8633,70],{"class":231},[52,8635,2457],{"class":371},[52,8637,8638],{"class":58},"}>Reset\u003C/",[52,8640,8069],{"class":62},[52,8642,77],{"class":58},[52,8644,8645,8647,8649],{"class":54,"line":676},[52,8646,121],{"class":58},[52,8648,8060],{"class":62},[52,8650,77],{"class":58},[52,8652,8653],{"class":54,"line":682},[52,8654,597],{"emptyLinePlaceholder":171},[52,8656,8657,8659,8661],{"class":54,"line":698},[52,8658,59],{"class":58},[52,8660,63],{"class":371},[52,8662,77],{"class":58},[52,8664,8665,8667,8669,8671,8673,8675,8677,8679,8681,8683,8685,8687,8689,8691,8693],{"class":54,"line":707},[52,8666,83],{"class":58},[52,8668,2216],{"class":371},[52,8670,6589],{"class":66},[52,8672,70],{"class":231},[52,8674,8157],{"class":73},[52,8676,3687],{"class":66},[52,8678,70],{"class":231},[52,8680,723],{"class":58},[52,8682,3785],{"class":371},[52,8684,2577],{"class":58},[52,8686,2374],{"class":66},[52,8688,70],{"class":231},[52,8690,723],{"class":58},[52,8692,2292],{"class":371},[52,8694,3788],{"class":58},[52,8696,8697,8699,8701,8704,8706,8708,8710],{"class":54,"line":2327},[52,8698,83],{"class":58},[52,8700,86],{"class":371},[52,8702,8703],{"class":58}," {angle} ",[52,8705,6553],{"class":66},[52,8707,70],{"class":231},[52,8709,8157],{"class":73},[52,8711,105],{"class":58},[52,8713,8714,8716,8718],{"class":54,"line":7143},[52,8715,121],{"class":58},[52,8717,63],{"class":371},[52,8719,77],{"class":58},[43,8721,8723],{"className":419,"code":8722,"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,8724,8725,8735,8745,8749,8757,8781,8785,8791,8795,8803,8837,8871,8897,8905,8909,8917,8949,8974,8982,8986,8990],{"__ignoreMap":48},[52,8726,8727,8729,8731,8733],{"class":54,"line":55},[52,8728,232],{"class":231},[52,8730,2645],{"class":58},[52,8732,238],{"class":231},[52,8734,2650],{"class":73},[52,8736,8737,8739,8741,8743],{"class":54,"line":80},[52,8738,232],{"class":231},[52,8740,8008],{"class":58},[52,8742,238],{"class":231},[52,8744,289],{"class":73},[52,8746,8747],{"class":54,"line":108},[52,8748,597],{"emptyLinePlaceholder":171},[52,8750,8751,8753,8755],{"class":54,"line":118},[52,8752,2304],{"class":231},[52,8754,8245],{"class":66},[52,8756,2310],{"class":58},[52,8758,8759,8761,8763,8765,8767,8769,8771,8773,8775,8777,8779],{"class":54,"line":594},[52,8760,2368],{"class":231},[52,8762,2371],{"class":58},[52,8764,1199],{"class":371},[52,8766,1881],{"class":58},[52,8768,8260],{"class":371},[52,8770,2382],{"class":58},[52,8772,70],{"class":231},[52,8774,2681],{"class":66},[52,8776,2289],{"class":58},[52,8778,6161],{"class":371},[52,8780,2295],{"class":58},[52,8782,8783],{"class":54,"line":600},[52,8784,597],{"emptyLinePlaceholder":171},[52,8786,8787,8789],{"class":54,"line":606},[52,8788,2402],{"class":231},[52,8790,2405],{"class":58},[52,8792,8793],{"class":54,"line":653},[52,8794,8287],{"class":58},[52,8796,8797,8799,8801],{"class":54,"line":662},[52,8798,2476],{"class":58},[52,8800,8060],{"class":62},[52,8802,77],{"class":58},[52,8804,8805,8807,8809,8811,8813,8815,8817,8819,8821,8823,8825,8827,8829,8831,8833,8835],{"class":54,"line":671},[52,8806,8300],{"class":58},[52,8808,8069],{"class":62},[52,8810,8305],{"class":66},[52,8812,70],{"class":231},[52,8814,2422],{"class":58},[52,8816,2425],{"class":231},[52,8818,8314],{"class":66},[52,8820,2289],{"class":58},[52,8822,1139],{"class":8319},[52,8824,8322],{"class":231},[52,8826,8325],{"class":58},[52,8828,8328],{"class":231},[52,8830,8331],{"class":371},[52,8832,8334],{"class":58},[52,8834,8069],{"class":62},[52,8836,77],{"class":58},[52,8838,8839,8841,8843,8845,8847,8849,8851,8853,8855,8857,8859,8861,8863,8865,8867,8869],{"class":54,"line":676},[52,8840,8300],{"class":58},[52,8842,8069],{"class":62},[52,8844,8305],{"class":66},[52,8846,70],{"class":231},[52,8848,2422],{"class":58},[52,8850,2425],{"class":231},[52,8852,8314],{"class":66},[52,8854,2289],{"class":58},[52,8856,1139],{"class":8319},[52,8858,8322],{"class":231},[52,8860,8325],{"class":58},[52,8862,8365],{"class":231},[52,8864,8331],{"class":371},[52,8866,8370],{"class":58},[52,8868,8069],{"class":62},[52,8870,77],{"class":58},[52,8872,8873,8875,8877,8879,8881,8883,8885,8887,8889,8891,8893,8895],{"class":54,"line":682},[52,8874,8300],{"class":58},[52,8876,8069],{"class":62},[52,8878,8305],{"class":66},[52,8880,70],{"class":231},[52,8882,2422],{"class":58},[52,8884,2425],{"class":231},[52,8886,8314],{"class":66},[52,8888,2289],{"class":58},[52,8890,6161],{"class":371},[52,8892,8397],{"class":58},[52,8894,8069],{"class":62},[52,8896,77],{"class":58},[52,8898,8899,8901,8903],{"class":54,"line":698},[52,8900,8406],{"class":58},[52,8902,8060],{"class":62},[52,8904,77],{"class":58},[52,8906,8907],{"class":54,"line":707},[52,8908,597],{"emptyLinePlaceholder":171},[52,8910,8911,8913,8915],{"class":54,"line":2327},[52,8912,2476],{"class":58},[52,8914,63],{"class":371},[52,8916,77],{"class":58},[52,8918,8919,8921,8923,8925,8927,8929,8931,8933,8935,8937,8939,8941,8943,8945,8947],{"class":54,"line":7143},[52,8920,8300],{"class":58},[52,8922,2216],{"class":371},[52,8924,6589],{"class":66},[52,8926,70],{"class":231},[52,8928,8157],{"class":73},[52,8930,3687],{"class":66},[52,8932,70],{"class":231},[52,8934,723],{"class":58},[52,8936,3785],{"class":371},[52,8938,2577],{"class":58},[52,8940,2374],{"class":66},[52,8942,70],{"class":231},[52,8944,723],{"class":58},[52,8946,2292],{"class":371},[52,8948,3788],{"class":58},[52,8950,8951,8953,8955,8957,8959,8961,8963,8966,8968,8970,8972],{"class":54,"line":7153},[52,8952,8300],{"class":58},[52,8954,86],{"class":371},[52,8956,8023],{"class":66},[52,8958,70],{"class":231},[52,8960,723],{"class":58},[52,8962,1199],{"class":66},[52,8964,8965],{"class":58},"()} ",[52,8967,6553],{"class":66},[52,8969,70],{"class":231},[52,8971,8157],{"class":73},[52,8973,105],{"class":58},[52,8975,8976,8978,8980],{"class":54,"line":7164},[52,8977,8406],{"class":58},[52,8979,63],{"class":371},[52,8981,77],{"class":58},[52,8983,8984],{"class":54,"line":7169},[52,8985,8488],{"class":58},[52,8987,8988],{"class":54,"line":8491},[52,8989,2500],{"class":58},[52,8991,8992],{"class":54,"line":8496},[52,8993,729],{"class":58},[43,8995,8997],{"className":222,"code":8996,"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,8998,8999,9011,9015,9029,9033,9053,9075,9079,9083,9087,9092,9112,9116,9121],{"__ignoreMap":48},[52,9000,9001,9003,9006,9008],{"class":54,"line":55},[52,9002,232],{"class":231},[52,9004,9005],{"class":58}," { createShader } ",[52,9007,238],{"class":231},[52,9009,9010],{"class":73}," 'shaders/js'\n",[52,9012,9013],{"class":54,"line":80},[52,9014,597],{"emptyLinePlaceholder":171},[52,9016,9017,9019,9021,9023,9025,9027],{"class":54,"line":108},[52,9018,1721],{"class":231},[52,9020,1724],{"class":371},[52,9022,1727],{"class":231},[52,9024,1730],{"class":231},[52,9026,1733],{"class":66},[52,9028,1736],{"class":58},[52,9030,9031],{"class":54,"line":118},[52,9032,1751],{"class":58},[52,9034,9035,9037,9039,9041,9043,9045,9047,9049,9051],{"class":54,"line":594},[52,9036,1756],{"class":58},[52,9038,2869],{"class":73},[52,9040,2872],{"class":58},[52,9042,7654],{"class":73},[52,9044,5028],{"class":58},[52,9046,3785],{"class":371},[52,9048,6944],{"class":58},[52,9050,2292],{"class":371},[52,9052,4057],{"class":58},[52,9054,9055,9057,9059,9061,9064,9067,9069,9071,9073],{"class":54,"line":600},[52,9056,1756],{"class":58},[52,9058,2126],{"class":73},[52,9060,2872],{"class":58},[52,9062,9063],{"class":73},"'gradient'",[52,9065,9066],{"class":58},", props: { angle: ",[52,9068,6161],{"class":371},[52,9070,7689],{"class":58},[52,9072,7654],{"class":73},[52,9074,1768],{"class":58},[52,9076,9077],{"class":54,"line":606},[52,9078,1773],{"class":58},[52,9080,9081],{"class":54,"line":653},[52,9082,1778],{"class":58},[52,9084,9085],{"class":54,"line":662},[52,9086,597],{"emptyLinePlaceholder":171},[52,9088,9089],{"class":54,"line":671},[52,9090,9091],{"class":559},"// Update angle at runtime\n",[52,9093,9094,9097,9100,9102,9104,9107,9109],{"class":54,"line":676},[52,9095,9096],{"class":58},"shader.",[52,9098,9099],{"class":66},"update",[52,9101,2289],{"class":58},[52,9103,9063],{"class":73},[52,9105,9106],{"class":58},", { angle: ",[52,9108,1206],{"class":371},[52,9110,9111],{"class":58}," })\n",[52,9113,9114],{"class":54,"line":682},[52,9115,597],{"emptyLinePlaceholder":171},[52,9117,9118],{"class":54,"line":698},[52,9119,9120],{"class":559},"// Reset angle\n",[52,9122,9123,9125,9127,9129,9131,9133,9135],{"class":54,"line":707},[52,9124,9096],{"class":58},[52,9126,9099],{"class":66},[52,9128,2289],{"class":58},[52,9130,9063],{"class":73},[52,9132,9106],{"class":58},[52,9134,6161],{"class":371},[52,9136,9111],{"class":58},[15,9138,9139],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[9141,9142],"interactive-shader-demo",{":controls":9143,":preset":9144},"[{\"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,9146,9147],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,9149,9151],{"id":9150},"common-reactive-props","Common Reactive Props",[15,9153,9154],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,9156,9157,1540],{},[151,9158,9159],{},"Position and Size",[43,9161,9163],{"className":6505,"code":9162,"language":6507,"meta":48,"style":48},"\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" />\n",[31,9164,9165],{"__ignoreMap":48},[52,9166,9167,9169,9171,9173,9176,9178,9180,9183,9185,9187,9189,9191,9193,9196,9198],{"class":54,"line":55},[52,9168,59],{"class":58},[52,9170,2216],{"class":62},[52,9172,2454],{"class":58},[52,9174,9175],{"class":66},"radius",[52,9177,70],{"class":58},[52,9179,618],{"class":73},[52,9181,9182],{"class":58},"size",[52,9184,618],{"class":73},[52,9186,2454],{"class":58},[52,9188,5729],{"class":66},[52,9190,70],{"class":58},[52,9192,618],{"class":73},[52,9194,9195],{"class":58},"{ x: posX, y: posY }",[52,9197,618],{"class":73},[52,9199,105],{"class":58},[15,9201,9202,1540],{},[151,9203,9204],{},"Colors",[43,9206,9208],{"className":6505,"code":9207,"language":6507,"meta":48,"style":48},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" />\n",[31,9209,9210],{"__ignoreMap":48},[52,9211,9212,9214,9216,9218,9220,9222,9224,9227,9229,9231,9233,9235,9237,9240,9242],{"class":54,"line":55},[52,9213,59],{"class":58},[52,9215,86],{"class":62},[52,9217,2454],{"class":58},[52,9219,1849],{"class":66},[52,9221,70],{"class":58},[52,9223,618],{"class":73},[52,9225,9226],{"class":58},"startColor",[52,9228,618],{"class":73},[52,9230,2454],{"class":58},[52,9232,1853],{"class":66},[52,9234,70],{"class":58},[52,9236,618],{"class":73},[52,9238,9239],{"class":58},"endColor",[52,9241,618],{"class":73},[52,9243,105],{"class":58},[15,9245,9246,1540],{},[151,9247,9248],{},"Intensity and Strength",[43,9250,9252],{"className":6505,"code":9251,"language":6507,"meta":48,"style":48},"\u003CBlur :intensity=\"blurAmount\" />\n\u003CGlow :strength=\"glowPower\" />\n",[31,9253,9254,9277],{"__ignoreMap":48},[52,9255,9256,9258,9261,9263,9266,9268,9270,9273,9275],{"class":54,"line":55},[52,9257,59],{"class":58},[52,9259,9260],{"class":62},"Blur",[52,9262,2454],{"class":58},[52,9264,9265],{"class":66},"intensity",[52,9267,70],{"class":58},[52,9269,618],{"class":73},[52,9271,9272],{"class":58},"blurAmount",[52,9274,618],{"class":73},[52,9276,105],{"class":58},[52,9278,9279,9281,9284,9286,9289,9291,9293,9296,9298],{"class":54,"line":80},[52,9280,59],{"class":58},[52,9282,9283],{"class":62},"Glow",[52,9285,2454],{"class":58},[52,9287,9288],{"class":66},"strength",[52,9290,70],{"class":58},[52,9292,618],{"class":73},[52,9294,9295],{"class":58},"glowPower",[52,9297,618],{"class":73},[52,9299,105],{"class":58},[15,9301,9302,1540],{},[151,9303,9304],{},"Angles and Rotation",[43,9306,9308],{"className":6505,"code":9307,"language":6507,"meta":48,"style":48},"\u003CLinearGradient :angle=\"rotation\" />\n",[31,9309,9310],{"__ignoreMap":48},[52,9311,9312,9314,9316,9318,9320,9322,9324,9327,9329],{"class":54,"line":55},[52,9313,59],{"class":58},[52,9315,86],{"class":62},[52,9317,2454],{"class":58},[52,9319,1199],{"class":66},[52,9321,70],{"class":58},[52,9323,618],{"class":73},[52,9325,9326],{"class":58},"rotation",[52,9328,618],{"class":73},[52,9330,105],{"class":58},[15,9332,9333],{},"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,9335,9337],{"id":9336},"animating-props","Animating Props",[15,9339,9340],{},"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,9342,9343,9346],{},[151,9344,9345],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte/Solid.",[43,9348,9350],{"className":360,"code":9349,"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,9351,9352,9362,9374,9384,9388,9396,9421,9425,9438,9443,9459,9468,9478,9500,9505,9521,9529,9538,9554,9558,9562,9566,9573,9578,9596,9601,9610,9640,9655,9664,9669,9674],{"__ignoreMap":48},[52,9353,9354,9356,9358,9360],{"class":54,"line":55},[52,9355,232],{"class":231},[52,9357,2345],{"class":58},[52,9359,238],{"class":231},[52,9361,2350],{"class":73},[52,9363,9364,9366,9369,9371],{"class":54,"line":80},[52,9365,232],{"class":231},[52,9367,9368],{"class":58}," { animate } ",[52,9370,238],{"class":231},[52,9372,9373],{"class":73}," 'motion'\n",[52,9375,9376,9378,9380,9382],{"class":54,"line":108},[52,9377,232],{"class":231},[52,9379,8008],{"class":58},[52,9381,238],{"class":231},[52,9383,257],{"class":73},[52,9385,9386],{"class":54,"line":118},[52,9387,597],{"emptyLinePlaceholder":171},[52,9389,9390,9392,9394],{"class":54,"line":594},[52,9391,2304],{"class":231},[52,9393,8245],{"class":66},[52,9395,2310],{"class":58},[52,9397,9398,9400,9402,9404,9406,9409,9411,9413,9415,9417,9419],{"class":54,"line":600},[52,9399,2368],{"class":231},[52,9401,2371],{"class":58},[52,9403,9175],{"class":371},[52,9405,1881],{"class":58},[52,9407,9408],{"class":371},"setRadius",[52,9410,2382],{"class":58},[52,9412,70],{"class":231},[52,9414,2387],{"class":66},[52,9416,2289],{"class":58},[52,9418,5724],{"class":371},[52,9420,2295],{"class":58},[52,9422,9423],{"class":54,"line":606},[52,9424,597],{"emptyLinePlaceholder":171},[52,9426,9427,9430,9433,9436],{"class":54,"line":653},[52,9428,9429],{"class":231}," async",[52,9431,9432],{"class":231}," function",[52,9434,9435],{"class":66}," pulse",[52,9437,2310],{"class":58},[52,9439,9440],{"class":54,"line":662},[52,9441,9442],{"class":559}," // Grow then shrink with smooth easing\n",[52,9444,9445,9448,9451,9454,9456],{"class":54,"line":671},[52,9446,9447],{"class":231}," await",[52,9449,9450],{"class":66}," animate",[52,9452,9453],{"class":58},"(radius, ",[52,9455,6165],{"class":371},[52,9457,9458],{"class":58},", {\n",[52,9460,9461,9464,9466],{"class":54,"line":676},[52,9462,9463],{"class":58}," duration: ",[52,9465,5241],{"class":371},[52,9467,1746],{"class":58},[52,9469,9470,9473,9476],{"class":54,"line":682},[52,9471,9472],{"class":58}," easing: ",[52,9474,9475],{"class":73},"'ease-out'",[52,9477,1746],{"class":58},[52,9479,9480,9483,9486,9489,9492,9494,9497],{"class":54,"line":698},[52,9481,9482],{"class":66}," onUpdate",[52,9484,9485],{"class":58},": (",[52,9487,9488],{"class":8319},"latest",[52,9490,9491],{"class":58},") ",[52,9493,2425],{"class":231},[52,9495,9496],{"class":66}," setRadius",[52,9498,9499],{"class":58},"(latest)\n",[52,9501,9502],{"class":54,"line":707},[52,9503,9504],{"class":58}," })\n",[52,9506,9507,9509,9511,9513,9515,9517,9519],{"class":54,"line":2327},[52,9508,9447],{"class":231},[52,9510,9450],{"class":66},[52,9512,2289],{"class":58},[52,9514,6165],{"class":371},[52,9516,1881],{"class":58},[52,9518,5724],{"class":371},[52,9520,9458],{"class":58},[52,9522,9523,9525,9527],{"class":54,"line":7143},[52,9524,9463],{"class":58},[52,9526,5241],{"class":371},[52,9528,1746],{"class":58},[52,9530,9531,9533,9536],{"class":54,"line":7153},[52,9532,9472],{"class":58},[52,9534,9535],{"class":73},"'ease-in'",[52,9537,1746],{"class":58},[52,9539,9540,9542,9544,9546,9548,9550,9552],{"class":54,"line":7164},[52,9541,9482],{"class":66},[52,9543,9485],{"class":58},[52,9545,9488],{"class":8319},[52,9547,9491],{"class":58},[52,9549,2425],{"class":231},[52,9551,9496],{"class":66},[52,9553,9499],{"class":58},[52,9555,9556],{"class":54,"line":7169},[52,9557,9504],{"class":58},[52,9559,9560],{"class":54,"line":8491},[52,9561,2919],{"class":58},[52,9563,9564],{"class":54,"line":8496},[52,9565,597],{"emptyLinePlaceholder":171},[52,9567,9569,9571],{"class":54,"line":9568},22,[52,9570,2402],{"class":231},[52,9572,2405],{"class":58},[52,9574,9576],{"class":54,"line":9575},23,[52,9577,8287],{"class":58},[52,9579,9581,9583,9585,9587,9589,9592,9594],{"class":54,"line":9580},24,[52,9582,2476],{"class":58},[52,9584,8069],{"class":62},[52,9586,8305],{"class":66},[52,9588,70],{"class":231},[52,9590,9591],{"class":58},"{pulse}>Pulse\u003C/",[52,9593,8069],{"class":62},[52,9595,77],{"class":58},[52,9597,9599],{"class":54,"line":9598},25,[52,9600,597],{"emptyLinePlaceholder":171},[52,9602,9604,9606,9608],{"class":54,"line":9603},26,[52,9605,2476],{"class":58},[52,9607,63],{"class":371},[52,9609,77],{"class":58},[52,9611,9613,9615,9617,9619,9621,9623,9625,9627,9630,9632,9634,9636,9638],{"class":54,"line":9612},27,[52,9614,8300],{"class":58},[52,9616,2216],{"class":371},[52,9618,6589],{"class":66},[52,9620,70],{"class":231},[52,9622,8157],{"class":73},[52,9624,3687],{"class":66},[52,9626,70],{"class":231},[52,9628,9629],{"class":58},"{radius} ",[52,9631,2374],{"class":66},[52,9633,70],{"class":231},[52,9635,723],{"class":58},[52,9637,2292],{"class":371},[52,9639,3788],{"class":58},[52,9641,9643,9645,9647,9649,9651,9653],{"class":54,"line":9642},28,[52,9644,8300],{"class":58},[52,9646,86],{"class":371},[52,9648,6628],{"class":66},[52,9650,70],{"class":231},[52,9652,8157],{"class":73},[52,9654,105],{"class":58},[52,9656,9658,9660,9662],{"class":54,"line":9657},29,[52,9659,8406],{"class":58},[52,9661,63],{"class":371},[52,9663,77],{"class":58},[52,9665,9667],{"class":54,"line":9666},30,[52,9668,8488],{"class":58},[52,9670,9672],{"class":54,"line":9671},31,[52,9673,2500],{"class":58},[52,9675,9677],{"class":54,"line":9676},32,[52,9678,729],{"class":58},[9141,9680],{":controls":9681,":preset":9682},"[{\"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,9684,9685],{},"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,9687,9689],{"id":9688},"performance-notes","Performance Notes",[15,9691,9692],{},"Reactive props update GPU uniforms directly. This means:",[1465,9694,9695,9701,9707],{},[1468,9696,9697,9700],{},[151,9698,9699],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[1468,9702,9703,9706],{},[151,9704,9705],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[1468,9708,9709,9712],{},[151,9710,9711],{},"Frame-rate friendly",": Animate as many props as you need",[15,9714,9715],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[156,9717,9718],{},"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":9720},[9721,9722,9723,9724,9725],{"id":7743,"depth":80,"text":7744},{"id":7970,"depth":80,"text":7971},{"id":9150,"depth":80,"text":9151},{"id":9336,"depth":80,"text":9337},{"id":9688,"depth":80,"text":9689},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1487,"description":9726},"docs/guide/4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":9733,"title":1480,"body":9734,"category":165,"description":12501,"exclude":167,"extension":168,"forceFramework":167,"icon":12502,"meta":12503,"navigation":171,"path":1479,"seo":12504,"stem":12505,"__hash__":12506},"guide/docs/guide/5.layout-positioning.md",{"type":8,"value":9735,"toc":12485},[9736,9739,9747,9751,9760,9762,9767,10066,10070,10074,10077,10505,10509,10519,10867,10871,10874,11435,11439,11442,11756,11760,11764,11771,11912,11924,11928,11939,12014,12018,12021,12248,12252,12255,12482],[11,9737,1480],{"id":9738},"layout-positioning",[15,9740,1825,9741,9743,9744,9746],{},[31,9742,33],{}," component renders a ",[31,9745,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,9748,9750],{"id":9749},"the-canvas-model","The canvas model",[15,9752,9753,9754,9756,9757,9759],{},"Every ",[31,9755,33],{}," renders exactly one ",[31,9758,40],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,9761,544],{"id":543},[15,9763,9764,9765,4104],{},"Apply classes or styles directly to the ",[31,9766,33],{},[217,9768,9769,9888,9923,9958,9992],{":tabs":1543},[43,9770,9772],{"className":45,"code":9771,"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,9773,9774,9779,9793,9801,9809,9813,9818,9833,9841,9849,9853,9858,9872,9880],{"__ignoreMap":48},[52,9775,9776],{"class":54,"line":55},[52,9777,9778],{"class":559},"\u003C!-- Tailwind -->\n",[52,9780,9781,9783,9785,9787,9789,9791],{"class":54,"line":80},[52,9782,59],{"class":58},[52,9784,63],{"class":62},[52,9786,67],{"class":66},[52,9788,70],{"class":58},[52,9790,319],{"class":73},[52,9792,77],{"class":58},[52,9794,9795,9797,9799],{"class":54,"line":108},[52,9796,83],{"class":58},[52,9798,86],{"class":62},[52,9800,105],{"class":58},[52,9802,9803,9805,9807],{"class":54,"line":118},[52,9804,121],{"class":58},[52,9806,63],{"class":62},[52,9808,77],{"class":58},[52,9810,9811],{"class":54,"line":594},[52,9812,597],{"emptyLinePlaceholder":171},[52,9814,9815],{"class":54,"line":600},[52,9816,9817],{"class":559},"\u003C!-- CSS class -->\n",[52,9819,9820,9822,9824,9826,9828,9831],{"class":54,"line":606},[52,9821,59],{"class":58},[52,9823,63],{"class":62},[52,9825,67],{"class":66},[52,9827,70],{"class":58},[52,9829,9830],{"class":73},"\"hero-shader\"",[52,9832,77],{"class":58},[52,9834,9835,9837,9839],{"class":54,"line":653},[52,9836,83],{"class":58},[52,9838,86],{"class":62},[52,9840,105],{"class":58},[52,9842,9843,9845,9847],{"class":54,"line":662},[52,9844,121],{"class":58},[52,9846,63],{"class":62},[52,9848,77],{"class":58},[52,9850,9851],{"class":54,"line":671},[52,9852,597],{"emptyLinePlaceholder":171},[52,9854,9855],{"class":54,"line":676},[52,9856,9857],{"class":559},"\u003C!-- Inline -->\n",[52,9859,9860,9862,9864,9866,9868,9870],{"class":54,"line":682},[52,9861,59],{"class":58},[52,9863,63],{"class":62},[52,9865,613],{"class":66},[52,9867,70],{"class":58},[52,9869,927],{"class":73},[52,9871,77],{"class":58},[52,9873,9874,9876,9878],{"class":54,"line":698},[52,9875,83],{"class":58},[52,9877,86],{"class":62},[52,9879,105],{"class":58},[52,9881,9882,9884,9886],{"class":54,"line":707},[52,9883,121],{"class":58},[52,9885,63],{"class":62},[52,9887,77],{"class":58},[43,9889,9891],{"className":360,"code":9890,"language":362,"meta":48,"style":48},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,9892,9893,9907,9915],{"__ignoreMap":48},[52,9894,9895,9897,9899,9901,9903,9905],{"class":54,"line":55},[52,9896,59],{"class":58},[52,9898,63],{"class":371},[52,9900,374],{"class":66},[52,9902,70],{"class":231},[52,9904,319],{"class":73},[52,9906,77],{"class":58},[52,9908,9909,9911,9913],{"class":54,"line":80},[52,9910,83],{"class":58},[52,9912,86],{"class":371},[52,9914,105],{"class":58},[52,9916,9917,9919,9921],{"class":54,"line":108},[52,9918,121],{"class":58},[52,9920,63],{"class":371},[52,9922,77],{"class":58},[43,9924,9926],{"className":419,"code":9925,"language":420,"meta":48,"style":48},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,9927,9928,9942,9950],{"__ignoreMap":48},[52,9929,9930,9932,9934,9936,9938,9940],{"class":54,"line":55},[52,9931,59],{"class":58},[52,9933,63],{"class":371},[52,9935,67],{"class":66},[52,9937,70],{"class":231},[52,9939,319],{"class":73},[52,9941,77],{"class":58},[52,9943,9944,9946,9948],{"class":54,"line":80},[52,9945,83],{"class":58},[52,9947,86],{"class":371},[52,9949,105],{"class":58},[52,9951,9952,9954,9956],{"class":54,"line":108},[52,9953,121],{"class":58},[52,9955,63],{"class":371},[52,9957,77],{"class":58},[43,9959,9960],{"className":419,"code":9925,"language":420,"meta":48,"style":48},[31,9961,9962,9976,9984],{"__ignoreMap":48},[52,9963,9964,9966,9968,9970,9972,9974],{"class":54,"line":55},[52,9965,59],{"class":58},[52,9967,63],{"class":371},[52,9969,67],{"class":66},[52,9971,70],{"class":231},[52,9973,319],{"class":73},[52,9975,77],{"class":58},[52,9977,9978,9980,9982],{"class":54,"line":80},[52,9979,83],{"class":58},[52,9981,86],{"class":371},[52,9983,105],{"class":58},[52,9985,9986,9988,9990],{"class":54,"line":108},[52,9987,121],{"class":58},[52,9989,63],{"class":371},[52,9991,77],{"class":58},[43,9993,9995],{"className":222,"code":9994,"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,9996,9997,10002,10021,10031,10041,10045],{"__ignoreMap":48},[52,9998,9999],{"class":54,"line":55},[52,10000,10001],{"class":559},"// Apply sizing to the canvas element before calling createShader\n",[52,10003,10004,10006,10008,10010,10012,10014,10016,10019],{"class":54,"line":80},[52,10005,1721],{"class":231},[52,10007,2796],{"class":371},[52,10009,1727],{"class":231},[52,10011,2801],{"class":58},[52,10013,2804],{"class":66},[52,10015,2289],{"class":58},[52,10017,10018],{"class":73},"'my-shader'",[52,10020,2295],{"class":58},[52,10022,10023,10026,10028],{"class":54,"line":108},[52,10024,10025],{"class":58},"canvas.style.width ",[52,10027,70],{"class":231},[52,10029,10030],{"class":73}," '100%'\n",[52,10032,10033,10036,10038],{"class":54,"line":118},[52,10034,10035],{"class":58},"canvas.style.height ",[52,10037,70],{"class":231},[52,10039,10040],{"class":73}," '400px'\n",[52,10042,10043],{"class":54,"line":594},[52,10044,597],{"emptyLinePlaceholder":171},[52,10046,10047,10049,10051,10053,10055,10057,10060,10063],{"class":54,"line":600},[52,10048,1721],{"class":231},[52,10050,1724],{"class":371},[52,10052,1727],{"class":231},[52,10054,1730],{"class":231},[52,10056,1733],{"class":66},[52,10058,10059],{"class":58},"(canvas, { components: [",[52,10061,10062],{"class":231},"...",[52,10064,10065],{"class":58},"] })\n",[23,10067,10069],{"id":10068},"common-layout-patterns","Common layout patterns",[2925,10071,10073],{"id":10072},"full-page-background","Full-page background",[15,10075,10076],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[217,10078,10079,10154,10231,10297,10370],{":tabs":1543},[43,10080,10082],{"className":45,"code":10081,"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,10083,10084,10089,10104,10113,10121,10125,10141,10146],{"__ignoreMap":48},[52,10085,10086],{"class":54,"line":55},[52,10087,10088],{"class":559},"\u003C!-- In your layout or App.vue -->\n",[52,10090,10091,10093,10095,10097,10099,10102],{"class":54,"line":80},[52,10092,59],{"class":58},[52,10094,63],{"class":62},[52,10096,67],{"class":66},[52,10098,70],{"class":58},[52,10100,10101],{"class":73},"\"fixed inset-0 -z-10\"",[52,10103,77],{"class":58},[52,10105,10106,10108,10111],{"class":54,"line":108},[52,10107,83],{"class":58},[52,10109,10110],{"class":62},"Aurora",[52,10112,105],{"class":58},[52,10114,10115,10117,10119],{"class":54,"line":118},[52,10116,121],{"class":58},[52,10118,63],{"class":62},[52,10120,77],{"class":58},[52,10122,10123],{"class":54,"line":594},[52,10124,597],{"emptyLinePlaceholder":171},[52,10126,10127,10129,10132,10134,10136,10139],{"class":54,"line":600},[52,10128,59],{"class":58},[52,10130,10131],{"class":62},"main",[52,10133,67],{"class":66},[52,10135,70],{"class":58},[52,10137,10138],{"class":73},"\"relative z-10\"",[52,10140,77],{"class":58},[52,10142,10143],{"class":54,"line":606},[52,10144,10145],{"class":559}," \u003C!-- Your page content scrolls over the shader -->\n",[52,10147,10148,10150,10152],{"class":54,"line":653},[52,10149,121],{"class":58},[52,10151,10131],{"class":62},[52,10153,77],{"class":58},[43,10155,10157],{"className":360,"code":10156,"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,10158,10159,10164,10178,10186,10194,10208,10218,10226],{"__ignoreMap":48},[52,10160,10161],{"class":54,"line":55},[52,10162,10163],{"class":58},"\u003C>\n",[52,10165,10166,10168,10170,10172,10174,10176],{"class":54,"line":80},[52,10167,83],{"class":58},[52,10169,63],{"class":371},[52,10171,374],{"class":66},[52,10173,70],{"class":231},[52,10175,10101],{"class":73},[52,10177,77],{"class":58},[52,10179,10180,10182,10184],{"class":54,"line":108},[52,10181,2213],{"class":58},[52,10183,10110],{"class":371},[52,10185,105],{"class":58},[52,10187,10188,10190,10192],{"class":54,"line":118},[52,10189,2230],{"class":58},[52,10191,63],{"class":371},[52,10193,77],{"class":58},[52,10195,10196,10198,10200,10202,10204,10206],{"class":54,"line":594},[52,10197,83],{"class":58},[52,10199,10131],{"class":62},[52,10201,374],{"class":66},[52,10203,70],{"class":231},[52,10205,10138],{"class":73},[52,10207,77],{"class":58},[52,10209,10210,10213,10216],{"class":54,"line":600},[52,10211,10212],{"class":58}," {",[52,10214,10215],{"class":559},"/* Your page content */",[52,10217,729],{"class":58},[52,10219,10220,10222,10224],{"class":54,"line":606},[52,10221,2230],{"class":58},[52,10223,10131],{"class":62},[52,10225,77],{"class":58},[52,10227,10228],{"class":54,"line":653},[52,10229,10230],{"class":58},"\u003C/>\n",[43,10232,10234],{"className":419,"code":10233,"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,10235,10236,10250,10258,10266,10270,10284,10289],{"__ignoreMap":48},[52,10237,10238,10240,10242,10244,10246,10248],{"class":54,"line":55},[52,10239,59],{"class":58},[52,10241,63],{"class":371},[52,10243,67],{"class":66},[52,10245,70],{"class":231},[52,10247,10101],{"class":73},[52,10249,77],{"class":58},[52,10251,10252,10254,10256],{"class":54,"line":80},[52,10253,83],{"class":58},[52,10255,10110],{"class":371},[52,10257,105],{"class":58},[52,10259,10260,10262,10264],{"class":54,"line":108},[52,10261,121],{"class":58},[52,10263,63],{"class":371},[52,10265,77],{"class":58},[52,10267,10268],{"class":54,"line":118},[52,10269,597],{"emptyLinePlaceholder":171},[52,10271,10272,10274,10276,10278,10280,10282],{"class":54,"line":594},[52,10273,59],{"class":58},[52,10275,10131],{"class":62},[52,10277,67],{"class":66},[52,10279,70],{"class":231},[52,10281,10138],{"class":73},[52,10283,77],{"class":58},[52,10285,10286],{"class":54,"line":600},[52,10287,10288],{"class":58}," \u003C!-- Your page content -->\n",[52,10290,10291,10293,10295],{"class":54,"line":606},[52,10292,121],{"class":58},[52,10294,10131],{"class":62},[52,10296,77],{"class":58},[43,10298,10300],{"className":419,"code":10299,"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,10301,10302,10306,10320,10328,10336,10350,10358,10366],{"__ignoreMap":48},[52,10303,10304],{"class":54,"line":55},[52,10305,10163],{"class":58},[52,10307,10308,10310,10312,10314,10316,10318],{"class":54,"line":80},[52,10309,83],{"class":58},[52,10311,63],{"class":371},[52,10313,67],{"class":66},[52,10315,70],{"class":231},[52,10317,10101],{"class":73},[52,10319,77],{"class":58},[52,10321,10322,10324,10326],{"class":54,"line":108},[52,10323,2213],{"class":58},[52,10325,10110],{"class":371},[52,10327,105],{"class":58},[52,10329,10330,10332,10334],{"class":54,"line":118},[52,10331,2230],{"class":58},[52,10333,63],{"class":371},[52,10335,77],{"class":58},[52,10337,10338,10340,10342,10344,10346,10348],{"class":54,"line":594},[52,10339,83],{"class":58},[52,10341,10131],{"class":62},[52,10343,67],{"class":66},[52,10345,70],{"class":231},[52,10347,10138],{"class":73},[52,10349,77],{"class":58},[52,10351,10352,10354,10356],{"class":54,"line":600},[52,10353,10212],{"class":58},[52,10355,10215],{"class":559},[52,10357,729],{"class":58},[52,10359,10360,10362,10364],{"class":54,"line":606},[52,10361,2230],{"class":58},[52,10363,10131],{"class":62},[52,10365,77],{"class":58},[52,10367,10368],{"class":54,"line":653},[52,10369,10230],{"class":58},[43,10371,10375],{"className":10372,"code":10373,"language":10374,"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,10376,10377,10405,10425,10429,10445,10456,10481,10492,10497],{"__ignoreMap":48},[52,10378,10379,10381,10384,10386,10388,10391,10393,10395,10398,10401,10403],{"class":54,"line":55},[52,10380,59],{"class":58},[52,10382,10383],{"class":62},"canvas",[52,10385,6589],{"class":66},[52,10387,70],{"class":58},[52,10389,10390],{"class":73},"\"bg\"",[52,10392,613],{"class":66},[52,10394,70],{"class":58},[52,10396,10397],{"class":73},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[52,10399,10400],{"class":58},">\u003C/",[52,10402,10383],{"class":62},[52,10404,77],{"class":58},[52,10406,10407,10409,10411,10413,10415,10418,10421,10423],{"class":54,"line":80},[52,10408,59],{"class":58},[52,10410,10131],{"class":62},[52,10412,613],{"class":66},[52,10414,70],{"class":58},[52,10416,10417],{"class":73},"\"position:relative;z-index:10;\"",[52,10419,10420],{"class":58},">Your content\u003C/",[52,10422,10131],{"class":62},[52,10424,77],{"class":58},[52,10426,10427],{"class":54,"line":108},[52,10428,597],{"emptyLinePlaceholder":171},[52,10430,10431,10433,10435,10438,10440,10443],{"class":54,"line":118},[52,10432,59],{"class":58},[52,10434,2253],{"class":62},[52,10436,10437],{"class":66}," type",[52,10439,70],{"class":58},[52,10441,10442],{"class":73},"\"module\"",[52,10444,77],{"class":58},[52,10446,10447,10450,10452,10454],{"class":54,"line":594},[52,10448,10449],{"class":231}," import",[52,10451,9005],{"class":58},[52,10453,238],{"class":231},[52,10455,9010],{"class":73},[52,10457,10458,10460,10462,10464,10466,10468,10471,10473,10475,10478],{"class":54,"line":600},[52,10459,2368],{"class":231},[52,10461,1724],{"class":371},[52,10463,1727],{"class":231},[52,10465,1730],{"class":231},[52,10467,1733],{"class":66},[52,10469,10470],{"class":58},"(document.",[52,10472,2804],{"class":66},[52,10474,2289],{"class":58},[52,10476,10477],{"class":73},"'bg'",[52,10479,10480],{"class":58},"), {\n",[52,10482,10483,10486,10489],{"class":54,"line":606},[52,10484,10485],{"class":58}," components: [{ type: ",[52,10487,10488],{"class":73},"'Aurora'",[52,10490,10491],{"class":58},", props: {} }]\n",[52,10493,10494],{"class":54,"line":653},[52,10495,10496],{"class":58}," })\n",[52,10498,10499,10501,10503],{"class":54,"line":662},[52,10500,121],{"class":58},[52,10502,2253],{"class":62},[52,10504,77],{"class":58},[2925,10506,10508],{"id":10507},"section-background","Section background",[15,10510,10511,10512,1850,10515,10518],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[31,10513,10514],{},"position: relative",[31,10516,10517],{},"overflow: hidden"," to contain the canvas:",[217,10520,10521,10625,10718,10793],{":tabs":219},[43,10522,10524],{"className":45,"code":10523,"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,10525,10526,10542,10556,10565,10573,10577,10597,10617],{"__ignoreMap":48},[52,10527,10528,10530,10533,10535,10537,10540],{"class":54,"line":55},[52,10529,59],{"class":58},[52,10531,10532],{"class":62},"section",[52,10534,67],{"class":66},[52,10536,70],{"class":58},[52,10538,10539],{"class":73},"\"relative overflow-hidden py-24 px-8\"",[52,10541,77],{"class":58},[52,10543,10544,10546,10548,10550,10552,10554],{"class":54,"line":80},[52,10545,83],{"class":58},[52,10547,63],{"class":62},[52,10549,67],{"class":66},[52,10551,70],{"class":58},[52,10553,74],{"class":73},[52,10555,77],{"class":58},[52,10557,10558,10560,10563],{"class":54,"line":108},[52,10559,2213],{"class":58},[52,10561,10562],{"class":62},"Plasma",[52,10564,105],{"class":58},[52,10566,10567,10569,10571],{"class":54,"line":118},[52,10568,2230],{"class":58},[52,10570,63],{"class":62},[52,10572,77],{"class":58},[52,10574,10575],{"class":54,"line":594},[52,10576,597],{"emptyLinePlaceholder":171},[52,10578,10579,10581,10583,10585,10587,10590,10593,10595],{"class":54,"line":600},[52,10580,83],{"class":58},[52,10582,23],{"class":62},[52,10584,67],{"class":66},[52,10586,70],{"class":58},[52,10588,10589],{"class":73},"\"relative text-4xl font-bold text-white\"",[52,10591,10592],{"class":58},">Section Heading\u003C/",[52,10594,23],{"class":62},[52,10596,77],{"class":58},[52,10598,10599,10601,10603,10605,10607,10610,10613,10615],{"class":54,"line":606},[52,10600,83],{"class":58},[52,10602,15],{"class":62},[52,10604,67],{"class":66},[52,10606,70],{"class":58},[52,10608,10609],{"class":73},"\"relative text-white/80 mt-4\"",[52,10611,10612],{"class":58},">Content above the shader.\u003C/",[52,10614,15],{"class":62},[52,10616,77],{"class":58},[52,10618,10619,10621,10623],{"class":54,"line":653},[52,10620,121],{"class":58},[52,10622,10532],{"class":62},[52,10624,77],{"class":58},[43,10626,10628],{"className":360,"code":10627,"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,10629,10630,10644,10658,10666,10674,10692,10710],{"__ignoreMap":48},[52,10631,10632,10634,10636,10638,10640,10642],{"class":54,"line":55},[52,10633,59],{"class":58},[52,10635,10532],{"class":62},[52,10637,374],{"class":66},[52,10639,70],{"class":231},[52,10641,10539],{"class":73},[52,10643,77],{"class":58},[52,10645,10646,10648,10650,10652,10654,10656],{"class":54,"line":80},[52,10647,83],{"class":58},[52,10649,63],{"class":371},[52,10651,374],{"class":66},[52,10653,70],{"class":231},[52,10655,74],{"class":73},[52,10657,77],{"class":58},[52,10659,10660,10662,10664],{"class":54,"line":108},[52,10661,2213],{"class":58},[52,10663,10562],{"class":371},[52,10665,105],{"class":58},[52,10667,10668,10670,10672],{"class":54,"line":118},[52,10669,2230],{"class":58},[52,10671,63],{"class":371},[52,10673,77],{"class":58},[52,10675,10676,10678,10680,10682,10684,10686,10688,10690],{"class":54,"line":594},[52,10677,83],{"class":58},[52,10679,23],{"class":62},[52,10681,374],{"class":66},[52,10683,70],{"class":231},[52,10685,10589],{"class":73},[52,10687,10592],{"class":58},[52,10689,23],{"class":62},[52,10691,77],{"class":58},[52,10693,10694,10696,10698,10700,10702,10704,10706,10708],{"class":54,"line":600},[52,10695,83],{"class":58},[52,10697,15],{"class":62},[52,10699,374],{"class":66},[52,10701,70],{"class":231},[52,10703,10609],{"class":73},[52,10705,10612],{"class":58},[52,10707,15],{"class":62},[52,10709,77],{"class":58},[52,10711,10712,10714,10716],{"class":54,"line":606},[52,10713,121],{"class":58},[52,10715,10532],{"class":62},[52,10717,77],{"class":58},[43,10719,10721],{"className":419,"code":10720,"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,10722,10723,10737,10751,10759,10767,10785],{"__ignoreMap":48},[52,10724,10725,10727,10729,10731,10733,10735],{"class":54,"line":55},[52,10726,59],{"class":58},[52,10728,10532],{"class":62},[52,10730,67],{"class":66},[52,10732,70],{"class":231},[52,10734,10539],{"class":73},[52,10736,77],{"class":58},[52,10738,10739,10741,10743,10745,10747,10749],{"class":54,"line":80},[52,10740,83],{"class":58},[52,10742,63],{"class":371},[52,10744,67],{"class":66},[52,10746,70],{"class":231},[52,10748,74],{"class":73},[52,10750,77],{"class":58},[52,10752,10753,10755,10757],{"class":54,"line":108},[52,10754,2213],{"class":58},[52,10756,10562],{"class":371},[52,10758,105],{"class":58},[52,10760,10761,10763,10765],{"class":54,"line":118},[52,10762,2230],{"class":58},[52,10764,63],{"class":371},[52,10766,77],{"class":58},[52,10768,10769,10771,10773,10775,10777,10779,10781,10783],{"class":54,"line":594},[52,10770,83],{"class":58},[52,10772,23],{"class":62},[52,10774,67],{"class":66},[52,10776,70],{"class":231},[52,10778,10589],{"class":73},[52,10780,10592],{"class":58},[52,10782,23],{"class":62},[52,10784,77],{"class":58},[52,10786,10787,10789,10791],{"class":54,"line":600},[52,10788,121],{"class":58},[52,10790,10532],{"class":62},[52,10792,77],{"class":58},[43,10794,10795],{"className":419,"code":10720,"language":420,"meta":48,"style":48},[31,10796,10797,10811,10825,10833,10841,10859],{"__ignoreMap":48},[52,10798,10799,10801,10803,10805,10807,10809],{"class":54,"line":55},[52,10800,59],{"class":58},[52,10802,10532],{"class":62},[52,10804,67],{"class":66},[52,10806,70],{"class":231},[52,10808,10539],{"class":73},[52,10810,77],{"class":58},[52,10812,10813,10815,10817,10819,10821,10823],{"class":54,"line":80},[52,10814,83],{"class":58},[52,10816,63],{"class":371},[52,10818,67],{"class":66},[52,10820,70],{"class":231},[52,10822,74],{"class":73},[52,10824,77],{"class":58},[52,10826,10827,10829,10831],{"class":54,"line":108},[52,10828,2213],{"class":58},[52,10830,10562],{"class":371},[52,10832,105],{"class":58},[52,10834,10835,10837,10839],{"class":54,"line":118},[52,10836,2230],{"class":58},[52,10838,63],{"class":371},[52,10840,77],{"class":58},[52,10842,10843,10845,10847,10849,10851,10853,10855,10857],{"class":54,"line":594},[52,10844,83],{"class":58},[52,10846,23],{"class":62},[52,10848,67],{"class":66},[52,10850,70],{"class":231},[52,10852,10589],{"class":73},[52,10854,10592],{"class":58},[52,10856,23],{"class":62},[52,10858,77],{"class":58},[52,10860,10861,10863,10865],{"class":54,"line":600},[52,10862,121],{"class":58},[52,10864,10532],{"class":62},[52,10866,77],{"class":58},[2925,10868,10870],{"id":10869},"card-with-shader-fill","Card with shader fill",[15,10872,10873],{},"A shader used as the visual background of a card or panel:",[217,10875,10876,11036,11182,11309],{":tabs":219},[43,10877,10879],{"className":45,"code":10878,"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,10880,10881,10896,10911,10926,10949,10957,10961,10966,10980,11000,11020,11028],{"__ignoreMap":48},[52,10882,10883,10885,10887,10889,10891,10894],{"class":54,"line":55},[52,10884,59],{"class":58},[52,10886,8060],{"class":62},[52,10888,67],{"class":66},[52,10890,70],{"class":58},[52,10892,10893],{"class":73},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[52,10895,77],{"class":58},[52,10897,10898,10900,10902,10904,10906,10909],{"class":54,"line":80},[52,10899,83],{"class":58},[52,10901,63],{"class":62},[52,10903,67],{"class":66},[52,10905,70],{"class":58},[52,10907,10908],{"class":73},"\"absolute inset-0\"",[52,10910,77],{"class":58},[52,10912,10913,10915,10917,10919,10921,10924],{"class":54,"line":108},[52,10914,2213],{"class":58},[52,10916,1571],{"class":62},[52,10918,1574],{"class":66},[52,10920,70],{"class":58},[52,10922,10923],{"class":73},"\"#1e1b4b\"",[52,10925,105],{"class":58},[52,10927,10928,10930,10932,10935,10937,10940,10942,10944,10947],{"class":54,"line":118},[52,10929,2213],{"class":58},[52,10931,9283],{"class":62},[52,10933,10934],{"class":66}," :intensity",[52,10936,70],{"class":58},[52,10938,10939],{"class":73},"\"0.4\"",[52,10941,1574],{"class":66},[52,10943,70],{"class":58},[52,10945,10946],{"class":73},"\"#6366f1\"",[52,10948,105],{"class":58},[52,10950,10951,10953,10955],{"class":54,"line":594},[52,10952,2230],{"class":58},[52,10954,63],{"class":62},[52,10956,77],{"class":58},[52,10958,10959],{"class":54,"line":600},[52,10960,597],{"emptyLinePlaceholder":171},[52,10962,10963],{"class":54,"line":606},[52,10964,10965],{"class":559}," \u003C!-- Content sits above the shader -->\n",[52,10967,10968,10970,10972,10974,10976,10978],{"class":54,"line":653},[52,10969,83],{"class":58},[52,10971,8060],{"class":62},[52,10973,67],{"class":66},[52,10975,70],{"class":58},[52,10977,10138],{"class":73},[52,10979,77],{"class":58},[52,10981,10982,10984,10986,10988,10990,10993,10996,10998],{"class":54,"line":662},[52,10983,2213],{"class":58},[52,10985,2925],{"class":62},[52,10987,67],{"class":66},[52,10989,70],{"class":58},[52,10991,10992],{"class":73},"\"text-xl font-semibold\"",[52,10994,10995],{"class":58},">Card Title\u003C/",[52,10997,2925],{"class":62},[52,10999,77],{"class":58},[52,11001,11002,11004,11006,11008,11010,11013,11016,11018],{"class":54,"line":671},[52,11003,2213],{"class":58},[52,11005,15],{"class":62},[52,11007,67],{"class":66},[52,11009,70],{"class":58},[52,11011,11012],{"class":73},"\"text-white/70 mt-2\"",[52,11014,11015],{"class":58},">Card description here.\u003C/",[52,11017,15],{"class":62},[52,11019,77],{"class":58},[52,11021,11022,11024,11026],{"class":54,"line":676},[52,11023,2230],{"class":58},[52,11025,8060],{"class":62},[52,11027,77],{"class":58},[52,11029,11030,11032,11034],{"class":54,"line":682},[52,11031,121],{"class":58},[52,11033,8060],{"class":62},[52,11035,77],{"class":58},[43,11037,11039],{"className":360,"code":11038,"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,11040,11041,11055,11069,11083,11108,11116,11130,11148,11166,11174],{"__ignoreMap":48},[52,11042,11043,11045,11047,11049,11051,11053],{"class":54,"line":55},[52,11044,59],{"class":58},[52,11046,8060],{"class":62},[52,11048,374],{"class":66},[52,11050,70],{"class":231},[52,11052,10893],{"class":73},[52,11054,77],{"class":58},[52,11056,11057,11059,11061,11063,11065,11067],{"class":54,"line":80},[52,11058,83],{"class":58},[52,11060,63],{"class":371},[52,11062,374],{"class":66},[52,11064,70],{"class":231},[52,11066,10908],{"class":73},[52,11068,77],{"class":58},[52,11070,11071,11073,11075,11077,11079,11081],{"class":54,"line":108},[52,11072,2213],{"class":58},[52,11074,1571],{"class":371},[52,11076,1574],{"class":66},[52,11078,70],{"class":231},[52,11080,10923],{"class":73},[52,11082,105],{"class":58},[52,11084,11085,11087,11089,11092,11094,11096,11098,11100,11102,11104,11106],{"class":54,"line":118},[52,11086,2213],{"class":58},[52,11088,9283],{"class":371},[52,11090,11091],{"class":66}," intensity",[52,11093,70],{"class":231},[52,11095,723],{"class":58},[52,11097,5737],{"class":371},[52,11099,2577],{"class":58},[52,11101,5550],{"class":66},[52,11103,70],{"class":231},[52,11105,10946],{"class":73},[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,11128],{"class":54,"line":600},[52,11119,83],{"class":58},[52,11121,8060],{"class":62},[52,11123,374],{"class":66},[52,11125,70],{"class":231},[52,11127,10138],{"class":73},[52,11129,77],{"class":58},[52,11131,11132,11134,11136,11138,11140,11142,11144,11146],{"class":54,"line":606},[52,11133,2213],{"class":58},[52,11135,2925],{"class":62},[52,11137,374],{"class":66},[52,11139,70],{"class":231},[52,11141,10992],{"class":73},[52,11143,10995],{"class":58},[52,11145,2925],{"class":62},[52,11147,77],{"class":58},[52,11149,11150,11152,11154,11156,11158,11160,11162,11164],{"class":54,"line":653},[52,11151,2213],{"class":58},[52,11153,15],{"class":62},[52,11155,374],{"class":66},[52,11157,70],{"class":231},[52,11159,11012],{"class":73},[52,11161,11015],{"class":58},[52,11163,15],{"class":62},[52,11165,77],{"class":58},[52,11167,11168,11170,11172],{"class":54,"line":662},[52,11169,2230],{"class":58},[52,11171,8060],{"class":62},[52,11173,77],{"class":58},[52,11175,11176,11178,11180],{"class":54,"line":671},[52,11177,121],{"class":58},[52,11179,8060],{"class":62},[52,11181,77],{"class":58},[43,11183,11185],{"className":419,"code":11184,"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,11186,11187,11201,11215,11229,11253,11261,11275,11293,11301],{"__ignoreMap":48},[52,11188,11189,11191,11193,11195,11197,11199],{"class":54,"line":55},[52,11190,59],{"class":58},[52,11192,8060],{"class":62},[52,11194,67],{"class":66},[52,11196,70],{"class":231},[52,11198,10893],{"class":73},[52,11200,77],{"class":58},[52,11202,11203,11205,11207,11209,11211,11213],{"class":54,"line":80},[52,11204,83],{"class":58},[52,11206,63],{"class":371},[52,11208,67],{"class":66},[52,11210,70],{"class":231},[52,11212,10908],{"class":73},[52,11214,77],{"class":58},[52,11216,11217,11219,11221,11223,11225,11227],{"class":54,"line":108},[52,11218,2213],{"class":58},[52,11220,1571],{"class":371},[52,11222,1574],{"class":66},[52,11224,70],{"class":231},[52,11226,10923],{"class":73},[52,11228,105],{"class":58},[52,11230,11231,11233,11235,11237,11239,11241,11243,11245,11247,11249,11251],{"class":54,"line":118},[52,11232,2213],{"class":58},[52,11234,9283],{"class":371},[52,11236,11091],{"class":66},[52,11238,70],{"class":231},[52,11240,723],{"class":58},[52,11242,5737],{"class":371},[52,11244,2577],{"class":58},[52,11246,5550],{"class":66},[52,11248,70],{"class":231},[52,11250,10946],{"class":73},[52,11252,105],{"class":58},[52,11254,11255,11257,11259],{"class":54,"line":594},[52,11256,2230],{"class":58},[52,11258,63],{"class":371},[52,11260,77],{"class":58},[52,11262,11263,11265,11267,11269,11271,11273],{"class":54,"line":600},[52,11264,83],{"class":58},[52,11266,8060],{"class":62},[52,11268,67],{"class":66},[52,11270,70],{"class":231},[52,11272,10138],{"class":73},[52,11274,77],{"class":58},[52,11276,11277,11279,11281,11283,11285,11287,11289,11291],{"class":54,"line":606},[52,11278,2213],{"class":58},[52,11280,2925],{"class":62},[52,11282,67],{"class":66},[52,11284,70],{"class":231},[52,11286,10992],{"class":73},[52,11288,10995],{"class":58},[52,11290,2925],{"class":62},[52,11292,77],{"class":58},[52,11294,11295,11297,11299],{"class":54,"line":653},[52,11296,2230],{"class":58},[52,11298,8060],{"class":62},[52,11300,77],{"class":58},[52,11302,11303,11305,11307],{"class":54,"line":662},[52,11304,121],{"class":58},[52,11306,8060],{"class":62},[52,11308,77],{"class":58},[43,11310,11311],{"className":419,"code":11184,"language":420,"meta":48,"style":48},[31,11312,11313,11327,11341,11355,11379,11387,11401,11419,11427],{"__ignoreMap":48},[52,11314,11315,11317,11319,11321,11323,11325],{"class":54,"line":55},[52,11316,59],{"class":58},[52,11318,8060],{"class":62},[52,11320,67],{"class":66},[52,11322,70],{"class":231},[52,11324,10893],{"class":73},[52,11326,77],{"class":58},[52,11328,11329,11331,11333,11335,11337,11339],{"class":54,"line":80},[52,11330,83],{"class":58},[52,11332,63],{"class":371},[52,11334,67],{"class":66},[52,11336,70],{"class":231},[52,11338,10908],{"class":73},[52,11340,77],{"class":58},[52,11342,11343,11345,11347,11349,11351,11353],{"class":54,"line":108},[52,11344,2213],{"class":58},[52,11346,1571],{"class":371},[52,11348,1574],{"class":66},[52,11350,70],{"class":231},[52,11352,10923],{"class":73},[52,11354,105],{"class":58},[52,11356,11357,11359,11361,11363,11365,11367,11369,11371,11373,11375,11377],{"class":54,"line":118},[52,11358,2213],{"class":58},[52,11360,9283],{"class":371},[52,11362,11091],{"class":66},[52,11364,70],{"class":231},[52,11366,723],{"class":58},[52,11368,5737],{"class":371},[52,11370,2577],{"class":58},[52,11372,5550],{"class":66},[52,11374,70],{"class":231},[52,11376,10946],{"class":73},[52,11378,105],{"class":58},[52,11380,11381,11383,11385],{"class":54,"line":594},[52,11382,2230],{"class":58},[52,11384,63],{"class":371},[52,11386,77],{"class":58},[52,11388,11389,11391,11393,11395,11397,11399],{"class":54,"line":600},[52,11390,83],{"class":58},[52,11392,8060],{"class":62},[52,11394,67],{"class":66},[52,11396,70],{"class":231},[52,11398,10138],{"class":73},[52,11400,77],{"class":58},[52,11402,11403,11405,11407,11409,11411,11413,11415,11417],{"class":54,"line":606},[52,11404,2213],{"class":58},[52,11406,2925],{"class":62},[52,11408,67],{"class":66},[52,11410,70],{"class":231},[52,11412,10992],{"class":73},[52,11414,10995],{"class":58},[52,11416,2925],{"class":62},[52,11418,77],{"class":58},[52,11420,11421,11423,11425],{"class":54,"line":653},[52,11422,2230],{"class":58},[52,11424,8060],{"class":62},[52,11426,77],{"class":58},[52,11428,11429,11431,11433],{"class":54,"line":662},[52,11430,121],{"class":58},[52,11432,8060],{"class":62},[52,11434,77],{"class":58},[2925,11436,11438],{"id":11437},"inline-content-block","Inline content block",[15,11440,11441],{},"A shader that flows naturally in document layout, like an image or video:",[217,11443,11444,11532,11607,11682],{":tabs":219},[43,11445,11447],{"className":45,"code":11446,"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,11448,11449,11458,11471,11475,11490,11499,11507,11511,11524],{"__ignoreMap":48},[52,11450,11451,11453,11456],{"class":54,"line":55},[52,11452,59],{"class":58},[52,11454,11455],{"class":62},"article",[52,11457,77],{"class":58},[52,11459,11460,11462,11464,11467,11469],{"class":54,"line":80},[52,11461,83],{"class":58},[52,11463,15],{"class":62},[52,11465,11466],{"class":58},">Text before the shader.\u003C/",[52,11468,15],{"class":62},[52,11470,77],{"class":58},[52,11472,11473],{"class":54,"line":108},[52,11474,597],{"emptyLinePlaceholder":171},[52,11476,11477,11479,11481,11483,11485,11488],{"class":54,"line":118},[52,11478,83],{"class":58},[52,11480,63],{"class":62},[52,11482,67],{"class":66},[52,11484,70],{"class":58},[52,11486,11487],{"class":73},"\"w-full aspect-video my-8 rounded-xl\"",[52,11489,77],{"class":58},[52,11491,11492,11494,11497],{"class":54,"line":594},[52,11493,2213],{"class":58},[52,11495,11496],{"class":62},"Swirl",[52,11498,105],{"class":58},[52,11500,11501,11503,11505],{"class":54,"line":600},[52,11502,2230],{"class":58},[52,11504,63],{"class":62},[52,11506,77],{"class":58},[52,11508,11509],{"class":54,"line":606},[52,11510,597],{"emptyLinePlaceholder":171},[52,11512,11513,11515,11517,11520,11522],{"class":54,"line":653},[52,11514,83],{"class":58},[52,11516,15],{"class":62},[52,11518,11519],{"class":58},">Text after the shader continues here.\u003C/",[52,11521,15],{"class":62},[52,11523,77],{"class":58},[52,11525,11526,11528,11530],{"class":54,"line":662},[52,11527,121],{"class":58},[52,11529,11455],{"class":62},[52,11531,77],{"class":58},[43,11533,11535],{"className":360,"code":11534,"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,11536,11537,11545,11557,11571,11579,11587,11599],{"__ignoreMap":48},[52,11538,11539,11541,11543],{"class":54,"line":55},[52,11540,59],{"class":58},[52,11542,11455],{"class":62},[52,11544,77],{"class":58},[52,11546,11547,11549,11551,11553,11555],{"class":54,"line":80},[52,11548,83],{"class":58},[52,11550,15],{"class":62},[52,11552,11466],{"class":58},[52,11554,15],{"class":62},[52,11556,77],{"class":58},[52,11558,11559,11561,11563,11565,11567,11569],{"class":54,"line":108},[52,11560,83],{"class":58},[52,11562,63],{"class":371},[52,11564,374],{"class":66},[52,11566,70],{"class":231},[52,11568,11487],{"class":73},[52,11570,77],{"class":58},[52,11572,11573,11575,11577],{"class":54,"line":118},[52,11574,2213],{"class":58},[52,11576,11496],{"class":371},[52,11578,105],{"class":58},[52,11580,11581,11583,11585],{"class":54,"line":594},[52,11582,2230],{"class":58},[52,11584,63],{"class":371},[52,11586,77],{"class":58},[52,11588,11589,11591,11593,11595,11597],{"class":54,"line":600},[52,11590,83],{"class":58},[52,11592,15],{"class":62},[52,11594,11519],{"class":58},[52,11596,15],{"class":62},[52,11598,77],{"class":58},[52,11600,11601,11603,11605],{"class":54,"line":606},[52,11602,121],{"class":58},[52,11604,11455],{"class":62},[52,11606,77],{"class":58},[43,11608,11610],{"className":419,"code":11609,"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,11611,11612,11620,11632,11646,11654,11662,11674],{"__ignoreMap":48},[52,11613,11614,11616,11618],{"class":54,"line":55},[52,11615,59],{"class":58},[52,11617,11455],{"class":62},[52,11619,77],{"class":58},[52,11621,11622,11624,11626,11628,11630],{"class":54,"line":80},[52,11623,83],{"class":58},[52,11625,15],{"class":62},[52,11627,11466],{"class":58},[52,11629,15],{"class":62},[52,11631,77],{"class":58},[52,11633,11634,11636,11638,11640,11642,11644],{"class":54,"line":108},[52,11635,83],{"class":58},[52,11637,63],{"class":371},[52,11639,67],{"class":66},[52,11641,70],{"class":231},[52,11643,11487],{"class":73},[52,11645,77],{"class":58},[52,11647,11648,11650,11652],{"class":54,"line":118},[52,11649,2213],{"class":58},[52,11651,11496],{"class":371},[52,11653,105],{"class":58},[52,11655,11656,11658,11660],{"class":54,"line":594},[52,11657,2230],{"class":58},[52,11659,63],{"class":371},[52,11661,77],{"class":58},[52,11663,11664,11666,11668,11670,11672],{"class":54,"line":600},[52,11665,83],{"class":58},[52,11667,15],{"class":62},[52,11669,11519],{"class":58},[52,11671,15],{"class":62},[52,11673,77],{"class":58},[52,11675,11676,11678,11680],{"class":54,"line":606},[52,11677,121],{"class":58},[52,11679,11455],{"class":62},[52,11681,77],{"class":58},[43,11683,11684],{"className":419,"code":11609,"language":420,"meta":48,"style":48},[31,11685,11686,11694,11706,11720,11728,11736,11748],{"__ignoreMap":48},[52,11687,11688,11690,11692],{"class":54,"line":55},[52,11689,59],{"class":58},[52,11691,11455],{"class":62},[52,11693,77],{"class":58},[52,11695,11696,11698,11700,11702,11704],{"class":54,"line":80},[52,11697,83],{"class":58},[52,11699,15],{"class":62},[52,11701,11466],{"class":58},[52,11703,15],{"class":62},[52,11705,77],{"class":58},[52,11707,11708,11710,11712,11714,11716,11718],{"class":54,"line":108},[52,11709,83],{"class":58},[52,11711,63],{"class":371},[52,11713,67],{"class":66},[52,11715,70],{"class":231},[52,11717,11487],{"class":73},[52,11719,77],{"class":58},[52,11721,11722,11724,11726],{"class":54,"line":118},[52,11723,2213],{"class":58},[52,11725,11496],{"class":371},[52,11727,105],{"class":58},[52,11729,11730,11732,11734],{"class":54,"line":594},[52,11731,2230],{"class":58},[52,11733,63],{"class":371},[52,11735,77],{"class":58},[52,11737,11738,11740,11742,11744,11746],{"class":54,"line":600},[52,11739,83],{"class":58},[52,11741,15],{"class":62},[52,11743,11519],{"class":58},[52,11745,15],{"class":62},[52,11747,77],{"class":58},[52,11749,11750,11752,11754],{"class":54,"line":606},[52,11751,121],{"class":58},[52,11753,11455],{"class":62},[52,11755,77],{"class":58},[23,11757,11759],{"id":11758},"layering-content-over-shaders","Layering content over shaders",[2925,11761,11763],{"id":11762},"pointer-events","Pointer events",[15,11765,11766,11767,11770],{},"Canvases capture all pointer events by default. Add ",[31,11768,11769],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[217,11772,11773,11809,11844,11878],{":tabs":219},[43,11774,11776],{"className":45,"code":11775,"language":47,"meta":48,"style":48},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[31,11777,11778,11793,11801],{"__ignoreMap":48},[52,11779,11780,11782,11784,11786,11788,11791],{"class":54,"line":55},[52,11781,59],{"class":58},[52,11783,63],{"class":62},[52,11785,67],{"class":66},[52,11787,70],{"class":58},[52,11789,11790],{"class":73},"\"absolute inset-0 pointer-events-none\"",[52,11792,77],{"class":58},[52,11794,11795,11797,11799],{"class":54,"line":80},[52,11796,83],{"class":58},[52,11798,10110],{"class":62},[52,11800,105],{"class":58},[52,11802,11803,11805,11807],{"class":54,"line":108},[52,11804,121],{"class":58},[52,11806,63],{"class":62},[52,11808,77],{"class":58},[43,11810,11812],{"className":360,"code":11811,"language":362,"meta":48,"style":48},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[31,11813,11814,11828,11836],{"__ignoreMap":48},[52,11815,11816,11818,11820,11822,11824,11826],{"class":54,"line":55},[52,11817,59],{"class":58},[52,11819,63],{"class":371},[52,11821,374],{"class":66},[52,11823,70],{"class":231},[52,11825,11790],{"class":73},[52,11827,77],{"class":58},[52,11829,11830,11832,11834],{"class":54,"line":80},[52,11831,83],{"class":58},[52,11833,10110],{"class":371},[52,11835,105],{"class":58},[52,11837,11838,11840,11842],{"class":54,"line":108},[52,11839,121],{"class":58},[52,11841,63],{"class":371},[52,11843,77],{"class":58},[43,11845,11846],{"className":419,"code":11775,"language":420,"meta":48,"style":48},[31,11847,11848,11862,11870],{"__ignoreMap":48},[52,11849,11850,11852,11854,11856,11858,11860],{"class":54,"line":55},[52,11851,59],{"class":58},[52,11853,63],{"class":371},[52,11855,67],{"class":66},[52,11857,70],{"class":231},[52,11859,11790],{"class":73},[52,11861,77],{"class":58},[52,11863,11864,11866,11868],{"class":54,"line":80},[52,11865,83],{"class":58},[52,11867,10110],{"class":371},[52,11869,105],{"class":58},[52,11871,11872,11874,11876],{"class":54,"line":108},[52,11873,121],{"class":58},[52,11875,63],{"class":371},[52,11877,77],{"class":58},[43,11879,11880],{"className":419,"code":11775,"language":420,"meta":48,"style":48},[31,11881,11882,11896,11904],{"__ignoreMap":48},[52,11883,11884,11886,11888,11890,11892,11894],{"class":54,"line":55},[52,11885,59],{"class":58},[52,11887,63],{"class":371},[52,11889,67],{"class":66},[52,11891,70],{"class":231},[52,11893,11790],{"class":73},[52,11895,77],{"class":58},[52,11897,11898,11900,11902],{"class":54,"line":80},[52,11899,83],{"class":58},[52,11901,10110],{"class":371},[52,11903,105],{"class":58},[52,11905,11906,11908,11910],{"class":54,"line":108},[52,11907,121],{"class":58},[52,11909,63],{"class":371},[52,11911,77],{"class":58},[15,11913,11914,11915,1850,11917,11920,11921,11923],{},"Interactive effects like ",[31,11916,113],{},[31,11918,11919],{},"CursorRipples"," still track global mouse position even with ",[31,11922,11769],{}," — they listen on the window rather than the canvas element.",[2925,11925,11927],{"id":11926},"stacking-context-and-z-index","Stacking context and z-index",[15,11929,11930,11933,11934,11936,11937,1540],{},[31,11931,11932],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[31,11935,10514],{}," (or similar) and a higher ",[31,11938,11932],{},[43,11940,11942],{"className":10372,"code":11941,"language":10374,"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,11943,11944,11959,11964,11982,11987,12006],{"__ignoreMap":48},[52,11945,11946,11948,11950,11952,11954,11957],{"class":54,"line":55},[52,11947,59],{"class":58},[52,11949,8060],{"class":62},[52,11951,67],{"class":66},[52,11953,70],{"class":58},[52,11955,11956],{"class":73},"\"relative\"",[52,11958,77],{"class":58},[52,11960,11961],{"class":54,"line":80},[52,11962,11963],{"class":559}," \u003C!-- canvas at z-0 -->\n",[52,11965,11966,11968,11970,11972,11974,11976,11978,11980],{"class":54,"line":108},[52,11967,83],{"class":58},[52,11969,10383],{"class":62},[52,11971,67],{"class":66},[52,11973,70],{"class":58},[52,11975,10908],{"class":73},[52,11977,10400],{"class":58},[52,11979,10383],{"class":62},[52,11981,77],{"class":58},[52,11983,11984],{"class":54,"line":118},[52,11985,11986],{"class":559}," \u003C!-- content above canvas -->\n",[52,11988,11989,11991,11993,11995,11997,11999,12002,12004],{"class":54,"line":594},[52,11990,83],{"class":58},[52,11992,8060],{"class":62},[52,11994,67],{"class":66},[52,11996,70],{"class":58},[52,11998,10138],{"class":73},[52,12000,12001],{"class":58},">I appear above the canvas\u003C/",[52,12003,8060],{"class":62},[52,12005,77],{"class":58},[52,12007,12008,12010,12012],{"class":54,"line":600},[52,12009,121],{"class":58},[52,12011,8060],{"class":62},[52,12013,77],{"class":58},[23,12015,12017],{"id":12016},"responsive-sizing","Responsive sizing",[15,12019,12020],{},"Shaders responds to any CSS-based resize:",[217,12022,12023,12144,12179,12214],{":tabs":219},[43,12024,12026],{"className":45,"code":12025,"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,12027,12028,12033,12048,12056,12064,12068,12073,12088,12096,12104,12108,12113,12128,12136],{"__ignoreMap":48},[52,12029,12030],{"class":54,"line":55},[52,12031,12032],{"class":559},"\u003C!-- Different heights at breakpoints -->\n",[52,12034,12035,12037,12039,12041,12043,12046],{"class":54,"line":80},[52,12036,59],{"class":58},[52,12038,63],{"class":62},[52,12040,67],{"class":66},[52,12042,70],{"class":58},[52,12044,12045],{"class":73},"\"w-full h-48 md:h-72 lg:h-screen\"",[52,12047,77],{"class":58},[52,12049,12050,12052,12054],{"class":54,"line":108},[52,12051,83],{"class":58},[52,12053,86],{"class":62},[52,12055,105],{"class":58},[52,12057,12058,12060,12062],{"class":54,"line":118},[52,12059,121],{"class":58},[52,12061,63],{"class":62},[52,12063,77],{"class":58},[52,12065,12066],{"class":54,"line":594},[52,12067,597],{"emptyLinePlaceholder":171},[52,12069,12070],{"class":54,"line":600},[52,12071,12072],{"class":559},"\u003C!-- Aspect ratio preserving at any width -->\n",[52,12074,12075,12077,12079,12081,12083,12086],{"class":54,"line":606},[52,12076,59],{"class":58},[52,12078,63],{"class":62},[52,12080,67],{"class":66},[52,12082,70],{"class":58},[52,12084,12085],{"class":73},"\"w-full aspect-square md:aspect-video\"",[52,12087,77],{"class":58},[52,12089,12090,12092,12094],{"class":54,"line":653},[52,12091,83],{"class":58},[52,12093,11496],{"class":62},[52,12095,105],{"class":58},[52,12097,12098,12100,12102],{"class":54,"line":662},[52,12099,121],{"class":58},[52,12101,63],{"class":62},[52,12103,77],{"class":58},[52,12105,12106],{"class":54,"line":671},[52,12107,597],{"emptyLinePlaceholder":171},[52,12109,12110],{"class":54,"line":676},[52,12111,12112],{"class":559},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[52,12114,12115,12117,12119,12121,12123,12126],{"class":54,"line":682},[52,12116,59],{"class":58},[52,12118,63],{"class":62},[52,12120,67],{"class":66},[52,12122,70],{"class":58},[52,12124,12125],{"class":73},"\"w-full h-[100dvh]\"",[52,12127,77],{"class":58},[52,12129,12130,12132,12134],{"class":54,"line":698},[52,12131,83],{"class":58},[52,12133,10110],{"class":62},[52,12135,105],{"class":58},[52,12137,12138,12140,12142],{"class":54,"line":707},[52,12139,121],{"class":58},[52,12141,63],{"class":62},[52,12143,77],{"class":58},[43,12145,12147],{"className":360,"code":12146,"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,12148,12149,12163,12171],{"__ignoreMap":48},[52,12150,12151,12153,12155,12157,12159,12161],{"class":54,"line":55},[52,12152,59],{"class":58},[52,12154,63],{"class":371},[52,12156,374],{"class":66},[52,12158,70],{"class":231},[52,12160,12045],{"class":73},[52,12162,77],{"class":58},[52,12164,12165,12167,12169],{"class":54,"line":80},[52,12166,83],{"class":58},[52,12168,86],{"class":371},[52,12170,105],{"class":58},[52,12172,12173,12175,12177],{"class":54,"line":108},[52,12174,121],{"class":58},[52,12176,63],{"class":371},[52,12178,77],{"class":58},[43,12180,12182],{"className":419,"code":12181,"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,12183,12184,12198,12206],{"__ignoreMap":48},[52,12185,12186,12188,12190,12192,12194,12196],{"class":54,"line":55},[52,12187,59],{"class":58},[52,12189,63],{"class":371},[52,12191,67],{"class":66},[52,12193,70],{"class":231},[52,12195,12045],{"class":73},[52,12197,77],{"class":58},[52,12199,12200,12202,12204],{"class":54,"line":80},[52,12201,83],{"class":58},[52,12203,86],{"class":371},[52,12205,105],{"class":58},[52,12207,12208,12210,12212],{"class":54,"line":108},[52,12209,121],{"class":58},[52,12211,63],{"class":371},[52,12213,77],{"class":58},[43,12215,12216],{"className":419,"code":12181,"language":420,"meta":48,"style":48},[31,12217,12218,12232,12240],{"__ignoreMap":48},[52,12219,12220,12222,12224,12226,12228,12230],{"class":54,"line":55},[52,12221,59],{"class":58},[52,12223,63],{"class":371},[52,12225,67],{"class":66},[52,12227,70],{"class":231},[52,12229,12045],{"class":73},[52,12231,77],{"class":58},[52,12233,12234,12236,12238],{"class":54,"line":80},[52,12235,83],{"class":58},[52,12237,86],{"class":371},[52,12239,105],{"class":58},[52,12241,12242,12244,12246],{"class":54,"line":108},[52,12243,121],{"class":58},[52,12245,63],{"class":371},[52,12247,77],{"class":58},[23,12249,12251],{"id":12250},"other-css-properties","Other CSS properties",[15,12253,12254],{},"The canvas element is fully styleable with standard CSS:",[217,12256,12257,12378,12413,12448],{":tabs":219},[43,12258,12260],{"className":45,"code":12259,"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,12261,12262,12267,12282,12290,12298,12302,12307,12322,12330,12338,12342,12347,12362,12370],{"__ignoreMap":48},[52,12263,12264],{"class":54,"line":55},[52,12265,12266],{"class":559},"\u003C!-- Rounded with border -->\n",[52,12268,12269,12271,12273,12275,12277,12280],{"class":54,"line":80},[52,12270,59],{"class":58},[52,12272,63],{"class":62},[52,12274,67],{"class":66},[52,12276,70],{"class":58},[52,12278,12279],{"class":73},"\"rounded-2xl border border-white/10 w-full h-48\"",[52,12281,77],{"class":58},[52,12283,12284,12286,12288],{"class":54,"line":108},[52,12285,83],{"class":58},[52,12287,86],{"class":62},[52,12289,105],{"class":58},[52,12291,12292,12294,12296],{"class":54,"line":118},[52,12293,121],{"class":58},[52,12295,63],{"class":62},[52,12297,77],{"class":58},[52,12299,12300],{"class":54,"line":594},[52,12301,597],{"emptyLinePlaceholder":171},[52,12303,12304],{"class":54,"line":600},[52,12305,12306],{"class":559},"\u003C!-- Drop shadow -->\n",[52,12308,12309,12311,12313,12315,12317,12320],{"class":54,"line":606},[52,12310,59],{"class":58},[52,12312,63],{"class":62},[52,12314,67],{"class":66},[52,12316,70],{"class":58},[52,12318,12319],{"class":73},"\"shadow-2xl shadow-indigo-500/30 rounded-xl w-64 h-64\"",[52,12321,77],{"class":58},[52,12323,12324,12326,12328],{"class":54,"line":653},[52,12325,83],{"class":58},[52,12327,10562],{"class":62},[52,12329,105],{"class":58},[52,12331,12332,12334,12336],{"class":54,"line":662},[52,12333,121],{"class":58},[52,12335,63],{"class":62},[52,12337,77],{"class":58},[52,12339,12340],{"class":54,"line":671},[52,12341,597],{"emptyLinePlaceholder":171},[52,12343,12344],{"class":54,"line":676},[52,12345,12346],{"class":559},"\u003C!-- CSS blur (applied after GPU render) -->\n",[52,12348,12349,12351,12353,12355,12357,12360],{"class":54,"line":682},[52,12350,59],{"class":58},[52,12352,63],{"class":62},[52,12354,67],{"class":66},[52,12356,70],{"class":58},[52,12358,12359],{"class":73},"\"blur-sm w-full h-32\"",[52,12361,77],{"class":58},[52,12363,12364,12366,12368],{"class":54,"line":698},[52,12365,83],{"class":58},[52,12367,86],{"class":62},[52,12369,105],{"class":58},[52,12371,12372,12374,12376],{"class":54,"line":707},[52,12373,121],{"class":58},[52,12375,63],{"class":62},[52,12377,77],{"class":58},[43,12379,12381],{"className":360,"code":12380,"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,12382,12383,12397,12405],{"__ignoreMap":48},[52,12384,12385,12387,12389,12391,12393,12395],{"class":54,"line":55},[52,12386,59],{"class":58},[52,12388,63],{"class":371},[52,12390,374],{"class":66},[52,12392,70],{"class":231},[52,12394,12279],{"class":73},[52,12396,77],{"class":58},[52,12398,12399,12401,12403],{"class":54,"line":80},[52,12400,83],{"class":58},[52,12402,86],{"class":371},[52,12404,105],{"class":58},[52,12406,12407,12409,12411],{"class":54,"line":108},[52,12408,121],{"class":58},[52,12410,63],{"class":371},[52,12412,77],{"class":58},[43,12414,12416],{"className":419,"code":12415,"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,12417,12418,12432,12440],{"__ignoreMap":48},[52,12419,12420,12422,12424,12426,12428,12430],{"class":54,"line":55},[52,12421,59],{"class":58},[52,12423,63],{"class":371},[52,12425,67],{"class":66},[52,12427,70],{"class":231},[52,12429,12279],{"class":73},[52,12431,77],{"class":58},[52,12433,12434,12436,12438],{"class":54,"line":80},[52,12435,83],{"class":58},[52,12437,86],{"class":371},[52,12439,105],{"class":58},[52,12441,12442,12444,12446],{"class":54,"line":108},[52,12443,121],{"class":58},[52,12445,63],{"class":371},[52,12447,77],{"class":58},[43,12449,12450],{"className":419,"code":12415,"language":420,"meta":48,"style":48},[31,12451,12452,12466,12474],{"__ignoreMap":48},[52,12453,12454,12456,12458,12460,12462,12464],{"class":54,"line":55},[52,12455,59],{"class":58},[52,12457,63],{"class":371},[52,12459,67],{"class":66},[52,12461,70],{"class":231},[52,12463,12279],{"class":73},[52,12465,77],{"class":58},[52,12467,12468,12470,12472],{"class":54,"line":80},[52,12469,83],{"class":58},[52,12471,86],{"class":371},[52,12473,105],{"class":58},[52,12475,12476,12478,12480],{"class":54,"line":108},[52,12477,121],{"class":58},[52,12479,63],{"class":371},[52,12481,77],{"class":58},[156,12483,12484],{},"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":12486},[12487,12488,12489,12495,12499,12500],{"id":9749,"depth":80,"text":9750},{"id":543,"depth":80,"text":544},{"id":10068,"depth":80,"text":10069,"children":12490},[12491,12492,12493,12494],{"id":10072,"depth":108,"text":10073},{"id":10507,"depth":108,"text":10508},{"id":10869,"depth":108,"text":10870},{"id":11437,"depth":108,"text":11438},{"id":11758,"depth":80,"text":11759,"children":12496},[12497,12498],{"id":11762,"depth":108,"text":11763},{"id":11926,"depth":108,"text":11927},{"id":12016,"depth":80,"text":12017},{"id":12250,"depth":80,"text":12251},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1480,"description":12501},"docs/guide/5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":12508,"title":12509,"body":12510,"category":7723,"description":14560,"exclude":167,"extension":168,"forceFramework":167,"icon":14561,"meta":14562,"navigation":171,"path":14563,"seo":14564,"stem":14565,"__hash__":14566},"guide/docs/guide/6.transforms.md","Transforms",{"type":8,"value":12511,"toc":14552},[12512,12515,12522,12529,12600,12604,12610,12791,12795,13275,13278,13282,13289,13309,13381,13385,13391,13444,13515,13519,13522,14520,14532,14536,14543,14546,14549],[11,12513,12509],{"id":12514},"transforms",[15,12516,12517,12518,12521],{},"Every component accepts a ",[31,12519,12520],{},"transform"," prop that moves, rotates, and scales it in UV space — the coordinate system the shader uses to sample its output.",[15,12523,12524,12525,12528],{},"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,12526,12527],{},"samples its coordinate system",", so the effect itself shifts without touching the DOM.",[43,12530,12532],{"className":45,"code":12531,"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,12533,12534,12539,12559,12563,12568,12576,12592],{"__ignoreMap":48},[52,12535,12536],{"class":54,"line":55},[52,12537,12538],{"class":559},"\u003C!-- CSS transform: moves the DOM element -->\n",[52,12540,12541,12543,12545,12547,12549,12552,12555,12557],{"class":54,"line":80},[52,12542,59],{"class":58},[52,12544,63],{"class":62},[52,12546,67],{"class":66},[52,12548,70],{"class":58},[52,12550,12551],{"class":73},"\"-translate-x-4\"",[52,12553,12554],{"class":58},">...\u003C/",[52,12556,63],{"class":62},[52,12558,77],{"class":58},[52,12560,12561],{"class":54,"line":108},[52,12562,597],{"emptyLinePlaceholder":171},[52,12564,12565],{"class":54,"line":118},[52,12566,12567],{"class":559},"\u003C!-- Shader transform: shifts content within the canvas -->\n",[52,12569,12570,12572,12574],{"class":54,"line":594},[52,12571,59],{"class":58},[52,12573,63],{"class":62},[52,12575,77],{"class":58},[52,12577,12578,12580,12582,12585,12587,12590],{"class":54,"line":600},[52,12579,83],{"class":58},[52,12581,86],{"class":62},[52,12583,12584],{"class":66}," :transform",[52,12586,70],{"class":58},[52,12588,12589],{"class":73},"\"{ offsetX: -0.2 }\"",[52,12591,105],{"class":58},[52,12593,12594,12596,12598],{"class":54,"line":606},[52,12595,121],{"class":58},[52,12597,63],{"class":62},[52,12599,77],{"class":58},[23,12601,12603],{"id":12602},"transform-properties","Transform properties",[15,12605,12606,12607,12609],{},"Pass a partial object to the ",[31,12608,12520],{}," prop — only include what you want to change:",[1780,12611,12612,12627],{},[1783,12613,12614],{},[1786,12615,12616,12619,12622,12625],{},[1789,12617,12618],{},"Prop",[1789,12620,12621],{},"Type",[1789,12623,12624],{},"Default",[1789,12626,1794],{},[1796,12628,12629,12661,12683,12700,12724,12748,12772],{},[1786,12630,12631,12636,12641,12645],{},[1801,12632,12633],{},[31,12634,12635],{},"offsetX",[1801,12637,12638],{},[31,12639,12640],{},"number",[1801,12642,12643],{},[31,12644,6161],{},[1801,12646,12647,12648,1536,12651,12654,12655,12657,12658,12660],{},"Horizontal shift. ",[31,12649,12650],{},"-1",[31,12652,12653],{},"+1",". ",[31,12656,12650],{}," shifts content fully left, ",[31,12659,12653],{}," fully right.",[1786,12662,12663,12668,12672,12676],{},[1801,12664,12665],{},[31,12666,12667],{},"offsetY",[1801,12669,12670],{},[31,12671,12640],{},[1801,12673,12674],{},[31,12675,6161],{},[1801,12677,12678,12679,1536,12681,6978],{},"Vertical shift. ",[31,12680,12650],{},[31,12682,12653],{},[1786,12684,12685,12689,12693,12697],{},[1801,12686,12687],{},[31,12688,9326],{},[1801,12690,12691],{},[31,12692,12640],{},[1801,12694,12695],{},[31,12696,6161],{},[1801,12698,12699],{},"Rotation in degrees. Positive = clockwise.",[1786,12701,12702,12707,12711,12715],{},[1801,12703,12704],{},[31,12705,12706],{},"scale",[1801,12708,12709],{},[31,12710,12640],{},[1801,12712,12713],{},[31,12714,6165],{},[1801,12716,12717,12718,12720,12721,12723],{},"Scale multiplier. ",[31,12719,5241],{}," = half size, ",[31,12722,4701],{}," = double.",[1786,12725,12726,12731,12735,12739],{},[1801,12727,12728],{},[31,12729,12730],{},"anchorX",[1801,12732,12733],{},[31,12734,12640],{},[1801,12736,12737],{},[31,12738,5241],{},[1801,12740,12741,12742,12744,12745,12747],{},"Horizontal pivot point for rotation and scale. ",[31,12743,6161],{}," = left, ",[31,12746,6165],{}," = right.",[1786,12749,12750,12755,12759,12763],{},[1801,12751,12752],{},[31,12753,12754],{},"anchorY",[1801,12756,12757],{},[31,12758,12640],{},[1801,12760,12761],{},[31,12762,5241],{},[1801,12764,12765,12766,12768,12769,12771],{},"Vertical pivot point. ",[31,12767,6161],{}," = top, ",[31,12770,6165],{}," = bottom.",[1786,12773,12774,12779,12783,12788],{},[1801,12775,12776],{},[31,12777,12778],{},"edges",[1801,12780,12781],{},[31,12782,6549],{},[1801,12784,12785],{},[31,12786,12787],{},"'transparent'",[1801,12789,12790],{},"What to show when the transform pushes content out of bounds. See below.",[23,12792,12794],{"id":12793},"basic-usage","Basic usage",[217,12796,12797,12892,12992,13081,13169],{":tabs":1543},[43,12798,12800],{"className":45,"code":12799,"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,12801,12802,12816,12821,12836,12840,12845,12860,12864,12869,12884],{"__ignoreMap":48},[52,12803,12804,12806,12808,12810,12812,12814],{"class":54,"line":55},[52,12805,59],{"class":58},[52,12807,63],{"class":62},[52,12809,67],{"class":66},[52,12811,70],{"class":58},[52,12813,319],{"class":73},[52,12815,77],{"class":58},[52,12817,12818],{"class":54,"line":80},[52,12819,12820],{"class":559}," \u003C!-- Rotate 45 degrees -->\n",[52,12822,12823,12825,12827,12829,12831,12834],{"class":54,"line":108},[52,12824,83],{"class":58},[52,12826,86],{"class":62},[52,12828,12584],{"class":66},[52,12830,70],{"class":58},[52,12832,12833],{"class":73},"\"{ rotation: 45 }\"",[52,12835,105],{"class":58},[52,12837,12838],{"class":54,"line":118},[52,12839,597],{"emptyLinePlaceholder":171},[52,12841,12842],{"class":54,"line":594},[52,12843,12844],{"class":559}," \u003C!-- Scale up and shift right -->\n",[52,12846,12847,12849,12851,12853,12855,12858],{"class":54,"line":600},[52,12848,83],{"class":58},[52,12850,2216],{"class":62},[52,12852,12584],{"class":66},[52,12854,70],{"class":58},[52,12856,12857],{"class":73},"\"{ scale: 1.5, offsetX: 0.2 }\"",[52,12859,105],{"class":58},[52,12861,12862],{"class":54,"line":606},[52,12863,597],{"emptyLinePlaceholder":171},[52,12865,12866],{"class":54,"line":653},[52,12867,12868],{"class":559}," \u003C!-- Multiple transforms together -->\n",[52,12870,12871,12873,12875,12877,12879,12882],{"class":54,"line":662},[52,12872,83],{"class":58},[52,12874,11496],{"class":62},[52,12876,12584],{"class":66},[52,12878,70],{"class":58},[52,12880,12881],{"class":73},"\"{ rotation: 30, scale: 0.8, offsetY: -0.1 }\"",[52,12883,105],{"class":58},[52,12885,12886,12888,12890],{"class":54,"line":671},[52,12887,121],{"class":58},[52,12889,63],{"class":62},[52,12891,77],{"class":58},[43,12893,12895],{"className":360,"code":12894,"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,12896,12897,12911,12930,12954,12984],{"__ignoreMap":48},[52,12898,12899,12901,12903,12905,12907,12909],{"class":54,"line":55},[52,12900,59],{"class":58},[52,12902,63],{"class":371},[52,12904,374],{"class":66},[52,12906,70],{"class":231},[52,12908,319],{"class":73},[52,12910,77],{"class":58},[52,12912,12913,12915,12917,12920,12922,12925,12927],{"class":54,"line":80},[52,12914,83],{"class":58},[52,12916,86],{"class":371},[52,12918,12919],{"class":66}," transform",[52,12921,70],{"class":231},[52,12923,12924],{"class":58},"{{ rotation: ",[52,12926,1206],{"class":371},[52,12928,12929],{"class":58}," }} />\n",[52,12931,12932,12934,12936,12938,12940,12943,12946,12949,12952],{"class":54,"line":108},[52,12933,83],{"class":58},[52,12935,2216],{"class":371},[52,12937,12919],{"class":66},[52,12939,70],{"class":231},[52,12941,12942],{"class":58},"{{ scale: ",[52,12944,12945],{"class":371},"1.5",[52,12947,12948],{"class":58},", offsetX: ",[52,12950,12951],{"class":371},"0.2",[52,12953,12929],{"class":58},[52,12955,12956,12958,12960,12962,12964,12966,12969,12972,12974,12977,12979,12982],{"class":54,"line":118},[52,12957,83],{"class":58},[52,12959,11496],{"class":371},[52,12961,12919],{"class":66},[52,12963,70],{"class":231},[52,12965,12924],{"class":58},[52,12967,12968],{"class":371},"30",[52,12970,12971],{"class":58},", scale: ",[52,12973,3785],{"class":371},[52,12975,12976],{"class":58},", offsetY: ",[52,12978,8365],{"class":231},[52,12980,12981],{"class":371},"0.1",[52,12983,12929],{"class":58},[52,12985,12986,12988,12990],{"class":54,"line":594},[52,12987,121],{"class":58},[52,12989,63],{"class":371},[52,12991,77],{"class":58},[43,12993,12995],{"className":419,"code":12994,"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,12996,12997,13011,13027,13047,13073],{"__ignoreMap":48},[52,12998,12999,13001,13003,13005,13007,13009],{"class":54,"line":55},[52,13000,59],{"class":58},[52,13002,63],{"class":371},[52,13004,67],{"class":66},[52,13006,70],{"class":231},[52,13008,319],{"class":73},[52,13010,77],{"class":58},[52,13012,13013,13015,13017,13019,13021,13023,13025],{"class":54,"line":80},[52,13014,83],{"class":58},[52,13016,86],{"class":371},[52,13018,12919],{"class":66},[52,13020,70],{"class":231},[52,13022,12924],{"class":58},[52,13024,1206],{"class":371},[52,13026,12929],{"class":58},[52,13028,13029,13031,13033,13035,13037,13039,13041,13043,13045],{"class":54,"line":108},[52,13030,83],{"class":58},[52,13032,2216],{"class":371},[52,13034,12919],{"class":66},[52,13036,70],{"class":231},[52,13038,12942],{"class":58},[52,13040,12945],{"class":371},[52,13042,12948],{"class":58},[52,13044,12951],{"class":371},[52,13046,12929],{"class":58},[52,13048,13049,13051,13053,13055,13057,13059,13061,13063,13065,13067,13069,13071],{"class":54,"line":118},[52,13050,83],{"class":58},[52,13052,11496],{"class":371},[52,13054,12919],{"class":66},[52,13056,70],{"class":231},[52,13058,12924],{"class":58},[52,13060,12968],{"class":371},[52,13062,12971],{"class":58},[52,13064,3785],{"class":371},[52,13066,12976],{"class":58},[52,13068,8365],{"class":231},[52,13070,12981],{"class":371},[52,13072,12929],{"class":58},[52,13074,13075,13077,13079],{"class":54,"line":594},[52,13076,121],{"class":58},[52,13078,63],{"class":371},[52,13080,77],{"class":58},[43,13082,13083],{"className":419,"code":12994,"language":420,"meta":48,"style":48},[31,13084,13085,13099,13115,13135,13161],{"__ignoreMap":48},[52,13086,13087,13089,13091,13093,13095,13097],{"class":54,"line":55},[52,13088,59],{"class":58},[52,13090,63],{"class":371},[52,13092,67],{"class":66},[52,13094,70],{"class":231},[52,13096,319],{"class":73},[52,13098,77],{"class":58},[52,13100,13101,13103,13105,13107,13109,13111,13113],{"class":54,"line":80},[52,13102,83],{"class":58},[52,13104,86],{"class":371},[52,13106,12919],{"class":66},[52,13108,70],{"class":231},[52,13110,12924],{"class":58},[52,13112,1206],{"class":371},[52,13114,12929],{"class":58},[52,13116,13117,13119,13121,13123,13125,13127,13129,13131,13133],{"class":54,"line":108},[52,13118,83],{"class":58},[52,13120,2216],{"class":371},[52,13122,12919],{"class":66},[52,13124,70],{"class":231},[52,13126,12942],{"class":58},[52,13128,12945],{"class":371},[52,13130,12948],{"class":58},[52,13132,12951],{"class":371},[52,13134,12929],{"class":58},[52,13136,13137,13139,13141,13143,13145,13147,13149,13151,13153,13155,13157,13159],{"class":54,"line":118},[52,13138,83],{"class":58},[52,13140,11496],{"class":371},[52,13142,12919],{"class":66},[52,13144,70],{"class":231},[52,13146,12924],{"class":58},[52,13148,12968],{"class":371},[52,13150,12971],{"class":58},[52,13152,3785],{"class":371},[52,13154,12976],{"class":58},[52,13156,8365],{"class":231},[52,13158,12981],{"class":371},[52,13160,12929],{"class":58},[52,13162,13163,13165,13167],{"class":54,"line":594},[52,13164,121],{"class":58},[52,13166,63],{"class":371},[52,13168,77],{"class":58},[43,13170,13172],{"className":222,"code":13171,"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,13173,13174,13188,13192,13197,13206,13211,13221,13225,13230,13234,13242,13246,13259,13263,13267,13271],{"__ignoreMap":48},[52,13175,13176,13178,13180,13182,13184,13186],{"class":54,"line":55},[52,13177,1721],{"class":231},[52,13179,1724],{"class":371},[52,13181,1727],{"class":231},[52,13183,1730],{"class":231},[52,13185,1733],{"class":66},[52,13187,1736],{"class":58},[52,13189,13190],{"class":54,"line":80},[52,13191,1751],{"class":58},[52,13193,13194],{"class":54,"line":108},[52,13195,13196],{"class":58}," {\n",[52,13198,13199,13202,13204],{"class":54,"line":118},[52,13200,13201],{"class":58}," type: ",[52,13203,2126],{"class":73},[52,13205,1746],{"class":58},[52,13207,13208],{"class":54,"line":594},[52,13209,13210],{"class":58}," props: {\n",[52,13212,13213,13216,13218],{"class":54,"line":600},[52,13214,13215],{"class":58}," transform: { rotation: ",[52,13217,1206],{"class":371},[52,13219,13220],{"class":58}," }\n",[52,13222,13223],{"class":54,"line":606},[52,13224,3125],{"class":58},[52,13226,13227],{"class":54,"line":653},[52,13228,13229],{"class":58}," },\n",[52,13231,13232],{"class":54,"line":662},[52,13233,13196],{"class":58},[52,13235,13236,13238,13240],{"class":54,"line":671},[52,13237,13201],{"class":58},[52,13239,2869],{"class":73},[52,13241,1746],{"class":58},[52,13243,13244],{"class":54,"line":676},[52,13245,13210],{"class":58},[52,13247,13248,13251,13253,13255,13257],{"class":54,"line":682},[52,13249,13250],{"class":58}," transform: { scale: ",[52,13252,12945],{"class":371},[52,13254,12948],{"class":58},[52,13256,12951],{"class":371},[52,13258,13220],{"class":58},[52,13260,13261],{"class":54,"line":698},[52,13262,3125],{"class":58},[52,13264,13265],{"class":54,"line":707},[52,13266,3130],{"class":58},[52,13268,13269],{"class":54,"line":2327},[52,13270,1773],{"class":58},[52,13272,13273],{"class":54,"line":7143},[52,13274,1778],{"class":58},[15,13276,13277],{},"You only need to include the properties you want to change — unspecified values stay at their defaults.",[23,13279,13281],{"id":13280},"anchor-point","Anchor point",[15,13283,13284,13285,13288],{},"The anchor point controls where rotation and scale are applied from. The default ",[31,13286,13287],{},"0.5, 0.5"," anchors to the center of the canvas.",[1465,13290,13291,13297,13303],{},[1468,13292,13293,13296],{},[31,13294,13295],{},"{ anchorX: 0, anchorY: 0 }"," — top-left corner",[1468,13298,13299,13302],{},[31,13300,13301],{},"{ anchorX: 0.5, anchorY: 0.5 }"," — center (default)",[1468,13304,13305,13308],{},[31,13306,13307],{},"{ anchorX: 1, anchorY: 1 }"," — bottom-right corner",[43,13310,13312],{"className":45,"code":13311,"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,13313,13314,13319,13333,13337,13342,13357,13361,13366],{"__ignoreMap":48},[52,13315,13316],{"class":54,"line":55},[52,13317,13318],{"class":559},"\u003C!-- Rotates around the center (default) -->\n",[52,13320,13321,13323,13325,13327,13329,13331],{"class":54,"line":80},[52,13322,59],{"class":58},[52,13324,2216],{"class":62},[52,13326,12584],{"class":66},[52,13328,70],{"class":58},[52,13330,12833],{"class":73},[52,13332,105],{"class":58},[52,13334,13335],{"class":54,"line":108},[52,13336,597],{"emptyLinePlaceholder":171},[52,13338,13339],{"class":54,"line":118},[52,13340,13341],{"class":559},"\u003C!-- Rotates around the top-left corner -->\n",[52,13343,13344,13346,13348,13350,13352,13355],{"class":54,"line":594},[52,13345,59],{"class":58},[52,13347,2216],{"class":62},[52,13349,12584],{"class":66},[52,13351,70],{"class":58},[52,13353,13354],{"class":73},"\"{ rotation: 45, anchorX: 0, anchorY: 0 }\"",[52,13356,105],{"class":58},[52,13358,13359],{"class":54,"line":600},[52,13360,597],{"emptyLinePlaceholder":171},[52,13362,13363],{"class":54,"line":606},[52,13364,13365],{"class":559},"\u003C!-- Scales from the top edge -->\n",[52,13367,13368,13370,13372,13374,13376,13379],{"class":54,"line":653},[52,13369,59],{"class":58},[52,13371,86],{"class":62},[52,13373,12584],{"class":66},[52,13375,70],{"class":58},[52,13377,13378],{"class":73},"\"{ scale: 2, anchorY: 0 }\"",[52,13380,105],{"class":58},[23,13382,13384],{"id":13383},"edge-modes","Edge modes",[15,13386,13387,13388,13390],{},"When a transform shifts or scales content beyond the canvas boundaries, the ",[31,13389,12778],{}," property controls what fills the out-of-bounds area:",[1780,13392,13393,13402],{},[1783,13394,13395],{},[1786,13396,13397,13399],{},[1789,13398,1791],{},[1789,13400,13401],{},"Behavior",[1796,13403,13404,13414,13424,13434],{},[1786,13405,13406,13411],{},[1801,13407,13408],{},[31,13409,13410],{},"transparent",[1801,13412,13413],{},"Out-of-bounds pixels are fully transparent (default)",[1786,13415,13416,13421],{},[1801,13417,13418],{},[31,13419,13420],{},"stretch",[1801,13422,13423],{},"The edge pixels repeat to fill",[1786,13425,13426,13431],{},[1801,13427,13428],{},[31,13429,13430],{},"mirror",[1801,13432,13433],{},"Content reflects at the edges like a mirror",[1786,13435,13436,13441],{},[1801,13437,13438],{},[31,13439,13440],{},"wrap",[1801,13442,13443],{},"Content tiles seamlessly",[43,13445,13447],{"className":45,"code":13446,"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,13448,13449,13463,13468,13483,13487,13492,13507],{"__ignoreMap":48},[52,13450,13451,13453,13455,13457,13459,13461],{"class":54,"line":55},[52,13452,59],{"class":58},[52,13454,63],{"class":62},[52,13456,67],{"class":66},[52,13458,70],{"class":58},[52,13460,319],{"class":73},[52,13462,77],{"class":58},[52,13464,13465],{"class":54,"line":80},[52,13466,13467],{"class":559}," \u003C!-- Offset with wrapping — tiles the effect -->\n",[52,13469,13470,13472,13474,13476,13478,13481],{"class":54,"line":108},[52,13471,83],{"class":58},[52,13473,86],{"class":62},[52,13475,12584],{"class":66},[52,13477,70],{"class":58},[52,13479,13480],{"class":73},"\"{ offsetX: 0.3, edges: 'wrap' }\"",[52,13482,105],{"class":58},[52,13484,13485],{"class":54,"line":118},[52,13486,597],{"emptyLinePlaceholder":171},[52,13488,13489],{"class":54,"line":594},[52,13490,13491],{"class":559}," \u003C!-- Offset with mirror — reflects the edge -->\n",[52,13493,13494,13496,13498,13500,13502,13505],{"class":54,"line":600},[52,13495,83],{"class":58},[52,13497,11496],{"class":62},[52,13499,12584],{"class":66},[52,13501,70],{"class":58},[52,13503,13504],{"class":73},"\"{ offsetX: 0.3, edges: 'mirror' }\"",[52,13506,105],{"class":58},[52,13508,13509,13511,13513],{"class":54,"line":606},[52,13510,121],{"class":58},[52,13512,63],{"class":62},[52,13514,77],{"class":58},[23,13516,13518],{"id":13517},"animating-transforms","Animating transforms",[15,13520,13521],{},"Transforms are reactive props — you can bind them to state and animate them:",[217,13523,13524,13749,13978,14139,14353],{":tabs":1543},[43,13525,13527],{"className":45,"code":13526,"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,13528,13529,13539,13550,13554,13571,13579,13583,13595,13610,13633,13646,13650,13661,13665,13669,13684,13692,13696,13704,13718,13733,13741],{"__ignoreMap":48},[52,13530,13531,13533,13535,13537],{"class":54,"line":55},[52,13532,59],{"class":58},[52,13534,2253],{"class":62},[52,13536,2256],{"class":66},[52,13538,77],{"class":58},[52,13540,13541,13543,13546,13548],{"class":54,"line":80},[52,13542,232],{"class":231},[52,13544,13545],{"class":58}," { ref, onMounted, onUnmounted } ",[52,13547,238],{"class":231},[52,13549,2270],{"class":73},[52,13551,13552],{"class":54,"line":108},[52,13553,597],{"emptyLinePlaceholder":171},[52,13555,13556,13558,13561,13563,13565,13567,13569],{"class":54,"line":118},[52,13557,1721],{"class":231},[52,13559,13560],{"class":371}," rotation",[52,13562,1727],{"class":231},[52,13564,2286],{"class":66},[52,13566,2289],{"class":58},[52,13568,6161],{"class":371},[52,13570,2295],{"class":58},[52,13572,13573,13576],{"class":54,"line":594},[52,13574,13575],{"class":231},"let",[52,13577,13578],{"class":58}," animFrame\n",[52,13580,13581],{"class":54,"line":600},[52,13582,597],{"emptyLinePlaceholder":171},[52,13584,13585,13588,13591,13593],{"class":54,"line":606},[52,13586,13587],{"class":66},"onMounted",[52,13589,13590],{"class":58},"(() ",[52,13592,2425],{"class":231},[52,13594,2904],{"class":58},[52,13596,13597,13599,13601,13603,13606,13608],{"class":54,"line":653},[52,13598,2368],{"class":231},[52,13600,9450],{"class":66},[52,13602,1727],{"class":231},[52,13604,13605],{"class":58}," () ",[52,13607,2425],{"class":231},[52,13609,2904],{"class":58},[52,13611,13612,13615,13617,13620,13622,13625,13627,13630],{"class":54,"line":662},[52,13613,13614],{"class":58}," rotation.value ",[52,13616,70],{"class":231},[52,13618,13619],{"class":58}," (rotation.value ",[52,13621,8328],{"class":231},[52,13623,13624],{"class":371}," 0.5",[52,13626,9491],{"class":58},[52,13628,13629],{"class":231},"%",[52,13631,13632],{"class":371}," 360\n",[52,13634,13635,13638,13640,13643],{"class":54,"line":671},[52,13636,13637],{"class":58}," animFrame ",[52,13639,70],{"class":231},[52,13641,13642],{"class":66}," requestAnimationFrame",[52,13644,13645],{"class":58},"(animate)\n",[52,13647,13648],{"class":54,"line":676},[52,13649,2919],{"class":58},[52,13651,13652,13655,13657,13659],{"class":54,"line":682},[52,13653,13654],{"class":58}," animFrame ",[52,13656,70],{"class":231},[52,13658,13642],{"class":66},[52,13660,13645],{"class":58},[52,13662,13663],{"class":54,"line":698},[52,13664,1778],{"class":58},[52,13666,13667],{"class":54,"line":707},[52,13668,597],{"emptyLinePlaceholder":171},[52,13670,13671,13674,13676,13678,13681],{"class":54,"line":2327},[52,13672,13673],{"class":66},"onUnmounted",[52,13675,13590],{"class":58},[52,13677,2425],{"class":231},[52,13679,13680],{"class":66}," cancelAnimationFrame",[52,13682,13683],{"class":58},"(animFrame))\n",[52,13685,13686,13688,13690],{"class":54,"line":7143},[52,13687,121],{"class":58},[52,13689,2253],{"class":62},[52,13691,77],{"class":58},[52,13693,13694],{"class":54,"line":7153},[52,13695,597],{"emptyLinePlaceholder":171},[52,13697,13698,13700,13702],{"class":54,"line":7164},[52,13699,59],{"class":58},[52,13701,2182],{"class":62},[52,13703,77],{"class":58},[52,13705,13706,13708,13710,13712,13714,13716],{"class":54,"line":7169},[52,13707,83],{"class":58},[52,13709,63],{"class":62},[52,13711,67],{"class":66},[52,13713,70],{"class":58},[52,13715,319],{"class":73},[52,13717,77],{"class":58},[52,13719,13720,13722,13724,13726,13728,13731],{"class":54,"line":8491},[52,13721,2213],{"class":58},[52,13723,86],{"class":62},[52,13725,12584],{"class":66},[52,13727,70],{"class":58},[52,13729,13730],{"class":73},"\"{ rotation }\"",[52,13732,105],{"class":58},[52,13734,13735,13737,13739],{"class":54,"line":8496},[52,13736,2230],{"class":58},[52,13738,63],{"class":62},[52,13740,77],{"class":58},[52,13742,13743,13745,13747],{"class":54,"line":9568},[52,13744,121],{"class":58},[52,13746,2182],{"class":62},[52,13748,77],{"class":58},[43,13750,13752],{"className":360,"code":13751,"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,13753,13754,13765,13769,13778,13803,13822,13826,13837,13852,13880,13891,13895,13906,13920,13925,13929,13935,13949,13962,13970,13974],{"__ignoreMap":48},[52,13755,13756,13758,13761,13763],{"class":54,"line":55},[52,13757,232],{"class":231},[52,13759,13760],{"class":58}," { useState, useEffect, useRef } ",[52,13762,238],{"class":231},[52,13764,2350],{"class":73},[52,13766,13767],{"class":54,"line":80},[52,13768,597],{"emptyLinePlaceholder":171},[52,13770,13771,13773,13776],{"class":54,"line":108},[52,13772,2304],{"class":231},[52,13774,13775],{"class":66}," SpinningGradient",[52,13777,2310],{"class":58},[52,13779,13780,13782,13784,13786,13788,13791,13793,13795,13797,13799,13801],{"class":54,"line":118},[52,13781,2368],{"class":231},[52,13783,2371],{"class":58},[52,13785,9326],{"class":371},[52,13787,1881],{"class":58},[52,13789,13790],{"class":371},"setRotation",[52,13792,2382],{"class":58},[52,13794,70],{"class":231},[52,13796,2387],{"class":66},[52,13798,2289],{"class":58},[52,13800,6161],{"class":371},[52,13802,2295],{"class":58},[52,13804,13805,13807,13810,13812,13815,13817,13820],{"class":54,"line":594},[52,13806,2368],{"class":231},[52,13808,13809],{"class":371}," frameRef",[52,13811,1727],{"class":231},[52,13813,13814],{"class":66}," useRef",[52,13816,2289],{"class":58},[52,13818,13819],{"class":371},"null",[52,13821,2295],{"class":58},[52,13823,13824],{"class":54,"line":600},[52,13825,597],{"emptyLinePlaceholder":171},[52,13827,13828,13831,13833,13835],{"class":54,"line":606},[52,13829,13830],{"class":66}," useEffect",[52,13832,13590],{"class":58},[52,13834,2425],{"class":231},[52,13836,2904],{"class":58},[52,13838,13839,13842,13844,13846,13848,13850],{"class":54,"line":653},[52,13840,13841],{"class":231}," const",[52,13843,9450],{"class":66},[52,13845,1727],{"class":231},[52,13847,13605],{"class":58},[52,13849,2425],{"class":231},[52,13851,2904],{"class":58},[52,13853,13854,13857,13859,13862,13864,13867,13869,13871,13873,13875,13878],{"class":54,"line":662},[52,13855,13856],{"class":66}," setRotation",[52,13858,2289],{"class":58},[52,13860,13861],{"class":8319},"r",[52,13863,8322],{"class":231},[52,13865,13866],{"class":58}," (r ",[52,13868,8328],{"class":231},[52,13870,13624],{"class":371},[52,13872,9491],{"class":58},[52,13874,13629],{"class":231},[52,13876,13877],{"class":371}," 360",[52,13879,2295],{"class":58},[52,13881,13882,13885,13887,13889],{"class":54,"line":671},[52,13883,13884],{"class":58}," frameRef.current ",[52,13886,70],{"class":231},[52,13888,13642],{"class":66},[52,13890,13645],{"class":58},[52,13892,13893],{"class":54,"line":676},[52,13894,3130],{"class":58},[52,13896,13897,13900,13902,13904],{"class":54,"line":682},[52,13898,13899],{"class":58}," frameRef.current ",[52,13901,70],{"class":231},[52,13903,13642],{"class":66},[52,13905,13645],{"class":58},[52,13907,13908,13911,13913,13915,13917],{"class":54,"line":698},[52,13909,13910],{"class":231}," return",[52,13912,13605],{"class":58},[52,13914,2425],{"class":231},[52,13916,13680],{"class":66},[52,13918,13919],{"class":58},"(frameRef.current)\n",[52,13921,13922],{"class":54,"line":707},[52,13923,13924],{"class":58}," }, [])\n",[52,13926,13927],{"class":54,"line":2327},[52,13928,597],{"emptyLinePlaceholder":171},[52,13930,13931,13933],{"class":54,"line":7143},[52,13932,2402],{"class":231},[52,13934,2405],{"class":58},[52,13936,13937,13939,13941,13943,13945,13947],{"class":54,"line":7153},[52,13938,2213],{"class":58},[52,13940,63],{"class":371},[52,13942,374],{"class":66},[52,13944,70],{"class":231},[52,13946,319],{"class":73},[52,13948,77],{"class":58},[52,13950,13951,13953,13955,13957,13959],{"class":54,"line":7164},[52,13952,2476],{"class":58},[52,13954,86],{"class":371},[52,13956,12919],{"class":66},[52,13958,70],{"class":231},[52,13960,13961],{"class":58},"{{ rotation }} />\n",[52,13963,13964,13966,13968],{"class":54,"line":7169},[52,13965,2491],{"class":58},[52,13967,63],{"class":371},[52,13969,77],{"class":58},[52,13971,13972],{"class":54,"line":8491},[52,13973,2500],{"class":58},[52,13975,13976],{"class":54,"line":8496},[52,13977,729],{"class":58},[43,13979,13981],{"className":419,"code":13980,"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,13982,13983,13991,13996,14000,14005,14010,14014,14019,14035,14055,14066,14070,14080,14084,14088,14093,14101,14105,14119,14131],{"__ignoreMap":48},[52,13984,13985,13987,13989],{"class":54,"line":55},[52,13986,59],{"class":58},[52,13988,2253],{"class":62},[52,13990,77],{"class":58},[52,13992,13993],{"class":54,"line":80},[52,13994,13995],{"class":58}," import { onMount, onDestroy } from 'svelte'\n",[52,13997,13998],{"class":54,"line":108},[52,13999,597],{"emptyLinePlaceholder":171},[52,14001,14002],{"class":54,"line":118},[52,14003,14004],{"class":58}," let rotation = 0\n",[52,14006,14007],{"class":54,"line":594},[52,14008,14009],{"class":58}," let animFrame\n",[52,14011,14012],{"class":54,"line":600},[52,14013,597],{"emptyLinePlaceholder":171},[52,14015,14016],{"class":54,"line":606},[52,14017,14018],{"class":58}," onMount(() => {\n",[52,14020,14021,14024,14027,14029,14031,14033],{"class":54,"line":653},[52,14022,14023],{"class":58}," const ",[52,14025,14026],{"class":66},"animate",[52,14028,1727],{"class":231},[52,14030,13605],{"class":58},[52,14032,2425],{"class":231},[52,14034,2904],{"class":58},[52,14036,14037,14040,14042,14045,14047,14049,14051,14053],{"class":54,"line":662},[52,14038,14039],{"class":58}," rotation ",[52,14041,70],{"class":231},[52,14043,14044],{"class":58}," (rotation ",[52,14046,8328],{"class":231},[52,14048,13624],{"class":371},[52,14050,9491],{"class":58},[52,14052,13629],{"class":231},[52,14054,13632],{"class":371},[52,14056,14057,14060,14062,14064],{"class":54,"line":671},[52,14058,14059],{"class":58}," animFrame ",[52,14061,70],{"class":231},[52,14063,13642],{"class":66},[52,14065,13645],{"class":58},[52,14067,14068],{"class":54,"line":676},[52,14069,3130],{"class":58},[52,14071,14072,14074,14076,14078],{"class":54,"line":682},[52,14073,13637],{"class":58},[52,14075,70],{"class":231},[52,14077,13642],{"class":66},[52,14079,13645],{"class":58},[52,14081,14082],{"class":54,"line":698},[52,14083,10496],{"class":58},[52,14085,14086],{"class":54,"line":707},[52,14087,597],{"emptyLinePlaceholder":171},[52,14089,14090],{"class":54,"line":2327},[52,14091,14092],{"class":58}," onDestroy(() => cancelAnimationFrame(animFrame))\n",[52,14094,14095,14097,14099],{"class":54,"line":7143},[52,14096,121],{"class":58},[52,14098,2253],{"class":62},[52,14100,77],{"class":58},[52,14102,14103],{"class":54,"line":7153},[52,14104,597],{"emptyLinePlaceholder":171},[52,14106,14107,14109,14111,14113,14115,14117],{"class":54,"line":7164},[52,14108,59],{"class":58},[52,14110,63],{"class":371},[52,14112,67],{"class":66},[52,14114,70],{"class":231},[52,14116,319],{"class":73},[52,14118,77],{"class":58},[52,14120,14121,14123,14125,14127,14129],{"class":54,"line":7169},[52,14122,83],{"class":58},[52,14124,86],{"class":371},[52,14126,12919],{"class":66},[52,14128,70],{"class":231},[52,14130,13961],{"class":58},[52,14132,14133,14135,14137],{"class":54,"line":8491},[52,14134,121],{"class":58},[52,14136,63],{"class":371},[52,14138,77],{"class":58},[43,14140,14142],{"className":419,"code":14141,"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,14143,14144,14155,14159,14167,14191,14195,14206,14214,14228,14252,14263,14267,14278,14292,14296,14300,14306,14320,14337,14345,14349],{"__ignoreMap":48},[52,14145,14146,14148,14151,14153],{"class":54,"line":55},[52,14147,232],{"class":231},[52,14149,14150],{"class":58}," { createSignal, onMount, onCleanup } ",[52,14152,238],{"class":231},[52,14154,2650],{"class":73},[52,14156,14157],{"class":54,"line":80},[52,14158,597],{"emptyLinePlaceholder":171},[52,14160,14161,14163,14165],{"class":54,"line":108},[52,14162,2304],{"class":231},[52,14164,13775],{"class":66},[52,14166,2310],{"class":58},[52,14168,14169,14171,14173,14175,14177,14179,14181,14183,14185,14187,14189],{"class":54,"line":118},[52,14170,2368],{"class":231},[52,14172,2371],{"class":58},[52,14174,9326],{"class":371},[52,14176,1881],{"class":58},[52,14178,13790],{"class":371},[52,14180,2382],{"class":58},[52,14182,70],{"class":231},[52,14184,2681],{"class":66},[52,14186,2289],{"class":58},[52,14188,6161],{"class":371},[52,14190,2295],{"class":58},[52,14192,14193],{"class":54,"line":594},[52,14194,597],{"emptyLinePlaceholder":171},[52,14196,14197,14200,14202,14204],{"class":54,"line":600},[52,14198,14199],{"class":66}," onMount",[52,14201,13590],{"class":58},[52,14203,2425],{"class":231},[52,14205,2904],{"class":58},[52,14207,14208,14211],{"class":54,"line":606},[52,14209,14210],{"class":231}," let",[52,14212,14213],{"class":58}," frame\n",[52,14215,14216,14218,14220,14222,14224,14226],{"class":54,"line":653},[52,14217,13841],{"class":231},[52,14219,9450],{"class":66},[52,14221,1727],{"class":231},[52,14223,13605],{"class":58},[52,14225,2425],{"class":231},[52,14227,2904],{"class":58},[52,14229,14230,14232,14234,14236,14238,14240,14242,14244,14246,14248,14250],{"class":54,"line":662},[52,14231,13856],{"class":66},[52,14233,2289],{"class":58},[52,14235,13861],{"class":8319},[52,14237,8322],{"class":231},[52,14239,13866],{"class":58},[52,14241,8328],{"class":231},[52,14243,13624],{"class":371},[52,14245,9491],{"class":58},[52,14247,13629],{"class":231},[52,14249,13877],{"class":371},[52,14251,2295],{"class":58},[52,14253,14254,14257,14259,14261],{"class":54,"line":671},[52,14255,14256],{"class":58}," frame ",[52,14258,70],{"class":231},[52,14260,13642],{"class":66},[52,14262,13645],{"class":58},[52,14264,14265],{"class":54,"line":676},[52,14266,3130],{"class":58},[52,14268,14269,14272,14274,14276],{"class":54,"line":682},[52,14270,14271],{"class":58}," frame ",[52,14273,70],{"class":231},[52,14275,13642],{"class":66},[52,14277,13645],{"class":58},[52,14279,14280,14283,14285,14287,14289],{"class":54,"line":698},[52,14281,14282],{"class":66}," onCleanup",[52,14284,13590],{"class":58},[52,14286,2425],{"class":231},[52,14288,13680],{"class":66},[52,14290,14291],{"class":58},"(frame))\n",[52,14293,14294],{"class":54,"line":707},[52,14295,10496],{"class":58},[52,14297,14298],{"class":54,"line":2327},[52,14299,597],{"emptyLinePlaceholder":171},[52,14301,14302,14304],{"class":54,"line":7143},[52,14303,2402],{"class":231},[52,14305,2405],{"class":58},[52,14307,14308,14310,14312,14314,14316,14318],{"class":54,"line":7153},[52,14309,2213],{"class":58},[52,14311,63],{"class":371},[52,14313,67],{"class":66},[52,14315,70],{"class":231},[52,14317,319],{"class":73},[52,14319,77],{"class":58},[52,14321,14322,14324,14326,14328,14330,14332,14334],{"class":54,"line":7164},[52,14323,2476],{"class":58},[52,14325,86],{"class":371},[52,14327,12919],{"class":66},[52,14329,70],{"class":231},[52,14331,12924],{"class":58},[52,14333,9326],{"class":66},[52,14335,14336],{"class":58},"() }} />\n",[52,14338,14339,14341,14343],{"class":54,"line":7169},[52,14340,2491],{"class":58},[52,14342,63],{"class":371},[52,14344,77],{"class":58},[52,14346,14347],{"class":54,"line":8491},[52,14348,2500],{"class":58},[52,14350,14351],{"class":54,"line":8496},[52,14352,729],{"class":58},[43,14354,14356],{"className":222,"code":14355,"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,14357,14358,14368,14372,14390,14404,14408,14431,14435,14439,14443,14455,14469,14488,14502,14509,14513],{"__ignoreMap":48},[52,14359,14360,14362,14364,14366],{"class":54,"line":55},[52,14361,232],{"class":231},[52,14363,9005],{"class":58},[52,14365,238],{"class":231},[52,14367,9010],{"class":73},[52,14369,14370],{"class":54,"line":80},[52,14371,597],{"emptyLinePlaceholder":171},[52,14373,14374,14376,14378,14380,14382,14384,14386,14388],{"class":54,"line":108},[52,14375,1721],{"class":231},[52,14377,2796],{"class":371},[52,14379,1727],{"class":231},[52,14381,2801],{"class":58},[52,14383,2804],{"class":66},[52,14385,2289],{"class":58},[52,14387,10018],{"class":73},[52,14389,2295],{"class":58},[52,14391,14392,14394,14396,14398,14400,14402],{"class":54,"line":118},[52,14393,1721],{"class":231},[52,14395,1724],{"class":371},[52,14397,1727],{"class":231},[52,14399,1730],{"class":231},[52,14401,1733],{"class":66},[52,14403,1736],{"class":58},[52,14405,14406],{"class":54,"line":594},[52,14407,1751],{"class":58},[52,14409,14410,14412,14414,14416,14419,14421,14424,14426,14429],{"class":54,"line":600},[52,14411,1756],{"class":58},[52,14413,2126],{"class":73},[52,14415,2872],{"class":58},[52,14417,14418],{"class":73},"'grad'",[52,14420,7657],{"class":58},[52,14422,14423],{"class":73},"'#0f172a'",[52,14425,7663],{"class":58},[52,14427,14428],{"class":73},"'#7c3aed'",[52,14430,1768],{"class":58},[52,14432,14433],{"class":54,"line":606},[52,14434,1773],{"class":58},[52,14436,14437],{"class":54,"line":653},[52,14438,1778],{"class":58},[52,14440,14441],{"class":54,"line":662},[52,14442,597],{"emptyLinePlaceholder":171},[52,14444,14445,14447,14450,14452],{"class":54,"line":671},[52,14446,13575],{"class":231},[52,14448,14449],{"class":58}," rotation ",[52,14451,70],{"class":231},[52,14453,14454],{"class":371}," 0\n",[52,14456,14457,14459,14461,14463,14465,14467],{"class":54,"line":676},[52,14458,1721],{"class":231},[52,14460,9450],{"class":66},[52,14462,1727],{"class":231},[52,14464,13605],{"class":58},[52,14466,2425],{"class":231},[52,14468,2904],{"class":58},[52,14470,14471,14474,14476,14478,14480,14482,14484,14486],{"class":54,"line":682},[52,14472,14473],{"class":58}," rotation ",[52,14475,70],{"class":231},[52,14477,14044],{"class":58},[52,14479,8328],{"class":231},[52,14481,13624],{"class":371},[52,14483,9491],{"class":58},[52,14485,13629],{"class":231},[52,14487,13632],{"class":371},[52,14489,14490,14493,14495,14497,14499],{"class":54,"line":698},[52,14491,14492],{"class":58}," shader.",[52,14494,9099],{"class":66},[52,14496,2289],{"class":58},[52,14498,14418],{"class":73},[52,14500,14501],{"class":58},", { transform: { rotation } })\n",[52,14503,14504,14507],{"class":54,"line":707},[52,14505,14506],{"class":66}," requestAnimationFrame",[52,14508,13645],{"class":58},[52,14510,14511],{"class":54,"line":2327},[52,14512,729],{"class":58},[52,14514,14515,14518],{"class":54,"line":7143},[52,14516,14517],{"class":66},"requestAnimationFrame",[52,14519,13645],{"class":58},[15,14521,14522,14523,14527,14528,14531],{},"For continuous animations like rotation, consider using a ",[1139,14524,14526],{"href":14525},"/docs/guide/dynamic-props","Prop Driver"," instead — the ",[31,14529,14530],{},"auto-animate"," driver handles this declaratively without any component code.",[23,14533,14535],{"id":14534},"performance","Performance",[15,14537,14538,14539,14542],{},"Transforms have ",[151,14540,14541],{},"zero overhead when all values are at their defaults",". The renderer checks for non-default values before activating the UV transformation pass.",[15,14544,14545],{},"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,14547,14548],{},"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,14550,14551],{},"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":14553},[14554,14555,14556,14557,14558,14559],{"id":12602,"depth":80,"text":12603},{"id":12793,"depth":80,"text":12794},{"id":13280,"depth":80,"text":13281},{"id":13383,"depth":80,"text":13384},{"id":13517,"depth":80,"text":13518},{"id":14534,"depth":80,"text":14535},"Reposition, rotate, and scale any shader component in UV space","arrows-to-circle",{},"/docs/guide/transforms",{"title":12509,"description":14560},"docs/guide/6.transforms","I6UL4PDAPMEAXn2HXal6IZYN8IJaEN-UqIZcjXIiNCw",{"id":14568,"title":14569,"body":14570,"category":7723,"description":18229,"exclude":167,"extension":168,"forceFramework":167,"icon":18230,"meta":18231,"navigation":171,"path":14525,"seo":18232,"stem":18233,"__hash__":18234},"guide/docs/guide/7.dynamic-props.md","Dynamic Props",{"type":8,"value":14571,"toc":18221},[14572,14575,14578,14581,14630,14632,14635,15172,15175,15180,15308,15320,15323,15339,15807,15810,15814,16014,16026,16058,16061,16064,16546,16549,16553,16682,16687,16690,16693,16699,17420,17423,17427,17568,17573,17577,17580,18060,18064,18071,18219],[11,14573,14569],{"id":14574},"dynamic-props",[15,14576,14577],{},"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,14579,14580],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[43,14582,14584],{"className":45,"code":14583,"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,14585,14586,14591,14606,14610,14615],{"__ignoreMap":48},[52,14587,14588],{"class":54,"line":55},[52,14589,14590],{"class":559},"\u003C!-- Static value -->\n",[52,14592,14593,14595,14597,14600,14602,14604],{"class":54,"line":80},[52,14594,59],{"class":58},[52,14596,2216],{"class":62},[52,14598,14599],{"class":66}," :radius",[52,14601,70],{"class":58},[52,14603,5168],{"class":73},[52,14605,105],{"class":58},[52,14607,14608],{"class":54,"line":108},[52,14609,597],{"emptyLinePlaceholder":171},[52,14611,14612],{"class":54,"line":118},[52,14613,14614],{"class":559},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[52,14616,14617,14619,14621,14623,14625,14628],{"class":54,"line":594},[52,14618,59],{"class":58},[52,14620,2216],{"class":62},[52,14622,14599],{"class":66},[52,14624,70],{"class":58},[52,14626,14627],{"class":73},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[52,14629,105],{"class":58},[23,14631,14530],{"id":14530},[15,14633,14634],{},"Continuously animates a numeric prop between two values over time.",[217,14636,14637,14728,14840,14943,15045],{":tabs":1543},[43,14638,14640],{"className":45,"code":14639,"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,14641,14642,14656,14662,14671,14681,14686,14691,14696,14701,14706,14711,14716,14720],{"__ignoreMap":48},[52,14643,14644,14646,14648,14650,14652,14654],{"class":54,"line":55},[52,14645,59],{"class":58},[52,14647,63],{"class":62},[52,14649,67],{"class":66},[52,14651,70],{"class":58},[52,14653,319],{"class":73},[52,14655,77],{"class":58},[52,14657,14658,14660],{"class":54,"line":80},[52,14659,83],{"class":58},[52,14661,7120],{"class":62},[52,14663,14664,14666,14668],{"class":54,"line":108},[52,14665,7125],{"class":66},[52,14667,70],{"class":58},[52,14669,14670],{"class":73},"\"#6366f1\"\n",[52,14672,14673,14676,14678],{"class":54,"line":118},[52,14674,14675],{"class":66}," :radius",[52,14677,70],{"class":58},[52,14679,14680],{"class":73},"\"{\n",[52,14682,14683],{"class":54,"line":594},[52,14684,14685],{"class":73}," type: 'auto-animate',\n",[52,14687,14688],{"class":54,"line":600},[52,14689,14690],{"class":73}," mode: 'ping-pong',\n",[52,14692,14693],{"class":54,"line":606},[52,14694,14695],{"class":73}," outputMin: 0.2,\n",[52,14697,14698],{"class":54,"line":653},[52,14699,14700],{"class":73}," outputMax: 0.6,\n",[52,14702,14703],{"class":54,"line":662},[52,14704,14705],{"class":73}," speed: 0.8,\n",[52,14707,14708],{"class":54,"line":671},[52,14709,14710],{"class":73}," easing: 'sine'\n",[52,14712,14713],{"class":54,"line":676},[52,14714,14715],{"class":73}," }\"\n",[52,14717,14718],{"class":54,"line":682},[52,14719,1224],{"class":58},[52,14721,14722,14724,14726],{"class":54,"line":698},[52,14723,121],{"class":58},[52,14725,63],{"class":62},[52,14727,77],{"class":58},[43,14729,14731],{"className":360,"code":14730,"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,14732,14733,14747,14753,14761,14770,14779,14789,14798,14807,14816,14823,14828,14832],{"__ignoreMap":48},[52,14734,14735,14737,14739,14741,14743,14745],{"class":54,"line":55},[52,14736,59],{"class":58},[52,14738,63],{"class":371},[52,14740,374],{"class":66},[52,14742,70],{"class":231},[52,14744,319],{"class":73},[52,14746,77],{"class":58},[52,14748,14749,14751],{"class":54,"line":80},[52,14750,83],{"class":58},[52,14752,7120],{"class":371},[52,14754,14755,14757,14759],{"class":54,"line":108},[52,14756,7125],{"class":66},[52,14758,70],{"class":231},[52,14760,14670],{"class":73},[52,14762,14763,14765,14767],{"class":54,"line":118},[52,14764,7135],{"class":66},[52,14766,70],{"class":231},[52,14768,14769],{"class":58},"{{\n",[52,14771,14772,14774,14777],{"class":54,"line":594},[52,14773,13201],{"class":58},[52,14775,14776],{"class":73},"'auto-animate'",[52,14778,1746],{"class":58},[52,14780,14781,14784,14787],{"class":54,"line":600},[52,14782,14783],{"class":58}," mode: ",[52,14785,14786],{"class":73},"'ping-pong'",[52,14788,1746],{"class":58},[52,14790,14791,14794,14796],{"class":54,"line":606},[52,14792,14793],{"class":58}," outputMin: ",[52,14795,12951],{"class":371},[52,14797,1746],{"class":58},[52,14799,14800,14803,14805],{"class":54,"line":653},[52,14801,14802],{"class":58}," outputMax: ",[52,14804,5724],{"class":371},[52,14806,1746],{"class":58},[52,14808,14809,14812,14814],{"class":54,"line":662},[52,14810,14811],{"class":58}," speed: ",[52,14813,3785],{"class":371},[52,14815,1746],{"class":58},[52,14817,14818,14820],{"class":54,"line":671},[52,14819,9472],{"class":58},[52,14821,14822],{"class":73},"'sine'\n",[52,14824,14825],{"class":54,"line":676},[52,14826,14827],{"class":58}," }}\n",[52,14829,14830],{"class":54,"line":682},[52,14831,1224],{"class":58},[52,14833,14834,14836,14838],{"class":54,"line":698},[52,14835,121],{"class":58},[52,14837,63],{"class":371},[52,14839,77],{"class":58},[43,14841,14843],{"className":419,"code":14842,"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,14844,14845,14859,14865,14873,14881,14889,14897,14905,14913,14921,14927,14931,14935],{"__ignoreMap":48},[52,14846,14847,14849,14851,14853,14855,14857],{"class":54,"line":55},[52,14848,59],{"class":58},[52,14850,63],{"class":371},[52,14852,67],{"class":66},[52,14854,70],{"class":231},[52,14856,319],{"class":73},[52,14858,77],{"class":58},[52,14860,14861,14863],{"class":54,"line":80},[52,14862,83],{"class":58},[52,14864,7120],{"class":371},[52,14866,14867,14869,14871],{"class":54,"line":108},[52,14868,7125],{"class":66},[52,14870,70],{"class":231},[52,14872,14670],{"class":73},[52,14874,14875,14877,14879],{"class":54,"line":118},[52,14876,7135],{"class":66},[52,14878,70],{"class":231},[52,14880,14769],{"class":58},[52,14882,14883,14885,14887],{"class":54,"line":594},[52,14884,13201],{"class":58},[52,14886,14776],{"class":73},[52,14888,1746],{"class":58},[52,14890,14891,14893,14895],{"class":54,"line":600},[52,14892,14783],{"class":58},[52,14894,14786],{"class":73},[52,14896,1746],{"class":58},[52,14898,14899,14901,14903],{"class":54,"line":606},[52,14900,14793],{"class":58},[52,14902,12951],{"class":371},[52,14904,1746],{"class":58},[52,14906,14907,14909,14911],{"class":54,"line":653},[52,14908,14802],{"class":58},[52,14910,5724],{"class":371},[52,14912,1746],{"class":58},[52,14914,14915,14917,14919],{"class":54,"line":662},[52,14916,14811],{"class":58},[52,14918,3785],{"class":371},[52,14920,1746],{"class":58},[52,14922,14923,14925],{"class":54,"line":671},[52,14924,9472],{"class":58},[52,14926,14822],{"class":73},[52,14928,14929],{"class":54,"line":676},[52,14930,14827],{"class":58},[52,14932,14933],{"class":54,"line":682},[52,14934,1224],{"class":58},[52,14936,14937,14939,14941],{"class":54,"line":698},[52,14938,121],{"class":58},[52,14940,63],{"class":371},[52,14942,77],{"class":58},[43,14944,14945],{"className":419,"code":14842,"language":420,"meta":48,"style":48},[31,14946,14947,14961,14967,14975,14983,14991,14999,15007,15015,15023,15029,15033,15037],{"__ignoreMap":48},[52,14948,14949,14951,14953,14955,14957,14959],{"class":54,"line":55},[52,14950,59],{"class":58},[52,14952,63],{"class":371},[52,14954,67],{"class":66},[52,14956,70],{"class":231},[52,14958,319],{"class":73},[52,14960,77],{"class":58},[52,14962,14963,14965],{"class":54,"line":80},[52,14964,83],{"class":58},[52,14966,7120],{"class":371},[52,14968,14969,14971,14973],{"class":54,"line":108},[52,14970,7125],{"class":66},[52,14972,70],{"class":231},[52,14974,14670],{"class":73},[52,14976,14977,14979,14981],{"class":54,"line":118},[52,14978,7135],{"class":66},[52,14980,70],{"class":231},[52,14982,14769],{"class":58},[52,14984,14985,14987,14989],{"class":54,"line":594},[52,14986,13201],{"class":58},[52,14988,14776],{"class":73},[52,14990,1746],{"class":58},[52,14992,14993,14995,14997],{"class":54,"line":600},[52,14994,14783],{"class":58},[52,14996,14786],{"class":73},[52,14998,1746],{"class":58},[52,15000,15001,15003,15005],{"class":54,"line":606},[52,15002,14793],{"class":58},[52,15004,12951],{"class":371},[52,15006,1746],{"class":58},[52,15008,15009,15011,15013],{"class":54,"line":653},[52,15010,14802],{"class":58},[52,15012,5724],{"class":371},[52,15014,1746],{"class":58},[52,15016,15017,15019,15021],{"class":54,"line":662},[52,15018,14811],{"class":58},[52,15020,3785],{"class":371},[52,15022,1746],{"class":58},[52,15024,15025,15027],{"class":54,"line":671},[52,15026,9472],{"class":58},[52,15028,14822],{"class":73},[52,15030,15031],{"class":54,"line":676},[52,15032,14827],{"class":58},[52,15034,15035],{"class":54,"line":682},[52,15036,1224],{"class":58},[52,15038,15039,15041,15043],{"class":54,"line":698},[52,15040,121],{"class":58},[52,15042,63],{"class":371},[52,15044,77],{"class":58},[43,15046,15048],{"className":222,"code":15047,"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,15049,15050,15064,15068,15072,15080,15084,15094,15099,15108,15117,15126,15135,15144,15151,15156,15160,15164,15168],{"__ignoreMap":48},[52,15051,15052,15054,15056,15058,15060,15062],{"class":54,"line":55},[52,15053,1721],{"class":231},[52,15055,1724],{"class":371},[52,15057,1727],{"class":231},[52,15059,1730],{"class":231},[52,15061,1733],{"class":66},[52,15063,1736],{"class":58},[52,15065,15066],{"class":54,"line":80},[52,15067,1751],{"class":58},[52,15069,15070],{"class":54,"line":108},[52,15071,13196],{"class":58},[52,15073,15074,15076,15078],{"class":54,"line":118},[52,15075,13201],{"class":58},[52,15077,2869],{"class":73},[52,15079,1746],{"class":58},[52,15081,15082],{"class":54,"line":594},[52,15083,13210],{"class":58},[52,15085,15086,15089,15092],{"class":54,"line":600},[52,15087,15088],{"class":58}," color: ",[52,15090,15091],{"class":73},"'#6366f1'",[52,15093,1746],{"class":58},[52,15095,15096],{"class":54,"line":606},[52,15097,15098],{"class":58}," radius: {\n",[52,15100,15101,15104,15106],{"class":54,"line":653},[52,15102,15103],{"class":58}," type: ",[52,15105,14776],{"class":73},[52,15107,1746],{"class":58},[52,15109,15110,15113,15115],{"class":54,"line":662},[52,15111,15112],{"class":58}," mode: ",[52,15114,14786],{"class":73},[52,15116,1746],{"class":58},[52,15118,15119,15122,15124],{"class":54,"line":671},[52,15120,15121],{"class":58}," outputMin: ",[52,15123,12951],{"class":371},[52,15125,1746],{"class":58},[52,15127,15128,15131,15133],{"class":54,"line":676},[52,15129,15130],{"class":58}," outputMax: ",[52,15132,5724],{"class":371},[52,15134,1746],{"class":58},[52,15136,15137,15140,15142],{"class":54,"line":682},[52,15138,15139],{"class":58}," speed: ",[52,15141,3785],{"class":371},[52,15143,1746],{"class":58},[52,15145,15146,15149],{"class":54,"line":698},[52,15147,15148],{"class":58}," easing: ",[52,15150,14822],{"class":73},[52,15152,15153],{"class":54,"line":707},[52,15154,15155],{"class":58}," }\n",[52,15157,15158],{"class":54,"line":2327},[52,15159,3125],{"class":58},[52,15161,15162],{"class":54,"line":7143},[52,15163,3130],{"class":58},[52,15165,15166],{"class":54,"line":7153},[52,15167,1773],{"class":58},[52,15169,15170],{"class":54,"line":7164},[52,15171,1778],{"class":58},[19,15173],{":preset":15174},"{\"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,15176,15177],{},[151,15178,15179],{},"Properties:",[1780,15181,15182,15194],{},[1783,15183,15184],{},[1786,15185,15186,15188,15190,15192],{},[1789,15187,12618],{},[1789,15189,12621],{},[1789,15191,12624],{},[1789,15193,1794],{},[1796,15195,15196,15221,15237,15253,15272],{},[1786,15197,15198,15203,15208,15211],{},[1801,15199,15200],{},[31,15201,15202],{},"mode",[1801,15204,15205],{},[31,15206,15207],{},"'ping-pong' | 'loop'",[1801,15209,15210],{},"required",[1801,15212,15213,15216,15217,15220],{},[31,15214,15215],{},"ping-pong"," oscillates between min and max. ",[31,15218,15219],{},"loop"," advances from min to max then wraps.",[1786,15222,15223,15228,15232,15234],{},[1801,15224,15225],{},[31,15226,15227],{},"outputMin",[1801,15229,15230],{},[31,15231,12640],{},[1801,15233,15210],{},[1801,15235,15236],{},"Value at the start/bottom of the range.",[1786,15238,15239,15244,15248,15250],{},[1801,15240,15241],{},[31,15242,15243],{},"outputMax",[1801,15245,15246],{},[31,15247,12640],{},[1801,15249,15210],{},[1801,15251,15252],{},"Value at the end/top of the range.",[1786,15254,15255,15260,15264,15269],{},[1801,15256,15257],{},[31,15258,15259],{},"speed",[1801,15261,15262],{},[31,15263,12640],{},[1801,15265,15266],{},[31,15267,15268],{},"1.0",[1801,15270,15271],{},"Cycles per second. Negative values reverse the loop direction.",[1786,15273,15274,15279,15283,15288],{},[1801,15275,15276],{},[31,15277,15278],{},"easing",[1801,15280,15281],{},[31,15282,6549],{},[1801,15284,15285],{},[31,15286,15287],{},"'sine'",[1801,15289,15290,15291,15293,15294,1881,15297,1881,15299,1881,15302,1881,15305,6978],{},"Easing curve for ",[31,15292,15215],{}," mode. Options: ",[31,15295,15296],{},"sine",[31,15298,1880],{},[31,15300,15301],{},"quad",[31,15303,15304],{},"expo",[31,15306,15307],{},"bounce",[15,15309,15310,15313,15314,15316,15317,6978],{},[151,15311,15312],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[31,15315,15219],{}," mode and ",[31,15318,15319],{},"outputMin: 0, outputMax: 360",[23,15321,15322],{"id":15322},"mouse-position",[15,15324,15325,15326,15329,15330,1881,15332,15335,15336,6978],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[31,15327,15328],{},"{ x, y }"," coordinates, such as ",[31,15331,5729],{},[31,15333,15334],{},"position",", or ",[31,15337,15338],{},"offset",[217,15340,15341,15423,15521,15612,15702],{":tabs":1543},[43,15342,15344],{"className":45,"code":15343,"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,15345,15346,15360,15366,15374,15383,15392,15397,15402,15407,15411,15415],{"__ignoreMap":48},[52,15347,15348,15350,15352,15354,15356,15358],{"class":54,"line":55},[52,15349,59],{"class":58},[52,15351,63],{"class":62},[52,15353,67],{"class":66},[52,15355,70],{"class":58},[52,15357,319],{"class":73},[52,15359,77],{"class":58},[52,15361,15362,15364],{"class":54,"line":80},[52,15363,83],{"class":58},[52,15365,7120],{"class":62},[52,15367,15368,15370,15372],{"class":54,"line":108},[52,15369,7125],{"class":66},[52,15371,70],{"class":58},[52,15373,14670],{"class":73},[52,15375,15376,15378,15380],{"class":54,"line":118},[52,15377,14675],{"class":66},[52,15379,70],{"class":58},[52,15381,15382],{"class":73},"\"0.15\"\n",[52,15384,15385,15388,15390],{"class":54,"line":594},[52,15386,15387],{"class":66}," :center",[52,15389,70],{"class":58},[52,15391,14680],{"class":73},[52,15393,15394],{"class":54,"line":600},[52,15395,15396],{"class":73}," type: 'mouse-position',\n",[52,15398,15399],{"class":54,"line":606},[52,15400,15401],{"class":73}," smoothing: 0.12,\n",[52,15403,15404],{"class":54,"line":653},[52,15405,15406],{"class":73}," momentum: 0.2\n",[52,15408,15409],{"class":54,"line":662},[52,15410,14715],{"class":73},[52,15412,15413],{"class":54,"line":671},[52,15414,1224],{"class":58},[52,15416,15417,15419,15421],{"class":54,"line":676},[52,15418,121],{"class":58},[52,15420,63],{"class":62},[52,15422,77],{"class":58},[43,15424,15426],{"className":360,"code":15425,"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,15427,15428,15442,15448,15456,15469,15478,15487,15497,15505,15509,15513],{"__ignoreMap":48},[52,15429,15430,15432,15434,15436,15438,15440],{"class":54,"line":55},[52,15431,59],{"class":58},[52,15433,63],{"class":371},[52,15435,374],{"class":66},[52,15437,70],{"class":231},[52,15439,319],{"class":73},[52,15441,77],{"class":58},[52,15443,15444,15446],{"class":54,"line":80},[52,15445,83],{"class":58},[52,15447,7120],{"class":371},[52,15449,15450,15452,15454],{"class":54,"line":108},[52,15451,7125],{"class":66},[52,15453,70],{"class":231},[52,15455,14670],{"class":73},[52,15457,15458,15460,15462,15464,15467],{"class":54,"line":118},[52,15459,7135],{"class":66},[52,15461,70],{"class":231},[52,15463,723],{"class":58},[52,15465,15466],{"class":371},"0.15",[52,15468,729],{"class":58},[52,15470,15471,15474,15476],{"class":54,"line":594},[52,15472,15473],{"class":66}," center",[52,15475,70],{"class":231},[52,15477,14769],{"class":58},[52,15479,15480,15482,15485],{"class":54,"line":600},[52,15481,13201],{"class":58},[52,15483,15484],{"class":73},"'mouse-position'",[52,15486,1746],{"class":58},[52,15488,15489,15492,15495],{"class":54,"line":606},[52,15490,15491],{"class":58}," smoothing: ",[52,15493,15494],{"class":371},"0.12",[52,15496,1746],{"class":58},[52,15498,15499,15502],{"class":54,"line":653},[52,15500,15501],{"class":58}," momentum: ",[52,15503,15504],{"class":371},"0.2\n",[52,15506,15507],{"class":54,"line":662},[52,15508,14827],{"class":58},[52,15510,15511],{"class":54,"line":671},[52,15512,1224],{"class":58},[52,15514,15515,15517,15519],{"class":54,"line":676},[52,15516,121],{"class":58},[52,15518,63],{"class":371},[52,15520,77],{"class":58},[43,15522,15524],{"className":419,"code":15523,"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,15525,15526,15540,15546,15554,15566,15574,15582,15590,15596,15600,15604],{"__ignoreMap":48},[52,15527,15528,15530,15532,15534,15536,15538],{"class":54,"line":55},[52,15529,59],{"class":58},[52,15531,63],{"class":371},[52,15533,67],{"class":66},[52,15535,70],{"class":231},[52,15537,319],{"class":73},[52,15539,77],{"class":58},[52,15541,15542,15544],{"class":54,"line":80},[52,15543,83],{"class":58},[52,15545,7120],{"class":371},[52,15547,15548,15550,15552],{"class":54,"line":108},[52,15549,7125],{"class":66},[52,15551,70],{"class":231},[52,15553,14670],{"class":73},[52,15555,15556,15558,15560,15562,15564],{"class":54,"line":118},[52,15557,7135],{"class":66},[52,15559,70],{"class":231},[52,15561,723],{"class":58},[52,15563,15466],{"class":371},[52,15565,729],{"class":58},[52,15567,15568,15570,15572],{"class":54,"line":594},[52,15569,15473],{"class":66},[52,15571,70],{"class":231},[52,15573,14769],{"class":58},[52,15575,15576,15578,15580],{"class":54,"line":600},[52,15577,13201],{"class":58},[52,15579,15484],{"class":73},[52,15581,1746],{"class":58},[52,15583,15584,15586,15588],{"class":54,"line":606},[52,15585,15491],{"class":58},[52,15587,15494],{"class":371},[52,15589,1746],{"class":58},[52,15591,15592,15594],{"class":54,"line":653},[52,15593,15501],{"class":58},[52,15595,15504],{"class":371},[52,15597,15598],{"class":54,"line":662},[52,15599,14827],{"class":58},[52,15601,15602],{"class":54,"line":671},[52,15603,1224],{"class":58},[52,15605,15606,15608,15610],{"class":54,"line":676},[52,15607,121],{"class":58},[52,15609,63],{"class":371},[52,15611,77],{"class":58},[43,15613,15614],{"className":419,"code":15523,"language":420,"meta":48,"style":48},[31,15615,15616,15630,15636,15644,15656,15664,15672,15680,15686,15690,15694],{"__ignoreMap":48},[52,15617,15618,15620,15622,15624,15626,15628],{"class":54,"line":55},[52,15619,59],{"class":58},[52,15621,63],{"class":371},[52,15623,67],{"class":66},[52,15625,70],{"class":231},[52,15627,319],{"class":73},[52,15629,77],{"class":58},[52,15631,15632,15634],{"class":54,"line":80},[52,15633,83],{"class":58},[52,15635,7120],{"class":371},[52,15637,15638,15640,15642],{"class":54,"line":108},[52,15639,7125],{"class":66},[52,15641,70],{"class":231},[52,15643,14670],{"class":73},[52,15645,15646,15648,15650,15652,15654],{"class":54,"line":118},[52,15647,7135],{"class":66},[52,15649,70],{"class":231},[52,15651,723],{"class":58},[52,15653,15466],{"class":371},[52,15655,729],{"class":58},[52,15657,15658,15660,15662],{"class":54,"line":594},[52,15659,15473],{"class":66},[52,15661,70],{"class":231},[52,15663,14769],{"class":58},[52,15665,15666,15668,15670],{"class":54,"line":600},[52,15667,13201],{"class":58},[52,15669,15484],{"class":73},[52,15671,1746],{"class":58},[52,15673,15674,15676,15678],{"class":54,"line":606},[52,15675,15491],{"class":58},[52,15677,15494],{"class":371},[52,15679,1746],{"class":58},[52,15681,15682,15684],{"class":54,"line":653},[52,15683,15501],{"class":58},[52,15685,15504],{"class":371},[52,15687,15688],{"class":54,"line":662},[52,15689,14827],{"class":58},[52,15691,15692],{"class":54,"line":671},[52,15693,1224],{"class":58},[52,15695,15696,15698,15700],{"class":54,"line":676},[52,15697,121],{"class":58},[52,15699,63],{"class":371},[52,15701,77],{"class":58},[43,15703,15705],{"className":222,"code":15704,"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,15706,15707,15721,15725,15729,15737,15741,15749,15758,15763,15771,15780,15787,15791,15795,15799,15803],{"__ignoreMap":48},[52,15708,15709,15711,15713,15715,15717,15719],{"class":54,"line":55},[52,15710,1721],{"class":231},[52,15712,1724],{"class":371},[52,15714,1727],{"class":231},[52,15716,1730],{"class":231},[52,15718,1733],{"class":66},[52,15720,1736],{"class":58},[52,15722,15723],{"class":54,"line":80},[52,15724,1751],{"class":58},[52,15726,15727],{"class":54,"line":108},[52,15728,13196],{"class":58},[52,15730,15731,15733,15735],{"class":54,"line":118},[52,15732,13201],{"class":58},[52,15734,2869],{"class":73},[52,15736,1746],{"class":58},[52,15738,15739],{"class":54,"line":594},[52,15740,13210],{"class":58},[52,15742,15743,15745,15747],{"class":54,"line":600},[52,15744,15088],{"class":58},[52,15746,15091],{"class":73},[52,15748,1746],{"class":58},[52,15750,15751,15754,15756],{"class":54,"line":606},[52,15752,15753],{"class":58}," radius: ",[52,15755,15466],{"class":371},[52,15757,1746],{"class":58},[52,15759,15760],{"class":54,"line":653},[52,15761,15762],{"class":58}," center: {\n",[52,15764,15765,15767,15769],{"class":54,"line":662},[52,15766,15103],{"class":58},[52,15768,15484],{"class":73},[52,15770,1746],{"class":58},[52,15772,15773,15776,15778],{"class":54,"line":671},[52,15774,15775],{"class":58}," smoothing: ",[52,15777,15494],{"class":371},[52,15779,1746],{"class":58},[52,15781,15782,15785],{"class":54,"line":676},[52,15783,15784],{"class":58}," momentum: ",[52,15786,15504],{"class":371},[52,15788,15789],{"class":54,"line":682},[52,15790,15155],{"class":58},[52,15792,15793],{"class":54,"line":698},[52,15794,3125],{"class":58},[52,15796,15797],{"class":54,"line":707},[52,15798,3130],{"class":58},[52,15800,15801],{"class":54,"line":2327},[52,15802,1773],{"class":58},[52,15804,15805],{"class":54,"line":7143},[52,15806,1778],{"class":58},[19,15808],{":preset":15809},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,15811,15812],{},[151,15813,15179],{},[1780,15815,15816,15828],{},[1783,15817,15818],{},[1786,15819,15820,15822,15824,15826],{},[1789,15821,12618],{},[1789,15823,12621],{},[1789,15825,12624],{},[1789,15827,1794],{},[1796,15829,15830,15852,15872,15891,15909,15930,15951,15978,15996],{},[1786,15831,15832,15837,15842,15847],{},[1801,15833,15834],{},[31,15835,15836],{},"x",[1801,15838,15839],{},[31,15840,15841],{},"'mouse' | number",[1801,15843,15844],{},[31,15845,15846],{},"'mouse'",[1801,15848,15849,15851],{},[31,15850,15846],{}," tracks cursor X. A number pins it to that value (0–1).",[1786,15853,15854,15859,15863,15867],{},[1801,15855,15856],{},[31,15857,15858],{},"y",[1801,15860,15861],{},[31,15862,15841],{},[1801,15864,15865],{},[31,15866,15846],{},[1801,15868,15869,15871],{},[31,15870,15846],{}," tracks cursor Y. A number pins it to that value (0–1).",[1786,15873,15874,15879,15884,15888],{},[1801,15875,15876],{},[31,15877,15878],{},"invertX",[1801,15880,15881],{},[31,15882,15883],{},"boolean",[1801,15885,15886],{},[31,15887,2292],{},[1801,15889,15890],{},"Flips the X direction — cursor moving right moves position left.",[1786,15892,15893,15898,15902,15906],{},[1801,15894,15895],{},[31,15896,15897],{},"invertY",[1801,15899,15900],{},[31,15901,15883],{},[1801,15903,15904],{},[31,15905,2292],{},[1801,15907,15908],{},"Flips the Y direction.",[1786,15910,15911,15916,15920,15924],{},[1801,15912,15913],{},[31,15914,15915],{},"smoothing",[1801,15917,15918],{},[31,15919,12640],{},[1801,15921,15922],{},[31,15923,6161],{},[1801,15925,15926,15927,15929],{},"Lag amount (0–1). ",[31,15928,6161],{}," = instant, higher values = sluggish follow.",[1786,15931,15932,15937,15941,15945],{},[1801,15933,15934],{},[31,15935,15936],{},"momentum",[1801,15938,15939],{},[31,15940,12640],{},[1801,15942,15943],{},[31,15944,6161],{},[1801,15946,15947,15948,15950],{},"Spring bounce (0–1). ",[31,15949,6161],{}," = no overshoot, values near 1 = springy.",[1786,15952,15953,15958,15962,15966],{},[1801,15954,15955],{},[31,15956,15957],{},"reach",[1801,15959,15960],{},[31,15961,12640],{},[1801,15963,15964],{},[31,15965,6165],{},[1801,15967,15968,15969,15971,15972,15974,15975,15977],{},"Displacement scale. ",[31,15970,6165],{}," = 1:1 with cursor. ",[31,15973,4701],{}," = twice the displacement. ",[31,15976,6161],{}," = pinned to origin.",[1786,15979,15980,15985,15989,15993],{},[1801,15981,15982],{},[31,15983,15984],{},"originX",[1801,15986,15987],{},[31,15988,12640],{},[1801,15990,15991],{},[31,15992,5241],{},[1801,15994,15995],{},"X coordinate of the origin point that displacement scales from.",[1786,15997,15998,16003,16007,16011],{},[1801,15999,16000],{},[31,16001,16002],{},"originY",[1801,16004,16005],{},[31,16006,12640],{},[1801,16008,16009],{},[31,16010,5241],{},[1801,16012,16013],{},"Y coordinate of the origin point.",[15,16015,16016,16019,16020,16022,16023,16025],{},[151,16017,16018],{},"Pinning one axis:"," Set ",[31,16021,15836],{}," or ",[31,16024,15858],{}," to a number to fix that axis while the other tracks the mouse:",[43,16027,16029],{"className":45,"code":16028,"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,16030,16031,16036],{"__ignoreMap":48},[52,16032,16033],{"class":54,"line":55},[52,16034,16035],{"class":559},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[52,16037,16038,16040,16042,16044,16046,16049,16051,16053,16056],{"class":54,"line":80},[52,16039,59],{"class":58},[52,16041,2216],{"class":62},[52,16043,14599],{"class":66},[52,16045,70],{"class":58},[52,16047,16048],{"class":73},"\"0.15\"",[52,16050,5621],{"class":66},[52,16052,70],{"class":58},[52,16054,16055],{"class":73},"\"{ type: 'mouse-position', y: 0.5 }\"",[52,16057,105],{"class":58},[23,16059,16060],{"id":16060},"mouse",[15,16062,16063],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[217,16065,16066,16148,16247,16342,16436],{":tabs":1543},[43,16067,16069],{"className":45,"code":16068,"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,16070,16071,16085,16091,16099,16107,16112,16117,16122,16127,16132,16136,16140],{"__ignoreMap":48},[52,16072,16073,16075,16077,16079,16081,16083],{"class":54,"line":55},[52,16074,59],{"class":58},[52,16076,63],{"class":62},[52,16078,67],{"class":66},[52,16080,70],{"class":58},[52,16082,319],{"class":73},[52,16084,77],{"class":58},[52,16086,16087,16089],{"class":54,"line":80},[52,16088,83],{"class":58},[52,16090,7120],{"class":62},[52,16092,16093,16095,16097],{"class":54,"line":108},[52,16094,7125],{"class":66},[52,16096,70],{"class":58},[52,16098,14670],{"class":73},[52,16100,16101,16103,16105],{"class":54,"line":118},[52,16102,14675],{"class":66},[52,16104,70],{"class":58},[52,16106,14680],{"class":73},[52,16108,16109],{"class":54,"line":594},[52,16110,16111],{"class":73}," type: 'mouse',\n",[52,16113,16114],{"class":54,"line":600},[52,16115,16116],{"class":73}," axis: 'x',\n",[52,16118,16119],{"class":54,"line":606},[52,16120,16121],{"class":73}," outputMin: 0.1,\n",[52,16123,16124],{"class":54,"line":653},[52,16125,16126],{"class":73}," outputMax: 0.7,\n",[52,16128,16129],{"class":54,"line":662},[52,16130,16131],{"class":73}," smoothing: 0.1\n",[52,16133,16134],{"class":54,"line":671},[52,16135,14715],{"class":73},[52,16137,16138],{"class":54,"line":676},[52,16139,1224],{"class":58},[52,16141,16142,16144,16146],{"class":54,"line":682},[52,16143,121],{"class":58},[52,16145,63],{"class":62},[52,16147,77],{"class":58},[43,16149,16151],{"className":360,"code":16150,"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,16152,16153,16167,16173,16181,16189,16197,16207,16215,16224,16231,16235,16239],{"__ignoreMap":48},[52,16154,16155,16157,16159,16161,16163,16165],{"class":54,"line":55},[52,16156,59],{"class":58},[52,16158,63],{"class":371},[52,16160,374],{"class":66},[52,16162,70],{"class":231},[52,16164,319],{"class":73},[52,16166,77],{"class":58},[52,16168,16169,16171],{"class":54,"line":80},[52,16170,83],{"class":58},[52,16172,7120],{"class":371},[52,16174,16175,16177,16179],{"class":54,"line":108},[52,16176,7125],{"class":66},[52,16178,70],{"class":231},[52,16180,14670],{"class":73},[52,16182,16183,16185,16187],{"class":54,"line":118},[52,16184,7135],{"class":66},[52,16186,70],{"class":231},[52,16188,14769],{"class":58},[52,16190,16191,16193,16195],{"class":54,"line":594},[52,16192,13201],{"class":58},[52,16194,15846],{"class":73},[52,16196,1746],{"class":58},[52,16198,16199,16202,16205],{"class":54,"line":600},[52,16200,16201],{"class":58}," axis: ",[52,16203,16204],{"class":73},"'x'",[52,16206,1746],{"class":58},[52,16208,16209,16211,16213],{"class":54,"line":606},[52,16210,14793],{"class":58},[52,16212,12981],{"class":371},[52,16214,1746],{"class":58},[52,16216,16217,16219,16222],{"class":54,"line":653},[52,16218,14802],{"class":58},[52,16220,16221],{"class":371},"0.7",[52,16223,1746],{"class":58},[52,16225,16226,16228],{"class":54,"line":662},[52,16227,15491],{"class":58},[52,16229,16230],{"class":371},"0.1\n",[52,16232,16233],{"class":54,"line":671},[52,16234,14827],{"class":58},[52,16236,16237],{"class":54,"line":676},[52,16238,1224],{"class":58},[52,16240,16241,16243,16245],{"class":54,"line":682},[52,16242,121],{"class":58},[52,16244,63],{"class":371},[52,16246,77],{"class":58},[43,16248,16250],{"className":419,"code":16249,"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,16251,16252,16266,16272,16280,16288,16296,16304,16312,16320,16326,16330,16334],{"__ignoreMap":48},[52,16253,16254,16256,16258,16260,16262,16264],{"class":54,"line":55},[52,16255,59],{"class":58},[52,16257,63],{"class":371},[52,16259,67],{"class":66},[52,16261,70],{"class":231},[52,16263,319],{"class":73},[52,16265,77],{"class":58},[52,16267,16268,16270],{"class":54,"line":80},[52,16269,83],{"class":58},[52,16271,7120],{"class":371},[52,16273,16274,16276,16278],{"class":54,"line":108},[52,16275,7125],{"class":66},[52,16277,70],{"class":231},[52,16279,14670],{"class":73},[52,16281,16282,16284,16286],{"class":54,"line":118},[52,16283,7135],{"class":66},[52,16285,70],{"class":231},[52,16287,14769],{"class":58},[52,16289,16290,16292,16294],{"class":54,"line":594},[52,16291,13201],{"class":58},[52,16293,15846],{"class":73},[52,16295,1746],{"class":58},[52,16297,16298,16300,16302],{"class":54,"line":600},[52,16299,16201],{"class":58},[52,16301,16204],{"class":73},[52,16303,1746],{"class":58},[52,16305,16306,16308,16310],{"class":54,"line":606},[52,16307,14793],{"class":58},[52,16309,12981],{"class":371},[52,16311,1746],{"class":58},[52,16313,16314,16316,16318],{"class":54,"line":653},[52,16315,14802],{"class":58},[52,16317,16221],{"class":371},[52,16319,1746],{"class":58},[52,16321,16322,16324],{"class":54,"line":662},[52,16323,15491],{"class":58},[52,16325,16230],{"class":371},[52,16327,16328],{"class":54,"line":671},[52,16329,14827],{"class":58},[52,16331,16332],{"class":54,"line":676},[52,16333,1224],{"class":58},[52,16335,16336,16338,16340],{"class":54,"line":682},[52,16337,121],{"class":58},[52,16339,63],{"class":371},[52,16341,77],{"class":58},[43,16343,16344],{"className":419,"code":16249,"language":420,"meta":48,"style":48},[31,16345,16346,16360,16366,16374,16382,16390,16398,16406,16414,16420,16424,16428],{"__ignoreMap":48},[52,16347,16348,16350,16352,16354,16356,16358],{"class":54,"line":55},[52,16349,59],{"class":58},[52,16351,63],{"class":371},[52,16353,67],{"class":66},[52,16355,70],{"class":231},[52,16357,319],{"class":73},[52,16359,77],{"class":58},[52,16361,16362,16364],{"class":54,"line":80},[52,16363,83],{"class":58},[52,16365,7120],{"class":371},[52,16367,16368,16370,16372],{"class":54,"line":108},[52,16369,7125],{"class":66},[52,16371,70],{"class":231},[52,16373,14670],{"class":73},[52,16375,16376,16378,16380],{"class":54,"line":118},[52,16377,7135],{"class":66},[52,16379,70],{"class":231},[52,16381,14769],{"class":58},[52,16383,16384,16386,16388],{"class":54,"line":594},[52,16385,13201],{"class":58},[52,16387,15846],{"class":73},[52,16389,1746],{"class":58},[52,16391,16392,16394,16396],{"class":54,"line":600},[52,16393,16201],{"class":58},[52,16395,16204],{"class":73},[52,16397,1746],{"class":58},[52,16399,16400,16402,16404],{"class":54,"line":606},[52,16401,14793],{"class":58},[52,16403,12981],{"class":371},[52,16405,1746],{"class":58},[52,16407,16408,16410,16412],{"class":54,"line":653},[52,16409,14802],{"class":58},[52,16411,16221],{"class":371},[52,16413,1746],{"class":58},[52,16415,16416,16418],{"class":54,"line":662},[52,16417,15491],{"class":58},[52,16419,16230],{"class":371},[52,16421,16422],{"class":54,"line":671},[52,16423,14827],{"class":58},[52,16425,16426],{"class":54,"line":676},[52,16427,1224],{"class":58},[52,16429,16430,16432,16434],{"class":54,"line":682},[52,16431,121],{"class":58},[52,16433,63],{"class":371},[52,16435,77],{"class":58},[43,16437,16439],{"className":222,"code":16438,"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,16440,16441,16455,16459,16463,16471,16475,16483,16487,16495,16504,16512,16520,16526,16530,16534,16538,16542],{"__ignoreMap":48},[52,16442,16443,16445,16447,16449,16451,16453],{"class":54,"line":55},[52,16444,1721],{"class":231},[52,16446,1724],{"class":371},[52,16448,1727],{"class":231},[52,16450,1730],{"class":231},[52,16452,1733],{"class":66},[52,16454,1736],{"class":58},[52,16456,16457],{"class":54,"line":80},[52,16458,1751],{"class":58},[52,16460,16461],{"class":54,"line":108},[52,16462,13196],{"class":58},[52,16464,16465,16467,16469],{"class":54,"line":118},[52,16466,13201],{"class":58},[52,16468,2869],{"class":73},[52,16470,1746],{"class":58},[52,16472,16473],{"class":54,"line":594},[52,16474,13210],{"class":58},[52,16476,16477,16479,16481],{"class":54,"line":600},[52,16478,15088],{"class":58},[52,16480,15091],{"class":73},[52,16482,1746],{"class":58},[52,16484,16485],{"class":54,"line":606},[52,16486,15098],{"class":58},[52,16488,16489,16491,16493],{"class":54,"line":653},[52,16490,15103],{"class":58},[52,16492,15846],{"class":73},[52,16494,1746],{"class":58},[52,16496,16497,16500,16502],{"class":54,"line":662},[52,16498,16499],{"class":58}," axis: ",[52,16501,16204],{"class":73},[52,16503,1746],{"class":58},[52,16505,16506,16508,16510],{"class":54,"line":671},[52,16507,15121],{"class":58},[52,16509,12981],{"class":371},[52,16511,1746],{"class":58},[52,16513,16514,16516,16518],{"class":54,"line":676},[52,16515,15130],{"class":58},[52,16517,16221],{"class":371},[52,16519,1746],{"class":58},[52,16521,16522,16524],{"class":54,"line":682},[52,16523,15775],{"class":58},[52,16525,16230],{"class":371},[52,16527,16528],{"class":54,"line":698},[52,16529,15155],{"class":58},[52,16531,16532],{"class":54,"line":707},[52,16533,3125],{"class":58},[52,16535,16536],{"class":54,"line":2327},[52,16537,3130],{"class":58},[52,16539,16540],{"class":54,"line":7143},[52,16541,1773],{"class":58},[52,16543,16544],{"class":54,"line":7153},[52,16545,1778],{"class":58},[19,16547],{":preset":16548},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,16550,16551],{},[151,16552,15179],{},[1780,16554,16555,16567],{},[1783,16556,16557],{},[1786,16558,16559,16561,16563,16565],{},[1789,16560,12618],{},[1789,16562,12621],{},[1789,16564,12624],{},[1789,16566,1794],{},[1796,16568,16569,16586,16601,16616,16644,16663],{},[1786,16570,16571,16576,16581,16583],{},[1801,16572,16573],{},[31,16574,16575],{},"axis",[1801,16577,16578],{},[31,16579,16580],{},"'x' | 'y'",[1801,16582,15210],{},[1801,16584,16585],{},"Which pointer axis drives this prop.",[1786,16587,16588,16592,16596,16598],{},[1801,16589,16590],{},[31,16591,15227],{},[1801,16593,16594],{},[31,16595,12640],{},[1801,16597,15210],{},[1801,16599,16600],{},"Output value when axis is at 0 (left or top).",[1786,16602,16603,16607,16611,16613],{},[1801,16604,16605],{},[31,16606,15243],{},[1801,16608,16609],{},[31,16610,12640],{},[1801,16612,15210],{},[1801,16614,16615],{},"Output value when axis is at 1 (right or bottom).",[1786,16617,16618,16623,16627,16631],{},[1801,16619,16620],{},[31,16621,16622],{},"curve",[1801,16624,16625],{},[31,16626,12640],{},[1801,16628,16629],{},[31,16630,6161],{},[1801,16632,16633,16634,1536,16636,16638,16639,16641,16642,6978],{},"Power curve: ",[31,16635,12650],{},[31,16637,12653],{},". Negative = biased toward ",[31,16640,15227],{},", positive = toward ",[31,16643,15243],{},[1786,16645,16646,16650,16654,16658],{},[1801,16647,16648],{},[31,16649,15915],{},[1801,16651,16652],{},[31,16653,12640],{},[1801,16655,16656],{},[31,16657,6161],{},[1801,16659,16660,16661,6978],{},"Lag (0–1). Same as ",[31,16662,15322],{},[1786,16664,16665,16669,16673,16677],{},[1801,16666,16667],{},[31,16668,15936],{},[1801,16670,16671],{},[31,16672,12640],{},[1801,16674,16675],{},[31,16676,6161],{},[1801,16678,16679,16680,6978],{},"Spring bounce (0–1). Same as ",[31,16681,15322],{},[15,16683,16684,16686],{},[151,16685,15312],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,16688,16689],{"id":16689},"map",[15,16691,16692],{},"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,16694,16695,16696,16698],{},"First, give the source component an ",[31,16697,6545],{},". Then reference that id in the driver:",[217,16700,16701,16839,16984,17121,17257],{":tabs":1543},[43,16702,16704],{"className":45,"code":16703,"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,16705,16706,16720,16725,16731,16740,16750,16759,16763,16767,16772,16779,16788,16793,16798,16803,16808,16813,16818,16823,16827,16831],{"__ignoreMap":48},[52,16707,16708,16710,16712,16714,16716,16718],{"class":54,"line":55},[52,16709,59],{"class":58},[52,16711,63],{"class":62},[52,16713,67],{"class":66},[52,16715,70],{"class":58},[52,16717,319],{"class":73},[52,16719,77],{"class":58},[52,16721,16722],{"class":54,"line":80},[52,16723,16724],{"class":559}," \u003C!-- Source layer: named 'grad' -->\n",[52,16726,16727,16729],{"class":54,"line":108},[52,16728,83],{"class":58},[52,16730,1171],{"class":62},[52,16732,16733,16735,16737],{"class":54,"line":118},[52,16734,7067],{"class":66},[52,16736,70],{"class":58},[52,16738,16739],{"class":73},"\"grad\"\n",[52,16741,16742,16745,16747],{"class":54,"line":594},[52,16743,16744],{"class":66}," color-a",[52,16746,70],{"class":58},[52,16748,16749],{"class":73},"\"#000000\"\n",[52,16751,16752,16755,16757],{"class":54,"line":600},[52,16753,16754],{"class":66}," color-b",[52,16756,70],{"class":58},[52,16758,7081],{"class":73},[52,16760,16761],{"class":54,"line":606},[52,16762,1224],{"class":58},[52,16764,16765],{"class":54,"line":653},[52,16766,597],{"emptyLinePlaceholder":171},[52,16768,16769],{"class":54,"line":662},[52,16770,16771],{"class":559}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[52,16773,16774,16776],{"class":54,"line":671},[52,16775,83],{"class":58},[52,16777,16778],{"class":62},"DotGrid\n",[52,16780,16781,16784,16786],{"class":54,"line":676},[52,16782,16783],{"class":66}," :dot-size",[52,16785,70],{"class":58},[52,16787,14680],{"class":73},[52,16789,16790],{"class":54,"line":682},[52,16791,16792],{"class":73}," type: 'map',\n",[52,16794,16795],{"class":54,"line":698},[52,16796,16797],{"class":73}," source: 'grad',\n",[52,16799,16800],{"class":54,"line":707},[52,16801,16802],{"class":73}," channel: 'luminance',\n",[52,16804,16805],{"class":54,"line":2327},[52,16806,16807],{"class":73}," inputMin: 0,\n",[52,16809,16810],{"class":54,"line":7143},[52,16811,16812],{"class":73}," inputMax: 1,\n",[52,16814,16815],{"class":54,"line":7153},[52,16816,16817],{"class":73}," outputMin: 0.02,\n",[52,16819,16820],{"class":54,"line":7164},[52,16821,16822],{"class":73}," outputMax: 0.12\n",[52,16824,16825],{"class":54,"line":7169},[52,16826,14715],{"class":73},[52,16828,16829],{"class":54,"line":8491},[52,16830,1224],{"class":58},[52,16832,16833,16835,16837],{"class":54,"line":8496},[52,16834,121],{"class":58},[52,16836,63],{"class":62},[52,16838,77],{"class":58},[43,16840,16842],{"className":360,"code":16841,"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,16843,16844,16858,16864,16872,16880,16888,16892,16898,16907,16916,16925,16934,16943,16952,16961,16968,16972,16976],{"__ignoreMap":48},[52,16845,16846,16848,16850,16852,16854,16856],{"class":54,"line":55},[52,16847,59],{"class":58},[52,16849,63],{"class":371},[52,16851,374],{"class":66},[52,16853,70],{"class":231},[52,16855,319],{"class":73},[52,16857,77],{"class":58},[52,16859,16860,16862],{"class":54,"line":80},[52,16861,83],{"class":58},[52,16863,1171],{"class":371},[52,16865,16866,16868,16870],{"class":54,"line":108},[52,16867,7067],{"class":66},[52,16869,70],{"class":231},[52,16871,16739],{"class":73},[52,16873,16874,16876,16878],{"class":54,"line":118},[52,16875,1176],{"class":66},[52,16877,70],{"class":231},[52,16879,16749],{"class":73},[52,16881,16882,16884,16886],{"class":54,"line":594},[52,16883,1186],{"class":66},[52,16885,70],{"class":231},[52,16887,7081],{"class":73},[52,16889,16890],{"class":54,"line":600},[52,16891,1224],{"class":58},[52,16893,16894,16896],{"class":54,"line":606},[52,16895,83],{"class":58},[52,16897,16778],{"class":371},[52,16899,16900,16903,16905],{"class":54,"line":653},[52,16901,16902],{"class":66}," dotSize",[52,16904,70],{"class":231},[52,16906,14769],{"class":58},[52,16908,16909,16911,16914],{"class":54,"line":662},[52,16910,13201],{"class":58},[52,16912,16913],{"class":73},"'map'",[52,16915,1746],{"class":58},[52,16917,16918,16921,16923],{"class":54,"line":671},[52,16919,16920],{"class":58}," source: ",[52,16922,14418],{"class":73},[52,16924,1746],{"class":58},[52,16926,16927,16930,16932],{"class":54,"line":676},[52,16928,16929],{"class":58}," channel: ",[52,16931,7697],{"class":73},[52,16933,1746],{"class":58},[52,16935,16936,16939,16941],{"class":54,"line":682},[52,16937,16938],{"class":58}," inputMin: ",[52,16940,6161],{"class":371},[52,16942,1746],{"class":58},[52,16944,16945,16948,16950],{"class":54,"line":698},[52,16946,16947],{"class":58}," inputMax: ",[52,16949,6165],{"class":371},[52,16951,1746],{"class":58},[52,16953,16954,16956,16959],{"class":54,"line":707},[52,16955,14793],{"class":58},[52,16957,16958],{"class":371},"0.02",[52,16960,1746],{"class":58},[52,16962,16963,16965],{"class":54,"line":2327},[52,16964,14802],{"class":58},[52,16966,16967],{"class":371},"0.12\n",[52,16969,16970],{"class":54,"line":7143},[52,16971,14827],{"class":58},[52,16973,16974],{"class":54,"line":7153},[52,16975,1224],{"class":58},[52,16977,16978,16980,16982],{"class":54,"line":7164},[52,16979,121],{"class":58},[52,16981,63],{"class":371},[52,16983,77],{"class":58},[43,16985,16987],{"className":419,"code":16986,"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,16988,16989,17003,17009,17017,17025,17033,17037,17043,17051,17059,17067,17075,17083,17091,17099,17105,17109,17113],{"__ignoreMap":48},[52,16990,16991,16993,16995,16997,16999,17001],{"class":54,"line":55},[52,16992,59],{"class":58},[52,16994,63],{"class":371},[52,16996,67],{"class":66},[52,16998,70],{"class":231},[52,17000,319],{"class":73},[52,17002,77],{"class":58},[52,17004,17005,17007],{"class":54,"line":80},[52,17006,83],{"class":58},[52,17008,1171],{"class":371},[52,17010,17011,17013,17015],{"class":54,"line":108},[52,17012,7067],{"class":66},[52,17014,70],{"class":231},[52,17016,16739],{"class":73},[52,17018,17019,17021,17023],{"class":54,"line":118},[52,17020,1176],{"class":66},[52,17022,70],{"class":231},[52,17024,16749],{"class":73},[52,17026,17027,17029,17031],{"class":54,"line":594},[52,17028,1186],{"class":66},[52,17030,70],{"class":231},[52,17032,7081],{"class":73},[52,17034,17035],{"class":54,"line":600},[52,17036,1224],{"class":58},[52,17038,17039,17041],{"class":54,"line":606},[52,17040,83],{"class":58},[52,17042,16778],{"class":371},[52,17044,17045,17047,17049],{"class":54,"line":653},[52,17046,16902],{"class":66},[52,17048,70],{"class":231},[52,17050,14769],{"class":58},[52,17052,17053,17055,17057],{"class":54,"line":662},[52,17054,13201],{"class":58},[52,17056,16913],{"class":73},[52,17058,1746],{"class":58},[52,17060,17061,17063,17065],{"class":54,"line":671},[52,17062,16920],{"class":58},[52,17064,14418],{"class":73},[52,17066,1746],{"class":58},[52,17068,17069,17071,17073],{"class":54,"line":676},[52,17070,16929],{"class":58},[52,17072,7697],{"class":73},[52,17074,1746],{"class":58},[52,17076,17077,17079,17081],{"class":54,"line":682},[52,17078,16938],{"class":58},[52,17080,6161],{"class":371},[52,17082,1746],{"class":58},[52,17084,17085,17087,17089],{"class":54,"line":698},[52,17086,16947],{"class":58},[52,17088,6165],{"class":371},[52,17090,1746],{"class":58},[52,17092,17093,17095,17097],{"class":54,"line":707},[52,17094,14793],{"class":58},[52,17096,16958],{"class":371},[52,17098,1746],{"class":58},[52,17100,17101,17103],{"class":54,"line":2327},[52,17102,14802],{"class":58},[52,17104,16967],{"class":371},[52,17106,17107],{"class":54,"line":7143},[52,17108,14827],{"class":58},[52,17110,17111],{"class":54,"line":7153},[52,17112,1224],{"class":58},[52,17114,17115,17117,17119],{"class":54,"line":7164},[52,17116,121],{"class":58},[52,17118,63],{"class":371},[52,17120,77],{"class":58},[43,17122,17123],{"className":419,"code":16986,"language":420,"meta":48,"style":48},[31,17124,17125,17139,17145,17153,17161,17169,17173,17179,17187,17195,17203,17211,17219,17227,17235,17241,17245,17249],{"__ignoreMap":48},[52,17126,17127,17129,17131,17133,17135,17137],{"class":54,"line":55},[52,17128,59],{"class":58},[52,17130,63],{"class":371},[52,17132,67],{"class":66},[52,17134,70],{"class":231},[52,17136,319],{"class":73},[52,17138,77],{"class":58},[52,17140,17141,17143],{"class":54,"line":80},[52,17142,83],{"class":58},[52,17144,1171],{"class":371},[52,17146,17147,17149,17151],{"class":54,"line":108},[52,17148,7067],{"class":66},[52,17150,70],{"class":231},[52,17152,16739],{"class":73},[52,17154,17155,17157,17159],{"class":54,"line":118},[52,17156,1176],{"class":66},[52,17158,70],{"class":231},[52,17160,16749],{"class":73},[52,17162,17163,17165,17167],{"class":54,"line":594},[52,17164,1186],{"class":66},[52,17166,70],{"class":231},[52,17168,7081],{"class":73},[52,17170,17171],{"class":54,"line":600},[52,17172,1224],{"class":58},[52,17174,17175,17177],{"class":54,"line":606},[52,17176,83],{"class":58},[52,17178,16778],{"class":371},[52,17180,17181,17183,17185],{"class":54,"line":653},[52,17182,16902],{"class":66},[52,17184,70],{"class":231},[52,17186,14769],{"class":58},[52,17188,17189,17191,17193],{"class":54,"line":662},[52,17190,13201],{"class":58},[52,17192,16913],{"class":73},[52,17194,1746],{"class":58},[52,17196,17197,17199,17201],{"class":54,"line":671},[52,17198,16920],{"class":58},[52,17200,14418],{"class":73},[52,17202,1746],{"class":58},[52,17204,17205,17207,17209],{"class":54,"line":676},[52,17206,16929],{"class":58},[52,17208,7697],{"class":73},[52,17210,1746],{"class":58},[52,17212,17213,17215,17217],{"class":54,"line":682},[52,17214,16938],{"class":58},[52,17216,6161],{"class":371},[52,17218,1746],{"class":58},[52,17220,17221,17223,17225],{"class":54,"line":698},[52,17222,16947],{"class":58},[52,17224,6165],{"class":371},[52,17226,1746],{"class":58},[52,17228,17229,17231,17233],{"class":54,"line":707},[52,17230,14793],{"class":58},[52,17232,16958],{"class":371},[52,17234,1746],{"class":58},[52,17236,17237,17239],{"class":54,"line":2327},[52,17238,14802],{"class":58},[52,17240,16967],{"class":371},[52,17242,17243],{"class":54,"line":7143},[52,17244,14827],{"class":58},[52,17246,17247],{"class":54,"line":7153},[52,17248,1224],{"class":58},[52,17250,17251,17253,17255],{"class":54,"line":7164},[52,17252,121],{"class":58},[52,17254,63],{"class":371},[52,17256,77],{"class":58},[43,17258,17260],{"className":222,"code":17259,"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,17261,17262,17276,17280,17284,17292,17301,17315,17319,17323,17332,17336,17341,17349,17358,17367,17376,17385,17393,17400,17404,17408,17412,17416],{"__ignoreMap":48},[52,17263,17264,17266,17268,17270,17272,17274],{"class":54,"line":55},[52,17265,1721],{"class":231},[52,17267,1724],{"class":371},[52,17269,1727],{"class":231},[52,17271,1730],{"class":231},[52,17273,1733],{"class":66},[52,17275,1736],{"class":58},[52,17277,17278],{"class":54,"line":80},[52,17279,1751],{"class":58},[52,17281,17282],{"class":54,"line":108},[52,17283,13196],{"class":58},[52,17285,17286,17288,17290],{"class":54,"line":118},[52,17287,13201],{"class":58},[52,17289,2126],{"class":73},[52,17291,1746],{"class":58},[52,17293,17294,17297,17299],{"class":54,"line":594},[52,17295,17296],{"class":58}," id: ",[52,17298,14418],{"class":73},[52,17300,1746],{"class":58},[52,17302,17303,17306,17309,17311,17313],{"class":54,"line":600},[52,17304,17305],{"class":58}," props: { colorA: ",[52,17307,17308],{"class":73},"'#000000'",[52,17310,7663],{"class":58},[52,17312,7660],{"class":73},[52,17314,13220],{"class":58},[52,17316,17317],{"class":54,"line":606},[52,17318,13229],{"class":58},[52,17320,17321],{"class":54,"line":653},[52,17322,13196],{"class":58},[52,17324,17325,17327,17330],{"class":54,"line":662},[52,17326,13201],{"class":58},[52,17328,17329],{"class":73},"'DotGrid'",[52,17331,1746],{"class":58},[52,17333,17334],{"class":54,"line":671},[52,17335,13210],{"class":58},[52,17337,17338],{"class":54,"line":676},[52,17339,17340],{"class":58}," dotSize: {\n",[52,17342,17343,17345,17347],{"class":54,"line":682},[52,17344,15103],{"class":58},[52,17346,16913],{"class":73},[52,17348,1746],{"class":58},[52,17350,17351,17354,17356],{"class":54,"line":698},[52,17352,17353],{"class":58}," source: ",[52,17355,14418],{"class":73},[52,17357,1746],{"class":58},[52,17359,17360,17363,17365],{"class":54,"line":707},[52,17361,17362],{"class":58}," channel: ",[52,17364,7697],{"class":73},[52,17366,1746],{"class":58},[52,17368,17369,17372,17374],{"class":54,"line":2327},[52,17370,17371],{"class":58}," inputMin: ",[52,17373,6161],{"class":371},[52,17375,1746],{"class":58},[52,17377,17378,17381,17383],{"class":54,"line":7143},[52,17379,17380],{"class":58}," inputMax: ",[52,17382,6165],{"class":371},[52,17384,1746],{"class":58},[52,17386,17387,17389,17391],{"class":54,"line":7153},[52,17388,15121],{"class":58},[52,17390,6161],{"class":371},[52,17392,1746],{"class":58},[52,17394,17395,17397],{"class":54,"line":7164},[52,17396,15130],{"class":58},[52,17398,17399],{"class":371},"1\n",[52,17401,17402],{"class":54,"line":7169},[52,17403,15155],{"class":58},[52,17405,17406],{"class":54,"line":8491},[52,17407,3125],{"class":58},[52,17409,17410],{"class":54,"line":8496},[52,17411,3130],{"class":58},[52,17413,17414],{"class":54,"line":9568},[52,17415,1773],{"class":58},[52,17417,17418],{"class":54,"line":9575},[52,17419,1778],{"class":58},[19,17421],{":preset":17422},"{\"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,17424,17425],{},[151,17426,15179],{},[1780,17428,17429,17441],{},[1783,17430,17431],{},[1786,17432,17433,17435,17437,17439],{},[1789,17434,12618],{},[1789,17436,12621],{},[1789,17438,12624],{},[1789,17440,1794],{},[1796,17442,17443,17461,17485,17501,17517,17532,17547],{},[1786,17444,17445,17450,17454,17456],{},[1801,17446,17447],{},[31,17448,17449],{},"source",[1801,17451,17452],{},[31,17453,6549],{},[1801,17455,15210],{},[1801,17457,1825,17458,17460],{},[31,17459,6545],{}," of the source component to sample from.",[1786,17462,17463,17468,17472,17474],{},[1801,17464,17465],{},[31,17466,17467],{},"channel",[1801,17469,17470],{},[31,17471,6549],{},[1801,17473,15210],{},[1801,17475,17476,17477,1881,17479,1881,17481,1881,17483,6978],{},"Which channel to extract. ",[31,17478,6998],{},[31,17480,7006],{},[31,17482,7014],{},[31,17484,7022],{},[1786,17486,17487,17492,17496,17498],{},[1801,17488,17489],{},[31,17490,17491],{},"inputMin",[1801,17493,17494],{},[31,17495,12640],{},[1801,17497,15210],{},[1801,17499,17500],{},"Source values at or below this are treated as 0.",[1786,17502,17503,17508,17512,17514],{},[1801,17504,17505],{},[31,17506,17507],{},"inputMax",[1801,17509,17510],{},[31,17511,12640],{},[1801,17513,15210],{},[1801,17515,17516],{},"Source values at or above this are treated as 1.",[1786,17518,17519,17523,17527,17529],{},[1801,17520,17521],{},[31,17522,15227],{},[1801,17524,17525],{},[31,17526,12640],{},[1801,17528,15210],{},[1801,17530,17531],{},"Output value when input = 0.",[1786,17533,17534,17538,17542,17544],{},[1801,17535,17536],{},[31,17537,15243],{},[1801,17539,17540],{},[31,17541,12640],{},[1801,17543,15210],{},[1801,17545,17546],{},"Output value when input = 1.",[1786,17548,17549,17553,17557,17561],{},[1801,17550,17551],{},[31,17552,16622],{},[1801,17554,17555],{},[31,17556,12640],{},[1801,17558,17559],{},[31,17560,6161],{},[1801,17562,17563,17564,1536,17566,6978],{},"Power curve applied after normalization. ",[31,17565,12650],{},[31,17567,12653],{},[15,17569,1825,17570,17572],{},[31,17571,16689],{}," 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,17574,17576],{"id":17575},"combining-dynamic-props","Combining dynamic props",[15,17578,17579],{},"Multiple dynamic props can be active on the same component — one per prop:",[217,17581,17582,17688,17815,17938],{":tabs":219},[43,17583,17585],{"className":45,"code":17584,"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,17586,17587,17601,17624,17631,17640,17649,17653,17657,17662,17667,17672,17676,17680],{"__ignoreMap":48},[52,17588,17589,17591,17593,17595,17597,17599],{"class":54,"line":55},[52,17590,59],{"class":58},[52,17592,63],{"class":62},[52,17594,67],{"class":66},[52,17596,70],{"class":58},[52,17598,319],{"class":73},[52,17600,77],{"class":58},[52,17602,17603,17605,17607,17610,17612,17614,17617,17619,17622],{"class":54,"line":80},[52,17604,83],{"class":58},[52,17606,86],{"class":62},[52,17608,17609],{"class":66}," color-a",[52,17611,70],{"class":58},[52,17613,94],{"class":73},[52,17615,17616],{"class":66}," color-b",[52,17618,70],{"class":58},[52,17620,17621],{"class":73},"\"#4f46e5\"",[52,17623,105],{"class":58},[52,17625,17626,17628],{"class":54,"line":108},[52,17627,83],{"class":58},[52,17629,17630],{"class":62},"LensFlare\n",[52,17632,17633,17635,17637],{"class":54,"line":118},[52,17634,15387],{"class":66},[52,17636,70],{"class":58},[52,17638,17639],{"class":73},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[52,17641,17642,17645,17647],{"class":54,"line":594},[52,17643,17644],{"class":66}," :intensity",[52,17646,70],{"class":58},[52,17648,14680],{"class":73},[52,17650,17651],{"class":54,"line":600},[52,17652,14685],{"class":73},[52,17654,17655],{"class":54,"line":606},[52,17656,14690],{"class":73},[52,17658,17659],{"class":54,"line":653},[52,17660,17661],{"class":73}," outputMin: 0.4,\n",[52,17663,17664],{"class":54,"line":662},[52,17665,17666],{"class":73}," outputMax: 1.0,\n",[52,17668,17669],{"class":54,"line":671},[52,17670,17671],{"class":73}," speed: 0.6\n",[52,17673,17674],{"class":54,"line":676},[52,17675,14715],{"class":73},[52,17677,17678],{"class":54,"line":682},[52,17679,1224],{"class":58},[52,17681,17682,17684,17686],{"class":54,"line":698},[52,17683,121],{"class":58},[52,17685,63],{"class":62},[52,17687,77],{"class":58},[43,17689,17691],{"className":360,"code":17690,"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,17692,17693,17707,17727,17733,17751,17760,17768,17776,17784,17792,17799,17803,17807],{"__ignoreMap":48},[52,17694,17695,17697,17699,17701,17703,17705],{"class":54,"line":55},[52,17696,59],{"class":58},[52,17698,63],{"class":371},[52,17700,374],{"class":66},[52,17702,70],{"class":231},[52,17704,319],{"class":73},[52,17706,77],{"class":58},[52,17708,17709,17711,17713,17715,17717,17719,17721,17723,17725],{"class":54,"line":80},[52,17710,83],{"class":58},[52,17712,86],{"class":371},[52,17714,89],{"class":66},[52,17716,70],{"class":231},[52,17718,94],{"class":73},[52,17720,97],{"class":66},[52,17722,70],{"class":231},[52,17724,17621],{"class":73},[52,17726,105],{"class":58},[52,17728,17729,17731],{"class":54,"line":108},[52,17730,83],{"class":58},[52,17732,17630],{"class":371},[52,17734,17735,17737,17739,17742,17744,17747,17749],{"class":54,"line":118},[52,17736,15473],{"class":66},[52,17738,70],{"class":231},[52,17740,17741],{"class":58},"{{ type: ",[52,17743,15484],{"class":73},[52,17745,17746],{"class":58},", smoothing: ",[52,17748,12981],{"class":371},[52,17750,2466],{"class":58},[52,17752,17753,17756,17758],{"class":54,"line":594},[52,17754,17755],{"class":66}," intensity",[52,17757,70],{"class":231},[52,17759,14769],{"class":58},[52,17761,17762,17764,17766],{"class":54,"line":600},[52,17763,13201],{"class":58},[52,17765,14776],{"class":73},[52,17767,1746],{"class":58},[52,17769,17770,17772,17774],{"class":54,"line":606},[52,17771,14783],{"class":58},[52,17773,14786],{"class":73},[52,17775,1746],{"class":58},[52,17777,17778,17780,17782],{"class":54,"line":653},[52,17779,14793],{"class":58},[52,17781,5737],{"class":371},[52,17783,1746],{"class":58},[52,17785,17786,17788,17790],{"class":54,"line":662},[52,17787,14802],{"class":58},[52,17789,15268],{"class":371},[52,17791,1746],{"class":58},[52,17793,17794,17796],{"class":54,"line":671},[52,17795,14811],{"class":58},[52,17797,17798],{"class":371},"0.6\n",[52,17800,17801],{"class":54,"line":676},[52,17802,14827],{"class":58},[52,17804,17805],{"class":54,"line":682},[52,17806,1224],{"class":58},[52,17808,17809,17811,17813],{"class":54,"line":698},[52,17810,121],{"class":58},[52,17812,63],{"class":371},[52,17814,77],{"class":58},[43,17816,17818],{"className":419,"code":17817,"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,17819,17820,17834,17854,17860,17876,17884,17892,17900,17908,17916,17922,17926,17930],{"__ignoreMap":48},[52,17821,17822,17824,17826,17828,17830,17832],{"class":54,"line":55},[52,17823,59],{"class":58},[52,17825,63],{"class":371},[52,17827,67],{"class":66},[52,17829,70],{"class":231},[52,17831,319],{"class":73},[52,17833,77],{"class":58},[52,17835,17836,17838,17840,17842,17844,17846,17848,17850,17852],{"class":54,"line":80},[52,17837,83],{"class":58},[52,17839,86],{"class":371},[52,17841,89],{"class":66},[52,17843,70],{"class":231},[52,17845,94],{"class":73},[52,17847,97],{"class":66},[52,17849,70],{"class":231},[52,17851,17621],{"class":73},[52,17853,105],{"class":58},[52,17855,17856,17858],{"class":54,"line":108},[52,17857,83],{"class":58},[52,17859,17630],{"class":371},[52,17861,17862,17864,17866,17868,17870,17872,17874],{"class":54,"line":118},[52,17863,15473],{"class":66},[52,17865,70],{"class":231},[52,17867,17741],{"class":58},[52,17869,15484],{"class":73},[52,17871,17746],{"class":58},[52,17873,12981],{"class":371},[52,17875,2466],{"class":58},[52,17877,17878,17880,17882],{"class":54,"line":594},[52,17879,17755],{"class":66},[52,17881,70],{"class":231},[52,17883,14769],{"class":58},[52,17885,17886,17888,17890],{"class":54,"line":600},[52,17887,13201],{"class":58},[52,17889,14776],{"class":73},[52,17891,1746],{"class":58},[52,17893,17894,17896,17898],{"class":54,"line":606},[52,17895,14783],{"class":58},[52,17897,14786],{"class":73},[52,17899,1746],{"class":58},[52,17901,17902,17904,17906],{"class":54,"line":653},[52,17903,14793],{"class":58},[52,17905,5737],{"class":371},[52,17907,1746],{"class":58},[52,17909,17910,17912,17914],{"class":54,"line":662},[52,17911,14802],{"class":58},[52,17913,15268],{"class":371},[52,17915,1746],{"class":58},[52,17917,17918,17920],{"class":54,"line":671},[52,17919,14811],{"class":58},[52,17921,17798],{"class":371},[52,17923,17924],{"class":54,"line":676},[52,17925,14827],{"class":58},[52,17927,17928],{"class":54,"line":682},[52,17929,1224],{"class":58},[52,17931,17932,17934,17936],{"class":54,"line":698},[52,17933,121],{"class":58},[52,17935,63],{"class":371},[52,17937,77],{"class":58},[43,17939,17940],{"className":419,"code":17817,"language":420,"meta":48,"style":48},[31,17941,17942,17956,17976,17982,17998,18006,18014,18022,18030,18038,18044,18048,18052],{"__ignoreMap":48},[52,17943,17944,17946,17948,17950,17952,17954],{"class":54,"line":55},[52,17945,59],{"class":58},[52,17947,63],{"class":371},[52,17949,67],{"class":66},[52,17951,70],{"class":231},[52,17953,319],{"class":73},[52,17955,77],{"class":58},[52,17957,17958,17960,17962,17964,17966,17968,17970,17972,17974],{"class":54,"line":80},[52,17959,83],{"class":58},[52,17961,86],{"class":371},[52,17963,89],{"class":66},[52,17965,70],{"class":231},[52,17967,94],{"class":73},[52,17969,97],{"class":66},[52,17971,70],{"class":231},[52,17973,17621],{"class":73},[52,17975,105],{"class":58},[52,17977,17978,17980],{"class":54,"line":108},[52,17979,83],{"class":58},[52,17981,17630],{"class":371},[52,17983,17984,17986,17988,17990,17992,17994,17996],{"class":54,"line":118},[52,17985,15473],{"class":66},[52,17987,70],{"class":231},[52,17989,17741],{"class":58},[52,17991,15484],{"class":73},[52,17993,17746],{"class":58},[52,17995,12981],{"class":371},[52,17997,2466],{"class":58},[52,17999,18000,18002,18004],{"class":54,"line":594},[52,18001,17755],{"class":66},[52,18003,70],{"class":231},[52,18005,14769],{"class":58},[52,18007,18008,18010,18012],{"class":54,"line":600},[52,18009,13201],{"class":58},[52,18011,14776],{"class":73},[52,18013,1746],{"class":58},[52,18015,18016,18018,18020],{"class":54,"line":606},[52,18017,14783],{"class":58},[52,18019,14786],{"class":73},[52,18021,1746],{"class":58},[52,18023,18024,18026,18028],{"class":54,"line":653},[52,18025,14793],{"class":58},[52,18027,5737],{"class":371},[52,18029,1746],{"class":58},[52,18031,18032,18034,18036],{"class":54,"line":662},[52,18033,14802],{"class":58},[52,18035,15268],{"class":371},[52,18037,1746],{"class":58},[52,18039,18040,18042],{"class":54,"line":671},[52,18041,14811],{"class":58},[52,18043,17798],{"class":371},[52,18045,18046],{"class":54,"line":676},[52,18047,14827],{"class":58},[52,18049,18050],{"class":54,"line":682},[52,18051,1224],{"class":58},[52,18053,18054,18056,18058],{"class":54,"line":698},[52,18055,121],{"class":58},[52,18057,63],{"class":371},[52,18059,77],{"class":58},[23,18061,18063],{"id":18062},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,18065,18066,18067,18070],{},"In the JavaScript API, ",[31,18068,18069],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[43,18072,18074],{"className":222,"code":18073,"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,18075,18076,18081,18095,18099,18116,18120,18124,18128,18133,18145,18150,18159,18168,18177,18185,18189,18193,18197,18202],{"__ignoreMap":48},[52,18077,18078],{"class":54,"line":55},[52,18079,18080],{"class":559},"// Start with a static value\n",[52,18082,18083,18085,18087,18089,18091,18093],{"class":54,"line":80},[52,18084,1721],{"class":231},[52,18086,1724],{"class":371},[52,18088,1727],{"class":231},[52,18090,1730],{"class":231},[52,18092,1733],{"class":66},[52,18094,1736],{"class":58},[52,18096,18097],{"class":54,"line":108},[52,18098,1751],{"class":58},[52,18100,18101,18103,18105,18107,18110,18112,18114],{"class":54,"line":118},[52,18102,1756],{"class":58},[52,18104,2869],{"class":73},[52,18106,2872],{"class":58},[52,18108,18109],{"class":73},"'c'",[52,18111,5028],{"class":58},[52,18113,5737],{"class":371},[52,18115,1768],{"class":58},[52,18117,18118],{"class":54,"line":594},[52,18119,1773],{"class":58},[52,18121,18122],{"class":54,"line":600},[52,18123,1778],{"class":58},[52,18125,18126],{"class":54,"line":606},[52,18127,597],{"emptyLinePlaceholder":171},[52,18129,18130],{"class":54,"line":653},[52,18131,18132],{"class":559},"// Later: switch to animated\n",[52,18134,18135,18137,18139,18141,18143],{"class":54,"line":662},[52,18136,9096],{"class":58},[52,18138,9099],{"class":66},[52,18140,2289],{"class":58},[52,18142,18109],{"class":73},[52,18144,9458],{"class":58},[52,18146,18147],{"class":54,"line":671},[52,18148,18149],{"class":58}," radius: {\n",[52,18151,18152,18155,18157],{"class":54,"line":676},[52,18153,18154],{"class":58}," type: ",[52,18156,14776],{"class":73},[52,18158,1746],{"class":58},[52,18160,18161,18164,18166],{"class":54,"line":682},[52,18162,18163],{"class":58}," mode: ",[52,18165,14786],{"class":73},[52,18167,1746],{"class":58},[52,18169,18170,18173,18175],{"class":54,"line":698},[52,18171,18172],{"class":58}," outputMin: ",[52,18174,12951],{"class":371},[52,18176,1746],{"class":58},[52,18178,18179,18182],{"class":54,"line":707},[52,18180,18181],{"class":58}," outputMax: ",[52,18183,18184],{"class":371},"0.7\n",[52,18186,18187],{"class":54,"line":2327},[52,18188,2919],{"class":58},[52,18190,18191],{"class":54,"line":7143},[52,18192,1778],{"class":58},[52,18194,18195],{"class":54,"line":7153},[52,18196,597],{"emptyLinePlaceholder":171},[52,18198,18199],{"class":54,"line":7164},[52,18200,18201],{"class":559},"// Later: switch back to static\n",[52,18203,18204,18206,18208,18210,18212,18215,18217],{"class":54,"line":7169},[52,18205,9096],{"class":58},[52,18207,9099],{"class":66},[52,18209,2289],{"class":58},[52,18211,18109],{"class":73},[52,18213,18214],{"class":58},", { radius: ",[52,18216,5737],{"class":371},[52,18218,9111],{"class":58},[156,18220,12484],{},{"title":48,"searchDepth":80,"depth":80,"links":18222},[18223,18224,18225,18226,18227,18228],{"id":14530,"depth":80,"text":14530},{"id":15322,"depth":80,"text":15322},{"id":16060,"depth":80,"text":16060},{"id":16689,"depth":80,"text":16689},{"id":17575,"depth":80,"text":17576},{"id":18062,"depth":80,"text":18063},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":14569,"description":18229},"docs/guide/7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":18236,"title":18237,"body":18238,"category":7723,"description":20576,"exclude":167,"extension":168,"forceFramework":167,"icon":20577,"meta":20578,"navigation":171,"path":20579,"seo":20580,"stem":20581,"__hash__":20582},"guide/docs/guide/8.shape-effects.md","Shape / SDF Effects",{"type":8,"value":18239,"toc":20548},[18240,18243,18264,18267,18271,18287,18931,18934,18938,18944,18947,18980,19008,19010,19017,19020,19087,19132,19134,19141,19144,19229,19283,19285,19291,19294,19383,19433,19435,19442,19445,19534,19584,19586,19593,19596,19648,19683,19685,19692,19695,19782,19833,19835,19842,19845,19928,19977,19979,19986,19989,20062,20105,20107,20114,20117,20201,20252,20254,20261,20264,20348,20400,20402,20406,20409,20427,20546],[11,18241,18237],{"id":18242},"shape-sdf-effects",[15,18244,18245,18246,1881,18249,18252,18253,18256,18257,18260,18261,18263],{},"Several components — such as ",[151,18247,18248],{},"Glass",[151,18250,18251],{},"Neon",", and ",[151,18254,18255],{},"Emboss"," — are driven by a ",[1833,18258,18259],{},"shape",". These effects accept a ",[31,18262,18259],{}," 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,18265,18266],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[23,18268,18270],{"id":18269},"configuration","Configuration",[15,18272,1825,18273,18275,18276,18279,18280,16022,18283,18286],{},[31,18274,18259],{}," prop accepts a configuration object. The only required key is ",[31,18277,18278],{},"type",", which selects one of the built-in analytical shapes, like ",[31,18281,18282],{},"circleSDF",[31,18284,18285],{},"starSDF",". Everything else is shape-specific and optional (sensible defaults apply).",[217,18288,18289,18363,18508,18632,18756],{":tabs":1543},[43,18290,18292],{"className":45,"code":18291,"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,18293,18294,18299,18315,18319,18324,18339,18343,18348],{"__ignoreMap":48},[52,18295,18296],{"class":54,"line":55},[52,18297,18298],{"class":559},"\u003C!-- Circle (default) -->\n",[52,18300,18301,18303,18305,18308,18310,18313],{"class":54,"line":80},[52,18302,59],{"class":58},[52,18304,18248],{"class":62},[52,18306,18307],{"class":66}," :shape",[52,18309,70],{"class":58},[52,18311,18312],{"class":73},"'{ type: \"circleSDF\", radius: 0.35 }'",[52,18314,105],{"class":58},[52,18316,18317],{"class":54,"line":108},[52,18318,597],{"emptyLinePlaceholder":171},[52,18320,18321],{"class":54,"line":118},[52,18322,18323],{"class":559},"\u003C!-- Six-pointed star -->\n",[52,18325,18326,18328,18330,18332,18334,18337],{"class":54,"line":594},[52,18327,59],{"class":58},[52,18329,18251],{"class":62},[52,18331,18307],{"class":66},[52,18333,70],{"class":58},[52,18335,18336],{"class":73},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[52,18338,105],{"class":58},[52,18340,18341],{"class":54,"line":600},[52,18342,597],{"emptyLinePlaceholder":171},[52,18344,18345],{"class":54,"line":606},[52,18346,18347],{"class":559},"\u003C!-- Rounded rectangle -->\n",[52,18349,18350,18352,18354,18356,18358,18361],{"class":54,"line":653},[52,18351,59],{"class":58},[52,18353,18255],{"class":62},[52,18355,18307],{"class":66},[52,18357,70],{"class":58},[52,18359,18360],{"class":73},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[52,18362,105],{"class":58},[43,18364,18366],{"className":360,"code":18365,"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,18367,18368,18373,18408,18412,18417,18458,18462,18467],{"__ignoreMap":48},[52,18369,18370],{"class":54,"line":55},[52,18371,18372],{"class":559},"// Circle (default)\n",[52,18374,18375,18377,18379,18382,18384,18386,18389,18391,18394,18397,18400,18402,18405],{"class":54,"line":80},[52,18376,59],{"class":58},[52,18378,18248],{"class":371},[52,18380,18381],{"class":66}," shape",[52,18383,70],{"class":231},[52,18385,723],{"class":58},[52,18387,18388],{"class":371},"JSON",[52,18390,6978],{"class":58},[52,18392,18393],{"class":66},"stringify",[52,18395,18396],{"class":58},"({ type: ",[52,18398,18399],{"class":73},"\"circleSDF\"",[52,18401,4052],{"class":58},[52,18403,18404],{"class":371},"0.35",[52,18406,18407],{"class":58}," })} />\n",[52,18409,18410],{"class":54,"line":108},[52,18411,597],{"emptyLinePlaceholder":171},[52,18413,18414],{"class":54,"line":118},[52,18415,18416],{"class":559},"// Six-pointed star\n",[52,18418,18419,18421,18423,18425,18427,18429,18431,18433,18435,18437,18440,18442,18444,18447,18450,18453,18456],{"class":54,"line":594},[52,18420,59],{"class":58},[52,18422,18251],{"class":371},[52,18424,18381],{"class":66},[52,18426,70],{"class":231},[52,18428,723],{"class":58},[52,18430,18388],{"class":371},[52,18432,6978],{"class":58},[52,18434,18393],{"class":66},[52,18436,18396],{"class":58},[52,18438,18439],{"class":73},"\"starSDF\"",[52,18441,4052],{"class":58},[52,18443,18404],{"class":371},[52,18445,18446],{"class":58},", sides: ",[52,18448,18449],{"class":371},"6",[52,18451,18452],{"class":58},", innerRatio: ",[52,18454,18455],{"class":371},"0.45",[52,18457,18407],{"class":58},[52,18459,18460],{"class":54,"line":600},[52,18461,597],{"emptyLinePlaceholder":171},[52,18463,18464],{"class":54,"line":606},[52,18465,18466],{"class":559},"// Rounded rectangle\n",[52,18468,18469,18471,18473,18475,18477,18479,18481,18483,18485,18487,18490,18493,18495,18497,18500,18503,18506],{"class":54,"line":653},[52,18470,59],{"class":58},[52,18472,18255],{"class":371},[52,18474,18381],{"class":66},[52,18476,70],{"class":231},[52,18478,723],{"class":58},[52,18480,18388],{"class":371},[52,18482,6978],{"class":58},[52,18484,18393],{"class":66},[52,18486,18396],{"class":58},[52,18488,18489],{"class":73},"\"roundedRectSDF\"",[52,18491,18492],{"class":58},", width: ",[52,18494,5737],{"class":371},[52,18496,791],{"class":58},[52,18498,18499],{"class":371},"0.25",[52,18501,18502],{"class":58},", rounding: ",[52,18504,18505],{"class":371},"0.06",[52,18507,18407],{"class":58},[43,18509,18510],{"className":419,"code":18365,"language":420,"meta":48,"style":48},[31,18511,18512,18516,18544,18548,18552,18588,18592,18596],{"__ignoreMap":48},[52,18513,18514],{"class":54,"line":55},[52,18515,18372],{"class":559},[52,18517,18518,18520,18522,18524,18526,18528,18530,18532,18534,18536,18538,18540,18542],{"class":54,"line":80},[52,18519,59],{"class":58},[52,18521,18248],{"class":371},[52,18523,18381],{"class":66},[52,18525,70],{"class":231},[52,18527,723],{"class":58},[52,18529,18388],{"class":371},[52,18531,6978],{"class":58},[52,18533,18393],{"class":66},[52,18535,18396],{"class":58},[52,18537,18399],{"class":73},[52,18539,4052],{"class":58},[52,18541,18404],{"class":371},[52,18543,18407],{"class":58},[52,18545,18546],{"class":54,"line":108},[52,18547,597],{"emptyLinePlaceholder":171},[52,18549,18550],{"class":54,"line":118},[52,18551,18416],{"class":559},[52,18553,18554,18556,18558,18560,18562,18564,18566,18568,18570,18572,18574,18576,18578,18580,18582,18584,18586],{"class":54,"line":594},[52,18555,59],{"class":58},[52,18557,18251],{"class":371},[52,18559,18381],{"class":66},[52,18561,70],{"class":231},[52,18563,723],{"class":58},[52,18565,18388],{"class":371},[52,18567,6978],{"class":58},[52,18569,18393],{"class":66},[52,18571,18396],{"class":58},[52,18573,18439],{"class":73},[52,18575,4052],{"class":58},[52,18577,18404],{"class":371},[52,18579,18446],{"class":58},[52,18581,18449],{"class":371},[52,18583,18452],{"class":58},[52,18585,18455],{"class":371},[52,18587,18407],{"class":58},[52,18589,18590],{"class":54,"line":600},[52,18591,597],{"emptyLinePlaceholder":171},[52,18593,18594],{"class":54,"line":606},[52,18595,18466],{"class":559},[52,18597,18598,18600,18602,18604,18606,18608,18610,18612,18614,18616,18618,18620,18622,18624,18626,18628,18630],{"class":54,"line":653},[52,18599,59],{"class":58},[52,18601,18255],{"class":371},[52,18603,18381],{"class":66},[52,18605,70],{"class":231},[52,18607,723],{"class":58},[52,18609,18388],{"class":371},[52,18611,6978],{"class":58},[52,18613,18393],{"class":66},[52,18615,18396],{"class":58},[52,18617,18489],{"class":73},[52,18619,18492],{"class":58},[52,18621,5737],{"class":371},[52,18623,791],{"class":58},[52,18625,18499],{"class":371},[52,18627,18502],{"class":58},[52,18629,18505],{"class":371},[52,18631,18407],{"class":58},[43,18633,18634],{"className":419,"code":18365,"language":420,"meta":48,"style":48},[31,18635,18636,18640,18668,18672,18676,18712,18716,18720],{"__ignoreMap":48},[52,18637,18638],{"class":54,"line":55},[52,18639,18372],{"class":559},[52,18641,18642,18644,18646,18648,18650,18652,18654,18656,18658,18660,18662,18664,18666],{"class":54,"line":80},[52,18643,59],{"class":58},[52,18645,18248],{"class":371},[52,18647,18381],{"class":66},[52,18649,70],{"class":231},[52,18651,723],{"class":58},[52,18653,18388],{"class":371},[52,18655,6978],{"class":58},[52,18657,18393],{"class":66},[52,18659,18396],{"class":58},[52,18661,18399],{"class":73},[52,18663,4052],{"class":58},[52,18665,18404],{"class":371},[52,18667,18407],{"class":58},[52,18669,18670],{"class":54,"line":108},[52,18671,597],{"emptyLinePlaceholder":171},[52,18673,18674],{"class":54,"line":118},[52,18675,18416],{"class":559},[52,18677,18678,18680,18682,18684,18686,18688,18690,18692,18694,18696,18698,18700,18702,18704,18706,18708,18710],{"class":54,"line":594},[52,18679,59],{"class":58},[52,18681,18251],{"class":371},[52,18683,18381],{"class":66},[52,18685,70],{"class":231},[52,18687,723],{"class":58},[52,18689,18388],{"class":371},[52,18691,6978],{"class":58},[52,18693,18393],{"class":66},[52,18695,18396],{"class":58},[52,18697,18439],{"class":73},[52,18699,4052],{"class":58},[52,18701,18404],{"class":371},[52,18703,18446],{"class":58},[52,18705,18449],{"class":371},[52,18707,18452],{"class":58},[52,18709,18455],{"class":371},[52,18711,18407],{"class":58},[52,18713,18714],{"class":54,"line":600},[52,18715,597],{"emptyLinePlaceholder":171},[52,18717,18718],{"class":54,"line":606},[52,18719,18466],{"class":559},[52,18721,18722,18724,18726,18728,18730,18732,18734,18736,18738,18740,18742,18744,18746,18748,18750,18752,18754],{"class":54,"line":653},[52,18723,59],{"class":58},[52,18725,18255],{"class":371},[52,18727,18381],{"class":66},[52,18729,70],{"class":231},[52,18731,723],{"class":58},[52,18733,18388],{"class":371},[52,18735,6978],{"class":58},[52,18737,18393],{"class":66},[52,18739,18396],{"class":58},[52,18741,18489],{"class":73},[52,18743,18492],{"class":58},[52,18745,5737],{"class":371},[52,18747,791],{"class":58},[52,18749,18499],{"class":371},[52,18751,18502],{"class":58},[52,18753,18505],{"class":371},[52,18755,18407],{"class":58},[43,18757,18759],{"className":222,"code":18758,"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,18760,18761,18765,18779,18783,18803,18807,18811,18815,18819,18833,18837,18863,18867,18871,18875,18879,18893,18897,18923,18927],{"__ignoreMap":48},[52,18762,18763],{"class":54,"line":55},[52,18764,18372],{"class":559},[52,18766,18767,18769,18771,18773,18775,18777],{"class":54,"line":80},[52,18768,1721],{"class":231},[52,18770,1724],{"class":371},[52,18772,1727],{"class":231},[52,18774,1730],{"class":231},[52,18776,1733],{"class":66},[52,18778,1736],{"class":58},[52,18780,18781],{"class":54,"line":108},[52,18782,1751],{"class":58},[52,18784,18785,18787,18790,18793,18796,18798,18800],{"class":54,"line":118},[52,18786,1756],{"class":58},[52,18788,18789],{"class":73},"'Glass'",[52,18791,18792],{"class":58},", props: { shape: { type: ",[52,18794,18795],{"class":73},"'circleSDF'",[52,18797,4052],{"class":58},[52,18799,18404],{"class":371},[52,18801,18802],{"class":58}," } } }\n",[52,18804,18805],{"class":54,"line":594},[52,18806,1773],{"class":58},[52,18808,18809],{"class":54,"line":600},[52,18810,1778],{"class":58},[52,18812,18813],{"class":54,"line":606},[52,18814,597],{"emptyLinePlaceholder":171},[52,18816,18817],{"class":54,"line":653},[52,18818,18416],{"class":559},[52,18820,18821,18823,18825,18827,18829,18831],{"class":54,"line":662},[52,18822,1721],{"class":231},[52,18824,1724],{"class":371},[52,18826,1727],{"class":231},[52,18828,1730],{"class":231},[52,18830,1733],{"class":66},[52,18832,1736],{"class":58},[52,18834,18835],{"class":54,"line":671},[52,18836,1751],{"class":58},[52,18838,18839,18841,18844,18846,18849,18851,18853,18855,18857,18859,18861],{"class":54,"line":676},[52,18840,1756],{"class":58},[52,18842,18843],{"class":73},"'Neon'",[52,18845,18792],{"class":58},[52,18847,18848],{"class":73},"'starSDF'",[52,18850,4052],{"class":58},[52,18852,18404],{"class":371},[52,18854,18446],{"class":58},[52,18856,18449],{"class":371},[52,18858,18452],{"class":58},[52,18860,18455],{"class":371},[52,18862,18802],{"class":58},[52,18864,18865],{"class":54,"line":682},[52,18866,1773],{"class":58},[52,18868,18869],{"class":54,"line":698},[52,18870,1778],{"class":58},[52,18872,18873],{"class":54,"line":707},[52,18874,597],{"emptyLinePlaceholder":171},[52,18876,18877],{"class":54,"line":2327},[52,18878,18466],{"class":559},[52,18880,18881,18883,18885,18887,18889,18891],{"class":54,"line":7143},[52,18882,1721],{"class":231},[52,18884,1724],{"class":371},[52,18886,1727],{"class":231},[52,18888,1730],{"class":231},[52,18890,1733],{"class":66},[52,18892,1736],{"class":58},[52,18894,18895],{"class":54,"line":7153},[52,18896,1751],{"class":58},[52,18898,18899,18901,18904,18906,18909,18911,18913,18915,18917,18919,18921],{"class":54,"line":7164},[52,18900,1756],{"class":58},[52,18902,18903],{"class":73},"'Emboss'",[52,18905,18792],{"class":58},[52,18907,18908],{"class":73},"'roundedRectSDF'",[52,18910,18492],{"class":58},[52,18912,5737],{"class":371},[52,18914,791],{"class":58},[52,18916,18499],{"class":371},[52,18918,18502],{"class":58},[52,18920,18505],{"class":371},[52,18922,18802],{"class":58},[52,18924,18925],{"class":54,"line":7169},[52,18926,1773],{"class":58},[52,18928,18929],{"class":54,"line":8491},[52,18930,1778],{"class":58},[18932,18933],"hr",{},[23,18935,18937],{"id":18936},"built-in-shapes","Built-in shapes",[2925,18939,18941,18942],{"id":18940},"circle-circlesdf","Circle — ",[31,18943,18282],{},[15,18945,18946],{},"A perfect circle. The default shape for all shape effects.",[1780,18948,18949,18961],{},[1783,18950,18951],{},[1786,18952,18953,18955,18957,18959],{},[1789,18954,12618],{},[1789,18956,12621],{},[1789,18958,12624],{},[1789,18960,1794],{},[1796,18962,18963],{},[1786,18964,18965,18969,18973,18977],{},[1801,18966,18967],{},[31,18968,9175],{},[1801,18970,18971],{},[31,18972,12640],{},[1801,18974,18975],{},[31,18976,18404],{},[1801,18978,18979],{},"Circle radius in UV space",[43,18981,18983],{"className":3062,"code":18982,"language":3064,"meta":48,"style":48},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[31,18984,18985],{"__ignoreMap":48},[52,18986,18987,18990,18993,18995,18997,18999,19002,19004,19006],{"class":54,"line":55},[52,18988,18989],{"class":58},"{ ",[52,18991,18992],{"class":371},"\"type\"",[52,18994,624],{"class":58},[52,18996,18399],{"class":73},[52,18998,1881],{"class":58},[52,19000,19001],{"class":371},"\"radius\"",[52,19003,624],{"class":58},[52,19005,18404],{"class":371},[52,19007,13220],{"class":58},[18932,19009],{},[2925,19011,19013,19014],{"id":19012},"ellipse-ellipsesdf","Ellipse — ",[31,19015,19016],{},"ellipseSDF",[15,19018,19019],{},"A stretched circle with independent horizontal and vertical radii.",[1780,19021,19022,19034],{},[1783,19023,19024],{},[1786,19025,19026,19028,19030,19032],{},[1789,19027,12618],{},[1789,19029,12621],{},[1789,19031,12624],{},[1789,19033,1794],{},[1796,19035,19036,19053,19070],{},[1786,19037,19038,19042,19046,19050],{},[1801,19039,19040],{},[31,19041,621],{},[1801,19043,19044],{},[31,19045,12640],{},[1801,19047,19048],{},[31,19049,5737],{},[1801,19051,19052],{},"Horizontal radius (semi-major axis)",[1786,19054,19055,19059,19063,19067],{},[1801,19056,19057],{},[31,19058,636],{},[1801,19060,19061],{},[31,19062,12640],{},[1801,19064,19065],{},[31,19066,18499],{},[1801,19068,19069],{},"Vertical radius (semi-minor axis)",[1786,19071,19072,19076,19080,19084],{},[1801,19073,19074],{},[31,19075,9326],{},[1801,19077,19078],{},[31,19079,12640],{},[1801,19081,19082],{},[31,19083,6161],{},[1801,19085,19086],{},"Rotation in degrees",[43,19088,19090],{"className":3062,"code":19089,"language":3064,"meta":48,"style":48},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[31,19091,19092],{"__ignoreMap":48},[52,19093,19094,19096,19098,19100,19103,19105,19108,19110,19112,19114,19117,19119,19121,19123,19126,19128,19130],{"class":54,"line":55},[52,19095,18989],{"class":58},[52,19097,18992],{"class":371},[52,19099,624],{"class":58},[52,19101,19102],{"class":73},"\"ellipseSDF\"",[52,19104,1881],{"class":58},[52,19106,19107],{"class":371},"\"width\"",[52,19109,624],{"class":58},[52,19111,5737],{"class":371},[52,19113,1881],{"class":58},[52,19115,19116],{"class":371},"\"height\"",[52,19118,624],{"class":58},[52,19120,18499],{"class":371},[52,19122,1881],{"class":58},[52,19124,19125],{"class":371},"\"rotation\"",[52,19127,624],{"class":58},[52,19129,6161],{"class":371},[52,19131,13220],{"class":58},[18932,19133],{},[2925,19135,19137,19138],{"id":19136},"polygon-polygonsdf","Polygon — ",[31,19139,19140],{},"polygonSDF",[15,19142,19143],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1780,19145,19146,19158],{},[1783,19147,19148],{},[1786,19149,19150,19152,19154,19156],{},[1789,19151,12618],{},[1789,19153,12621],{},[1789,19155,12624],{},[1789,19157,1794],{},[1796,19159,19160,19177,19195,19213],{},[1786,19161,19162,19166,19170,19174],{},[1801,19163,19164],{},[31,19165,9175],{},[1801,19167,19168],{},[31,19169,12640],{},[1801,19171,19172],{},[31,19173,18404],{},[1801,19175,19176],{},"Distance from center to nearest edge midpoint",[1786,19178,19179,19184,19188,19192],{},[1801,19180,19181],{},[31,19182,19183],{},"sides",[1801,19185,19186],{},[31,19187,12640],{},[1801,19189,19190],{},[31,19191,18449],{},[1801,19193,19194],{},"Number of sides",[1786,19196,19197,19202,19206,19210],{},[1801,19198,19199],{},[31,19200,19201],{},"rounding",[1801,19203,19204],{},[31,19205,12640],{},[1801,19207,19208],{},[31,19209,6161],{},[1801,19211,19212],{},"Corner rounding amount",[1786,19214,19215,19219,19223,19227],{},[1801,19216,19217],{},[31,19218,9326],{},[1801,19220,19221],{},[31,19222,12640],{},[1801,19224,19225],{},[31,19226,6161],{},[1801,19228,19086],{},[43,19230,19232],{"className":3062,"code":19231,"language":3064,"meta":48,"style":48},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[31,19233,19234],{"__ignoreMap":48},[52,19235,19236,19238,19240,19242,19245,19247,19249,19251,19254,19256,19259,19261,19263,19265,19268,19270,19273,19275,19277,19279,19281],{"class":54,"line":55},[52,19237,18989],{"class":58},[52,19239,18992],{"class":371},[52,19241,624],{"class":58},[52,19243,19244],{"class":73},"\"polygonSDF\"",[52,19246,1881],{"class":58},[52,19248,19001],{"class":371},[52,19250,624],{"class":58},[52,19252,19253],{"class":371},"0.3",[52,19255,1881],{"class":58},[52,19257,19258],{"class":371},"\"sides\"",[52,19260,624],{"class":58},[52,19262,18449],{"class":371},[52,19264,1881],{"class":58},[52,19266,19267],{"class":371},"\"rounding\"",[52,19269,624],{"class":58},[52,19271,19272],{"class":371},"0.05",[52,19274,1881],{"class":58},[52,19276,19125],{"class":371},[52,19278,624],{"class":58},[52,19280,6161],{"class":371},[52,19282,13220],{"class":58},[18932,19284],{},[2925,19286,19288,19289],{"id":19287},"star-starsdf","Star — ",[31,19290,18285],{},[15,19292,19293],{},"An N-pointed star with configurable inner/outer radius ratio.",[1780,19295,19296,19308],{},[1783,19297,19298],{},[1786,19299,19300,19302,19304,19306],{},[1789,19301,12618],{},[1789,19303,12621],{},[1789,19305,12624],{},[1789,19307,1794],{},[1796,19309,19310,19327,19345,19367],{},[1786,19311,19312,19316,19320,19324],{},[1801,19313,19314],{},[31,19315,9175],{},[1801,19317,19318],{},[31,19319,12640],{},[1801,19321,19322],{},[31,19323,18404],{},[1801,19325,19326],{},"Outer tip radius",[1786,19328,19329,19333,19337,19342],{},[1801,19330,19331],{},[31,19332,19183],{},[1801,19334,19335],{},[31,19336,12640],{},[1801,19338,19339],{},[31,19340,19341],{},"5",[1801,19343,19344],{},"Number of points",[1786,19346,19347,19352,19356,19361],{},[1801,19348,19349],{},[31,19350,19351],{},"innerRatio",[1801,19353,19354],{},[31,19355,12640],{},[1801,19357,19358],{},[31,19359,19360],{},"0.382",[1801,19362,19363,19364,19366],{},"Inner vertex radius as a fraction of outer radius — ",[31,19365,19360],{}," gives the classic golden-ratio 5-star",[1786,19368,19369,19373,19377,19381],{},[1801,19370,19371],{},[31,19372,9326],{},[1801,19374,19375],{},[31,19376,12640],{},[1801,19378,19379],{},[31,19380,6161],{},[1801,19382,19086],{},[43,19384,19386],{"className":3062,"code":19385,"language":3064,"meta":48,"style":48},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[31,19387,19388],{"__ignoreMap":48},[52,19389,19390,19392,19394,19396,19398,19400,19402,19404,19406,19408,19410,19412,19414,19416,19419,19421,19423,19425,19427,19429,19431],{"class":54,"line":55},[52,19391,18989],{"class":58},[52,19393,18992],{"class":371},[52,19395,624],{"class":58},[52,19397,18439],{"class":73},[52,19399,1881],{"class":58},[52,19401,19001],{"class":371},[52,19403,624],{"class":58},[52,19405,18404],{"class":371},[52,19407,1881],{"class":58},[52,19409,19258],{"class":371},[52,19411,624],{"class":58},[52,19413,19341],{"class":371},[52,19415,1881],{"class":58},[52,19417,19418],{"class":371},"\"innerRatio\"",[52,19420,624],{"class":58},[52,19422,19360],{"class":371},[52,19424,1881],{"class":58},[52,19426,19125],{"class":371},[52,19428,624],{"class":58},[52,19430,6161],{"class":371},[52,19432,13220],{"class":58},[18932,19434],{},[2925,19436,19438,19439],{"id":19437},"flower-flowersdf","Flower — ",[31,19440,19441],{},"flowerSDF",[15,19443,19444],{},"An N-petalled flower with smooth concave valleys between petals.",[1780,19446,19447,19459],{},[1783,19448,19449],{},[1786,19450,19451,19453,19455,19457],{},[1789,19452,12618],{},[1789,19454,12621],{},[1789,19456,12624],{},[1789,19458,1794],{},[1796,19460,19461,19478,19495,19518],{},[1786,19462,19463,19467,19471,19475],{},[1801,19464,19465],{},[31,19466,9175],{},[1801,19468,19469],{},[31,19470,12640],{},[1801,19472,19473],{},[31,19474,18404],{},[1801,19476,19477],{},"Outer petal tip radius",[1786,19479,19480,19484,19488,19492],{},[1801,19481,19482],{},[31,19483,19183],{},[1801,19485,19486],{},[31,19487,12640],{},[1801,19489,19490],{},[31,19491,18449],{},[1801,19493,19494],{},"Number of petals",[1786,19496,19497,19501,19505,19509],{},[1801,19498,19499],{},[31,19500,19351],{},[1801,19502,19503],{},[31,19504,12640],{},[1801,19506,19507],{},[31,19508,5241],{},[1801,19510,19511,19512,19514,19515,19517],{},"Valley depth — ",[31,19513,12951],{}," = deep narrow valleys, ",[31,19516,3785],{}," = subtle scalloped edge",[1786,19519,19520,19524,19528,19532],{},[1801,19521,19522],{},[31,19523,9326],{},[1801,19525,19526],{},[31,19527,12640],{},[1801,19529,19530],{},[31,19531,6161],{},[1801,19533,19086],{},[43,19535,19537],{"className":3062,"code":19536,"language":3064,"meta":48,"style":48},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[31,19538,19539],{"__ignoreMap":48},[52,19540,19541,19543,19545,19547,19550,19552,19554,19556,19558,19560,19562,19564,19566,19568,19570,19572,19574,19576,19578,19580,19582],{"class":54,"line":55},[52,19542,18989],{"class":58},[52,19544,18992],{"class":371},[52,19546,624],{"class":58},[52,19548,19549],{"class":73},"\"flowerSDF\"",[52,19551,1881],{"class":58},[52,19553,19001],{"class":371},[52,19555,624],{"class":58},[52,19557,18404],{"class":371},[52,19559,1881],{"class":58},[52,19561,19258],{"class":371},[52,19563,624],{"class":58},[52,19565,18449],{"class":371},[52,19567,1881],{"class":58},[52,19569,19418],{"class":371},[52,19571,624],{"class":58},[52,19573,5241],{"class":371},[52,19575,1881],{"class":58},[52,19577,19125],{"class":371},[52,19579,624],{"class":58},[52,19581,6161],{"class":371},[52,19583,13220],{"class":58},[18932,19585],{},[2925,19587,19589,19590],{"id":19588},"ring-ringsdf","Ring — ",[31,19591,19592],{},"ringSDF",[15,19594,19595],{},"A hollow ring / annulus. The effect applies to the ring material itself, not the interior hole.",[1780,19597,19598,19610],{},[1783,19599,19600],{},[1786,19601,19602,19604,19606,19608],{},[1789,19603,12618],{},[1789,19605,12621],{},[1789,19607,12624],{},[1789,19609,1794],{},[1796,19611,19612,19629],{},[1786,19613,19614,19618,19622,19626],{},[1801,19615,19616],{},[31,19617,9175],{},[1801,19619,19620],{},[31,19621,12640],{},[1801,19623,19624],{},[31,19625,19253],{},[1801,19627,19628],{},"Distance from center to the ring centerline",[1786,19630,19631,19636,19640,19645],{},[1801,19632,19633],{},[31,19634,19635],{},"thickness",[1801,19637,19638],{},[31,19639,12640],{},[1801,19641,19642],{},[31,19643,19644],{},"0.08",[1801,19646,19647],{},"Half-width of the ring on each side of the centerline",[43,19649,19651],{"className":3062,"code":19650,"language":3064,"meta":48,"style":48},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[31,19652,19653],{"__ignoreMap":48},[52,19654,19655,19657,19659,19661,19664,19666,19668,19670,19672,19674,19677,19679,19681],{"class":54,"line":55},[52,19656,18989],{"class":58},[52,19658,18992],{"class":371},[52,19660,624],{"class":58},[52,19662,19663],{"class":73},"\"ringSDF\"",[52,19665,1881],{"class":58},[52,19667,19001],{"class":371},[52,19669,624],{"class":58},[52,19671,19253],{"class":371},[52,19673,1881],{"class":58},[52,19675,19676],{"class":371},"\"thickness\"",[52,19678,624],{"class":58},[52,19680,19644],{"class":371},[52,19682,13220],{"class":58},[18932,19684],{},[2925,19686,19688,19689],{"id":19687},"cross-crosssdf","Cross — ",[31,19690,19691],{},"crossSDF",[15,19693,19694],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1780,19696,19697,19709],{},[1783,19698,19699],{},[1786,19700,19701,19703,19705,19707],{},[1789,19702,12618],{},[1789,19704,12621],{},[1789,19706,12624],{},[1789,19708,1794],{},[1796,19710,19711,19728,19745,19762],{},[1786,19712,19713,19717,19721,19725],{},[1801,19714,19715],{},[31,19716,9182],{},[1801,19718,19719],{},[31,19720,12640],{},[1801,19722,19723],{},[31,19724,18499],{},[1801,19726,19727],{},"Arm half-length",[1786,19729,19730,19734,19738,19742],{},[1801,19731,19732],{},[31,19733,19635],{},[1801,19735,19736],{},[31,19737,12640],{},[1801,19739,19740],{},[31,19741,19644],{},[1801,19743,19744],{},"Arm half-width",[1786,19746,19747,19751,19755,19759],{},[1801,19748,19749],{},[31,19750,19201],{},[1801,19752,19753],{},[31,19754,12640],{},[1801,19756,19757],{},[31,19758,16958],{},[1801,19760,19761],{},"Corner rounding at arm ends and intersections",[1786,19763,19764,19768,19772,19776],{},[1801,19765,19766],{},[31,19767,9326],{},[1801,19769,19770],{},[31,19771,12640],{},[1801,19773,19774],{},[31,19775,6161],{},[1801,19777,19778,19779,19781],{},"Rotation in degrees — use ",[31,19780,1206],{}," for an X shape",[43,19783,19785],{"className":3062,"code":19784,"language":3064,"meta":48,"style":48},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[31,19786,19787],{"__ignoreMap":48},[52,19788,19789,19791,19793,19795,19798,19800,19803,19805,19807,19809,19811,19813,19815,19817,19819,19821,19823,19825,19827,19829,19831],{"class":54,"line":55},[52,19790,18989],{"class":58},[52,19792,18992],{"class":371},[52,19794,624],{"class":58},[52,19796,19797],{"class":73},"\"crossSDF\"",[52,19799,1881],{"class":58},[52,19801,19802],{"class":371},"\"size\"",[52,19804,624],{"class":58},[52,19806,18499],{"class":371},[52,19808,1881],{"class":58},[52,19810,19676],{"class":371},[52,19812,624],{"class":58},[52,19814,19644],{"class":371},[52,19816,1881],{"class":58},[52,19818,19267],{"class":371},[52,19820,624],{"class":58},[52,19822,16958],{"class":371},[52,19824,1881],{"class":58},[52,19826,19125],{"class":371},[52,19828,624],{"class":58},[52,19830,6161],{"class":371},[52,19832,13220],{"class":58},[18932,19834],{},[2925,19836,19838,19839],{"id":19837},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[31,19840,19841],{},"roundedRectSDF",[15,19843,19844],{},"A rectangle with uniformly rounded corners.",[1780,19846,19847,19859],{},[1783,19848,19849],{},[1786,19850,19851,19853,19855,19857],{},[1789,19852,12618],{},[1789,19854,12621],{},[1789,19856,12624],{},[1789,19858,1794],{},[1796,19860,19861,19878,19895,19912],{},[1786,19862,19863,19867,19871,19875],{},[1801,19864,19865],{},[31,19866,621],{},[1801,19868,19869],{},[31,19870,12640],{},[1801,19872,19873],{},[31,19874,18404],{},[1801,19876,19877],{},"Half-width",[1786,19879,19880,19884,19888,19892],{},[1801,19881,19882],{},[31,19883,636],{},[1801,19885,19886],{},[31,19887,12640],{},[1801,19889,19890],{},[31,19891,18499],{},[1801,19893,19894],{},"Half-height",[1786,19896,19897,19901,19905,19909],{},[1801,19898,19899],{},[31,19900,19201],{},[1801,19902,19903],{},[31,19904,12640],{},[1801,19906,19907],{},[31,19908,19272],{},[1801,19910,19911],{},"Corner rounding radius",[1786,19913,19914,19918,19922,19926],{},[1801,19915,19916],{},[31,19917,9326],{},[1801,19919,19920],{},[31,19921,12640],{},[1801,19923,19924],{},[31,19925,6161],{},[1801,19927,19086],{},[43,19929,19931],{"className":3062,"code":19930,"language":3064,"meta":48,"style":48},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[31,19932,19933],{"__ignoreMap":48},[52,19934,19935,19937,19939,19941,19943,19945,19947,19949,19951,19953,19955,19957,19959,19961,19963,19965,19967,19969,19971,19973,19975],{"class":54,"line":55},[52,19936,18989],{"class":58},[52,19938,18992],{"class":371},[52,19940,624],{"class":58},[52,19942,18489],{"class":73},[52,19944,1881],{"class":58},[52,19946,19107],{"class":371},[52,19948,624],{"class":58},[52,19950,18404],{"class":371},[52,19952,1881],{"class":58},[52,19954,19116],{"class":371},[52,19956,624],{"class":58},[52,19958,18499],{"class":371},[52,19960,1881],{"class":58},[52,19962,19267],{"class":371},[52,19964,624],{"class":58},[52,19966,19272],{"class":371},[52,19968,1881],{"class":58},[52,19970,19125],{"class":371},[52,19972,624],{"class":58},[52,19974,6161],{"class":371},[52,19976,13220],{"class":58},[18932,19978],{},[2925,19980,19982,19983],{"id":19981},"vesica-vesicasdf","Vesica — ",[31,19984,19985],{},"vesicaSDF",[15,19987,19988],{},"A lens / eye shape formed by the intersection of two overlapping circles.",[1780,19990,19991,20003],{},[1783,19992,19993],{},[1786,19994,19995,19997,19999,20001],{},[1789,19996,12618],{},[1789,19998,12621],{},[1789,20000,12624],{},[1789,20002,1794],{},[1796,20004,20005,20022,20046],{},[1786,20006,20007,20011,20015,20019],{},[1801,20008,20009],{},[31,20010,9175],{},[1801,20012,20013],{},[31,20014,12640],{},[1801,20016,20017],{},[31,20018,18404],{},[1801,20020,20021],{},"Radius of each circle",[1786,20023,20024,20029,20033,20037],{},[1801,20025,20026],{},[31,20027,20028],{},"spread",[1801,20030,20031],{},[31,20032,12640],{},[1801,20034,20035],{},[31,20036,5241],{},[1801,20038,20039,20040,20042,20043,20045],{},"Half-distance between circle centers as a fraction of radius — ",[31,20041,6161],{}," = a single circle, ",[31,20044,6165],{}," = an infinitely thin lens",[1786,20047,20048,20052,20056,20060],{},[1801,20049,20050],{},[31,20051,9326],{},[1801,20053,20054],{},[31,20055,12640],{},[1801,20057,20058],{},[31,20059,6161],{},[1801,20061,19086],{},[43,20063,20065],{"className":3062,"code":20064,"language":3064,"meta":48,"style":48},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[31,20066,20067],{"__ignoreMap":48},[52,20068,20069,20071,20073,20075,20078,20080,20082,20084,20086,20088,20091,20093,20095,20097,20099,20101,20103],{"class":54,"line":55},[52,20070,18989],{"class":58},[52,20072,18992],{"class":371},[52,20074,624],{"class":58},[52,20076,20077],{"class":73},"\"vesicaSDF\"",[52,20079,1881],{"class":58},[52,20081,19001],{"class":371},[52,20083,624],{"class":58},[52,20085,18404],{"class":371},[52,20087,1881],{"class":58},[52,20089,20090],{"class":371},"\"spread\"",[52,20092,624],{"class":58},[52,20094,5241],{"class":371},[52,20096,1881],{"class":58},[52,20098,19125],{"class":371},[52,20100,624],{"class":58},[52,20102,6161],{"class":371},[52,20104,13220],{"class":58},[18932,20106],{},[2925,20108,20110,20111],{"id":20109},"crescent-crescentsdf","Crescent — ",[31,20112,20113],{},"crescentSDF",[15,20115,20116],{},"A crescent / moon shape formed by subtracting a smaller offset circle from a larger one.",[1780,20118,20119,20131],{},[1783,20120,20121],{},[1786,20122,20123,20125,20127,20129],{},[1789,20124,12618],{},[1789,20126,12621],{},[1789,20128,12624],{},[1789,20130,1794],{},[1796,20132,20133,20150,20168,20185],{},[1786,20134,20135,20139,20143,20147],{},[1801,20136,20137],{},[31,20138,9175],{},[1801,20140,20141],{},[31,20142,12640],{},[1801,20144,20145],{},[31,20146,18404],{},[1801,20148,20149],{},"Outer circle radius",[1786,20151,20152,20156,20160,20165],{},[1801,20153,20154],{},[31,20155,19351],{},[1801,20157,20158],{},[31,20159,12640],{},[1801,20161,20162],{},[31,20163,20164],{},"0.75",[1801,20166,20167],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1786,20169,20170,20174,20178,20182],{},[1801,20171,20172],{},[31,20173,15338],{},[1801,20175,20176],{},[31,20177,12640],{},[1801,20179,20180],{},[31,20181,15466],{},[1801,20183,20184],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1786,20186,20187,20191,20195,20199],{},[1801,20188,20189],{},[31,20190,9326],{},[1801,20192,20193],{},[31,20194,12640],{},[1801,20196,20197],{},[31,20198,6161],{},[1801,20200,19086],{},[43,20202,20204],{"className":3062,"code":20203,"language":3064,"meta":48,"style":48},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[31,20205,20206],{"__ignoreMap":48},[52,20207,20208,20210,20212,20214,20217,20219,20221,20223,20225,20227,20229,20231,20233,20235,20238,20240,20242,20244,20246,20248,20250],{"class":54,"line":55},[52,20209,18989],{"class":58},[52,20211,18992],{"class":371},[52,20213,624],{"class":58},[52,20215,20216],{"class":73},"\"crescentSDF\"",[52,20218,1881],{"class":58},[52,20220,19001],{"class":371},[52,20222,624],{"class":58},[52,20224,18404],{"class":371},[52,20226,1881],{"class":58},[52,20228,19418],{"class":371},[52,20230,624],{"class":58},[52,20232,20164],{"class":371},[52,20234,1881],{"class":58},[52,20236,20237],{"class":371},"\"offset\"",[52,20239,624],{"class":58},[52,20241,15466],{"class":371},[52,20243,1881],{"class":58},[52,20245,19125],{"class":371},[52,20247,624],{"class":58},[52,20249,6161],{"class":371},[52,20251,13220],{"class":58},[18932,20253],{},[2925,20255,20257,20258],{"id":20256},"trapezoid-trapezoidsdf","Trapezoid — ",[31,20259,20260],{},"trapezoidSDF",[15,20262,20263],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1780,20265,20266,20278],{},[1783,20267,20268],{},[1786,20269,20270,20272,20274,20276],{},[1789,20271,12618],{},[1789,20273,12621],{},[1789,20275,12624],{},[1789,20277,1794],{},[1796,20279,20280,20298,20316,20332],{},[1786,20281,20282,20287,20291,20295],{},[1801,20283,20284],{},[31,20285,20286],{},"bottomWidth",[1801,20288,20289],{},[31,20290,12640],{},[1801,20292,20293],{},[31,20294,18404],{},[1801,20296,20297],{},"Bottom edge half-width",[1786,20299,20300,20305,20309,20313],{},[1801,20301,20302],{},[31,20303,20304],{},"topWidth",[1801,20306,20307],{},[31,20308,12640],{},[1801,20310,20311],{},[31,20312,12951],{},[1801,20314,20315],{},"Top edge half-width",[1786,20317,20318,20322,20326,20330],{},[1801,20319,20320],{},[31,20321,636],{},[1801,20323,20324],{},[31,20325,12640],{},[1801,20327,20328],{},[31,20329,18499],{},[1801,20331,19894],{},[1786,20333,20334,20338,20342,20346],{},[1801,20335,20336],{},[31,20337,9326],{},[1801,20339,20340],{},[31,20341,12640],{},[1801,20343,20344],{},[31,20345,6161],{},[1801,20347,19086],{},[43,20349,20351],{"className":3062,"code":20350,"language":3064,"meta":48,"style":48},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[31,20352,20353],{"__ignoreMap":48},[52,20354,20355,20357,20359,20361,20364,20366,20369,20371,20373,20375,20378,20380,20382,20384,20386,20388,20390,20392,20394,20396,20398],{"class":54,"line":55},[52,20356,18989],{"class":58},[52,20358,18992],{"class":371},[52,20360,624],{"class":58},[52,20362,20363],{"class":73},"\"trapezoidSDF\"",[52,20365,1881],{"class":58},[52,20367,20368],{"class":371},"\"bottomWidth\"",[52,20370,624],{"class":58},[52,20372,18404],{"class":371},[52,20374,1881],{"class":58},[52,20376,20377],{"class":371},"\"topWidth\"",[52,20379,624],{"class":58},[52,20381,12951],{"class":371},[52,20383,1881],{"class":58},[52,20385,19116],{"class":371},[52,20387,624],{"class":58},[52,20389,18499],{"class":371},[52,20391,1881],{"class":58},[52,20393,19125],{"class":371},[52,20395,624],{"class":58},[52,20397,6161],{"class":371},[52,20399,13220],{"class":58},[18932,20401],{},[23,20403,20405],{"id":20404},"custom-shapes","Custom shapes",[15,20407,20408],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,20410,20411,20412,20415,20416,20419,20420,20422,20423,20426],{},"To use an SVG shape, simply set ",[31,20413,20414],{},":shapeSdfUrl"," to the URL of the SDF ",[31,20417,20418],{},".bin"," file. Note that at the moment the SDF conversion occurs within the design editor, so it's recommended to use the ",[31,20421,20418],{}," file provided in the code export from the editor. In the near future we'll release a standalone ",[31,20424,20425],{},"SVG -> SDF"," conversion tool here for non-Pro users.",[217,20428,20429,20450,20469,20485,20501],{":tabs":1543},[43,20430,20432],{"className":45,"code":20431,"language":47,"meta":48,"style":48},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" />\n",[31,20433,20434],{"__ignoreMap":48},[52,20435,20436,20438,20440,20443,20445,20448],{"class":54,"line":55},[52,20437,59],{"class":58},[52,20439,18248],{"class":62},[52,20441,20442],{"class":66}," :shapeSdfUrl",[52,20444,70],{"class":58},[52,20446,20447],{"class":73},"\"myLogoUrl\"",[52,20449,105],{"class":58},[43,20451,20453],{"className":360,"code":20452,"language":362,"meta":48,"style":48},"\u003CGlass shapeSdfUrl={myLogoUrl} />\n",[31,20454,20455],{"__ignoreMap":48},[52,20456,20457,20459,20461,20464,20466],{"class":54,"line":55},[52,20458,59],{"class":58},[52,20460,18248],{"class":371},[52,20462,20463],{"class":66}," shapeSdfUrl",[52,20465,70],{"class":231},[52,20467,20468],{"class":58},"{myLogoUrl} />\n",[43,20470,20471],{"className":419,"code":20452,"language":420,"meta":48,"style":48},[31,20472,20473],{"__ignoreMap":48},[52,20474,20475,20477,20479,20481,20483],{"class":54,"line":55},[52,20476,59],{"class":58},[52,20478,18248],{"class":371},[52,20480,20463],{"class":66},[52,20482,70],{"class":231},[52,20484,20468],{"class":58},[43,20486,20487],{"className":419,"code":20452,"language":420,"meta":48,"style":48},[31,20488,20489],{"__ignoreMap":48},[52,20490,20491,20493,20495,20497,20499],{"class":54,"line":55},[52,20492,59],{"class":58},[52,20494,18248],{"class":371},[52,20496,20463],{"class":66},[52,20498,70],{"class":231},[52,20500,20468],{"class":58},[43,20502,20504],{"className":222,"code":20503,"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,20505,20506,20520,20524,20538,20542],{"__ignoreMap":48},[52,20507,20508,20510,20512,20514,20516,20518],{"class":54,"line":55},[52,20509,1721],{"class":231},[52,20511,1724],{"class":371},[52,20513,1727],{"class":231},[52,20515,1730],{"class":231},[52,20517,1733],{"class":66},[52,20519,1736],{"class":58},[52,20521,20522],{"class":54,"line":80},[52,20523,1751],{"class":58},[52,20525,20526,20528,20530,20533,20536],{"class":54,"line":108},[52,20527,1756],{"class":58},[52,20529,18789],{"class":73},[52,20531,20532],{"class":58},", props: { shapeSdfUrl: ",[52,20534,20535],{"class":73},"'https://example.com/my-logo.bin'",[52,20537,1768],{"class":58},[52,20539,20540],{"class":54,"line":118},[52,20541,1773],{"class":58},[52,20543,20544],{"class":54,"line":594},[52,20545,1778],{"class":58},[156,20547,12484],{},{"title":48,"searchDepth":80,"depth":80,"links":20549},[20550,20551,20575],{"id":18269,"depth":80,"text":18270},{"id":18936,"depth":80,"text":18937,"children":20552},[20553,20555,20557,20559,20561,20563,20565,20567,20569,20571,20573],{"id":18940,"depth":108,"text":20554},"Circle — circleSDF",{"id":19012,"depth":108,"text":20556},"Ellipse — ellipseSDF",{"id":19136,"depth":108,"text":20558},"Polygon — polygonSDF",{"id":19287,"depth":108,"text":20560},"Star — starSDF",{"id":19437,"depth":108,"text":20562},"Flower — flowerSDF",{"id":19588,"depth":108,"text":20564},"Ring — ringSDF",{"id":19687,"depth":108,"text":20566},"Cross — crossSDF",{"id":19837,"depth":108,"text":20568},"Rounded Rectangle — roundedRectSDF",{"id":19981,"depth":108,"text":20570},"Vesica — vesicaSDF",{"id":20109,"depth":108,"text":20572},"Crescent — crescentSDF",{"id":20256,"depth":108,"text":20574},"Trapezoid — trapezoidSDF",{"id":20404,"depth":80,"text":20405},"How to use and configure the built-in shape system","shapes",{},"/docs/guide/shape-effects",{"title":18237,"description":20576},"docs/guide/8.shape-effects","UiYWbvX2HwX3Cm-5eWV79KOJLkVIgz7QULXXdxMzqjI",{"id":20584,"title":14535,"body":20585,"category":1904,"description":20944,"exclude":167,"extension":168,"forceFramework":167,"icon":20945,"meta":20946,"navigation":171,"path":20947,"seo":20948,"stem":20949,"__hash__":20950},"guide/docs/guide/9.performance.md",{"type":8,"value":20586,"toc":20938},[20587,20589,20592,20596,20603,20606,20610,20613,20619,20629,20634,20695,20698,20702,20705,20710,20732,20738,20892,20896,20902,20908,20923,20929,20935],[11,20588,14535],{"id":14534},[15,20590,20591],{},"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,20593,20595],{"id":20594},"the-frame-budget","The frame budget",[15,20597,20598,20599,20602],{},"At 60fps, the GPU has ",[151,20600,20601],{},"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,20604,20605],{},"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,20607,20609],{"id":20608},"generator-vs-filter-effects","Generator vs. filter effects",[15,20611,20612],{},"Effects fall into two broad categories with very different cost profiles:",[15,20614,20615,20618],{},[151,20616,20617],{},"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,20620,20621,20624,20625,20628],{},[151,20622,20623],{},"Filter/Effect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[151,20626,20627],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,20630,20631],{},[151,20632,20633],{},"Rough cost categories:",[1780,20635,20636,20649],{},[1783,20637,20638],{},[1786,20639,20640,20643,20646],{},[1789,20641,20642],{},"Category",[1789,20644,20645],{},"Examples",[1789,20647,20648],{},"Relative cost",[1796,20650,20651,20662,20673,20684],{},[1786,20652,20653,20656,20659],{},[1801,20654,20655],{},"Very light",[1801,20657,20658],{},"SolidColor, LinearGradient, RadialGradient",[1801,20660,20661],{},"~0–0.1ms",[1786,20663,20664,20667,20670],{},[1801,20665,20666],{},"Light",[1801,20668,20669],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1801,20671,20672],{},"~0.1–0.5ms",[1786,20674,20675,20678,20681],{},[1801,20676,20677],{},"Medium",[1801,20679,20680],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1801,20682,20683],{},"~0.5–2ms",[1786,20685,20686,20689,20692],{},[1801,20687,20688],{},"Heavy",[1801,20690,20691],{},"Glass, GlassTiles, multiple nested RTT effects",[1801,20693,20694],{},"~1-2ms+",[15,20696,20697],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,20699,20701],{"id":20700},"render-to-texture-rtt","Render-to-texture (RTT)",[15,20703,20704],{},"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,20706,20707],{},[151,20708,20709],{},"What triggers RTT:",[1465,20711,20712,20715,20723,20726],{},[1468,20713,20714],{},"Filter/effect components that need input (Blur, Glass, GlassTiles, etc.)",[1468,20716,1825,20717,20719,20720,20722],{},[31,20718,16689],{}," ",[1139,20721,14526],{"href":14525}," on any component (the source layer is RTT'd)",[1468,20724,20725],{},"The masking system when a layer is used as a mask source",[1468,20727,20728,20729,20731],{},"Non-default ",[1139,20730,12509],{"href":14563}," on a component",[15,20733,20734,20737],{},[151,20735,20736],{},"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,20739,20741],{"className":45,"code":20740,"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,20742,20743,20748,20756,20764,20772,20780,20795,20803,20811,20819,20827,20835,20839,20844,20852,20860,20868,20876,20884],{"__ignoreMap":48},[52,20744,20745],{"class":54,"line":55},[52,20746,20747],{"class":559},"\u003C!-- Avoid: three RTT passes in series -->\n",[52,20749,20750,20752,20754],{"class":54,"line":80},[52,20751,59],{"class":58},[52,20753,63],{"class":62},[52,20755,77],{"class":58},[52,20757,20758,20760,20762],{"class":54,"line":108},[52,20759,83],{"class":58},[52,20761,86],{"class":62},[52,20763,105],{"class":58},[52,20765,20766,20768,20770],{"class":54,"line":118},[52,20767,83],{"class":58},[52,20769,3710],{"class":62},[52,20771,77],{"class":58},[52,20773,20774,20776,20778],{"class":54,"line":594},[52,20775,2213],{"class":58},[52,20777,18248],{"class":62},[52,20779,77],{"class":58},[52,20781,20782,20784,20786,20788,20790,20793],{"class":54,"line":600},[52,20783,2476],{"class":58},[52,20785,9260],{"class":62},[52,20787,14599],{"class":66},[52,20789,70],{"class":58},[52,20791,20792],{"class":73},"\"20\"",[52,20794,77],{"class":58},[52,20796,20797,20799,20801],{"class":54,"line":606},[52,20798,8300],{"class":58},[52,20800,2216],{"class":62},[52,20802,105],{"class":58},[52,20804,20805,20807,20809],{"class":54,"line":653},[52,20806,8406],{"class":58},[52,20808,9260],{"class":62},[52,20810,77],{"class":58},[52,20812,20813,20815,20817],{"class":54,"line":662},[52,20814,2491],{"class":58},[52,20816,18248],{"class":62},[52,20818,77],{"class":58},[52,20820,20821,20823,20825],{"class":54,"line":671},[52,20822,2230],{"class":58},[52,20824,3710],{"class":62},[52,20826,77],{"class":58},[52,20828,20829,20831,20833],{"class":54,"line":676},[52,20830,121],{"class":58},[52,20832,63],{"class":62},[52,20834,77],{"class":58},[52,20836,20837],{"class":54,"line":682},[52,20838,597],{"emptyLinePlaceholder":171},[52,20840,20841],{"class":54,"line":698},[52,20842,20843],{"class":559},"\u003C!-- Better: fewer RTT boundaries -->\n",[52,20845,20846,20848,20850],{"class":54,"line":707},[52,20847,59],{"class":58},[52,20849,63],{"class":62},[52,20851,77],{"class":58},[52,20853,20854,20856,20858],{"class":54,"line":2327},[52,20855,83],{"class":58},[52,20857,86],{"class":62},[52,20859,105],{"class":58},[52,20861,20862,20864,20866],{"class":54,"line":7143},[52,20863,83],{"class":58},[52,20865,3710],{"class":62},[52,20867,77],{"class":58},[52,20869,20870,20872,20874],{"class":54,"line":7153},[52,20871,2213],{"class":58},[52,20873,2216],{"class":62},[52,20875,105],{"class":58},[52,20877,20878,20880,20882],{"class":54,"line":7164},[52,20879,2230],{"class":58},[52,20881,3710],{"class":62},[52,20883,77],{"class":58},[52,20885,20886,20888,20890],{"class":54,"line":7169},[52,20887,121],{"class":58},[52,20889,63],{"class":62},[52,20891,77],{"class":58},[23,20893,20895],{"id":20894},"practical-tips","Practical tips",[15,20897,20898,20901],{},[151,20899,20900],{},"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,20903,20904,20907],{},[151,20905,20906],{},"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,20909,20910,20913,20914,20916,20917,20919,20920,20922],{},[151,20911,20912],{},"Invisible layers still cost."," A hidden layer with ",[31,20915,6534],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[31,20918,6161],{}," still renders the layer. Use ",[31,20921,6534],{}," to truly exclude layers you don't need.",[15,20924,20925,20928],{},[151,20926,20927],{},"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,20930,20931,20934],{},[151,20932,20933],{},"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,20936,20937],{},"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":20939},[20940,20941,20942,20943],{"id":20594,"depth":80,"text":20595},{"id":20608,"depth":80,"text":20609},{"id":20700,"depth":80,"text":20701},{"id":20894,"depth":80,"text":20895},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"/docs/guide/performance",{"title":14535,"description":20944},"docs/guide/9.performance","CBj3Z8Zk4h6dwXGq1AOtOkCjEyK5HRjDjSB9VgDuwHw",{"id":20952,"title":178,"body":20953,"category":165,"description":21580,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":21581,"navigation":171,"path":21582,"seo":21583,"stem":21584,"__hash__":21585},"guide/docs/guide/js/1.quickstart.md",{"type":8,"value":20954,"toc":21570},[20955,20959,20962,20966,20978,20982,20988,21019,21021,21028,21120,21122,21128,21130,21138,21240,21247,21271,21273,21280,21372,21376,21385,21505,21512,21518,21522,21529,21543,21546,21548,21567],[11,20956,20958],{"id":20957},"quickstart-javascript","Quickstart (JavaScript)",[15,20960,20961],{},"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,20963,20965],{"id":20964},"install-the-npm-package","Install the npm package",[43,20967,20968],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,20969,20970],{"__ignoreMap":48},[52,20971,20972,20974,20976],{"class":54,"line":55},[52,20973,199],{"class":66},[52,20975,202],{"class":73},[52,20977,205],{"class":73},[23,20979,20981],{"id":20980},"set-up-a-canvas","Set up a canvas",[15,20983,20984,20985,20987],{},"Create a ",[31,20986,40],{}," element in your HTML and give it a size:",[43,20989,20991],{"className":10372,"code":20990,"language":10374,"meta":48,"style":48},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C/canvas>\n",[31,20992,20993],{"__ignoreMap":48},[52,20994,20995,20997,20999,21001,21003,21006,21008,21010,21013,21015,21017],{"class":54,"line":55},[52,20996,59],{"class":58},[52,20998,10383],{"class":62},[52,21000,6589],{"class":66},[52,21002,70],{"class":58},[52,21004,21005],{"class":73},"\"my-shader\"",[52,21007,613],{"class":66},[52,21009,70],{"class":58},[52,21011,21012],{"class":73},"\"width: 100%; height: 400px;\"",[52,21014,10400],{"class":58},[52,21016,10383],{"class":62},[52,21018,77],{"class":58},[23,21020,293],{"id":292},[15,21022,21023,21024,21027],{},"Import ",[31,21025,21026],{},"createShader",", pass it the canvas and a list of components:",[43,21029,21031],{"className":222,"code":21030,"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,21032,21033,21043,21047,21065,21069,21083,21087,21103,21112,21116],{"__ignoreMap":48},[52,21034,21035,21037,21039,21041],{"class":54,"line":55},[52,21036,232],{"class":231},[52,21038,9005],{"class":58},[52,21040,238],{"class":231},[52,21042,9010],{"class":73},[52,21044,21045],{"class":54,"line":80},[52,21046,597],{"emptyLinePlaceholder":171},[52,21048,21049,21051,21053,21055,21057,21059,21061,21063],{"class":54,"line":108},[52,21050,1721],{"class":231},[52,21052,2796],{"class":371},[52,21054,1727],{"class":231},[52,21056,2801],{"class":58},[52,21058,2804],{"class":66},[52,21060,2289],{"class":58},[52,21062,10018],{"class":73},[52,21064,2295],{"class":58},[52,21066,21067],{"class":54,"line":118},[52,21068,597],{"emptyLinePlaceholder":171},[52,21070,21071,21073,21075,21077,21079,21081],{"class":54,"line":594},[52,21072,1721],{"class":231},[52,21074,1724],{"class":371},[52,21076,1727],{"class":231},[52,21078,1730],{"class":231},[52,21080,1733],{"class":66},[52,21082,1736],{"class":58},[52,21084,21085],{"class":54,"line":600},[52,21086,1751],{"class":58},[52,21088,21089,21091,21093,21095,21097,21099,21101],{"class":54,"line":606},[52,21090,1756],{"class":58},[52,21092,2126],{"class":73},[52,21094,7657],{"class":58},[52,21096,14423],{"class":73},[52,21098,7663],{"class":58},[52,21100,14428],{"class":73},[52,21102,4057],{"class":58},[52,21104,21105,21107,21110],{"class":54,"line":653},[52,21106,1756],{"class":58},[52,21108,21109],{"class":73},"'CursorTrail'",[52,21111,2129],{"class":58},[52,21113,21114],{"class":54,"line":662},[52,21115,1773],{"class":58},[52,21117,21118],{"class":54,"line":671},[52,21119,1778],{"class":58},[19,21121],{":preset":529},[15,21123,1825,21124,21127],{},[31,21125,21126],{},"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,21129,544],{"id":543},[15,21131,1825,21132,21134,21135,1540],{},[31,21133,40],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[31,21136,21137],{},"ResizeObserver",[43,21139,21141],{"className":10372,"code":21140,"language":10374,"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,21142,21143,21148,21173,21177,21182,21207,21211,21216],{"__ignoreMap":48},[52,21144,21145],{"class":54,"line":55},[52,21146,21147],{"class":559},"\u003C!-- Fixed size -->\n",[52,21149,21150,21152,21154,21156,21158,21161,21163,21165,21167,21169,21171],{"class":54,"line":80},[52,21151,59],{"class":58},[52,21153,10383],{"class":62},[52,21155,6589],{"class":66},[52,21157,70],{"class":58},[52,21159,21160],{"class":73},"\"shader\"",[52,21162,613],{"class":66},[52,21164,70],{"class":58},[52,21166,927],{"class":73},[52,21168,10400],{"class":58},[52,21170,10383],{"class":62},[52,21172,77],{"class":58},[52,21174,21175],{"class":54,"line":108},[52,21176,597],{"emptyLinePlaceholder":171},[52,21178,21179],{"class":54,"line":118},[52,21180,21181],{"class":559},"\u003C!-- Full viewport -->\n",[52,21183,21184,21186,21188,21190,21192,21194,21196,21198,21201,21203,21205],{"class":54,"line":594},[52,21185,59],{"class":58},[52,21187,10383],{"class":62},[52,21189,6589],{"class":66},[52,21191,70],{"class":58},[52,21193,21160],{"class":73},[52,21195,613],{"class":66},[52,21197,70],{"class":58},[52,21199,21200],{"class":73},"\"width: 100vw; height: 100dvh;\"",[52,21202,10400],{"class":58},[52,21204,10383],{"class":62},[52,21206,77],{"class":58},[52,21208,21209],{"class":54,"line":600},[52,21210,597],{"emptyLinePlaceholder":171},[52,21212,21213],{"class":54,"line":606},[52,21214,21215],{"class":559},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[52,21217,21218,21220,21222,21224,21226,21228,21230,21232,21234,21236,21238],{"class":54,"line":653},[52,21219,59],{"class":58},[52,21221,10383],{"class":62},[52,21223,6589],{"class":66},[52,21225,70],{"class":58},[52,21227,21160],{"class":73},[52,21229,67],{"class":66},[52,21231,70],{"class":58},[52,21233,693],{"class":73},[52,21235,10400],{"class":58},[52,21237,10383],{"class":62},[52,21239,77],{"class":58},[15,21241,21242,21243,21246],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[31,21244,21245],{},"shader.resize()"," to sync:",[43,21248,21250],{"className":222,"code":21249,"language":224,"meta":48,"style":48},"canvas.style.height = '600px'\nshader.resize()\n",[31,21251,21252,21261],{"__ignoreMap":48},[52,21253,21254,21256,21258],{"class":54,"line":55},[52,21255,10035],{"class":58},[52,21257,70],{"class":231},[52,21259,21260],{"class":73}," '600px'\n",[52,21262,21263,21265,21268],{"class":54,"line":80},[52,21264,9096],{"class":58},[52,21266,21267],{"class":66},"resize",[52,21269,21270],{"class":58},"()\n",[23,21272,1134],{"id":1133},[15,21274,21275,21276,21279],{},"Props are passed in the ",[31,21277,21278],{},"props"," object for each component. All prop names are camelCase:",[43,21281,21283],{"className":222,"code":21282,"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,21284,21285,21299,21303,21307,21315,21319,21329,21339,21348,21356,21360,21364,21368],{"__ignoreMap":48},[52,21286,21287,21289,21291,21293,21295,21297],{"class":54,"line":55},[52,21288,1721],{"class":231},[52,21290,1724],{"class":371},[52,21292,1727],{"class":231},[52,21294,1730],{"class":231},[52,21296,1733],{"class":66},[52,21298,1736],{"class":58},[52,21300,21301],{"class":54,"line":80},[52,21302,1751],{"class":58},[52,21304,21305],{"class":54,"line":108},[52,21306,13196],{"class":58},[52,21308,21309,21311,21313],{"class":54,"line":118},[52,21310,13201],{"class":58},[52,21312,2126],{"class":73},[52,21314,1746],{"class":58},[52,21316,21317],{"class":54,"line":594},[52,21318,13210],{"class":58},[52,21320,21321,21324,21327],{"class":54,"line":600},[52,21322,21323],{"class":58}," colorA: ",[52,21325,21326],{"class":73},"'#ff6b6b'",[52,21328,1746],{"class":58},[52,21330,21331,21334,21337],{"class":54,"line":606},[52,21332,21333],{"class":58}," colorB: ",[52,21335,21336],{"class":73},"'#4ecdc4'",[52,21338,1746],{"class":58},[52,21340,21341,21344,21346],{"class":54,"line":653},[52,21342,21343],{"class":58}," angle: ",[52,21345,1206],{"class":371},[52,21347,1746],{"class":58},[52,21349,21350,21353],{"class":54,"line":662},[52,21351,21352],{"class":58}," colorSpace: ",[52,21354,21355],{"class":73},"'oklch'\n",[52,21357,21358],{"class":54,"line":671},[52,21359,3125],{"class":58},[52,21361,21362],{"class":54,"line":676},[52,21363,3130],{"class":58},[52,21365,21366],{"class":54,"line":682},[52,21367,1773],{"class":58},[52,21369,21370],{"class":54,"line":698},[52,21371,1778],{"class":58},[23,21373,21375],{"id":21374},"updating-at-runtime","Updating at runtime",[15,21377,21378,21379,21381,21382,21384],{},"Assign an ",[31,21380,6545],{}," to any component, then use ",[31,21383,18069],{}," to change its props at any time:",[43,21386,21388],{"className":222,"code":21387,"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,21389,21390,21404,21408,21433,21437,21441,21445,21450,21483,21501],{"__ignoreMap":48},[52,21391,21392,21394,21396,21398,21400,21402],{"class":54,"line":55},[52,21393,1721],{"class":231},[52,21395,1724],{"class":371},[52,21397,1727],{"class":231},[52,21399,1730],{"class":231},[52,21401,1733],{"class":66},[52,21403,1736],{"class":58},[52,21405,21406],{"class":54,"line":80},[52,21407,1751],{"class":58},[52,21409,21410,21412,21414,21416,21418,21420,21422,21424,21426,21429,21431],{"class":54,"line":108},[52,21411,1756],{"class":58},[52,21413,2126],{"class":73},[52,21415,2872],{"class":58},[52,21417,9063],{"class":73},[52,21419,7657],{"class":58},[52,21421,14423],{"class":73},[52,21423,7663],{"class":58},[52,21425,14428],{"class":73},[52,21427,21428],{"class":58},", angle: ",[52,21430,6161],{"class":371},[52,21432,1768],{"class":58},[52,21434,21435],{"class":54,"line":118},[52,21436,1773],{"class":58},[52,21438,21439],{"class":54,"line":594},[52,21440,1778],{"class":58},[52,21442,21443],{"class":54,"line":600},[52,21444,597],{"emptyLinePlaceholder":171},[52,21446,21447],{"class":54,"line":606},[52,21448,21449],{"class":559},"// Hook up a slider\n",[52,21451,21452,21455,21458,21460,21463,21466,21469,21471,21474,21476,21479,21481],{"class":54,"line":653},[52,21453,21454],{"class":58},"document.",[52,21456,21457],{"class":66},"querySelector",[52,21459,2289],{"class":58},[52,21461,21462],{"class":73},"'#angle-slider'",[52,21464,21465],{"class":58},").",[52,21467,21468],{"class":66},"addEventListener",[52,21470,2289],{"class":58},[52,21472,21473],{"class":73},"'input'",[52,21475,1881],{"class":58},[52,21477,21478],{"class":8319},"e",[52,21480,8322],{"class":231},[52,21482,2904],{"class":58},[52,21484,21485,21487,21489,21491,21493,21495,21498],{"class":54,"line":662},[52,21486,14492],{"class":58},[52,21488,9099],{"class":66},[52,21490,2289],{"class":58},[52,21492,9063],{"class":73},[52,21494,9106],{"class":58},[52,21496,21497],{"class":66},"Number",[52,21499,21500],{"class":58},"(e.target.value) })\n",[52,21502,21503],{"class":54,"line":671},[52,21504,1778],{"class":58},[15,21506,21507,21508,21511],{},"When ",[31,21509,21510],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,21513,21514,21515,21517],{},"Browse the ",[1139,21516,1142],{"href":1141}," for the full prop reference on every component.",[23,21519,21521],{"id":21520},"cleanup","Cleanup",[15,21523,21524,21525,21528],{},"When you're done, call ",[31,21526,21527],{},"destroy()"," to free GPU resources:",[43,21530,21532],{"className":222,"code":21531,"language":224,"meta":48,"style":48},"shader.destroy()\n",[31,21533,21534],{"__ignoreMap":48},[52,21535,21536,21538,21541],{"class":54,"line":55},[52,21537,9096],{"class":58},[52,21539,21540],{"class":66},"destroy",[52,21542,21270],{"class":58},[15,21544,21545],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,21547,1463],{"id":1462},[1465,21549,21550,21554,21558,21563],{},[1468,21551,21552,1474],{},[1139,21553,1473],{"href":1472},[1468,21555,21556,1481],{},[1139,21557,1480],{"href":1479},[1468,21559,21560,21562],{},[1139,21561,14569],{"href":14525}," — animate and mouse-track props declaratively",[1468,21564,21565,1493],{},[1139,21566,1142],{"href":1141},[156,21568,21569],{},"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":21571},[21572,21573,21574,21575,21576,21577,21578,21579],{"id":20964,"depth":80,"text":20965},{"id":20980,"depth":80,"text":20981},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":21374,"depth":80,"text":21375},{"id":21520,"depth":80,"text":21521},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"/docs/guide/js/quickstart",{"title":178,"description":21580},"docs/guide/js/1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":21587,"title":178,"body":21588,"category":165,"description":22223,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":22224,"navigation":171,"path":22225,"seo":22226,"stem":22227,"__hash__":22228},"guide/docs/guide/react/1.quickstart.md",{"type":8,"value":21589,"toc":22214},[21590,21594,21598,21600,21612,21616,21630,21632,21635,21689,21691,21698,21700,21713,21847,21861,21863,21866,21938,21945,22174,22179,22183,22187,22195,22197,22211],[11,21591,21593],{"id":21592},"quickstart-react","Quickstart (React)",[21595,21596],"you-tube-embed",{"id":21597},"836NxwU1Wwk",[23,21599,20965],{"id":20964},[43,21601,21602],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,21603,21604],{"__ignoreMap":48},[52,21605,21606,21608,21610],{"class":54,"line":55},[52,21607,199],{"class":66},[52,21609,202],{"class":73},[52,21611,205],{"class":73},[23,21613,21615],{"id":21614},"import-some-components","Import some components",[43,21617,21618],{"className":222,"code":244,"language":224,"meta":48,"style":48},[31,21619,21620],{"__ignoreMap":48},[52,21621,21622,21624,21626,21628],{"class":54,"line":55},[52,21623,232],{"class":231},[52,21625,235],{"class":58},[52,21627,238],{"class":231},[52,21629,257],{"class":73},[23,21631,293],{"id":292},[15,21633,21634],{},"Let's create a very simple shader:",[43,21636,21637],{"className":360,"code":361,"language":362,"meta":48,"style":48},[31,21638,21639,21653,21673,21681],{"__ignoreMap":48},[52,21640,21641,21643,21645,21647,21649,21651],{"class":54,"line":55},[52,21642,59],{"class":58},[52,21644,63],{"class":371},[52,21646,374],{"class":66},[52,21648,70],{"class":231},[52,21650,319],{"class":73},[52,21652,77],{"class":58},[52,21654,21655,21657,21659,21661,21663,21665,21667,21669,21671],{"class":54,"line":80},[52,21656,83],{"class":58},[52,21658,86],{"class":371},[52,21660,89],{"class":66},[52,21662,70],{"class":231},[52,21664,94],{"class":73},[52,21666,97],{"class":66},[52,21668,70],{"class":231},[52,21670,102],{"class":73},[52,21672,105],{"class":58},[52,21674,21675,21677,21679],{"class":54,"line":108},[52,21676,83],{"class":58},[52,21678,113],{"class":371},[52,21680,105],{"class":58},[52,21682,21683,21685,21687],{"class":54,"line":118},[52,21684,121],{"class":58},[52,21686,63],{"class":371},[52,21688,77],{"class":58},[19,21690],{":preset":529},[15,21692,21693,534,21695,21697],{},[31,21694,33],{},[31,21696,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,21699,544],{"id":543},[15,21701,1825,21702,21704,21705,16022,21708,21710,21711,540],{},[31,21703,40],{}," has no intrinsic size. The ",[31,21706,21707],{},"className",[31,21709,156],{}," you apply to ",[31,21712,33],{},[43,21714,21716],{"className":360,"code":21715,"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,21717,21718,21726,21740,21748,21756,21760,21768,21788,21796,21804,21808,21817,21831,21839],{"__ignoreMap":48},[52,21719,21720,21722,21724],{"class":54,"line":55},[52,21721,723],{"class":58},[52,21723,726],{"class":559},[52,21725,729],{"class":58},[52,21727,21728,21730,21732,21734,21736,21738],{"class":54,"line":80},[52,21729,59],{"class":58},[52,21731,63],{"class":371},[52,21733,374],{"class":66},[52,21735,70],{"class":231},[52,21737,573],{"class":73},[52,21739,77],{"class":58},[52,21741,21742,21744,21746],{"class":54,"line":108},[52,21743,83],{"class":58},[52,21745,86],{"class":371},[52,21747,105],{"class":58},[52,21749,21750,21752,21754],{"class":54,"line":118},[52,21751,121],{"class":58},[52,21753,63],{"class":371},[52,21755,77],{"class":58},[52,21757,21758],{"class":54,"line":594},[52,21759,597],{"emptyLinePlaceholder":171},[52,21761,21762,21764,21766],{"class":54,"line":600},[52,21763,723],{"class":58},[52,21765,770],{"class":559},[52,21767,729],{"class":58},[52,21769,21770,21772,21774,21776,21778,21780,21782,21784,21786],{"class":54,"line":606},[52,21771,59],{"class":58},[52,21773,63],{"class":371},[52,21775,613],{"class":66},[52,21777,70],{"class":231},[52,21779,785],{"class":58},[52,21781,788],{"class":73},[52,21783,791],{"class":58},[52,21785,794],{"class":73},[52,21787,797],{"class":58},[52,21789,21790,21792,21794],{"class":54,"line":653},[52,21791,83],{"class":58},[52,21793,86],{"class":371},[52,21795,105],{"class":58},[52,21797,21798,21800,21802],{"class":54,"line":662},[52,21799,121],{"class":58},[52,21801,63],{"class":371},[52,21803,77],{"class":58},[52,21805,21806],{"class":54,"line":671},[52,21807,597],{"emptyLinePlaceholder":171},[52,21809,21810,21812,21815],{"class":54,"line":676},[52,21811,723],{"class":58},[52,21813,21814],{"class":559},"/* Fluid with aspect ratio */",[52,21816,729],{"class":58},[52,21818,21819,21821,21823,21825,21827,21829],{"class":54,"line":682},[52,21820,59],{"class":58},[52,21822,63],{"class":371},[52,21824,374],{"class":66},[52,21826,70],{"class":231},[52,21828,693],{"class":73},[52,21830,77],{"class":58},[52,21832,21833,21835,21837],{"class":54,"line":698},[52,21834,83],{"class":58},[52,21836,86],{"class":371},[52,21838,105],{"class":58},[52,21840,21841,21843,21845],{"class":54,"line":707},[52,21842,121],{"class":58},[52,21844,63],{"class":371},[52,21846,77],{"class":58},[15,21848,21849,21850,16022,21852,21854,21855,21857,21858,21860],{},"Applying a ",[31,21851,21707],{},[31,21853,156],{}," to the ",[31,21856,33],{}," tag is preferred over trying to target the ",[31,21859,40],{}," element directly, as the internal DOM structure may change in the future.",[23,21862,1134],{"id":1133},[15,21864,21865],{},"Pass props directly to configure each component. All props use camelCase:",[43,21867,21868],{"className":360,"code":1235,"language":362,"meta":48,"style":48},[31,21869,21870,21884,21890,21898,21906,21918,21926,21930],{"__ignoreMap":48},[52,21871,21872,21874,21876,21878,21880,21882],{"class":54,"line":55},[52,21873,59],{"class":58},[52,21875,63],{"class":371},[52,21877,374],{"class":66},[52,21879,70],{"class":231},[52,21881,319],{"class":73},[52,21883,77],{"class":58},[52,21885,21886,21888],{"class":54,"line":80},[52,21887,83],{"class":58},[52,21889,1171],{"class":371},[52,21891,21892,21894,21896],{"class":54,"line":108},[52,21893,1176],{"class":66},[52,21895,70],{"class":231},[52,21897,1181],{"class":73},[52,21899,21900,21902,21904],{"class":54,"line":118},[52,21901,1186],{"class":66},[52,21903,70],{"class":231},[52,21905,1191],{"class":73},[52,21907,21908,21910,21912,21914,21916],{"class":54,"line":594},[52,21909,1278],{"class":66},[52,21911,70],{"class":231},[52,21913,723],{"class":58},[52,21915,1206],{"class":371},[52,21917,729],{"class":58},[52,21919,21920,21922,21924],{"class":54,"line":600},[52,21921,1291],{"class":66},[52,21923,70],{"class":231},[52,21925,1219],{"class":73},[52,21927,21928],{"class":54,"line":606},[52,21929,1224],{"class":58},[52,21931,21932,21934,21936],{"class":54,"line":653},[52,21933,121],{"class":58},[52,21935,63],{"class":371},[52,21937,77],{"class":58},[15,21939,21940,21941,21944],{},"Props also accept state — ",[31,21942,21943],{},"useState"," and any other reactive value work exactly as you'd expect:",[43,21946,21948],{"className":360,"code":21947,"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,21949,21950,21960,21971,21975,21990,22014,22018,22024,22028,22042,22069,22077,22081,22088,22098,22111,22125,22135,22157,22162,22166,22170],{"__ignoreMap":48},[52,21951,21952,21954,21956,21958],{"class":54,"line":55},[52,21953,232],{"class":231},[52,21955,2345],{"class":58},[52,21957,238],{"class":231},[52,21959,2350],{"class":73},[52,21961,21962,21964,21967,21969],{"class":54,"line":80},[52,21963,232],{"class":231},[52,21965,21966],{"class":58}," { Shader, LinearGradient } ",[52,21968,238],{"class":231},[52,21970,257],{"class":73},[52,21972,21973],{"class":54,"line":108},[52,21974,597],{"emptyLinePlaceholder":171},[52,21976,21977,21980,21983,21985,21988],{"class":54,"line":118},[52,21978,21979],{"class":231},"export",[52,21981,21982],{"class":231}," default",[52,21984,9432],{"class":231},[52,21986,21987],{"class":66}," MyShader",[52,21989,2310],{"class":58},[52,21991,21992,21994,21996,21998,22000,22002,22004,22006,22008,22010,22012],{"class":54,"line":594},[52,21993,2368],{"class":231},[52,21995,2371],{"class":58},[52,21997,1199],{"class":371},[52,21999,1881],{"class":58},[52,22001,8260],{"class":371},[52,22003,2382],{"class":58},[52,22005,70],{"class":231},[52,22007,2387],{"class":66},[52,22009,2289],{"class":58},[52,22011,6161],{"class":371},[52,22013,2295],{"class":58},[52,22015,22016],{"class":54,"line":600},[52,22017,597],{"emptyLinePlaceholder":171},[52,22019,22020,22022],{"class":54,"line":606},[52,22021,2402],{"class":231},[52,22023,2405],{"class":58},[52,22025,22026],{"class":54,"line":653},[52,22027,8287],{"class":58},[52,22029,22030,22032,22034,22036,22038,22040],{"class":54,"line":662},[52,22031,2476],{"class":58},[52,22033,63],{"class":371},[52,22035,374],{"class":66},[52,22037,70],{"class":231},[52,22039,319],{"class":73},[52,22041,77],{"class":58},[52,22043,22044,22046,22048,22050,22052,22055,22057,22059,22062,22064,22066],{"class":54,"line":671},[52,22045,8300],{"class":58},[52,22047,86],{"class":371},[52,22049,89],{"class":66},[52,22051,70],{"class":231},[52,22053,22054],{"class":73},"\"#ff6b6b\"",[52,22056,97],{"class":66},[52,22058,70],{"class":231},[52,22060,22061],{"class":73},"\"#4ecdc4\"",[52,22063,8023],{"class":66},[52,22065,70],{"class":231},[52,22067,22068],{"class":58},"{angle} />\n",[52,22070,22071,22073,22075],{"class":54,"line":676},[52,22072,8406],{"class":58},[52,22074,63],{"class":371},[52,22076,77],{"class":58},[52,22078,22079],{"class":54,"line":682},[52,22080,597],{"emptyLinePlaceholder":171},[52,22082,22083,22085],{"class":54,"line":698},[52,22084,2476],{"class":58},[52,22086,22087],{"class":62},"input\n",[52,22089,22090,22093,22095],{"class":54,"line":707},[52,22091,22092],{"class":66}," type",[52,22094,70],{"class":231},[52,22096,22097],{"class":73},"\"range\"\n",[52,22099,22100,22103,22105,22107,22109],{"class":54,"line":2327},[52,22101,22102],{"class":66}," min",[52,22104,70],{"class":231},[52,22106,723],{"class":58},[52,22108,6161],{"class":371},[52,22110,729],{"class":58},[52,22112,22113,22116,22118,22120,22123],{"class":54,"line":7143},[52,22114,22115],{"class":66}," max",[52,22117,70],{"class":231},[52,22119,723],{"class":58},[52,22121,22122],{"class":371},"360",[52,22124,729],{"class":58},[52,22126,22127,22130,22132],{"class":54,"line":7153},[52,22128,22129],{"class":66}," value",[52,22131,70],{"class":231},[52,22133,22134],{"class":58},"{angle}\n",[52,22136,22137,22140,22142,22144,22146,22148,22150,22152,22154],{"class":54,"line":7164},[52,22138,22139],{"class":66}," onChange",[52,22141,70],{"class":231},[52,22143,723],{"class":58},[52,22145,21478],{"class":8319},[52,22147,8322],{"class":231},[52,22149,8314],{"class":66},[52,22151,2289],{"class":58},[52,22153,21497],{"class":66},[52,22155,22156],{"class":58},"(e.target.value))}\n",[52,22158,22159],{"class":54,"line":7169},[52,22160,22161],{"class":58}," />\n",[52,22163,22164],{"class":54,"line":8491},[52,22165,8488],{"class":58},[52,22167,22168],{"class":54,"line":8496},[52,22169,2500],{"class":58},[52,22171,22172],{"class":54,"line":9568},[52,22173,729],{"class":58},[15,22175,21507,22176,22178],{},[31,22177,1199],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,22180,21514,22181,21517],{},[1139,22182,1142],{"href":1141},[23,22184,22186],{"id":22185},"using-with-nextjs-ssr","Using with Next.js / SSR",[15,22188,22189,22190,22194],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[1139,22191,22193],{"href":22192},"/docs/guide/react/ssr","Next.js / SSR"," guide for how to set it up with server-side rendering.",[23,22196,1463],{"id":1462},[1465,22198,22199,22203,22207],{},[1468,22200,22201,1474],{},[1139,22202,1473],{"href":1472},[1468,22204,22205,1481],{},[1139,22206,1480],{"href":1479},[1468,22208,22209,1493],{},[1139,22210,1142],{"href":1141},[156,22212,22213],{},"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":22215},[22216,22217,22218,22219,22220,22221,22222],{"id":20964,"depth":80,"text":20965},{"id":21614,"depth":80,"text":21615},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":22185,"depth":80,"text":22186},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with React",{},"/docs/guide/react/quickstart",{"title":178,"description":22223},"docs/guide/react/1.quickstart","eUXTjqH1sSIhKpDvkRJgcK9YGAu0Hqp7qDlza5DLZ5k",{"id":22230,"title":22193,"body":22231,"category":1904,"description":23122,"exclude":167,"extension":168,"forceFramework":167,"icon":23123,"meta":23124,"navigation":171,"path":22192,"seo":23125,"stem":23126,"__hash__":23127},"guide/docs/guide/react/ssr.md",{"type":8,"value":22232,"toc":23113},[22233,22237,22240,22247,22250,22359,22362,22452,22457,22467,22473,22598,22601,22605,22611,22729,22733,22736,22843,22934,22938,22941,23110],[11,22234,22236],{"id":22235},"ssr-with-nextjs-react","SSR with Next.js / React",[15,22238,22239],{},"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,22241,22243,22244],{"id":22242},"app-router-use-client","App Router: ",[31,22245,22246],{},"'use client'",[15,22248,22249],{},"In Next.js App Router, create a client component wrapper:",[43,22251,22253],{"className":360,"code":22252,"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,22254,22255,22260,22265,22269,22279,22283,22295,22301,22315,22335,22343,22351,22355],{"__ignoreMap":48},[52,22256,22257],{"class":54,"line":55},[52,22258,22259],{"class":559},"// components/MyShader.jsx\n",[52,22261,22262],{"class":54,"line":80},[52,22263,22264],{"class":73},"'use client'\n",[52,22266,22267],{"class":54,"line":108},[52,22268,597],{"emptyLinePlaceholder":171},[52,22270,22271,22273,22275,22277],{"class":54,"line":118},[52,22272,232],{"class":231},[52,22274,235],{"class":58},[52,22276,238],{"class":231},[52,22278,257],{"class":73},[52,22280,22281],{"class":54,"line":594},[52,22282,597],{"emptyLinePlaceholder":171},[52,22284,22285,22287,22289,22291,22293],{"class":54,"line":600},[52,22286,21979],{"class":231},[52,22288,21982],{"class":231},[52,22290,9432],{"class":231},[52,22292,21987],{"class":66},[52,22294,2310],{"class":58},[52,22296,22297,22299],{"class":54,"line":606},[52,22298,2402],{"class":231},[52,22300,2405],{"class":58},[52,22302,22303,22305,22307,22309,22311,22313],{"class":54,"line":653},[52,22304,2213],{"class":58},[52,22306,63],{"class":371},[52,22308,374],{"class":66},[52,22310,70],{"class":231},[52,22312,319],{"class":73},[52,22314,77],{"class":58},[52,22316,22317,22319,22321,22323,22325,22327,22329,22331,22333],{"class":54,"line":662},[52,22318,2476],{"class":58},[52,22320,86],{"class":371},[52,22322,89],{"class":66},[52,22324,70],{"class":231},[52,22326,94],{"class":73},[52,22328,97],{"class":66},[52,22330,70],{"class":231},[52,22332,102],{"class":73},[52,22334,105],{"class":58},[52,22336,22337,22339,22341],{"class":54,"line":671},[52,22338,2476],{"class":58},[52,22340,113],{"class":371},[52,22342,105],{"class":58},[52,22344,22345,22347,22349],{"class":54,"line":676},[52,22346,2491],{"class":58},[52,22348,63],{"class":371},[52,22350,77],{"class":58},[52,22352,22353],{"class":54,"line":682},[52,22354,2500],{"class":58},[52,22356,22357],{"class":54,"line":698},[52,22358,729],{"class":58},[15,22360,22361],{},"Then use it in a Server Component:",[43,22363,22365],{"className":360,"code":22364,"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,22366,22367,22372,22384,22388,22401,22407,22415,22424,22436,22444,22448],{"__ignoreMap":48},[52,22368,22369],{"class":54,"line":55},[52,22370,22371],{"class":559},"// app/page.jsx (Server Component)\n",[52,22373,22374,22376,22379,22381],{"class":54,"line":80},[52,22375,232],{"class":231},[52,22377,22378],{"class":58}," MyShader ",[52,22380,238],{"class":231},[52,22382,22383],{"class":73}," '@/components/MyShader'\n",[52,22385,22386],{"class":54,"line":108},[52,22387,597],{"emptyLinePlaceholder":171},[52,22389,22390,22392,22394,22396,22399],{"class":54,"line":118},[52,22391,21979],{"class":231},[52,22393,21982],{"class":231},[52,22395,9432],{"class":231},[52,22397,22398],{"class":66}," Page",[52,22400,2310],{"class":58},[52,22402,22403,22405],{"class":54,"line":594},[52,22404,2402],{"class":231},[52,22406,2405],{"class":58},[52,22408,22409,22411,22413],{"class":54,"line":600},[52,22410,2213],{"class":58},[52,22412,10131],{"class":62},[52,22414,77],{"class":58},[52,22416,22417,22419,22422],{"class":54,"line":606},[52,22418,2476],{"class":58},[52,22420,22421],{"class":371},"MyShader",[52,22423,105],{"class":58},[52,22425,22426,22428,22430,22432,22434],{"class":54,"line":653},[52,22427,2476],{"class":58},[52,22429,11],{"class":62},[52,22431,10420],{"class":58},[52,22433,11],{"class":62},[52,22435,77],{"class":58},[52,22437,22438,22440,22442],{"class":54,"line":662},[52,22439,2491],{"class":58},[52,22441,10131],{"class":62},[52,22443,77],{"class":58},[52,22445,22446],{"class":54,"line":671},[52,22447,2500],{"class":58},[52,22449,22450],{"class":54,"line":676},[52,22451,729],{"class":58},[15,22453,1825,22454,22456],{},[31,22455,22246],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,22458,22243,22460,22463,22464],{"id":22459},"app-router-nextdynamic-with-ssr-false",[31,22461,22462],{},"next/dynamic"," with ",[31,22465,22466],{},"ssr: false",[15,22468,22469,22470,22472],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[31,22471,22462],{}," to disable SSR:",[43,22474,22476],{"className":360,"code":22475,"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,22477,22478,22483,22495,22499,22513,22531,22540,22544,22548,22560,22566,22574,22582,22590,22594],{"__ignoreMap":48},[52,22479,22480],{"class":54,"line":55},[52,22481,22482],{"class":559},"// app/page.jsx\n",[52,22484,22485,22487,22490,22492],{"class":54,"line":80},[52,22486,232],{"class":231},[52,22488,22489],{"class":58}," dynamic ",[52,22491,238],{"class":231},[52,22493,22494],{"class":73}," 'next/dynamic'\n",[52,22496,22497],{"class":54,"line":108},[52,22498,597],{"emptyLinePlaceholder":171},[52,22500,22501,22503,22505,22507,22510],{"class":54,"line":118},[52,22502,1721],{"class":231},[52,22504,21987],{"class":371},[52,22506,1727],{"class":231},[52,22508,22509],{"class":66}," dynamic",[52,22511,22512],{"class":58},"(\n",[52,22514,22515,22518,22520,22523,22525,22528],{"class":54,"line":594},[52,22516,22517],{"class":58}," () ",[52,22519,2425],{"class":231},[52,22521,22522],{"class":231}," import",[52,22524,2289],{"class":58},[52,22526,22527],{"class":73},"'@/components/MyShader'",[52,22529,22530],{"class":58},"),\n",[52,22532,22533,22536,22538],{"class":54,"line":600},[52,22534,22535],{"class":58}," { ssr: ",[52,22537,2292],{"class":371},[52,22539,13220],{"class":58},[52,22541,22542],{"class":54,"line":606},[52,22543,2295],{"class":58},[52,22545,22546],{"class":54,"line":653},[52,22547,597],{"emptyLinePlaceholder":171},[52,22549,22550,22552,22554,22556,22558],{"class":54,"line":662},[52,22551,21979],{"class":231},[52,22553,21982],{"class":231},[52,22555,9432],{"class":231},[52,22557,22398],{"class":66},[52,22559,2310],{"class":58},[52,22561,22562,22564],{"class":54,"line":671},[52,22563,2402],{"class":231},[52,22565,2405],{"class":58},[52,22567,22568,22570,22572],{"class":54,"line":676},[52,22569,2213],{"class":58},[52,22571,10131],{"class":62},[52,22573,77],{"class":58},[52,22575,22576,22578,22580],{"class":54,"line":682},[52,22577,2476],{"class":58},[52,22579,22421],{"class":371},[52,22581,105],{"class":58},[52,22583,22584,22586,22588],{"class":54,"line":698},[52,22585,2491],{"class":58},[52,22587,10131],{"class":62},[52,22589,77],{"class":58},[52,22591,22592],{"class":54,"line":707},[52,22593,2500],{"class":58},[52,22595,22596],{"class":54,"line":2327},[52,22597,729],{"class":58},[15,22599,22600],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,22602,22604],{"id":22603},"pages-router","Pages Router",[15,22606,22607,22608,22610],{},"In the Pages Router, the same ",[31,22609,22462],{}," approach works:",[43,22612,22614],{"className":360,"code":22613,"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,22615,22616,22621,22631,22635,22647,22662,22670,22674,22678,22691,22697,22705,22713,22721,22725],{"__ignoreMap":48},[52,22617,22618],{"class":54,"line":55},[52,22619,22620],{"class":559},"// pages/index.jsx\n",[52,22622,22623,22625,22627,22629],{"class":54,"line":80},[52,22624,232],{"class":231},[52,22626,22489],{"class":58},[52,22628,238],{"class":231},[52,22630,22494],{"class":73},[52,22632,22633],{"class":54,"line":108},[52,22634,597],{"emptyLinePlaceholder":171},[52,22636,22637,22639,22641,22643,22645],{"class":54,"line":118},[52,22638,1721],{"class":231},[52,22640,21987],{"class":371},[52,22642,1727],{"class":231},[52,22644,22509],{"class":66},[52,22646,22512],{"class":58},[52,22648,22649,22651,22653,22655,22657,22660],{"class":54,"line":594},[52,22650,22517],{"class":58},[52,22652,2425],{"class":231},[52,22654,22522],{"class":231},[52,22656,2289],{"class":58},[52,22658,22659],{"class":73},"'../components/MyShader'",[52,22661,22530],{"class":58},[52,22663,22664,22666,22668],{"class":54,"line":600},[52,22665,22535],{"class":58},[52,22667,2292],{"class":371},[52,22669,13220],{"class":58},[52,22671,22672],{"class":54,"line":606},[52,22673,2295],{"class":58},[52,22675,22676],{"class":54,"line":653},[52,22677,597],{"emptyLinePlaceholder":171},[52,22679,22680,22682,22684,22686,22689],{"class":54,"line":662},[52,22681,21979],{"class":231},[52,22683,21982],{"class":231},[52,22685,9432],{"class":231},[52,22687,22688],{"class":66}," Home",[52,22690,2310],{"class":58},[52,22692,22693,22695],{"class":54,"line":671},[52,22694,2402],{"class":231},[52,22696,2405],{"class":58},[52,22698,22699,22701,22703],{"class":54,"line":676},[52,22700,2213],{"class":58},[52,22702,8060],{"class":62},[52,22704,77],{"class":58},[52,22706,22707,22709,22711],{"class":54,"line":682},[52,22708,2476],{"class":58},[52,22710,22421],{"class":371},[52,22712,105],{"class":58},[52,22714,22715,22717,22719],{"class":54,"line":698},[52,22716,2491],{"class":58},[52,22718,8060],{"class":62},[52,22720,77],{"class":58},[52,22722,22723],{"class":54,"line":707},[52,22724,2500],{"class":58},[52,22726,22727],{"class":54,"line":2327},[52,22728,729],{"class":58},[23,22730,22732],{"id":22731},"in-a-root-layout","In a root layout",[15,22734,22735],{},"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,22737,22739],{"className":360,"code":22738,"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,22740,22741,22746,22758,22762,22782,22788,22796,22805,22814,22819,22827,22835,22839],{"__ignoreMap":48},[52,22742,22743],{"class":54,"line":55},[52,22744,22745],{"class":559},"// app/layout.jsx\n",[52,22747,22748,22750,22753,22755],{"class":54,"line":80},[52,22749,232],{"class":231},[52,22751,22752],{"class":58}," BackgroundShader ",[52,22754,238],{"class":231},[52,22756,22757],{"class":73}," '@/components/BackgroundShader'\n",[52,22759,22760],{"class":54,"line":108},[52,22761,597],{"emptyLinePlaceholder":171},[52,22763,22764,22766,22768,22770,22773,22776,22779],{"class":54,"line":118},[52,22765,21979],{"class":231},[52,22767,21982],{"class":231},[52,22769,9432],{"class":231},[52,22771,22772],{"class":66}," RootLayout",[52,22774,22775],{"class":58},"({ ",[52,22777,22778],{"class":8319},"children",[52,22780,22781],{"class":58}," }) {\n",[52,22783,22784,22786],{"class":54,"line":594},[52,22785,2402],{"class":231},[52,22787,2405],{"class":58},[52,22789,22790,22792,22794],{"class":54,"line":600},[52,22791,2213],{"class":58},[52,22793,10374],{"class":62},[52,22795,77],{"class":58},[52,22797,22798,22800,22803],{"class":54,"line":606},[52,22799,2476],{"class":58},[52,22801,22802],{"class":62},"body",[52,22804,77],{"class":58},[52,22806,22807,22809,22812],{"class":54,"line":653},[52,22808,8300],{"class":58},[52,22810,22811],{"class":371},"BackgroundShader",[52,22813,105],{"class":58},[52,22815,22816],{"class":54,"line":662},[52,22817,22818],{"class":58}," {children}\n",[52,22820,22821,22823,22825],{"class":54,"line":671},[52,22822,8406],{"class":58},[52,22824,22802],{"class":62},[52,22826,77],{"class":58},[52,22828,22829,22831,22833],{"class":54,"line":676},[52,22830,2491],{"class":58},[52,22832,10374],{"class":62},[52,22834,77],{"class":58},[52,22836,22837],{"class":54,"line":682},[52,22838,2500],{"class":58},[52,22840,22841],{"class":54,"line":698},[52,22842,729],{"class":58},[43,22844,22846],{"className":360,"code":22845,"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,22847,22848,22853,22857,22861,22872,22876,22889,22895,22910,22918,22926,22930],{"__ignoreMap":48},[52,22849,22850],{"class":54,"line":55},[52,22851,22852],{"class":559},"// components/BackgroundShader.jsx\n",[52,22854,22855],{"class":54,"line":80},[52,22856,22264],{"class":73},[52,22858,22859],{"class":54,"line":108},[52,22860,597],{"emptyLinePlaceholder":171},[52,22862,22863,22865,22868,22870],{"class":54,"line":118},[52,22864,232],{"class":231},[52,22866,22867],{"class":58}," { Shader, Aurora } ",[52,22869,238],{"class":231},[52,22871,257],{"class":73},[52,22873,22874],{"class":54,"line":594},[52,22875,597],{"emptyLinePlaceholder":171},[52,22877,22878,22880,22882,22884,22887],{"class":54,"line":600},[52,22879,21979],{"class":231},[52,22881,21982],{"class":231},[52,22883,9432],{"class":231},[52,22885,22886],{"class":66}," BackgroundShader",[52,22888,2310],{"class":58},[52,22890,22891,22893],{"class":54,"line":606},[52,22892,2402],{"class":231},[52,22894,2405],{"class":58},[52,22896,22897,22899,22901,22903,22905,22908],{"class":54,"line":653},[52,22898,2213],{"class":58},[52,22900,63],{"class":371},[52,22902,374],{"class":66},[52,22904,70],{"class":231},[52,22906,22907],{"class":73},"\"fixed inset-0 -z-10 pointer-events-none\"",[52,22909,77],{"class":58},[52,22911,22912,22914,22916],{"class":54,"line":662},[52,22913,2476],{"class":58},[52,22915,10110],{"class":371},[52,22917,105],{"class":58},[52,22919,22920,22922,22924],{"class":54,"line":671},[52,22921,2491],{"class":58},[52,22923,63],{"class":371},[52,22925,77],{"class":58},[52,22927,22928],{"class":54,"line":676},[52,22929,2500],{"class":58},[52,22931,22932],{"class":54,"line":682},[52,22933,729],{"class":58},[23,22935,22937],{"id":22936},"react-without-nextjs","React (without Next.js)",[15,22939,22940],{},"In a React SSR setup without Next.js, use a mounted state guard:",[43,22942,22944],{"className":360,"code":22943,"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,22945,22946,22957,22967,22971,22983,23009,23013,23023,23034,23038,23042,23062,23066,23072,23086,23094,23102,23106],{"__ignoreMap":48},[52,22947,22948,22950,22953,22955],{"class":54,"line":55},[52,22949,232],{"class":231},[52,22951,22952],{"class":58}," { useState, useEffect } ",[52,22954,238],{"class":231},[52,22956,2350],{"class":73},[52,22958,22959,22961,22963,22965],{"class":54,"line":80},[52,22960,232],{"class":231},[52,22962,21966],{"class":58},[52,22964,238],{"class":231},[52,22966,257],{"class":73},[52,22968,22969],{"class":54,"line":108},[52,22970,597],{"emptyLinePlaceholder":171},[52,22972,22973,22975,22977,22979,22981],{"class":54,"line":118},[52,22974,21979],{"class":231},[52,22976,21982],{"class":231},[52,22978,9432],{"class":231},[52,22980,21987],{"class":66},[52,22982,2310],{"class":58},[52,22984,22985,22987,22989,22992,22994,22997,22999,23001,23003,23005,23007],{"class":54,"line":594},[52,22986,2368],{"class":231},[52,22988,2371],{"class":58},[52,22990,22991],{"class":371},"mounted",[52,22993,1881],{"class":58},[52,22995,22996],{"class":371},"setMounted",[52,22998,2382],{"class":58},[52,23000,70],{"class":231},[52,23002,2387],{"class":66},[52,23004,2289],{"class":58},[52,23006,2292],{"class":371},[52,23008,2295],{"class":58},[52,23010,23011],{"class":54,"line":600},[52,23012,597],{"emptyLinePlaceholder":171},[52,23014,23015,23017,23019,23021],{"class":54,"line":606},[52,23016,13830],{"class":66},[52,23018,13590],{"class":58},[52,23020,2425],{"class":231},[52,23022,2904],{"class":58},[52,23024,23025,23028,23030,23032],{"class":54,"line":653},[52,23026,23027],{"class":66}," setMounted",[52,23029,2289],{"class":58},[52,23031,1996],{"class":371},[52,23033,2295],{"class":58},[52,23035,23036],{"class":54,"line":662},[52,23037,13924],{"class":58},[52,23039,23040],{"class":54,"line":671},[52,23041,597],{"emptyLinePlaceholder":171},[52,23043,23044,23047,23050,23053,23056,23059],{"class":54,"line":676},[52,23045,23046],{"class":231}," if",[52,23048,23049],{"class":58}," (",[52,23051,23052],{"class":231},"!",[52,23054,23055],{"class":58},"mounted) ",[52,23057,23058],{"class":231},"return",[52,23060,23061],{"class":371}," null\n",[52,23063,23064],{"class":54,"line":682},[52,23065,597],{"emptyLinePlaceholder":171},[52,23067,23068,23070],{"class":54,"line":698},[52,23069,2402],{"class":231},[52,23071,2405],{"class":58},[52,23073,23074,23076,23078,23080,23082,23084],{"class":54,"line":707},[52,23075,2213],{"class":58},[52,23077,63],{"class":371},[52,23079,374],{"class":66},[52,23081,70],{"class":231},[52,23083,319],{"class":73},[52,23085,77],{"class":58},[52,23087,23088,23090,23092],{"class":54,"line":2327},[52,23089,2476],{"class":58},[52,23091,86],{"class":371},[52,23093,105],{"class":58},[52,23095,23096,23098,23100],{"class":54,"line":7143},[52,23097,2491],{"class":58},[52,23099,63],{"class":371},[52,23101,77],{"class":58},[52,23103,23104],{"class":54,"line":7153},[52,23105,2500],{"class":58},[52,23107,23108],{"class":54,"line":7164},[52,23109,729],{"class":58},[156,23111,23112],{},"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":23114},[23115,23117,23119,23120,23121],{"id":22242,"depth":80,"text":23116},"App Router: 'use client'",{"id":22459,"depth":80,"text":23118},"App Router: next/dynamic with ssr: false",{"id":22603,"depth":80,"text":22604},{"id":22731,"depth":80,"text":22732},{"id":22936,"depth":80,"text":22937},"Using Shaders in Next.js and React SSR applications","server",{},{"title":22193,"description":23122},"docs/guide/react/ssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":23129,"title":178,"body":23130,"category":165,"description":23739,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":23740,"navigation":171,"path":23741,"seo":23742,"stem":23743,"__hash__":23744},"guide/docs/guide/solid/1.quickstart.md",{"type":8,"value":23131,"toc":23730},[23132,23136,23138,23150,23152,23166,23168,23170,23224,23226,23232,23234,23245,23378,23388,23390,23393,23465,23472,23695,23698,23702,23706,23712,23714,23728],[11,23133,23135],{"id":23134},"quickstart-solid","Quickstart (Solid)",[23,23137,20965],{"id":20964},[43,23139,23140],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,23141,23142],{"__ignoreMap":48},[52,23143,23144,23146,23148],{"class":54,"line":55},[52,23145,199],{"class":66},[52,23147,202],{"class":73},[52,23149,205],{"class":73},[23,23151,21615],{"id":21614},[43,23153,23154],{"className":222,"code":276,"language":224,"meta":48,"style":48},[31,23155,23156],{"__ignoreMap":48},[52,23157,23158,23160,23162,23164],{"class":54,"line":55},[52,23159,232],{"class":231},[52,23161,235],{"class":58},[52,23163,238],{"class":231},[52,23165,289],{"class":73},[23,23167,293],{"id":292},[15,23169,21634],{},[43,23171,23172],{"className":419,"code":304,"language":420,"meta":48,"style":48},[31,23173,23174,23188,23208,23216],{"__ignoreMap":48},[52,23175,23176,23178,23180,23182,23184,23186],{"class":54,"line":55},[52,23177,59],{"class":58},[52,23179,63],{"class":371},[52,23181,67],{"class":66},[52,23183,70],{"class":231},[52,23185,319],{"class":73},[52,23187,77],{"class":58},[52,23189,23190,23192,23194,23196,23198,23200,23202,23204,23206],{"class":54,"line":80},[52,23191,83],{"class":58},[52,23193,86],{"class":371},[52,23195,89],{"class":66},[52,23197,70],{"class":231},[52,23199,94],{"class":73},[52,23201,97],{"class":66},[52,23203,70],{"class":231},[52,23205,102],{"class":73},[52,23207,105],{"class":58},[52,23209,23210,23212,23214],{"class":54,"line":108},[52,23211,83],{"class":58},[52,23213,113],{"class":371},[52,23215,105],{"class":58},[52,23217,23218,23220,23222],{"class":54,"line":118},[52,23219,121],{"class":58},[52,23221,63],{"class":371},[52,23223,77],{"class":58},[19,23225],{":preset":529},[15,23227,23228,534,23230,21697],{},[31,23229,33],{},[31,23231,40],{},[23,23233,544],{"id":543},[15,23235,1825,23236,21704,23238,16022,23241,21710,23243,540],{},[31,23237,40],{},[31,23239,23240],{},"class",[31,23242,156],{},[31,23244,33],{},[43,23246,23248],{"className":419,"code":23247,"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,23249,23250,23258,23272,23280,23288,23292,23300,23320,23328,23336,23340,23348,23362,23370],{"__ignoreMap":48},[52,23251,23252,23254,23256],{"class":54,"line":55},[52,23253,723],{"class":58},[52,23255,726],{"class":559},[52,23257,729],{"class":58},[52,23259,23260,23262,23264,23266,23268,23270],{"class":54,"line":80},[52,23261,59],{"class":58},[52,23263,63],{"class":371},[52,23265,67],{"class":66},[52,23267,70],{"class":231},[52,23269,573],{"class":73},[52,23271,77],{"class":58},[52,23273,23274,23276,23278],{"class":54,"line":108},[52,23275,83],{"class":58},[52,23277,86],{"class":371},[52,23279,105],{"class":58},[52,23281,23282,23284,23286],{"class":54,"line":118},[52,23283,121],{"class":58},[52,23285,63],{"class":371},[52,23287,77],{"class":58},[52,23289,23290],{"class":54,"line":594},[52,23291,597],{"emptyLinePlaceholder":171},[52,23293,23294,23296,23298],{"class":54,"line":600},[52,23295,723],{"class":58},[52,23297,770],{"class":559},[52,23299,729],{"class":58},[52,23301,23302,23304,23306,23308,23310,23312,23314,23316,23318],{"class":54,"line":606},[52,23303,59],{"class":58},[52,23305,63],{"class":371},[52,23307,613],{"class":66},[52,23309,70],{"class":231},[52,23311,785],{"class":58},[52,23313,788],{"class":73},[52,23315,791],{"class":58},[52,23317,794],{"class":73},[52,23319,797],{"class":58},[52,23321,23322,23324,23326],{"class":54,"line":653},[52,23323,83],{"class":58},[52,23325,86],{"class":371},[52,23327,105],{"class":58},[52,23329,23330,23332,23334],{"class":54,"line":662},[52,23331,121],{"class":58},[52,23333,63],{"class":371},[52,23335,77],{"class":58},[52,23337,23338],{"class":54,"line":671},[52,23339,597],{"emptyLinePlaceholder":171},[52,23341,23342,23344,23346],{"class":54,"line":676},[52,23343,723],{"class":58},[52,23345,21814],{"class":559},[52,23347,729],{"class":58},[52,23349,23350,23352,23354,23356,23358,23360],{"class":54,"line":682},[52,23351,59],{"class":58},[52,23353,63],{"class":371},[52,23355,67],{"class":66},[52,23357,70],{"class":231},[52,23359,693],{"class":73},[52,23361,77],{"class":58},[52,23363,23364,23366,23368],{"class":54,"line":698},[52,23365,83],{"class":58},[52,23367,86],{"class":371},[52,23369,105],{"class":58},[52,23371,23372,23374,23376],{"class":54,"line":707},[52,23373,121],{"class":58},[52,23375,63],{"class":371},[52,23377,77],{"class":58},[15,23379,21849,23380,16022,23382,21854,23384,21857,23386,21860],{},[31,23381,23240],{},[31,23383,156],{},[31,23385,33],{},[31,23387,40],{},[23,23389,1134],{"id":1133},[15,23391,23392],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[43,23394,23395],{"className":419,"code":1310,"language":420,"meta":48,"style":48},[31,23396,23397,23411,23417,23425,23433,23445,23453,23457],{"__ignoreMap":48},[52,23398,23399,23401,23403,23405,23407,23409],{"class":54,"line":55},[52,23400,59],{"class":58},[52,23402,63],{"class":371},[52,23404,67],{"class":66},[52,23406,70],{"class":231},[52,23408,319],{"class":73},[52,23410,77],{"class":58},[52,23412,23413,23415],{"class":54,"line":80},[52,23414,83],{"class":58},[52,23416,1171],{"class":371},[52,23418,23419,23421,23423],{"class":54,"line":108},[52,23420,1176],{"class":66},[52,23422,70],{"class":231},[52,23424,1181],{"class":73},[52,23426,23427,23429,23431],{"class":54,"line":118},[52,23428,1186],{"class":66},[52,23430,70],{"class":231},[52,23432,1191],{"class":73},[52,23434,23435,23437,23439,23441,23443],{"class":54,"line":594},[52,23436,1278],{"class":66},[52,23438,70],{"class":231},[52,23440,723],{"class":58},[52,23442,1206],{"class":371},[52,23444,729],{"class":58},[52,23446,23447,23449,23451],{"class":54,"line":600},[52,23448,1291],{"class":66},[52,23450,70],{"class":231},[52,23452,1219],{"class":73},[52,23454,23455],{"class":54,"line":606},[52,23456,1224],{"class":58},[52,23458,23459,23461,23463],{"class":54,"line":653},[52,23460,121],{"class":58},[52,23462,63],{"class":371},[52,23464,77],{"class":58},[15,23466,23467,23468,23471],{},"Props also accept signals — ",[31,23469,23470],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[43,23473,23475],{"className":419,"code":23474,"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,23476,23477,23487,23497,23501,23513,23537,23541,23547,23551,23565,23594,23602,23606,23612,23620,23632,23644,23657,23679,23683,23687,23691],{"__ignoreMap":48},[52,23478,23479,23481,23483,23485],{"class":54,"line":55},[52,23480,232],{"class":231},[52,23482,2645],{"class":58},[52,23484,238],{"class":231},[52,23486,2650],{"class":73},[52,23488,23489,23491,23493,23495],{"class":54,"line":80},[52,23490,232],{"class":231},[52,23492,21966],{"class":58},[52,23494,238],{"class":231},[52,23496,289],{"class":73},[52,23498,23499],{"class":54,"line":108},[52,23500,597],{"emptyLinePlaceholder":171},[52,23502,23503,23505,23507,23509,23511],{"class":54,"line":118},[52,23504,21979],{"class":231},[52,23506,21982],{"class":231},[52,23508,9432],{"class":231},[52,23510,21987],{"class":66},[52,23512,2310],{"class":58},[52,23514,23515,23517,23519,23521,23523,23525,23527,23529,23531,23533,23535],{"class":54,"line":594},[52,23516,2368],{"class":231},[52,23518,2371],{"class":58},[52,23520,1199],{"class":371},[52,23522,1881],{"class":58},[52,23524,8260],{"class":371},[52,23526,2382],{"class":58},[52,23528,70],{"class":231},[52,23530,2681],{"class":66},[52,23532,2289],{"class":58},[52,23534,6161],{"class":371},[52,23536,2295],{"class":58},[52,23538,23539],{"class":54,"line":600},[52,23540,597],{"emptyLinePlaceholder":171},[52,23542,23543,23545],{"class":54,"line":606},[52,23544,2402],{"class":231},[52,23546,2405],{"class":58},[52,23548,23549],{"class":54,"line":653},[52,23550,8287],{"class":58},[52,23552,23553,23555,23557,23559,23561,23563],{"class":54,"line":662},[52,23554,2476],{"class":58},[52,23556,63],{"class":371},[52,23558,67],{"class":66},[52,23560,70],{"class":231},[52,23562,319],{"class":73},[52,23564,77],{"class":58},[52,23566,23567,23569,23571,23573,23575,23577,23579,23581,23583,23585,23587,23589,23591],{"class":54,"line":671},[52,23568,8300],{"class":58},[52,23570,86],{"class":371},[52,23572,89],{"class":66},[52,23574,70],{"class":231},[52,23576,22054],{"class":73},[52,23578,97],{"class":66},[52,23580,70],{"class":231},[52,23582,22061],{"class":73},[52,23584,8023],{"class":66},[52,23586,70],{"class":231},[52,23588,723],{"class":58},[52,23590,1199],{"class":66},[52,23592,23593],{"class":58},"()} />\n",[52,23595,23596,23598,23600],{"class":54,"line":676},[52,23597,8406],{"class":58},[52,23599,63],{"class":371},[52,23601,77],{"class":58},[52,23603,23604],{"class":54,"line":682},[52,23605,597],{"emptyLinePlaceholder":171},[52,23607,23608,23610],{"class":54,"line":698},[52,23609,2476],{"class":58},[52,23611,22087],{"class":62},[52,23613,23614,23616,23618],{"class":54,"line":707},[52,23615,22092],{"class":66},[52,23617,70],{"class":231},[52,23619,22097],{"class":73},[52,23621,23622,23624,23626,23628,23630],{"class":54,"line":2327},[52,23623,22102],{"class":66},[52,23625,70],{"class":231},[52,23627,723],{"class":58},[52,23629,6161],{"class":371},[52,23631,729],{"class":58},[52,23633,23634,23636,23638,23640,23642],{"class":54,"line":7143},[52,23635,22115],{"class":66},[52,23637,70],{"class":231},[52,23639,723],{"class":58},[52,23641,22122],{"class":371},[52,23643,729],{"class":58},[52,23645,23646,23648,23650,23652,23654],{"class":54,"line":7153},[52,23647,22129],{"class":66},[52,23649,70],{"class":231},[52,23651,723],{"class":58},[52,23653,1199],{"class":66},[52,23655,23656],{"class":58},"()}\n",[52,23658,23659,23662,23664,23666,23668,23670,23672,23674,23676],{"class":54,"line":7164},[52,23660,23661],{"class":66}," onInput",[52,23663,70],{"class":231},[52,23665,723],{"class":58},[52,23667,21478],{"class":8319},[52,23669,8322],{"class":231},[52,23671,8314],{"class":66},[52,23673,2289],{"class":58},[52,23675,21497],{"class":66},[52,23677,23678],{"class":58},"(e.currentTarget.value))}\n",[52,23680,23681],{"class":54,"line":7169},[52,23682,22161],{"class":58},[52,23684,23685],{"class":54,"line":8491},[52,23686,8488],{"class":58},[52,23688,23689],{"class":54,"line":8496},[52,23690,2500],{"class":58},[52,23692,23693],{"class":54,"line":9568},[52,23694,729],{"class":58},[15,23696,23697],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,23699,21514,23700,21517],{},[1139,23701,1142],{"href":1141},[23,23703,23705],{"id":23704},"using-with-solidstart-ssr","Using with SolidStart / SSR",[15,23707,22189,23708,22194],{},[1139,23709,23711],{"href":23710},"/docs/guide/solid/ssr","SolidStart / SSR",[23,23713,1463],{"id":1462},[1465,23715,23716,23720,23724],{},[1468,23717,23718,1474],{},[1139,23719,1473],{"href":1472},[1468,23721,23722,1481],{},[1139,23723,1480],{"href":1479},[1468,23725,23726,1493],{},[1139,23727,1142],{"href":1141},[156,23729,22213],{},{"title":48,"searchDepth":80,"depth":80,"links":23731},[23732,23733,23734,23735,23736,23737,23738],{"id":20964,"depth":80,"text":20965},{"id":21614,"depth":80,"text":21615},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":23704,"depth":80,"text":23705},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"/docs/guide/solid/quickstart",{"title":178,"description":23739},"docs/guide/solid/1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":23746,"title":23711,"body":23747,"category":1904,"description":24318,"exclude":167,"extension":168,"forceFramework":167,"icon":23123,"meta":24319,"navigation":171,"path":23710,"seo":24320,"stem":24321,"__hash__":24322},"guide/docs/guide/solid/ssr.md",{"type":8,"value":23748,"toc":24309},[23749,23753,23756,23763,23769,23860,23976,23988,23995,24004,24106,24112,24118,24296,24300,24306],[11,23750,23752],{"id":23751},"ssr-with-solidstart-solid","SSR with SolidStart / Solid",[15,23754,23755],{},"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,23757,23759,23762],{"id":23758},"clientonly-solidstart",[31,23760,23761],{},"clientOnly"," (SolidStart)",[15,23764,23765,23766,23768],{},"SolidStart provides a ",[31,23767,23761],{}," utility that defers a component entirely to the client. This is the recommended approach:",[43,23770,23772],{"className":360,"code":23771,"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,23773,23774,23778,23788,23792,23804,23810,23824,23844,23852,23856],{"__ignoreMap":48},[52,23775,23776],{"class":54,"line":55},[52,23777,22259],{"class":559},[52,23779,23780,23782,23784,23786],{"class":54,"line":80},[52,23781,232],{"class":231},[52,23783,21966],{"class":58},[52,23785,238],{"class":231},[52,23787,289],{"class":73},[52,23789,23790],{"class":54,"line":108},[52,23791,597],{"emptyLinePlaceholder":171},[52,23793,23794,23796,23798,23800,23802],{"class":54,"line":118},[52,23795,21979],{"class":231},[52,23797,21982],{"class":231},[52,23799,9432],{"class":231},[52,23801,21987],{"class":66},[52,23803,2310],{"class":58},[52,23805,23806,23808],{"class":54,"line":594},[52,23807,2402],{"class":231},[52,23809,2405],{"class":58},[52,23811,23812,23814,23816,23818,23820,23822],{"class":54,"line":600},[52,23813,2213],{"class":58},[52,23815,63],{"class":371},[52,23817,67],{"class":66},[52,23819,70],{"class":231},[52,23821,319],{"class":73},[52,23823,77],{"class":58},[52,23825,23826,23828,23830,23832,23834,23836,23838,23840,23842],{"class":54,"line":606},[52,23827,2476],{"class":58},[52,23829,86],{"class":371},[52,23831,89],{"class":66},[52,23833,70],{"class":231},[52,23835,94],{"class":73},[52,23837,97],{"class":66},[52,23839,70],{"class":231},[52,23841,102],{"class":73},[52,23843,105],{"class":58},[52,23845,23846,23848,23850],{"class":54,"line":653},[52,23847,2491],{"class":58},[52,23849,63],{"class":371},[52,23851,77],{"class":58},[52,23853,23854],{"class":54,"line":662},[52,23855,2500],{"class":58},[52,23857,23858],{"class":54,"line":671},[52,23859,729],{"class":58},[43,23861,23863],{"className":360,"code":23862,"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,23864,23865,23870,23882,23886,23910,23914,23926,23932,23940,23948,23960,23968,23972],{"__ignoreMap":48},[52,23866,23867],{"class":54,"line":55},[52,23868,23869],{"class":559},"// routes/index.jsx\n",[52,23871,23872,23874,23877,23879],{"class":54,"line":80},[52,23873,232],{"class":231},[52,23875,23876],{"class":58}," { clientOnly } ",[52,23878,238],{"class":231},[52,23880,23881],{"class":73}," '@solidjs/start'\n",[52,23883,23884],{"class":54,"line":108},[52,23885,597],{"emptyLinePlaceholder":171},[52,23887,23888,23890,23892,23894,23897,23899,23901,23903,23905,23907],{"class":54,"line":118},[52,23889,1721],{"class":231},[52,23891,21987],{"class":371},[52,23893,1727],{"class":231},[52,23895,23896],{"class":66}," clientOnly",[52,23898,13590],{"class":58},[52,23900,2425],{"class":231},[52,23902,22522],{"class":231},[52,23904,2289],{"class":58},[52,23906,22659],{"class":73},[52,23908,23909],{"class":58},"))\n",[52,23911,23912],{"class":54,"line":594},[52,23913,597],{"emptyLinePlaceholder":171},[52,23915,23916,23918,23920,23922,23924],{"class":54,"line":600},[52,23917,21979],{"class":231},[52,23919,21982],{"class":231},[52,23921,9432],{"class":231},[52,23923,22398],{"class":66},[52,23925,2310],{"class":58},[52,23927,23928,23930],{"class":54,"line":606},[52,23929,2402],{"class":231},[52,23931,2405],{"class":58},[52,23933,23934,23936,23938],{"class":54,"line":653},[52,23935,2213],{"class":58},[52,23937,10131],{"class":62},[52,23939,77],{"class":58},[52,23941,23942,23944,23946],{"class":54,"line":662},[52,23943,2476],{"class":58},[52,23945,22421],{"class":371},[52,23947,105],{"class":58},[52,23949,23950,23952,23954,23956,23958],{"class":54,"line":671},[52,23951,2476],{"class":58},[52,23953,11],{"class":62},[52,23955,10420],{"class":58},[52,23957,11],{"class":62},[52,23959,77],{"class":58},[52,23961,23962,23964,23966],{"class":54,"line":676},[52,23963,2491],{"class":58},[52,23965,10131],{"class":62},[52,23967,77],{"class":58},[52,23969,23970],{"class":54,"line":682},[52,23971,2500],{"class":58},[52,23973,23974],{"class":54,"line":698},[52,23975,729],{"class":58},[15,23977,23978,23980,23981,23984,23985,23987],{},[31,23979,23761],{}," wraps the component in a ",[31,23982,23983],{},"Suspense"," boundary and only renders it in the browser — it returns ",[31,23986,13819],{}," during SSR.",[23,23989,23991,23994],{"id":23990},"isserver-guard",[31,23992,23993],{},"isServer"," guard",[15,23996,23997,23998,24000,24001,1540],{},"For finer control, check ",[31,23999,23993],{}," from ",[31,24002,24003],{},"solid-js/web",[43,24005,24007],{"className":360,"code":24006,"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,24008,24009,24021,24031,24035,24047,24058,24062,24068,24082,24090,24098,24102],{"__ignoreMap":48},[52,24010,24011,24013,24016,24018],{"class":54,"line":55},[52,24012,232],{"class":231},[52,24014,24015],{"class":58}," { isServer } ",[52,24017,238],{"class":231},[52,24019,24020],{"class":73}," 'solid-js/web'\n",[52,24022,24023,24025,24027,24029],{"class":54,"line":80},[52,24024,232],{"class":231},[52,24026,21966],{"class":58},[52,24028,238],{"class":231},[52,24030,289],{"class":73},[52,24032,24033],{"class":54,"line":108},[52,24034,597],{"emptyLinePlaceholder":171},[52,24036,24037,24039,24041,24043,24045],{"class":54,"line":118},[52,24038,21979],{"class":231},[52,24040,21982],{"class":231},[52,24042,9432],{"class":231},[52,24044,21987],{"class":66},[52,24046,2310],{"class":58},[52,24048,24049,24051,24054,24056],{"class":54,"line":594},[52,24050,23046],{"class":231},[52,24052,24053],{"class":58}," (isServer) ",[52,24055,23058],{"class":231},[52,24057,23061],{"class":371},[52,24059,24060],{"class":54,"line":600},[52,24061,597],{"emptyLinePlaceholder":171},[52,24063,24064,24066],{"class":54,"line":606},[52,24065,2402],{"class":231},[52,24067,2405],{"class":58},[52,24069,24070,24072,24074,24076,24078,24080],{"class":54,"line":653},[52,24071,2213],{"class":58},[52,24073,63],{"class":371},[52,24075,67],{"class":66},[52,24077,70],{"class":231},[52,24079,319],{"class":73},[52,24081,77],{"class":58},[52,24083,24084,24086,24088],{"class":54,"line":662},[52,24085,2476],{"class":58},[52,24087,86],{"class":371},[52,24089,105],{"class":58},[52,24091,24092,24094,24096],{"class":54,"line":671},[52,24093,2491],{"class":58},[52,24095,63],{"class":371},[52,24097,77],{"class":58},[52,24099,24100],{"class":54,"line":676},[52,24101,2500],{"class":58},[52,24103,24104],{"class":54,"line":682},[52,24105,729],{"class":58},[23,24107,24109,23994],{"id":24108},"onmount-guard",[31,24110,24111],{},"onMount",[15,24113,24114,24115,24117],{},"Alternatively, use ",[31,24116,24111],{}," with a signal to defer rendering until the component is mounted in the browser:",[43,24119,24121],{"className":360,"code":24120,"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,24122,24123,24134,24144,24148,24160,24184,24188,24205,24209,24215,24229,24243,24257,24266,24275,24280,24288,24292],{"__ignoreMap":48},[52,24124,24125,24127,24130,24132],{"class":54,"line":55},[52,24126,232],{"class":231},[52,24128,24129],{"class":58}," { createSignal, onMount } ",[52,24131,238],{"class":231},[52,24133,2650],{"class":73},[52,24135,24136,24138,24140,24142],{"class":54,"line":80},[52,24137,232],{"class":231},[52,24139,21966],{"class":58},[52,24141,238],{"class":231},[52,24143,289],{"class":73},[52,24145,24146],{"class":54,"line":108},[52,24147,597],{"emptyLinePlaceholder":171},[52,24149,24150,24152,24154,24156,24158],{"class":54,"line":118},[52,24151,21979],{"class":231},[52,24153,21982],{"class":231},[52,24155,9432],{"class":231},[52,24157,21987],{"class":66},[52,24159,2310],{"class":58},[52,24161,24162,24164,24166,24168,24170,24172,24174,24176,24178,24180,24182],{"class":54,"line":594},[52,24163,2368],{"class":231},[52,24165,2371],{"class":58},[52,24167,22991],{"class":371},[52,24169,1881],{"class":58},[52,24171,22996],{"class":371},[52,24173,2382],{"class":58},[52,24175,70],{"class":231},[52,24177,2681],{"class":66},[52,24179,2289],{"class":58},[52,24181,2292],{"class":371},[52,24183,2295],{"class":58},[52,24185,24186],{"class":54,"line":600},[52,24187,597],{"emptyLinePlaceholder":171},[52,24189,24190,24192,24194,24196,24199,24201,24203],{"class":54,"line":606},[52,24191,14199],{"class":66},[52,24193,13590],{"class":58},[52,24195,2425],{"class":231},[52,24197,24198],{"class":66}," setMounted",[52,24200,2289],{"class":58},[52,24202,1996],{"class":371},[52,24204,23909],{"class":58},[52,24206,24207],{"class":54,"line":653},[52,24208,597],{"emptyLinePlaceholder":171},[52,24210,24211,24213],{"class":54,"line":662},[52,24212,2402],{"class":231},[52,24214,2405],{"class":58},[52,24216,24217,24219,24221,24223,24225,24227],{"class":54,"line":671},[52,24218,2213],{"class":58},[52,24220,8060],{"class":62},[52,24222,67],{"class":66},[52,24224,70],{"class":231},[52,24226,319],{"class":73},[52,24228,77],{"class":58},[52,24230,24231,24234,24236,24238,24241],{"class":54,"line":676},[52,24232,24233],{"class":58}," {",[52,24235,22991],{"class":66},[52,24237,2735],{"class":58},[52,24239,24240],{"class":231},"&&",[52,24242,2405],{"class":58},[52,24244,24245,24247,24249,24251,24253,24255],{"class":54,"line":682},[52,24246,8300],{"class":58},[52,24248,63],{"class":371},[52,24250,67],{"class":66},[52,24252,70],{"class":231},[52,24254,319],{"class":73},[52,24256,77],{"class":58},[52,24258,24259,24262,24264],{"class":54,"line":698},[52,24260,24261],{"class":58}," \u003C",[52,24263,86],{"class":371},[52,24265,105],{"class":58},[52,24267,24268,24271,24273],{"class":54,"line":707},[52,24269,24270],{"class":58}," \u003C/",[52,24272,63],{"class":371},[52,24274,77],{"class":58},[52,24276,24277],{"class":54,"line":2327},[52,24278,24279],{"class":58}," )}\n",[52,24281,24282,24284,24286],{"class":54,"line":7143},[52,24283,2491],{"class":58},[52,24285,8060],{"class":62},[52,24287,77],{"class":58},[52,24289,24290],{"class":54,"line":7153},[52,24291,2500],{"class":58},[52,24293,24294],{"class":54,"line":7164},[52,24295,729],{"class":58},[23,24297,24299],{"id":24298},"solid-without-solidstart","Solid (without SolidStart)",[15,24301,24302,24303,24305],{},"In a Solid app without SolidStart, the ",[31,24304,24111],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[156,24307,24308],{},"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":24310},[24311,24313,24315,24317],{"id":23758,"depth":80,"text":24312},"clientOnly (SolidStart)",{"id":23990,"depth":80,"text":24314},"isServer guard",{"id":24108,"depth":80,"text":24316},"onMount guard",{"id":24298,"depth":80,"text":24299},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":23711,"description":24318},"docs/guide/solid/ssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":24324,"title":178,"body":24325,"category":165,"description":24859,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":24860,"navigation":171,"path":24861,"seo":24862,"stem":24863,"__hash__":24864},"guide/docs/guide/svelte/1.quickstart.md",{"type":8,"value":24326,"toc":24850},[24327,24331,24333,24345,24347,24361,24363,24365,24419,24421,24427,24429,24439,24555,24565,24567,24574,24645,24655,24813,24817,24821,24825,24831,24833,24847],[11,24328,24330],{"id":24329},"quickstart-svelte","Quickstart (Svelte)",[23,24332,20965],{"id":20964},[43,24334,24335],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,24336,24337],{"__ignoreMap":48},[52,24338,24339,24341,24343],{"class":54,"line":55},[52,24340,199],{"class":66},[52,24342,202],{"class":73},[52,24344,205],{"class":73},[23,24346,21615],{"id":21614},[43,24348,24349],{"className":222,"code":260,"language":224,"meta":48,"style":48},[31,24350,24351],{"__ignoreMap":48},[52,24352,24353,24355,24357,24359],{"class":54,"line":55},[52,24354,232],{"class":231},[52,24356,235],{"class":58},[52,24358,238],{"class":231},[52,24360,273],{"class":73},[23,24362,293],{"id":292},[15,24364,21634],{},[43,24366,24367],{"className":2507,"code":304,"language":2509,"meta":48,"style":48},[31,24368,24369,24383,24403,24411],{"__ignoreMap":48},[52,24370,24371,24373,24375,24377,24379,24381],{"class":54,"line":55},[52,24372,59],{"class":58},[52,24374,63],{"class":371},[52,24376,67],{"class":66},[52,24378,70],{"class":58},[52,24380,319],{"class":73},[52,24382,77],{"class":58},[52,24384,24385,24387,24389,24391,24393,24395,24397,24399,24401],{"class":54,"line":80},[52,24386,83],{"class":58},[52,24388,86],{"class":371},[52,24390,89],{"class":66},[52,24392,70],{"class":58},[52,24394,94],{"class":73},[52,24396,97],{"class":66},[52,24398,70],{"class":58},[52,24400,102],{"class":73},[52,24402,105],{"class":58},[52,24404,24405,24407,24409],{"class":54,"line":108},[52,24406,83],{"class":58},[52,24408,113],{"class":371},[52,24410,105],{"class":58},[52,24412,24413,24415,24417],{"class":54,"line":118},[52,24414,121],{"class":58},[52,24416,63],{"class":371},[52,24418,77],{"class":58},[19,24420],{":preset":529},[15,24422,24423,534,24425,21697],{},[31,24424,33],{},[31,24426,40],{},[23,24428,544],{"id":543},[15,24430,1825,24431,21704,24433,16022,24435,21710,24437,540],{},[31,24432,40],{},[31,24434,23240],{},[31,24436,156],{},[31,24438,33],{},[43,24440,24442],{"className":2507,"code":24441,"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,24443,24444,24448,24462,24470,24478,24482,24486,24500,24508,24516,24520,24525,24539,24547],{"__ignoreMap":48},[52,24445,24446],{"class":54,"line":55},[52,24447,560],{"class":559},[52,24449,24450,24452,24454,24456,24458,24460],{"class":54,"line":80},[52,24451,59],{"class":58},[52,24453,63],{"class":371},[52,24455,67],{"class":66},[52,24457,70],{"class":58},[52,24459,573],{"class":73},[52,24461,77],{"class":58},[52,24463,24464,24466,24468],{"class":54,"line":108},[52,24465,83],{"class":58},[52,24467,86],{"class":371},[52,24469,105],{"class":58},[52,24471,24472,24474,24476],{"class":54,"line":118},[52,24473,121],{"class":58},[52,24475,63],{"class":371},[52,24477,77],{"class":58},[52,24479,24480],{"class":54,"line":594},[52,24481,597],{"emptyLinePlaceholder":171},[52,24483,24484],{"class":54,"line":600},[52,24485,603],{"class":559},[52,24487,24488,24490,24492,24494,24496,24498],{"class":54,"line":606},[52,24489,59],{"class":58},[52,24491,63],{"class":371},[52,24493,613],{"class":66},[52,24495,70],{"class":58},[52,24497,927],{"class":73},[52,24499,77],{"class":58},[52,24501,24502,24504,24506],{"class":54,"line":653},[52,24503,83],{"class":58},[52,24505,86],{"class":371},[52,24507,105],{"class":58},[52,24509,24510,24512,24514],{"class":54,"line":662},[52,24511,121],{"class":58},[52,24513,63],{"class":371},[52,24515,77],{"class":58},[52,24517,24518],{"class":54,"line":671},[52,24519,597],{"emptyLinePlaceholder":171},[52,24521,24522],{"class":54,"line":676},[52,24523,24524],{"class":559},"\u003C!-- Fluid with aspect ratio -->\n",[52,24526,24527,24529,24531,24533,24535,24537],{"class":54,"line":682},[52,24528,59],{"class":58},[52,24530,63],{"class":371},[52,24532,67],{"class":66},[52,24534,70],{"class":58},[52,24536,693],{"class":73},[52,24538,77],{"class":58},[52,24540,24541,24543,24545],{"class":54,"line":698},[52,24542,83],{"class":58},[52,24544,86],{"class":371},[52,24546,105],{"class":58},[52,24548,24549,24551,24553],{"class":54,"line":707},[52,24550,121],{"class":58},[52,24552,63],{"class":371},[52,24554,77],{"class":58},[15,24556,21849,24557,16022,24559,21854,24561,21857,24563,21860],{},[31,24558,23240],{},[31,24560,156],{},[31,24562,33],{},[31,24564,40],{},[23,24566,1134],{"id":1133},[15,24568,24569,24570,24573],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[31,24571,24572],{},"{expression}"," syntax:",[43,24575,24576],{"className":2507,"code":1310,"language":2509,"meta":48,"style":48},[31,24577,24578,24592,24598,24606,24614,24625,24633,24637],{"__ignoreMap":48},[52,24579,24580,24582,24584,24586,24588,24590],{"class":54,"line":55},[52,24581,59],{"class":58},[52,24583,63],{"class":371},[52,24585,67],{"class":66},[52,24587,70],{"class":58},[52,24589,319],{"class":73},[52,24591,77],{"class":58},[52,24593,24594,24596],{"class":54,"line":80},[52,24595,83],{"class":58},[52,24597,1171],{"class":371},[52,24599,24600,24602,24604],{"class":54,"line":108},[52,24601,1176],{"class":66},[52,24603,70],{"class":58},[52,24605,1181],{"class":73},[52,24607,24608,24610,24612],{"class":54,"line":118},[52,24609,1186],{"class":66},[52,24611,70],{"class":58},[52,24613,1191],{"class":73},[52,24615,24616,24618,24621,24623],{"class":54,"line":594},[52,24617,1278],{"class":66},[52,24619,24620],{"class":58},"={",[52,24622,1206],{"class":371},[52,24624,729],{"class":58},[52,24626,24627,24629,24631],{"class":54,"line":600},[52,24628,1291],{"class":66},[52,24630,70],{"class":58},[52,24632,1219],{"class":73},[52,24634,24635],{"class":54,"line":606},[52,24636,1224],{"class":58},[52,24638,24639,24641,24643],{"class":54,"line":653},[52,24640,121],{"class":58},[52,24642,63],{"class":371},[52,24644,77],{"class":58},[15,24646,24647,24648,24651,24652,24654],{},"Props also accept reactive state — Svelte's ",[31,24649,24650],{},"$state"," rune (or ",[31,24653,13575],{}," in Svelte 4) works exactly as you'd expect:",[43,24656,24658],{"className":2507,"code":24657,"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,24659,24660,24668,24678,24682,24700,24708,24712,24726,24754,24762,24766],{"__ignoreMap":48},[52,24661,24662,24664,24666],{"class":54,"line":55},[52,24663,59],{"class":58},[52,24665,2253],{"class":62},[52,24667,77],{"class":58},[52,24669,24670,24672,24674,24676],{"class":54,"line":80},[52,24671,10449],{"class":231},[52,24673,21966],{"class":58},[52,24675,238],{"class":231},[52,24677,273],{"class":73},[52,24679,24680],{"class":54,"line":108},[52,24681,597],{"emptyLinePlaceholder":171},[52,24683,24684,24686,24688,24690,24692,24694,24696,24698],{"class":54,"line":118},[52,24685,2524],{"class":231},[52,24687,8567],{"class":58},[52,24689,70],{"class":231},[52,24691,2532],{"class":58},[52,24693,2535],{"class":66},[52,24695,2289],{"class":58},[52,24697,6161],{"class":371},[52,24699,2295],{"class":58},[52,24701,24702,24704,24706],{"class":54,"line":594},[52,24703,121],{"class":58},[52,24705,2253],{"class":62},[52,24707,77],{"class":58},[52,24709,24710],{"class":54,"line":600},[52,24711,597],{"emptyLinePlaceholder":171},[52,24713,24714,24716,24718,24720,24722,24724],{"class":54,"line":606},[52,24715,59],{"class":58},[52,24717,63],{"class":371},[52,24719,67],{"class":66},[52,24721,70],{"class":58},[52,24723,319],{"class":73},[52,24725,77],{"class":58},[52,24727,24728,24730,24732,24734,24736,24738,24740,24742,24744,24747,24749,24752],{"class":54,"line":653},[52,24729,83],{"class":58},[52,24731,86],{"class":371},[52,24733,89],{"class":66},[52,24735,70],{"class":58},[52,24737,22054],{"class":73},[52,24739,97],{"class":66},[52,24741,70],{"class":58},[52,24743,22061],{"class":73},[52,24745,24746],{"class":66}," {",[52,24748,1199],{"class":58},[52,24750,24751],{"class":66},"}",[52,24753,105],{"class":58},[52,24755,24756,24758,24760],{"class":54,"line":662},[52,24757,121],{"class":58},[52,24759,63],{"class":371},[52,24761,77],{"class":58},[52,24763,24764],{"class":54,"line":671},[52,24765,597],{"emptyLinePlaceholder":171},[52,24767,24768,24770,24773,24775,24777,24780,24783,24785,24787,24789,24791,24794,24796,24798,24800,24802,24805,24807,24810],{"class":54,"line":676},[52,24769,59],{"class":58},[52,24771,24772],{"class":62},"input",[52,24774,10437],{"class":66},[52,24776,70],{"class":58},[52,24778,24779],{"class":73},"\"range\"",[52,24781,24782],{"class":66}," min",[52,24784,70],{"class":58},[52,24786,618],{"class":73},[52,24788,6161],{"class":371},[52,24790,618],{"class":73},[52,24792,24793],{"class":66}," max",[52,24795,70],{"class":58},[52,24797,618],{"class":73},[52,24799,22122],{"class":371},[52,24801,618],{"class":73},[52,24803,24804],{"class":231}," bind",[52,24806,1540],{"class":58},[52,24808,24809],{"class":66},"value",[52,24811,24812],{"class":58},"={angle} />\n",[15,24814,21507,24815,22178],{},[31,24816,1199],{},[15,24818,21514,24819,21517],{},[1139,24820,1142],{"href":1141},[23,24822,24824],{"id":24823},"using-with-sveltekit-ssr","Using with SvelteKit / SSR",[15,24826,22189,24827,22194],{},[1139,24828,24830],{"href":24829},"/docs/guide/svelte/ssr","SvelteKit / SSR",[23,24832,1463],{"id":1462},[1465,24834,24835,24839,24843],{},[1468,24836,24837,1474],{},[1139,24838,1473],{"href":1472},[1468,24840,24841,1481],{},[1139,24842,1480],{"href":1479},[1468,24844,24845,1493],{},[1139,24846,1142],{"href":1141},[156,24848,24849],{},"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":24851},[24852,24853,24854,24855,24856,24857,24858],{"id":20964,"depth":80,"text":20965},{"id":21614,"depth":80,"text":21615},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":24823,"depth":80,"text":24824},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"/docs/guide/svelte/quickstart",{"title":178,"description":24859},"docs/guide/svelte/1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":24866,"title":24830,"body":24867,"category":1904,"description":25454,"exclude":167,"extension":168,"forceFramework":167,"icon":23123,"meta":25455,"navigation":171,"path":24829,"seo":25456,"stem":25457,"__hash__":25458},"guide/docs/guide/svelte/ssr.md",{"type":8,"value":24868,"toc":25446},[24869,24873,24876,24880,24886,24889,24954,24957,24963,24968,25100,25107,25113,25240,25243,25247,25250,25443],[11,24870,24872],{"id":24871},"ssr-with-sveltekit-svelte","SSR with SvelteKit / Svelte",[15,24874,24875],{},"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,24877,24879],{"id":24878},"the-default-behavior","The default behavior",[15,24881,24882,24883,24885],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[31,24884,33],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,24887,24888],{},"In many cases, you don't need any special handling:",[43,24890,24892],{"className":2507,"code":24891,"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,24893,24894,24902,24912,24920,24924,24938,24946],{"__ignoreMap":48},[52,24895,24896,24898,24900],{"class":54,"line":55},[52,24897,59],{"class":58},[52,24899,2253],{"class":62},[52,24901,77],{"class":58},[52,24903,24904,24906,24908,24910],{"class":54,"line":80},[52,24905,10449],{"class":231},[52,24907,21966],{"class":58},[52,24909,238],{"class":231},[52,24911,273],{"class":73},[52,24913,24914,24916,24918],{"class":54,"line":108},[52,24915,121],{"class":58},[52,24917,2253],{"class":62},[52,24919,77],{"class":58},[52,24921,24922],{"class":54,"line":118},[52,24923,597],{"emptyLinePlaceholder":171},[52,24925,24926,24928,24930,24932,24934,24936],{"class":54,"line":594},[52,24927,59],{"class":58},[52,24929,63],{"class":371},[52,24931,67],{"class":66},[52,24933,70],{"class":58},[52,24935,319],{"class":73},[52,24937,77],{"class":58},[52,24939,24940,24942,24944],{"class":54,"line":600},[52,24941,83],{"class":58},[52,24943,86],{"class":371},[52,24945,105],{"class":58},[52,24947,24948,24950,24952],{"class":54,"line":606},[52,24949,121],{"class":58},[52,24951,63],{"class":371},[52,24953,77],{"class":58},[15,24955,24956],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,24958,24960,24962],{"id":24959},"onmount-for-browser-only-code",[31,24961,24111],{}," for browser-only code",[15,24964,24965,24966,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,24967,24111],{},[43,24969,24971],{"className":2507,"code":24970,"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,24972,24973,24981,24993,25003,25007,25014,25018,25028,25033,25044,25048,25056,25060,25084,25092],{"__ignoreMap":48},[52,24974,24975,24977,24979],{"class":54,"line":55},[52,24976,59],{"class":58},[52,24978,2253],{"class":62},[52,24980,77],{"class":58},[52,24982,24983,24985,24988,24990],{"class":54,"line":80},[52,24984,10449],{"class":231},[52,24986,24987],{"class":58}," { onMount } ",[52,24989,238],{"class":231},[52,24991,24992],{"class":73}," 'svelte'\n",[52,24994,24995,24997,24999,25001],{"class":54,"line":108},[52,24996,10449],{"class":231},[52,24998,21966],{"class":58},[52,25000,238],{"class":231},[52,25002,273],{"class":73},[52,25004,25005],{"class":54,"line":118},[52,25006,597],{"emptyLinePlaceholder":171},[52,25008,25009,25011],{"class":54,"line":594},[52,25010,2524],{"class":231},[52,25012,25013],{"class":58}," shaderEl\n",[52,25015,25016],{"class":54,"line":600},[52,25017,597],{"emptyLinePlaceholder":171},[52,25019,25020,25022,25024,25026],{"class":54,"line":606},[52,25021,14199],{"class":66},[52,25023,13590],{"class":58},[52,25025,2425],{"class":231},[52,25027,2904],{"class":58},[52,25029,25030],{"class":54,"line":653},[52,25031,25032],{"class":559}," // Safe to interact with the DOM and canvas here\n",[52,25034,25035,25038,25041],{"class":54,"line":662},[52,25036,25037],{"class":58}," console.",[52,25039,25040],{"class":66},"log",[52,25042,25043],{"class":58},"(shaderEl)\n",[52,25045,25046],{"class":54,"line":671},[52,25047,10496],{"class":58},[52,25049,25050,25052,25054],{"class":54,"line":676},[52,25051,121],{"class":58},[52,25053,2253],{"class":62},[52,25055,77],{"class":58},[52,25057,25058],{"class":54,"line":682},[52,25059,597],{"emptyLinePlaceholder":171},[52,25061,25062,25064,25066,25068,25070,25073,25076,25078,25080,25082],{"class":54,"line":698},[52,25063,59],{"class":58},[52,25065,63],{"class":371},[52,25067,24804],{"class":231},[52,25069,1540],{"class":58},[52,25071,25072],{"class":371},"this",[52,25074,25075],{"class":58},"={shaderEl} ",[52,25077,23240],{"class":66},[52,25079,70],{"class":58},[52,25081,319],{"class":73},[52,25083,77],{"class":58},[52,25085,25086,25088,25090],{"class":54,"line":707},[52,25087,83],{"class":58},[52,25089,86],{"class":371},[52,25091,105],{"class":58},[52,25093,25094,25096,25098],{"class":54,"line":2327},[52,25095,121],{"class":58},[52,25097,63],{"class":371},[52,25099,77],{"class":58},[23,25101,25103,25104],{"id":25102},"conditional-rendering-with-browser","Conditional rendering with ",[31,25105,25106],{},"browser",[15,25108,25109,25110,1540],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[31,25111,25112],{},"$app/environment",[43,25114,25116],{"className":2507,"code":25115,"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,25117,25118,25126,25138,25148,25156,25160,25171,25185,25193,25201,25211,25216,25231],{"__ignoreMap":48},[52,25119,25120,25122,25124],{"class":54,"line":55},[52,25121,59],{"class":58},[52,25123,2253],{"class":62},[52,25125,77],{"class":58},[52,25127,25128,25130,25133,25135],{"class":54,"line":80},[52,25129,10449],{"class":231},[52,25131,25132],{"class":58}," { browser } ",[52,25134,238],{"class":231},[52,25136,25137],{"class":73}," '$app/environment'\n",[52,25139,25140,25142,25144,25146],{"class":54,"line":108},[52,25141,10449],{"class":231},[52,25143,21966],{"class":58},[52,25145,238],{"class":231},[52,25147,273],{"class":73},[52,25149,25150,25152,25154],{"class":54,"line":118},[52,25151,121],{"class":58},[52,25153,2253],{"class":62},[52,25155,77],{"class":58},[52,25157,25158],{"class":54,"line":594},[52,25159,597],{"emptyLinePlaceholder":171},[52,25161,25162,25165,25168],{"class":54,"line":600},[52,25163,25164],{"class":58},"{#",[52,25166,25167],{"class":231},"if",[52,25169,25170],{"class":58}," browser}\n",[52,25172,25173,25175,25177,25179,25181,25183],{"class":54,"line":606},[52,25174,83],{"class":58},[52,25176,63],{"class":371},[52,25178,67],{"class":66},[52,25180,70],{"class":58},[52,25182,319],{"class":73},[52,25184,77],{"class":58},[52,25186,25187,25189,25191],{"class":54,"line":653},[52,25188,2213],{"class":58},[52,25190,86],{"class":371},[52,25192,105],{"class":58},[52,25194,25195,25197,25199],{"class":54,"line":662},[52,25196,2230],{"class":58},[52,25198,63],{"class":371},[52,25200,77],{"class":58},[52,25202,25203,25206,25209],{"class":54,"line":671},[52,25204,25205],{"class":58},"{:",[52,25207,25208],{"class":231},"else",[52,25210,729],{"class":58},[52,25212,25213],{"class":54,"line":676},[52,25214,25215],{"class":559}," \u003C!-- Optional server-rendered placeholder -->\n",[52,25217,25218,25220,25222,25224,25226,25229],{"class":54,"line":682},[52,25219,83],{"class":58},[52,25221,8060],{"class":62},[52,25223,67],{"class":66},[52,25225,70],{"class":58},[52,25227,25228],{"class":73},"\"w-full h-64 bg-gray-900 rounded\"",[52,25230,105],{"class":58},[52,25232,25233,25236,25238],{"class":54,"line":698},[52,25234,25235],{"class":58},"{/",[52,25237,25167],{"class":231},[52,25239,729],{"class":58},[15,25241,25242],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,25244,25246],{"id":25245},"lazy-loading","Lazy loading",[15,25248,25249],{},"To defer loading the Shaders bundle entirely until client-side:",[43,25251,25253],{"className":2507,"code":25252,"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,25254,25255,25263,25273,25277,25284,25291,25295,25310,25339,25349,25359,25363,25371,25375,25384,25408,25423,25435],{"__ignoreMap":48},[52,25256,25257,25259,25261],{"class":54,"line":55},[52,25258,59],{"class":58},[52,25260,2253],{"class":62},[52,25262,77],{"class":58},[52,25264,25265,25267,25269,25271],{"class":54,"line":80},[52,25266,10449],{"class":231},[52,25268,24987],{"class":58},[52,25270,238],{"class":231},[52,25272,24992],{"class":73},[52,25274,25275],{"class":54,"line":108},[52,25276,597],{"emptyLinePlaceholder":171},[52,25278,25279,25281],{"class":54,"line":118},[52,25280,2524],{"class":231},[52,25282,25283],{"class":58}," ShaderComponent\n",[52,25285,25286,25288],{"class":54,"line":594},[52,25287,2524],{"class":231},[52,25289,25290],{"class":58}," LinearGradientComponent\n",[52,25292,25293],{"class":54,"line":600},[52,25294,597],{"emptyLinePlaceholder":171},[52,25296,25297,25299,25301,25304,25306,25308],{"class":54,"line":606},[52,25298,14199],{"class":66},[52,25300,2289],{"class":58},[52,25302,25303],{"class":231},"async",[52,25305,13605],{"class":58},[52,25307,2425],{"class":231},[52,25309,2904],{"class":58},[52,25311,25312,25314,25317,25319,25321,25323,25326,25328,25330,25332,25334,25337],{"class":54,"line":653},[52,25313,13841],{"class":231},[52,25315,25316],{"class":58}," { ",[52,25318,63],{"class":371},[52,25320,1881],{"class":58},[52,25322,86],{"class":371},[52,25324,25325],{"class":58}," } ",[52,25327,70],{"class":231},[52,25329,1730],{"class":231},[52,25331,22522],{"class":231},[52,25333,2289],{"class":58},[52,25335,25336],{"class":73},"'shaders/svelte'",[52,25338,2295],{"class":58},[52,25340,25341,25344,25346],{"class":54,"line":662},[52,25342,25343],{"class":58}," ShaderComponent ",[52,25345,70],{"class":231},[52,25347,25348],{"class":58}," Shader\n",[52,25350,25351,25354,25356],{"class":54,"line":671},[52,25352,25353],{"class":58}," LinearGradientComponent ",[52,25355,70],{"class":231},[52,25357,25358],{"class":58}," LinearGradient\n",[52,25360,25361],{"class":54,"line":676},[52,25362,10496],{"class":58},[52,25364,25365,25367,25369],{"class":54,"line":682},[52,25366,121],{"class":58},[52,25368,2253],{"class":62},[52,25370,77],{"class":58},[52,25372,25373],{"class":54,"line":698},[52,25374,597],{"emptyLinePlaceholder":171},[52,25376,25377,25379,25381],{"class":54,"line":707},[52,25378,25164],{"class":58},[52,25380,25167],{"class":231},[52,25382,25383],{"class":58}," ShaderComponent}\n",[52,25385,25386,25388,25390,25392,25395,25397,25400,25402,25404,25406],{"class":54,"line":2327},[52,25387,83],{"class":58},[52,25389,2509],{"class":231},[52,25391,1540],{"class":58},[52,25393,25394],{"class":62},"component",[52,25396,3476],{"class":66},[52,25398,25399],{"class":58},"={ShaderComponent} ",[52,25401,23240],{"class":66},[52,25403,70],{"class":58},[52,25405,319],{"class":73},[52,25407,77],{"class":58},[52,25409,25410,25412,25414,25416,25418,25420],{"class":54,"line":7143},[52,25411,2213],{"class":58},[52,25413,2509],{"class":231},[52,25415,1540],{"class":58},[52,25417,25394],{"class":62},[52,25419,3476],{"class":66},[52,25421,25422],{"class":58},"={LinearGradientComponent} />\n",[52,25424,25425,25427,25429,25431,25433],{"class":54,"line":7153},[52,25426,2230],{"class":58},[52,25428,2509],{"class":231},[52,25430,1540],{"class":58},[52,25432,25394],{"class":62},[52,25434,77],{"class":58},[52,25436,25437,25439,25441],{"class":54,"line":7164},[52,25438,25235],{"class":58},[52,25440,25167],{"class":231},[52,25442,729],{"class":58},[156,25444,25445],{},"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":25447},[25448,25449,25451,25453],{"id":24878,"depth":80,"text":24879},{"id":24959,"depth":80,"text":25450},"onMount for browser-only code",{"id":25102,"depth":80,"text":25452},"Conditional rendering with browser",{"id":25245,"depth":80,"text":25246},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":24830,"description":25454},"docs/guide/svelte/ssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":25460,"title":178,"body":25461,"category":165,"description":25977,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":25978,"navigation":171,"path":25979,"seo":25980,"stem":25981,"__hash__":25982},"guide/docs/guide/vue/1.quickstart.md",{"type":8,"value":25462,"toc":25968},[25463,25467,25469,25481,25483,25497,25499,25501,25555,25557,25563,25565,25572,25686,25693,25695,25701,25772,25775,25945,25949,25953,25957,25963,25965],[11,25464,25466],{"id":25465},"quickstart-vue","Quickstart (Vue)",[23,25468,20965],{"id":20964},[43,25470,25471],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,25472,25473],{"__ignoreMap":48},[52,25474,25475,25477,25479],{"class":54,"line":55},[52,25476,199],{"class":66},[52,25478,202],{"class":73},[52,25480,205],{"class":73},[23,25482,21615],{"id":21614},[43,25484,25485],{"className":222,"code":223,"language":224,"meta":48,"style":48},[31,25486,25487],{"__ignoreMap":48},[52,25488,25489,25491,25493,25495],{"class":54,"line":55},[52,25490,232],{"class":231},[52,25492,235],{"class":58},[52,25494,238],{"class":231},[52,25496,241],{"class":73},[23,25498,293],{"id":292},[15,25500,21634],{},[43,25502,25503],{"className":45,"code":304,"language":47,"meta":48,"style":48},[31,25504,25505,25519,25539,25547],{"__ignoreMap":48},[52,25506,25507,25509,25511,25513,25515,25517],{"class":54,"line":55},[52,25508,59],{"class":58},[52,25510,63],{"class":62},[52,25512,67],{"class":66},[52,25514,70],{"class":58},[52,25516,319],{"class":73},[52,25518,77],{"class":58},[52,25520,25521,25523,25525,25527,25529,25531,25533,25535,25537],{"class":54,"line":80},[52,25522,83],{"class":58},[52,25524,86],{"class":62},[52,25526,89],{"class":66},[52,25528,70],{"class":58},[52,25530,94],{"class":73},[52,25532,97],{"class":66},[52,25534,70],{"class":58},[52,25536,102],{"class":73},[52,25538,105],{"class":58},[52,25540,25541,25543,25545],{"class":54,"line":108},[52,25542,83],{"class":58},[52,25544,113],{"class":62},[52,25546,105],{"class":58},[52,25548,25549,25551,25553],{"class":54,"line":118},[52,25550,121],{"class":58},[52,25552,63],{"class":62},[52,25554,77],{"class":58},[19,25556],{":preset":529},[15,25558,25559,534,25561,21697],{},[31,25560,33],{},[31,25562,40],{},[23,25564,544],{"id":543},[15,25566,1825,25567,25569,25570,540],{},[31,25568,40],{}," has no intrinsic size. The class or style you apply to ",[31,25571,33],{},[43,25573,25574],{"className":45,"code":24441,"language":47,"meta":48,"style":48},[31,25575,25576,25580,25594,25602,25610,25614,25618,25632,25640,25648,25652,25656,25670,25678],{"__ignoreMap":48},[52,25577,25578],{"class":54,"line":55},[52,25579,560],{"class":559},[52,25581,25582,25584,25586,25588,25590,25592],{"class":54,"line":80},[52,25583,59],{"class":58},[52,25585,63],{"class":62},[52,25587,67],{"class":66},[52,25589,70],{"class":58},[52,25591,573],{"class":73},[52,25593,77],{"class":58},[52,25595,25596,25598,25600],{"class":54,"line":108},[52,25597,83],{"class":58},[52,25599,86],{"class":62},[52,25601,105],{"class":58},[52,25603,25604,25606,25608],{"class":54,"line":118},[52,25605,121],{"class":58},[52,25607,63],{"class":62},[52,25609,77],{"class":58},[52,25611,25612],{"class":54,"line":594},[52,25613,597],{"emptyLinePlaceholder":171},[52,25615,25616],{"class":54,"line":600},[52,25617,603],{"class":559},[52,25619,25620,25622,25624,25626,25628,25630],{"class":54,"line":606},[52,25621,59],{"class":58},[52,25623,63],{"class":62},[52,25625,613],{"class":66},[52,25627,70],{"class":58},[52,25629,927],{"class":73},[52,25631,77],{"class":58},[52,25633,25634,25636,25638],{"class":54,"line":653},[52,25635,83],{"class":58},[52,25637,86],{"class":62},[52,25639,105],{"class":58},[52,25641,25642,25644,25646],{"class":54,"line":662},[52,25643,121],{"class":58},[52,25645,63],{"class":62},[52,25647,77],{"class":58},[52,25649,25650],{"class":54,"line":671},[52,25651,597],{"emptyLinePlaceholder":171},[52,25653,25654],{"class":54,"line":676},[52,25655,24524],{"class":559},[52,25657,25658,25660,25662,25664,25666,25668],{"class":54,"line":682},[52,25659,59],{"class":58},[52,25661,63],{"class":62},[52,25663,67],{"class":66},[52,25665,70],{"class":58},[52,25667,693],{"class":73},[52,25669,77],{"class":58},[52,25671,25672,25674,25676],{"class":54,"line":698},[52,25673,83],{"class":58},[52,25675,86],{"class":62},[52,25677,105],{"class":58},[52,25679,25680,25682,25684],{"class":54,"line":707},[52,25681,121],{"class":58},[52,25683,63],{"class":62},[52,25685,77],{"class":58},[15,25687,25688,25689,21857,25691,21860],{},"Applying a class or style to the ",[31,25690,33],{},[31,25692,40],{},[23,25694,1134],{"id":1133},[15,25696,25697,25698,25700],{},"Pass props directly to configure each component. Numeric props use Vue's ",[31,25699,1540],{}," binding syntax, strings can be passed plain:",[43,25702,25704],{"className":45,"code":25703,"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,25705,25706,25720,25726,25734,25742,25752,25760,25764],{"__ignoreMap":48},[52,25707,25708,25710,25712,25714,25716,25718],{"class":54,"line":55},[52,25709,59],{"class":58},[52,25711,63],{"class":62},[52,25713,67],{"class":66},[52,25715,70],{"class":58},[52,25717,319],{"class":73},[52,25719,77],{"class":58},[52,25721,25722,25724],{"class":54,"line":80},[52,25723,83],{"class":58},[52,25725,1171],{"class":62},[52,25727,25728,25730,25732],{"class":54,"line":108},[52,25729,16744],{"class":66},[52,25731,70],{"class":58},[52,25733,1181],{"class":73},[52,25735,25736,25738,25740],{"class":54,"line":118},[52,25737,16754],{"class":66},[52,25739,70],{"class":58},[52,25741,1191],{"class":73},[52,25743,25744,25747,25749],{"class":54,"line":594},[52,25745,25746],{"class":66}," :angle",[52,25748,70],{"class":58},[52,25750,25751],{"class":73},"\"45\"\n",[52,25753,25754,25756,25758],{"class":54,"line":600},[52,25755,1214],{"class":66},[52,25757,70],{"class":58},[52,25759,1219],{"class":73},[52,25761,25762],{"class":54,"line":606},[52,25763,1224],{"class":58},[52,25765,25766,25768,25770],{"class":54,"line":653},[52,25767,121],{"class":58},[52,25769,63],{"class":62},[52,25771,77],{"class":58},[15,25773,25774],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[43,25776,25778],{"className":6505,"code":25777,"language":6507,"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,25779,25780,25790,25800,25810,25814,25830,25838,25842,25850,25864,25890,25898,25902,25937],{"__ignoreMap":48},[52,25781,25782,25784,25786,25788],{"class":54,"line":55},[52,25783,59],{"class":58},[52,25785,2253],{"class":62},[52,25787,2256],{"class":66},[52,25789,77],{"class":58},[52,25791,25792,25794,25796,25798],{"class":54,"line":80},[52,25793,232],{"class":231},[52,25795,2265],{"class":58},[52,25797,238],{"class":231},[52,25799,2270],{"class":73},[52,25801,25802,25804,25806,25808],{"class":54,"line":108},[52,25803,232],{"class":231},[52,25805,21966],{"class":58},[52,25807,238],{"class":231},[52,25809,241],{"class":73},[52,25811,25812],{"class":54,"line":118},[52,25813,597],{"emptyLinePlaceholder":171},[52,25815,25816,25818,25820,25822,25824,25826,25828],{"class":54,"line":594},[52,25817,1721],{"class":231},[52,25819,8023],{"class":371},[52,25821,1727],{"class":231},[52,25823,2286],{"class":66},[52,25825,2289],{"class":58},[52,25827,6161],{"class":371},[52,25829,2295],{"class":58},[52,25831,25832,25834,25836],{"class":54,"line":600},[52,25833,121],{"class":58},[52,25835,2253],{"class":62},[52,25837,77],{"class":58},[52,25839,25840],{"class":54,"line":606},[52,25841,597],{"emptyLinePlaceholder":171},[52,25843,25844,25846,25848],{"class":54,"line":653},[52,25845,59],{"class":58},[52,25847,2182],{"class":62},[52,25849,77],{"class":58},[52,25851,25852,25854,25856,25858,25860,25862],{"class":54,"line":662},[52,25853,83],{"class":58},[52,25855,63],{"class":62},[52,25857,67],{"class":66},[52,25859,70],{"class":58},[52,25861,319],{"class":73},[52,25863,77],{"class":58},[52,25865,25866,25868,25870,25872,25874,25876,25878,25880,25882,25884,25886,25888],{"class":54,"line":671},[52,25867,2213],{"class":58},[52,25869,86],{"class":62},[52,25871,17609],{"class":66},[52,25873,70],{"class":58},[52,25875,22054],{"class":73},[52,25877,17616],{"class":66},[52,25879,70],{"class":58},[52,25881,22061],{"class":73},[52,25883,8180],{"class":66},[52,25885,70],{"class":58},[52,25887,8185],{"class":73},[52,25889,105],{"class":58},[52,25891,25892,25894,25896],{"class":54,"line":676},[52,25893,2230],{"class":58},[52,25895,63],{"class":62},[52,25897,77],{"class":58},[52,25899,25900],{"class":54,"line":682},[52,25901,597],{"emptyLinePlaceholder":171},[52,25903,25904,25906,25908,25910,25912,25914,25916,25918,25921,25923,25925,25928,25931,25933,25935],{"class":54,"line":698},[52,25905,83],{"class":58},[52,25907,24772],{"class":62},[52,25909,10437],{"class":66},[52,25911,70],{"class":58},[52,25913,24779],{"class":73},[52,25915,24782],{"class":66},[52,25917,70],{"class":58},[52,25919,25920],{"class":73},"\"0\"",[52,25922,24793],{"class":66},[52,25924,70],{"class":58},[52,25926,25927],{"class":73},"\"360\"",[52,25929,25930],{"class":66}," v-model.number",[52,25932,70],{"class":58},[52,25934,8185],{"class":73},[52,25936,105],{"class":58},[52,25938,25939,25941,25943],{"class":54,"line":707},[52,25940,121],{"class":58},[52,25942,2182],{"class":62},[52,25944,77],{"class":58},[15,25946,21507,25947,22178],{},[31,25948,1199],{},[15,25950,21514,25951,21517],{},[1139,25952,1142],{"href":1141},[23,25954,25956],{"id":25955},"using-with-nuxt-ssr","Using with Nuxt / SSR",[15,25958,22189,25959,22194],{},[1139,25960,25962],{"href":25961},"/docs/guide/vue/ssr","Nuxt / SSR",[23,25964,1463],{"id":1462},[156,25966,25967],{},"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":25969},[25970,25971,25972,25973,25974,25975,25976],{"id":20964,"depth":80,"text":20965},{"id":21614,"depth":80,"text":21615},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":25955,"depth":80,"text":25956},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"/docs/guide/vue/quickstart",{"title":178,"description":25977},"docs/guide/vue/1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":25984,"title":25962,"body":25985,"category":1904,"description":26658,"exclude":167,"extension":168,"forceFramework":167,"icon":23123,"meta":26659,"navigation":171,"path":25961,"seo":26660,"stem":26661,"__hash__":26662},"guide/docs/guide/vue/ssr.md",{"type":8,"value":25986,"toc":26651},[25987,25991,25994,26001,26007,26059,26062,26065,26161,26165,26172,26324,26328,26331,26532,26539,26628,26634,26638,26648],[11,25988,25990],{"id":25989},"ssr-with-nuxt-vue","SSR with Nuxt / Vue",[15,25992,25993],{},"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,25995,25997,25998],{"id":25996},"nuxt-clientonly","Nuxt: ",[31,25999,26000],{},"\u003CClientOnly>",[15,26002,26003,26004,26006],{},"Nuxt provides a built-in ",[31,26005,26000],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[43,26008,26010],{"className":45,"code":26009,"language":47,"meta":48,"style":48},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n\u003C/ClientOnly>\n",[31,26011,26012,26021,26035,26043,26051],{"__ignoreMap":48},[52,26013,26014,26016,26019],{"class":54,"line":55},[52,26015,59],{"class":58},[52,26017,26018],{"class":62},"ClientOnly",[52,26020,77],{"class":58},[52,26022,26023,26025,26027,26029,26031,26033],{"class":54,"line":80},[52,26024,83],{"class":58},[52,26026,63],{"class":62},[52,26028,67],{"class":66},[52,26030,70],{"class":58},[52,26032,319],{"class":73},[52,26034,77],{"class":58},[52,26036,26037,26039,26041],{"class":54,"line":108},[52,26038,2213],{"class":58},[52,26040,86],{"class":62},[52,26042,105],{"class":58},[52,26044,26045,26047,26049],{"class":54,"line":118},[52,26046,2230],{"class":58},[52,26048,63],{"class":62},[52,26050,77],{"class":58},[52,26052,26053,26055,26057],{"class":54,"line":594},[52,26054,121],{"class":58},[52,26056,26018],{"class":62},[52,26058,77],{"class":58},[15,26060,26061],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,26063,26064],{},"You can add a placeholder slot to show something while the client-side shader loads:",[43,26066,26068],{"className":45,"code":26067,"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,26069,26070,26078,26092,26100,26108,26112,26126,26145,26153],{"__ignoreMap":48},[52,26071,26072,26074,26076],{"class":54,"line":55},[52,26073,59],{"class":58},[52,26075,26018],{"class":62},[52,26077,77],{"class":58},[52,26079,26080,26082,26084,26086,26088,26090],{"class":54,"line":80},[52,26081,83],{"class":58},[52,26083,63],{"class":62},[52,26085,67],{"class":66},[52,26087,70],{"class":58},[52,26089,319],{"class":73},[52,26091,77],{"class":58},[52,26093,26094,26096,26098],{"class":54,"line":108},[52,26095,2213],{"class":58},[52,26097,86],{"class":62},[52,26099,105],{"class":58},[52,26101,26102,26104,26106],{"class":54,"line":118},[52,26103,2230],{"class":58},[52,26105,63],{"class":62},[52,26107,77],{"class":58},[52,26109,26110],{"class":54,"line":594},[52,26111,597],{"emptyLinePlaceholder":171},[52,26113,26114,26116,26118,26121,26124],{"class":54,"line":600},[52,26115,83],{"class":58},[52,26117,2182],{"class":62},[52,26119,26120],{"class":58}," #",[52,26122,26123],{"class":66},"fallback",[52,26125,77],{"class":58},[52,26127,26128,26130,26132,26134,26136,26139,26143],{"class":54,"line":606},[52,26129,2213],{"class":58},[52,26131,8060],{"class":62},[52,26133,67],{"class":66},[52,26135,70],{"class":58},[52,26137,26138],{"class":73},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[52,26140,26142],{"class":26141},"s6RL2"," /",[52,26144,77],{"class":58},[52,26146,26147,26149,26151],{"class":54,"line":653},[52,26148,2230],{"class":58},[52,26150,2182],{"class":62},[52,26152,77],{"class":58},[52,26154,26155,26157,26159],{"class":54,"line":662},[52,26156,121],{"class":58},[52,26158,26018],{"class":62},[52,26160,77],{"class":58},[23,26162,26164],{"id":26163},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,26166,26167,26168,26171],{},"If you're using Vue SSR without Nuxt, use ",[31,26169,26170],{},"v-if"," with a mounted flag:",[43,26173,26175],{"className":6505,"code":26174,"language":6507,"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,26176,26177,26187,26198,26202,26219,26236,26244,26248,26256,26270,26292,26300,26308,26316],{"__ignoreMap":48},[52,26178,26179,26181,26183,26185],{"class":54,"line":55},[52,26180,59],{"class":58},[52,26182,2253],{"class":62},[52,26184,2256],{"class":66},[52,26186,77],{"class":58},[52,26188,26189,26191,26194,26196],{"class":54,"line":80},[52,26190,232],{"class":231},[52,26192,26193],{"class":58}," { ref, onMounted } ",[52,26195,238],{"class":231},[52,26197,2270],{"class":73},[52,26199,26200],{"class":54,"line":108},[52,26201,597],{"emptyLinePlaceholder":171},[52,26203,26204,26206,26209,26211,26213,26215,26217],{"class":54,"line":118},[52,26205,1721],{"class":231},[52,26207,26208],{"class":371}," isMounted",[52,26210,1727],{"class":231},[52,26212,2286],{"class":66},[52,26214,2289],{"class":58},[52,26216,2292],{"class":371},[52,26218,2295],{"class":58},[52,26220,26221,26223,26225,26227,26230,26232,26234],{"class":54,"line":594},[52,26222,13587],{"class":66},[52,26224,13590],{"class":58},[52,26226,2425],{"class":231},[52,26228,26229],{"class":58}," { isMounted.value ",[52,26231,70],{"class":231},[52,26233,2574],{"class":371},[52,26235,9111],{"class":58},[52,26237,26238,26240,26242],{"class":54,"line":600},[52,26239,121],{"class":58},[52,26241,2253],{"class":62},[52,26243,77],{"class":58},[52,26245,26246],{"class":54,"line":606},[52,26247,597],{"emptyLinePlaceholder":171},[52,26249,26250,26252,26254],{"class":54,"line":653},[52,26251,59],{"class":58},[52,26253,2182],{"class":62},[52,26255,77],{"class":58},[52,26257,26258,26260,26262,26264,26266,26268],{"class":54,"line":662},[52,26259,83],{"class":58},[52,26261,8060],{"class":62},[52,26263,67],{"class":66},[52,26265,70],{"class":58},[52,26267,319],{"class":73},[52,26269,77],{"class":58},[52,26271,26272,26274,26276,26279,26281,26284,26286,26288,26290],{"class":54,"line":671},[52,26273,2213],{"class":58},[52,26275,63],{"class":62},[52,26277,26278],{"class":66}," v-if",[52,26280,70],{"class":58},[52,26282,26283],{"class":73},"\"isMounted\"",[52,26285,67],{"class":66},[52,26287,70],{"class":58},[52,26289,319],{"class":73},[52,26291,77],{"class":58},[52,26293,26294,26296,26298],{"class":54,"line":676},[52,26295,2476],{"class":58},[52,26297,86],{"class":62},[52,26299,105],{"class":58},[52,26301,26302,26304,26306],{"class":54,"line":682},[52,26303,2491],{"class":58},[52,26305,63],{"class":62},[52,26307,77],{"class":58},[52,26309,26310,26312,26314],{"class":54,"line":698},[52,26311,2230],{"class":58},[52,26313,8060],{"class":62},[52,26315,77],{"class":58},[52,26317,26318,26320,26322],{"class":54,"line":707},[52,26319,121],{"class":58},[52,26321,2182],{"class":62},[52,26323,77],{"class":58},[23,26325,26327],{"id":26326},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,26329,26330],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[43,26332,26334],{"className":6505,"code":26333,"language":6507,"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,26335,26336,26346,26357,26361,26377,26393,26397,26402,26440,26474,26482,26486,26494,26508,26516,26524],{"__ignoreMap":48},[52,26337,26338,26340,26342,26344],{"class":54,"line":55},[52,26339,59],{"class":58},[52,26341,2253],{"class":62},[52,26343,2256],{"class":66},[52,26345,77],{"class":58},[52,26347,26348,26350,26353,26355],{"class":54,"line":80},[52,26349,232],{"class":231},[52,26351,26352],{"class":58}," { defineAsyncComponent, ref, onMounted } ",[52,26354,238],{"class":231},[52,26356,2270],{"class":73},[52,26358,26359],{"class":54,"line":108},[52,26360,597],{"emptyLinePlaceholder":171},[52,26362,26363,26365,26367,26369,26371,26373,26375],{"class":54,"line":118},[52,26364,1721],{"class":231},[52,26366,26208],{"class":371},[52,26368,1727],{"class":231},[52,26370,2286],{"class":66},[52,26372,2289],{"class":58},[52,26374,2292],{"class":371},[52,26376,2295],{"class":58},[52,26378,26379,26381,26383,26385,26387,26389,26391],{"class":54,"line":594},[52,26380,13587],{"class":66},[52,26382,13590],{"class":58},[52,26384,2425],{"class":231},[52,26386,26229],{"class":58},[52,26388,70],{"class":231},[52,26390,2574],{"class":371},[52,26392,9111],{"class":58},[52,26394,26395],{"class":54,"line":600},[52,26396,597],{"emptyLinePlaceholder":171},[52,26398,26399],{"class":54,"line":606},[52,26400,26401],{"class":559},"// Lazy-load shader components — only fetched client-side when rendered\n",[52,26403,26404,26406,26409,26411,26414,26416,26418,26420,26422,26425,26427,26430,26432,26435,26437],{"class":54,"line":653},[52,26405,1721],{"class":231},[52,26407,26408],{"class":371}," Shader",[52,26410,1727],{"class":231},[52,26412,26413],{"class":66}," defineAsyncComponent",[52,26415,13590],{"class":58},[52,26417,2425],{"class":231},[52,26419,22522],{"class":231},[52,26421,2289],{"class":58},[52,26423,26424],{"class":73},"'shaders/vue'",[52,26426,21465],{"class":58},[52,26428,26429],{"class":66},"then",[52,26431,2289],{"class":58},[52,26433,26434],{"class":8319},"m",[52,26436,8322],{"class":231},[52,26438,26439],{"class":58}," m.Shader))\n",[52,26441,26442,26444,26447,26449,26451,26453,26455,26457,26459,26461,26463,26465,26467,26469,26471],{"class":54,"line":662},[52,26443,1721],{"class":231},[52,26445,26446],{"class":371}," LinearGradient",[52,26448,1727],{"class":231},[52,26450,26413],{"class":66},[52,26452,13590],{"class":58},[52,26454,2425],{"class":231},[52,26456,22522],{"class":231},[52,26458,2289],{"class":58},[52,26460,26424],{"class":73},[52,26462,21465],{"class":58},[52,26464,26429],{"class":66},[52,26466,2289],{"class":58},[52,26468,26434],{"class":8319},[52,26470,8322],{"class":231},[52,26472,26473],{"class":58}," m.LinearGradient))\n",[52,26475,26476,26478,26480],{"class":54,"line":671},[52,26477,121],{"class":58},[52,26479,2253],{"class":62},[52,26481,77],{"class":58},[52,26483,26484],{"class":54,"line":676},[52,26485,597],{"emptyLinePlaceholder":171},[52,26487,26488,26490,26492],{"class":54,"line":682},[52,26489,59],{"class":58},[52,26491,2182],{"class":62},[52,26493,77],{"class":58},[52,26495,26496,26498,26500,26502,26504,26506],{"class":54,"line":698},[52,26497,83],{"class":58},[52,26499,63],{"class":62},[52,26501,26278],{"class":66},[52,26503,70],{"class":58},[52,26505,26283],{"class":73},[52,26507,77],{"class":58},[52,26509,26510,26512,26514],{"class":54,"line":707},[52,26511,2213],{"class":58},[52,26513,86],{"class":62},[52,26515,105],{"class":58},[52,26517,26518,26520,26522],{"class":54,"line":2327},[52,26519,2230],{"class":58},[52,26521,63],{"class":62},[52,26523,77],{"class":58},[52,26525,26526,26528,26530],{"class":54,"line":7143},[52,26527,121],{"class":58},[52,26529,2182],{"class":62},[52,26531,77],{"class":58},[15,26533,26534,26535,26538],{},"Or in Nuxt, use ",[31,26536,26537],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[43,26540,26542],{"className":222,"code":26541,"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,26543,26544,26549,26561,26571,26575,26596,26611,26624],{"__ignoreMap":48},[52,26545,26546],{"class":54,"line":55},[52,26547,26548],{"class":559},"// plugins/shaders.client.ts\n",[52,26550,26551,26553,26556,26558],{"class":54,"line":80},[52,26552,232],{"class":231},[52,26554,26555],{"class":58}," { defineNuxtPlugin } ",[52,26557,238],{"class":231},[52,26559,26560],{"class":73}," '#app'\n",[52,26562,26563,26565,26567,26569],{"class":54,"line":108},[52,26564,232],{"class":231},[52,26566,21966],{"class":58},[52,26568,238],{"class":231},[52,26570,241],{"class":73},[52,26572,26573],{"class":54,"line":118},[52,26574,597],{"emptyLinePlaceholder":171},[52,26576,26577,26579,26581,26584,26587,26590,26592,26594],{"class":54,"line":594},[52,26578,21979],{"class":231},[52,26580,21982],{"class":231},[52,26582,26583],{"class":66}," defineNuxtPlugin",[52,26585,26586],{"class":58},"((",[52,26588,26589],{"class":8319},"nuxtApp",[52,26591,9491],{"class":58},[52,26593,2425],{"class":231},[52,26595,2904],{"class":58},[52,26597,26598,26601,26603,26605,26608],{"class":54,"line":600},[52,26599,26600],{"class":58}," nuxtApp.vueApp.",[52,26602,25394],{"class":66},[52,26604,2289],{"class":58},[52,26606,26607],{"class":73},"'Shader'",[52,26609,26610],{"class":58},", Shader)\n",[52,26612,26613,26615,26617,26619,26621],{"class":54,"line":606},[52,26614,26600],{"class":58},[52,26616,25394],{"class":66},[52,26618,2289],{"class":58},[52,26620,2126],{"class":73},[52,26622,26623],{"class":58},", LinearGradient)\n",[52,26625,26626],{"class":54,"line":653},[52,26627,1778],{"class":58},[15,26629,1825,26630,26633],{},[31,26631,26632],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,26635,26637],{"id":26636},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,26639,1825,26640,9743,26642,26644,26645,26647],{},[31,26641,33],{},[31,26643,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,26646,26000],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[156,26649,26650],{},"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":26652},[26653,26655,26656,26657],{"id":25996,"depth":80,"text":26654},"Nuxt: \u003CClientOnly>",{"id":26163,"depth":80,"text":26164},{"id":26326,"depth":80,"text":26327},{"id":26636,"depth":80,"text":26637},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":25962,"description":26658},"docs/guide/vue/ssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[26664,27006,27284,27542,27742,27942,28275,28552,28886,29162,29438,29637,29942,30218,30508,30840,31040,31316,31609,31902,32179,32559,32813,33013,33213,33546,33822,34065,34434,34710,34955,35229,35429,35705,35905,36181,36474,36674,36950,37224,37555,37887,38218,38474,38744,38989,39365,39636,39912,40112,40388,40588,40858,41134,41389,41721,41919,42297,42572,42772,43065,43341,43617,43893,44148,44526,44818,45151,45483,45739,46071,46363,46563,46808,47139,47415,47795,47995,48240,48516,48760,49092,49292,49584,49784,50059,50259,50506,50705,51037,51360,51605,51881,52081,52413,52705,53038,53238,53652,53852,54128,54328,54528],{"id":26665,"title":26666,"body":26667,"category":27000,"componentType":20623,"description":26674,"extension":168,"meta":27001,"navigation":171,"path":27002,"requiresChild":171,"seo":27003,"stem":27004,"__hash__":27005},"components/docs/components/AngularBlur.md","AngularBlur",{"type":8,"value":26668,"toc":26996},[26669,26672,26675,26678,26681,26685,26689,26994],[11,26670,26666],{"id":26671},"angularblur",[15,26673,26674],{},"Radial motion blur rotating around a center point",[26676,26677],"shader-preview",{"component":26666},[23,26679,26680],{"id":21278},"Props",[26682,26683],"props-table",{":props":26684},"[{\"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,26686,26688],{"id":26687},"usage","Usage",[217,26690,26691,26749,26809,26865,26923],{":tabs":1543},[43,26692,26694],{"className":45,"code":26693,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26695,26696,26704,26711,26720,26725,26733,26741],{"__ignoreMap":48},[52,26697,26698,26700,26702],{"class":54,"line":55},[52,26699,59],{"class":58},[52,26701,63],{"class":62},[52,26703,77],{"class":58},[52,26705,26706,26708],{"class":54,"line":80},[52,26707,83],{"class":58},[52,26709,26710],{"class":62},"AngularBlur\n",[52,26712,26713,26715,26717],{"class":54,"line":108},[52,26714,17644],{"class":66},[52,26716,70],{"class":58},[52,26718,26719],{"class":73},"\"20\"\n",[52,26721,26722],{"class":54,"line":118},[52,26723,26724],{"class":58}," >\n",[52,26726,26727,26729,26731],{"class":54,"line":594},[52,26728,2213],{"class":58},[52,26730,2216],{"class":62},[52,26732,105],{"class":58},[52,26734,26735,26737,26739],{"class":54,"line":600},[52,26736,2230],{"class":58},[52,26738,26666],{"class":62},[52,26740,77],{"class":58},[52,26742,26743,26745,26747],{"class":54,"line":606},[52,26744,121],{"class":58},[52,26746,63],{"class":62},[52,26748,77],{"class":58},[43,26750,26752],{"className":360,"code":26751,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26753,26754,26762,26768,26781,26785,26793,26801],{"__ignoreMap":48},[52,26755,26756,26758,26760],{"class":54,"line":55},[52,26757,59],{"class":58},[52,26759,63],{"class":371},[52,26761,77],{"class":58},[52,26763,26764,26766],{"class":54,"line":80},[52,26765,83],{"class":58},[52,26767,26710],{"class":371},[52,26769,26770,26772,26774,26776,26779],{"class":54,"line":108},[52,26771,17755],{"class":66},[52,26773,70],{"class":231},[52,26775,723],{"class":58},[52,26777,26778],{"class":371},"20",[52,26780,729],{"class":58},[52,26782,26783],{"class":54,"line":118},[52,26784,26724],{"class":58},[52,26786,26787,26789,26791],{"class":54,"line":594},[52,26788,2213],{"class":58},[52,26790,2216],{"class":371},[52,26792,105],{"class":58},[52,26794,26795,26797,26799],{"class":54,"line":600},[52,26796,2230],{"class":58},[52,26798,26666],{"class":371},[52,26800,77],{"class":58},[52,26802,26803,26805,26807],{"class":54,"line":606},[52,26804,121],{"class":58},[52,26806,63],{"class":371},[52,26808,77],{"class":58},[43,26810,26811],{"className":2507,"code":26751,"language":2509,"meta":48,"style":48},[31,26812,26813,26821,26827,26837,26841,26849,26857],{"__ignoreMap":48},[52,26814,26815,26817,26819],{"class":54,"line":55},[52,26816,59],{"class":58},[52,26818,63],{"class":371},[52,26820,77],{"class":58},[52,26822,26823,26825],{"class":54,"line":80},[52,26824,83],{"class":58},[52,26826,26710],{"class":371},[52,26828,26829,26831,26833,26835],{"class":54,"line":108},[52,26830,17755],{"class":66},[52,26832,24620],{"class":58},[52,26834,26778],{"class":371},[52,26836,729],{"class":58},[52,26838,26839],{"class":54,"line":118},[52,26840,26724],{"class":58},[52,26842,26843,26845,26847],{"class":54,"line":594},[52,26844,2213],{"class":58},[52,26846,2216],{"class":371},[52,26848,105],{"class":58},[52,26850,26851,26853,26855],{"class":54,"line":600},[52,26852,2230],{"class":58},[52,26854,26666],{"class":371},[52,26856,77],{"class":58},[52,26858,26859,26861,26863],{"class":54,"line":606},[52,26860,121],{"class":58},[52,26862,63],{"class":371},[52,26864,77],{"class":58},[43,26866,26867],{"className":419,"code":26751,"language":420,"meta":48,"style":48},[31,26868,26869,26877,26883,26895,26899,26907,26915],{"__ignoreMap":48},[52,26870,26871,26873,26875],{"class":54,"line":55},[52,26872,59],{"class":58},[52,26874,63],{"class":371},[52,26876,77],{"class":58},[52,26878,26879,26881],{"class":54,"line":80},[52,26880,83],{"class":58},[52,26882,26710],{"class":371},[52,26884,26885,26887,26889,26891,26893],{"class":54,"line":108},[52,26886,17755],{"class":66},[52,26888,70],{"class":231},[52,26890,723],{"class":58},[52,26892,26778],{"class":371},[52,26894,729],{"class":58},[52,26896,26897],{"class":54,"line":118},[52,26898,26724],{"class":58},[52,26900,26901,26903,26905],{"class":54,"line":594},[52,26902,2213],{"class":58},[52,26904,2216],{"class":371},[52,26906,105],{"class":58},[52,26908,26909,26911,26913],{"class":54,"line":600},[52,26910,2230],{"class":58},[52,26912,26666],{"class":371},[52,26914,77],{"class":58},[52,26916,26917,26919,26921],{"class":54,"line":606},[52,26918,121],{"class":58},[52,26920,63],{"class":371},[52,26922,77],{"class":58},[43,26924,26926],{"className":222,"code":26925,"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,26927,26928,26938,26942,26956,26960,26974,26982,26986,26990],{"__ignoreMap":48},[52,26929,26930,26932,26934,26936],{"class":54,"line":55},[52,26931,232],{"class":231},[52,26933,9005],{"class":58},[52,26935,238],{"class":231},[52,26937,9010],{"class":73},[52,26939,26940],{"class":54,"line":80},[52,26941,597],{"emptyLinePlaceholder":171},[52,26943,26944,26946,26948,26950,26952,26954],{"class":54,"line":108},[52,26945,1721],{"class":231},[52,26947,1724],{"class":371},[52,26949,1727],{"class":231},[52,26951,1730],{"class":231},[52,26953,1733],{"class":66},[52,26955,1736],{"class":58},[52,26957,26958],{"class":54,"line":118},[52,26959,1751],{"class":58},[52,26961,26962,26964,26967,26970,26972],{"class":54,"line":594},[52,26963,1756],{"class":58},[52,26965,26966],{"class":73},"'AngularBlur'",[52,26968,26969],{"class":58},", props: { intensity: ",[52,26971,26778],{"class":371},[52,26973,5033],{"class":58},[52,26975,26976,26978,26980],{"class":54,"line":600},[52,26977,4501],{"class":58},[52,26979,2869],{"class":73},[52,26981,2129],{"class":58},[52,26983,26984],{"class":54,"line":606},[52,26985,4518],{"class":58},[52,26987,26988],{"class":54,"line":653},[52,26989,1773],{"class":58},[52,26991,26992],{"class":54,"line":662},[52,26993,1778],{"class":58},[156,26995,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":26997},[26998,26999],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Blurs",{},"/docs/components/angularblur",{"title":26666,"description":26674},"docs/components/AngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":27007,"title":27008,"body":27009,"category":27278,"componentType":20623,"description":27016,"extension":168,"meta":27279,"navigation":171,"path":27280,"requiresChild":171,"seo":27281,"stem":27282,"__hash__":27283},"components/docs/components/Ascii.md","Ascii",{"type":8,"value":27010,"toc":27274},[27011,27014,27017,27019,27021,27024,27026,27271],[11,27012,27008],{"id":27013},"ascii",[15,27015,27016],{},"Convert imagery to ASCII character art",[26676,27018],{"component":27008},[23,27020,26680],{"id":21278},[26682,27022],{":props":27023},"[{\"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,27025,26688],{"id":26687},[217,27027,27028,27073,27117,27161,27205],{":tabs":1543},[43,27029,27031],{"className":45,"code":27030,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAscii>\n \u003CCircle />\n \u003C/Ascii>\n\u003C/Shader>\n",[31,27032,27033,27041,27049,27057,27065],{"__ignoreMap":48},[52,27034,27035,27037,27039],{"class":54,"line":55},[52,27036,59],{"class":58},[52,27038,63],{"class":62},[52,27040,77],{"class":58},[52,27042,27043,27045,27047],{"class":54,"line":80},[52,27044,83],{"class":58},[52,27046,27008],{"class":62},[52,27048,77],{"class":58},[52,27050,27051,27053,27055],{"class":54,"line":108},[52,27052,2213],{"class":58},[52,27054,2216],{"class":62},[52,27056,105],{"class":58},[52,27058,27059,27061,27063],{"class":54,"line":118},[52,27060,2230],{"class":58},[52,27062,27008],{"class":62},[52,27064,77],{"class":58},[52,27066,27067,27069,27071],{"class":54,"line":594},[52,27068,121],{"class":58},[52,27070,63],{"class":62},[52,27072,77],{"class":58},[43,27074,27075],{"className":360,"code":27030,"language":362,"meta":48,"style":48},[31,27076,27077,27085,27093,27101,27109],{"__ignoreMap":48},[52,27078,27079,27081,27083],{"class":54,"line":55},[52,27080,59],{"class":58},[52,27082,63],{"class":371},[52,27084,77],{"class":58},[52,27086,27087,27089,27091],{"class":54,"line":80},[52,27088,83],{"class":58},[52,27090,27008],{"class":371},[52,27092,77],{"class":58},[52,27094,27095,27097,27099],{"class":54,"line":108},[52,27096,2213],{"class":58},[52,27098,2216],{"class":371},[52,27100,105],{"class":58},[52,27102,27103,27105,27107],{"class":54,"line":118},[52,27104,2230],{"class":58},[52,27106,27008],{"class":371},[52,27108,77],{"class":58},[52,27110,27111,27113,27115],{"class":54,"line":594},[52,27112,121],{"class":58},[52,27114,63],{"class":371},[52,27116,77],{"class":58},[43,27118,27119],{"className":2507,"code":27030,"language":2509,"meta":48,"style":48},[31,27120,27121,27129,27137,27145,27153],{"__ignoreMap":48},[52,27122,27123,27125,27127],{"class":54,"line":55},[52,27124,59],{"class":58},[52,27126,63],{"class":371},[52,27128,77],{"class":58},[52,27130,27131,27133,27135],{"class":54,"line":80},[52,27132,83],{"class":58},[52,27134,27008],{"class":371},[52,27136,77],{"class":58},[52,27138,27139,27141,27143],{"class":54,"line":108},[52,27140,2213],{"class":58},[52,27142,2216],{"class":371},[52,27144,105],{"class":58},[52,27146,27147,27149,27151],{"class":54,"line":118},[52,27148,2230],{"class":58},[52,27150,27008],{"class":371},[52,27152,77],{"class":58},[52,27154,27155,27157,27159],{"class":54,"line":594},[52,27156,121],{"class":58},[52,27158,63],{"class":371},[52,27160,77],{"class":58},[43,27162,27163],{"className":419,"code":27030,"language":420,"meta":48,"style":48},[31,27164,27165,27173,27181,27189,27197],{"__ignoreMap":48},[52,27166,27167,27169,27171],{"class":54,"line":55},[52,27168,59],{"class":58},[52,27170,63],{"class":371},[52,27172,77],{"class":58},[52,27174,27175,27177,27179],{"class":54,"line":80},[52,27176,83],{"class":58},[52,27178,27008],{"class":371},[52,27180,77],{"class":58},[52,27182,27183,27185,27187],{"class":54,"line":108},[52,27184,2213],{"class":58},[52,27186,2216],{"class":371},[52,27188,105],{"class":58},[52,27190,27191,27193,27195],{"class":54,"line":118},[52,27192,2230],{"class":58},[52,27194,27008],{"class":371},[52,27196,77],{"class":58},[52,27198,27199,27201,27203],{"class":54,"line":594},[52,27200,121],{"class":58},[52,27202,63],{"class":371},[52,27204,77],{"class":58},[43,27206,27208],{"className":222,"code":27207,"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,27209,27210,27220,27224,27238,27242,27251,27259,27263,27267],{"__ignoreMap":48},[52,27211,27212,27214,27216,27218],{"class":54,"line":55},[52,27213,232],{"class":231},[52,27215,9005],{"class":58},[52,27217,238],{"class":231},[52,27219,9010],{"class":73},[52,27221,27222],{"class":54,"line":80},[52,27223,597],{"emptyLinePlaceholder":171},[52,27225,27226,27228,27230,27232,27234,27236],{"class":54,"line":108},[52,27227,1721],{"class":231},[52,27229,1724],{"class":371},[52,27231,1727],{"class":231},[52,27233,1730],{"class":231},[52,27235,1733],{"class":66},[52,27237,1736],{"class":58},[52,27239,27240],{"class":54,"line":118},[52,27241,1751],{"class":58},[52,27243,27244,27246,27249],{"class":54,"line":594},[52,27245,1756],{"class":58},[52,27247,27248],{"class":73},"'Ascii'",[52,27250,4496],{"class":58},[52,27252,27253,27255,27257],{"class":54,"line":600},[52,27254,4501],{"class":58},[52,27256,2869],{"class":73},[52,27258,2129],{"class":58},[52,27260,27261],{"class":54,"line":606},[52,27262,4518],{"class":58},[52,27264,27265],{"class":54,"line":653},[52,27266,1773],{"class":58},[52,27268,27269],{"class":54,"line":662},[52,27270,1778],{"class":58},[156,27272,27273],{},"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":27275},[27276,27277],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Stylize",{},"/docs/components/ascii",{"title":27008,"description":27016},"docs/components/Ascii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":27285,"title":10110,"body":27286,"category":27535,"componentType":20617,"description":27293,"extension":168,"meta":27536,"navigation":171,"path":27537,"requiresChild":27538,"seo":27539,"stem":27540,"__hash__":27541},"components/docs/components/Aurora.md",{"type":8,"value":27287,"toc":27531},[27288,27291,27294,27296,27298,27301,27303,27529],[11,27289,10110],{"id":27290},"aurora",[15,27292,27293],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[26676,27295],{"component":10110},[23,27297,26680],{"id":21278},[26682,27299],{":props":27300},"[{\"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,27302,26688],{"id":26687},[217,27304,27305,27346,27390,27430,27472],{":tabs":1543},[43,27306,27308],{"className":45,"code":27307,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n />\n\u003C/Shader>\n",[31,27309,27310,27318,27325,27334,27338],{"__ignoreMap":48},[52,27311,27312,27314,27316],{"class":54,"line":55},[52,27313,59],{"class":58},[52,27315,63],{"class":62},[52,27317,77],{"class":58},[52,27319,27320,27322],{"class":54,"line":80},[52,27321,83],{"class":58},[52,27323,27324],{"class":62},"Aurora\n",[52,27326,27327,27329,27331],{"class":54,"line":108},[52,27328,17644],{"class":66},[52,27330,70],{"class":58},[52,27332,27333],{"class":73},"\"80\"\n",[52,27335,27336],{"class":54,"line":118},[52,27337,1224],{"class":58},[52,27339,27340,27342,27344],{"class":54,"line":594},[52,27341,121],{"class":58},[52,27343,63],{"class":62},[52,27345,77],{"class":58},[43,27347,27349],{"className":360,"code":27348,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n intensity={80}\n />\n\u003C/Shader>\n",[31,27350,27351,27359,27365,27378,27382],{"__ignoreMap":48},[52,27352,27353,27355,27357],{"class":54,"line":55},[52,27354,59],{"class":58},[52,27356,63],{"class":371},[52,27358,77],{"class":58},[52,27360,27361,27363],{"class":54,"line":80},[52,27362,83],{"class":58},[52,27364,27324],{"class":371},[52,27366,27367,27369,27371,27373,27376],{"class":54,"line":108},[52,27368,17755],{"class":66},[52,27370,70],{"class":231},[52,27372,723],{"class":58},[52,27374,27375],{"class":371},"80",[52,27377,729],{"class":58},[52,27379,27380],{"class":54,"line":118},[52,27381,1224],{"class":58},[52,27383,27384,27386,27388],{"class":54,"line":594},[52,27385,121],{"class":58},[52,27387,63],{"class":371},[52,27389,77],{"class":58},[43,27391,27392],{"className":2507,"code":27348,"language":2509,"meta":48,"style":48},[31,27393,27394,27402,27408,27418,27422],{"__ignoreMap":48},[52,27395,27396,27398,27400],{"class":54,"line":55},[52,27397,59],{"class":58},[52,27399,63],{"class":371},[52,27401,77],{"class":58},[52,27403,27404,27406],{"class":54,"line":80},[52,27405,83],{"class":58},[52,27407,27324],{"class":371},[52,27409,27410,27412,27414,27416],{"class":54,"line":108},[52,27411,17755],{"class":66},[52,27413,24620],{"class":58},[52,27415,27375],{"class":371},[52,27417,729],{"class":58},[52,27419,27420],{"class":54,"line":118},[52,27421,1224],{"class":58},[52,27423,27424,27426,27428],{"class":54,"line":594},[52,27425,121],{"class":58},[52,27427,63],{"class":371},[52,27429,77],{"class":58},[43,27431,27432],{"className":419,"code":27348,"language":420,"meta":48,"style":48},[31,27433,27434,27442,27448,27460,27464],{"__ignoreMap":48},[52,27435,27436,27438,27440],{"class":54,"line":55},[52,27437,59],{"class":58},[52,27439,63],{"class":371},[52,27441,77],{"class":58},[52,27443,27444,27446],{"class":54,"line":80},[52,27445,83],{"class":58},[52,27447,27324],{"class":371},[52,27449,27450,27452,27454,27456,27458],{"class":54,"line":108},[52,27451,17755],{"class":66},[52,27453,70],{"class":231},[52,27455,723],{"class":58},[52,27457,27375],{"class":371},[52,27459,729],{"class":58},[52,27461,27462],{"class":54,"line":118},[52,27463,1224],{"class":58},[52,27465,27466,27468,27470],{"class":54,"line":594},[52,27467,121],{"class":58},[52,27469,63],{"class":371},[52,27471,77],{"class":58},[43,27473,27475],{"className":222,"code":27474,"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,27476,27477,27487,27491,27505,27509,27521,27525],{"__ignoreMap":48},[52,27478,27479,27481,27483,27485],{"class":54,"line":55},[52,27480,232],{"class":231},[52,27482,9005],{"class":58},[52,27484,238],{"class":231},[52,27486,9010],{"class":73},[52,27488,27489],{"class":54,"line":80},[52,27490,597],{"emptyLinePlaceholder":171},[52,27492,27493,27495,27497,27499,27501,27503],{"class":54,"line":108},[52,27494,1721],{"class":231},[52,27496,1724],{"class":371},[52,27498,1727],{"class":231},[52,27500,1730],{"class":231},[52,27502,1733],{"class":66},[52,27504,1736],{"class":58},[52,27506,27507],{"class":54,"line":118},[52,27508,1751],{"class":58},[52,27510,27511,27513,27515,27517,27519],{"class":54,"line":594},[52,27512,1756],{"class":58},[52,27514,10488],{"class":73},[52,27516,26969],{"class":58},[52,27518,27375],{"class":371},[52,27520,1768],{"class":58},[52,27522,27523],{"class":54,"line":600},[52,27524,1773],{"class":58},[52,27526,27527],{"class":54,"line":606},[52,27528,1778],{"class":58},[156,27530,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":27532},[27533,27534],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Textures",{},"/docs/components/aurora",false,{"title":10110,"description":27293},"docs/components/Aurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":27543,"title":27544,"body":27545,"category":27535,"componentType":20617,"description":27552,"extension":168,"meta":27737,"navigation":171,"path":27738,"requiresChild":27538,"seo":27739,"stem":27740,"__hash__":27741},"components/docs/components/Beam.md","Beam",{"type":8,"value":27546,"toc":27733},[27547,27550,27553,27555,27557,27560,27562,27731],[11,27548,27544],{"id":27549},"beam",[15,27551,27552],{},"A beam of light from one point to another.",[26676,27554],{"component":27544},[23,27556,26680],{"id":21278},[26682,27558],{":props":27559},"[{\"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,27561,26688],{"id":26687},[217,27563,27564,27593,27621,27649,27677],{":tabs":1543},[43,27565,27567],{"className":45,"code":27566,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBeam />\n\u003C/Shader>\n",[31,27568,27569,27577,27585],{"__ignoreMap":48},[52,27570,27571,27573,27575],{"class":54,"line":55},[52,27572,59],{"class":58},[52,27574,63],{"class":62},[52,27576,77],{"class":58},[52,27578,27579,27581,27583],{"class":54,"line":80},[52,27580,83],{"class":58},[52,27582,27544],{"class":62},[52,27584,105],{"class":58},[52,27586,27587,27589,27591],{"class":54,"line":108},[52,27588,121],{"class":58},[52,27590,63],{"class":62},[52,27592,77],{"class":58},[43,27594,27595],{"className":360,"code":27566,"language":362,"meta":48,"style":48},[31,27596,27597,27605,27613],{"__ignoreMap":48},[52,27598,27599,27601,27603],{"class":54,"line":55},[52,27600,59],{"class":58},[52,27602,63],{"class":371},[52,27604,77],{"class":58},[52,27606,27607,27609,27611],{"class":54,"line":80},[52,27608,83],{"class":58},[52,27610,27544],{"class":371},[52,27612,105],{"class":58},[52,27614,27615,27617,27619],{"class":54,"line":108},[52,27616,121],{"class":58},[52,27618,63],{"class":371},[52,27620,77],{"class":58},[43,27622,27623],{"className":2507,"code":27566,"language":2509,"meta":48,"style":48},[31,27624,27625,27633,27641],{"__ignoreMap":48},[52,27626,27627,27629,27631],{"class":54,"line":55},[52,27628,59],{"class":58},[52,27630,63],{"class":371},[52,27632,77],{"class":58},[52,27634,27635,27637,27639],{"class":54,"line":80},[52,27636,83],{"class":58},[52,27638,27544],{"class":371},[52,27640,105],{"class":58},[52,27642,27643,27645,27647],{"class":54,"line":108},[52,27644,121],{"class":58},[52,27646,63],{"class":371},[52,27648,77],{"class":58},[43,27650,27651],{"className":419,"code":27566,"language":420,"meta":48,"style":48},[31,27652,27653,27661,27669],{"__ignoreMap":48},[52,27654,27655,27657,27659],{"class":54,"line":55},[52,27656,59],{"class":58},[52,27658,63],{"class":371},[52,27660,77],{"class":58},[52,27662,27663,27665,27667],{"class":54,"line":80},[52,27664,83],{"class":58},[52,27666,27544],{"class":371},[52,27668,105],{"class":58},[52,27670,27671,27673,27675],{"class":54,"line":108},[52,27672,121],{"class":58},[52,27674,63],{"class":371},[52,27676,77],{"class":58},[43,27678,27680],{"className":222,"code":27679,"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,27681,27682,27692,27696,27710,27714,27723,27727],{"__ignoreMap":48},[52,27683,27684,27686,27688,27690],{"class":54,"line":55},[52,27685,232],{"class":231},[52,27687,9005],{"class":58},[52,27689,238],{"class":231},[52,27691,9010],{"class":73},[52,27693,27694],{"class":54,"line":80},[52,27695,597],{"emptyLinePlaceholder":171},[52,27697,27698,27700,27702,27704,27706,27708],{"class":54,"line":108},[52,27699,1721],{"class":231},[52,27701,1724],{"class":371},[52,27703,1727],{"class":231},[52,27705,1730],{"class":231},[52,27707,1733],{"class":66},[52,27709,1736],{"class":58},[52,27711,27712],{"class":54,"line":118},[52,27713,1751],{"class":58},[52,27715,27716,27718,27721],{"class":54,"line":594},[52,27717,1756],{"class":58},[52,27719,27720],{"class":73},"'Beam'",[52,27722,2129],{"class":58},[52,27724,27725],{"class":54,"line":600},[52,27726,1773],{"class":58},[52,27728,27729],{"class":54,"line":606},[52,27730,1778],{"class":58},[156,27732,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":27734},[27735,27736],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/beam",{"title":27544,"description":27552},"docs/components/Beam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":27743,"title":27744,"body":27745,"category":27535,"componentType":20617,"description":27752,"extension":168,"meta":27937,"navigation":171,"path":27938,"requiresChild":27538,"seo":27939,"stem":27940,"__hash__":27941},"components/docs/components/Blob.md","Blob",{"type":8,"value":27746,"toc":27933},[27747,27750,27753,27755,27757,27760,27762,27931],[11,27748,27744],{"id":27749},"blob",[15,27751,27752],{},"Organic animated blob with 3D lighting and gradients",[26676,27754],{"component":27744},[23,27756,26680],{"id":21278},[26682,27758],{":props":27759},"[{\"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,27761,26688],{"id":26687},[217,27763,27764,27793,27821,27849,27877],{":tabs":1543},[43,27765,27767],{"className":45,"code":27766,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlob />\n\u003C/Shader>\n",[31,27768,27769,27777,27785],{"__ignoreMap":48},[52,27770,27771,27773,27775],{"class":54,"line":55},[52,27772,59],{"class":58},[52,27774,63],{"class":62},[52,27776,77],{"class":58},[52,27778,27779,27781,27783],{"class":54,"line":80},[52,27780,83],{"class":58},[52,27782,27744],{"class":62},[52,27784,105],{"class":58},[52,27786,27787,27789,27791],{"class":54,"line":108},[52,27788,121],{"class":58},[52,27790,63],{"class":62},[52,27792,77],{"class":58},[43,27794,27795],{"className":360,"code":27766,"language":362,"meta":48,"style":48},[31,27796,27797,27805,27813],{"__ignoreMap":48},[52,27798,27799,27801,27803],{"class":54,"line":55},[52,27800,59],{"class":58},[52,27802,63],{"class":371},[52,27804,77],{"class":58},[52,27806,27807,27809,27811],{"class":54,"line":80},[52,27808,83],{"class":58},[52,27810,27744],{"class":371},[52,27812,105],{"class":58},[52,27814,27815,27817,27819],{"class":54,"line":108},[52,27816,121],{"class":58},[52,27818,63],{"class":371},[52,27820,77],{"class":58},[43,27822,27823],{"className":2507,"code":27766,"language":2509,"meta":48,"style":48},[31,27824,27825,27833,27841],{"__ignoreMap":48},[52,27826,27827,27829,27831],{"class":54,"line":55},[52,27828,59],{"class":58},[52,27830,63],{"class":371},[52,27832,77],{"class":58},[52,27834,27835,27837,27839],{"class":54,"line":80},[52,27836,83],{"class":58},[52,27838,27744],{"class":371},[52,27840,105],{"class":58},[52,27842,27843,27845,27847],{"class":54,"line":108},[52,27844,121],{"class":58},[52,27846,63],{"class":371},[52,27848,77],{"class":58},[43,27850,27851],{"className":419,"code":27766,"language":420,"meta":48,"style":48},[31,27852,27853,27861,27869],{"__ignoreMap":48},[52,27854,27855,27857,27859],{"class":54,"line":55},[52,27856,59],{"class":58},[52,27858,63],{"class":371},[52,27860,77],{"class":58},[52,27862,27863,27865,27867],{"class":54,"line":80},[52,27864,83],{"class":58},[52,27866,27744],{"class":371},[52,27868,105],{"class":58},[52,27870,27871,27873,27875],{"class":54,"line":108},[52,27872,121],{"class":58},[52,27874,63],{"class":371},[52,27876,77],{"class":58},[43,27878,27880],{"className":222,"code":27879,"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,27881,27882,27892,27896,27910,27914,27923,27927],{"__ignoreMap":48},[52,27883,27884,27886,27888,27890],{"class":54,"line":55},[52,27885,232],{"class":231},[52,27887,9005],{"class":58},[52,27889,238],{"class":231},[52,27891,9010],{"class":73},[52,27893,27894],{"class":54,"line":80},[52,27895,597],{"emptyLinePlaceholder":171},[52,27897,27898,27900,27902,27904,27906,27908],{"class":54,"line":108},[52,27899,1721],{"class":231},[52,27901,1724],{"class":371},[52,27903,1727],{"class":231},[52,27905,1730],{"class":231},[52,27907,1733],{"class":66},[52,27909,1736],{"class":58},[52,27911,27912],{"class":54,"line":118},[52,27913,1751],{"class":58},[52,27915,27916,27918,27921],{"class":54,"line":594},[52,27917,1756],{"class":58},[52,27919,27920],{"class":73},"'Blob'",[52,27922,2129],{"class":58},[52,27924,27925],{"class":54,"line":600},[52,27926,1773],{"class":58},[52,27928,27929],{"class":54,"line":606},[52,27930,1778],{"class":58},[156,27932,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":27934},[27935,27936],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/blob",{"title":27744,"description":27752},"docs/components/Blob","2a5XrgmcJxcBLcEQkxs8e3ZaxmxCERp56Moc00FmMUE",{"id":27943,"title":9260,"body":27944,"category":27000,"componentType":20623,"description":27951,"extension":168,"meta":28270,"navigation":171,"path":28271,"requiresChild":171,"seo":28272,"stem":28273,"__hash__":28274},"components/docs/components/Blur.md",{"type":8,"value":27945,"toc":28266},[27946,27949,27952,27954,27956,27959,27961,28264],[11,27947,9260],{"id":27948},"blur",[15,27950,27951],{},"A simple Gaussian blur effect",[26676,27953],{"component":9260},[23,27955,26680],{"id":21278},[26682,27957],{":props":27958},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,27960,26688],{"id":26687},[217,27962,27963,28020,28080,28136,28194],{":tabs":1543},[43,27964,27966],{"className":45,"code":27965,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,27967,27968,27976,27983,27992,27996,28004,28012],{"__ignoreMap":48},[52,27969,27970,27972,27974],{"class":54,"line":55},[52,27971,59],{"class":58},[52,27973,63],{"class":62},[52,27975,77],{"class":58},[52,27977,27978,27980],{"class":54,"line":80},[52,27979,83],{"class":58},[52,27981,27982],{"class":62},"Blur\n",[52,27984,27985,27987,27989],{"class":54,"line":108},[52,27986,17644],{"class":66},[52,27988,70],{"class":58},[52,27990,27991],{"class":73},"\"50\"\n",[52,27993,27994],{"class":54,"line":118},[52,27995,26724],{"class":58},[52,27997,27998,28000,28002],{"class":54,"line":594},[52,27999,2213],{"class":58},[52,28001,2216],{"class":62},[52,28003,105],{"class":58},[52,28005,28006,28008,28010],{"class":54,"line":600},[52,28007,2230],{"class":58},[52,28009,9260],{"class":62},[52,28011,77],{"class":58},[52,28013,28014,28016,28018],{"class":54,"line":606},[52,28015,121],{"class":58},[52,28017,63],{"class":62},[52,28019,77],{"class":58},[43,28021,28023],{"className":360,"code":28022,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28024,28025,28033,28039,28052,28056,28064,28072],{"__ignoreMap":48},[52,28026,28027,28029,28031],{"class":54,"line":55},[52,28028,59],{"class":58},[52,28030,63],{"class":371},[52,28032,77],{"class":58},[52,28034,28035,28037],{"class":54,"line":80},[52,28036,83],{"class":58},[52,28038,27982],{"class":371},[52,28040,28041,28043,28045,28047,28050],{"class":54,"line":108},[52,28042,17755],{"class":66},[52,28044,70],{"class":231},[52,28046,723],{"class":58},[52,28048,28049],{"class":371},"50",[52,28051,729],{"class":58},[52,28053,28054],{"class":54,"line":118},[52,28055,26724],{"class":58},[52,28057,28058,28060,28062],{"class":54,"line":594},[52,28059,2213],{"class":58},[52,28061,2216],{"class":371},[52,28063,105],{"class":58},[52,28065,28066,28068,28070],{"class":54,"line":600},[52,28067,2230],{"class":58},[52,28069,9260],{"class":371},[52,28071,77],{"class":58},[52,28073,28074,28076,28078],{"class":54,"line":606},[52,28075,121],{"class":58},[52,28077,63],{"class":371},[52,28079,77],{"class":58},[43,28081,28082],{"className":2507,"code":28022,"language":2509,"meta":48,"style":48},[31,28083,28084,28092,28098,28108,28112,28120,28128],{"__ignoreMap":48},[52,28085,28086,28088,28090],{"class":54,"line":55},[52,28087,59],{"class":58},[52,28089,63],{"class":371},[52,28091,77],{"class":58},[52,28093,28094,28096],{"class":54,"line":80},[52,28095,83],{"class":58},[52,28097,27982],{"class":371},[52,28099,28100,28102,28104,28106],{"class":54,"line":108},[52,28101,17755],{"class":66},[52,28103,24620],{"class":58},[52,28105,28049],{"class":371},[52,28107,729],{"class":58},[52,28109,28110],{"class":54,"line":118},[52,28111,26724],{"class":58},[52,28113,28114,28116,28118],{"class":54,"line":594},[52,28115,2213],{"class":58},[52,28117,2216],{"class":371},[52,28119,105],{"class":58},[52,28121,28122,28124,28126],{"class":54,"line":600},[52,28123,2230],{"class":58},[52,28125,9260],{"class":371},[52,28127,77],{"class":58},[52,28129,28130,28132,28134],{"class":54,"line":606},[52,28131,121],{"class":58},[52,28133,63],{"class":371},[52,28135,77],{"class":58},[43,28137,28138],{"className":419,"code":28022,"language":420,"meta":48,"style":48},[31,28139,28140,28148,28154,28166,28170,28178,28186],{"__ignoreMap":48},[52,28141,28142,28144,28146],{"class":54,"line":55},[52,28143,59],{"class":58},[52,28145,63],{"class":371},[52,28147,77],{"class":58},[52,28149,28150,28152],{"class":54,"line":80},[52,28151,83],{"class":58},[52,28153,27982],{"class":371},[52,28155,28156,28158,28160,28162,28164],{"class":54,"line":108},[52,28157,17755],{"class":66},[52,28159,70],{"class":231},[52,28161,723],{"class":58},[52,28163,28049],{"class":371},[52,28165,729],{"class":58},[52,28167,28168],{"class":54,"line":118},[52,28169,26724],{"class":58},[52,28171,28172,28174,28176],{"class":54,"line":594},[52,28173,2213],{"class":58},[52,28175,2216],{"class":371},[52,28177,105],{"class":58},[52,28179,28180,28182,28184],{"class":54,"line":600},[52,28181,2230],{"class":58},[52,28183,9260],{"class":371},[52,28185,77],{"class":58},[52,28187,28188,28190,28192],{"class":54,"line":606},[52,28189,121],{"class":58},[52,28191,63],{"class":371},[52,28193,77],{"class":58},[43,28195,28197],{"className":222,"code":28196,"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,28198,28199,28209,28213,28227,28231,28244,28252,28256,28260],{"__ignoreMap":48},[52,28200,28201,28203,28205,28207],{"class":54,"line":55},[52,28202,232],{"class":231},[52,28204,9005],{"class":58},[52,28206,238],{"class":231},[52,28208,9010],{"class":73},[52,28210,28211],{"class":54,"line":80},[52,28212,597],{"emptyLinePlaceholder":171},[52,28214,28215,28217,28219,28221,28223,28225],{"class":54,"line":108},[52,28216,1721],{"class":231},[52,28218,1724],{"class":371},[52,28220,1727],{"class":231},[52,28222,1730],{"class":231},[52,28224,1733],{"class":66},[52,28226,1736],{"class":58},[52,28228,28229],{"class":54,"line":118},[52,28230,1751],{"class":58},[52,28232,28233,28235,28238,28240,28242],{"class":54,"line":594},[52,28234,1756],{"class":58},[52,28236,28237],{"class":73},"'Blur'",[52,28239,26969],{"class":58},[52,28241,28049],{"class":371},[52,28243,5033],{"class":58},[52,28245,28246,28248,28250],{"class":54,"line":600},[52,28247,4501],{"class":58},[52,28249,2869],{"class":73},[52,28251,2129],{"class":58},[52,28253,28254],{"class":54,"line":606},[52,28255,4518],{"class":58},[52,28257,28258],{"class":54,"line":653},[52,28259,1773],{"class":58},[52,28261,28262],{"class":54,"line":662},[52,28263,1778],{"class":58},[156,28265,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28267},[28268,28269],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/blur",{"title":9260,"description":27951},"docs/components/Blur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":28276,"title":28277,"body":28278,"category":28546,"componentType":20623,"description":28285,"extension":168,"meta":28547,"navigation":171,"path":28548,"requiresChild":171,"seo":28549,"stem":28550,"__hash__":28551},"components/docs/components/BrightnessContrast.md","BrightnessContrast",{"type":8,"value":28279,"toc":28542},[28280,28283,28286,28288,28290,28293,28295,28540],[11,28281,28277],{"id":28282},"brightnesscontrast",[15,28284,28285],{},"Adjust brightness and contrast of the image",[26676,28287],{"component":28277},[23,28289,26680],{"id":21278},[26682,28291],{":props":28292},"[{\"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,28294,26688],{"id":26687},[217,28296,28297,28342,28386,28430,28474],{":tabs":1543},[43,28298,28300],{"className":45,"code":28299,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle />\n \u003C/BrightnessContrast>\n\u003C/Shader>\n",[31,28301,28302,28310,28318,28326,28334],{"__ignoreMap":48},[52,28303,28304,28306,28308],{"class":54,"line":55},[52,28305,59],{"class":58},[52,28307,63],{"class":62},[52,28309,77],{"class":58},[52,28311,28312,28314,28316],{"class":54,"line":80},[52,28313,83],{"class":58},[52,28315,28277],{"class":62},[52,28317,77],{"class":58},[52,28319,28320,28322,28324],{"class":54,"line":108},[52,28321,2213],{"class":58},[52,28323,2216],{"class":62},[52,28325,105],{"class":58},[52,28327,28328,28330,28332],{"class":54,"line":118},[52,28329,2230],{"class":58},[52,28331,28277],{"class":62},[52,28333,77],{"class":58},[52,28335,28336,28338,28340],{"class":54,"line":594},[52,28337,121],{"class":58},[52,28339,63],{"class":62},[52,28341,77],{"class":58},[43,28343,28344],{"className":360,"code":28299,"language":362,"meta":48,"style":48},[31,28345,28346,28354,28362,28370,28378],{"__ignoreMap":48},[52,28347,28348,28350,28352],{"class":54,"line":55},[52,28349,59],{"class":58},[52,28351,63],{"class":371},[52,28353,77],{"class":58},[52,28355,28356,28358,28360],{"class":54,"line":80},[52,28357,83],{"class":58},[52,28359,28277],{"class":371},[52,28361,77],{"class":58},[52,28363,28364,28366,28368],{"class":54,"line":108},[52,28365,2213],{"class":58},[52,28367,2216],{"class":371},[52,28369,105],{"class":58},[52,28371,28372,28374,28376],{"class":54,"line":118},[52,28373,2230],{"class":58},[52,28375,28277],{"class":371},[52,28377,77],{"class":58},[52,28379,28380,28382,28384],{"class":54,"line":594},[52,28381,121],{"class":58},[52,28383,63],{"class":371},[52,28385,77],{"class":58},[43,28387,28388],{"className":2507,"code":28299,"language":2509,"meta":48,"style":48},[31,28389,28390,28398,28406,28414,28422],{"__ignoreMap":48},[52,28391,28392,28394,28396],{"class":54,"line":55},[52,28393,59],{"class":58},[52,28395,63],{"class":371},[52,28397,77],{"class":58},[52,28399,28400,28402,28404],{"class":54,"line":80},[52,28401,83],{"class":58},[52,28403,28277],{"class":371},[52,28405,77],{"class":58},[52,28407,28408,28410,28412],{"class":54,"line":108},[52,28409,2213],{"class":58},[52,28411,2216],{"class":371},[52,28413,105],{"class":58},[52,28415,28416,28418,28420],{"class":54,"line":118},[52,28417,2230],{"class":58},[52,28419,28277],{"class":371},[52,28421,77],{"class":58},[52,28423,28424,28426,28428],{"class":54,"line":594},[52,28425,121],{"class":58},[52,28427,63],{"class":371},[52,28429,77],{"class":58},[43,28431,28432],{"className":419,"code":28299,"language":420,"meta":48,"style":48},[31,28433,28434,28442,28450,28458,28466],{"__ignoreMap":48},[52,28435,28436,28438,28440],{"class":54,"line":55},[52,28437,59],{"class":58},[52,28439,63],{"class":371},[52,28441,77],{"class":58},[52,28443,28444,28446,28448],{"class":54,"line":80},[52,28445,83],{"class":58},[52,28447,28277],{"class":371},[52,28449,77],{"class":58},[52,28451,28452,28454,28456],{"class":54,"line":108},[52,28453,2213],{"class":58},[52,28455,2216],{"class":371},[52,28457,105],{"class":58},[52,28459,28460,28462,28464],{"class":54,"line":118},[52,28461,2230],{"class":58},[52,28463,28277],{"class":371},[52,28465,77],{"class":58},[52,28467,28468,28470,28472],{"class":54,"line":594},[52,28469,121],{"class":58},[52,28471,63],{"class":371},[52,28473,77],{"class":58},[43,28475,28477],{"className":222,"code":28476,"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,28478,28479,28489,28493,28507,28511,28520,28528,28532,28536],{"__ignoreMap":48},[52,28480,28481,28483,28485,28487],{"class":54,"line":55},[52,28482,232],{"class":231},[52,28484,9005],{"class":58},[52,28486,238],{"class":231},[52,28488,9010],{"class":73},[52,28490,28491],{"class":54,"line":80},[52,28492,597],{"emptyLinePlaceholder":171},[52,28494,28495,28497,28499,28501,28503,28505],{"class":54,"line":108},[52,28496,1721],{"class":231},[52,28498,1724],{"class":371},[52,28500,1727],{"class":231},[52,28502,1730],{"class":231},[52,28504,1733],{"class":66},[52,28506,1736],{"class":58},[52,28508,28509],{"class":54,"line":118},[52,28510,1751],{"class":58},[52,28512,28513,28515,28518],{"class":54,"line":594},[52,28514,1756],{"class":58},[52,28516,28517],{"class":73},"'BrightnessContrast'",[52,28519,4496],{"class":58},[52,28521,28522,28524,28526],{"class":54,"line":600},[52,28523,4501],{"class":58},[52,28525,2869],{"class":73},[52,28527,2129],{"class":58},[52,28529,28530],{"class":54,"line":606},[52,28531,4518],{"class":58},[52,28533,28534],{"class":54,"line":653},[52,28535,1773],{"class":58},[52,28537,28538],{"class":54,"line":662},[52,28539,1778],{"class":58},[156,28541,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":28543},[28544,28545],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Adjustments",{},"/docs/components/brightnesscontrast",{"title":28277,"description":28285},"docs/components/BrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":28553,"title":28554,"body":28555,"category":28880,"componentType":20623,"description":28562,"extension":168,"meta":28881,"navigation":171,"path":28882,"requiresChild":171,"seo":28883,"stem":28884,"__hash__":28885},"components/docs/components/Bulge.md","Bulge",{"type":8,"value":28556,"toc":28876},[28557,28560,28563,28565,28567,28570,28572,28874],[11,28558,28554],{"id":28559},"bulge",[15,28561,28562],{},"Magnify or pinch content around a center point",[26676,28564],{"component":28554},[23,28566,26680],{"id":21278},[26682,28568],{":props":28569},"[{\"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,28571,26688],{"id":26687},[217,28573,28574,28631,28690,28746,28804],{":tabs":1543},[43,28575,28577],{"className":45,"code":28576,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28578,28579,28587,28594,28603,28607,28615,28623],{"__ignoreMap":48},[52,28580,28581,28583,28585],{"class":54,"line":55},[52,28582,59],{"class":58},[52,28584,63],{"class":62},[52,28586,77],{"class":58},[52,28588,28589,28591],{"class":54,"line":80},[52,28590,83],{"class":58},[52,28592,28593],{"class":62},"Bulge\n",[52,28595,28596,28598,28600],{"class":54,"line":108},[52,28597,14675],{"class":66},[52,28599,70],{"class":58},[52,28601,28602],{"class":73},"\"1\"\n",[52,28604,28605],{"class":54,"line":118},[52,28606,26724],{"class":58},[52,28608,28609,28611,28613],{"class":54,"line":594},[52,28610,2213],{"class":58},[52,28612,2216],{"class":62},[52,28614,105],{"class":58},[52,28616,28617,28619,28621],{"class":54,"line":600},[52,28618,2230],{"class":58},[52,28620,28554],{"class":62},[52,28622,77],{"class":58},[52,28624,28625,28627,28629],{"class":54,"line":606},[52,28626,121],{"class":58},[52,28628,63],{"class":62},[52,28630,77],{"class":58},[43,28632,28634],{"className":360,"code":28633,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28635,28636,28644,28650,28662,28666,28674,28682],{"__ignoreMap":48},[52,28637,28638,28640,28642],{"class":54,"line":55},[52,28639,59],{"class":58},[52,28641,63],{"class":371},[52,28643,77],{"class":58},[52,28645,28646,28648],{"class":54,"line":80},[52,28647,83],{"class":58},[52,28649,28593],{"class":371},[52,28651,28652,28654,28656,28658,28660],{"class":54,"line":108},[52,28653,7135],{"class":66},[52,28655,70],{"class":231},[52,28657,723],{"class":58},[52,28659,6165],{"class":371},[52,28661,729],{"class":58},[52,28663,28664],{"class":54,"line":118},[52,28665,26724],{"class":58},[52,28667,28668,28670,28672],{"class":54,"line":594},[52,28669,2213],{"class":58},[52,28671,2216],{"class":371},[52,28673,105],{"class":58},[52,28675,28676,28678,28680],{"class":54,"line":600},[52,28677,2230],{"class":58},[52,28679,28554],{"class":371},[52,28681,77],{"class":58},[52,28683,28684,28686,28688],{"class":54,"line":606},[52,28685,121],{"class":58},[52,28687,63],{"class":371},[52,28689,77],{"class":58},[43,28691,28692],{"className":2507,"code":28633,"language":2509,"meta":48,"style":48},[31,28693,28694,28702,28708,28718,28722,28730,28738],{"__ignoreMap":48},[52,28695,28696,28698,28700],{"class":54,"line":55},[52,28697,59],{"class":58},[52,28699,63],{"class":371},[52,28701,77],{"class":58},[52,28703,28704,28706],{"class":54,"line":80},[52,28705,83],{"class":58},[52,28707,28593],{"class":371},[52,28709,28710,28712,28714,28716],{"class":54,"line":108},[52,28711,7135],{"class":66},[52,28713,24620],{"class":58},[52,28715,6165],{"class":371},[52,28717,729],{"class":58},[52,28719,28720],{"class":54,"line":118},[52,28721,26724],{"class":58},[52,28723,28724,28726,28728],{"class":54,"line":594},[52,28725,2213],{"class":58},[52,28727,2216],{"class":371},[52,28729,105],{"class":58},[52,28731,28732,28734,28736],{"class":54,"line":600},[52,28733,2230],{"class":58},[52,28735,28554],{"class":371},[52,28737,77],{"class":58},[52,28739,28740,28742,28744],{"class":54,"line":606},[52,28741,121],{"class":58},[52,28743,63],{"class":371},[52,28745,77],{"class":58},[43,28747,28748],{"className":419,"code":28633,"language":420,"meta":48,"style":48},[31,28749,28750,28758,28764,28776,28780,28788,28796],{"__ignoreMap":48},[52,28751,28752,28754,28756],{"class":54,"line":55},[52,28753,59],{"class":58},[52,28755,63],{"class":371},[52,28757,77],{"class":58},[52,28759,28760,28762],{"class":54,"line":80},[52,28761,83],{"class":58},[52,28763,28593],{"class":371},[52,28765,28766,28768,28770,28772,28774],{"class":54,"line":108},[52,28767,7135],{"class":66},[52,28769,70],{"class":231},[52,28771,723],{"class":58},[52,28773,6165],{"class":371},[52,28775,729],{"class":58},[52,28777,28778],{"class":54,"line":118},[52,28779,26724],{"class":58},[52,28781,28782,28784,28786],{"class":54,"line":594},[52,28783,2213],{"class":58},[52,28785,2216],{"class":371},[52,28787,105],{"class":58},[52,28789,28790,28792,28794],{"class":54,"line":600},[52,28791,2230],{"class":58},[52,28793,28554],{"class":371},[52,28795,77],{"class":58},[52,28797,28798,28800,28802],{"class":54,"line":606},[52,28799,121],{"class":58},[52,28801,63],{"class":371},[52,28803,77],{"class":58},[43,28805,28807],{"className":222,"code":28806,"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,28808,28809,28819,28823,28837,28841,28854,28862,28866,28870],{"__ignoreMap":48},[52,28810,28811,28813,28815,28817],{"class":54,"line":55},[52,28812,232],{"class":231},[52,28814,9005],{"class":58},[52,28816,238],{"class":231},[52,28818,9010],{"class":73},[52,28820,28821],{"class":54,"line":80},[52,28822,597],{"emptyLinePlaceholder":171},[52,28824,28825,28827,28829,28831,28833,28835],{"class":54,"line":108},[52,28826,1721],{"class":231},[52,28828,1724],{"class":371},[52,28830,1727],{"class":231},[52,28832,1730],{"class":231},[52,28834,1733],{"class":66},[52,28836,1736],{"class":58},[52,28838,28839],{"class":54,"line":118},[52,28840,1751],{"class":58},[52,28842,28843,28845,28848,28850,28852],{"class":54,"line":594},[52,28844,1756],{"class":58},[52,28846,28847],{"class":73},"'Bulge'",[52,28849,5028],{"class":58},[52,28851,6165],{"class":371},[52,28853,5033],{"class":58},[52,28855,28856,28858,28860],{"class":54,"line":600},[52,28857,4501],{"class":58},[52,28859,2869],{"class":73},[52,28861,2129],{"class":58},[52,28863,28864],{"class":54,"line":606},[52,28865,4518],{"class":58},[52,28867,28868],{"class":54,"line":653},[52,28869,1773],{"class":58},[52,28871,28872],{"class":54,"line":662},[52,28873,1778],{"class":58},[156,28875,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28877},[28878,28879],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Distortions",{},"/docs/components/bulge",{"title":28554,"description":28562},"docs/components/Bulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":28887,"title":28888,"body":28889,"category":27278,"componentType":20623,"description":28896,"extension":168,"meta":29157,"navigation":171,"path":29158,"requiresChild":171,"seo":29159,"stem":29160,"__hash__":29161},"components/docs/components/CRTScreen.md","CRTScreen",{"type":8,"value":28890,"toc":29153},[28891,28894,28897,28899,28901,28904,28906,29151],[11,28892,28888],{"id":28893},"crtscreen",[15,28895,28896],{},"Retro CRT monitor simulation with scanlines",[26676,28898],{"component":28888},[23,28900,26680],{"id":21278},[26682,28902],{":props":28903},"[{\"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,28905,26688],{"id":26687},[217,28907,28908,28953,28997,29041,29085],{":tabs":1543},[43,28909,28911],{"className":45,"code":28910,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle />\n \u003C/CRTScreen>\n\u003C/Shader>\n",[31,28912,28913,28921,28929,28937,28945],{"__ignoreMap":48},[52,28914,28915,28917,28919],{"class":54,"line":55},[52,28916,59],{"class":58},[52,28918,63],{"class":62},[52,28920,77],{"class":58},[52,28922,28923,28925,28927],{"class":54,"line":80},[52,28924,83],{"class":58},[52,28926,28888],{"class":62},[52,28928,77],{"class":58},[52,28930,28931,28933,28935],{"class":54,"line":108},[52,28932,2213],{"class":58},[52,28934,2216],{"class":62},[52,28936,105],{"class":58},[52,28938,28939,28941,28943],{"class":54,"line":118},[52,28940,2230],{"class":58},[52,28942,28888],{"class":62},[52,28944,77],{"class":58},[52,28946,28947,28949,28951],{"class":54,"line":594},[52,28948,121],{"class":58},[52,28950,63],{"class":62},[52,28952,77],{"class":58},[43,28954,28955],{"className":360,"code":28910,"language":362,"meta":48,"style":48},[31,28956,28957,28965,28973,28981,28989],{"__ignoreMap":48},[52,28958,28959,28961,28963],{"class":54,"line":55},[52,28960,59],{"class":58},[52,28962,63],{"class":371},[52,28964,77],{"class":58},[52,28966,28967,28969,28971],{"class":54,"line":80},[52,28968,83],{"class":58},[52,28970,28888],{"class":371},[52,28972,77],{"class":58},[52,28974,28975,28977,28979],{"class":54,"line":108},[52,28976,2213],{"class":58},[52,28978,2216],{"class":371},[52,28980,105],{"class":58},[52,28982,28983,28985,28987],{"class":54,"line":118},[52,28984,2230],{"class":58},[52,28986,28888],{"class":371},[52,28988,77],{"class":58},[52,28990,28991,28993,28995],{"class":54,"line":594},[52,28992,121],{"class":58},[52,28994,63],{"class":371},[52,28996,77],{"class":58},[43,28998,28999],{"className":2507,"code":28910,"language":2509,"meta":48,"style":48},[31,29000,29001,29009,29017,29025,29033],{"__ignoreMap":48},[52,29002,29003,29005,29007],{"class":54,"line":55},[52,29004,59],{"class":58},[52,29006,63],{"class":371},[52,29008,77],{"class":58},[52,29010,29011,29013,29015],{"class":54,"line":80},[52,29012,83],{"class":58},[52,29014,28888],{"class":371},[52,29016,77],{"class":58},[52,29018,29019,29021,29023],{"class":54,"line":108},[52,29020,2213],{"class":58},[52,29022,2216],{"class":371},[52,29024,105],{"class":58},[52,29026,29027,29029,29031],{"class":54,"line":118},[52,29028,2230],{"class":58},[52,29030,28888],{"class":371},[52,29032,77],{"class":58},[52,29034,29035,29037,29039],{"class":54,"line":594},[52,29036,121],{"class":58},[52,29038,63],{"class":371},[52,29040,77],{"class":58},[43,29042,29043],{"className":419,"code":28910,"language":420,"meta":48,"style":48},[31,29044,29045,29053,29061,29069,29077],{"__ignoreMap":48},[52,29046,29047,29049,29051],{"class":54,"line":55},[52,29048,59],{"class":58},[52,29050,63],{"class":371},[52,29052,77],{"class":58},[52,29054,29055,29057,29059],{"class":54,"line":80},[52,29056,83],{"class":58},[52,29058,28888],{"class":371},[52,29060,77],{"class":58},[52,29062,29063,29065,29067],{"class":54,"line":108},[52,29064,2213],{"class":58},[52,29066,2216],{"class":371},[52,29068,105],{"class":58},[52,29070,29071,29073,29075],{"class":54,"line":118},[52,29072,2230],{"class":58},[52,29074,28888],{"class":371},[52,29076,77],{"class":58},[52,29078,29079,29081,29083],{"class":54,"line":594},[52,29080,121],{"class":58},[52,29082,63],{"class":371},[52,29084,77],{"class":58},[43,29086,29088],{"className":222,"code":29087,"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,29089,29090,29100,29104,29118,29122,29131,29139,29143,29147],{"__ignoreMap":48},[52,29091,29092,29094,29096,29098],{"class":54,"line":55},[52,29093,232],{"class":231},[52,29095,9005],{"class":58},[52,29097,238],{"class":231},[52,29099,9010],{"class":73},[52,29101,29102],{"class":54,"line":80},[52,29103,597],{"emptyLinePlaceholder":171},[52,29105,29106,29108,29110,29112,29114,29116],{"class":54,"line":108},[52,29107,1721],{"class":231},[52,29109,1724],{"class":371},[52,29111,1727],{"class":231},[52,29113,1730],{"class":231},[52,29115,1733],{"class":66},[52,29117,1736],{"class":58},[52,29119,29120],{"class":54,"line":118},[52,29121,1751],{"class":58},[52,29123,29124,29126,29129],{"class":54,"line":594},[52,29125,1756],{"class":58},[52,29127,29128],{"class":73},"'CRTScreen'",[52,29130,4496],{"class":58},[52,29132,29133,29135,29137],{"class":54,"line":600},[52,29134,4501],{"class":58},[52,29136,2869],{"class":73},[52,29138,2129],{"class":58},[52,29140,29141],{"class":54,"line":606},[52,29142,4518],{"class":58},[52,29144,29145],{"class":54,"line":653},[52,29146,1773],{"class":58},[52,29148,29149],{"class":54,"line":662},[52,29150,1778],{"class":58},[156,29152,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":29154},[29155,29156],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/crtscreen",{"title":28888,"description":28896},"docs/components/CRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":29163,"title":29164,"body":29165,"category":27000,"componentType":20623,"description":29172,"extension":168,"meta":29433,"navigation":171,"path":29434,"requiresChild":171,"seo":29435,"stem":29436,"__hash__":29437},"components/docs/components/ChannelBlur.md","ChannelBlur",{"type":8,"value":29166,"toc":29429},[29167,29170,29173,29175,29177,29180,29182,29427],[11,29168,29164],{"id":29169},"channelblur",[15,29171,29172],{},"Independent blur for red, green, and blue channels",[26676,29174],{"component":29164},[23,29176,26680],{"id":21278},[26682,29178],{":props":29179},"[{\"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,29181,26688],{"id":26687},[217,29183,29184,29229,29273,29317,29361],{":tabs":1543},[43,29185,29187],{"className":45,"code":29186,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle />\n \u003C/ChannelBlur>\n\u003C/Shader>\n",[31,29188,29189,29197,29205,29213,29221],{"__ignoreMap":48},[52,29190,29191,29193,29195],{"class":54,"line":55},[52,29192,59],{"class":58},[52,29194,63],{"class":62},[52,29196,77],{"class":58},[52,29198,29199,29201,29203],{"class":54,"line":80},[52,29200,83],{"class":58},[52,29202,29164],{"class":62},[52,29204,77],{"class":58},[52,29206,29207,29209,29211],{"class":54,"line":108},[52,29208,2213],{"class":58},[52,29210,2216],{"class":62},[52,29212,105],{"class":58},[52,29214,29215,29217,29219],{"class":54,"line":118},[52,29216,2230],{"class":58},[52,29218,29164],{"class":62},[52,29220,77],{"class":58},[52,29222,29223,29225,29227],{"class":54,"line":594},[52,29224,121],{"class":58},[52,29226,63],{"class":62},[52,29228,77],{"class":58},[43,29230,29231],{"className":360,"code":29186,"language":362,"meta":48,"style":48},[31,29232,29233,29241,29249,29257,29265],{"__ignoreMap":48},[52,29234,29235,29237,29239],{"class":54,"line":55},[52,29236,59],{"class":58},[52,29238,63],{"class":371},[52,29240,77],{"class":58},[52,29242,29243,29245,29247],{"class":54,"line":80},[52,29244,83],{"class":58},[52,29246,29164],{"class":371},[52,29248,77],{"class":58},[52,29250,29251,29253,29255],{"class":54,"line":108},[52,29252,2213],{"class":58},[52,29254,2216],{"class":371},[52,29256,105],{"class":58},[52,29258,29259,29261,29263],{"class":54,"line":118},[52,29260,2230],{"class":58},[52,29262,29164],{"class":371},[52,29264,77],{"class":58},[52,29266,29267,29269,29271],{"class":54,"line":594},[52,29268,121],{"class":58},[52,29270,63],{"class":371},[52,29272,77],{"class":58},[43,29274,29275],{"className":2507,"code":29186,"language":2509,"meta":48,"style":48},[31,29276,29277,29285,29293,29301,29309],{"__ignoreMap":48},[52,29278,29279,29281,29283],{"class":54,"line":55},[52,29280,59],{"class":58},[52,29282,63],{"class":371},[52,29284,77],{"class":58},[52,29286,29287,29289,29291],{"class":54,"line":80},[52,29288,83],{"class":58},[52,29290,29164],{"class":371},[52,29292,77],{"class":58},[52,29294,29295,29297,29299],{"class":54,"line":108},[52,29296,2213],{"class":58},[52,29298,2216],{"class":371},[52,29300,105],{"class":58},[52,29302,29303,29305,29307],{"class":54,"line":118},[52,29304,2230],{"class":58},[52,29306,29164],{"class":371},[52,29308,77],{"class":58},[52,29310,29311,29313,29315],{"class":54,"line":594},[52,29312,121],{"class":58},[52,29314,63],{"class":371},[52,29316,77],{"class":58},[43,29318,29319],{"className":419,"code":29186,"language":420,"meta":48,"style":48},[31,29320,29321,29329,29337,29345,29353],{"__ignoreMap":48},[52,29322,29323,29325,29327],{"class":54,"line":55},[52,29324,59],{"class":58},[52,29326,63],{"class":371},[52,29328,77],{"class":58},[52,29330,29331,29333,29335],{"class":54,"line":80},[52,29332,83],{"class":58},[52,29334,29164],{"class":371},[52,29336,77],{"class":58},[52,29338,29339,29341,29343],{"class":54,"line":108},[52,29340,2213],{"class":58},[52,29342,2216],{"class":371},[52,29344,105],{"class":58},[52,29346,29347,29349,29351],{"class":54,"line":118},[52,29348,2230],{"class":58},[52,29350,29164],{"class":371},[52,29352,77],{"class":58},[52,29354,29355,29357,29359],{"class":54,"line":594},[52,29356,121],{"class":58},[52,29358,63],{"class":371},[52,29360,77],{"class":58},[43,29362,29364],{"className":222,"code":29363,"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,29365,29366,29376,29380,29394,29398,29407,29415,29419,29423],{"__ignoreMap":48},[52,29367,29368,29370,29372,29374],{"class":54,"line":55},[52,29369,232],{"class":231},[52,29371,9005],{"class":58},[52,29373,238],{"class":231},[52,29375,9010],{"class":73},[52,29377,29378],{"class":54,"line":80},[52,29379,597],{"emptyLinePlaceholder":171},[52,29381,29382,29384,29386,29388,29390,29392],{"class":54,"line":108},[52,29383,1721],{"class":231},[52,29385,1724],{"class":371},[52,29387,1727],{"class":231},[52,29389,1730],{"class":231},[52,29391,1733],{"class":66},[52,29393,1736],{"class":58},[52,29395,29396],{"class":54,"line":118},[52,29397,1751],{"class":58},[52,29399,29400,29402,29405],{"class":54,"line":594},[52,29401,1756],{"class":58},[52,29403,29404],{"class":73},"'ChannelBlur'",[52,29406,4496],{"class":58},[52,29408,29409,29411,29413],{"class":54,"line":600},[52,29410,4501],{"class":58},[52,29412,2869],{"class":73},[52,29414,2129],{"class":58},[52,29416,29417],{"class":54,"line":606},[52,29418,4518],{"class":58},[52,29420,29421],{"class":54,"line":653},[52,29422,1773],{"class":58},[52,29424,29425],{"class":54,"line":662},[52,29426,1778],{"class":58},[156,29428,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":29430},[29431,29432],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/channelblur",{"title":29164,"description":29172},"docs/components/ChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":29439,"title":29440,"body":29441,"category":27535,"componentType":20617,"description":29448,"extension":168,"meta":29632,"navigation":171,"path":29633,"requiresChild":27538,"seo":29634,"stem":29635,"__hash__":29636},"components/docs/components/Checkerboard.md","Checkerboard",{"type":8,"value":29442,"toc":29628},[29443,29446,29449,29451,29453,29456,29458,29626],[11,29444,29440],{"id":29445},"checkerboard",[15,29447,29448],{},"Classic checkerboard pattern with two alternating colors",[26676,29450],{"component":29440},[23,29452,26680],{"id":21278},[26682,29454],{":props":29455},"[{\"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,29457,26688],{"id":26687},[217,29459,29460,29489,29517,29545,29573],{":tabs":1543},[43,29461,29463],{"className":45,"code":29462,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCheckerboard />\n\u003C/Shader>\n",[31,29464,29465,29473,29481],{"__ignoreMap":48},[52,29466,29467,29469,29471],{"class":54,"line":55},[52,29468,59],{"class":58},[52,29470,63],{"class":62},[52,29472,77],{"class":58},[52,29474,29475,29477,29479],{"class":54,"line":80},[52,29476,83],{"class":58},[52,29478,29440],{"class":62},[52,29480,105],{"class":58},[52,29482,29483,29485,29487],{"class":54,"line":108},[52,29484,121],{"class":58},[52,29486,63],{"class":62},[52,29488,77],{"class":58},[43,29490,29491],{"className":360,"code":29462,"language":362,"meta":48,"style":48},[31,29492,29493,29501,29509],{"__ignoreMap":48},[52,29494,29495,29497,29499],{"class":54,"line":55},[52,29496,59],{"class":58},[52,29498,63],{"class":371},[52,29500,77],{"class":58},[52,29502,29503,29505,29507],{"class":54,"line":80},[52,29504,83],{"class":58},[52,29506,29440],{"class":371},[52,29508,105],{"class":58},[52,29510,29511,29513,29515],{"class":54,"line":108},[52,29512,121],{"class":58},[52,29514,63],{"class":371},[52,29516,77],{"class":58},[43,29518,29519],{"className":2507,"code":29462,"language":2509,"meta":48,"style":48},[31,29520,29521,29529,29537],{"__ignoreMap":48},[52,29522,29523,29525,29527],{"class":54,"line":55},[52,29524,59],{"class":58},[52,29526,63],{"class":371},[52,29528,77],{"class":58},[52,29530,29531,29533,29535],{"class":54,"line":80},[52,29532,83],{"class":58},[52,29534,29440],{"class":371},[52,29536,105],{"class":58},[52,29538,29539,29541,29543],{"class":54,"line":108},[52,29540,121],{"class":58},[52,29542,63],{"class":371},[52,29544,77],{"class":58},[43,29546,29547],{"className":419,"code":29462,"language":420,"meta":48,"style":48},[31,29548,29549,29557,29565],{"__ignoreMap":48},[52,29550,29551,29553,29555],{"class":54,"line":55},[52,29552,59],{"class":58},[52,29554,63],{"class":371},[52,29556,77],{"class":58},[52,29558,29559,29561,29563],{"class":54,"line":80},[52,29560,83],{"class":58},[52,29562,29440],{"class":371},[52,29564,105],{"class":58},[52,29566,29567,29569,29571],{"class":54,"line":108},[52,29568,121],{"class":58},[52,29570,63],{"class":371},[52,29572,77],{"class":58},[43,29574,29576],{"className":222,"code":29575,"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,29577,29578,29588,29592,29606,29610,29618,29622],{"__ignoreMap":48},[52,29579,29580,29582,29584,29586],{"class":54,"line":55},[52,29581,232],{"class":231},[52,29583,9005],{"class":58},[52,29585,238],{"class":231},[52,29587,9010],{"class":73},[52,29589,29590],{"class":54,"line":80},[52,29591,597],{"emptyLinePlaceholder":171},[52,29593,29594,29596,29598,29600,29602,29604],{"class":54,"line":108},[52,29595,1721],{"class":231},[52,29597,1724],{"class":371},[52,29599,1727],{"class":231},[52,29601,1730],{"class":231},[52,29603,1733],{"class":66},[52,29605,1736],{"class":58},[52,29607,29608],{"class":54,"line":118},[52,29609,1751],{"class":58},[52,29611,29612,29614,29616],{"class":54,"line":594},[52,29613,1756],{"class":58},[52,29615,7649],{"class":73},[52,29617,2129],{"class":58},[52,29619,29620],{"class":54,"line":600},[52,29621,1773],{"class":58},[52,29623,29624],{"class":54,"line":606},[52,29625,1778],{"class":58},[156,29627,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":29629},[29630,29631],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/checkerboard",{"title":29440,"description":29448},"docs/components/Checkerboard","xWgOFlPxz08f5-WceoXS-EG20wY1632N5T-U9eHKWKo",{"id":29638,"title":29639,"body":29640,"category":29936,"componentType":20617,"description":29647,"extension":168,"meta":29937,"navigation":171,"path":29938,"requiresChild":27538,"seo":29939,"stem":29940,"__hash__":29941},"components/docs/components/ChromaFlow.md","ChromaFlow",{"type":8,"value":29641,"toc":29932},[29642,29645,29648,29650,29652,29655,29657,29930],[11,29643,29639],{"id":29644},"chromaflow",[15,29646,29647],{},"Interactive liquid flow effect that follows your cursor",[26676,29649],{"component":29639},[23,29651,26680],{"id":21278},[26682,29653],{":props":29654},"[{\"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,29656,26688],{"id":26687},[217,29658,29659,29708,29764,29814,29868],{":tabs":1543},[43,29660,29662],{"className":45,"code":29661,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n />\n\u003C/Shader>\n",[31,29663,29664,29672,29679,29687,29696,29700],{"__ignoreMap":48},[52,29665,29666,29668,29670],{"class":54,"line":55},[52,29667,59],{"class":58},[52,29669,63],{"class":62},[52,29671,77],{"class":58},[52,29673,29674,29676],{"class":54,"line":80},[52,29675,83],{"class":58},[52,29677,29678],{"class":62},"ChromaFlow\n",[52,29680,29681,29683,29685],{"class":54,"line":108},[52,29682,17644],{"class":66},[52,29684,70],{"class":58},[52,29686,28602],{"class":73},[52,29688,29689,29691,29693],{"class":54,"line":118},[52,29690,14675],{"class":66},[52,29692,70],{"class":58},[52,29694,29695],{"class":73},"\"3\"\n",[52,29697,29698],{"class":54,"line":594},[52,29699,1224],{"class":58},[52,29701,29702,29704,29706],{"class":54,"line":600},[52,29703,121],{"class":58},[52,29705,63],{"class":62},[52,29707,77],{"class":58},[43,29709,29711],{"className":360,"code":29710,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n />\n\u003C/Shader>\n",[31,29712,29713,29721,29727,29739,29752,29756],{"__ignoreMap":48},[52,29714,29715,29717,29719],{"class":54,"line":55},[52,29716,59],{"class":58},[52,29718,63],{"class":371},[52,29720,77],{"class":58},[52,29722,29723,29725],{"class":54,"line":80},[52,29724,83],{"class":58},[52,29726,29678],{"class":371},[52,29728,29729,29731,29733,29735,29737],{"class":54,"line":108},[52,29730,17755],{"class":66},[52,29732,70],{"class":231},[52,29734,723],{"class":58},[52,29736,6165],{"class":371},[52,29738,729],{"class":58},[52,29740,29741,29743,29745,29747,29750],{"class":54,"line":118},[52,29742,7135],{"class":66},[52,29744,70],{"class":231},[52,29746,723],{"class":58},[52,29748,29749],{"class":371},"3",[52,29751,729],{"class":58},[52,29753,29754],{"class":54,"line":594},[52,29755,1224],{"class":58},[52,29757,29758,29760,29762],{"class":54,"line":600},[52,29759,121],{"class":58},[52,29761,63],{"class":371},[52,29763,77],{"class":58},[43,29765,29766],{"className":2507,"code":29710,"language":2509,"meta":48,"style":48},[31,29767,29768,29776,29782,29792,29802,29806],{"__ignoreMap":48},[52,29769,29770,29772,29774],{"class":54,"line":55},[52,29771,59],{"class":58},[52,29773,63],{"class":371},[52,29775,77],{"class":58},[52,29777,29778,29780],{"class":54,"line":80},[52,29779,83],{"class":58},[52,29781,29678],{"class":371},[52,29783,29784,29786,29788,29790],{"class":54,"line":108},[52,29785,17755],{"class":66},[52,29787,24620],{"class":58},[52,29789,6165],{"class":371},[52,29791,729],{"class":58},[52,29793,29794,29796,29798,29800],{"class":54,"line":118},[52,29795,7135],{"class":66},[52,29797,24620],{"class":58},[52,29799,29749],{"class":371},[52,29801,729],{"class":58},[52,29803,29804],{"class":54,"line":594},[52,29805,1224],{"class":58},[52,29807,29808,29810,29812],{"class":54,"line":600},[52,29809,121],{"class":58},[52,29811,63],{"class":371},[52,29813,77],{"class":58},[43,29815,29816],{"className":419,"code":29710,"language":420,"meta":48,"style":48},[31,29817,29818,29826,29832,29844,29856,29860],{"__ignoreMap":48},[52,29819,29820,29822,29824],{"class":54,"line":55},[52,29821,59],{"class":58},[52,29823,63],{"class":371},[52,29825,77],{"class":58},[52,29827,29828,29830],{"class":54,"line":80},[52,29829,83],{"class":58},[52,29831,29678],{"class":371},[52,29833,29834,29836,29838,29840,29842],{"class":54,"line":108},[52,29835,17755],{"class":66},[52,29837,70],{"class":231},[52,29839,723],{"class":58},[52,29841,6165],{"class":371},[52,29843,729],{"class":58},[52,29845,29846,29848,29850,29852,29854],{"class":54,"line":118},[52,29847,7135],{"class":66},[52,29849,70],{"class":231},[52,29851,723],{"class":58},[52,29853,29749],{"class":371},[52,29855,729],{"class":58},[52,29857,29858],{"class":54,"line":594},[52,29859,1224],{"class":58},[52,29861,29862,29864,29866],{"class":54,"line":600},[52,29863,121],{"class":58},[52,29865,63],{"class":371},[52,29867,77],{"class":58},[43,29869,29871],{"className":222,"code":29870,"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,29872,29873,29883,29887,29901,29905,29922,29926],{"__ignoreMap":48},[52,29874,29875,29877,29879,29881],{"class":54,"line":55},[52,29876,232],{"class":231},[52,29878,9005],{"class":58},[52,29880,238],{"class":231},[52,29882,9010],{"class":73},[52,29884,29885],{"class":54,"line":80},[52,29886,597],{"emptyLinePlaceholder":171},[52,29888,29889,29891,29893,29895,29897,29899],{"class":54,"line":108},[52,29890,1721],{"class":231},[52,29892,1724],{"class":371},[52,29894,1727],{"class":231},[52,29896,1730],{"class":231},[52,29898,1733],{"class":66},[52,29900,1736],{"class":58},[52,29902,29903],{"class":54,"line":118},[52,29904,1751],{"class":58},[52,29906,29907,29909,29912,29914,29916,29918,29920],{"class":54,"line":594},[52,29908,1756],{"class":58},[52,29910,29911],{"class":73},"'ChromaFlow'",[52,29913,26969],{"class":58},[52,29915,6165],{"class":371},[52,29917,4052],{"class":58},[52,29919,29749],{"class":371},[52,29921,1768],{"class":58},[52,29923,29924],{"class":54,"line":600},[52,29925,1773],{"class":58},[52,29927,29928],{"class":54,"line":606},[52,29929,1778],{"class":58},[156,29931,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":29933},[29934,29935],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Interactive",{},"/docs/components/chromaflow",{"title":29639,"description":29647},"docs/components/ChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":29943,"title":29944,"body":29945,"category":27278,"componentType":20623,"description":29952,"extension":168,"meta":30213,"navigation":171,"path":30214,"requiresChild":171,"seo":30215,"stem":30216,"__hash__":30217},"components/docs/components/ChromaticAberration.md","ChromaticAberration",{"type":8,"value":29946,"toc":30209},[29947,29950,29953,29955,29957,29960,29962,30207],[11,29948,29944],{"id":29949},"chromaticaberration",[15,29951,29952],{},"Separate RGB channels for a prismatic distortion effect",[26676,29954],{"component":29944},[23,29956,26680],{"id":21278},[26682,29958],{":props":29959},"[{\"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,29961,26688],{"id":26687},[217,29963,29964,30009,30053,30097,30141],{":tabs":1543},[43,29965,29967],{"className":45,"code":29966,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle />\n \u003C/ChromaticAberration>\n\u003C/Shader>\n",[31,29968,29969,29977,29985,29993,30001],{"__ignoreMap":48},[52,29970,29971,29973,29975],{"class":54,"line":55},[52,29972,59],{"class":58},[52,29974,63],{"class":62},[52,29976,77],{"class":58},[52,29978,29979,29981,29983],{"class":54,"line":80},[52,29980,83],{"class":58},[52,29982,29944],{"class":62},[52,29984,77],{"class":58},[52,29986,29987,29989,29991],{"class":54,"line":108},[52,29988,2213],{"class":58},[52,29990,2216],{"class":62},[52,29992,105],{"class":58},[52,29994,29995,29997,29999],{"class":54,"line":118},[52,29996,2230],{"class":58},[52,29998,29944],{"class":62},[52,30000,77],{"class":58},[52,30002,30003,30005,30007],{"class":54,"line":594},[52,30004,121],{"class":58},[52,30006,63],{"class":62},[52,30008,77],{"class":58},[43,30010,30011],{"className":360,"code":29966,"language":362,"meta":48,"style":48},[31,30012,30013,30021,30029,30037,30045],{"__ignoreMap":48},[52,30014,30015,30017,30019],{"class":54,"line":55},[52,30016,59],{"class":58},[52,30018,63],{"class":371},[52,30020,77],{"class":58},[52,30022,30023,30025,30027],{"class":54,"line":80},[52,30024,83],{"class":58},[52,30026,29944],{"class":371},[52,30028,77],{"class":58},[52,30030,30031,30033,30035],{"class":54,"line":108},[52,30032,2213],{"class":58},[52,30034,2216],{"class":371},[52,30036,105],{"class":58},[52,30038,30039,30041,30043],{"class":54,"line":118},[52,30040,2230],{"class":58},[52,30042,29944],{"class":371},[52,30044,77],{"class":58},[52,30046,30047,30049,30051],{"class":54,"line":594},[52,30048,121],{"class":58},[52,30050,63],{"class":371},[52,30052,77],{"class":58},[43,30054,30055],{"className":2507,"code":29966,"language":2509,"meta":48,"style":48},[31,30056,30057,30065,30073,30081,30089],{"__ignoreMap":48},[52,30058,30059,30061,30063],{"class":54,"line":55},[52,30060,59],{"class":58},[52,30062,63],{"class":371},[52,30064,77],{"class":58},[52,30066,30067,30069,30071],{"class":54,"line":80},[52,30068,83],{"class":58},[52,30070,29944],{"class":371},[52,30072,77],{"class":58},[52,30074,30075,30077,30079],{"class":54,"line":108},[52,30076,2213],{"class":58},[52,30078,2216],{"class":371},[52,30080,105],{"class":58},[52,30082,30083,30085,30087],{"class":54,"line":118},[52,30084,2230],{"class":58},[52,30086,29944],{"class":371},[52,30088,77],{"class":58},[52,30090,30091,30093,30095],{"class":54,"line":594},[52,30092,121],{"class":58},[52,30094,63],{"class":371},[52,30096,77],{"class":58},[43,30098,30099],{"className":419,"code":29966,"language":420,"meta":48,"style":48},[31,30100,30101,30109,30117,30125,30133],{"__ignoreMap":48},[52,30102,30103,30105,30107],{"class":54,"line":55},[52,30104,59],{"class":58},[52,30106,63],{"class":371},[52,30108,77],{"class":58},[52,30110,30111,30113,30115],{"class":54,"line":80},[52,30112,83],{"class":58},[52,30114,29944],{"class":371},[52,30116,77],{"class":58},[52,30118,30119,30121,30123],{"class":54,"line":108},[52,30120,2213],{"class":58},[52,30122,2216],{"class":371},[52,30124,105],{"class":58},[52,30126,30127,30129,30131],{"class":54,"line":118},[52,30128,2230],{"class":58},[52,30130,29944],{"class":371},[52,30132,77],{"class":58},[52,30134,30135,30137,30139],{"class":54,"line":594},[52,30136,121],{"class":58},[52,30138,63],{"class":371},[52,30140,77],{"class":58},[43,30142,30144],{"className":222,"code":30143,"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,30145,30146,30156,30160,30174,30178,30187,30195,30199,30203],{"__ignoreMap":48},[52,30147,30148,30150,30152,30154],{"class":54,"line":55},[52,30149,232],{"class":231},[52,30151,9005],{"class":58},[52,30153,238],{"class":231},[52,30155,9010],{"class":73},[52,30157,30158],{"class":54,"line":80},[52,30159,597],{"emptyLinePlaceholder":171},[52,30161,30162,30164,30166,30168,30170,30172],{"class":54,"line":108},[52,30163,1721],{"class":231},[52,30165,1724],{"class":371},[52,30167,1727],{"class":231},[52,30169,1730],{"class":231},[52,30171,1733],{"class":66},[52,30173,1736],{"class":58},[52,30175,30176],{"class":54,"line":118},[52,30177,1751],{"class":58},[52,30179,30180,30182,30185],{"class":54,"line":594},[52,30181,1756],{"class":58},[52,30183,30184],{"class":73},"'ChromaticAberration'",[52,30186,4496],{"class":58},[52,30188,30189,30191,30193],{"class":54,"line":600},[52,30190,4501],{"class":58},[52,30192,2869],{"class":73},[52,30194,2129],{"class":58},[52,30196,30197],{"class":54,"line":606},[52,30198,4518],{"class":58},[52,30200,30201],{"class":54,"line":653},[52,30202,1773],{"class":58},[52,30204,30205],{"class":54,"line":662},[52,30206,1778],{"class":58},[156,30208,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":30210},[30211,30212],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/chromaticaberration",{"title":29944,"description":29952},"docs/components/ChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":30219,"title":2216,"body":30220,"category":30502,"componentType":20617,"description":30227,"extension":168,"meta":30503,"navigation":171,"path":30504,"requiresChild":27538,"seo":30505,"stem":30506,"__hash__":30507},"components/docs/components/Circle.md",{"type":8,"value":30221,"toc":30498},[30222,30225,30228,30230,30232,30235,30237,30496],[11,30223,2216],{"id":30224},"circle",[15,30226,30227],{},"Generate a circle with adjustable size and softness",[26676,30229],{"component":2216},[23,30231,26680],{"id":21278},[26682,30233],{":props":30234},"[{\"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,30236,26688],{"id":26687},[217,30238,30239,30286,30337,30385,30435],{":tabs":1543},[43,30240,30242],{"className":45,"code":30241,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,30243,30244,30252,30258,30266,30274,30278],{"__ignoreMap":48},[52,30245,30246,30248,30250],{"class":54,"line":55},[52,30247,59],{"class":58},[52,30249,63],{"class":62},[52,30251,77],{"class":58},[52,30253,30254,30256],{"class":54,"line":80},[52,30255,83],{"class":58},[52,30257,7120],{"class":62},[52,30259,30260,30262,30264],{"class":54,"line":108},[52,30261,7125],{"class":66},[52,30263,70],{"class":58},[52,30265,7081],{"class":73},[52,30267,30268,30270,30272],{"class":54,"line":118},[52,30269,14675],{"class":66},[52,30271,70],{"class":58},[52,30273,28602],{"class":73},[52,30275,30276],{"class":54,"line":594},[52,30277,1224],{"class":58},[52,30279,30280,30282,30284],{"class":54,"line":600},[52,30281,121],{"class":58},[52,30283,63],{"class":62},[52,30285,77],{"class":58},[43,30287,30289],{"className":360,"code":30288,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n />\n\u003C/Shader>\n",[31,30290,30291,30299,30305,30313,30325,30329],{"__ignoreMap":48},[52,30292,30293,30295,30297],{"class":54,"line":55},[52,30294,59],{"class":58},[52,30296,63],{"class":371},[52,30298,77],{"class":58},[52,30300,30301,30303],{"class":54,"line":80},[52,30302,83],{"class":58},[52,30304,7120],{"class":371},[52,30306,30307,30309,30311],{"class":54,"line":108},[52,30308,7125],{"class":66},[52,30310,70],{"class":231},[52,30312,7081],{"class":73},[52,30314,30315,30317,30319,30321,30323],{"class":54,"line":118},[52,30316,7135],{"class":66},[52,30318,70],{"class":231},[52,30320,723],{"class":58},[52,30322,6165],{"class":371},[52,30324,729],{"class":58},[52,30326,30327],{"class":54,"line":594},[52,30328,1224],{"class":58},[52,30330,30331,30333,30335],{"class":54,"line":600},[52,30332,121],{"class":58},[52,30334,63],{"class":371},[52,30336,77],{"class":58},[43,30338,30339],{"className":2507,"code":30288,"language":2509,"meta":48,"style":48},[31,30340,30341,30349,30355,30363,30373,30377],{"__ignoreMap":48},[52,30342,30343,30345,30347],{"class":54,"line":55},[52,30344,59],{"class":58},[52,30346,63],{"class":371},[52,30348,77],{"class":58},[52,30350,30351,30353],{"class":54,"line":80},[52,30352,83],{"class":58},[52,30354,7120],{"class":371},[52,30356,30357,30359,30361],{"class":54,"line":108},[52,30358,7125],{"class":66},[52,30360,70],{"class":58},[52,30362,7081],{"class":73},[52,30364,30365,30367,30369,30371],{"class":54,"line":118},[52,30366,7135],{"class":66},[52,30368,24620],{"class":58},[52,30370,6165],{"class":371},[52,30372,729],{"class":58},[52,30374,30375],{"class":54,"line":594},[52,30376,1224],{"class":58},[52,30378,30379,30381,30383],{"class":54,"line":600},[52,30380,121],{"class":58},[52,30382,63],{"class":371},[52,30384,77],{"class":58},[43,30386,30387],{"className":419,"code":30288,"language":420,"meta":48,"style":48},[31,30388,30389,30397,30403,30411,30423,30427],{"__ignoreMap":48},[52,30390,30391,30393,30395],{"class":54,"line":55},[52,30392,59],{"class":58},[52,30394,63],{"class":371},[52,30396,77],{"class":58},[52,30398,30399,30401],{"class":54,"line":80},[52,30400,83],{"class":58},[52,30402,7120],{"class":371},[52,30404,30405,30407,30409],{"class":54,"line":108},[52,30406,7125],{"class":66},[52,30408,70],{"class":231},[52,30410,7081],{"class":73},[52,30412,30413,30415,30417,30419,30421],{"class":54,"line":118},[52,30414,7135],{"class":66},[52,30416,70],{"class":231},[52,30418,723],{"class":58},[52,30420,6165],{"class":371},[52,30422,729],{"class":58},[52,30424,30425],{"class":54,"line":594},[52,30426,1224],{"class":58},[52,30428,30429,30431,30433],{"class":54,"line":600},[52,30430,121],{"class":58},[52,30432,63],{"class":371},[52,30434,77],{"class":58},[43,30436,30438],{"className":222,"code":30437,"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,30439,30440,30450,30454,30468,30472,30488,30492],{"__ignoreMap":48},[52,30441,30442,30444,30446,30448],{"class":54,"line":55},[52,30443,232],{"class":231},[52,30445,9005],{"class":58},[52,30447,238],{"class":231},[52,30449,9010],{"class":73},[52,30451,30452],{"class":54,"line":80},[52,30453,597],{"emptyLinePlaceholder":171},[52,30455,30456,30458,30460,30462,30464,30466],{"class":54,"line":108},[52,30457,1721],{"class":231},[52,30459,1724],{"class":371},[52,30461,1727],{"class":231},[52,30463,1730],{"class":231},[52,30465,1733],{"class":66},[52,30467,1736],{"class":58},[52,30469,30470],{"class":54,"line":118},[52,30471,1751],{"class":58},[52,30473,30474,30476,30478,30480,30482,30484,30486],{"class":54,"line":594},[52,30475,1756],{"class":58},[52,30477,2869],{"class":73},[52,30479,1762],{"class":58},[52,30481,7660],{"class":73},[52,30483,4052],{"class":58},[52,30485,6165],{"class":371},[52,30487,1768],{"class":58},[52,30489,30490],{"class":54,"line":600},[52,30491,1773],{"class":58},[52,30493,30494],{"class":54,"line":606},[52,30495,1778],{"class":58},[156,30497,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30499},[30500,30501],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Shapes",{},"/docs/components/circle",{"title":2216,"description":30227},"docs/components/Circle","6IkEAtPpkShaYl4sjatYzEXoZbaTyrMxJZqPHqQVqW4",{"id":30509,"title":30510,"body":30511,"category":28880,"componentType":20623,"description":30518,"extension":168,"meta":30835,"navigation":171,"path":30836,"requiresChild":171,"seo":30837,"stem":30838,"__hash__":30839},"components/docs/components/ConcentricSpin.md","ConcentricSpin",{"type":8,"value":30512,"toc":30831},[30513,30516,30519,30521,30523,30526,30528,30829],[11,30514,30510],{"id":30515},"concentricspin",[15,30517,30518],{},"Concentric rings that each rotate the underlying image by different amounts",[26676,30520],{"component":30510},[23,30522,26680],{"id":21278},[26682,30524],{":props":30525},"[{\"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,30527,26688],{"id":26687},[217,30529,30530,30586,30645,30701,30759],{":tabs":1543},[43,30531,30533],{"className":45,"code":30532,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,30534,30535,30543,30550,30558,30562,30570,30578],{"__ignoreMap":48},[52,30536,30537,30539,30541],{"class":54,"line":55},[52,30538,59],{"class":58},[52,30540,63],{"class":62},[52,30542,77],{"class":58},[52,30544,30545,30547],{"class":54,"line":80},[52,30546,83],{"class":58},[52,30548,30549],{"class":62},"ConcentricSpin\n",[52,30551,30552,30554,30556],{"class":54,"line":108},[52,30553,17644],{"class":66},[52,30555,70],{"class":58},[52,30557,26719],{"class":73},[52,30559,30560],{"class":54,"line":118},[52,30561,26724],{"class":58},[52,30563,30564,30566,30568],{"class":54,"line":594},[52,30565,2213],{"class":58},[52,30567,2216],{"class":62},[52,30569,105],{"class":58},[52,30571,30572,30574,30576],{"class":54,"line":600},[52,30573,2230],{"class":58},[52,30575,30510],{"class":62},[52,30577,77],{"class":58},[52,30579,30580,30582,30584],{"class":54,"line":606},[52,30581,121],{"class":58},[52,30583,63],{"class":62},[52,30585,77],{"class":58},[43,30587,30589],{"className":360,"code":30588,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,30590,30591,30599,30605,30617,30621,30629,30637],{"__ignoreMap":48},[52,30592,30593,30595,30597],{"class":54,"line":55},[52,30594,59],{"class":58},[52,30596,63],{"class":371},[52,30598,77],{"class":58},[52,30600,30601,30603],{"class":54,"line":80},[52,30602,83],{"class":58},[52,30604,30549],{"class":371},[52,30606,30607,30609,30611,30613,30615],{"class":54,"line":108},[52,30608,17755],{"class":66},[52,30610,70],{"class":231},[52,30612,723],{"class":58},[52,30614,26778],{"class":371},[52,30616,729],{"class":58},[52,30618,30619],{"class":54,"line":118},[52,30620,26724],{"class":58},[52,30622,30623,30625,30627],{"class":54,"line":594},[52,30624,2213],{"class":58},[52,30626,2216],{"class":371},[52,30628,105],{"class":58},[52,30630,30631,30633,30635],{"class":54,"line":600},[52,30632,2230],{"class":58},[52,30634,30510],{"class":371},[52,30636,77],{"class":58},[52,30638,30639,30641,30643],{"class":54,"line":606},[52,30640,121],{"class":58},[52,30642,63],{"class":371},[52,30644,77],{"class":58},[43,30646,30647],{"className":2507,"code":30588,"language":2509,"meta":48,"style":48},[31,30648,30649,30657,30663,30673,30677,30685,30693],{"__ignoreMap":48},[52,30650,30651,30653,30655],{"class":54,"line":55},[52,30652,59],{"class":58},[52,30654,63],{"class":371},[52,30656,77],{"class":58},[52,30658,30659,30661],{"class":54,"line":80},[52,30660,83],{"class":58},[52,30662,30549],{"class":371},[52,30664,30665,30667,30669,30671],{"class":54,"line":108},[52,30666,17755],{"class":66},[52,30668,24620],{"class":58},[52,30670,26778],{"class":371},[52,30672,729],{"class":58},[52,30674,30675],{"class":54,"line":118},[52,30676,26724],{"class":58},[52,30678,30679,30681,30683],{"class":54,"line":594},[52,30680,2213],{"class":58},[52,30682,2216],{"class":371},[52,30684,105],{"class":58},[52,30686,30687,30689,30691],{"class":54,"line":600},[52,30688,2230],{"class":58},[52,30690,30510],{"class":371},[52,30692,77],{"class":58},[52,30694,30695,30697,30699],{"class":54,"line":606},[52,30696,121],{"class":58},[52,30698,63],{"class":371},[52,30700,77],{"class":58},[43,30702,30703],{"className":419,"code":30588,"language":420,"meta":48,"style":48},[31,30704,30705,30713,30719,30731,30735,30743,30751],{"__ignoreMap":48},[52,30706,30707,30709,30711],{"class":54,"line":55},[52,30708,59],{"class":58},[52,30710,63],{"class":371},[52,30712,77],{"class":58},[52,30714,30715,30717],{"class":54,"line":80},[52,30716,83],{"class":58},[52,30718,30549],{"class":371},[52,30720,30721,30723,30725,30727,30729],{"class":54,"line":108},[52,30722,17755],{"class":66},[52,30724,70],{"class":231},[52,30726,723],{"class":58},[52,30728,26778],{"class":371},[52,30730,729],{"class":58},[52,30732,30733],{"class":54,"line":118},[52,30734,26724],{"class":58},[52,30736,30737,30739,30741],{"class":54,"line":594},[52,30738,2213],{"class":58},[52,30740,2216],{"class":371},[52,30742,105],{"class":58},[52,30744,30745,30747,30749],{"class":54,"line":600},[52,30746,2230],{"class":58},[52,30748,30510],{"class":371},[52,30750,77],{"class":58},[52,30752,30753,30755,30757],{"class":54,"line":606},[52,30754,121],{"class":58},[52,30756,63],{"class":371},[52,30758,77],{"class":58},[43,30760,30762],{"className":222,"code":30761,"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,30763,30764,30774,30778,30792,30796,30809,30817,30821,30825],{"__ignoreMap":48},[52,30765,30766,30768,30770,30772],{"class":54,"line":55},[52,30767,232],{"class":231},[52,30769,9005],{"class":58},[52,30771,238],{"class":231},[52,30773,9010],{"class":73},[52,30775,30776],{"class":54,"line":80},[52,30777,597],{"emptyLinePlaceholder":171},[52,30779,30780,30782,30784,30786,30788,30790],{"class":54,"line":108},[52,30781,1721],{"class":231},[52,30783,1724],{"class":371},[52,30785,1727],{"class":231},[52,30787,1730],{"class":231},[52,30789,1733],{"class":66},[52,30791,1736],{"class":58},[52,30793,30794],{"class":54,"line":118},[52,30795,1751],{"class":58},[52,30797,30798,30800,30803,30805,30807],{"class":54,"line":594},[52,30799,1756],{"class":58},[52,30801,30802],{"class":73},"'ConcentricSpin'",[52,30804,26969],{"class":58},[52,30806,26778],{"class":371},[52,30808,5033],{"class":58},[52,30810,30811,30813,30815],{"class":54,"line":600},[52,30812,4501],{"class":58},[52,30814,2869],{"class":73},[52,30816,2129],{"class":58},[52,30818,30819],{"class":54,"line":606},[52,30820,4518],{"class":58},[52,30822,30823],{"class":54,"line":653},[52,30824,1773],{"class":58},[52,30826,30827],{"class":54,"line":662},[52,30828,1778],{"class":58},[156,30830,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30832},[30833,30834],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/concentricspin",{"title":30510,"description":30518},"docs/components/ConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":30841,"title":30842,"body":30843,"category":27535,"componentType":20617,"description":30850,"extension":168,"meta":31035,"navigation":171,"path":31036,"requiresChild":27538,"seo":31037,"stem":31038,"__hash__":31039},"components/docs/components/ConicGradient.md","ConicGradient",{"type":8,"value":30844,"toc":31031},[30845,30848,30851,30853,30855,30858,30860,31029],[11,30846,30842],{"id":30847},"conicgradient",[15,30849,30850],{},"Colors sweep in a full circle around a center point, like a color wheel",[26676,30852],{"component":30842},[23,30854,26680],{"id":21278},[26682,30856],{":props":30857},"[{\"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,30859,26688],{"id":26687},[217,30861,30862,30891,30919,30947,30975],{":tabs":1543},[43,30863,30865],{"className":45,"code":30864,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConicGradient />\n\u003C/Shader>\n",[31,30866,30867,30875,30883],{"__ignoreMap":48},[52,30868,30869,30871,30873],{"class":54,"line":55},[52,30870,59],{"class":58},[52,30872,63],{"class":62},[52,30874,77],{"class":58},[52,30876,30877,30879,30881],{"class":54,"line":80},[52,30878,83],{"class":58},[52,30880,30842],{"class":62},[52,30882,105],{"class":58},[52,30884,30885,30887,30889],{"class":54,"line":108},[52,30886,121],{"class":58},[52,30888,63],{"class":62},[52,30890,77],{"class":58},[43,30892,30893],{"className":360,"code":30864,"language":362,"meta":48,"style":48},[31,30894,30895,30903,30911],{"__ignoreMap":48},[52,30896,30897,30899,30901],{"class":54,"line":55},[52,30898,59],{"class":58},[52,30900,63],{"class":371},[52,30902,77],{"class":58},[52,30904,30905,30907,30909],{"class":54,"line":80},[52,30906,83],{"class":58},[52,30908,30842],{"class":371},[52,30910,105],{"class":58},[52,30912,30913,30915,30917],{"class":54,"line":108},[52,30914,121],{"class":58},[52,30916,63],{"class":371},[52,30918,77],{"class":58},[43,30920,30921],{"className":2507,"code":30864,"language":2509,"meta":48,"style":48},[31,30922,30923,30931,30939],{"__ignoreMap":48},[52,30924,30925,30927,30929],{"class":54,"line":55},[52,30926,59],{"class":58},[52,30928,63],{"class":371},[52,30930,77],{"class":58},[52,30932,30933,30935,30937],{"class":54,"line":80},[52,30934,83],{"class":58},[52,30936,30842],{"class":371},[52,30938,105],{"class":58},[52,30940,30941,30943,30945],{"class":54,"line":108},[52,30942,121],{"class":58},[52,30944,63],{"class":371},[52,30946,77],{"class":58},[43,30948,30949],{"className":419,"code":30864,"language":420,"meta":48,"style":48},[31,30950,30951,30959,30967],{"__ignoreMap":48},[52,30952,30953,30955,30957],{"class":54,"line":55},[52,30954,59],{"class":58},[52,30956,63],{"class":371},[52,30958,77],{"class":58},[52,30960,30961,30963,30965],{"class":54,"line":80},[52,30962,83],{"class":58},[52,30964,30842],{"class":371},[52,30966,105],{"class":58},[52,30968,30969,30971,30973],{"class":54,"line":108},[52,30970,121],{"class":58},[52,30972,63],{"class":371},[52,30974,77],{"class":58},[43,30976,30978],{"className":222,"code":30977,"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,30979,30980,30990,30994,31008,31012,31021,31025],{"__ignoreMap":48},[52,30981,30982,30984,30986,30988],{"class":54,"line":55},[52,30983,232],{"class":231},[52,30985,9005],{"class":58},[52,30987,238],{"class":231},[52,30989,9010],{"class":73},[52,30991,30992],{"class":54,"line":80},[52,30993,597],{"emptyLinePlaceholder":171},[52,30995,30996,30998,31000,31002,31004,31006],{"class":54,"line":108},[52,30997,1721],{"class":231},[52,30999,1724],{"class":371},[52,31001,1727],{"class":231},[52,31003,1730],{"class":231},[52,31005,1733],{"class":66},[52,31007,1736],{"class":58},[52,31009,31010],{"class":54,"line":118},[52,31011,1751],{"class":58},[52,31013,31014,31016,31019],{"class":54,"line":594},[52,31015,1756],{"class":58},[52,31017,31018],{"class":73},"'ConicGradient'",[52,31020,2129],{"class":58},[52,31022,31023],{"class":54,"line":600},[52,31024,1773],{"class":58},[52,31026,31027],{"class":54,"line":606},[52,31028,1778],{"class":58},[156,31030,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":31032},[31033,31034],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/conicgradient",{"title":30842,"description":30850},"docs/components/ConicGradient","NIVNPxXJkDB1SOPz03uSQXaV6QUuIWABabpG6Qi-clQ",{"id":31041,"title":31042,"body":31043,"category":27278,"componentType":20623,"description":31050,"extension":168,"meta":31311,"navigation":171,"path":31312,"requiresChild":171,"seo":31313,"stem":31314,"__hash__":31315},"components/docs/components/ContourLines.md","ContourLines",{"type":8,"value":31044,"toc":31307},[31045,31048,31051,31053,31055,31058,31060,31305],[11,31046,31042],{"id":31047},"contourlines",[15,31049,31050],{},"Draw topographical contour lines based on luminance or alpha",[26676,31052],{"component":31042},[23,31054,26680],{"id":21278},[26682,31056],{":props":31057},"[{\"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,31059,26688],{"id":26687},[217,31061,31062,31107,31151,31195,31239],{":tabs":1543},[43,31063,31065],{"className":45,"code":31064,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CContourLines>\n \u003CCircle />\n \u003C/ContourLines>\n\u003C/Shader>\n",[31,31066,31067,31075,31083,31091,31099],{"__ignoreMap":48},[52,31068,31069,31071,31073],{"class":54,"line":55},[52,31070,59],{"class":58},[52,31072,63],{"class":62},[52,31074,77],{"class":58},[52,31076,31077,31079,31081],{"class":54,"line":80},[52,31078,83],{"class":58},[52,31080,31042],{"class":62},[52,31082,77],{"class":58},[52,31084,31085,31087,31089],{"class":54,"line":108},[52,31086,2213],{"class":58},[52,31088,2216],{"class":62},[52,31090,105],{"class":58},[52,31092,31093,31095,31097],{"class":54,"line":118},[52,31094,2230],{"class":58},[52,31096,31042],{"class":62},[52,31098,77],{"class":58},[52,31100,31101,31103,31105],{"class":54,"line":594},[52,31102,121],{"class":58},[52,31104,63],{"class":62},[52,31106,77],{"class":58},[43,31108,31109],{"className":360,"code":31064,"language":362,"meta":48,"style":48},[31,31110,31111,31119,31127,31135,31143],{"__ignoreMap":48},[52,31112,31113,31115,31117],{"class":54,"line":55},[52,31114,59],{"class":58},[52,31116,63],{"class":371},[52,31118,77],{"class":58},[52,31120,31121,31123,31125],{"class":54,"line":80},[52,31122,83],{"class":58},[52,31124,31042],{"class":371},[52,31126,77],{"class":58},[52,31128,31129,31131,31133],{"class":54,"line":108},[52,31130,2213],{"class":58},[52,31132,2216],{"class":371},[52,31134,105],{"class":58},[52,31136,31137,31139,31141],{"class":54,"line":118},[52,31138,2230],{"class":58},[52,31140,31042],{"class":371},[52,31142,77],{"class":58},[52,31144,31145,31147,31149],{"class":54,"line":594},[52,31146,121],{"class":58},[52,31148,63],{"class":371},[52,31150,77],{"class":58},[43,31152,31153],{"className":2507,"code":31064,"language":2509,"meta":48,"style":48},[31,31154,31155,31163,31171,31179,31187],{"__ignoreMap":48},[52,31156,31157,31159,31161],{"class":54,"line":55},[52,31158,59],{"class":58},[52,31160,63],{"class":371},[52,31162,77],{"class":58},[52,31164,31165,31167,31169],{"class":54,"line":80},[52,31166,83],{"class":58},[52,31168,31042],{"class":371},[52,31170,77],{"class":58},[52,31172,31173,31175,31177],{"class":54,"line":108},[52,31174,2213],{"class":58},[52,31176,2216],{"class":371},[52,31178,105],{"class":58},[52,31180,31181,31183,31185],{"class":54,"line":118},[52,31182,2230],{"class":58},[52,31184,31042],{"class":371},[52,31186,77],{"class":58},[52,31188,31189,31191,31193],{"class":54,"line":594},[52,31190,121],{"class":58},[52,31192,63],{"class":371},[52,31194,77],{"class":58},[43,31196,31197],{"className":419,"code":31064,"language":420,"meta":48,"style":48},[31,31198,31199,31207,31215,31223,31231],{"__ignoreMap":48},[52,31200,31201,31203,31205],{"class":54,"line":55},[52,31202,59],{"class":58},[52,31204,63],{"class":371},[52,31206,77],{"class":58},[52,31208,31209,31211,31213],{"class":54,"line":80},[52,31210,83],{"class":58},[52,31212,31042],{"class":371},[52,31214,77],{"class":58},[52,31216,31217,31219,31221],{"class":54,"line":108},[52,31218,2213],{"class":58},[52,31220,2216],{"class":371},[52,31222,105],{"class":58},[52,31224,31225,31227,31229],{"class":54,"line":118},[52,31226,2230],{"class":58},[52,31228,31042],{"class":371},[52,31230,77],{"class":58},[52,31232,31233,31235,31237],{"class":54,"line":594},[52,31234,121],{"class":58},[52,31236,63],{"class":371},[52,31238,77],{"class":58},[43,31240,31242],{"className":222,"code":31241,"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,31243,31244,31254,31258,31272,31276,31285,31293,31297,31301],{"__ignoreMap":48},[52,31245,31246,31248,31250,31252],{"class":54,"line":55},[52,31247,232],{"class":231},[52,31249,9005],{"class":58},[52,31251,238],{"class":231},[52,31253,9010],{"class":73},[52,31255,31256],{"class":54,"line":80},[52,31257,597],{"emptyLinePlaceholder":171},[52,31259,31260,31262,31264,31266,31268,31270],{"class":54,"line":108},[52,31261,1721],{"class":231},[52,31263,1724],{"class":371},[52,31265,1727],{"class":231},[52,31267,1730],{"class":231},[52,31269,1733],{"class":66},[52,31271,1736],{"class":58},[52,31273,31274],{"class":54,"line":118},[52,31275,1751],{"class":58},[52,31277,31278,31280,31283],{"class":54,"line":594},[52,31279,1756],{"class":58},[52,31281,31282],{"class":73},"'ContourLines'",[52,31284,4496],{"class":58},[52,31286,31287,31289,31291],{"class":54,"line":600},[52,31288,4501],{"class":58},[52,31290,2869],{"class":73},[52,31292,2129],{"class":58},[52,31294,31295],{"class":54,"line":606},[52,31296,4518],{"class":58},[52,31298,31299],{"class":54,"line":653},[52,31300,1773],{"class":58},[52,31302,31303],{"class":54,"line":662},[52,31304,1778],{"class":58},[156,31306,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":31308},[31309,31310],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/contourlines",{"title":31042,"description":31050},"docs/components/ContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":31317,"title":31318,"body":31319,"category":30502,"componentType":20617,"description":31326,"extension":168,"meta":31604,"navigation":171,"path":31605,"requiresChild":27538,"seo":31606,"stem":31607,"__hash__":31608},"components/docs/components/Crescent.md","Crescent",{"type":8,"value":31320,"toc":31600},[31321,31324,31327,31329,31331,31334,31336,31598],[11,31322,31318],{"id":31323},"crescent",[15,31325,31326],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[26676,31328],{"component":31318},[23,31330,26680],{"id":21278},[26682,31332],{":props":31333},"[{\"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,31335,26688],{"id":26687},[217,31337,31338,31387,31438,31486,31536],{":tabs":1543},[43,31339,31341],{"className":45,"code":31340,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,31342,31343,31351,31358,31366,31375,31379],{"__ignoreMap":48},[52,31344,31345,31347,31349],{"class":54,"line":55},[52,31346,59],{"class":58},[52,31348,63],{"class":62},[52,31350,77],{"class":58},[52,31352,31353,31355],{"class":54,"line":80},[52,31354,83],{"class":58},[52,31356,31357],{"class":62},"Crescent\n",[52,31359,31360,31362,31364],{"class":54,"line":108},[52,31361,7125],{"class":66},[52,31363,70],{"class":58},[52,31365,7081],{"class":73},[52,31367,31368,31370,31372],{"class":54,"line":118},[52,31369,14675],{"class":66},[52,31371,70],{"class":58},[52,31373,31374],{"class":73},"\"0.3\"\n",[52,31376,31377],{"class":54,"line":594},[52,31378,1224],{"class":58},[52,31380,31381,31383,31385],{"class":54,"line":600},[52,31382,121],{"class":58},[52,31384,63],{"class":62},[52,31386,77],{"class":58},[43,31388,31390],{"className":360,"code":31389,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,31391,31392,31400,31406,31414,31426,31430],{"__ignoreMap":48},[52,31393,31394,31396,31398],{"class":54,"line":55},[52,31395,59],{"class":58},[52,31397,63],{"class":371},[52,31399,77],{"class":58},[52,31401,31402,31404],{"class":54,"line":80},[52,31403,83],{"class":58},[52,31405,31357],{"class":371},[52,31407,31408,31410,31412],{"class":54,"line":108},[52,31409,7125],{"class":66},[52,31411,70],{"class":231},[52,31413,7081],{"class":73},[52,31415,31416,31418,31420,31422,31424],{"class":54,"line":118},[52,31417,7135],{"class":66},[52,31419,70],{"class":231},[52,31421,723],{"class":58},[52,31423,19253],{"class":371},[52,31425,729],{"class":58},[52,31427,31428],{"class":54,"line":594},[52,31429,1224],{"class":58},[52,31431,31432,31434,31436],{"class":54,"line":600},[52,31433,121],{"class":58},[52,31435,63],{"class":371},[52,31437,77],{"class":58},[43,31439,31440],{"className":2507,"code":31389,"language":2509,"meta":48,"style":48},[31,31441,31442,31450,31456,31464,31474,31478],{"__ignoreMap":48},[52,31443,31444,31446,31448],{"class":54,"line":55},[52,31445,59],{"class":58},[52,31447,63],{"class":371},[52,31449,77],{"class":58},[52,31451,31452,31454],{"class":54,"line":80},[52,31453,83],{"class":58},[52,31455,31357],{"class":371},[52,31457,31458,31460,31462],{"class":54,"line":108},[52,31459,7125],{"class":66},[52,31461,70],{"class":58},[52,31463,7081],{"class":73},[52,31465,31466,31468,31470,31472],{"class":54,"line":118},[52,31467,7135],{"class":66},[52,31469,24620],{"class":58},[52,31471,19253],{"class":371},[52,31473,729],{"class":58},[52,31475,31476],{"class":54,"line":594},[52,31477,1224],{"class":58},[52,31479,31480,31482,31484],{"class":54,"line":600},[52,31481,121],{"class":58},[52,31483,63],{"class":371},[52,31485,77],{"class":58},[43,31487,31488],{"className":419,"code":31389,"language":420,"meta":48,"style":48},[31,31489,31490,31498,31504,31512,31524,31528],{"__ignoreMap":48},[52,31491,31492,31494,31496],{"class":54,"line":55},[52,31493,59],{"class":58},[52,31495,63],{"class":371},[52,31497,77],{"class":58},[52,31499,31500,31502],{"class":54,"line":80},[52,31501,83],{"class":58},[52,31503,31357],{"class":371},[52,31505,31506,31508,31510],{"class":54,"line":108},[52,31507,7125],{"class":66},[52,31509,70],{"class":231},[52,31511,7081],{"class":73},[52,31513,31514,31516,31518,31520,31522],{"class":54,"line":118},[52,31515,7135],{"class":66},[52,31517,70],{"class":231},[52,31519,723],{"class":58},[52,31521,19253],{"class":371},[52,31523,729],{"class":58},[52,31525,31526],{"class":54,"line":594},[52,31527,1224],{"class":58},[52,31529,31530,31532,31534],{"class":54,"line":600},[52,31531,121],{"class":58},[52,31533,63],{"class":371},[52,31535,77],{"class":58},[43,31537,31539],{"className":222,"code":31538,"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,31540,31541,31551,31555,31569,31573,31590,31594],{"__ignoreMap":48},[52,31542,31543,31545,31547,31549],{"class":54,"line":55},[52,31544,232],{"class":231},[52,31546,9005],{"class":58},[52,31548,238],{"class":231},[52,31550,9010],{"class":73},[52,31552,31553],{"class":54,"line":80},[52,31554,597],{"emptyLinePlaceholder":171},[52,31556,31557,31559,31561,31563,31565,31567],{"class":54,"line":108},[52,31558,1721],{"class":231},[52,31560,1724],{"class":371},[52,31562,1727],{"class":231},[52,31564,1730],{"class":231},[52,31566,1733],{"class":66},[52,31568,1736],{"class":58},[52,31570,31571],{"class":54,"line":118},[52,31572,1751],{"class":58},[52,31574,31575,31577,31580,31582,31584,31586,31588],{"class":54,"line":594},[52,31576,1756],{"class":58},[52,31578,31579],{"class":73},"'Crescent'",[52,31581,1762],{"class":58},[52,31583,7660],{"class":73},[52,31585,4052],{"class":58},[52,31587,19253],{"class":371},[52,31589,1768],{"class":58},[52,31591,31592],{"class":54,"line":600},[52,31593,1773],{"class":58},[52,31595,31596],{"class":54,"line":606},[52,31597,1778],{"class":58},[156,31599,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31601},[31602,31603],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/crescent",{"title":31318,"description":31326},"docs/components/Crescent","ObqUw-47jUNAlPME041OasGzcc_jSvwXgXEVE3NCaLk",{"id":31610,"title":31611,"body":31612,"category":30502,"componentType":20617,"description":31619,"extension":168,"meta":31897,"navigation":171,"path":31898,"requiresChild":27538,"seo":31899,"stem":31900,"__hash__":31901},"components/docs/components/Cross.md","Cross",{"type":8,"value":31613,"toc":31893},[31614,31617,31620,31622,31624,31627,31629,31891],[11,31615,31611],{"id":31616},"cross",[15,31618,31619],{},"Plus / cross shape with adjustable arm length, width, and rounding",[26676,31621],{"component":31611},[23,31623,26680],{"id":21278},[26682,31625],{":props":31626},"[{\"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,31628,26688],{"id":26687},[217,31630,31631,31680,31731,31779,31829],{":tabs":1543},[43,31632,31634],{"className":45,"code":31633,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,31635,31636,31644,31651,31659,31668,31672],{"__ignoreMap":48},[52,31637,31638,31640,31642],{"class":54,"line":55},[52,31639,59],{"class":58},[52,31641,63],{"class":62},[52,31643,77],{"class":58},[52,31645,31646,31648],{"class":54,"line":80},[52,31647,83],{"class":58},[52,31649,31650],{"class":62},"Cross\n",[52,31652,31653,31655,31657],{"class":54,"line":108},[52,31654,7125],{"class":66},[52,31656,70],{"class":58},[52,31658,7081],{"class":73},[52,31660,31661,31663,31665],{"class":54,"line":118},[52,31662,14675],{"class":66},[52,31664,70],{"class":58},[52,31666,31667],{"class":73},"\"0.35\"\n",[52,31669,31670],{"class":54,"line":594},[52,31671,1224],{"class":58},[52,31673,31674,31676,31678],{"class":54,"line":600},[52,31675,121],{"class":58},[52,31677,63],{"class":62},[52,31679,77],{"class":58},[43,31681,31683],{"className":360,"code":31682,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,31684,31685,31693,31699,31707,31719,31723],{"__ignoreMap":48},[52,31686,31687,31689,31691],{"class":54,"line":55},[52,31688,59],{"class":58},[52,31690,63],{"class":371},[52,31692,77],{"class":58},[52,31694,31695,31697],{"class":54,"line":80},[52,31696,83],{"class":58},[52,31698,31650],{"class":371},[52,31700,31701,31703,31705],{"class":54,"line":108},[52,31702,7125],{"class":66},[52,31704,70],{"class":231},[52,31706,7081],{"class":73},[52,31708,31709,31711,31713,31715,31717],{"class":54,"line":118},[52,31710,7135],{"class":66},[52,31712,70],{"class":231},[52,31714,723],{"class":58},[52,31716,18404],{"class":371},[52,31718,729],{"class":58},[52,31720,31721],{"class":54,"line":594},[52,31722,1224],{"class":58},[52,31724,31725,31727,31729],{"class":54,"line":600},[52,31726,121],{"class":58},[52,31728,63],{"class":371},[52,31730,77],{"class":58},[43,31732,31733],{"className":2507,"code":31682,"language":2509,"meta":48,"style":48},[31,31734,31735,31743,31749,31757,31767,31771],{"__ignoreMap":48},[52,31736,31737,31739,31741],{"class":54,"line":55},[52,31738,59],{"class":58},[52,31740,63],{"class":371},[52,31742,77],{"class":58},[52,31744,31745,31747],{"class":54,"line":80},[52,31746,83],{"class":58},[52,31748,31650],{"class":371},[52,31750,31751,31753,31755],{"class":54,"line":108},[52,31752,7125],{"class":66},[52,31754,70],{"class":58},[52,31756,7081],{"class":73},[52,31758,31759,31761,31763,31765],{"class":54,"line":118},[52,31760,7135],{"class":66},[52,31762,24620],{"class":58},[52,31764,18404],{"class":371},[52,31766,729],{"class":58},[52,31768,31769],{"class":54,"line":594},[52,31770,1224],{"class":58},[52,31772,31773,31775,31777],{"class":54,"line":600},[52,31774,121],{"class":58},[52,31776,63],{"class":371},[52,31778,77],{"class":58},[43,31780,31781],{"className":419,"code":31682,"language":420,"meta":48,"style":48},[31,31782,31783,31791,31797,31805,31817,31821],{"__ignoreMap":48},[52,31784,31785,31787,31789],{"class":54,"line":55},[52,31786,59],{"class":58},[52,31788,63],{"class":371},[52,31790,77],{"class":58},[52,31792,31793,31795],{"class":54,"line":80},[52,31794,83],{"class":58},[52,31796,31650],{"class":371},[52,31798,31799,31801,31803],{"class":54,"line":108},[52,31800,7125],{"class":66},[52,31802,70],{"class":231},[52,31804,7081],{"class":73},[52,31806,31807,31809,31811,31813,31815],{"class":54,"line":118},[52,31808,7135],{"class":66},[52,31810,70],{"class":231},[52,31812,723],{"class":58},[52,31814,18404],{"class":371},[52,31816,729],{"class":58},[52,31818,31819],{"class":54,"line":594},[52,31820,1224],{"class":58},[52,31822,31823,31825,31827],{"class":54,"line":600},[52,31824,121],{"class":58},[52,31826,63],{"class":371},[52,31828,77],{"class":58},[43,31830,31832],{"className":222,"code":31831,"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,31833,31834,31844,31848,31862,31866,31883,31887],{"__ignoreMap":48},[52,31835,31836,31838,31840,31842],{"class":54,"line":55},[52,31837,232],{"class":231},[52,31839,9005],{"class":58},[52,31841,238],{"class":231},[52,31843,9010],{"class":73},[52,31845,31846],{"class":54,"line":80},[52,31847,597],{"emptyLinePlaceholder":171},[52,31849,31850,31852,31854,31856,31858,31860],{"class":54,"line":108},[52,31851,1721],{"class":231},[52,31853,1724],{"class":371},[52,31855,1727],{"class":231},[52,31857,1730],{"class":231},[52,31859,1733],{"class":66},[52,31861,1736],{"class":58},[52,31863,31864],{"class":54,"line":118},[52,31865,1751],{"class":58},[52,31867,31868,31870,31873,31875,31877,31879,31881],{"class":54,"line":594},[52,31869,1756],{"class":58},[52,31871,31872],{"class":73},"'Cross'",[52,31874,1762],{"class":58},[52,31876,7660],{"class":73},[52,31878,4052],{"class":58},[52,31880,18404],{"class":371},[52,31882,1768],{"class":58},[52,31884,31885],{"class":54,"line":600},[52,31886,1773],{"class":58},[52,31888,31889],{"class":54,"line":606},[52,31890,1778],{"class":58},[156,31892,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31894},[31895,31896],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/cross",{"title":31611,"description":31619},"docs/components/Cross","8h8ZHf2RZRmwG-7PmNT2Lcb_l-kH3tvrmVN0fWFbTNs",{"id":31903,"title":31904,"body":31905,"category":32173,"componentType":20623,"description":31912,"extension":168,"meta":32174,"navigation":171,"path":32175,"requiresChild":171,"seo":32176,"stem":32177,"__hash__":32178},"components/docs/components/Crystal.md","Crystal",{"type":8,"value":31906,"toc":32169},[31907,31910,31913,31915,31917,31920,31922,32167],[11,31908,31904],{"id":31909},"crystal",[15,31911,31912],{},"Diamond-like crystal lens with faceted refraction.",[26676,31914],{"component":31904},[23,31916,26680],{"id":21278},[26682,31918],{":props":31919},"[{\"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,31921,26688],{"id":26687},[217,31923,31924,31969,32013,32057,32101],{":tabs":1543},[43,31925,31927],{"className":45,"code":31926,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrystal>\n \u003CCircle />\n \u003C/Crystal>\n\u003C/Shader>\n",[31,31928,31929,31937,31945,31953,31961],{"__ignoreMap":48},[52,31930,31931,31933,31935],{"class":54,"line":55},[52,31932,59],{"class":58},[52,31934,63],{"class":62},[52,31936,77],{"class":58},[52,31938,31939,31941,31943],{"class":54,"line":80},[52,31940,83],{"class":58},[52,31942,31904],{"class":62},[52,31944,77],{"class":58},[52,31946,31947,31949,31951],{"class":54,"line":108},[52,31948,2213],{"class":58},[52,31950,2216],{"class":62},[52,31952,105],{"class":58},[52,31954,31955,31957,31959],{"class":54,"line":118},[52,31956,2230],{"class":58},[52,31958,31904],{"class":62},[52,31960,77],{"class":58},[52,31962,31963,31965,31967],{"class":54,"line":594},[52,31964,121],{"class":58},[52,31966,63],{"class":62},[52,31968,77],{"class":58},[43,31970,31971],{"className":360,"code":31926,"language":362,"meta":48,"style":48},[31,31972,31973,31981,31989,31997,32005],{"__ignoreMap":48},[52,31974,31975,31977,31979],{"class":54,"line":55},[52,31976,59],{"class":58},[52,31978,63],{"class":371},[52,31980,77],{"class":58},[52,31982,31983,31985,31987],{"class":54,"line":80},[52,31984,83],{"class":58},[52,31986,31904],{"class":371},[52,31988,77],{"class":58},[52,31990,31991,31993,31995],{"class":54,"line":108},[52,31992,2213],{"class":58},[52,31994,2216],{"class":371},[52,31996,105],{"class":58},[52,31998,31999,32001,32003],{"class":54,"line":118},[52,32000,2230],{"class":58},[52,32002,31904],{"class":371},[52,32004,77],{"class":58},[52,32006,32007,32009,32011],{"class":54,"line":594},[52,32008,121],{"class":58},[52,32010,63],{"class":371},[52,32012,77],{"class":58},[43,32014,32015],{"className":2507,"code":31926,"language":2509,"meta":48,"style":48},[31,32016,32017,32025,32033,32041,32049],{"__ignoreMap":48},[52,32018,32019,32021,32023],{"class":54,"line":55},[52,32020,59],{"class":58},[52,32022,63],{"class":371},[52,32024,77],{"class":58},[52,32026,32027,32029,32031],{"class":54,"line":80},[52,32028,83],{"class":58},[52,32030,31904],{"class":371},[52,32032,77],{"class":58},[52,32034,32035,32037,32039],{"class":54,"line":108},[52,32036,2213],{"class":58},[52,32038,2216],{"class":371},[52,32040,105],{"class":58},[52,32042,32043,32045,32047],{"class":54,"line":118},[52,32044,2230],{"class":58},[52,32046,31904],{"class":371},[52,32048,77],{"class":58},[52,32050,32051,32053,32055],{"class":54,"line":594},[52,32052,121],{"class":58},[52,32054,63],{"class":371},[52,32056,77],{"class":58},[43,32058,32059],{"className":419,"code":31926,"language":420,"meta":48,"style":48},[31,32060,32061,32069,32077,32085,32093],{"__ignoreMap":48},[52,32062,32063,32065,32067],{"class":54,"line":55},[52,32064,59],{"class":58},[52,32066,63],{"class":371},[52,32068,77],{"class":58},[52,32070,32071,32073,32075],{"class":54,"line":80},[52,32072,83],{"class":58},[52,32074,31904],{"class":371},[52,32076,77],{"class":58},[52,32078,32079,32081,32083],{"class":54,"line":108},[52,32080,2213],{"class":58},[52,32082,2216],{"class":371},[52,32084,105],{"class":58},[52,32086,32087,32089,32091],{"class":54,"line":118},[52,32088,2230],{"class":58},[52,32090,31904],{"class":371},[52,32092,77],{"class":58},[52,32094,32095,32097,32099],{"class":54,"line":594},[52,32096,121],{"class":58},[52,32098,63],{"class":371},[52,32100,77],{"class":58},[43,32102,32104],{"className":222,"code":32103,"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,32105,32106,32116,32120,32134,32138,32147,32155,32159,32163],{"__ignoreMap":48},[52,32107,32108,32110,32112,32114],{"class":54,"line":55},[52,32109,232],{"class":231},[52,32111,9005],{"class":58},[52,32113,238],{"class":231},[52,32115,9010],{"class":73},[52,32117,32118],{"class":54,"line":80},[52,32119,597],{"emptyLinePlaceholder":171},[52,32121,32122,32124,32126,32128,32130,32132],{"class":54,"line":108},[52,32123,1721],{"class":231},[52,32125,1724],{"class":371},[52,32127,1727],{"class":231},[52,32129,1730],{"class":231},[52,32131,1733],{"class":66},[52,32133,1736],{"class":58},[52,32135,32136],{"class":54,"line":118},[52,32137,1751],{"class":58},[52,32139,32140,32142,32145],{"class":54,"line":594},[52,32141,1756],{"class":58},[52,32143,32144],{"class":73},"'Crystal'",[52,32146,4496],{"class":58},[52,32148,32149,32151,32153],{"class":54,"line":600},[52,32150,4501],{"class":58},[52,32152,2869],{"class":73},[52,32154,2129],{"class":58},[52,32156,32157],{"class":54,"line":606},[52,32158,4518],{"class":58},[52,32160,32161],{"class":54,"line":653},[52,32162,1773],{"class":58},[52,32164,32165],{"class":54,"line":662},[52,32166,1778],{"class":58},[156,32168,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":32170},[32171,32172],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},"Shape Effects",{},"/docs/components/crystal",{"title":31904,"description":31912},"docs/components/Crystal","-FxLCmCZzp_ueV9QfIlLY-OvVQZj_IC4AWXu45eZ9YA",{"id":32180,"title":11919,"body":32181,"category":29936,"componentType":20623,"description":32188,"extension":168,"meta":32554,"navigation":171,"path":32555,"requiresChild":171,"seo":32556,"stem":32557,"__hash__":32558},"components/docs/components/CursorRipples.md",{"type":8,"value":32182,"toc":32550},[32183,32186,32189,32191,32193,32196,32198,32548],[11,32184,11919],{"id":32185},"cursorripples",[15,32187,32188],{},"Fluid-like ripple distortion",[26676,32190],{"component":11919},[23,32192,26680],{"id":21278},[26682,32194],{":props":32195},"[{\"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,32197,26688],{"id":26687},[217,32199,32200,32266,32338,32404,32474],{":tabs":1543},[43,32201,32203],{"className":45,"code":32202,"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,32204,32205,32213,32220,32229,32238,32242,32250,32258],{"__ignoreMap":48},[52,32206,32207,32209,32211],{"class":54,"line":55},[52,32208,59],{"class":58},[52,32210,63],{"class":62},[52,32212,77],{"class":58},[52,32214,32215,32217],{"class":54,"line":80},[52,32216,83],{"class":58},[52,32218,32219],{"class":62},"CursorRipples\n",[52,32221,32222,32224,32226],{"class":54,"line":108},[52,32223,17644],{"class":66},[52,32225,70],{"class":58},[52,32227,32228],{"class":73},"\"10\"\n",[52,32230,32231,32233,32235],{"class":54,"line":118},[52,32232,14675],{"class":66},[52,32234,70],{"class":58},[52,32236,32237],{"class":73},"\"0.5\"\n",[52,32239,32240],{"class":54,"line":594},[52,32241,26724],{"class":58},[52,32243,32244,32246,32248],{"class":54,"line":600},[52,32245,2213],{"class":58},[52,32247,2216],{"class":62},[52,32249,105],{"class":58},[52,32251,32252,32254,32256],{"class":54,"line":606},[52,32253,2230],{"class":58},[52,32255,11919],{"class":62},[52,32257,77],{"class":58},[52,32259,32260,32262,32264],{"class":54,"line":653},[52,32261,121],{"class":58},[52,32263,63],{"class":62},[52,32265,77],{"class":58},[43,32267,32269],{"className":360,"code":32268,"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,32270,32271,32279,32285,32298,32310,32314,32322,32330],{"__ignoreMap":48},[52,32272,32273,32275,32277],{"class":54,"line":55},[52,32274,59],{"class":58},[52,32276,63],{"class":371},[52,32278,77],{"class":58},[52,32280,32281,32283],{"class":54,"line":80},[52,32282,83],{"class":58},[52,32284,32219],{"class":371},[52,32286,32287,32289,32291,32293,32296],{"class":54,"line":108},[52,32288,17755],{"class":66},[52,32290,70],{"class":231},[52,32292,723],{"class":58},[52,32294,32295],{"class":371},"10",[52,32297,729],{"class":58},[52,32299,32300,32302,32304,32306,32308],{"class":54,"line":118},[52,32301,7135],{"class":66},[52,32303,70],{"class":231},[52,32305,723],{"class":58},[52,32307,5241],{"class":371},[52,32309,729],{"class":58},[52,32311,32312],{"class":54,"line":594},[52,32313,26724],{"class":58},[52,32315,32316,32318,32320],{"class":54,"line":600},[52,32317,2213],{"class":58},[52,32319,2216],{"class":371},[52,32321,105],{"class":58},[52,32323,32324,32326,32328],{"class":54,"line":606},[52,32325,2230],{"class":58},[52,32327,11919],{"class":371},[52,32329,77],{"class":58},[52,32331,32332,32334,32336],{"class":54,"line":653},[52,32333,121],{"class":58},[52,32335,63],{"class":371},[52,32337,77],{"class":58},[43,32339,32340],{"className":2507,"code":32268,"language":2509,"meta":48,"style":48},[31,32341,32342,32350,32356,32366,32376,32380,32388,32396],{"__ignoreMap":48},[52,32343,32344,32346,32348],{"class":54,"line":55},[52,32345,59],{"class":58},[52,32347,63],{"class":371},[52,32349,77],{"class":58},[52,32351,32352,32354],{"class":54,"line":80},[52,32353,83],{"class":58},[52,32355,32219],{"class":371},[52,32357,32358,32360,32362,32364],{"class":54,"line":108},[52,32359,17755],{"class":66},[52,32361,24620],{"class":58},[52,32363,32295],{"class":371},[52,32365,729],{"class":58},[52,32367,32368,32370,32372,32374],{"class":54,"line":118},[52,32369,7135],{"class":66},[52,32371,24620],{"class":58},[52,32373,5241],{"class":371},[52,32375,729],{"class":58},[52,32377,32378],{"class":54,"line":594},[52,32379,26724],{"class":58},[52,32381,32382,32384,32386],{"class":54,"line":600},[52,32383,2213],{"class":58},[52,32385,2216],{"class":371},[52,32387,105],{"class":58},[52,32389,32390,32392,32394],{"class":54,"line":606},[52,32391,2230],{"class":58},[52,32393,11919],{"class":371},[52,32395,77],{"class":58},[52,32397,32398,32400,32402],{"class":54,"line":653},[52,32399,121],{"class":58},[52,32401,63],{"class":371},[52,32403,77],{"class":58},[43,32405,32406],{"className":419,"code":32268,"language":420,"meta":48,"style":48},[31,32407,32408,32416,32422,32434,32446,32450,32458,32466],{"__ignoreMap":48},[52,32409,32410,32412,32414],{"class":54,"line":55},[52,32411,59],{"class":58},[52,32413,63],{"class":371},[52,32415,77],{"class":58},[52,32417,32418,32420],{"class":54,"line":80},[52,32419,83],{"class":58},[52,32421,32219],{"class":371},[52,32423,32424,32426,32428,32430,32432],{"class":54,"line":108},[52,32425,17755],{"class":66},[52,32427,70],{"class":231},[52,32429,723],{"class":58},[52,32431,32295],{"class":371},[52,32433,729],{"class":58},[52,32435,32436,32438,32440,32442,32444],{"class":54,"line":118},[52,32437,7135],{"class":66},[52,32439,70],{"class":231},[52,32441,723],{"class":58},[52,32443,5241],{"class":371},[52,32445,729],{"class":58},[52,32447,32448],{"class":54,"line":594},[52,32449,26724],{"class":58},[52,32451,32452,32454,32456],{"class":54,"line":600},[52,32453,2213],{"class":58},[52,32455,2216],{"class":371},[52,32457,105],{"class":58},[52,32459,32460,32462,32464],{"class":54,"line":606},[52,32461,2230],{"class":58},[52,32463,11919],{"class":371},[52,32465,77],{"class":58},[52,32467,32468,32470,32472],{"class":54,"line":653},[52,32469,121],{"class":58},[52,32471,63],{"class":371},[52,32473,77],{"class":58},[43,32475,32477],{"className":222,"code":32476,"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,32478,32479,32489,32493,32507,32511,32528,32536,32540,32544],{"__ignoreMap":48},[52,32480,32481,32483,32485,32487],{"class":54,"line":55},[52,32482,232],{"class":231},[52,32484,9005],{"class":58},[52,32486,238],{"class":231},[52,32488,9010],{"class":73},[52,32490,32491],{"class":54,"line":80},[52,32492,597],{"emptyLinePlaceholder":171},[52,32494,32495,32497,32499,32501,32503,32505],{"class":54,"line":108},[52,32496,1721],{"class":231},[52,32498,1724],{"class":371},[52,32500,1727],{"class":231},[52,32502,1730],{"class":231},[52,32504,1733],{"class":66},[52,32506,1736],{"class":58},[52,32508,32509],{"class":54,"line":118},[52,32510,1751],{"class":58},[52,32512,32513,32515,32518,32520,32522,32524,32526],{"class":54,"line":594},[52,32514,1756],{"class":58},[52,32516,32517],{"class":73},"'CursorRipples'",[52,32519,26969],{"class":58},[52,32521,32295],{"class":371},[52,32523,4052],{"class":58},[52,32525,5241],{"class":371},[52,32527,5033],{"class":58},[52,32529,32530,32532,32534],{"class":54,"line":600},[52,32531,4501],{"class":58},[52,32533,2869],{"class":73},[52,32535,2129],{"class":58},[52,32537,32538],{"class":54,"line":606},[52,32539,4518],{"class":58},[52,32541,32542],{"class":54,"line":653},[52,32543,1773],{"class":58},[52,32545,32546],{"class":54,"line":662},[52,32547,1778],{"class":58},[156,32549,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32551},[32552,32553],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/cursorripples",{"title":11919,"description":32188},"docs/components/CursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":32560,"title":113,"body":32561,"category":29936,"componentType":20617,"description":32568,"extension":168,"meta":32808,"navigation":171,"path":32809,"requiresChild":27538,"seo":32810,"stem":32811,"__hash__":32812},"components/docs/components/CursorTrail.md",{"type":8,"value":32562,"toc":32804},[32563,32566,32569,32571,32573,32576,32578,32802],[11,32564,113],{"id":32565},"cursortrail",[15,32567,32568],{},"Animated trail effect that tracks cursor movement",[26676,32570],{"component":113},[23,32572,26680],{"id":21278},[26682,32574],{":props":32575},"[{\"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,32577,26688],{"id":26687},[217,32579,32580,32620,32663,32703,32745],{":tabs":1543},[43,32581,32583],{"className":45,"code":32582,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n />\n\u003C/Shader>\n",[31,32584,32585,32593,32600,32608,32612],{"__ignoreMap":48},[52,32586,32587,32589,32591],{"class":54,"line":55},[52,32588,59],{"class":58},[52,32590,63],{"class":62},[52,32592,77],{"class":58},[52,32594,32595,32597],{"class":54,"line":80},[52,32596,83],{"class":58},[52,32598,32599],{"class":62},"CursorTrail\n",[52,32601,32602,32604,32606],{"class":54,"line":108},[52,32603,14675],{"class":66},[52,32605,70],{"class":58},[52,32607,32237],{"class":73},[52,32609,32610],{"class":54,"line":118},[52,32611,1224],{"class":58},[52,32613,32614,32616,32618],{"class":54,"line":594},[52,32615,121],{"class":58},[52,32617,63],{"class":62},[52,32619,77],{"class":58},[43,32621,32623],{"className":360,"code":32622,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n />\n\u003C/Shader>\n",[31,32624,32625,32633,32639,32651,32655],{"__ignoreMap":48},[52,32626,32627,32629,32631],{"class":54,"line":55},[52,32628,59],{"class":58},[52,32630,63],{"class":371},[52,32632,77],{"class":58},[52,32634,32635,32637],{"class":54,"line":80},[52,32636,83],{"class":58},[52,32638,32599],{"class":371},[52,32640,32641,32643,32645,32647,32649],{"class":54,"line":108},[52,32642,7135],{"class":66},[52,32644,70],{"class":231},[52,32646,723],{"class":58},[52,32648,5241],{"class":371},[52,32650,729],{"class":58},[52,32652,32653],{"class":54,"line":118},[52,32654,1224],{"class":58},[52,32656,32657,32659,32661],{"class":54,"line":594},[52,32658,121],{"class":58},[52,32660,63],{"class":371},[52,32662,77],{"class":58},[43,32664,32665],{"className":2507,"code":32622,"language":2509,"meta":48,"style":48},[31,32666,32667,32675,32681,32691,32695],{"__ignoreMap":48},[52,32668,32669,32671,32673],{"class":54,"line":55},[52,32670,59],{"class":58},[52,32672,63],{"class":371},[52,32674,77],{"class":58},[52,32676,32677,32679],{"class":54,"line":80},[52,32678,83],{"class":58},[52,32680,32599],{"class":371},[52,32682,32683,32685,32687,32689],{"class":54,"line":108},[52,32684,7135],{"class":66},[52,32686,24620],{"class":58},[52,32688,5241],{"class":371},[52,32690,729],{"class":58},[52,32692,32693],{"class":54,"line":118},[52,32694,1224],{"class":58},[52,32696,32697,32699,32701],{"class":54,"line":594},[52,32698,121],{"class":58},[52,32700,63],{"class":371},[52,32702,77],{"class":58},[43,32704,32705],{"className":419,"code":32622,"language":420,"meta":48,"style":48},[31,32706,32707,32715,32721,32733,32737],{"__ignoreMap":48},[52,32708,32709,32711,32713],{"class":54,"line":55},[52,32710,59],{"class":58},[52,32712,63],{"class":371},[52,32714,77],{"class":58},[52,32716,32717,32719],{"class":54,"line":80},[52,32718,83],{"class":58},[52,32720,32599],{"class":371},[52,32722,32723,32725,32727,32729,32731],{"class":54,"line":108},[52,32724,7135],{"class":66},[52,32726,70],{"class":231},[52,32728,723],{"class":58},[52,32730,5241],{"class":371},[52,32732,729],{"class":58},[52,32734,32735],{"class":54,"line":118},[52,32736,1224],{"class":58},[52,32738,32739,32741,32743],{"class":54,"line":594},[52,32740,121],{"class":58},[52,32742,63],{"class":371},[52,32744,77],{"class":58},[43,32746,32748],{"className":222,"code":32747,"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,32749,32750,32760,32764,32778,32782,32794,32798],{"__ignoreMap":48},[52,32751,32752,32754,32756,32758],{"class":54,"line":55},[52,32753,232],{"class":231},[52,32755,9005],{"class":58},[52,32757,238],{"class":231},[52,32759,9010],{"class":73},[52,32761,32762],{"class":54,"line":80},[52,32763,597],{"emptyLinePlaceholder":171},[52,32765,32766,32768,32770,32772,32774,32776],{"class":54,"line":108},[52,32767,1721],{"class":231},[52,32769,1724],{"class":371},[52,32771,1727],{"class":231},[52,32773,1730],{"class":231},[52,32775,1733],{"class":66},[52,32777,1736],{"class":58},[52,32779,32780],{"class":54,"line":118},[52,32781,1751],{"class":58},[52,32783,32784,32786,32788,32790,32792],{"class":54,"line":594},[52,32785,1756],{"class":58},[52,32787,21109],{"class":73},[52,32789,5028],{"class":58},[52,32791,5241],{"class":371},[52,32793,1768],{"class":58},[52,32795,32796],{"class":54,"line":600},[52,32797,1773],{"class":58},[52,32799,32800],{"class":54,"line":606},[52,32801,1778],{"class":58},[156,32803,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32805},[32806,32807],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/cursortrail",{"title":113,"description":32568},"docs/components/CursorTrail","wUUBquiR90VnfJRcmSsJKwtWkuTdT_kDTHSJz6U1CeI",{"id":32814,"title":32815,"body":32816,"category":27535,"componentType":20617,"description":32823,"extension":168,"meta":33008,"navigation":171,"path":33009,"requiresChild":27538,"seo":33010,"stem":33011,"__hash__":33012},"components/docs/components/DOMTexture.md","DOMTexture",{"type":8,"value":32817,"toc":33005},[32818,32821,32824,32830,32832,32834,33003],[11,32819,32815],{"id":32820},"domtexture",[15,32822,32823],{},"Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.",[32825,32826],"experimental-warning",{"link-label":32827,"link-url":32828,"message":32829},"View the spec","https://github.com/WICG/html-in-canvas","This component is powered by the WICG html-in-canvas proposal, which is currently only available in Chrome Canary behind a feature flag. It is not suitable for production use and may change as the specification evolves.",[26676,32831],{"component":32815},[23,32833,26688],{"id":26687},[217,32835,32836,32865,32893,32921,32949],{":tabs":1543},[43,32837,32839],{"className":45,"code":32838,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDOMTexture />\n\u003C/Shader>\n",[31,32840,32841,32849,32857],{"__ignoreMap":48},[52,32842,32843,32845,32847],{"class":54,"line":55},[52,32844,59],{"class":58},[52,32846,63],{"class":62},[52,32848,77],{"class":58},[52,32850,32851,32853,32855],{"class":54,"line":80},[52,32852,83],{"class":58},[52,32854,32815],{"class":62},[52,32856,105],{"class":58},[52,32858,32859,32861,32863],{"class":54,"line":108},[52,32860,121],{"class":58},[52,32862,63],{"class":62},[52,32864,77],{"class":58},[43,32866,32867],{"className":360,"code":32838,"language":362,"meta":48,"style":48},[31,32868,32869,32877,32885],{"__ignoreMap":48},[52,32870,32871,32873,32875],{"class":54,"line":55},[52,32872,59],{"class":58},[52,32874,63],{"class":371},[52,32876,77],{"class":58},[52,32878,32879,32881,32883],{"class":54,"line":80},[52,32880,83],{"class":58},[52,32882,32815],{"class":371},[52,32884,105],{"class":58},[52,32886,32887,32889,32891],{"class":54,"line":108},[52,32888,121],{"class":58},[52,32890,63],{"class":371},[52,32892,77],{"class":58},[43,32894,32895],{"className":2507,"code":32838,"language":2509,"meta":48,"style":48},[31,32896,32897,32905,32913],{"__ignoreMap":48},[52,32898,32899,32901,32903],{"class":54,"line":55},[52,32900,59],{"class":58},[52,32902,63],{"class":371},[52,32904,77],{"class":58},[52,32906,32907,32909,32911],{"class":54,"line":80},[52,32908,83],{"class":58},[52,32910,32815],{"class":371},[52,32912,105],{"class":58},[52,32914,32915,32917,32919],{"class":54,"line":108},[52,32916,121],{"class":58},[52,32918,63],{"class":371},[52,32920,77],{"class":58},[43,32922,32923],{"className":419,"code":32838,"language":420,"meta":48,"style":48},[31,32924,32925,32933,32941],{"__ignoreMap":48},[52,32926,32927,32929,32931],{"class":54,"line":55},[52,32928,59],{"class":58},[52,32930,63],{"class":371},[52,32932,77],{"class":58},[52,32934,32935,32937,32939],{"class":54,"line":80},[52,32936,83],{"class":58},[52,32938,32815],{"class":371},[52,32940,105],{"class":58},[52,32942,32943,32945,32947],{"class":54,"line":108},[52,32944,121],{"class":58},[52,32946,63],{"class":371},[52,32948,77],{"class":58},[43,32950,32952],{"className":222,"code":32951,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DOMTexture', props: {} }\n ]\n})\n",[31,32953,32954,32964,32968,32982,32986,32995,32999],{"__ignoreMap":48},[52,32955,32956,32958,32960,32962],{"class":54,"line":55},[52,32957,232],{"class":231},[52,32959,9005],{"class":58},[52,32961,238],{"class":231},[52,32963,9010],{"class":73},[52,32965,32966],{"class":54,"line":80},[52,32967,597],{"emptyLinePlaceholder":171},[52,32969,32970,32972,32974,32976,32978,32980],{"class":54,"line":108},[52,32971,1721],{"class":231},[52,32973,1724],{"class":371},[52,32975,1727],{"class":231},[52,32977,1730],{"class":231},[52,32979,1733],{"class":66},[52,32981,1736],{"class":58},[52,32983,32984],{"class":54,"line":118},[52,32985,1751],{"class":58},[52,32987,32988,32990,32993],{"class":54,"line":594},[52,32989,1756],{"class":58},[52,32991,32992],{"class":73},"'DOMTexture'",[52,32994,2129],{"class":58},[52,32996,32997],{"class":54,"line":600},[52,32998,1773],{"class":58},[52,33000,33001],{"class":54,"line":606},[52,33002,1778],{"class":58},[156,33004,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":33006},[33007],{"id":26687,"depth":80,"text":26688},{},"/docs/components/domtexture",{"title":32815,"description":32823},"docs/components/DOMTexture","3Jc9Zpo0-0aIes_naAYdI0ulUDh5gOfInTZsrpDRdHE",{"id":33014,"title":33015,"body":33016,"category":27535,"componentType":20617,"description":33023,"extension":168,"meta":33208,"navigation":171,"path":33209,"requiresChild":27538,"seo":33210,"stem":33211,"__hash__":33212},"components/docs/components/DiamondGradient.md","DiamondGradient",{"type":8,"value":33017,"toc":33204},[33018,33021,33024,33026,33028,33031,33033,33202],[11,33019,33015],{"id":33020},"diamondgradient",[15,33022,33023],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[26676,33025],{"component":33015},[23,33027,26680],{"id":21278},[26682,33029],{":props":33030},"[{\"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,33032,26688],{"id":26687},[217,33034,33035,33064,33092,33120,33148],{":tabs":1543},[43,33036,33038],{"className":45,"code":33037,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[31,33039,33040,33048,33056],{"__ignoreMap":48},[52,33041,33042,33044,33046],{"class":54,"line":55},[52,33043,59],{"class":58},[52,33045,63],{"class":62},[52,33047,77],{"class":58},[52,33049,33050,33052,33054],{"class":54,"line":80},[52,33051,83],{"class":58},[52,33053,33015],{"class":62},[52,33055,105],{"class":58},[52,33057,33058,33060,33062],{"class":54,"line":108},[52,33059,121],{"class":58},[52,33061,63],{"class":62},[52,33063,77],{"class":58},[43,33065,33066],{"className":360,"code":33037,"language":362,"meta":48,"style":48},[31,33067,33068,33076,33084],{"__ignoreMap":48},[52,33069,33070,33072,33074],{"class":54,"line":55},[52,33071,59],{"class":58},[52,33073,63],{"class":371},[52,33075,77],{"class":58},[52,33077,33078,33080,33082],{"class":54,"line":80},[52,33079,83],{"class":58},[52,33081,33015],{"class":371},[52,33083,105],{"class":58},[52,33085,33086,33088,33090],{"class":54,"line":108},[52,33087,121],{"class":58},[52,33089,63],{"class":371},[52,33091,77],{"class":58},[43,33093,33094],{"className":2507,"code":33037,"language":2509,"meta":48,"style":48},[31,33095,33096,33104,33112],{"__ignoreMap":48},[52,33097,33098,33100,33102],{"class":54,"line":55},[52,33099,59],{"class":58},[52,33101,63],{"class":371},[52,33103,77],{"class":58},[52,33105,33106,33108,33110],{"class":54,"line":80},[52,33107,83],{"class":58},[52,33109,33015],{"class":371},[52,33111,105],{"class":58},[52,33113,33114,33116,33118],{"class":54,"line":108},[52,33115,121],{"class":58},[52,33117,63],{"class":371},[52,33119,77],{"class":58},[43,33121,33122],{"className":419,"code":33037,"language":420,"meta":48,"style":48},[31,33123,33124,33132,33140],{"__ignoreMap":48},[52,33125,33126,33128,33130],{"class":54,"line":55},[52,33127,59],{"class":58},[52,33129,63],{"class":371},[52,33131,77],{"class":58},[52,33133,33134,33136,33138],{"class":54,"line":80},[52,33135,83],{"class":58},[52,33137,33015],{"class":371},[52,33139,105],{"class":58},[52,33141,33142,33144,33146],{"class":54,"line":108},[52,33143,121],{"class":58},[52,33145,63],{"class":371},[52,33147,77],{"class":58},[43,33149,33151],{"className":222,"code":33150,"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,33152,33153,33163,33167,33181,33185,33194,33198],{"__ignoreMap":48},[52,33154,33155,33157,33159,33161],{"class":54,"line":55},[52,33156,232],{"class":231},[52,33158,9005],{"class":58},[52,33160,238],{"class":231},[52,33162,9010],{"class":73},[52,33164,33165],{"class":54,"line":80},[52,33166,597],{"emptyLinePlaceholder":171},[52,33168,33169,33171,33173,33175,33177,33179],{"class":54,"line":108},[52,33170,1721],{"class":231},[52,33172,1724],{"class":371},[52,33174,1727],{"class":231},[52,33176,1730],{"class":231},[52,33178,1733],{"class":66},[52,33180,1736],{"class":58},[52,33182,33183],{"class":54,"line":118},[52,33184,1751],{"class":58},[52,33186,33187,33189,33192],{"class":54,"line":594},[52,33188,1756],{"class":58},[52,33190,33191],{"class":73},"'DiamondGradient'",[52,33193,2129],{"class":58},[52,33195,33196],{"class":54,"line":600},[52,33197,1773],{"class":58},[52,33199,33200],{"class":54,"line":606},[52,33201,1778],{"class":58},[156,33203,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":33205},[33206,33207],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/diamondgradient",{"title":33015,"description":33023},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":33214,"title":33215,"body":33216,"category":27000,"componentType":20623,"description":33223,"extension":168,"meta":33541,"navigation":171,"path":33542,"requiresChild":171,"seo":33543,"stem":33544,"__hash__":33545},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":33217,"toc":33537},[33218,33221,33224,33226,33228,33231,33233,33535],[11,33219,33215],{"id":33220},"diffuseblur",[15,33222,33223],{},"Grain-like pixel displacement at random",[26676,33225],{"component":33215},[23,33227,26680],{"id":21278},[26682,33229],{":props":33230},"[{\"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,33232,26688],{"id":26687},[217,33234,33235,33292,33351,33407,33465],{":tabs":1543},[43,33236,33238],{"className":45,"code":33237,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33239,33240,33248,33255,33264,33268,33276,33284],{"__ignoreMap":48},[52,33241,33242,33244,33246],{"class":54,"line":55},[52,33243,59],{"class":58},[52,33245,63],{"class":62},[52,33247,77],{"class":58},[52,33249,33250,33252],{"class":54,"line":80},[52,33251,83],{"class":58},[52,33253,33254],{"class":62},"DiffuseBlur\n",[52,33256,33257,33259,33261],{"class":54,"line":108},[52,33258,17644],{"class":66},[52,33260,70],{"class":58},[52,33262,33263],{"class":73},"\"30\"\n",[52,33265,33266],{"class":54,"line":118},[52,33267,26724],{"class":58},[52,33269,33270,33272,33274],{"class":54,"line":594},[52,33271,2213],{"class":58},[52,33273,2216],{"class":62},[52,33275,105],{"class":58},[52,33277,33278,33280,33282],{"class":54,"line":600},[52,33279,2230],{"class":58},[52,33281,33215],{"class":62},[52,33283,77],{"class":58},[52,33285,33286,33288,33290],{"class":54,"line":606},[52,33287,121],{"class":58},[52,33289,63],{"class":62},[52,33291,77],{"class":58},[43,33293,33295],{"className":360,"code":33294,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33296,33297,33305,33311,33323,33327,33335,33343],{"__ignoreMap":48},[52,33298,33299,33301,33303],{"class":54,"line":55},[52,33300,59],{"class":58},[52,33302,63],{"class":371},[52,33304,77],{"class":58},[52,33306,33307,33309],{"class":54,"line":80},[52,33308,83],{"class":58},[52,33310,33254],{"class":371},[52,33312,33313,33315,33317,33319,33321],{"class":54,"line":108},[52,33314,17755],{"class":66},[52,33316,70],{"class":231},[52,33318,723],{"class":58},[52,33320,12968],{"class":371},[52,33322,729],{"class":58},[52,33324,33325],{"class":54,"line":118},[52,33326,26724],{"class":58},[52,33328,33329,33331,33333],{"class":54,"line":594},[52,33330,2213],{"class":58},[52,33332,2216],{"class":371},[52,33334,105],{"class":58},[52,33336,33337,33339,33341],{"class":54,"line":600},[52,33338,2230],{"class":58},[52,33340,33215],{"class":371},[52,33342,77],{"class":58},[52,33344,33345,33347,33349],{"class":54,"line":606},[52,33346,121],{"class":58},[52,33348,63],{"class":371},[52,33350,77],{"class":58},[43,33352,33353],{"className":2507,"code":33294,"language":2509,"meta":48,"style":48},[31,33354,33355,33363,33369,33379,33383,33391,33399],{"__ignoreMap":48},[52,33356,33357,33359,33361],{"class":54,"line":55},[52,33358,59],{"class":58},[52,33360,63],{"class":371},[52,33362,77],{"class":58},[52,33364,33365,33367],{"class":54,"line":80},[52,33366,83],{"class":58},[52,33368,33254],{"class":371},[52,33370,33371,33373,33375,33377],{"class":54,"line":108},[52,33372,17755],{"class":66},[52,33374,24620],{"class":58},[52,33376,12968],{"class":371},[52,33378,729],{"class":58},[52,33380,33381],{"class":54,"line":118},[52,33382,26724],{"class":58},[52,33384,33385,33387,33389],{"class":54,"line":594},[52,33386,2213],{"class":58},[52,33388,2216],{"class":371},[52,33390,105],{"class":58},[52,33392,33393,33395,33397],{"class":54,"line":600},[52,33394,2230],{"class":58},[52,33396,33215],{"class":371},[52,33398,77],{"class":58},[52,33400,33401,33403,33405],{"class":54,"line":606},[52,33402,121],{"class":58},[52,33404,63],{"class":371},[52,33406,77],{"class":58},[43,33408,33409],{"className":419,"code":33294,"language":420,"meta":48,"style":48},[31,33410,33411,33419,33425,33437,33441,33449,33457],{"__ignoreMap":48},[52,33412,33413,33415,33417],{"class":54,"line":55},[52,33414,59],{"class":58},[52,33416,63],{"class":371},[52,33418,77],{"class":58},[52,33420,33421,33423],{"class":54,"line":80},[52,33422,83],{"class":58},[52,33424,33254],{"class":371},[52,33426,33427,33429,33431,33433,33435],{"class":54,"line":108},[52,33428,17755],{"class":66},[52,33430,70],{"class":231},[52,33432,723],{"class":58},[52,33434,12968],{"class":371},[52,33436,729],{"class":58},[52,33438,33439],{"class":54,"line":118},[52,33440,26724],{"class":58},[52,33442,33443,33445,33447],{"class":54,"line":594},[52,33444,2213],{"class":58},[52,33446,2216],{"class":371},[52,33448,105],{"class":58},[52,33450,33451,33453,33455],{"class":54,"line":600},[52,33452,2230],{"class":58},[52,33454,33215],{"class":371},[52,33456,77],{"class":58},[52,33458,33459,33461,33463],{"class":54,"line":606},[52,33460,121],{"class":58},[52,33462,63],{"class":371},[52,33464,77],{"class":58},[43,33466,33468],{"className":222,"code":33467,"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,33469,33470,33480,33484,33498,33502,33515,33523,33527,33531],{"__ignoreMap":48},[52,33471,33472,33474,33476,33478],{"class":54,"line":55},[52,33473,232],{"class":231},[52,33475,9005],{"class":58},[52,33477,238],{"class":231},[52,33479,9010],{"class":73},[52,33481,33482],{"class":54,"line":80},[52,33483,597],{"emptyLinePlaceholder":171},[52,33485,33486,33488,33490,33492,33494,33496],{"class":54,"line":108},[52,33487,1721],{"class":231},[52,33489,1724],{"class":371},[52,33491,1727],{"class":231},[52,33493,1730],{"class":231},[52,33495,1733],{"class":66},[52,33497,1736],{"class":58},[52,33499,33500],{"class":54,"line":118},[52,33501,1751],{"class":58},[52,33503,33504,33506,33509,33511,33513],{"class":54,"line":594},[52,33505,1756],{"class":58},[52,33507,33508],{"class":73},"'DiffuseBlur'",[52,33510,26969],{"class":58},[52,33512,12968],{"class":371},[52,33514,5033],{"class":58},[52,33516,33517,33519,33521],{"class":54,"line":600},[52,33518,4501],{"class":58},[52,33520,2869],{"class":73},[52,33522,2129],{"class":58},[52,33524,33525],{"class":54,"line":606},[52,33526,4518],{"class":58},[52,33528,33529],{"class":54,"line":653},[52,33530,1773],{"class":58},[52,33532,33533],{"class":54,"line":662},[52,33534,1778],{"class":58},[156,33536,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33538},[33539,33540],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/diffuseblur",{"title":33215,"description":33223},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":33547,"title":33548,"body":33549,"category":27278,"componentType":20623,"description":33556,"extension":168,"meta":33817,"navigation":171,"path":33818,"requiresChild":171,"seo":33819,"stem":33820,"__hash__":33821},"components/docs/components/Dither.md","Dither",{"type":8,"value":33550,"toc":33813},[33551,33554,33557,33559,33561,33564,33566,33811],[11,33552,33548],{"id":33553},"dither",[15,33555,33556],{},"Dithering effect with multiple pattern options",[26676,33558],{"component":33548},[23,33560,26680],{"id":21278},[26682,33562],{":props":33563},"[{\"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,33565,26688],{"id":26687},[217,33567,33568,33613,33657,33701,33745],{":tabs":1543},[43,33569,33571],{"className":45,"code":33570,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[31,33572,33573,33581,33589,33597,33605],{"__ignoreMap":48},[52,33574,33575,33577,33579],{"class":54,"line":55},[52,33576,59],{"class":58},[52,33578,63],{"class":62},[52,33580,77],{"class":58},[52,33582,33583,33585,33587],{"class":54,"line":80},[52,33584,83],{"class":58},[52,33586,33548],{"class":62},[52,33588,77],{"class":58},[52,33590,33591,33593,33595],{"class":54,"line":108},[52,33592,2213],{"class":58},[52,33594,2216],{"class":62},[52,33596,105],{"class":58},[52,33598,33599,33601,33603],{"class":54,"line":118},[52,33600,2230],{"class":58},[52,33602,33548],{"class":62},[52,33604,77],{"class":58},[52,33606,33607,33609,33611],{"class":54,"line":594},[52,33608,121],{"class":58},[52,33610,63],{"class":62},[52,33612,77],{"class":58},[43,33614,33615],{"className":360,"code":33570,"language":362,"meta":48,"style":48},[31,33616,33617,33625,33633,33641,33649],{"__ignoreMap":48},[52,33618,33619,33621,33623],{"class":54,"line":55},[52,33620,59],{"class":58},[52,33622,63],{"class":371},[52,33624,77],{"class":58},[52,33626,33627,33629,33631],{"class":54,"line":80},[52,33628,83],{"class":58},[52,33630,33548],{"class":371},[52,33632,77],{"class":58},[52,33634,33635,33637,33639],{"class":54,"line":108},[52,33636,2213],{"class":58},[52,33638,2216],{"class":371},[52,33640,105],{"class":58},[52,33642,33643,33645,33647],{"class":54,"line":118},[52,33644,2230],{"class":58},[52,33646,33548],{"class":371},[52,33648,77],{"class":58},[52,33650,33651,33653,33655],{"class":54,"line":594},[52,33652,121],{"class":58},[52,33654,63],{"class":371},[52,33656,77],{"class":58},[43,33658,33659],{"className":2507,"code":33570,"language":2509,"meta":48,"style":48},[31,33660,33661,33669,33677,33685,33693],{"__ignoreMap":48},[52,33662,33663,33665,33667],{"class":54,"line":55},[52,33664,59],{"class":58},[52,33666,63],{"class":371},[52,33668,77],{"class":58},[52,33670,33671,33673,33675],{"class":54,"line":80},[52,33672,83],{"class":58},[52,33674,33548],{"class":371},[52,33676,77],{"class":58},[52,33678,33679,33681,33683],{"class":54,"line":108},[52,33680,2213],{"class":58},[52,33682,2216],{"class":371},[52,33684,105],{"class":58},[52,33686,33687,33689,33691],{"class":54,"line":118},[52,33688,2230],{"class":58},[52,33690,33548],{"class":371},[52,33692,77],{"class":58},[52,33694,33695,33697,33699],{"class":54,"line":594},[52,33696,121],{"class":58},[52,33698,63],{"class":371},[52,33700,77],{"class":58},[43,33702,33703],{"className":419,"code":33570,"language":420,"meta":48,"style":48},[31,33704,33705,33713,33721,33729,33737],{"__ignoreMap":48},[52,33706,33707,33709,33711],{"class":54,"line":55},[52,33708,59],{"class":58},[52,33710,63],{"class":371},[52,33712,77],{"class":58},[52,33714,33715,33717,33719],{"class":54,"line":80},[52,33716,83],{"class":58},[52,33718,33548],{"class":371},[52,33720,77],{"class":58},[52,33722,33723,33725,33727],{"class":54,"line":108},[52,33724,2213],{"class":58},[52,33726,2216],{"class":371},[52,33728,105],{"class":58},[52,33730,33731,33733,33735],{"class":54,"line":118},[52,33732,2230],{"class":58},[52,33734,33548],{"class":371},[52,33736,77],{"class":58},[52,33738,33739,33741,33743],{"class":54,"line":594},[52,33740,121],{"class":58},[52,33742,63],{"class":371},[52,33744,77],{"class":58},[43,33746,33748],{"className":222,"code":33747,"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,33749,33750,33760,33764,33778,33782,33791,33799,33803,33807],{"__ignoreMap":48},[52,33751,33752,33754,33756,33758],{"class":54,"line":55},[52,33753,232],{"class":231},[52,33755,9005],{"class":58},[52,33757,238],{"class":231},[52,33759,9010],{"class":73},[52,33761,33762],{"class":54,"line":80},[52,33763,597],{"emptyLinePlaceholder":171},[52,33765,33766,33768,33770,33772,33774,33776],{"class":54,"line":108},[52,33767,1721],{"class":231},[52,33769,1724],{"class":371},[52,33771,1727],{"class":231},[52,33773,1730],{"class":231},[52,33775,1733],{"class":66},[52,33777,1736],{"class":58},[52,33779,33780],{"class":54,"line":118},[52,33781,1751],{"class":58},[52,33783,33784,33786,33789],{"class":54,"line":594},[52,33785,1756],{"class":58},[52,33787,33788],{"class":73},"'Dither'",[52,33790,4496],{"class":58},[52,33792,33793,33795,33797],{"class":54,"line":600},[52,33794,4501],{"class":58},[52,33796,2869],{"class":73},[52,33798,2129],{"class":58},[52,33800,33801],{"class":54,"line":606},[52,33802,4518],{"class":58},[52,33804,33805],{"class":54,"line":653},[52,33806,1773],{"class":58},[52,33808,33809],{"class":54,"line":662},[52,33810,1778],{"class":58},[156,33812,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":33814},[33815,33816],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/dither",{"title":33548,"description":33556},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":33823,"title":33824,"body":33825,"category":27535,"componentType":20617,"description":33832,"extension":168,"meta":34060,"navigation":171,"path":34061,"requiresChild":27538,"seo":34062,"stem":34063,"__hash__":34064},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":33826,"toc":34056},[33827,33830,33833,33835,33837,33840,33842,34054],[11,33828,33824],{"id":33829},"dotgrid",[15,33831,33832],{},"Grid of dots with optional twinkling animation",[26676,33834],{"component":33824},[23,33836,26680],{"id":21278},[26682,33838],{":props":33839},"[{\"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,33841,26688],{"id":26687},[217,33843,33844,33883,33921,33959,33997],{":tabs":1543},[43,33845,33847],{"className":45,"code":33846,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,33848,33849,33857,33863,33871,33875],{"__ignoreMap":48},[52,33850,33851,33853,33855],{"class":54,"line":55},[52,33852,59],{"class":58},[52,33854,63],{"class":62},[52,33856,77],{"class":58},[52,33858,33859,33861],{"class":54,"line":80},[52,33860,83],{"class":58},[52,33862,16778],{"class":62},[52,33864,33865,33867,33869],{"class":54,"line":108},[52,33866,7125],{"class":66},[52,33868,70],{"class":58},[52,33870,7081],{"class":73},[52,33872,33873],{"class":54,"line":118},[52,33874,1224],{"class":58},[52,33876,33877,33879,33881],{"class":54,"line":594},[52,33878,121],{"class":58},[52,33880,63],{"class":62},[52,33882,77],{"class":58},[43,33884,33885],{"className":360,"code":33846,"language":362,"meta":48,"style":48},[31,33886,33887,33895,33901,33909,33913],{"__ignoreMap":48},[52,33888,33889,33891,33893],{"class":54,"line":55},[52,33890,59],{"class":58},[52,33892,63],{"class":371},[52,33894,77],{"class":58},[52,33896,33897,33899],{"class":54,"line":80},[52,33898,83],{"class":58},[52,33900,16778],{"class":371},[52,33902,33903,33905,33907],{"class":54,"line":108},[52,33904,7125],{"class":66},[52,33906,70],{"class":231},[52,33908,7081],{"class":73},[52,33910,33911],{"class":54,"line":118},[52,33912,1224],{"class":58},[52,33914,33915,33917,33919],{"class":54,"line":594},[52,33916,121],{"class":58},[52,33918,63],{"class":371},[52,33920,77],{"class":58},[43,33922,33923],{"className":2507,"code":33846,"language":2509,"meta":48,"style":48},[31,33924,33925,33933,33939,33947,33951],{"__ignoreMap":48},[52,33926,33927,33929,33931],{"class":54,"line":55},[52,33928,59],{"class":58},[52,33930,63],{"class":371},[52,33932,77],{"class":58},[52,33934,33935,33937],{"class":54,"line":80},[52,33936,83],{"class":58},[52,33938,16778],{"class":371},[52,33940,33941,33943,33945],{"class":54,"line":108},[52,33942,7125],{"class":66},[52,33944,70],{"class":58},[52,33946,7081],{"class":73},[52,33948,33949],{"class":54,"line":118},[52,33950,1224],{"class":58},[52,33952,33953,33955,33957],{"class":54,"line":594},[52,33954,121],{"class":58},[52,33956,63],{"class":371},[52,33958,77],{"class":58},[43,33960,33961],{"className":419,"code":33846,"language":420,"meta":48,"style":48},[31,33962,33963,33971,33977,33985,33989],{"__ignoreMap":48},[52,33964,33965,33967,33969],{"class":54,"line":55},[52,33966,59],{"class":58},[52,33968,63],{"class":371},[52,33970,77],{"class":58},[52,33972,33973,33975],{"class":54,"line":80},[52,33974,83],{"class":58},[52,33976,16778],{"class":371},[52,33978,33979,33981,33983],{"class":54,"line":108},[52,33980,7125],{"class":66},[52,33982,70],{"class":231},[52,33984,7081],{"class":73},[52,33986,33987],{"class":54,"line":118},[52,33988,1224],{"class":58},[52,33990,33991,33993,33995],{"class":54,"line":594},[52,33992,121],{"class":58},[52,33994,63],{"class":371},[52,33996,77],{"class":58},[43,33998,34000],{"className":222,"code":33999,"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,34001,34002,34012,34016,34030,34034,34046,34050],{"__ignoreMap":48},[52,34003,34004,34006,34008,34010],{"class":54,"line":55},[52,34005,232],{"class":231},[52,34007,9005],{"class":58},[52,34009,238],{"class":231},[52,34011,9010],{"class":73},[52,34013,34014],{"class":54,"line":80},[52,34015,597],{"emptyLinePlaceholder":171},[52,34017,34018,34020,34022,34024,34026,34028],{"class":54,"line":108},[52,34019,1721],{"class":231},[52,34021,1724],{"class":371},[52,34023,1727],{"class":231},[52,34025,1730],{"class":231},[52,34027,1733],{"class":66},[52,34029,1736],{"class":58},[52,34031,34032],{"class":54,"line":118},[52,34033,1751],{"class":58},[52,34035,34036,34038,34040,34042,34044],{"class":54,"line":594},[52,34037,1756],{"class":58},[52,34039,17329],{"class":73},[52,34041,1762],{"class":58},[52,34043,7660],{"class":73},[52,34045,1768],{"class":58},[52,34047,34048],{"class":54,"line":600},[52,34049,1773],{"class":58},[52,34051,34052],{"class":54,"line":606},[52,34053,1778],{"class":58},[156,34055,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34057},[34058,34059],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/dotgrid",{"title":33824,"description":33832},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":34066,"title":34067,"body":34068,"category":27278,"componentType":20623,"description":34075,"extension":168,"meta":34429,"navigation":171,"path":34430,"requiresChild":171,"seo":34431,"stem":34432,"__hash__":34433},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":34069,"toc":34425},[34070,34073,34076,34078,34080,34083,34085,34423],[11,34071,34067],{"id":34072},"dropshadow",[15,34074,34075],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[26676,34077],{"component":34067},[23,34079,26680],{"id":21278},[26682,34081],{":props":34082},"[{\"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,34084,26688],{"id":26687},[217,34086,34087,34151,34218,34282,34348],{":tabs":1543},[43,34088,34090],{"className":45,"code":34089,"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,34091,34092,34100,34107,34115,34123,34127,34135,34143],{"__ignoreMap":48},[52,34093,34094,34096,34098],{"class":54,"line":55},[52,34095,59],{"class":58},[52,34097,63],{"class":62},[52,34099,77],{"class":58},[52,34101,34102,34104],{"class":54,"line":80},[52,34103,83],{"class":58},[52,34105,34106],{"class":62},"DropShadow\n",[52,34108,34109,34111,34113],{"class":54,"line":108},[52,34110,7125],{"class":66},[52,34112,70],{"class":58},[52,34114,16749],{"class":73},[52,34116,34117,34119,34121],{"class":54,"line":118},[52,34118,17644],{"class":66},[52,34120,70],{"class":58},[52,34122,32237],{"class":73},[52,34124,34125],{"class":54,"line":594},[52,34126,26724],{"class":58},[52,34128,34129,34131,34133],{"class":54,"line":600},[52,34130,2213],{"class":58},[52,34132,2216],{"class":62},[52,34134,105],{"class":58},[52,34136,34137,34139,34141],{"class":54,"line":606},[52,34138,2230],{"class":58},[52,34140,34067],{"class":62},[52,34142,77],{"class":58},[52,34144,34145,34147,34149],{"class":54,"line":653},[52,34146,121],{"class":58},[52,34148,63],{"class":62},[52,34150,77],{"class":58},[43,34152,34154],{"className":360,"code":34153,"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,34155,34156,34164,34170,34178,34190,34194,34202,34210],{"__ignoreMap":48},[52,34157,34158,34160,34162],{"class":54,"line":55},[52,34159,59],{"class":58},[52,34161,63],{"class":371},[52,34163,77],{"class":58},[52,34165,34166,34168],{"class":54,"line":80},[52,34167,83],{"class":58},[52,34169,34106],{"class":371},[52,34171,34172,34174,34176],{"class":54,"line":108},[52,34173,7125],{"class":66},[52,34175,70],{"class":231},[52,34177,16749],{"class":73},[52,34179,34180,34182,34184,34186,34188],{"class":54,"line":118},[52,34181,17755],{"class":66},[52,34183,70],{"class":231},[52,34185,723],{"class":58},[52,34187,5241],{"class":371},[52,34189,729],{"class":58},[52,34191,34192],{"class":54,"line":594},[52,34193,26724],{"class":58},[52,34195,34196,34198,34200],{"class":54,"line":600},[52,34197,2213],{"class":58},[52,34199,2216],{"class":371},[52,34201,105],{"class":58},[52,34203,34204,34206,34208],{"class":54,"line":606},[52,34205,2230],{"class":58},[52,34207,34067],{"class":371},[52,34209,77],{"class":58},[52,34211,34212,34214,34216],{"class":54,"line":653},[52,34213,121],{"class":58},[52,34215,63],{"class":371},[52,34217,77],{"class":58},[43,34219,34220],{"className":2507,"code":34153,"language":2509,"meta":48,"style":48},[31,34221,34222,34230,34236,34244,34254,34258,34266,34274],{"__ignoreMap":48},[52,34223,34224,34226,34228],{"class":54,"line":55},[52,34225,59],{"class":58},[52,34227,63],{"class":371},[52,34229,77],{"class":58},[52,34231,34232,34234],{"class":54,"line":80},[52,34233,83],{"class":58},[52,34235,34106],{"class":371},[52,34237,34238,34240,34242],{"class":54,"line":108},[52,34239,7125],{"class":66},[52,34241,70],{"class":58},[52,34243,16749],{"class":73},[52,34245,34246,34248,34250,34252],{"class":54,"line":118},[52,34247,17755],{"class":66},[52,34249,24620],{"class":58},[52,34251,5241],{"class":371},[52,34253,729],{"class":58},[52,34255,34256],{"class":54,"line":594},[52,34257,26724],{"class":58},[52,34259,34260,34262,34264],{"class":54,"line":600},[52,34261,2213],{"class":58},[52,34263,2216],{"class":371},[52,34265,105],{"class":58},[52,34267,34268,34270,34272],{"class":54,"line":606},[52,34269,2230],{"class":58},[52,34271,34067],{"class":371},[52,34273,77],{"class":58},[52,34275,34276,34278,34280],{"class":54,"line":653},[52,34277,121],{"class":58},[52,34279,63],{"class":371},[52,34281,77],{"class":58},[43,34283,34284],{"className":419,"code":34153,"language":420,"meta":48,"style":48},[31,34285,34286,34294,34300,34308,34320,34324,34332,34340],{"__ignoreMap":48},[52,34287,34288,34290,34292],{"class":54,"line":55},[52,34289,59],{"class":58},[52,34291,63],{"class":371},[52,34293,77],{"class":58},[52,34295,34296,34298],{"class":54,"line":80},[52,34297,83],{"class":58},[52,34299,34106],{"class":371},[52,34301,34302,34304,34306],{"class":54,"line":108},[52,34303,7125],{"class":66},[52,34305,70],{"class":231},[52,34307,16749],{"class":73},[52,34309,34310,34312,34314,34316,34318],{"class":54,"line":118},[52,34311,17755],{"class":66},[52,34313,70],{"class":231},[52,34315,723],{"class":58},[52,34317,5241],{"class":371},[52,34319,729],{"class":58},[52,34321,34322],{"class":54,"line":594},[52,34323,26724],{"class":58},[52,34325,34326,34328,34330],{"class":54,"line":600},[52,34327,2213],{"class":58},[52,34329,2216],{"class":371},[52,34331,105],{"class":58},[52,34333,34334,34336,34338],{"class":54,"line":606},[52,34335,2230],{"class":58},[52,34337,34067],{"class":371},[52,34339,77],{"class":58},[52,34341,34342,34344,34346],{"class":54,"line":653},[52,34343,121],{"class":58},[52,34345,63],{"class":371},[52,34347,77],{"class":58},[43,34349,34351],{"className":222,"code":34350,"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,34352,34353,34363,34367,34381,34385,34403,34411,34415,34419],{"__ignoreMap":48},[52,34354,34355,34357,34359,34361],{"class":54,"line":55},[52,34356,232],{"class":231},[52,34358,9005],{"class":58},[52,34360,238],{"class":231},[52,34362,9010],{"class":73},[52,34364,34365],{"class":54,"line":80},[52,34366,597],{"emptyLinePlaceholder":171},[52,34368,34369,34371,34373,34375,34377,34379],{"class":54,"line":108},[52,34370,1721],{"class":231},[52,34372,1724],{"class":371},[52,34374,1727],{"class":231},[52,34376,1730],{"class":231},[52,34378,1733],{"class":66},[52,34380,1736],{"class":58},[52,34382,34383],{"class":54,"line":118},[52,34384,1751],{"class":58},[52,34386,34387,34389,34392,34394,34396,34399,34401],{"class":54,"line":594},[52,34388,1756],{"class":58},[52,34390,34391],{"class":73},"'DropShadow'",[52,34393,1762],{"class":58},[52,34395,17308],{"class":73},[52,34397,34398],{"class":58},", intensity: ",[52,34400,5241],{"class":371},[52,34402,5033],{"class":58},[52,34404,34405,34407,34409],{"class":54,"line":600},[52,34406,4501],{"class":58},[52,34408,2869],{"class":73},[52,34410,2129],{"class":58},[52,34412,34413],{"class":54,"line":606},[52,34414,4518],{"class":58},[52,34416,34417],{"class":54,"line":653},[52,34418,1773],{"class":58},[52,34420,34421],{"class":54,"line":662},[52,34422,1778],{"class":58},[156,34424,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34426},[34427,34428],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/dropshadow",{"title":34067,"description":34075},"docs/components/DropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":34435,"title":34436,"body":34437,"category":28546,"componentType":20623,"description":34444,"extension":168,"meta":34705,"navigation":171,"path":34706,"requiresChild":171,"seo":34707,"stem":34708,"__hash__":34709},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":34438,"toc":34701},[34439,34442,34445,34447,34449,34452,34454,34699],[11,34440,34436],{"id":34441},"duotone",[15,34443,34444],{},"Map colors to two tones based on luminance",[26676,34446],{"component":34436},[23,34448,26680],{"id":21278},[26682,34450],{":props":34451},"[{\"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,34453,26688],{"id":26687},[217,34455,34456,34501,34545,34589,34633],{":tabs":1543},[43,34457,34459],{"className":45,"code":34458,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[31,34460,34461,34469,34477,34485,34493],{"__ignoreMap":48},[52,34462,34463,34465,34467],{"class":54,"line":55},[52,34464,59],{"class":58},[52,34466,63],{"class":62},[52,34468,77],{"class":58},[52,34470,34471,34473,34475],{"class":54,"line":80},[52,34472,83],{"class":58},[52,34474,34436],{"class":62},[52,34476,77],{"class":58},[52,34478,34479,34481,34483],{"class":54,"line":108},[52,34480,2213],{"class":58},[52,34482,2216],{"class":62},[52,34484,105],{"class":58},[52,34486,34487,34489,34491],{"class":54,"line":118},[52,34488,2230],{"class":58},[52,34490,34436],{"class":62},[52,34492,77],{"class":58},[52,34494,34495,34497,34499],{"class":54,"line":594},[52,34496,121],{"class":58},[52,34498,63],{"class":62},[52,34500,77],{"class":58},[43,34502,34503],{"className":360,"code":34458,"language":362,"meta":48,"style":48},[31,34504,34505,34513,34521,34529,34537],{"__ignoreMap":48},[52,34506,34507,34509,34511],{"class":54,"line":55},[52,34508,59],{"class":58},[52,34510,63],{"class":371},[52,34512,77],{"class":58},[52,34514,34515,34517,34519],{"class":54,"line":80},[52,34516,83],{"class":58},[52,34518,34436],{"class":371},[52,34520,77],{"class":58},[52,34522,34523,34525,34527],{"class":54,"line":108},[52,34524,2213],{"class":58},[52,34526,2216],{"class":371},[52,34528,105],{"class":58},[52,34530,34531,34533,34535],{"class":54,"line":118},[52,34532,2230],{"class":58},[52,34534,34436],{"class":371},[52,34536,77],{"class":58},[52,34538,34539,34541,34543],{"class":54,"line":594},[52,34540,121],{"class":58},[52,34542,63],{"class":371},[52,34544,77],{"class":58},[43,34546,34547],{"className":2507,"code":34458,"language":2509,"meta":48,"style":48},[31,34548,34549,34557,34565,34573,34581],{"__ignoreMap":48},[52,34550,34551,34553,34555],{"class":54,"line":55},[52,34552,59],{"class":58},[52,34554,63],{"class":371},[52,34556,77],{"class":58},[52,34558,34559,34561,34563],{"class":54,"line":80},[52,34560,83],{"class":58},[52,34562,34436],{"class":371},[52,34564,77],{"class":58},[52,34566,34567,34569,34571],{"class":54,"line":108},[52,34568,2213],{"class":58},[52,34570,2216],{"class":371},[52,34572,105],{"class":58},[52,34574,34575,34577,34579],{"class":54,"line":118},[52,34576,2230],{"class":58},[52,34578,34436],{"class":371},[52,34580,77],{"class":58},[52,34582,34583,34585,34587],{"class":54,"line":594},[52,34584,121],{"class":58},[52,34586,63],{"class":371},[52,34588,77],{"class":58},[43,34590,34591],{"className":419,"code":34458,"language":420,"meta":48,"style":48},[31,34592,34593,34601,34609,34617,34625],{"__ignoreMap":48},[52,34594,34595,34597,34599],{"class":54,"line":55},[52,34596,59],{"class":58},[52,34598,63],{"class":371},[52,34600,77],{"class":58},[52,34602,34603,34605,34607],{"class":54,"line":80},[52,34604,83],{"class":58},[52,34606,34436],{"class":371},[52,34608,77],{"class":58},[52,34610,34611,34613,34615],{"class":54,"line":108},[52,34612,2213],{"class":58},[52,34614,2216],{"class":371},[52,34616,105],{"class":58},[52,34618,34619,34621,34623],{"class":54,"line":118},[52,34620,2230],{"class":58},[52,34622,34436],{"class":371},[52,34624,77],{"class":58},[52,34626,34627,34629,34631],{"class":54,"line":594},[52,34628,121],{"class":58},[52,34630,63],{"class":371},[52,34632,77],{"class":58},[43,34634,34636],{"className":222,"code":34635,"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,34637,34638,34648,34652,34666,34670,34679,34687,34691,34695],{"__ignoreMap":48},[52,34639,34640,34642,34644,34646],{"class":54,"line":55},[52,34641,232],{"class":231},[52,34643,9005],{"class":58},[52,34645,238],{"class":231},[52,34647,9010],{"class":73},[52,34649,34650],{"class":54,"line":80},[52,34651,597],{"emptyLinePlaceholder":171},[52,34653,34654,34656,34658,34660,34662,34664],{"class":54,"line":108},[52,34655,1721],{"class":231},[52,34657,1724],{"class":371},[52,34659,1727],{"class":231},[52,34661,1730],{"class":231},[52,34663,1733],{"class":66},[52,34665,1736],{"class":58},[52,34667,34668],{"class":54,"line":118},[52,34669,1751],{"class":58},[52,34671,34672,34674,34677],{"class":54,"line":594},[52,34673,1756],{"class":58},[52,34675,34676],{"class":73},"'Duotone'",[52,34678,4496],{"class":58},[52,34680,34681,34683,34685],{"class":54,"line":600},[52,34682,4501],{"class":58},[52,34684,2869],{"class":73},[52,34686,2129],{"class":58},[52,34688,34689],{"class":54,"line":606},[52,34690,4518],{"class":58},[52,34692,34693],{"class":54,"line":653},[52,34694,1773],{"class":58},[52,34696,34697],{"class":54,"line":662},[52,34698,1778],{"class":58},[156,34700,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":34702},[34703,34704],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/duotone",{"title":34436,"description":34444},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":34711,"title":34712,"body":34713,"category":30502,"componentType":20617,"description":34720,"extension":168,"meta":34950,"navigation":171,"path":34951,"requiresChild":27538,"seo":34952,"stem":34953,"__hash__":34954},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":34714,"toc":34946},[34715,34718,34721,34723,34725,34728,34730,34944],[11,34716,34712],{"id":34717},"ellipse",[15,34719,34720],{},"Ellipse with independently adjustable horizontal and vertical radii",[26676,34722],{"component":34712},[23,34724,26680],{"id":21278},[26682,34726],{":props":34727},"[{\"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,34729,26688],{"id":26687},[217,34731,34732,34772,34810,34848,34886],{":tabs":1543},[43,34733,34735],{"className":45,"code":34734,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,34736,34737,34745,34752,34760,34764],{"__ignoreMap":48},[52,34738,34739,34741,34743],{"class":54,"line":55},[52,34740,59],{"class":58},[52,34742,63],{"class":62},[52,34744,77],{"class":58},[52,34746,34747,34749],{"class":54,"line":80},[52,34748,83],{"class":58},[52,34750,34751],{"class":62},"Ellipse\n",[52,34753,34754,34756,34758],{"class":54,"line":108},[52,34755,7125],{"class":66},[52,34757,70],{"class":58},[52,34759,7081],{"class":73},[52,34761,34762],{"class":54,"line":118},[52,34763,1224],{"class":58},[52,34765,34766,34768,34770],{"class":54,"line":594},[52,34767,121],{"class":58},[52,34769,63],{"class":62},[52,34771,77],{"class":58},[43,34773,34774],{"className":360,"code":34734,"language":362,"meta":48,"style":48},[31,34775,34776,34784,34790,34798,34802],{"__ignoreMap":48},[52,34777,34778,34780,34782],{"class":54,"line":55},[52,34779,59],{"class":58},[52,34781,63],{"class":371},[52,34783,77],{"class":58},[52,34785,34786,34788],{"class":54,"line":80},[52,34787,83],{"class":58},[52,34789,34751],{"class":371},[52,34791,34792,34794,34796],{"class":54,"line":108},[52,34793,7125],{"class":66},[52,34795,70],{"class":231},[52,34797,7081],{"class":73},[52,34799,34800],{"class":54,"line":118},[52,34801,1224],{"class":58},[52,34803,34804,34806,34808],{"class":54,"line":594},[52,34805,121],{"class":58},[52,34807,63],{"class":371},[52,34809,77],{"class":58},[43,34811,34812],{"className":2507,"code":34734,"language":2509,"meta":48,"style":48},[31,34813,34814,34822,34828,34836,34840],{"__ignoreMap":48},[52,34815,34816,34818,34820],{"class":54,"line":55},[52,34817,59],{"class":58},[52,34819,63],{"class":371},[52,34821,77],{"class":58},[52,34823,34824,34826],{"class":54,"line":80},[52,34825,83],{"class":58},[52,34827,34751],{"class":371},[52,34829,34830,34832,34834],{"class":54,"line":108},[52,34831,7125],{"class":66},[52,34833,70],{"class":58},[52,34835,7081],{"class":73},[52,34837,34838],{"class":54,"line":118},[52,34839,1224],{"class":58},[52,34841,34842,34844,34846],{"class":54,"line":594},[52,34843,121],{"class":58},[52,34845,63],{"class":371},[52,34847,77],{"class":58},[43,34849,34850],{"className":419,"code":34734,"language":420,"meta":48,"style":48},[31,34851,34852,34860,34866,34874,34878],{"__ignoreMap":48},[52,34853,34854,34856,34858],{"class":54,"line":55},[52,34855,59],{"class":58},[52,34857,63],{"class":371},[52,34859,77],{"class":58},[52,34861,34862,34864],{"class":54,"line":80},[52,34863,83],{"class":58},[52,34865,34751],{"class":371},[52,34867,34868,34870,34872],{"class":54,"line":108},[52,34869,7125],{"class":66},[52,34871,70],{"class":231},[52,34873,7081],{"class":73},[52,34875,34876],{"class":54,"line":118},[52,34877,1224],{"class":58},[52,34879,34880,34882,34884],{"class":54,"line":594},[52,34881,121],{"class":58},[52,34883,63],{"class":371},[52,34885,77],{"class":58},[43,34887,34889],{"className":222,"code":34888,"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,34890,34891,34901,34905,34919,34923,34936,34940],{"__ignoreMap":48},[52,34892,34893,34895,34897,34899],{"class":54,"line":55},[52,34894,232],{"class":231},[52,34896,9005],{"class":58},[52,34898,238],{"class":231},[52,34900,9010],{"class":73},[52,34902,34903],{"class":54,"line":80},[52,34904,597],{"emptyLinePlaceholder":171},[52,34906,34907,34909,34911,34913,34915,34917],{"class":54,"line":108},[52,34908,1721],{"class":231},[52,34910,1724],{"class":371},[52,34912,1727],{"class":231},[52,34914,1730],{"class":231},[52,34916,1733],{"class":66},[52,34918,1736],{"class":58},[52,34920,34921],{"class":54,"line":118},[52,34922,1751],{"class":58},[52,34924,34925,34927,34930,34932,34934],{"class":54,"line":594},[52,34926,1756],{"class":58},[52,34928,34929],{"class":73},"'Ellipse'",[52,34931,1762],{"class":58},[52,34933,7660],{"class":73},[52,34935,1768],{"class":58},[52,34937,34938],{"class":54,"line":600},[52,34939,1773],{"class":58},[52,34941,34942],{"class":54,"line":606},[52,34943,1778],{"class":58},[156,34945,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34947},[34948,34949],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/ellipse",{"title":34712,"description":34720},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":34956,"title":18255,"body":34957,"category":32173,"componentType":20623,"description":34964,"extension":168,"meta":35224,"navigation":171,"path":35225,"requiresChild":171,"seo":35226,"stem":35227,"__hash__":35228},"components/docs/components/Emboss.md",{"type":8,"value":34958,"toc":35220},[34959,34962,34965,34967,34969,34972,34974,35218],[11,34960,18255],{"id":34961},"emboss",[15,34963,34964],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[26676,34966],{"component":18255},[23,34968,26680],{"id":21278},[26682,34970],{":props":34971},"[{\"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,34973,26688],{"id":26687},[217,34975,34976,35021,35065,35109,35153],{":tabs":1543},[43,34977,34979],{"className":45,"code":34978,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[31,34980,34981,34989,34997,35005,35013],{"__ignoreMap":48},[52,34982,34983,34985,34987],{"class":54,"line":55},[52,34984,59],{"class":58},[52,34986,63],{"class":62},[52,34988,77],{"class":58},[52,34990,34991,34993,34995],{"class":54,"line":80},[52,34992,83],{"class":58},[52,34994,18255],{"class":62},[52,34996,77],{"class":58},[52,34998,34999,35001,35003],{"class":54,"line":108},[52,35000,2213],{"class":58},[52,35002,2216],{"class":62},[52,35004,105],{"class":58},[52,35006,35007,35009,35011],{"class":54,"line":118},[52,35008,2230],{"class":58},[52,35010,18255],{"class":62},[52,35012,77],{"class":58},[52,35014,35015,35017,35019],{"class":54,"line":594},[52,35016,121],{"class":58},[52,35018,63],{"class":62},[52,35020,77],{"class":58},[43,35022,35023],{"className":360,"code":34978,"language":362,"meta":48,"style":48},[31,35024,35025,35033,35041,35049,35057],{"__ignoreMap":48},[52,35026,35027,35029,35031],{"class":54,"line":55},[52,35028,59],{"class":58},[52,35030,63],{"class":371},[52,35032,77],{"class":58},[52,35034,35035,35037,35039],{"class":54,"line":80},[52,35036,83],{"class":58},[52,35038,18255],{"class":371},[52,35040,77],{"class":58},[52,35042,35043,35045,35047],{"class":54,"line":108},[52,35044,2213],{"class":58},[52,35046,2216],{"class":371},[52,35048,105],{"class":58},[52,35050,35051,35053,35055],{"class":54,"line":118},[52,35052,2230],{"class":58},[52,35054,18255],{"class":371},[52,35056,77],{"class":58},[52,35058,35059,35061,35063],{"class":54,"line":594},[52,35060,121],{"class":58},[52,35062,63],{"class":371},[52,35064,77],{"class":58},[43,35066,35067],{"className":2507,"code":34978,"language":2509,"meta":48,"style":48},[31,35068,35069,35077,35085,35093,35101],{"__ignoreMap":48},[52,35070,35071,35073,35075],{"class":54,"line":55},[52,35072,59],{"class":58},[52,35074,63],{"class":371},[52,35076,77],{"class":58},[52,35078,35079,35081,35083],{"class":54,"line":80},[52,35080,83],{"class":58},[52,35082,18255],{"class":371},[52,35084,77],{"class":58},[52,35086,35087,35089,35091],{"class":54,"line":108},[52,35088,2213],{"class":58},[52,35090,2216],{"class":371},[52,35092,105],{"class":58},[52,35094,35095,35097,35099],{"class":54,"line":118},[52,35096,2230],{"class":58},[52,35098,18255],{"class":371},[52,35100,77],{"class":58},[52,35102,35103,35105,35107],{"class":54,"line":594},[52,35104,121],{"class":58},[52,35106,63],{"class":371},[52,35108,77],{"class":58},[43,35110,35111],{"className":419,"code":34978,"language":420,"meta":48,"style":48},[31,35112,35113,35121,35129,35137,35145],{"__ignoreMap":48},[52,35114,35115,35117,35119],{"class":54,"line":55},[52,35116,59],{"class":58},[52,35118,63],{"class":371},[52,35120,77],{"class":58},[52,35122,35123,35125,35127],{"class":54,"line":80},[52,35124,83],{"class":58},[52,35126,18255],{"class":371},[52,35128,77],{"class":58},[52,35130,35131,35133,35135],{"class":54,"line":108},[52,35132,2213],{"class":58},[52,35134,2216],{"class":371},[52,35136,105],{"class":58},[52,35138,35139,35141,35143],{"class":54,"line":118},[52,35140,2230],{"class":58},[52,35142,18255],{"class":371},[52,35144,77],{"class":58},[52,35146,35147,35149,35151],{"class":54,"line":594},[52,35148,121],{"class":58},[52,35150,63],{"class":371},[52,35152,77],{"class":58},[43,35154,35156],{"className":222,"code":35155,"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,35157,35158,35168,35172,35186,35190,35198,35206,35210,35214],{"__ignoreMap":48},[52,35159,35160,35162,35164,35166],{"class":54,"line":55},[52,35161,232],{"class":231},[52,35163,9005],{"class":58},[52,35165,238],{"class":231},[52,35167,9010],{"class":73},[52,35169,35170],{"class":54,"line":80},[52,35171,597],{"emptyLinePlaceholder":171},[52,35173,35174,35176,35178,35180,35182,35184],{"class":54,"line":108},[52,35175,1721],{"class":231},[52,35177,1724],{"class":371},[52,35179,1727],{"class":231},[52,35181,1730],{"class":231},[52,35183,1733],{"class":66},[52,35185,1736],{"class":58},[52,35187,35188],{"class":54,"line":118},[52,35189,1751],{"class":58},[52,35191,35192,35194,35196],{"class":54,"line":594},[52,35193,1756],{"class":58},[52,35195,18903],{"class":73},[52,35197,4496],{"class":58},[52,35199,35200,35202,35204],{"class":54,"line":600},[52,35201,4501],{"class":58},[52,35203,2869],{"class":73},[52,35205,2129],{"class":58},[52,35207,35208],{"class":54,"line":606},[52,35209,4518],{"class":58},[52,35211,35212],{"class":54,"line":653},[52,35213,1773],{"class":58},[52,35215,35216],{"class":54,"line":662},[52,35217,1778],{"class":58},[156,35219,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35221},[35222,35223],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/emboss",{"title":18255,"description":34964},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":35230,"title":35231,"body":35232,"category":27535,"componentType":20617,"description":35239,"extension":168,"meta":35424,"navigation":171,"path":35425,"requiresChild":27538,"seo":35426,"stem":35427,"__hash__":35428},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":35233,"toc":35420},[35234,35237,35240,35242,35244,35247,35249,35418],[11,35235,35231],{"id":35236},"fallinglines",[15,35238,35239],{},"Directional falling lines with a leading-to-trailing color fade",[26676,35241],{"component":35231},[23,35243,26680],{"id":21278},[26682,35245],{":props":35246},"[{\"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,35248,26688],{"id":26687},[217,35250,35251,35280,35308,35336,35364],{":tabs":1543},[43,35252,35254],{"className":45,"code":35253,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[31,35255,35256,35264,35272],{"__ignoreMap":48},[52,35257,35258,35260,35262],{"class":54,"line":55},[52,35259,59],{"class":58},[52,35261,63],{"class":62},[52,35263,77],{"class":58},[52,35265,35266,35268,35270],{"class":54,"line":80},[52,35267,83],{"class":58},[52,35269,35231],{"class":62},[52,35271,105],{"class":58},[52,35273,35274,35276,35278],{"class":54,"line":108},[52,35275,121],{"class":58},[52,35277,63],{"class":62},[52,35279,77],{"class":58},[43,35281,35282],{"className":360,"code":35253,"language":362,"meta":48,"style":48},[31,35283,35284,35292,35300],{"__ignoreMap":48},[52,35285,35286,35288,35290],{"class":54,"line":55},[52,35287,59],{"class":58},[52,35289,63],{"class":371},[52,35291,77],{"class":58},[52,35293,35294,35296,35298],{"class":54,"line":80},[52,35295,83],{"class":58},[52,35297,35231],{"class":371},[52,35299,105],{"class":58},[52,35301,35302,35304,35306],{"class":54,"line":108},[52,35303,121],{"class":58},[52,35305,63],{"class":371},[52,35307,77],{"class":58},[43,35309,35310],{"className":2507,"code":35253,"language":2509,"meta":48,"style":48},[31,35311,35312,35320,35328],{"__ignoreMap":48},[52,35313,35314,35316,35318],{"class":54,"line":55},[52,35315,59],{"class":58},[52,35317,63],{"class":371},[52,35319,77],{"class":58},[52,35321,35322,35324,35326],{"class":54,"line":80},[52,35323,83],{"class":58},[52,35325,35231],{"class":371},[52,35327,105],{"class":58},[52,35329,35330,35332,35334],{"class":54,"line":108},[52,35331,121],{"class":58},[52,35333,63],{"class":371},[52,35335,77],{"class":58},[43,35337,35338],{"className":419,"code":35253,"language":420,"meta":48,"style":48},[31,35339,35340,35348,35356],{"__ignoreMap":48},[52,35341,35342,35344,35346],{"class":54,"line":55},[52,35343,59],{"class":58},[52,35345,63],{"class":371},[52,35347,77],{"class":58},[52,35349,35350,35352,35354],{"class":54,"line":80},[52,35351,83],{"class":58},[52,35353,35231],{"class":371},[52,35355,105],{"class":58},[52,35357,35358,35360,35362],{"class":54,"line":108},[52,35359,121],{"class":58},[52,35361,63],{"class":371},[52,35363,77],{"class":58},[43,35365,35367],{"className":222,"code":35366,"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,35368,35369,35379,35383,35397,35401,35410,35414],{"__ignoreMap":48},[52,35370,35371,35373,35375,35377],{"class":54,"line":55},[52,35372,232],{"class":231},[52,35374,9005],{"class":58},[52,35376,238],{"class":231},[52,35378,9010],{"class":73},[52,35380,35381],{"class":54,"line":80},[52,35382,597],{"emptyLinePlaceholder":171},[52,35384,35385,35387,35389,35391,35393,35395],{"class":54,"line":108},[52,35386,1721],{"class":231},[52,35388,1724],{"class":371},[52,35390,1727],{"class":231},[52,35392,1730],{"class":231},[52,35394,1733],{"class":66},[52,35396,1736],{"class":58},[52,35398,35399],{"class":54,"line":118},[52,35400,1751],{"class":58},[52,35402,35403,35405,35408],{"class":54,"line":594},[52,35404,1756],{"class":58},[52,35406,35407],{"class":73},"'FallingLines'",[52,35409,2129],{"class":58},[52,35411,35412],{"class":54,"line":600},[52,35413,1773],{"class":58},[52,35415,35416],{"class":54,"line":606},[52,35417,1778],{"class":58},[156,35419,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35421},[35422,35423],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/fallinglines",{"title":35231,"description":35239},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":35430,"title":35431,"body":35432,"category":27278,"componentType":20623,"description":35439,"extension":168,"meta":35700,"navigation":171,"path":35701,"requiresChild":171,"seo":35702,"stem":35703,"__hash__":35704},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":35433,"toc":35696},[35434,35437,35440,35442,35444,35447,35449,35694],[11,35435,35431],{"id":35436},"filmgrain",[15,35438,35439],{},"Analog film grain texture overlay",[26676,35441],{"component":35431},[23,35443,26680],{"id":21278},[26682,35445],{":props":35446},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"}]",[23,35448,26688],{"id":26687},[217,35450,35451,35496,35540,35584,35628],{":tabs":1543},[43,35452,35454],{"className":45,"code":35453,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[31,35455,35456,35464,35472,35480,35488],{"__ignoreMap":48},[52,35457,35458,35460,35462],{"class":54,"line":55},[52,35459,59],{"class":58},[52,35461,63],{"class":62},[52,35463,77],{"class":58},[52,35465,35466,35468,35470],{"class":54,"line":80},[52,35467,83],{"class":58},[52,35469,35431],{"class":62},[52,35471,77],{"class":58},[52,35473,35474,35476,35478],{"class":54,"line":108},[52,35475,2213],{"class":58},[52,35477,2216],{"class":62},[52,35479,105],{"class":58},[52,35481,35482,35484,35486],{"class":54,"line":118},[52,35483,2230],{"class":58},[52,35485,35431],{"class":62},[52,35487,77],{"class":58},[52,35489,35490,35492,35494],{"class":54,"line":594},[52,35491,121],{"class":58},[52,35493,63],{"class":62},[52,35495,77],{"class":58},[43,35497,35498],{"className":360,"code":35453,"language":362,"meta":48,"style":48},[31,35499,35500,35508,35516,35524,35532],{"__ignoreMap":48},[52,35501,35502,35504,35506],{"class":54,"line":55},[52,35503,59],{"class":58},[52,35505,63],{"class":371},[52,35507,77],{"class":58},[52,35509,35510,35512,35514],{"class":54,"line":80},[52,35511,83],{"class":58},[52,35513,35431],{"class":371},[52,35515,77],{"class":58},[52,35517,35518,35520,35522],{"class":54,"line":108},[52,35519,2213],{"class":58},[52,35521,2216],{"class":371},[52,35523,105],{"class":58},[52,35525,35526,35528,35530],{"class":54,"line":118},[52,35527,2230],{"class":58},[52,35529,35431],{"class":371},[52,35531,77],{"class":58},[52,35533,35534,35536,35538],{"class":54,"line":594},[52,35535,121],{"class":58},[52,35537,63],{"class":371},[52,35539,77],{"class":58},[43,35541,35542],{"className":2507,"code":35453,"language":2509,"meta":48,"style":48},[31,35543,35544,35552,35560,35568,35576],{"__ignoreMap":48},[52,35545,35546,35548,35550],{"class":54,"line":55},[52,35547,59],{"class":58},[52,35549,63],{"class":371},[52,35551,77],{"class":58},[52,35553,35554,35556,35558],{"class":54,"line":80},[52,35555,83],{"class":58},[52,35557,35431],{"class":371},[52,35559,77],{"class":58},[52,35561,35562,35564,35566],{"class":54,"line":108},[52,35563,2213],{"class":58},[52,35565,2216],{"class":371},[52,35567,105],{"class":58},[52,35569,35570,35572,35574],{"class":54,"line":118},[52,35571,2230],{"class":58},[52,35573,35431],{"class":371},[52,35575,77],{"class":58},[52,35577,35578,35580,35582],{"class":54,"line":594},[52,35579,121],{"class":58},[52,35581,63],{"class":371},[52,35583,77],{"class":58},[43,35585,35586],{"className":419,"code":35453,"language":420,"meta":48,"style":48},[31,35587,35588,35596,35604,35612,35620],{"__ignoreMap":48},[52,35589,35590,35592,35594],{"class":54,"line":55},[52,35591,59],{"class":58},[52,35593,63],{"class":371},[52,35595,77],{"class":58},[52,35597,35598,35600,35602],{"class":54,"line":80},[52,35599,83],{"class":58},[52,35601,35431],{"class":371},[52,35603,77],{"class":58},[52,35605,35606,35608,35610],{"class":54,"line":108},[52,35607,2213],{"class":58},[52,35609,2216],{"class":371},[52,35611,105],{"class":58},[52,35613,35614,35616,35618],{"class":54,"line":118},[52,35615,2230],{"class":58},[52,35617,35431],{"class":371},[52,35619,77],{"class":58},[52,35621,35622,35624,35626],{"class":54,"line":594},[52,35623,121],{"class":58},[52,35625,63],{"class":371},[52,35627,77],{"class":58},[43,35629,35631],{"className":222,"code":35630,"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,35632,35633,35643,35647,35661,35665,35674,35682,35686,35690],{"__ignoreMap":48},[52,35634,35635,35637,35639,35641],{"class":54,"line":55},[52,35636,232],{"class":231},[52,35638,9005],{"class":58},[52,35640,238],{"class":231},[52,35642,9010],{"class":73},[52,35644,35645],{"class":54,"line":80},[52,35646,597],{"emptyLinePlaceholder":171},[52,35648,35649,35651,35653,35655,35657,35659],{"class":54,"line":108},[52,35650,1721],{"class":231},[52,35652,1724],{"class":371},[52,35654,1727],{"class":231},[52,35656,1730],{"class":231},[52,35658,1733],{"class":66},[52,35660,1736],{"class":58},[52,35662,35663],{"class":54,"line":118},[52,35664,1751],{"class":58},[52,35666,35667,35669,35672],{"class":54,"line":594},[52,35668,1756],{"class":58},[52,35670,35671],{"class":73},"'FilmGrain'",[52,35673,4496],{"class":58},[52,35675,35676,35678,35680],{"class":54,"line":600},[52,35677,4501],{"class":58},[52,35679,2869],{"class":73},[52,35681,2129],{"class":58},[52,35683,35684],{"class":54,"line":606},[52,35685,4518],{"class":58},[52,35687,35688],{"class":54,"line":653},[52,35689,1773],{"class":58},[52,35691,35692],{"class":54,"line":662},[52,35693,1778],{"class":58},[156,35695,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35697},[35698,35699],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/filmgrain",{"title":35431,"description":35439},"docs/components/FilmGrain","oDbJl1STzhPHE6Df_wrMx0Zjj08jAQ3NPWF6sPUQzvw",{"id":35706,"title":35707,"body":35708,"category":27535,"componentType":20617,"description":35715,"extension":168,"meta":35900,"navigation":171,"path":35901,"requiresChild":27538,"seo":35902,"stem":35903,"__hash__":35904},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":35709,"toc":35896},[35710,35713,35716,35718,35720,35723,35725,35894],[11,35711,35707],{"id":35712},"floatingparticles",[15,35714,35715],{},"Animated floating particles with twinkle effects",[26676,35717],{"component":35707},[23,35719,26680],{"id":21278},[26682,35721],{":props":35722},"[{\"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,35724,26688],{"id":26687},[217,35726,35727,35756,35784,35812,35840],{":tabs":1543},[43,35728,35730],{"className":45,"code":35729,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[31,35731,35732,35740,35748],{"__ignoreMap":48},[52,35733,35734,35736,35738],{"class":54,"line":55},[52,35735,59],{"class":58},[52,35737,63],{"class":62},[52,35739,77],{"class":58},[52,35741,35742,35744,35746],{"class":54,"line":80},[52,35743,83],{"class":58},[52,35745,35707],{"class":62},[52,35747,105],{"class":58},[52,35749,35750,35752,35754],{"class":54,"line":108},[52,35751,121],{"class":58},[52,35753,63],{"class":62},[52,35755,77],{"class":58},[43,35757,35758],{"className":360,"code":35729,"language":362,"meta":48,"style":48},[31,35759,35760,35768,35776],{"__ignoreMap":48},[52,35761,35762,35764,35766],{"class":54,"line":55},[52,35763,59],{"class":58},[52,35765,63],{"class":371},[52,35767,77],{"class":58},[52,35769,35770,35772,35774],{"class":54,"line":80},[52,35771,83],{"class":58},[52,35773,35707],{"class":371},[52,35775,105],{"class":58},[52,35777,35778,35780,35782],{"class":54,"line":108},[52,35779,121],{"class":58},[52,35781,63],{"class":371},[52,35783,77],{"class":58},[43,35785,35786],{"className":2507,"code":35729,"language":2509,"meta":48,"style":48},[31,35787,35788,35796,35804],{"__ignoreMap":48},[52,35789,35790,35792,35794],{"class":54,"line":55},[52,35791,59],{"class":58},[52,35793,63],{"class":371},[52,35795,77],{"class":58},[52,35797,35798,35800,35802],{"class":54,"line":80},[52,35799,83],{"class":58},[52,35801,35707],{"class":371},[52,35803,105],{"class":58},[52,35805,35806,35808,35810],{"class":54,"line":108},[52,35807,121],{"class":58},[52,35809,63],{"class":371},[52,35811,77],{"class":58},[43,35813,35814],{"className":419,"code":35729,"language":420,"meta":48,"style":48},[31,35815,35816,35824,35832],{"__ignoreMap":48},[52,35817,35818,35820,35822],{"class":54,"line":55},[52,35819,59],{"class":58},[52,35821,63],{"class":371},[52,35823,77],{"class":58},[52,35825,35826,35828,35830],{"class":54,"line":80},[52,35827,83],{"class":58},[52,35829,35707],{"class":371},[52,35831,105],{"class":58},[52,35833,35834,35836,35838],{"class":54,"line":108},[52,35835,121],{"class":58},[52,35837,63],{"class":371},[52,35839,77],{"class":58},[43,35841,35843],{"className":222,"code":35842,"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,35844,35845,35855,35859,35873,35877,35886,35890],{"__ignoreMap":48},[52,35846,35847,35849,35851,35853],{"class":54,"line":55},[52,35848,232],{"class":231},[52,35850,9005],{"class":58},[52,35852,238],{"class":231},[52,35854,9010],{"class":73},[52,35856,35857],{"class":54,"line":80},[52,35858,597],{"emptyLinePlaceholder":171},[52,35860,35861,35863,35865,35867,35869,35871],{"class":54,"line":108},[52,35862,1721],{"class":231},[52,35864,1724],{"class":371},[52,35866,1727],{"class":231},[52,35868,1730],{"class":231},[52,35870,1733],{"class":66},[52,35872,1736],{"class":58},[52,35874,35875],{"class":54,"line":118},[52,35876,1751],{"class":58},[52,35878,35879,35881,35884],{"class":54,"line":594},[52,35880,1756],{"class":58},[52,35882,35883],{"class":73},"'FloatingParticles'",[52,35885,2129],{"class":58},[52,35887,35888],{"class":54,"line":600},[52,35889,1773],{"class":58},[52,35891,35892],{"class":54,"line":606},[52,35893,1778],{"class":58},[156,35895,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35897},[35898,35899],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/floatingparticles",{"title":35707,"description":35715},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":35906,"title":35907,"body":35908,"category":28880,"componentType":20623,"description":35915,"extension":168,"meta":36176,"navigation":171,"path":36177,"requiresChild":171,"seo":36178,"stem":36179,"__hash__":36180},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":35909,"toc":36172},[35910,35913,35916,35918,35920,35923,35925,36170],[11,35911,35907],{"id":35912},"flowfield",[15,35914,35915],{},"Fluid-like distortion with constant smooth motion",[26676,35917],{"component":35907},[23,35919,26680],{"id":21278},[26682,35921],{":props":35922},"[{\"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,35924,26688],{"id":26687},[217,35926,35927,35972,36016,36060,36104],{":tabs":1543},[43,35928,35930],{"className":45,"code":35929,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[31,35931,35932,35940,35948,35956,35964],{"__ignoreMap":48},[52,35933,35934,35936,35938],{"class":54,"line":55},[52,35935,59],{"class":58},[52,35937,63],{"class":62},[52,35939,77],{"class":58},[52,35941,35942,35944,35946],{"class":54,"line":80},[52,35943,83],{"class":58},[52,35945,35907],{"class":62},[52,35947,77],{"class":58},[52,35949,35950,35952,35954],{"class":54,"line":108},[52,35951,2213],{"class":58},[52,35953,2216],{"class":62},[52,35955,105],{"class":58},[52,35957,35958,35960,35962],{"class":54,"line":118},[52,35959,2230],{"class":58},[52,35961,35907],{"class":62},[52,35963,77],{"class":58},[52,35965,35966,35968,35970],{"class":54,"line":594},[52,35967,121],{"class":58},[52,35969,63],{"class":62},[52,35971,77],{"class":58},[43,35973,35974],{"className":360,"code":35929,"language":362,"meta":48,"style":48},[31,35975,35976,35984,35992,36000,36008],{"__ignoreMap":48},[52,35977,35978,35980,35982],{"class":54,"line":55},[52,35979,59],{"class":58},[52,35981,63],{"class":371},[52,35983,77],{"class":58},[52,35985,35986,35988,35990],{"class":54,"line":80},[52,35987,83],{"class":58},[52,35989,35907],{"class":371},[52,35991,77],{"class":58},[52,35993,35994,35996,35998],{"class":54,"line":108},[52,35995,2213],{"class":58},[52,35997,2216],{"class":371},[52,35999,105],{"class":58},[52,36001,36002,36004,36006],{"class":54,"line":118},[52,36003,2230],{"class":58},[52,36005,35907],{"class":371},[52,36007,77],{"class":58},[52,36009,36010,36012,36014],{"class":54,"line":594},[52,36011,121],{"class":58},[52,36013,63],{"class":371},[52,36015,77],{"class":58},[43,36017,36018],{"className":2507,"code":35929,"language":2509,"meta":48,"style":48},[31,36019,36020,36028,36036,36044,36052],{"__ignoreMap":48},[52,36021,36022,36024,36026],{"class":54,"line":55},[52,36023,59],{"class":58},[52,36025,63],{"class":371},[52,36027,77],{"class":58},[52,36029,36030,36032,36034],{"class":54,"line":80},[52,36031,83],{"class":58},[52,36033,35907],{"class":371},[52,36035,77],{"class":58},[52,36037,36038,36040,36042],{"class":54,"line":108},[52,36039,2213],{"class":58},[52,36041,2216],{"class":371},[52,36043,105],{"class":58},[52,36045,36046,36048,36050],{"class":54,"line":118},[52,36047,2230],{"class":58},[52,36049,35907],{"class":371},[52,36051,77],{"class":58},[52,36053,36054,36056,36058],{"class":54,"line":594},[52,36055,121],{"class":58},[52,36057,63],{"class":371},[52,36059,77],{"class":58},[43,36061,36062],{"className":419,"code":35929,"language":420,"meta":48,"style":48},[31,36063,36064,36072,36080,36088,36096],{"__ignoreMap":48},[52,36065,36066,36068,36070],{"class":54,"line":55},[52,36067,59],{"class":58},[52,36069,63],{"class":371},[52,36071,77],{"class":58},[52,36073,36074,36076,36078],{"class":54,"line":80},[52,36075,83],{"class":58},[52,36077,35907],{"class":371},[52,36079,77],{"class":58},[52,36081,36082,36084,36086],{"class":54,"line":108},[52,36083,2213],{"class":58},[52,36085,2216],{"class":371},[52,36087,105],{"class":58},[52,36089,36090,36092,36094],{"class":54,"line":118},[52,36091,2230],{"class":58},[52,36093,35907],{"class":371},[52,36095,77],{"class":58},[52,36097,36098,36100,36102],{"class":54,"line":594},[52,36099,121],{"class":58},[52,36101,63],{"class":371},[52,36103,77],{"class":58},[43,36105,36107],{"className":222,"code":36106,"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,36108,36109,36119,36123,36137,36141,36150,36158,36162,36166],{"__ignoreMap":48},[52,36110,36111,36113,36115,36117],{"class":54,"line":55},[52,36112,232],{"class":231},[52,36114,9005],{"class":58},[52,36116,238],{"class":231},[52,36118,9010],{"class":73},[52,36120,36121],{"class":54,"line":80},[52,36122,597],{"emptyLinePlaceholder":171},[52,36124,36125,36127,36129,36131,36133,36135],{"class":54,"line":108},[52,36126,1721],{"class":231},[52,36128,1724],{"class":371},[52,36130,1727],{"class":231},[52,36132,1730],{"class":231},[52,36134,1733],{"class":66},[52,36136,1736],{"class":58},[52,36138,36139],{"class":54,"line":118},[52,36140,1751],{"class":58},[52,36142,36143,36145,36148],{"class":54,"line":594},[52,36144,1756],{"class":58},[52,36146,36147],{"class":73},"'FlowField'",[52,36149,4496],{"class":58},[52,36151,36152,36154,36156],{"class":54,"line":600},[52,36153,4501],{"class":58},[52,36155,2869],{"class":73},[52,36157,2129],{"class":58},[52,36159,36160],{"class":54,"line":606},[52,36161,4518],{"class":58},[52,36163,36164],{"class":54,"line":653},[52,36165,1773],{"class":58},[52,36167,36168],{"class":54,"line":662},[52,36169,1778],{"class":58},[156,36171,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":36173},[36174,36175],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/flowfield",{"title":35907,"description":35915},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":36182,"title":36183,"body":36184,"category":30502,"componentType":20617,"description":36191,"extension":168,"meta":36469,"navigation":171,"path":36470,"requiresChild":27538,"seo":36471,"stem":36472,"__hash__":36473},"components/docs/components/Flower.md","Flower",{"type":8,"value":36185,"toc":36465},[36186,36189,36192,36194,36196,36199,36201,36463],[11,36187,36183],{"id":36188},"flower",[15,36190,36191],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[26676,36193],{"component":36183},[23,36195,26680],{"id":21278},[26682,36197],{":props":36198},"[{\"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,36200,26688],{"id":26687},[217,36202,36203,36252,36303,36351,36401],{":tabs":1543},[43,36204,36206],{"className":45,"code":36205,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,36207,36208,36216,36223,36231,36240,36244],{"__ignoreMap":48},[52,36209,36210,36212,36214],{"class":54,"line":55},[52,36211,59],{"class":58},[52,36213,63],{"class":62},[52,36215,77],{"class":58},[52,36217,36218,36220],{"class":54,"line":80},[52,36219,83],{"class":58},[52,36221,36222],{"class":62},"Flower\n",[52,36224,36225,36227,36229],{"class":54,"line":108},[52,36226,7125],{"class":66},[52,36228,70],{"class":58},[52,36230,7081],{"class":73},[52,36232,36233,36235,36237],{"class":54,"line":118},[52,36234,14675],{"class":66},[52,36236,70],{"class":58},[52,36238,36239],{"class":73},"\"0.4\"\n",[52,36241,36242],{"class":54,"line":594},[52,36243,1224],{"class":58},[52,36245,36246,36248,36250],{"class":54,"line":600},[52,36247,121],{"class":58},[52,36249,63],{"class":62},[52,36251,77],{"class":58},[43,36253,36255],{"className":360,"code":36254,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,36256,36257,36265,36271,36279,36291,36295],{"__ignoreMap":48},[52,36258,36259,36261,36263],{"class":54,"line":55},[52,36260,59],{"class":58},[52,36262,63],{"class":371},[52,36264,77],{"class":58},[52,36266,36267,36269],{"class":54,"line":80},[52,36268,83],{"class":58},[52,36270,36222],{"class":371},[52,36272,36273,36275,36277],{"class":54,"line":108},[52,36274,7125],{"class":66},[52,36276,70],{"class":231},[52,36278,7081],{"class":73},[52,36280,36281,36283,36285,36287,36289],{"class":54,"line":118},[52,36282,7135],{"class":66},[52,36284,70],{"class":231},[52,36286,723],{"class":58},[52,36288,5737],{"class":371},[52,36290,729],{"class":58},[52,36292,36293],{"class":54,"line":594},[52,36294,1224],{"class":58},[52,36296,36297,36299,36301],{"class":54,"line":600},[52,36298,121],{"class":58},[52,36300,63],{"class":371},[52,36302,77],{"class":58},[43,36304,36305],{"className":2507,"code":36254,"language":2509,"meta":48,"style":48},[31,36306,36307,36315,36321,36329,36339,36343],{"__ignoreMap":48},[52,36308,36309,36311,36313],{"class":54,"line":55},[52,36310,59],{"class":58},[52,36312,63],{"class":371},[52,36314,77],{"class":58},[52,36316,36317,36319],{"class":54,"line":80},[52,36318,83],{"class":58},[52,36320,36222],{"class":371},[52,36322,36323,36325,36327],{"class":54,"line":108},[52,36324,7125],{"class":66},[52,36326,70],{"class":58},[52,36328,7081],{"class":73},[52,36330,36331,36333,36335,36337],{"class":54,"line":118},[52,36332,7135],{"class":66},[52,36334,24620],{"class":58},[52,36336,5737],{"class":371},[52,36338,729],{"class":58},[52,36340,36341],{"class":54,"line":594},[52,36342,1224],{"class":58},[52,36344,36345,36347,36349],{"class":54,"line":600},[52,36346,121],{"class":58},[52,36348,63],{"class":371},[52,36350,77],{"class":58},[43,36352,36353],{"className":419,"code":36254,"language":420,"meta":48,"style":48},[31,36354,36355,36363,36369,36377,36389,36393],{"__ignoreMap":48},[52,36356,36357,36359,36361],{"class":54,"line":55},[52,36358,59],{"class":58},[52,36360,63],{"class":371},[52,36362,77],{"class":58},[52,36364,36365,36367],{"class":54,"line":80},[52,36366,83],{"class":58},[52,36368,36222],{"class":371},[52,36370,36371,36373,36375],{"class":54,"line":108},[52,36372,7125],{"class":66},[52,36374,70],{"class":231},[52,36376,7081],{"class":73},[52,36378,36379,36381,36383,36385,36387],{"class":54,"line":118},[52,36380,7135],{"class":66},[52,36382,70],{"class":231},[52,36384,723],{"class":58},[52,36386,5737],{"class":371},[52,36388,729],{"class":58},[52,36390,36391],{"class":54,"line":594},[52,36392,1224],{"class":58},[52,36394,36395,36397,36399],{"class":54,"line":600},[52,36396,121],{"class":58},[52,36398,63],{"class":371},[52,36400,77],{"class":58},[43,36402,36404],{"className":222,"code":36403,"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,36405,36406,36416,36420,36434,36438,36455,36459],{"__ignoreMap":48},[52,36407,36408,36410,36412,36414],{"class":54,"line":55},[52,36409,232],{"class":231},[52,36411,9005],{"class":58},[52,36413,238],{"class":231},[52,36415,9010],{"class":73},[52,36417,36418],{"class":54,"line":80},[52,36419,597],{"emptyLinePlaceholder":171},[52,36421,36422,36424,36426,36428,36430,36432],{"class":54,"line":108},[52,36423,1721],{"class":231},[52,36425,1724],{"class":371},[52,36427,1727],{"class":231},[52,36429,1730],{"class":231},[52,36431,1733],{"class":66},[52,36433,1736],{"class":58},[52,36435,36436],{"class":54,"line":118},[52,36437,1751],{"class":58},[52,36439,36440,36442,36445,36447,36449,36451,36453],{"class":54,"line":594},[52,36441,1756],{"class":58},[52,36443,36444],{"class":73},"'Flower'",[52,36446,1762],{"class":58},[52,36448,7660],{"class":73},[52,36450,4052],{"class":58},[52,36452,5737],{"class":371},[52,36454,1768],{"class":58},[52,36456,36457],{"class":54,"line":600},[52,36458,1773],{"class":58},[52,36460,36461],{"class":54,"line":606},[52,36462,1778],{"class":58},[156,36464,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":36466},[36467,36468],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/flower",{"title":36183,"description":36191},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":36475,"title":36476,"body":36477,"category":27535,"componentType":20617,"description":36484,"extension":168,"meta":36669,"navigation":171,"path":36670,"requiresChild":27538,"seo":36671,"stem":36672,"__hash__":36673},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":36478,"toc":36665},[36479,36482,36485,36487,36489,36492,36494,36663],[11,36480,36476],{"id":36481},"flowinggradient",[15,36483,36484],{},"Liquid silk gradient with organic flowing color bands",[26676,36486],{"component":36476},[23,36488,26680],{"id":21278},[26682,36490],{":props":36491},"[{\"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,36493,26688],{"id":26687},[217,36495,36496,36525,36553,36581,36609],{":tabs":1543},[43,36497,36499],{"className":45,"code":36498,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[31,36500,36501,36509,36517],{"__ignoreMap":48},[52,36502,36503,36505,36507],{"class":54,"line":55},[52,36504,59],{"class":58},[52,36506,63],{"class":62},[52,36508,77],{"class":58},[52,36510,36511,36513,36515],{"class":54,"line":80},[52,36512,83],{"class":58},[52,36514,36476],{"class":62},[52,36516,105],{"class":58},[52,36518,36519,36521,36523],{"class":54,"line":108},[52,36520,121],{"class":58},[52,36522,63],{"class":62},[52,36524,77],{"class":58},[43,36526,36527],{"className":360,"code":36498,"language":362,"meta":48,"style":48},[31,36528,36529,36537,36545],{"__ignoreMap":48},[52,36530,36531,36533,36535],{"class":54,"line":55},[52,36532,59],{"class":58},[52,36534,63],{"class":371},[52,36536,77],{"class":58},[52,36538,36539,36541,36543],{"class":54,"line":80},[52,36540,83],{"class":58},[52,36542,36476],{"class":371},[52,36544,105],{"class":58},[52,36546,36547,36549,36551],{"class":54,"line":108},[52,36548,121],{"class":58},[52,36550,63],{"class":371},[52,36552,77],{"class":58},[43,36554,36555],{"className":2507,"code":36498,"language":2509,"meta":48,"style":48},[31,36556,36557,36565,36573],{"__ignoreMap":48},[52,36558,36559,36561,36563],{"class":54,"line":55},[52,36560,59],{"class":58},[52,36562,63],{"class":371},[52,36564,77],{"class":58},[52,36566,36567,36569,36571],{"class":54,"line":80},[52,36568,83],{"class":58},[52,36570,36476],{"class":371},[52,36572,105],{"class":58},[52,36574,36575,36577,36579],{"class":54,"line":108},[52,36576,121],{"class":58},[52,36578,63],{"class":371},[52,36580,77],{"class":58},[43,36582,36583],{"className":419,"code":36498,"language":420,"meta":48,"style":48},[31,36584,36585,36593,36601],{"__ignoreMap":48},[52,36586,36587,36589,36591],{"class":54,"line":55},[52,36588,59],{"class":58},[52,36590,63],{"class":371},[52,36592,77],{"class":58},[52,36594,36595,36597,36599],{"class":54,"line":80},[52,36596,83],{"class":58},[52,36598,36476],{"class":371},[52,36600,105],{"class":58},[52,36602,36603,36605,36607],{"class":54,"line":108},[52,36604,121],{"class":58},[52,36606,63],{"class":371},[52,36608,77],{"class":58},[43,36610,36612],{"className":222,"code":36611,"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,36613,36614,36624,36628,36642,36646,36655,36659],{"__ignoreMap":48},[52,36615,36616,36618,36620,36622],{"class":54,"line":55},[52,36617,232],{"class":231},[52,36619,9005],{"class":58},[52,36621,238],{"class":231},[52,36623,9010],{"class":73},[52,36625,36626],{"class":54,"line":80},[52,36627,597],{"emptyLinePlaceholder":171},[52,36629,36630,36632,36634,36636,36638,36640],{"class":54,"line":108},[52,36631,1721],{"class":231},[52,36633,1724],{"class":371},[52,36635,1727],{"class":231},[52,36637,1730],{"class":231},[52,36639,1733],{"class":66},[52,36641,1736],{"class":58},[52,36643,36644],{"class":54,"line":118},[52,36645,1751],{"class":58},[52,36647,36648,36650,36653],{"class":54,"line":594},[52,36649,1756],{"class":58},[52,36651,36652],{"class":73},"'FlowingGradient'",[52,36654,2129],{"class":58},[52,36656,36657],{"class":54,"line":600},[52,36658,1773],{"class":58},[52,36660,36661],{"class":54,"line":606},[52,36662,1778],{"class":58},[156,36664,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":36666},[36667,36668],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/flowinggradient",{"title":36476,"description":36484},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":36675,"title":36676,"body":36677,"category":28880,"componentType":20623,"description":36684,"extension":168,"meta":36945,"navigation":171,"path":36946,"requiresChild":171,"seo":36947,"stem":36948,"__hash__":36949},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":36678,"toc":36941},[36679,36682,36685,36687,36689,36692,36694,36939],[11,36680,36676],{"id":36681},"form3d",[15,36683,36684],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26676,36686],{"component":36676},[23,36688,26680],{"id":21278},[26682,36690],{":props":36691},"[{\"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,36693,26688],{"id":26687},[217,36695,36696,36741,36785,36829,36873],{":tabs":1543},[43,36697,36699],{"className":45,"code":36698,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,36700,36701,36709,36717,36725,36733],{"__ignoreMap":48},[52,36702,36703,36705,36707],{"class":54,"line":55},[52,36704,59],{"class":58},[52,36706,63],{"class":62},[52,36708,77],{"class":58},[52,36710,36711,36713,36715],{"class":54,"line":80},[52,36712,83],{"class":58},[52,36714,36676],{"class":62},[52,36716,77],{"class":58},[52,36718,36719,36721,36723],{"class":54,"line":108},[52,36720,2213],{"class":58},[52,36722,2216],{"class":62},[52,36724,105],{"class":58},[52,36726,36727,36729,36731],{"class":54,"line":118},[52,36728,2230],{"class":58},[52,36730,36676],{"class":62},[52,36732,77],{"class":58},[52,36734,36735,36737,36739],{"class":54,"line":594},[52,36736,121],{"class":58},[52,36738,63],{"class":62},[52,36740,77],{"class":58},[43,36742,36743],{"className":360,"code":36698,"language":362,"meta":48,"style":48},[31,36744,36745,36753,36761,36769,36777],{"__ignoreMap":48},[52,36746,36747,36749,36751],{"class":54,"line":55},[52,36748,59],{"class":58},[52,36750,63],{"class":371},[52,36752,77],{"class":58},[52,36754,36755,36757,36759],{"class":54,"line":80},[52,36756,83],{"class":58},[52,36758,36676],{"class":371},[52,36760,77],{"class":58},[52,36762,36763,36765,36767],{"class":54,"line":108},[52,36764,2213],{"class":58},[52,36766,2216],{"class":371},[52,36768,105],{"class":58},[52,36770,36771,36773,36775],{"class":54,"line":118},[52,36772,2230],{"class":58},[52,36774,36676],{"class":371},[52,36776,77],{"class":58},[52,36778,36779,36781,36783],{"class":54,"line":594},[52,36780,121],{"class":58},[52,36782,63],{"class":371},[52,36784,77],{"class":58},[43,36786,36787],{"className":2507,"code":36698,"language":2509,"meta":48,"style":48},[31,36788,36789,36797,36805,36813,36821],{"__ignoreMap":48},[52,36790,36791,36793,36795],{"class":54,"line":55},[52,36792,59],{"class":58},[52,36794,63],{"class":371},[52,36796,77],{"class":58},[52,36798,36799,36801,36803],{"class":54,"line":80},[52,36800,83],{"class":58},[52,36802,36676],{"class":371},[52,36804,77],{"class":58},[52,36806,36807,36809,36811],{"class":54,"line":108},[52,36808,2213],{"class":58},[52,36810,2216],{"class":371},[52,36812,105],{"class":58},[52,36814,36815,36817,36819],{"class":54,"line":118},[52,36816,2230],{"class":58},[52,36818,36676],{"class":371},[52,36820,77],{"class":58},[52,36822,36823,36825,36827],{"class":54,"line":594},[52,36824,121],{"class":58},[52,36826,63],{"class":371},[52,36828,77],{"class":58},[43,36830,36831],{"className":419,"code":36698,"language":420,"meta":48,"style":48},[31,36832,36833,36841,36849,36857,36865],{"__ignoreMap":48},[52,36834,36835,36837,36839],{"class":54,"line":55},[52,36836,59],{"class":58},[52,36838,63],{"class":371},[52,36840,77],{"class":58},[52,36842,36843,36845,36847],{"class":54,"line":80},[52,36844,83],{"class":58},[52,36846,36676],{"class":371},[52,36848,77],{"class":58},[52,36850,36851,36853,36855],{"class":54,"line":108},[52,36852,2213],{"class":58},[52,36854,2216],{"class":371},[52,36856,105],{"class":58},[52,36858,36859,36861,36863],{"class":54,"line":118},[52,36860,2230],{"class":58},[52,36862,36676],{"class":371},[52,36864,77],{"class":58},[52,36866,36867,36869,36871],{"class":54,"line":594},[52,36868,121],{"class":58},[52,36870,63],{"class":371},[52,36872,77],{"class":58},[43,36874,36876],{"className":222,"code":36875,"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,36877,36878,36888,36892,36906,36910,36919,36927,36931,36935],{"__ignoreMap":48},[52,36879,36880,36882,36884,36886],{"class":54,"line":55},[52,36881,232],{"class":231},[52,36883,9005],{"class":58},[52,36885,238],{"class":231},[52,36887,9010],{"class":73},[52,36889,36890],{"class":54,"line":80},[52,36891,597],{"emptyLinePlaceholder":171},[52,36893,36894,36896,36898,36900,36902,36904],{"class":54,"line":108},[52,36895,1721],{"class":231},[52,36897,1724],{"class":371},[52,36899,1727],{"class":231},[52,36901,1730],{"class":231},[52,36903,1733],{"class":66},[52,36905,1736],{"class":58},[52,36907,36908],{"class":54,"line":118},[52,36909,1751],{"class":58},[52,36911,36912,36914,36917],{"class":54,"line":594},[52,36913,1756],{"class":58},[52,36915,36916],{"class":73},"'Form3D'",[52,36918,4496],{"class":58},[52,36920,36921,36923,36925],{"class":54,"line":600},[52,36922,4501],{"class":58},[52,36924,2869],{"class":73},[52,36926,2129],{"class":58},[52,36928,36929],{"class":54,"line":606},[52,36930,4518],{"class":58},[52,36932,36933],{"class":54,"line":653},[52,36934,1773],{"class":58},[52,36936,36937],{"class":54,"line":662},[52,36938,1778],{"class":58},[156,36940,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":36942},[36943,36944],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/form3d",{"title":36676,"description":36684},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":36951,"title":18248,"body":36952,"category":32173,"componentType":20623,"description":36959,"extension":168,"meta":37219,"navigation":171,"path":37220,"requiresChild":171,"seo":37221,"stem":37222,"__hash__":37223},"components/docs/components/Glass.md",{"type":8,"value":36953,"toc":37215},[36954,36957,36960,36962,36964,36967,36969,37213],[11,36955,18248],{"id":36956},"glass",[15,36958,36959],{},"Optically realistic glass lens driven in a custom shape",[26676,36961],{"component":18248},[23,36963,26680],{"id":21278},[26682,36965],{":props":36966},"[{\"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,36968,26688],{"id":26687},[217,36970,36971,37016,37060,37104,37148],{":tabs":1543},[43,36972,36974],{"className":45,"code":36973,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[31,36975,36976,36984,36992,37000,37008],{"__ignoreMap":48},[52,36977,36978,36980,36982],{"class":54,"line":55},[52,36979,59],{"class":58},[52,36981,63],{"class":62},[52,36983,77],{"class":58},[52,36985,36986,36988,36990],{"class":54,"line":80},[52,36987,83],{"class":58},[52,36989,18248],{"class":62},[52,36991,77],{"class":58},[52,36993,36994,36996,36998],{"class":54,"line":108},[52,36995,2213],{"class":58},[52,36997,2216],{"class":62},[52,36999,105],{"class":58},[52,37001,37002,37004,37006],{"class":54,"line":118},[52,37003,2230],{"class":58},[52,37005,18248],{"class":62},[52,37007,77],{"class":58},[52,37009,37010,37012,37014],{"class":54,"line":594},[52,37011,121],{"class":58},[52,37013,63],{"class":62},[52,37015,77],{"class":58},[43,37017,37018],{"className":360,"code":36973,"language":362,"meta":48,"style":48},[31,37019,37020,37028,37036,37044,37052],{"__ignoreMap":48},[52,37021,37022,37024,37026],{"class":54,"line":55},[52,37023,59],{"class":58},[52,37025,63],{"class":371},[52,37027,77],{"class":58},[52,37029,37030,37032,37034],{"class":54,"line":80},[52,37031,83],{"class":58},[52,37033,18248],{"class":371},[52,37035,77],{"class":58},[52,37037,37038,37040,37042],{"class":54,"line":108},[52,37039,2213],{"class":58},[52,37041,2216],{"class":371},[52,37043,105],{"class":58},[52,37045,37046,37048,37050],{"class":54,"line":118},[52,37047,2230],{"class":58},[52,37049,18248],{"class":371},[52,37051,77],{"class":58},[52,37053,37054,37056,37058],{"class":54,"line":594},[52,37055,121],{"class":58},[52,37057,63],{"class":371},[52,37059,77],{"class":58},[43,37061,37062],{"className":2507,"code":36973,"language":2509,"meta":48,"style":48},[31,37063,37064,37072,37080,37088,37096],{"__ignoreMap":48},[52,37065,37066,37068,37070],{"class":54,"line":55},[52,37067,59],{"class":58},[52,37069,63],{"class":371},[52,37071,77],{"class":58},[52,37073,37074,37076,37078],{"class":54,"line":80},[52,37075,83],{"class":58},[52,37077,18248],{"class":371},[52,37079,77],{"class":58},[52,37081,37082,37084,37086],{"class":54,"line":108},[52,37083,2213],{"class":58},[52,37085,2216],{"class":371},[52,37087,105],{"class":58},[52,37089,37090,37092,37094],{"class":54,"line":118},[52,37091,2230],{"class":58},[52,37093,18248],{"class":371},[52,37095,77],{"class":58},[52,37097,37098,37100,37102],{"class":54,"line":594},[52,37099,121],{"class":58},[52,37101,63],{"class":371},[52,37103,77],{"class":58},[43,37105,37106],{"className":419,"code":36973,"language":420,"meta":48,"style":48},[31,37107,37108,37116,37124,37132,37140],{"__ignoreMap":48},[52,37109,37110,37112,37114],{"class":54,"line":55},[52,37111,59],{"class":58},[52,37113,63],{"class":371},[52,37115,77],{"class":58},[52,37117,37118,37120,37122],{"class":54,"line":80},[52,37119,83],{"class":58},[52,37121,18248],{"class":371},[52,37123,77],{"class":58},[52,37125,37126,37128,37130],{"class":54,"line":108},[52,37127,2213],{"class":58},[52,37129,2216],{"class":371},[52,37131,105],{"class":58},[52,37133,37134,37136,37138],{"class":54,"line":118},[52,37135,2230],{"class":58},[52,37137,18248],{"class":371},[52,37139,77],{"class":58},[52,37141,37142,37144,37146],{"class":54,"line":594},[52,37143,121],{"class":58},[52,37145,63],{"class":371},[52,37147,77],{"class":58},[43,37149,37151],{"className":222,"code":37150,"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,37152,37153,37163,37167,37181,37185,37193,37201,37205,37209],{"__ignoreMap":48},[52,37154,37155,37157,37159,37161],{"class":54,"line":55},[52,37156,232],{"class":231},[52,37158,9005],{"class":58},[52,37160,238],{"class":231},[52,37162,9010],{"class":73},[52,37164,37165],{"class":54,"line":80},[52,37166,597],{"emptyLinePlaceholder":171},[52,37168,37169,37171,37173,37175,37177,37179],{"class":54,"line":108},[52,37170,1721],{"class":231},[52,37172,1724],{"class":371},[52,37174,1727],{"class":231},[52,37176,1730],{"class":231},[52,37178,1733],{"class":66},[52,37180,1736],{"class":58},[52,37182,37183],{"class":54,"line":118},[52,37184,1751],{"class":58},[52,37186,37187,37189,37191],{"class":54,"line":594},[52,37188,1756],{"class":58},[52,37190,18789],{"class":73},[52,37192,4496],{"class":58},[52,37194,37195,37197,37199],{"class":54,"line":600},[52,37196,4501],{"class":58},[52,37198,2869],{"class":73},[52,37200,2129],{"class":58},[52,37202,37203],{"class":54,"line":606},[52,37204,4518],{"class":58},[52,37206,37207],{"class":54,"line":653},[52,37208,1773],{"class":58},[52,37210,37211],{"class":54,"line":662},[52,37212,1778],{"class":58},[156,37214,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":37216},[37217,37218],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glass",{"title":18248,"description":36959},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":37225,"title":3710,"body":37226,"category":28880,"componentType":20623,"description":37233,"extension":168,"meta":37550,"navigation":171,"path":37551,"requiresChild":171,"seo":37552,"stem":37553,"__hash__":37554},"components/docs/components/GlassTiles.md",{"type":8,"value":37227,"toc":37546},[37228,37231,37234,37236,37238,37241,37243,37544],[11,37229,3710],{"id":37230},"glasstiles",[15,37232,37233],{},"Refraction-like distortion in a tile grid pattern",[26676,37235],{"component":3710},[23,37237,26680],{"id":21278},[26682,37239],{":props":37240},"[{\"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,37242,26688],{"id":26687},[217,37244,37245,37302,37361,37417,37475],{":tabs":1543},[43,37246,37248],{"className":45,"code":37247,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37249,37250,37258,37265,37274,37278,37286,37294],{"__ignoreMap":48},[52,37251,37252,37254,37256],{"class":54,"line":55},[52,37253,59],{"class":58},[52,37255,63],{"class":62},[52,37257,77],{"class":58},[52,37259,37260,37262],{"class":54,"line":80},[52,37261,83],{"class":58},[52,37263,37264],{"class":62},"GlassTiles\n",[52,37266,37267,37269,37271],{"class":54,"line":108},[52,37268,17644],{"class":66},[52,37270,70],{"class":58},[52,37272,37273],{"class":73},"\"2\"\n",[52,37275,37276],{"class":54,"line":118},[52,37277,26724],{"class":58},[52,37279,37280,37282,37284],{"class":54,"line":594},[52,37281,2213],{"class":58},[52,37283,2216],{"class":62},[52,37285,105],{"class":58},[52,37287,37288,37290,37292],{"class":54,"line":600},[52,37289,2230],{"class":58},[52,37291,3710],{"class":62},[52,37293,77],{"class":58},[52,37295,37296,37298,37300],{"class":54,"line":606},[52,37297,121],{"class":58},[52,37299,63],{"class":62},[52,37301,77],{"class":58},[43,37303,37305],{"className":360,"code":37304,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37306,37307,37315,37321,37333,37337,37345,37353],{"__ignoreMap":48},[52,37308,37309,37311,37313],{"class":54,"line":55},[52,37310,59],{"class":58},[52,37312,63],{"class":371},[52,37314,77],{"class":58},[52,37316,37317,37319],{"class":54,"line":80},[52,37318,83],{"class":58},[52,37320,37264],{"class":371},[52,37322,37323,37325,37327,37329,37331],{"class":54,"line":108},[52,37324,17755],{"class":66},[52,37326,70],{"class":231},[52,37328,723],{"class":58},[52,37330,4701],{"class":371},[52,37332,729],{"class":58},[52,37334,37335],{"class":54,"line":118},[52,37336,26724],{"class":58},[52,37338,37339,37341,37343],{"class":54,"line":594},[52,37340,2213],{"class":58},[52,37342,2216],{"class":371},[52,37344,105],{"class":58},[52,37346,37347,37349,37351],{"class":54,"line":600},[52,37348,2230],{"class":58},[52,37350,3710],{"class":371},[52,37352,77],{"class":58},[52,37354,37355,37357,37359],{"class":54,"line":606},[52,37356,121],{"class":58},[52,37358,63],{"class":371},[52,37360,77],{"class":58},[43,37362,37363],{"className":2507,"code":37304,"language":2509,"meta":48,"style":48},[31,37364,37365,37373,37379,37389,37393,37401,37409],{"__ignoreMap":48},[52,37366,37367,37369,37371],{"class":54,"line":55},[52,37368,59],{"class":58},[52,37370,63],{"class":371},[52,37372,77],{"class":58},[52,37374,37375,37377],{"class":54,"line":80},[52,37376,83],{"class":58},[52,37378,37264],{"class":371},[52,37380,37381,37383,37385,37387],{"class":54,"line":108},[52,37382,17755],{"class":66},[52,37384,24620],{"class":58},[52,37386,4701],{"class":371},[52,37388,729],{"class":58},[52,37390,37391],{"class":54,"line":118},[52,37392,26724],{"class":58},[52,37394,37395,37397,37399],{"class":54,"line":594},[52,37396,2213],{"class":58},[52,37398,2216],{"class":371},[52,37400,105],{"class":58},[52,37402,37403,37405,37407],{"class":54,"line":600},[52,37404,2230],{"class":58},[52,37406,3710],{"class":371},[52,37408,77],{"class":58},[52,37410,37411,37413,37415],{"class":54,"line":606},[52,37412,121],{"class":58},[52,37414,63],{"class":371},[52,37416,77],{"class":58},[43,37418,37419],{"className":419,"code":37304,"language":420,"meta":48,"style":48},[31,37420,37421,37429,37435,37447,37451,37459,37467],{"__ignoreMap":48},[52,37422,37423,37425,37427],{"class":54,"line":55},[52,37424,59],{"class":58},[52,37426,63],{"class":371},[52,37428,77],{"class":58},[52,37430,37431,37433],{"class":54,"line":80},[52,37432,83],{"class":58},[52,37434,37264],{"class":371},[52,37436,37437,37439,37441,37443,37445],{"class":54,"line":108},[52,37438,17755],{"class":66},[52,37440,70],{"class":231},[52,37442,723],{"class":58},[52,37444,4701],{"class":371},[52,37446,729],{"class":58},[52,37448,37449],{"class":54,"line":118},[52,37450,26724],{"class":58},[52,37452,37453,37455,37457],{"class":54,"line":594},[52,37454,2213],{"class":58},[52,37456,2216],{"class":371},[52,37458,105],{"class":58},[52,37460,37461,37463,37465],{"class":54,"line":600},[52,37462,2230],{"class":58},[52,37464,3710],{"class":371},[52,37466,77],{"class":58},[52,37468,37469,37471,37473],{"class":54,"line":606},[52,37470,121],{"class":58},[52,37472,63],{"class":371},[52,37474,77],{"class":58},[43,37476,37478],{"className":222,"code":37477,"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,37479,37480,37490,37494,37508,37512,37524,37532,37536,37540],{"__ignoreMap":48},[52,37481,37482,37484,37486,37488],{"class":54,"line":55},[52,37483,232],{"class":231},[52,37485,9005],{"class":58},[52,37487,238],{"class":231},[52,37489,9010],{"class":73},[52,37491,37492],{"class":54,"line":80},[52,37493,597],{"emptyLinePlaceholder":171},[52,37495,37496,37498,37500,37502,37504,37506],{"class":54,"line":108},[52,37497,1721],{"class":231},[52,37499,1724],{"class":371},[52,37501,1727],{"class":231},[52,37503,1730],{"class":231},[52,37505,1733],{"class":66},[52,37507,1736],{"class":58},[52,37509,37510],{"class":54,"line":118},[52,37511,1751],{"class":58},[52,37513,37514,37516,37518,37520,37522],{"class":54,"line":594},[52,37515,1756],{"class":58},[52,37517,4069],{"class":73},[52,37519,26969],{"class":58},[52,37521,4701],{"class":371},[52,37523,5033],{"class":58},[52,37525,37526,37528,37530],{"class":54,"line":600},[52,37527,4501],{"class":58},[52,37529,2869],{"class":73},[52,37531,2129],{"class":58},[52,37533,37534],{"class":54,"line":606},[52,37535,4518],{"class":58},[52,37537,37538],{"class":54,"line":653},[52,37539,1773],{"class":58},[52,37541,37542],{"class":54,"line":662},[52,37543,1778],{"class":58},[156,37545,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37547},[37548,37549],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glasstiles",{"title":3710,"description":37233},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":37556,"title":37557,"body":37558,"category":27278,"componentType":20623,"description":37565,"extension":168,"meta":37882,"navigation":171,"path":37883,"requiresChild":171,"seo":37884,"stem":37885,"__hash__":37886},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":37559,"toc":37878},[37560,37563,37566,37568,37570,37573,37575,37876],[11,37561,37557],{"id":37562},"glitch",[15,37564,37565],{},"Digital glitch that melts pixels and distorts colors",[26676,37567],{"component":37557},[23,37569,26680],{"id":21278},[26682,37571],{":props":37572},"[{\"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,37574,26688],{"id":26687},[217,37576,37577,37633,37692,37748,37806],{":tabs":1543},[43,37578,37580],{"className":45,"code":37579,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,37581,37582,37590,37597,37605,37609,37617,37625],{"__ignoreMap":48},[52,37583,37584,37586,37588],{"class":54,"line":55},[52,37585,59],{"class":58},[52,37587,63],{"class":62},[52,37589,77],{"class":58},[52,37591,37592,37594],{"class":54,"line":80},[52,37593,83],{"class":58},[52,37595,37596],{"class":62},"Glitch\n",[52,37598,37599,37601,37603],{"class":54,"line":108},[52,37600,17644],{"class":66},[52,37602,70],{"class":58},[52,37604,32237],{"class":73},[52,37606,37607],{"class":54,"line":118},[52,37608,26724],{"class":58},[52,37610,37611,37613,37615],{"class":54,"line":594},[52,37612,2213],{"class":58},[52,37614,2216],{"class":62},[52,37616,105],{"class":58},[52,37618,37619,37621,37623],{"class":54,"line":600},[52,37620,2230],{"class":58},[52,37622,37557],{"class":62},[52,37624,77],{"class":58},[52,37626,37627,37629,37631],{"class":54,"line":606},[52,37628,121],{"class":58},[52,37630,63],{"class":62},[52,37632,77],{"class":58},[43,37634,37636],{"className":360,"code":37635,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,37637,37638,37646,37652,37664,37668,37676,37684],{"__ignoreMap":48},[52,37639,37640,37642,37644],{"class":54,"line":55},[52,37641,59],{"class":58},[52,37643,63],{"class":371},[52,37645,77],{"class":58},[52,37647,37648,37650],{"class":54,"line":80},[52,37649,83],{"class":58},[52,37651,37596],{"class":371},[52,37653,37654,37656,37658,37660,37662],{"class":54,"line":108},[52,37655,17755],{"class":66},[52,37657,70],{"class":231},[52,37659,723],{"class":58},[52,37661,5241],{"class":371},[52,37663,729],{"class":58},[52,37665,37666],{"class":54,"line":118},[52,37667,26724],{"class":58},[52,37669,37670,37672,37674],{"class":54,"line":594},[52,37671,2213],{"class":58},[52,37673,2216],{"class":371},[52,37675,105],{"class":58},[52,37677,37678,37680,37682],{"class":54,"line":600},[52,37679,2230],{"class":58},[52,37681,37557],{"class":371},[52,37683,77],{"class":58},[52,37685,37686,37688,37690],{"class":54,"line":606},[52,37687,121],{"class":58},[52,37689,63],{"class":371},[52,37691,77],{"class":58},[43,37693,37694],{"className":2507,"code":37635,"language":2509,"meta":48,"style":48},[31,37695,37696,37704,37710,37720,37724,37732,37740],{"__ignoreMap":48},[52,37697,37698,37700,37702],{"class":54,"line":55},[52,37699,59],{"class":58},[52,37701,63],{"class":371},[52,37703,77],{"class":58},[52,37705,37706,37708],{"class":54,"line":80},[52,37707,83],{"class":58},[52,37709,37596],{"class":371},[52,37711,37712,37714,37716,37718],{"class":54,"line":108},[52,37713,17755],{"class":66},[52,37715,24620],{"class":58},[52,37717,5241],{"class":371},[52,37719,729],{"class":58},[52,37721,37722],{"class":54,"line":118},[52,37723,26724],{"class":58},[52,37725,37726,37728,37730],{"class":54,"line":594},[52,37727,2213],{"class":58},[52,37729,2216],{"class":371},[52,37731,105],{"class":58},[52,37733,37734,37736,37738],{"class":54,"line":600},[52,37735,2230],{"class":58},[52,37737,37557],{"class":371},[52,37739,77],{"class":58},[52,37741,37742,37744,37746],{"class":54,"line":606},[52,37743,121],{"class":58},[52,37745,63],{"class":371},[52,37747,77],{"class":58},[43,37749,37750],{"className":419,"code":37635,"language":420,"meta":48,"style":48},[31,37751,37752,37760,37766,37778,37782,37790,37798],{"__ignoreMap":48},[52,37753,37754,37756,37758],{"class":54,"line":55},[52,37755,59],{"class":58},[52,37757,63],{"class":371},[52,37759,77],{"class":58},[52,37761,37762,37764],{"class":54,"line":80},[52,37763,83],{"class":58},[52,37765,37596],{"class":371},[52,37767,37768,37770,37772,37774,37776],{"class":54,"line":108},[52,37769,17755],{"class":66},[52,37771,70],{"class":231},[52,37773,723],{"class":58},[52,37775,5241],{"class":371},[52,37777,729],{"class":58},[52,37779,37780],{"class":54,"line":118},[52,37781,26724],{"class":58},[52,37783,37784,37786,37788],{"class":54,"line":594},[52,37785,2213],{"class":58},[52,37787,2216],{"class":371},[52,37789,105],{"class":58},[52,37791,37792,37794,37796],{"class":54,"line":600},[52,37793,2230],{"class":58},[52,37795,37557],{"class":371},[52,37797,77],{"class":58},[52,37799,37800,37802,37804],{"class":54,"line":606},[52,37801,121],{"class":58},[52,37803,63],{"class":371},[52,37805,77],{"class":58},[43,37807,37809],{"className":222,"code":37808,"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,37810,37811,37821,37825,37839,37843,37856,37864,37868,37872],{"__ignoreMap":48},[52,37812,37813,37815,37817,37819],{"class":54,"line":55},[52,37814,232],{"class":231},[52,37816,9005],{"class":58},[52,37818,238],{"class":231},[52,37820,9010],{"class":73},[52,37822,37823],{"class":54,"line":80},[52,37824,597],{"emptyLinePlaceholder":171},[52,37826,37827,37829,37831,37833,37835,37837],{"class":54,"line":108},[52,37828,1721],{"class":231},[52,37830,1724],{"class":371},[52,37832,1727],{"class":231},[52,37834,1730],{"class":231},[52,37836,1733],{"class":66},[52,37838,1736],{"class":58},[52,37840,37841],{"class":54,"line":118},[52,37842,1751],{"class":58},[52,37844,37845,37847,37850,37852,37854],{"class":54,"line":594},[52,37846,1756],{"class":58},[52,37848,37849],{"class":73},"'Glitch'",[52,37851,26969],{"class":58},[52,37853,5241],{"class":371},[52,37855,5033],{"class":58},[52,37857,37858,37860,37862],{"class":54,"line":600},[52,37859,4501],{"class":58},[52,37861,2869],{"class":73},[52,37863,2129],{"class":58},[52,37865,37866],{"class":54,"line":606},[52,37867,4518],{"class":58},[52,37869,37870],{"class":54,"line":653},[52,37871,1773],{"class":58},[52,37873,37874],{"class":54,"line":662},[52,37875,1778],{"class":58},[156,37877,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37879},[37880,37881],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glitch",{"title":37557,"description":37565},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":37888,"title":9283,"body":37889,"category":27278,"componentType":20623,"description":37896,"extension":168,"meta":38213,"navigation":171,"path":38214,"requiresChild":171,"seo":38215,"stem":38216,"__hash__":38217},"components/docs/components/Glow.md",{"type":8,"value":37890,"toc":38209},[37891,37894,37897,37899,37901,37904,37906,38207],[11,37892,9283],{"id":37893},"glow",[15,37895,37896],{},"Soft glow effect with adjustable intensity",[26676,37898],{"component":9283},[23,37900,26680],{"id":21278},[26682,37902],{":props":37903},"[{\"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,37905,26688],{"id":26687},[217,37907,37908,37964,38023,38079,38137],{":tabs":1543},[43,37909,37911],{"className":45,"code":37910,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,37912,37913,37921,37928,37936,37940,37948,37956],{"__ignoreMap":48},[52,37914,37915,37917,37919],{"class":54,"line":55},[52,37916,59],{"class":58},[52,37918,63],{"class":62},[52,37920,77],{"class":58},[52,37922,37923,37925],{"class":54,"line":80},[52,37924,83],{"class":58},[52,37926,37927],{"class":62},"Glow\n",[52,37929,37930,37932,37934],{"class":54,"line":108},[52,37931,17644],{"class":66},[52,37933,70],{"class":58},[52,37935,28602],{"class":73},[52,37937,37938],{"class":54,"line":118},[52,37939,26724],{"class":58},[52,37941,37942,37944,37946],{"class":54,"line":594},[52,37943,2213],{"class":58},[52,37945,2216],{"class":62},[52,37947,105],{"class":58},[52,37949,37950,37952,37954],{"class":54,"line":600},[52,37951,2230],{"class":58},[52,37953,9283],{"class":62},[52,37955,77],{"class":58},[52,37957,37958,37960,37962],{"class":54,"line":606},[52,37959,121],{"class":58},[52,37961,63],{"class":62},[52,37963,77],{"class":58},[43,37965,37967],{"className":360,"code":37966,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,37968,37969,37977,37983,37995,37999,38007,38015],{"__ignoreMap":48},[52,37970,37971,37973,37975],{"class":54,"line":55},[52,37972,59],{"class":58},[52,37974,63],{"class":371},[52,37976,77],{"class":58},[52,37978,37979,37981],{"class":54,"line":80},[52,37980,83],{"class":58},[52,37982,37927],{"class":371},[52,37984,37985,37987,37989,37991,37993],{"class":54,"line":108},[52,37986,17755],{"class":66},[52,37988,70],{"class":231},[52,37990,723],{"class":58},[52,37992,6165],{"class":371},[52,37994,729],{"class":58},[52,37996,37997],{"class":54,"line":118},[52,37998,26724],{"class":58},[52,38000,38001,38003,38005],{"class":54,"line":594},[52,38002,2213],{"class":58},[52,38004,2216],{"class":371},[52,38006,105],{"class":58},[52,38008,38009,38011,38013],{"class":54,"line":600},[52,38010,2230],{"class":58},[52,38012,9283],{"class":371},[52,38014,77],{"class":58},[52,38016,38017,38019,38021],{"class":54,"line":606},[52,38018,121],{"class":58},[52,38020,63],{"class":371},[52,38022,77],{"class":58},[43,38024,38025],{"className":2507,"code":37966,"language":2509,"meta":48,"style":48},[31,38026,38027,38035,38041,38051,38055,38063,38071],{"__ignoreMap":48},[52,38028,38029,38031,38033],{"class":54,"line":55},[52,38030,59],{"class":58},[52,38032,63],{"class":371},[52,38034,77],{"class":58},[52,38036,38037,38039],{"class":54,"line":80},[52,38038,83],{"class":58},[52,38040,37927],{"class":371},[52,38042,38043,38045,38047,38049],{"class":54,"line":108},[52,38044,17755],{"class":66},[52,38046,24620],{"class":58},[52,38048,6165],{"class":371},[52,38050,729],{"class":58},[52,38052,38053],{"class":54,"line":118},[52,38054,26724],{"class":58},[52,38056,38057,38059,38061],{"class":54,"line":594},[52,38058,2213],{"class":58},[52,38060,2216],{"class":371},[52,38062,105],{"class":58},[52,38064,38065,38067,38069],{"class":54,"line":600},[52,38066,2230],{"class":58},[52,38068,9283],{"class":371},[52,38070,77],{"class":58},[52,38072,38073,38075,38077],{"class":54,"line":606},[52,38074,121],{"class":58},[52,38076,63],{"class":371},[52,38078,77],{"class":58},[43,38080,38081],{"className":419,"code":37966,"language":420,"meta":48,"style":48},[31,38082,38083,38091,38097,38109,38113,38121,38129],{"__ignoreMap":48},[52,38084,38085,38087,38089],{"class":54,"line":55},[52,38086,59],{"class":58},[52,38088,63],{"class":371},[52,38090,77],{"class":58},[52,38092,38093,38095],{"class":54,"line":80},[52,38094,83],{"class":58},[52,38096,37927],{"class":371},[52,38098,38099,38101,38103,38105,38107],{"class":54,"line":108},[52,38100,17755],{"class":66},[52,38102,70],{"class":231},[52,38104,723],{"class":58},[52,38106,6165],{"class":371},[52,38108,729],{"class":58},[52,38110,38111],{"class":54,"line":118},[52,38112,26724],{"class":58},[52,38114,38115,38117,38119],{"class":54,"line":594},[52,38116,2213],{"class":58},[52,38118,2216],{"class":371},[52,38120,105],{"class":58},[52,38122,38123,38125,38127],{"class":54,"line":600},[52,38124,2230],{"class":58},[52,38126,9283],{"class":371},[52,38128,77],{"class":58},[52,38130,38131,38133,38135],{"class":54,"line":606},[52,38132,121],{"class":58},[52,38134,63],{"class":371},[52,38136,77],{"class":58},[43,38138,38140],{"className":222,"code":38139,"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,38141,38142,38152,38156,38170,38174,38187,38195,38199,38203],{"__ignoreMap":48},[52,38143,38144,38146,38148,38150],{"class":54,"line":55},[52,38145,232],{"class":231},[52,38147,9005],{"class":58},[52,38149,238],{"class":231},[52,38151,9010],{"class":73},[52,38153,38154],{"class":54,"line":80},[52,38155,597],{"emptyLinePlaceholder":171},[52,38157,38158,38160,38162,38164,38166,38168],{"class":54,"line":108},[52,38159,1721],{"class":231},[52,38161,1724],{"class":371},[52,38163,1727],{"class":231},[52,38165,1730],{"class":231},[52,38167,1733],{"class":66},[52,38169,1736],{"class":58},[52,38171,38172],{"class":54,"line":118},[52,38173,1751],{"class":58},[52,38175,38176,38178,38181,38183,38185],{"class":54,"line":594},[52,38177,1756],{"class":58},[52,38179,38180],{"class":73},"'Glow'",[52,38182,26969],{"class":58},[52,38184,6165],{"class":371},[52,38186,5033],{"class":58},[52,38188,38189,38191,38193],{"class":54,"line":600},[52,38190,4501],{"class":58},[52,38192,2869],{"class":73},[52,38194,2129],{"class":58},[52,38196,38197],{"class":54,"line":606},[52,38198,4518],{"class":58},[52,38200,38201],{"class":54,"line":653},[52,38202,1773],{"class":58},[52,38204,38205],{"class":54,"line":662},[52,38206,1778],{"class":58},[156,38208,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38210},[38211,38212],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glow",{"title":9283,"description":37896},"docs/components/Glow","nY6FLTxSC0jk4JC2WGI4IwGXHT0zG4brVxkpPPza0M0",{"id":38219,"title":38220,"body":38221,"category":27535,"componentType":20617,"description":38228,"extension":168,"meta":38469,"navigation":171,"path":38470,"requiresChild":27538,"seo":38471,"stem":38472,"__hash__":38473},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":38222,"toc":38465},[38223,38226,38229,38231,38233,38236,38238,38463],[11,38224,38220],{"id":38225},"godrays",[15,38227,38228],{},"Volumetric light rays emanating from a point",[26676,38230],{"component":38220},[23,38232,26680],{"id":21278},[26682,38234],{":props":38235},"[{\"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,38237,26688],{"id":26687},[217,38239,38240,38280,38323,38363,38405],{":tabs":1543},[43,38241,38243],{"className":45,"code":38242,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,38244,38245,38253,38260,38268,38272],{"__ignoreMap":48},[52,38246,38247,38249,38251],{"class":54,"line":55},[52,38248,59],{"class":58},[52,38250,63],{"class":62},[52,38252,77],{"class":58},[52,38254,38255,38257],{"class":54,"line":80},[52,38256,83],{"class":58},[52,38258,38259],{"class":62},"Godrays\n",[52,38261,38262,38264,38266],{"class":54,"line":108},[52,38263,17644],{"class":66},[52,38265,70],{"class":58},[52,38267,7140],{"class":73},[52,38269,38270],{"class":54,"line":118},[52,38271,1224],{"class":58},[52,38273,38274,38276,38278],{"class":54,"line":594},[52,38275,121],{"class":58},[52,38277,63],{"class":62},[52,38279,77],{"class":58},[43,38281,38283],{"className":360,"code":38282,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,38284,38285,38293,38299,38311,38315],{"__ignoreMap":48},[52,38286,38287,38289,38291],{"class":54,"line":55},[52,38288,59],{"class":58},[52,38290,63],{"class":371},[52,38292,77],{"class":58},[52,38294,38295,38297],{"class":54,"line":80},[52,38296,83],{"class":58},[52,38298,38259],{"class":371},[52,38300,38301,38303,38305,38307,38309],{"class":54,"line":108},[52,38302,17755],{"class":66},[52,38304,70],{"class":231},[52,38306,723],{"class":58},[52,38308,3785],{"class":371},[52,38310,729],{"class":58},[52,38312,38313],{"class":54,"line":118},[52,38314,1224],{"class":58},[52,38316,38317,38319,38321],{"class":54,"line":594},[52,38318,121],{"class":58},[52,38320,63],{"class":371},[52,38322,77],{"class":58},[43,38324,38325],{"className":2507,"code":38282,"language":2509,"meta":48,"style":48},[31,38326,38327,38335,38341,38351,38355],{"__ignoreMap":48},[52,38328,38329,38331,38333],{"class":54,"line":55},[52,38330,59],{"class":58},[52,38332,63],{"class":371},[52,38334,77],{"class":58},[52,38336,38337,38339],{"class":54,"line":80},[52,38338,83],{"class":58},[52,38340,38259],{"class":371},[52,38342,38343,38345,38347,38349],{"class":54,"line":108},[52,38344,17755],{"class":66},[52,38346,24620],{"class":58},[52,38348,3785],{"class":371},[52,38350,729],{"class":58},[52,38352,38353],{"class":54,"line":118},[52,38354,1224],{"class":58},[52,38356,38357,38359,38361],{"class":54,"line":594},[52,38358,121],{"class":58},[52,38360,63],{"class":371},[52,38362,77],{"class":58},[43,38364,38365],{"className":419,"code":38282,"language":420,"meta":48,"style":48},[31,38366,38367,38375,38381,38393,38397],{"__ignoreMap":48},[52,38368,38369,38371,38373],{"class":54,"line":55},[52,38370,59],{"class":58},[52,38372,63],{"class":371},[52,38374,77],{"class":58},[52,38376,38377,38379],{"class":54,"line":80},[52,38378,83],{"class":58},[52,38380,38259],{"class":371},[52,38382,38383,38385,38387,38389,38391],{"class":54,"line":108},[52,38384,17755],{"class":66},[52,38386,70],{"class":231},[52,38388,723],{"class":58},[52,38390,3785],{"class":371},[52,38392,729],{"class":58},[52,38394,38395],{"class":54,"line":118},[52,38396,1224],{"class":58},[52,38398,38399,38401,38403],{"class":54,"line":594},[52,38400,121],{"class":58},[52,38402,63],{"class":371},[52,38404,77],{"class":58},[43,38406,38408],{"className":222,"code":38407,"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,38409,38410,38420,38424,38438,38442,38455,38459],{"__ignoreMap":48},[52,38411,38412,38414,38416,38418],{"class":54,"line":55},[52,38413,232],{"class":231},[52,38415,9005],{"class":58},[52,38417,238],{"class":231},[52,38419,9010],{"class":73},[52,38421,38422],{"class":54,"line":80},[52,38423,597],{"emptyLinePlaceholder":171},[52,38425,38426,38428,38430,38432,38434,38436],{"class":54,"line":108},[52,38427,1721],{"class":231},[52,38429,1724],{"class":371},[52,38431,1727],{"class":231},[52,38433,1730],{"class":231},[52,38435,1733],{"class":66},[52,38437,1736],{"class":58},[52,38439,38440],{"class":54,"line":118},[52,38441,1751],{"class":58},[52,38443,38444,38446,38449,38451,38453],{"class":54,"line":594},[52,38445,1756],{"class":58},[52,38447,38448],{"class":73},"'Godrays'",[52,38450,26969],{"class":58},[52,38452,3785],{"class":371},[52,38454,1768],{"class":58},[52,38456,38457],{"class":54,"line":600},[52,38458,1773],{"class":58},[52,38460,38461],{"class":54,"line":606},[52,38462,1778],{"class":58},[156,38464,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38466},[38467,38468],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/godrays",{"title":38220,"description":38228},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":38475,"title":38476,"body":38477,"category":28546,"componentType":20623,"description":38484,"extension":168,"meta":38739,"navigation":171,"path":38740,"requiresChild":171,"seo":38741,"stem":38742,"__hash__":38743},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":38478,"toc":38736},[38479,38482,38485,38487,38489,38734],[11,38480,38476],{"id":38481},"grayscale",[15,38483,38484],{},"Convert colors to black and white",[26676,38486],{"component":38476},[23,38488,26688],{"id":26687},[217,38490,38491,38536,38580,38624,38668],{":tabs":1543},[43,38492,38494],{"className":45,"code":38493,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,38495,38496,38504,38512,38520,38528],{"__ignoreMap":48},[52,38497,38498,38500,38502],{"class":54,"line":55},[52,38499,59],{"class":58},[52,38501,63],{"class":62},[52,38503,77],{"class":58},[52,38505,38506,38508,38510],{"class":54,"line":80},[52,38507,83],{"class":58},[52,38509,38476],{"class":62},[52,38511,77],{"class":58},[52,38513,38514,38516,38518],{"class":54,"line":108},[52,38515,2213],{"class":58},[52,38517,2216],{"class":62},[52,38519,105],{"class":58},[52,38521,38522,38524,38526],{"class":54,"line":118},[52,38523,2230],{"class":58},[52,38525,38476],{"class":62},[52,38527,77],{"class":58},[52,38529,38530,38532,38534],{"class":54,"line":594},[52,38531,121],{"class":58},[52,38533,63],{"class":62},[52,38535,77],{"class":58},[43,38537,38538],{"className":360,"code":38493,"language":362,"meta":48,"style":48},[31,38539,38540,38548,38556,38564,38572],{"__ignoreMap":48},[52,38541,38542,38544,38546],{"class":54,"line":55},[52,38543,59],{"class":58},[52,38545,63],{"class":371},[52,38547,77],{"class":58},[52,38549,38550,38552,38554],{"class":54,"line":80},[52,38551,83],{"class":58},[52,38553,38476],{"class":371},[52,38555,77],{"class":58},[52,38557,38558,38560,38562],{"class":54,"line":108},[52,38559,2213],{"class":58},[52,38561,2216],{"class":371},[52,38563,105],{"class":58},[52,38565,38566,38568,38570],{"class":54,"line":118},[52,38567,2230],{"class":58},[52,38569,38476],{"class":371},[52,38571,77],{"class":58},[52,38573,38574,38576,38578],{"class":54,"line":594},[52,38575,121],{"class":58},[52,38577,63],{"class":371},[52,38579,77],{"class":58},[43,38581,38582],{"className":2507,"code":38493,"language":2509,"meta":48,"style":48},[31,38583,38584,38592,38600,38608,38616],{"__ignoreMap":48},[52,38585,38586,38588,38590],{"class":54,"line":55},[52,38587,59],{"class":58},[52,38589,63],{"class":371},[52,38591,77],{"class":58},[52,38593,38594,38596,38598],{"class":54,"line":80},[52,38595,83],{"class":58},[52,38597,38476],{"class":371},[52,38599,77],{"class":58},[52,38601,38602,38604,38606],{"class":54,"line":108},[52,38603,2213],{"class":58},[52,38605,2216],{"class":371},[52,38607,105],{"class":58},[52,38609,38610,38612,38614],{"class":54,"line":118},[52,38611,2230],{"class":58},[52,38613,38476],{"class":371},[52,38615,77],{"class":58},[52,38617,38618,38620,38622],{"class":54,"line":594},[52,38619,121],{"class":58},[52,38621,63],{"class":371},[52,38623,77],{"class":58},[43,38625,38626],{"className":419,"code":38493,"language":420,"meta":48,"style":48},[31,38627,38628,38636,38644,38652,38660],{"__ignoreMap":48},[52,38629,38630,38632,38634],{"class":54,"line":55},[52,38631,59],{"class":58},[52,38633,63],{"class":371},[52,38635,77],{"class":58},[52,38637,38638,38640,38642],{"class":54,"line":80},[52,38639,83],{"class":58},[52,38641,38476],{"class":371},[52,38643,77],{"class":58},[52,38645,38646,38648,38650],{"class":54,"line":108},[52,38647,2213],{"class":58},[52,38649,2216],{"class":371},[52,38651,105],{"class":58},[52,38653,38654,38656,38658],{"class":54,"line":118},[52,38655,2230],{"class":58},[52,38657,38476],{"class":371},[52,38659,77],{"class":58},[52,38661,38662,38664,38666],{"class":54,"line":594},[52,38663,121],{"class":58},[52,38665,63],{"class":371},[52,38667,77],{"class":58},[43,38669,38671],{"className":222,"code":38670,"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,38672,38673,38683,38687,38701,38705,38714,38722,38726,38730],{"__ignoreMap":48},[52,38674,38675,38677,38679,38681],{"class":54,"line":55},[52,38676,232],{"class":231},[52,38678,9005],{"class":58},[52,38680,238],{"class":231},[52,38682,9010],{"class":73},[52,38684,38685],{"class":54,"line":80},[52,38686,597],{"emptyLinePlaceholder":171},[52,38688,38689,38691,38693,38695,38697,38699],{"class":54,"line":108},[52,38690,1721],{"class":231},[52,38692,1724],{"class":371},[52,38694,1727],{"class":231},[52,38696,1730],{"class":231},[52,38698,1733],{"class":66},[52,38700,1736],{"class":58},[52,38702,38703],{"class":54,"line":118},[52,38704,1751],{"class":58},[52,38706,38707,38709,38712],{"class":54,"line":594},[52,38708,1756],{"class":58},[52,38710,38711],{"class":73},"'Grayscale'",[52,38713,4496],{"class":58},[52,38715,38716,38718,38720],{"class":54,"line":600},[52,38717,4501],{"class":58},[52,38719,2869],{"class":73},[52,38721,2129],{"class":58},[52,38723,38724],{"class":54,"line":606},[52,38725,4518],{"class":58},[52,38727,38728],{"class":54,"line":653},[52,38729,1773],{"class":58},[52,38731,38732],{"class":54,"line":662},[52,38733,1778],{"class":58},[156,38735,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":38737},[38738],{"id":26687,"depth":80,"text":26688},{},"/docs/components/grayscale",{"title":38476,"description":38484},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":38745,"title":38746,"body":38747,"category":27535,"componentType":20617,"description":38754,"extension":168,"meta":38984,"navigation":171,"path":38985,"requiresChild":27538,"seo":38986,"stem":38987,"__hash__":38988},"components/docs/components/Grid.md","Grid",{"type":8,"value":38748,"toc":38980},[38749,38752,38755,38757,38759,38762,38764,38978],[11,38750,38746],{"id":38751},"grid",[15,38753,38754],{},"Simple grid lines pattern with adjustable thickness and rotation",[26676,38756],{"component":38746},[23,38758,26680],{"id":21278},[26682,38760],{":props":38761},"[{\"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,38763,26688],{"id":26687},[217,38765,38766,38806,38844,38882,38920],{":tabs":1543},[43,38767,38769],{"className":45,"code":38768,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,38770,38771,38779,38786,38794,38798],{"__ignoreMap":48},[52,38772,38773,38775,38777],{"class":54,"line":55},[52,38774,59],{"class":58},[52,38776,63],{"class":62},[52,38778,77],{"class":58},[52,38780,38781,38783],{"class":54,"line":80},[52,38782,83],{"class":58},[52,38784,38785],{"class":62},"Grid\n",[52,38787,38788,38790,38792],{"class":54,"line":108},[52,38789,7125],{"class":66},[52,38791,70],{"class":58},[52,38793,7081],{"class":73},[52,38795,38796],{"class":54,"line":118},[52,38797,1224],{"class":58},[52,38799,38800,38802,38804],{"class":54,"line":594},[52,38801,121],{"class":58},[52,38803,63],{"class":62},[52,38805,77],{"class":58},[43,38807,38808],{"className":360,"code":38768,"language":362,"meta":48,"style":48},[31,38809,38810,38818,38824,38832,38836],{"__ignoreMap":48},[52,38811,38812,38814,38816],{"class":54,"line":55},[52,38813,59],{"class":58},[52,38815,63],{"class":371},[52,38817,77],{"class":58},[52,38819,38820,38822],{"class":54,"line":80},[52,38821,83],{"class":58},[52,38823,38785],{"class":371},[52,38825,38826,38828,38830],{"class":54,"line":108},[52,38827,7125],{"class":66},[52,38829,70],{"class":231},[52,38831,7081],{"class":73},[52,38833,38834],{"class":54,"line":118},[52,38835,1224],{"class":58},[52,38837,38838,38840,38842],{"class":54,"line":594},[52,38839,121],{"class":58},[52,38841,63],{"class":371},[52,38843,77],{"class":58},[43,38845,38846],{"className":2507,"code":38768,"language":2509,"meta":48,"style":48},[31,38847,38848,38856,38862,38870,38874],{"__ignoreMap":48},[52,38849,38850,38852,38854],{"class":54,"line":55},[52,38851,59],{"class":58},[52,38853,63],{"class":371},[52,38855,77],{"class":58},[52,38857,38858,38860],{"class":54,"line":80},[52,38859,83],{"class":58},[52,38861,38785],{"class":371},[52,38863,38864,38866,38868],{"class":54,"line":108},[52,38865,7125],{"class":66},[52,38867,70],{"class":58},[52,38869,7081],{"class":73},[52,38871,38872],{"class":54,"line":118},[52,38873,1224],{"class":58},[52,38875,38876,38878,38880],{"class":54,"line":594},[52,38877,121],{"class":58},[52,38879,63],{"class":371},[52,38881,77],{"class":58},[43,38883,38884],{"className":419,"code":38768,"language":420,"meta":48,"style":48},[31,38885,38886,38894,38900,38908,38912],{"__ignoreMap":48},[52,38887,38888,38890,38892],{"class":54,"line":55},[52,38889,59],{"class":58},[52,38891,63],{"class":371},[52,38893,77],{"class":58},[52,38895,38896,38898],{"class":54,"line":80},[52,38897,83],{"class":58},[52,38899,38785],{"class":371},[52,38901,38902,38904,38906],{"class":54,"line":108},[52,38903,7125],{"class":66},[52,38905,70],{"class":231},[52,38907,7081],{"class":73},[52,38909,38910],{"class":54,"line":118},[52,38911,1224],{"class":58},[52,38913,38914,38916,38918],{"class":54,"line":594},[52,38915,121],{"class":58},[52,38917,63],{"class":371},[52,38919,77],{"class":58},[43,38921,38923],{"className":222,"code":38922,"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,38924,38925,38935,38939,38953,38957,38970,38974],{"__ignoreMap":48},[52,38926,38927,38929,38931,38933],{"class":54,"line":55},[52,38928,232],{"class":231},[52,38930,9005],{"class":58},[52,38932,238],{"class":231},[52,38934,9010],{"class":73},[52,38936,38937],{"class":54,"line":80},[52,38938,597],{"emptyLinePlaceholder":171},[52,38940,38941,38943,38945,38947,38949,38951],{"class":54,"line":108},[52,38942,1721],{"class":231},[52,38944,1724],{"class":371},[52,38946,1727],{"class":231},[52,38948,1730],{"class":231},[52,38950,1733],{"class":66},[52,38952,1736],{"class":58},[52,38954,38955],{"class":54,"line":118},[52,38956,1751],{"class":58},[52,38958,38959,38961,38964,38966,38968],{"class":54,"line":594},[52,38960,1756],{"class":58},[52,38962,38963],{"class":73},"'Grid'",[52,38965,1762],{"class":58},[52,38967,7660],{"class":73},[52,38969,1768],{"class":58},[52,38971,38972],{"class":54,"line":600},[52,38973,1773],{"class":58},[52,38975,38976],{"class":54,"line":606},[52,38977,1778],{"class":58},[156,38979,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38981},[38982,38983],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/grid",{"title":38746,"description":38754},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":38990,"title":4582,"body":38991,"category":29936,"componentType":20623,"description":38998,"extension":168,"meta":39360,"navigation":171,"path":39361,"requiresChild":171,"seo":39362,"stem":39363,"__hash__":39364},"components/docs/components/GridDistortion.md",{"type":8,"value":38992,"toc":39356},[38993,38996,38999,39001,39003,39006,39008,39354],[11,38994,4582],{"id":38995},"griddistortion",[15,38997,38998],{},"Interactive grid distortion controlled by mouse position",[26676,39000],{"component":4582},[23,39002,26680],{"id":21278},[26682,39004],{":props":39005},"[{\"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,39007,26688],{"id":26687},[217,39009,39010,39074,39145,39211,39281],{":tabs":1543},[43,39011,39013],{"className":45,"code":39012,"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,39014,39015,39023,39030,39038,39046,39050,39058,39066],{"__ignoreMap":48},[52,39016,39017,39019,39021],{"class":54,"line":55},[52,39018,59],{"class":58},[52,39020,63],{"class":62},[52,39022,77],{"class":58},[52,39024,39025,39027],{"class":54,"line":80},[52,39026,83],{"class":58},[52,39028,39029],{"class":62},"GridDistortion\n",[52,39031,39032,39034,39036],{"class":54,"line":108},[52,39033,17644],{"class":66},[52,39035,70],{"class":58},[52,39037,28602],{"class":73},[52,39039,39040,39042,39044],{"class":54,"line":118},[52,39041,14675],{"class":66},[52,39043,70],{"class":58},[52,39045,28602],{"class":73},[52,39047,39048],{"class":54,"line":594},[52,39049,26724],{"class":58},[52,39051,39052,39054,39056],{"class":54,"line":600},[52,39053,2213],{"class":58},[52,39055,2216],{"class":62},[52,39057,105],{"class":58},[52,39059,39060,39062,39064],{"class":54,"line":606},[52,39061,2230],{"class":58},[52,39063,4582],{"class":62},[52,39065,77],{"class":58},[52,39067,39068,39070,39072],{"class":54,"line":653},[52,39069,121],{"class":58},[52,39071,63],{"class":62},[52,39073,77],{"class":58},[43,39075,39077],{"className":360,"code":39076,"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,39078,39079,39087,39093,39105,39117,39121,39129,39137],{"__ignoreMap":48},[52,39080,39081,39083,39085],{"class":54,"line":55},[52,39082,59],{"class":58},[52,39084,63],{"class":371},[52,39086,77],{"class":58},[52,39088,39089,39091],{"class":54,"line":80},[52,39090,83],{"class":58},[52,39092,39029],{"class":371},[52,39094,39095,39097,39099,39101,39103],{"class":54,"line":108},[52,39096,17755],{"class":66},[52,39098,70],{"class":231},[52,39100,723],{"class":58},[52,39102,6165],{"class":371},[52,39104,729],{"class":58},[52,39106,39107,39109,39111,39113,39115],{"class":54,"line":118},[52,39108,7135],{"class":66},[52,39110,70],{"class":231},[52,39112,723],{"class":58},[52,39114,6165],{"class":371},[52,39116,729],{"class":58},[52,39118,39119],{"class":54,"line":594},[52,39120,26724],{"class":58},[52,39122,39123,39125,39127],{"class":54,"line":600},[52,39124,2213],{"class":58},[52,39126,2216],{"class":371},[52,39128,105],{"class":58},[52,39130,39131,39133,39135],{"class":54,"line":606},[52,39132,2230],{"class":58},[52,39134,4582],{"class":371},[52,39136,77],{"class":58},[52,39138,39139,39141,39143],{"class":54,"line":653},[52,39140,121],{"class":58},[52,39142,63],{"class":371},[52,39144,77],{"class":58},[43,39146,39147],{"className":2507,"code":39076,"language":2509,"meta":48,"style":48},[31,39148,39149,39157,39163,39173,39183,39187,39195,39203],{"__ignoreMap":48},[52,39150,39151,39153,39155],{"class":54,"line":55},[52,39152,59],{"class":58},[52,39154,63],{"class":371},[52,39156,77],{"class":58},[52,39158,39159,39161],{"class":54,"line":80},[52,39160,83],{"class":58},[52,39162,39029],{"class":371},[52,39164,39165,39167,39169,39171],{"class":54,"line":108},[52,39166,17755],{"class":66},[52,39168,24620],{"class":58},[52,39170,6165],{"class":371},[52,39172,729],{"class":58},[52,39174,39175,39177,39179,39181],{"class":54,"line":118},[52,39176,7135],{"class":66},[52,39178,24620],{"class":58},[52,39180,6165],{"class":371},[52,39182,729],{"class":58},[52,39184,39185],{"class":54,"line":594},[52,39186,26724],{"class":58},[52,39188,39189,39191,39193],{"class":54,"line":600},[52,39190,2213],{"class":58},[52,39192,2216],{"class":371},[52,39194,105],{"class":58},[52,39196,39197,39199,39201],{"class":54,"line":606},[52,39198,2230],{"class":58},[52,39200,4582],{"class":371},[52,39202,77],{"class":58},[52,39204,39205,39207,39209],{"class":54,"line":653},[52,39206,121],{"class":58},[52,39208,63],{"class":371},[52,39210,77],{"class":58},[43,39212,39213],{"className":419,"code":39076,"language":420,"meta":48,"style":48},[31,39214,39215,39223,39229,39241,39253,39257,39265,39273],{"__ignoreMap":48},[52,39216,39217,39219,39221],{"class":54,"line":55},[52,39218,59],{"class":58},[52,39220,63],{"class":371},[52,39222,77],{"class":58},[52,39224,39225,39227],{"class":54,"line":80},[52,39226,83],{"class":58},[52,39228,39029],{"class":371},[52,39230,39231,39233,39235,39237,39239],{"class":54,"line":108},[52,39232,17755],{"class":66},[52,39234,70],{"class":231},[52,39236,723],{"class":58},[52,39238,6165],{"class":371},[52,39240,729],{"class":58},[52,39242,39243,39245,39247,39249,39251],{"class":54,"line":118},[52,39244,7135],{"class":66},[52,39246,70],{"class":231},[52,39248,723],{"class":58},[52,39250,6165],{"class":371},[52,39252,729],{"class":58},[52,39254,39255],{"class":54,"line":594},[52,39256,26724],{"class":58},[52,39258,39259,39261,39263],{"class":54,"line":600},[52,39260,2213],{"class":58},[52,39262,2216],{"class":371},[52,39264,105],{"class":58},[52,39266,39267,39269,39271],{"class":54,"line":606},[52,39268,2230],{"class":58},[52,39270,4582],{"class":371},[52,39272,77],{"class":58},[52,39274,39275,39277,39279],{"class":54,"line":653},[52,39276,121],{"class":58},[52,39278,63],{"class":371},[52,39280,77],{"class":58},[43,39282,39284],{"className":222,"code":39283,"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,39285,39286,39296,39300,39314,39318,39334,39342,39346,39350],{"__ignoreMap":48},[52,39287,39288,39290,39292,39294],{"class":54,"line":55},[52,39289,232],{"class":231},[52,39291,9005],{"class":58},[52,39293,238],{"class":231},[52,39295,9010],{"class":73},[52,39297,39298],{"class":54,"line":80},[52,39299,597],{"emptyLinePlaceholder":171},[52,39301,39302,39304,39306,39308,39310,39312],{"class":54,"line":108},[52,39303,1721],{"class":231},[52,39305,1724],{"class":371},[52,39307,1727],{"class":231},[52,39309,1730],{"class":231},[52,39311,1733],{"class":66},[52,39313,1736],{"class":58},[52,39315,39316],{"class":54,"line":118},[52,39317,1751],{"class":58},[52,39319,39320,39322,39324,39326,39328,39330,39332],{"class":54,"line":594},[52,39321,1756],{"class":58},[52,39323,5025],{"class":73},[52,39325,26969],{"class":58},[52,39327,6165],{"class":371},[52,39329,4052],{"class":58},[52,39331,6165],{"class":371},[52,39333,5033],{"class":58},[52,39335,39336,39338,39340],{"class":54,"line":600},[52,39337,4501],{"class":58},[52,39339,2869],{"class":73},[52,39341,2129],{"class":58},[52,39343,39344],{"class":54,"line":606},[52,39345,4518],{"class":58},[52,39347,39348],{"class":54,"line":653},[52,39349,1773],{"class":58},[52,39351,39352],{"class":54,"line":662},[52,39353,1778],{"class":58},[156,39355,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39357},[39358,39359],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/griddistortion",{"title":4582,"description":38998},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":39366,"title":39367,"body":39368,"category":39630,"componentType":20623,"description":39375,"extension":168,"meta":39631,"navigation":171,"path":39632,"requiresChild":171,"seo":39633,"stem":39634,"__hash__":39635},"components/docs/components/Group.md","Group",{"type":8,"value":39369,"toc":39627},[39370,39373,39376,39378,39380,39625],[11,39371,39367],{"id":39372},"group",[15,39374,39375],{},"Container for organizing and composing child effects",[26676,39377],{"component":39367},[23,39379,26688],{"id":26687},[217,39381,39382,39427,39471,39515,39559],{":tabs":1543},[43,39383,39385],{"className":45,"code":39384,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,39386,39387,39395,39403,39411,39419],{"__ignoreMap":48},[52,39388,39389,39391,39393],{"class":54,"line":55},[52,39390,59],{"class":58},[52,39392,63],{"class":62},[52,39394,77],{"class":58},[52,39396,39397,39399,39401],{"class":54,"line":80},[52,39398,83],{"class":58},[52,39400,39367],{"class":62},[52,39402,77],{"class":58},[52,39404,39405,39407,39409],{"class":54,"line":108},[52,39406,2213],{"class":58},[52,39408,2216],{"class":62},[52,39410,105],{"class":58},[52,39412,39413,39415,39417],{"class":54,"line":118},[52,39414,2230],{"class":58},[52,39416,39367],{"class":62},[52,39418,77],{"class":58},[52,39420,39421,39423,39425],{"class":54,"line":594},[52,39422,121],{"class":58},[52,39424,63],{"class":62},[52,39426,77],{"class":58},[43,39428,39429],{"className":360,"code":39384,"language":362,"meta":48,"style":48},[31,39430,39431,39439,39447,39455,39463],{"__ignoreMap":48},[52,39432,39433,39435,39437],{"class":54,"line":55},[52,39434,59],{"class":58},[52,39436,63],{"class":371},[52,39438,77],{"class":58},[52,39440,39441,39443,39445],{"class":54,"line":80},[52,39442,83],{"class":58},[52,39444,39367],{"class":371},[52,39446,77],{"class":58},[52,39448,39449,39451,39453],{"class":54,"line":108},[52,39450,2213],{"class":58},[52,39452,2216],{"class":371},[52,39454,105],{"class":58},[52,39456,39457,39459,39461],{"class":54,"line":118},[52,39458,2230],{"class":58},[52,39460,39367],{"class":371},[52,39462,77],{"class":58},[52,39464,39465,39467,39469],{"class":54,"line":594},[52,39466,121],{"class":58},[52,39468,63],{"class":371},[52,39470,77],{"class":58},[43,39472,39473],{"className":2507,"code":39384,"language":2509,"meta":48,"style":48},[31,39474,39475,39483,39491,39499,39507],{"__ignoreMap":48},[52,39476,39477,39479,39481],{"class":54,"line":55},[52,39478,59],{"class":58},[52,39480,63],{"class":371},[52,39482,77],{"class":58},[52,39484,39485,39487,39489],{"class":54,"line":80},[52,39486,83],{"class":58},[52,39488,39367],{"class":371},[52,39490,77],{"class":58},[52,39492,39493,39495,39497],{"class":54,"line":108},[52,39494,2213],{"class":58},[52,39496,2216],{"class":371},[52,39498,105],{"class":58},[52,39500,39501,39503,39505],{"class":54,"line":118},[52,39502,2230],{"class":58},[52,39504,39367],{"class":371},[52,39506,77],{"class":58},[52,39508,39509,39511,39513],{"class":54,"line":594},[52,39510,121],{"class":58},[52,39512,63],{"class":371},[52,39514,77],{"class":58},[43,39516,39517],{"className":419,"code":39384,"language":420,"meta":48,"style":48},[31,39518,39519,39527,39535,39543,39551],{"__ignoreMap":48},[52,39520,39521,39523,39525],{"class":54,"line":55},[52,39522,59],{"class":58},[52,39524,63],{"class":371},[52,39526,77],{"class":58},[52,39528,39529,39531,39533],{"class":54,"line":80},[52,39530,83],{"class":58},[52,39532,39367],{"class":371},[52,39534,77],{"class":58},[52,39536,39537,39539,39541],{"class":54,"line":108},[52,39538,2213],{"class":58},[52,39540,2216],{"class":371},[52,39542,105],{"class":58},[52,39544,39545,39547,39549],{"class":54,"line":118},[52,39546,2230],{"class":58},[52,39548,39367],{"class":371},[52,39550,77],{"class":58},[52,39552,39553,39555,39557],{"class":54,"line":594},[52,39554,121],{"class":58},[52,39556,63],{"class":371},[52,39558,77],{"class":58},[43,39560,39562],{"className":222,"code":39561,"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,39563,39564,39574,39578,39592,39596,39605,39613,39617,39621],{"__ignoreMap":48},[52,39565,39566,39568,39570,39572],{"class":54,"line":55},[52,39567,232],{"class":231},[52,39569,9005],{"class":58},[52,39571,238],{"class":231},[52,39573,9010],{"class":73},[52,39575,39576],{"class":54,"line":80},[52,39577,597],{"emptyLinePlaceholder":171},[52,39579,39580,39582,39584,39586,39588,39590],{"class":54,"line":108},[52,39581,1721],{"class":231},[52,39583,1724],{"class":371},[52,39585,1727],{"class":231},[52,39587,1730],{"class":231},[52,39589,1733],{"class":66},[52,39591,1736],{"class":58},[52,39593,39594],{"class":54,"line":118},[52,39595,1751],{"class":58},[52,39597,39598,39600,39603],{"class":54,"line":594},[52,39599,1756],{"class":58},[52,39601,39602],{"class":73},"'Group'",[52,39604,4496],{"class":58},[52,39606,39607,39609,39611],{"class":54,"line":600},[52,39608,4501],{"class":58},[52,39610,2869],{"class":73},[52,39612,2129],{"class":58},[52,39614,39615],{"class":54,"line":606},[52,39616,4518],{"class":58},[52,39618,39619],{"class":54,"line":653},[52,39620,1773],{"class":58},[52,39622,39623],{"class":54,"line":662},[52,39624,1778],{"class":58},[156,39626,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":39628},[39629],{"id":26687,"depth":80,"text":26688},"Utilities",{},"/docs/components/group",{"title":39367,"description":39375},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":39637,"title":39638,"body":39639,"category":27278,"componentType":20623,"description":39646,"extension":168,"meta":39907,"navigation":171,"path":39908,"requiresChild":171,"seo":39909,"stem":39910,"__hash__":39911},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":39640,"toc":39903},[39641,39644,39647,39649,39651,39654,39656,39901],[11,39642,39638],{"id":39643},"halftone",[15,39645,39646],{},"Halftone dot pattern effect for printing aesthetics",[26676,39648],{"component":39638},[23,39650,26680],{"id":21278},[26682,39652],{":props":39653},"[{\"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,39655,26688],{"id":26687},[217,39657,39658,39703,39747,39791,39835],{":tabs":1543},[43,39659,39661],{"className":45,"code":39660,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[31,39662,39663,39671,39679,39687,39695],{"__ignoreMap":48},[52,39664,39665,39667,39669],{"class":54,"line":55},[52,39666,59],{"class":58},[52,39668,63],{"class":62},[52,39670,77],{"class":58},[52,39672,39673,39675,39677],{"class":54,"line":80},[52,39674,83],{"class":58},[52,39676,39638],{"class":62},[52,39678,77],{"class":58},[52,39680,39681,39683,39685],{"class":54,"line":108},[52,39682,2213],{"class":58},[52,39684,2216],{"class":62},[52,39686,105],{"class":58},[52,39688,39689,39691,39693],{"class":54,"line":118},[52,39690,2230],{"class":58},[52,39692,39638],{"class":62},[52,39694,77],{"class":58},[52,39696,39697,39699,39701],{"class":54,"line":594},[52,39698,121],{"class":58},[52,39700,63],{"class":62},[52,39702,77],{"class":58},[43,39704,39705],{"className":360,"code":39660,"language":362,"meta":48,"style":48},[31,39706,39707,39715,39723,39731,39739],{"__ignoreMap":48},[52,39708,39709,39711,39713],{"class":54,"line":55},[52,39710,59],{"class":58},[52,39712,63],{"class":371},[52,39714,77],{"class":58},[52,39716,39717,39719,39721],{"class":54,"line":80},[52,39718,83],{"class":58},[52,39720,39638],{"class":371},[52,39722,77],{"class":58},[52,39724,39725,39727,39729],{"class":54,"line":108},[52,39726,2213],{"class":58},[52,39728,2216],{"class":371},[52,39730,105],{"class":58},[52,39732,39733,39735,39737],{"class":54,"line":118},[52,39734,2230],{"class":58},[52,39736,39638],{"class":371},[52,39738,77],{"class":58},[52,39740,39741,39743,39745],{"class":54,"line":594},[52,39742,121],{"class":58},[52,39744,63],{"class":371},[52,39746,77],{"class":58},[43,39748,39749],{"className":2507,"code":39660,"language":2509,"meta":48,"style":48},[31,39750,39751,39759,39767,39775,39783],{"__ignoreMap":48},[52,39752,39753,39755,39757],{"class":54,"line":55},[52,39754,59],{"class":58},[52,39756,63],{"class":371},[52,39758,77],{"class":58},[52,39760,39761,39763,39765],{"class":54,"line":80},[52,39762,83],{"class":58},[52,39764,39638],{"class":371},[52,39766,77],{"class":58},[52,39768,39769,39771,39773],{"class":54,"line":108},[52,39770,2213],{"class":58},[52,39772,2216],{"class":371},[52,39774,105],{"class":58},[52,39776,39777,39779,39781],{"class":54,"line":118},[52,39778,2230],{"class":58},[52,39780,39638],{"class":371},[52,39782,77],{"class":58},[52,39784,39785,39787,39789],{"class":54,"line":594},[52,39786,121],{"class":58},[52,39788,63],{"class":371},[52,39790,77],{"class":58},[43,39792,39793],{"className":419,"code":39660,"language":420,"meta":48,"style":48},[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":371},[52,39802,77],{"class":58},[52,39804,39805,39807,39809],{"class":54,"line":80},[52,39806,83],{"class":58},[52,39808,39638],{"class":371},[52,39810,77],{"class":58},[52,39812,39813,39815,39817],{"class":54,"line":108},[52,39814,2213],{"class":58},[52,39816,2216],{"class":371},[52,39818,105],{"class":58},[52,39820,39821,39823,39825],{"class":54,"line":118},[52,39822,2230],{"class":58},[52,39824,39638],{"class":371},[52,39826,77],{"class":58},[52,39828,39829,39831,39833],{"class":54,"line":594},[52,39830,121],{"class":58},[52,39832,63],{"class":371},[52,39834,77],{"class":58},[43,39836,39838],{"className":222,"code":39837,"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,39839,39840,39850,39854,39868,39872,39881,39889,39893,39897],{"__ignoreMap":48},[52,39841,39842,39844,39846,39848],{"class":54,"line":55},[52,39843,232],{"class":231},[52,39845,9005],{"class":58},[52,39847,238],{"class":231},[52,39849,9010],{"class":73},[52,39851,39852],{"class":54,"line":80},[52,39853,597],{"emptyLinePlaceholder":171},[52,39855,39856,39858,39860,39862,39864,39866],{"class":54,"line":108},[52,39857,1721],{"class":231},[52,39859,1724],{"class":371},[52,39861,1727],{"class":231},[52,39863,1730],{"class":231},[52,39865,1733],{"class":66},[52,39867,1736],{"class":58},[52,39869,39870],{"class":54,"line":118},[52,39871,1751],{"class":58},[52,39873,39874,39876,39879],{"class":54,"line":594},[52,39875,1756],{"class":58},[52,39877,39878],{"class":73},"'Halftone'",[52,39880,4496],{"class":58},[52,39882,39883,39885,39887],{"class":54,"line":600},[52,39884,4501],{"class":58},[52,39886,2869],{"class":73},[52,39888,2129],{"class":58},[52,39890,39891],{"class":54,"line":606},[52,39892,4518],{"class":58},[52,39894,39895],{"class":54,"line":653},[52,39896,1773],{"class":58},[52,39898,39899],{"class":54,"line":662},[52,39900,1778],{"class":58},[156,39902,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":39904},[39905,39906],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/halftone",{"title":39638,"description":39646},"docs/components/Halftone","FE9bbvMNDaNzrmALJi6cgBqUj0aRisbj-Tjo1odmRlE",{"id":39913,"title":39914,"body":39915,"category":27535,"componentType":20617,"description":39922,"extension":168,"meta":40107,"navigation":171,"path":40108,"requiresChild":27538,"seo":40109,"stem":40110,"__hash__":40111},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":39916,"toc":40103},[39917,39920,39923,39925,39927,39930,39932,40101],[11,39918,39914],{"id":39919},"hexgrid",[15,39921,39922],{},"Honeycomb hexagonal grid pattern",[26676,39924],{"component":39914},[23,39926,26680],{"id":21278},[26682,39928],{":props":39929},"[{\"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,39931,26688],{"id":26687},[217,39933,39934,39963,39991,40019,40047],{":tabs":1543},[43,39935,39937],{"className":45,"code":39936,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,39938,39939,39947,39955],{"__ignoreMap":48},[52,39940,39941,39943,39945],{"class":54,"line":55},[52,39942,59],{"class":58},[52,39944,63],{"class":62},[52,39946,77],{"class":58},[52,39948,39949,39951,39953],{"class":54,"line":80},[52,39950,83],{"class":58},[52,39952,39914],{"class":62},[52,39954,105],{"class":58},[52,39956,39957,39959,39961],{"class":54,"line":108},[52,39958,121],{"class":58},[52,39960,63],{"class":62},[52,39962,77],{"class":58},[43,39964,39965],{"className":360,"code":39936,"language":362,"meta":48,"style":48},[31,39966,39967,39975,39983],{"__ignoreMap":48},[52,39968,39969,39971,39973],{"class":54,"line":55},[52,39970,59],{"class":58},[52,39972,63],{"class":371},[52,39974,77],{"class":58},[52,39976,39977,39979,39981],{"class":54,"line":80},[52,39978,83],{"class":58},[52,39980,39914],{"class":371},[52,39982,105],{"class":58},[52,39984,39985,39987,39989],{"class":54,"line":108},[52,39986,121],{"class":58},[52,39988,63],{"class":371},[52,39990,77],{"class":58},[43,39992,39993],{"className":2507,"code":39936,"language":2509,"meta":48,"style":48},[31,39994,39995,40003,40011],{"__ignoreMap":48},[52,39996,39997,39999,40001],{"class":54,"line":55},[52,39998,59],{"class":58},[52,40000,63],{"class":371},[52,40002,77],{"class":58},[52,40004,40005,40007,40009],{"class":54,"line":80},[52,40006,83],{"class":58},[52,40008,39914],{"class":371},[52,40010,105],{"class":58},[52,40012,40013,40015,40017],{"class":54,"line":108},[52,40014,121],{"class":58},[52,40016,63],{"class":371},[52,40018,77],{"class":58},[43,40020,40021],{"className":419,"code":39936,"language":420,"meta":48,"style":48},[31,40022,40023,40031,40039],{"__ignoreMap":48},[52,40024,40025,40027,40029],{"class":54,"line":55},[52,40026,59],{"class":58},[52,40028,63],{"class":371},[52,40030,77],{"class":58},[52,40032,40033,40035,40037],{"class":54,"line":80},[52,40034,83],{"class":58},[52,40036,39914],{"class":371},[52,40038,105],{"class":58},[52,40040,40041,40043,40045],{"class":54,"line":108},[52,40042,121],{"class":58},[52,40044,63],{"class":371},[52,40046,77],{"class":58},[43,40048,40050],{"className":222,"code":40049,"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,40051,40052,40062,40066,40080,40084,40093,40097],{"__ignoreMap":48},[52,40053,40054,40056,40058,40060],{"class":54,"line":55},[52,40055,232],{"class":231},[52,40057,9005],{"class":58},[52,40059,238],{"class":231},[52,40061,9010],{"class":73},[52,40063,40064],{"class":54,"line":80},[52,40065,597],{"emptyLinePlaceholder":171},[52,40067,40068,40070,40072,40074,40076,40078],{"class":54,"line":108},[52,40069,1721],{"class":231},[52,40071,1724],{"class":371},[52,40073,1727],{"class":231},[52,40075,1730],{"class":231},[52,40077,1733],{"class":66},[52,40079,1736],{"class":58},[52,40081,40082],{"class":54,"line":118},[52,40083,1751],{"class":58},[52,40085,40086,40088,40091],{"class":54,"line":594},[52,40087,1756],{"class":58},[52,40089,40090],{"class":73},"'HexGrid'",[52,40092,2129],{"class":58},[52,40094,40095],{"class":54,"line":600},[52,40096,1773],{"class":58},[52,40098,40099],{"class":54,"line":606},[52,40100,1778],{"class":58},[156,40102,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40104},[40105,40106],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/hexgrid",{"title":39914,"description":39922},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":40113,"title":40114,"body":40115,"category":28546,"componentType":20623,"description":40122,"extension":168,"meta":40383,"navigation":171,"path":40384,"requiresChild":171,"seo":40385,"stem":40386,"__hash__":40387},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":40116,"toc":40379},[40117,40120,40123,40125,40127,40130,40132,40377],[11,40118,40114],{"id":40119},"hueshift",[15,40121,40122],{},"Rotate hue around the color wheel",[26676,40124],{"component":40114},[23,40126,26680],{"id":21278},[26682,40128],{":props":40129},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,40131,26688],{"id":26687},[217,40133,40134,40179,40223,40267,40311],{":tabs":1543},[43,40135,40137],{"className":45,"code":40136,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,40138,40139,40147,40155,40163,40171],{"__ignoreMap":48},[52,40140,40141,40143,40145],{"class":54,"line":55},[52,40142,59],{"class":58},[52,40144,63],{"class":62},[52,40146,77],{"class":58},[52,40148,40149,40151,40153],{"class":54,"line":80},[52,40150,83],{"class":58},[52,40152,40114],{"class":62},[52,40154,77],{"class":58},[52,40156,40157,40159,40161],{"class":54,"line":108},[52,40158,2213],{"class":58},[52,40160,2216],{"class":62},[52,40162,105],{"class":58},[52,40164,40165,40167,40169],{"class":54,"line":118},[52,40166,2230],{"class":58},[52,40168,40114],{"class":62},[52,40170,77],{"class":58},[52,40172,40173,40175,40177],{"class":54,"line":594},[52,40174,121],{"class":58},[52,40176,63],{"class":62},[52,40178,77],{"class":58},[43,40180,40181],{"className":360,"code":40136,"language":362,"meta":48,"style":48},[31,40182,40183,40191,40199,40207,40215],{"__ignoreMap":48},[52,40184,40185,40187,40189],{"class":54,"line":55},[52,40186,59],{"class":58},[52,40188,63],{"class":371},[52,40190,77],{"class":58},[52,40192,40193,40195,40197],{"class":54,"line":80},[52,40194,83],{"class":58},[52,40196,40114],{"class":371},[52,40198,77],{"class":58},[52,40200,40201,40203,40205],{"class":54,"line":108},[52,40202,2213],{"class":58},[52,40204,2216],{"class":371},[52,40206,105],{"class":58},[52,40208,40209,40211,40213],{"class":54,"line":118},[52,40210,2230],{"class":58},[52,40212,40114],{"class":371},[52,40214,77],{"class":58},[52,40216,40217,40219,40221],{"class":54,"line":594},[52,40218,121],{"class":58},[52,40220,63],{"class":371},[52,40222,77],{"class":58},[43,40224,40225],{"className":2507,"code":40136,"language":2509,"meta":48,"style":48},[31,40226,40227,40235,40243,40251,40259],{"__ignoreMap":48},[52,40228,40229,40231,40233],{"class":54,"line":55},[52,40230,59],{"class":58},[52,40232,63],{"class":371},[52,40234,77],{"class":58},[52,40236,40237,40239,40241],{"class":54,"line":80},[52,40238,83],{"class":58},[52,40240,40114],{"class":371},[52,40242,77],{"class":58},[52,40244,40245,40247,40249],{"class":54,"line":108},[52,40246,2213],{"class":58},[52,40248,2216],{"class":371},[52,40250,105],{"class":58},[52,40252,40253,40255,40257],{"class":54,"line":118},[52,40254,2230],{"class":58},[52,40256,40114],{"class":371},[52,40258,77],{"class":58},[52,40260,40261,40263,40265],{"class":54,"line":594},[52,40262,121],{"class":58},[52,40264,63],{"class":371},[52,40266,77],{"class":58},[43,40268,40269],{"className":419,"code":40136,"language":420,"meta":48,"style":48},[31,40270,40271,40279,40287,40295,40303],{"__ignoreMap":48},[52,40272,40273,40275,40277],{"class":54,"line":55},[52,40274,59],{"class":58},[52,40276,63],{"class":371},[52,40278,77],{"class":58},[52,40280,40281,40283,40285],{"class":54,"line":80},[52,40282,83],{"class":58},[52,40284,40114],{"class":371},[52,40286,77],{"class":58},[52,40288,40289,40291,40293],{"class":54,"line":108},[52,40290,2213],{"class":58},[52,40292,2216],{"class":371},[52,40294,105],{"class":58},[52,40296,40297,40299,40301],{"class":54,"line":118},[52,40298,2230],{"class":58},[52,40300,40114],{"class":371},[52,40302,77],{"class":58},[52,40304,40305,40307,40309],{"class":54,"line":594},[52,40306,121],{"class":58},[52,40308,63],{"class":371},[52,40310,77],{"class":58},[43,40312,40314],{"className":222,"code":40313,"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,40315,40316,40326,40330,40344,40348,40357,40365,40369,40373],{"__ignoreMap":48},[52,40317,40318,40320,40322,40324],{"class":54,"line":55},[52,40319,232],{"class":231},[52,40321,9005],{"class":58},[52,40323,238],{"class":231},[52,40325,9010],{"class":73},[52,40327,40328],{"class":54,"line":80},[52,40329,597],{"emptyLinePlaceholder":171},[52,40331,40332,40334,40336,40338,40340,40342],{"class":54,"line":108},[52,40333,1721],{"class":231},[52,40335,1724],{"class":371},[52,40337,1727],{"class":231},[52,40339,1730],{"class":231},[52,40341,1733],{"class":66},[52,40343,1736],{"class":58},[52,40345,40346],{"class":54,"line":118},[52,40347,1751],{"class":58},[52,40349,40350,40352,40355],{"class":54,"line":594},[52,40351,1756],{"class":58},[52,40353,40354],{"class":73},"'HueShift'",[52,40356,4496],{"class":58},[52,40358,40359,40361,40363],{"class":54,"line":600},[52,40360,4501],{"class":58},[52,40362,2869],{"class":73},[52,40364,2129],{"class":58},[52,40366,40367],{"class":54,"line":606},[52,40368,4518],{"class":58},[52,40370,40371],{"class":54,"line":653},[52,40372,1773],{"class":58},[52,40374,40375],{"class":54,"line":662},[52,40376,1778],{"class":58},[156,40378,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40380},[40381,40382],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/hueshift",{"title":40114,"description":40122},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":40389,"title":40390,"body":40391,"category":27535,"componentType":20617,"description":40398,"extension":168,"meta":40583,"navigation":171,"path":40584,"requiresChild":27538,"seo":40585,"stem":40586,"__hash__":40587},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":40392,"toc":40579},[40393,40396,40399,40401,40403,40406,40408,40577],[11,40394,40390],{"id":40395},"imagetexture",[15,40397,40398],{},"Display an image with customizable object-fit modes",[26676,40400],{"component":40390},[23,40402,26680],{"id":21278},[26682,40404],{":props":40405},"[{\"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,40407,26688],{"id":26687},[217,40409,40410,40439,40467,40495,40523],{":tabs":1543},[43,40411,40413],{"className":45,"code":40412,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,40414,40415,40423,40431],{"__ignoreMap":48},[52,40416,40417,40419,40421],{"class":54,"line":55},[52,40418,59],{"class":58},[52,40420,63],{"class":62},[52,40422,77],{"class":58},[52,40424,40425,40427,40429],{"class":54,"line":80},[52,40426,83],{"class":58},[52,40428,40390],{"class":62},[52,40430,105],{"class":58},[52,40432,40433,40435,40437],{"class":54,"line":108},[52,40434,121],{"class":58},[52,40436,63],{"class":62},[52,40438,77],{"class":58},[43,40440,40441],{"className":360,"code":40412,"language":362,"meta":48,"style":48},[31,40442,40443,40451,40459],{"__ignoreMap":48},[52,40444,40445,40447,40449],{"class":54,"line":55},[52,40446,59],{"class":58},[52,40448,63],{"class":371},[52,40450,77],{"class":58},[52,40452,40453,40455,40457],{"class":54,"line":80},[52,40454,83],{"class":58},[52,40456,40390],{"class":371},[52,40458,105],{"class":58},[52,40460,40461,40463,40465],{"class":54,"line":108},[52,40462,121],{"class":58},[52,40464,63],{"class":371},[52,40466,77],{"class":58},[43,40468,40469],{"className":2507,"code":40412,"language":2509,"meta":48,"style":48},[31,40470,40471,40479,40487],{"__ignoreMap":48},[52,40472,40473,40475,40477],{"class":54,"line":55},[52,40474,59],{"class":58},[52,40476,63],{"class":371},[52,40478,77],{"class":58},[52,40480,40481,40483,40485],{"class":54,"line":80},[52,40482,83],{"class":58},[52,40484,40390],{"class":371},[52,40486,105],{"class":58},[52,40488,40489,40491,40493],{"class":54,"line":108},[52,40490,121],{"class":58},[52,40492,63],{"class":371},[52,40494,77],{"class":58},[43,40496,40497],{"className":419,"code":40412,"language":420,"meta":48,"style":48},[31,40498,40499,40507,40515],{"__ignoreMap":48},[52,40500,40501,40503,40505],{"class":54,"line":55},[52,40502,59],{"class":58},[52,40504,63],{"class":371},[52,40506,77],{"class":58},[52,40508,40509,40511,40513],{"class":54,"line":80},[52,40510,83],{"class":58},[52,40512,40390],{"class":371},[52,40514,105],{"class":58},[52,40516,40517,40519,40521],{"class":54,"line":108},[52,40518,121],{"class":58},[52,40520,63],{"class":371},[52,40522,77],{"class":58},[43,40524,40526],{"className":222,"code":40525,"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,40527,40528,40538,40542,40556,40560,40569,40573],{"__ignoreMap":48},[52,40529,40530,40532,40534,40536],{"class":54,"line":55},[52,40531,232],{"class":231},[52,40533,9005],{"class":58},[52,40535,238],{"class":231},[52,40537,9010],{"class":73},[52,40539,40540],{"class":54,"line":80},[52,40541,597],{"emptyLinePlaceholder":171},[52,40543,40544,40546,40548,40550,40552,40554],{"class":54,"line":108},[52,40545,1721],{"class":231},[52,40547,1724],{"class":371},[52,40549,1727],{"class":231},[52,40551,1730],{"class":231},[52,40553,1733],{"class":66},[52,40555,1736],{"class":58},[52,40557,40558],{"class":54,"line":118},[52,40559,1751],{"class":58},[52,40561,40562,40564,40567],{"class":54,"line":594},[52,40563,1756],{"class":58},[52,40565,40566],{"class":73},"'ImageTexture'",[52,40568,2129],{"class":58},[52,40570,40571],{"class":54,"line":600},[52,40572,1773],{"class":58},[52,40574,40575],{"class":54,"line":606},[52,40576,1778],{"class":58},[156,40578,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40580},[40581,40582],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/imagetexture",{"title":40390,"description":40398},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":40589,"title":40590,"body":40591,"category":28546,"componentType":20623,"description":40598,"extension":168,"meta":40853,"navigation":171,"path":40854,"requiresChild":171,"seo":40855,"stem":40856,"__hash__":40857},"components/docs/components/Invert.md","Invert",{"type":8,"value":40592,"toc":40850},[40593,40596,40599,40601,40603,40848],[11,40594,40590],{"id":40595},"invert",[15,40597,40598],{},"Invert RGB colors while preserving alpha",[26676,40600],{"component":40590},[23,40602,26688],{"id":26687},[217,40604,40605,40650,40694,40738,40782],{":tabs":1543},[43,40606,40608],{"className":45,"code":40607,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,40609,40610,40618,40626,40634,40642],{"__ignoreMap":48},[52,40611,40612,40614,40616],{"class":54,"line":55},[52,40613,59],{"class":58},[52,40615,63],{"class":62},[52,40617,77],{"class":58},[52,40619,40620,40622,40624],{"class":54,"line":80},[52,40621,83],{"class":58},[52,40623,40590],{"class":62},[52,40625,77],{"class":58},[52,40627,40628,40630,40632],{"class":54,"line":108},[52,40629,2213],{"class":58},[52,40631,2216],{"class":62},[52,40633,105],{"class":58},[52,40635,40636,40638,40640],{"class":54,"line":118},[52,40637,2230],{"class":58},[52,40639,40590],{"class":62},[52,40641,77],{"class":58},[52,40643,40644,40646,40648],{"class":54,"line":594},[52,40645,121],{"class":58},[52,40647,63],{"class":62},[52,40649,77],{"class":58},[43,40651,40652],{"className":360,"code":40607,"language":362,"meta":48,"style":48},[31,40653,40654,40662,40670,40678,40686],{"__ignoreMap":48},[52,40655,40656,40658,40660],{"class":54,"line":55},[52,40657,59],{"class":58},[52,40659,63],{"class":371},[52,40661,77],{"class":58},[52,40663,40664,40666,40668],{"class":54,"line":80},[52,40665,83],{"class":58},[52,40667,40590],{"class":371},[52,40669,77],{"class":58},[52,40671,40672,40674,40676],{"class":54,"line":108},[52,40673,2213],{"class":58},[52,40675,2216],{"class":371},[52,40677,105],{"class":58},[52,40679,40680,40682,40684],{"class":54,"line":118},[52,40681,2230],{"class":58},[52,40683,40590],{"class":371},[52,40685,77],{"class":58},[52,40687,40688,40690,40692],{"class":54,"line":594},[52,40689,121],{"class":58},[52,40691,63],{"class":371},[52,40693,77],{"class":58},[43,40695,40696],{"className":2507,"code":40607,"language":2509,"meta":48,"style":48},[31,40697,40698,40706,40714,40722,40730],{"__ignoreMap":48},[52,40699,40700,40702,40704],{"class":54,"line":55},[52,40701,59],{"class":58},[52,40703,63],{"class":371},[52,40705,77],{"class":58},[52,40707,40708,40710,40712],{"class":54,"line":80},[52,40709,83],{"class":58},[52,40711,40590],{"class":371},[52,40713,77],{"class":58},[52,40715,40716,40718,40720],{"class":54,"line":108},[52,40717,2213],{"class":58},[52,40719,2216],{"class":371},[52,40721,105],{"class":58},[52,40723,40724,40726,40728],{"class":54,"line":118},[52,40725,2230],{"class":58},[52,40727,40590],{"class":371},[52,40729,77],{"class":58},[52,40731,40732,40734,40736],{"class":54,"line":594},[52,40733,121],{"class":58},[52,40735,63],{"class":371},[52,40737,77],{"class":58},[43,40739,40740],{"className":419,"code":40607,"language":420,"meta":48,"style":48},[31,40741,40742,40750,40758,40766,40774],{"__ignoreMap":48},[52,40743,40744,40746,40748],{"class":54,"line":55},[52,40745,59],{"class":58},[52,40747,63],{"class":371},[52,40749,77],{"class":58},[52,40751,40752,40754,40756],{"class":54,"line":80},[52,40753,83],{"class":58},[52,40755,40590],{"class":371},[52,40757,77],{"class":58},[52,40759,40760,40762,40764],{"class":54,"line":108},[52,40761,2213],{"class":58},[52,40763,2216],{"class":371},[52,40765,105],{"class":58},[52,40767,40768,40770,40772],{"class":54,"line":118},[52,40769,2230],{"class":58},[52,40771,40590],{"class":371},[52,40773,77],{"class":58},[52,40775,40776,40778,40780],{"class":54,"line":594},[52,40777,121],{"class":58},[52,40779,63],{"class":371},[52,40781,77],{"class":58},[43,40783,40785],{"className":222,"code":40784,"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,40786,40787,40797,40801,40815,40819,40828,40836,40840,40844],{"__ignoreMap":48},[52,40788,40789,40791,40793,40795],{"class":54,"line":55},[52,40790,232],{"class":231},[52,40792,9005],{"class":58},[52,40794,238],{"class":231},[52,40796,9010],{"class":73},[52,40798,40799],{"class":54,"line":80},[52,40800,597],{"emptyLinePlaceholder":171},[52,40802,40803,40805,40807,40809,40811,40813],{"class":54,"line":108},[52,40804,1721],{"class":231},[52,40806,1724],{"class":371},[52,40808,1727],{"class":231},[52,40810,1730],{"class":231},[52,40812,1733],{"class":66},[52,40814,1736],{"class":58},[52,40816,40817],{"class":54,"line":118},[52,40818,1751],{"class":58},[52,40820,40821,40823,40826],{"class":54,"line":594},[52,40822,1756],{"class":58},[52,40824,40825],{"class":73},"'Invert'",[52,40827,4496],{"class":58},[52,40829,40830,40832,40834],{"class":54,"line":600},[52,40831,4501],{"class":58},[52,40833,2869],{"class":73},[52,40835,2129],{"class":58},[52,40837,40838],{"class":54,"line":606},[52,40839,4518],{"class":58},[52,40841,40842],{"class":54,"line":653},[52,40843,1773],{"class":58},[52,40845,40846],{"class":54,"line":662},[52,40847,1778],{"class":58},[156,40849,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40851},[40852],{"id":26687,"depth":80,"text":26688},{},"/docs/components/invert",{"title":40590,"description":40598},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":40859,"title":40860,"body":40861,"category":28880,"componentType":20623,"description":40868,"extension":168,"meta":41129,"navigation":171,"path":41130,"requiresChild":171,"seo":41131,"stem":41132,"__hash__":41133},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":40862,"toc":41125},[40863,40866,40869,40871,40873,40876,40878,41123],[11,40864,40860],{"id":40865},"kaleidoscope",[15,40867,40868],{},"Create a kaleidoscope effect with radial mirrored segments",[26676,40870],{"component":40860},[23,40872,26680],{"id":21278},[26682,40874],{":props":40875},"[{\"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,40877,26688],{"id":26687},[217,40879,40880,40925,40969,41013,41057],{":tabs":1543},[43,40881,40883],{"className":45,"code":40882,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,40884,40885,40893,40901,40909,40917],{"__ignoreMap":48},[52,40886,40887,40889,40891],{"class":54,"line":55},[52,40888,59],{"class":58},[52,40890,63],{"class":62},[52,40892,77],{"class":58},[52,40894,40895,40897,40899],{"class":54,"line":80},[52,40896,83],{"class":58},[52,40898,40860],{"class":62},[52,40900,77],{"class":58},[52,40902,40903,40905,40907],{"class":54,"line":108},[52,40904,2213],{"class":58},[52,40906,2216],{"class":62},[52,40908,105],{"class":58},[52,40910,40911,40913,40915],{"class":54,"line":118},[52,40912,2230],{"class":58},[52,40914,40860],{"class":62},[52,40916,77],{"class":58},[52,40918,40919,40921,40923],{"class":54,"line":594},[52,40920,121],{"class":58},[52,40922,63],{"class":62},[52,40924,77],{"class":58},[43,40926,40927],{"className":360,"code":40882,"language":362,"meta":48,"style":48},[31,40928,40929,40937,40945,40953,40961],{"__ignoreMap":48},[52,40930,40931,40933,40935],{"class":54,"line":55},[52,40932,59],{"class":58},[52,40934,63],{"class":371},[52,40936,77],{"class":58},[52,40938,40939,40941,40943],{"class":54,"line":80},[52,40940,83],{"class":58},[52,40942,40860],{"class":371},[52,40944,77],{"class":58},[52,40946,40947,40949,40951],{"class":54,"line":108},[52,40948,2213],{"class":58},[52,40950,2216],{"class":371},[52,40952,105],{"class":58},[52,40954,40955,40957,40959],{"class":54,"line":118},[52,40956,2230],{"class":58},[52,40958,40860],{"class":371},[52,40960,77],{"class":58},[52,40962,40963,40965,40967],{"class":54,"line":594},[52,40964,121],{"class":58},[52,40966,63],{"class":371},[52,40968,77],{"class":58},[43,40970,40971],{"className":2507,"code":40882,"language":2509,"meta":48,"style":48},[31,40972,40973,40981,40989,40997,41005],{"__ignoreMap":48},[52,40974,40975,40977,40979],{"class":54,"line":55},[52,40976,59],{"class":58},[52,40978,63],{"class":371},[52,40980,77],{"class":58},[52,40982,40983,40985,40987],{"class":54,"line":80},[52,40984,83],{"class":58},[52,40986,40860],{"class":371},[52,40988,77],{"class":58},[52,40990,40991,40993,40995],{"class":54,"line":108},[52,40992,2213],{"class":58},[52,40994,2216],{"class":371},[52,40996,105],{"class":58},[52,40998,40999,41001,41003],{"class":54,"line":118},[52,41000,2230],{"class":58},[52,41002,40860],{"class":371},[52,41004,77],{"class":58},[52,41006,41007,41009,41011],{"class":54,"line":594},[52,41008,121],{"class":58},[52,41010,63],{"class":371},[52,41012,77],{"class":58},[43,41014,41015],{"className":419,"code":40882,"language":420,"meta":48,"style":48},[31,41016,41017,41025,41033,41041,41049],{"__ignoreMap":48},[52,41018,41019,41021,41023],{"class":54,"line":55},[52,41020,59],{"class":58},[52,41022,63],{"class":371},[52,41024,77],{"class":58},[52,41026,41027,41029,41031],{"class":54,"line":80},[52,41028,83],{"class":58},[52,41030,40860],{"class":371},[52,41032,77],{"class":58},[52,41034,41035,41037,41039],{"class":54,"line":108},[52,41036,2213],{"class":58},[52,41038,2216],{"class":371},[52,41040,105],{"class":58},[52,41042,41043,41045,41047],{"class":54,"line":118},[52,41044,2230],{"class":58},[52,41046,40860],{"class":371},[52,41048,77],{"class":58},[52,41050,41051,41053,41055],{"class":54,"line":594},[52,41052,121],{"class":58},[52,41054,63],{"class":371},[52,41056,77],{"class":58},[43,41058,41060],{"className":222,"code":41059,"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,41061,41062,41072,41076,41090,41094,41103,41111,41115,41119],{"__ignoreMap":48},[52,41063,41064,41066,41068,41070],{"class":54,"line":55},[52,41065,232],{"class":231},[52,41067,9005],{"class":58},[52,41069,238],{"class":231},[52,41071,9010],{"class":73},[52,41073,41074],{"class":54,"line":80},[52,41075,597],{"emptyLinePlaceholder":171},[52,41077,41078,41080,41082,41084,41086,41088],{"class":54,"line":108},[52,41079,1721],{"class":231},[52,41081,1724],{"class":371},[52,41083,1727],{"class":231},[52,41085,1730],{"class":231},[52,41087,1733],{"class":66},[52,41089,1736],{"class":58},[52,41091,41092],{"class":54,"line":118},[52,41093,1751],{"class":58},[52,41095,41096,41098,41101],{"class":54,"line":594},[52,41097,1756],{"class":58},[52,41099,41100],{"class":73},"'Kaleidoscope'",[52,41102,4496],{"class":58},[52,41104,41105,41107,41109],{"class":54,"line":600},[52,41106,4501],{"class":58},[52,41108,2869],{"class":73},[52,41110,2129],{"class":58},[52,41112,41113],{"class":54,"line":606},[52,41114,4518],{"class":58},[52,41116,41117],{"class":54,"line":653},[52,41118,1773],{"class":58},[52,41120,41121],{"class":54,"line":662},[52,41122,1778],{"class":58},[156,41124,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":41126},[41127,41128],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/kaleidoscope",{"title":40860,"description":40868},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":41135,"title":41136,"body":41137,"category":27278,"componentType":20617,"description":41144,"extension":168,"meta":41384,"navigation":171,"path":41385,"requiresChild":27538,"seo":41386,"stem":41387,"__hash__":41388},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":41138,"toc":41380},[41139,41142,41145,41147,41149,41152,41154,41378],[11,41140,41136],{"id":41141},"lensflare",[15,41143,41144],{},"Realistic camera lens flare with artifacts.",[26676,41146],{"component":41136},[23,41148,26680],{"id":21278},[26682,41150],{":props":41151},"[{\"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,41153,26688],{"id":26687},[217,41155,41156,41195,41238,41278,41320],{":tabs":1543},[43,41157,41159],{"className":45,"code":41158,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,41160,41161,41169,41175,41183,41187],{"__ignoreMap":48},[52,41162,41163,41165,41167],{"class":54,"line":55},[52,41164,59],{"class":58},[52,41166,63],{"class":62},[52,41168,77],{"class":58},[52,41170,41171,41173],{"class":54,"line":80},[52,41172,83],{"class":58},[52,41174,17630],{"class":62},[52,41176,41177,41179,41181],{"class":54,"line":108},[52,41178,17644],{"class":66},[52,41180,70],{"class":58},[52,41182,32237],{"class":73},[52,41184,41185],{"class":54,"line":118},[52,41186,1224],{"class":58},[52,41188,41189,41191,41193],{"class":54,"line":594},[52,41190,121],{"class":58},[52,41192,63],{"class":62},[52,41194,77],{"class":58},[43,41196,41198],{"className":360,"code":41197,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,41199,41200,41208,41214,41226,41230],{"__ignoreMap":48},[52,41201,41202,41204,41206],{"class":54,"line":55},[52,41203,59],{"class":58},[52,41205,63],{"class":371},[52,41207,77],{"class":58},[52,41209,41210,41212],{"class":54,"line":80},[52,41211,83],{"class":58},[52,41213,17630],{"class":371},[52,41215,41216,41218,41220,41222,41224],{"class":54,"line":108},[52,41217,17755],{"class":66},[52,41219,70],{"class":231},[52,41221,723],{"class":58},[52,41223,5241],{"class":371},[52,41225,729],{"class":58},[52,41227,41228],{"class":54,"line":118},[52,41229,1224],{"class":58},[52,41231,41232,41234,41236],{"class":54,"line":594},[52,41233,121],{"class":58},[52,41235,63],{"class":371},[52,41237,77],{"class":58},[43,41239,41240],{"className":2507,"code":41197,"language":2509,"meta":48,"style":48},[31,41241,41242,41250,41256,41266,41270],{"__ignoreMap":48},[52,41243,41244,41246,41248],{"class":54,"line":55},[52,41245,59],{"class":58},[52,41247,63],{"class":371},[52,41249,77],{"class":58},[52,41251,41252,41254],{"class":54,"line":80},[52,41253,83],{"class":58},[52,41255,17630],{"class":371},[52,41257,41258,41260,41262,41264],{"class":54,"line":108},[52,41259,17755],{"class":66},[52,41261,24620],{"class":58},[52,41263,5241],{"class":371},[52,41265,729],{"class":58},[52,41267,41268],{"class":54,"line":118},[52,41269,1224],{"class":58},[52,41271,41272,41274,41276],{"class":54,"line":594},[52,41273,121],{"class":58},[52,41275,63],{"class":371},[52,41277,77],{"class":58},[43,41279,41280],{"className":419,"code":41197,"language":420,"meta":48,"style":48},[31,41281,41282,41290,41296,41308,41312],{"__ignoreMap":48},[52,41283,41284,41286,41288],{"class":54,"line":55},[52,41285,59],{"class":58},[52,41287,63],{"class":371},[52,41289,77],{"class":58},[52,41291,41292,41294],{"class":54,"line":80},[52,41293,83],{"class":58},[52,41295,17630],{"class":371},[52,41297,41298,41300,41302,41304,41306],{"class":54,"line":108},[52,41299,17755],{"class":66},[52,41301,70],{"class":231},[52,41303,723],{"class":58},[52,41305,5241],{"class":371},[52,41307,729],{"class":58},[52,41309,41310],{"class":54,"line":118},[52,41311,1224],{"class":58},[52,41313,41314,41316,41318],{"class":54,"line":594},[52,41315,121],{"class":58},[52,41317,63],{"class":371},[52,41319,77],{"class":58},[43,41321,41323],{"className":222,"code":41322,"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,41324,41325,41335,41339,41353,41357,41370,41374],{"__ignoreMap":48},[52,41326,41327,41329,41331,41333],{"class":54,"line":55},[52,41328,232],{"class":231},[52,41330,9005],{"class":58},[52,41332,238],{"class":231},[52,41334,9010],{"class":73},[52,41336,41337],{"class":54,"line":80},[52,41338,597],{"emptyLinePlaceholder":171},[52,41340,41341,41343,41345,41347,41349,41351],{"class":54,"line":108},[52,41342,1721],{"class":231},[52,41344,1724],{"class":371},[52,41346,1727],{"class":231},[52,41348,1730],{"class":231},[52,41350,1733],{"class":66},[52,41352,1736],{"class":58},[52,41354,41355],{"class":54,"line":118},[52,41356,1751],{"class":58},[52,41358,41359,41361,41364,41366,41368],{"class":54,"line":594},[52,41360,1756],{"class":58},[52,41362,41363],{"class":73},"'LensFlare'",[52,41365,26969],{"class":58},[52,41367,5241],{"class":371},[52,41369,1768],{"class":58},[52,41371,41372],{"class":54,"line":600},[52,41373,1773],{"class":58},[52,41375,41376],{"class":54,"line":606},[52,41377,1778],{"class":58},[156,41379,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41381},[41382,41383],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/lensflare",{"title":41136,"description":41144},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":41390,"title":41391,"body":41392,"category":27000,"componentType":20623,"description":41399,"extension":168,"meta":41716,"navigation":171,"path":41717,"requiresChild":171,"seo":41718,"stem":41719,"__hash__":41720},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":41393,"toc":41712},[41394,41397,41400,41402,41404,41407,41409,41710],[11,41395,41391],{"id":41396},"linearblur",[15,41398,41399],{},"Directional motion blur in a specific angle",[26676,41401],{"component":41391},[23,41403,26680],{"id":21278},[26682,41405],{":props":41406},"[{\"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,41408,26688],{"id":26687},[217,41410,41411,41467,41526,41582,41640],{":tabs":1543},[43,41412,41414],{"className":45,"code":41413,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41415,41416,41424,41431,41439,41443,41451,41459],{"__ignoreMap":48},[52,41417,41418,41420,41422],{"class":54,"line":55},[52,41419,59],{"class":58},[52,41421,63],{"class":62},[52,41423,77],{"class":58},[52,41425,41426,41428],{"class":54,"line":80},[52,41427,83],{"class":58},[52,41429,41430],{"class":62},"LinearBlur\n",[52,41432,41433,41435,41437],{"class":54,"line":108},[52,41434,17644],{"class":66},[52,41436,70],{"class":58},[52,41438,33263],{"class":73},[52,41440,41441],{"class":54,"line":118},[52,41442,26724],{"class":58},[52,41444,41445,41447,41449],{"class":54,"line":594},[52,41446,2213],{"class":58},[52,41448,2216],{"class":62},[52,41450,105],{"class":58},[52,41452,41453,41455,41457],{"class":54,"line":600},[52,41454,2230],{"class":58},[52,41456,41391],{"class":62},[52,41458,77],{"class":58},[52,41460,41461,41463,41465],{"class":54,"line":606},[52,41462,121],{"class":58},[52,41464,63],{"class":62},[52,41466,77],{"class":58},[43,41468,41470],{"className":360,"code":41469,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41471,41472,41480,41486,41498,41502,41510,41518],{"__ignoreMap":48},[52,41473,41474,41476,41478],{"class":54,"line":55},[52,41475,59],{"class":58},[52,41477,63],{"class":371},[52,41479,77],{"class":58},[52,41481,41482,41484],{"class":54,"line":80},[52,41483,83],{"class":58},[52,41485,41430],{"class":371},[52,41487,41488,41490,41492,41494,41496],{"class":54,"line":108},[52,41489,17755],{"class":66},[52,41491,70],{"class":231},[52,41493,723],{"class":58},[52,41495,12968],{"class":371},[52,41497,729],{"class":58},[52,41499,41500],{"class":54,"line":118},[52,41501,26724],{"class":58},[52,41503,41504,41506,41508],{"class":54,"line":594},[52,41505,2213],{"class":58},[52,41507,2216],{"class":371},[52,41509,105],{"class":58},[52,41511,41512,41514,41516],{"class":54,"line":600},[52,41513,2230],{"class":58},[52,41515,41391],{"class":371},[52,41517,77],{"class":58},[52,41519,41520,41522,41524],{"class":54,"line":606},[52,41521,121],{"class":58},[52,41523,63],{"class":371},[52,41525,77],{"class":58},[43,41527,41528],{"className":2507,"code":41469,"language":2509,"meta":48,"style":48},[31,41529,41530,41538,41544,41554,41558,41566,41574],{"__ignoreMap":48},[52,41531,41532,41534,41536],{"class":54,"line":55},[52,41533,59],{"class":58},[52,41535,63],{"class":371},[52,41537,77],{"class":58},[52,41539,41540,41542],{"class":54,"line":80},[52,41541,83],{"class":58},[52,41543,41430],{"class":371},[52,41545,41546,41548,41550,41552],{"class":54,"line":108},[52,41547,17755],{"class":66},[52,41549,24620],{"class":58},[52,41551,12968],{"class":371},[52,41553,729],{"class":58},[52,41555,41556],{"class":54,"line":118},[52,41557,26724],{"class":58},[52,41559,41560,41562,41564],{"class":54,"line":594},[52,41561,2213],{"class":58},[52,41563,2216],{"class":371},[52,41565,105],{"class":58},[52,41567,41568,41570,41572],{"class":54,"line":600},[52,41569,2230],{"class":58},[52,41571,41391],{"class":371},[52,41573,77],{"class":58},[52,41575,41576,41578,41580],{"class":54,"line":606},[52,41577,121],{"class":58},[52,41579,63],{"class":371},[52,41581,77],{"class":58},[43,41583,41584],{"className":419,"code":41469,"language":420,"meta":48,"style":48},[31,41585,41586,41594,41600,41612,41616,41624,41632],{"__ignoreMap":48},[52,41587,41588,41590,41592],{"class":54,"line":55},[52,41589,59],{"class":58},[52,41591,63],{"class":371},[52,41593,77],{"class":58},[52,41595,41596,41598],{"class":54,"line":80},[52,41597,83],{"class":58},[52,41599,41430],{"class":371},[52,41601,41602,41604,41606,41608,41610],{"class":54,"line":108},[52,41603,17755],{"class":66},[52,41605,70],{"class":231},[52,41607,723],{"class":58},[52,41609,12968],{"class":371},[52,41611,729],{"class":58},[52,41613,41614],{"class":54,"line":118},[52,41615,26724],{"class":58},[52,41617,41618,41620,41622],{"class":54,"line":594},[52,41619,2213],{"class":58},[52,41621,2216],{"class":371},[52,41623,105],{"class":58},[52,41625,41626,41628,41630],{"class":54,"line":600},[52,41627,2230],{"class":58},[52,41629,41391],{"class":371},[52,41631,77],{"class":58},[52,41633,41634,41636,41638],{"class":54,"line":606},[52,41635,121],{"class":58},[52,41637,63],{"class":371},[52,41639,77],{"class":58},[43,41641,41643],{"className":222,"code":41642,"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,41644,41645,41655,41659,41673,41677,41690,41698,41702,41706],{"__ignoreMap":48},[52,41646,41647,41649,41651,41653],{"class":54,"line":55},[52,41648,232],{"class":231},[52,41650,9005],{"class":58},[52,41652,238],{"class":231},[52,41654,9010],{"class":73},[52,41656,41657],{"class":54,"line":80},[52,41658,597],{"emptyLinePlaceholder":171},[52,41660,41661,41663,41665,41667,41669,41671],{"class":54,"line":108},[52,41662,1721],{"class":231},[52,41664,1724],{"class":371},[52,41666,1727],{"class":231},[52,41668,1730],{"class":231},[52,41670,1733],{"class":66},[52,41672,1736],{"class":58},[52,41674,41675],{"class":54,"line":118},[52,41676,1751],{"class":58},[52,41678,41679,41681,41684,41686,41688],{"class":54,"line":594},[52,41680,1756],{"class":58},[52,41682,41683],{"class":73},"'LinearBlur'",[52,41685,26969],{"class":58},[52,41687,12968],{"class":371},[52,41689,5033],{"class":58},[52,41691,41692,41694,41696],{"class":54,"line":600},[52,41693,4501],{"class":58},[52,41695,2869],{"class":73},[52,41697,2129],{"class":58},[52,41699,41700],{"class":54,"line":606},[52,41701,4518],{"class":58},[52,41703,41704],{"class":54,"line":653},[52,41705,1773],{"class":58},[52,41707,41708],{"class":54,"line":662},[52,41709,1778],{"class":58},[156,41711,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41713},[41714,41715],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/linearblur",{"title":41391,"description":41399},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":41722,"title":86,"body":41723,"category":27535,"componentType":20617,"description":41730,"extension":168,"meta":41914,"navigation":171,"path":41915,"requiresChild":27538,"seo":41916,"stem":41917,"__hash__":41918},"components/docs/components/LinearGradient.md",{"type":8,"value":41724,"toc":41910},[41725,41728,41731,41733,41735,41738,41740,41908],[11,41726,86],{"id":41727},"lineargradient",[15,41729,41730],{},"Create smooth linear color gradients",[26676,41732],{"component":86},[23,41734,26680],{"id":21278},[26682,41736],{":props":41737},"[{\"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,41739,26688],{"id":26687},[217,41741,41742,41771,41799,41827,41855],{":tabs":1543},[43,41743,41745],{"className":45,"code":41744,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,41746,41747,41755,41763],{"__ignoreMap":48},[52,41748,41749,41751,41753],{"class":54,"line":55},[52,41750,59],{"class":58},[52,41752,63],{"class":62},[52,41754,77],{"class":58},[52,41756,41757,41759,41761],{"class":54,"line":80},[52,41758,83],{"class":58},[52,41760,86],{"class":62},[52,41762,105],{"class":58},[52,41764,41765,41767,41769],{"class":54,"line":108},[52,41766,121],{"class":58},[52,41768,63],{"class":62},[52,41770,77],{"class":58},[43,41772,41773],{"className":360,"code":41744,"language":362,"meta":48,"style":48},[31,41774,41775,41783,41791],{"__ignoreMap":48},[52,41776,41777,41779,41781],{"class":54,"line":55},[52,41778,59],{"class":58},[52,41780,63],{"class":371},[52,41782,77],{"class":58},[52,41784,41785,41787,41789],{"class":54,"line":80},[52,41786,83],{"class":58},[52,41788,86],{"class":371},[52,41790,105],{"class":58},[52,41792,41793,41795,41797],{"class":54,"line":108},[52,41794,121],{"class":58},[52,41796,63],{"class":371},[52,41798,77],{"class":58},[43,41800,41801],{"className":2507,"code":41744,"language":2509,"meta":48,"style":48},[31,41802,41803,41811,41819],{"__ignoreMap":48},[52,41804,41805,41807,41809],{"class":54,"line":55},[52,41806,59],{"class":58},[52,41808,63],{"class":371},[52,41810,77],{"class":58},[52,41812,41813,41815,41817],{"class":54,"line":80},[52,41814,83],{"class":58},[52,41816,86],{"class":371},[52,41818,105],{"class":58},[52,41820,41821,41823,41825],{"class":54,"line":108},[52,41822,121],{"class":58},[52,41824,63],{"class":371},[52,41826,77],{"class":58},[43,41828,41829],{"className":419,"code":41744,"language":420,"meta":48,"style":48},[31,41830,41831,41839,41847],{"__ignoreMap":48},[52,41832,41833,41835,41837],{"class":54,"line":55},[52,41834,59],{"class":58},[52,41836,63],{"class":371},[52,41838,77],{"class":58},[52,41840,41841,41843,41845],{"class":54,"line":80},[52,41842,83],{"class":58},[52,41844,86],{"class":371},[52,41846,105],{"class":58},[52,41848,41849,41851,41853],{"class":54,"line":108},[52,41850,121],{"class":58},[52,41852,63],{"class":371},[52,41854,77],{"class":58},[43,41856,41858],{"className":222,"code":41857,"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,41859,41860,41870,41874,41888,41892,41900,41904],{"__ignoreMap":48},[52,41861,41862,41864,41866,41868],{"class":54,"line":55},[52,41863,232],{"class":231},[52,41865,9005],{"class":58},[52,41867,238],{"class":231},[52,41869,9010],{"class":73},[52,41871,41872],{"class":54,"line":80},[52,41873,597],{"emptyLinePlaceholder":171},[52,41875,41876,41878,41880,41882,41884,41886],{"class":54,"line":108},[52,41877,1721],{"class":231},[52,41879,1724],{"class":371},[52,41881,1727],{"class":231},[52,41883,1730],{"class":231},[52,41885,1733],{"class":66},[52,41887,1736],{"class":58},[52,41889,41890],{"class":54,"line":118},[52,41891,1751],{"class":58},[52,41893,41894,41896,41898],{"class":54,"line":594},[52,41895,1756],{"class":58},[52,41897,2126],{"class":73},[52,41899,2129],{"class":58},[52,41901,41902],{"class":54,"line":600},[52,41903,1773],{"class":58},[52,41905,41906],{"class":54,"line":606},[52,41907,1778],{"class":58},[156,41909,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":41911},[41912,41913],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/lineargradient",{"title":86,"description":41730},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":41920,"title":41921,"body":41922,"category":29936,"componentType":20623,"description":41929,"extension":168,"meta":42292,"navigation":171,"path":42293,"requiresChild":171,"seo":42294,"stem":42295,"__hash__":42296},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":41923,"toc":42288},[41924,41927,41930,41932,41934,41937,41939,42286],[11,41925,41921],{"id":41926},"liquify",[15,41928,41929],{},"Liquid-like interactive deformation effect",[26676,41931],{"component":41921},[23,41933,26680],{"id":21278},[26682,41935],{":props":41936},"[{\"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,41938,26688],{"id":26687},[217,41940,41941,42005,42076,42142,42212],{":tabs":1543},[43,41942,41944],{"className":45,"code":41943,"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,41945,41946,41954,41961,41969,41977,41981,41989,41997],{"__ignoreMap":48},[52,41947,41948,41950,41952],{"class":54,"line":55},[52,41949,59],{"class":58},[52,41951,63],{"class":62},[52,41953,77],{"class":58},[52,41955,41956,41958],{"class":54,"line":80},[52,41957,83],{"class":58},[52,41959,41960],{"class":62},"Liquify\n",[52,41962,41963,41965,41967],{"class":54,"line":108},[52,41964,17644],{"class":66},[52,41966,70],{"class":58},[52,41968,32228],{"class":73},[52,41970,41971,41973,41975],{"class":54,"line":118},[52,41972,14675],{"class":66},[52,41974,70],{"class":58},[52,41976,28602],{"class":73},[52,41978,41979],{"class":54,"line":594},[52,41980,26724],{"class":58},[52,41982,41983,41985,41987],{"class":54,"line":600},[52,41984,2213],{"class":58},[52,41986,2216],{"class":62},[52,41988,105],{"class":58},[52,41990,41991,41993,41995],{"class":54,"line":606},[52,41992,2230],{"class":58},[52,41994,41921],{"class":62},[52,41996,77],{"class":58},[52,41998,41999,42001,42003],{"class":54,"line":653},[52,42000,121],{"class":58},[52,42002,63],{"class":62},[52,42004,77],{"class":58},[43,42006,42008],{"className":360,"code":42007,"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,42009,42010,42018,42024,42036,42048,42052,42060,42068],{"__ignoreMap":48},[52,42011,42012,42014,42016],{"class":54,"line":55},[52,42013,59],{"class":58},[52,42015,63],{"class":371},[52,42017,77],{"class":58},[52,42019,42020,42022],{"class":54,"line":80},[52,42021,83],{"class":58},[52,42023,41960],{"class":371},[52,42025,42026,42028,42030,42032,42034],{"class":54,"line":108},[52,42027,17755],{"class":66},[52,42029,70],{"class":231},[52,42031,723],{"class":58},[52,42033,32295],{"class":371},[52,42035,729],{"class":58},[52,42037,42038,42040,42042,42044,42046],{"class":54,"line":118},[52,42039,7135],{"class":66},[52,42041,70],{"class":231},[52,42043,723],{"class":58},[52,42045,6165],{"class":371},[52,42047,729],{"class":58},[52,42049,42050],{"class":54,"line":594},[52,42051,26724],{"class":58},[52,42053,42054,42056,42058],{"class":54,"line":600},[52,42055,2213],{"class":58},[52,42057,2216],{"class":371},[52,42059,105],{"class":58},[52,42061,42062,42064,42066],{"class":54,"line":606},[52,42063,2230],{"class":58},[52,42065,41921],{"class":371},[52,42067,77],{"class":58},[52,42069,42070,42072,42074],{"class":54,"line":653},[52,42071,121],{"class":58},[52,42073,63],{"class":371},[52,42075,77],{"class":58},[43,42077,42078],{"className":2507,"code":42007,"language":2509,"meta":48,"style":48},[31,42079,42080,42088,42094,42104,42114,42118,42126,42134],{"__ignoreMap":48},[52,42081,42082,42084,42086],{"class":54,"line":55},[52,42083,59],{"class":58},[52,42085,63],{"class":371},[52,42087,77],{"class":58},[52,42089,42090,42092],{"class":54,"line":80},[52,42091,83],{"class":58},[52,42093,41960],{"class":371},[52,42095,42096,42098,42100,42102],{"class":54,"line":108},[52,42097,17755],{"class":66},[52,42099,24620],{"class":58},[52,42101,32295],{"class":371},[52,42103,729],{"class":58},[52,42105,42106,42108,42110,42112],{"class":54,"line":118},[52,42107,7135],{"class":66},[52,42109,24620],{"class":58},[52,42111,6165],{"class":371},[52,42113,729],{"class":58},[52,42115,42116],{"class":54,"line":594},[52,42117,26724],{"class":58},[52,42119,42120,42122,42124],{"class":54,"line":600},[52,42121,2213],{"class":58},[52,42123,2216],{"class":371},[52,42125,105],{"class":58},[52,42127,42128,42130,42132],{"class":54,"line":606},[52,42129,2230],{"class":58},[52,42131,41921],{"class":371},[52,42133,77],{"class":58},[52,42135,42136,42138,42140],{"class":54,"line":653},[52,42137,121],{"class":58},[52,42139,63],{"class":371},[52,42141,77],{"class":58},[43,42143,42144],{"className":419,"code":42007,"language":420,"meta":48,"style":48},[31,42145,42146,42154,42160,42172,42184,42188,42196,42204],{"__ignoreMap":48},[52,42147,42148,42150,42152],{"class":54,"line":55},[52,42149,59],{"class":58},[52,42151,63],{"class":371},[52,42153,77],{"class":58},[52,42155,42156,42158],{"class":54,"line":80},[52,42157,83],{"class":58},[52,42159,41960],{"class":371},[52,42161,42162,42164,42166,42168,42170],{"class":54,"line":108},[52,42163,17755],{"class":66},[52,42165,70],{"class":231},[52,42167,723],{"class":58},[52,42169,32295],{"class":371},[52,42171,729],{"class":58},[52,42173,42174,42176,42178,42180,42182],{"class":54,"line":118},[52,42175,7135],{"class":66},[52,42177,70],{"class":231},[52,42179,723],{"class":58},[52,42181,6165],{"class":371},[52,42183,729],{"class":58},[52,42185,42186],{"class":54,"line":594},[52,42187,26724],{"class":58},[52,42189,42190,42192,42194],{"class":54,"line":600},[52,42191,2213],{"class":58},[52,42193,2216],{"class":371},[52,42195,105],{"class":58},[52,42197,42198,42200,42202],{"class":54,"line":606},[52,42199,2230],{"class":58},[52,42201,41921],{"class":371},[52,42203,77],{"class":58},[52,42205,42206,42208,42210],{"class":54,"line":653},[52,42207,121],{"class":58},[52,42209,63],{"class":371},[52,42211,77],{"class":58},[43,42213,42215],{"className":222,"code":42214,"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,42216,42217,42227,42231,42245,42249,42266,42274,42278,42282],{"__ignoreMap":48},[52,42218,42219,42221,42223,42225],{"class":54,"line":55},[52,42220,232],{"class":231},[52,42222,9005],{"class":58},[52,42224,238],{"class":231},[52,42226,9010],{"class":73},[52,42228,42229],{"class":54,"line":80},[52,42230,597],{"emptyLinePlaceholder":171},[52,42232,42233,42235,42237,42239,42241,42243],{"class":54,"line":108},[52,42234,1721],{"class":231},[52,42236,1724],{"class":371},[52,42238,1727],{"class":231},[52,42240,1730],{"class":231},[52,42242,1733],{"class":66},[52,42244,1736],{"class":58},[52,42246,42247],{"class":54,"line":118},[52,42248,1751],{"class":58},[52,42250,42251,42253,42256,42258,42260,42262,42264],{"class":54,"line":594},[52,42252,1756],{"class":58},[52,42254,42255],{"class":73},"'Liquify'",[52,42257,26969],{"class":58},[52,42259,32295],{"class":371},[52,42261,4052],{"class":58},[52,42263,6165],{"class":371},[52,42265,5033],{"class":58},[52,42267,42268,42270,42272],{"class":54,"line":600},[52,42269,4501],{"class":58},[52,42271,2869],{"class":73},[52,42273,2129],{"class":58},[52,42275,42276],{"class":54,"line":606},[52,42277,4518],{"class":58},[52,42279,42280],{"class":54,"line":653},[52,42281,1773],{"class":58},[52,42283,42284],{"class":54,"line":662},[52,42285,1778],{"class":58},[156,42287,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42289},[42290,42291],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/liquify",{"title":41921,"description":41929},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":42298,"title":42299,"body":42300,"category":28880,"componentType":20623,"description":42306,"extension":168,"meta":42567,"navigation":171,"path":42568,"requiresChild":171,"seo":42569,"stem":42570,"__hash__":42571},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":42301,"toc":42563},[42302,42304,42307,42309,42311,42314,42316,42561],[11,42303,42299],{"id":13430},[15,42305,42306],{},"Mirror content across a line defined by center point and angle",[26676,42308],{"component":42299},[23,42310,26680],{"id":21278},[26682,42312],{":props":42313},"[{\"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,42315,26688],{"id":26687},[217,42317,42318,42363,42407,42451,42495],{":tabs":1543},[43,42319,42321],{"className":45,"code":42320,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,42322,42323,42331,42339,42347,42355],{"__ignoreMap":48},[52,42324,42325,42327,42329],{"class":54,"line":55},[52,42326,59],{"class":58},[52,42328,63],{"class":62},[52,42330,77],{"class":58},[52,42332,42333,42335,42337],{"class":54,"line":80},[52,42334,83],{"class":58},[52,42336,42299],{"class":62},[52,42338,77],{"class":58},[52,42340,42341,42343,42345],{"class":54,"line":108},[52,42342,2213],{"class":58},[52,42344,2216],{"class":62},[52,42346,105],{"class":58},[52,42348,42349,42351,42353],{"class":54,"line":118},[52,42350,2230],{"class":58},[52,42352,42299],{"class":62},[52,42354,77],{"class":58},[52,42356,42357,42359,42361],{"class":54,"line":594},[52,42358,121],{"class":58},[52,42360,63],{"class":62},[52,42362,77],{"class":58},[43,42364,42365],{"className":360,"code":42320,"language":362,"meta":48,"style":48},[31,42366,42367,42375,42383,42391,42399],{"__ignoreMap":48},[52,42368,42369,42371,42373],{"class":54,"line":55},[52,42370,59],{"class":58},[52,42372,63],{"class":371},[52,42374,77],{"class":58},[52,42376,42377,42379,42381],{"class":54,"line":80},[52,42378,83],{"class":58},[52,42380,42299],{"class":371},[52,42382,77],{"class":58},[52,42384,42385,42387,42389],{"class":54,"line":108},[52,42386,2213],{"class":58},[52,42388,2216],{"class":371},[52,42390,105],{"class":58},[52,42392,42393,42395,42397],{"class":54,"line":118},[52,42394,2230],{"class":58},[52,42396,42299],{"class":371},[52,42398,77],{"class":58},[52,42400,42401,42403,42405],{"class":54,"line":594},[52,42402,121],{"class":58},[52,42404,63],{"class":371},[52,42406,77],{"class":58},[43,42408,42409],{"className":2507,"code":42320,"language":2509,"meta":48,"style":48},[31,42410,42411,42419,42427,42435,42443],{"__ignoreMap":48},[52,42412,42413,42415,42417],{"class":54,"line":55},[52,42414,59],{"class":58},[52,42416,63],{"class":371},[52,42418,77],{"class":58},[52,42420,42421,42423,42425],{"class":54,"line":80},[52,42422,83],{"class":58},[52,42424,42299],{"class":371},[52,42426,77],{"class":58},[52,42428,42429,42431,42433],{"class":54,"line":108},[52,42430,2213],{"class":58},[52,42432,2216],{"class":371},[52,42434,105],{"class":58},[52,42436,42437,42439,42441],{"class":54,"line":118},[52,42438,2230],{"class":58},[52,42440,42299],{"class":371},[52,42442,77],{"class":58},[52,42444,42445,42447,42449],{"class":54,"line":594},[52,42446,121],{"class":58},[52,42448,63],{"class":371},[52,42450,77],{"class":58},[43,42452,42453],{"className":419,"code":42320,"language":420,"meta":48,"style":48},[31,42454,42455,42463,42471,42479,42487],{"__ignoreMap":48},[52,42456,42457,42459,42461],{"class":54,"line":55},[52,42458,59],{"class":58},[52,42460,63],{"class":371},[52,42462,77],{"class":58},[52,42464,42465,42467,42469],{"class":54,"line":80},[52,42466,83],{"class":58},[52,42468,42299],{"class":371},[52,42470,77],{"class":58},[52,42472,42473,42475,42477],{"class":54,"line":108},[52,42474,2213],{"class":58},[52,42476,2216],{"class":371},[52,42478,105],{"class":58},[52,42480,42481,42483,42485],{"class":54,"line":118},[52,42482,2230],{"class":58},[52,42484,42299],{"class":371},[52,42486,77],{"class":58},[52,42488,42489,42491,42493],{"class":54,"line":594},[52,42490,121],{"class":58},[52,42492,63],{"class":371},[52,42494,77],{"class":58},[43,42496,42498],{"className":222,"code":42497,"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,42499,42500,42510,42514,42528,42532,42541,42549,42553,42557],{"__ignoreMap":48},[52,42501,42502,42504,42506,42508],{"class":54,"line":55},[52,42503,232],{"class":231},[52,42505,9005],{"class":58},[52,42507,238],{"class":231},[52,42509,9010],{"class":73},[52,42511,42512],{"class":54,"line":80},[52,42513,597],{"emptyLinePlaceholder":171},[52,42515,42516,42518,42520,42522,42524,42526],{"class":54,"line":108},[52,42517,1721],{"class":231},[52,42519,1724],{"class":371},[52,42521,1727],{"class":231},[52,42523,1730],{"class":231},[52,42525,1733],{"class":66},[52,42527,1736],{"class":58},[52,42529,42530],{"class":54,"line":118},[52,42531,1751],{"class":58},[52,42533,42534,42536,42539],{"class":54,"line":594},[52,42535,1756],{"class":58},[52,42537,42538],{"class":73},"'Mirror'",[52,42540,4496],{"class":58},[52,42542,42543,42545,42547],{"class":54,"line":600},[52,42544,4501],{"class":58},[52,42546,2869],{"class":73},[52,42548,2129],{"class":58},[52,42550,42551],{"class":54,"line":606},[52,42552,4518],{"class":58},[52,42554,42555],{"class":54,"line":653},[52,42556,1773],{"class":58},[52,42558,42559],{"class":54,"line":662},[52,42560,1778],{"class":58},[156,42562,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":42564},[42565,42566],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/mirror",{"title":42299,"description":42306},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":42573,"title":42574,"body":42575,"category":27535,"componentType":20617,"description":42582,"extension":168,"meta":42767,"navigation":171,"path":42768,"requiresChild":27538,"seo":42769,"stem":42770,"__hash__":42771},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":42576,"toc":42763},[42577,42580,42583,42585,42587,42590,42592,42761],[11,42578,42574],{"id":42579},"multipointgradient",[15,42581,42582],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26676,42584],{"component":42574},[23,42586,26680],{"id":21278},[26682,42588],{":props":42589},"[{\"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,42591,26688],{"id":26687},[217,42593,42594,42623,42651,42679,42707],{":tabs":1543},[43,42595,42597],{"className":45,"code":42596,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,42598,42599,42607,42615],{"__ignoreMap":48},[52,42600,42601,42603,42605],{"class":54,"line":55},[52,42602,59],{"class":58},[52,42604,63],{"class":62},[52,42606,77],{"class":58},[52,42608,42609,42611,42613],{"class":54,"line":80},[52,42610,83],{"class":58},[52,42612,42574],{"class":62},[52,42614,105],{"class":58},[52,42616,42617,42619,42621],{"class":54,"line":108},[52,42618,121],{"class":58},[52,42620,63],{"class":62},[52,42622,77],{"class":58},[43,42624,42625],{"className":360,"code":42596,"language":362,"meta":48,"style":48},[31,42626,42627,42635,42643],{"__ignoreMap":48},[52,42628,42629,42631,42633],{"class":54,"line":55},[52,42630,59],{"class":58},[52,42632,63],{"class":371},[52,42634,77],{"class":58},[52,42636,42637,42639,42641],{"class":54,"line":80},[52,42638,83],{"class":58},[52,42640,42574],{"class":371},[52,42642,105],{"class":58},[52,42644,42645,42647,42649],{"class":54,"line":108},[52,42646,121],{"class":58},[52,42648,63],{"class":371},[52,42650,77],{"class":58},[43,42652,42653],{"className":2507,"code":42596,"language":2509,"meta":48,"style":48},[31,42654,42655,42663,42671],{"__ignoreMap":48},[52,42656,42657,42659,42661],{"class":54,"line":55},[52,42658,59],{"class":58},[52,42660,63],{"class":371},[52,42662,77],{"class":58},[52,42664,42665,42667,42669],{"class":54,"line":80},[52,42666,83],{"class":58},[52,42668,42574],{"class":371},[52,42670,105],{"class":58},[52,42672,42673,42675,42677],{"class":54,"line":108},[52,42674,121],{"class":58},[52,42676,63],{"class":371},[52,42678,77],{"class":58},[43,42680,42681],{"className":419,"code":42596,"language":420,"meta":48,"style":48},[31,42682,42683,42691,42699],{"__ignoreMap":48},[52,42684,42685,42687,42689],{"class":54,"line":55},[52,42686,59],{"class":58},[52,42688,63],{"class":371},[52,42690,77],{"class":58},[52,42692,42693,42695,42697],{"class":54,"line":80},[52,42694,83],{"class":58},[52,42696,42574],{"class":371},[52,42698,105],{"class":58},[52,42700,42701,42703,42705],{"class":54,"line":108},[52,42702,121],{"class":58},[52,42704,63],{"class":371},[52,42706,77],{"class":58},[43,42708,42710],{"className":222,"code":42709,"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,42711,42712,42722,42726,42740,42744,42753,42757],{"__ignoreMap":48},[52,42713,42714,42716,42718,42720],{"class":54,"line":55},[52,42715,232],{"class":231},[52,42717,9005],{"class":58},[52,42719,238],{"class":231},[52,42721,9010],{"class":73},[52,42723,42724],{"class":54,"line":80},[52,42725,597],{"emptyLinePlaceholder":171},[52,42727,42728,42730,42732,42734,42736,42738],{"class":54,"line":108},[52,42729,1721],{"class":231},[52,42731,1724],{"class":371},[52,42733,1727],{"class":231},[52,42735,1730],{"class":231},[52,42737,1733],{"class":66},[52,42739,1736],{"class":58},[52,42741,42742],{"class":54,"line":118},[52,42743,1751],{"class":58},[52,42745,42746,42748,42751],{"class":54,"line":594},[52,42747,1756],{"class":58},[52,42749,42750],{"class":73},"'MultiPointGradient'",[52,42752,2129],{"class":58},[52,42754,42755],{"class":54,"line":600},[52,42756,1773],{"class":58},[52,42758,42759],{"class":54,"line":606},[52,42760,1778],{"class":58},[156,42762,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":42764},[42765,42766],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/multipointgradient",{"title":42574,"description":42582},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":42773,"title":18251,"body":42774,"category":32173,"componentType":20617,"description":42781,"extension":168,"meta":43060,"navigation":171,"path":43061,"requiresChild":27538,"seo":43062,"stem":43063,"__hash__":43064},"components/docs/components/Neon.md",{"type":8,"value":42775,"toc":43056},[42776,42779,42782,42784,42786,42789,42791,43054],[11,42777,18251],{"id":42778},"neon",[15,42780,42781],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26676,42783],{"component":18251},[23,42785,26680],{"id":21278},[26682,42787],{":props":42788},"[{\"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,42790,26688],{"id":26687},[217,42792,42793,42843,42894,42942,42992],{":tabs":1543},[43,42794,42796],{"className":45,"code":42795,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,42797,42798,42806,42813,42822,42831,42835],{"__ignoreMap":48},[52,42799,42800,42802,42804],{"class":54,"line":55},[52,42801,59],{"class":58},[52,42803,63],{"class":62},[52,42805,77],{"class":58},[52,42807,42808,42810],{"class":54,"line":80},[52,42809,83],{"class":58},[52,42811,42812],{"class":62},"Neon\n",[52,42814,42815,42817,42819],{"class":54,"line":108},[52,42816,7125],{"class":66},[52,42818,70],{"class":58},[52,42820,42821],{"class":73},"\"#00ddff\"\n",[52,42823,42824,42826,42828],{"class":54,"line":118},[52,42825,17644],{"class":66},[52,42827,70],{"class":58},[52,42829,42830],{"class":73},"\"1.5\"\n",[52,42832,42833],{"class":54,"line":594},[52,42834,1224],{"class":58},[52,42836,42837,42839,42841],{"class":54,"line":600},[52,42838,121],{"class":58},[52,42840,63],{"class":62},[52,42842,77],{"class":58},[43,42844,42846],{"className":360,"code":42845,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,42847,42848,42856,42862,42870,42882,42886],{"__ignoreMap":48},[52,42849,42850,42852,42854],{"class":54,"line":55},[52,42851,59],{"class":58},[52,42853,63],{"class":371},[52,42855,77],{"class":58},[52,42857,42858,42860],{"class":54,"line":80},[52,42859,83],{"class":58},[52,42861,42812],{"class":371},[52,42863,42864,42866,42868],{"class":54,"line":108},[52,42865,7125],{"class":66},[52,42867,70],{"class":231},[52,42869,42821],{"class":73},[52,42871,42872,42874,42876,42878,42880],{"class":54,"line":118},[52,42873,17755],{"class":66},[52,42875,70],{"class":231},[52,42877,723],{"class":58},[52,42879,12945],{"class":371},[52,42881,729],{"class":58},[52,42883,42884],{"class":54,"line":594},[52,42885,1224],{"class":58},[52,42887,42888,42890,42892],{"class":54,"line":600},[52,42889,121],{"class":58},[52,42891,63],{"class":371},[52,42893,77],{"class":58},[43,42895,42896],{"className":2507,"code":42845,"language":2509,"meta":48,"style":48},[31,42897,42898,42906,42912,42920,42930,42934],{"__ignoreMap":48},[52,42899,42900,42902,42904],{"class":54,"line":55},[52,42901,59],{"class":58},[52,42903,63],{"class":371},[52,42905,77],{"class":58},[52,42907,42908,42910],{"class":54,"line":80},[52,42909,83],{"class":58},[52,42911,42812],{"class":371},[52,42913,42914,42916,42918],{"class":54,"line":108},[52,42915,7125],{"class":66},[52,42917,70],{"class":58},[52,42919,42821],{"class":73},[52,42921,42922,42924,42926,42928],{"class":54,"line":118},[52,42923,17755],{"class":66},[52,42925,24620],{"class":58},[52,42927,12945],{"class":371},[52,42929,729],{"class":58},[52,42931,42932],{"class":54,"line":594},[52,42933,1224],{"class":58},[52,42935,42936,42938,42940],{"class":54,"line":600},[52,42937,121],{"class":58},[52,42939,63],{"class":371},[52,42941,77],{"class":58},[43,42943,42944],{"className":419,"code":42845,"language":420,"meta":48,"style":48},[31,42945,42946,42954,42960,42968,42980,42984],{"__ignoreMap":48},[52,42947,42948,42950,42952],{"class":54,"line":55},[52,42949,59],{"class":58},[52,42951,63],{"class":371},[52,42953,77],{"class":58},[52,42955,42956,42958],{"class":54,"line":80},[52,42957,83],{"class":58},[52,42959,42812],{"class":371},[52,42961,42962,42964,42966],{"class":54,"line":108},[52,42963,7125],{"class":66},[52,42965,70],{"class":231},[52,42967,42821],{"class":73},[52,42969,42970,42972,42974,42976,42978],{"class":54,"line":118},[52,42971,17755],{"class":66},[52,42973,70],{"class":231},[52,42975,723],{"class":58},[52,42977,12945],{"class":371},[52,42979,729],{"class":58},[52,42981,42982],{"class":54,"line":594},[52,42983,1224],{"class":58},[52,42985,42986,42988,42990],{"class":54,"line":600},[52,42987,121],{"class":58},[52,42989,63],{"class":371},[52,42991,77],{"class":58},[43,42993,42995],{"className":222,"code":42994,"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,42996,42997,43007,43011,43025,43029,43046,43050],{"__ignoreMap":48},[52,42998,42999,43001,43003,43005],{"class":54,"line":55},[52,43000,232],{"class":231},[52,43002,9005],{"class":58},[52,43004,238],{"class":231},[52,43006,9010],{"class":73},[52,43008,43009],{"class":54,"line":80},[52,43010,597],{"emptyLinePlaceholder":171},[52,43012,43013,43015,43017,43019,43021,43023],{"class":54,"line":108},[52,43014,1721],{"class":231},[52,43016,1724],{"class":371},[52,43018,1727],{"class":231},[52,43020,1730],{"class":231},[52,43022,1733],{"class":66},[52,43024,1736],{"class":58},[52,43026,43027],{"class":54,"line":118},[52,43028,1751],{"class":58},[52,43030,43031,43033,43035,43037,43040,43042,43044],{"class":54,"line":594},[52,43032,1756],{"class":58},[52,43034,18843],{"class":73},[52,43036,1762],{"class":58},[52,43038,43039],{"class":73},"'#00ddff'",[52,43041,34398],{"class":58},[52,43043,12945],{"class":371},[52,43045,1768],{"class":58},[52,43047,43048],{"class":54,"line":600},[52,43049,1773],{"class":58},[52,43051,43052],{"class":54,"line":606},[52,43053,1778],{"class":58},[156,43055,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43057},[43058,43059],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/neon",{"title":18251,"description":42781},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":43066,"title":43067,"body":43068,"category":27278,"componentType":20623,"description":43075,"extension":168,"meta":43336,"navigation":171,"path":43337,"requiresChild":171,"seo":43338,"stem":43339,"__hash__":43340},"components/docs/components/Paper.md","Paper",{"type":8,"value":43069,"toc":43332},[43070,43073,43076,43078,43080,43083,43085,43330],[11,43071,43067],{"id":43072},"paper",[15,43074,43075],{},"Applies realistic paper grain and surface roughness to child content",[26676,43077],{"component":43067},[23,43079,26680],{"id":21278},[26682,43081],{":props":43082},"[{\"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,43084,26688],{"id":26687},[217,43086,43087,43132,43176,43220,43264],{":tabs":1543},[43,43088,43090],{"className":45,"code":43089,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,43091,43092,43100,43108,43116,43124],{"__ignoreMap":48},[52,43093,43094,43096,43098],{"class":54,"line":55},[52,43095,59],{"class":58},[52,43097,63],{"class":62},[52,43099,77],{"class":58},[52,43101,43102,43104,43106],{"class":54,"line":80},[52,43103,83],{"class":58},[52,43105,43067],{"class":62},[52,43107,77],{"class":58},[52,43109,43110,43112,43114],{"class":54,"line":108},[52,43111,2213],{"class":58},[52,43113,2216],{"class":62},[52,43115,105],{"class":58},[52,43117,43118,43120,43122],{"class":54,"line":118},[52,43119,2230],{"class":58},[52,43121,43067],{"class":62},[52,43123,77],{"class":58},[52,43125,43126,43128,43130],{"class":54,"line":594},[52,43127,121],{"class":58},[52,43129,63],{"class":62},[52,43131,77],{"class":58},[43,43133,43134],{"className":360,"code":43089,"language":362,"meta":48,"style":48},[31,43135,43136,43144,43152,43160,43168],{"__ignoreMap":48},[52,43137,43138,43140,43142],{"class":54,"line":55},[52,43139,59],{"class":58},[52,43141,63],{"class":371},[52,43143,77],{"class":58},[52,43145,43146,43148,43150],{"class":54,"line":80},[52,43147,83],{"class":58},[52,43149,43067],{"class":371},[52,43151,77],{"class":58},[52,43153,43154,43156,43158],{"class":54,"line":108},[52,43155,2213],{"class":58},[52,43157,2216],{"class":371},[52,43159,105],{"class":58},[52,43161,43162,43164,43166],{"class":54,"line":118},[52,43163,2230],{"class":58},[52,43165,43067],{"class":371},[52,43167,77],{"class":58},[52,43169,43170,43172,43174],{"class":54,"line":594},[52,43171,121],{"class":58},[52,43173,63],{"class":371},[52,43175,77],{"class":58},[43,43177,43178],{"className":2507,"code":43089,"language":2509,"meta":48,"style":48},[31,43179,43180,43188,43196,43204,43212],{"__ignoreMap":48},[52,43181,43182,43184,43186],{"class":54,"line":55},[52,43183,59],{"class":58},[52,43185,63],{"class":371},[52,43187,77],{"class":58},[52,43189,43190,43192,43194],{"class":54,"line":80},[52,43191,83],{"class":58},[52,43193,43067],{"class":371},[52,43195,77],{"class":58},[52,43197,43198,43200,43202],{"class":54,"line":108},[52,43199,2213],{"class":58},[52,43201,2216],{"class":371},[52,43203,105],{"class":58},[52,43205,43206,43208,43210],{"class":54,"line":118},[52,43207,2230],{"class":58},[52,43209,43067],{"class":371},[52,43211,77],{"class":58},[52,43213,43214,43216,43218],{"class":54,"line":594},[52,43215,121],{"class":58},[52,43217,63],{"class":371},[52,43219,77],{"class":58},[43,43221,43222],{"className":419,"code":43089,"language":420,"meta":48,"style":48},[31,43223,43224,43232,43240,43248,43256],{"__ignoreMap":48},[52,43225,43226,43228,43230],{"class":54,"line":55},[52,43227,59],{"class":58},[52,43229,63],{"class":371},[52,43231,77],{"class":58},[52,43233,43234,43236,43238],{"class":54,"line":80},[52,43235,83],{"class":58},[52,43237,43067],{"class":371},[52,43239,77],{"class":58},[52,43241,43242,43244,43246],{"class":54,"line":108},[52,43243,2213],{"class":58},[52,43245,2216],{"class":371},[52,43247,105],{"class":58},[52,43249,43250,43252,43254],{"class":54,"line":118},[52,43251,2230],{"class":58},[52,43253,43067],{"class":371},[52,43255,77],{"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: 'Paper', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,43268,43269,43279,43283,43297,43301,43310,43318,43322,43326],{"__ignoreMap":48},[52,43270,43271,43273,43275,43277],{"class":54,"line":55},[52,43272,232],{"class":231},[52,43274,9005],{"class":58},[52,43276,238],{"class":231},[52,43278,9010],{"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],{"class":54,"line":594},[52,43304,1756],{"class":58},[52,43306,43307],{"class":73},"'Paper'",[52,43309,4496],{"class":58},[52,43311,43312,43314,43316],{"class":54,"line":600},[52,43313,4501],{"class":58},[52,43315,2869],{"class":73},[52,43317,2129],{"class":58},[52,43319,43320],{"class":54,"line":606},[52,43321,4518],{"class":58},[52,43323,43324],{"class":54,"line":653},[52,43325,1773],{"class":58},[52,43327,43328],{"class":54,"line":662},[52,43329,1778],{"class":58},[156,43331,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":43333},[43334,43335],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/paper",{"title":43067,"description":43075},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":43342,"title":43343,"body":43344,"category":28880,"componentType":20623,"description":43351,"extension":168,"meta":43612,"navigation":171,"path":43613,"requiresChild":171,"seo":43614,"stem":43615,"__hash__":43616},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":43345,"toc":43608},[43346,43349,43352,43354,43356,43359,43361,43606],[11,43347,43343],{"id":43348},"perspective",[15,43350,43351],{},"Rotate the plane in 3D space with pan and tilt",[26676,43353],{"component":43343},[23,43355,26680],{"id":21278},[26682,43357],{":props":43358},"[{\"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,43360,26688],{"id":26687},[217,43362,43363,43408,43452,43496,43540],{":tabs":1543},[43,43364,43366],{"className":45,"code":43365,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[31,43367,43368,43376,43384,43392,43400],{"__ignoreMap":48},[52,43369,43370,43372,43374],{"class":54,"line":55},[52,43371,59],{"class":58},[52,43373,63],{"class":62},[52,43375,77],{"class":58},[52,43377,43378,43380,43382],{"class":54,"line":80},[52,43379,83],{"class":58},[52,43381,43343],{"class":62},[52,43383,77],{"class":58},[52,43385,43386,43388,43390],{"class":54,"line":108},[52,43387,2213],{"class":58},[52,43389,2216],{"class":62},[52,43391,105],{"class":58},[52,43393,43394,43396,43398],{"class":54,"line":118},[52,43395,2230],{"class":58},[52,43397,43343],{"class":62},[52,43399,77],{"class":58},[52,43401,43402,43404,43406],{"class":54,"line":594},[52,43403,121],{"class":58},[52,43405,63],{"class":62},[52,43407,77],{"class":58},[43,43409,43410],{"className":360,"code":43365,"language":362,"meta":48,"style":48},[31,43411,43412,43420,43428,43436,43444],{"__ignoreMap":48},[52,43413,43414,43416,43418],{"class":54,"line":55},[52,43415,59],{"class":58},[52,43417,63],{"class":371},[52,43419,77],{"class":58},[52,43421,43422,43424,43426],{"class":54,"line":80},[52,43423,83],{"class":58},[52,43425,43343],{"class":371},[52,43427,77],{"class":58},[52,43429,43430,43432,43434],{"class":54,"line":108},[52,43431,2213],{"class":58},[52,43433,2216],{"class":371},[52,43435,105],{"class":58},[52,43437,43438,43440,43442],{"class":54,"line":118},[52,43439,2230],{"class":58},[52,43441,43343],{"class":371},[52,43443,77],{"class":58},[52,43445,43446,43448,43450],{"class":54,"line":594},[52,43447,121],{"class":58},[52,43449,63],{"class":371},[52,43451,77],{"class":58},[43,43453,43454],{"className":2507,"code":43365,"language":2509,"meta":48,"style":48},[31,43455,43456,43464,43472,43480,43488],{"__ignoreMap":48},[52,43457,43458,43460,43462],{"class":54,"line":55},[52,43459,59],{"class":58},[52,43461,63],{"class":371},[52,43463,77],{"class":58},[52,43465,43466,43468,43470],{"class":54,"line":80},[52,43467,83],{"class":58},[52,43469,43343],{"class":371},[52,43471,77],{"class":58},[52,43473,43474,43476,43478],{"class":54,"line":108},[52,43475,2213],{"class":58},[52,43477,2216],{"class":371},[52,43479,105],{"class":58},[52,43481,43482,43484,43486],{"class":54,"line":118},[52,43483,2230],{"class":58},[52,43485,43343],{"class":371},[52,43487,77],{"class":58},[52,43489,43490,43492,43494],{"class":54,"line":594},[52,43491,121],{"class":58},[52,43493,63],{"class":371},[52,43495,77],{"class":58},[43,43497,43498],{"className":419,"code":43365,"language":420,"meta":48,"style":48},[31,43499,43500,43508,43516,43524,43532],{"__ignoreMap":48},[52,43501,43502,43504,43506],{"class":54,"line":55},[52,43503,59],{"class":58},[52,43505,63],{"class":371},[52,43507,77],{"class":58},[52,43509,43510,43512,43514],{"class":54,"line":80},[52,43511,83],{"class":58},[52,43513,43343],{"class":371},[52,43515,77],{"class":58},[52,43517,43518,43520,43522],{"class":54,"line":108},[52,43519,2213],{"class":58},[52,43521,2216],{"class":371},[52,43523,105],{"class":58},[52,43525,43526,43528,43530],{"class":54,"line":118},[52,43527,2230],{"class":58},[52,43529,43343],{"class":371},[52,43531,77],{"class":58},[52,43533,43534,43536,43538],{"class":54,"line":594},[52,43535,121],{"class":58},[52,43537,63],{"class":371},[52,43539,77],{"class":58},[43,43541,43543],{"className":222,"code":43542,"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,43544,43545,43555,43559,43573,43577,43586,43594,43598,43602],{"__ignoreMap":48},[52,43546,43547,43549,43551,43553],{"class":54,"line":55},[52,43548,232],{"class":231},[52,43550,9005],{"class":58},[52,43552,238],{"class":231},[52,43554,9010],{"class":73},[52,43556,43557],{"class":54,"line":80},[52,43558,597],{"emptyLinePlaceholder":171},[52,43560,43561,43563,43565,43567,43569,43571],{"class":54,"line":108},[52,43562,1721],{"class":231},[52,43564,1724],{"class":371},[52,43566,1727],{"class":231},[52,43568,1730],{"class":231},[52,43570,1733],{"class":66},[52,43572,1736],{"class":58},[52,43574,43575],{"class":54,"line":118},[52,43576,1751],{"class":58},[52,43578,43579,43581,43584],{"class":54,"line":594},[52,43580,1756],{"class":58},[52,43582,43583],{"class":73},"'Perspective'",[52,43585,4496],{"class":58},[52,43587,43588,43590,43592],{"class":54,"line":600},[52,43589,4501],{"class":58},[52,43591,2869],{"class":73},[52,43593,2129],{"class":58},[52,43595,43596],{"class":54,"line":606},[52,43597,4518],{"class":58},[52,43599,43600],{"class":54,"line":653},[52,43601,1773],{"class":58},[52,43603,43604],{"class":54,"line":662},[52,43605,1778],{"class":58},[156,43607,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":43609},[43610,43611],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/perspective",{"title":43343,"description":43351},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":43618,"title":43619,"body":43620,"category":27278,"componentType":20623,"description":43627,"extension":168,"meta":43888,"navigation":171,"path":43889,"requiresChild":171,"seo":43890,"stem":43891,"__hash__":43892},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":43621,"toc":43884},[43622,43625,43628,43630,43632,43635,43637,43882],[11,43623,43619],{"id":43624},"pixelate",[15,43626,43627],{},"Pixelation effect with adjustable cell size",[26676,43629],{"component":43619},[23,43631,26680],{"id":21278},[26682,43633],{":props":43634},"[{\"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,43636,26688],{"id":26687},[217,43638,43639,43684,43728,43772,43816],{":tabs":1543},[43,43640,43642],{"className":45,"code":43641,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[31,43643,43644,43652,43660,43668,43676],{"__ignoreMap":48},[52,43645,43646,43648,43650],{"class":54,"line":55},[52,43647,59],{"class":58},[52,43649,63],{"class":62},[52,43651,77],{"class":58},[52,43653,43654,43656,43658],{"class":54,"line":80},[52,43655,83],{"class":58},[52,43657,43619],{"class":62},[52,43659,77],{"class":58},[52,43661,43662,43664,43666],{"class":54,"line":108},[52,43663,2213],{"class":58},[52,43665,2216],{"class":62},[52,43667,105],{"class":58},[52,43669,43670,43672,43674],{"class":54,"line":118},[52,43671,2230],{"class":58},[52,43673,43619],{"class":62},[52,43675,77],{"class":58},[52,43677,43678,43680,43682],{"class":54,"line":594},[52,43679,121],{"class":58},[52,43681,63],{"class":62},[52,43683,77],{"class":58},[43,43685,43686],{"className":360,"code":43641,"language":362,"meta":48,"style":48},[31,43687,43688,43696,43704,43712,43720],{"__ignoreMap":48},[52,43689,43690,43692,43694],{"class":54,"line":55},[52,43691,59],{"class":58},[52,43693,63],{"class":371},[52,43695,77],{"class":58},[52,43697,43698,43700,43702],{"class":54,"line":80},[52,43699,83],{"class":58},[52,43701,43619],{"class":371},[52,43703,77],{"class":58},[52,43705,43706,43708,43710],{"class":54,"line":108},[52,43707,2213],{"class":58},[52,43709,2216],{"class":371},[52,43711,105],{"class":58},[52,43713,43714,43716,43718],{"class":54,"line":118},[52,43715,2230],{"class":58},[52,43717,43619],{"class":371},[52,43719,77],{"class":58},[52,43721,43722,43724,43726],{"class":54,"line":594},[52,43723,121],{"class":58},[52,43725,63],{"class":371},[52,43727,77],{"class":58},[43,43729,43730],{"className":2507,"code":43641,"language":2509,"meta":48,"style":48},[31,43731,43732,43740,43748,43756,43764],{"__ignoreMap":48},[52,43733,43734,43736,43738],{"class":54,"line":55},[52,43735,59],{"class":58},[52,43737,63],{"class":371},[52,43739,77],{"class":58},[52,43741,43742,43744,43746],{"class":54,"line":80},[52,43743,83],{"class":58},[52,43745,43619],{"class":371},[52,43747,77],{"class":58},[52,43749,43750,43752,43754],{"class":54,"line":108},[52,43751,2213],{"class":58},[52,43753,2216],{"class":371},[52,43755,105],{"class":58},[52,43757,43758,43760,43762],{"class":54,"line":118},[52,43759,2230],{"class":58},[52,43761,43619],{"class":371},[52,43763,77],{"class":58},[52,43765,43766,43768,43770],{"class":54,"line":594},[52,43767,121],{"class":58},[52,43769,63],{"class":371},[52,43771,77],{"class":58},[43,43773,43774],{"className":419,"code":43641,"language":420,"meta":48,"style":48},[31,43775,43776,43784,43792,43800,43808],{"__ignoreMap":48},[52,43777,43778,43780,43782],{"class":54,"line":55},[52,43779,59],{"class":58},[52,43781,63],{"class":371},[52,43783,77],{"class":58},[52,43785,43786,43788,43790],{"class":54,"line":80},[52,43787,83],{"class":58},[52,43789,43619],{"class":371},[52,43791,77],{"class":58},[52,43793,43794,43796,43798],{"class":54,"line":108},[52,43795,2213],{"class":58},[52,43797,2216],{"class":371},[52,43799,105],{"class":58},[52,43801,43802,43804,43806],{"class":54,"line":118},[52,43803,2230],{"class":58},[52,43805,43619],{"class":371},[52,43807,77],{"class":58},[52,43809,43810,43812,43814],{"class":54,"line":594},[52,43811,121],{"class":58},[52,43813,63],{"class":371},[52,43815,77],{"class":58},[43,43817,43819],{"className":222,"code":43818,"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,43820,43821,43831,43835,43849,43853,43862,43870,43874,43878],{"__ignoreMap":48},[52,43822,43823,43825,43827,43829],{"class":54,"line":55},[52,43824,232],{"class":231},[52,43826,9005],{"class":58},[52,43828,238],{"class":231},[52,43830,9010],{"class":73},[52,43832,43833],{"class":54,"line":80},[52,43834,597],{"emptyLinePlaceholder":171},[52,43836,43837,43839,43841,43843,43845,43847],{"class":54,"line":108},[52,43838,1721],{"class":231},[52,43840,1724],{"class":371},[52,43842,1727],{"class":231},[52,43844,1730],{"class":231},[52,43846,1733],{"class":66},[52,43848,1736],{"class":58},[52,43850,43851],{"class":54,"line":118},[52,43852,1751],{"class":58},[52,43854,43855,43857,43860],{"class":54,"line":594},[52,43856,1756],{"class":58},[52,43858,43859],{"class":73},"'Pixelate'",[52,43861,4496],{"class":58},[52,43863,43864,43866,43868],{"class":54,"line":600},[52,43865,4501],{"class":58},[52,43867,2869],{"class":73},[52,43869,2129],{"class":58},[52,43871,43872],{"class":54,"line":606},[52,43873,4518],{"class":58},[52,43875,43876],{"class":54,"line":653},[52,43877,1773],{"class":58},[52,43879,43880],{"class":54,"line":662},[52,43881,1778],{"class":58},[156,43883,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":43885},[43886,43887],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/pixelate",{"title":43619,"description":43627},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":43894,"title":10562,"body":43895,"category":27535,"componentType":20617,"description":43902,"extension":168,"meta":44143,"navigation":171,"path":44144,"requiresChild":27538,"seo":44145,"stem":44146,"__hash__":44147},"components/docs/components/Plasma.md",{"type":8,"value":43896,"toc":44139},[43897,43900,43903,43905,43907,43910,43912,44137],[11,43898,10562],{"id":43899},"plasma",[15,43901,43902],{},"Animated effect of glowing plasma",[26676,43904],{"component":10562},[23,43906,26680],{"id":21278},[26682,43908],{":props":43909},"[{\"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,43911,26688],{"id":26687},[217,43913,43914,43954,43997,44037,44079],{":tabs":1543},[43,43915,43917],{"className":45,"code":43916,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,43918,43919,43927,43934,43942,43946],{"__ignoreMap":48},[52,43920,43921,43923,43925],{"class":54,"line":55},[52,43922,59],{"class":58},[52,43924,63],{"class":62},[52,43926,77],{"class":58},[52,43928,43929,43931],{"class":54,"line":80},[52,43930,83],{"class":58},[52,43932,43933],{"class":62},"Plasma\n",[52,43935,43936,43938,43940],{"class":54,"line":108},[52,43937,17644],{"class":66},[52,43939,70],{"class":58},[52,43941,42830],{"class":73},[52,43943,43944],{"class":54,"line":118},[52,43945,1224],{"class":58},[52,43947,43948,43950,43952],{"class":54,"line":594},[52,43949,121],{"class":58},[52,43951,63],{"class":62},[52,43953,77],{"class":58},[43,43955,43957],{"className":360,"code":43956,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,43958,43959,43967,43973,43985,43989],{"__ignoreMap":48},[52,43960,43961,43963,43965],{"class":54,"line":55},[52,43962,59],{"class":58},[52,43964,63],{"class":371},[52,43966,77],{"class":58},[52,43968,43969,43971],{"class":54,"line":80},[52,43970,83],{"class":58},[52,43972,43933],{"class":371},[52,43974,43975,43977,43979,43981,43983],{"class":54,"line":108},[52,43976,17755],{"class":66},[52,43978,70],{"class":231},[52,43980,723],{"class":58},[52,43982,12945],{"class":371},[52,43984,729],{"class":58},[52,43986,43987],{"class":54,"line":118},[52,43988,1224],{"class":58},[52,43990,43991,43993,43995],{"class":54,"line":594},[52,43992,121],{"class":58},[52,43994,63],{"class":371},[52,43996,77],{"class":58},[43,43998,43999],{"className":2507,"code":43956,"language":2509,"meta":48,"style":48},[31,44000,44001,44009,44015,44025,44029],{"__ignoreMap":48},[52,44002,44003,44005,44007],{"class":54,"line":55},[52,44004,59],{"class":58},[52,44006,63],{"class":371},[52,44008,77],{"class":58},[52,44010,44011,44013],{"class":54,"line":80},[52,44012,83],{"class":58},[52,44014,43933],{"class":371},[52,44016,44017,44019,44021,44023],{"class":54,"line":108},[52,44018,17755],{"class":66},[52,44020,24620],{"class":58},[52,44022,12945],{"class":371},[52,44024,729],{"class":58},[52,44026,44027],{"class":54,"line":118},[52,44028,1224],{"class":58},[52,44030,44031,44033,44035],{"class":54,"line":594},[52,44032,121],{"class":58},[52,44034,63],{"class":371},[52,44036,77],{"class":58},[43,44038,44039],{"className":419,"code":43956,"language":420,"meta":48,"style":48},[31,44040,44041,44049,44055,44067,44071],{"__ignoreMap":48},[52,44042,44043,44045,44047],{"class":54,"line":55},[52,44044,59],{"class":58},[52,44046,63],{"class":371},[52,44048,77],{"class":58},[52,44050,44051,44053],{"class":54,"line":80},[52,44052,83],{"class":58},[52,44054,43933],{"class":371},[52,44056,44057,44059,44061,44063,44065],{"class":54,"line":108},[52,44058,17755],{"class":66},[52,44060,70],{"class":231},[52,44062,723],{"class":58},[52,44064,12945],{"class":371},[52,44066,729],{"class":58},[52,44068,44069],{"class":54,"line":118},[52,44070,1224],{"class":58},[52,44072,44073,44075,44077],{"class":54,"line":594},[52,44074,121],{"class":58},[52,44076,63],{"class":371},[52,44078,77],{"class":58},[43,44080,44082],{"className":222,"code":44081,"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,44083,44084,44094,44098,44112,44116,44129,44133],{"__ignoreMap":48},[52,44085,44086,44088,44090,44092],{"class":54,"line":55},[52,44087,232],{"class":231},[52,44089,9005],{"class":58},[52,44091,238],{"class":231},[52,44093,9010],{"class":73},[52,44095,44096],{"class":54,"line":80},[52,44097,597],{"emptyLinePlaceholder":171},[52,44099,44100,44102,44104,44106,44108,44110],{"class":54,"line":108},[52,44101,1721],{"class":231},[52,44103,1724],{"class":371},[52,44105,1727],{"class":231},[52,44107,1730],{"class":231},[52,44109,1733],{"class":66},[52,44111,1736],{"class":58},[52,44113,44114],{"class":54,"line":118},[52,44115,1751],{"class":58},[52,44117,44118,44120,44123,44125,44127],{"class":54,"line":594},[52,44119,1756],{"class":58},[52,44121,44122],{"class":73},"'Plasma'",[52,44124,26969],{"class":58},[52,44126,12945],{"class":371},[52,44128,1768],{"class":58},[52,44130,44131],{"class":54,"line":600},[52,44132,1773],{"class":58},[52,44134,44135],{"class":54,"line":606},[52,44136,1778],{"class":58},[156,44138,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44140},[44141,44142],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/plasma",{"title":10562,"description":43902},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":44149,"title":44150,"body":44151,"category":28880,"componentType":20623,"description":44158,"extension":168,"meta":44521,"navigation":171,"path":44522,"requiresChild":171,"seo":44523,"stem":44524,"__hash__":44525},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":44152,"toc":44517},[44153,44156,44159,44161,44163,44166,44168,44515],[11,44154,44150],{"id":44155},"polarcoordinates",[15,44157,44158],{},"Convert rectangular coordinates to polar space",[26676,44160],{"component":44150},[23,44162,26680],{"id":21278},[26682,44164],{":props":44165},"[{\"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,44167,26688],{"id":26687},[217,44169,44170,44234,44305,44371,44441],{":tabs":1543},[43,44171,44173],{"className":45,"code":44172,"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,44174,44175,44183,44190,44198,44206,44210,44218,44226],{"__ignoreMap":48},[52,44176,44177,44179,44181],{"class":54,"line":55},[52,44178,59],{"class":58},[52,44180,63],{"class":62},[52,44182,77],{"class":58},[52,44184,44185,44187],{"class":54,"line":80},[52,44186,83],{"class":58},[52,44188,44189],{"class":62},"PolarCoordinates\n",[52,44191,44192,44194,44196],{"class":54,"line":108},[52,44193,14675],{"class":66},[52,44195,70],{"class":58},[52,44197,28602],{"class":73},[52,44199,44200,44202,44204],{"class":54,"line":118},[52,44201,17644],{"class":66},[52,44203,70],{"class":58},[52,44205,28602],{"class":73},[52,44207,44208],{"class":54,"line":594},[52,44209,26724],{"class":58},[52,44211,44212,44214,44216],{"class":54,"line":600},[52,44213,2213],{"class":58},[52,44215,2216],{"class":62},[52,44217,105],{"class":58},[52,44219,44220,44222,44224],{"class":54,"line":606},[52,44221,2230],{"class":58},[52,44223,44150],{"class":62},[52,44225,77],{"class":58},[52,44227,44228,44230,44232],{"class":54,"line":653},[52,44229,121],{"class":58},[52,44231,63],{"class":62},[52,44233,77],{"class":58},[43,44235,44237],{"className":360,"code":44236,"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,44238,44239,44247,44253,44265,44277,44281,44289,44297],{"__ignoreMap":48},[52,44240,44241,44243,44245],{"class":54,"line":55},[52,44242,59],{"class":58},[52,44244,63],{"class":371},[52,44246,77],{"class":58},[52,44248,44249,44251],{"class":54,"line":80},[52,44250,83],{"class":58},[52,44252,44189],{"class":371},[52,44254,44255,44257,44259,44261,44263],{"class":54,"line":108},[52,44256,7135],{"class":66},[52,44258,70],{"class":231},[52,44260,723],{"class":58},[52,44262,6165],{"class":371},[52,44264,729],{"class":58},[52,44266,44267,44269,44271,44273,44275],{"class":54,"line":118},[52,44268,17755],{"class":66},[52,44270,70],{"class":231},[52,44272,723],{"class":58},[52,44274,6165],{"class":371},[52,44276,729],{"class":58},[52,44278,44279],{"class":54,"line":594},[52,44280,26724],{"class":58},[52,44282,44283,44285,44287],{"class":54,"line":600},[52,44284,2213],{"class":58},[52,44286,2216],{"class":371},[52,44288,105],{"class":58},[52,44290,44291,44293,44295],{"class":54,"line":606},[52,44292,2230],{"class":58},[52,44294,44150],{"class":371},[52,44296,77],{"class":58},[52,44298,44299,44301,44303],{"class":54,"line":653},[52,44300,121],{"class":58},[52,44302,63],{"class":371},[52,44304,77],{"class":58},[43,44306,44307],{"className":2507,"code":44236,"language":2509,"meta":48,"style":48},[31,44308,44309,44317,44323,44333,44343,44347,44355,44363],{"__ignoreMap":48},[52,44310,44311,44313,44315],{"class":54,"line":55},[52,44312,59],{"class":58},[52,44314,63],{"class":371},[52,44316,77],{"class":58},[52,44318,44319,44321],{"class":54,"line":80},[52,44320,83],{"class":58},[52,44322,44189],{"class":371},[52,44324,44325,44327,44329,44331],{"class":54,"line":108},[52,44326,7135],{"class":66},[52,44328,24620],{"class":58},[52,44330,6165],{"class":371},[52,44332,729],{"class":58},[52,44334,44335,44337,44339,44341],{"class":54,"line":118},[52,44336,17755],{"class":66},[52,44338,24620],{"class":58},[52,44340,6165],{"class":371},[52,44342,729],{"class":58},[52,44344,44345],{"class":54,"line":594},[52,44346,26724],{"class":58},[52,44348,44349,44351,44353],{"class":54,"line":600},[52,44350,2213],{"class":58},[52,44352,2216],{"class":371},[52,44354,105],{"class":58},[52,44356,44357,44359,44361],{"class":54,"line":606},[52,44358,2230],{"class":58},[52,44360,44150],{"class":371},[52,44362,77],{"class":58},[52,44364,44365,44367,44369],{"class":54,"line":653},[52,44366,121],{"class":58},[52,44368,63],{"class":371},[52,44370,77],{"class":58},[43,44372,44373],{"className":419,"code":44236,"language":420,"meta":48,"style":48},[31,44374,44375,44383,44389,44401,44413,44417,44425,44433],{"__ignoreMap":48},[52,44376,44377,44379,44381],{"class":54,"line":55},[52,44378,59],{"class":58},[52,44380,63],{"class":371},[52,44382,77],{"class":58},[52,44384,44385,44387],{"class":54,"line":80},[52,44386,83],{"class":58},[52,44388,44189],{"class":371},[52,44390,44391,44393,44395,44397,44399],{"class":54,"line":108},[52,44392,7135],{"class":66},[52,44394,70],{"class":231},[52,44396,723],{"class":58},[52,44398,6165],{"class":371},[52,44400,729],{"class":58},[52,44402,44403,44405,44407,44409,44411],{"class":54,"line":118},[52,44404,17755],{"class":66},[52,44406,70],{"class":231},[52,44408,723],{"class":58},[52,44410,6165],{"class":371},[52,44412,729],{"class":58},[52,44414,44415],{"class":54,"line":594},[52,44416,26724],{"class":58},[52,44418,44419,44421,44423],{"class":54,"line":600},[52,44420,2213],{"class":58},[52,44422,2216],{"class":371},[52,44424,105],{"class":58},[52,44426,44427,44429,44431],{"class":54,"line":606},[52,44428,2230],{"class":58},[52,44430,44150],{"class":371},[52,44432,77],{"class":58},[52,44434,44435,44437,44439],{"class":54,"line":653},[52,44436,121],{"class":58},[52,44438,63],{"class":371},[52,44440,77],{"class":58},[43,44442,44444],{"className":222,"code":44443,"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,44445,44446,44456,44460,44474,44478,44495,44503,44507,44511],{"__ignoreMap":48},[52,44447,44448,44450,44452,44454],{"class":54,"line":55},[52,44449,232],{"class":231},[52,44451,9005],{"class":58},[52,44453,238],{"class":231},[52,44455,9010],{"class":73},[52,44457,44458],{"class":54,"line":80},[52,44459,597],{"emptyLinePlaceholder":171},[52,44461,44462,44464,44466,44468,44470,44472],{"class":54,"line":108},[52,44463,1721],{"class":231},[52,44465,1724],{"class":371},[52,44467,1727],{"class":231},[52,44469,1730],{"class":231},[52,44471,1733],{"class":66},[52,44473,1736],{"class":58},[52,44475,44476],{"class":54,"line":118},[52,44477,1751],{"class":58},[52,44479,44480,44482,44485,44487,44489,44491,44493],{"class":54,"line":594},[52,44481,1756],{"class":58},[52,44483,44484],{"class":73},"'PolarCoordinates'",[52,44486,5028],{"class":58},[52,44488,6165],{"class":371},[52,44490,34398],{"class":58},[52,44492,6165],{"class":371},[52,44494,5033],{"class":58},[52,44496,44497,44499,44501],{"class":54,"line":600},[52,44498,4501],{"class":58},[52,44500,2869],{"class":73},[52,44502,2129],{"class":58},[52,44504,44505],{"class":54,"line":606},[52,44506,4518],{"class":58},[52,44508,44509],{"class":54,"line":653},[52,44510,1773],{"class":58},[52,44512,44513],{"class":54,"line":662},[52,44514,1778],{"class":58},[156,44516,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44518},[44519,44520],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/polarcoordinates",{"title":44150,"description":44158},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":44527,"title":44528,"body":44529,"category":30502,"componentType":20617,"description":44536,"extension":168,"meta":44813,"navigation":171,"path":44814,"requiresChild":27538,"seo":44815,"stem":44816,"__hash__":44817},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":44530,"toc":44809},[44531,44534,44537,44539,44541,44544,44546,44807],[11,44532,44528],{"id":44533},"polygon",[15,44535,44536],{},"Regular polygon with adjustable sides and corner rounding",[26676,44538],{"component":44528},[23,44540,26680],{"id":21278},[26682,44542],{":props":44543},"[{\"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,44545,26688],{"id":26687},[217,44547,44548,44596,44647,44695,44745],{":tabs":1543},[43,44549,44551],{"className":45,"code":44550,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,44552,44553,44561,44568,44576,44584,44588],{"__ignoreMap":48},[52,44554,44555,44557,44559],{"class":54,"line":55},[52,44556,59],{"class":58},[52,44558,63],{"class":62},[52,44560,77],{"class":58},[52,44562,44563,44565],{"class":54,"line":80},[52,44564,83],{"class":58},[52,44566,44567],{"class":62},"Polygon\n",[52,44569,44570,44572,44574],{"class":54,"line":108},[52,44571,7125],{"class":66},[52,44573,70],{"class":58},[52,44575,7081],{"class":73},[52,44577,44578,44580,44582],{"class":54,"line":118},[52,44579,14675],{"class":66},[52,44581,70],{"class":58},[52,44583,36239],{"class":73},[52,44585,44586],{"class":54,"line":594},[52,44587,1224],{"class":58},[52,44589,44590,44592,44594],{"class":54,"line":600},[52,44591,121],{"class":58},[52,44593,63],{"class":62},[52,44595,77],{"class":58},[43,44597,44599],{"className":360,"code":44598,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,44600,44601,44609,44615,44623,44635,44639],{"__ignoreMap":48},[52,44602,44603,44605,44607],{"class":54,"line":55},[52,44604,59],{"class":58},[52,44606,63],{"class":371},[52,44608,77],{"class":58},[52,44610,44611,44613],{"class":54,"line":80},[52,44612,83],{"class":58},[52,44614,44567],{"class":371},[52,44616,44617,44619,44621],{"class":54,"line":108},[52,44618,7125],{"class":66},[52,44620,70],{"class":231},[52,44622,7081],{"class":73},[52,44624,44625,44627,44629,44631,44633],{"class":54,"line":118},[52,44626,7135],{"class":66},[52,44628,70],{"class":231},[52,44630,723],{"class":58},[52,44632,5737],{"class":371},[52,44634,729],{"class":58},[52,44636,44637],{"class":54,"line":594},[52,44638,1224],{"class":58},[52,44640,44641,44643,44645],{"class":54,"line":600},[52,44642,121],{"class":58},[52,44644,63],{"class":371},[52,44646,77],{"class":58},[43,44648,44649],{"className":2507,"code":44598,"language":2509,"meta":48,"style":48},[31,44650,44651,44659,44665,44673,44683,44687],{"__ignoreMap":48},[52,44652,44653,44655,44657],{"class":54,"line":55},[52,44654,59],{"class":58},[52,44656,63],{"class":371},[52,44658,77],{"class":58},[52,44660,44661,44663],{"class":54,"line":80},[52,44662,83],{"class":58},[52,44664,44567],{"class":371},[52,44666,44667,44669,44671],{"class":54,"line":108},[52,44668,7125],{"class":66},[52,44670,70],{"class":58},[52,44672,7081],{"class":73},[52,44674,44675,44677,44679,44681],{"class":54,"line":118},[52,44676,7135],{"class":66},[52,44678,24620],{"class":58},[52,44680,5737],{"class":371},[52,44682,729],{"class":58},[52,44684,44685],{"class":54,"line":594},[52,44686,1224],{"class":58},[52,44688,44689,44691,44693],{"class":54,"line":600},[52,44690,121],{"class":58},[52,44692,63],{"class":371},[52,44694,77],{"class":58},[43,44696,44697],{"className":419,"code":44598,"language":420,"meta":48,"style":48},[31,44698,44699,44707,44713,44721,44733,44737],{"__ignoreMap":48},[52,44700,44701,44703,44705],{"class":54,"line":55},[52,44702,59],{"class":58},[52,44704,63],{"class":371},[52,44706,77],{"class":58},[52,44708,44709,44711],{"class":54,"line":80},[52,44710,83],{"class":58},[52,44712,44567],{"class":371},[52,44714,44715,44717,44719],{"class":54,"line":108},[52,44716,7125],{"class":66},[52,44718,70],{"class":231},[52,44720,7081],{"class":73},[52,44722,44723,44725,44727,44729,44731],{"class":54,"line":118},[52,44724,7135],{"class":66},[52,44726,70],{"class":231},[52,44728,723],{"class":58},[52,44730,5737],{"class":371},[52,44732,729],{"class":58},[52,44734,44735],{"class":54,"line":594},[52,44736,1224],{"class":58},[52,44738,44739,44741,44743],{"class":54,"line":600},[52,44740,121],{"class":58},[52,44742,63],{"class":371},[52,44744,77],{"class":58},[43,44746,44748],{"className":222,"code":44747,"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,44749,44750,44760,44764,44778,44782,44799,44803],{"__ignoreMap":48},[52,44751,44752,44754,44756,44758],{"class":54,"line":55},[52,44753,232],{"class":231},[52,44755,9005],{"class":58},[52,44757,238],{"class":231},[52,44759,9010],{"class":73},[52,44761,44762],{"class":54,"line":80},[52,44763,597],{"emptyLinePlaceholder":171},[52,44765,44766,44768,44770,44772,44774,44776],{"class":54,"line":108},[52,44767,1721],{"class":231},[52,44769,1724],{"class":371},[52,44771,1727],{"class":231},[52,44773,1730],{"class":231},[52,44775,1733],{"class":66},[52,44777,1736],{"class":58},[52,44779,44780],{"class":54,"line":118},[52,44781,1751],{"class":58},[52,44783,44784,44786,44789,44791,44793,44795,44797],{"class":54,"line":594},[52,44785,1756],{"class":58},[52,44787,44788],{"class":73},"'Polygon'",[52,44790,1762],{"class":58},[52,44792,7660],{"class":73},[52,44794,4052],{"class":58},[52,44796,5737],{"class":371},[52,44798,1768],{"class":58},[52,44800,44801],{"class":54,"line":600},[52,44802,1773],{"class":58},[52,44804,44805],{"class":54,"line":606},[52,44806,1778],{"class":58},[156,44808,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44810},[44811,44812],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/polygon",{"title":44528,"description":44536},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":44819,"title":44820,"body":44821,"category":28546,"componentType":20623,"description":44828,"extension":168,"meta":45146,"navigation":171,"path":45147,"requiresChild":171,"seo":45148,"stem":45149,"__hash__":45150},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":44822,"toc":45142},[44823,44826,44829,44831,44833,44836,44838,45140],[11,44824,44820],{"id":44825},"posterize",[15,44827,44828],{},"Reduce color depth to create a poster effect",[26676,44830],{"component":44820},[23,44832,26680],{"id":21278},[26682,44834],{":props":44835},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,44837,26688],{"id":26687},[217,44839,44840,44897,44956,45012,45070],{":tabs":1543},[43,44841,44843],{"className":45,"code":44842,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,44844,44845,44853,44860,44869,44873,44881,44889],{"__ignoreMap":48},[52,44846,44847,44849,44851],{"class":54,"line":55},[52,44848,59],{"class":58},[52,44850,63],{"class":62},[52,44852,77],{"class":58},[52,44854,44855,44857],{"class":54,"line":80},[52,44856,83],{"class":58},[52,44858,44859],{"class":62},"Posterize\n",[52,44861,44862,44864,44866],{"class":54,"line":108},[52,44863,17644],{"class":66},[52,44865,70],{"class":58},[52,44867,44868],{"class":73},"\"5\"\n",[52,44870,44871],{"class":54,"line":118},[52,44872,26724],{"class":58},[52,44874,44875,44877,44879],{"class":54,"line":594},[52,44876,2213],{"class":58},[52,44878,2216],{"class":62},[52,44880,105],{"class":58},[52,44882,44883,44885,44887],{"class":54,"line":600},[52,44884,2230],{"class":58},[52,44886,44820],{"class":62},[52,44888,77],{"class":58},[52,44890,44891,44893,44895],{"class":54,"line":606},[52,44892,121],{"class":58},[52,44894,63],{"class":62},[52,44896,77],{"class":58},[43,44898,44900],{"className":360,"code":44899,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,44901,44902,44910,44916,44928,44932,44940,44948],{"__ignoreMap":48},[52,44903,44904,44906,44908],{"class":54,"line":55},[52,44905,59],{"class":58},[52,44907,63],{"class":371},[52,44909,77],{"class":58},[52,44911,44912,44914],{"class":54,"line":80},[52,44913,83],{"class":58},[52,44915,44859],{"class":371},[52,44917,44918,44920,44922,44924,44926],{"class":54,"line":108},[52,44919,17755],{"class":66},[52,44921,70],{"class":231},[52,44923,723],{"class":58},[52,44925,19341],{"class":371},[52,44927,729],{"class":58},[52,44929,44930],{"class":54,"line":118},[52,44931,26724],{"class":58},[52,44933,44934,44936,44938],{"class":54,"line":594},[52,44935,2213],{"class":58},[52,44937,2216],{"class":371},[52,44939,105],{"class":58},[52,44941,44942,44944,44946],{"class":54,"line":600},[52,44943,2230],{"class":58},[52,44945,44820],{"class":371},[52,44947,77],{"class":58},[52,44949,44950,44952,44954],{"class":54,"line":606},[52,44951,121],{"class":58},[52,44953,63],{"class":371},[52,44955,77],{"class":58},[43,44957,44958],{"className":2507,"code":44899,"language":2509,"meta":48,"style":48},[31,44959,44960,44968,44974,44984,44988,44996,45004],{"__ignoreMap":48},[52,44961,44962,44964,44966],{"class":54,"line":55},[52,44963,59],{"class":58},[52,44965,63],{"class":371},[52,44967,77],{"class":58},[52,44969,44970,44972],{"class":54,"line":80},[52,44971,83],{"class":58},[52,44973,44859],{"class":371},[52,44975,44976,44978,44980,44982],{"class":54,"line":108},[52,44977,17755],{"class":66},[52,44979,24620],{"class":58},[52,44981,19341],{"class":371},[52,44983,729],{"class":58},[52,44985,44986],{"class":54,"line":118},[52,44987,26724],{"class":58},[52,44989,44990,44992,44994],{"class":54,"line":594},[52,44991,2213],{"class":58},[52,44993,2216],{"class":371},[52,44995,105],{"class":58},[52,44997,44998,45000,45002],{"class":54,"line":600},[52,44999,2230],{"class":58},[52,45001,44820],{"class":371},[52,45003,77],{"class":58},[52,45005,45006,45008,45010],{"class":54,"line":606},[52,45007,121],{"class":58},[52,45009,63],{"class":371},[52,45011,77],{"class":58},[43,45013,45014],{"className":419,"code":44899,"language":420,"meta":48,"style":48},[31,45015,45016,45024,45030,45042,45046,45054,45062],{"__ignoreMap":48},[52,45017,45018,45020,45022],{"class":54,"line":55},[52,45019,59],{"class":58},[52,45021,63],{"class":371},[52,45023,77],{"class":58},[52,45025,45026,45028],{"class":54,"line":80},[52,45027,83],{"class":58},[52,45029,44859],{"class":371},[52,45031,45032,45034,45036,45038,45040],{"class":54,"line":108},[52,45033,17755],{"class":66},[52,45035,70],{"class":231},[52,45037,723],{"class":58},[52,45039,19341],{"class":371},[52,45041,729],{"class":58},[52,45043,45044],{"class":54,"line":118},[52,45045,26724],{"class":58},[52,45047,45048,45050,45052],{"class":54,"line":594},[52,45049,2213],{"class":58},[52,45051,2216],{"class":371},[52,45053,105],{"class":58},[52,45055,45056,45058,45060],{"class":54,"line":600},[52,45057,2230],{"class":58},[52,45059,44820],{"class":371},[52,45061,77],{"class":58},[52,45063,45064,45066,45068],{"class":54,"line":606},[52,45065,121],{"class":58},[52,45067,63],{"class":371},[52,45069,77],{"class":58},[43,45071,45073],{"className":222,"code":45072,"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,45074,45075,45085,45089,45103,45107,45120,45128,45132,45136],{"__ignoreMap":48},[52,45076,45077,45079,45081,45083],{"class":54,"line":55},[52,45078,232],{"class":231},[52,45080,9005],{"class":58},[52,45082,238],{"class":231},[52,45084,9010],{"class":73},[52,45086,45087],{"class":54,"line":80},[52,45088,597],{"emptyLinePlaceholder":171},[52,45090,45091,45093,45095,45097,45099,45101],{"class":54,"line":108},[52,45092,1721],{"class":231},[52,45094,1724],{"class":371},[52,45096,1727],{"class":231},[52,45098,1730],{"class":231},[52,45100,1733],{"class":66},[52,45102,1736],{"class":58},[52,45104,45105],{"class":54,"line":118},[52,45106,1751],{"class":58},[52,45108,45109,45111,45114,45116,45118],{"class":54,"line":594},[52,45110,1756],{"class":58},[52,45112,45113],{"class":73},"'Posterize'",[52,45115,26969],{"class":58},[52,45117,19341],{"class":371},[52,45119,5033],{"class":58},[52,45121,45122,45124,45126],{"class":54,"line":600},[52,45123,4501],{"class":58},[52,45125,2869],{"class":73},[52,45127,2129],{"class":58},[52,45129,45130],{"class":54,"line":606},[52,45131,4518],{"class":58},[52,45133,45134],{"class":54,"line":653},[52,45135,1773],{"class":58},[52,45137,45138],{"class":54,"line":662},[52,45139,1778],{"class":58},[156,45141,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45143},[45144,45145],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/posterize",{"title":44820,"description":44828},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":45152,"title":45153,"body":45154,"category":27000,"componentType":20623,"description":45161,"extension":168,"meta":45478,"navigation":171,"path":45479,"requiresChild":171,"seo":45480,"stem":45481,"__hash__":45482},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":45155,"toc":45474},[45156,45159,45162,45164,45166,45169,45171,45472],[11,45157,45153],{"id":45158},"progressiveblur",[15,45160,45161],{},"Blur that increases progressively in one direction",[26676,45163],{"component":45153},[23,45165,26680],{"id":21278},[26682,45167],{":props":45168},"[{\"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,45170,26688],{"id":26687},[217,45172,45173,45229,45288,45344,45402],{":tabs":1543},[43,45174,45176],{"className":45,"code":45175,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45177,45178,45186,45193,45201,45205,45213,45221],{"__ignoreMap":48},[52,45179,45180,45182,45184],{"class":54,"line":55},[52,45181,59],{"class":58},[52,45183,63],{"class":62},[52,45185,77],{"class":58},[52,45187,45188,45190],{"class":54,"line":80},[52,45189,83],{"class":58},[52,45191,45192],{"class":62},"ProgressiveBlur\n",[52,45194,45195,45197,45199],{"class":54,"line":108},[52,45196,17644],{"class":66},[52,45198,70],{"class":58},[52,45200,27991],{"class":73},[52,45202,45203],{"class":54,"line":118},[52,45204,26724],{"class":58},[52,45206,45207,45209,45211],{"class":54,"line":594},[52,45208,2213],{"class":58},[52,45210,2216],{"class":62},[52,45212,105],{"class":58},[52,45214,45215,45217,45219],{"class":54,"line":600},[52,45216,2230],{"class":58},[52,45218,45153],{"class":62},[52,45220,77],{"class":58},[52,45222,45223,45225,45227],{"class":54,"line":606},[52,45224,121],{"class":58},[52,45226,63],{"class":62},[52,45228,77],{"class":58},[43,45230,45232],{"className":360,"code":45231,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45233,45234,45242,45248,45260,45264,45272,45280],{"__ignoreMap":48},[52,45235,45236,45238,45240],{"class":54,"line":55},[52,45237,59],{"class":58},[52,45239,63],{"class":371},[52,45241,77],{"class":58},[52,45243,45244,45246],{"class":54,"line":80},[52,45245,83],{"class":58},[52,45247,45192],{"class":371},[52,45249,45250,45252,45254,45256,45258],{"class":54,"line":108},[52,45251,17755],{"class":66},[52,45253,70],{"class":231},[52,45255,723],{"class":58},[52,45257,28049],{"class":371},[52,45259,729],{"class":58},[52,45261,45262],{"class":54,"line":118},[52,45263,26724],{"class":58},[52,45265,45266,45268,45270],{"class":54,"line":594},[52,45267,2213],{"class":58},[52,45269,2216],{"class":371},[52,45271,105],{"class":58},[52,45273,45274,45276,45278],{"class":54,"line":600},[52,45275,2230],{"class":58},[52,45277,45153],{"class":371},[52,45279,77],{"class":58},[52,45281,45282,45284,45286],{"class":54,"line":606},[52,45283,121],{"class":58},[52,45285,63],{"class":371},[52,45287,77],{"class":58},[43,45289,45290],{"className":2507,"code":45231,"language":2509,"meta":48,"style":48},[31,45291,45292,45300,45306,45316,45320,45328,45336],{"__ignoreMap":48},[52,45293,45294,45296,45298],{"class":54,"line":55},[52,45295,59],{"class":58},[52,45297,63],{"class":371},[52,45299,77],{"class":58},[52,45301,45302,45304],{"class":54,"line":80},[52,45303,83],{"class":58},[52,45305,45192],{"class":371},[52,45307,45308,45310,45312,45314],{"class":54,"line":108},[52,45309,17755],{"class":66},[52,45311,24620],{"class":58},[52,45313,28049],{"class":371},[52,45315,729],{"class":58},[52,45317,45318],{"class":54,"line":118},[52,45319,26724],{"class":58},[52,45321,45322,45324,45326],{"class":54,"line":594},[52,45323,2213],{"class":58},[52,45325,2216],{"class":371},[52,45327,105],{"class":58},[52,45329,45330,45332,45334],{"class":54,"line":600},[52,45331,2230],{"class":58},[52,45333,45153],{"class":371},[52,45335,77],{"class":58},[52,45337,45338,45340,45342],{"class":54,"line":606},[52,45339,121],{"class":58},[52,45341,63],{"class":371},[52,45343,77],{"class":58},[43,45345,45346],{"className":419,"code":45231,"language":420,"meta":48,"style":48},[31,45347,45348,45356,45362,45374,45378,45386,45394],{"__ignoreMap":48},[52,45349,45350,45352,45354],{"class":54,"line":55},[52,45351,59],{"class":58},[52,45353,63],{"class":371},[52,45355,77],{"class":58},[52,45357,45358,45360],{"class":54,"line":80},[52,45359,83],{"class":58},[52,45361,45192],{"class":371},[52,45363,45364,45366,45368,45370,45372],{"class":54,"line":108},[52,45365,17755],{"class":66},[52,45367,70],{"class":231},[52,45369,723],{"class":58},[52,45371,28049],{"class":371},[52,45373,729],{"class":58},[52,45375,45376],{"class":54,"line":118},[52,45377,26724],{"class":58},[52,45379,45380,45382,45384],{"class":54,"line":594},[52,45381,2213],{"class":58},[52,45383,2216],{"class":371},[52,45385,105],{"class":58},[52,45387,45388,45390,45392],{"class":54,"line":600},[52,45389,2230],{"class":58},[52,45391,45153],{"class":371},[52,45393,77],{"class":58},[52,45395,45396,45398,45400],{"class":54,"line":606},[52,45397,121],{"class":58},[52,45399,63],{"class":371},[52,45401,77],{"class":58},[43,45403,45405],{"className":222,"code":45404,"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,45406,45407,45417,45421,45435,45439,45452,45460,45464,45468],{"__ignoreMap":48},[52,45408,45409,45411,45413,45415],{"class":54,"line":55},[52,45410,232],{"class":231},[52,45412,9005],{"class":58},[52,45414,238],{"class":231},[52,45416,9010],{"class":73},[52,45418,45419],{"class":54,"line":80},[52,45420,597],{"emptyLinePlaceholder":171},[52,45422,45423,45425,45427,45429,45431,45433],{"class":54,"line":108},[52,45424,1721],{"class":231},[52,45426,1724],{"class":371},[52,45428,1727],{"class":231},[52,45430,1730],{"class":231},[52,45432,1733],{"class":66},[52,45434,1736],{"class":58},[52,45436,45437],{"class":54,"line":118},[52,45438,1751],{"class":58},[52,45440,45441,45443,45446,45448,45450],{"class":54,"line":594},[52,45442,1756],{"class":58},[52,45444,45445],{"class":73},"'ProgressiveBlur'",[52,45447,26969],{"class":58},[52,45449,28049],{"class":371},[52,45451,5033],{"class":58},[52,45453,45454,45456,45458],{"class":54,"line":600},[52,45455,4501],{"class":58},[52,45457,2869],{"class":73},[52,45459,2129],{"class":58},[52,45461,45462],{"class":54,"line":606},[52,45463,4518],{"class":58},[52,45465,45466],{"class":54,"line":653},[52,45467,1773],{"class":58},[52,45469,45470],{"class":54,"line":662},[52,45471,1778],{"class":58},[156,45473,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45475},[45476,45477],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/progressiveblur",{"title":45153,"description":45161},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":45484,"title":45485,"body":45486,"category":27535,"componentType":20617,"description":45493,"extension":168,"meta":45734,"navigation":171,"path":45735,"requiresChild":27538,"seo":45736,"stem":45737,"__hash__":45738},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":45487,"toc":45730},[45488,45491,45494,45496,45498,45501,45503,45728],[11,45489,45485],{"id":45490},"radialgradient",[15,45492,45493],{},"Radial gradient radiating from a center point",[26676,45495],{"component":45485},[23,45497,26680],{"id":21278},[26682,45499],{":props":45500},"[{\"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,45502,26688],{"id":26687},[217,45504,45505,45545,45588,45628,45670],{":tabs":1543},[43,45506,45508],{"className":45,"code":45507,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,45509,45510,45518,45525,45533,45537],{"__ignoreMap":48},[52,45511,45512,45514,45516],{"class":54,"line":55},[52,45513,59],{"class":58},[52,45515,63],{"class":62},[52,45517,77],{"class":58},[52,45519,45520,45522],{"class":54,"line":80},[52,45521,83],{"class":58},[52,45523,45524],{"class":62},"RadialGradient\n",[52,45526,45527,45529,45531],{"class":54,"line":108},[52,45528,14675],{"class":66},[52,45530,70],{"class":58},[52,45532,28602],{"class":73},[52,45534,45535],{"class":54,"line":118},[52,45536,1224],{"class":58},[52,45538,45539,45541,45543],{"class":54,"line":594},[52,45540,121],{"class":58},[52,45542,63],{"class":62},[52,45544,77],{"class":58},[43,45546,45548],{"className":360,"code":45547,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,45549,45550,45558,45564,45576,45580],{"__ignoreMap":48},[52,45551,45552,45554,45556],{"class":54,"line":55},[52,45553,59],{"class":58},[52,45555,63],{"class":371},[52,45557,77],{"class":58},[52,45559,45560,45562],{"class":54,"line":80},[52,45561,83],{"class":58},[52,45563,45524],{"class":371},[52,45565,45566,45568,45570,45572,45574],{"class":54,"line":108},[52,45567,7135],{"class":66},[52,45569,70],{"class":231},[52,45571,723],{"class":58},[52,45573,6165],{"class":371},[52,45575,729],{"class":58},[52,45577,45578],{"class":54,"line":118},[52,45579,1224],{"class":58},[52,45581,45582,45584,45586],{"class":54,"line":594},[52,45583,121],{"class":58},[52,45585,63],{"class":371},[52,45587,77],{"class":58},[43,45589,45590],{"className":2507,"code":45547,"language":2509,"meta":48,"style":48},[31,45591,45592,45600,45606,45616,45620],{"__ignoreMap":48},[52,45593,45594,45596,45598],{"class":54,"line":55},[52,45595,59],{"class":58},[52,45597,63],{"class":371},[52,45599,77],{"class":58},[52,45601,45602,45604],{"class":54,"line":80},[52,45603,83],{"class":58},[52,45605,45524],{"class":371},[52,45607,45608,45610,45612,45614],{"class":54,"line":108},[52,45609,7135],{"class":66},[52,45611,24620],{"class":58},[52,45613,6165],{"class":371},[52,45615,729],{"class":58},[52,45617,45618],{"class":54,"line":118},[52,45619,1224],{"class":58},[52,45621,45622,45624,45626],{"class":54,"line":594},[52,45623,121],{"class":58},[52,45625,63],{"class":371},[52,45627,77],{"class":58},[43,45629,45630],{"className":419,"code":45547,"language":420,"meta":48,"style":48},[31,45631,45632,45640,45646,45658,45662],{"__ignoreMap":48},[52,45633,45634,45636,45638],{"class":54,"line":55},[52,45635,59],{"class":58},[52,45637,63],{"class":371},[52,45639,77],{"class":58},[52,45641,45642,45644],{"class":54,"line":80},[52,45643,83],{"class":58},[52,45645,45524],{"class":371},[52,45647,45648,45650,45652,45654,45656],{"class":54,"line":108},[52,45649,7135],{"class":66},[52,45651,70],{"class":231},[52,45653,723],{"class":58},[52,45655,6165],{"class":371},[52,45657,729],{"class":58},[52,45659,45660],{"class":54,"line":118},[52,45661,1224],{"class":58},[52,45663,45664,45666,45668],{"class":54,"line":594},[52,45665,121],{"class":58},[52,45667,63],{"class":371},[52,45669,77],{"class":58},[43,45671,45673],{"className":222,"code":45672,"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,45674,45675,45685,45689,45703,45707,45720,45724],{"__ignoreMap":48},[52,45676,45677,45679,45681,45683],{"class":54,"line":55},[52,45678,232],{"class":231},[52,45680,9005],{"class":58},[52,45682,238],{"class":231},[52,45684,9010],{"class":73},[52,45686,45687],{"class":54,"line":80},[52,45688,597],{"emptyLinePlaceholder":171},[52,45690,45691,45693,45695,45697,45699,45701],{"class":54,"line":108},[52,45692,1721],{"class":231},[52,45694,1724],{"class":371},[52,45696,1727],{"class":231},[52,45698,1730],{"class":231},[52,45700,1733],{"class":66},[52,45702,1736],{"class":58},[52,45704,45705],{"class":54,"line":118},[52,45706,1751],{"class":58},[52,45708,45709,45711,45714,45716,45718],{"class":54,"line":594},[52,45710,1756],{"class":58},[52,45712,45713],{"class":73},"'RadialGradient'",[52,45715,5028],{"class":58},[52,45717,6165],{"class":371},[52,45719,1768],{"class":58},[52,45721,45722],{"class":54,"line":600},[52,45723,1773],{"class":58},[52,45725,45726],{"class":54,"line":606},[52,45727,1778],{"class":58},[156,45729,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45731},[45732,45733],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/radialgradient",{"title":45485,"description":45493},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":45740,"title":45741,"body":45742,"category":28880,"componentType":20623,"description":45749,"extension":168,"meta":46066,"navigation":171,"path":46067,"requiresChild":171,"seo":46068,"stem":46069,"__hash__":46070},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":45743,"toc":46062},[45744,45747,45750,45752,45754,45757,45759,46060],[11,45745,45741],{"id":45746},"rectangularcoordinates",[15,45748,45749],{},"Convert polar coordinates back to rectangular space",[26676,45751],{"component":45741},[23,45753,26680],{"id":21278},[26682,45755],{":props":45756},"[{\"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,45758,26688],{"id":26687},[217,45760,45761,45817,45876,45932,45990],{":tabs":1543},[43,45762,45764],{"className":45,"code":45763,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,45765,45766,45774,45781,45789,45793,45801,45809],{"__ignoreMap":48},[52,45767,45768,45770,45772],{"class":54,"line":55},[52,45769,59],{"class":58},[52,45771,63],{"class":62},[52,45773,77],{"class":58},[52,45775,45776,45778],{"class":54,"line":80},[52,45777,83],{"class":58},[52,45779,45780],{"class":62},"RectangularCoordinates\n",[52,45782,45783,45785,45787],{"class":54,"line":108},[52,45784,17644],{"class":66},[52,45786,70],{"class":58},[52,45788,28602],{"class":73},[52,45790,45791],{"class":54,"line":118},[52,45792,26724],{"class":58},[52,45794,45795,45797,45799],{"class":54,"line":594},[52,45796,2213],{"class":58},[52,45798,2216],{"class":62},[52,45800,105],{"class":58},[52,45802,45803,45805,45807],{"class":54,"line":600},[52,45804,2230],{"class":58},[52,45806,45741],{"class":62},[52,45808,77],{"class":58},[52,45810,45811,45813,45815],{"class":54,"line":606},[52,45812,121],{"class":58},[52,45814,63],{"class":62},[52,45816,77],{"class":58},[43,45818,45820],{"className":360,"code":45819,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,45821,45822,45830,45836,45848,45852,45860,45868],{"__ignoreMap":48},[52,45823,45824,45826,45828],{"class":54,"line":55},[52,45825,59],{"class":58},[52,45827,63],{"class":371},[52,45829,77],{"class":58},[52,45831,45832,45834],{"class":54,"line":80},[52,45833,83],{"class":58},[52,45835,45780],{"class":371},[52,45837,45838,45840,45842,45844,45846],{"class":54,"line":108},[52,45839,17755],{"class":66},[52,45841,70],{"class":231},[52,45843,723],{"class":58},[52,45845,6165],{"class":371},[52,45847,729],{"class":58},[52,45849,45850],{"class":54,"line":118},[52,45851,26724],{"class":58},[52,45853,45854,45856,45858],{"class":54,"line":594},[52,45855,2213],{"class":58},[52,45857,2216],{"class":371},[52,45859,105],{"class":58},[52,45861,45862,45864,45866],{"class":54,"line":600},[52,45863,2230],{"class":58},[52,45865,45741],{"class":371},[52,45867,77],{"class":58},[52,45869,45870,45872,45874],{"class":54,"line":606},[52,45871,121],{"class":58},[52,45873,63],{"class":371},[52,45875,77],{"class":58},[43,45877,45878],{"className":2507,"code":45819,"language":2509,"meta":48,"style":48},[31,45879,45880,45888,45894,45904,45908,45916,45924],{"__ignoreMap":48},[52,45881,45882,45884,45886],{"class":54,"line":55},[52,45883,59],{"class":58},[52,45885,63],{"class":371},[52,45887,77],{"class":58},[52,45889,45890,45892],{"class":54,"line":80},[52,45891,83],{"class":58},[52,45893,45780],{"class":371},[52,45895,45896,45898,45900,45902],{"class":54,"line":108},[52,45897,17755],{"class":66},[52,45899,24620],{"class":58},[52,45901,6165],{"class":371},[52,45903,729],{"class":58},[52,45905,45906],{"class":54,"line":118},[52,45907,26724],{"class":58},[52,45909,45910,45912,45914],{"class":54,"line":594},[52,45911,2213],{"class":58},[52,45913,2216],{"class":371},[52,45915,105],{"class":58},[52,45917,45918,45920,45922],{"class":54,"line":600},[52,45919,2230],{"class":58},[52,45921,45741],{"class":371},[52,45923,77],{"class":58},[52,45925,45926,45928,45930],{"class":54,"line":606},[52,45927,121],{"class":58},[52,45929,63],{"class":371},[52,45931,77],{"class":58},[43,45933,45934],{"className":419,"code":45819,"language":420,"meta":48,"style":48},[31,45935,45936,45944,45950,45962,45966,45974,45982],{"__ignoreMap":48},[52,45937,45938,45940,45942],{"class":54,"line":55},[52,45939,59],{"class":58},[52,45941,63],{"class":371},[52,45943,77],{"class":58},[52,45945,45946,45948],{"class":54,"line":80},[52,45947,83],{"class":58},[52,45949,45780],{"class":371},[52,45951,45952,45954,45956,45958,45960],{"class":54,"line":108},[52,45953,17755],{"class":66},[52,45955,70],{"class":231},[52,45957,723],{"class":58},[52,45959,6165],{"class":371},[52,45961,729],{"class":58},[52,45963,45964],{"class":54,"line":118},[52,45965,26724],{"class":58},[52,45967,45968,45970,45972],{"class":54,"line":594},[52,45969,2213],{"class":58},[52,45971,2216],{"class":371},[52,45973,105],{"class":58},[52,45975,45976,45978,45980],{"class":54,"line":600},[52,45977,2230],{"class":58},[52,45979,45741],{"class":371},[52,45981,77],{"class":58},[52,45983,45984,45986,45988],{"class":54,"line":606},[52,45985,121],{"class":58},[52,45987,63],{"class":371},[52,45989,77],{"class":58},[43,45991,45993],{"className":222,"code":45992,"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,45994,45995,46005,46009,46023,46027,46040,46048,46052,46056],{"__ignoreMap":48},[52,45996,45997,45999,46001,46003],{"class":54,"line":55},[52,45998,232],{"class":231},[52,46000,9005],{"class":58},[52,46002,238],{"class":231},[52,46004,9010],{"class":73},[52,46006,46007],{"class":54,"line":80},[52,46008,597],{"emptyLinePlaceholder":171},[52,46010,46011,46013,46015,46017,46019,46021],{"class":54,"line":108},[52,46012,1721],{"class":231},[52,46014,1724],{"class":371},[52,46016,1727],{"class":231},[52,46018,1730],{"class":231},[52,46020,1733],{"class":66},[52,46022,1736],{"class":58},[52,46024,46025],{"class":54,"line":118},[52,46026,1751],{"class":58},[52,46028,46029,46031,46034,46036,46038],{"class":54,"line":594},[52,46030,1756],{"class":58},[52,46032,46033],{"class":73},"'RectangularCoordinates'",[52,46035,26969],{"class":58},[52,46037,6165],{"class":371},[52,46039,5033],{"class":58},[52,46041,46042,46044,46046],{"class":54,"line":600},[52,46043,4501],{"class":58},[52,46045,2869],{"class":73},[52,46047,2129],{"class":58},[52,46049,46050],{"class":54,"line":606},[52,46051,4518],{"class":58},[52,46053,46054],{"class":54,"line":653},[52,46055,1773],{"class":58},[52,46057,46058],{"class":54,"line":662},[52,46059,1778],{"class":58},[156,46061,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46063},[46064,46065],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/rectangularcoordinates",{"title":45741,"description":45749},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":46072,"title":46073,"body":46074,"category":30502,"componentType":20617,"description":46081,"extension":168,"meta":46358,"navigation":171,"path":46359,"requiresChild":27538,"seo":46360,"stem":46361,"__hash__":46362},"components/docs/components/Ring.md","Ring",{"type":8,"value":46075,"toc":46354},[46076,46079,46082,46084,46086,46089,46091,46352],[11,46077,46073],{"id":46078},"ring",[15,46080,46081],{},"Annular ring (donut) with adjustable radius and band thickness",[26676,46083],{"component":46073},[23,46085,26680],{"id":21278},[26682,46087],{":props":46088},"[{\"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,46090,26688],{"id":26687},[217,46092,46093,46141,46192,46240,46290],{":tabs":1543},[43,46094,46096],{"className":45,"code":46095,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,46097,46098,46106,46113,46121,46129,46133],{"__ignoreMap":48},[52,46099,46100,46102,46104],{"class":54,"line":55},[52,46101,59],{"class":58},[52,46103,63],{"class":62},[52,46105,77],{"class":58},[52,46107,46108,46110],{"class":54,"line":80},[52,46109,83],{"class":58},[52,46111,46112],{"class":62},"Ring\n",[52,46114,46115,46117,46119],{"class":54,"line":108},[52,46116,7125],{"class":66},[52,46118,70],{"class":58},[52,46120,7081],{"class":73},[52,46122,46123,46125,46127],{"class":54,"line":118},[52,46124,14675],{"class":66},[52,46126,70],{"class":58},[52,46128,31374],{"class":73},[52,46130,46131],{"class":54,"line":594},[52,46132,1224],{"class":58},[52,46134,46135,46137,46139],{"class":54,"line":600},[52,46136,121],{"class":58},[52,46138,63],{"class":62},[52,46140,77],{"class":58},[43,46142,46144],{"className":360,"code":46143,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,46145,46146,46154,46160,46168,46180,46184],{"__ignoreMap":48},[52,46147,46148,46150,46152],{"class":54,"line":55},[52,46149,59],{"class":58},[52,46151,63],{"class":371},[52,46153,77],{"class":58},[52,46155,46156,46158],{"class":54,"line":80},[52,46157,83],{"class":58},[52,46159,46112],{"class":371},[52,46161,46162,46164,46166],{"class":54,"line":108},[52,46163,7125],{"class":66},[52,46165,70],{"class":231},[52,46167,7081],{"class":73},[52,46169,46170,46172,46174,46176,46178],{"class":54,"line":118},[52,46171,7135],{"class":66},[52,46173,70],{"class":231},[52,46175,723],{"class":58},[52,46177,19253],{"class":371},[52,46179,729],{"class":58},[52,46181,46182],{"class":54,"line":594},[52,46183,1224],{"class":58},[52,46185,46186,46188,46190],{"class":54,"line":600},[52,46187,121],{"class":58},[52,46189,63],{"class":371},[52,46191,77],{"class":58},[43,46193,46194],{"className":2507,"code":46143,"language":2509,"meta":48,"style":48},[31,46195,46196,46204,46210,46218,46228,46232],{"__ignoreMap":48},[52,46197,46198,46200,46202],{"class":54,"line":55},[52,46199,59],{"class":58},[52,46201,63],{"class":371},[52,46203,77],{"class":58},[52,46205,46206,46208],{"class":54,"line":80},[52,46207,83],{"class":58},[52,46209,46112],{"class":371},[52,46211,46212,46214,46216],{"class":54,"line":108},[52,46213,7125],{"class":66},[52,46215,70],{"class":58},[52,46217,7081],{"class":73},[52,46219,46220,46222,46224,46226],{"class":54,"line":118},[52,46221,7135],{"class":66},[52,46223,24620],{"class":58},[52,46225,19253],{"class":371},[52,46227,729],{"class":58},[52,46229,46230],{"class":54,"line":594},[52,46231,1224],{"class":58},[52,46233,46234,46236,46238],{"class":54,"line":600},[52,46235,121],{"class":58},[52,46237,63],{"class":371},[52,46239,77],{"class":58},[43,46241,46242],{"className":419,"code":46143,"language":420,"meta":48,"style":48},[31,46243,46244,46252,46258,46266,46278,46282],{"__ignoreMap":48},[52,46245,46246,46248,46250],{"class":54,"line":55},[52,46247,59],{"class":58},[52,46249,63],{"class":371},[52,46251,77],{"class":58},[52,46253,46254,46256],{"class":54,"line":80},[52,46255,83],{"class":58},[52,46257,46112],{"class":371},[52,46259,46260,46262,46264],{"class":54,"line":108},[52,46261,7125],{"class":66},[52,46263,70],{"class":231},[52,46265,7081],{"class":73},[52,46267,46268,46270,46272,46274,46276],{"class":54,"line":118},[52,46269,7135],{"class":66},[52,46271,70],{"class":231},[52,46273,723],{"class":58},[52,46275,19253],{"class":371},[52,46277,729],{"class":58},[52,46279,46280],{"class":54,"line":594},[52,46281,1224],{"class":58},[52,46283,46284,46286,46288],{"class":54,"line":600},[52,46285,121],{"class":58},[52,46287,63],{"class":371},[52,46289,77],{"class":58},[43,46291,46293],{"className":222,"code":46292,"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,46294,46295,46305,46309,46323,46327,46344,46348],{"__ignoreMap":48},[52,46296,46297,46299,46301,46303],{"class":54,"line":55},[52,46298,232],{"class":231},[52,46300,9005],{"class":58},[52,46302,238],{"class":231},[52,46304,9010],{"class":73},[52,46306,46307],{"class":54,"line":80},[52,46308,597],{"emptyLinePlaceholder":171},[52,46310,46311,46313,46315,46317,46319,46321],{"class":54,"line":108},[52,46312,1721],{"class":231},[52,46314,1724],{"class":371},[52,46316,1727],{"class":231},[52,46318,1730],{"class":231},[52,46320,1733],{"class":66},[52,46322,1736],{"class":58},[52,46324,46325],{"class":54,"line":118},[52,46326,1751],{"class":58},[52,46328,46329,46331,46334,46336,46338,46340,46342],{"class":54,"line":594},[52,46330,1756],{"class":58},[52,46332,46333],{"class":73},"'Ring'",[52,46335,1762],{"class":58},[52,46337,7660],{"class":73},[52,46339,4052],{"class":58},[52,46341,19253],{"class":371},[52,46343,1768],{"class":58},[52,46345,46346],{"class":54,"line":600},[52,46347,1773],{"class":58},[52,46349,46350],{"class":54,"line":606},[52,46351,1778],{"class":58},[156,46353,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46355},[46356,46357],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/ring",{"title":46073,"description":46081},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":46364,"title":46365,"body":46366,"category":27535,"componentType":20617,"description":46373,"extension":168,"meta":46558,"navigation":171,"path":46559,"requiresChild":27538,"seo":46560,"stem":46561,"__hash__":46562},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":46367,"toc":46554},[46368,46371,46374,46376,46378,46381,46383,46552],[11,46369,46365],{"id":46370},"ripples",[15,46372,46373],{},"Concentric animated ripples emanating from a point",[26676,46375],{"component":46365},[23,46377,26680],{"id":21278},[26682,46379],{":props":46380},"[{\"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,46382,26688],{"id":26687},[217,46384,46385,46414,46442,46470,46498],{":tabs":1543},[43,46386,46388],{"className":45,"code":46387,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,46389,46390,46398,46406],{"__ignoreMap":48},[52,46391,46392,46394,46396],{"class":54,"line":55},[52,46393,59],{"class":58},[52,46395,63],{"class":62},[52,46397,77],{"class":58},[52,46399,46400,46402,46404],{"class":54,"line":80},[52,46401,83],{"class":58},[52,46403,46365],{"class":62},[52,46405,105],{"class":58},[52,46407,46408,46410,46412],{"class":54,"line":108},[52,46409,121],{"class":58},[52,46411,63],{"class":62},[52,46413,77],{"class":58},[43,46415,46416],{"className":360,"code":46387,"language":362,"meta":48,"style":48},[31,46417,46418,46426,46434],{"__ignoreMap":48},[52,46419,46420,46422,46424],{"class":54,"line":55},[52,46421,59],{"class":58},[52,46423,63],{"class":371},[52,46425,77],{"class":58},[52,46427,46428,46430,46432],{"class":54,"line":80},[52,46429,83],{"class":58},[52,46431,46365],{"class":371},[52,46433,105],{"class":58},[52,46435,46436,46438,46440],{"class":54,"line":108},[52,46437,121],{"class":58},[52,46439,63],{"class":371},[52,46441,77],{"class":58},[43,46443,46444],{"className":2507,"code":46387,"language":2509,"meta":48,"style":48},[31,46445,46446,46454,46462],{"__ignoreMap":48},[52,46447,46448,46450,46452],{"class":54,"line":55},[52,46449,59],{"class":58},[52,46451,63],{"class":371},[52,46453,77],{"class":58},[52,46455,46456,46458,46460],{"class":54,"line":80},[52,46457,83],{"class":58},[52,46459,46365],{"class":371},[52,46461,105],{"class":58},[52,46463,46464,46466,46468],{"class":54,"line":108},[52,46465,121],{"class":58},[52,46467,63],{"class":371},[52,46469,77],{"class":58},[43,46471,46472],{"className":419,"code":46387,"language":420,"meta":48,"style":48},[31,46473,46474,46482,46490],{"__ignoreMap":48},[52,46475,46476,46478,46480],{"class":54,"line":55},[52,46477,59],{"class":58},[52,46479,63],{"class":371},[52,46481,77],{"class":58},[52,46483,46484,46486,46488],{"class":54,"line":80},[52,46485,83],{"class":58},[52,46487,46365],{"class":371},[52,46489,105],{"class":58},[52,46491,46492,46494,46496],{"class":54,"line":108},[52,46493,121],{"class":58},[52,46495,63],{"class":371},[52,46497,77],{"class":58},[43,46499,46501],{"className":222,"code":46500,"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,46502,46503,46513,46517,46531,46535,46544,46548],{"__ignoreMap":48},[52,46504,46505,46507,46509,46511],{"class":54,"line":55},[52,46506,232],{"class":231},[52,46508,9005],{"class":58},[52,46510,238],{"class":231},[52,46512,9010],{"class":73},[52,46514,46515],{"class":54,"line":80},[52,46516,597],{"emptyLinePlaceholder":171},[52,46518,46519,46521,46523,46525,46527,46529],{"class":54,"line":108},[52,46520,1721],{"class":231},[52,46522,1724],{"class":371},[52,46524,1727],{"class":231},[52,46526,1730],{"class":231},[52,46528,1733],{"class":66},[52,46530,1736],{"class":58},[52,46532,46533],{"class":54,"line":118},[52,46534,1751],{"class":58},[52,46536,46537,46539,46542],{"class":54,"line":594},[52,46538,1756],{"class":58},[52,46540,46541],{"class":73},"'Ripples'",[52,46543,2129],{"class":58},[52,46545,46546],{"class":54,"line":600},[52,46547,1773],{"class":58},[52,46549,46550],{"class":54,"line":606},[52,46551,1778],{"class":58},[156,46553,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":46555},[46556,46557],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/ripples",{"title":46365,"description":46373},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":46564,"title":46565,"body":46566,"category":30502,"componentType":20617,"description":46573,"extension":168,"meta":46803,"navigation":171,"path":46804,"requiresChild":27538,"seo":46805,"stem":46806,"__hash__":46807},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":46567,"toc":46799},[46568,46571,46574,46576,46578,46581,46583,46797],[11,46569,46565],{"id":46570},"roundedrect",[15,46572,46573],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26676,46575],{"component":46565},[23,46577,26680],{"id":21278},[26682,46579],{":props":46580},"[{\"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,46582,26688],{"id":26687},[217,46584,46585,46625,46663,46701,46739],{":tabs":1543},[43,46586,46588],{"className":45,"code":46587,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,46589,46590,46598,46605,46613,46617],{"__ignoreMap":48},[52,46591,46592,46594,46596],{"class":54,"line":55},[52,46593,59],{"class":58},[52,46595,63],{"class":62},[52,46597,77],{"class":58},[52,46599,46600,46602],{"class":54,"line":80},[52,46601,83],{"class":58},[52,46603,46604],{"class":62},"RoundedRect\n",[52,46606,46607,46609,46611],{"class":54,"line":108},[52,46608,7125],{"class":66},[52,46610,70],{"class":58},[52,46612,7081],{"class":73},[52,46614,46615],{"class":54,"line":118},[52,46616,1224],{"class":58},[52,46618,46619,46621,46623],{"class":54,"line":594},[52,46620,121],{"class":58},[52,46622,63],{"class":62},[52,46624,77],{"class":58},[43,46626,46627],{"className":360,"code":46587,"language":362,"meta":48,"style":48},[31,46628,46629,46637,46643,46651,46655],{"__ignoreMap":48},[52,46630,46631,46633,46635],{"class":54,"line":55},[52,46632,59],{"class":58},[52,46634,63],{"class":371},[52,46636,77],{"class":58},[52,46638,46639,46641],{"class":54,"line":80},[52,46640,83],{"class":58},[52,46642,46604],{"class":371},[52,46644,46645,46647,46649],{"class":54,"line":108},[52,46646,7125],{"class":66},[52,46648,70],{"class":231},[52,46650,7081],{"class":73},[52,46652,46653],{"class":54,"line":118},[52,46654,1224],{"class":58},[52,46656,46657,46659,46661],{"class":54,"line":594},[52,46658,121],{"class":58},[52,46660,63],{"class":371},[52,46662,77],{"class":58},[43,46664,46665],{"className":2507,"code":46587,"language":2509,"meta":48,"style":48},[31,46666,46667,46675,46681,46689,46693],{"__ignoreMap":48},[52,46668,46669,46671,46673],{"class":54,"line":55},[52,46670,59],{"class":58},[52,46672,63],{"class":371},[52,46674,77],{"class":58},[52,46676,46677,46679],{"class":54,"line":80},[52,46678,83],{"class":58},[52,46680,46604],{"class":371},[52,46682,46683,46685,46687],{"class":54,"line":108},[52,46684,7125],{"class":66},[52,46686,70],{"class":58},[52,46688,7081],{"class":73},[52,46690,46691],{"class":54,"line":118},[52,46692,1224],{"class":58},[52,46694,46695,46697,46699],{"class":54,"line":594},[52,46696,121],{"class":58},[52,46698,63],{"class":371},[52,46700,77],{"class":58},[43,46702,46703],{"className":419,"code":46587,"language":420,"meta":48,"style":48},[31,46704,46705,46713,46719,46727,46731],{"__ignoreMap":48},[52,46706,46707,46709,46711],{"class":54,"line":55},[52,46708,59],{"class":58},[52,46710,63],{"class":371},[52,46712,77],{"class":58},[52,46714,46715,46717],{"class":54,"line":80},[52,46716,83],{"class":58},[52,46718,46604],{"class":371},[52,46720,46721,46723,46725],{"class":54,"line":108},[52,46722,7125],{"class":66},[52,46724,70],{"class":231},[52,46726,7081],{"class":73},[52,46728,46729],{"class":54,"line":118},[52,46730,1224],{"class":58},[52,46732,46733,46735,46737],{"class":54,"line":594},[52,46734,121],{"class":58},[52,46736,63],{"class":371},[52,46738,77],{"class":58},[43,46740,46742],{"className":222,"code":46741,"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,46743,46744,46754,46758,46772,46776,46789,46793],{"__ignoreMap":48},[52,46745,46746,46748,46750,46752],{"class":54,"line":55},[52,46747,232],{"class":231},[52,46749,9005],{"class":58},[52,46751,238],{"class":231},[52,46753,9010],{"class":73},[52,46755,46756],{"class":54,"line":80},[52,46757,597],{"emptyLinePlaceholder":171},[52,46759,46760,46762,46764,46766,46768,46770],{"class":54,"line":108},[52,46761,1721],{"class":231},[52,46763,1724],{"class":371},[52,46765,1727],{"class":231},[52,46767,1730],{"class":231},[52,46769,1733],{"class":66},[52,46771,1736],{"class":58},[52,46773,46774],{"class":54,"line":118},[52,46775,1751],{"class":58},[52,46777,46778,46780,46783,46785,46787],{"class":54,"line":594},[52,46779,1756],{"class":58},[52,46781,46782],{"class":73},"'RoundedRect'",[52,46784,1762],{"class":58},[52,46786,7660],{"class":73},[52,46788,1768],{"class":58},[52,46790,46791],{"class":54,"line":600},[52,46792,1773],{"class":58},[52,46794,46795],{"class":54,"line":606},[52,46796,1778],{"class":58},[156,46798,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46800},[46801,46802],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/roundedrect",{"title":46565,"description":46573},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":46809,"title":46810,"body":46811,"category":28546,"componentType":20623,"description":46817,"extension":168,"meta":47134,"navigation":171,"path":47135,"requiresChild":171,"seo":47136,"stem":47137,"__hash__":47138},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":46812,"toc":47130},[46813,46815,46818,46820,46822,46825,46827,47128],[11,46814,46810],{"id":5547},[15,46816,46817],{},"Adjust color saturation intensity",[26676,46819],{"component":46810},[23,46821,26680],{"id":21278},[26682,46823],{":props":46824},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,46826,26688],{"id":26687},[217,46828,46829,46885,46944,47000,47058],{":tabs":1543},[43,46830,46832],{"className":45,"code":46831,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,46833,46834,46842,46849,46857,46861,46869,46877],{"__ignoreMap":48},[52,46835,46836,46838,46840],{"class":54,"line":55},[52,46837,59],{"class":58},[52,46839,63],{"class":62},[52,46841,77],{"class":58},[52,46843,46844,46846],{"class":54,"line":80},[52,46845,83],{"class":58},[52,46847,46848],{"class":62},"Saturation\n",[52,46850,46851,46853,46855],{"class":54,"line":108},[52,46852,17644],{"class":66},[52,46854,70],{"class":58},[52,46856,28602],{"class":73},[52,46858,46859],{"class":54,"line":118},[52,46860,26724],{"class":58},[52,46862,46863,46865,46867],{"class":54,"line":594},[52,46864,2213],{"class":58},[52,46866,2216],{"class":62},[52,46868,105],{"class":58},[52,46870,46871,46873,46875],{"class":54,"line":600},[52,46872,2230],{"class":58},[52,46874,46810],{"class":62},[52,46876,77],{"class":58},[52,46878,46879,46881,46883],{"class":54,"line":606},[52,46880,121],{"class":58},[52,46882,63],{"class":62},[52,46884,77],{"class":58},[43,46886,46888],{"className":360,"code":46887,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,46889,46890,46898,46904,46916,46920,46928,46936],{"__ignoreMap":48},[52,46891,46892,46894,46896],{"class":54,"line":55},[52,46893,59],{"class":58},[52,46895,63],{"class":371},[52,46897,77],{"class":58},[52,46899,46900,46902],{"class":54,"line":80},[52,46901,83],{"class":58},[52,46903,46848],{"class":371},[52,46905,46906,46908,46910,46912,46914],{"class":54,"line":108},[52,46907,17755],{"class":66},[52,46909,70],{"class":231},[52,46911,723],{"class":58},[52,46913,6165],{"class":371},[52,46915,729],{"class":58},[52,46917,46918],{"class":54,"line":118},[52,46919,26724],{"class":58},[52,46921,46922,46924,46926],{"class":54,"line":594},[52,46923,2213],{"class":58},[52,46925,2216],{"class":371},[52,46927,105],{"class":58},[52,46929,46930,46932,46934],{"class":54,"line":600},[52,46931,2230],{"class":58},[52,46933,46810],{"class":371},[52,46935,77],{"class":58},[52,46937,46938,46940,46942],{"class":54,"line":606},[52,46939,121],{"class":58},[52,46941,63],{"class":371},[52,46943,77],{"class":58},[43,46945,46946],{"className":2507,"code":46887,"language":2509,"meta":48,"style":48},[31,46947,46948,46956,46962,46972,46976,46984,46992],{"__ignoreMap":48},[52,46949,46950,46952,46954],{"class":54,"line":55},[52,46951,59],{"class":58},[52,46953,63],{"class":371},[52,46955,77],{"class":58},[52,46957,46958,46960],{"class":54,"line":80},[52,46959,83],{"class":58},[52,46961,46848],{"class":371},[52,46963,46964,46966,46968,46970],{"class":54,"line":108},[52,46965,17755],{"class":66},[52,46967,24620],{"class":58},[52,46969,6165],{"class":371},[52,46971,729],{"class":58},[52,46973,46974],{"class":54,"line":118},[52,46975,26724],{"class":58},[52,46977,46978,46980,46982],{"class":54,"line":594},[52,46979,2213],{"class":58},[52,46981,2216],{"class":371},[52,46983,105],{"class":58},[52,46985,46986,46988,46990],{"class":54,"line":600},[52,46987,2230],{"class":58},[52,46989,46810],{"class":371},[52,46991,77],{"class":58},[52,46993,46994,46996,46998],{"class":54,"line":606},[52,46995,121],{"class":58},[52,46997,63],{"class":371},[52,46999,77],{"class":58},[43,47001,47002],{"className":419,"code":46887,"language":420,"meta":48,"style":48},[31,47003,47004,47012,47018,47030,47034,47042,47050],{"__ignoreMap":48},[52,47005,47006,47008,47010],{"class":54,"line":55},[52,47007,59],{"class":58},[52,47009,63],{"class":371},[52,47011,77],{"class":58},[52,47013,47014,47016],{"class":54,"line":80},[52,47015,83],{"class":58},[52,47017,46848],{"class":371},[52,47019,47020,47022,47024,47026,47028],{"class":54,"line":108},[52,47021,17755],{"class":66},[52,47023,70],{"class":231},[52,47025,723],{"class":58},[52,47027,6165],{"class":371},[52,47029,729],{"class":58},[52,47031,47032],{"class":54,"line":118},[52,47033,26724],{"class":58},[52,47035,47036,47038,47040],{"class":54,"line":594},[52,47037,2213],{"class":58},[52,47039,2216],{"class":371},[52,47041,105],{"class":58},[52,47043,47044,47046,47048],{"class":54,"line":600},[52,47045,2230],{"class":58},[52,47047,46810],{"class":371},[52,47049,77],{"class":58},[52,47051,47052,47054,47056],{"class":54,"line":606},[52,47053,121],{"class":58},[52,47055,63],{"class":371},[52,47057,77],{"class":58},[43,47059,47061],{"className":222,"code":47060,"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,47062,47063,47073,47077,47091,47095,47108,47116,47120,47124],{"__ignoreMap":48},[52,47064,47065,47067,47069,47071],{"class":54,"line":55},[52,47066,232],{"class":231},[52,47068,9005],{"class":58},[52,47070,238],{"class":231},[52,47072,9010],{"class":73},[52,47074,47075],{"class":54,"line":80},[52,47076,597],{"emptyLinePlaceholder":171},[52,47078,47079,47081,47083,47085,47087,47089],{"class":54,"line":108},[52,47080,1721],{"class":231},[52,47082,1724],{"class":371},[52,47084,1727],{"class":231},[52,47086,1730],{"class":231},[52,47088,1733],{"class":66},[52,47090,1736],{"class":58},[52,47092,47093],{"class":54,"line":118},[52,47094,1751],{"class":58},[52,47096,47097,47099,47102,47104,47106],{"class":54,"line":594},[52,47098,1756],{"class":58},[52,47100,47101],{"class":73},"'Saturation'",[52,47103,26969],{"class":58},[52,47105,6165],{"class":371},[52,47107,5033],{"class":58},[52,47109,47110,47112,47114],{"class":54,"line":600},[52,47111,4501],{"class":58},[52,47113,2869],{"class":73},[52,47115,2129],{"class":58},[52,47117,47118],{"class":54,"line":606},[52,47119,4518],{"class":58},[52,47121,47122],{"class":54,"line":653},[52,47123,1773],{"class":58},[52,47125,47126],{"class":54,"line":662},[52,47127,1778],{"class":58},[156,47129,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47131},[47132,47133],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/saturation",{"title":46810,"description":46817},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":47140,"title":47141,"body":47142,"category":28546,"componentType":20623,"description":47149,"extension":168,"meta":47410,"navigation":171,"path":47411,"requiresChild":171,"seo":47412,"stem":47413,"__hash__":47414},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":47143,"toc":47406},[47144,47147,47150,47152,47154,47157,47159,47404],[11,47145,47141],{"id":47146},"sharpness",[15,47148,47149],{},"Adjust image sharpness using a convolution kernel",[26676,47151],{"component":47141},[23,47153,26680],{"id":21278},[26682,47155],{":props":47156},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,47158,26688],{"id":26687},[217,47160,47161,47206,47250,47294,47338],{":tabs":1543},[43,47162,47164],{"className":45,"code":47163,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,47165,47166,47174,47182,47190,47198],{"__ignoreMap":48},[52,47167,47168,47170,47172],{"class":54,"line":55},[52,47169,59],{"class":58},[52,47171,63],{"class":62},[52,47173,77],{"class":58},[52,47175,47176,47178,47180],{"class":54,"line":80},[52,47177,83],{"class":58},[52,47179,47141],{"class":62},[52,47181,77],{"class":58},[52,47183,47184,47186,47188],{"class":54,"line":108},[52,47185,2213],{"class":58},[52,47187,2216],{"class":62},[52,47189,105],{"class":58},[52,47191,47192,47194,47196],{"class":54,"line":118},[52,47193,2230],{"class":58},[52,47195,47141],{"class":62},[52,47197,77],{"class":58},[52,47199,47200,47202,47204],{"class":54,"line":594},[52,47201,121],{"class":58},[52,47203,63],{"class":62},[52,47205,77],{"class":58},[43,47207,47208],{"className":360,"code":47163,"language":362,"meta":48,"style":48},[31,47209,47210,47218,47226,47234,47242],{"__ignoreMap":48},[52,47211,47212,47214,47216],{"class":54,"line":55},[52,47213,59],{"class":58},[52,47215,63],{"class":371},[52,47217,77],{"class":58},[52,47219,47220,47222,47224],{"class":54,"line":80},[52,47221,83],{"class":58},[52,47223,47141],{"class":371},[52,47225,77],{"class":58},[52,47227,47228,47230,47232],{"class":54,"line":108},[52,47229,2213],{"class":58},[52,47231,2216],{"class":371},[52,47233,105],{"class":58},[52,47235,47236,47238,47240],{"class":54,"line":118},[52,47237,2230],{"class":58},[52,47239,47141],{"class":371},[52,47241,77],{"class":58},[52,47243,47244,47246,47248],{"class":54,"line":594},[52,47245,121],{"class":58},[52,47247,63],{"class":371},[52,47249,77],{"class":58},[43,47251,47252],{"className":2507,"code":47163,"language":2509,"meta":48,"style":48},[31,47253,47254,47262,47270,47278,47286],{"__ignoreMap":48},[52,47255,47256,47258,47260],{"class":54,"line":55},[52,47257,59],{"class":58},[52,47259,63],{"class":371},[52,47261,77],{"class":58},[52,47263,47264,47266,47268],{"class":54,"line":80},[52,47265,83],{"class":58},[52,47267,47141],{"class":371},[52,47269,77],{"class":58},[52,47271,47272,47274,47276],{"class":54,"line":108},[52,47273,2213],{"class":58},[52,47275,2216],{"class":371},[52,47277,105],{"class":58},[52,47279,47280,47282,47284],{"class":54,"line":118},[52,47281,2230],{"class":58},[52,47283,47141],{"class":371},[52,47285,77],{"class":58},[52,47287,47288,47290,47292],{"class":54,"line":594},[52,47289,121],{"class":58},[52,47291,63],{"class":371},[52,47293,77],{"class":58},[43,47295,47296],{"className":419,"code":47163,"language":420,"meta":48,"style":48},[31,47297,47298,47306,47314,47322,47330],{"__ignoreMap":48},[52,47299,47300,47302,47304],{"class":54,"line":55},[52,47301,59],{"class":58},[52,47303,63],{"class":371},[52,47305,77],{"class":58},[52,47307,47308,47310,47312],{"class":54,"line":80},[52,47309,83],{"class":58},[52,47311,47141],{"class":371},[52,47313,77],{"class":58},[52,47315,47316,47318,47320],{"class":54,"line":108},[52,47317,2213],{"class":58},[52,47319,2216],{"class":371},[52,47321,105],{"class":58},[52,47323,47324,47326,47328],{"class":54,"line":118},[52,47325,2230],{"class":58},[52,47327,47141],{"class":371},[52,47329,77],{"class":58},[52,47331,47332,47334,47336],{"class":54,"line":594},[52,47333,121],{"class":58},[52,47335,63],{"class":371},[52,47337,77],{"class":58},[43,47339,47341],{"className":222,"code":47340,"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,47342,47343,47353,47357,47371,47375,47384,47392,47396,47400],{"__ignoreMap":48},[52,47344,47345,47347,47349,47351],{"class":54,"line":55},[52,47346,232],{"class":231},[52,47348,9005],{"class":58},[52,47350,238],{"class":231},[52,47352,9010],{"class":73},[52,47354,47355],{"class":54,"line":80},[52,47356,597],{"emptyLinePlaceholder":171},[52,47358,47359,47361,47363,47365,47367,47369],{"class":54,"line":108},[52,47360,1721],{"class":231},[52,47362,1724],{"class":371},[52,47364,1727],{"class":231},[52,47366,1730],{"class":231},[52,47368,1733],{"class":66},[52,47370,1736],{"class":58},[52,47372,47373],{"class":54,"line":118},[52,47374,1751],{"class":58},[52,47376,47377,47379,47382],{"class":54,"line":594},[52,47378,1756],{"class":58},[52,47380,47381],{"class":73},"'Sharpness'",[52,47383,4496],{"class":58},[52,47385,47386,47388,47390],{"class":54,"line":600},[52,47387,4501],{"class":58},[52,47389,2869],{"class":73},[52,47391,2129],{"class":58},[52,47393,47394],{"class":54,"line":606},[52,47395,4518],{"class":58},[52,47397,47398],{"class":54,"line":653},[52,47399,1773],{"class":58},[52,47401,47402],{"class":54,"line":662},[52,47403,1778],{"class":58},[156,47405,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":47407},[47408,47409],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/sharpness",{"title":47141,"description":47149},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":47416,"title":47417,"body":47418,"category":29936,"componentType":20623,"description":47425,"extension":168,"meta":47790,"navigation":171,"path":47791,"requiresChild":171,"seo":47792,"stem":47793,"__hash__":47794},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":47419,"toc":47786},[47420,47423,47426,47428,47430,47433,47435,47784],[11,47421,47417],{"id":47422},"shatter",[15,47424,47425],{},"Broken glass effect with tectonic plate displacement",[26676,47427],{"component":47417},[23,47429,26680],{"id":21278},[26682,47431],{":props":47432},"[{\"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,47434,26688],{"id":26687},[217,47436,47437,47502,47574,47640,47710],{":tabs":1543},[43,47438,47440],{"className":45,"code":47439,"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,47441,47442,47450,47457,47466,47474,47478,47486,47494],{"__ignoreMap":48},[52,47443,47444,47446,47448],{"class":54,"line":55},[52,47445,59],{"class":58},[52,47447,63],{"class":62},[52,47449,77],{"class":58},[52,47451,47452,47454],{"class":54,"line":80},[52,47453,83],{"class":58},[52,47455,47456],{"class":62},"Shatter\n",[52,47458,47459,47461,47463],{"class":54,"line":108},[52,47460,17644],{"class":66},[52,47462,70],{"class":58},[52,47464,47465],{"class":73},"\"4\"\n",[52,47467,47468,47470,47472],{"class":54,"line":118},[52,47469,14675],{"class":66},[52,47471,70],{"class":58},[52,47473,36239],{"class":73},[52,47475,47476],{"class":54,"line":594},[52,47477,26724],{"class":58},[52,47479,47480,47482,47484],{"class":54,"line":600},[52,47481,2213],{"class":58},[52,47483,2216],{"class":62},[52,47485,105],{"class":58},[52,47487,47488,47490,47492],{"class":54,"line":606},[52,47489,2230],{"class":58},[52,47491,47417],{"class":62},[52,47493,77],{"class":58},[52,47495,47496,47498,47500],{"class":54,"line":653},[52,47497,121],{"class":58},[52,47499,63],{"class":62},[52,47501,77],{"class":58},[43,47503,47505],{"className":360,"code":47504,"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,47506,47507,47515,47521,47534,47546,47550,47558,47566],{"__ignoreMap":48},[52,47508,47509,47511,47513],{"class":54,"line":55},[52,47510,59],{"class":58},[52,47512,63],{"class":371},[52,47514,77],{"class":58},[52,47516,47517,47519],{"class":54,"line":80},[52,47518,83],{"class":58},[52,47520,47456],{"class":371},[52,47522,47523,47525,47527,47529,47532],{"class":54,"line":108},[52,47524,17755],{"class":66},[52,47526,70],{"class":231},[52,47528,723],{"class":58},[52,47530,47531],{"class":371},"4",[52,47533,729],{"class":58},[52,47535,47536,47538,47540,47542,47544],{"class":54,"line":118},[52,47537,7135],{"class":66},[52,47539,70],{"class":231},[52,47541,723],{"class":58},[52,47543,5737],{"class":371},[52,47545,729],{"class":58},[52,47547,47548],{"class":54,"line":594},[52,47549,26724],{"class":58},[52,47551,47552,47554,47556],{"class":54,"line":600},[52,47553,2213],{"class":58},[52,47555,2216],{"class":371},[52,47557,105],{"class":58},[52,47559,47560,47562,47564],{"class":54,"line":606},[52,47561,2230],{"class":58},[52,47563,47417],{"class":371},[52,47565,77],{"class":58},[52,47567,47568,47570,47572],{"class":54,"line":653},[52,47569,121],{"class":58},[52,47571,63],{"class":371},[52,47573,77],{"class":58},[43,47575,47576],{"className":2507,"code":47504,"language":2509,"meta":48,"style":48},[31,47577,47578,47586,47592,47602,47612,47616,47624,47632],{"__ignoreMap":48},[52,47579,47580,47582,47584],{"class":54,"line":55},[52,47581,59],{"class":58},[52,47583,63],{"class":371},[52,47585,77],{"class":58},[52,47587,47588,47590],{"class":54,"line":80},[52,47589,83],{"class":58},[52,47591,47456],{"class":371},[52,47593,47594,47596,47598,47600],{"class":54,"line":108},[52,47595,17755],{"class":66},[52,47597,24620],{"class":58},[52,47599,47531],{"class":371},[52,47601,729],{"class":58},[52,47603,47604,47606,47608,47610],{"class":54,"line":118},[52,47605,7135],{"class":66},[52,47607,24620],{"class":58},[52,47609,5737],{"class":371},[52,47611,729],{"class":58},[52,47613,47614],{"class":54,"line":594},[52,47615,26724],{"class":58},[52,47617,47618,47620,47622],{"class":54,"line":600},[52,47619,2213],{"class":58},[52,47621,2216],{"class":371},[52,47623,105],{"class":58},[52,47625,47626,47628,47630],{"class":54,"line":606},[52,47627,2230],{"class":58},[52,47629,47417],{"class":371},[52,47631,77],{"class":58},[52,47633,47634,47636,47638],{"class":54,"line":653},[52,47635,121],{"class":58},[52,47637,63],{"class":371},[52,47639,77],{"class":58},[43,47641,47642],{"className":419,"code":47504,"language":420,"meta":48,"style":48},[31,47643,47644,47652,47658,47670,47682,47686,47694,47702],{"__ignoreMap":48},[52,47645,47646,47648,47650],{"class":54,"line":55},[52,47647,59],{"class":58},[52,47649,63],{"class":371},[52,47651,77],{"class":58},[52,47653,47654,47656],{"class":54,"line":80},[52,47655,83],{"class":58},[52,47657,47456],{"class":371},[52,47659,47660,47662,47664,47666,47668],{"class":54,"line":108},[52,47661,17755],{"class":66},[52,47663,70],{"class":231},[52,47665,723],{"class":58},[52,47667,47531],{"class":371},[52,47669,729],{"class":58},[52,47671,47672,47674,47676,47678,47680],{"class":54,"line":118},[52,47673,7135],{"class":66},[52,47675,70],{"class":231},[52,47677,723],{"class":58},[52,47679,5737],{"class":371},[52,47681,729],{"class":58},[52,47683,47684],{"class":54,"line":594},[52,47685,26724],{"class":58},[52,47687,47688,47690,47692],{"class":54,"line":600},[52,47689,2213],{"class":58},[52,47691,2216],{"class":371},[52,47693,105],{"class":58},[52,47695,47696,47698,47700],{"class":54,"line":606},[52,47697,2230],{"class":58},[52,47699,47417],{"class":371},[52,47701,77],{"class":58},[52,47703,47704,47706,47708],{"class":54,"line":653},[52,47705,121],{"class":58},[52,47707,63],{"class":371},[52,47709,77],{"class":58},[43,47711,47713],{"className":222,"code":47712,"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,47714,47715,47725,47729,47743,47747,47764,47772,47776,47780],{"__ignoreMap":48},[52,47716,47717,47719,47721,47723],{"class":54,"line":55},[52,47718,232],{"class":231},[52,47720,9005],{"class":58},[52,47722,238],{"class":231},[52,47724,9010],{"class":73},[52,47726,47727],{"class":54,"line":80},[52,47728,597],{"emptyLinePlaceholder":171},[52,47730,47731,47733,47735,47737,47739,47741],{"class":54,"line":108},[52,47732,1721],{"class":231},[52,47734,1724],{"class":371},[52,47736,1727],{"class":231},[52,47738,1730],{"class":231},[52,47740,1733],{"class":66},[52,47742,1736],{"class":58},[52,47744,47745],{"class":54,"line":118},[52,47746,1751],{"class":58},[52,47748,47749,47751,47754,47756,47758,47760,47762],{"class":54,"line":594},[52,47750,1756],{"class":58},[52,47752,47753],{"class":73},"'Shatter'",[52,47755,26969],{"class":58},[52,47757,47531],{"class":371},[52,47759,4052],{"class":58},[52,47761,5737],{"class":371},[52,47763,5033],{"class":58},[52,47765,47766,47768,47770],{"class":54,"line":600},[52,47767,4501],{"class":58},[52,47769,2869],{"class":73},[52,47771,2129],{"class":58},[52,47773,47774],{"class":54,"line":606},[52,47775,4518],{"class":58},[52,47777,47778],{"class":54,"line":653},[52,47779,1773],{"class":58},[52,47781,47782],{"class":54,"line":662},[52,47783,1778],{"class":58},[156,47785,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47787},[47788,47789],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/shatter",{"title":47417,"description":47425},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":47796,"title":47797,"body":47798,"category":27535,"componentType":20617,"description":47805,"extension":168,"meta":47990,"navigation":171,"path":47991,"requiresChild":27538,"seo":47992,"stem":47993,"__hash__":47994},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":47799,"toc":47986},[47800,47803,47806,47808,47810,47813,47815,47984],[11,47801,47797],{"id":47802},"simplexnoise",[15,47804,47805],{},"Organic noise with animated movement",[26676,47807],{"component":47797},[23,47809,26680],{"id":21278},[26682,47811],{":props":47812},"[{\"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,47814,26688],{"id":26687},[217,47816,47817,47846,47874,47902,47930],{":tabs":1543},[43,47818,47820],{"className":45,"code":47819,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,47821,47822,47830,47838],{"__ignoreMap":48},[52,47823,47824,47826,47828],{"class":54,"line":55},[52,47825,59],{"class":58},[52,47827,63],{"class":62},[52,47829,77],{"class":58},[52,47831,47832,47834,47836],{"class":54,"line":80},[52,47833,83],{"class":58},[52,47835,47797],{"class":62},[52,47837,105],{"class":58},[52,47839,47840,47842,47844],{"class":54,"line":108},[52,47841,121],{"class":58},[52,47843,63],{"class":62},[52,47845,77],{"class":58},[43,47847,47848],{"className":360,"code":47819,"language":362,"meta":48,"style":48},[31,47849,47850,47858,47866],{"__ignoreMap":48},[52,47851,47852,47854,47856],{"class":54,"line":55},[52,47853,59],{"class":58},[52,47855,63],{"class":371},[52,47857,77],{"class":58},[52,47859,47860,47862,47864],{"class":54,"line":80},[52,47861,83],{"class":58},[52,47863,47797],{"class":371},[52,47865,105],{"class":58},[52,47867,47868,47870,47872],{"class":54,"line":108},[52,47869,121],{"class":58},[52,47871,63],{"class":371},[52,47873,77],{"class":58},[43,47875,47876],{"className":2507,"code":47819,"language":2509,"meta":48,"style":48},[31,47877,47878,47886,47894],{"__ignoreMap":48},[52,47879,47880,47882,47884],{"class":54,"line":55},[52,47881,59],{"class":58},[52,47883,63],{"class":371},[52,47885,77],{"class":58},[52,47887,47888,47890,47892],{"class":54,"line":80},[52,47889,83],{"class":58},[52,47891,47797],{"class":371},[52,47893,105],{"class":58},[52,47895,47896,47898,47900],{"class":54,"line":108},[52,47897,121],{"class":58},[52,47899,63],{"class":371},[52,47901,77],{"class":58},[43,47903,47904],{"className":419,"code":47819,"language":420,"meta":48,"style":48},[31,47905,47906,47914,47922],{"__ignoreMap":48},[52,47907,47908,47910,47912],{"class":54,"line":55},[52,47909,59],{"class":58},[52,47911,63],{"class":371},[52,47913,77],{"class":58},[52,47915,47916,47918,47920],{"class":54,"line":80},[52,47917,83],{"class":58},[52,47919,47797],{"class":371},[52,47921,105],{"class":58},[52,47923,47924,47926,47928],{"class":54,"line":108},[52,47925,121],{"class":58},[52,47927,63],{"class":371},[52,47929,77],{"class":58},[43,47931,47933],{"className":222,"code":47932,"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,47934,47935,47945,47949,47963,47967,47976,47980],{"__ignoreMap":48},[52,47936,47937,47939,47941,47943],{"class":54,"line":55},[52,47938,232],{"class":231},[52,47940,9005],{"class":58},[52,47942,238],{"class":231},[52,47944,9010],{"class":73},[52,47946,47947],{"class":54,"line":80},[52,47948,597],{"emptyLinePlaceholder":171},[52,47950,47951,47953,47955,47957,47959,47961],{"class":54,"line":108},[52,47952,1721],{"class":231},[52,47954,1724],{"class":371},[52,47956,1727],{"class":231},[52,47958,1730],{"class":231},[52,47960,1733],{"class":66},[52,47962,1736],{"class":58},[52,47964,47965],{"class":54,"line":118},[52,47966,1751],{"class":58},[52,47968,47969,47971,47974],{"class":54,"line":594},[52,47970,1756],{"class":58},[52,47972,47973],{"class":73},"'SimplexNoise'",[52,47975,2129],{"class":58},[52,47977,47978],{"class":54,"line":600},[52,47979,1773],{"class":58},[52,47981,47982],{"class":54,"line":606},[52,47983,1778],{"class":58},[156,47985,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":47987},[47988,47989],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/simplexnoise",{"title":47797,"description":47805},"docs/components/SimplexNoise","d0mO4mGGih-voEAS5386XslXJGaXC6JFX720cMm4EPY",{"id":47996,"title":47997,"body":47998,"category":27535,"componentType":20617,"description":48005,"extension":168,"meta":48235,"navigation":171,"path":48236,"requiresChild":27538,"seo":48237,"stem":48238,"__hash__":48239},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":47999,"toc":48231},[48000,48003,48006,48008,48010,48013,48015,48229],[11,48001,47997],{"id":48002},"sinewave",[15,48004,48005],{},"Animated wave with thickness and softness",[26676,48007],{"component":47997},[23,48009,26680],{"id":21278},[26682,48011],{":props":48012},"[{\"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,48014,26688],{"id":26687},[217,48016,48017,48057,48095,48133,48171],{":tabs":1543},[43,48018,48020],{"className":45,"code":48019,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,48021,48022,48030,48037,48045,48049],{"__ignoreMap":48},[52,48023,48024,48026,48028],{"class":54,"line":55},[52,48025,59],{"class":58},[52,48027,63],{"class":62},[52,48029,77],{"class":58},[52,48031,48032,48034],{"class":54,"line":80},[52,48033,83],{"class":58},[52,48035,48036],{"class":62},"SineWave\n",[52,48038,48039,48041,48043],{"class":54,"line":108},[52,48040,7125],{"class":66},[52,48042,70],{"class":58},[52,48044,7081],{"class":73},[52,48046,48047],{"class":54,"line":118},[52,48048,1224],{"class":58},[52,48050,48051,48053,48055],{"class":54,"line":594},[52,48052,121],{"class":58},[52,48054,63],{"class":62},[52,48056,77],{"class":58},[43,48058,48059],{"className":360,"code":48019,"language":362,"meta":48,"style":48},[31,48060,48061,48069,48075,48083,48087],{"__ignoreMap":48},[52,48062,48063,48065,48067],{"class":54,"line":55},[52,48064,59],{"class":58},[52,48066,63],{"class":371},[52,48068,77],{"class":58},[52,48070,48071,48073],{"class":54,"line":80},[52,48072,83],{"class":58},[52,48074,48036],{"class":371},[52,48076,48077,48079,48081],{"class":54,"line":108},[52,48078,7125],{"class":66},[52,48080,70],{"class":231},[52,48082,7081],{"class":73},[52,48084,48085],{"class":54,"line":118},[52,48086,1224],{"class":58},[52,48088,48089,48091,48093],{"class":54,"line":594},[52,48090,121],{"class":58},[52,48092,63],{"class":371},[52,48094,77],{"class":58},[43,48096,48097],{"className":2507,"code":48019,"language":2509,"meta":48,"style":48},[31,48098,48099,48107,48113,48121,48125],{"__ignoreMap":48},[52,48100,48101,48103,48105],{"class":54,"line":55},[52,48102,59],{"class":58},[52,48104,63],{"class":371},[52,48106,77],{"class":58},[52,48108,48109,48111],{"class":54,"line":80},[52,48110,83],{"class":58},[52,48112,48036],{"class":371},[52,48114,48115,48117,48119],{"class":54,"line":108},[52,48116,7125],{"class":66},[52,48118,70],{"class":58},[52,48120,7081],{"class":73},[52,48122,48123],{"class":54,"line":118},[52,48124,1224],{"class":58},[52,48126,48127,48129,48131],{"class":54,"line":594},[52,48128,121],{"class":58},[52,48130,63],{"class":371},[52,48132,77],{"class":58},[43,48134,48135],{"className":419,"code":48019,"language":420,"meta":48,"style":48},[31,48136,48137,48145,48151,48159,48163],{"__ignoreMap":48},[52,48138,48139,48141,48143],{"class":54,"line":55},[52,48140,59],{"class":58},[52,48142,63],{"class":371},[52,48144,77],{"class":58},[52,48146,48147,48149],{"class":54,"line":80},[52,48148,83],{"class":58},[52,48150,48036],{"class":371},[52,48152,48153,48155,48157],{"class":54,"line":108},[52,48154,7125],{"class":66},[52,48156,70],{"class":231},[52,48158,7081],{"class":73},[52,48160,48161],{"class":54,"line":118},[52,48162,1224],{"class":58},[52,48164,48165,48167,48169],{"class":54,"line":594},[52,48166,121],{"class":58},[52,48168,63],{"class":371},[52,48170,77],{"class":58},[43,48172,48174],{"className":222,"code":48173,"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,48175,48176,48186,48190,48204,48208,48221,48225],{"__ignoreMap":48},[52,48177,48178,48180,48182,48184],{"class":54,"line":55},[52,48179,232],{"class":231},[52,48181,9005],{"class":58},[52,48183,238],{"class":231},[52,48185,9010],{"class":73},[52,48187,48188],{"class":54,"line":80},[52,48189,597],{"emptyLinePlaceholder":171},[52,48191,48192,48194,48196,48198,48200,48202],{"class":54,"line":108},[52,48193,1721],{"class":231},[52,48195,1724],{"class":371},[52,48197,1727],{"class":231},[52,48199,1730],{"class":231},[52,48201,1733],{"class":66},[52,48203,1736],{"class":58},[52,48205,48206],{"class":54,"line":118},[52,48207,1751],{"class":58},[52,48209,48210,48212,48215,48217,48219],{"class":54,"line":594},[52,48211,1756],{"class":58},[52,48213,48214],{"class":73},"'SineWave'",[52,48216,1762],{"class":58},[52,48218,7660],{"class":73},[52,48220,1768],{"class":58},[52,48222,48223],{"class":54,"line":600},[52,48224,1773],{"class":58},[52,48226,48227],{"class":54,"line":606},[52,48228,1778],{"class":58},[156,48230,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48232},[48233,48234],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/sinewave",{"title":47997,"description":48005},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":48241,"title":48242,"body":48243,"category":28546,"componentType":20623,"description":48250,"extension":168,"meta":48511,"navigation":171,"path":48512,"requiresChild":171,"seo":48513,"stem":48514,"__hash__":48515},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":48244,"toc":48507},[48245,48248,48251,48253,48255,48258,48260,48505],[11,48246,48242],{"id":48247},"solarize",[15,48249,48250],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26676,48252],{"component":48242},[23,48254,26680],{"id":21278},[26682,48256],{":props":48257},"[{\"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,48259,26688],{"id":26687},[217,48261,48262,48307,48351,48395,48439],{":tabs":1543},[43,48263,48265],{"className":45,"code":48264,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,48266,48267,48275,48283,48291,48299],{"__ignoreMap":48},[52,48268,48269,48271,48273],{"class":54,"line":55},[52,48270,59],{"class":58},[52,48272,63],{"class":62},[52,48274,77],{"class":58},[52,48276,48277,48279,48281],{"class":54,"line":80},[52,48278,83],{"class":58},[52,48280,48242],{"class":62},[52,48282,77],{"class":58},[52,48284,48285,48287,48289],{"class":54,"line":108},[52,48286,2213],{"class":58},[52,48288,2216],{"class":62},[52,48290,105],{"class":58},[52,48292,48293,48295,48297],{"class":54,"line":118},[52,48294,2230],{"class":58},[52,48296,48242],{"class":62},[52,48298,77],{"class":58},[52,48300,48301,48303,48305],{"class":54,"line":594},[52,48302,121],{"class":58},[52,48304,63],{"class":62},[52,48306,77],{"class":58},[43,48308,48309],{"className":360,"code":48264,"language":362,"meta":48,"style":48},[31,48310,48311,48319,48327,48335,48343],{"__ignoreMap":48},[52,48312,48313,48315,48317],{"class":54,"line":55},[52,48314,59],{"class":58},[52,48316,63],{"class":371},[52,48318,77],{"class":58},[52,48320,48321,48323,48325],{"class":54,"line":80},[52,48322,83],{"class":58},[52,48324,48242],{"class":371},[52,48326,77],{"class":58},[52,48328,48329,48331,48333],{"class":54,"line":108},[52,48330,2213],{"class":58},[52,48332,2216],{"class":371},[52,48334,105],{"class":58},[52,48336,48337,48339,48341],{"class":54,"line":118},[52,48338,2230],{"class":58},[52,48340,48242],{"class":371},[52,48342,77],{"class":58},[52,48344,48345,48347,48349],{"class":54,"line":594},[52,48346,121],{"class":58},[52,48348,63],{"class":371},[52,48350,77],{"class":58},[43,48352,48353],{"className":2507,"code":48264,"language":2509,"meta":48,"style":48},[31,48354,48355,48363,48371,48379,48387],{"__ignoreMap":48},[52,48356,48357,48359,48361],{"class":54,"line":55},[52,48358,59],{"class":58},[52,48360,63],{"class":371},[52,48362,77],{"class":58},[52,48364,48365,48367,48369],{"class":54,"line":80},[52,48366,83],{"class":58},[52,48368,48242],{"class":371},[52,48370,77],{"class":58},[52,48372,48373,48375,48377],{"class":54,"line":108},[52,48374,2213],{"class":58},[52,48376,2216],{"class":371},[52,48378,105],{"class":58},[52,48380,48381,48383,48385],{"class":54,"line":118},[52,48382,2230],{"class":58},[52,48384,48242],{"class":371},[52,48386,77],{"class":58},[52,48388,48389,48391,48393],{"class":54,"line":594},[52,48390,121],{"class":58},[52,48392,63],{"class":371},[52,48394,77],{"class":58},[43,48396,48397],{"className":419,"code":48264,"language":420,"meta":48,"style":48},[31,48398,48399,48407,48415,48423,48431],{"__ignoreMap":48},[52,48400,48401,48403,48405],{"class":54,"line":55},[52,48402,59],{"class":58},[52,48404,63],{"class":371},[52,48406,77],{"class":58},[52,48408,48409,48411,48413],{"class":54,"line":80},[52,48410,83],{"class":58},[52,48412,48242],{"class":371},[52,48414,77],{"class":58},[52,48416,48417,48419,48421],{"class":54,"line":108},[52,48418,2213],{"class":58},[52,48420,2216],{"class":371},[52,48422,105],{"class":58},[52,48424,48425,48427,48429],{"class":54,"line":118},[52,48426,2230],{"class":58},[52,48428,48242],{"class":371},[52,48430,77],{"class":58},[52,48432,48433,48435,48437],{"class":54,"line":594},[52,48434,121],{"class":58},[52,48436,63],{"class":371},[52,48438,77],{"class":58},[43,48440,48442],{"className":222,"code":48441,"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,48443,48444,48454,48458,48472,48476,48485,48493,48497,48501],{"__ignoreMap":48},[52,48445,48446,48448,48450,48452],{"class":54,"line":55},[52,48447,232],{"class":231},[52,48449,9005],{"class":58},[52,48451,238],{"class":231},[52,48453,9010],{"class":73},[52,48455,48456],{"class":54,"line":80},[52,48457,597],{"emptyLinePlaceholder":171},[52,48459,48460,48462,48464,48466,48468,48470],{"class":54,"line":108},[52,48461,1721],{"class":231},[52,48463,1724],{"class":371},[52,48465,1727],{"class":231},[52,48467,1730],{"class":231},[52,48469,1733],{"class":66},[52,48471,1736],{"class":58},[52,48473,48474],{"class":54,"line":118},[52,48475,1751],{"class":58},[52,48477,48478,48480,48483],{"class":54,"line":594},[52,48479,1756],{"class":58},[52,48481,48482],{"class":73},"'Solarize'",[52,48484,4496],{"class":58},[52,48486,48487,48489,48491],{"class":54,"line":600},[52,48488,4501],{"class":58},[52,48490,2869],{"class":73},[52,48492,2129],{"class":58},[52,48494,48495],{"class":54,"line":606},[52,48496,4518],{"class":58},[52,48498,48499],{"class":54,"line":653},[52,48500,1773],{"class":58},[52,48502,48503],{"class":54,"line":662},[52,48504,1778],{"class":58},[156,48506,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":48508},[48509,48510],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/solarize",{"title":48242,"description":48250},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":48517,"title":1571,"body":48518,"category":27535,"componentType":20617,"description":48525,"extension":168,"meta":48755,"navigation":171,"path":48756,"requiresChild":27538,"seo":48757,"stem":48758,"__hash__":48759},"components/docs/components/SolidColor.md",{"type":8,"value":48519,"toc":48751},[48520,48523,48526,48528,48530,48533,48535,48749],[11,48521,1571],{"id":48522},"solidcolor",[15,48524,48525],{},"Fill the canvas with a single solid color",[26676,48527],{"component":1571},[23,48529,26680],{"id":21278},[26682,48531],{":props":48532},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,48534,26688],{"id":26687},[217,48536,48537,48578,48616,48654,48692],{":tabs":1543},[43,48538,48540],{"className":45,"code":48539,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,48541,48542,48550,48557,48566,48570],{"__ignoreMap":48},[52,48543,48544,48546,48548],{"class":54,"line":55},[52,48545,59],{"class":58},[52,48547,63],{"class":62},[52,48549,77],{"class":58},[52,48551,48552,48554],{"class":54,"line":80},[52,48553,83],{"class":58},[52,48555,48556],{"class":62},"SolidColor\n",[52,48558,48559,48561,48563],{"class":54,"line":108},[52,48560,7125],{"class":66},[52,48562,70],{"class":58},[52,48564,48565],{"class":73},"\"#5b18ca\"\n",[52,48567,48568],{"class":54,"line":118},[52,48569,1224],{"class":58},[52,48571,48572,48574,48576],{"class":54,"line":594},[52,48573,121],{"class":58},[52,48575,63],{"class":62},[52,48577,77],{"class":58},[43,48579,48580],{"className":360,"code":48539,"language":362,"meta":48,"style":48},[31,48581,48582,48590,48596,48604,48608],{"__ignoreMap":48},[52,48583,48584,48586,48588],{"class":54,"line":55},[52,48585,59],{"class":58},[52,48587,63],{"class":371},[52,48589,77],{"class":58},[52,48591,48592,48594],{"class":54,"line":80},[52,48593,83],{"class":58},[52,48595,48556],{"class":371},[52,48597,48598,48600,48602],{"class":54,"line":108},[52,48599,7125],{"class":66},[52,48601,70],{"class":231},[52,48603,48565],{"class":73},[52,48605,48606],{"class":54,"line":118},[52,48607,1224],{"class":58},[52,48609,48610,48612,48614],{"class":54,"line":594},[52,48611,121],{"class":58},[52,48613,63],{"class":371},[52,48615,77],{"class":58},[43,48617,48618],{"className":2507,"code":48539,"language":2509,"meta":48,"style":48},[31,48619,48620,48628,48634,48642,48646],{"__ignoreMap":48},[52,48621,48622,48624,48626],{"class":54,"line":55},[52,48623,59],{"class":58},[52,48625,63],{"class":371},[52,48627,77],{"class":58},[52,48629,48630,48632],{"class":54,"line":80},[52,48631,83],{"class":58},[52,48633,48556],{"class":371},[52,48635,48636,48638,48640],{"class":54,"line":108},[52,48637,7125],{"class":66},[52,48639,70],{"class":58},[52,48641,48565],{"class":73},[52,48643,48644],{"class":54,"line":118},[52,48645,1224],{"class":58},[52,48647,48648,48650,48652],{"class":54,"line":594},[52,48649,121],{"class":58},[52,48651,63],{"class":371},[52,48653,77],{"class":58},[43,48655,48656],{"className":419,"code":48539,"language":420,"meta":48,"style":48},[31,48657,48658,48666,48672,48680,48684],{"__ignoreMap":48},[52,48659,48660,48662,48664],{"class":54,"line":55},[52,48661,59],{"class":58},[52,48663,63],{"class":371},[52,48665,77],{"class":58},[52,48667,48668,48670],{"class":54,"line":80},[52,48669,83],{"class":58},[52,48671,48556],{"class":371},[52,48673,48674,48676,48678],{"class":54,"line":108},[52,48675,7125],{"class":66},[52,48677,70],{"class":231},[52,48679,48565],{"class":73},[52,48681,48682],{"class":54,"line":118},[52,48683,1224],{"class":58},[52,48685,48686,48688,48690],{"class":54,"line":594},[52,48687,121],{"class":58},[52,48689,63],{"class":371},[52,48691,77],{"class":58},[43,48693,48695],{"className":222,"code":48694,"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,48696,48697,48707,48711,48725,48729,48741,48745],{"__ignoreMap":48},[52,48698,48699,48701,48703,48705],{"class":54,"line":55},[52,48700,232],{"class":231},[52,48702,9005],{"class":58},[52,48704,238],{"class":231},[52,48706,9010],{"class":73},[52,48708,48709],{"class":54,"line":80},[52,48710,597],{"emptyLinePlaceholder":171},[52,48712,48713,48715,48717,48719,48721,48723],{"class":54,"line":108},[52,48714,1721],{"class":231},[52,48716,1724],{"class":371},[52,48718,1727],{"class":231},[52,48720,1730],{"class":231},[52,48722,1733],{"class":66},[52,48724,1736],{"class":58},[52,48726,48727],{"class":54,"line":118},[52,48728,1751],{"class":58},[52,48730,48731,48733,48735,48737,48739],{"class":54,"line":594},[52,48732,1756],{"class":58},[52,48734,1759],{"class":73},[52,48736,1762],{"class":58},[52,48738,1765],{"class":73},[52,48740,1768],{"class":58},[52,48742,48743],{"class":54,"line":600},[52,48744,1773],{"class":58},[52,48746,48747],{"class":54,"line":606},[52,48748,1778],{"class":58},[156,48750,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48752},[48753,48754],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/solidcolor",{"title":1571,"description":48525},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":48761,"title":48762,"body":48763,"category":28880,"componentType":20623,"description":48770,"extension":168,"meta":49087,"navigation":171,"path":49088,"requiresChild":171,"seo":49089,"stem":49090,"__hash__":49091},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":48764,"toc":49083},[48765,48768,48771,48773,48775,48778,48780,49081],[11,48766,48762],{"id":48767},"spherize",[15,48769,48770],{},"Map content onto a 3D sphere surface with depth distortion",[26676,48772],{"component":48762},[23,48774,26680],{"id":21278},[26682,48776],{":props":48777},"[{\"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,48779,26688],{"id":26687},[217,48781,48782,48838,48897,48953,49011],{":tabs":1543},[43,48783,48785],{"className":45,"code":48784,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,48786,48787,48795,48802,48810,48814,48822,48830],{"__ignoreMap":48},[52,48788,48789,48791,48793],{"class":54,"line":55},[52,48790,59],{"class":58},[52,48792,63],{"class":62},[52,48794,77],{"class":58},[52,48796,48797,48799],{"class":54,"line":80},[52,48798,83],{"class":58},[52,48800,48801],{"class":62},"Spherize\n",[52,48803,48804,48806,48808],{"class":54,"line":108},[52,48805,14675],{"class":66},[52,48807,70],{"class":58},[52,48809,28602],{"class":73},[52,48811,48812],{"class":54,"line":118},[52,48813,26724],{"class":58},[52,48815,48816,48818,48820],{"class":54,"line":594},[52,48817,2213],{"class":58},[52,48819,2216],{"class":62},[52,48821,105],{"class":58},[52,48823,48824,48826,48828],{"class":54,"line":600},[52,48825,2230],{"class":58},[52,48827,48762],{"class":62},[52,48829,77],{"class":58},[52,48831,48832,48834,48836],{"class":54,"line":606},[52,48833,121],{"class":58},[52,48835,63],{"class":62},[52,48837,77],{"class":58},[43,48839,48841],{"className":360,"code":48840,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,48842,48843,48851,48857,48869,48873,48881,48889],{"__ignoreMap":48},[52,48844,48845,48847,48849],{"class":54,"line":55},[52,48846,59],{"class":58},[52,48848,63],{"class":371},[52,48850,77],{"class":58},[52,48852,48853,48855],{"class":54,"line":80},[52,48854,83],{"class":58},[52,48856,48801],{"class":371},[52,48858,48859,48861,48863,48865,48867],{"class":54,"line":108},[52,48860,7135],{"class":66},[52,48862,70],{"class":231},[52,48864,723],{"class":58},[52,48866,6165],{"class":371},[52,48868,729],{"class":58},[52,48870,48871],{"class":54,"line":118},[52,48872,26724],{"class":58},[52,48874,48875,48877,48879],{"class":54,"line":594},[52,48876,2213],{"class":58},[52,48878,2216],{"class":371},[52,48880,105],{"class":58},[52,48882,48883,48885,48887],{"class":54,"line":600},[52,48884,2230],{"class":58},[52,48886,48762],{"class":371},[52,48888,77],{"class":58},[52,48890,48891,48893,48895],{"class":54,"line":606},[52,48892,121],{"class":58},[52,48894,63],{"class":371},[52,48896,77],{"class":58},[43,48898,48899],{"className":2507,"code":48840,"language":2509,"meta":48,"style":48},[31,48900,48901,48909,48915,48925,48929,48937,48945],{"__ignoreMap":48},[52,48902,48903,48905,48907],{"class":54,"line":55},[52,48904,59],{"class":58},[52,48906,63],{"class":371},[52,48908,77],{"class":58},[52,48910,48911,48913],{"class":54,"line":80},[52,48912,83],{"class":58},[52,48914,48801],{"class":371},[52,48916,48917,48919,48921,48923],{"class":54,"line":108},[52,48918,7135],{"class":66},[52,48920,24620],{"class":58},[52,48922,6165],{"class":371},[52,48924,729],{"class":58},[52,48926,48927],{"class":54,"line":118},[52,48928,26724],{"class":58},[52,48930,48931,48933,48935],{"class":54,"line":594},[52,48932,2213],{"class":58},[52,48934,2216],{"class":371},[52,48936,105],{"class":58},[52,48938,48939,48941,48943],{"class":54,"line":600},[52,48940,2230],{"class":58},[52,48942,48762],{"class":371},[52,48944,77],{"class":58},[52,48946,48947,48949,48951],{"class":54,"line":606},[52,48948,121],{"class":58},[52,48950,63],{"class":371},[52,48952,77],{"class":58},[43,48954,48955],{"className":419,"code":48840,"language":420,"meta":48,"style":48},[31,48956,48957,48965,48971,48983,48987,48995,49003],{"__ignoreMap":48},[52,48958,48959,48961,48963],{"class":54,"line":55},[52,48960,59],{"class":58},[52,48962,63],{"class":371},[52,48964,77],{"class":58},[52,48966,48967,48969],{"class":54,"line":80},[52,48968,83],{"class":58},[52,48970,48801],{"class":371},[52,48972,48973,48975,48977,48979,48981],{"class":54,"line":108},[52,48974,7135],{"class":66},[52,48976,70],{"class":231},[52,48978,723],{"class":58},[52,48980,6165],{"class":371},[52,48982,729],{"class":58},[52,48984,48985],{"class":54,"line":118},[52,48986,26724],{"class":58},[52,48988,48989,48991,48993],{"class":54,"line":594},[52,48990,2213],{"class":58},[52,48992,2216],{"class":371},[52,48994,105],{"class":58},[52,48996,48997,48999,49001],{"class":54,"line":600},[52,48998,2230],{"class":58},[52,49000,48762],{"class":371},[52,49002,77],{"class":58},[52,49004,49005,49007,49009],{"class":54,"line":606},[52,49006,121],{"class":58},[52,49008,63],{"class":371},[52,49010,77],{"class":58},[43,49012,49014],{"className":222,"code":49013,"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,49015,49016,49026,49030,49044,49048,49061,49069,49073,49077],{"__ignoreMap":48},[52,49017,49018,49020,49022,49024],{"class":54,"line":55},[52,49019,232],{"class":231},[52,49021,9005],{"class":58},[52,49023,238],{"class":231},[52,49025,9010],{"class":73},[52,49027,49028],{"class":54,"line":80},[52,49029,597],{"emptyLinePlaceholder":171},[52,49031,49032,49034,49036,49038,49040,49042],{"class":54,"line":108},[52,49033,1721],{"class":231},[52,49035,1724],{"class":371},[52,49037,1727],{"class":231},[52,49039,1730],{"class":231},[52,49041,1733],{"class":66},[52,49043,1736],{"class":58},[52,49045,49046],{"class":54,"line":118},[52,49047,1751],{"class":58},[52,49049,49050,49052,49055,49057,49059],{"class":54,"line":594},[52,49051,1756],{"class":58},[52,49053,49054],{"class":73},"'Spherize'",[52,49056,5028],{"class":58},[52,49058,6165],{"class":371},[52,49060,5033],{"class":58},[52,49062,49063,49065,49067],{"class":54,"line":600},[52,49064,4501],{"class":58},[52,49066,2869],{"class":73},[52,49068,2129],{"class":58},[52,49070,49071],{"class":54,"line":606},[52,49072,4518],{"class":58},[52,49074,49075],{"class":54,"line":653},[52,49076,1773],{"class":58},[52,49078,49079],{"class":54,"line":662},[52,49080,1778],{"class":58},[156,49082,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49084},[49085,49086],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/spherize",{"title":48762,"description":48770},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":49093,"title":49094,"body":49095,"category":27535,"componentType":20617,"description":49102,"extension":168,"meta":49287,"navigation":171,"path":49288,"requiresChild":27538,"seo":49289,"stem":49290,"__hash__":49291},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":49096,"toc":49283},[49097,49100,49103,49105,49107,49110,49112,49281],[11,49098,49094],{"id":49099},"spiral",[15,49101,49102],{},"Rotating spiral pattern with animated movement",[26676,49104],{"component":49094},[23,49106,26680],{"id":21278},[26682,49108],{":props":49109},"[{\"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,49111,26688],{"id":26687},[217,49113,49114,49143,49171,49199,49227],{":tabs":1543},[43,49115,49117],{"className":45,"code":49116,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,49118,49119,49127,49135],{"__ignoreMap":48},[52,49120,49121,49123,49125],{"class":54,"line":55},[52,49122,59],{"class":58},[52,49124,63],{"class":62},[52,49126,77],{"class":58},[52,49128,49129,49131,49133],{"class":54,"line":80},[52,49130,83],{"class":58},[52,49132,49094],{"class":62},[52,49134,105],{"class":58},[52,49136,49137,49139,49141],{"class":54,"line":108},[52,49138,121],{"class":58},[52,49140,63],{"class":62},[52,49142,77],{"class":58},[43,49144,49145],{"className":360,"code":49116,"language":362,"meta":48,"style":48},[31,49146,49147,49155,49163],{"__ignoreMap":48},[52,49148,49149,49151,49153],{"class":54,"line":55},[52,49150,59],{"class":58},[52,49152,63],{"class":371},[52,49154,77],{"class":58},[52,49156,49157,49159,49161],{"class":54,"line":80},[52,49158,83],{"class":58},[52,49160,49094],{"class":371},[52,49162,105],{"class":58},[52,49164,49165,49167,49169],{"class":54,"line":108},[52,49166,121],{"class":58},[52,49168,63],{"class":371},[52,49170,77],{"class":58},[43,49172,49173],{"className":2507,"code":49116,"language":2509,"meta":48,"style":48},[31,49174,49175,49183,49191],{"__ignoreMap":48},[52,49176,49177,49179,49181],{"class":54,"line":55},[52,49178,59],{"class":58},[52,49180,63],{"class":371},[52,49182,77],{"class":58},[52,49184,49185,49187,49189],{"class":54,"line":80},[52,49186,83],{"class":58},[52,49188,49094],{"class":371},[52,49190,105],{"class":58},[52,49192,49193,49195,49197],{"class":54,"line":108},[52,49194,121],{"class":58},[52,49196,63],{"class":371},[52,49198,77],{"class":58},[43,49200,49201],{"className":419,"code":49116,"language":420,"meta":48,"style":48},[31,49202,49203,49211,49219],{"__ignoreMap":48},[52,49204,49205,49207,49209],{"class":54,"line":55},[52,49206,59],{"class":58},[52,49208,63],{"class":371},[52,49210,77],{"class":58},[52,49212,49213,49215,49217],{"class":54,"line":80},[52,49214,83],{"class":58},[52,49216,49094],{"class":371},[52,49218,105],{"class":58},[52,49220,49221,49223,49225],{"class":54,"line":108},[52,49222,121],{"class":58},[52,49224,63],{"class":371},[52,49226,77],{"class":58},[43,49228,49230],{"className":222,"code":49229,"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,49231,49232,49242,49246,49260,49264,49273,49277],{"__ignoreMap":48},[52,49233,49234,49236,49238,49240],{"class":54,"line":55},[52,49235,232],{"class":231},[52,49237,9005],{"class":58},[52,49239,238],{"class":231},[52,49241,9010],{"class":73},[52,49243,49244],{"class":54,"line":80},[52,49245,597],{"emptyLinePlaceholder":171},[52,49247,49248,49250,49252,49254,49256,49258],{"class":54,"line":108},[52,49249,1721],{"class":231},[52,49251,1724],{"class":371},[52,49253,1727],{"class":231},[52,49255,1730],{"class":231},[52,49257,1733],{"class":66},[52,49259,1736],{"class":58},[52,49261,49262],{"class":54,"line":118},[52,49263,1751],{"class":58},[52,49265,49266,49268,49271],{"class":54,"line":594},[52,49267,1756],{"class":58},[52,49269,49270],{"class":73},"'Spiral'",[52,49272,2129],{"class":58},[52,49274,49275],{"class":54,"line":600},[52,49276,1773],{"class":58},[52,49278,49279],{"class":54,"line":606},[52,49280,1778],{"class":58},[156,49282,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":49284},[49285,49286],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/spiral",{"title":49094,"description":49102},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":49293,"title":49294,"body":49295,"category":30502,"componentType":20617,"description":49302,"extension":168,"meta":49579,"navigation":171,"path":49580,"requiresChild":27538,"seo":49581,"stem":49582,"__hash__":49583},"components/docs/components/Star.md","Star",{"type":8,"value":49296,"toc":49575},[49297,49300,49303,49305,49307,49310,49312,49573],[11,49298,49294],{"id":49299},"star",[15,49301,49302],{},"Classic star polygon with straight sides and sharp pointed tips",[26676,49304],{"component":49294},[23,49306,26680],{"id":21278},[26682,49308],{":props":49309},"[{\"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,49311,26688],{"id":26687},[217,49313,49314,49362,49413,49461,49511],{":tabs":1543},[43,49315,49317],{"className":45,"code":49316,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,49318,49319,49327,49334,49342,49350,49354],{"__ignoreMap":48},[52,49320,49321,49323,49325],{"class":54,"line":55},[52,49322,59],{"class":58},[52,49324,63],{"class":62},[52,49326,77],{"class":58},[52,49328,49329,49331],{"class":54,"line":80},[52,49330,83],{"class":58},[52,49332,49333],{"class":62},"Star\n",[52,49335,49336,49338,49340],{"class":54,"line":108},[52,49337,7125],{"class":66},[52,49339,70],{"class":58},[52,49341,7081],{"class":73},[52,49343,49344,49346,49348],{"class":54,"line":118},[52,49345,14675],{"class":66},[52,49347,70],{"class":58},[52,49349,36239],{"class":73},[52,49351,49352],{"class":54,"line":594},[52,49353,1224],{"class":58},[52,49355,49356,49358,49360],{"class":54,"line":600},[52,49357,121],{"class":58},[52,49359,63],{"class":62},[52,49361,77],{"class":58},[43,49363,49365],{"className":360,"code":49364,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,49366,49367,49375,49381,49389,49401,49405],{"__ignoreMap":48},[52,49368,49369,49371,49373],{"class":54,"line":55},[52,49370,59],{"class":58},[52,49372,63],{"class":371},[52,49374,77],{"class":58},[52,49376,49377,49379],{"class":54,"line":80},[52,49378,83],{"class":58},[52,49380,49333],{"class":371},[52,49382,49383,49385,49387],{"class":54,"line":108},[52,49384,7125],{"class":66},[52,49386,70],{"class":231},[52,49388,7081],{"class":73},[52,49390,49391,49393,49395,49397,49399],{"class":54,"line":118},[52,49392,7135],{"class":66},[52,49394,70],{"class":231},[52,49396,723],{"class":58},[52,49398,5737],{"class":371},[52,49400,729],{"class":58},[52,49402,49403],{"class":54,"line":594},[52,49404,1224],{"class":58},[52,49406,49407,49409,49411],{"class":54,"line":600},[52,49408,121],{"class":58},[52,49410,63],{"class":371},[52,49412,77],{"class":58},[43,49414,49415],{"className":2507,"code":49364,"language":2509,"meta":48,"style":48},[31,49416,49417,49425,49431,49439,49449,49453],{"__ignoreMap":48},[52,49418,49419,49421,49423],{"class":54,"line":55},[52,49420,59],{"class":58},[52,49422,63],{"class":371},[52,49424,77],{"class":58},[52,49426,49427,49429],{"class":54,"line":80},[52,49428,83],{"class":58},[52,49430,49333],{"class":371},[52,49432,49433,49435,49437],{"class":54,"line":108},[52,49434,7125],{"class":66},[52,49436,70],{"class":58},[52,49438,7081],{"class":73},[52,49440,49441,49443,49445,49447],{"class":54,"line":118},[52,49442,7135],{"class":66},[52,49444,24620],{"class":58},[52,49446,5737],{"class":371},[52,49448,729],{"class":58},[52,49450,49451],{"class":54,"line":594},[52,49452,1224],{"class":58},[52,49454,49455,49457,49459],{"class":54,"line":600},[52,49456,121],{"class":58},[52,49458,63],{"class":371},[52,49460,77],{"class":58},[43,49462,49463],{"className":419,"code":49364,"language":420,"meta":48,"style":48},[31,49464,49465,49473,49479,49487,49499,49503],{"__ignoreMap":48},[52,49466,49467,49469,49471],{"class":54,"line":55},[52,49468,59],{"class":58},[52,49470,63],{"class":371},[52,49472,77],{"class":58},[52,49474,49475,49477],{"class":54,"line":80},[52,49476,83],{"class":58},[52,49478,49333],{"class":371},[52,49480,49481,49483,49485],{"class":54,"line":108},[52,49482,7125],{"class":66},[52,49484,70],{"class":231},[52,49486,7081],{"class":73},[52,49488,49489,49491,49493,49495,49497],{"class":54,"line":118},[52,49490,7135],{"class":66},[52,49492,70],{"class":231},[52,49494,723],{"class":58},[52,49496,5737],{"class":371},[52,49498,729],{"class":58},[52,49500,49501],{"class":54,"line":594},[52,49502,1224],{"class":58},[52,49504,49505,49507,49509],{"class":54,"line":600},[52,49506,121],{"class":58},[52,49508,63],{"class":371},[52,49510,77],{"class":58},[43,49512,49514],{"className":222,"code":49513,"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,49515,49516,49526,49530,49544,49548,49565,49569],{"__ignoreMap":48},[52,49517,49518,49520,49522,49524],{"class":54,"line":55},[52,49519,232],{"class":231},[52,49521,9005],{"class":58},[52,49523,238],{"class":231},[52,49525,9010],{"class":73},[52,49527,49528],{"class":54,"line":80},[52,49529,597],{"emptyLinePlaceholder":171},[52,49531,49532,49534,49536,49538,49540,49542],{"class":54,"line":108},[52,49533,1721],{"class":231},[52,49535,1724],{"class":371},[52,49537,1727],{"class":231},[52,49539,1730],{"class":231},[52,49541,1733],{"class":66},[52,49543,1736],{"class":58},[52,49545,49546],{"class":54,"line":118},[52,49547,1751],{"class":58},[52,49549,49550,49552,49555,49557,49559,49561,49563],{"class":54,"line":594},[52,49551,1756],{"class":58},[52,49553,49554],{"class":73},"'Star'",[52,49556,1762],{"class":58},[52,49558,7660],{"class":73},[52,49560,4052],{"class":58},[52,49562,5737],{"class":371},[52,49564,1768],{"class":58},[52,49566,49567],{"class":54,"line":600},[52,49568,1773],{"class":58},[52,49570,49571],{"class":54,"line":606},[52,49572,1778],{"class":58},[156,49574,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49576},[49577,49578],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/star",{"title":49294,"description":49302},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":49585,"title":49586,"body":49587,"category":27535,"componentType":20617,"description":49594,"extension":168,"meta":49779,"navigation":171,"path":49780,"requiresChild":27538,"seo":49781,"stem":49782,"__hash__":49783},"components/docs/components/Strands.md","Strands",{"type":8,"value":49588,"toc":49775},[49589,49592,49595,49597,49599,49602,49604,49773],[11,49590,49586],{"id":49591},"strands",[15,49593,49594],{},"Procedural wavy strands with layered animation",[26676,49596],{"component":49586},[23,49598,26680],{"id":21278},[26682,49600],{":props":49601},"[{\"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,49603,26688],{"id":26687},[217,49605,49606,49635,49663,49691,49719],{":tabs":1543},[43,49607,49609],{"className":45,"code":49608,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,49610,49611,49619,49627],{"__ignoreMap":48},[52,49612,49613,49615,49617],{"class":54,"line":55},[52,49614,59],{"class":58},[52,49616,63],{"class":62},[52,49618,77],{"class":58},[52,49620,49621,49623,49625],{"class":54,"line":80},[52,49622,83],{"class":58},[52,49624,49586],{"class":62},[52,49626,105],{"class":58},[52,49628,49629,49631,49633],{"class":54,"line":108},[52,49630,121],{"class":58},[52,49632,63],{"class":62},[52,49634,77],{"class":58},[43,49636,49637],{"className":360,"code":49608,"language":362,"meta":48,"style":48},[31,49638,49639,49647,49655],{"__ignoreMap":48},[52,49640,49641,49643,49645],{"class":54,"line":55},[52,49642,59],{"class":58},[52,49644,63],{"class":371},[52,49646,77],{"class":58},[52,49648,49649,49651,49653],{"class":54,"line":80},[52,49650,83],{"class":58},[52,49652,49586],{"class":371},[52,49654,105],{"class":58},[52,49656,49657,49659,49661],{"class":54,"line":108},[52,49658,121],{"class":58},[52,49660,63],{"class":371},[52,49662,77],{"class":58},[43,49664,49665],{"className":2507,"code":49608,"language":2509,"meta":48,"style":48},[31,49666,49667,49675,49683],{"__ignoreMap":48},[52,49668,49669,49671,49673],{"class":54,"line":55},[52,49670,59],{"class":58},[52,49672,63],{"class":371},[52,49674,77],{"class":58},[52,49676,49677,49679,49681],{"class":54,"line":80},[52,49678,83],{"class":58},[52,49680,49586],{"class":371},[52,49682,105],{"class":58},[52,49684,49685,49687,49689],{"class":54,"line":108},[52,49686,121],{"class":58},[52,49688,63],{"class":371},[52,49690,77],{"class":58},[43,49692,49693],{"className":419,"code":49608,"language":420,"meta":48,"style":48},[31,49694,49695,49703,49711],{"__ignoreMap":48},[52,49696,49697,49699,49701],{"class":54,"line":55},[52,49698,59],{"class":58},[52,49700,63],{"class":371},[52,49702,77],{"class":58},[52,49704,49705,49707,49709],{"class":54,"line":80},[52,49706,83],{"class":58},[52,49708,49586],{"class":371},[52,49710,105],{"class":58},[52,49712,49713,49715,49717],{"class":54,"line":108},[52,49714,121],{"class":58},[52,49716,63],{"class":371},[52,49718,77],{"class":58},[43,49720,49722],{"className":222,"code":49721,"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,49723,49724,49734,49738,49752,49756,49765,49769],{"__ignoreMap":48},[52,49725,49726,49728,49730,49732],{"class":54,"line":55},[52,49727,232],{"class":231},[52,49729,9005],{"class":58},[52,49731,238],{"class":231},[52,49733,9010],{"class":73},[52,49735,49736],{"class":54,"line":80},[52,49737,597],{"emptyLinePlaceholder":171},[52,49739,49740,49742,49744,49746,49748,49750],{"class":54,"line":108},[52,49741,1721],{"class":231},[52,49743,1724],{"class":371},[52,49745,1727],{"class":231},[52,49747,1730],{"class":231},[52,49749,1733],{"class":66},[52,49751,1736],{"class":58},[52,49753,49754],{"class":54,"line":118},[52,49755,1751],{"class":58},[52,49757,49758,49760,49763],{"class":54,"line":594},[52,49759,1756],{"class":58},[52,49761,49762],{"class":73},"'Strands'",[52,49764,2129],{"class":58},[52,49766,49767],{"class":54,"line":600},[52,49768,1773],{"class":58},[52,49770,49771],{"class":54,"line":606},[52,49772,1778],{"class":58},[156,49774,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":49776},[49777,49778],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/strands",{"title":49586,"description":49594},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":49785,"title":49786,"body":49787,"category":28880,"componentType":20623,"description":49793,"extension":168,"meta":50054,"navigation":171,"path":50055,"requiresChild":171,"seo":50056,"stem":50057,"__hash__":50058},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":49788,"toc":50050},[49789,49791,49794,49796,49798,49801,49803,50048],[11,49790,49786],{"id":13420},[15,49792,49793],{},"Stretch content towards a direction from a center point",[26676,49795],{"component":49786},[23,49797,26680],{"id":21278},[26682,49799],{":props":49800},"[{\"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,49802,26688],{"id":26687},[217,49804,49805,49850,49894,49938,49982],{":tabs":1543},[43,49806,49808],{"className":45,"code":49807,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,49809,49810,49818,49826,49834,49842],{"__ignoreMap":48},[52,49811,49812,49814,49816],{"class":54,"line":55},[52,49813,59],{"class":58},[52,49815,63],{"class":62},[52,49817,77],{"class":58},[52,49819,49820,49822,49824],{"class":54,"line":80},[52,49821,83],{"class":58},[52,49823,49786],{"class":62},[52,49825,77],{"class":58},[52,49827,49828,49830,49832],{"class":54,"line":108},[52,49829,2213],{"class":58},[52,49831,2216],{"class":62},[52,49833,105],{"class":58},[52,49835,49836,49838,49840],{"class":54,"line":118},[52,49837,2230],{"class":58},[52,49839,49786],{"class":62},[52,49841,77],{"class":58},[52,49843,49844,49846,49848],{"class":54,"line":594},[52,49845,121],{"class":58},[52,49847,63],{"class":62},[52,49849,77],{"class":58},[43,49851,49852],{"className":360,"code":49807,"language":362,"meta":48,"style":48},[31,49853,49854,49862,49870,49878,49886],{"__ignoreMap":48},[52,49855,49856,49858,49860],{"class":54,"line":55},[52,49857,59],{"class":58},[52,49859,63],{"class":371},[52,49861,77],{"class":58},[52,49863,49864,49866,49868],{"class":54,"line":80},[52,49865,83],{"class":58},[52,49867,49786],{"class":371},[52,49869,77],{"class":58},[52,49871,49872,49874,49876],{"class":54,"line":108},[52,49873,2213],{"class":58},[52,49875,2216],{"class":371},[52,49877,105],{"class":58},[52,49879,49880,49882,49884],{"class":54,"line":118},[52,49881,2230],{"class":58},[52,49883,49786],{"class":371},[52,49885,77],{"class":58},[52,49887,49888,49890,49892],{"class":54,"line":594},[52,49889,121],{"class":58},[52,49891,63],{"class":371},[52,49893,77],{"class":58},[43,49895,49896],{"className":2507,"code":49807,"language":2509,"meta":48,"style":48},[31,49897,49898,49906,49914,49922,49930],{"__ignoreMap":48},[52,49899,49900,49902,49904],{"class":54,"line":55},[52,49901,59],{"class":58},[52,49903,63],{"class":371},[52,49905,77],{"class":58},[52,49907,49908,49910,49912],{"class":54,"line":80},[52,49909,83],{"class":58},[52,49911,49786],{"class":371},[52,49913,77],{"class":58},[52,49915,49916,49918,49920],{"class":54,"line":108},[52,49917,2213],{"class":58},[52,49919,2216],{"class":371},[52,49921,105],{"class":58},[52,49923,49924,49926,49928],{"class":54,"line":118},[52,49925,2230],{"class":58},[52,49927,49786],{"class":371},[52,49929,77],{"class":58},[52,49931,49932,49934,49936],{"class":54,"line":594},[52,49933,121],{"class":58},[52,49935,63],{"class":371},[52,49937,77],{"class":58},[43,49939,49940],{"className":419,"code":49807,"language":420,"meta":48,"style":48},[31,49941,49942,49950,49958,49966,49974],{"__ignoreMap":48},[52,49943,49944,49946,49948],{"class":54,"line":55},[52,49945,59],{"class":58},[52,49947,63],{"class":371},[52,49949,77],{"class":58},[52,49951,49952,49954,49956],{"class":54,"line":80},[52,49953,83],{"class":58},[52,49955,49786],{"class":371},[52,49957,77],{"class":58},[52,49959,49960,49962,49964],{"class":54,"line":108},[52,49961,2213],{"class":58},[52,49963,2216],{"class":371},[52,49965,105],{"class":58},[52,49967,49968,49970,49972],{"class":54,"line":118},[52,49969,2230],{"class":58},[52,49971,49786],{"class":371},[52,49973,77],{"class":58},[52,49975,49976,49978,49980],{"class":54,"line":594},[52,49977,121],{"class":58},[52,49979,63],{"class":371},[52,49981,77],{"class":58},[43,49983,49985],{"className":222,"code":49984,"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,49986,49987,49997,50001,50015,50019,50028,50036,50040,50044],{"__ignoreMap":48},[52,49988,49989,49991,49993,49995],{"class":54,"line":55},[52,49990,232],{"class":231},[52,49992,9005],{"class":58},[52,49994,238],{"class":231},[52,49996,9010],{"class":73},[52,49998,49999],{"class":54,"line":80},[52,50000,597],{"emptyLinePlaceholder":171},[52,50002,50003,50005,50007,50009,50011,50013],{"class":54,"line":108},[52,50004,1721],{"class":231},[52,50006,1724],{"class":371},[52,50008,1727],{"class":231},[52,50010,1730],{"class":231},[52,50012,1733],{"class":66},[52,50014,1736],{"class":58},[52,50016,50017],{"class":54,"line":118},[52,50018,1751],{"class":58},[52,50020,50021,50023,50026],{"class":54,"line":594},[52,50022,1756],{"class":58},[52,50024,50025],{"class":73},"'Stretch'",[52,50027,4496],{"class":58},[52,50029,50030,50032,50034],{"class":54,"line":600},[52,50031,4501],{"class":58},[52,50033,2869],{"class":73},[52,50035,2129],{"class":58},[52,50037,50038],{"class":54,"line":606},[52,50039,4518],{"class":58},[52,50041,50042],{"class":54,"line":653},[52,50043,1773],{"class":58},[52,50045,50046],{"class":54,"line":662},[52,50047,1778],{"class":58},[156,50049,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":50051},[50052,50053],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/stretch",{"title":49786,"description":49793},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":50060,"title":50061,"body":50062,"category":27535,"componentType":20617,"description":50069,"extension":168,"meta":50254,"navigation":171,"path":50255,"requiresChild":27538,"seo":50256,"stem":50257,"__hash__":50258},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":50063,"toc":50250},[50064,50067,50070,50072,50074,50077,50079,50248],[11,50065,50061],{"id":50066},"stripes",[15,50068,50069],{},"Alternating colored stripes with animation",[26676,50071],{"component":50061},[23,50073,26680],{"id":21278},[26682,50075],{":props":50076},"[{\"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,50078,26688],{"id":26687},[217,50080,50081,50110,50138,50166,50194],{":tabs":1543},[43,50082,50084],{"className":45,"code":50083,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,50085,50086,50094,50102],{"__ignoreMap":48},[52,50087,50088,50090,50092],{"class":54,"line":55},[52,50089,59],{"class":58},[52,50091,63],{"class":62},[52,50093,77],{"class":58},[52,50095,50096,50098,50100],{"class":54,"line":80},[52,50097,83],{"class":58},[52,50099,50061],{"class":62},[52,50101,105],{"class":58},[52,50103,50104,50106,50108],{"class":54,"line":108},[52,50105,121],{"class":58},[52,50107,63],{"class":62},[52,50109,77],{"class":58},[43,50111,50112],{"className":360,"code":50083,"language":362,"meta":48,"style":48},[31,50113,50114,50122,50130],{"__ignoreMap":48},[52,50115,50116,50118,50120],{"class":54,"line":55},[52,50117,59],{"class":58},[52,50119,63],{"class":371},[52,50121,77],{"class":58},[52,50123,50124,50126,50128],{"class":54,"line":80},[52,50125,83],{"class":58},[52,50127,50061],{"class":371},[52,50129,105],{"class":58},[52,50131,50132,50134,50136],{"class":54,"line":108},[52,50133,121],{"class":58},[52,50135,63],{"class":371},[52,50137,77],{"class":58},[43,50139,50140],{"className":2507,"code":50083,"language":2509,"meta":48,"style":48},[31,50141,50142,50150,50158],{"__ignoreMap":48},[52,50143,50144,50146,50148],{"class":54,"line":55},[52,50145,59],{"class":58},[52,50147,63],{"class":371},[52,50149,77],{"class":58},[52,50151,50152,50154,50156],{"class":54,"line":80},[52,50153,83],{"class":58},[52,50155,50061],{"class":371},[52,50157,105],{"class":58},[52,50159,50160,50162,50164],{"class":54,"line":108},[52,50161,121],{"class":58},[52,50163,63],{"class":371},[52,50165,77],{"class":58},[43,50167,50168],{"className":419,"code":50083,"language":420,"meta":48,"style":48},[31,50169,50170,50178,50186],{"__ignoreMap":48},[52,50171,50172,50174,50176],{"class":54,"line":55},[52,50173,59],{"class":58},[52,50175,63],{"class":371},[52,50177,77],{"class":58},[52,50179,50180,50182,50184],{"class":54,"line":80},[52,50181,83],{"class":58},[52,50183,50061],{"class":371},[52,50185,105],{"class":58},[52,50187,50188,50190,50192],{"class":54,"line":108},[52,50189,121],{"class":58},[52,50191,63],{"class":371},[52,50193,77],{"class":58},[43,50195,50197],{"className":222,"code":50196,"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,50198,50199,50209,50213,50227,50231,50240,50244],{"__ignoreMap":48},[52,50200,50201,50203,50205,50207],{"class":54,"line":55},[52,50202,232],{"class":231},[52,50204,9005],{"class":58},[52,50206,238],{"class":231},[52,50208,9010],{"class":73},[52,50210,50211],{"class":54,"line":80},[52,50212,597],{"emptyLinePlaceholder":171},[52,50214,50215,50217,50219,50221,50223,50225],{"class":54,"line":108},[52,50216,1721],{"class":231},[52,50218,1724],{"class":371},[52,50220,1727],{"class":231},[52,50222,1730],{"class":231},[52,50224,1733],{"class":66},[52,50226,1736],{"class":58},[52,50228,50229],{"class":54,"line":118},[52,50230,1751],{"class":58},[52,50232,50233,50235,50238],{"class":54,"line":594},[52,50234,1756],{"class":58},[52,50236,50237],{"class":73},"'Stripes'",[52,50239,2129],{"class":58},[52,50241,50242],{"class":54,"line":600},[52,50243,1773],{"class":58},[52,50245,50246],{"class":54,"line":606},[52,50247,1778],{"class":58},[156,50249,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":50251},[50252,50253],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/stripes",{"title":50061,"description":50069},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":50260,"title":50261,"body":50262,"category":27535,"componentType":20617,"description":50269,"extension":168,"meta":50501,"navigation":171,"path":50502,"requiresChild":27538,"seo":50503,"stem":50504,"__hash__":50505},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":50263,"toc":50497},[50264,50267,50270,50272,50274,50277,50279,50495],[11,50265,50261],{"id":50266},"studiobackground",[15,50268,50269],{},"Multi-light studio background with ambient motion.",[26676,50271],{"component":50261},[23,50273,26680],{"id":21278},[26682,50275],{":props":50276},"[{\"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,50278,26688],{"id":26687},[217,50280,50281,50322,50360,50398,50436],{":tabs":1543},[43,50282,50284],{"className":45,"code":50283,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,50285,50286,50294,50301,50310,50314],{"__ignoreMap":48},[52,50287,50288,50290,50292],{"class":54,"line":55},[52,50289,59],{"class":58},[52,50291,63],{"class":62},[52,50293,77],{"class":58},[52,50295,50296,50298],{"class":54,"line":80},[52,50297,83],{"class":58},[52,50299,50300],{"class":62},"StudioBackground\n",[52,50302,50303,50305,50307],{"class":54,"line":108},[52,50304,7125],{"class":66},[52,50306,70],{"class":58},[52,50308,50309],{"class":73},"\"#d8dbec\"\n",[52,50311,50312],{"class":54,"line":118},[52,50313,1224],{"class":58},[52,50315,50316,50318,50320],{"class":54,"line":594},[52,50317,121],{"class":58},[52,50319,63],{"class":62},[52,50321,77],{"class":58},[43,50323,50324],{"className":360,"code":50283,"language":362,"meta":48,"style":48},[31,50325,50326,50334,50340,50348,50352],{"__ignoreMap":48},[52,50327,50328,50330,50332],{"class":54,"line":55},[52,50329,59],{"class":58},[52,50331,63],{"class":371},[52,50333,77],{"class":58},[52,50335,50336,50338],{"class":54,"line":80},[52,50337,83],{"class":58},[52,50339,50300],{"class":371},[52,50341,50342,50344,50346],{"class":54,"line":108},[52,50343,7125],{"class":66},[52,50345,70],{"class":231},[52,50347,50309],{"class":73},[52,50349,50350],{"class":54,"line":118},[52,50351,1224],{"class":58},[52,50353,50354,50356,50358],{"class":54,"line":594},[52,50355,121],{"class":58},[52,50357,63],{"class":371},[52,50359,77],{"class":58},[43,50361,50362],{"className":2507,"code":50283,"language":2509,"meta":48,"style":48},[31,50363,50364,50372,50378,50386,50390],{"__ignoreMap":48},[52,50365,50366,50368,50370],{"class":54,"line":55},[52,50367,59],{"class":58},[52,50369,63],{"class":371},[52,50371,77],{"class":58},[52,50373,50374,50376],{"class":54,"line":80},[52,50375,83],{"class":58},[52,50377,50300],{"class":371},[52,50379,50380,50382,50384],{"class":54,"line":108},[52,50381,7125],{"class":66},[52,50383,70],{"class":58},[52,50385,50309],{"class":73},[52,50387,50388],{"class":54,"line":118},[52,50389,1224],{"class":58},[52,50391,50392,50394,50396],{"class":54,"line":594},[52,50393,121],{"class":58},[52,50395,63],{"class":371},[52,50397,77],{"class":58},[43,50399,50400],{"className":419,"code":50283,"language":420,"meta":48,"style":48},[31,50401,50402,50410,50416,50424,50428],{"__ignoreMap":48},[52,50403,50404,50406,50408],{"class":54,"line":55},[52,50405,59],{"class":58},[52,50407,63],{"class":371},[52,50409,77],{"class":58},[52,50411,50412,50414],{"class":54,"line":80},[52,50413,83],{"class":58},[52,50415,50300],{"class":371},[52,50417,50418,50420,50422],{"class":54,"line":108},[52,50419,7125],{"class":66},[52,50421,70],{"class":231},[52,50423,50309],{"class":73},[52,50425,50426],{"class":54,"line":118},[52,50427,1224],{"class":58},[52,50429,50430,50432,50434],{"class":54,"line":594},[52,50431,121],{"class":58},[52,50433,63],{"class":371},[52,50435,77],{"class":58},[43,50437,50439],{"className":222,"code":50438,"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,50440,50441,50451,50455,50469,50473,50487,50491],{"__ignoreMap":48},[52,50442,50443,50445,50447,50449],{"class":54,"line":55},[52,50444,232],{"class":231},[52,50446,9005],{"class":58},[52,50448,238],{"class":231},[52,50450,9010],{"class":73},[52,50452,50453],{"class":54,"line":80},[52,50454,597],{"emptyLinePlaceholder":171},[52,50456,50457,50459,50461,50463,50465,50467],{"class":54,"line":108},[52,50458,1721],{"class":231},[52,50460,1724],{"class":371},[52,50462,1727],{"class":231},[52,50464,1730],{"class":231},[52,50466,1733],{"class":66},[52,50468,1736],{"class":58},[52,50470,50471],{"class":54,"line":118},[52,50472,1751],{"class":58},[52,50474,50475,50477,50480,50482,50485],{"class":54,"line":594},[52,50476,1756],{"class":58},[52,50478,50479],{"class":73},"'StudioBackground'",[52,50481,1762],{"class":58},[52,50483,50484],{"class":73},"'#d8dbec'",[52,50486,1768],{"class":58},[52,50488,50489],{"class":54,"line":600},[52,50490,1773],{"class":58},[52,50492,50493],{"class":54,"line":606},[52,50494,1778],{"class":58},[156,50496,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50498},[50499,50500],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/studiobackground",{"title":50261,"description":50269},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":50507,"title":11496,"body":50508,"category":27535,"componentType":20617,"description":50515,"extension":168,"meta":50700,"navigation":171,"path":50701,"requiresChild":27538,"seo":50702,"stem":50703,"__hash__":50704},"components/docs/components/Swirl.md",{"type":8,"value":50509,"toc":50696},[50510,50513,50516,50518,50520,50523,50525,50694],[11,50511,11496],{"id":50512},"swirl",[15,50514,50515],{},"Flowing swirl pattern with multi-layered noise",[26676,50517],{"component":11496},[23,50519,26680],{"id":21278},[26682,50521],{":props":50522},"[{\"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,50524,26688],{"id":26687},[217,50526,50527,50556,50584,50612,50640],{":tabs":1543},[43,50528,50530],{"className":45,"code":50529,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,50531,50532,50540,50548],{"__ignoreMap":48},[52,50533,50534,50536,50538],{"class":54,"line":55},[52,50535,59],{"class":58},[52,50537,63],{"class":62},[52,50539,77],{"class":58},[52,50541,50542,50544,50546],{"class":54,"line":80},[52,50543,83],{"class":58},[52,50545,11496],{"class":62},[52,50547,105],{"class":58},[52,50549,50550,50552,50554],{"class":54,"line":108},[52,50551,121],{"class":58},[52,50553,63],{"class":62},[52,50555,77],{"class":58},[43,50557,50558],{"className":360,"code":50529,"language":362,"meta":48,"style":48},[31,50559,50560,50568,50576],{"__ignoreMap":48},[52,50561,50562,50564,50566],{"class":54,"line":55},[52,50563,59],{"class":58},[52,50565,63],{"class":371},[52,50567,77],{"class":58},[52,50569,50570,50572,50574],{"class":54,"line":80},[52,50571,83],{"class":58},[52,50573,11496],{"class":371},[52,50575,105],{"class":58},[52,50577,50578,50580,50582],{"class":54,"line":108},[52,50579,121],{"class":58},[52,50581,63],{"class":371},[52,50583,77],{"class":58},[43,50585,50586],{"className":2507,"code":50529,"language":2509,"meta":48,"style":48},[31,50587,50588,50596,50604],{"__ignoreMap":48},[52,50589,50590,50592,50594],{"class":54,"line":55},[52,50591,59],{"class":58},[52,50593,63],{"class":371},[52,50595,77],{"class":58},[52,50597,50598,50600,50602],{"class":54,"line":80},[52,50599,83],{"class":58},[52,50601,11496],{"class":371},[52,50603,105],{"class":58},[52,50605,50606,50608,50610],{"class":54,"line":108},[52,50607,121],{"class":58},[52,50609,63],{"class":371},[52,50611,77],{"class":58},[43,50613,50614],{"className":419,"code":50529,"language":420,"meta":48,"style":48},[31,50615,50616,50624,50632],{"__ignoreMap":48},[52,50617,50618,50620,50622],{"class":54,"line":55},[52,50619,59],{"class":58},[52,50621,63],{"class":371},[52,50623,77],{"class":58},[52,50625,50626,50628,50630],{"class":54,"line":80},[52,50627,83],{"class":58},[52,50629,11496],{"class":371},[52,50631,105],{"class":58},[52,50633,50634,50636,50638],{"class":54,"line":108},[52,50635,121],{"class":58},[52,50637,63],{"class":371},[52,50639,77],{"class":58},[43,50641,50643],{"className":222,"code":50642,"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,50644,50645,50655,50659,50673,50677,50686,50690],{"__ignoreMap":48},[52,50646,50647,50649,50651,50653],{"class":54,"line":55},[52,50648,232],{"class":231},[52,50650,9005],{"class":58},[52,50652,238],{"class":231},[52,50654,9010],{"class":73},[52,50656,50657],{"class":54,"line":80},[52,50658,597],{"emptyLinePlaceholder":171},[52,50660,50661,50663,50665,50667,50669,50671],{"class":54,"line":108},[52,50662,1721],{"class":231},[52,50664,1724],{"class":371},[52,50666,1727],{"class":231},[52,50668,1730],{"class":231},[52,50670,1733],{"class":66},[52,50672,1736],{"class":58},[52,50674,50675],{"class":54,"line":118},[52,50676,1751],{"class":58},[52,50678,50679,50681,50684],{"class":54,"line":594},[52,50680,1756],{"class":58},[52,50682,50683],{"class":73},"'Swirl'",[52,50685,2129],{"class":58},[52,50687,50688],{"class":54,"line":600},[52,50689,1773],{"class":58},[52,50691,50692],{"class":54,"line":606},[52,50693,1778],{"class":58},[156,50695,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":50697},[50698,50699],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/swirl",{"title":11496,"description":50515},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":50706,"title":50707,"body":50708,"category":27000,"componentType":20623,"description":50715,"extension":168,"meta":51032,"navigation":171,"path":51033,"requiresChild":171,"seo":51034,"stem":51035,"__hash__":51036},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":50709,"toc":51028},[50710,50713,50716,50718,50720,50723,50725,51026],[11,50711,50707],{"id":50712},"tiltshift",[15,50714,50715],{},"Selective focus blur mimicking tilt-shift photography",[26676,50717],{"component":50707},[23,50719,26680],{"id":21278},[26682,50721],{":props":50722},"[{\"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,50724,26688],{"id":26687},[217,50726,50727,50783,50842,50898,50956],{":tabs":1543},[43,50728,50730],{"className":45,"code":50729,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,50731,50732,50740,50747,50755,50759,50767,50775],{"__ignoreMap":48},[52,50733,50734,50736,50738],{"class":54,"line":55},[52,50735,59],{"class":58},[52,50737,63],{"class":62},[52,50739,77],{"class":58},[52,50741,50742,50744],{"class":54,"line":80},[52,50743,83],{"class":58},[52,50745,50746],{"class":62},"TiltShift\n",[52,50748,50749,50751,50753],{"class":54,"line":108},[52,50750,17644],{"class":66},[52,50752,70],{"class":58},[52,50754,27991],{"class":73},[52,50756,50757],{"class":54,"line":118},[52,50758,26724],{"class":58},[52,50760,50761,50763,50765],{"class":54,"line":594},[52,50762,2213],{"class":58},[52,50764,2216],{"class":62},[52,50766,105],{"class":58},[52,50768,50769,50771,50773],{"class":54,"line":600},[52,50770,2230],{"class":58},[52,50772,50707],{"class":62},[52,50774,77],{"class":58},[52,50776,50777,50779,50781],{"class":54,"line":606},[52,50778,121],{"class":58},[52,50780,63],{"class":62},[52,50782,77],{"class":58},[43,50784,50786],{"className":360,"code":50785,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,50787,50788,50796,50802,50814,50818,50826,50834],{"__ignoreMap":48},[52,50789,50790,50792,50794],{"class":54,"line":55},[52,50791,59],{"class":58},[52,50793,63],{"class":371},[52,50795,77],{"class":58},[52,50797,50798,50800],{"class":54,"line":80},[52,50799,83],{"class":58},[52,50801,50746],{"class":371},[52,50803,50804,50806,50808,50810,50812],{"class":54,"line":108},[52,50805,17755],{"class":66},[52,50807,70],{"class":231},[52,50809,723],{"class":58},[52,50811,28049],{"class":371},[52,50813,729],{"class":58},[52,50815,50816],{"class":54,"line":118},[52,50817,26724],{"class":58},[52,50819,50820,50822,50824],{"class":54,"line":594},[52,50821,2213],{"class":58},[52,50823,2216],{"class":371},[52,50825,105],{"class":58},[52,50827,50828,50830,50832],{"class":54,"line":600},[52,50829,2230],{"class":58},[52,50831,50707],{"class":371},[52,50833,77],{"class":58},[52,50835,50836,50838,50840],{"class":54,"line":606},[52,50837,121],{"class":58},[52,50839,63],{"class":371},[52,50841,77],{"class":58},[43,50843,50844],{"className":2507,"code":50785,"language":2509,"meta":48,"style":48},[31,50845,50846,50854,50860,50870,50874,50882,50890],{"__ignoreMap":48},[52,50847,50848,50850,50852],{"class":54,"line":55},[52,50849,59],{"class":58},[52,50851,63],{"class":371},[52,50853,77],{"class":58},[52,50855,50856,50858],{"class":54,"line":80},[52,50857,83],{"class":58},[52,50859,50746],{"class":371},[52,50861,50862,50864,50866,50868],{"class":54,"line":108},[52,50863,17755],{"class":66},[52,50865,24620],{"class":58},[52,50867,28049],{"class":371},[52,50869,729],{"class":58},[52,50871,50872],{"class":54,"line":118},[52,50873,26724],{"class":58},[52,50875,50876,50878,50880],{"class":54,"line":594},[52,50877,2213],{"class":58},[52,50879,2216],{"class":371},[52,50881,105],{"class":58},[52,50883,50884,50886,50888],{"class":54,"line":600},[52,50885,2230],{"class":58},[52,50887,50707],{"class":371},[52,50889,77],{"class":58},[52,50891,50892,50894,50896],{"class":54,"line":606},[52,50893,121],{"class":58},[52,50895,63],{"class":371},[52,50897,77],{"class":58},[43,50899,50900],{"className":419,"code":50785,"language":420,"meta":48,"style":48},[31,50901,50902,50910,50916,50928,50932,50940,50948],{"__ignoreMap":48},[52,50903,50904,50906,50908],{"class":54,"line":55},[52,50905,59],{"class":58},[52,50907,63],{"class":371},[52,50909,77],{"class":58},[52,50911,50912,50914],{"class":54,"line":80},[52,50913,83],{"class":58},[52,50915,50746],{"class":371},[52,50917,50918,50920,50922,50924,50926],{"class":54,"line":108},[52,50919,17755],{"class":66},[52,50921,70],{"class":231},[52,50923,723],{"class":58},[52,50925,28049],{"class":371},[52,50927,729],{"class":58},[52,50929,50930],{"class":54,"line":118},[52,50931,26724],{"class":58},[52,50933,50934,50936,50938],{"class":54,"line":594},[52,50935,2213],{"class":58},[52,50937,2216],{"class":371},[52,50939,105],{"class":58},[52,50941,50942,50944,50946],{"class":54,"line":600},[52,50943,2230],{"class":58},[52,50945,50707],{"class":371},[52,50947,77],{"class":58},[52,50949,50950,50952,50954],{"class":54,"line":606},[52,50951,121],{"class":58},[52,50953,63],{"class":371},[52,50955,77],{"class":58},[43,50957,50959],{"className":222,"code":50958,"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,50960,50961,50971,50975,50989,50993,51006,51014,51018,51022],{"__ignoreMap":48},[52,50962,50963,50965,50967,50969],{"class":54,"line":55},[52,50964,232],{"class":231},[52,50966,9005],{"class":58},[52,50968,238],{"class":231},[52,50970,9010],{"class":73},[52,50972,50973],{"class":54,"line":80},[52,50974,597],{"emptyLinePlaceholder":171},[52,50976,50977,50979,50981,50983,50985,50987],{"class":54,"line":108},[52,50978,1721],{"class":231},[52,50980,1724],{"class":371},[52,50982,1727],{"class":231},[52,50984,1730],{"class":231},[52,50986,1733],{"class":66},[52,50988,1736],{"class":58},[52,50990,50991],{"class":54,"line":118},[52,50992,1751],{"class":58},[52,50994,50995,50997,51000,51002,51004],{"class":54,"line":594},[52,50996,1756],{"class":58},[52,50998,50999],{"class":73},"'TiltShift'",[52,51001,26969],{"class":58},[52,51003,28049],{"class":371},[52,51005,5033],{"class":58},[52,51007,51008,51010,51012],{"class":54,"line":600},[52,51009,4501],{"class":58},[52,51011,2869],{"class":73},[52,51013,2129],{"class":58},[52,51015,51016],{"class":54,"line":606},[52,51017,4518],{"class":58},[52,51019,51020],{"class":54,"line":653},[52,51021,1773],{"class":58},[52,51023,51024],{"class":54,"line":662},[52,51025,1778],{"class":58},[156,51027,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51029},[51030,51031],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/tiltshift",{"title":50707,"description":50715},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":51038,"title":51039,"body":51040,"category":28546,"componentType":20623,"description":51047,"extension":168,"meta":51355,"navigation":171,"path":51356,"requiresChild":171,"seo":51357,"stem":51358,"__hash__":51359},"components/docs/components/Tint.md","Tint",{"type":8,"value":51041,"toc":51351},[51042,51045,51048,51050,51052,51055,51057,51349],[11,51043,51039],{"id":51044},"tint",[15,51046,51047],{},"Apply a color tint to the image",[26676,51049],{"component":51039},[23,51051,26680],{"id":21278},[26682,51053],{":props":51054},"[{\"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,51056,26688],{"id":26687},[217,51058,51059,51116,51170,51224,51278],{":tabs":1543},[43,51060,51062],{"className":45,"code":51061,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,51063,51064,51072,51079,51088,51092,51100,51108],{"__ignoreMap":48},[52,51065,51066,51068,51070],{"class":54,"line":55},[52,51067,59],{"class":58},[52,51069,63],{"class":62},[52,51071,77],{"class":58},[52,51073,51074,51076],{"class":54,"line":80},[52,51075,83],{"class":58},[52,51077,51078],{"class":62},"Tint\n",[52,51080,51081,51083,51085],{"class":54,"line":108},[52,51082,7125],{"class":66},[52,51084,70],{"class":58},[52,51086,51087],{"class":73},"\"#ff8800\"\n",[52,51089,51090],{"class":54,"line":118},[52,51091,26724],{"class":58},[52,51093,51094,51096,51098],{"class":54,"line":594},[52,51095,2213],{"class":58},[52,51097,2216],{"class":62},[52,51099,105],{"class":58},[52,51101,51102,51104,51106],{"class":54,"line":600},[52,51103,2230],{"class":58},[52,51105,51039],{"class":62},[52,51107,77],{"class":58},[52,51109,51110,51112,51114],{"class":54,"line":606},[52,51111,121],{"class":58},[52,51113,63],{"class":62},[52,51115,77],{"class":58},[43,51117,51118],{"className":360,"code":51061,"language":362,"meta":48,"style":48},[31,51119,51120,51128,51134,51142,51146,51154,51162],{"__ignoreMap":48},[52,51121,51122,51124,51126],{"class":54,"line":55},[52,51123,59],{"class":58},[52,51125,63],{"class":371},[52,51127,77],{"class":58},[52,51129,51130,51132],{"class":54,"line":80},[52,51131,83],{"class":58},[52,51133,51078],{"class":371},[52,51135,51136,51138,51140],{"class":54,"line":108},[52,51137,7125],{"class":66},[52,51139,70],{"class":231},[52,51141,51087],{"class":73},[52,51143,51144],{"class":54,"line":118},[52,51145,26724],{"class":58},[52,51147,51148,51150,51152],{"class":54,"line":594},[52,51149,2213],{"class":58},[52,51151,2216],{"class":371},[52,51153,105],{"class":58},[52,51155,51156,51158,51160],{"class":54,"line":600},[52,51157,2230],{"class":58},[52,51159,51039],{"class":371},[52,51161,77],{"class":58},[52,51163,51164,51166,51168],{"class":54,"line":606},[52,51165,121],{"class":58},[52,51167,63],{"class":371},[52,51169,77],{"class":58},[43,51171,51172],{"className":2507,"code":51061,"language":2509,"meta":48,"style":48},[31,51173,51174,51182,51188,51196,51200,51208,51216],{"__ignoreMap":48},[52,51175,51176,51178,51180],{"class":54,"line":55},[52,51177,59],{"class":58},[52,51179,63],{"class":371},[52,51181,77],{"class":58},[52,51183,51184,51186],{"class":54,"line":80},[52,51185,83],{"class":58},[52,51187,51078],{"class":371},[52,51189,51190,51192,51194],{"class":54,"line":108},[52,51191,7125],{"class":66},[52,51193,70],{"class":58},[52,51195,51087],{"class":73},[52,51197,51198],{"class":54,"line":118},[52,51199,26724],{"class":58},[52,51201,51202,51204,51206],{"class":54,"line":594},[52,51203,2213],{"class":58},[52,51205,2216],{"class":371},[52,51207,105],{"class":58},[52,51209,51210,51212,51214],{"class":54,"line":600},[52,51211,2230],{"class":58},[52,51213,51039],{"class":371},[52,51215,77],{"class":58},[52,51217,51218,51220,51222],{"class":54,"line":606},[52,51219,121],{"class":58},[52,51221,63],{"class":371},[52,51223,77],{"class":58},[43,51225,51226],{"className":419,"code":51061,"language":420,"meta":48,"style":48},[31,51227,51228,51236,51242,51250,51254,51262,51270],{"__ignoreMap":48},[52,51229,51230,51232,51234],{"class":54,"line":55},[52,51231,59],{"class":58},[52,51233,63],{"class":371},[52,51235,77],{"class":58},[52,51237,51238,51240],{"class":54,"line":80},[52,51239,83],{"class":58},[52,51241,51078],{"class":371},[52,51243,51244,51246,51248],{"class":54,"line":108},[52,51245,7125],{"class":66},[52,51247,70],{"class":231},[52,51249,51087],{"class":73},[52,51251,51252],{"class":54,"line":118},[52,51253,26724],{"class":58},[52,51255,51256,51258,51260],{"class":54,"line":594},[52,51257,2213],{"class":58},[52,51259,2216],{"class":371},[52,51261,105],{"class":58},[52,51263,51264,51266,51268],{"class":54,"line":600},[52,51265,2230],{"class":58},[52,51267,51039],{"class":371},[52,51269,77],{"class":58},[52,51271,51272,51274,51276],{"class":54,"line":606},[52,51273,121],{"class":58},[52,51275,63],{"class":371},[52,51277,77],{"class":58},[43,51279,51281],{"className":222,"code":51280,"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,51282,51283,51293,51297,51311,51315,51329,51337,51341,51345],{"__ignoreMap":48},[52,51284,51285,51287,51289,51291],{"class":54,"line":55},[52,51286,232],{"class":231},[52,51288,9005],{"class":58},[52,51290,238],{"class":231},[52,51292,9010],{"class":73},[52,51294,51295],{"class":54,"line":80},[52,51296,597],{"emptyLinePlaceholder":171},[52,51298,51299,51301,51303,51305,51307,51309],{"class":54,"line":108},[52,51300,1721],{"class":231},[52,51302,1724],{"class":371},[52,51304,1727],{"class":231},[52,51306,1730],{"class":231},[52,51308,1733],{"class":66},[52,51310,1736],{"class":58},[52,51312,51313],{"class":54,"line":118},[52,51314,1751],{"class":58},[52,51316,51317,51319,51322,51324,51327],{"class":54,"line":594},[52,51318,1756],{"class":58},[52,51320,51321],{"class":73},"'Tint'",[52,51323,1762],{"class":58},[52,51325,51326],{"class":73},"'#ff8800'",[52,51328,5033],{"class":58},[52,51330,51331,51333,51335],{"class":54,"line":600},[52,51332,4501],{"class":58},[52,51334,2869],{"class":73},[52,51336,2129],{"class":58},[52,51338,51339],{"class":54,"line":606},[52,51340,4518],{"class":58},[52,51342,51343],{"class":54,"line":653},[52,51344,1773],{"class":58},[52,51346,51347],{"class":54,"line":662},[52,51348,1778],{"class":58},[156,51350,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51352},[51353,51354],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/tint",{"title":51039,"description":51047},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":51361,"title":51362,"body":51363,"category":30502,"componentType":20617,"description":51370,"extension":168,"meta":51600,"navigation":171,"path":51601,"requiresChild":27538,"seo":51602,"stem":51603,"__hash__":51604},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":51364,"toc":51596},[51365,51368,51371,51373,51375,51378,51380,51594],[11,51366,51362],{"id":51367},"trapezoid",[15,51369,51370],{},"Trapezoid with adjustable top and bottom widths and height",[26676,51372],{"component":51362},[23,51374,26680],{"id":21278},[26682,51376],{":props":51377},"[{\"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,51379,26688],{"id":26687},[217,51381,51382,51422,51460,51498,51536],{":tabs":1543},[43,51383,51385],{"className":45,"code":51384,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,51386,51387,51395,51402,51410,51414],{"__ignoreMap":48},[52,51388,51389,51391,51393],{"class":54,"line":55},[52,51390,59],{"class":58},[52,51392,63],{"class":62},[52,51394,77],{"class":58},[52,51396,51397,51399],{"class":54,"line":80},[52,51398,83],{"class":58},[52,51400,51401],{"class":62},"Trapezoid\n",[52,51403,51404,51406,51408],{"class":54,"line":108},[52,51405,7125],{"class":66},[52,51407,70],{"class":58},[52,51409,7081],{"class":73},[52,51411,51412],{"class":54,"line":118},[52,51413,1224],{"class":58},[52,51415,51416,51418,51420],{"class":54,"line":594},[52,51417,121],{"class":58},[52,51419,63],{"class":62},[52,51421,77],{"class":58},[43,51423,51424],{"className":360,"code":51384,"language":362,"meta":48,"style":48},[31,51425,51426,51434,51440,51448,51452],{"__ignoreMap":48},[52,51427,51428,51430,51432],{"class":54,"line":55},[52,51429,59],{"class":58},[52,51431,63],{"class":371},[52,51433,77],{"class":58},[52,51435,51436,51438],{"class":54,"line":80},[52,51437,83],{"class":58},[52,51439,51401],{"class":371},[52,51441,51442,51444,51446],{"class":54,"line":108},[52,51443,7125],{"class":66},[52,51445,70],{"class":231},[52,51447,7081],{"class":73},[52,51449,51450],{"class":54,"line":118},[52,51451,1224],{"class":58},[52,51453,51454,51456,51458],{"class":54,"line":594},[52,51455,121],{"class":58},[52,51457,63],{"class":371},[52,51459,77],{"class":58},[43,51461,51462],{"className":2507,"code":51384,"language":2509,"meta":48,"style":48},[31,51463,51464,51472,51478,51486,51490],{"__ignoreMap":48},[52,51465,51466,51468,51470],{"class":54,"line":55},[52,51467,59],{"class":58},[52,51469,63],{"class":371},[52,51471,77],{"class":58},[52,51473,51474,51476],{"class":54,"line":80},[52,51475,83],{"class":58},[52,51477,51401],{"class":371},[52,51479,51480,51482,51484],{"class":54,"line":108},[52,51481,7125],{"class":66},[52,51483,70],{"class":58},[52,51485,7081],{"class":73},[52,51487,51488],{"class":54,"line":118},[52,51489,1224],{"class":58},[52,51491,51492,51494,51496],{"class":54,"line":594},[52,51493,121],{"class":58},[52,51495,63],{"class":371},[52,51497,77],{"class":58},[43,51499,51500],{"className":419,"code":51384,"language":420,"meta":48,"style":48},[31,51501,51502,51510,51516,51524,51528],{"__ignoreMap":48},[52,51503,51504,51506,51508],{"class":54,"line":55},[52,51505,59],{"class":58},[52,51507,63],{"class":371},[52,51509,77],{"class":58},[52,51511,51512,51514],{"class":54,"line":80},[52,51513,83],{"class":58},[52,51515,51401],{"class":371},[52,51517,51518,51520,51522],{"class":54,"line":108},[52,51519,7125],{"class":66},[52,51521,70],{"class":231},[52,51523,7081],{"class":73},[52,51525,51526],{"class":54,"line":118},[52,51527,1224],{"class":58},[52,51529,51530,51532,51534],{"class":54,"line":594},[52,51531,121],{"class":58},[52,51533,63],{"class":371},[52,51535,77],{"class":58},[43,51537,51539],{"className":222,"code":51538,"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,51540,51541,51551,51555,51569,51573,51586,51590],{"__ignoreMap":48},[52,51542,51543,51545,51547,51549],{"class":54,"line":55},[52,51544,232],{"class":231},[52,51546,9005],{"class":58},[52,51548,238],{"class":231},[52,51550,9010],{"class":73},[52,51552,51553],{"class":54,"line":80},[52,51554,597],{"emptyLinePlaceholder":171},[52,51556,51557,51559,51561,51563,51565,51567],{"class":54,"line":108},[52,51558,1721],{"class":231},[52,51560,1724],{"class":371},[52,51562,1727],{"class":231},[52,51564,1730],{"class":231},[52,51566,1733],{"class":66},[52,51568,1736],{"class":58},[52,51570,51571],{"class":54,"line":118},[52,51572,1751],{"class":58},[52,51574,51575,51577,51580,51582,51584],{"class":54,"line":594},[52,51576,1756],{"class":58},[52,51578,51579],{"class":73},"'Trapezoid'",[52,51581,1762],{"class":58},[52,51583,7660],{"class":73},[52,51585,1768],{"class":58},[52,51587,51588],{"class":54,"line":600},[52,51589,1773],{"class":58},[52,51591,51592],{"class":54,"line":606},[52,51593,1778],{"class":58},[156,51595,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51597},[51598,51599],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/trapezoid",{"title":51362,"description":51370},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":51606,"title":51607,"body":51608,"category":28546,"componentType":20623,"description":51615,"extension":168,"meta":51876,"navigation":171,"path":51877,"requiresChild":171,"seo":51878,"stem":51879,"__hash__":51880},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":51609,"toc":51872},[51610,51613,51616,51618,51620,51623,51625,51870],[11,51611,51607],{"id":51612},"tritone",[15,51614,51615],{},"Map colors to three tones: shadows, midtones, highlights",[26676,51617],{"component":51607},[23,51619,26680],{"id":21278},[26682,51621],{":props":51622},"[{\"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,51624,26688],{"id":26687},[217,51626,51627,51672,51716,51760,51804],{":tabs":1543},[43,51628,51630],{"className":45,"code":51629,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,51631,51632,51640,51648,51656,51664],{"__ignoreMap":48},[52,51633,51634,51636,51638],{"class":54,"line":55},[52,51635,59],{"class":58},[52,51637,63],{"class":62},[52,51639,77],{"class":58},[52,51641,51642,51644,51646],{"class":54,"line":80},[52,51643,83],{"class":58},[52,51645,51607],{"class":62},[52,51647,77],{"class":58},[52,51649,51650,51652,51654],{"class":54,"line":108},[52,51651,2213],{"class":58},[52,51653,2216],{"class":62},[52,51655,105],{"class":58},[52,51657,51658,51660,51662],{"class":54,"line":118},[52,51659,2230],{"class":58},[52,51661,51607],{"class":62},[52,51663,77],{"class":58},[52,51665,51666,51668,51670],{"class":54,"line":594},[52,51667,121],{"class":58},[52,51669,63],{"class":62},[52,51671,77],{"class":58},[43,51673,51674],{"className":360,"code":51629,"language":362,"meta":48,"style":48},[31,51675,51676,51684,51692,51700,51708],{"__ignoreMap":48},[52,51677,51678,51680,51682],{"class":54,"line":55},[52,51679,59],{"class":58},[52,51681,63],{"class":371},[52,51683,77],{"class":58},[52,51685,51686,51688,51690],{"class":54,"line":80},[52,51687,83],{"class":58},[52,51689,51607],{"class":371},[52,51691,77],{"class":58},[52,51693,51694,51696,51698],{"class":54,"line":108},[52,51695,2213],{"class":58},[52,51697,2216],{"class":371},[52,51699,105],{"class":58},[52,51701,51702,51704,51706],{"class":54,"line":118},[52,51703,2230],{"class":58},[52,51705,51607],{"class":371},[52,51707,77],{"class":58},[52,51709,51710,51712,51714],{"class":54,"line":594},[52,51711,121],{"class":58},[52,51713,63],{"class":371},[52,51715,77],{"class":58},[43,51717,51718],{"className":2507,"code":51629,"language":2509,"meta":48,"style":48},[31,51719,51720,51728,51736,51744,51752],{"__ignoreMap":48},[52,51721,51722,51724,51726],{"class":54,"line":55},[52,51723,59],{"class":58},[52,51725,63],{"class":371},[52,51727,77],{"class":58},[52,51729,51730,51732,51734],{"class":54,"line":80},[52,51731,83],{"class":58},[52,51733,51607],{"class":371},[52,51735,77],{"class":58},[52,51737,51738,51740,51742],{"class":54,"line":108},[52,51739,2213],{"class":58},[52,51741,2216],{"class":371},[52,51743,105],{"class":58},[52,51745,51746,51748,51750],{"class":54,"line":118},[52,51747,2230],{"class":58},[52,51749,51607],{"class":371},[52,51751,77],{"class":58},[52,51753,51754,51756,51758],{"class":54,"line":594},[52,51755,121],{"class":58},[52,51757,63],{"class":371},[52,51759,77],{"class":58},[43,51761,51762],{"className":419,"code":51629,"language":420,"meta":48,"style":48},[31,51763,51764,51772,51780,51788,51796],{"__ignoreMap":48},[52,51765,51766,51768,51770],{"class":54,"line":55},[52,51767,59],{"class":58},[52,51769,63],{"class":371},[52,51771,77],{"class":58},[52,51773,51774,51776,51778],{"class":54,"line":80},[52,51775,83],{"class":58},[52,51777,51607],{"class":371},[52,51779,77],{"class":58},[52,51781,51782,51784,51786],{"class":54,"line":108},[52,51783,2213],{"class":58},[52,51785,2216],{"class":371},[52,51787,105],{"class":58},[52,51789,51790,51792,51794],{"class":54,"line":118},[52,51791,2230],{"class":58},[52,51793,51607],{"class":371},[52,51795,77],{"class":58},[52,51797,51798,51800,51802],{"class":54,"line":594},[52,51799,121],{"class":58},[52,51801,63],{"class":371},[52,51803,77],{"class":58},[43,51805,51807],{"className":222,"code":51806,"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,51808,51809,51819,51823,51837,51841,51850,51858,51862,51866],{"__ignoreMap":48},[52,51810,51811,51813,51815,51817],{"class":54,"line":55},[52,51812,232],{"class":231},[52,51814,9005],{"class":58},[52,51816,238],{"class":231},[52,51818,9010],{"class":73},[52,51820,51821],{"class":54,"line":80},[52,51822,597],{"emptyLinePlaceholder":171},[52,51824,51825,51827,51829,51831,51833,51835],{"class":54,"line":108},[52,51826,1721],{"class":231},[52,51828,1724],{"class":371},[52,51830,1727],{"class":231},[52,51832,1730],{"class":231},[52,51834,1733],{"class":66},[52,51836,1736],{"class":58},[52,51838,51839],{"class":54,"line":118},[52,51840,1751],{"class":58},[52,51842,51843,51845,51848],{"class":54,"line":594},[52,51844,1756],{"class":58},[52,51846,51847],{"class":73},"'Tritone'",[52,51849,4496],{"class":58},[52,51851,51852,51854,51856],{"class":54,"line":600},[52,51853,4501],{"class":58},[52,51855,2869],{"class":73},[52,51857,2129],{"class":58},[52,51859,51860],{"class":54,"line":606},[52,51861,4518],{"class":58},[52,51863,51864],{"class":54,"line":653},[52,51865,1773],{"class":58},[52,51867,51868],{"class":54,"line":662},[52,51869,1778],{"class":58},[156,51871,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":51873},[51874,51875],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/tritone",{"title":51607,"description":51615},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":51882,"title":51883,"body":51884,"category":27535,"componentType":20617,"description":51891,"extension":168,"meta":52076,"navigation":171,"path":52077,"requiresChild":27538,"seo":52078,"stem":52079,"__hash__":52080},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":51885,"toc":52072},[51886,51889,51892,51894,51896,51899,51901,52070],[11,51887,51883],{"id":51888},"truchet",[15,51890,51891],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26676,51893],{"component":51883},[23,51895,26680],{"id":21278},[26682,51897],{":props":51898},"[{\"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,51900,26688],{"id":26687},[217,51902,51903,51932,51960,51988,52016],{":tabs":1543},[43,51904,51906],{"className":45,"code":51905,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,51907,51908,51916,51924],{"__ignoreMap":48},[52,51909,51910,51912,51914],{"class":54,"line":55},[52,51911,59],{"class":58},[52,51913,63],{"class":62},[52,51915,77],{"class":58},[52,51917,51918,51920,51922],{"class":54,"line":80},[52,51919,83],{"class":58},[52,51921,51883],{"class":62},[52,51923,105],{"class":58},[52,51925,51926,51928,51930],{"class":54,"line":108},[52,51927,121],{"class":58},[52,51929,63],{"class":62},[52,51931,77],{"class":58},[43,51933,51934],{"className":360,"code":51905,"language":362,"meta":48,"style":48},[31,51935,51936,51944,51952],{"__ignoreMap":48},[52,51937,51938,51940,51942],{"class":54,"line":55},[52,51939,59],{"class":58},[52,51941,63],{"class":371},[52,51943,77],{"class":58},[52,51945,51946,51948,51950],{"class":54,"line":80},[52,51947,83],{"class":58},[52,51949,51883],{"class":371},[52,51951,105],{"class":58},[52,51953,51954,51956,51958],{"class":54,"line":108},[52,51955,121],{"class":58},[52,51957,63],{"class":371},[52,51959,77],{"class":58},[43,51961,51962],{"className":2507,"code":51905,"language":2509,"meta":48,"style":48},[31,51963,51964,51972,51980],{"__ignoreMap":48},[52,51965,51966,51968,51970],{"class":54,"line":55},[52,51967,59],{"class":58},[52,51969,63],{"class":371},[52,51971,77],{"class":58},[52,51973,51974,51976,51978],{"class":54,"line":80},[52,51975,83],{"class":58},[52,51977,51883],{"class":371},[52,51979,105],{"class":58},[52,51981,51982,51984,51986],{"class":54,"line":108},[52,51983,121],{"class":58},[52,51985,63],{"class":371},[52,51987,77],{"class":58},[43,51989,51990],{"className":419,"code":51905,"language":420,"meta":48,"style":48},[31,51991,51992,52000,52008],{"__ignoreMap":48},[52,51993,51994,51996,51998],{"class":54,"line":55},[52,51995,59],{"class":58},[52,51997,63],{"class":371},[52,51999,77],{"class":58},[52,52001,52002,52004,52006],{"class":54,"line":80},[52,52003,83],{"class":58},[52,52005,51883],{"class":371},[52,52007,105],{"class":58},[52,52009,52010,52012,52014],{"class":54,"line":108},[52,52011,121],{"class":58},[52,52013,63],{"class":371},[52,52015,77],{"class":58},[43,52017,52019],{"className":222,"code":52018,"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,52020,52021,52031,52035,52049,52053,52062,52066],{"__ignoreMap":48},[52,52022,52023,52025,52027,52029],{"class":54,"line":55},[52,52024,232],{"class":231},[52,52026,9005],{"class":58},[52,52028,238],{"class":231},[52,52030,9010],{"class":73},[52,52032,52033],{"class":54,"line":80},[52,52034,597],{"emptyLinePlaceholder":171},[52,52036,52037,52039,52041,52043,52045,52047],{"class":54,"line":108},[52,52038,1721],{"class":231},[52,52040,1724],{"class":371},[52,52042,1727],{"class":231},[52,52044,1730],{"class":231},[52,52046,1733],{"class":66},[52,52048,1736],{"class":58},[52,52050,52051],{"class":54,"line":118},[52,52052,1751],{"class":58},[52,52054,52055,52057,52060],{"class":54,"line":594},[52,52056,1756],{"class":58},[52,52058,52059],{"class":73},"'Truchet'",[52,52061,2129],{"class":58},[52,52063,52064],{"class":54,"line":600},[52,52065,1773],{"class":58},[52,52067,52068],{"class":54,"line":606},[52,52069,1778],{"class":58},[156,52071,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":52073},[52074,52075],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/truchet",{"title":51883,"description":51891},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":52082,"title":52083,"body":52084,"category":28880,"componentType":20623,"description":52091,"extension":168,"meta":52408,"navigation":171,"path":52409,"requiresChild":171,"seo":52410,"stem":52411,"__hash__":52412},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":52085,"toc":52404},[52086,52089,52092,52094,52096,52099,52101,52402],[11,52087,52083],{"id":52088},"twirl",[15,52090,52091],{},"Rotate and twist content around a center point",[26676,52093],{"component":52083},[23,52095,26680],{"id":21278},[26682,52097],{":props":52098},"[{\"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,52100,26688],{"id":26687},[217,52102,52103,52159,52218,52274,52332],{":tabs":1543},[43,52104,52106],{"className":45,"code":52105,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,52107,52108,52116,52123,52131,52135,52143,52151],{"__ignoreMap":48},[52,52109,52110,52112,52114],{"class":54,"line":55},[52,52111,59],{"class":58},[52,52113,63],{"class":62},[52,52115,77],{"class":58},[52,52117,52118,52120],{"class":54,"line":80},[52,52119,83],{"class":58},[52,52121,52122],{"class":62},"Twirl\n",[52,52124,52125,52127,52129],{"class":54,"line":108},[52,52126,17644],{"class":66},[52,52128,70],{"class":58},[52,52130,28602],{"class":73},[52,52132,52133],{"class":54,"line":118},[52,52134,26724],{"class":58},[52,52136,52137,52139,52141],{"class":54,"line":594},[52,52138,2213],{"class":58},[52,52140,2216],{"class":62},[52,52142,105],{"class":58},[52,52144,52145,52147,52149],{"class":54,"line":600},[52,52146,2230],{"class":58},[52,52148,52083],{"class":62},[52,52150,77],{"class":58},[52,52152,52153,52155,52157],{"class":54,"line":606},[52,52154,121],{"class":58},[52,52156,63],{"class":62},[52,52158,77],{"class":58},[43,52160,52162],{"className":360,"code":52161,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,52163,52164,52172,52178,52190,52194,52202,52210],{"__ignoreMap":48},[52,52165,52166,52168,52170],{"class":54,"line":55},[52,52167,59],{"class":58},[52,52169,63],{"class":371},[52,52171,77],{"class":58},[52,52173,52174,52176],{"class":54,"line":80},[52,52175,83],{"class":58},[52,52177,52122],{"class":371},[52,52179,52180,52182,52184,52186,52188],{"class":54,"line":108},[52,52181,17755],{"class":66},[52,52183,70],{"class":231},[52,52185,723],{"class":58},[52,52187,6165],{"class":371},[52,52189,729],{"class":58},[52,52191,52192],{"class":54,"line":118},[52,52193,26724],{"class":58},[52,52195,52196,52198,52200],{"class":54,"line":594},[52,52197,2213],{"class":58},[52,52199,2216],{"class":371},[52,52201,105],{"class":58},[52,52203,52204,52206,52208],{"class":54,"line":600},[52,52205,2230],{"class":58},[52,52207,52083],{"class":371},[52,52209,77],{"class":58},[52,52211,52212,52214,52216],{"class":54,"line":606},[52,52213,121],{"class":58},[52,52215,63],{"class":371},[52,52217,77],{"class":58},[43,52219,52220],{"className":2507,"code":52161,"language":2509,"meta":48,"style":48},[31,52221,52222,52230,52236,52246,52250,52258,52266],{"__ignoreMap":48},[52,52223,52224,52226,52228],{"class":54,"line":55},[52,52225,59],{"class":58},[52,52227,63],{"class":371},[52,52229,77],{"class":58},[52,52231,52232,52234],{"class":54,"line":80},[52,52233,83],{"class":58},[52,52235,52122],{"class":371},[52,52237,52238,52240,52242,52244],{"class":54,"line":108},[52,52239,17755],{"class":66},[52,52241,24620],{"class":58},[52,52243,6165],{"class":371},[52,52245,729],{"class":58},[52,52247,52248],{"class":54,"line":118},[52,52249,26724],{"class":58},[52,52251,52252,52254,52256],{"class":54,"line":594},[52,52253,2213],{"class":58},[52,52255,2216],{"class":371},[52,52257,105],{"class":58},[52,52259,52260,52262,52264],{"class":54,"line":600},[52,52261,2230],{"class":58},[52,52263,52083],{"class":371},[52,52265,77],{"class":58},[52,52267,52268,52270,52272],{"class":54,"line":606},[52,52269,121],{"class":58},[52,52271,63],{"class":371},[52,52273,77],{"class":58},[43,52275,52276],{"className":419,"code":52161,"language":420,"meta":48,"style":48},[31,52277,52278,52286,52292,52304,52308,52316,52324],{"__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],{"class":54,"line":80},[52,52289,83],{"class":58},[52,52291,52122],{"class":371},[52,52293,52294,52296,52298,52300,52302],{"class":54,"line":108},[52,52295,17755],{"class":66},[52,52297,70],{"class":231},[52,52299,723],{"class":58},[52,52301,6165],{"class":371},[52,52303,729],{"class":58},[52,52305,52306],{"class":54,"line":118},[52,52307,26724],{"class":58},[52,52309,52310,52312,52314],{"class":54,"line":594},[52,52311,2213],{"class":58},[52,52313,2216],{"class":371},[52,52315,105],{"class":58},[52,52317,52318,52320,52322],{"class":54,"line":600},[52,52319,2230],{"class":58},[52,52321,52083],{"class":371},[52,52323,77],{"class":58},[52,52325,52326,52328,52330],{"class":54,"line":606},[52,52327,121],{"class":58},[52,52329,63],{"class":371},[52,52331,77],{"class":58},[43,52333,52335],{"className":222,"code":52334,"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,52336,52337,52347,52351,52365,52369,52382,52390,52394,52398],{"__ignoreMap":48},[52,52338,52339,52341,52343,52345],{"class":54,"line":55},[52,52340,232],{"class":231},[52,52342,9005],{"class":58},[52,52344,238],{"class":231},[52,52346,9010],{"class":73},[52,52348,52349],{"class":54,"line":80},[52,52350,597],{"emptyLinePlaceholder":171},[52,52352,52353,52355,52357,52359,52361,52363],{"class":54,"line":108},[52,52354,1721],{"class":231},[52,52356,1724],{"class":371},[52,52358,1727],{"class":231},[52,52360,1730],{"class":231},[52,52362,1733],{"class":66},[52,52364,1736],{"class":58},[52,52366,52367],{"class":54,"line":118},[52,52368,1751],{"class":58},[52,52370,52371,52373,52376,52378,52380],{"class":54,"line":594},[52,52372,1756],{"class":58},[52,52374,52375],{"class":73},"'Twirl'",[52,52377,26969],{"class":58},[52,52379,6165],{"class":371},[52,52381,5033],{"class":58},[52,52383,52384,52386,52388],{"class":54,"line":600},[52,52385,4501],{"class":58},[52,52387,2869],{"class":73},[52,52389,2129],{"class":58},[52,52391,52392],{"class":54,"line":606},[52,52393,4518],{"class":58},[52,52395,52396],{"class":54,"line":653},[52,52397,1773],{"class":58},[52,52399,52400],{"class":54,"line":662},[52,52401,1778],{"class":58},[156,52403,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52405},[52406,52407],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/twirl",{"title":52083,"description":52091},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":52414,"title":52415,"body":52416,"category":30502,"componentType":20617,"description":52423,"extension":168,"meta":52700,"navigation":171,"path":52701,"requiresChild":27538,"seo":52702,"stem":52703,"__hash__":52704},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":52417,"toc":52696},[52418,52421,52424,52426,52428,52431,52433,52694],[11,52419,52415],{"id":52420},"vesica",[15,52422,52423],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26676,52425],{"component":52415},[23,52427,26680],{"id":21278},[26682,52429],{":props":52430},"[{\"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,52432,26688],{"id":26687},[217,52434,52435,52483,52534,52582,52632],{":tabs":1543},[43,52436,52438],{"className":45,"code":52437,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,52439,52440,52448,52455,52463,52471,52475],{"__ignoreMap":48},[52,52441,52442,52444,52446],{"class":54,"line":55},[52,52443,59],{"class":58},[52,52445,63],{"class":62},[52,52447,77],{"class":58},[52,52449,52450,52452],{"class":54,"line":80},[52,52451,83],{"class":58},[52,52453,52454],{"class":62},"Vesica\n",[52,52456,52457,52459,52461],{"class":54,"line":108},[52,52458,7125],{"class":66},[52,52460,70],{"class":58},[52,52462,7081],{"class":73},[52,52464,52465,52467,52469],{"class":54,"line":118},[52,52466,14675],{"class":66},[52,52468,70],{"class":58},[52,52470,31667],{"class":73},[52,52472,52473],{"class":54,"line":594},[52,52474,1224],{"class":58},[52,52476,52477,52479,52481],{"class":54,"line":600},[52,52478,121],{"class":58},[52,52480,63],{"class":62},[52,52482,77],{"class":58},[43,52484,52486],{"className":360,"code":52485,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,52487,52488,52496,52502,52510,52522,52526],{"__ignoreMap":48},[52,52489,52490,52492,52494],{"class":54,"line":55},[52,52491,59],{"class":58},[52,52493,63],{"class":371},[52,52495,77],{"class":58},[52,52497,52498,52500],{"class":54,"line":80},[52,52499,83],{"class":58},[52,52501,52454],{"class":371},[52,52503,52504,52506,52508],{"class":54,"line":108},[52,52505,7125],{"class":66},[52,52507,70],{"class":231},[52,52509,7081],{"class":73},[52,52511,52512,52514,52516,52518,52520],{"class":54,"line":118},[52,52513,7135],{"class":66},[52,52515,70],{"class":231},[52,52517,723],{"class":58},[52,52519,18404],{"class":371},[52,52521,729],{"class":58},[52,52523,52524],{"class":54,"line":594},[52,52525,1224],{"class":58},[52,52527,52528,52530,52532],{"class":54,"line":600},[52,52529,121],{"class":58},[52,52531,63],{"class":371},[52,52533,77],{"class":58},[43,52535,52536],{"className":2507,"code":52485,"language":2509,"meta":48,"style":48},[31,52537,52538,52546,52552,52560,52570,52574],{"__ignoreMap":48},[52,52539,52540,52542,52544],{"class":54,"line":55},[52,52541,59],{"class":58},[52,52543,63],{"class":371},[52,52545,77],{"class":58},[52,52547,52548,52550],{"class":54,"line":80},[52,52549,83],{"class":58},[52,52551,52454],{"class":371},[52,52553,52554,52556,52558],{"class":54,"line":108},[52,52555,7125],{"class":66},[52,52557,70],{"class":58},[52,52559,7081],{"class":73},[52,52561,52562,52564,52566,52568],{"class":54,"line":118},[52,52563,7135],{"class":66},[52,52565,24620],{"class":58},[52,52567,18404],{"class":371},[52,52569,729],{"class":58},[52,52571,52572],{"class":54,"line":594},[52,52573,1224],{"class":58},[52,52575,52576,52578,52580],{"class":54,"line":600},[52,52577,121],{"class":58},[52,52579,63],{"class":371},[52,52581,77],{"class":58},[43,52583,52584],{"className":419,"code":52485,"language":420,"meta":48,"style":48},[31,52585,52586,52594,52600,52608,52620,52624],{"__ignoreMap":48},[52,52587,52588,52590,52592],{"class":54,"line":55},[52,52589,59],{"class":58},[52,52591,63],{"class":371},[52,52593,77],{"class":58},[52,52595,52596,52598],{"class":54,"line":80},[52,52597,83],{"class":58},[52,52599,52454],{"class":371},[52,52601,52602,52604,52606],{"class":54,"line":108},[52,52603,7125],{"class":66},[52,52605,70],{"class":231},[52,52607,7081],{"class":73},[52,52609,52610,52612,52614,52616,52618],{"class":54,"line":118},[52,52611,7135],{"class":66},[52,52613,70],{"class":231},[52,52615,723],{"class":58},[52,52617,18404],{"class":371},[52,52619,729],{"class":58},[52,52621,52622],{"class":54,"line":594},[52,52623,1224],{"class":58},[52,52625,52626,52628,52630],{"class":54,"line":600},[52,52627,121],{"class":58},[52,52629,63],{"class":371},[52,52631,77],{"class":58},[43,52633,52635],{"className":222,"code":52634,"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,52636,52637,52647,52651,52665,52669,52686,52690],{"__ignoreMap":48},[52,52638,52639,52641,52643,52645],{"class":54,"line":55},[52,52640,232],{"class":231},[52,52642,9005],{"class":58},[52,52644,238],{"class":231},[52,52646,9010],{"class":73},[52,52648,52649],{"class":54,"line":80},[52,52650,597],{"emptyLinePlaceholder":171},[52,52652,52653,52655,52657,52659,52661,52663],{"class":54,"line":108},[52,52654,1721],{"class":231},[52,52656,1724],{"class":371},[52,52658,1727],{"class":231},[52,52660,1730],{"class":231},[52,52662,1733],{"class":66},[52,52664,1736],{"class":58},[52,52666,52667],{"class":54,"line":118},[52,52668,1751],{"class":58},[52,52670,52671,52673,52676,52678,52680,52682,52684],{"class":54,"line":594},[52,52672,1756],{"class":58},[52,52674,52675],{"class":73},"'Vesica'",[52,52677,1762],{"class":58},[52,52679,7660],{"class":73},[52,52681,4052],{"class":58},[52,52683,18404],{"class":371},[52,52685,1768],{"class":58},[52,52687,52688],{"class":54,"line":600},[52,52689,1773],{"class":58},[52,52691,52692],{"class":54,"line":606},[52,52693,1778],{"class":58},[156,52695,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52697},[52698,52699],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/vesica",{"title":52415,"description":52423},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":52706,"title":52707,"body":52708,"category":28546,"componentType":20623,"description":52715,"extension":168,"meta":53033,"navigation":171,"path":53034,"requiresChild":171,"seo":53035,"stem":53036,"__hash__":53037},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":52709,"toc":53029},[52710,52713,52716,52718,52720,52723,52725,53027],[11,52711,52707],{"id":52712},"vibrance",[15,52714,52715],{},"Selective saturation adjustment protecting skin tones",[26676,52717],{"component":52707},[23,52719,26680],{"id":21278},[26682,52721],{":props":52722},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,52724,26688],{"id":26687},[217,52726,52727,52784,52843,52899,52957],{":tabs":1543},[43,52728,52730],{"className":45,"code":52729,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,52731,52732,52740,52747,52756,52760,52768,52776],{"__ignoreMap":48},[52,52733,52734,52736,52738],{"class":54,"line":55},[52,52735,59],{"class":58},[52,52737,63],{"class":62},[52,52739,77],{"class":58},[52,52741,52742,52744],{"class":54,"line":80},[52,52743,83],{"class":58},[52,52745,52746],{"class":62},"Vibrance\n",[52,52748,52749,52751,52753],{"class":54,"line":108},[52,52750,17644],{"class":66},[52,52752,70],{"class":58},[52,52754,52755],{"class":73},"\"0\"\n",[52,52757,52758],{"class":54,"line":118},[52,52759,26724],{"class":58},[52,52761,52762,52764,52766],{"class":54,"line":594},[52,52763,2213],{"class":58},[52,52765,2216],{"class":62},[52,52767,105],{"class":58},[52,52769,52770,52772,52774],{"class":54,"line":600},[52,52771,2230],{"class":58},[52,52773,52707],{"class":62},[52,52775,77],{"class":58},[52,52777,52778,52780,52782],{"class":54,"line":606},[52,52779,121],{"class":58},[52,52781,63],{"class":62},[52,52783,77],{"class":58},[43,52785,52787],{"className":360,"code":52786,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,52788,52789,52797,52803,52815,52819,52827,52835],{"__ignoreMap":48},[52,52790,52791,52793,52795],{"class":54,"line":55},[52,52792,59],{"class":58},[52,52794,63],{"class":371},[52,52796,77],{"class":58},[52,52798,52799,52801],{"class":54,"line":80},[52,52800,83],{"class":58},[52,52802,52746],{"class":371},[52,52804,52805,52807,52809,52811,52813],{"class":54,"line":108},[52,52806,17755],{"class":66},[52,52808,70],{"class":231},[52,52810,723],{"class":58},[52,52812,6161],{"class":371},[52,52814,729],{"class":58},[52,52816,52817],{"class":54,"line":118},[52,52818,26724],{"class":58},[52,52820,52821,52823,52825],{"class":54,"line":594},[52,52822,2213],{"class":58},[52,52824,2216],{"class":371},[52,52826,105],{"class":58},[52,52828,52829,52831,52833],{"class":54,"line":600},[52,52830,2230],{"class":58},[52,52832,52707],{"class":371},[52,52834,77],{"class":58},[52,52836,52837,52839,52841],{"class":54,"line":606},[52,52838,121],{"class":58},[52,52840,63],{"class":371},[52,52842,77],{"class":58},[43,52844,52845],{"className":2507,"code":52786,"language":2509,"meta":48,"style":48},[31,52846,52847,52855,52861,52871,52875,52883,52891],{"__ignoreMap":48},[52,52848,52849,52851,52853],{"class":54,"line":55},[52,52850,59],{"class":58},[52,52852,63],{"class":371},[52,52854,77],{"class":58},[52,52856,52857,52859],{"class":54,"line":80},[52,52858,83],{"class":58},[52,52860,52746],{"class":371},[52,52862,52863,52865,52867,52869],{"class":54,"line":108},[52,52864,17755],{"class":66},[52,52866,24620],{"class":58},[52,52868,6161],{"class":371},[52,52870,729],{"class":58},[52,52872,52873],{"class":54,"line":118},[52,52874,26724],{"class":58},[52,52876,52877,52879,52881],{"class":54,"line":594},[52,52878,2213],{"class":58},[52,52880,2216],{"class":371},[52,52882,105],{"class":58},[52,52884,52885,52887,52889],{"class":54,"line":600},[52,52886,2230],{"class":58},[52,52888,52707],{"class":371},[52,52890,77],{"class":58},[52,52892,52893,52895,52897],{"class":54,"line":606},[52,52894,121],{"class":58},[52,52896,63],{"class":371},[52,52898,77],{"class":58},[43,52900,52901],{"className":419,"code":52786,"language":420,"meta":48,"style":48},[31,52902,52903,52911,52917,52929,52933,52941,52949],{"__ignoreMap":48},[52,52904,52905,52907,52909],{"class":54,"line":55},[52,52906,59],{"class":58},[52,52908,63],{"class":371},[52,52910,77],{"class":58},[52,52912,52913,52915],{"class":54,"line":80},[52,52914,83],{"class":58},[52,52916,52746],{"class":371},[52,52918,52919,52921,52923,52925,52927],{"class":54,"line":108},[52,52920,17755],{"class":66},[52,52922,70],{"class":231},[52,52924,723],{"class":58},[52,52926,6161],{"class":371},[52,52928,729],{"class":58},[52,52930,52931],{"class":54,"line":118},[52,52932,26724],{"class":58},[52,52934,52935,52937,52939],{"class":54,"line":594},[52,52936,2213],{"class":58},[52,52938,2216],{"class":371},[52,52940,105],{"class":58},[52,52942,52943,52945,52947],{"class":54,"line":600},[52,52944,2230],{"class":58},[52,52946,52707],{"class":371},[52,52948,77],{"class":58},[52,52950,52951,52953,52955],{"class":54,"line":606},[52,52952,121],{"class":58},[52,52954,63],{"class":371},[52,52956,77],{"class":58},[43,52958,52960],{"className":222,"code":52959,"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,52961,52962,52972,52976,52990,52994,53007,53015,53019,53023],{"__ignoreMap":48},[52,52963,52964,52966,52968,52970],{"class":54,"line":55},[52,52965,232],{"class":231},[52,52967,9005],{"class":58},[52,52969,238],{"class":231},[52,52971,9010],{"class":73},[52,52973,52974],{"class":54,"line":80},[52,52975,597],{"emptyLinePlaceholder":171},[52,52977,52978,52980,52982,52984,52986,52988],{"class":54,"line":108},[52,52979,1721],{"class":231},[52,52981,1724],{"class":371},[52,52983,1727],{"class":231},[52,52985,1730],{"class":231},[52,52987,1733],{"class":66},[52,52989,1736],{"class":58},[52,52991,52992],{"class":54,"line":118},[52,52993,1751],{"class":58},[52,52995,52996,52998,53001,53003,53005],{"class":54,"line":594},[52,52997,1756],{"class":58},[52,52999,53000],{"class":73},"'Vibrance'",[52,53002,26969],{"class":58},[52,53004,6161],{"class":371},[52,53006,5033],{"class":58},[52,53008,53009,53011,53013],{"class":54,"line":600},[52,53010,4501],{"class":58},[52,53012,2869],{"class":73},[52,53014,2129],{"class":58},[52,53016,53017],{"class":54,"line":606},[52,53018,4518],{"class":58},[52,53020,53021],{"class":54,"line":653},[52,53022,1773],{"class":58},[52,53024,53025],{"class":54,"line":662},[52,53026,1778],{"class":58},[156,53028,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53030},[53031,53032],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/vibrance",{"title":52707,"description":52715},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":53039,"title":53040,"body":53041,"category":27535,"componentType":20617,"description":53048,"extension":168,"meta":53233,"navigation":171,"path":53234,"requiresChild":27538,"seo":53235,"stem":53236,"__hash__":53237},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":53042,"toc":53229},[53043,53046,53049,53051,53053,53056,53058,53227],[11,53044,53040],{"id":53045},"videotexture",[15,53047,53048],{},"Display a video with customizable playback and object-fit modes",[26676,53050],{"component":53040},[23,53052,26680],{"id":21278},[26682,53054],{":props":53055},"[{\"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,53057,26688],{"id":26687},[217,53059,53060,53089,53117,53145,53173],{":tabs":1543},[43,53061,53063],{"className":45,"code":53062,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,53064,53065,53073,53081],{"__ignoreMap":48},[52,53066,53067,53069,53071],{"class":54,"line":55},[52,53068,59],{"class":58},[52,53070,63],{"class":62},[52,53072,77],{"class":58},[52,53074,53075,53077,53079],{"class":54,"line":80},[52,53076,83],{"class":58},[52,53078,53040],{"class":62},[52,53080,105],{"class":58},[52,53082,53083,53085,53087],{"class":54,"line":108},[52,53084,121],{"class":58},[52,53086,63],{"class":62},[52,53088,77],{"class":58},[43,53090,53091],{"className":360,"code":53062,"language":362,"meta":48,"style":48},[31,53092,53093,53101,53109],{"__ignoreMap":48},[52,53094,53095,53097,53099],{"class":54,"line":55},[52,53096,59],{"class":58},[52,53098,63],{"class":371},[52,53100,77],{"class":58},[52,53102,53103,53105,53107],{"class":54,"line":80},[52,53104,83],{"class":58},[52,53106,53040],{"class":371},[52,53108,105],{"class":58},[52,53110,53111,53113,53115],{"class":54,"line":108},[52,53112,121],{"class":58},[52,53114,63],{"class":371},[52,53116,77],{"class":58},[43,53118,53119],{"className":2507,"code":53062,"language":2509,"meta":48,"style":48},[31,53120,53121,53129,53137],{"__ignoreMap":48},[52,53122,53123,53125,53127],{"class":54,"line":55},[52,53124,59],{"class":58},[52,53126,63],{"class":371},[52,53128,77],{"class":58},[52,53130,53131,53133,53135],{"class":54,"line":80},[52,53132,83],{"class":58},[52,53134,53040],{"class":371},[52,53136,105],{"class":58},[52,53138,53139,53141,53143],{"class":54,"line":108},[52,53140,121],{"class":58},[52,53142,63],{"class":371},[52,53144,77],{"class":58},[43,53146,53147],{"className":419,"code":53062,"language":420,"meta":48,"style":48},[31,53148,53149,53157,53165],{"__ignoreMap":48},[52,53150,53151,53153,53155],{"class":54,"line":55},[52,53152,59],{"class":58},[52,53154,63],{"class":371},[52,53156,77],{"class":58},[52,53158,53159,53161,53163],{"class":54,"line":80},[52,53160,83],{"class":58},[52,53162,53040],{"class":371},[52,53164,105],{"class":58},[52,53166,53167,53169,53171],{"class":54,"line":108},[52,53168,121],{"class":58},[52,53170,63],{"class":371},[52,53172,77],{"class":58},[43,53174,53176],{"className":222,"code":53175,"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,53177,53178,53188,53192,53206,53210,53219,53223],{"__ignoreMap":48},[52,53179,53180,53182,53184,53186],{"class":54,"line":55},[52,53181,232],{"class":231},[52,53183,9005],{"class":58},[52,53185,238],{"class":231},[52,53187,9010],{"class":73},[52,53189,53190],{"class":54,"line":80},[52,53191,597],{"emptyLinePlaceholder":171},[52,53193,53194,53196,53198,53200,53202,53204],{"class":54,"line":108},[52,53195,1721],{"class":231},[52,53197,1724],{"class":371},[52,53199,1727],{"class":231},[52,53201,1730],{"class":231},[52,53203,1733],{"class":66},[52,53205,1736],{"class":58},[52,53207,53208],{"class":54,"line":118},[52,53209,1751],{"class":58},[52,53211,53212,53214,53217],{"class":54,"line":594},[52,53213,1756],{"class":58},[52,53215,53216],{"class":73},"'VideoTexture'",[52,53218,2129],{"class":58},[52,53220,53221],{"class":54,"line":600},[52,53222,1773],{"class":58},[52,53224,53225],{"class":54,"line":606},[52,53226,1778],{"class":58},[156,53228,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":53230},[53231,53232],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/videotexture",{"title":53040,"description":53048},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":53239,"title":53240,"body":53241,"category":27278,"componentType":20623,"description":53248,"extension":168,"meta":53647,"navigation":171,"path":53648,"requiresChild":171,"seo":53649,"stem":53650,"__hash__":53651},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":53242,"toc":53643},[53243,53246,53249,53251,53253,53256,53258,53641],[11,53244,53240],{"id":53245},"vignette",[15,53247,53248],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26676,53250],{"component":53240},[23,53252,26680],{"id":21278},[26682,53254],{":props":53255},"[{\"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,53257,26688],{"id":26687},[217,53259,53260,53332,53411,53485,53563],{":tabs":1543},[43,53261,53263],{"className":45,"code":53262,"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,53264,53265,53273,53280,53288,53296,53304,53308,53316,53324],{"__ignoreMap":48},[52,53266,53267,53269,53271],{"class":54,"line":55},[52,53268,59],{"class":58},[52,53270,63],{"class":62},[52,53272,77],{"class":58},[52,53274,53275,53277],{"class":54,"line":80},[52,53276,83],{"class":58},[52,53278,53279],{"class":62},"Vignette\n",[52,53281,53282,53284,53286],{"class":54,"line":108},[52,53283,7125],{"class":66},[52,53285,70],{"class":58},[52,53287,16749],{"class":73},[52,53289,53290,53292,53294],{"class":54,"line":118},[52,53291,14675],{"class":66},[52,53293,70],{"class":58},[52,53295,32237],{"class":73},[52,53297,53298,53300,53302],{"class":54,"line":594},[52,53299,17644],{"class":66},[52,53301,70],{"class":58},[52,53303,28602],{"class":73},[52,53305,53306],{"class":54,"line":600},[52,53307,26724],{"class":58},[52,53309,53310,53312,53314],{"class":54,"line":606},[52,53311,2213],{"class":58},[52,53313,2216],{"class":62},[52,53315,105],{"class":58},[52,53317,53318,53320,53322],{"class":54,"line":653},[52,53319,2230],{"class":58},[52,53321,53240],{"class":62},[52,53323,77],{"class":58},[52,53325,53326,53328,53330],{"class":54,"line":662},[52,53327,121],{"class":58},[52,53329,63],{"class":62},[52,53331,77],{"class":58},[43,53333,53335],{"className":360,"code":53334,"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,53336,53337,53345,53351,53359,53371,53383,53387,53395,53403],{"__ignoreMap":48},[52,53338,53339,53341,53343],{"class":54,"line":55},[52,53340,59],{"class":58},[52,53342,63],{"class":371},[52,53344,77],{"class":58},[52,53346,53347,53349],{"class":54,"line":80},[52,53348,83],{"class":58},[52,53350,53279],{"class":371},[52,53352,53353,53355,53357],{"class":54,"line":108},[52,53354,7125],{"class":66},[52,53356,70],{"class":231},[52,53358,16749],{"class":73},[52,53360,53361,53363,53365,53367,53369],{"class":54,"line":118},[52,53362,7135],{"class":66},[52,53364,70],{"class":231},[52,53366,723],{"class":58},[52,53368,5241],{"class":371},[52,53370,729],{"class":58},[52,53372,53373,53375,53377,53379,53381],{"class":54,"line":594},[52,53374,17755],{"class":66},[52,53376,70],{"class":231},[52,53378,723],{"class":58},[52,53380,6165],{"class":371},[52,53382,729],{"class":58},[52,53384,53385],{"class":54,"line":600},[52,53386,26724],{"class":58},[52,53388,53389,53391,53393],{"class":54,"line":606},[52,53390,2213],{"class":58},[52,53392,2216],{"class":371},[52,53394,105],{"class":58},[52,53396,53397,53399,53401],{"class":54,"line":653},[52,53398,2230],{"class":58},[52,53400,53240],{"class":371},[52,53402,77],{"class":58},[52,53404,53405,53407,53409],{"class":54,"line":662},[52,53406,121],{"class":58},[52,53408,63],{"class":371},[52,53410,77],{"class":58},[43,53412,53413],{"className":2507,"code":53334,"language":2509,"meta":48,"style":48},[31,53414,53415,53423,53429,53437,53447,53457,53461,53469,53477],{"__ignoreMap":48},[52,53416,53417,53419,53421],{"class":54,"line":55},[52,53418,59],{"class":58},[52,53420,63],{"class":371},[52,53422,77],{"class":58},[52,53424,53425,53427],{"class":54,"line":80},[52,53426,83],{"class":58},[52,53428,53279],{"class":371},[52,53430,53431,53433,53435],{"class":54,"line":108},[52,53432,7125],{"class":66},[52,53434,70],{"class":58},[52,53436,16749],{"class":73},[52,53438,53439,53441,53443,53445],{"class":54,"line":118},[52,53440,7135],{"class":66},[52,53442,24620],{"class":58},[52,53444,5241],{"class":371},[52,53446,729],{"class":58},[52,53448,53449,53451,53453,53455],{"class":54,"line":594},[52,53450,17755],{"class":66},[52,53452,24620],{"class":58},[52,53454,6165],{"class":371},[52,53456,729],{"class":58},[52,53458,53459],{"class":54,"line":600},[52,53460,26724],{"class":58},[52,53462,53463,53465,53467],{"class":54,"line":606},[52,53464,2213],{"class":58},[52,53466,2216],{"class":371},[52,53468,105],{"class":58},[52,53470,53471,53473,53475],{"class":54,"line":653},[52,53472,2230],{"class":58},[52,53474,53240],{"class":371},[52,53476,77],{"class":58},[52,53478,53479,53481,53483],{"class":54,"line":662},[52,53480,121],{"class":58},[52,53482,63],{"class":371},[52,53484,77],{"class":58},[43,53486,53487],{"className":419,"code":53334,"language":420,"meta":48,"style":48},[31,53488,53489,53497,53503,53511,53523,53535,53539,53547,53555],{"__ignoreMap":48},[52,53490,53491,53493,53495],{"class":54,"line":55},[52,53492,59],{"class":58},[52,53494,63],{"class":371},[52,53496,77],{"class":58},[52,53498,53499,53501],{"class":54,"line":80},[52,53500,83],{"class":58},[52,53502,53279],{"class":371},[52,53504,53505,53507,53509],{"class":54,"line":108},[52,53506,7125],{"class":66},[52,53508,70],{"class":231},[52,53510,16749],{"class":73},[52,53512,53513,53515,53517,53519,53521],{"class":54,"line":118},[52,53514,7135],{"class":66},[52,53516,70],{"class":231},[52,53518,723],{"class":58},[52,53520,5241],{"class":371},[52,53522,729],{"class":58},[52,53524,53525,53527,53529,53531,53533],{"class":54,"line":594},[52,53526,17755],{"class":66},[52,53528,70],{"class":231},[52,53530,723],{"class":58},[52,53532,6165],{"class":371},[52,53534,729],{"class":58},[52,53536,53537],{"class":54,"line":600},[52,53538,26724],{"class":58},[52,53540,53541,53543,53545],{"class":54,"line":606},[52,53542,2213],{"class":58},[52,53544,2216],{"class":371},[52,53546,105],{"class":58},[52,53548,53549,53551,53553],{"class":54,"line":653},[52,53550,2230],{"class":58},[52,53552,53240],{"class":371},[52,53554,77],{"class":58},[52,53556,53557,53559,53561],{"class":54,"line":662},[52,53558,121],{"class":58},[52,53560,63],{"class":371},[52,53562,77],{"class":58},[43,53564,53566],{"className":222,"code":53565,"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,53567,53568,53578,53582,53596,53600,53621,53629,53633,53637],{"__ignoreMap":48},[52,53569,53570,53572,53574,53576],{"class":54,"line":55},[52,53571,232],{"class":231},[52,53573,9005],{"class":58},[52,53575,238],{"class":231},[52,53577,9010],{"class":73},[52,53579,53580],{"class":54,"line":80},[52,53581,597],{"emptyLinePlaceholder":171},[52,53583,53584,53586,53588,53590,53592,53594],{"class":54,"line":108},[52,53585,1721],{"class":231},[52,53587,1724],{"class":371},[52,53589,1727],{"class":231},[52,53591,1730],{"class":231},[52,53593,1733],{"class":66},[52,53595,1736],{"class":58},[52,53597,53598],{"class":54,"line":118},[52,53599,1751],{"class":58},[52,53601,53602,53604,53607,53609,53611,53613,53615,53617,53619],{"class":54,"line":594},[52,53603,1756],{"class":58},[52,53605,53606],{"class":73},"'Vignette'",[52,53608,1762],{"class":58},[52,53610,17308],{"class":73},[52,53612,4052],{"class":58},[52,53614,5241],{"class":371},[52,53616,34398],{"class":58},[52,53618,6165],{"class":371},[52,53620,5033],{"class":58},[52,53622,53623,53625,53627],{"class":54,"line":600},[52,53624,4501],{"class":58},[52,53626,2869],{"class":73},[52,53628,2129],{"class":58},[52,53630,53631],{"class":54,"line":606},[52,53632,4518],{"class":58},[52,53634,53635],{"class":54,"line":653},[52,53636,1773],{"class":58},[52,53638,53639],{"class":54,"line":662},[52,53640,1778],{"class":58},[156,53642,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53644},[53645,53646],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/vignette",{"title":53240,"description":53248},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":53653,"title":53654,"body":53655,"category":27535,"componentType":20617,"description":53662,"extension":168,"meta":53847,"navigation":171,"path":53848,"requiresChild":27538,"seo":53849,"stem":53850,"__hash__":53851},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":53656,"toc":53843},[53657,53660,53663,53665,53667,53670,53672,53841],[11,53658,53654],{"id":53659},"voronoi",[15,53661,53662],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26676,53664],{"component":53654},[23,53666,26680],{"id":21278},[26682,53668],{":props":53669},"[{\"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,53671,26688],{"id":26687},[217,53673,53674,53703,53731,53759,53787],{":tabs":1543},[43,53675,53677],{"className":45,"code":53676,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,53678,53679,53687,53695],{"__ignoreMap":48},[52,53680,53681,53683,53685],{"class":54,"line":55},[52,53682,59],{"class":58},[52,53684,63],{"class":62},[52,53686,77],{"class":58},[52,53688,53689,53691,53693],{"class":54,"line":80},[52,53690,83],{"class":58},[52,53692,53654],{"class":62},[52,53694,105],{"class":58},[52,53696,53697,53699,53701],{"class":54,"line":108},[52,53698,121],{"class":58},[52,53700,63],{"class":62},[52,53702,77],{"class":58},[43,53704,53705],{"className":360,"code":53676,"language":362,"meta":48,"style":48},[31,53706,53707,53715,53723],{"__ignoreMap":48},[52,53708,53709,53711,53713],{"class":54,"line":55},[52,53710,59],{"class":58},[52,53712,63],{"class":371},[52,53714,77],{"class":58},[52,53716,53717,53719,53721],{"class":54,"line":80},[52,53718,83],{"class":58},[52,53720,53654],{"class":371},[52,53722,105],{"class":58},[52,53724,53725,53727,53729],{"class":54,"line":108},[52,53726,121],{"class":58},[52,53728,63],{"class":371},[52,53730,77],{"class":58},[43,53732,53733],{"className":2507,"code":53676,"language":2509,"meta":48,"style":48},[31,53734,53735,53743,53751],{"__ignoreMap":48},[52,53736,53737,53739,53741],{"class":54,"line":55},[52,53738,59],{"class":58},[52,53740,63],{"class":371},[52,53742,77],{"class":58},[52,53744,53745,53747,53749],{"class":54,"line":80},[52,53746,83],{"class":58},[52,53748,53654],{"class":371},[52,53750,105],{"class":58},[52,53752,53753,53755,53757],{"class":54,"line":108},[52,53754,121],{"class":58},[52,53756,63],{"class":371},[52,53758,77],{"class":58},[43,53760,53761],{"className":419,"code":53676,"language":420,"meta":48,"style":48},[31,53762,53763,53771,53779],{"__ignoreMap":48},[52,53764,53765,53767,53769],{"class":54,"line":55},[52,53766,59],{"class":58},[52,53768,63],{"class":371},[52,53770,77],{"class":58},[52,53772,53773,53775,53777],{"class":54,"line":80},[52,53774,83],{"class":58},[52,53776,53654],{"class":371},[52,53778,105],{"class":58},[52,53780,53781,53783,53785],{"class":54,"line":108},[52,53782,121],{"class":58},[52,53784,63],{"class":371},[52,53786,77],{"class":58},[43,53788,53790],{"className":222,"code":53789,"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,53791,53792,53802,53806,53820,53824,53833,53837],{"__ignoreMap":48},[52,53793,53794,53796,53798,53800],{"class":54,"line":55},[52,53795,232],{"class":231},[52,53797,9005],{"class":58},[52,53799,238],{"class":231},[52,53801,9010],{"class":73},[52,53803,53804],{"class":54,"line":80},[52,53805,597],{"emptyLinePlaceholder":171},[52,53807,53808,53810,53812,53814,53816,53818],{"class":54,"line":108},[52,53809,1721],{"class":231},[52,53811,1724],{"class":371},[52,53813,1727],{"class":231},[52,53815,1730],{"class":231},[52,53817,1733],{"class":66},[52,53819,1736],{"class":58},[52,53821,53822],{"class":54,"line":118},[52,53823,1751],{"class":58},[52,53825,53826,53828,53831],{"class":54,"line":594},[52,53827,1756],{"class":58},[52,53829,53830],{"class":73},"'Voronoi'",[52,53832,2129],{"class":58},[52,53834,53835],{"class":54,"line":600},[52,53836,1773],{"class":58},[52,53838,53839],{"class":54,"line":606},[52,53840,1778],{"class":58},[156,53842,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":53844},[53845,53846],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/voronoi",{"title":53654,"description":53662},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":53853,"title":53854,"body":53855,"category":28880,"componentType":20623,"description":53862,"extension":168,"meta":54123,"navigation":171,"path":54124,"requiresChild":171,"seo":54125,"stem":54126,"__hash__":54127},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":53856,"toc":54119},[53857,53860,53863,53865,53867,53870,53872,54117],[11,53858,53854],{"id":53859},"wavedistortion",[15,53861,53862],{},"Wave-based distortion with multiple waveform types",[26676,53864],{"component":53854},[23,53866,26680],{"id":21278},[26682,53868],{":props":53869},"[{\"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,53871,26688],{"id":26687},[217,53873,53874,53919,53963,54007,54051],{":tabs":1543},[43,53875,53877],{"className":45,"code":53876,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,53878,53879,53887,53895,53903,53911],{"__ignoreMap":48},[52,53880,53881,53883,53885],{"class":54,"line":55},[52,53882,59],{"class":58},[52,53884,63],{"class":62},[52,53886,77],{"class":58},[52,53888,53889,53891,53893],{"class":54,"line":80},[52,53890,83],{"class":58},[52,53892,53854],{"class":62},[52,53894,77],{"class":58},[52,53896,53897,53899,53901],{"class":54,"line":108},[52,53898,2213],{"class":58},[52,53900,2216],{"class":62},[52,53902,105],{"class":58},[52,53904,53905,53907,53909],{"class":54,"line":118},[52,53906,2230],{"class":58},[52,53908,53854],{"class":62},[52,53910,77],{"class":58},[52,53912,53913,53915,53917],{"class":54,"line":594},[52,53914,121],{"class":58},[52,53916,63],{"class":62},[52,53918,77],{"class":58},[43,53920,53921],{"className":360,"code":53876,"language":362,"meta":48,"style":48},[31,53922,53923,53931,53939,53947,53955],{"__ignoreMap":48},[52,53924,53925,53927,53929],{"class":54,"line":55},[52,53926,59],{"class":58},[52,53928,63],{"class":371},[52,53930,77],{"class":58},[52,53932,53933,53935,53937],{"class":54,"line":80},[52,53934,83],{"class":58},[52,53936,53854],{"class":371},[52,53938,77],{"class":58},[52,53940,53941,53943,53945],{"class":54,"line":108},[52,53942,2213],{"class":58},[52,53944,2216],{"class":371},[52,53946,105],{"class":58},[52,53948,53949,53951,53953],{"class":54,"line":118},[52,53950,2230],{"class":58},[52,53952,53854],{"class":371},[52,53954,77],{"class":58},[52,53956,53957,53959,53961],{"class":54,"line":594},[52,53958,121],{"class":58},[52,53960,63],{"class":371},[52,53962,77],{"class":58},[43,53964,53965],{"className":2507,"code":53876,"language":2509,"meta":48,"style":48},[31,53966,53967,53975,53983,53991,53999],{"__ignoreMap":48},[52,53968,53969,53971,53973],{"class":54,"line":55},[52,53970,59],{"class":58},[52,53972,63],{"class":371},[52,53974,77],{"class":58},[52,53976,53977,53979,53981],{"class":54,"line":80},[52,53978,83],{"class":58},[52,53980,53854],{"class":371},[52,53982,77],{"class":58},[52,53984,53985,53987,53989],{"class":54,"line":108},[52,53986,2213],{"class":58},[52,53988,2216],{"class":371},[52,53990,105],{"class":58},[52,53992,53993,53995,53997],{"class":54,"line":118},[52,53994,2230],{"class":58},[52,53996,53854],{"class":371},[52,53998,77],{"class":58},[52,54000,54001,54003,54005],{"class":54,"line":594},[52,54002,121],{"class":58},[52,54004,63],{"class":371},[52,54006,77],{"class":58},[43,54008,54009],{"className":419,"code":53876,"language":420,"meta":48,"style":48},[31,54010,54011,54019,54027,54035,54043],{"__ignoreMap":48},[52,54012,54013,54015,54017],{"class":54,"line":55},[52,54014,59],{"class":58},[52,54016,63],{"class":371},[52,54018,77],{"class":58},[52,54020,54021,54023,54025],{"class":54,"line":80},[52,54022,83],{"class":58},[52,54024,53854],{"class":371},[52,54026,77],{"class":58},[52,54028,54029,54031,54033],{"class":54,"line":108},[52,54030,2213],{"class":58},[52,54032,2216],{"class":371},[52,54034,105],{"class":58},[52,54036,54037,54039,54041],{"class":54,"line":118},[52,54038,2230],{"class":58},[52,54040,53854],{"class":371},[52,54042,77],{"class":58},[52,54044,54045,54047,54049],{"class":54,"line":594},[52,54046,121],{"class":58},[52,54048,63],{"class":371},[52,54050,77],{"class":58},[43,54052,54054],{"className":222,"code":54053,"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,54055,54056,54066,54070,54084,54088,54097,54105,54109,54113],{"__ignoreMap":48},[52,54057,54058,54060,54062,54064],{"class":54,"line":55},[52,54059,232],{"class":231},[52,54061,9005],{"class":58},[52,54063,238],{"class":231},[52,54065,9010],{"class":73},[52,54067,54068],{"class":54,"line":80},[52,54069,597],{"emptyLinePlaceholder":171},[52,54071,54072,54074,54076,54078,54080,54082],{"class":54,"line":108},[52,54073,1721],{"class":231},[52,54075,1724],{"class":371},[52,54077,1727],{"class":231},[52,54079,1730],{"class":231},[52,54081,1733],{"class":66},[52,54083,1736],{"class":58},[52,54085,54086],{"class":54,"line":118},[52,54087,1751],{"class":58},[52,54089,54090,54092,54095],{"class":54,"line":594},[52,54091,1756],{"class":58},[52,54093,54094],{"class":73},"'WaveDistortion'",[52,54096,4496],{"class":58},[52,54098,54099,54101,54103],{"class":54,"line":600},[52,54100,4501],{"class":58},[52,54102,2869],{"class":73},[52,54104,2129],{"class":58},[52,54106,54107],{"class":54,"line":606},[52,54108,4518],{"class":58},[52,54110,54111],{"class":54,"line":653},[52,54112,1773],{"class":58},[52,54114,54115],{"class":54,"line":662},[52,54116,1778],{"class":58},[156,54118,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":54120},[54121,54122],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/wavedistortion",{"title":53854,"description":53862},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":54129,"title":54130,"body":54131,"category":27535,"componentType":20617,"description":54138,"extension":168,"meta":54323,"navigation":171,"path":54324,"requiresChild":27538,"seo":54325,"stem":54326,"__hash__":54327},"components/docs/components/Weave.md","Weave",{"type":8,"value":54132,"toc":54319},[54133,54136,54139,54141,54143,54146,54148,54317],[11,54134,54130],{"id":54135},"weave",[15,54137,54138],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26676,54140],{"component":54130},[23,54142,26680],{"id":21278},[26682,54144],{":props":54145},"[{\"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,54147,26688],{"id":26687},[217,54149,54150,54179,54207,54235,54263],{":tabs":1543},[43,54151,54153],{"className":45,"code":54152,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,54154,54155,54163,54171],{"__ignoreMap":48},[52,54156,54157,54159,54161],{"class":54,"line":55},[52,54158,59],{"class":58},[52,54160,63],{"class":62},[52,54162,77],{"class":58},[52,54164,54165,54167,54169],{"class":54,"line":80},[52,54166,83],{"class":58},[52,54168,54130],{"class":62},[52,54170,105],{"class":58},[52,54172,54173,54175,54177],{"class":54,"line":108},[52,54174,121],{"class":58},[52,54176,63],{"class":62},[52,54178,77],{"class":58},[43,54180,54181],{"className":360,"code":54152,"language":362,"meta":48,"style":48},[31,54182,54183,54191,54199],{"__ignoreMap":48},[52,54184,54185,54187,54189],{"class":54,"line":55},[52,54186,59],{"class":58},[52,54188,63],{"class":371},[52,54190,77],{"class":58},[52,54192,54193,54195,54197],{"class":54,"line":80},[52,54194,83],{"class":58},[52,54196,54130],{"class":371},[52,54198,105],{"class":58},[52,54200,54201,54203,54205],{"class":54,"line":108},[52,54202,121],{"class":58},[52,54204,63],{"class":371},[52,54206,77],{"class":58},[43,54208,54209],{"className":2507,"code":54152,"language":2509,"meta":48,"style":48},[31,54210,54211,54219,54227],{"__ignoreMap":48},[52,54212,54213,54215,54217],{"class":54,"line":55},[52,54214,59],{"class":58},[52,54216,63],{"class":371},[52,54218,77],{"class":58},[52,54220,54221,54223,54225],{"class":54,"line":80},[52,54222,83],{"class":58},[52,54224,54130],{"class":371},[52,54226,105],{"class":58},[52,54228,54229,54231,54233],{"class":54,"line":108},[52,54230,121],{"class":58},[52,54232,63],{"class":371},[52,54234,77],{"class":58},[43,54236,54237],{"className":419,"code":54152,"language":420,"meta":48,"style":48},[31,54238,54239,54247,54255],{"__ignoreMap":48},[52,54240,54241,54243,54245],{"class":54,"line":55},[52,54242,59],{"class":58},[52,54244,63],{"class":371},[52,54246,77],{"class":58},[52,54248,54249,54251,54253],{"class":54,"line":80},[52,54250,83],{"class":58},[52,54252,54130],{"class":371},[52,54254,105],{"class":58},[52,54256,54257,54259,54261],{"class":54,"line":108},[52,54258,121],{"class":58},[52,54260,63],{"class":371},[52,54262,77],{"class":58},[43,54264,54266],{"className":222,"code":54265,"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,54267,54268,54278,54282,54296,54300,54309,54313],{"__ignoreMap":48},[52,54269,54270,54272,54274,54276],{"class":54,"line":55},[52,54271,232],{"class":231},[52,54273,9005],{"class":58},[52,54275,238],{"class":231},[52,54277,9010],{"class":73},[52,54279,54280],{"class":54,"line":80},[52,54281,597],{"emptyLinePlaceholder":171},[52,54283,54284,54286,54288,54290,54292,54294],{"class":54,"line":108},[52,54285,1721],{"class":231},[52,54287,1724],{"class":371},[52,54289,1727],{"class":231},[52,54291,1730],{"class":231},[52,54293,1733],{"class":66},[52,54295,1736],{"class":58},[52,54297,54298],{"class":54,"line":118},[52,54299,1751],{"class":58},[52,54301,54302,54304,54307],{"class":54,"line":594},[52,54303,1756],{"class":58},[52,54305,54306],{"class":73},"'Weave'",[52,54308,2129],{"class":58},[52,54310,54311],{"class":54,"line":600},[52,54312,1773],{"class":58},[52,54314,54315],{"class":54,"line":606},[52,54316,1778],{"class":58},[156,54318,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":54320},[54321,54322],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/weave",{"title":54130,"description":54138},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":54329,"title":54330,"body":54331,"category":27535,"componentType":20617,"description":54338,"extension":168,"meta":54523,"navigation":171,"path":54524,"requiresChild":27538,"seo":54525,"stem":54526,"__hash__":54527},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":54332,"toc":54519},[54333,54336,54339,54341,54343,54346,54348,54517],[11,54334,54330],{"id":54335},"webcamtexture",[15,54337,54338],{},"Display a live webcam feed with customizable object-fit modes",[26676,54340],{"component":54330},[23,54342,26680],{"id":21278},[26682,54344],{":props":54345},"[{\"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,54347,26688],{"id":26687},[217,54349,54350,54379,54407,54435,54463],{":tabs":1543},[43,54351,54353],{"className":45,"code":54352,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[31,54354,54355,54363,54371],{"__ignoreMap":48},[52,54356,54357,54359,54361],{"class":54,"line":55},[52,54358,59],{"class":58},[52,54360,63],{"class":62},[52,54362,77],{"class":58},[52,54364,54365,54367,54369],{"class":54,"line":80},[52,54366,83],{"class":58},[52,54368,54330],{"class":62},[52,54370,105],{"class":58},[52,54372,54373,54375,54377],{"class":54,"line":108},[52,54374,121],{"class":58},[52,54376,63],{"class":62},[52,54378,77],{"class":58},[43,54380,54381],{"className":360,"code":54352,"language":362,"meta":48,"style":48},[31,54382,54383,54391,54399],{"__ignoreMap":48},[52,54384,54385,54387,54389],{"class":54,"line":55},[52,54386,59],{"class":58},[52,54388,63],{"class":371},[52,54390,77],{"class":58},[52,54392,54393,54395,54397],{"class":54,"line":80},[52,54394,83],{"class":58},[52,54396,54330],{"class":371},[52,54398,105],{"class":58},[52,54400,54401,54403,54405],{"class":54,"line":108},[52,54402,121],{"class":58},[52,54404,63],{"class":371},[52,54406,77],{"class":58},[43,54408,54409],{"className":2507,"code":54352,"language":2509,"meta":48,"style":48},[31,54410,54411,54419,54427],{"__ignoreMap":48},[52,54412,54413,54415,54417],{"class":54,"line":55},[52,54414,59],{"class":58},[52,54416,63],{"class":371},[52,54418,77],{"class":58},[52,54420,54421,54423,54425],{"class":54,"line":80},[52,54422,83],{"class":58},[52,54424,54330],{"class":371},[52,54426,105],{"class":58},[52,54428,54429,54431,54433],{"class":54,"line":108},[52,54430,121],{"class":58},[52,54432,63],{"class":371},[52,54434,77],{"class":58},[43,54436,54437],{"className":419,"code":54352,"language":420,"meta":48,"style":48},[31,54438,54439,54447,54455],{"__ignoreMap":48},[52,54440,54441,54443,54445],{"class":54,"line":55},[52,54442,59],{"class":58},[52,54444,63],{"class":371},[52,54446,77],{"class":58},[52,54448,54449,54451,54453],{"class":54,"line":80},[52,54450,83],{"class":58},[52,54452,54330],{"class":371},[52,54454,105],{"class":58},[52,54456,54457,54459,54461],{"class":54,"line":108},[52,54458,121],{"class":58},[52,54460,63],{"class":371},[52,54462,77],{"class":58},[43,54464,54466],{"className":222,"code":54465,"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,54467,54468,54478,54482,54496,54500,54509,54513],{"__ignoreMap":48},[52,54469,54470,54472,54474,54476],{"class":54,"line":55},[52,54471,232],{"class":231},[52,54473,9005],{"class":58},[52,54475,238],{"class":231},[52,54477,9010],{"class":73},[52,54479,54480],{"class":54,"line":80},[52,54481,597],{"emptyLinePlaceholder":171},[52,54483,54484,54486,54488,54490,54492,54494],{"class":54,"line":108},[52,54485,1721],{"class":231},[52,54487,1724],{"class":371},[52,54489,1727],{"class":231},[52,54491,1730],{"class":231},[52,54493,1733],{"class":66},[52,54495,1736],{"class":58},[52,54497,54498],{"class":54,"line":118},[52,54499,1751],{"class":58},[52,54501,54502,54504,54507],{"class":54,"line":594},[52,54503,1756],{"class":58},[52,54505,54506],{"class":73},"'WebcamTexture'",[52,54508,2129],{"class":58},[52,54510,54511],{"class":54,"line":600},[52,54512,1773],{"class":58},[52,54514,54515],{"class":54,"line":606},[52,54516,1778],{"class":58},[156,54518,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":54520},[54521,54522],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/webcamtexture",{"title":54330,"description":54338},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":54529,"title":54530,"body":54531,"category":27000,"componentType":20623,"description":54538,"extension":168,"meta":54855,"navigation":171,"path":54856,"requiresChild":171,"seo":54857,"stem":54858,"__hash__":54859},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":54532,"toc":54851},[54533,54536,54539,54541,54543,54546,54548,54849],[11,54534,54530],{"id":54535},"zoomblur",[15,54537,54538],{},"Radial zoom blur expanding from a center point",[26676,54540],{"component":54530},[23,54542,26680],{"id":21278},[26682,54544],{":props":54545},"[{\"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,54547,26688],{"id":26687},[217,54549,54550,54606,54665,54721,54779],{":tabs":1543},[43,54551,54553],{"className":45,"code":54552,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,54554,54555,54563,54570,54578,54582,54590,54598],{"__ignoreMap":48},[52,54556,54557,54559,54561],{"class":54,"line":55},[52,54558,59],{"class":58},[52,54560,63],{"class":62},[52,54562,77],{"class":58},[52,54564,54565,54567],{"class":54,"line":80},[52,54566,83],{"class":58},[52,54568,54569],{"class":62},"ZoomBlur\n",[52,54571,54572,54574,54576],{"class":54,"line":108},[52,54573,17644],{"class":66},[52,54575,70],{"class":58},[52,54577,33263],{"class":73},[52,54579,54580],{"class":54,"line":118},[52,54581,26724],{"class":58},[52,54583,54584,54586,54588],{"class":54,"line":594},[52,54585,2213],{"class":58},[52,54587,2216],{"class":62},[52,54589,105],{"class":58},[52,54591,54592,54594,54596],{"class":54,"line":600},[52,54593,2230],{"class":58},[52,54595,54530],{"class":62},[52,54597,77],{"class":58},[52,54599,54600,54602,54604],{"class":54,"line":606},[52,54601,121],{"class":58},[52,54603,63],{"class":62},[52,54605,77],{"class":58},[43,54607,54609],{"className":360,"code":54608,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,54610,54611,54619,54625,54637,54641,54649,54657],{"__ignoreMap":48},[52,54612,54613,54615,54617],{"class":54,"line":55},[52,54614,59],{"class":58},[52,54616,63],{"class":371},[52,54618,77],{"class":58},[52,54620,54621,54623],{"class":54,"line":80},[52,54622,83],{"class":58},[52,54624,54569],{"class":371},[52,54626,54627,54629,54631,54633,54635],{"class":54,"line":108},[52,54628,17755],{"class":66},[52,54630,70],{"class":231},[52,54632,723],{"class":58},[52,54634,12968],{"class":371},[52,54636,729],{"class":58},[52,54638,54639],{"class":54,"line":118},[52,54640,26724],{"class":58},[52,54642,54643,54645,54647],{"class":54,"line":594},[52,54644,2213],{"class":58},[52,54646,2216],{"class":371},[52,54648,105],{"class":58},[52,54650,54651,54653,54655],{"class":54,"line":600},[52,54652,2230],{"class":58},[52,54654,54530],{"class":371},[52,54656,77],{"class":58},[52,54658,54659,54661,54663],{"class":54,"line":606},[52,54660,121],{"class":58},[52,54662,63],{"class":371},[52,54664,77],{"class":58},[43,54666,54667],{"className":2507,"code":54608,"language":2509,"meta":48,"style":48},[31,54668,54669,54677,54683,54693,54697,54705,54713],{"__ignoreMap":48},[52,54670,54671,54673,54675],{"class":54,"line":55},[52,54672,59],{"class":58},[52,54674,63],{"class":371},[52,54676,77],{"class":58},[52,54678,54679,54681],{"class":54,"line":80},[52,54680,83],{"class":58},[52,54682,54569],{"class":371},[52,54684,54685,54687,54689,54691],{"class":54,"line":108},[52,54686,17755],{"class":66},[52,54688,24620],{"class":58},[52,54690,12968],{"class":371},[52,54692,729],{"class":58},[52,54694,54695],{"class":54,"line":118},[52,54696,26724],{"class":58},[52,54698,54699,54701,54703],{"class":54,"line":594},[52,54700,2213],{"class":58},[52,54702,2216],{"class":371},[52,54704,105],{"class":58},[52,54706,54707,54709,54711],{"class":54,"line":600},[52,54708,2230],{"class":58},[52,54710,54530],{"class":371},[52,54712,77],{"class":58},[52,54714,54715,54717,54719],{"class":54,"line":606},[52,54716,121],{"class":58},[52,54718,63],{"class":371},[52,54720,77],{"class":58},[43,54722,54723],{"className":419,"code":54608,"language":420,"meta":48,"style":48},[31,54724,54725,54733,54739,54751,54755,54763,54771],{"__ignoreMap":48},[52,54726,54727,54729,54731],{"class":54,"line":55},[52,54728,59],{"class":58},[52,54730,63],{"class":371},[52,54732,77],{"class":58},[52,54734,54735,54737],{"class":54,"line":80},[52,54736,83],{"class":58},[52,54738,54569],{"class":371},[52,54740,54741,54743,54745,54747,54749],{"class":54,"line":108},[52,54742,17755],{"class":66},[52,54744,70],{"class":231},[52,54746,723],{"class":58},[52,54748,12968],{"class":371},[52,54750,729],{"class":58},[52,54752,54753],{"class":54,"line":118},[52,54754,26724],{"class":58},[52,54756,54757,54759,54761],{"class":54,"line":594},[52,54758,2213],{"class":58},[52,54760,2216],{"class":371},[52,54762,105],{"class":58},[52,54764,54765,54767,54769],{"class":54,"line":600},[52,54766,2230],{"class":58},[52,54768,54530],{"class":371},[52,54770,77],{"class":58},[52,54772,54773,54775,54777],{"class":54,"line":606},[52,54774,121],{"class":58},[52,54776,63],{"class":371},[52,54778,77],{"class":58},[43,54780,54782],{"className":222,"code":54781,"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,54783,54784,54794,54798,54812,54816,54829,54837,54841,54845],{"__ignoreMap":48},[52,54785,54786,54788,54790,54792],{"class":54,"line":55},[52,54787,232],{"class":231},[52,54789,9005],{"class":58},[52,54791,238],{"class":231},[52,54793,9010],{"class":73},[52,54795,54796],{"class":54,"line":80},[52,54797,597],{"emptyLinePlaceholder":171},[52,54799,54800,54802,54804,54806,54808,54810],{"class":54,"line":108},[52,54801,1721],{"class":231},[52,54803,1724],{"class":371},[52,54805,1727],{"class":231},[52,54807,1730],{"class":231},[52,54809,1733],{"class":66},[52,54811,1736],{"class":58},[52,54813,54814],{"class":54,"line":118},[52,54815,1751],{"class":58},[52,54817,54818,54820,54823,54825,54827],{"class":54,"line":594},[52,54819,1756],{"class":58},[52,54821,54822],{"class":73},"'ZoomBlur'",[52,54824,26969],{"class":58},[52,54826,12968],{"class":371},[52,54828,5033],{"class":58},[52,54830,54831,54833,54835],{"class":54,"line":600},[52,54832,4501],{"class":58},[52,54834,2869],{"class":73},[52,54836,2129],{"class":58},[52,54838,54839],{"class":54,"line":606},[52,54840,4518],{"class":58},[52,54842,54843],{"class":54,"line":653},[52,54844,1773],{"class":58},[52,54846,54847],{"class":54,"line":662},[52,54848,1778],{"class":58},[156,54850,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54852},[54853,54854],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/zoomblur",{"title":54530,"description":54538},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27538,"error":54861},"Not authenticated",{"id":32814,"title":32815,"body":54863,"category":27535,"componentType":20617,"description":32823,"extension":168,"meta":55046,"navigation":171,"path":33009,"requiresChild":27538,"seo":55047,"stem":33011,"__hash__":33012},{"type":8,"value":54864,"toc":55043},[54865,54867,54869,54871,54873,54875,55041],[11,54866,32815],{"id":32820},[15,54868,32823],{},[32825,54870],{"link-label":32827,"link-url":32828,"message":32829},[26676,54872],{"component":32815},[23,54874,26688],{"id":26687},[217,54876,54877,54905,54933,54961,54989],{":tabs":1543},[43,54878,54879],{"className":45,"code":32838,"language":47,"meta":48,"style":48},[31,54880,54881,54889,54897],{"__ignoreMap":48},[52,54882,54883,54885,54887],{"class":54,"line":55},[52,54884,59],{"class":58},[52,54886,63],{"class":62},[52,54888,77],{"class":58},[52,54890,54891,54893,54895],{"class":54,"line":80},[52,54892,83],{"class":58},[52,54894,32815],{"class":62},[52,54896,105],{"class":58},[52,54898,54899,54901,54903],{"class":54,"line":108},[52,54900,121],{"class":58},[52,54902,63],{"class":62},[52,54904,77],{"class":58},[43,54906,54907],{"className":360,"code":32838,"language":362,"meta":48,"style":48},[31,54908,54909,54917,54925],{"__ignoreMap":48},[52,54910,54911,54913,54915],{"class":54,"line":55},[52,54912,59],{"class":58},[52,54914,63],{"class":371},[52,54916,77],{"class":58},[52,54918,54919,54921,54923],{"class":54,"line":80},[52,54920,83],{"class":58},[52,54922,32815],{"class":371},[52,54924,105],{"class":58},[52,54926,54927,54929,54931],{"class":54,"line":108},[52,54928,121],{"class":58},[52,54930,63],{"class":371},[52,54932,77],{"class":58},[43,54934,54935],{"className":2507,"code":32838,"language":2509,"meta":48,"style":48},[31,54936,54937,54945,54953],{"__ignoreMap":48},[52,54938,54939,54941,54943],{"class":54,"line":55},[52,54940,59],{"class":58},[52,54942,63],{"class":371},[52,54944,77],{"class":58},[52,54946,54947,54949,54951],{"class":54,"line":80},[52,54948,83],{"class":58},[52,54950,32815],{"class":371},[52,54952,105],{"class":58},[52,54954,54955,54957,54959],{"class":54,"line":108},[52,54956,121],{"class":58},[52,54958,63],{"class":371},[52,54960,77],{"class":58},[43,54962,54963],{"className":419,"code":32838,"language":420,"meta":48,"style":48},[31,54964,54965,54973,54981],{"__ignoreMap":48},[52,54966,54967,54969,54971],{"class":54,"line":55},[52,54968,59],{"class":58},[52,54970,63],{"class":371},[52,54972,77],{"class":58},[52,54974,54975,54977,54979],{"class":54,"line":80},[52,54976,83],{"class":58},[52,54978,32815],{"class":371},[52,54980,105],{"class":58},[52,54982,54983,54985,54987],{"class":54,"line":108},[52,54984,121],{"class":58},[52,54986,63],{"class":371},[52,54988,77],{"class":58},[43,54990,54991],{"className":222,"code":32951,"language":224,"meta":48,"style":48},[31,54992,54993,55003,55007,55021,55025,55033,55037],{"__ignoreMap":48},[52,54994,54995,54997,54999,55001],{"class":54,"line":55},[52,54996,232],{"class":231},[52,54998,9005],{"class":58},[52,55000,238],{"class":231},[52,55002,9010],{"class":73},[52,55004,55005],{"class":54,"line":80},[52,55006,597],{"emptyLinePlaceholder":171},[52,55008,55009,55011,55013,55015,55017,55019],{"class":54,"line":108},[52,55010,1721],{"class":231},[52,55012,1724],{"class":371},[52,55014,1727],{"class":231},[52,55016,1730],{"class":231},[52,55018,1733],{"class":66},[52,55020,1736],{"class":58},[52,55022,55023],{"class":54,"line":118},[52,55024,1751],{"class":58},[52,55026,55027,55029,55031],{"class":54,"line":594},[52,55028,1756],{"class":58},[52,55030,32992],{"class":73},[52,55032,2129],{"class":58},[52,55034,55035],{"class":54,"line":600},[52,55036,1773],{"class":58},[52,55038,55039],{"class":54,"line":606},[52,55040,1778],{"class":58},[156,55042,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":55044},[55045],{"id":26687,"depth":80,"text":26688},{},{"title":32815,"description":32823},[55049,55050],{"title":113,"path":32809,"stem":32811,"children":-1},{"title":33015,"path":33209,"stem":33211,"children":-1},1775841974250]