[{"data":1,"prerenderedAt":55159},["ShallowReactive",2],{"guide-docs":3,"component-docs":26663,"user-pro-status-data":54660,"doc-/docs/guide/mcp":54662,"doc-surr-/docs/guide/mcp":167},[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,33346,33622,33865,34234,34510,34755,35029,35229,35505,35705,35981,36274,36474,36750,37024,37355,37687,38018,38274,38544,38789,39165,39436,39712,39912,40188,40388,40658,40934,41189,41521,41719,42097,42372,42572,42865,43141,43417,43693,43948,44326,44618,44951,45283,45539,45871,46163,46363,46608,46939,47215,47595,47795,48040,48316,48560,48892,49092,49384,49584,49859,50059,50306,50505,50837,51160,51405,51681,51881,52213,52505,52838,53038,53452,53652,53928,54128,54328],{"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/DiamondGradient.md","DiamondGradient",{"type":8,"value":32817,"toc":33004},[32818,32821,32824,32826,32828,32831,32833,33002],[11,32819,32815],{"id":32820},"diamondgradient",[15,32822,32823],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[26676,32825],{"component":32815},[23,32827,26680],{"id":21278},[26682,32829],{":props":32830},"[{\"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,32832,26688],{"id":26687},[217,32834,32835,32864,32892,32920,32948],{":tabs":1543},[43,32836,32838],{"className":45,"code":32837,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[31,32839,32840,32848,32856],{"__ignoreMap":48},[52,32841,32842,32844,32846],{"class":54,"line":55},[52,32843,59],{"class":58},[52,32845,63],{"class":62},[52,32847,77],{"class":58},[52,32849,32850,32852,32854],{"class":54,"line":80},[52,32851,83],{"class":58},[52,32853,32815],{"class":62},[52,32855,105],{"class":58},[52,32857,32858,32860,32862],{"class":54,"line":108},[52,32859,121],{"class":58},[52,32861,63],{"class":62},[52,32863,77],{"class":58},[43,32865,32866],{"className":360,"code":32837,"language":362,"meta":48,"style":48},[31,32867,32868,32876,32884],{"__ignoreMap":48},[52,32869,32870,32872,32874],{"class":54,"line":55},[52,32871,59],{"class":58},[52,32873,63],{"class":371},[52,32875,77],{"class":58},[52,32877,32878,32880,32882],{"class":54,"line":80},[52,32879,83],{"class":58},[52,32881,32815],{"class":371},[52,32883,105],{"class":58},[52,32885,32886,32888,32890],{"class":54,"line":108},[52,32887,121],{"class":58},[52,32889,63],{"class":371},[52,32891,77],{"class":58},[43,32893,32894],{"className":2507,"code":32837,"language":2509,"meta":48,"style":48},[31,32895,32896,32904,32912],{"__ignoreMap":48},[52,32897,32898,32900,32902],{"class":54,"line":55},[52,32899,59],{"class":58},[52,32901,63],{"class":371},[52,32903,77],{"class":58},[52,32905,32906,32908,32910],{"class":54,"line":80},[52,32907,83],{"class":58},[52,32909,32815],{"class":371},[52,32911,105],{"class":58},[52,32913,32914,32916,32918],{"class":54,"line":108},[52,32915,121],{"class":58},[52,32917,63],{"class":371},[52,32919,77],{"class":58},[43,32921,32922],{"className":419,"code":32837,"language":420,"meta":48,"style":48},[31,32923,32924,32932,32940],{"__ignoreMap":48},[52,32925,32926,32928,32930],{"class":54,"line":55},[52,32927,59],{"class":58},[52,32929,63],{"class":371},[52,32931,77],{"class":58},[52,32933,32934,32936,32938],{"class":54,"line":80},[52,32935,83],{"class":58},[52,32937,32815],{"class":371},[52,32939,105],{"class":58},[52,32941,32942,32944,32946],{"class":54,"line":108},[52,32943,121],{"class":58},[52,32945,63],{"class":371},[52,32947,77],{"class":58},[43,32949,32951],{"className":222,"code":32950,"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,32952,32953,32963,32967,32981,32985,32994,32998],{"__ignoreMap":48},[52,32954,32955,32957,32959,32961],{"class":54,"line":55},[52,32956,232],{"class":231},[52,32958,9005],{"class":58},[52,32960,238],{"class":231},[52,32962,9010],{"class":73},[52,32964,32965],{"class":54,"line":80},[52,32966,597],{"emptyLinePlaceholder":171},[52,32968,32969,32971,32973,32975,32977,32979],{"class":54,"line":108},[52,32970,1721],{"class":231},[52,32972,1724],{"class":371},[52,32974,1727],{"class":231},[52,32976,1730],{"class":231},[52,32978,1733],{"class":66},[52,32980,1736],{"class":58},[52,32982,32983],{"class":54,"line":118},[52,32984,1751],{"class":58},[52,32986,32987,32989,32992],{"class":54,"line":594},[52,32988,1756],{"class":58},[52,32990,32991],{"class":73},"'DiamondGradient'",[52,32993,2129],{"class":58},[52,32995,32996],{"class":54,"line":600},[52,32997,1773],{"class":58},[52,32999,33000],{"class":54,"line":606},[52,33001,1778],{"class":58},[156,33003,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":33005},[33006,33007],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/diamondgradient",{"title":32815,"description":32823},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":33014,"title":33015,"body":33016,"category":27000,"componentType":20623,"description":33023,"extension":168,"meta":33341,"navigation":171,"path":33342,"requiresChild":171,"seo":33343,"stem":33344,"__hash__":33345},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":33017,"toc":33337},[33018,33021,33024,33026,33028,33031,33033,33335],[11,33019,33015],{"id":33020},"diffuseblur",[15,33022,33023],{},"Grain-like pixel displacement at random",[26676,33025],{"component":33015},[23,33027,26680],{"id":21278},[26682,33029],{":props":33030},"[{\"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,33032,26688],{"id":26687},[217,33034,33035,33092,33151,33207,33265],{":tabs":1543},[43,33036,33038],{"className":45,"code":33037,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33039,33040,33048,33055,33064,33068,33076,33084],{"__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],{"class":54,"line":80},[52,33051,83],{"class":58},[52,33053,33054],{"class":62},"DiffuseBlur\n",[52,33056,33057,33059,33061],{"class":54,"line":108},[52,33058,17644],{"class":66},[52,33060,70],{"class":58},[52,33062,33063],{"class":73},"\"30\"\n",[52,33065,33066],{"class":54,"line":118},[52,33067,26724],{"class":58},[52,33069,33070,33072,33074],{"class":54,"line":594},[52,33071,2213],{"class":58},[52,33073,2216],{"class":62},[52,33075,105],{"class":58},[52,33077,33078,33080,33082],{"class":54,"line":600},[52,33079,2230],{"class":58},[52,33081,33015],{"class":62},[52,33083,77],{"class":58},[52,33085,33086,33088,33090],{"class":54,"line":606},[52,33087,121],{"class":58},[52,33089,63],{"class":62},[52,33091,77],{"class":58},[43,33093,33095],{"className":360,"code":33094,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33096,33097,33105,33111,33123,33127,33135,33143],{"__ignoreMap":48},[52,33098,33099,33101,33103],{"class":54,"line":55},[52,33100,59],{"class":58},[52,33102,63],{"class":371},[52,33104,77],{"class":58},[52,33106,33107,33109],{"class":54,"line":80},[52,33108,83],{"class":58},[52,33110,33054],{"class":371},[52,33112,33113,33115,33117,33119,33121],{"class":54,"line":108},[52,33114,17755],{"class":66},[52,33116,70],{"class":231},[52,33118,723],{"class":58},[52,33120,12968],{"class":371},[52,33122,729],{"class":58},[52,33124,33125],{"class":54,"line":118},[52,33126,26724],{"class":58},[52,33128,33129,33131,33133],{"class":54,"line":594},[52,33130,2213],{"class":58},[52,33132,2216],{"class":371},[52,33134,105],{"class":58},[52,33136,33137,33139,33141],{"class":54,"line":600},[52,33138,2230],{"class":58},[52,33140,33015],{"class":371},[52,33142,77],{"class":58},[52,33144,33145,33147,33149],{"class":54,"line":606},[52,33146,121],{"class":58},[52,33148,63],{"class":371},[52,33150,77],{"class":58},[43,33152,33153],{"className":2507,"code":33094,"language":2509,"meta":48,"style":48},[31,33154,33155,33163,33169,33179,33183,33191,33199],{"__ignoreMap":48},[52,33156,33157,33159,33161],{"class":54,"line":55},[52,33158,59],{"class":58},[52,33160,63],{"class":371},[52,33162,77],{"class":58},[52,33164,33165,33167],{"class":54,"line":80},[52,33166,83],{"class":58},[52,33168,33054],{"class":371},[52,33170,33171,33173,33175,33177],{"class":54,"line":108},[52,33172,17755],{"class":66},[52,33174,24620],{"class":58},[52,33176,12968],{"class":371},[52,33178,729],{"class":58},[52,33180,33181],{"class":54,"line":118},[52,33182,26724],{"class":58},[52,33184,33185,33187,33189],{"class":54,"line":594},[52,33186,2213],{"class":58},[52,33188,2216],{"class":371},[52,33190,105],{"class":58},[52,33192,33193,33195,33197],{"class":54,"line":600},[52,33194,2230],{"class":58},[52,33196,33015],{"class":371},[52,33198,77],{"class":58},[52,33200,33201,33203,33205],{"class":54,"line":606},[52,33202,121],{"class":58},[52,33204,63],{"class":371},[52,33206,77],{"class":58},[43,33208,33209],{"className":419,"code":33094,"language":420,"meta":48,"style":48},[31,33210,33211,33219,33225,33237,33241,33249,33257],{"__ignoreMap":48},[52,33212,33213,33215,33217],{"class":54,"line":55},[52,33214,59],{"class":58},[52,33216,63],{"class":371},[52,33218,77],{"class":58},[52,33220,33221,33223],{"class":54,"line":80},[52,33222,83],{"class":58},[52,33224,33054],{"class":371},[52,33226,33227,33229,33231,33233,33235],{"class":54,"line":108},[52,33228,17755],{"class":66},[52,33230,70],{"class":231},[52,33232,723],{"class":58},[52,33234,12968],{"class":371},[52,33236,729],{"class":58},[52,33238,33239],{"class":54,"line":118},[52,33240,26724],{"class":58},[52,33242,33243,33245,33247],{"class":54,"line":594},[52,33244,2213],{"class":58},[52,33246,2216],{"class":371},[52,33248,105],{"class":58},[52,33250,33251,33253,33255],{"class":54,"line":600},[52,33252,2230],{"class":58},[52,33254,33015],{"class":371},[52,33256,77],{"class":58},[52,33258,33259,33261,33263],{"class":54,"line":606},[52,33260,121],{"class":58},[52,33262,63],{"class":371},[52,33264,77],{"class":58},[43,33266,33268],{"className":222,"code":33267,"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,33269,33270,33280,33284,33298,33302,33315,33323,33327,33331],{"__ignoreMap":48},[52,33271,33272,33274,33276,33278],{"class":54,"line":55},[52,33273,232],{"class":231},[52,33275,9005],{"class":58},[52,33277,238],{"class":231},[52,33279,9010],{"class":73},[52,33281,33282],{"class":54,"line":80},[52,33283,597],{"emptyLinePlaceholder":171},[52,33285,33286,33288,33290,33292,33294,33296],{"class":54,"line":108},[52,33287,1721],{"class":231},[52,33289,1724],{"class":371},[52,33291,1727],{"class":231},[52,33293,1730],{"class":231},[52,33295,1733],{"class":66},[52,33297,1736],{"class":58},[52,33299,33300],{"class":54,"line":118},[52,33301,1751],{"class":58},[52,33303,33304,33306,33309,33311,33313],{"class":54,"line":594},[52,33305,1756],{"class":58},[52,33307,33308],{"class":73},"'DiffuseBlur'",[52,33310,26969],{"class":58},[52,33312,12968],{"class":371},[52,33314,5033],{"class":58},[52,33316,33317,33319,33321],{"class":54,"line":600},[52,33318,4501],{"class":58},[52,33320,2869],{"class":73},[52,33322,2129],{"class":58},[52,33324,33325],{"class":54,"line":606},[52,33326,4518],{"class":58},[52,33328,33329],{"class":54,"line":653},[52,33330,1773],{"class":58},[52,33332,33333],{"class":54,"line":662},[52,33334,1778],{"class":58},[156,33336,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33338},[33339,33340],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/diffuseblur",{"title":33015,"description":33023},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":33347,"title":33348,"body":33349,"category":27278,"componentType":20623,"description":33356,"extension":168,"meta":33617,"navigation":171,"path":33618,"requiresChild":171,"seo":33619,"stem":33620,"__hash__":33621},"components/docs/components/Dither.md","Dither",{"type":8,"value":33350,"toc":33613},[33351,33354,33357,33359,33361,33364,33366,33611],[11,33352,33348],{"id":33353},"dither",[15,33355,33356],{},"Dithering effect with multiple pattern options",[26676,33358],{"component":33348},[23,33360,26680],{"id":21278},[26682,33362],{":props":33363},"[{\"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,33365,26688],{"id":26687},[217,33367,33368,33413,33457,33501,33545],{":tabs":1543},[43,33369,33371],{"className":45,"code":33370,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[31,33372,33373,33381,33389,33397,33405],{"__ignoreMap":48},[52,33374,33375,33377,33379],{"class":54,"line":55},[52,33376,59],{"class":58},[52,33378,63],{"class":62},[52,33380,77],{"class":58},[52,33382,33383,33385,33387],{"class":54,"line":80},[52,33384,83],{"class":58},[52,33386,33348],{"class":62},[52,33388,77],{"class":58},[52,33390,33391,33393,33395],{"class":54,"line":108},[52,33392,2213],{"class":58},[52,33394,2216],{"class":62},[52,33396,105],{"class":58},[52,33398,33399,33401,33403],{"class":54,"line":118},[52,33400,2230],{"class":58},[52,33402,33348],{"class":62},[52,33404,77],{"class":58},[52,33406,33407,33409,33411],{"class":54,"line":594},[52,33408,121],{"class":58},[52,33410,63],{"class":62},[52,33412,77],{"class":58},[43,33414,33415],{"className":360,"code":33370,"language":362,"meta":48,"style":48},[31,33416,33417,33425,33433,33441,33449],{"__ignoreMap":48},[52,33418,33419,33421,33423],{"class":54,"line":55},[52,33420,59],{"class":58},[52,33422,63],{"class":371},[52,33424,77],{"class":58},[52,33426,33427,33429,33431],{"class":54,"line":80},[52,33428,83],{"class":58},[52,33430,33348],{"class":371},[52,33432,77],{"class":58},[52,33434,33435,33437,33439],{"class":54,"line":108},[52,33436,2213],{"class":58},[52,33438,2216],{"class":371},[52,33440,105],{"class":58},[52,33442,33443,33445,33447],{"class":54,"line":118},[52,33444,2230],{"class":58},[52,33446,33348],{"class":371},[52,33448,77],{"class":58},[52,33450,33451,33453,33455],{"class":54,"line":594},[52,33452,121],{"class":58},[52,33454,63],{"class":371},[52,33456,77],{"class":58},[43,33458,33459],{"className":2507,"code":33370,"language":2509,"meta":48,"style":48},[31,33460,33461,33469,33477,33485,33493],{"__ignoreMap":48},[52,33462,33463,33465,33467],{"class":54,"line":55},[52,33464,59],{"class":58},[52,33466,63],{"class":371},[52,33468,77],{"class":58},[52,33470,33471,33473,33475],{"class":54,"line":80},[52,33472,83],{"class":58},[52,33474,33348],{"class":371},[52,33476,77],{"class":58},[52,33478,33479,33481,33483],{"class":54,"line":108},[52,33480,2213],{"class":58},[52,33482,2216],{"class":371},[52,33484,105],{"class":58},[52,33486,33487,33489,33491],{"class":54,"line":118},[52,33488,2230],{"class":58},[52,33490,33348],{"class":371},[52,33492,77],{"class":58},[52,33494,33495,33497,33499],{"class":54,"line":594},[52,33496,121],{"class":58},[52,33498,63],{"class":371},[52,33500,77],{"class":58},[43,33502,33503],{"className":419,"code":33370,"language":420,"meta":48,"style":48},[31,33504,33505,33513,33521,33529,33537],{"__ignoreMap":48},[52,33506,33507,33509,33511],{"class":54,"line":55},[52,33508,59],{"class":58},[52,33510,63],{"class":371},[52,33512,77],{"class":58},[52,33514,33515,33517,33519],{"class":54,"line":80},[52,33516,83],{"class":58},[52,33518,33348],{"class":371},[52,33520,77],{"class":58},[52,33522,33523,33525,33527],{"class":54,"line":108},[52,33524,2213],{"class":58},[52,33526,2216],{"class":371},[52,33528,105],{"class":58},[52,33530,33531,33533,33535],{"class":54,"line":118},[52,33532,2230],{"class":58},[52,33534,33348],{"class":371},[52,33536,77],{"class":58},[52,33538,33539,33541,33543],{"class":54,"line":594},[52,33540,121],{"class":58},[52,33542,63],{"class":371},[52,33544,77],{"class":58},[43,33546,33548],{"className":222,"code":33547,"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,33549,33550,33560,33564,33578,33582,33591,33599,33603,33607],{"__ignoreMap":48},[52,33551,33552,33554,33556,33558],{"class":54,"line":55},[52,33553,232],{"class":231},[52,33555,9005],{"class":58},[52,33557,238],{"class":231},[52,33559,9010],{"class":73},[52,33561,33562],{"class":54,"line":80},[52,33563,597],{"emptyLinePlaceholder":171},[52,33565,33566,33568,33570,33572,33574,33576],{"class":54,"line":108},[52,33567,1721],{"class":231},[52,33569,1724],{"class":371},[52,33571,1727],{"class":231},[52,33573,1730],{"class":231},[52,33575,1733],{"class":66},[52,33577,1736],{"class":58},[52,33579,33580],{"class":54,"line":118},[52,33581,1751],{"class":58},[52,33583,33584,33586,33589],{"class":54,"line":594},[52,33585,1756],{"class":58},[52,33587,33588],{"class":73},"'Dither'",[52,33590,4496],{"class":58},[52,33592,33593,33595,33597],{"class":54,"line":600},[52,33594,4501],{"class":58},[52,33596,2869],{"class":73},[52,33598,2129],{"class":58},[52,33600,33601],{"class":54,"line":606},[52,33602,4518],{"class":58},[52,33604,33605],{"class":54,"line":653},[52,33606,1773],{"class":58},[52,33608,33609],{"class":54,"line":662},[52,33610,1778],{"class":58},[156,33612,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":33614},[33615,33616],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/dither",{"title":33348,"description":33356},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":33623,"title":33624,"body":33625,"category":27535,"componentType":20617,"description":33632,"extension":168,"meta":33860,"navigation":171,"path":33861,"requiresChild":27538,"seo":33862,"stem":33863,"__hash__":33864},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":33626,"toc":33856},[33627,33630,33633,33635,33637,33640,33642,33854],[11,33628,33624],{"id":33629},"dotgrid",[15,33631,33632],{},"Grid of dots with optional twinkling animation",[26676,33634],{"component":33624},[23,33636,26680],{"id":21278},[26682,33638],{":props":33639},"[{\"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,33641,26688],{"id":26687},[217,33643,33644,33683,33721,33759,33797],{":tabs":1543},[43,33645,33647],{"className":45,"code":33646,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,33648,33649,33657,33663,33671,33675],{"__ignoreMap":48},[52,33650,33651,33653,33655],{"class":54,"line":55},[52,33652,59],{"class":58},[52,33654,63],{"class":62},[52,33656,77],{"class":58},[52,33658,33659,33661],{"class":54,"line":80},[52,33660,83],{"class":58},[52,33662,16778],{"class":62},[52,33664,33665,33667,33669],{"class":54,"line":108},[52,33666,7125],{"class":66},[52,33668,70],{"class":58},[52,33670,7081],{"class":73},[52,33672,33673],{"class":54,"line":118},[52,33674,1224],{"class":58},[52,33676,33677,33679,33681],{"class":54,"line":594},[52,33678,121],{"class":58},[52,33680,63],{"class":62},[52,33682,77],{"class":58},[43,33684,33685],{"className":360,"code":33646,"language":362,"meta":48,"style":48},[31,33686,33687,33695,33701,33709,33713],{"__ignoreMap":48},[52,33688,33689,33691,33693],{"class":54,"line":55},[52,33690,59],{"class":58},[52,33692,63],{"class":371},[52,33694,77],{"class":58},[52,33696,33697,33699],{"class":54,"line":80},[52,33698,83],{"class":58},[52,33700,16778],{"class":371},[52,33702,33703,33705,33707],{"class":54,"line":108},[52,33704,7125],{"class":66},[52,33706,70],{"class":231},[52,33708,7081],{"class":73},[52,33710,33711],{"class":54,"line":118},[52,33712,1224],{"class":58},[52,33714,33715,33717,33719],{"class":54,"line":594},[52,33716,121],{"class":58},[52,33718,63],{"class":371},[52,33720,77],{"class":58},[43,33722,33723],{"className":2507,"code":33646,"language":2509,"meta":48,"style":48},[31,33724,33725,33733,33739,33747,33751],{"__ignoreMap":48},[52,33726,33727,33729,33731],{"class":54,"line":55},[52,33728,59],{"class":58},[52,33730,63],{"class":371},[52,33732,77],{"class":58},[52,33734,33735,33737],{"class":54,"line":80},[52,33736,83],{"class":58},[52,33738,16778],{"class":371},[52,33740,33741,33743,33745],{"class":54,"line":108},[52,33742,7125],{"class":66},[52,33744,70],{"class":58},[52,33746,7081],{"class":73},[52,33748,33749],{"class":54,"line":118},[52,33750,1224],{"class":58},[52,33752,33753,33755,33757],{"class":54,"line":594},[52,33754,121],{"class":58},[52,33756,63],{"class":371},[52,33758,77],{"class":58},[43,33760,33761],{"className":419,"code":33646,"language":420,"meta":48,"style":48},[31,33762,33763,33771,33777,33785,33789],{"__ignoreMap":48},[52,33764,33765,33767,33769],{"class":54,"line":55},[52,33766,59],{"class":58},[52,33768,63],{"class":371},[52,33770,77],{"class":58},[52,33772,33773,33775],{"class":54,"line":80},[52,33774,83],{"class":58},[52,33776,16778],{"class":371},[52,33778,33779,33781,33783],{"class":54,"line":108},[52,33780,7125],{"class":66},[52,33782,70],{"class":231},[52,33784,7081],{"class":73},[52,33786,33787],{"class":54,"line":118},[52,33788,1224],{"class":58},[52,33790,33791,33793,33795],{"class":54,"line":594},[52,33792,121],{"class":58},[52,33794,63],{"class":371},[52,33796,77],{"class":58},[43,33798,33800],{"className":222,"code":33799,"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,33801,33802,33812,33816,33830,33834,33846,33850],{"__ignoreMap":48},[52,33803,33804,33806,33808,33810],{"class":54,"line":55},[52,33805,232],{"class":231},[52,33807,9005],{"class":58},[52,33809,238],{"class":231},[52,33811,9010],{"class":73},[52,33813,33814],{"class":54,"line":80},[52,33815,597],{"emptyLinePlaceholder":171},[52,33817,33818,33820,33822,33824,33826,33828],{"class":54,"line":108},[52,33819,1721],{"class":231},[52,33821,1724],{"class":371},[52,33823,1727],{"class":231},[52,33825,1730],{"class":231},[52,33827,1733],{"class":66},[52,33829,1736],{"class":58},[52,33831,33832],{"class":54,"line":118},[52,33833,1751],{"class":58},[52,33835,33836,33838,33840,33842,33844],{"class":54,"line":594},[52,33837,1756],{"class":58},[52,33839,17329],{"class":73},[52,33841,1762],{"class":58},[52,33843,7660],{"class":73},[52,33845,1768],{"class":58},[52,33847,33848],{"class":54,"line":600},[52,33849,1773],{"class":58},[52,33851,33852],{"class":54,"line":606},[52,33853,1778],{"class":58},[156,33855,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33857},[33858,33859],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/dotgrid",{"title":33624,"description":33632},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":33866,"title":33867,"body":33868,"category":27278,"componentType":20623,"description":33875,"extension":168,"meta":34229,"navigation":171,"path":34230,"requiresChild":171,"seo":34231,"stem":34232,"__hash__":34233},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":33869,"toc":34225},[33870,33873,33876,33878,33880,33883,33885,34223],[11,33871,33867],{"id":33872},"dropshadow",[15,33874,33875],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[26676,33877],{"component":33867},[23,33879,26680],{"id":21278},[26682,33881],{":props":33882},"[{\"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,33884,26688],{"id":26687},[217,33886,33887,33951,34018,34082,34148],{":tabs":1543},[43,33888,33890],{"className":45,"code":33889,"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,33891,33892,33900,33907,33915,33923,33927,33935,33943],{"__ignoreMap":48},[52,33893,33894,33896,33898],{"class":54,"line":55},[52,33895,59],{"class":58},[52,33897,63],{"class":62},[52,33899,77],{"class":58},[52,33901,33902,33904],{"class":54,"line":80},[52,33903,83],{"class":58},[52,33905,33906],{"class":62},"DropShadow\n",[52,33908,33909,33911,33913],{"class":54,"line":108},[52,33910,7125],{"class":66},[52,33912,70],{"class":58},[52,33914,16749],{"class":73},[52,33916,33917,33919,33921],{"class":54,"line":118},[52,33918,17644],{"class":66},[52,33920,70],{"class":58},[52,33922,32237],{"class":73},[52,33924,33925],{"class":54,"line":594},[52,33926,26724],{"class":58},[52,33928,33929,33931,33933],{"class":54,"line":600},[52,33930,2213],{"class":58},[52,33932,2216],{"class":62},[52,33934,105],{"class":58},[52,33936,33937,33939,33941],{"class":54,"line":606},[52,33938,2230],{"class":58},[52,33940,33867],{"class":62},[52,33942,77],{"class":58},[52,33944,33945,33947,33949],{"class":54,"line":653},[52,33946,121],{"class":58},[52,33948,63],{"class":62},[52,33950,77],{"class":58},[43,33952,33954],{"className":360,"code":33953,"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,33955,33956,33964,33970,33978,33990,33994,34002,34010],{"__ignoreMap":48},[52,33957,33958,33960,33962],{"class":54,"line":55},[52,33959,59],{"class":58},[52,33961,63],{"class":371},[52,33963,77],{"class":58},[52,33965,33966,33968],{"class":54,"line":80},[52,33967,83],{"class":58},[52,33969,33906],{"class":371},[52,33971,33972,33974,33976],{"class":54,"line":108},[52,33973,7125],{"class":66},[52,33975,70],{"class":231},[52,33977,16749],{"class":73},[52,33979,33980,33982,33984,33986,33988],{"class":54,"line":118},[52,33981,17755],{"class":66},[52,33983,70],{"class":231},[52,33985,723],{"class":58},[52,33987,5241],{"class":371},[52,33989,729],{"class":58},[52,33991,33992],{"class":54,"line":594},[52,33993,26724],{"class":58},[52,33995,33996,33998,34000],{"class":54,"line":600},[52,33997,2213],{"class":58},[52,33999,2216],{"class":371},[52,34001,105],{"class":58},[52,34003,34004,34006,34008],{"class":54,"line":606},[52,34005,2230],{"class":58},[52,34007,33867],{"class":371},[52,34009,77],{"class":58},[52,34011,34012,34014,34016],{"class":54,"line":653},[52,34013,121],{"class":58},[52,34015,63],{"class":371},[52,34017,77],{"class":58},[43,34019,34020],{"className":2507,"code":33953,"language":2509,"meta":48,"style":48},[31,34021,34022,34030,34036,34044,34054,34058,34066,34074],{"__ignoreMap":48},[52,34023,34024,34026,34028],{"class":54,"line":55},[52,34025,59],{"class":58},[52,34027,63],{"class":371},[52,34029,77],{"class":58},[52,34031,34032,34034],{"class":54,"line":80},[52,34033,83],{"class":58},[52,34035,33906],{"class":371},[52,34037,34038,34040,34042],{"class":54,"line":108},[52,34039,7125],{"class":66},[52,34041,70],{"class":58},[52,34043,16749],{"class":73},[52,34045,34046,34048,34050,34052],{"class":54,"line":118},[52,34047,17755],{"class":66},[52,34049,24620],{"class":58},[52,34051,5241],{"class":371},[52,34053,729],{"class":58},[52,34055,34056],{"class":54,"line":594},[52,34057,26724],{"class":58},[52,34059,34060,34062,34064],{"class":54,"line":600},[52,34061,2213],{"class":58},[52,34063,2216],{"class":371},[52,34065,105],{"class":58},[52,34067,34068,34070,34072],{"class":54,"line":606},[52,34069,2230],{"class":58},[52,34071,33867],{"class":371},[52,34073,77],{"class":58},[52,34075,34076,34078,34080],{"class":54,"line":653},[52,34077,121],{"class":58},[52,34079,63],{"class":371},[52,34081,77],{"class":58},[43,34083,34084],{"className":419,"code":33953,"language":420,"meta":48,"style":48},[31,34085,34086,34094,34100,34108,34120,34124,34132,34140],{"__ignoreMap":48},[52,34087,34088,34090,34092],{"class":54,"line":55},[52,34089,59],{"class":58},[52,34091,63],{"class":371},[52,34093,77],{"class":58},[52,34095,34096,34098],{"class":54,"line":80},[52,34097,83],{"class":58},[52,34099,33906],{"class":371},[52,34101,34102,34104,34106],{"class":54,"line":108},[52,34103,7125],{"class":66},[52,34105,70],{"class":231},[52,34107,16749],{"class":73},[52,34109,34110,34112,34114,34116,34118],{"class":54,"line":118},[52,34111,17755],{"class":66},[52,34113,70],{"class":231},[52,34115,723],{"class":58},[52,34117,5241],{"class":371},[52,34119,729],{"class":58},[52,34121,34122],{"class":54,"line":594},[52,34123,26724],{"class":58},[52,34125,34126,34128,34130],{"class":54,"line":600},[52,34127,2213],{"class":58},[52,34129,2216],{"class":371},[52,34131,105],{"class":58},[52,34133,34134,34136,34138],{"class":54,"line":606},[52,34135,2230],{"class":58},[52,34137,33867],{"class":371},[52,34139,77],{"class":58},[52,34141,34142,34144,34146],{"class":54,"line":653},[52,34143,121],{"class":58},[52,34145,63],{"class":371},[52,34147,77],{"class":58},[43,34149,34151],{"className":222,"code":34150,"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,34152,34153,34163,34167,34181,34185,34203,34211,34215,34219],{"__ignoreMap":48},[52,34154,34155,34157,34159,34161],{"class":54,"line":55},[52,34156,232],{"class":231},[52,34158,9005],{"class":58},[52,34160,238],{"class":231},[52,34162,9010],{"class":73},[52,34164,34165],{"class":54,"line":80},[52,34166,597],{"emptyLinePlaceholder":171},[52,34168,34169,34171,34173,34175,34177,34179],{"class":54,"line":108},[52,34170,1721],{"class":231},[52,34172,1724],{"class":371},[52,34174,1727],{"class":231},[52,34176,1730],{"class":231},[52,34178,1733],{"class":66},[52,34180,1736],{"class":58},[52,34182,34183],{"class":54,"line":118},[52,34184,1751],{"class":58},[52,34186,34187,34189,34192,34194,34196,34199,34201],{"class":54,"line":594},[52,34188,1756],{"class":58},[52,34190,34191],{"class":73},"'DropShadow'",[52,34193,1762],{"class":58},[52,34195,17308],{"class":73},[52,34197,34198],{"class":58},", intensity: ",[52,34200,5241],{"class":371},[52,34202,5033],{"class":58},[52,34204,34205,34207,34209],{"class":54,"line":600},[52,34206,4501],{"class":58},[52,34208,2869],{"class":73},[52,34210,2129],{"class":58},[52,34212,34213],{"class":54,"line":606},[52,34214,4518],{"class":58},[52,34216,34217],{"class":54,"line":653},[52,34218,1773],{"class":58},[52,34220,34221],{"class":54,"line":662},[52,34222,1778],{"class":58},[156,34224,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34226},[34227,34228],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/dropshadow",{"title":33867,"description":33875},"docs/components/DropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":34235,"title":34236,"body":34237,"category":28546,"componentType":20623,"description":34244,"extension":168,"meta":34505,"navigation":171,"path":34506,"requiresChild":171,"seo":34507,"stem":34508,"__hash__":34509},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":34238,"toc":34501},[34239,34242,34245,34247,34249,34252,34254,34499],[11,34240,34236],{"id":34241},"duotone",[15,34243,34244],{},"Map colors to two tones based on luminance",[26676,34246],{"component":34236},[23,34248,26680],{"id":21278},[26682,34250],{":props":34251},"[{\"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,34253,26688],{"id":26687},[217,34255,34256,34301,34345,34389,34433],{":tabs":1543},[43,34257,34259],{"className":45,"code":34258,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[31,34260,34261,34269,34277,34285,34293],{"__ignoreMap":48},[52,34262,34263,34265,34267],{"class":54,"line":55},[52,34264,59],{"class":58},[52,34266,63],{"class":62},[52,34268,77],{"class":58},[52,34270,34271,34273,34275],{"class":54,"line":80},[52,34272,83],{"class":58},[52,34274,34236],{"class":62},[52,34276,77],{"class":58},[52,34278,34279,34281,34283],{"class":54,"line":108},[52,34280,2213],{"class":58},[52,34282,2216],{"class":62},[52,34284,105],{"class":58},[52,34286,34287,34289,34291],{"class":54,"line":118},[52,34288,2230],{"class":58},[52,34290,34236],{"class":62},[52,34292,77],{"class":58},[52,34294,34295,34297,34299],{"class":54,"line":594},[52,34296,121],{"class":58},[52,34298,63],{"class":62},[52,34300,77],{"class":58},[43,34302,34303],{"className":360,"code":34258,"language":362,"meta":48,"style":48},[31,34304,34305,34313,34321,34329,34337],{"__ignoreMap":48},[52,34306,34307,34309,34311],{"class":54,"line":55},[52,34308,59],{"class":58},[52,34310,63],{"class":371},[52,34312,77],{"class":58},[52,34314,34315,34317,34319],{"class":54,"line":80},[52,34316,83],{"class":58},[52,34318,34236],{"class":371},[52,34320,77],{"class":58},[52,34322,34323,34325,34327],{"class":54,"line":108},[52,34324,2213],{"class":58},[52,34326,2216],{"class":371},[52,34328,105],{"class":58},[52,34330,34331,34333,34335],{"class":54,"line":118},[52,34332,2230],{"class":58},[52,34334,34236],{"class":371},[52,34336,77],{"class":58},[52,34338,34339,34341,34343],{"class":54,"line":594},[52,34340,121],{"class":58},[52,34342,63],{"class":371},[52,34344,77],{"class":58},[43,34346,34347],{"className":2507,"code":34258,"language":2509,"meta":48,"style":48},[31,34348,34349,34357,34365,34373,34381],{"__ignoreMap":48},[52,34350,34351,34353,34355],{"class":54,"line":55},[52,34352,59],{"class":58},[52,34354,63],{"class":371},[52,34356,77],{"class":58},[52,34358,34359,34361,34363],{"class":54,"line":80},[52,34360,83],{"class":58},[52,34362,34236],{"class":371},[52,34364,77],{"class":58},[52,34366,34367,34369,34371],{"class":54,"line":108},[52,34368,2213],{"class":58},[52,34370,2216],{"class":371},[52,34372,105],{"class":58},[52,34374,34375,34377,34379],{"class":54,"line":118},[52,34376,2230],{"class":58},[52,34378,34236],{"class":371},[52,34380,77],{"class":58},[52,34382,34383,34385,34387],{"class":54,"line":594},[52,34384,121],{"class":58},[52,34386,63],{"class":371},[52,34388,77],{"class":58},[43,34390,34391],{"className":419,"code":34258,"language":420,"meta":48,"style":48},[31,34392,34393,34401,34409,34417,34425],{"__ignoreMap":48},[52,34394,34395,34397,34399],{"class":54,"line":55},[52,34396,59],{"class":58},[52,34398,63],{"class":371},[52,34400,77],{"class":58},[52,34402,34403,34405,34407],{"class":54,"line":80},[52,34404,83],{"class":58},[52,34406,34236],{"class":371},[52,34408,77],{"class":58},[52,34410,34411,34413,34415],{"class":54,"line":108},[52,34412,2213],{"class":58},[52,34414,2216],{"class":371},[52,34416,105],{"class":58},[52,34418,34419,34421,34423],{"class":54,"line":118},[52,34420,2230],{"class":58},[52,34422,34236],{"class":371},[52,34424,77],{"class":58},[52,34426,34427,34429,34431],{"class":54,"line":594},[52,34428,121],{"class":58},[52,34430,63],{"class":371},[52,34432,77],{"class":58},[43,34434,34436],{"className":222,"code":34435,"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,34437,34438,34448,34452,34466,34470,34479,34487,34491,34495],{"__ignoreMap":48},[52,34439,34440,34442,34444,34446],{"class":54,"line":55},[52,34441,232],{"class":231},[52,34443,9005],{"class":58},[52,34445,238],{"class":231},[52,34447,9010],{"class":73},[52,34449,34450],{"class":54,"line":80},[52,34451,597],{"emptyLinePlaceholder":171},[52,34453,34454,34456,34458,34460,34462,34464],{"class":54,"line":108},[52,34455,1721],{"class":231},[52,34457,1724],{"class":371},[52,34459,1727],{"class":231},[52,34461,1730],{"class":231},[52,34463,1733],{"class":66},[52,34465,1736],{"class":58},[52,34467,34468],{"class":54,"line":118},[52,34469,1751],{"class":58},[52,34471,34472,34474,34477],{"class":54,"line":594},[52,34473,1756],{"class":58},[52,34475,34476],{"class":73},"'Duotone'",[52,34478,4496],{"class":58},[52,34480,34481,34483,34485],{"class":54,"line":600},[52,34482,4501],{"class":58},[52,34484,2869],{"class":73},[52,34486,2129],{"class":58},[52,34488,34489],{"class":54,"line":606},[52,34490,4518],{"class":58},[52,34492,34493],{"class":54,"line":653},[52,34494,1773],{"class":58},[52,34496,34497],{"class":54,"line":662},[52,34498,1778],{"class":58},[156,34500,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":34502},[34503,34504],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/duotone",{"title":34236,"description":34244},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":34511,"title":34512,"body":34513,"category":30502,"componentType":20617,"description":34520,"extension":168,"meta":34750,"navigation":171,"path":34751,"requiresChild":27538,"seo":34752,"stem":34753,"__hash__":34754},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":34514,"toc":34746},[34515,34518,34521,34523,34525,34528,34530,34744],[11,34516,34512],{"id":34517},"ellipse",[15,34519,34520],{},"Ellipse with independently adjustable horizontal and vertical radii",[26676,34522],{"component":34512},[23,34524,26680],{"id":21278},[26682,34526],{":props":34527},"[{\"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,34529,26688],{"id":26687},[217,34531,34532,34572,34610,34648,34686],{":tabs":1543},[43,34533,34535],{"className":45,"code":34534,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,34536,34537,34545,34552,34560,34564],{"__ignoreMap":48},[52,34538,34539,34541,34543],{"class":54,"line":55},[52,34540,59],{"class":58},[52,34542,63],{"class":62},[52,34544,77],{"class":58},[52,34546,34547,34549],{"class":54,"line":80},[52,34548,83],{"class":58},[52,34550,34551],{"class":62},"Ellipse\n",[52,34553,34554,34556,34558],{"class":54,"line":108},[52,34555,7125],{"class":66},[52,34557,70],{"class":58},[52,34559,7081],{"class":73},[52,34561,34562],{"class":54,"line":118},[52,34563,1224],{"class":58},[52,34565,34566,34568,34570],{"class":54,"line":594},[52,34567,121],{"class":58},[52,34569,63],{"class":62},[52,34571,77],{"class":58},[43,34573,34574],{"className":360,"code":34534,"language":362,"meta":48,"style":48},[31,34575,34576,34584,34590,34598,34602],{"__ignoreMap":48},[52,34577,34578,34580,34582],{"class":54,"line":55},[52,34579,59],{"class":58},[52,34581,63],{"class":371},[52,34583,77],{"class":58},[52,34585,34586,34588],{"class":54,"line":80},[52,34587,83],{"class":58},[52,34589,34551],{"class":371},[52,34591,34592,34594,34596],{"class":54,"line":108},[52,34593,7125],{"class":66},[52,34595,70],{"class":231},[52,34597,7081],{"class":73},[52,34599,34600],{"class":54,"line":118},[52,34601,1224],{"class":58},[52,34603,34604,34606,34608],{"class":54,"line":594},[52,34605,121],{"class":58},[52,34607,63],{"class":371},[52,34609,77],{"class":58},[43,34611,34612],{"className":2507,"code":34534,"language":2509,"meta":48,"style":48},[31,34613,34614,34622,34628,34636,34640],{"__ignoreMap":48},[52,34615,34616,34618,34620],{"class":54,"line":55},[52,34617,59],{"class":58},[52,34619,63],{"class":371},[52,34621,77],{"class":58},[52,34623,34624,34626],{"class":54,"line":80},[52,34625,83],{"class":58},[52,34627,34551],{"class":371},[52,34629,34630,34632,34634],{"class":54,"line":108},[52,34631,7125],{"class":66},[52,34633,70],{"class":58},[52,34635,7081],{"class":73},[52,34637,34638],{"class":54,"line":118},[52,34639,1224],{"class":58},[52,34641,34642,34644,34646],{"class":54,"line":594},[52,34643,121],{"class":58},[52,34645,63],{"class":371},[52,34647,77],{"class":58},[43,34649,34650],{"className":419,"code":34534,"language":420,"meta":48,"style":48},[31,34651,34652,34660,34666,34674,34678],{"__ignoreMap":48},[52,34653,34654,34656,34658],{"class":54,"line":55},[52,34655,59],{"class":58},[52,34657,63],{"class":371},[52,34659,77],{"class":58},[52,34661,34662,34664],{"class":54,"line":80},[52,34663,83],{"class":58},[52,34665,34551],{"class":371},[52,34667,34668,34670,34672],{"class":54,"line":108},[52,34669,7125],{"class":66},[52,34671,70],{"class":231},[52,34673,7081],{"class":73},[52,34675,34676],{"class":54,"line":118},[52,34677,1224],{"class":58},[52,34679,34680,34682,34684],{"class":54,"line":594},[52,34681,121],{"class":58},[52,34683,63],{"class":371},[52,34685,77],{"class":58},[43,34687,34689],{"className":222,"code":34688,"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,34690,34691,34701,34705,34719,34723,34736,34740],{"__ignoreMap":48},[52,34692,34693,34695,34697,34699],{"class":54,"line":55},[52,34694,232],{"class":231},[52,34696,9005],{"class":58},[52,34698,238],{"class":231},[52,34700,9010],{"class":73},[52,34702,34703],{"class":54,"line":80},[52,34704,597],{"emptyLinePlaceholder":171},[52,34706,34707,34709,34711,34713,34715,34717],{"class":54,"line":108},[52,34708,1721],{"class":231},[52,34710,1724],{"class":371},[52,34712,1727],{"class":231},[52,34714,1730],{"class":231},[52,34716,1733],{"class":66},[52,34718,1736],{"class":58},[52,34720,34721],{"class":54,"line":118},[52,34722,1751],{"class":58},[52,34724,34725,34727,34730,34732,34734],{"class":54,"line":594},[52,34726,1756],{"class":58},[52,34728,34729],{"class":73},"'Ellipse'",[52,34731,1762],{"class":58},[52,34733,7660],{"class":73},[52,34735,1768],{"class":58},[52,34737,34738],{"class":54,"line":600},[52,34739,1773],{"class":58},[52,34741,34742],{"class":54,"line":606},[52,34743,1778],{"class":58},[156,34745,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34747},[34748,34749],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/ellipse",{"title":34512,"description":34520},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":34756,"title":18255,"body":34757,"category":32173,"componentType":20623,"description":34764,"extension":168,"meta":35024,"navigation":171,"path":35025,"requiresChild":171,"seo":35026,"stem":35027,"__hash__":35028},"components/docs/components/Emboss.md",{"type":8,"value":34758,"toc":35020},[34759,34762,34765,34767,34769,34772,34774,35018],[11,34760,18255],{"id":34761},"emboss",[15,34763,34764],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[26676,34766],{"component":18255},[23,34768,26680],{"id":21278},[26682,34770],{":props":34771},"[{\"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,34773,26688],{"id":26687},[217,34775,34776,34821,34865,34909,34953],{":tabs":1543},[43,34777,34779],{"className":45,"code":34778,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[31,34780,34781,34789,34797,34805,34813],{"__ignoreMap":48},[52,34782,34783,34785,34787],{"class":54,"line":55},[52,34784,59],{"class":58},[52,34786,63],{"class":62},[52,34788,77],{"class":58},[52,34790,34791,34793,34795],{"class":54,"line":80},[52,34792,83],{"class":58},[52,34794,18255],{"class":62},[52,34796,77],{"class":58},[52,34798,34799,34801,34803],{"class":54,"line":108},[52,34800,2213],{"class":58},[52,34802,2216],{"class":62},[52,34804,105],{"class":58},[52,34806,34807,34809,34811],{"class":54,"line":118},[52,34808,2230],{"class":58},[52,34810,18255],{"class":62},[52,34812,77],{"class":58},[52,34814,34815,34817,34819],{"class":54,"line":594},[52,34816,121],{"class":58},[52,34818,63],{"class":62},[52,34820,77],{"class":58},[43,34822,34823],{"className":360,"code":34778,"language":362,"meta":48,"style":48},[31,34824,34825,34833,34841,34849,34857],{"__ignoreMap":48},[52,34826,34827,34829,34831],{"class":54,"line":55},[52,34828,59],{"class":58},[52,34830,63],{"class":371},[52,34832,77],{"class":58},[52,34834,34835,34837,34839],{"class":54,"line":80},[52,34836,83],{"class":58},[52,34838,18255],{"class":371},[52,34840,77],{"class":58},[52,34842,34843,34845,34847],{"class":54,"line":108},[52,34844,2213],{"class":58},[52,34846,2216],{"class":371},[52,34848,105],{"class":58},[52,34850,34851,34853,34855],{"class":54,"line":118},[52,34852,2230],{"class":58},[52,34854,18255],{"class":371},[52,34856,77],{"class":58},[52,34858,34859,34861,34863],{"class":54,"line":594},[52,34860,121],{"class":58},[52,34862,63],{"class":371},[52,34864,77],{"class":58},[43,34866,34867],{"className":2507,"code":34778,"language":2509,"meta":48,"style":48},[31,34868,34869,34877,34885,34893,34901],{"__ignoreMap":48},[52,34870,34871,34873,34875],{"class":54,"line":55},[52,34872,59],{"class":58},[52,34874,63],{"class":371},[52,34876,77],{"class":58},[52,34878,34879,34881,34883],{"class":54,"line":80},[52,34880,83],{"class":58},[52,34882,18255],{"class":371},[52,34884,77],{"class":58},[52,34886,34887,34889,34891],{"class":54,"line":108},[52,34888,2213],{"class":58},[52,34890,2216],{"class":371},[52,34892,105],{"class":58},[52,34894,34895,34897,34899],{"class":54,"line":118},[52,34896,2230],{"class":58},[52,34898,18255],{"class":371},[52,34900,77],{"class":58},[52,34902,34903,34905,34907],{"class":54,"line":594},[52,34904,121],{"class":58},[52,34906,63],{"class":371},[52,34908,77],{"class":58},[43,34910,34911],{"className":419,"code":34778,"language":420,"meta":48,"style":48},[31,34912,34913,34921,34929,34937,34945],{"__ignoreMap":48},[52,34914,34915,34917,34919],{"class":54,"line":55},[52,34916,59],{"class":58},[52,34918,63],{"class":371},[52,34920,77],{"class":58},[52,34922,34923,34925,34927],{"class":54,"line":80},[52,34924,83],{"class":58},[52,34926,18255],{"class":371},[52,34928,77],{"class":58},[52,34930,34931,34933,34935],{"class":54,"line":108},[52,34932,2213],{"class":58},[52,34934,2216],{"class":371},[52,34936,105],{"class":58},[52,34938,34939,34941,34943],{"class":54,"line":118},[52,34940,2230],{"class":58},[52,34942,18255],{"class":371},[52,34944,77],{"class":58},[52,34946,34947,34949,34951],{"class":54,"line":594},[52,34948,121],{"class":58},[52,34950,63],{"class":371},[52,34952,77],{"class":58},[43,34954,34956],{"className":222,"code":34955,"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,34957,34958,34968,34972,34986,34990,34998,35006,35010,35014],{"__ignoreMap":48},[52,34959,34960,34962,34964,34966],{"class":54,"line":55},[52,34961,232],{"class":231},[52,34963,9005],{"class":58},[52,34965,238],{"class":231},[52,34967,9010],{"class":73},[52,34969,34970],{"class":54,"line":80},[52,34971,597],{"emptyLinePlaceholder":171},[52,34973,34974,34976,34978,34980,34982,34984],{"class":54,"line":108},[52,34975,1721],{"class":231},[52,34977,1724],{"class":371},[52,34979,1727],{"class":231},[52,34981,1730],{"class":231},[52,34983,1733],{"class":66},[52,34985,1736],{"class":58},[52,34987,34988],{"class":54,"line":118},[52,34989,1751],{"class":58},[52,34991,34992,34994,34996],{"class":54,"line":594},[52,34993,1756],{"class":58},[52,34995,18903],{"class":73},[52,34997,4496],{"class":58},[52,34999,35000,35002,35004],{"class":54,"line":600},[52,35001,4501],{"class":58},[52,35003,2869],{"class":73},[52,35005,2129],{"class":58},[52,35007,35008],{"class":54,"line":606},[52,35009,4518],{"class":58},[52,35011,35012],{"class":54,"line":653},[52,35013,1773],{"class":58},[52,35015,35016],{"class":54,"line":662},[52,35017,1778],{"class":58},[156,35019,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35021},[35022,35023],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/emboss",{"title":18255,"description":34764},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":35030,"title":35031,"body":35032,"category":27535,"componentType":20617,"description":35039,"extension":168,"meta":35224,"navigation":171,"path":35225,"requiresChild":27538,"seo":35226,"stem":35227,"__hash__":35228},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":35033,"toc":35220},[35034,35037,35040,35042,35044,35047,35049,35218],[11,35035,35031],{"id":35036},"fallinglines",[15,35038,35039],{},"Directional falling lines with a leading-to-trailing color fade",[26676,35041],{"component":35031},[23,35043,26680],{"id":21278},[26682,35045],{":props":35046},"[{\"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,35048,26688],{"id":26687},[217,35050,35051,35080,35108,35136,35164],{":tabs":1543},[43,35052,35054],{"className":45,"code":35053,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[31,35055,35056,35064,35072],{"__ignoreMap":48},[52,35057,35058,35060,35062],{"class":54,"line":55},[52,35059,59],{"class":58},[52,35061,63],{"class":62},[52,35063,77],{"class":58},[52,35065,35066,35068,35070],{"class":54,"line":80},[52,35067,83],{"class":58},[52,35069,35031],{"class":62},[52,35071,105],{"class":58},[52,35073,35074,35076,35078],{"class":54,"line":108},[52,35075,121],{"class":58},[52,35077,63],{"class":62},[52,35079,77],{"class":58},[43,35081,35082],{"className":360,"code":35053,"language":362,"meta":48,"style":48},[31,35083,35084,35092,35100],{"__ignoreMap":48},[52,35085,35086,35088,35090],{"class":54,"line":55},[52,35087,59],{"class":58},[52,35089,63],{"class":371},[52,35091,77],{"class":58},[52,35093,35094,35096,35098],{"class":54,"line":80},[52,35095,83],{"class":58},[52,35097,35031],{"class":371},[52,35099,105],{"class":58},[52,35101,35102,35104,35106],{"class":54,"line":108},[52,35103,121],{"class":58},[52,35105,63],{"class":371},[52,35107,77],{"class":58},[43,35109,35110],{"className":2507,"code":35053,"language":2509,"meta":48,"style":48},[31,35111,35112,35120,35128],{"__ignoreMap":48},[52,35113,35114,35116,35118],{"class":54,"line":55},[52,35115,59],{"class":58},[52,35117,63],{"class":371},[52,35119,77],{"class":58},[52,35121,35122,35124,35126],{"class":54,"line":80},[52,35123,83],{"class":58},[52,35125,35031],{"class":371},[52,35127,105],{"class":58},[52,35129,35130,35132,35134],{"class":54,"line":108},[52,35131,121],{"class":58},[52,35133,63],{"class":371},[52,35135,77],{"class":58},[43,35137,35138],{"className":419,"code":35053,"language":420,"meta":48,"style":48},[31,35139,35140,35148,35156],{"__ignoreMap":48},[52,35141,35142,35144,35146],{"class":54,"line":55},[52,35143,59],{"class":58},[52,35145,63],{"class":371},[52,35147,77],{"class":58},[52,35149,35150,35152,35154],{"class":54,"line":80},[52,35151,83],{"class":58},[52,35153,35031],{"class":371},[52,35155,105],{"class":58},[52,35157,35158,35160,35162],{"class":54,"line":108},[52,35159,121],{"class":58},[52,35161,63],{"class":371},[52,35163,77],{"class":58},[43,35165,35167],{"className":222,"code":35166,"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,35168,35169,35179,35183,35197,35201,35210,35214],{"__ignoreMap":48},[52,35170,35171,35173,35175,35177],{"class":54,"line":55},[52,35172,232],{"class":231},[52,35174,9005],{"class":58},[52,35176,238],{"class":231},[52,35178,9010],{"class":73},[52,35180,35181],{"class":54,"line":80},[52,35182,597],{"emptyLinePlaceholder":171},[52,35184,35185,35187,35189,35191,35193,35195],{"class":54,"line":108},[52,35186,1721],{"class":231},[52,35188,1724],{"class":371},[52,35190,1727],{"class":231},[52,35192,1730],{"class":231},[52,35194,1733],{"class":66},[52,35196,1736],{"class":58},[52,35198,35199],{"class":54,"line":118},[52,35200,1751],{"class":58},[52,35202,35203,35205,35208],{"class":54,"line":594},[52,35204,1756],{"class":58},[52,35206,35207],{"class":73},"'FallingLines'",[52,35209,2129],{"class":58},[52,35211,35212],{"class":54,"line":600},[52,35213,1773],{"class":58},[52,35215,35216],{"class":54,"line":606},[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/fallinglines",{"title":35031,"description":35039},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":35230,"title":35231,"body":35232,"category":27278,"componentType":20623,"description":35239,"extension":168,"meta":35500,"navigation":171,"path":35501,"requiresChild":171,"seo":35502,"stem":35503,"__hash__":35504},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":35233,"toc":35496},[35234,35237,35240,35242,35244,35247,35249,35494],[11,35235,35231],{"id":35236},"filmgrain",[15,35238,35239],{},"Analog film grain texture overlay",[26676,35241],{"component":35231},[23,35243,26680],{"id":21278},[26682,35245],{":props":35246},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"}]",[23,35248,26688],{"id":26687},[217,35250,35251,35296,35340,35384,35428],{":tabs":1543},[43,35252,35254],{"className":45,"code":35253,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[31,35255,35256,35264,35272,35280,35288],{"__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,77],{"class":58},[52,35273,35274,35276,35278],{"class":54,"line":108},[52,35275,2213],{"class":58},[52,35277,2216],{"class":62},[52,35279,105],{"class":58},[52,35281,35282,35284,35286],{"class":54,"line":118},[52,35283,2230],{"class":58},[52,35285,35231],{"class":62},[52,35287,77],{"class":58},[52,35289,35290,35292,35294],{"class":54,"line":594},[52,35291,121],{"class":58},[52,35293,63],{"class":62},[52,35295,77],{"class":58},[43,35297,35298],{"className":360,"code":35253,"language":362,"meta":48,"style":48},[31,35299,35300,35308,35316,35324,35332],{"__ignoreMap":48},[52,35301,35302,35304,35306],{"class":54,"line":55},[52,35303,59],{"class":58},[52,35305,63],{"class":371},[52,35307,77],{"class":58},[52,35309,35310,35312,35314],{"class":54,"line":80},[52,35311,83],{"class":58},[52,35313,35231],{"class":371},[52,35315,77],{"class":58},[52,35317,35318,35320,35322],{"class":54,"line":108},[52,35319,2213],{"class":58},[52,35321,2216],{"class":371},[52,35323,105],{"class":58},[52,35325,35326,35328,35330],{"class":54,"line":118},[52,35327,2230],{"class":58},[52,35329,35231],{"class":371},[52,35331,77],{"class":58},[52,35333,35334,35336,35338],{"class":54,"line":594},[52,35335,121],{"class":58},[52,35337,63],{"class":371},[52,35339,77],{"class":58},[43,35341,35342],{"className":2507,"code":35253,"language":2509,"meta":48,"style":48},[31,35343,35344,35352,35360,35368,35376],{"__ignoreMap":48},[52,35345,35346,35348,35350],{"class":54,"line":55},[52,35347,59],{"class":58},[52,35349,63],{"class":371},[52,35351,77],{"class":58},[52,35353,35354,35356,35358],{"class":54,"line":80},[52,35355,83],{"class":58},[52,35357,35231],{"class":371},[52,35359,77],{"class":58},[52,35361,35362,35364,35366],{"class":54,"line":108},[52,35363,2213],{"class":58},[52,35365,2216],{"class":371},[52,35367,105],{"class":58},[52,35369,35370,35372,35374],{"class":54,"line":118},[52,35371,2230],{"class":58},[52,35373,35231],{"class":371},[52,35375,77],{"class":58},[52,35377,35378,35380,35382],{"class":54,"line":594},[52,35379,121],{"class":58},[52,35381,63],{"class":371},[52,35383,77],{"class":58},[43,35385,35386],{"className":419,"code":35253,"language":420,"meta":48,"style":48},[31,35387,35388,35396,35404,35412,35420],{"__ignoreMap":48},[52,35389,35390,35392,35394],{"class":54,"line":55},[52,35391,59],{"class":58},[52,35393,63],{"class":371},[52,35395,77],{"class":58},[52,35397,35398,35400,35402],{"class":54,"line":80},[52,35399,83],{"class":58},[52,35401,35231],{"class":371},[52,35403,77],{"class":58},[52,35405,35406,35408,35410],{"class":54,"line":108},[52,35407,2213],{"class":58},[52,35409,2216],{"class":371},[52,35411,105],{"class":58},[52,35413,35414,35416,35418],{"class":54,"line":118},[52,35415,2230],{"class":58},[52,35417,35231],{"class":371},[52,35419,77],{"class":58},[52,35421,35422,35424,35426],{"class":54,"line":594},[52,35423,121],{"class":58},[52,35425,63],{"class":371},[52,35427,77],{"class":58},[43,35429,35431],{"className":222,"code":35430,"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,35432,35433,35443,35447,35461,35465,35474,35482,35486,35490],{"__ignoreMap":48},[52,35434,35435,35437,35439,35441],{"class":54,"line":55},[52,35436,232],{"class":231},[52,35438,9005],{"class":58},[52,35440,238],{"class":231},[52,35442,9010],{"class":73},[52,35444,35445],{"class":54,"line":80},[52,35446,597],{"emptyLinePlaceholder":171},[52,35448,35449,35451,35453,35455,35457,35459],{"class":54,"line":108},[52,35450,1721],{"class":231},[52,35452,1724],{"class":371},[52,35454,1727],{"class":231},[52,35456,1730],{"class":231},[52,35458,1733],{"class":66},[52,35460,1736],{"class":58},[52,35462,35463],{"class":54,"line":118},[52,35464,1751],{"class":58},[52,35466,35467,35469,35472],{"class":54,"line":594},[52,35468,1756],{"class":58},[52,35470,35471],{"class":73},"'FilmGrain'",[52,35473,4496],{"class":58},[52,35475,35476,35478,35480],{"class":54,"line":600},[52,35477,4501],{"class":58},[52,35479,2869],{"class":73},[52,35481,2129],{"class":58},[52,35483,35484],{"class":54,"line":606},[52,35485,4518],{"class":58},[52,35487,35488],{"class":54,"line":653},[52,35489,1773],{"class":58},[52,35491,35492],{"class":54,"line":662},[52,35493,1778],{"class":58},[156,35495,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35497},[35498,35499],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/filmgrain",{"title":35231,"description":35239},"docs/components/FilmGrain","oDbJl1STzhPHE6Df_wrMx0Zjj08jAQ3NPWF6sPUQzvw",{"id":35506,"title":35507,"body":35508,"category":27535,"componentType":20617,"description":35515,"extension":168,"meta":35700,"navigation":171,"path":35701,"requiresChild":27538,"seo":35702,"stem":35703,"__hash__":35704},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":35509,"toc":35696},[35510,35513,35516,35518,35520,35523,35525,35694],[11,35511,35507],{"id":35512},"floatingparticles",[15,35514,35515],{},"Animated floating particles with twinkle effects",[26676,35517],{"component":35507},[23,35519,26680],{"id":21278},[26682,35521],{":props":35522},"[{\"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,35524,26688],{"id":26687},[217,35526,35527,35556,35584,35612,35640],{":tabs":1543},[43,35528,35530],{"className":45,"code":35529,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[31,35531,35532,35540,35548],{"__ignoreMap":48},[52,35533,35534,35536,35538],{"class":54,"line":55},[52,35535,59],{"class":58},[52,35537,63],{"class":62},[52,35539,77],{"class":58},[52,35541,35542,35544,35546],{"class":54,"line":80},[52,35543,83],{"class":58},[52,35545,35507],{"class":62},[52,35547,105],{"class":58},[52,35549,35550,35552,35554],{"class":54,"line":108},[52,35551,121],{"class":58},[52,35553,63],{"class":62},[52,35555,77],{"class":58},[43,35557,35558],{"className":360,"code":35529,"language":362,"meta":48,"style":48},[31,35559,35560,35568,35576],{"__ignoreMap":48},[52,35561,35562,35564,35566],{"class":54,"line":55},[52,35563,59],{"class":58},[52,35565,63],{"class":371},[52,35567,77],{"class":58},[52,35569,35570,35572,35574],{"class":54,"line":80},[52,35571,83],{"class":58},[52,35573,35507],{"class":371},[52,35575,105],{"class":58},[52,35577,35578,35580,35582],{"class":54,"line":108},[52,35579,121],{"class":58},[52,35581,63],{"class":371},[52,35583,77],{"class":58},[43,35585,35586],{"className":2507,"code":35529,"language":2509,"meta":48,"style":48},[31,35587,35588,35596,35604],{"__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,35507],{"class":371},[52,35603,105],{"class":58},[52,35605,35606,35608,35610],{"class":54,"line":108},[52,35607,121],{"class":58},[52,35609,63],{"class":371},[52,35611,77],{"class":58},[43,35613,35614],{"className":419,"code":35529,"language":420,"meta":48,"style":48},[31,35615,35616,35624,35632],{"__ignoreMap":48},[52,35617,35618,35620,35622],{"class":54,"line":55},[52,35619,59],{"class":58},[52,35621,63],{"class":371},[52,35623,77],{"class":58},[52,35625,35626,35628,35630],{"class":54,"line":80},[52,35627,83],{"class":58},[52,35629,35507],{"class":371},[52,35631,105],{"class":58},[52,35633,35634,35636,35638],{"class":54,"line":108},[52,35635,121],{"class":58},[52,35637,63],{"class":371},[52,35639,77],{"class":58},[43,35641,35643],{"className":222,"code":35642,"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,35644,35645,35655,35659,35673,35677,35686,35690],{"__ignoreMap":48},[52,35646,35647,35649,35651,35653],{"class":54,"line":55},[52,35648,232],{"class":231},[52,35650,9005],{"class":58},[52,35652,238],{"class":231},[52,35654,9010],{"class":73},[52,35656,35657],{"class":54,"line":80},[52,35658,597],{"emptyLinePlaceholder":171},[52,35660,35661,35663,35665,35667,35669,35671],{"class":54,"line":108},[52,35662,1721],{"class":231},[52,35664,1724],{"class":371},[52,35666,1727],{"class":231},[52,35668,1730],{"class":231},[52,35670,1733],{"class":66},[52,35672,1736],{"class":58},[52,35674,35675],{"class":54,"line":118},[52,35676,1751],{"class":58},[52,35678,35679,35681,35684],{"class":54,"line":594},[52,35680,1756],{"class":58},[52,35682,35683],{"class":73},"'FloatingParticles'",[52,35685,2129],{"class":58},[52,35687,35688],{"class":54,"line":600},[52,35689,1773],{"class":58},[52,35691,35692],{"class":54,"line":606},[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/floatingparticles",{"title":35507,"description":35515},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":35706,"title":35707,"body":35708,"category":28880,"componentType":20623,"description":35715,"extension":168,"meta":35976,"navigation":171,"path":35977,"requiresChild":171,"seo":35978,"stem":35979,"__hash__":35980},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":35709,"toc":35972},[35710,35713,35716,35718,35720,35723,35725,35970],[11,35711,35707],{"id":35712},"flowfield",[15,35714,35715],{},"Fluid-like distortion with constant smooth motion",[26676,35717],{"component":35707},[23,35719,26680],{"id":21278},[26682,35721],{":props":35722},"[{\"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,35724,26688],{"id":26687},[217,35726,35727,35772,35816,35860,35904],{":tabs":1543},[43,35728,35730],{"className":45,"code":35729,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[31,35731,35732,35740,35748,35756,35764],{"__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,77],{"class":58},[52,35749,35750,35752,35754],{"class":54,"line":108},[52,35751,2213],{"class":58},[52,35753,2216],{"class":62},[52,35755,105],{"class":58},[52,35757,35758,35760,35762],{"class":54,"line":118},[52,35759,2230],{"class":58},[52,35761,35707],{"class":62},[52,35763,77],{"class":58},[52,35765,35766,35768,35770],{"class":54,"line":594},[52,35767,121],{"class":58},[52,35769,63],{"class":62},[52,35771,77],{"class":58},[43,35773,35774],{"className":360,"code":35729,"language":362,"meta":48,"style":48},[31,35775,35776,35784,35792,35800,35808],{"__ignoreMap":48},[52,35777,35778,35780,35782],{"class":54,"line":55},[52,35779,59],{"class":58},[52,35781,63],{"class":371},[52,35783,77],{"class":58},[52,35785,35786,35788,35790],{"class":54,"line":80},[52,35787,83],{"class":58},[52,35789,35707],{"class":371},[52,35791,77],{"class":58},[52,35793,35794,35796,35798],{"class":54,"line":108},[52,35795,2213],{"class":58},[52,35797,2216],{"class":371},[52,35799,105],{"class":58},[52,35801,35802,35804,35806],{"class":54,"line":118},[52,35803,2230],{"class":58},[52,35805,35707],{"class":371},[52,35807,77],{"class":58},[52,35809,35810,35812,35814],{"class":54,"line":594},[52,35811,121],{"class":58},[52,35813,63],{"class":371},[52,35815,77],{"class":58},[43,35817,35818],{"className":2507,"code":35729,"language":2509,"meta":48,"style":48},[31,35819,35820,35828,35836,35844,35852],{"__ignoreMap":48},[52,35821,35822,35824,35826],{"class":54,"line":55},[52,35823,59],{"class":58},[52,35825,63],{"class":371},[52,35827,77],{"class":58},[52,35829,35830,35832,35834],{"class":54,"line":80},[52,35831,83],{"class":58},[52,35833,35707],{"class":371},[52,35835,77],{"class":58},[52,35837,35838,35840,35842],{"class":54,"line":108},[52,35839,2213],{"class":58},[52,35841,2216],{"class":371},[52,35843,105],{"class":58},[52,35845,35846,35848,35850],{"class":54,"line":118},[52,35847,2230],{"class":58},[52,35849,35707],{"class":371},[52,35851,77],{"class":58},[52,35853,35854,35856,35858],{"class":54,"line":594},[52,35855,121],{"class":58},[52,35857,63],{"class":371},[52,35859,77],{"class":58},[43,35861,35862],{"className":419,"code":35729,"language":420,"meta":48,"style":48},[31,35863,35864,35872,35880,35888,35896],{"__ignoreMap":48},[52,35865,35866,35868,35870],{"class":54,"line":55},[52,35867,59],{"class":58},[52,35869,63],{"class":371},[52,35871,77],{"class":58},[52,35873,35874,35876,35878],{"class":54,"line":80},[52,35875,83],{"class":58},[52,35877,35707],{"class":371},[52,35879,77],{"class":58},[52,35881,35882,35884,35886],{"class":54,"line":108},[52,35883,2213],{"class":58},[52,35885,2216],{"class":371},[52,35887,105],{"class":58},[52,35889,35890,35892,35894],{"class":54,"line":118},[52,35891,2230],{"class":58},[52,35893,35707],{"class":371},[52,35895,77],{"class":58},[52,35897,35898,35900,35902],{"class":54,"line":594},[52,35899,121],{"class":58},[52,35901,63],{"class":371},[52,35903,77],{"class":58},[43,35905,35907],{"className":222,"code":35906,"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,35908,35909,35919,35923,35937,35941,35950,35958,35962,35966],{"__ignoreMap":48},[52,35910,35911,35913,35915,35917],{"class":54,"line":55},[52,35912,232],{"class":231},[52,35914,9005],{"class":58},[52,35916,238],{"class":231},[52,35918,9010],{"class":73},[52,35920,35921],{"class":54,"line":80},[52,35922,597],{"emptyLinePlaceholder":171},[52,35924,35925,35927,35929,35931,35933,35935],{"class":54,"line":108},[52,35926,1721],{"class":231},[52,35928,1724],{"class":371},[52,35930,1727],{"class":231},[52,35932,1730],{"class":231},[52,35934,1733],{"class":66},[52,35936,1736],{"class":58},[52,35938,35939],{"class":54,"line":118},[52,35940,1751],{"class":58},[52,35942,35943,35945,35948],{"class":54,"line":594},[52,35944,1756],{"class":58},[52,35946,35947],{"class":73},"'FlowField'",[52,35949,4496],{"class":58},[52,35951,35952,35954,35956],{"class":54,"line":600},[52,35953,4501],{"class":58},[52,35955,2869],{"class":73},[52,35957,2129],{"class":58},[52,35959,35960],{"class":54,"line":606},[52,35961,4518],{"class":58},[52,35963,35964],{"class":54,"line":653},[52,35965,1773],{"class":58},[52,35967,35968],{"class":54,"line":662},[52,35969,1778],{"class":58},[156,35971,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":35973},[35974,35975],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/flowfield",{"title":35707,"description":35715},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":35982,"title":35983,"body":35984,"category":30502,"componentType":20617,"description":35991,"extension":168,"meta":36269,"navigation":171,"path":36270,"requiresChild":27538,"seo":36271,"stem":36272,"__hash__":36273},"components/docs/components/Flower.md","Flower",{"type":8,"value":35985,"toc":36265},[35986,35989,35992,35994,35996,35999,36001,36263],[11,35987,35983],{"id":35988},"flower",[15,35990,35991],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[26676,35993],{"component":35983},[23,35995,26680],{"id":21278},[26682,35997],{":props":35998},"[{\"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,36000,26688],{"id":26687},[217,36002,36003,36052,36103,36151,36201],{":tabs":1543},[43,36004,36006],{"className":45,"code":36005,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,36007,36008,36016,36023,36031,36040,36044],{"__ignoreMap":48},[52,36009,36010,36012,36014],{"class":54,"line":55},[52,36011,59],{"class":58},[52,36013,63],{"class":62},[52,36015,77],{"class":58},[52,36017,36018,36020],{"class":54,"line":80},[52,36019,83],{"class":58},[52,36021,36022],{"class":62},"Flower\n",[52,36024,36025,36027,36029],{"class":54,"line":108},[52,36026,7125],{"class":66},[52,36028,70],{"class":58},[52,36030,7081],{"class":73},[52,36032,36033,36035,36037],{"class":54,"line":118},[52,36034,14675],{"class":66},[52,36036,70],{"class":58},[52,36038,36039],{"class":73},"\"0.4\"\n",[52,36041,36042],{"class":54,"line":594},[52,36043,1224],{"class":58},[52,36045,36046,36048,36050],{"class":54,"line":600},[52,36047,121],{"class":58},[52,36049,63],{"class":62},[52,36051,77],{"class":58},[43,36053,36055],{"className":360,"code":36054,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,36056,36057,36065,36071,36079,36091,36095],{"__ignoreMap":48},[52,36058,36059,36061,36063],{"class":54,"line":55},[52,36060,59],{"class":58},[52,36062,63],{"class":371},[52,36064,77],{"class":58},[52,36066,36067,36069],{"class":54,"line":80},[52,36068,83],{"class":58},[52,36070,36022],{"class":371},[52,36072,36073,36075,36077],{"class":54,"line":108},[52,36074,7125],{"class":66},[52,36076,70],{"class":231},[52,36078,7081],{"class":73},[52,36080,36081,36083,36085,36087,36089],{"class":54,"line":118},[52,36082,7135],{"class":66},[52,36084,70],{"class":231},[52,36086,723],{"class":58},[52,36088,5737],{"class":371},[52,36090,729],{"class":58},[52,36092,36093],{"class":54,"line":594},[52,36094,1224],{"class":58},[52,36096,36097,36099,36101],{"class":54,"line":600},[52,36098,121],{"class":58},[52,36100,63],{"class":371},[52,36102,77],{"class":58},[43,36104,36105],{"className":2507,"code":36054,"language":2509,"meta":48,"style":48},[31,36106,36107,36115,36121,36129,36139,36143],{"__ignoreMap":48},[52,36108,36109,36111,36113],{"class":54,"line":55},[52,36110,59],{"class":58},[52,36112,63],{"class":371},[52,36114,77],{"class":58},[52,36116,36117,36119],{"class":54,"line":80},[52,36118,83],{"class":58},[52,36120,36022],{"class":371},[52,36122,36123,36125,36127],{"class":54,"line":108},[52,36124,7125],{"class":66},[52,36126,70],{"class":58},[52,36128,7081],{"class":73},[52,36130,36131,36133,36135,36137],{"class":54,"line":118},[52,36132,7135],{"class":66},[52,36134,24620],{"class":58},[52,36136,5737],{"class":371},[52,36138,729],{"class":58},[52,36140,36141],{"class":54,"line":594},[52,36142,1224],{"class":58},[52,36144,36145,36147,36149],{"class":54,"line":600},[52,36146,121],{"class":58},[52,36148,63],{"class":371},[52,36150,77],{"class":58},[43,36152,36153],{"className":419,"code":36054,"language":420,"meta":48,"style":48},[31,36154,36155,36163,36169,36177,36189,36193],{"__ignoreMap":48},[52,36156,36157,36159,36161],{"class":54,"line":55},[52,36158,59],{"class":58},[52,36160,63],{"class":371},[52,36162,77],{"class":58},[52,36164,36165,36167],{"class":54,"line":80},[52,36166,83],{"class":58},[52,36168,36022],{"class":371},[52,36170,36171,36173,36175],{"class":54,"line":108},[52,36172,7125],{"class":66},[52,36174,70],{"class":231},[52,36176,7081],{"class":73},[52,36178,36179,36181,36183,36185,36187],{"class":54,"line":118},[52,36180,7135],{"class":66},[52,36182,70],{"class":231},[52,36184,723],{"class":58},[52,36186,5737],{"class":371},[52,36188,729],{"class":58},[52,36190,36191],{"class":54,"line":594},[52,36192,1224],{"class":58},[52,36194,36195,36197,36199],{"class":54,"line":600},[52,36196,121],{"class":58},[52,36198,63],{"class":371},[52,36200,77],{"class":58},[43,36202,36204],{"className":222,"code":36203,"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,36205,36206,36216,36220,36234,36238,36255,36259],{"__ignoreMap":48},[52,36207,36208,36210,36212,36214],{"class":54,"line":55},[52,36209,232],{"class":231},[52,36211,9005],{"class":58},[52,36213,238],{"class":231},[52,36215,9010],{"class":73},[52,36217,36218],{"class":54,"line":80},[52,36219,597],{"emptyLinePlaceholder":171},[52,36221,36222,36224,36226,36228,36230,36232],{"class":54,"line":108},[52,36223,1721],{"class":231},[52,36225,1724],{"class":371},[52,36227,1727],{"class":231},[52,36229,1730],{"class":231},[52,36231,1733],{"class":66},[52,36233,1736],{"class":58},[52,36235,36236],{"class":54,"line":118},[52,36237,1751],{"class":58},[52,36239,36240,36242,36245,36247,36249,36251,36253],{"class":54,"line":594},[52,36241,1756],{"class":58},[52,36243,36244],{"class":73},"'Flower'",[52,36246,1762],{"class":58},[52,36248,7660],{"class":73},[52,36250,4052],{"class":58},[52,36252,5737],{"class":371},[52,36254,1768],{"class":58},[52,36256,36257],{"class":54,"line":600},[52,36258,1773],{"class":58},[52,36260,36261],{"class":54,"line":606},[52,36262,1778],{"class":58},[156,36264,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":36266},[36267,36268],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/flower",{"title":35983,"description":35991},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":36275,"title":36276,"body":36277,"category":27535,"componentType":20617,"description":36284,"extension":168,"meta":36469,"navigation":171,"path":36470,"requiresChild":27538,"seo":36471,"stem":36472,"__hash__":36473},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":36278,"toc":36465},[36279,36282,36285,36287,36289,36292,36294,36463],[11,36280,36276],{"id":36281},"flowinggradient",[15,36283,36284],{},"Liquid silk gradient with organic flowing color bands",[26676,36286],{"component":36276},[23,36288,26680],{"id":21278},[26682,36290],{":props":36291},"[{\"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,36293,26688],{"id":26687},[217,36295,36296,36325,36353,36381,36409],{":tabs":1543},[43,36297,36299],{"className":45,"code":36298,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[31,36300,36301,36309,36317],{"__ignoreMap":48},[52,36302,36303,36305,36307],{"class":54,"line":55},[52,36304,59],{"class":58},[52,36306,63],{"class":62},[52,36308,77],{"class":58},[52,36310,36311,36313,36315],{"class":54,"line":80},[52,36312,83],{"class":58},[52,36314,36276],{"class":62},[52,36316,105],{"class":58},[52,36318,36319,36321,36323],{"class":54,"line":108},[52,36320,121],{"class":58},[52,36322,63],{"class":62},[52,36324,77],{"class":58},[43,36326,36327],{"className":360,"code":36298,"language":362,"meta":48,"style":48},[31,36328,36329,36337,36345],{"__ignoreMap":48},[52,36330,36331,36333,36335],{"class":54,"line":55},[52,36332,59],{"class":58},[52,36334,63],{"class":371},[52,36336,77],{"class":58},[52,36338,36339,36341,36343],{"class":54,"line":80},[52,36340,83],{"class":58},[52,36342,36276],{"class":371},[52,36344,105],{"class":58},[52,36346,36347,36349,36351],{"class":54,"line":108},[52,36348,121],{"class":58},[52,36350,63],{"class":371},[52,36352,77],{"class":58},[43,36354,36355],{"className":2507,"code":36298,"language":2509,"meta":48,"style":48},[31,36356,36357,36365,36373],{"__ignoreMap":48},[52,36358,36359,36361,36363],{"class":54,"line":55},[52,36360,59],{"class":58},[52,36362,63],{"class":371},[52,36364,77],{"class":58},[52,36366,36367,36369,36371],{"class":54,"line":80},[52,36368,83],{"class":58},[52,36370,36276],{"class":371},[52,36372,105],{"class":58},[52,36374,36375,36377,36379],{"class":54,"line":108},[52,36376,121],{"class":58},[52,36378,63],{"class":371},[52,36380,77],{"class":58},[43,36382,36383],{"className":419,"code":36298,"language":420,"meta":48,"style":48},[31,36384,36385,36393,36401],{"__ignoreMap":48},[52,36386,36387,36389,36391],{"class":54,"line":55},[52,36388,59],{"class":58},[52,36390,63],{"class":371},[52,36392,77],{"class":58},[52,36394,36395,36397,36399],{"class":54,"line":80},[52,36396,83],{"class":58},[52,36398,36276],{"class":371},[52,36400,105],{"class":58},[52,36402,36403,36405,36407],{"class":54,"line":108},[52,36404,121],{"class":58},[52,36406,63],{"class":371},[52,36408,77],{"class":58},[43,36410,36412],{"className":222,"code":36411,"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,36413,36414,36424,36428,36442,36446,36455,36459],{"__ignoreMap":48},[52,36415,36416,36418,36420,36422],{"class":54,"line":55},[52,36417,232],{"class":231},[52,36419,9005],{"class":58},[52,36421,238],{"class":231},[52,36423,9010],{"class":73},[52,36425,36426],{"class":54,"line":80},[52,36427,597],{"emptyLinePlaceholder":171},[52,36429,36430,36432,36434,36436,36438,36440],{"class":54,"line":108},[52,36431,1721],{"class":231},[52,36433,1724],{"class":371},[52,36435,1727],{"class":231},[52,36437,1730],{"class":231},[52,36439,1733],{"class":66},[52,36441,1736],{"class":58},[52,36443,36444],{"class":54,"line":118},[52,36445,1751],{"class":58},[52,36447,36448,36450,36453],{"class":54,"line":594},[52,36449,1756],{"class":58},[52,36451,36452],{"class":73},"'FlowingGradient'",[52,36454,2129],{"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,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":36466},[36467,36468],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/flowinggradient",{"title":36276,"description":36284},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":36475,"title":36476,"body":36477,"category":28880,"componentType":20623,"description":36484,"extension":168,"meta":36745,"navigation":171,"path":36746,"requiresChild":171,"seo":36747,"stem":36748,"__hash__":36749},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":36478,"toc":36741},[36479,36482,36485,36487,36489,36492,36494,36739],[11,36480,36476],{"id":36481},"form3d",[15,36483,36484],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26676,36486],{"component":36476},[23,36488,26680],{"id":21278},[26682,36490],{":props":36491},"[{\"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,36493,26688],{"id":26687},[217,36495,36496,36541,36585,36629,36673],{":tabs":1543},[43,36497,36499],{"className":45,"code":36498,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,36500,36501,36509,36517,36525,36533],{"__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,77],{"class":58},[52,36518,36519,36521,36523],{"class":54,"line":108},[52,36520,2213],{"class":58},[52,36522,2216],{"class":62},[52,36524,105],{"class":58},[52,36526,36527,36529,36531],{"class":54,"line":118},[52,36528,2230],{"class":58},[52,36530,36476],{"class":62},[52,36532,77],{"class":58},[52,36534,36535,36537,36539],{"class":54,"line":594},[52,36536,121],{"class":58},[52,36538,63],{"class":62},[52,36540,77],{"class":58},[43,36542,36543],{"className":360,"code":36498,"language":362,"meta":48,"style":48},[31,36544,36545,36553,36561,36569,36577],{"__ignoreMap":48},[52,36546,36547,36549,36551],{"class":54,"line":55},[52,36548,59],{"class":58},[52,36550,63],{"class":371},[52,36552,77],{"class":58},[52,36554,36555,36557,36559],{"class":54,"line":80},[52,36556,83],{"class":58},[52,36558,36476],{"class":371},[52,36560,77],{"class":58},[52,36562,36563,36565,36567],{"class":54,"line":108},[52,36564,2213],{"class":58},[52,36566,2216],{"class":371},[52,36568,105],{"class":58},[52,36570,36571,36573,36575],{"class":54,"line":118},[52,36572,2230],{"class":58},[52,36574,36476],{"class":371},[52,36576,77],{"class":58},[52,36578,36579,36581,36583],{"class":54,"line":594},[52,36580,121],{"class":58},[52,36582,63],{"class":371},[52,36584,77],{"class":58},[43,36586,36587],{"className":2507,"code":36498,"language":2509,"meta":48,"style":48},[31,36588,36589,36597,36605,36613,36621],{"__ignoreMap":48},[52,36590,36591,36593,36595],{"class":54,"line":55},[52,36592,59],{"class":58},[52,36594,63],{"class":371},[52,36596,77],{"class":58},[52,36598,36599,36601,36603],{"class":54,"line":80},[52,36600,83],{"class":58},[52,36602,36476],{"class":371},[52,36604,77],{"class":58},[52,36606,36607,36609,36611],{"class":54,"line":108},[52,36608,2213],{"class":58},[52,36610,2216],{"class":371},[52,36612,105],{"class":58},[52,36614,36615,36617,36619],{"class":54,"line":118},[52,36616,2230],{"class":58},[52,36618,36476],{"class":371},[52,36620,77],{"class":58},[52,36622,36623,36625,36627],{"class":54,"line":594},[52,36624,121],{"class":58},[52,36626,63],{"class":371},[52,36628,77],{"class":58},[43,36630,36631],{"className":419,"code":36498,"language":420,"meta":48,"style":48},[31,36632,36633,36641,36649,36657,36665],{"__ignoreMap":48},[52,36634,36635,36637,36639],{"class":54,"line":55},[52,36636,59],{"class":58},[52,36638,63],{"class":371},[52,36640,77],{"class":58},[52,36642,36643,36645,36647],{"class":54,"line":80},[52,36644,83],{"class":58},[52,36646,36476],{"class":371},[52,36648,77],{"class":58},[52,36650,36651,36653,36655],{"class":54,"line":108},[52,36652,2213],{"class":58},[52,36654,2216],{"class":371},[52,36656,105],{"class":58},[52,36658,36659,36661,36663],{"class":54,"line":118},[52,36660,2230],{"class":58},[52,36662,36476],{"class":371},[52,36664,77],{"class":58},[52,36666,36667,36669,36671],{"class":54,"line":594},[52,36668,121],{"class":58},[52,36670,63],{"class":371},[52,36672,77],{"class":58},[43,36674,36676],{"className":222,"code":36675,"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,36677,36678,36688,36692,36706,36710,36719,36727,36731,36735],{"__ignoreMap":48},[52,36679,36680,36682,36684,36686],{"class":54,"line":55},[52,36681,232],{"class":231},[52,36683,9005],{"class":58},[52,36685,238],{"class":231},[52,36687,9010],{"class":73},[52,36689,36690],{"class":54,"line":80},[52,36691,597],{"emptyLinePlaceholder":171},[52,36693,36694,36696,36698,36700,36702,36704],{"class":54,"line":108},[52,36695,1721],{"class":231},[52,36697,1724],{"class":371},[52,36699,1727],{"class":231},[52,36701,1730],{"class":231},[52,36703,1733],{"class":66},[52,36705,1736],{"class":58},[52,36707,36708],{"class":54,"line":118},[52,36709,1751],{"class":58},[52,36711,36712,36714,36717],{"class":54,"line":594},[52,36713,1756],{"class":58},[52,36715,36716],{"class":73},"'Form3D'",[52,36718,4496],{"class":58},[52,36720,36721,36723,36725],{"class":54,"line":600},[52,36722,4501],{"class":58},[52,36724,2869],{"class":73},[52,36726,2129],{"class":58},[52,36728,36729],{"class":54,"line":606},[52,36730,4518],{"class":58},[52,36732,36733],{"class":54,"line":653},[52,36734,1773],{"class":58},[52,36736,36737],{"class":54,"line":662},[52,36738,1778],{"class":58},[156,36740,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":36742},[36743,36744],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/form3d",{"title":36476,"description":36484},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":36751,"title":18248,"body":36752,"category":32173,"componentType":20623,"description":36759,"extension":168,"meta":37019,"navigation":171,"path":37020,"requiresChild":171,"seo":37021,"stem":37022,"__hash__":37023},"components/docs/components/Glass.md",{"type":8,"value":36753,"toc":37015},[36754,36757,36760,36762,36764,36767,36769,37013],[11,36755,18248],{"id":36756},"glass",[15,36758,36759],{},"Optically realistic glass lens driven in a custom shape",[26676,36761],{"component":18248},[23,36763,26680],{"id":21278},[26682,36765],{":props":36766},"[{\"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,36768,26688],{"id":26687},[217,36770,36771,36816,36860,36904,36948],{":tabs":1543},[43,36772,36774],{"className":45,"code":36773,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[31,36775,36776,36784,36792,36800,36808],{"__ignoreMap":48},[52,36777,36778,36780,36782],{"class":54,"line":55},[52,36779,59],{"class":58},[52,36781,63],{"class":62},[52,36783,77],{"class":58},[52,36785,36786,36788,36790],{"class":54,"line":80},[52,36787,83],{"class":58},[52,36789,18248],{"class":62},[52,36791,77],{"class":58},[52,36793,36794,36796,36798],{"class":54,"line":108},[52,36795,2213],{"class":58},[52,36797,2216],{"class":62},[52,36799,105],{"class":58},[52,36801,36802,36804,36806],{"class":54,"line":118},[52,36803,2230],{"class":58},[52,36805,18248],{"class":62},[52,36807,77],{"class":58},[52,36809,36810,36812,36814],{"class":54,"line":594},[52,36811,121],{"class":58},[52,36813,63],{"class":62},[52,36815,77],{"class":58},[43,36817,36818],{"className":360,"code":36773,"language":362,"meta":48,"style":48},[31,36819,36820,36828,36836,36844,36852],{"__ignoreMap":48},[52,36821,36822,36824,36826],{"class":54,"line":55},[52,36823,59],{"class":58},[52,36825,63],{"class":371},[52,36827,77],{"class":58},[52,36829,36830,36832,36834],{"class":54,"line":80},[52,36831,83],{"class":58},[52,36833,18248],{"class":371},[52,36835,77],{"class":58},[52,36837,36838,36840,36842],{"class":54,"line":108},[52,36839,2213],{"class":58},[52,36841,2216],{"class":371},[52,36843,105],{"class":58},[52,36845,36846,36848,36850],{"class":54,"line":118},[52,36847,2230],{"class":58},[52,36849,18248],{"class":371},[52,36851,77],{"class":58},[52,36853,36854,36856,36858],{"class":54,"line":594},[52,36855,121],{"class":58},[52,36857,63],{"class":371},[52,36859,77],{"class":58},[43,36861,36862],{"className":2507,"code":36773,"language":2509,"meta":48,"style":48},[31,36863,36864,36872,36880,36888,36896],{"__ignoreMap":48},[52,36865,36866,36868,36870],{"class":54,"line":55},[52,36867,59],{"class":58},[52,36869,63],{"class":371},[52,36871,77],{"class":58},[52,36873,36874,36876,36878],{"class":54,"line":80},[52,36875,83],{"class":58},[52,36877,18248],{"class":371},[52,36879,77],{"class":58},[52,36881,36882,36884,36886],{"class":54,"line":108},[52,36883,2213],{"class":58},[52,36885,2216],{"class":371},[52,36887,105],{"class":58},[52,36889,36890,36892,36894],{"class":54,"line":118},[52,36891,2230],{"class":58},[52,36893,18248],{"class":371},[52,36895,77],{"class":58},[52,36897,36898,36900,36902],{"class":54,"line":594},[52,36899,121],{"class":58},[52,36901,63],{"class":371},[52,36903,77],{"class":58},[43,36905,36906],{"className":419,"code":36773,"language":420,"meta":48,"style":48},[31,36907,36908,36916,36924,36932,36940],{"__ignoreMap":48},[52,36909,36910,36912,36914],{"class":54,"line":55},[52,36911,59],{"class":58},[52,36913,63],{"class":371},[52,36915,77],{"class":58},[52,36917,36918,36920,36922],{"class":54,"line":80},[52,36919,83],{"class":58},[52,36921,18248],{"class":371},[52,36923,77],{"class":58},[52,36925,36926,36928,36930],{"class":54,"line":108},[52,36927,2213],{"class":58},[52,36929,2216],{"class":371},[52,36931,105],{"class":58},[52,36933,36934,36936,36938],{"class":54,"line":118},[52,36935,2230],{"class":58},[52,36937,18248],{"class":371},[52,36939,77],{"class":58},[52,36941,36942,36944,36946],{"class":54,"line":594},[52,36943,121],{"class":58},[52,36945,63],{"class":371},[52,36947,77],{"class":58},[43,36949,36951],{"className":222,"code":36950,"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,36952,36953,36963,36967,36981,36985,36993,37001,37005,37009],{"__ignoreMap":48},[52,36954,36955,36957,36959,36961],{"class":54,"line":55},[52,36956,232],{"class":231},[52,36958,9005],{"class":58},[52,36960,238],{"class":231},[52,36962,9010],{"class":73},[52,36964,36965],{"class":54,"line":80},[52,36966,597],{"emptyLinePlaceholder":171},[52,36968,36969,36971,36973,36975,36977,36979],{"class":54,"line":108},[52,36970,1721],{"class":231},[52,36972,1724],{"class":371},[52,36974,1727],{"class":231},[52,36976,1730],{"class":231},[52,36978,1733],{"class":66},[52,36980,1736],{"class":58},[52,36982,36983],{"class":54,"line":118},[52,36984,1751],{"class":58},[52,36986,36987,36989,36991],{"class":54,"line":594},[52,36988,1756],{"class":58},[52,36990,18789],{"class":73},[52,36992,4496],{"class":58},[52,36994,36995,36997,36999],{"class":54,"line":600},[52,36996,4501],{"class":58},[52,36998,2869],{"class":73},[52,37000,2129],{"class":58},[52,37002,37003],{"class":54,"line":606},[52,37004,4518],{"class":58},[52,37006,37007],{"class":54,"line":653},[52,37008,1773],{"class":58},[52,37010,37011],{"class":54,"line":662},[52,37012,1778],{"class":58},[156,37014,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":37016},[37017,37018],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glass",{"title":18248,"description":36759},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":37025,"title":3710,"body":37026,"category":28880,"componentType":20623,"description":37033,"extension":168,"meta":37350,"navigation":171,"path":37351,"requiresChild":171,"seo":37352,"stem":37353,"__hash__":37354},"components/docs/components/GlassTiles.md",{"type":8,"value":37027,"toc":37346},[37028,37031,37034,37036,37038,37041,37043,37344],[11,37029,3710],{"id":37030},"glasstiles",[15,37032,37033],{},"Refraction-like distortion in a tile grid pattern",[26676,37035],{"component":3710},[23,37037,26680],{"id":21278},[26682,37039],{":props":37040},"[{\"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,37042,26688],{"id":26687},[217,37044,37045,37102,37161,37217,37275],{":tabs":1543},[43,37046,37048],{"className":45,"code":37047,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37049,37050,37058,37065,37074,37078,37086,37094],{"__ignoreMap":48},[52,37051,37052,37054,37056],{"class":54,"line":55},[52,37053,59],{"class":58},[52,37055,63],{"class":62},[52,37057,77],{"class":58},[52,37059,37060,37062],{"class":54,"line":80},[52,37061,83],{"class":58},[52,37063,37064],{"class":62},"GlassTiles\n",[52,37066,37067,37069,37071],{"class":54,"line":108},[52,37068,17644],{"class":66},[52,37070,70],{"class":58},[52,37072,37073],{"class":73},"\"2\"\n",[52,37075,37076],{"class":54,"line":118},[52,37077,26724],{"class":58},[52,37079,37080,37082,37084],{"class":54,"line":594},[52,37081,2213],{"class":58},[52,37083,2216],{"class":62},[52,37085,105],{"class":58},[52,37087,37088,37090,37092],{"class":54,"line":600},[52,37089,2230],{"class":58},[52,37091,3710],{"class":62},[52,37093,77],{"class":58},[52,37095,37096,37098,37100],{"class":54,"line":606},[52,37097,121],{"class":58},[52,37099,63],{"class":62},[52,37101,77],{"class":58},[43,37103,37105],{"className":360,"code":37104,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37106,37107,37115,37121,37133,37137,37145,37153],{"__ignoreMap":48},[52,37108,37109,37111,37113],{"class":54,"line":55},[52,37110,59],{"class":58},[52,37112,63],{"class":371},[52,37114,77],{"class":58},[52,37116,37117,37119],{"class":54,"line":80},[52,37118,83],{"class":58},[52,37120,37064],{"class":371},[52,37122,37123,37125,37127,37129,37131],{"class":54,"line":108},[52,37124,17755],{"class":66},[52,37126,70],{"class":231},[52,37128,723],{"class":58},[52,37130,4701],{"class":371},[52,37132,729],{"class":58},[52,37134,37135],{"class":54,"line":118},[52,37136,26724],{"class":58},[52,37138,37139,37141,37143],{"class":54,"line":594},[52,37140,2213],{"class":58},[52,37142,2216],{"class":371},[52,37144,105],{"class":58},[52,37146,37147,37149,37151],{"class":54,"line":600},[52,37148,2230],{"class":58},[52,37150,3710],{"class":371},[52,37152,77],{"class":58},[52,37154,37155,37157,37159],{"class":54,"line":606},[52,37156,121],{"class":58},[52,37158,63],{"class":371},[52,37160,77],{"class":58},[43,37162,37163],{"className":2507,"code":37104,"language":2509,"meta":48,"style":48},[31,37164,37165,37173,37179,37189,37193,37201,37209],{"__ignoreMap":48},[52,37166,37167,37169,37171],{"class":54,"line":55},[52,37168,59],{"class":58},[52,37170,63],{"class":371},[52,37172,77],{"class":58},[52,37174,37175,37177],{"class":54,"line":80},[52,37176,83],{"class":58},[52,37178,37064],{"class":371},[52,37180,37181,37183,37185,37187],{"class":54,"line":108},[52,37182,17755],{"class":66},[52,37184,24620],{"class":58},[52,37186,4701],{"class":371},[52,37188,729],{"class":58},[52,37190,37191],{"class":54,"line":118},[52,37192,26724],{"class":58},[52,37194,37195,37197,37199],{"class":54,"line":594},[52,37196,2213],{"class":58},[52,37198,2216],{"class":371},[52,37200,105],{"class":58},[52,37202,37203,37205,37207],{"class":54,"line":600},[52,37204,2230],{"class":58},[52,37206,3710],{"class":371},[52,37208,77],{"class":58},[52,37210,37211,37213,37215],{"class":54,"line":606},[52,37212,121],{"class":58},[52,37214,63],{"class":371},[52,37216,77],{"class":58},[43,37218,37219],{"className":419,"code":37104,"language":420,"meta":48,"style":48},[31,37220,37221,37229,37235,37247,37251,37259,37267],{"__ignoreMap":48},[52,37222,37223,37225,37227],{"class":54,"line":55},[52,37224,59],{"class":58},[52,37226,63],{"class":371},[52,37228,77],{"class":58},[52,37230,37231,37233],{"class":54,"line":80},[52,37232,83],{"class":58},[52,37234,37064],{"class":371},[52,37236,37237,37239,37241,37243,37245],{"class":54,"line":108},[52,37238,17755],{"class":66},[52,37240,70],{"class":231},[52,37242,723],{"class":58},[52,37244,4701],{"class":371},[52,37246,729],{"class":58},[52,37248,37249],{"class":54,"line":118},[52,37250,26724],{"class":58},[52,37252,37253,37255,37257],{"class":54,"line":594},[52,37254,2213],{"class":58},[52,37256,2216],{"class":371},[52,37258,105],{"class":58},[52,37260,37261,37263,37265],{"class":54,"line":600},[52,37262,2230],{"class":58},[52,37264,3710],{"class":371},[52,37266,77],{"class":58},[52,37268,37269,37271,37273],{"class":54,"line":606},[52,37270,121],{"class":58},[52,37272,63],{"class":371},[52,37274,77],{"class":58},[43,37276,37278],{"className":222,"code":37277,"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,37279,37280,37290,37294,37308,37312,37324,37332,37336,37340],{"__ignoreMap":48},[52,37281,37282,37284,37286,37288],{"class":54,"line":55},[52,37283,232],{"class":231},[52,37285,9005],{"class":58},[52,37287,238],{"class":231},[52,37289,9010],{"class":73},[52,37291,37292],{"class":54,"line":80},[52,37293,597],{"emptyLinePlaceholder":171},[52,37295,37296,37298,37300,37302,37304,37306],{"class":54,"line":108},[52,37297,1721],{"class":231},[52,37299,1724],{"class":371},[52,37301,1727],{"class":231},[52,37303,1730],{"class":231},[52,37305,1733],{"class":66},[52,37307,1736],{"class":58},[52,37309,37310],{"class":54,"line":118},[52,37311,1751],{"class":58},[52,37313,37314,37316,37318,37320,37322],{"class":54,"line":594},[52,37315,1756],{"class":58},[52,37317,4069],{"class":73},[52,37319,26969],{"class":58},[52,37321,4701],{"class":371},[52,37323,5033],{"class":58},[52,37325,37326,37328,37330],{"class":54,"line":600},[52,37327,4501],{"class":58},[52,37329,2869],{"class":73},[52,37331,2129],{"class":58},[52,37333,37334],{"class":54,"line":606},[52,37335,4518],{"class":58},[52,37337,37338],{"class":54,"line":653},[52,37339,1773],{"class":58},[52,37341,37342],{"class":54,"line":662},[52,37343,1778],{"class":58},[156,37345,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37347},[37348,37349],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glasstiles",{"title":3710,"description":37033},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":37356,"title":37357,"body":37358,"category":27278,"componentType":20623,"description":37365,"extension":168,"meta":37682,"navigation":171,"path":37683,"requiresChild":171,"seo":37684,"stem":37685,"__hash__":37686},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":37359,"toc":37678},[37360,37363,37366,37368,37370,37373,37375,37676],[11,37361,37357],{"id":37362},"glitch",[15,37364,37365],{},"Digital glitch that melts pixels and distorts colors",[26676,37367],{"component":37357},[23,37369,26680],{"id":21278},[26682,37371],{":props":37372},"[{\"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,37374,26688],{"id":26687},[217,37376,37377,37433,37492,37548,37606],{":tabs":1543},[43,37378,37380],{"className":45,"code":37379,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,37381,37382,37390,37397,37405,37409,37417,37425],{"__ignoreMap":48},[52,37383,37384,37386,37388],{"class":54,"line":55},[52,37385,59],{"class":58},[52,37387,63],{"class":62},[52,37389,77],{"class":58},[52,37391,37392,37394],{"class":54,"line":80},[52,37393,83],{"class":58},[52,37395,37396],{"class":62},"Glitch\n",[52,37398,37399,37401,37403],{"class":54,"line":108},[52,37400,17644],{"class":66},[52,37402,70],{"class":58},[52,37404,32237],{"class":73},[52,37406,37407],{"class":54,"line":118},[52,37408,26724],{"class":58},[52,37410,37411,37413,37415],{"class":54,"line":594},[52,37412,2213],{"class":58},[52,37414,2216],{"class":62},[52,37416,105],{"class":58},[52,37418,37419,37421,37423],{"class":54,"line":600},[52,37420,2230],{"class":58},[52,37422,37357],{"class":62},[52,37424,77],{"class":58},[52,37426,37427,37429,37431],{"class":54,"line":606},[52,37428,121],{"class":58},[52,37430,63],{"class":62},[52,37432,77],{"class":58},[43,37434,37436],{"className":360,"code":37435,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,37437,37438,37446,37452,37464,37468,37476,37484],{"__ignoreMap":48},[52,37439,37440,37442,37444],{"class":54,"line":55},[52,37441,59],{"class":58},[52,37443,63],{"class":371},[52,37445,77],{"class":58},[52,37447,37448,37450],{"class":54,"line":80},[52,37449,83],{"class":58},[52,37451,37396],{"class":371},[52,37453,37454,37456,37458,37460,37462],{"class":54,"line":108},[52,37455,17755],{"class":66},[52,37457,70],{"class":231},[52,37459,723],{"class":58},[52,37461,5241],{"class":371},[52,37463,729],{"class":58},[52,37465,37466],{"class":54,"line":118},[52,37467,26724],{"class":58},[52,37469,37470,37472,37474],{"class":54,"line":594},[52,37471,2213],{"class":58},[52,37473,2216],{"class":371},[52,37475,105],{"class":58},[52,37477,37478,37480,37482],{"class":54,"line":600},[52,37479,2230],{"class":58},[52,37481,37357],{"class":371},[52,37483,77],{"class":58},[52,37485,37486,37488,37490],{"class":54,"line":606},[52,37487,121],{"class":58},[52,37489,63],{"class":371},[52,37491,77],{"class":58},[43,37493,37494],{"className":2507,"code":37435,"language":2509,"meta":48,"style":48},[31,37495,37496,37504,37510,37520,37524,37532,37540],{"__ignoreMap":48},[52,37497,37498,37500,37502],{"class":54,"line":55},[52,37499,59],{"class":58},[52,37501,63],{"class":371},[52,37503,77],{"class":58},[52,37505,37506,37508],{"class":54,"line":80},[52,37507,83],{"class":58},[52,37509,37396],{"class":371},[52,37511,37512,37514,37516,37518],{"class":54,"line":108},[52,37513,17755],{"class":66},[52,37515,24620],{"class":58},[52,37517,5241],{"class":371},[52,37519,729],{"class":58},[52,37521,37522],{"class":54,"line":118},[52,37523,26724],{"class":58},[52,37525,37526,37528,37530],{"class":54,"line":594},[52,37527,2213],{"class":58},[52,37529,2216],{"class":371},[52,37531,105],{"class":58},[52,37533,37534,37536,37538],{"class":54,"line":600},[52,37535,2230],{"class":58},[52,37537,37357],{"class":371},[52,37539,77],{"class":58},[52,37541,37542,37544,37546],{"class":54,"line":606},[52,37543,121],{"class":58},[52,37545,63],{"class":371},[52,37547,77],{"class":58},[43,37549,37550],{"className":419,"code":37435,"language":420,"meta":48,"style":48},[31,37551,37552,37560,37566,37578,37582,37590,37598],{"__ignoreMap":48},[52,37553,37554,37556,37558],{"class":54,"line":55},[52,37555,59],{"class":58},[52,37557,63],{"class":371},[52,37559,77],{"class":58},[52,37561,37562,37564],{"class":54,"line":80},[52,37563,83],{"class":58},[52,37565,37396],{"class":371},[52,37567,37568,37570,37572,37574,37576],{"class":54,"line":108},[52,37569,17755],{"class":66},[52,37571,70],{"class":231},[52,37573,723],{"class":58},[52,37575,5241],{"class":371},[52,37577,729],{"class":58},[52,37579,37580],{"class":54,"line":118},[52,37581,26724],{"class":58},[52,37583,37584,37586,37588],{"class":54,"line":594},[52,37585,2213],{"class":58},[52,37587,2216],{"class":371},[52,37589,105],{"class":58},[52,37591,37592,37594,37596],{"class":54,"line":600},[52,37593,2230],{"class":58},[52,37595,37357],{"class":371},[52,37597,77],{"class":58},[52,37599,37600,37602,37604],{"class":54,"line":606},[52,37601,121],{"class":58},[52,37603,63],{"class":371},[52,37605,77],{"class":58},[43,37607,37609],{"className":222,"code":37608,"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,37610,37611,37621,37625,37639,37643,37656,37664,37668,37672],{"__ignoreMap":48},[52,37612,37613,37615,37617,37619],{"class":54,"line":55},[52,37614,232],{"class":231},[52,37616,9005],{"class":58},[52,37618,238],{"class":231},[52,37620,9010],{"class":73},[52,37622,37623],{"class":54,"line":80},[52,37624,597],{"emptyLinePlaceholder":171},[52,37626,37627,37629,37631,37633,37635,37637],{"class":54,"line":108},[52,37628,1721],{"class":231},[52,37630,1724],{"class":371},[52,37632,1727],{"class":231},[52,37634,1730],{"class":231},[52,37636,1733],{"class":66},[52,37638,1736],{"class":58},[52,37640,37641],{"class":54,"line":118},[52,37642,1751],{"class":58},[52,37644,37645,37647,37650,37652,37654],{"class":54,"line":594},[52,37646,1756],{"class":58},[52,37648,37649],{"class":73},"'Glitch'",[52,37651,26969],{"class":58},[52,37653,5241],{"class":371},[52,37655,5033],{"class":58},[52,37657,37658,37660,37662],{"class":54,"line":600},[52,37659,4501],{"class":58},[52,37661,2869],{"class":73},[52,37663,2129],{"class":58},[52,37665,37666],{"class":54,"line":606},[52,37667,4518],{"class":58},[52,37669,37670],{"class":54,"line":653},[52,37671,1773],{"class":58},[52,37673,37674],{"class":54,"line":662},[52,37675,1778],{"class":58},[156,37677,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37679},[37680,37681],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glitch",{"title":37357,"description":37365},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":37688,"title":9283,"body":37689,"category":27278,"componentType":20623,"description":37696,"extension":168,"meta":38013,"navigation":171,"path":38014,"requiresChild":171,"seo":38015,"stem":38016,"__hash__":38017},"components/docs/components/Glow.md",{"type":8,"value":37690,"toc":38009},[37691,37694,37697,37699,37701,37704,37706,38007],[11,37692,9283],{"id":37693},"glow",[15,37695,37696],{},"Soft glow effect with adjustable intensity",[26676,37698],{"component":9283},[23,37700,26680],{"id":21278},[26682,37702],{":props":37703},"[{\"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,37705,26688],{"id":26687},[217,37707,37708,37764,37823,37879,37937],{":tabs":1543},[43,37709,37711],{"className":45,"code":37710,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,37712,37713,37721,37728,37736,37740,37748,37756],{"__ignoreMap":48},[52,37714,37715,37717,37719],{"class":54,"line":55},[52,37716,59],{"class":58},[52,37718,63],{"class":62},[52,37720,77],{"class":58},[52,37722,37723,37725],{"class":54,"line":80},[52,37724,83],{"class":58},[52,37726,37727],{"class":62},"Glow\n",[52,37729,37730,37732,37734],{"class":54,"line":108},[52,37731,17644],{"class":66},[52,37733,70],{"class":58},[52,37735,28602],{"class":73},[52,37737,37738],{"class":54,"line":118},[52,37739,26724],{"class":58},[52,37741,37742,37744,37746],{"class":54,"line":594},[52,37743,2213],{"class":58},[52,37745,2216],{"class":62},[52,37747,105],{"class":58},[52,37749,37750,37752,37754],{"class":54,"line":600},[52,37751,2230],{"class":58},[52,37753,9283],{"class":62},[52,37755,77],{"class":58},[52,37757,37758,37760,37762],{"class":54,"line":606},[52,37759,121],{"class":58},[52,37761,63],{"class":62},[52,37763,77],{"class":58},[43,37765,37767],{"className":360,"code":37766,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,37768,37769,37777,37783,37795,37799,37807,37815],{"__ignoreMap":48},[52,37770,37771,37773,37775],{"class":54,"line":55},[52,37772,59],{"class":58},[52,37774,63],{"class":371},[52,37776,77],{"class":58},[52,37778,37779,37781],{"class":54,"line":80},[52,37780,83],{"class":58},[52,37782,37727],{"class":371},[52,37784,37785,37787,37789,37791,37793],{"class":54,"line":108},[52,37786,17755],{"class":66},[52,37788,70],{"class":231},[52,37790,723],{"class":58},[52,37792,6165],{"class":371},[52,37794,729],{"class":58},[52,37796,37797],{"class":54,"line":118},[52,37798,26724],{"class":58},[52,37800,37801,37803,37805],{"class":54,"line":594},[52,37802,2213],{"class":58},[52,37804,2216],{"class":371},[52,37806,105],{"class":58},[52,37808,37809,37811,37813],{"class":54,"line":600},[52,37810,2230],{"class":58},[52,37812,9283],{"class":371},[52,37814,77],{"class":58},[52,37816,37817,37819,37821],{"class":54,"line":606},[52,37818,121],{"class":58},[52,37820,63],{"class":371},[52,37822,77],{"class":58},[43,37824,37825],{"className":2507,"code":37766,"language":2509,"meta":48,"style":48},[31,37826,37827,37835,37841,37851,37855,37863,37871],{"__ignoreMap":48},[52,37828,37829,37831,37833],{"class":54,"line":55},[52,37830,59],{"class":58},[52,37832,63],{"class":371},[52,37834,77],{"class":58},[52,37836,37837,37839],{"class":54,"line":80},[52,37838,83],{"class":58},[52,37840,37727],{"class":371},[52,37842,37843,37845,37847,37849],{"class":54,"line":108},[52,37844,17755],{"class":66},[52,37846,24620],{"class":58},[52,37848,6165],{"class":371},[52,37850,729],{"class":58},[52,37852,37853],{"class":54,"line":118},[52,37854,26724],{"class":58},[52,37856,37857,37859,37861],{"class":54,"line":594},[52,37858,2213],{"class":58},[52,37860,2216],{"class":371},[52,37862,105],{"class":58},[52,37864,37865,37867,37869],{"class":54,"line":600},[52,37866,2230],{"class":58},[52,37868,9283],{"class":371},[52,37870,77],{"class":58},[52,37872,37873,37875,37877],{"class":54,"line":606},[52,37874,121],{"class":58},[52,37876,63],{"class":371},[52,37878,77],{"class":58},[43,37880,37881],{"className":419,"code":37766,"language":420,"meta":48,"style":48},[31,37882,37883,37891,37897,37909,37913,37921,37929],{"__ignoreMap":48},[52,37884,37885,37887,37889],{"class":54,"line":55},[52,37886,59],{"class":58},[52,37888,63],{"class":371},[52,37890,77],{"class":58},[52,37892,37893,37895],{"class":54,"line":80},[52,37894,83],{"class":58},[52,37896,37727],{"class":371},[52,37898,37899,37901,37903,37905,37907],{"class":54,"line":108},[52,37900,17755],{"class":66},[52,37902,70],{"class":231},[52,37904,723],{"class":58},[52,37906,6165],{"class":371},[52,37908,729],{"class":58},[52,37910,37911],{"class":54,"line":118},[52,37912,26724],{"class":58},[52,37914,37915,37917,37919],{"class":54,"line":594},[52,37916,2213],{"class":58},[52,37918,2216],{"class":371},[52,37920,105],{"class":58},[52,37922,37923,37925,37927],{"class":54,"line":600},[52,37924,2230],{"class":58},[52,37926,9283],{"class":371},[52,37928,77],{"class":58},[52,37930,37931,37933,37935],{"class":54,"line":606},[52,37932,121],{"class":58},[52,37934,63],{"class":371},[52,37936,77],{"class":58},[43,37938,37940],{"className":222,"code":37939,"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,37941,37942,37952,37956,37970,37974,37987,37995,37999,38003],{"__ignoreMap":48},[52,37943,37944,37946,37948,37950],{"class":54,"line":55},[52,37945,232],{"class":231},[52,37947,9005],{"class":58},[52,37949,238],{"class":231},[52,37951,9010],{"class":73},[52,37953,37954],{"class":54,"line":80},[52,37955,597],{"emptyLinePlaceholder":171},[52,37957,37958,37960,37962,37964,37966,37968],{"class":54,"line":108},[52,37959,1721],{"class":231},[52,37961,1724],{"class":371},[52,37963,1727],{"class":231},[52,37965,1730],{"class":231},[52,37967,1733],{"class":66},[52,37969,1736],{"class":58},[52,37971,37972],{"class":54,"line":118},[52,37973,1751],{"class":58},[52,37975,37976,37978,37981,37983,37985],{"class":54,"line":594},[52,37977,1756],{"class":58},[52,37979,37980],{"class":73},"'Glow'",[52,37982,26969],{"class":58},[52,37984,6165],{"class":371},[52,37986,5033],{"class":58},[52,37988,37989,37991,37993],{"class":54,"line":600},[52,37990,4501],{"class":58},[52,37992,2869],{"class":73},[52,37994,2129],{"class":58},[52,37996,37997],{"class":54,"line":606},[52,37998,4518],{"class":58},[52,38000,38001],{"class":54,"line":653},[52,38002,1773],{"class":58},[52,38004,38005],{"class":54,"line":662},[52,38006,1778],{"class":58},[156,38008,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38010},[38011,38012],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/glow",{"title":9283,"description":37696},"docs/components/Glow","nY6FLTxSC0jk4JC2WGI4IwGXHT0zG4brVxkpPPza0M0",{"id":38019,"title":38020,"body":38021,"category":27535,"componentType":20617,"description":38028,"extension":168,"meta":38269,"navigation":171,"path":38270,"requiresChild":27538,"seo":38271,"stem":38272,"__hash__":38273},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":38022,"toc":38265},[38023,38026,38029,38031,38033,38036,38038,38263],[11,38024,38020],{"id":38025},"godrays",[15,38027,38028],{},"Volumetric light rays emanating from a point",[26676,38030],{"component":38020},[23,38032,26680],{"id":21278},[26682,38034],{":props":38035},"[{\"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,38037,26688],{"id":26687},[217,38039,38040,38080,38123,38163,38205],{":tabs":1543},[43,38041,38043],{"className":45,"code":38042,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,38044,38045,38053,38060,38068,38072],{"__ignoreMap":48},[52,38046,38047,38049,38051],{"class":54,"line":55},[52,38048,59],{"class":58},[52,38050,63],{"class":62},[52,38052,77],{"class":58},[52,38054,38055,38057],{"class":54,"line":80},[52,38056,83],{"class":58},[52,38058,38059],{"class":62},"Godrays\n",[52,38061,38062,38064,38066],{"class":54,"line":108},[52,38063,17644],{"class":66},[52,38065,70],{"class":58},[52,38067,7140],{"class":73},[52,38069,38070],{"class":54,"line":118},[52,38071,1224],{"class":58},[52,38073,38074,38076,38078],{"class":54,"line":594},[52,38075,121],{"class":58},[52,38077,63],{"class":62},[52,38079,77],{"class":58},[43,38081,38083],{"className":360,"code":38082,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,38084,38085,38093,38099,38111,38115],{"__ignoreMap":48},[52,38086,38087,38089,38091],{"class":54,"line":55},[52,38088,59],{"class":58},[52,38090,63],{"class":371},[52,38092,77],{"class":58},[52,38094,38095,38097],{"class":54,"line":80},[52,38096,83],{"class":58},[52,38098,38059],{"class":371},[52,38100,38101,38103,38105,38107,38109],{"class":54,"line":108},[52,38102,17755],{"class":66},[52,38104,70],{"class":231},[52,38106,723],{"class":58},[52,38108,3785],{"class":371},[52,38110,729],{"class":58},[52,38112,38113],{"class":54,"line":118},[52,38114,1224],{"class":58},[52,38116,38117,38119,38121],{"class":54,"line":594},[52,38118,121],{"class":58},[52,38120,63],{"class":371},[52,38122,77],{"class":58},[43,38124,38125],{"className":2507,"code":38082,"language":2509,"meta":48,"style":48},[31,38126,38127,38135,38141,38151,38155],{"__ignoreMap":48},[52,38128,38129,38131,38133],{"class":54,"line":55},[52,38130,59],{"class":58},[52,38132,63],{"class":371},[52,38134,77],{"class":58},[52,38136,38137,38139],{"class":54,"line":80},[52,38138,83],{"class":58},[52,38140,38059],{"class":371},[52,38142,38143,38145,38147,38149],{"class":54,"line":108},[52,38144,17755],{"class":66},[52,38146,24620],{"class":58},[52,38148,3785],{"class":371},[52,38150,729],{"class":58},[52,38152,38153],{"class":54,"line":118},[52,38154,1224],{"class":58},[52,38156,38157,38159,38161],{"class":54,"line":594},[52,38158,121],{"class":58},[52,38160,63],{"class":371},[52,38162,77],{"class":58},[43,38164,38165],{"className":419,"code":38082,"language":420,"meta":48,"style":48},[31,38166,38167,38175,38181,38193,38197],{"__ignoreMap":48},[52,38168,38169,38171,38173],{"class":54,"line":55},[52,38170,59],{"class":58},[52,38172,63],{"class":371},[52,38174,77],{"class":58},[52,38176,38177,38179],{"class":54,"line":80},[52,38178,83],{"class":58},[52,38180,38059],{"class":371},[52,38182,38183,38185,38187,38189,38191],{"class":54,"line":108},[52,38184,17755],{"class":66},[52,38186,70],{"class":231},[52,38188,723],{"class":58},[52,38190,3785],{"class":371},[52,38192,729],{"class":58},[52,38194,38195],{"class":54,"line":118},[52,38196,1224],{"class":58},[52,38198,38199,38201,38203],{"class":54,"line":594},[52,38200,121],{"class":58},[52,38202,63],{"class":371},[52,38204,77],{"class":58},[43,38206,38208],{"className":222,"code":38207,"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,38209,38210,38220,38224,38238,38242,38255,38259],{"__ignoreMap":48},[52,38211,38212,38214,38216,38218],{"class":54,"line":55},[52,38213,232],{"class":231},[52,38215,9005],{"class":58},[52,38217,238],{"class":231},[52,38219,9010],{"class":73},[52,38221,38222],{"class":54,"line":80},[52,38223,597],{"emptyLinePlaceholder":171},[52,38225,38226,38228,38230,38232,38234,38236],{"class":54,"line":108},[52,38227,1721],{"class":231},[52,38229,1724],{"class":371},[52,38231,1727],{"class":231},[52,38233,1730],{"class":231},[52,38235,1733],{"class":66},[52,38237,1736],{"class":58},[52,38239,38240],{"class":54,"line":118},[52,38241,1751],{"class":58},[52,38243,38244,38246,38249,38251,38253],{"class":54,"line":594},[52,38245,1756],{"class":58},[52,38247,38248],{"class":73},"'Godrays'",[52,38250,26969],{"class":58},[52,38252,3785],{"class":371},[52,38254,1768],{"class":58},[52,38256,38257],{"class":54,"line":600},[52,38258,1773],{"class":58},[52,38260,38261],{"class":54,"line":606},[52,38262,1778],{"class":58},[156,38264,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38266},[38267,38268],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/godrays",{"title":38020,"description":38028},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":38275,"title":38276,"body":38277,"category":28546,"componentType":20623,"description":38284,"extension":168,"meta":38539,"navigation":171,"path":38540,"requiresChild":171,"seo":38541,"stem":38542,"__hash__":38543},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":38278,"toc":38536},[38279,38282,38285,38287,38289,38534],[11,38280,38276],{"id":38281},"grayscale",[15,38283,38284],{},"Convert colors to black and white",[26676,38286],{"component":38276},[23,38288,26688],{"id":26687},[217,38290,38291,38336,38380,38424,38468],{":tabs":1543},[43,38292,38294],{"className":45,"code":38293,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,38295,38296,38304,38312,38320,38328],{"__ignoreMap":48},[52,38297,38298,38300,38302],{"class":54,"line":55},[52,38299,59],{"class":58},[52,38301,63],{"class":62},[52,38303,77],{"class":58},[52,38305,38306,38308,38310],{"class":54,"line":80},[52,38307,83],{"class":58},[52,38309,38276],{"class":62},[52,38311,77],{"class":58},[52,38313,38314,38316,38318],{"class":54,"line":108},[52,38315,2213],{"class":58},[52,38317,2216],{"class":62},[52,38319,105],{"class":58},[52,38321,38322,38324,38326],{"class":54,"line":118},[52,38323,2230],{"class":58},[52,38325,38276],{"class":62},[52,38327,77],{"class":58},[52,38329,38330,38332,38334],{"class":54,"line":594},[52,38331,121],{"class":58},[52,38333,63],{"class":62},[52,38335,77],{"class":58},[43,38337,38338],{"className":360,"code":38293,"language":362,"meta":48,"style":48},[31,38339,38340,38348,38356,38364,38372],{"__ignoreMap":48},[52,38341,38342,38344,38346],{"class":54,"line":55},[52,38343,59],{"class":58},[52,38345,63],{"class":371},[52,38347,77],{"class":58},[52,38349,38350,38352,38354],{"class":54,"line":80},[52,38351,83],{"class":58},[52,38353,38276],{"class":371},[52,38355,77],{"class":58},[52,38357,38358,38360,38362],{"class":54,"line":108},[52,38359,2213],{"class":58},[52,38361,2216],{"class":371},[52,38363,105],{"class":58},[52,38365,38366,38368,38370],{"class":54,"line":118},[52,38367,2230],{"class":58},[52,38369,38276],{"class":371},[52,38371,77],{"class":58},[52,38373,38374,38376,38378],{"class":54,"line":594},[52,38375,121],{"class":58},[52,38377,63],{"class":371},[52,38379,77],{"class":58},[43,38381,38382],{"className":2507,"code":38293,"language":2509,"meta":48,"style":48},[31,38383,38384,38392,38400,38408,38416],{"__ignoreMap":48},[52,38385,38386,38388,38390],{"class":54,"line":55},[52,38387,59],{"class":58},[52,38389,63],{"class":371},[52,38391,77],{"class":58},[52,38393,38394,38396,38398],{"class":54,"line":80},[52,38395,83],{"class":58},[52,38397,38276],{"class":371},[52,38399,77],{"class":58},[52,38401,38402,38404,38406],{"class":54,"line":108},[52,38403,2213],{"class":58},[52,38405,2216],{"class":371},[52,38407,105],{"class":58},[52,38409,38410,38412,38414],{"class":54,"line":118},[52,38411,2230],{"class":58},[52,38413,38276],{"class":371},[52,38415,77],{"class":58},[52,38417,38418,38420,38422],{"class":54,"line":594},[52,38419,121],{"class":58},[52,38421,63],{"class":371},[52,38423,77],{"class":58},[43,38425,38426],{"className":419,"code":38293,"language":420,"meta":48,"style":48},[31,38427,38428,38436,38444,38452,38460],{"__ignoreMap":48},[52,38429,38430,38432,38434],{"class":54,"line":55},[52,38431,59],{"class":58},[52,38433,63],{"class":371},[52,38435,77],{"class":58},[52,38437,38438,38440,38442],{"class":54,"line":80},[52,38439,83],{"class":58},[52,38441,38276],{"class":371},[52,38443,77],{"class":58},[52,38445,38446,38448,38450],{"class":54,"line":108},[52,38447,2213],{"class":58},[52,38449,2216],{"class":371},[52,38451,105],{"class":58},[52,38453,38454,38456,38458],{"class":54,"line":118},[52,38455,2230],{"class":58},[52,38457,38276],{"class":371},[52,38459,77],{"class":58},[52,38461,38462,38464,38466],{"class":54,"line":594},[52,38463,121],{"class":58},[52,38465,63],{"class":371},[52,38467,77],{"class":58},[43,38469,38471],{"className":222,"code":38470,"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,38472,38473,38483,38487,38501,38505,38514,38522,38526,38530],{"__ignoreMap":48},[52,38474,38475,38477,38479,38481],{"class":54,"line":55},[52,38476,232],{"class":231},[52,38478,9005],{"class":58},[52,38480,238],{"class":231},[52,38482,9010],{"class":73},[52,38484,38485],{"class":54,"line":80},[52,38486,597],{"emptyLinePlaceholder":171},[52,38488,38489,38491,38493,38495,38497,38499],{"class":54,"line":108},[52,38490,1721],{"class":231},[52,38492,1724],{"class":371},[52,38494,1727],{"class":231},[52,38496,1730],{"class":231},[52,38498,1733],{"class":66},[52,38500,1736],{"class":58},[52,38502,38503],{"class":54,"line":118},[52,38504,1751],{"class":58},[52,38506,38507,38509,38512],{"class":54,"line":594},[52,38508,1756],{"class":58},[52,38510,38511],{"class":73},"'Grayscale'",[52,38513,4496],{"class":58},[52,38515,38516,38518,38520],{"class":54,"line":600},[52,38517,4501],{"class":58},[52,38519,2869],{"class":73},[52,38521,2129],{"class":58},[52,38523,38524],{"class":54,"line":606},[52,38525,4518],{"class":58},[52,38527,38528],{"class":54,"line":653},[52,38529,1773],{"class":58},[52,38531,38532],{"class":54,"line":662},[52,38533,1778],{"class":58},[156,38535,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":38537},[38538],{"id":26687,"depth":80,"text":26688},{},"/docs/components/grayscale",{"title":38276,"description":38284},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":38545,"title":38546,"body":38547,"category":27535,"componentType":20617,"description":38554,"extension":168,"meta":38784,"navigation":171,"path":38785,"requiresChild":27538,"seo":38786,"stem":38787,"__hash__":38788},"components/docs/components/Grid.md","Grid",{"type":8,"value":38548,"toc":38780},[38549,38552,38555,38557,38559,38562,38564,38778],[11,38550,38546],{"id":38551},"grid",[15,38553,38554],{},"Simple grid lines pattern with adjustable thickness and rotation",[26676,38556],{"component":38546},[23,38558,26680],{"id":21278},[26682,38560],{":props":38561},"[{\"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,38563,26688],{"id":26687},[217,38565,38566,38606,38644,38682,38720],{":tabs":1543},[43,38567,38569],{"className":45,"code":38568,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,38570,38571,38579,38586,38594,38598],{"__ignoreMap":48},[52,38572,38573,38575,38577],{"class":54,"line":55},[52,38574,59],{"class":58},[52,38576,63],{"class":62},[52,38578,77],{"class":58},[52,38580,38581,38583],{"class":54,"line":80},[52,38582,83],{"class":58},[52,38584,38585],{"class":62},"Grid\n",[52,38587,38588,38590,38592],{"class":54,"line":108},[52,38589,7125],{"class":66},[52,38591,70],{"class":58},[52,38593,7081],{"class":73},[52,38595,38596],{"class":54,"line":118},[52,38597,1224],{"class":58},[52,38599,38600,38602,38604],{"class":54,"line":594},[52,38601,121],{"class":58},[52,38603,63],{"class":62},[52,38605,77],{"class":58},[43,38607,38608],{"className":360,"code":38568,"language":362,"meta":48,"style":48},[31,38609,38610,38618,38624,38632,38636],{"__ignoreMap":48},[52,38611,38612,38614,38616],{"class":54,"line":55},[52,38613,59],{"class":58},[52,38615,63],{"class":371},[52,38617,77],{"class":58},[52,38619,38620,38622],{"class":54,"line":80},[52,38621,83],{"class":58},[52,38623,38585],{"class":371},[52,38625,38626,38628,38630],{"class":54,"line":108},[52,38627,7125],{"class":66},[52,38629,70],{"class":231},[52,38631,7081],{"class":73},[52,38633,38634],{"class":54,"line":118},[52,38635,1224],{"class":58},[52,38637,38638,38640,38642],{"class":54,"line":594},[52,38639,121],{"class":58},[52,38641,63],{"class":371},[52,38643,77],{"class":58},[43,38645,38646],{"className":2507,"code":38568,"language":2509,"meta":48,"style":48},[31,38647,38648,38656,38662,38670,38674],{"__ignoreMap":48},[52,38649,38650,38652,38654],{"class":54,"line":55},[52,38651,59],{"class":58},[52,38653,63],{"class":371},[52,38655,77],{"class":58},[52,38657,38658,38660],{"class":54,"line":80},[52,38659,83],{"class":58},[52,38661,38585],{"class":371},[52,38663,38664,38666,38668],{"class":54,"line":108},[52,38665,7125],{"class":66},[52,38667,70],{"class":58},[52,38669,7081],{"class":73},[52,38671,38672],{"class":54,"line":118},[52,38673,1224],{"class":58},[52,38675,38676,38678,38680],{"class":54,"line":594},[52,38677,121],{"class":58},[52,38679,63],{"class":371},[52,38681,77],{"class":58},[43,38683,38684],{"className":419,"code":38568,"language":420,"meta":48,"style":48},[31,38685,38686,38694,38700,38708,38712],{"__ignoreMap":48},[52,38687,38688,38690,38692],{"class":54,"line":55},[52,38689,59],{"class":58},[52,38691,63],{"class":371},[52,38693,77],{"class":58},[52,38695,38696,38698],{"class":54,"line":80},[52,38697,83],{"class":58},[52,38699,38585],{"class":371},[52,38701,38702,38704,38706],{"class":54,"line":108},[52,38703,7125],{"class":66},[52,38705,70],{"class":231},[52,38707,7081],{"class":73},[52,38709,38710],{"class":54,"line":118},[52,38711,1224],{"class":58},[52,38713,38714,38716,38718],{"class":54,"line":594},[52,38715,121],{"class":58},[52,38717,63],{"class":371},[52,38719,77],{"class":58},[43,38721,38723],{"className":222,"code":38722,"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,38724,38725,38735,38739,38753,38757,38770,38774],{"__ignoreMap":48},[52,38726,38727,38729,38731,38733],{"class":54,"line":55},[52,38728,232],{"class":231},[52,38730,9005],{"class":58},[52,38732,238],{"class":231},[52,38734,9010],{"class":73},[52,38736,38737],{"class":54,"line":80},[52,38738,597],{"emptyLinePlaceholder":171},[52,38740,38741,38743,38745,38747,38749,38751],{"class":54,"line":108},[52,38742,1721],{"class":231},[52,38744,1724],{"class":371},[52,38746,1727],{"class":231},[52,38748,1730],{"class":231},[52,38750,1733],{"class":66},[52,38752,1736],{"class":58},[52,38754,38755],{"class":54,"line":118},[52,38756,1751],{"class":58},[52,38758,38759,38761,38764,38766,38768],{"class":54,"line":594},[52,38760,1756],{"class":58},[52,38762,38763],{"class":73},"'Grid'",[52,38765,1762],{"class":58},[52,38767,7660],{"class":73},[52,38769,1768],{"class":58},[52,38771,38772],{"class":54,"line":600},[52,38773,1773],{"class":58},[52,38775,38776],{"class":54,"line":606},[52,38777,1778],{"class":58},[156,38779,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38781},[38782,38783],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/grid",{"title":38546,"description":38554},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":38790,"title":4582,"body":38791,"category":29936,"componentType":20623,"description":38798,"extension":168,"meta":39160,"navigation":171,"path":39161,"requiresChild":171,"seo":39162,"stem":39163,"__hash__":39164},"components/docs/components/GridDistortion.md",{"type":8,"value":38792,"toc":39156},[38793,38796,38799,38801,38803,38806,38808,39154],[11,38794,4582],{"id":38795},"griddistortion",[15,38797,38798],{},"Interactive grid distortion controlled by mouse position",[26676,38800],{"component":4582},[23,38802,26680],{"id":21278},[26682,38804],{":props":38805},"[{\"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,38807,26688],{"id":26687},[217,38809,38810,38874,38945,39011,39081],{":tabs":1543},[43,38811,38813],{"className":45,"code":38812,"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,38814,38815,38823,38830,38838,38846,38850,38858,38866],{"__ignoreMap":48},[52,38816,38817,38819,38821],{"class":54,"line":55},[52,38818,59],{"class":58},[52,38820,63],{"class":62},[52,38822,77],{"class":58},[52,38824,38825,38827],{"class":54,"line":80},[52,38826,83],{"class":58},[52,38828,38829],{"class":62},"GridDistortion\n",[52,38831,38832,38834,38836],{"class":54,"line":108},[52,38833,17644],{"class":66},[52,38835,70],{"class":58},[52,38837,28602],{"class":73},[52,38839,38840,38842,38844],{"class":54,"line":118},[52,38841,14675],{"class":66},[52,38843,70],{"class":58},[52,38845,28602],{"class":73},[52,38847,38848],{"class":54,"line":594},[52,38849,26724],{"class":58},[52,38851,38852,38854,38856],{"class":54,"line":600},[52,38853,2213],{"class":58},[52,38855,2216],{"class":62},[52,38857,105],{"class":58},[52,38859,38860,38862,38864],{"class":54,"line":606},[52,38861,2230],{"class":58},[52,38863,4582],{"class":62},[52,38865,77],{"class":58},[52,38867,38868,38870,38872],{"class":54,"line":653},[52,38869,121],{"class":58},[52,38871,63],{"class":62},[52,38873,77],{"class":58},[43,38875,38877],{"className":360,"code":38876,"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,38878,38879,38887,38893,38905,38917,38921,38929,38937],{"__ignoreMap":48},[52,38880,38881,38883,38885],{"class":54,"line":55},[52,38882,59],{"class":58},[52,38884,63],{"class":371},[52,38886,77],{"class":58},[52,38888,38889,38891],{"class":54,"line":80},[52,38890,83],{"class":58},[52,38892,38829],{"class":371},[52,38894,38895,38897,38899,38901,38903],{"class":54,"line":108},[52,38896,17755],{"class":66},[52,38898,70],{"class":231},[52,38900,723],{"class":58},[52,38902,6165],{"class":371},[52,38904,729],{"class":58},[52,38906,38907,38909,38911,38913,38915],{"class":54,"line":118},[52,38908,7135],{"class":66},[52,38910,70],{"class":231},[52,38912,723],{"class":58},[52,38914,6165],{"class":371},[52,38916,729],{"class":58},[52,38918,38919],{"class":54,"line":594},[52,38920,26724],{"class":58},[52,38922,38923,38925,38927],{"class":54,"line":600},[52,38924,2213],{"class":58},[52,38926,2216],{"class":371},[52,38928,105],{"class":58},[52,38930,38931,38933,38935],{"class":54,"line":606},[52,38932,2230],{"class":58},[52,38934,4582],{"class":371},[52,38936,77],{"class":58},[52,38938,38939,38941,38943],{"class":54,"line":653},[52,38940,121],{"class":58},[52,38942,63],{"class":371},[52,38944,77],{"class":58},[43,38946,38947],{"className":2507,"code":38876,"language":2509,"meta":48,"style":48},[31,38948,38949,38957,38963,38973,38983,38987,38995,39003],{"__ignoreMap":48},[52,38950,38951,38953,38955],{"class":54,"line":55},[52,38952,59],{"class":58},[52,38954,63],{"class":371},[52,38956,77],{"class":58},[52,38958,38959,38961],{"class":54,"line":80},[52,38960,83],{"class":58},[52,38962,38829],{"class":371},[52,38964,38965,38967,38969,38971],{"class":54,"line":108},[52,38966,17755],{"class":66},[52,38968,24620],{"class":58},[52,38970,6165],{"class":371},[52,38972,729],{"class":58},[52,38974,38975,38977,38979,38981],{"class":54,"line":118},[52,38976,7135],{"class":66},[52,38978,24620],{"class":58},[52,38980,6165],{"class":371},[52,38982,729],{"class":58},[52,38984,38985],{"class":54,"line":594},[52,38986,26724],{"class":58},[52,38988,38989,38991,38993],{"class":54,"line":600},[52,38990,2213],{"class":58},[52,38992,2216],{"class":371},[52,38994,105],{"class":58},[52,38996,38997,38999,39001],{"class":54,"line":606},[52,38998,2230],{"class":58},[52,39000,4582],{"class":371},[52,39002,77],{"class":58},[52,39004,39005,39007,39009],{"class":54,"line":653},[52,39006,121],{"class":58},[52,39008,63],{"class":371},[52,39010,77],{"class":58},[43,39012,39013],{"className":419,"code":38876,"language":420,"meta":48,"style":48},[31,39014,39015,39023,39029,39041,39053,39057,39065,39073],{"__ignoreMap":48},[52,39016,39017,39019,39021],{"class":54,"line":55},[52,39018,59],{"class":58},[52,39020,63],{"class":371},[52,39022,77],{"class":58},[52,39024,39025,39027],{"class":54,"line":80},[52,39026,83],{"class":58},[52,39028,38829],{"class":371},[52,39030,39031,39033,39035,39037,39039],{"class":54,"line":108},[52,39032,17755],{"class":66},[52,39034,70],{"class":231},[52,39036,723],{"class":58},[52,39038,6165],{"class":371},[52,39040,729],{"class":58},[52,39042,39043,39045,39047,39049,39051],{"class":54,"line":118},[52,39044,7135],{"class":66},[52,39046,70],{"class":231},[52,39048,723],{"class":58},[52,39050,6165],{"class":371},[52,39052,729],{"class":58},[52,39054,39055],{"class":54,"line":594},[52,39056,26724],{"class":58},[52,39058,39059,39061,39063],{"class":54,"line":600},[52,39060,2213],{"class":58},[52,39062,2216],{"class":371},[52,39064,105],{"class":58},[52,39066,39067,39069,39071],{"class":54,"line":606},[52,39068,2230],{"class":58},[52,39070,4582],{"class":371},[52,39072,77],{"class":58},[52,39074,39075,39077,39079],{"class":54,"line":653},[52,39076,121],{"class":58},[52,39078,63],{"class":371},[52,39080,77],{"class":58},[43,39082,39084],{"className":222,"code":39083,"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,39085,39086,39096,39100,39114,39118,39134,39142,39146,39150],{"__ignoreMap":48},[52,39087,39088,39090,39092,39094],{"class":54,"line":55},[52,39089,232],{"class":231},[52,39091,9005],{"class":58},[52,39093,238],{"class":231},[52,39095,9010],{"class":73},[52,39097,39098],{"class":54,"line":80},[52,39099,597],{"emptyLinePlaceholder":171},[52,39101,39102,39104,39106,39108,39110,39112],{"class":54,"line":108},[52,39103,1721],{"class":231},[52,39105,1724],{"class":371},[52,39107,1727],{"class":231},[52,39109,1730],{"class":231},[52,39111,1733],{"class":66},[52,39113,1736],{"class":58},[52,39115,39116],{"class":54,"line":118},[52,39117,1751],{"class":58},[52,39119,39120,39122,39124,39126,39128,39130,39132],{"class":54,"line":594},[52,39121,1756],{"class":58},[52,39123,5025],{"class":73},[52,39125,26969],{"class":58},[52,39127,6165],{"class":371},[52,39129,4052],{"class":58},[52,39131,6165],{"class":371},[52,39133,5033],{"class":58},[52,39135,39136,39138,39140],{"class":54,"line":600},[52,39137,4501],{"class":58},[52,39139,2869],{"class":73},[52,39141,2129],{"class":58},[52,39143,39144],{"class":54,"line":606},[52,39145,4518],{"class":58},[52,39147,39148],{"class":54,"line":653},[52,39149,1773],{"class":58},[52,39151,39152],{"class":54,"line":662},[52,39153,1778],{"class":58},[156,39155,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39157},[39158,39159],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/griddistortion",{"title":4582,"description":38798},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":39166,"title":39167,"body":39168,"category":39430,"componentType":20623,"description":39175,"extension":168,"meta":39431,"navigation":171,"path":39432,"requiresChild":171,"seo":39433,"stem":39434,"__hash__":39435},"components/docs/components/Group.md","Group",{"type":8,"value":39169,"toc":39427},[39170,39173,39176,39178,39180,39425],[11,39171,39167],{"id":39172},"group",[15,39174,39175],{},"Container for organizing and composing child effects",[26676,39177],{"component":39167},[23,39179,26688],{"id":26687},[217,39181,39182,39227,39271,39315,39359],{":tabs":1543},[43,39183,39185],{"className":45,"code":39184,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,39186,39187,39195,39203,39211,39219],{"__ignoreMap":48},[52,39188,39189,39191,39193],{"class":54,"line":55},[52,39190,59],{"class":58},[52,39192,63],{"class":62},[52,39194,77],{"class":58},[52,39196,39197,39199,39201],{"class":54,"line":80},[52,39198,83],{"class":58},[52,39200,39167],{"class":62},[52,39202,77],{"class":58},[52,39204,39205,39207,39209],{"class":54,"line":108},[52,39206,2213],{"class":58},[52,39208,2216],{"class":62},[52,39210,105],{"class":58},[52,39212,39213,39215,39217],{"class":54,"line":118},[52,39214,2230],{"class":58},[52,39216,39167],{"class":62},[52,39218,77],{"class":58},[52,39220,39221,39223,39225],{"class":54,"line":594},[52,39222,121],{"class":58},[52,39224,63],{"class":62},[52,39226,77],{"class":58},[43,39228,39229],{"className":360,"code":39184,"language":362,"meta":48,"style":48},[31,39230,39231,39239,39247,39255,39263],{"__ignoreMap":48},[52,39232,39233,39235,39237],{"class":54,"line":55},[52,39234,59],{"class":58},[52,39236,63],{"class":371},[52,39238,77],{"class":58},[52,39240,39241,39243,39245],{"class":54,"line":80},[52,39242,83],{"class":58},[52,39244,39167],{"class":371},[52,39246,77],{"class":58},[52,39248,39249,39251,39253],{"class":54,"line":108},[52,39250,2213],{"class":58},[52,39252,2216],{"class":371},[52,39254,105],{"class":58},[52,39256,39257,39259,39261],{"class":54,"line":118},[52,39258,2230],{"class":58},[52,39260,39167],{"class":371},[52,39262,77],{"class":58},[52,39264,39265,39267,39269],{"class":54,"line":594},[52,39266,121],{"class":58},[52,39268,63],{"class":371},[52,39270,77],{"class":58},[43,39272,39273],{"className":2507,"code":39184,"language":2509,"meta":48,"style":48},[31,39274,39275,39283,39291,39299,39307],{"__ignoreMap":48},[52,39276,39277,39279,39281],{"class":54,"line":55},[52,39278,59],{"class":58},[52,39280,63],{"class":371},[52,39282,77],{"class":58},[52,39284,39285,39287,39289],{"class":54,"line":80},[52,39286,83],{"class":58},[52,39288,39167],{"class":371},[52,39290,77],{"class":58},[52,39292,39293,39295,39297],{"class":54,"line":108},[52,39294,2213],{"class":58},[52,39296,2216],{"class":371},[52,39298,105],{"class":58},[52,39300,39301,39303,39305],{"class":54,"line":118},[52,39302,2230],{"class":58},[52,39304,39167],{"class":371},[52,39306,77],{"class":58},[52,39308,39309,39311,39313],{"class":54,"line":594},[52,39310,121],{"class":58},[52,39312,63],{"class":371},[52,39314,77],{"class":58},[43,39316,39317],{"className":419,"code":39184,"language":420,"meta":48,"style":48},[31,39318,39319,39327,39335,39343,39351],{"__ignoreMap":48},[52,39320,39321,39323,39325],{"class":54,"line":55},[52,39322,59],{"class":58},[52,39324,63],{"class":371},[52,39326,77],{"class":58},[52,39328,39329,39331,39333],{"class":54,"line":80},[52,39330,83],{"class":58},[52,39332,39167],{"class":371},[52,39334,77],{"class":58},[52,39336,39337,39339,39341],{"class":54,"line":108},[52,39338,2213],{"class":58},[52,39340,2216],{"class":371},[52,39342,105],{"class":58},[52,39344,39345,39347,39349],{"class":54,"line":118},[52,39346,2230],{"class":58},[52,39348,39167],{"class":371},[52,39350,77],{"class":58},[52,39352,39353,39355,39357],{"class":54,"line":594},[52,39354,121],{"class":58},[52,39356,63],{"class":371},[52,39358,77],{"class":58},[43,39360,39362],{"className":222,"code":39361,"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,39363,39364,39374,39378,39392,39396,39405,39413,39417,39421],{"__ignoreMap":48},[52,39365,39366,39368,39370,39372],{"class":54,"line":55},[52,39367,232],{"class":231},[52,39369,9005],{"class":58},[52,39371,238],{"class":231},[52,39373,9010],{"class":73},[52,39375,39376],{"class":54,"line":80},[52,39377,597],{"emptyLinePlaceholder":171},[52,39379,39380,39382,39384,39386,39388,39390],{"class":54,"line":108},[52,39381,1721],{"class":231},[52,39383,1724],{"class":371},[52,39385,1727],{"class":231},[52,39387,1730],{"class":231},[52,39389,1733],{"class":66},[52,39391,1736],{"class":58},[52,39393,39394],{"class":54,"line":118},[52,39395,1751],{"class":58},[52,39397,39398,39400,39403],{"class":54,"line":594},[52,39399,1756],{"class":58},[52,39401,39402],{"class":73},"'Group'",[52,39404,4496],{"class":58},[52,39406,39407,39409,39411],{"class":54,"line":600},[52,39408,4501],{"class":58},[52,39410,2869],{"class":73},[52,39412,2129],{"class":58},[52,39414,39415],{"class":54,"line":606},[52,39416,4518],{"class":58},[52,39418,39419],{"class":54,"line":653},[52,39420,1773],{"class":58},[52,39422,39423],{"class":54,"line":662},[52,39424,1778],{"class":58},[156,39426,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":39428},[39429],{"id":26687,"depth":80,"text":26688},"Utilities",{},"/docs/components/group",{"title":39167,"description":39175},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":39437,"title":39438,"body":39439,"category":27278,"componentType":20623,"description":39446,"extension":168,"meta":39707,"navigation":171,"path":39708,"requiresChild":171,"seo":39709,"stem":39710,"__hash__":39711},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":39440,"toc":39703},[39441,39444,39447,39449,39451,39454,39456,39701],[11,39442,39438],{"id":39443},"halftone",[15,39445,39446],{},"Halftone dot pattern effect for printing aesthetics",[26676,39448],{"component":39438},[23,39450,26680],{"id":21278},[26682,39452],{":props":39453},"[{\"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,39455,26688],{"id":26687},[217,39457,39458,39503,39547,39591,39635],{":tabs":1543},[43,39459,39461],{"className":45,"code":39460,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[31,39462,39463,39471,39479,39487,39495],{"__ignoreMap":48},[52,39464,39465,39467,39469],{"class":54,"line":55},[52,39466,59],{"class":58},[52,39468,63],{"class":62},[52,39470,77],{"class":58},[52,39472,39473,39475,39477],{"class":54,"line":80},[52,39474,83],{"class":58},[52,39476,39438],{"class":62},[52,39478,77],{"class":58},[52,39480,39481,39483,39485],{"class":54,"line":108},[52,39482,2213],{"class":58},[52,39484,2216],{"class":62},[52,39486,105],{"class":58},[52,39488,39489,39491,39493],{"class":54,"line":118},[52,39490,2230],{"class":58},[52,39492,39438],{"class":62},[52,39494,77],{"class":58},[52,39496,39497,39499,39501],{"class":54,"line":594},[52,39498,121],{"class":58},[52,39500,63],{"class":62},[52,39502,77],{"class":58},[43,39504,39505],{"className":360,"code":39460,"language":362,"meta":48,"style":48},[31,39506,39507,39515,39523,39531,39539],{"__ignoreMap":48},[52,39508,39509,39511,39513],{"class":54,"line":55},[52,39510,59],{"class":58},[52,39512,63],{"class":371},[52,39514,77],{"class":58},[52,39516,39517,39519,39521],{"class":54,"line":80},[52,39518,83],{"class":58},[52,39520,39438],{"class":371},[52,39522,77],{"class":58},[52,39524,39525,39527,39529],{"class":54,"line":108},[52,39526,2213],{"class":58},[52,39528,2216],{"class":371},[52,39530,105],{"class":58},[52,39532,39533,39535,39537],{"class":54,"line":118},[52,39534,2230],{"class":58},[52,39536,39438],{"class":371},[52,39538,77],{"class":58},[52,39540,39541,39543,39545],{"class":54,"line":594},[52,39542,121],{"class":58},[52,39544,63],{"class":371},[52,39546,77],{"class":58},[43,39548,39549],{"className":2507,"code":39460,"language":2509,"meta":48,"style":48},[31,39550,39551,39559,39567,39575,39583],{"__ignoreMap":48},[52,39552,39553,39555,39557],{"class":54,"line":55},[52,39554,59],{"class":58},[52,39556,63],{"class":371},[52,39558,77],{"class":58},[52,39560,39561,39563,39565],{"class":54,"line":80},[52,39562,83],{"class":58},[52,39564,39438],{"class":371},[52,39566,77],{"class":58},[52,39568,39569,39571,39573],{"class":54,"line":108},[52,39570,2213],{"class":58},[52,39572,2216],{"class":371},[52,39574,105],{"class":58},[52,39576,39577,39579,39581],{"class":54,"line":118},[52,39578,2230],{"class":58},[52,39580,39438],{"class":371},[52,39582,77],{"class":58},[52,39584,39585,39587,39589],{"class":54,"line":594},[52,39586,121],{"class":58},[52,39588,63],{"class":371},[52,39590,77],{"class":58},[43,39592,39593],{"className":419,"code":39460,"language":420,"meta":48,"style":48},[31,39594,39595,39603,39611,39619,39627],{"__ignoreMap":48},[52,39596,39597,39599,39601],{"class":54,"line":55},[52,39598,59],{"class":58},[52,39600,63],{"class":371},[52,39602,77],{"class":58},[52,39604,39605,39607,39609],{"class":54,"line":80},[52,39606,83],{"class":58},[52,39608,39438],{"class":371},[52,39610,77],{"class":58},[52,39612,39613,39615,39617],{"class":54,"line":108},[52,39614,2213],{"class":58},[52,39616,2216],{"class":371},[52,39618,105],{"class":58},[52,39620,39621,39623,39625],{"class":54,"line":118},[52,39622,2230],{"class":58},[52,39624,39438],{"class":371},[52,39626,77],{"class":58},[52,39628,39629,39631,39633],{"class":54,"line":594},[52,39630,121],{"class":58},[52,39632,63],{"class":371},[52,39634,77],{"class":58},[43,39636,39638],{"className":222,"code":39637,"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,39639,39640,39650,39654,39668,39672,39681,39689,39693,39697],{"__ignoreMap":48},[52,39641,39642,39644,39646,39648],{"class":54,"line":55},[52,39643,232],{"class":231},[52,39645,9005],{"class":58},[52,39647,238],{"class":231},[52,39649,9010],{"class":73},[52,39651,39652],{"class":54,"line":80},[52,39653,597],{"emptyLinePlaceholder":171},[52,39655,39656,39658,39660,39662,39664,39666],{"class":54,"line":108},[52,39657,1721],{"class":231},[52,39659,1724],{"class":371},[52,39661,1727],{"class":231},[52,39663,1730],{"class":231},[52,39665,1733],{"class":66},[52,39667,1736],{"class":58},[52,39669,39670],{"class":54,"line":118},[52,39671,1751],{"class":58},[52,39673,39674,39676,39679],{"class":54,"line":594},[52,39675,1756],{"class":58},[52,39677,39678],{"class":73},"'Halftone'",[52,39680,4496],{"class":58},[52,39682,39683,39685,39687],{"class":54,"line":600},[52,39684,4501],{"class":58},[52,39686,2869],{"class":73},[52,39688,2129],{"class":58},[52,39690,39691],{"class":54,"line":606},[52,39692,4518],{"class":58},[52,39694,39695],{"class":54,"line":653},[52,39696,1773],{"class":58},[52,39698,39699],{"class":54,"line":662},[52,39700,1778],{"class":58},[156,39702,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":39704},[39705,39706],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/halftone",{"title":39438,"description":39446},"docs/components/Halftone","FE9bbvMNDaNzrmALJi6cgBqUj0aRisbj-Tjo1odmRlE",{"id":39713,"title":39714,"body":39715,"category":27535,"componentType":20617,"description":39722,"extension":168,"meta":39907,"navigation":171,"path":39908,"requiresChild":27538,"seo":39909,"stem":39910,"__hash__":39911},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":39716,"toc":39903},[39717,39720,39723,39725,39727,39730,39732,39901],[11,39718,39714],{"id":39719},"hexgrid",[15,39721,39722],{},"Honeycomb hexagonal grid pattern",[26676,39724],{"component":39714},[23,39726,26680],{"id":21278},[26682,39728],{":props":39729},"[{\"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,39731,26688],{"id":26687},[217,39733,39734,39763,39791,39819,39847],{":tabs":1543},[43,39735,39737],{"className":45,"code":39736,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,39738,39739,39747,39755],{"__ignoreMap":48},[52,39740,39741,39743,39745],{"class":54,"line":55},[52,39742,59],{"class":58},[52,39744,63],{"class":62},[52,39746,77],{"class":58},[52,39748,39749,39751,39753],{"class":54,"line":80},[52,39750,83],{"class":58},[52,39752,39714],{"class":62},[52,39754,105],{"class":58},[52,39756,39757,39759,39761],{"class":54,"line":108},[52,39758,121],{"class":58},[52,39760,63],{"class":62},[52,39762,77],{"class":58},[43,39764,39765],{"className":360,"code":39736,"language":362,"meta":48,"style":48},[31,39766,39767,39775,39783],{"__ignoreMap":48},[52,39768,39769,39771,39773],{"class":54,"line":55},[52,39770,59],{"class":58},[52,39772,63],{"class":371},[52,39774,77],{"class":58},[52,39776,39777,39779,39781],{"class":54,"line":80},[52,39778,83],{"class":58},[52,39780,39714],{"class":371},[52,39782,105],{"class":58},[52,39784,39785,39787,39789],{"class":54,"line":108},[52,39786,121],{"class":58},[52,39788,63],{"class":371},[52,39790,77],{"class":58},[43,39792,39793],{"className":2507,"code":39736,"language":2509,"meta":48,"style":48},[31,39794,39795,39803,39811],{"__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,39714],{"class":371},[52,39810,105],{"class":58},[52,39812,39813,39815,39817],{"class":54,"line":108},[52,39814,121],{"class":58},[52,39816,63],{"class":371},[52,39818,77],{"class":58},[43,39820,39821],{"className":419,"code":39736,"language":420,"meta":48,"style":48},[31,39822,39823,39831,39839],{"__ignoreMap":48},[52,39824,39825,39827,39829],{"class":54,"line":55},[52,39826,59],{"class":58},[52,39828,63],{"class":371},[52,39830,77],{"class":58},[52,39832,39833,39835,39837],{"class":54,"line":80},[52,39834,83],{"class":58},[52,39836,39714],{"class":371},[52,39838,105],{"class":58},[52,39840,39841,39843,39845],{"class":54,"line":108},[52,39842,121],{"class":58},[52,39844,63],{"class":371},[52,39846,77],{"class":58},[43,39848,39850],{"className":222,"code":39849,"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,39851,39852,39862,39866,39880,39884,39893,39897],{"__ignoreMap":48},[52,39853,39854,39856,39858,39860],{"class":54,"line":55},[52,39855,232],{"class":231},[52,39857,9005],{"class":58},[52,39859,238],{"class":231},[52,39861,9010],{"class":73},[52,39863,39864],{"class":54,"line":80},[52,39865,597],{"emptyLinePlaceholder":171},[52,39867,39868,39870,39872,39874,39876,39878],{"class":54,"line":108},[52,39869,1721],{"class":231},[52,39871,1724],{"class":371},[52,39873,1727],{"class":231},[52,39875,1730],{"class":231},[52,39877,1733],{"class":66},[52,39879,1736],{"class":58},[52,39881,39882],{"class":54,"line":118},[52,39883,1751],{"class":58},[52,39885,39886,39888,39891],{"class":54,"line":594},[52,39887,1756],{"class":58},[52,39889,39890],{"class":73},"'HexGrid'",[52,39892,2129],{"class":58},[52,39894,39895],{"class":54,"line":600},[52,39896,1773],{"class":58},[52,39898,39899],{"class":54,"line":606},[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/hexgrid",{"title":39714,"description":39722},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":39913,"title":39914,"body":39915,"category":28546,"componentType":20623,"description":39922,"extension":168,"meta":40183,"navigation":171,"path":40184,"requiresChild":171,"seo":40185,"stem":40186,"__hash__":40187},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":39916,"toc":40179},[39917,39920,39923,39925,39927,39930,39932,40177],[11,39918,39914],{"id":39919},"hueshift",[15,39921,39922],{},"Rotate hue around the color wheel",[26676,39924],{"component":39914},[23,39926,26680],{"id":21278},[26682,39928],{":props":39929},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,39931,26688],{"id":26687},[217,39933,39934,39979,40023,40067,40111],{":tabs":1543},[43,39935,39937],{"className":45,"code":39936,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,39938,39939,39947,39955,39963,39971],{"__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,77],{"class":58},[52,39956,39957,39959,39961],{"class":54,"line":108},[52,39958,2213],{"class":58},[52,39960,2216],{"class":62},[52,39962,105],{"class":58},[52,39964,39965,39967,39969],{"class":54,"line":118},[52,39966,2230],{"class":58},[52,39968,39914],{"class":62},[52,39970,77],{"class":58},[52,39972,39973,39975,39977],{"class":54,"line":594},[52,39974,121],{"class":58},[52,39976,63],{"class":62},[52,39978,77],{"class":58},[43,39980,39981],{"className":360,"code":39936,"language":362,"meta":48,"style":48},[31,39982,39983,39991,39999,40007,40015],{"__ignoreMap":48},[52,39984,39985,39987,39989],{"class":54,"line":55},[52,39986,59],{"class":58},[52,39988,63],{"class":371},[52,39990,77],{"class":58},[52,39992,39993,39995,39997],{"class":54,"line":80},[52,39994,83],{"class":58},[52,39996,39914],{"class":371},[52,39998,77],{"class":58},[52,40000,40001,40003,40005],{"class":54,"line":108},[52,40002,2213],{"class":58},[52,40004,2216],{"class":371},[52,40006,105],{"class":58},[52,40008,40009,40011,40013],{"class":54,"line":118},[52,40010,2230],{"class":58},[52,40012,39914],{"class":371},[52,40014,77],{"class":58},[52,40016,40017,40019,40021],{"class":54,"line":594},[52,40018,121],{"class":58},[52,40020,63],{"class":371},[52,40022,77],{"class":58},[43,40024,40025],{"className":2507,"code":39936,"language":2509,"meta":48,"style":48},[31,40026,40027,40035,40043,40051,40059],{"__ignoreMap":48},[52,40028,40029,40031,40033],{"class":54,"line":55},[52,40030,59],{"class":58},[52,40032,63],{"class":371},[52,40034,77],{"class":58},[52,40036,40037,40039,40041],{"class":54,"line":80},[52,40038,83],{"class":58},[52,40040,39914],{"class":371},[52,40042,77],{"class":58},[52,40044,40045,40047,40049],{"class":54,"line":108},[52,40046,2213],{"class":58},[52,40048,2216],{"class":371},[52,40050,105],{"class":58},[52,40052,40053,40055,40057],{"class":54,"line":118},[52,40054,2230],{"class":58},[52,40056,39914],{"class":371},[52,40058,77],{"class":58},[52,40060,40061,40063,40065],{"class":54,"line":594},[52,40062,121],{"class":58},[52,40064,63],{"class":371},[52,40066,77],{"class":58},[43,40068,40069],{"className":419,"code":39936,"language":420,"meta":48,"style":48},[31,40070,40071,40079,40087,40095,40103],{"__ignoreMap":48},[52,40072,40073,40075,40077],{"class":54,"line":55},[52,40074,59],{"class":58},[52,40076,63],{"class":371},[52,40078,77],{"class":58},[52,40080,40081,40083,40085],{"class":54,"line":80},[52,40082,83],{"class":58},[52,40084,39914],{"class":371},[52,40086,77],{"class":58},[52,40088,40089,40091,40093],{"class":54,"line":108},[52,40090,2213],{"class":58},[52,40092,2216],{"class":371},[52,40094,105],{"class":58},[52,40096,40097,40099,40101],{"class":54,"line":118},[52,40098,2230],{"class":58},[52,40100,39914],{"class":371},[52,40102,77],{"class":58},[52,40104,40105,40107,40109],{"class":54,"line":594},[52,40106,121],{"class":58},[52,40108,63],{"class":371},[52,40110,77],{"class":58},[43,40112,40114],{"className":222,"code":40113,"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,40115,40116,40126,40130,40144,40148,40157,40165,40169,40173],{"__ignoreMap":48},[52,40117,40118,40120,40122,40124],{"class":54,"line":55},[52,40119,232],{"class":231},[52,40121,9005],{"class":58},[52,40123,238],{"class":231},[52,40125,9010],{"class":73},[52,40127,40128],{"class":54,"line":80},[52,40129,597],{"emptyLinePlaceholder":171},[52,40131,40132,40134,40136,40138,40140,40142],{"class":54,"line":108},[52,40133,1721],{"class":231},[52,40135,1724],{"class":371},[52,40137,1727],{"class":231},[52,40139,1730],{"class":231},[52,40141,1733],{"class":66},[52,40143,1736],{"class":58},[52,40145,40146],{"class":54,"line":118},[52,40147,1751],{"class":58},[52,40149,40150,40152,40155],{"class":54,"line":594},[52,40151,1756],{"class":58},[52,40153,40154],{"class":73},"'HueShift'",[52,40156,4496],{"class":58},[52,40158,40159,40161,40163],{"class":54,"line":600},[52,40160,4501],{"class":58},[52,40162,2869],{"class":73},[52,40164,2129],{"class":58},[52,40166,40167],{"class":54,"line":606},[52,40168,4518],{"class":58},[52,40170,40171],{"class":54,"line":653},[52,40172,1773],{"class":58},[52,40174,40175],{"class":54,"line":662},[52,40176,1778],{"class":58},[156,40178,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40180},[40181,40182],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/hueshift",{"title":39914,"description":39922},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":40189,"title":40190,"body":40191,"category":27535,"componentType":20617,"description":40198,"extension":168,"meta":40383,"navigation":171,"path":40384,"requiresChild":27538,"seo":40385,"stem":40386,"__hash__":40387},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":40192,"toc":40379},[40193,40196,40199,40201,40203,40206,40208,40377],[11,40194,40190],{"id":40195},"imagetexture",[15,40197,40198],{},"Display an image with customizable object-fit modes",[26676,40200],{"component":40190},[23,40202,26680],{"id":21278},[26682,40204],{":props":40205},"[{\"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,40207,26688],{"id":26687},[217,40209,40210,40239,40267,40295,40323],{":tabs":1543},[43,40211,40213],{"className":45,"code":40212,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,40214,40215,40223,40231],{"__ignoreMap":48},[52,40216,40217,40219,40221],{"class":54,"line":55},[52,40218,59],{"class":58},[52,40220,63],{"class":62},[52,40222,77],{"class":58},[52,40224,40225,40227,40229],{"class":54,"line":80},[52,40226,83],{"class":58},[52,40228,40190],{"class":62},[52,40230,105],{"class":58},[52,40232,40233,40235,40237],{"class":54,"line":108},[52,40234,121],{"class":58},[52,40236,63],{"class":62},[52,40238,77],{"class":58},[43,40240,40241],{"className":360,"code":40212,"language":362,"meta":48,"style":48},[31,40242,40243,40251,40259],{"__ignoreMap":48},[52,40244,40245,40247,40249],{"class":54,"line":55},[52,40246,59],{"class":58},[52,40248,63],{"class":371},[52,40250,77],{"class":58},[52,40252,40253,40255,40257],{"class":54,"line":80},[52,40254,83],{"class":58},[52,40256,40190],{"class":371},[52,40258,105],{"class":58},[52,40260,40261,40263,40265],{"class":54,"line":108},[52,40262,121],{"class":58},[52,40264,63],{"class":371},[52,40266,77],{"class":58},[43,40268,40269],{"className":2507,"code":40212,"language":2509,"meta":48,"style":48},[31,40270,40271,40279,40287],{"__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,40190],{"class":371},[52,40286,105],{"class":58},[52,40288,40289,40291,40293],{"class":54,"line":108},[52,40290,121],{"class":58},[52,40292,63],{"class":371},[52,40294,77],{"class":58},[43,40296,40297],{"className":419,"code":40212,"language":420,"meta":48,"style":48},[31,40298,40299,40307,40315],{"__ignoreMap":48},[52,40300,40301,40303,40305],{"class":54,"line":55},[52,40302,59],{"class":58},[52,40304,63],{"class":371},[52,40306,77],{"class":58},[52,40308,40309,40311,40313],{"class":54,"line":80},[52,40310,83],{"class":58},[52,40312,40190],{"class":371},[52,40314,105],{"class":58},[52,40316,40317,40319,40321],{"class":54,"line":108},[52,40318,121],{"class":58},[52,40320,63],{"class":371},[52,40322,77],{"class":58},[43,40324,40326],{"className":222,"code":40325,"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,40327,40328,40338,40342,40356,40360,40369,40373],{"__ignoreMap":48},[52,40329,40330,40332,40334,40336],{"class":54,"line":55},[52,40331,232],{"class":231},[52,40333,9005],{"class":58},[52,40335,238],{"class":231},[52,40337,9010],{"class":73},[52,40339,40340],{"class":54,"line":80},[52,40341,597],{"emptyLinePlaceholder":171},[52,40343,40344,40346,40348,40350,40352,40354],{"class":54,"line":108},[52,40345,1721],{"class":231},[52,40347,1724],{"class":371},[52,40349,1727],{"class":231},[52,40351,1730],{"class":231},[52,40353,1733],{"class":66},[52,40355,1736],{"class":58},[52,40357,40358],{"class":54,"line":118},[52,40359,1751],{"class":58},[52,40361,40362,40364,40367],{"class":54,"line":594},[52,40363,1756],{"class":58},[52,40365,40366],{"class":73},"'ImageTexture'",[52,40368,2129],{"class":58},[52,40370,40371],{"class":54,"line":600},[52,40372,1773],{"class":58},[52,40374,40375],{"class":54,"line":606},[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/imagetexture",{"title":40190,"description":40198},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":40389,"title":40390,"body":40391,"category":28546,"componentType":20623,"description":40398,"extension":168,"meta":40653,"navigation":171,"path":40654,"requiresChild":171,"seo":40655,"stem":40656,"__hash__":40657},"components/docs/components/Invert.md","Invert",{"type":8,"value":40392,"toc":40650},[40393,40396,40399,40401,40403,40648],[11,40394,40390],{"id":40395},"invert",[15,40397,40398],{},"Invert RGB colors while preserving alpha",[26676,40400],{"component":40390},[23,40402,26688],{"id":26687},[217,40404,40405,40450,40494,40538,40582],{":tabs":1543},[43,40406,40408],{"className":45,"code":40407,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,40409,40410,40418,40426,40434,40442],{"__ignoreMap":48},[52,40411,40412,40414,40416],{"class":54,"line":55},[52,40413,59],{"class":58},[52,40415,63],{"class":62},[52,40417,77],{"class":58},[52,40419,40420,40422,40424],{"class":54,"line":80},[52,40421,83],{"class":58},[52,40423,40390],{"class":62},[52,40425,77],{"class":58},[52,40427,40428,40430,40432],{"class":54,"line":108},[52,40429,2213],{"class":58},[52,40431,2216],{"class":62},[52,40433,105],{"class":58},[52,40435,40436,40438,40440],{"class":54,"line":118},[52,40437,2230],{"class":58},[52,40439,40390],{"class":62},[52,40441,77],{"class":58},[52,40443,40444,40446,40448],{"class":54,"line":594},[52,40445,121],{"class":58},[52,40447,63],{"class":62},[52,40449,77],{"class":58},[43,40451,40452],{"className":360,"code":40407,"language":362,"meta":48,"style":48},[31,40453,40454,40462,40470,40478,40486],{"__ignoreMap":48},[52,40455,40456,40458,40460],{"class":54,"line":55},[52,40457,59],{"class":58},[52,40459,63],{"class":371},[52,40461,77],{"class":58},[52,40463,40464,40466,40468],{"class":54,"line":80},[52,40465,83],{"class":58},[52,40467,40390],{"class":371},[52,40469,77],{"class":58},[52,40471,40472,40474,40476],{"class":54,"line":108},[52,40473,2213],{"class":58},[52,40475,2216],{"class":371},[52,40477,105],{"class":58},[52,40479,40480,40482,40484],{"class":54,"line":118},[52,40481,2230],{"class":58},[52,40483,40390],{"class":371},[52,40485,77],{"class":58},[52,40487,40488,40490,40492],{"class":54,"line":594},[52,40489,121],{"class":58},[52,40491,63],{"class":371},[52,40493,77],{"class":58},[43,40495,40496],{"className":2507,"code":40407,"language":2509,"meta":48,"style":48},[31,40497,40498,40506,40514,40522,40530],{"__ignoreMap":48},[52,40499,40500,40502,40504],{"class":54,"line":55},[52,40501,59],{"class":58},[52,40503,63],{"class":371},[52,40505,77],{"class":58},[52,40507,40508,40510,40512],{"class":54,"line":80},[52,40509,83],{"class":58},[52,40511,40390],{"class":371},[52,40513,77],{"class":58},[52,40515,40516,40518,40520],{"class":54,"line":108},[52,40517,2213],{"class":58},[52,40519,2216],{"class":371},[52,40521,105],{"class":58},[52,40523,40524,40526,40528],{"class":54,"line":118},[52,40525,2230],{"class":58},[52,40527,40390],{"class":371},[52,40529,77],{"class":58},[52,40531,40532,40534,40536],{"class":54,"line":594},[52,40533,121],{"class":58},[52,40535,63],{"class":371},[52,40537,77],{"class":58},[43,40539,40540],{"className":419,"code":40407,"language":420,"meta":48,"style":48},[31,40541,40542,40550,40558,40566,40574],{"__ignoreMap":48},[52,40543,40544,40546,40548],{"class":54,"line":55},[52,40545,59],{"class":58},[52,40547,63],{"class":371},[52,40549,77],{"class":58},[52,40551,40552,40554,40556],{"class":54,"line":80},[52,40553,83],{"class":58},[52,40555,40390],{"class":371},[52,40557,77],{"class":58},[52,40559,40560,40562,40564],{"class":54,"line":108},[52,40561,2213],{"class":58},[52,40563,2216],{"class":371},[52,40565,105],{"class":58},[52,40567,40568,40570,40572],{"class":54,"line":118},[52,40569,2230],{"class":58},[52,40571,40390],{"class":371},[52,40573,77],{"class":58},[52,40575,40576,40578,40580],{"class":54,"line":594},[52,40577,121],{"class":58},[52,40579,63],{"class":371},[52,40581,77],{"class":58},[43,40583,40585],{"className":222,"code":40584,"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,40586,40587,40597,40601,40615,40619,40628,40636,40640,40644],{"__ignoreMap":48},[52,40588,40589,40591,40593,40595],{"class":54,"line":55},[52,40590,232],{"class":231},[52,40592,9005],{"class":58},[52,40594,238],{"class":231},[52,40596,9010],{"class":73},[52,40598,40599],{"class":54,"line":80},[52,40600,597],{"emptyLinePlaceholder":171},[52,40602,40603,40605,40607,40609,40611,40613],{"class":54,"line":108},[52,40604,1721],{"class":231},[52,40606,1724],{"class":371},[52,40608,1727],{"class":231},[52,40610,1730],{"class":231},[52,40612,1733],{"class":66},[52,40614,1736],{"class":58},[52,40616,40617],{"class":54,"line":118},[52,40618,1751],{"class":58},[52,40620,40621,40623,40626],{"class":54,"line":594},[52,40622,1756],{"class":58},[52,40624,40625],{"class":73},"'Invert'",[52,40627,4496],{"class":58},[52,40629,40630,40632,40634],{"class":54,"line":600},[52,40631,4501],{"class":58},[52,40633,2869],{"class":73},[52,40635,2129],{"class":58},[52,40637,40638],{"class":54,"line":606},[52,40639,4518],{"class":58},[52,40641,40642],{"class":54,"line":653},[52,40643,1773],{"class":58},[52,40645,40646],{"class":54,"line":662},[52,40647,1778],{"class":58},[156,40649,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40651},[40652],{"id":26687,"depth":80,"text":26688},{},"/docs/components/invert",{"title":40390,"description":40398},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":40659,"title":40660,"body":40661,"category":28880,"componentType":20623,"description":40668,"extension":168,"meta":40929,"navigation":171,"path":40930,"requiresChild":171,"seo":40931,"stem":40932,"__hash__":40933},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":40662,"toc":40925},[40663,40666,40669,40671,40673,40676,40678,40923],[11,40664,40660],{"id":40665},"kaleidoscope",[15,40667,40668],{},"Create a kaleidoscope effect with radial mirrored segments",[26676,40670],{"component":40660},[23,40672,26680],{"id":21278},[26682,40674],{":props":40675},"[{\"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,40677,26688],{"id":26687},[217,40679,40680,40725,40769,40813,40857],{":tabs":1543},[43,40681,40683],{"className":45,"code":40682,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,40684,40685,40693,40701,40709,40717],{"__ignoreMap":48},[52,40686,40687,40689,40691],{"class":54,"line":55},[52,40688,59],{"class":58},[52,40690,63],{"class":62},[52,40692,77],{"class":58},[52,40694,40695,40697,40699],{"class":54,"line":80},[52,40696,83],{"class":58},[52,40698,40660],{"class":62},[52,40700,77],{"class":58},[52,40702,40703,40705,40707],{"class":54,"line":108},[52,40704,2213],{"class":58},[52,40706,2216],{"class":62},[52,40708,105],{"class":58},[52,40710,40711,40713,40715],{"class":54,"line":118},[52,40712,2230],{"class":58},[52,40714,40660],{"class":62},[52,40716,77],{"class":58},[52,40718,40719,40721,40723],{"class":54,"line":594},[52,40720,121],{"class":58},[52,40722,63],{"class":62},[52,40724,77],{"class":58},[43,40726,40727],{"className":360,"code":40682,"language":362,"meta":48,"style":48},[31,40728,40729,40737,40745,40753,40761],{"__ignoreMap":48},[52,40730,40731,40733,40735],{"class":54,"line":55},[52,40732,59],{"class":58},[52,40734,63],{"class":371},[52,40736,77],{"class":58},[52,40738,40739,40741,40743],{"class":54,"line":80},[52,40740,83],{"class":58},[52,40742,40660],{"class":371},[52,40744,77],{"class":58},[52,40746,40747,40749,40751],{"class":54,"line":108},[52,40748,2213],{"class":58},[52,40750,2216],{"class":371},[52,40752,105],{"class":58},[52,40754,40755,40757,40759],{"class":54,"line":118},[52,40756,2230],{"class":58},[52,40758,40660],{"class":371},[52,40760,77],{"class":58},[52,40762,40763,40765,40767],{"class":54,"line":594},[52,40764,121],{"class":58},[52,40766,63],{"class":371},[52,40768,77],{"class":58},[43,40770,40771],{"className":2507,"code":40682,"language":2509,"meta":48,"style":48},[31,40772,40773,40781,40789,40797,40805],{"__ignoreMap":48},[52,40774,40775,40777,40779],{"class":54,"line":55},[52,40776,59],{"class":58},[52,40778,63],{"class":371},[52,40780,77],{"class":58},[52,40782,40783,40785,40787],{"class":54,"line":80},[52,40784,83],{"class":58},[52,40786,40660],{"class":371},[52,40788,77],{"class":58},[52,40790,40791,40793,40795],{"class":54,"line":108},[52,40792,2213],{"class":58},[52,40794,2216],{"class":371},[52,40796,105],{"class":58},[52,40798,40799,40801,40803],{"class":54,"line":118},[52,40800,2230],{"class":58},[52,40802,40660],{"class":371},[52,40804,77],{"class":58},[52,40806,40807,40809,40811],{"class":54,"line":594},[52,40808,121],{"class":58},[52,40810,63],{"class":371},[52,40812,77],{"class":58},[43,40814,40815],{"className":419,"code":40682,"language":420,"meta":48,"style":48},[31,40816,40817,40825,40833,40841,40849],{"__ignoreMap":48},[52,40818,40819,40821,40823],{"class":54,"line":55},[52,40820,59],{"class":58},[52,40822,63],{"class":371},[52,40824,77],{"class":58},[52,40826,40827,40829,40831],{"class":54,"line":80},[52,40828,83],{"class":58},[52,40830,40660],{"class":371},[52,40832,77],{"class":58},[52,40834,40835,40837,40839],{"class":54,"line":108},[52,40836,2213],{"class":58},[52,40838,2216],{"class":371},[52,40840,105],{"class":58},[52,40842,40843,40845,40847],{"class":54,"line":118},[52,40844,2230],{"class":58},[52,40846,40660],{"class":371},[52,40848,77],{"class":58},[52,40850,40851,40853,40855],{"class":54,"line":594},[52,40852,121],{"class":58},[52,40854,63],{"class":371},[52,40856,77],{"class":58},[43,40858,40860],{"className":222,"code":40859,"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,40861,40862,40872,40876,40890,40894,40903,40911,40915,40919],{"__ignoreMap":48},[52,40863,40864,40866,40868,40870],{"class":54,"line":55},[52,40865,232],{"class":231},[52,40867,9005],{"class":58},[52,40869,238],{"class":231},[52,40871,9010],{"class":73},[52,40873,40874],{"class":54,"line":80},[52,40875,597],{"emptyLinePlaceholder":171},[52,40877,40878,40880,40882,40884,40886,40888],{"class":54,"line":108},[52,40879,1721],{"class":231},[52,40881,1724],{"class":371},[52,40883,1727],{"class":231},[52,40885,1730],{"class":231},[52,40887,1733],{"class":66},[52,40889,1736],{"class":58},[52,40891,40892],{"class":54,"line":118},[52,40893,1751],{"class":58},[52,40895,40896,40898,40901],{"class":54,"line":594},[52,40897,1756],{"class":58},[52,40899,40900],{"class":73},"'Kaleidoscope'",[52,40902,4496],{"class":58},[52,40904,40905,40907,40909],{"class":54,"line":600},[52,40906,4501],{"class":58},[52,40908,2869],{"class":73},[52,40910,2129],{"class":58},[52,40912,40913],{"class":54,"line":606},[52,40914,4518],{"class":58},[52,40916,40917],{"class":54,"line":653},[52,40918,1773],{"class":58},[52,40920,40921],{"class":54,"line":662},[52,40922,1778],{"class":58},[156,40924,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":40926},[40927,40928],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/kaleidoscope",{"title":40660,"description":40668},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":40935,"title":40936,"body":40937,"category":27278,"componentType":20617,"description":40944,"extension":168,"meta":41184,"navigation":171,"path":41185,"requiresChild":27538,"seo":41186,"stem":41187,"__hash__":41188},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":40938,"toc":41180},[40939,40942,40945,40947,40949,40952,40954,41178],[11,40940,40936],{"id":40941},"lensflare",[15,40943,40944],{},"Realistic camera lens flare with artifacts.",[26676,40946],{"component":40936},[23,40948,26680],{"id":21278},[26682,40950],{":props":40951},"[{\"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,40953,26688],{"id":26687},[217,40955,40956,40995,41038,41078,41120],{":tabs":1543},[43,40957,40959],{"className":45,"code":40958,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,40960,40961,40969,40975,40983,40987],{"__ignoreMap":48},[52,40962,40963,40965,40967],{"class":54,"line":55},[52,40964,59],{"class":58},[52,40966,63],{"class":62},[52,40968,77],{"class":58},[52,40970,40971,40973],{"class":54,"line":80},[52,40972,83],{"class":58},[52,40974,17630],{"class":62},[52,40976,40977,40979,40981],{"class":54,"line":108},[52,40978,17644],{"class":66},[52,40980,70],{"class":58},[52,40982,32237],{"class":73},[52,40984,40985],{"class":54,"line":118},[52,40986,1224],{"class":58},[52,40988,40989,40991,40993],{"class":54,"line":594},[52,40990,121],{"class":58},[52,40992,63],{"class":62},[52,40994,77],{"class":58},[43,40996,40998],{"className":360,"code":40997,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,40999,41000,41008,41014,41026,41030],{"__ignoreMap":48},[52,41001,41002,41004,41006],{"class":54,"line":55},[52,41003,59],{"class":58},[52,41005,63],{"class":371},[52,41007,77],{"class":58},[52,41009,41010,41012],{"class":54,"line":80},[52,41011,83],{"class":58},[52,41013,17630],{"class":371},[52,41015,41016,41018,41020,41022,41024],{"class":54,"line":108},[52,41017,17755],{"class":66},[52,41019,70],{"class":231},[52,41021,723],{"class":58},[52,41023,5241],{"class":371},[52,41025,729],{"class":58},[52,41027,41028],{"class":54,"line":118},[52,41029,1224],{"class":58},[52,41031,41032,41034,41036],{"class":54,"line":594},[52,41033,121],{"class":58},[52,41035,63],{"class":371},[52,41037,77],{"class":58},[43,41039,41040],{"className":2507,"code":40997,"language":2509,"meta":48,"style":48},[31,41041,41042,41050,41056,41066,41070],{"__ignoreMap":48},[52,41043,41044,41046,41048],{"class":54,"line":55},[52,41045,59],{"class":58},[52,41047,63],{"class":371},[52,41049,77],{"class":58},[52,41051,41052,41054],{"class":54,"line":80},[52,41053,83],{"class":58},[52,41055,17630],{"class":371},[52,41057,41058,41060,41062,41064],{"class":54,"line":108},[52,41059,17755],{"class":66},[52,41061,24620],{"class":58},[52,41063,5241],{"class":371},[52,41065,729],{"class":58},[52,41067,41068],{"class":54,"line":118},[52,41069,1224],{"class":58},[52,41071,41072,41074,41076],{"class":54,"line":594},[52,41073,121],{"class":58},[52,41075,63],{"class":371},[52,41077,77],{"class":58},[43,41079,41080],{"className":419,"code":40997,"language":420,"meta":48,"style":48},[31,41081,41082,41090,41096,41108,41112],{"__ignoreMap":48},[52,41083,41084,41086,41088],{"class":54,"line":55},[52,41085,59],{"class":58},[52,41087,63],{"class":371},[52,41089,77],{"class":58},[52,41091,41092,41094],{"class":54,"line":80},[52,41093,83],{"class":58},[52,41095,17630],{"class":371},[52,41097,41098,41100,41102,41104,41106],{"class":54,"line":108},[52,41099,17755],{"class":66},[52,41101,70],{"class":231},[52,41103,723],{"class":58},[52,41105,5241],{"class":371},[52,41107,729],{"class":58},[52,41109,41110],{"class":54,"line":118},[52,41111,1224],{"class":58},[52,41113,41114,41116,41118],{"class":54,"line":594},[52,41115,121],{"class":58},[52,41117,63],{"class":371},[52,41119,77],{"class":58},[43,41121,41123],{"className":222,"code":41122,"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,41124,41125,41135,41139,41153,41157,41170,41174],{"__ignoreMap":48},[52,41126,41127,41129,41131,41133],{"class":54,"line":55},[52,41128,232],{"class":231},[52,41130,9005],{"class":58},[52,41132,238],{"class":231},[52,41134,9010],{"class":73},[52,41136,41137],{"class":54,"line":80},[52,41138,597],{"emptyLinePlaceholder":171},[52,41140,41141,41143,41145,41147,41149,41151],{"class":54,"line":108},[52,41142,1721],{"class":231},[52,41144,1724],{"class":371},[52,41146,1727],{"class":231},[52,41148,1730],{"class":231},[52,41150,1733],{"class":66},[52,41152,1736],{"class":58},[52,41154,41155],{"class":54,"line":118},[52,41156,1751],{"class":58},[52,41158,41159,41161,41164,41166,41168],{"class":54,"line":594},[52,41160,1756],{"class":58},[52,41162,41163],{"class":73},"'LensFlare'",[52,41165,26969],{"class":58},[52,41167,5241],{"class":371},[52,41169,1768],{"class":58},[52,41171,41172],{"class":54,"line":600},[52,41173,1773],{"class":58},[52,41175,41176],{"class":54,"line":606},[52,41177,1778],{"class":58},[156,41179,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41181},[41182,41183],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/lensflare",{"title":40936,"description":40944},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":41190,"title":41191,"body":41192,"category":27000,"componentType":20623,"description":41199,"extension":168,"meta":41516,"navigation":171,"path":41517,"requiresChild":171,"seo":41518,"stem":41519,"__hash__":41520},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":41193,"toc":41512},[41194,41197,41200,41202,41204,41207,41209,41510],[11,41195,41191],{"id":41196},"linearblur",[15,41198,41199],{},"Directional motion blur in a specific angle",[26676,41201],{"component":41191},[23,41203,26680],{"id":21278},[26682,41205],{":props":41206},"[{\"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,41208,26688],{"id":26687},[217,41210,41211,41267,41326,41382,41440],{":tabs":1543},[43,41212,41214],{"className":45,"code":41213,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41215,41216,41224,41231,41239,41243,41251,41259],{"__ignoreMap":48},[52,41217,41218,41220,41222],{"class":54,"line":55},[52,41219,59],{"class":58},[52,41221,63],{"class":62},[52,41223,77],{"class":58},[52,41225,41226,41228],{"class":54,"line":80},[52,41227,83],{"class":58},[52,41229,41230],{"class":62},"LinearBlur\n",[52,41232,41233,41235,41237],{"class":54,"line":108},[52,41234,17644],{"class":66},[52,41236,70],{"class":58},[52,41238,33063],{"class":73},[52,41240,41241],{"class":54,"line":118},[52,41242,26724],{"class":58},[52,41244,41245,41247,41249],{"class":54,"line":594},[52,41246,2213],{"class":58},[52,41248,2216],{"class":62},[52,41250,105],{"class":58},[52,41252,41253,41255,41257],{"class":54,"line":600},[52,41254,2230],{"class":58},[52,41256,41191],{"class":62},[52,41258,77],{"class":58},[52,41260,41261,41263,41265],{"class":54,"line":606},[52,41262,121],{"class":58},[52,41264,63],{"class":62},[52,41266,77],{"class":58},[43,41268,41270],{"className":360,"code":41269,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41271,41272,41280,41286,41298,41302,41310,41318],{"__ignoreMap":48},[52,41273,41274,41276,41278],{"class":54,"line":55},[52,41275,59],{"class":58},[52,41277,63],{"class":371},[52,41279,77],{"class":58},[52,41281,41282,41284],{"class":54,"line":80},[52,41283,83],{"class":58},[52,41285,41230],{"class":371},[52,41287,41288,41290,41292,41294,41296],{"class":54,"line":108},[52,41289,17755],{"class":66},[52,41291,70],{"class":231},[52,41293,723],{"class":58},[52,41295,12968],{"class":371},[52,41297,729],{"class":58},[52,41299,41300],{"class":54,"line":118},[52,41301,26724],{"class":58},[52,41303,41304,41306,41308],{"class":54,"line":594},[52,41305,2213],{"class":58},[52,41307,2216],{"class":371},[52,41309,105],{"class":58},[52,41311,41312,41314,41316],{"class":54,"line":600},[52,41313,2230],{"class":58},[52,41315,41191],{"class":371},[52,41317,77],{"class":58},[52,41319,41320,41322,41324],{"class":54,"line":606},[52,41321,121],{"class":58},[52,41323,63],{"class":371},[52,41325,77],{"class":58},[43,41327,41328],{"className":2507,"code":41269,"language":2509,"meta":48,"style":48},[31,41329,41330,41338,41344,41354,41358,41366,41374],{"__ignoreMap":48},[52,41331,41332,41334,41336],{"class":54,"line":55},[52,41333,59],{"class":58},[52,41335,63],{"class":371},[52,41337,77],{"class":58},[52,41339,41340,41342],{"class":54,"line":80},[52,41341,83],{"class":58},[52,41343,41230],{"class":371},[52,41345,41346,41348,41350,41352],{"class":54,"line":108},[52,41347,17755],{"class":66},[52,41349,24620],{"class":58},[52,41351,12968],{"class":371},[52,41353,729],{"class":58},[52,41355,41356],{"class":54,"line":118},[52,41357,26724],{"class":58},[52,41359,41360,41362,41364],{"class":54,"line":594},[52,41361,2213],{"class":58},[52,41363,2216],{"class":371},[52,41365,105],{"class":58},[52,41367,41368,41370,41372],{"class":54,"line":600},[52,41369,2230],{"class":58},[52,41371,41191],{"class":371},[52,41373,77],{"class":58},[52,41375,41376,41378,41380],{"class":54,"line":606},[52,41377,121],{"class":58},[52,41379,63],{"class":371},[52,41381,77],{"class":58},[43,41383,41384],{"className":419,"code":41269,"language":420,"meta":48,"style":48},[31,41385,41386,41394,41400,41412,41416,41424,41432],{"__ignoreMap":48},[52,41387,41388,41390,41392],{"class":54,"line":55},[52,41389,59],{"class":58},[52,41391,63],{"class":371},[52,41393,77],{"class":58},[52,41395,41396,41398],{"class":54,"line":80},[52,41397,83],{"class":58},[52,41399,41230],{"class":371},[52,41401,41402,41404,41406,41408,41410],{"class":54,"line":108},[52,41403,17755],{"class":66},[52,41405,70],{"class":231},[52,41407,723],{"class":58},[52,41409,12968],{"class":371},[52,41411,729],{"class":58},[52,41413,41414],{"class":54,"line":118},[52,41415,26724],{"class":58},[52,41417,41418,41420,41422],{"class":54,"line":594},[52,41419,2213],{"class":58},[52,41421,2216],{"class":371},[52,41423,105],{"class":58},[52,41425,41426,41428,41430],{"class":54,"line":600},[52,41427,2230],{"class":58},[52,41429,41191],{"class":371},[52,41431,77],{"class":58},[52,41433,41434,41436,41438],{"class":54,"line":606},[52,41435,121],{"class":58},[52,41437,63],{"class":371},[52,41439,77],{"class":58},[43,41441,41443],{"className":222,"code":41442,"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,41444,41445,41455,41459,41473,41477,41490,41498,41502,41506],{"__ignoreMap":48},[52,41446,41447,41449,41451,41453],{"class":54,"line":55},[52,41448,232],{"class":231},[52,41450,9005],{"class":58},[52,41452,238],{"class":231},[52,41454,9010],{"class":73},[52,41456,41457],{"class":54,"line":80},[52,41458,597],{"emptyLinePlaceholder":171},[52,41460,41461,41463,41465,41467,41469,41471],{"class":54,"line":108},[52,41462,1721],{"class":231},[52,41464,1724],{"class":371},[52,41466,1727],{"class":231},[52,41468,1730],{"class":231},[52,41470,1733],{"class":66},[52,41472,1736],{"class":58},[52,41474,41475],{"class":54,"line":118},[52,41476,1751],{"class":58},[52,41478,41479,41481,41484,41486,41488],{"class":54,"line":594},[52,41480,1756],{"class":58},[52,41482,41483],{"class":73},"'LinearBlur'",[52,41485,26969],{"class":58},[52,41487,12968],{"class":371},[52,41489,5033],{"class":58},[52,41491,41492,41494,41496],{"class":54,"line":600},[52,41493,4501],{"class":58},[52,41495,2869],{"class":73},[52,41497,2129],{"class":58},[52,41499,41500],{"class":54,"line":606},[52,41501,4518],{"class":58},[52,41503,41504],{"class":54,"line":653},[52,41505,1773],{"class":58},[52,41507,41508],{"class":54,"line":662},[52,41509,1778],{"class":58},[156,41511,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41513},[41514,41515],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/linearblur",{"title":41191,"description":41199},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":41522,"title":86,"body":41523,"category":27535,"componentType":20617,"description":41530,"extension":168,"meta":41714,"navigation":171,"path":41715,"requiresChild":27538,"seo":41716,"stem":41717,"__hash__":41718},"components/docs/components/LinearGradient.md",{"type":8,"value":41524,"toc":41710},[41525,41528,41531,41533,41535,41538,41540,41708],[11,41526,86],{"id":41527},"lineargradient",[15,41529,41530],{},"Create smooth linear color gradients",[26676,41532],{"component":86},[23,41534,26680],{"id":21278},[26682,41536],{":props":41537},"[{\"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,41539,26688],{"id":26687},[217,41541,41542,41571,41599,41627,41655],{":tabs":1543},[43,41543,41545],{"className":45,"code":41544,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,41546,41547,41555,41563],{"__ignoreMap":48},[52,41548,41549,41551,41553],{"class":54,"line":55},[52,41550,59],{"class":58},[52,41552,63],{"class":62},[52,41554,77],{"class":58},[52,41556,41557,41559,41561],{"class":54,"line":80},[52,41558,83],{"class":58},[52,41560,86],{"class":62},[52,41562,105],{"class":58},[52,41564,41565,41567,41569],{"class":54,"line":108},[52,41566,121],{"class":58},[52,41568,63],{"class":62},[52,41570,77],{"class":58},[43,41572,41573],{"className":360,"code":41544,"language":362,"meta":48,"style":48},[31,41574,41575,41583,41591],{"__ignoreMap":48},[52,41576,41577,41579,41581],{"class":54,"line":55},[52,41578,59],{"class":58},[52,41580,63],{"class":371},[52,41582,77],{"class":58},[52,41584,41585,41587,41589],{"class":54,"line":80},[52,41586,83],{"class":58},[52,41588,86],{"class":371},[52,41590,105],{"class":58},[52,41592,41593,41595,41597],{"class":54,"line":108},[52,41594,121],{"class":58},[52,41596,63],{"class":371},[52,41598,77],{"class":58},[43,41600,41601],{"className":2507,"code":41544,"language":2509,"meta":48,"style":48},[31,41602,41603,41611,41619],{"__ignoreMap":48},[52,41604,41605,41607,41609],{"class":54,"line":55},[52,41606,59],{"class":58},[52,41608,63],{"class":371},[52,41610,77],{"class":58},[52,41612,41613,41615,41617],{"class":54,"line":80},[52,41614,83],{"class":58},[52,41616,86],{"class":371},[52,41618,105],{"class":58},[52,41620,41621,41623,41625],{"class":54,"line":108},[52,41622,121],{"class":58},[52,41624,63],{"class":371},[52,41626,77],{"class":58},[43,41628,41629],{"className":419,"code":41544,"language":420,"meta":48,"style":48},[31,41630,41631,41639,41647],{"__ignoreMap":48},[52,41632,41633,41635,41637],{"class":54,"line":55},[52,41634,59],{"class":58},[52,41636,63],{"class":371},[52,41638,77],{"class":58},[52,41640,41641,41643,41645],{"class":54,"line":80},[52,41642,83],{"class":58},[52,41644,86],{"class":371},[52,41646,105],{"class":58},[52,41648,41649,41651,41653],{"class":54,"line":108},[52,41650,121],{"class":58},[52,41652,63],{"class":371},[52,41654,77],{"class":58},[43,41656,41658],{"className":222,"code":41657,"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,41659,41660,41670,41674,41688,41692,41700,41704],{"__ignoreMap":48},[52,41661,41662,41664,41666,41668],{"class":54,"line":55},[52,41663,232],{"class":231},[52,41665,9005],{"class":58},[52,41667,238],{"class":231},[52,41669,9010],{"class":73},[52,41671,41672],{"class":54,"line":80},[52,41673,597],{"emptyLinePlaceholder":171},[52,41675,41676,41678,41680,41682,41684,41686],{"class":54,"line":108},[52,41677,1721],{"class":231},[52,41679,1724],{"class":371},[52,41681,1727],{"class":231},[52,41683,1730],{"class":231},[52,41685,1733],{"class":66},[52,41687,1736],{"class":58},[52,41689,41690],{"class":54,"line":118},[52,41691,1751],{"class":58},[52,41693,41694,41696,41698],{"class":54,"line":594},[52,41695,1756],{"class":58},[52,41697,2126],{"class":73},[52,41699,2129],{"class":58},[52,41701,41702],{"class":54,"line":600},[52,41703,1773],{"class":58},[52,41705,41706],{"class":54,"line":606},[52,41707,1778],{"class":58},[156,41709,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":41711},[41712,41713],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/lineargradient",{"title":86,"description":41530},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":41720,"title":41721,"body":41722,"category":29936,"componentType":20623,"description":41729,"extension":168,"meta":42092,"navigation":171,"path":42093,"requiresChild":171,"seo":42094,"stem":42095,"__hash__":42096},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":41723,"toc":42088},[41724,41727,41730,41732,41734,41737,41739,42086],[11,41725,41721],{"id":41726},"liquify",[15,41728,41729],{},"Liquid-like interactive deformation effect",[26676,41731],{"component":41721},[23,41733,26680],{"id":21278},[26682,41735],{":props":41736},"[{\"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,41738,26688],{"id":26687},[217,41740,41741,41805,41876,41942,42012],{":tabs":1543},[43,41742,41744],{"className":45,"code":41743,"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,41745,41746,41754,41761,41769,41777,41781,41789,41797],{"__ignoreMap":48},[52,41747,41748,41750,41752],{"class":54,"line":55},[52,41749,59],{"class":58},[52,41751,63],{"class":62},[52,41753,77],{"class":58},[52,41755,41756,41758],{"class":54,"line":80},[52,41757,83],{"class":58},[52,41759,41760],{"class":62},"Liquify\n",[52,41762,41763,41765,41767],{"class":54,"line":108},[52,41764,17644],{"class":66},[52,41766,70],{"class":58},[52,41768,32228],{"class":73},[52,41770,41771,41773,41775],{"class":54,"line":118},[52,41772,14675],{"class":66},[52,41774,70],{"class":58},[52,41776,28602],{"class":73},[52,41778,41779],{"class":54,"line":594},[52,41780,26724],{"class":58},[52,41782,41783,41785,41787],{"class":54,"line":600},[52,41784,2213],{"class":58},[52,41786,2216],{"class":62},[52,41788,105],{"class":58},[52,41790,41791,41793,41795],{"class":54,"line":606},[52,41792,2230],{"class":58},[52,41794,41721],{"class":62},[52,41796,77],{"class":58},[52,41798,41799,41801,41803],{"class":54,"line":653},[52,41800,121],{"class":58},[52,41802,63],{"class":62},[52,41804,77],{"class":58},[43,41806,41808],{"className":360,"code":41807,"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,41809,41810,41818,41824,41836,41848,41852,41860,41868],{"__ignoreMap":48},[52,41811,41812,41814,41816],{"class":54,"line":55},[52,41813,59],{"class":58},[52,41815,63],{"class":371},[52,41817,77],{"class":58},[52,41819,41820,41822],{"class":54,"line":80},[52,41821,83],{"class":58},[52,41823,41760],{"class":371},[52,41825,41826,41828,41830,41832,41834],{"class":54,"line":108},[52,41827,17755],{"class":66},[52,41829,70],{"class":231},[52,41831,723],{"class":58},[52,41833,32295],{"class":371},[52,41835,729],{"class":58},[52,41837,41838,41840,41842,41844,41846],{"class":54,"line":118},[52,41839,7135],{"class":66},[52,41841,70],{"class":231},[52,41843,723],{"class":58},[52,41845,6165],{"class":371},[52,41847,729],{"class":58},[52,41849,41850],{"class":54,"line":594},[52,41851,26724],{"class":58},[52,41853,41854,41856,41858],{"class":54,"line":600},[52,41855,2213],{"class":58},[52,41857,2216],{"class":371},[52,41859,105],{"class":58},[52,41861,41862,41864,41866],{"class":54,"line":606},[52,41863,2230],{"class":58},[52,41865,41721],{"class":371},[52,41867,77],{"class":58},[52,41869,41870,41872,41874],{"class":54,"line":653},[52,41871,121],{"class":58},[52,41873,63],{"class":371},[52,41875,77],{"class":58},[43,41877,41878],{"className":2507,"code":41807,"language":2509,"meta":48,"style":48},[31,41879,41880,41888,41894,41904,41914,41918,41926,41934],{"__ignoreMap":48},[52,41881,41882,41884,41886],{"class":54,"line":55},[52,41883,59],{"class":58},[52,41885,63],{"class":371},[52,41887,77],{"class":58},[52,41889,41890,41892],{"class":54,"line":80},[52,41891,83],{"class":58},[52,41893,41760],{"class":371},[52,41895,41896,41898,41900,41902],{"class":54,"line":108},[52,41897,17755],{"class":66},[52,41899,24620],{"class":58},[52,41901,32295],{"class":371},[52,41903,729],{"class":58},[52,41905,41906,41908,41910,41912],{"class":54,"line":118},[52,41907,7135],{"class":66},[52,41909,24620],{"class":58},[52,41911,6165],{"class":371},[52,41913,729],{"class":58},[52,41915,41916],{"class":54,"line":594},[52,41917,26724],{"class":58},[52,41919,41920,41922,41924],{"class":54,"line":600},[52,41921,2213],{"class":58},[52,41923,2216],{"class":371},[52,41925,105],{"class":58},[52,41927,41928,41930,41932],{"class":54,"line":606},[52,41929,2230],{"class":58},[52,41931,41721],{"class":371},[52,41933,77],{"class":58},[52,41935,41936,41938,41940],{"class":54,"line":653},[52,41937,121],{"class":58},[52,41939,63],{"class":371},[52,41941,77],{"class":58},[43,41943,41944],{"className":419,"code":41807,"language":420,"meta":48,"style":48},[31,41945,41946,41954,41960,41972,41984,41988,41996,42004],{"__ignoreMap":48},[52,41947,41948,41950,41952],{"class":54,"line":55},[52,41949,59],{"class":58},[52,41951,63],{"class":371},[52,41953,77],{"class":58},[52,41955,41956,41958],{"class":54,"line":80},[52,41957,83],{"class":58},[52,41959,41760],{"class":371},[52,41961,41962,41964,41966,41968,41970],{"class":54,"line":108},[52,41963,17755],{"class":66},[52,41965,70],{"class":231},[52,41967,723],{"class":58},[52,41969,32295],{"class":371},[52,41971,729],{"class":58},[52,41973,41974,41976,41978,41980,41982],{"class":54,"line":118},[52,41975,7135],{"class":66},[52,41977,70],{"class":231},[52,41979,723],{"class":58},[52,41981,6165],{"class":371},[52,41983,729],{"class":58},[52,41985,41986],{"class":54,"line":594},[52,41987,26724],{"class":58},[52,41989,41990,41992,41994],{"class":54,"line":600},[52,41991,2213],{"class":58},[52,41993,2216],{"class":371},[52,41995,105],{"class":58},[52,41997,41998,42000,42002],{"class":54,"line":606},[52,41999,2230],{"class":58},[52,42001,41721],{"class":371},[52,42003,77],{"class":58},[52,42005,42006,42008,42010],{"class":54,"line":653},[52,42007,121],{"class":58},[52,42009,63],{"class":371},[52,42011,77],{"class":58},[43,42013,42015],{"className":222,"code":42014,"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,42016,42017,42027,42031,42045,42049,42066,42074,42078,42082],{"__ignoreMap":48},[52,42018,42019,42021,42023,42025],{"class":54,"line":55},[52,42020,232],{"class":231},[52,42022,9005],{"class":58},[52,42024,238],{"class":231},[52,42026,9010],{"class":73},[52,42028,42029],{"class":54,"line":80},[52,42030,597],{"emptyLinePlaceholder":171},[52,42032,42033,42035,42037,42039,42041,42043],{"class":54,"line":108},[52,42034,1721],{"class":231},[52,42036,1724],{"class":371},[52,42038,1727],{"class":231},[52,42040,1730],{"class":231},[52,42042,1733],{"class":66},[52,42044,1736],{"class":58},[52,42046,42047],{"class":54,"line":118},[52,42048,1751],{"class":58},[52,42050,42051,42053,42056,42058,42060,42062,42064],{"class":54,"line":594},[52,42052,1756],{"class":58},[52,42054,42055],{"class":73},"'Liquify'",[52,42057,26969],{"class":58},[52,42059,32295],{"class":371},[52,42061,4052],{"class":58},[52,42063,6165],{"class":371},[52,42065,5033],{"class":58},[52,42067,42068,42070,42072],{"class":54,"line":600},[52,42069,4501],{"class":58},[52,42071,2869],{"class":73},[52,42073,2129],{"class":58},[52,42075,42076],{"class":54,"line":606},[52,42077,4518],{"class":58},[52,42079,42080],{"class":54,"line":653},[52,42081,1773],{"class":58},[52,42083,42084],{"class":54,"line":662},[52,42085,1778],{"class":58},[156,42087,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42089},[42090,42091],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/liquify",{"title":41721,"description":41729},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":42098,"title":42099,"body":42100,"category":28880,"componentType":20623,"description":42106,"extension":168,"meta":42367,"navigation":171,"path":42368,"requiresChild":171,"seo":42369,"stem":42370,"__hash__":42371},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":42101,"toc":42363},[42102,42104,42107,42109,42111,42114,42116,42361],[11,42103,42099],{"id":13430},[15,42105,42106],{},"Mirror content across a line defined by center point and angle",[26676,42108],{"component":42099},[23,42110,26680],{"id":21278},[26682,42112],{":props":42113},"[{\"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,42115,26688],{"id":26687},[217,42117,42118,42163,42207,42251,42295],{":tabs":1543},[43,42119,42121],{"className":45,"code":42120,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,42122,42123,42131,42139,42147,42155],{"__ignoreMap":48},[52,42124,42125,42127,42129],{"class":54,"line":55},[52,42126,59],{"class":58},[52,42128,63],{"class":62},[52,42130,77],{"class":58},[52,42132,42133,42135,42137],{"class":54,"line":80},[52,42134,83],{"class":58},[52,42136,42099],{"class":62},[52,42138,77],{"class":58},[52,42140,42141,42143,42145],{"class":54,"line":108},[52,42142,2213],{"class":58},[52,42144,2216],{"class":62},[52,42146,105],{"class":58},[52,42148,42149,42151,42153],{"class":54,"line":118},[52,42150,2230],{"class":58},[52,42152,42099],{"class":62},[52,42154,77],{"class":58},[52,42156,42157,42159,42161],{"class":54,"line":594},[52,42158,121],{"class":58},[52,42160,63],{"class":62},[52,42162,77],{"class":58},[43,42164,42165],{"className":360,"code":42120,"language":362,"meta":48,"style":48},[31,42166,42167,42175,42183,42191,42199],{"__ignoreMap":48},[52,42168,42169,42171,42173],{"class":54,"line":55},[52,42170,59],{"class":58},[52,42172,63],{"class":371},[52,42174,77],{"class":58},[52,42176,42177,42179,42181],{"class":54,"line":80},[52,42178,83],{"class":58},[52,42180,42099],{"class":371},[52,42182,77],{"class":58},[52,42184,42185,42187,42189],{"class":54,"line":108},[52,42186,2213],{"class":58},[52,42188,2216],{"class":371},[52,42190,105],{"class":58},[52,42192,42193,42195,42197],{"class":54,"line":118},[52,42194,2230],{"class":58},[52,42196,42099],{"class":371},[52,42198,77],{"class":58},[52,42200,42201,42203,42205],{"class":54,"line":594},[52,42202,121],{"class":58},[52,42204,63],{"class":371},[52,42206,77],{"class":58},[43,42208,42209],{"className":2507,"code":42120,"language":2509,"meta":48,"style":48},[31,42210,42211,42219,42227,42235,42243],{"__ignoreMap":48},[52,42212,42213,42215,42217],{"class":54,"line":55},[52,42214,59],{"class":58},[52,42216,63],{"class":371},[52,42218,77],{"class":58},[52,42220,42221,42223,42225],{"class":54,"line":80},[52,42222,83],{"class":58},[52,42224,42099],{"class":371},[52,42226,77],{"class":58},[52,42228,42229,42231,42233],{"class":54,"line":108},[52,42230,2213],{"class":58},[52,42232,2216],{"class":371},[52,42234,105],{"class":58},[52,42236,42237,42239,42241],{"class":54,"line":118},[52,42238,2230],{"class":58},[52,42240,42099],{"class":371},[52,42242,77],{"class":58},[52,42244,42245,42247,42249],{"class":54,"line":594},[52,42246,121],{"class":58},[52,42248,63],{"class":371},[52,42250,77],{"class":58},[43,42252,42253],{"className":419,"code":42120,"language":420,"meta":48,"style":48},[31,42254,42255,42263,42271,42279,42287],{"__ignoreMap":48},[52,42256,42257,42259,42261],{"class":54,"line":55},[52,42258,59],{"class":58},[52,42260,63],{"class":371},[52,42262,77],{"class":58},[52,42264,42265,42267,42269],{"class":54,"line":80},[52,42266,83],{"class":58},[52,42268,42099],{"class":371},[52,42270,77],{"class":58},[52,42272,42273,42275,42277],{"class":54,"line":108},[52,42274,2213],{"class":58},[52,42276,2216],{"class":371},[52,42278,105],{"class":58},[52,42280,42281,42283,42285],{"class":54,"line":118},[52,42282,2230],{"class":58},[52,42284,42099],{"class":371},[52,42286,77],{"class":58},[52,42288,42289,42291,42293],{"class":54,"line":594},[52,42290,121],{"class":58},[52,42292,63],{"class":371},[52,42294,77],{"class":58},[43,42296,42298],{"className":222,"code":42297,"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,42299,42300,42310,42314,42328,42332,42341,42349,42353,42357],{"__ignoreMap":48},[52,42301,42302,42304,42306,42308],{"class":54,"line":55},[52,42303,232],{"class":231},[52,42305,9005],{"class":58},[52,42307,238],{"class":231},[52,42309,9010],{"class":73},[52,42311,42312],{"class":54,"line":80},[52,42313,597],{"emptyLinePlaceholder":171},[52,42315,42316,42318,42320,42322,42324,42326],{"class":54,"line":108},[52,42317,1721],{"class":231},[52,42319,1724],{"class":371},[52,42321,1727],{"class":231},[52,42323,1730],{"class":231},[52,42325,1733],{"class":66},[52,42327,1736],{"class":58},[52,42329,42330],{"class":54,"line":118},[52,42331,1751],{"class":58},[52,42333,42334,42336,42339],{"class":54,"line":594},[52,42335,1756],{"class":58},[52,42337,42338],{"class":73},"'Mirror'",[52,42340,4496],{"class":58},[52,42342,42343,42345,42347],{"class":54,"line":600},[52,42344,4501],{"class":58},[52,42346,2869],{"class":73},[52,42348,2129],{"class":58},[52,42350,42351],{"class":54,"line":606},[52,42352,4518],{"class":58},[52,42354,42355],{"class":54,"line":653},[52,42356,1773],{"class":58},[52,42358,42359],{"class":54,"line":662},[52,42360,1778],{"class":58},[156,42362,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":42364},[42365,42366],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/mirror",{"title":42099,"description":42106},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":42373,"title":42374,"body":42375,"category":27535,"componentType":20617,"description":42382,"extension":168,"meta":42567,"navigation":171,"path":42568,"requiresChild":27538,"seo":42569,"stem":42570,"__hash__":42571},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":42376,"toc":42563},[42377,42380,42383,42385,42387,42390,42392,42561],[11,42378,42374],{"id":42379},"multipointgradient",[15,42381,42382],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26676,42384],{"component":42374},[23,42386,26680],{"id":21278},[26682,42388],{":props":42389},"[{\"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,42391,26688],{"id":26687},[217,42393,42394,42423,42451,42479,42507],{":tabs":1543},[43,42395,42397],{"className":45,"code":42396,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,42398,42399,42407,42415],{"__ignoreMap":48},[52,42400,42401,42403,42405],{"class":54,"line":55},[52,42402,59],{"class":58},[52,42404,63],{"class":62},[52,42406,77],{"class":58},[52,42408,42409,42411,42413],{"class":54,"line":80},[52,42410,83],{"class":58},[52,42412,42374],{"class":62},[52,42414,105],{"class":58},[52,42416,42417,42419,42421],{"class":54,"line":108},[52,42418,121],{"class":58},[52,42420,63],{"class":62},[52,42422,77],{"class":58},[43,42424,42425],{"className":360,"code":42396,"language":362,"meta":48,"style":48},[31,42426,42427,42435,42443],{"__ignoreMap":48},[52,42428,42429,42431,42433],{"class":54,"line":55},[52,42430,59],{"class":58},[52,42432,63],{"class":371},[52,42434,77],{"class":58},[52,42436,42437,42439,42441],{"class":54,"line":80},[52,42438,83],{"class":58},[52,42440,42374],{"class":371},[52,42442,105],{"class":58},[52,42444,42445,42447,42449],{"class":54,"line":108},[52,42446,121],{"class":58},[52,42448,63],{"class":371},[52,42450,77],{"class":58},[43,42452,42453],{"className":2507,"code":42396,"language":2509,"meta":48,"style":48},[31,42454,42455,42463,42471],{"__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,42374],{"class":371},[52,42470,105],{"class":58},[52,42472,42473,42475,42477],{"class":54,"line":108},[52,42474,121],{"class":58},[52,42476,63],{"class":371},[52,42478,77],{"class":58},[43,42480,42481],{"className":419,"code":42396,"language":420,"meta":48,"style":48},[31,42482,42483,42491,42499],{"__ignoreMap":48},[52,42484,42485,42487,42489],{"class":54,"line":55},[52,42486,59],{"class":58},[52,42488,63],{"class":371},[52,42490,77],{"class":58},[52,42492,42493,42495,42497],{"class":54,"line":80},[52,42494,83],{"class":58},[52,42496,42374],{"class":371},[52,42498,105],{"class":58},[52,42500,42501,42503,42505],{"class":54,"line":108},[52,42502,121],{"class":58},[52,42504,63],{"class":371},[52,42506,77],{"class":58},[43,42508,42510],{"className":222,"code":42509,"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,42511,42512,42522,42526,42540,42544,42553,42557],{"__ignoreMap":48},[52,42513,42514,42516,42518,42520],{"class":54,"line":55},[52,42515,232],{"class":231},[52,42517,9005],{"class":58},[52,42519,238],{"class":231},[52,42521,9010],{"class":73},[52,42523,42524],{"class":54,"line":80},[52,42525,597],{"emptyLinePlaceholder":171},[52,42527,42528,42530,42532,42534,42536,42538],{"class":54,"line":108},[52,42529,1721],{"class":231},[52,42531,1724],{"class":371},[52,42533,1727],{"class":231},[52,42535,1730],{"class":231},[52,42537,1733],{"class":66},[52,42539,1736],{"class":58},[52,42541,42542],{"class":54,"line":118},[52,42543,1751],{"class":58},[52,42545,42546,42548,42551],{"class":54,"line":594},[52,42547,1756],{"class":58},[52,42549,42550],{"class":73},"'MultiPointGradient'",[52,42552,2129],{"class":58},[52,42554,42555],{"class":54,"line":600},[52,42556,1773],{"class":58},[52,42558,42559],{"class":54,"line":606},[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/multipointgradient",{"title":42374,"description":42382},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":42573,"title":18251,"body":42574,"category":32173,"componentType":20617,"description":42581,"extension":168,"meta":42860,"navigation":171,"path":42861,"requiresChild":27538,"seo":42862,"stem":42863,"__hash__":42864},"components/docs/components/Neon.md",{"type":8,"value":42575,"toc":42856},[42576,42579,42582,42584,42586,42589,42591,42854],[11,42577,18251],{"id":42578},"neon",[15,42580,42581],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26676,42583],{"component":18251},[23,42585,26680],{"id":21278},[26682,42587],{":props":42588},"[{\"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,42590,26688],{"id":26687},[217,42592,42593,42643,42694,42742,42792],{":tabs":1543},[43,42594,42596],{"className":45,"code":42595,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,42597,42598,42606,42613,42622,42631,42635],{"__ignoreMap":48},[52,42599,42600,42602,42604],{"class":54,"line":55},[52,42601,59],{"class":58},[52,42603,63],{"class":62},[52,42605,77],{"class":58},[52,42607,42608,42610],{"class":54,"line":80},[52,42609,83],{"class":58},[52,42611,42612],{"class":62},"Neon\n",[52,42614,42615,42617,42619],{"class":54,"line":108},[52,42616,7125],{"class":66},[52,42618,70],{"class":58},[52,42620,42621],{"class":73},"\"#00ddff\"\n",[52,42623,42624,42626,42628],{"class":54,"line":118},[52,42625,17644],{"class":66},[52,42627,70],{"class":58},[52,42629,42630],{"class":73},"\"1.5\"\n",[52,42632,42633],{"class":54,"line":594},[52,42634,1224],{"class":58},[52,42636,42637,42639,42641],{"class":54,"line":600},[52,42638,121],{"class":58},[52,42640,63],{"class":62},[52,42642,77],{"class":58},[43,42644,42646],{"className":360,"code":42645,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,42647,42648,42656,42662,42670,42682,42686],{"__ignoreMap":48},[52,42649,42650,42652,42654],{"class":54,"line":55},[52,42651,59],{"class":58},[52,42653,63],{"class":371},[52,42655,77],{"class":58},[52,42657,42658,42660],{"class":54,"line":80},[52,42659,83],{"class":58},[52,42661,42612],{"class":371},[52,42663,42664,42666,42668],{"class":54,"line":108},[52,42665,7125],{"class":66},[52,42667,70],{"class":231},[52,42669,42621],{"class":73},[52,42671,42672,42674,42676,42678,42680],{"class":54,"line":118},[52,42673,17755],{"class":66},[52,42675,70],{"class":231},[52,42677,723],{"class":58},[52,42679,12945],{"class":371},[52,42681,729],{"class":58},[52,42683,42684],{"class":54,"line":594},[52,42685,1224],{"class":58},[52,42687,42688,42690,42692],{"class":54,"line":600},[52,42689,121],{"class":58},[52,42691,63],{"class":371},[52,42693,77],{"class":58},[43,42695,42696],{"className":2507,"code":42645,"language":2509,"meta":48,"style":48},[31,42697,42698,42706,42712,42720,42730,42734],{"__ignoreMap":48},[52,42699,42700,42702,42704],{"class":54,"line":55},[52,42701,59],{"class":58},[52,42703,63],{"class":371},[52,42705,77],{"class":58},[52,42707,42708,42710],{"class":54,"line":80},[52,42709,83],{"class":58},[52,42711,42612],{"class":371},[52,42713,42714,42716,42718],{"class":54,"line":108},[52,42715,7125],{"class":66},[52,42717,70],{"class":58},[52,42719,42621],{"class":73},[52,42721,42722,42724,42726,42728],{"class":54,"line":118},[52,42723,17755],{"class":66},[52,42725,24620],{"class":58},[52,42727,12945],{"class":371},[52,42729,729],{"class":58},[52,42731,42732],{"class":54,"line":594},[52,42733,1224],{"class":58},[52,42735,42736,42738,42740],{"class":54,"line":600},[52,42737,121],{"class":58},[52,42739,63],{"class":371},[52,42741,77],{"class":58},[43,42743,42744],{"className":419,"code":42645,"language":420,"meta":48,"style":48},[31,42745,42746,42754,42760,42768,42780,42784],{"__ignoreMap":48},[52,42747,42748,42750,42752],{"class":54,"line":55},[52,42749,59],{"class":58},[52,42751,63],{"class":371},[52,42753,77],{"class":58},[52,42755,42756,42758],{"class":54,"line":80},[52,42757,83],{"class":58},[52,42759,42612],{"class":371},[52,42761,42762,42764,42766],{"class":54,"line":108},[52,42763,7125],{"class":66},[52,42765,70],{"class":231},[52,42767,42621],{"class":73},[52,42769,42770,42772,42774,42776,42778],{"class":54,"line":118},[52,42771,17755],{"class":66},[52,42773,70],{"class":231},[52,42775,723],{"class":58},[52,42777,12945],{"class":371},[52,42779,729],{"class":58},[52,42781,42782],{"class":54,"line":594},[52,42783,1224],{"class":58},[52,42785,42786,42788,42790],{"class":54,"line":600},[52,42787,121],{"class":58},[52,42789,63],{"class":371},[52,42791,77],{"class":58},[43,42793,42795],{"className":222,"code":42794,"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,42796,42797,42807,42811,42825,42829,42846,42850],{"__ignoreMap":48},[52,42798,42799,42801,42803,42805],{"class":54,"line":55},[52,42800,232],{"class":231},[52,42802,9005],{"class":58},[52,42804,238],{"class":231},[52,42806,9010],{"class":73},[52,42808,42809],{"class":54,"line":80},[52,42810,597],{"emptyLinePlaceholder":171},[52,42812,42813,42815,42817,42819,42821,42823],{"class":54,"line":108},[52,42814,1721],{"class":231},[52,42816,1724],{"class":371},[52,42818,1727],{"class":231},[52,42820,1730],{"class":231},[52,42822,1733],{"class":66},[52,42824,1736],{"class":58},[52,42826,42827],{"class":54,"line":118},[52,42828,1751],{"class":58},[52,42830,42831,42833,42835,42837,42840,42842,42844],{"class":54,"line":594},[52,42832,1756],{"class":58},[52,42834,18843],{"class":73},[52,42836,1762],{"class":58},[52,42838,42839],{"class":73},"'#00ddff'",[52,42841,34198],{"class":58},[52,42843,12945],{"class":371},[52,42845,1768],{"class":58},[52,42847,42848],{"class":54,"line":600},[52,42849,1773],{"class":58},[52,42851,42852],{"class":54,"line":606},[52,42853,1778],{"class":58},[156,42855,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42857},[42858,42859],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/neon",{"title":18251,"description":42581},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":42866,"title":42867,"body":42868,"category":27278,"componentType":20623,"description":42875,"extension":168,"meta":43136,"navigation":171,"path":43137,"requiresChild":171,"seo":43138,"stem":43139,"__hash__":43140},"components/docs/components/Paper.md","Paper",{"type":8,"value":42869,"toc":43132},[42870,42873,42876,42878,42880,42883,42885,43130],[11,42871,42867],{"id":42872},"paper",[15,42874,42875],{},"Applies realistic paper grain and surface roughness to child content",[26676,42877],{"component":42867},[23,42879,26680],{"id":21278},[26682,42881],{":props":42882},"[{\"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,42884,26688],{"id":26687},[217,42886,42887,42932,42976,43020,43064],{":tabs":1543},[43,42888,42890],{"className":45,"code":42889,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,42891,42892,42900,42908,42916,42924],{"__ignoreMap":48},[52,42893,42894,42896,42898],{"class":54,"line":55},[52,42895,59],{"class":58},[52,42897,63],{"class":62},[52,42899,77],{"class":58},[52,42901,42902,42904,42906],{"class":54,"line":80},[52,42903,83],{"class":58},[52,42905,42867],{"class":62},[52,42907,77],{"class":58},[52,42909,42910,42912,42914],{"class":54,"line":108},[52,42911,2213],{"class":58},[52,42913,2216],{"class":62},[52,42915,105],{"class":58},[52,42917,42918,42920,42922],{"class":54,"line":118},[52,42919,2230],{"class":58},[52,42921,42867],{"class":62},[52,42923,77],{"class":58},[52,42925,42926,42928,42930],{"class":54,"line":594},[52,42927,121],{"class":58},[52,42929,63],{"class":62},[52,42931,77],{"class":58},[43,42933,42934],{"className":360,"code":42889,"language":362,"meta":48,"style":48},[31,42935,42936,42944,42952,42960,42968],{"__ignoreMap":48},[52,42937,42938,42940,42942],{"class":54,"line":55},[52,42939,59],{"class":58},[52,42941,63],{"class":371},[52,42943,77],{"class":58},[52,42945,42946,42948,42950],{"class":54,"line":80},[52,42947,83],{"class":58},[52,42949,42867],{"class":371},[52,42951,77],{"class":58},[52,42953,42954,42956,42958],{"class":54,"line":108},[52,42955,2213],{"class":58},[52,42957,2216],{"class":371},[52,42959,105],{"class":58},[52,42961,42962,42964,42966],{"class":54,"line":118},[52,42963,2230],{"class":58},[52,42965,42867],{"class":371},[52,42967,77],{"class":58},[52,42969,42970,42972,42974],{"class":54,"line":594},[52,42971,121],{"class":58},[52,42973,63],{"class":371},[52,42975,77],{"class":58},[43,42977,42978],{"className":2507,"code":42889,"language":2509,"meta":48,"style":48},[31,42979,42980,42988,42996,43004,43012],{"__ignoreMap":48},[52,42981,42982,42984,42986],{"class":54,"line":55},[52,42983,59],{"class":58},[52,42985,63],{"class":371},[52,42987,77],{"class":58},[52,42989,42990,42992,42994],{"class":54,"line":80},[52,42991,83],{"class":58},[52,42993,42867],{"class":371},[52,42995,77],{"class":58},[52,42997,42998,43000,43002],{"class":54,"line":108},[52,42999,2213],{"class":58},[52,43001,2216],{"class":371},[52,43003,105],{"class":58},[52,43005,43006,43008,43010],{"class":54,"line":118},[52,43007,2230],{"class":58},[52,43009,42867],{"class":371},[52,43011,77],{"class":58},[52,43013,43014,43016,43018],{"class":54,"line":594},[52,43015,121],{"class":58},[52,43017,63],{"class":371},[52,43019,77],{"class":58},[43,43021,43022],{"className":419,"code":42889,"language":420,"meta":48,"style":48},[31,43023,43024,43032,43040,43048,43056],{"__ignoreMap":48},[52,43025,43026,43028,43030],{"class":54,"line":55},[52,43027,59],{"class":58},[52,43029,63],{"class":371},[52,43031,77],{"class":58},[52,43033,43034,43036,43038],{"class":54,"line":80},[52,43035,83],{"class":58},[52,43037,42867],{"class":371},[52,43039,77],{"class":58},[52,43041,43042,43044,43046],{"class":54,"line":108},[52,43043,2213],{"class":58},[52,43045,2216],{"class":371},[52,43047,105],{"class":58},[52,43049,43050,43052,43054],{"class":54,"line":118},[52,43051,2230],{"class":58},[52,43053,42867],{"class":371},[52,43055,77],{"class":58},[52,43057,43058,43060,43062],{"class":54,"line":594},[52,43059,121],{"class":58},[52,43061,63],{"class":371},[52,43063,77],{"class":58},[43,43065,43067],{"className":222,"code":43066,"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,43068,43069,43079,43083,43097,43101,43110,43118,43122,43126],{"__ignoreMap":48},[52,43070,43071,43073,43075,43077],{"class":54,"line":55},[52,43072,232],{"class":231},[52,43074,9005],{"class":58},[52,43076,238],{"class":231},[52,43078,9010],{"class":73},[52,43080,43081],{"class":54,"line":80},[52,43082,597],{"emptyLinePlaceholder":171},[52,43084,43085,43087,43089,43091,43093,43095],{"class":54,"line":108},[52,43086,1721],{"class":231},[52,43088,1724],{"class":371},[52,43090,1727],{"class":231},[52,43092,1730],{"class":231},[52,43094,1733],{"class":66},[52,43096,1736],{"class":58},[52,43098,43099],{"class":54,"line":118},[52,43100,1751],{"class":58},[52,43102,43103,43105,43108],{"class":54,"line":594},[52,43104,1756],{"class":58},[52,43106,43107],{"class":73},"'Paper'",[52,43109,4496],{"class":58},[52,43111,43112,43114,43116],{"class":54,"line":600},[52,43113,4501],{"class":58},[52,43115,2869],{"class":73},[52,43117,2129],{"class":58},[52,43119,43120],{"class":54,"line":606},[52,43121,4518],{"class":58},[52,43123,43124],{"class":54,"line":653},[52,43125,1773],{"class":58},[52,43127,43128],{"class":54,"line":662},[52,43129,1778],{"class":58},[156,43131,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":43133},[43134,43135],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/paper",{"title":42867,"description":42875},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":43142,"title":43143,"body":43144,"category":28880,"componentType":20623,"description":43151,"extension":168,"meta":43412,"navigation":171,"path":43413,"requiresChild":171,"seo":43414,"stem":43415,"__hash__":43416},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":43145,"toc":43408},[43146,43149,43152,43154,43156,43159,43161,43406],[11,43147,43143],{"id":43148},"perspective",[15,43150,43151],{},"Rotate the plane in 3D space with pan and tilt",[26676,43153],{"component":43143},[23,43155,26680],{"id":21278},[26682,43157],{":props":43158},"[{\"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,43160,26688],{"id":26687},[217,43162,43163,43208,43252,43296,43340],{":tabs":1543},[43,43164,43166],{"className":45,"code":43165,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[31,43167,43168,43176,43184,43192,43200],{"__ignoreMap":48},[52,43169,43170,43172,43174],{"class":54,"line":55},[52,43171,59],{"class":58},[52,43173,63],{"class":62},[52,43175,77],{"class":58},[52,43177,43178,43180,43182],{"class":54,"line":80},[52,43179,83],{"class":58},[52,43181,43143],{"class":62},[52,43183,77],{"class":58},[52,43185,43186,43188,43190],{"class":54,"line":108},[52,43187,2213],{"class":58},[52,43189,2216],{"class":62},[52,43191,105],{"class":58},[52,43193,43194,43196,43198],{"class":54,"line":118},[52,43195,2230],{"class":58},[52,43197,43143],{"class":62},[52,43199,77],{"class":58},[52,43201,43202,43204,43206],{"class":54,"line":594},[52,43203,121],{"class":58},[52,43205,63],{"class":62},[52,43207,77],{"class":58},[43,43209,43210],{"className":360,"code":43165,"language":362,"meta":48,"style":48},[31,43211,43212,43220,43228,43236,43244],{"__ignoreMap":48},[52,43213,43214,43216,43218],{"class":54,"line":55},[52,43215,59],{"class":58},[52,43217,63],{"class":371},[52,43219,77],{"class":58},[52,43221,43222,43224,43226],{"class":54,"line":80},[52,43223,83],{"class":58},[52,43225,43143],{"class":371},[52,43227,77],{"class":58},[52,43229,43230,43232,43234],{"class":54,"line":108},[52,43231,2213],{"class":58},[52,43233,2216],{"class":371},[52,43235,105],{"class":58},[52,43237,43238,43240,43242],{"class":54,"line":118},[52,43239,2230],{"class":58},[52,43241,43143],{"class":371},[52,43243,77],{"class":58},[52,43245,43246,43248,43250],{"class":54,"line":594},[52,43247,121],{"class":58},[52,43249,63],{"class":371},[52,43251,77],{"class":58},[43,43253,43254],{"className":2507,"code":43165,"language":2509,"meta":48,"style":48},[31,43255,43256,43264,43272,43280,43288],{"__ignoreMap":48},[52,43257,43258,43260,43262],{"class":54,"line":55},[52,43259,59],{"class":58},[52,43261,63],{"class":371},[52,43263,77],{"class":58},[52,43265,43266,43268,43270],{"class":54,"line":80},[52,43267,83],{"class":58},[52,43269,43143],{"class":371},[52,43271,77],{"class":58},[52,43273,43274,43276,43278],{"class":54,"line":108},[52,43275,2213],{"class":58},[52,43277,2216],{"class":371},[52,43279,105],{"class":58},[52,43281,43282,43284,43286],{"class":54,"line":118},[52,43283,2230],{"class":58},[52,43285,43143],{"class":371},[52,43287,77],{"class":58},[52,43289,43290,43292,43294],{"class":54,"line":594},[52,43291,121],{"class":58},[52,43293,63],{"class":371},[52,43295,77],{"class":58},[43,43297,43298],{"className":419,"code":43165,"language":420,"meta":48,"style":48},[31,43299,43300,43308,43316,43324,43332],{"__ignoreMap":48},[52,43301,43302,43304,43306],{"class":54,"line":55},[52,43303,59],{"class":58},[52,43305,63],{"class":371},[52,43307,77],{"class":58},[52,43309,43310,43312,43314],{"class":54,"line":80},[52,43311,83],{"class":58},[52,43313,43143],{"class":371},[52,43315,77],{"class":58},[52,43317,43318,43320,43322],{"class":54,"line":108},[52,43319,2213],{"class":58},[52,43321,2216],{"class":371},[52,43323,105],{"class":58},[52,43325,43326,43328,43330],{"class":54,"line":118},[52,43327,2230],{"class":58},[52,43329,43143],{"class":371},[52,43331,77],{"class":58},[52,43333,43334,43336,43338],{"class":54,"line":594},[52,43335,121],{"class":58},[52,43337,63],{"class":371},[52,43339,77],{"class":58},[43,43341,43343],{"className":222,"code":43342,"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,43344,43345,43355,43359,43373,43377,43386,43394,43398,43402],{"__ignoreMap":48},[52,43346,43347,43349,43351,43353],{"class":54,"line":55},[52,43348,232],{"class":231},[52,43350,9005],{"class":58},[52,43352,238],{"class":231},[52,43354,9010],{"class":73},[52,43356,43357],{"class":54,"line":80},[52,43358,597],{"emptyLinePlaceholder":171},[52,43360,43361,43363,43365,43367,43369,43371],{"class":54,"line":108},[52,43362,1721],{"class":231},[52,43364,1724],{"class":371},[52,43366,1727],{"class":231},[52,43368,1730],{"class":231},[52,43370,1733],{"class":66},[52,43372,1736],{"class":58},[52,43374,43375],{"class":54,"line":118},[52,43376,1751],{"class":58},[52,43378,43379,43381,43384],{"class":54,"line":594},[52,43380,1756],{"class":58},[52,43382,43383],{"class":73},"'Perspective'",[52,43385,4496],{"class":58},[52,43387,43388,43390,43392],{"class":54,"line":600},[52,43389,4501],{"class":58},[52,43391,2869],{"class":73},[52,43393,2129],{"class":58},[52,43395,43396],{"class":54,"line":606},[52,43397,4518],{"class":58},[52,43399,43400],{"class":54,"line":653},[52,43401,1773],{"class":58},[52,43403,43404],{"class":54,"line":662},[52,43405,1778],{"class":58},[156,43407,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":43409},[43410,43411],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/perspective",{"title":43143,"description":43151},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":43418,"title":43419,"body":43420,"category":27278,"componentType":20623,"description":43427,"extension":168,"meta":43688,"navigation":171,"path":43689,"requiresChild":171,"seo":43690,"stem":43691,"__hash__":43692},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":43421,"toc":43684},[43422,43425,43428,43430,43432,43435,43437,43682],[11,43423,43419],{"id":43424},"pixelate",[15,43426,43427],{},"Pixelation effect with adjustable cell size",[26676,43429],{"component":43419},[23,43431,26680],{"id":21278},[26682,43433],{":props":43434},"[{\"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,43436,26688],{"id":26687},[217,43438,43439,43484,43528,43572,43616],{":tabs":1543},[43,43440,43442],{"className":45,"code":43441,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[31,43443,43444,43452,43460,43468,43476],{"__ignoreMap":48},[52,43445,43446,43448,43450],{"class":54,"line":55},[52,43447,59],{"class":58},[52,43449,63],{"class":62},[52,43451,77],{"class":58},[52,43453,43454,43456,43458],{"class":54,"line":80},[52,43455,83],{"class":58},[52,43457,43419],{"class":62},[52,43459,77],{"class":58},[52,43461,43462,43464,43466],{"class":54,"line":108},[52,43463,2213],{"class":58},[52,43465,2216],{"class":62},[52,43467,105],{"class":58},[52,43469,43470,43472,43474],{"class":54,"line":118},[52,43471,2230],{"class":58},[52,43473,43419],{"class":62},[52,43475,77],{"class":58},[52,43477,43478,43480,43482],{"class":54,"line":594},[52,43479,121],{"class":58},[52,43481,63],{"class":62},[52,43483,77],{"class":58},[43,43485,43486],{"className":360,"code":43441,"language":362,"meta":48,"style":48},[31,43487,43488,43496,43504,43512,43520],{"__ignoreMap":48},[52,43489,43490,43492,43494],{"class":54,"line":55},[52,43491,59],{"class":58},[52,43493,63],{"class":371},[52,43495,77],{"class":58},[52,43497,43498,43500,43502],{"class":54,"line":80},[52,43499,83],{"class":58},[52,43501,43419],{"class":371},[52,43503,77],{"class":58},[52,43505,43506,43508,43510],{"class":54,"line":108},[52,43507,2213],{"class":58},[52,43509,2216],{"class":371},[52,43511,105],{"class":58},[52,43513,43514,43516,43518],{"class":54,"line":118},[52,43515,2230],{"class":58},[52,43517,43419],{"class":371},[52,43519,77],{"class":58},[52,43521,43522,43524,43526],{"class":54,"line":594},[52,43523,121],{"class":58},[52,43525,63],{"class":371},[52,43527,77],{"class":58},[43,43529,43530],{"className":2507,"code":43441,"language":2509,"meta":48,"style":48},[31,43531,43532,43540,43548,43556,43564],{"__ignoreMap":48},[52,43533,43534,43536,43538],{"class":54,"line":55},[52,43535,59],{"class":58},[52,43537,63],{"class":371},[52,43539,77],{"class":58},[52,43541,43542,43544,43546],{"class":54,"line":80},[52,43543,83],{"class":58},[52,43545,43419],{"class":371},[52,43547,77],{"class":58},[52,43549,43550,43552,43554],{"class":54,"line":108},[52,43551,2213],{"class":58},[52,43553,2216],{"class":371},[52,43555,105],{"class":58},[52,43557,43558,43560,43562],{"class":54,"line":118},[52,43559,2230],{"class":58},[52,43561,43419],{"class":371},[52,43563,77],{"class":58},[52,43565,43566,43568,43570],{"class":54,"line":594},[52,43567,121],{"class":58},[52,43569,63],{"class":371},[52,43571,77],{"class":58},[43,43573,43574],{"className":419,"code":43441,"language":420,"meta":48,"style":48},[31,43575,43576,43584,43592,43600,43608],{"__ignoreMap":48},[52,43577,43578,43580,43582],{"class":54,"line":55},[52,43579,59],{"class":58},[52,43581,63],{"class":371},[52,43583,77],{"class":58},[52,43585,43586,43588,43590],{"class":54,"line":80},[52,43587,83],{"class":58},[52,43589,43419],{"class":371},[52,43591,77],{"class":58},[52,43593,43594,43596,43598],{"class":54,"line":108},[52,43595,2213],{"class":58},[52,43597,2216],{"class":371},[52,43599,105],{"class":58},[52,43601,43602,43604,43606],{"class":54,"line":118},[52,43603,2230],{"class":58},[52,43605,43419],{"class":371},[52,43607,77],{"class":58},[52,43609,43610,43612,43614],{"class":54,"line":594},[52,43611,121],{"class":58},[52,43613,63],{"class":371},[52,43615,77],{"class":58},[43,43617,43619],{"className":222,"code":43618,"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,43620,43621,43631,43635,43649,43653,43662,43670,43674,43678],{"__ignoreMap":48},[52,43622,43623,43625,43627,43629],{"class":54,"line":55},[52,43624,232],{"class":231},[52,43626,9005],{"class":58},[52,43628,238],{"class":231},[52,43630,9010],{"class":73},[52,43632,43633],{"class":54,"line":80},[52,43634,597],{"emptyLinePlaceholder":171},[52,43636,43637,43639,43641,43643,43645,43647],{"class":54,"line":108},[52,43638,1721],{"class":231},[52,43640,1724],{"class":371},[52,43642,1727],{"class":231},[52,43644,1730],{"class":231},[52,43646,1733],{"class":66},[52,43648,1736],{"class":58},[52,43650,43651],{"class":54,"line":118},[52,43652,1751],{"class":58},[52,43654,43655,43657,43660],{"class":54,"line":594},[52,43656,1756],{"class":58},[52,43658,43659],{"class":73},"'Pixelate'",[52,43661,4496],{"class":58},[52,43663,43664,43666,43668],{"class":54,"line":600},[52,43665,4501],{"class":58},[52,43667,2869],{"class":73},[52,43669,2129],{"class":58},[52,43671,43672],{"class":54,"line":606},[52,43673,4518],{"class":58},[52,43675,43676],{"class":54,"line":653},[52,43677,1773],{"class":58},[52,43679,43680],{"class":54,"line":662},[52,43681,1778],{"class":58},[156,43683,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":43685},[43686,43687],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/pixelate",{"title":43419,"description":43427},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":43694,"title":10562,"body":43695,"category":27535,"componentType":20617,"description":43702,"extension":168,"meta":43943,"navigation":171,"path":43944,"requiresChild":27538,"seo":43945,"stem":43946,"__hash__":43947},"components/docs/components/Plasma.md",{"type":8,"value":43696,"toc":43939},[43697,43700,43703,43705,43707,43710,43712,43937],[11,43698,10562],{"id":43699},"plasma",[15,43701,43702],{},"Animated effect of glowing plasma",[26676,43704],{"component":10562},[23,43706,26680],{"id":21278},[26682,43708],{":props":43709},"[{\"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,43711,26688],{"id":26687},[217,43713,43714,43754,43797,43837,43879],{":tabs":1543},[43,43715,43717],{"className":45,"code":43716,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,43718,43719,43727,43734,43742,43746],{"__ignoreMap":48},[52,43720,43721,43723,43725],{"class":54,"line":55},[52,43722,59],{"class":58},[52,43724,63],{"class":62},[52,43726,77],{"class":58},[52,43728,43729,43731],{"class":54,"line":80},[52,43730,83],{"class":58},[52,43732,43733],{"class":62},"Plasma\n",[52,43735,43736,43738,43740],{"class":54,"line":108},[52,43737,17644],{"class":66},[52,43739,70],{"class":58},[52,43741,42630],{"class":73},[52,43743,43744],{"class":54,"line":118},[52,43745,1224],{"class":58},[52,43747,43748,43750,43752],{"class":54,"line":594},[52,43749,121],{"class":58},[52,43751,63],{"class":62},[52,43753,77],{"class":58},[43,43755,43757],{"className":360,"code":43756,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,43758,43759,43767,43773,43785,43789],{"__ignoreMap":48},[52,43760,43761,43763,43765],{"class":54,"line":55},[52,43762,59],{"class":58},[52,43764,63],{"class":371},[52,43766,77],{"class":58},[52,43768,43769,43771],{"class":54,"line":80},[52,43770,83],{"class":58},[52,43772,43733],{"class":371},[52,43774,43775,43777,43779,43781,43783],{"class":54,"line":108},[52,43776,17755],{"class":66},[52,43778,70],{"class":231},[52,43780,723],{"class":58},[52,43782,12945],{"class":371},[52,43784,729],{"class":58},[52,43786,43787],{"class":54,"line":118},[52,43788,1224],{"class":58},[52,43790,43791,43793,43795],{"class":54,"line":594},[52,43792,121],{"class":58},[52,43794,63],{"class":371},[52,43796,77],{"class":58},[43,43798,43799],{"className":2507,"code":43756,"language":2509,"meta":48,"style":48},[31,43800,43801,43809,43815,43825,43829],{"__ignoreMap":48},[52,43802,43803,43805,43807],{"class":54,"line":55},[52,43804,59],{"class":58},[52,43806,63],{"class":371},[52,43808,77],{"class":58},[52,43810,43811,43813],{"class":54,"line":80},[52,43812,83],{"class":58},[52,43814,43733],{"class":371},[52,43816,43817,43819,43821,43823],{"class":54,"line":108},[52,43818,17755],{"class":66},[52,43820,24620],{"class":58},[52,43822,12945],{"class":371},[52,43824,729],{"class":58},[52,43826,43827],{"class":54,"line":118},[52,43828,1224],{"class":58},[52,43830,43831,43833,43835],{"class":54,"line":594},[52,43832,121],{"class":58},[52,43834,63],{"class":371},[52,43836,77],{"class":58},[43,43838,43839],{"className":419,"code":43756,"language":420,"meta":48,"style":48},[31,43840,43841,43849,43855,43867,43871],{"__ignoreMap":48},[52,43842,43843,43845,43847],{"class":54,"line":55},[52,43844,59],{"class":58},[52,43846,63],{"class":371},[52,43848,77],{"class":58},[52,43850,43851,43853],{"class":54,"line":80},[52,43852,83],{"class":58},[52,43854,43733],{"class":371},[52,43856,43857,43859,43861,43863,43865],{"class":54,"line":108},[52,43858,17755],{"class":66},[52,43860,70],{"class":231},[52,43862,723],{"class":58},[52,43864,12945],{"class":371},[52,43866,729],{"class":58},[52,43868,43869],{"class":54,"line":118},[52,43870,1224],{"class":58},[52,43872,43873,43875,43877],{"class":54,"line":594},[52,43874,121],{"class":58},[52,43876,63],{"class":371},[52,43878,77],{"class":58},[43,43880,43882],{"className":222,"code":43881,"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,43883,43884,43894,43898,43912,43916,43929,43933],{"__ignoreMap":48},[52,43885,43886,43888,43890,43892],{"class":54,"line":55},[52,43887,232],{"class":231},[52,43889,9005],{"class":58},[52,43891,238],{"class":231},[52,43893,9010],{"class":73},[52,43895,43896],{"class":54,"line":80},[52,43897,597],{"emptyLinePlaceholder":171},[52,43899,43900,43902,43904,43906,43908,43910],{"class":54,"line":108},[52,43901,1721],{"class":231},[52,43903,1724],{"class":371},[52,43905,1727],{"class":231},[52,43907,1730],{"class":231},[52,43909,1733],{"class":66},[52,43911,1736],{"class":58},[52,43913,43914],{"class":54,"line":118},[52,43915,1751],{"class":58},[52,43917,43918,43920,43923,43925,43927],{"class":54,"line":594},[52,43919,1756],{"class":58},[52,43921,43922],{"class":73},"'Plasma'",[52,43924,26969],{"class":58},[52,43926,12945],{"class":371},[52,43928,1768],{"class":58},[52,43930,43931],{"class":54,"line":600},[52,43932,1773],{"class":58},[52,43934,43935],{"class":54,"line":606},[52,43936,1778],{"class":58},[156,43938,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43940},[43941,43942],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/plasma",{"title":10562,"description":43702},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":43949,"title":43950,"body":43951,"category":28880,"componentType":20623,"description":43958,"extension":168,"meta":44321,"navigation":171,"path":44322,"requiresChild":171,"seo":44323,"stem":44324,"__hash__":44325},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":43952,"toc":44317},[43953,43956,43959,43961,43963,43966,43968,44315],[11,43954,43950],{"id":43955},"polarcoordinates",[15,43957,43958],{},"Convert rectangular coordinates to polar space",[26676,43960],{"component":43950},[23,43962,26680],{"id":21278},[26682,43964],{":props":43965},"[{\"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,43967,26688],{"id":26687},[217,43969,43970,44034,44105,44171,44241],{":tabs":1543},[43,43971,43973],{"className":45,"code":43972,"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,43974,43975,43983,43990,43998,44006,44010,44018,44026],{"__ignoreMap":48},[52,43976,43977,43979,43981],{"class":54,"line":55},[52,43978,59],{"class":58},[52,43980,63],{"class":62},[52,43982,77],{"class":58},[52,43984,43985,43987],{"class":54,"line":80},[52,43986,83],{"class":58},[52,43988,43989],{"class":62},"PolarCoordinates\n",[52,43991,43992,43994,43996],{"class":54,"line":108},[52,43993,14675],{"class":66},[52,43995,70],{"class":58},[52,43997,28602],{"class":73},[52,43999,44000,44002,44004],{"class":54,"line":118},[52,44001,17644],{"class":66},[52,44003,70],{"class":58},[52,44005,28602],{"class":73},[52,44007,44008],{"class":54,"line":594},[52,44009,26724],{"class":58},[52,44011,44012,44014,44016],{"class":54,"line":600},[52,44013,2213],{"class":58},[52,44015,2216],{"class":62},[52,44017,105],{"class":58},[52,44019,44020,44022,44024],{"class":54,"line":606},[52,44021,2230],{"class":58},[52,44023,43950],{"class":62},[52,44025,77],{"class":58},[52,44027,44028,44030,44032],{"class":54,"line":653},[52,44029,121],{"class":58},[52,44031,63],{"class":62},[52,44033,77],{"class":58},[43,44035,44037],{"className":360,"code":44036,"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,44038,44039,44047,44053,44065,44077,44081,44089,44097],{"__ignoreMap":48},[52,44040,44041,44043,44045],{"class":54,"line":55},[52,44042,59],{"class":58},[52,44044,63],{"class":371},[52,44046,77],{"class":58},[52,44048,44049,44051],{"class":54,"line":80},[52,44050,83],{"class":58},[52,44052,43989],{"class":371},[52,44054,44055,44057,44059,44061,44063],{"class":54,"line":108},[52,44056,7135],{"class":66},[52,44058,70],{"class":231},[52,44060,723],{"class":58},[52,44062,6165],{"class":371},[52,44064,729],{"class":58},[52,44066,44067,44069,44071,44073,44075],{"class":54,"line":118},[52,44068,17755],{"class":66},[52,44070,70],{"class":231},[52,44072,723],{"class":58},[52,44074,6165],{"class":371},[52,44076,729],{"class":58},[52,44078,44079],{"class":54,"line":594},[52,44080,26724],{"class":58},[52,44082,44083,44085,44087],{"class":54,"line":600},[52,44084,2213],{"class":58},[52,44086,2216],{"class":371},[52,44088,105],{"class":58},[52,44090,44091,44093,44095],{"class":54,"line":606},[52,44092,2230],{"class":58},[52,44094,43950],{"class":371},[52,44096,77],{"class":58},[52,44098,44099,44101,44103],{"class":54,"line":653},[52,44100,121],{"class":58},[52,44102,63],{"class":371},[52,44104,77],{"class":58},[43,44106,44107],{"className":2507,"code":44036,"language":2509,"meta":48,"style":48},[31,44108,44109,44117,44123,44133,44143,44147,44155,44163],{"__ignoreMap":48},[52,44110,44111,44113,44115],{"class":54,"line":55},[52,44112,59],{"class":58},[52,44114,63],{"class":371},[52,44116,77],{"class":58},[52,44118,44119,44121],{"class":54,"line":80},[52,44120,83],{"class":58},[52,44122,43989],{"class":371},[52,44124,44125,44127,44129,44131],{"class":54,"line":108},[52,44126,7135],{"class":66},[52,44128,24620],{"class":58},[52,44130,6165],{"class":371},[52,44132,729],{"class":58},[52,44134,44135,44137,44139,44141],{"class":54,"line":118},[52,44136,17755],{"class":66},[52,44138,24620],{"class":58},[52,44140,6165],{"class":371},[52,44142,729],{"class":58},[52,44144,44145],{"class":54,"line":594},[52,44146,26724],{"class":58},[52,44148,44149,44151,44153],{"class":54,"line":600},[52,44150,2213],{"class":58},[52,44152,2216],{"class":371},[52,44154,105],{"class":58},[52,44156,44157,44159,44161],{"class":54,"line":606},[52,44158,2230],{"class":58},[52,44160,43950],{"class":371},[52,44162,77],{"class":58},[52,44164,44165,44167,44169],{"class":54,"line":653},[52,44166,121],{"class":58},[52,44168,63],{"class":371},[52,44170,77],{"class":58},[43,44172,44173],{"className":419,"code":44036,"language":420,"meta":48,"style":48},[31,44174,44175,44183,44189,44201,44213,44217,44225,44233],{"__ignoreMap":48},[52,44176,44177,44179,44181],{"class":54,"line":55},[52,44178,59],{"class":58},[52,44180,63],{"class":371},[52,44182,77],{"class":58},[52,44184,44185,44187],{"class":54,"line":80},[52,44186,83],{"class":58},[52,44188,43989],{"class":371},[52,44190,44191,44193,44195,44197,44199],{"class":54,"line":108},[52,44192,7135],{"class":66},[52,44194,70],{"class":231},[52,44196,723],{"class":58},[52,44198,6165],{"class":371},[52,44200,729],{"class":58},[52,44202,44203,44205,44207,44209,44211],{"class":54,"line":118},[52,44204,17755],{"class":66},[52,44206,70],{"class":231},[52,44208,723],{"class":58},[52,44210,6165],{"class":371},[52,44212,729],{"class":58},[52,44214,44215],{"class":54,"line":594},[52,44216,26724],{"class":58},[52,44218,44219,44221,44223],{"class":54,"line":600},[52,44220,2213],{"class":58},[52,44222,2216],{"class":371},[52,44224,105],{"class":58},[52,44226,44227,44229,44231],{"class":54,"line":606},[52,44228,2230],{"class":58},[52,44230,43950],{"class":371},[52,44232,77],{"class":58},[52,44234,44235,44237,44239],{"class":54,"line":653},[52,44236,121],{"class":58},[52,44238,63],{"class":371},[52,44240,77],{"class":58},[43,44242,44244],{"className":222,"code":44243,"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,44245,44246,44256,44260,44274,44278,44295,44303,44307,44311],{"__ignoreMap":48},[52,44247,44248,44250,44252,44254],{"class":54,"line":55},[52,44249,232],{"class":231},[52,44251,9005],{"class":58},[52,44253,238],{"class":231},[52,44255,9010],{"class":73},[52,44257,44258],{"class":54,"line":80},[52,44259,597],{"emptyLinePlaceholder":171},[52,44261,44262,44264,44266,44268,44270,44272],{"class":54,"line":108},[52,44263,1721],{"class":231},[52,44265,1724],{"class":371},[52,44267,1727],{"class":231},[52,44269,1730],{"class":231},[52,44271,1733],{"class":66},[52,44273,1736],{"class":58},[52,44275,44276],{"class":54,"line":118},[52,44277,1751],{"class":58},[52,44279,44280,44282,44285,44287,44289,44291,44293],{"class":54,"line":594},[52,44281,1756],{"class":58},[52,44283,44284],{"class":73},"'PolarCoordinates'",[52,44286,5028],{"class":58},[52,44288,6165],{"class":371},[52,44290,34198],{"class":58},[52,44292,6165],{"class":371},[52,44294,5033],{"class":58},[52,44296,44297,44299,44301],{"class":54,"line":600},[52,44298,4501],{"class":58},[52,44300,2869],{"class":73},[52,44302,2129],{"class":58},[52,44304,44305],{"class":54,"line":606},[52,44306,4518],{"class":58},[52,44308,44309],{"class":54,"line":653},[52,44310,1773],{"class":58},[52,44312,44313],{"class":54,"line":662},[52,44314,1778],{"class":58},[156,44316,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44318},[44319,44320],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/polarcoordinates",{"title":43950,"description":43958},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":44327,"title":44328,"body":44329,"category":30502,"componentType":20617,"description":44336,"extension":168,"meta":44613,"navigation":171,"path":44614,"requiresChild":27538,"seo":44615,"stem":44616,"__hash__":44617},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":44330,"toc":44609},[44331,44334,44337,44339,44341,44344,44346,44607],[11,44332,44328],{"id":44333},"polygon",[15,44335,44336],{},"Regular polygon with adjustable sides and corner rounding",[26676,44338],{"component":44328},[23,44340,26680],{"id":21278},[26682,44342],{":props":44343},"[{\"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,44345,26688],{"id":26687},[217,44347,44348,44396,44447,44495,44545],{":tabs":1543},[43,44349,44351],{"className":45,"code":44350,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,44352,44353,44361,44368,44376,44384,44388],{"__ignoreMap":48},[52,44354,44355,44357,44359],{"class":54,"line":55},[52,44356,59],{"class":58},[52,44358,63],{"class":62},[52,44360,77],{"class":58},[52,44362,44363,44365],{"class":54,"line":80},[52,44364,83],{"class":58},[52,44366,44367],{"class":62},"Polygon\n",[52,44369,44370,44372,44374],{"class":54,"line":108},[52,44371,7125],{"class":66},[52,44373,70],{"class":58},[52,44375,7081],{"class":73},[52,44377,44378,44380,44382],{"class":54,"line":118},[52,44379,14675],{"class":66},[52,44381,70],{"class":58},[52,44383,36039],{"class":73},[52,44385,44386],{"class":54,"line":594},[52,44387,1224],{"class":58},[52,44389,44390,44392,44394],{"class":54,"line":600},[52,44391,121],{"class":58},[52,44393,63],{"class":62},[52,44395,77],{"class":58},[43,44397,44399],{"className":360,"code":44398,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,44400,44401,44409,44415,44423,44435,44439],{"__ignoreMap":48},[52,44402,44403,44405,44407],{"class":54,"line":55},[52,44404,59],{"class":58},[52,44406,63],{"class":371},[52,44408,77],{"class":58},[52,44410,44411,44413],{"class":54,"line":80},[52,44412,83],{"class":58},[52,44414,44367],{"class":371},[52,44416,44417,44419,44421],{"class":54,"line":108},[52,44418,7125],{"class":66},[52,44420,70],{"class":231},[52,44422,7081],{"class":73},[52,44424,44425,44427,44429,44431,44433],{"class":54,"line":118},[52,44426,7135],{"class":66},[52,44428,70],{"class":231},[52,44430,723],{"class":58},[52,44432,5737],{"class":371},[52,44434,729],{"class":58},[52,44436,44437],{"class":54,"line":594},[52,44438,1224],{"class":58},[52,44440,44441,44443,44445],{"class":54,"line":600},[52,44442,121],{"class":58},[52,44444,63],{"class":371},[52,44446,77],{"class":58},[43,44448,44449],{"className":2507,"code":44398,"language":2509,"meta":48,"style":48},[31,44450,44451,44459,44465,44473,44483,44487],{"__ignoreMap":48},[52,44452,44453,44455,44457],{"class":54,"line":55},[52,44454,59],{"class":58},[52,44456,63],{"class":371},[52,44458,77],{"class":58},[52,44460,44461,44463],{"class":54,"line":80},[52,44462,83],{"class":58},[52,44464,44367],{"class":371},[52,44466,44467,44469,44471],{"class":54,"line":108},[52,44468,7125],{"class":66},[52,44470,70],{"class":58},[52,44472,7081],{"class":73},[52,44474,44475,44477,44479,44481],{"class":54,"line":118},[52,44476,7135],{"class":66},[52,44478,24620],{"class":58},[52,44480,5737],{"class":371},[52,44482,729],{"class":58},[52,44484,44485],{"class":54,"line":594},[52,44486,1224],{"class":58},[52,44488,44489,44491,44493],{"class":54,"line":600},[52,44490,121],{"class":58},[52,44492,63],{"class":371},[52,44494,77],{"class":58},[43,44496,44497],{"className":419,"code":44398,"language":420,"meta":48,"style":48},[31,44498,44499,44507,44513,44521,44533,44537],{"__ignoreMap":48},[52,44500,44501,44503,44505],{"class":54,"line":55},[52,44502,59],{"class":58},[52,44504,63],{"class":371},[52,44506,77],{"class":58},[52,44508,44509,44511],{"class":54,"line":80},[52,44510,83],{"class":58},[52,44512,44367],{"class":371},[52,44514,44515,44517,44519],{"class":54,"line":108},[52,44516,7125],{"class":66},[52,44518,70],{"class":231},[52,44520,7081],{"class":73},[52,44522,44523,44525,44527,44529,44531],{"class":54,"line":118},[52,44524,7135],{"class":66},[52,44526,70],{"class":231},[52,44528,723],{"class":58},[52,44530,5737],{"class":371},[52,44532,729],{"class":58},[52,44534,44535],{"class":54,"line":594},[52,44536,1224],{"class":58},[52,44538,44539,44541,44543],{"class":54,"line":600},[52,44540,121],{"class":58},[52,44542,63],{"class":371},[52,44544,77],{"class":58},[43,44546,44548],{"className":222,"code":44547,"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,44549,44550,44560,44564,44578,44582,44599,44603],{"__ignoreMap":48},[52,44551,44552,44554,44556,44558],{"class":54,"line":55},[52,44553,232],{"class":231},[52,44555,9005],{"class":58},[52,44557,238],{"class":231},[52,44559,9010],{"class":73},[52,44561,44562],{"class":54,"line":80},[52,44563,597],{"emptyLinePlaceholder":171},[52,44565,44566,44568,44570,44572,44574,44576],{"class":54,"line":108},[52,44567,1721],{"class":231},[52,44569,1724],{"class":371},[52,44571,1727],{"class":231},[52,44573,1730],{"class":231},[52,44575,1733],{"class":66},[52,44577,1736],{"class":58},[52,44579,44580],{"class":54,"line":118},[52,44581,1751],{"class":58},[52,44583,44584,44586,44589,44591,44593,44595,44597],{"class":54,"line":594},[52,44585,1756],{"class":58},[52,44587,44588],{"class":73},"'Polygon'",[52,44590,1762],{"class":58},[52,44592,7660],{"class":73},[52,44594,4052],{"class":58},[52,44596,5737],{"class":371},[52,44598,1768],{"class":58},[52,44600,44601],{"class":54,"line":600},[52,44602,1773],{"class":58},[52,44604,44605],{"class":54,"line":606},[52,44606,1778],{"class":58},[156,44608,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44610},[44611,44612],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/polygon",{"title":44328,"description":44336},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":44619,"title":44620,"body":44621,"category":28546,"componentType":20623,"description":44628,"extension":168,"meta":44946,"navigation":171,"path":44947,"requiresChild":171,"seo":44948,"stem":44949,"__hash__":44950},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":44622,"toc":44942},[44623,44626,44629,44631,44633,44636,44638,44940],[11,44624,44620],{"id":44625},"posterize",[15,44627,44628],{},"Reduce color depth to create a poster effect",[26676,44630],{"component":44620},[23,44632,26680],{"id":21278},[26682,44634],{":props":44635},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,44637,26688],{"id":26687},[217,44639,44640,44697,44756,44812,44870],{":tabs":1543},[43,44641,44643],{"className":45,"code":44642,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,44644,44645,44653,44660,44669,44673,44681,44689],{"__ignoreMap":48},[52,44646,44647,44649,44651],{"class":54,"line":55},[52,44648,59],{"class":58},[52,44650,63],{"class":62},[52,44652,77],{"class":58},[52,44654,44655,44657],{"class":54,"line":80},[52,44656,83],{"class":58},[52,44658,44659],{"class":62},"Posterize\n",[52,44661,44662,44664,44666],{"class":54,"line":108},[52,44663,17644],{"class":66},[52,44665,70],{"class":58},[52,44667,44668],{"class":73},"\"5\"\n",[52,44670,44671],{"class":54,"line":118},[52,44672,26724],{"class":58},[52,44674,44675,44677,44679],{"class":54,"line":594},[52,44676,2213],{"class":58},[52,44678,2216],{"class":62},[52,44680,105],{"class":58},[52,44682,44683,44685,44687],{"class":54,"line":600},[52,44684,2230],{"class":58},[52,44686,44620],{"class":62},[52,44688,77],{"class":58},[52,44690,44691,44693,44695],{"class":54,"line":606},[52,44692,121],{"class":58},[52,44694,63],{"class":62},[52,44696,77],{"class":58},[43,44698,44700],{"className":360,"code":44699,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,44701,44702,44710,44716,44728,44732,44740,44748],{"__ignoreMap":48},[52,44703,44704,44706,44708],{"class":54,"line":55},[52,44705,59],{"class":58},[52,44707,63],{"class":371},[52,44709,77],{"class":58},[52,44711,44712,44714],{"class":54,"line":80},[52,44713,83],{"class":58},[52,44715,44659],{"class":371},[52,44717,44718,44720,44722,44724,44726],{"class":54,"line":108},[52,44719,17755],{"class":66},[52,44721,70],{"class":231},[52,44723,723],{"class":58},[52,44725,19341],{"class":371},[52,44727,729],{"class":58},[52,44729,44730],{"class":54,"line":118},[52,44731,26724],{"class":58},[52,44733,44734,44736,44738],{"class":54,"line":594},[52,44735,2213],{"class":58},[52,44737,2216],{"class":371},[52,44739,105],{"class":58},[52,44741,44742,44744,44746],{"class":54,"line":600},[52,44743,2230],{"class":58},[52,44745,44620],{"class":371},[52,44747,77],{"class":58},[52,44749,44750,44752,44754],{"class":54,"line":606},[52,44751,121],{"class":58},[52,44753,63],{"class":371},[52,44755,77],{"class":58},[43,44757,44758],{"className":2507,"code":44699,"language":2509,"meta":48,"style":48},[31,44759,44760,44768,44774,44784,44788,44796,44804],{"__ignoreMap":48},[52,44761,44762,44764,44766],{"class":54,"line":55},[52,44763,59],{"class":58},[52,44765,63],{"class":371},[52,44767,77],{"class":58},[52,44769,44770,44772],{"class":54,"line":80},[52,44771,83],{"class":58},[52,44773,44659],{"class":371},[52,44775,44776,44778,44780,44782],{"class":54,"line":108},[52,44777,17755],{"class":66},[52,44779,24620],{"class":58},[52,44781,19341],{"class":371},[52,44783,729],{"class":58},[52,44785,44786],{"class":54,"line":118},[52,44787,26724],{"class":58},[52,44789,44790,44792,44794],{"class":54,"line":594},[52,44791,2213],{"class":58},[52,44793,2216],{"class":371},[52,44795,105],{"class":58},[52,44797,44798,44800,44802],{"class":54,"line":600},[52,44799,2230],{"class":58},[52,44801,44620],{"class":371},[52,44803,77],{"class":58},[52,44805,44806,44808,44810],{"class":54,"line":606},[52,44807,121],{"class":58},[52,44809,63],{"class":371},[52,44811,77],{"class":58},[43,44813,44814],{"className":419,"code":44699,"language":420,"meta":48,"style":48},[31,44815,44816,44824,44830,44842,44846,44854,44862],{"__ignoreMap":48},[52,44817,44818,44820,44822],{"class":54,"line":55},[52,44819,59],{"class":58},[52,44821,63],{"class":371},[52,44823,77],{"class":58},[52,44825,44826,44828],{"class":54,"line":80},[52,44827,83],{"class":58},[52,44829,44659],{"class":371},[52,44831,44832,44834,44836,44838,44840],{"class":54,"line":108},[52,44833,17755],{"class":66},[52,44835,70],{"class":231},[52,44837,723],{"class":58},[52,44839,19341],{"class":371},[52,44841,729],{"class":58},[52,44843,44844],{"class":54,"line":118},[52,44845,26724],{"class":58},[52,44847,44848,44850,44852],{"class":54,"line":594},[52,44849,2213],{"class":58},[52,44851,2216],{"class":371},[52,44853,105],{"class":58},[52,44855,44856,44858,44860],{"class":54,"line":600},[52,44857,2230],{"class":58},[52,44859,44620],{"class":371},[52,44861,77],{"class":58},[52,44863,44864,44866,44868],{"class":54,"line":606},[52,44865,121],{"class":58},[52,44867,63],{"class":371},[52,44869,77],{"class":58},[43,44871,44873],{"className":222,"code":44872,"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,44874,44875,44885,44889,44903,44907,44920,44928,44932,44936],{"__ignoreMap":48},[52,44876,44877,44879,44881,44883],{"class":54,"line":55},[52,44878,232],{"class":231},[52,44880,9005],{"class":58},[52,44882,238],{"class":231},[52,44884,9010],{"class":73},[52,44886,44887],{"class":54,"line":80},[52,44888,597],{"emptyLinePlaceholder":171},[52,44890,44891,44893,44895,44897,44899,44901],{"class":54,"line":108},[52,44892,1721],{"class":231},[52,44894,1724],{"class":371},[52,44896,1727],{"class":231},[52,44898,1730],{"class":231},[52,44900,1733],{"class":66},[52,44902,1736],{"class":58},[52,44904,44905],{"class":54,"line":118},[52,44906,1751],{"class":58},[52,44908,44909,44911,44914,44916,44918],{"class":54,"line":594},[52,44910,1756],{"class":58},[52,44912,44913],{"class":73},"'Posterize'",[52,44915,26969],{"class":58},[52,44917,19341],{"class":371},[52,44919,5033],{"class":58},[52,44921,44922,44924,44926],{"class":54,"line":600},[52,44923,4501],{"class":58},[52,44925,2869],{"class":73},[52,44927,2129],{"class":58},[52,44929,44930],{"class":54,"line":606},[52,44931,4518],{"class":58},[52,44933,44934],{"class":54,"line":653},[52,44935,1773],{"class":58},[52,44937,44938],{"class":54,"line":662},[52,44939,1778],{"class":58},[156,44941,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44943},[44944,44945],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/posterize",{"title":44620,"description":44628},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":44952,"title":44953,"body":44954,"category":27000,"componentType":20623,"description":44961,"extension":168,"meta":45278,"navigation":171,"path":45279,"requiresChild":171,"seo":45280,"stem":45281,"__hash__":45282},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":44955,"toc":45274},[44956,44959,44962,44964,44966,44969,44971,45272],[11,44957,44953],{"id":44958},"progressiveblur",[15,44960,44961],{},"Blur that increases progressively in one direction",[26676,44963],{"component":44953},[23,44965,26680],{"id":21278},[26682,44967],{":props":44968},"[{\"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,44970,26688],{"id":26687},[217,44972,44973,45029,45088,45144,45202],{":tabs":1543},[43,44974,44976],{"className":45,"code":44975,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,44977,44978,44986,44993,45001,45005,45013,45021],{"__ignoreMap":48},[52,44979,44980,44982,44984],{"class":54,"line":55},[52,44981,59],{"class":58},[52,44983,63],{"class":62},[52,44985,77],{"class":58},[52,44987,44988,44990],{"class":54,"line":80},[52,44989,83],{"class":58},[52,44991,44992],{"class":62},"ProgressiveBlur\n",[52,44994,44995,44997,44999],{"class":54,"line":108},[52,44996,17644],{"class":66},[52,44998,70],{"class":58},[52,45000,27991],{"class":73},[52,45002,45003],{"class":54,"line":118},[52,45004,26724],{"class":58},[52,45006,45007,45009,45011],{"class":54,"line":594},[52,45008,2213],{"class":58},[52,45010,2216],{"class":62},[52,45012,105],{"class":58},[52,45014,45015,45017,45019],{"class":54,"line":600},[52,45016,2230],{"class":58},[52,45018,44953],{"class":62},[52,45020,77],{"class":58},[52,45022,45023,45025,45027],{"class":54,"line":606},[52,45024,121],{"class":58},[52,45026,63],{"class":62},[52,45028,77],{"class":58},[43,45030,45032],{"className":360,"code":45031,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45033,45034,45042,45048,45060,45064,45072,45080],{"__ignoreMap":48},[52,45035,45036,45038,45040],{"class":54,"line":55},[52,45037,59],{"class":58},[52,45039,63],{"class":371},[52,45041,77],{"class":58},[52,45043,45044,45046],{"class":54,"line":80},[52,45045,83],{"class":58},[52,45047,44992],{"class":371},[52,45049,45050,45052,45054,45056,45058],{"class":54,"line":108},[52,45051,17755],{"class":66},[52,45053,70],{"class":231},[52,45055,723],{"class":58},[52,45057,28049],{"class":371},[52,45059,729],{"class":58},[52,45061,45062],{"class":54,"line":118},[52,45063,26724],{"class":58},[52,45065,45066,45068,45070],{"class":54,"line":594},[52,45067,2213],{"class":58},[52,45069,2216],{"class":371},[52,45071,105],{"class":58},[52,45073,45074,45076,45078],{"class":54,"line":600},[52,45075,2230],{"class":58},[52,45077,44953],{"class":371},[52,45079,77],{"class":58},[52,45081,45082,45084,45086],{"class":54,"line":606},[52,45083,121],{"class":58},[52,45085,63],{"class":371},[52,45087,77],{"class":58},[43,45089,45090],{"className":2507,"code":45031,"language":2509,"meta":48,"style":48},[31,45091,45092,45100,45106,45116,45120,45128,45136],{"__ignoreMap":48},[52,45093,45094,45096,45098],{"class":54,"line":55},[52,45095,59],{"class":58},[52,45097,63],{"class":371},[52,45099,77],{"class":58},[52,45101,45102,45104],{"class":54,"line":80},[52,45103,83],{"class":58},[52,45105,44992],{"class":371},[52,45107,45108,45110,45112,45114],{"class":54,"line":108},[52,45109,17755],{"class":66},[52,45111,24620],{"class":58},[52,45113,28049],{"class":371},[52,45115,729],{"class":58},[52,45117,45118],{"class":54,"line":118},[52,45119,26724],{"class":58},[52,45121,45122,45124,45126],{"class":54,"line":594},[52,45123,2213],{"class":58},[52,45125,2216],{"class":371},[52,45127,105],{"class":58},[52,45129,45130,45132,45134],{"class":54,"line":600},[52,45131,2230],{"class":58},[52,45133,44953],{"class":371},[52,45135,77],{"class":58},[52,45137,45138,45140,45142],{"class":54,"line":606},[52,45139,121],{"class":58},[52,45141,63],{"class":371},[52,45143,77],{"class":58},[43,45145,45146],{"className":419,"code":45031,"language":420,"meta":48,"style":48},[31,45147,45148,45156,45162,45174,45178,45186,45194],{"__ignoreMap":48},[52,45149,45150,45152,45154],{"class":54,"line":55},[52,45151,59],{"class":58},[52,45153,63],{"class":371},[52,45155,77],{"class":58},[52,45157,45158,45160],{"class":54,"line":80},[52,45159,83],{"class":58},[52,45161,44992],{"class":371},[52,45163,45164,45166,45168,45170,45172],{"class":54,"line":108},[52,45165,17755],{"class":66},[52,45167,70],{"class":231},[52,45169,723],{"class":58},[52,45171,28049],{"class":371},[52,45173,729],{"class":58},[52,45175,45176],{"class":54,"line":118},[52,45177,26724],{"class":58},[52,45179,45180,45182,45184],{"class":54,"line":594},[52,45181,2213],{"class":58},[52,45183,2216],{"class":371},[52,45185,105],{"class":58},[52,45187,45188,45190,45192],{"class":54,"line":600},[52,45189,2230],{"class":58},[52,45191,44953],{"class":371},[52,45193,77],{"class":58},[52,45195,45196,45198,45200],{"class":54,"line":606},[52,45197,121],{"class":58},[52,45199,63],{"class":371},[52,45201,77],{"class":58},[43,45203,45205],{"className":222,"code":45204,"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,45206,45207,45217,45221,45235,45239,45252,45260,45264,45268],{"__ignoreMap":48},[52,45208,45209,45211,45213,45215],{"class":54,"line":55},[52,45210,232],{"class":231},[52,45212,9005],{"class":58},[52,45214,238],{"class":231},[52,45216,9010],{"class":73},[52,45218,45219],{"class":54,"line":80},[52,45220,597],{"emptyLinePlaceholder":171},[52,45222,45223,45225,45227,45229,45231,45233],{"class":54,"line":108},[52,45224,1721],{"class":231},[52,45226,1724],{"class":371},[52,45228,1727],{"class":231},[52,45230,1730],{"class":231},[52,45232,1733],{"class":66},[52,45234,1736],{"class":58},[52,45236,45237],{"class":54,"line":118},[52,45238,1751],{"class":58},[52,45240,45241,45243,45246,45248,45250],{"class":54,"line":594},[52,45242,1756],{"class":58},[52,45244,45245],{"class":73},"'ProgressiveBlur'",[52,45247,26969],{"class":58},[52,45249,28049],{"class":371},[52,45251,5033],{"class":58},[52,45253,45254,45256,45258],{"class":54,"line":600},[52,45255,4501],{"class":58},[52,45257,2869],{"class":73},[52,45259,2129],{"class":58},[52,45261,45262],{"class":54,"line":606},[52,45263,4518],{"class":58},[52,45265,45266],{"class":54,"line":653},[52,45267,1773],{"class":58},[52,45269,45270],{"class":54,"line":662},[52,45271,1778],{"class":58},[156,45273,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45275},[45276,45277],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/progressiveblur",{"title":44953,"description":44961},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":45284,"title":45285,"body":45286,"category":27535,"componentType":20617,"description":45293,"extension":168,"meta":45534,"navigation":171,"path":45535,"requiresChild":27538,"seo":45536,"stem":45537,"__hash__":45538},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":45287,"toc":45530},[45288,45291,45294,45296,45298,45301,45303,45528],[11,45289,45285],{"id":45290},"radialgradient",[15,45292,45293],{},"Radial gradient radiating from a center point",[26676,45295],{"component":45285},[23,45297,26680],{"id":21278},[26682,45299],{":props":45300},"[{\"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,45302,26688],{"id":26687},[217,45304,45305,45345,45388,45428,45470],{":tabs":1543},[43,45306,45308],{"className":45,"code":45307,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,45309,45310,45318,45325,45333,45337],{"__ignoreMap":48},[52,45311,45312,45314,45316],{"class":54,"line":55},[52,45313,59],{"class":58},[52,45315,63],{"class":62},[52,45317,77],{"class":58},[52,45319,45320,45322],{"class":54,"line":80},[52,45321,83],{"class":58},[52,45323,45324],{"class":62},"RadialGradient\n",[52,45326,45327,45329,45331],{"class":54,"line":108},[52,45328,14675],{"class":66},[52,45330,70],{"class":58},[52,45332,28602],{"class":73},[52,45334,45335],{"class":54,"line":118},[52,45336,1224],{"class":58},[52,45338,45339,45341,45343],{"class":54,"line":594},[52,45340,121],{"class":58},[52,45342,63],{"class":62},[52,45344,77],{"class":58},[43,45346,45348],{"className":360,"code":45347,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,45349,45350,45358,45364,45376,45380],{"__ignoreMap":48},[52,45351,45352,45354,45356],{"class":54,"line":55},[52,45353,59],{"class":58},[52,45355,63],{"class":371},[52,45357,77],{"class":58},[52,45359,45360,45362],{"class":54,"line":80},[52,45361,83],{"class":58},[52,45363,45324],{"class":371},[52,45365,45366,45368,45370,45372,45374],{"class":54,"line":108},[52,45367,7135],{"class":66},[52,45369,70],{"class":231},[52,45371,723],{"class":58},[52,45373,6165],{"class":371},[52,45375,729],{"class":58},[52,45377,45378],{"class":54,"line":118},[52,45379,1224],{"class":58},[52,45381,45382,45384,45386],{"class":54,"line":594},[52,45383,121],{"class":58},[52,45385,63],{"class":371},[52,45387,77],{"class":58},[43,45389,45390],{"className":2507,"code":45347,"language":2509,"meta":48,"style":48},[31,45391,45392,45400,45406,45416,45420],{"__ignoreMap":48},[52,45393,45394,45396,45398],{"class":54,"line":55},[52,45395,59],{"class":58},[52,45397,63],{"class":371},[52,45399,77],{"class":58},[52,45401,45402,45404],{"class":54,"line":80},[52,45403,83],{"class":58},[52,45405,45324],{"class":371},[52,45407,45408,45410,45412,45414],{"class":54,"line":108},[52,45409,7135],{"class":66},[52,45411,24620],{"class":58},[52,45413,6165],{"class":371},[52,45415,729],{"class":58},[52,45417,45418],{"class":54,"line":118},[52,45419,1224],{"class":58},[52,45421,45422,45424,45426],{"class":54,"line":594},[52,45423,121],{"class":58},[52,45425,63],{"class":371},[52,45427,77],{"class":58},[43,45429,45430],{"className":419,"code":45347,"language":420,"meta":48,"style":48},[31,45431,45432,45440,45446,45458,45462],{"__ignoreMap":48},[52,45433,45434,45436,45438],{"class":54,"line":55},[52,45435,59],{"class":58},[52,45437,63],{"class":371},[52,45439,77],{"class":58},[52,45441,45442,45444],{"class":54,"line":80},[52,45443,83],{"class":58},[52,45445,45324],{"class":371},[52,45447,45448,45450,45452,45454,45456],{"class":54,"line":108},[52,45449,7135],{"class":66},[52,45451,70],{"class":231},[52,45453,723],{"class":58},[52,45455,6165],{"class":371},[52,45457,729],{"class":58},[52,45459,45460],{"class":54,"line":118},[52,45461,1224],{"class":58},[52,45463,45464,45466,45468],{"class":54,"line":594},[52,45465,121],{"class":58},[52,45467,63],{"class":371},[52,45469,77],{"class":58},[43,45471,45473],{"className":222,"code":45472,"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,45474,45475,45485,45489,45503,45507,45520,45524],{"__ignoreMap":48},[52,45476,45477,45479,45481,45483],{"class":54,"line":55},[52,45478,232],{"class":231},[52,45480,9005],{"class":58},[52,45482,238],{"class":231},[52,45484,9010],{"class":73},[52,45486,45487],{"class":54,"line":80},[52,45488,597],{"emptyLinePlaceholder":171},[52,45490,45491,45493,45495,45497,45499,45501],{"class":54,"line":108},[52,45492,1721],{"class":231},[52,45494,1724],{"class":371},[52,45496,1727],{"class":231},[52,45498,1730],{"class":231},[52,45500,1733],{"class":66},[52,45502,1736],{"class":58},[52,45504,45505],{"class":54,"line":118},[52,45506,1751],{"class":58},[52,45508,45509,45511,45514,45516,45518],{"class":54,"line":594},[52,45510,1756],{"class":58},[52,45512,45513],{"class":73},"'RadialGradient'",[52,45515,5028],{"class":58},[52,45517,6165],{"class":371},[52,45519,1768],{"class":58},[52,45521,45522],{"class":54,"line":600},[52,45523,1773],{"class":58},[52,45525,45526],{"class":54,"line":606},[52,45527,1778],{"class":58},[156,45529,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45531},[45532,45533],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/radialgradient",{"title":45285,"description":45293},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":45540,"title":45541,"body":45542,"category":28880,"componentType":20623,"description":45549,"extension":168,"meta":45866,"navigation":171,"path":45867,"requiresChild":171,"seo":45868,"stem":45869,"__hash__":45870},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":45543,"toc":45862},[45544,45547,45550,45552,45554,45557,45559,45860],[11,45545,45541],{"id":45546},"rectangularcoordinates",[15,45548,45549],{},"Convert polar coordinates back to rectangular space",[26676,45551],{"component":45541},[23,45553,26680],{"id":21278},[26682,45555],{":props":45556},"[{\"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,45558,26688],{"id":26687},[217,45560,45561,45617,45676,45732,45790],{":tabs":1543},[43,45562,45564],{"className":45,"code":45563,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,45565,45566,45574,45581,45589,45593,45601,45609],{"__ignoreMap":48},[52,45567,45568,45570,45572],{"class":54,"line":55},[52,45569,59],{"class":58},[52,45571,63],{"class":62},[52,45573,77],{"class":58},[52,45575,45576,45578],{"class":54,"line":80},[52,45577,83],{"class":58},[52,45579,45580],{"class":62},"RectangularCoordinates\n",[52,45582,45583,45585,45587],{"class":54,"line":108},[52,45584,17644],{"class":66},[52,45586,70],{"class":58},[52,45588,28602],{"class":73},[52,45590,45591],{"class":54,"line":118},[52,45592,26724],{"class":58},[52,45594,45595,45597,45599],{"class":54,"line":594},[52,45596,2213],{"class":58},[52,45598,2216],{"class":62},[52,45600,105],{"class":58},[52,45602,45603,45605,45607],{"class":54,"line":600},[52,45604,2230],{"class":58},[52,45606,45541],{"class":62},[52,45608,77],{"class":58},[52,45610,45611,45613,45615],{"class":54,"line":606},[52,45612,121],{"class":58},[52,45614,63],{"class":62},[52,45616,77],{"class":58},[43,45618,45620],{"className":360,"code":45619,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,45621,45622,45630,45636,45648,45652,45660,45668],{"__ignoreMap":48},[52,45623,45624,45626,45628],{"class":54,"line":55},[52,45625,59],{"class":58},[52,45627,63],{"class":371},[52,45629,77],{"class":58},[52,45631,45632,45634],{"class":54,"line":80},[52,45633,83],{"class":58},[52,45635,45580],{"class":371},[52,45637,45638,45640,45642,45644,45646],{"class":54,"line":108},[52,45639,17755],{"class":66},[52,45641,70],{"class":231},[52,45643,723],{"class":58},[52,45645,6165],{"class":371},[52,45647,729],{"class":58},[52,45649,45650],{"class":54,"line":118},[52,45651,26724],{"class":58},[52,45653,45654,45656,45658],{"class":54,"line":594},[52,45655,2213],{"class":58},[52,45657,2216],{"class":371},[52,45659,105],{"class":58},[52,45661,45662,45664,45666],{"class":54,"line":600},[52,45663,2230],{"class":58},[52,45665,45541],{"class":371},[52,45667,77],{"class":58},[52,45669,45670,45672,45674],{"class":54,"line":606},[52,45671,121],{"class":58},[52,45673,63],{"class":371},[52,45675,77],{"class":58},[43,45677,45678],{"className":2507,"code":45619,"language":2509,"meta":48,"style":48},[31,45679,45680,45688,45694,45704,45708,45716,45724],{"__ignoreMap":48},[52,45681,45682,45684,45686],{"class":54,"line":55},[52,45683,59],{"class":58},[52,45685,63],{"class":371},[52,45687,77],{"class":58},[52,45689,45690,45692],{"class":54,"line":80},[52,45691,83],{"class":58},[52,45693,45580],{"class":371},[52,45695,45696,45698,45700,45702],{"class":54,"line":108},[52,45697,17755],{"class":66},[52,45699,24620],{"class":58},[52,45701,6165],{"class":371},[52,45703,729],{"class":58},[52,45705,45706],{"class":54,"line":118},[52,45707,26724],{"class":58},[52,45709,45710,45712,45714],{"class":54,"line":594},[52,45711,2213],{"class":58},[52,45713,2216],{"class":371},[52,45715,105],{"class":58},[52,45717,45718,45720,45722],{"class":54,"line":600},[52,45719,2230],{"class":58},[52,45721,45541],{"class":371},[52,45723,77],{"class":58},[52,45725,45726,45728,45730],{"class":54,"line":606},[52,45727,121],{"class":58},[52,45729,63],{"class":371},[52,45731,77],{"class":58},[43,45733,45734],{"className":419,"code":45619,"language":420,"meta":48,"style":48},[31,45735,45736,45744,45750,45762,45766,45774,45782],{"__ignoreMap":48},[52,45737,45738,45740,45742],{"class":54,"line":55},[52,45739,59],{"class":58},[52,45741,63],{"class":371},[52,45743,77],{"class":58},[52,45745,45746,45748],{"class":54,"line":80},[52,45747,83],{"class":58},[52,45749,45580],{"class":371},[52,45751,45752,45754,45756,45758,45760],{"class":54,"line":108},[52,45753,17755],{"class":66},[52,45755,70],{"class":231},[52,45757,723],{"class":58},[52,45759,6165],{"class":371},[52,45761,729],{"class":58},[52,45763,45764],{"class":54,"line":118},[52,45765,26724],{"class":58},[52,45767,45768,45770,45772],{"class":54,"line":594},[52,45769,2213],{"class":58},[52,45771,2216],{"class":371},[52,45773,105],{"class":58},[52,45775,45776,45778,45780],{"class":54,"line":600},[52,45777,2230],{"class":58},[52,45779,45541],{"class":371},[52,45781,77],{"class":58},[52,45783,45784,45786,45788],{"class":54,"line":606},[52,45785,121],{"class":58},[52,45787,63],{"class":371},[52,45789,77],{"class":58},[43,45791,45793],{"className":222,"code":45792,"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,45794,45795,45805,45809,45823,45827,45840,45848,45852,45856],{"__ignoreMap":48},[52,45796,45797,45799,45801,45803],{"class":54,"line":55},[52,45798,232],{"class":231},[52,45800,9005],{"class":58},[52,45802,238],{"class":231},[52,45804,9010],{"class":73},[52,45806,45807],{"class":54,"line":80},[52,45808,597],{"emptyLinePlaceholder":171},[52,45810,45811,45813,45815,45817,45819,45821],{"class":54,"line":108},[52,45812,1721],{"class":231},[52,45814,1724],{"class":371},[52,45816,1727],{"class":231},[52,45818,1730],{"class":231},[52,45820,1733],{"class":66},[52,45822,1736],{"class":58},[52,45824,45825],{"class":54,"line":118},[52,45826,1751],{"class":58},[52,45828,45829,45831,45834,45836,45838],{"class":54,"line":594},[52,45830,1756],{"class":58},[52,45832,45833],{"class":73},"'RectangularCoordinates'",[52,45835,26969],{"class":58},[52,45837,6165],{"class":371},[52,45839,5033],{"class":58},[52,45841,45842,45844,45846],{"class":54,"line":600},[52,45843,4501],{"class":58},[52,45845,2869],{"class":73},[52,45847,2129],{"class":58},[52,45849,45850],{"class":54,"line":606},[52,45851,4518],{"class":58},[52,45853,45854],{"class":54,"line":653},[52,45855,1773],{"class":58},[52,45857,45858],{"class":54,"line":662},[52,45859,1778],{"class":58},[156,45861,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45863},[45864,45865],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/rectangularcoordinates",{"title":45541,"description":45549},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":45872,"title":45873,"body":45874,"category":30502,"componentType":20617,"description":45881,"extension":168,"meta":46158,"navigation":171,"path":46159,"requiresChild":27538,"seo":46160,"stem":46161,"__hash__":46162},"components/docs/components/Ring.md","Ring",{"type":8,"value":45875,"toc":46154},[45876,45879,45882,45884,45886,45889,45891,46152],[11,45877,45873],{"id":45878},"ring",[15,45880,45881],{},"Annular ring (donut) with adjustable radius and band thickness",[26676,45883],{"component":45873},[23,45885,26680],{"id":21278},[26682,45887],{":props":45888},"[{\"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,45890,26688],{"id":26687},[217,45892,45893,45941,45992,46040,46090],{":tabs":1543},[43,45894,45896],{"className":45,"code":45895,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,45897,45898,45906,45913,45921,45929,45933],{"__ignoreMap":48},[52,45899,45900,45902,45904],{"class":54,"line":55},[52,45901,59],{"class":58},[52,45903,63],{"class":62},[52,45905,77],{"class":58},[52,45907,45908,45910],{"class":54,"line":80},[52,45909,83],{"class":58},[52,45911,45912],{"class":62},"Ring\n",[52,45914,45915,45917,45919],{"class":54,"line":108},[52,45916,7125],{"class":66},[52,45918,70],{"class":58},[52,45920,7081],{"class":73},[52,45922,45923,45925,45927],{"class":54,"line":118},[52,45924,14675],{"class":66},[52,45926,70],{"class":58},[52,45928,31374],{"class":73},[52,45930,45931],{"class":54,"line":594},[52,45932,1224],{"class":58},[52,45934,45935,45937,45939],{"class":54,"line":600},[52,45936,121],{"class":58},[52,45938,63],{"class":62},[52,45940,77],{"class":58},[43,45942,45944],{"className":360,"code":45943,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,45945,45946,45954,45960,45968,45980,45984],{"__ignoreMap":48},[52,45947,45948,45950,45952],{"class":54,"line":55},[52,45949,59],{"class":58},[52,45951,63],{"class":371},[52,45953,77],{"class":58},[52,45955,45956,45958],{"class":54,"line":80},[52,45957,83],{"class":58},[52,45959,45912],{"class":371},[52,45961,45962,45964,45966],{"class":54,"line":108},[52,45963,7125],{"class":66},[52,45965,70],{"class":231},[52,45967,7081],{"class":73},[52,45969,45970,45972,45974,45976,45978],{"class":54,"line":118},[52,45971,7135],{"class":66},[52,45973,70],{"class":231},[52,45975,723],{"class":58},[52,45977,19253],{"class":371},[52,45979,729],{"class":58},[52,45981,45982],{"class":54,"line":594},[52,45983,1224],{"class":58},[52,45985,45986,45988,45990],{"class":54,"line":600},[52,45987,121],{"class":58},[52,45989,63],{"class":371},[52,45991,77],{"class":58},[43,45993,45994],{"className":2507,"code":45943,"language":2509,"meta":48,"style":48},[31,45995,45996,46004,46010,46018,46028,46032],{"__ignoreMap":48},[52,45997,45998,46000,46002],{"class":54,"line":55},[52,45999,59],{"class":58},[52,46001,63],{"class":371},[52,46003,77],{"class":58},[52,46005,46006,46008],{"class":54,"line":80},[52,46007,83],{"class":58},[52,46009,45912],{"class":371},[52,46011,46012,46014,46016],{"class":54,"line":108},[52,46013,7125],{"class":66},[52,46015,70],{"class":58},[52,46017,7081],{"class":73},[52,46019,46020,46022,46024,46026],{"class":54,"line":118},[52,46021,7135],{"class":66},[52,46023,24620],{"class":58},[52,46025,19253],{"class":371},[52,46027,729],{"class":58},[52,46029,46030],{"class":54,"line":594},[52,46031,1224],{"class":58},[52,46033,46034,46036,46038],{"class":54,"line":600},[52,46035,121],{"class":58},[52,46037,63],{"class":371},[52,46039,77],{"class":58},[43,46041,46042],{"className":419,"code":45943,"language":420,"meta":48,"style":48},[31,46043,46044,46052,46058,46066,46078,46082],{"__ignoreMap":48},[52,46045,46046,46048,46050],{"class":54,"line":55},[52,46047,59],{"class":58},[52,46049,63],{"class":371},[52,46051,77],{"class":58},[52,46053,46054,46056],{"class":54,"line":80},[52,46055,83],{"class":58},[52,46057,45912],{"class":371},[52,46059,46060,46062,46064],{"class":54,"line":108},[52,46061,7125],{"class":66},[52,46063,70],{"class":231},[52,46065,7081],{"class":73},[52,46067,46068,46070,46072,46074,46076],{"class":54,"line":118},[52,46069,7135],{"class":66},[52,46071,70],{"class":231},[52,46073,723],{"class":58},[52,46075,19253],{"class":371},[52,46077,729],{"class":58},[52,46079,46080],{"class":54,"line":594},[52,46081,1224],{"class":58},[52,46083,46084,46086,46088],{"class":54,"line":600},[52,46085,121],{"class":58},[52,46087,63],{"class":371},[52,46089,77],{"class":58},[43,46091,46093],{"className":222,"code":46092,"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,46094,46095,46105,46109,46123,46127,46144,46148],{"__ignoreMap":48},[52,46096,46097,46099,46101,46103],{"class":54,"line":55},[52,46098,232],{"class":231},[52,46100,9005],{"class":58},[52,46102,238],{"class":231},[52,46104,9010],{"class":73},[52,46106,46107],{"class":54,"line":80},[52,46108,597],{"emptyLinePlaceholder":171},[52,46110,46111,46113,46115,46117,46119,46121],{"class":54,"line":108},[52,46112,1721],{"class":231},[52,46114,1724],{"class":371},[52,46116,1727],{"class":231},[52,46118,1730],{"class":231},[52,46120,1733],{"class":66},[52,46122,1736],{"class":58},[52,46124,46125],{"class":54,"line":118},[52,46126,1751],{"class":58},[52,46128,46129,46131,46134,46136,46138,46140,46142],{"class":54,"line":594},[52,46130,1756],{"class":58},[52,46132,46133],{"class":73},"'Ring'",[52,46135,1762],{"class":58},[52,46137,7660],{"class":73},[52,46139,4052],{"class":58},[52,46141,19253],{"class":371},[52,46143,1768],{"class":58},[52,46145,46146],{"class":54,"line":600},[52,46147,1773],{"class":58},[52,46149,46150],{"class":54,"line":606},[52,46151,1778],{"class":58},[156,46153,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46155},[46156,46157],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/ring",{"title":45873,"description":45881},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":46164,"title":46165,"body":46166,"category":27535,"componentType":20617,"description":46173,"extension":168,"meta":46358,"navigation":171,"path":46359,"requiresChild":27538,"seo":46360,"stem":46361,"__hash__":46362},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":46167,"toc":46354},[46168,46171,46174,46176,46178,46181,46183,46352],[11,46169,46165],{"id":46170},"ripples",[15,46172,46173],{},"Concentric animated ripples emanating from a point",[26676,46175],{"component":46165},[23,46177,26680],{"id":21278},[26682,46179],{":props":46180},"[{\"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,46182,26688],{"id":26687},[217,46184,46185,46214,46242,46270,46298],{":tabs":1543},[43,46186,46188],{"className":45,"code":46187,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,46189,46190,46198,46206],{"__ignoreMap":48},[52,46191,46192,46194,46196],{"class":54,"line":55},[52,46193,59],{"class":58},[52,46195,63],{"class":62},[52,46197,77],{"class":58},[52,46199,46200,46202,46204],{"class":54,"line":80},[52,46201,83],{"class":58},[52,46203,46165],{"class":62},[52,46205,105],{"class":58},[52,46207,46208,46210,46212],{"class":54,"line":108},[52,46209,121],{"class":58},[52,46211,63],{"class":62},[52,46213,77],{"class":58},[43,46215,46216],{"className":360,"code":46187,"language":362,"meta":48,"style":48},[31,46217,46218,46226,46234],{"__ignoreMap":48},[52,46219,46220,46222,46224],{"class":54,"line":55},[52,46221,59],{"class":58},[52,46223,63],{"class":371},[52,46225,77],{"class":58},[52,46227,46228,46230,46232],{"class":54,"line":80},[52,46229,83],{"class":58},[52,46231,46165],{"class":371},[52,46233,105],{"class":58},[52,46235,46236,46238,46240],{"class":54,"line":108},[52,46237,121],{"class":58},[52,46239,63],{"class":371},[52,46241,77],{"class":58},[43,46243,46244],{"className":2507,"code":46187,"language":2509,"meta":48,"style":48},[31,46245,46246,46254,46262],{"__ignoreMap":48},[52,46247,46248,46250,46252],{"class":54,"line":55},[52,46249,59],{"class":58},[52,46251,63],{"class":371},[52,46253,77],{"class":58},[52,46255,46256,46258,46260],{"class":54,"line":80},[52,46257,83],{"class":58},[52,46259,46165],{"class":371},[52,46261,105],{"class":58},[52,46263,46264,46266,46268],{"class":54,"line":108},[52,46265,121],{"class":58},[52,46267,63],{"class":371},[52,46269,77],{"class":58},[43,46271,46272],{"className":419,"code":46187,"language":420,"meta":48,"style":48},[31,46273,46274,46282,46290],{"__ignoreMap":48},[52,46275,46276,46278,46280],{"class":54,"line":55},[52,46277,59],{"class":58},[52,46279,63],{"class":371},[52,46281,77],{"class":58},[52,46283,46284,46286,46288],{"class":54,"line":80},[52,46285,83],{"class":58},[52,46287,46165],{"class":371},[52,46289,105],{"class":58},[52,46291,46292,46294,46296],{"class":54,"line":108},[52,46293,121],{"class":58},[52,46295,63],{"class":371},[52,46297,77],{"class":58},[43,46299,46301],{"className":222,"code":46300,"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,46302,46303,46313,46317,46331,46335,46344,46348],{"__ignoreMap":48},[52,46304,46305,46307,46309,46311],{"class":54,"line":55},[52,46306,232],{"class":231},[52,46308,9005],{"class":58},[52,46310,238],{"class":231},[52,46312,9010],{"class":73},[52,46314,46315],{"class":54,"line":80},[52,46316,597],{"emptyLinePlaceholder":171},[52,46318,46319,46321,46323,46325,46327,46329],{"class":54,"line":108},[52,46320,1721],{"class":231},[52,46322,1724],{"class":371},[52,46324,1727],{"class":231},[52,46326,1730],{"class":231},[52,46328,1733],{"class":66},[52,46330,1736],{"class":58},[52,46332,46333],{"class":54,"line":118},[52,46334,1751],{"class":58},[52,46336,46337,46339,46342],{"class":54,"line":594},[52,46338,1756],{"class":58},[52,46340,46341],{"class":73},"'Ripples'",[52,46343,2129],{"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,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":46355},[46356,46357],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/ripples",{"title":46165,"description":46173},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":46364,"title":46365,"body":46366,"category":30502,"componentType":20617,"description":46373,"extension":168,"meta":46603,"navigation":171,"path":46604,"requiresChild":27538,"seo":46605,"stem":46606,"__hash__":46607},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":46367,"toc":46599},[46368,46371,46374,46376,46378,46381,46383,46597],[11,46369,46365],{"id":46370},"roundedrect",[15,46372,46373],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26676,46375],{"component":46365},[23,46377,26680],{"id":21278},[26682,46379],{":props":46380},"[{\"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,46382,26688],{"id":26687},[217,46384,46385,46425,46463,46501,46539],{":tabs":1543},[43,46386,46388],{"className":45,"code":46387,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,46389,46390,46398,46405,46413,46417],{"__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],{"class":54,"line":80},[52,46401,83],{"class":58},[52,46403,46404],{"class":62},"RoundedRect\n",[52,46406,46407,46409,46411],{"class":54,"line":108},[52,46408,7125],{"class":66},[52,46410,70],{"class":58},[52,46412,7081],{"class":73},[52,46414,46415],{"class":54,"line":118},[52,46416,1224],{"class":58},[52,46418,46419,46421,46423],{"class":54,"line":594},[52,46420,121],{"class":58},[52,46422,63],{"class":62},[52,46424,77],{"class":58},[43,46426,46427],{"className":360,"code":46387,"language":362,"meta":48,"style":48},[31,46428,46429,46437,46443,46451,46455],{"__ignoreMap":48},[52,46430,46431,46433,46435],{"class":54,"line":55},[52,46432,59],{"class":58},[52,46434,63],{"class":371},[52,46436,77],{"class":58},[52,46438,46439,46441],{"class":54,"line":80},[52,46440,83],{"class":58},[52,46442,46404],{"class":371},[52,46444,46445,46447,46449],{"class":54,"line":108},[52,46446,7125],{"class":66},[52,46448,70],{"class":231},[52,46450,7081],{"class":73},[52,46452,46453],{"class":54,"line":118},[52,46454,1224],{"class":58},[52,46456,46457,46459,46461],{"class":54,"line":594},[52,46458,121],{"class":58},[52,46460,63],{"class":371},[52,46462,77],{"class":58},[43,46464,46465],{"className":2507,"code":46387,"language":2509,"meta":48,"style":48},[31,46466,46467,46475,46481,46489,46493],{"__ignoreMap":48},[52,46468,46469,46471,46473],{"class":54,"line":55},[52,46470,59],{"class":58},[52,46472,63],{"class":371},[52,46474,77],{"class":58},[52,46476,46477,46479],{"class":54,"line":80},[52,46478,83],{"class":58},[52,46480,46404],{"class":371},[52,46482,46483,46485,46487],{"class":54,"line":108},[52,46484,7125],{"class":66},[52,46486,70],{"class":58},[52,46488,7081],{"class":73},[52,46490,46491],{"class":54,"line":118},[52,46492,1224],{"class":58},[52,46494,46495,46497,46499],{"class":54,"line":594},[52,46496,121],{"class":58},[52,46498,63],{"class":371},[52,46500,77],{"class":58},[43,46502,46503],{"className":419,"code":46387,"language":420,"meta":48,"style":48},[31,46504,46505,46513,46519,46527,46531],{"__ignoreMap":48},[52,46506,46507,46509,46511],{"class":54,"line":55},[52,46508,59],{"class":58},[52,46510,63],{"class":371},[52,46512,77],{"class":58},[52,46514,46515,46517],{"class":54,"line":80},[52,46516,83],{"class":58},[52,46518,46404],{"class":371},[52,46520,46521,46523,46525],{"class":54,"line":108},[52,46522,7125],{"class":66},[52,46524,70],{"class":231},[52,46526,7081],{"class":73},[52,46528,46529],{"class":54,"line":118},[52,46530,1224],{"class":58},[52,46532,46533,46535,46537],{"class":54,"line":594},[52,46534,121],{"class":58},[52,46536,63],{"class":371},[52,46538,77],{"class":58},[43,46540,46542],{"className":222,"code":46541,"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,46543,46544,46554,46558,46572,46576,46589,46593],{"__ignoreMap":48},[52,46545,46546,46548,46550,46552],{"class":54,"line":55},[52,46547,232],{"class":231},[52,46549,9005],{"class":58},[52,46551,238],{"class":231},[52,46553,9010],{"class":73},[52,46555,46556],{"class":54,"line":80},[52,46557,597],{"emptyLinePlaceholder":171},[52,46559,46560,46562,46564,46566,46568,46570],{"class":54,"line":108},[52,46561,1721],{"class":231},[52,46563,1724],{"class":371},[52,46565,1727],{"class":231},[52,46567,1730],{"class":231},[52,46569,1733],{"class":66},[52,46571,1736],{"class":58},[52,46573,46574],{"class":54,"line":118},[52,46575,1751],{"class":58},[52,46577,46578,46580,46583,46585,46587],{"class":54,"line":594},[52,46579,1756],{"class":58},[52,46581,46582],{"class":73},"'RoundedRect'",[52,46584,1762],{"class":58},[52,46586,7660],{"class":73},[52,46588,1768],{"class":58},[52,46590,46591],{"class":54,"line":600},[52,46592,1773],{"class":58},[52,46594,46595],{"class":54,"line":606},[52,46596,1778],{"class":58},[156,46598,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46600},[46601,46602],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/roundedrect",{"title":46365,"description":46373},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":46609,"title":46610,"body":46611,"category":28546,"componentType":20623,"description":46617,"extension":168,"meta":46934,"navigation":171,"path":46935,"requiresChild":171,"seo":46936,"stem":46937,"__hash__":46938},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":46612,"toc":46930},[46613,46615,46618,46620,46622,46625,46627,46928],[11,46614,46610],{"id":5547},[15,46616,46617],{},"Adjust color saturation intensity",[26676,46619],{"component":46610},[23,46621,26680],{"id":21278},[26682,46623],{":props":46624},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,46626,26688],{"id":26687},[217,46628,46629,46685,46744,46800,46858],{":tabs":1543},[43,46630,46632],{"className":45,"code":46631,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,46633,46634,46642,46649,46657,46661,46669,46677],{"__ignoreMap":48},[52,46635,46636,46638,46640],{"class":54,"line":55},[52,46637,59],{"class":58},[52,46639,63],{"class":62},[52,46641,77],{"class":58},[52,46643,46644,46646],{"class":54,"line":80},[52,46645,83],{"class":58},[52,46647,46648],{"class":62},"Saturation\n",[52,46650,46651,46653,46655],{"class":54,"line":108},[52,46652,17644],{"class":66},[52,46654,70],{"class":58},[52,46656,28602],{"class":73},[52,46658,46659],{"class":54,"line":118},[52,46660,26724],{"class":58},[52,46662,46663,46665,46667],{"class":54,"line":594},[52,46664,2213],{"class":58},[52,46666,2216],{"class":62},[52,46668,105],{"class":58},[52,46670,46671,46673,46675],{"class":54,"line":600},[52,46672,2230],{"class":58},[52,46674,46610],{"class":62},[52,46676,77],{"class":58},[52,46678,46679,46681,46683],{"class":54,"line":606},[52,46680,121],{"class":58},[52,46682,63],{"class":62},[52,46684,77],{"class":58},[43,46686,46688],{"className":360,"code":46687,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,46689,46690,46698,46704,46716,46720,46728,46736],{"__ignoreMap":48},[52,46691,46692,46694,46696],{"class":54,"line":55},[52,46693,59],{"class":58},[52,46695,63],{"class":371},[52,46697,77],{"class":58},[52,46699,46700,46702],{"class":54,"line":80},[52,46701,83],{"class":58},[52,46703,46648],{"class":371},[52,46705,46706,46708,46710,46712,46714],{"class":54,"line":108},[52,46707,17755],{"class":66},[52,46709,70],{"class":231},[52,46711,723],{"class":58},[52,46713,6165],{"class":371},[52,46715,729],{"class":58},[52,46717,46718],{"class":54,"line":118},[52,46719,26724],{"class":58},[52,46721,46722,46724,46726],{"class":54,"line":594},[52,46723,2213],{"class":58},[52,46725,2216],{"class":371},[52,46727,105],{"class":58},[52,46729,46730,46732,46734],{"class":54,"line":600},[52,46731,2230],{"class":58},[52,46733,46610],{"class":371},[52,46735,77],{"class":58},[52,46737,46738,46740,46742],{"class":54,"line":606},[52,46739,121],{"class":58},[52,46741,63],{"class":371},[52,46743,77],{"class":58},[43,46745,46746],{"className":2507,"code":46687,"language":2509,"meta":48,"style":48},[31,46747,46748,46756,46762,46772,46776,46784,46792],{"__ignoreMap":48},[52,46749,46750,46752,46754],{"class":54,"line":55},[52,46751,59],{"class":58},[52,46753,63],{"class":371},[52,46755,77],{"class":58},[52,46757,46758,46760],{"class":54,"line":80},[52,46759,83],{"class":58},[52,46761,46648],{"class":371},[52,46763,46764,46766,46768,46770],{"class":54,"line":108},[52,46765,17755],{"class":66},[52,46767,24620],{"class":58},[52,46769,6165],{"class":371},[52,46771,729],{"class":58},[52,46773,46774],{"class":54,"line":118},[52,46775,26724],{"class":58},[52,46777,46778,46780,46782],{"class":54,"line":594},[52,46779,2213],{"class":58},[52,46781,2216],{"class":371},[52,46783,105],{"class":58},[52,46785,46786,46788,46790],{"class":54,"line":600},[52,46787,2230],{"class":58},[52,46789,46610],{"class":371},[52,46791,77],{"class":58},[52,46793,46794,46796,46798],{"class":54,"line":606},[52,46795,121],{"class":58},[52,46797,63],{"class":371},[52,46799,77],{"class":58},[43,46801,46802],{"className":419,"code":46687,"language":420,"meta":48,"style":48},[31,46803,46804,46812,46818,46830,46834,46842,46850],{"__ignoreMap":48},[52,46805,46806,46808,46810],{"class":54,"line":55},[52,46807,59],{"class":58},[52,46809,63],{"class":371},[52,46811,77],{"class":58},[52,46813,46814,46816],{"class":54,"line":80},[52,46815,83],{"class":58},[52,46817,46648],{"class":371},[52,46819,46820,46822,46824,46826,46828],{"class":54,"line":108},[52,46821,17755],{"class":66},[52,46823,70],{"class":231},[52,46825,723],{"class":58},[52,46827,6165],{"class":371},[52,46829,729],{"class":58},[52,46831,46832],{"class":54,"line":118},[52,46833,26724],{"class":58},[52,46835,46836,46838,46840],{"class":54,"line":594},[52,46837,2213],{"class":58},[52,46839,2216],{"class":371},[52,46841,105],{"class":58},[52,46843,46844,46846,46848],{"class":54,"line":600},[52,46845,2230],{"class":58},[52,46847,46610],{"class":371},[52,46849,77],{"class":58},[52,46851,46852,46854,46856],{"class":54,"line":606},[52,46853,121],{"class":58},[52,46855,63],{"class":371},[52,46857,77],{"class":58},[43,46859,46861],{"className":222,"code":46860,"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,46862,46863,46873,46877,46891,46895,46908,46916,46920,46924],{"__ignoreMap":48},[52,46864,46865,46867,46869,46871],{"class":54,"line":55},[52,46866,232],{"class":231},[52,46868,9005],{"class":58},[52,46870,238],{"class":231},[52,46872,9010],{"class":73},[52,46874,46875],{"class":54,"line":80},[52,46876,597],{"emptyLinePlaceholder":171},[52,46878,46879,46881,46883,46885,46887,46889],{"class":54,"line":108},[52,46880,1721],{"class":231},[52,46882,1724],{"class":371},[52,46884,1727],{"class":231},[52,46886,1730],{"class":231},[52,46888,1733],{"class":66},[52,46890,1736],{"class":58},[52,46892,46893],{"class":54,"line":118},[52,46894,1751],{"class":58},[52,46896,46897,46899,46902,46904,46906],{"class":54,"line":594},[52,46898,1756],{"class":58},[52,46900,46901],{"class":73},"'Saturation'",[52,46903,26969],{"class":58},[52,46905,6165],{"class":371},[52,46907,5033],{"class":58},[52,46909,46910,46912,46914],{"class":54,"line":600},[52,46911,4501],{"class":58},[52,46913,2869],{"class":73},[52,46915,2129],{"class":58},[52,46917,46918],{"class":54,"line":606},[52,46919,4518],{"class":58},[52,46921,46922],{"class":54,"line":653},[52,46923,1773],{"class":58},[52,46925,46926],{"class":54,"line":662},[52,46927,1778],{"class":58},[156,46929,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46931},[46932,46933],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/saturation",{"title":46610,"description":46617},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":46940,"title":46941,"body":46942,"category":28546,"componentType":20623,"description":46949,"extension":168,"meta":47210,"navigation":171,"path":47211,"requiresChild":171,"seo":47212,"stem":47213,"__hash__":47214},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":46943,"toc":47206},[46944,46947,46950,46952,46954,46957,46959,47204],[11,46945,46941],{"id":46946},"sharpness",[15,46948,46949],{},"Adjust image sharpness using a convolution kernel",[26676,46951],{"component":46941},[23,46953,26680],{"id":21278},[26682,46955],{":props":46956},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,46958,26688],{"id":26687},[217,46960,46961,47006,47050,47094,47138],{":tabs":1543},[43,46962,46964],{"className":45,"code":46963,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,46965,46966,46974,46982,46990,46998],{"__ignoreMap":48},[52,46967,46968,46970,46972],{"class":54,"line":55},[52,46969,59],{"class":58},[52,46971,63],{"class":62},[52,46973,77],{"class":58},[52,46975,46976,46978,46980],{"class":54,"line":80},[52,46977,83],{"class":58},[52,46979,46941],{"class":62},[52,46981,77],{"class":58},[52,46983,46984,46986,46988],{"class":54,"line":108},[52,46985,2213],{"class":58},[52,46987,2216],{"class":62},[52,46989,105],{"class":58},[52,46991,46992,46994,46996],{"class":54,"line":118},[52,46993,2230],{"class":58},[52,46995,46941],{"class":62},[52,46997,77],{"class":58},[52,46999,47000,47002,47004],{"class":54,"line":594},[52,47001,121],{"class":58},[52,47003,63],{"class":62},[52,47005,77],{"class":58},[43,47007,47008],{"className":360,"code":46963,"language":362,"meta":48,"style":48},[31,47009,47010,47018,47026,47034,47042],{"__ignoreMap":48},[52,47011,47012,47014,47016],{"class":54,"line":55},[52,47013,59],{"class":58},[52,47015,63],{"class":371},[52,47017,77],{"class":58},[52,47019,47020,47022,47024],{"class":54,"line":80},[52,47021,83],{"class":58},[52,47023,46941],{"class":371},[52,47025,77],{"class":58},[52,47027,47028,47030,47032],{"class":54,"line":108},[52,47029,2213],{"class":58},[52,47031,2216],{"class":371},[52,47033,105],{"class":58},[52,47035,47036,47038,47040],{"class":54,"line":118},[52,47037,2230],{"class":58},[52,47039,46941],{"class":371},[52,47041,77],{"class":58},[52,47043,47044,47046,47048],{"class":54,"line":594},[52,47045,121],{"class":58},[52,47047,63],{"class":371},[52,47049,77],{"class":58},[43,47051,47052],{"className":2507,"code":46963,"language":2509,"meta":48,"style":48},[31,47053,47054,47062,47070,47078,47086],{"__ignoreMap":48},[52,47055,47056,47058,47060],{"class":54,"line":55},[52,47057,59],{"class":58},[52,47059,63],{"class":371},[52,47061,77],{"class":58},[52,47063,47064,47066,47068],{"class":54,"line":80},[52,47065,83],{"class":58},[52,47067,46941],{"class":371},[52,47069,77],{"class":58},[52,47071,47072,47074,47076],{"class":54,"line":108},[52,47073,2213],{"class":58},[52,47075,2216],{"class":371},[52,47077,105],{"class":58},[52,47079,47080,47082,47084],{"class":54,"line":118},[52,47081,2230],{"class":58},[52,47083,46941],{"class":371},[52,47085,77],{"class":58},[52,47087,47088,47090,47092],{"class":54,"line":594},[52,47089,121],{"class":58},[52,47091,63],{"class":371},[52,47093,77],{"class":58},[43,47095,47096],{"className":419,"code":46963,"language":420,"meta":48,"style":48},[31,47097,47098,47106,47114,47122,47130],{"__ignoreMap":48},[52,47099,47100,47102,47104],{"class":54,"line":55},[52,47101,59],{"class":58},[52,47103,63],{"class":371},[52,47105,77],{"class":58},[52,47107,47108,47110,47112],{"class":54,"line":80},[52,47109,83],{"class":58},[52,47111,46941],{"class":371},[52,47113,77],{"class":58},[52,47115,47116,47118,47120],{"class":54,"line":108},[52,47117,2213],{"class":58},[52,47119,2216],{"class":371},[52,47121,105],{"class":58},[52,47123,47124,47126,47128],{"class":54,"line":118},[52,47125,2230],{"class":58},[52,47127,46941],{"class":371},[52,47129,77],{"class":58},[52,47131,47132,47134,47136],{"class":54,"line":594},[52,47133,121],{"class":58},[52,47135,63],{"class":371},[52,47137,77],{"class":58},[43,47139,47141],{"className":222,"code":47140,"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,47142,47143,47153,47157,47171,47175,47184,47192,47196,47200],{"__ignoreMap":48},[52,47144,47145,47147,47149,47151],{"class":54,"line":55},[52,47146,232],{"class":231},[52,47148,9005],{"class":58},[52,47150,238],{"class":231},[52,47152,9010],{"class":73},[52,47154,47155],{"class":54,"line":80},[52,47156,597],{"emptyLinePlaceholder":171},[52,47158,47159,47161,47163,47165,47167,47169],{"class":54,"line":108},[52,47160,1721],{"class":231},[52,47162,1724],{"class":371},[52,47164,1727],{"class":231},[52,47166,1730],{"class":231},[52,47168,1733],{"class":66},[52,47170,1736],{"class":58},[52,47172,47173],{"class":54,"line":118},[52,47174,1751],{"class":58},[52,47176,47177,47179,47182],{"class":54,"line":594},[52,47178,1756],{"class":58},[52,47180,47181],{"class":73},"'Sharpness'",[52,47183,4496],{"class":58},[52,47185,47186,47188,47190],{"class":54,"line":600},[52,47187,4501],{"class":58},[52,47189,2869],{"class":73},[52,47191,2129],{"class":58},[52,47193,47194],{"class":54,"line":606},[52,47195,4518],{"class":58},[52,47197,47198],{"class":54,"line":653},[52,47199,1773],{"class":58},[52,47201,47202],{"class":54,"line":662},[52,47203,1778],{"class":58},[156,47205,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":47207},[47208,47209],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/sharpness",{"title":46941,"description":46949},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":47216,"title":47217,"body":47218,"category":29936,"componentType":20623,"description":47225,"extension":168,"meta":47590,"navigation":171,"path":47591,"requiresChild":171,"seo":47592,"stem":47593,"__hash__":47594},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":47219,"toc":47586},[47220,47223,47226,47228,47230,47233,47235,47584],[11,47221,47217],{"id":47222},"shatter",[15,47224,47225],{},"Broken glass effect with tectonic plate displacement",[26676,47227],{"component":47217},[23,47229,26680],{"id":21278},[26682,47231],{":props":47232},"[{\"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,47234,26688],{"id":26687},[217,47236,47237,47302,47374,47440,47510],{":tabs":1543},[43,47238,47240],{"className":45,"code":47239,"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,47241,47242,47250,47257,47266,47274,47278,47286,47294],{"__ignoreMap":48},[52,47243,47244,47246,47248],{"class":54,"line":55},[52,47245,59],{"class":58},[52,47247,63],{"class":62},[52,47249,77],{"class":58},[52,47251,47252,47254],{"class":54,"line":80},[52,47253,83],{"class":58},[52,47255,47256],{"class":62},"Shatter\n",[52,47258,47259,47261,47263],{"class":54,"line":108},[52,47260,17644],{"class":66},[52,47262,70],{"class":58},[52,47264,47265],{"class":73},"\"4\"\n",[52,47267,47268,47270,47272],{"class":54,"line":118},[52,47269,14675],{"class":66},[52,47271,70],{"class":58},[52,47273,36039],{"class":73},[52,47275,47276],{"class":54,"line":594},[52,47277,26724],{"class":58},[52,47279,47280,47282,47284],{"class":54,"line":600},[52,47281,2213],{"class":58},[52,47283,2216],{"class":62},[52,47285,105],{"class":58},[52,47287,47288,47290,47292],{"class":54,"line":606},[52,47289,2230],{"class":58},[52,47291,47217],{"class":62},[52,47293,77],{"class":58},[52,47295,47296,47298,47300],{"class":54,"line":653},[52,47297,121],{"class":58},[52,47299,63],{"class":62},[52,47301,77],{"class":58},[43,47303,47305],{"className":360,"code":47304,"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,47306,47307,47315,47321,47334,47346,47350,47358,47366],{"__ignoreMap":48},[52,47308,47309,47311,47313],{"class":54,"line":55},[52,47310,59],{"class":58},[52,47312,63],{"class":371},[52,47314,77],{"class":58},[52,47316,47317,47319],{"class":54,"line":80},[52,47318,83],{"class":58},[52,47320,47256],{"class":371},[52,47322,47323,47325,47327,47329,47332],{"class":54,"line":108},[52,47324,17755],{"class":66},[52,47326,70],{"class":231},[52,47328,723],{"class":58},[52,47330,47331],{"class":371},"4",[52,47333,729],{"class":58},[52,47335,47336,47338,47340,47342,47344],{"class":54,"line":118},[52,47337,7135],{"class":66},[52,47339,70],{"class":231},[52,47341,723],{"class":58},[52,47343,5737],{"class":371},[52,47345,729],{"class":58},[52,47347,47348],{"class":54,"line":594},[52,47349,26724],{"class":58},[52,47351,47352,47354,47356],{"class":54,"line":600},[52,47353,2213],{"class":58},[52,47355,2216],{"class":371},[52,47357,105],{"class":58},[52,47359,47360,47362,47364],{"class":54,"line":606},[52,47361,2230],{"class":58},[52,47363,47217],{"class":371},[52,47365,77],{"class":58},[52,47367,47368,47370,47372],{"class":54,"line":653},[52,47369,121],{"class":58},[52,47371,63],{"class":371},[52,47373,77],{"class":58},[43,47375,47376],{"className":2507,"code":47304,"language":2509,"meta":48,"style":48},[31,47377,47378,47386,47392,47402,47412,47416,47424,47432],{"__ignoreMap":48},[52,47379,47380,47382,47384],{"class":54,"line":55},[52,47381,59],{"class":58},[52,47383,63],{"class":371},[52,47385,77],{"class":58},[52,47387,47388,47390],{"class":54,"line":80},[52,47389,83],{"class":58},[52,47391,47256],{"class":371},[52,47393,47394,47396,47398,47400],{"class":54,"line":108},[52,47395,17755],{"class":66},[52,47397,24620],{"class":58},[52,47399,47331],{"class":371},[52,47401,729],{"class":58},[52,47403,47404,47406,47408,47410],{"class":54,"line":118},[52,47405,7135],{"class":66},[52,47407,24620],{"class":58},[52,47409,5737],{"class":371},[52,47411,729],{"class":58},[52,47413,47414],{"class":54,"line":594},[52,47415,26724],{"class":58},[52,47417,47418,47420,47422],{"class":54,"line":600},[52,47419,2213],{"class":58},[52,47421,2216],{"class":371},[52,47423,105],{"class":58},[52,47425,47426,47428,47430],{"class":54,"line":606},[52,47427,2230],{"class":58},[52,47429,47217],{"class":371},[52,47431,77],{"class":58},[52,47433,47434,47436,47438],{"class":54,"line":653},[52,47435,121],{"class":58},[52,47437,63],{"class":371},[52,47439,77],{"class":58},[43,47441,47442],{"className":419,"code":47304,"language":420,"meta":48,"style":48},[31,47443,47444,47452,47458,47470,47482,47486,47494,47502],{"__ignoreMap":48},[52,47445,47446,47448,47450],{"class":54,"line":55},[52,47447,59],{"class":58},[52,47449,63],{"class":371},[52,47451,77],{"class":58},[52,47453,47454,47456],{"class":54,"line":80},[52,47455,83],{"class":58},[52,47457,47256],{"class":371},[52,47459,47460,47462,47464,47466,47468],{"class":54,"line":108},[52,47461,17755],{"class":66},[52,47463,70],{"class":231},[52,47465,723],{"class":58},[52,47467,47331],{"class":371},[52,47469,729],{"class":58},[52,47471,47472,47474,47476,47478,47480],{"class":54,"line":118},[52,47473,7135],{"class":66},[52,47475,70],{"class":231},[52,47477,723],{"class":58},[52,47479,5737],{"class":371},[52,47481,729],{"class":58},[52,47483,47484],{"class":54,"line":594},[52,47485,26724],{"class":58},[52,47487,47488,47490,47492],{"class":54,"line":600},[52,47489,2213],{"class":58},[52,47491,2216],{"class":371},[52,47493,105],{"class":58},[52,47495,47496,47498,47500],{"class":54,"line":606},[52,47497,2230],{"class":58},[52,47499,47217],{"class":371},[52,47501,77],{"class":58},[52,47503,47504,47506,47508],{"class":54,"line":653},[52,47505,121],{"class":58},[52,47507,63],{"class":371},[52,47509,77],{"class":58},[43,47511,47513],{"className":222,"code":47512,"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,47514,47515,47525,47529,47543,47547,47564,47572,47576,47580],{"__ignoreMap":48},[52,47516,47517,47519,47521,47523],{"class":54,"line":55},[52,47518,232],{"class":231},[52,47520,9005],{"class":58},[52,47522,238],{"class":231},[52,47524,9010],{"class":73},[52,47526,47527],{"class":54,"line":80},[52,47528,597],{"emptyLinePlaceholder":171},[52,47530,47531,47533,47535,47537,47539,47541],{"class":54,"line":108},[52,47532,1721],{"class":231},[52,47534,1724],{"class":371},[52,47536,1727],{"class":231},[52,47538,1730],{"class":231},[52,47540,1733],{"class":66},[52,47542,1736],{"class":58},[52,47544,47545],{"class":54,"line":118},[52,47546,1751],{"class":58},[52,47548,47549,47551,47554,47556,47558,47560,47562],{"class":54,"line":594},[52,47550,1756],{"class":58},[52,47552,47553],{"class":73},"'Shatter'",[52,47555,26969],{"class":58},[52,47557,47331],{"class":371},[52,47559,4052],{"class":58},[52,47561,5737],{"class":371},[52,47563,5033],{"class":58},[52,47565,47566,47568,47570],{"class":54,"line":600},[52,47567,4501],{"class":58},[52,47569,2869],{"class":73},[52,47571,2129],{"class":58},[52,47573,47574],{"class":54,"line":606},[52,47575,4518],{"class":58},[52,47577,47578],{"class":54,"line":653},[52,47579,1773],{"class":58},[52,47581,47582],{"class":54,"line":662},[52,47583,1778],{"class":58},[156,47585,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47587},[47588,47589],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/shatter",{"title":47217,"description":47225},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":47596,"title":47597,"body":47598,"category":27535,"componentType":20617,"description":47605,"extension":168,"meta":47790,"navigation":171,"path":47791,"requiresChild":27538,"seo":47792,"stem":47793,"__hash__":47794},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":47599,"toc":47786},[47600,47603,47606,47608,47610,47613,47615,47784],[11,47601,47597],{"id":47602},"simplexnoise",[15,47604,47605],{},"Organic noise with animated movement",[26676,47607],{"component":47597},[23,47609,26680],{"id":21278},[26682,47611],{":props":47612},"[{\"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,47614,26688],{"id":26687},[217,47616,47617,47646,47674,47702,47730],{":tabs":1543},[43,47618,47620],{"className":45,"code":47619,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,47621,47622,47630,47638],{"__ignoreMap":48},[52,47623,47624,47626,47628],{"class":54,"line":55},[52,47625,59],{"class":58},[52,47627,63],{"class":62},[52,47629,77],{"class":58},[52,47631,47632,47634,47636],{"class":54,"line":80},[52,47633,83],{"class":58},[52,47635,47597],{"class":62},[52,47637,105],{"class":58},[52,47639,47640,47642,47644],{"class":54,"line":108},[52,47641,121],{"class":58},[52,47643,63],{"class":62},[52,47645,77],{"class":58},[43,47647,47648],{"className":360,"code":47619,"language":362,"meta":48,"style":48},[31,47649,47650,47658,47666],{"__ignoreMap":48},[52,47651,47652,47654,47656],{"class":54,"line":55},[52,47653,59],{"class":58},[52,47655,63],{"class":371},[52,47657,77],{"class":58},[52,47659,47660,47662,47664],{"class":54,"line":80},[52,47661,83],{"class":58},[52,47663,47597],{"class":371},[52,47665,105],{"class":58},[52,47667,47668,47670,47672],{"class":54,"line":108},[52,47669,121],{"class":58},[52,47671,63],{"class":371},[52,47673,77],{"class":58},[43,47675,47676],{"className":2507,"code":47619,"language":2509,"meta":48,"style":48},[31,47677,47678,47686,47694],{"__ignoreMap":48},[52,47679,47680,47682,47684],{"class":54,"line":55},[52,47681,59],{"class":58},[52,47683,63],{"class":371},[52,47685,77],{"class":58},[52,47687,47688,47690,47692],{"class":54,"line":80},[52,47689,83],{"class":58},[52,47691,47597],{"class":371},[52,47693,105],{"class":58},[52,47695,47696,47698,47700],{"class":54,"line":108},[52,47697,121],{"class":58},[52,47699,63],{"class":371},[52,47701,77],{"class":58},[43,47703,47704],{"className":419,"code":47619,"language":420,"meta":48,"style":48},[31,47705,47706,47714,47722],{"__ignoreMap":48},[52,47707,47708,47710,47712],{"class":54,"line":55},[52,47709,59],{"class":58},[52,47711,63],{"class":371},[52,47713,77],{"class":58},[52,47715,47716,47718,47720],{"class":54,"line":80},[52,47717,83],{"class":58},[52,47719,47597],{"class":371},[52,47721,105],{"class":58},[52,47723,47724,47726,47728],{"class":54,"line":108},[52,47725,121],{"class":58},[52,47727,63],{"class":371},[52,47729,77],{"class":58},[43,47731,47733],{"className":222,"code":47732,"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,47734,47735,47745,47749,47763,47767,47776,47780],{"__ignoreMap":48},[52,47736,47737,47739,47741,47743],{"class":54,"line":55},[52,47738,232],{"class":231},[52,47740,9005],{"class":58},[52,47742,238],{"class":231},[52,47744,9010],{"class":73},[52,47746,47747],{"class":54,"line":80},[52,47748,597],{"emptyLinePlaceholder":171},[52,47750,47751,47753,47755,47757,47759,47761],{"class":54,"line":108},[52,47752,1721],{"class":231},[52,47754,1724],{"class":371},[52,47756,1727],{"class":231},[52,47758,1730],{"class":231},[52,47760,1733],{"class":66},[52,47762,1736],{"class":58},[52,47764,47765],{"class":54,"line":118},[52,47766,1751],{"class":58},[52,47768,47769,47771,47774],{"class":54,"line":594},[52,47770,1756],{"class":58},[52,47772,47773],{"class":73},"'SimplexNoise'",[52,47775,2129],{"class":58},[52,47777,47778],{"class":54,"line":600},[52,47779,1773],{"class":58},[52,47781,47782],{"class":54,"line":606},[52,47783,1778],{"class":58},[156,47785,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":47787},[47788,47789],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/simplexnoise",{"title":47597,"description":47605},"docs/components/SimplexNoise","d0mO4mGGih-voEAS5386XslXJGaXC6JFX720cMm4EPY",{"id":47796,"title":47797,"body":47798,"category":27535,"componentType":20617,"description":47805,"extension":168,"meta":48035,"navigation":171,"path":48036,"requiresChild":27538,"seo":48037,"stem":48038,"__hash__":48039},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":47799,"toc":48031},[47800,47803,47806,47808,47810,47813,47815,48029],[11,47801,47797],{"id":47802},"sinewave",[15,47804,47805],{},"Animated wave with thickness and softness",[26676,47807],{"component":47797},[23,47809,26680],{"id":21278},[26682,47811],{":props":47812},"[{\"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,47814,26688],{"id":26687},[217,47816,47817,47857,47895,47933,47971],{":tabs":1543},[43,47818,47820],{"className":45,"code":47819,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,47821,47822,47830,47837,47845,47849],{"__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],{"class":54,"line":80},[52,47833,83],{"class":58},[52,47835,47836],{"class":62},"SineWave\n",[52,47838,47839,47841,47843],{"class":54,"line":108},[52,47840,7125],{"class":66},[52,47842,70],{"class":58},[52,47844,7081],{"class":73},[52,47846,47847],{"class":54,"line":118},[52,47848,1224],{"class":58},[52,47850,47851,47853,47855],{"class":54,"line":594},[52,47852,121],{"class":58},[52,47854,63],{"class":62},[52,47856,77],{"class":58},[43,47858,47859],{"className":360,"code":47819,"language":362,"meta":48,"style":48},[31,47860,47861,47869,47875,47883,47887],{"__ignoreMap":48},[52,47862,47863,47865,47867],{"class":54,"line":55},[52,47864,59],{"class":58},[52,47866,63],{"class":371},[52,47868,77],{"class":58},[52,47870,47871,47873],{"class":54,"line":80},[52,47872,83],{"class":58},[52,47874,47836],{"class":371},[52,47876,47877,47879,47881],{"class":54,"line":108},[52,47878,7125],{"class":66},[52,47880,70],{"class":231},[52,47882,7081],{"class":73},[52,47884,47885],{"class":54,"line":118},[52,47886,1224],{"class":58},[52,47888,47889,47891,47893],{"class":54,"line":594},[52,47890,121],{"class":58},[52,47892,63],{"class":371},[52,47894,77],{"class":58},[43,47896,47897],{"className":2507,"code":47819,"language":2509,"meta":48,"style":48},[31,47898,47899,47907,47913,47921,47925],{"__ignoreMap":48},[52,47900,47901,47903,47905],{"class":54,"line":55},[52,47902,59],{"class":58},[52,47904,63],{"class":371},[52,47906,77],{"class":58},[52,47908,47909,47911],{"class":54,"line":80},[52,47910,83],{"class":58},[52,47912,47836],{"class":371},[52,47914,47915,47917,47919],{"class":54,"line":108},[52,47916,7125],{"class":66},[52,47918,70],{"class":58},[52,47920,7081],{"class":73},[52,47922,47923],{"class":54,"line":118},[52,47924,1224],{"class":58},[52,47926,47927,47929,47931],{"class":54,"line":594},[52,47928,121],{"class":58},[52,47930,63],{"class":371},[52,47932,77],{"class":58},[43,47934,47935],{"className":419,"code":47819,"language":420,"meta":48,"style":48},[31,47936,47937,47945,47951,47959,47963],{"__ignoreMap":48},[52,47938,47939,47941,47943],{"class":54,"line":55},[52,47940,59],{"class":58},[52,47942,63],{"class":371},[52,47944,77],{"class":58},[52,47946,47947,47949],{"class":54,"line":80},[52,47948,83],{"class":58},[52,47950,47836],{"class":371},[52,47952,47953,47955,47957],{"class":54,"line":108},[52,47954,7125],{"class":66},[52,47956,70],{"class":231},[52,47958,7081],{"class":73},[52,47960,47961],{"class":54,"line":118},[52,47962,1224],{"class":58},[52,47964,47965,47967,47969],{"class":54,"line":594},[52,47966,121],{"class":58},[52,47968,63],{"class":371},[52,47970,77],{"class":58},[43,47972,47974],{"className":222,"code":47973,"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,47975,47976,47986,47990,48004,48008,48021,48025],{"__ignoreMap":48},[52,47977,47978,47980,47982,47984],{"class":54,"line":55},[52,47979,232],{"class":231},[52,47981,9005],{"class":58},[52,47983,238],{"class":231},[52,47985,9010],{"class":73},[52,47987,47988],{"class":54,"line":80},[52,47989,597],{"emptyLinePlaceholder":171},[52,47991,47992,47994,47996,47998,48000,48002],{"class":54,"line":108},[52,47993,1721],{"class":231},[52,47995,1724],{"class":371},[52,47997,1727],{"class":231},[52,47999,1730],{"class":231},[52,48001,1733],{"class":66},[52,48003,1736],{"class":58},[52,48005,48006],{"class":54,"line":118},[52,48007,1751],{"class":58},[52,48009,48010,48012,48015,48017,48019],{"class":54,"line":594},[52,48011,1756],{"class":58},[52,48013,48014],{"class":73},"'SineWave'",[52,48016,1762],{"class":58},[52,48018,7660],{"class":73},[52,48020,1768],{"class":58},[52,48022,48023],{"class":54,"line":600},[52,48024,1773],{"class":58},[52,48026,48027],{"class":54,"line":606},[52,48028,1778],{"class":58},[156,48030,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48032},[48033,48034],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/sinewave",{"title":47797,"description":47805},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":48041,"title":48042,"body":48043,"category":28546,"componentType":20623,"description":48050,"extension":168,"meta":48311,"navigation":171,"path":48312,"requiresChild":171,"seo":48313,"stem":48314,"__hash__":48315},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":48044,"toc":48307},[48045,48048,48051,48053,48055,48058,48060,48305],[11,48046,48042],{"id":48047},"solarize",[15,48049,48050],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26676,48052],{"component":48042},[23,48054,26680],{"id":21278},[26682,48056],{":props":48057},"[{\"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,48059,26688],{"id":26687},[217,48061,48062,48107,48151,48195,48239],{":tabs":1543},[43,48063,48065],{"className":45,"code":48064,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,48066,48067,48075,48083,48091,48099],{"__ignoreMap":48},[52,48068,48069,48071,48073],{"class":54,"line":55},[52,48070,59],{"class":58},[52,48072,63],{"class":62},[52,48074,77],{"class":58},[52,48076,48077,48079,48081],{"class":54,"line":80},[52,48078,83],{"class":58},[52,48080,48042],{"class":62},[52,48082,77],{"class":58},[52,48084,48085,48087,48089],{"class":54,"line":108},[52,48086,2213],{"class":58},[52,48088,2216],{"class":62},[52,48090,105],{"class":58},[52,48092,48093,48095,48097],{"class":54,"line":118},[52,48094,2230],{"class":58},[52,48096,48042],{"class":62},[52,48098,77],{"class":58},[52,48100,48101,48103,48105],{"class":54,"line":594},[52,48102,121],{"class":58},[52,48104,63],{"class":62},[52,48106,77],{"class":58},[43,48108,48109],{"className":360,"code":48064,"language":362,"meta":48,"style":48},[31,48110,48111,48119,48127,48135,48143],{"__ignoreMap":48},[52,48112,48113,48115,48117],{"class":54,"line":55},[52,48114,59],{"class":58},[52,48116,63],{"class":371},[52,48118,77],{"class":58},[52,48120,48121,48123,48125],{"class":54,"line":80},[52,48122,83],{"class":58},[52,48124,48042],{"class":371},[52,48126,77],{"class":58},[52,48128,48129,48131,48133],{"class":54,"line":108},[52,48130,2213],{"class":58},[52,48132,2216],{"class":371},[52,48134,105],{"class":58},[52,48136,48137,48139,48141],{"class":54,"line":118},[52,48138,2230],{"class":58},[52,48140,48042],{"class":371},[52,48142,77],{"class":58},[52,48144,48145,48147,48149],{"class":54,"line":594},[52,48146,121],{"class":58},[52,48148,63],{"class":371},[52,48150,77],{"class":58},[43,48152,48153],{"className":2507,"code":48064,"language":2509,"meta":48,"style":48},[31,48154,48155,48163,48171,48179,48187],{"__ignoreMap":48},[52,48156,48157,48159,48161],{"class":54,"line":55},[52,48158,59],{"class":58},[52,48160,63],{"class":371},[52,48162,77],{"class":58},[52,48164,48165,48167,48169],{"class":54,"line":80},[52,48166,83],{"class":58},[52,48168,48042],{"class":371},[52,48170,77],{"class":58},[52,48172,48173,48175,48177],{"class":54,"line":108},[52,48174,2213],{"class":58},[52,48176,2216],{"class":371},[52,48178,105],{"class":58},[52,48180,48181,48183,48185],{"class":54,"line":118},[52,48182,2230],{"class":58},[52,48184,48042],{"class":371},[52,48186,77],{"class":58},[52,48188,48189,48191,48193],{"class":54,"line":594},[52,48190,121],{"class":58},[52,48192,63],{"class":371},[52,48194,77],{"class":58},[43,48196,48197],{"className":419,"code":48064,"language":420,"meta":48,"style":48},[31,48198,48199,48207,48215,48223,48231],{"__ignoreMap":48},[52,48200,48201,48203,48205],{"class":54,"line":55},[52,48202,59],{"class":58},[52,48204,63],{"class":371},[52,48206,77],{"class":58},[52,48208,48209,48211,48213],{"class":54,"line":80},[52,48210,83],{"class":58},[52,48212,48042],{"class":371},[52,48214,77],{"class":58},[52,48216,48217,48219,48221],{"class":54,"line":108},[52,48218,2213],{"class":58},[52,48220,2216],{"class":371},[52,48222,105],{"class":58},[52,48224,48225,48227,48229],{"class":54,"line":118},[52,48226,2230],{"class":58},[52,48228,48042],{"class":371},[52,48230,77],{"class":58},[52,48232,48233,48235,48237],{"class":54,"line":594},[52,48234,121],{"class":58},[52,48236,63],{"class":371},[52,48238,77],{"class":58},[43,48240,48242],{"className":222,"code":48241,"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,48243,48244,48254,48258,48272,48276,48285,48293,48297,48301],{"__ignoreMap":48},[52,48245,48246,48248,48250,48252],{"class":54,"line":55},[52,48247,232],{"class":231},[52,48249,9005],{"class":58},[52,48251,238],{"class":231},[52,48253,9010],{"class":73},[52,48255,48256],{"class":54,"line":80},[52,48257,597],{"emptyLinePlaceholder":171},[52,48259,48260,48262,48264,48266,48268,48270],{"class":54,"line":108},[52,48261,1721],{"class":231},[52,48263,1724],{"class":371},[52,48265,1727],{"class":231},[52,48267,1730],{"class":231},[52,48269,1733],{"class":66},[52,48271,1736],{"class":58},[52,48273,48274],{"class":54,"line":118},[52,48275,1751],{"class":58},[52,48277,48278,48280,48283],{"class":54,"line":594},[52,48279,1756],{"class":58},[52,48281,48282],{"class":73},"'Solarize'",[52,48284,4496],{"class":58},[52,48286,48287,48289,48291],{"class":54,"line":600},[52,48288,4501],{"class":58},[52,48290,2869],{"class":73},[52,48292,2129],{"class":58},[52,48294,48295],{"class":54,"line":606},[52,48296,4518],{"class":58},[52,48298,48299],{"class":54,"line":653},[52,48300,1773],{"class":58},[52,48302,48303],{"class":54,"line":662},[52,48304,1778],{"class":58},[156,48306,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":48308},[48309,48310],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/solarize",{"title":48042,"description":48050},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":48317,"title":1571,"body":48318,"category":27535,"componentType":20617,"description":48325,"extension":168,"meta":48555,"navigation":171,"path":48556,"requiresChild":27538,"seo":48557,"stem":48558,"__hash__":48559},"components/docs/components/SolidColor.md",{"type":8,"value":48319,"toc":48551},[48320,48323,48326,48328,48330,48333,48335,48549],[11,48321,1571],{"id":48322},"solidcolor",[15,48324,48325],{},"Fill the canvas with a single solid color",[26676,48327],{"component":1571},[23,48329,26680],{"id":21278},[26682,48331],{":props":48332},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,48334,26688],{"id":26687},[217,48336,48337,48378,48416,48454,48492],{":tabs":1543},[43,48338,48340],{"className":45,"code":48339,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,48341,48342,48350,48357,48366,48370],{"__ignoreMap":48},[52,48343,48344,48346,48348],{"class":54,"line":55},[52,48345,59],{"class":58},[52,48347,63],{"class":62},[52,48349,77],{"class":58},[52,48351,48352,48354],{"class":54,"line":80},[52,48353,83],{"class":58},[52,48355,48356],{"class":62},"SolidColor\n",[52,48358,48359,48361,48363],{"class":54,"line":108},[52,48360,7125],{"class":66},[52,48362,70],{"class":58},[52,48364,48365],{"class":73},"\"#5b18ca\"\n",[52,48367,48368],{"class":54,"line":118},[52,48369,1224],{"class":58},[52,48371,48372,48374,48376],{"class":54,"line":594},[52,48373,121],{"class":58},[52,48375,63],{"class":62},[52,48377,77],{"class":58},[43,48379,48380],{"className":360,"code":48339,"language":362,"meta":48,"style":48},[31,48381,48382,48390,48396,48404,48408],{"__ignoreMap":48},[52,48383,48384,48386,48388],{"class":54,"line":55},[52,48385,59],{"class":58},[52,48387,63],{"class":371},[52,48389,77],{"class":58},[52,48391,48392,48394],{"class":54,"line":80},[52,48393,83],{"class":58},[52,48395,48356],{"class":371},[52,48397,48398,48400,48402],{"class":54,"line":108},[52,48399,7125],{"class":66},[52,48401,70],{"class":231},[52,48403,48365],{"class":73},[52,48405,48406],{"class":54,"line":118},[52,48407,1224],{"class":58},[52,48409,48410,48412,48414],{"class":54,"line":594},[52,48411,121],{"class":58},[52,48413,63],{"class":371},[52,48415,77],{"class":58},[43,48417,48418],{"className":2507,"code":48339,"language":2509,"meta":48,"style":48},[31,48419,48420,48428,48434,48442,48446],{"__ignoreMap":48},[52,48421,48422,48424,48426],{"class":54,"line":55},[52,48423,59],{"class":58},[52,48425,63],{"class":371},[52,48427,77],{"class":58},[52,48429,48430,48432],{"class":54,"line":80},[52,48431,83],{"class":58},[52,48433,48356],{"class":371},[52,48435,48436,48438,48440],{"class":54,"line":108},[52,48437,7125],{"class":66},[52,48439,70],{"class":58},[52,48441,48365],{"class":73},[52,48443,48444],{"class":54,"line":118},[52,48445,1224],{"class":58},[52,48447,48448,48450,48452],{"class":54,"line":594},[52,48449,121],{"class":58},[52,48451,63],{"class":371},[52,48453,77],{"class":58},[43,48455,48456],{"className":419,"code":48339,"language":420,"meta":48,"style":48},[31,48457,48458,48466,48472,48480,48484],{"__ignoreMap":48},[52,48459,48460,48462,48464],{"class":54,"line":55},[52,48461,59],{"class":58},[52,48463,63],{"class":371},[52,48465,77],{"class":58},[52,48467,48468,48470],{"class":54,"line":80},[52,48469,83],{"class":58},[52,48471,48356],{"class":371},[52,48473,48474,48476,48478],{"class":54,"line":108},[52,48475,7125],{"class":66},[52,48477,70],{"class":231},[52,48479,48365],{"class":73},[52,48481,48482],{"class":54,"line":118},[52,48483,1224],{"class":58},[52,48485,48486,48488,48490],{"class":54,"line":594},[52,48487,121],{"class":58},[52,48489,63],{"class":371},[52,48491,77],{"class":58},[43,48493,48495],{"className":222,"code":48494,"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,48496,48497,48507,48511,48525,48529,48541,48545],{"__ignoreMap":48},[52,48498,48499,48501,48503,48505],{"class":54,"line":55},[52,48500,232],{"class":231},[52,48502,9005],{"class":58},[52,48504,238],{"class":231},[52,48506,9010],{"class":73},[52,48508,48509],{"class":54,"line":80},[52,48510,597],{"emptyLinePlaceholder":171},[52,48512,48513,48515,48517,48519,48521,48523],{"class":54,"line":108},[52,48514,1721],{"class":231},[52,48516,1724],{"class":371},[52,48518,1727],{"class":231},[52,48520,1730],{"class":231},[52,48522,1733],{"class":66},[52,48524,1736],{"class":58},[52,48526,48527],{"class":54,"line":118},[52,48528,1751],{"class":58},[52,48530,48531,48533,48535,48537,48539],{"class":54,"line":594},[52,48532,1756],{"class":58},[52,48534,1759],{"class":73},[52,48536,1762],{"class":58},[52,48538,1765],{"class":73},[52,48540,1768],{"class":58},[52,48542,48543],{"class":54,"line":600},[52,48544,1773],{"class":58},[52,48546,48547],{"class":54,"line":606},[52,48548,1778],{"class":58},[156,48550,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48552},[48553,48554],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/solidcolor",{"title":1571,"description":48325},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":48561,"title":48562,"body":48563,"category":28880,"componentType":20623,"description":48570,"extension":168,"meta":48887,"navigation":171,"path":48888,"requiresChild":171,"seo":48889,"stem":48890,"__hash__":48891},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":48564,"toc":48883},[48565,48568,48571,48573,48575,48578,48580,48881],[11,48566,48562],{"id":48567},"spherize",[15,48569,48570],{},"Map content onto a 3D sphere surface with depth distortion",[26676,48572],{"component":48562},[23,48574,26680],{"id":21278},[26682,48576],{":props":48577},"[{\"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,48579,26688],{"id":26687},[217,48581,48582,48638,48697,48753,48811],{":tabs":1543},[43,48583,48585],{"className":45,"code":48584,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,48586,48587,48595,48602,48610,48614,48622,48630],{"__ignoreMap":48},[52,48588,48589,48591,48593],{"class":54,"line":55},[52,48590,59],{"class":58},[52,48592,63],{"class":62},[52,48594,77],{"class":58},[52,48596,48597,48599],{"class":54,"line":80},[52,48598,83],{"class":58},[52,48600,48601],{"class":62},"Spherize\n",[52,48603,48604,48606,48608],{"class":54,"line":108},[52,48605,14675],{"class":66},[52,48607,70],{"class":58},[52,48609,28602],{"class":73},[52,48611,48612],{"class":54,"line":118},[52,48613,26724],{"class":58},[52,48615,48616,48618,48620],{"class":54,"line":594},[52,48617,2213],{"class":58},[52,48619,2216],{"class":62},[52,48621,105],{"class":58},[52,48623,48624,48626,48628],{"class":54,"line":600},[52,48625,2230],{"class":58},[52,48627,48562],{"class":62},[52,48629,77],{"class":58},[52,48631,48632,48634,48636],{"class":54,"line":606},[52,48633,121],{"class":58},[52,48635,63],{"class":62},[52,48637,77],{"class":58},[43,48639,48641],{"className":360,"code":48640,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,48642,48643,48651,48657,48669,48673,48681,48689],{"__ignoreMap":48},[52,48644,48645,48647,48649],{"class":54,"line":55},[52,48646,59],{"class":58},[52,48648,63],{"class":371},[52,48650,77],{"class":58},[52,48652,48653,48655],{"class":54,"line":80},[52,48654,83],{"class":58},[52,48656,48601],{"class":371},[52,48658,48659,48661,48663,48665,48667],{"class":54,"line":108},[52,48660,7135],{"class":66},[52,48662,70],{"class":231},[52,48664,723],{"class":58},[52,48666,6165],{"class":371},[52,48668,729],{"class":58},[52,48670,48671],{"class":54,"line":118},[52,48672,26724],{"class":58},[52,48674,48675,48677,48679],{"class":54,"line":594},[52,48676,2213],{"class":58},[52,48678,2216],{"class":371},[52,48680,105],{"class":58},[52,48682,48683,48685,48687],{"class":54,"line":600},[52,48684,2230],{"class":58},[52,48686,48562],{"class":371},[52,48688,77],{"class":58},[52,48690,48691,48693,48695],{"class":54,"line":606},[52,48692,121],{"class":58},[52,48694,63],{"class":371},[52,48696,77],{"class":58},[43,48698,48699],{"className":2507,"code":48640,"language":2509,"meta":48,"style":48},[31,48700,48701,48709,48715,48725,48729,48737,48745],{"__ignoreMap":48},[52,48702,48703,48705,48707],{"class":54,"line":55},[52,48704,59],{"class":58},[52,48706,63],{"class":371},[52,48708,77],{"class":58},[52,48710,48711,48713],{"class":54,"line":80},[52,48712,83],{"class":58},[52,48714,48601],{"class":371},[52,48716,48717,48719,48721,48723],{"class":54,"line":108},[52,48718,7135],{"class":66},[52,48720,24620],{"class":58},[52,48722,6165],{"class":371},[52,48724,729],{"class":58},[52,48726,48727],{"class":54,"line":118},[52,48728,26724],{"class":58},[52,48730,48731,48733,48735],{"class":54,"line":594},[52,48732,2213],{"class":58},[52,48734,2216],{"class":371},[52,48736,105],{"class":58},[52,48738,48739,48741,48743],{"class":54,"line":600},[52,48740,2230],{"class":58},[52,48742,48562],{"class":371},[52,48744,77],{"class":58},[52,48746,48747,48749,48751],{"class":54,"line":606},[52,48748,121],{"class":58},[52,48750,63],{"class":371},[52,48752,77],{"class":58},[43,48754,48755],{"className":419,"code":48640,"language":420,"meta":48,"style":48},[31,48756,48757,48765,48771,48783,48787,48795,48803],{"__ignoreMap":48},[52,48758,48759,48761,48763],{"class":54,"line":55},[52,48760,59],{"class":58},[52,48762,63],{"class":371},[52,48764,77],{"class":58},[52,48766,48767,48769],{"class":54,"line":80},[52,48768,83],{"class":58},[52,48770,48601],{"class":371},[52,48772,48773,48775,48777,48779,48781],{"class":54,"line":108},[52,48774,7135],{"class":66},[52,48776,70],{"class":231},[52,48778,723],{"class":58},[52,48780,6165],{"class":371},[52,48782,729],{"class":58},[52,48784,48785],{"class":54,"line":118},[52,48786,26724],{"class":58},[52,48788,48789,48791,48793],{"class":54,"line":594},[52,48790,2213],{"class":58},[52,48792,2216],{"class":371},[52,48794,105],{"class":58},[52,48796,48797,48799,48801],{"class":54,"line":600},[52,48798,2230],{"class":58},[52,48800,48562],{"class":371},[52,48802,77],{"class":58},[52,48804,48805,48807,48809],{"class":54,"line":606},[52,48806,121],{"class":58},[52,48808,63],{"class":371},[52,48810,77],{"class":58},[43,48812,48814],{"className":222,"code":48813,"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,48815,48816,48826,48830,48844,48848,48861,48869,48873,48877],{"__ignoreMap":48},[52,48817,48818,48820,48822,48824],{"class":54,"line":55},[52,48819,232],{"class":231},[52,48821,9005],{"class":58},[52,48823,238],{"class":231},[52,48825,9010],{"class":73},[52,48827,48828],{"class":54,"line":80},[52,48829,597],{"emptyLinePlaceholder":171},[52,48831,48832,48834,48836,48838,48840,48842],{"class":54,"line":108},[52,48833,1721],{"class":231},[52,48835,1724],{"class":371},[52,48837,1727],{"class":231},[52,48839,1730],{"class":231},[52,48841,1733],{"class":66},[52,48843,1736],{"class":58},[52,48845,48846],{"class":54,"line":118},[52,48847,1751],{"class":58},[52,48849,48850,48852,48855,48857,48859],{"class":54,"line":594},[52,48851,1756],{"class":58},[52,48853,48854],{"class":73},"'Spherize'",[52,48856,5028],{"class":58},[52,48858,6165],{"class":371},[52,48860,5033],{"class":58},[52,48862,48863,48865,48867],{"class":54,"line":600},[52,48864,4501],{"class":58},[52,48866,2869],{"class":73},[52,48868,2129],{"class":58},[52,48870,48871],{"class":54,"line":606},[52,48872,4518],{"class":58},[52,48874,48875],{"class":54,"line":653},[52,48876,1773],{"class":58},[52,48878,48879],{"class":54,"line":662},[52,48880,1778],{"class":58},[156,48882,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48884},[48885,48886],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/spherize",{"title":48562,"description":48570},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":48893,"title":48894,"body":48895,"category":27535,"componentType":20617,"description":48902,"extension":168,"meta":49087,"navigation":171,"path":49088,"requiresChild":27538,"seo":49089,"stem":49090,"__hash__":49091},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":48896,"toc":49083},[48897,48900,48903,48905,48907,48910,48912,49081],[11,48898,48894],{"id":48899},"spiral",[15,48901,48902],{},"Rotating spiral pattern with animated movement",[26676,48904],{"component":48894},[23,48906,26680],{"id":21278},[26682,48908],{":props":48909},"[{\"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,48911,26688],{"id":26687},[217,48913,48914,48943,48971,48999,49027],{":tabs":1543},[43,48915,48917],{"className":45,"code":48916,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,48918,48919,48927,48935],{"__ignoreMap":48},[52,48920,48921,48923,48925],{"class":54,"line":55},[52,48922,59],{"class":58},[52,48924,63],{"class":62},[52,48926,77],{"class":58},[52,48928,48929,48931,48933],{"class":54,"line":80},[52,48930,83],{"class":58},[52,48932,48894],{"class":62},[52,48934,105],{"class":58},[52,48936,48937,48939,48941],{"class":54,"line":108},[52,48938,121],{"class":58},[52,48940,63],{"class":62},[52,48942,77],{"class":58},[43,48944,48945],{"className":360,"code":48916,"language":362,"meta":48,"style":48},[31,48946,48947,48955,48963],{"__ignoreMap":48},[52,48948,48949,48951,48953],{"class":54,"line":55},[52,48950,59],{"class":58},[52,48952,63],{"class":371},[52,48954,77],{"class":58},[52,48956,48957,48959,48961],{"class":54,"line":80},[52,48958,83],{"class":58},[52,48960,48894],{"class":371},[52,48962,105],{"class":58},[52,48964,48965,48967,48969],{"class":54,"line":108},[52,48966,121],{"class":58},[52,48968,63],{"class":371},[52,48970,77],{"class":58},[43,48972,48973],{"className":2507,"code":48916,"language":2509,"meta":48,"style":48},[31,48974,48975,48983,48991],{"__ignoreMap":48},[52,48976,48977,48979,48981],{"class":54,"line":55},[52,48978,59],{"class":58},[52,48980,63],{"class":371},[52,48982,77],{"class":58},[52,48984,48985,48987,48989],{"class":54,"line":80},[52,48986,83],{"class":58},[52,48988,48894],{"class":371},[52,48990,105],{"class":58},[52,48992,48993,48995,48997],{"class":54,"line":108},[52,48994,121],{"class":58},[52,48996,63],{"class":371},[52,48998,77],{"class":58},[43,49000,49001],{"className":419,"code":48916,"language":420,"meta":48,"style":48},[31,49002,49003,49011,49019],{"__ignoreMap":48},[52,49004,49005,49007,49009],{"class":54,"line":55},[52,49006,59],{"class":58},[52,49008,63],{"class":371},[52,49010,77],{"class":58},[52,49012,49013,49015,49017],{"class":54,"line":80},[52,49014,83],{"class":58},[52,49016,48894],{"class":371},[52,49018,105],{"class":58},[52,49020,49021,49023,49025],{"class":54,"line":108},[52,49022,121],{"class":58},[52,49024,63],{"class":371},[52,49026,77],{"class":58},[43,49028,49030],{"className":222,"code":49029,"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,49031,49032,49042,49046,49060,49064,49073,49077],{"__ignoreMap":48},[52,49033,49034,49036,49038,49040],{"class":54,"line":55},[52,49035,232],{"class":231},[52,49037,9005],{"class":58},[52,49039,238],{"class":231},[52,49041,9010],{"class":73},[52,49043,49044],{"class":54,"line":80},[52,49045,597],{"emptyLinePlaceholder":171},[52,49047,49048,49050,49052,49054,49056,49058],{"class":54,"line":108},[52,49049,1721],{"class":231},[52,49051,1724],{"class":371},[52,49053,1727],{"class":231},[52,49055,1730],{"class":231},[52,49057,1733],{"class":66},[52,49059,1736],{"class":58},[52,49061,49062],{"class":54,"line":118},[52,49063,1751],{"class":58},[52,49065,49066,49068,49071],{"class":54,"line":594},[52,49067,1756],{"class":58},[52,49069,49070],{"class":73},"'Spiral'",[52,49072,2129],{"class":58},[52,49074,49075],{"class":54,"line":600},[52,49076,1773],{"class":58},[52,49078,49079],{"class":54,"line":606},[52,49080,1778],{"class":58},[156,49082,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":49084},[49085,49086],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/spiral",{"title":48894,"description":48902},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":49093,"title":49094,"body":49095,"category":30502,"componentType":20617,"description":49102,"extension":168,"meta":49379,"navigation":171,"path":49380,"requiresChild":27538,"seo":49381,"stem":49382,"__hash__":49383},"components/docs/components/Star.md","Star",{"type":8,"value":49096,"toc":49375},[49097,49100,49103,49105,49107,49110,49112,49373],[11,49098,49094],{"id":49099},"star",[15,49101,49102],{},"Classic star polygon with straight sides and sharp pointed tips",[26676,49104],{"component":49094},[23,49106,26680],{"id":21278},[26682,49108],{":props":49109},"[{\"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,49111,26688],{"id":26687},[217,49113,49114,49162,49213,49261,49311],{":tabs":1543},[43,49115,49117],{"className":45,"code":49116,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,49118,49119,49127,49134,49142,49150,49154],{"__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],{"class":54,"line":80},[52,49130,83],{"class":58},[52,49132,49133],{"class":62},"Star\n",[52,49135,49136,49138,49140],{"class":54,"line":108},[52,49137,7125],{"class":66},[52,49139,70],{"class":58},[52,49141,7081],{"class":73},[52,49143,49144,49146,49148],{"class":54,"line":118},[52,49145,14675],{"class":66},[52,49147,70],{"class":58},[52,49149,36039],{"class":73},[52,49151,49152],{"class":54,"line":594},[52,49153,1224],{"class":58},[52,49155,49156,49158,49160],{"class":54,"line":600},[52,49157,121],{"class":58},[52,49159,63],{"class":62},[52,49161,77],{"class":58},[43,49163,49165],{"className":360,"code":49164,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,49166,49167,49175,49181,49189,49201,49205],{"__ignoreMap":48},[52,49168,49169,49171,49173],{"class":54,"line":55},[52,49170,59],{"class":58},[52,49172,63],{"class":371},[52,49174,77],{"class":58},[52,49176,49177,49179],{"class":54,"line":80},[52,49178,83],{"class":58},[52,49180,49133],{"class":371},[52,49182,49183,49185,49187],{"class":54,"line":108},[52,49184,7125],{"class":66},[52,49186,70],{"class":231},[52,49188,7081],{"class":73},[52,49190,49191,49193,49195,49197,49199],{"class":54,"line":118},[52,49192,7135],{"class":66},[52,49194,70],{"class":231},[52,49196,723],{"class":58},[52,49198,5737],{"class":371},[52,49200,729],{"class":58},[52,49202,49203],{"class":54,"line":594},[52,49204,1224],{"class":58},[52,49206,49207,49209,49211],{"class":54,"line":600},[52,49208,121],{"class":58},[52,49210,63],{"class":371},[52,49212,77],{"class":58},[43,49214,49215],{"className":2507,"code":49164,"language":2509,"meta":48,"style":48},[31,49216,49217,49225,49231,49239,49249,49253],{"__ignoreMap":48},[52,49218,49219,49221,49223],{"class":54,"line":55},[52,49220,59],{"class":58},[52,49222,63],{"class":371},[52,49224,77],{"class":58},[52,49226,49227,49229],{"class":54,"line":80},[52,49228,83],{"class":58},[52,49230,49133],{"class":371},[52,49232,49233,49235,49237],{"class":54,"line":108},[52,49234,7125],{"class":66},[52,49236,70],{"class":58},[52,49238,7081],{"class":73},[52,49240,49241,49243,49245,49247],{"class":54,"line":118},[52,49242,7135],{"class":66},[52,49244,24620],{"class":58},[52,49246,5737],{"class":371},[52,49248,729],{"class":58},[52,49250,49251],{"class":54,"line":594},[52,49252,1224],{"class":58},[52,49254,49255,49257,49259],{"class":54,"line":600},[52,49256,121],{"class":58},[52,49258,63],{"class":371},[52,49260,77],{"class":58},[43,49262,49263],{"className":419,"code":49164,"language":420,"meta":48,"style":48},[31,49264,49265,49273,49279,49287,49299,49303],{"__ignoreMap":48},[52,49266,49267,49269,49271],{"class":54,"line":55},[52,49268,59],{"class":58},[52,49270,63],{"class":371},[52,49272,77],{"class":58},[52,49274,49275,49277],{"class":54,"line":80},[52,49276,83],{"class":58},[52,49278,49133],{"class":371},[52,49280,49281,49283,49285],{"class":54,"line":108},[52,49282,7125],{"class":66},[52,49284,70],{"class":231},[52,49286,7081],{"class":73},[52,49288,49289,49291,49293,49295,49297],{"class":54,"line":118},[52,49290,7135],{"class":66},[52,49292,70],{"class":231},[52,49294,723],{"class":58},[52,49296,5737],{"class":371},[52,49298,729],{"class":58},[52,49300,49301],{"class":54,"line":594},[52,49302,1224],{"class":58},[52,49304,49305,49307,49309],{"class":54,"line":600},[52,49306,121],{"class":58},[52,49308,63],{"class":371},[52,49310,77],{"class":58},[43,49312,49314],{"className":222,"code":49313,"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,49315,49316,49326,49330,49344,49348,49365,49369],{"__ignoreMap":48},[52,49317,49318,49320,49322,49324],{"class":54,"line":55},[52,49319,232],{"class":231},[52,49321,9005],{"class":58},[52,49323,238],{"class":231},[52,49325,9010],{"class":73},[52,49327,49328],{"class":54,"line":80},[52,49329,597],{"emptyLinePlaceholder":171},[52,49331,49332,49334,49336,49338,49340,49342],{"class":54,"line":108},[52,49333,1721],{"class":231},[52,49335,1724],{"class":371},[52,49337,1727],{"class":231},[52,49339,1730],{"class":231},[52,49341,1733],{"class":66},[52,49343,1736],{"class":58},[52,49345,49346],{"class":54,"line":118},[52,49347,1751],{"class":58},[52,49349,49350,49352,49355,49357,49359,49361,49363],{"class":54,"line":594},[52,49351,1756],{"class":58},[52,49353,49354],{"class":73},"'Star'",[52,49356,1762],{"class":58},[52,49358,7660],{"class":73},[52,49360,4052],{"class":58},[52,49362,5737],{"class":371},[52,49364,1768],{"class":58},[52,49366,49367],{"class":54,"line":600},[52,49368,1773],{"class":58},[52,49370,49371],{"class":54,"line":606},[52,49372,1778],{"class":58},[156,49374,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49376},[49377,49378],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/star",{"title":49094,"description":49102},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":49385,"title":49386,"body":49387,"category":27535,"componentType":20617,"description":49394,"extension":168,"meta":49579,"navigation":171,"path":49580,"requiresChild":27538,"seo":49581,"stem":49582,"__hash__":49583},"components/docs/components/Strands.md","Strands",{"type":8,"value":49388,"toc":49575},[49389,49392,49395,49397,49399,49402,49404,49573],[11,49390,49386],{"id":49391},"strands",[15,49393,49394],{},"Procedural wavy strands with layered animation",[26676,49396],{"component":49386},[23,49398,26680],{"id":21278},[26682,49400],{":props":49401},"[{\"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,49403,26688],{"id":26687},[217,49405,49406,49435,49463,49491,49519],{":tabs":1543},[43,49407,49409],{"className":45,"code":49408,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,49410,49411,49419,49427],{"__ignoreMap":48},[52,49412,49413,49415,49417],{"class":54,"line":55},[52,49414,59],{"class":58},[52,49416,63],{"class":62},[52,49418,77],{"class":58},[52,49420,49421,49423,49425],{"class":54,"line":80},[52,49422,83],{"class":58},[52,49424,49386],{"class":62},[52,49426,105],{"class":58},[52,49428,49429,49431,49433],{"class":54,"line":108},[52,49430,121],{"class":58},[52,49432,63],{"class":62},[52,49434,77],{"class":58},[43,49436,49437],{"className":360,"code":49408,"language":362,"meta":48,"style":48},[31,49438,49439,49447,49455],{"__ignoreMap":48},[52,49440,49441,49443,49445],{"class":54,"line":55},[52,49442,59],{"class":58},[52,49444,63],{"class":371},[52,49446,77],{"class":58},[52,49448,49449,49451,49453],{"class":54,"line":80},[52,49450,83],{"class":58},[52,49452,49386],{"class":371},[52,49454,105],{"class":58},[52,49456,49457,49459,49461],{"class":54,"line":108},[52,49458,121],{"class":58},[52,49460,63],{"class":371},[52,49462,77],{"class":58},[43,49464,49465],{"className":2507,"code":49408,"language":2509,"meta":48,"style":48},[31,49466,49467,49475,49483],{"__ignoreMap":48},[52,49468,49469,49471,49473],{"class":54,"line":55},[52,49470,59],{"class":58},[52,49472,63],{"class":371},[52,49474,77],{"class":58},[52,49476,49477,49479,49481],{"class":54,"line":80},[52,49478,83],{"class":58},[52,49480,49386],{"class":371},[52,49482,105],{"class":58},[52,49484,49485,49487,49489],{"class":54,"line":108},[52,49486,121],{"class":58},[52,49488,63],{"class":371},[52,49490,77],{"class":58},[43,49492,49493],{"className":419,"code":49408,"language":420,"meta":48,"style":48},[31,49494,49495,49503,49511],{"__ignoreMap":48},[52,49496,49497,49499,49501],{"class":54,"line":55},[52,49498,59],{"class":58},[52,49500,63],{"class":371},[52,49502,77],{"class":58},[52,49504,49505,49507,49509],{"class":54,"line":80},[52,49506,83],{"class":58},[52,49508,49386],{"class":371},[52,49510,105],{"class":58},[52,49512,49513,49515,49517],{"class":54,"line":108},[52,49514,121],{"class":58},[52,49516,63],{"class":371},[52,49518,77],{"class":58},[43,49520,49522],{"className":222,"code":49521,"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,49523,49524,49534,49538,49552,49556,49565,49569],{"__ignoreMap":48},[52,49525,49526,49528,49530,49532],{"class":54,"line":55},[52,49527,232],{"class":231},[52,49529,9005],{"class":58},[52,49531,238],{"class":231},[52,49533,9010],{"class":73},[52,49535,49536],{"class":54,"line":80},[52,49537,597],{"emptyLinePlaceholder":171},[52,49539,49540,49542,49544,49546,49548,49550],{"class":54,"line":108},[52,49541,1721],{"class":231},[52,49543,1724],{"class":371},[52,49545,1727],{"class":231},[52,49547,1730],{"class":231},[52,49549,1733],{"class":66},[52,49551,1736],{"class":58},[52,49553,49554],{"class":54,"line":118},[52,49555,1751],{"class":58},[52,49557,49558,49560,49563],{"class":54,"line":594},[52,49559,1756],{"class":58},[52,49561,49562],{"class":73},"'Strands'",[52,49564,2129],{"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,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":49576},[49577,49578],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/strands",{"title":49386,"description":49394},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":49585,"title":49586,"body":49587,"category":28880,"componentType":20623,"description":49593,"extension":168,"meta":49854,"navigation":171,"path":49855,"requiresChild":171,"seo":49856,"stem":49857,"__hash__":49858},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":49588,"toc":49850},[49589,49591,49594,49596,49598,49601,49603,49848],[11,49590,49586],{"id":13420},[15,49592,49593],{},"Stretch content towards a direction from a center point",[26676,49595],{"component":49586},[23,49597,26680],{"id":21278},[26682,49599],{":props":49600},"[{\"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,49602,26688],{"id":26687},[217,49604,49605,49650,49694,49738,49782],{":tabs":1543},[43,49606,49608],{"className":45,"code":49607,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,49609,49610,49618,49626,49634,49642],{"__ignoreMap":48},[52,49611,49612,49614,49616],{"class":54,"line":55},[52,49613,59],{"class":58},[52,49615,63],{"class":62},[52,49617,77],{"class":58},[52,49619,49620,49622,49624],{"class":54,"line":80},[52,49621,83],{"class":58},[52,49623,49586],{"class":62},[52,49625,77],{"class":58},[52,49627,49628,49630,49632],{"class":54,"line":108},[52,49629,2213],{"class":58},[52,49631,2216],{"class":62},[52,49633,105],{"class":58},[52,49635,49636,49638,49640],{"class":54,"line":118},[52,49637,2230],{"class":58},[52,49639,49586],{"class":62},[52,49641,77],{"class":58},[52,49643,49644,49646,49648],{"class":54,"line":594},[52,49645,121],{"class":58},[52,49647,63],{"class":62},[52,49649,77],{"class":58},[43,49651,49652],{"className":360,"code":49607,"language":362,"meta":48,"style":48},[31,49653,49654,49662,49670,49678,49686],{"__ignoreMap":48},[52,49655,49656,49658,49660],{"class":54,"line":55},[52,49657,59],{"class":58},[52,49659,63],{"class":371},[52,49661,77],{"class":58},[52,49663,49664,49666,49668],{"class":54,"line":80},[52,49665,83],{"class":58},[52,49667,49586],{"class":371},[52,49669,77],{"class":58},[52,49671,49672,49674,49676],{"class":54,"line":108},[52,49673,2213],{"class":58},[52,49675,2216],{"class":371},[52,49677,105],{"class":58},[52,49679,49680,49682,49684],{"class":54,"line":118},[52,49681,2230],{"class":58},[52,49683,49586],{"class":371},[52,49685,77],{"class":58},[52,49687,49688,49690,49692],{"class":54,"line":594},[52,49689,121],{"class":58},[52,49691,63],{"class":371},[52,49693,77],{"class":58},[43,49695,49696],{"className":2507,"code":49607,"language":2509,"meta":48,"style":48},[31,49697,49698,49706,49714,49722,49730],{"__ignoreMap":48},[52,49699,49700,49702,49704],{"class":54,"line":55},[52,49701,59],{"class":58},[52,49703,63],{"class":371},[52,49705,77],{"class":58},[52,49707,49708,49710,49712],{"class":54,"line":80},[52,49709,83],{"class":58},[52,49711,49586],{"class":371},[52,49713,77],{"class":58},[52,49715,49716,49718,49720],{"class":54,"line":108},[52,49717,2213],{"class":58},[52,49719,2216],{"class":371},[52,49721,105],{"class":58},[52,49723,49724,49726,49728],{"class":54,"line":118},[52,49725,2230],{"class":58},[52,49727,49586],{"class":371},[52,49729,77],{"class":58},[52,49731,49732,49734,49736],{"class":54,"line":594},[52,49733,121],{"class":58},[52,49735,63],{"class":371},[52,49737,77],{"class":58},[43,49739,49740],{"className":419,"code":49607,"language":420,"meta":48,"style":48},[31,49741,49742,49750,49758,49766,49774],{"__ignoreMap":48},[52,49743,49744,49746,49748],{"class":54,"line":55},[52,49745,59],{"class":58},[52,49747,63],{"class":371},[52,49749,77],{"class":58},[52,49751,49752,49754,49756],{"class":54,"line":80},[52,49753,83],{"class":58},[52,49755,49586],{"class":371},[52,49757,77],{"class":58},[52,49759,49760,49762,49764],{"class":54,"line":108},[52,49761,2213],{"class":58},[52,49763,2216],{"class":371},[52,49765,105],{"class":58},[52,49767,49768,49770,49772],{"class":54,"line":118},[52,49769,2230],{"class":58},[52,49771,49586],{"class":371},[52,49773,77],{"class":58},[52,49775,49776,49778,49780],{"class":54,"line":594},[52,49777,121],{"class":58},[52,49779,63],{"class":371},[52,49781,77],{"class":58},[43,49783,49785],{"className":222,"code":49784,"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,49786,49787,49797,49801,49815,49819,49828,49836,49840,49844],{"__ignoreMap":48},[52,49788,49789,49791,49793,49795],{"class":54,"line":55},[52,49790,232],{"class":231},[52,49792,9005],{"class":58},[52,49794,238],{"class":231},[52,49796,9010],{"class":73},[52,49798,49799],{"class":54,"line":80},[52,49800,597],{"emptyLinePlaceholder":171},[52,49802,49803,49805,49807,49809,49811,49813],{"class":54,"line":108},[52,49804,1721],{"class":231},[52,49806,1724],{"class":371},[52,49808,1727],{"class":231},[52,49810,1730],{"class":231},[52,49812,1733],{"class":66},[52,49814,1736],{"class":58},[52,49816,49817],{"class":54,"line":118},[52,49818,1751],{"class":58},[52,49820,49821,49823,49826],{"class":54,"line":594},[52,49822,1756],{"class":58},[52,49824,49825],{"class":73},"'Stretch'",[52,49827,4496],{"class":58},[52,49829,49830,49832,49834],{"class":54,"line":600},[52,49831,4501],{"class":58},[52,49833,2869],{"class":73},[52,49835,2129],{"class":58},[52,49837,49838],{"class":54,"line":606},[52,49839,4518],{"class":58},[52,49841,49842],{"class":54,"line":653},[52,49843,1773],{"class":58},[52,49845,49846],{"class":54,"line":662},[52,49847,1778],{"class":58},[156,49849,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":49851},[49852,49853],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/stretch",{"title":49586,"description":49593},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":49860,"title":49861,"body":49862,"category":27535,"componentType":20617,"description":49869,"extension":168,"meta":50054,"navigation":171,"path":50055,"requiresChild":27538,"seo":50056,"stem":50057,"__hash__":50058},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":49863,"toc":50050},[49864,49867,49870,49872,49874,49877,49879,50048],[11,49865,49861],{"id":49866},"stripes",[15,49868,49869],{},"Alternating colored stripes with animation",[26676,49871],{"component":49861},[23,49873,26680],{"id":21278},[26682,49875],{":props":49876},"[{\"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,49878,26688],{"id":26687},[217,49880,49881,49910,49938,49966,49994],{":tabs":1543},[43,49882,49884],{"className":45,"code":49883,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,49885,49886,49894,49902],{"__ignoreMap":48},[52,49887,49888,49890,49892],{"class":54,"line":55},[52,49889,59],{"class":58},[52,49891,63],{"class":62},[52,49893,77],{"class":58},[52,49895,49896,49898,49900],{"class":54,"line":80},[52,49897,83],{"class":58},[52,49899,49861],{"class":62},[52,49901,105],{"class":58},[52,49903,49904,49906,49908],{"class":54,"line":108},[52,49905,121],{"class":58},[52,49907,63],{"class":62},[52,49909,77],{"class":58},[43,49911,49912],{"className":360,"code":49883,"language":362,"meta":48,"style":48},[31,49913,49914,49922,49930],{"__ignoreMap":48},[52,49915,49916,49918,49920],{"class":54,"line":55},[52,49917,59],{"class":58},[52,49919,63],{"class":371},[52,49921,77],{"class":58},[52,49923,49924,49926,49928],{"class":54,"line":80},[52,49925,83],{"class":58},[52,49927,49861],{"class":371},[52,49929,105],{"class":58},[52,49931,49932,49934,49936],{"class":54,"line":108},[52,49933,121],{"class":58},[52,49935,63],{"class":371},[52,49937,77],{"class":58},[43,49939,49940],{"className":2507,"code":49883,"language":2509,"meta":48,"style":48},[31,49941,49942,49950,49958],{"__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,49861],{"class":371},[52,49957,105],{"class":58},[52,49959,49960,49962,49964],{"class":54,"line":108},[52,49961,121],{"class":58},[52,49963,63],{"class":371},[52,49965,77],{"class":58},[43,49967,49968],{"className":419,"code":49883,"language":420,"meta":48,"style":48},[31,49969,49970,49978,49986],{"__ignoreMap":48},[52,49971,49972,49974,49976],{"class":54,"line":55},[52,49973,59],{"class":58},[52,49975,63],{"class":371},[52,49977,77],{"class":58},[52,49979,49980,49982,49984],{"class":54,"line":80},[52,49981,83],{"class":58},[52,49983,49861],{"class":371},[52,49985,105],{"class":58},[52,49987,49988,49990,49992],{"class":54,"line":108},[52,49989,121],{"class":58},[52,49991,63],{"class":371},[52,49993,77],{"class":58},[43,49995,49997],{"className":222,"code":49996,"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,49998,49999,50009,50013,50027,50031,50040,50044],{"__ignoreMap":48},[52,50000,50001,50003,50005,50007],{"class":54,"line":55},[52,50002,232],{"class":231},[52,50004,9005],{"class":58},[52,50006,238],{"class":231},[52,50008,9010],{"class":73},[52,50010,50011],{"class":54,"line":80},[52,50012,597],{"emptyLinePlaceholder":171},[52,50014,50015,50017,50019,50021,50023,50025],{"class":54,"line":108},[52,50016,1721],{"class":231},[52,50018,1724],{"class":371},[52,50020,1727],{"class":231},[52,50022,1730],{"class":231},[52,50024,1733],{"class":66},[52,50026,1736],{"class":58},[52,50028,50029],{"class":54,"line":118},[52,50030,1751],{"class":58},[52,50032,50033,50035,50038],{"class":54,"line":594},[52,50034,1756],{"class":58},[52,50036,50037],{"class":73},"'Stripes'",[52,50039,2129],{"class":58},[52,50041,50042],{"class":54,"line":600},[52,50043,1773],{"class":58},[52,50045,50046],{"class":54,"line":606},[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/stripes",{"title":49861,"description":49869},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":50060,"title":50061,"body":50062,"category":27535,"componentType":20617,"description":50069,"extension":168,"meta":50301,"navigation":171,"path":50302,"requiresChild":27538,"seo":50303,"stem":50304,"__hash__":50305},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":50063,"toc":50297},[50064,50067,50070,50072,50074,50077,50079,50295],[11,50065,50061],{"id":50066},"studiobackground",[15,50068,50069],{},"Multi-light studio background with ambient motion.",[26676,50071],{"component":50061},[23,50073,26680],{"id":21278},[26682,50075],{":props":50076},"[{\"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,50078,26688],{"id":26687},[217,50080,50081,50122,50160,50198,50236],{":tabs":1543},[43,50082,50084],{"className":45,"code":50083,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,50085,50086,50094,50101,50110,50114],{"__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],{"class":54,"line":80},[52,50097,83],{"class":58},[52,50099,50100],{"class":62},"StudioBackground\n",[52,50102,50103,50105,50107],{"class":54,"line":108},[52,50104,7125],{"class":66},[52,50106,70],{"class":58},[52,50108,50109],{"class":73},"\"#d8dbec\"\n",[52,50111,50112],{"class":54,"line":118},[52,50113,1224],{"class":58},[52,50115,50116,50118,50120],{"class":54,"line":594},[52,50117,121],{"class":58},[52,50119,63],{"class":62},[52,50121,77],{"class":58},[43,50123,50124],{"className":360,"code":50083,"language":362,"meta":48,"style":48},[31,50125,50126,50134,50140,50148,50152],{"__ignoreMap":48},[52,50127,50128,50130,50132],{"class":54,"line":55},[52,50129,59],{"class":58},[52,50131,63],{"class":371},[52,50133,77],{"class":58},[52,50135,50136,50138],{"class":54,"line":80},[52,50137,83],{"class":58},[52,50139,50100],{"class":371},[52,50141,50142,50144,50146],{"class":54,"line":108},[52,50143,7125],{"class":66},[52,50145,70],{"class":231},[52,50147,50109],{"class":73},[52,50149,50150],{"class":54,"line":118},[52,50151,1224],{"class":58},[52,50153,50154,50156,50158],{"class":54,"line":594},[52,50155,121],{"class":58},[52,50157,63],{"class":371},[52,50159,77],{"class":58},[43,50161,50162],{"className":2507,"code":50083,"language":2509,"meta":48,"style":48},[31,50163,50164,50172,50178,50186,50190],{"__ignoreMap":48},[52,50165,50166,50168,50170],{"class":54,"line":55},[52,50167,59],{"class":58},[52,50169,63],{"class":371},[52,50171,77],{"class":58},[52,50173,50174,50176],{"class":54,"line":80},[52,50175,83],{"class":58},[52,50177,50100],{"class":371},[52,50179,50180,50182,50184],{"class":54,"line":108},[52,50181,7125],{"class":66},[52,50183,70],{"class":58},[52,50185,50109],{"class":73},[52,50187,50188],{"class":54,"line":118},[52,50189,1224],{"class":58},[52,50191,50192,50194,50196],{"class":54,"line":594},[52,50193,121],{"class":58},[52,50195,63],{"class":371},[52,50197,77],{"class":58},[43,50199,50200],{"className":419,"code":50083,"language":420,"meta":48,"style":48},[31,50201,50202,50210,50216,50224,50228],{"__ignoreMap":48},[52,50203,50204,50206,50208],{"class":54,"line":55},[52,50205,59],{"class":58},[52,50207,63],{"class":371},[52,50209,77],{"class":58},[52,50211,50212,50214],{"class":54,"line":80},[52,50213,83],{"class":58},[52,50215,50100],{"class":371},[52,50217,50218,50220,50222],{"class":54,"line":108},[52,50219,7125],{"class":66},[52,50221,70],{"class":231},[52,50223,50109],{"class":73},[52,50225,50226],{"class":54,"line":118},[52,50227,1224],{"class":58},[52,50229,50230,50232,50234],{"class":54,"line":594},[52,50231,121],{"class":58},[52,50233,63],{"class":371},[52,50235,77],{"class":58},[43,50237,50239],{"className":222,"code":50238,"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,50240,50241,50251,50255,50269,50273,50287,50291],{"__ignoreMap":48},[52,50242,50243,50245,50247,50249],{"class":54,"line":55},[52,50244,232],{"class":231},[52,50246,9005],{"class":58},[52,50248,238],{"class":231},[52,50250,9010],{"class":73},[52,50252,50253],{"class":54,"line":80},[52,50254,597],{"emptyLinePlaceholder":171},[52,50256,50257,50259,50261,50263,50265,50267],{"class":54,"line":108},[52,50258,1721],{"class":231},[52,50260,1724],{"class":371},[52,50262,1727],{"class":231},[52,50264,1730],{"class":231},[52,50266,1733],{"class":66},[52,50268,1736],{"class":58},[52,50270,50271],{"class":54,"line":118},[52,50272,1751],{"class":58},[52,50274,50275,50277,50280,50282,50285],{"class":54,"line":594},[52,50276,1756],{"class":58},[52,50278,50279],{"class":73},"'StudioBackground'",[52,50281,1762],{"class":58},[52,50283,50284],{"class":73},"'#d8dbec'",[52,50286,1768],{"class":58},[52,50288,50289],{"class":54,"line":600},[52,50290,1773],{"class":58},[52,50292,50293],{"class":54,"line":606},[52,50294,1778],{"class":58},[156,50296,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50298},[50299,50300],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/studiobackground",{"title":50061,"description":50069},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":50307,"title":11496,"body":50308,"category":27535,"componentType":20617,"description":50315,"extension":168,"meta":50500,"navigation":171,"path":50501,"requiresChild":27538,"seo":50502,"stem":50503,"__hash__":50504},"components/docs/components/Swirl.md",{"type":8,"value":50309,"toc":50496},[50310,50313,50316,50318,50320,50323,50325,50494],[11,50311,11496],{"id":50312},"swirl",[15,50314,50315],{},"Flowing swirl pattern with multi-layered noise",[26676,50317],{"component":11496},[23,50319,26680],{"id":21278},[26682,50321],{":props":50322},"[{\"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,50324,26688],{"id":26687},[217,50326,50327,50356,50384,50412,50440],{":tabs":1543},[43,50328,50330],{"className":45,"code":50329,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,50331,50332,50340,50348],{"__ignoreMap":48},[52,50333,50334,50336,50338],{"class":54,"line":55},[52,50335,59],{"class":58},[52,50337,63],{"class":62},[52,50339,77],{"class":58},[52,50341,50342,50344,50346],{"class":54,"line":80},[52,50343,83],{"class":58},[52,50345,11496],{"class":62},[52,50347,105],{"class":58},[52,50349,50350,50352,50354],{"class":54,"line":108},[52,50351,121],{"class":58},[52,50353,63],{"class":62},[52,50355,77],{"class":58},[43,50357,50358],{"className":360,"code":50329,"language":362,"meta":48,"style":48},[31,50359,50360,50368,50376],{"__ignoreMap":48},[52,50361,50362,50364,50366],{"class":54,"line":55},[52,50363,59],{"class":58},[52,50365,63],{"class":371},[52,50367,77],{"class":58},[52,50369,50370,50372,50374],{"class":54,"line":80},[52,50371,83],{"class":58},[52,50373,11496],{"class":371},[52,50375,105],{"class":58},[52,50377,50378,50380,50382],{"class":54,"line":108},[52,50379,121],{"class":58},[52,50381,63],{"class":371},[52,50383,77],{"class":58},[43,50385,50386],{"className":2507,"code":50329,"language":2509,"meta":48,"style":48},[31,50387,50388,50396,50404],{"__ignoreMap":48},[52,50389,50390,50392,50394],{"class":54,"line":55},[52,50391,59],{"class":58},[52,50393,63],{"class":371},[52,50395,77],{"class":58},[52,50397,50398,50400,50402],{"class":54,"line":80},[52,50399,83],{"class":58},[52,50401,11496],{"class":371},[52,50403,105],{"class":58},[52,50405,50406,50408,50410],{"class":54,"line":108},[52,50407,121],{"class":58},[52,50409,63],{"class":371},[52,50411,77],{"class":58},[43,50413,50414],{"className":419,"code":50329,"language":420,"meta":48,"style":48},[31,50415,50416,50424,50432],{"__ignoreMap":48},[52,50417,50418,50420,50422],{"class":54,"line":55},[52,50419,59],{"class":58},[52,50421,63],{"class":371},[52,50423,77],{"class":58},[52,50425,50426,50428,50430],{"class":54,"line":80},[52,50427,83],{"class":58},[52,50429,11496],{"class":371},[52,50431,105],{"class":58},[52,50433,50434,50436,50438],{"class":54,"line":108},[52,50435,121],{"class":58},[52,50437,63],{"class":371},[52,50439,77],{"class":58},[43,50441,50443],{"className":222,"code":50442,"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,50444,50445,50455,50459,50473,50477,50486,50490],{"__ignoreMap":48},[52,50446,50447,50449,50451,50453],{"class":54,"line":55},[52,50448,232],{"class":231},[52,50450,9005],{"class":58},[52,50452,238],{"class":231},[52,50454,9010],{"class":73},[52,50456,50457],{"class":54,"line":80},[52,50458,597],{"emptyLinePlaceholder":171},[52,50460,50461,50463,50465,50467,50469,50471],{"class":54,"line":108},[52,50462,1721],{"class":231},[52,50464,1724],{"class":371},[52,50466,1727],{"class":231},[52,50468,1730],{"class":231},[52,50470,1733],{"class":66},[52,50472,1736],{"class":58},[52,50474,50475],{"class":54,"line":118},[52,50476,1751],{"class":58},[52,50478,50479,50481,50484],{"class":54,"line":594},[52,50480,1756],{"class":58},[52,50482,50483],{"class":73},"'Swirl'",[52,50485,2129],{"class":58},[52,50487,50488],{"class":54,"line":600},[52,50489,1773],{"class":58},[52,50491,50492],{"class":54,"line":606},[52,50493,1778],{"class":58},[156,50495,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":50497},[50498,50499],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/swirl",{"title":11496,"description":50315},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":50506,"title":50507,"body":50508,"category":27000,"componentType":20623,"description":50515,"extension":168,"meta":50832,"navigation":171,"path":50833,"requiresChild":171,"seo":50834,"stem":50835,"__hash__":50836},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":50509,"toc":50828},[50510,50513,50516,50518,50520,50523,50525,50826],[11,50511,50507],{"id":50512},"tiltshift",[15,50514,50515],{},"Selective focus blur mimicking tilt-shift photography",[26676,50517],{"component":50507},[23,50519,26680],{"id":21278},[26682,50521],{":props":50522},"[{\"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,50524,26688],{"id":26687},[217,50526,50527,50583,50642,50698,50756],{":tabs":1543},[43,50528,50530],{"className":45,"code":50529,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,50531,50532,50540,50547,50555,50559,50567,50575],{"__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],{"class":54,"line":80},[52,50543,83],{"class":58},[52,50545,50546],{"class":62},"TiltShift\n",[52,50548,50549,50551,50553],{"class":54,"line":108},[52,50550,17644],{"class":66},[52,50552,70],{"class":58},[52,50554,27991],{"class":73},[52,50556,50557],{"class":54,"line":118},[52,50558,26724],{"class":58},[52,50560,50561,50563,50565],{"class":54,"line":594},[52,50562,2213],{"class":58},[52,50564,2216],{"class":62},[52,50566,105],{"class":58},[52,50568,50569,50571,50573],{"class":54,"line":600},[52,50570,2230],{"class":58},[52,50572,50507],{"class":62},[52,50574,77],{"class":58},[52,50576,50577,50579,50581],{"class":54,"line":606},[52,50578,121],{"class":58},[52,50580,63],{"class":62},[52,50582,77],{"class":58},[43,50584,50586],{"className":360,"code":50585,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,50587,50588,50596,50602,50614,50618,50626,50634],{"__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],{"class":54,"line":80},[52,50599,83],{"class":58},[52,50601,50546],{"class":371},[52,50603,50604,50606,50608,50610,50612],{"class":54,"line":108},[52,50605,17755],{"class":66},[52,50607,70],{"class":231},[52,50609,723],{"class":58},[52,50611,28049],{"class":371},[52,50613,729],{"class":58},[52,50615,50616],{"class":54,"line":118},[52,50617,26724],{"class":58},[52,50619,50620,50622,50624],{"class":54,"line":594},[52,50621,2213],{"class":58},[52,50623,2216],{"class":371},[52,50625,105],{"class":58},[52,50627,50628,50630,50632],{"class":54,"line":600},[52,50629,2230],{"class":58},[52,50631,50507],{"class":371},[52,50633,77],{"class":58},[52,50635,50636,50638,50640],{"class":54,"line":606},[52,50637,121],{"class":58},[52,50639,63],{"class":371},[52,50641,77],{"class":58},[43,50643,50644],{"className":2507,"code":50585,"language":2509,"meta":48,"style":48},[31,50645,50646,50654,50660,50670,50674,50682,50690],{"__ignoreMap":48},[52,50647,50648,50650,50652],{"class":54,"line":55},[52,50649,59],{"class":58},[52,50651,63],{"class":371},[52,50653,77],{"class":58},[52,50655,50656,50658],{"class":54,"line":80},[52,50657,83],{"class":58},[52,50659,50546],{"class":371},[52,50661,50662,50664,50666,50668],{"class":54,"line":108},[52,50663,17755],{"class":66},[52,50665,24620],{"class":58},[52,50667,28049],{"class":371},[52,50669,729],{"class":58},[52,50671,50672],{"class":54,"line":118},[52,50673,26724],{"class":58},[52,50675,50676,50678,50680],{"class":54,"line":594},[52,50677,2213],{"class":58},[52,50679,2216],{"class":371},[52,50681,105],{"class":58},[52,50683,50684,50686,50688],{"class":54,"line":600},[52,50685,2230],{"class":58},[52,50687,50507],{"class":371},[52,50689,77],{"class":58},[52,50691,50692,50694,50696],{"class":54,"line":606},[52,50693,121],{"class":58},[52,50695,63],{"class":371},[52,50697,77],{"class":58},[43,50699,50700],{"className":419,"code":50585,"language":420,"meta":48,"style":48},[31,50701,50702,50710,50716,50728,50732,50740,50748],{"__ignoreMap":48},[52,50703,50704,50706,50708],{"class":54,"line":55},[52,50705,59],{"class":58},[52,50707,63],{"class":371},[52,50709,77],{"class":58},[52,50711,50712,50714],{"class":54,"line":80},[52,50713,83],{"class":58},[52,50715,50546],{"class":371},[52,50717,50718,50720,50722,50724,50726],{"class":54,"line":108},[52,50719,17755],{"class":66},[52,50721,70],{"class":231},[52,50723,723],{"class":58},[52,50725,28049],{"class":371},[52,50727,729],{"class":58},[52,50729,50730],{"class":54,"line":118},[52,50731,26724],{"class":58},[52,50733,50734,50736,50738],{"class":54,"line":594},[52,50735,2213],{"class":58},[52,50737,2216],{"class":371},[52,50739,105],{"class":58},[52,50741,50742,50744,50746],{"class":54,"line":600},[52,50743,2230],{"class":58},[52,50745,50507],{"class":371},[52,50747,77],{"class":58},[52,50749,50750,50752,50754],{"class":54,"line":606},[52,50751,121],{"class":58},[52,50753,63],{"class":371},[52,50755,77],{"class":58},[43,50757,50759],{"className":222,"code":50758,"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,50760,50761,50771,50775,50789,50793,50806,50814,50818,50822],{"__ignoreMap":48},[52,50762,50763,50765,50767,50769],{"class":54,"line":55},[52,50764,232],{"class":231},[52,50766,9005],{"class":58},[52,50768,238],{"class":231},[52,50770,9010],{"class":73},[52,50772,50773],{"class":54,"line":80},[52,50774,597],{"emptyLinePlaceholder":171},[52,50776,50777,50779,50781,50783,50785,50787],{"class":54,"line":108},[52,50778,1721],{"class":231},[52,50780,1724],{"class":371},[52,50782,1727],{"class":231},[52,50784,1730],{"class":231},[52,50786,1733],{"class":66},[52,50788,1736],{"class":58},[52,50790,50791],{"class":54,"line":118},[52,50792,1751],{"class":58},[52,50794,50795,50797,50800,50802,50804],{"class":54,"line":594},[52,50796,1756],{"class":58},[52,50798,50799],{"class":73},"'TiltShift'",[52,50801,26969],{"class":58},[52,50803,28049],{"class":371},[52,50805,5033],{"class":58},[52,50807,50808,50810,50812],{"class":54,"line":600},[52,50809,4501],{"class":58},[52,50811,2869],{"class":73},[52,50813,2129],{"class":58},[52,50815,50816],{"class":54,"line":606},[52,50817,4518],{"class":58},[52,50819,50820],{"class":54,"line":653},[52,50821,1773],{"class":58},[52,50823,50824],{"class":54,"line":662},[52,50825,1778],{"class":58},[156,50827,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50829},[50830,50831],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/tiltshift",{"title":50507,"description":50515},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":50838,"title":50839,"body":50840,"category":28546,"componentType":20623,"description":50847,"extension":168,"meta":51155,"navigation":171,"path":51156,"requiresChild":171,"seo":51157,"stem":51158,"__hash__":51159},"components/docs/components/Tint.md","Tint",{"type":8,"value":50841,"toc":51151},[50842,50845,50848,50850,50852,50855,50857,51149],[11,50843,50839],{"id":50844},"tint",[15,50846,50847],{},"Apply a color tint to the image",[26676,50849],{"component":50839},[23,50851,26680],{"id":21278},[26682,50853],{":props":50854},"[{\"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,50856,26688],{"id":26687},[217,50858,50859,50916,50970,51024,51078],{":tabs":1543},[43,50860,50862],{"className":45,"code":50861,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,50863,50864,50872,50879,50888,50892,50900,50908],{"__ignoreMap":48},[52,50865,50866,50868,50870],{"class":54,"line":55},[52,50867,59],{"class":58},[52,50869,63],{"class":62},[52,50871,77],{"class":58},[52,50873,50874,50876],{"class":54,"line":80},[52,50875,83],{"class":58},[52,50877,50878],{"class":62},"Tint\n",[52,50880,50881,50883,50885],{"class":54,"line":108},[52,50882,7125],{"class":66},[52,50884,70],{"class":58},[52,50886,50887],{"class":73},"\"#ff8800\"\n",[52,50889,50890],{"class":54,"line":118},[52,50891,26724],{"class":58},[52,50893,50894,50896,50898],{"class":54,"line":594},[52,50895,2213],{"class":58},[52,50897,2216],{"class":62},[52,50899,105],{"class":58},[52,50901,50902,50904,50906],{"class":54,"line":600},[52,50903,2230],{"class":58},[52,50905,50839],{"class":62},[52,50907,77],{"class":58},[52,50909,50910,50912,50914],{"class":54,"line":606},[52,50911,121],{"class":58},[52,50913,63],{"class":62},[52,50915,77],{"class":58},[43,50917,50918],{"className":360,"code":50861,"language":362,"meta":48,"style":48},[31,50919,50920,50928,50934,50942,50946,50954,50962],{"__ignoreMap":48},[52,50921,50922,50924,50926],{"class":54,"line":55},[52,50923,59],{"class":58},[52,50925,63],{"class":371},[52,50927,77],{"class":58},[52,50929,50930,50932],{"class":54,"line":80},[52,50931,83],{"class":58},[52,50933,50878],{"class":371},[52,50935,50936,50938,50940],{"class":54,"line":108},[52,50937,7125],{"class":66},[52,50939,70],{"class":231},[52,50941,50887],{"class":73},[52,50943,50944],{"class":54,"line":118},[52,50945,26724],{"class":58},[52,50947,50948,50950,50952],{"class":54,"line":594},[52,50949,2213],{"class":58},[52,50951,2216],{"class":371},[52,50953,105],{"class":58},[52,50955,50956,50958,50960],{"class":54,"line":600},[52,50957,2230],{"class":58},[52,50959,50839],{"class":371},[52,50961,77],{"class":58},[52,50963,50964,50966,50968],{"class":54,"line":606},[52,50965,121],{"class":58},[52,50967,63],{"class":371},[52,50969,77],{"class":58},[43,50971,50972],{"className":2507,"code":50861,"language":2509,"meta":48,"style":48},[31,50973,50974,50982,50988,50996,51000,51008,51016],{"__ignoreMap":48},[52,50975,50976,50978,50980],{"class":54,"line":55},[52,50977,59],{"class":58},[52,50979,63],{"class":371},[52,50981,77],{"class":58},[52,50983,50984,50986],{"class":54,"line":80},[52,50985,83],{"class":58},[52,50987,50878],{"class":371},[52,50989,50990,50992,50994],{"class":54,"line":108},[52,50991,7125],{"class":66},[52,50993,70],{"class":58},[52,50995,50887],{"class":73},[52,50997,50998],{"class":54,"line":118},[52,50999,26724],{"class":58},[52,51001,51002,51004,51006],{"class":54,"line":594},[52,51003,2213],{"class":58},[52,51005,2216],{"class":371},[52,51007,105],{"class":58},[52,51009,51010,51012,51014],{"class":54,"line":600},[52,51011,2230],{"class":58},[52,51013,50839],{"class":371},[52,51015,77],{"class":58},[52,51017,51018,51020,51022],{"class":54,"line":606},[52,51019,121],{"class":58},[52,51021,63],{"class":371},[52,51023,77],{"class":58},[43,51025,51026],{"className":419,"code":50861,"language":420,"meta":48,"style":48},[31,51027,51028,51036,51042,51050,51054,51062,51070],{"__ignoreMap":48},[52,51029,51030,51032,51034],{"class":54,"line":55},[52,51031,59],{"class":58},[52,51033,63],{"class":371},[52,51035,77],{"class":58},[52,51037,51038,51040],{"class":54,"line":80},[52,51039,83],{"class":58},[52,51041,50878],{"class":371},[52,51043,51044,51046,51048],{"class":54,"line":108},[52,51045,7125],{"class":66},[52,51047,70],{"class":231},[52,51049,50887],{"class":73},[52,51051,51052],{"class":54,"line":118},[52,51053,26724],{"class":58},[52,51055,51056,51058,51060],{"class":54,"line":594},[52,51057,2213],{"class":58},[52,51059,2216],{"class":371},[52,51061,105],{"class":58},[52,51063,51064,51066,51068],{"class":54,"line":600},[52,51065,2230],{"class":58},[52,51067,50839],{"class":371},[52,51069,77],{"class":58},[52,51071,51072,51074,51076],{"class":54,"line":606},[52,51073,121],{"class":58},[52,51075,63],{"class":371},[52,51077,77],{"class":58},[43,51079,51081],{"className":222,"code":51080,"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,51082,51083,51093,51097,51111,51115,51129,51137,51141,51145],{"__ignoreMap":48},[52,51084,51085,51087,51089,51091],{"class":54,"line":55},[52,51086,232],{"class":231},[52,51088,9005],{"class":58},[52,51090,238],{"class":231},[52,51092,9010],{"class":73},[52,51094,51095],{"class":54,"line":80},[52,51096,597],{"emptyLinePlaceholder":171},[52,51098,51099,51101,51103,51105,51107,51109],{"class":54,"line":108},[52,51100,1721],{"class":231},[52,51102,1724],{"class":371},[52,51104,1727],{"class":231},[52,51106,1730],{"class":231},[52,51108,1733],{"class":66},[52,51110,1736],{"class":58},[52,51112,51113],{"class":54,"line":118},[52,51114,1751],{"class":58},[52,51116,51117,51119,51122,51124,51127],{"class":54,"line":594},[52,51118,1756],{"class":58},[52,51120,51121],{"class":73},"'Tint'",[52,51123,1762],{"class":58},[52,51125,51126],{"class":73},"'#ff8800'",[52,51128,5033],{"class":58},[52,51130,51131,51133,51135],{"class":54,"line":600},[52,51132,4501],{"class":58},[52,51134,2869],{"class":73},[52,51136,2129],{"class":58},[52,51138,51139],{"class":54,"line":606},[52,51140,4518],{"class":58},[52,51142,51143],{"class":54,"line":653},[52,51144,1773],{"class":58},[52,51146,51147],{"class":54,"line":662},[52,51148,1778],{"class":58},[156,51150,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51152},[51153,51154],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/tint",{"title":50839,"description":50847},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":51161,"title":51162,"body":51163,"category":30502,"componentType":20617,"description":51170,"extension":168,"meta":51400,"navigation":171,"path":51401,"requiresChild":27538,"seo":51402,"stem":51403,"__hash__":51404},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":51164,"toc":51396},[51165,51168,51171,51173,51175,51178,51180,51394],[11,51166,51162],{"id":51167},"trapezoid",[15,51169,51170],{},"Trapezoid with adjustable top and bottom widths and height",[26676,51172],{"component":51162},[23,51174,26680],{"id":21278},[26682,51176],{":props":51177},"[{\"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,51179,26688],{"id":26687},[217,51181,51182,51222,51260,51298,51336],{":tabs":1543},[43,51183,51185],{"className":45,"code":51184,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,51186,51187,51195,51202,51210,51214],{"__ignoreMap":48},[52,51188,51189,51191,51193],{"class":54,"line":55},[52,51190,59],{"class":58},[52,51192,63],{"class":62},[52,51194,77],{"class":58},[52,51196,51197,51199],{"class":54,"line":80},[52,51198,83],{"class":58},[52,51200,51201],{"class":62},"Trapezoid\n",[52,51203,51204,51206,51208],{"class":54,"line":108},[52,51205,7125],{"class":66},[52,51207,70],{"class":58},[52,51209,7081],{"class":73},[52,51211,51212],{"class":54,"line":118},[52,51213,1224],{"class":58},[52,51215,51216,51218,51220],{"class":54,"line":594},[52,51217,121],{"class":58},[52,51219,63],{"class":62},[52,51221,77],{"class":58},[43,51223,51224],{"className":360,"code":51184,"language":362,"meta":48,"style":48},[31,51225,51226,51234,51240,51248,51252],{"__ignoreMap":48},[52,51227,51228,51230,51232],{"class":54,"line":55},[52,51229,59],{"class":58},[52,51231,63],{"class":371},[52,51233,77],{"class":58},[52,51235,51236,51238],{"class":54,"line":80},[52,51237,83],{"class":58},[52,51239,51201],{"class":371},[52,51241,51242,51244,51246],{"class":54,"line":108},[52,51243,7125],{"class":66},[52,51245,70],{"class":231},[52,51247,7081],{"class":73},[52,51249,51250],{"class":54,"line":118},[52,51251,1224],{"class":58},[52,51253,51254,51256,51258],{"class":54,"line":594},[52,51255,121],{"class":58},[52,51257,63],{"class":371},[52,51259,77],{"class":58},[43,51261,51262],{"className":2507,"code":51184,"language":2509,"meta":48,"style":48},[31,51263,51264,51272,51278,51286,51290],{"__ignoreMap":48},[52,51265,51266,51268,51270],{"class":54,"line":55},[52,51267,59],{"class":58},[52,51269,63],{"class":371},[52,51271,77],{"class":58},[52,51273,51274,51276],{"class":54,"line":80},[52,51275,83],{"class":58},[52,51277,51201],{"class":371},[52,51279,51280,51282,51284],{"class":54,"line":108},[52,51281,7125],{"class":66},[52,51283,70],{"class":58},[52,51285,7081],{"class":73},[52,51287,51288],{"class":54,"line":118},[52,51289,1224],{"class":58},[52,51291,51292,51294,51296],{"class":54,"line":594},[52,51293,121],{"class":58},[52,51295,63],{"class":371},[52,51297,77],{"class":58},[43,51299,51300],{"className":419,"code":51184,"language":420,"meta":48,"style":48},[31,51301,51302,51310,51316,51324,51328],{"__ignoreMap":48},[52,51303,51304,51306,51308],{"class":54,"line":55},[52,51305,59],{"class":58},[52,51307,63],{"class":371},[52,51309,77],{"class":58},[52,51311,51312,51314],{"class":54,"line":80},[52,51313,83],{"class":58},[52,51315,51201],{"class":371},[52,51317,51318,51320,51322],{"class":54,"line":108},[52,51319,7125],{"class":66},[52,51321,70],{"class":231},[52,51323,7081],{"class":73},[52,51325,51326],{"class":54,"line":118},[52,51327,1224],{"class":58},[52,51329,51330,51332,51334],{"class":54,"line":594},[52,51331,121],{"class":58},[52,51333,63],{"class":371},[52,51335,77],{"class":58},[43,51337,51339],{"className":222,"code":51338,"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,51340,51341,51351,51355,51369,51373,51386,51390],{"__ignoreMap":48},[52,51342,51343,51345,51347,51349],{"class":54,"line":55},[52,51344,232],{"class":231},[52,51346,9005],{"class":58},[52,51348,238],{"class":231},[52,51350,9010],{"class":73},[52,51352,51353],{"class":54,"line":80},[52,51354,597],{"emptyLinePlaceholder":171},[52,51356,51357,51359,51361,51363,51365,51367],{"class":54,"line":108},[52,51358,1721],{"class":231},[52,51360,1724],{"class":371},[52,51362,1727],{"class":231},[52,51364,1730],{"class":231},[52,51366,1733],{"class":66},[52,51368,1736],{"class":58},[52,51370,51371],{"class":54,"line":118},[52,51372,1751],{"class":58},[52,51374,51375,51377,51380,51382,51384],{"class":54,"line":594},[52,51376,1756],{"class":58},[52,51378,51379],{"class":73},"'Trapezoid'",[52,51381,1762],{"class":58},[52,51383,7660],{"class":73},[52,51385,1768],{"class":58},[52,51387,51388],{"class":54,"line":600},[52,51389,1773],{"class":58},[52,51391,51392],{"class":54,"line":606},[52,51393,1778],{"class":58},[156,51395,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51397},[51398,51399],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/trapezoid",{"title":51162,"description":51170},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":51406,"title":51407,"body":51408,"category":28546,"componentType":20623,"description":51415,"extension":168,"meta":51676,"navigation":171,"path":51677,"requiresChild":171,"seo":51678,"stem":51679,"__hash__":51680},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":51409,"toc":51672},[51410,51413,51416,51418,51420,51423,51425,51670],[11,51411,51407],{"id":51412},"tritone",[15,51414,51415],{},"Map colors to three tones: shadows, midtones, highlights",[26676,51417],{"component":51407},[23,51419,26680],{"id":21278},[26682,51421],{":props":51422},"[{\"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,51424,26688],{"id":26687},[217,51426,51427,51472,51516,51560,51604],{":tabs":1543},[43,51428,51430],{"className":45,"code":51429,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,51431,51432,51440,51448,51456,51464],{"__ignoreMap":48},[52,51433,51434,51436,51438],{"class":54,"line":55},[52,51435,59],{"class":58},[52,51437,63],{"class":62},[52,51439,77],{"class":58},[52,51441,51442,51444,51446],{"class":54,"line":80},[52,51443,83],{"class":58},[52,51445,51407],{"class":62},[52,51447,77],{"class":58},[52,51449,51450,51452,51454],{"class":54,"line":108},[52,51451,2213],{"class":58},[52,51453,2216],{"class":62},[52,51455,105],{"class":58},[52,51457,51458,51460,51462],{"class":54,"line":118},[52,51459,2230],{"class":58},[52,51461,51407],{"class":62},[52,51463,77],{"class":58},[52,51465,51466,51468,51470],{"class":54,"line":594},[52,51467,121],{"class":58},[52,51469,63],{"class":62},[52,51471,77],{"class":58},[43,51473,51474],{"className":360,"code":51429,"language":362,"meta":48,"style":48},[31,51475,51476,51484,51492,51500,51508],{"__ignoreMap":48},[52,51477,51478,51480,51482],{"class":54,"line":55},[52,51479,59],{"class":58},[52,51481,63],{"class":371},[52,51483,77],{"class":58},[52,51485,51486,51488,51490],{"class":54,"line":80},[52,51487,83],{"class":58},[52,51489,51407],{"class":371},[52,51491,77],{"class":58},[52,51493,51494,51496,51498],{"class":54,"line":108},[52,51495,2213],{"class":58},[52,51497,2216],{"class":371},[52,51499,105],{"class":58},[52,51501,51502,51504,51506],{"class":54,"line":118},[52,51503,2230],{"class":58},[52,51505,51407],{"class":371},[52,51507,77],{"class":58},[52,51509,51510,51512,51514],{"class":54,"line":594},[52,51511,121],{"class":58},[52,51513,63],{"class":371},[52,51515,77],{"class":58},[43,51517,51518],{"className":2507,"code":51429,"language":2509,"meta":48,"style":48},[31,51519,51520,51528,51536,51544,51552],{"__ignoreMap":48},[52,51521,51522,51524,51526],{"class":54,"line":55},[52,51523,59],{"class":58},[52,51525,63],{"class":371},[52,51527,77],{"class":58},[52,51529,51530,51532,51534],{"class":54,"line":80},[52,51531,83],{"class":58},[52,51533,51407],{"class":371},[52,51535,77],{"class":58},[52,51537,51538,51540,51542],{"class":54,"line":108},[52,51539,2213],{"class":58},[52,51541,2216],{"class":371},[52,51543,105],{"class":58},[52,51545,51546,51548,51550],{"class":54,"line":118},[52,51547,2230],{"class":58},[52,51549,51407],{"class":371},[52,51551,77],{"class":58},[52,51553,51554,51556,51558],{"class":54,"line":594},[52,51555,121],{"class":58},[52,51557,63],{"class":371},[52,51559,77],{"class":58},[43,51561,51562],{"className":419,"code":51429,"language":420,"meta":48,"style":48},[31,51563,51564,51572,51580,51588,51596],{"__ignoreMap":48},[52,51565,51566,51568,51570],{"class":54,"line":55},[52,51567,59],{"class":58},[52,51569,63],{"class":371},[52,51571,77],{"class":58},[52,51573,51574,51576,51578],{"class":54,"line":80},[52,51575,83],{"class":58},[52,51577,51407],{"class":371},[52,51579,77],{"class":58},[52,51581,51582,51584,51586],{"class":54,"line":108},[52,51583,2213],{"class":58},[52,51585,2216],{"class":371},[52,51587,105],{"class":58},[52,51589,51590,51592,51594],{"class":54,"line":118},[52,51591,2230],{"class":58},[52,51593,51407],{"class":371},[52,51595,77],{"class":58},[52,51597,51598,51600,51602],{"class":54,"line":594},[52,51599,121],{"class":58},[52,51601,63],{"class":371},[52,51603,77],{"class":58},[43,51605,51607],{"className":222,"code":51606,"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,51608,51609,51619,51623,51637,51641,51650,51658,51662,51666],{"__ignoreMap":48},[52,51610,51611,51613,51615,51617],{"class":54,"line":55},[52,51612,232],{"class":231},[52,51614,9005],{"class":58},[52,51616,238],{"class":231},[52,51618,9010],{"class":73},[52,51620,51621],{"class":54,"line":80},[52,51622,597],{"emptyLinePlaceholder":171},[52,51624,51625,51627,51629,51631,51633,51635],{"class":54,"line":108},[52,51626,1721],{"class":231},[52,51628,1724],{"class":371},[52,51630,1727],{"class":231},[52,51632,1730],{"class":231},[52,51634,1733],{"class":66},[52,51636,1736],{"class":58},[52,51638,51639],{"class":54,"line":118},[52,51640,1751],{"class":58},[52,51642,51643,51645,51648],{"class":54,"line":594},[52,51644,1756],{"class":58},[52,51646,51647],{"class":73},"'Tritone'",[52,51649,4496],{"class":58},[52,51651,51652,51654,51656],{"class":54,"line":600},[52,51653,4501],{"class":58},[52,51655,2869],{"class":73},[52,51657,2129],{"class":58},[52,51659,51660],{"class":54,"line":606},[52,51661,4518],{"class":58},[52,51663,51664],{"class":54,"line":653},[52,51665,1773],{"class":58},[52,51667,51668],{"class":54,"line":662},[52,51669,1778],{"class":58},[156,51671,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":51673},[51674,51675],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/tritone",{"title":51407,"description":51415},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":51682,"title":51683,"body":51684,"category":27535,"componentType":20617,"description":51691,"extension":168,"meta":51876,"navigation":171,"path":51877,"requiresChild":27538,"seo":51878,"stem":51879,"__hash__":51880},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":51685,"toc":51872},[51686,51689,51692,51694,51696,51699,51701,51870],[11,51687,51683],{"id":51688},"truchet",[15,51690,51691],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26676,51693],{"component":51683},[23,51695,26680],{"id":21278},[26682,51697],{":props":51698},"[{\"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,51700,26688],{"id":26687},[217,51702,51703,51732,51760,51788,51816],{":tabs":1543},[43,51704,51706],{"className":45,"code":51705,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,51707,51708,51716,51724],{"__ignoreMap":48},[52,51709,51710,51712,51714],{"class":54,"line":55},[52,51711,59],{"class":58},[52,51713,63],{"class":62},[52,51715,77],{"class":58},[52,51717,51718,51720,51722],{"class":54,"line":80},[52,51719,83],{"class":58},[52,51721,51683],{"class":62},[52,51723,105],{"class":58},[52,51725,51726,51728,51730],{"class":54,"line":108},[52,51727,121],{"class":58},[52,51729,63],{"class":62},[52,51731,77],{"class":58},[43,51733,51734],{"className":360,"code":51705,"language":362,"meta":48,"style":48},[31,51735,51736,51744,51752],{"__ignoreMap":48},[52,51737,51738,51740,51742],{"class":54,"line":55},[52,51739,59],{"class":58},[52,51741,63],{"class":371},[52,51743,77],{"class":58},[52,51745,51746,51748,51750],{"class":54,"line":80},[52,51747,83],{"class":58},[52,51749,51683],{"class":371},[52,51751,105],{"class":58},[52,51753,51754,51756,51758],{"class":54,"line":108},[52,51755,121],{"class":58},[52,51757,63],{"class":371},[52,51759,77],{"class":58},[43,51761,51762],{"className":2507,"code":51705,"language":2509,"meta":48,"style":48},[31,51763,51764,51772,51780],{"__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,51683],{"class":371},[52,51779,105],{"class":58},[52,51781,51782,51784,51786],{"class":54,"line":108},[52,51783,121],{"class":58},[52,51785,63],{"class":371},[52,51787,77],{"class":58},[43,51789,51790],{"className":419,"code":51705,"language":420,"meta":48,"style":48},[31,51791,51792,51800,51808],{"__ignoreMap":48},[52,51793,51794,51796,51798],{"class":54,"line":55},[52,51795,59],{"class":58},[52,51797,63],{"class":371},[52,51799,77],{"class":58},[52,51801,51802,51804,51806],{"class":54,"line":80},[52,51803,83],{"class":58},[52,51805,51683],{"class":371},[52,51807,105],{"class":58},[52,51809,51810,51812,51814],{"class":54,"line":108},[52,51811,121],{"class":58},[52,51813,63],{"class":371},[52,51815,77],{"class":58},[43,51817,51819],{"className":222,"code":51818,"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,51820,51821,51831,51835,51849,51853,51862,51866],{"__ignoreMap":48},[52,51822,51823,51825,51827,51829],{"class":54,"line":55},[52,51824,232],{"class":231},[52,51826,9005],{"class":58},[52,51828,238],{"class":231},[52,51830,9010],{"class":73},[52,51832,51833],{"class":54,"line":80},[52,51834,597],{"emptyLinePlaceholder":171},[52,51836,51837,51839,51841,51843,51845,51847],{"class":54,"line":108},[52,51838,1721],{"class":231},[52,51840,1724],{"class":371},[52,51842,1727],{"class":231},[52,51844,1730],{"class":231},[52,51846,1733],{"class":66},[52,51848,1736],{"class":58},[52,51850,51851],{"class":54,"line":118},[52,51852,1751],{"class":58},[52,51854,51855,51857,51860],{"class":54,"line":594},[52,51856,1756],{"class":58},[52,51858,51859],{"class":73},"'Truchet'",[52,51861,2129],{"class":58},[52,51863,51864],{"class":54,"line":600},[52,51865,1773],{"class":58},[52,51867,51868],{"class":54,"line":606},[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/truchet",{"title":51683,"description":51691},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":51882,"title":51883,"body":51884,"category":28880,"componentType":20623,"description":51891,"extension":168,"meta":52208,"navigation":171,"path":52209,"requiresChild":171,"seo":52210,"stem":52211,"__hash__":52212},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":51885,"toc":52204},[51886,51889,51892,51894,51896,51899,51901,52202],[11,51887,51883],{"id":51888},"twirl",[15,51890,51891],{},"Rotate and twist content around a center point",[26676,51893],{"component":51883},[23,51895,26680],{"id":21278},[26682,51897],{":props":51898},"[{\"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,51900,26688],{"id":26687},[217,51902,51903,51959,52018,52074,52132],{":tabs":1543},[43,51904,51906],{"className":45,"code":51905,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,51907,51908,51916,51923,51931,51935,51943,51951],{"__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],{"class":54,"line":80},[52,51919,83],{"class":58},[52,51921,51922],{"class":62},"Twirl\n",[52,51924,51925,51927,51929],{"class":54,"line":108},[52,51926,17644],{"class":66},[52,51928,70],{"class":58},[52,51930,28602],{"class":73},[52,51932,51933],{"class":54,"line":118},[52,51934,26724],{"class":58},[52,51936,51937,51939,51941],{"class":54,"line":594},[52,51938,2213],{"class":58},[52,51940,2216],{"class":62},[52,51942,105],{"class":58},[52,51944,51945,51947,51949],{"class":54,"line":600},[52,51946,2230],{"class":58},[52,51948,51883],{"class":62},[52,51950,77],{"class":58},[52,51952,51953,51955,51957],{"class":54,"line":606},[52,51954,121],{"class":58},[52,51956,63],{"class":62},[52,51958,77],{"class":58},[43,51960,51962],{"className":360,"code":51961,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,51963,51964,51972,51978,51990,51994,52002,52010],{"__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],{"class":54,"line":80},[52,51975,83],{"class":58},[52,51977,51922],{"class":371},[52,51979,51980,51982,51984,51986,51988],{"class":54,"line":108},[52,51981,17755],{"class":66},[52,51983,70],{"class":231},[52,51985,723],{"class":58},[52,51987,6165],{"class":371},[52,51989,729],{"class":58},[52,51991,51992],{"class":54,"line":118},[52,51993,26724],{"class":58},[52,51995,51996,51998,52000],{"class":54,"line":594},[52,51997,2213],{"class":58},[52,51999,2216],{"class":371},[52,52001,105],{"class":58},[52,52003,52004,52006,52008],{"class":54,"line":600},[52,52005,2230],{"class":58},[52,52007,51883],{"class":371},[52,52009,77],{"class":58},[52,52011,52012,52014,52016],{"class":54,"line":606},[52,52013,121],{"class":58},[52,52015,63],{"class":371},[52,52017,77],{"class":58},[43,52019,52020],{"className":2507,"code":51961,"language":2509,"meta":48,"style":48},[31,52021,52022,52030,52036,52046,52050,52058,52066],{"__ignoreMap":48},[52,52023,52024,52026,52028],{"class":54,"line":55},[52,52025,59],{"class":58},[52,52027,63],{"class":371},[52,52029,77],{"class":58},[52,52031,52032,52034],{"class":54,"line":80},[52,52033,83],{"class":58},[52,52035,51922],{"class":371},[52,52037,52038,52040,52042,52044],{"class":54,"line":108},[52,52039,17755],{"class":66},[52,52041,24620],{"class":58},[52,52043,6165],{"class":371},[52,52045,729],{"class":58},[52,52047,52048],{"class":54,"line":118},[52,52049,26724],{"class":58},[52,52051,52052,52054,52056],{"class":54,"line":594},[52,52053,2213],{"class":58},[52,52055,2216],{"class":371},[52,52057,105],{"class":58},[52,52059,52060,52062,52064],{"class":54,"line":600},[52,52061,2230],{"class":58},[52,52063,51883],{"class":371},[52,52065,77],{"class":58},[52,52067,52068,52070,52072],{"class":54,"line":606},[52,52069,121],{"class":58},[52,52071,63],{"class":371},[52,52073,77],{"class":58},[43,52075,52076],{"className":419,"code":51961,"language":420,"meta":48,"style":48},[31,52077,52078,52086,52092,52104,52108,52116,52124],{"__ignoreMap":48},[52,52079,52080,52082,52084],{"class":54,"line":55},[52,52081,59],{"class":58},[52,52083,63],{"class":371},[52,52085,77],{"class":58},[52,52087,52088,52090],{"class":54,"line":80},[52,52089,83],{"class":58},[52,52091,51922],{"class":371},[52,52093,52094,52096,52098,52100,52102],{"class":54,"line":108},[52,52095,17755],{"class":66},[52,52097,70],{"class":231},[52,52099,723],{"class":58},[52,52101,6165],{"class":371},[52,52103,729],{"class":58},[52,52105,52106],{"class":54,"line":118},[52,52107,26724],{"class":58},[52,52109,52110,52112,52114],{"class":54,"line":594},[52,52111,2213],{"class":58},[52,52113,2216],{"class":371},[52,52115,105],{"class":58},[52,52117,52118,52120,52122],{"class":54,"line":600},[52,52119,2230],{"class":58},[52,52121,51883],{"class":371},[52,52123,77],{"class":58},[52,52125,52126,52128,52130],{"class":54,"line":606},[52,52127,121],{"class":58},[52,52129,63],{"class":371},[52,52131,77],{"class":58},[43,52133,52135],{"className":222,"code":52134,"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,52136,52137,52147,52151,52165,52169,52182,52190,52194,52198],{"__ignoreMap":48},[52,52138,52139,52141,52143,52145],{"class":54,"line":55},[52,52140,232],{"class":231},[52,52142,9005],{"class":58},[52,52144,238],{"class":231},[52,52146,9010],{"class":73},[52,52148,52149],{"class":54,"line":80},[52,52150,597],{"emptyLinePlaceholder":171},[52,52152,52153,52155,52157,52159,52161,52163],{"class":54,"line":108},[52,52154,1721],{"class":231},[52,52156,1724],{"class":371},[52,52158,1727],{"class":231},[52,52160,1730],{"class":231},[52,52162,1733],{"class":66},[52,52164,1736],{"class":58},[52,52166,52167],{"class":54,"line":118},[52,52168,1751],{"class":58},[52,52170,52171,52173,52176,52178,52180],{"class":54,"line":594},[52,52172,1756],{"class":58},[52,52174,52175],{"class":73},"'Twirl'",[52,52177,26969],{"class":58},[52,52179,6165],{"class":371},[52,52181,5033],{"class":58},[52,52183,52184,52186,52188],{"class":54,"line":600},[52,52185,4501],{"class":58},[52,52187,2869],{"class":73},[52,52189,2129],{"class":58},[52,52191,52192],{"class":54,"line":606},[52,52193,4518],{"class":58},[52,52195,52196],{"class":54,"line":653},[52,52197,1773],{"class":58},[52,52199,52200],{"class":54,"line":662},[52,52201,1778],{"class":58},[156,52203,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52205},[52206,52207],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/twirl",{"title":51883,"description":51891},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":52214,"title":52215,"body":52216,"category":30502,"componentType":20617,"description":52223,"extension":168,"meta":52500,"navigation":171,"path":52501,"requiresChild":27538,"seo":52502,"stem":52503,"__hash__":52504},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":52217,"toc":52496},[52218,52221,52224,52226,52228,52231,52233,52494],[11,52219,52215],{"id":52220},"vesica",[15,52222,52223],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26676,52225],{"component":52215},[23,52227,26680],{"id":21278},[26682,52229],{":props":52230},"[{\"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,52232,26688],{"id":26687},[217,52234,52235,52283,52334,52382,52432],{":tabs":1543},[43,52236,52238],{"className":45,"code":52237,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,52239,52240,52248,52255,52263,52271,52275],{"__ignoreMap":48},[52,52241,52242,52244,52246],{"class":54,"line":55},[52,52243,59],{"class":58},[52,52245,63],{"class":62},[52,52247,77],{"class":58},[52,52249,52250,52252],{"class":54,"line":80},[52,52251,83],{"class":58},[52,52253,52254],{"class":62},"Vesica\n",[52,52256,52257,52259,52261],{"class":54,"line":108},[52,52258,7125],{"class":66},[52,52260,70],{"class":58},[52,52262,7081],{"class":73},[52,52264,52265,52267,52269],{"class":54,"line":118},[52,52266,14675],{"class":66},[52,52268,70],{"class":58},[52,52270,31667],{"class":73},[52,52272,52273],{"class":54,"line":594},[52,52274,1224],{"class":58},[52,52276,52277,52279,52281],{"class":54,"line":600},[52,52278,121],{"class":58},[52,52280,63],{"class":62},[52,52282,77],{"class":58},[43,52284,52286],{"className":360,"code":52285,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,52287,52288,52296,52302,52310,52322,52326],{"__ignoreMap":48},[52,52289,52290,52292,52294],{"class":54,"line":55},[52,52291,59],{"class":58},[52,52293,63],{"class":371},[52,52295,77],{"class":58},[52,52297,52298,52300],{"class":54,"line":80},[52,52299,83],{"class":58},[52,52301,52254],{"class":371},[52,52303,52304,52306,52308],{"class":54,"line":108},[52,52305,7125],{"class":66},[52,52307,70],{"class":231},[52,52309,7081],{"class":73},[52,52311,52312,52314,52316,52318,52320],{"class":54,"line":118},[52,52313,7135],{"class":66},[52,52315,70],{"class":231},[52,52317,723],{"class":58},[52,52319,18404],{"class":371},[52,52321,729],{"class":58},[52,52323,52324],{"class":54,"line":594},[52,52325,1224],{"class":58},[52,52327,52328,52330,52332],{"class":54,"line":600},[52,52329,121],{"class":58},[52,52331,63],{"class":371},[52,52333,77],{"class":58},[43,52335,52336],{"className":2507,"code":52285,"language":2509,"meta":48,"style":48},[31,52337,52338,52346,52352,52360,52370,52374],{"__ignoreMap":48},[52,52339,52340,52342,52344],{"class":54,"line":55},[52,52341,59],{"class":58},[52,52343,63],{"class":371},[52,52345,77],{"class":58},[52,52347,52348,52350],{"class":54,"line":80},[52,52349,83],{"class":58},[52,52351,52254],{"class":371},[52,52353,52354,52356,52358],{"class":54,"line":108},[52,52355,7125],{"class":66},[52,52357,70],{"class":58},[52,52359,7081],{"class":73},[52,52361,52362,52364,52366,52368],{"class":54,"line":118},[52,52363,7135],{"class":66},[52,52365,24620],{"class":58},[52,52367,18404],{"class":371},[52,52369,729],{"class":58},[52,52371,52372],{"class":54,"line":594},[52,52373,1224],{"class":58},[52,52375,52376,52378,52380],{"class":54,"line":600},[52,52377,121],{"class":58},[52,52379,63],{"class":371},[52,52381,77],{"class":58},[43,52383,52384],{"className":419,"code":52285,"language":420,"meta":48,"style":48},[31,52385,52386,52394,52400,52408,52420,52424],{"__ignoreMap":48},[52,52387,52388,52390,52392],{"class":54,"line":55},[52,52389,59],{"class":58},[52,52391,63],{"class":371},[52,52393,77],{"class":58},[52,52395,52396,52398],{"class":54,"line":80},[52,52397,83],{"class":58},[52,52399,52254],{"class":371},[52,52401,52402,52404,52406],{"class":54,"line":108},[52,52403,7125],{"class":66},[52,52405,70],{"class":231},[52,52407,7081],{"class":73},[52,52409,52410,52412,52414,52416,52418],{"class":54,"line":118},[52,52411,7135],{"class":66},[52,52413,70],{"class":231},[52,52415,723],{"class":58},[52,52417,18404],{"class":371},[52,52419,729],{"class":58},[52,52421,52422],{"class":54,"line":594},[52,52423,1224],{"class":58},[52,52425,52426,52428,52430],{"class":54,"line":600},[52,52427,121],{"class":58},[52,52429,63],{"class":371},[52,52431,77],{"class":58},[43,52433,52435],{"className":222,"code":52434,"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,52436,52437,52447,52451,52465,52469,52486,52490],{"__ignoreMap":48},[52,52438,52439,52441,52443,52445],{"class":54,"line":55},[52,52440,232],{"class":231},[52,52442,9005],{"class":58},[52,52444,238],{"class":231},[52,52446,9010],{"class":73},[52,52448,52449],{"class":54,"line":80},[52,52450,597],{"emptyLinePlaceholder":171},[52,52452,52453,52455,52457,52459,52461,52463],{"class":54,"line":108},[52,52454,1721],{"class":231},[52,52456,1724],{"class":371},[52,52458,1727],{"class":231},[52,52460,1730],{"class":231},[52,52462,1733],{"class":66},[52,52464,1736],{"class":58},[52,52466,52467],{"class":54,"line":118},[52,52468,1751],{"class":58},[52,52470,52471,52473,52476,52478,52480,52482,52484],{"class":54,"line":594},[52,52472,1756],{"class":58},[52,52474,52475],{"class":73},"'Vesica'",[52,52477,1762],{"class":58},[52,52479,7660],{"class":73},[52,52481,4052],{"class":58},[52,52483,18404],{"class":371},[52,52485,1768],{"class":58},[52,52487,52488],{"class":54,"line":600},[52,52489,1773],{"class":58},[52,52491,52492],{"class":54,"line":606},[52,52493,1778],{"class":58},[156,52495,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52497},[52498,52499],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/vesica",{"title":52215,"description":52223},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":52506,"title":52507,"body":52508,"category":28546,"componentType":20623,"description":52515,"extension":168,"meta":52833,"navigation":171,"path":52834,"requiresChild":171,"seo":52835,"stem":52836,"__hash__":52837},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":52509,"toc":52829},[52510,52513,52516,52518,52520,52523,52525,52827],[11,52511,52507],{"id":52512},"vibrance",[15,52514,52515],{},"Selective saturation adjustment protecting skin tones",[26676,52517],{"component":52507},[23,52519,26680],{"id":21278},[26682,52521],{":props":52522},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,52524,26688],{"id":26687},[217,52526,52527,52584,52643,52699,52757],{":tabs":1543},[43,52528,52530],{"className":45,"code":52529,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,52531,52532,52540,52547,52556,52560,52568,52576],{"__ignoreMap":48},[52,52533,52534,52536,52538],{"class":54,"line":55},[52,52535,59],{"class":58},[52,52537,63],{"class":62},[52,52539,77],{"class":58},[52,52541,52542,52544],{"class":54,"line":80},[52,52543,83],{"class":58},[52,52545,52546],{"class":62},"Vibrance\n",[52,52548,52549,52551,52553],{"class":54,"line":108},[52,52550,17644],{"class":66},[52,52552,70],{"class":58},[52,52554,52555],{"class":73},"\"0\"\n",[52,52557,52558],{"class":54,"line":118},[52,52559,26724],{"class":58},[52,52561,52562,52564,52566],{"class":54,"line":594},[52,52563,2213],{"class":58},[52,52565,2216],{"class":62},[52,52567,105],{"class":58},[52,52569,52570,52572,52574],{"class":54,"line":600},[52,52571,2230],{"class":58},[52,52573,52507],{"class":62},[52,52575,77],{"class":58},[52,52577,52578,52580,52582],{"class":54,"line":606},[52,52579,121],{"class":58},[52,52581,63],{"class":62},[52,52583,77],{"class":58},[43,52585,52587],{"className":360,"code":52586,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,52588,52589,52597,52603,52615,52619,52627,52635],{"__ignoreMap":48},[52,52590,52591,52593,52595],{"class":54,"line":55},[52,52592,59],{"class":58},[52,52594,63],{"class":371},[52,52596,77],{"class":58},[52,52598,52599,52601],{"class":54,"line":80},[52,52600,83],{"class":58},[52,52602,52546],{"class":371},[52,52604,52605,52607,52609,52611,52613],{"class":54,"line":108},[52,52606,17755],{"class":66},[52,52608,70],{"class":231},[52,52610,723],{"class":58},[52,52612,6161],{"class":371},[52,52614,729],{"class":58},[52,52616,52617],{"class":54,"line":118},[52,52618,26724],{"class":58},[52,52620,52621,52623,52625],{"class":54,"line":594},[52,52622,2213],{"class":58},[52,52624,2216],{"class":371},[52,52626,105],{"class":58},[52,52628,52629,52631,52633],{"class":54,"line":600},[52,52630,2230],{"class":58},[52,52632,52507],{"class":371},[52,52634,77],{"class":58},[52,52636,52637,52639,52641],{"class":54,"line":606},[52,52638,121],{"class":58},[52,52640,63],{"class":371},[52,52642,77],{"class":58},[43,52644,52645],{"className":2507,"code":52586,"language":2509,"meta":48,"style":48},[31,52646,52647,52655,52661,52671,52675,52683,52691],{"__ignoreMap":48},[52,52648,52649,52651,52653],{"class":54,"line":55},[52,52650,59],{"class":58},[52,52652,63],{"class":371},[52,52654,77],{"class":58},[52,52656,52657,52659],{"class":54,"line":80},[52,52658,83],{"class":58},[52,52660,52546],{"class":371},[52,52662,52663,52665,52667,52669],{"class":54,"line":108},[52,52664,17755],{"class":66},[52,52666,24620],{"class":58},[52,52668,6161],{"class":371},[52,52670,729],{"class":58},[52,52672,52673],{"class":54,"line":118},[52,52674,26724],{"class":58},[52,52676,52677,52679,52681],{"class":54,"line":594},[52,52678,2213],{"class":58},[52,52680,2216],{"class":371},[52,52682,105],{"class":58},[52,52684,52685,52687,52689],{"class":54,"line":600},[52,52686,2230],{"class":58},[52,52688,52507],{"class":371},[52,52690,77],{"class":58},[52,52692,52693,52695,52697],{"class":54,"line":606},[52,52694,121],{"class":58},[52,52696,63],{"class":371},[52,52698,77],{"class":58},[43,52700,52701],{"className":419,"code":52586,"language":420,"meta":48,"style":48},[31,52702,52703,52711,52717,52729,52733,52741,52749],{"__ignoreMap":48},[52,52704,52705,52707,52709],{"class":54,"line":55},[52,52706,59],{"class":58},[52,52708,63],{"class":371},[52,52710,77],{"class":58},[52,52712,52713,52715],{"class":54,"line":80},[52,52714,83],{"class":58},[52,52716,52546],{"class":371},[52,52718,52719,52721,52723,52725,52727],{"class":54,"line":108},[52,52720,17755],{"class":66},[52,52722,70],{"class":231},[52,52724,723],{"class":58},[52,52726,6161],{"class":371},[52,52728,729],{"class":58},[52,52730,52731],{"class":54,"line":118},[52,52732,26724],{"class":58},[52,52734,52735,52737,52739],{"class":54,"line":594},[52,52736,2213],{"class":58},[52,52738,2216],{"class":371},[52,52740,105],{"class":58},[52,52742,52743,52745,52747],{"class":54,"line":600},[52,52744,2230],{"class":58},[52,52746,52507],{"class":371},[52,52748,77],{"class":58},[52,52750,52751,52753,52755],{"class":54,"line":606},[52,52752,121],{"class":58},[52,52754,63],{"class":371},[52,52756,77],{"class":58},[43,52758,52760],{"className":222,"code":52759,"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,52761,52762,52772,52776,52790,52794,52807,52815,52819,52823],{"__ignoreMap":48},[52,52763,52764,52766,52768,52770],{"class":54,"line":55},[52,52765,232],{"class":231},[52,52767,9005],{"class":58},[52,52769,238],{"class":231},[52,52771,9010],{"class":73},[52,52773,52774],{"class":54,"line":80},[52,52775,597],{"emptyLinePlaceholder":171},[52,52777,52778,52780,52782,52784,52786,52788],{"class":54,"line":108},[52,52779,1721],{"class":231},[52,52781,1724],{"class":371},[52,52783,1727],{"class":231},[52,52785,1730],{"class":231},[52,52787,1733],{"class":66},[52,52789,1736],{"class":58},[52,52791,52792],{"class":54,"line":118},[52,52793,1751],{"class":58},[52,52795,52796,52798,52801,52803,52805],{"class":54,"line":594},[52,52797,1756],{"class":58},[52,52799,52800],{"class":73},"'Vibrance'",[52,52802,26969],{"class":58},[52,52804,6161],{"class":371},[52,52806,5033],{"class":58},[52,52808,52809,52811,52813],{"class":54,"line":600},[52,52810,4501],{"class":58},[52,52812,2869],{"class":73},[52,52814,2129],{"class":58},[52,52816,52817],{"class":54,"line":606},[52,52818,4518],{"class":58},[52,52820,52821],{"class":54,"line":653},[52,52822,1773],{"class":58},[52,52824,52825],{"class":54,"line":662},[52,52826,1778],{"class":58},[156,52828,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52830},[52831,52832],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/vibrance",{"title":52507,"description":52515},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":52839,"title":52840,"body":52841,"category":27535,"componentType":20617,"description":52848,"extension":168,"meta":53033,"navigation":171,"path":53034,"requiresChild":27538,"seo":53035,"stem":53036,"__hash__":53037},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":52842,"toc":53029},[52843,52846,52849,52851,52853,52856,52858,53027],[11,52844,52840],{"id":52845},"videotexture",[15,52847,52848],{},"Display a video with customizable playback and object-fit modes",[26676,52850],{"component":52840},[23,52852,26680],{"id":21278},[26682,52854],{":props":52855},"[{\"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,52857,26688],{"id":26687},[217,52859,52860,52889,52917,52945,52973],{":tabs":1543},[43,52861,52863],{"className":45,"code":52862,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,52864,52865,52873,52881],{"__ignoreMap":48},[52,52866,52867,52869,52871],{"class":54,"line":55},[52,52868,59],{"class":58},[52,52870,63],{"class":62},[52,52872,77],{"class":58},[52,52874,52875,52877,52879],{"class":54,"line":80},[52,52876,83],{"class":58},[52,52878,52840],{"class":62},[52,52880,105],{"class":58},[52,52882,52883,52885,52887],{"class":54,"line":108},[52,52884,121],{"class":58},[52,52886,63],{"class":62},[52,52888,77],{"class":58},[43,52890,52891],{"className":360,"code":52862,"language":362,"meta":48,"style":48},[31,52892,52893,52901,52909],{"__ignoreMap":48},[52,52894,52895,52897,52899],{"class":54,"line":55},[52,52896,59],{"class":58},[52,52898,63],{"class":371},[52,52900,77],{"class":58},[52,52902,52903,52905,52907],{"class":54,"line":80},[52,52904,83],{"class":58},[52,52906,52840],{"class":371},[52,52908,105],{"class":58},[52,52910,52911,52913,52915],{"class":54,"line":108},[52,52912,121],{"class":58},[52,52914,63],{"class":371},[52,52916,77],{"class":58},[43,52918,52919],{"className":2507,"code":52862,"language":2509,"meta":48,"style":48},[31,52920,52921,52929,52937],{"__ignoreMap":48},[52,52922,52923,52925,52927],{"class":54,"line":55},[52,52924,59],{"class":58},[52,52926,63],{"class":371},[52,52928,77],{"class":58},[52,52930,52931,52933,52935],{"class":54,"line":80},[52,52932,83],{"class":58},[52,52934,52840],{"class":371},[52,52936,105],{"class":58},[52,52938,52939,52941,52943],{"class":54,"line":108},[52,52940,121],{"class":58},[52,52942,63],{"class":371},[52,52944,77],{"class":58},[43,52946,52947],{"className":419,"code":52862,"language":420,"meta":48,"style":48},[31,52948,52949,52957,52965],{"__ignoreMap":48},[52,52950,52951,52953,52955],{"class":54,"line":55},[52,52952,59],{"class":58},[52,52954,63],{"class":371},[52,52956,77],{"class":58},[52,52958,52959,52961,52963],{"class":54,"line":80},[52,52960,83],{"class":58},[52,52962,52840],{"class":371},[52,52964,105],{"class":58},[52,52966,52967,52969,52971],{"class":54,"line":108},[52,52968,121],{"class":58},[52,52970,63],{"class":371},[52,52972,77],{"class":58},[43,52974,52976],{"className":222,"code":52975,"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,52977,52978,52988,52992,53006,53010,53019,53023],{"__ignoreMap":48},[52,52979,52980,52982,52984,52986],{"class":54,"line":55},[52,52981,232],{"class":231},[52,52983,9005],{"class":58},[52,52985,238],{"class":231},[52,52987,9010],{"class":73},[52,52989,52990],{"class":54,"line":80},[52,52991,597],{"emptyLinePlaceholder":171},[52,52993,52994,52996,52998,53000,53002,53004],{"class":54,"line":108},[52,52995,1721],{"class":231},[52,52997,1724],{"class":371},[52,52999,1727],{"class":231},[52,53001,1730],{"class":231},[52,53003,1733],{"class":66},[52,53005,1736],{"class":58},[52,53007,53008],{"class":54,"line":118},[52,53009,1751],{"class":58},[52,53011,53012,53014,53017],{"class":54,"line":594},[52,53013,1756],{"class":58},[52,53015,53016],{"class":73},"'VideoTexture'",[52,53018,2129],{"class":58},[52,53020,53021],{"class":54,"line":600},[52,53022,1773],{"class":58},[52,53024,53025],{"class":54,"line":606},[52,53026,1778],{"class":58},[156,53028,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":53030},[53031,53032],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/videotexture",{"title":52840,"description":52848},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":53039,"title":53040,"body":53041,"category":27278,"componentType":20623,"description":53048,"extension":168,"meta":53447,"navigation":171,"path":53448,"requiresChild":171,"seo":53449,"stem":53450,"__hash__":53451},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":53042,"toc":53443},[53043,53046,53049,53051,53053,53056,53058,53441],[11,53044,53040],{"id":53045},"vignette",[15,53047,53048],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26676,53050],{"component":53040},[23,53052,26680],{"id":21278},[26682,53054],{":props":53055},"[{\"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,53057,26688],{"id":26687},[217,53059,53060,53132,53211,53285,53363],{":tabs":1543},[43,53061,53063],{"className":45,"code":53062,"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,53064,53065,53073,53080,53088,53096,53104,53108,53116,53124],{"__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],{"class":54,"line":80},[52,53076,83],{"class":58},[52,53078,53079],{"class":62},"Vignette\n",[52,53081,53082,53084,53086],{"class":54,"line":108},[52,53083,7125],{"class":66},[52,53085,70],{"class":58},[52,53087,16749],{"class":73},[52,53089,53090,53092,53094],{"class":54,"line":118},[52,53091,14675],{"class":66},[52,53093,70],{"class":58},[52,53095,32237],{"class":73},[52,53097,53098,53100,53102],{"class":54,"line":594},[52,53099,17644],{"class":66},[52,53101,70],{"class":58},[52,53103,28602],{"class":73},[52,53105,53106],{"class":54,"line":600},[52,53107,26724],{"class":58},[52,53109,53110,53112,53114],{"class":54,"line":606},[52,53111,2213],{"class":58},[52,53113,2216],{"class":62},[52,53115,105],{"class":58},[52,53117,53118,53120,53122],{"class":54,"line":653},[52,53119,2230],{"class":58},[52,53121,53040],{"class":62},[52,53123,77],{"class":58},[52,53125,53126,53128,53130],{"class":54,"line":662},[52,53127,121],{"class":58},[52,53129,63],{"class":62},[52,53131,77],{"class":58},[43,53133,53135],{"className":360,"code":53134,"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,53136,53137,53145,53151,53159,53171,53183,53187,53195,53203],{"__ignoreMap":48},[52,53138,53139,53141,53143],{"class":54,"line":55},[52,53140,59],{"class":58},[52,53142,63],{"class":371},[52,53144,77],{"class":58},[52,53146,53147,53149],{"class":54,"line":80},[52,53148,83],{"class":58},[52,53150,53079],{"class":371},[52,53152,53153,53155,53157],{"class":54,"line":108},[52,53154,7125],{"class":66},[52,53156,70],{"class":231},[52,53158,16749],{"class":73},[52,53160,53161,53163,53165,53167,53169],{"class":54,"line":118},[52,53162,7135],{"class":66},[52,53164,70],{"class":231},[52,53166,723],{"class":58},[52,53168,5241],{"class":371},[52,53170,729],{"class":58},[52,53172,53173,53175,53177,53179,53181],{"class":54,"line":594},[52,53174,17755],{"class":66},[52,53176,70],{"class":231},[52,53178,723],{"class":58},[52,53180,6165],{"class":371},[52,53182,729],{"class":58},[52,53184,53185],{"class":54,"line":600},[52,53186,26724],{"class":58},[52,53188,53189,53191,53193],{"class":54,"line":606},[52,53190,2213],{"class":58},[52,53192,2216],{"class":371},[52,53194,105],{"class":58},[52,53196,53197,53199,53201],{"class":54,"line":653},[52,53198,2230],{"class":58},[52,53200,53040],{"class":371},[52,53202,77],{"class":58},[52,53204,53205,53207,53209],{"class":54,"line":662},[52,53206,121],{"class":58},[52,53208,63],{"class":371},[52,53210,77],{"class":58},[43,53212,53213],{"className":2507,"code":53134,"language":2509,"meta":48,"style":48},[31,53214,53215,53223,53229,53237,53247,53257,53261,53269,53277],{"__ignoreMap":48},[52,53216,53217,53219,53221],{"class":54,"line":55},[52,53218,59],{"class":58},[52,53220,63],{"class":371},[52,53222,77],{"class":58},[52,53224,53225,53227],{"class":54,"line":80},[52,53226,83],{"class":58},[52,53228,53079],{"class":371},[52,53230,53231,53233,53235],{"class":54,"line":108},[52,53232,7125],{"class":66},[52,53234,70],{"class":58},[52,53236,16749],{"class":73},[52,53238,53239,53241,53243,53245],{"class":54,"line":118},[52,53240,7135],{"class":66},[52,53242,24620],{"class":58},[52,53244,5241],{"class":371},[52,53246,729],{"class":58},[52,53248,53249,53251,53253,53255],{"class":54,"line":594},[52,53250,17755],{"class":66},[52,53252,24620],{"class":58},[52,53254,6165],{"class":371},[52,53256,729],{"class":58},[52,53258,53259],{"class":54,"line":600},[52,53260,26724],{"class":58},[52,53262,53263,53265,53267],{"class":54,"line":606},[52,53264,2213],{"class":58},[52,53266,2216],{"class":371},[52,53268,105],{"class":58},[52,53270,53271,53273,53275],{"class":54,"line":653},[52,53272,2230],{"class":58},[52,53274,53040],{"class":371},[52,53276,77],{"class":58},[52,53278,53279,53281,53283],{"class":54,"line":662},[52,53280,121],{"class":58},[52,53282,63],{"class":371},[52,53284,77],{"class":58},[43,53286,53287],{"className":419,"code":53134,"language":420,"meta":48,"style":48},[31,53288,53289,53297,53303,53311,53323,53335,53339,53347,53355],{"__ignoreMap":48},[52,53290,53291,53293,53295],{"class":54,"line":55},[52,53292,59],{"class":58},[52,53294,63],{"class":371},[52,53296,77],{"class":58},[52,53298,53299,53301],{"class":54,"line":80},[52,53300,83],{"class":58},[52,53302,53079],{"class":371},[52,53304,53305,53307,53309],{"class":54,"line":108},[52,53306,7125],{"class":66},[52,53308,70],{"class":231},[52,53310,16749],{"class":73},[52,53312,53313,53315,53317,53319,53321],{"class":54,"line":118},[52,53314,7135],{"class":66},[52,53316,70],{"class":231},[52,53318,723],{"class":58},[52,53320,5241],{"class":371},[52,53322,729],{"class":58},[52,53324,53325,53327,53329,53331,53333],{"class":54,"line":594},[52,53326,17755],{"class":66},[52,53328,70],{"class":231},[52,53330,723],{"class":58},[52,53332,6165],{"class":371},[52,53334,729],{"class":58},[52,53336,53337],{"class":54,"line":600},[52,53338,26724],{"class":58},[52,53340,53341,53343,53345],{"class":54,"line":606},[52,53342,2213],{"class":58},[52,53344,2216],{"class":371},[52,53346,105],{"class":58},[52,53348,53349,53351,53353],{"class":54,"line":653},[52,53350,2230],{"class":58},[52,53352,53040],{"class":371},[52,53354,77],{"class":58},[52,53356,53357,53359,53361],{"class":54,"line":662},[52,53358,121],{"class":58},[52,53360,63],{"class":371},[52,53362,77],{"class":58},[43,53364,53366],{"className":222,"code":53365,"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,53367,53368,53378,53382,53396,53400,53421,53429,53433,53437],{"__ignoreMap":48},[52,53369,53370,53372,53374,53376],{"class":54,"line":55},[52,53371,232],{"class":231},[52,53373,9005],{"class":58},[52,53375,238],{"class":231},[52,53377,9010],{"class":73},[52,53379,53380],{"class":54,"line":80},[52,53381,597],{"emptyLinePlaceholder":171},[52,53383,53384,53386,53388,53390,53392,53394],{"class":54,"line":108},[52,53385,1721],{"class":231},[52,53387,1724],{"class":371},[52,53389,1727],{"class":231},[52,53391,1730],{"class":231},[52,53393,1733],{"class":66},[52,53395,1736],{"class":58},[52,53397,53398],{"class":54,"line":118},[52,53399,1751],{"class":58},[52,53401,53402,53404,53407,53409,53411,53413,53415,53417,53419],{"class":54,"line":594},[52,53403,1756],{"class":58},[52,53405,53406],{"class":73},"'Vignette'",[52,53408,1762],{"class":58},[52,53410,17308],{"class":73},[52,53412,4052],{"class":58},[52,53414,5241],{"class":371},[52,53416,34198],{"class":58},[52,53418,6165],{"class":371},[52,53420,5033],{"class":58},[52,53422,53423,53425,53427],{"class":54,"line":600},[52,53424,4501],{"class":58},[52,53426,2869],{"class":73},[52,53428,2129],{"class":58},[52,53430,53431],{"class":54,"line":606},[52,53432,4518],{"class":58},[52,53434,53435],{"class":54,"line":653},[52,53436,1773],{"class":58},[52,53438,53439],{"class":54,"line":662},[52,53440,1778],{"class":58},[156,53442,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53444},[53445,53446],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/vignette",{"title":53040,"description":53048},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":53453,"title":53454,"body":53455,"category":27535,"componentType":20617,"description":53462,"extension":168,"meta":53647,"navigation":171,"path":53648,"requiresChild":27538,"seo":53649,"stem":53650,"__hash__":53651},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":53456,"toc":53643},[53457,53460,53463,53465,53467,53470,53472,53641],[11,53458,53454],{"id":53459},"voronoi",[15,53461,53462],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26676,53464],{"component":53454},[23,53466,26680],{"id":21278},[26682,53468],{":props":53469},"[{\"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,53471,26688],{"id":26687},[217,53473,53474,53503,53531,53559,53587],{":tabs":1543},[43,53475,53477],{"className":45,"code":53476,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,53478,53479,53487,53495],{"__ignoreMap":48},[52,53480,53481,53483,53485],{"class":54,"line":55},[52,53482,59],{"class":58},[52,53484,63],{"class":62},[52,53486,77],{"class":58},[52,53488,53489,53491,53493],{"class":54,"line":80},[52,53490,83],{"class":58},[52,53492,53454],{"class":62},[52,53494,105],{"class":58},[52,53496,53497,53499,53501],{"class":54,"line":108},[52,53498,121],{"class":58},[52,53500,63],{"class":62},[52,53502,77],{"class":58},[43,53504,53505],{"className":360,"code":53476,"language":362,"meta":48,"style":48},[31,53506,53507,53515,53523],{"__ignoreMap":48},[52,53508,53509,53511,53513],{"class":54,"line":55},[52,53510,59],{"class":58},[52,53512,63],{"class":371},[52,53514,77],{"class":58},[52,53516,53517,53519,53521],{"class":54,"line":80},[52,53518,83],{"class":58},[52,53520,53454],{"class":371},[52,53522,105],{"class":58},[52,53524,53525,53527,53529],{"class":54,"line":108},[52,53526,121],{"class":58},[52,53528,63],{"class":371},[52,53530,77],{"class":58},[43,53532,53533],{"className":2507,"code":53476,"language":2509,"meta":48,"style":48},[31,53534,53535,53543,53551],{"__ignoreMap":48},[52,53536,53537,53539,53541],{"class":54,"line":55},[52,53538,59],{"class":58},[52,53540,63],{"class":371},[52,53542,77],{"class":58},[52,53544,53545,53547,53549],{"class":54,"line":80},[52,53546,83],{"class":58},[52,53548,53454],{"class":371},[52,53550,105],{"class":58},[52,53552,53553,53555,53557],{"class":54,"line":108},[52,53554,121],{"class":58},[52,53556,63],{"class":371},[52,53558,77],{"class":58},[43,53560,53561],{"className":419,"code":53476,"language":420,"meta":48,"style":48},[31,53562,53563,53571,53579],{"__ignoreMap":48},[52,53564,53565,53567,53569],{"class":54,"line":55},[52,53566,59],{"class":58},[52,53568,63],{"class":371},[52,53570,77],{"class":58},[52,53572,53573,53575,53577],{"class":54,"line":80},[52,53574,83],{"class":58},[52,53576,53454],{"class":371},[52,53578,105],{"class":58},[52,53580,53581,53583,53585],{"class":54,"line":108},[52,53582,121],{"class":58},[52,53584,63],{"class":371},[52,53586,77],{"class":58},[43,53588,53590],{"className":222,"code":53589,"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,53591,53592,53602,53606,53620,53624,53633,53637],{"__ignoreMap":48},[52,53593,53594,53596,53598,53600],{"class":54,"line":55},[52,53595,232],{"class":231},[52,53597,9005],{"class":58},[52,53599,238],{"class":231},[52,53601,9010],{"class":73},[52,53603,53604],{"class":54,"line":80},[52,53605,597],{"emptyLinePlaceholder":171},[52,53607,53608,53610,53612,53614,53616,53618],{"class":54,"line":108},[52,53609,1721],{"class":231},[52,53611,1724],{"class":371},[52,53613,1727],{"class":231},[52,53615,1730],{"class":231},[52,53617,1733],{"class":66},[52,53619,1736],{"class":58},[52,53621,53622],{"class":54,"line":118},[52,53623,1751],{"class":58},[52,53625,53626,53628,53631],{"class":54,"line":594},[52,53627,1756],{"class":58},[52,53629,53630],{"class":73},"'Voronoi'",[52,53632,2129],{"class":58},[52,53634,53635],{"class":54,"line":600},[52,53636,1773],{"class":58},[52,53638,53639],{"class":54,"line":606},[52,53640,1778],{"class":58},[156,53642,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":53644},[53645,53646],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/voronoi",{"title":53454,"description":53462},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":53653,"title":53654,"body":53655,"category":28880,"componentType":20623,"description":53662,"extension":168,"meta":53923,"navigation":171,"path":53924,"requiresChild":171,"seo":53925,"stem":53926,"__hash__":53927},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":53656,"toc":53919},[53657,53660,53663,53665,53667,53670,53672,53917],[11,53658,53654],{"id":53659},"wavedistortion",[15,53661,53662],{},"Wave-based distortion with multiple waveform types",[26676,53664],{"component":53654},[23,53666,26680],{"id":21278},[26682,53668],{":props":53669},"[{\"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,53671,26688],{"id":26687},[217,53673,53674,53719,53763,53807,53851],{":tabs":1543},[43,53675,53677],{"className":45,"code":53676,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,53678,53679,53687,53695,53703,53711],{"__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,77],{"class":58},[52,53696,53697,53699,53701],{"class":54,"line":108},[52,53698,2213],{"class":58},[52,53700,2216],{"class":62},[52,53702,105],{"class":58},[52,53704,53705,53707,53709],{"class":54,"line":118},[52,53706,2230],{"class":58},[52,53708,53654],{"class":62},[52,53710,77],{"class":58},[52,53712,53713,53715,53717],{"class":54,"line":594},[52,53714,121],{"class":58},[52,53716,63],{"class":62},[52,53718,77],{"class":58},[43,53720,53721],{"className":360,"code":53676,"language":362,"meta":48,"style":48},[31,53722,53723,53731,53739,53747,53755],{"__ignoreMap":48},[52,53724,53725,53727,53729],{"class":54,"line":55},[52,53726,59],{"class":58},[52,53728,63],{"class":371},[52,53730,77],{"class":58},[52,53732,53733,53735,53737],{"class":54,"line":80},[52,53734,83],{"class":58},[52,53736,53654],{"class":371},[52,53738,77],{"class":58},[52,53740,53741,53743,53745],{"class":54,"line":108},[52,53742,2213],{"class":58},[52,53744,2216],{"class":371},[52,53746,105],{"class":58},[52,53748,53749,53751,53753],{"class":54,"line":118},[52,53750,2230],{"class":58},[52,53752,53654],{"class":371},[52,53754,77],{"class":58},[52,53756,53757,53759,53761],{"class":54,"line":594},[52,53758,121],{"class":58},[52,53760,63],{"class":371},[52,53762,77],{"class":58},[43,53764,53765],{"className":2507,"code":53676,"language":2509,"meta":48,"style":48},[31,53766,53767,53775,53783,53791,53799],{"__ignoreMap":48},[52,53768,53769,53771,53773],{"class":54,"line":55},[52,53770,59],{"class":58},[52,53772,63],{"class":371},[52,53774,77],{"class":58},[52,53776,53777,53779,53781],{"class":54,"line":80},[52,53778,83],{"class":58},[52,53780,53654],{"class":371},[52,53782,77],{"class":58},[52,53784,53785,53787,53789],{"class":54,"line":108},[52,53786,2213],{"class":58},[52,53788,2216],{"class":371},[52,53790,105],{"class":58},[52,53792,53793,53795,53797],{"class":54,"line":118},[52,53794,2230],{"class":58},[52,53796,53654],{"class":371},[52,53798,77],{"class":58},[52,53800,53801,53803,53805],{"class":54,"line":594},[52,53802,121],{"class":58},[52,53804,63],{"class":371},[52,53806,77],{"class":58},[43,53808,53809],{"className":419,"code":53676,"language":420,"meta":48,"style":48},[31,53810,53811,53819,53827,53835,53843],{"__ignoreMap":48},[52,53812,53813,53815,53817],{"class":54,"line":55},[52,53814,59],{"class":58},[52,53816,63],{"class":371},[52,53818,77],{"class":58},[52,53820,53821,53823,53825],{"class":54,"line":80},[52,53822,83],{"class":58},[52,53824,53654],{"class":371},[52,53826,77],{"class":58},[52,53828,53829,53831,53833],{"class":54,"line":108},[52,53830,2213],{"class":58},[52,53832,2216],{"class":371},[52,53834,105],{"class":58},[52,53836,53837,53839,53841],{"class":54,"line":118},[52,53838,2230],{"class":58},[52,53840,53654],{"class":371},[52,53842,77],{"class":58},[52,53844,53845,53847,53849],{"class":54,"line":594},[52,53846,121],{"class":58},[52,53848,63],{"class":371},[52,53850,77],{"class":58},[43,53852,53854],{"className":222,"code":53853,"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,53855,53856,53866,53870,53884,53888,53897,53905,53909,53913],{"__ignoreMap":48},[52,53857,53858,53860,53862,53864],{"class":54,"line":55},[52,53859,232],{"class":231},[52,53861,9005],{"class":58},[52,53863,238],{"class":231},[52,53865,9010],{"class":73},[52,53867,53868],{"class":54,"line":80},[52,53869,597],{"emptyLinePlaceholder":171},[52,53871,53872,53874,53876,53878,53880,53882],{"class":54,"line":108},[52,53873,1721],{"class":231},[52,53875,1724],{"class":371},[52,53877,1727],{"class":231},[52,53879,1730],{"class":231},[52,53881,1733],{"class":66},[52,53883,1736],{"class":58},[52,53885,53886],{"class":54,"line":118},[52,53887,1751],{"class":58},[52,53889,53890,53892,53895],{"class":54,"line":594},[52,53891,1756],{"class":58},[52,53893,53894],{"class":73},"'WaveDistortion'",[52,53896,4496],{"class":58},[52,53898,53899,53901,53903],{"class":54,"line":600},[52,53900,4501],{"class":58},[52,53902,2869],{"class":73},[52,53904,2129],{"class":58},[52,53906,53907],{"class":54,"line":606},[52,53908,4518],{"class":58},[52,53910,53911],{"class":54,"line":653},[52,53912,1773],{"class":58},[52,53914,53915],{"class":54,"line":662},[52,53916,1778],{"class":58},[156,53918,27273],{},{"title":48,"searchDepth":80,"depth":80,"links":53920},[53921,53922],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/wavedistortion",{"title":53654,"description":53662},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":53929,"title":53930,"body":53931,"category":27535,"componentType":20617,"description":53938,"extension":168,"meta":54123,"navigation":171,"path":54124,"requiresChild":27538,"seo":54125,"stem":54126,"__hash__":54127},"components/docs/components/Weave.md","Weave",{"type":8,"value":53932,"toc":54119},[53933,53936,53939,53941,53943,53946,53948,54117],[11,53934,53930],{"id":53935},"weave",[15,53937,53938],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26676,53940],{"component":53930},[23,53942,26680],{"id":21278},[26682,53944],{":props":53945},"[{\"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,53947,26688],{"id":26687},[217,53949,53950,53979,54007,54035,54063],{":tabs":1543},[43,53951,53953],{"className":45,"code":53952,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,53954,53955,53963,53971],{"__ignoreMap":48},[52,53956,53957,53959,53961],{"class":54,"line":55},[52,53958,59],{"class":58},[52,53960,63],{"class":62},[52,53962,77],{"class":58},[52,53964,53965,53967,53969],{"class":54,"line":80},[52,53966,83],{"class":58},[52,53968,53930],{"class":62},[52,53970,105],{"class":58},[52,53972,53973,53975,53977],{"class":54,"line":108},[52,53974,121],{"class":58},[52,53976,63],{"class":62},[52,53978,77],{"class":58},[43,53980,53981],{"className":360,"code":53952,"language":362,"meta":48,"style":48},[31,53982,53983,53991,53999],{"__ignoreMap":48},[52,53984,53985,53987,53989],{"class":54,"line":55},[52,53986,59],{"class":58},[52,53988,63],{"class":371},[52,53990,77],{"class":58},[52,53992,53993,53995,53997],{"class":54,"line":80},[52,53994,83],{"class":58},[52,53996,53930],{"class":371},[52,53998,105],{"class":58},[52,54000,54001,54003,54005],{"class":54,"line":108},[52,54002,121],{"class":58},[52,54004,63],{"class":371},[52,54006,77],{"class":58},[43,54008,54009],{"className":2507,"code":53952,"language":2509,"meta":48,"style":48},[31,54010,54011,54019,54027],{"__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,53930],{"class":371},[52,54026,105],{"class":58},[52,54028,54029,54031,54033],{"class":54,"line":108},[52,54030,121],{"class":58},[52,54032,63],{"class":371},[52,54034,77],{"class":58},[43,54036,54037],{"className":419,"code":53952,"language":420,"meta":48,"style":48},[31,54038,54039,54047,54055],{"__ignoreMap":48},[52,54040,54041,54043,54045],{"class":54,"line":55},[52,54042,59],{"class":58},[52,54044,63],{"class":371},[52,54046,77],{"class":58},[52,54048,54049,54051,54053],{"class":54,"line":80},[52,54050,83],{"class":58},[52,54052,53930],{"class":371},[52,54054,105],{"class":58},[52,54056,54057,54059,54061],{"class":54,"line":108},[52,54058,121],{"class":58},[52,54060,63],{"class":371},[52,54062,77],{"class":58},[43,54064,54066],{"className":222,"code":54065,"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,54067,54068,54078,54082,54096,54100,54109,54113],{"__ignoreMap":48},[52,54069,54070,54072,54074,54076],{"class":54,"line":55},[52,54071,232],{"class":231},[52,54073,9005],{"class":58},[52,54075,238],{"class":231},[52,54077,9010],{"class":73},[52,54079,54080],{"class":54,"line":80},[52,54081,597],{"emptyLinePlaceholder":171},[52,54083,54084,54086,54088,54090,54092,54094],{"class":54,"line":108},[52,54085,1721],{"class":231},[52,54087,1724],{"class":371},[52,54089,1727],{"class":231},[52,54091,1730],{"class":231},[52,54093,1733],{"class":66},[52,54095,1736],{"class":58},[52,54097,54098],{"class":54,"line":118},[52,54099,1751],{"class":58},[52,54101,54102,54104,54107],{"class":54,"line":594},[52,54103,1756],{"class":58},[52,54105,54106],{"class":73},"'Weave'",[52,54108,2129],{"class":58},[52,54110,54111],{"class":54,"line":600},[52,54112,1773],{"class":58},[52,54114,54115],{"class":54,"line":606},[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/weave",{"title":53930,"description":53938},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"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/WebcamTexture.md","WebcamTexture",{"type":8,"value":54132,"toc":54319},[54133,54136,54139,54141,54143,54146,54148,54317],[11,54134,54130],{"id":54135},"webcamtexture",[15,54137,54138],{},"Display a live webcam feed with customizable object-fit modes",[26676,54140],{"component":54130},[23,54142,26680],{"id":21278},[26682,54144],{":props":54145},"[{\"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,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 \u003CWebcamTexture />\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: 'WebcamTexture', 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},"'WebcamTexture'",[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/webcamtexture",{"title":54130,"description":54138},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":54329,"title":54330,"body":54331,"category":27000,"componentType":20623,"description":54338,"extension":168,"meta":54655,"navigation":171,"path":54656,"requiresChild":171,"seo":54657,"stem":54658,"__hash__":54659},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":54332,"toc":54651},[54333,54336,54339,54341,54343,54346,54348,54649],[11,54334,54330],{"id":54335},"zoomblur",[15,54337,54338],{},"Radial zoom blur expanding from a center point",[26676,54340],{"component":54330},[23,54342,26680],{"id":21278},[26682,54344],{":props":54345},"[{\"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,54347,26688],{"id":26687},[217,54349,54350,54406,54465,54521,54579],{":tabs":1543},[43,54351,54353],{"className":45,"code":54352,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,54354,54355,54363,54370,54378,54382,54390,54398],{"__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],{"class":54,"line":80},[52,54366,83],{"class":58},[52,54368,54369],{"class":62},"ZoomBlur\n",[52,54371,54372,54374,54376],{"class":54,"line":108},[52,54373,17644],{"class":66},[52,54375,70],{"class":58},[52,54377,33063],{"class":73},[52,54379,54380],{"class":54,"line":118},[52,54381,26724],{"class":58},[52,54383,54384,54386,54388],{"class":54,"line":594},[52,54385,2213],{"class":58},[52,54387,2216],{"class":62},[52,54389,105],{"class":58},[52,54391,54392,54394,54396],{"class":54,"line":600},[52,54393,2230],{"class":58},[52,54395,54330],{"class":62},[52,54397,77],{"class":58},[52,54399,54400,54402,54404],{"class":54,"line":606},[52,54401,121],{"class":58},[52,54403,63],{"class":62},[52,54405,77],{"class":58},[43,54407,54409],{"className":360,"code":54408,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,54410,54411,54419,54425,54437,54441,54449,54457],{"__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],{"class":54,"line":80},[52,54422,83],{"class":58},[52,54424,54369],{"class":371},[52,54426,54427,54429,54431,54433,54435],{"class":54,"line":108},[52,54428,17755],{"class":66},[52,54430,70],{"class":231},[52,54432,723],{"class":58},[52,54434,12968],{"class":371},[52,54436,729],{"class":58},[52,54438,54439],{"class":54,"line":118},[52,54440,26724],{"class":58},[52,54442,54443,54445,54447],{"class":54,"line":594},[52,54444,2213],{"class":58},[52,54446,2216],{"class":371},[52,54448,105],{"class":58},[52,54450,54451,54453,54455],{"class":54,"line":600},[52,54452,2230],{"class":58},[52,54454,54330],{"class":371},[52,54456,77],{"class":58},[52,54458,54459,54461,54463],{"class":54,"line":606},[52,54460,121],{"class":58},[52,54462,63],{"class":371},[52,54464,77],{"class":58},[43,54466,54467],{"className":2507,"code":54408,"language":2509,"meta":48,"style":48},[31,54468,54469,54477,54483,54493,54497,54505,54513],{"__ignoreMap":48},[52,54470,54471,54473,54475],{"class":54,"line":55},[52,54472,59],{"class":58},[52,54474,63],{"class":371},[52,54476,77],{"class":58},[52,54478,54479,54481],{"class":54,"line":80},[52,54480,83],{"class":58},[52,54482,54369],{"class":371},[52,54484,54485,54487,54489,54491],{"class":54,"line":108},[52,54486,17755],{"class":66},[52,54488,24620],{"class":58},[52,54490,12968],{"class":371},[52,54492,729],{"class":58},[52,54494,54495],{"class":54,"line":118},[52,54496,26724],{"class":58},[52,54498,54499,54501,54503],{"class":54,"line":594},[52,54500,2213],{"class":58},[52,54502,2216],{"class":371},[52,54504,105],{"class":58},[52,54506,54507,54509,54511],{"class":54,"line":600},[52,54508,2230],{"class":58},[52,54510,54330],{"class":371},[52,54512,77],{"class":58},[52,54514,54515,54517,54519],{"class":54,"line":606},[52,54516,121],{"class":58},[52,54518,63],{"class":371},[52,54520,77],{"class":58},[43,54522,54523],{"className":419,"code":54408,"language":420,"meta":48,"style":48},[31,54524,54525,54533,54539,54551,54555,54563,54571],{"__ignoreMap":48},[52,54526,54527,54529,54531],{"class":54,"line":55},[52,54528,59],{"class":58},[52,54530,63],{"class":371},[52,54532,77],{"class":58},[52,54534,54535,54537],{"class":54,"line":80},[52,54536,83],{"class":58},[52,54538,54369],{"class":371},[52,54540,54541,54543,54545,54547,54549],{"class":54,"line":108},[52,54542,17755],{"class":66},[52,54544,70],{"class":231},[52,54546,723],{"class":58},[52,54548,12968],{"class":371},[52,54550,729],{"class":58},[52,54552,54553],{"class":54,"line":118},[52,54554,26724],{"class":58},[52,54556,54557,54559,54561],{"class":54,"line":594},[52,54558,2213],{"class":58},[52,54560,2216],{"class":371},[52,54562,105],{"class":58},[52,54564,54565,54567,54569],{"class":54,"line":600},[52,54566,2230],{"class":58},[52,54568,54330],{"class":371},[52,54570,77],{"class":58},[52,54572,54573,54575,54577],{"class":54,"line":606},[52,54574,121],{"class":58},[52,54576,63],{"class":371},[52,54578,77],{"class":58},[43,54580,54582],{"className":222,"code":54581,"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,54583,54584,54594,54598,54612,54616,54629,54637,54641,54645],{"__ignoreMap":48},[52,54585,54586,54588,54590,54592],{"class":54,"line":55},[52,54587,232],{"class":231},[52,54589,9005],{"class":58},[52,54591,238],{"class":231},[52,54593,9010],{"class":73},[52,54595,54596],{"class":54,"line":80},[52,54597,597],{"emptyLinePlaceholder":171},[52,54599,54600,54602,54604,54606,54608,54610],{"class":54,"line":108},[52,54601,1721],{"class":231},[52,54603,1724],{"class":371},[52,54605,1727],{"class":231},[52,54607,1730],{"class":231},[52,54609,1733],{"class":66},[52,54611,1736],{"class":58},[52,54613,54614],{"class":54,"line":118},[52,54615,1751],{"class":58},[52,54617,54618,54620,54623,54625,54627],{"class":54,"line":594},[52,54619,1756],{"class":58},[52,54621,54622],{"class":73},"'ZoomBlur'",[52,54624,26969],{"class":58},[52,54626,12968],{"class":371},[52,54628,5033],{"class":58},[52,54630,54631,54633,54635],{"class":54,"line":600},[52,54632,4501],{"class":58},[52,54634,2869],{"class":73},[52,54636,2129],{"class":58},[52,54638,54639],{"class":54,"line":606},[52,54640,4518],{"class":58},[52,54642,54643],{"class":54,"line":653},[52,54644,1773],{"class":58},[52,54646,54647],{"class":54,"line":662},[52,54648,1778],{"class":58},[156,54650,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54652},[54653,54654],{"id":21278,"depth":80,"text":26680},{"id":26687,"depth":80,"text":26688},{},"/docs/components/zoomblur",{"title":54330,"description":54338},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27538,"error":54661},"Not authenticated",{"id":2992,"title":2993,"body":54663,"category":1904,"description":3605,"exclude":167,"extension":168,"forceFramework":167,"icon":3606,"meta":55157,"navigation":171,"path":3608,"seo":55158,"stem":3610,"__hash__":3611},{"type":8,"value":54664,"toc":55151},[54665,54667,54669,54671,54673,54675,54677,54681,54987,54989,54991,54995,54999,55003,55007,55009,55037,55075,55109,55141,55143,55145,55147,55149],[11,54666,2993],{"id":2998},[15,54668,3001],{},[23,54670,3005],{"id":3004},[15,54672,3008],{},[3010,54674],{},[23,54676,3015],{"id":3014},[15,54678,3018,54679,3022],{},[31,54680,3021],{},[217,54682,54683,54707,54771,54835,54889,54917],{":tabs":3025},[43,54684,54685],{"className":190,"code":3028,"language":192,"meta":48,"style":48},[31,54686,54687],{"__ignoreMap":48},[52,54688,54689,54691,54693,54695,54697,54699,54701,54703,54705],{"class":54,"line":55},[52,54690,3035],{"class":66},[52,54692,3038],{"class":73},[52,54694,3041],{"class":73},[52,54696,3044],{"class":371},[52,54698,3047],{"class":73},[52,54700,3050],{"class":73},[52,54702,3053],{"class":73},[52,54704,3056],{"class":371},[52,54706,3059],{"class":73},[43,54708,54709],{"className":3062,"code":3063,"language":3064,"meta":48,"style":48},[31,54710,54711,54715,54719,54725,54731,54741,54747,54755,54759,54763,54767],{"__ignoreMap":48},[52,54712,54713],{"class":54,"line":55},[52,54714,3071],{"class":559},[52,54716,54717],{"class":54,"line":80},[52,54718,3076],{"class":58},[52,54720,54721,54723],{"class":54,"line":108},[52,54722,3081],{"class":371},[52,54724,3084],{"class":58},[52,54726,54727,54729],{"class":54,"line":118},[52,54728,3089],{"class":371},[52,54730,3084],{"class":58},[52,54732,54733,54735,54737,54739],{"class":54,"line":594},[52,54734,3096],{"class":371},[52,54736,624],{"class":58},[52,54738,3101],{"class":73},[52,54740,1746],{"class":58},[52,54742,54743,54745],{"class":54,"line":600},[52,54744,3108],{"class":371},[52,54746,3084],{"class":58},[52,54748,54749,54751,54753],{"class":54,"line":606},[52,54750,3115],{"class":371},[52,54752,624],{"class":58},[52,54754,3120],{"class":73},[52,54756,54757],{"class":54,"line":653},[52,54758,3125],{"class":58},[52,54760,54761],{"class":54,"line":662},[52,54762,3130],{"class":58},[52,54764,54765],{"class":54,"line":671},[52,54766,2919],{"class":58},[52,54768,54769],{"class":54,"line":676},[52,54770,729],{"class":58},[43,54772,54773],{"className":3062,"code":3141,"language":3064,"meta":48,"style":48},[31,54774,54775,54779,54783,54789,54795,54805,54811,54819,54823,54827,54831],{"__ignoreMap":48},[52,54776,54777],{"class":54,"line":55},[52,54778,3148],{"class":559},[52,54780,54781],{"class":54,"line":80},[52,54782,3076],{"class":58},[52,54784,54785,54787],{"class":54,"line":108},[52,54786,3081],{"class":371},[52,54788,3084],{"class":58},[52,54790,54791,54793],{"class":54,"line":118},[52,54792,3089],{"class":371},[52,54794,3084],{"class":58},[52,54796,54797,54799,54801,54803],{"class":54,"line":594},[52,54798,3169],{"class":371},[52,54800,624],{"class":58},[52,54802,3101],{"class":73},[52,54804,1746],{"class":58},[52,54806,54807,54809],{"class":54,"line":600},[52,54808,3108],{"class":371},[52,54810,3084],{"class":58},[52,54812,54813,54815,54817],{"class":54,"line":606},[52,54814,3115],{"class":371},[52,54816,624],{"class":58},[52,54818,3120],{"class":73},[52,54820,54821],{"class":54,"line":653},[52,54822,3125],{"class":58},[52,54824,54825],{"class":54,"line":662},[52,54826,3130],{"class":58},[52,54828,54829],{"class":54,"line":671},[52,54830,2919],{"class":58},[52,54832,54833],{"class":54,"line":676},[52,54834,729],{"class":58},[43,54836,54837],{"className":3062,"code":3208,"language":3064,"meta":48,"style":48},[31,54838,54839,54843,54847,54857,54867,54873,54881,54885],{"__ignoreMap":48},[52,54840,54841],{"class":54,"line":55},[52,54842,3215],{"class":559},[52,54844,54845],{"class":54,"line":80},[52,54846,3076],{"class":58},[52,54848,54849,54851,54853,54855],{"class":54,"line":108},[52,54850,3224],{"class":371},[52,54852,624],{"class":58},[52,54854,3229],{"class":73},[52,54856,1746],{"class":58},[52,54858,54859,54861,54863,54865],{"class":54,"line":118},[52,54860,3236],{"class":371},[52,54862,624],{"class":58},[52,54864,3101],{"class":73},[52,54866,1746],{"class":58},[52,54868,54869,54871],{"class":54,"line":594},[52,54870,3247],{"class":371},[52,54872,3084],{"class":58},[52,54874,54875,54877,54879],{"class":54,"line":600},[52,54876,3254],{"class":371},[52,54878,624],{"class":58},[52,54880,3120],{"class":73},[52,54882,54883],{"class":54,"line":606},[52,54884,2919],{"class":58},[52,54886,54887],{"class":54,"line":653},[52,54888,729],{"class":58},[43,54890,54891],{"className":3269,"code":3270,"language":3271,"meta":48,"style":48},[31,54892,54893,54897,54901,54905,54909,54913],{"__ignoreMap":48},[52,54894,54895],{"class":54,"line":55},[52,54896,3278],{},[52,54898,54899],{"class":54,"line":80},[52,54900,3283],{},[52,54902,54903],{"class":54,"line":108},[52,54904,3288],{},[52,54906,54907],{"class":54,"line":118},[52,54908,597],{"emptyLinePlaceholder":171},[52,54910,54911],{"class":54,"line":594},[52,54912,3297],{},[52,54914,54915],{"class":54,"line":600},[52,54916,3302],{},[43,54918,54919],{"className":3062,"code":3305,"language":3064,"meta":48,"style":48},[31,54920,54921,54925,54931,54937,54947,54957,54963,54971,54975,54979,54983],{"__ignoreMap":48},[52,54922,54923],{"class":54,"line":55},[52,54924,3076],{"class":58},[52,54926,54927,54929],{"class":54,"line":80},[52,54928,3081],{"class":371},[52,54930,3084],{"class":58},[52,54932,54933,54935],{"class":54,"line":108},[52,54934,3089],{"class":371},[52,54936,3084],{"class":58},[52,54938,54939,54941,54943,54945],{"class":54,"line":118},[52,54940,3328],{"class":371},[52,54942,624],{"class":58},[52,54944,3333],{"class":73},[52,54946,1746],{"class":58},[52,54948,54949,54951,54953,54955],{"class":54,"line":594},[52,54950,3096],{"class":371},[52,54952,624],{"class":58},[52,54954,3101],{"class":73},[52,54956,1746],{"class":58},[52,54958,54959,54961],{"class":54,"line":600},[52,54960,3108],{"class":371},[52,54962,3084],{"class":58},[52,54964,54965,54967,54969],{"class":54,"line":606},[52,54966,3115],{"class":371},[52,54968,624],{"class":58},[52,54970,3120],{"class":73},[52,54972,54973],{"class":54,"line":653},[52,54974,3125],{"class":58},[52,54976,54977],{"class":54,"line":662},[52,54978,3130],{"class":58},[52,54980,54981],{"class":54,"line":671},[52,54982,2919],{"class":58},[52,54984,54985],{"class":54,"line":676},[52,54986,729],{"class":58},[23,54988,3379],{"id":3378},[15,54990,3382],{},[15,54992,54993,3388],{},[151,54994,3387],{},[15,54996,54997,3394],{},[151,54998,3393],{},[15,55000,55001,3400],{},[151,55002,3399],{},[15,55004,55005,3406],{},[151,55006,3405],{},[15,55008,3409],{},[43,55010,55011],{"className":190,"code":3412,"language":192,"meta":48,"style":48},[31,55012,55013],{"__ignoreMap":48},[52,55014,55015,55017,55019,55021,55023,55025,55027,55029,55031,55033,55035],{"class":54,"line":55},[52,55016,3419],{"class":66},[52,55018,3422],{"class":73},[52,55020,3425],{"class":73},[52,55022,1724],{"class":73},[52,55024,3430],{"class":73},[52,55026,3433],{"class":73},[52,55028,3436],{"class":73},[52,55030,3439],{"class":73},[52,55032,3442],{"class":73},[52,55034,3445],{"class":73},[52,55036,3448],{"class":73},[43,55038,55039],{"className":190,"code":3451,"language":192,"meta":48,"style":48},[31,55040,55041],{"__ignoreMap":48},[52,55042,55043,55045,55047,55049,55051,55053,55055,55057,55059,55061,55063,55065,55067,55069,55071,55073],{"class":54,"line":55},[52,55044,3458],{"class":66},[52,55046,3445],{"class":73},[52,55048,1724],{"class":73},[52,55050,3465],{"class":73},[52,55052,3433],{"class":73},[52,55054,3470],{"class":73},[52,55056,3473],{"class":73},[52,55058,3476],{"class":73},[52,55060,3479],{"class":73},[52,55062,3482],{"class":73},[52,55064,3485],{"class":73},[52,55066,3488],{"class":73},[52,55068,3445],{"class":73},[52,55070,3493],{"class":73},[52,55072,3496],{"class":73},[52,55074,3499],{"class":73},[43,55076,55077],{"className":190,"code":3502,"language":192,"meta":48,"style":48},[31,55078,55079],{"__ignoreMap":48},[52,55080,55081,55083,55085,55087,55089,55091,55093,55095,55097,55099,55101,55103,55105,55107],{"class":54,"line":55},[52,55082,3509],{"class":66},[52,55084,3433],{"class":73},[52,55086,3514],{"class":73},[52,55088,3430],{"class":73},[52,55090,3476],{"class":73},[52,55092,1724],{"class":73},[52,55094,3523],{"class":73},[52,55096,3526],{"class":73},[52,55098,3442],{"class":73},[52,55100,3531],{"class":73},[52,55102,3534],{"class":73},[52,55104,3537],{"class":73},[52,55106,3433],{"class":73},[52,55108,3542],{"class":73},[43,55110,55111],{"className":190,"code":3545,"language":192,"meta":48,"style":48},[31,55112,55113],{"__ignoreMap":48},[52,55114,55115,55117,55119,55121,55123,55125,55127,55129,55131,55133,55135,55137,55139],{"class":54,"line":55},[52,55116,3458],{"class":66},[52,55118,3422],{"class":73},[52,55120,3556],{"class":73},[52,55122,3442],{"class":73},[52,55124,3445],{"class":73},[52,55126,3563],{"class":73},[52,55128,3566],{"class":73},[52,55130,3569],{"class":73},[52,55132,3572],{"class":73},[52,55134,3575],{"class":73},[52,55136,3473],{"class":73},[52,55138,3476],{"class":73},[52,55140,3582],{"class":73},[23,55142,3586],{"id":3585},[15,55144,3589],{},[15,55146,3592],{},[15,55148,3595],{},[156,55150,3598],{},{"title":48,"searchDepth":80,"depth":80,"links":55152},[55153,55154,55155,55156],{"id":3004,"depth":80,"text":3005},{"id":3014,"depth":80,"text":3015},{"id":3378,"depth":80,"text":3379},{"id":3585,"depth":80,"text":3586},{},{"title":2993,"description":3605},1775751647126]