[{"data":1,"prerenderedAt":55612},["ShallowReactive",2],{"guide-docs":3,"component-docs":26888,"user-pro-status-data":55085,"doc-/docs/guide/solid/ssr":55087,"doc-surr-/docs/guide/solid/ssr":167},[4,176,1515,1912,2149,2991,3838,5318,7957,9958,12733,14793,18461,20808,21176,21811,22454,23353,23970,24548,25090,25684,26208],{"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\":\"StudioBackground\",\"props\":{\"ambientIntensity\":65,\"backIntensity\":25,\"brightness\":100,\"center\":{\"x\":0.5,\"y\":0.88},\"color\":\"#13131f\",\"fillAngle\":53,\"fillIntensity\":9,\"fillSoftness\":94,\"keyIntensity\":11,\"keySoftness\":100,\"wallCurvature\":19}},{\"type\":\"Glass\",\"props\":{\"aberration\":1,\"cutout\":true,\"edgeSoftness\":0.05,\"fresnel\":0.02,\"fresnelColor\":\"#9999bf\",\"fresnelSoftness\":0.52,\"highlight\":0.3,\"refraction\":1.57,\"scale\":1.55,\"shapeSdfUrl\":\"https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/gF3wGRmpQiqP_sdf.bin\",\"shapeType\":\"svg\",\"thickness\":0},\"children\":[{\"type\":\"Swirl\",\"props\":{\"blend\":18,\"colorA\":\"#070417\",\"colorB\":\"#ffffff\",\"colorSpace\":\"hsl\",\"detail\":4.2,\"speed\":0.5}}]},{\"type\":\"FilmGrain\",\"props\":{\"strength\":0.1}},{\"type\":\"CursorRipples\",\"props\":{\"decay\":6,\"intensity\":11.4,\"radius\":0.7}}]}",[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","YKdkenK9Pxfuilc0pUoLPWn89w4pl1GuQH2-TcJlfhc",{"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":3831,"exclude":167,"extension":168,"forceFramework":167,"icon":3832,"meta":3833,"navigation":171,"path":3834,"seo":3835,"stem":3836,"__hash__":3837},"guide/docs/guide/13.mcp.md","Shaders MCP (Pro)",{"type":8,"value":2995,"toc":3824},[2996,2999,3002,3006,3009,3013,3016,3021,3024,3029,3208,3211,3215,3222,3232,3234,3238,3241,3244,3575,3579,3582,3588,3594,3600,3606,3609,3648,3699,3742,3782,3786,3789,3792,3795,3798,3800,3804,3810,3813,3821],[11,2997,2993],{"id":2998},"shaders-mcp-pro",[19,3000],{":preset":3001},"{\"components\":[{\"type\":\"ImageTexture\",\"props\":{\"url\":\"https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/0oExGojy9aDN.png\"}},{\"type\":\"Glass\",\"props\":{\"aberration\":0.63,\"center\":{\"type\":\"mouse-position\",\"originX\":0.247,\"originY\":0.8143872113676732,\"smoothing\":0.3,\"momentum\":0.45},\"edgeSoftness\":0.15,\"fresnel\":0.25,\"fresnelColor\":\"#96abf2\",\"fresnelSoftness\":0.15,\"innerZoom\":0.8,\"refraction\":1.38,\"shape\":{\"type\":\"circleSDF\",\"radius\":0.52},\"thickness\":1}},{\"type\":\"Sharpness\",\"props\":{\"sharpness\":0.5}}]}",[3003,3004],"pro-callout",{"message":3005},"Shaders MCP requires an active Pro account before you can connect.",[15,3007,3008],{},"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,3010,3012],{"id":3011},"connect-your-agent-to-shaders","Connect your agent to shaders",[15,3014,3015],{},"Most MCP clients support OAuth — just add the server URL, and you'll be redirected to sign in with your Shaders account. No API key needed.",[15,3017,3018],{},[151,3019,3020],{},"Cursor",[3022,3023],"cursor-install-button",{},[15,3025,3026],{},[151,3027,3028],{},"Other tools",[217,3030,3032,3060,3115,3154],{":tabs":3031},"[\"Claude Code\", \"Windsurf\", \"Lovable\", \"Other\"]",[43,3033,3035],{"className":190,"code":3034,"language":192,"meta":48,"style":48},"claude mcp add --transport http shaders https://shaders.com/mcp\n",[31,3036,3037],{"__ignoreMap":48},[52,3038,3039,3042,3045,3048,3051,3054,3057],{"class":54,"line":55},[52,3040,3041],{"class":66},"claude",[52,3043,3044],{"class":73}," mcp",[52,3046,3047],{"class":73}," add",[52,3049,3050],{"class":371}," --transport",[52,3052,3053],{"class":73}," http",[52,3055,3056],{"class":73}," shaders",[52,3058,3059],{"class":73}," https://shaders.com/mcp\n",[43,3061,3065],{"className":3062,"code":3063,"language":3064,"meta":48,"style":48},"language-json shiki shiki-themes github-dark","// .windsurf/mcp_config.json\n{\n \"mcpServers\": {\n \"shaders\": {\n \"serverUrl\": \"https://shaders.com/mcp\"\n }\n }\n}\n","json",[31,3066,3067,3072,3077,3085,3092,3102,3107,3111],{"__ignoreMap":48},[52,3068,3069],{"class":54,"line":55},[52,3070,3071],{"class":559},"// .windsurf/mcp_config.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],{"class":54,"line":594},[52,3095,3096],{"class":371}," \"serverUrl\"",[52,3098,624],{"class":58},[52,3100,3101],{"class":73},"\"https://shaders.com/mcp\"\n",[52,3103,3104],{"class":54,"line":600},[52,3105,3106],{"class":58}," }\n",[52,3108,3109],{"class":54,"line":606},[52,3110,2919],{"class":58},[52,3112,3113],{"class":54,"line":653},[52,3114,729],{"class":58},[43,3116,3118],{"className":3062,"code":3117,"language":3064,"meta":48,"style":48},"// Lovable → Settings → Integrations → MCP Servers\n{\n \"name\": \"shaders\",\n \"url\": \"https://shaders.com/mcp\"\n}\n",[31,3119,3120,3125,3129,3141,3150],{"__ignoreMap":48},[52,3121,3122],{"class":54,"line":55},[52,3123,3124],{"class":559},"// Lovable → Settings → Integrations → MCP Servers\n",[52,3126,3127],{"class":54,"line":80},[52,3128,3076],{"class":58},[52,3130,3131,3134,3136,3139],{"class":54,"line":108},[52,3132,3133],{"class":371}," \"name\"",[52,3135,624],{"class":58},[52,3137,3138],{"class":73},"\"shaders\"",[52,3140,1746],{"class":58},[52,3142,3143,3146,3148],{"class":54,"line":118},[52,3144,3145],{"class":371}," \"url\"",[52,3147,624],{"class":58},[52,3149,3101],{"class":73},[52,3151,3152],{"class":54,"line":594},[52,3153,729],{"class":58},[43,3155,3157],{"className":3062,"code":3156,"language":3064,"meta":48,"style":48},"{\n \"mcpServers\": {\n \"shaders\": {\n \"type\": \"http\",\n \"url\": \"https://shaders.com/mcp\"\n }\n }\n}\n",[31,3158,3159,3163,3169,3175,3187,3196,3200,3204],{"__ignoreMap":48},[52,3160,3161],{"class":54,"line":55},[52,3162,3076],{"class":58},[52,3164,3165,3167],{"class":54,"line":80},[52,3166,3081],{"class":371},[52,3168,3084],{"class":58},[52,3170,3171,3173],{"class":54,"line":108},[52,3172,3089],{"class":371},[52,3174,3084],{"class":58},[52,3176,3177,3180,3182,3185],{"class":54,"line":118},[52,3178,3179],{"class":371}," \"type\"",[52,3181,624],{"class":58},[52,3183,3184],{"class":73},"\"http\"",[52,3186,1746],{"class":58},[52,3188,3189,3192,3194],{"class":54,"line":594},[52,3190,3191],{"class":371}," \"url\"",[52,3193,624],{"class":58},[52,3195,3101],{"class":73},[52,3197,3198],{"class":54,"line":600},[52,3199,3106],{"class":58},[52,3201,3202],{"class":54,"line":606},[52,3203,2919],{"class":58},[52,3205,3206],{"class":54,"line":653},[52,3207,729],{"class":58},[3209,3210],"hr",{},[23,3212,3214],{"id":3213},"using-shaders-with-boltnew","Using shaders with Bolt.new",[15,3216,3217],{},[3218,3219],"img",{"alt":3220,"src":3221},"Bolt connector","/images/docs/bolt-connector-active.png",[15,3223,3224,3225,3231],{},"Shaders has an official connector on ",[1139,3226,3230],{"href":3227,"rel":3228},"https://bolt.new",[3229],"nofollow","bolt.new"," — just open the \"Connectors\" panel, find Shaders, and log in with your Pro account. No configuration needed. Once enabled, any request to add or edit a shader will use Shaders MCP.",[3209,3233],{},[23,3235,3237],{"id":3236},"using-an-api-key-instead","Using an API key instead",[15,3239,3240],{},"If your tool doesn't support OAuth, generate a personal API key below and add it to your configuration.",[3242,3243],"api-keys",{},[217,3245,3247,3275,3346,3411,3468,3504],{":tabs":3246},"[\"Claude Code\", \"Cursor\", \"Windsurf\", \"Lovable\", \"Codex\", \"Other\"]",[43,3248,3250],{"className":190,"code":3249,"language":192,"meta":48,"style":48},"claude mcp add --transport http shaders https://shaders.com/mcp --header \"Authorization: Bearer YOUR_API_KEY\"\n",[31,3251,3252],{"__ignoreMap":48},[52,3253,3254,3256,3258,3260,3262,3264,3266,3269,3272],{"class":54,"line":55},[52,3255,3041],{"class":66},[52,3257,3044],{"class":73},[52,3259,3047],{"class":73},[52,3261,3050],{"class":371},[52,3263,3053],{"class":73},[52,3265,3056],{"class":73},[52,3267,3268],{"class":73}," https://shaders.com/mcp",[52,3270,3271],{"class":371}," --header",[52,3273,3274],{"class":73}," \"Authorization: Bearer YOUR_API_KEY\"\n",[43,3276,3278],{"className":3062,"code":3277,"language":3064,"meta":48,"style":48},"// .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",[31,3279,3280,3285,3289,3295,3301,3312,3319,3329,3334,3338,3342],{"__ignoreMap":48},[52,3281,3282],{"class":54,"line":55},[52,3283,3284],{"class":559},"// .cursor/mcp.json\n",[52,3286,3287],{"class":54,"line":80},[52,3288,3076],{"class":58},[52,3290,3291,3293],{"class":54,"line":108},[52,3292,3081],{"class":371},[52,3294,3084],{"class":58},[52,3296,3297,3299],{"class":54,"line":118},[52,3298,3089],{"class":371},[52,3300,3084],{"class":58},[52,3302,3303,3305,3307,3310],{"class":54,"line":594},[52,3304,3191],{"class":371},[52,3306,624],{"class":58},[52,3308,3309],{"class":73},"\"https://shaders.com/mcp\"",[52,3311,1746],{"class":58},[52,3313,3314,3317],{"class":54,"line":600},[52,3315,3316],{"class":371}," \"headers\"",[52,3318,3084],{"class":58},[52,3320,3321,3324,3326],{"class":54,"line":606},[52,3322,3323],{"class":371}," \"Authorization\"",[52,3325,624],{"class":58},[52,3327,3328],{"class":73},"\"Bearer YOUR_API_KEY\"\n",[52,3330,3331],{"class":54,"line":653},[52,3332,3333],{"class":58}," }\n",[52,3335,3336],{"class":54,"line":662},[52,3337,3106],{"class":58},[52,3339,3340],{"class":54,"line":671},[52,3341,2919],{"class":58},[52,3343,3344],{"class":54,"line":676},[52,3345,729],{"class":58},[43,3347,3349],{"className":3062,"code":3348,"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,3350,3351,3355,3359,3365,3371,3381,3387,3395,3399,3403,3407],{"__ignoreMap":48},[52,3352,3353],{"class":54,"line":55},[52,3354,3071],{"class":559},[52,3356,3357],{"class":54,"line":80},[52,3358,3076],{"class":58},[52,3360,3361,3363],{"class":54,"line":108},[52,3362,3081],{"class":371},[52,3364,3084],{"class":58},[52,3366,3367,3369],{"class":54,"line":118},[52,3368,3089],{"class":371},[52,3370,3084],{"class":58},[52,3372,3373,3375,3377,3379],{"class":54,"line":594},[52,3374,3096],{"class":371},[52,3376,624],{"class":58},[52,3378,3309],{"class":73},[52,3380,1746],{"class":58},[52,3382,3383,3385],{"class":54,"line":600},[52,3384,3316],{"class":371},[52,3386,3084],{"class":58},[52,3388,3389,3391,3393],{"class":54,"line":606},[52,3390,3323],{"class":371},[52,3392,624],{"class":58},[52,3394,3328],{"class":73},[52,3396,3397],{"class":54,"line":653},[52,3398,3333],{"class":58},[52,3400,3401],{"class":54,"line":662},[52,3402,3106],{"class":58},[52,3404,3405],{"class":54,"line":671},[52,3406,2919],{"class":58},[52,3408,3409],{"class":54,"line":676},[52,3410,729],{"class":58},[43,3412,3414],{"className":3062,"code":3413,"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,3415,3416,3420,3424,3434,3444,3451,3460,3464],{"__ignoreMap":48},[52,3417,3418],{"class":54,"line":55},[52,3419,3124],{"class":559},[52,3421,3422],{"class":54,"line":80},[52,3423,3076],{"class":58},[52,3425,3426,3428,3430,3432],{"class":54,"line":108},[52,3427,3133],{"class":371},[52,3429,624],{"class":58},[52,3431,3138],{"class":73},[52,3433,1746],{"class":58},[52,3435,3436,3438,3440,3442],{"class":54,"line":118},[52,3437,3145],{"class":371},[52,3439,624],{"class":58},[52,3441,3309],{"class":73},[52,3443,1746],{"class":58},[52,3445,3446,3449],{"class":54,"line":594},[52,3447,3448],{"class":371}," \"headers\"",[52,3450,3084],{"class":58},[52,3452,3453,3456,3458],{"class":54,"line":600},[52,3454,3455],{"class":371}," \"Authorization\"",[52,3457,624],{"class":58},[52,3459,3328],{"class":73},[52,3461,3462],{"class":54,"line":606},[52,3463,2919],{"class":58},[52,3465,3466],{"class":54,"line":653},[52,3467,729],{"class":58},[43,3469,3473],{"className":3470,"code":3471,"language":3472,"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,3474,3475,3480,3485,3490,3494,3499],{"__ignoreMap":48},[52,3476,3477],{"class":54,"line":55},[52,3478,3479],{},"[mcp_servers.shaders]\n",[52,3481,3482],{"class":54,"line":80},[52,3483,3484],{},"enabled = true\n",[52,3486,3487],{"class":54,"line":108},[52,3488,3489],{},"url = \"https://shaders.com/mcp\"\n",[52,3491,3492],{"class":54,"line":118},[52,3493,597],{"emptyLinePlaceholder":171},[52,3495,3496],{"class":54,"line":594},[52,3497,3498],{},"[mcp_servers.shaders.http_headers]\n",[52,3500,3501],{"class":54,"line":600},[52,3502,3503],{},"Authorization = \"Bearer YOUR_API_KEY\"\n",[43,3505,3507],{"className":3062,"code":3506,"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,3508,3509,3513,3519,3525,3535,3545,3551,3559,3563,3567,3571],{"__ignoreMap":48},[52,3510,3511],{"class":54,"line":55},[52,3512,3076],{"class":58},[52,3514,3515,3517],{"class":54,"line":80},[52,3516,3081],{"class":371},[52,3518,3084],{"class":58},[52,3520,3521,3523],{"class":54,"line":108},[52,3522,3089],{"class":371},[52,3524,3084],{"class":58},[52,3526,3527,3529,3531,3533],{"class":54,"line":118},[52,3528,3179],{"class":371},[52,3530,624],{"class":58},[52,3532,3184],{"class":73},[52,3534,1746],{"class":58},[52,3536,3537,3539,3541,3543],{"class":54,"line":594},[52,3538,3191],{"class":371},[52,3540,624],{"class":58},[52,3542,3309],{"class":73},[52,3544,1746],{"class":58},[52,3546,3547,3549],{"class":54,"line":600},[52,3548,3316],{"class":371},[52,3550,3084],{"class":58},[52,3552,3553,3555,3557],{"class":54,"line":606},[52,3554,3323],{"class":371},[52,3556,624],{"class":58},[52,3558,3328],{"class":73},[52,3560,3561],{"class":54,"line":653},[52,3562,3333],{"class":58},[52,3564,3565],{"class":54,"line":662},[52,3566,3106],{"class":58},[52,3568,3569],{"class":54,"line":671},[52,3570,2919],{"class":58},[52,3572,3573],{"class":54,"line":676},[52,3574,729],{"class":58},[23,3576,3578],{"id":3577},"start-prompting","Start prompting",[15,3580,3581],{},"Once connected, your agent gains access to the following capabilities:",[15,3583,3584,3587],{},[151,3585,3586],{},"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,3589,3590,3593],{},[151,3591,3592],{},"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,3595,3596,3599],{},[151,3597,3598],{},"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,3601,3602,3605],{},[151,3603,3604],{},"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,3607,3608],{},"Example prompts to get started:",[43,3610,3612],{"className":190,"code":3611,"language":192,"meta":48,"style":48},"Install my \"Landing Hero\" shader in the hero section as a background.\n",[31,3613,3614],{"__ignoreMap":48},[52,3615,3616,3619,3622,3625,3627,3630,3633,3636,3639,3642,3645],{"class":54,"line":55},[52,3617,3618],{"class":66},"Install",[52,3620,3621],{"class":73}," my",[52,3623,3624],{"class":73}," \"Landing Hero\"",[52,3626,1724],{"class":73},[52,3628,3629],{"class":73}," in",[52,3631,3632],{"class":73}," the",[52,3634,3635],{"class":73}," hero",[52,3637,3638],{"class":73}," section",[52,3640,3641],{"class":73}," as",[52,3643,3644],{"class":73}," a",[52,3646,3647],{"class":73}," background.\n",[43,3649,3651],{"className":190,"code":3650,"language":192,"meta":48,"style":48},"Add a shader to the background of this card, something blue with a subtle flowing animation.\n",[31,3652,3653],{"__ignoreMap":48},[52,3654,3655,3658,3660,3662,3665,3667,3670,3673,3676,3679,3682,3685,3688,3690,3693,3696],{"class":54,"line":55},[52,3656,3657],{"class":66},"Add",[52,3659,3644],{"class":73},[52,3661,1724],{"class":73},[52,3663,3664],{"class":73}," to",[52,3666,3632],{"class":73},[52,3668,3669],{"class":73}," background",[52,3671,3672],{"class":73}," of",[52,3674,3675],{"class":73}," this",[52,3677,3678],{"class":73}," card,",[52,3680,3681],{"class":73}," something",[52,3683,3684],{"class":73}," blue",[52,3686,3687],{"class":73}," with",[52,3689,3644],{"class":73},[52,3691,3692],{"class":73}," subtle",[52,3694,3695],{"class":73}," flowing",[52,3697,3698],{"class":73}," animation.\n",[43,3700,3702],{"className":190,"code":3701,"language":192,"meta":48,"style":48},"Make the circle in this shader get bigger as we scroll past the section.\n",[31,3703,3704],{"__ignoreMap":48},[52,3705,3706,3709,3711,3714,3716,3718,3720,3723,3726,3728,3731,3734,3737,3739],{"class":54,"line":55},[52,3707,3708],{"class":66},"Make",[52,3710,3632],{"class":73},[52,3712,3713],{"class":73}," circle",[52,3715,3629],{"class":73},[52,3717,3675],{"class":73},[52,3719,1724],{"class":73},[52,3721,3722],{"class":73}," get",[52,3724,3725],{"class":73}," bigger",[52,3727,3641],{"class":73},[52,3729,3730],{"class":73}," we",[52,3732,3733],{"class":73}," scroll",[52,3735,3736],{"class":73}," past",[52,3738,3632],{"class":73},[52,3740,3741],{"class":73}," section.\n",[43,3743,3745],{"className":190,"code":3744,"language":192,"meta":48,"style":48},"Add my logo.svg as a liquid glass effect on top of this shader.\n",[31,3746,3747],{"__ignoreMap":48},[52,3748,3749,3751,3753,3756,3758,3760,3763,3766,3769,3772,3775,3777,3779],{"class":54,"line":55},[52,3750,3657],{"class":66},[52,3752,3621],{"class":73},[52,3754,3755],{"class":73}," logo.svg",[52,3757,3641],{"class":73},[52,3759,3644],{"class":73},[52,3761,3762],{"class":73}," liquid",[52,3764,3765],{"class":73}," glass",[52,3767,3768],{"class":73}," effect",[52,3770,3771],{"class":73}," on",[52,3773,3774],{"class":73}," top",[52,3776,3672],{"class":73},[52,3778,3675],{"class":73},[52,3780,3781],{"class":73}," shader.\n",[23,3783,3785],{"id":3784},"pro-knowledge-base","Pro knowledge base",[15,3787,3788],{},"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,3790,3791],{},"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,3793,3794],{},"This is the difference between an agent that knows Shaders exists and one that knows how to use it well.",[3003,3796],{"message":3797},"Make your agent a shader expert...",[3209,3799],{},[11,3801,3803],{"id":3802},"mcp-for-business","MCP for business",[15,3805,3806],{},[3218,3807],{"alt":3808,"src":3809},"Wonder UI","/images/docs/wonder-ui.jpg",[15,3811,3812],{},"We work with companies building design tools, AI site builders, visual editors, and code generators. If your product acts as an agent, Shaders MCP can plug in as a creative layer — giving your users access to production-ready WebGPU effects without them ever leaving your platform.",[15,3814,3815,3816,3820],{},"We're open to partnerships and custom integrations. Reach out at ",[1139,3817,3819],{"href":3818},"mailto:support@shaders.com","support@shaders.com"," and let's figure out a way to connect your users to shader magic.",[156,3822,3823],{},"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":3825},[3826,3827,3828,3829,3830],{"id":3011,"depth":80,"text":3012},{"id":3213,"depth":80,"text":3214},{"id":3236,"depth":80,"text":3237},{"id":3577,"depth":80,"text":3578},{"id":3784,"depth":80,"text":3785},"Connect your AI coding agent to Shaders and build stunning effects without leaving your workflow","robot",{},"/docs/guide/mcp",{"title":2993,"description":3831},"docs/guide/13.mcp","lM4lWPZEWirC_aIS6EnCBft02HWJOxGHSKqH_5hSFgI",{"id":3839,"title":1473,"body":3840,"category":165,"description":5312,"exclude":167,"extension":168,"forceFramework":167,"icon":5313,"meta":5314,"navigation":171,"path":1472,"seo":5315,"stem":5316,"__hash__":5317},"guide/docs/guide/2.composing-effects.md",{"type":8,"value":3841,"toc":5308},[3842,3845,3851,3855,3862,4306,4309,4313,4331,4753,4756,4765,5302,5305],[11,3843,1473],{"id":3844},"composing-effects",[15,3846,3847,3848,3850],{},"Shaders is built around a simple, predictable component structure. Once you understand it, composing complex effects stays intuitive and maintainable. The ",[31,3849,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,3852,3854],{"id":3853},"stacking-components","Stacking Components",[15,3856,3857,3858,3861],{},"Components are evaluated ",[151,3859,3860],{},"top-to-bottom",", in the order they appear in your markup, similar to how regular DOM elements are rendered.",[217,3863,3864,3947,4044,4134,4224],{":tabs":1543},[43,3865,3867],{"className":45,"code":3866,"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,3868,3869,3877,3882,3890,3894,3899,3921,3925,3930,3939],{"__ignoreMap":48},[52,3870,3871,3873,3875],{"class":54,"line":55},[52,3872,59],{"class":58},[52,3874,63],{"class":62},[52,3876,77],{"class":58},[52,3878,3879],{"class":54,"line":80},[52,3880,3881],{"class":559}," \u003C!-- Bottom layer -->\n",[52,3883,3884,3886,3888],{"class":54,"line":108},[52,3885,83],{"class":58},[52,3887,86],{"class":62},[52,3889,105],{"class":58},[52,3891,3892],{"class":54,"line":118},[52,3893,597],{"emptyLinePlaceholder":171},[52,3895,3896],{"class":54,"line":594},[52,3897,3898],{"class":559}," \u003C!-- Middle layer -->\n",[52,3900,3901,3903,3905,3907,3909,3911,3914,3916,3919],{"class":54,"line":600},[52,3902,83],{"class":58},[52,3904,2216],{"class":62},[52,3906,1574],{"class":66},[52,3908,70],{"class":58},[52,3910,2223],{"class":73},[52,3912,3913],{"class":66}," radius",[52,3915,70],{"class":58},[52,3917,3918],{"class":73},"\"0.8\"",[52,3920,105],{"class":58},[52,3922,3923],{"class":54,"line":606},[52,3924,597],{"emptyLinePlaceholder":171},[52,3926,3927],{"class":54,"line":653},[52,3928,3929],{"class":559}," \u003C!-- Top layer -->\n",[52,3931,3932,3934,3937],{"class":54,"line":662},[52,3933,83],{"class":58},[52,3935,3936],{"class":62},"GlassTiles",[52,3938,105],{"class":58},[52,3940,3941,3943,3945],{"class":54,"line":671},[52,3942,121],{"class":58},[52,3944,63],{"class":62},[52,3946,77],{"class":58},[43,3948,3950],{"className":360,"code":3949,"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,3951,3952,3960,3970,3978,3982,3991,4015,4019,4028,4036],{"__ignoreMap":48},[52,3953,3954,3956,3958],{"class":54,"line":55},[52,3955,59],{"class":58},[52,3957,63],{"class":371},[52,3959,77],{"class":58},[52,3961,3962,3965,3968],{"class":54,"line":80},[52,3963,3964],{"class":58}," {",[52,3966,3967],{"class":559},"/* Bottom layer */",[52,3969,729],{"class":58},[52,3971,3972,3974,3976],{"class":54,"line":108},[52,3973,83],{"class":58},[52,3975,86],{"class":371},[52,3977,105],{"class":58},[52,3979,3980],{"class":54,"line":118},[52,3981,597],{"emptyLinePlaceholder":171},[52,3983,3984,3986,3989],{"class":54,"line":594},[52,3985,3964],{"class":58},[52,3987,3988],{"class":559},"/* Middle layer */",[52,3990,729],{"class":58},[52,3992,3993,3995,3997,3999,4001,4003,4005,4007,4009,4012],{"class":54,"line":600},[52,3994,83],{"class":58},[52,3996,2216],{"class":371},[52,3998,1574],{"class":66},[52,4000,70],{"class":231},[52,4002,2223],{"class":73},[52,4004,3913],{"class":66},[52,4006,70],{"class":231},[52,4008,723],{"class":58},[52,4010,4011],{"class":371},"0.8",[52,4013,4014],{"class":58},"} />\n",[52,4016,4017],{"class":54,"line":606},[52,4018,597],{"emptyLinePlaceholder":171},[52,4020,4021,4023,4026],{"class":54,"line":653},[52,4022,3964],{"class":58},[52,4024,4025],{"class":559},"/* Top layer */",[52,4027,729],{"class":58},[52,4029,4030,4032,4034],{"class":54,"line":662},[52,4031,83],{"class":58},[52,4033,3936],{"class":371},[52,4035,105],{"class":58},[52,4037,4038,4040,4042],{"class":54,"line":671},[52,4039,121],{"class":58},[52,4041,63],{"class":371},[52,4043,77],{"class":58},[43,4045,4046],{"className":419,"code":3949,"language":420,"meta":48,"style":48},[31,4047,4048,4056,4064,4072,4076,4084,4106,4110,4118,4126],{"__ignoreMap":48},[52,4049,4050,4052,4054],{"class":54,"line":55},[52,4051,59],{"class":58},[52,4053,63],{"class":371},[52,4055,77],{"class":58},[52,4057,4058,4060,4062],{"class":54,"line":80},[52,4059,3964],{"class":58},[52,4061,3967],{"class":559},[52,4063,729],{"class":58},[52,4065,4066,4068,4070],{"class":54,"line":108},[52,4067,83],{"class":58},[52,4069,86],{"class":371},[52,4071,105],{"class":58},[52,4073,4074],{"class":54,"line":118},[52,4075,597],{"emptyLinePlaceholder":171},[52,4077,4078,4080,4082],{"class":54,"line":594},[52,4079,3964],{"class":58},[52,4081,3988],{"class":559},[52,4083,729],{"class":58},[52,4085,4086,4088,4090,4092,4094,4096,4098,4100,4102,4104],{"class":54,"line":600},[52,4087,83],{"class":58},[52,4089,2216],{"class":371},[52,4091,1574],{"class":66},[52,4093,70],{"class":231},[52,4095,2223],{"class":73},[52,4097,3913],{"class":66},[52,4099,70],{"class":231},[52,4101,723],{"class":58},[52,4103,4011],{"class":371},[52,4105,4014],{"class":58},[52,4107,4108],{"class":54,"line":606},[52,4109,597],{"emptyLinePlaceholder":171},[52,4111,4112,4114,4116],{"class":54,"line":653},[52,4113,3964],{"class":58},[52,4115,4025],{"class":559},[52,4117,729],{"class":58},[52,4119,4120,4122,4124],{"class":54,"line":662},[52,4121,83],{"class":58},[52,4123,3936],{"class":371},[52,4125,105],{"class":58},[52,4127,4128,4130,4132],{"class":54,"line":671},[52,4129,121],{"class":58},[52,4131,63],{"class":371},[52,4133,77],{"class":58},[43,4135,4136],{"className":419,"code":3949,"language":420,"meta":48,"style":48},[31,4137,4138,4146,4154,4162,4166,4174,4196,4200,4208,4216],{"__ignoreMap":48},[52,4139,4140,4142,4144],{"class":54,"line":55},[52,4141,59],{"class":58},[52,4143,63],{"class":371},[52,4145,77],{"class":58},[52,4147,4148,4150,4152],{"class":54,"line":80},[52,4149,3964],{"class":58},[52,4151,3967],{"class":559},[52,4153,729],{"class":58},[52,4155,4156,4158,4160],{"class":54,"line":108},[52,4157,83],{"class":58},[52,4159,86],{"class":371},[52,4161,105],{"class":58},[52,4163,4164],{"class":54,"line":118},[52,4165,597],{"emptyLinePlaceholder":171},[52,4167,4168,4170,4172],{"class":54,"line":594},[52,4169,3964],{"class":58},[52,4171,3988],{"class":559},[52,4173,729],{"class":58},[52,4175,4176,4178,4180,4182,4184,4186,4188,4190,4192,4194],{"class":54,"line":600},[52,4177,83],{"class":58},[52,4179,2216],{"class":371},[52,4181,1574],{"class":66},[52,4183,70],{"class":231},[52,4185,2223],{"class":73},[52,4187,3913],{"class":66},[52,4189,70],{"class":231},[52,4191,723],{"class":58},[52,4193,4011],{"class":371},[52,4195,4014],{"class":58},[52,4197,4198],{"class":54,"line":606},[52,4199,597],{"emptyLinePlaceholder":171},[52,4201,4202,4204,4206],{"class":54,"line":653},[52,4203,3964],{"class":58},[52,4205,4025],{"class":559},[52,4207,729],{"class":58},[52,4209,4210,4212,4214],{"class":54,"line":662},[52,4211,83],{"class":58},[52,4213,3936],{"class":371},[52,4215,105],{"class":58},[52,4217,4218,4220,4222],{"class":54,"line":671},[52,4219,121],{"class":58},[52,4221,63],{"class":371},[52,4223,77],{"class":58},[43,4225,4227],{"className":222,"code":4226,"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,4228,4229,4243,4247,4252,4261,4266,4284,4289,4298,4302],{"__ignoreMap":48},[52,4230,4231,4233,4235,4237,4239,4241],{"class":54,"line":55},[52,4232,1721],{"class":231},[52,4234,1724],{"class":371},[52,4236,1727],{"class":231},[52,4238,1730],{"class":231},[52,4240,1733],{"class":66},[52,4242,1736],{"class":58},[52,4244,4245],{"class":54,"line":80},[52,4246,1751],{"class":58},[52,4248,4249],{"class":54,"line":108},[52,4250,4251],{"class":559}," // Bottom layer\n",[52,4253,4254,4256,4258],{"class":54,"line":118},[52,4255,1756],{"class":58},[52,4257,2126],{"class":73},[52,4259,4260],{"class":58},", props: {} },\n",[52,4262,4263],{"class":54,"line":594},[52,4264,4265],{"class":559}," // Middle layer\n",[52,4267,4268,4270,4272,4274,4276,4279,4281],{"class":54,"line":600},[52,4269,1756],{"class":58},[52,4271,2869],{"class":73},[52,4273,1762],{"class":58},[52,4275,2880],{"class":73},[52,4277,4278],{"class":58},", radius: ",[52,4280,4011],{"class":371},[52,4282,4283],{"class":58}," } },\n",[52,4285,4286],{"class":54,"line":606},[52,4287,4288],{"class":559}," // Top layer\n",[52,4290,4291,4293,4296],{"class":54,"line":653},[52,4292,1756],{"class":58},[52,4294,4295],{"class":73},"'GlassTiles'",[52,4297,2129],{"class":58},[52,4299,4300],{"class":54,"line":662},[52,4301,1773],{"class":58},[52,4303,4304],{"class":54,"line":671},[52,4305,1778],{"class":58},[19,4307],{":preset":4308},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}},{\"type\":\"GlassTiles\"}]}",[23,4310,4312],{"id":4311},"nesting-components","Nesting Components",[15,4314,4315,4316,4319,4320,4323,4324,4327,4328,4330],{},"Notice how the ",[31,4317,4318],{},"\u003CGlassTiles>"," component in the above example applies to all proceeding sibling components. If you wanted to ",[1833,4321,4322],{},"only"," apply glass tiles to the ",[31,4325,4326],{},"\u003CCircle>"," component, you can nest it inside the ",[31,4329,4318],{}," component:",[217,4332,4333,4412,4501,4587,4673],{":tabs":1543},[43,4334,4336],{"className":45,"code":4335,"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,4337,4338,4346,4351,4359,4363,4368,4376,4396,4404],{"__ignoreMap":48},[52,4339,4340,4342,4344],{"class":54,"line":55},[52,4341,59],{"class":58},[52,4343,63],{"class":62},[52,4345,77],{"class":58},[52,4347,4348],{"class":54,"line":80},[52,4349,4350],{"class":559}," \u003C!-- This gradient is NOT affected -->\n",[52,4352,4353,4355,4357],{"class":54,"line":108},[52,4354,83],{"class":58},[52,4356,86],{"class":62},[52,4358,105],{"class":58},[52,4360,4361],{"class":54,"line":118},[52,4362,597],{"emptyLinePlaceholder":171},[52,4364,4365],{"class":54,"line":594},[52,4366,4367],{"class":559}," \u003C!-- Only the Circle inside has glass tiles applied -->\n",[52,4369,4370,4372,4374],{"class":54,"line":600},[52,4371,83],{"class":58},[52,4373,3936],{"class":62},[52,4375,77],{"class":58},[52,4377,4378,4380,4382,4384,4386,4388,4390,4392,4394],{"class":54,"line":606},[52,4379,2213],{"class":58},[52,4381,2216],{"class":62},[52,4383,1574],{"class":66},[52,4385,70],{"class":58},[52,4387,2223],{"class":73},[52,4389,3913],{"class":66},[52,4391,70],{"class":58},[52,4393,3918],{"class":73},[52,4395,105],{"class":58},[52,4397,4398,4400,4402],{"class":54,"line":653},[52,4399,2230],{"class":58},[52,4401,3936],{"class":62},[52,4403,77],{"class":58},[52,4405,4406,4408,4410],{"class":54,"line":662},[52,4407,121],{"class":58},[52,4409,63],{"class":62},[52,4411,77],{"class":58},[43,4413,4415],{"className":360,"code":4414,"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,4416,4417,4425,4434,4442,4446,4455,4463,4485,4493],{"__ignoreMap":48},[52,4418,4419,4421,4423],{"class":54,"line":55},[52,4420,59],{"class":58},[52,4422,63],{"class":371},[52,4424,77],{"class":58},[52,4426,4427,4429,4432],{"class":54,"line":80},[52,4428,3964],{"class":58},[52,4430,4431],{"class":559},"/* This gradient is NOT affected */",[52,4433,729],{"class":58},[52,4435,4436,4438,4440],{"class":54,"line":108},[52,4437,83],{"class":58},[52,4439,86],{"class":371},[52,4441,105],{"class":58},[52,4443,4444],{"class":54,"line":118},[52,4445,597],{"emptyLinePlaceholder":171},[52,4447,4448,4450,4453],{"class":54,"line":594},[52,4449,3964],{"class":58},[52,4451,4452],{"class":559},"/* Only the Circle inside has glass tiles applied */",[52,4454,729],{"class":58},[52,4456,4457,4459,4461],{"class":54,"line":600},[52,4458,83],{"class":58},[52,4460,3936],{"class":371},[52,4462,77],{"class":58},[52,4464,4465,4467,4469,4471,4473,4475,4477,4479,4481,4483],{"class":54,"line":606},[52,4466,2213],{"class":58},[52,4468,2216],{"class":371},[52,4470,1574],{"class":66},[52,4472,70],{"class":231},[52,4474,2223],{"class":73},[52,4476,3913],{"class":66},[52,4478,70],{"class":231},[52,4480,723],{"class":58},[52,4482,4011],{"class":371},[52,4484,4014],{"class":58},[52,4486,4487,4489,4491],{"class":54,"line":653},[52,4488,2230],{"class":58},[52,4490,3936],{"class":371},[52,4492,77],{"class":58},[52,4494,4495,4497,4499],{"class":54,"line":662},[52,4496,121],{"class":58},[52,4498,63],{"class":371},[52,4500,77],{"class":58},[43,4502,4503],{"className":419,"code":4414,"language":420,"meta":48,"style":48},[31,4504,4505,4513,4521,4529,4533,4541,4549,4571,4579],{"__ignoreMap":48},[52,4506,4507,4509,4511],{"class":54,"line":55},[52,4508,59],{"class":58},[52,4510,63],{"class":371},[52,4512,77],{"class":58},[52,4514,4515,4517,4519],{"class":54,"line":80},[52,4516,3964],{"class":58},[52,4518,4431],{"class":559},[52,4520,729],{"class":58},[52,4522,4523,4525,4527],{"class":54,"line":108},[52,4524,83],{"class":58},[52,4526,86],{"class":371},[52,4528,105],{"class":58},[52,4530,4531],{"class":54,"line":118},[52,4532,597],{"emptyLinePlaceholder":171},[52,4534,4535,4537,4539],{"class":54,"line":594},[52,4536,3964],{"class":58},[52,4538,4452],{"class":559},[52,4540,729],{"class":58},[52,4542,4543,4545,4547],{"class":54,"line":600},[52,4544,83],{"class":58},[52,4546,3936],{"class":371},[52,4548,77],{"class":58},[52,4550,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569],{"class":54,"line":606},[52,4552,2213],{"class":58},[52,4554,2216],{"class":371},[52,4556,1574],{"class":66},[52,4558,70],{"class":231},[52,4560,2223],{"class":73},[52,4562,3913],{"class":66},[52,4564,70],{"class":231},[52,4566,723],{"class":58},[52,4568,4011],{"class":371},[52,4570,4014],{"class":58},[52,4572,4573,4575,4577],{"class":54,"line":653},[52,4574,2230],{"class":58},[52,4576,3936],{"class":371},[52,4578,77],{"class":58},[52,4580,4581,4583,4585],{"class":54,"line":662},[52,4582,121],{"class":58},[52,4584,63],{"class":371},[52,4586,77],{"class":58},[43,4588,4589],{"className":419,"code":4414,"language":420,"meta":48,"style":48},[31,4590,4591,4599,4607,4615,4619,4627,4635,4657,4665],{"__ignoreMap":48},[52,4592,4593,4595,4597],{"class":54,"line":55},[52,4594,59],{"class":58},[52,4596,63],{"class":371},[52,4598,77],{"class":58},[52,4600,4601,4603,4605],{"class":54,"line":80},[52,4602,3964],{"class":58},[52,4604,4431],{"class":559},[52,4606,729],{"class":58},[52,4608,4609,4611,4613],{"class":54,"line":108},[52,4610,83],{"class":58},[52,4612,86],{"class":371},[52,4614,105],{"class":58},[52,4616,4617],{"class":54,"line":118},[52,4618,597],{"emptyLinePlaceholder":171},[52,4620,4621,4623,4625],{"class":54,"line":594},[52,4622,3964],{"class":58},[52,4624,4452],{"class":559},[52,4626,729],{"class":58},[52,4628,4629,4631,4633],{"class":54,"line":600},[52,4630,83],{"class":58},[52,4632,3936],{"class":371},[52,4634,77],{"class":58},[52,4636,4637,4639,4641,4643,4645,4647,4649,4651,4653,4655],{"class":54,"line":606},[52,4638,2213],{"class":58},[52,4640,2216],{"class":371},[52,4642,1574],{"class":66},[52,4644,70],{"class":231},[52,4646,2223],{"class":73},[52,4648,3913],{"class":66},[52,4650,70],{"class":231},[52,4652,723],{"class":58},[52,4654,4011],{"class":371},[52,4656,4014],{"class":58},[52,4658,4659,4661,4663],{"class":54,"line":653},[52,4660,2230],{"class":58},[52,4662,3936],{"class":371},[52,4664,77],{"class":58},[52,4666,4667,4669,4671],{"class":54,"line":662},[52,4668,121],{"class":58},[52,4670,63],{"class":371},[52,4672,77],{"class":58},[43,4674,4676],{"className":222,"code":4675,"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,4677,4678,4692,4696,4701,4709,4714,4723,4740,4745,4749],{"__ignoreMap":48},[52,4679,4680,4682,4684,4686,4688,4690],{"class":54,"line":55},[52,4681,1721],{"class":231},[52,4683,1724],{"class":371},[52,4685,1727],{"class":231},[52,4687,1730],{"class":231},[52,4689,1733],{"class":66},[52,4691,1736],{"class":58},[52,4693,4694],{"class":54,"line":80},[52,4695,1751],{"class":58},[52,4697,4698],{"class":54,"line":108},[52,4699,4700],{"class":559}," // This gradient is NOT affected\n",[52,4702,4703,4705,4707],{"class":54,"line":118},[52,4704,1756],{"class":58},[52,4706,2126],{"class":73},[52,4708,4260],{"class":58},[52,4710,4711],{"class":54,"line":594},[52,4712,4713],{"class":559}," // Only the Circle inside has glass tiles applied\n",[52,4715,4716,4718,4720],{"class":54,"line":600},[52,4717,1756],{"class":58},[52,4719,4295],{"class":73},[52,4721,4722],{"class":58},", props: {}, children: [\n",[52,4724,4725,4728,4730,4732,4734,4736,4738],{"class":54,"line":606},[52,4726,4727],{"class":58}," { type: ",[52,4729,2869],{"class":73},[52,4731,1762],{"class":58},[52,4733,2880],{"class":73},[52,4735,4278],{"class":58},[52,4737,4011],{"class":371},[52,4739,1768],{"class":58},[52,4741,4742],{"class":54,"line":653},[52,4743,4744],{"class":58}," ]}\n",[52,4746,4747],{"class":54,"line":662},[52,4748,1773],{"class":58},[52,4750,4751],{"class":54,"line":671},[52,4752,1778],{"class":58},[19,4754],{":preset":4755},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}",[15,4757,4758,4759,4761,4762,4764],{},"You can nest as many components as you like, so long as they accept children. Generally speaking, components that generate pixels (such as ",[31,4760,86],{},") don't accept children, whereas components that apply effects (such as ",[31,4763,3936],{},") do. The component reference in this documentation shows if the particular component accepts children.",[217,4766,4767,4870,4984,5094,5204],{":tabs":1543},[43,4768,4770],{"className":45,"code":4769,"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,4771,4772,4780,4785,4793,4797,4802,4818,4826,4846,4854,4862],{"__ignoreMap":48},[52,4773,4774,4776,4778],{"class":54,"line":55},[52,4775,59],{"class":58},[52,4777,63],{"class":62},[52,4779,77],{"class":58},[52,4781,4782],{"class":54,"line":80},[52,4783,4784],{"class":559}," \u003C!-- Unaffected -->\n",[52,4786,4787,4789,4791],{"class":54,"line":108},[52,4788,83],{"class":58},[52,4790,86],{"class":62},[52,4792,105],{"class":58},[52,4794,4795],{"class":54,"line":118},[52,4796,597],{"emptyLinePlaceholder":171},[52,4798,4799],{"class":54,"line":594},[52,4800,4801],{"class":559}," \u003C!-- Nested effects apply only to Circle -->\n",[52,4803,4804,4806,4809,4811,4813,4816],{"class":54,"line":600},[52,4805,83],{"class":58},[52,4807,4808],{"class":62},"GridDistortion",[52,4810,3913],{"class":66},[52,4812,70],{"class":58},[52,4814,4815],{"class":73},"\"2\"",[52,4817,77],{"class":58},[52,4819,4820,4822,4824],{"class":54,"line":606},[52,4821,2213],{"class":58},[52,4823,3936],{"class":62},[52,4825,77],{"class":58},[52,4827,4828,4830,4832,4834,4836,4838,4840,4842,4844],{"class":54,"line":653},[52,4829,2476],{"class":58},[52,4831,2216],{"class":62},[52,4833,1574],{"class":66},[52,4835,70],{"class":58},[52,4837,2223],{"class":73},[52,4839,3913],{"class":66},[52,4841,70],{"class":58},[52,4843,3918],{"class":73},[52,4845,105],{"class":58},[52,4847,4848,4850,4852],{"class":54,"line":662},[52,4849,2491],{"class":58},[52,4851,3936],{"class":62},[52,4853,77],{"class":58},[52,4855,4856,4858,4860],{"class":54,"line":671},[52,4857,2230],{"class":58},[52,4859,4808],{"class":62},[52,4861,77],{"class":58},[52,4863,4864,4866,4868],{"class":54,"line":676},[52,4865,121],{"class":58},[52,4867,63],{"class":62},[52,4869,77],{"class":58},[43,4871,4873],{"className":360,"code":4872,"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,4874,4875,4883,4892,4900,4904,4913,4930,4938,4960,4968,4976],{"__ignoreMap":48},[52,4876,4877,4879,4881],{"class":54,"line":55},[52,4878,59],{"class":58},[52,4880,63],{"class":371},[52,4882,77],{"class":58},[52,4884,4885,4887,4890],{"class":54,"line":80},[52,4886,3964],{"class":58},[52,4888,4889],{"class":559},"/* Unaffected */",[52,4891,729],{"class":58},[52,4893,4894,4896,4898],{"class":54,"line":108},[52,4895,83],{"class":58},[52,4897,86],{"class":371},[52,4899,105],{"class":58},[52,4901,4902],{"class":54,"line":118},[52,4903,597],{"emptyLinePlaceholder":171},[52,4905,4906,4908,4911],{"class":54,"line":594},[52,4907,3964],{"class":58},[52,4909,4910],{"class":559},"/* Nested effects apply only to Circle */",[52,4912,729],{"class":58},[52,4914,4915,4917,4919,4921,4923,4925,4928],{"class":54,"line":600},[52,4916,83],{"class":58},[52,4918,4808],{"class":371},[52,4920,3913],{"class":66},[52,4922,70],{"class":231},[52,4924,723],{"class":58},[52,4926,4927],{"class":371},"2",[52,4929,1999],{"class":58},[52,4931,4932,4934,4936],{"class":54,"line":606},[52,4933,2213],{"class":58},[52,4935,3936],{"class":371},[52,4937,77],{"class":58},[52,4939,4940,4942,4944,4946,4948,4950,4952,4954,4956,4958],{"class":54,"line":653},[52,4941,2476],{"class":58},[52,4943,2216],{"class":371},[52,4945,1574],{"class":66},[52,4947,70],{"class":231},[52,4949,2223],{"class":73},[52,4951,3913],{"class":66},[52,4953,70],{"class":231},[52,4955,723],{"class":58},[52,4957,4011],{"class":371},[52,4959,4014],{"class":58},[52,4961,4962,4964,4966],{"class":54,"line":662},[52,4963,2491],{"class":58},[52,4965,3936],{"class":371},[52,4967,77],{"class":58},[52,4969,4970,4972,4974],{"class":54,"line":671},[52,4971,2230],{"class":58},[52,4973,4808],{"class":371},[52,4975,77],{"class":58},[52,4977,4978,4980,4982],{"class":54,"line":676},[52,4979,121],{"class":58},[52,4981,63],{"class":371},[52,4983,77],{"class":58},[43,4985,4986],{"className":419,"code":4872,"language":420,"meta":48,"style":48},[31,4987,4988,4996,5004,5012,5016,5024,5040,5048,5070,5078,5086],{"__ignoreMap":48},[52,4989,4990,4992,4994],{"class":54,"line":55},[52,4991,59],{"class":58},[52,4993,63],{"class":371},[52,4995,77],{"class":58},[52,4997,4998,5000,5002],{"class":54,"line":80},[52,4999,3964],{"class":58},[52,5001,4889],{"class":559},[52,5003,729],{"class":58},[52,5005,5006,5008,5010],{"class":54,"line":108},[52,5007,83],{"class":58},[52,5009,86],{"class":371},[52,5011,105],{"class":58},[52,5013,5014],{"class":54,"line":118},[52,5015,597],{"emptyLinePlaceholder":171},[52,5017,5018,5020,5022],{"class":54,"line":594},[52,5019,3964],{"class":58},[52,5021,4910],{"class":559},[52,5023,729],{"class":58},[52,5025,5026,5028,5030,5032,5034,5036,5038],{"class":54,"line":600},[52,5027,83],{"class":58},[52,5029,4808],{"class":371},[52,5031,3913],{"class":66},[52,5033,70],{"class":231},[52,5035,723],{"class":58},[52,5037,4927],{"class":371},[52,5039,1999],{"class":58},[52,5041,5042,5044,5046],{"class":54,"line":606},[52,5043,2213],{"class":58},[52,5045,3936],{"class":371},[52,5047,77],{"class":58},[52,5049,5050,5052,5054,5056,5058,5060,5062,5064,5066,5068],{"class":54,"line":653},[52,5051,2476],{"class":58},[52,5053,2216],{"class":371},[52,5055,1574],{"class":66},[52,5057,70],{"class":231},[52,5059,2223],{"class":73},[52,5061,3913],{"class":66},[52,5063,70],{"class":231},[52,5065,723],{"class":58},[52,5067,4011],{"class":371},[52,5069,4014],{"class":58},[52,5071,5072,5074,5076],{"class":54,"line":662},[52,5073,2491],{"class":58},[52,5075,3936],{"class":371},[52,5077,77],{"class":58},[52,5079,5080,5082,5084],{"class":54,"line":671},[52,5081,2230],{"class":58},[52,5083,4808],{"class":371},[52,5085,77],{"class":58},[52,5087,5088,5090,5092],{"class":54,"line":676},[52,5089,121],{"class":58},[52,5091,63],{"class":371},[52,5093,77],{"class":58},[43,5095,5096],{"className":419,"code":4872,"language":420,"meta":48,"style":48},[31,5097,5098,5106,5114,5122,5126,5134,5150,5158,5180,5188,5196],{"__ignoreMap":48},[52,5099,5100,5102,5104],{"class":54,"line":55},[52,5101,59],{"class":58},[52,5103,63],{"class":371},[52,5105,77],{"class":58},[52,5107,5108,5110,5112],{"class":54,"line":80},[52,5109,3964],{"class":58},[52,5111,4889],{"class":559},[52,5113,729],{"class":58},[52,5115,5116,5118,5120],{"class":54,"line":108},[52,5117,83],{"class":58},[52,5119,86],{"class":371},[52,5121,105],{"class":58},[52,5123,5124],{"class":54,"line":118},[52,5125,597],{"emptyLinePlaceholder":171},[52,5127,5128,5130,5132],{"class":54,"line":594},[52,5129,3964],{"class":58},[52,5131,4910],{"class":559},[52,5133,729],{"class":58},[52,5135,5136,5138,5140,5142,5144,5146,5148],{"class":54,"line":600},[52,5137,83],{"class":58},[52,5139,4808],{"class":371},[52,5141,3913],{"class":66},[52,5143,70],{"class":231},[52,5145,723],{"class":58},[52,5147,4927],{"class":371},[52,5149,1999],{"class":58},[52,5151,5152,5154,5156],{"class":54,"line":606},[52,5153,2213],{"class":58},[52,5155,3936],{"class":371},[52,5157,77],{"class":58},[52,5159,5160,5162,5164,5166,5168,5170,5172,5174,5176,5178],{"class":54,"line":653},[52,5161,2476],{"class":58},[52,5163,2216],{"class":371},[52,5165,1574],{"class":66},[52,5167,70],{"class":231},[52,5169,2223],{"class":73},[52,5171,3913],{"class":66},[52,5173,70],{"class":231},[52,5175,723],{"class":58},[52,5177,4011],{"class":371},[52,5179,4014],{"class":58},[52,5181,5182,5184,5186],{"class":54,"line":662},[52,5183,2491],{"class":58},[52,5185,3936],{"class":371},[52,5187,77],{"class":58},[52,5189,5190,5192,5194],{"class":54,"line":671},[52,5191,2230],{"class":58},[52,5193,4808],{"class":371},[52,5195,77],{"class":58},[52,5197,5198,5200,5202],{"class":54,"line":676},[52,5199,121],{"class":58},[52,5201,63],{"class":371},[52,5203,77],{"class":58},[43,5205,5207],{"className":222,"code":5206,"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,5208,5209,5223,5227,5232,5240,5245,5260,5268,5285,5290,5294,5298],{"__ignoreMap":48},[52,5210,5211,5213,5215,5217,5219,5221],{"class":54,"line":55},[52,5212,1721],{"class":231},[52,5214,1724],{"class":371},[52,5216,1727],{"class":231},[52,5218,1730],{"class":231},[52,5220,1733],{"class":66},[52,5222,1736],{"class":58},[52,5224,5225],{"class":54,"line":80},[52,5226,1751],{"class":58},[52,5228,5229],{"class":54,"line":108},[52,5230,5231],{"class":559}," // Unaffected\n",[52,5233,5234,5236,5238],{"class":54,"line":118},[52,5235,1756],{"class":58},[52,5237,2126],{"class":73},[52,5239,4260],{"class":58},[52,5241,5242],{"class":54,"line":594},[52,5243,5244],{"class":559}," // Nested effects apply only to Circle\n",[52,5246,5247,5249,5252,5255,5257],{"class":54,"line":600},[52,5248,1756],{"class":58},[52,5250,5251],{"class":73},"'GridDistortion'",[52,5253,5254],{"class":58},", props: { radius: ",[52,5256,4927],{"class":371},[52,5258,5259],{"class":58}," }, children: [\n",[52,5261,5262,5264,5266],{"class":54,"line":606},[52,5263,4727],{"class":58},[52,5265,4295],{"class":73},[52,5267,4722],{"class":58},[52,5269,5270,5273,5275,5277,5279,5281,5283],{"class":54,"line":653},[52,5271,5272],{"class":58}," { type: ",[52,5274,2869],{"class":73},[52,5276,1762],{"class":58},[52,5278,2880],{"class":73},[52,5280,4278],{"class":58},[52,5282,4011],{"class":371},[52,5284,1768],{"class":58},[52,5286,5287],{"class":54,"line":662},[52,5288,5289],{"class":58}," ]}\n",[52,5291,5292],{"class":54,"line":671},[52,5293,4744],{"class":58},[52,5295,5296],{"class":54,"line":676},[52,5297,1773],{"class":58},[52,5299,5300],{"class":54,"line":682},[52,5301,1778],{"class":58},[19,5303],{":preset":5304},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"GridDistortion\",\"props\":{\"radius\":2},\"children\":[{\"type\":\"GlassTiles\",\"children\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8}}]}]}]}",[156,5306,5307],{},"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":5309},[5310,5311],{"id":3853,"depth":80,"text":3854},{"id":4311,"depth":80,"text":4312},"How to stack and nest components to create complex effects","layer-plus",{},{"title":1473,"description":5312},"docs/guide/2.composing-effects","5LYxb9Lo1q--M770AtDR45qeulw8wiudjDStJCjsgMk",{"id":5319,"title":5320,"body":5321,"category":7949,"description":7950,"exclude":167,"extension":168,"forceFramework":167,"icon":7951,"meta":7952,"navigation":171,"path":7953,"seo":7954,"stem":7955,"__hash__":7956},"guide/docs/guide/3.blending-masking.md","Blending & Masking",{"type":8,"value":5322,"toc":7939},[5323,5326,5329,5333,5344,5687,5690,5695,5791,5795,5798,6373,6376,6379,6393,6708,6711,6714,6718,6729,6751,6762,6766,6781,6787,7196,7199,7205,7209,7216,7250,7934,7937],[11,5324,5320],{"id":5325},"blending-masking",[15,5327,5328],{},"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,5330,5332],{"id":5331},"blend-modes","Blend Modes",[15,5334,5335,5336,5339,5340,5343],{},"Every component has a ",[31,5337,5338],{},"blendMode"," prop that controls how it composites with the layers below it. By default, components use ",[31,5341,5342],{},"normal"," blending (standard alpha compositing), but you have 20 different blend modes to choose from.",[217,5345,5346,5413,5486,5556,5626],{":tabs":1543},[43,5347,5349],{"className":45,"code":5348,"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,5350,5351,5359,5367,5371,5376,5405],{"__ignoreMap":48},[52,5352,5353,5355,5357],{"class":54,"line":55},[52,5354,59],{"class":58},[52,5356,63],{"class":62},[52,5358,77],{"class":58},[52,5360,5361,5363,5365],{"class":54,"line":80},[52,5362,83],{"class":58},[52,5364,86],{"class":62},[52,5366,105],{"class":58},[52,5368,5369],{"class":54,"line":108},[52,5370,597],{"emptyLinePlaceholder":171},[52,5372,5373],{"class":54,"line":118},[52,5374,5375],{"class":559}," \u003C!-- Multiply darkens by multiplying colors -->\n",[52,5377,5378,5380,5382,5384,5386,5388,5390,5392,5395,5398,5400,5403],{"class":54,"line":594},[52,5379,83],{"class":58},[52,5381,2216],{"class":62},[52,5383,1574],{"class":66},[52,5385,70],{"class":58},[52,5387,2223],{"class":73},[52,5389,3913],{"class":66},[52,5391,70],{"class":58},[52,5393,5394],{"class":73},"\"0.5\"",[52,5396,5397],{"class":66}," blendMode",[52,5399,70],{"class":58},[52,5401,5402],{"class":73},"\"multiply\"",[52,5404,105],{"class":58},[52,5406,5407,5409,5411],{"class":54,"line":600},[52,5408,121],{"class":58},[52,5410,63],{"class":62},[52,5412,77],{"class":58},[43,5414,5416],{"className":360,"code":5415,"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,5417,5418,5426,5434,5438,5447,5478],{"__ignoreMap":48},[52,5419,5420,5422,5424],{"class":54,"line":55},[52,5421,59],{"class":58},[52,5423,63],{"class":371},[52,5425,77],{"class":58},[52,5427,5428,5430,5432],{"class":54,"line":80},[52,5429,83],{"class":58},[52,5431,86],{"class":371},[52,5433,105],{"class":58},[52,5435,5436],{"class":54,"line":108},[52,5437,597],{"emptyLinePlaceholder":171},[52,5439,5440,5442,5445],{"class":54,"line":118},[52,5441,3964],{"class":58},[52,5443,5444],{"class":559},"/* Multiply darkens by multiplying colors */",[52,5446,729],{"class":58},[52,5448,5449,5451,5453,5455,5457,5459,5461,5463,5465,5468,5470,5472,5474,5476],{"class":54,"line":594},[52,5450,83],{"class":58},[52,5452,2216],{"class":371},[52,5454,1574],{"class":66},[52,5456,70],{"class":231},[52,5458,2223],{"class":73},[52,5460,3913],{"class":66},[52,5462,70],{"class":231},[52,5464,723],{"class":58},[52,5466,5467],{"class":371},"0.5",[52,5469,2577],{"class":58},[52,5471,5338],{"class":66},[52,5473,70],{"class":231},[52,5475,5402],{"class":73},[52,5477,105],{"class":58},[52,5479,5480,5482,5484],{"class":54,"line":600},[52,5481,121],{"class":58},[52,5483,63],{"class":371},[52,5485,77],{"class":58},[43,5487,5488],{"className":419,"code":5415,"language":420,"meta":48,"style":48},[31,5489,5490,5498,5506,5510,5518,5548],{"__ignoreMap":48},[52,5491,5492,5494,5496],{"class":54,"line":55},[52,5493,59],{"class":58},[52,5495,63],{"class":371},[52,5497,77],{"class":58},[52,5499,5500,5502,5504],{"class":54,"line":80},[52,5501,83],{"class":58},[52,5503,86],{"class":371},[52,5505,105],{"class":58},[52,5507,5508],{"class":54,"line":108},[52,5509,597],{"emptyLinePlaceholder":171},[52,5511,5512,5514,5516],{"class":54,"line":118},[52,5513,3964],{"class":58},[52,5515,5444],{"class":559},[52,5517,729],{"class":58},[52,5519,5520,5522,5524,5526,5528,5530,5532,5534,5536,5538,5540,5542,5544,5546],{"class":54,"line":594},[52,5521,83],{"class":58},[52,5523,2216],{"class":371},[52,5525,1574],{"class":66},[52,5527,70],{"class":231},[52,5529,2223],{"class":73},[52,5531,3913],{"class":66},[52,5533,70],{"class":231},[52,5535,723],{"class":58},[52,5537,5467],{"class":371},[52,5539,2577],{"class":58},[52,5541,5338],{"class":66},[52,5543,70],{"class":231},[52,5545,5402],{"class":73},[52,5547,105],{"class":58},[52,5549,5550,5552,5554],{"class":54,"line":600},[52,5551,121],{"class":58},[52,5553,63],{"class":371},[52,5555,77],{"class":58},[43,5557,5558],{"className":419,"code":5415,"language":420,"meta":48,"style":48},[31,5559,5560,5568,5576,5580,5588,5618],{"__ignoreMap":48},[52,5561,5562,5564,5566],{"class":54,"line":55},[52,5563,59],{"class":58},[52,5565,63],{"class":371},[52,5567,77],{"class":58},[52,5569,5570,5572,5574],{"class":54,"line":80},[52,5571,83],{"class":58},[52,5573,86],{"class":371},[52,5575,105],{"class":58},[52,5577,5578],{"class":54,"line":108},[52,5579,597],{"emptyLinePlaceholder":171},[52,5581,5582,5584,5586],{"class":54,"line":118},[52,5583,3964],{"class":58},[52,5585,5444],{"class":559},[52,5587,729],{"class":58},[52,5589,5590,5592,5594,5596,5598,5600,5602,5604,5606,5608,5610,5612,5614,5616],{"class":54,"line":594},[52,5591,83],{"class":58},[52,5593,2216],{"class":371},[52,5595,1574],{"class":66},[52,5597,70],{"class":231},[52,5599,2223],{"class":73},[52,5601,3913],{"class":66},[52,5603,70],{"class":231},[52,5605,723],{"class":58},[52,5607,5467],{"class":371},[52,5609,2577],{"class":58},[52,5611,5338],{"class":66},[52,5613,70],{"class":231},[52,5615,5402],{"class":73},[52,5617,105],{"class":58},[52,5619,5620,5622,5624],{"class":54,"line":600},[52,5621,121],{"class":58},[52,5623,63],{"class":371},[52,5625,77],{"class":58},[43,5627,5629],{"className":222,"code":5628,"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,5630,5631,5645,5649,5657,5679,5683],{"__ignoreMap":48},[52,5632,5633,5635,5637,5639,5641,5643],{"class":54,"line":55},[52,5634,1721],{"class":231},[52,5636,1724],{"class":371},[52,5638,1727],{"class":231},[52,5640,1730],{"class":231},[52,5642,1733],{"class":66},[52,5644,1736],{"class":58},[52,5646,5647],{"class":54,"line":80},[52,5648,1751],{"class":58},[52,5650,5651,5653,5655],{"class":54,"line":108},[52,5652,1756],{"class":58},[52,5654,2126],{"class":73},[52,5656,4260],{"class":58},[52,5658,5659,5661,5663,5665,5667,5669,5671,5674,5677],{"class":54,"line":118},[52,5660,1756],{"class":58},[52,5662,2869],{"class":73},[52,5664,1762],{"class":58},[52,5666,2880],{"class":73},[52,5668,4278],{"class":58},[52,5670,5467],{"class":371},[52,5672,5673],{"class":58},", blendMode: ",[52,5675,5676],{"class":73},"'multiply'",[52,5678,1768],{"class":58},[52,5680,5681],{"class":54,"line":594},[52,5682,1773],{"class":58},[52,5684,5685],{"class":54,"line":600},[52,5686,1778],{"class":58},[19,5688],{":preset":5689},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.5,\"blendMode\":\"multiply\"}}]}",[15,5691,5692],{},[151,5693,5694],{},"Available blend modes:",[1465,5696,5697,5704,5721,5738,5752,5763,5780],{},[1468,5698,5699,624,5702],{},[151,5700,5701],{},"Basic",[31,5703,5342],{},[1468,5705,5706,624,5709,1881,5712,1881,5715,1881,5718],{},[151,5707,5708],{},"Darkening",[31,5710,5711],{},"multiply",[31,5713,5714],{},"darken",[31,5716,5717],{},"colorBurn",[31,5719,5720],{},"linearBurn",[1468,5722,5723,624,5726,1881,5729,1881,5732,1881,5735],{},[151,5724,5725],{},"Lightening",[31,5727,5728],{},"screen",[31,5730,5731],{},"lighten",[31,5733,5734],{},"colorDodge",[31,5736,5737],{},"linearDodge",[1468,5739,5740,624,5743,1881,5746,1881,5749],{},[151,5741,5742],{},"Contrast",[31,5744,5745],{},"overlay",[31,5747,5748],{},"softLight",[31,5750,5751],{},"hardLight",[1468,5753,5754,624,5757,1881,5760],{},[151,5755,5756],{},"Difference",[31,5758,5759],{},"difference",[31,5761,5762],{},"exclusion",[1468,5764,5765,624,5768,1881,5771,1881,5774,1881,5777],{},[151,5766,5767],{},"Color",[31,5769,5770],{},"hue",[31,5772,5773],{},"saturation",[31,5775,5776],{},"color",[31,5778,5779],{},"luminosity",[1468,5781,5782,624,5785,1881,5788],{},[151,5783,5784],{},"Color Space Blending",[31,5786,5787],{},"normal-oklab",[31,5789,5790],{},"normal-oklch",[2925,5792,5794],{"id":5793},"combining-blend-modes","Combining Blend Modes",[15,5796,5797],{},"Use different blend modes on multiple layers to create complex interactions:",[217,5799,5800,5905,6032,6152,6272],{":tabs":1543},[43,5801,5803],{"className":45,"code":5802,"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,5804,5805,5813,5821,5825,5862,5897],{"__ignoreMap":48},[52,5806,5807,5809,5811],{"class":54,"line":55},[52,5808,59],{"class":58},[52,5810,63],{"class":62},[52,5812,77],{"class":58},[52,5814,5815,5817,5819],{"class":54,"line":80},[52,5816,83],{"class":58},[52,5818,86],{"class":62},[52,5820,105],{"class":58},[52,5822,5823],{"class":54,"line":108},[52,5824,597],{"emptyLinePlaceholder":171},[52,5826,5827,5829,5831,5833,5835,5838,5840,5842,5845,5848,5850,5853,5855,5857,5860],{"class":54,"line":118},[52,5828,83],{"class":58},[52,5830,2216],{"class":62},[52,5832,1574],{"class":66},[52,5834,70],{"class":58},[52,5836,5837],{"class":73},"\"#00ffff\"",[52,5839,3913],{"class":66},[52,5841,70],{"class":58},[52,5843,5844],{"class":73},"\"0.6\"",[52,5846,5847],{"class":66}," :center",[52,5849,70],{"class":58},[52,5851,5852],{"class":73},"\"{ x: 0.4, y: 0.5 }\"",[52,5854,5397],{"class":66},[52,5856,70],{"class":58},[52,5858,5859],{"class":73},"\"screen\"",[52,5861,105],{"class":58},[52,5863,5864,5866,5868,5870,5872,5875,5877,5879,5881,5883,5885,5888,5890,5892,5895],{"class":54,"line":594},[52,5865,83],{"class":58},[52,5867,2216],{"class":62},[52,5869,1574],{"class":66},[52,5871,70],{"class":58},[52,5873,5874],{"class":73},"\"#ff00ff\"",[52,5876,3913],{"class":66},[52,5878,70],{"class":58},[52,5880,5844],{"class":73},[52,5882,5847],{"class":66},[52,5884,70],{"class":58},[52,5886,5887],{"class":73},"\"{ x: 0.6, y: 0.5 }\"",[52,5889,5397],{"class":66},[52,5891,70],{"class":58},[52,5893,5894],{"class":73},"\"difference\"",[52,5896,105],{"class":58},[52,5898,5899,5901,5903],{"class":54,"line":600},[52,5900,121],{"class":58},[52,5902,63],{"class":62},[52,5904,77],{"class":58},[43,5906,5908],{"className":360,"code":5907,"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,5909,5910,5918,5926,5930,5980,6024],{"__ignoreMap":48},[52,5911,5912,5914,5916],{"class":54,"line":55},[52,5913,59],{"class":58},[52,5915,63],{"class":371},[52,5917,77],{"class":58},[52,5919,5920,5922,5924],{"class":54,"line":80},[52,5921,83],{"class":58},[52,5923,86],{"class":371},[52,5925,105],{"class":58},[52,5927,5928],{"class":54,"line":108},[52,5929,597],{"emptyLinePlaceholder":171},[52,5931,5932,5934,5936,5938,5940,5942,5944,5946,5948,5951,5953,5956,5958,5961,5964,5967,5969,5972,5974,5976,5978],{"class":54,"line":118},[52,5933,83],{"class":58},[52,5935,2216],{"class":371},[52,5937,1574],{"class":66},[52,5939,70],{"class":231},[52,5941,5837],{"class":73},[52,5943,3913],{"class":66},[52,5945,70],{"class":231},[52,5947,723],{"class":58},[52,5949,5950],{"class":371},"0.6",[52,5952,2577],{"class":58},[52,5954,5955],{"class":66},"center",[52,5957,70],{"class":231},[52,5959,5960],{"class":58},"{{ x: ",[52,5962,5963],{"class":371},"0.4",[52,5965,5966],{"class":58},", y: ",[52,5968,5467],{"class":371},[52,5970,5971],{"class":58}," }} ",[52,5973,5338],{"class":66},[52,5975,70],{"class":231},[52,5977,5859],{"class":73},[52,5979,105],{"class":58},[52,5981,5982,5984,5986,5988,5990,5992,5994,5996,5998,6000,6002,6004,6006,6008,6010,6012,6014,6016,6018,6020,6022],{"class":54,"line":594},[52,5983,83],{"class":58},[52,5985,2216],{"class":371},[52,5987,1574],{"class":66},[52,5989,70],{"class":231},[52,5991,5874],{"class":73},[52,5993,3913],{"class":66},[52,5995,70],{"class":231},[52,5997,723],{"class":58},[52,5999,5950],{"class":371},[52,6001,2577],{"class":58},[52,6003,5955],{"class":66},[52,6005,70],{"class":231},[52,6007,5960],{"class":58},[52,6009,5950],{"class":371},[52,6011,5966],{"class":58},[52,6013,5467],{"class":371},[52,6015,5971],{"class":58},[52,6017,5338],{"class":66},[52,6019,70],{"class":231},[52,6021,5894],{"class":73},[52,6023,105],{"class":58},[52,6025,6026,6028,6030],{"class":54,"line":600},[52,6027,121],{"class":58},[52,6029,63],{"class":371},[52,6031,77],{"class":58},[43,6033,6034],{"className":419,"code":5907,"language":420,"meta":48,"style":48},[31,6035,6036,6044,6052,6056,6100,6144],{"__ignoreMap":48},[52,6037,6038,6040,6042],{"class":54,"line":55},[52,6039,59],{"class":58},[52,6041,63],{"class":371},[52,6043,77],{"class":58},[52,6045,6046,6048,6050],{"class":54,"line":80},[52,6047,83],{"class":58},[52,6049,86],{"class":371},[52,6051,105],{"class":58},[52,6053,6054],{"class":54,"line":108},[52,6055,597],{"emptyLinePlaceholder":171},[52,6057,6058,6060,6062,6064,6066,6068,6070,6072,6074,6076,6078,6080,6082,6084,6086,6088,6090,6092,6094,6096,6098],{"class":54,"line":118},[52,6059,83],{"class":58},[52,6061,2216],{"class":371},[52,6063,1574],{"class":66},[52,6065,70],{"class":231},[52,6067,5837],{"class":73},[52,6069,3913],{"class":66},[52,6071,70],{"class":231},[52,6073,723],{"class":58},[52,6075,5950],{"class":371},[52,6077,2577],{"class":58},[52,6079,5955],{"class":66},[52,6081,70],{"class":231},[52,6083,5960],{"class":58},[52,6085,5963],{"class":371},[52,6087,5966],{"class":58},[52,6089,5467],{"class":371},[52,6091,5971],{"class":58},[52,6093,5338],{"class":66},[52,6095,70],{"class":231},[52,6097,5859],{"class":73},[52,6099,105],{"class":58},[52,6101,6102,6104,6106,6108,6110,6112,6114,6116,6118,6120,6122,6124,6126,6128,6130,6132,6134,6136,6138,6140,6142],{"class":54,"line":594},[52,6103,83],{"class":58},[52,6105,2216],{"class":371},[52,6107,1574],{"class":66},[52,6109,70],{"class":231},[52,6111,5874],{"class":73},[52,6113,3913],{"class":66},[52,6115,70],{"class":231},[52,6117,723],{"class":58},[52,6119,5950],{"class":371},[52,6121,2577],{"class":58},[52,6123,5955],{"class":66},[52,6125,70],{"class":231},[52,6127,5960],{"class":58},[52,6129,5950],{"class":371},[52,6131,5966],{"class":58},[52,6133,5467],{"class":371},[52,6135,5971],{"class":58},[52,6137,5338],{"class":66},[52,6139,70],{"class":231},[52,6141,5894],{"class":73},[52,6143,105],{"class":58},[52,6145,6146,6148,6150],{"class":54,"line":600},[52,6147,121],{"class":58},[52,6149,63],{"class":371},[52,6151,77],{"class":58},[43,6153,6154],{"className":419,"code":5907,"language":420,"meta":48,"style":48},[31,6155,6156,6164,6172,6176,6220,6264],{"__ignoreMap":48},[52,6157,6158,6160,6162],{"class":54,"line":55},[52,6159,59],{"class":58},[52,6161,63],{"class":371},[52,6163,77],{"class":58},[52,6165,6166,6168,6170],{"class":54,"line":80},[52,6167,83],{"class":58},[52,6169,86],{"class":371},[52,6171,105],{"class":58},[52,6173,6174],{"class":54,"line":108},[52,6175,597],{"emptyLinePlaceholder":171},[52,6177,6178,6180,6182,6184,6186,6188,6190,6192,6194,6196,6198,6200,6202,6204,6206,6208,6210,6212,6214,6216,6218],{"class":54,"line":118},[52,6179,83],{"class":58},[52,6181,2216],{"class":371},[52,6183,1574],{"class":66},[52,6185,70],{"class":231},[52,6187,5837],{"class":73},[52,6189,3913],{"class":66},[52,6191,70],{"class":231},[52,6193,723],{"class":58},[52,6195,5950],{"class":371},[52,6197,2577],{"class":58},[52,6199,5955],{"class":66},[52,6201,70],{"class":231},[52,6203,5960],{"class":58},[52,6205,5963],{"class":371},[52,6207,5966],{"class":58},[52,6209,5467],{"class":371},[52,6211,5971],{"class":58},[52,6213,5338],{"class":66},[52,6215,70],{"class":231},[52,6217,5859],{"class":73},[52,6219,105],{"class":58},[52,6221,6222,6224,6226,6228,6230,6232,6234,6236,6238,6240,6242,6244,6246,6248,6250,6252,6254,6256,6258,6260,6262],{"class":54,"line":594},[52,6223,83],{"class":58},[52,6225,2216],{"class":371},[52,6227,1574],{"class":66},[52,6229,70],{"class":231},[52,6231,5874],{"class":73},[52,6233,3913],{"class":66},[52,6235,70],{"class":231},[52,6237,723],{"class":58},[52,6239,5950],{"class":371},[52,6241,2577],{"class":58},[52,6243,5955],{"class":66},[52,6245,70],{"class":231},[52,6247,5960],{"class":58},[52,6249,5950],{"class":371},[52,6251,5966],{"class":58},[52,6253,5467],{"class":371},[52,6255,5971],{"class":58},[52,6257,5338],{"class":66},[52,6259,70],{"class":231},[52,6261,5894],{"class":73},[52,6263,105],{"class":58},[52,6265,6266,6268,6270],{"class":54,"line":600},[52,6267,121],{"class":58},[52,6269,63],{"class":371},[52,6271,77],{"class":58},[43,6273,6275],{"className":222,"code":6274,"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,6276,6277,6291,6295,6303,6335,6365,6369],{"__ignoreMap":48},[52,6278,6279,6281,6283,6285,6287,6289],{"class":54,"line":55},[52,6280,1721],{"class":231},[52,6282,1724],{"class":371},[52,6284,1727],{"class":231},[52,6286,1730],{"class":231},[52,6288,1733],{"class":66},[52,6290,1736],{"class":58},[52,6292,6293],{"class":54,"line":80},[52,6294,1751],{"class":58},[52,6296,6297,6299,6301],{"class":54,"line":108},[52,6298,1756],{"class":58},[52,6300,2126],{"class":73},[52,6302,4260],{"class":58},[52,6304,6305,6307,6309,6311,6314,6316,6318,6321,6323,6325,6327,6330,6333],{"class":54,"line":118},[52,6306,1756],{"class":58},[52,6308,2869],{"class":73},[52,6310,1762],{"class":58},[52,6312,6313],{"class":73},"'#00ffff'",[52,6315,4278],{"class":58},[52,6317,5950],{"class":371},[52,6319,6320],{"class":58},", center: { x: ",[52,6322,5963],{"class":371},[52,6324,5966],{"class":58},[52,6326,5467],{"class":371},[52,6328,6329],{"class":58}," }, blendMode: ",[52,6331,6332],{"class":73},"'screen'",[52,6334,4283],{"class":58},[52,6336,6337,6339,6341,6343,6346,6348,6350,6352,6354,6356,6358,6360,6363],{"class":54,"line":594},[52,6338,1756],{"class":58},[52,6340,2869],{"class":73},[52,6342,1762],{"class":58},[52,6344,6345],{"class":73},"'#ff00ff'",[52,6347,4278],{"class":58},[52,6349,5950],{"class":371},[52,6351,6320],{"class":58},[52,6353,5950],{"class":371},[52,6355,5966],{"class":58},[52,6357,5467],{"class":371},[52,6359,6329],{"class":58},[52,6361,6362],{"class":73},"'difference'",[52,6364,1768],{"class":58},[52,6366,6367],{"class":54,"line":600},[52,6368,1773],{"class":58},[52,6370,6371],{"class":54,"line":606},[52,6372,1778],{"class":58},[19,6374],{":preset":6375},"{\"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,6377,6378],{"id":2584},"Opacity",[15,6380,6381,6382,6384,6385,6388,6389,6392],{},"Control layer transparency with the ",[31,6383,2584],{}," prop. Values range from ",[31,6386,6387],{},"0"," (fully transparent) to ",[31,6390,6391],{},"1"," (fully opaque):",[217,6394,6395,6455,6520,6584,6648],{":tabs":1543},[43,6396,6398],{"className":45,"code":6397,"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,6399,6400,6408,6416,6420,6447],{"__ignoreMap":48},[52,6401,6402,6404,6406],{"class":54,"line":55},[52,6403,59],{"class":58},[52,6405,63],{"class":62},[52,6407,77],{"class":58},[52,6409,6410,6412,6414],{"class":54,"line":80},[52,6411,83],{"class":58},[52,6413,86],{"class":62},[52,6415,105],{"class":58},[52,6417,6418],{"class":54,"line":108},[52,6419,597],{"emptyLinePlaceholder":171},[52,6421,6422,6424,6426,6428,6430,6432,6434,6436,6438,6441,6443,6445],{"class":54,"line":118},[52,6423,83],{"class":58},[52,6425,2216],{"class":62},[52,6427,1574],{"class":66},[52,6429,70],{"class":58},[52,6431,2223],{"class":73},[52,6433,3913],{"class":66},[52,6435,70],{"class":58},[52,6437,3918],{"class":73},[52,6439,6440],{"class":66}," opacity",[52,6442,70],{"class":58},[52,6444,5394],{"class":73},[52,6446,105],{"class":58},[52,6448,6449,6451,6453],{"class":54,"line":594},[52,6450,121],{"class":58},[52,6452,63],{"class":62},[52,6454,77],{"class":58},[43,6456,6458],{"className":360,"code":6457,"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,6459,6460,6468,6476,6480,6512],{"__ignoreMap":48},[52,6461,6462,6464,6466],{"class":54,"line":55},[52,6463,59],{"class":58},[52,6465,63],{"class":371},[52,6467,77],{"class":58},[52,6469,6470,6472,6474],{"class":54,"line":80},[52,6471,83],{"class":58},[52,6473,86],{"class":371},[52,6475,105],{"class":58},[52,6477,6478],{"class":54,"line":108},[52,6479,597],{"emptyLinePlaceholder":171},[52,6481,6482,6484,6486,6488,6490,6492,6494,6496,6498,6500,6502,6504,6506,6508,6510],{"class":54,"line":118},[52,6483,83],{"class":58},[52,6485,2216],{"class":371},[52,6487,1574],{"class":66},[52,6489,70],{"class":231},[52,6491,2223],{"class":73},[52,6493,3913],{"class":66},[52,6495,70],{"class":231},[52,6497,723],{"class":58},[52,6499,4011],{"class":371},[52,6501,2577],{"class":58},[52,6503,2584],{"class":66},[52,6505,70],{"class":231},[52,6507,723],{"class":58},[52,6509,5467],{"class":371},[52,6511,4014],{"class":58},[52,6513,6514,6516,6518],{"class":54,"line":594},[52,6515,121],{"class":58},[52,6517,63],{"class":371},[52,6519,77],{"class":58},[43,6521,6522],{"className":419,"code":6457,"language":420,"meta":48,"style":48},[31,6523,6524,6532,6540,6544,6576],{"__ignoreMap":48},[52,6525,6526,6528,6530],{"class":54,"line":55},[52,6527,59],{"class":58},[52,6529,63],{"class":371},[52,6531,77],{"class":58},[52,6533,6534,6536,6538],{"class":54,"line":80},[52,6535,83],{"class":58},[52,6537,86],{"class":371},[52,6539,105],{"class":58},[52,6541,6542],{"class":54,"line":108},[52,6543,597],{"emptyLinePlaceholder":171},[52,6545,6546,6548,6550,6552,6554,6556,6558,6560,6562,6564,6566,6568,6570,6572,6574],{"class":54,"line":118},[52,6547,83],{"class":58},[52,6549,2216],{"class":371},[52,6551,1574],{"class":66},[52,6553,70],{"class":231},[52,6555,2223],{"class":73},[52,6557,3913],{"class":66},[52,6559,70],{"class":231},[52,6561,723],{"class":58},[52,6563,4011],{"class":371},[52,6565,2577],{"class":58},[52,6567,2584],{"class":66},[52,6569,70],{"class":231},[52,6571,723],{"class":58},[52,6573,5467],{"class":371},[52,6575,4014],{"class":58},[52,6577,6578,6580,6582],{"class":54,"line":594},[52,6579,121],{"class":58},[52,6581,63],{"class":371},[52,6583,77],{"class":58},[43,6585,6586],{"className":419,"code":6457,"language":420,"meta":48,"style":48},[31,6587,6588,6596,6604,6608,6640],{"__ignoreMap":48},[52,6589,6590,6592,6594],{"class":54,"line":55},[52,6591,59],{"class":58},[52,6593,63],{"class":371},[52,6595,77],{"class":58},[52,6597,6598,6600,6602],{"class":54,"line":80},[52,6599,83],{"class":58},[52,6601,86],{"class":371},[52,6603,105],{"class":58},[52,6605,6606],{"class":54,"line":108},[52,6607,597],{"emptyLinePlaceholder":171},[52,6609,6610,6612,6614,6616,6618,6620,6622,6624,6626,6628,6630,6632,6634,6636,6638],{"class":54,"line":118},[52,6611,83],{"class":58},[52,6613,2216],{"class":371},[52,6615,1574],{"class":66},[52,6617,70],{"class":231},[52,6619,2223],{"class":73},[52,6621,3913],{"class":66},[52,6623,70],{"class":231},[52,6625,723],{"class":58},[52,6627,4011],{"class":371},[52,6629,2577],{"class":58},[52,6631,2584],{"class":66},[52,6633,70],{"class":231},[52,6635,723],{"class":58},[52,6637,5467],{"class":371},[52,6639,4014],{"class":58},[52,6641,6642,6644,6646],{"class":54,"line":594},[52,6643,121],{"class":58},[52,6645,63],{"class":371},[52,6647,77],{"class":58},[43,6649,6651],{"className":222,"code":6650,"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,6652,6653,6667,6671,6679,6700,6704],{"__ignoreMap":48},[52,6654,6655,6657,6659,6661,6663,6665],{"class":54,"line":55},[52,6656,1721],{"class":231},[52,6658,1724],{"class":371},[52,6660,1727],{"class":231},[52,6662,1730],{"class":231},[52,6664,1733],{"class":66},[52,6666,1736],{"class":58},[52,6668,6669],{"class":54,"line":80},[52,6670,1751],{"class":58},[52,6672,6673,6675,6677],{"class":54,"line":108},[52,6674,1756],{"class":58},[52,6676,2126],{"class":73},[52,6678,4260],{"class":58},[52,6680,6681,6683,6685,6687,6689,6691,6693,6696,6698],{"class":54,"line":118},[52,6682,1756],{"class":58},[52,6684,2869],{"class":73},[52,6686,1762],{"class":58},[52,6688,2880],{"class":73},[52,6690,4278],{"class":58},[52,6692,4011],{"class":371},[52,6694,6695],{"class":58},", opacity: ",[52,6697,5467],{"class":371},[52,6699,1768],{"class":58},[52,6701,6702],{"class":54,"line":594},[52,6703,1773],{"class":58},[52,6705,6706],{"class":54,"line":600},[52,6707,1778],{"class":58},[19,6709],{":preset":6710},"{\"components\":[{\"type\":\"LinearGradient\"},{\"type\":\"Circle\",\"props\":{\"color\":\"#ff0088\",\"radius\":0.8,\"opacity\":0.5}}]}",[15,6712,6713],{},"Opacity works with all blend modes. It multiplies the component's alpha channel before blending, giving you fine-grained control over layer strength.",[23,6715,6717],{"id":6716},"visibility","Visibility",[15,6719,5335,6720,6722,6723,6725,6726,6728],{},[31,6721,2374],{}," prop that defaults to ",[31,6724,1996],{},". Setting it to ",[31,6727,2292],{}," completely removes the component from the composition, as if it wasn't there at all:",[43,6730,6734],{"className":6731,"code":6732,"language":6733,"meta":48,"style":48},"language-vue shiki shiki-themes github-dark","\u003CCircle visible={false} />\n","vue",[31,6735,6736],{"__ignoreMap":48},[52,6737,6738,6740,6742,6744,6746,6749],{"class":54,"line":55},[52,6739,59],{"class":58},[52,6741,2216],{"class":62},[52,6743,2281],{"class":66},[52,6745,70],{"class":58},[52,6747,6748],{"class":73},"{false}",[52,6750,105],{"class":58},[15,6752,6753,6754,6757,6758,6761],{},"This is different from ",[31,6755,6756],{},"opacity={0}",", which still processes the component but makes it transparent. Use ",[31,6759,6760],{},"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,6763,6765],{"id":6764},"masking","Masking",[15,6767,6768,6769,6772,6773,6776,6777,6780],{},"Masks let you selectively reveal portions of a component based on another component's pixels. Give one component an ",[31,6770,6771],{},"id"," property (",[31,6774,6775],{},"string",") and then set ",[31,6778,6779],{},"maskSource"," to that ID on another component to use it as a mask.",[15,6782,6783,6784,6786],{},"Masks typically have ",[31,6785,6760],{}," so they don't appear in the final output—they only control visibility of other components:",[217,6788,6789,6869,6958,7044,7130],{":tabs":1543},[43,6790,6792],{"className":45,"code":6791,"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,6793,6794,6802,6807,6837,6841,6846,6861],{"__ignoreMap":48},[52,6795,6796,6798,6800],{"class":54,"line":55},[52,6797,59],{"class":58},[52,6799,63],{"class":62},[52,6801,77],{"class":58},[52,6803,6804],{"class":54,"line":80},[52,6805,6806],{"class":559}," \u003C!-- This circle acts as the mask -->\n",[52,6808,6809,6811,6813,6816,6818,6821,6823,6825,6827,6830,6832,6835],{"class":54,"line":108},[52,6810,83],{"class":58},[52,6812,2216],{"class":62},[52,6814,6815],{"class":66}," id",[52,6817,70],{"class":58},[52,6819,6820],{"class":73},"\"myMask\"",[52,6822,3913],{"class":66},[52,6824,70],{"class":58},[52,6826,3918],{"class":73},[52,6828,6829],{"class":66}," :visible",[52,6831,70],{"class":58},[52,6833,6834],{"class":73},"\"false\"",[52,6836,105],{"class":58},[52,6838,6839],{"class":54,"line":118},[52,6840,597],{"emptyLinePlaceholder":171},[52,6842,6843],{"class":54,"line":594},[52,6844,6845],{"class":559}," \u003C!-- This gradient is masked by the circle -->\n",[52,6847,6848,6850,6852,6855,6857,6859],{"class":54,"line":600},[52,6849,83],{"class":58},[52,6851,86],{"class":62},[52,6853,6854],{"class":66}," maskSource",[52,6856,70],{"class":58},[52,6858,6820],{"class":73},[52,6860,105],{"class":58},[52,6862,6863,6865,6867],{"class":54,"line":606},[52,6864,121],{"class":58},[52,6866,63],{"class":62},[52,6868,77],{"class":58},[43,6870,6872],{"className":360,"code":6871,"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,6873,6874,6882,6891,6923,6927,6936,6950],{"__ignoreMap":48},[52,6875,6876,6878,6880],{"class":54,"line":55},[52,6877,59],{"class":58},[52,6879,63],{"class":371},[52,6881,77],{"class":58},[52,6883,6884,6886,6889],{"class":54,"line":80},[52,6885,3964],{"class":58},[52,6887,6888],{"class":559},"/* This circle acts as the mask */",[52,6890,729],{"class":58},[52,6892,6893,6895,6897,6899,6901,6903,6905,6907,6909,6911,6913,6915,6917,6919,6921],{"class":54,"line":108},[52,6894,83],{"class":58},[52,6896,2216],{"class":371},[52,6898,6815],{"class":66},[52,6900,70],{"class":231},[52,6902,6820],{"class":73},[52,6904,3913],{"class":66},[52,6906,70],{"class":231},[52,6908,723],{"class":58},[52,6910,4011],{"class":371},[52,6912,2577],{"class":58},[52,6914,2374],{"class":66},[52,6916,70],{"class":231},[52,6918,723],{"class":58},[52,6920,2292],{"class":371},[52,6922,4014],{"class":58},[52,6924,6925],{"class":54,"line":118},[52,6926,597],{"emptyLinePlaceholder":171},[52,6928,6929,6931,6934],{"class":54,"line":594},[52,6930,3964],{"class":58},[52,6932,6933],{"class":559},"/* This gradient is masked by the circle */",[52,6935,729],{"class":58},[52,6937,6938,6940,6942,6944,6946,6948],{"class":54,"line":600},[52,6939,83],{"class":58},[52,6941,86],{"class":371},[52,6943,6854],{"class":66},[52,6945,70],{"class":231},[52,6947,6820],{"class":73},[52,6949,105],{"class":58},[52,6951,6952,6954,6956],{"class":54,"line":606},[52,6953,121],{"class":58},[52,6955,63],{"class":371},[52,6957,77],{"class":58},[43,6959,6960],{"className":419,"code":6871,"language":420,"meta":48,"style":48},[31,6961,6962,6970,6978,7010,7014,7022,7036],{"__ignoreMap":48},[52,6963,6964,6966,6968],{"class":54,"line":55},[52,6965,59],{"class":58},[52,6967,63],{"class":371},[52,6969,77],{"class":58},[52,6971,6972,6974,6976],{"class":54,"line":80},[52,6973,3964],{"class":58},[52,6975,6888],{"class":559},[52,6977,729],{"class":58},[52,6979,6980,6982,6984,6986,6988,6990,6992,6994,6996,6998,7000,7002,7004,7006,7008],{"class":54,"line":108},[52,6981,83],{"class":58},[52,6983,2216],{"class":371},[52,6985,6815],{"class":66},[52,6987,70],{"class":231},[52,6989,6820],{"class":73},[52,6991,3913],{"class":66},[52,6993,70],{"class":231},[52,6995,723],{"class":58},[52,6997,4011],{"class":371},[52,6999,2577],{"class":58},[52,7001,2374],{"class":66},[52,7003,70],{"class":231},[52,7005,723],{"class":58},[52,7007,2292],{"class":371},[52,7009,4014],{"class":58},[52,7011,7012],{"class":54,"line":118},[52,7013,597],{"emptyLinePlaceholder":171},[52,7015,7016,7018,7020],{"class":54,"line":594},[52,7017,3964],{"class":58},[52,7019,6933],{"class":559},[52,7021,729],{"class":58},[52,7023,7024,7026,7028,7030,7032,7034],{"class":54,"line":600},[52,7025,83],{"class":58},[52,7027,86],{"class":371},[52,7029,6854],{"class":66},[52,7031,70],{"class":231},[52,7033,6820],{"class":73},[52,7035,105],{"class":58},[52,7037,7038,7040,7042],{"class":54,"line":606},[52,7039,121],{"class":58},[52,7041,63],{"class":371},[52,7043,77],{"class":58},[43,7045,7046],{"className":419,"code":6871,"language":420,"meta":48,"style":48},[31,7047,7048,7056,7064,7096,7100,7108,7122],{"__ignoreMap":48},[52,7049,7050,7052,7054],{"class":54,"line":55},[52,7051,59],{"class":58},[52,7053,63],{"class":371},[52,7055,77],{"class":58},[52,7057,7058,7060,7062],{"class":54,"line":80},[52,7059,3964],{"class":58},[52,7061,6888],{"class":559},[52,7063,729],{"class":58},[52,7065,7066,7068,7070,7072,7074,7076,7078,7080,7082,7084,7086,7088,7090,7092,7094],{"class":54,"line":108},[52,7067,83],{"class":58},[52,7069,2216],{"class":371},[52,7071,6815],{"class":66},[52,7073,70],{"class":231},[52,7075,6820],{"class":73},[52,7077,3913],{"class":66},[52,7079,70],{"class":231},[52,7081,723],{"class":58},[52,7083,4011],{"class":371},[52,7085,2577],{"class":58},[52,7087,2374],{"class":66},[52,7089,70],{"class":231},[52,7091,723],{"class":58},[52,7093,2292],{"class":371},[52,7095,4014],{"class":58},[52,7097,7098],{"class":54,"line":118},[52,7099,597],{"emptyLinePlaceholder":171},[52,7101,7102,7104,7106],{"class":54,"line":594},[52,7103,3964],{"class":58},[52,7105,6933],{"class":559},[52,7107,729],{"class":58},[52,7109,7110,7112,7114,7116,7118,7120],{"class":54,"line":600},[52,7111,83],{"class":58},[52,7113,86],{"class":371},[52,7115,6854],{"class":66},[52,7117,70],{"class":231},[52,7119,6820],{"class":73},[52,7121,105],{"class":58},[52,7123,7124,7126,7128],{"class":54,"line":606},[52,7125,121],{"class":58},[52,7127,63],{"class":371},[52,7129,77],{"class":58},[43,7131,7133],{"className":222,"code":7132,"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,7134,7135,7149,7153,7175,7188,7192],{"__ignoreMap":48},[52,7136,7137,7139,7141,7143,7145,7147],{"class":54,"line":55},[52,7138,1721],{"class":231},[52,7140,1724],{"class":371},[52,7142,1727],{"class":231},[52,7144,1730],{"class":231},[52,7146,1733],{"class":66},[52,7148,1736],{"class":58},[52,7150,7151],{"class":54,"line":80},[52,7152,1751],{"class":58},[52,7154,7155,7157,7159,7161,7164,7166,7168,7171,7173],{"class":54,"line":108},[52,7156,1756],{"class":58},[52,7158,2869],{"class":73},[52,7160,2872],{"class":58},[52,7162,7163],{"class":73},"'myMask'",[52,7165,5254],{"class":58},[52,7167,4011],{"class":371},[52,7169,7170],{"class":58},", visible: ",[52,7172,2292],{"class":371},[52,7174,4283],{"class":58},[52,7176,7177,7179,7181,7184,7186],{"class":54,"line":118},[52,7178,1756],{"class":58},[52,7180,2126],{"class":73},[52,7182,7183],{"class":58},", props: { maskSource: ",[52,7185,7163],{"class":73},[52,7187,1768],{"class":58},[52,7189,7190],{"class":54,"line":594},[52,7191,1773],{"class":58},[52,7193,7194],{"class":54,"line":600},[52,7195,1778],{"class":58},[19,7197],{":preset":7198},"{\"components\":[{\"type\":\"Circle\",\"id\":\"myMask\",\"props\":{\"radius\":0.8,\"visible\":false}},{\"type\":\"LinearGradient\",\"props\":{\"maskSource\":\"myMask\"}}]}",[15,7200,7201,7202,7204],{},"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,7203,6760],{},".",[2925,7206,7208],{"id":7207},"mask-types","Mask Types",[15,7210,7211,7212,7215],{},"Control how the mask is interpreted with the ",[31,7213,7214],{},"maskType"," prop:",[1465,7217,7218,7226,7234,7242],{},[1468,7219,7220,7225],{},[151,7221,7222],{},[31,7223,7224],{},"alpha",": Uses the mask's alpha channel (default)",[1468,7227,7228,7233],{},[151,7229,7230],{},[31,7231,7232],{},"alphaInverted",": Uses the inverted alpha channel",[1468,7235,7236,7241],{},[151,7237,7238],{},[31,7239,7240],{},"luminance",": Uses the mask's brightness",[1468,7243,7244,7249],{},[151,7245,7246],{},[31,7247,7248],{},"luminanceInverted",": Uses the inverted brightness",[217,7251,7252,7402,7550,7694,7838],{":tabs":1543},[43,7253,7255],{"className":45,"code":7254,"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,7256,7257,7265,7273,7277,7282,7289,7299,7308,7317,7327,7331,7335,7340,7347,7357,7367,7377,7388,7393],{"__ignoreMap":48},[52,7258,7259,7261,7263],{"class":54,"line":55},[52,7260,59],{"class":58},[52,7262,63],{"class":62},[52,7264,77],{"class":58},[52,7266,7267,7269,7271],{"class":54,"line":80},[52,7268,83],{"class":58},[52,7270,86],{"class":62},[52,7272,105],{"class":58},[52,7274,7275],{"class":54,"line":108},[52,7276,597],{"emptyLinePlaceholder":171},[52,7278,7279],{"class":54,"line":118},[52,7280,7281],{"class":559}," \u003C!-- Hidden checkerboard mask controls visibility -->\n",[52,7283,7284,7286],{"class":54,"line":594},[52,7285,83],{"class":58},[52,7287,7288],{"class":62},"Checkerboard\n",[52,7290,7291,7294,7296],{"class":54,"line":600},[52,7292,7293],{"class":66}," id",[52,7295,70],{"class":58},[52,7297,7298],{"class":73},"\"mask\"\n",[52,7300,7301,7303,7305],{"class":54,"line":606},[52,7302,1176],{"class":66},[52,7304,70],{"class":58},[52,7306,7307],{"class":73},"\"#ffffff\"\n",[52,7309,7310,7312,7314],{"class":54,"line":653},[52,7311,1186],{"class":66},[52,7313,70],{"class":58},[52,7315,7316],{"class":73},"\"#111111\"\n",[52,7318,7319,7322,7324],{"class":54,"line":662},[52,7320,7321],{"class":66}," :visible",[52,7323,70],{"class":58},[52,7325,7326],{"class":73},"\"false\"\n",[52,7328,7329],{"class":54,"line":671},[52,7330,1224],{"class":58},[52,7332,7333],{"class":54,"line":676},[52,7334,597],{"emptyLinePlaceholder":171},[52,7336,7337],{"class":54,"line":682},[52,7338,7339],{"class":559}," \u003C!-- Visible where mask is bright -->\n",[52,7341,7342,7344],{"class":54,"line":698},[52,7343,83],{"class":58},[52,7345,7346],{"class":62},"Circle\n",[52,7348,7349,7352,7354],{"class":54,"line":707},[52,7350,7351],{"class":66}," color",[52,7353,70],{"class":58},[52,7355,7356],{"class":73},"\"#ff0088\"\n",[52,7358,7359,7362,7364],{"class":54,"line":2327},[52,7360,7361],{"class":66}," radius",[52,7363,70],{"class":58},[52,7365,7366],{"class":73},"\"0.8\"\n",[52,7368,7370,7373,7375],{"class":54,"line":7369},16,[52,7371,7372],{"class":66}," maskSource",[52,7374,70],{"class":58},[52,7376,7298],{"class":73},[52,7378,7380,7383,7385],{"class":54,"line":7379},17,[52,7381,7382],{"class":66}," maskType",[52,7384,70],{"class":58},[52,7386,7387],{"class":73},"\"luminance\"\n",[52,7389,7391],{"class":54,"line":7390},18,[52,7392,1224],{"class":58},[52,7394,7396,7398,7400],{"class":54,"line":7395},19,[52,7397,121],{"class":58},[52,7399,63],{"class":62},[52,7401,77],{"class":58},[43,7403,7405],{"className":360,"code":7404,"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,7406,7407,7415,7423,7427,7436,7442,7450,7458,7466,7479,7483,7487,7496,7502,7510,7522,7530,7538,7542],{"__ignoreMap":48},[52,7408,7409,7411,7413],{"class":54,"line":55},[52,7410,59],{"class":58},[52,7412,63],{"class":371},[52,7414,77],{"class":58},[52,7416,7417,7419,7421],{"class":54,"line":80},[52,7418,83],{"class":58},[52,7420,86],{"class":371},[52,7422,105],{"class":58},[52,7424,7425],{"class":54,"line":108},[52,7426,597],{"emptyLinePlaceholder":171},[52,7428,7429,7431,7434],{"class":54,"line":118},[52,7430,3964],{"class":58},[52,7432,7433],{"class":559},"/* Hidden checkerboard mask controls visibility */",[52,7435,729],{"class":58},[52,7437,7438,7440],{"class":54,"line":594},[52,7439,83],{"class":58},[52,7441,7288],{"class":371},[52,7443,7444,7446,7448],{"class":54,"line":600},[52,7445,7293],{"class":66},[52,7447,70],{"class":231},[52,7449,7298],{"class":73},[52,7451,7452,7454,7456],{"class":54,"line":606},[52,7453,1176],{"class":66},[52,7455,70],{"class":231},[52,7457,7307],{"class":73},[52,7459,7460,7462,7464],{"class":54,"line":653},[52,7461,1186],{"class":66},[52,7463,70],{"class":231},[52,7465,7316],{"class":73},[52,7467,7468,7471,7473,7475,7477],{"class":54,"line":662},[52,7469,7470],{"class":66}," visible",[52,7472,70],{"class":231},[52,7474,723],{"class":58},[52,7476,2292],{"class":371},[52,7478,729],{"class":58},[52,7480,7481],{"class":54,"line":671},[52,7482,1224],{"class":58},[52,7484,7485],{"class":54,"line":676},[52,7486,597],{"emptyLinePlaceholder":171},[52,7488,7489,7491,7494],{"class":54,"line":682},[52,7490,3964],{"class":58},[52,7492,7493],{"class":559},"/* Visible where mask is bright */",[52,7495,729],{"class":58},[52,7497,7498,7500],{"class":54,"line":698},[52,7499,83],{"class":58},[52,7501,7346],{"class":371},[52,7503,7504,7506,7508],{"class":54,"line":707},[52,7505,7351],{"class":66},[52,7507,70],{"class":231},[52,7509,7356],{"class":73},[52,7511,7512,7514,7516,7518,7520],{"class":54,"line":2327},[52,7513,7361],{"class":66},[52,7515,70],{"class":231},[52,7517,723],{"class":58},[52,7519,4011],{"class":371},[52,7521,729],{"class":58},[52,7523,7524,7526,7528],{"class":54,"line":7369},[52,7525,7372],{"class":66},[52,7527,70],{"class":231},[52,7529,7298],{"class":73},[52,7531,7532,7534,7536],{"class":54,"line":7379},[52,7533,7382],{"class":66},[52,7535,70],{"class":231},[52,7537,7387],{"class":73},[52,7539,7540],{"class":54,"line":7390},[52,7541,1224],{"class":58},[52,7543,7544,7546,7548],{"class":54,"line":7395},[52,7545,121],{"class":58},[52,7547,63],{"class":371},[52,7549,77],{"class":58},[43,7551,7552],{"className":419,"code":7404,"language":420,"meta":48,"style":48},[31,7553,7554,7562,7570,7574,7582,7588,7596,7604,7612,7624,7628,7632,7640,7646,7654,7666,7674,7682,7686],{"__ignoreMap":48},[52,7555,7556,7558,7560],{"class":54,"line":55},[52,7557,59],{"class":58},[52,7559,63],{"class":371},[52,7561,77],{"class":58},[52,7563,7564,7566,7568],{"class":54,"line":80},[52,7565,83],{"class":58},[52,7567,86],{"class":371},[52,7569,105],{"class":58},[52,7571,7572],{"class":54,"line":108},[52,7573,597],{"emptyLinePlaceholder":171},[52,7575,7576,7578,7580],{"class":54,"line":118},[52,7577,3964],{"class":58},[52,7579,7433],{"class":559},[52,7581,729],{"class":58},[52,7583,7584,7586],{"class":54,"line":594},[52,7585,83],{"class":58},[52,7587,7288],{"class":371},[52,7589,7590,7592,7594],{"class":54,"line":600},[52,7591,7293],{"class":66},[52,7593,70],{"class":231},[52,7595,7298],{"class":73},[52,7597,7598,7600,7602],{"class":54,"line":606},[52,7599,1176],{"class":66},[52,7601,70],{"class":231},[52,7603,7307],{"class":73},[52,7605,7606,7608,7610],{"class":54,"line":653},[52,7607,1186],{"class":66},[52,7609,70],{"class":231},[52,7611,7316],{"class":73},[52,7613,7614,7616,7618,7620,7622],{"class":54,"line":662},[52,7615,7470],{"class":66},[52,7617,70],{"class":231},[52,7619,723],{"class":58},[52,7621,2292],{"class":371},[52,7623,729],{"class":58},[52,7625,7626],{"class":54,"line":671},[52,7627,1224],{"class":58},[52,7629,7630],{"class":54,"line":676},[52,7631,597],{"emptyLinePlaceholder":171},[52,7633,7634,7636,7638],{"class":54,"line":682},[52,7635,3964],{"class":58},[52,7637,7493],{"class":559},[52,7639,729],{"class":58},[52,7641,7642,7644],{"class":54,"line":698},[52,7643,83],{"class":58},[52,7645,7346],{"class":371},[52,7647,7648,7650,7652],{"class":54,"line":707},[52,7649,7351],{"class":66},[52,7651,70],{"class":231},[52,7653,7356],{"class":73},[52,7655,7656,7658,7660,7662,7664],{"class":54,"line":2327},[52,7657,7361],{"class":66},[52,7659,70],{"class":231},[52,7661,723],{"class":58},[52,7663,4011],{"class":371},[52,7665,729],{"class":58},[52,7667,7668,7670,7672],{"class":54,"line":7369},[52,7669,7372],{"class":66},[52,7671,70],{"class":231},[52,7673,7298],{"class":73},[52,7675,7676,7678,7680],{"class":54,"line":7379},[52,7677,7382],{"class":66},[52,7679,70],{"class":231},[52,7681,7387],{"class":73},[52,7683,7684],{"class":54,"line":7390},[52,7685,1224],{"class":58},[52,7687,7688,7690,7692],{"class":54,"line":7395},[52,7689,121],{"class":58},[52,7691,63],{"class":371},[52,7693,77],{"class":58},[43,7695,7696],{"className":419,"code":7404,"language":420,"meta":48,"style":48},[31,7697,7698,7706,7714,7718,7726,7732,7740,7748,7756,7768,7772,7776,7784,7790,7798,7810,7818,7826,7830],{"__ignoreMap":48},[52,7699,7700,7702,7704],{"class":54,"line":55},[52,7701,59],{"class":58},[52,7703,63],{"class":371},[52,7705,77],{"class":58},[52,7707,7708,7710,7712],{"class":54,"line":80},[52,7709,83],{"class":58},[52,7711,86],{"class":371},[52,7713,105],{"class":58},[52,7715,7716],{"class":54,"line":108},[52,7717,597],{"emptyLinePlaceholder":171},[52,7719,7720,7722,7724],{"class":54,"line":118},[52,7721,3964],{"class":58},[52,7723,7433],{"class":559},[52,7725,729],{"class":58},[52,7727,7728,7730],{"class":54,"line":594},[52,7729,83],{"class":58},[52,7731,7288],{"class":371},[52,7733,7734,7736,7738],{"class":54,"line":600},[52,7735,7293],{"class":66},[52,7737,70],{"class":231},[52,7739,7298],{"class":73},[52,7741,7742,7744,7746],{"class":54,"line":606},[52,7743,1176],{"class":66},[52,7745,70],{"class":231},[52,7747,7307],{"class":73},[52,7749,7750,7752,7754],{"class":54,"line":653},[52,7751,1186],{"class":66},[52,7753,70],{"class":231},[52,7755,7316],{"class":73},[52,7757,7758,7760,7762,7764,7766],{"class":54,"line":662},[52,7759,7470],{"class":66},[52,7761,70],{"class":231},[52,7763,723],{"class":58},[52,7765,2292],{"class":371},[52,7767,729],{"class":58},[52,7769,7770],{"class":54,"line":671},[52,7771,1224],{"class":58},[52,7773,7774],{"class":54,"line":676},[52,7775,597],{"emptyLinePlaceholder":171},[52,7777,7778,7780,7782],{"class":54,"line":682},[52,7779,3964],{"class":58},[52,7781,7493],{"class":559},[52,7783,729],{"class":58},[52,7785,7786,7788],{"class":54,"line":698},[52,7787,83],{"class":58},[52,7789,7346],{"class":371},[52,7791,7792,7794,7796],{"class":54,"line":707},[52,7793,7351],{"class":66},[52,7795,70],{"class":231},[52,7797,7356],{"class":73},[52,7799,7800,7802,7804,7806,7808],{"class":54,"line":2327},[52,7801,7361],{"class":66},[52,7803,70],{"class":231},[52,7805,723],{"class":58},[52,7807,4011],{"class":371},[52,7809,729],{"class":58},[52,7811,7812,7814,7816],{"class":54,"line":7369},[52,7813,7372],{"class":66},[52,7815,70],{"class":231},[52,7817,7298],{"class":73},[52,7819,7820,7822,7824],{"class":54,"line":7379},[52,7821,7382],{"class":66},[52,7823,70],{"class":231},[52,7825,7387],{"class":73},[52,7827,7828],{"class":54,"line":7390},[52,7829,1224],{"class":58},[52,7831,7832,7834,7836],{"class":54,"line":7395},[52,7833,121],{"class":58},[52,7835,63],{"class":371},[52,7837,77],{"class":58},[43,7839,7841],{"className":222,"code":7840,"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,7842,7843,7857,7861,7869,7899,7926,7930],{"__ignoreMap":48},[52,7844,7845,7847,7849,7851,7853,7855],{"class":54,"line":55},[52,7846,1721],{"class":231},[52,7848,1724],{"class":371},[52,7850,1727],{"class":231},[52,7852,1730],{"class":231},[52,7854,1733],{"class":66},[52,7856,1736],{"class":58},[52,7858,7859],{"class":54,"line":80},[52,7860,1751],{"class":58},[52,7862,7863,7865,7867],{"class":54,"line":108},[52,7864,1756],{"class":58},[52,7866,2126],{"class":73},[52,7868,4260],{"class":58},[52,7870,7871,7873,7876,7878,7881,7884,7887,7890,7893,7895,7897],{"class":54,"line":118},[52,7872,1756],{"class":58},[52,7874,7875],{"class":73},"'Checkerboard'",[52,7877,2872],{"class":58},[52,7879,7880],{"class":73},"'mask'",[52,7882,7883],{"class":58},", props: { colorA: ",[52,7885,7886],{"class":73},"'#ffffff'",[52,7888,7889],{"class":58},", colorB: ",[52,7891,7892],{"class":73},"'#111111'",[52,7894,7170],{"class":58},[52,7896,2292],{"class":371},[52,7898,4283],{"class":58},[52,7900,7901,7903,7905,7907,7909,7911,7913,7916,7918,7921,7924],{"class":54,"line":594},[52,7902,1756],{"class":58},[52,7904,2869],{"class":73},[52,7906,1762],{"class":58},[52,7908,2880],{"class":73},[52,7910,4278],{"class":58},[52,7912,4011],{"class":371},[52,7914,7915],{"class":58},", maskSource: ",[52,7917,7880],{"class":73},[52,7919,7920],{"class":58},", maskType: ",[52,7922,7923],{"class":73},"'luminance'",[52,7925,1768],{"class":58},[52,7927,7928],{"class":54,"line":600},[52,7929,1773],{"class":58},[52,7931,7932],{"class":54,"line":606},[52,7933,1778],{"class":58},[19,7935],{":preset":7936},"{\"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,7938,5307],{},{"title":48,"searchDepth":80,"depth":80,"links":7940},[7941,7944,7945,7946],{"id":5331,"depth":80,"text":5332,"children":7942},[7943],{"id":5793,"depth":108,"text":5794},{"id":2584,"depth":80,"text":6378},{"id":6716,"depth":80,"text":6717},{"id":6764,"depth":80,"text":6765,"children":7947},[7948],{"id":7207,"depth":108,"text":7208},"features","Control how components composite together and selectively reveal content","circles-overlap",{},"/docs/guide/blending-masking",{"title":5320,"description":7950},"docs/guide/3.blending-masking","DB4mG55LrsfgecKvStxFmWb3SIn-tGs51Tr-D2t5pHs",{"id":7958,"title":1487,"body":7959,"category":7949,"description":9952,"exclude":167,"extension":168,"forceFramework":167,"icon":9953,"meta":9954,"navigation":171,"path":1486,"seo":9955,"stem":9956,"__hash__":9957},"guide/docs/guide/4.props-reactivity.md",{"type":8,"value":7960,"toc":9945},[7961,7964,7967,7971,7974,8191,8194,8198,8201,9363,9366,9371,9374,9378,9381,9386,9426,9431,9470,9475,9526,9531,9557,9560,9564,9567,9573,9905,9909,9912,9916,9919,9939,9942],[11,7962,1487],{"id":7963},"props-reactivity",[15,7965,7966],{},"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,7968,7970],{"id":7969},"basic-props","Basic Props",[15,7972,7973],{},"Props work exactly like standard component props. Pass them directly to configure your shaders:",[217,7975,7976,8017,8060,8102,8144],{":tabs":1543},[43,7977,7979],{"className":45,"code":7978,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius=\"0.5\" />\n\u003C/Shader>\n",[31,7980,7981,7989,8009],{"__ignoreMap":48},[52,7982,7983,7985,7987],{"class":54,"line":55},[52,7984,59],{"class":58},[52,7986,63],{"class":62},[52,7988,77],{"class":58},[52,7990,7991,7993,7995,7997,7999,8001,8003,8005,8007],{"class":54,"line":80},[52,7992,83],{"class":58},[52,7994,2216],{"class":62},[52,7996,1574],{"class":66},[52,7998,70],{"class":58},[52,8000,2223],{"class":73},[52,8002,3913],{"class":66},[52,8004,70],{"class":58},[52,8006,5394],{"class":73},[52,8008,105],{"class":58},[52,8010,8011,8013,8015],{"class":54,"line":108},[52,8012,121],{"class":58},[52,8014,63],{"class":62},[52,8016,77],{"class":58},[43,8018,8020],{"className":360,"code":8019,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle color=\"#ff0088\" radius={0.5} />\n\u003C/Shader>\n",[31,8021,8022,8030,8052],{"__ignoreMap":48},[52,8023,8024,8026,8028],{"class":54,"line":55},[52,8025,59],{"class":58},[52,8027,63],{"class":371},[52,8029,77],{"class":58},[52,8031,8032,8034,8036,8038,8040,8042,8044,8046,8048,8050],{"class":54,"line":80},[52,8033,83],{"class":58},[52,8035,2216],{"class":371},[52,8037,1574],{"class":66},[52,8039,70],{"class":231},[52,8041,2223],{"class":73},[52,8043,3913],{"class":66},[52,8045,70],{"class":231},[52,8047,723],{"class":58},[52,8049,5467],{"class":371},[52,8051,4014],{"class":58},[52,8053,8054,8056,8058],{"class":54,"line":108},[52,8055,121],{"class":58},[52,8057,63],{"class":371},[52,8059,77],{"class":58},[43,8061,8062],{"className":419,"code":8019,"language":420,"meta":48,"style":48},[31,8063,8064,8072,8094],{"__ignoreMap":48},[52,8065,8066,8068,8070],{"class":54,"line":55},[52,8067,59],{"class":58},[52,8069,63],{"class":371},[52,8071,77],{"class":58},[52,8073,8074,8076,8078,8080,8082,8084,8086,8088,8090,8092],{"class":54,"line":80},[52,8075,83],{"class":58},[52,8077,2216],{"class":371},[52,8079,1574],{"class":66},[52,8081,70],{"class":231},[52,8083,2223],{"class":73},[52,8085,3913],{"class":66},[52,8087,70],{"class":231},[52,8089,723],{"class":58},[52,8091,5467],{"class":371},[52,8093,4014],{"class":58},[52,8095,8096,8098,8100],{"class":54,"line":108},[52,8097,121],{"class":58},[52,8099,63],{"class":371},[52,8101,77],{"class":58},[43,8103,8104],{"className":419,"code":8019,"language":420,"meta":48,"style":48},[31,8105,8106,8114,8136],{"__ignoreMap":48},[52,8107,8108,8110,8112],{"class":54,"line":55},[52,8109,59],{"class":58},[52,8111,63],{"class":371},[52,8113,77],{"class":58},[52,8115,8116,8118,8120,8122,8124,8126,8128,8130,8132,8134],{"class":54,"line":80},[52,8117,83],{"class":58},[52,8119,2216],{"class":371},[52,8121,1574],{"class":66},[52,8123,70],{"class":231},[52,8125,2223],{"class":73},[52,8127,3913],{"class":66},[52,8129,70],{"class":231},[52,8131,723],{"class":58},[52,8133,5467],{"class":371},[52,8135,4014],{"class":58},[52,8137,8138,8140,8142],{"class":54,"line":108},[52,8139,121],{"class":58},[52,8141,63],{"class":371},[52,8143,77],{"class":58},[43,8145,8147],{"className":222,"code":8146,"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,8148,8149,8163,8167,8183,8187],{"__ignoreMap":48},[52,8150,8151,8153,8155,8157,8159,8161],{"class":54,"line":55},[52,8152,1721],{"class":231},[52,8154,1724],{"class":371},[52,8156,1727],{"class":231},[52,8158,1730],{"class":231},[52,8160,1733],{"class":66},[52,8162,1736],{"class":58},[52,8164,8165],{"class":54,"line":80},[52,8166,1751],{"class":58},[52,8168,8169,8171,8173,8175,8177,8179,8181],{"class":54,"line":108},[52,8170,1756],{"class":58},[52,8172,2869],{"class":73},[52,8174,1762],{"class":58},[52,8176,2880],{"class":73},[52,8178,4278],{"class":58},[52,8180,5467],{"class":371},[52,8182,1768],{"class":58},[52,8184,8185],{"class":54,"line":118},[52,8186,1773],{"class":58},[52,8188,8189],{"class":54,"line":594},[52,8190,1778],{"class":58},[15,8192,8193],{},"Static props like these are perfect for fixed effects. But the real power comes from reactive props.",[23,8195,8197],{"id":8196},"reactive-props","Reactive Props",[15,8199,8200],{},"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,8202,8203,8436,8725,8946,9220],{":tabs":1543},[43,8204,8206],{"className":45,"code":8205,"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,8207,8208,8218,8228,8239,8243,8260,8268,8272,8280,8289,8311,8331,8351,8359,8363,8371,8398,8420,8428],{"__ignoreMap":48},[52,8209,8210,8212,8214,8216],{"class":54,"line":55},[52,8211,59],{"class":58},[52,8213,2253],{"class":62},[52,8215,2256],{"class":66},[52,8217,77],{"class":58},[52,8219,8220,8222,8224,8226],{"class":54,"line":80},[52,8221,232],{"class":231},[52,8223,2265],{"class":58},[52,8225,238],{"class":231},[52,8227,2270],{"class":73},[52,8229,8230,8232,8235,8237],{"class":54,"line":108},[52,8231,232],{"class":231},[52,8233,8234],{"class":58}," { Shader, LinearGradient, Circle } ",[52,8236,238],{"class":231},[52,8238,241],{"class":73},[52,8240,8241],{"class":54,"line":118},[52,8242,597],{"emptyLinePlaceholder":171},[52,8244,8245,8247,8250,8252,8254,8256,8258],{"class":54,"line":594},[52,8246,1721],{"class":231},[52,8248,8249],{"class":371}," angle",[52,8251,1727],{"class":231},[52,8253,2286],{"class":66},[52,8255,2289],{"class":58},[52,8257,6387],{"class":371},[52,8259,2295],{"class":58},[52,8261,8262,8264,8266],{"class":54,"line":600},[52,8263,121],{"class":58},[52,8265,2253],{"class":62},[52,8267,77],{"class":58},[52,8269,8270],{"class":54,"line":606},[52,8271,597],{"emptyLinePlaceholder":171},[52,8273,8274,8276,8278],{"class":54,"line":653},[52,8275,59],{"class":58},[52,8277,2182],{"class":62},[52,8279,77],{"class":58},[52,8281,8282,8284,8287],{"class":54,"line":662},[52,8283,83],{"class":58},[52,8285,8286],{"class":62},"div",[52,8288,77],{"class":58},[52,8290,8291,8293,8296,8299,8301,8304,8307,8309],{"class":54,"line":671},[52,8292,2213],{"class":58},[52,8294,8295],{"class":62},"button",[52,8297,8298],{"class":66}," @click",[52,8300,70],{"class":58},[52,8302,8303],{"class":73},"\"angle += 45\"",[52,8305,8306],{"class":58},">Rotate +45°\u003C/",[52,8308,8295],{"class":62},[52,8310,77],{"class":58},[52,8312,8313,8315,8317,8319,8321,8324,8327,8329],{"class":54,"line":676},[52,8314,2213],{"class":58},[52,8316,8295],{"class":62},[52,8318,8298],{"class":66},[52,8320,70],{"class":58},[52,8322,8323],{"class":73},"\"angle -= 45\"",[52,8325,8326],{"class":58},">Rotate -45°\u003C/",[52,8328,8295],{"class":62},[52,8330,77],{"class":58},[52,8332,8333,8335,8337,8339,8341,8344,8347,8349],{"class":54,"line":682},[52,8334,2213],{"class":58},[52,8336,8295],{"class":62},[52,8338,8298],{"class":66},[52,8340,70],{"class":58},[52,8342,8343],{"class":73},"\"angle = 0\"",[52,8345,8346],{"class":58},">Reset\u003C/",[52,8348,8295],{"class":62},[52,8350,77],{"class":58},[52,8352,8353,8355,8357],{"class":54,"line":698},[52,8354,2230],{"class":58},[52,8356,8286],{"class":62},[52,8358,77],{"class":58},[52,8360,8361],{"class":54,"line":707},[52,8362,597],{"emptyLinePlaceholder":171},[52,8364,8365,8367,8369],{"class":54,"line":2327},[52,8366,83],{"class":58},[52,8368,63],{"class":62},[52,8370,77],{"class":58},[52,8372,8373,8375,8377,8379,8381,8384,8386,8388,8390,8392,8394,8396],{"class":54,"line":7369},[52,8374,2213],{"class":58},[52,8376,2216],{"class":62},[52,8378,6815],{"class":66},[52,8380,70],{"class":58},[52,8382,8383],{"class":73},"\"mask\"",[52,8385,3913],{"class":66},[52,8387,70],{"class":58},[52,8389,3918],{"class":73},[52,8391,6829],{"class":66},[52,8393,70],{"class":58},[52,8395,6834],{"class":73},[52,8397,105],{"class":58},[52,8399,8400,8402,8404,8407,8409,8412,8414,8416,8418],{"class":54,"line":7379},[52,8401,2213],{"class":58},[52,8403,86],{"class":62},[52,8405,8406],{"class":66}," :angle",[52,8408,70],{"class":58},[52,8410,8411],{"class":73},"\"angle\"",[52,8413,6854],{"class":66},[52,8415,70],{"class":58},[52,8417,8383],{"class":73},[52,8419,105],{"class":58},[52,8421,8422,8424,8426],{"class":54,"line":7390},[52,8423,2230],{"class":58},[52,8425,63],{"class":62},[52,8427,77],{"class":58},[52,8429,8430,8432,8434],{"class":54,"line":7395},[52,8431,121],{"class":58},[52,8433,2182],{"class":62},[52,8435,77],{"class":58},[43,8437,8439],{"className":360,"code":8438,"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,8440,8441,8451,8461,8465,8474,8499,8503,8509,8514,8522,8565,8601,8628,8637,8641,8649,8681,8702,8710,8715,8720],{"__ignoreMap":48},[52,8442,8443,8445,8447,8449],{"class":54,"line":55},[52,8444,232],{"class":231},[52,8446,2345],{"class":58},[52,8448,238],{"class":231},[52,8450,2350],{"class":73},[52,8452,8453,8455,8457,8459],{"class":54,"line":80},[52,8454,232],{"class":231},[52,8456,8234],{"class":58},[52,8458,238],{"class":231},[52,8460,257],{"class":73},[52,8462,8463],{"class":54,"line":108},[52,8464,597],{"emptyLinePlaceholder":171},[52,8466,8467,8469,8472],{"class":54,"line":118},[52,8468,2304],{"class":231},[52,8470,8471],{"class":66}," MyComponent",[52,8473,2310],{"class":58},[52,8475,8476,8478,8480,8482,8484,8487,8489,8491,8493,8495,8497],{"class":54,"line":594},[52,8477,2368],{"class":231},[52,8479,2371],{"class":58},[52,8481,1199],{"class":371},[52,8483,1881],{"class":58},[52,8485,8486],{"class":371},"setAngle",[52,8488,2382],{"class":58},[52,8490,70],{"class":231},[52,8492,2387],{"class":66},[52,8494,2289],{"class":58},[52,8496,6387],{"class":371},[52,8498,2295],{"class":58},[52,8500,8501],{"class":54,"line":600},[52,8502,597],{"emptyLinePlaceholder":171},[52,8504,8505,8507],{"class":54,"line":606},[52,8506,2402],{"class":231},[52,8508,2405],{"class":58},[52,8510,8511],{"class":54,"line":653},[52,8512,8513],{"class":58}," \u003C>\n",[52,8515,8516,8518,8520],{"class":54,"line":662},[52,8517,2476],{"class":58},[52,8519,8286],{"class":62},[52,8521,77],{"class":58},[52,8523,8524,8527,8529,8532,8534,8536,8538,8541,8543,8546,8549,8552,8555,8558,8561,8563],{"class":54,"line":671},[52,8525,8526],{"class":58}," \u003C",[52,8528,8295],{"class":62},[52,8530,8531],{"class":66}," onClick",[52,8533,70],{"class":231},[52,8535,2422],{"class":58},[52,8537,2425],{"class":231},[52,8539,8540],{"class":66}," setAngle",[52,8542,2289],{"class":58},[52,8544,1139],{"class":8545},"s9osk",[52,8547,8548],{"class":231}," =>",[52,8550,8551],{"class":58}," a ",[52,8553,8554],{"class":231},"+",[52,8556,8557],{"class":371}," 45",[52,8559,8560],{"class":58},")}>Rotate +45°\u003C/",[52,8562,8295],{"class":62},[52,8564,77],{"class":58},[52,8566,8567,8569,8571,8573,8575,8577,8579,8581,8583,8585,8587,8589,8592,8594,8597,8599],{"class":54,"line":676},[52,8568,8526],{"class":58},[52,8570,8295],{"class":62},[52,8572,8531],{"class":66},[52,8574,70],{"class":231},[52,8576,2422],{"class":58},[52,8578,2425],{"class":231},[52,8580,8540],{"class":66},[52,8582,2289],{"class":58},[52,8584,1139],{"class":8545},[52,8586,8548],{"class":231},[52,8588,8551],{"class":58},[52,8590,8591],{"class":231},"-",[52,8593,8557],{"class":371},[52,8595,8596],{"class":58},")}>Rotate -45°\u003C/",[52,8598,8295],{"class":62},[52,8600,77],{"class":58},[52,8602,8603,8605,8607,8609,8611,8613,8615,8617,8619,8621,8624,8626],{"class":54,"line":682},[52,8604,8526],{"class":58},[52,8606,8295],{"class":62},[52,8608,8531],{"class":66},[52,8610,70],{"class":231},[52,8612,2422],{"class":58},[52,8614,2425],{"class":231},[52,8616,8540],{"class":66},[52,8618,2289],{"class":58},[52,8620,6387],{"class":371},[52,8622,8623],{"class":58},")}>Reset\u003C/",[52,8625,8295],{"class":62},[52,8627,77],{"class":58},[52,8629,8630,8633,8635],{"class":54,"line":698},[52,8631,8632],{"class":58}," \u003C/",[52,8634,8286],{"class":62},[52,8636,77],{"class":58},[52,8638,8639],{"class":54,"line":707},[52,8640,597],{"emptyLinePlaceholder":171},[52,8642,8643,8645,8647],{"class":54,"line":2327},[52,8644,2476],{"class":58},[52,8646,63],{"class":371},[52,8648,77],{"class":58},[52,8650,8651,8653,8655,8657,8659,8661,8663,8665,8667,8669,8671,8673,8675,8677,8679],{"class":54,"line":7369},[52,8652,8526],{"class":58},[52,8654,2216],{"class":371},[52,8656,6815],{"class":66},[52,8658,70],{"class":231},[52,8660,8383],{"class":73},[52,8662,3913],{"class":66},[52,8664,70],{"class":231},[52,8666,723],{"class":58},[52,8668,4011],{"class":371},[52,8670,2577],{"class":58},[52,8672,2374],{"class":66},[52,8674,70],{"class":231},[52,8676,723],{"class":58},[52,8678,2292],{"class":371},[52,8680,4014],{"class":58},[52,8682,8683,8685,8687,8689,8691,8694,8696,8698,8700],{"class":54,"line":7379},[52,8684,8526],{"class":58},[52,8686,86],{"class":371},[52,8688,8249],{"class":66},[52,8690,70],{"class":231},[52,8692,8693],{"class":58},"{angle} ",[52,8695,6779],{"class":66},[52,8697,70],{"class":231},[52,8699,8383],{"class":73},[52,8701,105],{"class":58},[52,8703,8704,8706,8708],{"class":54,"line":7390},[52,8705,8632],{"class":58},[52,8707,63],{"class":371},[52,8709,77],{"class":58},[52,8711,8712],{"class":54,"line":7395},[52,8713,8714],{"class":58}," \u003C/>\n",[52,8716,8718],{"class":54,"line":8717},20,[52,8719,2500],{"class":58},[52,8721,8723],{"class":54,"line":8722},21,[52,8724,729],{"class":58},[43,8726,8728],{"className":419,"code":8727,"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,8729,8730,8738,8743,8747,8752,8760,8764,8772,8806,8838,8869,8877,8881,8889,8921,8938],{"__ignoreMap":48},[52,8731,8732,8734,8736],{"class":54,"line":55},[52,8733,59],{"class":58},[52,8735,2253],{"class":62},[52,8737,77],{"class":58},[52,8739,8740],{"class":54,"line":80},[52,8741,8742],{"class":58}," import { Shader, LinearGradient, Circle } from 'shaders/svelte'\n",[52,8744,8745],{"class":54,"line":108},[52,8746,597],{"emptyLinePlaceholder":171},[52,8748,8749],{"class":54,"line":118},[52,8750,8751],{"class":58}," let angle = 0\n",[52,8753,8754,8756,8758],{"class":54,"line":594},[52,8755,121],{"class":58},[52,8757,2253],{"class":62},[52,8759,77],{"class":58},[52,8761,8762],{"class":54,"line":600},[52,8763,597],{"emptyLinePlaceholder":171},[52,8765,8766,8768,8770],{"class":54,"line":606},[52,8767,59],{"class":58},[52,8769,8286],{"class":62},[52,8771,77],{"class":58},[52,8773,8774,8776,8778,8780,8782,8785,8787,8789,8791,8794,8797,8799,8802,8804],{"class":54,"line":653},[52,8775,83],{"class":58},[52,8777,8295],{"class":62},[52,8779,3771],{"class":66},[52,8781,1540],{"class":58},[52,8783,8784],{"class":66},"click",[52,8786,70],{"class":231},[52,8788,2422],{"class":58},[52,8790,2425],{"class":231},[52,8792,8793],{"class":58}," angle ",[52,8795,8796],{"class":231},"+=",[52,8798,8557],{"class":371},[52,8800,8801],{"class":58},"}>Rotate +45°\u003C/",[52,8803,8295],{"class":62},[52,8805,77],{"class":58},[52,8807,8808,8810,8812,8814,8816,8818,8820,8822,8824,8826,8829,8831,8834,8836],{"class":54,"line":662},[52,8809,83],{"class":58},[52,8811,8295],{"class":62},[52,8813,3771],{"class":66},[52,8815,1540],{"class":58},[52,8817,8784],{"class":66},[52,8819,70],{"class":231},[52,8821,2422],{"class":58},[52,8823,2425],{"class":231},[52,8825,8793],{"class":58},[52,8827,8828],{"class":231},"-=",[52,8830,8557],{"class":371},[52,8832,8833],{"class":58},"}>Rotate -45°\u003C/",[52,8835,8295],{"class":62},[52,8837,77],{"class":58},[52,8839,8840,8842,8844,8846,8848,8850,8852,8854,8856,8858,8860,8862,8865,8867],{"class":54,"line":671},[52,8841,83],{"class":58},[52,8843,8295],{"class":62},[52,8845,3771],{"class":66},[52,8847,1540],{"class":58},[52,8849,8784],{"class":66},[52,8851,70],{"class":231},[52,8853,2422],{"class":58},[52,8855,2425],{"class":231},[52,8857,8793],{"class":58},[52,8859,70],{"class":231},[52,8861,2457],{"class":371},[52,8863,8864],{"class":58},"}>Reset\u003C/",[52,8866,8295],{"class":62},[52,8868,77],{"class":58},[52,8870,8871,8873,8875],{"class":54,"line":676},[52,8872,121],{"class":58},[52,8874,8286],{"class":62},[52,8876,77],{"class":58},[52,8878,8879],{"class":54,"line":682},[52,8880,597],{"emptyLinePlaceholder":171},[52,8882,8883,8885,8887],{"class":54,"line":698},[52,8884,59],{"class":58},[52,8886,63],{"class":371},[52,8888,77],{"class":58},[52,8890,8891,8893,8895,8897,8899,8901,8903,8905,8907,8909,8911,8913,8915,8917,8919],{"class":54,"line":707},[52,8892,83],{"class":58},[52,8894,2216],{"class":371},[52,8896,6815],{"class":66},[52,8898,70],{"class":231},[52,8900,8383],{"class":73},[52,8902,3913],{"class":66},[52,8904,70],{"class":231},[52,8906,723],{"class":58},[52,8908,4011],{"class":371},[52,8910,2577],{"class":58},[52,8912,2374],{"class":66},[52,8914,70],{"class":231},[52,8916,723],{"class":58},[52,8918,2292],{"class":371},[52,8920,4014],{"class":58},[52,8922,8923,8925,8927,8930,8932,8934,8936],{"class":54,"line":2327},[52,8924,83],{"class":58},[52,8926,86],{"class":371},[52,8928,8929],{"class":58}," {angle} ",[52,8931,6779],{"class":66},[52,8933,70],{"class":231},[52,8935,8383],{"class":73},[52,8937,105],{"class":58},[52,8939,8940,8942,8944],{"class":54,"line":7369},[52,8941,121],{"class":58},[52,8943,63],{"class":371},[52,8945,77],{"class":58},[43,8947,8949],{"className":419,"code":8948,"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,8950,8951,8961,8971,8975,8983,9007,9011,9017,9021,9029,9063,9097,9123,9131,9135,9143,9175,9200,9208,9212,9216],{"__ignoreMap":48},[52,8952,8953,8955,8957,8959],{"class":54,"line":55},[52,8954,232],{"class":231},[52,8956,2645],{"class":58},[52,8958,238],{"class":231},[52,8960,2650],{"class":73},[52,8962,8963,8965,8967,8969],{"class":54,"line":80},[52,8964,232],{"class":231},[52,8966,8234],{"class":58},[52,8968,238],{"class":231},[52,8970,289],{"class":73},[52,8972,8973],{"class":54,"line":108},[52,8974,597],{"emptyLinePlaceholder":171},[52,8976,8977,8979,8981],{"class":54,"line":118},[52,8978,2304],{"class":231},[52,8980,8471],{"class":66},[52,8982,2310],{"class":58},[52,8984,8985,8987,8989,8991,8993,8995,8997,8999,9001,9003,9005],{"class":54,"line":594},[52,8986,2368],{"class":231},[52,8988,2371],{"class":58},[52,8990,1199],{"class":371},[52,8992,1881],{"class":58},[52,8994,8486],{"class":371},[52,8996,2382],{"class":58},[52,8998,70],{"class":231},[52,9000,2681],{"class":66},[52,9002,2289],{"class":58},[52,9004,6387],{"class":371},[52,9006,2295],{"class":58},[52,9008,9009],{"class":54,"line":600},[52,9010,597],{"emptyLinePlaceholder":171},[52,9012,9013,9015],{"class":54,"line":606},[52,9014,2402],{"class":231},[52,9016,2405],{"class":58},[52,9018,9019],{"class":54,"line":653},[52,9020,8513],{"class":58},[52,9022,9023,9025,9027],{"class":54,"line":662},[52,9024,2476],{"class":58},[52,9026,8286],{"class":62},[52,9028,77],{"class":58},[52,9030,9031,9033,9035,9037,9039,9041,9043,9045,9047,9049,9051,9053,9055,9057,9059,9061],{"class":54,"line":671},[52,9032,8526],{"class":58},[52,9034,8295],{"class":62},[52,9036,8531],{"class":66},[52,9038,70],{"class":231},[52,9040,2422],{"class":58},[52,9042,2425],{"class":231},[52,9044,8540],{"class":66},[52,9046,2289],{"class":58},[52,9048,1139],{"class":8545},[52,9050,8548],{"class":231},[52,9052,8551],{"class":58},[52,9054,8554],{"class":231},[52,9056,8557],{"class":371},[52,9058,8560],{"class":58},[52,9060,8295],{"class":62},[52,9062,77],{"class":58},[52,9064,9065,9067,9069,9071,9073,9075,9077,9079,9081,9083,9085,9087,9089,9091,9093,9095],{"class":54,"line":676},[52,9066,8526],{"class":58},[52,9068,8295],{"class":62},[52,9070,8531],{"class":66},[52,9072,70],{"class":231},[52,9074,2422],{"class":58},[52,9076,2425],{"class":231},[52,9078,8540],{"class":66},[52,9080,2289],{"class":58},[52,9082,1139],{"class":8545},[52,9084,8548],{"class":231},[52,9086,8551],{"class":58},[52,9088,8591],{"class":231},[52,9090,8557],{"class":371},[52,9092,8596],{"class":58},[52,9094,8295],{"class":62},[52,9096,77],{"class":58},[52,9098,9099,9101,9103,9105,9107,9109,9111,9113,9115,9117,9119,9121],{"class":54,"line":682},[52,9100,8526],{"class":58},[52,9102,8295],{"class":62},[52,9104,8531],{"class":66},[52,9106,70],{"class":231},[52,9108,2422],{"class":58},[52,9110,2425],{"class":231},[52,9112,8540],{"class":66},[52,9114,2289],{"class":58},[52,9116,6387],{"class":371},[52,9118,8623],{"class":58},[52,9120,8295],{"class":62},[52,9122,77],{"class":58},[52,9124,9125,9127,9129],{"class":54,"line":698},[52,9126,8632],{"class":58},[52,9128,8286],{"class":62},[52,9130,77],{"class":58},[52,9132,9133],{"class":54,"line":707},[52,9134,597],{"emptyLinePlaceholder":171},[52,9136,9137,9139,9141],{"class":54,"line":2327},[52,9138,2476],{"class":58},[52,9140,63],{"class":371},[52,9142,77],{"class":58},[52,9144,9145,9147,9149,9151,9153,9155,9157,9159,9161,9163,9165,9167,9169,9171,9173],{"class":54,"line":7369},[52,9146,8526],{"class":58},[52,9148,2216],{"class":371},[52,9150,6815],{"class":66},[52,9152,70],{"class":231},[52,9154,8383],{"class":73},[52,9156,3913],{"class":66},[52,9158,70],{"class":231},[52,9160,723],{"class":58},[52,9162,4011],{"class":371},[52,9164,2577],{"class":58},[52,9166,2374],{"class":66},[52,9168,70],{"class":231},[52,9170,723],{"class":58},[52,9172,2292],{"class":371},[52,9174,4014],{"class":58},[52,9176,9177,9179,9181,9183,9185,9187,9189,9192,9194,9196,9198],{"class":54,"line":7379},[52,9178,8526],{"class":58},[52,9180,86],{"class":371},[52,9182,8249],{"class":66},[52,9184,70],{"class":231},[52,9186,723],{"class":58},[52,9188,1199],{"class":66},[52,9190,9191],{"class":58},"()} ",[52,9193,6779],{"class":66},[52,9195,70],{"class":231},[52,9197,8383],{"class":73},[52,9199,105],{"class":58},[52,9201,9202,9204,9206],{"class":54,"line":7390},[52,9203,8632],{"class":58},[52,9205,63],{"class":371},[52,9207,77],{"class":58},[52,9209,9210],{"class":54,"line":7395},[52,9211,8714],{"class":58},[52,9213,9214],{"class":54,"line":8717},[52,9215,2500],{"class":58},[52,9217,9218],{"class":54,"line":8722},[52,9219,729],{"class":58},[43,9221,9223],{"className":222,"code":9222,"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,9224,9225,9237,9241,9255,9259,9279,9301,9305,9309,9313,9318,9338,9342,9347],{"__ignoreMap":48},[52,9226,9227,9229,9232,9234],{"class":54,"line":55},[52,9228,232],{"class":231},[52,9230,9231],{"class":58}," { createShader } ",[52,9233,238],{"class":231},[52,9235,9236],{"class":73}," 'shaders/js'\n",[52,9238,9239],{"class":54,"line":80},[52,9240,597],{"emptyLinePlaceholder":171},[52,9242,9243,9245,9247,9249,9251,9253],{"class":54,"line":108},[52,9244,1721],{"class":231},[52,9246,1724],{"class":371},[52,9248,1727],{"class":231},[52,9250,1730],{"class":231},[52,9252,1733],{"class":66},[52,9254,1736],{"class":58},[52,9256,9257],{"class":54,"line":118},[52,9258,1751],{"class":58},[52,9260,9261,9263,9265,9267,9269,9271,9273,9275,9277],{"class":54,"line":594},[52,9262,1756],{"class":58},[52,9264,2869],{"class":73},[52,9266,2872],{"class":58},[52,9268,7880],{"class":73},[52,9270,5254],{"class":58},[52,9272,4011],{"class":371},[52,9274,7170],{"class":58},[52,9276,2292],{"class":371},[52,9278,4283],{"class":58},[52,9280,9281,9283,9285,9287,9290,9293,9295,9297,9299],{"class":54,"line":600},[52,9282,1756],{"class":58},[52,9284,2126],{"class":73},[52,9286,2872],{"class":58},[52,9288,9289],{"class":73},"'gradient'",[52,9291,9292],{"class":58},", props: { angle: ",[52,9294,6387],{"class":371},[52,9296,7915],{"class":58},[52,9298,7880],{"class":73},[52,9300,1768],{"class":58},[52,9302,9303],{"class":54,"line":606},[52,9304,1773],{"class":58},[52,9306,9307],{"class":54,"line":653},[52,9308,1778],{"class":58},[52,9310,9311],{"class":54,"line":662},[52,9312,597],{"emptyLinePlaceholder":171},[52,9314,9315],{"class":54,"line":671},[52,9316,9317],{"class":559},"// Update angle at runtime\n",[52,9319,9320,9323,9326,9328,9330,9333,9335],{"class":54,"line":676},[52,9321,9322],{"class":58},"shader.",[52,9324,9325],{"class":66},"update",[52,9327,2289],{"class":58},[52,9329,9289],{"class":73},[52,9331,9332],{"class":58},", { angle: ",[52,9334,1206],{"class":371},[52,9336,9337],{"class":58}," })\n",[52,9339,9340],{"class":54,"line":682},[52,9341,597],{"emptyLinePlaceholder":171},[52,9343,9344],{"class":54,"line":698},[52,9345,9346],{"class":559},"// Reset angle\n",[52,9348,9349,9351,9353,9355,9357,9359,9361],{"class":54,"line":707},[52,9350,9322],{"class":58},[52,9352,9325],{"class":66},[52,9354,2289],{"class":58},[52,9356,9289],{"class":73},[52,9358,9332],{"class":58},[52,9360,6387],{"class":371},[52,9362,9337],{"class":58},[15,9364,9365],{},"Click the buttons, and the gradient rotates inside the circle instantly. No lag, no stutter—just smooth, real-time updates.",[9367,9368],"interactive-shader-demo",{":controls":9369,":preset":9370},"[{\"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,9372,9373],{},"The angle updates immediately because props are reactive. Change any prop—color, position, intensity—and the GPU responds instantly.",[23,9375,9377],{"id":9376},"common-reactive-props","Common Reactive Props",[15,9379,9380],{},"Different components accept different props. Here are patterns you'll use frequently:",[15,9382,9383,1540],{},[151,9384,9385],{},"Position and Size",[43,9387,9389],{"className":6731,"code":9388,"language":6733,"meta":48,"style":48},"\u003CCircle :radius=\"size\" :center=\"{ x: posX, y: posY }\" />\n",[31,9390,9391],{"__ignoreMap":48},[52,9392,9393,9395,9397,9399,9402,9404,9406,9409,9411,9413,9415,9417,9419,9422,9424],{"class":54,"line":55},[52,9394,59],{"class":58},[52,9396,2216],{"class":62},[52,9398,2454],{"class":58},[52,9400,9401],{"class":66},"radius",[52,9403,70],{"class":58},[52,9405,618],{"class":73},[52,9407,9408],{"class":58},"size",[52,9410,618],{"class":73},[52,9412,2454],{"class":58},[52,9414,5955],{"class":66},[52,9416,70],{"class":58},[52,9418,618],{"class":73},[52,9420,9421],{"class":58},"{ x: posX, y: posY }",[52,9423,618],{"class":73},[52,9425,105],{"class":58},[15,9427,9428,1540],{},[151,9429,9430],{},"Colors",[43,9432,9434],{"className":6731,"code":9433,"language":6733,"meta":48,"style":48},"\u003CLinearGradient :colorA=\"startColor\" :colorB=\"endColor\" />\n",[31,9435,9436],{"__ignoreMap":48},[52,9437,9438,9440,9442,9444,9446,9448,9450,9453,9455,9457,9459,9461,9463,9466,9468],{"class":54,"line":55},[52,9439,59],{"class":58},[52,9441,86],{"class":62},[52,9443,2454],{"class":58},[52,9445,1849],{"class":66},[52,9447,70],{"class":58},[52,9449,618],{"class":73},[52,9451,9452],{"class":58},"startColor",[52,9454,618],{"class":73},[52,9456,2454],{"class":58},[52,9458,1853],{"class":66},[52,9460,70],{"class":58},[52,9462,618],{"class":73},[52,9464,9465],{"class":58},"endColor",[52,9467,618],{"class":73},[52,9469,105],{"class":58},[15,9471,9472,1540],{},[151,9473,9474],{},"Intensity and Strength",[43,9476,9478],{"className":6731,"code":9477,"language":6733,"meta":48,"style":48},"\u003CBlur :intensity=\"blurAmount\" />\n\u003CGlow :strength=\"glowPower\" />\n",[31,9479,9480,9503],{"__ignoreMap":48},[52,9481,9482,9484,9487,9489,9492,9494,9496,9499,9501],{"class":54,"line":55},[52,9483,59],{"class":58},[52,9485,9486],{"class":62},"Blur",[52,9488,2454],{"class":58},[52,9490,9491],{"class":66},"intensity",[52,9493,70],{"class":58},[52,9495,618],{"class":73},[52,9497,9498],{"class":58},"blurAmount",[52,9500,618],{"class":73},[52,9502,105],{"class":58},[52,9504,9505,9507,9510,9512,9515,9517,9519,9522,9524],{"class":54,"line":80},[52,9506,59],{"class":58},[52,9508,9509],{"class":62},"Glow",[52,9511,2454],{"class":58},[52,9513,9514],{"class":66},"strength",[52,9516,70],{"class":58},[52,9518,618],{"class":73},[52,9520,9521],{"class":58},"glowPower",[52,9523,618],{"class":73},[52,9525,105],{"class":58},[15,9527,9528,1540],{},[151,9529,9530],{},"Angles and Rotation",[43,9532,9534],{"className":6731,"code":9533,"language":6733,"meta":48,"style":48},"\u003CLinearGradient :angle=\"rotation\" />\n",[31,9535,9536],{"__ignoreMap":48},[52,9537,9538,9540,9542,9544,9546,9548,9550,9553,9555],{"class":54,"line":55},[52,9539,59],{"class":58},[52,9541,86],{"class":62},[52,9543,2454],{"class":58},[52,9545,1199],{"class":66},[52,9547,70],{"class":58},[52,9549,618],{"class":73},[52,9551,9552],{"class":58},"rotation",[52,9554,618],{"class":73},[52,9556,105],{"class":58},[15,9558,9559],{},"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,9561,9563],{"id":9562},"animating-props","Animating Props",[15,9565,9566],{},"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,9568,9569,9572],{},[151,9570,9571],{},"Note",": Motion supports React and Vue, as well as plain JavaScript. You can use any animation library you like for Svelte/Solid.",[43,9574,9576],{"className":360,"code":9575,"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,9577,9578,9588,9600,9610,9614,9622,9647,9651,9664,9669,9685,9694,9704,9726,9731,9747,9755,9764,9780,9784,9788,9792,9799,9804,9822,9827,9836,9866,9881,9890,9895,9900],{"__ignoreMap":48},[52,9579,9580,9582,9584,9586],{"class":54,"line":55},[52,9581,232],{"class":231},[52,9583,2345],{"class":58},[52,9585,238],{"class":231},[52,9587,2350],{"class":73},[52,9589,9590,9592,9595,9597],{"class":54,"line":80},[52,9591,232],{"class":231},[52,9593,9594],{"class":58}," { animate } ",[52,9596,238],{"class":231},[52,9598,9599],{"class":73}," 'motion'\n",[52,9601,9602,9604,9606,9608],{"class":54,"line":108},[52,9603,232],{"class":231},[52,9605,8234],{"class":58},[52,9607,238],{"class":231},[52,9609,257],{"class":73},[52,9611,9612],{"class":54,"line":118},[52,9613,597],{"emptyLinePlaceholder":171},[52,9615,9616,9618,9620],{"class":54,"line":594},[52,9617,2304],{"class":231},[52,9619,8471],{"class":66},[52,9621,2310],{"class":58},[52,9623,9624,9626,9628,9630,9632,9635,9637,9639,9641,9643,9645],{"class":54,"line":600},[52,9625,2368],{"class":231},[52,9627,2371],{"class":58},[52,9629,9401],{"class":371},[52,9631,1881],{"class":58},[52,9633,9634],{"class":371},"setRadius",[52,9636,2382],{"class":58},[52,9638,70],{"class":231},[52,9640,2387],{"class":66},[52,9642,2289],{"class":58},[52,9644,5950],{"class":371},[52,9646,2295],{"class":58},[52,9648,9649],{"class":54,"line":606},[52,9650,597],{"emptyLinePlaceholder":171},[52,9652,9653,9656,9659,9662],{"class":54,"line":653},[52,9654,9655],{"class":231}," async",[52,9657,9658],{"class":231}," function",[52,9660,9661],{"class":66}," pulse",[52,9663,2310],{"class":58},[52,9665,9666],{"class":54,"line":662},[52,9667,9668],{"class":559}," // Grow then shrink with smooth easing\n",[52,9670,9671,9674,9677,9680,9682],{"class":54,"line":671},[52,9672,9673],{"class":231}," await",[52,9675,9676],{"class":66}," animate",[52,9678,9679],{"class":58},"(radius, ",[52,9681,6391],{"class":371},[52,9683,9684],{"class":58},", {\n",[52,9686,9687,9690,9692],{"class":54,"line":676},[52,9688,9689],{"class":58}," duration: ",[52,9691,5467],{"class":371},[52,9693,1746],{"class":58},[52,9695,9696,9699,9702],{"class":54,"line":682},[52,9697,9698],{"class":58}," easing: ",[52,9700,9701],{"class":73},"'ease-out'",[52,9703,1746],{"class":58},[52,9705,9706,9709,9712,9715,9718,9720,9723],{"class":54,"line":698},[52,9707,9708],{"class":66}," onUpdate",[52,9710,9711],{"class":58},": (",[52,9713,9714],{"class":8545},"latest",[52,9716,9717],{"class":58},") ",[52,9719,2425],{"class":231},[52,9721,9722],{"class":66}," setRadius",[52,9724,9725],{"class":58},"(latest)\n",[52,9727,9728],{"class":54,"line":707},[52,9729,9730],{"class":58}," })\n",[52,9732,9733,9735,9737,9739,9741,9743,9745],{"class":54,"line":2327},[52,9734,9673],{"class":231},[52,9736,9676],{"class":66},[52,9738,2289],{"class":58},[52,9740,6391],{"class":371},[52,9742,1881],{"class":58},[52,9744,5950],{"class":371},[52,9746,9684],{"class":58},[52,9748,9749,9751,9753],{"class":54,"line":7369},[52,9750,9689],{"class":58},[52,9752,5467],{"class":371},[52,9754,1746],{"class":58},[52,9756,9757,9759,9762],{"class":54,"line":7379},[52,9758,9698],{"class":58},[52,9760,9761],{"class":73},"'ease-in'",[52,9763,1746],{"class":58},[52,9765,9766,9768,9770,9772,9774,9776,9778],{"class":54,"line":7390},[52,9767,9708],{"class":66},[52,9769,9711],{"class":58},[52,9771,9714],{"class":8545},[52,9773,9717],{"class":58},[52,9775,2425],{"class":231},[52,9777,9722],{"class":66},[52,9779,9725],{"class":58},[52,9781,9782],{"class":54,"line":7395},[52,9783,9730],{"class":58},[52,9785,9786],{"class":54,"line":8717},[52,9787,2919],{"class":58},[52,9789,9790],{"class":54,"line":8722},[52,9791,597],{"emptyLinePlaceholder":171},[52,9793,9795,9797],{"class":54,"line":9794},22,[52,9796,2402],{"class":231},[52,9798,2405],{"class":58},[52,9800,9802],{"class":54,"line":9801},23,[52,9803,8513],{"class":58},[52,9805,9807,9809,9811,9813,9815,9818,9820],{"class":54,"line":9806},24,[52,9808,2476],{"class":58},[52,9810,8295],{"class":62},[52,9812,8531],{"class":66},[52,9814,70],{"class":231},[52,9816,9817],{"class":58},"{pulse}>Pulse\u003C/",[52,9819,8295],{"class":62},[52,9821,77],{"class":58},[52,9823,9825],{"class":54,"line":9824},25,[52,9826,597],{"emptyLinePlaceholder":171},[52,9828,9830,9832,9834],{"class":54,"line":9829},26,[52,9831,2476],{"class":58},[52,9833,63],{"class":371},[52,9835,77],{"class":58},[52,9837,9839,9841,9843,9845,9847,9849,9851,9853,9856,9858,9860,9862,9864],{"class":54,"line":9838},27,[52,9840,8526],{"class":58},[52,9842,2216],{"class":371},[52,9844,6815],{"class":66},[52,9846,70],{"class":231},[52,9848,8383],{"class":73},[52,9850,3913],{"class":66},[52,9852,70],{"class":231},[52,9854,9855],{"class":58},"{radius} ",[52,9857,2374],{"class":66},[52,9859,70],{"class":231},[52,9861,723],{"class":58},[52,9863,2292],{"class":371},[52,9865,4014],{"class":58},[52,9867,9869,9871,9873,9875,9877,9879],{"class":54,"line":9868},28,[52,9870,8526],{"class":58},[52,9872,86],{"class":371},[52,9874,6854],{"class":66},[52,9876,70],{"class":231},[52,9878,8383],{"class":73},[52,9880,105],{"class":58},[52,9882,9884,9886,9888],{"class":54,"line":9883},29,[52,9885,8632],{"class":58},[52,9887,63],{"class":371},[52,9889,77],{"class":58},[52,9891,9893],{"class":54,"line":9892},30,[52,9894,8714],{"class":58},[52,9896,9898],{"class":54,"line":9897},31,[52,9899,2500],{"class":58},[52,9901,9903],{"class":54,"line":9902},32,[52,9904,729],{"class":58},[9367,9906],{":controls":9907,":preset":9908},"[{\"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,9910,9911],{},"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,9913,9915],{"id":9914},"performance-notes","Performance Notes",[15,9917,9918],{},"Reactive props update GPU uniforms directly. This means:",[1465,9920,9921,9927,9933],{},[1468,9922,9923,9926],{},[151,9924,9925],{},"No shader recompilation",": Changing a prop doesn't rebuild the shader",[1468,9928,9929,9932],{},[151,9930,9931],{},"GPU-efficient",": Updates happen on the graphics card, not the CPU",[1468,9934,9935,9938],{},[151,9936,9937],{},"Frame-rate friendly",": Animate as many props as you need",[15,9940,9941],{},"You can safely update props every frame, tie them to scroll position, or respond to mouse movement without worrying about performance.",[156,9943,9944],{},"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":9946},[9947,9948,9949,9950,9951],{"id":7969,"depth":80,"text":7970},{"id":8196,"depth":80,"text":8197},{"id":9376,"depth":80,"text":9377},{"id":9562,"depth":80,"text":9563},{"id":9914,"depth":80,"text":9915},"Control shader properties dynamically with reactive state and animations","binary",{},{"title":1487,"description":9952},"docs/guide/4.props-reactivity","JPaO04Mumm4Bh6WcyyPiS-LP3yNvLkHsNDSmQC7FB4U",{"id":9959,"title":1480,"body":9960,"category":165,"description":12727,"exclude":167,"extension":168,"forceFramework":167,"icon":12728,"meta":12729,"navigation":171,"path":1479,"seo":12730,"stem":12731,"__hash__":12732},"guide/docs/guide/5.layout-positioning.md",{"type":8,"value":9961,"toc":12711},[9962,9965,9973,9977,9986,9988,9993,10292,10296,10300,10303,10731,10735,10745,11093,11097,11100,11661,11665,11668,11982,11986,11990,11997,12138,12150,12154,12165,12240,12244,12247,12474,12478,12481,12708],[11,9963,1480],{"id":9964},"layout-positioning",[15,9966,1825,9967,9969,9970,9972],{},[31,9968,33],{}," component renders a ",[31,9971,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,9974,9976],{"id":9975},"the-canvas-model","The canvas model",[15,9978,9979,9980,9982,9983,9985],{},"Every ",[31,9981,33],{}," renders exactly one ",[31,9984,40],{},". It doesn't matter how many components you include in the shader, it will be one canvas, with one shader running.",[23,9987,544],{"id":543},[15,9989,9990,9991,4330],{},"Apply classes or styles directly to the ",[31,9992,33],{},[217,9994,9995,10114,10149,10184,10218],{":tabs":1543},[43,9996,9998],{"className":45,"code":9997,"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,9999,10000,10005,10019,10027,10035,10039,10044,10059,10067,10075,10079,10084,10098,10106],{"__ignoreMap":48},[52,10001,10002],{"class":54,"line":55},[52,10003,10004],{"class":559},"\u003C!-- Tailwind -->\n",[52,10006,10007,10009,10011,10013,10015,10017],{"class":54,"line":80},[52,10008,59],{"class":58},[52,10010,63],{"class":62},[52,10012,67],{"class":66},[52,10014,70],{"class":58},[52,10016,319],{"class":73},[52,10018,77],{"class":58},[52,10020,10021,10023,10025],{"class":54,"line":108},[52,10022,83],{"class":58},[52,10024,86],{"class":62},[52,10026,105],{"class":58},[52,10028,10029,10031,10033],{"class":54,"line":118},[52,10030,121],{"class":58},[52,10032,63],{"class":62},[52,10034,77],{"class":58},[52,10036,10037],{"class":54,"line":594},[52,10038,597],{"emptyLinePlaceholder":171},[52,10040,10041],{"class":54,"line":600},[52,10042,10043],{"class":559},"\u003C!-- CSS class -->\n",[52,10045,10046,10048,10050,10052,10054,10057],{"class":54,"line":606},[52,10047,59],{"class":58},[52,10049,63],{"class":62},[52,10051,67],{"class":66},[52,10053,70],{"class":58},[52,10055,10056],{"class":73},"\"hero-shader\"",[52,10058,77],{"class":58},[52,10060,10061,10063,10065],{"class":54,"line":653},[52,10062,83],{"class":58},[52,10064,86],{"class":62},[52,10066,105],{"class":58},[52,10068,10069,10071,10073],{"class":54,"line":662},[52,10070,121],{"class":58},[52,10072,63],{"class":62},[52,10074,77],{"class":58},[52,10076,10077],{"class":54,"line":671},[52,10078,597],{"emptyLinePlaceholder":171},[52,10080,10081],{"class":54,"line":676},[52,10082,10083],{"class":559},"\u003C!-- Inline -->\n",[52,10085,10086,10088,10090,10092,10094,10096],{"class":54,"line":682},[52,10087,59],{"class":58},[52,10089,63],{"class":62},[52,10091,613],{"class":66},[52,10093,70],{"class":58},[52,10095,927],{"class":73},[52,10097,77],{"class":58},[52,10099,10100,10102,10104],{"class":54,"line":698},[52,10101,83],{"class":58},[52,10103,86],{"class":62},[52,10105,105],{"class":58},[52,10107,10108,10110,10112],{"class":54,"line":707},[52,10109,121],{"class":58},[52,10111,63],{"class":62},[52,10113,77],{"class":58},[43,10115,10117],{"className":360,"code":10116,"language":362,"meta":48,"style":48},"\u003CShader className=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,10118,10119,10133,10141],{"__ignoreMap":48},[52,10120,10121,10123,10125,10127,10129,10131],{"class":54,"line":55},[52,10122,59],{"class":58},[52,10124,63],{"class":371},[52,10126,374],{"class":66},[52,10128,70],{"class":231},[52,10130,319],{"class":73},[52,10132,77],{"class":58},[52,10134,10135,10137,10139],{"class":54,"line":80},[52,10136,83],{"class":58},[52,10138,86],{"class":371},[52,10140,105],{"class":58},[52,10142,10143,10145,10147],{"class":54,"line":108},[52,10144,121],{"class":58},[52,10146,63],{"class":371},[52,10148,77],{"class":58},[43,10150,10152],{"className":419,"code":10151,"language":420,"meta":48,"style":48},"\u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,10153,10154,10168,10176],{"__ignoreMap":48},[52,10155,10156,10158,10160,10162,10164,10166],{"class":54,"line":55},[52,10157,59],{"class":58},[52,10159,63],{"class":371},[52,10161,67],{"class":66},[52,10163,70],{"class":231},[52,10165,319],{"class":73},[52,10167,77],{"class":58},[52,10169,10170,10172,10174],{"class":54,"line":80},[52,10171,83],{"class":58},[52,10173,86],{"class":371},[52,10175,105],{"class":58},[52,10177,10178,10180,10182],{"class":54,"line":108},[52,10179,121],{"class":58},[52,10181,63],{"class":371},[52,10183,77],{"class":58},[43,10185,10186],{"className":419,"code":10151,"language":420,"meta":48,"style":48},[31,10187,10188,10202,10210],{"__ignoreMap":48},[52,10189,10190,10192,10194,10196,10198,10200],{"class":54,"line":55},[52,10191,59],{"class":58},[52,10193,63],{"class":371},[52,10195,67],{"class":66},[52,10197,70],{"class":231},[52,10199,319],{"class":73},[52,10201,77],{"class":58},[52,10203,10204,10206,10208],{"class":54,"line":80},[52,10205,83],{"class":58},[52,10207,86],{"class":371},[52,10209,105],{"class":58},[52,10211,10212,10214,10216],{"class":54,"line":108},[52,10213,121],{"class":58},[52,10215,63],{"class":371},[52,10217,77],{"class":58},[43,10219,10221],{"className":222,"code":10220,"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,10222,10223,10228,10247,10257,10267,10271],{"__ignoreMap":48},[52,10224,10225],{"class":54,"line":55},[52,10226,10227],{"class":559},"// Apply sizing to the canvas element before calling createShader\n",[52,10229,10230,10232,10234,10236,10238,10240,10242,10245],{"class":54,"line":80},[52,10231,1721],{"class":231},[52,10233,2796],{"class":371},[52,10235,1727],{"class":231},[52,10237,2801],{"class":58},[52,10239,2804],{"class":66},[52,10241,2289],{"class":58},[52,10243,10244],{"class":73},"'my-shader'",[52,10246,2295],{"class":58},[52,10248,10249,10252,10254],{"class":54,"line":108},[52,10250,10251],{"class":58},"canvas.style.width ",[52,10253,70],{"class":231},[52,10255,10256],{"class":73}," '100%'\n",[52,10258,10259,10262,10264],{"class":54,"line":118},[52,10260,10261],{"class":58},"canvas.style.height ",[52,10263,70],{"class":231},[52,10265,10266],{"class":73}," '400px'\n",[52,10268,10269],{"class":54,"line":594},[52,10270,597],{"emptyLinePlaceholder":171},[52,10272,10273,10275,10277,10279,10281,10283,10286,10289],{"class":54,"line":600},[52,10274,1721],{"class":231},[52,10276,1724],{"class":371},[52,10278,1727],{"class":231},[52,10280,1730],{"class":231},[52,10282,1733],{"class":66},[52,10284,10285],{"class":58},"(canvas, { components: [",[52,10287,10288],{"class":231},"...",[52,10290,10291],{"class":58},"] })\n",[23,10293,10295],{"id":10294},"common-layout-patterns","Common layout patterns",[2925,10297,10299],{"id":10298},"full-page-background","Full-page background",[15,10301,10302],{},"A shader that stays fixed behind all page content, covering the entire viewport:",[217,10304,10305,10380,10457,10523,10596],{":tabs":1543},[43,10306,10308],{"className":45,"code":10307,"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,10309,10310,10315,10330,10339,10347,10351,10367,10372],{"__ignoreMap":48},[52,10311,10312],{"class":54,"line":55},[52,10313,10314],{"class":559},"\u003C!-- In your layout or App.vue -->\n",[52,10316,10317,10319,10321,10323,10325,10328],{"class":54,"line":80},[52,10318,59],{"class":58},[52,10320,63],{"class":62},[52,10322,67],{"class":66},[52,10324,70],{"class":58},[52,10326,10327],{"class":73},"\"fixed inset-0 -z-10\"",[52,10329,77],{"class":58},[52,10331,10332,10334,10337],{"class":54,"line":108},[52,10333,83],{"class":58},[52,10335,10336],{"class":62},"Aurora",[52,10338,105],{"class":58},[52,10340,10341,10343,10345],{"class":54,"line":118},[52,10342,121],{"class":58},[52,10344,63],{"class":62},[52,10346,77],{"class":58},[52,10348,10349],{"class":54,"line":594},[52,10350,597],{"emptyLinePlaceholder":171},[52,10352,10353,10355,10358,10360,10362,10365],{"class":54,"line":600},[52,10354,59],{"class":58},[52,10356,10357],{"class":62},"main",[52,10359,67],{"class":66},[52,10361,70],{"class":58},[52,10363,10364],{"class":73},"\"relative z-10\"",[52,10366,77],{"class":58},[52,10368,10369],{"class":54,"line":606},[52,10370,10371],{"class":559}," \u003C!-- Your page content scrolls over the shader -->\n",[52,10373,10374,10376,10378],{"class":54,"line":653},[52,10375,121],{"class":58},[52,10377,10357],{"class":62},[52,10379,77],{"class":58},[43,10381,10383],{"className":360,"code":10382,"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,10384,10385,10390,10404,10412,10420,10434,10444,10452],{"__ignoreMap":48},[52,10386,10387],{"class":54,"line":55},[52,10388,10389],{"class":58},"\u003C>\n",[52,10391,10392,10394,10396,10398,10400,10402],{"class":54,"line":80},[52,10393,83],{"class":58},[52,10395,63],{"class":371},[52,10397,374],{"class":66},[52,10399,70],{"class":231},[52,10401,10327],{"class":73},[52,10403,77],{"class":58},[52,10405,10406,10408,10410],{"class":54,"line":108},[52,10407,2213],{"class":58},[52,10409,10336],{"class":371},[52,10411,105],{"class":58},[52,10413,10414,10416,10418],{"class":54,"line":118},[52,10415,2230],{"class":58},[52,10417,63],{"class":371},[52,10419,77],{"class":58},[52,10421,10422,10424,10426,10428,10430,10432],{"class":54,"line":594},[52,10423,83],{"class":58},[52,10425,10357],{"class":62},[52,10427,374],{"class":66},[52,10429,70],{"class":231},[52,10431,10364],{"class":73},[52,10433,77],{"class":58},[52,10435,10436,10439,10442],{"class":54,"line":600},[52,10437,10438],{"class":58}," {",[52,10440,10441],{"class":559},"/* Your page content */",[52,10443,729],{"class":58},[52,10445,10446,10448,10450],{"class":54,"line":606},[52,10447,2230],{"class":58},[52,10449,10357],{"class":62},[52,10451,77],{"class":58},[52,10453,10454],{"class":54,"line":653},[52,10455,10456],{"class":58},"\u003C/>\n",[43,10458,10460],{"className":419,"code":10459,"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,10461,10462,10476,10484,10492,10496,10510,10515],{"__ignoreMap":48},[52,10463,10464,10466,10468,10470,10472,10474],{"class":54,"line":55},[52,10465,59],{"class":58},[52,10467,63],{"class":371},[52,10469,67],{"class":66},[52,10471,70],{"class":231},[52,10473,10327],{"class":73},[52,10475,77],{"class":58},[52,10477,10478,10480,10482],{"class":54,"line":80},[52,10479,83],{"class":58},[52,10481,10336],{"class":371},[52,10483,105],{"class":58},[52,10485,10486,10488,10490],{"class":54,"line":108},[52,10487,121],{"class":58},[52,10489,63],{"class":371},[52,10491,77],{"class":58},[52,10493,10494],{"class":54,"line":118},[52,10495,597],{"emptyLinePlaceholder":171},[52,10497,10498,10500,10502,10504,10506,10508],{"class":54,"line":594},[52,10499,59],{"class":58},[52,10501,10357],{"class":62},[52,10503,67],{"class":66},[52,10505,70],{"class":231},[52,10507,10364],{"class":73},[52,10509,77],{"class":58},[52,10511,10512],{"class":54,"line":600},[52,10513,10514],{"class":58}," \u003C!-- Your page content -->\n",[52,10516,10517,10519,10521],{"class":54,"line":606},[52,10518,121],{"class":58},[52,10520,10357],{"class":62},[52,10522,77],{"class":58},[43,10524,10526],{"className":419,"code":10525,"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,10527,10528,10532,10546,10554,10562,10576,10584,10592],{"__ignoreMap":48},[52,10529,10530],{"class":54,"line":55},[52,10531,10389],{"class":58},[52,10533,10534,10536,10538,10540,10542,10544],{"class":54,"line":80},[52,10535,83],{"class":58},[52,10537,63],{"class":371},[52,10539,67],{"class":66},[52,10541,70],{"class":231},[52,10543,10327],{"class":73},[52,10545,77],{"class":58},[52,10547,10548,10550,10552],{"class":54,"line":108},[52,10549,2213],{"class":58},[52,10551,10336],{"class":371},[52,10553,105],{"class":58},[52,10555,10556,10558,10560],{"class":54,"line":118},[52,10557,2230],{"class":58},[52,10559,63],{"class":371},[52,10561,77],{"class":58},[52,10563,10564,10566,10568,10570,10572,10574],{"class":54,"line":594},[52,10565,83],{"class":58},[52,10567,10357],{"class":62},[52,10569,67],{"class":66},[52,10571,70],{"class":231},[52,10573,10364],{"class":73},[52,10575,77],{"class":58},[52,10577,10578,10580,10582],{"class":54,"line":600},[52,10579,10438],{"class":58},[52,10581,10441],{"class":559},[52,10583,729],{"class":58},[52,10585,10586,10588,10590],{"class":54,"line":606},[52,10587,2230],{"class":58},[52,10589,10357],{"class":62},[52,10591,77],{"class":58},[52,10593,10594],{"class":54,"line":653},[52,10595,10456],{"class":58},[43,10597,10601],{"className":10598,"code":10599,"language":10600,"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,10602,10603,10631,10651,10655,10671,10682,10707,10718,10723],{"__ignoreMap":48},[52,10604,10605,10607,10610,10612,10614,10617,10619,10621,10624,10627,10629],{"class":54,"line":55},[52,10606,59],{"class":58},[52,10608,10609],{"class":62},"canvas",[52,10611,6815],{"class":66},[52,10613,70],{"class":58},[52,10615,10616],{"class":73},"\"bg\"",[52,10618,613],{"class":66},[52,10620,70],{"class":58},[52,10622,10623],{"class":73},"\"position:fixed;inset:0;z-index:-10;width:100%;height:100%;\"",[52,10625,10626],{"class":58},">\u003C/",[52,10628,10609],{"class":62},[52,10630,77],{"class":58},[52,10632,10633,10635,10637,10639,10641,10644,10647,10649],{"class":54,"line":80},[52,10634,59],{"class":58},[52,10636,10357],{"class":62},[52,10638,613],{"class":66},[52,10640,70],{"class":58},[52,10642,10643],{"class":73},"\"position:relative;z-index:10;\"",[52,10645,10646],{"class":58},">Your content\u003C/",[52,10648,10357],{"class":62},[52,10650,77],{"class":58},[52,10652,10653],{"class":54,"line":108},[52,10654,597],{"emptyLinePlaceholder":171},[52,10656,10657,10659,10661,10664,10666,10669],{"class":54,"line":118},[52,10658,59],{"class":58},[52,10660,2253],{"class":62},[52,10662,10663],{"class":66}," type",[52,10665,70],{"class":58},[52,10667,10668],{"class":73},"\"module\"",[52,10670,77],{"class":58},[52,10672,10673,10676,10678,10680],{"class":54,"line":594},[52,10674,10675],{"class":231}," import",[52,10677,9231],{"class":58},[52,10679,238],{"class":231},[52,10681,9236],{"class":73},[52,10683,10684,10686,10688,10690,10692,10694,10697,10699,10701,10704],{"class":54,"line":600},[52,10685,2368],{"class":231},[52,10687,1724],{"class":371},[52,10689,1727],{"class":231},[52,10691,1730],{"class":231},[52,10693,1733],{"class":66},[52,10695,10696],{"class":58},"(document.",[52,10698,2804],{"class":66},[52,10700,2289],{"class":58},[52,10702,10703],{"class":73},"'bg'",[52,10705,10706],{"class":58},"), {\n",[52,10708,10709,10712,10715],{"class":54,"line":606},[52,10710,10711],{"class":58}," components: [{ type: ",[52,10713,10714],{"class":73},"'Aurora'",[52,10716,10717],{"class":58},", props: {} }]\n",[52,10719,10720],{"class":54,"line":653},[52,10721,10722],{"class":58}," })\n",[52,10724,10725,10727,10729],{"class":54,"line":662},[52,10726,121],{"class":58},[52,10728,2253],{"class":62},[52,10730,77],{"class":58},[2925,10732,10734],{"id":10733},"section-background","Section background",[15,10736,10737,10738,1850,10741,10744],{},"A shader that fills a content section without affecting the rest of the page. The parent must have ",[31,10739,10740],{},"position: relative",[31,10742,10743],{},"overflow: hidden"," to contain the canvas:",[217,10746,10747,10851,10944,11019],{":tabs":219},[43,10748,10750],{"className":45,"code":10749,"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,10751,10752,10768,10782,10791,10799,10803,10823,10843],{"__ignoreMap":48},[52,10753,10754,10756,10759,10761,10763,10766],{"class":54,"line":55},[52,10755,59],{"class":58},[52,10757,10758],{"class":62},"section",[52,10760,67],{"class":66},[52,10762,70],{"class":58},[52,10764,10765],{"class":73},"\"relative overflow-hidden py-24 px-8\"",[52,10767,77],{"class":58},[52,10769,10770,10772,10774,10776,10778,10780],{"class":54,"line":80},[52,10771,83],{"class":58},[52,10773,63],{"class":62},[52,10775,67],{"class":66},[52,10777,70],{"class":58},[52,10779,74],{"class":73},[52,10781,77],{"class":58},[52,10783,10784,10786,10789],{"class":54,"line":108},[52,10785,2213],{"class":58},[52,10787,10788],{"class":62},"Plasma",[52,10790,105],{"class":58},[52,10792,10793,10795,10797],{"class":54,"line":118},[52,10794,2230],{"class":58},[52,10796,63],{"class":62},[52,10798,77],{"class":58},[52,10800,10801],{"class":54,"line":594},[52,10802,597],{"emptyLinePlaceholder":171},[52,10804,10805,10807,10809,10811,10813,10816,10819,10821],{"class":54,"line":600},[52,10806,83],{"class":58},[52,10808,23],{"class":62},[52,10810,67],{"class":66},[52,10812,70],{"class":58},[52,10814,10815],{"class":73},"\"relative text-4xl font-bold text-white\"",[52,10817,10818],{"class":58},">Section Heading\u003C/",[52,10820,23],{"class":62},[52,10822,77],{"class":58},[52,10824,10825,10827,10829,10831,10833,10836,10839,10841],{"class":54,"line":606},[52,10826,83],{"class":58},[52,10828,15],{"class":62},[52,10830,67],{"class":66},[52,10832,70],{"class":58},[52,10834,10835],{"class":73},"\"relative text-white/80 mt-4\"",[52,10837,10838],{"class":58},">Content above the shader.\u003C/",[52,10840,15],{"class":62},[52,10842,77],{"class":58},[52,10844,10845,10847,10849],{"class":54,"line":653},[52,10846,121],{"class":58},[52,10848,10758],{"class":62},[52,10850,77],{"class":58},[43,10852,10854],{"className":360,"code":10853,"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,10855,10856,10870,10884,10892,10900,10918,10936],{"__ignoreMap":48},[52,10857,10858,10860,10862,10864,10866,10868],{"class":54,"line":55},[52,10859,59],{"class":58},[52,10861,10758],{"class":62},[52,10863,374],{"class":66},[52,10865,70],{"class":231},[52,10867,10765],{"class":73},[52,10869,77],{"class":58},[52,10871,10872,10874,10876,10878,10880,10882],{"class":54,"line":80},[52,10873,83],{"class":58},[52,10875,63],{"class":371},[52,10877,374],{"class":66},[52,10879,70],{"class":231},[52,10881,74],{"class":73},[52,10883,77],{"class":58},[52,10885,10886,10888,10890],{"class":54,"line":108},[52,10887,2213],{"class":58},[52,10889,10788],{"class":371},[52,10891,105],{"class":58},[52,10893,10894,10896,10898],{"class":54,"line":118},[52,10895,2230],{"class":58},[52,10897,63],{"class":371},[52,10899,77],{"class":58},[52,10901,10902,10904,10906,10908,10910,10912,10914,10916],{"class":54,"line":594},[52,10903,83],{"class":58},[52,10905,23],{"class":62},[52,10907,374],{"class":66},[52,10909,70],{"class":231},[52,10911,10815],{"class":73},[52,10913,10818],{"class":58},[52,10915,23],{"class":62},[52,10917,77],{"class":58},[52,10919,10920,10922,10924,10926,10928,10930,10932,10934],{"class":54,"line":600},[52,10921,83],{"class":58},[52,10923,15],{"class":62},[52,10925,374],{"class":66},[52,10927,70],{"class":231},[52,10929,10835],{"class":73},[52,10931,10838],{"class":58},[52,10933,15],{"class":62},[52,10935,77],{"class":58},[52,10937,10938,10940,10942],{"class":54,"line":606},[52,10939,121],{"class":58},[52,10941,10758],{"class":62},[52,10943,77],{"class":58},[43,10945,10947],{"className":419,"code":10946,"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,10948,10949,10963,10977,10985,10993,11011],{"__ignoreMap":48},[52,10950,10951,10953,10955,10957,10959,10961],{"class":54,"line":55},[52,10952,59],{"class":58},[52,10954,10758],{"class":62},[52,10956,67],{"class":66},[52,10958,70],{"class":231},[52,10960,10765],{"class":73},[52,10962,77],{"class":58},[52,10964,10965,10967,10969,10971,10973,10975],{"class":54,"line":80},[52,10966,83],{"class":58},[52,10968,63],{"class":371},[52,10970,67],{"class":66},[52,10972,70],{"class":231},[52,10974,74],{"class":73},[52,10976,77],{"class":58},[52,10978,10979,10981,10983],{"class":54,"line":108},[52,10980,2213],{"class":58},[52,10982,10788],{"class":371},[52,10984,105],{"class":58},[52,10986,10987,10989,10991],{"class":54,"line":118},[52,10988,2230],{"class":58},[52,10990,63],{"class":371},[52,10992,77],{"class":58},[52,10994,10995,10997,10999,11001,11003,11005,11007,11009],{"class":54,"line":594},[52,10996,83],{"class":58},[52,10998,23],{"class":62},[52,11000,67],{"class":66},[52,11002,70],{"class":231},[52,11004,10815],{"class":73},[52,11006,10818],{"class":58},[52,11008,23],{"class":62},[52,11010,77],{"class":58},[52,11012,11013,11015,11017],{"class":54,"line":600},[52,11014,121],{"class":58},[52,11016,10758],{"class":62},[52,11018,77],{"class":58},[43,11020,11021],{"className":419,"code":10946,"language":420,"meta":48,"style":48},[31,11022,11023,11037,11051,11059,11067,11085],{"__ignoreMap":48},[52,11024,11025,11027,11029,11031,11033,11035],{"class":54,"line":55},[52,11026,59],{"class":58},[52,11028,10758],{"class":62},[52,11030,67],{"class":66},[52,11032,70],{"class":231},[52,11034,10765],{"class":73},[52,11036,77],{"class":58},[52,11038,11039,11041,11043,11045,11047,11049],{"class":54,"line":80},[52,11040,83],{"class":58},[52,11042,63],{"class":371},[52,11044,67],{"class":66},[52,11046,70],{"class":231},[52,11048,74],{"class":73},[52,11050,77],{"class":58},[52,11052,11053,11055,11057],{"class":54,"line":108},[52,11054,2213],{"class":58},[52,11056,10788],{"class":371},[52,11058,105],{"class":58},[52,11060,11061,11063,11065],{"class":54,"line":118},[52,11062,2230],{"class":58},[52,11064,63],{"class":371},[52,11066,77],{"class":58},[52,11068,11069,11071,11073,11075,11077,11079,11081,11083],{"class":54,"line":594},[52,11070,83],{"class":58},[52,11072,23],{"class":62},[52,11074,67],{"class":66},[52,11076,70],{"class":231},[52,11078,10815],{"class":73},[52,11080,10818],{"class":58},[52,11082,23],{"class":62},[52,11084,77],{"class":58},[52,11086,11087,11089,11091],{"class":54,"line":600},[52,11088,121],{"class":58},[52,11090,10758],{"class":62},[52,11092,77],{"class":58},[2925,11094,11096],{"id":11095},"card-with-shader-fill","Card with shader fill",[15,11098,11099],{},"A shader used as the visual background of a card or panel:",[217,11101,11102,11262,11408,11535],{":tabs":219},[43,11103,11105],{"className":45,"code":11104,"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,11106,11107,11122,11137,11152,11175,11183,11187,11192,11206,11226,11246,11254],{"__ignoreMap":48},[52,11108,11109,11111,11113,11115,11117,11120],{"class":54,"line":55},[52,11110,59],{"class":58},[52,11112,8286],{"class":62},[52,11114,67],{"class":66},[52,11116,70],{"class":58},[52,11118,11119],{"class":73},"\"relative rounded-2xl overflow-hidden p-8 text-white\"",[52,11121,77],{"class":58},[52,11123,11124,11126,11128,11130,11132,11135],{"class":54,"line":80},[52,11125,83],{"class":58},[52,11127,63],{"class":62},[52,11129,67],{"class":66},[52,11131,70],{"class":58},[52,11133,11134],{"class":73},"\"absolute inset-0\"",[52,11136,77],{"class":58},[52,11138,11139,11141,11143,11145,11147,11150],{"class":54,"line":108},[52,11140,2213],{"class":58},[52,11142,1571],{"class":62},[52,11144,1574],{"class":66},[52,11146,70],{"class":58},[52,11148,11149],{"class":73},"\"#1e1b4b\"",[52,11151,105],{"class":58},[52,11153,11154,11156,11158,11161,11163,11166,11168,11170,11173],{"class":54,"line":118},[52,11155,2213],{"class":58},[52,11157,9509],{"class":62},[52,11159,11160],{"class":66}," :intensity",[52,11162,70],{"class":58},[52,11164,11165],{"class":73},"\"0.4\"",[52,11167,1574],{"class":66},[52,11169,70],{"class":58},[52,11171,11172],{"class":73},"\"#6366f1\"",[52,11174,105],{"class":58},[52,11176,11177,11179,11181],{"class":54,"line":594},[52,11178,2230],{"class":58},[52,11180,63],{"class":62},[52,11182,77],{"class":58},[52,11184,11185],{"class":54,"line":600},[52,11186,597],{"emptyLinePlaceholder":171},[52,11188,11189],{"class":54,"line":606},[52,11190,11191],{"class":559}," \u003C!-- Content sits above the shader -->\n",[52,11193,11194,11196,11198,11200,11202,11204],{"class":54,"line":653},[52,11195,83],{"class":58},[52,11197,8286],{"class":62},[52,11199,67],{"class":66},[52,11201,70],{"class":58},[52,11203,10364],{"class":73},[52,11205,77],{"class":58},[52,11207,11208,11210,11212,11214,11216,11219,11222,11224],{"class":54,"line":662},[52,11209,2213],{"class":58},[52,11211,2925],{"class":62},[52,11213,67],{"class":66},[52,11215,70],{"class":58},[52,11217,11218],{"class":73},"\"text-xl font-semibold\"",[52,11220,11221],{"class":58},">Card Title\u003C/",[52,11223,2925],{"class":62},[52,11225,77],{"class":58},[52,11227,11228,11230,11232,11234,11236,11239,11242,11244],{"class":54,"line":671},[52,11229,2213],{"class":58},[52,11231,15],{"class":62},[52,11233,67],{"class":66},[52,11235,70],{"class":58},[52,11237,11238],{"class":73},"\"text-white/70 mt-2\"",[52,11240,11241],{"class":58},">Card description here.\u003C/",[52,11243,15],{"class":62},[52,11245,77],{"class":58},[52,11247,11248,11250,11252],{"class":54,"line":676},[52,11249,2230],{"class":58},[52,11251,8286],{"class":62},[52,11253,77],{"class":58},[52,11255,11256,11258,11260],{"class":54,"line":682},[52,11257,121],{"class":58},[52,11259,8286],{"class":62},[52,11261,77],{"class":58},[43,11263,11265],{"className":360,"code":11264,"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,11266,11267,11281,11295,11309,11334,11342,11356,11374,11392,11400],{"__ignoreMap":48},[52,11268,11269,11271,11273,11275,11277,11279],{"class":54,"line":55},[52,11270,59],{"class":58},[52,11272,8286],{"class":62},[52,11274,374],{"class":66},[52,11276,70],{"class":231},[52,11278,11119],{"class":73},[52,11280,77],{"class":58},[52,11282,11283,11285,11287,11289,11291,11293],{"class":54,"line":80},[52,11284,83],{"class":58},[52,11286,63],{"class":371},[52,11288,374],{"class":66},[52,11290,70],{"class":231},[52,11292,11134],{"class":73},[52,11294,77],{"class":58},[52,11296,11297,11299,11301,11303,11305,11307],{"class":54,"line":108},[52,11298,2213],{"class":58},[52,11300,1571],{"class":371},[52,11302,1574],{"class":66},[52,11304,70],{"class":231},[52,11306,11149],{"class":73},[52,11308,105],{"class":58},[52,11310,11311,11313,11315,11318,11320,11322,11324,11326,11328,11330,11332],{"class":54,"line":118},[52,11312,2213],{"class":58},[52,11314,9509],{"class":371},[52,11316,11317],{"class":66}," intensity",[52,11319,70],{"class":231},[52,11321,723],{"class":58},[52,11323,5963],{"class":371},[52,11325,2577],{"class":58},[52,11327,5776],{"class":66},[52,11329,70],{"class":231},[52,11331,11172],{"class":73},[52,11333,105],{"class":58},[52,11335,11336,11338,11340],{"class":54,"line":594},[52,11337,2230],{"class":58},[52,11339,63],{"class":371},[52,11341,77],{"class":58},[52,11343,11344,11346,11348,11350,11352,11354],{"class":54,"line":600},[52,11345,83],{"class":58},[52,11347,8286],{"class":62},[52,11349,374],{"class":66},[52,11351,70],{"class":231},[52,11353,10364],{"class":73},[52,11355,77],{"class":58},[52,11357,11358,11360,11362,11364,11366,11368,11370,11372],{"class":54,"line":606},[52,11359,2213],{"class":58},[52,11361,2925],{"class":62},[52,11363,374],{"class":66},[52,11365,70],{"class":231},[52,11367,11218],{"class":73},[52,11369,11221],{"class":58},[52,11371,2925],{"class":62},[52,11373,77],{"class":58},[52,11375,11376,11378,11380,11382,11384,11386,11388,11390],{"class":54,"line":653},[52,11377,2213],{"class":58},[52,11379,15],{"class":62},[52,11381,374],{"class":66},[52,11383,70],{"class":231},[52,11385,11238],{"class":73},[52,11387,11241],{"class":58},[52,11389,15],{"class":62},[52,11391,77],{"class":58},[52,11393,11394,11396,11398],{"class":54,"line":662},[52,11395,2230],{"class":58},[52,11397,8286],{"class":62},[52,11399,77],{"class":58},[52,11401,11402,11404,11406],{"class":54,"line":671},[52,11403,121],{"class":58},[52,11405,8286],{"class":62},[52,11407,77],{"class":58},[43,11409,11411],{"className":419,"code":11410,"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,11412,11413,11427,11441,11455,11479,11487,11501,11519,11527],{"__ignoreMap":48},[52,11414,11415,11417,11419,11421,11423,11425],{"class":54,"line":55},[52,11416,59],{"class":58},[52,11418,8286],{"class":62},[52,11420,67],{"class":66},[52,11422,70],{"class":231},[52,11424,11119],{"class":73},[52,11426,77],{"class":58},[52,11428,11429,11431,11433,11435,11437,11439],{"class":54,"line":80},[52,11430,83],{"class":58},[52,11432,63],{"class":371},[52,11434,67],{"class":66},[52,11436,70],{"class":231},[52,11438,11134],{"class":73},[52,11440,77],{"class":58},[52,11442,11443,11445,11447,11449,11451,11453],{"class":54,"line":108},[52,11444,2213],{"class":58},[52,11446,1571],{"class":371},[52,11448,1574],{"class":66},[52,11450,70],{"class":231},[52,11452,11149],{"class":73},[52,11454,105],{"class":58},[52,11456,11457,11459,11461,11463,11465,11467,11469,11471,11473,11475,11477],{"class":54,"line":118},[52,11458,2213],{"class":58},[52,11460,9509],{"class":371},[52,11462,11317],{"class":66},[52,11464,70],{"class":231},[52,11466,723],{"class":58},[52,11468,5963],{"class":371},[52,11470,2577],{"class":58},[52,11472,5776],{"class":66},[52,11474,70],{"class":231},[52,11476,11172],{"class":73},[52,11478,105],{"class":58},[52,11480,11481,11483,11485],{"class":54,"line":594},[52,11482,2230],{"class":58},[52,11484,63],{"class":371},[52,11486,77],{"class":58},[52,11488,11489,11491,11493,11495,11497,11499],{"class":54,"line":600},[52,11490,83],{"class":58},[52,11492,8286],{"class":62},[52,11494,67],{"class":66},[52,11496,70],{"class":231},[52,11498,10364],{"class":73},[52,11500,77],{"class":58},[52,11502,11503,11505,11507,11509,11511,11513,11515,11517],{"class":54,"line":606},[52,11504,2213],{"class":58},[52,11506,2925],{"class":62},[52,11508,67],{"class":66},[52,11510,70],{"class":231},[52,11512,11218],{"class":73},[52,11514,11221],{"class":58},[52,11516,2925],{"class":62},[52,11518,77],{"class":58},[52,11520,11521,11523,11525],{"class":54,"line":653},[52,11522,2230],{"class":58},[52,11524,8286],{"class":62},[52,11526,77],{"class":58},[52,11528,11529,11531,11533],{"class":54,"line":662},[52,11530,121],{"class":58},[52,11532,8286],{"class":62},[52,11534,77],{"class":58},[43,11536,11537],{"className":419,"code":11410,"language":420,"meta":48,"style":48},[31,11538,11539,11553,11567,11581,11605,11613,11627,11645,11653],{"__ignoreMap":48},[52,11540,11541,11543,11545,11547,11549,11551],{"class":54,"line":55},[52,11542,59],{"class":58},[52,11544,8286],{"class":62},[52,11546,67],{"class":66},[52,11548,70],{"class":231},[52,11550,11119],{"class":73},[52,11552,77],{"class":58},[52,11554,11555,11557,11559,11561,11563,11565],{"class":54,"line":80},[52,11556,83],{"class":58},[52,11558,63],{"class":371},[52,11560,67],{"class":66},[52,11562,70],{"class":231},[52,11564,11134],{"class":73},[52,11566,77],{"class":58},[52,11568,11569,11571,11573,11575,11577,11579],{"class":54,"line":108},[52,11570,2213],{"class":58},[52,11572,1571],{"class":371},[52,11574,1574],{"class":66},[52,11576,70],{"class":231},[52,11578,11149],{"class":73},[52,11580,105],{"class":58},[52,11582,11583,11585,11587,11589,11591,11593,11595,11597,11599,11601,11603],{"class":54,"line":118},[52,11584,2213],{"class":58},[52,11586,9509],{"class":371},[52,11588,11317],{"class":66},[52,11590,70],{"class":231},[52,11592,723],{"class":58},[52,11594,5963],{"class":371},[52,11596,2577],{"class":58},[52,11598,5776],{"class":66},[52,11600,70],{"class":231},[52,11602,11172],{"class":73},[52,11604,105],{"class":58},[52,11606,11607,11609,11611],{"class":54,"line":594},[52,11608,2230],{"class":58},[52,11610,63],{"class":371},[52,11612,77],{"class":58},[52,11614,11615,11617,11619,11621,11623,11625],{"class":54,"line":600},[52,11616,83],{"class":58},[52,11618,8286],{"class":62},[52,11620,67],{"class":66},[52,11622,70],{"class":231},[52,11624,10364],{"class":73},[52,11626,77],{"class":58},[52,11628,11629,11631,11633,11635,11637,11639,11641,11643],{"class":54,"line":606},[52,11630,2213],{"class":58},[52,11632,2925],{"class":62},[52,11634,67],{"class":66},[52,11636,70],{"class":231},[52,11638,11218],{"class":73},[52,11640,11221],{"class":58},[52,11642,2925],{"class":62},[52,11644,77],{"class":58},[52,11646,11647,11649,11651],{"class":54,"line":653},[52,11648,2230],{"class":58},[52,11650,8286],{"class":62},[52,11652,77],{"class":58},[52,11654,11655,11657,11659],{"class":54,"line":662},[52,11656,121],{"class":58},[52,11658,8286],{"class":62},[52,11660,77],{"class":58},[2925,11662,11664],{"id":11663},"inline-content-block","Inline content block",[15,11666,11667],{},"A shader that flows naturally in document layout, like an image or video:",[217,11669,11670,11758,11833,11908],{":tabs":219},[43,11671,11673],{"className":45,"code":11672,"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,11674,11675,11684,11697,11701,11716,11725,11733,11737,11750],{"__ignoreMap":48},[52,11676,11677,11679,11682],{"class":54,"line":55},[52,11678,59],{"class":58},[52,11680,11681],{"class":62},"article",[52,11683,77],{"class":58},[52,11685,11686,11688,11690,11693,11695],{"class":54,"line":80},[52,11687,83],{"class":58},[52,11689,15],{"class":62},[52,11691,11692],{"class":58},">Text before the shader.\u003C/",[52,11694,15],{"class":62},[52,11696,77],{"class":58},[52,11698,11699],{"class":54,"line":108},[52,11700,597],{"emptyLinePlaceholder":171},[52,11702,11703,11705,11707,11709,11711,11714],{"class":54,"line":118},[52,11704,83],{"class":58},[52,11706,63],{"class":62},[52,11708,67],{"class":66},[52,11710,70],{"class":58},[52,11712,11713],{"class":73},"\"w-full aspect-video my-8 rounded-xl\"",[52,11715,77],{"class":58},[52,11717,11718,11720,11723],{"class":54,"line":594},[52,11719,2213],{"class":58},[52,11721,11722],{"class":62},"Swirl",[52,11724,105],{"class":58},[52,11726,11727,11729,11731],{"class":54,"line":600},[52,11728,2230],{"class":58},[52,11730,63],{"class":62},[52,11732,77],{"class":58},[52,11734,11735],{"class":54,"line":606},[52,11736,597],{"emptyLinePlaceholder":171},[52,11738,11739,11741,11743,11746,11748],{"class":54,"line":653},[52,11740,83],{"class":58},[52,11742,15],{"class":62},[52,11744,11745],{"class":58},">Text after the shader continues here.\u003C/",[52,11747,15],{"class":62},[52,11749,77],{"class":58},[52,11751,11752,11754,11756],{"class":54,"line":662},[52,11753,121],{"class":58},[52,11755,11681],{"class":62},[52,11757,77],{"class":58},[43,11759,11761],{"className":360,"code":11760,"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,11762,11763,11771,11783,11797,11805,11813,11825],{"__ignoreMap":48},[52,11764,11765,11767,11769],{"class":54,"line":55},[52,11766,59],{"class":58},[52,11768,11681],{"class":62},[52,11770,77],{"class":58},[52,11772,11773,11775,11777,11779,11781],{"class":54,"line":80},[52,11774,83],{"class":58},[52,11776,15],{"class":62},[52,11778,11692],{"class":58},[52,11780,15],{"class":62},[52,11782,77],{"class":58},[52,11784,11785,11787,11789,11791,11793,11795],{"class":54,"line":108},[52,11786,83],{"class":58},[52,11788,63],{"class":371},[52,11790,374],{"class":66},[52,11792,70],{"class":231},[52,11794,11713],{"class":73},[52,11796,77],{"class":58},[52,11798,11799,11801,11803],{"class":54,"line":118},[52,11800,2213],{"class":58},[52,11802,11722],{"class":371},[52,11804,105],{"class":58},[52,11806,11807,11809,11811],{"class":54,"line":594},[52,11808,2230],{"class":58},[52,11810,63],{"class":371},[52,11812,77],{"class":58},[52,11814,11815,11817,11819,11821,11823],{"class":54,"line":600},[52,11816,83],{"class":58},[52,11818,15],{"class":62},[52,11820,11745],{"class":58},[52,11822,15],{"class":62},[52,11824,77],{"class":58},[52,11826,11827,11829,11831],{"class":54,"line":606},[52,11828,121],{"class":58},[52,11830,11681],{"class":62},[52,11832,77],{"class":58},[43,11834,11836],{"className":419,"code":11835,"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,11837,11838,11846,11858,11872,11880,11888,11900],{"__ignoreMap":48},[52,11839,11840,11842,11844],{"class":54,"line":55},[52,11841,59],{"class":58},[52,11843,11681],{"class":62},[52,11845,77],{"class":58},[52,11847,11848,11850,11852,11854,11856],{"class":54,"line":80},[52,11849,83],{"class":58},[52,11851,15],{"class":62},[52,11853,11692],{"class":58},[52,11855,15],{"class":62},[52,11857,77],{"class":58},[52,11859,11860,11862,11864,11866,11868,11870],{"class":54,"line":108},[52,11861,83],{"class":58},[52,11863,63],{"class":371},[52,11865,67],{"class":66},[52,11867,70],{"class":231},[52,11869,11713],{"class":73},[52,11871,77],{"class":58},[52,11873,11874,11876,11878],{"class":54,"line":118},[52,11875,2213],{"class":58},[52,11877,11722],{"class":371},[52,11879,105],{"class":58},[52,11881,11882,11884,11886],{"class":54,"line":594},[52,11883,2230],{"class":58},[52,11885,63],{"class":371},[52,11887,77],{"class":58},[52,11889,11890,11892,11894,11896,11898],{"class":54,"line":600},[52,11891,83],{"class":58},[52,11893,15],{"class":62},[52,11895,11745],{"class":58},[52,11897,15],{"class":62},[52,11899,77],{"class":58},[52,11901,11902,11904,11906],{"class":54,"line":606},[52,11903,121],{"class":58},[52,11905,11681],{"class":62},[52,11907,77],{"class":58},[43,11909,11910],{"className":419,"code":11835,"language":420,"meta":48,"style":48},[31,11911,11912,11920,11932,11946,11954,11962,11974],{"__ignoreMap":48},[52,11913,11914,11916,11918],{"class":54,"line":55},[52,11915,59],{"class":58},[52,11917,11681],{"class":62},[52,11919,77],{"class":58},[52,11921,11922,11924,11926,11928,11930],{"class":54,"line":80},[52,11923,83],{"class":58},[52,11925,15],{"class":62},[52,11927,11692],{"class":58},[52,11929,15],{"class":62},[52,11931,77],{"class":58},[52,11933,11934,11936,11938,11940,11942,11944],{"class":54,"line":108},[52,11935,83],{"class":58},[52,11937,63],{"class":371},[52,11939,67],{"class":66},[52,11941,70],{"class":231},[52,11943,11713],{"class":73},[52,11945,77],{"class":58},[52,11947,11948,11950,11952],{"class":54,"line":118},[52,11949,2213],{"class":58},[52,11951,11722],{"class":371},[52,11953,105],{"class":58},[52,11955,11956,11958,11960],{"class":54,"line":594},[52,11957,2230],{"class":58},[52,11959,63],{"class":371},[52,11961,77],{"class":58},[52,11963,11964,11966,11968,11970,11972],{"class":54,"line":600},[52,11965,83],{"class":58},[52,11967,15],{"class":62},[52,11969,11745],{"class":58},[52,11971,15],{"class":62},[52,11973,77],{"class":58},[52,11975,11976,11978,11980],{"class":54,"line":606},[52,11977,121],{"class":58},[52,11979,11681],{"class":62},[52,11981,77],{"class":58},[23,11983,11985],{"id":11984},"layering-content-over-shaders","Layering content over shaders",[2925,11987,11989],{"id":11988},"pointer-events","Pointer events",[15,11991,11992,11993,11996],{},"Canvases capture all pointer events by default. Add ",[31,11994,11995],{},"pointer-events: none"," when the shader is decorative and you want clicks and hovers to reach content underneath:",[217,11998,11999,12035,12070,12104],{":tabs":219},[43,12000,12002],{"className":45,"code":12001,"language":47,"meta":48,"style":48},"\u003CShader class=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[31,12003,12004,12019,12027],{"__ignoreMap":48},[52,12005,12006,12008,12010,12012,12014,12017],{"class":54,"line":55},[52,12007,59],{"class":58},[52,12009,63],{"class":62},[52,12011,67],{"class":66},[52,12013,70],{"class":58},[52,12015,12016],{"class":73},"\"absolute inset-0 pointer-events-none\"",[52,12018,77],{"class":58},[52,12020,12021,12023,12025],{"class":54,"line":80},[52,12022,83],{"class":58},[52,12024,10336],{"class":62},[52,12026,105],{"class":58},[52,12028,12029,12031,12033],{"class":54,"line":108},[52,12030,121],{"class":58},[52,12032,63],{"class":62},[52,12034,77],{"class":58},[43,12036,12038],{"className":360,"code":12037,"language":362,"meta":48,"style":48},"\u003CShader className=\"absolute inset-0 pointer-events-none\">\n \u003CAurora />\n\u003C/Shader>\n",[31,12039,12040,12054,12062],{"__ignoreMap":48},[52,12041,12042,12044,12046,12048,12050,12052],{"class":54,"line":55},[52,12043,59],{"class":58},[52,12045,63],{"class":371},[52,12047,374],{"class":66},[52,12049,70],{"class":231},[52,12051,12016],{"class":73},[52,12053,77],{"class":58},[52,12055,12056,12058,12060],{"class":54,"line":80},[52,12057,83],{"class":58},[52,12059,10336],{"class":371},[52,12061,105],{"class":58},[52,12063,12064,12066,12068],{"class":54,"line":108},[52,12065,121],{"class":58},[52,12067,63],{"class":371},[52,12069,77],{"class":58},[43,12071,12072],{"className":419,"code":12001,"language":420,"meta":48,"style":48},[31,12073,12074,12088,12096],{"__ignoreMap":48},[52,12075,12076,12078,12080,12082,12084,12086],{"class":54,"line":55},[52,12077,59],{"class":58},[52,12079,63],{"class":371},[52,12081,67],{"class":66},[52,12083,70],{"class":231},[52,12085,12016],{"class":73},[52,12087,77],{"class":58},[52,12089,12090,12092,12094],{"class":54,"line":80},[52,12091,83],{"class":58},[52,12093,10336],{"class":371},[52,12095,105],{"class":58},[52,12097,12098,12100,12102],{"class":54,"line":108},[52,12099,121],{"class":58},[52,12101,63],{"class":371},[52,12103,77],{"class":58},[43,12105,12106],{"className":419,"code":12001,"language":420,"meta":48,"style":48},[31,12107,12108,12122,12130],{"__ignoreMap":48},[52,12109,12110,12112,12114,12116,12118,12120],{"class":54,"line":55},[52,12111,59],{"class":58},[52,12113,63],{"class":371},[52,12115,67],{"class":66},[52,12117,70],{"class":231},[52,12119,12016],{"class":73},[52,12121,77],{"class":58},[52,12123,12124,12126,12128],{"class":54,"line":80},[52,12125,83],{"class":58},[52,12127,10336],{"class":371},[52,12129,105],{"class":58},[52,12131,12132,12134,12136],{"class":54,"line":108},[52,12133,121],{"class":58},[52,12135,63],{"class":371},[52,12137,77],{"class":58},[15,12139,12140,12141,1850,12143,12146,12147,12149],{},"Interactive effects like ",[31,12142,113],{},[31,12144,12145],{},"CursorRipples"," still track global mouse position even with ",[31,12148,11995],{}," — they listen on the window rather than the canvas element.",[2925,12151,12153],{"id":12152},"stacking-context-and-z-index","Stacking context and z-index",[15,12155,12156,12159,12160,12162,12163,1540],{},[31,12157,12158],{},"z-index"," only works on positioned elements. Ensure any content you want above the canvas has ",[31,12161,10740],{}," (or similar) and a higher ",[31,12164,12158],{},[43,12166,12168],{"className":10598,"code":12167,"language":10600,"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,12169,12170,12185,12190,12208,12213,12232],{"__ignoreMap":48},[52,12171,12172,12174,12176,12178,12180,12183],{"class":54,"line":55},[52,12173,59],{"class":58},[52,12175,8286],{"class":62},[52,12177,67],{"class":66},[52,12179,70],{"class":58},[52,12181,12182],{"class":73},"\"relative\"",[52,12184,77],{"class":58},[52,12186,12187],{"class":54,"line":80},[52,12188,12189],{"class":559}," \u003C!-- canvas at z-0 -->\n",[52,12191,12192,12194,12196,12198,12200,12202,12204,12206],{"class":54,"line":108},[52,12193,83],{"class":58},[52,12195,10609],{"class":62},[52,12197,67],{"class":66},[52,12199,70],{"class":58},[52,12201,11134],{"class":73},[52,12203,10626],{"class":58},[52,12205,10609],{"class":62},[52,12207,77],{"class":58},[52,12209,12210],{"class":54,"line":118},[52,12211,12212],{"class":559}," \u003C!-- content above canvas -->\n",[52,12214,12215,12217,12219,12221,12223,12225,12228,12230],{"class":54,"line":594},[52,12216,83],{"class":58},[52,12218,8286],{"class":62},[52,12220,67],{"class":66},[52,12222,70],{"class":58},[52,12224,10364],{"class":73},[52,12226,12227],{"class":58},">I appear above the canvas\u003C/",[52,12229,8286],{"class":62},[52,12231,77],{"class":58},[52,12233,12234,12236,12238],{"class":54,"line":600},[52,12235,121],{"class":58},[52,12237,8286],{"class":62},[52,12239,77],{"class":58},[23,12241,12243],{"id":12242},"responsive-sizing","Responsive sizing",[15,12245,12246],{},"Shaders responds to any CSS-based resize:",[217,12248,12249,12370,12405,12440],{":tabs":219},[43,12250,12252],{"className":45,"code":12251,"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,12253,12254,12259,12274,12282,12290,12294,12299,12314,12322,12330,12334,12339,12354,12362],{"__ignoreMap":48},[52,12255,12256],{"class":54,"line":55},[52,12257,12258],{"class":559},"\u003C!-- Different heights at breakpoints -->\n",[52,12260,12261,12263,12265,12267,12269,12272],{"class":54,"line":80},[52,12262,59],{"class":58},[52,12264,63],{"class":62},[52,12266,67],{"class":66},[52,12268,70],{"class":58},[52,12270,12271],{"class":73},"\"w-full h-48 md:h-72 lg:h-screen\"",[52,12273,77],{"class":58},[52,12275,12276,12278,12280],{"class":54,"line":108},[52,12277,83],{"class":58},[52,12279,86],{"class":62},[52,12281,105],{"class":58},[52,12283,12284,12286,12288],{"class":54,"line":118},[52,12285,121],{"class":58},[52,12287,63],{"class":62},[52,12289,77],{"class":58},[52,12291,12292],{"class":54,"line":594},[52,12293,597],{"emptyLinePlaceholder":171},[52,12295,12296],{"class":54,"line":600},[52,12297,12298],{"class":559},"\u003C!-- Aspect ratio preserving at any width -->\n",[52,12300,12301,12303,12305,12307,12309,12312],{"class":54,"line":606},[52,12302,59],{"class":58},[52,12304,63],{"class":62},[52,12306,67],{"class":66},[52,12308,70],{"class":58},[52,12310,12311],{"class":73},"\"w-full aspect-square md:aspect-video\"",[52,12313,77],{"class":58},[52,12315,12316,12318,12320],{"class":54,"line":653},[52,12317,83],{"class":58},[52,12319,11722],{"class":62},[52,12321,105],{"class":58},[52,12323,12324,12326,12328],{"class":54,"line":662},[52,12325,121],{"class":58},[52,12327,63],{"class":62},[52,12329,77],{"class":58},[52,12331,12332],{"class":54,"line":671},[52,12333,597],{"emptyLinePlaceholder":171},[52,12335,12336],{"class":54,"line":676},[52,12337,12338],{"class":559},"\u003C!-- Dynamic viewport height (mobile-safe) -->\n",[52,12340,12341,12343,12345,12347,12349,12352],{"class":54,"line":682},[52,12342,59],{"class":58},[52,12344,63],{"class":62},[52,12346,67],{"class":66},[52,12348,70],{"class":58},[52,12350,12351],{"class":73},"\"w-full h-[100dvh]\"",[52,12353,77],{"class":58},[52,12355,12356,12358,12360],{"class":54,"line":698},[52,12357,83],{"class":58},[52,12359,10336],{"class":62},[52,12361,105],{"class":58},[52,12363,12364,12366,12368],{"class":54,"line":707},[52,12365,121],{"class":58},[52,12367,63],{"class":62},[52,12369,77],{"class":58},[43,12371,12373],{"className":360,"code":12372,"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,12374,12375,12389,12397],{"__ignoreMap":48},[52,12376,12377,12379,12381,12383,12385,12387],{"class":54,"line":55},[52,12378,59],{"class":58},[52,12380,63],{"class":371},[52,12382,374],{"class":66},[52,12384,70],{"class":231},[52,12386,12271],{"class":73},[52,12388,77],{"class":58},[52,12390,12391,12393,12395],{"class":54,"line":80},[52,12392,83],{"class":58},[52,12394,86],{"class":371},[52,12396,105],{"class":58},[52,12398,12399,12401,12403],{"class":54,"line":108},[52,12400,121],{"class":58},[52,12402,63],{"class":371},[52,12404,77],{"class":58},[43,12406,12408],{"className":419,"code":12407,"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,12409,12410,12424,12432],{"__ignoreMap":48},[52,12411,12412,12414,12416,12418,12420,12422],{"class":54,"line":55},[52,12413,59],{"class":58},[52,12415,63],{"class":371},[52,12417,67],{"class":66},[52,12419,70],{"class":231},[52,12421,12271],{"class":73},[52,12423,77],{"class":58},[52,12425,12426,12428,12430],{"class":54,"line":80},[52,12427,83],{"class":58},[52,12429,86],{"class":371},[52,12431,105],{"class":58},[52,12433,12434,12436,12438],{"class":54,"line":108},[52,12435,121],{"class":58},[52,12437,63],{"class":371},[52,12439,77],{"class":58},[43,12441,12442],{"className":419,"code":12407,"language":420,"meta":48,"style":48},[31,12443,12444,12458,12466],{"__ignoreMap":48},[52,12445,12446,12448,12450,12452,12454,12456],{"class":54,"line":55},[52,12447,59],{"class":58},[52,12449,63],{"class":371},[52,12451,67],{"class":66},[52,12453,70],{"class":231},[52,12455,12271],{"class":73},[52,12457,77],{"class":58},[52,12459,12460,12462,12464],{"class":54,"line":80},[52,12461,83],{"class":58},[52,12463,86],{"class":371},[52,12465,105],{"class":58},[52,12467,12468,12470,12472],{"class":54,"line":108},[52,12469,121],{"class":58},[52,12471,63],{"class":371},[52,12473,77],{"class":58},[23,12475,12477],{"id":12476},"other-css-properties","Other CSS properties",[15,12479,12480],{},"The canvas element is fully styleable with standard CSS:",[217,12482,12483,12604,12639,12674],{":tabs":219},[43,12484,12486],{"className":45,"code":12485,"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,12487,12488,12493,12508,12516,12524,12528,12533,12548,12556,12564,12568,12573,12588,12596],{"__ignoreMap":48},[52,12489,12490],{"class":54,"line":55},[52,12491,12492],{"class":559},"\u003C!-- Rounded with border -->\n",[52,12494,12495,12497,12499,12501,12503,12506],{"class":54,"line":80},[52,12496,59],{"class":58},[52,12498,63],{"class":62},[52,12500,67],{"class":66},[52,12502,70],{"class":58},[52,12504,12505],{"class":73},"\"rounded-2xl border border-white/10 w-full h-48\"",[52,12507,77],{"class":58},[52,12509,12510,12512,12514],{"class":54,"line":108},[52,12511,83],{"class":58},[52,12513,86],{"class":62},[52,12515,105],{"class":58},[52,12517,12518,12520,12522],{"class":54,"line":118},[52,12519,121],{"class":58},[52,12521,63],{"class":62},[52,12523,77],{"class":58},[52,12525,12526],{"class":54,"line":594},[52,12527,597],{"emptyLinePlaceholder":171},[52,12529,12530],{"class":54,"line":600},[52,12531,12532],{"class":559},"\u003C!-- Drop shadow -->\n",[52,12534,12535,12537,12539,12541,12543,12546],{"class":54,"line":606},[52,12536,59],{"class":58},[52,12538,63],{"class":62},[52,12540,67],{"class":66},[52,12542,70],{"class":58},[52,12544,12545],{"class":73},"\"shadow-2xl shadow-indigo-500/30 rounded-xl w-64 h-64\"",[52,12547,77],{"class":58},[52,12549,12550,12552,12554],{"class":54,"line":653},[52,12551,83],{"class":58},[52,12553,10788],{"class":62},[52,12555,105],{"class":58},[52,12557,12558,12560,12562],{"class":54,"line":662},[52,12559,121],{"class":58},[52,12561,63],{"class":62},[52,12563,77],{"class":58},[52,12565,12566],{"class":54,"line":671},[52,12567,597],{"emptyLinePlaceholder":171},[52,12569,12570],{"class":54,"line":676},[52,12571,12572],{"class":559},"\u003C!-- CSS blur (applied after GPU render) -->\n",[52,12574,12575,12577,12579,12581,12583,12586],{"class":54,"line":682},[52,12576,59],{"class":58},[52,12578,63],{"class":62},[52,12580,67],{"class":66},[52,12582,70],{"class":58},[52,12584,12585],{"class":73},"\"blur-sm w-full h-32\"",[52,12587,77],{"class":58},[52,12589,12590,12592,12594],{"class":54,"line":698},[52,12591,83],{"class":58},[52,12593,86],{"class":62},[52,12595,105],{"class":58},[52,12597,12598,12600,12602],{"class":54,"line":707},[52,12599,121],{"class":58},[52,12601,63],{"class":62},[52,12603,77],{"class":58},[43,12605,12607],{"className":360,"code":12606,"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,12608,12609,12623,12631],{"__ignoreMap":48},[52,12610,12611,12613,12615,12617,12619,12621],{"class":54,"line":55},[52,12612,59],{"class":58},[52,12614,63],{"class":371},[52,12616,374],{"class":66},[52,12618,70],{"class":231},[52,12620,12505],{"class":73},[52,12622,77],{"class":58},[52,12624,12625,12627,12629],{"class":54,"line":80},[52,12626,83],{"class":58},[52,12628,86],{"class":371},[52,12630,105],{"class":58},[52,12632,12633,12635,12637],{"class":54,"line":108},[52,12634,121],{"class":58},[52,12636,63],{"class":371},[52,12638,77],{"class":58},[43,12640,12642],{"className":419,"code":12641,"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,12643,12644,12658,12666],{"__ignoreMap":48},[52,12645,12646,12648,12650,12652,12654,12656],{"class":54,"line":55},[52,12647,59],{"class":58},[52,12649,63],{"class":371},[52,12651,67],{"class":66},[52,12653,70],{"class":231},[52,12655,12505],{"class":73},[52,12657,77],{"class":58},[52,12659,12660,12662,12664],{"class":54,"line":80},[52,12661,83],{"class":58},[52,12663,86],{"class":371},[52,12665,105],{"class":58},[52,12667,12668,12670,12672],{"class":54,"line":108},[52,12669,121],{"class":58},[52,12671,63],{"class":371},[52,12673,77],{"class":58},[43,12675,12676],{"className":419,"code":12641,"language":420,"meta":48,"style":48},[31,12677,12678,12692,12700],{"__ignoreMap":48},[52,12679,12680,12682,12684,12686,12688,12690],{"class":54,"line":55},[52,12681,59],{"class":58},[52,12683,63],{"class":371},[52,12685,67],{"class":66},[52,12687,70],{"class":231},[52,12689,12505],{"class":73},[52,12691,77],{"class":58},[52,12693,12694,12696,12698],{"class":54,"line":80},[52,12695,83],{"class":58},[52,12697,86],{"class":371},[52,12699,105],{"class":58},[52,12701,12702,12704,12706],{"class":54,"line":108},[52,12703,121],{"class":58},[52,12705,63],{"class":371},[52,12707,77],{"class":58},[156,12709,12710],{},"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":12712},[12713,12714,12715,12721,12725,12726],{"id":9975,"depth":80,"text":9976},{"id":543,"depth":80,"text":544},{"id":10294,"depth":80,"text":10295,"children":12716},[12717,12718,12719,12720],{"id":10298,"depth":108,"text":10299},{"id":10733,"depth":108,"text":10734},{"id":11095,"depth":108,"text":11096},{"id":11663,"depth":108,"text":11664},{"id":11984,"depth":80,"text":11985,"children":12722},[12723,12724],{"id":11988,"depth":108,"text":11989},{"id":12152,"depth":108,"text":12153},{"id":12242,"depth":80,"text":12243},{"id":12476,"depth":80,"text":12477},"How to size, position, and integrate shaders into your application layout","file-code",{},{"title":1480,"description":12727},"docs/guide/5.layout-positioning","gpx1Xnspd-tdsud5sy0IB3bT3r1zLsaSNi6mliJh3JI",{"id":12734,"title":12735,"body":12736,"category":7949,"description":14786,"exclude":167,"extension":168,"forceFramework":167,"icon":14787,"meta":14788,"navigation":171,"path":14789,"seo":14790,"stem":14791,"__hash__":14792},"guide/docs/guide/6.transforms.md","Transforms",{"type":8,"value":12737,"toc":14778},[12738,12741,12748,12755,12826,12830,12836,13017,13021,13501,13504,13508,13515,13535,13607,13611,13617,13670,13741,13745,13748,14746,14758,14762,14769,14772,14775],[11,12739,12735],{"id":12740},"transforms",[15,12742,12743,12744,12747],{},"Every component accepts a ",[31,12745,12746],{},"transform"," prop that moves, rotates, and scales it in UV space — the coordinate system the shader uses to sample its output.",[15,12749,12750,12751,12754],{},"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,12752,12753],{},"samples its coordinate system",", so the effect itself shifts without touching the DOM.",[43,12756,12758],{"className":45,"code":12757,"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,12759,12760,12765,12785,12789,12794,12802,12818],{"__ignoreMap":48},[52,12761,12762],{"class":54,"line":55},[52,12763,12764],{"class":559},"\u003C!-- CSS transform: moves the DOM element -->\n",[52,12766,12767,12769,12771,12773,12775,12778,12781,12783],{"class":54,"line":80},[52,12768,59],{"class":58},[52,12770,63],{"class":62},[52,12772,67],{"class":66},[52,12774,70],{"class":58},[52,12776,12777],{"class":73},"\"-translate-x-4\"",[52,12779,12780],{"class":58},">...\u003C/",[52,12782,63],{"class":62},[52,12784,77],{"class":58},[52,12786,12787],{"class":54,"line":108},[52,12788,597],{"emptyLinePlaceholder":171},[52,12790,12791],{"class":54,"line":118},[52,12792,12793],{"class":559},"\u003C!-- Shader transform: shifts content within the canvas -->\n",[52,12795,12796,12798,12800],{"class":54,"line":594},[52,12797,59],{"class":58},[52,12799,63],{"class":62},[52,12801,77],{"class":58},[52,12803,12804,12806,12808,12811,12813,12816],{"class":54,"line":600},[52,12805,83],{"class":58},[52,12807,86],{"class":62},[52,12809,12810],{"class":66}," :transform",[52,12812,70],{"class":58},[52,12814,12815],{"class":73},"\"{ offsetX: -0.2 }\"",[52,12817,105],{"class":58},[52,12819,12820,12822,12824],{"class":54,"line":606},[52,12821,121],{"class":58},[52,12823,63],{"class":62},[52,12825,77],{"class":58},[23,12827,12829],{"id":12828},"transform-properties","Transform properties",[15,12831,12832,12833,12835],{},"Pass a partial object to the ",[31,12834,12746],{}," prop — only include what you want to change:",[1780,12837,12838,12853],{},[1783,12839,12840],{},[1786,12841,12842,12845,12848,12851],{},[1789,12843,12844],{},"Prop",[1789,12846,12847],{},"Type",[1789,12849,12850],{},"Default",[1789,12852,1794],{},[1796,12854,12855,12887,12909,12926,12950,12974,12998],{},[1786,12856,12857,12862,12867,12871],{},[1801,12858,12859],{},[31,12860,12861],{},"offsetX",[1801,12863,12864],{},[31,12865,12866],{},"number",[1801,12868,12869],{},[31,12870,6387],{},[1801,12872,12873,12874,1536,12877,12880,12881,12883,12884,12886],{},"Horizontal shift. ",[31,12875,12876],{},"-1",[31,12878,12879],{},"+1",". ",[31,12882,12876],{}," shifts content fully left, ",[31,12885,12879],{}," fully right.",[1786,12888,12889,12894,12898,12902],{},[1801,12890,12891],{},[31,12892,12893],{},"offsetY",[1801,12895,12896],{},[31,12897,12866],{},[1801,12899,12900],{},[31,12901,6387],{},[1801,12903,12904,12905,1536,12907,7204],{},"Vertical shift. ",[31,12906,12876],{},[31,12908,12879],{},[1786,12910,12911,12915,12919,12923],{},[1801,12912,12913],{},[31,12914,9552],{},[1801,12916,12917],{},[31,12918,12866],{},[1801,12920,12921],{},[31,12922,6387],{},[1801,12924,12925],{},"Rotation in degrees. Positive = clockwise.",[1786,12927,12928,12933,12937,12941],{},[1801,12929,12930],{},[31,12931,12932],{},"scale",[1801,12934,12935],{},[31,12936,12866],{},[1801,12938,12939],{},[31,12940,6391],{},[1801,12942,12943,12944,12946,12947,12949],{},"Scale multiplier. ",[31,12945,5467],{}," = half size, ",[31,12948,4927],{}," = double.",[1786,12951,12952,12957,12961,12965],{},[1801,12953,12954],{},[31,12955,12956],{},"anchorX",[1801,12958,12959],{},[31,12960,12866],{},[1801,12962,12963],{},[31,12964,5467],{},[1801,12966,12967,12968,12970,12971,12973],{},"Horizontal pivot point for rotation and scale. ",[31,12969,6387],{}," = left, ",[31,12972,6391],{}," = right.",[1786,12975,12976,12981,12985,12989],{},[1801,12977,12978],{},[31,12979,12980],{},"anchorY",[1801,12982,12983],{},[31,12984,12866],{},[1801,12986,12987],{},[31,12988,5467],{},[1801,12990,12991,12992,12994,12995,12997],{},"Vertical pivot point. ",[31,12993,6387],{}," = top, ",[31,12996,6391],{}," = bottom.",[1786,12999,13000,13005,13009,13014],{},[1801,13001,13002],{},[31,13003,13004],{},"edges",[1801,13006,13007],{},[31,13008,6775],{},[1801,13010,13011],{},[31,13012,13013],{},"'transparent'",[1801,13015,13016],{},"What to show when the transform pushes content out of bounds. See below.",[23,13018,13020],{"id":13019},"basic-usage","Basic usage",[217,13022,13023,13118,13218,13307,13395],{":tabs":1543},[43,13024,13026],{"className":45,"code":13025,"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,13027,13028,13042,13047,13062,13066,13071,13086,13090,13095,13110],{"__ignoreMap":48},[52,13029,13030,13032,13034,13036,13038,13040],{"class":54,"line":55},[52,13031,59],{"class":58},[52,13033,63],{"class":62},[52,13035,67],{"class":66},[52,13037,70],{"class":58},[52,13039,319],{"class":73},[52,13041,77],{"class":58},[52,13043,13044],{"class":54,"line":80},[52,13045,13046],{"class":559}," \u003C!-- Rotate 45 degrees -->\n",[52,13048,13049,13051,13053,13055,13057,13060],{"class":54,"line":108},[52,13050,83],{"class":58},[52,13052,86],{"class":62},[52,13054,12810],{"class":66},[52,13056,70],{"class":58},[52,13058,13059],{"class":73},"\"{ rotation: 45 }\"",[52,13061,105],{"class":58},[52,13063,13064],{"class":54,"line":118},[52,13065,597],{"emptyLinePlaceholder":171},[52,13067,13068],{"class":54,"line":594},[52,13069,13070],{"class":559}," \u003C!-- Scale up and shift right -->\n",[52,13072,13073,13075,13077,13079,13081,13084],{"class":54,"line":600},[52,13074,83],{"class":58},[52,13076,2216],{"class":62},[52,13078,12810],{"class":66},[52,13080,70],{"class":58},[52,13082,13083],{"class":73},"\"{ scale: 1.5, offsetX: 0.2 }\"",[52,13085,105],{"class":58},[52,13087,13088],{"class":54,"line":606},[52,13089,597],{"emptyLinePlaceholder":171},[52,13091,13092],{"class":54,"line":653},[52,13093,13094],{"class":559}," \u003C!-- Multiple transforms together -->\n",[52,13096,13097,13099,13101,13103,13105,13108],{"class":54,"line":662},[52,13098,83],{"class":58},[52,13100,11722],{"class":62},[52,13102,12810],{"class":66},[52,13104,70],{"class":58},[52,13106,13107],{"class":73},"\"{ rotation: 30, scale: 0.8, offsetY: -0.1 }\"",[52,13109,105],{"class":58},[52,13111,13112,13114,13116],{"class":54,"line":671},[52,13113,121],{"class":58},[52,13115,63],{"class":62},[52,13117,77],{"class":58},[43,13119,13121],{"className":360,"code":13120,"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,13122,13123,13137,13156,13180,13210],{"__ignoreMap":48},[52,13124,13125,13127,13129,13131,13133,13135],{"class":54,"line":55},[52,13126,59],{"class":58},[52,13128,63],{"class":371},[52,13130,374],{"class":66},[52,13132,70],{"class":231},[52,13134,319],{"class":73},[52,13136,77],{"class":58},[52,13138,13139,13141,13143,13146,13148,13151,13153],{"class":54,"line":80},[52,13140,83],{"class":58},[52,13142,86],{"class":371},[52,13144,13145],{"class":66}," transform",[52,13147,70],{"class":231},[52,13149,13150],{"class":58},"{{ rotation: ",[52,13152,1206],{"class":371},[52,13154,13155],{"class":58}," }} />\n",[52,13157,13158,13160,13162,13164,13166,13169,13172,13175,13178],{"class":54,"line":108},[52,13159,83],{"class":58},[52,13161,2216],{"class":371},[52,13163,13145],{"class":66},[52,13165,70],{"class":231},[52,13167,13168],{"class":58},"{{ scale: ",[52,13170,13171],{"class":371},"1.5",[52,13173,13174],{"class":58},", offsetX: ",[52,13176,13177],{"class":371},"0.2",[52,13179,13155],{"class":58},[52,13181,13182,13184,13186,13188,13190,13192,13195,13198,13200,13203,13205,13208],{"class":54,"line":118},[52,13183,83],{"class":58},[52,13185,11722],{"class":371},[52,13187,13145],{"class":66},[52,13189,70],{"class":231},[52,13191,13150],{"class":58},[52,13193,13194],{"class":371},"30",[52,13196,13197],{"class":58},", scale: ",[52,13199,4011],{"class":371},[52,13201,13202],{"class":58},", offsetY: ",[52,13204,8591],{"class":231},[52,13206,13207],{"class":371},"0.1",[52,13209,13155],{"class":58},[52,13211,13212,13214,13216],{"class":54,"line":594},[52,13213,121],{"class":58},[52,13215,63],{"class":371},[52,13217,77],{"class":58},[43,13219,13221],{"className":419,"code":13220,"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,13222,13223,13237,13253,13273,13299],{"__ignoreMap":48},[52,13224,13225,13227,13229,13231,13233,13235],{"class":54,"line":55},[52,13226,59],{"class":58},[52,13228,63],{"class":371},[52,13230,67],{"class":66},[52,13232,70],{"class":231},[52,13234,319],{"class":73},[52,13236,77],{"class":58},[52,13238,13239,13241,13243,13245,13247,13249,13251],{"class":54,"line":80},[52,13240,83],{"class":58},[52,13242,86],{"class":371},[52,13244,13145],{"class":66},[52,13246,70],{"class":231},[52,13248,13150],{"class":58},[52,13250,1206],{"class":371},[52,13252,13155],{"class":58},[52,13254,13255,13257,13259,13261,13263,13265,13267,13269,13271],{"class":54,"line":108},[52,13256,83],{"class":58},[52,13258,2216],{"class":371},[52,13260,13145],{"class":66},[52,13262,70],{"class":231},[52,13264,13168],{"class":58},[52,13266,13171],{"class":371},[52,13268,13174],{"class":58},[52,13270,13177],{"class":371},[52,13272,13155],{"class":58},[52,13274,13275,13277,13279,13281,13283,13285,13287,13289,13291,13293,13295,13297],{"class":54,"line":118},[52,13276,83],{"class":58},[52,13278,11722],{"class":371},[52,13280,13145],{"class":66},[52,13282,70],{"class":231},[52,13284,13150],{"class":58},[52,13286,13194],{"class":371},[52,13288,13197],{"class":58},[52,13290,4011],{"class":371},[52,13292,13202],{"class":58},[52,13294,8591],{"class":231},[52,13296,13207],{"class":371},[52,13298,13155],{"class":58},[52,13300,13301,13303,13305],{"class":54,"line":594},[52,13302,121],{"class":58},[52,13304,63],{"class":371},[52,13306,77],{"class":58},[43,13308,13309],{"className":419,"code":13220,"language":420,"meta":48,"style":48},[31,13310,13311,13325,13341,13361,13387],{"__ignoreMap":48},[52,13312,13313,13315,13317,13319,13321,13323],{"class":54,"line":55},[52,13314,59],{"class":58},[52,13316,63],{"class":371},[52,13318,67],{"class":66},[52,13320,70],{"class":231},[52,13322,319],{"class":73},[52,13324,77],{"class":58},[52,13326,13327,13329,13331,13333,13335,13337,13339],{"class":54,"line":80},[52,13328,83],{"class":58},[52,13330,86],{"class":371},[52,13332,13145],{"class":66},[52,13334,70],{"class":231},[52,13336,13150],{"class":58},[52,13338,1206],{"class":371},[52,13340,13155],{"class":58},[52,13342,13343,13345,13347,13349,13351,13353,13355,13357,13359],{"class":54,"line":108},[52,13344,83],{"class":58},[52,13346,2216],{"class":371},[52,13348,13145],{"class":66},[52,13350,70],{"class":231},[52,13352,13168],{"class":58},[52,13354,13171],{"class":371},[52,13356,13174],{"class":58},[52,13358,13177],{"class":371},[52,13360,13155],{"class":58},[52,13362,13363,13365,13367,13369,13371,13373,13375,13377,13379,13381,13383,13385],{"class":54,"line":118},[52,13364,83],{"class":58},[52,13366,11722],{"class":371},[52,13368,13145],{"class":66},[52,13370,70],{"class":231},[52,13372,13150],{"class":58},[52,13374,13194],{"class":371},[52,13376,13197],{"class":58},[52,13378,4011],{"class":371},[52,13380,13202],{"class":58},[52,13382,8591],{"class":231},[52,13384,13207],{"class":371},[52,13386,13155],{"class":58},[52,13388,13389,13391,13393],{"class":54,"line":594},[52,13390,121],{"class":58},[52,13392,63],{"class":371},[52,13394,77],{"class":58},[43,13396,13398],{"className":222,"code":13397,"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,13399,13400,13414,13418,13423,13432,13437,13447,13451,13456,13460,13468,13472,13485,13489,13493,13497],{"__ignoreMap":48},[52,13401,13402,13404,13406,13408,13410,13412],{"class":54,"line":55},[52,13403,1721],{"class":231},[52,13405,1724],{"class":371},[52,13407,1727],{"class":231},[52,13409,1730],{"class":231},[52,13411,1733],{"class":66},[52,13413,1736],{"class":58},[52,13415,13416],{"class":54,"line":80},[52,13417,1751],{"class":58},[52,13419,13420],{"class":54,"line":108},[52,13421,13422],{"class":58}," {\n",[52,13424,13425,13428,13430],{"class":54,"line":118},[52,13426,13427],{"class":58}," type: ",[52,13429,2126],{"class":73},[52,13431,1746],{"class":58},[52,13433,13434],{"class":54,"line":594},[52,13435,13436],{"class":58}," props: {\n",[52,13438,13439,13442,13444],{"class":54,"line":600},[52,13440,13441],{"class":58}," transform: { rotation: ",[52,13443,1206],{"class":371},[52,13445,13446],{"class":58}," }\n",[52,13448,13449],{"class":54,"line":606},[52,13450,3333],{"class":58},[52,13452,13453],{"class":54,"line":653},[52,13454,13455],{"class":58}," },\n",[52,13457,13458],{"class":54,"line":662},[52,13459,13422],{"class":58},[52,13461,13462,13464,13466],{"class":54,"line":671},[52,13463,13427],{"class":58},[52,13465,2869],{"class":73},[52,13467,1746],{"class":58},[52,13469,13470],{"class":54,"line":676},[52,13471,13436],{"class":58},[52,13473,13474,13477,13479,13481,13483],{"class":54,"line":682},[52,13475,13476],{"class":58}," transform: { scale: ",[52,13478,13171],{"class":371},[52,13480,13174],{"class":58},[52,13482,13177],{"class":371},[52,13484,13446],{"class":58},[52,13486,13487],{"class":54,"line":698},[52,13488,3333],{"class":58},[52,13490,13491],{"class":54,"line":707},[52,13492,3106],{"class":58},[52,13494,13495],{"class":54,"line":2327},[52,13496,1773],{"class":58},[52,13498,13499],{"class":54,"line":7369},[52,13500,1778],{"class":58},[15,13502,13503],{},"You only need to include the properties you want to change — unspecified values stay at their defaults.",[23,13505,13507],{"id":13506},"anchor-point","Anchor point",[15,13509,13510,13511,13514],{},"The anchor point controls where rotation and scale are applied from. The default ",[31,13512,13513],{},"0.5, 0.5"," anchors to the center of the canvas.",[1465,13516,13517,13523,13529],{},[1468,13518,13519,13522],{},[31,13520,13521],{},"{ anchorX: 0, anchorY: 0 }"," — top-left corner",[1468,13524,13525,13528],{},[31,13526,13527],{},"{ anchorX: 0.5, anchorY: 0.5 }"," — center (default)",[1468,13530,13531,13534],{},[31,13532,13533],{},"{ anchorX: 1, anchorY: 1 }"," — bottom-right corner",[43,13536,13538],{"className":45,"code":13537,"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,13539,13540,13545,13559,13563,13568,13583,13587,13592],{"__ignoreMap":48},[52,13541,13542],{"class":54,"line":55},[52,13543,13544],{"class":559},"\u003C!-- Rotates around the center (default) -->\n",[52,13546,13547,13549,13551,13553,13555,13557],{"class":54,"line":80},[52,13548,59],{"class":58},[52,13550,2216],{"class":62},[52,13552,12810],{"class":66},[52,13554,70],{"class":58},[52,13556,13059],{"class":73},[52,13558,105],{"class":58},[52,13560,13561],{"class":54,"line":108},[52,13562,597],{"emptyLinePlaceholder":171},[52,13564,13565],{"class":54,"line":118},[52,13566,13567],{"class":559},"\u003C!-- Rotates around the top-left corner -->\n",[52,13569,13570,13572,13574,13576,13578,13581],{"class":54,"line":594},[52,13571,59],{"class":58},[52,13573,2216],{"class":62},[52,13575,12810],{"class":66},[52,13577,70],{"class":58},[52,13579,13580],{"class":73},"\"{ rotation: 45, anchorX: 0, anchorY: 0 }\"",[52,13582,105],{"class":58},[52,13584,13585],{"class":54,"line":600},[52,13586,597],{"emptyLinePlaceholder":171},[52,13588,13589],{"class":54,"line":606},[52,13590,13591],{"class":559},"\u003C!-- Scales from the top edge -->\n",[52,13593,13594,13596,13598,13600,13602,13605],{"class":54,"line":653},[52,13595,59],{"class":58},[52,13597,86],{"class":62},[52,13599,12810],{"class":66},[52,13601,70],{"class":58},[52,13603,13604],{"class":73},"\"{ scale: 2, anchorY: 0 }\"",[52,13606,105],{"class":58},[23,13608,13610],{"id":13609},"edge-modes","Edge modes",[15,13612,13613,13614,13616],{},"When a transform shifts or scales content beyond the canvas boundaries, the ",[31,13615,13004],{}," property controls what fills the out-of-bounds area:",[1780,13618,13619,13628],{},[1783,13620,13621],{},[1786,13622,13623,13625],{},[1789,13624,1791],{},[1789,13626,13627],{},"Behavior",[1796,13629,13630,13640,13650,13660],{},[1786,13631,13632,13637],{},[1801,13633,13634],{},[31,13635,13636],{},"transparent",[1801,13638,13639],{},"Out-of-bounds pixels are fully transparent (default)",[1786,13641,13642,13647],{},[1801,13643,13644],{},[31,13645,13646],{},"stretch",[1801,13648,13649],{},"The edge pixels repeat to fill",[1786,13651,13652,13657],{},[1801,13653,13654],{},[31,13655,13656],{},"mirror",[1801,13658,13659],{},"Content reflects at the edges like a mirror",[1786,13661,13662,13667],{},[1801,13663,13664],{},[31,13665,13666],{},"wrap",[1801,13668,13669],{},"Content tiles seamlessly",[43,13671,13673],{"className":45,"code":13672,"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,13674,13675,13689,13694,13709,13713,13718,13733],{"__ignoreMap":48},[52,13676,13677,13679,13681,13683,13685,13687],{"class":54,"line":55},[52,13678,59],{"class":58},[52,13680,63],{"class":62},[52,13682,67],{"class":66},[52,13684,70],{"class":58},[52,13686,319],{"class":73},[52,13688,77],{"class":58},[52,13690,13691],{"class":54,"line":80},[52,13692,13693],{"class":559}," \u003C!-- Offset with wrapping — tiles the effect -->\n",[52,13695,13696,13698,13700,13702,13704,13707],{"class":54,"line":108},[52,13697,83],{"class":58},[52,13699,86],{"class":62},[52,13701,12810],{"class":66},[52,13703,70],{"class":58},[52,13705,13706],{"class":73},"\"{ offsetX: 0.3, edges: 'wrap' }\"",[52,13708,105],{"class":58},[52,13710,13711],{"class":54,"line":118},[52,13712,597],{"emptyLinePlaceholder":171},[52,13714,13715],{"class":54,"line":594},[52,13716,13717],{"class":559}," \u003C!-- Offset with mirror — reflects the edge -->\n",[52,13719,13720,13722,13724,13726,13728,13731],{"class":54,"line":600},[52,13721,83],{"class":58},[52,13723,11722],{"class":62},[52,13725,12810],{"class":66},[52,13727,70],{"class":58},[52,13729,13730],{"class":73},"\"{ offsetX: 0.3, edges: 'mirror' }\"",[52,13732,105],{"class":58},[52,13734,13735,13737,13739],{"class":54,"line":606},[52,13736,121],{"class":58},[52,13738,63],{"class":62},[52,13740,77],{"class":58},[23,13742,13744],{"id":13743},"animating-transforms","Animating transforms",[15,13746,13747],{},"Transforms are reactive props — you can bind them to state and animate them:",[217,13749,13750,13975,14204,14365,14579],{":tabs":1543},[43,13751,13753],{"className":45,"code":13752,"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,13754,13755,13765,13776,13780,13797,13805,13809,13821,13836,13859,13872,13876,13887,13891,13895,13910,13918,13922,13930,13944,13959,13967],{"__ignoreMap":48},[52,13756,13757,13759,13761,13763],{"class":54,"line":55},[52,13758,59],{"class":58},[52,13760,2253],{"class":62},[52,13762,2256],{"class":66},[52,13764,77],{"class":58},[52,13766,13767,13769,13772,13774],{"class":54,"line":80},[52,13768,232],{"class":231},[52,13770,13771],{"class":58}," { ref, onMounted, onUnmounted } ",[52,13773,238],{"class":231},[52,13775,2270],{"class":73},[52,13777,13778],{"class":54,"line":108},[52,13779,597],{"emptyLinePlaceholder":171},[52,13781,13782,13784,13787,13789,13791,13793,13795],{"class":54,"line":118},[52,13783,1721],{"class":231},[52,13785,13786],{"class":371}," rotation",[52,13788,1727],{"class":231},[52,13790,2286],{"class":66},[52,13792,2289],{"class":58},[52,13794,6387],{"class":371},[52,13796,2295],{"class":58},[52,13798,13799,13802],{"class":54,"line":594},[52,13800,13801],{"class":231},"let",[52,13803,13804],{"class":58}," animFrame\n",[52,13806,13807],{"class":54,"line":600},[52,13808,597],{"emptyLinePlaceholder":171},[52,13810,13811,13814,13817,13819],{"class":54,"line":606},[52,13812,13813],{"class":66},"onMounted",[52,13815,13816],{"class":58},"(() ",[52,13818,2425],{"class":231},[52,13820,2904],{"class":58},[52,13822,13823,13825,13827,13829,13832,13834],{"class":54,"line":653},[52,13824,2368],{"class":231},[52,13826,9676],{"class":66},[52,13828,1727],{"class":231},[52,13830,13831],{"class":58}," () ",[52,13833,2425],{"class":231},[52,13835,2904],{"class":58},[52,13837,13838,13841,13843,13846,13848,13851,13853,13856],{"class":54,"line":662},[52,13839,13840],{"class":58}," rotation.value ",[52,13842,70],{"class":231},[52,13844,13845],{"class":58}," (rotation.value ",[52,13847,8554],{"class":231},[52,13849,13850],{"class":371}," 0.5",[52,13852,9717],{"class":58},[52,13854,13855],{"class":231},"%",[52,13857,13858],{"class":371}," 360\n",[52,13860,13861,13864,13866,13869],{"class":54,"line":671},[52,13862,13863],{"class":58}," animFrame ",[52,13865,70],{"class":231},[52,13867,13868],{"class":66}," requestAnimationFrame",[52,13870,13871],{"class":58},"(animate)\n",[52,13873,13874],{"class":54,"line":676},[52,13875,2919],{"class":58},[52,13877,13878,13881,13883,13885],{"class":54,"line":682},[52,13879,13880],{"class":58}," animFrame ",[52,13882,70],{"class":231},[52,13884,13868],{"class":66},[52,13886,13871],{"class":58},[52,13888,13889],{"class":54,"line":698},[52,13890,1778],{"class":58},[52,13892,13893],{"class":54,"line":707},[52,13894,597],{"emptyLinePlaceholder":171},[52,13896,13897,13900,13902,13904,13907],{"class":54,"line":2327},[52,13898,13899],{"class":66},"onUnmounted",[52,13901,13816],{"class":58},[52,13903,2425],{"class":231},[52,13905,13906],{"class":66}," cancelAnimationFrame",[52,13908,13909],{"class":58},"(animFrame))\n",[52,13911,13912,13914,13916],{"class":54,"line":7369},[52,13913,121],{"class":58},[52,13915,2253],{"class":62},[52,13917,77],{"class":58},[52,13919,13920],{"class":54,"line":7379},[52,13921,597],{"emptyLinePlaceholder":171},[52,13923,13924,13926,13928],{"class":54,"line":7390},[52,13925,59],{"class":58},[52,13927,2182],{"class":62},[52,13929,77],{"class":58},[52,13931,13932,13934,13936,13938,13940,13942],{"class":54,"line":7395},[52,13933,83],{"class":58},[52,13935,63],{"class":62},[52,13937,67],{"class":66},[52,13939,70],{"class":58},[52,13941,319],{"class":73},[52,13943,77],{"class":58},[52,13945,13946,13948,13950,13952,13954,13957],{"class":54,"line":8717},[52,13947,2213],{"class":58},[52,13949,86],{"class":62},[52,13951,12810],{"class":66},[52,13953,70],{"class":58},[52,13955,13956],{"class":73},"\"{ rotation }\"",[52,13958,105],{"class":58},[52,13960,13961,13963,13965],{"class":54,"line":8722},[52,13962,2230],{"class":58},[52,13964,63],{"class":62},[52,13966,77],{"class":58},[52,13968,13969,13971,13973],{"class":54,"line":9794},[52,13970,121],{"class":58},[52,13972,2182],{"class":62},[52,13974,77],{"class":58},[43,13976,13978],{"className":360,"code":13977,"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,13979,13980,13991,13995,14004,14029,14048,14052,14063,14078,14106,14117,14121,14132,14146,14151,14155,14161,14175,14188,14196,14200],{"__ignoreMap":48},[52,13981,13982,13984,13987,13989],{"class":54,"line":55},[52,13983,232],{"class":231},[52,13985,13986],{"class":58}," { useState, useEffect, useRef } ",[52,13988,238],{"class":231},[52,13990,2350],{"class":73},[52,13992,13993],{"class":54,"line":80},[52,13994,597],{"emptyLinePlaceholder":171},[52,13996,13997,13999,14002],{"class":54,"line":108},[52,13998,2304],{"class":231},[52,14000,14001],{"class":66}," SpinningGradient",[52,14003,2310],{"class":58},[52,14005,14006,14008,14010,14012,14014,14017,14019,14021,14023,14025,14027],{"class":54,"line":118},[52,14007,2368],{"class":231},[52,14009,2371],{"class":58},[52,14011,9552],{"class":371},[52,14013,1881],{"class":58},[52,14015,14016],{"class":371},"setRotation",[52,14018,2382],{"class":58},[52,14020,70],{"class":231},[52,14022,2387],{"class":66},[52,14024,2289],{"class":58},[52,14026,6387],{"class":371},[52,14028,2295],{"class":58},[52,14030,14031,14033,14036,14038,14041,14043,14046],{"class":54,"line":594},[52,14032,2368],{"class":231},[52,14034,14035],{"class":371}," frameRef",[52,14037,1727],{"class":231},[52,14039,14040],{"class":66}," useRef",[52,14042,2289],{"class":58},[52,14044,14045],{"class":371},"null",[52,14047,2295],{"class":58},[52,14049,14050],{"class":54,"line":600},[52,14051,597],{"emptyLinePlaceholder":171},[52,14053,14054,14057,14059,14061],{"class":54,"line":606},[52,14055,14056],{"class":66}," useEffect",[52,14058,13816],{"class":58},[52,14060,2425],{"class":231},[52,14062,2904],{"class":58},[52,14064,14065,14068,14070,14072,14074,14076],{"class":54,"line":653},[52,14066,14067],{"class":231}," const",[52,14069,9676],{"class":66},[52,14071,1727],{"class":231},[52,14073,13831],{"class":58},[52,14075,2425],{"class":231},[52,14077,2904],{"class":58},[52,14079,14080,14083,14085,14088,14090,14093,14095,14097,14099,14101,14104],{"class":54,"line":662},[52,14081,14082],{"class":66}," setRotation",[52,14084,2289],{"class":58},[52,14086,14087],{"class":8545},"r",[52,14089,8548],{"class":231},[52,14091,14092],{"class":58}," (r ",[52,14094,8554],{"class":231},[52,14096,13850],{"class":371},[52,14098,9717],{"class":58},[52,14100,13855],{"class":231},[52,14102,14103],{"class":371}," 360",[52,14105,2295],{"class":58},[52,14107,14108,14111,14113,14115],{"class":54,"line":671},[52,14109,14110],{"class":58}," frameRef.current ",[52,14112,70],{"class":231},[52,14114,13868],{"class":66},[52,14116,13871],{"class":58},[52,14118,14119],{"class":54,"line":676},[52,14120,3106],{"class":58},[52,14122,14123,14126,14128,14130],{"class":54,"line":682},[52,14124,14125],{"class":58}," frameRef.current ",[52,14127,70],{"class":231},[52,14129,13868],{"class":66},[52,14131,13871],{"class":58},[52,14133,14134,14137,14139,14141,14143],{"class":54,"line":698},[52,14135,14136],{"class":231}," return",[52,14138,13831],{"class":58},[52,14140,2425],{"class":231},[52,14142,13906],{"class":66},[52,14144,14145],{"class":58},"(frameRef.current)\n",[52,14147,14148],{"class":54,"line":707},[52,14149,14150],{"class":58}," }, [])\n",[52,14152,14153],{"class":54,"line":2327},[52,14154,597],{"emptyLinePlaceholder":171},[52,14156,14157,14159],{"class":54,"line":7369},[52,14158,2402],{"class":231},[52,14160,2405],{"class":58},[52,14162,14163,14165,14167,14169,14171,14173],{"class":54,"line":7379},[52,14164,2213],{"class":58},[52,14166,63],{"class":371},[52,14168,374],{"class":66},[52,14170,70],{"class":231},[52,14172,319],{"class":73},[52,14174,77],{"class":58},[52,14176,14177,14179,14181,14183,14185],{"class":54,"line":7390},[52,14178,2476],{"class":58},[52,14180,86],{"class":371},[52,14182,13145],{"class":66},[52,14184,70],{"class":231},[52,14186,14187],{"class":58},"{{ rotation }} />\n",[52,14189,14190,14192,14194],{"class":54,"line":7395},[52,14191,2491],{"class":58},[52,14193,63],{"class":371},[52,14195,77],{"class":58},[52,14197,14198],{"class":54,"line":8717},[52,14199,2500],{"class":58},[52,14201,14202],{"class":54,"line":8722},[52,14203,729],{"class":58},[43,14205,14207],{"className":419,"code":14206,"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,14208,14209,14217,14222,14226,14231,14236,14240,14245,14261,14281,14292,14296,14306,14310,14314,14319,14327,14331,14345,14357],{"__ignoreMap":48},[52,14210,14211,14213,14215],{"class":54,"line":55},[52,14212,59],{"class":58},[52,14214,2253],{"class":62},[52,14216,77],{"class":58},[52,14218,14219],{"class":54,"line":80},[52,14220,14221],{"class":58}," import { onMount, onDestroy } from 'svelte'\n",[52,14223,14224],{"class":54,"line":108},[52,14225,597],{"emptyLinePlaceholder":171},[52,14227,14228],{"class":54,"line":118},[52,14229,14230],{"class":58}," let rotation = 0\n",[52,14232,14233],{"class":54,"line":594},[52,14234,14235],{"class":58}," let animFrame\n",[52,14237,14238],{"class":54,"line":600},[52,14239,597],{"emptyLinePlaceholder":171},[52,14241,14242],{"class":54,"line":606},[52,14243,14244],{"class":58}," onMount(() => {\n",[52,14246,14247,14250,14253,14255,14257,14259],{"class":54,"line":653},[52,14248,14249],{"class":58}," const ",[52,14251,14252],{"class":66},"animate",[52,14254,1727],{"class":231},[52,14256,13831],{"class":58},[52,14258,2425],{"class":231},[52,14260,2904],{"class":58},[52,14262,14263,14266,14268,14271,14273,14275,14277,14279],{"class":54,"line":662},[52,14264,14265],{"class":58}," rotation ",[52,14267,70],{"class":231},[52,14269,14270],{"class":58}," (rotation ",[52,14272,8554],{"class":231},[52,14274,13850],{"class":371},[52,14276,9717],{"class":58},[52,14278,13855],{"class":231},[52,14280,13858],{"class":371},[52,14282,14283,14286,14288,14290],{"class":54,"line":671},[52,14284,14285],{"class":58}," animFrame ",[52,14287,70],{"class":231},[52,14289,13868],{"class":66},[52,14291,13871],{"class":58},[52,14293,14294],{"class":54,"line":676},[52,14295,3106],{"class":58},[52,14297,14298,14300,14302,14304],{"class":54,"line":682},[52,14299,13863],{"class":58},[52,14301,70],{"class":231},[52,14303,13868],{"class":66},[52,14305,13871],{"class":58},[52,14307,14308],{"class":54,"line":698},[52,14309,10722],{"class":58},[52,14311,14312],{"class":54,"line":707},[52,14313,597],{"emptyLinePlaceholder":171},[52,14315,14316],{"class":54,"line":2327},[52,14317,14318],{"class":58}," onDestroy(() => cancelAnimationFrame(animFrame))\n",[52,14320,14321,14323,14325],{"class":54,"line":7369},[52,14322,121],{"class":58},[52,14324,2253],{"class":62},[52,14326,77],{"class":58},[52,14328,14329],{"class":54,"line":7379},[52,14330,597],{"emptyLinePlaceholder":171},[52,14332,14333,14335,14337,14339,14341,14343],{"class":54,"line":7390},[52,14334,59],{"class":58},[52,14336,63],{"class":371},[52,14338,67],{"class":66},[52,14340,70],{"class":231},[52,14342,319],{"class":73},[52,14344,77],{"class":58},[52,14346,14347,14349,14351,14353,14355],{"class":54,"line":7395},[52,14348,83],{"class":58},[52,14350,86],{"class":371},[52,14352,13145],{"class":66},[52,14354,70],{"class":231},[52,14356,14187],{"class":58},[52,14358,14359,14361,14363],{"class":54,"line":8717},[52,14360,121],{"class":58},[52,14362,63],{"class":371},[52,14364,77],{"class":58},[43,14366,14368],{"className":419,"code":14367,"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,14369,14370,14381,14385,14393,14417,14421,14432,14440,14454,14478,14489,14493,14504,14518,14522,14526,14532,14546,14563,14571,14575],{"__ignoreMap":48},[52,14371,14372,14374,14377,14379],{"class":54,"line":55},[52,14373,232],{"class":231},[52,14375,14376],{"class":58}," { createSignal, onMount, onCleanup } ",[52,14378,238],{"class":231},[52,14380,2650],{"class":73},[52,14382,14383],{"class":54,"line":80},[52,14384,597],{"emptyLinePlaceholder":171},[52,14386,14387,14389,14391],{"class":54,"line":108},[52,14388,2304],{"class":231},[52,14390,14001],{"class":66},[52,14392,2310],{"class":58},[52,14394,14395,14397,14399,14401,14403,14405,14407,14409,14411,14413,14415],{"class":54,"line":118},[52,14396,2368],{"class":231},[52,14398,2371],{"class":58},[52,14400,9552],{"class":371},[52,14402,1881],{"class":58},[52,14404,14016],{"class":371},[52,14406,2382],{"class":58},[52,14408,70],{"class":231},[52,14410,2681],{"class":66},[52,14412,2289],{"class":58},[52,14414,6387],{"class":371},[52,14416,2295],{"class":58},[52,14418,14419],{"class":54,"line":594},[52,14420,597],{"emptyLinePlaceholder":171},[52,14422,14423,14426,14428,14430],{"class":54,"line":600},[52,14424,14425],{"class":66}," onMount",[52,14427,13816],{"class":58},[52,14429,2425],{"class":231},[52,14431,2904],{"class":58},[52,14433,14434,14437],{"class":54,"line":606},[52,14435,14436],{"class":231}," let",[52,14438,14439],{"class":58}," frame\n",[52,14441,14442,14444,14446,14448,14450,14452],{"class":54,"line":653},[52,14443,14067],{"class":231},[52,14445,9676],{"class":66},[52,14447,1727],{"class":231},[52,14449,13831],{"class":58},[52,14451,2425],{"class":231},[52,14453,2904],{"class":58},[52,14455,14456,14458,14460,14462,14464,14466,14468,14470,14472,14474,14476],{"class":54,"line":662},[52,14457,14082],{"class":66},[52,14459,2289],{"class":58},[52,14461,14087],{"class":8545},[52,14463,8548],{"class":231},[52,14465,14092],{"class":58},[52,14467,8554],{"class":231},[52,14469,13850],{"class":371},[52,14471,9717],{"class":58},[52,14473,13855],{"class":231},[52,14475,14103],{"class":371},[52,14477,2295],{"class":58},[52,14479,14480,14483,14485,14487],{"class":54,"line":671},[52,14481,14482],{"class":58}," frame ",[52,14484,70],{"class":231},[52,14486,13868],{"class":66},[52,14488,13871],{"class":58},[52,14490,14491],{"class":54,"line":676},[52,14492,3106],{"class":58},[52,14494,14495,14498,14500,14502],{"class":54,"line":682},[52,14496,14497],{"class":58}," frame ",[52,14499,70],{"class":231},[52,14501,13868],{"class":66},[52,14503,13871],{"class":58},[52,14505,14506,14509,14511,14513,14515],{"class":54,"line":698},[52,14507,14508],{"class":66}," onCleanup",[52,14510,13816],{"class":58},[52,14512,2425],{"class":231},[52,14514,13906],{"class":66},[52,14516,14517],{"class":58},"(frame))\n",[52,14519,14520],{"class":54,"line":707},[52,14521,10722],{"class":58},[52,14523,14524],{"class":54,"line":2327},[52,14525,597],{"emptyLinePlaceholder":171},[52,14527,14528,14530],{"class":54,"line":7369},[52,14529,2402],{"class":231},[52,14531,2405],{"class":58},[52,14533,14534,14536,14538,14540,14542,14544],{"class":54,"line":7379},[52,14535,2213],{"class":58},[52,14537,63],{"class":371},[52,14539,67],{"class":66},[52,14541,70],{"class":231},[52,14543,319],{"class":73},[52,14545,77],{"class":58},[52,14547,14548,14550,14552,14554,14556,14558,14560],{"class":54,"line":7390},[52,14549,2476],{"class":58},[52,14551,86],{"class":371},[52,14553,13145],{"class":66},[52,14555,70],{"class":231},[52,14557,13150],{"class":58},[52,14559,9552],{"class":66},[52,14561,14562],{"class":58},"() }} />\n",[52,14564,14565,14567,14569],{"class":54,"line":7395},[52,14566,2491],{"class":58},[52,14568,63],{"class":371},[52,14570,77],{"class":58},[52,14572,14573],{"class":54,"line":8717},[52,14574,2500],{"class":58},[52,14576,14577],{"class":54,"line":8722},[52,14578,729],{"class":58},[43,14580,14582],{"className":222,"code":14581,"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,14583,14584,14594,14598,14616,14630,14634,14657,14661,14665,14669,14681,14695,14714,14728,14735,14739],{"__ignoreMap":48},[52,14585,14586,14588,14590,14592],{"class":54,"line":55},[52,14587,232],{"class":231},[52,14589,9231],{"class":58},[52,14591,238],{"class":231},[52,14593,9236],{"class":73},[52,14595,14596],{"class":54,"line":80},[52,14597,597],{"emptyLinePlaceholder":171},[52,14599,14600,14602,14604,14606,14608,14610,14612,14614],{"class":54,"line":108},[52,14601,1721],{"class":231},[52,14603,2796],{"class":371},[52,14605,1727],{"class":231},[52,14607,2801],{"class":58},[52,14609,2804],{"class":66},[52,14611,2289],{"class":58},[52,14613,10244],{"class":73},[52,14615,2295],{"class":58},[52,14617,14618,14620,14622,14624,14626,14628],{"class":54,"line":118},[52,14619,1721],{"class":231},[52,14621,1724],{"class":371},[52,14623,1727],{"class":231},[52,14625,1730],{"class":231},[52,14627,1733],{"class":66},[52,14629,1736],{"class":58},[52,14631,14632],{"class":54,"line":594},[52,14633,1751],{"class":58},[52,14635,14636,14638,14640,14642,14645,14647,14650,14652,14655],{"class":54,"line":600},[52,14637,1756],{"class":58},[52,14639,2126],{"class":73},[52,14641,2872],{"class":58},[52,14643,14644],{"class":73},"'grad'",[52,14646,7883],{"class":58},[52,14648,14649],{"class":73},"'#0f172a'",[52,14651,7889],{"class":58},[52,14653,14654],{"class":73},"'#7c3aed'",[52,14656,1768],{"class":58},[52,14658,14659],{"class":54,"line":606},[52,14660,1773],{"class":58},[52,14662,14663],{"class":54,"line":653},[52,14664,1778],{"class":58},[52,14666,14667],{"class":54,"line":662},[52,14668,597],{"emptyLinePlaceholder":171},[52,14670,14671,14673,14676,14678],{"class":54,"line":671},[52,14672,13801],{"class":231},[52,14674,14675],{"class":58}," rotation ",[52,14677,70],{"class":231},[52,14679,14680],{"class":371}," 0\n",[52,14682,14683,14685,14687,14689,14691,14693],{"class":54,"line":676},[52,14684,1721],{"class":231},[52,14686,9676],{"class":66},[52,14688,1727],{"class":231},[52,14690,13831],{"class":58},[52,14692,2425],{"class":231},[52,14694,2904],{"class":58},[52,14696,14697,14700,14702,14704,14706,14708,14710,14712],{"class":54,"line":682},[52,14698,14699],{"class":58}," rotation ",[52,14701,70],{"class":231},[52,14703,14270],{"class":58},[52,14705,8554],{"class":231},[52,14707,13850],{"class":371},[52,14709,9717],{"class":58},[52,14711,13855],{"class":231},[52,14713,13858],{"class":371},[52,14715,14716,14719,14721,14723,14725],{"class":54,"line":698},[52,14717,14718],{"class":58}," shader.",[52,14720,9325],{"class":66},[52,14722,2289],{"class":58},[52,14724,14644],{"class":73},[52,14726,14727],{"class":58},", { transform: { rotation } })\n",[52,14729,14730,14733],{"class":54,"line":707},[52,14731,14732],{"class":66}," requestAnimationFrame",[52,14734,13871],{"class":58},[52,14736,14737],{"class":54,"line":2327},[52,14738,729],{"class":58},[52,14740,14741,14744],{"class":54,"line":7369},[52,14742,14743],{"class":66},"requestAnimationFrame",[52,14745,13871],{"class":58},[15,14747,14748,14749,14753,14754,14757],{},"For continuous animations like rotation, consider using a ",[1139,14750,14752],{"href":14751},"/docs/guide/dynamic-props","Prop Driver"," instead — the ",[31,14755,14756],{},"auto-animate"," driver handles this declaratively without any component code.",[23,14759,14761],{"id":14760},"performance","Performance",[15,14763,14764,14765,14768],{},"Transforms have ",[151,14766,14767],{},"zero overhead when all values are at their defaults",". The renderer checks for non-default values before activating the UV transformation pass.",[15,14770,14771],{},"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,14773,14774],{},"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,14776,14777],{},"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":14779},[14780,14781,14782,14783,14784,14785],{"id":12828,"depth":80,"text":12829},{"id":13019,"depth":80,"text":13020},{"id":13506,"depth":80,"text":13507},{"id":13609,"depth":80,"text":13610},{"id":13743,"depth":80,"text":13744},{"id":14760,"depth":80,"text":14761},"Reposition, rotate, and scale any shader component in UV space","arrows-to-circle",{},"/docs/guide/transforms",{"title":12735,"description":14786},"docs/guide/6.transforms","I6UL4PDAPMEAXn2HXal6IZYN8IJaEN-UqIZcjXIiNCw",{"id":14794,"title":14795,"body":14796,"category":7949,"description":18455,"exclude":167,"extension":168,"forceFramework":167,"icon":18456,"meta":18457,"navigation":171,"path":14751,"seo":18458,"stem":18459,"__hash__":18460},"guide/docs/guide/7.dynamic-props.md","Dynamic Props",{"type":8,"value":14797,"toc":18447},[14798,14801,14804,14807,14856,14858,14861,15398,15401,15406,15534,15546,15549,15565,16033,16036,16040,16240,16252,16284,16287,16290,16772,16775,16779,16908,16913,16916,16919,16925,17646,17649,17653,17794,17799,17803,17806,18286,18290,18297,18445],[11,14799,14795],{"id":14800},"dynamic-props",[15,14802,14803],{},"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,14805,14806],{},"Instead of passing a static prop value, you can use a dynamic prop config:",[43,14808,14810],{"className":45,"code":14809,"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,14811,14812,14817,14832,14836,14841],{"__ignoreMap":48},[52,14813,14814],{"class":54,"line":55},[52,14815,14816],{"class":559},"\u003C!-- Static value -->\n",[52,14818,14819,14821,14823,14826,14828,14830],{"class":54,"line":80},[52,14820,59],{"class":58},[52,14822,2216],{"class":62},[52,14824,14825],{"class":66}," :radius",[52,14827,70],{"class":58},[52,14829,5394],{"class":73},[52,14831,105],{"class":58},[52,14833,14834],{"class":54,"line":108},[52,14835,597],{"emptyLinePlaceholder":171},[52,14837,14838],{"class":54,"line":118},[52,14839,14840],{"class":559},"\u003C!-- Dynamic prop: animates radius automatically -->\n",[52,14842,14843,14845,14847,14849,14851,14854],{"class":54,"line":594},[52,14844,59],{"class":58},[52,14846,2216],{"class":62},[52,14848,14825],{"class":66},[52,14850,70],{"class":58},[52,14852,14853],{"class":73},"\"{ type: 'auto-animate', mode: 'ping-pong', outputMin: 0.2, outputMax: 0.6 }\"",[52,14855,105],{"class":58},[23,14857,14756],{"id":14756},[15,14859,14860],{},"Continuously animates a numeric prop between two values over time.",[217,14862,14863,14954,15066,15169,15271],{":tabs":1543},[43,14864,14866],{"className":45,"code":14865,"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,14867,14868,14882,14888,14897,14907,14912,14917,14922,14927,14932,14937,14942,14946],{"__ignoreMap":48},[52,14869,14870,14872,14874,14876,14878,14880],{"class":54,"line":55},[52,14871,59],{"class":58},[52,14873,63],{"class":62},[52,14875,67],{"class":66},[52,14877,70],{"class":58},[52,14879,319],{"class":73},[52,14881,77],{"class":58},[52,14883,14884,14886],{"class":54,"line":80},[52,14885,83],{"class":58},[52,14887,7346],{"class":62},[52,14889,14890,14892,14894],{"class":54,"line":108},[52,14891,7351],{"class":66},[52,14893,70],{"class":58},[52,14895,14896],{"class":73},"\"#6366f1\"\n",[52,14898,14899,14902,14904],{"class":54,"line":118},[52,14900,14901],{"class":66}," :radius",[52,14903,70],{"class":58},[52,14905,14906],{"class":73},"\"{\n",[52,14908,14909],{"class":54,"line":594},[52,14910,14911],{"class":73}," type: 'auto-animate',\n",[52,14913,14914],{"class":54,"line":600},[52,14915,14916],{"class":73}," mode: 'ping-pong',\n",[52,14918,14919],{"class":54,"line":606},[52,14920,14921],{"class":73}," outputMin: 0.2,\n",[52,14923,14924],{"class":54,"line":653},[52,14925,14926],{"class":73}," outputMax: 0.6,\n",[52,14928,14929],{"class":54,"line":662},[52,14930,14931],{"class":73}," speed: 0.8,\n",[52,14933,14934],{"class":54,"line":671},[52,14935,14936],{"class":73}," easing: 'sine'\n",[52,14938,14939],{"class":54,"line":676},[52,14940,14941],{"class":73}," }\"\n",[52,14943,14944],{"class":54,"line":682},[52,14945,1224],{"class":58},[52,14947,14948,14950,14952],{"class":54,"line":698},[52,14949,121],{"class":58},[52,14951,63],{"class":62},[52,14953,77],{"class":58},[43,14955,14957],{"className":360,"code":14956,"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,14958,14959,14973,14979,14987,14996,15005,15015,15024,15033,15042,15049,15054,15058],{"__ignoreMap":48},[52,14960,14961,14963,14965,14967,14969,14971],{"class":54,"line":55},[52,14962,59],{"class":58},[52,14964,63],{"class":371},[52,14966,374],{"class":66},[52,14968,70],{"class":231},[52,14970,319],{"class":73},[52,14972,77],{"class":58},[52,14974,14975,14977],{"class":54,"line":80},[52,14976,83],{"class":58},[52,14978,7346],{"class":371},[52,14980,14981,14983,14985],{"class":54,"line":108},[52,14982,7351],{"class":66},[52,14984,70],{"class":231},[52,14986,14896],{"class":73},[52,14988,14989,14991,14993],{"class":54,"line":118},[52,14990,7361],{"class":66},[52,14992,70],{"class":231},[52,14994,14995],{"class":58},"{{\n",[52,14997,14998,15000,15003],{"class":54,"line":594},[52,14999,13427],{"class":58},[52,15001,15002],{"class":73},"'auto-animate'",[52,15004,1746],{"class":58},[52,15006,15007,15010,15013],{"class":54,"line":600},[52,15008,15009],{"class":58}," mode: ",[52,15011,15012],{"class":73},"'ping-pong'",[52,15014,1746],{"class":58},[52,15016,15017,15020,15022],{"class":54,"line":606},[52,15018,15019],{"class":58}," outputMin: ",[52,15021,13177],{"class":371},[52,15023,1746],{"class":58},[52,15025,15026,15029,15031],{"class":54,"line":653},[52,15027,15028],{"class":58}," outputMax: ",[52,15030,5950],{"class":371},[52,15032,1746],{"class":58},[52,15034,15035,15038,15040],{"class":54,"line":662},[52,15036,15037],{"class":58}," speed: ",[52,15039,4011],{"class":371},[52,15041,1746],{"class":58},[52,15043,15044,15046],{"class":54,"line":671},[52,15045,9698],{"class":58},[52,15047,15048],{"class":73},"'sine'\n",[52,15050,15051],{"class":54,"line":676},[52,15052,15053],{"class":58}," }}\n",[52,15055,15056],{"class":54,"line":682},[52,15057,1224],{"class":58},[52,15059,15060,15062,15064],{"class":54,"line":698},[52,15061,121],{"class":58},[52,15063,63],{"class":371},[52,15065,77],{"class":58},[43,15067,15069],{"className":419,"code":15068,"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,15070,15071,15085,15091,15099,15107,15115,15123,15131,15139,15147,15153,15157,15161],{"__ignoreMap":48},[52,15072,15073,15075,15077,15079,15081,15083],{"class":54,"line":55},[52,15074,59],{"class":58},[52,15076,63],{"class":371},[52,15078,67],{"class":66},[52,15080,70],{"class":231},[52,15082,319],{"class":73},[52,15084,77],{"class":58},[52,15086,15087,15089],{"class":54,"line":80},[52,15088,83],{"class":58},[52,15090,7346],{"class":371},[52,15092,15093,15095,15097],{"class":54,"line":108},[52,15094,7351],{"class":66},[52,15096,70],{"class":231},[52,15098,14896],{"class":73},[52,15100,15101,15103,15105],{"class":54,"line":118},[52,15102,7361],{"class":66},[52,15104,70],{"class":231},[52,15106,14995],{"class":58},[52,15108,15109,15111,15113],{"class":54,"line":594},[52,15110,13427],{"class":58},[52,15112,15002],{"class":73},[52,15114,1746],{"class":58},[52,15116,15117,15119,15121],{"class":54,"line":600},[52,15118,15009],{"class":58},[52,15120,15012],{"class":73},[52,15122,1746],{"class":58},[52,15124,15125,15127,15129],{"class":54,"line":606},[52,15126,15019],{"class":58},[52,15128,13177],{"class":371},[52,15130,1746],{"class":58},[52,15132,15133,15135,15137],{"class":54,"line":653},[52,15134,15028],{"class":58},[52,15136,5950],{"class":371},[52,15138,1746],{"class":58},[52,15140,15141,15143,15145],{"class":54,"line":662},[52,15142,15037],{"class":58},[52,15144,4011],{"class":371},[52,15146,1746],{"class":58},[52,15148,15149,15151],{"class":54,"line":671},[52,15150,9698],{"class":58},[52,15152,15048],{"class":73},[52,15154,15155],{"class":54,"line":676},[52,15156,15053],{"class":58},[52,15158,15159],{"class":54,"line":682},[52,15160,1224],{"class":58},[52,15162,15163,15165,15167],{"class":54,"line":698},[52,15164,121],{"class":58},[52,15166,63],{"class":371},[52,15168,77],{"class":58},[43,15170,15171],{"className":419,"code":15068,"language":420,"meta":48,"style":48},[31,15172,15173,15187,15193,15201,15209,15217,15225,15233,15241,15249,15255,15259,15263],{"__ignoreMap":48},[52,15174,15175,15177,15179,15181,15183,15185],{"class":54,"line":55},[52,15176,59],{"class":58},[52,15178,63],{"class":371},[52,15180,67],{"class":66},[52,15182,70],{"class":231},[52,15184,319],{"class":73},[52,15186,77],{"class":58},[52,15188,15189,15191],{"class":54,"line":80},[52,15190,83],{"class":58},[52,15192,7346],{"class":371},[52,15194,15195,15197,15199],{"class":54,"line":108},[52,15196,7351],{"class":66},[52,15198,70],{"class":231},[52,15200,14896],{"class":73},[52,15202,15203,15205,15207],{"class":54,"line":118},[52,15204,7361],{"class":66},[52,15206,70],{"class":231},[52,15208,14995],{"class":58},[52,15210,15211,15213,15215],{"class":54,"line":594},[52,15212,13427],{"class":58},[52,15214,15002],{"class":73},[52,15216,1746],{"class":58},[52,15218,15219,15221,15223],{"class":54,"line":600},[52,15220,15009],{"class":58},[52,15222,15012],{"class":73},[52,15224,1746],{"class":58},[52,15226,15227,15229,15231],{"class":54,"line":606},[52,15228,15019],{"class":58},[52,15230,13177],{"class":371},[52,15232,1746],{"class":58},[52,15234,15235,15237,15239],{"class":54,"line":653},[52,15236,15028],{"class":58},[52,15238,5950],{"class":371},[52,15240,1746],{"class":58},[52,15242,15243,15245,15247],{"class":54,"line":662},[52,15244,15037],{"class":58},[52,15246,4011],{"class":371},[52,15248,1746],{"class":58},[52,15250,15251,15253],{"class":54,"line":671},[52,15252,9698],{"class":58},[52,15254,15048],{"class":73},[52,15256,15257],{"class":54,"line":676},[52,15258,15053],{"class":58},[52,15260,15261],{"class":54,"line":682},[52,15262,1224],{"class":58},[52,15264,15265,15267,15269],{"class":54,"line":698},[52,15266,121],{"class":58},[52,15268,63],{"class":371},[52,15270,77],{"class":58},[43,15272,15274],{"className":222,"code":15273,"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,15275,15276,15290,15294,15298,15306,15310,15320,15325,15334,15343,15352,15361,15370,15377,15382,15386,15390,15394],{"__ignoreMap":48},[52,15277,15278,15280,15282,15284,15286,15288],{"class":54,"line":55},[52,15279,1721],{"class":231},[52,15281,1724],{"class":371},[52,15283,1727],{"class":231},[52,15285,1730],{"class":231},[52,15287,1733],{"class":66},[52,15289,1736],{"class":58},[52,15291,15292],{"class":54,"line":80},[52,15293,1751],{"class":58},[52,15295,15296],{"class":54,"line":108},[52,15297,13422],{"class":58},[52,15299,15300,15302,15304],{"class":54,"line":118},[52,15301,13427],{"class":58},[52,15303,2869],{"class":73},[52,15305,1746],{"class":58},[52,15307,15308],{"class":54,"line":594},[52,15309,13436],{"class":58},[52,15311,15312,15315,15318],{"class":54,"line":600},[52,15313,15314],{"class":58}," color: ",[52,15316,15317],{"class":73},"'#6366f1'",[52,15319,1746],{"class":58},[52,15321,15322],{"class":54,"line":606},[52,15323,15324],{"class":58}," radius: {\n",[52,15326,15327,15330,15332],{"class":54,"line":653},[52,15328,15329],{"class":58}," type: ",[52,15331,15002],{"class":73},[52,15333,1746],{"class":58},[52,15335,15336,15339,15341],{"class":54,"line":662},[52,15337,15338],{"class":58}," mode: ",[52,15340,15012],{"class":73},[52,15342,1746],{"class":58},[52,15344,15345,15348,15350],{"class":54,"line":671},[52,15346,15347],{"class":58}," outputMin: ",[52,15349,13177],{"class":371},[52,15351,1746],{"class":58},[52,15353,15354,15357,15359],{"class":54,"line":676},[52,15355,15356],{"class":58}," outputMax: ",[52,15358,5950],{"class":371},[52,15360,1746],{"class":58},[52,15362,15363,15366,15368],{"class":54,"line":682},[52,15364,15365],{"class":58}," speed: ",[52,15367,4011],{"class":371},[52,15369,1746],{"class":58},[52,15371,15372,15375],{"class":54,"line":698},[52,15373,15374],{"class":58}," easing: ",[52,15376,15048],{"class":73},[52,15378,15379],{"class":54,"line":707},[52,15380,15381],{"class":58}," }\n",[52,15383,15384],{"class":54,"line":2327},[52,15385,3333],{"class":58},[52,15387,15388],{"class":54,"line":7369},[52,15389,3106],{"class":58},[52,15391,15392],{"class":54,"line":7379},[52,15393,1773],{"class":58},[52,15395,15396],{"class":54,"line":7390},[52,15397,1778],{"class":58},[19,15399],{":preset":15400},"{\"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,15402,15403],{},[151,15404,15405],{},"Properties:",[1780,15407,15408,15420],{},[1783,15409,15410],{},[1786,15411,15412,15414,15416,15418],{},[1789,15413,12844],{},[1789,15415,12847],{},[1789,15417,12850],{},[1789,15419,1794],{},[1796,15421,15422,15447,15463,15479,15498],{},[1786,15423,15424,15429,15434,15437],{},[1801,15425,15426],{},[31,15427,15428],{},"mode",[1801,15430,15431],{},[31,15432,15433],{},"'ping-pong' | 'loop'",[1801,15435,15436],{},"required",[1801,15438,15439,15442,15443,15446],{},[31,15440,15441],{},"ping-pong"," oscillates between min and max. ",[31,15444,15445],{},"loop"," advances from min to max then wraps.",[1786,15448,15449,15454,15458,15460],{},[1801,15450,15451],{},[31,15452,15453],{},"outputMin",[1801,15455,15456],{},[31,15457,12866],{},[1801,15459,15436],{},[1801,15461,15462],{},"Value at the start/bottom of the range.",[1786,15464,15465,15470,15474,15476],{},[1801,15466,15467],{},[31,15468,15469],{},"outputMax",[1801,15471,15472],{},[31,15473,12866],{},[1801,15475,15436],{},[1801,15477,15478],{},"Value at the end/top of the range.",[1786,15480,15481,15486,15490,15495],{},[1801,15482,15483],{},[31,15484,15485],{},"speed",[1801,15487,15488],{},[31,15489,12866],{},[1801,15491,15492],{},[31,15493,15494],{},"1.0",[1801,15496,15497],{},"Cycles per second. Negative values reverse the loop direction.",[1786,15499,15500,15505,15509,15514],{},[1801,15501,15502],{},[31,15503,15504],{},"easing",[1801,15506,15507],{},[31,15508,6775],{},[1801,15510,15511],{},[31,15512,15513],{},"'sine'",[1801,15515,15516,15517,15519,15520,1881,15523,1881,15525,1881,15528,1881,15531,7204],{},"Easing curve for ",[31,15518,15441],{}," mode. Options: ",[31,15521,15522],{},"sine",[31,15524,1880],{},[31,15526,15527],{},"quad",[31,15529,15530],{},"expo",[31,15532,15533],{},"bounce",[15,15535,15536,15539,15540,15542,15543,7204],{},[151,15537,15538],{},"Use cases:"," Pulsing shapes, looping gradient angles, breathing glow intensities, continuous rotation with ",[31,15541,15445],{}," mode and ",[31,15544,15545],{},"outputMin: 0, outputMax: 360",[23,15547,15548],{"id":15548},"mouse-position",[15,15550,15551,15552,15555,15556,1881,15558,15561,15562,7204],{},"Drives an XY position prop from the cursor location. Use this for any prop that expects ",[31,15553,15554],{},"{ x, y }"," coordinates, such as ",[31,15557,5955],{},[31,15559,15560],{},"position",", or ",[31,15563,15564],{},"offset",[217,15566,15567,15649,15747,15838,15928],{":tabs":1543},[43,15568,15570],{"className":45,"code":15569,"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,15571,15572,15586,15592,15600,15609,15618,15623,15628,15633,15637,15641],{"__ignoreMap":48},[52,15573,15574,15576,15578,15580,15582,15584],{"class":54,"line":55},[52,15575,59],{"class":58},[52,15577,63],{"class":62},[52,15579,67],{"class":66},[52,15581,70],{"class":58},[52,15583,319],{"class":73},[52,15585,77],{"class":58},[52,15587,15588,15590],{"class":54,"line":80},[52,15589,83],{"class":58},[52,15591,7346],{"class":62},[52,15593,15594,15596,15598],{"class":54,"line":108},[52,15595,7351],{"class":66},[52,15597,70],{"class":58},[52,15599,14896],{"class":73},[52,15601,15602,15604,15606],{"class":54,"line":118},[52,15603,14901],{"class":66},[52,15605,70],{"class":58},[52,15607,15608],{"class":73},"\"0.15\"\n",[52,15610,15611,15614,15616],{"class":54,"line":594},[52,15612,15613],{"class":66}," :center",[52,15615,70],{"class":58},[52,15617,14906],{"class":73},[52,15619,15620],{"class":54,"line":600},[52,15621,15622],{"class":73}," type: 'mouse-position',\n",[52,15624,15625],{"class":54,"line":606},[52,15626,15627],{"class":73}," smoothing: 0.12,\n",[52,15629,15630],{"class":54,"line":653},[52,15631,15632],{"class":73}," momentum: 0.2\n",[52,15634,15635],{"class":54,"line":662},[52,15636,14941],{"class":73},[52,15638,15639],{"class":54,"line":671},[52,15640,1224],{"class":58},[52,15642,15643,15645,15647],{"class":54,"line":676},[52,15644,121],{"class":58},[52,15646,63],{"class":62},[52,15648,77],{"class":58},[43,15650,15652],{"className":360,"code":15651,"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,15653,15654,15668,15674,15682,15695,15704,15713,15723,15731,15735,15739],{"__ignoreMap":48},[52,15655,15656,15658,15660,15662,15664,15666],{"class":54,"line":55},[52,15657,59],{"class":58},[52,15659,63],{"class":371},[52,15661,374],{"class":66},[52,15663,70],{"class":231},[52,15665,319],{"class":73},[52,15667,77],{"class":58},[52,15669,15670,15672],{"class":54,"line":80},[52,15671,83],{"class":58},[52,15673,7346],{"class":371},[52,15675,15676,15678,15680],{"class":54,"line":108},[52,15677,7351],{"class":66},[52,15679,70],{"class":231},[52,15681,14896],{"class":73},[52,15683,15684,15686,15688,15690,15693],{"class":54,"line":118},[52,15685,7361],{"class":66},[52,15687,70],{"class":231},[52,15689,723],{"class":58},[52,15691,15692],{"class":371},"0.15",[52,15694,729],{"class":58},[52,15696,15697,15700,15702],{"class":54,"line":594},[52,15698,15699],{"class":66}," center",[52,15701,70],{"class":231},[52,15703,14995],{"class":58},[52,15705,15706,15708,15711],{"class":54,"line":600},[52,15707,13427],{"class":58},[52,15709,15710],{"class":73},"'mouse-position'",[52,15712,1746],{"class":58},[52,15714,15715,15718,15721],{"class":54,"line":606},[52,15716,15717],{"class":58}," smoothing: ",[52,15719,15720],{"class":371},"0.12",[52,15722,1746],{"class":58},[52,15724,15725,15728],{"class":54,"line":653},[52,15726,15727],{"class":58}," momentum: ",[52,15729,15730],{"class":371},"0.2\n",[52,15732,15733],{"class":54,"line":662},[52,15734,15053],{"class":58},[52,15736,15737],{"class":54,"line":671},[52,15738,1224],{"class":58},[52,15740,15741,15743,15745],{"class":54,"line":676},[52,15742,121],{"class":58},[52,15744,63],{"class":371},[52,15746,77],{"class":58},[43,15748,15750],{"className":419,"code":15749,"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,15751,15752,15766,15772,15780,15792,15800,15808,15816,15822,15826,15830],{"__ignoreMap":48},[52,15753,15754,15756,15758,15760,15762,15764],{"class":54,"line":55},[52,15755,59],{"class":58},[52,15757,63],{"class":371},[52,15759,67],{"class":66},[52,15761,70],{"class":231},[52,15763,319],{"class":73},[52,15765,77],{"class":58},[52,15767,15768,15770],{"class":54,"line":80},[52,15769,83],{"class":58},[52,15771,7346],{"class":371},[52,15773,15774,15776,15778],{"class":54,"line":108},[52,15775,7351],{"class":66},[52,15777,70],{"class":231},[52,15779,14896],{"class":73},[52,15781,15782,15784,15786,15788,15790],{"class":54,"line":118},[52,15783,7361],{"class":66},[52,15785,70],{"class":231},[52,15787,723],{"class":58},[52,15789,15692],{"class":371},[52,15791,729],{"class":58},[52,15793,15794,15796,15798],{"class":54,"line":594},[52,15795,15699],{"class":66},[52,15797,70],{"class":231},[52,15799,14995],{"class":58},[52,15801,15802,15804,15806],{"class":54,"line":600},[52,15803,13427],{"class":58},[52,15805,15710],{"class":73},[52,15807,1746],{"class":58},[52,15809,15810,15812,15814],{"class":54,"line":606},[52,15811,15717],{"class":58},[52,15813,15720],{"class":371},[52,15815,1746],{"class":58},[52,15817,15818,15820],{"class":54,"line":653},[52,15819,15727],{"class":58},[52,15821,15730],{"class":371},[52,15823,15824],{"class":54,"line":662},[52,15825,15053],{"class":58},[52,15827,15828],{"class":54,"line":671},[52,15829,1224],{"class":58},[52,15831,15832,15834,15836],{"class":54,"line":676},[52,15833,121],{"class":58},[52,15835,63],{"class":371},[52,15837,77],{"class":58},[43,15839,15840],{"className":419,"code":15749,"language":420,"meta":48,"style":48},[31,15841,15842,15856,15862,15870,15882,15890,15898,15906,15912,15916,15920],{"__ignoreMap":48},[52,15843,15844,15846,15848,15850,15852,15854],{"class":54,"line":55},[52,15845,59],{"class":58},[52,15847,63],{"class":371},[52,15849,67],{"class":66},[52,15851,70],{"class":231},[52,15853,319],{"class":73},[52,15855,77],{"class":58},[52,15857,15858,15860],{"class":54,"line":80},[52,15859,83],{"class":58},[52,15861,7346],{"class":371},[52,15863,15864,15866,15868],{"class":54,"line":108},[52,15865,7351],{"class":66},[52,15867,70],{"class":231},[52,15869,14896],{"class":73},[52,15871,15872,15874,15876,15878,15880],{"class":54,"line":118},[52,15873,7361],{"class":66},[52,15875,70],{"class":231},[52,15877,723],{"class":58},[52,15879,15692],{"class":371},[52,15881,729],{"class":58},[52,15883,15884,15886,15888],{"class":54,"line":594},[52,15885,15699],{"class":66},[52,15887,70],{"class":231},[52,15889,14995],{"class":58},[52,15891,15892,15894,15896],{"class":54,"line":600},[52,15893,13427],{"class":58},[52,15895,15710],{"class":73},[52,15897,1746],{"class":58},[52,15899,15900,15902,15904],{"class":54,"line":606},[52,15901,15717],{"class":58},[52,15903,15720],{"class":371},[52,15905,1746],{"class":58},[52,15907,15908,15910],{"class":54,"line":653},[52,15909,15727],{"class":58},[52,15911,15730],{"class":371},[52,15913,15914],{"class":54,"line":662},[52,15915,15053],{"class":58},[52,15917,15918],{"class":54,"line":671},[52,15919,1224],{"class":58},[52,15921,15922,15924,15926],{"class":54,"line":676},[52,15923,121],{"class":58},[52,15925,63],{"class":371},[52,15927,77],{"class":58},[43,15929,15931],{"className":222,"code":15930,"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,15932,15933,15947,15951,15955,15963,15967,15975,15984,15989,15997,16006,16013,16017,16021,16025,16029],{"__ignoreMap":48},[52,15934,15935,15937,15939,15941,15943,15945],{"class":54,"line":55},[52,15936,1721],{"class":231},[52,15938,1724],{"class":371},[52,15940,1727],{"class":231},[52,15942,1730],{"class":231},[52,15944,1733],{"class":66},[52,15946,1736],{"class":58},[52,15948,15949],{"class":54,"line":80},[52,15950,1751],{"class":58},[52,15952,15953],{"class":54,"line":108},[52,15954,13422],{"class":58},[52,15956,15957,15959,15961],{"class":54,"line":118},[52,15958,13427],{"class":58},[52,15960,2869],{"class":73},[52,15962,1746],{"class":58},[52,15964,15965],{"class":54,"line":594},[52,15966,13436],{"class":58},[52,15968,15969,15971,15973],{"class":54,"line":600},[52,15970,15314],{"class":58},[52,15972,15317],{"class":73},[52,15974,1746],{"class":58},[52,15976,15977,15980,15982],{"class":54,"line":606},[52,15978,15979],{"class":58}," radius: ",[52,15981,15692],{"class":371},[52,15983,1746],{"class":58},[52,15985,15986],{"class":54,"line":653},[52,15987,15988],{"class":58}," center: {\n",[52,15990,15991,15993,15995],{"class":54,"line":662},[52,15992,15329],{"class":58},[52,15994,15710],{"class":73},[52,15996,1746],{"class":58},[52,15998,15999,16002,16004],{"class":54,"line":671},[52,16000,16001],{"class":58}," smoothing: ",[52,16003,15720],{"class":371},[52,16005,1746],{"class":58},[52,16007,16008,16011],{"class":54,"line":676},[52,16009,16010],{"class":58}," momentum: ",[52,16012,15730],{"class":371},[52,16014,16015],{"class":54,"line":682},[52,16016,15381],{"class":58},[52,16018,16019],{"class":54,"line":698},[52,16020,3333],{"class":58},[52,16022,16023],{"class":54,"line":707},[52,16024,3106],{"class":58},[52,16026,16027],{"class":54,"line":2327},[52,16028,1773],{"class":58},[52,16030,16031],{"class":54,"line":7369},[52,16032,1778],{"class":58},[19,16034],{":preset":16035},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":0.15,\"center\":{\"type\":\"mouse-position\",\"smoothing\":0.12,\"momentum\":0.2}}}]}",[15,16037,16038],{},[151,16039,15405],{},[1780,16041,16042,16054],{},[1783,16043,16044],{},[1786,16045,16046,16048,16050,16052],{},[1789,16047,12844],{},[1789,16049,12847],{},[1789,16051,12850],{},[1789,16053,1794],{},[1796,16055,16056,16078,16098,16117,16135,16156,16177,16204,16222],{},[1786,16057,16058,16063,16068,16073],{},[1801,16059,16060],{},[31,16061,16062],{},"x",[1801,16064,16065],{},[31,16066,16067],{},"'mouse' | number",[1801,16069,16070],{},[31,16071,16072],{},"'mouse'",[1801,16074,16075,16077],{},[31,16076,16072],{}," tracks cursor X. A number pins it to that value (0–1).",[1786,16079,16080,16085,16089,16093],{},[1801,16081,16082],{},[31,16083,16084],{},"y",[1801,16086,16087],{},[31,16088,16067],{},[1801,16090,16091],{},[31,16092,16072],{},[1801,16094,16095,16097],{},[31,16096,16072],{}," tracks cursor Y. A number pins it to that value (0–1).",[1786,16099,16100,16105,16110,16114],{},[1801,16101,16102],{},[31,16103,16104],{},"invertX",[1801,16106,16107],{},[31,16108,16109],{},"boolean",[1801,16111,16112],{},[31,16113,2292],{},[1801,16115,16116],{},"Flips the X direction — cursor moving right moves position left.",[1786,16118,16119,16124,16128,16132],{},[1801,16120,16121],{},[31,16122,16123],{},"invertY",[1801,16125,16126],{},[31,16127,16109],{},[1801,16129,16130],{},[31,16131,2292],{},[1801,16133,16134],{},"Flips the Y direction.",[1786,16136,16137,16142,16146,16150],{},[1801,16138,16139],{},[31,16140,16141],{},"smoothing",[1801,16143,16144],{},[31,16145,12866],{},[1801,16147,16148],{},[31,16149,6387],{},[1801,16151,16152,16153,16155],{},"Lag amount (0–1). ",[31,16154,6387],{}," = instant, higher values = sluggish follow.",[1786,16157,16158,16163,16167,16171],{},[1801,16159,16160],{},[31,16161,16162],{},"momentum",[1801,16164,16165],{},[31,16166,12866],{},[1801,16168,16169],{},[31,16170,6387],{},[1801,16172,16173,16174,16176],{},"Spring bounce (0–1). ",[31,16175,6387],{}," = no overshoot, values near 1 = springy.",[1786,16178,16179,16184,16188,16192],{},[1801,16180,16181],{},[31,16182,16183],{},"reach",[1801,16185,16186],{},[31,16187,12866],{},[1801,16189,16190],{},[31,16191,6391],{},[1801,16193,16194,16195,16197,16198,16200,16201,16203],{},"Displacement scale. ",[31,16196,6391],{}," = 1:1 with cursor. ",[31,16199,4927],{}," = twice the displacement. ",[31,16202,6387],{}," = pinned to origin.",[1786,16205,16206,16211,16215,16219],{},[1801,16207,16208],{},[31,16209,16210],{},"originX",[1801,16212,16213],{},[31,16214,12866],{},[1801,16216,16217],{},[31,16218,5467],{},[1801,16220,16221],{},"X coordinate of the origin point that displacement scales from.",[1786,16223,16224,16229,16233,16237],{},[1801,16225,16226],{},[31,16227,16228],{},"originY",[1801,16230,16231],{},[31,16232,12866],{},[1801,16234,16235],{},[31,16236,5467],{},[1801,16238,16239],{},"Y coordinate of the origin point.",[15,16241,16242,16245,16246,16248,16249,16251],{},[151,16243,16244],{},"Pinning one axis:"," Set ",[31,16247,16062],{}," or ",[31,16250,16084],{}," to a number to fix that axis while the other tracks the mouse:",[43,16253,16255],{"className":45,"code":16254,"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,16256,16257,16262],{"__ignoreMap":48},[52,16258,16259],{"class":54,"line":55},[52,16260,16261],{"class":559},"\u003C!-- Tracks only horizontal movement, locked at vertical center -->\n",[52,16263,16264,16266,16268,16270,16272,16275,16277,16279,16282],{"class":54,"line":80},[52,16265,59],{"class":58},[52,16267,2216],{"class":62},[52,16269,14825],{"class":66},[52,16271,70],{"class":58},[52,16273,16274],{"class":73},"\"0.15\"",[52,16276,5847],{"class":66},[52,16278,70],{"class":58},[52,16280,16281],{"class":73},"\"{ type: 'mouse-position', y: 0.5 }\"",[52,16283,105],{"class":58},[23,16285,16286],{"id":16286},"mouse",[15,16288,16289],{},"Drives a single numeric prop from the cursor's X or Y axis position.",[217,16291,16292,16374,16473,16568,16662],{":tabs":1543},[43,16293,16295],{"className":45,"code":16294,"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,16296,16297,16311,16317,16325,16333,16338,16343,16348,16353,16358,16362,16366],{"__ignoreMap":48},[52,16298,16299,16301,16303,16305,16307,16309],{"class":54,"line":55},[52,16300,59],{"class":58},[52,16302,63],{"class":62},[52,16304,67],{"class":66},[52,16306,70],{"class":58},[52,16308,319],{"class":73},[52,16310,77],{"class":58},[52,16312,16313,16315],{"class":54,"line":80},[52,16314,83],{"class":58},[52,16316,7346],{"class":62},[52,16318,16319,16321,16323],{"class":54,"line":108},[52,16320,7351],{"class":66},[52,16322,70],{"class":58},[52,16324,14896],{"class":73},[52,16326,16327,16329,16331],{"class":54,"line":118},[52,16328,14901],{"class":66},[52,16330,70],{"class":58},[52,16332,14906],{"class":73},[52,16334,16335],{"class":54,"line":594},[52,16336,16337],{"class":73}," type: 'mouse',\n",[52,16339,16340],{"class":54,"line":600},[52,16341,16342],{"class":73}," axis: 'x',\n",[52,16344,16345],{"class":54,"line":606},[52,16346,16347],{"class":73}," outputMin: 0.1,\n",[52,16349,16350],{"class":54,"line":653},[52,16351,16352],{"class":73}," outputMax: 0.7,\n",[52,16354,16355],{"class":54,"line":662},[52,16356,16357],{"class":73}," smoothing: 0.1\n",[52,16359,16360],{"class":54,"line":671},[52,16361,14941],{"class":73},[52,16363,16364],{"class":54,"line":676},[52,16365,1224],{"class":58},[52,16367,16368,16370,16372],{"class":54,"line":682},[52,16369,121],{"class":58},[52,16371,63],{"class":62},[52,16373,77],{"class":58},[43,16375,16377],{"className":360,"code":16376,"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,16378,16379,16393,16399,16407,16415,16423,16433,16441,16450,16457,16461,16465],{"__ignoreMap":48},[52,16380,16381,16383,16385,16387,16389,16391],{"class":54,"line":55},[52,16382,59],{"class":58},[52,16384,63],{"class":371},[52,16386,374],{"class":66},[52,16388,70],{"class":231},[52,16390,319],{"class":73},[52,16392,77],{"class":58},[52,16394,16395,16397],{"class":54,"line":80},[52,16396,83],{"class":58},[52,16398,7346],{"class":371},[52,16400,16401,16403,16405],{"class":54,"line":108},[52,16402,7351],{"class":66},[52,16404,70],{"class":231},[52,16406,14896],{"class":73},[52,16408,16409,16411,16413],{"class":54,"line":118},[52,16410,7361],{"class":66},[52,16412,70],{"class":231},[52,16414,14995],{"class":58},[52,16416,16417,16419,16421],{"class":54,"line":594},[52,16418,13427],{"class":58},[52,16420,16072],{"class":73},[52,16422,1746],{"class":58},[52,16424,16425,16428,16431],{"class":54,"line":600},[52,16426,16427],{"class":58}," axis: ",[52,16429,16430],{"class":73},"'x'",[52,16432,1746],{"class":58},[52,16434,16435,16437,16439],{"class":54,"line":606},[52,16436,15019],{"class":58},[52,16438,13207],{"class":371},[52,16440,1746],{"class":58},[52,16442,16443,16445,16448],{"class":54,"line":653},[52,16444,15028],{"class":58},[52,16446,16447],{"class":371},"0.7",[52,16449,1746],{"class":58},[52,16451,16452,16454],{"class":54,"line":662},[52,16453,15717],{"class":58},[52,16455,16456],{"class":371},"0.1\n",[52,16458,16459],{"class":54,"line":671},[52,16460,15053],{"class":58},[52,16462,16463],{"class":54,"line":676},[52,16464,1224],{"class":58},[52,16466,16467,16469,16471],{"class":54,"line":682},[52,16468,121],{"class":58},[52,16470,63],{"class":371},[52,16472,77],{"class":58},[43,16474,16476],{"className":419,"code":16475,"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,16477,16478,16492,16498,16506,16514,16522,16530,16538,16546,16552,16556,16560],{"__ignoreMap":48},[52,16479,16480,16482,16484,16486,16488,16490],{"class":54,"line":55},[52,16481,59],{"class":58},[52,16483,63],{"class":371},[52,16485,67],{"class":66},[52,16487,70],{"class":231},[52,16489,319],{"class":73},[52,16491,77],{"class":58},[52,16493,16494,16496],{"class":54,"line":80},[52,16495,83],{"class":58},[52,16497,7346],{"class":371},[52,16499,16500,16502,16504],{"class":54,"line":108},[52,16501,7351],{"class":66},[52,16503,70],{"class":231},[52,16505,14896],{"class":73},[52,16507,16508,16510,16512],{"class":54,"line":118},[52,16509,7361],{"class":66},[52,16511,70],{"class":231},[52,16513,14995],{"class":58},[52,16515,16516,16518,16520],{"class":54,"line":594},[52,16517,13427],{"class":58},[52,16519,16072],{"class":73},[52,16521,1746],{"class":58},[52,16523,16524,16526,16528],{"class":54,"line":600},[52,16525,16427],{"class":58},[52,16527,16430],{"class":73},[52,16529,1746],{"class":58},[52,16531,16532,16534,16536],{"class":54,"line":606},[52,16533,15019],{"class":58},[52,16535,13207],{"class":371},[52,16537,1746],{"class":58},[52,16539,16540,16542,16544],{"class":54,"line":653},[52,16541,15028],{"class":58},[52,16543,16447],{"class":371},[52,16545,1746],{"class":58},[52,16547,16548,16550],{"class":54,"line":662},[52,16549,15717],{"class":58},[52,16551,16456],{"class":371},[52,16553,16554],{"class":54,"line":671},[52,16555,15053],{"class":58},[52,16557,16558],{"class":54,"line":676},[52,16559,1224],{"class":58},[52,16561,16562,16564,16566],{"class":54,"line":682},[52,16563,121],{"class":58},[52,16565,63],{"class":371},[52,16567,77],{"class":58},[43,16569,16570],{"className":419,"code":16475,"language":420,"meta":48,"style":48},[31,16571,16572,16586,16592,16600,16608,16616,16624,16632,16640,16646,16650,16654],{"__ignoreMap":48},[52,16573,16574,16576,16578,16580,16582,16584],{"class":54,"line":55},[52,16575,59],{"class":58},[52,16577,63],{"class":371},[52,16579,67],{"class":66},[52,16581,70],{"class":231},[52,16583,319],{"class":73},[52,16585,77],{"class":58},[52,16587,16588,16590],{"class":54,"line":80},[52,16589,83],{"class":58},[52,16591,7346],{"class":371},[52,16593,16594,16596,16598],{"class":54,"line":108},[52,16595,7351],{"class":66},[52,16597,70],{"class":231},[52,16599,14896],{"class":73},[52,16601,16602,16604,16606],{"class":54,"line":118},[52,16603,7361],{"class":66},[52,16605,70],{"class":231},[52,16607,14995],{"class":58},[52,16609,16610,16612,16614],{"class":54,"line":594},[52,16611,13427],{"class":58},[52,16613,16072],{"class":73},[52,16615,1746],{"class":58},[52,16617,16618,16620,16622],{"class":54,"line":600},[52,16619,16427],{"class":58},[52,16621,16430],{"class":73},[52,16623,1746],{"class":58},[52,16625,16626,16628,16630],{"class":54,"line":606},[52,16627,15019],{"class":58},[52,16629,13207],{"class":371},[52,16631,1746],{"class":58},[52,16633,16634,16636,16638],{"class":54,"line":653},[52,16635,15028],{"class":58},[52,16637,16447],{"class":371},[52,16639,1746],{"class":58},[52,16641,16642,16644],{"class":54,"line":662},[52,16643,15717],{"class":58},[52,16645,16456],{"class":371},[52,16647,16648],{"class":54,"line":671},[52,16649,15053],{"class":58},[52,16651,16652],{"class":54,"line":676},[52,16653,1224],{"class":58},[52,16655,16656,16658,16660],{"class":54,"line":682},[52,16657,121],{"class":58},[52,16659,63],{"class":371},[52,16661,77],{"class":58},[43,16663,16665],{"className":222,"code":16664,"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,16666,16667,16681,16685,16689,16697,16701,16709,16713,16721,16730,16738,16746,16752,16756,16760,16764,16768],{"__ignoreMap":48},[52,16668,16669,16671,16673,16675,16677,16679],{"class":54,"line":55},[52,16670,1721],{"class":231},[52,16672,1724],{"class":371},[52,16674,1727],{"class":231},[52,16676,1730],{"class":231},[52,16678,1733],{"class":66},[52,16680,1736],{"class":58},[52,16682,16683],{"class":54,"line":80},[52,16684,1751],{"class":58},[52,16686,16687],{"class":54,"line":108},[52,16688,13422],{"class":58},[52,16690,16691,16693,16695],{"class":54,"line":118},[52,16692,13427],{"class":58},[52,16694,2869],{"class":73},[52,16696,1746],{"class":58},[52,16698,16699],{"class":54,"line":594},[52,16700,13436],{"class":58},[52,16702,16703,16705,16707],{"class":54,"line":600},[52,16704,15314],{"class":58},[52,16706,15317],{"class":73},[52,16708,1746],{"class":58},[52,16710,16711],{"class":54,"line":606},[52,16712,15324],{"class":58},[52,16714,16715,16717,16719],{"class":54,"line":653},[52,16716,15329],{"class":58},[52,16718,16072],{"class":73},[52,16720,1746],{"class":58},[52,16722,16723,16726,16728],{"class":54,"line":662},[52,16724,16725],{"class":58}," axis: ",[52,16727,16430],{"class":73},[52,16729,1746],{"class":58},[52,16731,16732,16734,16736],{"class":54,"line":671},[52,16733,15347],{"class":58},[52,16735,13207],{"class":371},[52,16737,1746],{"class":58},[52,16739,16740,16742,16744],{"class":54,"line":676},[52,16741,15356],{"class":58},[52,16743,16447],{"class":371},[52,16745,1746],{"class":58},[52,16747,16748,16750],{"class":54,"line":682},[52,16749,16001],{"class":58},[52,16751,16456],{"class":371},[52,16753,16754],{"class":54,"line":698},[52,16755,15381],{"class":58},[52,16757,16758],{"class":54,"line":707},[52,16759,3333],{"class":58},[52,16761,16762],{"class":54,"line":2327},[52,16763,3106],{"class":58},[52,16765,16766],{"class":54,"line":7369},[52,16767,1773],{"class":58},[52,16769,16770],{"class":54,"line":7379},[52,16771,1778],{"class":58},[19,16773],{":preset":16774},"{\"components\":[{\"type\":\"Circle\",\"props\":{\"color\":\"#6366f1\",\"radius\":{\"type\":\"mouse\",\"axis\":\"x\",\"outputMin\":0.1,\"outputMax\":0.7,\"smoothing\":0.1}}}]}",[15,16776,16777],{},[151,16778,15405],{},[1780,16780,16781,16793],{},[1783,16782,16783],{},[1786,16784,16785,16787,16789,16791],{},[1789,16786,12844],{},[1789,16788,12847],{},[1789,16790,12850],{},[1789,16792,1794],{},[1796,16794,16795,16812,16827,16842,16870,16889],{},[1786,16796,16797,16802,16807,16809],{},[1801,16798,16799],{},[31,16800,16801],{},"axis",[1801,16803,16804],{},[31,16805,16806],{},"'x' | 'y'",[1801,16808,15436],{},[1801,16810,16811],{},"Which pointer axis drives this prop.",[1786,16813,16814,16818,16822,16824],{},[1801,16815,16816],{},[31,16817,15453],{},[1801,16819,16820],{},[31,16821,12866],{},[1801,16823,15436],{},[1801,16825,16826],{},"Output value when axis is at 0 (left or top).",[1786,16828,16829,16833,16837,16839],{},[1801,16830,16831],{},[31,16832,15469],{},[1801,16834,16835],{},[31,16836,12866],{},[1801,16838,15436],{},[1801,16840,16841],{},"Output value when axis is at 1 (right or bottom).",[1786,16843,16844,16849,16853,16857],{},[1801,16845,16846],{},[31,16847,16848],{},"curve",[1801,16850,16851],{},[31,16852,12866],{},[1801,16854,16855],{},[31,16856,6387],{},[1801,16858,16859,16860,1536,16862,16864,16865,16867,16868,7204],{},"Power curve: ",[31,16861,12876],{},[31,16863,12879],{},". Negative = biased toward ",[31,16866,15453],{},", positive = toward ",[31,16869,15469],{},[1786,16871,16872,16876,16880,16884],{},[1801,16873,16874],{},[31,16875,16141],{},[1801,16877,16878],{},[31,16879,12866],{},[1801,16881,16882],{},[31,16883,6387],{},[1801,16885,16886,16887,7204],{},"Lag (0–1). Same as ",[31,16888,15548],{},[1786,16890,16891,16895,16899,16903],{},[1801,16892,16893],{},[31,16894,16162],{},[1801,16896,16897],{},[31,16898,12866],{},[1801,16900,16901],{},[31,16902,6387],{},[1801,16904,16905,16906,7204],{},"Spring bounce (0–1). Same as ",[31,16907,15548],{},[15,16909,16910,16912],{},[151,16911,15538],{}," Blur amount from horizontal position, brightness from vertical position, hue shift, zoom intensity.",[23,16914,16915],{"id":16915},"map",[15,16917,16918],{},"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,16920,16921,16922,16924],{},"First, give the source component an ",[31,16923,6771],{},". Then reference that id in the driver:",[217,16926,16927,17065,17210,17347,17483],{":tabs":1543},[43,16928,16930],{"className":45,"code":16929,"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,16931,16932,16946,16951,16957,16966,16976,16985,16989,16993,16998,17005,17014,17019,17024,17029,17034,17039,17044,17049,17053,17057],{"__ignoreMap":48},[52,16933,16934,16936,16938,16940,16942,16944],{"class":54,"line":55},[52,16935,59],{"class":58},[52,16937,63],{"class":62},[52,16939,67],{"class":66},[52,16941,70],{"class":58},[52,16943,319],{"class":73},[52,16945,77],{"class":58},[52,16947,16948],{"class":54,"line":80},[52,16949,16950],{"class":559}," \u003C!-- Source layer: named 'grad' -->\n",[52,16952,16953,16955],{"class":54,"line":108},[52,16954,83],{"class":58},[52,16956,1171],{"class":62},[52,16958,16959,16961,16963],{"class":54,"line":118},[52,16960,7293],{"class":66},[52,16962,70],{"class":58},[52,16964,16965],{"class":73},"\"grad\"\n",[52,16967,16968,16971,16973],{"class":54,"line":594},[52,16969,16970],{"class":66}," color-a",[52,16972,70],{"class":58},[52,16974,16975],{"class":73},"\"#000000\"\n",[52,16977,16978,16981,16983],{"class":54,"line":600},[52,16979,16980],{"class":66}," color-b",[52,16982,70],{"class":58},[52,16984,7307],{"class":73},[52,16986,16987],{"class":54,"line":606},[52,16988,1224],{"class":58},[52,16990,16991],{"class":54,"line":653},[52,16992,597],{"emptyLinePlaceholder":171},[52,16994,16995],{"class":54,"line":662},[52,16996,16997],{"class":559}," \u003C!-- DotGrid dot size driven by the gradient's luminance -->\n",[52,16999,17000,17002],{"class":54,"line":671},[52,17001,83],{"class":58},[52,17003,17004],{"class":62},"DotGrid\n",[52,17006,17007,17010,17012],{"class":54,"line":676},[52,17008,17009],{"class":66}," :dot-size",[52,17011,70],{"class":58},[52,17013,14906],{"class":73},[52,17015,17016],{"class":54,"line":682},[52,17017,17018],{"class":73}," type: 'map',\n",[52,17020,17021],{"class":54,"line":698},[52,17022,17023],{"class":73}," source: 'grad',\n",[52,17025,17026],{"class":54,"line":707},[52,17027,17028],{"class":73}," channel: 'luminance',\n",[52,17030,17031],{"class":54,"line":2327},[52,17032,17033],{"class":73}," inputMin: 0,\n",[52,17035,17036],{"class":54,"line":7369},[52,17037,17038],{"class":73}," inputMax: 1,\n",[52,17040,17041],{"class":54,"line":7379},[52,17042,17043],{"class":73}," outputMin: 0.02,\n",[52,17045,17046],{"class":54,"line":7390},[52,17047,17048],{"class":73}," outputMax: 0.12\n",[52,17050,17051],{"class":54,"line":7395},[52,17052,14941],{"class":73},[52,17054,17055],{"class":54,"line":8717},[52,17056,1224],{"class":58},[52,17058,17059,17061,17063],{"class":54,"line":8722},[52,17060,121],{"class":58},[52,17062,63],{"class":62},[52,17064,77],{"class":58},[43,17066,17068],{"className":360,"code":17067,"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,17069,17070,17084,17090,17098,17106,17114,17118,17124,17133,17142,17151,17160,17169,17178,17187,17194,17198,17202],{"__ignoreMap":48},[52,17071,17072,17074,17076,17078,17080,17082],{"class":54,"line":55},[52,17073,59],{"class":58},[52,17075,63],{"class":371},[52,17077,374],{"class":66},[52,17079,70],{"class":231},[52,17081,319],{"class":73},[52,17083,77],{"class":58},[52,17085,17086,17088],{"class":54,"line":80},[52,17087,83],{"class":58},[52,17089,1171],{"class":371},[52,17091,17092,17094,17096],{"class":54,"line":108},[52,17093,7293],{"class":66},[52,17095,70],{"class":231},[52,17097,16965],{"class":73},[52,17099,17100,17102,17104],{"class":54,"line":118},[52,17101,1176],{"class":66},[52,17103,70],{"class":231},[52,17105,16975],{"class":73},[52,17107,17108,17110,17112],{"class":54,"line":594},[52,17109,1186],{"class":66},[52,17111,70],{"class":231},[52,17113,7307],{"class":73},[52,17115,17116],{"class":54,"line":600},[52,17117,1224],{"class":58},[52,17119,17120,17122],{"class":54,"line":606},[52,17121,83],{"class":58},[52,17123,17004],{"class":371},[52,17125,17126,17129,17131],{"class":54,"line":653},[52,17127,17128],{"class":66}," dotSize",[52,17130,70],{"class":231},[52,17132,14995],{"class":58},[52,17134,17135,17137,17140],{"class":54,"line":662},[52,17136,13427],{"class":58},[52,17138,17139],{"class":73},"'map'",[52,17141,1746],{"class":58},[52,17143,17144,17147,17149],{"class":54,"line":671},[52,17145,17146],{"class":58}," source: ",[52,17148,14644],{"class":73},[52,17150,1746],{"class":58},[52,17152,17153,17156,17158],{"class":54,"line":676},[52,17154,17155],{"class":58}," channel: ",[52,17157,7923],{"class":73},[52,17159,1746],{"class":58},[52,17161,17162,17165,17167],{"class":54,"line":682},[52,17163,17164],{"class":58}," inputMin: ",[52,17166,6387],{"class":371},[52,17168,1746],{"class":58},[52,17170,17171,17174,17176],{"class":54,"line":698},[52,17172,17173],{"class":58}," inputMax: ",[52,17175,6391],{"class":371},[52,17177,1746],{"class":58},[52,17179,17180,17182,17185],{"class":54,"line":707},[52,17181,15019],{"class":58},[52,17183,17184],{"class":371},"0.02",[52,17186,1746],{"class":58},[52,17188,17189,17191],{"class":54,"line":2327},[52,17190,15028],{"class":58},[52,17192,17193],{"class":371},"0.12\n",[52,17195,17196],{"class":54,"line":7369},[52,17197,15053],{"class":58},[52,17199,17200],{"class":54,"line":7379},[52,17201,1224],{"class":58},[52,17203,17204,17206,17208],{"class":54,"line":7390},[52,17205,121],{"class":58},[52,17207,63],{"class":371},[52,17209,77],{"class":58},[43,17211,17213],{"className":419,"code":17212,"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,17214,17215,17229,17235,17243,17251,17259,17263,17269,17277,17285,17293,17301,17309,17317,17325,17331,17335,17339],{"__ignoreMap":48},[52,17216,17217,17219,17221,17223,17225,17227],{"class":54,"line":55},[52,17218,59],{"class":58},[52,17220,63],{"class":371},[52,17222,67],{"class":66},[52,17224,70],{"class":231},[52,17226,319],{"class":73},[52,17228,77],{"class":58},[52,17230,17231,17233],{"class":54,"line":80},[52,17232,83],{"class":58},[52,17234,1171],{"class":371},[52,17236,17237,17239,17241],{"class":54,"line":108},[52,17238,7293],{"class":66},[52,17240,70],{"class":231},[52,17242,16965],{"class":73},[52,17244,17245,17247,17249],{"class":54,"line":118},[52,17246,1176],{"class":66},[52,17248,70],{"class":231},[52,17250,16975],{"class":73},[52,17252,17253,17255,17257],{"class":54,"line":594},[52,17254,1186],{"class":66},[52,17256,70],{"class":231},[52,17258,7307],{"class":73},[52,17260,17261],{"class":54,"line":600},[52,17262,1224],{"class":58},[52,17264,17265,17267],{"class":54,"line":606},[52,17266,83],{"class":58},[52,17268,17004],{"class":371},[52,17270,17271,17273,17275],{"class":54,"line":653},[52,17272,17128],{"class":66},[52,17274,70],{"class":231},[52,17276,14995],{"class":58},[52,17278,17279,17281,17283],{"class":54,"line":662},[52,17280,13427],{"class":58},[52,17282,17139],{"class":73},[52,17284,1746],{"class":58},[52,17286,17287,17289,17291],{"class":54,"line":671},[52,17288,17146],{"class":58},[52,17290,14644],{"class":73},[52,17292,1746],{"class":58},[52,17294,17295,17297,17299],{"class":54,"line":676},[52,17296,17155],{"class":58},[52,17298,7923],{"class":73},[52,17300,1746],{"class":58},[52,17302,17303,17305,17307],{"class":54,"line":682},[52,17304,17164],{"class":58},[52,17306,6387],{"class":371},[52,17308,1746],{"class":58},[52,17310,17311,17313,17315],{"class":54,"line":698},[52,17312,17173],{"class":58},[52,17314,6391],{"class":371},[52,17316,1746],{"class":58},[52,17318,17319,17321,17323],{"class":54,"line":707},[52,17320,15019],{"class":58},[52,17322,17184],{"class":371},[52,17324,1746],{"class":58},[52,17326,17327,17329],{"class":54,"line":2327},[52,17328,15028],{"class":58},[52,17330,17193],{"class":371},[52,17332,17333],{"class":54,"line":7369},[52,17334,15053],{"class":58},[52,17336,17337],{"class":54,"line":7379},[52,17338,1224],{"class":58},[52,17340,17341,17343,17345],{"class":54,"line":7390},[52,17342,121],{"class":58},[52,17344,63],{"class":371},[52,17346,77],{"class":58},[43,17348,17349],{"className":419,"code":17212,"language":420,"meta":48,"style":48},[31,17350,17351,17365,17371,17379,17387,17395,17399,17405,17413,17421,17429,17437,17445,17453,17461,17467,17471,17475],{"__ignoreMap":48},[52,17352,17353,17355,17357,17359,17361,17363],{"class":54,"line":55},[52,17354,59],{"class":58},[52,17356,63],{"class":371},[52,17358,67],{"class":66},[52,17360,70],{"class":231},[52,17362,319],{"class":73},[52,17364,77],{"class":58},[52,17366,17367,17369],{"class":54,"line":80},[52,17368,83],{"class":58},[52,17370,1171],{"class":371},[52,17372,17373,17375,17377],{"class":54,"line":108},[52,17374,7293],{"class":66},[52,17376,70],{"class":231},[52,17378,16965],{"class":73},[52,17380,17381,17383,17385],{"class":54,"line":118},[52,17382,1176],{"class":66},[52,17384,70],{"class":231},[52,17386,16975],{"class":73},[52,17388,17389,17391,17393],{"class":54,"line":594},[52,17390,1186],{"class":66},[52,17392,70],{"class":231},[52,17394,7307],{"class":73},[52,17396,17397],{"class":54,"line":600},[52,17398,1224],{"class":58},[52,17400,17401,17403],{"class":54,"line":606},[52,17402,83],{"class":58},[52,17404,17004],{"class":371},[52,17406,17407,17409,17411],{"class":54,"line":653},[52,17408,17128],{"class":66},[52,17410,70],{"class":231},[52,17412,14995],{"class":58},[52,17414,17415,17417,17419],{"class":54,"line":662},[52,17416,13427],{"class":58},[52,17418,17139],{"class":73},[52,17420,1746],{"class":58},[52,17422,17423,17425,17427],{"class":54,"line":671},[52,17424,17146],{"class":58},[52,17426,14644],{"class":73},[52,17428,1746],{"class":58},[52,17430,17431,17433,17435],{"class":54,"line":676},[52,17432,17155],{"class":58},[52,17434,7923],{"class":73},[52,17436,1746],{"class":58},[52,17438,17439,17441,17443],{"class":54,"line":682},[52,17440,17164],{"class":58},[52,17442,6387],{"class":371},[52,17444,1746],{"class":58},[52,17446,17447,17449,17451],{"class":54,"line":698},[52,17448,17173],{"class":58},[52,17450,6391],{"class":371},[52,17452,1746],{"class":58},[52,17454,17455,17457,17459],{"class":54,"line":707},[52,17456,15019],{"class":58},[52,17458,17184],{"class":371},[52,17460,1746],{"class":58},[52,17462,17463,17465],{"class":54,"line":2327},[52,17464,15028],{"class":58},[52,17466,17193],{"class":371},[52,17468,17469],{"class":54,"line":7369},[52,17470,15053],{"class":58},[52,17472,17473],{"class":54,"line":7379},[52,17474,1224],{"class":58},[52,17476,17477,17479,17481],{"class":54,"line":7390},[52,17478,121],{"class":58},[52,17480,63],{"class":371},[52,17482,77],{"class":58},[43,17484,17486],{"className":222,"code":17485,"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,17487,17488,17502,17506,17510,17518,17527,17541,17545,17549,17558,17562,17567,17575,17584,17593,17602,17611,17619,17626,17630,17634,17638,17642],{"__ignoreMap":48},[52,17489,17490,17492,17494,17496,17498,17500],{"class":54,"line":55},[52,17491,1721],{"class":231},[52,17493,1724],{"class":371},[52,17495,1727],{"class":231},[52,17497,1730],{"class":231},[52,17499,1733],{"class":66},[52,17501,1736],{"class":58},[52,17503,17504],{"class":54,"line":80},[52,17505,1751],{"class":58},[52,17507,17508],{"class":54,"line":108},[52,17509,13422],{"class":58},[52,17511,17512,17514,17516],{"class":54,"line":118},[52,17513,13427],{"class":58},[52,17515,2126],{"class":73},[52,17517,1746],{"class":58},[52,17519,17520,17523,17525],{"class":54,"line":594},[52,17521,17522],{"class":58}," id: ",[52,17524,14644],{"class":73},[52,17526,1746],{"class":58},[52,17528,17529,17532,17535,17537,17539],{"class":54,"line":600},[52,17530,17531],{"class":58}," props: { colorA: ",[52,17533,17534],{"class":73},"'#000000'",[52,17536,7889],{"class":58},[52,17538,7886],{"class":73},[52,17540,13446],{"class":58},[52,17542,17543],{"class":54,"line":606},[52,17544,13455],{"class":58},[52,17546,17547],{"class":54,"line":653},[52,17548,13422],{"class":58},[52,17550,17551,17553,17556],{"class":54,"line":662},[52,17552,13427],{"class":58},[52,17554,17555],{"class":73},"'DotGrid'",[52,17557,1746],{"class":58},[52,17559,17560],{"class":54,"line":671},[52,17561,13436],{"class":58},[52,17563,17564],{"class":54,"line":676},[52,17565,17566],{"class":58}," dotSize: {\n",[52,17568,17569,17571,17573],{"class":54,"line":682},[52,17570,15329],{"class":58},[52,17572,17139],{"class":73},[52,17574,1746],{"class":58},[52,17576,17577,17580,17582],{"class":54,"line":698},[52,17578,17579],{"class":58}," source: ",[52,17581,14644],{"class":73},[52,17583,1746],{"class":58},[52,17585,17586,17589,17591],{"class":54,"line":707},[52,17587,17588],{"class":58}," channel: ",[52,17590,7923],{"class":73},[52,17592,1746],{"class":58},[52,17594,17595,17598,17600],{"class":54,"line":2327},[52,17596,17597],{"class":58}," inputMin: ",[52,17599,6387],{"class":371},[52,17601,1746],{"class":58},[52,17603,17604,17607,17609],{"class":54,"line":7369},[52,17605,17606],{"class":58}," inputMax: ",[52,17608,6391],{"class":371},[52,17610,1746],{"class":58},[52,17612,17613,17615,17617],{"class":54,"line":7379},[52,17614,15347],{"class":58},[52,17616,6387],{"class":371},[52,17618,1746],{"class":58},[52,17620,17621,17623],{"class":54,"line":7390},[52,17622,15356],{"class":58},[52,17624,17625],{"class":371},"1\n",[52,17627,17628],{"class":54,"line":7395},[52,17629,15381],{"class":58},[52,17631,17632],{"class":54,"line":8717},[52,17633,3333],{"class":58},[52,17635,17636],{"class":54,"line":8722},[52,17637,3106],{"class":58},[52,17639,17640],{"class":54,"line":9794},[52,17641,1773],{"class":58},[52,17643,17644],{"class":54,"line":9801},[52,17645,1778],{"class":58},[19,17647],{":preset":17648},"{\"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,17650,17651],{},[151,17652,15405],{},[1780,17654,17655,17667],{},[1783,17656,17657],{},[1786,17658,17659,17661,17663,17665],{},[1789,17660,12844],{},[1789,17662,12847],{},[1789,17664,12850],{},[1789,17666,1794],{},[1796,17668,17669,17687,17711,17727,17743,17758,17773],{},[1786,17670,17671,17676,17680,17682],{},[1801,17672,17673],{},[31,17674,17675],{},"source",[1801,17677,17678],{},[31,17679,6775],{},[1801,17681,15436],{},[1801,17683,1825,17684,17686],{},[31,17685,6771],{}," of the source component to sample from.",[1786,17688,17689,17694,17698,17700],{},[1801,17690,17691],{},[31,17692,17693],{},"channel",[1801,17695,17696],{},[31,17697,6775],{},[1801,17699,15436],{},[1801,17701,17702,17703,1881,17705,1881,17707,1881,17709,7204],{},"Which channel to extract. ",[31,17704,7224],{},[31,17706,7232],{},[31,17708,7240],{},[31,17710,7248],{},[1786,17712,17713,17718,17722,17724],{},[1801,17714,17715],{},[31,17716,17717],{},"inputMin",[1801,17719,17720],{},[31,17721,12866],{},[1801,17723,15436],{},[1801,17725,17726],{},"Source values at or below this are treated as 0.",[1786,17728,17729,17734,17738,17740],{},[1801,17730,17731],{},[31,17732,17733],{},"inputMax",[1801,17735,17736],{},[31,17737,12866],{},[1801,17739,15436],{},[1801,17741,17742],{},"Source values at or above this are treated as 1.",[1786,17744,17745,17749,17753,17755],{},[1801,17746,17747],{},[31,17748,15453],{},[1801,17750,17751],{},[31,17752,12866],{},[1801,17754,15436],{},[1801,17756,17757],{},"Output value when input = 0.",[1786,17759,17760,17764,17768,17770],{},[1801,17761,17762],{},[31,17763,15469],{},[1801,17765,17766],{},[31,17767,12866],{},[1801,17769,15436],{},[1801,17771,17772],{},"Output value when input = 1.",[1786,17774,17775,17779,17783,17787],{},[1801,17776,17777],{},[31,17778,16848],{},[1801,17780,17781],{},[31,17782,12866],{},[1801,17784,17785],{},[31,17786,6387],{},[1801,17788,17789,17790,1536,17792,7204],{},"Power curve applied after normalization. ",[31,17791,12876],{},[31,17793,12879],{},[15,17795,1825,17796,17798],{},[31,17797,16915],{}," 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,17800,17802],{"id":17801},"combining-dynamic-props","Combining dynamic props",[15,17804,17805],{},"Multiple dynamic props can be active on the same component — one per prop:",[217,17807,17808,17914,18041,18164],{":tabs":219},[43,17809,17811],{"className":45,"code":17810,"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,17812,17813,17827,17850,17857,17866,17875,17879,17883,17888,17893,17898,17902,17906],{"__ignoreMap":48},[52,17814,17815,17817,17819,17821,17823,17825],{"class":54,"line":55},[52,17816,59],{"class":58},[52,17818,63],{"class":62},[52,17820,67],{"class":66},[52,17822,70],{"class":58},[52,17824,319],{"class":73},[52,17826,77],{"class":58},[52,17828,17829,17831,17833,17836,17838,17840,17843,17845,17848],{"class":54,"line":80},[52,17830,83],{"class":58},[52,17832,86],{"class":62},[52,17834,17835],{"class":66}," color-a",[52,17837,70],{"class":58},[52,17839,94],{"class":73},[52,17841,17842],{"class":66}," color-b",[52,17844,70],{"class":58},[52,17846,17847],{"class":73},"\"#4f46e5\"",[52,17849,105],{"class":58},[52,17851,17852,17854],{"class":54,"line":108},[52,17853,83],{"class":58},[52,17855,17856],{"class":62},"LensFlare\n",[52,17858,17859,17861,17863],{"class":54,"line":118},[52,17860,15613],{"class":66},[52,17862,70],{"class":58},[52,17864,17865],{"class":73},"\"{ type: 'mouse-position', smoothing: 0.1 }\"\n",[52,17867,17868,17871,17873],{"class":54,"line":594},[52,17869,17870],{"class":66}," :intensity",[52,17872,70],{"class":58},[52,17874,14906],{"class":73},[52,17876,17877],{"class":54,"line":600},[52,17878,14911],{"class":73},[52,17880,17881],{"class":54,"line":606},[52,17882,14916],{"class":73},[52,17884,17885],{"class":54,"line":653},[52,17886,17887],{"class":73}," outputMin: 0.4,\n",[52,17889,17890],{"class":54,"line":662},[52,17891,17892],{"class":73}," outputMax: 1.0,\n",[52,17894,17895],{"class":54,"line":671},[52,17896,17897],{"class":73}," speed: 0.6\n",[52,17899,17900],{"class":54,"line":676},[52,17901,14941],{"class":73},[52,17903,17904],{"class":54,"line":682},[52,17905,1224],{"class":58},[52,17907,17908,17910,17912],{"class":54,"line":698},[52,17909,121],{"class":58},[52,17911,63],{"class":62},[52,17913,77],{"class":58},[43,17915,17917],{"className":360,"code":17916,"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,17918,17919,17933,17953,17959,17977,17986,17994,18002,18010,18018,18025,18029,18033],{"__ignoreMap":48},[52,17920,17921,17923,17925,17927,17929,17931],{"class":54,"line":55},[52,17922,59],{"class":58},[52,17924,63],{"class":371},[52,17926,374],{"class":66},[52,17928,70],{"class":231},[52,17930,319],{"class":73},[52,17932,77],{"class":58},[52,17934,17935,17937,17939,17941,17943,17945,17947,17949,17951],{"class":54,"line":80},[52,17936,83],{"class":58},[52,17938,86],{"class":371},[52,17940,89],{"class":66},[52,17942,70],{"class":231},[52,17944,94],{"class":73},[52,17946,97],{"class":66},[52,17948,70],{"class":231},[52,17950,17847],{"class":73},[52,17952,105],{"class":58},[52,17954,17955,17957],{"class":54,"line":108},[52,17956,83],{"class":58},[52,17958,17856],{"class":371},[52,17960,17961,17963,17965,17968,17970,17973,17975],{"class":54,"line":118},[52,17962,15699],{"class":66},[52,17964,70],{"class":231},[52,17966,17967],{"class":58},"{{ type: ",[52,17969,15710],{"class":73},[52,17971,17972],{"class":58},", smoothing: ",[52,17974,13207],{"class":371},[52,17976,2466],{"class":58},[52,17978,17979,17982,17984],{"class":54,"line":594},[52,17980,17981],{"class":66}," intensity",[52,17983,70],{"class":231},[52,17985,14995],{"class":58},[52,17987,17988,17990,17992],{"class":54,"line":600},[52,17989,13427],{"class":58},[52,17991,15002],{"class":73},[52,17993,1746],{"class":58},[52,17995,17996,17998,18000],{"class":54,"line":606},[52,17997,15009],{"class":58},[52,17999,15012],{"class":73},[52,18001,1746],{"class":58},[52,18003,18004,18006,18008],{"class":54,"line":653},[52,18005,15019],{"class":58},[52,18007,5963],{"class":371},[52,18009,1746],{"class":58},[52,18011,18012,18014,18016],{"class":54,"line":662},[52,18013,15028],{"class":58},[52,18015,15494],{"class":371},[52,18017,1746],{"class":58},[52,18019,18020,18022],{"class":54,"line":671},[52,18021,15037],{"class":58},[52,18023,18024],{"class":371},"0.6\n",[52,18026,18027],{"class":54,"line":676},[52,18028,15053],{"class":58},[52,18030,18031],{"class":54,"line":682},[52,18032,1224],{"class":58},[52,18034,18035,18037,18039],{"class":54,"line":698},[52,18036,121],{"class":58},[52,18038,63],{"class":371},[52,18040,77],{"class":58},[43,18042,18044],{"className":419,"code":18043,"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,18045,18046,18060,18080,18086,18102,18110,18118,18126,18134,18142,18148,18152,18156],{"__ignoreMap":48},[52,18047,18048,18050,18052,18054,18056,18058],{"class":54,"line":55},[52,18049,59],{"class":58},[52,18051,63],{"class":371},[52,18053,67],{"class":66},[52,18055,70],{"class":231},[52,18057,319],{"class":73},[52,18059,77],{"class":58},[52,18061,18062,18064,18066,18068,18070,18072,18074,18076,18078],{"class":54,"line":80},[52,18063,83],{"class":58},[52,18065,86],{"class":371},[52,18067,89],{"class":66},[52,18069,70],{"class":231},[52,18071,94],{"class":73},[52,18073,97],{"class":66},[52,18075,70],{"class":231},[52,18077,17847],{"class":73},[52,18079,105],{"class":58},[52,18081,18082,18084],{"class":54,"line":108},[52,18083,83],{"class":58},[52,18085,17856],{"class":371},[52,18087,18088,18090,18092,18094,18096,18098,18100],{"class":54,"line":118},[52,18089,15699],{"class":66},[52,18091,70],{"class":231},[52,18093,17967],{"class":58},[52,18095,15710],{"class":73},[52,18097,17972],{"class":58},[52,18099,13207],{"class":371},[52,18101,2466],{"class":58},[52,18103,18104,18106,18108],{"class":54,"line":594},[52,18105,17981],{"class":66},[52,18107,70],{"class":231},[52,18109,14995],{"class":58},[52,18111,18112,18114,18116],{"class":54,"line":600},[52,18113,13427],{"class":58},[52,18115,15002],{"class":73},[52,18117,1746],{"class":58},[52,18119,18120,18122,18124],{"class":54,"line":606},[52,18121,15009],{"class":58},[52,18123,15012],{"class":73},[52,18125,1746],{"class":58},[52,18127,18128,18130,18132],{"class":54,"line":653},[52,18129,15019],{"class":58},[52,18131,5963],{"class":371},[52,18133,1746],{"class":58},[52,18135,18136,18138,18140],{"class":54,"line":662},[52,18137,15028],{"class":58},[52,18139,15494],{"class":371},[52,18141,1746],{"class":58},[52,18143,18144,18146],{"class":54,"line":671},[52,18145,15037],{"class":58},[52,18147,18024],{"class":371},[52,18149,18150],{"class":54,"line":676},[52,18151,15053],{"class":58},[52,18153,18154],{"class":54,"line":682},[52,18155,1224],{"class":58},[52,18157,18158,18160,18162],{"class":54,"line":698},[52,18159,121],{"class":58},[52,18161,63],{"class":371},[52,18163,77],{"class":58},[43,18165,18166],{"className":419,"code":18043,"language":420,"meta":48,"style":48},[31,18167,18168,18182,18202,18208,18224,18232,18240,18248,18256,18264,18270,18274,18278],{"__ignoreMap":48},[52,18169,18170,18172,18174,18176,18178,18180],{"class":54,"line":55},[52,18171,59],{"class":58},[52,18173,63],{"class":371},[52,18175,67],{"class":66},[52,18177,70],{"class":231},[52,18179,319],{"class":73},[52,18181,77],{"class":58},[52,18183,18184,18186,18188,18190,18192,18194,18196,18198,18200],{"class":54,"line":80},[52,18185,83],{"class":58},[52,18187,86],{"class":371},[52,18189,89],{"class":66},[52,18191,70],{"class":231},[52,18193,94],{"class":73},[52,18195,97],{"class":66},[52,18197,70],{"class":231},[52,18199,17847],{"class":73},[52,18201,105],{"class":58},[52,18203,18204,18206],{"class":54,"line":108},[52,18205,83],{"class":58},[52,18207,17856],{"class":371},[52,18209,18210,18212,18214,18216,18218,18220,18222],{"class":54,"line":118},[52,18211,15699],{"class":66},[52,18213,70],{"class":231},[52,18215,17967],{"class":58},[52,18217,15710],{"class":73},[52,18219,17972],{"class":58},[52,18221,13207],{"class":371},[52,18223,2466],{"class":58},[52,18225,18226,18228,18230],{"class":54,"line":594},[52,18227,17981],{"class":66},[52,18229,70],{"class":231},[52,18231,14995],{"class":58},[52,18233,18234,18236,18238],{"class":54,"line":600},[52,18235,13427],{"class":58},[52,18237,15002],{"class":73},[52,18239,1746],{"class":58},[52,18241,18242,18244,18246],{"class":54,"line":606},[52,18243,15009],{"class":58},[52,18245,15012],{"class":73},[52,18247,1746],{"class":58},[52,18249,18250,18252,18254],{"class":54,"line":653},[52,18251,15019],{"class":58},[52,18253,5963],{"class":371},[52,18255,1746],{"class":58},[52,18257,18258,18260,18262],{"class":54,"line":662},[52,18259,15028],{"class":58},[52,18261,15494],{"class":371},[52,18263,1746],{"class":58},[52,18265,18266,18268],{"class":54,"line":671},[52,18267,15037],{"class":58},[52,18269,18024],{"class":371},[52,18271,18272],{"class":54,"line":676},[52,18273,15053],{"class":58},[52,18275,18276],{"class":54,"line":682},[52,18277,1224],{"class":58},[52,18279,18280,18282,18284],{"class":54,"line":698},[52,18281,121],{"class":58},[52,18283,63],{"class":371},[52,18285,77],{"class":58},[23,18287,18289],{"id":18288},"updating-at-runtime-js-api","Updating at runtime (JS API)",[15,18291,18292,18293,18296],{},"In the JavaScript API, ",[31,18294,18295],{},"shader.update()"," also accepts dynamic prop configs — you can switch between a static value and a dynamic prop at any point:",[43,18298,18300],{"className":222,"code":18299,"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,18301,18302,18307,18321,18325,18342,18346,18350,18354,18359,18371,18376,18385,18394,18403,18411,18415,18419,18423,18428],{"__ignoreMap":48},[52,18303,18304],{"class":54,"line":55},[52,18305,18306],{"class":559},"// Start with a static value\n",[52,18308,18309,18311,18313,18315,18317,18319],{"class":54,"line":80},[52,18310,1721],{"class":231},[52,18312,1724],{"class":371},[52,18314,1727],{"class":231},[52,18316,1730],{"class":231},[52,18318,1733],{"class":66},[52,18320,1736],{"class":58},[52,18322,18323],{"class":54,"line":108},[52,18324,1751],{"class":58},[52,18326,18327,18329,18331,18333,18336,18338,18340],{"class":54,"line":118},[52,18328,1756],{"class":58},[52,18330,2869],{"class":73},[52,18332,2872],{"class":58},[52,18334,18335],{"class":73},"'c'",[52,18337,5254],{"class":58},[52,18339,5963],{"class":371},[52,18341,1768],{"class":58},[52,18343,18344],{"class":54,"line":594},[52,18345,1773],{"class":58},[52,18347,18348],{"class":54,"line":600},[52,18349,1778],{"class":58},[52,18351,18352],{"class":54,"line":606},[52,18353,597],{"emptyLinePlaceholder":171},[52,18355,18356],{"class":54,"line":653},[52,18357,18358],{"class":559},"// Later: switch to animated\n",[52,18360,18361,18363,18365,18367,18369],{"class":54,"line":662},[52,18362,9322],{"class":58},[52,18364,9325],{"class":66},[52,18366,2289],{"class":58},[52,18368,18335],{"class":73},[52,18370,9684],{"class":58},[52,18372,18373],{"class":54,"line":671},[52,18374,18375],{"class":58}," radius: {\n",[52,18377,18378,18381,18383],{"class":54,"line":676},[52,18379,18380],{"class":58}," type: ",[52,18382,15002],{"class":73},[52,18384,1746],{"class":58},[52,18386,18387,18390,18392],{"class":54,"line":682},[52,18388,18389],{"class":58}," mode: ",[52,18391,15012],{"class":73},[52,18393,1746],{"class":58},[52,18395,18396,18399,18401],{"class":54,"line":698},[52,18397,18398],{"class":58}," outputMin: ",[52,18400,13177],{"class":371},[52,18402,1746],{"class":58},[52,18404,18405,18408],{"class":54,"line":707},[52,18406,18407],{"class":58}," outputMax: ",[52,18409,18410],{"class":371},"0.7\n",[52,18412,18413],{"class":54,"line":2327},[52,18414,2919],{"class":58},[52,18416,18417],{"class":54,"line":7369},[52,18418,1778],{"class":58},[52,18420,18421],{"class":54,"line":7379},[52,18422,597],{"emptyLinePlaceholder":171},[52,18424,18425],{"class":54,"line":7390},[52,18426,18427],{"class":559},"// Later: switch back to static\n",[52,18429,18430,18432,18434,18436,18438,18441,18443],{"class":54,"line":7395},[52,18431,9322],{"class":58},[52,18433,9325],{"class":66},[52,18435,2289],{"class":58},[52,18437,18335],{"class":73},[52,18439,18440],{"class":58},", { radius: ",[52,18442,5963],{"class":371},[52,18444,9337],{"class":58},[156,18446,12710],{},{"title":48,"searchDepth":80,"depth":80,"links":18448},[18449,18450,18451,18452,18453,18454],{"id":14756,"depth":80,"text":14756},{"id":15548,"depth":80,"text":15548},{"id":16286,"depth":80,"text":16286},{"id":16915,"depth":80,"text":16915},{"id":17801,"depth":80,"text":17802},{"id":18288,"depth":80,"text":18289},"Animate and respond to mouse input declaratively without writing animation code","sliders",{},{"title":14795,"description":18455},"docs/guide/7.dynamic-props","Txf_TAicfFNhiYp5quhUV_zU801gbrxsnITnSn9GBEs",{"id":18462,"title":18463,"body":18464,"category":7949,"description":20801,"exclude":167,"extension":168,"forceFramework":167,"icon":20802,"meta":20803,"navigation":171,"path":20804,"seo":20805,"stem":20806,"__hash__":20807},"guide/docs/guide/8.shape-effects.md","Shape / SDF Effects",{"type":8,"value":18465,"toc":20773},[18466,18469,18490,18493,18497,18513,19157,19159,19163,19169,19172,19205,19233,19235,19242,19245,19312,19357,19359,19366,19369,19454,19508,19510,19516,19519,19608,19658,19660,19667,19670,19759,19809,19811,19818,19821,19873,19908,19910,19917,19920,20007,20058,20060,20067,20070,20153,20202,20204,20211,20214,20287,20330,20332,20339,20342,20426,20477,20479,20486,20489,20573,20625,20627,20631,20634,20652,20771],[11,18467,18463],{"id":18468},"shape-sdf-effects",[15,18470,18471,18472,1881,18475,18478,18479,18482,18483,18486,18487,18489],{},"Several components — such as ",[151,18473,18474],{},"Glass",[151,18476,18477],{},"Neon",", and ",[151,18480,18481],{},"Emboss"," — are driven by a ",[1833,18484,18485],{},"shape",". These effects accept a ",[31,18488,18485],{}," 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,18491,18492],{},"The result is a stunning physically based effect that wraps around a particular shape, including your own SVG logo or icon.",[23,18494,18496],{"id":18495},"configuration","Configuration",[15,18498,1825,18499,18501,18502,18505,18506,16248,18509,18512],{},[31,18500,18485],{}," prop accepts a configuration object. The only required key is ",[31,18503,18504],{},"type",", which selects one of the built-in analytical shapes, like ",[31,18507,18508],{},"circleSDF",[31,18510,18511],{},"starSDF",". Everything else is shape-specific and optional (sensible defaults apply).",[217,18514,18515,18589,18734,18858,18982],{":tabs":1543},[43,18516,18518],{"className":45,"code":18517,"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,18519,18520,18525,18541,18545,18550,18565,18569,18574],{"__ignoreMap":48},[52,18521,18522],{"class":54,"line":55},[52,18523,18524],{"class":559},"\u003C!-- Circle (default) -->\n",[52,18526,18527,18529,18531,18534,18536,18539],{"class":54,"line":80},[52,18528,59],{"class":58},[52,18530,18474],{"class":62},[52,18532,18533],{"class":66}," :shape",[52,18535,70],{"class":58},[52,18537,18538],{"class":73},"'{ type: \"circleSDF\", radius: 0.35 }'",[52,18540,105],{"class":58},[52,18542,18543],{"class":54,"line":108},[52,18544,597],{"emptyLinePlaceholder":171},[52,18546,18547],{"class":54,"line":118},[52,18548,18549],{"class":559},"\u003C!-- Six-pointed star -->\n",[52,18551,18552,18554,18556,18558,18560,18563],{"class":54,"line":594},[52,18553,59],{"class":58},[52,18555,18477],{"class":62},[52,18557,18533],{"class":66},[52,18559,70],{"class":58},[52,18561,18562],{"class":73},"'{ type: \"starSDF\", radius: 0.35, sides: 6, innerRatio: 0.45 }'",[52,18564,105],{"class":58},[52,18566,18567],{"class":54,"line":600},[52,18568,597],{"emptyLinePlaceholder":171},[52,18570,18571],{"class":54,"line":606},[52,18572,18573],{"class":559},"\u003C!-- Rounded rectangle -->\n",[52,18575,18576,18578,18580,18582,18584,18587],{"class":54,"line":653},[52,18577,59],{"class":58},[52,18579,18481],{"class":62},[52,18581,18533],{"class":66},[52,18583,70],{"class":58},[52,18585,18586],{"class":73},"'{ type: \"roundedRectSDF\", width: 0.4, height: 0.25, rounding: 0.06 }'",[52,18588,105],{"class":58},[43,18590,18592],{"className":360,"code":18591,"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,18593,18594,18599,18634,18638,18643,18684,18688,18693],{"__ignoreMap":48},[52,18595,18596],{"class":54,"line":55},[52,18597,18598],{"class":559},"// Circle (default)\n",[52,18600,18601,18603,18605,18608,18610,18612,18615,18617,18620,18623,18626,18628,18631],{"class":54,"line":80},[52,18602,59],{"class":58},[52,18604,18474],{"class":371},[52,18606,18607],{"class":66}," shape",[52,18609,70],{"class":231},[52,18611,723],{"class":58},[52,18613,18614],{"class":371},"JSON",[52,18616,7204],{"class":58},[52,18618,18619],{"class":66},"stringify",[52,18621,18622],{"class":58},"({ type: ",[52,18624,18625],{"class":73},"\"circleSDF\"",[52,18627,4278],{"class":58},[52,18629,18630],{"class":371},"0.35",[52,18632,18633],{"class":58}," })} />\n",[52,18635,18636],{"class":54,"line":108},[52,18637,597],{"emptyLinePlaceholder":171},[52,18639,18640],{"class":54,"line":118},[52,18641,18642],{"class":559},"// Six-pointed star\n",[52,18644,18645,18647,18649,18651,18653,18655,18657,18659,18661,18663,18666,18668,18670,18673,18676,18679,18682],{"class":54,"line":594},[52,18646,59],{"class":58},[52,18648,18477],{"class":371},[52,18650,18607],{"class":66},[52,18652,70],{"class":231},[52,18654,723],{"class":58},[52,18656,18614],{"class":371},[52,18658,7204],{"class":58},[52,18660,18619],{"class":66},[52,18662,18622],{"class":58},[52,18664,18665],{"class":73},"\"starSDF\"",[52,18667,4278],{"class":58},[52,18669,18630],{"class":371},[52,18671,18672],{"class":58},", sides: ",[52,18674,18675],{"class":371},"6",[52,18677,18678],{"class":58},", innerRatio: ",[52,18680,18681],{"class":371},"0.45",[52,18683,18633],{"class":58},[52,18685,18686],{"class":54,"line":600},[52,18687,597],{"emptyLinePlaceholder":171},[52,18689,18690],{"class":54,"line":606},[52,18691,18692],{"class":559},"// Rounded rectangle\n",[52,18694,18695,18697,18699,18701,18703,18705,18707,18709,18711,18713,18716,18719,18721,18723,18726,18729,18732],{"class":54,"line":653},[52,18696,59],{"class":58},[52,18698,18481],{"class":371},[52,18700,18607],{"class":66},[52,18702,70],{"class":231},[52,18704,723],{"class":58},[52,18706,18614],{"class":371},[52,18708,7204],{"class":58},[52,18710,18619],{"class":66},[52,18712,18622],{"class":58},[52,18714,18715],{"class":73},"\"roundedRectSDF\"",[52,18717,18718],{"class":58},", width: ",[52,18720,5963],{"class":371},[52,18722,791],{"class":58},[52,18724,18725],{"class":371},"0.25",[52,18727,18728],{"class":58},", rounding: ",[52,18730,18731],{"class":371},"0.06",[52,18733,18633],{"class":58},[43,18735,18736],{"className":419,"code":18591,"language":420,"meta":48,"style":48},[31,18737,18738,18742,18770,18774,18778,18814,18818,18822],{"__ignoreMap":48},[52,18739,18740],{"class":54,"line":55},[52,18741,18598],{"class":559},[52,18743,18744,18746,18748,18750,18752,18754,18756,18758,18760,18762,18764,18766,18768],{"class":54,"line":80},[52,18745,59],{"class":58},[52,18747,18474],{"class":371},[52,18749,18607],{"class":66},[52,18751,70],{"class":231},[52,18753,723],{"class":58},[52,18755,18614],{"class":371},[52,18757,7204],{"class":58},[52,18759,18619],{"class":66},[52,18761,18622],{"class":58},[52,18763,18625],{"class":73},[52,18765,4278],{"class":58},[52,18767,18630],{"class":371},[52,18769,18633],{"class":58},[52,18771,18772],{"class":54,"line":108},[52,18773,597],{"emptyLinePlaceholder":171},[52,18775,18776],{"class":54,"line":118},[52,18777,18642],{"class":559},[52,18779,18780,18782,18784,18786,18788,18790,18792,18794,18796,18798,18800,18802,18804,18806,18808,18810,18812],{"class":54,"line":594},[52,18781,59],{"class":58},[52,18783,18477],{"class":371},[52,18785,18607],{"class":66},[52,18787,70],{"class":231},[52,18789,723],{"class":58},[52,18791,18614],{"class":371},[52,18793,7204],{"class":58},[52,18795,18619],{"class":66},[52,18797,18622],{"class":58},[52,18799,18665],{"class":73},[52,18801,4278],{"class":58},[52,18803,18630],{"class":371},[52,18805,18672],{"class":58},[52,18807,18675],{"class":371},[52,18809,18678],{"class":58},[52,18811,18681],{"class":371},[52,18813,18633],{"class":58},[52,18815,18816],{"class":54,"line":600},[52,18817,597],{"emptyLinePlaceholder":171},[52,18819,18820],{"class":54,"line":606},[52,18821,18692],{"class":559},[52,18823,18824,18826,18828,18830,18832,18834,18836,18838,18840,18842,18844,18846,18848,18850,18852,18854,18856],{"class":54,"line":653},[52,18825,59],{"class":58},[52,18827,18481],{"class":371},[52,18829,18607],{"class":66},[52,18831,70],{"class":231},[52,18833,723],{"class":58},[52,18835,18614],{"class":371},[52,18837,7204],{"class":58},[52,18839,18619],{"class":66},[52,18841,18622],{"class":58},[52,18843,18715],{"class":73},[52,18845,18718],{"class":58},[52,18847,5963],{"class":371},[52,18849,791],{"class":58},[52,18851,18725],{"class":371},[52,18853,18728],{"class":58},[52,18855,18731],{"class":371},[52,18857,18633],{"class":58},[43,18859,18860],{"className":419,"code":18591,"language":420,"meta":48,"style":48},[31,18861,18862,18866,18894,18898,18902,18938,18942,18946],{"__ignoreMap":48},[52,18863,18864],{"class":54,"line":55},[52,18865,18598],{"class":559},[52,18867,18868,18870,18872,18874,18876,18878,18880,18882,18884,18886,18888,18890,18892],{"class":54,"line":80},[52,18869,59],{"class":58},[52,18871,18474],{"class":371},[52,18873,18607],{"class":66},[52,18875,70],{"class":231},[52,18877,723],{"class":58},[52,18879,18614],{"class":371},[52,18881,7204],{"class":58},[52,18883,18619],{"class":66},[52,18885,18622],{"class":58},[52,18887,18625],{"class":73},[52,18889,4278],{"class":58},[52,18891,18630],{"class":371},[52,18893,18633],{"class":58},[52,18895,18896],{"class":54,"line":108},[52,18897,597],{"emptyLinePlaceholder":171},[52,18899,18900],{"class":54,"line":118},[52,18901,18642],{"class":559},[52,18903,18904,18906,18908,18910,18912,18914,18916,18918,18920,18922,18924,18926,18928,18930,18932,18934,18936],{"class":54,"line":594},[52,18905,59],{"class":58},[52,18907,18477],{"class":371},[52,18909,18607],{"class":66},[52,18911,70],{"class":231},[52,18913,723],{"class":58},[52,18915,18614],{"class":371},[52,18917,7204],{"class":58},[52,18919,18619],{"class":66},[52,18921,18622],{"class":58},[52,18923,18665],{"class":73},[52,18925,4278],{"class":58},[52,18927,18630],{"class":371},[52,18929,18672],{"class":58},[52,18931,18675],{"class":371},[52,18933,18678],{"class":58},[52,18935,18681],{"class":371},[52,18937,18633],{"class":58},[52,18939,18940],{"class":54,"line":600},[52,18941,597],{"emptyLinePlaceholder":171},[52,18943,18944],{"class":54,"line":606},[52,18945,18692],{"class":559},[52,18947,18948,18950,18952,18954,18956,18958,18960,18962,18964,18966,18968,18970,18972,18974,18976,18978,18980],{"class":54,"line":653},[52,18949,59],{"class":58},[52,18951,18481],{"class":371},[52,18953,18607],{"class":66},[52,18955,70],{"class":231},[52,18957,723],{"class":58},[52,18959,18614],{"class":371},[52,18961,7204],{"class":58},[52,18963,18619],{"class":66},[52,18965,18622],{"class":58},[52,18967,18715],{"class":73},[52,18969,18718],{"class":58},[52,18971,5963],{"class":371},[52,18973,791],{"class":58},[52,18975,18725],{"class":371},[52,18977,18728],{"class":58},[52,18979,18731],{"class":371},[52,18981,18633],{"class":58},[43,18983,18985],{"className":222,"code":18984,"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,18986,18987,18991,19005,19009,19029,19033,19037,19041,19045,19059,19063,19089,19093,19097,19101,19105,19119,19123,19149,19153],{"__ignoreMap":48},[52,18988,18989],{"class":54,"line":55},[52,18990,18598],{"class":559},[52,18992,18993,18995,18997,18999,19001,19003],{"class":54,"line":80},[52,18994,1721],{"class":231},[52,18996,1724],{"class":371},[52,18998,1727],{"class":231},[52,19000,1730],{"class":231},[52,19002,1733],{"class":66},[52,19004,1736],{"class":58},[52,19006,19007],{"class":54,"line":108},[52,19008,1751],{"class":58},[52,19010,19011,19013,19016,19019,19022,19024,19026],{"class":54,"line":118},[52,19012,1756],{"class":58},[52,19014,19015],{"class":73},"'Glass'",[52,19017,19018],{"class":58},", props: { shape: { type: ",[52,19020,19021],{"class":73},"'circleSDF'",[52,19023,4278],{"class":58},[52,19025,18630],{"class":371},[52,19027,19028],{"class":58}," } } }\n",[52,19030,19031],{"class":54,"line":594},[52,19032,1773],{"class":58},[52,19034,19035],{"class":54,"line":600},[52,19036,1778],{"class":58},[52,19038,19039],{"class":54,"line":606},[52,19040,597],{"emptyLinePlaceholder":171},[52,19042,19043],{"class":54,"line":653},[52,19044,18642],{"class":559},[52,19046,19047,19049,19051,19053,19055,19057],{"class":54,"line":662},[52,19048,1721],{"class":231},[52,19050,1724],{"class":371},[52,19052,1727],{"class":231},[52,19054,1730],{"class":231},[52,19056,1733],{"class":66},[52,19058,1736],{"class":58},[52,19060,19061],{"class":54,"line":671},[52,19062,1751],{"class":58},[52,19064,19065,19067,19070,19072,19075,19077,19079,19081,19083,19085,19087],{"class":54,"line":676},[52,19066,1756],{"class":58},[52,19068,19069],{"class":73},"'Neon'",[52,19071,19018],{"class":58},[52,19073,19074],{"class":73},"'starSDF'",[52,19076,4278],{"class":58},[52,19078,18630],{"class":371},[52,19080,18672],{"class":58},[52,19082,18675],{"class":371},[52,19084,18678],{"class":58},[52,19086,18681],{"class":371},[52,19088,19028],{"class":58},[52,19090,19091],{"class":54,"line":682},[52,19092,1773],{"class":58},[52,19094,19095],{"class":54,"line":698},[52,19096,1778],{"class":58},[52,19098,19099],{"class":54,"line":707},[52,19100,597],{"emptyLinePlaceholder":171},[52,19102,19103],{"class":54,"line":2327},[52,19104,18692],{"class":559},[52,19106,19107,19109,19111,19113,19115,19117],{"class":54,"line":7369},[52,19108,1721],{"class":231},[52,19110,1724],{"class":371},[52,19112,1727],{"class":231},[52,19114,1730],{"class":231},[52,19116,1733],{"class":66},[52,19118,1736],{"class":58},[52,19120,19121],{"class":54,"line":7379},[52,19122,1751],{"class":58},[52,19124,19125,19127,19130,19132,19135,19137,19139,19141,19143,19145,19147],{"class":54,"line":7390},[52,19126,1756],{"class":58},[52,19128,19129],{"class":73},"'Emboss'",[52,19131,19018],{"class":58},[52,19133,19134],{"class":73},"'roundedRectSDF'",[52,19136,18718],{"class":58},[52,19138,5963],{"class":371},[52,19140,791],{"class":58},[52,19142,18725],{"class":371},[52,19144,18728],{"class":58},[52,19146,18731],{"class":371},[52,19148,19028],{"class":58},[52,19150,19151],{"class":54,"line":7395},[52,19152,1773],{"class":58},[52,19154,19155],{"class":54,"line":8717},[52,19156,1778],{"class":58},[3209,19158],{},[23,19160,19162],{"id":19161},"built-in-shapes","Built-in shapes",[2925,19164,19166,19167],{"id":19165},"circle-circlesdf","Circle — ",[31,19168,18508],{},[15,19170,19171],{},"A perfect circle. The default shape for all shape effects.",[1780,19173,19174,19186],{},[1783,19175,19176],{},[1786,19177,19178,19180,19182,19184],{},[1789,19179,12844],{},[1789,19181,12847],{},[1789,19183,12850],{},[1789,19185,1794],{},[1796,19187,19188],{},[1786,19189,19190,19194,19198,19202],{},[1801,19191,19192],{},[31,19193,9401],{},[1801,19195,19196],{},[31,19197,12866],{},[1801,19199,19200],{},[31,19201,18630],{},[1801,19203,19204],{},"Circle radius in UV space",[43,19206,19208],{"className":3062,"code":19207,"language":3064,"meta":48,"style":48},"{ \"type\": \"circleSDF\", \"radius\": 0.35 }\n",[31,19209,19210],{"__ignoreMap":48},[52,19211,19212,19215,19218,19220,19222,19224,19227,19229,19231],{"class":54,"line":55},[52,19213,19214],{"class":58},"{ ",[52,19216,19217],{"class":371},"\"type\"",[52,19219,624],{"class":58},[52,19221,18625],{"class":73},[52,19223,1881],{"class":58},[52,19225,19226],{"class":371},"\"radius\"",[52,19228,624],{"class":58},[52,19230,18630],{"class":371},[52,19232,13446],{"class":58},[3209,19234],{},[2925,19236,19238,19239],{"id":19237},"ellipse-ellipsesdf","Ellipse — ",[31,19240,19241],{},"ellipseSDF",[15,19243,19244],{},"A stretched circle with independent horizontal and vertical radii.",[1780,19246,19247,19259],{},[1783,19248,19249],{},[1786,19250,19251,19253,19255,19257],{},[1789,19252,12844],{},[1789,19254,12847],{},[1789,19256,12850],{},[1789,19258,1794],{},[1796,19260,19261,19278,19295],{},[1786,19262,19263,19267,19271,19275],{},[1801,19264,19265],{},[31,19266,621],{},[1801,19268,19269],{},[31,19270,12866],{},[1801,19272,19273],{},[31,19274,5963],{},[1801,19276,19277],{},"Horizontal radius (semi-major axis)",[1786,19279,19280,19284,19288,19292],{},[1801,19281,19282],{},[31,19283,636],{},[1801,19285,19286],{},[31,19287,12866],{},[1801,19289,19290],{},[31,19291,18725],{},[1801,19293,19294],{},"Vertical radius (semi-minor axis)",[1786,19296,19297,19301,19305,19309],{},[1801,19298,19299],{},[31,19300,9552],{},[1801,19302,19303],{},[31,19304,12866],{},[1801,19306,19307],{},[31,19308,6387],{},[1801,19310,19311],{},"Rotation in degrees",[43,19313,19315],{"className":3062,"code":19314,"language":3064,"meta":48,"style":48},"{ \"type\": \"ellipseSDF\", \"width\": 0.4, \"height\": 0.25, \"rotation\": 0 }\n",[31,19316,19317],{"__ignoreMap":48},[52,19318,19319,19321,19323,19325,19328,19330,19333,19335,19337,19339,19342,19344,19346,19348,19351,19353,19355],{"class":54,"line":55},[52,19320,19214],{"class":58},[52,19322,19217],{"class":371},[52,19324,624],{"class":58},[52,19326,19327],{"class":73},"\"ellipseSDF\"",[52,19329,1881],{"class":58},[52,19331,19332],{"class":371},"\"width\"",[52,19334,624],{"class":58},[52,19336,5963],{"class":371},[52,19338,1881],{"class":58},[52,19340,19341],{"class":371},"\"height\"",[52,19343,624],{"class":58},[52,19345,18725],{"class":371},[52,19347,1881],{"class":58},[52,19349,19350],{"class":371},"\"rotation\"",[52,19352,624],{"class":58},[52,19354,6387],{"class":371},[52,19356,13446],{"class":58},[3209,19358],{},[2925,19360,19362,19363],{"id":19361},"polygon-polygonsdf","Polygon — ",[31,19364,19365],{},"polygonSDF",[15,19367,19368],{},"A regular N-sided polygon (triangle, square, hexagon, etc.).",[1780,19370,19371,19383],{},[1783,19372,19373],{},[1786,19374,19375,19377,19379,19381],{},[1789,19376,12844],{},[1789,19378,12847],{},[1789,19380,12850],{},[1789,19382,1794],{},[1796,19384,19385,19402,19420,19438],{},[1786,19386,19387,19391,19395,19399],{},[1801,19388,19389],{},[31,19390,9401],{},[1801,19392,19393],{},[31,19394,12866],{},[1801,19396,19397],{},[31,19398,18630],{},[1801,19400,19401],{},"Distance from center to nearest edge midpoint",[1786,19403,19404,19409,19413,19417],{},[1801,19405,19406],{},[31,19407,19408],{},"sides",[1801,19410,19411],{},[31,19412,12866],{},[1801,19414,19415],{},[31,19416,18675],{},[1801,19418,19419],{},"Number of sides",[1786,19421,19422,19427,19431,19435],{},[1801,19423,19424],{},[31,19425,19426],{},"rounding",[1801,19428,19429],{},[31,19430,12866],{},[1801,19432,19433],{},[31,19434,6387],{},[1801,19436,19437],{},"Corner rounding amount",[1786,19439,19440,19444,19448,19452],{},[1801,19441,19442],{},[31,19443,9552],{},[1801,19445,19446],{},[31,19447,12866],{},[1801,19449,19450],{},[31,19451,6387],{},[1801,19453,19311],{},[43,19455,19457],{"className":3062,"code":19456,"language":3064,"meta":48,"style":48},"{ \"type\": \"polygonSDF\", \"radius\": 0.3, \"sides\": 6, \"rounding\": 0.05, \"rotation\": 0 }\n",[31,19458,19459],{"__ignoreMap":48},[52,19460,19461,19463,19465,19467,19470,19472,19474,19476,19479,19481,19484,19486,19488,19490,19493,19495,19498,19500,19502,19504,19506],{"class":54,"line":55},[52,19462,19214],{"class":58},[52,19464,19217],{"class":371},[52,19466,624],{"class":58},[52,19468,19469],{"class":73},"\"polygonSDF\"",[52,19471,1881],{"class":58},[52,19473,19226],{"class":371},[52,19475,624],{"class":58},[52,19477,19478],{"class":371},"0.3",[52,19480,1881],{"class":58},[52,19482,19483],{"class":371},"\"sides\"",[52,19485,624],{"class":58},[52,19487,18675],{"class":371},[52,19489,1881],{"class":58},[52,19491,19492],{"class":371},"\"rounding\"",[52,19494,624],{"class":58},[52,19496,19497],{"class":371},"0.05",[52,19499,1881],{"class":58},[52,19501,19350],{"class":371},[52,19503,624],{"class":58},[52,19505,6387],{"class":371},[52,19507,13446],{"class":58},[3209,19509],{},[2925,19511,19513,19514],{"id":19512},"star-starsdf","Star — ",[31,19515,18511],{},[15,19517,19518],{},"An N-pointed star with configurable inner/outer radius ratio.",[1780,19520,19521,19533],{},[1783,19522,19523],{},[1786,19524,19525,19527,19529,19531],{},[1789,19526,12844],{},[1789,19528,12847],{},[1789,19530,12850],{},[1789,19532,1794],{},[1796,19534,19535,19552,19570,19592],{},[1786,19536,19537,19541,19545,19549],{},[1801,19538,19539],{},[31,19540,9401],{},[1801,19542,19543],{},[31,19544,12866],{},[1801,19546,19547],{},[31,19548,18630],{},[1801,19550,19551],{},"Outer tip radius",[1786,19553,19554,19558,19562,19567],{},[1801,19555,19556],{},[31,19557,19408],{},[1801,19559,19560],{},[31,19561,12866],{},[1801,19563,19564],{},[31,19565,19566],{},"5",[1801,19568,19569],{},"Number of points",[1786,19571,19572,19577,19581,19586],{},[1801,19573,19574],{},[31,19575,19576],{},"innerRatio",[1801,19578,19579],{},[31,19580,12866],{},[1801,19582,19583],{},[31,19584,19585],{},"0.382",[1801,19587,19588,19589,19591],{},"Inner vertex radius as a fraction of outer radius — ",[31,19590,19585],{}," gives the classic golden-ratio 5-star",[1786,19593,19594,19598,19602,19606],{},[1801,19595,19596],{},[31,19597,9552],{},[1801,19599,19600],{},[31,19601,12866],{},[1801,19603,19604],{},[31,19605,6387],{},[1801,19607,19311],{},[43,19609,19611],{"className":3062,"code":19610,"language":3064,"meta":48,"style":48},"{ \"type\": \"starSDF\", \"radius\": 0.35, \"sides\": 5, \"innerRatio\": 0.382, \"rotation\": 0 }\n",[31,19612,19613],{"__ignoreMap":48},[52,19614,19615,19617,19619,19621,19623,19625,19627,19629,19631,19633,19635,19637,19639,19641,19644,19646,19648,19650,19652,19654,19656],{"class":54,"line":55},[52,19616,19214],{"class":58},[52,19618,19217],{"class":371},[52,19620,624],{"class":58},[52,19622,18665],{"class":73},[52,19624,1881],{"class":58},[52,19626,19226],{"class":371},[52,19628,624],{"class":58},[52,19630,18630],{"class":371},[52,19632,1881],{"class":58},[52,19634,19483],{"class":371},[52,19636,624],{"class":58},[52,19638,19566],{"class":371},[52,19640,1881],{"class":58},[52,19642,19643],{"class":371},"\"innerRatio\"",[52,19645,624],{"class":58},[52,19647,19585],{"class":371},[52,19649,1881],{"class":58},[52,19651,19350],{"class":371},[52,19653,624],{"class":58},[52,19655,6387],{"class":371},[52,19657,13446],{"class":58},[3209,19659],{},[2925,19661,19663,19664],{"id":19662},"flower-flowersdf","Flower — ",[31,19665,19666],{},"flowerSDF",[15,19668,19669],{},"An N-petalled flower with smooth concave valleys between petals.",[1780,19671,19672,19684],{},[1783,19673,19674],{},[1786,19675,19676,19678,19680,19682],{},[1789,19677,12844],{},[1789,19679,12847],{},[1789,19681,12850],{},[1789,19683,1794],{},[1796,19685,19686,19703,19720,19743],{},[1786,19687,19688,19692,19696,19700],{},[1801,19689,19690],{},[31,19691,9401],{},[1801,19693,19694],{},[31,19695,12866],{},[1801,19697,19698],{},[31,19699,18630],{},[1801,19701,19702],{},"Outer petal tip radius",[1786,19704,19705,19709,19713,19717],{},[1801,19706,19707],{},[31,19708,19408],{},[1801,19710,19711],{},[31,19712,12866],{},[1801,19714,19715],{},[31,19716,18675],{},[1801,19718,19719],{},"Number of petals",[1786,19721,19722,19726,19730,19734],{},[1801,19723,19724],{},[31,19725,19576],{},[1801,19727,19728],{},[31,19729,12866],{},[1801,19731,19732],{},[31,19733,5467],{},[1801,19735,19736,19737,19739,19740,19742],{},"Valley depth — ",[31,19738,13177],{}," = deep narrow valleys, ",[31,19741,4011],{}," = subtle scalloped edge",[1786,19744,19745,19749,19753,19757],{},[1801,19746,19747],{},[31,19748,9552],{},[1801,19750,19751],{},[31,19752,12866],{},[1801,19754,19755],{},[31,19756,6387],{},[1801,19758,19311],{},[43,19760,19762],{"className":3062,"code":19761,"language":3064,"meta":48,"style":48},"{ \"type\": \"flowerSDF\", \"radius\": 0.35, \"sides\": 6, \"innerRatio\": 0.5, \"rotation\": 0 }\n",[31,19763,19764],{"__ignoreMap":48},[52,19765,19766,19768,19770,19772,19775,19777,19779,19781,19783,19785,19787,19789,19791,19793,19795,19797,19799,19801,19803,19805,19807],{"class":54,"line":55},[52,19767,19214],{"class":58},[52,19769,19217],{"class":371},[52,19771,624],{"class":58},[52,19773,19774],{"class":73},"\"flowerSDF\"",[52,19776,1881],{"class":58},[52,19778,19226],{"class":371},[52,19780,624],{"class":58},[52,19782,18630],{"class":371},[52,19784,1881],{"class":58},[52,19786,19483],{"class":371},[52,19788,624],{"class":58},[52,19790,18675],{"class":371},[52,19792,1881],{"class":58},[52,19794,19643],{"class":371},[52,19796,624],{"class":58},[52,19798,5467],{"class":371},[52,19800,1881],{"class":58},[52,19802,19350],{"class":371},[52,19804,624],{"class":58},[52,19806,6387],{"class":371},[52,19808,13446],{"class":58},[3209,19810],{},[2925,19812,19814,19815],{"id":19813},"ring-ringsdf","Ring — ",[31,19816,19817],{},"ringSDF",[15,19819,19820],{},"A hollow ring / annulus. The effect applies to the ring material itself, not the interior hole.",[1780,19822,19823,19835],{},[1783,19824,19825],{},[1786,19826,19827,19829,19831,19833],{},[1789,19828,12844],{},[1789,19830,12847],{},[1789,19832,12850],{},[1789,19834,1794],{},[1796,19836,19837,19854],{},[1786,19838,19839,19843,19847,19851],{},[1801,19840,19841],{},[31,19842,9401],{},[1801,19844,19845],{},[31,19846,12866],{},[1801,19848,19849],{},[31,19850,19478],{},[1801,19852,19853],{},"Distance from center to the ring centerline",[1786,19855,19856,19861,19865,19870],{},[1801,19857,19858],{},[31,19859,19860],{},"thickness",[1801,19862,19863],{},[31,19864,12866],{},[1801,19866,19867],{},[31,19868,19869],{},"0.08",[1801,19871,19872],{},"Half-width of the ring on each side of the centerline",[43,19874,19876],{"className":3062,"code":19875,"language":3064,"meta":48,"style":48},"{ \"type\": \"ringSDF\", \"radius\": 0.3, \"thickness\": 0.08 }\n",[31,19877,19878],{"__ignoreMap":48},[52,19879,19880,19882,19884,19886,19889,19891,19893,19895,19897,19899,19902,19904,19906],{"class":54,"line":55},[52,19881,19214],{"class":58},[52,19883,19217],{"class":371},[52,19885,624],{"class":58},[52,19887,19888],{"class":73},"\"ringSDF\"",[52,19890,1881],{"class":58},[52,19892,19226],{"class":371},[52,19894,624],{"class":58},[52,19896,19478],{"class":371},[52,19898,1881],{"class":58},[52,19900,19901],{"class":371},"\"thickness\"",[52,19903,624],{"class":58},[52,19905,19869],{"class":371},[52,19907,13446],{"class":58},[3209,19909],{},[2925,19911,19913,19914],{"id":19912},"cross-crosssdf","Cross — ",[31,19915,19916],{},"crossSDF",[15,19918,19919],{},"A plus-sign cross with configurable arm length, thickness, and corner rounding.",[1780,19921,19922,19934],{},[1783,19923,19924],{},[1786,19925,19926,19928,19930,19932],{},[1789,19927,12844],{},[1789,19929,12847],{},[1789,19931,12850],{},[1789,19933,1794],{},[1796,19935,19936,19953,19970,19987],{},[1786,19937,19938,19942,19946,19950],{},[1801,19939,19940],{},[31,19941,9408],{},[1801,19943,19944],{},[31,19945,12866],{},[1801,19947,19948],{},[31,19949,18725],{},[1801,19951,19952],{},"Arm half-length",[1786,19954,19955,19959,19963,19967],{},[1801,19956,19957],{},[31,19958,19860],{},[1801,19960,19961],{},[31,19962,12866],{},[1801,19964,19965],{},[31,19966,19869],{},[1801,19968,19969],{},"Arm half-width",[1786,19971,19972,19976,19980,19984],{},[1801,19973,19974],{},[31,19975,19426],{},[1801,19977,19978],{},[31,19979,12866],{},[1801,19981,19982],{},[31,19983,17184],{},[1801,19985,19986],{},"Corner rounding at arm ends and intersections",[1786,19988,19989,19993,19997,20001],{},[1801,19990,19991],{},[31,19992,9552],{},[1801,19994,19995],{},[31,19996,12866],{},[1801,19998,19999],{},[31,20000,6387],{},[1801,20002,20003,20004,20006],{},"Rotation in degrees — use ",[31,20005,1206],{}," for an X shape",[43,20008,20010],{"className":3062,"code":20009,"language":3064,"meta":48,"style":48},"{ \"type\": \"crossSDF\", \"size\": 0.25, \"thickness\": 0.08, \"rounding\": 0.02, \"rotation\": 0 }\n",[31,20011,20012],{"__ignoreMap":48},[52,20013,20014,20016,20018,20020,20023,20025,20028,20030,20032,20034,20036,20038,20040,20042,20044,20046,20048,20050,20052,20054,20056],{"class":54,"line":55},[52,20015,19214],{"class":58},[52,20017,19217],{"class":371},[52,20019,624],{"class":58},[52,20021,20022],{"class":73},"\"crossSDF\"",[52,20024,1881],{"class":58},[52,20026,20027],{"class":371},"\"size\"",[52,20029,624],{"class":58},[52,20031,18725],{"class":371},[52,20033,1881],{"class":58},[52,20035,19901],{"class":371},[52,20037,624],{"class":58},[52,20039,19869],{"class":371},[52,20041,1881],{"class":58},[52,20043,19492],{"class":371},[52,20045,624],{"class":58},[52,20047,17184],{"class":371},[52,20049,1881],{"class":58},[52,20051,19350],{"class":371},[52,20053,624],{"class":58},[52,20055,6387],{"class":371},[52,20057,13446],{"class":58},[3209,20059],{},[2925,20061,20063,20064],{"id":20062},"rounded-rectangle-roundedrectsdf","Rounded Rectangle — ",[31,20065,20066],{},"roundedRectSDF",[15,20068,20069],{},"A rectangle with uniformly rounded corners.",[1780,20071,20072,20084],{},[1783,20073,20074],{},[1786,20075,20076,20078,20080,20082],{},[1789,20077,12844],{},[1789,20079,12847],{},[1789,20081,12850],{},[1789,20083,1794],{},[1796,20085,20086,20103,20120,20137],{},[1786,20087,20088,20092,20096,20100],{},[1801,20089,20090],{},[31,20091,621],{},[1801,20093,20094],{},[31,20095,12866],{},[1801,20097,20098],{},[31,20099,18630],{},[1801,20101,20102],{},"Half-width",[1786,20104,20105,20109,20113,20117],{},[1801,20106,20107],{},[31,20108,636],{},[1801,20110,20111],{},[31,20112,12866],{},[1801,20114,20115],{},[31,20116,18725],{},[1801,20118,20119],{},"Half-height",[1786,20121,20122,20126,20130,20134],{},[1801,20123,20124],{},[31,20125,19426],{},[1801,20127,20128],{},[31,20129,12866],{},[1801,20131,20132],{},[31,20133,19497],{},[1801,20135,20136],{},"Corner rounding radius",[1786,20138,20139,20143,20147,20151],{},[1801,20140,20141],{},[31,20142,9552],{},[1801,20144,20145],{},[31,20146,12866],{},[1801,20148,20149],{},[31,20150,6387],{},[1801,20152,19311],{},[43,20154,20156],{"className":3062,"code":20155,"language":3064,"meta":48,"style":48},"{ \"type\": \"roundedRectSDF\", \"width\": 0.35, \"height\": 0.25, \"rounding\": 0.05, \"rotation\": 0 }\n",[31,20157,20158],{"__ignoreMap":48},[52,20159,20160,20162,20164,20166,20168,20170,20172,20174,20176,20178,20180,20182,20184,20186,20188,20190,20192,20194,20196,20198,20200],{"class":54,"line":55},[52,20161,19214],{"class":58},[52,20163,19217],{"class":371},[52,20165,624],{"class":58},[52,20167,18715],{"class":73},[52,20169,1881],{"class":58},[52,20171,19332],{"class":371},[52,20173,624],{"class":58},[52,20175,18630],{"class":371},[52,20177,1881],{"class":58},[52,20179,19341],{"class":371},[52,20181,624],{"class":58},[52,20183,18725],{"class":371},[52,20185,1881],{"class":58},[52,20187,19492],{"class":371},[52,20189,624],{"class":58},[52,20191,19497],{"class":371},[52,20193,1881],{"class":58},[52,20195,19350],{"class":371},[52,20197,624],{"class":58},[52,20199,6387],{"class":371},[52,20201,13446],{"class":58},[3209,20203],{},[2925,20205,20207,20208],{"id":20206},"vesica-vesicasdf","Vesica — ",[31,20209,20210],{},"vesicaSDF",[15,20212,20213],{},"A lens / eye shape formed by the intersection of two overlapping circles.",[1780,20215,20216,20228],{},[1783,20217,20218],{},[1786,20219,20220,20222,20224,20226],{},[1789,20221,12844],{},[1789,20223,12847],{},[1789,20225,12850],{},[1789,20227,1794],{},[1796,20229,20230,20247,20271],{},[1786,20231,20232,20236,20240,20244],{},[1801,20233,20234],{},[31,20235,9401],{},[1801,20237,20238],{},[31,20239,12866],{},[1801,20241,20242],{},[31,20243,18630],{},[1801,20245,20246],{},"Radius of each circle",[1786,20248,20249,20254,20258,20262],{},[1801,20250,20251],{},[31,20252,20253],{},"spread",[1801,20255,20256],{},[31,20257,12866],{},[1801,20259,20260],{},[31,20261,5467],{},[1801,20263,20264,20265,20267,20268,20270],{},"Half-distance between circle centers as a fraction of radius — ",[31,20266,6387],{}," = a single circle, ",[31,20269,6391],{}," = an infinitely thin lens",[1786,20272,20273,20277,20281,20285],{},[1801,20274,20275],{},[31,20276,9552],{},[1801,20278,20279],{},[31,20280,12866],{},[1801,20282,20283],{},[31,20284,6387],{},[1801,20286,19311],{},[43,20288,20290],{"className":3062,"code":20289,"language":3064,"meta":48,"style":48},"{ \"type\": \"vesicaSDF\", \"radius\": 0.35, \"spread\": 0.5, \"rotation\": 0 }\n",[31,20291,20292],{"__ignoreMap":48},[52,20293,20294,20296,20298,20300,20303,20305,20307,20309,20311,20313,20316,20318,20320,20322,20324,20326,20328],{"class":54,"line":55},[52,20295,19214],{"class":58},[52,20297,19217],{"class":371},[52,20299,624],{"class":58},[52,20301,20302],{"class":73},"\"vesicaSDF\"",[52,20304,1881],{"class":58},[52,20306,19226],{"class":371},[52,20308,624],{"class":58},[52,20310,18630],{"class":371},[52,20312,1881],{"class":58},[52,20314,20315],{"class":371},"\"spread\"",[52,20317,624],{"class":58},[52,20319,5467],{"class":371},[52,20321,1881],{"class":58},[52,20323,19350],{"class":371},[52,20325,624],{"class":58},[52,20327,6387],{"class":371},[52,20329,13446],{"class":58},[3209,20331],{},[2925,20333,20335,20336],{"id":20334},"crescent-crescentsdf","Crescent — ",[31,20337,20338],{},"crescentSDF",[15,20340,20341],{},"A crescent / moon shape formed by subtracting a smaller offset circle from a larger one.",[1780,20343,20344,20356],{},[1783,20345,20346],{},[1786,20347,20348,20350,20352,20354],{},[1789,20349,12844],{},[1789,20351,12847],{},[1789,20353,12850],{},[1789,20355,1794],{},[1796,20357,20358,20375,20393,20410],{},[1786,20359,20360,20364,20368,20372],{},[1801,20361,20362],{},[31,20363,9401],{},[1801,20365,20366],{},[31,20367,12866],{},[1801,20369,20370],{},[31,20371,18630],{},[1801,20373,20374],{},"Outer circle radius",[1786,20376,20377,20381,20385,20390],{},[1801,20378,20379],{},[31,20380,19576],{},[1801,20382,20383],{},[31,20384,12866],{},[1801,20386,20387],{},[31,20388,20389],{},"0.75",[1801,20391,20392],{},"Inner circle radius as a fraction of outer — larger values produce a thinner crescent",[1786,20394,20395,20399,20403,20407],{},[1801,20396,20397],{},[31,20398,15564],{},[1801,20400,20401],{},[31,20402,12866],{},[1801,20404,20405],{},[31,20406,15692],{},[1801,20408,20409],{},"Horizontal distance between the two circle centers — controls how much the inner circle overlaps",[1786,20411,20412,20416,20420,20424],{},[1801,20413,20414],{},[31,20415,9552],{},[1801,20417,20418],{},[31,20419,12866],{},[1801,20421,20422],{},[31,20423,6387],{},[1801,20425,19311],{},[43,20427,20429],{"className":3062,"code":20428,"language":3064,"meta":48,"style":48},"{ \"type\": \"crescentSDF\", \"radius\": 0.35, \"innerRatio\": 0.75, \"offset\": 0.15, \"rotation\": 0 }\n",[31,20430,20431],{"__ignoreMap":48},[52,20432,20433,20435,20437,20439,20442,20444,20446,20448,20450,20452,20454,20456,20458,20460,20463,20465,20467,20469,20471,20473,20475],{"class":54,"line":55},[52,20434,19214],{"class":58},[52,20436,19217],{"class":371},[52,20438,624],{"class":58},[52,20440,20441],{"class":73},"\"crescentSDF\"",[52,20443,1881],{"class":58},[52,20445,19226],{"class":371},[52,20447,624],{"class":58},[52,20449,18630],{"class":371},[52,20451,1881],{"class":58},[52,20453,19643],{"class":371},[52,20455,624],{"class":58},[52,20457,20389],{"class":371},[52,20459,1881],{"class":58},[52,20461,20462],{"class":371},"\"offset\"",[52,20464,624],{"class":58},[52,20466,15692],{"class":371},[52,20468,1881],{"class":58},[52,20470,19350],{"class":371},[52,20472,624],{"class":58},[52,20474,6387],{"class":371},[52,20476,13446],{"class":58},[3209,20478],{},[2925,20480,20482,20483],{"id":20481},"trapezoid-trapezoidsdf","Trapezoid — ",[31,20484,20485],{},"trapezoidSDF",[15,20487,20488],{},"A quadrilateral with parallel top and bottom edges of different widths.",[1780,20490,20491,20503],{},[1783,20492,20493],{},[1786,20494,20495,20497,20499,20501],{},[1789,20496,12844],{},[1789,20498,12847],{},[1789,20500,12850],{},[1789,20502,1794],{},[1796,20504,20505,20523,20541,20557],{},[1786,20506,20507,20512,20516,20520],{},[1801,20508,20509],{},[31,20510,20511],{},"bottomWidth",[1801,20513,20514],{},[31,20515,12866],{},[1801,20517,20518],{},[31,20519,18630],{},[1801,20521,20522],{},"Bottom edge half-width",[1786,20524,20525,20530,20534,20538],{},[1801,20526,20527],{},[31,20528,20529],{},"topWidth",[1801,20531,20532],{},[31,20533,12866],{},[1801,20535,20536],{},[31,20537,13177],{},[1801,20539,20540],{},"Top edge half-width",[1786,20542,20543,20547,20551,20555],{},[1801,20544,20545],{},[31,20546,636],{},[1801,20548,20549],{},[31,20550,12866],{},[1801,20552,20553],{},[31,20554,18725],{},[1801,20556,20119],{},[1786,20558,20559,20563,20567,20571],{},[1801,20560,20561],{},[31,20562,9552],{},[1801,20564,20565],{},[31,20566,12866],{},[1801,20568,20569],{},[31,20570,6387],{},[1801,20572,19311],{},[43,20574,20576],{"className":3062,"code":20575,"language":3064,"meta":48,"style":48},"{ \"type\": \"trapezoidSDF\", \"bottomWidth\": 0.35, \"topWidth\": 0.2, \"height\": 0.25, \"rotation\": 0 }\n",[31,20577,20578],{"__ignoreMap":48},[52,20579,20580,20582,20584,20586,20589,20591,20594,20596,20598,20600,20603,20605,20607,20609,20611,20613,20615,20617,20619,20621,20623],{"class":54,"line":55},[52,20581,19214],{"class":58},[52,20583,19217],{"class":371},[52,20585,624],{"class":58},[52,20587,20588],{"class":73},"\"trapezoidSDF\"",[52,20590,1881],{"class":58},[52,20592,20593],{"class":371},"\"bottomWidth\"",[52,20595,624],{"class":58},[52,20597,18630],{"class":371},[52,20599,1881],{"class":58},[52,20601,20602],{"class":371},"\"topWidth\"",[52,20604,624],{"class":58},[52,20606,13177],{"class":371},[52,20608,1881],{"class":58},[52,20610,19341],{"class":371},[52,20612,624],{"class":58},[52,20614,18725],{"class":371},[52,20616,1881],{"class":58},[52,20618,19350],{"class":371},[52,20620,624],{"class":58},[52,20622,6387],{"class":371},[52,20624,13446],{"class":58},[3209,20626],{},[23,20628,20630],{"id":20629},"custom-shapes","Custom shapes",[15,20632,20633],{},"For getting creative with custom shapes like your product logo or icon, you can supply an SDF (signed distance) field texture.",[15,20635,20636,20637,20640,20641,20644,20645,20647,20648,20651],{},"To use an SVG shape, simply set ",[31,20638,20639],{},":shapeSdfUrl"," to the URL of the SDF ",[31,20642,20643],{},".bin"," file. Note that at the moment the SDF conversion occurs within the design editor, so it's recommended to use the ",[31,20646,20643],{}," file provided in the code export from the editor. In the near future we'll release a standalone ",[31,20649,20650],{},"SVG -> SDF"," conversion tool here for non-Pro users.",[217,20653,20654,20675,20694,20710,20726],{":tabs":1543},[43,20655,20657],{"className":45,"code":20656,"language":47,"meta":48,"style":48},"\u003CGlass :shapeSdfUrl=\"myLogoUrl\" />\n",[31,20658,20659],{"__ignoreMap":48},[52,20660,20661,20663,20665,20668,20670,20673],{"class":54,"line":55},[52,20662,59],{"class":58},[52,20664,18474],{"class":62},[52,20666,20667],{"class":66}," :shapeSdfUrl",[52,20669,70],{"class":58},[52,20671,20672],{"class":73},"\"myLogoUrl\"",[52,20674,105],{"class":58},[43,20676,20678],{"className":360,"code":20677,"language":362,"meta":48,"style":48},"\u003CGlass shapeSdfUrl={myLogoUrl} />\n",[31,20679,20680],{"__ignoreMap":48},[52,20681,20682,20684,20686,20689,20691],{"class":54,"line":55},[52,20683,59],{"class":58},[52,20685,18474],{"class":371},[52,20687,20688],{"class":66}," shapeSdfUrl",[52,20690,70],{"class":231},[52,20692,20693],{"class":58},"{myLogoUrl} />\n",[43,20695,20696],{"className":419,"code":20677,"language":420,"meta":48,"style":48},[31,20697,20698],{"__ignoreMap":48},[52,20699,20700,20702,20704,20706,20708],{"class":54,"line":55},[52,20701,59],{"class":58},[52,20703,18474],{"class":371},[52,20705,20688],{"class":66},[52,20707,70],{"class":231},[52,20709,20693],{"class":58},[43,20711,20712],{"className":419,"code":20677,"language":420,"meta":48,"style":48},[31,20713,20714],{"__ignoreMap":48},[52,20715,20716,20718,20720,20722,20724],{"class":54,"line":55},[52,20717,59],{"class":58},[52,20719,18474],{"class":371},[52,20721,20688],{"class":66},[52,20723,70],{"class":231},[52,20725,20693],{"class":58},[43,20727,20729],{"className":222,"code":20728,"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,20730,20731,20745,20749,20763,20767],{"__ignoreMap":48},[52,20732,20733,20735,20737,20739,20741,20743],{"class":54,"line":55},[52,20734,1721],{"class":231},[52,20736,1724],{"class":371},[52,20738,1727],{"class":231},[52,20740,1730],{"class":231},[52,20742,1733],{"class":66},[52,20744,1736],{"class":58},[52,20746,20747],{"class":54,"line":80},[52,20748,1751],{"class":58},[52,20750,20751,20753,20755,20758,20761],{"class":54,"line":108},[52,20752,1756],{"class":58},[52,20754,19015],{"class":73},[52,20756,20757],{"class":58},", props: { shapeSdfUrl: ",[52,20759,20760],{"class":73},"'https://example.com/my-logo.bin'",[52,20762,1768],{"class":58},[52,20764,20765],{"class":54,"line":118},[52,20766,1773],{"class":58},[52,20768,20769],{"class":54,"line":594},[52,20770,1778],{"class":58},[156,20772,12710],{},{"title":48,"searchDepth":80,"depth":80,"links":20774},[20775,20776,20800],{"id":18495,"depth":80,"text":18496},{"id":19161,"depth":80,"text":19162,"children":20777},[20778,20780,20782,20784,20786,20788,20790,20792,20794,20796,20798],{"id":19165,"depth":108,"text":20779},"Circle — circleSDF",{"id":19237,"depth":108,"text":20781},"Ellipse — ellipseSDF",{"id":19361,"depth":108,"text":20783},"Polygon — polygonSDF",{"id":19512,"depth":108,"text":20785},"Star — starSDF",{"id":19662,"depth":108,"text":20787},"Flower — flowerSDF",{"id":19813,"depth":108,"text":20789},"Ring — ringSDF",{"id":19912,"depth":108,"text":20791},"Cross — crossSDF",{"id":20062,"depth":108,"text":20793},"Rounded Rectangle — roundedRectSDF",{"id":20206,"depth":108,"text":20795},"Vesica — vesicaSDF",{"id":20334,"depth":108,"text":20797},"Crescent — crescentSDF",{"id":20481,"depth":108,"text":20799},"Trapezoid — trapezoidSDF",{"id":20629,"depth":80,"text":20630},"How to use and configure the built-in shape system","shapes",{},"/docs/guide/shape-effects",{"title":18463,"description":20801},"docs/guide/8.shape-effects","UiYWbvX2HwX3Cm-5eWV79KOJLkVIgz7QULXXdxMzqjI",{"id":20809,"title":14761,"body":20810,"category":1904,"description":21169,"exclude":167,"extension":168,"forceFramework":167,"icon":21170,"meta":21171,"navigation":171,"path":21172,"seo":21173,"stem":21174,"__hash__":21175},"guide/docs/guide/9.performance.md",{"type":8,"value":20811,"toc":21163},[20812,20814,20817,20821,20828,20831,20835,20838,20844,20854,20859,20920,20923,20927,20930,20935,20957,20963,21117,21121,21127,21133,21148,21154,21160],[11,20813,14761],{"id":14760},[15,20815,20816],{},"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,20818,20820],{"id":20819},"the-frame-budget","The frame budget",[15,20822,20823,20824,20827],{},"At 60fps, the GPU has ",[151,20825,20826],{},"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,20829,20830],{},"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,20832,20834],{"id":20833},"generator-vs-filter-effects","Generator vs. filter effects",[15,20836,20837],{},"Effects fall into two broad categories with very different cost profiles:",[15,20839,20840,20843],{},[151,20841,20842],{},"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,20845,20846,20849,20850,20853],{},[151,20847,20848],{},"Filter/Effect"," components (Blur, Glass, GlassTiles, Glow, Dither, etc.) need to read from an existing rendered image — they require a ",[151,20851,20852],{},"render-to-texture (RTT)"," pass. RTT adds one extra GPU render pass per effect boundary.",[15,20855,20856],{},[151,20857,20858],{},"Rough cost categories:",[1780,20860,20861,20874],{},[1783,20862,20863],{},[1786,20864,20865,20868,20871],{},[1789,20866,20867],{},"Category",[1789,20869,20870],{},"Examples",[1789,20872,20873],{},"Relative cost",[1796,20875,20876,20887,20898,20909],{},[1786,20877,20878,20881,20884],{},[1801,20879,20880],{},"Very light",[1801,20882,20883],{},"SolidColor, LinearGradient, RadialGradient",[1801,20885,20886],{},"~0–0.1ms",[1786,20888,20889,20892,20895],{},[1801,20890,20891],{},"Light",[1801,20893,20894],{},"Swirl, Circle, Plasma, SimplexNoise, most generators",[1801,20896,20897],{},"~0.1–0.5ms",[1786,20899,20900,20903,20906],{},[1801,20901,20902],{},"Medium",[1801,20904,20905],{},"Blur, Glow, Dither, Halftone, Pixelate, CursorTrail",[1801,20907,20908],{},"~0.5–2ms",[1786,20910,20911,20914,20917],{},[1801,20912,20913],{},"Heavy",[1801,20915,20916],{},"Glass, GlassTiles, multiple nested RTT effects",[1801,20918,20919],{},"~1-2ms+",[15,20921,20922],{},"These are rough estimates on a modern GPU. Performance varies significantly by hardware, canvas size, and pixel density.",[23,20924,20926],{"id":20925},"render-to-texture-rtt","Render-to-texture (RTT)",[15,20928,20929],{},"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,20931,20932],{},[151,20933,20934],{},"What triggers RTT:",[1465,20936,20937,20940,20948,20951],{},[1468,20938,20939],{},"Filter/effect components that need input (Blur, Glass, GlassTiles, etc.)",[1468,20941,1825,20942,20944,20945,20947],{},[31,20943,16915],{}," ",[1139,20946,14752],{"href":14751}," on any component (the source layer is RTT'd)",[1468,20949,20950],{},"The masking system when a layer is used as a mask source",[1468,20952,20953,20954,20956],{},"Non-default ",[1139,20955,12735],{"href":14789}," on a component",[15,20958,20959,20962],{},[151,20960,20961],{},"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,20964,20966],{"className":45,"code":20965,"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,20967,20968,20973,20981,20989,20997,21005,21020,21028,21036,21044,21052,21060,21064,21069,21077,21085,21093,21101,21109],{"__ignoreMap":48},[52,20969,20970],{"class":54,"line":55},[52,20971,20972],{"class":559},"\u003C!-- Avoid: three RTT passes in series -->\n",[52,20974,20975,20977,20979],{"class":54,"line":80},[52,20976,59],{"class":58},[52,20978,63],{"class":62},[52,20980,77],{"class":58},[52,20982,20983,20985,20987],{"class":54,"line":108},[52,20984,83],{"class":58},[52,20986,86],{"class":62},[52,20988,105],{"class":58},[52,20990,20991,20993,20995],{"class":54,"line":118},[52,20992,83],{"class":58},[52,20994,3936],{"class":62},[52,20996,77],{"class":58},[52,20998,20999,21001,21003],{"class":54,"line":594},[52,21000,2213],{"class":58},[52,21002,18474],{"class":62},[52,21004,77],{"class":58},[52,21006,21007,21009,21011,21013,21015,21018],{"class":54,"line":600},[52,21008,2476],{"class":58},[52,21010,9486],{"class":62},[52,21012,14825],{"class":66},[52,21014,70],{"class":58},[52,21016,21017],{"class":73},"\"20\"",[52,21019,77],{"class":58},[52,21021,21022,21024,21026],{"class":54,"line":606},[52,21023,8526],{"class":58},[52,21025,2216],{"class":62},[52,21027,105],{"class":58},[52,21029,21030,21032,21034],{"class":54,"line":653},[52,21031,8632],{"class":58},[52,21033,9486],{"class":62},[52,21035,77],{"class":58},[52,21037,21038,21040,21042],{"class":54,"line":662},[52,21039,2491],{"class":58},[52,21041,18474],{"class":62},[52,21043,77],{"class":58},[52,21045,21046,21048,21050],{"class":54,"line":671},[52,21047,2230],{"class":58},[52,21049,3936],{"class":62},[52,21051,77],{"class":58},[52,21053,21054,21056,21058],{"class":54,"line":676},[52,21055,121],{"class":58},[52,21057,63],{"class":62},[52,21059,77],{"class":58},[52,21061,21062],{"class":54,"line":682},[52,21063,597],{"emptyLinePlaceholder":171},[52,21065,21066],{"class":54,"line":698},[52,21067,21068],{"class":559},"\u003C!-- Better: fewer RTT boundaries -->\n",[52,21070,21071,21073,21075],{"class":54,"line":707},[52,21072,59],{"class":58},[52,21074,63],{"class":62},[52,21076,77],{"class":58},[52,21078,21079,21081,21083],{"class":54,"line":2327},[52,21080,83],{"class":58},[52,21082,86],{"class":62},[52,21084,105],{"class":58},[52,21086,21087,21089,21091],{"class":54,"line":7369},[52,21088,83],{"class":58},[52,21090,3936],{"class":62},[52,21092,77],{"class":58},[52,21094,21095,21097,21099],{"class":54,"line":7379},[52,21096,2213],{"class":58},[52,21098,2216],{"class":62},[52,21100,105],{"class":58},[52,21102,21103,21105,21107],{"class":54,"line":7390},[52,21104,2230],{"class":58},[52,21106,3936],{"class":62},[52,21108,77],{"class":58},[52,21110,21111,21113,21115],{"class":54,"line":7395},[52,21112,121],{"class":58},[52,21114,63],{"class":62},[52,21116,77],{"class":58},[23,21118,21120],{"id":21119},"practical-tips","Practical tips",[15,21122,21123,21126],{},[151,21124,21125],{},"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,21128,21129,21132],{},[151,21130,21131],{},"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,21134,21135,21138,21139,21141,21142,21144,21145,21147],{},[151,21136,21137],{},"Invisible layers still cost."," A hidden layer with ",[31,21140,6760],{}," is completely excluded from composition — zero cost. Using the opacity prop with a value of ",[31,21143,6387],{}," still renders the layer. Use ",[31,21146,6760],{}," to truly exclude layers you don't need.",[15,21149,21150,21153],{},[151,21151,21152],{},"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,21155,21156,21159],{},[151,21157,21158],{},"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,21161,21162],{},"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":21164},[21165,21166,21167,21168],{"id":20819,"depth":80,"text":20820},{"id":20833,"depth":80,"text":20834},{"id":20925,"depth":80,"text":20926},{"id":21119,"depth":80,"text":21120},"Design high-performance shaders — what's expensive, what's free, and how to stay fast","gauge-high",{},"/docs/guide/performance",{"title":14761,"description":21169},"docs/guide/9.performance","CBj3Z8Zk4h6dwXGq1AOtOkCjEyK5HRjDjSB9VgDuwHw",{"id":21177,"title":178,"body":21178,"category":165,"description":21805,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":21806,"navigation":171,"path":21807,"seo":21808,"stem":21809,"__hash__":21810},"guide/docs/guide/js/1.quickstart.md",{"type":8,"value":21179,"toc":21795},[21180,21184,21187,21191,21203,21207,21213,21244,21246,21253,21345,21347,21353,21355,21363,21465,21472,21496,21498,21505,21597,21601,21610,21730,21737,21743,21747,21754,21768,21771,21773,21792],[11,21181,21183],{"id":21182},"quickstart-javascript","Quickstart (JavaScript)",[15,21185,21186],{},"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,21188,21190],{"id":21189},"install-the-npm-package","Install the npm package",[43,21192,21193],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,21194,21195],{"__ignoreMap":48},[52,21196,21197,21199,21201],{"class":54,"line":55},[52,21198,199],{"class":66},[52,21200,202],{"class":73},[52,21202,205],{"class":73},[23,21204,21206],{"id":21205},"set-up-a-canvas","Set up a canvas",[15,21208,21209,21210,21212],{},"Create a ",[31,21211,40],{}," element in your HTML and give it a size:",[43,21214,21216],{"className":10598,"code":21215,"language":10600,"meta":48,"style":48},"\u003Ccanvas id=\"my-shader\" style=\"width: 100%; height: 400px;\">\u003C/canvas>\n",[31,21217,21218],{"__ignoreMap":48},[52,21219,21220,21222,21224,21226,21228,21231,21233,21235,21238,21240,21242],{"class":54,"line":55},[52,21221,59],{"class":58},[52,21223,10609],{"class":62},[52,21225,6815],{"class":66},[52,21227,70],{"class":58},[52,21229,21230],{"class":73},"\"my-shader\"",[52,21232,613],{"class":66},[52,21234,70],{"class":58},[52,21236,21237],{"class":73},"\"width: 100%; height: 400px;\"",[52,21239,10626],{"class":58},[52,21241,10609],{"class":62},[52,21243,77],{"class":58},[23,21245,293],{"id":292},[15,21247,21248,21249,21252],{},"Import ",[31,21250,21251],{},"createShader",", pass it the canvas and a list of components:",[43,21254,21256],{"className":222,"code":21255,"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,21257,21258,21268,21272,21290,21294,21308,21312,21328,21337,21341],{"__ignoreMap":48},[52,21259,21260,21262,21264,21266],{"class":54,"line":55},[52,21261,232],{"class":231},[52,21263,9231],{"class":58},[52,21265,238],{"class":231},[52,21267,9236],{"class":73},[52,21269,21270],{"class":54,"line":80},[52,21271,597],{"emptyLinePlaceholder":171},[52,21273,21274,21276,21278,21280,21282,21284,21286,21288],{"class":54,"line":108},[52,21275,1721],{"class":231},[52,21277,2796],{"class":371},[52,21279,1727],{"class":231},[52,21281,2801],{"class":58},[52,21283,2804],{"class":66},[52,21285,2289],{"class":58},[52,21287,10244],{"class":73},[52,21289,2295],{"class":58},[52,21291,21292],{"class":54,"line":118},[52,21293,597],{"emptyLinePlaceholder":171},[52,21295,21296,21298,21300,21302,21304,21306],{"class":54,"line":594},[52,21297,1721],{"class":231},[52,21299,1724],{"class":371},[52,21301,1727],{"class":231},[52,21303,1730],{"class":231},[52,21305,1733],{"class":66},[52,21307,1736],{"class":58},[52,21309,21310],{"class":54,"line":600},[52,21311,1751],{"class":58},[52,21313,21314,21316,21318,21320,21322,21324,21326],{"class":54,"line":606},[52,21315,1756],{"class":58},[52,21317,2126],{"class":73},[52,21319,7883],{"class":58},[52,21321,14649],{"class":73},[52,21323,7889],{"class":58},[52,21325,14654],{"class":73},[52,21327,4283],{"class":58},[52,21329,21330,21332,21335],{"class":54,"line":653},[52,21331,1756],{"class":58},[52,21333,21334],{"class":73},"'CursorTrail'",[52,21336,2129],{"class":58},[52,21338,21339],{"class":54,"line":662},[52,21340,1773],{"class":58},[52,21342,21343],{"class":54,"line":671},[52,21344,1778],{"class":58},[19,21346],{":preset":529},[15,21348,1825,21349,21352],{},[31,21350,21351],{},"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,21354,544],{"id":543},[15,21356,1825,21357,21359,21360,1540],{},[31,21358,40],{}," has no intrinsic size. Set dimensions via CSS — the shader tracks them automatically via ",[31,21361,21362],{},"ResizeObserver",[43,21364,21366],{"className":10598,"code":21365,"language":10600,"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,21367,21368,21373,21398,21402,21407,21432,21436,21441],{"__ignoreMap":48},[52,21369,21370],{"class":54,"line":55},[52,21371,21372],{"class":559},"\u003C!-- Fixed size -->\n",[52,21374,21375,21377,21379,21381,21383,21386,21388,21390,21392,21394,21396],{"class":54,"line":80},[52,21376,59],{"class":58},[52,21378,10609],{"class":62},[52,21380,6815],{"class":66},[52,21382,70],{"class":58},[52,21384,21385],{"class":73},"\"shader\"",[52,21387,613],{"class":66},[52,21389,70],{"class":58},[52,21391,927],{"class":73},[52,21393,10626],{"class":58},[52,21395,10609],{"class":62},[52,21397,77],{"class":58},[52,21399,21400],{"class":54,"line":108},[52,21401,597],{"emptyLinePlaceholder":171},[52,21403,21404],{"class":54,"line":118},[52,21405,21406],{"class":559},"\u003C!-- Full viewport -->\n",[52,21408,21409,21411,21413,21415,21417,21419,21421,21423,21426,21428,21430],{"class":54,"line":594},[52,21410,59],{"class":58},[52,21412,10609],{"class":62},[52,21414,6815],{"class":66},[52,21416,70],{"class":58},[52,21418,21385],{"class":73},[52,21420,613],{"class":66},[52,21422,70],{"class":58},[52,21424,21425],{"class":73},"\"width: 100vw; height: 100dvh;\"",[52,21427,10626],{"class":58},[52,21429,10609],{"class":62},[52,21431,77],{"class":58},[52,21433,21434],{"class":54,"line":600},[52,21435,597],{"emptyLinePlaceholder":171},[52,21437,21438],{"class":54,"line":606},[52,21439,21440],{"class":559},"\u003C!-- Fluid with aspect ratio (using Tailwind or equivalent CSS) -->\n",[52,21442,21443,21445,21447,21449,21451,21453,21455,21457,21459,21461,21463],{"class":54,"line":653},[52,21444,59],{"class":58},[52,21446,10609],{"class":62},[52,21448,6815],{"class":66},[52,21450,70],{"class":58},[52,21452,21385],{"class":73},[52,21454,67],{"class":66},[52,21456,70],{"class":58},[52,21458,693],{"class":73},[52,21460,10626],{"class":58},[52,21462,10609],{"class":62},[52,21464,77],{"class":58},[15,21466,21467,21468,21471],{},"If you resize the canvas programmatically via JavaScript after initialization, call ",[31,21469,21470],{},"shader.resize()"," to sync:",[43,21473,21475],{"className":222,"code":21474,"language":224,"meta":48,"style":48},"canvas.style.height = '600px'\nshader.resize()\n",[31,21476,21477,21486],{"__ignoreMap":48},[52,21478,21479,21481,21483],{"class":54,"line":55},[52,21480,10261],{"class":58},[52,21482,70],{"class":231},[52,21484,21485],{"class":73}," '600px'\n",[52,21487,21488,21490,21493],{"class":54,"line":80},[52,21489,9322],{"class":58},[52,21491,21492],{"class":66},"resize",[52,21494,21495],{"class":58},"()\n",[23,21497,1134],{"id":1133},[15,21499,21500,21501,21504],{},"Props are passed in the ",[31,21502,21503],{},"props"," object for each component. All prop names are camelCase:",[43,21506,21508],{"className":222,"code":21507,"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,21509,21510,21524,21528,21532,21540,21544,21554,21564,21573,21581,21585,21589,21593],{"__ignoreMap":48},[52,21511,21512,21514,21516,21518,21520,21522],{"class":54,"line":55},[52,21513,1721],{"class":231},[52,21515,1724],{"class":371},[52,21517,1727],{"class":231},[52,21519,1730],{"class":231},[52,21521,1733],{"class":66},[52,21523,1736],{"class":58},[52,21525,21526],{"class":54,"line":80},[52,21527,1751],{"class":58},[52,21529,21530],{"class":54,"line":108},[52,21531,13422],{"class":58},[52,21533,21534,21536,21538],{"class":54,"line":118},[52,21535,13427],{"class":58},[52,21537,2126],{"class":73},[52,21539,1746],{"class":58},[52,21541,21542],{"class":54,"line":594},[52,21543,13436],{"class":58},[52,21545,21546,21549,21552],{"class":54,"line":600},[52,21547,21548],{"class":58}," colorA: ",[52,21550,21551],{"class":73},"'#ff6b6b'",[52,21553,1746],{"class":58},[52,21555,21556,21559,21562],{"class":54,"line":606},[52,21557,21558],{"class":58}," colorB: ",[52,21560,21561],{"class":73},"'#4ecdc4'",[52,21563,1746],{"class":58},[52,21565,21566,21569,21571],{"class":54,"line":653},[52,21567,21568],{"class":58}," angle: ",[52,21570,1206],{"class":371},[52,21572,1746],{"class":58},[52,21574,21575,21578],{"class":54,"line":662},[52,21576,21577],{"class":58}," colorSpace: ",[52,21579,21580],{"class":73},"'oklch'\n",[52,21582,21583],{"class":54,"line":671},[52,21584,3333],{"class":58},[52,21586,21587],{"class":54,"line":676},[52,21588,3106],{"class":58},[52,21590,21591],{"class":54,"line":682},[52,21592,1773],{"class":58},[52,21594,21595],{"class":54,"line":698},[52,21596,1778],{"class":58},[23,21598,21600],{"id":21599},"updating-at-runtime","Updating at runtime",[15,21602,21603,21604,21606,21607,21609],{},"Assign an ",[31,21605,6771],{}," to any component, then use ",[31,21608,18295],{}," to change its props at any time:",[43,21611,21613],{"className":222,"code":21612,"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,21614,21615,21629,21633,21658,21662,21666,21670,21675,21708,21726],{"__ignoreMap":48},[52,21616,21617,21619,21621,21623,21625,21627],{"class":54,"line":55},[52,21618,1721],{"class":231},[52,21620,1724],{"class":371},[52,21622,1727],{"class":231},[52,21624,1730],{"class":231},[52,21626,1733],{"class":66},[52,21628,1736],{"class":58},[52,21630,21631],{"class":54,"line":80},[52,21632,1751],{"class":58},[52,21634,21635,21637,21639,21641,21643,21645,21647,21649,21651,21654,21656],{"class":54,"line":108},[52,21636,1756],{"class":58},[52,21638,2126],{"class":73},[52,21640,2872],{"class":58},[52,21642,9289],{"class":73},[52,21644,7883],{"class":58},[52,21646,14649],{"class":73},[52,21648,7889],{"class":58},[52,21650,14654],{"class":73},[52,21652,21653],{"class":58},", angle: ",[52,21655,6387],{"class":371},[52,21657,1768],{"class":58},[52,21659,21660],{"class":54,"line":118},[52,21661,1773],{"class":58},[52,21663,21664],{"class":54,"line":594},[52,21665,1778],{"class":58},[52,21667,21668],{"class":54,"line":600},[52,21669,597],{"emptyLinePlaceholder":171},[52,21671,21672],{"class":54,"line":606},[52,21673,21674],{"class":559},"// Hook up a slider\n",[52,21676,21677,21680,21683,21685,21688,21691,21694,21696,21699,21701,21704,21706],{"class":54,"line":653},[52,21678,21679],{"class":58},"document.",[52,21681,21682],{"class":66},"querySelector",[52,21684,2289],{"class":58},[52,21686,21687],{"class":73},"'#angle-slider'",[52,21689,21690],{"class":58},").",[52,21692,21693],{"class":66},"addEventListener",[52,21695,2289],{"class":58},[52,21697,21698],{"class":73},"'input'",[52,21700,1881],{"class":58},[52,21702,21703],{"class":8545},"e",[52,21705,8548],{"class":231},[52,21707,2904],{"class":58},[52,21709,21710,21712,21714,21716,21718,21720,21723],{"class":54,"line":662},[52,21711,14718],{"class":58},[52,21713,9325],{"class":66},[52,21715,2289],{"class":58},[52,21717,9289],{"class":73},[52,21719,9332],{"class":58},[52,21721,21722],{"class":66},"Number",[52,21724,21725],{"class":58},"(e.target.value) })\n",[52,21727,21728],{"class":54,"line":671},[52,21729,1778],{"class":58},[15,21731,21732,21733,21736],{},"When ",[31,21734,21735],{},"update()"," is called, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,21738,21739,21740,21742],{},"Browse the ",[1139,21741,1142],{"href":1141}," for the full prop reference on every component.",[23,21744,21746],{"id":21745},"cleanup","Cleanup",[15,21748,21749,21750,21753],{},"When you're done, call ",[31,21751,21752],{},"destroy()"," to free GPU resources:",[43,21755,21757],{"className":222,"code":21756,"language":224,"meta":48,"style":48},"shader.destroy()\n",[31,21758,21759],{"__ignoreMap":48},[52,21760,21761,21763,21766],{"class":54,"line":55},[52,21762,9322],{"class":58},[52,21764,21765],{"class":66},"destroy",[52,21767,21495],{"class":58},[15,21769,21770],{},"Always destroy shaders when navigating away — for example, in a single-page app's route change handler.",[23,21772,1463],{"id":1462},[1465,21774,21775,21779,21783,21788],{},[1468,21776,21777,1474],{},[1139,21778,1473],{"href":1472},[1468,21780,21781,1481],{},[1139,21782,1480],{"href":1479},[1468,21784,21785,21787],{},[1139,21786,14795],{"href":14751}," — animate and mouse-track props declaratively",[1468,21789,21790,1493],{},[1139,21791,1142],{"href":1141},[156,21793,21794],{},"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":21796},[21797,21798,21799,21800,21801,21802,21803,21804],{"id":21189,"depth":80,"text":21190},{"id":21205,"depth":80,"text":21206},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":21599,"depth":80,"text":21600},{"id":21745,"depth":80,"text":21746},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with JavaScript",{},"/docs/guide/js/quickstart",{"title":178,"description":21805},"docs/guide/js/1.quickstart","SSisknP72urjcAFidY0PEavpea09R3qfEpGTrZQx7Qw",{"id":21812,"title":178,"body":21813,"category":165,"description":22448,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":22449,"navigation":171,"path":22450,"seo":22451,"stem":22452,"__hash__":22453},"guide/docs/guide/react/1.quickstart.md",{"type":8,"value":21814,"toc":22439},[21815,21819,21823,21825,21837,21841,21855,21857,21860,21914,21916,21923,21925,21938,22072,22086,22088,22091,22163,22170,22399,22404,22408,22412,22420,22422,22436],[11,21816,21818],{"id":21817},"quickstart-react","Quickstart (React)",[21820,21821],"you-tube-embed",{"id":21822},"836NxwU1Wwk",[23,21824,21190],{"id":21189},[43,21826,21827],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,21828,21829],{"__ignoreMap":48},[52,21830,21831,21833,21835],{"class":54,"line":55},[52,21832,199],{"class":66},[52,21834,202],{"class":73},[52,21836,205],{"class":73},[23,21838,21840],{"id":21839},"import-some-components","Import some components",[43,21842,21843],{"className":222,"code":244,"language":224,"meta":48,"style":48},[31,21844,21845],{"__ignoreMap":48},[52,21846,21847,21849,21851,21853],{"class":54,"line":55},[52,21848,232],{"class":231},[52,21850,235],{"class":58},[52,21852,238],{"class":231},[52,21854,257],{"class":73},[23,21856,293],{"id":292},[15,21858,21859],{},"Let's create a very simple shader:",[43,21861,21862],{"className":360,"code":361,"language":362,"meta":48,"style":48},[31,21863,21864,21878,21898,21906],{"__ignoreMap":48},[52,21865,21866,21868,21870,21872,21874,21876],{"class":54,"line":55},[52,21867,59],{"class":58},[52,21869,63],{"class":371},[52,21871,374],{"class":66},[52,21873,70],{"class":231},[52,21875,319],{"class":73},[52,21877,77],{"class":58},[52,21879,21880,21882,21884,21886,21888,21890,21892,21894,21896],{"class":54,"line":80},[52,21881,83],{"class":58},[52,21883,86],{"class":371},[52,21885,89],{"class":66},[52,21887,70],{"class":231},[52,21889,94],{"class":73},[52,21891,97],{"class":66},[52,21893,70],{"class":231},[52,21895,102],{"class":73},[52,21897,105],{"class":58},[52,21899,21900,21902,21904],{"class":54,"line":108},[52,21901,83],{"class":58},[52,21903,113],{"class":371},[52,21905,105],{"class":58},[52,21907,21908,21910,21912],{"class":54,"line":118},[52,21909,121],{"class":58},[52,21911,63],{"class":371},[52,21913,77],{"class":58},[19,21915],{":preset":529},[15,21917,21918,534,21920,21922],{},[31,21919,33],{},[31,21921,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,21924,544],{"id":543},[15,21926,1825,21927,21929,21930,16248,21933,21935,21936,540],{},[31,21928,40],{}," has no intrinsic size. The ",[31,21931,21932],{},"className",[31,21934,156],{}," you apply to ",[31,21937,33],{},[43,21939,21941],{"className":360,"code":21940,"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,21942,21943,21951,21965,21973,21981,21985,21993,22013,22021,22029,22033,22042,22056,22064],{"__ignoreMap":48},[52,21944,21945,21947,21949],{"class":54,"line":55},[52,21946,723],{"class":58},[52,21948,726],{"class":559},[52,21950,729],{"class":58},[52,21952,21953,21955,21957,21959,21961,21963],{"class":54,"line":80},[52,21954,59],{"class":58},[52,21956,63],{"class":371},[52,21958,374],{"class":66},[52,21960,70],{"class":231},[52,21962,573],{"class":73},[52,21964,77],{"class":58},[52,21966,21967,21969,21971],{"class":54,"line":108},[52,21968,83],{"class":58},[52,21970,86],{"class":371},[52,21972,105],{"class":58},[52,21974,21975,21977,21979],{"class":54,"line":118},[52,21976,121],{"class":58},[52,21978,63],{"class":371},[52,21980,77],{"class":58},[52,21982,21983],{"class":54,"line":594},[52,21984,597],{"emptyLinePlaceholder":171},[52,21986,21987,21989,21991],{"class":54,"line":600},[52,21988,723],{"class":58},[52,21990,770],{"class":559},[52,21992,729],{"class":58},[52,21994,21995,21997,21999,22001,22003,22005,22007,22009,22011],{"class":54,"line":606},[52,21996,59],{"class":58},[52,21998,63],{"class":371},[52,22000,613],{"class":66},[52,22002,70],{"class":231},[52,22004,785],{"class":58},[52,22006,788],{"class":73},[52,22008,791],{"class":58},[52,22010,794],{"class":73},[52,22012,797],{"class":58},[52,22014,22015,22017,22019],{"class":54,"line":653},[52,22016,83],{"class":58},[52,22018,86],{"class":371},[52,22020,105],{"class":58},[52,22022,22023,22025,22027],{"class":54,"line":662},[52,22024,121],{"class":58},[52,22026,63],{"class":371},[52,22028,77],{"class":58},[52,22030,22031],{"class":54,"line":671},[52,22032,597],{"emptyLinePlaceholder":171},[52,22034,22035,22037,22040],{"class":54,"line":676},[52,22036,723],{"class":58},[52,22038,22039],{"class":559},"/* Fluid with aspect ratio */",[52,22041,729],{"class":58},[52,22043,22044,22046,22048,22050,22052,22054],{"class":54,"line":682},[52,22045,59],{"class":58},[52,22047,63],{"class":371},[52,22049,374],{"class":66},[52,22051,70],{"class":231},[52,22053,693],{"class":73},[52,22055,77],{"class":58},[52,22057,22058,22060,22062],{"class":54,"line":698},[52,22059,83],{"class":58},[52,22061,86],{"class":371},[52,22063,105],{"class":58},[52,22065,22066,22068,22070],{"class":54,"line":707},[52,22067,121],{"class":58},[52,22069,63],{"class":371},[52,22071,77],{"class":58},[15,22073,22074,22075,16248,22077,22079,22080,22082,22083,22085],{},"Applying a ",[31,22076,21932],{},[31,22078,156],{}," to the ",[31,22081,33],{}," tag is preferred over trying to target the ",[31,22084,40],{}," element directly, as the internal DOM structure may change in the future.",[23,22087,1134],{"id":1133},[15,22089,22090],{},"Pass props directly to configure each component. All props use camelCase:",[43,22092,22093],{"className":360,"code":1235,"language":362,"meta":48,"style":48},[31,22094,22095,22109,22115,22123,22131,22143,22151,22155],{"__ignoreMap":48},[52,22096,22097,22099,22101,22103,22105,22107],{"class":54,"line":55},[52,22098,59],{"class":58},[52,22100,63],{"class":371},[52,22102,374],{"class":66},[52,22104,70],{"class":231},[52,22106,319],{"class":73},[52,22108,77],{"class":58},[52,22110,22111,22113],{"class":54,"line":80},[52,22112,83],{"class":58},[52,22114,1171],{"class":371},[52,22116,22117,22119,22121],{"class":54,"line":108},[52,22118,1176],{"class":66},[52,22120,70],{"class":231},[52,22122,1181],{"class":73},[52,22124,22125,22127,22129],{"class":54,"line":118},[52,22126,1186],{"class":66},[52,22128,70],{"class":231},[52,22130,1191],{"class":73},[52,22132,22133,22135,22137,22139,22141],{"class":54,"line":594},[52,22134,1278],{"class":66},[52,22136,70],{"class":231},[52,22138,723],{"class":58},[52,22140,1206],{"class":371},[52,22142,729],{"class":58},[52,22144,22145,22147,22149],{"class":54,"line":600},[52,22146,1291],{"class":66},[52,22148,70],{"class":231},[52,22150,1219],{"class":73},[52,22152,22153],{"class":54,"line":606},[52,22154,1224],{"class":58},[52,22156,22157,22159,22161],{"class":54,"line":653},[52,22158,121],{"class":58},[52,22160,63],{"class":371},[52,22162,77],{"class":58},[15,22164,22165,22166,22169],{},"Props also accept state — ",[31,22167,22168],{},"useState"," and any other reactive value work exactly as you'd expect:",[43,22171,22173],{"className":360,"code":22172,"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,22174,22175,22185,22196,22200,22215,22239,22243,22249,22253,22267,22294,22302,22306,22313,22323,22336,22350,22360,22382,22387,22391,22395],{"__ignoreMap":48},[52,22176,22177,22179,22181,22183],{"class":54,"line":55},[52,22178,232],{"class":231},[52,22180,2345],{"class":58},[52,22182,238],{"class":231},[52,22184,2350],{"class":73},[52,22186,22187,22189,22192,22194],{"class":54,"line":80},[52,22188,232],{"class":231},[52,22190,22191],{"class":58}," { Shader, LinearGradient } ",[52,22193,238],{"class":231},[52,22195,257],{"class":73},[52,22197,22198],{"class":54,"line":108},[52,22199,597],{"emptyLinePlaceholder":171},[52,22201,22202,22205,22208,22210,22213],{"class":54,"line":118},[52,22203,22204],{"class":231},"export",[52,22206,22207],{"class":231}," default",[52,22209,9658],{"class":231},[52,22211,22212],{"class":66}," MyShader",[52,22214,2310],{"class":58},[52,22216,22217,22219,22221,22223,22225,22227,22229,22231,22233,22235,22237],{"class":54,"line":594},[52,22218,2368],{"class":231},[52,22220,2371],{"class":58},[52,22222,1199],{"class":371},[52,22224,1881],{"class":58},[52,22226,8486],{"class":371},[52,22228,2382],{"class":58},[52,22230,70],{"class":231},[52,22232,2387],{"class":66},[52,22234,2289],{"class":58},[52,22236,6387],{"class":371},[52,22238,2295],{"class":58},[52,22240,22241],{"class":54,"line":600},[52,22242,597],{"emptyLinePlaceholder":171},[52,22244,22245,22247],{"class":54,"line":606},[52,22246,2402],{"class":231},[52,22248,2405],{"class":58},[52,22250,22251],{"class":54,"line":653},[52,22252,8513],{"class":58},[52,22254,22255,22257,22259,22261,22263,22265],{"class":54,"line":662},[52,22256,2476],{"class":58},[52,22258,63],{"class":371},[52,22260,374],{"class":66},[52,22262,70],{"class":231},[52,22264,319],{"class":73},[52,22266,77],{"class":58},[52,22268,22269,22271,22273,22275,22277,22280,22282,22284,22287,22289,22291],{"class":54,"line":671},[52,22270,8526],{"class":58},[52,22272,86],{"class":371},[52,22274,89],{"class":66},[52,22276,70],{"class":231},[52,22278,22279],{"class":73},"\"#ff6b6b\"",[52,22281,97],{"class":66},[52,22283,70],{"class":231},[52,22285,22286],{"class":73},"\"#4ecdc4\"",[52,22288,8249],{"class":66},[52,22290,70],{"class":231},[52,22292,22293],{"class":58},"{angle} />\n",[52,22295,22296,22298,22300],{"class":54,"line":676},[52,22297,8632],{"class":58},[52,22299,63],{"class":371},[52,22301,77],{"class":58},[52,22303,22304],{"class":54,"line":682},[52,22305,597],{"emptyLinePlaceholder":171},[52,22307,22308,22310],{"class":54,"line":698},[52,22309,2476],{"class":58},[52,22311,22312],{"class":62},"input\n",[52,22314,22315,22318,22320],{"class":54,"line":707},[52,22316,22317],{"class":66}," type",[52,22319,70],{"class":231},[52,22321,22322],{"class":73},"\"range\"\n",[52,22324,22325,22328,22330,22332,22334],{"class":54,"line":2327},[52,22326,22327],{"class":66}," min",[52,22329,70],{"class":231},[52,22331,723],{"class":58},[52,22333,6387],{"class":371},[52,22335,729],{"class":58},[52,22337,22338,22341,22343,22345,22348],{"class":54,"line":7369},[52,22339,22340],{"class":66}," max",[52,22342,70],{"class":231},[52,22344,723],{"class":58},[52,22346,22347],{"class":371},"360",[52,22349,729],{"class":58},[52,22351,22352,22355,22357],{"class":54,"line":7379},[52,22353,22354],{"class":66}," value",[52,22356,70],{"class":231},[52,22358,22359],{"class":58},"{angle}\n",[52,22361,22362,22365,22367,22369,22371,22373,22375,22377,22379],{"class":54,"line":7390},[52,22363,22364],{"class":66}," onChange",[52,22366,70],{"class":231},[52,22368,723],{"class":58},[52,22370,21703],{"class":8545},[52,22372,8548],{"class":231},[52,22374,8540],{"class":66},[52,22376,2289],{"class":58},[52,22378,21722],{"class":66},[52,22380,22381],{"class":58},"(e.target.value))}\n",[52,22383,22384],{"class":54,"line":7395},[52,22385,22386],{"class":58}," />\n",[52,22388,22389],{"class":54,"line":8717},[52,22390,8714],{"class":58},[52,22392,22393],{"class":54,"line":8722},[52,22394,2500],{"class":58},[52,22396,22397],{"class":54,"line":9794},[52,22398,729],{"class":58},[15,22400,21732,22401,22403],{},[31,22402,1199],{}," changes, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,22405,21739,22406,21742],{},[1139,22407,1142],{"href":1141},[23,22409,22411],{"id":22410},"using-with-nextjs-ssr","Using with Next.js / SSR",[15,22413,22414,22415,22419],{},"Shaders only works client-side, as it needs a GPU to run. See the ",[1139,22416,22418],{"href":22417},"/docs/guide/react/ssr","Next.js / SSR"," guide for how to set it up with server-side rendering.",[23,22421,1463],{"id":1462},[1465,22423,22424,22428,22432],{},[1468,22425,22426,1474],{},[1139,22427,1473],{"href":1472},[1468,22429,22430,1481],{},[1139,22431,1480],{"href":1479},[1468,22433,22434,1493],{},[1139,22435,1142],{"href":1141},[156,22437,22438],{},"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":22440},[22441,22442,22443,22444,22445,22446,22447],{"id":21189,"depth":80,"text":21190},{"id":21839,"depth":80,"text":21840},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":22410,"depth":80,"text":22411},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with React",{},"/docs/guide/react/quickstart",{"title":178,"description":22448},"docs/guide/react/1.quickstart","eUXTjqH1sSIhKpDvkRJgcK9YGAu0Hqp7qDlza5DLZ5k",{"id":22455,"title":22418,"body":22456,"category":1904,"description":23347,"exclude":167,"extension":168,"forceFramework":167,"icon":23348,"meta":23349,"navigation":171,"path":22417,"seo":23350,"stem":23351,"__hash__":23352},"guide/docs/guide/react/ssr.md",{"type":8,"value":22457,"toc":23338},[22458,22462,22465,22472,22475,22584,22587,22677,22682,22692,22698,22823,22826,22830,22836,22954,22958,22961,23068,23159,23163,23166,23335],[11,22459,22461],{"id":22460},"ssr-with-nextjs-react","SSR with Next.js / React",[15,22463,22464],{},"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,22466,22468,22469],{"id":22467},"app-router-use-client","App Router: ",[31,22470,22471],{},"'use client'",[15,22473,22474],{},"In Next.js App Router, create a client component wrapper:",[43,22476,22478],{"className":360,"code":22477,"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,22479,22480,22485,22490,22494,22504,22508,22520,22526,22540,22560,22568,22576,22580],{"__ignoreMap":48},[52,22481,22482],{"class":54,"line":55},[52,22483,22484],{"class":559},"// components/MyShader.jsx\n",[52,22486,22487],{"class":54,"line":80},[52,22488,22489],{"class":73},"'use client'\n",[52,22491,22492],{"class":54,"line":108},[52,22493,597],{"emptyLinePlaceholder":171},[52,22495,22496,22498,22500,22502],{"class":54,"line":118},[52,22497,232],{"class":231},[52,22499,235],{"class":58},[52,22501,238],{"class":231},[52,22503,257],{"class":73},[52,22505,22506],{"class":54,"line":594},[52,22507,597],{"emptyLinePlaceholder":171},[52,22509,22510,22512,22514,22516,22518],{"class":54,"line":600},[52,22511,22204],{"class":231},[52,22513,22207],{"class":231},[52,22515,9658],{"class":231},[52,22517,22212],{"class":66},[52,22519,2310],{"class":58},[52,22521,22522,22524],{"class":54,"line":606},[52,22523,2402],{"class":231},[52,22525,2405],{"class":58},[52,22527,22528,22530,22532,22534,22536,22538],{"class":54,"line":653},[52,22529,2213],{"class":58},[52,22531,63],{"class":371},[52,22533,374],{"class":66},[52,22535,70],{"class":231},[52,22537,319],{"class":73},[52,22539,77],{"class":58},[52,22541,22542,22544,22546,22548,22550,22552,22554,22556,22558],{"class":54,"line":662},[52,22543,2476],{"class":58},[52,22545,86],{"class":371},[52,22547,89],{"class":66},[52,22549,70],{"class":231},[52,22551,94],{"class":73},[52,22553,97],{"class":66},[52,22555,70],{"class":231},[52,22557,102],{"class":73},[52,22559,105],{"class":58},[52,22561,22562,22564,22566],{"class":54,"line":671},[52,22563,2476],{"class":58},[52,22565,113],{"class":371},[52,22567,105],{"class":58},[52,22569,22570,22572,22574],{"class":54,"line":676},[52,22571,2491],{"class":58},[52,22573,63],{"class":371},[52,22575,77],{"class":58},[52,22577,22578],{"class":54,"line":682},[52,22579,2500],{"class":58},[52,22581,22582],{"class":54,"line":698},[52,22583,729],{"class":58},[15,22585,22586],{},"Then use it in a Server Component:",[43,22588,22590],{"className":360,"code":22589,"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,22591,22592,22597,22609,22613,22626,22632,22640,22649,22661,22669,22673],{"__ignoreMap":48},[52,22593,22594],{"class":54,"line":55},[52,22595,22596],{"class":559},"// app/page.jsx (Server Component)\n",[52,22598,22599,22601,22604,22606],{"class":54,"line":80},[52,22600,232],{"class":231},[52,22602,22603],{"class":58}," MyShader ",[52,22605,238],{"class":231},[52,22607,22608],{"class":73}," '@/components/MyShader'\n",[52,22610,22611],{"class":54,"line":108},[52,22612,597],{"emptyLinePlaceholder":171},[52,22614,22615,22617,22619,22621,22624],{"class":54,"line":118},[52,22616,22204],{"class":231},[52,22618,22207],{"class":231},[52,22620,9658],{"class":231},[52,22622,22623],{"class":66}," Page",[52,22625,2310],{"class":58},[52,22627,22628,22630],{"class":54,"line":594},[52,22629,2402],{"class":231},[52,22631,2405],{"class":58},[52,22633,22634,22636,22638],{"class":54,"line":600},[52,22635,2213],{"class":58},[52,22637,10357],{"class":62},[52,22639,77],{"class":58},[52,22641,22642,22644,22647],{"class":54,"line":606},[52,22643,2476],{"class":58},[52,22645,22646],{"class":371},"MyShader",[52,22648,105],{"class":58},[52,22650,22651,22653,22655,22657,22659],{"class":54,"line":653},[52,22652,2476],{"class":58},[52,22654,11],{"class":62},[52,22656,10646],{"class":58},[52,22658,11],{"class":62},[52,22660,77],{"class":58},[52,22662,22663,22665,22667],{"class":54,"line":662},[52,22664,2491],{"class":58},[52,22666,10357],{"class":62},[52,22668,77],{"class":58},[52,22670,22671],{"class":54,"line":671},[52,22672,2500],{"class":58},[52,22674,22675],{"class":54,"line":676},[52,22676,729],{"class":58},[15,22678,1825,22679,22681],{},[31,22680,22471],{}," directive marks the component and its subtree as client-only, preventing SSR execution.",[23,22683,22468,22685,22688,22689],{"id":22684},"app-router-nextdynamic-with-ssr-false",[31,22686,22687],{},"next/dynamic"," with ",[31,22690,22691],{},"ssr: false",[15,22693,22694,22695,22697],{},"For the most reliable approach — especially if you want to keep the component file itself framework-agnostic — use ",[31,22696,22687],{}," to disable SSR:",[43,22699,22701],{"className":360,"code":22700,"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,22702,22703,22708,22720,22724,22738,22756,22765,22769,22773,22785,22791,22799,22807,22815,22819],{"__ignoreMap":48},[52,22704,22705],{"class":54,"line":55},[52,22706,22707],{"class":559},"// app/page.jsx\n",[52,22709,22710,22712,22715,22717],{"class":54,"line":80},[52,22711,232],{"class":231},[52,22713,22714],{"class":58}," dynamic ",[52,22716,238],{"class":231},[52,22718,22719],{"class":73}," 'next/dynamic'\n",[52,22721,22722],{"class":54,"line":108},[52,22723,597],{"emptyLinePlaceholder":171},[52,22725,22726,22728,22730,22732,22735],{"class":54,"line":118},[52,22727,1721],{"class":231},[52,22729,22212],{"class":371},[52,22731,1727],{"class":231},[52,22733,22734],{"class":66}," dynamic",[52,22736,22737],{"class":58},"(\n",[52,22739,22740,22743,22745,22748,22750,22753],{"class":54,"line":594},[52,22741,22742],{"class":58}," () ",[52,22744,2425],{"class":231},[52,22746,22747],{"class":231}," import",[52,22749,2289],{"class":58},[52,22751,22752],{"class":73},"'@/components/MyShader'",[52,22754,22755],{"class":58},"),\n",[52,22757,22758,22761,22763],{"class":54,"line":600},[52,22759,22760],{"class":58}," { ssr: ",[52,22762,2292],{"class":371},[52,22764,13446],{"class":58},[52,22766,22767],{"class":54,"line":606},[52,22768,2295],{"class":58},[52,22770,22771],{"class":54,"line":653},[52,22772,597],{"emptyLinePlaceholder":171},[52,22774,22775,22777,22779,22781,22783],{"class":54,"line":662},[52,22776,22204],{"class":231},[52,22778,22207],{"class":231},[52,22780,9658],{"class":231},[52,22782,22623],{"class":66},[52,22784,2310],{"class":58},[52,22786,22787,22789],{"class":54,"line":671},[52,22788,2402],{"class":231},[52,22790,2405],{"class":58},[52,22792,22793,22795,22797],{"class":54,"line":676},[52,22794,2213],{"class":58},[52,22796,10357],{"class":62},[52,22798,77],{"class":58},[52,22800,22801,22803,22805],{"class":54,"line":682},[52,22802,2476],{"class":58},[52,22804,22646],{"class":371},[52,22806,105],{"class":58},[52,22808,22809,22811,22813],{"class":54,"line":698},[52,22810,2491],{"class":58},[52,22812,10357],{"class":62},[52,22814,77],{"class":58},[52,22816,22817],{"class":54,"line":707},[52,22818,2500],{"class":58},[52,22820,22821],{"class":54,"line":2327},[52,22822,729],{"class":58},[15,22824,22825],{},"This defers the component entirely to the client and prevents the module from loading on the server.",[23,22827,22829],{"id":22828},"pages-router","Pages Router",[15,22831,22832,22833,22835],{},"In the Pages Router, the same ",[31,22834,22687],{}," approach works:",[43,22837,22839],{"className":360,"code":22838,"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,22840,22841,22846,22856,22860,22872,22887,22895,22899,22903,22916,22922,22930,22938,22946,22950],{"__ignoreMap":48},[52,22842,22843],{"class":54,"line":55},[52,22844,22845],{"class":559},"// pages/index.jsx\n",[52,22847,22848,22850,22852,22854],{"class":54,"line":80},[52,22849,232],{"class":231},[52,22851,22714],{"class":58},[52,22853,238],{"class":231},[52,22855,22719],{"class":73},[52,22857,22858],{"class":54,"line":108},[52,22859,597],{"emptyLinePlaceholder":171},[52,22861,22862,22864,22866,22868,22870],{"class":54,"line":118},[52,22863,1721],{"class":231},[52,22865,22212],{"class":371},[52,22867,1727],{"class":231},[52,22869,22734],{"class":66},[52,22871,22737],{"class":58},[52,22873,22874,22876,22878,22880,22882,22885],{"class":54,"line":594},[52,22875,22742],{"class":58},[52,22877,2425],{"class":231},[52,22879,22747],{"class":231},[52,22881,2289],{"class":58},[52,22883,22884],{"class":73},"'../components/MyShader'",[52,22886,22755],{"class":58},[52,22888,22889,22891,22893],{"class":54,"line":600},[52,22890,22760],{"class":58},[52,22892,2292],{"class":371},[52,22894,13446],{"class":58},[52,22896,22897],{"class":54,"line":606},[52,22898,2295],{"class":58},[52,22900,22901],{"class":54,"line":653},[52,22902,597],{"emptyLinePlaceholder":171},[52,22904,22905,22907,22909,22911,22914],{"class":54,"line":662},[52,22906,22204],{"class":231},[52,22908,22207],{"class":231},[52,22910,9658],{"class":231},[52,22912,22913],{"class":66}," Home",[52,22915,2310],{"class":58},[52,22917,22918,22920],{"class":54,"line":671},[52,22919,2402],{"class":231},[52,22921,2405],{"class":58},[52,22923,22924,22926,22928],{"class":54,"line":676},[52,22925,2213],{"class":58},[52,22927,8286],{"class":62},[52,22929,77],{"class":58},[52,22931,22932,22934,22936],{"class":54,"line":682},[52,22933,2476],{"class":58},[52,22935,22646],{"class":371},[52,22937,105],{"class":58},[52,22939,22940,22942,22944],{"class":54,"line":698},[52,22941,2491],{"class":58},[52,22943,8286],{"class":62},[52,22945,77],{"class":58},[52,22947,22948],{"class":54,"line":707},[52,22949,2500],{"class":58},[52,22951,22952],{"class":54,"line":2327},[52,22953,729],{"class":58},[23,22955,22957],{"id":22956},"in-a-root-layout","In a root layout",[15,22959,22960],{},"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,22962,22964],{"className":360,"code":22963,"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,22965,22966,22971,22983,22987,23007,23013,23021,23030,23039,23044,23052,23060,23064],{"__ignoreMap":48},[52,22967,22968],{"class":54,"line":55},[52,22969,22970],{"class":559},"// app/layout.jsx\n",[52,22972,22973,22975,22978,22980],{"class":54,"line":80},[52,22974,232],{"class":231},[52,22976,22977],{"class":58}," BackgroundShader ",[52,22979,238],{"class":231},[52,22981,22982],{"class":73}," '@/components/BackgroundShader'\n",[52,22984,22985],{"class":54,"line":108},[52,22986,597],{"emptyLinePlaceholder":171},[52,22988,22989,22991,22993,22995,22998,23001,23004],{"class":54,"line":118},[52,22990,22204],{"class":231},[52,22992,22207],{"class":231},[52,22994,9658],{"class":231},[52,22996,22997],{"class":66}," RootLayout",[52,22999,23000],{"class":58},"({ ",[52,23002,23003],{"class":8545},"children",[52,23005,23006],{"class":58}," }) {\n",[52,23008,23009,23011],{"class":54,"line":594},[52,23010,2402],{"class":231},[52,23012,2405],{"class":58},[52,23014,23015,23017,23019],{"class":54,"line":600},[52,23016,2213],{"class":58},[52,23018,10600],{"class":62},[52,23020,77],{"class":58},[52,23022,23023,23025,23028],{"class":54,"line":606},[52,23024,2476],{"class":58},[52,23026,23027],{"class":62},"body",[52,23029,77],{"class":58},[52,23031,23032,23034,23037],{"class":54,"line":653},[52,23033,8526],{"class":58},[52,23035,23036],{"class":371},"BackgroundShader",[52,23038,105],{"class":58},[52,23040,23041],{"class":54,"line":662},[52,23042,23043],{"class":58}," {children}\n",[52,23045,23046,23048,23050],{"class":54,"line":671},[52,23047,8632],{"class":58},[52,23049,23027],{"class":62},[52,23051,77],{"class":58},[52,23053,23054,23056,23058],{"class":54,"line":676},[52,23055,2491],{"class":58},[52,23057,10600],{"class":62},[52,23059,77],{"class":58},[52,23061,23062],{"class":54,"line":682},[52,23063,2500],{"class":58},[52,23065,23066],{"class":54,"line":698},[52,23067,729],{"class":58},[43,23069,23071],{"className":360,"code":23070,"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,23072,23073,23078,23082,23086,23097,23101,23114,23120,23135,23143,23151,23155],{"__ignoreMap":48},[52,23074,23075],{"class":54,"line":55},[52,23076,23077],{"class":559},"// components/BackgroundShader.jsx\n",[52,23079,23080],{"class":54,"line":80},[52,23081,22489],{"class":73},[52,23083,23084],{"class":54,"line":108},[52,23085,597],{"emptyLinePlaceholder":171},[52,23087,23088,23090,23093,23095],{"class":54,"line":118},[52,23089,232],{"class":231},[52,23091,23092],{"class":58}," { Shader, Aurora } ",[52,23094,238],{"class":231},[52,23096,257],{"class":73},[52,23098,23099],{"class":54,"line":594},[52,23100,597],{"emptyLinePlaceholder":171},[52,23102,23103,23105,23107,23109,23112],{"class":54,"line":600},[52,23104,22204],{"class":231},[52,23106,22207],{"class":231},[52,23108,9658],{"class":231},[52,23110,23111],{"class":66}," BackgroundShader",[52,23113,2310],{"class":58},[52,23115,23116,23118],{"class":54,"line":606},[52,23117,2402],{"class":231},[52,23119,2405],{"class":58},[52,23121,23122,23124,23126,23128,23130,23133],{"class":54,"line":653},[52,23123,2213],{"class":58},[52,23125,63],{"class":371},[52,23127,374],{"class":66},[52,23129,70],{"class":231},[52,23131,23132],{"class":73},"\"fixed inset-0 -z-10 pointer-events-none\"",[52,23134,77],{"class":58},[52,23136,23137,23139,23141],{"class":54,"line":662},[52,23138,2476],{"class":58},[52,23140,10336],{"class":371},[52,23142,105],{"class":58},[52,23144,23145,23147,23149],{"class":54,"line":671},[52,23146,2491],{"class":58},[52,23148,63],{"class":371},[52,23150,77],{"class":58},[52,23152,23153],{"class":54,"line":676},[52,23154,2500],{"class":58},[52,23156,23157],{"class":54,"line":682},[52,23158,729],{"class":58},[23,23160,23162],{"id":23161},"react-without-nextjs","React (without Next.js)",[15,23164,23165],{},"In a React SSR setup without Next.js, use a mounted state guard:",[43,23167,23169],{"className":360,"code":23168,"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,23170,23171,23182,23192,23196,23208,23234,23238,23248,23259,23263,23267,23287,23291,23297,23311,23319,23327,23331],{"__ignoreMap":48},[52,23172,23173,23175,23178,23180],{"class":54,"line":55},[52,23174,232],{"class":231},[52,23176,23177],{"class":58}," { useState, useEffect } ",[52,23179,238],{"class":231},[52,23181,2350],{"class":73},[52,23183,23184,23186,23188,23190],{"class":54,"line":80},[52,23185,232],{"class":231},[52,23187,22191],{"class":58},[52,23189,238],{"class":231},[52,23191,257],{"class":73},[52,23193,23194],{"class":54,"line":108},[52,23195,597],{"emptyLinePlaceholder":171},[52,23197,23198,23200,23202,23204,23206],{"class":54,"line":118},[52,23199,22204],{"class":231},[52,23201,22207],{"class":231},[52,23203,9658],{"class":231},[52,23205,22212],{"class":66},[52,23207,2310],{"class":58},[52,23209,23210,23212,23214,23217,23219,23222,23224,23226,23228,23230,23232],{"class":54,"line":594},[52,23211,2368],{"class":231},[52,23213,2371],{"class":58},[52,23215,23216],{"class":371},"mounted",[52,23218,1881],{"class":58},[52,23220,23221],{"class":371},"setMounted",[52,23223,2382],{"class":58},[52,23225,70],{"class":231},[52,23227,2387],{"class":66},[52,23229,2289],{"class":58},[52,23231,2292],{"class":371},[52,23233,2295],{"class":58},[52,23235,23236],{"class":54,"line":600},[52,23237,597],{"emptyLinePlaceholder":171},[52,23239,23240,23242,23244,23246],{"class":54,"line":606},[52,23241,14056],{"class":66},[52,23243,13816],{"class":58},[52,23245,2425],{"class":231},[52,23247,2904],{"class":58},[52,23249,23250,23253,23255,23257],{"class":54,"line":653},[52,23251,23252],{"class":66}," setMounted",[52,23254,2289],{"class":58},[52,23256,1996],{"class":371},[52,23258,2295],{"class":58},[52,23260,23261],{"class":54,"line":662},[52,23262,14150],{"class":58},[52,23264,23265],{"class":54,"line":671},[52,23266,597],{"emptyLinePlaceholder":171},[52,23268,23269,23272,23275,23278,23281,23284],{"class":54,"line":676},[52,23270,23271],{"class":231}," if",[52,23273,23274],{"class":58}," (",[52,23276,23277],{"class":231},"!",[52,23279,23280],{"class":58},"mounted) ",[52,23282,23283],{"class":231},"return",[52,23285,23286],{"class":371}," null\n",[52,23288,23289],{"class":54,"line":682},[52,23290,597],{"emptyLinePlaceholder":171},[52,23292,23293,23295],{"class":54,"line":698},[52,23294,2402],{"class":231},[52,23296,2405],{"class":58},[52,23298,23299,23301,23303,23305,23307,23309],{"class":54,"line":707},[52,23300,2213],{"class":58},[52,23302,63],{"class":371},[52,23304,374],{"class":66},[52,23306,70],{"class":231},[52,23308,319],{"class":73},[52,23310,77],{"class":58},[52,23312,23313,23315,23317],{"class":54,"line":2327},[52,23314,2476],{"class":58},[52,23316,86],{"class":371},[52,23318,105],{"class":58},[52,23320,23321,23323,23325],{"class":54,"line":7369},[52,23322,2491],{"class":58},[52,23324,63],{"class":371},[52,23326,77],{"class":58},[52,23328,23329],{"class":54,"line":7379},[52,23330,2500],{"class":58},[52,23332,23333],{"class":54,"line":7390},[52,23334,729],{"class":58},[156,23336,23337],{},"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":23339},[23340,23342,23344,23345,23346],{"id":22467,"depth":80,"text":23341},"App Router: 'use client'",{"id":22684,"depth":80,"text":23343},"App Router: next/dynamic with ssr: false",{"id":22828,"depth":80,"text":22829},{"id":22956,"depth":80,"text":22957},{"id":23161,"depth":80,"text":23162},"Using Shaders in Next.js and React SSR applications","server",{},{"title":22418,"description":23347},"docs/guide/react/ssr","t6KTqL_4y4p7XMWVlq30ethmKSdGU_OtUJSmjfHiJT4",{"id":23354,"title":178,"body":23355,"category":165,"description":23964,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":23965,"navigation":171,"path":23966,"seo":23967,"stem":23968,"__hash__":23969},"guide/docs/guide/solid/1.quickstart.md",{"type":8,"value":23356,"toc":23955},[23357,23361,23363,23375,23377,23391,23393,23395,23449,23451,23457,23459,23470,23603,23613,23615,23618,23690,23697,23920,23923,23927,23931,23937,23939,23953],[11,23358,23360],{"id":23359},"quickstart-solid","Quickstart (Solid)",[23,23362,21190],{"id":21189},[43,23364,23365],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,23366,23367],{"__ignoreMap":48},[52,23368,23369,23371,23373],{"class":54,"line":55},[52,23370,199],{"class":66},[52,23372,202],{"class":73},[52,23374,205],{"class":73},[23,23376,21840],{"id":21839},[43,23378,23379],{"className":222,"code":276,"language":224,"meta":48,"style":48},[31,23380,23381],{"__ignoreMap":48},[52,23382,23383,23385,23387,23389],{"class":54,"line":55},[52,23384,232],{"class":231},[52,23386,235],{"class":58},[52,23388,238],{"class":231},[52,23390,289],{"class":73},[23,23392,293],{"id":292},[15,23394,21859],{},[43,23396,23397],{"className":419,"code":304,"language":420,"meta":48,"style":48},[31,23398,23399,23413,23433,23441],{"__ignoreMap":48},[52,23400,23401,23403,23405,23407,23409,23411],{"class":54,"line":55},[52,23402,59],{"class":58},[52,23404,63],{"class":371},[52,23406,67],{"class":66},[52,23408,70],{"class":231},[52,23410,319],{"class":73},[52,23412,77],{"class":58},[52,23414,23415,23417,23419,23421,23423,23425,23427,23429,23431],{"class":54,"line":80},[52,23416,83],{"class":58},[52,23418,86],{"class":371},[52,23420,89],{"class":66},[52,23422,70],{"class":231},[52,23424,94],{"class":73},[52,23426,97],{"class":66},[52,23428,70],{"class":231},[52,23430,102],{"class":73},[52,23432,105],{"class":58},[52,23434,23435,23437,23439],{"class":54,"line":108},[52,23436,83],{"class":58},[52,23438,113],{"class":371},[52,23440,105],{"class":58},[52,23442,23443,23445,23447],{"class":54,"line":118},[52,23444,121],{"class":58},[52,23446,63],{"class":371},[52,23448,77],{"class":58},[19,23450],{":preset":529},[15,23452,23453,534,23455,21922],{},[31,23454,33],{},[31,23456,40],{},[23,23458,544],{"id":543},[15,23460,1825,23461,21929,23463,16248,23466,21935,23468,540],{},[31,23462,40],{},[31,23464,23465],{},"class",[31,23467,156],{},[31,23469,33],{},[43,23471,23473],{"className":419,"code":23472,"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,23474,23475,23483,23497,23505,23513,23517,23525,23545,23553,23561,23565,23573,23587,23595],{"__ignoreMap":48},[52,23476,23477,23479,23481],{"class":54,"line":55},[52,23478,723],{"class":58},[52,23480,726],{"class":559},[52,23482,729],{"class":58},[52,23484,23485,23487,23489,23491,23493,23495],{"class":54,"line":80},[52,23486,59],{"class":58},[52,23488,63],{"class":371},[52,23490,67],{"class":66},[52,23492,70],{"class":231},[52,23494,573],{"class":73},[52,23496,77],{"class":58},[52,23498,23499,23501,23503],{"class":54,"line":108},[52,23500,83],{"class":58},[52,23502,86],{"class":371},[52,23504,105],{"class":58},[52,23506,23507,23509,23511],{"class":54,"line":118},[52,23508,121],{"class":58},[52,23510,63],{"class":371},[52,23512,77],{"class":58},[52,23514,23515],{"class":54,"line":594},[52,23516,597],{"emptyLinePlaceholder":171},[52,23518,23519,23521,23523],{"class":54,"line":600},[52,23520,723],{"class":58},[52,23522,770],{"class":559},[52,23524,729],{"class":58},[52,23526,23527,23529,23531,23533,23535,23537,23539,23541,23543],{"class":54,"line":606},[52,23528,59],{"class":58},[52,23530,63],{"class":371},[52,23532,613],{"class":66},[52,23534,70],{"class":231},[52,23536,785],{"class":58},[52,23538,788],{"class":73},[52,23540,791],{"class":58},[52,23542,794],{"class":73},[52,23544,797],{"class":58},[52,23546,23547,23549,23551],{"class":54,"line":653},[52,23548,83],{"class":58},[52,23550,86],{"class":371},[52,23552,105],{"class":58},[52,23554,23555,23557,23559],{"class":54,"line":662},[52,23556,121],{"class":58},[52,23558,63],{"class":371},[52,23560,77],{"class":58},[52,23562,23563],{"class":54,"line":671},[52,23564,597],{"emptyLinePlaceholder":171},[52,23566,23567,23569,23571],{"class":54,"line":676},[52,23568,723],{"class":58},[52,23570,22039],{"class":559},[52,23572,729],{"class":58},[52,23574,23575,23577,23579,23581,23583,23585],{"class":54,"line":682},[52,23576,59],{"class":58},[52,23578,63],{"class":371},[52,23580,67],{"class":66},[52,23582,70],{"class":231},[52,23584,693],{"class":73},[52,23586,77],{"class":58},[52,23588,23589,23591,23593],{"class":54,"line":698},[52,23590,83],{"class":58},[52,23592,86],{"class":371},[52,23594,105],{"class":58},[52,23596,23597,23599,23601],{"class":54,"line":707},[52,23598,121],{"class":58},[52,23600,63],{"class":371},[52,23602,77],{"class":58},[15,23604,22074,23605,16248,23607,22079,23609,22082,23611,22085],{},[31,23606,23465],{},[31,23608,156],{},[31,23610,33],{},[31,23612,40],{},[23,23614,1134],{"id":1133},[15,23616,23617],{},"Pass props directly to configure each component. All props use camelCase, consistent with Solid's JSX conventions:",[43,23619,23620],{"className":419,"code":1310,"language":420,"meta":48,"style":48},[31,23621,23622,23636,23642,23650,23658,23670,23678,23682],{"__ignoreMap":48},[52,23623,23624,23626,23628,23630,23632,23634],{"class":54,"line":55},[52,23625,59],{"class":58},[52,23627,63],{"class":371},[52,23629,67],{"class":66},[52,23631,70],{"class":231},[52,23633,319],{"class":73},[52,23635,77],{"class":58},[52,23637,23638,23640],{"class":54,"line":80},[52,23639,83],{"class":58},[52,23641,1171],{"class":371},[52,23643,23644,23646,23648],{"class":54,"line":108},[52,23645,1176],{"class":66},[52,23647,70],{"class":231},[52,23649,1181],{"class":73},[52,23651,23652,23654,23656],{"class":54,"line":118},[52,23653,1186],{"class":66},[52,23655,70],{"class":231},[52,23657,1191],{"class":73},[52,23659,23660,23662,23664,23666,23668],{"class":54,"line":594},[52,23661,1278],{"class":66},[52,23663,70],{"class":231},[52,23665,723],{"class":58},[52,23667,1206],{"class":371},[52,23669,729],{"class":58},[52,23671,23672,23674,23676],{"class":54,"line":600},[52,23673,1291],{"class":66},[52,23675,70],{"class":231},[52,23677,1219],{"class":73},[52,23679,23680],{"class":54,"line":606},[52,23681,1224],{"class":58},[52,23683,23684,23686,23688],{"class":54,"line":653},[52,23685,121],{"class":58},[52,23687,63],{"class":371},[52,23689,77],{"class":58},[15,23691,23692,23693,23696],{},"Props also accept signals — ",[31,23694,23695],{},"createSignal"," and any other reactive primitive work exactly as you'd expect:",[43,23698,23700],{"className":419,"code":23699,"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,23701,23702,23712,23722,23726,23738,23762,23766,23772,23776,23790,23819,23827,23831,23837,23845,23857,23869,23882,23904,23908,23912,23916],{"__ignoreMap":48},[52,23703,23704,23706,23708,23710],{"class":54,"line":55},[52,23705,232],{"class":231},[52,23707,2645],{"class":58},[52,23709,238],{"class":231},[52,23711,2650],{"class":73},[52,23713,23714,23716,23718,23720],{"class":54,"line":80},[52,23715,232],{"class":231},[52,23717,22191],{"class":58},[52,23719,238],{"class":231},[52,23721,289],{"class":73},[52,23723,23724],{"class":54,"line":108},[52,23725,597],{"emptyLinePlaceholder":171},[52,23727,23728,23730,23732,23734,23736],{"class":54,"line":118},[52,23729,22204],{"class":231},[52,23731,22207],{"class":231},[52,23733,9658],{"class":231},[52,23735,22212],{"class":66},[52,23737,2310],{"class":58},[52,23739,23740,23742,23744,23746,23748,23750,23752,23754,23756,23758,23760],{"class":54,"line":594},[52,23741,2368],{"class":231},[52,23743,2371],{"class":58},[52,23745,1199],{"class":371},[52,23747,1881],{"class":58},[52,23749,8486],{"class":371},[52,23751,2382],{"class":58},[52,23753,70],{"class":231},[52,23755,2681],{"class":66},[52,23757,2289],{"class":58},[52,23759,6387],{"class":371},[52,23761,2295],{"class":58},[52,23763,23764],{"class":54,"line":600},[52,23765,597],{"emptyLinePlaceholder":171},[52,23767,23768,23770],{"class":54,"line":606},[52,23769,2402],{"class":231},[52,23771,2405],{"class":58},[52,23773,23774],{"class":54,"line":653},[52,23775,8513],{"class":58},[52,23777,23778,23780,23782,23784,23786,23788],{"class":54,"line":662},[52,23779,2476],{"class":58},[52,23781,63],{"class":371},[52,23783,67],{"class":66},[52,23785,70],{"class":231},[52,23787,319],{"class":73},[52,23789,77],{"class":58},[52,23791,23792,23794,23796,23798,23800,23802,23804,23806,23808,23810,23812,23814,23816],{"class":54,"line":671},[52,23793,8526],{"class":58},[52,23795,86],{"class":371},[52,23797,89],{"class":66},[52,23799,70],{"class":231},[52,23801,22279],{"class":73},[52,23803,97],{"class":66},[52,23805,70],{"class":231},[52,23807,22286],{"class":73},[52,23809,8249],{"class":66},[52,23811,70],{"class":231},[52,23813,723],{"class":58},[52,23815,1199],{"class":66},[52,23817,23818],{"class":58},"()} />\n",[52,23820,23821,23823,23825],{"class":54,"line":676},[52,23822,8632],{"class":58},[52,23824,63],{"class":371},[52,23826,77],{"class":58},[52,23828,23829],{"class":54,"line":682},[52,23830,597],{"emptyLinePlaceholder":171},[52,23832,23833,23835],{"class":54,"line":698},[52,23834,2476],{"class":58},[52,23836,22312],{"class":62},[52,23838,23839,23841,23843],{"class":54,"line":707},[52,23840,22317],{"class":66},[52,23842,70],{"class":231},[52,23844,22322],{"class":73},[52,23846,23847,23849,23851,23853,23855],{"class":54,"line":2327},[52,23848,22327],{"class":66},[52,23850,70],{"class":231},[52,23852,723],{"class":58},[52,23854,6387],{"class":371},[52,23856,729],{"class":58},[52,23858,23859,23861,23863,23865,23867],{"class":54,"line":7369},[52,23860,22340],{"class":66},[52,23862,70],{"class":231},[52,23864,723],{"class":58},[52,23866,22347],{"class":371},[52,23868,729],{"class":58},[52,23870,23871,23873,23875,23877,23879],{"class":54,"line":7379},[52,23872,22354],{"class":66},[52,23874,70],{"class":231},[52,23876,723],{"class":58},[52,23878,1199],{"class":66},[52,23880,23881],{"class":58},"()}\n",[52,23883,23884,23887,23889,23891,23893,23895,23897,23899,23901],{"class":54,"line":7390},[52,23885,23886],{"class":66}," onInput",[52,23888,70],{"class":231},[52,23890,723],{"class":58},[52,23892,21703],{"class":8545},[52,23894,8548],{"class":231},[52,23896,8540],{"class":66},[52,23898,2289],{"class":58},[52,23900,21722],{"class":66},[52,23902,23903],{"class":58},"(e.currentTarget.value))}\n",[52,23905,23906],{"class":54,"line":7395},[52,23907,22386],{"class":58},[52,23909,23910],{"class":54,"line":8717},[52,23911,8714],{"class":58},[52,23913,23914],{"class":54,"line":8722},[52,23915,2500],{"class":58},[52,23917,23918],{"class":54,"line":9794},[52,23919,729],{"class":58},[15,23921,23922],{},"When the signal updates, the shader updates on the GPU instantly — no recompilation, no flicker.",[15,23924,21739,23925,21742],{},[1139,23926,1142],{"href":1141},[23,23928,23930],{"id":23929},"using-with-solidstart-ssr","Using with SolidStart / SSR",[15,23932,22414,23933,22419],{},[1139,23934,23936],{"href":23935},"/docs/guide/solid/ssr","SolidStart / SSR",[23,23938,1463],{"id":1462},[1465,23940,23941,23945,23949],{},[1468,23942,23943,1474],{},[1139,23944,1473],{"href":1472},[1468,23946,23947,1481],{},[1139,23948,1480],{"href":1479},[1468,23950,23951,1493],{},[1139,23952,1142],{"href":1141},[156,23954,22438],{},{"title":48,"searchDepth":80,"depth":80,"links":23956},[23957,23958,23959,23960,23961,23962,23963],{"id":21189,"depth":80,"text":21190},{"id":21839,"depth":80,"text":21840},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":23929,"depth":80,"text":23930},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Solid",{},"/docs/guide/solid/quickstart",{"title":178,"description":23964},"docs/guide/solid/1.quickstart","54c6mfisCkm2qsLewVut-juy9MucN4ygBQ_nEXCjvzA",{"id":23971,"title":23936,"body":23972,"category":1904,"description":24543,"exclude":167,"extension":168,"forceFramework":167,"icon":23348,"meta":24544,"navigation":171,"path":23935,"seo":24545,"stem":24546,"__hash__":24547},"guide/docs/guide/solid/ssr.md",{"type":8,"value":23973,"toc":24534},[23974,23978,23981,23988,23994,24085,24201,24213,24220,24229,24331,24337,24343,24521,24525,24531],[11,23975,23977],{"id":23976},"ssr-with-solidstart-solid","SSR with SolidStart / Solid",[15,23979,23980],{},"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,23982,23984,23987],{"id":23983},"clientonly-solidstart",[31,23985,23986],{},"clientOnly"," (SolidStart)",[15,23989,23990,23991,23993],{},"SolidStart provides a ",[31,23992,23986],{}," utility that defers a component entirely to the client. This is the recommended approach:",[43,23995,23997],{"className":360,"code":23996,"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,23998,23999,24003,24013,24017,24029,24035,24049,24069,24077,24081],{"__ignoreMap":48},[52,24000,24001],{"class":54,"line":55},[52,24002,22484],{"class":559},[52,24004,24005,24007,24009,24011],{"class":54,"line":80},[52,24006,232],{"class":231},[52,24008,22191],{"class":58},[52,24010,238],{"class":231},[52,24012,289],{"class":73},[52,24014,24015],{"class":54,"line":108},[52,24016,597],{"emptyLinePlaceholder":171},[52,24018,24019,24021,24023,24025,24027],{"class":54,"line":118},[52,24020,22204],{"class":231},[52,24022,22207],{"class":231},[52,24024,9658],{"class":231},[52,24026,22212],{"class":66},[52,24028,2310],{"class":58},[52,24030,24031,24033],{"class":54,"line":594},[52,24032,2402],{"class":231},[52,24034,2405],{"class":58},[52,24036,24037,24039,24041,24043,24045,24047],{"class":54,"line":600},[52,24038,2213],{"class":58},[52,24040,63],{"class":371},[52,24042,67],{"class":66},[52,24044,70],{"class":231},[52,24046,319],{"class":73},[52,24048,77],{"class":58},[52,24050,24051,24053,24055,24057,24059,24061,24063,24065,24067],{"class":54,"line":606},[52,24052,2476],{"class":58},[52,24054,86],{"class":371},[52,24056,89],{"class":66},[52,24058,70],{"class":231},[52,24060,94],{"class":73},[52,24062,97],{"class":66},[52,24064,70],{"class":231},[52,24066,102],{"class":73},[52,24068,105],{"class":58},[52,24070,24071,24073,24075],{"class":54,"line":653},[52,24072,2491],{"class":58},[52,24074,63],{"class":371},[52,24076,77],{"class":58},[52,24078,24079],{"class":54,"line":662},[52,24080,2500],{"class":58},[52,24082,24083],{"class":54,"line":671},[52,24084,729],{"class":58},[43,24086,24088],{"className":360,"code":24087,"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,24089,24090,24095,24107,24111,24135,24139,24151,24157,24165,24173,24185,24193,24197],{"__ignoreMap":48},[52,24091,24092],{"class":54,"line":55},[52,24093,24094],{"class":559},"// routes/index.jsx\n",[52,24096,24097,24099,24102,24104],{"class":54,"line":80},[52,24098,232],{"class":231},[52,24100,24101],{"class":58}," { clientOnly } ",[52,24103,238],{"class":231},[52,24105,24106],{"class":73}," '@solidjs/start'\n",[52,24108,24109],{"class":54,"line":108},[52,24110,597],{"emptyLinePlaceholder":171},[52,24112,24113,24115,24117,24119,24122,24124,24126,24128,24130,24132],{"class":54,"line":118},[52,24114,1721],{"class":231},[52,24116,22212],{"class":371},[52,24118,1727],{"class":231},[52,24120,24121],{"class":66}," clientOnly",[52,24123,13816],{"class":58},[52,24125,2425],{"class":231},[52,24127,22747],{"class":231},[52,24129,2289],{"class":58},[52,24131,22884],{"class":73},[52,24133,24134],{"class":58},"))\n",[52,24136,24137],{"class":54,"line":594},[52,24138,597],{"emptyLinePlaceholder":171},[52,24140,24141,24143,24145,24147,24149],{"class":54,"line":600},[52,24142,22204],{"class":231},[52,24144,22207],{"class":231},[52,24146,9658],{"class":231},[52,24148,22623],{"class":66},[52,24150,2310],{"class":58},[52,24152,24153,24155],{"class":54,"line":606},[52,24154,2402],{"class":231},[52,24156,2405],{"class":58},[52,24158,24159,24161,24163],{"class":54,"line":653},[52,24160,2213],{"class":58},[52,24162,10357],{"class":62},[52,24164,77],{"class":58},[52,24166,24167,24169,24171],{"class":54,"line":662},[52,24168,2476],{"class":58},[52,24170,22646],{"class":371},[52,24172,105],{"class":58},[52,24174,24175,24177,24179,24181,24183],{"class":54,"line":671},[52,24176,2476],{"class":58},[52,24178,11],{"class":62},[52,24180,10646],{"class":58},[52,24182,11],{"class":62},[52,24184,77],{"class":58},[52,24186,24187,24189,24191],{"class":54,"line":676},[52,24188,2491],{"class":58},[52,24190,10357],{"class":62},[52,24192,77],{"class":58},[52,24194,24195],{"class":54,"line":682},[52,24196,2500],{"class":58},[52,24198,24199],{"class":54,"line":698},[52,24200,729],{"class":58},[15,24202,24203,24205,24206,24209,24210,24212],{},[31,24204,23986],{}," wraps the component in a ",[31,24207,24208],{},"Suspense"," boundary and only renders it in the browser — it returns ",[31,24211,14045],{}," during SSR.",[23,24214,24216,24219],{"id":24215},"isserver-guard",[31,24217,24218],{},"isServer"," guard",[15,24221,24222,24223,24225,24226,1540],{},"For finer control, check ",[31,24224,24218],{}," from ",[31,24227,24228],{},"solid-js/web",[43,24230,24232],{"className":360,"code":24231,"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,24233,24234,24246,24256,24260,24272,24283,24287,24293,24307,24315,24323,24327],{"__ignoreMap":48},[52,24235,24236,24238,24241,24243],{"class":54,"line":55},[52,24237,232],{"class":231},[52,24239,24240],{"class":58}," { isServer } ",[52,24242,238],{"class":231},[52,24244,24245],{"class":73}," 'solid-js/web'\n",[52,24247,24248,24250,24252,24254],{"class":54,"line":80},[52,24249,232],{"class":231},[52,24251,22191],{"class":58},[52,24253,238],{"class":231},[52,24255,289],{"class":73},[52,24257,24258],{"class":54,"line":108},[52,24259,597],{"emptyLinePlaceholder":171},[52,24261,24262,24264,24266,24268,24270],{"class":54,"line":118},[52,24263,22204],{"class":231},[52,24265,22207],{"class":231},[52,24267,9658],{"class":231},[52,24269,22212],{"class":66},[52,24271,2310],{"class":58},[52,24273,24274,24276,24279,24281],{"class":54,"line":594},[52,24275,23271],{"class":231},[52,24277,24278],{"class":58}," (isServer) ",[52,24280,23283],{"class":231},[52,24282,23286],{"class":371},[52,24284,24285],{"class":54,"line":600},[52,24286,597],{"emptyLinePlaceholder":171},[52,24288,24289,24291],{"class":54,"line":606},[52,24290,2402],{"class":231},[52,24292,2405],{"class":58},[52,24294,24295,24297,24299,24301,24303,24305],{"class":54,"line":653},[52,24296,2213],{"class":58},[52,24298,63],{"class":371},[52,24300,67],{"class":66},[52,24302,70],{"class":231},[52,24304,319],{"class":73},[52,24306,77],{"class":58},[52,24308,24309,24311,24313],{"class":54,"line":662},[52,24310,2476],{"class":58},[52,24312,86],{"class":371},[52,24314,105],{"class":58},[52,24316,24317,24319,24321],{"class":54,"line":671},[52,24318,2491],{"class":58},[52,24320,63],{"class":371},[52,24322,77],{"class":58},[52,24324,24325],{"class":54,"line":676},[52,24326,2500],{"class":58},[52,24328,24329],{"class":54,"line":682},[52,24330,729],{"class":58},[23,24332,24334,24219],{"id":24333},"onmount-guard",[31,24335,24336],{},"onMount",[15,24338,24339,24340,24342],{},"Alternatively, use ",[31,24341,24336],{}," with a signal to defer rendering until the component is mounted in the browser:",[43,24344,24346],{"className":360,"code":24345,"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,24347,24348,24359,24369,24373,24385,24409,24413,24430,24434,24440,24454,24468,24482,24491,24500,24505,24513,24517],{"__ignoreMap":48},[52,24349,24350,24352,24355,24357],{"class":54,"line":55},[52,24351,232],{"class":231},[52,24353,24354],{"class":58}," { createSignal, onMount } ",[52,24356,238],{"class":231},[52,24358,2650],{"class":73},[52,24360,24361,24363,24365,24367],{"class":54,"line":80},[52,24362,232],{"class":231},[52,24364,22191],{"class":58},[52,24366,238],{"class":231},[52,24368,289],{"class":73},[52,24370,24371],{"class":54,"line":108},[52,24372,597],{"emptyLinePlaceholder":171},[52,24374,24375,24377,24379,24381,24383],{"class":54,"line":118},[52,24376,22204],{"class":231},[52,24378,22207],{"class":231},[52,24380,9658],{"class":231},[52,24382,22212],{"class":66},[52,24384,2310],{"class":58},[52,24386,24387,24389,24391,24393,24395,24397,24399,24401,24403,24405,24407],{"class":54,"line":594},[52,24388,2368],{"class":231},[52,24390,2371],{"class":58},[52,24392,23216],{"class":371},[52,24394,1881],{"class":58},[52,24396,23221],{"class":371},[52,24398,2382],{"class":58},[52,24400,70],{"class":231},[52,24402,2681],{"class":66},[52,24404,2289],{"class":58},[52,24406,2292],{"class":371},[52,24408,2295],{"class":58},[52,24410,24411],{"class":54,"line":600},[52,24412,597],{"emptyLinePlaceholder":171},[52,24414,24415,24417,24419,24421,24424,24426,24428],{"class":54,"line":606},[52,24416,14425],{"class":66},[52,24418,13816],{"class":58},[52,24420,2425],{"class":231},[52,24422,24423],{"class":66}," setMounted",[52,24425,2289],{"class":58},[52,24427,1996],{"class":371},[52,24429,24134],{"class":58},[52,24431,24432],{"class":54,"line":653},[52,24433,597],{"emptyLinePlaceholder":171},[52,24435,24436,24438],{"class":54,"line":662},[52,24437,2402],{"class":231},[52,24439,2405],{"class":58},[52,24441,24442,24444,24446,24448,24450,24452],{"class":54,"line":671},[52,24443,2213],{"class":58},[52,24445,8286],{"class":62},[52,24447,67],{"class":66},[52,24449,70],{"class":231},[52,24451,319],{"class":73},[52,24453,77],{"class":58},[52,24455,24456,24459,24461,24463,24466],{"class":54,"line":676},[52,24457,24458],{"class":58}," {",[52,24460,23216],{"class":66},[52,24462,2735],{"class":58},[52,24464,24465],{"class":231},"&&",[52,24467,2405],{"class":58},[52,24469,24470,24472,24474,24476,24478,24480],{"class":54,"line":682},[52,24471,8526],{"class":58},[52,24473,63],{"class":371},[52,24475,67],{"class":66},[52,24477,70],{"class":231},[52,24479,319],{"class":73},[52,24481,77],{"class":58},[52,24483,24484,24487,24489],{"class":54,"line":698},[52,24485,24486],{"class":58}," \u003C",[52,24488,86],{"class":371},[52,24490,105],{"class":58},[52,24492,24493,24496,24498],{"class":54,"line":707},[52,24494,24495],{"class":58}," \u003C/",[52,24497,63],{"class":371},[52,24499,77],{"class":58},[52,24501,24502],{"class":54,"line":2327},[52,24503,24504],{"class":58}," )}\n",[52,24506,24507,24509,24511],{"class":54,"line":7369},[52,24508,2491],{"class":58},[52,24510,8286],{"class":62},[52,24512,77],{"class":58},[52,24514,24515],{"class":54,"line":7379},[52,24516,2500],{"class":58},[52,24518,24519],{"class":54,"line":7390},[52,24520,729],{"class":58},[23,24522,24524],{"id":24523},"solid-without-solidstart","Solid (without SolidStart)",[15,24526,24527,24528,24530],{},"In a Solid app without SolidStart, the ",[31,24529,24336],{}," approach above works universally. The component renders nothing on the server and initializes the shader on the client after mount.",[156,24532,24533],{},"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":24535},[24536,24538,24540,24542],{"id":23983,"depth":80,"text":24537},"clientOnly (SolidStart)",{"id":24215,"depth":80,"text":24539},"isServer guard",{"id":24333,"depth":80,"text":24541},"onMount guard",{"id":24523,"depth":80,"text":24524},"Using Shaders in SolidStart and Solid SSR applications",{},{"title":23936,"description":24543},"docs/guide/solid/ssr","_zwghlFatxuYWMGQwlrddB7x8WS0jl-qQlEb5GcMUvg",{"id":24549,"title":178,"body":24550,"category":165,"description":25084,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":25085,"navigation":171,"path":25086,"seo":25087,"stem":25088,"__hash__":25089},"guide/docs/guide/svelte/1.quickstart.md",{"type":8,"value":24551,"toc":25075},[24552,24556,24558,24570,24572,24586,24588,24590,24644,24646,24652,24654,24664,24780,24790,24792,24799,24870,24880,25038,25042,25046,25050,25056,25058,25072],[11,24553,24555],{"id":24554},"quickstart-svelte","Quickstart (Svelte)",[23,24557,21190],{"id":21189},[43,24559,24560],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,24561,24562],{"__ignoreMap":48},[52,24563,24564,24566,24568],{"class":54,"line":55},[52,24565,199],{"class":66},[52,24567,202],{"class":73},[52,24569,205],{"class":73},[23,24571,21840],{"id":21839},[43,24573,24574],{"className":222,"code":260,"language":224,"meta":48,"style":48},[31,24575,24576],{"__ignoreMap":48},[52,24577,24578,24580,24582,24584],{"class":54,"line":55},[52,24579,232],{"class":231},[52,24581,235],{"class":58},[52,24583,238],{"class":231},[52,24585,273],{"class":73},[23,24587,293],{"id":292},[15,24589,21859],{},[43,24591,24592],{"className":2507,"code":304,"language":2509,"meta":48,"style":48},[31,24593,24594,24608,24628,24636],{"__ignoreMap":48},[52,24595,24596,24598,24600,24602,24604,24606],{"class":54,"line":55},[52,24597,59],{"class":58},[52,24599,63],{"class":371},[52,24601,67],{"class":66},[52,24603,70],{"class":58},[52,24605,319],{"class":73},[52,24607,77],{"class":58},[52,24609,24610,24612,24614,24616,24618,24620,24622,24624,24626],{"class":54,"line":80},[52,24611,83],{"class":58},[52,24613,86],{"class":371},[52,24615,89],{"class":66},[52,24617,70],{"class":58},[52,24619,94],{"class":73},[52,24621,97],{"class":66},[52,24623,70],{"class":58},[52,24625,102],{"class":73},[52,24627,105],{"class":58},[52,24629,24630,24632,24634],{"class":54,"line":108},[52,24631,83],{"class":58},[52,24633,113],{"class":371},[52,24635,105],{"class":58},[52,24637,24638,24640,24642],{"class":54,"line":118},[52,24639,121],{"class":58},[52,24641,63],{"class":371},[52,24643,77],{"class":58},[19,24645],{":preset":529},[15,24647,24648,534,24650,21922],{},[31,24649,33],{},[31,24651,40],{},[23,24653,544],{"id":543},[15,24655,1825,24656,21929,24658,16248,24660,21935,24662,540],{},[31,24657,40],{},[31,24659,23465],{},[31,24661,156],{},[31,24663,33],{},[43,24665,24667],{"className":2507,"code":24666,"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,24668,24669,24673,24687,24695,24703,24707,24711,24725,24733,24741,24745,24750,24764,24772],{"__ignoreMap":48},[52,24670,24671],{"class":54,"line":55},[52,24672,560],{"class":559},[52,24674,24675,24677,24679,24681,24683,24685],{"class":54,"line":80},[52,24676,59],{"class":58},[52,24678,63],{"class":371},[52,24680,67],{"class":66},[52,24682,70],{"class":58},[52,24684,573],{"class":73},[52,24686,77],{"class":58},[52,24688,24689,24691,24693],{"class":54,"line":108},[52,24690,83],{"class":58},[52,24692,86],{"class":371},[52,24694,105],{"class":58},[52,24696,24697,24699,24701],{"class":54,"line":118},[52,24698,121],{"class":58},[52,24700,63],{"class":371},[52,24702,77],{"class":58},[52,24704,24705],{"class":54,"line":594},[52,24706,597],{"emptyLinePlaceholder":171},[52,24708,24709],{"class":54,"line":600},[52,24710,603],{"class":559},[52,24712,24713,24715,24717,24719,24721,24723],{"class":54,"line":606},[52,24714,59],{"class":58},[52,24716,63],{"class":371},[52,24718,613],{"class":66},[52,24720,70],{"class":58},[52,24722,927],{"class":73},[52,24724,77],{"class":58},[52,24726,24727,24729,24731],{"class":54,"line":653},[52,24728,83],{"class":58},[52,24730,86],{"class":371},[52,24732,105],{"class":58},[52,24734,24735,24737,24739],{"class":54,"line":662},[52,24736,121],{"class":58},[52,24738,63],{"class":371},[52,24740,77],{"class":58},[52,24742,24743],{"class":54,"line":671},[52,24744,597],{"emptyLinePlaceholder":171},[52,24746,24747],{"class":54,"line":676},[52,24748,24749],{"class":559},"\u003C!-- Fluid with aspect ratio -->\n",[52,24751,24752,24754,24756,24758,24760,24762],{"class":54,"line":682},[52,24753,59],{"class":58},[52,24755,63],{"class":371},[52,24757,67],{"class":66},[52,24759,70],{"class":58},[52,24761,693],{"class":73},[52,24763,77],{"class":58},[52,24765,24766,24768,24770],{"class":54,"line":698},[52,24767,83],{"class":58},[52,24769,86],{"class":371},[52,24771,105],{"class":58},[52,24773,24774,24776,24778],{"class":54,"line":707},[52,24775,121],{"class":58},[52,24777,63],{"class":371},[52,24779,77],{"class":58},[15,24781,22074,24782,16248,24784,22079,24786,22082,24788,22085],{},[31,24783,23465],{},[31,24785,156],{},[31,24787,33],{},[31,24789,40],{},[23,24791,1134],{"id":1133},[15,24793,24794,24795,24798],{},"Pass props directly to configure each component. String values can be passed plain; everything else uses Svelte's ",[31,24796,24797],{},"{expression}"," syntax:",[43,24800,24801],{"className":2507,"code":1310,"language":2509,"meta":48,"style":48},[31,24802,24803,24817,24823,24831,24839,24850,24858,24862],{"__ignoreMap":48},[52,24804,24805,24807,24809,24811,24813,24815],{"class":54,"line":55},[52,24806,59],{"class":58},[52,24808,63],{"class":371},[52,24810,67],{"class":66},[52,24812,70],{"class":58},[52,24814,319],{"class":73},[52,24816,77],{"class":58},[52,24818,24819,24821],{"class":54,"line":80},[52,24820,83],{"class":58},[52,24822,1171],{"class":371},[52,24824,24825,24827,24829],{"class":54,"line":108},[52,24826,1176],{"class":66},[52,24828,70],{"class":58},[52,24830,1181],{"class":73},[52,24832,24833,24835,24837],{"class":54,"line":118},[52,24834,1186],{"class":66},[52,24836,70],{"class":58},[52,24838,1191],{"class":73},[52,24840,24841,24843,24846,24848],{"class":54,"line":594},[52,24842,1278],{"class":66},[52,24844,24845],{"class":58},"={",[52,24847,1206],{"class":371},[52,24849,729],{"class":58},[52,24851,24852,24854,24856],{"class":54,"line":600},[52,24853,1291],{"class":66},[52,24855,70],{"class":58},[52,24857,1219],{"class":73},[52,24859,24860],{"class":54,"line":606},[52,24861,1224],{"class":58},[52,24863,24864,24866,24868],{"class":54,"line":653},[52,24865,121],{"class":58},[52,24867,63],{"class":371},[52,24869,77],{"class":58},[15,24871,24872,24873,24876,24877,24879],{},"Props also accept reactive state — Svelte's ",[31,24874,24875],{},"$state"," rune (or ",[31,24878,13801],{}," in Svelte 4) works exactly as you'd expect:",[43,24881,24883],{"className":2507,"code":24882,"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,24884,24885,24893,24903,24907,24925,24933,24937,24951,24979,24987,24991],{"__ignoreMap":48},[52,24886,24887,24889,24891],{"class":54,"line":55},[52,24888,59],{"class":58},[52,24890,2253],{"class":62},[52,24892,77],{"class":58},[52,24894,24895,24897,24899,24901],{"class":54,"line":80},[52,24896,10675],{"class":231},[52,24898,22191],{"class":58},[52,24900,238],{"class":231},[52,24902,273],{"class":73},[52,24904,24905],{"class":54,"line":108},[52,24906,597],{"emptyLinePlaceholder":171},[52,24908,24909,24911,24913,24915,24917,24919,24921,24923],{"class":54,"line":118},[52,24910,2524],{"class":231},[52,24912,8793],{"class":58},[52,24914,70],{"class":231},[52,24916,2532],{"class":58},[52,24918,2535],{"class":66},[52,24920,2289],{"class":58},[52,24922,6387],{"class":371},[52,24924,2295],{"class":58},[52,24926,24927,24929,24931],{"class":54,"line":594},[52,24928,121],{"class":58},[52,24930,2253],{"class":62},[52,24932,77],{"class":58},[52,24934,24935],{"class":54,"line":600},[52,24936,597],{"emptyLinePlaceholder":171},[52,24938,24939,24941,24943,24945,24947,24949],{"class":54,"line":606},[52,24940,59],{"class":58},[52,24942,63],{"class":371},[52,24944,67],{"class":66},[52,24946,70],{"class":58},[52,24948,319],{"class":73},[52,24950,77],{"class":58},[52,24952,24953,24955,24957,24959,24961,24963,24965,24967,24969,24972,24974,24977],{"class":54,"line":653},[52,24954,83],{"class":58},[52,24956,86],{"class":371},[52,24958,89],{"class":66},[52,24960,70],{"class":58},[52,24962,22279],{"class":73},[52,24964,97],{"class":66},[52,24966,70],{"class":58},[52,24968,22286],{"class":73},[52,24970,24971],{"class":66}," {",[52,24973,1199],{"class":58},[52,24975,24976],{"class":66},"}",[52,24978,105],{"class":58},[52,24980,24981,24983,24985],{"class":54,"line":662},[52,24982,121],{"class":58},[52,24984,63],{"class":371},[52,24986,77],{"class":58},[52,24988,24989],{"class":54,"line":671},[52,24990,597],{"emptyLinePlaceholder":171},[52,24992,24993,24995,24998,25000,25002,25005,25008,25010,25012,25014,25016,25019,25021,25023,25025,25027,25030,25032,25035],{"class":54,"line":676},[52,24994,59],{"class":58},[52,24996,24997],{"class":62},"input",[52,24999,10663],{"class":66},[52,25001,70],{"class":58},[52,25003,25004],{"class":73},"\"range\"",[52,25006,25007],{"class":66}," min",[52,25009,70],{"class":58},[52,25011,618],{"class":73},[52,25013,6387],{"class":371},[52,25015,618],{"class":73},[52,25017,25018],{"class":66}," max",[52,25020,70],{"class":58},[52,25022,618],{"class":73},[52,25024,22347],{"class":371},[52,25026,618],{"class":73},[52,25028,25029],{"class":231}," bind",[52,25031,1540],{"class":58},[52,25033,25034],{"class":66},"value",[52,25036,25037],{"class":58},"={angle} />\n",[15,25039,21732,25040,22403],{},[31,25041,1199],{},[15,25043,21739,25044,21742],{},[1139,25045,1142],{"href":1141},[23,25047,25049],{"id":25048},"using-with-sveltekit-ssr","Using with SvelteKit / SSR",[15,25051,22414,25052,22419],{},[1139,25053,25055],{"href":25054},"/docs/guide/svelte/ssr","SvelteKit / SSR",[23,25057,1463],{"id":1462},[1465,25059,25060,25064,25068],{},[1468,25061,25062,1474],{},[1139,25063,1473],{"href":1472},[1468,25065,25066,1481],{},[1139,25067,1480],{"href":1479},[1468,25069,25070,1493],{},[1139,25071,1142],{"href":1141},[156,25073,25074],{},"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":25076},[25077,25078,25079,25080,25081,25082,25083],{"id":21189,"depth":80,"text":21190},{"id":21839,"depth":80,"text":21840},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":25048,"depth":80,"text":25049},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Svelte",{},"/docs/guide/svelte/quickstart",{"title":178,"description":25084},"docs/guide/svelte/1.quickstart","oKkcxjO59hdVehYhYwMxjUb5bCCVBpq-6Vh15nVElfQ",{"id":25091,"title":25055,"body":25092,"category":1904,"description":25679,"exclude":167,"extension":168,"forceFramework":167,"icon":23348,"meta":25680,"navigation":171,"path":25054,"seo":25681,"stem":25682,"__hash__":25683},"guide/docs/guide/svelte/ssr.md",{"type":8,"value":25093,"toc":25671},[25094,25098,25101,25105,25111,25114,25179,25182,25188,25193,25325,25332,25338,25465,25468,25472,25475,25668],[11,25095,25097],{"id":25096},"ssr-with-sveltekit-svelte","SSR with SvelteKit / Svelte",[15,25099,25100],{},"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,25102,25104],{"id":25103},"the-default-behavior","The default behavior",[15,25106,25107,25108,25110],{},"Shaders for Svelte is built to be SSR-safe by design. When the ",[31,25109,33],{}," component is server-rendered, it renders nothing — no canvas element, no error. The GPU initialization only happens client-side on mount.",[15,25112,25113],{},"In many cases, you don't need any special handling:",[43,25115,25117],{"className":2507,"code":25116,"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,25118,25119,25127,25137,25145,25149,25163,25171],{"__ignoreMap":48},[52,25120,25121,25123,25125],{"class":54,"line":55},[52,25122,59],{"class":58},[52,25124,2253],{"class":62},[52,25126,77],{"class":58},[52,25128,25129,25131,25133,25135],{"class":54,"line":80},[52,25130,10675],{"class":231},[52,25132,22191],{"class":58},[52,25134,238],{"class":231},[52,25136,273],{"class":73},[52,25138,25139,25141,25143],{"class":54,"line":108},[52,25140,121],{"class":58},[52,25142,2253],{"class":62},[52,25144,77],{"class":58},[52,25146,25147],{"class":54,"line":118},[52,25148,597],{"emptyLinePlaceholder":171},[52,25150,25151,25153,25155,25157,25159,25161],{"class":54,"line":594},[52,25152,59],{"class":58},[52,25154,63],{"class":371},[52,25156,67],{"class":66},[52,25158,70],{"class":58},[52,25160,319],{"class":73},[52,25162,77],{"class":58},[52,25164,25165,25167,25169],{"class":54,"line":600},[52,25166,83],{"class":58},[52,25168,86],{"class":371},[52,25170,105],{"class":58},[52,25172,25173,25175,25177],{"class":54,"line":606},[52,25174,121],{"class":58},[52,25176,63],{"class":371},[52,25178,77],{"class":58},[15,25180,25181],{},"This works in SvelteKit out of the box. The component renders empty on the server and initializes on the client.",[23,25183,25185,25187],{"id":25184},"onmount-for-browser-only-code",[31,25186,24336],{}," for browser-only code",[15,25189,25190,25191,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,25192,24336],{},[43,25194,25196],{"className":2507,"code":25195,"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,25197,25198,25206,25218,25228,25232,25239,25243,25253,25258,25269,25273,25281,25285,25309,25317],{"__ignoreMap":48},[52,25199,25200,25202,25204],{"class":54,"line":55},[52,25201,59],{"class":58},[52,25203,2253],{"class":62},[52,25205,77],{"class":58},[52,25207,25208,25210,25213,25215],{"class":54,"line":80},[52,25209,10675],{"class":231},[52,25211,25212],{"class":58}," { onMount } ",[52,25214,238],{"class":231},[52,25216,25217],{"class":73}," 'svelte'\n",[52,25219,25220,25222,25224,25226],{"class":54,"line":108},[52,25221,10675],{"class":231},[52,25223,22191],{"class":58},[52,25225,238],{"class":231},[52,25227,273],{"class":73},[52,25229,25230],{"class":54,"line":118},[52,25231,597],{"emptyLinePlaceholder":171},[52,25233,25234,25236],{"class":54,"line":594},[52,25235,2524],{"class":231},[52,25237,25238],{"class":58}," shaderEl\n",[52,25240,25241],{"class":54,"line":600},[52,25242,597],{"emptyLinePlaceholder":171},[52,25244,25245,25247,25249,25251],{"class":54,"line":606},[52,25246,14425],{"class":66},[52,25248,13816],{"class":58},[52,25250,2425],{"class":231},[52,25252,2904],{"class":58},[52,25254,25255],{"class":54,"line":653},[52,25256,25257],{"class":559}," // Safe to interact with the DOM and canvas here\n",[52,25259,25260,25263,25266],{"class":54,"line":662},[52,25261,25262],{"class":58}," console.",[52,25264,25265],{"class":66},"log",[52,25267,25268],{"class":58},"(shaderEl)\n",[52,25270,25271],{"class":54,"line":671},[52,25272,10722],{"class":58},[52,25274,25275,25277,25279],{"class":54,"line":676},[52,25276,121],{"class":58},[52,25278,2253],{"class":62},[52,25280,77],{"class":58},[52,25282,25283],{"class":54,"line":682},[52,25284,597],{"emptyLinePlaceholder":171},[52,25286,25287,25289,25291,25293,25295,25298,25301,25303,25305,25307],{"class":54,"line":698},[52,25288,59],{"class":58},[52,25290,63],{"class":371},[52,25292,25029],{"class":231},[52,25294,1540],{"class":58},[52,25296,25297],{"class":371},"this",[52,25299,25300],{"class":58},"={shaderEl} ",[52,25302,23465],{"class":66},[52,25304,70],{"class":58},[52,25306,319],{"class":73},[52,25308,77],{"class":58},[52,25310,25311,25313,25315],{"class":54,"line":707},[52,25312,83],{"class":58},[52,25314,86],{"class":371},[52,25316,105],{"class":58},[52,25318,25319,25321,25323],{"class":54,"line":2327},[52,25320,121],{"class":58},[52,25322,63],{"class":371},[52,25324,77],{"class":58},[23,25326,25328,25329],{"id":25327},"conditional-rendering-with-browser","Conditional rendering with ",[31,25330,25331],{},"browser",[15,25333,25334,25335,1540],{},"For more explicit control over what renders on the server vs. client, use SvelteKit's ",[31,25336,25337],{},"$app/environment",[43,25339,25341],{"className":2507,"code":25340,"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,25342,25343,25351,25363,25373,25381,25385,25396,25410,25418,25426,25436,25441,25456],{"__ignoreMap":48},[52,25344,25345,25347,25349],{"class":54,"line":55},[52,25346,59],{"class":58},[52,25348,2253],{"class":62},[52,25350,77],{"class":58},[52,25352,25353,25355,25358,25360],{"class":54,"line":80},[52,25354,10675],{"class":231},[52,25356,25357],{"class":58}," { browser } ",[52,25359,238],{"class":231},[52,25361,25362],{"class":73}," '$app/environment'\n",[52,25364,25365,25367,25369,25371],{"class":54,"line":108},[52,25366,10675],{"class":231},[52,25368,22191],{"class":58},[52,25370,238],{"class":231},[52,25372,273],{"class":73},[52,25374,25375,25377,25379],{"class":54,"line":118},[52,25376,121],{"class":58},[52,25378,2253],{"class":62},[52,25380,77],{"class":58},[52,25382,25383],{"class":54,"line":594},[52,25384,597],{"emptyLinePlaceholder":171},[52,25386,25387,25390,25393],{"class":54,"line":600},[52,25388,25389],{"class":58},"{#",[52,25391,25392],{"class":231},"if",[52,25394,25395],{"class":58}," browser}\n",[52,25397,25398,25400,25402,25404,25406,25408],{"class":54,"line":606},[52,25399,83],{"class":58},[52,25401,63],{"class":371},[52,25403,67],{"class":66},[52,25405,70],{"class":58},[52,25407,319],{"class":73},[52,25409,77],{"class":58},[52,25411,25412,25414,25416],{"class":54,"line":653},[52,25413,2213],{"class":58},[52,25415,86],{"class":371},[52,25417,105],{"class":58},[52,25419,25420,25422,25424],{"class":54,"line":662},[52,25421,2230],{"class":58},[52,25423,63],{"class":371},[52,25425,77],{"class":58},[52,25427,25428,25431,25434],{"class":54,"line":671},[52,25429,25430],{"class":58},"{:",[52,25432,25433],{"class":231},"else",[52,25435,729],{"class":58},[52,25437,25438],{"class":54,"line":676},[52,25439,25440],{"class":559}," \u003C!-- Optional server-rendered placeholder -->\n",[52,25442,25443,25445,25447,25449,25451,25454],{"class":54,"line":682},[52,25444,83],{"class":58},[52,25446,8286],{"class":62},[52,25448,67],{"class":66},[52,25450,70],{"class":58},[52,25452,25453],{"class":73},"\"w-full h-64 bg-gray-900 rounded\"",[52,25455,105],{"class":58},[52,25457,25458,25461,25463],{"class":54,"line":698},[52,25459,25460],{"class":58},"{/",[52,25462,25392],{"class":231},[52,25464,729],{"class":58},[15,25466,25467],{},"This gives you explicit control over the placeholder shown during SSR, which can help avoid layout shift.",[23,25469,25471],{"id":25470},"lazy-loading","Lazy loading",[15,25473,25474],{},"To defer loading the Shaders bundle entirely until client-side:",[43,25476,25478],{"className":2507,"code":25477,"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,25479,25480,25488,25498,25502,25509,25516,25520,25535,25564,25574,25584,25588,25596,25600,25609,25633,25648,25660],{"__ignoreMap":48},[52,25481,25482,25484,25486],{"class":54,"line":55},[52,25483,59],{"class":58},[52,25485,2253],{"class":62},[52,25487,77],{"class":58},[52,25489,25490,25492,25494,25496],{"class":54,"line":80},[52,25491,10675],{"class":231},[52,25493,25212],{"class":58},[52,25495,238],{"class":231},[52,25497,25217],{"class":73},[52,25499,25500],{"class":54,"line":108},[52,25501,597],{"emptyLinePlaceholder":171},[52,25503,25504,25506],{"class":54,"line":118},[52,25505,2524],{"class":231},[52,25507,25508],{"class":58}," ShaderComponent\n",[52,25510,25511,25513],{"class":54,"line":594},[52,25512,2524],{"class":231},[52,25514,25515],{"class":58}," LinearGradientComponent\n",[52,25517,25518],{"class":54,"line":600},[52,25519,597],{"emptyLinePlaceholder":171},[52,25521,25522,25524,25526,25529,25531,25533],{"class":54,"line":606},[52,25523,14425],{"class":66},[52,25525,2289],{"class":58},[52,25527,25528],{"class":231},"async",[52,25530,13831],{"class":58},[52,25532,2425],{"class":231},[52,25534,2904],{"class":58},[52,25536,25537,25539,25542,25544,25546,25548,25551,25553,25555,25557,25559,25562],{"class":54,"line":653},[52,25538,14067],{"class":231},[52,25540,25541],{"class":58}," { ",[52,25543,63],{"class":371},[52,25545,1881],{"class":58},[52,25547,86],{"class":371},[52,25549,25550],{"class":58}," } ",[52,25552,70],{"class":231},[52,25554,1730],{"class":231},[52,25556,22747],{"class":231},[52,25558,2289],{"class":58},[52,25560,25561],{"class":73},"'shaders/svelte'",[52,25563,2295],{"class":58},[52,25565,25566,25569,25571],{"class":54,"line":662},[52,25567,25568],{"class":58}," ShaderComponent ",[52,25570,70],{"class":231},[52,25572,25573],{"class":58}," Shader\n",[52,25575,25576,25579,25581],{"class":54,"line":671},[52,25577,25578],{"class":58}," LinearGradientComponent ",[52,25580,70],{"class":231},[52,25582,25583],{"class":58}," LinearGradient\n",[52,25585,25586],{"class":54,"line":676},[52,25587,10722],{"class":58},[52,25589,25590,25592,25594],{"class":54,"line":682},[52,25591,121],{"class":58},[52,25593,2253],{"class":62},[52,25595,77],{"class":58},[52,25597,25598],{"class":54,"line":698},[52,25599,597],{"emptyLinePlaceholder":171},[52,25601,25602,25604,25606],{"class":54,"line":707},[52,25603,25389],{"class":58},[52,25605,25392],{"class":231},[52,25607,25608],{"class":58}," ShaderComponent}\n",[52,25610,25611,25613,25615,25617,25620,25622,25625,25627,25629,25631],{"class":54,"line":2327},[52,25612,83],{"class":58},[52,25614,2509],{"class":231},[52,25616,1540],{"class":58},[52,25618,25619],{"class":62},"component",[52,25621,3675],{"class":66},[52,25623,25624],{"class":58},"={ShaderComponent} ",[52,25626,23465],{"class":66},[52,25628,70],{"class":58},[52,25630,319],{"class":73},[52,25632,77],{"class":58},[52,25634,25635,25637,25639,25641,25643,25645],{"class":54,"line":7369},[52,25636,2213],{"class":58},[52,25638,2509],{"class":231},[52,25640,1540],{"class":58},[52,25642,25619],{"class":62},[52,25644,3675],{"class":66},[52,25646,25647],{"class":58},"={LinearGradientComponent} />\n",[52,25649,25650,25652,25654,25656,25658],{"class":54,"line":7379},[52,25651,2230],{"class":58},[52,25653,2509],{"class":231},[52,25655,1540],{"class":58},[52,25657,25619],{"class":62},[52,25659,77],{"class":58},[52,25661,25662,25664,25666],{"class":54,"line":7390},[52,25663,25460],{"class":58},[52,25665,25392],{"class":231},[52,25667,729],{"class":58},[156,25669,25670],{},"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":25672},[25673,25674,25676,25678],{"id":25103,"depth":80,"text":25104},{"id":25184,"depth":80,"text":25675},"onMount for browser-only code",{"id":25327,"depth":80,"text":25677},"Conditional rendering with browser",{"id":25470,"depth":80,"text":25471},"Using Shaders in SvelteKit and Svelte SSR applications",{},{"title":25055,"description":25679},"docs/guide/svelte/ssr","h6dWhQkEndz_rjOn72In-i840uk8YmlISNcMF5ivTOc",{"id":25685,"title":178,"body":25686,"category":165,"description":26202,"exclude":167,"extension":168,"forceFramework":167,"icon":1509,"meta":26203,"navigation":171,"path":26204,"seo":26205,"stem":26206,"__hash__":26207},"guide/docs/guide/vue/1.quickstart.md",{"type":8,"value":25687,"toc":26193},[25688,25692,25694,25706,25708,25722,25724,25726,25780,25782,25788,25790,25797,25911,25918,25920,25926,25997,26000,26170,26174,26178,26182,26188,26190],[11,25689,25691],{"id":25690},"quickstart-vue","Quickstart (Vue)",[23,25693,21190],{"id":21189},[43,25695,25696],{"className":190,"code":191,"language":192,"meta":48,"style":48},[31,25697,25698],{"__ignoreMap":48},[52,25699,25700,25702,25704],{"class":54,"line":55},[52,25701,199],{"class":66},[52,25703,202],{"class":73},[52,25705,205],{"class":73},[23,25707,21840],{"id":21839},[43,25709,25710],{"className":222,"code":223,"language":224,"meta":48,"style":48},[31,25711,25712],{"__ignoreMap":48},[52,25713,25714,25716,25718,25720],{"class":54,"line":55},[52,25715,232],{"class":231},[52,25717,235],{"class":58},[52,25719,238],{"class":231},[52,25721,241],{"class":73},[23,25723,293],{"id":292},[15,25725,21859],{},[43,25727,25728],{"className":45,"code":304,"language":47,"meta":48,"style":48},[31,25729,25730,25744,25764,25772],{"__ignoreMap":48},[52,25731,25732,25734,25736,25738,25740,25742],{"class":54,"line":55},[52,25733,59],{"class":58},[52,25735,63],{"class":62},[52,25737,67],{"class":66},[52,25739,70],{"class":58},[52,25741,319],{"class":73},[52,25743,77],{"class":58},[52,25745,25746,25748,25750,25752,25754,25756,25758,25760,25762],{"class":54,"line":80},[52,25747,83],{"class":58},[52,25749,86],{"class":62},[52,25751,89],{"class":66},[52,25753,70],{"class":58},[52,25755,94],{"class":73},[52,25757,97],{"class":66},[52,25759,70],{"class":58},[52,25761,102],{"class":73},[52,25763,105],{"class":58},[52,25765,25766,25768,25770],{"class":54,"line":108},[52,25767,83],{"class":58},[52,25769,113],{"class":62},[52,25771,105],{"class":58},[52,25773,25774,25776,25778],{"class":54,"line":118},[52,25775,121],{"class":58},[52,25777,63],{"class":62},[52,25779,77],{"class":58},[19,25781],{":preset":529},[15,25783,25784,534,25786,21922],{},[31,25785,33],{},[31,25787,40],{},[23,25789,544],{"id":543},[15,25791,1825,25792,25794,25795,540],{},[31,25793,40],{}," has no intrinsic size. The class or style you apply to ",[31,25796,33],{},[43,25798,25799],{"className":45,"code":24666,"language":47,"meta":48,"style":48},[31,25800,25801,25805,25819,25827,25835,25839,25843,25857,25865,25873,25877,25881,25895,25903],{"__ignoreMap":48},[52,25802,25803],{"class":54,"line":55},[52,25804,560],{"class":559},[52,25806,25807,25809,25811,25813,25815,25817],{"class":54,"line":80},[52,25808,59],{"class":58},[52,25810,63],{"class":62},[52,25812,67],{"class":66},[52,25814,70],{"class":58},[52,25816,573],{"class":73},[52,25818,77],{"class":58},[52,25820,25821,25823,25825],{"class":54,"line":108},[52,25822,83],{"class":58},[52,25824,86],{"class":62},[52,25826,105],{"class":58},[52,25828,25829,25831,25833],{"class":54,"line":118},[52,25830,121],{"class":58},[52,25832,63],{"class":62},[52,25834,77],{"class":58},[52,25836,25837],{"class":54,"line":594},[52,25838,597],{"emptyLinePlaceholder":171},[52,25840,25841],{"class":54,"line":600},[52,25842,603],{"class":559},[52,25844,25845,25847,25849,25851,25853,25855],{"class":54,"line":606},[52,25846,59],{"class":58},[52,25848,63],{"class":62},[52,25850,613],{"class":66},[52,25852,70],{"class":58},[52,25854,927],{"class":73},[52,25856,77],{"class":58},[52,25858,25859,25861,25863],{"class":54,"line":653},[52,25860,83],{"class":58},[52,25862,86],{"class":62},[52,25864,105],{"class":58},[52,25866,25867,25869,25871],{"class":54,"line":662},[52,25868,121],{"class":58},[52,25870,63],{"class":62},[52,25872,77],{"class":58},[52,25874,25875],{"class":54,"line":671},[52,25876,597],{"emptyLinePlaceholder":171},[52,25878,25879],{"class":54,"line":676},[52,25880,24749],{"class":559},[52,25882,25883,25885,25887,25889,25891,25893],{"class":54,"line":682},[52,25884,59],{"class":58},[52,25886,63],{"class":62},[52,25888,67],{"class":66},[52,25890,70],{"class":58},[52,25892,693],{"class":73},[52,25894,77],{"class":58},[52,25896,25897,25899,25901],{"class":54,"line":698},[52,25898,83],{"class":58},[52,25900,86],{"class":62},[52,25902,105],{"class":58},[52,25904,25905,25907,25909],{"class":54,"line":707},[52,25906,121],{"class":58},[52,25908,63],{"class":62},[52,25910,77],{"class":58},[15,25912,25913,25914,22082,25916,22085],{},"Applying a class or style to the ",[31,25915,33],{},[31,25917,40],{},[23,25919,1134],{"id":1133},[15,25921,25922,25923,25925],{},"Pass props directly to configure each component. Numeric props use Vue's ",[31,25924,1540],{}," binding syntax, strings can be passed plain:",[43,25927,25929],{"className":45,"code":25928,"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,25930,25931,25945,25951,25959,25967,25977,25985,25989],{"__ignoreMap":48},[52,25932,25933,25935,25937,25939,25941,25943],{"class":54,"line":55},[52,25934,59],{"class":58},[52,25936,63],{"class":62},[52,25938,67],{"class":66},[52,25940,70],{"class":58},[52,25942,319],{"class":73},[52,25944,77],{"class":58},[52,25946,25947,25949],{"class":54,"line":80},[52,25948,83],{"class":58},[52,25950,1171],{"class":62},[52,25952,25953,25955,25957],{"class":54,"line":108},[52,25954,16970],{"class":66},[52,25956,70],{"class":58},[52,25958,1181],{"class":73},[52,25960,25961,25963,25965],{"class":54,"line":118},[52,25962,16980],{"class":66},[52,25964,70],{"class":58},[52,25966,1191],{"class":73},[52,25968,25969,25972,25974],{"class":54,"line":594},[52,25970,25971],{"class":66}," :angle",[52,25973,70],{"class":58},[52,25975,25976],{"class":73},"\"45\"\n",[52,25978,25979,25981,25983],{"class":54,"line":600},[52,25980,1214],{"class":66},[52,25982,70],{"class":58},[52,25984,1219],{"class":73},[52,25986,25987],{"class":54,"line":606},[52,25988,1224],{"class":58},[52,25990,25991,25993,25995],{"class":54,"line":653},[52,25992,121],{"class":58},[52,25994,63],{"class":62},[52,25996,77],{"class":58},[15,25998,25999],{},"Props also accept reactive state — refs and computed values work exactly as you'd expect:",[43,26001,26003],{"className":6731,"code":26002,"language":6733,"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,26004,26005,26015,26025,26035,26039,26055,26063,26067,26075,26089,26115,26123,26127,26162],{"__ignoreMap":48},[52,26006,26007,26009,26011,26013],{"class":54,"line":55},[52,26008,59],{"class":58},[52,26010,2253],{"class":62},[52,26012,2256],{"class":66},[52,26014,77],{"class":58},[52,26016,26017,26019,26021,26023],{"class":54,"line":80},[52,26018,232],{"class":231},[52,26020,2265],{"class":58},[52,26022,238],{"class":231},[52,26024,2270],{"class":73},[52,26026,26027,26029,26031,26033],{"class":54,"line":108},[52,26028,232],{"class":231},[52,26030,22191],{"class":58},[52,26032,238],{"class":231},[52,26034,241],{"class":73},[52,26036,26037],{"class":54,"line":118},[52,26038,597],{"emptyLinePlaceholder":171},[52,26040,26041,26043,26045,26047,26049,26051,26053],{"class":54,"line":594},[52,26042,1721],{"class":231},[52,26044,8249],{"class":371},[52,26046,1727],{"class":231},[52,26048,2286],{"class":66},[52,26050,2289],{"class":58},[52,26052,6387],{"class":371},[52,26054,2295],{"class":58},[52,26056,26057,26059,26061],{"class":54,"line":600},[52,26058,121],{"class":58},[52,26060,2253],{"class":62},[52,26062,77],{"class":58},[52,26064,26065],{"class":54,"line":606},[52,26066,597],{"emptyLinePlaceholder":171},[52,26068,26069,26071,26073],{"class":54,"line":653},[52,26070,59],{"class":58},[52,26072,2182],{"class":62},[52,26074,77],{"class":58},[52,26076,26077,26079,26081,26083,26085,26087],{"class":54,"line":662},[52,26078,83],{"class":58},[52,26080,63],{"class":62},[52,26082,67],{"class":66},[52,26084,70],{"class":58},[52,26086,319],{"class":73},[52,26088,77],{"class":58},[52,26090,26091,26093,26095,26097,26099,26101,26103,26105,26107,26109,26111,26113],{"class":54,"line":671},[52,26092,2213],{"class":58},[52,26094,86],{"class":62},[52,26096,17835],{"class":66},[52,26098,70],{"class":58},[52,26100,22279],{"class":73},[52,26102,17842],{"class":66},[52,26104,70],{"class":58},[52,26106,22286],{"class":73},[52,26108,8406],{"class":66},[52,26110,70],{"class":58},[52,26112,8411],{"class":73},[52,26114,105],{"class":58},[52,26116,26117,26119,26121],{"class":54,"line":676},[52,26118,2230],{"class":58},[52,26120,63],{"class":62},[52,26122,77],{"class":58},[52,26124,26125],{"class":54,"line":682},[52,26126,597],{"emptyLinePlaceholder":171},[52,26128,26129,26131,26133,26135,26137,26139,26141,26143,26146,26148,26150,26153,26156,26158,26160],{"class":54,"line":698},[52,26130,83],{"class":58},[52,26132,24997],{"class":62},[52,26134,10663],{"class":66},[52,26136,70],{"class":58},[52,26138,25004],{"class":73},[52,26140,25007],{"class":66},[52,26142,70],{"class":58},[52,26144,26145],{"class":73},"\"0\"",[52,26147,25018],{"class":66},[52,26149,70],{"class":58},[52,26151,26152],{"class":73},"\"360\"",[52,26154,26155],{"class":66}," v-model.number",[52,26157,70],{"class":58},[52,26159,8411],{"class":73},[52,26161,105],{"class":58},[52,26163,26164,26166,26168],{"class":54,"line":707},[52,26165,121],{"class":58},[52,26167,2182],{"class":62},[52,26169,77],{"class":58},[15,26171,21732,26172,22403],{},[31,26173,1199],{},[15,26175,21739,26176,21742],{},[1139,26177,1142],{"href":1141},[23,26179,26181],{"id":26180},"using-with-nuxt-ssr","Using with Nuxt / SSR",[15,26183,22414,26184,22419],{},[1139,26185,26187],{"href":26186},"/docs/guide/vue/ssr","Nuxt / SSR",[23,26189,1463],{"id":1462},[156,26191,26192],{},"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":26194},[26195,26196,26197,26198,26199,26200,26201],{"id":21189,"depth":80,"text":21190},{"id":21839,"depth":80,"text":21840},{"id":292,"depth":80,"text":293},{"id":543,"depth":80,"text":544},{"id":1133,"depth":80,"text":1134},{"id":26180,"depth":80,"text":26181},{"id":1462,"depth":80,"text":1463},"Install Shaders and build your first GPU-accelerated effect with Vue",{},"/docs/guide/vue/quickstart",{"title":178,"description":26202},"docs/guide/vue/1.quickstart","8tKU-KTFb-F8qrIq8rMMDS0VAaRNC3iO3E7i9XwmVSA",{"id":26209,"title":26187,"body":26210,"category":1904,"description":26883,"exclude":167,"extension":168,"forceFramework":167,"icon":23348,"meta":26884,"navigation":171,"path":26186,"seo":26885,"stem":26886,"__hash__":26887},"guide/docs/guide/vue/ssr.md",{"type":8,"value":26211,"toc":26876},[26212,26216,26219,26226,26232,26284,26287,26290,26386,26390,26397,26549,26553,26556,26757,26764,26853,26859,26863,26873],[11,26213,26215],{"id":26214},"ssr-with-nuxt-vue","SSR with Nuxt / Vue",[15,26217,26218],{},"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,26220,26222,26223],{"id":26221},"nuxt-clientonly","Nuxt: ",[31,26224,26225],{},"\u003CClientOnly>",[15,26227,26228,26229,26231],{},"Nuxt provides a built-in ",[31,26230,26225],{}," component that prevents its children from rendering on the server. This is the simplest approach:",[43,26233,26235],{"className":45,"code":26234,"language":47,"meta":48,"style":48},"\u003CClientOnly>\n \u003CShader class=\"w-full h-64\">\n \u003CLinearGradient />\n \u003C/Shader>\n\u003C/ClientOnly>\n",[31,26236,26237,26246,26260,26268,26276],{"__ignoreMap":48},[52,26238,26239,26241,26244],{"class":54,"line":55},[52,26240,59],{"class":58},[52,26242,26243],{"class":62},"ClientOnly",[52,26245,77],{"class":58},[52,26247,26248,26250,26252,26254,26256,26258],{"class":54,"line":80},[52,26249,83],{"class":58},[52,26251,63],{"class":62},[52,26253,67],{"class":66},[52,26255,70],{"class":58},[52,26257,319],{"class":73},[52,26259,77],{"class":58},[52,26261,26262,26264,26266],{"class":54,"line":108},[52,26263,2213],{"class":58},[52,26265,86],{"class":62},[52,26267,105],{"class":58},[52,26269,26270,26272,26274],{"class":54,"line":118},[52,26271,2230],{"class":58},[52,26273,63],{"class":62},[52,26275,77],{"class":58},[52,26277,26278,26280,26282],{"class":54,"line":594},[52,26279,121],{"class":58},[52,26281,26243],{"class":62},[52,26283,77],{"class":58},[15,26285,26286],{},"The shader renders nothing on the server and mounts on the client after hydration. Your page structure and layout are not affected.",[15,26288,26289],{},"You can add a placeholder slot to show something while the client-side shader loads:",[43,26291,26293],{"className":45,"code":26292,"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,26294,26295,26303,26317,26325,26333,26337,26351,26370,26378],{"__ignoreMap":48},[52,26296,26297,26299,26301],{"class":54,"line":55},[52,26298,59],{"class":58},[52,26300,26243],{"class":62},[52,26302,77],{"class":58},[52,26304,26305,26307,26309,26311,26313,26315],{"class":54,"line":80},[52,26306,83],{"class":58},[52,26308,63],{"class":62},[52,26310,67],{"class":66},[52,26312,70],{"class":58},[52,26314,319],{"class":73},[52,26316,77],{"class":58},[52,26318,26319,26321,26323],{"class":54,"line":108},[52,26320,2213],{"class":58},[52,26322,86],{"class":62},[52,26324,105],{"class":58},[52,26326,26327,26329,26331],{"class":54,"line":118},[52,26328,2230],{"class":58},[52,26330,63],{"class":62},[52,26332,77],{"class":58},[52,26334,26335],{"class":54,"line":594},[52,26336,597],{"emptyLinePlaceholder":171},[52,26338,26339,26341,26343,26346,26349],{"class":54,"line":600},[52,26340,83],{"class":58},[52,26342,2182],{"class":62},[52,26344,26345],{"class":58}," #",[52,26347,26348],{"class":66},"fallback",[52,26350,77],{"class":58},[52,26352,26353,26355,26357,26359,26361,26364,26368],{"class":54,"line":606},[52,26354,2213],{"class":58},[52,26356,8286],{"class":62},[52,26358,67],{"class":66},[52,26360,70],{"class":58},[52,26362,26363],{"class":73},"\"w-full h-64 bg-gray-900 animate-pulse rounded\"",[52,26365,26367],{"class":26366},"s6RL2"," /",[52,26369,77],{"class":58},[52,26371,26372,26374,26376],{"class":54,"line":653},[52,26373,2230],{"class":58},[52,26375,2182],{"class":62},[52,26377,77],{"class":58},[52,26379,26380,26382,26384],{"class":54,"line":662},[52,26381,121],{"class":58},[52,26383,26243],{"class":62},[52,26385,77],{"class":58},[23,26387,26389],{"id":26388},"vue-ssr-without-nuxt","Vue SSR (without Nuxt)",[15,26391,26392,26393,26396],{},"If you're using Vue SSR without Nuxt, use ",[31,26394,26395],{},"v-if"," with a mounted flag:",[43,26398,26400],{"className":6731,"code":26399,"language":6733,"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,26401,26402,26412,26423,26427,26444,26461,26469,26473,26481,26495,26517,26525,26533,26541],{"__ignoreMap":48},[52,26403,26404,26406,26408,26410],{"class":54,"line":55},[52,26405,59],{"class":58},[52,26407,2253],{"class":62},[52,26409,2256],{"class":66},[52,26411,77],{"class":58},[52,26413,26414,26416,26419,26421],{"class":54,"line":80},[52,26415,232],{"class":231},[52,26417,26418],{"class":58}," { ref, onMounted } ",[52,26420,238],{"class":231},[52,26422,2270],{"class":73},[52,26424,26425],{"class":54,"line":108},[52,26426,597],{"emptyLinePlaceholder":171},[52,26428,26429,26431,26434,26436,26438,26440,26442],{"class":54,"line":118},[52,26430,1721],{"class":231},[52,26432,26433],{"class":371}," isMounted",[52,26435,1727],{"class":231},[52,26437,2286],{"class":66},[52,26439,2289],{"class":58},[52,26441,2292],{"class":371},[52,26443,2295],{"class":58},[52,26445,26446,26448,26450,26452,26455,26457,26459],{"class":54,"line":594},[52,26447,13813],{"class":66},[52,26449,13816],{"class":58},[52,26451,2425],{"class":231},[52,26453,26454],{"class":58}," { isMounted.value ",[52,26456,70],{"class":231},[52,26458,2574],{"class":371},[52,26460,9337],{"class":58},[52,26462,26463,26465,26467],{"class":54,"line":600},[52,26464,121],{"class":58},[52,26466,2253],{"class":62},[52,26468,77],{"class":58},[52,26470,26471],{"class":54,"line":606},[52,26472,597],{"emptyLinePlaceholder":171},[52,26474,26475,26477,26479],{"class":54,"line":653},[52,26476,59],{"class":58},[52,26478,2182],{"class":62},[52,26480,77],{"class":58},[52,26482,26483,26485,26487,26489,26491,26493],{"class":54,"line":662},[52,26484,83],{"class":58},[52,26486,8286],{"class":62},[52,26488,67],{"class":66},[52,26490,70],{"class":58},[52,26492,319],{"class":73},[52,26494,77],{"class":58},[52,26496,26497,26499,26501,26504,26506,26509,26511,26513,26515],{"class":54,"line":671},[52,26498,2213],{"class":58},[52,26500,63],{"class":62},[52,26502,26503],{"class":66}," v-if",[52,26505,70],{"class":58},[52,26507,26508],{"class":73},"\"isMounted\"",[52,26510,67],{"class":66},[52,26512,70],{"class":58},[52,26514,319],{"class":73},[52,26516,77],{"class":58},[52,26518,26519,26521,26523],{"class":54,"line":676},[52,26520,2476],{"class":58},[52,26522,86],{"class":62},[52,26524,105],{"class":58},[52,26526,26527,26529,26531],{"class":54,"line":682},[52,26528,2491],{"class":58},[52,26530,63],{"class":62},[52,26532,77],{"class":58},[52,26534,26535,26537,26539],{"class":54,"line":698},[52,26536,2230],{"class":58},[52,26538,8286],{"class":62},[52,26540,77],{"class":58},[52,26542,26543,26545,26547],{"class":54,"line":707},[52,26544,121],{"class":58},[52,26546,2182],{"class":62},[52,26548,77],{"class":58},[23,26550,26552],{"id":26551},"dynamic-import-for-code-splitting","Dynamic import for code-splitting",[15,26554,26555],{},"To avoid loading the Shaders bundle during SSR and defer it to the client, use a lazy dynamic import:",[43,26557,26559],{"className":6731,"code":26558,"language":6733,"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,26560,26561,26571,26582,26586,26602,26618,26622,26627,26665,26699,26707,26711,26719,26733,26741,26749],{"__ignoreMap":48},[52,26562,26563,26565,26567,26569],{"class":54,"line":55},[52,26564,59],{"class":58},[52,26566,2253],{"class":62},[52,26568,2256],{"class":66},[52,26570,77],{"class":58},[52,26572,26573,26575,26578,26580],{"class":54,"line":80},[52,26574,232],{"class":231},[52,26576,26577],{"class":58}," { defineAsyncComponent, ref, onMounted } ",[52,26579,238],{"class":231},[52,26581,2270],{"class":73},[52,26583,26584],{"class":54,"line":108},[52,26585,597],{"emptyLinePlaceholder":171},[52,26587,26588,26590,26592,26594,26596,26598,26600],{"class":54,"line":118},[52,26589,1721],{"class":231},[52,26591,26433],{"class":371},[52,26593,1727],{"class":231},[52,26595,2286],{"class":66},[52,26597,2289],{"class":58},[52,26599,2292],{"class":371},[52,26601,2295],{"class":58},[52,26603,26604,26606,26608,26610,26612,26614,26616],{"class":54,"line":594},[52,26605,13813],{"class":66},[52,26607,13816],{"class":58},[52,26609,2425],{"class":231},[52,26611,26454],{"class":58},[52,26613,70],{"class":231},[52,26615,2574],{"class":371},[52,26617,9337],{"class":58},[52,26619,26620],{"class":54,"line":600},[52,26621,597],{"emptyLinePlaceholder":171},[52,26623,26624],{"class":54,"line":606},[52,26625,26626],{"class":559},"// Lazy-load shader components — only fetched client-side when rendered\n",[52,26628,26629,26631,26634,26636,26639,26641,26643,26645,26647,26650,26652,26655,26657,26660,26662],{"class":54,"line":653},[52,26630,1721],{"class":231},[52,26632,26633],{"class":371}," Shader",[52,26635,1727],{"class":231},[52,26637,26638],{"class":66}," defineAsyncComponent",[52,26640,13816],{"class":58},[52,26642,2425],{"class":231},[52,26644,22747],{"class":231},[52,26646,2289],{"class":58},[52,26648,26649],{"class":73},"'shaders/vue'",[52,26651,21690],{"class":58},[52,26653,26654],{"class":66},"then",[52,26656,2289],{"class":58},[52,26658,26659],{"class":8545},"m",[52,26661,8548],{"class":231},[52,26663,26664],{"class":58}," m.Shader))\n",[52,26666,26667,26669,26672,26674,26676,26678,26680,26682,26684,26686,26688,26690,26692,26694,26696],{"class":54,"line":662},[52,26668,1721],{"class":231},[52,26670,26671],{"class":371}," LinearGradient",[52,26673,1727],{"class":231},[52,26675,26638],{"class":66},[52,26677,13816],{"class":58},[52,26679,2425],{"class":231},[52,26681,22747],{"class":231},[52,26683,2289],{"class":58},[52,26685,26649],{"class":73},[52,26687,21690],{"class":58},[52,26689,26654],{"class":66},[52,26691,2289],{"class":58},[52,26693,26659],{"class":8545},[52,26695,8548],{"class":231},[52,26697,26698],{"class":58}," m.LinearGradient))\n",[52,26700,26701,26703,26705],{"class":54,"line":671},[52,26702,121],{"class":58},[52,26704,2253],{"class":62},[52,26706,77],{"class":58},[52,26708,26709],{"class":54,"line":676},[52,26710,597],{"emptyLinePlaceholder":171},[52,26712,26713,26715,26717],{"class":54,"line":682},[52,26714,59],{"class":58},[52,26716,2182],{"class":62},[52,26718,77],{"class":58},[52,26720,26721,26723,26725,26727,26729,26731],{"class":54,"line":698},[52,26722,83],{"class":58},[52,26724,63],{"class":62},[52,26726,26503],{"class":66},[52,26728,70],{"class":58},[52,26730,26508],{"class":73},[52,26732,77],{"class":58},[52,26734,26735,26737,26739],{"class":54,"line":707},[52,26736,2213],{"class":58},[52,26738,86],{"class":62},[52,26740,105],{"class":58},[52,26742,26743,26745,26747],{"class":54,"line":2327},[52,26744,2230],{"class":58},[52,26746,63],{"class":62},[52,26748,77],{"class":58},[52,26750,26751,26753,26755],{"class":54,"line":7369},[52,26752,121],{"class":58},[52,26754,2182],{"class":62},[52,26756,77],{"class":58},[15,26758,26759,26760,26763],{},"Or in Nuxt, use ",[31,26761,26762],{},"defineNuxtPlugin"," or a client-only plugin to lazy-load:",[43,26765,26767],{"className":222,"code":26766,"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,26768,26769,26774,26786,26796,26800,26821,26836,26849],{"__ignoreMap":48},[52,26770,26771],{"class":54,"line":55},[52,26772,26773],{"class":559},"// plugins/shaders.client.ts\n",[52,26775,26776,26778,26781,26783],{"class":54,"line":80},[52,26777,232],{"class":231},[52,26779,26780],{"class":58}," { defineNuxtPlugin } ",[52,26782,238],{"class":231},[52,26784,26785],{"class":73}," '#app'\n",[52,26787,26788,26790,26792,26794],{"class":54,"line":108},[52,26789,232],{"class":231},[52,26791,22191],{"class":58},[52,26793,238],{"class":231},[52,26795,241],{"class":73},[52,26797,26798],{"class":54,"line":118},[52,26799,597],{"emptyLinePlaceholder":171},[52,26801,26802,26804,26806,26809,26812,26815,26817,26819],{"class":54,"line":594},[52,26803,22204],{"class":231},[52,26805,22207],{"class":231},[52,26807,26808],{"class":66}," defineNuxtPlugin",[52,26810,26811],{"class":58},"((",[52,26813,26814],{"class":8545},"nuxtApp",[52,26816,9717],{"class":58},[52,26818,2425],{"class":231},[52,26820,2904],{"class":58},[52,26822,26823,26826,26828,26830,26833],{"class":54,"line":600},[52,26824,26825],{"class":58}," nuxtApp.vueApp.",[52,26827,25619],{"class":66},[52,26829,2289],{"class":58},[52,26831,26832],{"class":73},"'Shader'",[52,26834,26835],{"class":58},", Shader)\n",[52,26837,26838,26840,26842,26844,26846],{"class":54,"line":606},[52,26839,26825],{"class":58},[52,26841,25619],{"class":66},[52,26843,2289],{"class":58},[52,26845,2126],{"class":73},[52,26847,26848],{"class":58},", LinearGradient)\n",[52,26850,26851],{"class":54,"line":653},[52,26852,1778],{"class":58},[15,26854,1825,26855,26858],{},[31,26856,26857],{},".client.ts"," suffix ensures this plugin only runs in the browser.",[23,26860,26862],{"id":26861},"why-no-hydration-mismatch","Why no hydration mismatch?",[15,26864,1825,26865,9969,26867,26869,26870,26872],{},[31,26866,33],{},[31,26868,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,26871,26225],{}," wrapper (or mounted guard) is still needed to prevent SSR errors.",[156,26874,26875],{},"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":26877},[26878,26880,26881,26882],{"id":26221,"depth":80,"text":26879},"Nuxt: \u003CClientOnly>",{"id":26388,"depth":80,"text":26389},{"id":26551,"depth":80,"text":26552},{"id":26861,"depth":80,"text":26862},"Using Shaders in Nuxt and Vue SSR applications",{},{"title":26187,"description":26883},"docs/guide/vue/ssr","f6dwcjMhfLW5GCgD_qYgNdEioAdCoTiCvArIycJjB6g",[26889,27231,27509,27767,27967,28167,28500,28777,29111,29387,29663,29862,30167,30443,30733,31065,31265,31541,31834,32127,32404,32784,33038,33238,33438,33771,34047,34290,34659,34935,35180,35454,35654,35930,36130,36406,36699,36899,37175,37449,37780,38112,38443,38699,38969,39214,39590,39861,40137,40337,40613,40813,41083,41359,41614,41946,42144,42522,42797,42997,43290,43566,43842,44118,44373,44751,45043,45376,45708,45964,46296,46588,46788,47033,47364,47640,48020,48220,48465,48741,48985,49317,49517,49809,50009,50284,50484,50731,50930,51262,51585,51830,52106,52306,52638,52930,53263,53463,53877,54077,54353,54553,54753],{"id":26890,"title":26891,"body":26892,"category":27225,"componentType":20848,"description":26899,"extension":168,"meta":27226,"navigation":171,"path":27227,"requiresChild":171,"seo":27228,"stem":27229,"__hash__":27230},"components/docs/components/AngularBlur.md","AngularBlur",{"type":8,"value":26893,"toc":27221},[26894,26897,26900,26903,26906,26910,26914,27219],[11,26895,26891],{"id":26896},"angularblur",[15,26898,26899],{},"Radial motion blur rotating around a center point",[26901,26902],"shader-preview",{"component":26891},[23,26904,26905],{"id":21503},"Props",[26907,26908],"props-table",{":props":26909},"[{\"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,26911,26913],{"id":26912},"usage","Usage",[217,26915,26916,26974,27034,27090,27148],{":tabs":1543},[43,26917,26919],{"className":45,"code":26918,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26920,26921,26929,26936,26945,26950,26958,26966],{"__ignoreMap":48},[52,26922,26923,26925,26927],{"class":54,"line":55},[52,26924,59],{"class":58},[52,26926,63],{"class":62},[52,26928,77],{"class":58},[52,26930,26931,26933],{"class":54,"line":80},[52,26932,83],{"class":58},[52,26934,26935],{"class":62},"AngularBlur\n",[52,26937,26938,26940,26942],{"class":54,"line":108},[52,26939,17870],{"class":66},[52,26941,70],{"class":58},[52,26943,26944],{"class":73},"\"20\"\n",[52,26946,26947],{"class":54,"line":118},[52,26948,26949],{"class":58}," >\n",[52,26951,26952,26954,26956],{"class":54,"line":594},[52,26953,2213],{"class":58},[52,26955,2216],{"class":62},[52,26957,105],{"class":58},[52,26959,26960,26962,26964],{"class":54,"line":600},[52,26961,2230],{"class":58},[52,26963,26891],{"class":62},[52,26965,77],{"class":58},[52,26967,26968,26970,26972],{"class":54,"line":606},[52,26969,121],{"class":58},[52,26971,63],{"class":62},[52,26973,77],{"class":58},[43,26975,26977],{"className":360,"code":26976,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26978,26979,26987,26993,27006,27010,27018,27026],{"__ignoreMap":48},[52,26980,26981,26983,26985],{"class":54,"line":55},[52,26982,59],{"class":58},[52,26984,63],{"class":371},[52,26986,77],{"class":58},[52,26988,26989,26991],{"class":54,"line":80},[52,26990,83],{"class":58},[52,26992,26935],{"class":371},[52,26994,26995,26997,26999,27001,27004],{"class":54,"line":108},[52,26996,17981],{"class":66},[52,26998,70],{"class":231},[52,27000,723],{"class":58},[52,27002,27003],{"class":371},"20",[52,27005,729],{"class":58},[52,27007,27008],{"class":54,"line":118},[52,27009,26949],{"class":58},[52,27011,27012,27014,27016],{"class":54,"line":594},[52,27013,2213],{"class":58},[52,27015,2216],{"class":371},[52,27017,105],{"class":58},[52,27019,27020,27022,27024],{"class":54,"line":600},[52,27021,2230],{"class":58},[52,27023,26891],{"class":371},[52,27025,77],{"class":58},[52,27027,27028,27030,27032],{"class":54,"line":606},[52,27029,121],{"class":58},[52,27031,63],{"class":371},[52,27033,77],{"class":58},[43,27035,27036],{"className":2507,"code":26976,"language":2509,"meta":48,"style":48},[31,27037,27038,27046,27052,27062,27066,27074,27082],{"__ignoreMap":48},[52,27039,27040,27042,27044],{"class":54,"line":55},[52,27041,59],{"class":58},[52,27043,63],{"class":371},[52,27045,77],{"class":58},[52,27047,27048,27050],{"class":54,"line":80},[52,27049,83],{"class":58},[52,27051,26935],{"class":371},[52,27053,27054,27056,27058,27060],{"class":54,"line":108},[52,27055,17981],{"class":66},[52,27057,24845],{"class":58},[52,27059,27003],{"class":371},[52,27061,729],{"class":58},[52,27063,27064],{"class":54,"line":118},[52,27065,26949],{"class":58},[52,27067,27068,27070,27072],{"class":54,"line":594},[52,27069,2213],{"class":58},[52,27071,2216],{"class":371},[52,27073,105],{"class":58},[52,27075,27076,27078,27080],{"class":54,"line":600},[52,27077,2230],{"class":58},[52,27079,26891],{"class":371},[52,27081,77],{"class":58},[52,27083,27084,27086,27088],{"class":54,"line":606},[52,27085,121],{"class":58},[52,27087,63],{"class":371},[52,27089,77],{"class":58},[43,27091,27092],{"className":419,"code":26976,"language":420,"meta":48,"style":48},[31,27093,27094,27102,27108,27120,27124,27132,27140],{"__ignoreMap":48},[52,27095,27096,27098,27100],{"class":54,"line":55},[52,27097,59],{"class":58},[52,27099,63],{"class":371},[52,27101,77],{"class":58},[52,27103,27104,27106],{"class":54,"line":80},[52,27105,83],{"class":58},[52,27107,26935],{"class":371},[52,27109,27110,27112,27114,27116,27118],{"class":54,"line":108},[52,27111,17981],{"class":66},[52,27113,70],{"class":231},[52,27115,723],{"class":58},[52,27117,27003],{"class":371},[52,27119,729],{"class":58},[52,27121,27122],{"class":54,"line":118},[52,27123,26949],{"class":58},[52,27125,27126,27128,27130],{"class":54,"line":594},[52,27127,2213],{"class":58},[52,27129,2216],{"class":371},[52,27131,105],{"class":58},[52,27133,27134,27136,27138],{"class":54,"line":600},[52,27135,2230],{"class":58},[52,27137,26891],{"class":371},[52,27139,77],{"class":58},[52,27141,27142,27144,27146],{"class":54,"line":606},[52,27143,121],{"class":58},[52,27145,63],{"class":371},[52,27147,77],{"class":58},[43,27149,27151],{"className":222,"code":27150,"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,27152,27153,27163,27167,27181,27185,27199,27207,27211,27215],{"__ignoreMap":48},[52,27154,27155,27157,27159,27161],{"class":54,"line":55},[52,27156,232],{"class":231},[52,27158,9231],{"class":58},[52,27160,238],{"class":231},[52,27162,9236],{"class":73},[52,27164,27165],{"class":54,"line":80},[52,27166,597],{"emptyLinePlaceholder":171},[52,27168,27169,27171,27173,27175,27177,27179],{"class":54,"line":108},[52,27170,1721],{"class":231},[52,27172,1724],{"class":371},[52,27174,1727],{"class":231},[52,27176,1730],{"class":231},[52,27178,1733],{"class":66},[52,27180,1736],{"class":58},[52,27182,27183],{"class":54,"line":118},[52,27184,1751],{"class":58},[52,27186,27187,27189,27192,27195,27197],{"class":54,"line":594},[52,27188,1756],{"class":58},[52,27190,27191],{"class":73},"'AngularBlur'",[52,27193,27194],{"class":58},", props: { intensity: ",[52,27196,27003],{"class":371},[52,27198,5259],{"class":58},[52,27200,27201,27203,27205],{"class":54,"line":600},[52,27202,4727],{"class":58},[52,27204,2869],{"class":73},[52,27206,2129],{"class":58},[52,27208,27209],{"class":54,"line":606},[52,27210,4744],{"class":58},[52,27212,27213],{"class":54,"line":653},[52,27214,1773],{"class":58},[52,27216,27217],{"class":54,"line":662},[52,27218,1778],{"class":58},[156,27220,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":27222},[27223,27224],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Blurs",{},"/docs/components/angularblur",{"title":26891,"description":26899},"docs/components/AngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":27232,"title":27233,"body":27234,"category":27503,"componentType":20848,"description":27241,"extension":168,"meta":27504,"navigation":171,"path":27505,"requiresChild":171,"seo":27506,"stem":27507,"__hash__":27508},"components/docs/components/Ascii.md","Ascii",{"type":8,"value":27235,"toc":27499},[27236,27239,27242,27244,27246,27249,27251,27496],[11,27237,27233],{"id":27238},"ascii",[15,27240,27241],{},"Convert imagery to ASCII character art",[26901,27243],{"component":27233},[23,27245,26905],{"id":21503},[26907,27247],{":props":27248},"[{\"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,27250,26913],{"id":26912},[217,27252,27253,27298,27342,27386,27430],{":tabs":1543},[43,27254,27256],{"className":45,"code":27255,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAscii>\n \u003CCircle />\n \u003C/Ascii>\n\u003C/Shader>\n",[31,27257,27258,27266,27274,27282,27290],{"__ignoreMap":48},[52,27259,27260,27262,27264],{"class":54,"line":55},[52,27261,59],{"class":58},[52,27263,63],{"class":62},[52,27265,77],{"class":58},[52,27267,27268,27270,27272],{"class":54,"line":80},[52,27269,83],{"class":58},[52,27271,27233],{"class":62},[52,27273,77],{"class":58},[52,27275,27276,27278,27280],{"class":54,"line":108},[52,27277,2213],{"class":58},[52,27279,2216],{"class":62},[52,27281,105],{"class":58},[52,27283,27284,27286,27288],{"class":54,"line":118},[52,27285,2230],{"class":58},[52,27287,27233],{"class":62},[52,27289,77],{"class":58},[52,27291,27292,27294,27296],{"class":54,"line":594},[52,27293,121],{"class":58},[52,27295,63],{"class":62},[52,27297,77],{"class":58},[43,27299,27300],{"className":360,"code":27255,"language":362,"meta":48,"style":48},[31,27301,27302,27310,27318,27326,27334],{"__ignoreMap":48},[52,27303,27304,27306,27308],{"class":54,"line":55},[52,27305,59],{"class":58},[52,27307,63],{"class":371},[52,27309,77],{"class":58},[52,27311,27312,27314,27316],{"class":54,"line":80},[52,27313,83],{"class":58},[52,27315,27233],{"class":371},[52,27317,77],{"class":58},[52,27319,27320,27322,27324],{"class":54,"line":108},[52,27321,2213],{"class":58},[52,27323,2216],{"class":371},[52,27325,105],{"class":58},[52,27327,27328,27330,27332],{"class":54,"line":118},[52,27329,2230],{"class":58},[52,27331,27233],{"class":371},[52,27333,77],{"class":58},[52,27335,27336,27338,27340],{"class":54,"line":594},[52,27337,121],{"class":58},[52,27339,63],{"class":371},[52,27341,77],{"class":58},[43,27343,27344],{"className":2507,"code":27255,"language":2509,"meta":48,"style":48},[31,27345,27346,27354,27362,27370,27378],{"__ignoreMap":48},[52,27347,27348,27350,27352],{"class":54,"line":55},[52,27349,59],{"class":58},[52,27351,63],{"class":371},[52,27353,77],{"class":58},[52,27355,27356,27358,27360],{"class":54,"line":80},[52,27357,83],{"class":58},[52,27359,27233],{"class":371},[52,27361,77],{"class":58},[52,27363,27364,27366,27368],{"class":54,"line":108},[52,27365,2213],{"class":58},[52,27367,2216],{"class":371},[52,27369,105],{"class":58},[52,27371,27372,27374,27376],{"class":54,"line":118},[52,27373,2230],{"class":58},[52,27375,27233],{"class":371},[52,27377,77],{"class":58},[52,27379,27380,27382,27384],{"class":54,"line":594},[52,27381,121],{"class":58},[52,27383,63],{"class":371},[52,27385,77],{"class":58},[43,27387,27388],{"className":419,"code":27255,"language":420,"meta":48,"style":48},[31,27389,27390,27398,27406,27414,27422],{"__ignoreMap":48},[52,27391,27392,27394,27396],{"class":54,"line":55},[52,27393,59],{"class":58},[52,27395,63],{"class":371},[52,27397,77],{"class":58},[52,27399,27400,27402,27404],{"class":54,"line":80},[52,27401,83],{"class":58},[52,27403,27233],{"class":371},[52,27405,77],{"class":58},[52,27407,27408,27410,27412],{"class":54,"line":108},[52,27409,2213],{"class":58},[52,27411,2216],{"class":371},[52,27413,105],{"class":58},[52,27415,27416,27418,27420],{"class":54,"line":118},[52,27417,2230],{"class":58},[52,27419,27233],{"class":371},[52,27421,77],{"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,27433],{"className":222,"code":27432,"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,27434,27435,27445,27449,27463,27467,27476,27484,27488,27492],{"__ignoreMap":48},[52,27436,27437,27439,27441,27443],{"class":54,"line":55},[52,27438,232],{"class":231},[52,27440,9231],{"class":58},[52,27442,238],{"class":231},[52,27444,9236],{"class":73},[52,27446,27447],{"class":54,"line":80},[52,27448,597],{"emptyLinePlaceholder":171},[52,27450,27451,27453,27455,27457,27459,27461],{"class":54,"line":108},[52,27452,1721],{"class":231},[52,27454,1724],{"class":371},[52,27456,1727],{"class":231},[52,27458,1730],{"class":231},[52,27460,1733],{"class":66},[52,27462,1736],{"class":58},[52,27464,27465],{"class":54,"line":118},[52,27466,1751],{"class":58},[52,27468,27469,27471,27474],{"class":54,"line":594},[52,27470,1756],{"class":58},[52,27472,27473],{"class":73},"'Ascii'",[52,27475,4722],{"class":58},[52,27477,27478,27480,27482],{"class":54,"line":600},[52,27479,4727],{"class":58},[52,27481,2869],{"class":73},[52,27483,2129],{"class":58},[52,27485,27486],{"class":54,"line":606},[52,27487,4744],{"class":58},[52,27489,27490],{"class":54,"line":653},[52,27491,1773],{"class":58},[52,27493,27494],{"class":54,"line":662},[52,27495,1778],{"class":58},[156,27497,27498],{},"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":27500},[27501,27502],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Stylize",{},"/docs/components/ascii",{"title":27233,"description":27241},"docs/components/Ascii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":27510,"title":10336,"body":27511,"category":27760,"componentType":20842,"description":27518,"extension":168,"meta":27761,"navigation":171,"path":27762,"requiresChild":27763,"seo":27764,"stem":27765,"__hash__":27766},"components/docs/components/Aurora.md",{"type":8,"value":27512,"toc":27756},[27513,27516,27519,27521,27523,27526,27528,27754],[11,27514,10336],{"id":27515},"aurora",[15,27517,27518],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[26901,27520],{"component":10336},[23,27522,26905],{"id":21503},[26907,27524],{":props":27525},"[{\"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,27527,26913],{"id":26912},[217,27529,27530,27571,27615,27655,27697],{":tabs":1543},[43,27531,27533],{"className":45,"code":27532,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n />\n\u003C/Shader>\n",[31,27534,27535,27543,27550,27559,27563],{"__ignoreMap":48},[52,27536,27537,27539,27541],{"class":54,"line":55},[52,27538,59],{"class":58},[52,27540,63],{"class":62},[52,27542,77],{"class":58},[52,27544,27545,27547],{"class":54,"line":80},[52,27546,83],{"class":58},[52,27548,27549],{"class":62},"Aurora\n",[52,27551,27552,27554,27556],{"class":54,"line":108},[52,27553,17870],{"class":66},[52,27555,70],{"class":58},[52,27557,27558],{"class":73},"\"80\"\n",[52,27560,27561],{"class":54,"line":118},[52,27562,1224],{"class":58},[52,27564,27565,27567,27569],{"class":54,"line":594},[52,27566,121],{"class":58},[52,27568,63],{"class":62},[52,27570,77],{"class":58},[43,27572,27574],{"className":360,"code":27573,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n intensity={80}\n />\n\u003C/Shader>\n",[31,27575,27576,27584,27590,27603,27607],{"__ignoreMap":48},[52,27577,27578,27580,27582],{"class":54,"line":55},[52,27579,59],{"class":58},[52,27581,63],{"class":371},[52,27583,77],{"class":58},[52,27585,27586,27588],{"class":54,"line":80},[52,27587,83],{"class":58},[52,27589,27549],{"class":371},[52,27591,27592,27594,27596,27598,27601],{"class":54,"line":108},[52,27593,17981],{"class":66},[52,27595,70],{"class":231},[52,27597,723],{"class":58},[52,27599,27600],{"class":371},"80",[52,27602,729],{"class":58},[52,27604,27605],{"class":54,"line":118},[52,27606,1224],{"class":58},[52,27608,27609,27611,27613],{"class":54,"line":594},[52,27610,121],{"class":58},[52,27612,63],{"class":371},[52,27614,77],{"class":58},[43,27616,27617],{"className":2507,"code":27573,"language":2509,"meta":48,"style":48},[31,27618,27619,27627,27633,27643,27647],{"__ignoreMap":48},[52,27620,27621,27623,27625],{"class":54,"line":55},[52,27622,59],{"class":58},[52,27624,63],{"class":371},[52,27626,77],{"class":58},[52,27628,27629,27631],{"class":54,"line":80},[52,27630,83],{"class":58},[52,27632,27549],{"class":371},[52,27634,27635,27637,27639,27641],{"class":54,"line":108},[52,27636,17981],{"class":66},[52,27638,24845],{"class":58},[52,27640,27600],{"class":371},[52,27642,729],{"class":58},[52,27644,27645],{"class":54,"line":118},[52,27646,1224],{"class":58},[52,27648,27649,27651,27653],{"class":54,"line":594},[52,27650,121],{"class":58},[52,27652,63],{"class":371},[52,27654,77],{"class":58},[43,27656,27657],{"className":419,"code":27573,"language":420,"meta":48,"style":48},[31,27658,27659,27667,27673,27685,27689],{"__ignoreMap":48},[52,27660,27661,27663,27665],{"class":54,"line":55},[52,27662,59],{"class":58},[52,27664,63],{"class":371},[52,27666,77],{"class":58},[52,27668,27669,27671],{"class":54,"line":80},[52,27670,83],{"class":58},[52,27672,27549],{"class":371},[52,27674,27675,27677,27679,27681,27683],{"class":54,"line":108},[52,27676,17981],{"class":66},[52,27678,70],{"class":231},[52,27680,723],{"class":58},[52,27682,27600],{"class":371},[52,27684,729],{"class":58},[52,27686,27687],{"class":54,"line":118},[52,27688,1224],{"class":58},[52,27690,27691,27693,27695],{"class":54,"line":594},[52,27692,121],{"class":58},[52,27694,63],{"class":371},[52,27696,77],{"class":58},[43,27698,27700],{"className":222,"code":27699,"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,27701,27702,27712,27716,27730,27734,27746,27750],{"__ignoreMap":48},[52,27703,27704,27706,27708,27710],{"class":54,"line":55},[52,27705,232],{"class":231},[52,27707,9231],{"class":58},[52,27709,238],{"class":231},[52,27711,9236],{"class":73},[52,27713,27714],{"class":54,"line":80},[52,27715,597],{"emptyLinePlaceholder":171},[52,27717,27718,27720,27722,27724,27726,27728],{"class":54,"line":108},[52,27719,1721],{"class":231},[52,27721,1724],{"class":371},[52,27723,1727],{"class":231},[52,27725,1730],{"class":231},[52,27727,1733],{"class":66},[52,27729,1736],{"class":58},[52,27731,27732],{"class":54,"line":118},[52,27733,1751],{"class":58},[52,27735,27736,27738,27740,27742,27744],{"class":54,"line":594},[52,27737,1756],{"class":58},[52,27739,10714],{"class":73},[52,27741,27194],{"class":58},[52,27743,27600],{"class":371},[52,27745,1768],{"class":58},[52,27747,27748],{"class":54,"line":600},[52,27749,1773],{"class":58},[52,27751,27752],{"class":54,"line":606},[52,27753,1778],{"class":58},[156,27755,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":27757},[27758,27759],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Textures",{},"/docs/components/aurora",false,{"title":10336,"description":27518},"docs/components/Aurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":27768,"title":27769,"body":27770,"category":27760,"componentType":20842,"description":27777,"extension":168,"meta":27962,"navigation":171,"path":27963,"requiresChild":27763,"seo":27964,"stem":27965,"__hash__":27966},"components/docs/components/Beam.md","Beam",{"type":8,"value":27771,"toc":27958},[27772,27775,27778,27780,27782,27785,27787,27956],[11,27773,27769],{"id":27774},"beam",[15,27776,27777],{},"A beam of light from one point to another.",[26901,27779],{"component":27769},[23,27781,26905],{"id":21503},[26907,27783],{":props":27784},"[{\"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,27786,26913],{"id":26912},[217,27788,27789,27818,27846,27874,27902],{":tabs":1543},[43,27790,27792],{"className":45,"code":27791,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBeam />\n\u003C/Shader>\n",[31,27793,27794,27802,27810],{"__ignoreMap":48},[52,27795,27796,27798,27800],{"class":54,"line":55},[52,27797,59],{"class":58},[52,27799,63],{"class":62},[52,27801,77],{"class":58},[52,27803,27804,27806,27808],{"class":54,"line":80},[52,27805,83],{"class":58},[52,27807,27769],{"class":62},[52,27809,105],{"class":58},[52,27811,27812,27814,27816],{"class":54,"line":108},[52,27813,121],{"class":58},[52,27815,63],{"class":62},[52,27817,77],{"class":58},[43,27819,27820],{"className":360,"code":27791,"language":362,"meta":48,"style":48},[31,27821,27822,27830,27838],{"__ignoreMap":48},[52,27823,27824,27826,27828],{"class":54,"line":55},[52,27825,59],{"class":58},[52,27827,63],{"class":371},[52,27829,77],{"class":58},[52,27831,27832,27834,27836],{"class":54,"line":80},[52,27833,83],{"class":58},[52,27835,27769],{"class":371},[52,27837,105],{"class":58},[52,27839,27840,27842,27844],{"class":54,"line":108},[52,27841,121],{"class":58},[52,27843,63],{"class":371},[52,27845,77],{"class":58},[43,27847,27848],{"className":2507,"code":27791,"language":2509,"meta":48,"style":48},[31,27849,27850,27858,27866],{"__ignoreMap":48},[52,27851,27852,27854,27856],{"class":54,"line":55},[52,27853,59],{"class":58},[52,27855,63],{"class":371},[52,27857,77],{"class":58},[52,27859,27860,27862,27864],{"class":54,"line":80},[52,27861,83],{"class":58},[52,27863,27769],{"class":371},[52,27865,105],{"class":58},[52,27867,27868,27870,27872],{"class":54,"line":108},[52,27869,121],{"class":58},[52,27871,63],{"class":371},[52,27873,77],{"class":58},[43,27875,27876],{"className":419,"code":27791,"language":420,"meta":48,"style":48},[31,27877,27878,27886,27894],{"__ignoreMap":48},[52,27879,27880,27882,27884],{"class":54,"line":55},[52,27881,59],{"class":58},[52,27883,63],{"class":371},[52,27885,77],{"class":58},[52,27887,27888,27890,27892],{"class":54,"line":80},[52,27889,83],{"class":58},[52,27891,27769],{"class":371},[52,27893,105],{"class":58},[52,27895,27896,27898,27900],{"class":54,"line":108},[52,27897,121],{"class":58},[52,27899,63],{"class":371},[52,27901,77],{"class":58},[43,27903,27905],{"className":222,"code":27904,"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,27906,27907,27917,27921,27935,27939,27948,27952],{"__ignoreMap":48},[52,27908,27909,27911,27913,27915],{"class":54,"line":55},[52,27910,232],{"class":231},[52,27912,9231],{"class":58},[52,27914,238],{"class":231},[52,27916,9236],{"class":73},[52,27918,27919],{"class":54,"line":80},[52,27920,597],{"emptyLinePlaceholder":171},[52,27922,27923,27925,27927,27929,27931,27933],{"class":54,"line":108},[52,27924,1721],{"class":231},[52,27926,1724],{"class":371},[52,27928,1727],{"class":231},[52,27930,1730],{"class":231},[52,27932,1733],{"class":66},[52,27934,1736],{"class":58},[52,27936,27937],{"class":54,"line":118},[52,27938,1751],{"class":58},[52,27940,27941,27943,27946],{"class":54,"line":594},[52,27942,1756],{"class":58},[52,27944,27945],{"class":73},"'Beam'",[52,27947,2129],{"class":58},[52,27949,27950],{"class":54,"line":600},[52,27951,1773],{"class":58},[52,27953,27954],{"class":54,"line":606},[52,27955,1778],{"class":58},[156,27957,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":27959},[27960,27961],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/beam",{"title":27769,"description":27777},"docs/components/Beam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":27968,"title":27969,"body":27970,"category":27760,"componentType":20842,"description":27977,"extension":168,"meta":28162,"navigation":171,"path":28163,"requiresChild":27763,"seo":28164,"stem":28165,"__hash__":28166},"components/docs/components/Blob.md","Blob",{"type":8,"value":27971,"toc":28158},[27972,27975,27978,27980,27982,27985,27987,28156],[11,27973,27969],{"id":27974},"blob",[15,27976,27977],{},"Organic animated blob with 3D lighting and gradients",[26901,27979],{"component":27969},[23,27981,26905],{"id":21503},[26907,27983],{":props":27984},"[{\"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,27986,26913],{"id":26912},[217,27988,27989,28018,28046,28074,28102],{":tabs":1543},[43,27990,27992],{"className":45,"code":27991,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlob />\n\u003C/Shader>\n",[31,27993,27994,28002,28010],{"__ignoreMap":48},[52,27995,27996,27998,28000],{"class":54,"line":55},[52,27997,59],{"class":58},[52,27999,63],{"class":62},[52,28001,77],{"class":58},[52,28003,28004,28006,28008],{"class":54,"line":80},[52,28005,83],{"class":58},[52,28007,27969],{"class":62},[52,28009,105],{"class":58},[52,28011,28012,28014,28016],{"class":54,"line":108},[52,28013,121],{"class":58},[52,28015,63],{"class":62},[52,28017,77],{"class":58},[43,28019,28020],{"className":360,"code":27991,"language":362,"meta":48,"style":48},[31,28021,28022,28030,28038],{"__ignoreMap":48},[52,28023,28024,28026,28028],{"class":54,"line":55},[52,28025,59],{"class":58},[52,28027,63],{"class":371},[52,28029,77],{"class":58},[52,28031,28032,28034,28036],{"class":54,"line":80},[52,28033,83],{"class":58},[52,28035,27969],{"class":371},[52,28037,105],{"class":58},[52,28039,28040,28042,28044],{"class":54,"line":108},[52,28041,121],{"class":58},[52,28043,63],{"class":371},[52,28045,77],{"class":58},[43,28047,28048],{"className":2507,"code":27991,"language":2509,"meta":48,"style":48},[31,28049,28050,28058,28066],{"__ignoreMap":48},[52,28051,28052,28054,28056],{"class":54,"line":55},[52,28053,59],{"class":58},[52,28055,63],{"class":371},[52,28057,77],{"class":58},[52,28059,28060,28062,28064],{"class":54,"line":80},[52,28061,83],{"class":58},[52,28063,27969],{"class":371},[52,28065,105],{"class":58},[52,28067,28068,28070,28072],{"class":54,"line":108},[52,28069,121],{"class":58},[52,28071,63],{"class":371},[52,28073,77],{"class":58},[43,28075,28076],{"className":419,"code":27991,"language":420,"meta":48,"style":48},[31,28077,28078,28086,28094],{"__ignoreMap":48},[52,28079,28080,28082,28084],{"class":54,"line":55},[52,28081,59],{"class":58},[52,28083,63],{"class":371},[52,28085,77],{"class":58},[52,28087,28088,28090,28092],{"class":54,"line":80},[52,28089,83],{"class":58},[52,28091,27969],{"class":371},[52,28093,105],{"class":58},[52,28095,28096,28098,28100],{"class":54,"line":108},[52,28097,121],{"class":58},[52,28099,63],{"class":371},[52,28101,77],{"class":58},[43,28103,28105],{"className":222,"code":28104,"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,28106,28107,28117,28121,28135,28139,28148,28152],{"__ignoreMap":48},[52,28108,28109,28111,28113,28115],{"class":54,"line":55},[52,28110,232],{"class":231},[52,28112,9231],{"class":58},[52,28114,238],{"class":231},[52,28116,9236],{"class":73},[52,28118,28119],{"class":54,"line":80},[52,28120,597],{"emptyLinePlaceholder":171},[52,28122,28123,28125,28127,28129,28131,28133],{"class":54,"line":108},[52,28124,1721],{"class":231},[52,28126,1724],{"class":371},[52,28128,1727],{"class":231},[52,28130,1730],{"class":231},[52,28132,1733],{"class":66},[52,28134,1736],{"class":58},[52,28136,28137],{"class":54,"line":118},[52,28138,1751],{"class":58},[52,28140,28141,28143,28146],{"class":54,"line":594},[52,28142,1756],{"class":58},[52,28144,28145],{"class":73},"'Blob'",[52,28147,2129],{"class":58},[52,28149,28150],{"class":54,"line":600},[52,28151,1773],{"class":58},[52,28153,28154],{"class":54,"line":606},[52,28155,1778],{"class":58},[156,28157,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":28159},[28160,28161],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/blob",{"title":27969,"description":27977},"docs/components/Blob","2a5XrgmcJxcBLcEQkxs8e3ZaxmxCERp56Moc00FmMUE",{"id":28168,"title":9486,"body":28169,"category":27225,"componentType":20848,"description":28176,"extension":168,"meta":28495,"navigation":171,"path":28496,"requiresChild":171,"seo":28497,"stem":28498,"__hash__":28499},"components/docs/components/Blur.md",{"type":8,"value":28170,"toc":28491},[28171,28174,28177,28179,28181,28184,28186,28489],[11,28172,9486],{"id":28173},"blur",[15,28175,28176],{},"A simple Gaussian blur effect",[26901,28178],{"component":9486},[23,28180,26905],{"id":21503},[26907,28182],{":props":28183},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,28185,26913],{"id":26912},[217,28187,28188,28245,28305,28361,28419],{":tabs":1543},[43,28189,28191],{"className":45,"code":28190,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28192,28193,28201,28208,28217,28221,28229,28237],{"__ignoreMap":48},[52,28194,28195,28197,28199],{"class":54,"line":55},[52,28196,59],{"class":58},[52,28198,63],{"class":62},[52,28200,77],{"class":58},[52,28202,28203,28205],{"class":54,"line":80},[52,28204,83],{"class":58},[52,28206,28207],{"class":62},"Blur\n",[52,28209,28210,28212,28214],{"class":54,"line":108},[52,28211,17870],{"class":66},[52,28213,70],{"class":58},[52,28215,28216],{"class":73},"\"50\"\n",[52,28218,28219],{"class":54,"line":118},[52,28220,26949],{"class":58},[52,28222,28223,28225,28227],{"class":54,"line":594},[52,28224,2213],{"class":58},[52,28226,2216],{"class":62},[52,28228,105],{"class":58},[52,28230,28231,28233,28235],{"class":54,"line":600},[52,28232,2230],{"class":58},[52,28234,9486],{"class":62},[52,28236,77],{"class":58},[52,28238,28239,28241,28243],{"class":54,"line":606},[52,28240,121],{"class":58},[52,28242,63],{"class":62},[52,28244,77],{"class":58},[43,28246,28248],{"className":360,"code":28247,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28249,28250,28258,28264,28277,28281,28289,28297],{"__ignoreMap":48},[52,28251,28252,28254,28256],{"class":54,"line":55},[52,28253,59],{"class":58},[52,28255,63],{"class":371},[52,28257,77],{"class":58},[52,28259,28260,28262],{"class":54,"line":80},[52,28261,83],{"class":58},[52,28263,28207],{"class":371},[52,28265,28266,28268,28270,28272,28275],{"class":54,"line":108},[52,28267,17981],{"class":66},[52,28269,70],{"class":231},[52,28271,723],{"class":58},[52,28273,28274],{"class":371},"50",[52,28276,729],{"class":58},[52,28278,28279],{"class":54,"line":118},[52,28280,26949],{"class":58},[52,28282,28283,28285,28287],{"class":54,"line":594},[52,28284,2213],{"class":58},[52,28286,2216],{"class":371},[52,28288,105],{"class":58},[52,28290,28291,28293,28295],{"class":54,"line":600},[52,28292,2230],{"class":58},[52,28294,9486],{"class":371},[52,28296,77],{"class":58},[52,28298,28299,28301,28303],{"class":54,"line":606},[52,28300,121],{"class":58},[52,28302,63],{"class":371},[52,28304,77],{"class":58},[43,28306,28307],{"className":2507,"code":28247,"language":2509,"meta":48,"style":48},[31,28308,28309,28317,28323,28333,28337,28345,28353],{"__ignoreMap":48},[52,28310,28311,28313,28315],{"class":54,"line":55},[52,28312,59],{"class":58},[52,28314,63],{"class":371},[52,28316,77],{"class":58},[52,28318,28319,28321],{"class":54,"line":80},[52,28320,83],{"class":58},[52,28322,28207],{"class":371},[52,28324,28325,28327,28329,28331],{"class":54,"line":108},[52,28326,17981],{"class":66},[52,28328,24845],{"class":58},[52,28330,28274],{"class":371},[52,28332,729],{"class":58},[52,28334,28335],{"class":54,"line":118},[52,28336,26949],{"class":58},[52,28338,28339,28341,28343],{"class":54,"line":594},[52,28340,2213],{"class":58},[52,28342,2216],{"class":371},[52,28344,105],{"class":58},[52,28346,28347,28349,28351],{"class":54,"line":600},[52,28348,2230],{"class":58},[52,28350,9486],{"class":371},[52,28352,77],{"class":58},[52,28354,28355,28357,28359],{"class":54,"line":606},[52,28356,121],{"class":58},[52,28358,63],{"class":371},[52,28360,77],{"class":58},[43,28362,28363],{"className":419,"code":28247,"language":420,"meta":48,"style":48},[31,28364,28365,28373,28379,28391,28395,28403,28411],{"__ignoreMap":48},[52,28366,28367,28369,28371],{"class":54,"line":55},[52,28368,59],{"class":58},[52,28370,63],{"class":371},[52,28372,77],{"class":58},[52,28374,28375,28377],{"class":54,"line":80},[52,28376,83],{"class":58},[52,28378,28207],{"class":371},[52,28380,28381,28383,28385,28387,28389],{"class":54,"line":108},[52,28382,17981],{"class":66},[52,28384,70],{"class":231},[52,28386,723],{"class":58},[52,28388,28274],{"class":371},[52,28390,729],{"class":58},[52,28392,28393],{"class":54,"line":118},[52,28394,26949],{"class":58},[52,28396,28397,28399,28401],{"class":54,"line":594},[52,28398,2213],{"class":58},[52,28400,2216],{"class":371},[52,28402,105],{"class":58},[52,28404,28405,28407,28409],{"class":54,"line":600},[52,28406,2230],{"class":58},[52,28408,9486],{"class":371},[52,28410,77],{"class":58},[52,28412,28413,28415,28417],{"class":54,"line":606},[52,28414,121],{"class":58},[52,28416,63],{"class":371},[52,28418,77],{"class":58},[43,28420,28422],{"className":222,"code":28421,"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,28423,28424,28434,28438,28452,28456,28469,28477,28481,28485],{"__ignoreMap":48},[52,28425,28426,28428,28430,28432],{"class":54,"line":55},[52,28427,232],{"class":231},[52,28429,9231],{"class":58},[52,28431,238],{"class":231},[52,28433,9236],{"class":73},[52,28435,28436],{"class":54,"line":80},[52,28437,597],{"emptyLinePlaceholder":171},[52,28439,28440,28442,28444,28446,28448,28450],{"class":54,"line":108},[52,28441,1721],{"class":231},[52,28443,1724],{"class":371},[52,28445,1727],{"class":231},[52,28447,1730],{"class":231},[52,28449,1733],{"class":66},[52,28451,1736],{"class":58},[52,28453,28454],{"class":54,"line":118},[52,28455,1751],{"class":58},[52,28457,28458,28460,28463,28465,28467],{"class":54,"line":594},[52,28459,1756],{"class":58},[52,28461,28462],{"class":73},"'Blur'",[52,28464,27194],{"class":58},[52,28466,28274],{"class":371},[52,28468,5259],{"class":58},[52,28470,28471,28473,28475],{"class":54,"line":600},[52,28472,4727],{"class":58},[52,28474,2869],{"class":73},[52,28476,2129],{"class":58},[52,28478,28479],{"class":54,"line":606},[52,28480,4744],{"class":58},[52,28482,28483],{"class":54,"line":653},[52,28484,1773],{"class":58},[52,28486,28487],{"class":54,"line":662},[52,28488,1778],{"class":58},[156,28490,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28492},[28493,28494],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/blur",{"title":9486,"description":28176},"docs/components/Blur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":28501,"title":28502,"body":28503,"category":28771,"componentType":20848,"description":28510,"extension":168,"meta":28772,"navigation":171,"path":28773,"requiresChild":171,"seo":28774,"stem":28775,"__hash__":28776},"components/docs/components/BrightnessContrast.md","BrightnessContrast",{"type":8,"value":28504,"toc":28767},[28505,28508,28511,28513,28515,28518,28520,28765],[11,28506,28502],{"id":28507},"brightnesscontrast",[15,28509,28510],{},"Adjust brightness and contrast of the image",[26901,28512],{"component":28502},[23,28514,26905],{"id":21503},[26907,28516],{":props":28517},"[{\"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,28519,26913],{"id":26912},[217,28521,28522,28567,28611,28655,28699],{":tabs":1543},[43,28523,28525],{"className":45,"code":28524,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle />\n \u003C/BrightnessContrast>\n\u003C/Shader>\n",[31,28526,28527,28535,28543,28551,28559],{"__ignoreMap":48},[52,28528,28529,28531,28533],{"class":54,"line":55},[52,28530,59],{"class":58},[52,28532,63],{"class":62},[52,28534,77],{"class":58},[52,28536,28537,28539,28541],{"class":54,"line":80},[52,28538,83],{"class":58},[52,28540,28502],{"class":62},[52,28542,77],{"class":58},[52,28544,28545,28547,28549],{"class":54,"line":108},[52,28546,2213],{"class":58},[52,28548,2216],{"class":62},[52,28550,105],{"class":58},[52,28552,28553,28555,28557],{"class":54,"line":118},[52,28554,2230],{"class":58},[52,28556,28502],{"class":62},[52,28558,77],{"class":58},[52,28560,28561,28563,28565],{"class":54,"line":594},[52,28562,121],{"class":58},[52,28564,63],{"class":62},[52,28566,77],{"class":58},[43,28568,28569],{"className":360,"code":28524,"language":362,"meta":48,"style":48},[31,28570,28571,28579,28587,28595,28603],{"__ignoreMap":48},[52,28572,28573,28575,28577],{"class":54,"line":55},[52,28574,59],{"class":58},[52,28576,63],{"class":371},[52,28578,77],{"class":58},[52,28580,28581,28583,28585],{"class":54,"line":80},[52,28582,83],{"class":58},[52,28584,28502],{"class":371},[52,28586,77],{"class":58},[52,28588,28589,28591,28593],{"class":54,"line":108},[52,28590,2213],{"class":58},[52,28592,2216],{"class":371},[52,28594,105],{"class":58},[52,28596,28597,28599,28601],{"class":54,"line":118},[52,28598,2230],{"class":58},[52,28600,28502],{"class":371},[52,28602,77],{"class":58},[52,28604,28605,28607,28609],{"class":54,"line":594},[52,28606,121],{"class":58},[52,28608,63],{"class":371},[52,28610,77],{"class":58},[43,28612,28613],{"className":2507,"code":28524,"language":2509,"meta":48,"style":48},[31,28614,28615,28623,28631,28639,28647],{"__ignoreMap":48},[52,28616,28617,28619,28621],{"class":54,"line":55},[52,28618,59],{"class":58},[52,28620,63],{"class":371},[52,28622,77],{"class":58},[52,28624,28625,28627,28629],{"class":54,"line":80},[52,28626,83],{"class":58},[52,28628,28502],{"class":371},[52,28630,77],{"class":58},[52,28632,28633,28635,28637],{"class":54,"line":108},[52,28634,2213],{"class":58},[52,28636,2216],{"class":371},[52,28638,105],{"class":58},[52,28640,28641,28643,28645],{"class":54,"line":118},[52,28642,2230],{"class":58},[52,28644,28502],{"class":371},[52,28646,77],{"class":58},[52,28648,28649,28651,28653],{"class":54,"line":594},[52,28650,121],{"class":58},[52,28652,63],{"class":371},[52,28654,77],{"class":58},[43,28656,28657],{"className":419,"code":28524,"language":420,"meta":48,"style":48},[31,28658,28659,28667,28675,28683,28691],{"__ignoreMap":48},[52,28660,28661,28663,28665],{"class":54,"line":55},[52,28662,59],{"class":58},[52,28664,63],{"class":371},[52,28666,77],{"class":58},[52,28668,28669,28671,28673],{"class":54,"line":80},[52,28670,83],{"class":58},[52,28672,28502],{"class":371},[52,28674,77],{"class":58},[52,28676,28677,28679,28681],{"class":54,"line":108},[52,28678,2213],{"class":58},[52,28680,2216],{"class":371},[52,28682,105],{"class":58},[52,28684,28685,28687,28689],{"class":54,"line":118},[52,28686,2230],{"class":58},[52,28688,28502],{"class":371},[52,28690,77],{"class":58},[52,28692,28693,28695,28697],{"class":54,"line":594},[52,28694,121],{"class":58},[52,28696,63],{"class":371},[52,28698,77],{"class":58},[43,28700,28702],{"className":222,"code":28701,"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,28703,28704,28714,28718,28732,28736,28745,28753,28757,28761],{"__ignoreMap":48},[52,28705,28706,28708,28710,28712],{"class":54,"line":55},[52,28707,232],{"class":231},[52,28709,9231],{"class":58},[52,28711,238],{"class":231},[52,28713,9236],{"class":73},[52,28715,28716],{"class":54,"line":80},[52,28717,597],{"emptyLinePlaceholder":171},[52,28719,28720,28722,28724,28726,28728,28730],{"class":54,"line":108},[52,28721,1721],{"class":231},[52,28723,1724],{"class":371},[52,28725,1727],{"class":231},[52,28727,1730],{"class":231},[52,28729,1733],{"class":66},[52,28731,1736],{"class":58},[52,28733,28734],{"class":54,"line":118},[52,28735,1751],{"class":58},[52,28737,28738,28740,28743],{"class":54,"line":594},[52,28739,1756],{"class":58},[52,28741,28742],{"class":73},"'BrightnessContrast'",[52,28744,4722],{"class":58},[52,28746,28747,28749,28751],{"class":54,"line":600},[52,28748,4727],{"class":58},[52,28750,2869],{"class":73},[52,28752,2129],{"class":58},[52,28754,28755],{"class":54,"line":606},[52,28756,4744],{"class":58},[52,28758,28759],{"class":54,"line":653},[52,28760,1773],{"class":58},[52,28762,28763],{"class":54,"line":662},[52,28764,1778],{"class":58},[156,28766,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":28768},[28769,28770],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Adjustments",{},"/docs/components/brightnesscontrast",{"title":28502,"description":28510},"docs/components/BrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":28778,"title":28779,"body":28780,"category":29105,"componentType":20848,"description":28787,"extension":168,"meta":29106,"navigation":171,"path":29107,"requiresChild":171,"seo":29108,"stem":29109,"__hash__":29110},"components/docs/components/Bulge.md","Bulge",{"type":8,"value":28781,"toc":29101},[28782,28785,28788,28790,28792,28795,28797,29099],[11,28783,28779],{"id":28784},"bulge",[15,28786,28787],{},"Magnify or pinch content around a center point",[26901,28789],{"component":28779},[23,28791,26905],{"id":21503},[26907,28793],{":props":28794},"[{\"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,28796,26913],{"id":26912},[217,28798,28799,28856,28915,28971,29029],{":tabs":1543},[43,28800,28802],{"className":45,"code":28801,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28803,28804,28812,28819,28828,28832,28840,28848],{"__ignoreMap":48},[52,28805,28806,28808,28810],{"class":54,"line":55},[52,28807,59],{"class":58},[52,28809,63],{"class":62},[52,28811,77],{"class":58},[52,28813,28814,28816],{"class":54,"line":80},[52,28815,83],{"class":58},[52,28817,28818],{"class":62},"Bulge\n",[52,28820,28821,28823,28825],{"class":54,"line":108},[52,28822,14901],{"class":66},[52,28824,70],{"class":58},[52,28826,28827],{"class":73},"\"1\"\n",[52,28829,28830],{"class":54,"line":118},[52,28831,26949],{"class":58},[52,28833,28834,28836,28838],{"class":54,"line":594},[52,28835,2213],{"class":58},[52,28837,2216],{"class":62},[52,28839,105],{"class":58},[52,28841,28842,28844,28846],{"class":54,"line":600},[52,28843,2230],{"class":58},[52,28845,28779],{"class":62},[52,28847,77],{"class":58},[52,28849,28850,28852,28854],{"class":54,"line":606},[52,28851,121],{"class":58},[52,28853,63],{"class":62},[52,28855,77],{"class":58},[43,28857,28859],{"className":360,"code":28858,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28860,28861,28869,28875,28887,28891,28899,28907],{"__ignoreMap":48},[52,28862,28863,28865,28867],{"class":54,"line":55},[52,28864,59],{"class":58},[52,28866,63],{"class":371},[52,28868,77],{"class":58},[52,28870,28871,28873],{"class":54,"line":80},[52,28872,83],{"class":58},[52,28874,28818],{"class":371},[52,28876,28877,28879,28881,28883,28885],{"class":54,"line":108},[52,28878,7361],{"class":66},[52,28880,70],{"class":231},[52,28882,723],{"class":58},[52,28884,6391],{"class":371},[52,28886,729],{"class":58},[52,28888,28889],{"class":54,"line":118},[52,28890,26949],{"class":58},[52,28892,28893,28895,28897],{"class":54,"line":594},[52,28894,2213],{"class":58},[52,28896,2216],{"class":371},[52,28898,105],{"class":58},[52,28900,28901,28903,28905],{"class":54,"line":600},[52,28902,2230],{"class":58},[52,28904,28779],{"class":371},[52,28906,77],{"class":58},[52,28908,28909,28911,28913],{"class":54,"line":606},[52,28910,121],{"class":58},[52,28912,63],{"class":371},[52,28914,77],{"class":58},[43,28916,28917],{"className":2507,"code":28858,"language":2509,"meta":48,"style":48},[31,28918,28919,28927,28933,28943,28947,28955,28963],{"__ignoreMap":48},[52,28920,28921,28923,28925],{"class":54,"line":55},[52,28922,59],{"class":58},[52,28924,63],{"class":371},[52,28926,77],{"class":58},[52,28928,28929,28931],{"class":54,"line":80},[52,28930,83],{"class":58},[52,28932,28818],{"class":371},[52,28934,28935,28937,28939,28941],{"class":54,"line":108},[52,28936,7361],{"class":66},[52,28938,24845],{"class":58},[52,28940,6391],{"class":371},[52,28942,729],{"class":58},[52,28944,28945],{"class":54,"line":118},[52,28946,26949],{"class":58},[52,28948,28949,28951,28953],{"class":54,"line":594},[52,28950,2213],{"class":58},[52,28952,2216],{"class":371},[52,28954,105],{"class":58},[52,28956,28957,28959,28961],{"class":54,"line":600},[52,28958,2230],{"class":58},[52,28960,28779],{"class":371},[52,28962,77],{"class":58},[52,28964,28965,28967,28969],{"class":54,"line":606},[52,28966,121],{"class":58},[52,28968,63],{"class":371},[52,28970,77],{"class":58},[43,28972,28973],{"className":419,"code":28858,"language":420,"meta":48,"style":48},[31,28974,28975,28983,28989,29001,29005,29013,29021],{"__ignoreMap":48},[52,28976,28977,28979,28981],{"class":54,"line":55},[52,28978,59],{"class":58},[52,28980,63],{"class":371},[52,28982,77],{"class":58},[52,28984,28985,28987],{"class":54,"line":80},[52,28986,83],{"class":58},[52,28988,28818],{"class":371},[52,28990,28991,28993,28995,28997,28999],{"class":54,"line":108},[52,28992,7361],{"class":66},[52,28994,70],{"class":231},[52,28996,723],{"class":58},[52,28998,6391],{"class":371},[52,29000,729],{"class":58},[52,29002,29003],{"class":54,"line":118},[52,29004,26949],{"class":58},[52,29006,29007,29009,29011],{"class":54,"line":594},[52,29008,2213],{"class":58},[52,29010,2216],{"class":371},[52,29012,105],{"class":58},[52,29014,29015,29017,29019],{"class":54,"line":600},[52,29016,2230],{"class":58},[52,29018,28779],{"class":371},[52,29020,77],{"class":58},[52,29022,29023,29025,29027],{"class":54,"line":606},[52,29024,121],{"class":58},[52,29026,63],{"class":371},[52,29028,77],{"class":58},[43,29030,29032],{"className":222,"code":29031,"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,29033,29034,29044,29048,29062,29066,29079,29087,29091,29095],{"__ignoreMap":48},[52,29035,29036,29038,29040,29042],{"class":54,"line":55},[52,29037,232],{"class":231},[52,29039,9231],{"class":58},[52,29041,238],{"class":231},[52,29043,9236],{"class":73},[52,29045,29046],{"class":54,"line":80},[52,29047,597],{"emptyLinePlaceholder":171},[52,29049,29050,29052,29054,29056,29058,29060],{"class":54,"line":108},[52,29051,1721],{"class":231},[52,29053,1724],{"class":371},[52,29055,1727],{"class":231},[52,29057,1730],{"class":231},[52,29059,1733],{"class":66},[52,29061,1736],{"class":58},[52,29063,29064],{"class":54,"line":118},[52,29065,1751],{"class":58},[52,29067,29068,29070,29073,29075,29077],{"class":54,"line":594},[52,29069,1756],{"class":58},[52,29071,29072],{"class":73},"'Bulge'",[52,29074,5254],{"class":58},[52,29076,6391],{"class":371},[52,29078,5259],{"class":58},[52,29080,29081,29083,29085],{"class":54,"line":600},[52,29082,4727],{"class":58},[52,29084,2869],{"class":73},[52,29086,2129],{"class":58},[52,29088,29089],{"class":54,"line":606},[52,29090,4744],{"class":58},[52,29092,29093],{"class":54,"line":653},[52,29094,1773],{"class":58},[52,29096,29097],{"class":54,"line":662},[52,29098,1778],{"class":58},[156,29100,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":29102},[29103,29104],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Distortions",{},"/docs/components/bulge",{"title":28779,"description":28787},"docs/components/Bulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":29112,"title":29113,"body":29114,"category":27503,"componentType":20848,"description":29121,"extension":168,"meta":29382,"navigation":171,"path":29383,"requiresChild":171,"seo":29384,"stem":29385,"__hash__":29386},"components/docs/components/CRTScreen.md","CRTScreen",{"type":8,"value":29115,"toc":29378},[29116,29119,29122,29124,29126,29129,29131,29376],[11,29117,29113],{"id":29118},"crtscreen",[15,29120,29121],{},"Retro CRT monitor simulation with scanlines",[26901,29123],{"component":29113},[23,29125,26905],{"id":21503},[26907,29127],{":props":29128},"[{\"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,29130,26913],{"id":26912},[217,29132,29133,29178,29222,29266,29310],{":tabs":1543},[43,29134,29136],{"className":45,"code":29135,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle />\n \u003C/CRTScreen>\n\u003C/Shader>\n",[31,29137,29138,29146,29154,29162,29170],{"__ignoreMap":48},[52,29139,29140,29142,29144],{"class":54,"line":55},[52,29141,59],{"class":58},[52,29143,63],{"class":62},[52,29145,77],{"class":58},[52,29147,29148,29150,29152],{"class":54,"line":80},[52,29149,83],{"class":58},[52,29151,29113],{"class":62},[52,29153,77],{"class":58},[52,29155,29156,29158,29160],{"class":54,"line":108},[52,29157,2213],{"class":58},[52,29159,2216],{"class":62},[52,29161,105],{"class":58},[52,29163,29164,29166,29168],{"class":54,"line":118},[52,29165,2230],{"class":58},[52,29167,29113],{"class":62},[52,29169,77],{"class":58},[52,29171,29172,29174,29176],{"class":54,"line":594},[52,29173,121],{"class":58},[52,29175,63],{"class":62},[52,29177,77],{"class":58},[43,29179,29180],{"className":360,"code":29135,"language":362,"meta":48,"style":48},[31,29181,29182,29190,29198,29206,29214],{"__ignoreMap":48},[52,29183,29184,29186,29188],{"class":54,"line":55},[52,29185,59],{"class":58},[52,29187,63],{"class":371},[52,29189,77],{"class":58},[52,29191,29192,29194,29196],{"class":54,"line":80},[52,29193,83],{"class":58},[52,29195,29113],{"class":371},[52,29197,77],{"class":58},[52,29199,29200,29202,29204],{"class":54,"line":108},[52,29201,2213],{"class":58},[52,29203,2216],{"class":371},[52,29205,105],{"class":58},[52,29207,29208,29210,29212],{"class":54,"line":118},[52,29209,2230],{"class":58},[52,29211,29113],{"class":371},[52,29213,77],{"class":58},[52,29215,29216,29218,29220],{"class":54,"line":594},[52,29217,121],{"class":58},[52,29219,63],{"class":371},[52,29221,77],{"class":58},[43,29223,29224],{"className":2507,"code":29135,"language":2509,"meta":48,"style":48},[31,29225,29226,29234,29242,29250,29258],{"__ignoreMap":48},[52,29227,29228,29230,29232],{"class":54,"line":55},[52,29229,59],{"class":58},[52,29231,63],{"class":371},[52,29233,77],{"class":58},[52,29235,29236,29238,29240],{"class":54,"line":80},[52,29237,83],{"class":58},[52,29239,29113],{"class":371},[52,29241,77],{"class":58},[52,29243,29244,29246,29248],{"class":54,"line":108},[52,29245,2213],{"class":58},[52,29247,2216],{"class":371},[52,29249,105],{"class":58},[52,29251,29252,29254,29256],{"class":54,"line":118},[52,29253,2230],{"class":58},[52,29255,29113],{"class":371},[52,29257,77],{"class":58},[52,29259,29260,29262,29264],{"class":54,"line":594},[52,29261,121],{"class":58},[52,29263,63],{"class":371},[52,29265,77],{"class":58},[43,29267,29268],{"className":419,"code":29135,"language":420,"meta":48,"style":48},[31,29269,29270,29278,29286,29294,29302],{"__ignoreMap":48},[52,29271,29272,29274,29276],{"class":54,"line":55},[52,29273,59],{"class":58},[52,29275,63],{"class":371},[52,29277,77],{"class":58},[52,29279,29280,29282,29284],{"class":54,"line":80},[52,29281,83],{"class":58},[52,29283,29113],{"class":371},[52,29285,77],{"class":58},[52,29287,29288,29290,29292],{"class":54,"line":108},[52,29289,2213],{"class":58},[52,29291,2216],{"class":371},[52,29293,105],{"class":58},[52,29295,29296,29298,29300],{"class":54,"line":118},[52,29297,2230],{"class":58},[52,29299,29113],{"class":371},[52,29301,77],{"class":58},[52,29303,29304,29306,29308],{"class":54,"line":594},[52,29305,121],{"class":58},[52,29307,63],{"class":371},[52,29309,77],{"class":58},[43,29311,29313],{"className":222,"code":29312,"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,29314,29315,29325,29329,29343,29347,29356,29364,29368,29372],{"__ignoreMap":48},[52,29316,29317,29319,29321,29323],{"class":54,"line":55},[52,29318,232],{"class":231},[52,29320,9231],{"class":58},[52,29322,238],{"class":231},[52,29324,9236],{"class":73},[52,29326,29327],{"class":54,"line":80},[52,29328,597],{"emptyLinePlaceholder":171},[52,29330,29331,29333,29335,29337,29339,29341],{"class":54,"line":108},[52,29332,1721],{"class":231},[52,29334,1724],{"class":371},[52,29336,1727],{"class":231},[52,29338,1730],{"class":231},[52,29340,1733],{"class":66},[52,29342,1736],{"class":58},[52,29344,29345],{"class":54,"line":118},[52,29346,1751],{"class":58},[52,29348,29349,29351,29354],{"class":54,"line":594},[52,29350,1756],{"class":58},[52,29352,29353],{"class":73},"'CRTScreen'",[52,29355,4722],{"class":58},[52,29357,29358,29360,29362],{"class":54,"line":600},[52,29359,4727],{"class":58},[52,29361,2869],{"class":73},[52,29363,2129],{"class":58},[52,29365,29366],{"class":54,"line":606},[52,29367,4744],{"class":58},[52,29369,29370],{"class":54,"line":653},[52,29371,1773],{"class":58},[52,29373,29374],{"class":54,"line":662},[52,29375,1778],{"class":58},[156,29377,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29379},[29380,29381],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/crtscreen",{"title":29113,"description":29121},"docs/components/CRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":29388,"title":29389,"body":29390,"category":27225,"componentType":20848,"description":29397,"extension":168,"meta":29658,"navigation":171,"path":29659,"requiresChild":171,"seo":29660,"stem":29661,"__hash__":29662},"components/docs/components/ChannelBlur.md","ChannelBlur",{"type":8,"value":29391,"toc":29654},[29392,29395,29398,29400,29402,29405,29407,29652],[11,29393,29389],{"id":29394},"channelblur",[15,29396,29397],{},"Independent blur for red, green, and blue channels",[26901,29399],{"component":29389},[23,29401,26905],{"id":21503},[26907,29403],{":props":29404},"[{\"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,29406,26913],{"id":26912},[217,29408,29409,29454,29498,29542,29586],{":tabs":1543},[43,29410,29412],{"className":45,"code":29411,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle />\n \u003C/ChannelBlur>\n\u003C/Shader>\n",[31,29413,29414,29422,29430,29438,29446],{"__ignoreMap":48},[52,29415,29416,29418,29420],{"class":54,"line":55},[52,29417,59],{"class":58},[52,29419,63],{"class":62},[52,29421,77],{"class":58},[52,29423,29424,29426,29428],{"class":54,"line":80},[52,29425,83],{"class":58},[52,29427,29389],{"class":62},[52,29429,77],{"class":58},[52,29431,29432,29434,29436],{"class":54,"line":108},[52,29433,2213],{"class":58},[52,29435,2216],{"class":62},[52,29437,105],{"class":58},[52,29439,29440,29442,29444],{"class":54,"line":118},[52,29441,2230],{"class":58},[52,29443,29389],{"class":62},[52,29445,77],{"class":58},[52,29447,29448,29450,29452],{"class":54,"line":594},[52,29449,121],{"class":58},[52,29451,63],{"class":62},[52,29453,77],{"class":58},[43,29455,29456],{"className":360,"code":29411,"language":362,"meta":48,"style":48},[31,29457,29458,29466,29474,29482,29490],{"__ignoreMap":48},[52,29459,29460,29462,29464],{"class":54,"line":55},[52,29461,59],{"class":58},[52,29463,63],{"class":371},[52,29465,77],{"class":58},[52,29467,29468,29470,29472],{"class":54,"line":80},[52,29469,83],{"class":58},[52,29471,29389],{"class":371},[52,29473,77],{"class":58},[52,29475,29476,29478,29480],{"class":54,"line":108},[52,29477,2213],{"class":58},[52,29479,2216],{"class":371},[52,29481,105],{"class":58},[52,29483,29484,29486,29488],{"class":54,"line":118},[52,29485,2230],{"class":58},[52,29487,29389],{"class":371},[52,29489,77],{"class":58},[52,29491,29492,29494,29496],{"class":54,"line":594},[52,29493,121],{"class":58},[52,29495,63],{"class":371},[52,29497,77],{"class":58},[43,29499,29500],{"className":2507,"code":29411,"language":2509,"meta":48,"style":48},[31,29501,29502,29510,29518,29526,29534],{"__ignoreMap":48},[52,29503,29504,29506,29508],{"class":54,"line":55},[52,29505,59],{"class":58},[52,29507,63],{"class":371},[52,29509,77],{"class":58},[52,29511,29512,29514,29516],{"class":54,"line":80},[52,29513,83],{"class":58},[52,29515,29389],{"class":371},[52,29517,77],{"class":58},[52,29519,29520,29522,29524],{"class":54,"line":108},[52,29521,2213],{"class":58},[52,29523,2216],{"class":371},[52,29525,105],{"class":58},[52,29527,29528,29530,29532],{"class":54,"line":118},[52,29529,2230],{"class":58},[52,29531,29389],{"class":371},[52,29533,77],{"class":58},[52,29535,29536,29538,29540],{"class":54,"line":594},[52,29537,121],{"class":58},[52,29539,63],{"class":371},[52,29541,77],{"class":58},[43,29543,29544],{"className":419,"code":29411,"language":420,"meta":48,"style":48},[31,29545,29546,29554,29562,29570,29578],{"__ignoreMap":48},[52,29547,29548,29550,29552],{"class":54,"line":55},[52,29549,59],{"class":58},[52,29551,63],{"class":371},[52,29553,77],{"class":58},[52,29555,29556,29558,29560],{"class":54,"line":80},[52,29557,83],{"class":58},[52,29559,29389],{"class":371},[52,29561,77],{"class":58},[52,29563,29564,29566,29568],{"class":54,"line":108},[52,29565,2213],{"class":58},[52,29567,2216],{"class":371},[52,29569,105],{"class":58},[52,29571,29572,29574,29576],{"class":54,"line":118},[52,29573,2230],{"class":58},[52,29575,29389],{"class":371},[52,29577,77],{"class":58},[52,29579,29580,29582,29584],{"class":54,"line":594},[52,29581,121],{"class":58},[52,29583,63],{"class":371},[52,29585,77],{"class":58},[43,29587,29589],{"className":222,"code":29588,"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,29590,29591,29601,29605,29619,29623,29632,29640,29644,29648],{"__ignoreMap":48},[52,29592,29593,29595,29597,29599],{"class":54,"line":55},[52,29594,232],{"class":231},[52,29596,9231],{"class":58},[52,29598,238],{"class":231},[52,29600,9236],{"class":73},[52,29602,29603],{"class":54,"line":80},[52,29604,597],{"emptyLinePlaceholder":171},[52,29606,29607,29609,29611,29613,29615,29617],{"class":54,"line":108},[52,29608,1721],{"class":231},[52,29610,1724],{"class":371},[52,29612,1727],{"class":231},[52,29614,1730],{"class":231},[52,29616,1733],{"class":66},[52,29618,1736],{"class":58},[52,29620,29621],{"class":54,"line":118},[52,29622,1751],{"class":58},[52,29624,29625,29627,29630],{"class":54,"line":594},[52,29626,1756],{"class":58},[52,29628,29629],{"class":73},"'ChannelBlur'",[52,29631,4722],{"class":58},[52,29633,29634,29636,29638],{"class":54,"line":600},[52,29635,4727],{"class":58},[52,29637,2869],{"class":73},[52,29639,2129],{"class":58},[52,29641,29642],{"class":54,"line":606},[52,29643,4744],{"class":58},[52,29645,29646],{"class":54,"line":653},[52,29647,1773],{"class":58},[52,29649,29650],{"class":54,"line":662},[52,29651,1778],{"class":58},[156,29653,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29655},[29656,29657],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/channelblur",{"title":29389,"description":29397},"docs/components/ChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":29664,"title":29665,"body":29666,"category":27760,"componentType":20842,"description":29673,"extension":168,"meta":29857,"navigation":171,"path":29858,"requiresChild":27763,"seo":29859,"stem":29860,"__hash__":29861},"components/docs/components/Checkerboard.md","Checkerboard",{"type":8,"value":29667,"toc":29853},[29668,29671,29674,29676,29678,29681,29683,29851],[11,29669,29665],{"id":29670},"checkerboard",[15,29672,29673],{},"Classic checkerboard pattern with two alternating colors",[26901,29675],{"component":29665},[23,29677,26905],{"id":21503},[26907,29679],{":props":29680},"[{\"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,29682,26913],{"id":26912},[217,29684,29685,29714,29742,29770,29798],{":tabs":1543},[43,29686,29688],{"className":45,"code":29687,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCheckerboard />\n\u003C/Shader>\n",[31,29689,29690,29698,29706],{"__ignoreMap":48},[52,29691,29692,29694,29696],{"class":54,"line":55},[52,29693,59],{"class":58},[52,29695,63],{"class":62},[52,29697,77],{"class":58},[52,29699,29700,29702,29704],{"class":54,"line":80},[52,29701,83],{"class":58},[52,29703,29665],{"class":62},[52,29705,105],{"class":58},[52,29707,29708,29710,29712],{"class":54,"line":108},[52,29709,121],{"class":58},[52,29711,63],{"class":62},[52,29713,77],{"class":58},[43,29715,29716],{"className":360,"code":29687,"language":362,"meta":48,"style":48},[31,29717,29718,29726,29734],{"__ignoreMap":48},[52,29719,29720,29722,29724],{"class":54,"line":55},[52,29721,59],{"class":58},[52,29723,63],{"class":371},[52,29725,77],{"class":58},[52,29727,29728,29730,29732],{"class":54,"line":80},[52,29729,83],{"class":58},[52,29731,29665],{"class":371},[52,29733,105],{"class":58},[52,29735,29736,29738,29740],{"class":54,"line":108},[52,29737,121],{"class":58},[52,29739,63],{"class":371},[52,29741,77],{"class":58},[43,29743,29744],{"className":2507,"code":29687,"language":2509,"meta":48,"style":48},[31,29745,29746,29754,29762],{"__ignoreMap":48},[52,29747,29748,29750,29752],{"class":54,"line":55},[52,29749,59],{"class":58},[52,29751,63],{"class":371},[52,29753,77],{"class":58},[52,29755,29756,29758,29760],{"class":54,"line":80},[52,29757,83],{"class":58},[52,29759,29665],{"class":371},[52,29761,105],{"class":58},[52,29763,29764,29766,29768],{"class":54,"line":108},[52,29765,121],{"class":58},[52,29767,63],{"class":371},[52,29769,77],{"class":58},[43,29771,29772],{"className":419,"code":29687,"language":420,"meta":48,"style":48},[31,29773,29774,29782,29790],{"__ignoreMap":48},[52,29775,29776,29778,29780],{"class":54,"line":55},[52,29777,59],{"class":58},[52,29779,63],{"class":371},[52,29781,77],{"class":58},[52,29783,29784,29786,29788],{"class":54,"line":80},[52,29785,83],{"class":58},[52,29787,29665],{"class":371},[52,29789,105],{"class":58},[52,29791,29792,29794,29796],{"class":54,"line":108},[52,29793,121],{"class":58},[52,29795,63],{"class":371},[52,29797,77],{"class":58},[43,29799,29801],{"className":222,"code":29800,"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,29802,29803,29813,29817,29831,29835,29843,29847],{"__ignoreMap":48},[52,29804,29805,29807,29809,29811],{"class":54,"line":55},[52,29806,232],{"class":231},[52,29808,9231],{"class":58},[52,29810,238],{"class":231},[52,29812,9236],{"class":73},[52,29814,29815],{"class":54,"line":80},[52,29816,597],{"emptyLinePlaceholder":171},[52,29818,29819,29821,29823,29825,29827,29829],{"class":54,"line":108},[52,29820,1721],{"class":231},[52,29822,1724],{"class":371},[52,29824,1727],{"class":231},[52,29826,1730],{"class":231},[52,29828,1733],{"class":66},[52,29830,1736],{"class":58},[52,29832,29833],{"class":54,"line":118},[52,29834,1751],{"class":58},[52,29836,29837,29839,29841],{"class":54,"line":594},[52,29838,1756],{"class":58},[52,29840,7875],{"class":73},[52,29842,2129],{"class":58},[52,29844,29845],{"class":54,"line":600},[52,29846,1773],{"class":58},[52,29848,29849],{"class":54,"line":606},[52,29850,1778],{"class":58},[156,29852,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29854},[29855,29856],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/checkerboard",{"title":29665,"description":29673},"docs/components/Checkerboard","xWgOFlPxz08f5-WceoXS-EG20wY1632N5T-U9eHKWKo",{"id":29863,"title":29864,"body":29865,"category":30161,"componentType":20842,"description":29872,"extension":168,"meta":30162,"navigation":171,"path":30163,"requiresChild":27763,"seo":30164,"stem":30165,"__hash__":30166},"components/docs/components/ChromaFlow.md","ChromaFlow",{"type":8,"value":29866,"toc":30157},[29867,29870,29873,29875,29877,29880,29882,30155],[11,29868,29864],{"id":29869},"chromaflow",[15,29871,29872],{},"Interactive liquid flow effect that follows your cursor",[26901,29874],{"component":29864},[23,29876,26905],{"id":21503},[26907,29878],{":props":29879},"[{\"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,29881,26913],{"id":26912},[217,29883,29884,29933,29989,30039,30093],{":tabs":1543},[43,29885,29887],{"className":45,"code":29886,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n />\n\u003C/Shader>\n",[31,29888,29889,29897,29904,29912,29921,29925],{"__ignoreMap":48},[52,29890,29891,29893,29895],{"class":54,"line":55},[52,29892,59],{"class":58},[52,29894,63],{"class":62},[52,29896,77],{"class":58},[52,29898,29899,29901],{"class":54,"line":80},[52,29900,83],{"class":58},[52,29902,29903],{"class":62},"ChromaFlow\n",[52,29905,29906,29908,29910],{"class":54,"line":108},[52,29907,17870],{"class":66},[52,29909,70],{"class":58},[52,29911,28827],{"class":73},[52,29913,29914,29916,29918],{"class":54,"line":118},[52,29915,14901],{"class":66},[52,29917,70],{"class":58},[52,29919,29920],{"class":73},"\"3\"\n",[52,29922,29923],{"class":54,"line":594},[52,29924,1224],{"class":58},[52,29926,29927,29929,29931],{"class":54,"line":600},[52,29928,121],{"class":58},[52,29930,63],{"class":62},[52,29932,77],{"class":58},[43,29934,29936],{"className":360,"code":29935,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n />\n\u003C/Shader>\n",[31,29937,29938,29946,29952,29964,29977,29981],{"__ignoreMap":48},[52,29939,29940,29942,29944],{"class":54,"line":55},[52,29941,59],{"class":58},[52,29943,63],{"class":371},[52,29945,77],{"class":58},[52,29947,29948,29950],{"class":54,"line":80},[52,29949,83],{"class":58},[52,29951,29903],{"class":371},[52,29953,29954,29956,29958,29960,29962],{"class":54,"line":108},[52,29955,17981],{"class":66},[52,29957,70],{"class":231},[52,29959,723],{"class":58},[52,29961,6391],{"class":371},[52,29963,729],{"class":58},[52,29965,29966,29968,29970,29972,29975],{"class":54,"line":118},[52,29967,7361],{"class":66},[52,29969,70],{"class":231},[52,29971,723],{"class":58},[52,29973,29974],{"class":371},"3",[52,29976,729],{"class":58},[52,29978,29979],{"class":54,"line":594},[52,29980,1224],{"class":58},[52,29982,29983,29985,29987],{"class":54,"line":600},[52,29984,121],{"class":58},[52,29986,63],{"class":371},[52,29988,77],{"class":58},[43,29990,29991],{"className":2507,"code":29935,"language":2509,"meta":48,"style":48},[31,29992,29993,30001,30007,30017,30027,30031],{"__ignoreMap":48},[52,29994,29995,29997,29999],{"class":54,"line":55},[52,29996,59],{"class":58},[52,29998,63],{"class":371},[52,30000,77],{"class":58},[52,30002,30003,30005],{"class":54,"line":80},[52,30004,83],{"class":58},[52,30006,29903],{"class":371},[52,30008,30009,30011,30013,30015],{"class":54,"line":108},[52,30010,17981],{"class":66},[52,30012,24845],{"class":58},[52,30014,6391],{"class":371},[52,30016,729],{"class":58},[52,30018,30019,30021,30023,30025],{"class":54,"line":118},[52,30020,7361],{"class":66},[52,30022,24845],{"class":58},[52,30024,29974],{"class":371},[52,30026,729],{"class":58},[52,30028,30029],{"class":54,"line":594},[52,30030,1224],{"class":58},[52,30032,30033,30035,30037],{"class":54,"line":600},[52,30034,121],{"class":58},[52,30036,63],{"class":371},[52,30038,77],{"class":58},[43,30040,30041],{"className":419,"code":29935,"language":420,"meta":48,"style":48},[31,30042,30043,30051,30057,30069,30081,30085],{"__ignoreMap":48},[52,30044,30045,30047,30049],{"class":54,"line":55},[52,30046,59],{"class":58},[52,30048,63],{"class":371},[52,30050,77],{"class":58},[52,30052,30053,30055],{"class":54,"line":80},[52,30054,83],{"class":58},[52,30056,29903],{"class":371},[52,30058,30059,30061,30063,30065,30067],{"class":54,"line":108},[52,30060,17981],{"class":66},[52,30062,70],{"class":231},[52,30064,723],{"class":58},[52,30066,6391],{"class":371},[52,30068,729],{"class":58},[52,30070,30071,30073,30075,30077,30079],{"class":54,"line":118},[52,30072,7361],{"class":66},[52,30074,70],{"class":231},[52,30076,723],{"class":58},[52,30078,29974],{"class":371},[52,30080,729],{"class":58},[52,30082,30083],{"class":54,"line":594},[52,30084,1224],{"class":58},[52,30086,30087,30089,30091],{"class":54,"line":600},[52,30088,121],{"class":58},[52,30090,63],{"class":371},[52,30092,77],{"class":58},[43,30094,30096],{"className":222,"code":30095,"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,30097,30098,30108,30112,30126,30130,30147,30151],{"__ignoreMap":48},[52,30099,30100,30102,30104,30106],{"class":54,"line":55},[52,30101,232],{"class":231},[52,30103,9231],{"class":58},[52,30105,238],{"class":231},[52,30107,9236],{"class":73},[52,30109,30110],{"class":54,"line":80},[52,30111,597],{"emptyLinePlaceholder":171},[52,30113,30114,30116,30118,30120,30122,30124],{"class":54,"line":108},[52,30115,1721],{"class":231},[52,30117,1724],{"class":371},[52,30119,1727],{"class":231},[52,30121,1730],{"class":231},[52,30123,1733],{"class":66},[52,30125,1736],{"class":58},[52,30127,30128],{"class":54,"line":118},[52,30129,1751],{"class":58},[52,30131,30132,30134,30137,30139,30141,30143,30145],{"class":54,"line":594},[52,30133,1756],{"class":58},[52,30135,30136],{"class":73},"'ChromaFlow'",[52,30138,27194],{"class":58},[52,30140,6391],{"class":371},[52,30142,4278],{"class":58},[52,30144,29974],{"class":371},[52,30146,1768],{"class":58},[52,30148,30149],{"class":54,"line":600},[52,30150,1773],{"class":58},[52,30152,30153],{"class":54,"line":606},[52,30154,1778],{"class":58},[156,30156,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30158},[30159,30160],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Interactive",{},"/docs/components/chromaflow",{"title":29864,"description":29872},"docs/components/ChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":30168,"title":30169,"body":30170,"category":27503,"componentType":20848,"description":30177,"extension":168,"meta":30438,"navigation":171,"path":30439,"requiresChild":171,"seo":30440,"stem":30441,"__hash__":30442},"components/docs/components/ChromaticAberration.md","ChromaticAberration",{"type":8,"value":30171,"toc":30434},[30172,30175,30178,30180,30182,30185,30187,30432],[11,30173,30169],{"id":30174},"chromaticaberration",[15,30176,30177],{},"Separate RGB channels for a prismatic distortion effect",[26901,30179],{"component":30169},[23,30181,26905],{"id":21503},[26907,30183],{":props":30184},"[{\"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,30186,26913],{"id":26912},[217,30188,30189,30234,30278,30322,30366],{":tabs":1543},[43,30190,30192],{"className":45,"code":30191,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle />\n \u003C/ChromaticAberration>\n\u003C/Shader>\n",[31,30193,30194,30202,30210,30218,30226],{"__ignoreMap":48},[52,30195,30196,30198,30200],{"class":54,"line":55},[52,30197,59],{"class":58},[52,30199,63],{"class":62},[52,30201,77],{"class":58},[52,30203,30204,30206,30208],{"class":54,"line":80},[52,30205,83],{"class":58},[52,30207,30169],{"class":62},[52,30209,77],{"class":58},[52,30211,30212,30214,30216],{"class":54,"line":108},[52,30213,2213],{"class":58},[52,30215,2216],{"class":62},[52,30217,105],{"class":58},[52,30219,30220,30222,30224],{"class":54,"line":118},[52,30221,2230],{"class":58},[52,30223,30169],{"class":62},[52,30225,77],{"class":58},[52,30227,30228,30230,30232],{"class":54,"line":594},[52,30229,121],{"class":58},[52,30231,63],{"class":62},[52,30233,77],{"class":58},[43,30235,30236],{"className":360,"code":30191,"language":362,"meta":48,"style":48},[31,30237,30238,30246,30254,30262,30270],{"__ignoreMap":48},[52,30239,30240,30242,30244],{"class":54,"line":55},[52,30241,59],{"class":58},[52,30243,63],{"class":371},[52,30245,77],{"class":58},[52,30247,30248,30250,30252],{"class":54,"line":80},[52,30249,83],{"class":58},[52,30251,30169],{"class":371},[52,30253,77],{"class":58},[52,30255,30256,30258,30260],{"class":54,"line":108},[52,30257,2213],{"class":58},[52,30259,2216],{"class":371},[52,30261,105],{"class":58},[52,30263,30264,30266,30268],{"class":54,"line":118},[52,30265,2230],{"class":58},[52,30267,30169],{"class":371},[52,30269,77],{"class":58},[52,30271,30272,30274,30276],{"class":54,"line":594},[52,30273,121],{"class":58},[52,30275,63],{"class":371},[52,30277,77],{"class":58},[43,30279,30280],{"className":2507,"code":30191,"language":2509,"meta":48,"style":48},[31,30281,30282,30290,30298,30306,30314],{"__ignoreMap":48},[52,30283,30284,30286,30288],{"class":54,"line":55},[52,30285,59],{"class":58},[52,30287,63],{"class":371},[52,30289,77],{"class":58},[52,30291,30292,30294,30296],{"class":54,"line":80},[52,30293,83],{"class":58},[52,30295,30169],{"class":371},[52,30297,77],{"class":58},[52,30299,30300,30302,30304],{"class":54,"line":108},[52,30301,2213],{"class":58},[52,30303,2216],{"class":371},[52,30305,105],{"class":58},[52,30307,30308,30310,30312],{"class":54,"line":118},[52,30309,2230],{"class":58},[52,30311,30169],{"class":371},[52,30313,77],{"class":58},[52,30315,30316,30318,30320],{"class":54,"line":594},[52,30317,121],{"class":58},[52,30319,63],{"class":371},[52,30321,77],{"class":58},[43,30323,30324],{"className":419,"code":30191,"language":420,"meta":48,"style":48},[31,30325,30326,30334,30342,30350,30358],{"__ignoreMap":48},[52,30327,30328,30330,30332],{"class":54,"line":55},[52,30329,59],{"class":58},[52,30331,63],{"class":371},[52,30333,77],{"class":58},[52,30335,30336,30338,30340],{"class":54,"line":80},[52,30337,83],{"class":58},[52,30339,30169],{"class":371},[52,30341,77],{"class":58},[52,30343,30344,30346,30348],{"class":54,"line":108},[52,30345,2213],{"class":58},[52,30347,2216],{"class":371},[52,30349,105],{"class":58},[52,30351,30352,30354,30356],{"class":54,"line":118},[52,30353,2230],{"class":58},[52,30355,30169],{"class":371},[52,30357,77],{"class":58},[52,30359,30360,30362,30364],{"class":54,"line":594},[52,30361,121],{"class":58},[52,30363,63],{"class":371},[52,30365,77],{"class":58},[43,30367,30369],{"className":222,"code":30368,"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,30370,30371,30381,30385,30399,30403,30412,30420,30424,30428],{"__ignoreMap":48},[52,30372,30373,30375,30377,30379],{"class":54,"line":55},[52,30374,232],{"class":231},[52,30376,9231],{"class":58},[52,30378,238],{"class":231},[52,30380,9236],{"class":73},[52,30382,30383],{"class":54,"line":80},[52,30384,597],{"emptyLinePlaceholder":171},[52,30386,30387,30389,30391,30393,30395,30397],{"class":54,"line":108},[52,30388,1721],{"class":231},[52,30390,1724],{"class":371},[52,30392,1727],{"class":231},[52,30394,1730],{"class":231},[52,30396,1733],{"class":66},[52,30398,1736],{"class":58},[52,30400,30401],{"class":54,"line":118},[52,30402,1751],{"class":58},[52,30404,30405,30407,30410],{"class":54,"line":594},[52,30406,1756],{"class":58},[52,30408,30409],{"class":73},"'ChromaticAberration'",[52,30411,4722],{"class":58},[52,30413,30414,30416,30418],{"class":54,"line":600},[52,30415,4727],{"class":58},[52,30417,2869],{"class":73},[52,30419,2129],{"class":58},[52,30421,30422],{"class":54,"line":606},[52,30423,4744],{"class":58},[52,30425,30426],{"class":54,"line":653},[52,30427,1773],{"class":58},[52,30429,30430],{"class":54,"line":662},[52,30431,1778],{"class":58},[156,30433,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":30435},[30436,30437],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/chromaticaberration",{"title":30169,"description":30177},"docs/components/ChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":30444,"title":2216,"body":30445,"category":30727,"componentType":20842,"description":30452,"extension":168,"meta":30728,"navigation":171,"path":30729,"requiresChild":27763,"seo":30730,"stem":30731,"__hash__":30732},"components/docs/components/Circle.md",{"type":8,"value":30446,"toc":30723},[30447,30450,30453,30455,30457,30460,30462,30721],[11,30448,2216],{"id":30449},"circle",[15,30451,30452],{},"Generate a circle with adjustable size and softness",[26901,30454],{"component":2216},[23,30456,26905],{"id":21503},[26907,30458],{":props":30459},"[{\"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,30461,26913],{"id":26912},[217,30463,30464,30511,30562,30610,30660],{":tabs":1543},[43,30465,30467],{"className":45,"code":30466,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,30468,30469,30477,30483,30491,30499,30503],{"__ignoreMap":48},[52,30470,30471,30473,30475],{"class":54,"line":55},[52,30472,59],{"class":58},[52,30474,63],{"class":62},[52,30476,77],{"class":58},[52,30478,30479,30481],{"class":54,"line":80},[52,30480,83],{"class":58},[52,30482,7346],{"class":62},[52,30484,30485,30487,30489],{"class":54,"line":108},[52,30486,7351],{"class":66},[52,30488,70],{"class":58},[52,30490,7307],{"class":73},[52,30492,30493,30495,30497],{"class":54,"line":118},[52,30494,14901],{"class":66},[52,30496,70],{"class":58},[52,30498,28827],{"class":73},[52,30500,30501],{"class":54,"line":594},[52,30502,1224],{"class":58},[52,30504,30505,30507,30509],{"class":54,"line":600},[52,30506,121],{"class":58},[52,30508,63],{"class":62},[52,30510,77],{"class":58},[43,30512,30514],{"className":360,"code":30513,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n />\n\u003C/Shader>\n",[31,30515,30516,30524,30530,30538,30550,30554],{"__ignoreMap":48},[52,30517,30518,30520,30522],{"class":54,"line":55},[52,30519,59],{"class":58},[52,30521,63],{"class":371},[52,30523,77],{"class":58},[52,30525,30526,30528],{"class":54,"line":80},[52,30527,83],{"class":58},[52,30529,7346],{"class":371},[52,30531,30532,30534,30536],{"class":54,"line":108},[52,30533,7351],{"class":66},[52,30535,70],{"class":231},[52,30537,7307],{"class":73},[52,30539,30540,30542,30544,30546,30548],{"class":54,"line":118},[52,30541,7361],{"class":66},[52,30543,70],{"class":231},[52,30545,723],{"class":58},[52,30547,6391],{"class":371},[52,30549,729],{"class":58},[52,30551,30552],{"class":54,"line":594},[52,30553,1224],{"class":58},[52,30555,30556,30558,30560],{"class":54,"line":600},[52,30557,121],{"class":58},[52,30559,63],{"class":371},[52,30561,77],{"class":58},[43,30563,30564],{"className":2507,"code":30513,"language":2509,"meta":48,"style":48},[31,30565,30566,30574,30580,30588,30598,30602],{"__ignoreMap":48},[52,30567,30568,30570,30572],{"class":54,"line":55},[52,30569,59],{"class":58},[52,30571,63],{"class":371},[52,30573,77],{"class":58},[52,30575,30576,30578],{"class":54,"line":80},[52,30577,83],{"class":58},[52,30579,7346],{"class":371},[52,30581,30582,30584,30586],{"class":54,"line":108},[52,30583,7351],{"class":66},[52,30585,70],{"class":58},[52,30587,7307],{"class":73},[52,30589,30590,30592,30594,30596],{"class":54,"line":118},[52,30591,7361],{"class":66},[52,30593,24845],{"class":58},[52,30595,6391],{"class":371},[52,30597,729],{"class":58},[52,30599,30600],{"class":54,"line":594},[52,30601,1224],{"class":58},[52,30603,30604,30606,30608],{"class":54,"line":600},[52,30605,121],{"class":58},[52,30607,63],{"class":371},[52,30609,77],{"class":58},[43,30611,30612],{"className":419,"code":30513,"language":420,"meta":48,"style":48},[31,30613,30614,30622,30628,30636,30648,30652],{"__ignoreMap":48},[52,30615,30616,30618,30620],{"class":54,"line":55},[52,30617,59],{"class":58},[52,30619,63],{"class":371},[52,30621,77],{"class":58},[52,30623,30624,30626],{"class":54,"line":80},[52,30625,83],{"class":58},[52,30627,7346],{"class":371},[52,30629,30630,30632,30634],{"class":54,"line":108},[52,30631,7351],{"class":66},[52,30633,70],{"class":231},[52,30635,7307],{"class":73},[52,30637,30638,30640,30642,30644,30646],{"class":54,"line":118},[52,30639,7361],{"class":66},[52,30641,70],{"class":231},[52,30643,723],{"class":58},[52,30645,6391],{"class":371},[52,30647,729],{"class":58},[52,30649,30650],{"class":54,"line":594},[52,30651,1224],{"class":58},[52,30653,30654,30656,30658],{"class":54,"line":600},[52,30655,121],{"class":58},[52,30657,63],{"class":371},[52,30659,77],{"class":58},[43,30661,30663],{"className":222,"code":30662,"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,30664,30665,30675,30679,30693,30697,30713,30717],{"__ignoreMap":48},[52,30666,30667,30669,30671,30673],{"class":54,"line":55},[52,30668,232],{"class":231},[52,30670,9231],{"class":58},[52,30672,238],{"class":231},[52,30674,9236],{"class":73},[52,30676,30677],{"class":54,"line":80},[52,30678,597],{"emptyLinePlaceholder":171},[52,30680,30681,30683,30685,30687,30689,30691],{"class":54,"line":108},[52,30682,1721],{"class":231},[52,30684,1724],{"class":371},[52,30686,1727],{"class":231},[52,30688,1730],{"class":231},[52,30690,1733],{"class":66},[52,30692,1736],{"class":58},[52,30694,30695],{"class":54,"line":118},[52,30696,1751],{"class":58},[52,30698,30699,30701,30703,30705,30707,30709,30711],{"class":54,"line":594},[52,30700,1756],{"class":58},[52,30702,2869],{"class":73},[52,30704,1762],{"class":58},[52,30706,7886],{"class":73},[52,30708,4278],{"class":58},[52,30710,6391],{"class":371},[52,30712,1768],{"class":58},[52,30714,30715],{"class":54,"line":600},[52,30716,1773],{"class":58},[52,30718,30719],{"class":54,"line":606},[52,30720,1778],{"class":58},[156,30722,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30724},[30725,30726],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Shapes",{},"/docs/components/circle",{"title":2216,"description":30452},"docs/components/Circle","6IkEAtPpkShaYl4sjatYzEXoZbaTyrMxJZqPHqQVqW4",{"id":30734,"title":30735,"body":30736,"category":29105,"componentType":20848,"description":30743,"extension":168,"meta":31060,"navigation":171,"path":31061,"requiresChild":171,"seo":31062,"stem":31063,"__hash__":31064},"components/docs/components/ConcentricSpin.md","ConcentricSpin",{"type":8,"value":30737,"toc":31056},[30738,30741,30744,30746,30748,30751,30753,31054],[11,30739,30735],{"id":30740},"concentricspin",[15,30742,30743],{},"Concentric rings that each rotate the underlying image by different amounts",[26901,30745],{"component":30735},[23,30747,26905],{"id":21503},[26907,30749],{":props":30750},"[{\"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,30752,26913],{"id":26912},[217,30754,30755,30811,30870,30926,30984],{":tabs":1543},[43,30756,30758],{"className":45,"code":30757,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,30759,30760,30768,30775,30783,30787,30795,30803],{"__ignoreMap":48},[52,30761,30762,30764,30766],{"class":54,"line":55},[52,30763,59],{"class":58},[52,30765,63],{"class":62},[52,30767,77],{"class":58},[52,30769,30770,30772],{"class":54,"line":80},[52,30771,83],{"class":58},[52,30773,30774],{"class":62},"ConcentricSpin\n",[52,30776,30777,30779,30781],{"class":54,"line":108},[52,30778,17870],{"class":66},[52,30780,70],{"class":58},[52,30782,26944],{"class":73},[52,30784,30785],{"class":54,"line":118},[52,30786,26949],{"class":58},[52,30788,30789,30791,30793],{"class":54,"line":594},[52,30790,2213],{"class":58},[52,30792,2216],{"class":62},[52,30794,105],{"class":58},[52,30796,30797,30799,30801],{"class":54,"line":600},[52,30798,2230],{"class":58},[52,30800,30735],{"class":62},[52,30802,77],{"class":58},[52,30804,30805,30807,30809],{"class":54,"line":606},[52,30806,121],{"class":58},[52,30808,63],{"class":62},[52,30810,77],{"class":58},[43,30812,30814],{"className":360,"code":30813,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,30815,30816,30824,30830,30842,30846,30854,30862],{"__ignoreMap":48},[52,30817,30818,30820,30822],{"class":54,"line":55},[52,30819,59],{"class":58},[52,30821,63],{"class":371},[52,30823,77],{"class":58},[52,30825,30826,30828],{"class":54,"line":80},[52,30827,83],{"class":58},[52,30829,30774],{"class":371},[52,30831,30832,30834,30836,30838,30840],{"class":54,"line":108},[52,30833,17981],{"class":66},[52,30835,70],{"class":231},[52,30837,723],{"class":58},[52,30839,27003],{"class":371},[52,30841,729],{"class":58},[52,30843,30844],{"class":54,"line":118},[52,30845,26949],{"class":58},[52,30847,30848,30850,30852],{"class":54,"line":594},[52,30849,2213],{"class":58},[52,30851,2216],{"class":371},[52,30853,105],{"class":58},[52,30855,30856,30858,30860],{"class":54,"line":600},[52,30857,2230],{"class":58},[52,30859,30735],{"class":371},[52,30861,77],{"class":58},[52,30863,30864,30866,30868],{"class":54,"line":606},[52,30865,121],{"class":58},[52,30867,63],{"class":371},[52,30869,77],{"class":58},[43,30871,30872],{"className":2507,"code":30813,"language":2509,"meta":48,"style":48},[31,30873,30874,30882,30888,30898,30902,30910,30918],{"__ignoreMap":48},[52,30875,30876,30878,30880],{"class":54,"line":55},[52,30877,59],{"class":58},[52,30879,63],{"class":371},[52,30881,77],{"class":58},[52,30883,30884,30886],{"class":54,"line":80},[52,30885,83],{"class":58},[52,30887,30774],{"class":371},[52,30889,30890,30892,30894,30896],{"class":54,"line":108},[52,30891,17981],{"class":66},[52,30893,24845],{"class":58},[52,30895,27003],{"class":371},[52,30897,729],{"class":58},[52,30899,30900],{"class":54,"line":118},[52,30901,26949],{"class":58},[52,30903,30904,30906,30908],{"class":54,"line":594},[52,30905,2213],{"class":58},[52,30907,2216],{"class":371},[52,30909,105],{"class":58},[52,30911,30912,30914,30916],{"class":54,"line":600},[52,30913,2230],{"class":58},[52,30915,30735],{"class":371},[52,30917,77],{"class":58},[52,30919,30920,30922,30924],{"class":54,"line":606},[52,30921,121],{"class":58},[52,30923,63],{"class":371},[52,30925,77],{"class":58},[43,30927,30928],{"className":419,"code":30813,"language":420,"meta":48,"style":48},[31,30929,30930,30938,30944,30956,30960,30968,30976],{"__ignoreMap":48},[52,30931,30932,30934,30936],{"class":54,"line":55},[52,30933,59],{"class":58},[52,30935,63],{"class":371},[52,30937,77],{"class":58},[52,30939,30940,30942],{"class":54,"line":80},[52,30941,83],{"class":58},[52,30943,30774],{"class":371},[52,30945,30946,30948,30950,30952,30954],{"class":54,"line":108},[52,30947,17981],{"class":66},[52,30949,70],{"class":231},[52,30951,723],{"class":58},[52,30953,27003],{"class":371},[52,30955,729],{"class":58},[52,30957,30958],{"class":54,"line":118},[52,30959,26949],{"class":58},[52,30961,30962,30964,30966],{"class":54,"line":594},[52,30963,2213],{"class":58},[52,30965,2216],{"class":371},[52,30967,105],{"class":58},[52,30969,30970,30972,30974],{"class":54,"line":600},[52,30971,2230],{"class":58},[52,30973,30735],{"class":371},[52,30975,77],{"class":58},[52,30977,30978,30980,30982],{"class":54,"line":606},[52,30979,121],{"class":58},[52,30981,63],{"class":371},[52,30983,77],{"class":58},[43,30985,30987],{"className":222,"code":30986,"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,30988,30989,30999,31003,31017,31021,31034,31042,31046,31050],{"__ignoreMap":48},[52,30990,30991,30993,30995,30997],{"class":54,"line":55},[52,30992,232],{"class":231},[52,30994,9231],{"class":58},[52,30996,238],{"class":231},[52,30998,9236],{"class":73},[52,31000,31001],{"class":54,"line":80},[52,31002,597],{"emptyLinePlaceholder":171},[52,31004,31005,31007,31009,31011,31013,31015],{"class":54,"line":108},[52,31006,1721],{"class":231},[52,31008,1724],{"class":371},[52,31010,1727],{"class":231},[52,31012,1730],{"class":231},[52,31014,1733],{"class":66},[52,31016,1736],{"class":58},[52,31018,31019],{"class":54,"line":118},[52,31020,1751],{"class":58},[52,31022,31023,31025,31028,31030,31032],{"class":54,"line":594},[52,31024,1756],{"class":58},[52,31026,31027],{"class":73},"'ConcentricSpin'",[52,31029,27194],{"class":58},[52,31031,27003],{"class":371},[52,31033,5259],{"class":58},[52,31035,31036,31038,31040],{"class":54,"line":600},[52,31037,4727],{"class":58},[52,31039,2869],{"class":73},[52,31041,2129],{"class":58},[52,31043,31044],{"class":54,"line":606},[52,31045,4744],{"class":58},[52,31047,31048],{"class":54,"line":653},[52,31049,1773],{"class":58},[52,31051,31052],{"class":54,"line":662},[52,31053,1778],{"class":58},[156,31055,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31057},[31058,31059],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/concentricspin",{"title":30735,"description":30743},"docs/components/ConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":31066,"title":31067,"body":31068,"category":27760,"componentType":20842,"description":31075,"extension":168,"meta":31260,"navigation":171,"path":31261,"requiresChild":27763,"seo":31262,"stem":31263,"__hash__":31264},"components/docs/components/ConicGradient.md","ConicGradient",{"type":8,"value":31069,"toc":31256},[31070,31073,31076,31078,31080,31083,31085,31254],[11,31071,31067],{"id":31072},"conicgradient",[15,31074,31075],{},"Colors sweep in a full circle around a center point, like a color wheel",[26901,31077],{"component":31067},[23,31079,26905],{"id":21503},[26907,31081],{":props":31082},"[{\"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,31084,26913],{"id":26912},[217,31086,31087,31116,31144,31172,31200],{":tabs":1543},[43,31088,31090],{"className":45,"code":31089,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConicGradient />\n\u003C/Shader>\n",[31,31091,31092,31100,31108],{"__ignoreMap":48},[52,31093,31094,31096,31098],{"class":54,"line":55},[52,31095,59],{"class":58},[52,31097,63],{"class":62},[52,31099,77],{"class":58},[52,31101,31102,31104,31106],{"class":54,"line":80},[52,31103,83],{"class":58},[52,31105,31067],{"class":62},[52,31107,105],{"class":58},[52,31109,31110,31112,31114],{"class":54,"line":108},[52,31111,121],{"class":58},[52,31113,63],{"class":62},[52,31115,77],{"class":58},[43,31117,31118],{"className":360,"code":31089,"language":362,"meta":48,"style":48},[31,31119,31120,31128,31136],{"__ignoreMap":48},[52,31121,31122,31124,31126],{"class":54,"line":55},[52,31123,59],{"class":58},[52,31125,63],{"class":371},[52,31127,77],{"class":58},[52,31129,31130,31132,31134],{"class":54,"line":80},[52,31131,83],{"class":58},[52,31133,31067],{"class":371},[52,31135,105],{"class":58},[52,31137,31138,31140,31142],{"class":54,"line":108},[52,31139,121],{"class":58},[52,31141,63],{"class":371},[52,31143,77],{"class":58},[43,31145,31146],{"className":2507,"code":31089,"language":2509,"meta":48,"style":48},[31,31147,31148,31156,31164],{"__ignoreMap":48},[52,31149,31150,31152,31154],{"class":54,"line":55},[52,31151,59],{"class":58},[52,31153,63],{"class":371},[52,31155,77],{"class":58},[52,31157,31158,31160,31162],{"class":54,"line":80},[52,31159,83],{"class":58},[52,31161,31067],{"class":371},[52,31163,105],{"class":58},[52,31165,31166,31168,31170],{"class":54,"line":108},[52,31167,121],{"class":58},[52,31169,63],{"class":371},[52,31171,77],{"class":58},[43,31173,31174],{"className":419,"code":31089,"language":420,"meta":48,"style":48},[31,31175,31176,31184,31192],{"__ignoreMap":48},[52,31177,31178,31180,31182],{"class":54,"line":55},[52,31179,59],{"class":58},[52,31181,63],{"class":371},[52,31183,77],{"class":58},[52,31185,31186,31188,31190],{"class":54,"line":80},[52,31187,83],{"class":58},[52,31189,31067],{"class":371},[52,31191,105],{"class":58},[52,31193,31194,31196,31198],{"class":54,"line":108},[52,31195,121],{"class":58},[52,31197,63],{"class":371},[52,31199,77],{"class":58},[43,31201,31203],{"className":222,"code":31202,"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,31204,31205,31215,31219,31233,31237,31246,31250],{"__ignoreMap":48},[52,31206,31207,31209,31211,31213],{"class":54,"line":55},[52,31208,232],{"class":231},[52,31210,9231],{"class":58},[52,31212,238],{"class":231},[52,31214,9236],{"class":73},[52,31216,31217],{"class":54,"line":80},[52,31218,597],{"emptyLinePlaceholder":171},[52,31220,31221,31223,31225,31227,31229,31231],{"class":54,"line":108},[52,31222,1721],{"class":231},[52,31224,1724],{"class":371},[52,31226,1727],{"class":231},[52,31228,1730],{"class":231},[52,31230,1733],{"class":66},[52,31232,1736],{"class":58},[52,31234,31235],{"class":54,"line":118},[52,31236,1751],{"class":58},[52,31238,31239,31241,31244],{"class":54,"line":594},[52,31240,1756],{"class":58},[52,31242,31243],{"class":73},"'ConicGradient'",[52,31245,2129],{"class":58},[52,31247,31248],{"class":54,"line":600},[52,31249,1773],{"class":58},[52,31251,31252],{"class":54,"line":606},[52,31253,1778],{"class":58},[156,31255,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":31257},[31258,31259],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/conicgradient",{"title":31067,"description":31075},"docs/components/ConicGradient","NIVNPxXJkDB1SOPz03uSQXaV6QUuIWABabpG6Qi-clQ",{"id":31266,"title":31267,"body":31268,"category":27503,"componentType":20848,"description":31275,"extension":168,"meta":31536,"navigation":171,"path":31537,"requiresChild":171,"seo":31538,"stem":31539,"__hash__":31540},"components/docs/components/ContourLines.md","ContourLines",{"type":8,"value":31269,"toc":31532},[31270,31273,31276,31278,31280,31283,31285,31530],[11,31271,31267],{"id":31272},"contourlines",[15,31274,31275],{},"Draw topographical contour lines based on luminance or alpha",[26901,31277],{"component":31267},[23,31279,26905],{"id":21503},[26907,31281],{":props":31282},"[{\"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,31284,26913],{"id":26912},[217,31286,31287,31332,31376,31420,31464],{":tabs":1543},[43,31288,31290],{"className":45,"code":31289,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CContourLines>\n \u003CCircle />\n \u003C/ContourLines>\n\u003C/Shader>\n",[31,31291,31292,31300,31308,31316,31324],{"__ignoreMap":48},[52,31293,31294,31296,31298],{"class":54,"line":55},[52,31295,59],{"class":58},[52,31297,63],{"class":62},[52,31299,77],{"class":58},[52,31301,31302,31304,31306],{"class":54,"line":80},[52,31303,83],{"class":58},[52,31305,31267],{"class":62},[52,31307,77],{"class":58},[52,31309,31310,31312,31314],{"class":54,"line":108},[52,31311,2213],{"class":58},[52,31313,2216],{"class":62},[52,31315,105],{"class":58},[52,31317,31318,31320,31322],{"class":54,"line":118},[52,31319,2230],{"class":58},[52,31321,31267],{"class":62},[52,31323,77],{"class":58},[52,31325,31326,31328,31330],{"class":54,"line":594},[52,31327,121],{"class":58},[52,31329,63],{"class":62},[52,31331,77],{"class":58},[43,31333,31334],{"className":360,"code":31289,"language":362,"meta":48,"style":48},[31,31335,31336,31344,31352,31360,31368],{"__ignoreMap":48},[52,31337,31338,31340,31342],{"class":54,"line":55},[52,31339,59],{"class":58},[52,31341,63],{"class":371},[52,31343,77],{"class":58},[52,31345,31346,31348,31350],{"class":54,"line":80},[52,31347,83],{"class":58},[52,31349,31267],{"class":371},[52,31351,77],{"class":58},[52,31353,31354,31356,31358],{"class":54,"line":108},[52,31355,2213],{"class":58},[52,31357,2216],{"class":371},[52,31359,105],{"class":58},[52,31361,31362,31364,31366],{"class":54,"line":118},[52,31363,2230],{"class":58},[52,31365,31267],{"class":371},[52,31367,77],{"class":58},[52,31369,31370,31372,31374],{"class":54,"line":594},[52,31371,121],{"class":58},[52,31373,63],{"class":371},[52,31375,77],{"class":58},[43,31377,31378],{"className":2507,"code":31289,"language":2509,"meta":48,"style":48},[31,31379,31380,31388,31396,31404,31412],{"__ignoreMap":48},[52,31381,31382,31384,31386],{"class":54,"line":55},[52,31383,59],{"class":58},[52,31385,63],{"class":371},[52,31387,77],{"class":58},[52,31389,31390,31392,31394],{"class":54,"line":80},[52,31391,83],{"class":58},[52,31393,31267],{"class":371},[52,31395,77],{"class":58},[52,31397,31398,31400,31402],{"class":54,"line":108},[52,31399,2213],{"class":58},[52,31401,2216],{"class":371},[52,31403,105],{"class":58},[52,31405,31406,31408,31410],{"class":54,"line":118},[52,31407,2230],{"class":58},[52,31409,31267],{"class":371},[52,31411,77],{"class":58},[52,31413,31414,31416,31418],{"class":54,"line":594},[52,31415,121],{"class":58},[52,31417,63],{"class":371},[52,31419,77],{"class":58},[43,31421,31422],{"className":419,"code":31289,"language":420,"meta":48,"style":48},[31,31423,31424,31432,31440,31448,31456],{"__ignoreMap":48},[52,31425,31426,31428,31430],{"class":54,"line":55},[52,31427,59],{"class":58},[52,31429,63],{"class":371},[52,31431,77],{"class":58},[52,31433,31434,31436,31438],{"class":54,"line":80},[52,31435,83],{"class":58},[52,31437,31267],{"class":371},[52,31439,77],{"class":58},[52,31441,31442,31444,31446],{"class":54,"line":108},[52,31443,2213],{"class":58},[52,31445,2216],{"class":371},[52,31447,105],{"class":58},[52,31449,31450,31452,31454],{"class":54,"line":118},[52,31451,2230],{"class":58},[52,31453,31267],{"class":371},[52,31455,77],{"class":58},[52,31457,31458,31460,31462],{"class":54,"line":594},[52,31459,121],{"class":58},[52,31461,63],{"class":371},[52,31463,77],{"class":58},[43,31465,31467],{"className":222,"code":31466,"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,31468,31469,31479,31483,31497,31501,31510,31518,31522,31526],{"__ignoreMap":48},[52,31470,31471,31473,31475,31477],{"class":54,"line":55},[52,31472,232],{"class":231},[52,31474,9231],{"class":58},[52,31476,238],{"class":231},[52,31478,9236],{"class":73},[52,31480,31481],{"class":54,"line":80},[52,31482,597],{"emptyLinePlaceholder":171},[52,31484,31485,31487,31489,31491,31493,31495],{"class":54,"line":108},[52,31486,1721],{"class":231},[52,31488,1724],{"class":371},[52,31490,1727],{"class":231},[52,31492,1730],{"class":231},[52,31494,1733],{"class":66},[52,31496,1736],{"class":58},[52,31498,31499],{"class":54,"line":118},[52,31500,1751],{"class":58},[52,31502,31503,31505,31508],{"class":54,"line":594},[52,31504,1756],{"class":58},[52,31506,31507],{"class":73},"'ContourLines'",[52,31509,4722],{"class":58},[52,31511,31512,31514,31516],{"class":54,"line":600},[52,31513,4727],{"class":58},[52,31515,2869],{"class":73},[52,31517,2129],{"class":58},[52,31519,31520],{"class":54,"line":606},[52,31521,4744],{"class":58},[52,31523,31524],{"class":54,"line":653},[52,31525,1773],{"class":58},[52,31527,31528],{"class":54,"line":662},[52,31529,1778],{"class":58},[156,31531,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":31533},[31534,31535],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/contourlines",{"title":31267,"description":31275},"docs/components/ContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":31542,"title":31543,"body":31544,"category":30727,"componentType":20842,"description":31551,"extension":168,"meta":31829,"navigation":171,"path":31830,"requiresChild":27763,"seo":31831,"stem":31832,"__hash__":31833},"components/docs/components/Crescent.md","Crescent",{"type":8,"value":31545,"toc":31825},[31546,31549,31552,31554,31556,31559,31561,31823],[11,31547,31543],{"id":31548},"crescent",[15,31550,31551],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[26901,31553],{"component":31543},[23,31555,26905],{"id":21503},[26907,31557],{":props":31558},"[{\"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,31560,26913],{"id":26912},[217,31562,31563,31612,31663,31711,31761],{":tabs":1543},[43,31564,31566],{"className":45,"code":31565,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,31567,31568,31576,31583,31591,31600,31604],{"__ignoreMap":48},[52,31569,31570,31572,31574],{"class":54,"line":55},[52,31571,59],{"class":58},[52,31573,63],{"class":62},[52,31575,77],{"class":58},[52,31577,31578,31580],{"class":54,"line":80},[52,31579,83],{"class":58},[52,31581,31582],{"class":62},"Crescent\n",[52,31584,31585,31587,31589],{"class":54,"line":108},[52,31586,7351],{"class":66},[52,31588,70],{"class":58},[52,31590,7307],{"class":73},[52,31592,31593,31595,31597],{"class":54,"line":118},[52,31594,14901],{"class":66},[52,31596,70],{"class":58},[52,31598,31599],{"class":73},"\"0.3\"\n",[52,31601,31602],{"class":54,"line":594},[52,31603,1224],{"class":58},[52,31605,31606,31608,31610],{"class":54,"line":600},[52,31607,121],{"class":58},[52,31609,63],{"class":62},[52,31611,77],{"class":58},[43,31613,31615],{"className":360,"code":31614,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,31616,31617,31625,31631,31639,31651,31655],{"__ignoreMap":48},[52,31618,31619,31621,31623],{"class":54,"line":55},[52,31620,59],{"class":58},[52,31622,63],{"class":371},[52,31624,77],{"class":58},[52,31626,31627,31629],{"class":54,"line":80},[52,31628,83],{"class":58},[52,31630,31582],{"class":371},[52,31632,31633,31635,31637],{"class":54,"line":108},[52,31634,7351],{"class":66},[52,31636,70],{"class":231},[52,31638,7307],{"class":73},[52,31640,31641,31643,31645,31647,31649],{"class":54,"line":118},[52,31642,7361],{"class":66},[52,31644,70],{"class":231},[52,31646,723],{"class":58},[52,31648,19478],{"class":371},[52,31650,729],{"class":58},[52,31652,31653],{"class":54,"line":594},[52,31654,1224],{"class":58},[52,31656,31657,31659,31661],{"class":54,"line":600},[52,31658,121],{"class":58},[52,31660,63],{"class":371},[52,31662,77],{"class":58},[43,31664,31665],{"className":2507,"code":31614,"language":2509,"meta":48,"style":48},[31,31666,31667,31675,31681,31689,31699,31703],{"__ignoreMap":48},[52,31668,31669,31671,31673],{"class":54,"line":55},[52,31670,59],{"class":58},[52,31672,63],{"class":371},[52,31674,77],{"class":58},[52,31676,31677,31679],{"class":54,"line":80},[52,31678,83],{"class":58},[52,31680,31582],{"class":371},[52,31682,31683,31685,31687],{"class":54,"line":108},[52,31684,7351],{"class":66},[52,31686,70],{"class":58},[52,31688,7307],{"class":73},[52,31690,31691,31693,31695,31697],{"class":54,"line":118},[52,31692,7361],{"class":66},[52,31694,24845],{"class":58},[52,31696,19478],{"class":371},[52,31698,729],{"class":58},[52,31700,31701],{"class":54,"line":594},[52,31702,1224],{"class":58},[52,31704,31705,31707,31709],{"class":54,"line":600},[52,31706,121],{"class":58},[52,31708,63],{"class":371},[52,31710,77],{"class":58},[43,31712,31713],{"className":419,"code":31614,"language":420,"meta":48,"style":48},[31,31714,31715,31723,31729,31737,31749,31753],{"__ignoreMap":48},[52,31716,31717,31719,31721],{"class":54,"line":55},[52,31718,59],{"class":58},[52,31720,63],{"class":371},[52,31722,77],{"class":58},[52,31724,31725,31727],{"class":54,"line":80},[52,31726,83],{"class":58},[52,31728,31582],{"class":371},[52,31730,31731,31733,31735],{"class":54,"line":108},[52,31732,7351],{"class":66},[52,31734,70],{"class":231},[52,31736,7307],{"class":73},[52,31738,31739,31741,31743,31745,31747],{"class":54,"line":118},[52,31740,7361],{"class":66},[52,31742,70],{"class":231},[52,31744,723],{"class":58},[52,31746,19478],{"class":371},[52,31748,729],{"class":58},[52,31750,31751],{"class":54,"line":594},[52,31752,1224],{"class":58},[52,31754,31755,31757,31759],{"class":54,"line":600},[52,31756,121],{"class":58},[52,31758,63],{"class":371},[52,31760,77],{"class":58},[43,31762,31764],{"className":222,"code":31763,"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,31765,31766,31776,31780,31794,31798,31815,31819],{"__ignoreMap":48},[52,31767,31768,31770,31772,31774],{"class":54,"line":55},[52,31769,232],{"class":231},[52,31771,9231],{"class":58},[52,31773,238],{"class":231},[52,31775,9236],{"class":73},[52,31777,31778],{"class":54,"line":80},[52,31779,597],{"emptyLinePlaceholder":171},[52,31781,31782,31784,31786,31788,31790,31792],{"class":54,"line":108},[52,31783,1721],{"class":231},[52,31785,1724],{"class":371},[52,31787,1727],{"class":231},[52,31789,1730],{"class":231},[52,31791,1733],{"class":66},[52,31793,1736],{"class":58},[52,31795,31796],{"class":54,"line":118},[52,31797,1751],{"class":58},[52,31799,31800,31802,31805,31807,31809,31811,31813],{"class":54,"line":594},[52,31801,1756],{"class":58},[52,31803,31804],{"class":73},"'Crescent'",[52,31806,1762],{"class":58},[52,31808,7886],{"class":73},[52,31810,4278],{"class":58},[52,31812,19478],{"class":371},[52,31814,1768],{"class":58},[52,31816,31817],{"class":54,"line":600},[52,31818,1773],{"class":58},[52,31820,31821],{"class":54,"line":606},[52,31822,1778],{"class":58},[156,31824,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31826},[31827,31828],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/crescent",{"title":31543,"description":31551},"docs/components/Crescent","ObqUw-47jUNAlPME041OasGzcc_jSvwXgXEVE3NCaLk",{"id":31835,"title":31836,"body":31837,"category":30727,"componentType":20842,"description":31844,"extension":168,"meta":32122,"navigation":171,"path":32123,"requiresChild":27763,"seo":32124,"stem":32125,"__hash__":32126},"components/docs/components/Cross.md","Cross",{"type":8,"value":31838,"toc":32118},[31839,31842,31845,31847,31849,31852,31854,32116],[11,31840,31836],{"id":31841},"cross",[15,31843,31844],{},"Plus / cross shape with adjustable arm length, width, and rounding",[26901,31846],{"component":31836},[23,31848,26905],{"id":21503},[26907,31850],{":props":31851},"[{\"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,31853,26913],{"id":26912},[217,31855,31856,31905,31956,32004,32054],{":tabs":1543},[43,31857,31859],{"className":45,"code":31858,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,31860,31861,31869,31876,31884,31893,31897],{"__ignoreMap":48},[52,31862,31863,31865,31867],{"class":54,"line":55},[52,31864,59],{"class":58},[52,31866,63],{"class":62},[52,31868,77],{"class":58},[52,31870,31871,31873],{"class":54,"line":80},[52,31872,83],{"class":58},[52,31874,31875],{"class":62},"Cross\n",[52,31877,31878,31880,31882],{"class":54,"line":108},[52,31879,7351],{"class":66},[52,31881,70],{"class":58},[52,31883,7307],{"class":73},[52,31885,31886,31888,31890],{"class":54,"line":118},[52,31887,14901],{"class":66},[52,31889,70],{"class":58},[52,31891,31892],{"class":73},"\"0.35\"\n",[52,31894,31895],{"class":54,"line":594},[52,31896,1224],{"class":58},[52,31898,31899,31901,31903],{"class":54,"line":600},[52,31900,121],{"class":58},[52,31902,63],{"class":62},[52,31904,77],{"class":58},[43,31906,31908],{"className":360,"code":31907,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,31909,31910,31918,31924,31932,31944,31948],{"__ignoreMap":48},[52,31911,31912,31914,31916],{"class":54,"line":55},[52,31913,59],{"class":58},[52,31915,63],{"class":371},[52,31917,77],{"class":58},[52,31919,31920,31922],{"class":54,"line":80},[52,31921,83],{"class":58},[52,31923,31875],{"class":371},[52,31925,31926,31928,31930],{"class":54,"line":108},[52,31927,7351],{"class":66},[52,31929,70],{"class":231},[52,31931,7307],{"class":73},[52,31933,31934,31936,31938,31940,31942],{"class":54,"line":118},[52,31935,7361],{"class":66},[52,31937,70],{"class":231},[52,31939,723],{"class":58},[52,31941,18630],{"class":371},[52,31943,729],{"class":58},[52,31945,31946],{"class":54,"line":594},[52,31947,1224],{"class":58},[52,31949,31950,31952,31954],{"class":54,"line":600},[52,31951,121],{"class":58},[52,31953,63],{"class":371},[52,31955,77],{"class":58},[43,31957,31958],{"className":2507,"code":31907,"language":2509,"meta":48,"style":48},[31,31959,31960,31968,31974,31982,31992,31996],{"__ignoreMap":48},[52,31961,31962,31964,31966],{"class":54,"line":55},[52,31963,59],{"class":58},[52,31965,63],{"class":371},[52,31967,77],{"class":58},[52,31969,31970,31972],{"class":54,"line":80},[52,31971,83],{"class":58},[52,31973,31875],{"class":371},[52,31975,31976,31978,31980],{"class":54,"line":108},[52,31977,7351],{"class":66},[52,31979,70],{"class":58},[52,31981,7307],{"class":73},[52,31983,31984,31986,31988,31990],{"class":54,"line":118},[52,31985,7361],{"class":66},[52,31987,24845],{"class":58},[52,31989,18630],{"class":371},[52,31991,729],{"class":58},[52,31993,31994],{"class":54,"line":594},[52,31995,1224],{"class":58},[52,31997,31998,32000,32002],{"class":54,"line":600},[52,31999,121],{"class":58},[52,32001,63],{"class":371},[52,32003,77],{"class":58},[43,32005,32006],{"className":419,"code":31907,"language":420,"meta":48,"style":48},[31,32007,32008,32016,32022,32030,32042,32046],{"__ignoreMap":48},[52,32009,32010,32012,32014],{"class":54,"line":55},[52,32011,59],{"class":58},[52,32013,63],{"class":371},[52,32015,77],{"class":58},[52,32017,32018,32020],{"class":54,"line":80},[52,32019,83],{"class":58},[52,32021,31875],{"class":371},[52,32023,32024,32026,32028],{"class":54,"line":108},[52,32025,7351],{"class":66},[52,32027,70],{"class":231},[52,32029,7307],{"class":73},[52,32031,32032,32034,32036,32038,32040],{"class":54,"line":118},[52,32033,7361],{"class":66},[52,32035,70],{"class":231},[52,32037,723],{"class":58},[52,32039,18630],{"class":371},[52,32041,729],{"class":58},[52,32043,32044],{"class":54,"line":594},[52,32045,1224],{"class":58},[52,32047,32048,32050,32052],{"class":54,"line":600},[52,32049,121],{"class":58},[52,32051,63],{"class":371},[52,32053,77],{"class":58},[43,32055,32057],{"className":222,"code":32056,"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,32058,32059,32069,32073,32087,32091,32108,32112],{"__ignoreMap":48},[52,32060,32061,32063,32065,32067],{"class":54,"line":55},[52,32062,232],{"class":231},[52,32064,9231],{"class":58},[52,32066,238],{"class":231},[52,32068,9236],{"class":73},[52,32070,32071],{"class":54,"line":80},[52,32072,597],{"emptyLinePlaceholder":171},[52,32074,32075,32077,32079,32081,32083,32085],{"class":54,"line":108},[52,32076,1721],{"class":231},[52,32078,1724],{"class":371},[52,32080,1727],{"class":231},[52,32082,1730],{"class":231},[52,32084,1733],{"class":66},[52,32086,1736],{"class":58},[52,32088,32089],{"class":54,"line":118},[52,32090,1751],{"class":58},[52,32092,32093,32095,32098,32100,32102,32104,32106],{"class":54,"line":594},[52,32094,1756],{"class":58},[52,32096,32097],{"class":73},"'Cross'",[52,32099,1762],{"class":58},[52,32101,7886],{"class":73},[52,32103,4278],{"class":58},[52,32105,18630],{"class":371},[52,32107,1768],{"class":58},[52,32109,32110],{"class":54,"line":600},[52,32111,1773],{"class":58},[52,32113,32114],{"class":54,"line":606},[52,32115,1778],{"class":58},[156,32117,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32119},[32120,32121],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cross",{"title":31836,"description":31844},"docs/components/Cross","8h8ZHf2RZRmwG-7PmNT2Lcb_l-kH3tvrmVN0fWFbTNs",{"id":32128,"title":32129,"body":32130,"category":32398,"componentType":20848,"description":32137,"extension":168,"meta":32399,"navigation":171,"path":32400,"requiresChild":171,"seo":32401,"stem":32402,"__hash__":32403},"components/docs/components/Crystal.md","Crystal",{"type":8,"value":32131,"toc":32394},[32132,32135,32138,32140,32142,32145,32147,32392],[11,32133,32129],{"id":32134},"crystal",[15,32136,32137],{},"Diamond-like crystal lens with faceted refraction.",[26901,32139],{"component":32129},[23,32141,26905],{"id":21503},[26907,32143],{":props":32144},"[{\"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,32146,26913],{"id":26912},[217,32148,32149,32194,32238,32282,32326],{":tabs":1543},[43,32150,32152],{"className":45,"code":32151,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrystal>\n \u003CCircle />\n \u003C/Crystal>\n\u003C/Shader>\n",[31,32153,32154,32162,32170,32178,32186],{"__ignoreMap":48},[52,32155,32156,32158,32160],{"class":54,"line":55},[52,32157,59],{"class":58},[52,32159,63],{"class":62},[52,32161,77],{"class":58},[52,32163,32164,32166,32168],{"class":54,"line":80},[52,32165,83],{"class":58},[52,32167,32129],{"class":62},[52,32169,77],{"class":58},[52,32171,32172,32174,32176],{"class":54,"line":108},[52,32173,2213],{"class":58},[52,32175,2216],{"class":62},[52,32177,105],{"class":58},[52,32179,32180,32182,32184],{"class":54,"line":118},[52,32181,2230],{"class":58},[52,32183,32129],{"class":62},[52,32185,77],{"class":58},[52,32187,32188,32190,32192],{"class":54,"line":594},[52,32189,121],{"class":58},[52,32191,63],{"class":62},[52,32193,77],{"class":58},[43,32195,32196],{"className":360,"code":32151,"language":362,"meta":48,"style":48},[31,32197,32198,32206,32214,32222,32230],{"__ignoreMap":48},[52,32199,32200,32202,32204],{"class":54,"line":55},[52,32201,59],{"class":58},[52,32203,63],{"class":371},[52,32205,77],{"class":58},[52,32207,32208,32210,32212],{"class":54,"line":80},[52,32209,83],{"class":58},[52,32211,32129],{"class":371},[52,32213,77],{"class":58},[52,32215,32216,32218,32220],{"class":54,"line":108},[52,32217,2213],{"class":58},[52,32219,2216],{"class":371},[52,32221,105],{"class":58},[52,32223,32224,32226,32228],{"class":54,"line":118},[52,32225,2230],{"class":58},[52,32227,32129],{"class":371},[52,32229,77],{"class":58},[52,32231,32232,32234,32236],{"class":54,"line":594},[52,32233,121],{"class":58},[52,32235,63],{"class":371},[52,32237,77],{"class":58},[43,32239,32240],{"className":2507,"code":32151,"language":2509,"meta":48,"style":48},[31,32241,32242,32250,32258,32266,32274],{"__ignoreMap":48},[52,32243,32244,32246,32248],{"class":54,"line":55},[52,32245,59],{"class":58},[52,32247,63],{"class":371},[52,32249,77],{"class":58},[52,32251,32252,32254,32256],{"class":54,"line":80},[52,32253,83],{"class":58},[52,32255,32129],{"class":371},[52,32257,77],{"class":58},[52,32259,32260,32262,32264],{"class":54,"line":108},[52,32261,2213],{"class":58},[52,32263,2216],{"class":371},[52,32265,105],{"class":58},[52,32267,32268,32270,32272],{"class":54,"line":118},[52,32269,2230],{"class":58},[52,32271,32129],{"class":371},[52,32273,77],{"class":58},[52,32275,32276,32278,32280],{"class":54,"line":594},[52,32277,121],{"class":58},[52,32279,63],{"class":371},[52,32281,77],{"class":58},[43,32283,32284],{"className":419,"code":32151,"language":420,"meta":48,"style":48},[31,32285,32286,32294,32302,32310,32318],{"__ignoreMap":48},[52,32287,32288,32290,32292],{"class":54,"line":55},[52,32289,59],{"class":58},[52,32291,63],{"class":371},[52,32293,77],{"class":58},[52,32295,32296,32298,32300],{"class":54,"line":80},[52,32297,83],{"class":58},[52,32299,32129],{"class":371},[52,32301,77],{"class":58},[52,32303,32304,32306,32308],{"class":54,"line":108},[52,32305,2213],{"class":58},[52,32307,2216],{"class":371},[52,32309,105],{"class":58},[52,32311,32312,32314,32316],{"class":54,"line":118},[52,32313,2230],{"class":58},[52,32315,32129],{"class":371},[52,32317,77],{"class":58},[52,32319,32320,32322,32324],{"class":54,"line":594},[52,32321,121],{"class":58},[52,32323,63],{"class":371},[52,32325,77],{"class":58},[43,32327,32329],{"className":222,"code":32328,"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,32330,32331,32341,32345,32359,32363,32372,32380,32384,32388],{"__ignoreMap":48},[52,32332,32333,32335,32337,32339],{"class":54,"line":55},[52,32334,232],{"class":231},[52,32336,9231],{"class":58},[52,32338,238],{"class":231},[52,32340,9236],{"class":73},[52,32342,32343],{"class":54,"line":80},[52,32344,597],{"emptyLinePlaceholder":171},[52,32346,32347,32349,32351,32353,32355,32357],{"class":54,"line":108},[52,32348,1721],{"class":231},[52,32350,1724],{"class":371},[52,32352,1727],{"class":231},[52,32354,1730],{"class":231},[52,32356,1733],{"class":66},[52,32358,1736],{"class":58},[52,32360,32361],{"class":54,"line":118},[52,32362,1751],{"class":58},[52,32364,32365,32367,32370],{"class":54,"line":594},[52,32366,1756],{"class":58},[52,32368,32369],{"class":73},"'Crystal'",[52,32371,4722],{"class":58},[52,32373,32374,32376,32378],{"class":54,"line":600},[52,32375,4727],{"class":58},[52,32377,2869],{"class":73},[52,32379,2129],{"class":58},[52,32381,32382],{"class":54,"line":606},[52,32383,4744],{"class":58},[52,32385,32386],{"class":54,"line":653},[52,32387,1773],{"class":58},[52,32389,32390],{"class":54,"line":662},[52,32391,1778],{"class":58},[156,32393,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":32395},[32396,32397],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Shape Effects",{},"/docs/components/crystal",{"title":32129,"description":32137},"docs/components/Crystal","-FxLCmCZzp_ueV9QfIlLY-OvVQZj_IC4AWXu45eZ9YA",{"id":32405,"title":12145,"body":32406,"category":30161,"componentType":20848,"description":32413,"extension":168,"meta":32779,"navigation":171,"path":32780,"requiresChild":171,"seo":32781,"stem":32782,"__hash__":32783},"components/docs/components/CursorRipples.md",{"type":8,"value":32407,"toc":32775},[32408,32411,32414,32416,32418,32421,32423,32773],[11,32409,12145],{"id":32410},"cursorripples",[15,32412,32413],{},"Fluid-like ripple distortion",[26901,32415],{"component":12145},[23,32417,26905],{"id":21503},[26907,32419],{":props":32420},"[{\"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,32422,26913],{"id":26912},[217,32424,32425,32491,32563,32629,32699],{":tabs":1543},[43,32426,32428],{"className":45,"code":32427,"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,32429,32430,32438,32445,32454,32463,32467,32475,32483],{"__ignoreMap":48},[52,32431,32432,32434,32436],{"class":54,"line":55},[52,32433,59],{"class":58},[52,32435,63],{"class":62},[52,32437,77],{"class":58},[52,32439,32440,32442],{"class":54,"line":80},[52,32441,83],{"class":58},[52,32443,32444],{"class":62},"CursorRipples\n",[52,32446,32447,32449,32451],{"class":54,"line":108},[52,32448,17870],{"class":66},[52,32450,70],{"class":58},[52,32452,32453],{"class":73},"\"10\"\n",[52,32455,32456,32458,32460],{"class":54,"line":118},[52,32457,14901],{"class":66},[52,32459,70],{"class":58},[52,32461,32462],{"class":73},"\"0.5\"\n",[52,32464,32465],{"class":54,"line":594},[52,32466,26949],{"class":58},[52,32468,32469,32471,32473],{"class":54,"line":600},[52,32470,2213],{"class":58},[52,32472,2216],{"class":62},[52,32474,105],{"class":58},[52,32476,32477,32479,32481],{"class":54,"line":606},[52,32478,2230],{"class":58},[52,32480,12145],{"class":62},[52,32482,77],{"class":58},[52,32484,32485,32487,32489],{"class":54,"line":653},[52,32486,121],{"class":58},[52,32488,63],{"class":62},[52,32490,77],{"class":58},[43,32492,32494],{"className":360,"code":32493,"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,32495,32496,32504,32510,32523,32535,32539,32547,32555],{"__ignoreMap":48},[52,32497,32498,32500,32502],{"class":54,"line":55},[52,32499,59],{"class":58},[52,32501,63],{"class":371},[52,32503,77],{"class":58},[52,32505,32506,32508],{"class":54,"line":80},[52,32507,83],{"class":58},[52,32509,32444],{"class":371},[52,32511,32512,32514,32516,32518,32521],{"class":54,"line":108},[52,32513,17981],{"class":66},[52,32515,70],{"class":231},[52,32517,723],{"class":58},[52,32519,32520],{"class":371},"10",[52,32522,729],{"class":58},[52,32524,32525,32527,32529,32531,32533],{"class":54,"line":118},[52,32526,7361],{"class":66},[52,32528,70],{"class":231},[52,32530,723],{"class":58},[52,32532,5467],{"class":371},[52,32534,729],{"class":58},[52,32536,32537],{"class":54,"line":594},[52,32538,26949],{"class":58},[52,32540,32541,32543,32545],{"class":54,"line":600},[52,32542,2213],{"class":58},[52,32544,2216],{"class":371},[52,32546,105],{"class":58},[52,32548,32549,32551,32553],{"class":54,"line":606},[52,32550,2230],{"class":58},[52,32552,12145],{"class":371},[52,32554,77],{"class":58},[52,32556,32557,32559,32561],{"class":54,"line":653},[52,32558,121],{"class":58},[52,32560,63],{"class":371},[52,32562,77],{"class":58},[43,32564,32565],{"className":2507,"code":32493,"language":2509,"meta":48,"style":48},[31,32566,32567,32575,32581,32591,32601,32605,32613,32621],{"__ignoreMap":48},[52,32568,32569,32571,32573],{"class":54,"line":55},[52,32570,59],{"class":58},[52,32572,63],{"class":371},[52,32574,77],{"class":58},[52,32576,32577,32579],{"class":54,"line":80},[52,32578,83],{"class":58},[52,32580,32444],{"class":371},[52,32582,32583,32585,32587,32589],{"class":54,"line":108},[52,32584,17981],{"class":66},[52,32586,24845],{"class":58},[52,32588,32520],{"class":371},[52,32590,729],{"class":58},[52,32592,32593,32595,32597,32599],{"class":54,"line":118},[52,32594,7361],{"class":66},[52,32596,24845],{"class":58},[52,32598,5467],{"class":371},[52,32600,729],{"class":58},[52,32602,32603],{"class":54,"line":594},[52,32604,26949],{"class":58},[52,32606,32607,32609,32611],{"class":54,"line":600},[52,32608,2213],{"class":58},[52,32610,2216],{"class":371},[52,32612,105],{"class":58},[52,32614,32615,32617,32619],{"class":54,"line":606},[52,32616,2230],{"class":58},[52,32618,12145],{"class":371},[52,32620,77],{"class":58},[52,32622,32623,32625,32627],{"class":54,"line":653},[52,32624,121],{"class":58},[52,32626,63],{"class":371},[52,32628,77],{"class":58},[43,32630,32631],{"className":419,"code":32493,"language":420,"meta":48,"style":48},[31,32632,32633,32641,32647,32659,32671,32675,32683,32691],{"__ignoreMap":48},[52,32634,32635,32637,32639],{"class":54,"line":55},[52,32636,59],{"class":58},[52,32638,63],{"class":371},[52,32640,77],{"class":58},[52,32642,32643,32645],{"class":54,"line":80},[52,32644,83],{"class":58},[52,32646,32444],{"class":371},[52,32648,32649,32651,32653,32655,32657],{"class":54,"line":108},[52,32650,17981],{"class":66},[52,32652,70],{"class":231},[52,32654,723],{"class":58},[52,32656,32520],{"class":371},[52,32658,729],{"class":58},[52,32660,32661,32663,32665,32667,32669],{"class":54,"line":118},[52,32662,7361],{"class":66},[52,32664,70],{"class":231},[52,32666,723],{"class":58},[52,32668,5467],{"class":371},[52,32670,729],{"class":58},[52,32672,32673],{"class":54,"line":594},[52,32674,26949],{"class":58},[52,32676,32677,32679,32681],{"class":54,"line":600},[52,32678,2213],{"class":58},[52,32680,2216],{"class":371},[52,32682,105],{"class":58},[52,32684,32685,32687,32689],{"class":54,"line":606},[52,32686,2230],{"class":58},[52,32688,12145],{"class":371},[52,32690,77],{"class":58},[52,32692,32693,32695,32697],{"class":54,"line":653},[52,32694,121],{"class":58},[52,32696,63],{"class":371},[52,32698,77],{"class":58},[43,32700,32702],{"className":222,"code":32701,"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,32703,32704,32714,32718,32732,32736,32753,32761,32765,32769],{"__ignoreMap":48},[52,32705,32706,32708,32710,32712],{"class":54,"line":55},[52,32707,232],{"class":231},[52,32709,9231],{"class":58},[52,32711,238],{"class":231},[52,32713,9236],{"class":73},[52,32715,32716],{"class":54,"line":80},[52,32717,597],{"emptyLinePlaceholder":171},[52,32719,32720,32722,32724,32726,32728,32730],{"class":54,"line":108},[52,32721,1721],{"class":231},[52,32723,1724],{"class":371},[52,32725,1727],{"class":231},[52,32727,1730],{"class":231},[52,32729,1733],{"class":66},[52,32731,1736],{"class":58},[52,32733,32734],{"class":54,"line":118},[52,32735,1751],{"class":58},[52,32737,32738,32740,32743,32745,32747,32749,32751],{"class":54,"line":594},[52,32739,1756],{"class":58},[52,32741,32742],{"class":73},"'CursorRipples'",[52,32744,27194],{"class":58},[52,32746,32520],{"class":371},[52,32748,4278],{"class":58},[52,32750,5467],{"class":371},[52,32752,5259],{"class":58},[52,32754,32755,32757,32759],{"class":54,"line":600},[52,32756,4727],{"class":58},[52,32758,2869],{"class":73},[52,32760,2129],{"class":58},[52,32762,32763],{"class":54,"line":606},[52,32764,4744],{"class":58},[52,32766,32767],{"class":54,"line":653},[52,32768,1773],{"class":58},[52,32770,32771],{"class":54,"line":662},[52,32772,1778],{"class":58},[156,32774,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32776},[32777,32778],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cursorripples",{"title":12145,"description":32413},"docs/components/CursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":32785,"title":113,"body":32786,"category":30161,"componentType":20842,"description":32793,"extension":168,"meta":33033,"navigation":171,"path":33034,"requiresChild":27763,"seo":33035,"stem":33036,"__hash__":33037},"components/docs/components/CursorTrail.md",{"type":8,"value":32787,"toc":33029},[32788,32791,32794,32796,32798,32801,32803,33027],[11,32789,113],{"id":32790},"cursortrail",[15,32792,32793],{},"Animated trail effect that tracks cursor movement",[26901,32795],{"component":113},[23,32797,26905],{"id":21503},[26907,32799],{":props":32800},"[{\"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,32802,26913],{"id":26912},[217,32804,32805,32845,32888,32928,32970],{":tabs":1543},[43,32806,32808],{"className":45,"code":32807,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n />\n\u003C/Shader>\n",[31,32809,32810,32818,32825,32833,32837],{"__ignoreMap":48},[52,32811,32812,32814,32816],{"class":54,"line":55},[52,32813,59],{"class":58},[52,32815,63],{"class":62},[52,32817,77],{"class":58},[52,32819,32820,32822],{"class":54,"line":80},[52,32821,83],{"class":58},[52,32823,32824],{"class":62},"CursorTrail\n",[52,32826,32827,32829,32831],{"class":54,"line":108},[52,32828,14901],{"class":66},[52,32830,70],{"class":58},[52,32832,32462],{"class":73},[52,32834,32835],{"class":54,"line":118},[52,32836,1224],{"class":58},[52,32838,32839,32841,32843],{"class":54,"line":594},[52,32840,121],{"class":58},[52,32842,63],{"class":62},[52,32844,77],{"class":58},[43,32846,32848],{"className":360,"code":32847,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n />\n\u003C/Shader>\n",[31,32849,32850,32858,32864,32876,32880],{"__ignoreMap":48},[52,32851,32852,32854,32856],{"class":54,"line":55},[52,32853,59],{"class":58},[52,32855,63],{"class":371},[52,32857,77],{"class":58},[52,32859,32860,32862],{"class":54,"line":80},[52,32861,83],{"class":58},[52,32863,32824],{"class":371},[52,32865,32866,32868,32870,32872,32874],{"class":54,"line":108},[52,32867,7361],{"class":66},[52,32869,70],{"class":231},[52,32871,723],{"class":58},[52,32873,5467],{"class":371},[52,32875,729],{"class":58},[52,32877,32878],{"class":54,"line":118},[52,32879,1224],{"class":58},[52,32881,32882,32884,32886],{"class":54,"line":594},[52,32883,121],{"class":58},[52,32885,63],{"class":371},[52,32887,77],{"class":58},[43,32889,32890],{"className":2507,"code":32847,"language":2509,"meta":48,"style":48},[31,32891,32892,32900,32906,32916,32920],{"__ignoreMap":48},[52,32893,32894,32896,32898],{"class":54,"line":55},[52,32895,59],{"class":58},[52,32897,63],{"class":371},[52,32899,77],{"class":58},[52,32901,32902,32904],{"class":54,"line":80},[52,32903,83],{"class":58},[52,32905,32824],{"class":371},[52,32907,32908,32910,32912,32914],{"class":54,"line":108},[52,32909,7361],{"class":66},[52,32911,24845],{"class":58},[52,32913,5467],{"class":371},[52,32915,729],{"class":58},[52,32917,32918],{"class":54,"line":118},[52,32919,1224],{"class":58},[52,32921,32922,32924,32926],{"class":54,"line":594},[52,32923,121],{"class":58},[52,32925,63],{"class":371},[52,32927,77],{"class":58},[43,32929,32930],{"className":419,"code":32847,"language":420,"meta":48,"style":48},[31,32931,32932,32940,32946,32958,32962],{"__ignoreMap":48},[52,32933,32934,32936,32938],{"class":54,"line":55},[52,32935,59],{"class":58},[52,32937,63],{"class":371},[52,32939,77],{"class":58},[52,32941,32942,32944],{"class":54,"line":80},[52,32943,83],{"class":58},[52,32945,32824],{"class":371},[52,32947,32948,32950,32952,32954,32956],{"class":54,"line":108},[52,32949,7361],{"class":66},[52,32951,70],{"class":231},[52,32953,723],{"class":58},[52,32955,5467],{"class":371},[52,32957,729],{"class":58},[52,32959,32960],{"class":54,"line":118},[52,32961,1224],{"class":58},[52,32963,32964,32966,32968],{"class":54,"line":594},[52,32965,121],{"class":58},[52,32967,63],{"class":371},[52,32969,77],{"class":58},[43,32971,32973],{"className":222,"code":32972,"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,32974,32975,32985,32989,33003,33007,33019,33023],{"__ignoreMap":48},[52,32976,32977,32979,32981,32983],{"class":54,"line":55},[52,32978,232],{"class":231},[52,32980,9231],{"class":58},[52,32982,238],{"class":231},[52,32984,9236],{"class":73},[52,32986,32987],{"class":54,"line":80},[52,32988,597],{"emptyLinePlaceholder":171},[52,32990,32991,32993,32995,32997,32999,33001],{"class":54,"line":108},[52,32992,1721],{"class":231},[52,32994,1724],{"class":371},[52,32996,1727],{"class":231},[52,32998,1730],{"class":231},[52,33000,1733],{"class":66},[52,33002,1736],{"class":58},[52,33004,33005],{"class":54,"line":118},[52,33006,1751],{"class":58},[52,33008,33009,33011,33013,33015,33017],{"class":54,"line":594},[52,33010,1756],{"class":58},[52,33012,21334],{"class":73},[52,33014,5254],{"class":58},[52,33016,5467],{"class":371},[52,33018,1768],{"class":58},[52,33020,33021],{"class":54,"line":600},[52,33022,1773],{"class":58},[52,33024,33025],{"class":54,"line":606},[52,33026,1778],{"class":58},[156,33028,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33030},[33031,33032],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cursortrail",{"title":113,"description":32793},"docs/components/CursorTrail","wUUBquiR90VnfJRcmSsJKwtWkuTdT_kDTHSJz6U1CeI",{"id":33039,"title":33040,"body":33041,"category":27760,"componentType":20842,"description":33048,"extension":168,"meta":33233,"navigation":171,"path":33234,"requiresChild":27763,"seo":33235,"stem":33236,"__hash__":33237},"components/docs/components/DOMTexture.md","DOMTexture",{"type":8,"value":33042,"toc":33230},[33043,33046,33049,33055,33057,33059,33228],[11,33044,33040],{"id":33045},"domtexture",[15,33047,33048],{},"Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.",[33050,33051],"experimental-warning",{"link-label":33052,"link-url":33053,"message":33054},"View the spec","https://github.com/WICG/html-in-canvas","This component is powered by the WICG html-in-canvas proposal, which is currently only available in Chrome Canary behind a feature flag. It is not suitable for production use and may change as the specification evolves.",[26901,33056],{"component":33040},[23,33058,26913],{"id":26912},[217,33060,33061,33090,33118,33146,33174],{":tabs":1543},[43,33062,33064],{"className":45,"code":33063,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDOMTexture />\n\u003C/Shader>\n",[31,33065,33066,33074,33082],{"__ignoreMap":48},[52,33067,33068,33070,33072],{"class":54,"line":55},[52,33069,59],{"class":58},[52,33071,63],{"class":62},[52,33073,77],{"class":58},[52,33075,33076,33078,33080],{"class":54,"line":80},[52,33077,83],{"class":58},[52,33079,33040],{"class":62},[52,33081,105],{"class":58},[52,33083,33084,33086,33088],{"class":54,"line":108},[52,33085,121],{"class":58},[52,33087,63],{"class":62},[52,33089,77],{"class":58},[43,33091,33092],{"className":360,"code":33063,"language":362,"meta":48,"style":48},[31,33093,33094,33102,33110],{"__ignoreMap":48},[52,33095,33096,33098,33100],{"class":54,"line":55},[52,33097,59],{"class":58},[52,33099,63],{"class":371},[52,33101,77],{"class":58},[52,33103,33104,33106,33108],{"class":54,"line":80},[52,33105,83],{"class":58},[52,33107,33040],{"class":371},[52,33109,105],{"class":58},[52,33111,33112,33114,33116],{"class":54,"line":108},[52,33113,121],{"class":58},[52,33115,63],{"class":371},[52,33117,77],{"class":58},[43,33119,33120],{"className":2507,"code":33063,"language":2509,"meta":48,"style":48},[31,33121,33122,33130,33138],{"__ignoreMap":48},[52,33123,33124,33126,33128],{"class":54,"line":55},[52,33125,59],{"class":58},[52,33127,63],{"class":371},[52,33129,77],{"class":58},[52,33131,33132,33134,33136],{"class":54,"line":80},[52,33133,83],{"class":58},[52,33135,33040],{"class":371},[52,33137,105],{"class":58},[52,33139,33140,33142,33144],{"class":54,"line":108},[52,33141,121],{"class":58},[52,33143,63],{"class":371},[52,33145,77],{"class":58},[43,33147,33148],{"className":419,"code":33063,"language":420,"meta":48,"style":48},[31,33149,33150,33158,33166],{"__ignoreMap":48},[52,33151,33152,33154,33156],{"class":54,"line":55},[52,33153,59],{"class":58},[52,33155,63],{"class":371},[52,33157,77],{"class":58},[52,33159,33160,33162,33164],{"class":54,"line":80},[52,33161,83],{"class":58},[52,33163,33040],{"class":371},[52,33165,105],{"class":58},[52,33167,33168,33170,33172],{"class":54,"line":108},[52,33169,121],{"class":58},[52,33171,63],{"class":371},[52,33173,77],{"class":58},[43,33175,33177],{"className":222,"code":33176,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DOMTexture', props: {} }\n ]\n})\n",[31,33178,33179,33189,33193,33207,33211,33220,33224],{"__ignoreMap":48},[52,33180,33181,33183,33185,33187],{"class":54,"line":55},[52,33182,232],{"class":231},[52,33184,9231],{"class":58},[52,33186,238],{"class":231},[52,33188,9236],{"class":73},[52,33190,33191],{"class":54,"line":80},[52,33192,597],{"emptyLinePlaceholder":171},[52,33194,33195,33197,33199,33201,33203,33205],{"class":54,"line":108},[52,33196,1721],{"class":231},[52,33198,1724],{"class":371},[52,33200,1727],{"class":231},[52,33202,1730],{"class":231},[52,33204,1733],{"class":66},[52,33206,1736],{"class":58},[52,33208,33209],{"class":54,"line":118},[52,33210,1751],{"class":58},[52,33212,33213,33215,33218],{"class":54,"line":594},[52,33214,1756],{"class":58},[52,33216,33217],{"class":73},"'DOMTexture'",[52,33219,2129],{"class":58},[52,33221,33222],{"class":54,"line":600},[52,33223,1773],{"class":58},[52,33225,33226],{"class":54,"line":606},[52,33227,1778],{"class":58},[156,33229,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":33231},[33232],{"id":26912,"depth":80,"text":26913},{},"/docs/components/domtexture",{"title":33040,"description":33048},"docs/components/DOMTexture","3Jc9Zpo0-0aIes_naAYdI0ulUDh5gOfInTZsrpDRdHE",{"id":33239,"title":33240,"body":33241,"category":27760,"componentType":20842,"description":33248,"extension":168,"meta":33433,"navigation":171,"path":33434,"requiresChild":27763,"seo":33435,"stem":33436,"__hash__":33437},"components/docs/components/DiamondGradient.md","DiamondGradient",{"type":8,"value":33242,"toc":33429},[33243,33246,33249,33251,33253,33256,33258,33427],[11,33244,33240],{"id":33245},"diamondgradient",[15,33247,33248],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[26901,33250],{"component":33240},[23,33252,26905],{"id":21503},[26907,33254],{":props":33255},"[{\"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,33257,26913],{"id":26912},[217,33259,33260,33289,33317,33345,33373],{":tabs":1543},[43,33261,33263],{"className":45,"code":33262,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[31,33264,33265,33273,33281],{"__ignoreMap":48},[52,33266,33267,33269,33271],{"class":54,"line":55},[52,33268,59],{"class":58},[52,33270,63],{"class":62},[52,33272,77],{"class":58},[52,33274,33275,33277,33279],{"class":54,"line":80},[52,33276,83],{"class":58},[52,33278,33240],{"class":62},[52,33280,105],{"class":58},[52,33282,33283,33285,33287],{"class":54,"line":108},[52,33284,121],{"class":58},[52,33286,63],{"class":62},[52,33288,77],{"class":58},[43,33290,33291],{"className":360,"code":33262,"language":362,"meta":48,"style":48},[31,33292,33293,33301,33309],{"__ignoreMap":48},[52,33294,33295,33297,33299],{"class":54,"line":55},[52,33296,59],{"class":58},[52,33298,63],{"class":371},[52,33300,77],{"class":58},[52,33302,33303,33305,33307],{"class":54,"line":80},[52,33304,83],{"class":58},[52,33306,33240],{"class":371},[52,33308,105],{"class":58},[52,33310,33311,33313,33315],{"class":54,"line":108},[52,33312,121],{"class":58},[52,33314,63],{"class":371},[52,33316,77],{"class":58},[43,33318,33319],{"className":2507,"code":33262,"language":2509,"meta":48,"style":48},[31,33320,33321,33329,33337],{"__ignoreMap":48},[52,33322,33323,33325,33327],{"class":54,"line":55},[52,33324,59],{"class":58},[52,33326,63],{"class":371},[52,33328,77],{"class":58},[52,33330,33331,33333,33335],{"class":54,"line":80},[52,33332,83],{"class":58},[52,33334,33240],{"class":371},[52,33336,105],{"class":58},[52,33338,33339,33341,33343],{"class":54,"line":108},[52,33340,121],{"class":58},[52,33342,63],{"class":371},[52,33344,77],{"class":58},[43,33346,33347],{"className":419,"code":33262,"language":420,"meta":48,"style":48},[31,33348,33349,33357,33365],{"__ignoreMap":48},[52,33350,33351,33353,33355],{"class":54,"line":55},[52,33352,59],{"class":58},[52,33354,63],{"class":371},[52,33356,77],{"class":58},[52,33358,33359,33361,33363],{"class":54,"line":80},[52,33360,83],{"class":58},[52,33362,33240],{"class":371},[52,33364,105],{"class":58},[52,33366,33367,33369,33371],{"class":54,"line":108},[52,33368,121],{"class":58},[52,33370,63],{"class":371},[52,33372,77],{"class":58},[43,33374,33376],{"className":222,"code":33375,"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,33377,33378,33388,33392,33406,33410,33419,33423],{"__ignoreMap":48},[52,33379,33380,33382,33384,33386],{"class":54,"line":55},[52,33381,232],{"class":231},[52,33383,9231],{"class":58},[52,33385,238],{"class":231},[52,33387,9236],{"class":73},[52,33389,33390],{"class":54,"line":80},[52,33391,597],{"emptyLinePlaceholder":171},[52,33393,33394,33396,33398,33400,33402,33404],{"class":54,"line":108},[52,33395,1721],{"class":231},[52,33397,1724],{"class":371},[52,33399,1727],{"class":231},[52,33401,1730],{"class":231},[52,33403,1733],{"class":66},[52,33405,1736],{"class":58},[52,33407,33408],{"class":54,"line":118},[52,33409,1751],{"class":58},[52,33411,33412,33414,33417],{"class":54,"line":594},[52,33413,1756],{"class":58},[52,33415,33416],{"class":73},"'DiamondGradient'",[52,33418,2129],{"class":58},[52,33420,33421],{"class":54,"line":600},[52,33422,1773],{"class":58},[52,33424,33425],{"class":54,"line":606},[52,33426,1778],{"class":58},[156,33428,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":33430},[33431,33432],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/diamondgradient",{"title":33240,"description":33248},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":33439,"title":33440,"body":33441,"category":27225,"componentType":20848,"description":33448,"extension":168,"meta":33766,"navigation":171,"path":33767,"requiresChild":171,"seo":33768,"stem":33769,"__hash__":33770},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":33442,"toc":33762},[33443,33446,33449,33451,33453,33456,33458,33760],[11,33444,33440],{"id":33445},"diffuseblur",[15,33447,33448],{},"Grain-like pixel displacement at random",[26901,33450],{"component":33440},[23,33452,26905],{"id":21503},[26907,33454],{":props":33455},"[{\"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,33457,26913],{"id":26912},[217,33459,33460,33517,33576,33632,33690],{":tabs":1543},[43,33461,33463],{"className":45,"code":33462,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33464,33465,33473,33480,33489,33493,33501,33509],{"__ignoreMap":48},[52,33466,33467,33469,33471],{"class":54,"line":55},[52,33468,59],{"class":58},[52,33470,63],{"class":62},[52,33472,77],{"class":58},[52,33474,33475,33477],{"class":54,"line":80},[52,33476,83],{"class":58},[52,33478,33479],{"class":62},"DiffuseBlur\n",[52,33481,33482,33484,33486],{"class":54,"line":108},[52,33483,17870],{"class":66},[52,33485,70],{"class":58},[52,33487,33488],{"class":73},"\"30\"\n",[52,33490,33491],{"class":54,"line":118},[52,33492,26949],{"class":58},[52,33494,33495,33497,33499],{"class":54,"line":594},[52,33496,2213],{"class":58},[52,33498,2216],{"class":62},[52,33500,105],{"class":58},[52,33502,33503,33505,33507],{"class":54,"line":600},[52,33504,2230],{"class":58},[52,33506,33440],{"class":62},[52,33508,77],{"class":58},[52,33510,33511,33513,33515],{"class":54,"line":606},[52,33512,121],{"class":58},[52,33514,63],{"class":62},[52,33516,77],{"class":58},[43,33518,33520],{"className":360,"code":33519,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33521,33522,33530,33536,33548,33552,33560,33568],{"__ignoreMap":48},[52,33523,33524,33526,33528],{"class":54,"line":55},[52,33525,59],{"class":58},[52,33527,63],{"class":371},[52,33529,77],{"class":58},[52,33531,33532,33534],{"class":54,"line":80},[52,33533,83],{"class":58},[52,33535,33479],{"class":371},[52,33537,33538,33540,33542,33544,33546],{"class":54,"line":108},[52,33539,17981],{"class":66},[52,33541,70],{"class":231},[52,33543,723],{"class":58},[52,33545,13194],{"class":371},[52,33547,729],{"class":58},[52,33549,33550],{"class":54,"line":118},[52,33551,26949],{"class":58},[52,33553,33554,33556,33558],{"class":54,"line":594},[52,33555,2213],{"class":58},[52,33557,2216],{"class":371},[52,33559,105],{"class":58},[52,33561,33562,33564,33566],{"class":54,"line":600},[52,33563,2230],{"class":58},[52,33565,33440],{"class":371},[52,33567,77],{"class":58},[52,33569,33570,33572,33574],{"class":54,"line":606},[52,33571,121],{"class":58},[52,33573,63],{"class":371},[52,33575,77],{"class":58},[43,33577,33578],{"className":2507,"code":33519,"language":2509,"meta":48,"style":48},[31,33579,33580,33588,33594,33604,33608,33616,33624],{"__ignoreMap":48},[52,33581,33582,33584,33586],{"class":54,"line":55},[52,33583,59],{"class":58},[52,33585,63],{"class":371},[52,33587,77],{"class":58},[52,33589,33590,33592],{"class":54,"line":80},[52,33591,83],{"class":58},[52,33593,33479],{"class":371},[52,33595,33596,33598,33600,33602],{"class":54,"line":108},[52,33597,17981],{"class":66},[52,33599,24845],{"class":58},[52,33601,13194],{"class":371},[52,33603,729],{"class":58},[52,33605,33606],{"class":54,"line":118},[52,33607,26949],{"class":58},[52,33609,33610,33612,33614],{"class":54,"line":594},[52,33611,2213],{"class":58},[52,33613,2216],{"class":371},[52,33615,105],{"class":58},[52,33617,33618,33620,33622],{"class":54,"line":600},[52,33619,2230],{"class":58},[52,33621,33440],{"class":371},[52,33623,77],{"class":58},[52,33625,33626,33628,33630],{"class":54,"line":606},[52,33627,121],{"class":58},[52,33629,63],{"class":371},[52,33631,77],{"class":58},[43,33633,33634],{"className":419,"code":33519,"language":420,"meta":48,"style":48},[31,33635,33636,33644,33650,33662,33666,33674,33682],{"__ignoreMap":48},[52,33637,33638,33640,33642],{"class":54,"line":55},[52,33639,59],{"class":58},[52,33641,63],{"class":371},[52,33643,77],{"class":58},[52,33645,33646,33648],{"class":54,"line":80},[52,33647,83],{"class":58},[52,33649,33479],{"class":371},[52,33651,33652,33654,33656,33658,33660],{"class":54,"line":108},[52,33653,17981],{"class":66},[52,33655,70],{"class":231},[52,33657,723],{"class":58},[52,33659,13194],{"class":371},[52,33661,729],{"class":58},[52,33663,33664],{"class":54,"line":118},[52,33665,26949],{"class":58},[52,33667,33668,33670,33672],{"class":54,"line":594},[52,33669,2213],{"class":58},[52,33671,2216],{"class":371},[52,33673,105],{"class":58},[52,33675,33676,33678,33680],{"class":54,"line":600},[52,33677,2230],{"class":58},[52,33679,33440],{"class":371},[52,33681,77],{"class":58},[52,33683,33684,33686,33688],{"class":54,"line":606},[52,33685,121],{"class":58},[52,33687,63],{"class":371},[52,33689,77],{"class":58},[43,33691,33693],{"className":222,"code":33692,"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,33694,33695,33705,33709,33723,33727,33740,33748,33752,33756],{"__ignoreMap":48},[52,33696,33697,33699,33701,33703],{"class":54,"line":55},[52,33698,232],{"class":231},[52,33700,9231],{"class":58},[52,33702,238],{"class":231},[52,33704,9236],{"class":73},[52,33706,33707],{"class":54,"line":80},[52,33708,597],{"emptyLinePlaceholder":171},[52,33710,33711,33713,33715,33717,33719,33721],{"class":54,"line":108},[52,33712,1721],{"class":231},[52,33714,1724],{"class":371},[52,33716,1727],{"class":231},[52,33718,1730],{"class":231},[52,33720,1733],{"class":66},[52,33722,1736],{"class":58},[52,33724,33725],{"class":54,"line":118},[52,33726,1751],{"class":58},[52,33728,33729,33731,33734,33736,33738],{"class":54,"line":594},[52,33730,1756],{"class":58},[52,33732,33733],{"class":73},"'DiffuseBlur'",[52,33735,27194],{"class":58},[52,33737,13194],{"class":371},[52,33739,5259],{"class":58},[52,33741,33742,33744,33746],{"class":54,"line":600},[52,33743,4727],{"class":58},[52,33745,2869],{"class":73},[52,33747,2129],{"class":58},[52,33749,33750],{"class":54,"line":606},[52,33751,4744],{"class":58},[52,33753,33754],{"class":54,"line":653},[52,33755,1773],{"class":58},[52,33757,33758],{"class":54,"line":662},[52,33759,1778],{"class":58},[156,33761,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33763},[33764,33765],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/diffuseblur",{"title":33440,"description":33448},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":33772,"title":33773,"body":33774,"category":27503,"componentType":20848,"description":33781,"extension":168,"meta":34042,"navigation":171,"path":34043,"requiresChild":171,"seo":34044,"stem":34045,"__hash__":34046},"components/docs/components/Dither.md","Dither",{"type":8,"value":33775,"toc":34038},[33776,33779,33782,33784,33786,33789,33791,34036],[11,33777,33773],{"id":33778},"dither",[15,33780,33781],{},"Dithering effect with multiple pattern options",[26901,33783],{"component":33773},[23,33785,26905],{"id":21503},[26907,33787],{":props":33788},"[{\"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,33790,26913],{"id":26912},[217,33792,33793,33838,33882,33926,33970],{":tabs":1543},[43,33794,33796],{"className":45,"code":33795,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[31,33797,33798,33806,33814,33822,33830],{"__ignoreMap":48},[52,33799,33800,33802,33804],{"class":54,"line":55},[52,33801,59],{"class":58},[52,33803,63],{"class":62},[52,33805,77],{"class":58},[52,33807,33808,33810,33812],{"class":54,"line":80},[52,33809,83],{"class":58},[52,33811,33773],{"class":62},[52,33813,77],{"class":58},[52,33815,33816,33818,33820],{"class":54,"line":108},[52,33817,2213],{"class":58},[52,33819,2216],{"class":62},[52,33821,105],{"class":58},[52,33823,33824,33826,33828],{"class":54,"line":118},[52,33825,2230],{"class":58},[52,33827,33773],{"class":62},[52,33829,77],{"class":58},[52,33831,33832,33834,33836],{"class":54,"line":594},[52,33833,121],{"class":58},[52,33835,63],{"class":62},[52,33837,77],{"class":58},[43,33839,33840],{"className":360,"code":33795,"language":362,"meta":48,"style":48},[31,33841,33842,33850,33858,33866,33874],{"__ignoreMap":48},[52,33843,33844,33846,33848],{"class":54,"line":55},[52,33845,59],{"class":58},[52,33847,63],{"class":371},[52,33849,77],{"class":58},[52,33851,33852,33854,33856],{"class":54,"line":80},[52,33853,83],{"class":58},[52,33855,33773],{"class":371},[52,33857,77],{"class":58},[52,33859,33860,33862,33864],{"class":54,"line":108},[52,33861,2213],{"class":58},[52,33863,2216],{"class":371},[52,33865,105],{"class":58},[52,33867,33868,33870,33872],{"class":54,"line":118},[52,33869,2230],{"class":58},[52,33871,33773],{"class":371},[52,33873,77],{"class":58},[52,33875,33876,33878,33880],{"class":54,"line":594},[52,33877,121],{"class":58},[52,33879,63],{"class":371},[52,33881,77],{"class":58},[43,33883,33884],{"className":2507,"code":33795,"language":2509,"meta":48,"style":48},[31,33885,33886,33894,33902,33910,33918],{"__ignoreMap":48},[52,33887,33888,33890,33892],{"class":54,"line":55},[52,33889,59],{"class":58},[52,33891,63],{"class":371},[52,33893,77],{"class":58},[52,33895,33896,33898,33900],{"class":54,"line":80},[52,33897,83],{"class":58},[52,33899,33773],{"class":371},[52,33901,77],{"class":58},[52,33903,33904,33906,33908],{"class":54,"line":108},[52,33905,2213],{"class":58},[52,33907,2216],{"class":371},[52,33909,105],{"class":58},[52,33911,33912,33914,33916],{"class":54,"line":118},[52,33913,2230],{"class":58},[52,33915,33773],{"class":371},[52,33917,77],{"class":58},[52,33919,33920,33922,33924],{"class":54,"line":594},[52,33921,121],{"class":58},[52,33923,63],{"class":371},[52,33925,77],{"class":58},[43,33927,33928],{"className":419,"code":33795,"language":420,"meta":48,"style":48},[31,33929,33930,33938,33946,33954,33962],{"__ignoreMap":48},[52,33931,33932,33934,33936],{"class":54,"line":55},[52,33933,59],{"class":58},[52,33935,63],{"class":371},[52,33937,77],{"class":58},[52,33939,33940,33942,33944],{"class":54,"line":80},[52,33941,83],{"class":58},[52,33943,33773],{"class":371},[52,33945,77],{"class":58},[52,33947,33948,33950,33952],{"class":54,"line":108},[52,33949,2213],{"class":58},[52,33951,2216],{"class":371},[52,33953,105],{"class":58},[52,33955,33956,33958,33960],{"class":54,"line":118},[52,33957,2230],{"class":58},[52,33959,33773],{"class":371},[52,33961,77],{"class":58},[52,33963,33964,33966,33968],{"class":54,"line":594},[52,33965,121],{"class":58},[52,33967,63],{"class":371},[52,33969,77],{"class":58},[43,33971,33973],{"className":222,"code":33972,"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,33974,33975,33985,33989,34003,34007,34016,34024,34028,34032],{"__ignoreMap":48},[52,33976,33977,33979,33981,33983],{"class":54,"line":55},[52,33978,232],{"class":231},[52,33980,9231],{"class":58},[52,33982,238],{"class":231},[52,33984,9236],{"class":73},[52,33986,33987],{"class":54,"line":80},[52,33988,597],{"emptyLinePlaceholder":171},[52,33990,33991,33993,33995,33997,33999,34001],{"class":54,"line":108},[52,33992,1721],{"class":231},[52,33994,1724],{"class":371},[52,33996,1727],{"class":231},[52,33998,1730],{"class":231},[52,34000,1733],{"class":66},[52,34002,1736],{"class":58},[52,34004,34005],{"class":54,"line":118},[52,34006,1751],{"class":58},[52,34008,34009,34011,34014],{"class":54,"line":594},[52,34010,1756],{"class":58},[52,34012,34013],{"class":73},"'Dither'",[52,34015,4722],{"class":58},[52,34017,34018,34020,34022],{"class":54,"line":600},[52,34019,4727],{"class":58},[52,34021,2869],{"class":73},[52,34023,2129],{"class":58},[52,34025,34026],{"class":54,"line":606},[52,34027,4744],{"class":58},[52,34029,34030],{"class":54,"line":653},[52,34031,1773],{"class":58},[52,34033,34034],{"class":54,"line":662},[52,34035,1778],{"class":58},[156,34037,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34039},[34040,34041],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dither",{"title":33773,"description":33781},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":34048,"title":34049,"body":34050,"category":27760,"componentType":20842,"description":34057,"extension":168,"meta":34285,"navigation":171,"path":34286,"requiresChild":27763,"seo":34287,"stem":34288,"__hash__":34289},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":34051,"toc":34281},[34052,34055,34058,34060,34062,34065,34067,34279],[11,34053,34049],{"id":34054},"dotgrid",[15,34056,34057],{},"Grid of dots with optional twinkling animation",[26901,34059],{"component":34049},[23,34061,26905],{"id":21503},[26907,34063],{":props":34064},"[{\"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,34066,26913],{"id":26912},[217,34068,34069,34108,34146,34184,34222],{":tabs":1543},[43,34070,34072],{"className":45,"code":34071,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,34073,34074,34082,34088,34096,34100],{"__ignoreMap":48},[52,34075,34076,34078,34080],{"class":54,"line":55},[52,34077,59],{"class":58},[52,34079,63],{"class":62},[52,34081,77],{"class":58},[52,34083,34084,34086],{"class":54,"line":80},[52,34085,83],{"class":58},[52,34087,17004],{"class":62},[52,34089,34090,34092,34094],{"class":54,"line":108},[52,34091,7351],{"class":66},[52,34093,70],{"class":58},[52,34095,7307],{"class":73},[52,34097,34098],{"class":54,"line":118},[52,34099,1224],{"class":58},[52,34101,34102,34104,34106],{"class":54,"line":594},[52,34103,121],{"class":58},[52,34105,63],{"class":62},[52,34107,77],{"class":58},[43,34109,34110],{"className":360,"code":34071,"language":362,"meta":48,"style":48},[31,34111,34112,34120,34126,34134,34138],{"__ignoreMap":48},[52,34113,34114,34116,34118],{"class":54,"line":55},[52,34115,59],{"class":58},[52,34117,63],{"class":371},[52,34119,77],{"class":58},[52,34121,34122,34124],{"class":54,"line":80},[52,34123,83],{"class":58},[52,34125,17004],{"class":371},[52,34127,34128,34130,34132],{"class":54,"line":108},[52,34129,7351],{"class":66},[52,34131,70],{"class":231},[52,34133,7307],{"class":73},[52,34135,34136],{"class":54,"line":118},[52,34137,1224],{"class":58},[52,34139,34140,34142,34144],{"class":54,"line":594},[52,34141,121],{"class":58},[52,34143,63],{"class":371},[52,34145,77],{"class":58},[43,34147,34148],{"className":2507,"code":34071,"language":2509,"meta":48,"style":48},[31,34149,34150,34158,34164,34172,34176],{"__ignoreMap":48},[52,34151,34152,34154,34156],{"class":54,"line":55},[52,34153,59],{"class":58},[52,34155,63],{"class":371},[52,34157,77],{"class":58},[52,34159,34160,34162],{"class":54,"line":80},[52,34161,83],{"class":58},[52,34163,17004],{"class":371},[52,34165,34166,34168,34170],{"class":54,"line":108},[52,34167,7351],{"class":66},[52,34169,70],{"class":58},[52,34171,7307],{"class":73},[52,34173,34174],{"class":54,"line":118},[52,34175,1224],{"class":58},[52,34177,34178,34180,34182],{"class":54,"line":594},[52,34179,121],{"class":58},[52,34181,63],{"class":371},[52,34183,77],{"class":58},[43,34185,34186],{"className":419,"code":34071,"language":420,"meta":48,"style":48},[31,34187,34188,34196,34202,34210,34214],{"__ignoreMap":48},[52,34189,34190,34192,34194],{"class":54,"line":55},[52,34191,59],{"class":58},[52,34193,63],{"class":371},[52,34195,77],{"class":58},[52,34197,34198,34200],{"class":54,"line":80},[52,34199,83],{"class":58},[52,34201,17004],{"class":371},[52,34203,34204,34206,34208],{"class":54,"line":108},[52,34205,7351],{"class":66},[52,34207,70],{"class":231},[52,34209,7307],{"class":73},[52,34211,34212],{"class":54,"line":118},[52,34213,1224],{"class":58},[52,34215,34216,34218,34220],{"class":54,"line":594},[52,34217,121],{"class":58},[52,34219,63],{"class":371},[52,34221,77],{"class":58},[43,34223,34225],{"className":222,"code":34224,"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,34226,34227,34237,34241,34255,34259,34271,34275],{"__ignoreMap":48},[52,34228,34229,34231,34233,34235],{"class":54,"line":55},[52,34230,232],{"class":231},[52,34232,9231],{"class":58},[52,34234,238],{"class":231},[52,34236,9236],{"class":73},[52,34238,34239],{"class":54,"line":80},[52,34240,597],{"emptyLinePlaceholder":171},[52,34242,34243,34245,34247,34249,34251,34253],{"class":54,"line":108},[52,34244,1721],{"class":231},[52,34246,1724],{"class":371},[52,34248,1727],{"class":231},[52,34250,1730],{"class":231},[52,34252,1733],{"class":66},[52,34254,1736],{"class":58},[52,34256,34257],{"class":54,"line":118},[52,34258,1751],{"class":58},[52,34260,34261,34263,34265,34267,34269],{"class":54,"line":594},[52,34262,1756],{"class":58},[52,34264,17555],{"class":73},[52,34266,1762],{"class":58},[52,34268,7886],{"class":73},[52,34270,1768],{"class":58},[52,34272,34273],{"class":54,"line":600},[52,34274,1773],{"class":58},[52,34276,34277],{"class":54,"line":606},[52,34278,1778],{"class":58},[156,34280,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34282},[34283,34284],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dotgrid",{"title":34049,"description":34057},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":34291,"title":34292,"body":34293,"category":27503,"componentType":20848,"description":34300,"extension":168,"meta":34654,"navigation":171,"path":34655,"requiresChild":171,"seo":34656,"stem":34657,"__hash__":34658},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":34294,"toc":34650},[34295,34298,34301,34303,34305,34308,34310,34648],[11,34296,34292],{"id":34297},"dropshadow",[15,34299,34300],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[26901,34302],{"component":34292},[23,34304,26905],{"id":21503},[26907,34306],{":props":34307},"[{\"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,34309,26913],{"id":26912},[217,34311,34312,34376,34443,34507,34573],{":tabs":1543},[43,34313,34315],{"className":45,"code":34314,"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,34316,34317,34325,34332,34340,34348,34352,34360,34368],{"__ignoreMap":48},[52,34318,34319,34321,34323],{"class":54,"line":55},[52,34320,59],{"class":58},[52,34322,63],{"class":62},[52,34324,77],{"class":58},[52,34326,34327,34329],{"class":54,"line":80},[52,34328,83],{"class":58},[52,34330,34331],{"class":62},"DropShadow\n",[52,34333,34334,34336,34338],{"class":54,"line":108},[52,34335,7351],{"class":66},[52,34337,70],{"class":58},[52,34339,16975],{"class":73},[52,34341,34342,34344,34346],{"class":54,"line":118},[52,34343,17870],{"class":66},[52,34345,70],{"class":58},[52,34347,32462],{"class":73},[52,34349,34350],{"class":54,"line":594},[52,34351,26949],{"class":58},[52,34353,34354,34356,34358],{"class":54,"line":600},[52,34355,2213],{"class":58},[52,34357,2216],{"class":62},[52,34359,105],{"class":58},[52,34361,34362,34364,34366],{"class":54,"line":606},[52,34363,2230],{"class":58},[52,34365,34292],{"class":62},[52,34367,77],{"class":58},[52,34369,34370,34372,34374],{"class":54,"line":653},[52,34371,121],{"class":58},[52,34373,63],{"class":62},[52,34375,77],{"class":58},[43,34377,34379],{"className":360,"code":34378,"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,34380,34381,34389,34395,34403,34415,34419,34427,34435],{"__ignoreMap":48},[52,34382,34383,34385,34387],{"class":54,"line":55},[52,34384,59],{"class":58},[52,34386,63],{"class":371},[52,34388,77],{"class":58},[52,34390,34391,34393],{"class":54,"line":80},[52,34392,83],{"class":58},[52,34394,34331],{"class":371},[52,34396,34397,34399,34401],{"class":54,"line":108},[52,34398,7351],{"class":66},[52,34400,70],{"class":231},[52,34402,16975],{"class":73},[52,34404,34405,34407,34409,34411,34413],{"class":54,"line":118},[52,34406,17981],{"class":66},[52,34408,70],{"class":231},[52,34410,723],{"class":58},[52,34412,5467],{"class":371},[52,34414,729],{"class":58},[52,34416,34417],{"class":54,"line":594},[52,34418,26949],{"class":58},[52,34420,34421,34423,34425],{"class":54,"line":600},[52,34422,2213],{"class":58},[52,34424,2216],{"class":371},[52,34426,105],{"class":58},[52,34428,34429,34431,34433],{"class":54,"line":606},[52,34430,2230],{"class":58},[52,34432,34292],{"class":371},[52,34434,77],{"class":58},[52,34436,34437,34439,34441],{"class":54,"line":653},[52,34438,121],{"class":58},[52,34440,63],{"class":371},[52,34442,77],{"class":58},[43,34444,34445],{"className":2507,"code":34378,"language":2509,"meta":48,"style":48},[31,34446,34447,34455,34461,34469,34479,34483,34491,34499],{"__ignoreMap":48},[52,34448,34449,34451,34453],{"class":54,"line":55},[52,34450,59],{"class":58},[52,34452,63],{"class":371},[52,34454,77],{"class":58},[52,34456,34457,34459],{"class":54,"line":80},[52,34458,83],{"class":58},[52,34460,34331],{"class":371},[52,34462,34463,34465,34467],{"class":54,"line":108},[52,34464,7351],{"class":66},[52,34466,70],{"class":58},[52,34468,16975],{"class":73},[52,34470,34471,34473,34475,34477],{"class":54,"line":118},[52,34472,17981],{"class":66},[52,34474,24845],{"class":58},[52,34476,5467],{"class":371},[52,34478,729],{"class":58},[52,34480,34481],{"class":54,"line":594},[52,34482,26949],{"class":58},[52,34484,34485,34487,34489],{"class":54,"line":600},[52,34486,2213],{"class":58},[52,34488,2216],{"class":371},[52,34490,105],{"class":58},[52,34492,34493,34495,34497],{"class":54,"line":606},[52,34494,2230],{"class":58},[52,34496,34292],{"class":371},[52,34498,77],{"class":58},[52,34500,34501,34503,34505],{"class":54,"line":653},[52,34502,121],{"class":58},[52,34504,63],{"class":371},[52,34506,77],{"class":58},[43,34508,34509],{"className":419,"code":34378,"language":420,"meta":48,"style":48},[31,34510,34511,34519,34525,34533,34545,34549,34557,34565],{"__ignoreMap":48},[52,34512,34513,34515,34517],{"class":54,"line":55},[52,34514,59],{"class":58},[52,34516,63],{"class":371},[52,34518,77],{"class":58},[52,34520,34521,34523],{"class":54,"line":80},[52,34522,83],{"class":58},[52,34524,34331],{"class":371},[52,34526,34527,34529,34531],{"class":54,"line":108},[52,34528,7351],{"class":66},[52,34530,70],{"class":231},[52,34532,16975],{"class":73},[52,34534,34535,34537,34539,34541,34543],{"class":54,"line":118},[52,34536,17981],{"class":66},[52,34538,70],{"class":231},[52,34540,723],{"class":58},[52,34542,5467],{"class":371},[52,34544,729],{"class":58},[52,34546,34547],{"class":54,"line":594},[52,34548,26949],{"class":58},[52,34550,34551,34553,34555],{"class":54,"line":600},[52,34552,2213],{"class":58},[52,34554,2216],{"class":371},[52,34556,105],{"class":58},[52,34558,34559,34561,34563],{"class":54,"line":606},[52,34560,2230],{"class":58},[52,34562,34292],{"class":371},[52,34564,77],{"class":58},[52,34566,34567,34569,34571],{"class":54,"line":653},[52,34568,121],{"class":58},[52,34570,63],{"class":371},[52,34572,77],{"class":58},[43,34574,34576],{"className":222,"code":34575,"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,34577,34578,34588,34592,34606,34610,34628,34636,34640,34644],{"__ignoreMap":48},[52,34579,34580,34582,34584,34586],{"class":54,"line":55},[52,34581,232],{"class":231},[52,34583,9231],{"class":58},[52,34585,238],{"class":231},[52,34587,9236],{"class":73},[52,34589,34590],{"class":54,"line":80},[52,34591,597],{"emptyLinePlaceholder":171},[52,34593,34594,34596,34598,34600,34602,34604],{"class":54,"line":108},[52,34595,1721],{"class":231},[52,34597,1724],{"class":371},[52,34599,1727],{"class":231},[52,34601,1730],{"class":231},[52,34603,1733],{"class":66},[52,34605,1736],{"class":58},[52,34607,34608],{"class":54,"line":118},[52,34609,1751],{"class":58},[52,34611,34612,34614,34617,34619,34621,34624,34626],{"class":54,"line":594},[52,34613,1756],{"class":58},[52,34615,34616],{"class":73},"'DropShadow'",[52,34618,1762],{"class":58},[52,34620,17534],{"class":73},[52,34622,34623],{"class":58},", intensity: ",[52,34625,5467],{"class":371},[52,34627,5259],{"class":58},[52,34629,34630,34632,34634],{"class":54,"line":600},[52,34631,4727],{"class":58},[52,34633,2869],{"class":73},[52,34635,2129],{"class":58},[52,34637,34638],{"class":54,"line":606},[52,34639,4744],{"class":58},[52,34641,34642],{"class":54,"line":653},[52,34643,1773],{"class":58},[52,34645,34646],{"class":54,"line":662},[52,34647,1778],{"class":58},[156,34649,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34651},[34652,34653],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dropshadow",{"title":34292,"description":34300},"docs/components/DropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":34660,"title":34661,"body":34662,"category":28771,"componentType":20848,"description":34669,"extension":168,"meta":34930,"navigation":171,"path":34931,"requiresChild":171,"seo":34932,"stem":34933,"__hash__":34934},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":34663,"toc":34926},[34664,34667,34670,34672,34674,34677,34679,34924],[11,34665,34661],{"id":34666},"duotone",[15,34668,34669],{},"Map colors to two tones based on luminance",[26901,34671],{"component":34661},[23,34673,26905],{"id":21503},[26907,34675],{":props":34676},"[{\"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,34678,26913],{"id":26912},[217,34680,34681,34726,34770,34814,34858],{":tabs":1543},[43,34682,34684],{"className":45,"code":34683,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[31,34685,34686,34694,34702,34710,34718],{"__ignoreMap":48},[52,34687,34688,34690,34692],{"class":54,"line":55},[52,34689,59],{"class":58},[52,34691,63],{"class":62},[52,34693,77],{"class":58},[52,34695,34696,34698,34700],{"class":54,"line":80},[52,34697,83],{"class":58},[52,34699,34661],{"class":62},[52,34701,77],{"class":58},[52,34703,34704,34706,34708],{"class":54,"line":108},[52,34705,2213],{"class":58},[52,34707,2216],{"class":62},[52,34709,105],{"class":58},[52,34711,34712,34714,34716],{"class":54,"line":118},[52,34713,2230],{"class":58},[52,34715,34661],{"class":62},[52,34717,77],{"class":58},[52,34719,34720,34722,34724],{"class":54,"line":594},[52,34721,121],{"class":58},[52,34723,63],{"class":62},[52,34725,77],{"class":58},[43,34727,34728],{"className":360,"code":34683,"language":362,"meta":48,"style":48},[31,34729,34730,34738,34746,34754,34762],{"__ignoreMap":48},[52,34731,34732,34734,34736],{"class":54,"line":55},[52,34733,59],{"class":58},[52,34735,63],{"class":371},[52,34737,77],{"class":58},[52,34739,34740,34742,34744],{"class":54,"line":80},[52,34741,83],{"class":58},[52,34743,34661],{"class":371},[52,34745,77],{"class":58},[52,34747,34748,34750,34752],{"class":54,"line":108},[52,34749,2213],{"class":58},[52,34751,2216],{"class":371},[52,34753,105],{"class":58},[52,34755,34756,34758,34760],{"class":54,"line":118},[52,34757,2230],{"class":58},[52,34759,34661],{"class":371},[52,34761,77],{"class":58},[52,34763,34764,34766,34768],{"class":54,"line":594},[52,34765,121],{"class":58},[52,34767,63],{"class":371},[52,34769,77],{"class":58},[43,34771,34772],{"className":2507,"code":34683,"language":2509,"meta":48,"style":48},[31,34773,34774,34782,34790,34798,34806],{"__ignoreMap":48},[52,34775,34776,34778,34780],{"class":54,"line":55},[52,34777,59],{"class":58},[52,34779,63],{"class":371},[52,34781,77],{"class":58},[52,34783,34784,34786,34788],{"class":54,"line":80},[52,34785,83],{"class":58},[52,34787,34661],{"class":371},[52,34789,77],{"class":58},[52,34791,34792,34794,34796],{"class":54,"line":108},[52,34793,2213],{"class":58},[52,34795,2216],{"class":371},[52,34797,105],{"class":58},[52,34799,34800,34802,34804],{"class":54,"line":118},[52,34801,2230],{"class":58},[52,34803,34661],{"class":371},[52,34805,77],{"class":58},[52,34807,34808,34810,34812],{"class":54,"line":594},[52,34809,121],{"class":58},[52,34811,63],{"class":371},[52,34813,77],{"class":58},[43,34815,34816],{"className":419,"code":34683,"language":420,"meta":48,"style":48},[31,34817,34818,34826,34834,34842,34850],{"__ignoreMap":48},[52,34819,34820,34822,34824],{"class":54,"line":55},[52,34821,59],{"class":58},[52,34823,63],{"class":371},[52,34825,77],{"class":58},[52,34827,34828,34830,34832],{"class":54,"line":80},[52,34829,83],{"class":58},[52,34831,34661],{"class":371},[52,34833,77],{"class":58},[52,34835,34836,34838,34840],{"class":54,"line":108},[52,34837,2213],{"class":58},[52,34839,2216],{"class":371},[52,34841,105],{"class":58},[52,34843,34844,34846,34848],{"class":54,"line":118},[52,34845,2230],{"class":58},[52,34847,34661],{"class":371},[52,34849,77],{"class":58},[52,34851,34852,34854,34856],{"class":54,"line":594},[52,34853,121],{"class":58},[52,34855,63],{"class":371},[52,34857,77],{"class":58},[43,34859,34861],{"className":222,"code":34860,"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,34862,34863,34873,34877,34891,34895,34904,34912,34916,34920],{"__ignoreMap":48},[52,34864,34865,34867,34869,34871],{"class":54,"line":55},[52,34866,232],{"class":231},[52,34868,9231],{"class":58},[52,34870,238],{"class":231},[52,34872,9236],{"class":73},[52,34874,34875],{"class":54,"line":80},[52,34876,597],{"emptyLinePlaceholder":171},[52,34878,34879,34881,34883,34885,34887,34889],{"class":54,"line":108},[52,34880,1721],{"class":231},[52,34882,1724],{"class":371},[52,34884,1727],{"class":231},[52,34886,1730],{"class":231},[52,34888,1733],{"class":66},[52,34890,1736],{"class":58},[52,34892,34893],{"class":54,"line":118},[52,34894,1751],{"class":58},[52,34896,34897,34899,34902],{"class":54,"line":594},[52,34898,1756],{"class":58},[52,34900,34901],{"class":73},"'Duotone'",[52,34903,4722],{"class":58},[52,34905,34906,34908,34910],{"class":54,"line":600},[52,34907,4727],{"class":58},[52,34909,2869],{"class":73},[52,34911,2129],{"class":58},[52,34913,34914],{"class":54,"line":606},[52,34915,4744],{"class":58},[52,34917,34918],{"class":54,"line":653},[52,34919,1773],{"class":58},[52,34921,34922],{"class":54,"line":662},[52,34923,1778],{"class":58},[156,34925,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34927},[34928,34929],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/duotone",{"title":34661,"description":34669},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":34936,"title":34937,"body":34938,"category":30727,"componentType":20842,"description":34945,"extension":168,"meta":35175,"navigation":171,"path":35176,"requiresChild":27763,"seo":35177,"stem":35178,"__hash__":35179},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":34939,"toc":35171},[34940,34943,34946,34948,34950,34953,34955,35169],[11,34941,34937],{"id":34942},"ellipse",[15,34944,34945],{},"Ellipse with independently adjustable horizontal and vertical radii",[26901,34947],{"component":34937},[23,34949,26905],{"id":21503},[26907,34951],{":props":34952},"[{\"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,34954,26913],{"id":26912},[217,34956,34957,34997,35035,35073,35111],{":tabs":1543},[43,34958,34960],{"className":45,"code":34959,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,34961,34962,34970,34977,34985,34989],{"__ignoreMap":48},[52,34963,34964,34966,34968],{"class":54,"line":55},[52,34965,59],{"class":58},[52,34967,63],{"class":62},[52,34969,77],{"class":58},[52,34971,34972,34974],{"class":54,"line":80},[52,34973,83],{"class":58},[52,34975,34976],{"class":62},"Ellipse\n",[52,34978,34979,34981,34983],{"class":54,"line":108},[52,34980,7351],{"class":66},[52,34982,70],{"class":58},[52,34984,7307],{"class":73},[52,34986,34987],{"class":54,"line":118},[52,34988,1224],{"class":58},[52,34990,34991,34993,34995],{"class":54,"line":594},[52,34992,121],{"class":58},[52,34994,63],{"class":62},[52,34996,77],{"class":58},[43,34998,34999],{"className":360,"code":34959,"language":362,"meta":48,"style":48},[31,35000,35001,35009,35015,35023,35027],{"__ignoreMap":48},[52,35002,35003,35005,35007],{"class":54,"line":55},[52,35004,59],{"class":58},[52,35006,63],{"class":371},[52,35008,77],{"class":58},[52,35010,35011,35013],{"class":54,"line":80},[52,35012,83],{"class":58},[52,35014,34976],{"class":371},[52,35016,35017,35019,35021],{"class":54,"line":108},[52,35018,7351],{"class":66},[52,35020,70],{"class":231},[52,35022,7307],{"class":73},[52,35024,35025],{"class":54,"line":118},[52,35026,1224],{"class":58},[52,35028,35029,35031,35033],{"class":54,"line":594},[52,35030,121],{"class":58},[52,35032,63],{"class":371},[52,35034,77],{"class":58},[43,35036,35037],{"className":2507,"code":34959,"language":2509,"meta":48,"style":48},[31,35038,35039,35047,35053,35061,35065],{"__ignoreMap":48},[52,35040,35041,35043,35045],{"class":54,"line":55},[52,35042,59],{"class":58},[52,35044,63],{"class":371},[52,35046,77],{"class":58},[52,35048,35049,35051],{"class":54,"line":80},[52,35050,83],{"class":58},[52,35052,34976],{"class":371},[52,35054,35055,35057,35059],{"class":54,"line":108},[52,35056,7351],{"class":66},[52,35058,70],{"class":58},[52,35060,7307],{"class":73},[52,35062,35063],{"class":54,"line":118},[52,35064,1224],{"class":58},[52,35066,35067,35069,35071],{"class":54,"line":594},[52,35068,121],{"class":58},[52,35070,63],{"class":371},[52,35072,77],{"class":58},[43,35074,35075],{"className":419,"code":34959,"language":420,"meta":48,"style":48},[31,35076,35077,35085,35091,35099,35103],{"__ignoreMap":48},[52,35078,35079,35081,35083],{"class":54,"line":55},[52,35080,59],{"class":58},[52,35082,63],{"class":371},[52,35084,77],{"class":58},[52,35086,35087,35089],{"class":54,"line":80},[52,35088,83],{"class":58},[52,35090,34976],{"class":371},[52,35092,35093,35095,35097],{"class":54,"line":108},[52,35094,7351],{"class":66},[52,35096,70],{"class":231},[52,35098,7307],{"class":73},[52,35100,35101],{"class":54,"line":118},[52,35102,1224],{"class":58},[52,35104,35105,35107,35109],{"class":54,"line":594},[52,35106,121],{"class":58},[52,35108,63],{"class":371},[52,35110,77],{"class":58},[43,35112,35114],{"className":222,"code":35113,"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,35115,35116,35126,35130,35144,35148,35161,35165],{"__ignoreMap":48},[52,35117,35118,35120,35122,35124],{"class":54,"line":55},[52,35119,232],{"class":231},[52,35121,9231],{"class":58},[52,35123,238],{"class":231},[52,35125,9236],{"class":73},[52,35127,35128],{"class":54,"line":80},[52,35129,597],{"emptyLinePlaceholder":171},[52,35131,35132,35134,35136,35138,35140,35142],{"class":54,"line":108},[52,35133,1721],{"class":231},[52,35135,1724],{"class":371},[52,35137,1727],{"class":231},[52,35139,1730],{"class":231},[52,35141,1733],{"class":66},[52,35143,1736],{"class":58},[52,35145,35146],{"class":54,"line":118},[52,35147,1751],{"class":58},[52,35149,35150,35152,35155,35157,35159],{"class":54,"line":594},[52,35151,1756],{"class":58},[52,35153,35154],{"class":73},"'Ellipse'",[52,35156,1762],{"class":58},[52,35158,7886],{"class":73},[52,35160,1768],{"class":58},[52,35162,35163],{"class":54,"line":600},[52,35164,1773],{"class":58},[52,35166,35167],{"class":54,"line":606},[52,35168,1778],{"class":58},[156,35170,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":35172},[35173,35174],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ellipse",{"title":34937,"description":34945},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":35181,"title":18481,"body":35182,"category":32398,"componentType":20848,"description":35189,"extension":168,"meta":35449,"navigation":171,"path":35450,"requiresChild":171,"seo":35451,"stem":35452,"__hash__":35453},"components/docs/components/Emboss.md",{"type":8,"value":35183,"toc":35445},[35184,35187,35190,35192,35194,35197,35199,35443],[11,35185,18481],{"id":35186},"emboss",[15,35188,35189],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[26901,35191],{"component":18481},[23,35193,26905],{"id":21503},[26907,35195],{":props":35196},"[{\"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,35198,26913],{"id":26912},[217,35200,35201,35246,35290,35334,35378],{":tabs":1543},[43,35202,35204],{"className":45,"code":35203,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[31,35205,35206,35214,35222,35230,35238],{"__ignoreMap":48},[52,35207,35208,35210,35212],{"class":54,"line":55},[52,35209,59],{"class":58},[52,35211,63],{"class":62},[52,35213,77],{"class":58},[52,35215,35216,35218,35220],{"class":54,"line":80},[52,35217,83],{"class":58},[52,35219,18481],{"class":62},[52,35221,77],{"class":58},[52,35223,35224,35226,35228],{"class":54,"line":108},[52,35225,2213],{"class":58},[52,35227,2216],{"class":62},[52,35229,105],{"class":58},[52,35231,35232,35234,35236],{"class":54,"line":118},[52,35233,2230],{"class":58},[52,35235,18481],{"class":62},[52,35237,77],{"class":58},[52,35239,35240,35242,35244],{"class":54,"line":594},[52,35241,121],{"class":58},[52,35243,63],{"class":62},[52,35245,77],{"class":58},[43,35247,35248],{"className":360,"code":35203,"language":362,"meta":48,"style":48},[31,35249,35250,35258,35266,35274,35282],{"__ignoreMap":48},[52,35251,35252,35254,35256],{"class":54,"line":55},[52,35253,59],{"class":58},[52,35255,63],{"class":371},[52,35257,77],{"class":58},[52,35259,35260,35262,35264],{"class":54,"line":80},[52,35261,83],{"class":58},[52,35263,18481],{"class":371},[52,35265,77],{"class":58},[52,35267,35268,35270,35272],{"class":54,"line":108},[52,35269,2213],{"class":58},[52,35271,2216],{"class":371},[52,35273,105],{"class":58},[52,35275,35276,35278,35280],{"class":54,"line":118},[52,35277,2230],{"class":58},[52,35279,18481],{"class":371},[52,35281,77],{"class":58},[52,35283,35284,35286,35288],{"class":54,"line":594},[52,35285,121],{"class":58},[52,35287,63],{"class":371},[52,35289,77],{"class":58},[43,35291,35292],{"className":2507,"code":35203,"language":2509,"meta":48,"style":48},[31,35293,35294,35302,35310,35318,35326],{"__ignoreMap":48},[52,35295,35296,35298,35300],{"class":54,"line":55},[52,35297,59],{"class":58},[52,35299,63],{"class":371},[52,35301,77],{"class":58},[52,35303,35304,35306,35308],{"class":54,"line":80},[52,35305,83],{"class":58},[52,35307,18481],{"class":371},[52,35309,77],{"class":58},[52,35311,35312,35314,35316],{"class":54,"line":108},[52,35313,2213],{"class":58},[52,35315,2216],{"class":371},[52,35317,105],{"class":58},[52,35319,35320,35322,35324],{"class":54,"line":118},[52,35321,2230],{"class":58},[52,35323,18481],{"class":371},[52,35325,77],{"class":58},[52,35327,35328,35330,35332],{"class":54,"line":594},[52,35329,121],{"class":58},[52,35331,63],{"class":371},[52,35333,77],{"class":58},[43,35335,35336],{"className":419,"code":35203,"language":420,"meta":48,"style":48},[31,35337,35338,35346,35354,35362,35370],{"__ignoreMap":48},[52,35339,35340,35342,35344],{"class":54,"line":55},[52,35341,59],{"class":58},[52,35343,63],{"class":371},[52,35345,77],{"class":58},[52,35347,35348,35350,35352],{"class":54,"line":80},[52,35349,83],{"class":58},[52,35351,18481],{"class":371},[52,35353,77],{"class":58},[52,35355,35356,35358,35360],{"class":54,"line":108},[52,35357,2213],{"class":58},[52,35359,2216],{"class":371},[52,35361,105],{"class":58},[52,35363,35364,35366,35368],{"class":54,"line":118},[52,35365,2230],{"class":58},[52,35367,18481],{"class":371},[52,35369,77],{"class":58},[52,35371,35372,35374,35376],{"class":54,"line":594},[52,35373,121],{"class":58},[52,35375,63],{"class":371},[52,35377,77],{"class":58},[43,35379,35381],{"className":222,"code":35380,"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,35382,35383,35393,35397,35411,35415,35423,35431,35435,35439],{"__ignoreMap":48},[52,35384,35385,35387,35389,35391],{"class":54,"line":55},[52,35386,232],{"class":231},[52,35388,9231],{"class":58},[52,35390,238],{"class":231},[52,35392,9236],{"class":73},[52,35394,35395],{"class":54,"line":80},[52,35396,597],{"emptyLinePlaceholder":171},[52,35398,35399,35401,35403,35405,35407,35409],{"class":54,"line":108},[52,35400,1721],{"class":231},[52,35402,1724],{"class":371},[52,35404,1727],{"class":231},[52,35406,1730],{"class":231},[52,35408,1733],{"class":66},[52,35410,1736],{"class":58},[52,35412,35413],{"class":54,"line":118},[52,35414,1751],{"class":58},[52,35416,35417,35419,35421],{"class":54,"line":594},[52,35418,1756],{"class":58},[52,35420,19129],{"class":73},[52,35422,4722],{"class":58},[52,35424,35425,35427,35429],{"class":54,"line":600},[52,35426,4727],{"class":58},[52,35428,2869],{"class":73},[52,35430,2129],{"class":58},[52,35432,35433],{"class":54,"line":606},[52,35434,4744],{"class":58},[52,35436,35437],{"class":54,"line":653},[52,35438,1773],{"class":58},[52,35440,35441],{"class":54,"line":662},[52,35442,1778],{"class":58},[156,35444,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35446},[35447,35448],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/emboss",{"title":18481,"description":35189},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":35455,"title":35456,"body":35457,"category":27760,"componentType":20842,"description":35464,"extension":168,"meta":35649,"navigation":171,"path":35650,"requiresChild":27763,"seo":35651,"stem":35652,"__hash__":35653},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":35458,"toc":35645},[35459,35462,35465,35467,35469,35472,35474,35643],[11,35460,35456],{"id":35461},"fallinglines",[15,35463,35464],{},"Directional falling lines with a leading-to-trailing color fade",[26901,35466],{"component":35456},[23,35468,26905],{"id":21503},[26907,35470],{":props":35471},"[{\"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,35473,26913],{"id":26912},[217,35475,35476,35505,35533,35561,35589],{":tabs":1543},[43,35477,35479],{"className":45,"code":35478,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[31,35480,35481,35489,35497],{"__ignoreMap":48},[52,35482,35483,35485,35487],{"class":54,"line":55},[52,35484,59],{"class":58},[52,35486,63],{"class":62},[52,35488,77],{"class":58},[52,35490,35491,35493,35495],{"class":54,"line":80},[52,35492,83],{"class":58},[52,35494,35456],{"class":62},[52,35496,105],{"class":58},[52,35498,35499,35501,35503],{"class":54,"line":108},[52,35500,121],{"class":58},[52,35502,63],{"class":62},[52,35504,77],{"class":58},[43,35506,35507],{"className":360,"code":35478,"language":362,"meta":48,"style":48},[31,35508,35509,35517,35525],{"__ignoreMap":48},[52,35510,35511,35513,35515],{"class":54,"line":55},[52,35512,59],{"class":58},[52,35514,63],{"class":371},[52,35516,77],{"class":58},[52,35518,35519,35521,35523],{"class":54,"line":80},[52,35520,83],{"class":58},[52,35522,35456],{"class":371},[52,35524,105],{"class":58},[52,35526,35527,35529,35531],{"class":54,"line":108},[52,35528,121],{"class":58},[52,35530,63],{"class":371},[52,35532,77],{"class":58},[43,35534,35535],{"className":2507,"code":35478,"language":2509,"meta":48,"style":48},[31,35536,35537,35545,35553],{"__ignoreMap":48},[52,35538,35539,35541,35543],{"class":54,"line":55},[52,35540,59],{"class":58},[52,35542,63],{"class":371},[52,35544,77],{"class":58},[52,35546,35547,35549,35551],{"class":54,"line":80},[52,35548,83],{"class":58},[52,35550,35456],{"class":371},[52,35552,105],{"class":58},[52,35554,35555,35557,35559],{"class":54,"line":108},[52,35556,121],{"class":58},[52,35558,63],{"class":371},[52,35560,77],{"class":58},[43,35562,35563],{"className":419,"code":35478,"language":420,"meta":48,"style":48},[31,35564,35565,35573,35581],{"__ignoreMap":48},[52,35566,35567,35569,35571],{"class":54,"line":55},[52,35568,59],{"class":58},[52,35570,63],{"class":371},[52,35572,77],{"class":58},[52,35574,35575,35577,35579],{"class":54,"line":80},[52,35576,83],{"class":58},[52,35578,35456],{"class":371},[52,35580,105],{"class":58},[52,35582,35583,35585,35587],{"class":54,"line":108},[52,35584,121],{"class":58},[52,35586,63],{"class":371},[52,35588,77],{"class":58},[43,35590,35592],{"className":222,"code":35591,"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,35593,35594,35604,35608,35622,35626,35635,35639],{"__ignoreMap":48},[52,35595,35596,35598,35600,35602],{"class":54,"line":55},[52,35597,232],{"class":231},[52,35599,9231],{"class":58},[52,35601,238],{"class":231},[52,35603,9236],{"class":73},[52,35605,35606],{"class":54,"line":80},[52,35607,597],{"emptyLinePlaceholder":171},[52,35609,35610,35612,35614,35616,35618,35620],{"class":54,"line":108},[52,35611,1721],{"class":231},[52,35613,1724],{"class":371},[52,35615,1727],{"class":231},[52,35617,1730],{"class":231},[52,35619,1733],{"class":66},[52,35621,1736],{"class":58},[52,35623,35624],{"class":54,"line":118},[52,35625,1751],{"class":58},[52,35627,35628,35630,35633],{"class":54,"line":594},[52,35629,1756],{"class":58},[52,35631,35632],{"class":73},"'FallingLines'",[52,35634,2129],{"class":58},[52,35636,35637],{"class":54,"line":600},[52,35638,1773],{"class":58},[52,35640,35641],{"class":54,"line":606},[52,35642,1778],{"class":58},[156,35644,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35646},[35647,35648],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fallinglines",{"title":35456,"description":35464},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":35655,"title":35656,"body":35657,"category":27503,"componentType":20848,"description":35664,"extension":168,"meta":35925,"navigation":171,"path":35926,"requiresChild":171,"seo":35927,"stem":35928,"__hash__":35929},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":35658,"toc":35921},[35659,35662,35665,35667,35669,35672,35674,35919],[11,35660,35656],{"id":35661},"filmgrain",[15,35663,35664],{},"Analog film grain texture overlay",[26901,35666],{"component":35656},[23,35668,26905],{"id":21503},[26907,35670],{":props":35671},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"}]",[23,35673,26913],{"id":26912},[217,35675,35676,35721,35765,35809,35853],{":tabs":1543},[43,35677,35679],{"className":45,"code":35678,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[31,35680,35681,35689,35697,35705,35713],{"__ignoreMap":48},[52,35682,35683,35685,35687],{"class":54,"line":55},[52,35684,59],{"class":58},[52,35686,63],{"class":62},[52,35688,77],{"class":58},[52,35690,35691,35693,35695],{"class":54,"line":80},[52,35692,83],{"class":58},[52,35694,35656],{"class":62},[52,35696,77],{"class":58},[52,35698,35699,35701,35703],{"class":54,"line":108},[52,35700,2213],{"class":58},[52,35702,2216],{"class":62},[52,35704,105],{"class":58},[52,35706,35707,35709,35711],{"class":54,"line":118},[52,35708,2230],{"class":58},[52,35710,35656],{"class":62},[52,35712,77],{"class":58},[52,35714,35715,35717,35719],{"class":54,"line":594},[52,35716,121],{"class":58},[52,35718,63],{"class":62},[52,35720,77],{"class":58},[43,35722,35723],{"className":360,"code":35678,"language":362,"meta":48,"style":48},[31,35724,35725,35733,35741,35749,35757],{"__ignoreMap":48},[52,35726,35727,35729,35731],{"class":54,"line":55},[52,35728,59],{"class":58},[52,35730,63],{"class":371},[52,35732,77],{"class":58},[52,35734,35735,35737,35739],{"class":54,"line":80},[52,35736,83],{"class":58},[52,35738,35656],{"class":371},[52,35740,77],{"class":58},[52,35742,35743,35745,35747],{"class":54,"line":108},[52,35744,2213],{"class":58},[52,35746,2216],{"class":371},[52,35748,105],{"class":58},[52,35750,35751,35753,35755],{"class":54,"line":118},[52,35752,2230],{"class":58},[52,35754,35656],{"class":371},[52,35756,77],{"class":58},[52,35758,35759,35761,35763],{"class":54,"line":594},[52,35760,121],{"class":58},[52,35762,63],{"class":371},[52,35764,77],{"class":58},[43,35766,35767],{"className":2507,"code":35678,"language":2509,"meta":48,"style":48},[31,35768,35769,35777,35785,35793,35801],{"__ignoreMap":48},[52,35770,35771,35773,35775],{"class":54,"line":55},[52,35772,59],{"class":58},[52,35774,63],{"class":371},[52,35776,77],{"class":58},[52,35778,35779,35781,35783],{"class":54,"line":80},[52,35780,83],{"class":58},[52,35782,35656],{"class":371},[52,35784,77],{"class":58},[52,35786,35787,35789,35791],{"class":54,"line":108},[52,35788,2213],{"class":58},[52,35790,2216],{"class":371},[52,35792,105],{"class":58},[52,35794,35795,35797,35799],{"class":54,"line":118},[52,35796,2230],{"class":58},[52,35798,35656],{"class":371},[52,35800,77],{"class":58},[52,35802,35803,35805,35807],{"class":54,"line":594},[52,35804,121],{"class":58},[52,35806,63],{"class":371},[52,35808,77],{"class":58},[43,35810,35811],{"className":419,"code":35678,"language":420,"meta":48,"style":48},[31,35812,35813,35821,35829,35837,35845],{"__ignoreMap":48},[52,35814,35815,35817,35819],{"class":54,"line":55},[52,35816,59],{"class":58},[52,35818,63],{"class":371},[52,35820,77],{"class":58},[52,35822,35823,35825,35827],{"class":54,"line":80},[52,35824,83],{"class":58},[52,35826,35656],{"class":371},[52,35828,77],{"class":58},[52,35830,35831,35833,35835],{"class":54,"line":108},[52,35832,2213],{"class":58},[52,35834,2216],{"class":371},[52,35836,105],{"class":58},[52,35838,35839,35841,35843],{"class":54,"line":118},[52,35840,2230],{"class":58},[52,35842,35656],{"class":371},[52,35844,77],{"class":58},[52,35846,35847,35849,35851],{"class":54,"line":594},[52,35848,121],{"class":58},[52,35850,63],{"class":371},[52,35852,77],{"class":58},[43,35854,35856],{"className":222,"code":35855,"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,35857,35858,35868,35872,35886,35890,35899,35907,35911,35915],{"__ignoreMap":48},[52,35859,35860,35862,35864,35866],{"class":54,"line":55},[52,35861,232],{"class":231},[52,35863,9231],{"class":58},[52,35865,238],{"class":231},[52,35867,9236],{"class":73},[52,35869,35870],{"class":54,"line":80},[52,35871,597],{"emptyLinePlaceholder":171},[52,35873,35874,35876,35878,35880,35882,35884],{"class":54,"line":108},[52,35875,1721],{"class":231},[52,35877,1724],{"class":371},[52,35879,1727],{"class":231},[52,35881,1730],{"class":231},[52,35883,1733],{"class":66},[52,35885,1736],{"class":58},[52,35887,35888],{"class":54,"line":118},[52,35889,1751],{"class":58},[52,35891,35892,35894,35897],{"class":54,"line":594},[52,35893,1756],{"class":58},[52,35895,35896],{"class":73},"'FilmGrain'",[52,35898,4722],{"class":58},[52,35900,35901,35903,35905],{"class":54,"line":600},[52,35902,4727],{"class":58},[52,35904,2869],{"class":73},[52,35906,2129],{"class":58},[52,35908,35909],{"class":54,"line":606},[52,35910,4744],{"class":58},[52,35912,35913],{"class":54,"line":653},[52,35914,1773],{"class":58},[52,35916,35917],{"class":54,"line":662},[52,35918,1778],{"class":58},[156,35920,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35922},[35923,35924],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/filmgrain",{"title":35656,"description":35664},"docs/components/FilmGrain","oDbJl1STzhPHE6Df_wrMx0Zjj08jAQ3NPWF6sPUQzvw",{"id":35931,"title":35932,"body":35933,"category":27760,"componentType":20842,"description":35940,"extension":168,"meta":36125,"navigation":171,"path":36126,"requiresChild":27763,"seo":36127,"stem":36128,"__hash__":36129},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":35934,"toc":36121},[35935,35938,35941,35943,35945,35948,35950,36119],[11,35936,35932],{"id":35937},"floatingparticles",[15,35939,35940],{},"Animated floating particles with twinkle effects",[26901,35942],{"component":35932},[23,35944,26905],{"id":21503},[26907,35946],{":props":35947},"[{\"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,35949,26913],{"id":26912},[217,35951,35952,35981,36009,36037,36065],{":tabs":1543},[43,35953,35955],{"className":45,"code":35954,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[31,35956,35957,35965,35973],{"__ignoreMap":48},[52,35958,35959,35961,35963],{"class":54,"line":55},[52,35960,59],{"class":58},[52,35962,63],{"class":62},[52,35964,77],{"class":58},[52,35966,35967,35969,35971],{"class":54,"line":80},[52,35968,83],{"class":58},[52,35970,35932],{"class":62},[52,35972,105],{"class":58},[52,35974,35975,35977,35979],{"class":54,"line":108},[52,35976,121],{"class":58},[52,35978,63],{"class":62},[52,35980,77],{"class":58},[43,35982,35983],{"className":360,"code":35954,"language":362,"meta":48,"style":48},[31,35984,35985,35993,36001],{"__ignoreMap":48},[52,35986,35987,35989,35991],{"class":54,"line":55},[52,35988,59],{"class":58},[52,35990,63],{"class":371},[52,35992,77],{"class":58},[52,35994,35995,35997,35999],{"class":54,"line":80},[52,35996,83],{"class":58},[52,35998,35932],{"class":371},[52,36000,105],{"class":58},[52,36002,36003,36005,36007],{"class":54,"line":108},[52,36004,121],{"class":58},[52,36006,63],{"class":371},[52,36008,77],{"class":58},[43,36010,36011],{"className":2507,"code":35954,"language":2509,"meta":48,"style":48},[31,36012,36013,36021,36029],{"__ignoreMap":48},[52,36014,36015,36017,36019],{"class":54,"line":55},[52,36016,59],{"class":58},[52,36018,63],{"class":371},[52,36020,77],{"class":58},[52,36022,36023,36025,36027],{"class":54,"line":80},[52,36024,83],{"class":58},[52,36026,35932],{"class":371},[52,36028,105],{"class":58},[52,36030,36031,36033,36035],{"class":54,"line":108},[52,36032,121],{"class":58},[52,36034,63],{"class":371},[52,36036,77],{"class":58},[43,36038,36039],{"className":419,"code":35954,"language":420,"meta":48,"style":48},[31,36040,36041,36049,36057],{"__ignoreMap":48},[52,36042,36043,36045,36047],{"class":54,"line":55},[52,36044,59],{"class":58},[52,36046,63],{"class":371},[52,36048,77],{"class":58},[52,36050,36051,36053,36055],{"class":54,"line":80},[52,36052,83],{"class":58},[52,36054,35932],{"class":371},[52,36056,105],{"class":58},[52,36058,36059,36061,36063],{"class":54,"line":108},[52,36060,121],{"class":58},[52,36062,63],{"class":371},[52,36064,77],{"class":58},[43,36066,36068],{"className":222,"code":36067,"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,36069,36070,36080,36084,36098,36102,36111,36115],{"__ignoreMap":48},[52,36071,36072,36074,36076,36078],{"class":54,"line":55},[52,36073,232],{"class":231},[52,36075,9231],{"class":58},[52,36077,238],{"class":231},[52,36079,9236],{"class":73},[52,36081,36082],{"class":54,"line":80},[52,36083,597],{"emptyLinePlaceholder":171},[52,36085,36086,36088,36090,36092,36094,36096],{"class":54,"line":108},[52,36087,1721],{"class":231},[52,36089,1724],{"class":371},[52,36091,1727],{"class":231},[52,36093,1730],{"class":231},[52,36095,1733],{"class":66},[52,36097,1736],{"class":58},[52,36099,36100],{"class":54,"line":118},[52,36101,1751],{"class":58},[52,36103,36104,36106,36109],{"class":54,"line":594},[52,36105,1756],{"class":58},[52,36107,36108],{"class":73},"'FloatingParticles'",[52,36110,2129],{"class":58},[52,36112,36113],{"class":54,"line":600},[52,36114,1773],{"class":58},[52,36116,36117],{"class":54,"line":606},[52,36118,1778],{"class":58},[156,36120,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36122},[36123,36124],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/floatingparticles",{"title":35932,"description":35940},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":36131,"title":36132,"body":36133,"category":29105,"componentType":20848,"description":36140,"extension":168,"meta":36401,"navigation":171,"path":36402,"requiresChild":171,"seo":36403,"stem":36404,"__hash__":36405},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":36134,"toc":36397},[36135,36138,36141,36143,36145,36148,36150,36395],[11,36136,36132],{"id":36137},"flowfield",[15,36139,36140],{},"Fluid-like distortion with constant smooth motion",[26901,36142],{"component":36132},[23,36144,26905],{"id":21503},[26907,36146],{":props":36147},"[{\"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,36149,26913],{"id":26912},[217,36151,36152,36197,36241,36285,36329],{":tabs":1543},[43,36153,36155],{"className":45,"code":36154,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[31,36156,36157,36165,36173,36181,36189],{"__ignoreMap":48},[52,36158,36159,36161,36163],{"class":54,"line":55},[52,36160,59],{"class":58},[52,36162,63],{"class":62},[52,36164,77],{"class":58},[52,36166,36167,36169,36171],{"class":54,"line":80},[52,36168,83],{"class":58},[52,36170,36132],{"class":62},[52,36172,77],{"class":58},[52,36174,36175,36177,36179],{"class":54,"line":108},[52,36176,2213],{"class":58},[52,36178,2216],{"class":62},[52,36180,105],{"class":58},[52,36182,36183,36185,36187],{"class":54,"line":118},[52,36184,2230],{"class":58},[52,36186,36132],{"class":62},[52,36188,77],{"class":58},[52,36190,36191,36193,36195],{"class":54,"line":594},[52,36192,121],{"class":58},[52,36194,63],{"class":62},[52,36196,77],{"class":58},[43,36198,36199],{"className":360,"code":36154,"language":362,"meta":48,"style":48},[31,36200,36201,36209,36217,36225,36233],{"__ignoreMap":48},[52,36202,36203,36205,36207],{"class":54,"line":55},[52,36204,59],{"class":58},[52,36206,63],{"class":371},[52,36208,77],{"class":58},[52,36210,36211,36213,36215],{"class":54,"line":80},[52,36212,83],{"class":58},[52,36214,36132],{"class":371},[52,36216,77],{"class":58},[52,36218,36219,36221,36223],{"class":54,"line":108},[52,36220,2213],{"class":58},[52,36222,2216],{"class":371},[52,36224,105],{"class":58},[52,36226,36227,36229,36231],{"class":54,"line":118},[52,36228,2230],{"class":58},[52,36230,36132],{"class":371},[52,36232,77],{"class":58},[52,36234,36235,36237,36239],{"class":54,"line":594},[52,36236,121],{"class":58},[52,36238,63],{"class":371},[52,36240,77],{"class":58},[43,36242,36243],{"className":2507,"code":36154,"language":2509,"meta":48,"style":48},[31,36244,36245,36253,36261,36269,36277],{"__ignoreMap":48},[52,36246,36247,36249,36251],{"class":54,"line":55},[52,36248,59],{"class":58},[52,36250,63],{"class":371},[52,36252,77],{"class":58},[52,36254,36255,36257,36259],{"class":54,"line":80},[52,36256,83],{"class":58},[52,36258,36132],{"class":371},[52,36260,77],{"class":58},[52,36262,36263,36265,36267],{"class":54,"line":108},[52,36264,2213],{"class":58},[52,36266,2216],{"class":371},[52,36268,105],{"class":58},[52,36270,36271,36273,36275],{"class":54,"line":118},[52,36272,2230],{"class":58},[52,36274,36132],{"class":371},[52,36276,77],{"class":58},[52,36278,36279,36281,36283],{"class":54,"line":594},[52,36280,121],{"class":58},[52,36282,63],{"class":371},[52,36284,77],{"class":58},[43,36286,36287],{"className":419,"code":36154,"language":420,"meta":48,"style":48},[31,36288,36289,36297,36305,36313,36321],{"__ignoreMap":48},[52,36290,36291,36293,36295],{"class":54,"line":55},[52,36292,59],{"class":58},[52,36294,63],{"class":371},[52,36296,77],{"class":58},[52,36298,36299,36301,36303],{"class":54,"line":80},[52,36300,83],{"class":58},[52,36302,36132],{"class":371},[52,36304,77],{"class":58},[52,36306,36307,36309,36311],{"class":54,"line":108},[52,36308,2213],{"class":58},[52,36310,2216],{"class":371},[52,36312,105],{"class":58},[52,36314,36315,36317,36319],{"class":54,"line":118},[52,36316,2230],{"class":58},[52,36318,36132],{"class":371},[52,36320,77],{"class":58},[52,36322,36323,36325,36327],{"class":54,"line":594},[52,36324,121],{"class":58},[52,36326,63],{"class":371},[52,36328,77],{"class":58},[43,36330,36332],{"className":222,"code":36331,"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,36333,36334,36344,36348,36362,36366,36375,36383,36387,36391],{"__ignoreMap":48},[52,36335,36336,36338,36340,36342],{"class":54,"line":55},[52,36337,232],{"class":231},[52,36339,9231],{"class":58},[52,36341,238],{"class":231},[52,36343,9236],{"class":73},[52,36345,36346],{"class":54,"line":80},[52,36347,597],{"emptyLinePlaceholder":171},[52,36349,36350,36352,36354,36356,36358,36360],{"class":54,"line":108},[52,36351,1721],{"class":231},[52,36353,1724],{"class":371},[52,36355,1727],{"class":231},[52,36357,1730],{"class":231},[52,36359,1733],{"class":66},[52,36361,1736],{"class":58},[52,36363,36364],{"class":54,"line":118},[52,36365,1751],{"class":58},[52,36367,36368,36370,36373],{"class":54,"line":594},[52,36369,1756],{"class":58},[52,36371,36372],{"class":73},"'FlowField'",[52,36374,4722],{"class":58},[52,36376,36377,36379,36381],{"class":54,"line":600},[52,36378,4727],{"class":58},[52,36380,2869],{"class":73},[52,36382,2129],{"class":58},[52,36384,36385],{"class":54,"line":606},[52,36386,4744],{"class":58},[52,36388,36389],{"class":54,"line":653},[52,36390,1773],{"class":58},[52,36392,36393],{"class":54,"line":662},[52,36394,1778],{"class":58},[156,36396,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36398},[36399,36400],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flowfield",{"title":36132,"description":36140},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":36407,"title":36408,"body":36409,"category":30727,"componentType":20842,"description":36416,"extension":168,"meta":36694,"navigation":171,"path":36695,"requiresChild":27763,"seo":36696,"stem":36697,"__hash__":36698},"components/docs/components/Flower.md","Flower",{"type":8,"value":36410,"toc":36690},[36411,36414,36417,36419,36421,36424,36426,36688],[11,36412,36408],{"id":36413},"flower",[15,36415,36416],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[26901,36418],{"component":36408},[23,36420,26905],{"id":21503},[26907,36422],{":props":36423},"[{\"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,36425,26913],{"id":26912},[217,36427,36428,36477,36528,36576,36626],{":tabs":1543},[43,36429,36431],{"className":45,"code":36430,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,36432,36433,36441,36448,36456,36465,36469],{"__ignoreMap":48},[52,36434,36435,36437,36439],{"class":54,"line":55},[52,36436,59],{"class":58},[52,36438,63],{"class":62},[52,36440,77],{"class":58},[52,36442,36443,36445],{"class":54,"line":80},[52,36444,83],{"class":58},[52,36446,36447],{"class":62},"Flower\n",[52,36449,36450,36452,36454],{"class":54,"line":108},[52,36451,7351],{"class":66},[52,36453,70],{"class":58},[52,36455,7307],{"class":73},[52,36457,36458,36460,36462],{"class":54,"line":118},[52,36459,14901],{"class":66},[52,36461,70],{"class":58},[52,36463,36464],{"class":73},"\"0.4\"\n",[52,36466,36467],{"class":54,"line":594},[52,36468,1224],{"class":58},[52,36470,36471,36473,36475],{"class":54,"line":600},[52,36472,121],{"class":58},[52,36474,63],{"class":62},[52,36476,77],{"class":58},[43,36478,36480],{"className":360,"code":36479,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,36481,36482,36490,36496,36504,36516,36520],{"__ignoreMap":48},[52,36483,36484,36486,36488],{"class":54,"line":55},[52,36485,59],{"class":58},[52,36487,63],{"class":371},[52,36489,77],{"class":58},[52,36491,36492,36494],{"class":54,"line":80},[52,36493,83],{"class":58},[52,36495,36447],{"class":371},[52,36497,36498,36500,36502],{"class":54,"line":108},[52,36499,7351],{"class":66},[52,36501,70],{"class":231},[52,36503,7307],{"class":73},[52,36505,36506,36508,36510,36512,36514],{"class":54,"line":118},[52,36507,7361],{"class":66},[52,36509,70],{"class":231},[52,36511,723],{"class":58},[52,36513,5963],{"class":371},[52,36515,729],{"class":58},[52,36517,36518],{"class":54,"line":594},[52,36519,1224],{"class":58},[52,36521,36522,36524,36526],{"class":54,"line":600},[52,36523,121],{"class":58},[52,36525,63],{"class":371},[52,36527,77],{"class":58},[43,36529,36530],{"className":2507,"code":36479,"language":2509,"meta":48,"style":48},[31,36531,36532,36540,36546,36554,36564,36568],{"__ignoreMap":48},[52,36533,36534,36536,36538],{"class":54,"line":55},[52,36535,59],{"class":58},[52,36537,63],{"class":371},[52,36539,77],{"class":58},[52,36541,36542,36544],{"class":54,"line":80},[52,36543,83],{"class":58},[52,36545,36447],{"class":371},[52,36547,36548,36550,36552],{"class":54,"line":108},[52,36549,7351],{"class":66},[52,36551,70],{"class":58},[52,36553,7307],{"class":73},[52,36555,36556,36558,36560,36562],{"class":54,"line":118},[52,36557,7361],{"class":66},[52,36559,24845],{"class":58},[52,36561,5963],{"class":371},[52,36563,729],{"class":58},[52,36565,36566],{"class":54,"line":594},[52,36567,1224],{"class":58},[52,36569,36570,36572,36574],{"class":54,"line":600},[52,36571,121],{"class":58},[52,36573,63],{"class":371},[52,36575,77],{"class":58},[43,36577,36578],{"className":419,"code":36479,"language":420,"meta":48,"style":48},[31,36579,36580,36588,36594,36602,36614,36618],{"__ignoreMap":48},[52,36581,36582,36584,36586],{"class":54,"line":55},[52,36583,59],{"class":58},[52,36585,63],{"class":371},[52,36587,77],{"class":58},[52,36589,36590,36592],{"class":54,"line":80},[52,36591,83],{"class":58},[52,36593,36447],{"class":371},[52,36595,36596,36598,36600],{"class":54,"line":108},[52,36597,7351],{"class":66},[52,36599,70],{"class":231},[52,36601,7307],{"class":73},[52,36603,36604,36606,36608,36610,36612],{"class":54,"line":118},[52,36605,7361],{"class":66},[52,36607,70],{"class":231},[52,36609,723],{"class":58},[52,36611,5963],{"class":371},[52,36613,729],{"class":58},[52,36615,36616],{"class":54,"line":594},[52,36617,1224],{"class":58},[52,36619,36620,36622,36624],{"class":54,"line":600},[52,36621,121],{"class":58},[52,36623,63],{"class":371},[52,36625,77],{"class":58},[43,36627,36629],{"className":222,"code":36628,"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,36630,36631,36641,36645,36659,36663,36680,36684],{"__ignoreMap":48},[52,36632,36633,36635,36637,36639],{"class":54,"line":55},[52,36634,232],{"class":231},[52,36636,9231],{"class":58},[52,36638,238],{"class":231},[52,36640,9236],{"class":73},[52,36642,36643],{"class":54,"line":80},[52,36644,597],{"emptyLinePlaceholder":171},[52,36646,36647,36649,36651,36653,36655,36657],{"class":54,"line":108},[52,36648,1721],{"class":231},[52,36650,1724],{"class":371},[52,36652,1727],{"class":231},[52,36654,1730],{"class":231},[52,36656,1733],{"class":66},[52,36658,1736],{"class":58},[52,36660,36661],{"class":54,"line":118},[52,36662,1751],{"class":58},[52,36664,36665,36667,36670,36672,36674,36676,36678],{"class":54,"line":594},[52,36666,1756],{"class":58},[52,36668,36669],{"class":73},"'Flower'",[52,36671,1762],{"class":58},[52,36673,7886],{"class":73},[52,36675,4278],{"class":58},[52,36677,5963],{"class":371},[52,36679,1768],{"class":58},[52,36681,36682],{"class":54,"line":600},[52,36683,1773],{"class":58},[52,36685,36686],{"class":54,"line":606},[52,36687,1778],{"class":58},[156,36689,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":36691},[36692,36693],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flower",{"title":36408,"description":36416},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":36700,"title":36701,"body":36702,"category":27760,"componentType":20842,"description":36709,"extension":168,"meta":36894,"navigation":171,"path":36895,"requiresChild":27763,"seo":36896,"stem":36897,"__hash__":36898},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":36703,"toc":36890},[36704,36707,36710,36712,36714,36717,36719,36888],[11,36705,36701],{"id":36706},"flowinggradient",[15,36708,36709],{},"Liquid silk gradient with organic flowing color bands",[26901,36711],{"component":36701},[23,36713,26905],{"id":21503},[26907,36715],{":props":36716},"[{\"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,36718,26913],{"id":26912},[217,36720,36721,36750,36778,36806,36834],{":tabs":1543},[43,36722,36724],{"className":45,"code":36723,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[31,36725,36726,36734,36742],{"__ignoreMap":48},[52,36727,36728,36730,36732],{"class":54,"line":55},[52,36729,59],{"class":58},[52,36731,63],{"class":62},[52,36733,77],{"class":58},[52,36735,36736,36738,36740],{"class":54,"line":80},[52,36737,83],{"class":58},[52,36739,36701],{"class":62},[52,36741,105],{"class":58},[52,36743,36744,36746,36748],{"class":54,"line":108},[52,36745,121],{"class":58},[52,36747,63],{"class":62},[52,36749,77],{"class":58},[43,36751,36752],{"className":360,"code":36723,"language":362,"meta":48,"style":48},[31,36753,36754,36762,36770],{"__ignoreMap":48},[52,36755,36756,36758,36760],{"class":54,"line":55},[52,36757,59],{"class":58},[52,36759,63],{"class":371},[52,36761,77],{"class":58},[52,36763,36764,36766,36768],{"class":54,"line":80},[52,36765,83],{"class":58},[52,36767,36701],{"class":371},[52,36769,105],{"class":58},[52,36771,36772,36774,36776],{"class":54,"line":108},[52,36773,121],{"class":58},[52,36775,63],{"class":371},[52,36777,77],{"class":58},[43,36779,36780],{"className":2507,"code":36723,"language":2509,"meta":48,"style":48},[31,36781,36782,36790,36798],{"__ignoreMap":48},[52,36783,36784,36786,36788],{"class":54,"line":55},[52,36785,59],{"class":58},[52,36787,63],{"class":371},[52,36789,77],{"class":58},[52,36791,36792,36794,36796],{"class":54,"line":80},[52,36793,83],{"class":58},[52,36795,36701],{"class":371},[52,36797,105],{"class":58},[52,36799,36800,36802,36804],{"class":54,"line":108},[52,36801,121],{"class":58},[52,36803,63],{"class":371},[52,36805,77],{"class":58},[43,36807,36808],{"className":419,"code":36723,"language":420,"meta":48,"style":48},[31,36809,36810,36818,36826],{"__ignoreMap":48},[52,36811,36812,36814,36816],{"class":54,"line":55},[52,36813,59],{"class":58},[52,36815,63],{"class":371},[52,36817,77],{"class":58},[52,36819,36820,36822,36824],{"class":54,"line":80},[52,36821,83],{"class":58},[52,36823,36701],{"class":371},[52,36825,105],{"class":58},[52,36827,36828,36830,36832],{"class":54,"line":108},[52,36829,121],{"class":58},[52,36831,63],{"class":371},[52,36833,77],{"class":58},[43,36835,36837],{"className":222,"code":36836,"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,36838,36839,36849,36853,36867,36871,36880,36884],{"__ignoreMap":48},[52,36840,36841,36843,36845,36847],{"class":54,"line":55},[52,36842,232],{"class":231},[52,36844,9231],{"class":58},[52,36846,238],{"class":231},[52,36848,9236],{"class":73},[52,36850,36851],{"class":54,"line":80},[52,36852,597],{"emptyLinePlaceholder":171},[52,36854,36855,36857,36859,36861,36863,36865],{"class":54,"line":108},[52,36856,1721],{"class":231},[52,36858,1724],{"class":371},[52,36860,1727],{"class":231},[52,36862,1730],{"class":231},[52,36864,1733],{"class":66},[52,36866,1736],{"class":58},[52,36868,36869],{"class":54,"line":118},[52,36870,1751],{"class":58},[52,36872,36873,36875,36878],{"class":54,"line":594},[52,36874,1756],{"class":58},[52,36876,36877],{"class":73},"'FlowingGradient'",[52,36879,2129],{"class":58},[52,36881,36882],{"class":54,"line":600},[52,36883,1773],{"class":58},[52,36885,36886],{"class":54,"line":606},[52,36887,1778],{"class":58},[156,36889,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36891},[36892,36893],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flowinggradient",{"title":36701,"description":36709},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":36900,"title":36901,"body":36902,"category":29105,"componentType":20848,"description":36909,"extension":168,"meta":37170,"navigation":171,"path":37171,"requiresChild":171,"seo":37172,"stem":37173,"__hash__":37174},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":36903,"toc":37166},[36904,36907,36910,36912,36914,36917,36919,37164],[11,36905,36901],{"id":36906},"form3d",[15,36908,36909],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26901,36911],{"component":36901},[23,36913,26905],{"id":21503},[26907,36915],{":props":36916},"[{\"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,36918,26913],{"id":26912},[217,36920,36921,36966,37010,37054,37098],{":tabs":1543},[43,36922,36924],{"className":45,"code":36923,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,36925,36926,36934,36942,36950,36958],{"__ignoreMap":48},[52,36927,36928,36930,36932],{"class":54,"line":55},[52,36929,59],{"class":58},[52,36931,63],{"class":62},[52,36933,77],{"class":58},[52,36935,36936,36938,36940],{"class":54,"line":80},[52,36937,83],{"class":58},[52,36939,36901],{"class":62},[52,36941,77],{"class":58},[52,36943,36944,36946,36948],{"class":54,"line":108},[52,36945,2213],{"class":58},[52,36947,2216],{"class":62},[52,36949,105],{"class":58},[52,36951,36952,36954,36956],{"class":54,"line":118},[52,36953,2230],{"class":58},[52,36955,36901],{"class":62},[52,36957,77],{"class":58},[52,36959,36960,36962,36964],{"class":54,"line":594},[52,36961,121],{"class":58},[52,36963,63],{"class":62},[52,36965,77],{"class":58},[43,36967,36968],{"className":360,"code":36923,"language":362,"meta":48,"style":48},[31,36969,36970,36978,36986,36994,37002],{"__ignoreMap":48},[52,36971,36972,36974,36976],{"class":54,"line":55},[52,36973,59],{"class":58},[52,36975,63],{"class":371},[52,36977,77],{"class":58},[52,36979,36980,36982,36984],{"class":54,"line":80},[52,36981,83],{"class":58},[52,36983,36901],{"class":371},[52,36985,77],{"class":58},[52,36987,36988,36990,36992],{"class":54,"line":108},[52,36989,2213],{"class":58},[52,36991,2216],{"class":371},[52,36993,105],{"class":58},[52,36995,36996,36998,37000],{"class":54,"line":118},[52,36997,2230],{"class":58},[52,36999,36901],{"class":371},[52,37001,77],{"class":58},[52,37003,37004,37006,37008],{"class":54,"line":594},[52,37005,121],{"class":58},[52,37007,63],{"class":371},[52,37009,77],{"class":58},[43,37011,37012],{"className":2507,"code":36923,"language":2509,"meta":48,"style":48},[31,37013,37014,37022,37030,37038,37046],{"__ignoreMap":48},[52,37015,37016,37018,37020],{"class":54,"line":55},[52,37017,59],{"class":58},[52,37019,63],{"class":371},[52,37021,77],{"class":58},[52,37023,37024,37026,37028],{"class":54,"line":80},[52,37025,83],{"class":58},[52,37027,36901],{"class":371},[52,37029,77],{"class":58},[52,37031,37032,37034,37036],{"class":54,"line":108},[52,37033,2213],{"class":58},[52,37035,2216],{"class":371},[52,37037,105],{"class":58},[52,37039,37040,37042,37044],{"class":54,"line":118},[52,37041,2230],{"class":58},[52,37043,36901],{"class":371},[52,37045,77],{"class":58},[52,37047,37048,37050,37052],{"class":54,"line":594},[52,37049,121],{"class":58},[52,37051,63],{"class":371},[52,37053,77],{"class":58},[43,37055,37056],{"className":419,"code":36923,"language":420,"meta":48,"style":48},[31,37057,37058,37066,37074,37082,37090],{"__ignoreMap":48},[52,37059,37060,37062,37064],{"class":54,"line":55},[52,37061,59],{"class":58},[52,37063,63],{"class":371},[52,37065,77],{"class":58},[52,37067,37068,37070,37072],{"class":54,"line":80},[52,37069,83],{"class":58},[52,37071,36901],{"class":371},[52,37073,77],{"class":58},[52,37075,37076,37078,37080],{"class":54,"line":108},[52,37077,2213],{"class":58},[52,37079,2216],{"class":371},[52,37081,105],{"class":58},[52,37083,37084,37086,37088],{"class":54,"line":118},[52,37085,2230],{"class":58},[52,37087,36901],{"class":371},[52,37089,77],{"class":58},[52,37091,37092,37094,37096],{"class":54,"line":594},[52,37093,121],{"class":58},[52,37095,63],{"class":371},[52,37097,77],{"class":58},[43,37099,37101],{"className":222,"code":37100,"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,37102,37103,37113,37117,37131,37135,37144,37152,37156,37160],{"__ignoreMap":48},[52,37104,37105,37107,37109,37111],{"class":54,"line":55},[52,37106,232],{"class":231},[52,37108,9231],{"class":58},[52,37110,238],{"class":231},[52,37112,9236],{"class":73},[52,37114,37115],{"class":54,"line":80},[52,37116,597],{"emptyLinePlaceholder":171},[52,37118,37119,37121,37123,37125,37127,37129],{"class":54,"line":108},[52,37120,1721],{"class":231},[52,37122,1724],{"class":371},[52,37124,1727],{"class":231},[52,37126,1730],{"class":231},[52,37128,1733],{"class":66},[52,37130,1736],{"class":58},[52,37132,37133],{"class":54,"line":118},[52,37134,1751],{"class":58},[52,37136,37137,37139,37142],{"class":54,"line":594},[52,37138,1756],{"class":58},[52,37140,37141],{"class":73},"'Form3D'",[52,37143,4722],{"class":58},[52,37145,37146,37148,37150],{"class":54,"line":600},[52,37147,4727],{"class":58},[52,37149,2869],{"class":73},[52,37151,2129],{"class":58},[52,37153,37154],{"class":54,"line":606},[52,37155,4744],{"class":58},[52,37157,37158],{"class":54,"line":653},[52,37159,1773],{"class":58},[52,37161,37162],{"class":54,"line":662},[52,37163,1778],{"class":58},[156,37165,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37167},[37168,37169],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/form3d",{"title":36901,"description":36909},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":37176,"title":18474,"body":37177,"category":32398,"componentType":20848,"description":37184,"extension":168,"meta":37444,"navigation":171,"path":37445,"requiresChild":171,"seo":37446,"stem":37447,"__hash__":37448},"components/docs/components/Glass.md",{"type":8,"value":37178,"toc":37440},[37179,37182,37185,37187,37189,37192,37194,37438],[11,37180,18474],{"id":37181},"glass",[15,37183,37184],{},"Optically realistic glass lens driven in a custom shape",[26901,37186],{"component":18474},[23,37188,26905],{"id":21503},[26907,37190],{":props":37191},"[{\"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,37193,26913],{"id":26912},[217,37195,37196,37241,37285,37329,37373],{":tabs":1543},[43,37197,37199],{"className":45,"code":37198,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[31,37200,37201,37209,37217,37225,37233],{"__ignoreMap":48},[52,37202,37203,37205,37207],{"class":54,"line":55},[52,37204,59],{"class":58},[52,37206,63],{"class":62},[52,37208,77],{"class":58},[52,37210,37211,37213,37215],{"class":54,"line":80},[52,37212,83],{"class":58},[52,37214,18474],{"class":62},[52,37216,77],{"class":58},[52,37218,37219,37221,37223],{"class":54,"line":108},[52,37220,2213],{"class":58},[52,37222,2216],{"class":62},[52,37224,105],{"class":58},[52,37226,37227,37229,37231],{"class":54,"line":118},[52,37228,2230],{"class":58},[52,37230,18474],{"class":62},[52,37232,77],{"class":58},[52,37234,37235,37237,37239],{"class":54,"line":594},[52,37236,121],{"class":58},[52,37238,63],{"class":62},[52,37240,77],{"class":58},[43,37242,37243],{"className":360,"code":37198,"language":362,"meta":48,"style":48},[31,37244,37245,37253,37261,37269,37277],{"__ignoreMap":48},[52,37246,37247,37249,37251],{"class":54,"line":55},[52,37248,59],{"class":58},[52,37250,63],{"class":371},[52,37252,77],{"class":58},[52,37254,37255,37257,37259],{"class":54,"line":80},[52,37256,83],{"class":58},[52,37258,18474],{"class":371},[52,37260,77],{"class":58},[52,37262,37263,37265,37267],{"class":54,"line":108},[52,37264,2213],{"class":58},[52,37266,2216],{"class":371},[52,37268,105],{"class":58},[52,37270,37271,37273,37275],{"class":54,"line":118},[52,37272,2230],{"class":58},[52,37274,18474],{"class":371},[52,37276,77],{"class":58},[52,37278,37279,37281,37283],{"class":54,"line":594},[52,37280,121],{"class":58},[52,37282,63],{"class":371},[52,37284,77],{"class":58},[43,37286,37287],{"className":2507,"code":37198,"language":2509,"meta":48,"style":48},[31,37288,37289,37297,37305,37313,37321],{"__ignoreMap":48},[52,37290,37291,37293,37295],{"class":54,"line":55},[52,37292,59],{"class":58},[52,37294,63],{"class":371},[52,37296,77],{"class":58},[52,37298,37299,37301,37303],{"class":54,"line":80},[52,37300,83],{"class":58},[52,37302,18474],{"class":371},[52,37304,77],{"class":58},[52,37306,37307,37309,37311],{"class":54,"line":108},[52,37308,2213],{"class":58},[52,37310,2216],{"class":371},[52,37312,105],{"class":58},[52,37314,37315,37317,37319],{"class":54,"line":118},[52,37316,2230],{"class":58},[52,37318,18474],{"class":371},[52,37320,77],{"class":58},[52,37322,37323,37325,37327],{"class":54,"line":594},[52,37324,121],{"class":58},[52,37326,63],{"class":371},[52,37328,77],{"class":58},[43,37330,37331],{"className":419,"code":37198,"language":420,"meta":48,"style":48},[31,37332,37333,37341,37349,37357,37365],{"__ignoreMap":48},[52,37334,37335,37337,37339],{"class":54,"line":55},[52,37336,59],{"class":58},[52,37338,63],{"class":371},[52,37340,77],{"class":58},[52,37342,37343,37345,37347],{"class":54,"line":80},[52,37344,83],{"class":58},[52,37346,18474],{"class":371},[52,37348,77],{"class":58},[52,37350,37351,37353,37355],{"class":54,"line":108},[52,37352,2213],{"class":58},[52,37354,2216],{"class":371},[52,37356,105],{"class":58},[52,37358,37359,37361,37363],{"class":54,"line":118},[52,37360,2230],{"class":58},[52,37362,18474],{"class":371},[52,37364,77],{"class":58},[52,37366,37367,37369,37371],{"class":54,"line":594},[52,37368,121],{"class":58},[52,37370,63],{"class":371},[52,37372,77],{"class":58},[43,37374,37376],{"className":222,"code":37375,"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,37377,37378,37388,37392,37406,37410,37418,37426,37430,37434],{"__ignoreMap":48},[52,37379,37380,37382,37384,37386],{"class":54,"line":55},[52,37381,232],{"class":231},[52,37383,9231],{"class":58},[52,37385,238],{"class":231},[52,37387,9236],{"class":73},[52,37389,37390],{"class":54,"line":80},[52,37391,597],{"emptyLinePlaceholder":171},[52,37393,37394,37396,37398,37400,37402,37404],{"class":54,"line":108},[52,37395,1721],{"class":231},[52,37397,1724],{"class":371},[52,37399,1727],{"class":231},[52,37401,1730],{"class":231},[52,37403,1733],{"class":66},[52,37405,1736],{"class":58},[52,37407,37408],{"class":54,"line":118},[52,37409,1751],{"class":58},[52,37411,37412,37414,37416],{"class":54,"line":594},[52,37413,1756],{"class":58},[52,37415,19015],{"class":73},[52,37417,4722],{"class":58},[52,37419,37420,37422,37424],{"class":54,"line":600},[52,37421,4727],{"class":58},[52,37423,2869],{"class":73},[52,37425,2129],{"class":58},[52,37427,37428],{"class":54,"line":606},[52,37429,4744],{"class":58},[52,37431,37432],{"class":54,"line":653},[52,37433,1773],{"class":58},[52,37435,37436],{"class":54,"line":662},[52,37437,1778],{"class":58},[156,37439,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37441},[37442,37443],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glass",{"title":18474,"description":37184},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":37450,"title":3936,"body":37451,"category":29105,"componentType":20848,"description":37458,"extension":168,"meta":37775,"navigation":171,"path":37776,"requiresChild":171,"seo":37777,"stem":37778,"__hash__":37779},"components/docs/components/GlassTiles.md",{"type":8,"value":37452,"toc":37771},[37453,37456,37459,37461,37463,37466,37468,37769],[11,37454,3936],{"id":37455},"glasstiles",[15,37457,37458],{},"Refraction-like distortion in a tile grid pattern",[26901,37460],{"component":3936},[23,37462,26905],{"id":21503},[26907,37464],{":props":37465},"[{\"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,37467,26913],{"id":26912},[217,37469,37470,37527,37586,37642,37700],{":tabs":1543},[43,37471,37473],{"className":45,"code":37472,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37474,37475,37483,37490,37499,37503,37511,37519],{"__ignoreMap":48},[52,37476,37477,37479,37481],{"class":54,"line":55},[52,37478,59],{"class":58},[52,37480,63],{"class":62},[52,37482,77],{"class":58},[52,37484,37485,37487],{"class":54,"line":80},[52,37486,83],{"class":58},[52,37488,37489],{"class":62},"GlassTiles\n",[52,37491,37492,37494,37496],{"class":54,"line":108},[52,37493,17870],{"class":66},[52,37495,70],{"class":58},[52,37497,37498],{"class":73},"\"2\"\n",[52,37500,37501],{"class":54,"line":118},[52,37502,26949],{"class":58},[52,37504,37505,37507,37509],{"class":54,"line":594},[52,37506,2213],{"class":58},[52,37508,2216],{"class":62},[52,37510,105],{"class":58},[52,37512,37513,37515,37517],{"class":54,"line":600},[52,37514,2230],{"class":58},[52,37516,3936],{"class":62},[52,37518,77],{"class":58},[52,37520,37521,37523,37525],{"class":54,"line":606},[52,37522,121],{"class":58},[52,37524,63],{"class":62},[52,37526,77],{"class":58},[43,37528,37530],{"className":360,"code":37529,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37531,37532,37540,37546,37558,37562,37570,37578],{"__ignoreMap":48},[52,37533,37534,37536,37538],{"class":54,"line":55},[52,37535,59],{"class":58},[52,37537,63],{"class":371},[52,37539,77],{"class":58},[52,37541,37542,37544],{"class":54,"line":80},[52,37543,83],{"class":58},[52,37545,37489],{"class":371},[52,37547,37548,37550,37552,37554,37556],{"class":54,"line":108},[52,37549,17981],{"class":66},[52,37551,70],{"class":231},[52,37553,723],{"class":58},[52,37555,4927],{"class":371},[52,37557,729],{"class":58},[52,37559,37560],{"class":54,"line":118},[52,37561,26949],{"class":58},[52,37563,37564,37566,37568],{"class":54,"line":594},[52,37565,2213],{"class":58},[52,37567,2216],{"class":371},[52,37569,105],{"class":58},[52,37571,37572,37574,37576],{"class":54,"line":600},[52,37573,2230],{"class":58},[52,37575,3936],{"class":371},[52,37577,77],{"class":58},[52,37579,37580,37582,37584],{"class":54,"line":606},[52,37581,121],{"class":58},[52,37583,63],{"class":371},[52,37585,77],{"class":58},[43,37587,37588],{"className":2507,"code":37529,"language":2509,"meta":48,"style":48},[31,37589,37590,37598,37604,37614,37618,37626,37634],{"__ignoreMap":48},[52,37591,37592,37594,37596],{"class":54,"line":55},[52,37593,59],{"class":58},[52,37595,63],{"class":371},[52,37597,77],{"class":58},[52,37599,37600,37602],{"class":54,"line":80},[52,37601,83],{"class":58},[52,37603,37489],{"class":371},[52,37605,37606,37608,37610,37612],{"class":54,"line":108},[52,37607,17981],{"class":66},[52,37609,24845],{"class":58},[52,37611,4927],{"class":371},[52,37613,729],{"class":58},[52,37615,37616],{"class":54,"line":118},[52,37617,26949],{"class":58},[52,37619,37620,37622,37624],{"class":54,"line":594},[52,37621,2213],{"class":58},[52,37623,2216],{"class":371},[52,37625,105],{"class":58},[52,37627,37628,37630,37632],{"class":54,"line":600},[52,37629,2230],{"class":58},[52,37631,3936],{"class":371},[52,37633,77],{"class":58},[52,37635,37636,37638,37640],{"class":54,"line":606},[52,37637,121],{"class":58},[52,37639,63],{"class":371},[52,37641,77],{"class":58},[43,37643,37644],{"className":419,"code":37529,"language":420,"meta":48,"style":48},[31,37645,37646,37654,37660,37672,37676,37684,37692],{"__ignoreMap":48},[52,37647,37648,37650,37652],{"class":54,"line":55},[52,37649,59],{"class":58},[52,37651,63],{"class":371},[52,37653,77],{"class":58},[52,37655,37656,37658],{"class":54,"line":80},[52,37657,83],{"class":58},[52,37659,37489],{"class":371},[52,37661,37662,37664,37666,37668,37670],{"class":54,"line":108},[52,37663,17981],{"class":66},[52,37665,70],{"class":231},[52,37667,723],{"class":58},[52,37669,4927],{"class":371},[52,37671,729],{"class":58},[52,37673,37674],{"class":54,"line":118},[52,37675,26949],{"class":58},[52,37677,37678,37680,37682],{"class":54,"line":594},[52,37679,2213],{"class":58},[52,37681,2216],{"class":371},[52,37683,105],{"class":58},[52,37685,37686,37688,37690],{"class":54,"line":600},[52,37687,2230],{"class":58},[52,37689,3936],{"class":371},[52,37691,77],{"class":58},[52,37693,37694,37696,37698],{"class":54,"line":606},[52,37695,121],{"class":58},[52,37697,63],{"class":371},[52,37699,77],{"class":58},[43,37701,37703],{"className":222,"code":37702,"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,37704,37705,37715,37719,37733,37737,37749,37757,37761,37765],{"__ignoreMap":48},[52,37706,37707,37709,37711,37713],{"class":54,"line":55},[52,37708,232],{"class":231},[52,37710,9231],{"class":58},[52,37712,238],{"class":231},[52,37714,9236],{"class":73},[52,37716,37717],{"class":54,"line":80},[52,37718,597],{"emptyLinePlaceholder":171},[52,37720,37721,37723,37725,37727,37729,37731],{"class":54,"line":108},[52,37722,1721],{"class":231},[52,37724,1724],{"class":371},[52,37726,1727],{"class":231},[52,37728,1730],{"class":231},[52,37730,1733],{"class":66},[52,37732,1736],{"class":58},[52,37734,37735],{"class":54,"line":118},[52,37736,1751],{"class":58},[52,37738,37739,37741,37743,37745,37747],{"class":54,"line":594},[52,37740,1756],{"class":58},[52,37742,4295],{"class":73},[52,37744,27194],{"class":58},[52,37746,4927],{"class":371},[52,37748,5259],{"class":58},[52,37750,37751,37753,37755],{"class":54,"line":600},[52,37752,4727],{"class":58},[52,37754,2869],{"class":73},[52,37756,2129],{"class":58},[52,37758,37759],{"class":54,"line":606},[52,37760,4744],{"class":58},[52,37762,37763],{"class":54,"line":653},[52,37764,1773],{"class":58},[52,37766,37767],{"class":54,"line":662},[52,37768,1778],{"class":58},[156,37770,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37772},[37773,37774],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glasstiles",{"title":3936,"description":37458},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":37781,"title":37782,"body":37783,"category":27503,"componentType":20848,"description":37790,"extension":168,"meta":38107,"navigation":171,"path":38108,"requiresChild":171,"seo":38109,"stem":38110,"__hash__":38111},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":37784,"toc":38103},[37785,37788,37791,37793,37795,37798,37800,38101],[11,37786,37782],{"id":37787},"glitch",[15,37789,37790],{},"Digital glitch that melts pixels and distorts colors",[26901,37792],{"component":37782},[23,37794,26905],{"id":21503},[26907,37796],{":props":37797},"[{\"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,37799,26913],{"id":26912},[217,37801,37802,37858,37917,37973,38031],{":tabs":1543},[43,37803,37805],{"className":45,"code":37804,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,37806,37807,37815,37822,37830,37834,37842,37850],{"__ignoreMap":48},[52,37808,37809,37811,37813],{"class":54,"line":55},[52,37810,59],{"class":58},[52,37812,63],{"class":62},[52,37814,77],{"class":58},[52,37816,37817,37819],{"class":54,"line":80},[52,37818,83],{"class":58},[52,37820,37821],{"class":62},"Glitch\n",[52,37823,37824,37826,37828],{"class":54,"line":108},[52,37825,17870],{"class":66},[52,37827,70],{"class":58},[52,37829,32462],{"class":73},[52,37831,37832],{"class":54,"line":118},[52,37833,26949],{"class":58},[52,37835,37836,37838,37840],{"class":54,"line":594},[52,37837,2213],{"class":58},[52,37839,2216],{"class":62},[52,37841,105],{"class":58},[52,37843,37844,37846,37848],{"class":54,"line":600},[52,37845,2230],{"class":58},[52,37847,37782],{"class":62},[52,37849,77],{"class":58},[52,37851,37852,37854,37856],{"class":54,"line":606},[52,37853,121],{"class":58},[52,37855,63],{"class":62},[52,37857,77],{"class":58},[43,37859,37861],{"className":360,"code":37860,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,37862,37863,37871,37877,37889,37893,37901,37909],{"__ignoreMap":48},[52,37864,37865,37867,37869],{"class":54,"line":55},[52,37866,59],{"class":58},[52,37868,63],{"class":371},[52,37870,77],{"class":58},[52,37872,37873,37875],{"class":54,"line":80},[52,37874,83],{"class":58},[52,37876,37821],{"class":371},[52,37878,37879,37881,37883,37885,37887],{"class":54,"line":108},[52,37880,17981],{"class":66},[52,37882,70],{"class":231},[52,37884,723],{"class":58},[52,37886,5467],{"class":371},[52,37888,729],{"class":58},[52,37890,37891],{"class":54,"line":118},[52,37892,26949],{"class":58},[52,37894,37895,37897,37899],{"class":54,"line":594},[52,37896,2213],{"class":58},[52,37898,2216],{"class":371},[52,37900,105],{"class":58},[52,37902,37903,37905,37907],{"class":54,"line":600},[52,37904,2230],{"class":58},[52,37906,37782],{"class":371},[52,37908,77],{"class":58},[52,37910,37911,37913,37915],{"class":54,"line":606},[52,37912,121],{"class":58},[52,37914,63],{"class":371},[52,37916,77],{"class":58},[43,37918,37919],{"className":2507,"code":37860,"language":2509,"meta":48,"style":48},[31,37920,37921,37929,37935,37945,37949,37957,37965],{"__ignoreMap":48},[52,37922,37923,37925,37927],{"class":54,"line":55},[52,37924,59],{"class":58},[52,37926,63],{"class":371},[52,37928,77],{"class":58},[52,37930,37931,37933],{"class":54,"line":80},[52,37932,83],{"class":58},[52,37934,37821],{"class":371},[52,37936,37937,37939,37941,37943],{"class":54,"line":108},[52,37938,17981],{"class":66},[52,37940,24845],{"class":58},[52,37942,5467],{"class":371},[52,37944,729],{"class":58},[52,37946,37947],{"class":54,"line":118},[52,37948,26949],{"class":58},[52,37950,37951,37953,37955],{"class":54,"line":594},[52,37952,2213],{"class":58},[52,37954,2216],{"class":371},[52,37956,105],{"class":58},[52,37958,37959,37961,37963],{"class":54,"line":600},[52,37960,2230],{"class":58},[52,37962,37782],{"class":371},[52,37964,77],{"class":58},[52,37966,37967,37969,37971],{"class":54,"line":606},[52,37968,121],{"class":58},[52,37970,63],{"class":371},[52,37972,77],{"class":58},[43,37974,37975],{"className":419,"code":37860,"language":420,"meta":48,"style":48},[31,37976,37977,37985,37991,38003,38007,38015,38023],{"__ignoreMap":48},[52,37978,37979,37981,37983],{"class":54,"line":55},[52,37980,59],{"class":58},[52,37982,63],{"class":371},[52,37984,77],{"class":58},[52,37986,37987,37989],{"class":54,"line":80},[52,37988,83],{"class":58},[52,37990,37821],{"class":371},[52,37992,37993,37995,37997,37999,38001],{"class":54,"line":108},[52,37994,17981],{"class":66},[52,37996,70],{"class":231},[52,37998,723],{"class":58},[52,38000,5467],{"class":371},[52,38002,729],{"class":58},[52,38004,38005],{"class":54,"line":118},[52,38006,26949],{"class":58},[52,38008,38009,38011,38013],{"class":54,"line":594},[52,38010,2213],{"class":58},[52,38012,2216],{"class":371},[52,38014,105],{"class":58},[52,38016,38017,38019,38021],{"class":54,"line":600},[52,38018,2230],{"class":58},[52,38020,37782],{"class":371},[52,38022,77],{"class":58},[52,38024,38025,38027,38029],{"class":54,"line":606},[52,38026,121],{"class":58},[52,38028,63],{"class":371},[52,38030,77],{"class":58},[43,38032,38034],{"className":222,"code":38033,"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,38035,38036,38046,38050,38064,38068,38081,38089,38093,38097],{"__ignoreMap":48},[52,38037,38038,38040,38042,38044],{"class":54,"line":55},[52,38039,232],{"class":231},[52,38041,9231],{"class":58},[52,38043,238],{"class":231},[52,38045,9236],{"class":73},[52,38047,38048],{"class":54,"line":80},[52,38049,597],{"emptyLinePlaceholder":171},[52,38051,38052,38054,38056,38058,38060,38062],{"class":54,"line":108},[52,38053,1721],{"class":231},[52,38055,1724],{"class":371},[52,38057,1727],{"class":231},[52,38059,1730],{"class":231},[52,38061,1733],{"class":66},[52,38063,1736],{"class":58},[52,38065,38066],{"class":54,"line":118},[52,38067,1751],{"class":58},[52,38069,38070,38072,38075,38077,38079],{"class":54,"line":594},[52,38071,1756],{"class":58},[52,38073,38074],{"class":73},"'Glitch'",[52,38076,27194],{"class":58},[52,38078,5467],{"class":371},[52,38080,5259],{"class":58},[52,38082,38083,38085,38087],{"class":54,"line":600},[52,38084,4727],{"class":58},[52,38086,2869],{"class":73},[52,38088,2129],{"class":58},[52,38090,38091],{"class":54,"line":606},[52,38092,4744],{"class":58},[52,38094,38095],{"class":54,"line":653},[52,38096,1773],{"class":58},[52,38098,38099],{"class":54,"line":662},[52,38100,1778],{"class":58},[156,38102,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38104},[38105,38106],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glitch",{"title":37782,"description":37790},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":38113,"title":9509,"body":38114,"category":27503,"componentType":20848,"description":38121,"extension":168,"meta":38438,"navigation":171,"path":38439,"requiresChild":171,"seo":38440,"stem":38441,"__hash__":38442},"components/docs/components/Glow.md",{"type":8,"value":38115,"toc":38434},[38116,38119,38122,38124,38126,38129,38131,38432],[11,38117,9509],{"id":38118},"glow",[15,38120,38121],{},"Soft glow effect with adjustable intensity",[26901,38123],{"component":9509},[23,38125,26905],{"id":21503},[26907,38127],{":props":38128},"[{\"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,38130,26913],{"id":26912},[217,38132,38133,38189,38248,38304,38362],{":tabs":1543},[43,38134,38136],{"className":45,"code":38135,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,38137,38138,38146,38153,38161,38165,38173,38181],{"__ignoreMap":48},[52,38139,38140,38142,38144],{"class":54,"line":55},[52,38141,59],{"class":58},[52,38143,63],{"class":62},[52,38145,77],{"class":58},[52,38147,38148,38150],{"class":54,"line":80},[52,38149,83],{"class":58},[52,38151,38152],{"class":62},"Glow\n",[52,38154,38155,38157,38159],{"class":54,"line":108},[52,38156,17870],{"class":66},[52,38158,70],{"class":58},[52,38160,28827],{"class":73},[52,38162,38163],{"class":54,"line":118},[52,38164,26949],{"class":58},[52,38166,38167,38169,38171],{"class":54,"line":594},[52,38168,2213],{"class":58},[52,38170,2216],{"class":62},[52,38172,105],{"class":58},[52,38174,38175,38177,38179],{"class":54,"line":600},[52,38176,2230],{"class":58},[52,38178,9509],{"class":62},[52,38180,77],{"class":58},[52,38182,38183,38185,38187],{"class":54,"line":606},[52,38184,121],{"class":58},[52,38186,63],{"class":62},[52,38188,77],{"class":58},[43,38190,38192],{"className":360,"code":38191,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,38193,38194,38202,38208,38220,38224,38232,38240],{"__ignoreMap":48},[52,38195,38196,38198,38200],{"class":54,"line":55},[52,38197,59],{"class":58},[52,38199,63],{"class":371},[52,38201,77],{"class":58},[52,38203,38204,38206],{"class":54,"line":80},[52,38205,83],{"class":58},[52,38207,38152],{"class":371},[52,38209,38210,38212,38214,38216,38218],{"class":54,"line":108},[52,38211,17981],{"class":66},[52,38213,70],{"class":231},[52,38215,723],{"class":58},[52,38217,6391],{"class":371},[52,38219,729],{"class":58},[52,38221,38222],{"class":54,"line":118},[52,38223,26949],{"class":58},[52,38225,38226,38228,38230],{"class":54,"line":594},[52,38227,2213],{"class":58},[52,38229,2216],{"class":371},[52,38231,105],{"class":58},[52,38233,38234,38236,38238],{"class":54,"line":600},[52,38235,2230],{"class":58},[52,38237,9509],{"class":371},[52,38239,77],{"class":58},[52,38241,38242,38244,38246],{"class":54,"line":606},[52,38243,121],{"class":58},[52,38245,63],{"class":371},[52,38247,77],{"class":58},[43,38249,38250],{"className":2507,"code":38191,"language":2509,"meta":48,"style":48},[31,38251,38252,38260,38266,38276,38280,38288,38296],{"__ignoreMap":48},[52,38253,38254,38256,38258],{"class":54,"line":55},[52,38255,59],{"class":58},[52,38257,63],{"class":371},[52,38259,77],{"class":58},[52,38261,38262,38264],{"class":54,"line":80},[52,38263,83],{"class":58},[52,38265,38152],{"class":371},[52,38267,38268,38270,38272,38274],{"class":54,"line":108},[52,38269,17981],{"class":66},[52,38271,24845],{"class":58},[52,38273,6391],{"class":371},[52,38275,729],{"class":58},[52,38277,38278],{"class":54,"line":118},[52,38279,26949],{"class":58},[52,38281,38282,38284,38286],{"class":54,"line":594},[52,38283,2213],{"class":58},[52,38285,2216],{"class":371},[52,38287,105],{"class":58},[52,38289,38290,38292,38294],{"class":54,"line":600},[52,38291,2230],{"class":58},[52,38293,9509],{"class":371},[52,38295,77],{"class":58},[52,38297,38298,38300,38302],{"class":54,"line":606},[52,38299,121],{"class":58},[52,38301,63],{"class":371},[52,38303,77],{"class":58},[43,38305,38306],{"className":419,"code":38191,"language":420,"meta":48,"style":48},[31,38307,38308,38316,38322,38334,38338,38346,38354],{"__ignoreMap":48},[52,38309,38310,38312,38314],{"class":54,"line":55},[52,38311,59],{"class":58},[52,38313,63],{"class":371},[52,38315,77],{"class":58},[52,38317,38318,38320],{"class":54,"line":80},[52,38319,83],{"class":58},[52,38321,38152],{"class":371},[52,38323,38324,38326,38328,38330,38332],{"class":54,"line":108},[52,38325,17981],{"class":66},[52,38327,70],{"class":231},[52,38329,723],{"class":58},[52,38331,6391],{"class":371},[52,38333,729],{"class":58},[52,38335,38336],{"class":54,"line":118},[52,38337,26949],{"class":58},[52,38339,38340,38342,38344],{"class":54,"line":594},[52,38341,2213],{"class":58},[52,38343,2216],{"class":371},[52,38345,105],{"class":58},[52,38347,38348,38350,38352],{"class":54,"line":600},[52,38349,2230],{"class":58},[52,38351,9509],{"class":371},[52,38353,77],{"class":58},[52,38355,38356,38358,38360],{"class":54,"line":606},[52,38357,121],{"class":58},[52,38359,63],{"class":371},[52,38361,77],{"class":58},[43,38363,38365],{"className":222,"code":38364,"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,38366,38367,38377,38381,38395,38399,38412,38420,38424,38428],{"__ignoreMap":48},[52,38368,38369,38371,38373,38375],{"class":54,"line":55},[52,38370,232],{"class":231},[52,38372,9231],{"class":58},[52,38374,238],{"class":231},[52,38376,9236],{"class":73},[52,38378,38379],{"class":54,"line":80},[52,38380,597],{"emptyLinePlaceholder":171},[52,38382,38383,38385,38387,38389,38391,38393],{"class":54,"line":108},[52,38384,1721],{"class":231},[52,38386,1724],{"class":371},[52,38388,1727],{"class":231},[52,38390,1730],{"class":231},[52,38392,1733],{"class":66},[52,38394,1736],{"class":58},[52,38396,38397],{"class":54,"line":118},[52,38398,1751],{"class":58},[52,38400,38401,38403,38406,38408,38410],{"class":54,"line":594},[52,38402,1756],{"class":58},[52,38404,38405],{"class":73},"'Glow'",[52,38407,27194],{"class":58},[52,38409,6391],{"class":371},[52,38411,5259],{"class":58},[52,38413,38414,38416,38418],{"class":54,"line":600},[52,38415,4727],{"class":58},[52,38417,2869],{"class":73},[52,38419,2129],{"class":58},[52,38421,38422],{"class":54,"line":606},[52,38423,4744],{"class":58},[52,38425,38426],{"class":54,"line":653},[52,38427,1773],{"class":58},[52,38429,38430],{"class":54,"line":662},[52,38431,1778],{"class":58},[156,38433,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38435},[38436,38437],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glow",{"title":9509,"description":38121},"docs/components/Glow","nY6FLTxSC0jk4JC2WGI4IwGXHT0zG4brVxkpPPza0M0",{"id":38444,"title":38445,"body":38446,"category":27760,"componentType":20842,"description":38453,"extension":168,"meta":38694,"navigation":171,"path":38695,"requiresChild":27763,"seo":38696,"stem":38697,"__hash__":38698},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":38447,"toc":38690},[38448,38451,38454,38456,38458,38461,38463,38688],[11,38449,38445],{"id":38450},"godrays",[15,38452,38453],{},"Volumetric light rays emanating from a point",[26901,38455],{"component":38445},[23,38457,26905],{"id":21503},[26907,38459],{":props":38460},"[{\"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,38462,26913],{"id":26912},[217,38464,38465,38505,38548,38588,38630],{":tabs":1543},[43,38466,38468],{"className":45,"code":38467,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,38469,38470,38478,38485,38493,38497],{"__ignoreMap":48},[52,38471,38472,38474,38476],{"class":54,"line":55},[52,38473,59],{"class":58},[52,38475,63],{"class":62},[52,38477,77],{"class":58},[52,38479,38480,38482],{"class":54,"line":80},[52,38481,83],{"class":58},[52,38483,38484],{"class":62},"Godrays\n",[52,38486,38487,38489,38491],{"class":54,"line":108},[52,38488,17870],{"class":66},[52,38490,70],{"class":58},[52,38492,7366],{"class":73},[52,38494,38495],{"class":54,"line":118},[52,38496,1224],{"class":58},[52,38498,38499,38501,38503],{"class":54,"line":594},[52,38500,121],{"class":58},[52,38502,63],{"class":62},[52,38504,77],{"class":58},[43,38506,38508],{"className":360,"code":38507,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,38509,38510,38518,38524,38536,38540],{"__ignoreMap":48},[52,38511,38512,38514,38516],{"class":54,"line":55},[52,38513,59],{"class":58},[52,38515,63],{"class":371},[52,38517,77],{"class":58},[52,38519,38520,38522],{"class":54,"line":80},[52,38521,83],{"class":58},[52,38523,38484],{"class":371},[52,38525,38526,38528,38530,38532,38534],{"class":54,"line":108},[52,38527,17981],{"class":66},[52,38529,70],{"class":231},[52,38531,723],{"class":58},[52,38533,4011],{"class":371},[52,38535,729],{"class":58},[52,38537,38538],{"class":54,"line":118},[52,38539,1224],{"class":58},[52,38541,38542,38544,38546],{"class":54,"line":594},[52,38543,121],{"class":58},[52,38545,63],{"class":371},[52,38547,77],{"class":58},[43,38549,38550],{"className":2507,"code":38507,"language":2509,"meta":48,"style":48},[31,38551,38552,38560,38566,38576,38580],{"__ignoreMap":48},[52,38553,38554,38556,38558],{"class":54,"line":55},[52,38555,59],{"class":58},[52,38557,63],{"class":371},[52,38559,77],{"class":58},[52,38561,38562,38564],{"class":54,"line":80},[52,38563,83],{"class":58},[52,38565,38484],{"class":371},[52,38567,38568,38570,38572,38574],{"class":54,"line":108},[52,38569,17981],{"class":66},[52,38571,24845],{"class":58},[52,38573,4011],{"class":371},[52,38575,729],{"class":58},[52,38577,38578],{"class":54,"line":118},[52,38579,1224],{"class":58},[52,38581,38582,38584,38586],{"class":54,"line":594},[52,38583,121],{"class":58},[52,38585,63],{"class":371},[52,38587,77],{"class":58},[43,38589,38590],{"className":419,"code":38507,"language":420,"meta":48,"style":48},[31,38591,38592,38600,38606,38618,38622],{"__ignoreMap":48},[52,38593,38594,38596,38598],{"class":54,"line":55},[52,38595,59],{"class":58},[52,38597,63],{"class":371},[52,38599,77],{"class":58},[52,38601,38602,38604],{"class":54,"line":80},[52,38603,83],{"class":58},[52,38605,38484],{"class":371},[52,38607,38608,38610,38612,38614,38616],{"class":54,"line":108},[52,38609,17981],{"class":66},[52,38611,70],{"class":231},[52,38613,723],{"class":58},[52,38615,4011],{"class":371},[52,38617,729],{"class":58},[52,38619,38620],{"class":54,"line":118},[52,38621,1224],{"class":58},[52,38623,38624,38626,38628],{"class":54,"line":594},[52,38625,121],{"class":58},[52,38627,63],{"class":371},[52,38629,77],{"class":58},[43,38631,38633],{"className":222,"code":38632,"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,38634,38635,38645,38649,38663,38667,38680,38684],{"__ignoreMap":48},[52,38636,38637,38639,38641,38643],{"class":54,"line":55},[52,38638,232],{"class":231},[52,38640,9231],{"class":58},[52,38642,238],{"class":231},[52,38644,9236],{"class":73},[52,38646,38647],{"class":54,"line":80},[52,38648,597],{"emptyLinePlaceholder":171},[52,38650,38651,38653,38655,38657,38659,38661],{"class":54,"line":108},[52,38652,1721],{"class":231},[52,38654,1724],{"class":371},[52,38656,1727],{"class":231},[52,38658,1730],{"class":231},[52,38660,1733],{"class":66},[52,38662,1736],{"class":58},[52,38664,38665],{"class":54,"line":118},[52,38666,1751],{"class":58},[52,38668,38669,38671,38674,38676,38678],{"class":54,"line":594},[52,38670,1756],{"class":58},[52,38672,38673],{"class":73},"'Godrays'",[52,38675,27194],{"class":58},[52,38677,4011],{"class":371},[52,38679,1768],{"class":58},[52,38681,38682],{"class":54,"line":600},[52,38683,1773],{"class":58},[52,38685,38686],{"class":54,"line":606},[52,38687,1778],{"class":58},[156,38689,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38691},[38692,38693],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/godrays",{"title":38445,"description":38453},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":38700,"title":38701,"body":38702,"category":28771,"componentType":20848,"description":38709,"extension":168,"meta":38964,"navigation":171,"path":38965,"requiresChild":171,"seo":38966,"stem":38967,"__hash__":38968},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":38703,"toc":38961},[38704,38707,38710,38712,38714,38959],[11,38705,38701],{"id":38706},"grayscale",[15,38708,38709],{},"Convert colors to black and white",[26901,38711],{"component":38701},[23,38713,26913],{"id":26912},[217,38715,38716,38761,38805,38849,38893],{":tabs":1543},[43,38717,38719],{"className":45,"code":38718,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,38720,38721,38729,38737,38745,38753],{"__ignoreMap":48},[52,38722,38723,38725,38727],{"class":54,"line":55},[52,38724,59],{"class":58},[52,38726,63],{"class":62},[52,38728,77],{"class":58},[52,38730,38731,38733,38735],{"class":54,"line":80},[52,38732,83],{"class":58},[52,38734,38701],{"class":62},[52,38736,77],{"class":58},[52,38738,38739,38741,38743],{"class":54,"line":108},[52,38740,2213],{"class":58},[52,38742,2216],{"class":62},[52,38744,105],{"class":58},[52,38746,38747,38749,38751],{"class":54,"line":118},[52,38748,2230],{"class":58},[52,38750,38701],{"class":62},[52,38752,77],{"class":58},[52,38754,38755,38757,38759],{"class":54,"line":594},[52,38756,121],{"class":58},[52,38758,63],{"class":62},[52,38760,77],{"class":58},[43,38762,38763],{"className":360,"code":38718,"language":362,"meta":48,"style":48},[31,38764,38765,38773,38781,38789,38797],{"__ignoreMap":48},[52,38766,38767,38769,38771],{"class":54,"line":55},[52,38768,59],{"class":58},[52,38770,63],{"class":371},[52,38772,77],{"class":58},[52,38774,38775,38777,38779],{"class":54,"line":80},[52,38776,83],{"class":58},[52,38778,38701],{"class":371},[52,38780,77],{"class":58},[52,38782,38783,38785,38787],{"class":54,"line":108},[52,38784,2213],{"class":58},[52,38786,2216],{"class":371},[52,38788,105],{"class":58},[52,38790,38791,38793,38795],{"class":54,"line":118},[52,38792,2230],{"class":58},[52,38794,38701],{"class":371},[52,38796,77],{"class":58},[52,38798,38799,38801,38803],{"class":54,"line":594},[52,38800,121],{"class":58},[52,38802,63],{"class":371},[52,38804,77],{"class":58},[43,38806,38807],{"className":2507,"code":38718,"language":2509,"meta":48,"style":48},[31,38808,38809,38817,38825,38833,38841],{"__ignoreMap":48},[52,38810,38811,38813,38815],{"class":54,"line":55},[52,38812,59],{"class":58},[52,38814,63],{"class":371},[52,38816,77],{"class":58},[52,38818,38819,38821,38823],{"class":54,"line":80},[52,38820,83],{"class":58},[52,38822,38701],{"class":371},[52,38824,77],{"class":58},[52,38826,38827,38829,38831],{"class":54,"line":108},[52,38828,2213],{"class":58},[52,38830,2216],{"class":371},[52,38832,105],{"class":58},[52,38834,38835,38837,38839],{"class":54,"line":118},[52,38836,2230],{"class":58},[52,38838,38701],{"class":371},[52,38840,77],{"class":58},[52,38842,38843,38845,38847],{"class":54,"line":594},[52,38844,121],{"class":58},[52,38846,63],{"class":371},[52,38848,77],{"class":58},[43,38850,38851],{"className":419,"code":38718,"language":420,"meta":48,"style":48},[31,38852,38853,38861,38869,38877,38885],{"__ignoreMap":48},[52,38854,38855,38857,38859],{"class":54,"line":55},[52,38856,59],{"class":58},[52,38858,63],{"class":371},[52,38860,77],{"class":58},[52,38862,38863,38865,38867],{"class":54,"line":80},[52,38864,83],{"class":58},[52,38866,38701],{"class":371},[52,38868,77],{"class":58},[52,38870,38871,38873,38875],{"class":54,"line":108},[52,38872,2213],{"class":58},[52,38874,2216],{"class":371},[52,38876,105],{"class":58},[52,38878,38879,38881,38883],{"class":54,"line":118},[52,38880,2230],{"class":58},[52,38882,38701],{"class":371},[52,38884,77],{"class":58},[52,38886,38887,38889,38891],{"class":54,"line":594},[52,38888,121],{"class":58},[52,38890,63],{"class":371},[52,38892,77],{"class":58},[43,38894,38896],{"className":222,"code":38895,"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,38897,38898,38908,38912,38926,38930,38939,38947,38951,38955],{"__ignoreMap":48},[52,38899,38900,38902,38904,38906],{"class":54,"line":55},[52,38901,232],{"class":231},[52,38903,9231],{"class":58},[52,38905,238],{"class":231},[52,38907,9236],{"class":73},[52,38909,38910],{"class":54,"line":80},[52,38911,597],{"emptyLinePlaceholder":171},[52,38913,38914,38916,38918,38920,38922,38924],{"class":54,"line":108},[52,38915,1721],{"class":231},[52,38917,1724],{"class":371},[52,38919,1727],{"class":231},[52,38921,1730],{"class":231},[52,38923,1733],{"class":66},[52,38925,1736],{"class":58},[52,38927,38928],{"class":54,"line":118},[52,38929,1751],{"class":58},[52,38931,38932,38934,38937],{"class":54,"line":594},[52,38933,1756],{"class":58},[52,38935,38936],{"class":73},"'Grayscale'",[52,38938,4722],{"class":58},[52,38940,38941,38943,38945],{"class":54,"line":600},[52,38942,4727],{"class":58},[52,38944,2869],{"class":73},[52,38946,2129],{"class":58},[52,38948,38949],{"class":54,"line":606},[52,38950,4744],{"class":58},[52,38952,38953],{"class":54,"line":653},[52,38954,1773],{"class":58},[52,38956,38957],{"class":54,"line":662},[52,38958,1778],{"class":58},[156,38960,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":38962},[38963],{"id":26912,"depth":80,"text":26913},{},"/docs/components/grayscale",{"title":38701,"description":38709},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":38970,"title":38971,"body":38972,"category":27760,"componentType":20842,"description":38979,"extension":168,"meta":39209,"navigation":171,"path":39210,"requiresChild":27763,"seo":39211,"stem":39212,"__hash__":39213},"components/docs/components/Grid.md","Grid",{"type":8,"value":38973,"toc":39205},[38974,38977,38980,38982,38984,38987,38989,39203],[11,38975,38971],{"id":38976},"grid",[15,38978,38979],{},"Simple grid lines pattern with adjustable thickness and rotation",[26901,38981],{"component":38971},[23,38983,26905],{"id":21503},[26907,38985],{":props":38986},"[{\"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,38988,26913],{"id":26912},[217,38990,38991,39031,39069,39107,39145],{":tabs":1543},[43,38992,38994],{"className":45,"code":38993,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,38995,38996,39004,39011,39019,39023],{"__ignoreMap":48},[52,38997,38998,39000,39002],{"class":54,"line":55},[52,38999,59],{"class":58},[52,39001,63],{"class":62},[52,39003,77],{"class":58},[52,39005,39006,39008],{"class":54,"line":80},[52,39007,83],{"class":58},[52,39009,39010],{"class":62},"Grid\n",[52,39012,39013,39015,39017],{"class":54,"line":108},[52,39014,7351],{"class":66},[52,39016,70],{"class":58},[52,39018,7307],{"class":73},[52,39020,39021],{"class":54,"line":118},[52,39022,1224],{"class":58},[52,39024,39025,39027,39029],{"class":54,"line":594},[52,39026,121],{"class":58},[52,39028,63],{"class":62},[52,39030,77],{"class":58},[43,39032,39033],{"className":360,"code":38993,"language":362,"meta":48,"style":48},[31,39034,39035,39043,39049,39057,39061],{"__ignoreMap":48},[52,39036,39037,39039,39041],{"class":54,"line":55},[52,39038,59],{"class":58},[52,39040,63],{"class":371},[52,39042,77],{"class":58},[52,39044,39045,39047],{"class":54,"line":80},[52,39046,83],{"class":58},[52,39048,39010],{"class":371},[52,39050,39051,39053,39055],{"class":54,"line":108},[52,39052,7351],{"class":66},[52,39054,70],{"class":231},[52,39056,7307],{"class":73},[52,39058,39059],{"class":54,"line":118},[52,39060,1224],{"class":58},[52,39062,39063,39065,39067],{"class":54,"line":594},[52,39064,121],{"class":58},[52,39066,63],{"class":371},[52,39068,77],{"class":58},[43,39070,39071],{"className":2507,"code":38993,"language":2509,"meta":48,"style":48},[31,39072,39073,39081,39087,39095,39099],{"__ignoreMap":48},[52,39074,39075,39077,39079],{"class":54,"line":55},[52,39076,59],{"class":58},[52,39078,63],{"class":371},[52,39080,77],{"class":58},[52,39082,39083,39085],{"class":54,"line":80},[52,39084,83],{"class":58},[52,39086,39010],{"class":371},[52,39088,39089,39091,39093],{"class":54,"line":108},[52,39090,7351],{"class":66},[52,39092,70],{"class":58},[52,39094,7307],{"class":73},[52,39096,39097],{"class":54,"line":118},[52,39098,1224],{"class":58},[52,39100,39101,39103,39105],{"class":54,"line":594},[52,39102,121],{"class":58},[52,39104,63],{"class":371},[52,39106,77],{"class":58},[43,39108,39109],{"className":419,"code":38993,"language":420,"meta":48,"style":48},[31,39110,39111,39119,39125,39133,39137],{"__ignoreMap":48},[52,39112,39113,39115,39117],{"class":54,"line":55},[52,39114,59],{"class":58},[52,39116,63],{"class":371},[52,39118,77],{"class":58},[52,39120,39121,39123],{"class":54,"line":80},[52,39122,83],{"class":58},[52,39124,39010],{"class":371},[52,39126,39127,39129,39131],{"class":54,"line":108},[52,39128,7351],{"class":66},[52,39130,70],{"class":231},[52,39132,7307],{"class":73},[52,39134,39135],{"class":54,"line":118},[52,39136,1224],{"class":58},[52,39138,39139,39141,39143],{"class":54,"line":594},[52,39140,121],{"class":58},[52,39142,63],{"class":371},[52,39144,77],{"class":58},[43,39146,39148],{"className":222,"code":39147,"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,39149,39150,39160,39164,39178,39182,39195,39199],{"__ignoreMap":48},[52,39151,39152,39154,39156,39158],{"class":54,"line":55},[52,39153,232],{"class":231},[52,39155,9231],{"class":58},[52,39157,238],{"class":231},[52,39159,9236],{"class":73},[52,39161,39162],{"class":54,"line":80},[52,39163,597],{"emptyLinePlaceholder":171},[52,39165,39166,39168,39170,39172,39174,39176],{"class":54,"line":108},[52,39167,1721],{"class":231},[52,39169,1724],{"class":371},[52,39171,1727],{"class":231},[52,39173,1730],{"class":231},[52,39175,1733],{"class":66},[52,39177,1736],{"class":58},[52,39179,39180],{"class":54,"line":118},[52,39181,1751],{"class":58},[52,39183,39184,39186,39189,39191,39193],{"class":54,"line":594},[52,39185,1756],{"class":58},[52,39187,39188],{"class":73},"'Grid'",[52,39190,1762],{"class":58},[52,39192,7886],{"class":73},[52,39194,1768],{"class":58},[52,39196,39197],{"class":54,"line":600},[52,39198,1773],{"class":58},[52,39200,39201],{"class":54,"line":606},[52,39202,1778],{"class":58},[156,39204,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39206},[39207,39208],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/grid",{"title":38971,"description":38979},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":39215,"title":4808,"body":39216,"category":30161,"componentType":20848,"description":39223,"extension":168,"meta":39585,"navigation":171,"path":39586,"requiresChild":171,"seo":39587,"stem":39588,"__hash__":39589},"components/docs/components/GridDistortion.md",{"type":8,"value":39217,"toc":39581},[39218,39221,39224,39226,39228,39231,39233,39579],[11,39219,4808],{"id":39220},"griddistortion",[15,39222,39223],{},"Interactive grid distortion controlled by mouse position",[26901,39225],{"component":4808},[23,39227,26905],{"id":21503},[26907,39229],{":props":39230},"[{\"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,39232,26913],{"id":26912},[217,39234,39235,39299,39370,39436,39506],{":tabs":1543},[43,39236,39238],{"className":45,"code":39237,"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,39239,39240,39248,39255,39263,39271,39275,39283,39291],{"__ignoreMap":48},[52,39241,39242,39244,39246],{"class":54,"line":55},[52,39243,59],{"class":58},[52,39245,63],{"class":62},[52,39247,77],{"class":58},[52,39249,39250,39252],{"class":54,"line":80},[52,39251,83],{"class":58},[52,39253,39254],{"class":62},"GridDistortion\n",[52,39256,39257,39259,39261],{"class":54,"line":108},[52,39258,17870],{"class":66},[52,39260,70],{"class":58},[52,39262,28827],{"class":73},[52,39264,39265,39267,39269],{"class":54,"line":118},[52,39266,14901],{"class":66},[52,39268,70],{"class":58},[52,39270,28827],{"class":73},[52,39272,39273],{"class":54,"line":594},[52,39274,26949],{"class":58},[52,39276,39277,39279,39281],{"class":54,"line":600},[52,39278,2213],{"class":58},[52,39280,2216],{"class":62},[52,39282,105],{"class":58},[52,39284,39285,39287,39289],{"class":54,"line":606},[52,39286,2230],{"class":58},[52,39288,4808],{"class":62},[52,39290,77],{"class":58},[52,39292,39293,39295,39297],{"class":54,"line":653},[52,39294,121],{"class":58},[52,39296,63],{"class":62},[52,39298,77],{"class":58},[43,39300,39302],{"className":360,"code":39301,"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,39303,39304,39312,39318,39330,39342,39346,39354,39362],{"__ignoreMap":48},[52,39305,39306,39308,39310],{"class":54,"line":55},[52,39307,59],{"class":58},[52,39309,63],{"class":371},[52,39311,77],{"class":58},[52,39313,39314,39316],{"class":54,"line":80},[52,39315,83],{"class":58},[52,39317,39254],{"class":371},[52,39319,39320,39322,39324,39326,39328],{"class":54,"line":108},[52,39321,17981],{"class":66},[52,39323,70],{"class":231},[52,39325,723],{"class":58},[52,39327,6391],{"class":371},[52,39329,729],{"class":58},[52,39331,39332,39334,39336,39338,39340],{"class":54,"line":118},[52,39333,7361],{"class":66},[52,39335,70],{"class":231},[52,39337,723],{"class":58},[52,39339,6391],{"class":371},[52,39341,729],{"class":58},[52,39343,39344],{"class":54,"line":594},[52,39345,26949],{"class":58},[52,39347,39348,39350,39352],{"class":54,"line":600},[52,39349,2213],{"class":58},[52,39351,2216],{"class":371},[52,39353,105],{"class":58},[52,39355,39356,39358,39360],{"class":54,"line":606},[52,39357,2230],{"class":58},[52,39359,4808],{"class":371},[52,39361,77],{"class":58},[52,39363,39364,39366,39368],{"class":54,"line":653},[52,39365,121],{"class":58},[52,39367,63],{"class":371},[52,39369,77],{"class":58},[43,39371,39372],{"className":2507,"code":39301,"language":2509,"meta":48,"style":48},[31,39373,39374,39382,39388,39398,39408,39412,39420,39428],{"__ignoreMap":48},[52,39375,39376,39378,39380],{"class":54,"line":55},[52,39377,59],{"class":58},[52,39379,63],{"class":371},[52,39381,77],{"class":58},[52,39383,39384,39386],{"class":54,"line":80},[52,39385,83],{"class":58},[52,39387,39254],{"class":371},[52,39389,39390,39392,39394,39396],{"class":54,"line":108},[52,39391,17981],{"class":66},[52,39393,24845],{"class":58},[52,39395,6391],{"class":371},[52,39397,729],{"class":58},[52,39399,39400,39402,39404,39406],{"class":54,"line":118},[52,39401,7361],{"class":66},[52,39403,24845],{"class":58},[52,39405,6391],{"class":371},[52,39407,729],{"class":58},[52,39409,39410],{"class":54,"line":594},[52,39411,26949],{"class":58},[52,39413,39414,39416,39418],{"class":54,"line":600},[52,39415,2213],{"class":58},[52,39417,2216],{"class":371},[52,39419,105],{"class":58},[52,39421,39422,39424,39426],{"class":54,"line":606},[52,39423,2230],{"class":58},[52,39425,4808],{"class":371},[52,39427,77],{"class":58},[52,39429,39430,39432,39434],{"class":54,"line":653},[52,39431,121],{"class":58},[52,39433,63],{"class":371},[52,39435,77],{"class":58},[43,39437,39438],{"className":419,"code":39301,"language":420,"meta":48,"style":48},[31,39439,39440,39448,39454,39466,39478,39482,39490,39498],{"__ignoreMap":48},[52,39441,39442,39444,39446],{"class":54,"line":55},[52,39443,59],{"class":58},[52,39445,63],{"class":371},[52,39447,77],{"class":58},[52,39449,39450,39452],{"class":54,"line":80},[52,39451,83],{"class":58},[52,39453,39254],{"class":371},[52,39455,39456,39458,39460,39462,39464],{"class":54,"line":108},[52,39457,17981],{"class":66},[52,39459,70],{"class":231},[52,39461,723],{"class":58},[52,39463,6391],{"class":371},[52,39465,729],{"class":58},[52,39467,39468,39470,39472,39474,39476],{"class":54,"line":118},[52,39469,7361],{"class":66},[52,39471,70],{"class":231},[52,39473,723],{"class":58},[52,39475,6391],{"class":371},[52,39477,729],{"class":58},[52,39479,39480],{"class":54,"line":594},[52,39481,26949],{"class":58},[52,39483,39484,39486,39488],{"class":54,"line":600},[52,39485,2213],{"class":58},[52,39487,2216],{"class":371},[52,39489,105],{"class":58},[52,39491,39492,39494,39496],{"class":54,"line":606},[52,39493,2230],{"class":58},[52,39495,4808],{"class":371},[52,39497,77],{"class":58},[52,39499,39500,39502,39504],{"class":54,"line":653},[52,39501,121],{"class":58},[52,39503,63],{"class":371},[52,39505,77],{"class":58},[43,39507,39509],{"className":222,"code":39508,"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,39510,39511,39521,39525,39539,39543,39559,39567,39571,39575],{"__ignoreMap":48},[52,39512,39513,39515,39517,39519],{"class":54,"line":55},[52,39514,232],{"class":231},[52,39516,9231],{"class":58},[52,39518,238],{"class":231},[52,39520,9236],{"class":73},[52,39522,39523],{"class":54,"line":80},[52,39524,597],{"emptyLinePlaceholder":171},[52,39526,39527,39529,39531,39533,39535,39537],{"class":54,"line":108},[52,39528,1721],{"class":231},[52,39530,1724],{"class":371},[52,39532,1727],{"class":231},[52,39534,1730],{"class":231},[52,39536,1733],{"class":66},[52,39538,1736],{"class":58},[52,39540,39541],{"class":54,"line":118},[52,39542,1751],{"class":58},[52,39544,39545,39547,39549,39551,39553,39555,39557],{"class":54,"line":594},[52,39546,1756],{"class":58},[52,39548,5251],{"class":73},[52,39550,27194],{"class":58},[52,39552,6391],{"class":371},[52,39554,4278],{"class":58},[52,39556,6391],{"class":371},[52,39558,5259],{"class":58},[52,39560,39561,39563,39565],{"class":54,"line":600},[52,39562,4727],{"class":58},[52,39564,2869],{"class":73},[52,39566,2129],{"class":58},[52,39568,39569],{"class":54,"line":606},[52,39570,4744],{"class":58},[52,39572,39573],{"class":54,"line":653},[52,39574,1773],{"class":58},[52,39576,39577],{"class":54,"line":662},[52,39578,1778],{"class":58},[156,39580,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39582},[39583,39584],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/griddistortion",{"title":4808,"description":39223},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":39591,"title":39592,"body":39593,"category":39855,"componentType":20848,"description":39600,"extension":168,"meta":39856,"navigation":171,"path":39857,"requiresChild":171,"seo":39858,"stem":39859,"__hash__":39860},"components/docs/components/Group.md","Group",{"type":8,"value":39594,"toc":39852},[39595,39598,39601,39603,39605,39850],[11,39596,39592],{"id":39597},"group",[15,39599,39600],{},"Container for organizing and composing child effects",[26901,39602],{"component":39592},[23,39604,26913],{"id":26912},[217,39606,39607,39652,39696,39740,39784],{":tabs":1543},[43,39608,39610],{"className":45,"code":39609,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,39611,39612,39620,39628,39636,39644],{"__ignoreMap":48},[52,39613,39614,39616,39618],{"class":54,"line":55},[52,39615,59],{"class":58},[52,39617,63],{"class":62},[52,39619,77],{"class":58},[52,39621,39622,39624,39626],{"class":54,"line":80},[52,39623,83],{"class":58},[52,39625,39592],{"class":62},[52,39627,77],{"class":58},[52,39629,39630,39632,39634],{"class":54,"line":108},[52,39631,2213],{"class":58},[52,39633,2216],{"class":62},[52,39635,105],{"class":58},[52,39637,39638,39640,39642],{"class":54,"line":118},[52,39639,2230],{"class":58},[52,39641,39592],{"class":62},[52,39643,77],{"class":58},[52,39645,39646,39648,39650],{"class":54,"line":594},[52,39647,121],{"class":58},[52,39649,63],{"class":62},[52,39651,77],{"class":58},[43,39653,39654],{"className":360,"code":39609,"language":362,"meta":48,"style":48},[31,39655,39656,39664,39672,39680,39688],{"__ignoreMap":48},[52,39657,39658,39660,39662],{"class":54,"line":55},[52,39659,59],{"class":58},[52,39661,63],{"class":371},[52,39663,77],{"class":58},[52,39665,39666,39668,39670],{"class":54,"line":80},[52,39667,83],{"class":58},[52,39669,39592],{"class":371},[52,39671,77],{"class":58},[52,39673,39674,39676,39678],{"class":54,"line":108},[52,39675,2213],{"class":58},[52,39677,2216],{"class":371},[52,39679,105],{"class":58},[52,39681,39682,39684,39686],{"class":54,"line":118},[52,39683,2230],{"class":58},[52,39685,39592],{"class":371},[52,39687,77],{"class":58},[52,39689,39690,39692,39694],{"class":54,"line":594},[52,39691,121],{"class":58},[52,39693,63],{"class":371},[52,39695,77],{"class":58},[43,39697,39698],{"className":2507,"code":39609,"language":2509,"meta":48,"style":48},[31,39699,39700,39708,39716,39724,39732],{"__ignoreMap":48},[52,39701,39702,39704,39706],{"class":54,"line":55},[52,39703,59],{"class":58},[52,39705,63],{"class":371},[52,39707,77],{"class":58},[52,39709,39710,39712,39714],{"class":54,"line":80},[52,39711,83],{"class":58},[52,39713,39592],{"class":371},[52,39715,77],{"class":58},[52,39717,39718,39720,39722],{"class":54,"line":108},[52,39719,2213],{"class":58},[52,39721,2216],{"class":371},[52,39723,105],{"class":58},[52,39725,39726,39728,39730],{"class":54,"line":118},[52,39727,2230],{"class":58},[52,39729,39592],{"class":371},[52,39731,77],{"class":58},[52,39733,39734,39736,39738],{"class":54,"line":594},[52,39735,121],{"class":58},[52,39737,63],{"class":371},[52,39739,77],{"class":58},[43,39741,39742],{"className":419,"code":39609,"language":420,"meta":48,"style":48},[31,39743,39744,39752,39760,39768,39776],{"__ignoreMap":48},[52,39745,39746,39748,39750],{"class":54,"line":55},[52,39747,59],{"class":58},[52,39749,63],{"class":371},[52,39751,77],{"class":58},[52,39753,39754,39756,39758],{"class":54,"line":80},[52,39755,83],{"class":58},[52,39757,39592],{"class":371},[52,39759,77],{"class":58},[52,39761,39762,39764,39766],{"class":54,"line":108},[52,39763,2213],{"class":58},[52,39765,2216],{"class":371},[52,39767,105],{"class":58},[52,39769,39770,39772,39774],{"class":54,"line":118},[52,39771,2230],{"class":58},[52,39773,39592],{"class":371},[52,39775,77],{"class":58},[52,39777,39778,39780,39782],{"class":54,"line":594},[52,39779,121],{"class":58},[52,39781,63],{"class":371},[52,39783,77],{"class":58},[43,39785,39787],{"className":222,"code":39786,"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,39788,39789,39799,39803,39817,39821,39830,39838,39842,39846],{"__ignoreMap":48},[52,39790,39791,39793,39795,39797],{"class":54,"line":55},[52,39792,232],{"class":231},[52,39794,9231],{"class":58},[52,39796,238],{"class":231},[52,39798,9236],{"class":73},[52,39800,39801],{"class":54,"line":80},[52,39802,597],{"emptyLinePlaceholder":171},[52,39804,39805,39807,39809,39811,39813,39815],{"class":54,"line":108},[52,39806,1721],{"class":231},[52,39808,1724],{"class":371},[52,39810,1727],{"class":231},[52,39812,1730],{"class":231},[52,39814,1733],{"class":66},[52,39816,1736],{"class":58},[52,39818,39819],{"class":54,"line":118},[52,39820,1751],{"class":58},[52,39822,39823,39825,39828],{"class":54,"line":594},[52,39824,1756],{"class":58},[52,39826,39827],{"class":73},"'Group'",[52,39829,4722],{"class":58},[52,39831,39832,39834,39836],{"class":54,"line":600},[52,39833,4727],{"class":58},[52,39835,2869],{"class":73},[52,39837,2129],{"class":58},[52,39839,39840],{"class":54,"line":606},[52,39841,4744],{"class":58},[52,39843,39844],{"class":54,"line":653},[52,39845,1773],{"class":58},[52,39847,39848],{"class":54,"line":662},[52,39849,1778],{"class":58},[156,39851,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":39853},[39854],{"id":26912,"depth":80,"text":26913},"Utilities",{},"/docs/components/group",{"title":39592,"description":39600},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":39862,"title":39863,"body":39864,"category":27503,"componentType":20848,"description":39871,"extension":168,"meta":40132,"navigation":171,"path":40133,"requiresChild":171,"seo":40134,"stem":40135,"__hash__":40136},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":39865,"toc":40128},[39866,39869,39872,39874,39876,39879,39881,40126],[11,39867,39863],{"id":39868},"halftone",[15,39870,39871],{},"Halftone dot pattern effect for printing aesthetics",[26901,39873],{"component":39863},[23,39875,26905],{"id":21503},[26907,39877],{":props":39878},"[{\"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,39880,26913],{"id":26912},[217,39882,39883,39928,39972,40016,40060],{":tabs":1543},[43,39884,39886],{"className":45,"code":39885,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[31,39887,39888,39896,39904,39912,39920],{"__ignoreMap":48},[52,39889,39890,39892,39894],{"class":54,"line":55},[52,39891,59],{"class":58},[52,39893,63],{"class":62},[52,39895,77],{"class":58},[52,39897,39898,39900,39902],{"class":54,"line":80},[52,39899,83],{"class":58},[52,39901,39863],{"class":62},[52,39903,77],{"class":58},[52,39905,39906,39908,39910],{"class":54,"line":108},[52,39907,2213],{"class":58},[52,39909,2216],{"class":62},[52,39911,105],{"class":58},[52,39913,39914,39916,39918],{"class":54,"line":118},[52,39915,2230],{"class":58},[52,39917,39863],{"class":62},[52,39919,77],{"class":58},[52,39921,39922,39924,39926],{"class":54,"line":594},[52,39923,121],{"class":58},[52,39925,63],{"class":62},[52,39927,77],{"class":58},[43,39929,39930],{"className":360,"code":39885,"language":362,"meta":48,"style":48},[31,39931,39932,39940,39948,39956,39964],{"__ignoreMap":48},[52,39933,39934,39936,39938],{"class":54,"line":55},[52,39935,59],{"class":58},[52,39937,63],{"class":371},[52,39939,77],{"class":58},[52,39941,39942,39944,39946],{"class":54,"line":80},[52,39943,83],{"class":58},[52,39945,39863],{"class":371},[52,39947,77],{"class":58},[52,39949,39950,39952,39954],{"class":54,"line":108},[52,39951,2213],{"class":58},[52,39953,2216],{"class":371},[52,39955,105],{"class":58},[52,39957,39958,39960,39962],{"class":54,"line":118},[52,39959,2230],{"class":58},[52,39961,39863],{"class":371},[52,39963,77],{"class":58},[52,39965,39966,39968,39970],{"class":54,"line":594},[52,39967,121],{"class":58},[52,39969,63],{"class":371},[52,39971,77],{"class":58},[43,39973,39974],{"className":2507,"code":39885,"language":2509,"meta":48,"style":48},[31,39975,39976,39984,39992,40000,40008],{"__ignoreMap":48},[52,39977,39978,39980,39982],{"class":54,"line":55},[52,39979,59],{"class":58},[52,39981,63],{"class":371},[52,39983,77],{"class":58},[52,39985,39986,39988,39990],{"class":54,"line":80},[52,39987,83],{"class":58},[52,39989,39863],{"class":371},[52,39991,77],{"class":58},[52,39993,39994,39996,39998],{"class":54,"line":108},[52,39995,2213],{"class":58},[52,39997,2216],{"class":371},[52,39999,105],{"class":58},[52,40001,40002,40004,40006],{"class":54,"line":118},[52,40003,2230],{"class":58},[52,40005,39863],{"class":371},[52,40007,77],{"class":58},[52,40009,40010,40012,40014],{"class":54,"line":594},[52,40011,121],{"class":58},[52,40013,63],{"class":371},[52,40015,77],{"class":58},[43,40017,40018],{"className":419,"code":39885,"language":420,"meta":48,"style":48},[31,40019,40020,40028,40036,40044,40052],{"__ignoreMap":48},[52,40021,40022,40024,40026],{"class":54,"line":55},[52,40023,59],{"class":58},[52,40025,63],{"class":371},[52,40027,77],{"class":58},[52,40029,40030,40032,40034],{"class":54,"line":80},[52,40031,83],{"class":58},[52,40033,39863],{"class":371},[52,40035,77],{"class":58},[52,40037,40038,40040,40042],{"class":54,"line":108},[52,40039,2213],{"class":58},[52,40041,2216],{"class":371},[52,40043,105],{"class":58},[52,40045,40046,40048,40050],{"class":54,"line":118},[52,40047,2230],{"class":58},[52,40049,39863],{"class":371},[52,40051,77],{"class":58},[52,40053,40054,40056,40058],{"class":54,"line":594},[52,40055,121],{"class":58},[52,40057,63],{"class":371},[52,40059,77],{"class":58},[43,40061,40063],{"className":222,"code":40062,"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,40064,40065,40075,40079,40093,40097,40106,40114,40118,40122],{"__ignoreMap":48},[52,40066,40067,40069,40071,40073],{"class":54,"line":55},[52,40068,232],{"class":231},[52,40070,9231],{"class":58},[52,40072,238],{"class":231},[52,40074,9236],{"class":73},[52,40076,40077],{"class":54,"line":80},[52,40078,597],{"emptyLinePlaceholder":171},[52,40080,40081,40083,40085,40087,40089,40091],{"class":54,"line":108},[52,40082,1721],{"class":231},[52,40084,1724],{"class":371},[52,40086,1727],{"class":231},[52,40088,1730],{"class":231},[52,40090,1733],{"class":66},[52,40092,1736],{"class":58},[52,40094,40095],{"class":54,"line":118},[52,40096,1751],{"class":58},[52,40098,40099,40101,40104],{"class":54,"line":594},[52,40100,1756],{"class":58},[52,40102,40103],{"class":73},"'Halftone'",[52,40105,4722],{"class":58},[52,40107,40108,40110,40112],{"class":54,"line":600},[52,40109,4727],{"class":58},[52,40111,2869],{"class":73},[52,40113,2129],{"class":58},[52,40115,40116],{"class":54,"line":606},[52,40117,4744],{"class":58},[52,40119,40120],{"class":54,"line":653},[52,40121,1773],{"class":58},[52,40123,40124],{"class":54,"line":662},[52,40125,1778],{"class":58},[156,40127,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40129},[40130,40131],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/halftone",{"title":39863,"description":39871},"docs/components/Halftone","FE9bbvMNDaNzrmALJi6cgBqUj0aRisbj-Tjo1odmRlE",{"id":40138,"title":40139,"body":40140,"category":27760,"componentType":20842,"description":40147,"extension":168,"meta":40332,"navigation":171,"path":40333,"requiresChild":27763,"seo":40334,"stem":40335,"__hash__":40336},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":40141,"toc":40328},[40142,40145,40148,40150,40152,40155,40157,40326],[11,40143,40139],{"id":40144},"hexgrid",[15,40146,40147],{},"Honeycomb hexagonal grid pattern",[26901,40149],{"component":40139},[23,40151,26905],{"id":21503},[26907,40153],{":props":40154},"[{\"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,40156,26913],{"id":26912},[217,40158,40159,40188,40216,40244,40272],{":tabs":1543},[43,40160,40162],{"className":45,"code":40161,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,40163,40164,40172,40180],{"__ignoreMap":48},[52,40165,40166,40168,40170],{"class":54,"line":55},[52,40167,59],{"class":58},[52,40169,63],{"class":62},[52,40171,77],{"class":58},[52,40173,40174,40176,40178],{"class":54,"line":80},[52,40175,83],{"class":58},[52,40177,40139],{"class":62},[52,40179,105],{"class":58},[52,40181,40182,40184,40186],{"class":54,"line":108},[52,40183,121],{"class":58},[52,40185,63],{"class":62},[52,40187,77],{"class":58},[43,40189,40190],{"className":360,"code":40161,"language":362,"meta":48,"style":48},[31,40191,40192,40200,40208],{"__ignoreMap":48},[52,40193,40194,40196,40198],{"class":54,"line":55},[52,40195,59],{"class":58},[52,40197,63],{"class":371},[52,40199,77],{"class":58},[52,40201,40202,40204,40206],{"class":54,"line":80},[52,40203,83],{"class":58},[52,40205,40139],{"class":371},[52,40207,105],{"class":58},[52,40209,40210,40212,40214],{"class":54,"line":108},[52,40211,121],{"class":58},[52,40213,63],{"class":371},[52,40215,77],{"class":58},[43,40217,40218],{"className":2507,"code":40161,"language":2509,"meta":48,"style":48},[31,40219,40220,40228,40236],{"__ignoreMap":48},[52,40221,40222,40224,40226],{"class":54,"line":55},[52,40223,59],{"class":58},[52,40225,63],{"class":371},[52,40227,77],{"class":58},[52,40229,40230,40232,40234],{"class":54,"line":80},[52,40231,83],{"class":58},[52,40233,40139],{"class":371},[52,40235,105],{"class":58},[52,40237,40238,40240,40242],{"class":54,"line":108},[52,40239,121],{"class":58},[52,40241,63],{"class":371},[52,40243,77],{"class":58},[43,40245,40246],{"className":419,"code":40161,"language":420,"meta":48,"style":48},[31,40247,40248,40256,40264],{"__ignoreMap":48},[52,40249,40250,40252,40254],{"class":54,"line":55},[52,40251,59],{"class":58},[52,40253,63],{"class":371},[52,40255,77],{"class":58},[52,40257,40258,40260,40262],{"class":54,"line":80},[52,40259,83],{"class":58},[52,40261,40139],{"class":371},[52,40263,105],{"class":58},[52,40265,40266,40268,40270],{"class":54,"line":108},[52,40267,121],{"class":58},[52,40269,63],{"class":371},[52,40271,77],{"class":58},[43,40273,40275],{"className":222,"code":40274,"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,40276,40277,40287,40291,40305,40309,40318,40322],{"__ignoreMap":48},[52,40278,40279,40281,40283,40285],{"class":54,"line":55},[52,40280,232],{"class":231},[52,40282,9231],{"class":58},[52,40284,238],{"class":231},[52,40286,9236],{"class":73},[52,40288,40289],{"class":54,"line":80},[52,40290,597],{"emptyLinePlaceholder":171},[52,40292,40293,40295,40297,40299,40301,40303],{"class":54,"line":108},[52,40294,1721],{"class":231},[52,40296,1724],{"class":371},[52,40298,1727],{"class":231},[52,40300,1730],{"class":231},[52,40302,1733],{"class":66},[52,40304,1736],{"class":58},[52,40306,40307],{"class":54,"line":118},[52,40308,1751],{"class":58},[52,40310,40311,40313,40316],{"class":54,"line":594},[52,40312,1756],{"class":58},[52,40314,40315],{"class":73},"'HexGrid'",[52,40317,2129],{"class":58},[52,40319,40320],{"class":54,"line":600},[52,40321,1773],{"class":58},[52,40323,40324],{"class":54,"line":606},[52,40325,1778],{"class":58},[156,40327,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40329},[40330,40331],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hexgrid",{"title":40139,"description":40147},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":40338,"title":40339,"body":40340,"category":28771,"componentType":20848,"description":40347,"extension":168,"meta":40608,"navigation":171,"path":40609,"requiresChild":171,"seo":40610,"stem":40611,"__hash__":40612},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":40341,"toc":40604},[40342,40345,40348,40350,40352,40355,40357,40602],[11,40343,40339],{"id":40344},"hueshift",[15,40346,40347],{},"Rotate hue around the color wheel",[26901,40349],{"component":40339},[23,40351,26905],{"id":21503},[26907,40353],{":props":40354},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,40356,26913],{"id":26912},[217,40358,40359,40404,40448,40492,40536],{":tabs":1543},[43,40360,40362],{"className":45,"code":40361,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,40363,40364,40372,40380,40388,40396],{"__ignoreMap":48},[52,40365,40366,40368,40370],{"class":54,"line":55},[52,40367,59],{"class":58},[52,40369,63],{"class":62},[52,40371,77],{"class":58},[52,40373,40374,40376,40378],{"class":54,"line":80},[52,40375,83],{"class":58},[52,40377,40339],{"class":62},[52,40379,77],{"class":58},[52,40381,40382,40384,40386],{"class":54,"line":108},[52,40383,2213],{"class":58},[52,40385,2216],{"class":62},[52,40387,105],{"class":58},[52,40389,40390,40392,40394],{"class":54,"line":118},[52,40391,2230],{"class":58},[52,40393,40339],{"class":62},[52,40395,77],{"class":58},[52,40397,40398,40400,40402],{"class":54,"line":594},[52,40399,121],{"class":58},[52,40401,63],{"class":62},[52,40403,77],{"class":58},[43,40405,40406],{"className":360,"code":40361,"language":362,"meta":48,"style":48},[31,40407,40408,40416,40424,40432,40440],{"__ignoreMap":48},[52,40409,40410,40412,40414],{"class":54,"line":55},[52,40411,59],{"class":58},[52,40413,63],{"class":371},[52,40415,77],{"class":58},[52,40417,40418,40420,40422],{"class":54,"line":80},[52,40419,83],{"class":58},[52,40421,40339],{"class":371},[52,40423,77],{"class":58},[52,40425,40426,40428,40430],{"class":54,"line":108},[52,40427,2213],{"class":58},[52,40429,2216],{"class":371},[52,40431,105],{"class":58},[52,40433,40434,40436,40438],{"class":54,"line":118},[52,40435,2230],{"class":58},[52,40437,40339],{"class":371},[52,40439,77],{"class":58},[52,40441,40442,40444,40446],{"class":54,"line":594},[52,40443,121],{"class":58},[52,40445,63],{"class":371},[52,40447,77],{"class":58},[43,40449,40450],{"className":2507,"code":40361,"language":2509,"meta":48,"style":48},[31,40451,40452,40460,40468,40476,40484],{"__ignoreMap":48},[52,40453,40454,40456,40458],{"class":54,"line":55},[52,40455,59],{"class":58},[52,40457,63],{"class":371},[52,40459,77],{"class":58},[52,40461,40462,40464,40466],{"class":54,"line":80},[52,40463,83],{"class":58},[52,40465,40339],{"class":371},[52,40467,77],{"class":58},[52,40469,40470,40472,40474],{"class":54,"line":108},[52,40471,2213],{"class":58},[52,40473,2216],{"class":371},[52,40475,105],{"class":58},[52,40477,40478,40480,40482],{"class":54,"line":118},[52,40479,2230],{"class":58},[52,40481,40339],{"class":371},[52,40483,77],{"class":58},[52,40485,40486,40488,40490],{"class":54,"line":594},[52,40487,121],{"class":58},[52,40489,63],{"class":371},[52,40491,77],{"class":58},[43,40493,40494],{"className":419,"code":40361,"language":420,"meta":48,"style":48},[31,40495,40496,40504,40512,40520,40528],{"__ignoreMap":48},[52,40497,40498,40500,40502],{"class":54,"line":55},[52,40499,59],{"class":58},[52,40501,63],{"class":371},[52,40503,77],{"class":58},[52,40505,40506,40508,40510],{"class":54,"line":80},[52,40507,83],{"class":58},[52,40509,40339],{"class":371},[52,40511,77],{"class":58},[52,40513,40514,40516,40518],{"class":54,"line":108},[52,40515,2213],{"class":58},[52,40517,2216],{"class":371},[52,40519,105],{"class":58},[52,40521,40522,40524,40526],{"class":54,"line":118},[52,40523,2230],{"class":58},[52,40525,40339],{"class":371},[52,40527,77],{"class":58},[52,40529,40530,40532,40534],{"class":54,"line":594},[52,40531,121],{"class":58},[52,40533,63],{"class":371},[52,40535,77],{"class":58},[43,40537,40539],{"className":222,"code":40538,"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,40540,40541,40551,40555,40569,40573,40582,40590,40594,40598],{"__ignoreMap":48},[52,40542,40543,40545,40547,40549],{"class":54,"line":55},[52,40544,232],{"class":231},[52,40546,9231],{"class":58},[52,40548,238],{"class":231},[52,40550,9236],{"class":73},[52,40552,40553],{"class":54,"line":80},[52,40554,597],{"emptyLinePlaceholder":171},[52,40556,40557,40559,40561,40563,40565,40567],{"class":54,"line":108},[52,40558,1721],{"class":231},[52,40560,1724],{"class":371},[52,40562,1727],{"class":231},[52,40564,1730],{"class":231},[52,40566,1733],{"class":66},[52,40568,1736],{"class":58},[52,40570,40571],{"class":54,"line":118},[52,40572,1751],{"class":58},[52,40574,40575,40577,40580],{"class":54,"line":594},[52,40576,1756],{"class":58},[52,40578,40579],{"class":73},"'HueShift'",[52,40581,4722],{"class":58},[52,40583,40584,40586,40588],{"class":54,"line":600},[52,40585,4727],{"class":58},[52,40587,2869],{"class":73},[52,40589,2129],{"class":58},[52,40591,40592],{"class":54,"line":606},[52,40593,4744],{"class":58},[52,40595,40596],{"class":54,"line":653},[52,40597,1773],{"class":58},[52,40599,40600],{"class":54,"line":662},[52,40601,1778],{"class":58},[156,40603,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40605},[40606,40607],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hueshift",{"title":40339,"description":40347},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":40614,"title":40615,"body":40616,"category":27760,"componentType":20842,"description":40623,"extension":168,"meta":40808,"navigation":171,"path":40809,"requiresChild":27763,"seo":40810,"stem":40811,"__hash__":40812},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":40617,"toc":40804},[40618,40621,40624,40626,40628,40631,40633,40802],[11,40619,40615],{"id":40620},"imagetexture",[15,40622,40623],{},"Display an image with customizable object-fit modes",[26901,40625],{"component":40615},[23,40627,26905],{"id":21503},[26907,40629],{":props":40630},"[{\"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,40632,26913],{"id":26912},[217,40634,40635,40664,40692,40720,40748],{":tabs":1543},[43,40636,40638],{"className":45,"code":40637,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,40639,40640,40648,40656],{"__ignoreMap":48},[52,40641,40642,40644,40646],{"class":54,"line":55},[52,40643,59],{"class":58},[52,40645,63],{"class":62},[52,40647,77],{"class":58},[52,40649,40650,40652,40654],{"class":54,"line":80},[52,40651,83],{"class":58},[52,40653,40615],{"class":62},[52,40655,105],{"class":58},[52,40657,40658,40660,40662],{"class":54,"line":108},[52,40659,121],{"class":58},[52,40661,63],{"class":62},[52,40663,77],{"class":58},[43,40665,40666],{"className":360,"code":40637,"language":362,"meta":48,"style":48},[31,40667,40668,40676,40684],{"__ignoreMap":48},[52,40669,40670,40672,40674],{"class":54,"line":55},[52,40671,59],{"class":58},[52,40673,63],{"class":371},[52,40675,77],{"class":58},[52,40677,40678,40680,40682],{"class":54,"line":80},[52,40679,83],{"class":58},[52,40681,40615],{"class":371},[52,40683,105],{"class":58},[52,40685,40686,40688,40690],{"class":54,"line":108},[52,40687,121],{"class":58},[52,40689,63],{"class":371},[52,40691,77],{"class":58},[43,40693,40694],{"className":2507,"code":40637,"language":2509,"meta":48,"style":48},[31,40695,40696,40704,40712],{"__ignoreMap":48},[52,40697,40698,40700,40702],{"class":54,"line":55},[52,40699,59],{"class":58},[52,40701,63],{"class":371},[52,40703,77],{"class":58},[52,40705,40706,40708,40710],{"class":54,"line":80},[52,40707,83],{"class":58},[52,40709,40615],{"class":371},[52,40711,105],{"class":58},[52,40713,40714,40716,40718],{"class":54,"line":108},[52,40715,121],{"class":58},[52,40717,63],{"class":371},[52,40719,77],{"class":58},[43,40721,40722],{"className":419,"code":40637,"language":420,"meta":48,"style":48},[31,40723,40724,40732,40740],{"__ignoreMap":48},[52,40725,40726,40728,40730],{"class":54,"line":55},[52,40727,59],{"class":58},[52,40729,63],{"class":371},[52,40731,77],{"class":58},[52,40733,40734,40736,40738],{"class":54,"line":80},[52,40735,83],{"class":58},[52,40737,40615],{"class":371},[52,40739,105],{"class":58},[52,40741,40742,40744,40746],{"class":54,"line":108},[52,40743,121],{"class":58},[52,40745,63],{"class":371},[52,40747,77],{"class":58},[43,40749,40751],{"className":222,"code":40750,"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,40752,40753,40763,40767,40781,40785,40794,40798],{"__ignoreMap":48},[52,40754,40755,40757,40759,40761],{"class":54,"line":55},[52,40756,232],{"class":231},[52,40758,9231],{"class":58},[52,40760,238],{"class":231},[52,40762,9236],{"class":73},[52,40764,40765],{"class":54,"line":80},[52,40766,597],{"emptyLinePlaceholder":171},[52,40768,40769,40771,40773,40775,40777,40779],{"class":54,"line":108},[52,40770,1721],{"class":231},[52,40772,1724],{"class":371},[52,40774,1727],{"class":231},[52,40776,1730],{"class":231},[52,40778,1733],{"class":66},[52,40780,1736],{"class":58},[52,40782,40783],{"class":54,"line":118},[52,40784,1751],{"class":58},[52,40786,40787,40789,40792],{"class":54,"line":594},[52,40788,1756],{"class":58},[52,40790,40791],{"class":73},"'ImageTexture'",[52,40793,2129],{"class":58},[52,40795,40796],{"class":54,"line":600},[52,40797,1773],{"class":58},[52,40799,40800],{"class":54,"line":606},[52,40801,1778],{"class":58},[156,40803,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40805},[40806,40807],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/imagetexture",{"title":40615,"description":40623},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":40814,"title":40815,"body":40816,"category":28771,"componentType":20848,"description":40823,"extension":168,"meta":41078,"navigation":171,"path":41079,"requiresChild":171,"seo":41080,"stem":41081,"__hash__":41082},"components/docs/components/Invert.md","Invert",{"type":8,"value":40817,"toc":41075},[40818,40821,40824,40826,40828,41073],[11,40819,40815],{"id":40820},"invert",[15,40822,40823],{},"Invert RGB colors while preserving alpha",[26901,40825],{"component":40815},[23,40827,26913],{"id":26912},[217,40829,40830,40875,40919,40963,41007],{":tabs":1543},[43,40831,40833],{"className":45,"code":40832,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,40834,40835,40843,40851,40859,40867],{"__ignoreMap":48},[52,40836,40837,40839,40841],{"class":54,"line":55},[52,40838,59],{"class":58},[52,40840,63],{"class":62},[52,40842,77],{"class":58},[52,40844,40845,40847,40849],{"class":54,"line":80},[52,40846,83],{"class":58},[52,40848,40815],{"class":62},[52,40850,77],{"class":58},[52,40852,40853,40855,40857],{"class":54,"line":108},[52,40854,2213],{"class":58},[52,40856,2216],{"class":62},[52,40858,105],{"class":58},[52,40860,40861,40863,40865],{"class":54,"line":118},[52,40862,2230],{"class":58},[52,40864,40815],{"class":62},[52,40866,77],{"class":58},[52,40868,40869,40871,40873],{"class":54,"line":594},[52,40870,121],{"class":58},[52,40872,63],{"class":62},[52,40874,77],{"class":58},[43,40876,40877],{"className":360,"code":40832,"language":362,"meta":48,"style":48},[31,40878,40879,40887,40895,40903,40911],{"__ignoreMap":48},[52,40880,40881,40883,40885],{"class":54,"line":55},[52,40882,59],{"class":58},[52,40884,63],{"class":371},[52,40886,77],{"class":58},[52,40888,40889,40891,40893],{"class":54,"line":80},[52,40890,83],{"class":58},[52,40892,40815],{"class":371},[52,40894,77],{"class":58},[52,40896,40897,40899,40901],{"class":54,"line":108},[52,40898,2213],{"class":58},[52,40900,2216],{"class":371},[52,40902,105],{"class":58},[52,40904,40905,40907,40909],{"class":54,"line":118},[52,40906,2230],{"class":58},[52,40908,40815],{"class":371},[52,40910,77],{"class":58},[52,40912,40913,40915,40917],{"class":54,"line":594},[52,40914,121],{"class":58},[52,40916,63],{"class":371},[52,40918,77],{"class":58},[43,40920,40921],{"className":2507,"code":40832,"language":2509,"meta":48,"style":48},[31,40922,40923,40931,40939,40947,40955],{"__ignoreMap":48},[52,40924,40925,40927,40929],{"class":54,"line":55},[52,40926,59],{"class":58},[52,40928,63],{"class":371},[52,40930,77],{"class":58},[52,40932,40933,40935,40937],{"class":54,"line":80},[52,40934,83],{"class":58},[52,40936,40815],{"class":371},[52,40938,77],{"class":58},[52,40940,40941,40943,40945],{"class":54,"line":108},[52,40942,2213],{"class":58},[52,40944,2216],{"class":371},[52,40946,105],{"class":58},[52,40948,40949,40951,40953],{"class":54,"line":118},[52,40950,2230],{"class":58},[52,40952,40815],{"class":371},[52,40954,77],{"class":58},[52,40956,40957,40959,40961],{"class":54,"line":594},[52,40958,121],{"class":58},[52,40960,63],{"class":371},[52,40962,77],{"class":58},[43,40964,40965],{"className":419,"code":40832,"language":420,"meta":48,"style":48},[31,40966,40967,40975,40983,40991,40999],{"__ignoreMap":48},[52,40968,40969,40971,40973],{"class":54,"line":55},[52,40970,59],{"class":58},[52,40972,63],{"class":371},[52,40974,77],{"class":58},[52,40976,40977,40979,40981],{"class":54,"line":80},[52,40978,83],{"class":58},[52,40980,40815],{"class":371},[52,40982,77],{"class":58},[52,40984,40985,40987,40989],{"class":54,"line":108},[52,40986,2213],{"class":58},[52,40988,2216],{"class":371},[52,40990,105],{"class":58},[52,40992,40993,40995,40997],{"class":54,"line":118},[52,40994,2230],{"class":58},[52,40996,40815],{"class":371},[52,40998,77],{"class":58},[52,41000,41001,41003,41005],{"class":54,"line":594},[52,41002,121],{"class":58},[52,41004,63],{"class":371},[52,41006,77],{"class":58},[43,41008,41010],{"className":222,"code":41009,"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,41011,41012,41022,41026,41040,41044,41053,41061,41065,41069],{"__ignoreMap":48},[52,41013,41014,41016,41018,41020],{"class":54,"line":55},[52,41015,232],{"class":231},[52,41017,9231],{"class":58},[52,41019,238],{"class":231},[52,41021,9236],{"class":73},[52,41023,41024],{"class":54,"line":80},[52,41025,597],{"emptyLinePlaceholder":171},[52,41027,41028,41030,41032,41034,41036,41038],{"class":54,"line":108},[52,41029,1721],{"class":231},[52,41031,1724],{"class":371},[52,41033,1727],{"class":231},[52,41035,1730],{"class":231},[52,41037,1733],{"class":66},[52,41039,1736],{"class":58},[52,41041,41042],{"class":54,"line":118},[52,41043,1751],{"class":58},[52,41045,41046,41048,41051],{"class":54,"line":594},[52,41047,1756],{"class":58},[52,41049,41050],{"class":73},"'Invert'",[52,41052,4722],{"class":58},[52,41054,41055,41057,41059],{"class":54,"line":600},[52,41056,4727],{"class":58},[52,41058,2869],{"class":73},[52,41060,2129],{"class":58},[52,41062,41063],{"class":54,"line":606},[52,41064,4744],{"class":58},[52,41066,41067],{"class":54,"line":653},[52,41068,1773],{"class":58},[52,41070,41071],{"class":54,"line":662},[52,41072,1778],{"class":58},[156,41074,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41076},[41077],{"id":26912,"depth":80,"text":26913},{},"/docs/components/invert",{"title":40815,"description":40823},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":41084,"title":41085,"body":41086,"category":29105,"componentType":20848,"description":41093,"extension":168,"meta":41354,"navigation":171,"path":41355,"requiresChild":171,"seo":41356,"stem":41357,"__hash__":41358},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":41087,"toc":41350},[41088,41091,41094,41096,41098,41101,41103,41348],[11,41089,41085],{"id":41090},"kaleidoscope",[15,41092,41093],{},"Create a kaleidoscope effect with radial mirrored segments",[26901,41095],{"component":41085},[23,41097,26905],{"id":21503},[26907,41099],{":props":41100},"[{\"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,41102,26913],{"id":26912},[217,41104,41105,41150,41194,41238,41282],{":tabs":1543},[43,41106,41108],{"className":45,"code":41107,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,41109,41110,41118,41126,41134,41142],{"__ignoreMap":48},[52,41111,41112,41114,41116],{"class":54,"line":55},[52,41113,59],{"class":58},[52,41115,63],{"class":62},[52,41117,77],{"class":58},[52,41119,41120,41122,41124],{"class":54,"line":80},[52,41121,83],{"class":58},[52,41123,41085],{"class":62},[52,41125,77],{"class":58},[52,41127,41128,41130,41132],{"class":54,"line":108},[52,41129,2213],{"class":58},[52,41131,2216],{"class":62},[52,41133,105],{"class":58},[52,41135,41136,41138,41140],{"class":54,"line":118},[52,41137,2230],{"class":58},[52,41139,41085],{"class":62},[52,41141,77],{"class":58},[52,41143,41144,41146,41148],{"class":54,"line":594},[52,41145,121],{"class":58},[52,41147,63],{"class":62},[52,41149,77],{"class":58},[43,41151,41152],{"className":360,"code":41107,"language":362,"meta":48,"style":48},[31,41153,41154,41162,41170,41178,41186],{"__ignoreMap":48},[52,41155,41156,41158,41160],{"class":54,"line":55},[52,41157,59],{"class":58},[52,41159,63],{"class":371},[52,41161,77],{"class":58},[52,41163,41164,41166,41168],{"class":54,"line":80},[52,41165,83],{"class":58},[52,41167,41085],{"class":371},[52,41169,77],{"class":58},[52,41171,41172,41174,41176],{"class":54,"line":108},[52,41173,2213],{"class":58},[52,41175,2216],{"class":371},[52,41177,105],{"class":58},[52,41179,41180,41182,41184],{"class":54,"line":118},[52,41181,2230],{"class":58},[52,41183,41085],{"class":371},[52,41185,77],{"class":58},[52,41187,41188,41190,41192],{"class":54,"line":594},[52,41189,121],{"class":58},[52,41191,63],{"class":371},[52,41193,77],{"class":58},[43,41195,41196],{"className":2507,"code":41107,"language":2509,"meta":48,"style":48},[31,41197,41198,41206,41214,41222,41230],{"__ignoreMap":48},[52,41199,41200,41202,41204],{"class":54,"line":55},[52,41201,59],{"class":58},[52,41203,63],{"class":371},[52,41205,77],{"class":58},[52,41207,41208,41210,41212],{"class":54,"line":80},[52,41209,83],{"class":58},[52,41211,41085],{"class":371},[52,41213,77],{"class":58},[52,41215,41216,41218,41220],{"class":54,"line":108},[52,41217,2213],{"class":58},[52,41219,2216],{"class":371},[52,41221,105],{"class":58},[52,41223,41224,41226,41228],{"class":54,"line":118},[52,41225,2230],{"class":58},[52,41227,41085],{"class":371},[52,41229,77],{"class":58},[52,41231,41232,41234,41236],{"class":54,"line":594},[52,41233,121],{"class":58},[52,41235,63],{"class":371},[52,41237,77],{"class":58},[43,41239,41240],{"className":419,"code":41107,"language":420,"meta":48,"style":48},[31,41241,41242,41250,41258,41266,41274],{"__ignoreMap":48},[52,41243,41244,41246,41248],{"class":54,"line":55},[52,41245,59],{"class":58},[52,41247,63],{"class":371},[52,41249,77],{"class":58},[52,41251,41252,41254,41256],{"class":54,"line":80},[52,41253,83],{"class":58},[52,41255,41085],{"class":371},[52,41257,77],{"class":58},[52,41259,41260,41262,41264],{"class":54,"line":108},[52,41261,2213],{"class":58},[52,41263,2216],{"class":371},[52,41265,105],{"class":58},[52,41267,41268,41270,41272],{"class":54,"line":118},[52,41269,2230],{"class":58},[52,41271,41085],{"class":371},[52,41273,77],{"class":58},[52,41275,41276,41278,41280],{"class":54,"line":594},[52,41277,121],{"class":58},[52,41279,63],{"class":371},[52,41281,77],{"class":58},[43,41283,41285],{"className":222,"code":41284,"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,41286,41287,41297,41301,41315,41319,41328,41336,41340,41344],{"__ignoreMap":48},[52,41288,41289,41291,41293,41295],{"class":54,"line":55},[52,41290,232],{"class":231},[52,41292,9231],{"class":58},[52,41294,238],{"class":231},[52,41296,9236],{"class":73},[52,41298,41299],{"class":54,"line":80},[52,41300,597],{"emptyLinePlaceholder":171},[52,41302,41303,41305,41307,41309,41311,41313],{"class":54,"line":108},[52,41304,1721],{"class":231},[52,41306,1724],{"class":371},[52,41308,1727],{"class":231},[52,41310,1730],{"class":231},[52,41312,1733],{"class":66},[52,41314,1736],{"class":58},[52,41316,41317],{"class":54,"line":118},[52,41318,1751],{"class":58},[52,41320,41321,41323,41326],{"class":54,"line":594},[52,41322,1756],{"class":58},[52,41324,41325],{"class":73},"'Kaleidoscope'",[52,41327,4722],{"class":58},[52,41329,41330,41332,41334],{"class":54,"line":600},[52,41331,4727],{"class":58},[52,41333,2869],{"class":73},[52,41335,2129],{"class":58},[52,41337,41338],{"class":54,"line":606},[52,41339,4744],{"class":58},[52,41341,41342],{"class":54,"line":653},[52,41343,1773],{"class":58},[52,41345,41346],{"class":54,"line":662},[52,41347,1778],{"class":58},[156,41349,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41351},[41352,41353],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/kaleidoscope",{"title":41085,"description":41093},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":41360,"title":41361,"body":41362,"category":27503,"componentType":20842,"description":41369,"extension":168,"meta":41609,"navigation":171,"path":41610,"requiresChild":27763,"seo":41611,"stem":41612,"__hash__":41613},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":41363,"toc":41605},[41364,41367,41370,41372,41374,41377,41379,41603],[11,41365,41361],{"id":41366},"lensflare",[15,41368,41369],{},"Realistic camera lens flare with artifacts.",[26901,41371],{"component":41361},[23,41373,26905],{"id":21503},[26907,41375],{":props":41376},"[{\"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,41378,26913],{"id":26912},[217,41380,41381,41420,41463,41503,41545],{":tabs":1543},[43,41382,41384],{"className":45,"code":41383,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,41385,41386,41394,41400,41408,41412],{"__ignoreMap":48},[52,41387,41388,41390,41392],{"class":54,"line":55},[52,41389,59],{"class":58},[52,41391,63],{"class":62},[52,41393,77],{"class":58},[52,41395,41396,41398],{"class":54,"line":80},[52,41397,83],{"class":58},[52,41399,17856],{"class":62},[52,41401,41402,41404,41406],{"class":54,"line":108},[52,41403,17870],{"class":66},[52,41405,70],{"class":58},[52,41407,32462],{"class":73},[52,41409,41410],{"class":54,"line":118},[52,41411,1224],{"class":58},[52,41413,41414,41416,41418],{"class":54,"line":594},[52,41415,121],{"class":58},[52,41417,63],{"class":62},[52,41419,77],{"class":58},[43,41421,41423],{"className":360,"code":41422,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,41424,41425,41433,41439,41451,41455],{"__ignoreMap":48},[52,41426,41427,41429,41431],{"class":54,"line":55},[52,41428,59],{"class":58},[52,41430,63],{"class":371},[52,41432,77],{"class":58},[52,41434,41435,41437],{"class":54,"line":80},[52,41436,83],{"class":58},[52,41438,17856],{"class":371},[52,41440,41441,41443,41445,41447,41449],{"class":54,"line":108},[52,41442,17981],{"class":66},[52,41444,70],{"class":231},[52,41446,723],{"class":58},[52,41448,5467],{"class":371},[52,41450,729],{"class":58},[52,41452,41453],{"class":54,"line":118},[52,41454,1224],{"class":58},[52,41456,41457,41459,41461],{"class":54,"line":594},[52,41458,121],{"class":58},[52,41460,63],{"class":371},[52,41462,77],{"class":58},[43,41464,41465],{"className":2507,"code":41422,"language":2509,"meta":48,"style":48},[31,41466,41467,41475,41481,41491,41495],{"__ignoreMap":48},[52,41468,41469,41471,41473],{"class":54,"line":55},[52,41470,59],{"class":58},[52,41472,63],{"class":371},[52,41474,77],{"class":58},[52,41476,41477,41479],{"class":54,"line":80},[52,41478,83],{"class":58},[52,41480,17856],{"class":371},[52,41482,41483,41485,41487,41489],{"class":54,"line":108},[52,41484,17981],{"class":66},[52,41486,24845],{"class":58},[52,41488,5467],{"class":371},[52,41490,729],{"class":58},[52,41492,41493],{"class":54,"line":118},[52,41494,1224],{"class":58},[52,41496,41497,41499,41501],{"class":54,"line":594},[52,41498,121],{"class":58},[52,41500,63],{"class":371},[52,41502,77],{"class":58},[43,41504,41505],{"className":419,"code":41422,"language":420,"meta":48,"style":48},[31,41506,41507,41515,41521,41533,41537],{"__ignoreMap":48},[52,41508,41509,41511,41513],{"class":54,"line":55},[52,41510,59],{"class":58},[52,41512,63],{"class":371},[52,41514,77],{"class":58},[52,41516,41517,41519],{"class":54,"line":80},[52,41518,83],{"class":58},[52,41520,17856],{"class":371},[52,41522,41523,41525,41527,41529,41531],{"class":54,"line":108},[52,41524,17981],{"class":66},[52,41526,70],{"class":231},[52,41528,723],{"class":58},[52,41530,5467],{"class":371},[52,41532,729],{"class":58},[52,41534,41535],{"class":54,"line":118},[52,41536,1224],{"class":58},[52,41538,41539,41541,41543],{"class":54,"line":594},[52,41540,121],{"class":58},[52,41542,63],{"class":371},[52,41544,77],{"class":58},[43,41546,41548],{"className":222,"code":41547,"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,41549,41550,41560,41564,41578,41582,41595,41599],{"__ignoreMap":48},[52,41551,41552,41554,41556,41558],{"class":54,"line":55},[52,41553,232],{"class":231},[52,41555,9231],{"class":58},[52,41557,238],{"class":231},[52,41559,9236],{"class":73},[52,41561,41562],{"class":54,"line":80},[52,41563,597],{"emptyLinePlaceholder":171},[52,41565,41566,41568,41570,41572,41574,41576],{"class":54,"line":108},[52,41567,1721],{"class":231},[52,41569,1724],{"class":371},[52,41571,1727],{"class":231},[52,41573,1730],{"class":231},[52,41575,1733],{"class":66},[52,41577,1736],{"class":58},[52,41579,41580],{"class":54,"line":118},[52,41581,1751],{"class":58},[52,41583,41584,41586,41589,41591,41593],{"class":54,"line":594},[52,41585,1756],{"class":58},[52,41587,41588],{"class":73},"'LensFlare'",[52,41590,27194],{"class":58},[52,41592,5467],{"class":371},[52,41594,1768],{"class":58},[52,41596,41597],{"class":54,"line":600},[52,41598,1773],{"class":58},[52,41600,41601],{"class":54,"line":606},[52,41602,1778],{"class":58},[156,41604,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41606},[41607,41608],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lensflare",{"title":41361,"description":41369},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":41615,"title":41616,"body":41617,"category":27225,"componentType":20848,"description":41624,"extension":168,"meta":41941,"navigation":171,"path":41942,"requiresChild":171,"seo":41943,"stem":41944,"__hash__":41945},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":41618,"toc":41937},[41619,41622,41625,41627,41629,41632,41634,41935],[11,41620,41616],{"id":41621},"linearblur",[15,41623,41624],{},"Directional motion blur in a specific angle",[26901,41626],{"component":41616},[23,41628,26905],{"id":21503},[26907,41630],{":props":41631},"[{\"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,41633,26913],{"id":26912},[217,41635,41636,41692,41751,41807,41865],{":tabs":1543},[43,41637,41639],{"className":45,"code":41638,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41640,41641,41649,41656,41664,41668,41676,41684],{"__ignoreMap":48},[52,41642,41643,41645,41647],{"class":54,"line":55},[52,41644,59],{"class":58},[52,41646,63],{"class":62},[52,41648,77],{"class":58},[52,41650,41651,41653],{"class":54,"line":80},[52,41652,83],{"class":58},[52,41654,41655],{"class":62},"LinearBlur\n",[52,41657,41658,41660,41662],{"class":54,"line":108},[52,41659,17870],{"class":66},[52,41661,70],{"class":58},[52,41663,33488],{"class":73},[52,41665,41666],{"class":54,"line":118},[52,41667,26949],{"class":58},[52,41669,41670,41672,41674],{"class":54,"line":594},[52,41671,2213],{"class":58},[52,41673,2216],{"class":62},[52,41675,105],{"class":58},[52,41677,41678,41680,41682],{"class":54,"line":600},[52,41679,2230],{"class":58},[52,41681,41616],{"class":62},[52,41683,77],{"class":58},[52,41685,41686,41688,41690],{"class":54,"line":606},[52,41687,121],{"class":58},[52,41689,63],{"class":62},[52,41691,77],{"class":58},[43,41693,41695],{"className":360,"code":41694,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41696,41697,41705,41711,41723,41727,41735,41743],{"__ignoreMap":48},[52,41698,41699,41701,41703],{"class":54,"line":55},[52,41700,59],{"class":58},[52,41702,63],{"class":371},[52,41704,77],{"class":58},[52,41706,41707,41709],{"class":54,"line":80},[52,41708,83],{"class":58},[52,41710,41655],{"class":371},[52,41712,41713,41715,41717,41719,41721],{"class":54,"line":108},[52,41714,17981],{"class":66},[52,41716,70],{"class":231},[52,41718,723],{"class":58},[52,41720,13194],{"class":371},[52,41722,729],{"class":58},[52,41724,41725],{"class":54,"line":118},[52,41726,26949],{"class":58},[52,41728,41729,41731,41733],{"class":54,"line":594},[52,41730,2213],{"class":58},[52,41732,2216],{"class":371},[52,41734,105],{"class":58},[52,41736,41737,41739,41741],{"class":54,"line":600},[52,41738,2230],{"class":58},[52,41740,41616],{"class":371},[52,41742,77],{"class":58},[52,41744,41745,41747,41749],{"class":54,"line":606},[52,41746,121],{"class":58},[52,41748,63],{"class":371},[52,41750,77],{"class":58},[43,41752,41753],{"className":2507,"code":41694,"language":2509,"meta":48,"style":48},[31,41754,41755,41763,41769,41779,41783,41791,41799],{"__ignoreMap":48},[52,41756,41757,41759,41761],{"class":54,"line":55},[52,41758,59],{"class":58},[52,41760,63],{"class":371},[52,41762,77],{"class":58},[52,41764,41765,41767],{"class":54,"line":80},[52,41766,83],{"class":58},[52,41768,41655],{"class":371},[52,41770,41771,41773,41775,41777],{"class":54,"line":108},[52,41772,17981],{"class":66},[52,41774,24845],{"class":58},[52,41776,13194],{"class":371},[52,41778,729],{"class":58},[52,41780,41781],{"class":54,"line":118},[52,41782,26949],{"class":58},[52,41784,41785,41787,41789],{"class":54,"line":594},[52,41786,2213],{"class":58},[52,41788,2216],{"class":371},[52,41790,105],{"class":58},[52,41792,41793,41795,41797],{"class":54,"line":600},[52,41794,2230],{"class":58},[52,41796,41616],{"class":371},[52,41798,77],{"class":58},[52,41800,41801,41803,41805],{"class":54,"line":606},[52,41802,121],{"class":58},[52,41804,63],{"class":371},[52,41806,77],{"class":58},[43,41808,41809],{"className":419,"code":41694,"language":420,"meta":48,"style":48},[31,41810,41811,41819,41825,41837,41841,41849,41857],{"__ignoreMap":48},[52,41812,41813,41815,41817],{"class":54,"line":55},[52,41814,59],{"class":58},[52,41816,63],{"class":371},[52,41818,77],{"class":58},[52,41820,41821,41823],{"class":54,"line":80},[52,41822,83],{"class":58},[52,41824,41655],{"class":371},[52,41826,41827,41829,41831,41833,41835],{"class":54,"line":108},[52,41828,17981],{"class":66},[52,41830,70],{"class":231},[52,41832,723],{"class":58},[52,41834,13194],{"class":371},[52,41836,729],{"class":58},[52,41838,41839],{"class":54,"line":118},[52,41840,26949],{"class":58},[52,41842,41843,41845,41847],{"class":54,"line":594},[52,41844,2213],{"class":58},[52,41846,2216],{"class":371},[52,41848,105],{"class":58},[52,41850,41851,41853,41855],{"class":54,"line":600},[52,41852,2230],{"class":58},[52,41854,41616],{"class":371},[52,41856,77],{"class":58},[52,41858,41859,41861,41863],{"class":54,"line":606},[52,41860,121],{"class":58},[52,41862,63],{"class":371},[52,41864,77],{"class":58},[43,41866,41868],{"className":222,"code":41867,"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,41869,41870,41880,41884,41898,41902,41915,41923,41927,41931],{"__ignoreMap":48},[52,41871,41872,41874,41876,41878],{"class":54,"line":55},[52,41873,232],{"class":231},[52,41875,9231],{"class":58},[52,41877,238],{"class":231},[52,41879,9236],{"class":73},[52,41881,41882],{"class":54,"line":80},[52,41883,597],{"emptyLinePlaceholder":171},[52,41885,41886,41888,41890,41892,41894,41896],{"class":54,"line":108},[52,41887,1721],{"class":231},[52,41889,1724],{"class":371},[52,41891,1727],{"class":231},[52,41893,1730],{"class":231},[52,41895,1733],{"class":66},[52,41897,1736],{"class":58},[52,41899,41900],{"class":54,"line":118},[52,41901,1751],{"class":58},[52,41903,41904,41906,41909,41911,41913],{"class":54,"line":594},[52,41905,1756],{"class":58},[52,41907,41908],{"class":73},"'LinearBlur'",[52,41910,27194],{"class":58},[52,41912,13194],{"class":371},[52,41914,5259],{"class":58},[52,41916,41917,41919,41921],{"class":54,"line":600},[52,41918,4727],{"class":58},[52,41920,2869],{"class":73},[52,41922,2129],{"class":58},[52,41924,41925],{"class":54,"line":606},[52,41926,4744],{"class":58},[52,41928,41929],{"class":54,"line":653},[52,41930,1773],{"class":58},[52,41932,41933],{"class":54,"line":662},[52,41934,1778],{"class":58},[156,41936,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41938},[41939,41940],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/linearblur",{"title":41616,"description":41624},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":41947,"title":86,"body":41948,"category":27760,"componentType":20842,"description":41955,"extension":168,"meta":42139,"navigation":171,"path":42140,"requiresChild":27763,"seo":42141,"stem":42142,"__hash__":42143},"components/docs/components/LinearGradient.md",{"type":8,"value":41949,"toc":42135},[41950,41953,41956,41958,41960,41963,41965,42133],[11,41951,86],{"id":41952},"lineargradient",[15,41954,41955],{},"Create smooth linear color gradients",[26901,41957],{"component":86},[23,41959,26905],{"id":21503},[26907,41961],{":props":41962},"[{\"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,41964,26913],{"id":26912},[217,41966,41967,41996,42024,42052,42080],{":tabs":1543},[43,41968,41970],{"className":45,"code":41969,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,41971,41972,41980,41988],{"__ignoreMap":48},[52,41973,41974,41976,41978],{"class":54,"line":55},[52,41975,59],{"class":58},[52,41977,63],{"class":62},[52,41979,77],{"class":58},[52,41981,41982,41984,41986],{"class":54,"line":80},[52,41983,83],{"class":58},[52,41985,86],{"class":62},[52,41987,105],{"class":58},[52,41989,41990,41992,41994],{"class":54,"line":108},[52,41991,121],{"class":58},[52,41993,63],{"class":62},[52,41995,77],{"class":58},[43,41997,41998],{"className":360,"code":41969,"language":362,"meta":48,"style":48},[31,41999,42000,42008,42016],{"__ignoreMap":48},[52,42001,42002,42004,42006],{"class":54,"line":55},[52,42003,59],{"class":58},[52,42005,63],{"class":371},[52,42007,77],{"class":58},[52,42009,42010,42012,42014],{"class":54,"line":80},[52,42011,83],{"class":58},[52,42013,86],{"class":371},[52,42015,105],{"class":58},[52,42017,42018,42020,42022],{"class":54,"line":108},[52,42019,121],{"class":58},[52,42021,63],{"class":371},[52,42023,77],{"class":58},[43,42025,42026],{"className":2507,"code":41969,"language":2509,"meta":48,"style":48},[31,42027,42028,42036,42044],{"__ignoreMap":48},[52,42029,42030,42032,42034],{"class":54,"line":55},[52,42031,59],{"class":58},[52,42033,63],{"class":371},[52,42035,77],{"class":58},[52,42037,42038,42040,42042],{"class":54,"line":80},[52,42039,83],{"class":58},[52,42041,86],{"class":371},[52,42043,105],{"class":58},[52,42045,42046,42048,42050],{"class":54,"line":108},[52,42047,121],{"class":58},[52,42049,63],{"class":371},[52,42051,77],{"class":58},[43,42053,42054],{"className":419,"code":41969,"language":420,"meta":48,"style":48},[31,42055,42056,42064,42072],{"__ignoreMap":48},[52,42057,42058,42060,42062],{"class":54,"line":55},[52,42059,59],{"class":58},[52,42061,63],{"class":371},[52,42063,77],{"class":58},[52,42065,42066,42068,42070],{"class":54,"line":80},[52,42067,83],{"class":58},[52,42069,86],{"class":371},[52,42071,105],{"class":58},[52,42073,42074,42076,42078],{"class":54,"line":108},[52,42075,121],{"class":58},[52,42077,63],{"class":371},[52,42079,77],{"class":58},[43,42081,42083],{"className":222,"code":42082,"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,42084,42085,42095,42099,42113,42117,42125,42129],{"__ignoreMap":48},[52,42086,42087,42089,42091,42093],{"class":54,"line":55},[52,42088,232],{"class":231},[52,42090,9231],{"class":58},[52,42092,238],{"class":231},[52,42094,9236],{"class":73},[52,42096,42097],{"class":54,"line":80},[52,42098,597],{"emptyLinePlaceholder":171},[52,42100,42101,42103,42105,42107,42109,42111],{"class":54,"line":108},[52,42102,1721],{"class":231},[52,42104,1724],{"class":371},[52,42106,1727],{"class":231},[52,42108,1730],{"class":231},[52,42110,1733],{"class":66},[52,42112,1736],{"class":58},[52,42114,42115],{"class":54,"line":118},[52,42116,1751],{"class":58},[52,42118,42119,42121,42123],{"class":54,"line":594},[52,42120,1756],{"class":58},[52,42122,2126],{"class":73},[52,42124,2129],{"class":58},[52,42126,42127],{"class":54,"line":600},[52,42128,1773],{"class":58},[52,42130,42131],{"class":54,"line":606},[52,42132,1778],{"class":58},[156,42134,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42136},[42137,42138],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lineargradient",{"title":86,"description":41955},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":42145,"title":42146,"body":42147,"category":30161,"componentType":20848,"description":42154,"extension":168,"meta":42517,"navigation":171,"path":42518,"requiresChild":171,"seo":42519,"stem":42520,"__hash__":42521},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":42148,"toc":42513},[42149,42152,42155,42157,42159,42162,42164,42511],[11,42150,42146],{"id":42151},"liquify",[15,42153,42154],{},"Liquid-like interactive deformation effect",[26901,42156],{"component":42146},[23,42158,26905],{"id":21503},[26907,42160],{":props":42161},"[{\"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,42163,26913],{"id":26912},[217,42165,42166,42230,42301,42367,42437],{":tabs":1543},[43,42167,42169],{"className":45,"code":42168,"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,42170,42171,42179,42186,42194,42202,42206,42214,42222],{"__ignoreMap":48},[52,42172,42173,42175,42177],{"class":54,"line":55},[52,42174,59],{"class":58},[52,42176,63],{"class":62},[52,42178,77],{"class":58},[52,42180,42181,42183],{"class":54,"line":80},[52,42182,83],{"class":58},[52,42184,42185],{"class":62},"Liquify\n",[52,42187,42188,42190,42192],{"class":54,"line":108},[52,42189,17870],{"class":66},[52,42191,70],{"class":58},[52,42193,32453],{"class":73},[52,42195,42196,42198,42200],{"class":54,"line":118},[52,42197,14901],{"class":66},[52,42199,70],{"class":58},[52,42201,28827],{"class":73},[52,42203,42204],{"class":54,"line":594},[52,42205,26949],{"class":58},[52,42207,42208,42210,42212],{"class":54,"line":600},[52,42209,2213],{"class":58},[52,42211,2216],{"class":62},[52,42213,105],{"class":58},[52,42215,42216,42218,42220],{"class":54,"line":606},[52,42217,2230],{"class":58},[52,42219,42146],{"class":62},[52,42221,77],{"class":58},[52,42223,42224,42226,42228],{"class":54,"line":653},[52,42225,121],{"class":58},[52,42227,63],{"class":62},[52,42229,77],{"class":58},[43,42231,42233],{"className":360,"code":42232,"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,42234,42235,42243,42249,42261,42273,42277,42285,42293],{"__ignoreMap":48},[52,42236,42237,42239,42241],{"class":54,"line":55},[52,42238,59],{"class":58},[52,42240,63],{"class":371},[52,42242,77],{"class":58},[52,42244,42245,42247],{"class":54,"line":80},[52,42246,83],{"class":58},[52,42248,42185],{"class":371},[52,42250,42251,42253,42255,42257,42259],{"class":54,"line":108},[52,42252,17981],{"class":66},[52,42254,70],{"class":231},[52,42256,723],{"class":58},[52,42258,32520],{"class":371},[52,42260,729],{"class":58},[52,42262,42263,42265,42267,42269,42271],{"class":54,"line":118},[52,42264,7361],{"class":66},[52,42266,70],{"class":231},[52,42268,723],{"class":58},[52,42270,6391],{"class":371},[52,42272,729],{"class":58},[52,42274,42275],{"class":54,"line":594},[52,42276,26949],{"class":58},[52,42278,42279,42281,42283],{"class":54,"line":600},[52,42280,2213],{"class":58},[52,42282,2216],{"class":371},[52,42284,105],{"class":58},[52,42286,42287,42289,42291],{"class":54,"line":606},[52,42288,2230],{"class":58},[52,42290,42146],{"class":371},[52,42292,77],{"class":58},[52,42294,42295,42297,42299],{"class":54,"line":653},[52,42296,121],{"class":58},[52,42298,63],{"class":371},[52,42300,77],{"class":58},[43,42302,42303],{"className":2507,"code":42232,"language":2509,"meta":48,"style":48},[31,42304,42305,42313,42319,42329,42339,42343,42351,42359],{"__ignoreMap":48},[52,42306,42307,42309,42311],{"class":54,"line":55},[52,42308,59],{"class":58},[52,42310,63],{"class":371},[52,42312,77],{"class":58},[52,42314,42315,42317],{"class":54,"line":80},[52,42316,83],{"class":58},[52,42318,42185],{"class":371},[52,42320,42321,42323,42325,42327],{"class":54,"line":108},[52,42322,17981],{"class":66},[52,42324,24845],{"class":58},[52,42326,32520],{"class":371},[52,42328,729],{"class":58},[52,42330,42331,42333,42335,42337],{"class":54,"line":118},[52,42332,7361],{"class":66},[52,42334,24845],{"class":58},[52,42336,6391],{"class":371},[52,42338,729],{"class":58},[52,42340,42341],{"class":54,"line":594},[52,42342,26949],{"class":58},[52,42344,42345,42347,42349],{"class":54,"line":600},[52,42346,2213],{"class":58},[52,42348,2216],{"class":371},[52,42350,105],{"class":58},[52,42352,42353,42355,42357],{"class":54,"line":606},[52,42354,2230],{"class":58},[52,42356,42146],{"class":371},[52,42358,77],{"class":58},[52,42360,42361,42363,42365],{"class":54,"line":653},[52,42362,121],{"class":58},[52,42364,63],{"class":371},[52,42366,77],{"class":58},[43,42368,42369],{"className":419,"code":42232,"language":420,"meta":48,"style":48},[31,42370,42371,42379,42385,42397,42409,42413,42421,42429],{"__ignoreMap":48},[52,42372,42373,42375,42377],{"class":54,"line":55},[52,42374,59],{"class":58},[52,42376,63],{"class":371},[52,42378,77],{"class":58},[52,42380,42381,42383],{"class":54,"line":80},[52,42382,83],{"class":58},[52,42384,42185],{"class":371},[52,42386,42387,42389,42391,42393,42395],{"class":54,"line":108},[52,42388,17981],{"class":66},[52,42390,70],{"class":231},[52,42392,723],{"class":58},[52,42394,32520],{"class":371},[52,42396,729],{"class":58},[52,42398,42399,42401,42403,42405,42407],{"class":54,"line":118},[52,42400,7361],{"class":66},[52,42402,70],{"class":231},[52,42404,723],{"class":58},[52,42406,6391],{"class":371},[52,42408,729],{"class":58},[52,42410,42411],{"class":54,"line":594},[52,42412,26949],{"class":58},[52,42414,42415,42417,42419],{"class":54,"line":600},[52,42416,2213],{"class":58},[52,42418,2216],{"class":371},[52,42420,105],{"class":58},[52,42422,42423,42425,42427],{"class":54,"line":606},[52,42424,2230],{"class":58},[52,42426,42146],{"class":371},[52,42428,77],{"class":58},[52,42430,42431,42433,42435],{"class":54,"line":653},[52,42432,121],{"class":58},[52,42434,63],{"class":371},[52,42436,77],{"class":58},[43,42438,42440],{"className":222,"code":42439,"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,42441,42442,42452,42456,42470,42474,42491,42499,42503,42507],{"__ignoreMap":48},[52,42443,42444,42446,42448,42450],{"class":54,"line":55},[52,42445,232],{"class":231},[52,42447,9231],{"class":58},[52,42449,238],{"class":231},[52,42451,9236],{"class":73},[52,42453,42454],{"class":54,"line":80},[52,42455,597],{"emptyLinePlaceholder":171},[52,42457,42458,42460,42462,42464,42466,42468],{"class":54,"line":108},[52,42459,1721],{"class":231},[52,42461,1724],{"class":371},[52,42463,1727],{"class":231},[52,42465,1730],{"class":231},[52,42467,1733],{"class":66},[52,42469,1736],{"class":58},[52,42471,42472],{"class":54,"line":118},[52,42473,1751],{"class":58},[52,42475,42476,42478,42481,42483,42485,42487,42489],{"class":54,"line":594},[52,42477,1756],{"class":58},[52,42479,42480],{"class":73},"'Liquify'",[52,42482,27194],{"class":58},[52,42484,32520],{"class":371},[52,42486,4278],{"class":58},[52,42488,6391],{"class":371},[52,42490,5259],{"class":58},[52,42492,42493,42495,42497],{"class":54,"line":600},[52,42494,4727],{"class":58},[52,42496,2869],{"class":73},[52,42498,2129],{"class":58},[52,42500,42501],{"class":54,"line":606},[52,42502,4744],{"class":58},[52,42504,42505],{"class":54,"line":653},[52,42506,1773],{"class":58},[52,42508,42509],{"class":54,"line":662},[52,42510,1778],{"class":58},[156,42512,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42514},[42515,42516],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/liquify",{"title":42146,"description":42154},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":42523,"title":42524,"body":42525,"category":29105,"componentType":20848,"description":42531,"extension":168,"meta":42792,"navigation":171,"path":42793,"requiresChild":171,"seo":42794,"stem":42795,"__hash__":42796},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":42526,"toc":42788},[42527,42529,42532,42534,42536,42539,42541,42786],[11,42528,42524],{"id":13656},[15,42530,42531],{},"Mirror content across a line defined by center point and angle",[26901,42533],{"component":42524},[23,42535,26905],{"id":21503},[26907,42537],{":props":42538},"[{\"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,42540,26913],{"id":26912},[217,42542,42543,42588,42632,42676,42720],{":tabs":1543},[43,42544,42546],{"className":45,"code":42545,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,42547,42548,42556,42564,42572,42580],{"__ignoreMap":48},[52,42549,42550,42552,42554],{"class":54,"line":55},[52,42551,59],{"class":58},[52,42553,63],{"class":62},[52,42555,77],{"class":58},[52,42557,42558,42560,42562],{"class":54,"line":80},[52,42559,83],{"class":58},[52,42561,42524],{"class":62},[52,42563,77],{"class":58},[52,42565,42566,42568,42570],{"class":54,"line":108},[52,42567,2213],{"class":58},[52,42569,2216],{"class":62},[52,42571,105],{"class":58},[52,42573,42574,42576,42578],{"class":54,"line":118},[52,42575,2230],{"class":58},[52,42577,42524],{"class":62},[52,42579,77],{"class":58},[52,42581,42582,42584,42586],{"class":54,"line":594},[52,42583,121],{"class":58},[52,42585,63],{"class":62},[52,42587,77],{"class":58},[43,42589,42590],{"className":360,"code":42545,"language":362,"meta":48,"style":48},[31,42591,42592,42600,42608,42616,42624],{"__ignoreMap":48},[52,42593,42594,42596,42598],{"class":54,"line":55},[52,42595,59],{"class":58},[52,42597,63],{"class":371},[52,42599,77],{"class":58},[52,42601,42602,42604,42606],{"class":54,"line":80},[52,42603,83],{"class":58},[52,42605,42524],{"class":371},[52,42607,77],{"class":58},[52,42609,42610,42612,42614],{"class":54,"line":108},[52,42611,2213],{"class":58},[52,42613,2216],{"class":371},[52,42615,105],{"class":58},[52,42617,42618,42620,42622],{"class":54,"line":118},[52,42619,2230],{"class":58},[52,42621,42524],{"class":371},[52,42623,77],{"class":58},[52,42625,42626,42628,42630],{"class":54,"line":594},[52,42627,121],{"class":58},[52,42629,63],{"class":371},[52,42631,77],{"class":58},[43,42633,42634],{"className":2507,"code":42545,"language":2509,"meta":48,"style":48},[31,42635,42636,42644,42652,42660,42668],{"__ignoreMap":48},[52,42637,42638,42640,42642],{"class":54,"line":55},[52,42639,59],{"class":58},[52,42641,63],{"class":371},[52,42643,77],{"class":58},[52,42645,42646,42648,42650],{"class":54,"line":80},[52,42647,83],{"class":58},[52,42649,42524],{"class":371},[52,42651,77],{"class":58},[52,42653,42654,42656,42658],{"class":54,"line":108},[52,42655,2213],{"class":58},[52,42657,2216],{"class":371},[52,42659,105],{"class":58},[52,42661,42662,42664,42666],{"class":54,"line":118},[52,42663,2230],{"class":58},[52,42665,42524],{"class":371},[52,42667,77],{"class":58},[52,42669,42670,42672,42674],{"class":54,"line":594},[52,42671,121],{"class":58},[52,42673,63],{"class":371},[52,42675,77],{"class":58},[43,42677,42678],{"className":419,"code":42545,"language":420,"meta":48,"style":48},[31,42679,42680,42688,42696,42704,42712],{"__ignoreMap":48},[52,42681,42682,42684,42686],{"class":54,"line":55},[52,42683,59],{"class":58},[52,42685,63],{"class":371},[52,42687,77],{"class":58},[52,42689,42690,42692,42694],{"class":54,"line":80},[52,42691,83],{"class":58},[52,42693,42524],{"class":371},[52,42695,77],{"class":58},[52,42697,42698,42700,42702],{"class":54,"line":108},[52,42699,2213],{"class":58},[52,42701,2216],{"class":371},[52,42703,105],{"class":58},[52,42705,42706,42708,42710],{"class":54,"line":118},[52,42707,2230],{"class":58},[52,42709,42524],{"class":371},[52,42711,77],{"class":58},[52,42713,42714,42716,42718],{"class":54,"line":594},[52,42715,121],{"class":58},[52,42717,63],{"class":371},[52,42719,77],{"class":58},[43,42721,42723],{"className":222,"code":42722,"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,42724,42725,42735,42739,42753,42757,42766,42774,42778,42782],{"__ignoreMap":48},[52,42726,42727,42729,42731,42733],{"class":54,"line":55},[52,42728,232],{"class":231},[52,42730,9231],{"class":58},[52,42732,238],{"class":231},[52,42734,9236],{"class":73},[52,42736,42737],{"class":54,"line":80},[52,42738,597],{"emptyLinePlaceholder":171},[52,42740,42741,42743,42745,42747,42749,42751],{"class":54,"line":108},[52,42742,1721],{"class":231},[52,42744,1724],{"class":371},[52,42746,1727],{"class":231},[52,42748,1730],{"class":231},[52,42750,1733],{"class":66},[52,42752,1736],{"class":58},[52,42754,42755],{"class":54,"line":118},[52,42756,1751],{"class":58},[52,42758,42759,42761,42764],{"class":54,"line":594},[52,42760,1756],{"class":58},[52,42762,42763],{"class":73},"'Mirror'",[52,42765,4722],{"class":58},[52,42767,42768,42770,42772],{"class":54,"line":600},[52,42769,4727],{"class":58},[52,42771,2869],{"class":73},[52,42773,2129],{"class":58},[52,42775,42776],{"class":54,"line":606},[52,42777,4744],{"class":58},[52,42779,42780],{"class":54,"line":653},[52,42781,1773],{"class":58},[52,42783,42784],{"class":54,"line":662},[52,42785,1778],{"class":58},[156,42787,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42789},[42790,42791],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/mirror",{"title":42524,"description":42531},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":42798,"title":42799,"body":42800,"category":27760,"componentType":20842,"description":42807,"extension":168,"meta":42992,"navigation":171,"path":42993,"requiresChild":27763,"seo":42994,"stem":42995,"__hash__":42996},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":42801,"toc":42988},[42802,42805,42808,42810,42812,42815,42817,42986],[11,42803,42799],{"id":42804},"multipointgradient",[15,42806,42807],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26901,42809],{"component":42799},[23,42811,26905],{"id":21503},[26907,42813],{":props":42814},"[{\"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,42816,26913],{"id":26912},[217,42818,42819,42848,42876,42904,42932],{":tabs":1543},[43,42820,42822],{"className":45,"code":42821,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,42823,42824,42832,42840],{"__ignoreMap":48},[52,42825,42826,42828,42830],{"class":54,"line":55},[52,42827,59],{"class":58},[52,42829,63],{"class":62},[52,42831,77],{"class":58},[52,42833,42834,42836,42838],{"class":54,"line":80},[52,42835,83],{"class":58},[52,42837,42799],{"class":62},[52,42839,105],{"class":58},[52,42841,42842,42844,42846],{"class":54,"line":108},[52,42843,121],{"class":58},[52,42845,63],{"class":62},[52,42847,77],{"class":58},[43,42849,42850],{"className":360,"code":42821,"language":362,"meta":48,"style":48},[31,42851,42852,42860,42868],{"__ignoreMap":48},[52,42853,42854,42856,42858],{"class":54,"line":55},[52,42855,59],{"class":58},[52,42857,63],{"class":371},[52,42859,77],{"class":58},[52,42861,42862,42864,42866],{"class":54,"line":80},[52,42863,83],{"class":58},[52,42865,42799],{"class":371},[52,42867,105],{"class":58},[52,42869,42870,42872,42874],{"class":54,"line":108},[52,42871,121],{"class":58},[52,42873,63],{"class":371},[52,42875,77],{"class":58},[43,42877,42878],{"className":2507,"code":42821,"language":2509,"meta":48,"style":48},[31,42879,42880,42888,42896],{"__ignoreMap":48},[52,42881,42882,42884,42886],{"class":54,"line":55},[52,42883,59],{"class":58},[52,42885,63],{"class":371},[52,42887,77],{"class":58},[52,42889,42890,42892,42894],{"class":54,"line":80},[52,42891,83],{"class":58},[52,42893,42799],{"class":371},[52,42895,105],{"class":58},[52,42897,42898,42900,42902],{"class":54,"line":108},[52,42899,121],{"class":58},[52,42901,63],{"class":371},[52,42903,77],{"class":58},[43,42905,42906],{"className":419,"code":42821,"language":420,"meta":48,"style":48},[31,42907,42908,42916,42924],{"__ignoreMap":48},[52,42909,42910,42912,42914],{"class":54,"line":55},[52,42911,59],{"class":58},[52,42913,63],{"class":371},[52,42915,77],{"class":58},[52,42917,42918,42920,42922],{"class":54,"line":80},[52,42919,83],{"class":58},[52,42921,42799],{"class":371},[52,42923,105],{"class":58},[52,42925,42926,42928,42930],{"class":54,"line":108},[52,42927,121],{"class":58},[52,42929,63],{"class":371},[52,42931,77],{"class":58},[43,42933,42935],{"className":222,"code":42934,"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,42936,42937,42947,42951,42965,42969,42978,42982],{"__ignoreMap":48},[52,42938,42939,42941,42943,42945],{"class":54,"line":55},[52,42940,232],{"class":231},[52,42942,9231],{"class":58},[52,42944,238],{"class":231},[52,42946,9236],{"class":73},[52,42948,42949],{"class":54,"line":80},[52,42950,597],{"emptyLinePlaceholder":171},[52,42952,42953,42955,42957,42959,42961,42963],{"class":54,"line":108},[52,42954,1721],{"class":231},[52,42956,1724],{"class":371},[52,42958,1727],{"class":231},[52,42960,1730],{"class":231},[52,42962,1733],{"class":66},[52,42964,1736],{"class":58},[52,42966,42967],{"class":54,"line":118},[52,42968,1751],{"class":58},[52,42970,42971,42973,42976],{"class":54,"line":594},[52,42972,1756],{"class":58},[52,42974,42975],{"class":73},"'MultiPointGradient'",[52,42977,2129],{"class":58},[52,42979,42980],{"class":54,"line":600},[52,42981,1773],{"class":58},[52,42983,42984],{"class":54,"line":606},[52,42985,1778],{"class":58},[156,42987,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42989},[42990,42991],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/multipointgradient",{"title":42799,"description":42807},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":42998,"title":18477,"body":42999,"category":32398,"componentType":20842,"description":43006,"extension":168,"meta":43285,"navigation":171,"path":43286,"requiresChild":27763,"seo":43287,"stem":43288,"__hash__":43289},"components/docs/components/Neon.md",{"type":8,"value":43000,"toc":43281},[43001,43004,43007,43009,43011,43014,43016,43279],[11,43002,18477],{"id":43003},"neon",[15,43005,43006],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26901,43008],{"component":18477},[23,43010,26905],{"id":21503},[26907,43012],{":props":43013},"[{\"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,43015,26913],{"id":26912},[217,43017,43018,43068,43119,43167,43217],{":tabs":1543},[43,43019,43021],{"className":45,"code":43020,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,43022,43023,43031,43038,43047,43056,43060],{"__ignoreMap":48},[52,43024,43025,43027,43029],{"class":54,"line":55},[52,43026,59],{"class":58},[52,43028,63],{"class":62},[52,43030,77],{"class":58},[52,43032,43033,43035],{"class":54,"line":80},[52,43034,83],{"class":58},[52,43036,43037],{"class":62},"Neon\n",[52,43039,43040,43042,43044],{"class":54,"line":108},[52,43041,7351],{"class":66},[52,43043,70],{"class":58},[52,43045,43046],{"class":73},"\"#00ddff\"\n",[52,43048,43049,43051,43053],{"class":54,"line":118},[52,43050,17870],{"class":66},[52,43052,70],{"class":58},[52,43054,43055],{"class":73},"\"1.5\"\n",[52,43057,43058],{"class":54,"line":594},[52,43059,1224],{"class":58},[52,43061,43062,43064,43066],{"class":54,"line":600},[52,43063,121],{"class":58},[52,43065,63],{"class":62},[52,43067,77],{"class":58},[43,43069,43071],{"className":360,"code":43070,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,43072,43073,43081,43087,43095,43107,43111],{"__ignoreMap":48},[52,43074,43075,43077,43079],{"class":54,"line":55},[52,43076,59],{"class":58},[52,43078,63],{"class":371},[52,43080,77],{"class":58},[52,43082,43083,43085],{"class":54,"line":80},[52,43084,83],{"class":58},[52,43086,43037],{"class":371},[52,43088,43089,43091,43093],{"class":54,"line":108},[52,43090,7351],{"class":66},[52,43092,70],{"class":231},[52,43094,43046],{"class":73},[52,43096,43097,43099,43101,43103,43105],{"class":54,"line":118},[52,43098,17981],{"class":66},[52,43100,70],{"class":231},[52,43102,723],{"class":58},[52,43104,13171],{"class":371},[52,43106,729],{"class":58},[52,43108,43109],{"class":54,"line":594},[52,43110,1224],{"class":58},[52,43112,43113,43115,43117],{"class":54,"line":600},[52,43114,121],{"class":58},[52,43116,63],{"class":371},[52,43118,77],{"class":58},[43,43120,43121],{"className":2507,"code":43070,"language":2509,"meta":48,"style":48},[31,43122,43123,43131,43137,43145,43155,43159],{"__ignoreMap":48},[52,43124,43125,43127,43129],{"class":54,"line":55},[52,43126,59],{"class":58},[52,43128,63],{"class":371},[52,43130,77],{"class":58},[52,43132,43133,43135],{"class":54,"line":80},[52,43134,83],{"class":58},[52,43136,43037],{"class":371},[52,43138,43139,43141,43143],{"class":54,"line":108},[52,43140,7351],{"class":66},[52,43142,70],{"class":58},[52,43144,43046],{"class":73},[52,43146,43147,43149,43151,43153],{"class":54,"line":118},[52,43148,17981],{"class":66},[52,43150,24845],{"class":58},[52,43152,13171],{"class":371},[52,43154,729],{"class":58},[52,43156,43157],{"class":54,"line":594},[52,43158,1224],{"class":58},[52,43160,43161,43163,43165],{"class":54,"line":600},[52,43162,121],{"class":58},[52,43164,63],{"class":371},[52,43166,77],{"class":58},[43,43168,43169],{"className":419,"code":43070,"language":420,"meta":48,"style":48},[31,43170,43171,43179,43185,43193,43205,43209],{"__ignoreMap":48},[52,43172,43173,43175,43177],{"class":54,"line":55},[52,43174,59],{"class":58},[52,43176,63],{"class":371},[52,43178,77],{"class":58},[52,43180,43181,43183],{"class":54,"line":80},[52,43182,83],{"class":58},[52,43184,43037],{"class":371},[52,43186,43187,43189,43191],{"class":54,"line":108},[52,43188,7351],{"class":66},[52,43190,70],{"class":231},[52,43192,43046],{"class":73},[52,43194,43195,43197,43199,43201,43203],{"class":54,"line":118},[52,43196,17981],{"class":66},[52,43198,70],{"class":231},[52,43200,723],{"class":58},[52,43202,13171],{"class":371},[52,43204,729],{"class":58},[52,43206,43207],{"class":54,"line":594},[52,43208,1224],{"class":58},[52,43210,43211,43213,43215],{"class":54,"line":600},[52,43212,121],{"class":58},[52,43214,63],{"class":371},[52,43216,77],{"class":58},[43,43218,43220],{"className":222,"code":43219,"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,43221,43222,43232,43236,43250,43254,43271,43275],{"__ignoreMap":48},[52,43223,43224,43226,43228,43230],{"class":54,"line":55},[52,43225,232],{"class":231},[52,43227,9231],{"class":58},[52,43229,238],{"class":231},[52,43231,9236],{"class":73},[52,43233,43234],{"class":54,"line":80},[52,43235,597],{"emptyLinePlaceholder":171},[52,43237,43238,43240,43242,43244,43246,43248],{"class":54,"line":108},[52,43239,1721],{"class":231},[52,43241,1724],{"class":371},[52,43243,1727],{"class":231},[52,43245,1730],{"class":231},[52,43247,1733],{"class":66},[52,43249,1736],{"class":58},[52,43251,43252],{"class":54,"line":118},[52,43253,1751],{"class":58},[52,43255,43256,43258,43260,43262,43265,43267,43269],{"class":54,"line":594},[52,43257,1756],{"class":58},[52,43259,19069],{"class":73},[52,43261,1762],{"class":58},[52,43263,43264],{"class":73},"'#00ddff'",[52,43266,34623],{"class":58},[52,43268,13171],{"class":371},[52,43270,1768],{"class":58},[52,43272,43273],{"class":54,"line":600},[52,43274,1773],{"class":58},[52,43276,43277],{"class":54,"line":606},[52,43278,1778],{"class":58},[156,43280,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43282},[43283,43284],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/neon",{"title":18477,"description":43006},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":43291,"title":43292,"body":43293,"category":27503,"componentType":20848,"description":43300,"extension":168,"meta":43561,"navigation":171,"path":43562,"requiresChild":171,"seo":43563,"stem":43564,"__hash__":43565},"components/docs/components/Paper.md","Paper",{"type":8,"value":43294,"toc":43557},[43295,43298,43301,43303,43305,43308,43310,43555],[11,43296,43292],{"id":43297},"paper",[15,43299,43300],{},"Applies realistic paper grain and surface roughness to child content",[26901,43302],{"component":43292},[23,43304,26905],{"id":21503},[26907,43306],{":props":43307},"[{\"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,43309,26913],{"id":26912},[217,43311,43312,43357,43401,43445,43489],{":tabs":1543},[43,43313,43315],{"className":45,"code":43314,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,43316,43317,43325,43333,43341,43349],{"__ignoreMap":48},[52,43318,43319,43321,43323],{"class":54,"line":55},[52,43320,59],{"class":58},[52,43322,63],{"class":62},[52,43324,77],{"class":58},[52,43326,43327,43329,43331],{"class":54,"line":80},[52,43328,83],{"class":58},[52,43330,43292],{"class":62},[52,43332,77],{"class":58},[52,43334,43335,43337,43339],{"class":54,"line":108},[52,43336,2213],{"class":58},[52,43338,2216],{"class":62},[52,43340,105],{"class":58},[52,43342,43343,43345,43347],{"class":54,"line":118},[52,43344,2230],{"class":58},[52,43346,43292],{"class":62},[52,43348,77],{"class":58},[52,43350,43351,43353,43355],{"class":54,"line":594},[52,43352,121],{"class":58},[52,43354,63],{"class":62},[52,43356,77],{"class":58},[43,43358,43359],{"className":360,"code":43314,"language":362,"meta":48,"style":48},[31,43360,43361,43369,43377,43385,43393],{"__ignoreMap":48},[52,43362,43363,43365,43367],{"class":54,"line":55},[52,43364,59],{"class":58},[52,43366,63],{"class":371},[52,43368,77],{"class":58},[52,43370,43371,43373,43375],{"class":54,"line":80},[52,43372,83],{"class":58},[52,43374,43292],{"class":371},[52,43376,77],{"class":58},[52,43378,43379,43381,43383],{"class":54,"line":108},[52,43380,2213],{"class":58},[52,43382,2216],{"class":371},[52,43384,105],{"class":58},[52,43386,43387,43389,43391],{"class":54,"line":118},[52,43388,2230],{"class":58},[52,43390,43292],{"class":371},[52,43392,77],{"class":58},[52,43394,43395,43397,43399],{"class":54,"line":594},[52,43396,121],{"class":58},[52,43398,63],{"class":371},[52,43400,77],{"class":58},[43,43402,43403],{"className":2507,"code":43314,"language":2509,"meta":48,"style":48},[31,43404,43405,43413,43421,43429,43437],{"__ignoreMap":48},[52,43406,43407,43409,43411],{"class":54,"line":55},[52,43408,59],{"class":58},[52,43410,63],{"class":371},[52,43412,77],{"class":58},[52,43414,43415,43417,43419],{"class":54,"line":80},[52,43416,83],{"class":58},[52,43418,43292],{"class":371},[52,43420,77],{"class":58},[52,43422,43423,43425,43427],{"class":54,"line":108},[52,43424,2213],{"class":58},[52,43426,2216],{"class":371},[52,43428,105],{"class":58},[52,43430,43431,43433,43435],{"class":54,"line":118},[52,43432,2230],{"class":58},[52,43434,43292],{"class":371},[52,43436,77],{"class":58},[52,43438,43439,43441,43443],{"class":54,"line":594},[52,43440,121],{"class":58},[52,43442,63],{"class":371},[52,43444,77],{"class":58},[43,43446,43447],{"className":419,"code":43314,"language":420,"meta":48,"style":48},[31,43448,43449,43457,43465,43473,43481],{"__ignoreMap":48},[52,43450,43451,43453,43455],{"class":54,"line":55},[52,43452,59],{"class":58},[52,43454,63],{"class":371},[52,43456,77],{"class":58},[52,43458,43459,43461,43463],{"class":54,"line":80},[52,43460,83],{"class":58},[52,43462,43292],{"class":371},[52,43464,77],{"class":58},[52,43466,43467,43469,43471],{"class":54,"line":108},[52,43468,2213],{"class":58},[52,43470,2216],{"class":371},[52,43472,105],{"class":58},[52,43474,43475,43477,43479],{"class":54,"line":118},[52,43476,2230],{"class":58},[52,43478,43292],{"class":371},[52,43480,77],{"class":58},[52,43482,43483,43485,43487],{"class":54,"line":594},[52,43484,121],{"class":58},[52,43486,63],{"class":371},[52,43488,77],{"class":58},[43,43490,43492],{"className":222,"code":43491,"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,43493,43494,43504,43508,43522,43526,43535,43543,43547,43551],{"__ignoreMap":48},[52,43495,43496,43498,43500,43502],{"class":54,"line":55},[52,43497,232],{"class":231},[52,43499,9231],{"class":58},[52,43501,238],{"class":231},[52,43503,9236],{"class":73},[52,43505,43506],{"class":54,"line":80},[52,43507,597],{"emptyLinePlaceholder":171},[52,43509,43510,43512,43514,43516,43518,43520],{"class":54,"line":108},[52,43511,1721],{"class":231},[52,43513,1724],{"class":371},[52,43515,1727],{"class":231},[52,43517,1730],{"class":231},[52,43519,1733],{"class":66},[52,43521,1736],{"class":58},[52,43523,43524],{"class":54,"line":118},[52,43525,1751],{"class":58},[52,43527,43528,43530,43533],{"class":54,"line":594},[52,43529,1756],{"class":58},[52,43531,43532],{"class":73},"'Paper'",[52,43534,4722],{"class":58},[52,43536,43537,43539,43541],{"class":54,"line":600},[52,43538,4727],{"class":58},[52,43540,2869],{"class":73},[52,43542,2129],{"class":58},[52,43544,43545],{"class":54,"line":606},[52,43546,4744],{"class":58},[52,43548,43549],{"class":54,"line":653},[52,43550,1773],{"class":58},[52,43552,43553],{"class":54,"line":662},[52,43554,1778],{"class":58},[156,43556,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43558},[43559,43560],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/paper",{"title":43292,"description":43300},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":43567,"title":43568,"body":43569,"category":29105,"componentType":20848,"description":43576,"extension":168,"meta":43837,"navigation":171,"path":43838,"requiresChild":171,"seo":43839,"stem":43840,"__hash__":43841},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":43570,"toc":43833},[43571,43574,43577,43579,43581,43584,43586,43831],[11,43572,43568],{"id":43573},"perspective",[15,43575,43576],{},"Rotate the plane in 3D space with pan and tilt",[26901,43578],{"component":43568},[23,43580,26905],{"id":21503},[26907,43582],{":props":43583},"[{\"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,43585,26913],{"id":26912},[217,43587,43588,43633,43677,43721,43765],{":tabs":1543},[43,43589,43591],{"className":45,"code":43590,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[31,43592,43593,43601,43609,43617,43625],{"__ignoreMap":48},[52,43594,43595,43597,43599],{"class":54,"line":55},[52,43596,59],{"class":58},[52,43598,63],{"class":62},[52,43600,77],{"class":58},[52,43602,43603,43605,43607],{"class":54,"line":80},[52,43604,83],{"class":58},[52,43606,43568],{"class":62},[52,43608,77],{"class":58},[52,43610,43611,43613,43615],{"class":54,"line":108},[52,43612,2213],{"class":58},[52,43614,2216],{"class":62},[52,43616,105],{"class":58},[52,43618,43619,43621,43623],{"class":54,"line":118},[52,43620,2230],{"class":58},[52,43622,43568],{"class":62},[52,43624,77],{"class":58},[52,43626,43627,43629,43631],{"class":54,"line":594},[52,43628,121],{"class":58},[52,43630,63],{"class":62},[52,43632,77],{"class":58},[43,43634,43635],{"className":360,"code":43590,"language":362,"meta":48,"style":48},[31,43636,43637,43645,43653,43661,43669],{"__ignoreMap":48},[52,43638,43639,43641,43643],{"class":54,"line":55},[52,43640,59],{"class":58},[52,43642,63],{"class":371},[52,43644,77],{"class":58},[52,43646,43647,43649,43651],{"class":54,"line":80},[52,43648,83],{"class":58},[52,43650,43568],{"class":371},[52,43652,77],{"class":58},[52,43654,43655,43657,43659],{"class":54,"line":108},[52,43656,2213],{"class":58},[52,43658,2216],{"class":371},[52,43660,105],{"class":58},[52,43662,43663,43665,43667],{"class":54,"line":118},[52,43664,2230],{"class":58},[52,43666,43568],{"class":371},[52,43668,77],{"class":58},[52,43670,43671,43673,43675],{"class":54,"line":594},[52,43672,121],{"class":58},[52,43674,63],{"class":371},[52,43676,77],{"class":58},[43,43678,43679],{"className":2507,"code":43590,"language":2509,"meta":48,"style":48},[31,43680,43681,43689,43697,43705,43713],{"__ignoreMap":48},[52,43682,43683,43685,43687],{"class":54,"line":55},[52,43684,59],{"class":58},[52,43686,63],{"class":371},[52,43688,77],{"class":58},[52,43690,43691,43693,43695],{"class":54,"line":80},[52,43692,83],{"class":58},[52,43694,43568],{"class":371},[52,43696,77],{"class":58},[52,43698,43699,43701,43703],{"class":54,"line":108},[52,43700,2213],{"class":58},[52,43702,2216],{"class":371},[52,43704,105],{"class":58},[52,43706,43707,43709,43711],{"class":54,"line":118},[52,43708,2230],{"class":58},[52,43710,43568],{"class":371},[52,43712,77],{"class":58},[52,43714,43715,43717,43719],{"class":54,"line":594},[52,43716,121],{"class":58},[52,43718,63],{"class":371},[52,43720,77],{"class":58},[43,43722,43723],{"className":419,"code":43590,"language":420,"meta":48,"style":48},[31,43724,43725,43733,43741,43749,43757],{"__ignoreMap":48},[52,43726,43727,43729,43731],{"class":54,"line":55},[52,43728,59],{"class":58},[52,43730,63],{"class":371},[52,43732,77],{"class":58},[52,43734,43735,43737,43739],{"class":54,"line":80},[52,43736,83],{"class":58},[52,43738,43568],{"class":371},[52,43740,77],{"class":58},[52,43742,43743,43745,43747],{"class":54,"line":108},[52,43744,2213],{"class":58},[52,43746,2216],{"class":371},[52,43748,105],{"class":58},[52,43750,43751,43753,43755],{"class":54,"line":118},[52,43752,2230],{"class":58},[52,43754,43568],{"class":371},[52,43756,77],{"class":58},[52,43758,43759,43761,43763],{"class":54,"line":594},[52,43760,121],{"class":58},[52,43762,63],{"class":371},[52,43764,77],{"class":58},[43,43766,43768],{"className":222,"code":43767,"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,43769,43770,43780,43784,43798,43802,43811,43819,43823,43827],{"__ignoreMap":48},[52,43771,43772,43774,43776,43778],{"class":54,"line":55},[52,43773,232],{"class":231},[52,43775,9231],{"class":58},[52,43777,238],{"class":231},[52,43779,9236],{"class":73},[52,43781,43782],{"class":54,"line":80},[52,43783,597],{"emptyLinePlaceholder":171},[52,43785,43786,43788,43790,43792,43794,43796],{"class":54,"line":108},[52,43787,1721],{"class":231},[52,43789,1724],{"class":371},[52,43791,1727],{"class":231},[52,43793,1730],{"class":231},[52,43795,1733],{"class":66},[52,43797,1736],{"class":58},[52,43799,43800],{"class":54,"line":118},[52,43801,1751],{"class":58},[52,43803,43804,43806,43809],{"class":54,"line":594},[52,43805,1756],{"class":58},[52,43807,43808],{"class":73},"'Perspective'",[52,43810,4722],{"class":58},[52,43812,43813,43815,43817],{"class":54,"line":600},[52,43814,4727],{"class":58},[52,43816,2869],{"class":73},[52,43818,2129],{"class":58},[52,43820,43821],{"class":54,"line":606},[52,43822,4744],{"class":58},[52,43824,43825],{"class":54,"line":653},[52,43826,1773],{"class":58},[52,43828,43829],{"class":54,"line":662},[52,43830,1778],{"class":58},[156,43832,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43834},[43835,43836],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/perspective",{"title":43568,"description":43576},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":43843,"title":43844,"body":43845,"category":27503,"componentType":20848,"description":43852,"extension":168,"meta":44113,"navigation":171,"path":44114,"requiresChild":171,"seo":44115,"stem":44116,"__hash__":44117},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":43846,"toc":44109},[43847,43850,43853,43855,43857,43860,43862,44107],[11,43848,43844],{"id":43849},"pixelate",[15,43851,43852],{},"Pixelation effect with adjustable cell size",[26901,43854],{"component":43844},[23,43856,26905],{"id":21503},[26907,43858],{":props":43859},"[{\"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,43861,26913],{"id":26912},[217,43863,43864,43909,43953,43997,44041],{":tabs":1543},[43,43865,43867],{"className":45,"code":43866,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[31,43868,43869,43877,43885,43893,43901],{"__ignoreMap":48},[52,43870,43871,43873,43875],{"class":54,"line":55},[52,43872,59],{"class":58},[52,43874,63],{"class":62},[52,43876,77],{"class":58},[52,43878,43879,43881,43883],{"class":54,"line":80},[52,43880,83],{"class":58},[52,43882,43844],{"class":62},[52,43884,77],{"class":58},[52,43886,43887,43889,43891],{"class":54,"line":108},[52,43888,2213],{"class":58},[52,43890,2216],{"class":62},[52,43892,105],{"class":58},[52,43894,43895,43897,43899],{"class":54,"line":118},[52,43896,2230],{"class":58},[52,43898,43844],{"class":62},[52,43900,77],{"class":58},[52,43902,43903,43905,43907],{"class":54,"line":594},[52,43904,121],{"class":58},[52,43906,63],{"class":62},[52,43908,77],{"class":58},[43,43910,43911],{"className":360,"code":43866,"language":362,"meta":48,"style":48},[31,43912,43913,43921,43929,43937,43945],{"__ignoreMap":48},[52,43914,43915,43917,43919],{"class":54,"line":55},[52,43916,59],{"class":58},[52,43918,63],{"class":371},[52,43920,77],{"class":58},[52,43922,43923,43925,43927],{"class":54,"line":80},[52,43924,83],{"class":58},[52,43926,43844],{"class":371},[52,43928,77],{"class":58},[52,43930,43931,43933,43935],{"class":54,"line":108},[52,43932,2213],{"class":58},[52,43934,2216],{"class":371},[52,43936,105],{"class":58},[52,43938,43939,43941,43943],{"class":54,"line":118},[52,43940,2230],{"class":58},[52,43942,43844],{"class":371},[52,43944,77],{"class":58},[52,43946,43947,43949,43951],{"class":54,"line":594},[52,43948,121],{"class":58},[52,43950,63],{"class":371},[52,43952,77],{"class":58},[43,43954,43955],{"className":2507,"code":43866,"language":2509,"meta":48,"style":48},[31,43956,43957,43965,43973,43981,43989],{"__ignoreMap":48},[52,43958,43959,43961,43963],{"class":54,"line":55},[52,43960,59],{"class":58},[52,43962,63],{"class":371},[52,43964,77],{"class":58},[52,43966,43967,43969,43971],{"class":54,"line":80},[52,43968,83],{"class":58},[52,43970,43844],{"class":371},[52,43972,77],{"class":58},[52,43974,43975,43977,43979],{"class":54,"line":108},[52,43976,2213],{"class":58},[52,43978,2216],{"class":371},[52,43980,105],{"class":58},[52,43982,43983,43985,43987],{"class":54,"line":118},[52,43984,2230],{"class":58},[52,43986,43844],{"class":371},[52,43988,77],{"class":58},[52,43990,43991,43993,43995],{"class":54,"line":594},[52,43992,121],{"class":58},[52,43994,63],{"class":371},[52,43996,77],{"class":58},[43,43998,43999],{"className":419,"code":43866,"language":420,"meta":48,"style":48},[31,44000,44001,44009,44017,44025,44033],{"__ignoreMap":48},[52,44002,44003,44005,44007],{"class":54,"line":55},[52,44004,59],{"class":58},[52,44006,63],{"class":371},[52,44008,77],{"class":58},[52,44010,44011,44013,44015],{"class":54,"line":80},[52,44012,83],{"class":58},[52,44014,43844],{"class":371},[52,44016,77],{"class":58},[52,44018,44019,44021,44023],{"class":54,"line":108},[52,44020,2213],{"class":58},[52,44022,2216],{"class":371},[52,44024,105],{"class":58},[52,44026,44027,44029,44031],{"class":54,"line":118},[52,44028,2230],{"class":58},[52,44030,43844],{"class":371},[52,44032,77],{"class":58},[52,44034,44035,44037,44039],{"class":54,"line":594},[52,44036,121],{"class":58},[52,44038,63],{"class":371},[52,44040,77],{"class":58},[43,44042,44044],{"className":222,"code":44043,"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,44045,44046,44056,44060,44074,44078,44087,44095,44099,44103],{"__ignoreMap":48},[52,44047,44048,44050,44052,44054],{"class":54,"line":55},[52,44049,232],{"class":231},[52,44051,9231],{"class":58},[52,44053,238],{"class":231},[52,44055,9236],{"class":73},[52,44057,44058],{"class":54,"line":80},[52,44059,597],{"emptyLinePlaceholder":171},[52,44061,44062,44064,44066,44068,44070,44072],{"class":54,"line":108},[52,44063,1721],{"class":231},[52,44065,1724],{"class":371},[52,44067,1727],{"class":231},[52,44069,1730],{"class":231},[52,44071,1733],{"class":66},[52,44073,1736],{"class":58},[52,44075,44076],{"class":54,"line":118},[52,44077,1751],{"class":58},[52,44079,44080,44082,44085],{"class":54,"line":594},[52,44081,1756],{"class":58},[52,44083,44084],{"class":73},"'Pixelate'",[52,44086,4722],{"class":58},[52,44088,44089,44091,44093],{"class":54,"line":600},[52,44090,4727],{"class":58},[52,44092,2869],{"class":73},[52,44094,2129],{"class":58},[52,44096,44097],{"class":54,"line":606},[52,44098,4744],{"class":58},[52,44100,44101],{"class":54,"line":653},[52,44102,1773],{"class":58},[52,44104,44105],{"class":54,"line":662},[52,44106,1778],{"class":58},[156,44108,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44110},[44111,44112],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/pixelate",{"title":43844,"description":43852},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":44119,"title":10788,"body":44120,"category":27760,"componentType":20842,"description":44127,"extension":168,"meta":44368,"navigation":171,"path":44369,"requiresChild":27763,"seo":44370,"stem":44371,"__hash__":44372},"components/docs/components/Plasma.md",{"type":8,"value":44121,"toc":44364},[44122,44125,44128,44130,44132,44135,44137,44362],[11,44123,10788],{"id":44124},"plasma",[15,44126,44127],{},"Animated effect of glowing plasma",[26901,44129],{"component":10788},[23,44131,26905],{"id":21503},[26907,44133],{":props":44134},"[{\"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,44136,26913],{"id":26912},[217,44138,44139,44179,44222,44262,44304],{":tabs":1543},[43,44140,44142],{"className":45,"code":44141,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,44143,44144,44152,44159,44167,44171],{"__ignoreMap":48},[52,44145,44146,44148,44150],{"class":54,"line":55},[52,44147,59],{"class":58},[52,44149,63],{"class":62},[52,44151,77],{"class":58},[52,44153,44154,44156],{"class":54,"line":80},[52,44155,83],{"class":58},[52,44157,44158],{"class":62},"Plasma\n",[52,44160,44161,44163,44165],{"class":54,"line":108},[52,44162,17870],{"class":66},[52,44164,70],{"class":58},[52,44166,43055],{"class":73},[52,44168,44169],{"class":54,"line":118},[52,44170,1224],{"class":58},[52,44172,44173,44175,44177],{"class":54,"line":594},[52,44174,121],{"class":58},[52,44176,63],{"class":62},[52,44178,77],{"class":58},[43,44180,44182],{"className":360,"code":44181,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,44183,44184,44192,44198,44210,44214],{"__ignoreMap":48},[52,44185,44186,44188,44190],{"class":54,"line":55},[52,44187,59],{"class":58},[52,44189,63],{"class":371},[52,44191,77],{"class":58},[52,44193,44194,44196],{"class":54,"line":80},[52,44195,83],{"class":58},[52,44197,44158],{"class":371},[52,44199,44200,44202,44204,44206,44208],{"class":54,"line":108},[52,44201,17981],{"class":66},[52,44203,70],{"class":231},[52,44205,723],{"class":58},[52,44207,13171],{"class":371},[52,44209,729],{"class":58},[52,44211,44212],{"class":54,"line":118},[52,44213,1224],{"class":58},[52,44215,44216,44218,44220],{"class":54,"line":594},[52,44217,121],{"class":58},[52,44219,63],{"class":371},[52,44221,77],{"class":58},[43,44223,44224],{"className":2507,"code":44181,"language":2509,"meta":48,"style":48},[31,44225,44226,44234,44240,44250,44254],{"__ignoreMap":48},[52,44227,44228,44230,44232],{"class":54,"line":55},[52,44229,59],{"class":58},[52,44231,63],{"class":371},[52,44233,77],{"class":58},[52,44235,44236,44238],{"class":54,"line":80},[52,44237,83],{"class":58},[52,44239,44158],{"class":371},[52,44241,44242,44244,44246,44248],{"class":54,"line":108},[52,44243,17981],{"class":66},[52,44245,24845],{"class":58},[52,44247,13171],{"class":371},[52,44249,729],{"class":58},[52,44251,44252],{"class":54,"line":118},[52,44253,1224],{"class":58},[52,44255,44256,44258,44260],{"class":54,"line":594},[52,44257,121],{"class":58},[52,44259,63],{"class":371},[52,44261,77],{"class":58},[43,44263,44264],{"className":419,"code":44181,"language":420,"meta":48,"style":48},[31,44265,44266,44274,44280,44292,44296],{"__ignoreMap":48},[52,44267,44268,44270,44272],{"class":54,"line":55},[52,44269,59],{"class":58},[52,44271,63],{"class":371},[52,44273,77],{"class":58},[52,44275,44276,44278],{"class":54,"line":80},[52,44277,83],{"class":58},[52,44279,44158],{"class":371},[52,44281,44282,44284,44286,44288,44290],{"class":54,"line":108},[52,44283,17981],{"class":66},[52,44285,70],{"class":231},[52,44287,723],{"class":58},[52,44289,13171],{"class":371},[52,44291,729],{"class":58},[52,44293,44294],{"class":54,"line":118},[52,44295,1224],{"class":58},[52,44297,44298,44300,44302],{"class":54,"line":594},[52,44299,121],{"class":58},[52,44301,63],{"class":371},[52,44303,77],{"class":58},[43,44305,44307],{"className":222,"code":44306,"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,44308,44309,44319,44323,44337,44341,44354,44358],{"__ignoreMap":48},[52,44310,44311,44313,44315,44317],{"class":54,"line":55},[52,44312,232],{"class":231},[52,44314,9231],{"class":58},[52,44316,238],{"class":231},[52,44318,9236],{"class":73},[52,44320,44321],{"class":54,"line":80},[52,44322,597],{"emptyLinePlaceholder":171},[52,44324,44325,44327,44329,44331,44333,44335],{"class":54,"line":108},[52,44326,1721],{"class":231},[52,44328,1724],{"class":371},[52,44330,1727],{"class":231},[52,44332,1730],{"class":231},[52,44334,1733],{"class":66},[52,44336,1736],{"class":58},[52,44338,44339],{"class":54,"line":118},[52,44340,1751],{"class":58},[52,44342,44343,44345,44348,44350,44352],{"class":54,"line":594},[52,44344,1756],{"class":58},[52,44346,44347],{"class":73},"'Plasma'",[52,44349,27194],{"class":58},[52,44351,13171],{"class":371},[52,44353,1768],{"class":58},[52,44355,44356],{"class":54,"line":600},[52,44357,1773],{"class":58},[52,44359,44360],{"class":54,"line":606},[52,44361,1778],{"class":58},[156,44363,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44365},[44366,44367],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/plasma",{"title":10788,"description":44127},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":44374,"title":44375,"body":44376,"category":29105,"componentType":20848,"description":44383,"extension":168,"meta":44746,"navigation":171,"path":44747,"requiresChild":171,"seo":44748,"stem":44749,"__hash__":44750},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":44377,"toc":44742},[44378,44381,44384,44386,44388,44391,44393,44740],[11,44379,44375],{"id":44380},"polarcoordinates",[15,44382,44383],{},"Convert rectangular coordinates to polar space",[26901,44385],{"component":44375},[23,44387,26905],{"id":21503},[26907,44389],{":props":44390},"[{\"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,44392,26913],{"id":26912},[217,44394,44395,44459,44530,44596,44666],{":tabs":1543},[43,44396,44398],{"className":45,"code":44397,"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,44399,44400,44408,44415,44423,44431,44435,44443,44451],{"__ignoreMap":48},[52,44401,44402,44404,44406],{"class":54,"line":55},[52,44403,59],{"class":58},[52,44405,63],{"class":62},[52,44407,77],{"class":58},[52,44409,44410,44412],{"class":54,"line":80},[52,44411,83],{"class":58},[52,44413,44414],{"class":62},"PolarCoordinates\n",[52,44416,44417,44419,44421],{"class":54,"line":108},[52,44418,14901],{"class":66},[52,44420,70],{"class":58},[52,44422,28827],{"class":73},[52,44424,44425,44427,44429],{"class":54,"line":118},[52,44426,17870],{"class":66},[52,44428,70],{"class":58},[52,44430,28827],{"class":73},[52,44432,44433],{"class":54,"line":594},[52,44434,26949],{"class":58},[52,44436,44437,44439,44441],{"class":54,"line":600},[52,44438,2213],{"class":58},[52,44440,2216],{"class":62},[52,44442,105],{"class":58},[52,44444,44445,44447,44449],{"class":54,"line":606},[52,44446,2230],{"class":58},[52,44448,44375],{"class":62},[52,44450,77],{"class":58},[52,44452,44453,44455,44457],{"class":54,"line":653},[52,44454,121],{"class":58},[52,44456,63],{"class":62},[52,44458,77],{"class":58},[43,44460,44462],{"className":360,"code":44461,"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,44463,44464,44472,44478,44490,44502,44506,44514,44522],{"__ignoreMap":48},[52,44465,44466,44468,44470],{"class":54,"line":55},[52,44467,59],{"class":58},[52,44469,63],{"class":371},[52,44471,77],{"class":58},[52,44473,44474,44476],{"class":54,"line":80},[52,44475,83],{"class":58},[52,44477,44414],{"class":371},[52,44479,44480,44482,44484,44486,44488],{"class":54,"line":108},[52,44481,7361],{"class":66},[52,44483,70],{"class":231},[52,44485,723],{"class":58},[52,44487,6391],{"class":371},[52,44489,729],{"class":58},[52,44491,44492,44494,44496,44498,44500],{"class":54,"line":118},[52,44493,17981],{"class":66},[52,44495,70],{"class":231},[52,44497,723],{"class":58},[52,44499,6391],{"class":371},[52,44501,729],{"class":58},[52,44503,44504],{"class":54,"line":594},[52,44505,26949],{"class":58},[52,44507,44508,44510,44512],{"class":54,"line":600},[52,44509,2213],{"class":58},[52,44511,2216],{"class":371},[52,44513,105],{"class":58},[52,44515,44516,44518,44520],{"class":54,"line":606},[52,44517,2230],{"class":58},[52,44519,44375],{"class":371},[52,44521,77],{"class":58},[52,44523,44524,44526,44528],{"class":54,"line":653},[52,44525,121],{"class":58},[52,44527,63],{"class":371},[52,44529,77],{"class":58},[43,44531,44532],{"className":2507,"code":44461,"language":2509,"meta":48,"style":48},[31,44533,44534,44542,44548,44558,44568,44572,44580,44588],{"__ignoreMap":48},[52,44535,44536,44538,44540],{"class":54,"line":55},[52,44537,59],{"class":58},[52,44539,63],{"class":371},[52,44541,77],{"class":58},[52,44543,44544,44546],{"class":54,"line":80},[52,44545,83],{"class":58},[52,44547,44414],{"class":371},[52,44549,44550,44552,44554,44556],{"class":54,"line":108},[52,44551,7361],{"class":66},[52,44553,24845],{"class":58},[52,44555,6391],{"class":371},[52,44557,729],{"class":58},[52,44559,44560,44562,44564,44566],{"class":54,"line":118},[52,44561,17981],{"class":66},[52,44563,24845],{"class":58},[52,44565,6391],{"class":371},[52,44567,729],{"class":58},[52,44569,44570],{"class":54,"line":594},[52,44571,26949],{"class":58},[52,44573,44574,44576,44578],{"class":54,"line":600},[52,44575,2213],{"class":58},[52,44577,2216],{"class":371},[52,44579,105],{"class":58},[52,44581,44582,44584,44586],{"class":54,"line":606},[52,44583,2230],{"class":58},[52,44585,44375],{"class":371},[52,44587,77],{"class":58},[52,44589,44590,44592,44594],{"class":54,"line":653},[52,44591,121],{"class":58},[52,44593,63],{"class":371},[52,44595,77],{"class":58},[43,44597,44598],{"className":419,"code":44461,"language":420,"meta":48,"style":48},[31,44599,44600,44608,44614,44626,44638,44642,44650,44658],{"__ignoreMap":48},[52,44601,44602,44604,44606],{"class":54,"line":55},[52,44603,59],{"class":58},[52,44605,63],{"class":371},[52,44607,77],{"class":58},[52,44609,44610,44612],{"class":54,"line":80},[52,44611,83],{"class":58},[52,44613,44414],{"class":371},[52,44615,44616,44618,44620,44622,44624],{"class":54,"line":108},[52,44617,7361],{"class":66},[52,44619,70],{"class":231},[52,44621,723],{"class":58},[52,44623,6391],{"class":371},[52,44625,729],{"class":58},[52,44627,44628,44630,44632,44634,44636],{"class":54,"line":118},[52,44629,17981],{"class":66},[52,44631,70],{"class":231},[52,44633,723],{"class":58},[52,44635,6391],{"class":371},[52,44637,729],{"class":58},[52,44639,44640],{"class":54,"line":594},[52,44641,26949],{"class":58},[52,44643,44644,44646,44648],{"class":54,"line":600},[52,44645,2213],{"class":58},[52,44647,2216],{"class":371},[52,44649,105],{"class":58},[52,44651,44652,44654,44656],{"class":54,"line":606},[52,44653,2230],{"class":58},[52,44655,44375],{"class":371},[52,44657,77],{"class":58},[52,44659,44660,44662,44664],{"class":54,"line":653},[52,44661,121],{"class":58},[52,44663,63],{"class":371},[52,44665,77],{"class":58},[43,44667,44669],{"className":222,"code":44668,"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,44670,44671,44681,44685,44699,44703,44720,44728,44732,44736],{"__ignoreMap":48},[52,44672,44673,44675,44677,44679],{"class":54,"line":55},[52,44674,232],{"class":231},[52,44676,9231],{"class":58},[52,44678,238],{"class":231},[52,44680,9236],{"class":73},[52,44682,44683],{"class":54,"line":80},[52,44684,597],{"emptyLinePlaceholder":171},[52,44686,44687,44689,44691,44693,44695,44697],{"class":54,"line":108},[52,44688,1721],{"class":231},[52,44690,1724],{"class":371},[52,44692,1727],{"class":231},[52,44694,1730],{"class":231},[52,44696,1733],{"class":66},[52,44698,1736],{"class":58},[52,44700,44701],{"class":54,"line":118},[52,44702,1751],{"class":58},[52,44704,44705,44707,44710,44712,44714,44716,44718],{"class":54,"line":594},[52,44706,1756],{"class":58},[52,44708,44709],{"class":73},"'PolarCoordinates'",[52,44711,5254],{"class":58},[52,44713,6391],{"class":371},[52,44715,34623],{"class":58},[52,44717,6391],{"class":371},[52,44719,5259],{"class":58},[52,44721,44722,44724,44726],{"class":54,"line":600},[52,44723,4727],{"class":58},[52,44725,2869],{"class":73},[52,44727,2129],{"class":58},[52,44729,44730],{"class":54,"line":606},[52,44731,4744],{"class":58},[52,44733,44734],{"class":54,"line":653},[52,44735,1773],{"class":58},[52,44737,44738],{"class":54,"line":662},[52,44739,1778],{"class":58},[156,44741,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44743},[44744,44745],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polarcoordinates",{"title":44375,"description":44383},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":44752,"title":44753,"body":44754,"category":30727,"componentType":20842,"description":44761,"extension":168,"meta":45038,"navigation":171,"path":45039,"requiresChild":27763,"seo":45040,"stem":45041,"__hash__":45042},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":44755,"toc":45034},[44756,44759,44762,44764,44766,44769,44771,45032],[11,44757,44753],{"id":44758},"polygon",[15,44760,44761],{},"Regular polygon with adjustable sides and corner rounding",[26901,44763],{"component":44753},[23,44765,26905],{"id":21503},[26907,44767],{":props":44768},"[{\"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,44770,26913],{"id":26912},[217,44772,44773,44821,44872,44920,44970],{":tabs":1543},[43,44774,44776],{"className":45,"code":44775,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,44777,44778,44786,44793,44801,44809,44813],{"__ignoreMap":48},[52,44779,44780,44782,44784],{"class":54,"line":55},[52,44781,59],{"class":58},[52,44783,63],{"class":62},[52,44785,77],{"class":58},[52,44787,44788,44790],{"class":54,"line":80},[52,44789,83],{"class":58},[52,44791,44792],{"class":62},"Polygon\n",[52,44794,44795,44797,44799],{"class":54,"line":108},[52,44796,7351],{"class":66},[52,44798,70],{"class":58},[52,44800,7307],{"class":73},[52,44802,44803,44805,44807],{"class":54,"line":118},[52,44804,14901],{"class":66},[52,44806,70],{"class":58},[52,44808,36464],{"class":73},[52,44810,44811],{"class":54,"line":594},[52,44812,1224],{"class":58},[52,44814,44815,44817,44819],{"class":54,"line":600},[52,44816,121],{"class":58},[52,44818,63],{"class":62},[52,44820,77],{"class":58},[43,44822,44824],{"className":360,"code":44823,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,44825,44826,44834,44840,44848,44860,44864],{"__ignoreMap":48},[52,44827,44828,44830,44832],{"class":54,"line":55},[52,44829,59],{"class":58},[52,44831,63],{"class":371},[52,44833,77],{"class":58},[52,44835,44836,44838],{"class":54,"line":80},[52,44837,83],{"class":58},[52,44839,44792],{"class":371},[52,44841,44842,44844,44846],{"class":54,"line":108},[52,44843,7351],{"class":66},[52,44845,70],{"class":231},[52,44847,7307],{"class":73},[52,44849,44850,44852,44854,44856,44858],{"class":54,"line":118},[52,44851,7361],{"class":66},[52,44853,70],{"class":231},[52,44855,723],{"class":58},[52,44857,5963],{"class":371},[52,44859,729],{"class":58},[52,44861,44862],{"class":54,"line":594},[52,44863,1224],{"class":58},[52,44865,44866,44868,44870],{"class":54,"line":600},[52,44867,121],{"class":58},[52,44869,63],{"class":371},[52,44871,77],{"class":58},[43,44873,44874],{"className":2507,"code":44823,"language":2509,"meta":48,"style":48},[31,44875,44876,44884,44890,44898,44908,44912],{"__ignoreMap":48},[52,44877,44878,44880,44882],{"class":54,"line":55},[52,44879,59],{"class":58},[52,44881,63],{"class":371},[52,44883,77],{"class":58},[52,44885,44886,44888],{"class":54,"line":80},[52,44887,83],{"class":58},[52,44889,44792],{"class":371},[52,44891,44892,44894,44896],{"class":54,"line":108},[52,44893,7351],{"class":66},[52,44895,70],{"class":58},[52,44897,7307],{"class":73},[52,44899,44900,44902,44904,44906],{"class":54,"line":118},[52,44901,7361],{"class":66},[52,44903,24845],{"class":58},[52,44905,5963],{"class":371},[52,44907,729],{"class":58},[52,44909,44910],{"class":54,"line":594},[52,44911,1224],{"class":58},[52,44913,44914,44916,44918],{"class":54,"line":600},[52,44915,121],{"class":58},[52,44917,63],{"class":371},[52,44919,77],{"class":58},[43,44921,44922],{"className":419,"code":44823,"language":420,"meta":48,"style":48},[31,44923,44924,44932,44938,44946,44958,44962],{"__ignoreMap":48},[52,44925,44926,44928,44930],{"class":54,"line":55},[52,44927,59],{"class":58},[52,44929,63],{"class":371},[52,44931,77],{"class":58},[52,44933,44934,44936],{"class":54,"line":80},[52,44935,83],{"class":58},[52,44937,44792],{"class":371},[52,44939,44940,44942,44944],{"class":54,"line":108},[52,44941,7351],{"class":66},[52,44943,70],{"class":231},[52,44945,7307],{"class":73},[52,44947,44948,44950,44952,44954,44956],{"class":54,"line":118},[52,44949,7361],{"class":66},[52,44951,70],{"class":231},[52,44953,723],{"class":58},[52,44955,5963],{"class":371},[52,44957,729],{"class":58},[52,44959,44960],{"class":54,"line":594},[52,44961,1224],{"class":58},[52,44963,44964,44966,44968],{"class":54,"line":600},[52,44965,121],{"class":58},[52,44967,63],{"class":371},[52,44969,77],{"class":58},[43,44971,44973],{"className":222,"code":44972,"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,44974,44975,44985,44989,45003,45007,45024,45028],{"__ignoreMap":48},[52,44976,44977,44979,44981,44983],{"class":54,"line":55},[52,44978,232],{"class":231},[52,44980,9231],{"class":58},[52,44982,238],{"class":231},[52,44984,9236],{"class":73},[52,44986,44987],{"class":54,"line":80},[52,44988,597],{"emptyLinePlaceholder":171},[52,44990,44991,44993,44995,44997,44999,45001],{"class":54,"line":108},[52,44992,1721],{"class":231},[52,44994,1724],{"class":371},[52,44996,1727],{"class":231},[52,44998,1730],{"class":231},[52,45000,1733],{"class":66},[52,45002,1736],{"class":58},[52,45004,45005],{"class":54,"line":118},[52,45006,1751],{"class":58},[52,45008,45009,45011,45014,45016,45018,45020,45022],{"class":54,"line":594},[52,45010,1756],{"class":58},[52,45012,45013],{"class":73},"'Polygon'",[52,45015,1762],{"class":58},[52,45017,7886],{"class":73},[52,45019,4278],{"class":58},[52,45021,5963],{"class":371},[52,45023,1768],{"class":58},[52,45025,45026],{"class":54,"line":600},[52,45027,1773],{"class":58},[52,45029,45030],{"class":54,"line":606},[52,45031,1778],{"class":58},[156,45033,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45035},[45036,45037],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polygon",{"title":44753,"description":44761},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":45044,"title":45045,"body":45046,"category":28771,"componentType":20848,"description":45053,"extension":168,"meta":45371,"navigation":171,"path":45372,"requiresChild":171,"seo":45373,"stem":45374,"__hash__":45375},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":45047,"toc":45367},[45048,45051,45054,45056,45058,45061,45063,45365],[11,45049,45045],{"id":45050},"posterize",[15,45052,45053],{},"Reduce color depth to create a poster effect",[26901,45055],{"component":45045},[23,45057,26905],{"id":21503},[26907,45059],{":props":45060},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,45062,26913],{"id":26912},[217,45064,45065,45122,45181,45237,45295],{":tabs":1543},[43,45066,45068],{"className":45,"code":45067,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,45069,45070,45078,45085,45094,45098,45106,45114],{"__ignoreMap":48},[52,45071,45072,45074,45076],{"class":54,"line":55},[52,45073,59],{"class":58},[52,45075,63],{"class":62},[52,45077,77],{"class":58},[52,45079,45080,45082],{"class":54,"line":80},[52,45081,83],{"class":58},[52,45083,45084],{"class":62},"Posterize\n",[52,45086,45087,45089,45091],{"class":54,"line":108},[52,45088,17870],{"class":66},[52,45090,70],{"class":58},[52,45092,45093],{"class":73},"\"5\"\n",[52,45095,45096],{"class":54,"line":118},[52,45097,26949],{"class":58},[52,45099,45100,45102,45104],{"class":54,"line":594},[52,45101,2213],{"class":58},[52,45103,2216],{"class":62},[52,45105,105],{"class":58},[52,45107,45108,45110,45112],{"class":54,"line":600},[52,45109,2230],{"class":58},[52,45111,45045],{"class":62},[52,45113,77],{"class":58},[52,45115,45116,45118,45120],{"class":54,"line":606},[52,45117,121],{"class":58},[52,45119,63],{"class":62},[52,45121,77],{"class":58},[43,45123,45125],{"className":360,"code":45124,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,45126,45127,45135,45141,45153,45157,45165,45173],{"__ignoreMap":48},[52,45128,45129,45131,45133],{"class":54,"line":55},[52,45130,59],{"class":58},[52,45132,63],{"class":371},[52,45134,77],{"class":58},[52,45136,45137,45139],{"class":54,"line":80},[52,45138,83],{"class":58},[52,45140,45084],{"class":371},[52,45142,45143,45145,45147,45149,45151],{"class":54,"line":108},[52,45144,17981],{"class":66},[52,45146,70],{"class":231},[52,45148,723],{"class":58},[52,45150,19566],{"class":371},[52,45152,729],{"class":58},[52,45154,45155],{"class":54,"line":118},[52,45156,26949],{"class":58},[52,45158,45159,45161,45163],{"class":54,"line":594},[52,45160,2213],{"class":58},[52,45162,2216],{"class":371},[52,45164,105],{"class":58},[52,45166,45167,45169,45171],{"class":54,"line":600},[52,45168,2230],{"class":58},[52,45170,45045],{"class":371},[52,45172,77],{"class":58},[52,45174,45175,45177,45179],{"class":54,"line":606},[52,45176,121],{"class":58},[52,45178,63],{"class":371},[52,45180,77],{"class":58},[43,45182,45183],{"className":2507,"code":45124,"language":2509,"meta":48,"style":48},[31,45184,45185,45193,45199,45209,45213,45221,45229],{"__ignoreMap":48},[52,45186,45187,45189,45191],{"class":54,"line":55},[52,45188,59],{"class":58},[52,45190,63],{"class":371},[52,45192,77],{"class":58},[52,45194,45195,45197],{"class":54,"line":80},[52,45196,83],{"class":58},[52,45198,45084],{"class":371},[52,45200,45201,45203,45205,45207],{"class":54,"line":108},[52,45202,17981],{"class":66},[52,45204,24845],{"class":58},[52,45206,19566],{"class":371},[52,45208,729],{"class":58},[52,45210,45211],{"class":54,"line":118},[52,45212,26949],{"class":58},[52,45214,45215,45217,45219],{"class":54,"line":594},[52,45216,2213],{"class":58},[52,45218,2216],{"class":371},[52,45220,105],{"class":58},[52,45222,45223,45225,45227],{"class":54,"line":600},[52,45224,2230],{"class":58},[52,45226,45045],{"class":371},[52,45228,77],{"class":58},[52,45230,45231,45233,45235],{"class":54,"line":606},[52,45232,121],{"class":58},[52,45234,63],{"class":371},[52,45236,77],{"class":58},[43,45238,45239],{"className":419,"code":45124,"language":420,"meta":48,"style":48},[31,45240,45241,45249,45255,45267,45271,45279,45287],{"__ignoreMap":48},[52,45242,45243,45245,45247],{"class":54,"line":55},[52,45244,59],{"class":58},[52,45246,63],{"class":371},[52,45248,77],{"class":58},[52,45250,45251,45253],{"class":54,"line":80},[52,45252,83],{"class":58},[52,45254,45084],{"class":371},[52,45256,45257,45259,45261,45263,45265],{"class":54,"line":108},[52,45258,17981],{"class":66},[52,45260,70],{"class":231},[52,45262,723],{"class":58},[52,45264,19566],{"class":371},[52,45266,729],{"class":58},[52,45268,45269],{"class":54,"line":118},[52,45270,26949],{"class":58},[52,45272,45273,45275,45277],{"class":54,"line":594},[52,45274,2213],{"class":58},[52,45276,2216],{"class":371},[52,45278,105],{"class":58},[52,45280,45281,45283,45285],{"class":54,"line":600},[52,45282,2230],{"class":58},[52,45284,45045],{"class":371},[52,45286,77],{"class":58},[52,45288,45289,45291,45293],{"class":54,"line":606},[52,45290,121],{"class":58},[52,45292,63],{"class":371},[52,45294,77],{"class":58},[43,45296,45298],{"className":222,"code":45297,"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,45299,45300,45310,45314,45328,45332,45345,45353,45357,45361],{"__ignoreMap":48},[52,45301,45302,45304,45306,45308],{"class":54,"line":55},[52,45303,232],{"class":231},[52,45305,9231],{"class":58},[52,45307,238],{"class":231},[52,45309,9236],{"class":73},[52,45311,45312],{"class":54,"line":80},[52,45313,597],{"emptyLinePlaceholder":171},[52,45315,45316,45318,45320,45322,45324,45326],{"class":54,"line":108},[52,45317,1721],{"class":231},[52,45319,1724],{"class":371},[52,45321,1727],{"class":231},[52,45323,1730],{"class":231},[52,45325,1733],{"class":66},[52,45327,1736],{"class":58},[52,45329,45330],{"class":54,"line":118},[52,45331,1751],{"class":58},[52,45333,45334,45336,45339,45341,45343],{"class":54,"line":594},[52,45335,1756],{"class":58},[52,45337,45338],{"class":73},"'Posterize'",[52,45340,27194],{"class":58},[52,45342,19566],{"class":371},[52,45344,5259],{"class":58},[52,45346,45347,45349,45351],{"class":54,"line":600},[52,45348,4727],{"class":58},[52,45350,2869],{"class":73},[52,45352,2129],{"class":58},[52,45354,45355],{"class":54,"line":606},[52,45356,4744],{"class":58},[52,45358,45359],{"class":54,"line":653},[52,45360,1773],{"class":58},[52,45362,45363],{"class":54,"line":662},[52,45364,1778],{"class":58},[156,45366,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45368},[45369,45370],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/posterize",{"title":45045,"description":45053},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":45377,"title":45378,"body":45379,"category":27225,"componentType":20848,"description":45386,"extension":168,"meta":45703,"navigation":171,"path":45704,"requiresChild":171,"seo":45705,"stem":45706,"__hash__":45707},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":45380,"toc":45699},[45381,45384,45387,45389,45391,45394,45396,45697],[11,45382,45378],{"id":45383},"progressiveblur",[15,45385,45386],{},"Blur that increases progressively in one direction",[26901,45388],{"component":45378},[23,45390,26905],{"id":21503},[26907,45392],{":props":45393},"[{\"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,45395,26913],{"id":26912},[217,45397,45398,45454,45513,45569,45627],{":tabs":1543},[43,45399,45401],{"className":45,"code":45400,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45402,45403,45411,45418,45426,45430,45438,45446],{"__ignoreMap":48},[52,45404,45405,45407,45409],{"class":54,"line":55},[52,45406,59],{"class":58},[52,45408,63],{"class":62},[52,45410,77],{"class":58},[52,45412,45413,45415],{"class":54,"line":80},[52,45414,83],{"class":58},[52,45416,45417],{"class":62},"ProgressiveBlur\n",[52,45419,45420,45422,45424],{"class":54,"line":108},[52,45421,17870],{"class":66},[52,45423,70],{"class":58},[52,45425,28216],{"class":73},[52,45427,45428],{"class":54,"line":118},[52,45429,26949],{"class":58},[52,45431,45432,45434,45436],{"class":54,"line":594},[52,45433,2213],{"class":58},[52,45435,2216],{"class":62},[52,45437,105],{"class":58},[52,45439,45440,45442,45444],{"class":54,"line":600},[52,45441,2230],{"class":58},[52,45443,45378],{"class":62},[52,45445,77],{"class":58},[52,45447,45448,45450,45452],{"class":54,"line":606},[52,45449,121],{"class":58},[52,45451,63],{"class":62},[52,45453,77],{"class":58},[43,45455,45457],{"className":360,"code":45456,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45458,45459,45467,45473,45485,45489,45497,45505],{"__ignoreMap":48},[52,45460,45461,45463,45465],{"class":54,"line":55},[52,45462,59],{"class":58},[52,45464,63],{"class":371},[52,45466,77],{"class":58},[52,45468,45469,45471],{"class":54,"line":80},[52,45470,83],{"class":58},[52,45472,45417],{"class":371},[52,45474,45475,45477,45479,45481,45483],{"class":54,"line":108},[52,45476,17981],{"class":66},[52,45478,70],{"class":231},[52,45480,723],{"class":58},[52,45482,28274],{"class":371},[52,45484,729],{"class":58},[52,45486,45487],{"class":54,"line":118},[52,45488,26949],{"class":58},[52,45490,45491,45493,45495],{"class":54,"line":594},[52,45492,2213],{"class":58},[52,45494,2216],{"class":371},[52,45496,105],{"class":58},[52,45498,45499,45501,45503],{"class":54,"line":600},[52,45500,2230],{"class":58},[52,45502,45378],{"class":371},[52,45504,77],{"class":58},[52,45506,45507,45509,45511],{"class":54,"line":606},[52,45508,121],{"class":58},[52,45510,63],{"class":371},[52,45512,77],{"class":58},[43,45514,45515],{"className":2507,"code":45456,"language":2509,"meta":48,"style":48},[31,45516,45517,45525,45531,45541,45545,45553,45561],{"__ignoreMap":48},[52,45518,45519,45521,45523],{"class":54,"line":55},[52,45520,59],{"class":58},[52,45522,63],{"class":371},[52,45524,77],{"class":58},[52,45526,45527,45529],{"class":54,"line":80},[52,45528,83],{"class":58},[52,45530,45417],{"class":371},[52,45532,45533,45535,45537,45539],{"class":54,"line":108},[52,45534,17981],{"class":66},[52,45536,24845],{"class":58},[52,45538,28274],{"class":371},[52,45540,729],{"class":58},[52,45542,45543],{"class":54,"line":118},[52,45544,26949],{"class":58},[52,45546,45547,45549,45551],{"class":54,"line":594},[52,45548,2213],{"class":58},[52,45550,2216],{"class":371},[52,45552,105],{"class":58},[52,45554,45555,45557,45559],{"class":54,"line":600},[52,45556,2230],{"class":58},[52,45558,45378],{"class":371},[52,45560,77],{"class":58},[52,45562,45563,45565,45567],{"class":54,"line":606},[52,45564,121],{"class":58},[52,45566,63],{"class":371},[52,45568,77],{"class":58},[43,45570,45571],{"className":419,"code":45456,"language":420,"meta":48,"style":48},[31,45572,45573,45581,45587,45599,45603,45611,45619],{"__ignoreMap":48},[52,45574,45575,45577,45579],{"class":54,"line":55},[52,45576,59],{"class":58},[52,45578,63],{"class":371},[52,45580,77],{"class":58},[52,45582,45583,45585],{"class":54,"line":80},[52,45584,83],{"class":58},[52,45586,45417],{"class":371},[52,45588,45589,45591,45593,45595,45597],{"class":54,"line":108},[52,45590,17981],{"class":66},[52,45592,70],{"class":231},[52,45594,723],{"class":58},[52,45596,28274],{"class":371},[52,45598,729],{"class":58},[52,45600,45601],{"class":54,"line":118},[52,45602,26949],{"class":58},[52,45604,45605,45607,45609],{"class":54,"line":594},[52,45606,2213],{"class":58},[52,45608,2216],{"class":371},[52,45610,105],{"class":58},[52,45612,45613,45615,45617],{"class":54,"line":600},[52,45614,2230],{"class":58},[52,45616,45378],{"class":371},[52,45618,77],{"class":58},[52,45620,45621,45623,45625],{"class":54,"line":606},[52,45622,121],{"class":58},[52,45624,63],{"class":371},[52,45626,77],{"class":58},[43,45628,45630],{"className":222,"code":45629,"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,45631,45632,45642,45646,45660,45664,45677,45685,45689,45693],{"__ignoreMap":48},[52,45633,45634,45636,45638,45640],{"class":54,"line":55},[52,45635,232],{"class":231},[52,45637,9231],{"class":58},[52,45639,238],{"class":231},[52,45641,9236],{"class":73},[52,45643,45644],{"class":54,"line":80},[52,45645,597],{"emptyLinePlaceholder":171},[52,45647,45648,45650,45652,45654,45656,45658],{"class":54,"line":108},[52,45649,1721],{"class":231},[52,45651,1724],{"class":371},[52,45653,1727],{"class":231},[52,45655,1730],{"class":231},[52,45657,1733],{"class":66},[52,45659,1736],{"class":58},[52,45661,45662],{"class":54,"line":118},[52,45663,1751],{"class":58},[52,45665,45666,45668,45671,45673,45675],{"class":54,"line":594},[52,45667,1756],{"class":58},[52,45669,45670],{"class":73},"'ProgressiveBlur'",[52,45672,27194],{"class":58},[52,45674,28274],{"class":371},[52,45676,5259],{"class":58},[52,45678,45679,45681,45683],{"class":54,"line":600},[52,45680,4727],{"class":58},[52,45682,2869],{"class":73},[52,45684,2129],{"class":58},[52,45686,45687],{"class":54,"line":606},[52,45688,4744],{"class":58},[52,45690,45691],{"class":54,"line":653},[52,45692,1773],{"class":58},[52,45694,45695],{"class":54,"line":662},[52,45696,1778],{"class":58},[156,45698,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45700},[45701,45702],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/progressiveblur",{"title":45378,"description":45386},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":45709,"title":45710,"body":45711,"category":27760,"componentType":20842,"description":45718,"extension":168,"meta":45959,"navigation":171,"path":45960,"requiresChild":27763,"seo":45961,"stem":45962,"__hash__":45963},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":45712,"toc":45955},[45713,45716,45719,45721,45723,45726,45728,45953],[11,45714,45710],{"id":45715},"radialgradient",[15,45717,45718],{},"Radial gradient radiating from a center point",[26901,45720],{"component":45710},[23,45722,26905],{"id":21503},[26907,45724],{":props":45725},"[{\"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,45727,26913],{"id":26912},[217,45729,45730,45770,45813,45853,45895],{":tabs":1543},[43,45731,45733],{"className":45,"code":45732,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,45734,45735,45743,45750,45758,45762],{"__ignoreMap":48},[52,45736,45737,45739,45741],{"class":54,"line":55},[52,45738,59],{"class":58},[52,45740,63],{"class":62},[52,45742,77],{"class":58},[52,45744,45745,45747],{"class":54,"line":80},[52,45746,83],{"class":58},[52,45748,45749],{"class":62},"RadialGradient\n",[52,45751,45752,45754,45756],{"class":54,"line":108},[52,45753,14901],{"class":66},[52,45755,70],{"class":58},[52,45757,28827],{"class":73},[52,45759,45760],{"class":54,"line":118},[52,45761,1224],{"class":58},[52,45763,45764,45766,45768],{"class":54,"line":594},[52,45765,121],{"class":58},[52,45767,63],{"class":62},[52,45769,77],{"class":58},[43,45771,45773],{"className":360,"code":45772,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,45774,45775,45783,45789,45801,45805],{"__ignoreMap":48},[52,45776,45777,45779,45781],{"class":54,"line":55},[52,45778,59],{"class":58},[52,45780,63],{"class":371},[52,45782,77],{"class":58},[52,45784,45785,45787],{"class":54,"line":80},[52,45786,83],{"class":58},[52,45788,45749],{"class":371},[52,45790,45791,45793,45795,45797,45799],{"class":54,"line":108},[52,45792,7361],{"class":66},[52,45794,70],{"class":231},[52,45796,723],{"class":58},[52,45798,6391],{"class":371},[52,45800,729],{"class":58},[52,45802,45803],{"class":54,"line":118},[52,45804,1224],{"class":58},[52,45806,45807,45809,45811],{"class":54,"line":594},[52,45808,121],{"class":58},[52,45810,63],{"class":371},[52,45812,77],{"class":58},[43,45814,45815],{"className":2507,"code":45772,"language":2509,"meta":48,"style":48},[31,45816,45817,45825,45831,45841,45845],{"__ignoreMap":48},[52,45818,45819,45821,45823],{"class":54,"line":55},[52,45820,59],{"class":58},[52,45822,63],{"class":371},[52,45824,77],{"class":58},[52,45826,45827,45829],{"class":54,"line":80},[52,45828,83],{"class":58},[52,45830,45749],{"class":371},[52,45832,45833,45835,45837,45839],{"class":54,"line":108},[52,45834,7361],{"class":66},[52,45836,24845],{"class":58},[52,45838,6391],{"class":371},[52,45840,729],{"class":58},[52,45842,45843],{"class":54,"line":118},[52,45844,1224],{"class":58},[52,45846,45847,45849,45851],{"class":54,"line":594},[52,45848,121],{"class":58},[52,45850,63],{"class":371},[52,45852,77],{"class":58},[43,45854,45855],{"className":419,"code":45772,"language":420,"meta":48,"style":48},[31,45856,45857,45865,45871,45883,45887],{"__ignoreMap":48},[52,45858,45859,45861,45863],{"class":54,"line":55},[52,45860,59],{"class":58},[52,45862,63],{"class":371},[52,45864,77],{"class":58},[52,45866,45867,45869],{"class":54,"line":80},[52,45868,83],{"class":58},[52,45870,45749],{"class":371},[52,45872,45873,45875,45877,45879,45881],{"class":54,"line":108},[52,45874,7361],{"class":66},[52,45876,70],{"class":231},[52,45878,723],{"class":58},[52,45880,6391],{"class":371},[52,45882,729],{"class":58},[52,45884,45885],{"class":54,"line":118},[52,45886,1224],{"class":58},[52,45888,45889,45891,45893],{"class":54,"line":594},[52,45890,121],{"class":58},[52,45892,63],{"class":371},[52,45894,77],{"class":58},[43,45896,45898],{"className":222,"code":45897,"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,45899,45900,45910,45914,45928,45932,45945,45949],{"__ignoreMap":48},[52,45901,45902,45904,45906,45908],{"class":54,"line":55},[52,45903,232],{"class":231},[52,45905,9231],{"class":58},[52,45907,238],{"class":231},[52,45909,9236],{"class":73},[52,45911,45912],{"class":54,"line":80},[52,45913,597],{"emptyLinePlaceholder":171},[52,45915,45916,45918,45920,45922,45924,45926],{"class":54,"line":108},[52,45917,1721],{"class":231},[52,45919,1724],{"class":371},[52,45921,1727],{"class":231},[52,45923,1730],{"class":231},[52,45925,1733],{"class":66},[52,45927,1736],{"class":58},[52,45929,45930],{"class":54,"line":118},[52,45931,1751],{"class":58},[52,45933,45934,45936,45939,45941,45943],{"class":54,"line":594},[52,45935,1756],{"class":58},[52,45937,45938],{"class":73},"'RadialGradient'",[52,45940,5254],{"class":58},[52,45942,6391],{"class":371},[52,45944,1768],{"class":58},[52,45946,45947],{"class":54,"line":600},[52,45948,1773],{"class":58},[52,45950,45951],{"class":54,"line":606},[52,45952,1778],{"class":58},[156,45954,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45956},[45957,45958],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/radialgradient",{"title":45710,"description":45718},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":45965,"title":45966,"body":45967,"category":29105,"componentType":20848,"description":45974,"extension":168,"meta":46291,"navigation":171,"path":46292,"requiresChild":171,"seo":46293,"stem":46294,"__hash__":46295},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":45968,"toc":46287},[45969,45972,45975,45977,45979,45982,45984,46285],[11,45970,45966],{"id":45971},"rectangularcoordinates",[15,45973,45974],{},"Convert polar coordinates back to rectangular space",[26901,45976],{"component":45966},[23,45978,26905],{"id":21503},[26907,45980],{":props":45981},"[{\"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,45983,26913],{"id":26912},[217,45985,45986,46042,46101,46157,46215],{":tabs":1543},[43,45987,45989],{"className":45,"code":45988,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,45990,45991,45999,46006,46014,46018,46026,46034],{"__ignoreMap":48},[52,45992,45993,45995,45997],{"class":54,"line":55},[52,45994,59],{"class":58},[52,45996,63],{"class":62},[52,45998,77],{"class":58},[52,46000,46001,46003],{"class":54,"line":80},[52,46002,83],{"class":58},[52,46004,46005],{"class":62},"RectangularCoordinates\n",[52,46007,46008,46010,46012],{"class":54,"line":108},[52,46009,17870],{"class":66},[52,46011,70],{"class":58},[52,46013,28827],{"class":73},[52,46015,46016],{"class":54,"line":118},[52,46017,26949],{"class":58},[52,46019,46020,46022,46024],{"class":54,"line":594},[52,46021,2213],{"class":58},[52,46023,2216],{"class":62},[52,46025,105],{"class":58},[52,46027,46028,46030,46032],{"class":54,"line":600},[52,46029,2230],{"class":58},[52,46031,45966],{"class":62},[52,46033,77],{"class":58},[52,46035,46036,46038,46040],{"class":54,"line":606},[52,46037,121],{"class":58},[52,46039,63],{"class":62},[52,46041,77],{"class":58},[43,46043,46045],{"className":360,"code":46044,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,46046,46047,46055,46061,46073,46077,46085,46093],{"__ignoreMap":48},[52,46048,46049,46051,46053],{"class":54,"line":55},[52,46050,59],{"class":58},[52,46052,63],{"class":371},[52,46054,77],{"class":58},[52,46056,46057,46059],{"class":54,"line":80},[52,46058,83],{"class":58},[52,46060,46005],{"class":371},[52,46062,46063,46065,46067,46069,46071],{"class":54,"line":108},[52,46064,17981],{"class":66},[52,46066,70],{"class":231},[52,46068,723],{"class":58},[52,46070,6391],{"class":371},[52,46072,729],{"class":58},[52,46074,46075],{"class":54,"line":118},[52,46076,26949],{"class":58},[52,46078,46079,46081,46083],{"class":54,"line":594},[52,46080,2213],{"class":58},[52,46082,2216],{"class":371},[52,46084,105],{"class":58},[52,46086,46087,46089,46091],{"class":54,"line":600},[52,46088,2230],{"class":58},[52,46090,45966],{"class":371},[52,46092,77],{"class":58},[52,46094,46095,46097,46099],{"class":54,"line":606},[52,46096,121],{"class":58},[52,46098,63],{"class":371},[52,46100,77],{"class":58},[43,46102,46103],{"className":2507,"code":46044,"language":2509,"meta":48,"style":48},[31,46104,46105,46113,46119,46129,46133,46141,46149],{"__ignoreMap":48},[52,46106,46107,46109,46111],{"class":54,"line":55},[52,46108,59],{"class":58},[52,46110,63],{"class":371},[52,46112,77],{"class":58},[52,46114,46115,46117],{"class":54,"line":80},[52,46116,83],{"class":58},[52,46118,46005],{"class":371},[52,46120,46121,46123,46125,46127],{"class":54,"line":108},[52,46122,17981],{"class":66},[52,46124,24845],{"class":58},[52,46126,6391],{"class":371},[52,46128,729],{"class":58},[52,46130,46131],{"class":54,"line":118},[52,46132,26949],{"class":58},[52,46134,46135,46137,46139],{"class":54,"line":594},[52,46136,2213],{"class":58},[52,46138,2216],{"class":371},[52,46140,105],{"class":58},[52,46142,46143,46145,46147],{"class":54,"line":600},[52,46144,2230],{"class":58},[52,46146,45966],{"class":371},[52,46148,77],{"class":58},[52,46150,46151,46153,46155],{"class":54,"line":606},[52,46152,121],{"class":58},[52,46154,63],{"class":371},[52,46156,77],{"class":58},[43,46158,46159],{"className":419,"code":46044,"language":420,"meta":48,"style":48},[31,46160,46161,46169,46175,46187,46191,46199,46207],{"__ignoreMap":48},[52,46162,46163,46165,46167],{"class":54,"line":55},[52,46164,59],{"class":58},[52,46166,63],{"class":371},[52,46168,77],{"class":58},[52,46170,46171,46173],{"class":54,"line":80},[52,46172,83],{"class":58},[52,46174,46005],{"class":371},[52,46176,46177,46179,46181,46183,46185],{"class":54,"line":108},[52,46178,17981],{"class":66},[52,46180,70],{"class":231},[52,46182,723],{"class":58},[52,46184,6391],{"class":371},[52,46186,729],{"class":58},[52,46188,46189],{"class":54,"line":118},[52,46190,26949],{"class":58},[52,46192,46193,46195,46197],{"class":54,"line":594},[52,46194,2213],{"class":58},[52,46196,2216],{"class":371},[52,46198,105],{"class":58},[52,46200,46201,46203,46205],{"class":54,"line":600},[52,46202,2230],{"class":58},[52,46204,45966],{"class":371},[52,46206,77],{"class":58},[52,46208,46209,46211,46213],{"class":54,"line":606},[52,46210,121],{"class":58},[52,46212,63],{"class":371},[52,46214,77],{"class":58},[43,46216,46218],{"className":222,"code":46217,"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,46219,46220,46230,46234,46248,46252,46265,46273,46277,46281],{"__ignoreMap":48},[52,46221,46222,46224,46226,46228],{"class":54,"line":55},[52,46223,232],{"class":231},[52,46225,9231],{"class":58},[52,46227,238],{"class":231},[52,46229,9236],{"class":73},[52,46231,46232],{"class":54,"line":80},[52,46233,597],{"emptyLinePlaceholder":171},[52,46235,46236,46238,46240,46242,46244,46246],{"class":54,"line":108},[52,46237,1721],{"class":231},[52,46239,1724],{"class":371},[52,46241,1727],{"class":231},[52,46243,1730],{"class":231},[52,46245,1733],{"class":66},[52,46247,1736],{"class":58},[52,46249,46250],{"class":54,"line":118},[52,46251,1751],{"class":58},[52,46253,46254,46256,46259,46261,46263],{"class":54,"line":594},[52,46255,1756],{"class":58},[52,46257,46258],{"class":73},"'RectangularCoordinates'",[52,46260,27194],{"class":58},[52,46262,6391],{"class":371},[52,46264,5259],{"class":58},[52,46266,46267,46269,46271],{"class":54,"line":600},[52,46268,4727],{"class":58},[52,46270,2869],{"class":73},[52,46272,2129],{"class":58},[52,46274,46275],{"class":54,"line":606},[52,46276,4744],{"class":58},[52,46278,46279],{"class":54,"line":653},[52,46280,1773],{"class":58},[52,46282,46283],{"class":54,"line":662},[52,46284,1778],{"class":58},[156,46286,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46288},[46289,46290],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/rectangularcoordinates",{"title":45966,"description":45974},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":46297,"title":46298,"body":46299,"category":30727,"componentType":20842,"description":46306,"extension":168,"meta":46583,"navigation":171,"path":46584,"requiresChild":27763,"seo":46585,"stem":46586,"__hash__":46587},"components/docs/components/Ring.md","Ring",{"type":8,"value":46300,"toc":46579},[46301,46304,46307,46309,46311,46314,46316,46577],[11,46302,46298],{"id":46303},"ring",[15,46305,46306],{},"Annular ring (donut) with adjustable radius and band thickness",[26901,46308],{"component":46298},[23,46310,26905],{"id":21503},[26907,46312],{":props":46313},"[{\"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,46315,26913],{"id":26912},[217,46317,46318,46366,46417,46465,46515],{":tabs":1543},[43,46319,46321],{"className":45,"code":46320,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,46322,46323,46331,46338,46346,46354,46358],{"__ignoreMap":48},[52,46324,46325,46327,46329],{"class":54,"line":55},[52,46326,59],{"class":58},[52,46328,63],{"class":62},[52,46330,77],{"class":58},[52,46332,46333,46335],{"class":54,"line":80},[52,46334,83],{"class":58},[52,46336,46337],{"class":62},"Ring\n",[52,46339,46340,46342,46344],{"class":54,"line":108},[52,46341,7351],{"class":66},[52,46343,70],{"class":58},[52,46345,7307],{"class":73},[52,46347,46348,46350,46352],{"class":54,"line":118},[52,46349,14901],{"class":66},[52,46351,70],{"class":58},[52,46353,31599],{"class":73},[52,46355,46356],{"class":54,"line":594},[52,46357,1224],{"class":58},[52,46359,46360,46362,46364],{"class":54,"line":600},[52,46361,121],{"class":58},[52,46363,63],{"class":62},[52,46365,77],{"class":58},[43,46367,46369],{"className":360,"code":46368,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,46370,46371,46379,46385,46393,46405,46409],{"__ignoreMap":48},[52,46372,46373,46375,46377],{"class":54,"line":55},[52,46374,59],{"class":58},[52,46376,63],{"class":371},[52,46378,77],{"class":58},[52,46380,46381,46383],{"class":54,"line":80},[52,46382,83],{"class":58},[52,46384,46337],{"class":371},[52,46386,46387,46389,46391],{"class":54,"line":108},[52,46388,7351],{"class":66},[52,46390,70],{"class":231},[52,46392,7307],{"class":73},[52,46394,46395,46397,46399,46401,46403],{"class":54,"line":118},[52,46396,7361],{"class":66},[52,46398,70],{"class":231},[52,46400,723],{"class":58},[52,46402,19478],{"class":371},[52,46404,729],{"class":58},[52,46406,46407],{"class":54,"line":594},[52,46408,1224],{"class":58},[52,46410,46411,46413,46415],{"class":54,"line":600},[52,46412,121],{"class":58},[52,46414,63],{"class":371},[52,46416,77],{"class":58},[43,46418,46419],{"className":2507,"code":46368,"language":2509,"meta":48,"style":48},[31,46420,46421,46429,46435,46443,46453,46457],{"__ignoreMap":48},[52,46422,46423,46425,46427],{"class":54,"line":55},[52,46424,59],{"class":58},[52,46426,63],{"class":371},[52,46428,77],{"class":58},[52,46430,46431,46433],{"class":54,"line":80},[52,46432,83],{"class":58},[52,46434,46337],{"class":371},[52,46436,46437,46439,46441],{"class":54,"line":108},[52,46438,7351],{"class":66},[52,46440,70],{"class":58},[52,46442,7307],{"class":73},[52,46444,46445,46447,46449,46451],{"class":54,"line":118},[52,46446,7361],{"class":66},[52,46448,24845],{"class":58},[52,46450,19478],{"class":371},[52,46452,729],{"class":58},[52,46454,46455],{"class":54,"line":594},[52,46456,1224],{"class":58},[52,46458,46459,46461,46463],{"class":54,"line":600},[52,46460,121],{"class":58},[52,46462,63],{"class":371},[52,46464,77],{"class":58},[43,46466,46467],{"className":419,"code":46368,"language":420,"meta":48,"style":48},[31,46468,46469,46477,46483,46491,46503,46507],{"__ignoreMap":48},[52,46470,46471,46473,46475],{"class":54,"line":55},[52,46472,59],{"class":58},[52,46474,63],{"class":371},[52,46476,77],{"class":58},[52,46478,46479,46481],{"class":54,"line":80},[52,46480,83],{"class":58},[52,46482,46337],{"class":371},[52,46484,46485,46487,46489],{"class":54,"line":108},[52,46486,7351],{"class":66},[52,46488,70],{"class":231},[52,46490,7307],{"class":73},[52,46492,46493,46495,46497,46499,46501],{"class":54,"line":118},[52,46494,7361],{"class":66},[52,46496,70],{"class":231},[52,46498,723],{"class":58},[52,46500,19478],{"class":371},[52,46502,729],{"class":58},[52,46504,46505],{"class":54,"line":594},[52,46506,1224],{"class":58},[52,46508,46509,46511,46513],{"class":54,"line":600},[52,46510,121],{"class":58},[52,46512,63],{"class":371},[52,46514,77],{"class":58},[43,46516,46518],{"className":222,"code":46517,"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,46519,46520,46530,46534,46548,46552,46569,46573],{"__ignoreMap":48},[52,46521,46522,46524,46526,46528],{"class":54,"line":55},[52,46523,232],{"class":231},[52,46525,9231],{"class":58},[52,46527,238],{"class":231},[52,46529,9236],{"class":73},[52,46531,46532],{"class":54,"line":80},[52,46533,597],{"emptyLinePlaceholder":171},[52,46535,46536,46538,46540,46542,46544,46546],{"class":54,"line":108},[52,46537,1721],{"class":231},[52,46539,1724],{"class":371},[52,46541,1727],{"class":231},[52,46543,1730],{"class":231},[52,46545,1733],{"class":66},[52,46547,1736],{"class":58},[52,46549,46550],{"class":54,"line":118},[52,46551,1751],{"class":58},[52,46553,46554,46556,46559,46561,46563,46565,46567],{"class":54,"line":594},[52,46555,1756],{"class":58},[52,46557,46558],{"class":73},"'Ring'",[52,46560,1762],{"class":58},[52,46562,7886],{"class":73},[52,46564,4278],{"class":58},[52,46566,19478],{"class":371},[52,46568,1768],{"class":58},[52,46570,46571],{"class":54,"line":600},[52,46572,1773],{"class":58},[52,46574,46575],{"class":54,"line":606},[52,46576,1778],{"class":58},[156,46578,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46580},[46581,46582],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ring",{"title":46298,"description":46306},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":46589,"title":46590,"body":46591,"category":27760,"componentType":20842,"description":46598,"extension":168,"meta":46783,"navigation":171,"path":46784,"requiresChild":27763,"seo":46785,"stem":46786,"__hash__":46787},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":46592,"toc":46779},[46593,46596,46599,46601,46603,46606,46608,46777],[11,46594,46590],{"id":46595},"ripples",[15,46597,46598],{},"Concentric animated ripples emanating from a point",[26901,46600],{"component":46590},[23,46602,26905],{"id":21503},[26907,46604],{":props":46605},"[{\"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,46607,26913],{"id":26912},[217,46609,46610,46639,46667,46695,46723],{":tabs":1543},[43,46611,46613],{"className":45,"code":46612,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,46614,46615,46623,46631],{"__ignoreMap":48},[52,46616,46617,46619,46621],{"class":54,"line":55},[52,46618,59],{"class":58},[52,46620,63],{"class":62},[52,46622,77],{"class":58},[52,46624,46625,46627,46629],{"class":54,"line":80},[52,46626,83],{"class":58},[52,46628,46590],{"class":62},[52,46630,105],{"class":58},[52,46632,46633,46635,46637],{"class":54,"line":108},[52,46634,121],{"class":58},[52,46636,63],{"class":62},[52,46638,77],{"class":58},[43,46640,46641],{"className":360,"code":46612,"language":362,"meta":48,"style":48},[31,46642,46643,46651,46659],{"__ignoreMap":48},[52,46644,46645,46647,46649],{"class":54,"line":55},[52,46646,59],{"class":58},[52,46648,63],{"class":371},[52,46650,77],{"class":58},[52,46652,46653,46655,46657],{"class":54,"line":80},[52,46654,83],{"class":58},[52,46656,46590],{"class":371},[52,46658,105],{"class":58},[52,46660,46661,46663,46665],{"class":54,"line":108},[52,46662,121],{"class":58},[52,46664,63],{"class":371},[52,46666,77],{"class":58},[43,46668,46669],{"className":2507,"code":46612,"language":2509,"meta":48,"style":48},[31,46670,46671,46679,46687],{"__ignoreMap":48},[52,46672,46673,46675,46677],{"class":54,"line":55},[52,46674,59],{"class":58},[52,46676,63],{"class":371},[52,46678,77],{"class":58},[52,46680,46681,46683,46685],{"class":54,"line":80},[52,46682,83],{"class":58},[52,46684,46590],{"class":371},[52,46686,105],{"class":58},[52,46688,46689,46691,46693],{"class":54,"line":108},[52,46690,121],{"class":58},[52,46692,63],{"class":371},[52,46694,77],{"class":58},[43,46696,46697],{"className":419,"code":46612,"language":420,"meta":48,"style":48},[31,46698,46699,46707,46715],{"__ignoreMap":48},[52,46700,46701,46703,46705],{"class":54,"line":55},[52,46702,59],{"class":58},[52,46704,63],{"class":371},[52,46706,77],{"class":58},[52,46708,46709,46711,46713],{"class":54,"line":80},[52,46710,83],{"class":58},[52,46712,46590],{"class":371},[52,46714,105],{"class":58},[52,46716,46717,46719,46721],{"class":54,"line":108},[52,46718,121],{"class":58},[52,46720,63],{"class":371},[52,46722,77],{"class":58},[43,46724,46726],{"className":222,"code":46725,"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,46727,46728,46738,46742,46756,46760,46769,46773],{"__ignoreMap":48},[52,46729,46730,46732,46734,46736],{"class":54,"line":55},[52,46731,232],{"class":231},[52,46733,9231],{"class":58},[52,46735,238],{"class":231},[52,46737,9236],{"class":73},[52,46739,46740],{"class":54,"line":80},[52,46741,597],{"emptyLinePlaceholder":171},[52,46743,46744,46746,46748,46750,46752,46754],{"class":54,"line":108},[52,46745,1721],{"class":231},[52,46747,1724],{"class":371},[52,46749,1727],{"class":231},[52,46751,1730],{"class":231},[52,46753,1733],{"class":66},[52,46755,1736],{"class":58},[52,46757,46758],{"class":54,"line":118},[52,46759,1751],{"class":58},[52,46761,46762,46764,46767],{"class":54,"line":594},[52,46763,1756],{"class":58},[52,46765,46766],{"class":73},"'Ripples'",[52,46768,2129],{"class":58},[52,46770,46771],{"class":54,"line":600},[52,46772,1773],{"class":58},[52,46774,46775],{"class":54,"line":606},[52,46776,1778],{"class":58},[156,46778,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":46780},[46781,46782],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ripples",{"title":46590,"description":46598},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":46789,"title":46790,"body":46791,"category":30727,"componentType":20842,"description":46798,"extension":168,"meta":47028,"navigation":171,"path":47029,"requiresChild":27763,"seo":47030,"stem":47031,"__hash__":47032},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":46792,"toc":47024},[46793,46796,46799,46801,46803,46806,46808,47022],[11,46794,46790],{"id":46795},"roundedrect",[15,46797,46798],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26901,46800],{"component":46790},[23,46802,26905],{"id":21503},[26907,46804],{":props":46805},"[{\"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,46807,26913],{"id":26912},[217,46809,46810,46850,46888,46926,46964],{":tabs":1543},[43,46811,46813],{"className":45,"code":46812,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,46814,46815,46823,46830,46838,46842],{"__ignoreMap":48},[52,46816,46817,46819,46821],{"class":54,"line":55},[52,46818,59],{"class":58},[52,46820,63],{"class":62},[52,46822,77],{"class":58},[52,46824,46825,46827],{"class":54,"line":80},[52,46826,83],{"class":58},[52,46828,46829],{"class":62},"RoundedRect\n",[52,46831,46832,46834,46836],{"class":54,"line":108},[52,46833,7351],{"class":66},[52,46835,70],{"class":58},[52,46837,7307],{"class":73},[52,46839,46840],{"class":54,"line":118},[52,46841,1224],{"class":58},[52,46843,46844,46846,46848],{"class":54,"line":594},[52,46845,121],{"class":58},[52,46847,63],{"class":62},[52,46849,77],{"class":58},[43,46851,46852],{"className":360,"code":46812,"language":362,"meta":48,"style":48},[31,46853,46854,46862,46868,46876,46880],{"__ignoreMap":48},[52,46855,46856,46858,46860],{"class":54,"line":55},[52,46857,59],{"class":58},[52,46859,63],{"class":371},[52,46861,77],{"class":58},[52,46863,46864,46866],{"class":54,"line":80},[52,46865,83],{"class":58},[52,46867,46829],{"class":371},[52,46869,46870,46872,46874],{"class":54,"line":108},[52,46871,7351],{"class":66},[52,46873,70],{"class":231},[52,46875,7307],{"class":73},[52,46877,46878],{"class":54,"line":118},[52,46879,1224],{"class":58},[52,46881,46882,46884,46886],{"class":54,"line":594},[52,46883,121],{"class":58},[52,46885,63],{"class":371},[52,46887,77],{"class":58},[43,46889,46890],{"className":2507,"code":46812,"language":2509,"meta":48,"style":48},[31,46891,46892,46900,46906,46914,46918],{"__ignoreMap":48},[52,46893,46894,46896,46898],{"class":54,"line":55},[52,46895,59],{"class":58},[52,46897,63],{"class":371},[52,46899,77],{"class":58},[52,46901,46902,46904],{"class":54,"line":80},[52,46903,83],{"class":58},[52,46905,46829],{"class":371},[52,46907,46908,46910,46912],{"class":54,"line":108},[52,46909,7351],{"class":66},[52,46911,70],{"class":58},[52,46913,7307],{"class":73},[52,46915,46916],{"class":54,"line":118},[52,46917,1224],{"class":58},[52,46919,46920,46922,46924],{"class":54,"line":594},[52,46921,121],{"class":58},[52,46923,63],{"class":371},[52,46925,77],{"class":58},[43,46927,46928],{"className":419,"code":46812,"language":420,"meta":48,"style":48},[31,46929,46930,46938,46944,46952,46956],{"__ignoreMap":48},[52,46931,46932,46934,46936],{"class":54,"line":55},[52,46933,59],{"class":58},[52,46935,63],{"class":371},[52,46937,77],{"class":58},[52,46939,46940,46942],{"class":54,"line":80},[52,46941,83],{"class":58},[52,46943,46829],{"class":371},[52,46945,46946,46948,46950],{"class":54,"line":108},[52,46947,7351],{"class":66},[52,46949,70],{"class":231},[52,46951,7307],{"class":73},[52,46953,46954],{"class":54,"line":118},[52,46955,1224],{"class":58},[52,46957,46958,46960,46962],{"class":54,"line":594},[52,46959,121],{"class":58},[52,46961,63],{"class":371},[52,46963,77],{"class":58},[43,46965,46967],{"className":222,"code":46966,"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,46968,46969,46979,46983,46997,47001,47014,47018],{"__ignoreMap":48},[52,46970,46971,46973,46975,46977],{"class":54,"line":55},[52,46972,232],{"class":231},[52,46974,9231],{"class":58},[52,46976,238],{"class":231},[52,46978,9236],{"class":73},[52,46980,46981],{"class":54,"line":80},[52,46982,597],{"emptyLinePlaceholder":171},[52,46984,46985,46987,46989,46991,46993,46995],{"class":54,"line":108},[52,46986,1721],{"class":231},[52,46988,1724],{"class":371},[52,46990,1727],{"class":231},[52,46992,1730],{"class":231},[52,46994,1733],{"class":66},[52,46996,1736],{"class":58},[52,46998,46999],{"class":54,"line":118},[52,47000,1751],{"class":58},[52,47002,47003,47005,47008,47010,47012],{"class":54,"line":594},[52,47004,1756],{"class":58},[52,47006,47007],{"class":73},"'RoundedRect'",[52,47009,1762],{"class":58},[52,47011,7886],{"class":73},[52,47013,1768],{"class":58},[52,47015,47016],{"class":54,"line":600},[52,47017,1773],{"class":58},[52,47019,47020],{"class":54,"line":606},[52,47021,1778],{"class":58},[156,47023,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47025},[47026,47027],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/roundedrect",{"title":46790,"description":46798},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":47034,"title":47035,"body":47036,"category":28771,"componentType":20848,"description":47042,"extension":168,"meta":47359,"navigation":171,"path":47360,"requiresChild":171,"seo":47361,"stem":47362,"__hash__":47363},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":47037,"toc":47355},[47038,47040,47043,47045,47047,47050,47052,47353],[11,47039,47035],{"id":5773},[15,47041,47042],{},"Adjust color saturation intensity",[26901,47044],{"component":47035},[23,47046,26905],{"id":21503},[26907,47048],{":props":47049},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,47051,26913],{"id":26912},[217,47053,47054,47110,47169,47225,47283],{":tabs":1543},[43,47055,47057],{"className":45,"code":47056,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,47058,47059,47067,47074,47082,47086,47094,47102],{"__ignoreMap":48},[52,47060,47061,47063,47065],{"class":54,"line":55},[52,47062,59],{"class":58},[52,47064,63],{"class":62},[52,47066,77],{"class":58},[52,47068,47069,47071],{"class":54,"line":80},[52,47070,83],{"class":58},[52,47072,47073],{"class":62},"Saturation\n",[52,47075,47076,47078,47080],{"class":54,"line":108},[52,47077,17870],{"class":66},[52,47079,70],{"class":58},[52,47081,28827],{"class":73},[52,47083,47084],{"class":54,"line":118},[52,47085,26949],{"class":58},[52,47087,47088,47090,47092],{"class":54,"line":594},[52,47089,2213],{"class":58},[52,47091,2216],{"class":62},[52,47093,105],{"class":58},[52,47095,47096,47098,47100],{"class":54,"line":600},[52,47097,2230],{"class":58},[52,47099,47035],{"class":62},[52,47101,77],{"class":58},[52,47103,47104,47106,47108],{"class":54,"line":606},[52,47105,121],{"class":58},[52,47107,63],{"class":62},[52,47109,77],{"class":58},[43,47111,47113],{"className":360,"code":47112,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,47114,47115,47123,47129,47141,47145,47153,47161],{"__ignoreMap":48},[52,47116,47117,47119,47121],{"class":54,"line":55},[52,47118,59],{"class":58},[52,47120,63],{"class":371},[52,47122,77],{"class":58},[52,47124,47125,47127],{"class":54,"line":80},[52,47126,83],{"class":58},[52,47128,47073],{"class":371},[52,47130,47131,47133,47135,47137,47139],{"class":54,"line":108},[52,47132,17981],{"class":66},[52,47134,70],{"class":231},[52,47136,723],{"class":58},[52,47138,6391],{"class":371},[52,47140,729],{"class":58},[52,47142,47143],{"class":54,"line":118},[52,47144,26949],{"class":58},[52,47146,47147,47149,47151],{"class":54,"line":594},[52,47148,2213],{"class":58},[52,47150,2216],{"class":371},[52,47152,105],{"class":58},[52,47154,47155,47157,47159],{"class":54,"line":600},[52,47156,2230],{"class":58},[52,47158,47035],{"class":371},[52,47160,77],{"class":58},[52,47162,47163,47165,47167],{"class":54,"line":606},[52,47164,121],{"class":58},[52,47166,63],{"class":371},[52,47168,77],{"class":58},[43,47170,47171],{"className":2507,"code":47112,"language":2509,"meta":48,"style":48},[31,47172,47173,47181,47187,47197,47201,47209,47217],{"__ignoreMap":48},[52,47174,47175,47177,47179],{"class":54,"line":55},[52,47176,59],{"class":58},[52,47178,63],{"class":371},[52,47180,77],{"class":58},[52,47182,47183,47185],{"class":54,"line":80},[52,47184,83],{"class":58},[52,47186,47073],{"class":371},[52,47188,47189,47191,47193,47195],{"class":54,"line":108},[52,47190,17981],{"class":66},[52,47192,24845],{"class":58},[52,47194,6391],{"class":371},[52,47196,729],{"class":58},[52,47198,47199],{"class":54,"line":118},[52,47200,26949],{"class":58},[52,47202,47203,47205,47207],{"class":54,"line":594},[52,47204,2213],{"class":58},[52,47206,2216],{"class":371},[52,47208,105],{"class":58},[52,47210,47211,47213,47215],{"class":54,"line":600},[52,47212,2230],{"class":58},[52,47214,47035],{"class":371},[52,47216,77],{"class":58},[52,47218,47219,47221,47223],{"class":54,"line":606},[52,47220,121],{"class":58},[52,47222,63],{"class":371},[52,47224,77],{"class":58},[43,47226,47227],{"className":419,"code":47112,"language":420,"meta":48,"style":48},[31,47228,47229,47237,47243,47255,47259,47267,47275],{"__ignoreMap":48},[52,47230,47231,47233,47235],{"class":54,"line":55},[52,47232,59],{"class":58},[52,47234,63],{"class":371},[52,47236,77],{"class":58},[52,47238,47239,47241],{"class":54,"line":80},[52,47240,83],{"class":58},[52,47242,47073],{"class":371},[52,47244,47245,47247,47249,47251,47253],{"class":54,"line":108},[52,47246,17981],{"class":66},[52,47248,70],{"class":231},[52,47250,723],{"class":58},[52,47252,6391],{"class":371},[52,47254,729],{"class":58},[52,47256,47257],{"class":54,"line":118},[52,47258,26949],{"class":58},[52,47260,47261,47263,47265],{"class":54,"line":594},[52,47262,2213],{"class":58},[52,47264,2216],{"class":371},[52,47266,105],{"class":58},[52,47268,47269,47271,47273],{"class":54,"line":600},[52,47270,2230],{"class":58},[52,47272,47035],{"class":371},[52,47274,77],{"class":58},[52,47276,47277,47279,47281],{"class":54,"line":606},[52,47278,121],{"class":58},[52,47280,63],{"class":371},[52,47282,77],{"class":58},[43,47284,47286],{"className":222,"code":47285,"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,47287,47288,47298,47302,47316,47320,47333,47341,47345,47349],{"__ignoreMap":48},[52,47289,47290,47292,47294,47296],{"class":54,"line":55},[52,47291,232],{"class":231},[52,47293,9231],{"class":58},[52,47295,238],{"class":231},[52,47297,9236],{"class":73},[52,47299,47300],{"class":54,"line":80},[52,47301,597],{"emptyLinePlaceholder":171},[52,47303,47304,47306,47308,47310,47312,47314],{"class":54,"line":108},[52,47305,1721],{"class":231},[52,47307,1724],{"class":371},[52,47309,1727],{"class":231},[52,47311,1730],{"class":231},[52,47313,1733],{"class":66},[52,47315,1736],{"class":58},[52,47317,47318],{"class":54,"line":118},[52,47319,1751],{"class":58},[52,47321,47322,47324,47327,47329,47331],{"class":54,"line":594},[52,47323,1756],{"class":58},[52,47325,47326],{"class":73},"'Saturation'",[52,47328,27194],{"class":58},[52,47330,6391],{"class":371},[52,47332,5259],{"class":58},[52,47334,47335,47337,47339],{"class":54,"line":600},[52,47336,4727],{"class":58},[52,47338,2869],{"class":73},[52,47340,2129],{"class":58},[52,47342,47343],{"class":54,"line":606},[52,47344,4744],{"class":58},[52,47346,47347],{"class":54,"line":653},[52,47348,1773],{"class":58},[52,47350,47351],{"class":54,"line":662},[52,47352,1778],{"class":58},[156,47354,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47356},[47357,47358],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/saturation",{"title":47035,"description":47042},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":47365,"title":47366,"body":47367,"category":28771,"componentType":20848,"description":47374,"extension":168,"meta":47635,"navigation":171,"path":47636,"requiresChild":171,"seo":47637,"stem":47638,"__hash__":47639},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":47368,"toc":47631},[47369,47372,47375,47377,47379,47382,47384,47629],[11,47370,47366],{"id":47371},"sharpness",[15,47373,47374],{},"Adjust image sharpness using a convolution kernel",[26901,47376],{"component":47366},[23,47378,26905],{"id":21503},[26907,47380],{":props":47381},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,47383,26913],{"id":26912},[217,47385,47386,47431,47475,47519,47563],{":tabs":1543},[43,47387,47389],{"className":45,"code":47388,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,47390,47391,47399,47407,47415,47423],{"__ignoreMap":48},[52,47392,47393,47395,47397],{"class":54,"line":55},[52,47394,59],{"class":58},[52,47396,63],{"class":62},[52,47398,77],{"class":58},[52,47400,47401,47403,47405],{"class":54,"line":80},[52,47402,83],{"class":58},[52,47404,47366],{"class":62},[52,47406,77],{"class":58},[52,47408,47409,47411,47413],{"class":54,"line":108},[52,47410,2213],{"class":58},[52,47412,2216],{"class":62},[52,47414,105],{"class":58},[52,47416,47417,47419,47421],{"class":54,"line":118},[52,47418,2230],{"class":58},[52,47420,47366],{"class":62},[52,47422,77],{"class":58},[52,47424,47425,47427,47429],{"class":54,"line":594},[52,47426,121],{"class":58},[52,47428,63],{"class":62},[52,47430,77],{"class":58},[43,47432,47433],{"className":360,"code":47388,"language":362,"meta":48,"style":48},[31,47434,47435,47443,47451,47459,47467],{"__ignoreMap":48},[52,47436,47437,47439,47441],{"class":54,"line":55},[52,47438,59],{"class":58},[52,47440,63],{"class":371},[52,47442,77],{"class":58},[52,47444,47445,47447,47449],{"class":54,"line":80},[52,47446,83],{"class":58},[52,47448,47366],{"class":371},[52,47450,77],{"class":58},[52,47452,47453,47455,47457],{"class":54,"line":108},[52,47454,2213],{"class":58},[52,47456,2216],{"class":371},[52,47458,105],{"class":58},[52,47460,47461,47463,47465],{"class":54,"line":118},[52,47462,2230],{"class":58},[52,47464,47366],{"class":371},[52,47466,77],{"class":58},[52,47468,47469,47471,47473],{"class":54,"line":594},[52,47470,121],{"class":58},[52,47472,63],{"class":371},[52,47474,77],{"class":58},[43,47476,47477],{"className":2507,"code":47388,"language":2509,"meta":48,"style":48},[31,47478,47479,47487,47495,47503,47511],{"__ignoreMap":48},[52,47480,47481,47483,47485],{"class":54,"line":55},[52,47482,59],{"class":58},[52,47484,63],{"class":371},[52,47486,77],{"class":58},[52,47488,47489,47491,47493],{"class":54,"line":80},[52,47490,83],{"class":58},[52,47492,47366],{"class":371},[52,47494,77],{"class":58},[52,47496,47497,47499,47501],{"class":54,"line":108},[52,47498,2213],{"class":58},[52,47500,2216],{"class":371},[52,47502,105],{"class":58},[52,47504,47505,47507,47509],{"class":54,"line":118},[52,47506,2230],{"class":58},[52,47508,47366],{"class":371},[52,47510,77],{"class":58},[52,47512,47513,47515,47517],{"class":54,"line":594},[52,47514,121],{"class":58},[52,47516,63],{"class":371},[52,47518,77],{"class":58},[43,47520,47521],{"className":419,"code":47388,"language":420,"meta":48,"style":48},[31,47522,47523,47531,47539,47547,47555],{"__ignoreMap":48},[52,47524,47525,47527,47529],{"class":54,"line":55},[52,47526,59],{"class":58},[52,47528,63],{"class":371},[52,47530,77],{"class":58},[52,47532,47533,47535,47537],{"class":54,"line":80},[52,47534,83],{"class":58},[52,47536,47366],{"class":371},[52,47538,77],{"class":58},[52,47540,47541,47543,47545],{"class":54,"line":108},[52,47542,2213],{"class":58},[52,47544,2216],{"class":371},[52,47546,105],{"class":58},[52,47548,47549,47551,47553],{"class":54,"line":118},[52,47550,2230],{"class":58},[52,47552,47366],{"class":371},[52,47554,77],{"class":58},[52,47556,47557,47559,47561],{"class":54,"line":594},[52,47558,121],{"class":58},[52,47560,63],{"class":371},[52,47562,77],{"class":58},[43,47564,47566],{"className":222,"code":47565,"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,47567,47568,47578,47582,47596,47600,47609,47617,47621,47625],{"__ignoreMap":48},[52,47569,47570,47572,47574,47576],{"class":54,"line":55},[52,47571,232],{"class":231},[52,47573,9231],{"class":58},[52,47575,238],{"class":231},[52,47577,9236],{"class":73},[52,47579,47580],{"class":54,"line":80},[52,47581,597],{"emptyLinePlaceholder":171},[52,47583,47584,47586,47588,47590,47592,47594],{"class":54,"line":108},[52,47585,1721],{"class":231},[52,47587,1724],{"class":371},[52,47589,1727],{"class":231},[52,47591,1730],{"class":231},[52,47593,1733],{"class":66},[52,47595,1736],{"class":58},[52,47597,47598],{"class":54,"line":118},[52,47599,1751],{"class":58},[52,47601,47602,47604,47607],{"class":54,"line":594},[52,47603,1756],{"class":58},[52,47605,47606],{"class":73},"'Sharpness'",[52,47608,4722],{"class":58},[52,47610,47611,47613,47615],{"class":54,"line":600},[52,47612,4727],{"class":58},[52,47614,2869],{"class":73},[52,47616,2129],{"class":58},[52,47618,47619],{"class":54,"line":606},[52,47620,4744],{"class":58},[52,47622,47623],{"class":54,"line":653},[52,47624,1773],{"class":58},[52,47626,47627],{"class":54,"line":662},[52,47628,1778],{"class":58},[156,47630,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":47632},[47633,47634],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sharpness",{"title":47366,"description":47374},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":47641,"title":47642,"body":47643,"category":30161,"componentType":20848,"description":47650,"extension":168,"meta":48015,"navigation":171,"path":48016,"requiresChild":171,"seo":48017,"stem":48018,"__hash__":48019},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":47644,"toc":48011},[47645,47648,47651,47653,47655,47658,47660,48009],[11,47646,47642],{"id":47647},"shatter",[15,47649,47650],{},"Broken glass effect with tectonic plate displacement",[26901,47652],{"component":47642},[23,47654,26905],{"id":21503},[26907,47656],{":props":47657},"[{\"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,47659,26913],{"id":26912},[217,47661,47662,47727,47799,47865,47935],{":tabs":1543},[43,47663,47665],{"className":45,"code":47664,"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,47666,47667,47675,47682,47691,47699,47703,47711,47719],{"__ignoreMap":48},[52,47668,47669,47671,47673],{"class":54,"line":55},[52,47670,59],{"class":58},[52,47672,63],{"class":62},[52,47674,77],{"class":58},[52,47676,47677,47679],{"class":54,"line":80},[52,47678,83],{"class":58},[52,47680,47681],{"class":62},"Shatter\n",[52,47683,47684,47686,47688],{"class":54,"line":108},[52,47685,17870],{"class":66},[52,47687,70],{"class":58},[52,47689,47690],{"class":73},"\"4\"\n",[52,47692,47693,47695,47697],{"class":54,"line":118},[52,47694,14901],{"class":66},[52,47696,70],{"class":58},[52,47698,36464],{"class":73},[52,47700,47701],{"class":54,"line":594},[52,47702,26949],{"class":58},[52,47704,47705,47707,47709],{"class":54,"line":600},[52,47706,2213],{"class":58},[52,47708,2216],{"class":62},[52,47710,105],{"class":58},[52,47712,47713,47715,47717],{"class":54,"line":606},[52,47714,2230],{"class":58},[52,47716,47642],{"class":62},[52,47718,77],{"class":58},[52,47720,47721,47723,47725],{"class":54,"line":653},[52,47722,121],{"class":58},[52,47724,63],{"class":62},[52,47726,77],{"class":58},[43,47728,47730],{"className":360,"code":47729,"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,47731,47732,47740,47746,47759,47771,47775,47783,47791],{"__ignoreMap":48},[52,47733,47734,47736,47738],{"class":54,"line":55},[52,47735,59],{"class":58},[52,47737,63],{"class":371},[52,47739,77],{"class":58},[52,47741,47742,47744],{"class":54,"line":80},[52,47743,83],{"class":58},[52,47745,47681],{"class":371},[52,47747,47748,47750,47752,47754,47757],{"class":54,"line":108},[52,47749,17981],{"class":66},[52,47751,70],{"class":231},[52,47753,723],{"class":58},[52,47755,47756],{"class":371},"4",[52,47758,729],{"class":58},[52,47760,47761,47763,47765,47767,47769],{"class":54,"line":118},[52,47762,7361],{"class":66},[52,47764,70],{"class":231},[52,47766,723],{"class":58},[52,47768,5963],{"class":371},[52,47770,729],{"class":58},[52,47772,47773],{"class":54,"line":594},[52,47774,26949],{"class":58},[52,47776,47777,47779,47781],{"class":54,"line":600},[52,47778,2213],{"class":58},[52,47780,2216],{"class":371},[52,47782,105],{"class":58},[52,47784,47785,47787,47789],{"class":54,"line":606},[52,47786,2230],{"class":58},[52,47788,47642],{"class":371},[52,47790,77],{"class":58},[52,47792,47793,47795,47797],{"class":54,"line":653},[52,47794,121],{"class":58},[52,47796,63],{"class":371},[52,47798,77],{"class":58},[43,47800,47801],{"className":2507,"code":47729,"language":2509,"meta":48,"style":48},[31,47802,47803,47811,47817,47827,47837,47841,47849,47857],{"__ignoreMap":48},[52,47804,47805,47807,47809],{"class":54,"line":55},[52,47806,59],{"class":58},[52,47808,63],{"class":371},[52,47810,77],{"class":58},[52,47812,47813,47815],{"class":54,"line":80},[52,47814,83],{"class":58},[52,47816,47681],{"class":371},[52,47818,47819,47821,47823,47825],{"class":54,"line":108},[52,47820,17981],{"class":66},[52,47822,24845],{"class":58},[52,47824,47756],{"class":371},[52,47826,729],{"class":58},[52,47828,47829,47831,47833,47835],{"class":54,"line":118},[52,47830,7361],{"class":66},[52,47832,24845],{"class":58},[52,47834,5963],{"class":371},[52,47836,729],{"class":58},[52,47838,47839],{"class":54,"line":594},[52,47840,26949],{"class":58},[52,47842,47843,47845,47847],{"class":54,"line":600},[52,47844,2213],{"class":58},[52,47846,2216],{"class":371},[52,47848,105],{"class":58},[52,47850,47851,47853,47855],{"class":54,"line":606},[52,47852,2230],{"class":58},[52,47854,47642],{"class":371},[52,47856,77],{"class":58},[52,47858,47859,47861,47863],{"class":54,"line":653},[52,47860,121],{"class":58},[52,47862,63],{"class":371},[52,47864,77],{"class":58},[43,47866,47867],{"className":419,"code":47729,"language":420,"meta":48,"style":48},[31,47868,47869,47877,47883,47895,47907,47911,47919,47927],{"__ignoreMap":48},[52,47870,47871,47873,47875],{"class":54,"line":55},[52,47872,59],{"class":58},[52,47874,63],{"class":371},[52,47876,77],{"class":58},[52,47878,47879,47881],{"class":54,"line":80},[52,47880,83],{"class":58},[52,47882,47681],{"class":371},[52,47884,47885,47887,47889,47891,47893],{"class":54,"line":108},[52,47886,17981],{"class":66},[52,47888,70],{"class":231},[52,47890,723],{"class":58},[52,47892,47756],{"class":371},[52,47894,729],{"class":58},[52,47896,47897,47899,47901,47903,47905],{"class":54,"line":118},[52,47898,7361],{"class":66},[52,47900,70],{"class":231},[52,47902,723],{"class":58},[52,47904,5963],{"class":371},[52,47906,729],{"class":58},[52,47908,47909],{"class":54,"line":594},[52,47910,26949],{"class":58},[52,47912,47913,47915,47917],{"class":54,"line":600},[52,47914,2213],{"class":58},[52,47916,2216],{"class":371},[52,47918,105],{"class":58},[52,47920,47921,47923,47925],{"class":54,"line":606},[52,47922,2230],{"class":58},[52,47924,47642],{"class":371},[52,47926,77],{"class":58},[52,47928,47929,47931,47933],{"class":54,"line":653},[52,47930,121],{"class":58},[52,47932,63],{"class":371},[52,47934,77],{"class":58},[43,47936,47938],{"className":222,"code":47937,"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,47939,47940,47950,47954,47968,47972,47989,47997,48001,48005],{"__ignoreMap":48},[52,47941,47942,47944,47946,47948],{"class":54,"line":55},[52,47943,232],{"class":231},[52,47945,9231],{"class":58},[52,47947,238],{"class":231},[52,47949,9236],{"class":73},[52,47951,47952],{"class":54,"line":80},[52,47953,597],{"emptyLinePlaceholder":171},[52,47955,47956,47958,47960,47962,47964,47966],{"class":54,"line":108},[52,47957,1721],{"class":231},[52,47959,1724],{"class":371},[52,47961,1727],{"class":231},[52,47963,1730],{"class":231},[52,47965,1733],{"class":66},[52,47967,1736],{"class":58},[52,47969,47970],{"class":54,"line":118},[52,47971,1751],{"class":58},[52,47973,47974,47976,47979,47981,47983,47985,47987],{"class":54,"line":594},[52,47975,1756],{"class":58},[52,47977,47978],{"class":73},"'Shatter'",[52,47980,27194],{"class":58},[52,47982,47756],{"class":371},[52,47984,4278],{"class":58},[52,47986,5963],{"class":371},[52,47988,5259],{"class":58},[52,47990,47991,47993,47995],{"class":54,"line":600},[52,47992,4727],{"class":58},[52,47994,2869],{"class":73},[52,47996,2129],{"class":58},[52,47998,47999],{"class":54,"line":606},[52,48000,4744],{"class":58},[52,48002,48003],{"class":54,"line":653},[52,48004,1773],{"class":58},[52,48006,48007],{"class":54,"line":662},[52,48008,1778],{"class":58},[156,48010,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48012},[48013,48014],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/shatter",{"title":47642,"description":47650},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":48021,"title":48022,"body":48023,"category":27760,"componentType":20842,"description":48030,"extension":168,"meta":48215,"navigation":171,"path":48216,"requiresChild":27763,"seo":48217,"stem":48218,"__hash__":48219},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":48024,"toc":48211},[48025,48028,48031,48033,48035,48038,48040,48209],[11,48026,48022],{"id":48027},"simplexnoise",[15,48029,48030],{},"Organic noise with animated movement",[26901,48032],{"component":48022},[23,48034,26905],{"id":21503},[26907,48036],{":props":48037},"[{\"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,48039,26913],{"id":26912},[217,48041,48042,48071,48099,48127,48155],{":tabs":1543},[43,48043,48045],{"className":45,"code":48044,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,48046,48047,48055,48063],{"__ignoreMap":48},[52,48048,48049,48051,48053],{"class":54,"line":55},[52,48050,59],{"class":58},[52,48052,63],{"class":62},[52,48054,77],{"class":58},[52,48056,48057,48059,48061],{"class":54,"line":80},[52,48058,83],{"class":58},[52,48060,48022],{"class":62},[52,48062,105],{"class":58},[52,48064,48065,48067,48069],{"class":54,"line":108},[52,48066,121],{"class":58},[52,48068,63],{"class":62},[52,48070,77],{"class":58},[43,48072,48073],{"className":360,"code":48044,"language":362,"meta":48,"style":48},[31,48074,48075,48083,48091],{"__ignoreMap":48},[52,48076,48077,48079,48081],{"class":54,"line":55},[52,48078,59],{"class":58},[52,48080,63],{"class":371},[52,48082,77],{"class":58},[52,48084,48085,48087,48089],{"class":54,"line":80},[52,48086,83],{"class":58},[52,48088,48022],{"class":371},[52,48090,105],{"class":58},[52,48092,48093,48095,48097],{"class":54,"line":108},[52,48094,121],{"class":58},[52,48096,63],{"class":371},[52,48098,77],{"class":58},[43,48100,48101],{"className":2507,"code":48044,"language":2509,"meta":48,"style":48},[31,48102,48103,48111,48119],{"__ignoreMap":48},[52,48104,48105,48107,48109],{"class":54,"line":55},[52,48106,59],{"class":58},[52,48108,63],{"class":371},[52,48110,77],{"class":58},[52,48112,48113,48115,48117],{"class":54,"line":80},[52,48114,83],{"class":58},[52,48116,48022],{"class":371},[52,48118,105],{"class":58},[52,48120,48121,48123,48125],{"class":54,"line":108},[52,48122,121],{"class":58},[52,48124,63],{"class":371},[52,48126,77],{"class":58},[43,48128,48129],{"className":419,"code":48044,"language":420,"meta":48,"style":48},[31,48130,48131,48139,48147],{"__ignoreMap":48},[52,48132,48133,48135,48137],{"class":54,"line":55},[52,48134,59],{"class":58},[52,48136,63],{"class":371},[52,48138,77],{"class":58},[52,48140,48141,48143,48145],{"class":54,"line":80},[52,48142,83],{"class":58},[52,48144,48022],{"class":371},[52,48146,105],{"class":58},[52,48148,48149,48151,48153],{"class":54,"line":108},[52,48150,121],{"class":58},[52,48152,63],{"class":371},[52,48154,77],{"class":58},[43,48156,48158],{"className":222,"code":48157,"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,48159,48160,48170,48174,48188,48192,48201,48205],{"__ignoreMap":48},[52,48161,48162,48164,48166,48168],{"class":54,"line":55},[52,48163,232],{"class":231},[52,48165,9231],{"class":58},[52,48167,238],{"class":231},[52,48169,9236],{"class":73},[52,48171,48172],{"class":54,"line":80},[52,48173,597],{"emptyLinePlaceholder":171},[52,48175,48176,48178,48180,48182,48184,48186],{"class":54,"line":108},[52,48177,1721],{"class":231},[52,48179,1724],{"class":371},[52,48181,1727],{"class":231},[52,48183,1730],{"class":231},[52,48185,1733],{"class":66},[52,48187,1736],{"class":58},[52,48189,48190],{"class":54,"line":118},[52,48191,1751],{"class":58},[52,48193,48194,48196,48199],{"class":54,"line":594},[52,48195,1756],{"class":58},[52,48197,48198],{"class":73},"'SimplexNoise'",[52,48200,2129],{"class":58},[52,48202,48203],{"class":54,"line":600},[52,48204,1773],{"class":58},[52,48206,48207],{"class":54,"line":606},[52,48208,1778],{"class":58},[156,48210,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":48212},[48213,48214],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/simplexnoise",{"title":48022,"description":48030},"docs/components/SimplexNoise","d0mO4mGGih-voEAS5386XslXJGaXC6JFX720cMm4EPY",{"id":48221,"title":48222,"body":48223,"category":27760,"componentType":20842,"description":48230,"extension":168,"meta":48460,"navigation":171,"path":48461,"requiresChild":27763,"seo":48462,"stem":48463,"__hash__":48464},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":48224,"toc":48456},[48225,48228,48231,48233,48235,48238,48240,48454],[11,48226,48222],{"id":48227},"sinewave",[15,48229,48230],{},"Animated wave with thickness and softness",[26901,48232],{"component":48222},[23,48234,26905],{"id":21503},[26907,48236],{":props":48237},"[{\"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,48239,26913],{"id":26912},[217,48241,48242,48282,48320,48358,48396],{":tabs":1543},[43,48243,48245],{"className":45,"code":48244,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,48246,48247,48255,48262,48270,48274],{"__ignoreMap":48},[52,48248,48249,48251,48253],{"class":54,"line":55},[52,48250,59],{"class":58},[52,48252,63],{"class":62},[52,48254,77],{"class":58},[52,48256,48257,48259],{"class":54,"line":80},[52,48258,83],{"class":58},[52,48260,48261],{"class":62},"SineWave\n",[52,48263,48264,48266,48268],{"class":54,"line":108},[52,48265,7351],{"class":66},[52,48267,70],{"class":58},[52,48269,7307],{"class":73},[52,48271,48272],{"class":54,"line":118},[52,48273,1224],{"class":58},[52,48275,48276,48278,48280],{"class":54,"line":594},[52,48277,121],{"class":58},[52,48279,63],{"class":62},[52,48281,77],{"class":58},[43,48283,48284],{"className":360,"code":48244,"language":362,"meta":48,"style":48},[31,48285,48286,48294,48300,48308,48312],{"__ignoreMap":48},[52,48287,48288,48290,48292],{"class":54,"line":55},[52,48289,59],{"class":58},[52,48291,63],{"class":371},[52,48293,77],{"class":58},[52,48295,48296,48298],{"class":54,"line":80},[52,48297,83],{"class":58},[52,48299,48261],{"class":371},[52,48301,48302,48304,48306],{"class":54,"line":108},[52,48303,7351],{"class":66},[52,48305,70],{"class":231},[52,48307,7307],{"class":73},[52,48309,48310],{"class":54,"line":118},[52,48311,1224],{"class":58},[52,48313,48314,48316,48318],{"class":54,"line":594},[52,48315,121],{"class":58},[52,48317,63],{"class":371},[52,48319,77],{"class":58},[43,48321,48322],{"className":2507,"code":48244,"language":2509,"meta":48,"style":48},[31,48323,48324,48332,48338,48346,48350],{"__ignoreMap":48},[52,48325,48326,48328,48330],{"class":54,"line":55},[52,48327,59],{"class":58},[52,48329,63],{"class":371},[52,48331,77],{"class":58},[52,48333,48334,48336],{"class":54,"line":80},[52,48335,83],{"class":58},[52,48337,48261],{"class":371},[52,48339,48340,48342,48344],{"class":54,"line":108},[52,48341,7351],{"class":66},[52,48343,70],{"class":58},[52,48345,7307],{"class":73},[52,48347,48348],{"class":54,"line":118},[52,48349,1224],{"class":58},[52,48351,48352,48354,48356],{"class":54,"line":594},[52,48353,121],{"class":58},[52,48355,63],{"class":371},[52,48357,77],{"class":58},[43,48359,48360],{"className":419,"code":48244,"language":420,"meta":48,"style":48},[31,48361,48362,48370,48376,48384,48388],{"__ignoreMap":48},[52,48363,48364,48366,48368],{"class":54,"line":55},[52,48365,59],{"class":58},[52,48367,63],{"class":371},[52,48369,77],{"class":58},[52,48371,48372,48374],{"class":54,"line":80},[52,48373,83],{"class":58},[52,48375,48261],{"class":371},[52,48377,48378,48380,48382],{"class":54,"line":108},[52,48379,7351],{"class":66},[52,48381,70],{"class":231},[52,48383,7307],{"class":73},[52,48385,48386],{"class":54,"line":118},[52,48387,1224],{"class":58},[52,48389,48390,48392,48394],{"class":54,"line":594},[52,48391,121],{"class":58},[52,48393,63],{"class":371},[52,48395,77],{"class":58},[43,48397,48399],{"className":222,"code":48398,"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,48400,48401,48411,48415,48429,48433,48446,48450],{"__ignoreMap":48},[52,48402,48403,48405,48407,48409],{"class":54,"line":55},[52,48404,232],{"class":231},[52,48406,9231],{"class":58},[52,48408,238],{"class":231},[52,48410,9236],{"class":73},[52,48412,48413],{"class":54,"line":80},[52,48414,597],{"emptyLinePlaceholder":171},[52,48416,48417,48419,48421,48423,48425,48427],{"class":54,"line":108},[52,48418,1721],{"class":231},[52,48420,1724],{"class":371},[52,48422,1727],{"class":231},[52,48424,1730],{"class":231},[52,48426,1733],{"class":66},[52,48428,1736],{"class":58},[52,48430,48431],{"class":54,"line":118},[52,48432,1751],{"class":58},[52,48434,48435,48437,48440,48442,48444],{"class":54,"line":594},[52,48436,1756],{"class":58},[52,48438,48439],{"class":73},"'SineWave'",[52,48441,1762],{"class":58},[52,48443,7886],{"class":73},[52,48445,1768],{"class":58},[52,48447,48448],{"class":54,"line":600},[52,48449,1773],{"class":58},[52,48451,48452],{"class":54,"line":606},[52,48453,1778],{"class":58},[156,48455,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48457},[48458,48459],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sinewave",{"title":48222,"description":48230},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":48466,"title":48467,"body":48468,"category":28771,"componentType":20848,"description":48475,"extension":168,"meta":48736,"navigation":171,"path":48737,"requiresChild":171,"seo":48738,"stem":48739,"__hash__":48740},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":48469,"toc":48732},[48470,48473,48476,48478,48480,48483,48485,48730],[11,48471,48467],{"id":48472},"solarize",[15,48474,48475],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26901,48477],{"component":48467},[23,48479,26905],{"id":21503},[26907,48481],{":props":48482},"[{\"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,48484,26913],{"id":26912},[217,48486,48487,48532,48576,48620,48664],{":tabs":1543},[43,48488,48490],{"className":45,"code":48489,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,48491,48492,48500,48508,48516,48524],{"__ignoreMap":48},[52,48493,48494,48496,48498],{"class":54,"line":55},[52,48495,59],{"class":58},[52,48497,63],{"class":62},[52,48499,77],{"class":58},[52,48501,48502,48504,48506],{"class":54,"line":80},[52,48503,83],{"class":58},[52,48505,48467],{"class":62},[52,48507,77],{"class":58},[52,48509,48510,48512,48514],{"class":54,"line":108},[52,48511,2213],{"class":58},[52,48513,2216],{"class":62},[52,48515,105],{"class":58},[52,48517,48518,48520,48522],{"class":54,"line":118},[52,48519,2230],{"class":58},[52,48521,48467],{"class":62},[52,48523,77],{"class":58},[52,48525,48526,48528,48530],{"class":54,"line":594},[52,48527,121],{"class":58},[52,48529,63],{"class":62},[52,48531,77],{"class":58},[43,48533,48534],{"className":360,"code":48489,"language":362,"meta":48,"style":48},[31,48535,48536,48544,48552,48560,48568],{"__ignoreMap":48},[52,48537,48538,48540,48542],{"class":54,"line":55},[52,48539,59],{"class":58},[52,48541,63],{"class":371},[52,48543,77],{"class":58},[52,48545,48546,48548,48550],{"class":54,"line":80},[52,48547,83],{"class":58},[52,48549,48467],{"class":371},[52,48551,77],{"class":58},[52,48553,48554,48556,48558],{"class":54,"line":108},[52,48555,2213],{"class":58},[52,48557,2216],{"class":371},[52,48559,105],{"class":58},[52,48561,48562,48564,48566],{"class":54,"line":118},[52,48563,2230],{"class":58},[52,48565,48467],{"class":371},[52,48567,77],{"class":58},[52,48569,48570,48572,48574],{"class":54,"line":594},[52,48571,121],{"class":58},[52,48573,63],{"class":371},[52,48575,77],{"class":58},[43,48577,48578],{"className":2507,"code":48489,"language":2509,"meta":48,"style":48},[31,48579,48580,48588,48596,48604,48612],{"__ignoreMap":48},[52,48581,48582,48584,48586],{"class":54,"line":55},[52,48583,59],{"class":58},[52,48585,63],{"class":371},[52,48587,77],{"class":58},[52,48589,48590,48592,48594],{"class":54,"line":80},[52,48591,83],{"class":58},[52,48593,48467],{"class":371},[52,48595,77],{"class":58},[52,48597,48598,48600,48602],{"class":54,"line":108},[52,48599,2213],{"class":58},[52,48601,2216],{"class":371},[52,48603,105],{"class":58},[52,48605,48606,48608,48610],{"class":54,"line":118},[52,48607,2230],{"class":58},[52,48609,48467],{"class":371},[52,48611,77],{"class":58},[52,48613,48614,48616,48618],{"class":54,"line":594},[52,48615,121],{"class":58},[52,48617,63],{"class":371},[52,48619,77],{"class":58},[43,48621,48622],{"className":419,"code":48489,"language":420,"meta":48,"style":48},[31,48623,48624,48632,48640,48648,48656],{"__ignoreMap":48},[52,48625,48626,48628,48630],{"class":54,"line":55},[52,48627,59],{"class":58},[52,48629,63],{"class":371},[52,48631,77],{"class":58},[52,48633,48634,48636,48638],{"class":54,"line":80},[52,48635,83],{"class":58},[52,48637,48467],{"class":371},[52,48639,77],{"class":58},[52,48641,48642,48644,48646],{"class":54,"line":108},[52,48643,2213],{"class":58},[52,48645,2216],{"class":371},[52,48647,105],{"class":58},[52,48649,48650,48652,48654],{"class":54,"line":118},[52,48651,2230],{"class":58},[52,48653,48467],{"class":371},[52,48655,77],{"class":58},[52,48657,48658,48660,48662],{"class":54,"line":594},[52,48659,121],{"class":58},[52,48661,63],{"class":371},[52,48663,77],{"class":58},[43,48665,48667],{"className":222,"code":48666,"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,48668,48669,48679,48683,48697,48701,48710,48718,48722,48726],{"__ignoreMap":48},[52,48670,48671,48673,48675,48677],{"class":54,"line":55},[52,48672,232],{"class":231},[52,48674,9231],{"class":58},[52,48676,238],{"class":231},[52,48678,9236],{"class":73},[52,48680,48681],{"class":54,"line":80},[52,48682,597],{"emptyLinePlaceholder":171},[52,48684,48685,48687,48689,48691,48693,48695],{"class":54,"line":108},[52,48686,1721],{"class":231},[52,48688,1724],{"class":371},[52,48690,1727],{"class":231},[52,48692,1730],{"class":231},[52,48694,1733],{"class":66},[52,48696,1736],{"class":58},[52,48698,48699],{"class":54,"line":118},[52,48700,1751],{"class":58},[52,48702,48703,48705,48708],{"class":54,"line":594},[52,48704,1756],{"class":58},[52,48706,48707],{"class":73},"'Solarize'",[52,48709,4722],{"class":58},[52,48711,48712,48714,48716],{"class":54,"line":600},[52,48713,4727],{"class":58},[52,48715,2869],{"class":73},[52,48717,2129],{"class":58},[52,48719,48720],{"class":54,"line":606},[52,48721,4744],{"class":58},[52,48723,48724],{"class":54,"line":653},[52,48725,1773],{"class":58},[52,48727,48728],{"class":54,"line":662},[52,48729,1778],{"class":58},[156,48731,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":48733},[48734,48735],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solarize",{"title":48467,"description":48475},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":48742,"title":1571,"body":48743,"category":27760,"componentType":20842,"description":48750,"extension":168,"meta":48980,"navigation":171,"path":48981,"requiresChild":27763,"seo":48982,"stem":48983,"__hash__":48984},"components/docs/components/SolidColor.md",{"type":8,"value":48744,"toc":48976},[48745,48748,48751,48753,48755,48758,48760,48974],[11,48746,1571],{"id":48747},"solidcolor",[15,48749,48750],{},"Fill the canvas with a single solid color",[26901,48752],{"component":1571},[23,48754,26905],{"id":21503},[26907,48756],{":props":48757},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,48759,26913],{"id":26912},[217,48761,48762,48803,48841,48879,48917],{":tabs":1543},[43,48763,48765],{"className":45,"code":48764,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,48766,48767,48775,48782,48791,48795],{"__ignoreMap":48},[52,48768,48769,48771,48773],{"class":54,"line":55},[52,48770,59],{"class":58},[52,48772,63],{"class":62},[52,48774,77],{"class":58},[52,48776,48777,48779],{"class":54,"line":80},[52,48778,83],{"class":58},[52,48780,48781],{"class":62},"SolidColor\n",[52,48783,48784,48786,48788],{"class":54,"line":108},[52,48785,7351],{"class":66},[52,48787,70],{"class":58},[52,48789,48790],{"class":73},"\"#5b18ca\"\n",[52,48792,48793],{"class":54,"line":118},[52,48794,1224],{"class":58},[52,48796,48797,48799,48801],{"class":54,"line":594},[52,48798,121],{"class":58},[52,48800,63],{"class":62},[52,48802,77],{"class":58},[43,48804,48805],{"className":360,"code":48764,"language":362,"meta":48,"style":48},[31,48806,48807,48815,48821,48829,48833],{"__ignoreMap":48},[52,48808,48809,48811,48813],{"class":54,"line":55},[52,48810,59],{"class":58},[52,48812,63],{"class":371},[52,48814,77],{"class":58},[52,48816,48817,48819],{"class":54,"line":80},[52,48818,83],{"class":58},[52,48820,48781],{"class":371},[52,48822,48823,48825,48827],{"class":54,"line":108},[52,48824,7351],{"class":66},[52,48826,70],{"class":231},[52,48828,48790],{"class":73},[52,48830,48831],{"class":54,"line":118},[52,48832,1224],{"class":58},[52,48834,48835,48837,48839],{"class":54,"line":594},[52,48836,121],{"class":58},[52,48838,63],{"class":371},[52,48840,77],{"class":58},[43,48842,48843],{"className":2507,"code":48764,"language":2509,"meta":48,"style":48},[31,48844,48845,48853,48859,48867,48871],{"__ignoreMap":48},[52,48846,48847,48849,48851],{"class":54,"line":55},[52,48848,59],{"class":58},[52,48850,63],{"class":371},[52,48852,77],{"class":58},[52,48854,48855,48857],{"class":54,"line":80},[52,48856,83],{"class":58},[52,48858,48781],{"class":371},[52,48860,48861,48863,48865],{"class":54,"line":108},[52,48862,7351],{"class":66},[52,48864,70],{"class":58},[52,48866,48790],{"class":73},[52,48868,48869],{"class":54,"line":118},[52,48870,1224],{"class":58},[52,48872,48873,48875,48877],{"class":54,"line":594},[52,48874,121],{"class":58},[52,48876,63],{"class":371},[52,48878,77],{"class":58},[43,48880,48881],{"className":419,"code":48764,"language":420,"meta":48,"style":48},[31,48882,48883,48891,48897,48905,48909],{"__ignoreMap":48},[52,48884,48885,48887,48889],{"class":54,"line":55},[52,48886,59],{"class":58},[52,48888,63],{"class":371},[52,48890,77],{"class":58},[52,48892,48893,48895],{"class":54,"line":80},[52,48894,83],{"class":58},[52,48896,48781],{"class":371},[52,48898,48899,48901,48903],{"class":54,"line":108},[52,48900,7351],{"class":66},[52,48902,70],{"class":231},[52,48904,48790],{"class":73},[52,48906,48907],{"class":54,"line":118},[52,48908,1224],{"class":58},[52,48910,48911,48913,48915],{"class":54,"line":594},[52,48912,121],{"class":58},[52,48914,63],{"class":371},[52,48916,77],{"class":58},[43,48918,48920],{"className":222,"code":48919,"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,48921,48922,48932,48936,48950,48954,48966,48970],{"__ignoreMap":48},[52,48923,48924,48926,48928,48930],{"class":54,"line":55},[52,48925,232],{"class":231},[52,48927,9231],{"class":58},[52,48929,238],{"class":231},[52,48931,9236],{"class":73},[52,48933,48934],{"class":54,"line":80},[52,48935,597],{"emptyLinePlaceholder":171},[52,48937,48938,48940,48942,48944,48946,48948],{"class":54,"line":108},[52,48939,1721],{"class":231},[52,48941,1724],{"class":371},[52,48943,1727],{"class":231},[52,48945,1730],{"class":231},[52,48947,1733],{"class":66},[52,48949,1736],{"class":58},[52,48951,48952],{"class":54,"line":118},[52,48953,1751],{"class":58},[52,48955,48956,48958,48960,48962,48964],{"class":54,"line":594},[52,48957,1756],{"class":58},[52,48959,1759],{"class":73},[52,48961,1762],{"class":58},[52,48963,1765],{"class":73},[52,48965,1768],{"class":58},[52,48967,48968],{"class":54,"line":600},[52,48969,1773],{"class":58},[52,48971,48972],{"class":54,"line":606},[52,48973,1778],{"class":58},[156,48975,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48977},[48978,48979],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solidcolor",{"title":1571,"description":48750},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":48986,"title":48987,"body":48988,"category":29105,"componentType":20848,"description":48995,"extension":168,"meta":49312,"navigation":171,"path":49313,"requiresChild":171,"seo":49314,"stem":49315,"__hash__":49316},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":48989,"toc":49308},[48990,48993,48996,48998,49000,49003,49005,49306],[11,48991,48987],{"id":48992},"spherize",[15,48994,48995],{},"Map content onto a 3D sphere surface with depth distortion",[26901,48997],{"component":48987},[23,48999,26905],{"id":21503},[26907,49001],{":props":49002},"[{\"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,49004,26913],{"id":26912},[217,49006,49007,49063,49122,49178,49236],{":tabs":1543},[43,49008,49010],{"className":45,"code":49009,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,49011,49012,49020,49027,49035,49039,49047,49055],{"__ignoreMap":48},[52,49013,49014,49016,49018],{"class":54,"line":55},[52,49015,59],{"class":58},[52,49017,63],{"class":62},[52,49019,77],{"class":58},[52,49021,49022,49024],{"class":54,"line":80},[52,49023,83],{"class":58},[52,49025,49026],{"class":62},"Spherize\n",[52,49028,49029,49031,49033],{"class":54,"line":108},[52,49030,14901],{"class":66},[52,49032,70],{"class":58},[52,49034,28827],{"class":73},[52,49036,49037],{"class":54,"line":118},[52,49038,26949],{"class":58},[52,49040,49041,49043,49045],{"class":54,"line":594},[52,49042,2213],{"class":58},[52,49044,2216],{"class":62},[52,49046,105],{"class":58},[52,49048,49049,49051,49053],{"class":54,"line":600},[52,49050,2230],{"class":58},[52,49052,48987],{"class":62},[52,49054,77],{"class":58},[52,49056,49057,49059,49061],{"class":54,"line":606},[52,49058,121],{"class":58},[52,49060,63],{"class":62},[52,49062,77],{"class":58},[43,49064,49066],{"className":360,"code":49065,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,49067,49068,49076,49082,49094,49098,49106,49114],{"__ignoreMap":48},[52,49069,49070,49072,49074],{"class":54,"line":55},[52,49071,59],{"class":58},[52,49073,63],{"class":371},[52,49075,77],{"class":58},[52,49077,49078,49080],{"class":54,"line":80},[52,49079,83],{"class":58},[52,49081,49026],{"class":371},[52,49083,49084,49086,49088,49090,49092],{"class":54,"line":108},[52,49085,7361],{"class":66},[52,49087,70],{"class":231},[52,49089,723],{"class":58},[52,49091,6391],{"class":371},[52,49093,729],{"class":58},[52,49095,49096],{"class":54,"line":118},[52,49097,26949],{"class":58},[52,49099,49100,49102,49104],{"class":54,"line":594},[52,49101,2213],{"class":58},[52,49103,2216],{"class":371},[52,49105,105],{"class":58},[52,49107,49108,49110,49112],{"class":54,"line":600},[52,49109,2230],{"class":58},[52,49111,48987],{"class":371},[52,49113,77],{"class":58},[52,49115,49116,49118,49120],{"class":54,"line":606},[52,49117,121],{"class":58},[52,49119,63],{"class":371},[52,49121,77],{"class":58},[43,49123,49124],{"className":2507,"code":49065,"language":2509,"meta":48,"style":48},[31,49125,49126,49134,49140,49150,49154,49162,49170],{"__ignoreMap":48},[52,49127,49128,49130,49132],{"class":54,"line":55},[52,49129,59],{"class":58},[52,49131,63],{"class":371},[52,49133,77],{"class":58},[52,49135,49136,49138],{"class":54,"line":80},[52,49137,83],{"class":58},[52,49139,49026],{"class":371},[52,49141,49142,49144,49146,49148],{"class":54,"line":108},[52,49143,7361],{"class":66},[52,49145,24845],{"class":58},[52,49147,6391],{"class":371},[52,49149,729],{"class":58},[52,49151,49152],{"class":54,"line":118},[52,49153,26949],{"class":58},[52,49155,49156,49158,49160],{"class":54,"line":594},[52,49157,2213],{"class":58},[52,49159,2216],{"class":371},[52,49161,105],{"class":58},[52,49163,49164,49166,49168],{"class":54,"line":600},[52,49165,2230],{"class":58},[52,49167,48987],{"class":371},[52,49169,77],{"class":58},[52,49171,49172,49174,49176],{"class":54,"line":606},[52,49173,121],{"class":58},[52,49175,63],{"class":371},[52,49177,77],{"class":58},[43,49179,49180],{"className":419,"code":49065,"language":420,"meta":48,"style":48},[31,49181,49182,49190,49196,49208,49212,49220,49228],{"__ignoreMap":48},[52,49183,49184,49186,49188],{"class":54,"line":55},[52,49185,59],{"class":58},[52,49187,63],{"class":371},[52,49189,77],{"class":58},[52,49191,49192,49194],{"class":54,"line":80},[52,49193,83],{"class":58},[52,49195,49026],{"class":371},[52,49197,49198,49200,49202,49204,49206],{"class":54,"line":108},[52,49199,7361],{"class":66},[52,49201,70],{"class":231},[52,49203,723],{"class":58},[52,49205,6391],{"class":371},[52,49207,729],{"class":58},[52,49209,49210],{"class":54,"line":118},[52,49211,26949],{"class":58},[52,49213,49214,49216,49218],{"class":54,"line":594},[52,49215,2213],{"class":58},[52,49217,2216],{"class":371},[52,49219,105],{"class":58},[52,49221,49222,49224,49226],{"class":54,"line":600},[52,49223,2230],{"class":58},[52,49225,48987],{"class":371},[52,49227,77],{"class":58},[52,49229,49230,49232,49234],{"class":54,"line":606},[52,49231,121],{"class":58},[52,49233,63],{"class":371},[52,49235,77],{"class":58},[43,49237,49239],{"className":222,"code":49238,"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,49240,49241,49251,49255,49269,49273,49286,49294,49298,49302],{"__ignoreMap":48},[52,49242,49243,49245,49247,49249],{"class":54,"line":55},[52,49244,232],{"class":231},[52,49246,9231],{"class":58},[52,49248,238],{"class":231},[52,49250,9236],{"class":73},[52,49252,49253],{"class":54,"line":80},[52,49254,597],{"emptyLinePlaceholder":171},[52,49256,49257,49259,49261,49263,49265,49267],{"class":54,"line":108},[52,49258,1721],{"class":231},[52,49260,1724],{"class":371},[52,49262,1727],{"class":231},[52,49264,1730],{"class":231},[52,49266,1733],{"class":66},[52,49268,1736],{"class":58},[52,49270,49271],{"class":54,"line":118},[52,49272,1751],{"class":58},[52,49274,49275,49277,49280,49282,49284],{"class":54,"line":594},[52,49276,1756],{"class":58},[52,49278,49279],{"class":73},"'Spherize'",[52,49281,5254],{"class":58},[52,49283,6391],{"class":371},[52,49285,5259],{"class":58},[52,49287,49288,49290,49292],{"class":54,"line":600},[52,49289,4727],{"class":58},[52,49291,2869],{"class":73},[52,49293,2129],{"class":58},[52,49295,49296],{"class":54,"line":606},[52,49297,4744],{"class":58},[52,49299,49300],{"class":54,"line":653},[52,49301,1773],{"class":58},[52,49303,49304],{"class":54,"line":662},[52,49305,1778],{"class":58},[156,49307,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49309},[49310,49311],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spherize",{"title":48987,"description":48995},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":49318,"title":49319,"body":49320,"category":27760,"componentType":20842,"description":49327,"extension":168,"meta":49512,"navigation":171,"path":49513,"requiresChild":27763,"seo":49514,"stem":49515,"__hash__":49516},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":49321,"toc":49508},[49322,49325,49328,49330,49332,49335,49337,49506],[11,49323,49319],{"id":49324},"spiral",[15,49326,49327],{},"Rotating spiral pattern with animated movement",[26901,49329],{"component":49319},[23,49331,26905],{"id":21503},[26907,49333],{":props":49334},"[{\"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,49336,26913],{"id":26912},[217,49338,49339,49368,49396,49424,49452],{":tabs":1543},[43,49340,49342],{"className":45,"code":49341,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,49343,49344,49352,49360],{"__ignoreMap":48},[52,49345,49346,49348,49350],{"class":54,"line":55},[52,49347,59],{"class":58},[52,49349,63],{"class":62},[52,49351,77],{"class":58},[52,49353,49354,49356,49358],{"class":54,"line":80},[52,49355,83],{"class":58},[52,49357,49319],{"class":62},[52,49359,105],{"class":58},[52,49361,49362,49364,49366],{"class":54,"line":108},[52,49363,121],{"class":58},[52,49365,63],{"class":62},[52,49367,77],{"class":58},[43,49369,49370],{"className":360,"code":49341,"language":362,"meta":48,"style":48},[31,49371,49372,49380,49388],{"__ignoreMap":48},[52,49373,49374,49376,49378],{"class":54,"line":55},[52,49375,59],{"class":58},[52,49377,63],{"class":371},[52,49379,77],{"class":58},[52,49381,49382,49384,49386],{"class":54,"line":80},[52,49383,83],{"class":58},[52,49385,49319],{"class":371},[52,49387,105],{"class":58},[52,49389,49390,49392,49394],{"class":54,"line":108},[52,49391,121],{"class":58},[52,49393,63],{"class":371},[52,49395,77],{"class":58},[43,49397,49398],{"className":2507,"code":49341,"language":2509,"meta":48,"style":48},[31,49399,49400,49408,49416],{"__ignoreMap":48},[52,49401,49402,49404,49406],{"class":54,"line":55},[52,49403,59],{"class":58},[52,49405,63],{"class":371},[52,49407,77],{"class":58},[52,49409,49410,49412,49414],{"class":54,"line":80},[52,49411,83],{"class":58},[52,49413,49319],{"class":371},[52,49415,105],{"class":58},[52,49417,49418,49420,49422],{"class":54,"line":108},[52,49419,121],{"class":58},[52,49421,63],{"class":371},[52,49423,77],{"class":58},[43,49425,49426],{"className":419,"code":49341,"language":420,"meta":48,"style":48},[31,49427,49428,49436,49444],{"__ignoreMap":48},[52,49429,49430,49432,49434],{"class":54,"line":55},[52,49431,59],{"class":58},[52,49433,63],{"class":371},[52,49435,77],{"class":58},[52,49437,49438,49440,49442],{"class":54,"line":80},[52,49439,83],{"class":58},[52,49441,49319],{"class":371},[52,49443,105],{"class":58},[52,49445,49446,49448,49450],{"class":54,"line":108},[52,49447,121],{"class":58},[52,49449,63],{"class":371},[52,49451,77],{"class":58},[43,49453,49455],{"className":222,"code":49454,"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,49456,49457,49467,49471,49485,49489,49498,49502],{"__ignoreMap":48},[52,49458,49459,49461,49463,49465],{"class":54,"line":55},[52,49460,232],{"class":231},[52,49462,9231],{"class":58},[52,49464,238],{"class":231},[52,49466,9236],{"class":73},[52,49468,49469],{"class":54,"line":80},[52,49470,597],{"emptyLinePlaceholder":171},[52,49472,49473,49475,49477,49479,49481,49483],{"class":54,"line":108},[52,49474,1721],{"class":231},[52,49476,1724],{"class":371},[52,49478,1727],{"class":231},[52,49480,1730],{"class":231},[52,49482,1733],{"class":66},[52,49484,1736],{"class":58},[52,49486,49487],{"class":54,"line":118},[52,49488,1751],{"class":58},[52,49490,49491,49493,49496],{"class":54,"line":594},[52,49492,1756],{"class":58},[52,49494,49495],{"class":73},"'Spiral'",[52,49497,2129],{"class":58},[52,49499,49500],{"class":54,"line":600},[52,49501,1773],{"class":58},[52,49503,49504],{"class":54,"line":606},[52,49505,1778],{"class":58},[156,49507,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":49509},[49510,49511],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spiral",{"title":49319,"description":49327},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":49518,"title":49519,"body":49520,"category":30727,"componentType":20842,"description":49527,"extension":168,"meta":49804,"navigation":171,"path":49805,"requiresChild":27763,"seo":49806,"stem":49807,"__hash__":49808},"components/docs/components/Star.md","Star",{"type":8,"value":49521,"toc":49800},[49522,49525,49528,49530,49532,49535,49537,49798],[11,49523,49519],{"id":49524},"star",[15,49526,49527],{},"Classic star polygon with straight sides and sharp pointed tips",[26901,49529],{"component":49519},[23,49531,26905],{"id":21503},[26907,49533],{":props":49534},"[{\"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,49536,26913],{"id":26912},[217,49538,49539,49587,49638,49686,49736],{":tabs":1543},[43,49540,49542],{"className":45,"code":49541,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,49543,49544,49552,49559,49567,49575,49579],{"__ignoreMap":48},[52,49545,49546,49548,49550],{"class":54,"line":55},[52,49547,59],{"class":58},[52,49549,63],{"class":62},[52,49551,77],{"class":58},[52,49553,49554,49556],{"class":54,"line":80},[52,49555,83],{"class":58},[52,49557,49558],{"class":62},"Star\n",[52,49560,49561,49563,49565],{"class":54,"line":108},[52,49562,7351],{"class":66},[52,49564,70],{"class":58},[52,49566,7307],{"class":73},[52,49568,49569,49571,49573],{"class":54,"line":118},[52,49570,14901],{"class":66},[52,49572,70],{"class":58},[52,49574,36464],{"class":73},[52,49576,49577],{"class":54,"line":594},[52,49578,1224],{"class":58},[52,49580,49581,49583,49585],{"class":54,"line":600},[52,49582,121],{"class":58},[52,49584,63],{"class":62},[52,49586,77],{"class":58},[43,49588,49590],{"className":360,"code":49589,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,49591,49592,49600,49606,49614,49626,49630],{"__ignoreMap":48},[52,49593,49594,49596,49598],{"class":54,"line":55},[52,49595,59],{"class":58},[52,49597,63],{"class":371},[52,49599,77],{"class":58},[52,49601,49602,49604],{"class":54,"line":80},[52,49603,83],{"class":58},[52,49605,49558],{"class":371},[52,49607,49608,49610,49612],{"class":54,"line":108},[52,49609,7351],{"class":66},[52,49611,70],{"class":231},[52,49613,7307],{"class":73},[52,49615,49616,49618,49620,49622,49624],{"class":54,"line":118},[52,49617,7361],{"class":66},[52,49619,70],{"class":231},[52,49621,723],{"class":58},[52,49623,5963],{"class":371},[52,49625,729],{"class":58},[52,49627,49628],{"class":54,"line":594},[52,49629,1224],{"class":58},[52,49631,49632,49634,49636],{"class":54,"line":600},[52,49633,121],{"class":58},[52,49635,63],{"class":371},[52,49637,77],{"class":58},[43,49639,49640],{"className":2507,"code":49589,"language":2509,"meta":48,"style":48},[31,49641,49642,49650,49656,49664,49674,49678],{"__ignoreMap":48},[52,49643,49644,49646,49648],{"class":54,"line":55},[52,49645,59],{"class":58},[52,49647,63],{"class":371},[52,49649,77],{"class":58},[52,49651,49652,49654],{"class":54,"line":80},[52,49653,83],{"class":58},[52,49655,49558],{"class":371},[52,49657,49658,49660,49662],{"class":54,"line":108},[52,49659,7351],{"class":66},[52,49661,70],{"class":58},[52,49663,7307],{"class":73},[52,49665,49666,49668,49670,49672],{"class":54,"line":118},[52,49667,7361],{"class":66},[52,49669,24845],{"class":58},[52,49671,5963],{"class":371},[52,49673,729],{"class":58},[52,49675,49676],{"class":54,"line":594},[52,49677,1224],{"class":58},[52,49679,49680,49682,49684],{"class":54,"line":600},[52,49681,121],{"class":58},[52,49683,63],{"class":371},[52,49685,77],{"class":58},[43,49687,49688],{"className":419,"code":49589,"language":420,"meta":48,"style":48},[31,49689,49690,49698,49704,49712,49724,49728],{"__ignoreMap":48},[52,49691,49692,49694,49696],{"class":54,"line":55},[52,49693,59],{"class":58},[52,49695,63],{"class":371},[52,49697,77],{"class":58},[52,49699,49700,49702],{"class":54,"line":80},[52,49701,83],{"class":58},[52,49703,49558],{"class":371},[52,49705,49706,49708,49710],{"class":54,"line":108},[52,49707,7351],{"class":66},[52,49709,70],{"class":231},[52,49711,7307],{"class":73},[52,49713,49714,49716,49718,49720,49722],{"class":54,"line":118},[52,49715,7361],{"class":66},[52,49717,70],{"class":231},[52,49719,723],{"class":58},[52,49721,5963],{"class":371},[52,49723,729],{"class":58},[52,49725,49726],{"class":54,"line":594},[52,49727,1224],{"class":58},[52,49729,49730,49732,49734],{"class":54,"line":600},[52,49731,121],{"class":58},[52,49733,63],{"class":371},[52,49735,77],{"class":58},[43,49737,49739],{"className":222,"code":49738,"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,49740,49741,49751,49755,49769,49773,49790,49794],{"__ignoreMap":48},[52,49742,49743,49745,49747,49749],{"class":54,"line":55},[52,49744,232],{"class":231},[52,49746,9231],{"class":58},[52,49748,238],{"class":231},[52,49750,9236],{"class":73},[52,49752,49753],{"class":54,"line":80},[52,49754,597],{"emptyLinePlaceholder":171},[52,49756,49757,49759,49761,49763,49765,49767],{"class":54,"line":108},[52,49758,1721],{"class":231},[52,49760,1724],{"class":371},[52,49762,1727],{"class":231},[52,49764,1730],{"class":231},[52,49766,1733],{"class":66},[52,49768,1736],{"class":58},[52,49770,49771],{"class":54,"line":118},[52,49772,1751],{"class":58},[52,49774,49775,49777,49780,49782,49784,49786,49788],{"class":54,"line":594},[52,49776,1756],{"class":58},[52,49778,49779],{"class":73},"'Star'",[52,49781,1762],{"class":58},[52,49783,7886],{"class":73},[52,49785,4278],{"class":58},[52,49787,5963],{"class":371},[52,49789,1768],{"class":58},[52,49791,49792],{"class":54,"line":600},[52,49793,1773],{"class":58},[52,49795,49796],{"class":54,"line":606},[52,49797,1778],{"class":58},[156,49799,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49801},[49802,49803],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/star",{"title":49519,"description":49527},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":49810,"title":49811,"body":49812,"category":27760,"componentType":20842,"description":49819,"extension":168,"meta":50004,"navigation":171,"path":50005,"requiresChild":27763,"seo":50006,"stem":50007,"__hash__":50008},"components/docs/components/Strands.md","Strands",{"type":8,"value":49813,"toc":50000},[49814,49817,49820,49822,49824,49827,49829,49998],[11,49815,49811],{"id":49816},"strands",[15,49818,49819],{},"Procedural wavy strands with layered animation",[26901,49821],{"component":49811},[23,49823,26905],{"id":21503},[26907,49825],{":props":49826},"[{\"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,49828,26913],{"id":26912},[217,49830,49831,49860,49888,49916,49944],{":tabs":1543},[43,49832,49834],{"className":45,"code":49833,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,49835,49836,49844,49852],{"__ignoreMap":48},[52,49837,49838,49840,49842],{"class":54,"line":55},[52,49839,59],{"class":58},[52,49841,63],{"class":62},[52,49843,77],{"class":58},[52,49845,49846,49848,49850],{"class":54,"line":80},[52,49847,83],{"class":58},[52,49849,49811],{"class":62},[52,49851,105],{"class":58},[52,49853,49854,49856,49858],{"class":54,"line":108},[52,49855,121],{"class":58},[52,49857,63],{"class":62},[52,49859,77],{"class":58},[43,49861,49862],{"className":360,"code":49833,"language":362,"meta":48,"style":48},[31,49863,49864,49872,49880],{"__ignoreMap":48},[52,49865,49866,49868,49870],{"class":54,"line":55},[52,49867,59],{"class":58},[52,49869,63],{"class":371},[52,49871,77],{"class":58},[52,49873,49874,49876,49878],{"class":54,"line":80},[52,49875,83],{"class":58},[52,49877,49811],{"class":371},[52,49879,105],{"class":58},[52,49881,49882,49884,49886],{"class":54,"line":108},[52,49883,121],{"class":58},[52,49885,63],{"class":371},[52,49887,77],{"class":58},[43,49889,49890],{"className":2507,"code":49833,"language":2509,"meta":48,"style":48},[31,49891,49892,49900,49908],{"__ignoreMap":48},[52,49893,49894,49896,49898],{"class":54,"line":55},[52,49895,59],{"class":58},[52,49897,63],{"class":371},[52,49899,77],{"class":58},[52,49901,49902,49904,49906],{"class":54,"line":80},[52,49903,83],{"class":58},[52,49905,49811],{"class":371},[52,49907,105],{"class":58},[52,49909,49910,49912,49914],{"class":54,"line":108},[52,49911,121],{"class":58},[52,49913,63],{"class":371},[52,49915,77],{"class":58},[43,49917,49918],{"className":419,"code":49833,"language":420,"meta":48,"style":48},[31,49919,49920,49928,49936],{"__ignoreMap":48},[52,49921,49922,49924,49926],{"class":54,"line":55},[52,49923,59],{"class":58},[52,49925,63],{"class":371},[52,49927,77],{"class":58},[52,49929,49930,49932,49934],{"class":54,"line":80},[52,49931,83],{"class":58},[52,49933,49811],{"class":371},[52,49935,105],{"class":58},[52,49937,49938,49940,49942],{"class":54,"line":108},[52,49939,121],{"class":58},[52,49941,63],{"class":371},[52,49943,77],{"class":58},[43,49945,49947],{"className":222,"code":49946,"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,49948,49949,49959,49963,49977,49981,49990,49994],{"__ignoreMap":48},[52,49950,49951,49953,49955,49957],{"class":54,"line":55},[52,49952,232],{"class":231},[52,49954,9231],{"class":58},[52,49956,238],{"class":231},[52,49958,9236],{"class":73},[52,49960,49961],{"class":54,"line":80},[52,49962,597],{"emptyLinePlaceholder":171},[52,49964,49965,49967,49969,49971,49973,49975],{"class":54,"line":108},[52,49966,1721],{"class":231},[52,49968,1724],{"class":371},[52,49970,1727],{"class":231},[52,49972,1730],{"class":231},[52,49974,1733],{"class":66},[52,49976,1736],{"class":58},[52,49978,49979],{"class":54,"line":118},[52,49980,1751],{"class":58},[52,49982,49983,49985,49988],{"class":54,"line":594},[52,49984,1756],{"class":58},[52,49986,49987],{"class":73},"'Strands'",[52,49989,2129],{"class":58},[52,49991,49992],{"class":54,"line":600},[52,49993,1773],{"class":58},[52,49995,49996],{"class":54,"line":606},[52,49997,1778],{"class":58},[156,49999,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50001},[50002,50003],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/strands",{"title":49811,"description":49819},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":50010,"title":50011,"body":50012,"category":29105,"componentType":20848,"description":50018,"extension":168,"meta":50279,"navigation":171,"path":50280,"requiresChild":171,"seo":50281,"stem":50282,"__hash__":50283},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":50013,"toc":50275},[50014,50016,50019,50021,50023,50026,50028,50273],[11,50015,50011],{"id":13646},[15,50017,50018],{},"Stretch content towards a direction from a center point",[26901,50020],{"component":50011},[23,50022,26905],{"id":21503},[26907,50024],{":props":50025},"[{\"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,50027,26913],{"id":26912},[217,50029,50030,50075,50119,50163,50207],{":tabs":1543},[43,50031,50033],{"className":45,"code":50032,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,50034,50035,50043,50051,50059,50067],{"__ignoreMap":48},[52,50036,50037,50039,50041],{"class":54,"line":55},[52,50038,59],{"class":58},[52,50040,63],{"class":62},[52,50042,77],{"class":58},[52,50044,50045,50047,50049],{"class":54,"line":80},[52,50046,83],{"class":58},[52,50048,50011],{"class":62},[52,50050,77],{"class":58},[52,50052,50053,50055,50057],{"class":54,"line":108},[52,50054,2213],{"class":58},[52,50056,2216],{"class":62},[52,50058,105],{"class":58},[52,50060,50061,50063,50065],{"class":54,"line":118},[52,50062,2230],{"class":58},[52,50064,50011],{"class":62},[52,50066,77],{"class":58},[52,50068,50069,50071,50073],{"class":54,"line":594},[52,50070,121],{"class":58},[52,50072,63],{"class":62},[52,50074,77],{"class":58},[43,50076,50077],{"className":360,"code":50032,"language":362,"meta":48,"style":48},[31,50078,50079,50087,50095,50103,50111],{"__ignoreMap":48},[52,50080,50081,50083,50085],{"class":54,"line":55},[52,50082,59],{"class":58},[52,50084,63],{"class":371},[52,50086,77],{"class":58},[52,50088,50089,50091,50093],{"class":54,"line":80},[52,50090,83],{"class":58},[52,50092,50011],{"class":371},[52,50094,77],{"class":58},[52,50096,50097,50099,50101],{"class":54,"line":108},[52,50098,2213],{"class":58},[52,50100,2216],{"class":371},[52,50102,105],{"class":58},[52,50104,50105,50107,50109],{"class":54,"line":118},[52,50106,2230],{"class":58},[52,50108,50011],{"class":371},[52,50110,77],{"class":58},[52,50112,50113,50115,50117],{"class":54,"line":594},[52,50114,121],{"class":58},[52,50116,63],{"class":371},[52,50118,77],{"class":58},[43,50120,50121],{"className":2507,"code":50032,"language":2509,"meta":48,"style":48},[31,50122,50123,50131,50139,50147,50155],{"__ignoreMap":48},[52,50124,50125,50127,50129],{"class":54,"line":55},[52,50126,59],{"class":58},[52,50128,63],{"class":371},[52,50130,77],{"class":58},[52,50132,50133,50135,50137],{"class":54,"line":80},[52,50134,83],{"class":58},[52,50136,50011],{"class":371},[52,50138,77],{"class":58},[52,50140,50141,50143,50145],{"class":54,"line":108},[52,50142,2213],{"class":58},[52,50144,2216],{"class":371},[52,50146,105],{"class":58},[52,50148,50149,50151,50153],{"class":54,"line":118},[52,50150,2230],{"class":58},[52,50152,50011],{"class":371},[52,50154,77],{"class":58},[52,50156,50157,50159,50161],{"class":54,"line":594},[52,50158,121],{"class":58},[52,50160,63],{"class":371},[52,50162,77],{"class":58},[43,50164,50165],{"className":419,"code":50032,"language":420,"meta":48,"style":48},[31,50166,50167,50175,50183,50191,50199],{"__ignoreMap":48},[52,50168,50169,50171,50173],{"class":54,"line":55},[52,50170,59],{"class":58},[52,50172,63],{"class":371},[52,50174,77],{"class":58},[52,50176,50177,50179,50181],{"class":54,"line":80},[52,50178,83],{"class":58},[52,50180,50011],{"class":371},[52,50182,77],{"class":58},[52,50184,50185,50187,50189],{"class":54,"line":108},[52,50186,2213],{"class":58},[52,50188,2216],{"class":371},[52,50190,105],{"class":58},[52,50192,50193,50195,50197],{"class":54,"line":118},[52,50194,2230],{"class":58},[52,50196,50011],{"class":371},[52,50198,77],{"class":58},[52,50200,50201,50203,50205],{"class":54,"line":594},[52,50202,121],{"class":58},[52,50204,63],{"class":371},[52,50206,77],{"class":58},[43,50208,50210],{"className":222,"code":50209,"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,50211,50212,50222,50226,50240,50244,50253,50261,50265,50269],{"__ignoreMap":48},[52,50213,50214,50216,50218,50220],{"class":54,"line":55},[52,50215,232],{"class":231},[52,50217,9231],{"class":58},[52,50219,238],{"class":231},[52,50221,9236],{"class":73},[52,50223,50224],{"class":54,"line":80},[52,50225,597],{"emptyLinePlaceholder":171},[52,50227,50228,50230,50232,50234,50236,50238],{"class":54,"line":108},[52,50229,1721],{"class":231},[52,50231,1724],{"class":371},[52,50233,1727],{"class":231},[52,50235,1730],{"class":231},[52,50237,1733],{"class":66},[52,50239,1736],{"class":58},[52,50241,50242],{"class":54,"line":118},[52,50243,1751],{"class":58},[52,50245,50246,50248,50251],{"class":54,"line":594},[52,50247,1756],{"class":58},[52,50249,50250],{"class":73},"'Stretch'",[52,50252,4722],{"class":58},[52,50254,50255,50257,50259],{"class":54,"line":600},[52,50256,4727],{"class":58},[52,50258,2869],{"class":73},[52,50260,2129],{"class":58},[52,50262,50263],{"class":54,"line":606},[52,50264,4744],{"class":58},[52,50266,50267],{"class":54,"line":653},[52,50268,1773],{"class":58},[52,50270,50271],{"class":54,"line":662},[52,50272,1778],{"class":58},[156,50274,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50276},[50277,50278],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stretch",{"title":50011,"description":50018},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":50285,"title":50286,"body":50287,"category":27760,"componentType":20842,"description":50294,"extension":168,"meta":50479,"navigation":171,"path":50480,"requiresChild":27763,"seo":50481,"stem":50482,"__hash__":50483},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":50288,"toc":50475},[50289,50292,50295,50297,50299,50302,50304,50473],[11,50290,50286],{"id":50291},"stripes",[15,50293,50294],{},"Alternating colored stripes with animation",[26901,50296],{"component":50286},[23,50298,26905],{"id":21503},[26907,50300],{":props":50301},"[{\"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,50303,26913],{"id":26912},[217,50305,50306,50335,50363,50391,50419],{":tabs":1543},[43,50307,50309],{"className":45,"code":50308,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,50310,50311,50319,50327],{"__ignoreMap":48},[52,50312,50313,50315,50317],{"class":54,"line":55},[52,50314,59],{"class":58},[52,50316,63],{"class":62},[52,50318,77],{"class":58},[52,50320,50321,50323,50325],{"class":54,"line":80},[52,50322,83],{"class":58},[52,50324,50286],{"class":62},[52,50326,105],{"class":58},[52,50328,50329,50331,50333],{"class":54,"line":108},[52,50330,121],{"class":58},[52,50332,63],{"class":62},[52,50334,77],{"class":58},[43,50336,50337],{"className":360,"code":50308,"language":362,"meta":48,"style":48},[31,50338,50339,50347,50355],{"__ignoreMap":48},[52,50340,50341,50343,50345],{"class":54,"line":55},[52,50342,59],{"class":58},[52,50344,63],{"class":371},[52,50346,77],{"class":58},[52,50348,50349,50351,50353],{"class":54,"line":80},[52,50350,83],{"class":58},[52,50352,50286],{"class":371},[52,50354,105],{"class":58},[52,50356,50357,50359,50361],{"class":54,"line":108},[52,50358,121],{"class":58},[52,50360,63],{"class":371},[52,50362,77],{"class":58},[43,50364,50365],{"className":2507,"code":50308,"language":2509,"meta":48,"style":48},[31,50366,50367,50375,50383],{"__ignoreMap":48},[52,50368,50369,50371,50373],{"class":54,"line":55},[52,50370,59],{"class":58},[52,50372,63],{"class":371},[52,50374,77],{"class":58},[52,50376,50377,50379,50381],{"class":54,"line":80},[52,50378,83],{"class":58},[52,50380,50286],{"class":371},[52,50382,105],{"class":58},[52,50384,50385,50387,50389],{"class":54,"line":108},[52,50386,121],{"class":58},[52,50388,63],{"class":371},[52,50390,77],{"class":58},[43,50392,50393],{"className":419,"code":50308,"language":420,"meta":48,"style":48},[31,50394,50395,50403,50411],{"__ignoreMap":48},[52,50396,50397,50399,50401],{"class":54,"line":55},[52,50398,59],{"class":58},[52,50400,63],{"class":371},[52,50402,77],{"class":58},[52,50404,50405,50407,50409],{"class":54,"line":80},[52,50406,83],{"class":58},[52,50408,50286],{"class":371},[52,50410,105],{"class":58},[52,50412,50413,50415,50417],{"class":54,"line":108},[52,50414,121],{"class":58},[52,50416,63],{"class":371},[52,50418,77],{"class":58},[43,50420,50422],{"className":222,"code":50421,"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,50423,50424,50434,50438,50452,50456,50465,50469],{"__ignoreMap":48},[52,50425,50426,50428,50430,50432],{"class":54,"line":55},[52,50427,232],{"class":231},[52,50429,9231],{"class":58},[52,50431,238],{"class":231},[52,50433,9236],{"class":73},[52,50435,50436],{"class":54,"line":80},[52,50437,597],{"emptyLinePlaceholder":171},[52,50439,50440,50442,50444,50446,50448,50450],{"class":54,"line":108},[52,50441,1721],{"class":231},[52,50443,1724],{"class":371},[52,50445,1727],{"class":231},[52,50447,1730],{"class":231},[52,50449,1733],{"class":66},[52,50451,1736],{"class":58},[52,50453,50454],{"class":54,"line":118},[52,50455,1751],{"class":58},[52,50457,50458,50460,50463],{"class":54,"line":594},[52,50459,1756],{"class":58},[52,50461,50462],{"class":73},"'Stripes'",[52,50464,2129],{"class":58},[52,50466,50467],{"class":54,"line":600},[52,50468,1773],{"class":58},[52,50470,50471],{"class":54,"line":606},[52,50472,1778],{"class":58},[156,50474,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50476},[50477,50478],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stripes",{"title":50286,"description":50294},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":50485,"title":50486,"body":50487,"category":27760,"componentType":20842,"description":50494,"extension":168,"meta":50726,"navigation":171,"path":50727,"requiresChild":27763,"seo":50728,"stem":50729,"__hash__":50730},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":50488,"toc":50722},[50489,50492,50495,50497,50499,50502,50504,50720],[11,50490,50486],{"id":50491},"studiobackground",[15,50493,50494],{},"Multi-light studio background with ambient motion.",[26901,50496],{"component":50486},[23,50498,26905],{"id":21503},[26907,50500],{":props":50501},"[{\"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,50503,26913],{"id":26912},[217,50505,50506,50547,50585,50623,50661],{":tabs":1543},[43,50507,50509],{"className":45,"code":50508,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,50510,50511,50519,50526,50535,50539],{"__ignoreMap":48},[52,50512,50513,50515,50517],{"class":54,"line":55},[52,50514,59],{"class":58},[52,50516,63],{"class":62},[52,50518,77],{"class":58},[52,50520,50521,50523],{"class":54,"line":80},[52,50522,83],{"class":58},[52,50524,50525],{"class":62},"StudioBackground\n",[52,50527,50528,50530,50532],{"class":54,"line":108},[52,50529,7351],{"class":66},[52,50531,70],{"class":58},[52,50533,50534],{"class":73},"\"#d8dbec\"\n",[52,50536,50537],{"class":54,"line":118},[52,50538,1224],{"class":58},[52,50540,50541,50543,50545],{"class":54,"line":594},[52,50542,121],{"class":58},[52,50544,63],{"class":62},[52,50546,77],{"class":58},[43,50548,50549],{"className":360,"code":50508,"language":362,"meta":48,"style":48},[31,50550,50551,50559,50565,50573,50577],{"__ignoreMap":48},[52,50552,50553,50555,50557],{"class":54,"line":55},[52,50554,59],{"class":58},[52,50556,63],{"class":371},[52,50558,77],{"class":58},[52,50560,50561,50563],{"class":54,"line":80},[52,50562,83],{"class":58},[52,50564,50525],{"class":371},[52,50566,50567,50569,50571],{"class":54,"line":108},[52,50568,7351],{"class":66},[52,50570,70],{"class":231},[52,50572,50534],{"class":73},[52,50574,50575],{"class":54,"line":118},[52,50576,1224],{"class":58},[52,50578,50579,50581,50583],{"class":54,"line":594},[52,50580,121],{"class":58},[52,50582,63],{"class":371},[52,50584,77],{"class":58},[43,50586,50587],{"className":2507,"code":50508,"language":2509,"meta":48,"style":48},[31,50588,50589,50597,50603,50611,50615],{"__ignoreMap":48},[52,50590,50591,50593,50595],{"class":54,"line":55},[52,50592,59],{"class":58},[52,50594,63],{"class":371},[52,50596,77],{"class":58},[52,50598,50599,50601],{"class":54,"line":80},[52,50600,83],{"class":58},[52,50602,50525],{"class":371},[52,50604,50605,50607,50609],{"class":54,"line":108},[52,50606,7351],{"class":66},[52,50608,70],{"class":58},[52,50610,50534],{"class":73},[52,50612,50613],{"class":54,"line":118},[52,50614,1224],{"class":58},[52,50616,50617,50619,50621],{"class":54,"line":594},[52,50618,121],{"class":58},[52,50620,63],{"class":371},[52,50622,77],{"class":58},[43,50624,50625],{"className":419,"code":50508,"language":420,"meta":48,"style":48},[31,50626,50627,50635,50641,50649,50653],{"__ignoreMap":48},[52,50628,50629,50631,50633],{"class":54,"line":55},[52,50630,59],{"class":58},[52,50632,63],{"class":371},[52,50634,77],{"class":58},[52,50636,50637,50639],{"class":54,"line":80},[52,50638,83],{"class":58},[52,50640,50525],{"class":371},[52,50642,50643,50645,50647],{"class":54,"line":108},[52,50644,7351],{"class":66},[52,50646,70],{"class":231},[52,50648,50534],{"class":73},[52,50650,50651],{"class":54,"line":118},[52,50652,1224],{"class":58},[52,50654,50655,50657,50659],{"class":54,"line":594},[52,50656,121],{"class":58},[52,50658,63],{"class":371},[52,50660,77],{"class":58},[43,50662,50664],{"className":222,"code":50663,"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,50665,50666,50676,50680,50694,50698,50712,50716],{"__ignoreMap":48},[52,50667,50668,50670,50672,50674],{"class":54,"line":55},[52,50669,232],{"class":231},[52,50671,9231],{"class":58},[52,50673,238],{"class":231},[52,50675,9236],{"class":73},[52,50677,50678],{"class":54,"line":80},[52,50679,597],{"emptyLinePlaceholder":171},[52,50681,50682,50684,50686,50688,50690,50692],{"class":54,"line":108},[52,50683,1721],{"class":231},[52,50685,1724],{"class":371},[52,50687,1727],{"class":231},[52,50689,1730],{"class":231},[52,50691,1733],{"class":66},[52,50693,1736],{"class":58},[52,50695,50696],{"class":54,"line":118},[52,50697,1751],{"class":58},[52,50699,50700,50702,50705,50707,50710],{"class":54,"line":594},[52,50701,1756],{"class":58},[52,50703,50704],{"class":73},"'StudioBackground'",[52,50706,1762],{"class":58},[52,50708,50709],{"class":73},"'#d8dbec'",[52,50711,1768],{"class":58},[52,50713,50714],{"class":54,"line":600},[52,50715,1773],{"class":58},[52,50717,50718],{"class":54,"line":606},[52,50719,1778],{"class":58},[156,50721,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50723},[50724,50725],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/studiobackground",{"title":50486,"description":50494},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":50732,"title":11722,"body":50733,"category":27760,"componentType":20842,"description":50740,"extension":168,"meta":50925,"navigation":171,"path":50926,"requiresChild":27763,"seo":50927,"stem":50928,"__hash__":50929},"components/docs/components/Swirl.md",{"type":8,"value":50734,"toc":50921},[50735,50738,50741,50743,50745,50748,50750,50919],[11,50736,11722],{"id":50737},"swirl",[15,50739,50740],{},"Flowing swirl pattern with multi-layered noise",[26901,50742],{"component":11722},[23,50744,26905],{"id":21503},[26907,50746],{":props":50747},"[{\"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,50749,26913],{"id":26912},[217,50751,50752,50781,50809,50837,50865],{":tabs":1543},[43,50753,50755],{"className":45,"code":50754,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,50756,50757,50765,50773],{"__ignoreMap":48},[52,50758,50759,50761,50763],{"class":54,"line":55},[52,50760,59],{"class":58},[52,50762,63],{"class":62},[52,50764,77],{"class":58},[52,50766,50767,50769,50771],{"class":54,"line":80},[52,50768,83],{"class":58},[52,50770,11722],{"class":62},[52,50772,105],{"class":58},[52,50774,50775,50777,50779],{"class":54,"line":108},[52,50776,121],{"class":58},[52,50778,63],{"class":62},[52,50780,77],{"class":58},[43,50782,50783],{"className":360,"code":50754,"language":362,"meta":48,"style":48},[31,50784,50785,50793,50801],{"__ignoreMap":48},[52,50786,50787,50789,50791],{"class":54,"line":55},[52,50788,59],{"class":58},[52,50790,63],{"class":371},[52,50792,77],{"class":58},[52,50794,50795,50797,50799],{"class":54,"line":80},[52,50796,83],{"class":58},[52,50798,11722],{"class":371},[52,50800,105],{"class":58},[52,50802,50803,50805,50807],{"class":54,"line":108},[52,50804,121],{"class":58},[52,50806,63],{"class":371},[52,50808,77],{"class":58},[43,50810,50811],{"className":2507,"code":50754,"language":2509,"meta":48,"style":48},[31,50812,50813,50821,50829],{"__ignoreMap":48},[52,50814,50815,50817,50819],{"class":54,"line":55},[52,50816,59],{"class":58},[52,50818,63],{"class":371},[52,50820,77],{"class":58},[52,50822,50823,50825,50827],{"class":54,"line":80},[52,50824,83],{"class":58},[52,50826,11722],{"class":371},[52,50828,105],{"class":58},[52,50830,50831,50833,50835],{"class":54,"line":108},[52,50832,121],{"class":58},[52,50834,63],{"class":371},[52,50836,77],{"class":58},[43,50838,50839],{"className":419,"code":50754,"language":420,"meta":48,"style":48},[31,50840,50841,50849,50857],{"__ignoreMap":48},[52,50842,50843,50845,50847],{"class":54,"line":55},[52,50844,59],{"class":58},[52,50846,63],{"class":371},[52,50848,77],{"class":58},[52,50850,50851,50853,50855],{"class":54,"line":80},[52,50852,83],{"class":58},[52,50854,11722],{"class":371},[52,50856,105],{"class":58},[52,50858,50859,50861,50863],{"class":54,"line":108},[52,50860,121],{"class":58},[52,50862,63],{"class":371},[52,50864,77],{"class":58},[43,50866,50868],{"className":222,"code":50867,"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,50869,50870,50880,50884,50898,50902,50911,50915],{"__ignoreMap":48},[52,50871,50872,50874,50876,50878],{"class":54,"line":55},[52,50873,232],{"class":231},[52,50875,9231],{"class":58},[52,50877,238],{"class":231},[52,50879,9236],{"class":73},[52,50881,50882],{"class":54,"line":80},[52,50883,597],{"emptyLinePlaceholder":171},[52,50885,50886,50888,50890,50892,50894,50896],{"class":54,"line":108},[52,50887,1721],{"class":231},[52,50889,1724],{"class":371},[52,50891,1727],{"class":231},[52,50893,1730],{"class":231},[52,50895,1733],{"class":66},[52,50897,1736],{"class":58},[52,50899,50900],{"class":54,"line":118},[52,50901,1751],{"class":58},[52,50903,50904,50906,50909],{"class":54,"line":594},[52,50905,1756],{"class":58},[52,50907,50908],{"class":73},"'Swirl'",[52,50910,2129],{"class":58},[52,50912,50913],{"class":54,"line":600},[52,50914,1773],{"class":58},[52,50916,50917],{"class":54,"line":606},[52,50918,1778],{"class":58},[156,50920,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50922},[50923,50924],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/swirl",{"title":11722,"description":50740},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":50931,"title":50932,"body":50933,"category":27225,"componentType":20848,"description":50940,"extension":168,"meta":51257,"navigation":171,"path":51258,"requiresChild":171,"seo":51259,"stem":51260,"__hash__":51261},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":50934,"toc":51253},[50935,50938,50941,50943,50945,50948,50950,51251],[11,50936,50932],{"id":50937},"tiltshift",[15,50939,50940],{},"Selective focus blur mimicking tilt-shift photography",[26901,50942],{"component":50932},[23,50944,26905],{"id":21503},[26907,50946],{":props":50947},"[{\"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,50949,26913],{"id":26912},[217,50951,50952,51008,51067,51123,51181],{":tabs":1543},[43,50953,50955],{"className":45,"code":50954,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,50956,50957,50965,50972,50980,50984,50992,51000],{"__ignoreMap":48},[52,50958,50959,50961,50963],{"class":54,"line":55},[52,50960,59],{"class":58},[52,50962,63],{"class":62},[52,50964,77],{"class":58},[52,50966,50967,50969],{"class":54,"line":80},[52,50968,83],{"class":58},[52,50970,50971],{"class":62},"TiltShift\n",[52,50973,50974,50976,50978],{"class":54,"line":108},[52,50975,17870],{"class":66},[52,50977,70],{"class":58},[52,50979,28216],{"class":73},[52,50981,50982],{"class":54,"line":118},[52,50983,26949],{"class":58},[52,50985,50986,50988,50990],{"class":54,"line":594},[52,50987,2213],{"class":58},[52,50989,2216],{"class":62},[52,50991,105],{"class":58},[52,50993,50994,50996,50998],{"class":54,"line":600},[52,50995,2230],{"class":58},[52,50997,50932],{"class":62},[52,50999,77],{"class":58},[52,51001,51002,51004,51006],{"class":54,"line":606},[52,51003,121],{"class":58},[52,51005,63],{"class":62},[52,51007,77],{"class":58},[43,51009,51011],{"className":360,"code":51010,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,51012,51013,51021,51027,51039,51043,51051,51059],{"__ignoreMap":48},[52,51014,51015,51017,51019],{"class":54,"line":55},[52,51016,59],{"class":58},[52,51018,63],{"class":371},[52,51020,77],{"class":58},[52,51022,51023,51025],{"class":54,"line":80},[52,51024,83],{"class":58},[52,51026,50971],{"class":371},[52,51028,51029,51031,51033,51035,51037],{"class":54,"line":108},[52,51030,17981],{"class":66},[52,51032,70],{"class":231},[52,51034,723],{"class":58},[52,51036,28274],{"class":371},[52,51038,729],{"class":58},[52,51040,51041],{"class":54,"line":118},[52,51042,26949],{"class":58},[52,51044,51045,51047,51049],{"class":54,"line":594},[52,51046,2213],{"class":58},[52,51048,2216],{"class":371},[52,51050,105],{"class":58},[52,51052,51053,51055,51057],{"class":54,"line":600},[52,51054,2230],{"class":58},[52,51056,50932],{"class":371},[52,51058,77],{"class":58},[52,51060,51061,51063,51065],{"class":54,"line":606},[52,51062,121],{"class":58},[52,51064,63],{"class":371},[52,51066,77],{"class":58},[43,51068,51069],{"className":2507,"code":51010,"language":2509,"meta":48,"style":48},[31,51070,51071,51079,51085,51095,51099,51107,51115],{"__ignoreMap":48},[52,51072,51073,51075,51077],{"class":54,"line":55},[52,51074,59],{"class":58},[52,51076,63],{"class":371},[52,51078,77],{"class":58},[52,51080,51081,51083],{"class":54,"line":80},[52,51082,83],{"class":58},[52,51084,50971],{"class":371},[52,51086,51087,51089,51091,51093],{"class":54,"line":108},[52,51088,17981],{"class":66},[52,51090,24845],{"class":58},[52,51092,28274],{"class":371},[52,51094,729],{"class":58},[52,51096,51097],{"class":54,"line":118},[52,51098,26949],{"class":58},[52,51100,51101,51103,51105],{"class":54,"line":594},[52,51102,2213],{"class":58},[52,51104,2216],{"class":371},[52,51106,105],{"class":58},[52,51108,51109,51111,51113],{"class":54,"line":600},[52,51110,2230],{"class":58},[52,51112,50932],{"class":371},[52,51114,77],{"class":58},[52,51116,51117,51119,51121],{"class":54,"line":606},[52,51118,121],{"class":58},[52,51120,63],{"class":371},[52,51122,77],{"class":58},[43,51124,51125],{"className":419,"code":51010,"language":420,"meta":48,"style":48},[31,51126,51127,51135,51141,51153,51157,51165,51173],{"__ignoreMap":48},[52,51128,51129,51131,51133],{"class":54,"line":55},[52,51130,59],{"class":58},[52,51132,63],{"class":371},[52,51134,77],{"class":58},[52,51136,51137,51139],{"class":54,"line":80},[52,51138,83],{"class":58},[52,51140,50971],{"class":371},[52,51142,51143,51145,51147,51149,51151],{"class":54,"line":108},[52,51144,17981],{"class":66},[52,51146,70],{"class":231},[52,51148,723],{"class":58},[52,51150,28274],{"class":371},[52,51152,729],{"class":58},[52,51154,51155],{"class":54,"line":118},[52,51156,26949],{"class":58},[52,51158,51159,51161,51163],{"class":54,"line":594},[52,51160,2213],{"class":58},[52,51162,2216],{"class":371},[52,51164,105],{"class":58},[52,51166,51167,51169,51171],{"class":54,"line":600},[52,51168,2230],{"class":58},[52,51170,50932],{"class":371},[52,51172,77],{"class":58},[52,51174,51175,51177,51179],{"class":54,"line":606},[52,51176,121],{"class":58},[52,51178,63],{"class":371},[52,51180,77],{"class":58},[43,51182,51184],{"className":222,"code":51183,"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,51185,51186,51196,51200,51214,51218,51231,51239,51243,51247],{"__ignoreMap":48},[52,51187,51188,51190,51192,51194],{"class":54,"line":55},[52,51189,232],{"class":231},[52,51191,9231],{"class":58},[52,51193,238],{"class":231},[52,51195,9236],{"class":73},[52,51197,51198],{"class":54,"line":80},[52,51199,597],{"emptyLinePlaceholder":171},[52,51201,51202,51204,51206,51208,51210,51212],{"class":54,"line":108},[52,51203,1721],{"class":231},[52,51205,1724],{"class":371},[52,51207,1727],{"class":231},[52,51209,1730],{"class":231},[52,51211,1733],{"class":66},[52,51213,1736],{"class":58},[52,51215,51216],{"class":54,"line":118},[52,51217,1751],{"class":58},[52,51219,51220,51222,51225,51227,51229],{"class":54,"line":594},[52,51221,1756],{"class":58},[52,51223,51224],{"class":73},"'TiltShift'",[52,51226,27194],{"class":58},[52,51228,28274],{"class":371},[52,51230,5259],{"class":58},[52,51232,51233,51235,51237],{"class":54,"line":600},[52,51234,4727],{"class":58},[52,51236,2869],{"class":73},[52,51238,2129],{"class":58},[52,51240,51241],{"class":54,"line":606},[52,51242,4744],{"class":58},[52,51244,51245],{"class":54,"line":653},[52,51246,1773],{"class":58},[52,51248,51249],{"class":54,"line":662},[52,51250,1778],{"class":58},[156,51252,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51254},[51255,51256],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tiltshift",{"title":50932,"description":50940},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":51263,"title":51264,"body":51265,"category":28771,"componentType":20848,"description":51272,"extension":168,"meta":51580,"navigation":171,"path":51581,"requiresChild":171,"seo":51582,"stem":51583,"__hash__":51584},"components/docs/components/Tint.md","Tint",{"type":8,"value":51266,"toc":51576},[51267,51270,51273,51275,51277,51280,51282,51574],[11,51268,51264],{"id":51269},"tint",[15,51271,51272],{},"Apply a color tint to the image",[26901,51274],{"component":51264},[23,51276,26905],{"id":21503},[26907,51278],{":props":51279},"[{\"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,51281,26913],{"id":26912},[217,51283,51284,51341,51395,51449,51503],{":tabs":1543},[43,51285,51287],{"className":45,"code":51286,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,51288,51289,51297,51304,51313,51317,51325,51333],{"__ignoreMap":48},[52,51290,51291,51293,51295],{"class":54,"line":55},[52,51292,59],{"class":58},[52,51294,63],{"class":62},[52,51296,77],{"class":58},[52,51298,51299,51301],{"class":54,"line":80},[52,51300,83],{"class":58},[52,51302,51303],{"class":62},"Tint\n",[52,51305,51306,51308,51310],{"class":54,"line":108},[52,51307,7351],{"class":66},[52,51309,70],{"class":58},[52,51311,51312],{"class":73},"\"#ff8800\"\n",[52,51314,51315],{"class":54,"line":118},[52,51316,26949],{"class":58},[52,51318,51319,51321,51323],{"class":54,"line":594},[52,51320,2213],{"class":58},[52,51322,2216],{"class":62},[52,51324,105],{"class":58},[52,51326,51327,51329,51331],{"class":54,"line":600},[52,51328,2230],{"class":58},[52,51330,51264],{"class":62},[52,51332,77],{"class":58},[52,51334,51335,51337,51339],{"class":54,"line":606},[52,51336,121],{"class":58},[52,51338,63],{"class":62},[52,51340,77],{"class":58},[43,51342,51343],{"className":360,"code":51286,"language":362,"meta":48,"style":48},[31,51344,51345,51353,51359,51367,51371,51379,51387],{"__ignoreMap":48},[52,51346,51347,51349,51351],{"class":54,"line":55},[52,51348,59],{"class":58},[52,51350,63],{"class":371},[52,51352,77],{"class":58},[52,51354,51355,51357],{"class":54,"line":80},[52,51356,83],{"class":58},[52,51358,51303],{"class":371},[52,51360,51361,51363,51365],{"class":54,"line":108},[52,51362,7351],{"class":66},[52,51364,70],{"class":231},[52,51366,51312],{"class":73},[52,51368,51369],{"class":54,"line":118},[52,51370,26949],{"class":58},[52,51372,51373,51375,51377],{"class":54,"line":594},[52,51374,2213],{"class":58},[52,51376,2216],{"class":371},[52,51378,105],{"class":58},[52,51380,51381,51383,51385],{"class":54,"line":600},[52,51382,2230],{"class":58},[52,51384,51264],{"class":371},[52,51386,77],{"class":58},[52,51388,51389,51391,51393],{"class":54,"line":606},[52,51390,121],{"class":58},[52,51392,63],{"class":371},[52,51394,77],{"class":58},[43,51396,51397],{"className":2507,"code":51286,"language":2509,"meta":48,"style":48},[31,51398,51399,51407,51413,51421,51425,51433,51441],{"__ignoreMap":48},[52,51400,51401,51403,51405],{"class":54,"line":55},[52,51402,59],{"class":58},[52,51404,63],{"class":371},[52,51406,77],{"class":58},[52,51408,51409,51411],{"class":54,"line":80},[52,51410,83],{"class":58},[52,51412,51303],{"class":371},[52,51414,51415,51417,51419],{"class":54,"line":108},[52,51416,7351],{"class":66},[52,51418,70],{"class":58},[52,51420,51312],{"class":73},[52,51422,51423],{"class":54,"line":118},[52,51424,26949],{"class":58},[52,51426,51427,51429,51431],{"class":54,"line":594},[52,51428,2213],{"class":58},[52,51430,2216],{"class":371},[52,51432,105],{"class":58},[52,51434,51435,51437,51439],{"class":54,"line":600},[52,51436,2230],{"class":58},[52,51438,51264],{"class":371},[52,51440,77],{"class":58},[52,51442,51443,51445,51447],{"class":54,"line":606},[52,51444,121],{"class":58},[52,51446,63],{"class":371},[52,51448,77],{"class":58},[43,51450,51451],{"className":419,"code":51286,"language":420,"meta":48,"style":48},[31,51452,51453,51461,51467,51475,51479,51487,51495],{"__ignoreMap":48},[52,51454,51455,51457,51459],{"class":54,"line":55},[52,51456,59],{"class":58},[52,51458,63],{"class":371},[52,51460,77],{"class":58},[52,51462,51463,51465],{"class":54,"line":80},[52,51464,83],{"class":58},[52,51466,51303],{"class":371},[52,51468,51469,51471,51473],{"class":54,"line":108},[52,51470,7351],{"class":66},[52,51472,70],{"class":231},[52,51474,51312],{"class":73},[52,51476,51477],{"class":54,"line":118},[52,51478,26949],{"class":58},[52,51480,51481,51483,51485],{"class":54,"line":594},[52,51482,2213],{"class":58},[52,51484,2216],{"class":371},[52,51486,105],{"class":58},[52,51488,51489,51491,51493],{"class":54,"line":600},[52,51490,2230],{"class":58},[52,51492,51264],{"class":371},[52,51494,77],{"class":58},[52,51496,51497,51499,51501],{"class":54,"line":606},[52,51498,121],{"class":58},[52,51500,63],{"class":371},[52,51502,77],{"class":58},[43,51504,51506],{"className":222,"code":51505,"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,51507,51508,51518,51522,51536,51540,51554,51562,51566,51570],{"__ignoreMap":48},[52,51509,51510,51512,51514,51516],{"class":54,"line":55},[52,51511,232],{"class":231},[52,51513,9231],{"class":58},[52,51515,238],{"class":231},[52,51517,9236],{"class":73},[52,51519,51520],{"class":54,"line":80},[52,51521,597],{"emptyLinePlaceholder":171},[52,51523,51524,51526,51528,51530,51532,51534],{"class":54,"line":108},[52,51525,1721],{"class":231},[52,51527,1724],{"class":371},[52,51529,1727],{"class":231},[52,51531,1730],{"class":231},[52,51533,1733],{"class":66},[52,51535,1736],{"class":58},[52,51537,51538],{"class":54,"line":118},[52,51539,1751],{"class":58},[52,51541,51542,51544,51547,51549,51552],{"class":54,"line":594},[52,51543,1756],{"class":58},[52,51545,51546],{"class":73},"'Tint'",[52,51548,1762],{"class":58},[52,51550,51551],{"class":73},"'#ff8800'",[52,51553,5259],{"class":58},[52,51555,51556,51558,51560],{"class":54,"line":600},[52,51557,4727],{"class":58},[52,51559,2869],{"class":73},[52,51561,2129],{"class":58},[52,51563,51564],{"class":54,"line":606},[52,51565,4744],{"class":58},[52,51567,51568],{"class":54,"line":653},[52,51569,1773],{"class":58},[52,51571,51572],{"class":54,"line":662},[52,51573,1778],{"class":58},[156,51575,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51577},[51578,51579],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tint",{"title":51264,"description":51272},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":51586,"title":51587,"body":51588,"category":30727,"componentType":20842,"description":51595,"extension":168,"meta":51825,"navigation":171,"path":51826,"requiresChild":27763,"seo":51827,"stem":51828,"__hash__":51829},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":51589,"toc":51821},[51590,51593,51596,51598,51600,51603,51605,51819],[11,51591,51587],{"id":51592},"trapezoid",[15,51594,51595],{},"Trapezoid with adjustable top and bottom widths and height",[26901,51597],{"component":51587},[23,51599,26905],{"id":21503},[26907,51601],{":props":51602},"[{\"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,51604,26913],{"id":26912},[217,51606,51607,51647,51685,51723,51761],{":tabs":1543},[43,51608,51610],{"className":45,"code":51609,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,51611,51612,51620,51627,51635,51639],{"__ignoreMap":48},[52,51613,51614,51616,51618],{"class":54,"line":55},[52,51615,59],{"class":58},[52,51617,63],{"class":62},[52,51619,77],{"class":58},[52,51621,51622,51624],{"class":54,"line":80},[52,51623,83],{"class":58},[52,51625,51626],{"class":62},"Trapezoid\n",[52,51628,51629,51631,51633],{"class":54,"line":108},[52,51630,7351],{"class":66},[52,51632,70],{"class":58},[52,51634,7307],{"class":73},[52,51636,51637],{"class":54,"line":118},[52,51638,1224],{"class":58},[52,51640,51641,51643,51645],{"class":54,"line":594},[52,51642,121],{"class":58},[52,51644,63],{"class":62},[52,51646,77],{"class":58},[43,51648,51649],{"className":360,"code":51609,"language":362,"meta":48,"style":48},[31,51650,51651,51659,51665,51673,51677],{"__ignoreMap":48},[52,51652,51653,51655,51657],{"class":54,"line":55},[52,51654,59],{"class":58},[52,51656,63],{"class":371},[52,51658,77],{"class":58},[52,51660,51661,51663],{"class":54,"line":80},[52,51662,83],{"class":58},[52,51664,51626],{"class":371},[52,51666,51667,51669,51671],{"class":54,"line":108},[52,51668,7351],{"class":66},[52,51670,70],{"class":231},[52,51672,7307],{"class":73},[52,51674,51675],{"class":54,"line":118},[52,51676,1224],{"class":58},[52,51678,51679,51681,51683],{"class":54,"line":594},[52,51680,121],{"class":58},[52,51682,63],{"class":371},[52,51684,77],{"class":58},[43,51686,51687],{"className":2507,"code":51609,"language":2509,"meta":48,"style":48},[31,51688,51689,51697,51703,51711,51715],{"__ignoreMap":48},[52,51690,51691,51693,51695],{"class":54,"line":55},[52,51692,59],{"class":58},[52,51694,63],{"class":371},[52,51696,77],{"class":58},[52,51698,51699,51701],{"class":54,"line":80},[52,51700,83],{"class":58},[52,51702,51626],{"class":371},[52,51704,51705,51707,51709],{"class":54,"line":108},[52,51706,7351],{"class":66},[52,51708,70],{"class":58},[52,51710,7307],{"class":73},[52,51712,51713],{"class":54,"line":118},[52,51714,1224],{"class":58},[52,51716,51717,51719,51721],{"class":54,"line":594},[52,51718,121],{"class":58},[52,51720,63],{"class":371},[52,51722,77],{"class":58},[43,51724,51725],{"className":419,"code":51609,"language":420,"meta":48,"style":48},[31,51726,51727,51735,51741,51749,51753],{"__ignoreMap":48},[52,51728,51729,51731,51733],{"class":54,"line":55},[52,51730,59],{"class":58},[52,51732,63],{"class":371},[52,51734,77],{"class":58},[52,51736,51737,51739],{"class":54,"line":80},[52,51738,83],{"class":58},[52,51740,51626],{"class":371},[52,51742,51743,51745,51747],{"class":54,"line":108},[52,51744,7351],{"class":66},[52,51746,70],{"class":231},[52,51748,7307],{"class":73},[52,51750,51751],{"class":54,"line":118},[52,51752,1224],{"class":58},[52,51754,51755,51757,51759],{"class":54,"line":594},[52,51756,121],{"class":58},[52,51758,63],{"class":371},[52,51760,77],{"class":58},[43,51762,51764],{"className":222,"code":51763,"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,51765,51766,51776,51780,51794,51798,51811,51815],{"__ignoreMap":48},[52,51767,51768,51770,51772,51774],{"class":54,"line":55},[52,51769,232],{"class":231},[52,51771,9231],{"class":58},[52,51773,238],{"class":231},[52,51775,9236],{"class":73},[52,51777,51778],{"class":54,"line":80},[52,51779,597],{"emptyLinePlaceholder":171},[52,51781,51782,51784,51786,51788,51790,51792],{"class":54,"line":108},[52,51783,1721],{"class":231},[52,51785,1724],{"class":371},[52,51787,1727],{"class":231},[52,51789,1730],{"class":231},[52,51791,1733],{"class":66},[52,51793,1736],{"class":58},[52,51795,51796],{"class":54,"line":118},[52,51797,1751],{"class":58},[52,51799,51800,51802,51805,51807,51809],{"class":54,"line":594},[52,51801,1756],{"class":58},[52,51803,51804],{"class":73},"'Trapezoid'",[52,51806,1762],{"class":58},[52,51808,7886],{"class":73},[52,51810,1768],{"class":58},[52,51812,51813],{"class":54,"line":600},[52,51814,1773],{"class":58},[52,51816,51817],{"class":54,"line":606},[52,51818,1778],{"class":58},[156,51820,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51822},[51823,51824],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/trapezoid",{"title":51587,"description":51595},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":51831,"title":51832,"body":51833,"category":28771,"componentType":20848,"description":51840,"extension":168,"meta":52101,"navigation":171,"path":52102,"requiresChild":171,"seo":52103,"stem":52104,"__hash__":52105},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":51834,"toc":52097},[51835,51838,51841,51843,51845,51848,51850,52095],[11,51836,51832],{"id":51837},"tritone",[15,51839,51840],{},"Map colors to three tones: shadows, midtones, highlights",[26901,51842],{"component":51832},[23,51844,26905],{"id":21503},[26907,51846],{":props":51847},"[{\"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,51849,26913],{"id":26912},[217,51851,51852,51897,51941,51985,52029],{":tabs":1543},[43,51853,51855],{"className":45,"code":51854,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,51856,51857,51865,51873,51881,51889],{"__ignoreMap":48},[52,51858,51859,51861,51863],{"class":54,"line":55},[52,51860,59],{"class":58},[52,51862,63],{"class":62},[52,51864,77],{"class":58},[52,51866,51867,51869,51871],{"class":54,"line":80},[52,51868,83],{"class":58},[52,51870,51832],{"class":62},[52,51872,77],{"class":58},[52,51874,51875,51877,51879],{"class":54,"line":108},[52,51876,2213],{"class":58},[52,51878,2216],{"class":62},[52,51880,105],{"class":58},[52,51882,51883,51885,51887],{"class":54,"line":118},[52,51884,2230],{"class":58},[52,51886,51832],{"class":62},[52,51888,77],{"class":58},[52,51890,51891,51893,51895],{"class":54,"line":594},[52,51892,121],{"class":58},[52,51894,63],{"class":62},[52,51896,77],{"class":58},[43,51898,51899],{"className":360,"code":51854,"language":362,"meta":48,"style":48},[31,51900,51901,51909,51917,51925,51933],{"__ignoreMap":48},[52,51902,51903,51905,51907],{"class":54,"line":55},[52,51904,59],{"class":58},[52,51906,63],{"class":371},[52,51908,77],{"class":58},[52,51910,51911,51913,51915],{"class":54,"line":80},[52,51912,83],{"class":58},[52,51914,51832],{"class":371},[52,51916,77],{"class":58},[52,51918,51919,51921,51923],{"class":54,"line":108},[52,51920,2213],{"class":58},[52,51922,2216],{"class":371},[52,51924,105],{"class":58},[52,51926,51927,51929,51931],{"class":54,"line":118},[52,51928,2230],{"class":58},[52,51930,51832],{"class":371},[52,51932,77],{"class":58},[52,51934,51935,51937,51939],{"class":54,"line":594},[52,51936,121],{"class":58},[52,51938,63],{"class":371},[52,51940,77],{"class":58},[43,51942,51943],{"className":2507,"code":51854,"language":2509,"meta":48,"style":48},[31,51944,51945,51953,51961,51969,51977],{"__ignoreMap":48},[52,51946,51947,51949,51951],{"class":54,"line":55},[52,51948,59],{"class":58},[52,51950,63],{"class":371},[52,51952,77],{"class":58},[52,51954,51955,51957,51959],{"class":54,"line":80},[52,51956,83],{"class":58},[52,51958,51832],{"class":371},[52,51960,77],{"class":58},[52,51962,51963,51965,51967],{"class":54,"line":108},[52,51964,2213],{"class":58},[52,51966,2216],{"class":371},[52,51968,105],{"class":58},[52,51970,51971,51973,51975],{"class":54,"line":118},[52,51972,2230],{"class":58},[52,51974,51832],{"class":371},[52,51976,77],{"class":58},[52,51978,51979,51981,51983],{"class":54,"line":594},[52,51980,121],{"class":58},[52,51982,63],{"class":371},[52,51984,77],{"class":58},[43,51986,51987],{"className":419,"code":51854,"language":420,"meta":48,"style":48},[31,51988,51989,51997,52005,52013,52021],{"__ignoreMap":48},[52,51990,51991,51993,51995],{"class":54,"line":55},[52,51992,59],{"class":58},[52,51994,63],{"class":371},[52,51996,77],{"class":58},[52,51998,51999,52001,52003],{"class":54,"line":80},[52,52000,83],{"class":58},[52,52002,51832],{"class":371},[52,52004,77],{"class":58},[52,52006,52007,52009,52011],{"class":54,"line":108},[52,52008,2213],{"class":58},[52,52010,2216],{"class":371},[52,52012,105],{"class":58},[52,52014,52015,52017,52019],{"class":54,"line":118},[52,52016,2230],{"class":58},[52,52018,51832],{"class":371},[52,52020,77],{"class":58},[52,52022,52023,52025,52027],{"class":54,"line":594},[52,52024,121],{"class":58},[52,52026,63],{"class":371},[52,52028,77],{"class":58},[43,52030,52032],{"className":222,"code":52031,"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,52033,52034,52044,52048,52062,52066,52075,52083,52087,52091],{"__ignoreMap":48},[52,52035,52036,52038,52040,52042],{"class":54,"line":55},[52,52037,232],{"class":231},[52,52039,9231],{"class":58},[52,52041,238],{"class":231},[52,52043,9236],{"class":73},[52,52045,52046],{"class":54,"line":80},[52,52047,597],{"emptyLinePlaceholder":171},[52,52049,52050,52052,52054,52056,52058,52060],{"class":54,"line":108},[52,52051,1721],{"class":231},[52,52053,1724],{"class":371},[52,52055,1727],{"class":231},[52,52057,1730],{"class":231},[52,52059,1733],{"class":66},[52,52061,1736],{"class":58},[52,52063,52064],{"class":54,"line":118},[52,52065,1751],{"class":58},[52,52067,52068,52070,52073],{"class":54,"line":594},[52,52069,1756],{"class":58},[52,52071,52072],{"class":73},"'Tritone'",[52,52074,4722],{"class":58},[52,52076,52077,52079,52081],{"class":54,"line":600},[52,52078,4727],{"class":58},[52,52080,2869],{"class":73},[52,52082,2129],{"class":58},[52,52084,52085],{"class":54,"line":606},[52,52086,4744],{"class":58},[52,52088,52089],{"class":54,"line":653},[52,52090,1773],{"class":58},[52,52092,52093],{"class":54,"line":662},[52,52094,1778],{"class":58},[156,52096,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":52098},[52099,52100],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tritone",{"title":51832,"description":51840},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":52107,"title":52108,"body":52109,"category":27760,"componentType":20842,"description":52116,"extension":168,"meta":52301,"navigation":171,"path":52302,"requiresChild":27763,"seo":52303,"stem":52304,"__hash__":52305},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":52110,"toc":52297},[52111,52114,52117,52119,52121,52124,52126,52295],[11,52112,52108],{"id":52113},"truchet",[15,52115,52116],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26901,52118],{"component":52108},[23,52120,26905],{"id":21503},[26907,52122],{":props":52123},"[{\"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,52125,26913],{"id":26912},[217,52127,52128,52157,52185,52213,52241],{":tabs":1543},[43,52129,52131],{"className":45,"code":52130,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,52132,52133,52141,52149],{"__ignoreMap":48},[52,52134,52135,52137,52139],{"class":54,"line":55},[52,52136,59],{"class":58},[52,52138,63],{"class":62},[52,52140,77],{"class":58},[52,52142,52143,52145,52147],{"class":54,"line":80},[52,52144,83],{"class":58},[52,52146,52108],{"class":62},[52,52148,105],{"class":58},[52,52150,52151,52153,52155],{"class":54,"line":108},[52,52152,121],{"class":58},[52,52154,63],{"class":62},[52,52156,77],{"class":58},[43,52158,52159],{"className":360,"code":52130,"language":362,"meta":48,"style":48},[31,52160,52161,52169,52177],{"__ignoreMap":48},[52,52162,52163,52165,52167],{"class":54,"line":55},[52,52164,59],{"class":58},[52,52166,63],{"class":371},[52,52168,77],{"class":58},[52,52170,52171,52173,52175],{"class":54,"line":80},[52,52172,83],{"class":58},[52,52174,52108],{"class":371},[52,52176,105],{"class":58},[52,52178,52179,52181,52183],{"class":54,"line":108},[52,52180,121],{"class":58},[52,52182,63],{"class":371},[52,52184,77],{"class":58},[43,52186,52187],{"className":2507,"code":52130,"language":2509,"meta":48,"style":48},[31,52188,52189,52197,52205],{"__ignoreMap":48},[52,52190,52191,52193,52195],{"class":54,"line":55},[52,52192,59],{"class":58},[52,52194,63],{"class":371},[52,52196,77],{"class":58},[52,52198,52199,52201,52203],{"class":54,"line":80},[52,52200,83],{"class":58},[52,52202,52108],{"class":371},[52,52204,105],{"class":58},[52,52206,52207,52209,52211],{"class":54,"line":108},[52,52208,121],{"class":58},[52,52210,63],{"class":371},[52,52212,77],{"class":58},[43,52214,52215],{"className":419,"code":52130,"language":420,"meta":48,"style":48},[31,52216,52217,52225,52233],{"__ignoreMap":48},[52,52218,52219,52221,52223],{"class":54,"line":55},[52,52220,59],{"class":58},[52,52222,63],{"class":371},[52,52224,77],{"class":58},[52,52226,52227,52229,52231],{"class":54,"line":80},[52,52228,83],{"class":58},[52,52230,52108],{"class":371},[52,52232,105],{"class":58},[52,52234,52235,52237,52239],{"class":54,"line":108},[52,52236,121],{"class":58},[52,52238,63],{"class":371},[52,52240,77],{"class":58},[43,52242,52244],{"className":222,"code":52243,"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,52245,52246,52256,52260,52274,52278,52287,52291],{"__ignoreMap":48},[52,52247,52248,52250,52252,52254],{"class":54,"line":55},[52,52249,232],{"class":231},[52,52251,9231],{"class":58},[52,52253,238],{"class":231},[52,52255,9236],{"class":73},[52,52257,52258],{"class":54,"line":80},[52,52259,597],{"emptyLinePlaceholder":171},[52,52261,52262,52264,52266,52268,52270,52272],{"class":54,"line":108},[52,52263,1721],{"class":231},[52,52265,1724],{"class":371},[52,52267,1727],{"class":231},[52,52269,1730],{"class":231},[52,52271,1733],{"class":66},[52,52273,1736],{"class":58},[52,52275,52276],{"class":54,"line":118},[52,52277,1751],{"class":58},[52,52279,52280,52282,52285],{"class":54,"line":594},[52,52281,1756],{"class":58},[52,52283,52284],{"class":73},"'Truchet'",[52,52286,2129],{"class":58},[52,52288,52289],{"class":54,"line":600},[52,52290,1773],{"class":58},[52,52292,52293],{"class":54,"line":606},[52,52294,1778],{"class":58},[156,52296,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":52298},[52299,52300],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/truchet",{"title":52108,"description":52116},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":52307,"title":52308,"body":52309,"category":29105,"componentType":20848,"description":52316,"extension":168,"meta":52633,"navigation":171,"path":52634,"requiresChild":171,"seo":52635,"stem":52636,"__hash__":52637},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":52310,"toc":52629},[52311,52314,52317,52319,52321,52324,52326,52627],[11,52312,52308],{"id":52313},"twirl",[15,52315,52316],{},"Rotate and twist content around a center point",[26901,52318],{"component":52308},[23,52320,26905],{"id":21503},[26907,52322],{":props":52323},"[{\"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,52325,26913],{"id":26912},[217,52327,52328,52384,52443,52499,52557],{":tabs":1543},[43,52329,52331],{"className":45,"code":52330,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,52332,52333,52341,52348,52356,52360,52368,52376],{"__ignoreMap":48},[52,52334,52335,52337,52339],{"class":54,"line":55},[52,52336,59],{"class":58},[52,52338,63],{"class":62},[52,52340,77],{"class":58},[52,52342,52343,52345],{"class":54,"line":80},[52,52344,83],{"class":58},[52,52346,52347],{"class":62},"Twirl\n",[52,52349,52350,52352,52354],{"class":54,"line":108},[52,52351,17870],{"class":66},[52,52353,70],{"class":58},[52,52355,28827],{"class":73},[52,52357,52358],{"class":54,"line":118},[52,52359,26949],{"class":58},[52,52361,52362,52364,52366],{"class":54,"line":594},[52,52363,2213],{"class":58},[52,52365,2216],{"class":62},[52,52367,105],{"class":58},[52,52369,52370,52372,52374],{"class":54,"line":600},[52,52371,2230],{"class":58},[52,52373,52308],{"class":62},[52,52375,77],{"class":58},[52,52377,52378,52380,52382],{"class":54,"line":606},[52,52379,121],{"class":58},[52,52381,63],{"class":62},[52,52383,77],{"class":58},[43,52385,52387],{"className":360,"code":52386,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,52388,52389,52397,52403,52415,52419,52427,52435],{"__ignoreMap":48},[52,52390,52391,52393,52395],{"class":54,"line":55},[52,52392,59],{"class":58},[52,52394,63],{"class":371},[52,52396,77],{"class":58},[52,52398,52399,52401],{"class":54,"line":80},[52,52400,83],{"class":58},[52,52402,52347],{"class":371},[52,52404,52405,52407,52409,52411,52413],{"class":54,"line":108},[52,52406,17981],{"class":66},[52,52408,70],{"class":231},[52,52410,723],{"class":58},[52,52412,6391],{"class":371},[52,52414,729],{"class":58},[52,52416,52417],{"class":54,"line":118},[52,52418,26949],{"class":58},[52,52420,52421,52423,52425],{"class":54,"line":594},[52,52422,2213],{"class":58},[52,52424,2216],{"class":371},[52,52426,105],{"class":58},[52,52428,52429,52431,52433],{"class":54,"line":600},[52,52430,2230],{"class":58},[52,52432,52308],{"class":371},[52,52434,77],{"class":58},[52,52436,52437,52439,52441],{"class":54,"line":606},[52,52438,121],{"class":58},[52,52440,63],{"class":371},[52,52442,77],{"class":58},[43,52444,52445],{"className":2507,"code":52386,"language":2509,"meta":48,"style":48},[31,52446,52447,52455,52461,52471,52475,52483,52491],{"__ignoreMap":48},[52,52448,52449,52451,52453],{"class":54,"line":55},[52,52450,59],{"class":58},[52,52452,63],{"class":371},[52,52454,77],{"class":58},[52,52456,52457,52459],{"class":54,"line":80},[52,52458,83],{"class":58},[52,52460,52347],{"class":371},[52,52462,52463,52465,52467,52469],{"class":54,"line":108},[52,52464,17981],{"class":66},[52,52466,24845],{"class":58},[52,52468,6391],{"class":371},[52,52470,729],{"class":58},[52,52472,52473],{"class":54,"line":118},[52,52474,26949],{"class":58},[52,52476,52477,52479,52481],{"class":54,"line":594},[52,52478,2213],{"class":58},[52,52480,2216],{"class":371},[52,52482,105],{"class":58},[52,52484,52485,52487,52489],{"class":54,"line":600},[52,52486,2230],{"class":58},[52,52488,52308],{"class":371},[52,52490,77],{"class":58},[52,52492,52493,52495,52497],{"class":54,"line":606},[52,52494,121],{"class":58},[52,52496,63],{"class":371},[52,52498,77],{"class":58},[43,52500,52501],{"className":419,"code":52386,"language":420,"meta":48,"style":48},[31,52502,52503,52511,52517,52529,52533,52541,52549],{"__ignoreMap":48},[52,52504,52505,52507,52509],{"class":54,"line":55},[52,52506,59],{"class":58},[52,52508,63],{"class":371},[52,52510,77],{"class":58},[52,52512,52513,52515],{"class":54,"line":80},[52,52514,83],{"class":58},[52,52516,52347],{"class":371},[52,52518,52519,52521,52523,52525,52527],{"class":54,"line":108},[52,52520,17981],{"class":66},[52,52522,70],{"class":231},[52,52524,723],{"class":58},[52,52526,6391],{"class":371},[52,52528,729],{"class":58},[52,52530,52531],{"class":54,"line":118},[52,52532,26949],{"class":58},[52,52534,52535,52537,52539],{"class":54,"line":594},[52,52536,2213],{"class":58},[52,52538,2216],{"class":371},[52,52540,105],{"class":58},[52,52542,52543,52545,52547],{"class":54,"line":600},[52,52544,2230],{"class":58},[52,52546,52308],{"class":371},[52,52548,77],{"class":58},[52,52550,52551,52553,52555],{"class":54,"line":606},[52,52552,121],{"class":58},[52,52554,63],{"class":371},[52,52556,77],{"class":58},[43,52558,52560],{"className":222,"code":52559,"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,52561,52562,52572,52576,52590,52594,52607,52615,52619,52623],{"__ignoreMap":48},[52,52563,52564,52566,52568,52570],{"class":54,"line":55},[52,52565,232],{"class":231},[52,52567,9231],{"class":58},[52,52569,238],{"class":231},[52,52571,9236],{"class":73},[52,52573,52574],{"class":54,"line":80},[52,52575,597],{"emptyLinePlaceholder":171},[52,52577,52578,52580,52582,52584,52586,52588],{"class":54,"line":108},[52,52579,1721],{"class":231},[52,52581,1724],{"class":371},[52,52583,1727],{"class":231},[52,52585,1730],{"class":231},[52,52587,1733],{"class":66},[52,52589,1736],{"class":58},[52,52591,52592],{"class":54,"line":118},[52,52593,1751],{"class":58},[52,52595,52596,52598,52601,52603,52605],{"class":54,"line":594},[52,52597,1756],{"class":58},[52,52599,52600],{"class":73},"'Twirl'",[52,52602,27194],{"class":58},[52,52604,6391],{"class":371},[52,52606,5259],{"class":58},[52,52608,52609,52611,52613],{"class":54,"line":600},[52,52610,4727],{"class":58},[52,52612,2869],{"class":73},[52,52614,2129],{"class":58},[52,52616,52617],{"class":54,"line":606},[52,52618,4744],{"class":58},[52,52620,52621],{"class":54,"line":653},[52,52622,1773],{"class":58},[52,52624,52625],{"class":54,"line":662},[52,52626,1778],{"class":58},[156,52628,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52630},[52631,52632],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/twirl",{"title":52308,"description":52316},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":52639,"title":52640,"body":52641,"category":30727,"componentType":20842,"description":52648,"extension":168,"meta":52925,"navigation":171,"path":52926,"requiresChild":27763,"seo":52927,"stem":52928,"__hash__":52929},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":52642,"toc":52921},[52643,52646,52649,52651,52653,52656,52658,52919],[11,52644,52640],{"id":52645},"vesica",[15,52647,52648],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26901,52650],{"component":52640},[23,52652,26905],{"id":21503},[26907,52654],{":props":52655},"[{\"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,52657,26913],{"id":26912},[217,52659,52660,52708,52759,52807,52857],{":tabs":1543},[43,52661,52663],{"className":45,"code":52662,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,52664,52665,52673,52680,52688,52696,52700],{"__ignoreMap":48},[52,52666,52667,52669,52671],{"class":54,"line":55},[52,52668,59],{"class":58},[52,52670,63],{"class":62},[52,52672,77],{"class":58},[52,52674,52675,52677],{"class":54,"line":80},[52,52676,83],{"class":58},[52,52678,52679],{"class":62},"Vesica\n",[52,52681,52682,52684,52686],{"class":54,"line":108},[52,52683,7351],{"class":66},[52,52685,70],{"class":58},[52,52687,7307],{"class":73},[52,52689,52690,52692,52694],{"class":54,"line":118},[52,52691,14901],{"class":66},[52,52693,70],{"class":58},[52,52695,31892],{"class":73},[52,52697,52698],{"class":54,"line":594},[52,52699,1224],{"class":58},[52,52701,52702,52704,52706],{"class":54,"line":600},[52,52703,121],{"class":58},[52,52705,63],{"class":62},[52,52707,77],{"class":58},[43,52709,52711],{"className":360,"code":52710,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,52712,52713,52721,52727,52735,52747,52751],{"__ignoreMap":48},[52,52714,52715,52717,52719],{"class":54,"line":55},[52,52716,59],{"class":58},[52,52718,63],{"class":371},[52,52720,77],{"class":58},[52,52722,52723,52725],{"class":54,"line":80},[52,52724,83],{"class":58},[52,52726,52679],{"class":371},[52,52728,52729,52731,52733],{"class":54,"line":108},[52,52730,7351],{"class":66},[52,52732,70],{"class":231},[52,52734,7307],{"class":73},[52,52736,52737,52739,52741,52743,52745],{"class":54,"line":118},[52,52738,7361],{"class":66},[52,52740,70],{"class":231},[52,52742,723],{"class":58},[52,52744,18630],{"class":371},[52,52746,729],{"class":58},[52,52748,52749],{"class":54,"line":594},[52,52750,1224],{"class":58},[52,52752,52753,52755,52757],{"class":54,"line":600},[52,52754,121],{"class":58},[52,52756,63],{"class":371},[52,52758,77],{"class":58},[43,52760,52761],{"className":2507,"code":52710,"language":2509,"meta":48,"style":48},[31,52762,52763,52771,52777,52785,52795,52799],{"__ignoreMap":48},[52,52764,52765,52767,52769],{"class":54,"line":55},[52,52766,59],{"class":58},[52,52768,63],{"class":371},[52,52770,77],{"class":58},[52,52772,52773,52775],{"class":54,"line":80},[52,52774,83],{"class":58},[52,52776,52679],{"class":371},[52,52778,52779,52781,52783],{"class":54,"line":108},[52,52780,7351],{"class":66},[52,52782,70],{"class":58},[52,52784,7307],{"class":73},[52,52786,52787,52789,52791,52793],{"class":54,"line":118},[52,52788,7361],{"class":66},[52,52790,24845],{"class":58},[52,52792,18630],{"class":371},[52,52794,729],{"class":58},[52,52796,52797],{"class":54,"line":594},[52,52798,1224],{"class":58},[52,52800,52801,52803,52805],{"class":54,"line":600},[52,52802,121],{"class":58},[52,52804,63],{"class":371},[52,52806,77],{"class":58},[43,52808,52809],{"className":419,"code":52710,"language":420,"meta":48,"style":48},[31,52810,52811,52819,52825,52833,52845,52849],{"__ignoreMap":48},[52,52812,52813,52815,52817],{"class":54,"line":55},[52,52814,59],{"class":58},[52,52816,63],{"class":371},[52,52818,77],{"class":58},[52,52820,52821,52823],{"class":54,"line":80},[52,52822,83],{"class":58},[52,52824,52679],{"class":371},[52,52826,52827,52829,52831],{"class":54,"line":108},[52,52828,7351],{"class":66},[52,52830,70],{"class":231},[52,52832,7307],{"class":73},[52,52834,52835,52837,52839,52841,52843],{"class":54,"line":118},[52,52836,7361],{"class":66},[52,52838,70],{"class":231},[52,52840,723],{"class":58},[52,52842,18630],{"class":371},[52,52844,729],{"class":58},[52,52846,52847],{"class":54,"line":594},[52,52848,1224],{"class":58},[52,52850,52851,52853,52855],{"class":54,"line":600},[52,52852,121],{"class":58},[52,52854,63],{"class":371},[52,52856,77],{"class":58},[43,52858,52860],{"className":222,"code":52859,"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,52861,52862,52872,52876,52890,52894,52911,52915],{"__ignoreMap":48},[52,52863,52864,52866,52868,52870],{"class":54,"line":55},[52,52865,232],{"class":231},[52,52867,9231],{"class":58},[52,52869,238],{"class":231},[52,52871,9236],{"class":73},[52,52873,52874],{"class":54,"line":80},[52,52875,597],{"emptyLinePlaceholder":171},[52,52877,52878,52880,52882,52884,52886,52888],{"class":54,"line":108},[52,52879,1721],{"class":231},[52,52881,1724],{"class":371},[52,52883,1727],{"class":231},[52,52885,1730],{"class":231},[52,52887,1733],{"class":66},[52,52889,1736],{"class":58},[52,52891,52892],{"class":54,"line":118},[52,52893,1751],{"class":58},[52,52895,52896,52898,52901,52903,52905,52907,52909],{"class":54,"line":594},[52,52897,1756],{"class":58},[52,52899,52900],{"class":73},"'Vesica'",[52,52902,1762],{"class":58},[52,52904,7886],{"class":73},[52,52906,4278],{"class":58},[52,52908,18630],{"class":371},[52,52910,1768],{"class":58},[52,52912,52913],{"class":54,"line":600},[52,52914,1773],{"class":58},[52,52916,52917],{"class":54,"line":606},[52,52918,1778],{"class":58},[156,52920,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52922},[52923,52924],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vesica",{"title":52640,"description":52648},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":52931,"title":52932,"body":52933,"category":28771,"componentType":20848,"description":52940,"extension":168,"meta":53258,"navigation":171,"path":53259,"requiresChild":171,"seo":53260,"stem":53261,"__hash__":53262},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":52934,"toc":53254},[52935,52938,52941,52943,52945,52948,52950,53252],[11,52936,52932],{"id":52937},"vibrance",[15,52939,52940],{},"Selective saturation adjustment protecting skin tones",[26901,52942],{"component":52932},[23,52944,26905],{"id":21503},[26907,52946],{":props":52947},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,52949,26913],{"id":26912},[217,52951,52952,53009,53068,53124,53182],{":tabs":1543},[43,52953,52955],{"className":45,"code":52954,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,52956,52957,52965,52972,52981,52985,52993,53001],{"__ignoreMap":48},[52,52958,52959,52961,52963],{"class":54,"line":55},[52,52960,59],{"class":58},[52,52962,63],{"class":62},[52,52964,77],{"class":58},[52,52966,52967,52969],{"class":54,"line":80},[52,52968,83],{"class":58},[52,52970,52971],{"class":62},"Vibrance\n",[52,52973,52974,52976,52978],{"class":54,"line":108},[52,52975,17870],{"class":66},[52,52977,70],{"class":58},[52,52979,52980],{"class":73},"\"0\"\n",[52,52982,52983],{"class":54,"line":118},[52,52984,26949],{"class":58},[52,52986,52987,52989,52991],{"class":54,"line":594},[52,52988,2213],{"class":58},[52,52990,2216],{"class":62},[52,52992,105],{"class":58},[52,52994,52995,52997,52999],{"class":54,"line":600},[52,52996,2230],{"class":58},[52,52998,52932],{"class":62},[52,53000,77],{"class":58},[52,53002,53003,53005,53007],{"class":54,"line":606},[52,53004,121],{"class":58},[52,53006,63],{"class":62},[52,53008,77],{"class":58},[43,53010,53012],{"className":360,"code":53011,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,53013,53014,53022,53028,53040,53044,53052,53060],{"__ignoreMap":48},[52,53015,53016,53018,53020],{"class":54,"line":55},[52,53017,59],{"class":58},[52,53019,63],{"class":371},[52,53021,77],{"class":58},[52,53023,53024,53026],{"class":54,"line":80},[52,53025,83],{"class":58},[52,53027,52971],{"class":371},[52,53029,53030,53032,53034,53036,53038],{"class":54,"line":108},[52,53031,17981],{"class":66},[52,53033,70],{"class":231},[52,53035,723],{"class":58},[52,53037,6387],{"class":371},[52,53039,729],{"class":58},[52,53041,53042],{"class":54,"line":118},[52,53043,26949],{"class":58},[52,53045,53046,53048,53050],{"class":54,"line":594},[52,53047,2213],{"class":58},[52,53049,2216],{"class":371},[52,53051,105],{"class":58},[52,53053,53054,53056,53058],{"class":54,"line":600},[52,53055,2230],{"class":58},[52,53057,52932],{"class":371},[52,53059,77],{"class":58},[52,53061,53062,53064,53066],{"class":54,"line":606},[52,53063,121],{"class":58},[52,53065,63],{"class":371},[52,53067,77],{"class":58},[43,53069,53070],{"className":2507,"code":53011,"language":2509,"meta":48,"style":48},[31,53071,53072,53080,53086,53096,53100,53108,53116],{"__ignoreMap":48},[52,53073,53074,53076,53078],{"class":54,"line":55},[52,53075,59],{"class":58},[52,53077,63],{"class":371},[52,53079,77],{"class":58},[52,53081,53082,53084],{"class":54,"line":80},[52,53083,83],{"class":58},[52,53085,52971],{"class":371},[52,53087,53088,53090,53092,53094],{"class":54,"line":108},[52,53089,17981],{"class":66},[52,53091,24845],{"class":58},[52,53093,6387],{"class":371},[52,53095,729],{"class":58},[52,53097,53098],{"class":54,"line":118},[52,53099,26949],{"class":58},[52,53101,53102,53104,53106],{"class":54,"line":594},[52,53103,2213],{"class":58},[52,53105,2216],{"class":371},[52,53107,105],{"class":58},[52,53109,53110,53112,53114],{"class":54,"line":600},[52,53111,2230],{"class":58},[52,53113,52932],{"class":371},[52,53115,77],{"class":58},[52,53117,53118,53120,53122],{"class":54,"line":606},[52,53119,121],{"class":58},[52,53121,63],{"class":371},[52,53123,77],{"class":58},[43,53125,53126],{"className":419,"code":53011,"language":420,"meta":48,"style":48},[31,53127,53128,53136,53142,53154,53158,53166,53174],{"__ignoreMap":48},[52,53129,53130,53132,53134],{"class":54,"line":55},[52,53131,59],{"class":58},[52,53133,63],{"class":371},[52,53135,77],{"class":58},[52,53137,53138,53140],{"class":54,"line":80},[52,53139,83],{"class":58},[52,53141,52971],{"class":371},[52,53143,53144,53146,53148,53150,53152],{"class":54,"line":108},[52,53145,17981],{"class":66},[52,53147,70],{"class":231},[52,53149,723],{"class":58},[52,53151,6387],{"class":371},[52,53153,729],{"class":58},[52,53155,53156],{"class":54,"line":118},[52,53157,26949],{"class":58},[52,53159,53160,53162,53164],{"class":54,"line":594},[52,53161,2213],{"class":58},[52,53163,2216],{"class":371},[52,53165,105],{"class":58},[52,53167,53168,53170,53172],{"class":54,"line":600},[52,53169,2230],{"class":58},[52,53171,52932],{"class":371},[52,53173,77],{"class":58},[52,53175,53176,53178,53180],{"class":54,"line":606},[52,53177,121],{"class":58},[52,53179,63],{"class":371},[52,53181,77],{"class":58},[43,53183,53185],{"className":222,"code":53184,"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,53186,53187,53197,53201,53215,53219,53232,53240,53244,53248],{"__ignoreMap":48},[52,53188,53189,53191,53193,53195],{"class":54,"line":55},[52,53190,232],{"class":231},[52,53192,9231],{"class":58},[52,53194,238],{"class":231},[52,53196,9236],{"class":73},[52,53198,53199],{"class":54,"line":80},[52,53200,597],{"emptyLinePlaceholder":171},[52,53202,53203,53205,53207,53209,53211,53213],{"class":54,"line":108},[52,53204,1721],{"class":231},[52,53206,1724],{"class":371},[52,53208,1727],{"class":231},[52,53210,1730],{"class":231},[52,53212,1733],{"class":66},[52,53214,1736],{"class":58},[52,53216,53217],{"class":54,"line":118},[52,53218,1751],{"class":58},[52,53220,53221,53223,53226,53228,53230],{"class":54,"line":594},[52,53222,1756],{"class":58},[52,53224,53225],{"class":73},"'Vibrance'",[52,53227,27194],{"class":58},[52,53229,6387],{"class":371},[52,53231,5259],{"class":58},[52,53233,53234,53236,53238],{"class":54,"line":600},[52,53235,4727],{"class":58},[52,53237,2869],{"class":73},[52,53239,2129],{"class":58},[52,53241,53242],{"class":54,"line":606},[52,53243,4744],{"class":58},[52,53245,53246],{"class":54,"line":653},[52,53247,1773],{"class":58},[52,53249,53250],{"class":54,"line":662},[52,53251,1778],{"class":58},[156,53253,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53255},[53256,53257],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vibrance",{"title":52932,"description":52940},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":53264,"title":53265,"body":53266,"category":27760,"componentType":20842,"description":53273,"extension":168,"meta":53458,"navigation":171,"path":53459,"requiresChild":27763,"seo":53460,"stem":53461,"__hash__":53462},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":53267,"toc":53454},[53268,53271,53274,53276,53278,53281,53283,53452],[11,53269,53265],{"id":53270},"videotexture",[15,53272,53273],{},"Display a video with customizable playback and object-fit modes",[26901,53275],{"component":53265},[23,53277,26905],{"id":21503},[26907,53279],{":props":53280},"[{\"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,53282,26913],{"id":26912},[217,53284,53285,53314,53342,53370,53398],{":tabs":1543},[43,53286,53288],{"className":45,"code":53287,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,53289,53290,53298,53306],{"__ignoreMap":48},[52,53291,53292,53294,53296],{"class":54,"line":55},[52,53293,59],{"class":58},[52,53295,63],{"class":62},[52,53297,77],{"class":58},[52,53299,53300,53302,53304],{"class":54,"line":80},[52,53301,83],{"class":58},[52,53303,53265],{"class":62},[52,53305,105],{"class":58},[52,53307,53308,53310,53312],{"class":54,"line":108},[52,53309,121],{"class":58},[52,53311,63],{"class":62},[52,53313,77],{"class":58},[43,53315,53316],{"className":360,"code":53287,"language":362,"meta":48,"style":48},[31,53317,53318,53326,53334],{"__ignoreMap":48},[52,53319,53320,53322,53324],{"class":54,"line":55},[52,53321,59],{"class":58},[52,53323,63],{"class":371},[52,53325,77],{"class":58},[52,53327,53328,53330,53332],{"class":54,"line":80},[52,53329,83],{"class":58},[52,53331,53265],{"class":371},[52,53333,105],{"class":58},[52,53335,53336,53338,53340],{"class":54,"line":108},[52,53337,121],{"class":58},[52,53339,63],{"class":371},[52,53341,77],{"class":58},[43,53343,53344],{"className":2507,"code":53287,"language":2509,"meta":48,"style":48},[31,53345,53346,53354,53362],{"__ignoreMap":48},[52,53347,53348,53350,53352],{"class":54,"line":55},[52,53349,59],{"class":58},[52,53351,63],{"class":371},[52,53353,77],{"class":58},[52,53355,53356,53358,53360],{"class":54,"line":80},[52,53357,83],{"class":58},[52,53359,53265],{"class":371},[52,53361,105],{"class":58},[52,53363,53364,53366,53368],{"class":54,"line":108},[52,53365,121],{"class":58},[52,53367,63],{"class":371},[52,53369,77],{"class":58},[43,53371,53372],{"className":419,"code":53287,"language":420,"meta":48,"style":48},[31,53373,53374,53382,53390],{"__ignoreMap":48},[52,53375,53376,53378,53380],{"class":54,"line":55},[52,53377,59],{"class":58},[52,53379,63],{"class":371},[52,53381,77],{"class":58},[52,53383,53384,53386,53388],{"class":54,"line":80},[52,53385,83],{"class":58},[52,53387,53265],{"class":371},[52,53389,105],{"class":58},[52,53391,53392,53394,53396],{"class":54,"line":108},[52,53393,121],{"class":58},[52,53395,63],{"class":371},[52,53397,77],{"class":58},[43,53399,53401],{"className":222,"code":53400,"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,53402,53403,53413,53417,53431,53435,53444,53448],{"__ignoreMap":48},[52,53404,53405,53407,53409,53411],{"class":54,"line":55},[52,53406,232],{"class":231},[52,53408,9231],{"class":58},[52,53410,238],{"class":231},[52,53412,9236],{"class":73},[52,53414,53415],{"class":54,"line":80},[52,53416,597],{"emptyLinePlaceholder":171},[52,53418,53419,53421,53423,53425,53427,53429],{"class":54,"line":108},[52,53420,1721],{"class":231},[52,53422,1724],{"class":371},[52,53424,1727],{"class":231},[52,53426,1730],{"class":231},[52,53428,1733],{"class":66},[52,53430,1736],{"class":58},[52,53432,53433],{"class":54,"line":118},[52,53434,1751],{"class":58},[52,53436,53437,53439,53442],{"class":54,"line":594},[52,53438,1756],{"class":58},[52,53440,53441],{"class":73},"'VideoTexture'",[52,53443,2129],{"class":58},[52,53445,53446],{"class":54,"line":600},[52,53447,1773],{"class":58},[52,53449,53450],{"class":54,"line":606},[52,53451,1778],{"class":58},[156,53453,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53455},[53456,53457],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/videotexture",{"title":53265,"description":53273},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":53464,"title":53465,"body":53466,"category":27503,"componentType":20848,"description":53473,"extension":168,"meta":53872,"navigation":171,"path":53873,"requiresChild":171,"seo":53874,"stem":53875,"__hash__":53876},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":53467,"toc":53868},[53468,53471,53474,53476,53478,53481,53483,53866],[11,53469,53465],{"id":53470},"vignette",[15,53472,53473],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26901,53475],{"component":53465},[23,53477,26905],{"id":21503},[26907,53479],{":props":53480},"[{\"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,53482,26913],{"id":26912},[217,53484,53485,53557,53636,53710,53788],{":tabs":1543},[43,53486,53488],{"className":45,"code":53487,"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,53489,53490,53498,53505,53513,53521,53529,53533,53541,53549],{"__ignoreMap":48},[52,53491,53492,53494,53496],{"class":54,"line":55},[52,53493,59],{"class":58},[52,53495,63],{"class":62},[52,53497,77],{"class":58},[52,53499,53500,53502],{"class":54,"line":80},[52,53501,83],{"class":58},[52,53503,53504],{"class":62},"Vignette\n",[52,53506,53507,53509,53511],{"class":54,"line":108},[52,53508,7351],{"class":66},[52,53510,70],{"class":58},[52,53512,16975],{"class":73},[52,53514,53515,53517,53519],{"class":54,"line":118},[52,53516,14901],{"class":66},[52,53518,70],{"class":58},[52,53520,32462],{"class":73},[52,53522,53523,53525,53527],{"class":54,"line":594},[52,53524,17870],{"class":66},[52,53526,70],{"class":58},[52,53528,28827],{"class":73},[52,53530,53531],{"class":54,"line":600},[52,53532,26949],{"class":58},[52,53534,53535,53537,53539],{"class":54,"line":606},[52,53536,2213],{"class":58},[52,53538,2216],{"class":62},[52,53540,105],{"class":58},[52,53542,53543,53545,53547],{"class":54,"line":653},[52,53544,2230],{"class":58},[52,53546,53465],{"class":62},[52,53548,77],{"class":58},[52,53550,53551,53553,53555],{"class":54,"line":662},[52,53552,121],{"class":58},[52,53554,63],{"class":62},[52,53556,77],{"class":58},[43,53558,53560],{"className":360,"code":53559,"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,53561,53562,53570,53576,53584,53596,53608,53612,53620,53628],{"__ignoreMap":48},[52,53563,53564,53566,53568],{"class":54,"line":55},[52,53565,59],{"class":58},[52,53567,63],{"class":371},[52,53569,77],{"class":58},[52,53571,53572,53574],{"class":54,"line":80},[52,53573,83],{"class":58},[52,53575,53504],{"class":371},[52,53577,53578,53580,53582],{"class":54,"line":108},[52,53579,7351],{"class":66},[52,53581,70],{"class":231},[52,53583,16975],{"class":73},[52,53585,53586,53588,53590,53592,53594],{"class":54,"line":118},[52,53587,7361],{"class":66},[52,53589,70],{"class":231},[52,53591,723],{"class":58},[52,53593,5467],{"class":371},[52,53595,729],{"class":58},[52,53597,53598,53600,53602,53604,53606],{"class":54,"line":594},[52,53599,17981],{"class":66},[52,53601,70],{"class":231},[52,53603,723],{"class":58},[52,53605,6391],{"class":371},[52,53607,729],{"class":58},[52,53609,53610],{"class":54,"line":600},[52,53611,26949],{"class":58},[52,53613,53614,53616,53618],{"class":54,"line":606},[52,53615,2213],{"class":58},[52,53617,2216],{"class":371},[52,53619,105],{"class":58},[52,53621,53622,53624,53626],{"class":54,"line":653},[52,53623,2230],{"class":58},[52,53625,53465],{"class":371},[52,53627,77],{"class":58},[52,53629,53630,53632,53634],{"class":54,"line":662},[52,53631,121],{"class":58},[52,53633,63],{"class":371},[52,53635,77],{"class":58},[43,53637,53638],{"className":2507,"code":53559,"language":2509,"meta":48,"style":48},[31,53639,53640,53648,53654,53662,53672,53682,53686,53694,53702],{"__ignoreMap":48},[52,53641,53642,53644,53646],{"class":54,"line":55},[52,53643,59],{"class":58},[52,53645,63],{"class":371},[52,53647,77],{"class":58},[52,53649,53650,53652],{"class":54,"line":80},[52,53651,83],{"class":58},[52,53653,53504],{"class":371},[52,53655,53656,53658,53660],{"class":54,"line":108},[52,53657,7351],{"class":66},[52,53659,70],{"class":58},[52,53661,16975],{"class":73},[52,53663,53664,53666,53668,53670],{"class":54,"line":118},[52,53665,7361],{"class":66},[52,53667,24845],{"class":58},[52,53669,5467],{"class":371},[52,53671,729],{"class":58},[52,53673,53674,53676,53678,53680],{"class":54,"line":594},[52,53675,17981],{"class":66},[52,53677,24845],{"class":58},[52,53679,6391],{"class":371},[52,53681,729],{"class":58},[52,53683,53684],{"class":54,"line":600},[52,53685,26949],{"class":58},[52,53687,53688,53690,53692],{"class":54,"line":606},[52,53689,2213],{"class":58},[52,53691,2216],{"class":371},[52,53693,105],{"class":58},[52,53695,53696,53698,53700],{"class":54,"line":653},[52,53697,2230],{"class":58},[52,53699,53465],{"class":371},[52,53701,77],{"class":58},[52,53703,53704,53706,53708],{"class":54,"line":662},[52,53705,121],{"class":58},[52,53707,63],{"class":371},[52,53709,77],{"class":58},[43,53711,53712],{"className":419,"code":53559,"language":420,"meta":48,"style":48},[31,53713,53714,53722,53728,53736,53748,53760,53764,53772,53780],{"__ignoreMap":48},[52,53715,53716,53718,53720],{"class":54,"line":55},[52,53717,59],{"class":58},[52,53719,63],{"class":371},[52,53721,77],{"class":58},[52,53723,53724,53726],{"class":54,"line":80},[52,53725,83],{"class":58},[52,53727,53504],{"class":371},[52,53729,53730,53732,53734],{"class":54,"line":108},[52,53731,7351],{"class":66},[52,53733,70],{"class":231},[52,53735,16975],{"class":73},[52,53737,53738,53740,53742,53744,53746],{"class":54,"line":118},[52,53739,7361],{"class":66},[52,53741,70],{"class":231},[52,53743,723],{"class":58},[52,53745,5467],{"class":371},[52,53747,729],{"class":58},[52,53749,53750,53752,53754,53756,53758],{"class":54,"line":594},[52,53751,17981],{"class":66},[52,53753,70],{"class":231},[52,53755,723],{"class":58},[52,53757,6391],{"class":371},[52,53759,729],{"class":58},[52,53761,53762],{"class":54,"line":600},[52,53763,26949],{"class":58},[52,53765,53766,53768,53770],{"class":54,"line":606},[52,53767,2213],{"class":58},[52,53769,2216],{"class":371},[52,53771,105],{"class":58},[52,53773,53774,53776,53778],{"class":54,"line":653},[52,53775,2230],{"class":58},[52,53777,53465],{"class":371},[52,53779,77],{"class":58},[52,53781,53782,53784,53786],{"class":54,"line":662},[52,53783,121],{"class":58},[52,53785,63],{"class":371},[52,53787,77],{"class":58},[43,53789,53791],{"className":222,"code":53790,"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,53792,53793,53803,53807,53821,53825,53846,53854,53858,53862],{"__ignoreMap":48},[52,53794,53795,53797,53799,53801],{"class":54,"line":55},[52,53796,232],{"class":231},[52,53798,9231],{"class":58},[52,53800,238],{"class":231},[52,53802,9236],{"class":73},[52,53804,53805],{"class":54,"line":80},[52,53806,597],{"emptyLinePlaceholder":171},[52,53808,53809,53811,53813,53815,53817,53819],{"class":54,"line":108},[52,53810,1721],{"class":231},[52,53812,1724],{"class":371},[52,53814,1727],{"class":231},[52,53816,1730],{"class":231},[52,53818,1733],{"class":66},[52,53820,1736],{"class":58},[52,53822,53823],{"class":54,"line":118},[52,53824,1751],{"class":58},[52,53826,53827,53829,53832,53834,53836,53838,53840,53842,53844],{"class":54,"line":594},[52,53828,1756],{"class":58},[52,53830,53831],{"class":73},"'Vignette'",[52,53833,1762],{"class":58},[52,53835,17534],{"class":73},[52,53837,4278],{"class":58},[52,53839,5467],{"class":371},[52,53841,34623],{"class":58},[52,53843,6391],{"class":371},[52,53845,5259],{"class":58},[52,53847,53848,53850,53852],{"class":54,"line":600},[52,53849,4727],{"class":58},[52,53851,2869],{"class":73},[52,53853,2129],{"class":58},[52,53855,53856],{"class":54,"line":606},[52,53857,4744],{"class":58},[52,53859,53860],{"class":54,"line":653},[52,53861,1773],{"class":58},[52,53863,53864],{"class":54,"line":662},[52,53865,1778],{"class":58},[156,53867,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53869},[53870,53871],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vignette",{"title":53465,"description":53473},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":53878,"title":53879,"body":53880,"category":27760,"componentType":20842,"description":53887,"extension":168,"meta":54072,"navigation":171,"path":54073,"requiresChild":27763,"seo":54074,"stem":54075,"__hash__":54076},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":53881,"toc":54068},[53882,53885,53888,53890,53892,53895,53897,54066],[11,53883,53879],{"id":53884},"voronoi",[15,53886,53887],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26901,53889],{"component":53879},[23,53891,26905],{"id":21503},[26907,53893],{":props":53894},"[{\"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,53896,26913],{"id":26912},[217,53898,53899,53928,53956,53984,54012],{":tabs":1543},[43,53900,53902],{"className":45,"code":53901,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,53903,53904,53912,53920],{"__ignoreMap":48},[52,53905,53906,53908,53910],{"class":54,"line":55},[52,53907,59],{"class":58},[52,53909,63],{"class":62},[52,53911,77],{"class":58},[52,53913,53914,53916,53918],{"class":54,"line":80},[52,53915,83],{"class":58},[52,53917,53879],{"class":62},[52,53919,105],{"class":58},[52,53921,53922,53924,53926],{"class":54,"line":108},[52,53923,121],{"class":58},[52,53925,63],{"class":62},[52,53927,77],{"class":58},[43,53929,53930],{"className":360,"code":53901,"language":362,"meta":48,"style":48},[31,53931,53932,53940,53948],{"__ignoreMap":48},[52,53933,53934,53936,53938],{"class":54,"line":55},[52,53935,59],{"class":58},[52,53937,63],{"class":371},[52,53939,77],{"class":58},[52,53941,53942,53944,53946],{"class":54,"line":80},[52,53943,83],{"class":58},[52,53945,53879],{"class":371},[52,53947,105],{"class":58},[52,53949,53950,53952,53954],{"class":54,"line":108},[52,53951,121],{"class":58},[52,53953,63],{"class":371},[52,53955,77],{"class":58},[43,53957,53958],{"className":2507,"code":53901,"language":2509,"meta":48,"style":48},[31,53959,53960,53968,53976],{"__ignoreMap":48},[52,53961,53962,53964,53966],{"class":54,"line":55},[52,53963,59],{"class":58},[52,53965,63],{"class":371},[52,53967,77],{"class":58},[52,53969,53970,53972,53974],{"class":54,"line":80},[52,53971,83],{"class":58},[52,53973,53879],{"class":371},[52,53975,105],{"class":58},[52,53977,53978,53980,53982],{"class":54,"line":108},[52,53979,121],{"class":58},[52,53981,63],{"class":371},[52,53983,77],{"class":58},[43,53985,53986],{"className":419,"code":53901,"language":420,"meta":48,"style":48},[31,53987,53988,53996,54004],{"__ignoreMap":48},[52,53989,53990,53992,53994],{"class":54,"line":55},[52,53991,59],{"class":58},[52,53993,63],{"class":371},[52,53995,77],{"class":58},[52,53997,53998,54000,54002],{"class":54,"line":80},[52,53999,83],{"class":58},[52,54001,53879],{"class":371},[52,54003,105],{"class":58},[52,54005,54006,54008,54010],{"class":54,"line":108},[52,54007,121],{"class":58},[52,54009,63],{"class":371},[52,54011,77],{"class":58},[43,54013,54015],{"className":222,"code":54014,"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,54016,54017,54027,54031,54045,54049,54058,54062],{"__ignoreMap":48},[52,54018,54019,54021,54023,54025],{"class":54,"line":55},[52,54020,232],{"class":231},[52,54022,9231],{"class":58},[52,54024,238],{"class":231},[52,54026,9236],{"class":73},[52,54028,54029],{"class":54,"line":80},[52,54030,597],{"emptyLinePlaceholder":171},[52,54032,54033,54035,54037,54039,54041,54043],{"class":54,"line":108},[52,54034,1721],{"class":231},[52,54036,1724],{"class":371},[52,54038,1727],{"class":231},[52,54040,1730],{"class":231},[52,54042,1733],{"class":66},[52,54044,1736],{"class":58},[52,54046,54047],{"class":54,"line":118},[52,54048,1751],{"class":58},[52,54050,54051,54053,54056],{"class":54,"line":594},[52,54052,1756],{"class":58},[52,54054,54055],{"class":73},"'Voronoi'",[52,54057,2129],{"class":58},[52,54059,54060],{"class":54,"line":600},[52,54061,1773],{"class":58},[52,54063,54064],{"class":54,"line":606},[52,54065,1778],{"class":58},[156,54067,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54069},[54070,54071],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/voronoi",{"title":53879,"description":53887},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":54078,"title":54079,"body":54080,"category":29105,"componentType":20848,"description":54087,"extension":168,"meta":54348,"navigation":171,"path":54349,"requiresChild":171,"seo":54350,"stem":54351,"__hash__":54352},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":54081,"toc":54344},[54082,54085,54088,54090,54092,54095,54097,54342],[11,54083,54079],{"id":54084},"wavedistortion",[15,54086,54087],{},"Wave-based distortion with multiple waveform types",[26901,54089],{"component":54079},[23,54091,26905],{"id":21503},[26907,54093],{":props":54094},"[{\"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,54096,26913],{"id":26912},[217,54098,54099,54144,54188,54232,54276],{":tabs":1543},[43,54100,54102],{"className":45,"code":54101,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,54103,54104,54112,54120,54128,54136],{"__ignoreMap":48},[52,54105,54106,54108,54110],{"class":54,"line":55},[52,54107,59],{"class":58},[52,54109,63],{"class":62},[52,54111,77],{"class":58},[52,54113,54114,54116,54118],{"class":54,"line":80},[52,54115,83],{"class":58},[52,54117,54079],{"class":62},[52,54119,77],{"class":58},[52,54121,54122,54124,54126],{"class":54,"line":108},[52,54123,2213],{"class":58},[52,54125,2216],{"class":62},[52,54127,105],{"class":58},[52,54129,54130,54132,54134],{"class":54,"line":118},[52,54131,2230],{"class":58},[52,54133,54079],{"class":62},[52,54135,77],{"class":58},[52,54137,54138,54140,54142],{"class":54,"line":594},[52,54139,121],{"class":58},[52,54141,63],{"class":62},[52,54143,77],{"class":58},[43,54145,54146],{"className":360,"code":54101,"language":362,"meta":48,"style":48},[31,54147,54148,54156,54164,54172,54180],{"__ignoreMap":48},[52,54149,54150,54152,54154],{"class":54,"line":55},[52,54151,59],{"class":58},[52,54153,63],{"class":371},[52,54155,77],{"class":58},[52,54157,54158,54160,54162],{"class":54,"line":80},[52,54159,83],{"class":58},[52,54161,54079],{"class":371},[52,54163,77],{"class":58},[52,54165,54166,54168,54170],{"class":54,"line":108},[52,54167,2213],{"class":58},[52,54169,2216],{"class":371},[52,54171,105],{"class":58},[52,54173,54174,54176,54178],{"class":54,"line":118},[52,54175,2230],{"class":58},[52,54177,54079],{"class":371},[52,54179,77],{"class":58},[52,54181,54182,54184,54186],{"class":54,"line":594},[52,54183,121],{"class":58},[52,54185,63],{"class":371},[52,54187,77],{"class":58},[43,54189,54190],{"className":2507,"code":54101,"language":2509,"meta":48,"style":48},[31,54191,54192,54200,54208,54216,54224],{"__ignoreMap":48},[52,54193,54194,54196,54198],{"class":54,"line":55},[52,54195,59],{"class":58},[52,54197,63],{"class":371},[52,54199,77],{"class":58},[52,54201,54202,54204,54206],{"class":54,"line":80},[52,54203,83],{"class":58},[52,54205,54079],{"class":371},[52,54207,77],{"class":58},[52,54209,54210,54212,54214],{"class":54,"line":108},[52,54211,2213],{"class":58},[52,54213,2216],{"class":371},[52,54215,105],{"class":58},[52,54217,54218,54220,54222],{"class":54,"line":118},[52,54219,2230],{"class":58},[52,54221,54079],{"class":371},[52,54223,77],{"class":58},[52,54225,54226,54228,54230],{"class":54,"line":594},[52,54227,121],{"class":58},[52,54229,63],{"class":371},[52,54231,77],{"class":58},[43,54233,54234],{"className":419,"code":54101,"language":420,"meta":48,"style":48},[31,54235,54236,54244,54252,54260,54268],{"__ignoreMap":48},[52,54237,54238,54240,54242],{"class":54,"line":55},[52,54239,59],{"class":58},[52,54241,63],{"class":371},[52,54243,77],{"class":58},[52,54245,54246,54248,54250],{"class":54,"line":80},[52,54247,83],{"class":58},[52,54249,54079],{"class":371},[52,54251,77],{"class":58},[52,54253,54254,54256,54258],{"class":54,"line":108},[52,54255,2213],{"class":58},[52,54257,2216],{"class":371},[52,54259,105],{"class":58},[52,54261,54262,54264,54266],{"class":54,"line":118},[52,54263,2230],{"class":58},[52,54265,54079],{"class":371},[52,54267,77],{"class":58},[52,54269,54270,54272,54274],{"class":54,"line":594},[52,54271,121],{"class":58},[52,54273,63],{"class":371},[52,54275,77],{"class":58},[43,54277,54279],{"className":222,"code":54278,"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,54280,54281,54291,54295,54309,54313,54322,54330,54334,54338],{"__ignoreMap":48},[52,54282,54283,54285,54287,54289],{"class":54,"line":55},[52,54284,232],{"class":231},[52,54286,9231],{"class":58},[52,54288,238],{"class":231},[52,54290,9236],{"class":73},[52,54292,54293],{"class":54,"line":80},[52,54294,597],{"emptyLinePlaceholder":171},[52,54296,54297,54299,54301,54303,54305,54307],{"class":54,"line":108},[52,54298,1721],{"class":231},[52,54300,1724],{"class":371},[52,54302,1727],{"class":231},[52,54304,1730],{"class":231},[52,54306,1733],{"class":66},[52,54308,1736],{"class":58},[52,54310,54311],{"class":54,"line":118},[52,54312,1751],{"class":58},[52,54314,54315,54317,54320],{"class":54,"line":594},[52,54316,1756],{"class":58},[52,54318,54319],{"class":73},"'WaveDistortion'",[52,54321,4722],{"class":58},[52,54323,54324,54326,54328],{"class":54,"line":600},[52,54325,4727],{"class":58},[52,54327,2869],{"class":73},[52,54329,2129],{"class":58},[52,54331,54332],{"class":54,"line":606},[52,54333,4744],{"class":58},[52,54335,54336],{"class":54,"line":653},[52,54337,1773],{"class":58},[52,54339,54340],{"class":54,"line":662},[52,54341,1778],{"class":58},[156,54343,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54345},[54346,54347],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/wavedistortion",{"title":54079,"description":54087},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":54354,"title":54355,"body":54356,"category":27760,"componentType":20842,"description":54363,"extension":168,"meta":54548,"navigation":171,"path":54549,"requiresChild":27763,"seo":54550,"stem":54551,"__hash__":54552},"components/docs/components/Weave.md","Weave",{"type":8,"value":54357,"toc":54544},[54358,54361,54364,54366,54368,54371,54373,54542],[11,54359,54355],{"id":54360},"weave",[15,54362,54363],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26901,54365],{"component":54355},[23,54367,26905],{"id":21503},[26907,54369],{":props":54370},"[{\"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,54372,26913],{"id":26912},[217,54374,54375,54404,54432,54460,54488],{":tabs":1543},[43,54376,54378],{"className":45,"code":54377,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,54379,54380,54388,54396],{"__ignoreMap":48},[52,54381,54382,54384,54386],{"class":54,"line":55},[52,54383,59],{"class":58},[52,54385,63],{"class":62},[52,54387,77],{"class":58},[52,54389,54390,54392,54394],{"class":54,"line":80},[52,54391,83],{"class":58},[52,54393,54355],{"class":62},[52,54395,105],{"class":58},[52,54397,54398,54400,54402],{"class":54,"line":108},[52,54399,121],{"class":58},[52,54401,63],{"class":62},[52,54403,77],{"class":58},[43,54405,54406],{"className":360,"code":54377,"language":362,"meta":48,"style":48},[31,54407,54408,54416,54424],{"__ignoreMap":48},[52,54409,54410,54412,54414],{"class":54,"line":55},[52,54411,59],{"class":58},[52,54413,63],{"class":371},[52,54415,77],{"class":58},[52,54417,54418,54420,54422],{"class":54,"line":80},[52,54419,83],{"class":58},[52,54421,54355],{"class":371},[52,54423,105],{"class":58},[52,54425,54426,54428,54430],{"class":54,"line":108},[52,54427,121],{"class":58},[52,54429,63],{"class":371},[52,54431,77],{"class":58},[43,54433,54434],{"className":2507,"code":54377,"language":2509,"meta":48,"style":48},[31,54435,54436,54444,54452],{"__ignoreMap":48},[52,54437,54438,54440,54442],{"class":54,"line":55},[52,54439,59],{"class":58},[52,54441,63],{"class":371},[52,54443,77],{"class":58},[52,54445,54446,54448,54450],{"class":54,"line":80},[52,54447,83],{"class":58},[52,54449,54355],{"class":371},[52,54451,105],{"class":58},[52,54453,54454,54456,54458],{"class":54,"line":108},[52,54455,121],{"class":58},[52,54457,63],{"class":371},[52,54459,77],{"class":58},[43,54461,54462],{"className":419,"code":54377,"language":420,"meta":48,"style":48},[31,54463,54464,54472,54480],{"__ignoreMap":48},[52,54465,54466,54468,54470],{"class":54,"line":55},[52,54467,59],{"class":58},[52,54469,63],{"class":371},[52,54471,77],{"class":58},[52,54473,54474,54476,54478],{"class":54,"line":80},[52,54475,83],{"class":58},[52,54477,54355],{"class":371},[52,54479,105],{"class":58},[52,54481,54482,54484,54486],{"class":54,"line":108},[52,54483,121],{"class":58},[52,54485,63],{"class":371},[52,54487,77],{"class":58},[43,54489,54491],{"className":222,"code":54490,"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,54492,54493,54503,54507,54521,54525,54534,54538],{"__ignoreMap":48},[52,54494,54495,54497,54499,54501],{"class":54,"line":55},[52,54496,232],{"class":231},[52,54498,9231],{"class":58},[52,54500,238],{"class":231},[52,54502,9236],{"class":73},[52,54504,54505],{"class":54,"line":80},[52,54506,597],{"emptyLinePlaceholder":171},[52,54508,54509,54511,54513,54515,54517,54519],{"class":54,"line":108},[52,54510,1721],{"class":231},[52,54512,1724],{"class":371},[52,54514,1727],{"class":231},[52,54516,1730],{"class":231},[52,54518,1733],{"class":66},[52,54520,1736],{"class":58},[52,54522,54523],{"class":54,"line":118},[52,54524,1751],{"class":58},[52,54526,54527,54529,54532],{"class":54,"line":594},[52,54528,1756],{"class":58},[52,54530,54531],{"class":73},"'Weave'",[52,54533,2129],{"class":58},[52,54535,54536],{"class":54,"line":600},[52,54537,1773],{"class":58},[52,54539,54540],{"class":54,"line":606},[52,54541,1778],{"class":58},[156,54543,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54545},[54546,54547],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/weave",{"title":54355,"description":54363},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":54554,"title":54555,"body":54556,"category":27760,"componentType":20842,"description":54563,"extension":168,"meta":54748,"navigation":171,"path":54749,"requiresChild":27763,"seo":54750,"stem":54751,"__hash__":54752},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":54557,"toc":54744},[54558,54561,54564,54566,54568,54571,54573,54742],[11,54559,54555],{"id":54560},"webcamtexture",[15,54562,54563],{},"Display a live webcam feed with customizable object-fit modes",[26901,54565],{"component":54555},[23,54567,26905],{"id":21503},[26907,54569],{":props":54570},"[{\"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,54572,26913],{"id":26912},[217,54574,54575,54604,54632,54660,54688],{":tabs":1543},[43,54576,54578],{"className":45,"code":54577,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[31,54579,54580,54588,54596],{"__ignoreMap":48},[52,54581,54582,54584,54586],{"class":54,"line":55},[52,54583,59],{"class":58},[52,54585,63],{"class":62},[52,54587,77],{"class":58},[52,54589,54590,54592,54594],{"class":54,"line":80},[52,54591,83],{"class":58},[52,54593,54555],{"class":62},[52,54595,105],{"class":58},[52,54597,54598,54600,54602],{"class":54,"line":108},[52,54599,121],{"class":58},[52,54601,63],{"class":62},[52,54603,77],{"class":58},[43,54605,54606],{"className":360,"code":54577,"language":362,"meta":48,"style":48},[31,54607,54608,54616,54624],{"__ignoreMap":48},[52,54609,54610,54612,54614],{"class":54,"line":55},[52,54611,59],{"class":58},[52,54613,63],{"class":371},[52,54615,77],{"class":58},[52,54617,54618,54620,54622],{"class":54,"line":80},[52,54619,83],{"class":58},[52,54621,54555],{"class":371},[52,54623,105],{"class":58},[52,54625,54626,54628,54630],{"class":54,"line":108},[52,54627,121],{"class":58},[52,54629,63],{"class":371},[52,54631,77],{"class":58},[43,54633,54634],{"className":2507,"code":54577,"language":2509,"meta":48,"style":48},[31,54635,54636,54644,54652],{"__ignoreMap":48},[52,54637,54638,54640,54642],{"class":54,"line":55},[52,54639,59],{"class":58},[52,54641,63],{"class":371},[52,54643,77],{"class":58},[52,54645,54646,54648,54650],{"class":54,"line":80},[52,54647,83],{"class":58},[52,54649,54555],{"class":371},[52,54651,105],{"class":58},[52,54653,54654,54656,54658],{"class":54,"line":108},[52,54655,121],{"class":58},[52,54657,63],{"class":371},[52,54659,77],{"class":58},[43,54661,54662],{"className":419,"code":54577,"language":420,"meta":48,"style":48},[31,54663,54664,54672,54680],{"__ignoreMap":48},[52,54665,54666,54668,54670],{"class":54,"line":55},[52,54667,59],{"class":58},[52,54669,63],{"class":371},[52,54671,77],{"class":58},[52,54673,54674,54676,54678],{"class":54,"line":80},[52,54675,83],{"class":58},[52,54677,54555],{"class":371},[52,54679,105],{"class":58},[52,54681,54682,54684,54686],{"class":54,"line":108},[52,54683,121],{"class":58},[52,54685,63],{"class":371},[52,54687,77],{"class":58},[43,54689,54691],{"className":222,"code":54690,"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,54692,54693,54703,54707,54721,54725,54734,54738],{"__ignoreMap":48},[52,54694,54695,54697,54699,54701],{"class":54,"line":55},[52,54696,232],{"class":231},[52,54698,9231],{"class":58},[52,54700,238],{"class":231},[52,54702,9236],{"class":73},[52,54704,54705],{"class":54,"line":80},[52,54706,597],{"emptyLinePlaceholder":171},[52,54708,54709,54711,54713,54715,54717,54719],{"class":54,"line":108},[52,54710,1721],{"class":231},[52,54712,1724],{"class":371},[52,54714,1727],{"class":231},[52,54716,1730],{"class":231},[52,54718,1733],{"class":66},[52,54720,1736],{"class":58},[52,54722,54723],{"class":54,"line":118},[52,54724,1751],{"class":58},[52,54726,54727,54729,54732],{"class":54,"line":594},[52,54728,1756],{"class":58},[52,54730,54731],{"class":73},"'WebcamTexture'",[52,54733,2129],{"class":58},[52,54735,54736],{"class":54,"line":600},[52,54737,1773],{"class":58},[52,54739,54740],{"class":54,"line":606},[52,54741,1778],{"class":58},[156,54743,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54745},[54746,54747],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/webcamtexture",{"title":54555,"description":54563},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":54754,"title":54755,"body":54756,"category":27225,"componentType":20848,"description":54763,"extension":168,"meta":55080,"navigation":171,"path":55081,"requiresChild":171,"seo":55082,"stem":55083,"__hash__":55084},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":54757,"toc":55076},[54758,54761,54764,54766,54768,54771,54773,55074],[11,54759,54755],{"id":54760},"zoomblur",[15,54762,54763],{},"Radial zoom blur expanding from a center point",[26901,54765],{"component":54755},[23,54767,26905],{"id":21503},[26907,54769],{":props":54770},"[{\"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,54772,26913],{"id":26912},[217,54774,54775,54831,54890,54946,55004],{":tabs":1543},[43,54776,54778],{"className":45,"code":54777,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,54779,54780,54788,54795,54803,54807,54815,54823],{"__ignoreMap":48},[52,54781,54782,54784,54786],{"class":54,"line":55},[52,54783,59],{"class":58},[52,54785,63],{"class":62},[52,54787,77],{"class":58},[52,54789,54790,54792],{"class":54,"line":80},[52,54791,83],{"class":58},[52,54793,54794],{"class":62},"ZoomBlur\n",[52,54796,54797,54799,54801],{"class":54,"line":108},[52,54798,17870],{"class":66},[52,54800,70],{"class":58},[52,54802,33488],{"class":73},[52,54804,54805],{"class":54,"line":118},[52,54806,26949],{"class":58},[52,54808,54809,54811,54813],{"class":54,"line":594},[52,54810,2213],{"class":58},[52,54812,2216],{"class":62},[52,54814,105],{"class":58},[52,54816,54817,54819,54821],{"class":54,"line":600},[52,54818,2230],{"class":58},[52,54820,54755],{"class":62},[52,54822,77],{"class":58},[52,54824,54825,54827,54829],{"class":54,"line":606},[52,54826,121],{"class":58},[52,54828,63],{"class":62},[52,54830,77],{"class":58},[43,54832,54834],{"className":360,"code":54833,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,54835,54836,54844,54850,54862,54866,54874,54882],{"__ignoreMap":48},[52,54837,54838,54840,54842],{"class":54,"line":55},[52,54839,59],{"class":58},[52,54841,63],{"class":371},[52,54843,77],{"class":58},[52,54845,54846,54848],{"class":54,"line":80},[52,54847,83],{"class":58},[52,54849,54794],{"class":371},[52,54851,54852,54854,54856,54858,54860],{"class":54,"line":108},[52,54853,17981],{"class":66},[52,54855,70],{"class":231},[52,54857,723],{"class":58},[52,54859,13194],{"class":371},[52,54861,729],{"class":58},[52,54863,54864],{"class":54,"line":118},[52,54865,26949],{"class":58},[52,54867,54868,54870,54872],{"class":54,"line":594},[52,54869,2213],{"class":58},[52,54871,2216],{"class":371},[52,54873,105],{"class":58},[52,54875,54876,54878,54880],{"class":54,"line":600},[52,54877,2230],{"class":58},[52,54879,54755],{"class":371},[52,54881,77],{"class":58},[52,54883,54884,54886,54888],{"class":54,"line":606},[52,54885,121],{"class":58},[52,54887,63],{"class":371},[52,54889,77],{"class":58},[43,54891,54892],{"className":2507,"code":54833,"language":2509,"meta":48,"style":48},[31,54893,54894,54902,54908,54918,54922,54930,54938],{"__ignoreMap":48},[52,54895,54896,54898,54900],{"class":54,"line":55},[52,54897,59],{"class":58},[52,54899,63],{"class":371},[52,54901,77],{"class":58},[52,54903,54904,54906],{"class":54,"line":80},[52,54905,83],{"class":58},[52,54907,54794],{"class":371},[52,54909,54910,54912,54914,54916],{"class":54,"line":108},[52,54911,17981],{"class":66},[52,54913,24845],{"class":58},[52,54915,13194],{"class":371},[52,54917,729],{"class":58},[52,54919,54920],{"class":54,"line":118},[52,54921,26949],{"class":58},[52,54923,54924,54926,54928],{"class":54,"line":594},[52,54925,2213],{"class":58},[52,54927,2216],{"class":371},[52,54929,105],{"class":58},[52,54931,54932,54934,54936],{"class":54,"line":600},[52,54933,2230],{"class":58},[52,54935,54755],{"class":371},[52,54937,77],{"class":58},[52,54939,54940,54942,54944],{"class":54,"line":606},[52,54941,121],{"class":58},[52,54943,63],{"class":371},[52,54945,77],{"class":58},[43,54947,54948],{"className":419,"code":54833,"language":420,"meta":48,"style":48},[31,54949,54950,54958,54964,54976,54980,54988,54996],{"__ignoreMap":48},[52,54951,54952,54954,54956],{"class":54,"line":55},[52,54953,59],{"class":58},[52,54955,63],{"class":371},[52,54957,77],{"class":58},[52,54959,54960,54962],{"class":54,"line":80},[52,54961,83],{"class":58},[52,54963,54794],{"class":371},[52,54965,54966,54968,54970,54972,54974],{"class":54,"line":108},[52,54967,17981],{"class":66},[52,54969,70],{"class":231},[52,54971,723],{"class":58},[52,54973,13194],{"class":371},[52,54975,729],{"class":58},[52,54977,54978],{"class":54,"line":118},[52,54979,26949],{"class":58},[52,54981,54982,54984,54986],{"class":54,"line":594},[52,54983,2213],{"class":58},[52,54985,2216],{"class":371},[52,54987,105],{"class":58},[52,54989,54990,54992,54994],{"class":54,"line":600},[52,54991,2230],{"class":58},[52,54993,54755],{"class":371},[52,54995,77],{"class":58},[52,54997,54998,55000,55002],{"class":54,"line":606},[52,54999,121],{"class":58},[52,55001,63],{"class":371},[52,55003,77],{"class":58},[43,55005,55007],{"className":222,"code":55006,"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,55008,55009,55019,55023,55037,55041,55054,55062,55066,55070],{"__ignoreMap":48},[52,55010,55011,55013,55015,55017],{"class":54,"line":55},[52,55012,232],{"class":231},[52,55014,9231],{"class":58},[52,55016,238],{"class":231},[52,55018,9236],{"class":73},[52,55020,55021],{"class":54,"line":80},[52,55022,597],{"emptyLinePlaceholder":171},[52,55024,55025,55027,55029,55031,55033,55035],{"class":54,"line":108},[52,55026,1721],{"class":231},[52,55028,1724],{"class":371},[52,55030,1727],{"class":231},[52,55032,1730],{"class":231},[52,55034,1733],{"class":66},[52,55036,1736],{"class":58},[52,55038,55039],{"class":54,"line":118},[52,55040,1751],{"class":58},[52,55042,55043,55045,55048,55050,55052],{"class":54,"line":594},[52,55044,1756],{"class":58},[52,55046,55047],{"class":73},"'ZoomBlur'",[52,55049,27194],{"class":58},[52,55051,13194],{"class":371},[52,55053,5259],{"class":58},[52,55055,55056,55058,55060],{"class":54,"line":600},[52,55057,4727],{"class":58},[52,55059,2869],{"class":73},[52,55061,2129],{"class":58},[52,55063,55064],{"class":54,"line":606},[52,55065,4744],{"class":58},[52,55067,55068],{"class":54,"line":653},[52,55069,1773],{"class":58},[52,55071,55072],{"class":54,"line":662},[52,55073,1778],{"class":58},[156,55075,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":55077},[55078,55079],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/zoomblur",{"title":54755,"description":54763},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27763,"error":55086},"Not authenticated",{"id":23971,"title":23936,"body":55088,"category":1904,"description":24543,"exclude":167,"extension":168,"forceFramework":167,"icon":23348,"meta":55610,"navigation":171,"path":23935,"seo":55611,"stem":24546,"__hash__":24547},{"type":8,"value":55089,"toc":55604},[55090,55092,55094,55098,55102,55192,55302,55310,55314,55320,55418,55422,55426,55596,55598,55602],[11,55091,23977],{"id":23976},[15,55093,23980],{},[23,55095,55096,23987],{"id":23983},[31,55097,23986],{},[15,55099,23990,55100,23993],{},[31,55101,23986],{},[43,55103,55104],{"className":360,"code":23996,"language":362,"meta":48,"style":48},[31,55105,55106,55110,55120,55124,55136,55142,55156,55176,55184,55188],{"__ignoreMap":48},[52,55107,55108],{"class":54,"line":55},[52,55109,22484],{"class":559},[52,55111,55112,55114,55116,55118],{"class":54,"line":80},[52,55113,232],{"class":231},[52,55115,22191],{"class":58},[52,55117,238],{"class":231},[52,55119,289],{"class":73},[52,55121,55122],{"class":54,"line":108},[52,55123,597],{"emptyLinePlaceholder":171},[52,55125,55126,55128,55130,55132,55134],{"class":54,"line":118},[52,55127,22204],{"class":231},[52,55129,22207],{"class":231},[52,55131,9658],{"class":231},[52,55133,22212],{"class":66},[52,55135,2310],{"class":58},[52,55137,55138,55140],{"class":54,"line":594},[52,55139,2402],{"class":231},[52,55141,2405],{"class":58},[52,55143,55144,55146,55148,55150,55152,55154],{"class":54,"line":600},[52,55145,2213],{"class":58},[52,55147,63],{"class":371},[52,55149,67],{"class":66},[52,55151,70],{"class":231},[52,55153,319],{"class":73},[52,55155,77],{"class":58},[52,55157,55158,55160,55162,55164,55166,55168,55170,55172,55174],{"class":54,"line":606},[52,55159,2476],{"class":58},[52,55161,86],{"class":371},[52,55163,89],{"class":66},[52,55165,70],{"class":231},[52,55167,94],{"class":73},[52,55169,97],{"class":66},[52,55171,70],{"class":231},[52,55173,102],{"class":73},[52,55175,105],{"class":58},[52,55177,55178,55180,55182],{"class":54,"line":653},[52,55179,2491],{"class":58},[52,55181,63],{"class":371},[52,55183,77],{"class":58},[52,55185,55186],{"class":54,"line":662},[52,55187,2500],{"class":58},[52,55189,55190],{"class":54,"line":671},[52,55191,729],{"class":58},[43,55193,55194],{"className":360,"code":24087,"language":362,"meta":48,"style":48},[31,55195,55196,55200,55210,55214,55236,55240,55252,55258,55266,55274,55286,55294,55298],{"__ignoreMap":48},[52,55197,55198],{"class":54,"line":55},[52,55199,24094],{"class":559},[52,55201,55202,55204,55206,55208],{"class":54,"line":80},[52,55203,232],{"class":231},[52,55205,24101],{"class":58},[52,55207,238],{"class":231},[52,55209,24106],{"class":73},[52,55211,55212],{"class":54,"line":108},[52,55213,597],{"emptyLinePlaceholder":171},[52,55215,55216,55218,55220,55222,55224,55226,55228,55230,55232,55234],{"class":54,"line":118},[52,55217,1721],{"class":231},[52,55219,22212],{"class":371},[52,55221,1727],{"class":231},[52,55223,24121],{"class":66},[52,55225,13816],{"class":58},[52,55227,2425],{"class":231},[52,55229,22747],{"class":231},[52,55231,2289],{"class":58},[52,55233,22884],{"class":73},[52,55235,24134],{"class":58},[52,55237,55238],{"class":54,"line":594},[52,55239,597],{"emptyLinePlaceholder":171},[52,55241,55242,55244,55246,55248,55250],{"class":54,"line":600},[52,55243,22204],{"class":231},[52,55245,22207],{"class":231},[52,55247,9658],{"class":231},[52,55249,22623],{"class":66},[52,55251,2310],{"class":58},[52,55253,55254,55256],{"class":54,"line":606},[52,55255,2402],{"class":231},[52,55257,2405],{"class":58},[52,55259,55260,55262,55264],{"class":54,"line":653},[52,55261,2213],{"class":58},[52,55263,10357],{"class":62},[52,55265,77],{"class":58},[52,55267,55268,55270,55272],{"class":54,"line":662},[52,55269,2476],{"class":58},[52,55271,22646],{"class":371},[52,55273,105],{"class":58},[52,55275,55276,55278,55280,55282,55284],{"class":54,"line":671},[52,55277,2476],{"class":58},[52,55279,11],{"class":62},[52,55281,10646],{"class":58},[52,55283,11],{"class":62},[52,55285,77],{"class":58},[52,55287,55288,55290,55292],{"class":54,"line":676},[52,55289,2491],{"class":58},[52,55291,10357],{"class":62},[52,55293,77],{"class":58},[52,55295,55296],{"class":54,"line":682},[52,55297,2500],{"class":58},[52,55299,55300],{"class":54,"line":698},[52,55301,729],{"class":58},[15,55303,55304,24205,55306,24209,55308,24212],{},[31,55305,23986],{},[31,55307,24208],{},[31,55309,14045],{},[23,55311,55312,24219],{"id":24215},[31,55313,24218],{},[15,55315,24222,55316,24225,55318,1540],{},[31,55317,24218],{},[31,55319,24228],{},[43,55321,55322],{"className":360,"code":24231,"language":362,"meta":48,"style":48},[31,55323,55324,55334,55344,55348,55360,55370,55374,55380,55394,55402,55410,55414],{"__ignoreMap":48},[52,55325,55326,55328,55330,55332],{"class":54,"line":55},[52,55327,232],{"class":231},[52,55329,24240],{"class":58},[52,55331,238],{"class":231},[52,55333,24245],{"class":73},[52,55335,55336,55338,55340,55342],{"class":54,"line":80},[52,55337,232],{"class":231},[52,55339,22191],{"class":58},[52,55341,238],{"class":231},[52,55343,289],{"class":73},[52,55345,55346],{"class":54,"line":108},[52,55347,597],{"emptyLinePlaceholder":171},[52,55349,55350,55352,55354,55356,55358],{"class":54,"line":118},[52,55351,22204],{"class":231},[52,55353,22207],{"class":231},[52,55355,9658],{"class":231},[52,55357,22212],{"class":66},[52,55359,2310],{"class":58},[52,55361,55362,55364,55366,55368],{"class":54,"line":594},[52,55363,23271],{"class":231},[52,55365,24278],{"class":58},[52,55367,23283],{"class":231},[52,55369,23286],{"class":371},[52,55371,55372],{"class":54,"line":600},[52,55373,597],{"emptyLinePlaceholder":171},[52,55375,55376,55378],{"class":54,"line":606},[52,55377,2402],{"class":231},[52,55379,2405],{"class":58},[52,55381,55382,55384,55386,55388,55390,55392],{"class":54,"line":653},[52,55383,2213],{"class":58},[52,55385,63],{"class":371},[52,55387,67],{"class":66},[52,55389,70],{"class":231},[52,55391,319],{"class":73},[52,55393,77],{"class":58},[52,55395,55396,55398,55400],{"class":54,"line":662},[52,55397,2476],{"class":58},[52,55399,86],{"class":371},[52,55401,105],{"class":58},[52,55403,55404,55406,55408],{"class":54,"line":671},[52,55405,2491],{"class":58},[52,55407,63],{"class":371},[52,55409,77],{"class":58},[52,55411,55412],{"class":54,"line":676},[52,55413,2500],{"class":58},[52,55415,55416],{"class":54,"line":682},[52,55417,729],{"class":58},[23,55419,55420,24219],{"id":24333},[31,55421,24336],{},[15,55423,24339,55424,24342],{},[31,55425,24336],{},[43,55427,55428],{"className":360,"code":24345,"language":362,"meta":48,"style":48},[31,55429,55430,55440,55450,55454,55466,55490,55494,55510,55514,55520,55534,55546,55560,55568,55576,55580,55588,55592],{"__ignoreMap":48},[52,55431,55432,55434,55436,55438],{"class":54,"line":55},[52,55433,232],{"class":231},[52,55435,24354],{"class":58},[52,55437,238],{"class":231},[52,55439,2650],{"class":73},[52,55441,55442,55444,55446,55448],{"class":54,"line":80},[52,55443,232],{"class":231},[52,55445,22191],{"class":58},[52,55447,238],{"class":231},[52,55449,289],{"class":73},[52,55451,55452],{"class":54,"line":108},[52,55453,597],{"emptyLinePlaceholder":171},[52,55455,55456,55458,55460,55462,55464],{"class":54,"line":118},[52,55457,22204],{"class":231},[52,55459,22207],{"class":231},[52,55461,9658],{"class":231},[52,55463,22212],{"class":66},[52,55465,2310],{"class":58},[52,55467,55468,55470,55472,55474,55476,55478,55480,55482,55484,55486,55488],{"class":54,"line":594},[52,55469,2368],{"class":231},[52,55471,2371],{"class":58},[52,55473,23216],{"class":371},[52,55475,1881],{"class":58},[52,55477,23221],{"class":371},[52,55479,2382],{"class":58},[52,55481,70],{"class":231},[52,55483,2681],{"class":66},[52,55485,2289],{"class":58},[52,55487,2292],{"class":371},[52,55489,2295],{"class":58},[52,55491,55492],{"class":54,"line":600},[52,55493,597],{"emptyLinePlaceholder":171},[52,55495,55496,55498,55500,55502,55504,55506,55508],{"class":54,"line":606},[52,55497,14425],{"class":66},[52,55499,13816],{"class":58},[52,55501,2425],{"class":231},[52,55503,24423],{"class":66},[52,55505,2289],{"class":58},[52,55507,1996],{"class":371},[52,55509,24134],{"class":58},[52,55511,55512],{"class":54,"line":653},[52,55513,597],{"emptyLinePlaceholder":171},[52,55515,55516,55518],{"class":54,"line":662},[52,55517,2402],{"class":231},[52,55519,2405],{"class":58},[52,55521,55522,55524,55526,55528,55530,55532],{"class":54,"line":671},[52,55523,2213],{"class":58},[52,55525,8286],{"class":62},[52,55527,67],{"class":66},[52,55529,70],{"class":231},[52,55531,319],{"class":73},[52,55533,77],{"class":58},[52,55535,55536,55538,55540,55542,55544],{"class":54,"line":676},[52,55537,24458],{"class":58},[52,55539,23216],{"class":66},[52,55541,2735],{"class":58},[52,55543,24465],{"class":231},[52,55545,2405],{"class":58},[52,55547,55548,55550,55552,55554,55556,55558],{"class":54,"line":682},[52,55549,8526],{"class":58},[52,55551,63],{"class":371},[52,55553,67],{"class":66},[52,55555,70],{"class":231},[52,55557,319],{"class":73},[52,55559,77],{"class":58},[52,55561,55562,55564,55566],{"class":54,"line":698},[52,55563,24486],{"class":58},[52,55565,86],{"class":371},[52,55567,105],{"class":58},[52,55569,55570,55572,55574],{"class":54,"line":707},[52,55571,24495],{"class":58},[52,55573,63],{"class":371},[52,55575,77],{"class":58},[52,55577,55578],{"class":54,"line":2327},[52,55579,24504],{"class":58},[52,55581,55582,55584,55586],{"class":54,"line":7369},[52,55583,2491],{"class":58},[52,55585,8286],{"class":62},[52,55587,77],{"class":58},[52,55589,55590],{"class":54,"line":7379},[52,55591,2500],{"class":58},[52,55593,55594],{"class":54,"line":7390},[52,55595,729],{"class":58},[23,55597,24524],{"id":24523},[15,55599,24527,55600,24530],{},[31,55601,24336],{},[156,55603,24533],{},{"title":48,"searchDepth":80,"depth":80,"links":55605},[55606,55607,55608,55609],{"id":23983,"depth":80,"text":24537},{"id":24215,"depth":80,"text":24539},{"id":24333,"depth":80,"text":24541},{"id":24523,"depth":80,"text":24524},{},{"title":23936,"description":24543},1776222958717]