[{"data":1,"prerenderedAt":58369},["ShallowReactive",2],{"guide-docs":3,"component-docs":26888,"pro-status-anon":58175,"doc-/docs/components/brickpattern":58177,"doc-surr-/docs/components/brickpattern":58366},[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.5,\"originY\":0.5,\"reach\":0.6,\"smoothing\":0.3,\"momentum\":0.45},\"edgeSoftness\":0.15,\"fresnel\":0.25,\"fresnelColor\":\"#96abf2\",\"fresnelSoftness\":0.15,\"innerZoom\":1.5,\"refraction\":1.38,\"shape\":{\"type\":\"circleSDF\",\"radius\":0.5},\"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","HskuXyyFXmnBQuvvlu2LkvFFNlwcZrBJMwQLmKjQJJI",{"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,28100,28300,28500,28833,29033,29310,29643,29919,30195,30394,30594,30899,31175,31465,31665,31997,32197,32473,32766,33059,33336,33716,33970,34170,34370,34703,34979,35222,35591,35867,36112,36386,36586,36862,37062,37338,37631,37831,38107,38307,38583,38783,39057,39388,39720,40051,40307,40577,40822,41198,41469,41745,41945,42221,42421,42691,42967,43222,43554,43752,44130,44330,44605,44805,45098,45374,45650,45926,46181,46559,46851,47184,47516,47772,48104,48396,48596,48841,49172,49448,49828,50028,50273,50529,50785,51061,51305,51637,51837,52129,52329,52604,52804,53051,53345,53544,53876,54199,54444,54720,54920,55252,55528,55820,56153,56353,56767,56967,57243,57443,57643,57843],{"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":28094,"componentType":20848,"description":27777,"extension":168,"meta":28095,"navigation":171,"path":28096,"requiresChild":171,"seo":28097,"stem":28098,"__hash__":28099},"components/docs/components/BarShift.md","BarShift",{"type":8,"value":27771,"toc":28090},[27772,27775,27778,27780,27782,27785,27787,28088],[11,27773,27769],{"id":27774},"barshift",[15,27776,27777],{},"Slices content into parallel bars, each offset independently for a fractured or glitch-like effect",[26901,27779],{"component":27769},[23,27781,26905],{"id":21503},[26907,27783],{":props":27784},"[{\"name\":\"count\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of bars across the longest viewport dimension\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Maximum displacement per bar\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Randomization seed for per-bar offset variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed — each bar drifts at its own rate and direction\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,27786,26913],{"id":26912},[217,27788,27789,27845,27904,27960,28018],{":tabs":1543},[43,27790,27792],{"className":45,"code":27791,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBarShift\n :intensity=\"0.15\"\n >\n \u003CCircle />\n \u003C/BarShift>\n\u003C/Shader>\n",[31,27793,27794,27802,27809,27817,27821,27829,27837],{"__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],{"class":54,"line":80},[52,27805,83],{"class":58},[52,27807,27808],{"class":62},"BarShift\n",[52,27810,27811,27813,27815],{"class":54,"line":108},[52,27812,17870],{"class":66},[52,27814,70],{"class":58},[52,27816,15608],{"class":73},[52,27818,27819],{"class":54,"line":118},[52,27820,26949],{"class":58},[52,27822,27823,27825,27827],{"class":54,"line":594},[52,27824,2213],{"class":58},[52,27826,2216],{"class":62},[52,27828,105],{"class":58},[52,27830,27831,27833,27835],{"class":54,"line":600},[52,27832,2230],{"class":58},[52,27834,27769],{"class":62},[52,27836,77],{"class":58},[52,27838,27839,27841,27843],{"class":54,"line":606},[52,27840,121],{"class":58},[52,27842,63],{"class":62},[52,27844,77],{"class":58},[43,27846,27848],{"className":360,"code":27847,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBarShift\n intensity={0.15}\n >\n \u003CCircle />\n \u003C/BarShift>\n\u003C/Shader>\n",[31,27849,27850,27858,27864,27876,27880,27888,27896],{"__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],{"class":54,"line":80},[52,27861,83],{"class":58},[52,27863,27808],{"class":371},[52,27865,27866,27868,27870,27872,27874],{"class":54,"line":108},[52,27867,17981],{"class":66},[52,27869,70],{"class":231},[52,27871,723],{"class":58},[52,27873,15692],{"class":371},[52,27875,729],{"class":58},[52,27877,27878],{"class":54,"line":118},[52,27879,26949],{"class":58},[52,27881,27882,27884,27886],{"class":54,"line":594},[52,27883,2213],{"class":58},[52,27885,2216],{"class":371},[52,27887,105],{"class":58},[52,27889,27890,27892,27894],{"class":54,"line":600},[52,27891,2230],{"class":58},[52,27893,27769],{"class":371},[52,27895,77],{"class":58},[52,27897,27898,27900,27902],{"class":54,"line":606},[52,27899,121],{"class":58},[52,27901,63],{"class":371},[52,27903,77],{"class":58},[43,27905,27906],{"className":2507,"code":27847,"language":2509,"meta":48,"style":48},[31,27907,27908,27916,27922,27932,27936,27944,27952],{"__ignoreMap":48},[52,27909,27910,27912,27914],{"class":54,"line":55},[52,27911,59],{"class":58},[52,27913,63],{"class":371},[52,27915,77],{"class":58},[52,27917,27918,27920],{"class":54,"line":80},[52,27919,83],{"class":58},[52,27921,27808],{"class":371},[52,27923,27924,27926,27928,27930],{"class":54,"line":108},[52,27925,17981],{"class":66},[52,27927,24845],{"class":58},[52,27929,15692],{"class":371},[52,27931,729],{"class":58},[52,27933,27934],{"class":54,"line":118},[52,27935,26949],{"class":58},[52,27937,27938,27940,27942],{"class":54,"line":594},[52,27939,2213],{"class":58},[52,27941,2216],{"class":371},[52,27943,105],{"class":58},[52,27945,27946,27948,27950],{"class":54,"line":600},[52,27947,2230],{"class":58},[52,27949,27769],{"class":371},[52,27951,77],{"class":58},[52,27953,27954,27956,27958],{"class":54,"line":606},[52,27955,121],{"class":58},[52,27957,63],{"class":371},[52,27959,77],{"class":58},[43,27961,27962],{"className":419,"code":27847,"language":420,"meta":48,"style":48},[31,27963,27964,27972,27978,27990,27994,28002,28010],{"__ignoreMap":48},[52,27965,27966,27968,27970],{"class":54,"line":55},[52,27967,59],{"class":58},[52,27969,63],{"class":371},[52,27971,77],{"class":58},[52,27973,27974,27976],{"class":54,"line":80},[52,27975,83],{"class":58},[52,27977,27808],{"class":371},[52,27979,27980,27982,27984,27986,27988],{"class":54,"line":108},[52,27981,17981],{"class":66},[52,27983,70],{"class":231},[52,27985,723],{"class":58},[52,27987,15692],{"class":371},[52,27989,729],{"class":58},[52,27991,27992],{"class":54,"line":118},[52,27993,26949],{"class":58},[52,27995,27996,27998,28000],{"class":54,"line":594},[52,27997,2213],{"class":58},[52,27999,2216],{"class":371},[52,28001,105],{"class":58},[52,28003,28004,28006,28008],{"class":54,"line":600},[52,28005,2230],{"class":58},[52,28007,27769],{"class":371},[52,28009,77],{"class":58},[52,28011,28012,28014,28016],{"class":54,"line":606},[52,28013,121],{"class":58},[52,28015,63],{"class":371},[52,28017,77],{"class":58},[43,28019,28021],{"className":222,"code":28020,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BarShift', props: { intensity: 0.15 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,28022,28023,28033,28037,28051,28055,28068,28076,28080,28084],{"__ignoreMap":48},[52,28024,28025,28027,28029,28031],{"class":54,"line":55},[52,28026,232],{"class":231},[52,28028,9231],{"class":58},[52,28030,238],{"class":231},[52,28032,9236],{"class":73},[52,28034,28035],{"class":54,"line":80},[52,28036,597],{"emptyLinePlaceholder":171},[52,28038,28039,28041,28043,28045,28047,28049],{"class":54,"line":108},[52,28040,1721],{"class":231},[52,28042,1724],{"class":371},[52,28044,1727],{"class":231},[52,28046,1730],{"class":231},[52,28048,1733],{"class":66},[52,28050,1736],{"class":58},[52,28052,28053],{"class":54,"line":118},[52,28054,1751],{"class":58},[52,28056,28057,28059,28062,28064,28066],{"class":54,"line":594},[52,28058,1756],{"class":58},[52,28060,28061],{"class":73},"'BarShift'",[52,28063,27194],{"class":58},[52,28065,15692],{"class":371},[52,28067,5259],{"class":58},[52,28069,28070,28072,28074],{"class":54,"line":600},[52,28071,4727],{"class":58},[52,28073,2869],{"class":73},[52,28075,2129],{"class":58},[52,28077,28078],{"class":54,"line":606},[52,28079,4744],{"class":58},[52,28081,28082],{"class":54,"line":653},[52,28083,1773],{"class":58},[52,28085,28086],{"class":54,"line":662},[52,28087,1778],{"class":58},[156,28089,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28091},[28092,28093],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Distortions",{},"/docs/components/barshift",{"title":27769,"description":27777},"docs/components/BarShift","k2ZFmJ2Ru3dRFHFXNoNG5TeCpupGmkRRcmQzHeK6EiM",{"id":28101,"title":28102,"body":28103,"category":27760,"componentType":20842,"description":28110,"extension":168,"meta":28295,"navigation":171,"path":28296,"requiresChild":27763,"seo":28297,"stem":28298,"__hash__":28299},"components/docs/components/Beam.md","Beam",{"type":8,"value":28104,"toc":28291},[28105,28108,28111,28113,28115,28118,28120,28289],[11,28106,28102],{"id":28107},"beam",[15,28109,28110],{},"A beam of light from one point to another.",[26901,28112],{"component":28102},[23,28114,26905],{"id":21503},[26907,28116],{":props":28117},"[{\"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,28119,26913],{"id":26912},[217,28121,28122,28151,28179,28207,28235],{":tabs":1543},[43,28123,28125],{"className":45,"code":28124,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBeam />\n\u003C/Shader>\n",[31,28126,28127,28135,28143],{"__ignoreMap":48},[52,28128,28129,28131,28133],{"class":54,"line":55},[52,28130,59],{"class":58},[52,28132,63],{"class":62},[52,28134,77],{"class":58},[52,28136,28137,28139,28141],{"class":54,"line":80},[52,28138,83],{"class":58},[52,28140,28102],{"class":62},[52,28142,105],{"class":58},[52,28144,28145,28147,28149],{"class":54,"line":108},[52,28146,121],{"class":58},[52,28148,63],{"class":62},[52,28150,77],{"class":58},[43,28152,28153],{"className":360,"code":28124,"language":362,"meta":48,"style":48},[31,28154,28155,28163,28171],{"__ignoreMap":48},[52,28156,28157,28159,28161],{"class":54,"line":55},[52,28158,59],{"class":58},[52,28160,63],{"class":371},[52,28162,77],{"class":58},[52,28164,28165,28167,28169],{"class":54,"line":80},[52,28166,83],{"class":58},[52,28168,28102],{"class":371},[52,28170,105],{"class":58},[52,28172,28173,28175,28177],{"class":54,"line":108},[52,28174,121],{"class":58},[52,28176,63],{"class":371},[52,28178,77],{"class":58},[43,28180,28181],{"className":2507,"code":28124,"language":2509,"meta":48,"style":48},[31,28182,28183,28191,28199],{"__ignoreMap":48},[52,28184,28185,28187,28189],{"class":54,"line":55},[52,28186,59],{"class":58},[52,28188,63],{"class":371},[52,28190,77],{"class":58},[52,28192,28193,28195,28197],{"class":54,"line":80},[52,28194,83],{"class":58},[52,28196,28102],{"class":371},[52,28198,105],{"class":58},[52,28200,28201,28203,28205],{"class":54,"line":108},[52,28202,121],{"class":58},[52,28204,63],{"class":371},[52,28206,77],{"class":58},[43,28208,28209],{"className":419,"code":28124,"language":420,"meta":48,"style":48},[31,28210,28211,28219,28227],{"__ignoreMap":48},[52,28212,28213,28215,28217],{"class":54,"line":55},[52,28214,59],{"class":58},[52,28216,63],{"class":371},[52,28218,77],{"class":58},[52,28220,28221,28223,28225],{"class":54,"line":80},[52,28222,83],{"class":58},[52,28224,28102],{"class":371},[52,28226,105],{"class":58},[52,28228,28229,28231,28233],{"class":54,"line":108},[52,28230,121],{"class":58},[52,28232,63],{"class":371},[52,28234,77],{"class":58},[43,28236,28238],{"className":222,"code":28237,"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,28239,28240,28250,28254,28268,28272,28281,28285],{"__ignoreMap":48},[52,28241,28242,28244,28246,28248],{"class":54,"line":55},[52,28243,232],{"class":231},[52,28245,9231],{"class":58},[52,28247,238],{"class":231},[52,28249,9236],{"class":73},[52,28251,28252],{"class":54,"line":80},[52,28253,597],{"emptyLinePlaceholder":171},[52,28255,28256,28258,28260,28262,28264,28266],{"class":54,"line":108},[52,28257,1721],{"class":231},[52,28259,1724],{"class":371},[52,28261,1727],{"class":231},[52,28263,1730],{"class":231},[52,28265,1733],{"class":66},[52,28267,1736],{"class":58},[52,28269,28270],{"class":54,"line":118},[52,28271,1751],{"class":58},[52,28273,28274,28276,28279],{"class":54,"line":594},[52,28275,1756],{"class":58},[52,28277,28278],{"class":73},"'Beam'",[52,28280,2129],{"class":58},[52,28282,28283],{"class":54,"line":600},[52,28284,1773],{"class":58},[52,28286,28287],{"class":54,"line":606},[52,28288,1778],{"class":58},[156,28290,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":28292},[28293,28294],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/beam",{"title":28102,"description":28110},"docs/components/Beam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":28301,"title":28302,"body":28303,"category":27760,"componentType":20842,"description":28310,"extension":168,"meta":28495,"navigation":171,"path":28496,"requiresChild":27763,"seo":28497,"stem":28498,"__hash__":28499},"components/docs/components/Blob.md","Blob",{"type":8,"value":28304,"toc":28491},[28305,28308,28311,28313,28315,28318,28320,28489],[11,28306,28302],{"id":28307},"blob",[15,28309,28310],{},"Organic animated blob with 3D lighting and gradients",[26901,28312],{"component":28302},[23,28314,26905],{"id":21503},[26907,28316],{":props":28317},"[{\"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,28319,26913],{"id":26912},[217,28321,28322,28351,28379,28407,28435],{":tabs":1543},[43,28323,28325],{"className":45,"code":28324,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlob />\n\u003C/Shader>\n",[31,28326,28327,28335,28343],{"__ignoreMap":48},[52,28328,28329,28331,28333],{"class":54,"line":55},[52,28330,59],{"class":58},[52,28332,63],{"class":62},[52,28334,77],{"class":58},[52,28336,28337,28339,28341],{"class":54,"line":80},[52,28338,83],{"class":58},[52,28340,28302],{"class":62},[52,28342,105],{"class":58},[52,28344,28345,28347,28349],{"class":54,"line":108},[52,28346,121],{"class":58},[52,28348,63],{"class":62},[52,28350,77],{"class":58},[43,28352,28353],{"className":360,"code":28324,"language":362,"meta":48,"style":48},[31,28354,28355,28363,28371],{"__ignoreMap":48},[52,28356,28357,28359,28361],{"class":54,"line":55},[52,28358,59],{"class":58},[52,28360,63],{"class":371},[52,28362,77],{"class":58},[52,28364,28365,28367,28369],{"class":54,"line":80},[52,28366,83],{"class":58},[52,28368,28302],{"class":371},[52,28370,105],{"class":58},[52,28372,28373,28375,28377],{"class":54,"line":108},[52,28374,121],{"class":58},[52,28376,63],{"class":371},[52,28378,77],{"class":58},[43,28380,28381],{"className":2507,"code":28324,"language":2509,"meta":48,"style":48},[31,28382,28383,28391,28399],{"__ignoreMap":48},[52,28384,28385,28387,28389],{"class":54,"line":55},[52,28386,59],{"class":58},[52,28388,63],{"class":371},[52,28390,77],{"class":58},[52,28392,28393,28395,28397],{"class":54,"line":80},[52,28394,83],{"class":58},[52,28396,28302],{"class":371},[52,28398,105],{"class":58},[52,28400,28401,28403,28405],{"class":54,"line":108},[52,28402,121],{"class":58},[52,28404,63],{"class":371},[52,28406,77],{"class":58},[43,28408,28409],{"className":419,"code":28324,"language":420,"meta":48,"style":48},[31,28410,28411,28419,28427],{"__ignoreMap":48},[52,28412,28413,28415,28417],{"class":54,"line":55},[52,28414,59],{"class":58},[52,28416,63],{"class":371},[52,28418,77],{"class":58},[52,28420,28421,28423,28425],{"class":54,"line":80},[52,28422,83],{"class":58},[52,28424,28302],{"class":371},[52,28426,105],{"class":58},[52,28428,28429,28431,28433],{"class":54,"line":108},[52,28430,121],{"class":58},[52,28432,63],{"class":371},[52,28434,77],{"class":58},[43,28436,28438],{"className":222,"code":28437,"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,28439,28440,28450,28454,28468,28472,28481,28485],{"__ignoreMap":48},[52,28441,28442,28444,28446,28448],{"class":54,"line":55},[52,28443,232],{"class":231},[52,28445,9231],{"class":58},[52,28447,238],{"class":231},[52,28449,9236],{"class":73},[52,28451,28452],{"class":54,"line":80},[52,28453,597],{"emptyLinePlaceholder":171},[52,28455,28456,28458,28460,28462,28464,28466],{"class":54,"line":108},[52,28457,1721],{"class":231},[52,28459,1724],{"class":371},[52,28461,1727],{"class":231},[52,28463,1730],{"class":231},[52,28465,1733],{"class":66},[52,28467,1736],{"class":58},[52,28469,28470],{"class":54,"line":118},[52,28471,1751],{"class":58},[52,28473,28474,28476,28479],{"class":54,"line":594},[52,28475,1756],{"class":58},[52,28477,28478],{"class":73},"'Blob'",[52,28480,2129],{"class":58},[52,28482,28483],{"class":54,"line":600},[52,28484,1773],{"class":58},[52,28486,28487],{"class":54,"line":606},[52,28488,1778],{"class":58},[156,28490,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":28492},[28493,28494],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/blob",{"title":28302,"description":28310},"docs/components/Blob","2a5XrgmcJxcBLcEQkxs8e3ZaxmxCERp56Moc00FmMUE",{"id":28501,"title":9486,"body":28502,"category":27225,"componentType":20848,"description":28509,"extension":168,"meta":28828,"navigation":171,"path":28829,"requiresChild":171,"seo":28830,"stem":28831,"__hash__":28832},"components/docs/components/Blur.md",{"type":8,"value":28503,"toc":28824},[28504,28507,28510,28512,28514,28517,28519,28822],[11,28505,9486],{"id":28506},"blur",[15,28508,28509],{},"A simple Gaussian blur effect",[26901,28511],{"component":9486},[23,28513,26905],{"id":21503},[26907,28515],{":props":28516},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,28518,26913],{"id":26912},[217,28520,28521,28578,28638,28694,28752],{":tabs":1543},[43,28522,28524],{"className":45,"code":28523,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28525,28526,28534,28541,28550,28554,28562,28570],{"__ignoreMap":48},[52,28527,28528,28530,28532],{"class":54,"line":55},[52,28529,59],{"class":58},[52,28531,63],{"class":62},[52,28533,77],{"class":58},[52,28535,28536,28538],{"class":54,"line":80},[52,28537,83],{"class":58},[52,28539,28540],{"class":62},"Blur\n",[52,28542,28543,28545,28547],{"class":54,"line":108},[52,28544,17870],{"class":66},[52,28546,70],{"class":58},[52,28548,28549],{"class":73},"\"50\"\n",[52,28551,28552],{"class":54,"line":118},[52,28553,26949],{"class":58},[52,28555,28556,28558,28560],{"class":54,"line":594},[52,28557,2213],{"class":58},[52,28559,2216],{"class":62},[52,28561,105],{"class":58},[52,28563,28564,28566,28568],{"class":54,"line":600},[52,28565,2230],{"class":58},[52,28567,9486],{"class":62},[52,28569,77],{"class":58},[52,28571,28572,28574,28576],{"class":54,"line":606},[52,28573,121],{"class":58},[52,28575,63],{"class":62},[52,28577,77],{"class":58},[43,28579,28581],{"className":360,"code":28580,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28582,28583,28591,28597,28610,28614,28622,28630],{"__ignoreMap":48},[52,28584,28585,28587,28589],{"class":54,"line":55},[52,28586,59],{"class":58},[52,28588,63],{"class":371},[52,28590,77],{"class":58},[52,28592,28593,28595],{"class":54,"line":80},[52,28594,83],{"class":58},[52,28596,28540],{"class":371},[52,28598,28599,28601,28603,28605,28608],{"class":54,"line":108},[52,28600,17981],{"class":66},[52,28602,70],{"class":231},[52,28604,723],{"class":58},[52,28606,28607],{"class":371},"50",[52,28609,729],{"class":58},[52,28611,28612],{"class":54,"line":118},[52,28613,26949],{"class":58},[52,28615,28616,28618,28620],{"class":54,"line":594},[52,28617,2213],{"class":58},[52,28619,2216],{"class":371},[52,28621,105],{"class":58},[52,28623,28624,28626,28628],{"class":54,"line":600},[52,28625,2230],{"class":58},[52,28627,9486],{"class":371},[52,28629,77],{"class":58},[52,28631,28632,28634,28636],{"class":54,"line":606},[52,28633,121],{"class":58},[52,28635,63],{"class":371},[52,28637,77],{"class":58},[43,28639,28640],{"className":2507,"code":28580,"language":2509,"meta":48,"style":48},[31,28641,28642,28650,28656,28666,28670,28678,28686],{"__ignoreMap":48},[52,28643,28644,28646,28648],{"class":54,"line":55},[52,28645,59],{"class":58},[52,28647,63],{"class":371},[52,28649,77],{"class":58},[52,28651,28652,28654],{"class":54,"line":80},[52,28653,83],{"class":58},[52,28655,28540],{"class":371},[52,28657,28658,28660,28662,28664],{"class":54,"line":108},[52,28659,17981],{"class":66},[52,28661,24845],{"class":58},[52,28663,28607],{"class":371},[52,28665,729],{"class":58},[52,28667,28668],{"class":54,"line":118},[52,28669,26949],{"class":58},[52,28671,28672,28674,28676],{"class":54,"line":594},[52,28673,2213],{"class":58},[52,28675,2216],{"class":371},[52,28677,105],{"class":58},[52,28679,28680,28682,28684],{"class":54,"line":600},[52,28681,2230],{"class":58},[52,28683,9486],{"class":371},[52,28685,77],{"class":58},[52,28687,28688,28690,28692],{"class":54,"line":606},[52,28689,121],{"class":58},[52,28691,63],{"class":371},[52,28693,77],{"class":58},[43,28695,28696],{"className":419,"code":28580,"language":420,"meta":48,"style":48},[31,28697,28698,28706,28712,28724,28728,28736,28744],{"__ignoreMap":48},[52,28699,28700,28702,28704],{"class":54,"line":55},[52,28701,59],{"class":58},[52,28703,63],{"class":371},[52,28705,77],{"class":58},[52,28707,28708,28710],{"class":54,"line":80},[52,28709,83],{"class":58},[52,28711,28540],{"class":371},[52,28713,28714,28716,28718,28720,28722],{"class":54,"line":108},[52,28715,17981],{"class":66},[52,28717,70],{"class":231},[52,28719,723],{"class":58},[52,28721,28607],{"class":371},[52,28723,729],{"class":58},[52,28725,28726],{"class":54,"line":118},[52,28727,26949],{"class":58},[52,28729,28730,28732,28734],{"class":54,"line":594},[52,28731,2213],{"class":58},[52,28733,2216],{"class":371},[52,28735,105],{"class":58},[52,28737,28738,28740,28742],{"class":54,"line":600},[52,28739,2230],{"class":58},[52,28741,9486],{"class":371},[52,28743,77],{"class":58},[52,28745,28746,28748,28750],{"class":54,"line":606},[52,28747,121],{"class":58},[52,28749,63],{"class":371},[52,28751,77],{"class":58},[43,28753,28755],{"className":222,"code":28754,"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,28756,28757,28767,28771,28785,28789,28802,28810,28814,28818],{"__ignoreMap":48},[52,28758,28759,28761,28763,28765],{"class":54,"line":55},[52,28760,232],{"class":231},[52,28762,9231],{"class":58},[52,28764,238],{"class":231},[52,28766,9236],{"class":73},[52,28768,28769],{"class":54,"line":80},[52,28770,597],{"emptyLinePlaceholder":171},[52,28772,28773,28775,28777,28779,28781,28783],{"class":54,"line":108},[52,28774,1721],{"class":231},[52,28776,1724],{"class":371},[52,28778,1727],{"class":231},[52,28780,1730],{"class":231},[52,28782,1733],{"class":66},[52,28784,1736],{"class":58},[52,28786,28787],{"class":54,"line":118},[52,28788,1751],{"class":58},[52,28790,28791,28793,28796,28798,28800],{"class":54,"line":594},[52,28792,1756],{"class":58},[52,28794,28795],{"class":73},"'Blur'",[52,28797,27194],{"class":58},[52,28799,28607],{"class":371},[52,28801,5259],{"class":58},[52,28803,28804,28806,28808],{"class":54,"line":600},[52,28805,4727],{"class":58},[52,28807,2869],{"class":73},[52,28809,2129],{"class":58},[52,28811,28812],{"class":54,"line":606},[52,28813,4744],{"class":58},[52,28815,28816],{"class":54,"line":653},[52,28817,1773],{"class":58},[52,28819,28820],{"class":54,"line":662},[52,28821,1778],{"class":58},[156,28823,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28825},[28826,28827],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/blur",{"title":9486,"description":28509},"docs/components/Blur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":28834,"title":28835,"body":28836,"category":27760,"componentType":20842,"description":28843,"extension":168,"meta":29028,"navigation":171,"path":29029,"requiresChild":27763,"seo":29030,"stem":29031,"__hash__":29032},"components/docs/components/BrickPattern.md","BrickPattern",{"type":8,"value":28837,"toc":29024},[28838,28841,28844,28846,28848,28851,28853,29022],[11,28839,28835],{"id":28840},"brickpattern",[15,28842,28843],{},"Classic brick wall pattern with alternating rows and mortar gaps",[26901,28845],{"component":28835},[23,28847,26905],{"id":21503},[26907,28849],{":props":28850},"[{\"name\":\"colorBrick\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Brick color\"},{\"name\":\"colorMortar\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Mortar / gap color\"},{\"name\":\"cellsX\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of bricks per row\"},{\"name\":\"cellsY\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of brick rows\"},{\"name\":\"mortar\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Width of mortar gaps — equal pixel thickness in both directions\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle in degrees\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Static horizontal offset — shifts the brick pattern without animating\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How much each row's speed varies — at high values rows move at different speeds and directions\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for per-row speed variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,28852,26913],{"id":26912},[217,28854,28855,28884,28912,28940,28968],{":tabs":1543},[43,28856,28858],{"className":45,"code":28857,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBrickPattern />\n\u003C/Shader>\n",[31,28859,28860,28868,28876],{"__ignoreMap":48},[52,28861,28862,28864,28866],{"class":54,"line":55},[52,28863,59],{"class":58},[52,28865,63],{"class":62},[52,28867,77],{"class":58},[52,28869,28870,28872,28874],{"class":54,"line":80},[52,28871,83],{"class":58},[52,28873,28835],{"class":62},[52,28875,105],{"class":58},[52,28877,28878,28880,28882],{"class":54,"line":108},[52,28879,121],{"class":58},[52,28881,63],{"class":62},[52,28883,77],{"class":58},[43,28885,28886],{"className":360,"code":28857,"language":362,"meta":48,"style":48},[31,28887,28888,28896,28904],{"__ignoreMap":48},[52,28889,28890,28892,28894],{"class":54,"line":55},[52,28891,59],{"class":58},[52,28893,63],{"class":371},[52,28895,77],{"class":58},[52,28897,28898,28900,28902],{"class":54,"line":80},[52,28899,83],{"class":58},[52,28901,28835],{"class":371},[52,28903,105],{"class":58},[52,28905,28906,28908,28910],{"class":54,"line":108},[52,28907,121],{"class":58},[52,28909,63],{"class":371},[52,28911,77],{"class":58},[43,28913,28914],{"className":2507,"code":28857,"language":2509,"meta":48,"style":48},[31,28915,28916,28924,28932],{"__ignoreMap":48},[52,28917,28918,28920,28922],{"class":54,"line":55},[52,28919,59],{"class":58},[52,28921,63],{"class":371},[52,28923,77],{"class":58},[52,28925,28926,28928,28930],{"class":54,"line":80},[52,28927,83],{"class":58},[52,28929,28835],{"class":371},[52,28931,105],{"class":58},[52,28933,28934,28936,28938],{"class":54,"line":108},[52,28935,121],{"class":58},[52,28937,63],{"class":371},[52,28939,77],{"class":58},[43,28941,28942],{"className":419,"code":28857,"language":420,"meta":48,"style":48},[31,28943,28944,28952,28960],{"__ignoreMap":48},[52,28945,28946,28948,28950],{"class":54,"line":55},[52,28947,59],{"class":58},[52,28949,63],{"class":371},[52,28951,77],{"class":58},[52,28953,28954,28956,28958],{"class":54,"line":80},[52,28955,83],{"class":58},[52,28957,28835],{"class":371},[52,28959,105],{"class":58},[52,28961,28962,28964,28966],{"class":54,"line":108},[52,28963,121],{"class":58},[52,28965,63],{"class":371},[52,28967,77],{"class":58},[43,28969,28971],{"className":222,"code":28970,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrickPattern', props: {} }\n ]\n})\n",[31,28972,28973,28983,28987,29001,29005,29014,29018],{"__ignoreMap":48},[52,28974,28975,28977,28979,28981],{"class":54,"line":55},[52,28976,232],{"class":231},[52,28978,9231],{"class":58},[52,28980,238],{"class":231},[52,28982,9236],{"class":73},[52,28984,28985],{"class":54,"line":80},[52,28986,597],{"emptyLinePlaceholder":171},[52,28988,28989,28991,28993,28995,28997,28999],{"class":54,"line":108},[52,28990,1721],{"class":231},[52,28992,1724],{"class":371},[52,28994,1727],{"class":231},[52,28996,1730],{"class":231},[52,28998,1733],{"class":66},[52,29000,1736],{"class":58},[52,29002,29003],{"class":54,"line":118},[52,29004,1751],{"class":58},[52,29006,29007,29009,29012],{"class":54,"line":594},[52,29008,1756],{"class":58},[52,29010,29011],{"class":73},"'BrickPattern'",[52,29013,2129],{"class":58},[52,29015,29016],{"class":54,"line":600},[52,29017,1773],{"class":58},[52,29019,29020],{"class":54,"line":606},[52,29021,1778],{"class":58},[156,29023,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29025},[29026,29027],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/brickpattern",{"title":28835,"description":28843},"docs/components/BrickPattern","-cXKC437Dm2FwTF9WS6cftAzE9s7x_VYYPWO8ahi81w",{"id":29034,"title":29035,"body":29036,"category":29304,"componentType":20848,"description":29043,"extension":168,"meta":29305,"navigation":171,"path":29306,"requiresChild":171,"seo":29307,"stem":29308,"__hash__":29309},"components/docs/components/BrightnessContrast.md","BrightnessContrast",{"type":8,"value":29037,"toc":29300},[29038,29041,29044,29046,29048,29051,29053,29298],[11,29039,29035],{"id":29040},"brightnesscontrast",[15,29042,29043],{},"Adjust brightness and contrast of the image",[26901,29045],{"component":29035},[23,29047,26905],{"id":21503},[26907,29049],{":props":29050},"[{\"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,29052,26913],{"id":26912},[217,29054,29055,29100,29144,29188,29232],{":tabs":1543},[43,29056,29058],{"className":45,"code":29057,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle />\n \u003C/BrightnessContrast>\n\u003C/Shader>\n",[31,29059,29060,29068,29076,29084,29092],{"__ignoreMap":48},[52,29061,29062,29064,29066],{"class":54,"line":55},[52,29063,59],{"class":58},[52,29065,63],{"class":62},[52,29067,77],{"class":58},[52,29069,29070,29072,29074],{"class":54,"line":80},[52,29071,83],{"class":58},[52,29073,29035],{"class":62},[52,29075,77],{"class":58},[52,29077,29078,29080,29082],{"class":54,"line":108},[52,29079,2213],{"class":58},[52,29081,2216],{"class":62},[52,29083,105],{"class":58},[52,29085,29086,29088,29090],{"class":54,"line":118},[52,29087,2230],{"class":58},[52,29089,29035],{"class":62},[52,29091,77],{"class":58},[52,29093,29094,29096,29098],{"class":54,"line":594},[52,29095,121],{"class":58},[52,29097,63],{"class":62},[52,29099,77],{"class":58},[43,29101,29102],{"className":360,"code":29057,"language":362,"meta":48,"style":48},[31,29103,29104,29112,29120,29128,29136],{"__ignoreMap":48},[52,29105,29106,29108,29110],{"class":54,"line":55},[52,29107,59],{"class":58},[52,29109,63],{"class":371},[52,29111,77],{"class":58},[52,29113,29114,29116,29118],{"class":54,"line":80},[52,29115,83],{"class":58},[52,29117,29035],{"class":371},[52,29119,77],{"class":58},[52,29121,29122,29124,29126],{"class":54,"line":108},[52,29123,2213],{"class":58},[52,29125,2216],{"class":371},[52,29127,105],{"class":58},[52,29129,29130,29132,29134],{"class":54,"line":118},[52,29131,2230],{"class":58},[52,29133,29035],{"class":371},[52,29135,77],{"class":58},[52,29137,29138,29140,29142],{"class":54,"line":594},[52,29139,121],{"class":58},[52,29141,63],{"class":371},[52,29143,77],{"class":58},[43,29145,29146],{"className":2507,"code":29057,"language":2509,"meta":48,"style":48},[31,29147,29148,29156,29164,29172,29180],{"__ignoreMap":48},[52,29149,29150,29152,29154],{"class":54,"line":55},[52,29151,59],{"class":58},[52,29153,63],{"class":371},[52,29155,77],{"class":58},[52,29157,29158,29160,29162],{"class":54,"line":80},[52,29159,83],{"class":58},[52,29161,29035],{"class":371},[52,29163,77],{"class":58},[52,29165,29166,29168,29170],{"class":54,"line":108},[52,29167,2213],{"class":58},[52,29169,2216],{"class":371},[52,29171,105],{"class":58},[52,29173,29174,29176,29178],{"class":54,"line":118},[52,29175,2230],{"class":58},[52,29177,29035],{"class":371},[52,29179,77],{"class":58},[52,29181,29182,29184,29186],{"class":54,"line":594},[52,29183,121],{"class":58},[52,29185,63],{"class":371},[52,29187,77],{"class":58},[43,29189,29190],{"className":419,"code":29057,"language":420,"meta":48,"style":48},[31,29191,29192,29200,29208,29216,29224],{"__ignoreMap":48},[52,29193,29194,29196,29198],{"class":54,"line":55},[52,29195,59],{"class":58},[52,29197,63],{"class":371},[52,29199,77],{"class":58},[52,29201,29202,29204,29206],{"class":54,"line":80},[52,29203,83],{"class":58},[52,29205,29035],{"class":371},[52,29207,77],{"class":58},[52,29209,29210,29212,29214],{"class":54,"line":108},[52,29211,2213],{"class":58},[52,29213,2216],{"class":371},[52,29215,105],{"class":58},[52,29217,29218,29220,29222],{"class":54,"line":118},[52,29219,2230],{"class":58},[52,29221,29035],{"class":371},[52,29223,77],{"class":58},[52,29225,29226,29228,29230],{"class":54,"line":594},[52,29227,121],{"class":58},[52,29229,63],{"class":371},[52,29231,77],{"class":58},[43,29233,29235],{"className":222,"code":29234,"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,29236,29237,29247,29251,29265,29269,29278,29286,29290,29294],{"__ignoreMap":48},[52,29238,29239,29241,29243,29245],{"class":54,"line":55},[52,29240,232],{"class":231},[52,29242,9231],{"class":58},[52,29244,238],{"class":231},[52,29246,9236],{"class":73},[52,29248,29249],{"class":54,"line":80},[52,29250,597],{"emptyLinePlaceholder":171},[52,29252,29253,29255,29257,29259,29261,29263],{"class":54,"line":108},[52,29254,1721],{"class":231},[52,29256,1724],{"class":371},[52,29258,1727],{"class":231},[52,29260,1730],{"class":231},[52,29262,1733],{"class":66},[52,29264,1736],{"class":58},[52,29266,29267],{"class":54,"line":118},[52,29268,1751],{"class":58},[52,29270,29271,29273,29276],{"class":54,"line":594},[52,29272,1756],{"class":58},[52,29274,29275],{"class":73},"'BrightnessContrast'",[52,29277,4722],{"class":58},[52,29279,29280,29282,29284],{"class":54,"line":600},[52,29281,4727],{"class":58},[52,29283,2869],{"class":73},[52,29285,2129],{"class":58},[52,29287,29288],{"class":54,"line":606},[52,29289,4744],{"class":58},[52,29291,29292],{"class":54,"line":653},[52,29293,1773],{"class":58},[52,29295,29296],{"class":54,"line":662},[52,29297,1778],{"class":58},[156,29299,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29301},[29302,29303],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Adjustments",{},"/docs/components/brightnesscontrast",{"title":29035,"description":29043},"docs/components/BrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":29311,"title":29312,"body":29313,"category":28094,"componentType":20848,"description":29320,"extension":168,"meta":29638,"navigation":171,"path":29639,"requiresChild":171,"seo":29640,"stem":29641,"__hash__":29642},"components/docs/components/Bulge.md","Bulge",{"type":8,"value":29314,"toc":29634},[29315,29318,29321,29323,29325,29328,29330,29632],[11,29316,29312],{"id":29317},"bulge",[15,29319,29320],{},"Magnify or pinch content around a center point",[26901,29322],{"component":29312},[23,29324,26905],{"id":21503},[26907,29326],{":props":29327},"[{\"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,29329,26913],{"id":26912},[217,29331,29332,29389,29448,29504,29562],{":tabs":1543},[43,29333,29335],{"className":45,"code":29334,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,29336,29337,29345,29352,29361,29365,29373,29381],{"__ignoreMap":48},[52,29338,29339,29341,29343],{"class":54,"line":55},[52,29340,59],{"class":58},[52,29342,63],{"class":62},[52,29344,77],{"class":58},[52,29346,29347,29349],{"class":54,"line":80},[52,29348,83],{"class":58},[52,29350,29351],{"class":62},"Bulge\n",[52,29353,29354,29356,29358],{"class":54,"line":108},[52,29355,14901],{"class":66},[52,29357,70],{"class":58},[52,29359,29360],{"class":73},"\"1\"\n",[52,29362,29363],{"class":54,"line":118},[52,29364,26949],{"class":58},[52,29366,29367,29369,29371],{"class":54,"line":594},[52,29368,2213],{"class":58},[52,29370,2216],{"class":62},[52,29372,105],{"class":58},[52,29374,29375,29377,29379],{"class":54,"line":600},[52,29376,2230],{"class":58},[52,29378,29312],{"class":62},[52,29380,77],{"class":58},[52,29382,29383,29385,29387],{"class":54,"line":606},[52,29384,121],{"class":58},[52,29386,63],{"class":62},[52,29388,77],{"class":58},[43,29390,29392],{"className":360,"code":29391,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,29393,29394,29402,29408,29420,29424,29432,29440],{"__ignoreMap":48},[52,29395,29396,29398,29400],{"class":54,"line":55},[52,29397,59],{"class":58},[52,29399,63],{"class":371},[52,29401,77],{"class":58},[52,29403,29404,29406],{"class":54,"line":80},[52,29405,83],{"class":58},[52,29407,29351],{"class":371},[52,29409,29410,29412,29414,29416,29418],{"class":54,"line":108},[52,29411,7361],{"class":66},[52,29413,70],{"class":231},[52,29415,723],{"class":58},[52,29417,6391],{"class":371},[52,29419,729],{"class":58},[52,29421,29422],{"class":54,"line":118},[52,29423,26949],{"class":58},[52,29425,29426,29428,29430],{"class":54,"line":594},[52,29427,2213],{"class":58},[52,29429,2216],{"class":371},[52,29431,105],{"class":58},[52,29433,29434,29436,29438],{"class":54,"line":600},[52,29435,2230],{"class":58},[52,29437,29312],{"class":371},[52,29439,77],{"class":58},[52,29441,29442,29444,29446],{"class":54,"line":606},[52,29443,121],{"class":58},[52,29445,63],{"class":371},[52,29447,77],{"class":58},[43,29449,29450],{"className":2507,"code":29391,"language":2509,"meta":48,"style":48},[31,29451,29452,29460,29466,29476,29480,29488,29496],{"__ignoreMap":48},[52,29453,29454,29456,29458],{"class":54,"line":55},[52,29455,59],{"class":58},[52,29457,63],{"class":371},[52,29459,77],{"class":58},[52,29461,29462,29464],{"class":54,"line":80},[52,29463,83],{"class":58},[52,29465,29351],{"class":371},[52,29467,29468,29470,29472,29474],{"class":54,"line":108},[52,29469,7361],{"class":66},[52,29471,24845],{"class":58},[52,29473,6391],{"class":371},[52,29475,729],{"class":58},[52,29477,29478],{"class":54,"line":118},[52,29479,26949],{"class":58},[52,29481,29482,29484,29486],{"class":54,"line":594},[52,29483,2213],{"class":58},[52,29485,2216],{"class":371},[52,29487,105],{"class":58},[52,29489,29490,29492,29494],{"class":54,"line":600},[52,29491,2230],{"class":58},[52,29493,29312],{"class":371},[52,29495,77],{"class":58},[52,29497,29498,29500,29502],{"class":54,"line":606},[52,29499,121],{"class":58},[52,29501,63],{"class":371},[52,29503,77],{"class":58},[43,29505,29506],{"className":419,"code":29391,"language":420,"meta":48,"style":48},[31,29507,29508,29516,29522,29534,29538,29546,29554],{"__ignoreMap":48},[52,29509,29510,29512,29514],{"class":54,"line":55},[52,29511,59],{"class":58},[52,29513,63],{"class":371},[52,29515,77],{"class":58},[52,29517,29518,29520],{"class":54,"line":80},[52,29519,83],{"class":58},[52,29521,29351],{"class":371},[52,29523,29524,29526,29528,29530,29532],{"class":54,"line":108},[52,29525,7361],{"class":66},[52,29527,70],{"class":231},[52,29529,723],{"class":58},[52,29531,6391],{"class":371},[52,29533,729],{"class":58},[52,29535,29536],{"class":54,"line":118},[52,29537,26949],{"class":58},[52,29539,29540,29542,29544],{"class":54,"line":594},[52,29541,2213],{"class":58},[52,29543,2216],{"class":371},[52,29545,105],{"class":58},[52,29547,29548,29550,29552],{"class":54,"line":600},[52,29549,2230],{"class":58},[52,29551,29312],{"class":371},[52,29553,77],{"class":58},[52,29555,29556,29558,29560],{"class":54,"line":606},[52,29557,121],{"class":58},[52,29559,63],{"class":371},[52,29561,77],{"class":58},[43,29563,29565],{"className":222,"code":29564,"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,29566,29567,29577,29581,29595,29599,29612,29620,29624,29628],{"__ignoreMap":48},[52,29568,29569,29571,29573,29575],{"class":54,"line":55},[52,29570,232],{"class":231},[52,29572,9231],{"class":58},[52,29574,238],{"class":231},[52,29576,9236],{"class":73},[52,29578,29579],{"class":54,"line":80},[52,29580,597],{"emptyLinePlaceholder":171},[52,29582,29583,29585,29587,29589,29591,29593],{"class":54,"line":108},[52,29584,1721],{"class":231},[52,29586,1724],{"class":371},[52,29588,1727],{"class":231},[52,29590,1730],{"class":231},[52,29592,1733],{"class":66},[52,29594,1736],{"class":58},[52,29596,29597],{"class":54,"line":118},[52,29598,1751],{"class":58},[52,29600,29601,29603,29606,29608,29610],{"class":54,"line":594},[52,29602,1756],{"class":58},[52,29604,29605],{"class":73},"'Bulge'",[52,29607,5254],{"class":58},[52,29609,6391],{"class":371},[52,29611,5259],{"class":58},[52,29613,29614,29616,29618],{"class":54,"line":600},[52,29615,4727],{"class":58},[52,29617,2869],{"class":73},[52,29619,2129],{"class":58},[52,29621,29622],{"class":54,"line":606},[52,29623,4744],{"class":58},[52,29625,29626],{"class":54,"line":653},[52,29627,1773],{"class":58},[52,29629,29630],{"class":54,"line":662},[52,29631,1778],{"class":58},[156,29633,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":29635},[29636,29637],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/bulge",{"title":29312,"description":29320},"docs/components/Bulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":29644,"title":29645,"body":29646,"category":27503,"componentType":20848,"description":29653,"extension":168,"meta":29914,"navigation":171,"path":29915,"requiresChild":171,"seo":29916,"stem":29917,"__hash__":29918},"components/docs/components/CRTScreen.md","CRTScreen",{"type":8,"value":29647,"toc":29910},[29648,29651,29654,29656,29658,29661,29663,29908],[11,29649,29645],{"id":29650},"crtscreen",[15,29652,29653],{},"Retro CRT monitor simulation with scanlines",[26901,29655],{"component":29645},[23,29657,26905],{"id":21503},[26907,29659],{":props":29660},"[{\"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,29662,26913],{"id":26912},[217,29664,29665,29710,29754,29798,29842],{":tabs":1543},[43,29666,29668],{"className":45,"code":29667,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle />\n \u003C/CRTScreen>\n\u003C/Shader>\n",[31,29669,29670,29678,29686,29694,29702],{"__ignoreMap":48},[52,29671,29672,29674,29676],{"class":54,"line":55},[52,29673,59],{"class":58},[52,29675,63],{"class":62},[52,29677,77],{"class":58},[52,29679,29680,29682,29684],{"class":54,"line":80},[52,29681,83],{"class":58},[52,29683,29645],{"class":62},[52,29685,77],{"class":58},[52,29687,29688,29690,29692],{"class":54,"line":108},[52,29689,2213],{"class":58},[52,29691,2216],{"class":62},[52,29693,105],{"class":58},[52,29695,29696,29698,29700],{"class":54,"line":118},[52,29697,2230],{"class":58},[52,29699,29645],{"class":62},[52,29701,77],{"class":58},[52,29703,29704,29706,29708],{"class":54,"line":594},[52,29705,121],{"class":58},[52,29707,63],{"class":62},[52,29709,77],{"class":58},[43,29711,29712],{"className":360,"code":29667,"language":362,"meta":48,"style":48},[31,29713,29714,29722,29730,29738,29746],{"__ignoreMap":48},[52,29715,29716,29718,29720],{"class":54,"line":55},[52,29717,59],{"class":58},[52,29719,63],{"class":371},[52,29721,77],{"class":58},[52,29723,29724,29726,29728],{"class":54,"line":80},[52,29725,83],{"class":58},[52,29727,29645],{"class":371},[52,29729,77],{"class":58},[52,29731,29732,29734,29736],{"class":54,"line":108},[52,29733,2213],{"class":58},[52,29735,2216],{"class":371},[52,29737,105],{"class":58},[52,29739,29740,29742,29744],{"class":54,"line":118},[52,29741,2230],{"class":58},[52,29743,29645],{"class":371},[52,29745,77],{"class":58},[52,29747,29748,29750,29752],{"class":54,"line":594},[52,29749,121],{"class":58},[52,29751,63],{"class":371},[52,29753,77],{"class":58},[43,29755,29756],{"className":2507,"code":29667,"language":2509,"meta":48,"style":48},[31,29757,29758,29766,29774,29782,29790],{"__ignoreMap":48},[52,29759,29760,29762,29764],{"class":54,"line":55},[52,29761,59],{"class":58},[52,29763,63],{"class":371},[52,29765,77],{"class":58},[52,29767,29768,29770,29772],{"class":54,"line":80},[52,29769,83],{"class":58},[52,29771,29645],{"class":371},[52,29773,77],{"class":58},[52,29775,29776,29778,29780],{"class":54,"line":108},[52,29777,2213],{"class":58},[52,29779,2216],{"class":371},[52,29781,105],{"class":58},[52,29783,29784,29786,29788],{"class":54,"line":118},[52,29785,2230],{"class":58},[52,29787,29645],{"class":371},[52,29789,77],{"class":58},[52,29791,29792,29794,29796],{"class":54,"line":594},[52,29793,121],{"class":58},[52,29795,63],{"class":371},[52,29797,77],{"class":58},[43,29799,29800],{"className":419,"code":29667,"language":420,"meta":48,"style":48},[31,29801,29802,29810,29818,29826,29834],{"__ignoreMap":48},[52,29803,29804,29806,29808],{"class":54,"line":55},[52,29805,59],{"class":58},[52,29807,63],{"class":371},[52,29809,77],{"class":58},[52,29811,29812,29814,29816],{"class":54,"line":80},[52,29813,83],{"class":58},[52,29815,29645],{"class":371},[52,29817,77],{"class":58},[52,29819,29820,29822,29824],{"class":54,"line":108},[52,29821,2213],{"class":58},[52,29823,2216],{"class":371},[52,29825,105],{"class":58},[52,29827,29828,29830,29832],{"class":54,"line":118},[52,29829,2230],{"class":58},[52,29831,29645],{"class":371},[52,29833,77],{"class":58},[52,29835,29836,29838,29840],{"class":54,"line":594},[52,29837,121],{"class":58},[52,29839,63],{"class":371},[52,29841,77],{"class":58},[43,29843,29845],{"className":222,"code":29844,"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,29846,29847,29857,29861,29875,29879,29888,29896,29900,29904],{"__ignoreMap":48},[52,29848,29849,29851,29853,29855],{"class":54,"line":55},[52,29850,232],{"class":231},[52,29852,9231],{"class":58},[52,29854,238],{"class":231},[52,29856,9236],{"class":73},[52,29858,29859],{"class":54,"line":80},[52,29860,597],{"emptyLinePlaceholder":171},[52,29862,29863,29865,29867,29869,29871,29873],{"class":54,"line":108},[52,29864,1721],{"class":231},[52,29866,1724],{"class":371},[52,29868,1727],{"class":231},[52,29870,1730],{"class":231},[52,29872,1733],{"class":66},[52,29874,1736],{"class":58},[52,29876,29877],{"class":54,"line":118},[52,29878,1751],{"class":58},[52,29880,29881,29883,29886],{"class":54,"line":594},[52,29882,1756],{"class":58},[52,29884,29885],{"class":73},"'CRTScreen'",[52,29887,4722],{"class":58},[52,29889,29890,29892,29894],{"class":54,"line":600},[52,29891,4727],{"class":58},[52,29893,2869],{"class":73},[52,29895,2129],{"class":58},[52,29897,29898],{"class":54,"line":606},[52,29899,4744],{"class":58},[52,29901,29902],{"class":54,"line":653},[52,29903,1773],{"class":58},[52,29905,29906],{"class":54,"line":662},[52,29907,1778],{"class":58},[156,29909,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29911},[29912,29913],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/crtscreen",{"title":29645,"description":29653},"docs/components/CRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":29920,"title":29921,"body":29922,"category":27225,"componentType":20848,"description":29929,"extension":168,"meta":30190,"navigation":171,"path":30191,"requiresChild":171,"seo":30192,"stem":30193,"__hash__":30194},"components/docs/components/ChannelBlur.md","ChannelBlur",{"type":8,"value":29923,"toc":30186},[29924,29927,29930,29932,29934,29937,29939,30184],[11,29925,29921],{"id":29926},"channelblur",[15,29928,29929],{},"Independent blur for red, green, and blue channels",[26901,29931],{"component":29921},[23,29933,26905],{"id":21503},[26907,29935],{":props":29936},"[{\"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,29938,26913],{"id":26912},[217,29940,29941,29986,30030,30074,30118],{":tabs":1543},[43,29942,29944],{"className":45,"code":29943,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle />\n \u003C/ChannelBlur>\n\u003C/Shader>\n",[31,29945,29946,29954,29962,29970,29978],{"__ignoreMap":48},[52,29947,29948,29950,29952],{"class":54,"line":55},[52,29949,59],{"class":58},[52,29951,63],{"class":62},[52,29953,77],{"class":58},[52,29955,29956,29958,29960],{"class":54,"line":80},[52,29957,83],{"class":58},[52,29959,29921],{"class":62},[52,29961,77],{"class":58},[52,29963,29964,29966,29968],{"class":54,"line":108},[52,29965,2213],{"class":58},[52,29967,2216],{"class":62},[52,29969,105],{"class":58},[52,29971,29972,29974,29976],{"class":54,"line":118},[52,29973,2230],{"class":58},[52,29975,29921],{"class":62},[52,29977,77],{"class":58},[52,29979,29980,29982,29984],{"class":54,"line":594},[52,29981,121],{"class":58},[52,29983,63],{"class":62},[52,29985,77],{"class":58},[43,29987,29988],{"className":360,"code":29943,"language":362,"meta":48,"style":48},[31,29989,29990,29998,30006,30014,30022],{"__ignoreMap":48},[52,29991,29992,29994,29996],{"class":54,"line":55},[52,29993,59],{"class":58},[52,29995,63],{"class":371},[52,29997,77],{"class":58},[52,29999,30000,30002,30004],{"class":54,"line":80},[52,30001,83],{"class":58},[52,30003,29921],{"class":371},[52,30005,77],{"class":58},[52,30007,30008,30010,30012],{"class":54,"line":108},[52,30009,2213],{"class":58},[52,30011,2216],{"class":371},[52,30013,105],{"class":58},[52,30015,30016,30018,30020],{"class":54,"line":118},[52,30017,2230],{"class":58},[52,30019,29921],{"class":371},[52,30021,77],{"class":58},[52,30023,30024,30026,30028],{"class":54,"line":594},[52,30025,121],{"class":58},[52,30027,63],{"class":371},[52,30029,77],{"class":58},[43,30031,30032],{"className":2507,"code":29943,"language":2509,"meta":48,"style":48},[31,30033,30034,30042,30050,30058,30066],{"__ignoreMap":48},[52,30035,30036,30038,30040],{"class":54,"line":55},[52,30037,59],{"class":58},[52,30039,63],{"class":371},[52,30041,77],{"class":58},[52,30043,30044,30046,30048],{"class":54,"line":80},[52,30045,83],{"class":58},[52,30047,29921],{"class":371},[52,30049,77],{"class":58},[52,30051,30052,30054,30056],{"class":54,"line":108},[52,30053,2213],{"class":58},[52,30055,2216],{"class":371},[52,30057,105],{"class":58},[52,30059,30060,30062,30064],{"class":54,"line":118},[52,30061,2230],{"class":58},[52,30063,29921],{"class":371},[52,30065,77],{"class":58},[52,30067,30068,30070,30072],{"class":54,"line":594},[52,30069,121],{"class":58},[52,30071,63],{"class":371},[52,30073,77],{"class":58},[43,30075,30076],{"className":419,"code":29943,"language":420,"meta":48,"style":48},[31,30077,30078,30086,30094,30102,30110],{"__ignoreMap":48},[52,30079,30080,30082,30084],{"class":54,"line":55},[52,30081,59],{"class":58},[52,30083,63],{"class":371},[52,30085,77],{"class":58},[52,30087,30088,30090,30092],{"class":54,"line":80},[52,30089,83],{"class":58},[52,30091,29921],{"class":371},[52,30093,77],{"class":58},[52,30095,30096,30098,30100],{"class":54,"line":108},[52,30097,2213],{"class":58},[52,30099,2216],{"class":371},[52,30101,105],{"class":58},[52,30103,30104,30106,30108],{"class":54,"line":118},[52,30105,2230],{"class":58},[52,30107,29921],{"class":371},[52,30109,77],{"class":58},[52,30111,30112,30114,30116],{"class":54,"line":594},[52,30113,121],{"class":58},[52,30115,63],{"class":371},[52,30117,77],{"class":58},[43,30119,30121],{"className":222,"code":30120,"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,30122,30123,30133,30137,30151,30155,30164,30172,30176,30180],{"__ignoreMap":48},[52,30124,30125,30127,30129,30131],{"class":54,"line":55},[52,30126,232],{"class":231},[52,30128,9231],{"class":58},[52,30130,238],{"class":231},[52,30132,9236],{"class":73},[52,30134,30135],{"class":54,"line":80},[52,30136,597],{"emptyLinePlaceholder":171},[52,30138,30139,30141,30143,30145,30147,30149],{"class":54,"line":108},[52,30140,1721],{"class":231},[52,30142,1724],{"class":371},[52,30144,1727],{"class":231},[52,30146,1730],{"class":231},[52,30148,1733],{"class":66},[52,30150,1736],{"class":58},[52,30152,30153],{"class":54,"line":118},[52,30154,1751],{"class":58},[52,30156,30157,30159,30162],{"class":54,"line":594},[52,30158,1756],{"class":58},[52,30160,30161],{"class":73},"'ChannelBlur'",[52,30163,4722],{"class":58},[52,30165,30166,30168,30170],{"class":54,"line":600},[52,30167,4727],{"class":58},[52,30169,2869],{"class":73},[52,30171,2129],{"class":58},[52,30173,30174],{"class":54,"line":606},[52,30175,4744],{"class":58},[52,30177,30178],{"class":54,"line":653},[52,30179,1773],{"class":58},[52,30181,30182],{"class":54,"line":662},[52,30183,1778],{"class":58},[156,30185,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":30187},[30188,30189],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/channelblur",{"title":29921,"description":29929},"docs/components/ChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":30196,"title":30197,"body":30198,"category":27760,"componentType":20842,"description":30205,"extension":168,"meta":30389,"navigation":171,"path":30390,"requiresChild":27763,"seo":30391,"stem":30392,"__hash__":30393},"components/docs/components/Checkerboard.md","Checkerboard",{"type":8,"value":30199,"toc":30385},[30200,30203,30206,30208,30210,30213,30215,30383],[11,30201,30197],{"id":30202},"checkerboard",[15,30204,30205],{},"Classic checkerboard pattern with two alternating colors",[26901,30207],{"component":30197},[23,30209,26905],{"id":21503},[26907,30211],{":props":30212},"[{\"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,30214,26913],{"id":26912},[217,30216,30217,30246,30274,30302,30330],{":tabs":1543},[43,30218,30220],{"className":45,"code":30219,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCheckerboard />\n\u003C/Shader>\n",[31,30221,30222,30230,30238],{"__ignoreMap":48},[52,30223,30224,30226,30228],{"class":54,"line":55},[52,30225,59],{"class":58},[52,30227,63],{"class":62},[52,30229,77],{"class":58},[52,30231,30232,30234,30236],{"class":54,"line":80},[52,30233,83],{"class":58},[52,30235,30197],{"class":62},[52,30237,105],{"class":58},[52,30239,30240,30242,30244],{"class":54,"line":108},[52,30241,121],{"class":58},[52,30243,63],{"class":62},[52,30245,77],{"class":58},[43,30247,30248],{"className":360,"code":30219,"language":362,"meta":48,"style":48},[31,30249,30250,30258,30266],{"__ignoreMap":48},[52,30251,30252,30254,30256],{"class":54,"line":55},[52,30253,59],{"class":58},[52,30255,63],{"class":371},[52,30257,77],{"class":58},[52,30259,30260,30262,30264],{"class":54,"line":80},[52,30261,83],{"class":58},[52,30263,30197],{"class":371},[52,30265,105],{"class":58},[52,30267,30268,30270,30272],{"class":54,"line":108},[52,30269,121],{"class":58},[52,30271,63],{"class":371},[52,30273,77],{"class":58},[43,30275,30276],{"className":2507,"code":30219,"language":2509,"meta":48,"style":48},[31,30277,30278,30286,30294],{"__ignoreMap":48},[52,30279,30280,30282,30284],{"class":54,"line":55},[52,30281,59],{"class":58},[52,30283,63],{"class":371},[52,30285,77],{"class":58},[52,30287,30288,30290,30292],{"class":54,"line":80},[52,30289,83],{"class":58},[52,30291,30197],{"class":371},[52,30293,105],{"class":58},[52,30295,30296,30298,30300],{"class":54,"line":108},[52,30297,121],{"class":58},[52,30299,63],{"class":371},[52,30301,77],{"class":58},[43,30303,30304],{"className":419,"code":30219,"language":420,"meta":48,"style":48},[31,30305,30306,30314,30322],{"__ignoreMap":48},[52,30307,30308,30310,30312],{"class":54,"line":55},[52,30309,59],{"class":58},[52,30311,63],{"class":371},[52,30313,77],{"class":58},[52,30315,30316,30318,30320],{"class":54,"line":80},[52,30317,83],{"class":58},[52,30319,30197],{"class":371},[52,30321,105],{"class":58},[52,30323,30324,30326,30328],{"class":54,"line":108},[52,30325,121],{"class":58},[52,30327,63],{"class":371},[52,30329,77],{"class":58},[43,30331,30333],{"className":222,"code":30332,"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,30334,30335,30345,30349,30363,30367,30375,30379],{"__ignoreMap":48},[52,30336,30337,30339,30341,30343],{"class":54,"line":55},[52,30338,232],{"class":231},[52,30340,9231],{"class":58},[52,30342,238],{"class":231},[52,30344,9236],{"class":73},[52,30346,30347],{"class":54,"line":80},[52,30348,597],{"emptyLinePlaceholder":171},[52,30350,30351,30353,30355,30357,30359,30361],{"class":54,"line":108},[52,30352,1721],{"class":231},[52,30354,1724],{"class":371},[52,30356,1727],{"class":231},[52,30358,1730],{"class":231},[52,30360,1733],{"class":66},[52,30362,1736],{"class":58},[52,30364,30365],{"class":54,"line":118},[52,30366,1751],{"class":58},[52,30368,30369,30371,30373],{"class":54,"line":594},[52,30370,1756],{"class":58},[52,30372,7875],{"class":73},[52,30374,2129],{"class":58},[52,30376,30377],{"class":54,"line":600},[52,30378,1773],{"class":58},[52,30380,30381],{"class":54,"line":606},[52,30382,1778],{"class":58},[156,30384,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":30386},[30387,30388],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/checkerboard",{"title":30197,"description":30205},"docs/components/Checkerboard","xWgOFlPxz08f5-WceoXS-EG20wY1632N5T-U9eHKWKo",{"id":30395,"title":30396,"body":30397,"category":27760,"componentType":20842,"description":30404,"extension":168,"meta":30589,"navigation":171,"path":30590,"requiresChild":27763,"seo":30591,"stem":30592,"__hash__":30593},"components/docs/components/Chevron.md","Chevron",{"type":8,"value":30398,"toc":30585},[30399,30402,30405,30407,30409,30412,30414,30583],[11,30400,30396],{"id":30401},"chevron",[15,30403,30404],{},"Animated chevron / zigzag stripe pattern",[26901,30406],{"component":30396},[23,30408,26905],{"id":21503},[26907,30410],{":props":30411},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second color\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of chevron pairs visible\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle of the chevrons\"},{\"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\",\"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,30413,26913],{"id":26912},[217,30415,30416,30445,30473,30501,30529],{":tabs":1543},[43,30417,30419],{"className":45,"code":30418,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChevron />\n\u003C/Shader>\n",[31,30420,30421,30429,30437],{"__ignoreMap":48},[52,30422,30423,30425,30427],{"class":54,"line":55},[52,30424,59],{"class":58},[52,30426,63],{"class":62},[52,30428,77],{"class":58},[52,30430,30431,30433,30435],{"class":54,"line":80},[52,30432,83],{"class":58},[52,30434,30396],{"class":62},[52,30436,105],{"class":58},[52,30438,30439,30441,30443],{"class":54,"line":108},[52,30440,121],{"class":58},[52,30442,63],{"class":62},[52,30444,77],{"class":58},[43,30446,30447],{"className":360,"code":30418,"language":362,"meta":48,"style":48},[31,30448,30449,30457,30465],{"__ignoreMap":48},[52,30450,30451,30453,30455],{"class":54,"line":55},[52,30452,59],{"class":58},[52,30454,63],{"class":371},[52,30456,77],{"class":58},[52,30458,30459,30461,30463],{"class":54,"line":80},[52,30460,83],{"class":58},[52,30462,30396],{"class":371},[52,30464,105],{"class":58},[52,30466,30467,30469,30471],{"class":54,"line":108},[52,30468,121],{"class":58},[52,30470,63],{"class":371},[52,30472,77],{"class":58},[43,30474,30475],{"className":2507,"code":30418,"language":2509,"meta":48,"style":48},[31,30476,30477,30485,30493],{"__ignoreMap":48},[52,30478,30479,30481,30483],{"class":54,"line":55},[52,30480,59],{"class":58},[52,30482,63],{"class":371},[52,30484,77],{"class":58},[52,30486,30487,30489,30491],{"class":54,"line":80},[52,30488,83],{"class":58},[52,30490,30396],{"class":371},[52,30492,105],{"class":58},[52,30494,30495,30497,30499],{"class":54,"line":108},[52,30496,121],{"class":58},[52,30498,63],{"class":371},[52,30500,77],{"class":58},[43,30502,30503],{"className":419,"code":30418,"language":420,"meta":48,"style":48},[31,30504,30505,30513,30521],{"__ignoreMap":48},[52,30506,30507,30509,30511],{"class":54,"line":55},[52,30508,59],{"class":58},[52,30510,63],{"class":371},[52,30512,77],{"class":58},[52,30514,30515,30517,30519],{"class":54,"line":80},[52,30516,83],{"class":58},[52,30518,30396],{"class":371},[52,30520,105],{"class":58},[52,30522,30523,30525,30527],{"class":54,"line":108},[52,30524,121],{"class":58},[52,30526,63],{"class":371},[52,30528,77],{"class":58},[43,30530,30532],{"className":222,"code":30531,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Chevron', props: {} }\n ]\n})\n",[31,30533,30534,30544,30548,30562,30566,30575,30579],{"__ignoreMap":48},[52,30535,30536,30538,30540,30542],{"class":54,"line":55},[52,30537,232],{"class":231},[52,30539,9231],{"class":58},[52,30541,238],{"class":231},[52,30543,9236],{"class":73},[52,30545,30546],{"class":54,"line":80},[52,30547,597],{"emptyLinePlaceholder":171},[52,30549,30550,30552,30554,30556,30558,30560],{"class":54,"line":108},[52,30551,1721],{"class":231},[52,30553,1724],{"class":371},[52,30555,1727],{"class":231},[52,30557,1730],{"class":231},[52,30559,1733],{"class":66},[52,30561,1736],{"class":58},[52,30563,30564],{"class":54,"line":118},[52,30565,1751],{"class":58},[52,30567,30568,30570,30573],{"class":54,"line":594},[52,30569,1756],{"class":58},[52,30571,30572],{"class":73},"'Chevron'",[52,30574,2129],{"class":58},[52,30576,30577],{"class":54,"line":600},[52,30578,1773],{"class":58},[52,30580,30581],{"class":54,"line":606},[52,30582,1778],{"class":58},[156,30584,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":30586},[30587,30588],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/chevron",{"title":30396,"description":30404},"docs/components/Chevron","UPCCEIMeGtGDhf1g_6Yf1aV30LLXx58oALHk0ON1XI0",{"id":30595,"title":30596,"body":30597,"category":30893,"componentType":20842,"description":30604,"extension":168,"meta":30894,"navigation":171,"path":30895,"requiresChild":27763,"seo":30896,"stem":30897,"__hash__":30898},"components/docs/components/ChromaFlow.md","ChromaFlow",{"type":8,"value":30598,"toc":30889},[30599,30602,30605,30607,30609,30612,30614,30887],[11,30600,30596],{"id":30601},"chromaflow",[15,30603,30604],{},"Interactive liquid flow effect that follows your cursor",[26901,30606],{"component":30596},[23,30608,26905],{"id":21503},[26907,30610],{":props":30611},"[{\"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,30613,26913],{"id":26912},[217,30615,30616,30665,30721,30771,30825],{":tabs":1543},[43,30617,30619],{"className":45,"code":30618,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n />\n\u003C/Shader>\n",[31,30620,30621,30629,30636,30644,30653,30657],{"__ignoreMap":48},[52,30622,30623,30625,30627],{"class":54,"line":55},[52,30624,59],{"class":58},[52,30626,63],{"class":62},[52,30628,77],{"class":58},[52,30630,30631,30633],{"class":54,"line":80},[52,30632,83],{"class":58},[52,30634,30635],{"class":62},"ChromaFlow\n",[52,30637,30638,30640,30642],{"class":54,"line":108},[52,30639,17870],{"class":66},[52,30641,70],{"class":58},[52,30643,29360],{"class":73},[52,30645,30646,30648,30650],{"class":54,"line":118},[52,30647,14901],{"class":66},[52,30649,70],{"class":58},[52,30651,30652],{"class":73},"\"3\"\n",[52,30654,30655],{"class":54,"line":594},[52,30656,1224],{"class":58},[52,30658,30659,30661,30663],{"class":54,"line":600},[52,30660,121],{"class":58},[52,30662,63],{"class":62},[52,30664,77],{"class":58},[43,30666,30668],{"className":360,"code":30667,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n />\n\u003C/Shader>\n",[31,30669,30670,30678,30684,30696,30709,30713],{"__ignoreMap":48},[52,30671,30672,30674,30676],{"class":54,"line":55},[52,30673,59],{"class":58},[52,30675,63],{"class":371},[52,30677,77],{"class":58},[52,30679,30680,30682],{"class":54,"line":80},[52,30681,83],{"class":58},[52,30683,30635],{"class":371},[52,30685,30686,30688,30690,30692,30694],{"class":54,"line":108},[52,30687,17981],{"class":66},[52,30689,70],{"class":231},[52,30691,723],{"class":58},[52,30693,6391],{"class":371},[52,30695,729],{"class":58},[52,30697,30698,30700,30702,30704,30707],{"class":54,"line":118},[52,30699,7361],{"class":66},[52,30701,70],{"class":231},[52,30703,723],{"class":58},[52,30705,30706],{"class":371},"3",[52,30708,729],{"class":58},[52,30710,30711],{"class":54,"line":594},[52,30712,1224],{"class":58},[52,30714,30715,30717,30719],{"class":54,"line":600},[52,30716,121],{"class":58},[52,30718,63],{"class":371},[52,30720,77],{"class":58},[43,30722,30723],{"className":2507,"code":30667,"language":2509,"meta":48,"style":48},[31,30724,30725,30733,30739,30749,30759,30763],{"__ignoreMap":48},[52,30726,30727,30729,30731],{"class":54,"line":55},[52,30728,59],{"class":58},[52,30730,63],{"class":371},[52,30732,77],{"class":58},[52,30734,30735,30737],{"class":54,"line":80},[52,30736,83],{"class":58},[52,30738,30635],{"class":371},[52,30740,30741,30743,30745,30747],{"class":54,"line":108},[52,30742,17981],{"class":66},[52,30744,24845],{"class":58},[52,30746,6391],{"class":371},[52,30748,729],{"class":58},[52,30750,30751,30753,30755,30757],{"class":54,"line":118},[52,30752,7361],{"class":66},[52,30754,24845],{"class":58},[52,30756,30706],{"class":371},[52,30758,729],{"class":58},[52,30760,30761],{"class":54,"line":594},[52,30762,1224],{"class":58},[52,30764,30765,30767,30769],{"class":54,"line":600},[52,30766,121],{"class":58},[52,30768,63],{"class":371},[52,30770,77],{"class":58},[43,30772,30773],{"className":419,"code":30667,"language":420,"meta":48,"style":48},[31,30774,30775,30783,30789,30801,30813,30817],{"__ignoreMap":48},[52,30776,30777,30779,30781],{"class":54,"line":55},[52,30778,59],{"class":58},[52,30780,63],{"class":371},[52,30782,77],{"class":58},[52,30784,30785,30787],{"class":54,"line":80},[52,30786,83],{"class":58},[52,30788,30635],{"class":371},[52,30790,30791,30793,30795,30797,30799],{"class":54,"line":108},[52,30792,17981],{"class":66},[52,30794,70],{"class":231},[52,30796,723],{"class":58},[52,30798,6391],{"class":371},[52,30800,729],{"class":58},[52,30802,30803,30805,30807,30809,30811],{"class":54,"line":118},[52,30804,7361],{"class":66},[52,30806,70],{"class":231},[52,30808,723],{"class":58},[52,30810,30706],{"class":371},[52,30812,729],{"class":58},[52,30814,30815],{"class":54,"line":594},[52,30816,1224],{"class":58},[52,30818,30819,30821,30823],{"class":54,"line":600},[52,30820,121],{"class":58},[52,30822,63],{"class":371},[52,30824,77],{"class":58},[43,30826,30828],{"className":222,"code":30827,"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,30829,30830,30840,30844,30858,30862,30879,30883],{"__ignoreMap":48},[52,30831,30832,30834,30836,30838],{"class":54,"line":55},[52,30833,232],{"class":231},[52,30835,9231],{"class":58},[52,30837,238],{"class":231},[52,30839,9236],{"class":73},[52,30841,30842],{"class":54,"line":80},[52,30843,597],{"emptyLinePlaceholder":171},[52,30845,30846,30848,30850,30852,30854,30856],{"class":54,"line":108},[52,30847,1721],{"class":231},[52,30849,1724],{"class":371},[52,30851,1727],{"class":231},[52,30853,1730],{"class":231},[52,30855,1733],{"class":66},[52,30857,1736],{"class":58},[52,30859,30860],{"class":54,"line":118},[52,30861,1751],{"class":58},[52,30863,30864,30866,30869,30871,30873,30875,30877],{"class":54,"line":594},[52,30865,1756],{"class":58},[52,30867,30868],{"class":73},"'ChromaFlow'",[52,30870,27194],{"class":58},[52,30872,6391],{"class":371},[52,30874,4278],{"class":58},[52,30876,30706],{"class":371},[52,30878,1768],{"class":58},[52,30880,30881],{"class":54,"line":600},[52,30882,1773],{"class":58},[52,30884,30885],{"class":54,"line":606},[52,30886,1778],{"class":58},[156,30888,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30890},[30891,30892],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Interactive",{},"/docs/components/chromaflow",{"title":30596,"description":30604},"docs/components/ChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":30900,"title":30901,"body":30902,"category":27503,"componentType":20848,"description":30909,"extension":168,"meta":31170,"navigation":171,"path":31171,"requiresChild":171,"seo":31172,"stem":31173,"__hash__":31174},"components/docs/components/ChromaticAberration.md","ChromaticAberration",{"type":8,"value":30903,"toc":31166},[30904,30907,30910,30912,30914,30917,30919,31164],[11,30905,30901],{"id":30906},"chromaticaberration",[15,30908,30909],{},"Separate RGB channels for a prismatic distortion effect",[26901,30911],{"component":30901},[23,30913,26905],{"id":21503},[26907,30915],{":props":30916},"[{\"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,30918,26913],{"id":26912},[217,30920,30921,30966,31010,31054,31098],{":tabs":1543},[43,30922,30924],{"className":45,"code":30923,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle />\n \u003C/ChromaticAberration>\n\u003C/Shader>\n",[31,30925,30926,30934,30942,30950,30958],{"__ignoreMap":48},[52,30927,30928,30930,30932],{"class":54,"line":55},[52,30929,59],{"class":58},[52,30931,63],{"class":62},[52,30933,77],{"class":58},[52,30935,30936,30938,30940],{"class":54,"line":80},[52,30937,83],{"class":58},[52,30939,30901],{"class":62},[52,30941,77],{"class":58},[52,30943,30944,30946,30948],{"class":54,"line":108},[52,30945,2213],{"class":58},[52,30947,2216],{"class":62},[52,30949,105],{"class":58},[52,30951,30952,30954,30956],{"class":54,"line":118},[52,30953,2230],{"class":58},[52,30955,30901],{"class":62},[52,30957,77],{"class":58},[52,30959,30960,30962,30964],{"class":54,"line":594},[52,30961,121],{"class":58},[52,30963,63],{"class":62},[52,30965,77],{"class":58},[43,30967,30968],{"className":360,"code":30923,"language":362,"meta":48,"style":48},[31,30969,30970,30978,30986,30994,31002],{"__ignoreMap":48},[52,30971,30972,30974,30976],{"class":54,"line":55},[52,30973,59],{"class":58},[52,30975,63],{"class":371},[52,30977,77],{"class":58},[52,30979,30980,30982,30984],{"class":54,"line":80},[52,30981,83],{"class":58},[52,30983,30901],{"class":371},[52,30985,77],{"class":58},[52,30987,30988,30990,30992],{"class":54,"line":108},[52,30989,2213],{"class":58},[52,30991,2216],{"class":371},[52,30993,105],{"class":58},[52,30995,30996,30998,31000],{"class":54,"line":118},[52,30997,2230],{"class":58},[52,30999,30901],{"class":371},[52,31001,77],{"class":58},[52,31003,31004,31006,31008],{"class":54,"line":594},[52,31005,121],{"class":58},[52,31007,63],{"class":371},[52,31009,77],{"class":58},[43,31011,31012],{"className":2507,"code":30923,"language":2509,"meta":48,"style":48},[31,31013,31014,31022,31030,31038,31046],{"__ignoreMap":48},[52,31015,31016,31018,31020],{"class":54,"line":55},[52,31017,59],{"class":58},[52,31019,63],{"class":371},[52,31021,77],{"class":58},[52,31023,31024,31026,31028],{"class":54,"line":80},[52,31025,83],{"class":58},[52,31027,30901],{"class":371},[52,31029,77],{"class":58},[52,31031,31032,31034,31036],{"class":54,"line":108},[52,31033,2213],{"class":58},[52,31035,2216],{"class":371},[52,31037,105],{"class":58},[52,31039,31040,31042,31044],{"class":54,"line":118},[52,31041,2230],{"class":58},[52,31043,30901],{"class":371},[52,31045,77],{"class":58},[52,31047,31048,31050,31052],{"class":54,"line":594},[52,31049,121],{"class":58},[52,31051,63],{"class":371},[52,31053,77],{"class":58},[43,31055,31056],{"className":419,"code":30923,"language":420,"meta":48,"style":48},[31,31057,31058,31066,31074,31082,31090],{"__ignoreMap":48},[52,31059,31060,31062,31064],{"class":54,"line":55},[52,31061,59],{"class":58},[52,31063,63],{"class":371},[52,31065,77],{"class":58},[52,31067,31068,31070,31072],{"class":54,"line":80},[52,31069,83],{"class":58},[52,31071,30901],{"class":371},[52,31073,77],{"class":58},[52,31075,31076,31078,31080],{"class":54,"line":108},[52,31077,2213],{"class":58},[52,31079,2216],{"class":371},[52,31081,105],{"class":58},[52,31083,31084,31086,31088],{"class":54,"line":118},[52,31085,2230],{"class":58},[52,31087,30901],{"class":371},[52,31089,77],{"class":58},[52,31091,31092,31094,31096],{"class":54,"line":594},[52,31093,121],{"class":58},[52,31095,63],{"class":371},[52,31097,77],{"class":58},[43,31099,31101],{"className":222,"code":31100,"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,31102,31103,31113,31117,31131,31135,31144,31152,31156,31160],{"__ignoreMap":48},[52,31104,31105,31107,31109,31111],{"class":54,"line":55},[52,31106,232],{"class":231},[52,31108,9231],{"class":58},[52,31110,238],{"class":231},[52,31112,9236],{"class":73},[52,31114,31115],{"class":54,"line":80},[52,31116,597],{"emptyLinePlaceholder":171},[52,31118,31119,31121,31123,31125,31127,31129],{"class":54,"line":108},[52,31120,1721],{"class":231},[52,31122,1724],{"class":371},[52,31124,1727],{"class":231},[52,31126,1730],{"class":231},[52,31128,1733],{"class":66},[52,31130,1736],{"class":58},[52,31132,31133],{"class":54,"line":118},[52,31134,1751],{"class":58},[52,31136,31137,31139,31142],{"class":54,"line":594},[52,31138,1756],{"class":58},[52,31140,31141],{"class":73},"'ChromaticAberration'",[52,31143,4722],{"class":58},[52,31145,31146,31148,31150],{"class":54,"line":600},[52,31147,4727],{"class":58},[52,31149,2869],{"class":73},[52,31151,2129],{"class":58},[52,31153,31154],{"class":54,"line":606},[52,31155,4744],{"class":58},[52,31157,31158],{"class":54,"line":653},[52,31159,1773],{"class":58},[52,31161,31162],{"class":54,"line":662},[52,31163,1778],{"class":58},[156,31165,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":31167},[31168,31169],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/chromaticaberration",{"title":30901,"description":30909},"docs/components/ChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":31176,"title":2216,"body":31177,"category":31459,"componentType":20842,"description":31184,"extension":168,"meta":31460,"navigation":171,"path":31461,"requiresChild":27763,"seo":31462,"stem":31463,"__hash__":31464},"components/docs/components/Circle.md",{"type":8,"value":31178,"toc":31455},[31179,31182,31185,31187,31189,31192,31194,31453],[11,31180,2216],{"id":31181},"circle",[15,31183,31184],{},"Generate a circle with adjustable size and softness",[26901,31186],{"component":2216},[23,31188,26905],{"id":21503},[26907,31190],{":props":31191},"[{\"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,31193,26913],{"id":26912},[217,31195,31196,31243,31294,31342,31392],{":tabs":1543},[43,31197,31199],{"className":45,"code":31198,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,31200,31201,31209,31215,31223,31231,31235],{"__ignoreMap":48},[52,31202,31203,31205,31207],{"class":54,"line":55},[52,31204,59],{"class":58},[52,31206,63],{"class":62},[52,31208,77],{"class":58},[52,31210,31211,31213],{"class":54,"line":80},[52,31212,83],{"class":58},[52,31214,7346],{"class":62},[52,31216,31217,31219,31221],{"class":54,"line":108},[52,31218,7351],{"class":66},[52,31220,70],{"class":58},[52,31222,7307],{"class":73},[52,31224,31225,31227,31229],{"class":54,"line":118},[52,31226,14901],{"class":66},[52,31228,70],{"class":58},[52,31230,29360],{"class":73},[52,31232,31233],{"class":54,"line":594},[52,31234,1224],{"class":58},[52,31236,31237,31239,31241],{"class":54,"line":600},[52,31238,121],{"class":58},[52,31240,63],{"class":62},[52,31242,77],{"class":58},[43,31244,31246],{"className":360,"code":31245,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n />\n\u003C/Shader>\n",[31,31247,31248,31256,31262,31270,31282,31286],{"__ignoreMap":48},[52,31249,31250,31252,31254],{"class":54,"line":55},[52,31251,59],{"class":58},[52,31253,63],{"class":371},[52,31255,77],{"class":58},[52,31257,31258,31260],{"class":54,"line":80},[52,31259,83],{"class":58},[52,31261,7346],{"class":371},[52,31263,31264,31266,31268],{"class":54,"line":108},[52,31265,7351],{"class":66},[52,31267,70],{"class":231},[52,31269,7307],{"class":73},[52,31271,31272,31274,31276,31278,31280],{"class":54,"line":118},[52,31273,7361],{"class":66},[52,31275,70],{"class":231},[52,31277,723],{"class":58},[52,31279,6391],{"class":371},[52,31281,729],{"class":58},[52,31283,31284],{"class":54,"line":594},[52,31285,1224],{"class":58},[52,31287,31288,31290,31292],{"class":54,"line":600},[52,31289,121],{"class":58},[52,31291,63],{"class":371},[52,31293,77],{"class":58},[43,31295,31296],{"className":2507,"code":31245,"language":2509,"meta":48,"style":48},[31,31297,31298,31306,31312,31320,31330,31334],{"__ignoreMap":48},[52,31299,31300,31302,31304],{"class":54,"line":55},[52,31301,59],{"class":58},[52,31303,63],{"class":371},[52,31305,77],{"class":58},[52,31307,31308,31310],{"class":54,"line":80},[52,31309,83],{"class":58},[52,31311,7346],{"class":371},[52,31313,31314,31316,31318],{"class":54,"line":108},[52,31315,7351],{"class":66},[52,31317,70],{"class":58},[52,31319,7307],{"class":73},[52,31321,31322,31324,31326,31328],{"class":54,"line":118},[52,31323,7361],{"class":66},[52,31325,24845],{"class":58},[52,31327,6391],{"class":371},[52,31329,729],{"class":58},[52,31331,31332],{"class":54,"line":594},[52,31333,1224],{"class":58},[52,31335,31336,31338,31340],{"class":54,"line":600},[52,31337,121],{"class":58},[52,31339,63],{"class":371},[52,31341,77],{"class":58},[43,31343,31344],{"className":419,"code":31245,"language":420,"meta":48,"style":48},[31,31345,31346,31354,31360,31368,31380,31384],{"__ignoreMap":48},[52,31347,31348,31350,31352],{"class":54,"line":55},[52,31349,59],{"class":58},[52,31351,63],{"class":371},[52,31353,77],{"class":58},[52,31355,31356,31358],{"class":54,"line":80},[52,31357,83],{"class":58},[52,31359,7346],{"class":371},[52,31361,31362,31364,31366],{"class":54,"line":108},[52,31363,7351],{"class":66},[52,31365,70],{"class":231},[52,31367,7307],{"class":73},[52,31369,31370,31372,31374,31376,31378],{"class":54,"line":118},[52,31371,7361],{"class":66},[52,31373,70],{"class":231},[52,31375,723],{"class":58},[52,31377,6391],{"class":371},[52,31379,729],{"class":58},[52,31381,31382],{"class":54,"line":594},[52,31383,1224],{"class":58},[52,31385,31386,31388,31390],{"class":54,"line":600},[52,31387,121],{"class":58},[52,31389,63],{"class":371},[52,31391,77],{"class":58},[43,31393,31395],{"className":222,"code":31394,"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,31396,31397,31407,31411,31425,31429,31445,31449],{"__ignoreMap":48},[52,31398,31399,31401,31403,31405],{"class":54,"line":55},[52,31400,232],{"class":231},[52,31402,9231],{"class":58},[52,31404,238],{"class":231},[52,31406,9236],{"class":73},[52,31408,31409],{"class":54,"line":80},[52,31410,597],{"emptyLinePlaceholder":171},[52,31412,31413,31415,31417,31419,31421,31423],{"class":54,"line":108},[52,31414,1721],{"class":231},[52,31416,1724],{"class":371},[52,31418,1727],{"class":231},[52,31420,1730],{"class":231},[52,31422,1733],{"class":66},[52,31424,1736],{"class":58},[52,31426,31427],{"class":54,"line":118},[52,31428,1751],{"class":58},[52,31430,31431,31433,31435,31437,31439,31441,31443],{"class":54,"line":594},[52,31432,1756],{"class":58},[52,31434,2869],{"class":73},[52,31436,1762],{"class":58},[52,31438,7886],{"class":73},[52,31440,4278],{"class":58},[52,31442,6391],{"class":371},[52,31444,1768],{"class":58},[52,31446,31447],{"class":54,"line":600},[52,31448,1773],{"class":58},[52,31450,31451],{"class":54,"line":606},[52,31452,1778],{"class":58},[156,31454,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31456},[31457,31458],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Shapes",{},"/docs/components/circle",{"title":2216,"description":31184},"docs/components/Circle","6IkEAtPpkShaYl4sjatYzEXoZbaTyrMxJZqPHqQVqW4",{"id":31466,"title":31467,"body":31468,"category":27760,"componentType":20842,"description":31475,"extension":168,"meta":31660,"navigation":171,"path":31661,"requiresChild":27763,"seo":31662,"stem":31663,"__hash__":31664},"components/docs/components/ColorWheel.md","ColorWheel",{"type":8,"value":31469,"toc":31656},[31470,31473,31476,31478,31480,31483,31485,31654],[11,31471,31467],{"id":31472},"colorwheel",[15,31474,31475],{},"A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",[26901,31477],{"component":31467},[23,31479,26905],{"id":21503},[26907,31481],{":props":31482},"[{\"name\":\"mode\",\"type\":\"\\\"rainbow\\\" | \\\"custom\\\"\",\"default\":\"rainbow\",\"description\":\"Rainbow cycles through the full spectrum; Custom loops through your three chosen colors\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"First color in the cycle\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#00ff88\",\"description\":\"Second color in the cycle\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#0066ff\",\"description\":\"Third color in the cycle\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of color cycles across the viewport\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the gradient flows\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Speed at which the gradient cycles\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for blending between custom colors\"}]",[23,31484,26913],{"id":26912},[217,31486,31487,31516,31544,31572,31600],{":tabs":1543},[43,31488,31490],{"className":45,"code":31489,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CColorWheel />\n\u003C/Shader>\n",[31,31491,31492,31500,31508],{"__ignoreMap":48},[52,31493,31494,31496,31498],{"class":54,"line":55},[52,31495,59],{"class":58},[52,31497,63],{"class":62},[52,31499,77],{"class":58},[52,31501,31502,31504,31506],{"class":54,"line":80},[52,31503,83],{"class":58},[52,31505,31467],{"class":62},[52,31507,105],{"class":58},[52,31509,31510,31512,31514],{"class":54,"line":108},[52,31511,121],{"class":58},[52,31513,63],{"class":62},[52,31515,77],{"class":58},[43,31517,31518],{"className":360,"code":31489,"language":362,"meta":48,"style":48},[31,31519,31520,31528,31536],{"__ignoreMap":48},[52,31521,31522,31524,31526],{"class":54,"line":55},[52,31523,59],{"class":58},[52,31525,63],{"class":371},[52,31527,77],{"class":58},[52,31529,31530,31532,31534],{"class":54,"line":80},[52,31531,83],{"class":58},[52,31533,31467],{"class":371},[52,31535,105],{"class":58},[52,31537,31538,31540,31542],{"class":54,"line":108},[52,31539,121],{"class":58},[52,31541,63],{"class":371},[52,31543,77],{"class":58},[43,31545,31546],{"className":2507,"code":31489,"language":2509,"meta":48,"style":48},[31,31547,31548,31556,31564],{"__ignoreMap":48},[52,31549,31550,31552,31554],{"class":54,"line":55},[52,31551,59],{"class":58},[52,31553,63],{"class":371},[52,31555,77],{"class":58},[52,31557,31558,31560,31562],{"class":54,"line":80},[52,31559,83],{"class":58},[52,31561,31467],{"class":371},[52,31563,105],{"class":58},[52,31565,31566,31568,31570],{"class":54,"line":108},[52,31567,121],{"class":58},[52,31569,63],{"class":371},[52,31571,77],{"class":58},[43,31573,31574],{"className":419,"code":31489,"language":420,"meta":48,"style":48},[31,31575,31576,31584,31592],{"__ignoreMap":48},[52,31577,31578,31580,31582],{"class":54,"line":55},[52,31579,59],{"class":58},[52,31581,63],{"class":371},[52,31583,77],{"class":58},[52,31585,31586,31588,31590],{"class":54,"line":80},[52,31587,83],{"class":58},[52,31589,31467],{"class":371},[52,31591,105],{"class":58},[52,31593,31594,31596,31598],{"class":54,"line":108},[52,31595,121],{"class":58},[52,31597,63],{"class":371},[52,31599,77],{"class":58},[43,31601,31603],{"className":222,"code":31602,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ColorWheel', props: {} }\n ]\n})\n",[31,31604,31605,31615,31619,31633,31637,31646,31650],{"__ignoreMap":48},[52,31606,31607,31609,31611,31613],{"class":54,"line":55},[52,31608,232],{"class":231},[52,31610,9231],{"class":58},[52,31612,238],{"class":231},[52,31614,9236],{"class":73},[52,31616,31617],{"class":54,"line":80},[52,31618,597],{"emptyLinePlaceholder":171},[52,31620,31621,31623,31625,31627,31629,31631],{"class":54,"line":108},[52,31622,1721],{"class":231},[52,31624,1724],{"class":371},[52,31626,1727],{"class":231},[52,31628,1730],{"class":231},[52,31630,1733],{"class":66},[52,31632,1736],{"class":58},[52,31634,31635],{"class":54,"line":118},[52,31636,1751],{"class":58},[52,31638,31639,31641,31644],{"class":54,"line":594},[52,31640,1756],{"class":58},[52,31642,31643],{"class":73},"'ColorWheel'",[52,31645,2129],{"class":58},[52,31647,31648],{"class":54,"line":600},[52,31649,1773],{"class":58},[52,31651,31652],{"class":54,"line":606},[52,31653,1778],{"class":58},[156,31655,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":31657},[31658,31659],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/colorwheel",{"title":31467,"description":31475},"docs/components/ColorWheel","cJlbvGiGEu1REkaIciqBw8iFVx5iTiw2S5bxvQzcFYY",{"id":31666,"title":31667,"body":31668,"category":28094,"componentType":20848,"description":31675,"extension":168,"meta":31992,"navigation":171,"path":31993,"requiresChild":171,"seo":31994,"stem":31995,"__hash__":31996},"components/docs/components/ConcentricSpin.md","ConcentricSpin",{"type":8,"value":31669,"toc":31988},[31670,31673,31676,31678,31680,31683,31685,31986],[11,31671,31667],{"id":31672},"concentricspin",[15,31674,31675],{},"Concentric rings that each rotate the underlying image by different amounts",[26901,31677],{"component":31667},[23,31679,26905],{"id":21503},[26907,31681],{":props":31682},"[{\"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,31684,26913],{"id":26912},[217,31686,31687,31743,31802,31858,31916],{":tabs":1543},[43,31688,31690],{"className":45,"code":31689,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,31691,31692,31700,31707,31715,31719,31727,31735],{"__ignoreMap":48},[52,31693,31694,31696,31698],{"class":54,"line":55},[52,31695,59],{"class":58},[52,31697,63],{"class":62},[52,31699,77],{"class":58},[52,31701,31702,31704],{"class":54,"line":80},[52,31703,83],{"class":58},[52,31705,31706],{"class":62},"ConcentricSpin\n",[52,31708,31709,31711,31713],{"class":54,"line":108},[52,31710,17870],{"class":66},[52,31712,70],{"class":58},[52,31714,26944],{"class":73},[52,31716,31717],{"class":54,"line":118},[52,31718,26949],{"class":58},[52,31720,31721,31723,31725],{"class":54,"line":594},[52,31722,2213],{"class":58},[52,31724,2216],{"class":62},[52,31726,105],{"class":58},[52,31728,31729,31731,31733],{"class":54,"line":600},[52,31730,2230],{"class":58},[52,31732,31667],{"class":62},[52,31734,77],{"class":58},[52,31736,31737,31739,31741],{"class":54,"line":606},[52,31738,121],{"class":58},[52,31740,63],{"class":62},[52,31742,77],{"class":58},[43,31744,31746],{"className":360,"code":31745,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,31747,31748,31756,31762,31774,31778,31786,31794],{"__ignoreMap":48},[52,31749,31750,31752,31754],{"class":54,"line":55},[52,31751,59],{"class":58},[52,31753,63],{"class":371},[52,31755,77],{"class":58},[52,31757,31758,31760],{"class":54,"line":80},[52,31759,83],{"class":58},[52,31761,31706],{"class":371},[52,31763,31764,31766,31768,31770,31772],{"class":54,"line":108},[52,31765,17981],{"class":66},[52,31767,70],{"class":231},[52,31769,723],{"class":58},[52,31771,27003],{"class":371},[52,31773,729],{"class":58},[52,31775,31776],{"class":54,"line":118},[52,31777,26949],{"class":58},[52,31779,31780,31782,31784],{"class":54,"line":594},[52,31781,2213],{"class":58},[52,31783,2216],{"class":371},[52,31785,105],{"class":58},[52,31787,31788,31790,31792],{"class":54,"line":600},[52,31789,2230],{"class":58},[52,31791,31667],{"class":371},[52,31793,77],{"class":58},[52,31795,31796,31798,31800],{"class":54,"line":606},[52,31797,121],{"class":58},[52,31799,63],{"class":371},[52,31801,77],{"class":58},[43,31803,31804],{"className":2507,"code":31745,"language":2509,"meta":48,"style":48},[31,31805,31806,31814,31820,31830,31834,31842,31850],{"__ignoreMap":48},[52,31807,31808,31810,31812],{"class":54,"line":55},[52,31809,59],{"class":58},[52,31811,63],{"class":371},[52,31813,77],{"class":58},[52,31815,31816,31818],{"class":54,"line":80},[52,31817,83],{"class":58},[52,31819,31706],{"class":371},[52,31821,31822,31824,31826,31828],{"class":54,"line":108},[52,31823,17981],{"class":66},[52,31825,24845],{"class":58},[52,31827,27003],{"class":371},[52,31829,729],{"class":58},[52,31831,31832],{"class":54,"line":118},[52,31833,26949],{"class":58},[52,31835,31836,31838,31840],{"class":54,"line":594},[52,31837,2213],{"class":58},[52,31839,2216],{"class":371},[52,31841,105],{"class":58},[52,31843,31844,31846,31848],{"class":54,"line":600},[52,31845,2230],{"class":58},[52,31847,31667],{"class":371},[52,31849,77],{"class":58},[52,31851,31852,31854,31856],{"class":54,"line":606},[52,31853,121],{"class":58},[52,31855,63],{"class":371},[52,31857,77],{"class":58},[43,31859,31860],{"className":419,"code":31745,"language":420,"meta":48,"style":48},[31,31861,31862,31870,31876,31888,31892,31900,31908],{"__ignoreMap":48},[52,31863,31864,31866,31868],{"class":54,"line":55},[52,31865,59],{"class":58},[52,31867,63],{"class":371},[52,31869,77],{"class":58},[52,31871,31872,31874],{"class":54,"line":80},[52,31873,83],{"class":58},[52,31875,31706],{"class":371},[52,31877,31878,31880,31882,31884,31886],{"class":54,"line":108},[52,31879,17981],{"class":66},[52,31881,70],{"class":231},[52,31883,723],{"class":58},[52,31885,27003],{"class":371},[52,31887,729],{"class":58},[52,31889,31890],{"class":54,"line":118},[52,31891,26949],{"class":58},[52,31893,31894,31896,31898],{"class":54,"line":594},[52,31895,2213],{"class":58},[52,31897,2216],{"class":371},[52,31899,105],{"class":58},[52,31901,31902,31904,31906],{"class":54,"line":600},[52,31903,2230],{"class":58},[52,31905,31667],{"class":371},[52,31907,77],{"class":58},[52,31909,31910,31912,31914],{"class":54,"line":606},[52,31911,121],{"class":58},[52,31913,63],{"class":371},[52,31915,77],{"class":58},[43,31917,31919],{"className":222,"code":31918,"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,31920,31921,31931,31935,31949,31953,31966,31974,31978,31982],{"__ignoreMap":48},[52,31922,31923,31925,31927,31929],{"class":54,"line":55},[52,31924,232],{"class":231},[52,31926,9231],{"class":58},[52,31928,238],{"class":231},[52,31930,9236],{"class":73},[52,31932,31933],{"class":54,"line":80},[52,31934,597],{"emptyLinePlaceholder":171},[52,31936,31937,31939,31941,31943,31945,31947],{"class":54,"line":108},[52,31938,1721],{"class":231},[52,31940,1724],{"class":371},[52,31942,1727],{"class":231},[52,31944,1730],{"class":231},[52,31946,1733],{"class":66},[52,31948,1736],{"class":58},[52,31950,31951],{"class":54,"line":118},[52,31952,1751],{"class":58},[52,31954,31955,31957,31960,31962,31964],{"class":54,"line":594},[52,31956,1756],{"class":58},[52,31958,31959],{"class":73},"'ConcentricSpin'",[52,31961,27194],{"class":58},[52,31963,27003],{"class":371},[52,31965,5259],{"class":58},[52,31967,31968,31970,31972],{"class":54,"line":600},[52,31969,4727],{"class":58},[52,31971,2869],{"class":73},[52,31973,2129],{"class":58},[52,31975,31976],{"class":54,"line":606},[52,31977,4744],{"class":58},[52,31979,31980],{"class":54,"line":653},[52,31981,1773],{"class":58},[52,31983,31984],{"class":54,"line":662},[52,31985,1778],{"class":58},[156,31987,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31989},[31990,31991],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/concentricspin",{"title":31667,"description":31675},"docs/components/ConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":31998,"title":31999,"body":32000,"category":27760,"componentType":20842,"description":32007,"extension":168,"meta":32192,"navigation":171,"path":32193,"requiresChild":27763,"seo":32194,"stem":32195,"__hash__":32196},"components/docs/components/ConicGradient.md","ConicGradient",{"type":8,"value":32001,"toc":32188},[32002,32005,32008,32010,32012,32015,32017,32186],[11,32003,31999],{"id":32004},"conicgradient",[15,32006,32007],{},"Colors sweep in a full circle around a center point, like a color wheel",[26901,32009],{"component":31999},[23,32011,26905],{"id":21503},[26907,32013],{":props":32014},"[{\"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,32016,26913],{"id":26912},[217,32018,32019,32048,32076,32104,32132],{":tabs":1543},[43,32020,32022],{"className":45,"code":32021,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConicGradient />\n\u003C/Shader>\n",[31,32023,32024,32032,32040],{"__ignoreMap":48},[52,32025,32026,32028,32030],{"class":54,"line":55},[52,32027,59],{"class":58},[52,32029,63],{"class":62},[52,32031,77],{"class":58},[52,32033,32034,32036,32038],{"class":54,"line":80},[52,32035,83],{"class":58},[52,32037,31999],{"class":62},[52,32039,105],{"class":58},[52,32041,32042,32044,32046],{"class":54,"line":108},[52,32043,121],{"class":58},[52,32045,63],{"class":62},[52,32047,77],{"class":58},[43,32049,32050],{"className":360,"code":32021,"language":362,"meta":48,"style":48},[31,32051,32052,32060,32068],{"__ignoreMap":48},[52,32053,32054,32056,32058],{"class":54,"line":55},[52,32055,59],{"class":58},[52,32057,63],{"class":371},[52,32059,77],{"class":58},[52,32061,32062,32064,32066],{"class":54,"line":80},[52,32063,83],{"class":58},[52,32065,31999],{"class":371},[52,32067,105],{"class":58},[52,32069,32070,32072,32074],{"class":54,"line":108},[52,32071,121],{"class":58},[52,32073,63],{"class":371},[52,32075,77],{"class":58},[43,32077,32078],{"className":2507,"code":32021,"language":2509,"meta":48,"style":48},[31,32079,32080,32088,32096],{"__ignoreMap":48},[52,32081,32082,32084,32086],{"class":54,"line":55},[52,32083,59],{"class":58},[52,32085,63],{"class":371},[52,32087,77],{"class":58},[52,32089,32090,32092,32094],{"class":54,"line":80},[52,32091,83],{"class":58},[52,32093,31999],{"class":371},[52,32095,105],{"class":58},[52,32097,32098,32100,32102],{"class":54,"line":108},[52,32099,121],{"class":58},[52,32101,63],{"class":371},[52,32103,77],{"class":58},[43,32105,32106],{"className":419,"code":32021,"language":420,"meta":48,"style":48},[31,32107,32108,32116,32124],{"__ignoreMap":48},[52,32109,32110,32112,32114],{"class":54,"line":55},[52,32111,59],{"class":58},[52,32113,63],{"class":371},[52,32115,77],{"class":58},[52,32117,32118,32120,32122],{"class":54,"line":80},[52,32119,83],{"class":58},[52,32121,31999],{"class":371},[52,32123,105],{"class":58},[52,32125,32126,32128,32130],{"class":54,"line":108},[52,32127,121],{"class":58},[52,32129,63],{"class":371},[52,32131,77],{"class":58},[43,32133,32135],{"className":222,"code":32134,"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,32136,32137,32147,32151,32165,32169,32178,32182],{"__ignoreMap":48},[52,32138,32139,32141,32143,32145],{"class":54,"line":55},[52,32140,232],{"class":231},[52,32142,9231],{"class":58},[52,32144,238],{"class":231},[52,32146,9236],{"class":73},[52,32148,32149],{"class":54,"line":80},[52,32150,597],{"emptyLinePlaceholder":171},[52,32152,32153,32155,32157,32159,32161,32163],{"class":54,"line":108},[52,32154,1721],{"class":231},[52,32156,1724],{"class":371},[52,32158,1727],{"class":231},[52,32160,1730],{"class":231},[52,32162,1733],{"class":66},[52,32164,1736],{"class":58},[52,32166,32167],{"class":54,"line":118},[52,32168,1751],{"class":58},[52,32170,32171,32173,32176],{"class":54,"line":594},[52,32172,1756],{"class":58},[52,32174,32175],{"class":73},"'ConicGradient'",[52,32177,2129],{"class":58},[52,32179,32180],{"class":54,"line":600},[52,32181,1773],{"class":58},[52,32183,32184],{"class":54,"line":606},[52,32185,1778],{"class":58},[156,32187,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":32189},[32190,32191],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/conicgradient",{"title":31999,"description":32007},"docs/components/ConicGradient","NIVNPxXJkDB1SOPz03uSQXaV6QUuIWABabpG6Qi-clQ",{"id":32198,"title":32199,"body":32200,"category":27503,"componentType":20848,"description":32207,"extension":168,"meta":32468,"navigation":171,"path":32469,"requiresChild":171,"seo":32470,"stem":32471,"__hash__":32472},"components/docs/components/ContourLines.md","ContourLines",{"type":8,"value":32201,"toc":32464},[32202,32205,32208,32210,32212,32215,32217,32462],[11,32203,32199],{"id":32204},"contourlines",[15,32206,32207],{},"Draw topographical contour lines based on luminance or alpha",[26901,32209],{"component":32199},[23,32211,26905],{"id":21503},[26907,32213],{":props":32214},"[{\"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,32216,26913],{"id":26912},[217,32218,32219,32264,32308,32352,32396],{":tabs":1543},[43,32220,32222],{"className":45,"code":32221,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CContourLines>\n \u003CCircle />\n \u003C/ContourLines>\n\u003C/Shader>\n",[31,32223,32224,32232,32240,32248,32256],{"__ignoreMap":48},[52,32225,32226,32228,32230],{"class":54,"line":55},[52,32227,59],{"class":58},[52,32229,63],{"class":62},[52,32231,77],{"class":58},[52,32233,32234,32236,32238],{"class":54,"line":80},[52,32235,83],{"class":58},[52,32237,32199],{"class":62},[52,32239,77],{"class":58},[52,32241,32242,32244,32246],{"class":54,"line":108},[52,32243,2213],{"class":58},[52,32245,2216],{"class":62},[52,32247,105],{"class":58},[52,32249,32250,32252,32254],{"class":54,"line":118},[52,32251,2230],{"class":58},[52,32253,32199],{"class":62},[52,32255,77],{"class":58},[52,32257,32258,32260,32262],{"class":54,"line":594},[52,32259,121],{"class":58},[52,32261,63],{"class":62},[52,32263,77],{"class":58},[43,32265,32266],{"className":360,"code":32221,"language":362,"meta":48,"style":48},[31,32267,32268,32276,32284,32292,32300],{"__ignoreMap":48},[52,32269,32270,32272,32274],{"class":54,"line":55},[52,32271,59],{"class":58},[52,32273,63],{"class":371},[52,32275,77],{"class":58},[52,32277,32278,32280,32282],{"class":54,"line":80},[52,32279,83],{"class":58},[52,32281,32199],{"class":371},[52,32283,77],{"class":58},[52,32285,32286,32288,32290],{"class":54,"line":108},[52,32287,2213],{"class":58},[52,32289,2216],{"class":371},[52,32291,105],{"class":58},[52,32293,32294,32296,32298],{"class":54,"line":118},[52,32295,2230],{"class":58},[52,32297,32199],{"class":371},[52,32299,77],{"class":58},[52,32301,32302,32304,32306],{"class":54,"line":594},[52,32303,121],{"class":58},[52,32305,63],{"class":371},[52,32307,77],{"class":58},[43,32309,32310],{"className":2507,"code":32221,"language":2509,"meta":48,"style":48},[31,32311,32312,32320,32328,32336,32344],{"__ignoreMap":48},[52,32313,32314,32316,32318],{"class":54,"line":55},[52,32315,59],{"class":58},[52,32317,63],{"class":371},[52,32319,77],{"class":58},[52,32321,32322,32324,32326],{"class":54,"line":80},[52,32323,83],{"class":58},[52,32325,32199],{"class":371},[52,32327,77],{"class":58},[52,32329,32330,32332,32334],{"class":54,"line":108},[52,32331,2213],{"class":58},[52,32333,2216],{"class":371},[52,32335,105],{"class":58},[52,32337,32338,32340,32342],{"class":54,"line":118},[52,32339,2230],{"class":58},[52,32341,32199],{"class":371},[52,32343,77],{"class":58},[52,32345,32346,32348,32350],{"class":54,"line":594},[52,32347,121],{"class":58},[52,32349,63],{"class":371},[52,32351,77],{"class":58},[43,32353,32354],{"className":419,"code":32221,"language":420,"meta":48,"style":48},[31,32355,32356,32364,32372,32380,32388],{"__ignoreMap":48},[52,32357,32358,32360,32362],{"class":54,"line":55},[52,32359,59],{"class":58},[52,32361,63],{"class":371},[52,32363,77],{"class":58},[52,32365,32366,32368,32370],{"class":54,"line":80},[52,32367,83],{"class":58},[52,32369,32199],{"class":371},[52,32371,77],{"class":58},[52,32373,32374,32376,32378],{"class":54,"line":108},[52,32375,2213],{"class":58},[52,32377,2216],{"class":371},[52,32379,105],{"class":58},[52,32381,32382,32384,32386],{"class":54,"line":118},[52,32383,2230],{"class":58},[52,32385,32199],{"class":371},[52,32387,77],{"class":58},[52,32389,32390,32392,32394],{"class":54,"line":594},[52,32391,121],{"class":58},[52,32393,63],{"class":371},[52,32395,77],{"class":58},[43,32397,32399],{"className":222,"code":32398,"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,32400,32401,32411,32415,32429,32433,32442,32450,32454,32458],{"__ignoreMap":48},[52,32402,32403,32405,32407,32409],{"class":54,"line":55},[52,32404,232],{"class":231},[52,32406,9231],{"class":58},[52,32408,238],{"class":231},[52,32410,9236],{"class":73},[52,32412,32413],{"class":54,"line":80},[52,32414,597],{"emptyLinePlaceholder":171},[52,32416,32417,32419,32421,32423,32425,32427],{"class":54,"line":108},[52,32418,1721],{"class":231},[52,32420,1724],{"class":371},[52,32422,1727],{"class":231},[52,32424,1730],{"class":231},[52,32426,1733],{"class":66},[52,32428,1736],{"class":58},[52,32430,32431],{"class":54,"line":118},[52,32432,1751],{"class":58},[52,32434,32435,32437,32440],{"class":54,"line":594},[52,32436,1756],{"class":58},[52,32438,32439],{"class":73},"'ContourLines'",[52,32441,4722],{"class":58},[52,32443,32444,32446,32448],{"class":54,"line":600},[52,32445,4727],{"class":58},[52,32447,2869],{"class":73},[52,32449,2129],{"class":58},[52,32451,32452],{"class":54,"line":606},[52,32453,4744],{"class":58},[52,32455,32456],{"class":54,"line":653},[52,32457,1773],{"class":58},[52,32459,32460],{"class":54,"line":662},[52,32461,1778],{"class":58},[156,32463,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":32465},[32466,32467],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/contourlines",{"title":32199,"description":32207},"docs/components/ContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":32474,"title":32475,"body":32476,"category":31459,"componentType":20842,"description":32483,"extension":168,"meta":32761,"navigation":171,"path":32762,"requiresChild":27763,"seo":32763,"stem":32764,"__hash__":32765},"components/docs/components/Crescent.md","Crescent",{"type":8,"value":32477,"toc":32757},[32478,32481,32484,32486,32488,32491,32493,32755],[11,32479,32475],{"id":32480},"crescent",[15,32482,32483],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[26901,32485],{"component":32475},[23,32487,26905],{"id":21503},[26907,32489],{":props":32490},"[{\"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,32492,26913],{"id":26912},[217,32494,32495,32544,32595,32643,32693],{":tabs":1543},[43,32496,32498],{"className":45,"code":32497,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,32499,32500,32508,32515,32523,32532,32536],{"__ignoreMap":48},[52,32501,32502,32504,32506],{"class":54,"line":55},[52,32503,59],{"class":58},[52,32505,63],{"class":62},[52,32507,77],{"class":58},[52,32509,32510,32512],{"class":54,"line":80},[52,32511,83],{"class":58},[52,32513,32514],{"class":62},"Crescent\n",[52,32516,32517,32519,32521],{"class":54,"line":108},[52,32518,7351],{"class":66},[52,32520,70],{"class":58},[52,32522,7307],{"class":73},[52,32524,32525,32527,32529],{"class":54,"line":118},[52,32526,14901],{"class":66},[52,32528,70],{"class":58},[52,32530,32531],{"class":73},"\"0.3\"\n",[52,32533,32534],{"class":54,"line":594},[52,32535,1224],{"class":58},[52,32537,32538,32540,32542],{"class":54,"line":600},[52,32539,121],{"class":58},[52,32541,63],{"class":62},[52,32543,77],{"class":58},[43,32545,32547],{"className":360,"code":32546,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,32548,32549,32557,32563,32571,32583,32587],{"__ignoreMap":48},[52,32550,32551,32553,32555],{"class":54,"line":55},[52,32552,59],{"class":58},[52,32554,63],{"class":371},[52,32556,77],{"class":58},[52,32558,32559,32561],{"class":54,"line":80},[52,32560,83],{"class":58},[52,32562,32514],{"class":371},[52,32564,32565,32567,32569],{"class":54,"line":108},[52,32566,7351],{"class":66},[52,32568,70],{"class":231},[52,32570,7307],{"class":73},[52,32572,32573,32575,32577,32579,32581],{"class":54,"line":118},[52,32574,7361],{"class":66},[52,32576,70],{"class":231},[52,32578,723],{"class":58},[52,32580,19478],{"class":371},[52,32582,729],{"class":58},[52,32584,32585],{"class":54,"line":594},[52,32586,1224],{"class":58},[52,32588,32589,32591,32593],{"class":54,"line":600},[52,32590,121],{"class":58},[52,32592,63],{"class":371},[52,32594,77],{"class":58},[43,32596,32597],{"className":2507,"code":32546,"language":2509,"meta":48,"style":48},[31,32598,32599,32607,32613,32621,32631,32635],{"__ignoreMap":48},[52,32600,32601,32603,32605],{"class":54,"line":55},[52,32602,59],{"class":58},[52,32604,63],{"class":371},[52,32606,77],{"class":58},[52,32608,32609,32611],{"class":54,"line":80},[52,32610,83],{"class":58},[52,32612,32514],{"class":371},[52,32614,32615,32617,32619],{"class":54,"line":108},[52,32616,7351],{"class":66},[52,32618,70],{"class":58},[52,32620,7307],{"class":73},[52,32622,32623,32625,32627,32629],{"class":54,"line":118},[52,32624,7361],{"class":66},[52,32626,24845],{"class":58},[52,32628,19478],{"class":371},[52,32630,729],{"class":58},[52,32632,32633],{"class":54,"line":594},[52,32634,1224],{"class":58},[52,32636,32637,32639,32641],{"class":54,"line":600},[52,32638,121],{"class":58},[52,32640,63],{"class":371},[52,32642,77],{"class":58},[43,32644,32645],{"className":419,"code":32546,"language":420,"meta":48,"style":48},[31,32646,32647,32655,32661,32669,32681,32685],{"__ignoreMap":48},[52,32648,32649,32651,32653],{"class":54,"line":55},[52,32650,59],{"class":58},[52,32652,63],{"class":371},[52,32654,77],{"class":58},[52,32656,32657,32659],{"class":54,"line":80},[52,32658,83],{"class":58},[52,32660,32514],{"class":371},[52,32662,32663,32665,32667],{"class":54,"line":108},[52,32664,7351],{"class":66},[52,32666,70],{"class":231},[52,32668,7307],{"class":73},[52,32670,32671,32673,32675,32677,32679],{"class":54,"line":118},[52,32672,7361],{"class":66},[52,32674,70],{"class":231},[52,32676,723],{"class":58},[52,32678,19478],{"class":371},[52,32680,729],{"class":58},[52,32682,32683],{"class":54,"line":594},[52,32684,1224],{"class":58},[52,32686,32687,32689,32691],{"class":54,"line":600},[52,32688,121],{"class":58},[52,32690,63],{"class":371},[52,32692,77],{"class":58},[43,32694,32696],{"className":222,"code":32695,"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,32697,32698,32708,32712,32726,32730,32747,32751],{"__ignoreMap":48},[52,32699,32700,32702,32704,32706],{"class":54,"line":55},[52,32701,232],{"class":231},[52,32703,9231],{"class":58},[52,32705,238],{"class":231},[52,32707,9236],{"class":73},[52,32709,32710],{"class":54,"line":80},[52,32711,597],{"emptyLinePlaceholder":171},[52,32713,32714,32716,32718,32720,32722,32724],{"class":54,"line":108},[52,32715,1721],{"class":231},[52,32717,1724],{"class":371},[52,32719,1727],{"class":231},[52,32721,1730],{"class":231},[52,32723,1733],{"class":66},[52,32725,1736],{"class":58},[52,32727,32728],{"class":54,"line":118},[52,32729,1751],{"class":58},[52,32731,32732,32734,32737,32739,32741,32743,32745],{"class":54,"line":594},[52,32733,1756],{"class":58},[52,32735,32736],{"class":73},"'Crescent'",[52,32738,1762],{"class":58},[52,32740,7886],{"class":73},[52,32742,4278],{"class":58},[52,32744,19478],{"class":371},[52,32746,1768],{"class":58},[52,32748,32749],{"class":54,"line":600},[52,32750,1773],{"class":58},[52,32752,32753],{"class":54,"line":606},[52,32754,1778],{"class":58},[156,32756,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32758},[32759,32760],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/crescent",{"title":32475,"description":32483},"docs/components/Crescent","ObqUw-47jUNAlPME041OasGzcc_jSvwXgXEVE3NCaLk",{"id":32767,"title":32768,"body":32769,"category":31459,"componentType":20842,"description":32776,"extension":168,"meta":33054,"navigation":171,"path":33055,"requiresChild":27763,"seo":33056,"stem":33057,"__hash__":33058},"components/docs/components/Cross.md","Cross",{"type":8,"value":32770,"toc":33050},[32771,32774,32777,32779,32781,32784,32786,33048],[11,32772,32768],{"id":32773},"cross",[15,32775,32776],{},"Plus / cross shape with adjustable arm length, width, and rounding",[26901,32778],{"component":32768},[23,32780,26905],{"id":21503},[26907,32782],{":props":32783},"[{\"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,32785,26913],{"id":26912},[217,32787,32788,32837,32888,32936,32986],{":tabs":1543},[43,32789,32791],{"className":45,"code":32790,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,32792,32793,32801,32808,32816,32825,32829],{"__ignoreMap":48},[52,32794,32795,32797,32799],{"class":54,"line":55},[52,32796,59],{"class":58},[52,32798,63],{"class":62},[52,32800,77],{"class":58},[52,32802,32803,32805],{"class":54,"line":80},[52,32804,83],{"class":58},[52,32806,32807],{"class":62},"Cross\n",[52,32809,32810,32812,32814],{"class":54,"line":108},[52,32811,7351],{"class":66},[52,32813,70],{"class":58},[52,32815,7307],{"class":73},[52,32817,32818,32820,32822],{"class":54,"line":118},[52,32819,14901],{"class":66},[52,32821,70],{"class":58},[52,32823,32824],{"class":73},"\"0.35\"\n",[52,32826,32827],{"class":54,"line":594},[52,32828,1224],{"class":58},[52,32830,32831,32833,32835],{"class":54,"line":600},[52,32832,121],{"class":58},[52,32834,63],{"class":62},[52,32836,77],{"class":58},[43,32838,32840],{"className":360,"code":32839,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,32841,32842,32850,32856,32864,32876,32880],{"__ignoreMap":48},[52,32843,32844,32846,32848],{"class":54,"line":55},[52,32845,59],{"class":58},[52,32847,63],{"class":371},[52,32849,77],{"class":58},[52,32851,32852,32854],{"class":54,"line":80},[52,32853,83],{"class":58},[52,32855,32807],{"class":371},[52,32857,32858,32860,32862],{"class":54,"line":108},[52,32859,7351],{"class":66},[52,32861,70],{"class":231},[52,32863,7307],{"class":73},[52,32865,32866,32868,32870,32872,32874],{"class":54,"line":118},[52,32867,7361],{"class":66},[52,32869,70],{"class":231},[52,32871,723],{"class":58},[52,32873,18630],{"class":371},[52,32875,729],{"class":58},[52,32877,32878],{"class":54,"line":594},[52,32879,1224],{"class":58},[52,32881,32882,32884,32886],{"class":54,"line":600},[52,32883,121],{"class":58},[52,32885,63],{"class":371},[52,32887,77],{"class":58},[43,32889,32890],{"className":2507,"code":32839,"language":2509,"meta":48,"style":48},[31,32891,32892,32900,32906,32914,32924,32928],{"__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,32807],{"class":371},[52,32907,32908,32910,32912],{"class":54,"line":108},[52,32909,7351],{"class":66},[52,32911,70],{"class":58},[52,32913,7307],{"class":73},[52,32915,32916,32918,32920,32922],{"class":54,"line":118},[52,32917,7361],{"class":66},[52,32919,24845],{"class":58},[52,32921,18630],{"class":371},[52,32923,729],{"class":58},[52,32925,32926],{"class":54,"line":594},[52,32927,1224],{"class":58},[52,32929,32930,32932,32934],{"class":54,"line":600},[52,32931,121],{"class":58},[52,32933,63],{"class":371},[52,32935,77],{"class":58},[43,32937,32938],{"className":419,"code":32839,"language":420,"meta":48,"style":48},[31,32939,32940,32948,32954,32962,32974,32978],{"__ignoreMap":48},[52,32941,32942,32944,32946],{"class":54,"line":55},[52,32943,59],{"class":58},[52,32945,63],{"class":371},[52,32947,77],{"class":58},[52,32949,32950,32952],{"class":54,"line":80},[52,32951,83],{"class":58},[52,32953,32807],{"class":371},[52,32955,32956,32958,32960],{"class":54,"line":108},[52,32957,7351],{"class":66},[52,32959,70],{"class":231},[52,32961,7307],{"class":73},[52,32963,32964,32966,32968,32970,32972],{"class":54,"line":118},[52,32965,7361],{"class":66},[52,32967,70],{"class":231},[52,32969,723],{"class":58},[52,32971,18630],{"class":371},[52,32973,729],{"class":58},[52,32975,32976],{"class":54,"line":594},[52,32977,1224],{"class":58},[52,32979,32980,32982,32984],{"class":54,"line":600},[52,32981,121],{"class":58},[52,32983,63],{"class":371},[52,32985,77],{"class":58},[43,32987,32989],{"className":222,"code":32988,"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,32990,32991,33001,33005,33019,33023,33040,33044],{"__ignoreMap":48},[52,32992,32993,32995,32997,32999],{"class":54,"line":55},[52,32994,232],{"class":231},[52,32996,9231],{"class":58},[52,32998,238],{"class":231},[52,33000,9236],{"class":73},[52,33002,33003],{"class":54,"line":80},[52,33004,597],{"emptyLinePlaceholder":171},[52,33006,33007,33009,33011,33013,33015,33017],{"class":54,"line":108},[52,33008,1721],{"class":231},[52,33010,1724],{"class":371},[52,33012,1727],{"class":231},[52,33014,1730],{"class":231},[52,33016,1733],{"class":66},[52,33018,1736],{"class":58},[52,33020,33021],{"class":54,"line":118},[52,33022,1751],{"class":58},[52,33024,33025,33027,33030,33032,33034,33036,33038],{"class":54,"line":594},[52,33026,1756],{"class":58},[52,33028,33029],{"class":73},"'Cross'",[52,33031,1762],{"class":58},[52,33033,7886],{"class":73},[52,33035,4278],{"class":58},[52,33037,18630],{"class":371},[52,33039,1768],{"class":58},[52,33041,33042],{"class":54,"line":600},[52,33043,1773],{"class":58},[52,33045,33046],{"class":54,"line":606},[52,33047,1778],{"class":58},[156,33049,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33051},[33052,33053],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cross",{"title":32768,"description":32776},"docs/components/Cross","8h8ZHf2RZRmwG-7PmNT2Lcb_l-kH3tvrmVN0fWFbTNs",{"id":33060,"title":33061,"body":33062,"category":33330,"componentType":20848,"description":33069,"extension":168,"meta":33331,"navigation":171,"path":33332,"requiresChild":171,"seo":33333,"stem":33334,"__hash__":33335},"components/docs/components/Crystal.md","Crystal",{"type":8,"value":33063,"toc":33326},[33064,33067,33070,33072,33074,33077,33079,33324],[11,33065,33061],{"id":33066},"crystal",[15,33068,33069],{},"Diamond-like crystal lens with faceted refraction.",[26901,33071],{"component":33061},[23,33073,26905],{"id":21503},[26907,33075],{":props":33076},"[{\"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,33078,26913],{"id":26912},[217,33080,33081,33126,33170,33214,33258],{":tabs":1543},[43,33082,33084],{"className":45,"code":33083,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrystal>\n \u003CCircle />\n \u003C/Crystal>\n\u003C/Shader>\n",[31,33085,33086,33094,33102,33110,33118],{"__ignoreMap":48},[52,33087,33088,33090,33092],{"class":54,"line":55},[52,33089,59],{"class":58},[52,33091,63],{"class":62},[52,33093,77],{"class":58},[52,33095,33096,33098,33100],{"class":54,"line":80},[52,33097,83],{"class":58},[52,33099,33061],{"class":62},[52,33101,77],{"class":58},[52,33103,33104,33106,33108],{"class":54,"line":108},[52,33105,2213],{"class":58},[52,33107,2216],{"class":62},[52,33109,105],{"class":58},[52,33111,33112,33114,33116],{"class":54,"line":118},[52,33113,2230],{"class":58},[52,33115,33061],{"class":62},[52,33117,77],{"class":58},[52,33119,33120,33122,33124],{"class":54,"line":594},[52,33121,121],{"class":58},[52,33123,63],{"class":62},[52,33125,77],{"class":58},[43,33127,33128],{"className":360,"code":33083,"language":362,"meta":48,"style":48},[31,33129,33130,33138,33146,33154,33162],{"__ignoreMap":48},[52,33131,33132,33134,33136],{"class":54,"line":55},[52,33133,59],{"class":58},[52,33135,63],{"class":371},[52,33137,77],{"class":58},[52,33139,33140,33142,33144],{"class":54,"line":80},[52,33141,83],{"class":58},[52,33143,33061],{"class":371},[52,33145,77],{"class":58},[52,33147,33148,33150,33152],{"class":54,"line":108},[52,33149,2213],{"class":58},[52,33151,2216],{"class":371},[52,33153,105],{"class":58},[52,33155,33156,33158,33160],{"class":54,"line":118},[52,33157,2230],{"class":58},[52,33159,33061],{"class":371},[52,33161,77],{"class":58},[52,33163,33164,33166,33168],{"class":54,"line":594},[52,33165,121],{"class":58},[52,33167,63],{"class":371},[52,33169,77],{"class":58},[43,33171,33172],{"className":2507,"code":33083,"language":2509,"meta":48,"style":48},[31,33173,33174,33182,33190,33198,33206],{"__ignoreMap":48},[52,33175,33176,33178,33180],{"class":54,"line":55},[52,33177,59],{"class":58},[52,33179,63],{"class":371},[52,33181,77],{"class":58},[52,33183,33184,33186,33188],{"class":54,"line":80},[52,33185,83],{"class":58},[52,33187,33061],{"class":371},[52,33189,77],{"class":58},[52,33191,33192,33194,33196],{"class":54,"line":108},[52,33193,2213],{"class":58},[52,33195,2216],{"class":371},[52,33197,105],{"class":58},[52,33199,33200,33202,33204],{"class":54,"line":118},[52,33201,2230],{"class":58},[52,33203,33061],{"class":371},[52,33205,77],{"class":58},[52,33207,33208,33210,33212],{"class":54,"line":594},[52,33209,121],{"class":58},[52,33211,63],{"class":371},[52,33213,77],{"class":58},[43,33215,33216],{"className":419,"code":33083,"language":420,"meta":48,"style":48},[31,33217,33218,33226,33234,33242,33250],{"__ignoreMap":48},[52,33219,33220,33222,33224],{"class":54,"line":55},[52,33221,59],{"class":58},[52,33223,63],{"class":371},[52,33225,77],{"class":58},[52,33227,33228,33230,33232],{"class":54,"line":80},[52,33229,83],{"class":58},[52,33231,33061],{"class":371},[52,33233,77],{"class":58},[52,33235,33236,33238,33240],{"class":54,"line":108},[52,33237,2213],{"class":58},[52,33239,2216],{"class":371},[52,33241,105],{"class":58},[52,33243,33244,33246,33248],{"class":54,"line":118},[52,33245,2230],{"class":58},[52,33247,33061],{"class":371},[52,33249,77],{"class":58},[52,33251,33252,33254,33256],{"class":54,"line":594},[52,33253,121],{"class":58},[52,33255,63],{"class":371},[52,33257,77],{"class":58},[43,33259,33261],{"className":222,"code":33260,"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,33262,33263,33273,33277,33291,33295,33304,33312,33316,33320],{"__ignoreMap":48},[52,33264,33265,33267,33269,33271],{"class":54,"line":55},[52,33266,232],{"class":231},[52,33268,9231],{"class":58},[52,33270,238],{"class":231},[52,33272,9236],{"class":73},[52,33274,33275],{"class":54,"line":80},[52,33276,597],{"emptyLinePlaceholder":171},[52,33278,33279,33281,33283,33285,33287,33289],{"class":54,"line":108},[52,33280,1721],{"class":231},[52,33282,1724],{"class":371},[52,33284,1727],{"class":231},[52,33286,1730],{"class":231},[52,33288,1733],{"class":66},[52,33290,1736],{"class":58},[52,33292,33293],{"class":54,"line":118},[52,33294,1751],{"class":58},[52,33296,33297,33299,33302],{"class":54,"line":594},[52,33298,1756],{"class":58},[52,33300,33301],{"class":73},"'Crystal'",[52,33303,4722],{"class":58},[52,33305,33306,33308,33310],{"class":54,"line":600},[52,33307,4727],{"class":58},[52,33309,2869],{"class":73},[52,33311,2129],{"class":58},[52,33313,33314],{"class":54,"line":606},[52,33315,4744],{"class":58},[52,33317,33318],{"class":54,"line":653},[52,33319,1773],{"class":58},[52,33321,33322],{"class":54,"line":662},[52,33323,1778],{"class":58},[156,33325,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":33327},[33328,33329],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Shape Effects",{},"/docs/components/crystal",{"title":33061,"description":33069},"docs/components/Crystal","-FxLCmCZzp_ueV9QfIlLY-OvVQZj_IC4AWXu45eZ9YA",{"id":33337,"title":12145,"body":33338,"category":30893,"componentType":20848,"description":33345,"extension":168,"meta":33711,"navigation":171,"path":33712,"requiresChild":171,"seo":33713,"stem":33714,"__hash__":33715},"components/docs/components/CursorRipples.md",{"type":8,"value":33339,"toc":33707},[33340,33343,33346,33348,33350,33353,33355,33705],[11,33341,12145],{"id":33342},"cursorripples",[15,33344,33345],{},"Fluid-like ripple distortion",[26901,33347],{"component":12145},[23,33349,26905],{"id":21503},[26907,33351],{":props":33352},"[{\"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,33354,26913],{"id":26912},[217,33356,33357,33423,33495,33561,33631],{":tabs":1543},[43,33358,33360],{"className":45,"code":33359,"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,33361,33362,33370,33377,33386,33395,33399,33407,33415],{"__ignoreMap":48},[52,33363,33364,33366,33368],{"class":54,"line":55},[52,33365,59],{"class":58},[52,33367,63],{"class":62},[52,33369,77],{"class":58},[52,33371,33372,33374],{"class":54,"line":80},[52,33373,83],{"class":58},[52,33375,33376],{"class":62},"CursorRipples\n",[52,33378,33379,33381,33383],{"class":54,"line":108},[52,33380,17870],{"class":66},[52,33382,70],{"class":58},[52,33384,33385],{"class":73},"\"10\"\n",[52,33387,33388,33390,33392],{"class":54,"line":118},[52,33389,14901],{"class":66},[52,33391,70],{"class":58},[52,33393,33394],{"class":73},"\"0.5\"\n",[52,33396,33397],{"class":54,"line":594},[52,33398,26949],{"class":58},[52,33400,33401,33403,33405],{"class":54,"line":600},[52,33402,2213],{"class":58},[52,33404,2216],{"class":62},[52,33406,105],{"class":58},[52,33408,33409,33411,33413],{"class":54,"line":606},[52,33410,2230],{"class":58},[52,33412,12145],{"class":62},[52,33414,77],{"class":58},[52,33416,33417,33419,33421],{"class":54,"line":653},[52,33418,121],{"class":58},[52,33420,63],{"class":62},[52,33422,77],{"class":58},[43,33424,33426],{"className":360,"code":33425,"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,33427,33428,33436,33442,33455,33467,33471,33479,33487],{"__ignoreMap":48},[52,33429,33430,33432,33434],{"class":54,"line":55},[52,33431,59],{"class":58},[52,33433,63],{"class":371},[52,33435,77],{"class":58},[52,33437,33438,33440],{"class":54,"line":80},[52,33439,83],{"class":58},[52,33441,33376],{"class":371},[52,33443,33444,33446,33448,33450,33453],{"class":54,"line":108},[52,33445,17981],{"class":66},[52,33447,70],{"class":231},[52,33449,723],{"class":58},[52,33451,33452],{"class":371},"10",[52,33454,729],{"class":58},[52,33456,33457,33459,33461,33463,33465],{"class":54,"line":118},[52,33458,7361],{"class":66},[52,33460,70],{"class":231},[52,33462,723],{"class":58},[52,33464,5467],{"class":371},[52,33466,729],{"class":58},[52,33468,33469],{"class":54,"line":594},[52,33470,26949],{"class":58},[52,33472,33473,33475,33477],{"class":54,"line":600},[52,33474,2213],{"class":58},[52,33476,2216],{"class":371},[52,33478,105],{"class":58},[52,33480,33481,33483,33485],{"class":54,"line":606},[52,33482,2230],{"class":58},[52,33484,12145],{"class":371},[52,33486,77],{"class":58},[52,33488,33489,33491,33493],{"class":54,"line":653},[52,33490,121],{"class":58},[52,33492,63],{"class":371},[52,33494,77],{"class":58},[43,33496,33497],{"className":2507,"code":33425,"language":2509,"meta":48,"style":48},[31,33498,33499,33507,33513,33523,33533,33537,33545,33553],{"__ignoreMap":48},[52,33500,33501,33503,33505],{"class":54,"line":55},[52,33502,59],{"class":58},[52,33504,63],{"class":371},[52,33506,77],{"class":58},[52,33508,33509,33511],{"class":54,"line":80},[52,33510,83],{"class":58},[52,33512,33376],{"class":371},[52,33514,33515,33517,33519,33521],{"class":54,"line":108},[52,33516,17981],{"class":66},[52,33518,24845],{"class":58},[52,33520,33452],{"class":371},[52,33522,729],{"class":58},[52,33524,33525,33527,33529,33531],{"class":54,"line":118},[52,33526,7361],{"class":66},[52,33528,24845],{"class":58},[52,33530,5467],{"class":371},[52,33532,729],{"class":58},[52,33534,33535],{"class":54,"line":594},[52,33536,26949],{"class":58},[52,33538,33539,33541,33543],{"class":54,"line":600},[52,33540,2213],{"class":58},[52,33542,2216],{"class":371},[52,33544,105],{"class":58},[52,33546,33547,33549,33551],{"class":54,"line":606},[52,33548,2230],{"class":58},[52,33550,12145],{"class":371},[52,33552,77],{"class":58},[52,33554,33555,33557,33559],{"class":54,"line":653},[52,33556,121],{"class":58},[52,33558,63],{"class":371},[52,33560,77],{"class":58},[43,33562,33563],{"className":419,"code":33425,"language":420,"meta":48,"style":48},[31,33564,33565,33573,33579,33591,33603,33607,33615,33623],{"__ignoreMap":48},[52,33566,33567,33569,33571],{"class":54,"line":55},[52,33568,59],{"class":58},[52,33570,63],{"class":371},[52,33572,77],{"class":58},[52,33574,33575,33577],{"class":54,"line":80},[52,33576,83],{"class":58},[52,33578,33376],{"class":371},[52,33580,33581,33583,33585,33587,33589],{"class":54,"line":108},[52,33582,17981],{"class":66},[52,33584,70],{"class":231},[52,33586,723],{"class":58},[52,33588,33452],{"class":371},[52,33590,729],{"class":58},[52,33592,33593,33595,33597,33599,33601],{"class":54,"line":118},[52,33594,7361],{"class":66},[52,33596,70],{"class":231},[52,33598,723],{"class":58},[52,33600,5467],{"class":371},[52,33602,729],{"class":58},[52,33604,33605],{"class":54,"line":594},[52,33606,26949],{"class":58},[52,33608,33609,33611,33613],{"class":54,"line":600},[52,33610,2213],{"class":58},[52,33612,2216],{"class":371},[52,33614,105],{"class":58},[52,33616,33617,33619,33621],{"class":54,"line":606},[52,33618,2230],{"class":58},[52,33620,12145],{"class":371},[52,33622,77],{"class":58},[52,33624,33625,33627,33629],{"class":54,"line":653},[52,33626,121],{"class":58},[52,33628,63],{"class":371},[52,33630,77],{"class":58},[43,33632,33634],{"className":222,"code":33633,"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,33635,33636,33646,33650,33664,33668,33685,33693,33697,33701],{"__ignoreMap":48},[52,33637,33638,33640,33642,33644],{"class":54,"line":55},[52,33639,232],{"class":231},[52,33641,9231],{"class":58},[52,33643,238],{"class":231},[52,33645,9236],{"class":73},[52,33647,33648],{"class":54,"line":80},[52,33649,597],{"emptyLinePlaceholder":171},[52,33651,33652,33654,33656,33658,33660,33662],{"class":54,"line":108},[52,33653,1721],{"class":231},[52,33655,1724],{"class":371},[52,33657,1727],{"class":231},[52,33659,1730],{"class":231},[52,33661,1733],{"class":66},[52,33663,1736],{"class":58},[52,33665,33666],{"class":54,"line":118},[52,33667,1751],{"class":58},[52,33669,33670,33672,33675,33677,33679,33681,33683],{"class":54,"line":594},[52,33671,1756],{"class":58},[52,33673,33674],{"class":73},"'CursorRipples'",[52,33676,27194],{"class":58},[52,33678,33452],{"class":371},[52,33680,4278],{"class":58},[52,33682,5467],{"class":371},[52,33684,5259],{"class":58},[52,33686,33687,33689,33691],{"class":54,"line":600},[52,33688,4727],{"class":58},[52,33690,2869],{"class":73},[52,33692,2129],{"class":58},[52,33694,33695],{"class":54,"line":606},[52,33696,4744],{"class":58},[52,33698,33699],{"class":54,"line":653},[52,33700,1773],{"class":58},[52,33702,33703],{"class":54,"line":662},[52,33704,1778],{"class":58},[156,33706,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33708},[33709,33710],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cursorripples",{"title":12145,"description":33345},"docs/components/CursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":33717,"title":113,"body":33718,"category":30893,"componentType":20842,"description":33725,"extension":168,"meta":33965,"navigation":171,"path":33966,"requiresChild":27763,"seo":33967,"stem":33968,"__hash__":33969},"components/docs/components/CursorTrail.md",{"type":8,"value":33719,"toc":33961},[33720,33723,33726,33728,33730,33733,33735,33959],[11,33721,113],{"id":33722},"cursortrail",[15,33724,33725],{},"Animated trail effect that tracks cursor movement",[26901,33727],{"component":113},[23,33729,26905],{"id":21503},[26907,33731],{":props":33732},"[{\"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,33734,26913],{"id":26912},[217,33736,33737,33777,33820,33860,33902],{":tabs":1543},[43,33738,33740],{"className":45,"code":33739,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n />\n\u003C/Shader>\n",[31,33741,33742,33750,33757,33765,33769],{"__ignoreMap":48},[52,33743,33744,33746,33748],{"class":54,"line":55},[52,33745,59],{"class":58},[52,33747,63],{"class":62},[52,33749,77],{"class":58},[52,33751,33752,33754],{"class":54,"line":80},[52,33753,83],{"class":58},[52,33755,33756],{"class":62},"CursorTrail\n",[52,33758,33759,33761,33763],{"class":54,"line":108},[52,33760,14901],{"class":66},[52,33762,70],{"class":58},[52,33764,33394],{"class":73},[52,33766,33767],{"class":54,"line":118},[52,33768,1224],{"class":58},[52,33770,33771,33773,33775],{"class":54,"line":594},[52,33772,121],{"class":58},[52,33774,63],{"class":62},[52,33776,77],{"class":58},[43,33778,33780],{"className":360,"code":33779,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n />\n\u003C/Shader>\n",[31,33781,33782,33790,33796,33808,33812],{"__ignoreMap":48},[52,33783,33784,33786,33788],{"class":54,"line":55},[52,33785,59],{"class":58},[52,33787,63],{"class":371},[52,33789,77],{"class":58},[52,33791,33792,33794],{"class":54,"line":80},[52,33793,83],{"class":58},[52,33795,33756],{"class":371},[52,33797,33798,33800,33802,33804,33806],{"class":54,"line":108},[52,33799,7361],{"class":66},[52,33801,70],{"class":231},[52,33803,723],{"class":58},[52,33805,5467],{"class":371},[52,33807,729],{"class":58},[52,33809,33810],{"class":54,"line":118},[52,33811,1224],{"class":58},[52,33813,33814,33816,33818],{"class":54,"line":594},[52,33815,121],{"class":58},[52,33817,63],{"class":371},[52,33819,77],{"class":58},[43,33821,33822],{"className":2507,"code":33779,"language":2509,"meta":48,"style":48},[31,33823,33824,33832,33838,33848,33852],{"__ignoreMap":48},[52,33825,33826,33828,33830],{"class":54,"line":55},[52,33827,59],{"class":58},[52,33829,63],{"class":371},[52,33831,77],{"class":58},[52,33833,33834,33836],{"class":54,"line":80},[52,33835,83],{"class":58},[52,33837,33756],{"class":371},[52,33839,33840,33842,33844,33846],{"class":54,"line":108},[52,33841,7361],{"class":66},[52,33843,24845],{"class":58},[52,33845,5467],{"class":371},[52,33847,729],{"class":58},[52,33849,33850],{"class":54,"line":118},[52,33851,1224],{"class":58},[52,33853,33854,33856,33858],{"class":54,"line":594},[52,33855,121],{"class":58},[52,33857,63],{"class":371},[52,33859,77],{"class":58},[43,33861,33862],{"className":419,"code":33779,"language":420,"meta":48,"style":48},[31,33863,33864,33872,33878,33890,33894],{"__ignoreMap":48},[52,33865,33866,33868,33870],{"class":54,"line":55},[52,33867,59],{"class":58},[52,33869,63],{"class":371},[52,33871,77],{"class":58},[52,33873,33874,33876],{"class":54,"line":80},[52,33875,83],{"class":58},[52,33877,33756],{"class":371},[52,33879,33880,33882,33884,33886,33888],{"class":54,"line":108},[52,33881,7361],{"class":66},[52,33883,70],{"class":231},[52,33885,723],{"class":58},[52,33887,5467],{"class":371},[52,33889,729],{"class":58},[52,33891,33892],{"class":54,"line":118},[52,33893,1224],{"class":58},[52,33895,33896,33898,33900],{"class":54,"line":594},[52,33897,121],{"class":58},[52,33899,63],{"class":371},[52,33901,77],{"class":58},[43,33903,33905],{"className":222,"code":33904,"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,33906,33907,33917,33921,33935,33939,33951,33955],{"__ignoreMap":48},[52,33908,33909,33911,33913,33915],{"class":54,"line":55},[52,33910,232],{"class":231},[52,33912,9231],{"class":58},[52,33914,238],{"class":231},[52,33916,9236],{"class":73},[52,33918,33919],{"class":54,"line":80},[52,33920,597],{"emptyLinePlaceholder":171},[52,33922,33923,33925,33927,33929,33931,33933],{"class":54,"line":108},[52,33924,1721],{"class":231},[52,33926,1724],{"class":371},[52,33928,1727],{"class":231},[52,33930,1730],{"class":231},[52,33932,1733],{"class":66},[52,33934,1736],{"class":58},[52,33936,33937],{"class":54,"line":118},[52,33938,1751],{"class":58},[52,33940,33941,33943,33945,33947,33949],{"class":54,"line":594},[52,33942,1756],{"class":58},[52,33944,21334],{"class":73},[52,33946,5254],{"class":58},[52,33948,5467],{"class":371},[52,33950,1768],{"class":58},[52,33952,33953],{"class":54,"line":600},[52,33954,1773],{"class":58},[52,33956,33957],{"class":54,"line":606},[52,33958,1778],{"class":58},[156,33960,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33962},[33963,33964],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cursortrail",{"title":113,"description":33725},"docs/components/CursorTrail","wUUBquiR90VnfJRcmSsJKwtWkuTdT_kDTHSJz6U1CeI",{"id":33971,"title":33972,"body":33973,"category":27760,"componentType":20842,"description":33980,"extension":168,"meta":34165,"navigation":171,"path":34166,"requiresChild":27763,"seo":34167,"stem":34168,"__hash__":34169},"components/docs/components/DOMTexture.md","DOMTexture",{"type":8,"value":33974,"toc":34162},[33975,33978,33981,33987,33989,33991,34160],[11,33976,33972],{"id":33977},"domtexture",[15,33979,33980],{},"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.",[33982,33983],"experimental-warning",{"link-label":33984,"link-url":33985,"message":33986},"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,33988],{"component":33972},[23,33990,26913],{"id":26912},[217,33992,33993,34022,34050,34078,34106],{":tabs":1543},[43,33994,33996],{"className":45,"code":33995,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDOMTexture />\n\u003C/Shader>\n",[31,33997,33998,34006,34014],{"__ignoreMap":48},[52,33999,34000,34002,34004],{"class":54,"line":55},[52,34001,59],{"class":58},[52,34003,63],{"class":62},[52,34005,77],{"class":58},[52,34007,34008,34010,34012],{"class":54,"line":80},[52,34009,83],{"class":58},[52,34011,33972],{"class":62},[52,34013,105],{"class":58},[52,34015,34016,34018,34020],{"class":54,"line":108},[52,34017,121],{"class":58},[52,34019,63],{"class":62},[52,34021,77],{"class":58},[43,34023,34024],{"className":360,"code":33995,"language":362,"meta":48,"style":48},[31,34025,34026,34034,34042],{"__ignoreMap":48},[52,34027,34028,34030,34032],{"class":54,"line":55},[52,34029,59],{"class":58},[52,34031,63],{"class":371},[52,34033,77],{"class":58},[52,34035,34036,34038,34040],{"class":54,"line":80},[52,34037,83],{"class":58},[52,34039,33972],{"class":371},[52,34041,105],{"class":58},[52,34043,34044,34046,34048],{"class":54,"line":108},[52,34045,121],{"class":58},[52,34047,63],{"class":371},[52,34049,77],{"class":58},[43,34051,34052],{"className":2507,"code":33995,"language":2509,"meta":48,"style":48},[31,34053,34054,34062,34070],{"__ignoreMap":48},[52,34055,34056,34058,34060],{"class":54,"line":55},[52,34057,59],{"class":58},[52,34059,63],{"class":371},[52,34061,77],{"class":58},[52,34063,34064,34066,34068],{"class":54,"line":80},[52,34065,83],{"class":58},[52,34067,33972],{"class":371},[52,34069,105],{"class":58},[52,34071,34072,34074,34076],{"class":54,"line":108},[52,34073,121],{"class":58},[52,34075,63],{"class":371},[52,34077,77],{"class":58},[43,34079,34080],{"className":419,"code":33995,"language":420,"meta":48,"style":48},[31,34081,34082,34090,34098],{"__ignoreMap":48},[52,34083,34084,34086,34088],{"class":54,"line":55},[52,34085,59],{"class":58},[52,34087,63],{"class":371},[52,34089,77],{"class":58},[52,34091,34092,34094,34096],{"class":54,"line":80},[52,34093,83],{"class":58},[52,34095,33972],{"class":371},[52,34097,105],{"class":58},[52,34099,34100,34102,34104],{"class":54,"line":108},[52,34101,121],{"class":58},[52,34103,63],{"class":371},[52,34105,77],{"class":58},[43,34107,34109],{"className":222,"code":34108,"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,34110,34111,34121,34125,34139,34143,34152,34156],{"__ignoreMap":48},[52,34112,34113,34115,34117,34119],{"class":54,"line":55},[52,34114,232],{"class":231},[52,34116,9231],{"class":58},[52,34118,238],{"class":231},[52,34120,9236],{"class":73},[52,34122,34123],{"class":54,"line":80},[52,34124,597],{"emptyLinePlaceholder":171},[52,34126,34127,34129,34131,34133,34135,34137],{"class":54,"line":108},[52,34128,1721],{"class":231},[52,34130,1724],{"class":371},[52,34132,1727],{"class":231},[52,34134,1730],{"class":231},[52,34136,1733],{"class":66},[52,34138,1736],{"class":58},[52,34140,34141],{"class":54,"line":118},[52,34142,1751],{"class":58},[52,34144,34145,34147,34150],{"class":54,"line":594},[52,34146,1756],{"class":58},[52,34148,34149],{"class":73},"'DOMTexture'",[52,34151,2129],{"class":58},[52,34153,34154],{"class":54,"line":600},[52,34155,1773],{"class":58},[52,34157,34158],{"class":54,"line":606},[52,34159,1778],{"class":58},[156,34161,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34163},[34164],{"id":26912,"depth":80,"text":26913},{},"/docs/components/domtexture",{"title":33972,"description":33980},"docs/components/DOMTexture","3Jc9Zpo0-0aIes_naAYdI0ulUDh5gOfInTZsrpDRdHE",{"id":34171,"title":34172,"body":34173,"category":27760,"componentType":20842,"description":34180,"extension":168,"meta":34365,"navigation":171,"path":34366,"requiresChild":27763,"seo":34367,"stem":34368,"__hash__":34369},"components/docs/components/DiamondGradient.md","DiamondGradient",{"type":8,"value":34174,"toc":34361},[34175,34178,34181,34183,34185,34188,34190,34359],[11,34176,34172],{"id":34177},"diamondgradient",[15,34179,34180],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[26901,34182],{"component":34172},[23,34184,26905],{"id":21503},[26907,34186],{":props":34187},"[{\"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,34189,26913],{"id":26912},[217,34191,34192,34221,34249,34277,34305],{":tabs":1543},[43,34193,34195],{"className":45,"code":34194,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[31,34196,34197,34205,34213],{"__ignoreMap":48},[52,34198,34199,34201,34203],{"class":54,"line":55},[52,34200,59],{"class":58},[52,34202,63],{"class":62},[52,34204,77],{"class":58},[52,34206,34207,34209,34211],{"class":54,"line":80},[52,34208,83],{"class":58},[52,34210,34172],{"class":62},[52,34212,105],{"class":58},[52,34214,34215,34217,34219],{"class":54,"line":108},[52,34216,121],{"class":58},[52,34218,63],{"class":62},[52,34220,77],{"class":58},[43,34222,34223],{"className":360,"code":34194,"language":362,"meta":48,"style":48},[31,34224,34225,34233,34241],{"__ignoreMap":48},[52,34226,34227,34229,34231],{"class":54,"line":55},[52,34228,59],{"class":58},[52,34230,63],{"class":371},[52,34232,77],{"class":58},[52,34234,34235,34237,34239],{"class":54,"line":80},[52,34236,83],{"class":58},[52,34238,34172],{"class":371},[52,34240,105],{"class":58},[52,34242,34243,34245,34247],{"class":54,"line":108},[52,34244,121],{"class":58},[52,34246,63],{"class":371},[52,34248,77],{"class":58},[43,34250,34251],{"className":2507,"code":34194,"language":2509,"meta":48,"style":48},[31,34252,34253,34261,34269],{"__ignoreMap":48},[52,34254,34255,34257,34259],{"class":54,"line":55},[52,34256,59],{"class":58},[52,34258,63],{"class":371},[52,34260,77],{"class":58},[52,34262,34263,34265,34267],{"class":54,"line":80},[52,34264,83],{"class":58},[52,34266,34172],{"class":371},[52,34268,105],{"class":58},[52,34270,34271,34273,34275],{"class":54,"line":108},[52,34272,121],{"class":58},[52,34274,63],{"class":371},[52,34276,77],{"class":58},[43,34278,34279],{"className":419,"code":34194,"language":420,"meta":48,"style":48},[31,34280,34281,34289,34297],{"__ignoreMap":48},[52,34282,34283,34285,34287],{"class":54,"line":55},[52,34284,59],{"class":58},[52,34286,63],{"class":371},[52,34288,77],{"class":58},[52,34290,34291,34293,34295],{"class":54,"line":80},[52,34292,83],{"class":58},[52,34294,34172],{"class":371},[52,34296,105],{"class":58},[52,34298,34299,34301,34303],{"class":54,"line":108},[52,34300,121],{"class":58},[52,34302,63],{"class":371},[52,34304,77],{"class":58},[43,34306,34308],{"className":222,"code":34307,"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,34309,34310,34320,34324,34338,34342,34351,34355],{"__ignoreMap":48},[52,34311,34312,34314,34316,34318],{"class":54,"line":55},[52,34313,232],{"class":231},[52,34315,9231],{"class":58},[52,34317,238],{"class":231},[52,34319,9236],{"class":73},[52,34321,34322],{"class":54,"line":80},[52,34323,597],{"emptyLinePlaceholder":171},[52,34325,34326,34328,34330,34332,34334,34336],{"class":54,"line":108},[52,34327,1721],{"class":231},[52,34329,1724],{"class":371},[52,34331,1727],{"class":231},[52,34333,1730],{"class":231},[52,34335,1733],{"class":66},[52,34337,1736],{"class":58},[52,34339,34340],{"class":54,"line":118},[52,34341,1751],{"class":58},[52,34343,34344,34346,34349],{"class":54,"line":594},[52,34345,1756],{"class":58},[52,34347,34348],{"class":73},"'DiamondGradient'",[52,34350,2129],{"class":58},[52,34352,34353],{"class":54,"line":600},[52,34354,1773],{"class":58},[52,34356,34357],{"class":54,"line":606},[52,34358,1778],{"class":58},[156,34360,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34362},[34363,34364],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/diamondgradient",{"title":34172,"description":34180},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":34371,"title":34372,"body":34373,"category":27225,"componentType":20848,"description":34380,"extension":168,"meta":34698,"navigation":171,"path":34699,"requiresChild":171,"seo":34700,"stem":34701,"__hash__":34702},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":34374,"toc":34694},[34375,34378,34381,34383,34385,34388,34390,34692],[11,34376,34372],{"id":34377},"diffuseblur",[15,34379,34380],{},"Grain-like pixel displacement at random",[26901,34382],{"component":34372},[23,34384,26905],{"id":21503},[26907,34386],{":props":34387},"[{\"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,34389,26913],{"id":26912},[217,34391,34392,34449,34508,34564,34622],{":tabs":1543},[43,34393,34395],{"className":45,"code":34394,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,34396,34397,34405,34412,34421,34425,34433,34441],{"__ignoreMap":48},[52,34398,34399,34401,34403],{"class":54,"line":55},[52,34400,59],{"class":58},[52,34402,63],{"class":62},[52,34404,77],{"class":58},[52,34406,34407,34409],{"class":54,"line":80},[52,34408,83],{"class":58},[52,34410,34411],{"class":62},"DiffuseBlur\n",[52,34413,34414,34416,34418],{"class":54,"line":108},[52,34415,17870],{"class":66},[52,34417,70],{"class":58},[52,34419,34420],{"class":73},"\"30\"\n",[52,34422,34423],{"class":54,"line":118},[52,34424,26949],{"class":58},[52,34426,34427,34429,34431],{"class":54,"line":594},[52,34428,2213],{"class":58},[52,34430,2216],{"class":62},[52,34432,105],{"class":58},[52,34434,34435,34437,34439],{"class":54,"line":600},[52,34436,2230],{"class":58},[52,34438,34372],{"class":62},[52,34440,77],{"class":58},[52,34442,34443,34445,34447],{"class":54,"line":606},[52,34444,121],{"class":58},[52,34446,63],{"class":62},[52,34448,77],{"class":58},[43,34450,34452],{"className":360,"code":34451,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,34453,34454,34462,34468,34480,34484,34492,34500],{"__ignoreMap":48},[52,34455,34456,34458,34460],{"class":54,"line":55},[52,34457,59],{"class":58},[52,34459,63],{"class":371},[52,34461,77],{"class":58},[52,34463,34464,34466],{"class":54,"line":80},[52,34465,83],{"class":58},[52,34467,34411],{"class":371},[52,34469,34470,34472,34474,34476,34478],{"class":54,"line":108},[52,34471,17981],{"class":66},[52,34473,70],{"class":231},[52,34475,723],{"class":58},[52,34477,13194],{"class":371},[52,34479,729],{"class":58},[52,34481,34482],{"class":54,"line":118},[52,34483,26949],{"class":58},[52,34485,34486,34488,34490],{"class":54,"line":594},[52,34487,2213],{"class":58},[52,34489,2216],{"class":371},[52,34491,105],{"class":58},[52,34493,34494,34496,34498],{"class":54,"line":600},[52,34495,2230],{"class":58},[52,34497,34372],{"class":371},[52,34499,77],{"class":58},[52,34501,34502,34504,34506],{"class":54,"line":606},[52,34503,121],{"class":58},[52,34505,63],{"class":371},[52,34507,77],{"class":58},[43,34509,34510],{"className":2507,"code":34451,"language":2509,"meta":48,"style":48},[31,34511,34512,34520,34526,34536,34540,34548,34556],{"__ignoreMap":48},[52,34513,34514,34516,34518],{"class":54,"line":55},[52,34515,59],{"class":58},[52,34517,63],{"class":371},[52,34519,77],{"class":58},[52,34521,34522,34524],{"class":54,"line":80},[52,34523,83],{"class":58},[52,34525,34411],{"class":371},[52,34527,34528,34530,34532,34534],{"class":54,"line":108},[52,34529,17981],{"class":66},[52,34531,24845],{"class":58},[52,34533,13194],{"class":371},[52,34535,729],{"class":58},[52,34537,34538],{"class":54,"line":118},[52,34539,26949],{"class":58},[52,34541,34542,34544,34546],{"class":54,"line":594},[52,34543,2213],{"class":58},[52,34545,2216],{"class":371},[52,34547,105],{"class":58},[52,34549,34550,34552,34554],{"class":54,"line":600},[52,34551,2230],{"class":58},[52,34553,34372],{"class":371},[52,34555,77],{"class":58},[52,34557,34558,34560,34562],{"class":54,"line":606},[52,34559,121],{"class":58},[52,34561,63],{"class":371},[52,34563,77],{"class":58},[43,34565,34566],{"className":419,"code":34451,"language":420,"meta":48,"style":48},[31,34567,34568,34576,34582,34594,34598,34606,34614],{"__ignoreMap":48},[52,34569,34570,34572,34574],{"class":54,"line":55},[52,34571,59],{"class":58},[52,34573,63],{"class":371},[52,34575,77],{"class":58},[52,34577,34578,34580],{"class":54,"line":80},[52,34579,83],{"class":58},[52,34581,34411],{"class":371},[52,34583,34584,34586,34588,34590,34592],{"class":54,"line":108},[52,34585,17981],{"class":66},[52,34587,70],{"class":231},[52,34589,723],{"class":58},[52,34591,13194],{"class":371},[52,34593,729],{"class":58},[52,34595,34596],{"class":54,"line":118},[52,34597,26949],{"class":58},[52,34599,34600,34602,34604],{"class":54,"line":594},[52,34601,2213],{"class":58},[52,34603,2216],{"class":371},[52,34605,105],{"class":58},[52,34607,34608,34610,34612],{"class":54,"line":600},[52,34609,2230],{"class":58},[52,34611,34372],{"class":371},[52,34613,77],{"class":58},[52,34615,34616,34618,34620],{"class":54,"line":606},[52,34617,121],{"class":58},[52,34619,63],{"class":371},[52,34621,77],{"class":58},[43,34623,34625],{"className":222,"code":34624,"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,34626,34627,34637,34641,34655,34659,34672,34680,34684,34688],{"__ignoreMap":48},[52,34628,34629,34631,34633,34635],{"class":54,"line":55},[52,34630,232],{"class":231},[52,34632,9231],{"class":58},[52,34634,238],{"class":231},[52,34636,9236],{"class":73},[52,34638,34639],{"class":54,"line":80},[52,34640,597],{"emptyLinePlaceholder":171},[52,34642,34643,34645,34647,34649,34651,34653],{"class":54,"line":108},[52,34644,1721],{"class":231},[52,34646,1724],{"class":371},[52,34648,1727],{"class":231},[52,34650,1730],{"class":231},[52,34652,1733],{"class":66},[52,34654,1736],{"class":58},[52,34656,34657],{"class":54,"line":118},[52,34658,1751],{"class":58},[52,34660,34661,34663,34666,34668,34670],{"class":54,"line":594},[52,34662,1756],{"class":58},[52,34664,34665],{"class":73},"'DiffuseBlur'",[52,34667,27194],{"class":58},[52,34669,13194],{"class":371},[52,34671,5259],{"class":58},[52,34673,34674,34676,34678],{"class":54,"line":600},[52,34675,4727],{"class":58},[52,34677,2869],{"class":73},[52,34679,2129],{"class":58},[52,34681,34682],{"class":54,"line":606},[52,34683,4744],{"class":58},[52,34685,34686],{"class":54,"line":653},[52,34687,1773],{"class":58},[52,34689,34690],{"class":54,"line":662},[52,34691,1778],{"class":58},[156,34693,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34695},[34696,34697],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/diffuseblur",{"title":34372,"description":34380},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":34704,"title":34705,"body":34706,"category":27503,"componentType":20848,"description":34713,"extension":168,"meta":34974,"navigation":171,"path":34975,"requiresChild":171,"seo":34976,"stem":34977,"__hash__":34978},"components/docs/components/Dither.md","Dither",{"type":8,"value":34707,"toc":34970},[34708,34711,34714,34716,34718,34721,34723,34968],[11,34709,34705],{"id":34710},"dither",[15,34712,34713],{},"Dithering effect with multiple pattern options",[26901,34715],{"component":34705},[23,34717,26905],{"id":21503},[26907,34719],{":props":34720},"[{\"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,34722,26913],{"id":26912},[217,34724,34725,34770,34814,34858,34902],{":tabs":1543},[43,34726,34728],{"className":45,"code":34727,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[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":62},[52,34737,77],{"class":58},[52,34739,34740,34742,34744],{"class":54,"line":80},[52,34741,83],{"class":58},[52,34743,34705],{"class":62},[52,34745,77],{"class":58},[52,34747,34748,34750,34752],{"class":54,"line":108},[52,34749,2213],{"class":58},[52,34751,2216],{"class":62},[52,34753,105],{"class":58},[52,34755,34756,34758,34760],{"class":54,"line":118},[52,34757,2230],{"class":58},[52,34759,34705],{"class":62},[52,34761,77],{"class":58},[52,34763,34764,34766,34768],{"class":54,"line":594},[52,34765,121],{"class":58},[52,34767,63],{"class":62},[52,34769,77],{"class":58},[43,34771,34772],{"className":360,"code":34727,"language":362,"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,34705],{"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,34705],{"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":2507,"code":34727,"language":2509,"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,34705],{"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,34705],{"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,34860],{"className":419,"code":34727,"language":420,"meta":48,"style":48},[31,34861,34862,34870,34878,34886,34894],{"__ignoreMap":48},[52,34863,34864,34866,34868],{"class":54,"line":55},[52,34865,59],{"class":58},[52,34867,63],{"class":371},[52,34869,77],{"class":58},[52,34871,34872,34874,34876],{"class":54,"line":80},[52,34873,83],{"class":58},[52,34875,34705],{"class":371},[52,34877,77],{"class":58},[52,34879,34880,34882,34884],{"class":54,"line":108},[52,34881,2213],{"class":58},[52,34883,2216],{"class":371},[52,34885,105],{"class":58},[52,34887,34888,34890,34892],{"class":54,"line":118},[52,34889,2230],{"class":58},[52,34891,34705],{"class":371},[52,34893,77],{"class":58},[52,34895,34896,34898,34900],{"class":54,"line":594},[52,34897,121],{"class":58},[52,34899,63],{"class":371},[52,34901,77],{"class":58},[43,34903,34905],{"className":222,"code":34904,"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,34906,34907,34917,34921,34935,34939,34948,34956,34960,34964],{"__ignoreMap":48},[52,34908,34909,34911,34913,34915],{"class":54,"line":55},[52,34910,232],{"class":231},[52,34912,9231],{"class":58},[52,34914,238],{"class":231},[52,34916,9236],{"class":73},[52,34918,34919],{"class":54,"line":80},[52,34920,597],{"emptyLinePlaceholder":171},[52,34922,34923,34925,34927,34929,34931,34933],{"class":54,"line":108},[52,34924,1721],{"class":231},[52,34926,1724],{"class":371},[52,34928,1727],{"class":231},[52,34930,1730],{"class":231},[52,34932,1733],{"class":66},[52,34934,1736],{"class":58},[52,34936,34937],{"class":54,"line":118},[52,34938,1751],{"class":58},[52,34940,34941,34943,34946],{"class":54,"line":594},[52,34942,1756],{"class":58},[52,34944,34945],{"class":73},"'Dither'",[52,34947,4722],{"class":58},[52,34949,34950,34952,34954],{"class":54,"line":600},[52,34951,4727],{"class":58},[52,34953,2869],{"class":73},[52,34955,2129],{"class":58},[52,34957,34958],{"class":54,"line":606},[52,34959,4744],{"class":58},[52,34961,34962],{"class":54,"line":653},[52,34963,1773],{"class":58},[52,34965,34966],{"class":54,"line":662},[52,34967,1778],{"class":58},[156,34969,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34971},[34972,34973],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dither",{"title":34705,"description":34713},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":34980,"title":34981,"body":34982,"category":27760,"componentType":20842,"description":34989,"extension":168,"meta":35217,"navigation":171,"path":35218,"requiresChild":27763,"seo":35219,"stem":35220,"__hash__":35221},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":34983,"toc":35213},[34984,34987,34990,34992,34994,34997,34999,35211],[11,34985,34981],{"id":34986},"dotgrid",[15,34988,34989],{},"Grid of dots with optional twinkling animation",[26901,34991],{"component":34981},[23,34993,26905],{"id":21503},[26907,34995],{":props":34996},"[{\"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,34998,26913],{"id":26912},[217,35000,35001,35040,35078,35116,35154],{":tabs":1543},[43,35002,35004],{"className":45,"code":35003,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,35005,35006,35014,35020,35028,35032],{"__ignoreMap":48},[52,35007,35008,35010,35012],{"class":54,"line":55},[52,35009,59],{"class":58},[52,35011,63],{"class":62},[52,35013,77],{"class":58},[52,35015,35016,35018],{"class":54,"line":80},[52,35017,83],{"class":58},[52,35019,17004],{"class":62},[52,35021,35022,35024,35026],{"class":54,"line":108},[52,35023,7351],{"class":66},[52,35025,70],{"class":58},[52,35027,7307],{"class":73},[52,35029,35030],{"class":54,"line":118},[52,35031,1224],{"class":58},[52,35033,35034,35036,35038],{"class":54,"line":594},[52,35035,121],{"class":58},[52,35037,63],{"class":62},[52,35039,77],{"class":58},[43,35041,35042],{"className":360,"code":35003,"language":362,"meta":48,"style":48},[31,35043,35044,35052,35058,35066,35070],{"__ignoreMap":48},[52,35045,35046,35048,35050],{"class":54,"line":55},[52,35047,59],{"class":58},[52,35049,63],{"class":371},[52,35051,77],{"class":58},[52,35053,35054,35056],{"class":54,"line":80},[52,35055,83],{"class":58},[52,35057,17004],{"class":371},[52,35059,35060,35062,35064],{"class":54,"line":108},[52,35061,7351],{"class":66},[52,35063,70],{"class":231},[52,35065,7307],{"class":73},[52,35067,35068],{"class":54,"line":118},[52,35069,1224],{"class":58},[52,35071,35072,35074,35076],{"class":54,"line":594},[52,35073,121],{"class":58},[52,35075,63],{"class":371},[52,35077,77],{"class":58},[43,35079,35080],{"className":2507,"code":35003,"language":2509,"meta":48,"style":48},[31,35081,35082,35090,35096,35104,35108],{"__ignoreMap":48},[52,35083,35084,35086,35088],{"class":54,"line":55},[52,35085,59],{"class":58},[52,35087,63],{"class":371},[52,35089,77],{"class":58},[52,35091,35092,35094],{"class":54,"line":80},[52,35093,83],{"class":58},[52,35095,17004],{"class":371},[52,35097,35098,35100,35102],{"class":54,"line":108},[52,35099,7351],{"class":66},[52,35101,70],{"class":58},[52,35103,7307],{"class":73},[52,35105,35106],{"class":54,"line":118},[52,35107,1224],{"class":58},[52,35109,35110,35112,35114],{"class":54,"line":594},[52,35111,121],{"class":58},[52,35113,63],{"class":371},[52,35115,77],{"class":58},[43,35117,35118],{"className":419,"code":35003,"language":420,"meta":48,"style":48},[31,35119,35120,35128,35134,35142,35146],{"__ignoreMap":48},[52,35121,35122,35124,35126],{"class":54,"line":55},[52,35123,59],{"class":58},[52,35125,63],{"class":371},[52,35127,77],{"class":58},[52,35129,35130,35132],{"class":54,"line":80},[52,35131,83],{"class":58},[52,35133,17004],{"class":371},[52,35135,35136,35138,35140],{"class":54,"line":108},[52,35137,7351],{"class":66},[52,35139,70],{"class":231},[52,35141,7307],{"class":73},[52,35143,35144],{"class":54,"line":118},[52,35145,1224],{"class":58},[52,35147,35148,35150,35152],{"class":54,"line":594},[52,35149,121],{"class":58},[52,35151,63],{"class":371},[52,35153,77],{"class":58},[43,35155,35157],{"className":222,"code":35156,"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,35158,35159,35169,35173,35187,35191,35203,35207],{"__ignoreMap":48},[52,35160,35161,35163,35165,35167],{"class":54,"line":55},[52,35162,232],{"class":231},[52,35164,9231],{"class":58},[52,35166,238],{"class":231},[52,35168,9236],{"class":73},[52,35170,35171],{"class":54,"line":80},[52,35172,597],{"emptyLinePlaceholder":171},[52,35174,35175,35177,35179,35181,35183,35185],{"class":54,"line":108},[52,35176,1721],{"class":231},[52,35178,1724],{"class":371},[52,35180,1727],{"class":231},[52,35182,1730],{"class":231},[52,35184,1733],{"class":66},[52,35186,1736],{"class":58},[52,35188,35189],{"class":54,"line":118},[52,35190,1751],{"class":58},[52,35192,35193,35195,35197,35199,35201],{"class":54,"line":594},[52,35194,1756],{"class":58},[52,35196,17555],{"class":73},[52,35198,1762],{"class":58},[52,35200,7886],{"class":73},[52,35202,1768],{"class":58},[52,35204,35205],{"class":54,"line":600},[52,35206,1773],{"class":58},[52,35208,35209],{"class":54,"line":606},[52,35210,1778],{"class":58},[156,35212,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":35214},[35215,35216],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dotgrid",{"title":34981,"description":34989},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":35223,"title":35224,"body":35225,"category":27503,"componentType":20848,"description":35232,"extension":168,"meta":35586,"navigation":171,"path":35587,"requiresChild":171,"seo":35588,"stem":35589,"__hash__":35590},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":35226,"toc":35582},[35227,35230,35233,35235,35237,35240,35242,35580],[11,35228,35224],{"id":35229},"dropshadow",[15,35231,35232],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[26901,35234],{"component":35224},[23,35236,26905],{"id":21503},[26907,35238],{":props":35239},"[{\"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,35241,26913],{"id":26912},[217,35243,35244,35308,35375,35439,35505],{":tabs":1543},[43,35245,35247],{"className":45,"code":35246,"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,35248,35249,35257,35264,35272,35280,35284,35292,35300],{"__ignoreMap":48},[52,35250,35251,35253,35255],{"class":54,"line":55},[52,35252,59],{"class":58},[52,35254,63],{"class":62},[52,35256,77],{"class":58},[52,35258,35259,35261],{"class":54,"line":80},[52,35260,83],{"class":58},[52,35262,35263],{"class":62},"DropShadow\n",[52,35265,35266,35268,35270],{"class":54,"line":108},[52,35267,7351],{"class":66},[52,35269,70],{"class":58},[52,35271,16975],{"class":73},[52,35273,35274,35276,35278],{"class":54,"line":118},[52,35275,17870],{"class":66},[52,35277,70],{"class":58},[52,35279,33394],{"class":73},[52,35281,35282],{"class":54,"line":594},[52,35283,26949],{"class":58},[52,35285,35286,35288,35290],{"class":54,"line":600},[52,35287,2213],{"class":58},[52,35289,2216],{"class":62},[52,35291,105],{"class":58},[52,35293,35294,35296,35298],{"class":54,"line":606},[52,35295,2230],{"class":58},[52,35297,35224],{"class":62},[52,35299,77],{"class":58},[52,35301,35302,35304,35306],{"class":54,"line":653},[52,35303,121],{"class":58},[52,35305,63],{"class":62},[52,35307,77],{"class":58},[43,35309,35311],{"className":360,"code":35310,"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,35312,35313,35321,35327,35335,35347,35351,35359,35367],{"__ignoreMap":48},[52,35314,35315,35317,35319],{"class":54,"line":55},[52,35316,59],{"class":58},[52,35318,63],{"class":371},[52,35320,77],{"class":58},[52,35322,35323,35325],{"class":54,"line":80},[52,35324,83],{"class":58},[52,35326,35263],{"class":371},[52,35328,35329,35331,35333],{"class":54,"line":108},[52,35330,7351],{"class":66},[52,35332,70],{"class":231},[52,35334,16975],{"class":73},[52,35336,35337,35339,35341,35343,35345],{"class":54,"line":118},[52,35338,17981],{"class":66},[52,35340,70],{"class":231},[52,35342,723],{"class":58},[52,35344,5467],{"class":371},[52,35346,729],{"class":58},[52,35348,35349],{"class":54,"line":594},[52,35350,26949],{"class":58},[52,35352,35353,35355,35357],{"class":54,"line":600},[52,35354,2213],{"class":58},[52,35356,2216],{"class":371},[52,35358,105],{"class":58},[52,35360,35361,35363,35365],{"class":54,"line":606},[52,35362,2230],{"class":58},[52,35364,35224],{"class":371},[52,35366,77],{"class":58},[52,35368,35369,35371,35373],{"class":54,"line":653},[52,35370,121],{"class":58},[52,35372,63],{"class":371},[52,35374,77],{"class":58},[43,35376,35377],{"className":2507,"code":35310,"language":2509,"meta":48,"style":48},[31,35378,35379,35387,35393,35401,35411,35415,35423,35431],{"__ignoreMap":48},[52,35380,35381,35383,35385],{"class":54,"line":55},[52,35382,59],{"class":58},[52,35384,63],{"class":371},[52,35386,77],{"class":58},[52,35388,35389,35391],{"class":54,"line":80},[52,35390,83],{"class":58},[52,35392,35263],{"class":371},[52,35394,35395,35397,35399],{"class":54,"line":108},[52,35396,7351],{"class":66},[52,35398,70],{"class":58},[52,35400,16975],{"class":73},[52,35402,35403,35405,35407,35409],{"class":54,"line":118},[52,35404,17981],{"class":66},[52,35406,24845],{"class":58},[52,35408,5467],{"class":371},[52,35410,729],{"class":58},[52,35412,35413],{"class":54,"line":594},[52,35414,26949],{"class":58},[52,35416,35417,35419,35421],{"class":54,"line":600},[52,35418,2213],{"class":58},[52,35420,2216],{"class":371},[52,35422,105],{"class":58},[52,35424,35425,35427,35429],{"class":54,"line":606},[52,35426,2230],{"class":58},[52,35428,35224],{"class":371},[52,35430,77],{"class":58},[52,35432,35433,35435,35437],{"class":54,"line":653},[52,35434,121],{"class":58},[52,35436,63],{"class":371},[52,35438,77],{"class":58},[43,35440,35441],{"className":419,"code":35310,"language":420,"meta":48,"style":48},[31,35442,35443,35451,35457,35465,35477,35481,35489,35497],{"__ignoreMap":48},[52,35444,35445,35447,35449],{"class":54,"line":55},[52,35446,59],{"class":58},[52,35448,63],{"class":371},[52,35450,77],{"class":58},[52,35452,35453,35455],{"class":54,"line":80},[52,35454,83],{"class":58},[52,35456,35263],{"class":371},[52,35458,35459,35461,35463],{"class":54,"line":108},[52,35460,7351],{"class":66},[52,35462,70],{"class":231},[52,35464,16975],{"class":73},[52,35466,35467,35469,35471,35473,35475],{"class":54,"line":118},[52,35468,17981],{"class":66},[52,35470,70],{"class":231},[52,35472,723],{"class":58},[52,35474,5467],{"class":371},[52,35476,729],{"class":58},[52,35478,35479],{"class":54,"line":594},[52,35480,26949],{"class":58},[52,35482,35483,35485,35487],{"class":54,"line":600},[52,35484,2213],{"class":58},[52,35486,2216],{"class":371},[52,35488,105],{"class":58},[52,35490,35491,35493,35495],{"class":54,"line":606},[52,35492,2230],{"class":58},[52,35494,35224],{"class":371},[52,35496,77],{"class":58},[52,35498,35499,35501,35503],{"class":54,"line":653},[52,35500,121],{"class":58},[52,35502,63],{"class":371},[52,35504,77],{"class":58},[43,35506,35508],{"className":222,"code":35507,"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,35509,35510,35520,35524,35538,35542,35560,35568,35572,35576],{"__ignoreMap":48},[52,35511,35512,35514,35516,35518],{"class":54,"line":55},[52,35513,232],{"class":231},[52,35515,9231],{"class":58},[52,35517,238],{"class":231},[52,35519,9236],{"class":73},[52,35521,35522],{"class":54,"line":80},[52,35523,597],{"emptyLinePlaceholder":171},[52,35525,35526,35528,35530,35532,35534,35536],{"class":54,"line":108},[52,35527,1721],{"class":231},[52,35529,1724],{"class":371},[52,35531,1727],{"class":231},[52,35533,1730],{"class":231},[52,35535,1733],{"class":66},[52,35537,1736],{"class":58},[52,35539,35540],{"class":54,"line":118},[52,35541,1751],{"class":58},[52,35543,35544,35546,35549,35551,35553,35556,35558],{"class":54,"line":594},[52,35545,1756],{"class":58},[52,35547,35548],{"class":73},"'DropShadow'",[52,35550,1762],{"class":58},[52,35552,17534],{"class":73},[52,35554,35555],{"class":58},", intensity: ",[52,35557,5467],{"class":371},[52,35559,5259],{"class":58},[52,35561,35562,35564,35566],{"class":54,"line":600},[52,35563,4727],{"class":58},[52,35565,2869],{"class":73},[52,35567,2129],{"class":58},[52,35569,35570],{"class":54,"line":606},[52,35571,4744],{"class":58},[52,35573,35574],{"class":54,"line":653},[52,35575,1773],{"class":58},[52,35577,35578],{"class":54,"line":662},[52,35579,1778],{"class":58},[156,35581,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":35583},[35584,35585],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dropshadow",{"title":35224,"description":35232},"docs/components/DropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":35592,"title":35593,"body":35594,"category":29304,"componentType":20848,"description":35601,"extension":168,"meta":35862,"navigation":171,"path":35863,"requiresChild":171,"seo":35864,"stem":35865,"__hash__":35866},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":35595,"toc":35858},[35596,35599,35602,35604,35606,35609,35611,35856],[11,35597,35593],{"id":35598},"duotone",[15,35600,35601],{},"Map colors to two tones based on luminance",[26901,35603],{"component":35593},[23,35605,26905],{"id":21503},[26907,35607],{":props":35608},"[{\"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,35610,26913],{"id":26912},[217,35612,35613,35658,35702,35746,35790],{":tabs":1543},[43,35614,35616],{"className":45,"code":35615,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[31,35617,35618,35626,35634,35642,35650],{"__ignoreMap":48},[52,35619,35620,35622,35624],{"class":54,"line":55},[52,35621,59],{"class":58},[52,35623,63],{"class":62},[52,35625,77],{"class":58},[52,35627,35628,35630,35632],{"class":54,"line":80},[52,35629,83],{"class":58},[52,35631,35593],{"class":62},[52,35633,77],{"class":58},[52,35635,35636,35638,35640],{"class":54,"line":108},[52,35637,2213],{"class":58},[52,35639,2216],{"class":62},[52,35641,105],{"class":58},[52,35643,35644,35646,35648],{"class":54,"line":118},[52,35645,2230],{"class":58},[52,35647,35593],{"class":62},[52,35649,77],{"class":58},[52,35651,35652,35654,35656],{"class":54,"line":594},[52,35653,121],{"class":58},[52,35655,63],{"class":62},[52,35657,77],{"class":58},[43,35659,35660],{"className":360,"code":35615,"language":362,"meta":48,"style":48},[31,35661,35662,35670,35678,35686,35694],{"__ignoreMap":48},[52,35663,35664,35666,35668],{"class":54,"line":55},[52,35665,59],{"class":58},[52,35667,63],{"class":371},[52,35669,77],{"class":58},[52,35671,35672,35674,35676],{"class":54,"line":80},[52,35673,83],{"class":58},[52,35675,35593],{"class":371},[52,35677,77],{"class":58},[52,35679,35680,35682,35684],{"class":54,"line":108},[52,35681,2213],{"class":58},[52,35683,2216],{"class":371},[52,35685,105],{"class":58},[52,35687,35688,35690,35692],{"class":54,"line":118},[52,35689,2230],{"class":58},[52,35691,35593],{"class":371},[52,35693,77],{"class":58},[52,35695,35696,35698,35700],{"class":54,"line":594},[52,35697,121],{"class":58},[52,35699,63],{"class":371},[52,35701,77],{"class":58},[43,35703,35704],{"className":2507,"code":35615,"language":2509,"meta":48,"style":48},[31,35705,35706,35714,35722,35730,35738],{"__ignoreMap":48},[52,35707,35708,35710,35712],{"class":54,"line":55},[52,35709,59],{"class":58},[52,35711,63],{"class":371},[52,35713,77],{"class":58},[52,35715,35716,35718,35720],{"class":54,"line":80},[52,35717,83],{"class":58},[52,35719,35593],{"class":371},[52,35721,77],{"class":58},[52,35723,35724,35726,35728],{"class":54,"line":108},[52,35725,2213],{"class":58},[52,35727,2216],{"class":371},[52,35729,105],{"class":58},[52,35731,35732,35734,35736],{"class":54,"line":118},[52,35733,2230],{"class":58},[52,35735,35593],{"class":371},[52,35737,77],{"class":58},[52,35739,35740,35742,35744],{"class":54,"line":594},[52,35741,121],{"class":58},[52,35743,63],{"class":371},[52,35745,77],{"class":58},[43,35747,35748],{"className":419,"code":35615,"language":420,"meta":48,"style":48},[31,35749,35750,35758,35766,35774,35782],{"__ignoreMap":48},[52,35751,35752,35754,35756],{"class":54,"line":55},[52,35753,59],{"class":58},[52,35755,63],{"class":371},[52,35757,77],{"class":58},[52,35759,35760,35762,35764],{"class":54,"line":80},[52,35761,83],{"class":58},[52,35763,35593],{"class":371},[52,35765,77],{"class":58},[52,35767,35768,35770,35772],{"class":54,"line":108},[52,35769,2213],{"class":58},[52,35771,2216],{"class":371},[52,35773,105],{"class":58},[52,35775,35776,35778,35780],{"class":54,"line":118},[52,35777,2230],{"class":58},[52,35779,35593],{"class":371},[52,35781,77],{"class":58},[52,35783,35784,35786,35788],{"class":54,"line":594},[52,35785,121],{"class":58},[52,35787,63],{"class":371},[52,35789,77],{"class":58},[43,35791,35793],{"className":222,"code":35792,"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,35794,35795,35805,35809,35823,35827,35836,35844,35848,35852],{"__ignoreMap":48},[52,35796,35797,35799,35801,35803],{"class":54,"line":55},[52,35798,232],{"class":231},[52,35800,9231],{"class":58},[52,35802,238],{"class":231},[52,35804,9236],{"class":73},[52,35806,35807],{"class":54,"line":80},[52,35808,597],{"emptyLinePlaceholder":171},[52,35810,35811,35813,35815,35817,35819,35821],{"class":54,"line":108},[52,35812,1721],{"class":231},[52,35814,1724],{"class":371},[52,35816,1727],{"class":231},[52,35818,1730],{"class":231},[52,35820,1733],{"class":66},[52,35822,1736],{"class":58},[52,35824,35825],{"class":54,"line":118},[52,35826,1751],{"class":58},[52,35828,35829,35831,35834],{"class":54,"line":594},[52,35830,1756],{"class":58},[52,35832,35833],{"class":73},"'Duotone'",[52,35835,4722],{"class":58},[52,35837,35838,35840,35842],{"class":54,"line":600},[52,35839,4727],{"class":58},[52,35841,2869],{"class":73},[52,35843,2129],{"class":58},[52,35845,35846],{"class":54,"line":606},[52,35847,4744],{"class":58},[52,35849,35850],{"class":54,"line":653},[52,35851,1773],{"class":58},[52,35853,35854],{"class":54,"line":662},[52,35855,1778],{"class":58},[156,35857,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35859},[35860,35861],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/duotone",{"title":35593,"description":35601},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":35868,"title":35869,"body":35870,"category":31459,"componentType":20842,"description":35877,"extension":168,"meta":36107,"navigation":171,"path":36108,"requiresChild":27763,"seo":36109,"stem":36110,"__hash__":36111},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":35871,"toc":36103},[35872,35875,35878,35880,35882,35885,35887,36101],[11,35873,35869],{"id":35874},"ellipse",[15,35876,35877],{},"Ellipse with independently adjustable horizontal and vertical radii",[26901,35879],{"component":35869},[23,35881,26905],{"id":21503},[26907,35883],{":props":35884},"[{\"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,35886,26913],{"id":26912},[217,35888,35889,35929,35967,36005,36043],{":tabs":1543},[43,35890,35892],{"className":45,"code":35891,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,35893,35894,35902,35909,35917,35921],{"__ignoreMap":48},[52,35895,35896,35898,35900],{"class":54,"line":55},[52,35897,59],{"class":58},[52,35899,63],{"class":62},[52,35901,77],{"class":58},[52,35903,35904,35906],{"class":54,"line":80},[52,35905,83],{"class":58},[52,35907,35908],{"class":62},"Ellipse\n",[52,35910,35911,35913,35915],{"class":54,"line":108},[52,35912,7351],{"class":66},[52,35914,70],{"class":58},[52,35916,7307],{"class":73},[52,35918,35919],{"class":54,"line":118},[52,35920,1224],{"class":58},[52,35922,35923,35925,35927],{"class":54,"line":594},[52,35924,121],{"class":58},[52,35926,63],{"class":62},[52,35928,77],{"class":58},[43,35930,35931],{"className":360,"code":35891,"language":362,"meta":48,"style":48},[31,35932,35933,35941,35947,35955,35959],{"__ignoreMap":48},[52,35934,35935,35937,35939],{"class":54,"line":55},[52,35936,59],{"class":58},[52,35938,63],{"class":371},[52,35940,77],{"class":58},[52,35942,35943,35945],{"class":54,"line":80},[52,35944,83],{"class":58},[52,35946,35908],{"class":371},[52,35948,35949,35951,35953],{"class":54,"line":108},[52,35950,7351],{"class":66},[52,35952,70],{"class":231},[52,35954,7307],{"class":73},[52,35956,35957],{"class":54,"line":118},[52,35958,1224],{"class":58},[52,35960,35961,35963,35965],{"class":54,"line":594},[52,35962,121],{"class":58},[52,35964,63],{"class":371},[52,35966,77],{"class":58},[43,35968,35969],{"className":2507,"code":35891,"language":2509,"meta":48,"style":48},[31,35970,35971,35979,35985,35993,35997],{"__ignoreMap":48},[52,35972,35973,35975,35977],{"class":54,"line":55},[52,35974,59],{"class":58},[52,35976,63],{"class":371},[52,35978,77],{"class":58},[52,35980,35981,35983],{"class":54,"line":80},[52,35982,83],{"class":58},[52,35984,35908],{"class":371},[52,35986,35987,35989,35991],{"class":54,"line":108},[52,35988,7351],{"class":66},[52,35990,70],{"class":58},[52,35992,7307],{"class":73},[52,35994,35995],{"class":54,"line":118},[52,35996,1224],{"class":58},[52,35998,35999,36001,36003],{"class":54,"line":594},[52,36000,121],{"class":58},[52,36002,63],{"class":371},[52,36004,77],{"class":58},[43,36006,36007],{"className":419,"code":35891,"language":420,"meta":48,"style":48},[31,36008,36009,36017,36023,36031,36035],{"__ignoreMap":48},[52,36010,36011,36013,36015],{"class":54,"line":55},[52,36012,59],{"class":58},[52,36014,63],{"class":371},[52,36016,77],{"class":58},[52,36018,36019,36021],{"class":54,"line":80},[52,36020,83],{"class":58},[52,36022,35908],{"class":371},[52,36024,36025,36027,36029],{"class":54,"line":108},[52,36026,7351],{"class":66},[52,36028,70],{"class":231},[52,36030,7307],{"class":73},[52,36032,36033],{"class":54,"line":118},[52,36034,1224],{"class":58},[52,36036,36037,36039,36041],{"class":54,"line":594},[52,36038,121],{"class":58},[52,36040,63],{"class":371},[52,36042,77],{"class":58},[43,36044,36046],{"className":222,"code":36045,"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,36047,36048,36058,36062,36076,36080,36093,36097],{"__ignoreMap":48},[52,36049,36050,36052,36054,36056],{"class":54,"line":55},[52,36051,232],{"class":231},[52,36053,9231],{"class":58},[52,36055,238],{"class":231},[52,36057,9236],{"class":73},[52,36059,36060],{"class":54,"line":80},[52,36061,597],{"emptyLinePlaceholder":171},[52,36063,36064,36066,36068,36070,36072,36074],{"class":54,"line":108},[52,36065,1721],{"class":231},[52,36067,1724],{"class":371},[52,36069,1727],{"class":231},[52,36071,1730],{"class":231},[52,36073,1733],{"class":66},[52,36075,1736],{"class":58},[52,36077,36078],{"class":54,"line":118},[52,36079,1751],{"class":58},[52,36081,36082,36084,36087,36089,36091],{"class":54,"line":594},[52,36083,1756],{"class":58},[52,36085,36086],{"class":73},"'Ellipse'",[52,36088,1762],{"class":58},[52,36090,7886],{"class":73},[52,36092,1768],{"class":58},[52,36094,36095],{"class":54,"line":600},[52,36096,1773],{"class":58},[52,36098,36099],{"class":54,"line":606},[52,36100,1778],{"class":58},[156,36102,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":36104},[36105,36106],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ellipse",{"title":35869,"description":35877},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":36113,"title":18481,"body":36114,"category":33330,"componentType":20848,"description":36121,"extension":168,"meta":36381,"navigation":171,"path":36382,"requiresChild":171,"seo":36383,"stem":36384,"__hash__":36385},"components/docs/components/Emboss.md",{"type":8,"value":36115,"toc":36377},[36116,36119,36122,36124,36126,36129,36131,36375],[11,36117,18481],{"id":36118},"emboss",[15,36120,36121],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[26901,36123],{"component":18481},[23,36125,26905],{"id":21503},[26907,36127],{":props":36128},"[{\"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,36130,26913],{"id":26912},[217,36132,36133,36178,36222,36266,36310],{":tabs":1543},[43,36134,36136],{"className":45,"code":36135,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[31,36137,36138,36146,36154,36162,36170],{"__ignoreMap":48},[52,36139,36140,36142,36144],{"class":54,"line":55},[52,36141,59],{"class":58},[52,36143,63],{"class":62},[52,36145,77],{"class":58},[52,36147,36148,36150,36152],{"class":54,"line":80},[52,36149,83],{"class":58},[52,36151,18481],{"class":62},[52,36153,77],{"class":58},[52,36155,36156,36158,36160],{"class":54,"line":108},[52,36157,2213],{"class":58},[52,36159,2216],{"class":62},[52,36161,105],{"class":58},[52,36163,36164,36166,36168],{"class":54,"line":118},[52,36165,2230],{"class":58},[52,36167,18481],{"class":62},[52,36169,77],{"class":58},[52,36171,36172,36174,36176],{"class":54,"line":594},[52,36173,121],{"class":58},[52,36175,63],{"class":62},[52,36177,77],{"class":58},[43,36179,36180],{"className":360,"code":36135,"language":362,"meta":48,"style":48},[31,36181,36182,36190,36198,36206,36214],{"__ignoreMap":48},[52,36183,36184,36186,36188],{"class":54,"line":55},[52,36185,59],{"class":58},[52,36187,63],{"class":371},[52,36189,77],{"class":58},[52,36191,36192,36194,36196],{"class":54,"line":80},[52,36193,83],{"class":58},[52,36195,18481],{"class":371},[52,36197,77],{"class":58},[52,36199,36200,36202,36204],{"class":54,"line":108},[52,36201,2213],{"class":58},[52,36203,2216],{"class":371},[52,36205,105],{"class":58},[52,36207,36208,36210,36212],{"class":54,"line":118},[52,36209,2230],{"class":58},[52,36211,18481],{"class":371},[52,36213,77],{"class":58},[52,36215,36216,36218,36220],{"class":54,"line":594},[52,36217,121],{"class":58},[52,36219,63],{"class":371},[52,36221,77],{"class":58},[43,36223,36224],{"className":2507,"code":36135,"language":2509,"meta":48,"style":48},[31,36225,36226,36234,36242,36250,36258],{"__ignoreMap":48},[52,36227,36228,36230,36232],{"class":54,"line":55},[52,36229,59],{"class":58},[52,36231,63],{"class":371},[52,36233,77],{"class":58},[52,36235,36236,36238,36240],{"class":54,"line":80},[52,36237,83],{"class":58},[52,36239,18481],{"class":371},[52,36241,77],{"class":58},[52,36243,36244,36246,36248],{"class":54,"line":108},[52,36245,2213],{"class":58},[52,36247,2216],{"class":371},[52,36249,105],{"class":58},[52,36251,36252,36254,36256],{"class":54,"line":118},[52,36253,2230],{"class":58},[52,36255,18481],{"class":371},[52,36257,77],{"class":58},[52,36259,36260,36262,36264],{"class":54,"line":594},[52,36261,121],{"class":58},[52,36263,63],{"class":371},[52,36265,77],{"class":58},[43,36267,36268],{"className":419,"code":36135,"language":420,"meta":48,"style":48},[31,36269,36270,36278,36286,36294,36302],{"__ignoreMap":48},[52,36271,36272,36274,36276],{"class":54,"line":55},[52,36273,59],{"class":58},[52,36275,63],{"class":371},[52,36277,77],{"class":58},[52,36279,36280,36282,36284],{"class":54,"line":80},[52,36281,83],{"class":58},[52,36283,18481],{"class":371},[52,36285,77],{"class":58},[52,36287,36288,36290,36292],{"class":54,"line":108},[52,36289,2213],{"class":58},[52,36291,2216],{"class":371},[52,36293,105],{"class":58},[52,36295,36296,36298,36300],{"class":54,"line":118},[52,36297,2230],{"class":58},[52,36299,18481],{"class":371},[52,36301,77],{"class":58},[52,36303,36304,36306,36308],{"class":54,"line":594},[52,36305,121],{"class":58},[52,36307,63],{"class":371},[52,36309,77],{"class":58},[43,36311,36313],{"className":222,"code":36312,"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,36314,36315,36325,36329,36343,36347,36355,36363,36367,36371],{"__ignoreMap":48},[52,36316,36317,36319,36321,36323],{"class":54,"line":55},[52,36318,232],{"class":231},[52,36320,9231],{"class":58},[52,36322,238],{"class":231},[52,36324,9236],{"class":73},[52,36326,36327],{"class":54,"line":80},[52,36328,597],{"emptyLinePlaceholder":171},[52,36330,36331,36333,36335,36337,36339,36341],{"class":54,"line":108},[52,36332,1721],{"class":231},[52,36334,1724],{"class":371},[52,36336,1727],{"class":231},[52,36338,1730],{"class":231},[52,36340,1733],{"class":66},[52,36342,1736],{"class":58},[52,36344,36345],{"class":54,"line":118},[52,36346,1751],{"class":58},[52,36348,36349,36351,36353],{"class":54,"line":594},[52,36350,1756],{"class":58},[52,36352,19129],{"class":73},[52,36354,4722],{"class":58},[52,36356,36357,36359,36361],{"class":54,"line":600},[52,36358,4727],{"class":58},[52,36360,2869],{"class":73},[52,36362,2129],{"class":58},[52,36364,36365],{"class":54,"line":606},[52,36366,4744],{"class":58},[52,36368,36369],{"class":54,"line":653},[52,36370,1773],{"class":58},[52,36372,36373],{"class":54,"line":662},[52,36374,1778],{"class":58},[156,36376,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36378},[36379,36380],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/emboss",{"title":18481,"description":36121},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":36387,"title":36388,"body":36389,"category":27760,"componentType":20842,"description":36396,"extension":168,"meta":36581,"navigation":171,"path":36582,"requiresChild":27763,"seo":36583,"stem":36584,"__hash__":36585},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":36390,"toc":36577},[36391,36394,36397,36399,36401,36404,36406,36575],[11,36392,36388],{"id":36393},"fallinglines",[15,36395,36396],{},"Directional falling lines with a leading-to-trailing color fade",[26901,36398],{"component":36388},[23,36400,26905],{"id":21503},[26907,36402],{":props":36403},"[{\"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,36405,26913],{"id":26912},[217,36407,36408,36437,36465,36493,36521],{":tabs":1543},[43,36409,36411],{"className":45,"code":36410,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[31,36412,36413,36421,36429],{"__ignoreMap":48},[52,36414,36415,36417,36419],{"class":54,"line":55},[52,36416,59],{"class":58},[52,36418,63],{"class":62},[52,36420,77],{"class":58},[52,36422,36423,36425,36427],{"class":54,"line":80},[52,36424,83],{"class":58},[52,36426,36388],{"class":62},[52,36428,105],{"class":58},[52,36430,36431,36433,36435],{"class":54,"line":108},[52,36432,121],{"class":58},[52,36434,63],{"class":62},[52,36436,77],{"class":58},[43,36438,36439],{"className":360,"code":36410,"language":362,"meta":48,"style":48},[31,36440,36441,36449,36457],{"__ignoreMap":48},[52,36442,36443,36445,36447],{"class":54,"line":55},[52,36444,59],{"class":58},[52,36446,63],{"class":371},[52,36448,77],{"class":58},[52,36450,36451,36453,36455],{"class":54,"line":80},[52,36452,83],{"class":58},[52,36454,36388],{"class":371},[52,36456,105],{"class":58},[52,36458,36459,36461,36463],{"class":54,"line":108},[52,36460,121],{"class":58},[52,36462,63],{"class":371},[52,36464,77],{"class":58},[43,36466,36467],{"className":2507,"code":36410,"language":2509,"meta":48,"style":48},[31,36468,36469,36477,36485],{"__ignoreMap":48},[52,36470,36471,36473,36475],{"class":54,"line":55},[52,36472,59],{"class":58},[52,36474,63],{"class":371},[52,36476,77],{"class":58},[52,36478,36479,36481,36483],{"class":54,"line":80},[52,36480,83],{"class":58},[52,36482,36388],{"class":371},[52,36484,105],{"class":58},[52,36486,36487,36489,36491],{"class":54,"line":108},[52,36488,121],{"class":58},[52,36490,63],{"class":371},[52,36492,77],{"class":58},[43,36494,36495],{"className":419,"code":36410,"language":420,"meta":48,"style":48},[31,36496,36497,36505,36513],{"__ignoreMap":48},[52,36498,36499,36501,36503],{"class":54,"line":55},[52,36500,59],{"class":58},[52,36502,63],{"class":371},[52,36504,77],{"class":58},[52,36506,36507,36509,36511],{"class":54,"line":80},[52,36508,83],{"class":58},[52,36510,36388],{"class":371},[52,36512,105],{"class":58},[52,36514,36515,36517,36519],{"class":54,"line":108},[52,36516,121],{"class":58},[52,36518,63],{"class":371},[52,36520,77],{"class":58},[43,36522,36524],{"className":222,"code":36523,"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,36525,36526,36536,36540,36554,36558,36567,36571],{"__ignoreMap":48},[52,36527,36528,36530,36532,36534],{"class":54,"line":55},[52,36529,232],{"class":231},[52,36531,9231],{"class":58},[52,36533,238],{"class":231},[52,36535,9236],{"class":73},[52,36537,36538],{"class":54,"line":80},[52,36539,597],{"emptyLinePlaceholder":171},[52,36541,36542,36544,36546,36548,36550,36552],{"class":54,"line":108},[52,36543,1721],{"class":231},[52,36545,1724],{"class":371},[52,36547,1727],{"class":231},[52,36549,1730],{"class":231},[52,36551,1733],{"class":66},[52,36553,1736],{"class":58},[52,36555,36556],{"class":54,"line":118},[52,36557,1751],{"class":58},[52,36559,36560,36562,36565],{"class":54,"line":594},[52,36561,1756],{"class":58},[52,36563,36564],{"class":73},"'FallingLines'",[52,36566,2129],{"class":58},[52,36568,36569],{"class":54,"line":600},[52,36570,1773],{"class":58},[52,36572,36573],{"class":54,"line":606},[52,36574,1778],{"class":58},[156,36576,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36578},[36579,36580],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fallinglines",{"title":36388,"description":36396},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":36587,"title":36588,"body":36589,"category":27503,"componentType":20848,"description":36596,"extension":168,"meta":36857,"navigation":171,"path":36858,"requiresChild":171,"seo":36859,"stem":36860,"__hash__":36861},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":36590,"toc":36853},[36591,36594,36597,36599,36601,36604,36606,36851],[11,36592,36588],{"id":36593},"filmgrain",[15,36595,36596],{},"Analog film grain texture overlay, weighted toward darker areas",[26901,36598],{"component":36588},[23,36600,26905],{"id":21503},[26907,36602],{":props":36603},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"},{\"name\":\"bias\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Concentrates grain in darker areas. Higher values focus grain more heavily on shadows; 0 applies grain uniformly.\"},{\"name\":\"animated\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"When enabled, the grain pattern changes each frame for a dynamic film effect\"}]",[23,36605,26913],{"id":26912},[217,36607,36608,36653,36697,36741,36785],{":tabs":1543},[43,36609,36611],{"className":45,"code":36610,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[31,36612,36613,36621,36629,36637,36645],{"__ignoreMap":48},[52,36614,36615,36617,36619],{"class":54,"line":55},[52,36616,59],{"class":58},[52,36618,63],{"class":62},[52,36620,77],{"class":58},[52,36622,36623,36625,36627],{"class":54,"line":80},[52,36624,83],{"class":58},[52,36626,36588],{"class":62},[52,36628,77],{"class":58},[52,36630,36631,36633,36635],{"class":54,"line":108},[52,36632,2213],{"class":58},[52,36634,2216],{"class":62},[52,36636,105],{"class":58},[52,36638,36639,36641,36643],{"class":54,"line":118},[52,36640,2230],{"class":58},[52,36642,36588],{"class":62},[52,36644,77],{"class":58},[52,36646,36647,36649,36651],{"class":54,"line":594},[52,36648,121],{"class":58},[52,36650,63],{"class":62},[52,36652,77],{"class":58},[43,36654,36655],{"className":360,"code":36610,"language":362,"meta":48,"style":48},[31,36656,36657,36665,36673,36681,36689],{"__ignoreMap":48},[52,36658,36659,36661,36663],{"class":54,"line":55},[52,36660,59],{"class":58},[52,36662,63],{"class":371},[52,36664,77],{"class":58},[52,36666,36667,36669,36671],{"class":54,"line":80},[52,36668,83],{"class":58},[52,36670,36588],{"class":371},[52,36672,77],{"class":58},[52,36674,36675,36677,36679],{"class":54,"line":108},[52,36676,2213],{"class":58},[52,36678,2216],{"class":371},[52,36680,105],{"class":58},[52,36682,36683,36685,36687],{"class":54,"line":118},[52,36684,2230],{"class":58},[52,36686,36588],{"class":371},[52,36688,77],{"class":58},[52,36690,36691,36693,36695],{"class":54,"line":594},[52,36692,121],{"class":58},[52,36694,63],{"class":371},[52,36696,77],{"class":58},[43,36698,36699],{"className":2507,"code":36610,"language":2509,"meta":48,"style":48},[31,36700,36701,36709,36717,36725,36733],{"__ignoreMap":48},[52,36702,36703,36705,36707],{"class":54,"line":55},[52,36704,59],{"class":58},[52,36706,63],{"class":371},[52,36708,77],{"class":58},[52,36710,36711,36713,36715],{"class":54,"line":80},[52,36712,83],{"class":58},[52,36714,36588],{"class":371},[52,36716,77],{"class":58},[52,36718,36719,36721,36723],{"class":54,"line":108},[52,36720,2213],{"class":58},[52,36722,2216],{"class":371},[52,36724,105],{"class":58},[52,36726,36727,36729,36731],{"class":54,"line":118},[52,36728,2230],{"class":58},[52,36730,36588],{"class":371},[52,36732,77],{"class":58},[52,36734,36735,36737,36739],{"class":54,"line":594},[52,36736,121],{"class":58},[52,36738,63],{"class":371},[52,36740,77],{"class":58},[43,36742,36743],{"className":419,"code":36610,"language":420,"meta":48,"style":48},[31,36744,36745,36753,36761,36769,36777],{"__ignoreMap":48},[52,36746,36747,36749,36751],{"class":54,"line":55},[52,36748,59],{"class":58},[52,36750,63],{"class":371},[52,36752,77],{"class":58},[52,36754,36755,36757,36759],{"class":54,"line":80},[52,36756,83],{"class":58},[52,36758,36588],{"class":371},[52,36760,77],{"class":58},[52,36762,36763,36765,36767],{"class":54,"line":108},[52,36764,2213],{"class":58},[52,36766,2216],{"class":371},[52,36768,105],{"class":58},[52,36770,36771,36773,36775],{"class":54,"line":118},[52,36772,2230],{"class":58},[52,36774,36588],{"class":371},[52,36776,77],{"class":58},[52,36778,36779,36781,36783],{"class":54,"line":594},[52,36780,121],{"class":58},[52,36782,63],{"class":371},[52,36784,77],{"class":58},[43,36786,36788],{"className":222,"code":36787,"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,36789,36790,36800,36804,36818,36822,36831,36839,36843,36847],{"__ignoreMap":48},[52,36791,36792,36794,36796,36798],{"class":54,"line":55},[52,36793,232],{"class":231},[52,36795,9231],{"class":58},[52,36797,238],{"class":231},[52,36799,9236],{"class":73},[52,36801,36802],{"class":54,"line":80},[52,36803,597],{"emptyLinePlaceholder":171},[52,36805,36806,36808,36810,36812,36814,36816],{"class":54,"line":108},[52,36807,1721],{"class":231},[52,36809,1724],{"class":371},[52,36811,1727],{"class":231},[52,36813,1730],{"class":231},[52,36815,1733],{"class":66},[52,36817,1736],{"class":58},[52,36819,36820],{"class":54,"line":118},[52,36821,1751],{"class":58},[52,36823,36824,36826,36829],{"class":54,"line":594},[52,36825,1756],{"class":58},[52,36827,36828],{"class":73},"'FilmGrain'",[52,36830,4722],{"class":58},[52,36832,36833,36835,36837],{"class":54,"line":600},[52,36834,4727],{"class":58},[52,36836,2869],{"class":73},[52,36838,2129],{"class":58},[52,36840,36841],{"class":54,"line":606},[52,36842,4744],{"class":58},[52,36844,36845],{"class":54,"line":653},[52,36846,1773],{"class":58},[52,36848,36849],{"class":54,"line":662},[52,36850,1778],{"class":58},[156,36852,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36854},[36855,36856],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/filmgrain",{"title":36588,"description":36596},"docs/components/FilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":36863,"title":36864,"body":36865,"category":27760,"componentType":20842,"description":36872,"extension":168,"meta":37057,"navigation":171,"path":37058,"requiresChild":27763,"seo":37059,"stem":37060,"__hash__":37061},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":36866,"toc":37053},[36867,36870,36873,36875,36877,36880,36882,37051],[11,36868,36864],{"id":36869},"floatingparticles",[15,36871,36872],{},"Animated floating particles with twinkle effects",[26901,36874],{"component":36864},[23,36876,26905],{"id":21503},[26907,36878],{":props":36879},"[{\"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,36881,26913],{"id":26912},[217,36883,36884,36913,36941,36969,36997],{":tabs":1543},[43,36885,36887],{"className":45,"code":36886,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[31,36888,36889,36897,36905],{"__ignoreMap":48},[52,36890,36891,36893,36895],{"class":54,"line":55},[52,36892,59],{"class":58},[52,36894,63],{"class":62},[52,36896,77],{"class":58},[52,36898,36899,36901,36903],{"class":54,"line":80},[52,36900,83],{"class":58},[52,36902,36864],{"class":62},[52,36904,105],{"class":58},[52,36906,36907,36909,36911],{"class":54,"line":108},[52,36908,121],{"class":58},[52,36910,63],{"class":62},[52,36912,77],{"class":58},[43,36914,36915],{"className":360,"code":36886,"language":362,"meta":48,"style":48},[31,36916,36917,36925,36933],{"__ignoreMap":48},[52,36918,36919,36921,36923],{"class":54,"line":55},[52,36920,59],{"class":58},[52,36922,63],{"class":371},[52,36924,77],{"class":58},[52,36926,36927,36929,36931],{"class":54,"line":80},[52,36928,83],{"class":58},[52,36930,36864],{"class":371},[52,36932,105],{"class":58},[52,36934,36935,36937,36939],{"class":54,"line":108},[52,36936,121],{"class":58},[52,36938,63],{"class":371},[52,36940,77],{"class":58},[43,36942,36943],{"className":2507,"code":36886,"language":2509,"meta":48,"style":48},[31,36944,36945,36953,36961],{"__ignoreMap":48},[52,36946,36947,36949,36951],{"class":54,"line":55},[52,36948,59],{"class":58},[52,36950,63],{"class":371},[52,36952,77],{"class":58},[52,36954,36955,36957,36959],{"class":54,"line":80},[52,36956,83],{"class":58},[52,36958,36864],{"class":371},[52,36960,105],{"class":58},[52,36962,36963,36965,36967],{"class":54,"line":108},[52,36964,121],{"class":58},[52,36966,63],{"class":371},[52,36968,77],{"class":58},[43,36970,36971],{"className":419,"code":36886,"language":420,"meta":48,"style":48},[31,36972,36973,36981,36989],{"__ignoreMap":48},[52,36974,36975,36977,36979],{"class":54,"line":55},[52,36976,59],{"class":58},[52,36978,63],{"class":371},[52,36980,77],{"class":58},[52,36982,36983,36985,36987],{"class":54,"line":80},[52,36984,83],{"class":58},[52,36986,36864],{"class":371},[52,36988,105],{"class":58},[52,36990,36991,36993,36995],{"class":54,"line":108},[52,36992,121],{"class":58},[52,36994,63],{"class":371},[52,36996,77],{"class":58},[43,36998,37000],{"className":222,"code":36999,"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,37001,37002,37012,37016,37030,37034,37043,37047],{"__ignoreMap":48},[52,37003,37004,37006,37008,37010],{"class":54,"line":55},[52,37005,232],{"class":231},[52,37007,9231],{"class":58},[52,37009,238],{"class":231},[52,37011,9236],{"class":73},[52,37013,37014],{"class":54,"line":80},[52,37015,597],{"emptyLinePlaceholder":171},[52,37017,37018,37020,37022,37024,37026,37028],{"class":54,"line":108},[52,37019,1721],{"class":231},[52,37021,1724],{"class":371},[52,37023,1727],{"class":231},[52,37025,1730],{"class":231},[52,37027,1733],{"class":66},[52,37029,1736],{"class":58},[52,37031,37032],{"class":54,"line":118},[52,37033,1751],{"class":58},[52,37035,37036,37038,37041],{"class":54,"line":594},[52,37037,1756],{"class":58},[52,37039,37040],{"class":73},"'FloatingParticles'",[52,37042,2129],{"class":58},[52,37044,37045],{"class":54,"line":600},[52,37046,1773],{"class":58},[52,37048,37049],{"class":54,"line":606},[52,37050,1778],{"class":58},[156,37052,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37054},[37055,37056],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/floatingparticles",{"title":36864,"description":36872},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":37063,"title":37064,"body":37065,"category":28094,"componentType":20848,"description":37072,"extension":168,"meta":37333,"navigation":171,"path":37334,"requiresChild":171,"seo":37335,"stem":37336,"__hash__":37337},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":37066,"toc":37329},[37067,37070,37073,37075,37077,37080,37082,37327],[11,37068,37064],{"id":37069},"flowfield",[15,37071,37072],{},"Fluid-like distortion with constant smooth motion",[26901,37074],{"component":37064},[23,37076,26905],{"id":21503},[26907,37078],{":props":37079},"[{\"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,37081,26913],{"id":26912},[217,37083,37084,37129,37173,37217,37261],{":tabs":1543},[43,37085,37087],{"className":45,"code":37086,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[31,37088,37089,37097,37105,37113,37121],{"__ignoreMap":48},[52,37090,37091,37093,37095],{"class":54,"line":55},[52,37092,59],{"class":58},[52,37094,63],{"class":62},[52,37096,77],{"class":58},[52,37098,37099,37101,37103],{"class":54,"line":80},[52,37100,83],{"class":58},[52,37102,37064],{"class":62},[52,37104,77],{"class":58},[52,37106,37107,37109,37111],{"class":54,"line":108},[52,37108,2213],{"class":58},[52,37110,2216],{"class":62},[52,37112,105],{"class":58},[52,37114,37115,37117,37119],{"class":54,"line":118},[52,37116,2230],{"class":58},[52,37118,37064],{"class":62},[52,37120,77],{"class":58},[52,37122,37123,37125,37127],{"class":54,"line":594},[52,37124,121],{"class":58},[52,37126,63],{"class":62},[52,37128,77],{"class":58},[43,37130,37131],{"className":360,"code":37086,"language":362,"meta":48,"style":48},[31,37132,37133,37141,37149,37157,37165],{"__ignoreMap":48},[52,37134,37135,37137,37139],{"class":54,"line":55},[52,37136,59],{"class":58},[52,37138,63],{"class":371},[52,37140,77],{"class":58},[52,37142,37143,37145,37147],{"class":54,"line":80},[52,37144,83],{"class":58},[52,37146,37064],{"class":371},[52,37148,77],{"class":58},[52,37150,37151,37153,37155],{"class":54,"line":108},[52,37152,2213],{"class":58},[52,37154,2216],{"class":371},[52,37156,105],{"class":58},[52,37158,37159,37161,37163],{"class":54,"line":118},[52,37160,2230],{"class":58},[52,37162,37064],{"class":371},[52,37164,77],{"class":58},[52,37166,37167,37169,37171],{"class":54,"line":594},[52,37168,121],{"class":58},[52,37170,63],{"class":371},[52,37172,77],{"class":58},[43,37174,37175],{"className":2507,"code":37086,"language":2509,"meta":48,"style":48},[31,37176,37177,37185,37193,37201,37209],{"__ignoreMap":48},[52,37178,37179,37181,37183],{"class":54,"line":55},[52,37180,59],{"class":58},[52,37182,63],{"class":371},[52,37184,77],{"class":58},[52,37186,37187,37189,37191],{"class":54,"line":80},[52,37188,83],{"class":58},[52,37190,37064],{"class":371},[52,37192,77],{"class":58},[52,37194,37195,37197,37199],{"class":54,"line":108},[52,37196,2213],{"class":58},[52,37198,2216],{"class":371},[52,37200,105],{"class":58},[52,37202,37203,37205,37207],{"class":54,"line":118},[52,37204,2230],{"class":58},[52,37206,37064],{"class":371},[52,37208,77],{"class":58},[52,37210,37211,37213,37215],{"class":54,"line":594},[52,37212,121],{"class":58},[52,37214,63],{"class":371},[52,37216,77],{"class":58},[43,37218,37219],{"className":419,"code":37086,"language":420,"meta":48,"style":48},[31,37220,37221,37229,37237,37245,37253],{"__ignoreMap":48},[52,37222,37223,37225,37227],{"class":54,"line":55},[52,37224,59],{"class":58},[52,37226,63],{"class":371},[52,37228,77],{"class":58},[52,37230,37231,37233,37235],{"class":54,"line":80},[52,37232,83],{"class":58},[52,37234,37064],{"class":371},[52,37236,77],{"class":58},[52,37238,37239,37241,37243],{"class":54,"line":108},[52,37240,2213],{"class":58},[52,37242,2216],{"class":371},[52,37244,105],{"class":58},[52,37246,37247,37249,37251],{"class":54,"line":118},[52,37248,2230],{"class":58},[52,37250,37064],{"class":371},[52,37252,77],{"class":58},[52,37254,37255,37257,37259],{"class":54,"line":594},[52,37256,121],{"class":58},[52,37258,63],{"class":371},[52,37260,77],{"class":58},[43,37262,37264],{"className":222,"code":37263,"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,37265,37266,37276,37280,37294,37298,37307,37315,37319,37323],{"__ignoreMap":48},[52,37267,37268,37270,37272,37274],{"class":54,"line":55},[52,37269,232],{"class":231},[52,37271,9231],{"class":58},[52,37273,238],{"class":231},[52,37275,9236],{"class":73},[52,37277,37278],{"class":54,"line":80},[52,37279,597],{"emptyLinePlaceholder":171},[52,37281,37282,37284,37286,37288,37290,37292],{"class":54,"line":108},[52,37283,1721],{"class":231},[52,37285,1724],{"class":371},[52,37287,1727],{"class":231},[52,37289,1730],{"class":231},[52,37291,1733],{"class":66},[52,37293,1736],{"class":58},[52,37295,37296],{"class":54,"line":118},[52,37297,1751],{"class":58},[52,37299,37300,37302,37305],{"class":54,"line":594},[52,37301,1756],{"class":58},[52,37303,37304],{"class":73},"'FlowField'",[52,37306,4722],{"class":58},[52,37308,37309,37311,37313],{"class":54,"line":600},[52,37310,4727],{"class":58},[52,37312,2869],{"class":73},[52,37314,2129],{"class":58},[52,37316,37317],{"class":54,"line":606},[52,37318,4744],{"class":58},[52,37320,37321],{"class":54,"line":653},[52,37322,1773],{"class":58},[52,37324,37325],{"class":54,"line":662},[52,37326,1778],{"class":58},[156,37328,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37330},[37331,37332],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flowfield",{"title":37064,"description":37072},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":37339,"title":37340,"body":37341,"category":31459,"componentType":20842,"description":37348,"extension":168,"meta":37626,"navigation":171,"path":37627,"requiresChild":27763,"seo":37628,"stem":37629,"__hash__":37630},"components/docs/components/Flower.md","Flower",{"type":8,"value":37342,"toc":37622},[37343,37346,37349,37351,37353,37356,37358,37620],[11,37344,37340],{"id":37345},"flower",[15,37347,37348],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[26901,37350],{"component":37340},[23,37352,26905],{"id":21503},[26907,37354],{":props":37355},"[{\"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,37357,26913],{"id":26912},[217,37359,37360,37409,37460,37508,37558],{":tabs":1543},[43,37361,37363],{"className":45,"code":37362,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,37364,37365,37373,37380,37388,37397,37401],{"__ignoreMap":48},[52,37366,37367,37369,37371],{"class":54,"line":55},[52,37368,59],{"class":58},[52,37370,63],{"class":62},[52,37372,77],{"class":58},[52,37374,37375,37377],{"class":54,"line":80},[52,37376,83],{"class":58},[52,37378,37379],{"class":62},"Flower\n",[52,37381,37382,37384,37386],{"class":54,"line":108},[52,37383,7351],{"class":66},[52,37385,70],{"class":58},[52,37387,7307],{"class":73},[52,37389,37390,37392,37394],{"class":54,"line":118},[52,37391,14901],{"class":66},[52,37393,70],{"class":58},[52,37395,37396],{"class":73},"\"0.4\"\n",[52,37398,37399],{"class":54,"line":594},[52,37400,1224],{"class":58},[52,37402,37403,37405,37407],{"class":54,"line":600},[52,37404,121],{"class":58},[52,37406,63],{"class":62},[52,37408,77],{"class":58},[43,37410,37412],{"className":360,"code":37411,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,37413,37414,37422,37428,37436,37448,37452],{"__ignoreMap":48},[52,37415,37416,37418,37420],{"class":54,"line":55},[52,37417,59],{"class":58},[52,37419,63],{"class":371},[52,37421,77],{"class":58},[52,37423,37424,37426],{"class":54,"line":80},[52,37425,83],{"class":58},[52,37427,37379],{"class":371},[52,37429,37430,37432,37434],{"class":54,"line":108},[52,37431,7351],{"class":66},[52,37433,70],{"class":231},[52,37435,7307],{"class":73},[52,37437,37438,37440,37442,37444,37446],{"class":54,"line":118},[52,37439,7361],{"class":66},[52,37441,70],{"class":231},[52,37443,723],{"class":58},[52,37445,5963],{"class":371},[52,37447,729],{"class":58},[52,37449,37450],{"class":54,"line":594},[52,37451,1224],{"class":58},[52,37453,37454,37456,37458],{"class":54,"line":600},[52,37455,121],{"class":58},[52,37457,63],{"class":371},[52,37459,77],{"class":58},[43,37461,37462],{"className":2507,"code":37411,"language":2509,"meta":48,"style":48},[31,37463,37464,37472,37478,37486,37496,37500],{"__ignoreMap":48},[52,37465,37466,37468,37470],{"class":54,"line":55},[52,37467,59],{"class":58},[52,37469,63],{"class":371},[52,37471,77],{"class":58},[52,37473,37474,37476],{"class":54,"line":80},[52,37475,83],{"class":58},[52,37477,37379],{"class":371},[52,37479,37480,37482,37484],{"class":54,"line":108},[52,37481,7351],{"class":66},[52,37483,70],{"class":58},[52,37485,7307],{"class":73},[52,37487,37488,37490,37492,37494],{"class":54,"line":118},[52,37489,7361],{"class":66},[52,37491,24845],{"class":58},[52,37493,5963],{"class":371},[52,37495,729],{"class":58},[52,37497,37498],{"class":54,"line":594},[52,37499,1224],{"class":58},[52,37501,37502,37504,37506],{"class":54,"line":600},[52,37503,121],{"class":58},[52,37505,63],{"class":371},[52,37507,77],{"class":58},[43,37509,37510],{"className":419,"code":37411,"language":420,"meta":48,"style":48},[31,37511,37512,37520,37526,37534,37546,37550],{"__ignoreMap":48},[52,37513,37514,37516,37518],{"class":54,"line":55},[52,37515,59],{"class":58},[52,37517,63],{"class":371},[52,37519,77],{"class":58},[52,37521,37522,37524],{"class":54,"line":80},[52,37523,83],{"class":58},[52,37525,37379],{"class":371},[52,37527,37528,37530,37532],{"class":54,"line":108},[52,37529,7351],{"class":66},[52,37531,70],{"class":231},[52,37533,7307],{"class":73},[52,37535,37536,37538,37540,37542,37544],{"class":54,"line":118},[52,37537,7361],{"class":66},[52,37539,70],{"class":231},[52,37541,723],{"class":58},[52,37543,5963],{"class":371},[52,37545,729],{"class":58},[52,37547,37548],{"class":54,"line":594},[52,37549,1224],{"class":58},[52,37551,37552,37554,37556],{"class":54,"line":600},[52,37553,121],{"class":58},[52,37555,63],{"class":371},[52,37557,77],{"class":58},[43,37559,37561],{"className":222,"code":37560,"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,37562,37563,37573,37577,37591,37595,37612,37616],{"__ignoreMap":48},[52,37564,37565,37567,37569,37571],{"class":54,"line":55},[52,37566,232],{"class":231},[52,37568,9231],{"class":58},[52,37570,238],{"class":231},[52,37572,9236],{"class":73},[52,37574,37575],{"class":54,"line":80},[52,37576,597],{"emptyLinePlaceholder":171},[52,37578,37579,37581,37583,37585,37587,37589],{"class":54,"line":108},[52,37580,1721],{"class":231},[52,37582,1724],{"class":371},[52,37584,1727],{"class":231},[52,37586,1730],{"class":231},[52,37588,1733],{"class":66},[52,37590,1736],{"class":58},[52,37592,37593],{"class":54,"line":118},[52,37594,1751],{"class":58},[52,37596,37597,37599,37602,37604,37606,37608,37610],{"class":54,"line":594},[52,37598,1756],{"class":58},[52,37600,37601],{"class":73},"'Flower'",[52,37603,1762],{"class":58},[52,37605,7886],{"class":73},[52,37607,4278],{"class":58},[52,37609,5963],{"class":371},[52,37611,1768],{"class":58},[52,37613,37614],{"class":54,"line":600},[52,37615,1773],{"class":58},[52,37617,37618],{"class":54,"line":606},[52,37619,1778],{"class":58},[156,37621,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37623},[37624,37625],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flower",{"title":37340,"description":37348},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":37632,"title":37633,"body":37634,"category":27760,"componentType":20842,"description":37641,"extension":168,"meta":37826,"navigation":171,"path":37827,"requiresChild":27763,"seo":37828,"stem":37829,"__hash__":37830},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":37635,"toc":37822},[37636,37639,37642,37644,37646,37649,37651,37820],[11,37637,37633],{"id":37638},"flowinggradient",[15,37640,37641],{},"Liquid silk gradient with organic flowing color bands",[26901,37643],{"component":37633},[23,37645,26905],{"id":21503},[26907,37647],{":props":37648},"[{\"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,37650,26913],{"id":26912},[217,37652,37653,37682,37710,37738,37766],{":tabs":1543},[43,37654,37656],{"className":45,"code":37655,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[31,37657,37658,37666,37674],{"__ignoreMap":48},[52,37659,37660,37662,37664],{"class":54,"line":55},[52,37661,59],{"class":58},[52,37663,63],{"class":62},[52,37665,77],{"class":58},[52,37667,37668,37670,37672],{"class":54,"line":80},[52,37669,83],{"class":58},[52,37671,37633],{"class":62},[52,37673,105],{"class":58},[52,37675,37676,37678,37680],{"class":54,"line":108},[52,37677,121],{"class":58},[52,37679,63],{"class":62},[52,37681,77],{"class":58},[43,37683,37684],{"className":360,"code":37655,"language":362,"meta":48,"style":48},[31,37685,37686,37694,37702],{"__ignoreMap":48},[52,37687,37688,37690,37692],{"class":54,"line":55},[52,37689,59],{"class":58},[52,37691,63],{"class":371},[52,37693,77],{"class":58},[52,37695,37696,37698,37700],{"class":54,"line":80},[52,37697,83],{"class":58},[52,37699,37633],{"class":371},[52,37701,105],{"class":58},[52,37703,37704,37706,37708],{"class":54,"line":108},[52,37705,121],{"class":58},[52,37707,63],{"class":371},[52,37709,77],{"class":58},[43,37711,37712],{"className":2507,"code":37655,"language":2509,"meta":48,"style":48},[31,37713,37714,37722,37730],{"__ignoreMap":48},[52,37715,37716,37718,37720],{"class":54,"line":55},[52,37717,59],{"class":58},[52,37719,63],{"class":371},[52,37721,77],{"class":58},[52,37723,37724,37726,37728],{"class":54,"line":80},[52,37725,83],{"class":58},[52,37727,37633],{"class":371},[52,37729,105],{"class":58},[52,37731,37732,37734,37736],{"class":54,"line":108},[52,37733,121],{"class":58},[52,37735,63],{"class":371},[52,37737,77],{"class":58},[43,37739,37740],{"className":419,"code":37655,"language":420,"meta":48,"style":48},[31,37741,37742,37750,37758],{"__ignoreMap":48},[52,37743,37744,37746,37748],{"class":54,"line":55},[52,37745,59],{"class":58},[52,37747,63],{"class":371},[52,37749,77],{"class":58},[52,37751,37752,37754,37756],{"class":54,"line":80},[52,37753,83],{"class":58},[52,37755,37633],{"class":371},[52,37757,105],{"class":58},[52,37759,37760,37762,37764],{"class":54,"line":108},[52,37761,121],{"class":58},[52,37763,63],{"class":371},[52,37765,77],{"class":58},[43,37767,37769],{"className":222,"code":37768,"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,37770,37771,37781,37785,37799,37803,37812,37816],{"__ignoreMap":48},[52,37772,37773,37775,37777,37779],{"class":54,"line":55},[52,37774,232],{"class":231},[52,37776,9231],{"class":58},[52,37778,238],{"class":231},[52,37780,9236],{"class":73},[52,37782,37783],{"class":54,"line":80},[52,37784,597],{"emptyLinePlaceholder":171},[52,37786,37787,37789,37791,37793,37795,37797],{"class":54,"line":108},[52,37788,1721],{"class":231},[52,37790,1724],{"class":371},[52,37792,1727],{"class":231},[52,37794,1730],{"class":231},[52,37796,1733],{"class":66},[52,37798,1736],{"class":58},[52,37800,37801],{"class":54,"line":118},[52,37802,1751],{"class":58},[52,37804,37805,37807,37810],{"class":54,"line":594},[52,37806,1756],{"class":58},[52,37808,37809],{"class":73},"'FlowingGradient'",[52,37811,2129],{"class":58},[52,37813,37814],{"class":54,"line":600},[52,37815,1773],{"class":58},[52,37817,37818],{"class":54,"line":606},[52,37819,1778],{"class":58},[156,37821,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37823},[37824,37825],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flowinggradient",{"title":37633,"description":37641},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":37832,"title":37833,"body":37834,"category":28094,"componentType":20848,"description":37841,"extension":168,"meta":38102,"navigation":171,"path":38103,"requiresChild":171,"seo":38104,"stem":38105,"__hash__":38106},"components/docs/components/FlutedGlass.md","FlutedGlass",{"type":8,"value":37835,"toc":38098},[37836,37839,37842,37844,37846,37849,37851,38096],[11,37837,37833],{"id":37838},"flutedglass",[15,37840,37841],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[26901,37843],{"component":37833},[23,37845,26905],{"id":21503},[26907,37847],{":props":37848},"[{\"name\":\"shape\",\"type\":\"\\\"bars\\\" | \\\"rounded\\\" | \\\"waves\\\"\",\"default\":\"bars\",\"description\":\"Cross-section shape of each flute\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the flutes in degrees (0 = vertical bars)\"},{\"name\":\"frequency\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Number of flutes across the longest viewport axis\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How smoothly distortion fades from each flute centre to its edge (0 = flat middle / sharp seams, 1 = gentle curve)\"},{\"name\":\"waveAmplitude\",\"type\":\"number\",\"default\":\"0.06\",\"description\":\"How far each flute sways horizontally as it travels (Waves shape only)\"},{\"name\":\"waveFrequency\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How many sways fit along each flute (Waves shape only)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Animation speed — drifts the flute pattern over time and flows wave perturbations\"},{\"name\":\"refraction\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"How aggressively each flute bends content beneath it\"},{\"name\":\"aberration\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Chromatic aberration — splits RGB along the refraction direction at flute seams\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Direction the light source is coming from (0 = head-on, 90 = grazing)\"},{\"name\":\"highlight\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Strength of the specular reflection on each flute\"},{\"name\":\"highlightSoftness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Spread of the specular peak (0 = pin-tight, 1 = broad sheen)\"},{\"name\":\"highlightColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the specular highlight\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion samples beyond the canvas\"}]",[23,37850,26913],{"id":26912},[217,37852,37853,37898,37942,37986,38030],{":tabs":1543},[43,37854,37856],{"className":45,"code":37855,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle />\n \u003C/FlutedGlass>\n\u003C/Shader>\n",[31,37857,37858,37866,37874,37882,37890],{"__ignoreMap":48},[52,37859,37860,37862,37864],{"class":54,"line":55},[52,37861,59],{"class":58},[52,37863,63],{"class":62},[52,37865,77],{"class":58},[52,37867,37868,37870,37872],{"class":54,"line":80},[52,37869,83],{"class":58},[52,37871,37833],{"class":62},[52,37873,77],{"class":58},[52,37875,37876,37878,37880],{"class":54,"line":108},[52,37877,2213],{"class":58},[52,37879,2216],{"class":62},[52,37881,105],{"class":58},[52,37883,37884,37886,37888],{"class":54,"line":118},[52,37885,2230],{"class":58},[52,37887,37833],{"class":62},[52,37889,77],{"class":58},[52,37891,37892,37894,37896],{"class":54,"line":594},[52,37893,121],{"class":58},[52,37895,63],{"class":62},[52,37897,77],{"class":58},[43,37899,37900],{"className":360,"code":37855,"language":362,"meta":48,"style":48},[31,37901,37902,37910,37918,37926,37934],{"__ignoreMap":48},[52,37903,37904,37906,37908],{"class":54,"line":55},[52,37905,59],{"class":58},[52,37907,63],{"class":371},[52,37909,77],{"class":58},[52,37911,37912,37914,37916],{"class":54,"line":80},[52,37913,83],{"class":58},[52,37915,37833],{"class":371},[52,37917,77],{"class":58},[52,37919,37920,37922,37924],{"class":54,"line":108},[52,37921,2213],{"class":58},[52,37923,2216],{"class":371},[52,37925,105],{"class":58},[52,37927,37928,37930,37932],{"class":54,"line":118},[52,37929,2230],{"class":58},[52,37931,37833],{"class":371},[52,37933,77],{"class":58},[52,37935,37936,37938,37940],{"class":54,"line":594},[52,37937,121],{"class":58},[52,37939,63],{"class":371},[52,37941,77],{"class":58},[43,37943,37944],{"className":2507,"code":37855,"language":2509,"meta":48,"style":48},[31,37945,37946,37954,37962,37970,37978],{"__ignoreMap":48},[52,37947,37948,37950,37952],{"class":54,"line":55},[52,37949,59],{"class":58},[52,37951,63],{"class":371},[52,37953,77],{"class":58},[52,37955,37956,37958,37960],{"class":54,"line":80},[52,37957,83],{"class":58},[52,37959,37833],{"class":371},[52,37961,77],{"class":58},[52,37963,37964,37966,37968],{"class":54,"line":108},[52,37965,2213],{"class":58},[52,37967,2216],{"class":371},[52,37969,105],{"class":58},[52,37971,37972,37974,37976],{"class":54,"line":118},[52,37973,2230],{"class":58},[52,37975,37833],{"class":371},[52,37977,77],{"class":58},[52,37979,37980,37982,37984],{"class":54,"line":594},[52,37981,121],{"class":58},[52,37983,63],{"class":371},[52,37985,77],{"class":58},[43,37987,37988],{"className":419,"code":37855,"language":420,"meta":48,"style":48},[31,37989,37990,37998,38006,38014,38022],{"__ignoreMap":48},[52,37991,37992,37994,37996],{"class":54,"line":55},[52,37993,59],{"class":58},[52,37995,63],{"class":371},[52,37997,77],{"class":58},[52,37999,38000,38002,38004],{"class":54,"line":80},[52,38001,83],{"class":58},[52,38003,37833],{"class":371},[52,38005,77],{"class":58},[52,38007,38008,38010,38012],{"class":54,"line":108},[52,38009,2213],{"class":58},[52,38011,2216],{"class":371},[52,38013,105],{"class":58},[52,38015,38016,38018,38020],{"class":54,"line":118},[52,38017,2230],{"class":58},[52,38019,37833],{"class":371},[52,38021,77],{"class":58},[52,38023,38024,38026,38028],{"class":54,"line":594},[52,38025,121],{"class":58},[52,38027,63],{"class":371},[52,38029,77],{"class":58},[43,38031,38033],{"className":222,"code":38032,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlutedGlass', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,38034,38035,38045,38049,38063,38067,38076,38084,38088,38092],{"__ignoreMap":48},[52,38036,38037,38039,38041,38043],{"class":54,"line":55},[52,38038,232],{"class":231},[52,38040,9231],{"class":58},[52,38042,238],{"class":231},[52,38044,9236],{"class":73},[52,38046,38047],{"class":54,"line":80},[52,38048,597],{"emptyLinePlaceholder":171},[52,38050,38051,38053,38055,38057,38059,38061],{"class":54,"line":108},[52,38052,1721],{"class":231},[52,38054,1724],{"class":371},[52,38056,1727],{"class":231},[52,38058,1730],{"class":231},[52,38060,1733],{"class":66},[52,38062,1736],{"class":58},[52,38064,38065],{"class":54,"line":118},[52,38066,1751],{"class":58},[52,38068,38069,38071,38074],{"class":54,"line":594},[52,38070,1756],{"class":58},[52,38072,38073],{"class":73},"'FlutedGlass'",[52,38075,4722],{"class":58},[52,38077,38078,38080,38082],{"class":54,"line":600},[52,38079,4727],{"class":58},[52,38081,2869],{"class":73},[52,38083,2129],{"class":58},[52,38085,38086],{"class":54,"line":606},[52,38087,4744],{"class":58},[52,38089,38090],{"class":54,"line":653},[52,38091,1773],{"class":58},[52,38093,38094],{"class":54,"line":662},[52,38095,1778],{"class":58},[156,38097,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":38099},[38100,38101],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flutedglass",{"title":37833,"description":37841},"docs/components/FlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":38108,"title":38109,"body":38110,"category":30893,"componentType":20842,"description":38117,"extension":168,"meta":38302,"navigation":171,"path":38303,"requiresChild":27763,"seo":38304,"stem":38305,"__hash__":38306},"components/docs/components/Fog.md","Fog",{"type":8,"value":38111,"toc":38298},[38112,38115,38118,38120,38122,38125,38127,38296],[11,38113,38109],{"id":38114},"fog",[15,38116,38117],{},"Fog that fills the screen and interacts with the mouse",[26901,38119],{"component":38109},[23,38121,26905],{"id":21503},[26907,38123],{":props":38124},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#e0e0e0\",\"description\":\"Primary fog color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#888888\",\"description\":\"Secondary fog color — creates variation across the field\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Deterministic starting pattern — different seeds produce different fog configurations\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Simulation speed multiplier\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Ambient motion strength\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"15\",\"description\":\"Fine-scale swirling structure — higher values produce more intricate wisps and vortices\"},{\"name\":\"blending\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"How much the two colors blend together — 0 behaves like oil & water (colors stay distinct with sharp boundaries), 1 behaves like food coloring (colors fully mix)\"},{\"name\":\"mouseInfluence\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Strength of cursor influence — move the cursor to push fog\"},{\"name\":\"mouseRadius\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Radius of cursor influence area\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,38126,26913],{"id":26912},[217,38128,38129,38158,38186,38214,38242],{":tabs":1543},[43,38130,38132],{"className":45,"code":38131,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFog />\n\u003C/Shader>\n",[31,38133,38134,38142,38150],{"__ignoreMap":48},[52,38135,38136,38138,38140],{"class":54,"line":55},[52,38137,59],{"class":58},[52,38139,63],{"class":62},[52,38141,77],{"class":58},[52,38143,38144,38146,38148],{"class":54,"line":80},[52,38145,83],{"class":58},[52,38147,38109],{"class":62},[52,38149,105],{"class":58},[52,38151,38152,38154,38156],{"class":54,"line":108},[52,38153,121],{"class":58},[52,38155,63],{"class":62},[52,38157,77],{"class":58},[43,38159,38160],{"className":360,"code":38131,"language":362,"meta":48,"style":48},[31,38161,38162,38170,38178],{"__ignoreMap":48},[52,38163,38164,38166,38168],{"class":54,"line":55},[52,38165,59],{"class":58},[52,38167,63],{"class":371},[52,38169,77],{"class":58},[52,38171,38172,38174,38176],{"class":54,"line":80},[52,38173,83],{"class":58},[52,38175,38109],{"class":371},[52,38177,105],{"class":58},[52,38179,38180,38182,38184],{"class":54,"line":108},[52,38181,121],{"class":58},[52,38183,63],{"class":371},[52,38185,77],{"class":58},[43,38187,38188],{"className":2507,"code":38131,"language":2509,"meta":48,"style":48},[31,38189,38190,38198,38206],{"__ignoreMap":48},[52,38191,38192,38194,38196],{"class":54,"line":55},[52,38193,59],{"class":58},[52,38195,63],{"class":371},[52,38197,77],{"class":58},[52,38199,38200,38202,38204],{"class":54,"line":80},[52,38201,83],{"class":58},[52,38203,38109],{"class":371},[52,38205,105],{"class":58},[52,38207,38208,38210,38212],{"class":54,"line":108},[52,38209,121],{"class":58},[52,38211,63],{"class":371},[52,38213,77],{"class":58},[43,38215,38216],{"className":419,"code":38131,"language":420,"meta":48,"style":48},[31,38217,38218,38226,38234],{"__ignoreMap":48},[52,38219,38220,38222,38224],{"class":54,"line":55},[52,38221,59],{"class":58},[52,38223,63],{"class":371},[52,38225,77],{"class":58},[52,38227,38228,38230,38232],{"class":54,"line":80},[52,38229,83],{"class":58},[52,38231,38109],{"class":371},[52,38233,105],{"class":58},[52,38235,38236,38238,38240],{"class":54,"line":108},[52,38237,121],{"class":58},[52,38239,63],{"class":371},[52,38241,77],{"class":58},[43,38243,38245],{"className":222,"code":38244,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Fog', props: {} }\n ]\n})\n",[31,38246,38247,38257,38261,38275,38279,38288,38292],{"__ignoreMap":48},[52,38248,38249,38251,38253,38255],{"class":54,"line":55},[52,38250,232],{"class":231},[52,38252,9231],{"class":58},[52,38254,238],{"class":231},[52,38256,9236],{"class":73},[52,38258,38259],{"class":54,"line":80},[52,38260,597],{"emptyLinePlaceholder":171},[52,38262,38263,38265,38267,38269,38271,38273],{"class":54,"line":108},[52,38264,1721],{"class":231},[52,38266,1724],{"class":371},[52,38268,1727],{"class":231},[52,38270,1730],{"class":231},[52,38272,1733],{"class":66},[52,38274,1736],{"class":58},[52,38276,38277],{"class":54,"line":118},[52,38278,1751],{"class":58},[52,38280,38281,38283,38286],{"class":54,"line":594},[52,38282,1756],{"class":58},[52,38284,38285],{"class":73},"'Fog'",[52,38287,2129],{"class":58},[52,38289,38290],{"class":54,"line":600},[52,38291,1773],{"class":58},[52,38293,38294],{"class":54,"line":606},[52,38295,1778],{"class":58},[156,38297,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":38299},[38300,38301],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fog",{"title":38109,"description":38117},"docs/components/Fog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":38308,"title":38309,"body":38310,"category":28094,"componentType":20848,"description":38317,"extension":168,"meta":38578,"navigation":171,"path":38579,"requiresChild":171,"seo":38580,"stem":38581,"__hash__":38582},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":38311,"toc":38574},[38312,38315,38318,38320,38322,38325,38327,38572],[11,38313,38309],{"id":38314},"form3d",[15,38316,38317],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26901,38319],{"component":38309},[23,38321,26905],{"id":21503},[26907,38323],{":props":38324},"[{\"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,38326,26913],{"id":26912},[217,38328,38329,38374,38418,38462,38506],{":tabs":1543},[43,38330,38332],{"className":45,"code":38331,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,38333,38334,38342,38350,38358,38366],{"__ignoreMap":48},[52,38335,38336,38338,38340],{"class":54,"line":55},[52,38337,59],{"class":58},[52,38339,63],{"class":62},[52,38341,77],{"class":58},[52,38343,38344,38346,38348],{"class":54,"line":80},[52,38345,83],{"class":58},[52,38347,38309],{"class":62},[52,38349,77],{"class":58},[52,38351,38352,38354,38356],{"class":54,"line":108},[52,38353,2213],{"class":58},[52,38355,2216],{"class":62},[52,38357,105],{"class":58},[52,38359,38360,38362,38364],{"class":54,"line":118},[52,38361,2230],{"class":58},[52,38363,38309],{"class":62},[52,38365,77],{"class":58},[52,38367,38368,38370,38372],{"class":54,"line":594},[52,38369,121],{"class":58},[52,38371,63],{"class":62},[52,38373,77],{"class":58},[43,38375,38376],{"className":360,"code":38331,"language":362,"meta":48,"style":48},[31,38377,38378,38386,38394,38402,38410],{"__ignoreMap":48},[52,38379,38380,38382,38384],{"class":54,"line":55},[52,38381,59],{"class":58},[52,38383,63],{"class":371},[52,38385,77],{"class":58},[52,38387,38388,38390,38392],{"class":54,"line":80},[52,38389,83],{"class":58},[52,38391,38309],{"class":371},[52,38393,77],{"class":58},[52,38395,38396,38398,38400],{"class":54,"line":108},[52,38397,2213],{"class":58},[52,38399,2216],{"class":371},[52,38401,105],{"class":58},[52,38403,38404,38406,38408],{"class":54,"line":118},[52,38405,2230],{"class":58},[52,38407,38309],{"class":371},[52,38409,77],{"class":58},[52,38411,38412,38414,38416],{"class":54,"line":594},[52,38413,121],{"class":58},[52,38415,63],{"class":371},[52,38417,77],{"class":58},[43,38419,38420],{"className":2507,"code":38331,"language":2509,"meta":48,"style":48},[31,38421,38422,38430,38438,38446,38454],{"__ignoreMap":48},[52,38423,38424,38426,38428],{"class":54,"line":55},[52,38425,59],{"class":58},[52,38427,63],{"class":371},[52,38429,77],{"class":58},[52,38431,38432,38434,38436],{"class":54,"line":80},[52,38433,83],{"class":58},[52,38435,38309],{"class":371},[52,38437,77],{"class":58},[52,38439,38440,38442,38444],{"class":54,"line":108},[52,38441,2213],{"class":58},[52,38443,2216],{"class":371},[52,38445,105],{"class":58},[52,38447,38448,38450,38452],{"class":54,"line":118},[52,38449,2230],{"class":58},[52,38451,38309],{"class":371},[52,38453,77],{"class":58},[52,38455,38456,38458,38460],{"class":54,"line":594},[52,38457,121],{"class":58},[52,38459,63],{"class":371},[52,38461,77],{"class":58},[43,38463,38464],{"className":419,"code":38331,"language":420,"meta":48,"style":48},[31,38465,38466,38474,38482,38490,38498],{"__ignoreMap":48},[52,38467,38468,38470,38472],{"class":54,"line":55},[52,38469,59],{"class":58},[52,38471,63],{"class":371},[52,38473,77],{"class":58},[52,38475,38476,38478,38480],{"class":54,"line":80},[52,38477,83],{"class":58},[52,38479,38309],{"class":371},[52,38481,77],{"class":58},[52,38483,38484,38486,38488],{"class":54,"line":108},[52,38485,2213],{"class":58},[52,38487,2216],{"class":371},[52,38489,105],{"class":58},[52,38491,38492,38494,38496],{"class":54,"line":118},[52,38493,2230],{"class":58},[52,38495,38309],{"class":371},[52,38497,77],{"class":58},[52,38499,38500,38502,38504],{"class":54,"line":594},[52,38501,121],{"class":58},[52,38503,63],{"class":371},[52,38505,77],{"class":58},[43,38507,38509],{"className":222,"code":38508,"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,38510,38511,38521,38525,38539,38543,38552,38560,38564,38568],{"__ignoreMap":48},[52,38512,38513,38515,38517,38519],{"class":54,"line":55},[52,38514,232],{"class":231},[52,38516,9231],{"class":58},[52,38518,238],{"class":231},[52,38520,9236],{"class":73},[52,38522,38523],{"class":54,"line":80},[52,38524,597],{"emptyLinePlaceholder":171},[52,38526,38527,38529,38531,38533,38535,38537],{"class":54,"line":108},[52,38528,1721],{"class":231},[52,38530,1724],{"class":371},[52,38532,1727],{"class":231},[52,38534,1730],{"class":231},[52,38536,1733],{"class":66},[52,38538,1736],{"class":58},[52,38540,38541],{"class":54,"line":118},[52,38542,1751],{"class":58},[52,38544,38545,38547,38550],{"class":54,"line":594},[52,38546,1756],{"class":58},[52,38548,38549],{"class":73},"'Form3D'",[52,38551,4722],{"class":58},[52,38553,38554,38556,38558],{"class":54,"line":600},[52,38555,4727],{"class":58},[52,38557,2869],{"class":73},[52,38559,2129],{"class":58},[52,38561,38562],{"class":54,"line":606},[52,38563,4744],{"class":58},[52,38565,38566],{"class":54,"line":653},[52,38567,1773],{"class":58},[52,38569,38570],{"class":54,"line":662},[52,38571,1778],{"class":58},[156,38573,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":38575},[38576,38577],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/form3d",{"title":38309,"description":38317},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":38584,"title":38585,"body":38586,"category":27760,"componentType":20842,"description":38593,"extension":168,"meta":38778,"navigation":171,"path":38779,"requiresChild":27763,"seo":38780,"stem":38781,"__hash__":38782},"components/docs/components/FractalNoise.md","FractalNoise",{"type":8,"value":38587,"toc":38774},[38588,38591,38594,38596,38598,38601,38603,38772],[11,38589,38585],{"id":38590},"fractalnoise",[15,38592,38593],{},"Multi-octave fractal Brownian motion noise texture with true noise evolution",[26901,38595],{"component":38585},[23,38597,26905],{"id":21503},[26907,38599],{":props":38600},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Second color\"},{\"name\":\"octaves\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Number of noise octaves (more = more detail)\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"2\",\"description\":\"How much finer each successive octave becomes\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How strongly finer octaves contribute — higher values create more texture contrast\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Speed at which the noise pattern evolves in place\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation angle in degrees\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation\"}]",[23,38602,26913],{"id":26912},[217,38604,38605,38634,38662,38690,38718],{":tabs":1543},[43,38606,38608],{"className":45,"code":38607,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFractalNoise />\n\u003C/Shader>\n",[31,38609,38610,38618,38626],{"__ignoreMap":48},[52,38611,38612,38614,38616],{"class":54,"line":55},[52,38613,59],{"class":58},[52,38615,63],{"class":62},[52,38617,77],{"class":58},[52,38619,38620,38622,38624],{"class":54,"line":80},[52,38621,83],{"class":58},[52,38623,38585],{"class":62},[52,38625,105],{"class":58},[52,38627,38628,38630,38632],{"class":54,"line":108},[52,38629,121],{"class":58},[52,38631,63],{"class":62},[52,38633,77],{"class":58},[43,38635,38636],{"className":360,"code":38607,"language":362,"meta":48,"style":48},[31,38637,38638,38646,38654],{"__ignoreMap":48},[52,38639,38640,38642,38644],{"class":54,"line":55},[52,38641,59],{"class":58},[52,38643,63],{"class":371},[52,38645,77],{"class":58},[52,38647,38648,38650,38652],{"class":54,"line":80},[52,38649,83],{"class":58},[52,38651,38585],{"class":371},[52,38653,105],{"class":58},[52,38655,38656,38658,38660],{"class":54,"line":108},[52,38657,121],{"class":58},[52,38659,63],{"class":371},[52,38661,77],{"class":58},[43,38663,38664],{"className":2507,"code":38607,"language":2509,"meta":48,"style":48},[31,38665,38666,38674,38682],{"__ignoreMap":48},[52,38667,38668,38670,38672],{"class":54,"line":55},[52,38669,59],{"class":58},[52,38671,63],{"class":371},[52,38673,77],{"class":58},[52,38675,38676,38678,38680],{"class":54,"line":80},[52,38677,83],{"class":58},[52,38679,38585],{"class":371},[52,38681,105],{"class":58},[52,38683,38684,38686,38688],{"class":54,"line":108},[52,38685,121],{"class":58},[52,38687,63],{"class":371},[52,38689,77],{"class":58},[43,38691,38692],{"className":419,"code":38607,"language":420,"meta":48,"style":48},[31,38693,38694,38702,38710],{"__ignoreMap":48},[52,38695,38696,38698,38700],{"class":54,"line":55},[52,38697,59],{"class":58},[52,38699,63],{"class":371},[52,38701,77],{"class":58},[52,38703,38704,38706,38708],{"class":54,"line":80},[52,38705,83],{"class":58},[52,38707,38585],{"class":371},[52,38709,105],{"class":58},[52,38711,38712,38714,38716],{"class":54,"line":108},[52,38713,121],{"class":58},[52,38715,63],{"class":371},[52,38717,77],{"class":58},[43,38719,38721],{"className":222,"code":38720,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FractalNoise', props: {} }\n ]\n})\n",[31,38722,38723,38733,38737,38751,38755,38764,38768],{"__ignoreMap":48},[52,38724,38725,38727,38729,38731],{"class":54,"line":55},[52,38726,232],{"class":231},[52,38728,9231],{"class":58},[52,38730,238],{"class":231},[52,38732,9236],{"class":73},[52,38734,38735],{"class":54,"line":80},[52,38736,597],{"emptyLinePlaceholder":171},[52,38738,38739,38741,38743,38745,38747,38749],{"class":54,"line":108},[52,38740,1721],{"class":231},[52,38742,1724],{"class":371},[52,38744,1727],{"class":231},[52,38746,1730],{"class":231},[52,38748,1733],{"class":66},[52,38750,1736],{"class":58},[52,38752,38753],{"class":54,"line":118},[52,38754,1751],{"class":58},[52,38756,38757,38759,38762],{"class":54,"line":594},[52,38758,1756],{"class":58},[52,38760,38761],{"class":73},"'FractalNoise'",[52,38763,2129],{"class":58},[52,38765,38766],{"class":54,"line":600},[52,38767,1773],{"class":58},[52,38769,38770],{"class":54,"line":606},[52,38771,1778],{"class":58},[156,38773,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":38775},[38776,38777],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fractalnoise",{"title":38585,"description":38593},"docs/components/FractalNoise","O0X_7T8gWYqrFyq1eCRc9MKnDsqOVuIAbT3XEdbhe3w",{"id":38784,"title":18474,"body":38785,"category":33330,"componentType":20848,"description":38792,"extension":168,"meta":39052,"navigation":171,"path":39053,"requiresChild":171,"seo":39054,"stem":39055,"__hash__":39056},"components/docs/components/Glass.md",{"type":8,"value":38786,"toc":39048},[38787,38790,38793,38795,38797,38800,38802,39046],[11,38788,18474],{"id":38789},"glass",[15,38791,38792],{},"Optically realistic glass lens driven in a custom shape",[26901,38794],{"component":18474},[23,38796,26905],{"id":21503},[26907,38798],{":props":38799},"[{\"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,38801,26913],{"id":26912},[217,38803,38804,38849,38893,38937,38981],{":tabs":1543},[43,38805,38807],{"className":45,"code":38806,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[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":62},[52,38816,77],{"class":58},[52,38818,38819,38821,38823],{"class":54,"line":80},[52,38820,83],{"class":58},[52,38822,18474],{"class":62},[52,38824,77],{"class":58},[52,38826,38827,38829,38831],{"class":54,"line":108},[52,38828,2213],{"class":58},[52,38830,2216],{"class":62},[52,38832,105],{"class":58},[52,38834,38835,38837,38839],{"class":54,"line":118},[52,38836,2230],{"class":58},[52,38838,18474],{"class":62},[52,38840,77],{"class":58},[52,38842,38843,38845,38847],{"class":54,"line":594},[52,38844,121],{"class":58},[52,38846,63],{"class":62},[52,38848,77],{"class":58},[43,38850,38851],{"className":360,"code":38806,"language":362,"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,18474],{"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,18474],{"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,38895],{"className":2507,"code":38806,"language":2509,"meta":48,"style":48},[31,38896,38897,38905,38913,38921,38929],{"__ignoreMap":48},[52,38898,38899,38901,38903],{"class":54,"line":55},[52,38900,59],{"class":58},[52,38902,63],{"class":371},[52,38904,77],{"class":58},[52,38906,38907,38909,38911],{"class":54,"line":80},[52,38908,83],{"class":58},[52,38910,18474],{"class":371},[52,38912,77],{"class":58},[52,38914,38915,38917,38919],{"class":54,"line":108},[52,38916,2213],{"class":58},[52,38918,2216],{"class":371},[52,38920,105],{"class":58},[52,38922,38923,38925,38927],{"class":54,"line":118},[52,38924,2230],{"class":58},[52,38926,18474],{"class":371},[52,38928,77],{"class":58},[52,38930,38931,38933,38935],{"class":54,"line":594},[52,38932,121],{"class":58},[52,38934,63],{"class":371},[52,38936,77],{"class":58},[43,38938,38939],{"className":419,"code":38806,"language":420,"meta":48,"style":48},[31,38940,38941,38949,38957,38965,38973],{"__ignoreMap":48},[52,38942,38943,38945,38947],{"class":54,"line":55},[52,38944,59],{"class":58},[52,38946,63],{"class":371},[52,38948,77],{"class":58},[52,38950,38951,38953,38955],{"class":54,"line":80},[52,38952,83],{"class":58},[52,38954,18474],{"class":371},[52,38956,77],{"class":58},[52,38958,38959,38961,38963],{"class":54,"line":108},[52,38960,2213],{"class":58},[52,38962,2216],{"class":371},[52,38964,105],{"class":58},[52,38966,38967,38969,38971],{"class":54,"line":118},[52,38968,2230],{"class":58},[52,38970,18474],{"class":371},[52,38972,77],{"class":58},[52,38974,38975,38977,38979],{"class":54,"line":594},[52,38976,121],{"class":58},[52,38978,63],{"class":371},[52,38980,77],{"class":58},[43,38982,38984],{"className":222,"code":38983,"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,38985,38986,38996,39000,39014,39018,39026,39034,39038,39042],{"__ignoreMap":48},[52,38987,38988,38990,38992,38994],{"class":54,"line":55},[52,38989,232],{"class":231},[52,38991,9231],{"class":58},[52,38993,238],{"class":231},[52,38995,9236],{"class":73},[52,38997,38998],{"class":54,"line":80},[52,38999,597],{"emptyLinePlaceholder":171},[52,39001,39002,39004,39006,39008,39010,39012],{"class":54,"line":108},[52,39003,1721],{"class":231},[52,39005,1724],{"class":371},[52,39007,1727],{"class":231},[52,39009,1730],{"class":231},[52,39011,1733],{"class":66},[52,39013,1736],{"class":58},[52,39015,39016],{"class":54,"line":118},[52,39017,1751],{"class":58},[52,39019,39020,39022,39024],{"class":54,"line":594},[52,39021,1756],{"class":58},[52,39023,19015],{"class":73},[52,39025,4722],{"class":58},[52,39027,39028,39030,39032],{"class":54,"line":600},[52,39029,4727],{"class":58},[52,39031,2869],{"class":73},[52,39033,2129],{"class":58},[52,39035,39036],{"class":54,"line":606},[52,39037,4744],{"class":58},[52,39039,39040],{"class":54,"line":653},[52,39041,1773],{"class":58},[52,39043,39044],{"class":54,"line":662},[52,39045,1778],{"class":58},[156,39047,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":39049},[39050,39051],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glass",{"title":18474,"description":38792},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":39058,"title":3936,"body":39059,"category":28094,"componentType":20848,"description":39066,"extension":168,"meta":39383,"navigation":171,"path":39384,"requiresChild":171,"seo":39385,"stem":39386,"__hash__":39387},"components/docs/components/GlassTiles.md",{"type":8,"value":39060,"toc":39379},[39061,39064,39067,39069,39071,39074,39076,39377],[11,39062,3936],{"id":39063},"glasstiles",[15,39065,39066],{},"Refraction-like distortion in a tile grid pattern",[26901,39068],{"component":3936},[23,39070,26905],{"id":21503},[26907,39072],{":props":39073},"[{\"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,39075,26913],{"id":26912},[217,39077,39078,39135,39194,39250,39308],{":tabs":1543},[43,39079,39081],{"className":45,"code":39080,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,39082,39083,39091,39098,39107,39111,39119,39127],{"__ignoreMap":48},[52,39084,39085,39087,39089],{"class":54,"line":55},[52,39086,59],{"class":58},[52,39088,63],{"class":62},[52,39090,77],{"class":58},[52,39092,39093,39095],{"class":54,"line":80},[52,39094,83],{"class":58},[52,39096,39097],{"class":62},"GlassTiles\n",[52,39099,39100,39102,39104],{"class":54,"line":108},[52,39101,17870],{"class":66},[52,39103,70],{"class":58},[52,39105,39106],{"class":73},"\"2\"\n",[52,39108,39109],{"class":54,"line":118},[52,39110,26949],{"class":58},[52,39112,39113,39115,39117],{"class":54,"line":594},[52,39114,2213],{"class":58},[52,39116,2216],{"class":62},[52,39118,105],{"class":58},[52,39120,39121,39123,39125],{"class":54,"line":600},[52,39122,2230],{"class":58},[52,39124,3936],{"class":62},[52,39126,77],{"class":58},[52,39128,39129,39131,39133],{"class":54,"line":606},[52,39130,121],{"class":58},[52,39132,63],{"class":62},[52,39134,77],{"class":58},[43,39136,39138],{"className":360,"code":39137,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,39139,39140,39148,39154,39166,39170,39178,39186],{"__ignoreMap":48},[52,39141,39142,39144,39146],{"class":54,"line":55},[52,39143,59],{"class":58},[52,39145,63],{"class":371},[52,39147,77],{"class":58},[52,39149,39150,39152],{"class":54,"line":80},[52,39151,83],{"class":58},[52,39153,39097],{"class":371},[52,39155,39156,39158,39160,39162,39164],{"class":54,"line":108},[52,39157,17981],{"class":66},[52,39159,70],{"class":231},[52,39161,723],{"class":58},[52,39163,4927],{"class":371},[52,39165,729],{"class":58},[52,39167,39168],{"class":54,"line":118},[52,39169,26949],{"class":58},[52,39171,39172,39174,39176],{"class":54,"line":594},[52,39173,2213],{"class":58},[52,39175,2216],{"class":371},[52,39177,105],{"class":58},[52,39179,39180,39182,39184],{"class":54,"line":600},[52,39181,2230],{"class":58},[52,39183,3936],{"class":371},[52,39185,77],{"class":58},[52,39187,39188,39190,39192],{"class":54,"line":606},[52,39189,121],{"class":58},[52,39191,63],{"class":371},[52,39193,77],{"class":58},[43,39195,39196],{"className":2507,"code":39137,"language":2509,"meta":48,"style":48},[31,39197,39198,39206,39212,39222,39226,39234,39242],{"__ignoreMap":48},[52,39199,39200,39202,39204],{"class":54,"line":55},[52,39201,59],{"class":58},[52,39203,63],{"class":371},[52,39205,77],{"class":58},[52,39207,39208,39210],{"class":54,"line":80},[52,39209,83],{"class":58},[52,39211,39097],{"class":371},[52,39213,39214,39216,39218,39220],{"class":54,"line":108},[52,39215,17981],{"class":66},[52,39217,24845],{"class":58},[52,39219,4927],{"class":371},[52,39221,729],{"class":58},[52,39223,39224],{"class":54,"line":118},[52,39225,26949],{"class":58},[52,39227,39228,39230,39232],{"class":54,"line":594},[52,39229,2213],{"class":58},[52,39231,2216],{"class":371},[52,39233,105],{"class":58},[52,39235,39236,39238,39240],{"class":54,"line":600},[52,39237,2230],{"class":58},[52,39239,3936],{"class":371},[52,39241,77],{"class":58},[52,39243,39244,39246,39248],{"class":54,"line":606},[52,39245,121],{"class":58},[52,39247,63],{"class":371},[52,39249,77],{"class":58},[43,39251,39252],{"className":419,"code":39137,"language":420,"meta":48,"style":48},[31,39253,39254,39262,39268,39280,39284,39292,39300],{"__ignoreMap":48},[52,39255,39256,39258,39260],{"class":54,"line":55},[52,39257,59],{"class":58},[52,39259,63],{"class":371},[52,39261,77],{"class":58},[52,39263,39264,39266],{"class":54,"line":80},[52,39265,83],{"class":58},[52,39267,39097],{"class":371},[52,39269,39270,39272,39274,39276,39278],{"class":54,"line":108},[52,39271,17981],{"class":66},[52,39273,70],{"class":231},[52,39275,723],{"class":58},[52,39277,4927],{"class":371},[52,39279,729],{"class":58},[52,39281,39282],{"class":54,"line":118},[52,39283,26949],{"class":58},[52,39285,39286,39288,39290],{"class":54,"line":594},[52,39287,2213],{"class":58},[52,39289,2216],{"class":371},[52,39291,105],{"class":58},[52,39293,39294,39296,39298],{"class":54,"line":600},[52,39295,2230],{"class":58},[52,39297,3936],{"class":371},[52,39299,77],{"class":58},[52,39301,39302,39304,39306],{"class":54,"line":606},[52,39303,121],{"class":58},[52,39305,63],{"class":371},[52,39307,77],{"class":58},[43,39309,39311],{"className":222,"code":39310,"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,39312,39313,39323,39327,39341,39345,39357,39365,39369,39373],{"__ignoreMap":48},[52,39314,39315,39317,39319,39321],{"class":54,"line":55},[52,39316,232],{"class":231},[52,39318,9231],{"class":58},[52,39320,238],{"class":231},[52,39322,9236],{"class":73},[52,39324,39325],{"class":54,"line":80},[52,39326,597],{"emptyLinePlaceholder":171},[52,39328,39329,39331,39333,39335,39337,39339],{"class":54,"line":108},[52,39330,1721],{"class":231},[52,39332,1724],{"class":371},[52,39334,1727],{"class":231},[52,39336,1730],{"class":231},[52,39338,1733],{"class":66},[52,39340,1736],{"class":58},[52,39342,39343],{"class":54,"line":118},[52,39344,1751],{"class":58},[52,39346,39347,39349,39351,39353,39355],{"class":54,"line":594},[52,39348,1756],{"class":58},[52,39350,4295],{"class":73},[52,39352,27194],{"class":58},[52,39354,4927],{"class":371},[52,39356,5259],{"class":58},[52,39358,39359,39361,39363],{"class":54,"line":600},[52,39360,4727],{"class":58},[52,39362,2869],{"class":73},[52,39364,2129],{"class":58},[52,39366,39367],{"class":54,"line":606},[52,39368,4744],{"class":58},[52,39370,39371],{"class":54,"line":653},[52,39372,1773],{"class":58},[52,39374,39375],{"class":54,"line":662},[52,39376,1778],{"class":58},[156,39378,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39380},[39381,39382],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glasstiles",{"title":3936,"description":39066},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":39389,"title":39390,"body":39391,"category":27503,"componentType":20848,"description":39398,"extension":168,"meta":39715,"navigation":171,"path":39716,"requiresChild":171,"seo":39717,"stem":39718,"__hash__":39719},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":39392,"toc":39711},[39393,39396,39399,39401,39403,39406,39408,39709],[11,39394,39390],{"id":39395},"glitch",[15,39397,39398],{},"Digital glitch that melts pixels and distorts colors",[26901,39400],{"component":39390},[23,39402,26905],{"id":21503},[26907,39404],{":props":39405},"[{\"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,39407,26913],{"id":26912},[217,39409,39410,39466,39525,39581,39639],{":tabs":1543},[43,39411,39413],{"className":45,"code":39412,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,39414,39415,39423,39430,39438,39442,39450,39458],{"__ignoreMap":48},[52,39416,39417,39419,39421],{"class":54,"line":55},[52,39418,59],{"class":58},[52,39420,63],{"class":62},[52,39422,77],{"class":58},[52,39424,39425,39427],{"class":54,"line":80},[52,39426,83],{"class":58},[52,39428,39429],{"class":62},"Glitch\n",[52,39431,39432,39434,39436],{"class":54,"line":108},[52,39433,17870],{"class":66},[52,39435,70],{"class":58},[52,39437,33394],{"class":73},[52,39439,39440],{"class":54,"line":118},[52,39441,26949],{"class":58},[52,39443,39444,39446,39448],{"class":54,"line":594},[52,39445,2213],{"class":58},[52,39447,2216],{"class":62},[52,39449,105],{"class":58},[52,39451,39452,39454,39456],{"class":54,"line":600},[52,39453,2230],{"class":58},[52,39455,39390],{"class":62},[52,39457,77],{"class":58},[52,39459,39460,39462,39464],{"class":54,"line":606},[52,39461,121],{"class":58},[52,39463,63],{"class":62},[52,39465,77],{"class":58},[43,39467,39469],{"className":360,"code":39468,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,39470,39471,39479,39485,39497,39501,39509,39517],{"__ignoreMap":48},[52,39472,39473,39475,39477],{"class":54,"line":55},[52,39474,59],{"class":58},[52,39476,63],{"class":371},[52,39478,77],{"class":58},[52,39480,39481,39483],{"class":54,"line":80},[52,39482,83],{"class":58},[52,39484,39429],{"class":371},[52,39486,39487,39489,39491,39493,39495],{"class":54,"line":108},[52,39488,17981],{"class":66},[52,39490,70],{"class":231},[52,39492,723],{"class":58},[52,39494,5467],{"class":371},[52,39496,729],{"class":58},[52,39498,39499],{"class":54,"line":118},[52,39500,26949],{"class":58},[52,39502,39503,39505,39507],{"class":54,"line":594},[52,39504,2213],{"class":58},[52,39506,2216],{"class":371},[52,39508,105],{"class":58},[52,39510,39511,39513,39515],{"class":54,"line":600},[52,39512,2230],{"class":58},[52,39514,39390],{"class":371},[52,39516,77],{"class":58},[52,39518,39519,39521,39523],{"class":54,"line":606},[52,39520,121],{"class":58},[52,39522,63],{"class":371},[52,39524,77],{"class":58},[43,39526,39527],{"className":2507,"code":39468,"language":2509,"meta":48,"style":48},[31,39528,39529,39537,39543,39553,39557,39565,39573],{"__ignoreMap":48},[52,39530,39531,39533,39535],{"class":54,"line":55},[52,39532,59],{"class":58},[52,39534,63],{"class":371},[52,39536,77],{"class":58},[52,39538,39539,39541],{"class":54,"line":80},[52,39540,83],{"class":58},[52,39542,39429],{"class":371},[52,39544,39545,39547,39549,39551],{"class":54,"line":108},[52,39546,17981],{"class":66},[52,39548,24845],{"class":58},[52,39550,5467],{"class":371},[52,39552,729],{"class":58},[52,39554,39555],{"class":54,"line":118},[52,39556,26949],{"class":58},[52,39558,39559,39561,39563],{"class":54,"line":594},[52,39560,2213],{"class":58},[52,39562,2216],{"class":371},[52,39564,105],{"class":58},[52,39566,39567,39569,39571],{"class":54,"line":600},[52,39568,2230],{"class":58},[52,39570,39390],{"class":371},[52,39572,77],{"class":58},[52,39574,39575,39577,39579],{"class":54,"line":606},[52,39576,121],{"class":58},[52,39578,63],{"class":371},[52,39580,77],{"class":58},[43,39582,39583],{"className":419,"code":39468,"language":420,"meta":48,"style":48},[31,39584,39585,39593,39599,39611,39615,39623,39631],{"__ignoreMap":48},[52,39586,39587,39589,39591],{"class":54,"line":55},[52,39588,59],{"class":58},[52,39590,63],{"class":371},[52,39592,77],{"class":58},[52,39594,39595,39597],{"class":54,"line":80},[52,39596,83],{"class":58},[52,39598,39429],{"class":371},[52,39600,39601,39603,39605,39607,39609],{"class":54,"line":108},[52,39602,17981],{"class":66},[52,39604,70],{"class":231},[52,39606,723],{"class":58},[52,39608,5467],{"class":371},[52,39610,729],{"class":58},[52,39612,39613],{"class":54,"line":118},[52,39614,26949],{"class":58},[52,39616,39617,39619,39621],{"class":54,"line":594},[52,39618,2213],{"class":58},[52,39620,2216],{"class":371},[52,39622,105],{"class":58},[52,39624,39625,39627,39629],{"class":54,"line":600},[52,39626,2230],{"class":58},[52,39628,39390],{"class":371},[52,39630,77],{"class":58},[52,39632,39633,39635,39637],{"class":54,"line":606},[52,39634,121],{"class":58},[52,39636,63],{"class":371},[52,39638,77],{"class":58},[43,39640,39642],{"className":222,"code":39641,"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,39643,39644,39654,39658,39672,39676,39689,39697,39701,39705],{"__ignoreMap":48},[52,39645,39646,39648,39650,39652],{"class":54,"line":55},[52,39647,232],{"class":231},[52,39649,9231],{"class":58},[52,39651,238],{"class":231},[52,39653,9236],{"class":73},[52,39655,39656],{"class":54,"line":80},[52,39657,597],{"emptyLinePlaceholder":171},[52,39659,39660,39662,39664,39666,39668,39670],{"class":54,"line":108},[52,39661,1721],{"class":231},[52,39663,1724],{"class":371},[52,39665,1727],{"class":231},[52,39667,1730],{"class":231},[52,39669,1733],{"class":66},[52,39671,1736],{"class":58},[52,39673,39674],{"class":54,"line":118},[52,39675,1751],{"class":58},[52,39677,39678,39680,39683,39685,39687],{"class":54,"line":594},[52,39679,1756],{"class":58},[52,39681,39682],{"class":73},"'Glitch'",[52,39684,27194],{"class":58},[52,39686,5467],{"class":371},[52,39688,5259],{"class":58},[52,39690,39691,39693,39695],{"class":54,"line":600},[52,39692,4727],{"class":58},[52,39694,2869],{"class":73},[52,39696,2129],{"class":58},[52,39698,39699],{"class":54,"line":606},[52,39700,4744],{"class":58},[52,39702,39703],{"class":54,"line":653},[52,39704,1773],{"class":58},[52,39706,39707],{"class":54,"line":662},[52,39708,1778],{"class":58},[156,39710,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39712},[39713,39714],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glitch",{"title":39390,"description":39398},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":39721,"title":9509,"body":39722,"category":27503,"componentType":20848,"description":39729,"extension":168,"meta":40046,"navigation":171,"path":40047,"requiresChild":171,"seo":40048,"stem":40049,"__hash__":40050},"components/docs/components/Glow.md",{"type":8,"value":39723,"toc":40042},[39724,39727,39730,39732,39734,39737,39739,40040],[11,39725,9509],{"id":39726},"glow",[15,39728,39729],{},"Soft glow effect with adjustable intensity",[26901,39731],{"component":9509},[23,39733,26905],{"id":21503},[26907,39735],{":props":39736},"[{\"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\":\"25\",\"description\":\"Glow spread in pixels (clean up to ~72px, mild banding above)\"}]",[23,39738,26913],{"id":26912},[217,39740,39741,39797,39856,39912,39970],{":tabs":1543},[43,39742,39744],{"className":45,"code":39743,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,39745,39746,39754,39761,39769,39773,39781,39789],{"__ignoreMap":48},[52,39747,39748,39750,39752],{"class":54,"line":55},[52,39749,59],{"class":58},[52,39751,63],{"class":62},[52,39753,77],{"class":58},[52,39755,39756,39758],{"class":54,"line":80},[52,39757,83],{"class":58},[52,39759,39760],{"class":62},"Glow\n",[52,39762,39763,39765,39767],{"class":54,"line":108},[52,39764,17870],{"class":66},[52,39766,70],{"class":58},[52,39768,29360],{"class":73},[52,39770,39771],{"class":54,"line":118},[52,39772,26949],{"class":58},[52,39774,39775,39777,39779],{"class":54,"line":594},[52,39776,2213],{"class":58},[52,39778,2216],{"class":62},[52,39780,105],{"class":58},[52,39782,39783,39785,39787],{"class":54,"line":600},[52,39784,2230],{"class":58},[52,39786,9509],{"class":62},[52,39788,77],{"class":58},[52,39790,39791,39793,39795],{"class":54,"line":606},[52,39792,121],{"class":58},[52,39794,63],{"class":62},[52,39796,77],{"class":58},[43,39798,39800],{"className":360,"code":39799,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,39801,39802,39810,39816,39828,39832,39840,39848],{"__ignoreMap":48},[52,39803,39804,39806,39808],{"class":54,"line":55},[52,39805,59],{"class":58},[52,39807,63],{"class":371},[52,39809,77],{"class":58},[52,39811,39812,39814],{"class":54,"line":80},[52,39813,83],{"class":58},[52,39815,39760],{"class":371},[52,39817,39818,39820,39822,39824,39826],{"class":54,"line":108},[52,39819,17981],{"class":66},[52,39821,70],{"class":231},[52,39823,723],{"class":58},[52,39825,6391],{"class":371},[52,39827,729],{"class":58},[52,39829,39830],{"class":54,"line":118},[52,39831,26949],{"class":58},[52,39833,39834,39836,39838],{"class":54,"line":594},[52,39835,2213],{"class":58},[52,39837,2216],{"class":371},[52,39839,105],{"class":58},[52,39841,39842,39844,39846],{"class":54,"line":600},[52,39843,2230],{"class":58},[52,39845,9509],{"class":371},[52,39847,77],{"class":58},[52,39849,39850,39852,39854],{"class":54,"line":606},[52,39851,121],{"class":58},[52,39853,63],{"class":371},[52,39855,77],{"class":58},[43,39857,39858],{"className":2507,"code":39799,"language":2509,"meta":48,"style":48},[31,39859,39860,39868,39874,39884,39888,39896,39904],{"__ignoreMap":48},[52,39861,39862,39864,39866],{"class":54,"line":55},[52,39863,59],{"class":58},[52,39865,63],{"class":371},[52,39867,77],{"class":58},[52,39869,39870,39872],{"class":54,"line":80},[52,39871,83],{"class":58},[52,39873,39760],{"class":371},[52,39875,39876,39878,39880,39882],{"class":54,"line":108},[52,39877,17981],{"class":66},[52,39879,24845],{"class":58},[52,39881,6391],{"class":371},[52,39883,729],{"class":58},[52,39885,39886],{"class":54,"line":118},[52,39887,26949],{"class":58},[52,39889,39890,39892,39894],{"class":54,"line":594},[52,39891,2213],{"class":58},[52,39893,2216],{"class":371},[52,39895,105],{"class":58},[52,39897,39898,39900,39902],{"class":54,"line":600},[52,39899,2230],{"class":58},[52,39901,9509],{"class":371},[52,39903,77],{"class":58},[52,39905,39906,39908,39910],{"class":54,"line":606},[52,39907,121],{"class":58},[52,39909,63],{"class":371},[52,39911,77],{"class":58},[43,39913,39914],{"className":419,"code":39799,"language":420,"meta":48,"style":48},[31,39915,39916,39924,39930,39942,39946,39954,39962],{"__ignoreMap":48},[52,39917,39918,39920,39922],{"class":54,"line":55},[52,39919,59],{"class":58},[52,39921,63],{"class":371},[52,39923,77],{"class":58},[52,39925,39926,39928],{"class":54,"line":80},[52,39927,83],{"class":58},[52,39929,39760],{"class":371},[52,39931,39932,39934,39936,39938,39940],{"class":54,"line":108},[52,39933,17981],{"class":66},[52,39935,70],{"class":231},[52,39937,723],{"class":58},[52,39939,6391],{"class":371},[52,39941,729],{"class":58},[52,39943,39944],{"class":54,"line":118},[52,39945,26949],{"class":58},[52,39947,39948,39950,39952],{"class":54,"line":594},[52,39949,2213],{"class":58},[52,39951,2216],{"class":371},[52,39953,105],{"class":58},[52,39955,39956,39958,39960],{"class":54,"line":600},[52,39957,2230],{"class":58},[52,39959,9509],{"class":371},[52,39961,77],{"class":58},[52,39963,39964,39966,39968],{"class":54,"line":606},[52,39965,121],{"class":58},[52,39967,63],{"class":371},[52,39969,77],{"class":58},[43,39971,39973],{"className":222,"code":39972,"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,39974,39975,39985,39989,40003,40007,40020,40028,40032,40036],{"__ignoreMap":48},[52,39976,39977,39979,39981,39983],{"class":54,"line":55},[52,39978,232],{"class":231},[52,39980,9231],{"class":58},[52,39982,238],{"class":231},[52,39984,9236],{"class":73},[52,39986,39987],{"class":54,"line":80},[52,39988,597],{"emptyLinePlaceholder":171},[52,39990,39991,39993,39995,39997,39999,40001],{"class":54,"line":108},[52,39992,1721],{"class":231},[52,39994,1724],{"class":371},[52,39996,1727],{"class":231},[52,39998,1730],{"class":231},[52,40000,1733],{"class":66},[52,40002,1736],{"class":58},[52,40004,40005],{"class":54,"line":118},[52,40006,1751],{"class":58},[52,40008,40009,40011,40014,40016,40018],{"class":54,"line":594},[52,40010,1756],{"class":58},[52,40012,40013],{"class":73},"'Glow'",[52,40015,27194],{"class":58},[52,40017,6391],{"class":371},[52,40019,5259],{"class":58},[52,40021,40022,40024,40026],{"class":54,"line":600},[52,40023,4727],{"class":58},[52,40025,2869],{"class":73},[52,40027,2129],{"class":58},[52,40029,40030],{"class":54,"line":606},[52,40031,4744],{"class":58},[52,40033,40034],{"class":54,"line":653},[52,40035,1773],{"class":58},[52,40037,40038],{"class":54,"line":662},[52,40039,1778],{"class":58},[156,40041,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":40043},[40044,40045],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glow",{"title":9509,"description":39729},"docs/components/Glow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":40052,"title":40053,"body":40054,"category":27760,"componentType":20842,"description":40061,"extension":168,"meta":40302,"navigation":171,"path":40303,"requiresChild":27763,"seo":40304,"stem":40305,"__hash__":40306},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":40055,"toc":40298},[40056,40059,40062,40064,40066,40069,40071,40296],[11,40057,40053],{"id":40058},"godrays",[15,40060,40061],{},"Volumetric light rays emanating from a point",[26901,40063],{"component":40053},[23,40065,26905],{"id":21503},[26907,40067],{":props":40068},"[{\"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,40070,26913],{"id":26912},[217,40072,40073,40113,40156,40196,40238],{":tabs":1543},[43,40074,40076],{"className":45,"code":40075,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,40077,40078,40086,40093,40101,40105],{"__ignoreMap":48},[52,40079,40080,40082,40084],{"class":54,"line":55},[52,40081,59],{"class":58},[52,40083,63],{"class":62},[52,40085,77],{"class":58},[52,40087,40088,40090],{"class":54,"line":80},[52,40089,83],{"class":58},[52,40091,40092],{"class":62},"Godrays\n",[52,40094,40095,40097,40099],{"class":54,"line":108},[52,40096,17870],{"class":66},[52,40098,70],{"class":58},[52,40100,7366],{"class":73},[52,40102,40103],{"class":54,"line":118},[52,40104,1224],{"class":58},[52,40106,40107,40109,40111],{"class":54,"line":594},[52,40108,121],{"class":58},[52,40110,63],{"class":62},[52,40112,77],{"class":58},[43,40114,40116],{"className":360,"code":40115,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,40117,40118,40126,40132,40144,40148],{"__ignoreMap":48},[52,40119,40120,40122,40124],{"class":54,"line":55},[52,40121,59],{"class":58},[52,40123,63],{"class":371},[52,40125,77],{"class":58},[52,40127,40128,40130],{"class":54,"line":80},[52,40129,83],{"class":58},[52,40131,40092],{"class":371},[52,40133,40134,40136,40138,40140,40142],{"class":54,"line":108},[52,40135,17981],{"class":66},[52,40137,70],{"class":231},[52,40139,723],{"class":58},[52,40141,4011],{"class":371},[52,40143,729],{"class":58},[52,40145,40146],{"class":54,"line":118},[52,40147,1224],{"class":58},[52,40149,40150,40152,40154],{"class":54,"line":594},[52,40151,121],{"class":58},[52,40153,63],{"class":371},[52,40155,77],{"class":58},[43,40157,40158],{"className":2507,"code":40115,"language":2509,"meta":48,"style":48},[31,40159,40160,40168,40174,40184,40188],{"__ignoreMap":48},[52,40161,40162,40164,40166],{"class":54,"line":55},[52,40163,59],{"class":58},[52,40165,63],{"class":371},[52,40167,77],{"class":58},[52,40169,40170,40172],{"class":54,"line":80},[52,40171,83],{"class":58},[52,40173,40092],{"class":371},[52,40175,40176,40178,40180,40182],{"class":54,"line":108},[52,40177,17981],{"class":66},[52,40179,24845],{"class":58},[52,40181,4011],{"class":371},[52,40183,729],{"class":58},[52,40185,40186],{"class":54,"line":118},[52,40187,1224],{"class":58},[52,40189,40190,40192,40194],{"class":54,"line":594},[52,40191,121],{"class":58},[52,40193,63],{"class":371},[52,40195,77],{"class":58},[43,40197,40198],{"className":419,"code":40115,"language":420,"meta":48,"style":48},[31,40199,40200,40208,40214,40226,40230],{"__ignoreMap":48},[52,40201,40202,40204,40206],{"class":54,"line":55},[52,40203,59],{"class":58},[52,40205,63],{"class":371},[52,40207,77],{"class":58},[52,40209,40210,40212],{"class":54,"line":80},[52,40211,83],{"class":58},[52,40213,40092],{"class":371},[52,40215,40216,40218,40220,40222,40224],{"class":54,"line":108},[52,40217,17981],{"class":66},[52,40219,70],{"class":231},[52,40221,723],{"class":58},[52,40223,4011],{"class":371},[52,40225,729],{"class":58},[52,40227,40228],{"class":54,"line":118},[52,40229,1224],{"class":58},[52,40231,40232,40234,40236],{"class":54,"line":594},[52,40233,121],{"class":58},[52,40235,63],{"class":371},[52,40237,77],{"class":58},[43,40239,40241],{"className":222,"code":40240,"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,40242,40243,40253,40257,40271,40275,40288,40292],{"__ignoreMap":48},[52,40244,40245,40247,40249,40251],{"class":54,"line":55},[52,40246,232],{"class":231},[52,40248,9231],{"class":58},[52,40250,238],{"class":231},[52,40252,9236],{"class":73},[52,40254,40255],{"class":54,"line":80},[52,40256,597],{"emptyLinePlaceholder":171},[52,40258,40259,40261,40263,40265,40267,40269],{"class":54,"line":108},[52,40260,1721],{"class":231},[52,40262,1724],{"class":371},[52,40264,1727],{"class":231},[52,40266,1730],{"class":231},[52,40268,1733],{"class":66},[52,40270,1736],{"class":58},[52,40272,40273],{"class":54,"line":118},[52,40274,1751],{"class":58},[52,40276,40277,40279,40282,40284,40286],{"class":54,"line":594},[52,40278,1756],{"class":58},[52,40280,40281],{"class":73},"'Godrays'",[52,40283,27194],{"class":58},[52,40285,4011],{"class":371},[52,40287,1768],{"class":58},[52,40289,40290],{"class":54,"line":600},[52,40291,1773],{"class":58},[52,40293,40294],{"class":54,"line":606},[52,40295,1778],{"class":58},[156,40297,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":40299},[40300,40301],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/godrays",{"title":40053,"description":40061},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":40308,"title":40309,"body":40310,"category":29304,"componentType":20848,"description":40317,"extension":168,"meta":40572,"navigation":171,"path":40573,"requiresChild":171,"seo":40574,"stem":40575,"__hash__":40576},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":40311,"toc":40569},[40312,40315,40318,40320,40322,40567],[11,40313,40309],{"id":40314},"grayscale",[15,40316,40317],{},"Convert colors to black and white",[26901,40319],{"component":40309},[23,40321,26913],{"id":26912},[217,40323,40324,40369,40413,40457,40501],{":tabs":1543},[43,40325,40327],{"className":45,"code":40326,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,40328,40329,40337,40345,40353,40361],{"__ignoreMap":48},[52,40330,40331,40333,40335],{"class":54,"line":55},[52,40332,59],{"class":58},[52,40334,63],{"class":62},[52,40336,77],{"class":58},[52,40338,40339,40341,40343],{"class":54,"line":80},[52,40340,83],{"class":58},[52,40342,40309],{"class":62},[52,40344,77],{"class":58},[52,40346,40347,40349,40351],{"class":54,"line":108},[52,40348,2213],{"class":58},[52,40350,2216],{"class":62},[52,40352,105],{"class":58},[52,40354,40355,40357,40359],{"class":54,"line":118},[52,40356,2230],{"class":58},[52,40358,40309],{"class":62},[52,40360,77],{"class":58},[52,40362,40363,40365,40367],{"class":54,"line":594},[52,40364,121],{"class":58},[52,40366,63],{"class":62},[52,40368,77],{"class":58},[43,40370,40371],{"className":360,"code":40326,"language":362,"meta":48,"style":48},[31,40372,40373,40381,40389,40397,40405],{"__ignoreMap":48},[52,40374,40375,40377,40379],{"class":54,"line":55},[52,40376,59],{"class":58},[52,40378,63],{"class":371},[52,40380,77],{"class":58},[52,40382,40383,40385,40387],{"class":54,"line":80},[52,40384,83],{"class":58},[52,40386,40309],{"class":371},[52,40388,77],{"class":58},[52,40390,40391,40393,40395],{"class":54,"line":108},[52,40392,2213],{"class":58},[52,40394,2216],{"class":371},[52,40396,105],{"class":58},[52,40398,40399,40401,40403],{"class":54,"line":118},[52,40400,2230],{"class":58},[52,40402,40309],{"class":371},[52,40404,77],{"class":58},[52,40406,40407,40409,40411],{"class":54,"line":594},[52,40408,121],{"class":58},[52,40410,63],{"class":371},[52,40412,77],{"class":58},[43,40414,40415],{"className":2507,"code":40326,"language":2509,"meta":48,"style":48},[31,40416,40417,40425,40433,40441,40449],{"__ignoreMap":48},[52,40418,40419,40421,40423],{"class":54,"line":55},[52,40420,59],{"class":58},[52,40422,63],{"class":371},[52,40424,77],{"class":58},[52,40426,40427,40429,40431],{"class":54,"line":80},[52,40428,83],{"class":58},[52,40430,40309],{"class":371},[52,40432,77],{"class":58},[52,40434,40435,40437,40439],{"class":54,"line":108},[52,40436,2213],{"class":58},[52,40438,2216],{"class":371},[52,40440,105],{"class":58},[52,40442,40443,40445,40447],{"class":54,"line":118},[52,40444,2230],{"class":58},[52,40446,40309],{"class":371},[52,40448,77],{"class":58},[52,40450,40451,40453,40455],{"class":54,"line":594},[52,40452,121],{"class":58},[52,40454,63],{"class":371},[52,40456,77],{"class":58},[43,40458,40459],{"className":419,"code":40326,"language":420,"meta":48,"style":48},[31,40460,40461,40469,40477,40485,40493],{"__ignoreMap":48},[52,40462,40463,40465,40467],{"class":54,"line":55},[52,40464,59],{"class":58},[52,40466,63],{"class":371},[52,40468,77],{"class":58},[52,40470,40471,40473,40475],{"class":54,"line":80},[52,40472,83],{"class":58},[52,40474,40309],{"class":371},[52,40476,77],{"class":58},[52,40478,40479,40481,40483],{"class":54,"line":108},[52,40480,2213],{"class":58},[52,40482,2216],{"class":371},[52,40484,105],{"class":58},[52,40486,40487,40489,40491],{"class":54,"line":118},[52,40488,2230],{"class":58},[52,40490,40309],{"class":371},[52,40492,77],{"class":58},[52,40494,40495,40497,40499],{"class":54,"line":594},[52,40496,121],{"class":58},[52,40498,63],{"class":371},[52,40500,77],{"class":58},[43,40502,40504],{"className":222,"code":40503,"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,40505,40506,40516,40520,40534,40538,40547,40555,40559,40563],{"__ignoreMap":48},[52,40507,40508,40510,40512,40514],{"class":54,"line":55},[52,40509,232],{"class":231},[52,40511,9231],{"class":58},[52,40513,238],{"class":231},[52,40515,9236],{"class":73},[52,40517,40518],{"class":54,"line":80},[52,40519,597],{"emptyLinePlaceholder":171},[52,40521,40522,40524,40526,40528,40530,40532],{"class":54,"line":108},[52,40523,1721],{"class":231},[52,40525,1724],{"class":371},[52,40527,1727],{"class":231},[52,40529,1730],{"class":231},[52,40531,1733],{"class":66},[52,40533,1736],{"class":58},[52,40535,40536],{"class":54,"line":118},[52,40537,1751],{"class":58},[52,40539,40540,40542,40545],{"class":54,"line":594},[52,40541,1756],{"class":58},[52,40543,40544],{"class":73},"'Grayscale'",[52,40546,4722],{"class":58},[52,40548,40549,40551,40553],{"class":54,"line":600},[52,40550,4727],{"class":58},[52,40552,2869],{"class":73},[52,40554,2129],{"class":58},[52,40556,40557],{"class":54,"line":606},[52,40558,4744],{"class":58},[52,40560,40561],{"class":54,"line":653},[52,40562,1773],{"class":58},[52,40564,40565],{"class":54,"line":662},[52,40566,1778],{"class":58},[156,40568,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40570},[40571],{"id":26912,"depth":80,"text":26913},{},"/docs/components/grayscale",{"title":40309,"description":40317},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":40578,"title":40579,"body":40580,"category":27760,"componentType":20842,"description":40587,"extension":168,"meta":40817,"navigation":171,"path":40818,"requiresChild":27763,"seo":40819,"stem":40820,"__hash__":40821},"components/docs/components/Grid.md","Grid",{"type":8,"value":40581,"toc":40813},[40582,40585,40588,40590,40592,40595,40597,40811],[11,40583,40579],{"id":40584},"grid",[15,40586,40587],{},"Simple grid lines pattern with adjustable thickness and rotation",[26901,40589],{"component":40579},[23,40591,26905],{"id":21503},[26907,40593],{":props":40594},"[{\"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,40596,26913],{"id":26912},[217,40598,40599,40639,40677,40715,40753],{":tabs":1543},[43,40600,40602],{"className":45,"code":40601,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,40603,40604,40612,40619,40627,40631],{"__ignoreMap":48},[52,40605,40606,40608,40610],{"class":54,"line":55},[52,40607,59],{"class":58},[52,40609,63],{"class":62},[52,40611,77],{"class":58},[52,40613,40614,40616],{"class":54,"line":80},[52,40615,83],{"class":58},[52,40617,40618],{"class":62},"Grid\n",[52,40620,40621,40623,40625],{"class":54,"line":108},[52,40622,7351],{"class":66},[52,40624,70],{"class":58},[52,40626,7307],{"class":73},[52,40628,40629],{"class":54,"line":118},[52,40630,1224],{"class":58},[52,40632,40633,40635,40637],{"class":54,"line":594},[52,40634,121],{"class":58},[52,40636,63],{"class":62},[52,40638,77],{"class":58},[43,40640,40641],{"className":360,"code":40601,"language":362,"meta":48,"style":48},[31,40642,40643,40651,40657,40665,40669],{"__ignoreMap":48},[52,40644,40645,40647,40649],{"class":54,"line":55},[52,40646,59],{"class":58},[52,40648,63],{"class":371},[52,40650,77],{"class":58},[52,40652,40653,40655],{"class":54,"line":80},[52,40654,83],{"class":58},[52,40656,40618],{"class":371},[52,40658,40659,40661,40663],{"class":54,"line":108},[52,40660,7351],{"class":66},[52,40662,70],{"class":231},[52,40664,7307],{"class":73},[52,40666,40667],{"class":54,"line":118},[52,40668,1224],{"class":58},[52,40670,40671,40673,40675],{"class":54,"line":594},[52,40672,121],{"class":58},[52,40674,63],{"class":371},[52,40676,77],{"class":58},[43,40678,40679],{"className":2507,"code":40601,"language":2509,"meta":48,"style":48},[31,40680,40681,40689,40695,40703,40707],{"__ignoreMap":48},[52,40682,40683,40685,40687],{"class":54,"line":55},[52,40684,59],{"class":58},[52,40686,63],{"class":371},[52,40688,77],{"class":58},[52,40690,40691,40693],{"class":54,"line":80},[52,40692,83],{"class":58},[52,40694,40618],{"class":371},[52,40696,40697,40699,40701],{"class":54,"line":108},[52,40698,7351],{"class":66},[52,40700,70],{"class":58},[52,40702,7307],{"class":73},[52,40704,40705],{"class":54,"line":118},[52,40706,1224],{"class":58},[52,40708,40709,40711,40713],{"class":54,"line":594},[52,40710,121],{"class":58},[52,40712,63],{"class":371},[52,40714,77],{"class":58},[43,40716,40717],{"className":419,"code":40601,"language":420,"meta":48,"style":48},[31,40718,40719,40727,40733,40741,40745],{"__ignoreMap":48},[52,40720,40721,40723,40725],{"class":54,"line":55},[52,40722,59],{"class":58},[52,40724,63],{"class":371},[52,40726,77],{"class":58},[52,40728,40729,40731],{"class":54,"line":80},[52,40730,83],{"class":58},[52,40732,40618],{"class":371},[52,40734,40735,40737,40739],{"class":54,"line":108},[52,40736,7351],{"class":66},[52,40738,70],{"class":231},[52,40740,7307],{"class":73},[52,40742,40743],{"class":54,"line":118},[52,40744,1224],{"class":58},[52,40746,40747,40749,40751],{"class":54,"line":594},[52,40748,121],{"class":58},[52,40750,63],{"class":371},[52,40752,77],{"class":58},[43,40754,40756],{"className":222,"code":40755,"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,40757,40758,40768,40772,40786,40790,40803,40807],{"__ignoreMap":48},[52,40759,40760,40762,40764,40766],{"class":54,"line":55},[52,40761,232],{"class":231},[52,40763,9231],{"class":58},[52,40765,238],{"class":231},[52,40767,9236],{"class":73},[52,40769,40770],{"class":54,"line":80},[52,40771,597],{"emptyLinePlaceholder":171},[52,40773,40774,40776,40778,40780,40782,40784],{"class":54,"line":108},[52,40775,1721],{"class":231},[52,40777,1724],{"class":371},[52,40779,1727],{"class":231},[52,40781,1730],{"class":231},[52,40783,1733],{"class":66},[52,40785,1736],{"class":58},[52,40787,40788],{"class":54,"line":118},[52,40789,1751],{"class":58},[52,40791,40792,40794,40797,40799,40801],{"class":54,"line":594},[52,40793,1756],{"class":58},[52,40795,40796],{"class":73},"'Grid'",[52,40798,1762],{"class":58},[52,40800,7886],{"class":73},[52,40802,1768],{"class":58},[52,40804,40805],{"class":54,"line":600},[52,40806,1773],{"class":58},[52,40808,40809],{"class":54,"line":606},[52,40810,1778],{"class":58},[156,40812,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":40814},[40815,40816],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/grid",{"title":40579,"description":40587},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":40823,"title":4808,"body":40824,"category":30893,"componentType":20848,"description":40831,"extension":168,"meta":41193,"navigation":171,"path":41194,"requiresChild":171,"seo":41195,"stem":41196,"__hash__":41197},"components/docs/components/GridDistortion.md",{"type":8,"value":40825,"toc":41189},[40826,40829,40832,40834,40836,40839,40841,41187],[11,40827,4808],{"id":40828},"griddistortion",[15,40830,40831],{},"Interactive grid distortion controlled by mouse position",[26901,40833],{"component":4808},[23,40835,26905],{"id":21503},[26907,40837],{":props":40838},"[{\"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,40840,26913],{"id":26912},[217,40842,40843,40907,40978,41044,41114],{":tabs":1543},[43,40844,40846],{"className":45,"code":40845,"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,40847,40848,40856,40863,40871,40879,40883,40891,40899],{"__ignoreMap":48},[52,40849,40850,40852,40854],{"class":54,"line":55},[52,40851,59],{"class":58},[52,40853,63],{"class":62},[52,40855,77],{"class":58},[52,40857,40858,40860],{"class":54,"line":80},[52,40859,83],{"class":58},[52,40861,40862],{"class":62},"GridDistortion\n",[52,40864,40865,40867,40869],{"class":54,"line":108},[52,40866,17870],{"class":66},[52,40868,70],{"class":58},[52,40870,29360],{"class":73},[52,40872,40873,40875,40877],{"class":54,"line":118},[52,40874,14901],{"class":66},[52,40876,70],{"class":58},[52,40878,29360],{"class":73},[52,40880,40881],{"class":54,"line":594},[52,40882,26949],{"class":58},[52,40884,40885,40887,40889],{"class":54,"line":600},[52,40886,2213],{"class":58},[52,40888,2216],{"class":62},[52,40890,105],{"class":58},[52,40892,40893,40895,40897],{"class":54,"line":606},[52,40894,2230],{"class":58},[52,40896,4808],{"class":62},[52,40898,77],{"class":58},[52,40900,40901,40903,40905],{"class":54,"line":653},[52,40902,121],{"class":58},[52,40904,63],{"class":62},[52,40906,77],{"class":58},[43,40908,40910],{"className":360,"code":40909,"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,40911,40912,40920,40926,40938,40950,40954,40962,40970],{"__ignoreMap":48},[52,40913,40914,40916,40918],{"class":54,"line":55},[52,40915,59],{"class":58},[52,40917,63],{"class":371},[52,40919,77],{"class":58},[52,40921,40922,40924],{"class":54,"line":80},[52,40923,83],{"class":58},[52,40925,40862],{"class":371},[52,40927,40928,40930,40932,40934,40936],{"class":54,"line":108},[52,40929,17981],{"class":66},[52,40931,70],{"class":231},[52,40933,723],{"class":58},[52,40935,6391],{"class":371},[52,40937,729],{"class":58},[52,40939,40940,40942,40944,40946,40948],{"class":54,"line":118},[52,40941,7361],{"class":66},[52,40943,70],{"class":231},[52,40945,723],{"class":58},[52,40947,6391],{"class":371},[52,40949,729],{"class":58},[52,40951,40952],{"class":54,"line":594},[52,40953,26949],{"class":58},[52,40955,40956,40958,40960],{"class":54,"line":600},[52,40957,2213],{"class":58},[52,40959,2216],{"class":371},[52,40961,105],{"class":58},[52,40963,40964,40966,40968],{"class":54,"line":606},[52,40965,2230],{"class":58},[52,40967,4808],{"class":371},[52,40969,77],{"class":58},[52,40971,40972,40974,40976],{"class":54,"line":653},[52,40973,121],{"class":58},[52,40975,63],{"class":371},[52,40977,77],{"class":58},[43,40979,40980],{"className":2507,"code":40909,"language":2509,"meta":48,"style":48},[31,40981,40982,40990,40996,41006,41016,41020,41028,41036],{"__ignoreMap":48},[52,40983,40984,40986,40988],{"class":54,"line":55},[52,40985,59],{"class":58},[52,40987,63],{"class":371},[52,40989,77],{"class":58},[52,40991,40992,40994],{"class":54,"line":80},[52,40993,83],{"class":58},[52,40995,40862],{"class":371},[52,40997,40998,41000,41002,41004],{"class":54,"line":108},[52,40999,17981],{"class":66},[52,41001,24845],{"class":58},[52,41003,6391],{"class":371},[52,41005,729],{"class":58},[52,41007,41008,41010,41012,41014],{"class":54,"line":118},[52,41009,7361],{"class":66},[52,41011,24845],{"class":58},[52,41013,6391],{"class":371},[52,41015,729],{"class":58},[52,41017,41018],{"class":54,"line":594},[52,41019,26949],{"class":58},[52,41021,41022,41024,41026],{"class":54,"line":600},[52,41023,2213],{"class":58},[52,41025,2216],{"class":371},[52,41027,105],{"class":58},[52,41029,41030,41032,41034],{"class":54,"line":606},[52,41031,2230],{"class":58},[52,41033,4808],{"class":371},[52,41035,77],{"class":58},[52,41037,41038,41040,41042],{"class":54,"line":653},[52,41039,121],{"class":58},[52,41041,63],{"class":371},[52,41043,77],{"class":58},[43,41045,41046],{"className":419,"code":40909,"language":420,"meta":48,"style":48},[31,41047,41048,41056,41062,41074,41086,41090,41098,41106],{"__ignoreMap":48},[52,41049,41050,41052,41054],{"class":54,"line":55},[52,41051,59],{"class":58},[52,41053,63],{"class":371},[52,41055,77],{"class":58},[52,41057,41058,41060],{"class":54,"line":80},[52,41059,83],{"class":58},[52,41061,40862],{"class":371},[52,41063,41064,41066,41068,41070,41072],{"class":54,"line":108},[52,41065,17981],{"class":66},[52,41067,70],{"class":231},[52,41069,723],{"class":58},[52,41071,6391],{"class":371},[52,41073,729],{"class":58},[52,41075,41076,41078,41080,41082,41084],{"class":54,"line":118},[52,41077,7361],{"class":66},[52,41079,70],{"class":231},[52,41081,723],{"class":58},[52,41083,6391],{"class":371},[52,41085,729],{"class":58},[52,41087,41088],{"class":54,"line":594},[52,41089,26949],{"class":58},[52,41091,41092,41094,41096],{"class":54,"line":600},[52,41093,2213],{"class":58},[52,41095,2216],{"class":371},[52,41097,105],{"class":58},[52,41099,41100,41102,41104],{"class":54,"line":606},[52,41101,2230],{"class":58},[52,41103,4808],{"class":371},[52,41105,77],{"class":58},[52,41107,41108,41110,41112],{"class":54,"line":653},[52,41109,121],{"class":58},[52,41111,63],{"class":371},[52,41113,77],{"class":58},[43,41115,41117],{"className":222,"code":41116,"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,41118,41119,41129,41133,41147,41151,41167,41175,41179,41183],{"__ignoreMap":48},[52,41120,41121,41123,41125,41127],{"class":54,"line":55},[52,41122,232],{"class":231},[52,41124,9231],{"class":58},[52,41126,238],{"class":231},[52,41128,9236],{"class":73},[52,41130,41131],{"class":54,"line":80},[52,41132,597],{"emptyLinePlaceholder":171},[52,41134,41135,41137,41139,41141,41143,41145],{"class":54,"line":108},[52,41136,1721],{"class":231},[52,41138,1724],{"class":371},[52,41140,1727],{"class":231},[52,41142,1730],{"class":231},[52,41144,1733],{"class":66},[52,41146,1736],{"class":58},[52,41148,41149],{"class":54,"line":118},[52,41150,1751],{"class":58},[52,41152,41153,41155,41157,41159,41161,41163,41165],{"class":54,"line":594},[52,41154,1756],{"class":58},[52,41156,5251],{"class":73},[52,41158,27194],{"class":58},[52,41160,6391],{"class":371},[52,41162,4278],{"class":58},[52,41164,6391],{"class":371},[52,41166,5259],{"class":58},[52,41168,41169,41171,41173],{"class":54,"line":600},[52,41170,4727],{"class":58},[52,41172,2869],{"class":73},[52,41174,2129],{"class":58},[52,41176,41177],{"class":54,"line":606},[52,41178,4744],{"class":58},[52,41180,41181],{"class":54,"line":653},[52,41182,1773],{"class":58},[52,41184,41185],{"class":54,"line":662},[52,41186,1778],{"class":58},[156,41188,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41190},[41191,41192],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/griddistortion",{"title":4808,"description":40831},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":41199,"title":41200,"body":41201,"category":41463,"componentType":20848,"description":41208,"extension":168,"meta":41464,"navigation":171,"path":41465,"requiresChild":171,"seo":41466,"stem":41467,"__hash__":41468},"components/docs/components/Group.md","Group",{"type":8,"value":41202,"toc":41460},[41203,41206,41209,41211,41213,41458],[11,41204,41200],{"id":41205},"group",[15,41207,41208],{},"Container for organizing and composing child effects",[26901,41210],{"component":41200},[23,41212,26913],{"id":26912},[217,41214,41215,41260,41304,41348,41392],{":tabs":1543},[43,41216,41218],{"className":45,"code":41217,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,41219,41220,41228,41236,41244,41252],{"__ignoreMap":48},[52,41221,41222,41224,41226],{"class":54,"line":55},[52,41223,59],{"class":58},[52,41225,63],{"class":62},[52,41227,77],{"class":58},[52,41229,41230,41232,41234],{"class":54,"line":80},[52,41231,83],{"class":58},[52,41233,41200],{"class":62},[52,41235,77],{"class":58},[52,41237,41238,41240,41242],{"class":54,"line":108},[52,41239,2213],{"class":58},[52,41241,2216],{"class":62},[52,41243,105],{"class":58},[52,41245,41246,41248,41250],{"class":54,"line":118},[52,41247,2230],{"class":58},[52,41249,41200],{"class":62},[52,41251,77],{"class":58},[52,41253,41254,41256,41258],{"class":54,"line":594},[52,41255,121],{"class":58},[52,41257,63],{"class":62},[52,41259,77],{"class":58},[43,41261,41262],{"className":360,"code":41217,"language":362,"meta":48,"style":48},[31,41263,41264,41272,41280,41288,41296],{"__ignoreMap":48},[52,41265,41266,41268,41270],{"class":54,"line":55},[52,41267,59],{"class":58},[52,41269,63],{"class":371},[52,41271,77],{"class":58},[52,41273,41274,41276,41278],{"class":54,"line":80},[52,41275,83],{"class":58},[52,41277,41200],{"class":371},[52,41279,77],{"class":58},[52,41281,41282,41284,41286],{"class":54,"line":108},[52,41283,2213],{"class":58},[52,41285,2216],{"class":371},[52,41287,105],{"class":58},[52,41289,41290,41292,41294],{"class":54,"line":118},[52,41291,2230],{"class":58},[52,41293,41200],{"class":371},[52,41295,77],{"class":58},[52,41297,41298,41300,41302],{"class":54,"line":594},[52,41299,121],{"class":58},[52,41301,63],{"class":371},[52,41303,77],{"class":58},[43,41305,41306],{"className":2507,"code":41217,"language":2509,"meta":48,"style":48},[31,41307,41308,41316,41324,41332,41340],{"__ignoreMap":48},[52,41309,41310,41312,41314],{"class":54,"line":55},[52,41311,59],{"class":58},[52,41313,63],{"class":371},[52,41315,77],{"class":58},[52,41317,41318,41320,41322],{"class":54,"line":80},[52,41319,83],{"class":58},[52,41321,41200],{"class":371},[52,41323,77],{"class":58},[52,41325,41326,41328,41330],{"class":54,"line":108},[52,41327,2213],{"class":58},[52,41329,2216],{"class":371},[52,41331,105],{"class":58},[52,41333,41334,41336,41338],{"class":54,"line":118},[52,41335,2230],{"class":58},[52,41337,41200],{"class":371},[52,41339,77],{"class":58},[52,41341,41342,41344,41346],{"class":54,"line":594},[52,41343,121],{"class":58},[52,41345,63],{"class":371},[52,41347,77],{"class":58},[43,41349,41350],{"className":419,"code":41217,"language":420,"meta":48,"style":48},[31,41351,41352,41360,41368,41376,41384],{"__ignoreMap":48},[52,41353,41354,41356,41358],{"class":54,"line":55},[52,41355,59],{"class":58},[52,41357,63],{"class":371},[52,41359,77],{"class":58},[52,41361,41362,41364,41366],{"class":54,"line":80},[52,41363,83],{"class":58},[52,41365,41200],{"class":371},[52,41367,77],{"class":58},[52,41369,41370,41372,41374],{"class":54,"line":108},[52,41371,2213],{"class":58},[52,41373,2216],{"class":371},[52,41375,105],{"class":58},[52,41377,41378,41380,41382],{"class":54,"line":118},[52,41379,2230],{"class":58},[52,41381,41200],{"class":371},[52,41383,77],{"class":58},[52,41385,41386,41388,41390],{"class":54,"line":594},[52,41387,121],{"class":58},[52,41389,63],{"class":371},[52,41391,77],{"class":58},[43,41393,41395],{"className":222,"code":41394,"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,41396,41397,41407,41411,41425,41429,41438,41446,41450,41454],{"__ignoreMap":48},[52,41398,41399,41401,41403,41405],{"class":54,"line":55},[52,41400,232],{"class":231},[52,41402,9231],{"class":58},[52,41404,238],{"class":231},[52,41406,9236],{"class":73},[52,41408,41409],{"class":54,"line":80},[52,41410,597],{"emptyLinePlaceholder":171},[52,41412,41413,41415,41417,41419,41421,41423],{"class":54,"line":108},[52,41414,1721],{"class":231},[52,41416,1724],{"class":371},[52,41418,1727],{"class":231},[52,41420,1730],{"class":231},[52,41422,1733],{"class":66},[52,41424,1736],{"class":58},[52,41426,41427],{"class":54,"line":118},[52,41428,1751],{"class":58},[52,41430,41431,41433,41436],{"class":54,"line":594},[52,41432,1756],{"class":58},[52,41434,41435],{"class":73},"'Group'",[52,41437,4722],{"class":58},[52,41439,41440,41442,41444],{"class":54,"line":600},[52,41441,4727],{"class":58},[52,41443,2869],{"class":73},[52,41445,2129],{"class":58},[52,41447,41448],{"class":54,"line":606},[52,41449,4744],{"class":58},[52,41451,41452],{"class":54,"line":653},[52,41453,1773],{"class":58},[52,41455,41456],{"class":54,"line":662},[52,41457,1778],{"class":58},[156,41459,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41461},[41462],{"id":26912,"depth":80,"text":26913},"Utilities",{},"/docs/components/group",{"title":41200,"description":41208},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":41470,"title":41471,"body":41472,"category":27503,"componentType":20848,"description":41479,"extension":168,"meta":41740,"navigation":171,"path":41741,"requiresChild":171,"seo":41742,"stem":41743,"__hash__":41744},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":41473,"toc":41736},[41474,41477,41480,41482,41484,41487,41489,41734],[11,41475,41471],{"id":41476},"halftone",[15,41478,41479],{},"Halftone dot pattern effect for printing aesthetics",[26901,41481],{"component":41471},[23,41483,26905],{"id":21503},[26907,41485],{":props":41486},"[{\"name\":\"style\",\"type\":\"\\\"classic\\\" | \\\"cmyk\\\"\",\"default\":\"classic\",\"description\":\"Halftone rendering style\"},{\"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\":\"cyanAngle\",\"type\":\"number\",\"default\":\"15\",\"description\":\"Screen angle for the cyan plate (in degrees)\"},{\"name\":\"magentaAngle\",\"type\":\"number\",\"default\":\"75\",\"description\":\"Screen angle for the magenta plate (in degrees)\"},{\"name\":\"yellowAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Screen angle for the yellow plate (in degrees)\"},{\"name\":\"blackAngle\",\"type\":\"number\",\"default\":\"45\",\"description\":\"Screen angle for the black plate (in degrees)\"},{\"name\":\"misprint\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Simulated mis-registration between plates. Plates are offset around the misprint angle, producing colour fringing at the edges of inked regions.\"},{\"name\":\"misprintAngle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction the plates drift apart. Rotating this rotates the colour-fringing pattern.\"},{\"name\":\"paperColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Paper/substrate color shown where no ink lands\"},{\"name\":\"cyanColor\",\"type\":\"string\",\"default\":\"#00ffff\",\"description\":\"Cyan ink color\"},{\"name\":\"magentaColor\",\"type\":\"string\",\"default\":\"#ff00ff\",\"description\":\"Magenta ink color\"},{\"name\":\"yellowColor\",\"type\":\"string\",\"default\":\"#ffff00\",\"description\":\"Yellow ink color\"},{\"name\":\"blackColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Black (key) ink color\"}]",[23,41488,26913],{"id":26912},[217,41490,41491,41536,41580,41624,41668],{":tabs":1543},[43,41492,41494],{"className":45,"code":41493,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[31,41495,41496,41504,41512,41520,41528],{"__ignoreMap":48},[52,41497,41498,41500,41502],{"class":54,"line":55},[52,41499,59],{"class":58},[52,41501,63],{"class":62},[52,41503,77],{"class":58},[52,41505,41506,41508,41510],{"class":54,"line":80},[52,41507,83],{"class":58},[52,41509,41471],{"class":62},[52,41511,77],{"class":58},[52,41513,41514,41516,41518],{"class":54,"line":108},[52,41515,2213],{"class":58},[52,41517,2216],{"class":62},[52,41519,105],{"class":58},[52,41521,41522,41524,41526],{"class":54,"line":118},[52,41523,2230],{"class":58},[52,41525,41471],{"class":62},[52,41527,77],{"class":58},[52,41529,41530,41532,41534],{"class":54,"line":594},[52,41531,121],{"class":58},[52,41533,63],{"class":62},[52,41535,77],{"class":58},[43,41537,41538],{"className":360,"code":41493,"language":362,"meta":48,"style":48},[31,41539,41540,41548,41556,41564,41572],{"__ignoreMap":48},[52,41541,41542,41544,41546],{"class":54,"line":55},[52,41543,59],{"class":58},[52,41545,63],{"class":371},[52,41547,77],{"class":58},[52,41549,41550,41552,41554],{"class":54,"line":80},[52,41551,83],{"class":58},[52,41553,41471],{"class":371},[52,41555,77],{"class":58},[52,41557,41558,41560,41562],{"class":54,"line":108},[52,41559,2213],{"class":58},[52,41561,2216],{"class":371},[52,41563,105],{"class":58},[52,41565,41566,41568,41570],{"class":54,"line":118},[52,41567,2230],{"class":58},[52,41569,41471],{"class":371},[52,41571,77],{"class":58},[52,41573,41574,41576,41578],{"class":54,"line":594},[52,41575,121],{"class":58},[52,41577,63],{"class":371},[52,41579,77],{"class":58},[43,41581,41582],{"className":2507,"code":41493,"language":2509,"meta":48,"style":48},[31,41583,41584,41592,41600,41608,41616],{"__ignoreMap":48},[52,41585,41586,41588,41590],{"class":54,"line":55},[52,41587,59],{"class":58},[52,41589,63],{"class":371},[52,41591,77],{"class":58},[52,41593,41594,41596,41598],{"class":54,"line":80},[52,41595,83],{"class":58},[52,41597,41471],{"class":371},[52,41599,77],{"class":58},[52,41601,41602,41604,41606],{"class":54,"line":108},[52,41603,2213],{"class":58},[52,41605,2216],{"class":371},[52,41607,105],{"class":58},[52,41609,41610,41612,41614],{"class":54,"line":118},[52,41611,2230],{"class":58},[52,41613,41471],{"class":371},[52,41615,77],{"class":58},[52,41617,41618,41620,41622],{"class":54,"line":594},[52,41619,121],{"class":58},[52,41621,63],{"class":371},[52,41623,77],{"class":58},[43,41625,41626],{"className":419,"code":41493,"language":420,"meta":48,"style":48},[31,41627,41628,41636,41644,41652,41660],{"__ignoreMap":48},[52,41629,41630,41632,41634],{"class":54,"line":55},[52,41631,59],{"class":58},[52,41633,63],{"class":371},[52,41635,77],{"class":58},[52,41637,41638,41640,41642],{"class":54,"line":80},[52,41639,83],{"class":58},[52,41641,41471],{"class":371},[52,41643,77],{"class":58},[52,41645,41646,41648,41650],{"class":54,"line":108},[52,41647,2213],{"class":58},[52,41649,2216],{"class":371},[52,41651,105],{"class":58},[52,41653,41654,41656,41658],{"class":54,"line":118},[52,41655,2230],{"class":58},[52,41657,41471],{"class":371},[52,41659,77],{"class":58},[52,41661,41662,41664,41666],{"class":54,"line":594},[52,41663,121],{"class":58},[52,41665,63],{"class":371},[52,41667,77],{"class":58},[43,41669,41671],{"className":222,"code":41670,"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,41672,41673,41683,41687,41701,41705,41714,41722,41726,41730],{"__ignoreMap":48},[52,41674,41675,41677,41679,41681],{"class":54,"line":55},[52,41676,232],{"class":231},[52,41678,9231],{"class":58},[52,41680,238],{"class":231},[52,41682,9236],{"class":73},[52,41684,41685],{"class":54,"line":80},[52,41686,597],{"emptyLinePlaceholder":171},[52,41688,41689,41691,41693,41695,41697,41699],{"class":54,"line":108},[52,41690,1721],{"class":231},[52,41692,1724],{"class":371},[52,41694,1727],{"class":231},[52,41696,1730],{"class":231},[52,41698,1733],{"class":66},[52,41700,1736],{"class":58},[52,41702,41703],{"class":54,"line":118},[52,41704,1751],{"class":58},[52,41706,41707,41709,41712],{"class":54,"line":594},[52,41708,1756],{"class":58},[52,41710,41711],{"class":73},"'Halftone'",[52,41713,4722],{"class":58},[52,41715,41716,41718,41720],{"class":54,"line":600},[52,41717,4727],{"class":58},[52,41719,2869],{"class":73},[52,41721,2129],{"class":58},[52,41723,41724],{"class":54,"line":606},[52,41725,4744],{"class":58},[52,41727,41728],{"class":54,"line":653},[52,41729,1773],{"class":58},[52,41731,41732],{"class":54,"line":662},[52,41733,1778],{"class":58},[156,41735,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41737},[41738,41739],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/halftone",{"title":41471,"description":41479},"docs/components/Halftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":41746,"title":41747,"body":41748,"category":27760,"componentType":20842,"description":41755,"extension":168,"meta":41940,"navigation":171,"path":41941,"requiresChild":27763,"seo":41942,"stem":41943,"__hash__":41944},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":41749,"toc":41936},[41750,41753,41756,41758,41760,41763,41765,41934],[11,41751,41747],{"id":41752},"hexgrid",[15,41754,41755],{},"Honeycomb hexagonal grid pattern",[26901,41757],{"component":41747},[23,41759,26905],{"id":21503},[26907,41761],{":props":41762},"[{\"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,41764,26913],{"id":26912},[217,41766,41767,41796,41824,41852,41880],{":tabs":1543},[43,41768,41770],{"className":45,"code":41769,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,41771,41772,41780,41788],{"__ignoreMap":48},[52,41773,41774,41776,41778],{"class":54,"line":55},[52,41775,59],{"class":58},[52,41777,63],{"class":62},[52,41779,77],{"class":58},[52,41781,41782,41784,41786],{"class":54,"line":80},[52,41783,83],{"class":58},[52,41785,41747],{"class":62},[52,41787,105],{"class":58},[52,41789,41790,41792,41794],{"class":54,"line":108},[52,41791,121],{"class":58},[52,41793,63],{"class":62},[52,41795,77],{"class":58},[43,41797,41798],{"className":360,"code":41769,"language":362,"meta":48,"style":48},[31,41799,41800,41808,41816],{"__ignoreMap":48},[52,41801,41802,41804,41806],{"class":54,"line":55},[52,41803,59],{"class":58},[52,41805,63],{"class":371},[52,41807,77],{"class":58},[52,41809,41810,41812,41814],{"class":54,"line":80},[52,41811,83],{"class":58},[52,41813,41747],{"class":371},[52,41815,105],{"class":58},[52,41817,41818,41820,41822],{"class":54,"line":108},[52,41819,121],{"class":58},[52,41821,63],{"class":371},[52,41823,77],{"class":58},[43,41825,41826],{"className":2507,"code":41769,"language":2509,"meta":48,"style":48},[31,41827,41828,41836,41844],{"__ignoreMap":48},[52,41829,41830,41832,41834],{"class":54,"line":55},[52,41831,59],{"class":58},[52,41833,63],{"class":371},[52,41835,77],{"class":58},[52,41837,41838,41840,41842],{"class":54,"line":80},[52,41839,83],{"class":58},[52,41841,41747],{"class":371},[52,41843,105],{"class":58},[52,41845,41846,41848,41850],{"class":54,"line":108},[52,41847,121],{"class":58},[52,41849,63],{"class":371},[52,41851,77],{"class":58},[43,41853,41854],{"className":419,"code":41769,"language":420,"meta":48,"style":48},[31,41855,41856,41864,41872],{"__ignoreMap":48},[52,41857,41858,41860,41862],{"class":54,"line":55},[52,41859,59],{"class":58},[52,41861,63],{"class":371},[52,41863,77],{"class":58},[52,41865,41866,41868,41870],{"class":54,"line":80},[52,41867,83],{"class":58},[52,41869,41747],{"class":371},[52,41871,105],{"class":58},[52,41873,41874,41876,41878],{"class":54,"line":108},[52,41875,121],{"class":58},[52,41877,63],{"class":371},[52,41879,77],{"class":58},[43,41881,41883],{"className":222,"code":41882,"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,41884,41885,41895,41899,41913,41917,41926,41930],{"__ignoreMap":48},[52,41886,41887,41889,41891,41893],{"class":54,"line":55},[52,41888,232],{"class":231},[52,41890,9231],{"class":58},[52,41892,238],{"class":231},[52,41894,9236],{"class":73},[52,41896,41897],{"class":54,"line":80},[52,41898,597],{"emptyLinePlaceholder":171},[52,41900,41901,41903,41905,41907,41909,41911],{"class":54,"line":108},[52,41902,1721],{"class":231},[52,41904,1724],{"class":371},[52,41906,1727],{"class":231},[52,41908,1730],{"class":231},[52,41910,1733],{"class":66},[52,41912,1736],{"class":58},[52,41914,41915],{"class":54,"line":118},[52,41916,1751],{"class":58},[52,41918,41919,41921,41924],{"class":54,"line":594},[52,41920,1756],{"class":58},[52,41922,41923],{"class":73},"'HexGrid'",[52,41925,2129],{"class":58},[52,41927,41928],{"class":54,"line":600},[52,41929,1773],{"class":58},[52,41931,41932],{"class":54,"line":606},[52,41933,1778],{"class":58},[156,41935,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41937},[41938,41939],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hexgrid",{"title":41747,"description":41755},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":41946,"title":41947,"body":41948,"category":29304,"componentType":20848,"description":41955,"extension":168,"meta":42216,"navigation":171,"path":42217,"requiresChild":171,"seo":42218,"stem":42219,"__hash__":42220},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":41949,"toc":42212},[41950,41953,41956,41958,41960,41963,41965,42210],[11,41951,41947],{"id":41952},"hueshift",[15,41954,41955],{},"Rotate hue around the color wheel",[26901,41957],{"component":41947},[23,41959,26905],{"id":21503},[26907,41961],{":props":41962},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,41964,26913],{"id":26912},[217,41966,41967,42012,42056,42100,42144],{":tabs":1543},[43,41968,41970],{"className":45,"code":41969,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,41971,41972,41980,41988,41996,42004],{"__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,41947],{"class":62},[52,41987,77],{"class":58},[52,41989,41990,41992,41994],{"class":54,"line":108},[52,41991,2213],{"class":58},[52,41993,2216],{"class":62},[52,41995,105],{"class":58},[52,41997,41998,42000,42002],{"class":54,"line":118},[52,41999,2230],{"class":58},[52,42001,41947],{"class":62},[52,42003,77],{"class":58},[52,42005,42006,42008,42010],{"class":54,"line":594},[52,42007,121],{"class":58},[52,42009,63],{"class":62},[52,42011,77],{"class":58},[43,42013,42014],{"className":360,"code":41969,"language":362,"meta":48,"style":48},[31,42015,42016,42024,42032,42040,42048],{"__ignoreMap":48},[52,42017,42018,42020,42022],{"class":54,"line":55},[52,42019,59],{"class":58},[52,42021,63],{"class":371},[52,42023,77],{"class":58},[52,42025,42026,42028,42030],{"class":54,"line":80},[52,42027,83],{"class":58},[52,42029,41947],{"class":371},[52,42031,77],{"class":58},[52,42033,42034,42036,42038],{"class":54,"line":108},[52,42035,2213],{"class":58},[52,42037,2216],{"class":371},[52,42039,105],{"class":58},[52,42041,42042,42044,42046],{"class":54,"line":118},[52,42043,2230],{"class":58},[52,42045,41947],{"class":371},[52,42047,77],{"class":58},[52,42049,42050,42052,42054],{"class":54,"line":594},[52,42051,121],{"class":58},[52,42053,63],{"class":371},[52,42055,77],{"class":58},[43,42057,42058],{"className":2507,"code":41969,"language":2509,"meta":48,"style":48},[31,42059,42060,42068,42076,42084,42092],{"__ignoreMap":48},[52,42061,42062,42064,42066],{"class":54,"line":55},[52,42063,59],{"class":58},[52,42065,63],{"class":371},[52,42067,77],{"class":58},[52,42069,42070,42072,42074],{"class":54,"line":80},[52,42071,83],{"class":58},[52,42073,41947],{"class":371},[52,42075,77],{"class":58},[52,42077,42078,42080,42082],{"class":54,"line":108},[52,42079,2213],{"class":58},[52,42081,2216],{"class":371},[52,42083,105],{"class":58},[52,42085,42086,42088,42090],{"class":54,"line":118},[52,42087,2230],{"class":58},[52,42089,41947],{"class":371},[52,42091,77],{"class":58},[52,42093,42094,42096,42098],{"class":54,"line":594},[52,42095,121],{"class":58},[52,42097,63],{"class":371},[52,42099,77],{"class":58},[43,42101,42102],{"className":419,"code":41969,"language":420,"meta":48,"style":48},[31,42103,42104,42112,42120,42128,42136],{"__ignoreMap":48},[52,42105,42106,42108,42110],{"class":54,"line":55},[52,42107,59],{"class":58},[52,42109,63],{"class":371},[52,42111,77],{"class":58},[52,42113,42114,42116,42118],{"class":54,"line":80},[52,42115,83],{"class":58},[52,42117,41947],{"class":371},[52,42119,77],{"class":58},[52,42121,42122,42124,42126],{"class":54,"line":108},[52,42123,2213],{"class":58},[52,42125,2216],{"class":371},[52,42127,105],{"class":58},[52,42129,42130,42132,42134],{"class":54,"line":118},[52,42131,2230],{"class":58},[52,42133,41947],{"class":371},[52,42135,77],{"class":58},[52,42137,42138,42140,42142],{"class":54,"line":594},[52,42139,121],{"class":58},[52,42141,63],{"class":371},[52,42143,77],{"class":58},[43,42145,42147],{"className":222,"code":42146,"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,42148,42149,42159,42163,42177,42181,42190,42198,42202,42206],{"__ignoreMap":48},[52,42150,42151,42153,42155,42157],{"class":54,"line":55},[52,42152,232],{"class":231},[52,42154,9231],{"class":58},[52,42156,238],{"class":231},[52,42158,9236],{"class":73},[52,42160,42161],{"class":54,"line":80},[52,42162,597],{"emptyLinePlaceholder":171},[52,42164,42165,42167,42169,42171,42173,42175],{"class":54,"line":108},[52,42166,1721],{"class":231},[52,42168,1724],{"class":371},[52,42170,1727],{"class":231},[52,42172,1730],{"class":231},[52,42174,1733],{"class":66},[52,42176,1736],{"class":58},[52,42178,42179],{"class":54,"line":118},[52,42180,1751],{"class":58},[52,42182,42183,42185,42188],{"class":54,"line":594},[52,42184,1756],{"class":58},[52,42186,42187],{"class":73},"'HueShift'",[52,42189,4722],{"class":58},[52,42191,42192,42194,42196],{"class":54,"line":600},[52,42193,4727],{"class":58},[52,42195,2869],{"class":73},[52,42197,2129],{"class":58},[52,42199,42200],{"class":54,"line":606},[52,42201,4744],{"class":58},[52,42203,42204],{"class":54,"line":653},[52,42205,1773],{"class":58},[52,42207,42208],{"class":54,"line":662},[52,42209,1778],{"class":58},[156,42211,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42213},[42214,42215],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hueshift",{"title":41947,"description":41955},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":42222,"title":42223,"body":42224,"category":27760,"componentType":20842,"description":42231,"extension":168,"meta":42416,"navigation":171,"path":42417,"requiresChild":27763,"seo":42418,"stem":42419,"__hash__":42420},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":42225,"toc":42412},[42226,42229,42232,42234,42236,42239,42241,42410],[11,42227,42223],{"id":42228},"imagetexture",[15,42230,42231],{},"Display an image with customizable object-fit modes",[26901,42233],{"component":42223},[23,42235,26905],{"id":21503},[26907,42237],{":props":42238},"[{\"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,42240,26913],{"id":26912},[217,42242,42243,42272,42300,42328,42356],{":tabs":1543},[43,42244,42246],{"className":45,"code":42245,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,42247,42248,42256,42264],{"__ignoreMap":48},[52,42249,42250,42252,42254],{"class":54,"line":55},[52,42251,59],{"class":58},[52,42253,63],{"class":62},[52,42255,77],{"class":58},[52,42257,42258,42260,42262],{"class":54,"line":80},[52,42259,83],{"class":58},[52,42261,42223],{"class":62},[52,42263,105],{"class":58},[52,42265,42266,42268,42270],{"class":54,"line":108},[52,42267,121],{"class":58},[52,42269,63],{"class":62},[52,42271,77],{"class":58},[43,42273,42274],{"className":360,"code":42245,"language":362,"meta":48,"style":48},[31,42275,42276,42284,42292],{"__ignoreMap":48},[52,42277,42278,42280,42282],{"class":54,"line":55},[52,42279,59],{"class":58},[52,42281,63],{"class":371},[52,42283,77],{"class":58},[52,42285,42286,42288,42290],{"class":54,"line":80},[52,42287,83],{"class":58},[52,42289,42223],{"class":371},[52,42291,105],{"class":58},[52,42293,42294,42296,42298],{"class":54,"line":108},[52,42295,121],{"class":58},[52,42297,63],{"class":371},[52,42299,77],{"class":58},[43,42301,42302],{"className":2507,"code":42245,"language":2509,"meta":48,"style":48},[31,42303,42304,42312,42320],{"__ignoreMap":48},[52,42305,42306,42308,42310],{"class":54,"line":55},[52,42307,59],{"class":58},[52,42309,63],{"class":371},[52,42311,77],{"class":58},[52,42313,42314,42316,42318],{"class":54,"line":80},[52,42315,83],{"class":58},[52,42317,42223],{"class":371},[52,42319,105],{"class":58},[52,42321,42322,42324,42326],{"class":54,"line":108},[52,42323,121],{"class":58},[52,42325,63],{"class":371},[52,42327,77],{"class":58},[43,42329,42330],{"className":419,"code":42245,"language":420,"meta":48,"style":48},[31,42331,42332,42340,42348],{"__ignoreMap":48},[52,42333,42334,42336,42338],{"class":54,"line":55},[52,42335,59],{"class":58},[52,42337,63],{"class":371},[52,42339,77],{"class":58},[52,42341,42342,42344,42346],{"class":54,"line":80},[52,42343,83],{"class":58},[52,42345,42223],{"class":371},[52,42347,105],{"class":58},[52,42349,42350,42352,42354],{"class":54,"line":108},[52,42351,121],{"class":58},[52,42353,63],{"class":371},[52,42355,77],{"class":58},[43,42357,42359],{"className":222,"code":42358,"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,42360,42361,42371,42375,42389,42393,42402,42406],{"__ignoreMap":48},[52,42362,42363,42365,42367,42369],{"class":54,"line":55},[52,42364,232],{"class":231},[52,42366,9231],{"class":58},[52,42368,238],{"class":231},[52,42370,9236],{"class":73},[52,42372,42373],{"class":54,"line":80},[52,42374,597],{"emptyLinePlaceholder":171},[52,42376,42377,42379,42381,42383,42385,42387],{"class":54,"line":108},[52,42378,1721],{"class":231},[52,42380,1724],{"class":371},[52,42382,1727],{"class":231},[52,42384,1730],{"class":231},[52,42386,1733],{"class":66},[52,42388,1736],{"class":58},[52,42390,42391],{"class":54,"line":118},[52,42392,1751],{"class":58},[52,42394,42395,42397,42400],{"class":54,"line":594},[52,42396,1756],{"class":58},[52,42398,42399],{"class":73},"'ImageTexture'",[52,42401,2129],{"class":58},[52,42403,42404],{"class":54,"line":600},[52,42405,1773],{"class":58},[52,42407,42408],{"class":54,"line":606},[52,42409,1778],{"class":58},[156,42411,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42413},[42414,42415],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/imagetexture",{"title":42223,"description":42231},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":42422,"title":42423,"body":42424,"category":29304,"componentType":20848,"description":42431,"extension":168,"meta":42686,"navigation":171,"path":42687,"requiresChild":171,"seo":42688,"stem":42689,"__hash__":42690},"components/docs/components/Invert.md","Invert",{"type":8,"value":42425,"toc":42683},[42426,42429,42432,42434,42436,42681],[11,42427,42423],{"id":42428},"invert",[15,42430,42431],{},"Invert RGB colors while preserving alpha",[26901,42433],{"component":42423},[23,42435,26913],{"id":26912},[217,42437,42438,42483,42527,42571,42615],{":tabs":1543},[43,42439,42441],{"className":45,"code":42440,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,42442,42443,42451,42459,42467,42475],{"__ignoreMap":48},[52,42444,42445,42447,42449],{"class":54,"line":55},[52,42446,59],{"class":58},[52,42448,63],{"class":62},[52,42450,77],{"class":58},[52,42452,42453,42455,42457],{"class":54,"line":80},[52,42454,83],{"class":58},[52,42456,42423],{"class":62},[52,42458,77],{"class":58},[52,42460,42461,42463,42465],{"class":54,"line":108},[52,42462,2213],{"class":58},[52,42464,2216],{"class":62},[52,42466,105],{"class":58},[52,42468,42469,42471,42473],{"class":54,"line":118},[52,42470,2230],{"class":58},[52,42472,42423],{"class":62},[52,42474,77],{"class":58},[52,42476,42477,42479,42481],{"class":54,"line":594},[52,42478,121],{"class":58},[52,42480,63],{"class":62},[52,42482,77],{"class":58},[43,42484,42485],{"className":360,"code":42440,"language":362,"meta":48,"style":48},[31,42486,42487,42495,42503,42511,42519],{"__ignoreMap":48},[52,42488,42489,42491,42493],{"class":54,"line":55},[52,42490,59],{"class":58},[52,42492,63],{"class":371},[52,42494,77],{"class":58},[52,42496,42497,42499,42501],{"class":54,"line":80},[52,42498,83],{"class":58},[52,42500,42423],{"class":371},[52,42502,77],{"class":58},[52,42504,42505,42507,42509],{"class":54,"line":108},[52,42506,2213],{"class":58},[52,42508,2216],{"class":371},[52,42510,105],{"class":58},[52,42512,42513,42515,42517],{"class":54,"line":118},[52,42514,2230],{"class":58},[52,42516,42423],{"class":371},[52,42518,77],{"class":58},[52,42520,42521,42523,42525],{"class":54,"line":594},[52,42522,121],{"class":58},[52,42524,63],{"class":371},[52,42526,77],{"class":58},[43,42528,42529],{"className":2507,"code":42440,"language":2509,"meta":48,"style":48},[31,42530,42531,42539,42547,42555,42563],{"__ignoreMap":48},[52,42532,42533,42535,42537],{"class":54,"line":55},[52,42534,59],{"class":58},[52,42536,63],{"class":371},[52,42538,77],{"class":58},[52,42540,42541,42543,42545],{"class":54,"line":80},[52,42542,83],{"class":58},[52,42544,42423],{"class":371},[52,42546,77],{"class":58},[52,42548,42549,42551,42553],{"class":54,"line":108},[52,42550,2213],{"class":58},[52,42552,2216],{"class":371},[52,42554,105],{"class":58},[52,42556,42557,42559,42561],{"class":54,"line":118},[52,42558,2230],{"class":58},[52,42560,42423],{"class":371},[52,42562,77],{"class":58},[52,42564,42565,42567,42569],{"class":54,"line":594},[52,42566,121],{"class":58},[52,42568,63],{"class":371},[52,42570,77],{"class":58},[43,42572,42573],{"className":419,"code":42440,"language":420,"meta":48,"style":48},[31,42574,42575,42583,42591,42599,42607],{"__ignoreMap":48},[52,42576,42577,42579,42581],{"class":54,"line":55},[52,42578,59],{"class":58},[52,42580,63],{"class":371},[52,42582,77],{"class":58},[52,42584,42585,42587,42589],{"class":54,"line":80},[52,42586,83],{"class":58},[52,42588,42423],{"class":371},[52,42590,77],{"class":58},[52,42592,42593,42595,42597],{"class":54,"line":108},[52,42594,2213],{"class":58},[52,42596,2216],{"class":371},[52,42598,105],{"class":58},[52,42600,42601,42603,42605],{"class":54,"line":118},[52,42602,2230],{"class":58},[52,42604,42423],{"class":371},[52,42606,77],{"class":58},[52,42608,42609,42611,42613],{"class":54,"line":594},[52,42610,121],{"class":58},[52,42612,63],{"class":371},[52,42614,77],{"class":58},[43,42616,42618],{"className":222,"code":42617,"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,42619,42620,42630,42634,42648,42652,42661,42669,42673,42677],{"__ignoreMap":48},[52,42621,42622,42624,42626,42628],{"class":54,"line":55},[52,42623,232],{"class":231},[52,42625,9231],{"class":58},[52,42627,238],{"class":231},[52,42629,9236],{"class":73},[52,42631,42632],{"class":54,"line":80},[52,42633,597],{"emptyLinePlaceholder":171},[52,42635,42636,42638,42640,42642,42644,42646],{"class":54,"line":108},[52,42637,1721],{"class":231},[52,42639,1724],{"class":371},[52,42641,1727],{"class":231},[52,42643,1730],{"class":231},[52,42645,1733],{"class":66},[52,42647,1736],{"class":58},[52,42649,42650],{"class":54,"line":118},[52,42651,1751],{"class":58},[52,42653,42654,42656,42659],{"class":54,"line":594},[52,42655,1756],{"class":58},[52,42657,42658],{"class":73},"'Invert'",[52,42660,4722],{"class":58},[52,42662,42663,42665,42667],{"class":54,"line":600},[52,42664,4727],{"class":58},[52,42666,2869],{"class":73},[52,42668,2129],{"class":58},[52,42670,42671],{"class":54,"line":606},[52,42672,4744],{"class":58},[52,42674,42675],{"class":54,"line":653},[52,42676,1773],{"class":58},[52,42678,42679],{"class":54,"line":662},[52,42680,1778],{"class":58},[156,42682,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42684},[42685],{"id":26912,"depth":80,"text":26913},{},"/docs/components/invert",{"title":42423,"description":42431},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":42692,"title":42693,"body":42694,"category":28094,"componentType":20848,"description":42701,"extension":168,"meta":42962,"navigation":171,"path":42963,"requiresChild":171,"seo":42964,"stem":42965,"__hash__":42966},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":42695,"toc":42958},[42696,42699,42702,42704,42706,42709,42711,42956],[11,42697,42693],{"id":42698},"kaleidoscope",[15,42700,42701],{},"Create a kaleidoscope effect with radial mirrored segments",[26901,42703],{"component":42693},[23,42705,26905],{"id":21503},[26907,42707],{":props":42708},"[{\"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,42710,26913],{"id":26912},[217,42712,42713,42758,42802,42846,42890],{":tabs":1543},[43,42714,42716],{"className":45,"code":42715,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,42717,42718,42726,42734,42742,42750],{"__ignoreMap":48},[52,42719,42720,42722,42724],{"class":54,"line":55},[52,42721,59],{"class":58},[52,42723,63],{"class":62},[52,42725,77],{"class":58},[52,42727,42728,42730,42732],{"class":54,"line":80},[52,42729,83],{"class":58},[52,42731,42693],{"class":62},[52,42733,77],{"class":58},[52,42735,42736,42738,42740],{"class":54,"line":108},[52,42737,2213],{"class":58},[52,42739,2216],{"class":62},[52,42741,105],{"class":58},[52,42743,42744,42746,42748],{"class":54,"line":118},[52,42745,2230],{"class":58},[52,42747,42693],{"class":62},[52,42749,77],{"class":58},[52,42751,42752,42754,42756],{"class":54,"line":594},[52,42753,121],{"class":58},[52,42755,63],{"class":62},[52,42757,77],{"class":58},[43,42759,42760],{"className":360,"code":42715,"language":362,"meta":48,"style":48},[31,42761,42762,42770,42778,42786,42794],{"__ignoreMap":48},[52,42763,42764,42766,42768],{"class":54,"line":55},[52,42765,59],{"class":58},[52,42767,63],{"class":371},[52,42769,77],{"class":58},[52,42771,42772,42774,42776],{"class":54,"line":80},[52,42773,83],{"class":58},[52,42775,42693],{"class":371},[52,42777,77],{"class":58},[52,42779,42780,42782,42784],{"class":54,"line":108},[52,42781,2213],{"class":58},[52,42783,2216],{"class":371},[52,42785,105],{"class":58},[52,42787,42788,42790,42792],{"class":54,"line":118},[52,42789,2230],{"class":58},[52,42791,42693],{"class":371},[52,42793,77],{"class":58},[52,42795,42796,42798,42800],{"class":54,"line":594},[52,42797,121],{"class":58},[52,42799,63],{"class":371},[52,42801,77],{"class":58},[43,42803,42804],{"className":2507,"code":42715,"language":2509,"meta":48,"style":48},[31,42805,42806,42814,42822,42830,42838],{"__ignoreMap":48},[52,42807,42808,42810,42812],{"class":54,"line":55},[52,42809,59],{"class":58},[52,42811,63],{"class":371},[52,42813,77],{"class":58},[52,42815,42816,42818,42820],{"class":54,"line":80},[52,42817,83],{"class":58},[52,42819,42693],{"class":371},[52,42821,77],{"class":58},[52,42823,42824,42826,42828],{"class":54,"line":108},[52,42825,2213],{"class":58},[52,42827,2216],{"class":371},[52,42829,105],{"class":58},[52,42831,42832,42834,42836],{"class":54,"line":118},[52,42833,2230],{"class":58},[52,42835,42693],{"class":371},[52,42837,77],{"class":58},[52,42839,42840,42842,42844],{"class":54,"line":594},[52,42841,121],{"class":58},[52,42843,63],{"class":371},[52,42845,77],{"class":58},[43,42847,42848],{"className":419,"code":42715,"language":420,"meta":48,"style":48},[31,42849,42850,42858,42866,42874,42882],{"__ignoreMap":48},[52,42851,42852,42854,42856],{"class":54,"line":55},[52,42853,59],{"class":58},[52,42855,63],{"class":371},[52,42857,77],{"class":58},[52,42859,42860,42862,42864],{"class":54,"line":80},[52,42861,83],{"class":58},[52,42863,42693],{"class":371},[52,42865,77],{"class":58},[52,42867,42868,42870,42872],{"class":54,"line":108},[52,42869,2213],{"class":58},[52,42871,2216],{"class":371},[52,42873,105],{"class":58},[52,42875,42876,42878,42880],{"class":54,"line":118},[52,42877,2230],{"class":58},[52,42879,42693],{"class":371},[52,42881,77],{"class":58},[52,42883,42884,42886,42888],{"class":54,"line":594},[52,42885,121],{"class":58},[52,42887,63],{"class":371},[52,42889,77],{"class":58},[43,42891,42893],{"className":222,"code":42892,"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,42894,42895,42905,42909,42923,42927,42936,42944,42948,42952],{"__ignoreMap":48},[52,42896,42897,42899,42901,42903],{"class":54,"line":55},[52,42898,232],{"class":231},[52,42900,9231],{"class":58},[52,42902,238],{"class":231},[52,42904,9236],{"class":73},[52,42906,42907],{"class":54,"line":80},[52,42908,597],{"emptyLinePlaceholder":171},[52,42910,42911,42913,42915,42917,42919,42921],{"class":54,"line":108},[52,42912,1721],{"class":231},[52,42914,1724],{"class":371},[52,42916,1727],{"class":231},[52,42918,1730],{"class":231},[52,42920,1733],{"class":66},[52,42922,1736],{"class":58},[52,42924,42925],{"class":54,"line":118},[52,42926,1751],{"class":58},[52,42928,42929,42931,42934],{"class":54,"line":594},[52,42930,1756],{"class":58},[52,42932,42933],{"class":73},"'Kaleidoscope'",[52,42935,4722],{"class":58},[52,42937,42938,42940,42942],{"class":54,"line":600},[52,42939,4727],{"class":58},[52,42941,2869],{"class":73},[52,42943,2129],{"class":58},[52,42945,42946],{"class":54,"line":606},[52,42947,4744],{"class":58},[52,42949,42950],{"class":54,"line":653},[52,42951,1773],{"class":58},[52,42953,42954],{"class":54,"line":662},[52,42955,1778],{"class":58},[156,42957,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42959},[42960,42961],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/kaleidoscope",{"title":42693,"description":42701},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":42968,"title":42969,"body":42970,"category":27503,"componentType":20842,"description":42977,"extension":168,"meta":43217,"navigation":171,"path":43218,"requiresChild":27763,"seo":43219,"stem":43220,"__hash__":43221},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":42971,"toc":43213},[42972,42975,42978,42980,42982,42985,42987,43211],[11,42973,42969],{"id":42974},"lensflare",[15,42976,42977],{},"Realistic camera lens flare with artifacts.",[26901,42979],{"component":42969},[23,42981,26905],{"id":21503},[26907,42983],{":props":42984},"[{\"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,42986,26913],{"id":26912},[217,42988,42989,43028,43071,43111,43153],{":tabs":1543},[43,42990,42992],{"className":45,"code":42991,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,42993,42994,43002,43008,43016,43020],{"__ignoreMap":48},[52,42995,42996,42998,43000],{"class":54,"line":55},[52,42997,59],{"class":58},[52,42999,63],{"class":62},[52,43001,77],{"class":58},[52,43003,43004,43006],{"class":54,"line":80},[52,43005,83],{"class":58},[52,43007,17856],{"class":62},[52,43009,43010,43012,43014],{"class":54,"line":108},[52,43011,17870],{"class":66},[52,43013,70],{"class":58},[52,43015,33394],{"class":73},[52,43017,43018],{"class":54,"line":118},[52,43019,1224],{"class":58},[52,43021,43022,43024,43026],{"class":54,"line":594},[52,43023,121],{"class":58},[52,43025,63],{"class":62},[52,43027,77],{"class":58},[43,43029,43031],{"className":360,"code":43030,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,43032,43033,43041,43047,43059,43063],{"__ignoreMap":48},[52,43034,43035,43037,43039],{"class":54,"line":55},[52,43036,59],{"class":58},[52,43038,63],{"class":371},[52,43040,77],{"class":58},[52,43042,43043,43045],{"class":54,"line":80},[52,43044,83],{"class":58},[52,43046,17856],{"class":371},[52,43048,43049,43051,43053,43055,43057],{"class":54,"line":108},[52,43050,17981],{"class":66},[52,43052,70],{"class":231},[52,43054,723],{"class":58},[52,43056,5467],{"class":371},[52,43058,729],{"class":58},[52,43060,43061],{"class":54,"line":118},[52,43062,1224],{"class":58},[52,43064,43065,43067,43069],{"class":54,"line":594},[52,43066,121],{"class":58},[52,43068,63],{"class":371},[52,43070,77],{"class":58},[43,43072,43073],{"className":2507,"code":43030,"language":2509,"meta":48,"style":48},[31,43074,43075,43083,43089,43099,43103],{"__ignoreMap":48},[52,43076,43077,43079,43081],{"class":54,"line":55},[52,43078,59],{"class":58},[52,43080,63],{"class":371},[52,43082,77],{"class":58},[52,43084,43085,43087],{"class":54,"line":80},[52,43086,83],{"class":58},[52,43088,17856],{"class":371},[52,43090,43091,43093,43095,43097],{"class":54,"line":108},[52,43092,17981],{"class":66},[52,43094,24845],{"class":58},[52,43096,5467],{"class":371},[52,43098,729],{"class":58},[52,43100,43101],{"class":54,"line":118},[52,43102,1224],{"class":58},[52,43104,43105,43107,43109],{"class":54,"line":594},[52,43106,121],{"class":58},[52,43108,63],{"class":371},[52,43110,77],{"class":58},[43,43112,43113],{"className":419,"code":43030,"language":420,"meta":48,"style":48},[31,43114,43115,43123,43129,43141,43145],{"__ignoreMap":48},[52,43116,43117,43119,43121],{"class":54,"line":55},[52,43118,59],{"class":58},[52,43120,63],{"class":371},[52,43122,77],{"class":58},[52,43124,43125,43127],{"class":54,"line":80},[52,43126,83],{"class":58},[52,43128,17856],{"class":371},[52,43130,43131,43133,43135,43137,43139],{"class":54,"line":108},[52,43132,17981],{"class":66},[52,43134,70],{"class":231},[52,43136,723],{"class":58},[52,43138,5467],{"class":371},[52,43140,729],{"class":58},[52,43142,43143],{"class":54,"line":118},[52,43144,1224],{"class":58},[52,43146,43147,43149,43151],{"class":54,"line":594},[52,43148,121],{"class":58},[52,43150,63],{"class":371},[52,43152,77],{"class":58},[43,43154,43156],{"className":222,"code":43155,"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,43157,43158,43168,43172,43186,43190,43203,43207],{"__ignoreMap":48},[52,43159,43160,43162,43164,43166],{"class":54,"line":55},[52,43161,232],{"class":231},[52,43163,9231],{"class":58},[52,43165,238],{"class":231},[52,43167,9236],{"class":73},[52,43169,43170],{"class":54,"line":80},[52,43171,597],{"emptyLinePlaceholder":171},[52,43173,43174,43176,43178,43180,43182,43184],{"class":54,"line":108},[52,43175,1721],{"class":231},[52,43177,1724],{"class":371},[52,43179,1727],{"class":231},[52,43181,1730],{"class":231},[52,43183,1733],{"class":66},[52,43185,1736],{"class":58},[52,43187,43188],{"class":54,"line":118},[52,43189,1751],{"class":58},[52,43191,43192,43194,43197,43199,43201],{"class":54,"line":594},[52,43193,1756],{"class":58},[52,43195,43196],{"class":73},"'LensFlare'",[52,43198,27194],{"class":58},[52,43200,5467],{"class":371},[52,43202,1768],{"class":58},[52,43204,43205],{"class":54,"line":600},[52,43206,1773],{"class":58},[52,43208,43209],{"class":54,"line":606},[52,43210,1778],{"class":58},[156,43212,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43214},[43215,43216],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lensflare",{"title":42969,"description":42977},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":43223,"title":43224,"body":43225,"category":27225,"componentType":20848,"description":43232,"extension":168,"meta":43549,"navigation":171,"path":43550,"requiresChild":171,"seo":43551,"stem":43552,"__hash__":43553},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":43226,"toc":43545},[43227,43230,43233,43235,43237,43240,43242,43543],[11,43228,43224],{"id":43229},"linearblur",[15,43231,43232],{},"Directional motion blur in a specific angle",[26901,43234],{"component":43224},[23,43236,26905],{"id":21503},[26907,43238],{":props":43239},"[{\"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,43241,26913],{"id":26912},[217,43243,43244,43300,43359,43415,43473],{":tabs":1543},[43,43245,43247],{"className":45,"code":43246,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,43248,43249,43257,43264,43272,43276,43284,43292],{"__ignoreMap":48},[52,43250,43251,43253,43255],{"class":54,"line":55},[52,43252,59],{"class":58},[52,43254,63],{"class":62},[52,43256,77],{"class":58},[52,43258,43259,43261],{"class":54,"line":80},[52,43260,83],{"class":58},[52,43262,43263],{"class":62},"LinearBlur\n",[52,43265,43266,43268,43270],{"class":54,"line":108},[52,43267,17870],{"class":66},[52,43269,70],{"class":58},[52,43271,34420],{"class":73},[52,43273,43274],{"class":54,"line":118},[52,43275,26949],{"class":58},[52,43277,43278,43280,43282],{"class":54,"line":594},[52,43279,2213],{"class":58},[52,43281,2216],{"class":62},[52,43283,105],{"class":58},[52,43285,43286,43288,43290],{"class":54,"line":600},[52,43287,2230],{"class":58},[52,43289,43224],{"class":62},[52,43291,77],{"class":58},[52,43293,43294,43296,43298],{"class":54,"line":606},[52,43295,121],{"class":58},[52,43297,63],{"class":62},[52,43299,77],{"class":58},[43,43301,43303],{"className":360,"code":43302,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,43304,43305,43313,43319,43331,43335,43343,43351],{"__ignoreMap":48},[52,43306,43307,43309,43311],{"class":54,"line":55},[52,43308,59],{"class":58},[52,43310,63],{"class":371},[52,43312,77],{"class":58},[52,43314,43315,43317],{"class":54,"line":80},[52,43316,83],{"class":58},[52,43318,43263],{"class":371},[52,43320,43321,43323,43325,43327,43329],{"class":54,"line":108},[52,43322,17981],{"class":66},[52,43324,70],{"class":231},[52,43326,723],{"class":58},[52,43328,13194],{"class":371},[52,43330,729],{"class":58},[52,43332,43333],{"class":54,"line":118},[52,43334,26949],{"class":58},[52,43336,43337,43339,43341],{"class":54,"line":594},[52,43338,2213],{"class":58},[52,43340,2216],{"class":371},[52,43342,105],{"class":58},[52,43344,43345,43347,43349],{"class":54,"line":600},[52,43346,2230],{"class":58},[52,43348,43224],{"class":371},[52,43350,77],{"class":58},[52,43352,43353,43355,43357],{"class":54,"line":606},[52,43354,121],{"class":58},[52,43356,63],{"class":371},[52,43358,77],{"class":58},[43,43360,43361],{"className":2507,"code":43302,"language":2509,"meta":48,"style":48},[31,43362,43363,43371,43377,43387,43391,43399,43407],{"__ignoreMap":48},[52,43364,43365,43367,43369],{"class":54,"line":55},[52,43366,59],{"class":58},[52,43368,63],{"class":371},[52,43370,77],{"class":58},[52,43372,43373,43375],{"class":54,"line":80},[52,43374,83],{"class":58},[52,43376,43263],{"class":371},[52,43378,43379,43381,43383,43385],{"class":54,"line":108},[52,43380,17981],{"class":66},[52,43382,24845],{"class":58},[52,43384,13194],{"class":371},[52,43386,729],{"class":58},[52,43388,43389],{"class":54,"line":118},[52,43390,26949],{"class":58},[52,43392,43393,43395,43397],{"class":54,"line":594},[52,43394,2213],{"class":58},[52,43396,2216],{"class":371},[52,43398,105],{"class":58},[52,43400,43401,43403,43405],{"class":54,"line":600},[52,43402,2230],{"class":58},[52,43404,43224],{"class":371},[52,43406,77],{"class":58},[52,43408,43409,43411,43413],{"class":54,"line":606},[52,43410,121],{"class":58},[52,43412,63],{"class":371},[52,43414,77],{"class":58},[43,43416,43417],{"className":419,"code":43302,"language":420,"meta":48,"style":48},[31,43418,43419,43427,43433,43445,43449,43457,43465],{"__ignoreMap":48},[52,43420,43421,43423,43425],{"class":54,"line":55},[52,43422,59],{"class":58},[52,43424,63],{"class":371},[52,43426,77],{"class":58},[52,43428,43429,43431],{"class":54,"line":80},[52,43430,83],{"class":58},[52,43432,43263],{"class":371},[52,43434,43435,43437,43439,43441,43443],{"class":54,"line":108},[52,43436,17981],{"class":66},[52,43438,70],{"class":231},[52,43440,723],{"class":58},[52,43442,13194],{"class":371},[52,43444,729],{"class":58},[52,43446,43447],{"class":54,"line":118},[52,43448,26949],{"class":58},[52,43450,43451,43453,43455],{"class":54,"line":594},[52,43452,2213],{"class":58},[52,43454,2216],{"class":371},[52,43456,105],{"class":58},[52,43458,43459,43461,43463],{"class":54,"line":600},[52,43460,2230],{"class":58},[52,43462,43224],{"class":371},[52,43464,77],{"class":58},[52,43466,43467,43469,43471],{"class":54,"line":606},[52,43468,121],{"class":58},[52,43470,63],{"class":371},[52,43472,77],{"class":58},[43,43474,43476],{"className":222,"code":43475,"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,43477,43478,43488,43492,43506,43510,43523,43531,43535,43539],{"__ignoreMap":48},[52,43479,43480,43482,43484,43486],{"class":54,"line":55},[52,43481,232],{"class":231},[52,43483,9231],{"class":58},[52,43485,238],{"class":231},[52,43487,9236],{"class":73},[52,43489,43490],{"class":54,"line":80},[52,43491,597],{"emptyLinePlaceholder":171},[52,43493,43494,43496,43498,43500,43502,43504],{"class":54,"line":108},[52,43495,1721],{"class":231},[52,43497,1724],{"class":371},[52,43499,1727],{"class":231},[52,43501,1730],{"class":231},[52,43503,1733],{"class":66},[52,43505,1736],{"class":58},[52,43507,43508],{"class":54,"line":118},[52,43509,1751],{"class":58},[52,43511,43512,43514,43517,43519,43521],{"class":54,"line":594},[52,43513,1756],{"class":58},[52,43515,43516],{"class":73},"'LinearBlur'",[52,43518,27194],{"class":58},[52,43520,13194],{"class":371},[52,43522,5259],{"class":58},[52,43524,43525,43527,43529],{"class":54,"line":600},[52,43526,4727],{"class":58},[52,43528,2869],{"class":73},[52,43530,2129],{"class":58},[52,43532,43533],{"class":54,"line":606},[52,43534,4744],{"class":58},[52,43536,43537],{"class":54,"line":653},[52,43538,1773],{"class":58},[52,43540,43541],{"class":54,"line":662},[52,43542,1778],{"class":58},[156,43544,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43546},[43547,43548],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/linearblur",{"title":43224,"description":43232},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":43555,"title":86,"body":43556,"category":27760,"componentType":20842,"description":43563,"extension":168,"meta":43747,"navigation":171,"path":43748,"requiresChild":27763,"seo":43749,"stem":43750,"__hash__":43751},"components/docs/components/LinearGradient.md",{"type":8,"value":43557,"toc":43743},[43558,43561,43564,43566,43568,43571,43573,43741],[11,43559,86],{"id":43560},"lineargradient",[15,43562,43563],{},"Create smooth linear color gradients",[26901,43565],{"component":86},[23,43567,26905],{"id":21503},[26907,43569],{":props":43570},"[{\"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,43572,26913],{"id":26912},[217,43574,43575,43604,43632,43660,43688],{":tabs":1543},[43,43576,43578],{"className":45,"code":43577,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,43579,43580,43588,43596],{"__ignoreMap":48},[52,43581,43582,43584,43586],{"class":54,"line":55},[52,43583,59],{"class":58},[52,43585,63],{"class":62},[52,43587,77],{"class":58},[52,43589,43590,43592,43594],{"class":54,"line":80},[52,43591,83],{"class":58},[52,43593,86],{"class":62},[52,43595,105],{"class":58},[52,43597,43598,43600,43602],{"class":54,"line":108},[52,43599,121],{"class":58},[52,43601,63],{"class":62},[52,43603,77],{"class":58},[43,43605,43606],{"className":360,"code":43577,"language":362,"meta":48,"style":48},[31,43607,43608,43616,43624],{"__ignoreMap":48},[52,43609,43610,43612,43614],{"class":54,"line":55},[52,43611,59],{"class":58},[52,43613,63],{"class":371},[52,43615,77],{"class":58},[52,43617,43618,43620,43622],{"class":54,"line":80},[52,43619,83],{"class":58},[52,43621,86],{"class":371},[52,43623,105],{"class":58},[52,43625,43626,43628,43630],{"class":54,"line":108},[52,43627,121],{"class":58},[52,43629,63],{"class":371},[52,43631,77],{"class":58},[43,43633,43634],{"className":2507,"code":43577,"language":2509,"meta":48,"style":48},[31,43635,43636,43644,43652],{"__ignoreMap":48},[52,43637,43638,43640,43642],{"class":54,"line":55},[52,43639,59],{"class":58},[52,43641,63],{"class":371},[52,43643,77],{"class":58},[52,43645,43646,43648,43650],{"class":54,"line":80},[52,43647,83],{"class":58},[52,43649,86],{"class":371},[52,43651,105],{"class":58},[52,43653,43654,43656,43658],{"class":54,"line":108},[52,43655,121],{"class":58},[52,43657,63],{"class":371},[52,43659,77],{"class":58},[43,43661,43662],{"className":419,"code":43577,"language":420,"meta":48,"style":48},[31,43663,43664,43672,43680],{"__ignoreMap":48},[52,43665,43666,43668,43670],{"class":54,"line":55},[52,43667,59],{"class":58},[52,43669,63],{"class":371},[52,43671,77],{"class":58},[52,43673,43674,43676,43678],{"class":54,"line":80},[52,43675,83],{"class":58},[52,43677,86],{"class":371},[52,43679,105],{"class":58},[52,43681,43682,43684,43686],{"class":54,"line":108},[52,43683,121],{"class":58},[52,43685,63],{"class":371},[52,43687,77],{"class":58},[43,43689,43691],{"className":222,"code":43690,"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,43692,43693,43703,43707,43721,43725,43733,43737],{"__ignoreMap":48},[52,43694,43695,43697,43699,43701],{"class":54,"line":55},[52,43696,232],{"class":231},[52,43698,9231],{"class":58},[52,43700,238],{"class":231},[52,43702,9236],{"class":73},[52,43704,43705],{"class":54,"line":80},[52,43706,597],{"emptyLinePlaceholder":171},[52,43708,43709,43711,43713,43715,43717,43719],{"class":54,"line":108},[52,43710,1721],{"class":231},[52,43712,1724],{"class":371},[52,43714,1727],{"class":231},[52,43716,1730],{"class":231},[52,43718,1733],{"class":66},[52,43720,1736],{"class":58},[52,43722,43723],{"class":54,"line":118},[52,43724,1751],{"class":58},[52,43726,43727,43729,43731],{"class":54,"line":594},[52,43728,1756],{"class":58},[52,43730,2126],{"class":73},[52,43732,2129],{"class":58},[52,43734,43735],{"class":54,"line":600},[52,43736,1773],{"class":58},[52,43738,43739],{"class":54,"line":606},[52,43740,1778],{"class":58},[156,43742,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43744},[43745,43746],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lineargradient",{"title":86,"description":43563},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":43753,"title":43754,"body":43755,"category":30893,"componentType":20848,"description":43762,"extension":168,"meta":44125,"navigation":171,"path":44126,"requiresChild":171,"seo":44127,"stem":44128,"__hash__":44129},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":43756,"toc":44121},[43757,43760,43763,43765,43767,43770,43772,44119],[11,43758,43754],{"id":43759},"liquify",[15,43761,43762],{},"Liquid-like interactive deformation effect",[26901,43764],{"component":43754},[23,43766,26905],{"id":21503},[26907,43768],{":props":43769},"[{\"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,43771,26913],{"id":26912},[217,43773,43774,43838,43909,43975,44045],{":tabs":1543},[43,43775,43777],{"className":45,"code":43776,"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,43778,43779,43787,43794,43802,43810,43814,43822,43830],{"__ignoreMap":48},[52,43780,43781,43783,43785],{"class":54,"line":55},[52,43782,59],{"class":58},[52,43784,63],{"class":62},[52,43786,77],{"class":58},[52,43788,43789,43791],{"class":54,"line":80},[52,43790,83],{"class":58},[52,43792,43793],{"class":62},"Liquify\n",[52,43795,43796,43798,43800],{"class":54,"line":108},[52,43797,17870],{"class":66},[52,43799,70],{"class":58},[52,43801,33385],{"class":73},[52,43803,43804,43806,43808],{"class":54,"line":118},[52,43805,14901],{"class":66},[52,43807,70],{"class":58},[52,43809,29360],{"class":73},[52,43811,43812],{"class":54,"line":594},[52,43813,26949],{"class":58},[52,43815,43816,43818,43820],{"class":54,"line":600},[52,43817,2213],{"class":58},[52,43819,2216],{"class":62},[52,43821,105],{"class":58},[52,43823,43824,43826,43828],{"class":54,"line":606},[52,43825,2230],{"class":58},[52,43827,43754],{"class":62},[52,43829,77],{"class":58},[52,43831,43832,43834,43836],{"class":54,"line":653},[52,43833,121],{"class":58},[52,43835,63],{"class":62},[52,43837,77],{"class":58},[43,43839,43841],{"className":360,"code":43840,"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,43842,43843,43851,43857,43869,43881,43885,43893,43901],{"__ignoreMap":48},[52,43844,43845,43847,43849],{"class":54,"line":55},[52,43846,59],{"class":58},[52,43848,63],{"class":371},[52,43850,77],{"class":58},[52,43852,43853,43855],{"class":54,"line":80},[52,43854,83],{"class":58},[52,43856,43793],{"class":371},[52,43858,43859,43861,43863,43865,43867],{"class":54,"line":108},[52,43860,17981],{"class":66},[52,43862,70],{"class":231},[52,43864,723],{"class":58},[52,43866,33452],{"class":371},[52,43868,729],{"class":58},[52,43870,43871,43873,43875,43877,43879],{"class":54,"line":118},[52,43872,7361],{"class":66},[52,43874,70],{"class":231},[52,43876,723],{"class":58},[52,43878,6391],{"class":371},[52,43880,729],{"class":58},[52,43882,43883],{"class":54,"line":594},[52,43884,26949],{"class":58},[52,43886,43887,43889,43891],{"class":54,"line":600},[52,43888,2213],{"class":58},[52,43890,2216],{"class":371},[52,43892,105],{"class":58},[52,43894,43895,43897,43899],{"class":54,"line":606},[52,43896,2230],{"class":58},[52,43898,43754],{"class":371},[52,43900,77],{"class":58},[52,43902,43903,43905,43907],{"class":54,"line":653},[52,43904,121],{"class":58},[52,43906,63],{"class":371},[52,43908,77],{"class":58},[43,43910,43911],{"className":2507,"code":43840,"language":2509,"meta":48,"style":48},[31,43912,43913,43921,43927,43937,43947,43951,43959,43967],{"__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],{"class":54,"line":80},[52,43924,83],{"class":58},[52,43926,43793],{"class":371},[52,43928,43929,43931,43933,43935],{"class":54,"line":108},[52,43930,17981],{"class":66},[52,43932,24845],{"class":58},[52,43934,33452],{"class":371},[52,43936,729],{"class":58},[52,43938,43939,43941,43943,43945],{"class":54,"line":118},[52,43940,7361],{"class":66},[52,43942,24845],{"class":58},[52,43944,6391],{"class":371},[52,43946,729],{"class":58},[52,43948,43949],{"class":54,"line":594},[52,43950,26949],{"class":58},[52,43952,43953,43955,43957],{"class":54,"line":600},[52,43954,2213],{"class":58},[52,43956,2216],{"class":371},[52,43958,105],{"class":58},[52,43960,43961,43963,43965],{"class":54,"line":606},[52,43962,2230],{"class":58},[52,43964,43754],{"class":371},[52,43966,77],{"class":58},[52,43968,43969,43971,43973],{"class":54,"line":653},[52,43970,121],{"class":58},[52,43972,63],{"class":371},[52,43974,77],{"class":58},[43,43976,43977],{"className":419,"code":43840,"language":420,"meta":48,"style":48},[31,43978,43979,43987,43993,44005,44017,44021,44029,44037],{"__ignoreMap":48},[52,43980,43981,43983,43985],{"class":54,"line":55},[52,43982,59],{"class":58},[52,43984,63],{"class":371},[52,43986,77],{"class":58},[52,43988,43989,43991],{"class":54,"line":80},[52,43990,83],{"class":58},[52,43992,43793],{"class":371},[52,43994,43995,43997,43999,44001,44003],{"class":54,"line":108},[52,43996,17981],{"class":66},[52,43998,70],{"class":231},[52,44000,723],{"class":58},[52,44002,33452],{"class":371},[52,44004,729],{"class":58},[52,44006,44007,44009,44011,44013,44015],{"class":54,"line":118},[52,44008,7361],{"class":66},[52,44010,70],{"class":231},[52,44012,723],{"class":58},[52,44014,6391],{"class":371},[52,44016,729],{"class":58},[52,44018,44019],{"class":54,"line":594},[52,44020,26949],{"class":58},[52,44022,44023,44025,44027],{"class":54,"line":600},[52,44024,2213],{"class":58},[52,44026,2216],{"class":371},[52,44028,105],{"class":58},[52,44030,44031,44033,44035],{"class":54,"line":606},[52,44032,2230],{"class":58},[52,44034,43754],{"class":371},[52,44036,77],{"class":58},[52,44038,44039,44041,44043],{"class":54,"line":653},[52,44040,121],{"class":58},[52,44042,63],{"class":371},[52,44044,77],{"class":58},[43,44046,44048],{"className":222,"code":44047,"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,44049,44050,44060,44064,44078,44082,44099,44107,44111,44115],{"__ignoreMap":48},[52,44051,44052,44054,44056,44058],{"class":54,"line":55},[52,44053,232],{"class":231},[52,44055,9231],{"class":58},[52,44057,238],{"class":231},[52,44059,9236],{"class":73},[52,44061,44062],{"class":54,"line":80},[52,44063,597],{"emptyLinePlaceholder":171},[52,44065,44066,44068,44070,44072,44074,44076],{"class":54,"line":108},[52,44067,1721],{"class":231},[52,44069,1724],{"class":371},[52,44071,1727],{"class":231},[52,44073,1730],{"class":231},[52,44075,1733],{"class":66},[52,44077,1736],{"class":58},[52,44079,44080],{"class":54,"line":118},[52,44081,1751],{"class":58},[52,44083,44084,44086,44089,44091,44093,44095,44097],{"class":54,"line":594},[52,44085,1756],{"class":58},[52,44087,44088],{"class":73},"'Liquify'",[52,44090,27194],{"class":58},[52,44092,33452],{"class":371},[52,44094,4278],{"class":58},[52,44096,6391],{"class":371},[52,44098,5259],{"class":58},[52,44100,44101,44103,44105],{"class":54,"line":600},[52,44102,4727],{"class":58},[52,44104,2869],{"class":73},[52,44106,2129],{"class":58},[52,44108,44109],{"class":54,"line":606},[52,44110,4744],{"class":58},[52,44112,44113],{"class":54,"line":653},[52,44114,1773],{"class":58},[52,44116,44117],{"class":54,"line":662},[52,44118,1778],{"class":58},[156,44120,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44122},[44123,44124],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/liquify",{"title":43754,"description":43762},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":44131,"title":44132,"body":44133,"category":27760,"componentType":20842,"description":44140,"extension":168,"meta":44325,"navigation":171,"path":44326,"requiresChild":27763,"seo":44327,"stem":44328,"__hash__":44329},"components/docs/components/Marble.md","Marble",{"type":8,"value":44134,"toc":44321},[44135,44138,44141,44143,44145,44148,44150,44319],[11,44136,44132],{"id":44137},"marble",[15,44139,44140],{},"Classic marble swirl and vein texture using noise-warped sine waves",[26901,44142],{"component":44132},[23,44144,26905],{"id":21503},[26907,44146],{":props":44147},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Base background color of the marble\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#3a2d54\",\"description\":\"Secondary marble tone\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#0f0f0f\",\"description\":\"Deepest marble color\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Scale and density of the marble vein pattern\"},{\"name\":\"turbulence\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Amount of noise-driven distortion applied to the veins\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Animation speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,44149,26913],{"id":26912},[217,44151,44152,44181,44209,44237,44265],{":tabs":1543},[43,44153,44155],{"className":45,"code":44154,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMarble />\n\u003C/Shader>\n",[31,44156,44157,44165,44173],{"__ignoreMap":48},[52,44158,44159,44161,44163],{"class":54,"line":55},[52,44160,59],{"class":58},[52,44162,63],{"class":62},[52,44164,77],{"class":58},[52,44166,44167,44169,44171],{"class":54,"line":80},[52,44168,83],{"class":58},[52,44170,44132],{"class":62},[52,44172,105],{"class":58},[52,44174,44175,44177,44179],{"class":54,"line":108},[52,44176,121],{"class":58},[52,44178,63],{"class":62},[52,44180,77],{"class":58},[43,44182,44183],{"className":360,"code":44154,"language":362,"meta":48,"style":48},[31,44184,44185,44193,44201],{"__ignoreMap":48},[52,44186,44187,44189,44191],{"class":54,"line":55},[52,44188,59],{"class":58},[52,44190,63],{"class":371},[52,44192,77],{"class":58},[52,44194,44195,44197,44199],{"class":54,"line":80},[52,44196,83],{"class":58},[52,44198,44132],{"class":371},[52,44200,105],{"class":58},[52,44202,44203,44205,44207],{"class":54,"line":108},[52,44204,121],{"class":58},[52,44206,63],{"class":371},[52,44208,77],{"class":58},[43,44210,44211],{"className":2507,"code":44154,"language":2509,"meta":48,"style":48},[31,44212,44213,44221,44229],{"__ignoreMap":48},[52,44214,44215,44217,44219],{"class":54,"line":55},[52,44216,59],{"class":58},[52,44218,63],{"class":371},[52,44220,77],{"class":58},[52,44222,44223,44225,44227],{"class":54,"line":80},[52,44224,83],{"class":58},[52,44226,44132],{"class":371},[52,44228,105],{"class":58},[52,44230,44231,44233,44235],{"class":54,"line":108},[52,44232,121],{"class":58},[52,44234,63],{"class":371},[52,44236,77],{"class":58},[43,44238,44239],{"className":419,"code":44154,"language":420,"meta":48,"style":48},[31,44240,44241,44249,44257],{"__ignoreMap":48},[52,44242,44243,44245,44247],{"class":54,"line":55},[52,44244,59],{"class":58},[52,44246,63],{"class":371},[52,44248,77],{"class":58},[52,44250,44251,44253,44255],{"class":54,"line":80},[52,44252,83],{"class":58},[52,44254,44132],{"class":371},[52,44256,105],{"class":58},[52,44258,44259,44261,44263],{"class":54,"line":108},[52,44260,121],{"class":58},[52,44262,63],{"class":371},[52,44264,77],{"class":58},[43,44266,44268],{"className":222,"code":44267,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Marble', props: {} }\n ]\n})\n",[31,44269,44270,44280,44284,44298,44302,44311,44315],{"__ignoreMap":48},[52,44271,44272,44274,44276,44278],{"class":54,"line":55},[52,44273,232],{"class":231},[52,44275,9231],{"class":58},[52,44277,238],{"class":231},[52,44279,9236],{"class":73},[52,44281,44282],{"class":54,"line":80},[52,44283,597],{"emptyLinePlaceholder":171},[52,44285,44286,44288,44290,44292,44294,44296],{"class":54,"line":108},[52,44287,1721],{"class":231},[52,44289,1724],{"class":371},[52,44291,1727],{"class":231},[52,44293,1730],{"class":231},[52,44295,1733],{"class":66},[52,44297,1736],{"class":58},[52,44299,44300],{"class":54,"line":118},[52,44301,1751],{"class":58},[52,44303,44304,44306,44309],{"class":54,"line":594},[52,44305,1756],{"class":58},[52,44307,44308],{"class":73},"'Marble'",[52,44310,2129],{"class":58},[52,44312,44313],{"class":54,"line":600},[52,44314,1773],{"class":58},[52,44316,44317],{"class":54,"line":606},[52,44318,1778],{"class":58},[156,44320,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44322},[44323,44324],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/marble",{"title":44132,"description":44140},"docs/components/Marble","XtgFQrcw5kn6_In9tZNpO3TgKlekay5XoXIvByNS78Y",{"id":44331,"title":44332,"body":44333,"category":28094,"componentType":20848,"description":44339,"extension":168,"meta":44600,"navigation":171,"path":44601,"requiresChild":171,"seo":44602,"stem":44603,"__hash__":44604},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":44334,"toc":44596},[44335,44337,44340,44342,44344,44347,44349,44594],[11,44336,44332],{"id":13656},[15,44338,44339],{},"Mirror content across a line defined by center point and angle",[26901,44341],{"component":44332},[23,44343,26905],{"id":21503},[26907,44345],{":props":44346},"[{\"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,44348,26913],{"id":26912},[217,44350,44351,44396,44440,44484,44528],{":tabs":1543},[43,44352,44354],{"className":45,"code":44353,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,44355,44356,44364,44372,44380,44388],{"__ignoreMap":48},[52,44357,44358,44360,44362],{"class":54,"line":55},[52,44359,59],{"class":58},[52,44361,63],{"class":62},[52,44363,77],{"class":58},[52,44365,44366,44368,44370],{"class":54,"line":80},[52,44367,83],{"class":58},[52,44369,44332],{"class":62},[52,44371,77],{"class":58},[52,44373,44374,44376,44378],{"class":54,"line":108},[52,44375,2213],{"class":58},[52,44377,2216],{"class":62},[52,44379,105],{"class":58},[52,44381,44382,44384,44386],{"class":54,"line":118},[52,44383,2230],{"class":58},[52,44385,44332],{"class":62},[52,44387,77],{"class":58},[52,44389,44390,44392,44394],{"class":54,"line":594},[52,44391,121],{"class":58},[52,44393,63],{"class":62},[52,44395,77],{"class":58},[43,44397,44398],{"className":360,"code":44353,"language":362,"meta":48,"style":48},[31,44399,44400,44408,44416,44424,44432],{"__ignoreMap":48},[52,44401,44402,44404,44406],{"class":54,"line":55},[52,44403,59],{"class":58},[52,44405,63],{"class":371},[52,44407,77],{"class":58},[52,44409,44410,44412,44414],{"class":54,"line":80},[52,44411,83],{"class":58},[52,44413,44332],{"class":371},[52,44415,77],{"class":58},[52,44417,44418,44420,44422],{"class":54,"line":108},[52,44419,2213],{"class":58},[52,44421,2216],{"class":371},[52,44423,105],{"class":58},[52,44425,44426,44428,44430],{"class":54,"line":118},[52,44427,2230],{"class":58},[52,44429,44332],{"class":371},[52,44431,77],{"class":58},[52,44433,44434,44436,44438],{"class":54,"line":594},[52,44435,121],{"class":58},[52,44437,63],{"class":371},[52,44439,77],{"class":58},[43,44441,44442],{"className":2507,"code":44353,"language":2509,"meta":48,"style":48},[31,44443,44444,44452,44460,44468,44476],{"__ignoreMap":48},[52,44445,44446,44448,44450],{"class":54,"line":55},[52,44447,59],{"class":58},[52,44449,63],{"class":371},[52,44451,77],{"class":58},[52,44453,44454,44456,44458],{"class":54,"line":80},[52,44455,83],{"class":58},[52,44457,44332],{"class":371},[52,44459,77],{"class":58},[52,44461,44462,44464,44466],{"class":54,"line":108},[52,44463,2213],{"class":58},[52,44465,2216],{"class":371},[52,44467,105],{"class":58},[52,44469,44470,44472,44474],{"class":54,"line":118},[52,44471,2230],{"class":58},[52,44473,44332],{"class":371},[52,44475,77],{"class":58},[52,44477,44478,44480,44482],{"class":54,"line":594},[52,44479,121],{"class":58},[52,44481,63],{"class":371},[52,44483,77],{"class":58},[43,44485,44486],{"className":419,"code":44353,"language":420,"meta":48,"style":48},[31,44487,44488,44496,44504,44512,44520],{"__ignoreMap":48},[52,44489,44490,44492,44494],{"class":54,"line":55},[52,44491,59],{"class":58},[52,44493,63],{"class":371},[52,44495,77],{"class":58},[52,44497,44498,44500,44502],{"class":54,"line":80},[52,44499,83],{"class":58},[52,44501,44332],{"class":371},[52,44503,77],{"class":58},[52,44505,44506,44508,44510],{"class":54,"line":108},[52,44507,2213],{"class":58},[52,44509,2216],{"class":371},[52,44511,105],{"class":58},[52,44513,44514,44516,44518],{"class":54,"line":118},[52,44515,2230],{"class":58},[52,44517,44332],{"class":371},[52,44519,77],{"class":58},[52,44521,44522,44524,44526],{"class":54,"line":594},[52,44523,121],{"class":58},[52,44525,63],{"class":371},[52,44527,77],{"class":58},[43,44529,44531],{"className":222,"code":44530,"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,44532,44533,44543,44547,44561,44565,44574,44582,44586,44590],{"__ignoreMap":48},[52,44534,44535,44537,44539,44541],{"class":54,"line":55},[52,44536,232],{"class":231},[52,44538,9231],{"class":58},[52,44540,238],{"class":231},[52,44542,9236],{"class":73},[52,44544,44545],{"class":54,"line":80},[52,44546,597],{"emptyLinePlaceholder":171},[52,44548,44549,44551,44553,44555,44557,44559],{"class":54,"line":108},[52,44550,1721],{"class":231},[52,44552,1724],{"class":371},[52,44554,1727],{"class":231},[52,44556,1730],{"class":231},[52,44558,1733],{"class":66},[52,44560,1736],{"class":58},[52,44562,44563],{"class":54,"line":118},[52,44564,1751],{"class":58},[52,44566,44567,44569,44572],{"class":54,"line":594},[52,44568,1756],{"class":58},[52,44570,44571],{"class":73},"'Mirror'",[52,44573,4722],{"class":58},[52,44575,44576,44578,44580],{"class":54,"line":600},[52,44577,4727],{"class":58},[52,44579,2869],{"class":73},[52,44581,2129],{"class":58},[52,44583,44584],{"class":54,"line":606},[52,44585,4744],{"class":58},[52,44587,44588],{"class":54,"line":653},[52,44589,1773],{"class":58},[52,44591,44592],{"class":54,"line":662},[52,44593,1778],{"class":58},[156,44595,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44597},[44598,44599],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/mirror",{"title":44332,"description":44339},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":44606,"title":44607,"body":44608,"category":27760,"componentType":20842,"description":44615,"extension":168,"meta":44800,"navigation":171,"path":44801,"requiresChild":27763,"seo":44802,"stem":44803,"__hash__":44804},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":44609,"toc":44796},[44610,44613,44616,44618,44620,44623,44625,44794],[11,44611,44607],{"id":44612},"multipointgradient",[15,44614,44615],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26901,44617],{"component":44607},[23,44619,26905],{"id":21503},[26907,44621],{":props":44622},"[{\"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,44624,26913],{"id":26912},[217,44626,44627,44656,44684,44712,44740],{":tabs":1543},[43,44628,44630],{"className":45,"code":44629,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,44631,44632,44640,44648],{"__ignoreMap":48},[52,44633,44634,44636,44638],{"class":54,"line":55},[52,44635,59],{"class":58},[52,44637,63],{"class":62},[52,44639,77],{"class":58},[52,44641,44642,44644,44646],{"class":54,"line":80},[52,44643,83],{"class":58},[52,44645,44607],{"class":62},[52,44647,105],{"class":58},[52,44649,44650,44652,44654],{"class":54,"line":108},[52,44651,121],{"class":58},[52,44653,63],{"class":62},[52,44655,77],{"class":58},[43,44657,44658],{"className":360,"code":44629,"language":362,"meta":48,"style":48},[31,44659,44660,44668,44676],{"__ignoreMap":48},[52,44661,44662,44664,44666],{"class":54,"line":55},[52,44663,59],{"class":58},[52,44665,63],{"class":371},[52,44667,77],{"class":58},[52,44669,44670,44672,44674],{"class":54,"line":80},[52,44671,83],{"class":58},[52,44673,44607],{"class":371},[52,44675,105],{"class":58},[52,44677,44678,44680,44682],{"class":54,"line":108},[52,44679,121],{"class":58},[52,44681,63],{"class":371},[52,44683,77],{"class":58},[43,44685,44686],{"className":2507,"code":44629,"language":2509,"meta":48,"style":48},[31,44687,44688,44696,44704],{"__ignoreMap":48},[52,44689,44690,44692,44694],{"class":54,"line":55},[52,44691,59],{"class":58},[52,44693,63],{"class":371},[52,44695,77],{"class":58},[52,44697,44698,44700,44702],{"class":54,"line":80},[52,44699,83],{"class":58},[52,44701,44607],{"class":371},[52,44703,105],{"class":58},[52,44705,44706,44708,44710],{"class":54,"line":108},[52,44707,121],{"class":58},[52,44709,63],{"class":371},[52,44711,77],{"class":58},[43,44713,44714],{"className":419,"code":44629,"language":420,"meta":48,"style":48},[31,44715,44716,44724,44732],{"__ignoreMap":48},[52,44717,44718,44720,44722],{"class":54,"line":55},[52,44719,59],{"class":58},[52,44721,63],{"class":371},[52,44723,77],{"class":58},[52,44725,44726,44728,44730],{"class":54,"line":80},[52,44727,83],{"class":58},[52,44729,44607],{"class":371},[52,44731,105],{"class":58},[52,44733,44734,44736,44738],{"class":54,"line":108},[52,44735,121],{"class":58},[52,44737,63],{"class":371},[52,44739,77],{"class":58},[43,44741,44743],{"className":222,"code":44742,"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,44744,44745,44755,44759,44773,44777,44786,44790],{"__ignoreMap":48},[52,44746,44747,44749,44751,44753],{"class":54,"line":55},[52,44748,232],{"class":231},[52,44750,9231],{"class":58},[52,44752,238],{"class":231},[52,44754,9236],{"class":73},[52,44756,44757],{"class":54,"line":80},[52,44758,597],{"emptyLinePlaceholder":171},[52,44760,44761,44763,44765,44767,44769,44771],{"class":54,"line":108},[52,44762,1721],{"class":231},[52,44764,1724],{"class":371},[52,44766,1727],{"class":231},[52,44768,1730],{"class":231},[52,44770,1733],{"class":66},[52,44772,1736],{"class":58},[52,44774,44775],{"class":54,"line":118},[52,44776,1751],{"class":58},[52,44778,44779,44781,44784],{"class":54,"line":594},[52,44780,1756],{"class":58},[52,44782,44783],{"class":73},"'MultiPointGradient'",[52,44785,2129],{"class":58},[52,44787,44788],{"class":54,"line":600},[52,44789,1773],{"class":58},[52,44791,44792],{"class":54,"line":606},[52,44793,1778],{"class":58},[156,44795,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44797},[44798,44799],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/multipointgradient",{"title":44607,"description":44615},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":44806,"title":18477,"body":44807,"category":33330,"componentType":20842,"description":44814,"extension":168,"meta":45093,"navigation":171,"path":45094,"requiresChild":27763,"seo":45095,"stem":45096,"__hash__":45097},"components/docs/components/Neon.md",{"type":8,"value":44808,"toc":45089},[44809,44812,44815,44817,44819,44822,44824,45087],[11,44810,18477],{"id":44811},"neon",[15,44813,44814],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26901,44816],{"component":18477},[23,44818,26905],{"id":21503},[26907,44820],{":props":44821},"[{\"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,44823,26913],{"id":26912},[217,44825,44826,44876,44927,44975,45025],{":tabs":1543},[43,44827,44829],{"className":45,"code":44828,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,44830,44831,44839,44846,44855,44864,44868],{"__ignoreMap":48},[52,44832,44833,44835,44837],{"class":54,"line":55},[52,44834,59],{"class":58},[52,44836,63],{"class":62},[52,44838,77],{"class":58},[52,44840,44841,44843],{"class":54,"line":80},[52,44842,83],{"class":58},[52,44844,44845],{"class":62},"Neon\n",[52,44847,44848,44850,44852],{"class":54,"line":108},[52,44849,7351],{"class":66},[52,44851,70],{"class":58},[52,44853,44854],{"class":73},"\"#00ddff\"\n",[52,44856,44857,44859,44861],{"class":54,"line":118},[52,44858,17870],{"class":66},[52,44860,70],{"class":58},[52,44862,44863],{"class":73},"\"1.5\"\n",[52,44865,44866],{"class":54,"line":594},[52,44867,1224],{"class":58},[52,44869,44870,44872,44874],{"class":54,"line":600},[52,44871,121],{"class":58},[52,44873,63],{"class":62},[52,44875,77],{"class":58},[43,44877,44879],{"className":360,"code":44878,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,44880,44881,44889,44895,44903,44915,44919],{"__ignoreMap":48},[52,44882,44883,44885,44887],{"class":54,"line":55},[52,44884,59],{"class":58},[52,44886,63],{"class":371},[52,44888,77],{"class":58},[52,44890,44891,44893],{"class":54,"line":80},[52,44892,83],{"class":58},[52,44894,44845],{"class":371},[52,44896,44897,44899,44901],{"class":54,"line":108},[52,44898,7351],{"class":66},[52,44900,70],{"class":231},[52,44902,44854],{"class":73},[52,44904,44905,44907,44909,44911,44913],{"class":54,"line":118},[52,44906,17981],{"class":66},[52,44908,70],{"class":231},[52,44910,723],{"class":58},[52,44912,13171],{"class":371},[52,44914,729],{"class":58},[52,44916,44917],{"class":54,"line":594},[52,44918,1224],{"class":58},[52,44920,44921,44923,44925],{"class":54,"line":600},[52,44922,121],{"class":58},[52,44924,63],{"class":371},[52,44926,77],{"class":58},[43,44928,44929],{"className":2507,"code":44878,"language":2509,"meta":48,"style":48},[31,44930,44931,44939,44945,44953,44963,44967],{"__ignoreMap":48},[52,44932,44933,44935,44937],{"class":54,"line":55},[52,44934,59],{"class":58},[52,44936,63],{"class":371},[52,44938,77],{"class":58},[52,44940,44941,44943],{"class":54,"line":80},[52,44942,83],{"class":58},[52,44944,44845],{"class":371},[52,44946,44947,44949,44951],{"class":54,"line":108},[52,44948,7351],{"class":66},[52,44950,70],{"class":58},[52,44952,44854],{"class":73},[52,44954,44955,44957,44959,44961],{"class":54,"line":118},[52,44956,17981],{"class":66},[52,44958,24845],{"class":58},[52,44960,13171],{"class":371},[52,44962,729],{"class":58},[52,44964,44965],{"class":54,"line":594},[52,44966,1224],{"class":58},[52,44968,44969,44971,44973],{"class":54,"line":600},[52,44970,121],{"class":58},[52,44972,63],{"class":371},[52,44974,77],{"class":58},[43,44976,44977],{"className":419,"code":44878,"language":420,"meta":48,"style":48},[31,44978,44979,44987,44993,45001,45013,45017],{"__ignoreMap":48},[52,44980,44981,44983,44985],{"class":54,"line":55},[52,44982,59],{"class":58},[52,44984,63],{"class":371},[52,44986,77],{"class":58},[52,44988,44989,44991],{"class":54,"line":80},[52,44990,83],{"class":58},[52,44992,44845],{"class":371},[52,44994,44995,44997,44999],{"class":54,"line":108},[52,44996,7351],{"class":66},[52,44998,70],{"class":231},[52,45000,44854],{"class":73},[52,45002,45003,45005,45007,45009,45011],{"class":54,"line":118},[52,45004,17981],{"class":66},[52,45006,70],{"class":231},[52,45008,723],{"class":58},[52,45010,13171],{"class":371},[52,45012,729],{"class":58},[52,45014,45015],{"class":54,"line":594},[52,45016,1224],{"class":58},[52,45018,45019,45021,45023],{"class":54,"line":600},[52,45020,121],{"class":58},[52,45022,63],{"class":371},[52,45024,77],{"class":58},[43,45026,45028],{"className":222,"code":45027,"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,45029,45030,45040,45044,45058,45062,45079,45083],{"__ignoreMap":48},[52,45031,45032,45034,45036,45038],{"class":54,"line":55},[52,45033,232],{"class":231},[52,45035,9231],{"class":58},[52,45037,238],{"class":231},[52,45039,9236],{"class":73},[52,45041,45042],{"class":54,"line":80},[52,45043,597],{"emptyLinePlaceholder":171},[52,45045,45046,45048,45050,45052,45054,45056],{"class":54,"line":108},[52,45047,1721],{"class":231},[52,45049,1724],{"class":371},[52,45051,1727],{"class":231},[52,45053,1730],{"class":231},[52,45055,1733],{"class":66},[52,45057,1736],{"class":58},[52,45059,45060],{"class":54,"line":118},[52,45061,1751],{"class":58},[52,45063,45064,45066,45068,45070,45073,45075,45077],{"class":54,"line":594},[52,45065,1756],{"class":58},[52,45067,19069],{"class":73},[52,45069,1762],{"class":58},[52,45071,45072],{"class":73},"'#00ddff'",[52,45074,35555],{"class":58},[52,45076,13171],{"class":371},[52,45078,1768],{"class":58},[52,45080,45081],{"class":54,"line":600},[52,45082,1773],{"class":58},[52,45084,45085],{"class":54,"line":606},[52,45086,1778],{"class":58},[156,45088,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45090},[45091,45092],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/neon",{"title":18477,"description":44814},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":45099,"title":45100,"body":45101,"category":27503,"componentType":20848,"description":45108,"extension":168,"meta":45369,"navigation":171,"path":45370,"requiresChild":171,"seo":45371,"stem":45372,"__hash__":45373},"components/docs/components/Paper.md","Paper",{"type":8,"value":45102,"toc":45365},[45103,45106,45109,45111,45113,45116,45118,45363],[11,45104,45100],{"id":45105},"paper",[15,45107,45108],{},"Applies realistic paper grain and surface roughness to child content",[26901,45110],{"component":45100},[23,45112,26905],{"id":21503},[26907,45114],{":props":45115},"[{\"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,45117,26913],{"id":26912},[217,45119,45120,45165,45209,45253,45297],{":tabs":1543},[43,45121,45123],{"className":45,"code":45122,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,45124,45125,45133,45141,45149,45157],{"__ignoreMap":48},[52,45126,45127,45129,45131],{"class":54,"line":55},[52,45128,59],{"class":58},[52,45130,63],{"class":62},[52,45132,77],{"class":58},[52,45134,45135,45137,45139],{"class":54,"line":80},[52,45136,83],{"class":58},[52,45138,45100],{"class":62},[52,45140,77],{"class":58},[52,45142,45143,45145,45147],{"class":54,"line":108},[52,45144,2213],{"class":58},[52,45146,2216],{"class":62},[52,45148,105],{"class":58},[52,45150,45151,45153,45155],{"class":54,"line":118},[52,45152,2230],{"class":58},[52,45154,45100],{"class":62},[52,45156,77],{"class":58},[52,45158,45159,45161,45163],{"class":54,"line":594},[52,45160,121],{"class":58},[52,45162,63],{"class":62},[52,45164,77],{"class":58},[43,45166,45167],{"className":360,"code":45122,"language":362,"meta":48,"style":48},[31,45168,45169,45177,45185,45193,45201],{"__ignoreMap":48},[52,45170,45171,45173,45175],{"class":54,"line":55},[52,45172,59],{"class":58},[52,45174,63],{"class":371},[52,45176,77],{"class":58},[52,45178,45179,45181,45183],{"class":54,"line":80},[52,45180,83],{"class":58},[52,45182,45100],{"class":371},[52,45184,77],{"class":58},[52,45186,45187,45189,45191],{"class":54,"line":108},[52,45188,2213],{"class":58},[52,45190,2216],{"class":371},[52,45192,105],{"class":58},[52,45194,45195,45197,45199],{"class":54,"line":118},[52,45196,2230],{"class":58},[52,45198,45100],{"class":371},[52,45200,77],{"class":58},[52,45202,45203,45205,45207],{"class":54,"line":594},[52,45204,121],{"class":58},[52,45206,63],{"class":371},[52,45208,77],{"class":58},[43,45210,45211],{"className":2507,"code":45122,"language":2509,"meta":48,"style":48},[31,45212,45213,45221,45229,45237,45245],{"__ignoreMap":48},[52,45214,45215,45217,45219],{"class":54,"line":55},[52,45216,59],{"class":58},[52,45218,63],{"class":371},[52,45220,77],{"class":58},[52,45222,45223,45225,45227],{"class":54,"line":80},[52,45224,83],{"class":58},[52,45226,45100],{"class":371},[52,45228,77],{"class":58},[52,45230,45231,45233,45235],{"class":54,"line":108},[52,45232,2213],{"class":58},[52,45234,2216],{"class":371},[52,45236,105],{"class":58},[52,45238,45239,45241,45243],{"class":54,"line":118},[52,45240,2230],{"class":58},[52,45242,45100],{"class":371},[52,45244,77],{"class":58},[52,45246,45247,45249,45251],{"class":54,"line":594},[52,45248,121],{"class":58},[52,45250,63],{"class":371},[52,45252,77],{"class":58},[43,45254,45255],{"className":419,"code":45122,"language":420,"meta":48,"style":48},[31,45256,45257,45265,45273,45281,45289],{"__ignoreMap":48},[52,45258,45259,45261,45263],{"class":54,"line":55},[52,45260,59],{"class":58},[52,45262,63],{"class":371},[52,45264,77],{"class":58},[52,45266,45267,45269,45271],{"class":54,"line":80},[52,45268,83],{"class":58},[52,45270,45100],{"class":371},[52,45272,77],{"class":58},[52,45274,45275,45277,45279],{"class":54,"line":108},[52,45276,2213],{"class":58},[52,45278,2216],{"class":371},[52,45280,105],{"class":58},[52,45282,45283,45285,45287],{"class":54,"line":118},[52,45284,2230],{"class":58},[52,45286,45100],{"class":371},[52,45288,77],{"class":58},[52,45290,45291,45293,45295],{"class":54,"line":594},[52,45292,121],{"class":58},[52,45294,63],{"class":371},[52,45296,77],{"class":58},[43,45298,45300],{"className":222,"code":45299,"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,45301,45302,45312,45316,45330,45334,45343,45351,45355,45359],{"__ignoreMap":48},[52,45303,45304,45306,45308,45310],{"class":54,"line":55},[52,45305,232],{"class":231},[52,45307,9231],{"class":58},[52,45309,238],{"class":231},[52,45311,9236],{"class":73},[52,45313,45314],{"class":54,"line":80},[52,45315,597],{"emptyLinePlaceholder":171},[52,45317,45318,45320,45322,45324,45326,45328],{"class":54,"line":108},[52,45319,1721],{"class":231},[52,45321,1724],{"class":371},[52,45323,1727],{"class":231},[52,45325,1730],{"class":231},[52,45327,1733],{"class":66},[52,45329,1736],{"class":58},[52,45331,45332],{"class":54,"line":118},[52,45333,1751],{"class":58},[52,45335,45336,45338,45341],{"class":54,"line":594},[52,45337,1756],{"class":58},[52,45339,45340],{"class":73},"'Paper'",[52,45342,4722],{"class":58},[52,45344,45345,45347,45349],{"class":54,"line":600},[52,45346,4727],{"class":58},[52,45348,2869],{"class":73},[52,45350,2129],{"class":58},[52,45352,45353],{"class":54,"line":606},[52,45354,4744],{"class":58},[52,45356,45357],{"class":54,"line":653},[52,45358,1773],{"class":58},[52,45360,45361],{"class":54,"line":662},[52,45362,1778],{"class":58},[156,45364,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":45366},[45367,45368],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/paper",{"title":45100,"description":45108},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":45375,"title":45376,"body":45377,"category":28094,"componentType":20848,"description":45384,"extension":168,"meta":45645,"navigation":171,"path":45646,"requiresChild":171,"seo":45647,"stem":45648,"__hash__":45649},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":45378,"toc":45641},[45379,45382,45385,45387,45389,45392,45394,45639],[11,45380,45376],{"id":45381},"perspective",[15,45383,45384],{},"Rotate the plane in 3D space with pan and tilt",[26901,45386],{"component":45376},[23,45388,26905],{"id":21503},[26907,45390],{":props":45391},"[{\"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,45393,26913],{"id":26912},[217,45395,45396,45441,45485,45529,45573],{":tabs":1543},[43,45397,45399],{"className":45,"code":45398,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[31,45400,45401,45409,45417,45425,45433],{"__ignoreMap":48},[52,45402,45403,45405,45407],{"class":54,"line":55},[52,45404,59],{"class":58},[52,45406,63],{"class":62},[52,45408,77],{"class":58},[52,45410,45411,45413,45415],{"class":54,"line":80},[52,45412,83],{"class":58},[52,45414,45376],{"class":62},[52,45416,77],{"class":58},[52,45418,45419,45421,45423],{"class":54,"line":108},[52,45420,2213],{"class":58},[52,45422,2216],{"class":62},[52,45424,105],{"class":58},[52,45426,45427,45429,45431],{"class":54,"line":118},[52,45428,2230],{"class":58},[52,45430,45376],{"class":62},[52,45432,77],{"class":58},[52,45434,45435,45437,45439],{"class":54,"line":594},[52,45436,121],{"class":58},[52,45438,63],{"class":62},[52,45440,77],{"class":58},[43,45442,45443],{"className":360,"code":45398,"language":362,"meta":48,"style":48},[31,45444,45445,45453,45461,45469,45477],{"__ignoreMap":48},[52,45446,45447,45449,45451],{"class":54,"line":55},[52,45448,59],{"class":58},[52,45450,63],{"class":371},[52,45452,77],{"class":58},[52,45454,45455,45457,45459],{"class":54,"line":80},[52,45456,83],{"class":58},[52,45458,45376],{"class":371},[52,45460,77],{"class":58},[52,45462,45463,45465,45467],{"class":54,"line":108},[52,45464,2213],{"class":58},[52,45466,2216],{"class":371},[52,45468,105],{"class":58},[52,45470,45471,45473,45475],{"class":54,"line":118},[52,45472,2230],{"class":58},[52,45474,45376],{"class":371},[52,45476,77],{"class":58},[52,45478,45479,45481,45483],{"class":54,"line":594},[52,45480,121],{"class":58},[52,45482,63],{"class":371},[52,45484,77],{"class":58},[43,45486,45487],{"className":2507,"code":45398,"language":2509,"meta":48,"style":48},[31,45488,45489,45497,45505,45513,45521],{"__ignoreMap":48},[52,45490,45491,45493,45495],{"class":54,"line":55},[52,45492,59],{"class":58},[52,45494,63],{"class":371},[52,45496,77],{"class":58},[52,45498,45499,45501,45503],{"class":54,"line":80},[52,45500,83],{"class":58},[52,45502,45376],{"class":371},[52,45504,77],{"class":58},[52,45506,45507,45509,45511],{"class":54,"line":108},[52,45508,2213],{"class":58},[52,45510,2216],{"class":371},[52,45512,105],{"class":58},[52,45514,45515,45517,45519],{"class":54,"line":118},[52,45516,2230],{"class":58},[52,45518,45376],{"class":371},[52,45520,77],{"class":58},[52,45522,45523,45525,45527],{"class":54,"line":594},[52,45524,121],{"class":58},[52,45526,63],{"class":371},[52,45528,77],{"class":58},[43,45530,45531],{"className":419,"code":45398,"language":420,"meta":48,"style":48},[31,45532,45533,45541,45549,45557,45565],{"__ignoreMap":48},[52,45534,45535,45537,45539],{"class":54,"line":55},[52,45536,59],{"class":58},[52,45538,63],{"class":371},[52,45540,77],{"class":58},[52,45542,45543,45545,45547],{"class":54,"line":80},[52,45544,83],{"class":58},[52,45546,45376],{"class":371},[52,45548,77],{"class":58},[52,45550,45551,45553,45555],{"class":54,"line":108},[52,45552,2213],{"class":58},[52,45554,2216],{"class":371},[52,45556,105],{"class":58},[52,45558,45559,45561,45563],{"class":54,"line":118},[52,45560,2230],{"class":58},[52,45562,45376],{"class":371},[52,45564,77],{"class":58},[52,45566,45567,45569,45571],{"class":54,"line":594},[52,45568,121],{"class":58},[52,45570,63],{"class":371},[52,45572,77],{"class":58},[43,45574,45576],{"className":222,"code":45575,"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,45577,45578,45588,45592,45606,45610,45619,45627,45631,45635],{"__ignoreMap":48},[52,45579,45580,45582,45584,45586],{"class":54,"line":55},[52,45581,232],{"class":231},[52,45583,9231],{"class":58},[52,45585,238],{"class":231},[52,45587,9236],{"class":73},[52,45589,45590],{"class":54,"line":80},[52,45591,597],{"emptyLinePlaceholder":171},[52,45593,45594,45596,45598,45600,45602,45604],{"class":54,"line":108},[52,45595,1721],{"class":231},[52,45597,1724],{"class":371},[52,45599,1727],{"class":231},[52,45601,1730],{"class":231},[52,45603,1733],{"class":66},[52,45605,1736],{"class":58},[52,45607,45608],{"class":54,"line":118},[52,45609,1751],{"class":58},[52,45611,45612,45614,45617],{"class":54,"line":594},[52,45613,1756],{"class":58},[52,45615,45616],{"class":73},"'Perspective'",[52,45618,4722],{"class":58},[52,45620,45621,45623,45625],{"class":54,"line":600},[52,45622,4727],{"class":58},[52,45624,2869],{"class":73},[52,45626,2129],{"class":58},[52,45628,45629],{"class":54,"line":606},[52,45630,4744],{"class":58},[52,45632,45633],{"class":54,"line":653},[52,45634,1773],{"class":58},[52,45636,45637],{"class":54,"line":662},[52,45638,1778],{"class":58},[156,45640,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":45642},[45643,45644],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/perspective",{"title":45376,"description":45384},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":45651,"title":45652,"body":45653,"category":27503,"componentType":20848,"description":45660,"extension":168,"meta":45921,"navigation":171,"path":45922,"requiresChild":171,"seo":45923,"stem":45924,"__hash__":45925},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":45654,"toc":45917},[45655,45658,45661,45663,45665,45668,45670,45915],[11,45656,45652],{"id":45657},"pixelate",[15,45659,45660],{},"Pixelation effect with adjustable cell size",[26901,45662],{"component":45652},[23,45664,26905],{"id":21503},[26907,45666],{":props":45667},"[{\"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,45669,26913],{"id":26912},[217,45671,45672,45717,45761,45805,45849],{":tabs":1543},[43,45673,45675],{"className":45,"code":45674,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[31,45676,45677,45685,45693,45701,45709],{"__ignoreMap":48},[52,45678,45679,45681,45683],{"class":54,"line":55},[52,45680,59],{"class":58},[52,45682,63],{"class":62},[52,45684,77],{"class":58},[52,45686,45687,45689,45691],{"class":54,"line":80},[52,45688,83],{"class":58},[52,45690,45652],{"class":62},[52,45692,77],{"class":58},[52,45694,45695,45697,45699],{"class":54,"line":108},[52,45696,2213],{"class":58},[52,45698,2216],{"class":62},[52,45700,105],{"class":58},[52,45702,45703,45705,45707],{"class":54,"line":118},[52,45704,2230],{"class":58},[52,45706,45652],{"class":62},[52,45708,77],{"class":58},[52,45710,45711,45713,45715],{"class":54,"line":594},[52,45712,121],{"class":58},[52,45714,63],{"class":62},[52,45716,77],{"class":58},[43,45718,45719],{"className":360,"code":45674,"language":362,"meta":48,"style":48},[31,45720,45721,45729,45737,45745,45753],{"__ignoreMap":48},[52,45722,45723,45725,45727],{"class":54,"line":55},[52,45724,59],{"class":58},[52,45726,63],{"class":371},[52,45728,77],{"class":58},[52,45730,45731,45733,45735],{"class":54,"line":80},[52,45732,83],{"class":58},[52,45734,45652],{"class":371},[52,45736,77],{"class":58},[52,45738,45739,45741,45743],{"class":54,"line":108},[52,45740,2213],{"class":58},[52,45742,2216],{"class":371},[52,45744,105],{"class":58},[52,45746,45747,45749,45751],{"class":54,"line":118},[52,45748,2230],{"class":58},[52,45750,45652],{"class":371},[52,45752,77],{"class":58},[52,45754,45755,45757,45759],{"class":54,"line":594},[52,45756,121],{"class":58},[52,45758,63],{"class":371},[52,45760,77],{"class":58},[43,45762,45763],{"className":2507,"code":45674,"language":2509,"meta":48,"style":48},[31,45764,45765,45773,45781,45789,45797],{"__ignoreMap":48},[52,45766,45767,45769,45771],{"class":54,"line":55},[52,45768,59],{"class":58},[52,45770,63],{"class":371},[52,45772,77],{"class":58},[52,45774,45775,45777,45779],{"class":54,"line":80},[52,45776,83],{"class":58},[52,45778,45652],{"class":371},[52,45780,77],{"class":58},[52,45782,45783,45785,45787],{"class":54,"line":108},[52,45784,2213],{"class":58},[52,45786,2216],{"class":371},[52,45788,105],{"class":58},[52,45790,45791,45793,45795],{"class":54,"line":118},[52,45792,2230],{"class":58},[52,45794,45652],{"class":371},[52,45796,77],{"class":58},[52,45798,45799,45801,45803],{"class":54,"line":594},[52,45800,121],{"class":58},[52,45802,63],{"class":371},[52,45804,77],{"class":58},[43,45806,45807],{"className":419,"code":45674,"language":420,"meta":48,"style":48},[31,45808,45809,45817,45825,45833,45841],{"__ignoreMap":48},[52,45810,45811,45813,45815],{"class":54,"line":55},[52,45812,59],{"class":58},[52,45814,63],{"class":371},[52,45816,77],{"class":58},[52,45818,45819,45821,45823],{"class":54,"line":80},[52,45820,83],{"class":58},[52,45822,45652],{"class":371},[52,45824,77],{"class":58},[52,45826,45827,45829,45831],{"class":54,"line":108},[52,45828,2213],{"class":58},[52,45830,2216],{"class":371},[52,45832,105],{"class":58},[52,45834,45835,45837,45839],{"class":54,"line":118},[52,45836,2230],{"class":58},[52,45838,45652],{"class":371},[52,45840,77],{"class":58},[52,45842,45843,45845,45847],{"class":54,"line":594},[52,45844,121],{"class":58},[52,45846,63],{"class":371},[52,45848,77],{"class":58},[43,45850,45852],{"className":222,"code":45851,"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,45853,45854,45864,45868,45882,45886,45895,45903,45907,45911],{"__ignoreMap":48},[52,45855,45856,45858,45860,45862],{"class":54,"line":55},[52,45857,232],{"class":231},[52,45859,9231],{"class":58},[52,45861,238],{"class":231},[52,45863,9236],{"class":73},[52,45865,45866],{"class":54,"line":80},[52,45867,597],{"emptyLinePlaceholder":171},[52,45869,45870,45872,45874,45876,45878,45880],{"class":54,"line":108},[52,45871,1721],{"class":231},[52,45873,1724],{"class":371},[52,45875,1727],{"class":231},[52,45877,1730],{"class":231},[52,45879,1733],{"class":66},[52,45881,1736],{"class":58},[52,45883,45884],{"class":54,"line":118},[52,45885,1751],{"class":58},[52,45887,45888,45890,45893],{"class":54,"line":594},[52,45889,1756],{"class":58},[52,45891,45892],{"class":73},"'Pixelate'",[52,45894,4722],{"class":58},[52,45896,45897,45899,45901],{"class":54,"line":600},[52,45898,4727],{"class":58},[52,45900,2869],{"class":73},[52,45902,2129],{"class":58},[52,45904,45905],{"class":54,"line":606},[52,45906,4744],{"class":58},[52,45908,45909],{"class":54,"line":653},[52,45910,1773],{"class":58},[52,45912,45913],{"class":54,"line":662},[52,45914,1778],{"class":58},[156,45916,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":45918},[45919,45920],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/pixelate",{"title":45652,"description":45660},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":45927,"title":10788,"body":45928,"category":27760,"componentType":20842,"description":45935,"extension":168,"meta":46176,"navigation":171,"path":46177,"requiresChild":27763,"seo":46178,"stem":46179,"__hash__":46180},"components/docs/components/Plasma.md",{"type":8,"value":45929,"toc":46172},[45930,45933,45936,45938,45940,45943,45945,46170],[11,45931,10788],{"id":45932},"plasma",[15,45934,45935],{},"Animated effect of glowing plasma",[26901,45937],{"component":10788},[23,45939,26905],{"id":21503},[26907,45941],{":props":45942},"[{\"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,45944,26913],{"id":26912},[217,45946,45947,45987,46030,46070,46112],{":tabs":1543},[43,45948,45950],{"className":45,"code":45949,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,45951,45952,45960,45967,45975,45979],{"__ignoreMap":48},[52,45953,45954,45956,45958],{"class":54,"line":55},[52,45955,59],{"class":58},[52,45957,63],{"class":62},[52,45959,77],{"class":58},[52,45961,45962,45964],{"class":54,"line":80},[52,45963,83],{"class":58},[52,45965,45966],{"class":62},"Plasma\n",[52,45968,45969,45971,45973],{"class":54,"line":108},[52,45970,17870],{"class":66},[52,45972,70],{"class":58},[52,45974,44863],{"class":73},[52,45976,45977],{"class":54,"line":118},[52,45978,1224],{"class":58},[52,45980,45981,45983,45985],{"class":54,"line":594},[52,45982,121],{"class":58},[52,45984,63],{"class":62},[52,45986,77],{"class":58},[43,45988,45990],{"className":360,"code":45989,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,45991,45992,46000,46006,46018,46022],{"__ignoreMap":48},[52,45993,45994,45996,45998],{"class":54,"line":55},[52,45995,59],{"class":58},[52,45997,63],{"class":371},[52,45999,77],{"class":58},[52,46001,46002,46004],{"class":54,"line":80},[52,46003,83],{"class":58},[52,46005,45966],{"class":371},[52,46007,46008,46010,46012,46014,46016],{"class":54,"line":108},[52,46009,17981],{"class":66},[52,46011,70],{"class":231},[52,46013,723],{"class":58},[52,46015,13171],{"class":371},[52,46017,729],{"class":58},[52,46019,46020],{"class":54,"line":118},[52,46021,1224],{"class":58},[52,46023,46024,46026,46028],{"class":54,"line":594},[52,46025,121],{"class":58},[52,46027,63],{"class":371},[52,46029,77],{"class":58},[43,46031,46032],{"className":2507,"code":45989,"language":2509,"meta":48,"style":48},[31,46033,46034,46042,46048,46058,46062],{"__ignoreMap":48},[52,46035,46036,46038,46040],{"class":54,"line":55},[52,46037,59],{"class":58},[52,46039,63],{"class":371},[52,46041,77],{"class":58},[52,46043,46044,46046],{"class":54,"line":80},[52,46045,83],{"class":58},[52,46047,45966],{"class":371},[52,46049,46050,46052,46054,46056],{"class":54,"line":108},[52,46051,17981],{"class":66},[52,46053,24845],{"class":58},[52,46055,13171],{"class":371},[52,46057,729],{"class":58},[52,46059,46060],{"class":54,"line":118},[52,46061,1224],{"class":58},[52,46063,46064,46066,46068],{"class":54,"line":594},[52,46065,121],{"class":58},[52,46067,63],{"class":371},[52,46069,77],{"class":58},[43,46071,46072],{"className":419,"code":45989,"language":420,"meta":48,"style":48},[31,46073,46074,46082,46088,46100,46104],{"__ignoreMap":48},[52,46075,46076,46078,46080],{"class":54,"line":55},[52,46077,59],{"class":58},[52,46079,63],{"class":371},[52,46081,77],{"class":58},[52,46083,46084,46086],{"class":54,"line":80},[52,46085,83],{"class":58},[52,46087,45966],{"class":371},[52,46089,46090,46092,46094,46096,46098],{"class":54,"line":108},[52,46091,17981],{"class":66},[52,46093,70],{"class":231},[52,46095,723],{"class":58},[52,46097,13171],{"class":371},[52,46099,729],{"class":58},[52,46101,46102],{"class":54,"line":118},[52,46103,1224],{"class":58},[52,46105,46106,46108,46110],{"class":54,"line":594},[52,46107,121],{"class":58},[52,46109,63],{"class":371},[52,46111,77],{"class":58},[43,46113,46115],{"className":222,"code":46114,"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,46116,46117,46127,46131,46145,46149,46162,46166],{"__ignoreMap":48},[52,46118,46119,46121,46123,46125],{"class":54,"line":55},[52,46120,232],{"class":231},[52,46122,9231],{"class":58},[52,46124,238],{"class":231},[52,46126,9236],{"class":73},[52,46128,46129],{"class":54,"line":80},[52,46130,597],{"emptyLinePlaceholder":171},[52,46132,46133,46135,46137,46139,46141,46143],{"class":54,"line":108},[52,46134,1721],{"class":231},[52,46136,1724],{"class":371},[52,46138,1727],{"class":231},[52,46140,1730],{"class":231},[52,46142,1733],{"class":66},[52,46144,1736],{"class":58},[52,46146,46147],{"class":54,"line":118},[52,46148,1751],{"class":58},[52,46150,46151,46153,46156,46158,46160],{"class":54,"line":594},[52,46152,1756],{"class":58},[52,46154,46155],{"class":73},"'Plasma'",[52,46157,27194],{"class":58},[52,46159,13171],{"class":371},[52,46161,1768],{"class":58},[52,46163,46164],{"class":54,"line":600},[52,46165,1773],{"class":58},[52,46167,46168],{"class":54,"line":606},[52,46169,1778],{"class":58},[156,46171,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46173},[46174,46175],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/plasma",{"title":10788,"description":45935},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":46182,"title":46183,"body":46184,"category":28094,"componentType":20848,"description":46191,"extension":168,"meta":46554,"navigation":171,"path":46555,"requiresChild":171,"seo":46556,"stem":46557,"__hash__":46558},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":46185,"toc":46550},[46186,46189,46192,46194,46196,46199,46201,46548],[11,46187,46183],{"id":46188},"polarcoordinates",[15,46190,46191],{},"Convert rectangular coordinates to polar space",[26901,46193],{"component":46183},[23,46195,26905],{"id":21503},[26907,46197],{":props":46198},"[{\"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,46200,26913],{"id":26912},[217,46202,46203,46267,46338,46404,46474],{":tabs":1543},[43,46204,46206],{"className":45,"code":46205,"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,46207,46208,46216,46223,46231,46239,46243,46251,46259],{"__ignoreMap":48},[52,46209,46210,46212,46214],{"class":54,"line":55},[52,46211,59],{"class":58},[52,46213,63],{"class":62},[52,46215,77],{"class":58},[52,46217,46218,46220],{"class":54,"line":80},[52,46219,83],{"class":58},[52,46221,46222],{"class":62},"PolarCoordinates\n",[52,46224,46225,46227,46229],{"class":54,"line":108},[52,46226,14901],{"class":66},[52,46228,70],{"class":58},[52,46230,29360],{"class":73},[52,46232,46233,46235,46237],{"class":54,"line":118},[52,46234,17870],{"class":66},[52,46236,70],{"class":58},[52,46238,29360],{"class":73},[52,46240,46241],{"class":54,"line":594},[52,46242,26949],{"class":58},[52,46244,46245,46247,46249],{"class":54,"line":600},[52,46246,2213],{"class":58},[52,46248,2216],{"class":62},[52,46250,105],{"class":58},[52,46252,46253,46255,46257],{"class":54,"line":606},[52,46254,2230],{"class":58},[52,46256,46183],{"class":62},[52,46258,77],{"class":58},[52,46260,46261,46263,46265],{"class":54,"line":653},[52,46262,121],{"class":58},[52,46264,63],{"class":62},[52,46266,77],{"class":58},[43,46268,46270],{"className":360,"code":46269,"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,46271,46272,46280,46286,46298,46310,46314,46322,46330],{"__ignoreMap":48},[52,46273,46274,46276,46278],{"class":54,"line":55},[52,46275,59],{"class":58},[52,46277,63],{"class":371},[52,46279,77],{"class":58},[52,46281,46282,46284],{"class":54,"line":80},[52,46283,83],{"class":58},[52,46285,46222],{"class":371},[52,46287,46288,46290,46292,46294,46296],{"class":54,"line":108},[52,46289,7361],{"class":66},[52,46291,70],{"class":231},[52,46293,723],{"class":58},[52,46295,6391],{"class":371},[52,46297,729],{"class":58},[52,46299,46300,46302,46304,46306,46308],{"class":54,"line":118},[52,46301,17981],{"class":66},[52,46303,70],{"class":231},[52,46305,723],{"class":58},[52,46307,6391],{"class":371},[52,46309,729],{"class":58},[52,46311,46312],{"class":54,"line":594},[52,46313,26949],{"class":58},[52,46315,46316,46318,46320],{"class":54,"line":600},[52,46317,2213],{"class":58},[52,46319,2216],{"class":371},[52,46321,105],{"class":58},[52,46323,46324,46326,46328],{"class":54,"line":606},[52,46325,2230],{"class":58},[52,46327,46183],{"class":371},[52,46329,77],{"class":58},[52,46331,46332,46334,46336],{"class":54,"line":653},[52,46333,121],{"class":58},[52,46335,63],{"class":371},[52,46337,77],{"class":58},[43,46339,46340],{"className":2507,"code":46269,"language":2509,"meta":48,"style":48},[31,46341,46342,46350,46356,46366,46376,46380,46388,46396],{"__ignoreMap":48},[52,46343,46344,46346,46348],{"class":54,"line":55},[52,46345,59],{"class":58},[52,46347,63],{"class":371},[52,46349,77],{"class":58},[52,46351,46352,46354],{"class":54,"line":80},[52,46353,83],{"class":58},[52,46355,46222],{"class":371},[52,46357,46358,46360,46362,46364],{"class":54,"line":108},[52,46359,7361],{"class":66},[52,46361,24845],{"class":58},[52,46363,6391],{"class":371},[52,46365,729],{"class":58},[52,46367,46368,46370,46372,46374],{"class":54,"line":118},[52,46369,17981],{"class":66},[52,46371,24845],{"class":58},[52,46373,6391],{"class":371},[52,46375,729],{"class":58},[52,46377,46378],{"class":54,"line":594},[52,46379,26949],{"class":58},[52,46381,46382,46384,46386],{"class":54,"line":600},[52,46383,2213],{"class":58},[52,46385,2216],{"class":371},[52,46387,105],{"class":58},[52,46389,46390,46392,46394],{"class":54,"line":606},[52,46391,2230],{"class":58},[52,46393,46183],{"class":371},[52,46395,77],{"class":58},[52,46397,46398,46400,46402],{"class":54,"line":653},[52,46399,121],{"class":58},[52,46401,63],{"class":371},[52,46403,77],{"class":58},[43,46405,46406],{"className":419,"code":46269,"language":420,"meta":48,"style":48},[31,46407,46408,46416,46422,46434,46446,46450,46458,46466],{"__ignoreMap":48},[52,46409,46410,46412,46414],{"class":54,"line":55},[52,46411,59],{"class":58},[52,46413,63],{"class":371},[52,46415,77],{"class":58},[52,46417,46418,46420],{"class":54,"line":80},[52,46419,83],{"class":58},[52,46421,46222],{"class":371},[52,46423,46424,46426,46428,46430,46432],{"class":54,"line":108},[52,46425,7361],{"class":66},[52,46427,70],{"class":231},[52,46429,723],{"class":58},[52,46431,6391],{"class":371},[52,46433,729],{"class":58},[52,46435,46436,46438,46440,46442,46444],{"class":54,"line":118},[52,46437,17981],{"class":66},[52,46439,70],{"class":231},[52,46441,723],{"class":58},[52,46443,6391],{"class":371},[52,46445,729],{"class":58},[52,46447,46448],{"class":54,"line":594},[52,46449,26949],{"class":58},[52,46451,46452,46454,46456],{"class":54,"line":600},[52,46453,2213],{"class":58},[52,46455,2216],{"class":371},[52,46457,105],{"class":58},[52,46459,46460,46462,46464],{"class":54,"line":606},[52,46461,2230],{"class":58},[52,46463,46183],{"class":371},[52,46465,77],{"class":58},[52,46467,46468,46470,46472],{"class":54,"line":653},[52,46469,121],{"class":58},[52,46471,63],{"class":371},[52,46473,77],{"class":58},[43,46475,46477],{"className":222,"code":46476,"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,46478,46479,46489,46493,46507,46511,46528,46536,46540,46544],{"__ignoreMap":48},[52,46480,46481,46483,46485,46487],{"class":54,"line":55},[52,46482,232],{"class":231},[52,46484,9231],{"class":58},[52,46486,238],{"class":231},[52,46488,9236],{"class":73},[52,46490,46491],{"class":54,"line":80},[52,46492,597],{"emptyLinePlaceholder":171},[52,46494,46495,46497,46499,46501,46503,46505],{"class":54,"line":108},[52,46496,1721],{"class":231},[52,46498,1724],{"class":371},[52,46500,1727],{"class":231},[52,46502,1730],{"class":231},[52,46504,1733],{"class":66},[52,46506,1736],{"class":58},[52,46508,46509],{"class":54,"line":118},[52,46510,1751],{"class":58},[52,46512,46513,46515,46518,46520,46522,46524,46526],{"class":54,"line":594},[52,46514,1756],{"class":58},[52,46516,46517],{"class":73},"'PolarCoordinates'",[52,46519,5254],{"class":58},[52,46521,6391],{"class":371},[52,46523,35555],{"class":58},[52,46525,6391],{"class":371},[52,46527,5259],{"class":58},[52,46529,46530,46532,46534],{"class":54,"line":600},[52,46531,4727],{"class":58},[52,46533,2869],{"class":73},[52,46535,2129],{"class":58},[52,46537,46538],{"class":54,"line":606},[52,46539,4744],{"class":58},[52,46541,46542],{"class":54,"line":653},[52,46543,1773],{"class":58},[52,46545,46546],{"class":54,"line":662},[52,46547,1778],{"class":58},[156,46549,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46551},[46552,46553],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polarcoordinates",{"title":46183,"description":46191},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":46560,"title":46561,"body":46562,"category":31459,"componentType":20842,"description":46569,"extension":168,"meta":46846,"navigation":171,"path":46847,"requiresChild":27763,"seo":46848,"stem":46849,"__hash__":46850},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":46563,"toc":46842},[46564,46567,46570,46572,46574,46577,46579,46840],[11,46565,46561],{"id":46566},"polygon",[15,46568,46569],{},"Regular polygon with adjustable sides and corner rounding",[26901,46571],{"component":46561},[23,46573,26905],{"id":21503},[26907,46575],{":props":46576},"[{\"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,46578,26913],{"id":26912},[217,46580,46581,46629,46680,46728,46778],{":tabs":1543},[43,46582,46584],{"className":45,"code":46583,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,46585,46586,46594,46601,46609,46617,46621],{"__ignoreMap":48},[52,46587,46588,46590,46592],{"class":54,"line":55},[52,46589,59],{"class":58},[52,46591,63],{"class":62},[52,46593,77],{"class":58},[52,46595,46596,46598],{"class":54,"line":80},[52,46597,83],{"class":58},[52,46599,46600],{"class":62},"Polygon\n",[52,46602,46603,46605,46607],{"class":54,"line":108},[52,46604,7351],{"class":66},[52,46606,70],{"class":58},[52,46608,7307],{"class":73},[52,46610,46611,46613,46615],{"class":54,"line":118},[52,46612,14901],{"class":66},[52,46614,70],{"class":58},[52,46616,37396],{"class":73},[52,46618,46619],{"class":54,"line":594},[52,46620,1224],{"class":58},[52,46622,46623,46625,46627],{"class":54,"line":600},[52,46624,121],{"class":58},[52,46626,63],{"class":62},[52,46628,77],{"class":58},[43,46630,46632],{"className":360,"code":46631,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,46633,46634,46642,46648,46656,46668,46672],{"__ignoreMap":48},[52,46635,46636,46638,46640],{"class":54,"line":55},[52,46637,59],{"class":58},[52,46639,63],{"class":371},[52,46641,77],{"class":58},[52,46643,46644,46646],{"class":54,"line":80},[52,46645,83],{"class":58},[52,46647,46600],{"class":371},[52,46649,46650,46652,46654],{"class":54,"line":108},[52,46651,7351],{"class":66},[52,46653,70],{"class":231},[52,46655,7307],{"class":73},[52,46657,46658,46660,46662,46664,46666],{"class":54,"line":118},[52,46659,7361],{"class":66},[52,46661,70],{"class":231},[52,46663,723],{"class":58},[52,46665,5963],{"class":371},[52,46667,729],{"class":58},[52,46669,46670],{"class":54,"line":594},[52,46671,1224],{"class":58},[52,46673,46674,46676,46678],{"class":54,"line":600},[52,46675,121],{"class":58},[52,46677,63],{"class":371},[52,46679,77],{"class":58},[43,46681,46682],{"className":2507,"code":46631,"language":2509,"meta":48,"style":48},[31,46683,46684,46692,46698,46706,46716,46720],{"__ignoreMap":48},[52,46685,46686,46688,46690],{"class":54,"line":55},[52,46687,59],{"class":58},[52,46689,63],{"class":371},[52,46691,77],{"class":58},[52,46693,46694,46696],{"class":54,"line":80},[52,46695,83],{"class":58},[52,46697,46600],{"class":371},[52,46699,46700,46702,46704],{"class":54,"line":108},[52,46701,7351],{"class":66},[52,46703,70],{"class":58},[52,46705,7307],{"class":73},[52,46707,46708,46710,46712,46714],{"class":54,"line":118},[52,46709,7361],{"class":66},[52,46711,24845],{"class":58},[52,46713,5963],{"class":371},[52,46715,729],{"class":58},[52,46717,46718],{"class":54,"line":594},[52,46719,1224],{"class":58},[52,46721,46722,46724,46726],{"class":54,"line":600},[52,46723,121],{"class":58},[52,46725,63],{"class":371},[52,46727,77],{"class":58},[43,46729,46730],{"className":419,"code":46631,"language":420,"meta":48,"style":48},[31,46731,46732,46740,46746,46754,46766,46770],{"__ignoreMap":48},[52,46733,46734,46736,46738],{"class":54,"line":55},[52,46735,59],{"class":58},[52,46737,63],{"class":371},[52,46739,77],{"class":58},[52,46741,46742,46744],{"class":54,"line":80},[52,46743,83],{"class":58},[52,46745,46600],{"class":371},[52,46747,46748,46750,46752],{"class":54,"line":108},[52,46749,7351],{"class":66},[52,46751,70],{"class":231},[52,46753,7307],{"class":73},[52,46755,46756,46758,46760,46762,46764],{"class":54,"line":118},[52,46757,7361],{"class":66},[52,46759,70],{"class":231},[52,46761,723],{"class":58},[52,46763,5963],{"class":371},[52,46765,729],{"class":58},[52,46767,46768],{"class":54,"line":594},[52,46769,1224],{"class":58},[52,46771,46772,46774,46776],{"class":54,"line":600},[52,46773,121],{"class":58},[52,46775,63],{"class":371},[52,46777,77],{"class":58},[43,46779,46781],{"className":222,"code":46780,"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,46782,46783,46793,46797,46811,46815,46832,46836],{"__ignoreMap":48},[52,46784,46785,46787,46789,46791],{"class":54,"line":55},[52,46786,232],{"class":231},[52,46788,9231],{"class":58},[52,46790,238],{"class":231},[52,46792,9236],{"class":73},[52,46794,46795],{"class":54,"line":80},[52,46796,597],{"emptyLinePlaceholder":171},[52,46798,46799,46801,46803,46805,46807,46809],{"class":54,"line":108},[52,46800,1721],{"class":231},[52,46802,1724],{"class":371},[52,46804,1727],{"class":231},[52,46806,1730],{"class":231},[52,46808,1733],{"class":66},[52,46810,1736],{"class":58},[52,46812,46813],{"class":54,"line":118},[52,46814,1751],{"class":58},[52,46816,46817,46819,46822,46824,46826,46828,46830],{"class":54,"line":594},[52,46818,1756],{"class":58},[52,46820,46821],{"class":73},"'Polygon'",[52,46823,1762],{"class":58},[52,46825,7886],{"class":73},[52,46827,4278],{"class":58},[52,46829,5963],{"class":371},[52,46831,1768],{"class":58},[52,46833,46834],{"class":54,"line":600},[52,46835,1773],{"class":58},[52,46837,46838],{"class":54,"line":606},[52,46839,1778],{"class":58},[156,46841,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46843},[46844,46845],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polygon",{"title":46561,"description":46569},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":46852,"title":46853,"body":46854,"category":29304,"componentType":20848,"description":46861,"extension":168,"meta":47179,"navigation":171,"path":47180,"requiresChild":171,"seo":47181,"stem":47182,"__hash__":47183},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":46855,"toc":47175},[46856,46859,46862,46864,46866,46869,46871,47173],[11,46857,46853],{"id":46858},"posterize",[15,46860,46861],{},"Reduce color depth to create a poster effect",[26901,46863],{"component":46853},[23,46865,26905],{"id":21503},[26907,46867],{":props":46868},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,46870,26913],{"id":26912},[217,46872,46873,46930,46989,47045,47103],{":tabs":1543},[43,46874,46876],{"className":45,"code":46875,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,46877,46878,46886,46893,46902,46906,46914,46922],{"__ignoreMap":48},[52,46879,46880,46882,46884],{"class":54,"line":55},[52,46881,59],{"class":58},[52,46883,63],{"class":62},[52,46885,77],{"class":58},[52,46887,46888,46890],{"class":54,"line":80},[52,46889,83],{"class":58},[52,46891,46892],{"class":62},"Posterize\n",[52,46894,46895,46897,46899],{"class":54,"line":108},[52,46896,17870],{"class":66},[52,46898,70],{"class":58},[52,46900,46901],{"class":73},"\"5\"\n",[52,46903,46904],{"class":54,"line":118},[52,46905,26949],{"class":58},[52,46907,46908,46910,46912],{"class":54,"line":594},[52,46909,2213],{"class":58},[52,46911,2216],{"class":62},[52,46913,105],{"class":58},[52,46915,46916,46918,46920],{"class":54,"line":600},[52,46917,2230],{"class":58},[52,46919,46853],{"class":62},[52,46921,77],{"class":58},[52,46923,46924,46926,46928],{"class":54,"line":606},[52,46925,121],{"class":58},[52,46927,63],{"class":62},[52,46929,77],{"class":58},[43,46931,46933],{"className":360,"code":46932,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,46934,46935,46943,46949,46961,46965,46973,46981],{"__ignoreMap":48},[52,46936,46937,46939,46941],{"class":54,"line":55},[52,46938,59],{"class":58},[52,46940,63],{"class":371},[52,46942,77],{"class":58},[52,46944,46945,46947],{"class":54,"line":80},[52,46946,83],{"class":58},[52,46948,46892],{"class":371},[52,46950,46951,46953,46955,46957,46959],{"class":54,"line":108},[52,46952,17981],{"class":66},[52,46954,70],{"class":231},[52,46956,723],{"class":58},[52,46958,19566],{"class":371},[52,46960,729],{"class":58},[52,46962,46963],{"class":54,"line":118},[52,46964,26949],{"class":58},[52,46966,46967,46969,46971],{"class":54,"line":594},[52,46968,2213],{"class":58},[52,46970,2216],{"class":371},[52,46972,105],{"class":58},[52,46974,46975,46977,46979],{"class":54,"line":600},[52,46976,2230],{"class":58},[52,46978,46853],{"class":371},[52,46980,77],{"class":58},[52,46982,46983,46985,46987],{"class":54,"line":606},[52,46984,121],{"class":58},[52,46986,63],{"class":371},[52,46988,77],{"class":58},[43,46990,46991],{"className":2507,"code":46932,"language":2509,"meta":48,"style":48},[31,46992,46993,47001,47007,47017,47021,47029,47037],{"__ignoreMap":48},[52,46994,46995,46997,46999],{"class":54,"line":55},[52,46996,59],{"class":58},[52,46998,63],{"class":371},[52,47000,77],{"class":58},[52,47002,47003,47005],{"class":54,"line":80},[52,47004,83],{"class":58},[52,47006,46892],{"class":371},[52,47008,47009,47011,47013,47015],{"class":54,"line":108},[52,47010,17981],{"class":66},[52,47012,24845],{"class":58},[52,47014,19566],{"class":371},[52,47016,729],{"class":58},[52,47018,47019],{"class":54,"line":118},[52,47020,26949],{"class":58},[52,47022,47023,47025,47027],{"class":54,"line":594},[52,47024,2213],{"class":58},[52,47026,2216],{"class":371},[52,47028,105],{"class":58},[52,47030,47031,47033,47035],{"class":54,"line":600},[52,47032,2230],{"class":58},[52,47034,46853],{"class":371},[52,47036,77],{"class":58},[52,47038,47039,47041,47043],{"class":54,"line":606},[52,47040,121],{"class":58},[52,47042,63],{"class":371},[52,47044,77],{"class":58},[43,47046,47047],{"className":419,"code":46932,"language":420,"meta":48,"style":48},[31,47048,47049,47057,47063,47075,47079,47087,47095],{"__ignoreMap":48},[52,47050,47051,47053,47055],{"class":54,"line":55},[52,47052,59],{"class":58},[52,47054,63],{"class":371},[52,47056,77],{"class":58},[52,47058,47059,47061],{"class":54,"line":80},[52,47060,83],{"class":58},[52,47062,46892],{"class":371},[52,47064,47065,47067,47069,47071,47073],{"class":54,"line":108},[52,47066,17981],{"class":66},[52,47068,70],{"class":231},[52,47070,723],{"class":58},[52,47072,19566],{"class":371},[52,47074,729],{"class":58},[52,47076,47077],{"class":54,"line":118},[52,47078,26949],{"class":58},[52,47080,47081,47083,47085],{"class":54,"line":594},[52,47082,2213],{"class":58},[52,47084,2216],{"class":371},[52,47086,105],{"class":58},[52,47088,47089,47091,47093],{"class":54,"line":600},[52,47090,2230],{"class":58},[52,47092,46853],{"class":371},[52,47094,77],{"class":58},[52,47096,47097,47099,47101],{"class":54,"line":606},[52,47098,121],{"class":58},[52,47100,63],{"class":371},[52,47102,77],{"class":58},[43,47104,47106],{"className":222,"code":47105,"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,47107,47108,47118,47122,47136,47140,47153,47161,47165,47169],{"__ignoreMap":48},[52,47109,47110,47112,47114,47116],{"class":54,"line":55},[52,47111,232],{"class":231},[52,47113,9231],{"class":58},[52,47115,238],{"class":231},[52,47117,9236],{"class":73},[52,47119,47120],{"class":54,"line":80},[52,47121,597],{"emptyLinePlaceholder":171},[52,47123,47124,47126,47128,47130,47132,47134],{"class":54,"line":108},[52,47125,1721],{"class":231},[52,47127,1724],{"class":371},[52,47129,1727],{"class":231},[52,47131,1730],{"class":231},[52,47133,1733],{"class":66},[52,47135,1736],{"class":58},[52,47137,47138],{"class":54,"line":118},[52,47139,1751],{"class":58},[52,47141,47142,47144,47147,47149,47151],{"class":54,"line":594},[52,47143,1756],{"class":58},[52,47145,47146],{"class":73},"'Posterize'",[52,47148,27194],{"class":58},[52,47150,19566],{"class":371},[52,47152,5259],{"class":58},[52,47154,47155,47157,47159],{"class":54,"line":600},[52,47156,4727],{"class":58},[52,47158,2869],{"class":73},[52,47160,2129],{"class":58},[52,47162,47163],{"class":54,"line":606},[52,47164,4744],{"class":58},[52,47166,47167],{"class":54,"line":653},[52,47168,1773],{"class":58},[52,47170,47171],{"class":54,"line":662},[52,47172,1778],{"class":58},[156,47174,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47176},[47177,47178],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/posterize",{"title":46853,"description":46861},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":47185,"title":47186,"body":47187,"category":27225,"componentType":20848,"description":47194,"extension":168,"meta":47511,"navigation":171,"path":47512,"requiresChild":171,"seo":47513,"stem":47514,"__hash__":47515},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":47188,"toc":47507},[47189,47192,47195,47197,47199,47202,47204,47505],[11,47190,47186],{"id":47191},"progressiveblur",[15,47193,47194],{},"Blur that increases progressively in one direction",[26901,47196],{"component":47186},[23,47198,26905],{"id":21503},[26907,47200],{":props":47201},"[{\"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,47203,26913],{"id":26912},[217,47205,47206,47262,47321,47377,47435],{":tabs":1543},[43,47207,47209],{"className":45,"code":47208,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,47210,47211,47219,47226,47234,47238,47246,47254],{"__ignoreMap":48},[52,47212,47213,47215,47217],{"class":54,"line":55},[52,47214,59],{"class":58},[52,47216,63],{"class":62},[52,47218,77],{"class":58},[52,47220,47221,47223],{"class":54,"line":80},[52,47222,83],{"class":58},[52,47224,47225],{"class":62},"ProgressiveBlur\n",[52,47227,47228,47230,47232],{"class":54,"line":108},[52,47229,17870],{"class":66},[52,47231,70],{"class":58},[52,47233,28549],{"class":73},[52,47235,47236],{"class":54,"line":118},[52,47237,26949],{"class":58},[52,47239,47240,47242,47244],{"class":54,"line":594},[52,47241,2213],{"class":58},[52,47243,2216],{"class":62},[52,47245,105],{"class":58},[52,47247,47248,47250,47252],{"class":54,"line":600},[52,47249,2230],{"class":58},[52,47251,47186],{"class":62},[52,47253,77],{"class":58},[52,47255,47256,47258,47260],{"class":54,"line":606},[52,47257,121],{"class":58},[52,47259,63],{"class":62},[52,47261,77],{"class":58},[43,47263,47265],{"className":360,"code":47264,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,47266,47267,47275,47281,47293,47297,47305,47313],{"__ignoreMap":48},[52,47268,47269,47271,47273],{"class":54,"line":55},[52,47270,59],{"class":58},[52,47272,63],{"class":371},[52,47274,77],{"class":58},[52,47276,47277,47279],{"class":54,"line":80},[52,47278,83],{"class":58},[52,47280,47225],{"class":371},[52,47282,47283,47285,47287,47289,47291],{"class":54,"line":108},[52,47284,17981],{"class":66},[52,47286,70],{"class":231},[52,47288,723],{"class":58},[52,47290,28607],{"class":371},[52,47292,729],{"class":58},[52,47294,47295],{"class":54,"line":118},[52,47296,26949],{"class":58},[52,47298,47299,47301,47303],{"class":54,"line":594},[52,47300,2213],{"class":58},[52,47302,2216],{"class":371},[52,47304,105],{"class":58},[52,47306,47307,47309,47311],{"class":54,"line":600},[52,47308,2230],{"class":58},[52,47310,47186],{"class":371},[52,47312,77],{"class":58},[52,47314,47315,47317,47319],{"class":54,"line":606},[52,47316,121],{"class":58},[52,47318,63],{"class":371},[52,47320,77],{"class":58},[43,47322,47323],{"className":2507,"code":47264,"language":2509,"meta":48,"style":48},[31,47324,47325,47333,47339,47349,47353,47361,47369],{"__ignoreMap":48},[52,47326,47327,47329,47331],{"class":54,"line":55},[52,47328,59],{"class":58},[52,47330,63],{"class":371},[52,47332,77],{"class":58},[52,47334,47335,47337],{"class":54,"line":80},[52,47336,83],{"class":58},[52,47338,47225],{"class":371},[52,47340,47341,47343,47345,47347],{"class":54,"line":108},[52,47342,17981],{"class":66},[52,47344,24845],{"class":58},[52,47346,28607],{"class":371},[52,47348,729],{"class":58},[52,47350,47351],{"class":54,"line":118},[52,47352,26949],{"class":58},[52,47354,47355,47357,47359],{"class":54,"line":594},[52,47356,2213],{"class":58},[52,47358,2216],{"class":371},[52,47360,105],{"class":58},[52,47362,47363,47365,47367],{"class":54,"line":600},[52,47364,2230],{"class":58},[52,47366,47186],{"class":371},[52,47368,77],{"class":58},[52,47370,47371,47373,47375],{"class":54,"line":606},[52,47372,121],{"class":58},[52,47374,63],{"class":371},[52,47376,77],{"class":58},[43,47378,47379],{"className":419,"code":47264,"language":420,"meta":48,"style":48},[31,47380,47381,47389,47395,47407,47411,47419,47427],{"__ignoreMap":48},[52,47382,47383,47385,47387],{"class":54,"line":55},[52,47384,59],{"class":58},[52,47386,63],{"class":371},[52,47388,77],{"class":58},[52,47390,47391,47393],{"class":54,"line":80},[52,47392,83],{"class":58},[52,47394,47225],{"class":371},[52,47396,47397,47399,47401,47403,47405],{"class":54,"line":108},[52,47398,17981],{"class":66},[52,47400,70],{"class":231},[52,47402,723],{"class":58},[52,47404,28607],{"class":371},[52,47406,729],{"class":58},[52,47408,47409],{"class":54,"line":118},[52,47410,26949],{"class":58},[52,47412,47413,47415,47417],{"class":54,"line":594},[52,47414,2213],{"class":58},[52,47416,2216],{"class":371},[52,47418,105],{"class":58},[52,47420,47421,47423,47425],{"class":54,"line":600},[52,47422,2230],{"class":58},[52,47424,47186],{"class":371},[52,47426,77],{"class":58},[52,47428,47429,47431,47433],{"class":54,"line":606},[52,47430,121],{"class":58},[52,47432,63],{"class":371},[52,47434,77],{"class":58},[43,47436,47438],{"className":222,"code":47437,"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,47439,47440,47450,47454,47468,47472,47485,47493,47497,47501],{"__ignoreMap":48},[52,47441,47442,47444,47446,47448],{"class":54,"line":55},[52,47443,232],{"class":231},[52,47445,9231],{"class":58},[52,47447,238],{"class":231},[52,47449,9236],{"class":73},[52,47451,47452],{"class":54,"line":80},[52,47453,597],{"emptyLinePlaceholder":171},[52,47455,47456,47458,47460,47462,47464,47466],{"class":54,"line":108},[52,47457,1721],{"class":231},[52,47459,1724],{"class":371},[52,47461,1727],{"class":231},[52,47463,1730],{"class":231},[52,47465,1733],{"class":66},[52,47467,1736],{"class":58},[52,47469,47470],{"class":54,"line":118},[52,47471,1751],{"class":58},[52,47473,47474,47476,47479,47481,47483],{"class":54,"line":594},[52,47475,1756],{"class":58},[52,47477,47478],{"class":73},"'ProgressiveBlur'",[52,47480,27194],{"class":58},[52,47482,28607],{"class":371},[52,47484,5259],{"class":58},[52,47486,47487,47489,47491],{"class":54,"line":600},[52,47488,4727],{"class":58},[52,47490,2869],{"class":73},[52,47492,2129],{"class":58},[52,47494,47495],{"class":54,"line":606},[52,47496,4744],{"class":58},[52,47498,47499],{"class":54,"line":653},[52,47500,1773],{"class":58},[52,47502,47503],{"class":54,"line":662},[52,47504,1778],{"class":58},[156,47506,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47508},[47509,47510],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/progressiveblur",{"title":47186,"description":47194},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":47517,"title":47518,"body":47519,"category":27760,"componentType":20842,"description":47526,"extension":168,"meta":47767,"navigation":171,"path":47768,"requiresChild":27763,"seo":47769,"stem":47770,"__hash__":47771},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":47520,"toc":47763},[47521,47524,47527,47529,47531,47534,47536,47761],[11,47522,47518],{"id":47523},"radialgradient",[15,47525,47526],{},"Radial gradient radiating from a center point",[26901,47528],{"component":47518},[23,47530,26905],{"id":21503},[26907,47532],{":props":47533},"[{\"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,47535,26913],{"id":26912},[217,47537,47538,47578,47621,47661,47703],{":tabs":1543},[43,47539,47541],{"className":45,"code":47540,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,47542,47543,47551,47558,47566,47570],{"__ignoreMap":48},[52,47544,47545,47547,47549],{"class":54,"line":55},[52,47546,59],{"class":58},[52,47548,63],{"class":62},[52,47550,77],{"class":58},[52,47552,47553,47555],{"class":54,"line":80},[52,47554,83],{"class":58},[52,47556,47557],{"class":62},"RadialGradient\n",[52,47559,47560,47562,47564],{"class":54,"line":108},[52,47561,14901],{"class":66},[52,47563,70],{"class":58},[52,47565,29360],{"class":73},[52,47567,47568],{"class":54,"line":118},[52,47569,1224],{"class":58},[52,47571,47572,47574,47576],{"class":54,"line":594},[52,47573,121],{"class":58},[52,47575,63],{"class":62},[52,47577,77],{"class":58},[43,47579,47581],{"className":360,"code":47580,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,47582,47583,47591,47597,47609,47613],{"__ignoreMap":48},[52,47584,47585,47587,47589],{"class":54,"line":55},[52,47586,59],{"class":58},[52,47588,63],{"class":371},[52,47590,77],{"class":58},[52,47592,47593,47595],{"class":54,"line":80},[52,47594,83],{"class":58},[52,47596,47557],{"class":371},[52,47598,47599,47601,47603,47605,47607],{"class":54,"line":108},[52,47600,7361],{"class":66},[52,47602,70],{"class":231},[52,47604,723],{"class":58},[52,47606,6391],{"class":371},[52,47608,729],{"class":58},[52,47610,47611],{"class":54,"line":118},[52,47612,1224],{"class":58},[52,47614,47615,47617,47619],{"class":54,"line":594},[52,47616,121],{"class":58},[52,47618,63],{"class":371},[52,47620,77],{"class":58},[43,47622,47623],{"className":2507,"code":47580,"language":2509,"meta":48,"style":48},[31,47624,47625,47633,47639,47649,47653],{"__ignoreMap":48},[52,47626,47627,47629,47631],{"class":54,"line":55},[52,47628,59],{"class":58},[52,47630,63],{"class":371},[52,47632,77],{"class":58},[52,47634,47635,47637],{"class":54,"line":80},[52,47636,83],{"class":58},[52,47638,47557],{"class":371},[52,47640,47641,47643,47645,47647],{"class":54,"line":108},[52,47642,7361],{"class":66},[52,47644,24845],{"class":58},[52,47646,6391],{"class":371},[52,47648,729],{"class":58},[52,47650,47651],{"class":54,"line":118},[52,47652,1224],{"class":58},[52,47654,47655,47657,47659],{"class":54,"line":594},[52,47656,121],{"class":58},[52,47658,63],{"class":371},[52,47660,77],{"class":58},[43,47662,47663],{"className":419,"code":47580,"language":420,"meta":48,"style":48},[31,47664,47665,47673,47679,47691,47695],{"__ignoreMap":48},[52,47666,47667,47669,47671],{"class":54,"line":55},[52,47668,59],{"class":58},[52,47670,63],{"class":371},[52,47672,77],{"class":58},[52,47674,47675,47677],{"class":54,"line":80},[52,47676,83],{"class":58},[52,47678,47557],{"class":371},[52,47680,47681,47683,47685,47687,47689],{"class":54,"line":108},[52,47682,7361],{"class":66},[52,47684,70],{"class":231},[52,47686,723],{"class":58},[52,47688,6391],{"class":371},[52,47690,729],{"class":58},[52,47692,47693],{"class":54,"line":118},[52,47694,1224],{"class":58},[52,47696,47697,47699,47701],{"class":54,"line":594},[52,47698,121],{"class":58},[52,47700,63],{"class":371},[52,47702,77],{"class":58},[43,47704,47706],{"className":222,"code":47705,"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,47707,47708,47718,47722,47736,47740,47753,47757],{"__ignoreMap":48},[52,47709,47710,47712,47714,47716],{"class":54,"line":55},[52,47711,232],{"class":231},[52,47713,9231],{"class":58},[52,47715,238],{"class":231},[52,47717,9236],{"class":73},[52,47719,47720],{"class":54,"line":80},[52,47721,597],{"emptyLinePlaceholder":171},[52,47723,47724,47726,47728,47730,47732,47734],{"class":54,"line":108},[52,47725,1721],{"class":231},[52,47727,1724],{"class":371},[52,47729,1727],{"class":231},[52,47731,1730],{"class":231},[52,47733,1733],{"class":66},[52,47735,1736],{"class":58},[52,47737,47738],{"class":54,"line":118},[52,47739,1751],{"class":58},[52,47741,47742,47744,47747,47749,47751],{"class":54,"line":594},[52,47743,1756],{"class":58},[52,47745,47746],{"class":73},"'RadialGradient'",[52,47748,5254],{"class":58},[52,47750,6391],{"class":371},[52,47752,1768],{"class":58},[52,47754,47755],{"class":54,"line":600},[52,47756,1773],{"class":58},[52,47758,47759],{"class":54,"line":606},[52,47760,1778],{"class":58},[156,47762,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47764},[47765,47766],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/radialgradient",{"title":47518,"description":47526},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":47773,"title":47774,"body":47775,"category":28094,"componentType":20848,"description":47782,"extension":168,"meta":48099,"navigation":171,"path":48100,"requiresChild":171,"seo":48101,"stem":48102,"__hash__":48103},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":47776,"toc":48095},[47777,47780,47783,47785,47787,47790,47792,48093],[11,47778,47774],{"id":47779},"rectangularcoordinates",[15,47781,47782],{},"Convert polar coordinates back to rectangular space",[26901,47784],{"component":47774},[23,47786,26905],{"id":21503},[26907,47788],{":props":47789},"[{\"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,47791,26913],{"id":26912},[217,47793,47794,47850,47909,47965,48023],{":tabs":1543},[43,47795,47797],{"className":45,"code":47796,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,47798,47799,47807,47814,47822,47826,47834,47842],{"__ignoreMap":48},[52,47800,47801,47803,47805],{"class":54,"line":55},[52,47802,59],{"class":58},[52,47804,63],{"class":62},[52,47806,77],{"class":58},[52,47808,47809,47811],{"class":54,"line":80},[52,47810,83],{"class":58},[52,47812,47813],{"class":62},"RectangularCoordinates\n",[52,47815,47816,47818,47820],{"class":54,"line":108},[52,47817,17870],{"class":66},[52,47819,70],{"class":58},[52,47821,29360],{"class":73},[52,47823,47824],{"class":54,"line":118},[52,47825,26949],{"class":58},[52,47827,47828,47830,47832],{"class":54,"line":594},[52,47829,2213],{"class":58},[52,47831,2216],{"class":62},[52,47833,105],{"class":58},[52,47835,47836,47838,47840],{"class":54,"line":600},[52,47837,2230],{"class":58},[52,47839,47774],{"class":62},[52,47841,77],{"class":58},[52,47843,47844,47846,47848],{"class":54,"line":606},[52,47845,121],{"class":58},[52,47847,63],{"class":62},[52,47849,77],{"class":58},[43,47851,47853],{"className":360,"code":47852,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,47854,47855,47863,47869,47881,47885,47893,47901],{"__ignoreMap":48},[52,47856,47857,47859,47861],{"class":54,"line":55},[52,47858,59],{"class":58},[52,47860,63],{"class":371},[52,47862,77],{"class":58},[52,47864,47865,47867],{"class":54,"line":80},[52,47866,83],{"class":58},[52,47868,47813],{"class":371},[52,47870,47871,47873,47875,47877,47879],{"class":54,"line":108},[52,47872,17981],{"class":66},[52,47874,70],{"class":231},[52,47876,723],{"class":58},[52,47878,6391],{"class":371},[52,47880,729],{"class":58},[52,47882,47883],{"class":54,"line":118},[52,47884,26949],{"class":58},[52,47886,47887,47889,47891],{"class":54,"line":594},[52,47888,2213],{"class":58},[52,47890,2216],{"class":371},[52,47892,105],{"class":58},[52,47894,47895,47897,47899],{"class":54,"line":600},[52,47896,2230],{"class":58},[52,47898,47774],{"class":371},[52,47900,77],{"class":58},[52,47902,47903,47905,47907],{"class":54,"line":606},[52,47904,121],{"class":58},[52,47906,63],{"class":371},[52,47908,77],{"class":58},[43,47910,47911],{"className":2507,"code":47852,"language":2509,"meta":48,"style":48},[31,47912,47913,47921,47927,47937,47941,47949,47957],{"__ignoreMap":48},[52,47914,47915,47917,47919],{"class":54,"line":55},[52,47916,59],{"class":58},[52,47918,63],{"class":371},[52,47920,77],{"class":58},[52,47922,47923,47925],{"class":54,"line":80},[52,47924,83],{"class":58},[52,47926,47813],{"class":371},[52,47928,47929,47931,47933,47935],{"class":54,"line":108},[52,47930,17981],{"class":66},[52,47932,24845],{"class":58},[52,47934,6391],{"class":371},[52,47936,729],{"class":58},[52,47938,47939],{"class":54,"line":118},[52,47940,26949],{"class":58},[52,47942,47943,47945,47947],{"class":54,"line":594},[52,47944,2213],{"class":58},[52,47946,2216],{"class":371},[52,47948,105],{"class":58},[52,47950,47951,47953,47955],{"class":54,"line":600},[52,47952,2230],{"class":58},[52,47954,47774],{"class":371},[52,47956,77],{"class":58},[52,47958,47959,47961,47963],{"class":54,"line":606},[52,47960,121],{"class":58},[52,47962,63],{"class":371},[52,47964,77],{"class":58},[43,47966,47967],{"className":419,"code":47852,"language":420,"meta":48,"style":48},[31,47968,47969,47977,47983,47995,47999,48007,48015],{"__ignoreMap":48},[52,47970,47971,47973,47975],{"class":54,"line":55},[52,47972,59],{"class":58},[52,47974,63],{"class":371},[52,47976,77],{"class":58},[52,47978,47979,47981],{"class":54,"line":80},[52,47980,83],{"class":58},[52,47982,47813],{"class":371},[52,47984,47985,47987,47989,47991,47993],{"class":54,"line":108},[52,47986,17981],{"class":66},[52,47988,70],{"class":231},[52,47990,723],{"class":58},[52,47992,6391],{"class":371},[52,47994,729],{"class":58},[52,47996,47997],{"class":54,"line":118},[52,47998,26949],{"class":58},[52,48000,48001,48003,48005],{"class":54,"line":594},[52,48002,2213],{"class":58},[52,48004,2216],{"class":371},[52,48006,105],{"class":58},[52,48008,48009,48011,48013],{"class":54,"line":600},[52,48010,2230],{"class":58},[52,48012,47774],{"class":371},[52,48014,77],{"class":58},[52,48016,48017,48019,48021],{"class":54,"line":606},[52,48018,121],{"class":58},[52,48020,63],{"class":371},[52,48022,77],{"class":58},[43,48024,48026],{"className":222,"code":48025,"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,48027,48028,48038,48042,48056,48060,48073,48081,48085,48089],{"__ignoreMap":48},[52,48029,48030,48032,48034,48036],{"class":54,"line":55},[52,48031,232],{"class":231},[52,48033,9231],{"class":58},[52,48035,238],{"class":231},[52,48037,9236],{"class":73},[52,48039,48040],{"class":54,"line":80},[52,48041,597],{"emptyLinePlaceholder":171},[52,48043,48044,48046,48048,48050,48052,48054],{"class":54,"line":108},[52,48045,1721],{"class":231},[52,48047,1724],{"class":371},[52,48049,1727],{"class":231},[52,48051,1730],{"class":231},[52,48053,1733],{"class":66},[52,48055,1736],{"class":58},[52,48057,48058],{"class":54,"line":118},[52,48059,1751],{"class":58},[52,48061,48062,48064,48067,48069,48071],{"class":54,"line":594},[52,48063,1756],{"class":58},[52,48065,48066],{"class":73},"'RectangularCoordinates'",[52,48068,27194],{"class":58},[52,48070,6391],{"class":371},[52,48072,5259],{"class":58},[52,48074,48075,48077,48079],{"class":54,"line":600},[52,48076,4727],{"class":58},[52,48078,2869],{"class":73},[52,48080,2129],{"class":58},[52,48082,48083],{"class":54,"line":606},[52,48084,4744],{"class":58},[52,48086,48087],{"class":54,"line":653},[52,48088,1773],{"class":58},[52,48090,48091],{"class":54,"line":662},[52,48092,1778],{"class":58},[156,48094,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48096},[48097,48098],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/rectangularcoordinates",{"title":47774,"description":47782},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":48105,"title":48106,"body":48107,"category":31459,"componentType":20842,"description":48114,"extension":168,"meta":48391,"navigation":171,"path":48392,"requiresChild":27763,"seo":48393,"stem":48394,"__hash__":48395},"components/docs/components/Ring.md","Ring",{"type":8,"value":48108,"toc":48387},[48109,48112,48115,48117,48119,48122,48124,48385],[11,48110,48106],{"id":48111},"ring",[15,48113,48114],{},"Annular ring (donut) with adjustable radius and band thickness",[26901,48116],{"component":48106},[23,48118,26905],{"id":21503},[26907,48120],{":props":48121},"[{\"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,48123,26913],{"id":26912},[217,48125,48126,48174,48225,48273,48323],{":tabs":1543},[43,48127,48129],{"className":45,"code":48128,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,48130,48131,48139,48146,48154,48162,48166],{"__ignoreMap":48},[52,48132,48133,48135,48137],{"class":54,"line":55},[52,48134,59],{"class":58},[52,48136,63],{"class":62},[52,48138,77],{"class":58},[52,48140,48141,48143],{"class":54,"line":80},[52,48142,83],{"class":58},[52,48144,48145],{"class":62},"Ring\n",[52,48147,48148,48150,48152],{"class":54,"line":108},[52,48149,7351],{"class":66},[52,48151,70],{"class":58},[52,48153,7307],{"class":73},[52,48155,48156,48158,48160],{"class":54,"line":118},[52,48157,14901],{"class":66},[52,48159,70],{"class":58},[52,48161,32531],{"class":73},[52,48163,48164],{"class":54,"line":594},[52,48165,1224],{"class":58},[52,48167,48168,48170,48172],{"class":54,"line":600},[52,48169,121],{"class":58},[52,48171,63],{"class":62},[52,48173,77],{"class":58},[43,48175,48177],{"className":360,"code":48176,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,48178,48179,48187,48193,48201,48213,48217],{"__ignoreMap":48},[52,48180,48181,48183,48185],{"class":54,"line":55},[52,48182,59],{"class":58},[52,48184,63],{"class":371},[52,48186,77],{"class":58},[52,48188,48189,48191],{"class":54,"line":80},[52,48190,83],{"class":58},[52,48192,48145],{"class":371},[52,48194,48195,48197,48199],{"class":54,"line":108},[52,48196,7351],{"class":66},[52,48198,70],{"class":231},[52,48200,7307],{"class":73},[52,48202,48203,48205,48207,48209,48211],{"class":54,"line":118},[52,48204,7361],{"class":66},[52,48206,70],{"class":231},[52,48208,723],{"class":58},[52,48210,19478],{"class":371},[52,48212,729],{"class":58},[52,48214,48215],{"class":54,"line":594},[52,48216,1224],{"class":58},[52,48218,48219,48221,48223],{"class":54,"line":600},[52,48220,121],{"class":58},[52,48222,63],{"class":371},[52,48224,77],{"class":58},[43,48226,48227],{"className":2507,"code":48176,"language":2509,"meta":48,"style":48},[31,48228,48229,48237,48243,48251,48261,48265],{"__ignoreMap":48},[52,48230,48231,48233,48235],{"class":54,"line":55},[52,48232,59],{"class":58},[52,48234,63],{"class":371},[52,48236,77],{"class":58},[52,48238,48239,48241],{"class":54,"line":80},[52,48240,83],{"class":58},[52,48242,48145],{"class":371},[52,48244,48245,48247,48249],{"class":54,"line":108},[52,48246,7351],{"class":66},[52,48248,70],{"class":58},[52,48250,7307],{"class":73},[52,48252,48253,48255,48257,48259],{"class":54,"line":118},[52,48254,7361],{"class":66},[52,48256,24845],{"class":58},[52,48258,19478],{"class":371},[52,48260,729],{"class":58},[52,48262,48263],{"class":54,"line":594},[52,48264,1224],{"class":58},[52,48266,48267,48269,48271],{"class":54,"line":600},[52,48268,121],{"class":58},[52,48270,63],{"class":371},[52,48272,77],{"class":58},[43,48274,48275],{"className":419,"code":48176,"language":420,"meta":48,"style":48},[31,48276,48277,48285,48291,48299,48311,48315],{"__ignoreMap":48},[52,48278,48279,48281,48283],{"class":54,"line":55},[52,48280,59],{"class":58},[52,48282,63],{"class":371},[52,48284,77],{"class":58},[52,48286,48287,48289],{"class":54,"line":80},[52,48288,83],{"class":58},[52,48290,48145],{"class":371},[52,48292,48293,48295,48297],{"class":54,"line":108},[52,48294,7351],{"class":66},[52,48296,70],{"class":231},[52,48298,7307],{"class":73},[52,48300,48301,48303,48305,48307,48309],{"class":54,"line":118},[52,48302,7361],{"class":66},[52,48304,70],{"class":231},[52,48306,723],{"class":58},[52,48308,19478],{"class":371},[52,48310,729],{"class":58},[52,48312,48313],{"class":54,"line":594},[52,48314,1224],{"class":58},[52,48316,48317,48319,48321],{"class":54,"line":600},[52,48318,121],{"class":58},[52,48320,63],{"class":371},[52,48322,77],{"class":58},[43,48324,48326],{"className":222,"code":48325,"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,48327,48328,48338,48342,48356,48360,48377,48381],{"__ignoreMap":48},[52,48329,48330,48332,48334,48336],{"class":54,"line":55},[52,48331,232],{"class":231},[52,48333,9231],{"class":58},[52,48335,238],{"class":231},[52,48337,9236],{"class":73},[52,48339,48340],{"class":54,"line":80},[52,48341,597],{"emptyLinePlaceholder":171},[52,48343,48344,48346,48348,48350,48352,48354],{"class":54,"line":108},[52,48345,1721],{"class":231},[52,48347,1724],{"class":371},[52,48349,1727],{"class":231},[52,48351,1730],{"class":231},[52,48353,1733],{"class":66},[52,48355,1736],{"class":58},[52,48357,48358],{"class":54,"line":118},[52,48359,1751],{"class":58},[52,48361,48362,48364,48367,48369,48371,48373,48375],{"class":54,"line":594},[52,48363,1756],{"class":58},[52,48365,48366],{"class":73},"'Ring'",[52,48368,1762],{"class":58},[52,48370,7886],{"class":73},[52,48372,4278],{"class":58},[52,48374,19478],{"class":371},[52,48376,1768],{"class":58},[52,48378,48379],{"class":54,"line":600},[52,48380,1773],{"class":58},[52,48382,48383],{"class":54,"line":606},[52,48384,1778],{"class":58},[156,48386,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48388},[48389,48390],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ring",{"title":48106,"description":48114},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":48397,"title":48398,"body":48399,"category":27760,"componentType":20842,"description":48406,"extension":168,"meta":48591,"navigation":171,"path":48592,"requiresChild":27763,"seo":48593,"stem":48594,"__hash__":48595},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":48400,"toc":48587},[48401,48404,48407,48409,48411,48414,48416,48585],[11,48402,48398],{"id":48403},"ripples",[15,48405,48406],{},"Concentric animated ripples emanating from a point",[26901,48408],{"component":48398},[23,48410,26905],{"id":21503},[26907,48412],{":props":48413},"[{\"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,48415,26913],{"id":26912},[217,48417,48418,48447,48475,48503,48531],{":tabs":1543},[43,48419,48421],{"className":45,"code":48420,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,48422,48423,48431,48439],{"__ignoreMap":48},[52,48424,48425,48427,48429],{"class":54,"line":55},[52,48426,59],{"class":58},[52,48428,63],{"class":62},[52,48430,77],{"class":58},[52,48432,48433,48435,48437],{"class":54,"line":80},[52,48434,83],{"class":58},[52,48436,48398],{"class":62},[52,48438,105],{"class":58},[52,48440,48441,48443,48445],{"class":54,"line":108},[52,48442,121],{"class":58},[52,48444,63],{"class":62},[52,48446,77],{"class":58},[43,48448,48449],{"className":360,"code":48420,"language":362,"meta":48,"style":48},[31,48450,48451,48459,48467],{"__ignoreMap":48},[52,48452,48453,48455,48457],{"class":54,"line":55},[52,48454,59],{"class":58},[52,48456,63],{"class":371},[52,48458,77],{"class":58},[52,48460,48461,48463,48465],{"class":54,"line":80},[52,48462,83],{"class":58},[52,48464,48398],{"class":371},[52,48466,105],{"class":58},[52,48468,48469,48471,48473],{"class":54,"line":108},[52,48470,121],{"class":58},[52,48472,63],{"class":371},[52,48474,77],{"class":58},[43,48476,48477],{"className":2507,"code":48420,"language":2509,"meta":48,"style":48},[31,48478,48479,48487,48495],{"__ignoreMap":48},[52,48480,48481,48483,48485],{"class":54,"line":55},[52,48482,59],{"class":58},[52,48484,63],{"class":371},[52,48486,77],{"class":58},[52,48488,48489,48491,48493],{"class":54,"line":80},[52,48490,83],{"class":58},[52,48492,48398],{"class":371},[52,48494,105],{"class":58},[52,48496,48497,48499,48501],{"class":54,"line":108},[52,48498,121],{"class":58},[52,48500,63],{"class":371},[52,48502,77],{"class":58},[43,48504,48505],{"className":419,"code":48420,"language":420,"meta":48,"style":48},[31,48506,48507,48515,48523],{"__ignoreMap":48},[52,48508,48509,48511,48513],{"class":54,"line":55},[52,48510,59],{"class":58},[52,48512,63],{"class":371},[52,48514,77],{"class":58},[52,48516,48517,48519,48521],{"class":54,"line":80},[52,48518,83],{"class":58},[52,48520,48398],{"class":371},[52,48522,105],{"class":58},[52,48524,48525,48527,48529],{"class":54,"line":108},[52,48526,121],{"class":58},[52,48528,63],{"class":371},[52,48530,77],{"class":58},[43,48532,48534],{"className":222,"code":48533,"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,48535,48536,48546,48550,48564,48568,48577,48581],{"__ignoreMap":48},[52,48537,48538,48540,48542,48544],{"class":54,"line":55},[52,48539,232],{"class":231},[52,48541,9231],{"class":58},[52,48543,238],{"class":231},[52,48545,9236],{"class":73},[52,48547,48548],{"class":54,"line":80},[52,48549,597],{"emptyLinePlaceholder":171},[52,48551,48552,48554,48556,48558,48560,48562],{"class":54,"line":108},[52,48553,1721],{"class":231},[52,48555,1724],{"class":371},[52,48557,1727],{"class":231},[52,48559,1730],{"class":231},[52,48561,1733],{"class":66},[52,48563,1736],{"class":58},[52,48565,48566],{"class":54,"line":118},[52,48567,1751],{"class":58},[52,48569,48570,48572,48575],{"class":54,"line":594},[52,48571,1756],{"class":58},[52,48573,48574],{"class":73},"'Ripples'",[52,48576,2129],{"class":58},[52,48578,48579],{"class":54,"line":600},[52,48580,1773],{"class":58},[52,48582,48583],{"class":54,"line":606},[52,48584,1778],{"class":58},[156,48586,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":48588},[48589,48590],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ripples",{"title":48398,"description":48406},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":48597,"title":48598,"body":48599,"category":31459,"componentType":20842,"description":48606,"extension":168,"meta":48836,"navigation":171,"path":48837,"requiresChild":27763,"seo":48838,"stem":48839,"__hash__":48840},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":48600,"toc":48832},[48601,48604,48607,48609,48611,48614,48616,48830],[11,48602,48598],{"id":48603},"roundedrect",[15,48605,48606],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26901,48608],{"component":48598},[23,48610,26905],{"id":21503},[26907,48612],{":props":48613},"[{\"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,48615,26913],{"id":26912},[217,48617,48618,48658,48696,48734,48772],{":tabs":1543},[43,48619,48621],{"className":45,"code":48620,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,48622,48623,48631,48638,48646,48650],{"__ignoreMap":48},[52,48624,48625,48627,48629],{"class":54,"line":55},[52,48626,59],{"class":58},[52,48628,63],{"class":62},[52,48630,77],{"class":58},[52,48632,48633,48635],{"class":54,"line":80},[52,48634,83],{"class":58},[52,48636,48637],{"class":62},"RoundedRect\n",[52,48639,48640,48642,48644],{"class":54,"line":108},[52,48641,7351],{"class":66},[52,48643,70],{"class":58},[52,48645,7307],{"class":73},[52,48647,48648],{"class":54,"line":118},[52,48649,1224],{"class":58},[52,48651,48652,48654,48656],{"class":54,"line":594},[52,48653,121],{"class":58},[52,48655,63],{"class":62},[52,48657,77],{"class":58},[43,48659,48660],{"className":360,"code":48620,"language":362,"meta":48,"style":48},[31,48661,48662,48670,48676,48684,48688],{"__ignoreMap":48},[52,48663,48664,48666,48668],{"class":54,"line":55},[52,48665,59],{"class":58},[52,48667,63],{"class":371},[52,48669,77],{"class":58},[52,48671,48672,48674],{"class":54,"line":80},[52,48673,83],{"class":58},[52,48675,48637],{"class":371},[52,48677,48678,48680,48682],{"class":54,"line":108},[52,48679,7351],{"class":66},[52,48681,70],{"class":231},[52,48683,7307],{"class":73},[52,48685,48686],{"class":54,"line":118},[52,48687,1224],{"class":58},[52,48689,48690,48692,48694],{"class":54,"line":594},[52,48691,121],{"class":58},[52,48693,63],{"class":371},[52,48695,77],{"class":58},[43,48697,48698],{"className":2507,"code":48620,"language":2509,"meta":48,"style":48},[31,48699,48700,48708,48714,48722,48726],{"__ignoreMap":48},[52,48701,48702,48704,48706],{"class":54,"line":55},[52,48703,59],{"class":58},[52,48705,63],{"class":371},[52,48707,77],{"class":58},[52,48709,48710,48712],{"class":54,"line":80},[52,48711,83],{"class":58},[52,48713,48637],{"class":371},[52,48715,48716,48718,48720],{"class":54,"line":108},[52,48717,7351],{"class":66},[52,48719,70],{"class":58},[52,48721,7307],{"class":73},[52,48723,48724],{"class":54,"line":118},[52,48725,1224],{"class":58},[52,48727,48728,48730,48732],{"class":54,"line":594},[52,48729,121],{"class":58},[52,48731,63],{"class":371},[52,48733,77],{"class":58},[43,48735,48736],{"className":419,"code":48620,"language":420,"meta":48,"style":48},[31,48737,48738,48746,48752,48760,48764],{"__ignoreMap":48},[52,48739,48740,48742,48744],{"class":54,"line":55},[52,48741,59],{"class":58},[52,48743,63],{"class":371},[52,48745,77],{"class":58},[52,48747,48748,48750],{"class":54,"line":80},[52,48749,83],{"class":58},[52,48751,48637],{"class":371},[52,48753,48754,48756,48758],{"class":54,"line":108},[52,48755,7351],{"class":66},[52,48757,70],{"class":231},[52,48759,7307],{"class":73},[52,48761,48762],{"class":54,"line":118},[52,48763,1224],{"class":58},[52,48765,48766,48768,48770],{"class":54,"line":594},[52,48767,121],{"class":58},[52,48769,63],{"class":371},[52,48771,77],{"class":58},[43,48773,48775],{"className":222,"code":48774,"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,48776,48777,48787,48791,48805,48809,48822,48826],{"__ignoreMap":48},[52,48778,48779,48781,48783,48785],{"class":54,"line":55},[52,48780,232],{"class":231},[52,48782,9231],{"class":58},[52,48784,238],{"class":231},[52,48786,9236],{"class":73},[52,48788,48789],{"class":54,"line":80},[52,48790,597],{"emptyLinePlaceholder":171},[52,48792,48793,48795,48797,48799,48801,48803],{"class":54,"line":108},[52,48794,1721],{"class":231},[52,48796,1724],{"class":371},[52,48798,1727],{"class":231},[52,48800,1730],{"class":231},[52,48802,1733],{"class":66},[52,48804,1736],{"class":58},[52,48806,48807],{"class":54,"line":118},[52,48808,1751],{"class":58},[52,48810,48811,48813,48816,48818,48820],{"class":54,"line":594},[52,48812,1756],{"class":58},[52,48814,48815],{"class":73},"'RoundedRect'",[52,48817,1762],{"class":58},[52,48819,7886],{"class":73},[52,48821,1768],{"class":58},[52,48823,48824],{"class":54,"line":600},[52,48825,1773],{"class":58},[52,48827,48828],{"class":54,"line":606},[52,48829,1778],{"class":58},[156,48831,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48833},[48834,48835],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/roundedrect",{"title":48598,"description":48606},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":48842,"title":48843,"body":48844,"category":29304,"componentType":20848,"description":48850,"extension":168,"meta":49167,"navigation":171,"path":49168,"requiresChild":171,"seo":49169,"stem":49170,"__hash__":49171},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":48845,"toc":49163},[48846,48848,48851,48853,48855,48858,48860,49161],[11,48847,48843],{"id":5773},[15,48849,48850],{},"Adjust color saturation intensity",[26901,48852],{"component":48843},[23,48854,26905],{"id":21503},[26907,48856],{":props":48857},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,48859,26913],{"id":26912},[217,48861,48862,48918,48977,49033,49091],{":tabs":1543},[43,48863,48865],{"className":45,"code":48864,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,48866,48867,48875,48882,48890,48894,48902,48910],{"__ignoreMap":48},[52,48868,48869,48871,48873],{"class":54,"line":55},[52,48870,59],{"class":58},[52,48872,63],{"class":62},[52,48874,77],{"class":58},[52,48876,48877,48879],{"class":54,"line":80},[52,48878,83],{"class":58},[52,48880,48881],{"class":62},"Saturation\n",[52,48883,48884,48886,48888],{"class":54,"line":108},[52,48885,17870],{"class":66},[52,48887,70],{"class":58},[52,48889,29360],{"class":73},[52,48891,48892],{"class":54,"line":118},[52,48893,26949],{"class":58},[52,48895,48896,48898,48900],{"class":54,"line":594},[52,48897,2213],{"class":58},[52,48899,2216],{"class":62},[52,48901,105],{"class":58},[52,48903,48904,48906,48908],{"class":54,"line":600},[52,48905,2230],{"class":58},[52,48907,48843],{"class":62},[52,48909,77],{"class":58},[52,48911,48912,48914,48916],{"class":54,"line":606},[52,48913,121],{"class":58},[52,48915,63],{"class":62},[52,48917,77],{"class":58},[43,48919,48921],{"className":360,"code":48920,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,48922,48923,48931,48937,48949,48953,48961,48969],{"__ignoreMap":48},[52,48924,48925,48927,48929],{"class":54,"line":55},[52,48926,59],{"class":58},[52,48928,63],{"class":371},[52,48930,77],{"class":58},[52,48932,48933,48935],{"class":54,"line":80},[52,48934,83],{"class":58},[52,48936,48881],{"class":371},[52,48938,48939,48941,48943,48945,48947],{"class":54,"line":108},[52,48940,17981],{"class":66},[52,48942,70],{"class":231},[52,48944,723],{"class":58},[52,48946,6391],{"class":371},[52,48948,729],{"class":58},[52,48950,48951],{"class":54,"line":118},[52,48952,26949],{"class":58},[52,48954,48955,48957,48959],{"class":54,"line":594},[52,48956,2213],{"class":58},[52,48958,2216],{"class":371},[52,48960,105],{"class":58},[52,48962,48963,48965,48967],{"class":54,"line":600},[52,48964,2230],{"class":58},[52,48966,48843],{"class":371},[52,48968,77],{"class":58},[52,48970,48971,48973,48975],{"class":54,"line":606},[52,48972,121],{"class":58},[52,48974,63],{"class":371},[52,48976,77],{"class":58},[43,48978,48979],{"className":2507,"code":48920,"language":2509,"meta":48,"style":48},[31,48980,48981,48989,48995,49005,49009,49017,49025],{"__ignoreMap":48},[52,48982,48983,48985,48987],{"class":54,"line":55},[52,48984,59],{"class":58},[52,48986,63],{"class":371},[52,48988,77],{"class":58},[52,48990,48991,48993],{"class":54,"line":80},[52,48992,83],{"class":58},[52,48994,48881],{"class":371},[52,48996,48997,48999,49001,49003],{"class":54,"line":108},[52,48998,17981],{"class":66},[52,49000,24845],{"class":58},[52,49002,6391],{"class":371},[52,49004,729],{"class":58},[52,49006,49007],{"class":54,"line":118},[52,49008,26949],{"class":58},[52,49010,49011,49013,49015],{"class":54,"line":594},[52,49012,2213],{"class":58},[52,49014,2216],{"class":371},[52,49016,105],{"class":58},[52,49018,49019,49021,49023],{"class":54,"line":600},[52,49020,2230],{"class":58},[52,49022,48843],{"class":371},[52,49024,77],{"class":58},[52,49026,49027,49029,49031],{"class":54,"line":606},[52,49028,121],{"class":58},[52,49030,63],{"class":371},[52,49032,77],{"class":58},[43,49034,49035],{"className":419,"code":48920,"language":420,"meta":48,"style":48},[31,49036,49037,49045,49051,49063,49067,49075,49083],{"__ignoreMap":48},[52,49038,49039,49041,49043],{"class":54,"line":55},[52,49040,59],{"class":58},[52,49042,63],{"class":371},[52,49044,77],{"class":58},[52,49046,49047,49049],{"class":54,"line":80},[52,49048,83],{"class":58},[52,49050,48881],{"class":371},[52,49052,49053,49055,49057,49059,49061],{"class":54,"line":108},[52,49054,17981],{"class":66},[52,49056,70],{"class":231},[52,49058,723],{"class":58},[52,49060,6391],{"class":371},[52,49062,729],{"class":58},[52,49064,49065],{"class":54,"line":118},[52,49066,26949],{"class":58},[52,49068,49069,49071,49073],{"class":54,"line":594},[52,49070,2213],{"class":58},[52,49072,2216],{"class":371},[52,49074,105],{"class":58},[52,49076,49077,49079,49081],{"class":54,"line":600},[52,49078,2230],{"class":58},[52,49080,48843],{"class":371},[52,49082,77],{"class":58},[52,49084,49085,49087,49089],{"class":54,"line":606},[52,49086,121],{"class":58},[52,49088,63],{"class":371},[52,49090,77],{"class":58},[43,49092,49094],{"className":222,"code":49093,"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,49095,49096,49106,49110,49124,49128,49141,49149,49153,49157],{"__ignoreMap":48},[52,49097,49098,49100,49102,49104],{"class":54,"line":55},[52,49099,232],{"class":231},[52,49101,9231],{"class":58},[52,49103,238],{"class":231},[52,49105,9236],{"class":73},[52,49107,49108],{"class":54,"line":80},[52,49109,597],{"emptyLinePlaceholder":171},[52,49111,49112,49114,49116,49118,49120,49122],{"class":54,"line":108},[52,49113,1721],{"class":231},[52,49115,1724],{"class":371},[52,49117,1727],{"class":231},[52,49119,1730],{"class":231},[52,49121,1733],{"class":66},[52,49123,1736],{"class":58},[52,49125,49126],{"class":54,"line":118},[52,49127,1751],{"class":58},[52,49129,49130,49132,49135,49137,49139],{"class":54,"line":594},[52,49131,1756],{"class":58},[52,49133,49134],{"class":73},"'Saturation'",[52,49136,27194],{"class":58},[52,49138,6391],{"class":371},[52,49140,5259],{"class":58},[52,49142,49143,49145,49147],{"class":54,"line":600},[52,49144,4727],{"class":58},[52,49146,2869],{"class":73},[52,49148,2129],{"class":58},[52,49150,49151],{"class":54,"line":606},[52,49152,4744],{"class":58},[52,49154,49155],{"class":54,"line":653},[52,49156,1773],{"class":58},[52,49158,49159],{"class":54,"line":662},[52,49160,1778],{"class":58},[156,49162,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49164},[49165,49166],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/saturation",{"title":48843,"description":48850},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":49173,"title":49174,"body":49175,"category":29304,"componentType":20848,"description":49182,"extension":168,"meta":49443,"navigation":171,"path":49444,"requiresChild":171,"seo":49445,"stem":49446,"__hash__":49447},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":49176,"toc":49439},[49177,49180,49183,49185,49187,49190,49192,49437],[11,49178,49174],{"id":49179},"sharpness",[15,49181,49182],{},"Adjust image sharpness using a convolution kernel",[26901,49184],{"component":49174},[23,49186,26905],{"id":21503},[26907,49188],{":props":49189},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,49191,26913],{"id":26912},[217,49193,49194,49239,49283,49327,49371],{":tabs":1543},[43,49195,49197],{"className":45,"code":49196,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,49198,49199,49207,49215,49223,49231],{"__ignoreMap":48},[52,49200,49201,49203,49205],{"class":54,"line":55},[52,49202,59],{"class":58},[52,49204,63],{"class":62},[52,49206,77],{"class":58},[52,49208,49209,49211,49213],{"class":54,"line":80},[52,49210,83],{"class":58},[52,49212,49174],{"class":62},[52,49214,77],{"class":58},[52,49216,49217,49219,49221],{"class":54,"line":108},[52,49218,2213],{"class":58},[52,49220,2216],{"class":62},[52,49222,105],{"class":58},[52,49224,49225,49227,49229],{"class":54,"line":118},[52,49226,2230],{"class":58},[52,49228,49174],{"class":62},[52,49230,77],{"class":58},[52,49232,49233,49235,49237],{"class":54,"line":594},[52,49234,121],{"class":58},[52,49236,63],{"class":62},[52,49238,77],{"class":58},[43,49240,49241],{"className":360,"code":49196,"language":362,"meta":48,"style":48},[31,49242,49243,49251,49259,49267,49275],{"__ignoreMap":48},[52,49244,49245,49247,49249],{"class":54,"line":55},[52,49246,59],{"class":58},[52,49248,63],{"class":371},[52,49250,77],{"class":58},[52,49252,49253,49255,49257],{"class":54,"line":80},[52,49254,83],{"class":58},[52,49256,49174],{"class":371},[52,49258,77],{"class":58},[52,49260,49261,49263,49265],{"class":54,"line":108},[52,49262,2213],{"class":58},[52,49264,2216],{"class":371},[52,49266,105],{"class":58},[52,49268,49269,49271,49273],{"class":54,"line":118},[52,49270,2230],{"class":58},[52,49272,49174],{"class":371},[52,49274,77],{"class":58},[52,49276,49277,49279,49281],{"class":54,"line":594},[52,49278,121],{"class":58},[52,49280,63],{"class":371},[52,49282,77],{"class":58},[43,49284,49285],{"className":2507,"code":49196,"language":2509,"meta":48,"style":48},[31,49286,49287,49295,49303,49311,49319],{"__ignoreMap":48},[52,49288,49289,49291,49293],{"class":54,"line":55},[52,49290,59],{"class":58},[52,49292,63],{"class":371},[52,49294,77],{"class":58},[52,49296,49297,49299,49301],{"class":54,"line":80},[52,49298,83],{"class":58},[52,49300,49174],{"class":371},[52,49302,77],{"class":58},[52,49304,49305,49307,49309],{"class":54,"line":108},[52,49306,2213],{"class":58},[52,49308,2216],{"class":371},[52,49310,105],{"class":58},[52,49312,49313,49315,49317],{"class":54,"line":118},[52,49314,2230],{"class":58},[52,49316,49174],{"class":371},[52,49318,77],{"class":58},[52,49320,49321,49323,49325],{"class":54,"line":594},[52,49322,121],{"class":58},[52,49324,63],{"class":371},[52,49326,77],{"class":58},[43,49328,49329],{"className":419,"code":49196,"language":420,"meta":48,"style":48},[31,49330,49331,49339,49347,49355,49363],{"__ignoreMap":48},[52,49332,49333,49335,49337],{"class":54,"line":55},[52,49334,59],{"class":58},[52,49336,63],{"class":371},[52,49338,77],{"class":58},[52,49340,49341,49343,49345],{"class":54,"line":80},[52,49342,83],{"class":58},[52,49344,49174],{"class":371},[52,49346,77],{"class":58},[52,49348,49349,49351,49353],{"class":54,"line":108},[52,49350,2213],{"class":58},[52,49352,2216],{"class":371},[52,49354,105],{"class":58},[52,49356,49357,49359,49361],{"class":54,"line":118},[52,49358,2230],{"class":58},[52,49360,49174],{"class":371},[52,49362,77],{"class":58},[52,49364,49365,49367,49369],{"class":54,"line":594},[52,49366,121],{"class":58},[52,49368,63],{"class":371},[52,49370,77],{"class":58},[43,49372,49374],{"className":222,"code":49373,"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,49375,49376,49386,49390,49404,49408,49417,49425,49429,49433],{"__ignoreMap":48},[52,49377,49378,49380,49382,49384],{"class":54,"line":55},[52,49379,232],{"class":231},[52,49381,9231],{"class":58},[52,49383,238],{"class":231},[52,49385,9236],{"class":73},[52,49387,49388],{"class":54,"line":80},[52,49389,597],{"emptyLinePlaceholder":171},[52,49391,49392,49394,49396,49398,49400,49402],{"class":54,"line":108},[52,49393,1721],{"class":231},[52,49395,1724],{"class":371},[52,49397,1727],{"class":231},[52,49399,1730],{"class":231},[52,49401,1733],{"class":66},[52,49403,1736],{"class":58},[52,49405,49406],{"class":54,"line":118},[52,49407,1751],{"class":58},[52,49409,49410,49412,49415],{"class":54,"line":594},[52,49411,1756],{"class":58},[52,49413,49414],{"class":73},"'Sharpness'",[52,49416,4722],{"class":58},[52,49418,49419,49421,49423],{"class":54,"line":600},[52,49420,4727],{"class":58},[52,49422,2869],{"class":73},[52,49424,2129],{"class":58},[52,49426,49427],{"class":54,"line":606},[52,49428,4744],{"class":58},[52,49430,49431],{"class":54,"line":653},[52,49432,1773],{"class":58},[52,49434,49435],{"class":54,"line":662},[52,49436,1778],{"class":58},[156,49438,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":49440},[49441,49442],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sharpness",{"title":49174,"description":49182},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":49449,"title":49450,"body":49451,"category":30893,"componentType":20848,"description":49458,"extension":168,"meta":49823,"navigation":171,"path":49824,"requiresChild":171,"seo":49825,"stem":49826,"__hash__":49827},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":49452,"toc":49819},[49453,49456,49459,49461,49463,49466,49468,49817],[11,49454,49450],{"id":49455},"shatter",[15,49457,49458],{},"Broken glass effect with tectonic plate displacement",[26901,49460],{"component":49450},[23,49462,26905],{"id":21503},[26907,49464],{":props":49465},"[{\"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,49467,26913],{"id":26912},[217,49469,49470,49535,49607,49673,49743],{":tabs":1543},[43,49471,49473],{"className":45,"code":49472,"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,49474,49475,49483,49490,49499,49507,49511,49519,49527],{"__ignoreMap":48},[52,49476,49477,49479,49481],{"class":54,"line":55},[52,49478,59],{"class":58},[52,49480,63],{"class":62},[52,49482,77],{"class":58},[52,49484,49485,49487],{"class":54,"line":80},[52,49486,83],{"class":58},[52,49488,49489],{"class":62},"Shatter\n",[52,49491,49492,49494,49496],{"class":54,"line":108},[52,49493,17870],{"class":66},[52,49495,70],{"class":58},[52,49497,49498],{"class":73},"\"4\"\n",[52,49500,49501,49503,49505],{"class":54,"line":118},[52,49502,14901],{"class":66},[52,49504,70],{"class":58},[52,49506,37396],{"class":73},[52,49508,49509],{"class":54,"line":594},[52,49510,26949],{"class":58},[52,49512,49513,49515,49517],{"class":54,"line":600},[52,49514,2213],{"class":58},[52,49516,2216],{"class":62},[52,49518,105],{"class":58},[52,49520,49521,49523,49525],{"class":54,"line":606},[52,49522,2230],{"class":58},[52,49524,49450],{"class":62},[52,49526,77],{"class":58},[52,49528,49529,49531,49533],{"class":54,"line":653},[52,49530,121],{"class":58},[52,49532,63],{"class":62},[52,49534,77],{"class":58},[43,49536,49538],{"className":360,"code":49537,"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,49539,49540,49548,49554,49567,49579,49583,49591,49599],{"__ignoreMap":48},[52,49541,49542,49544,49546],{"class":54,"line":55},[52,49543,59],{"class":58},[52,49545,63],{"class":371},[52,49547,77],{"class":58},[52,49549,49550,49552],{"class":54,"line":80},[52,49551,83],{"class":58},[52,49553,49489],{"class":371},[52,49555,49556,49558,49560,49562,49565],{"class":54,"line":108},[52,49557,17981],{"class":66},[52,49559,70],{"class":231},[52,49561,723],{"class":58},[52,49563,49564],{"class":371},"4",[52,49566,729],{"class":58},[52,49568,49569,49571,49573,49575,49577],{"class":54,"line":118},[52,49570,7361],{"class":66},[52,49572,70],{"class":231},[52,49574,723],{"class":58},[52,49576,5963],{"class":371},[52,49578,729],{"class":58},[52,49580,49581],{"class":54,"line":594},[52,49582,26949],{"class":58},[52,49584,49585,49587,49589],{"class":54,"line":600},[52,49586,2213],{"class":58},[52,49588,2216],{"class":371},[52,49590,105],{"class":58},[52,49592,49593,49595,49597],{"class":54,"line":606},[52,49594,2230],{"class":58},[52,49596,49450],{"class":371},[52,49598,77],{"class":58},[52,49600,49601,49603,49605],{"class":54,"line":653},[52,49602,121],{"class":58},[52,49604,63],{"class":371},[52,49606,77],{"class":58},[43,49608,49609],{"className":2507,"code":49537,"language":2509,"meta":48,"style":48},[31,49610,49611,49619,49625,49635,49645,49649,49657,49665],{"__ignoreMap":48},[52,49612,49613,49615,49617],{"class":54,"line":55},[52,49614,59],{"class":58},[52,49616,63],{"class":371},[52,49618,77],{"class":58},[52,49620,49621,49623],{"class":54,"line":80},[52,49622,83],{"class":58},[52,49624,49489],{"class":371},[52,49626,49627,49629,49631,49633],{"class":54,"line":108},[52,49628,17981],{"class":66},[52,49630,24845],{"class":58},[52,49632,49564],{"class":371},[52,49634,729],{"class":58},[52,49636,49637,49639,49641,49643],{"class":54,"line":118},[52,49638,7361],{"class":66},[52,49640,24845],{"class":58},[52,49642,5963],{"class":371},[52,49644,729],{"class":58},[52,49646,49647],{"class":54,"line":594},[52,49648,26949],{"class":58},[52,49650,49651,49653,49655],{"class":54,"line":600},[52,49652,2213],{"class":58},[52,49654,2216],{"class":371},[52,49656,105],{"class":58},[52,49658,49659,49661,49663],{"class":54,"line":606},[52,49660,2230],{"class":58},[52,49662,49450],{"class":371},[52,49664,77],{"class":58},[52,49666,49667,49669,49671],{"class":54,"line":653},[52,49668,121],{"class":58},[52,49670,63],{"class":371},[52,49672,77],{"class":58},[43,49674,49675],{"className":419,"code":49537,"language":420,"meta":48,"style":48},[31,49676,49677,49685,49691,49703,49715,49719,49727,49735],{"__ignoreMap":48},[52,49678,49679,49681,49683],{"class":54,"line":55},[52,49680,59],{"class":58},[52,49682,63],{"class":371},[52,49684,77],{"class":58},[52,49686,49687,49689],{"class":54,"line":80},[52,49688,83],{"class":58},[52,49690,49489],{"class":371},[52,49692,49693,49695,49697,49699,49701],{"class":54,"line":108},[52,49694,17981],{"class":66},[52,49696,70],{"class":231},[52,49698,723],{"class":58},[52,49700,49564],{"class":371},[52,49702,729],{"class":58},[52,49704,49705,49707,49709,49711,49713],{"class":54,"line":118},[52,49706,7361],{"class":66},[52,49708,70],{"class":231},[52,49710,723],{"class":58},[52,49712,5963],{"class":371},[52,49714,729],{"class":58},[52,49716,49717],{"class":54,"line":594},[52,49718,26949],{"class":58},[52,49720,49721,49723,49725],{"class":54,"line":600},[52,49722,2213],{"class":58},[52,49724,2216],{"class":371},[52,49726,105],{"class":58},[52,49728,49729,49731,49733],{"class":54,"line":606},[52,49730,2230],{"class":58},[52,49732,49450],{"class":371},[52,49734,77],{"class":58},[52,49736,49737,49739,49741],{"class":54,"line":653},[52,49738,121],{"class":58},[52,49740,63],{"class":371},[52,49742,77],{"class":58},[43,49744,49746],{"className":222,"code":49745,"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,49747,49748,49758,49762,49776,49780,49797,49805,49809,49813],{"__ignoreMap":48},[52,49749,49750,49752,49754,49756],{"class":54,"line":55},[52,49751,232],{"class":231},[52,49753,9231],{"class":58},[52,49755,238],{"class":231},[52,49757,9236],{"class":73},[52,49759,49760],{"class":54,"line":80},[52,49761,597],{"emptyLinePlaceholder":171},[52,49763,49764,49766,49768,49770,49772,49774],{"class":54,"line":108},[52,49765,1721],{"class":231},[52,49767,1724],{"class":371},[52,49769,1727],{"class":231},[52,49771,1730],{"class":231},[52,49773,1733],{"class":66},[52,49775,1736],{"class":58},[52,49777,49778],{"class":54,"line":118},[52,49779,1751],{"class":58},[52,49781,49782,49784,49787,49789,49791,49793,49795],{"class":54,"line":594},[52,49783,1756],{"class":58},[52,49785,49786],{"class":73},"'Shatter'",[52,49788,27194],{"class":58},[52,49790,49564],{"class":371},[52,49792,4278],{"class":58},[52,49794,5963],{"class":371},[52,49796,5259],{"class":58},[52,49798,49799,49801,49803],{"class":54,"line":600},[52,49800,4727],{"class":58},[52,49802,2869],{"class":73},[52,49804,2129],{"class":58},[52,49806,49807],{"class":54,"line":606},[52,49808,4744],{"class":58},[52,49810,49811],{"class":54,"line":653},[52,49812,1773],{"class":58},[52,49814,49815],{"class":54,"line":662},[52,49816,1778],{"class":58},[156,49818,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49820},[49821,49822],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/shatter",{"title":49450,"description":49458},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":49829,"title":49830,"body":49831,"category":27760,"componentType":20842,"description":49838,"extension":168,"meta":50023,"navigation":171,"path":50024,"requiresChild":27763,"seo":50025,"stem":50026,"__hash__":50027},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":49832,"toc":50019},[49833,49836,49839,49841,49843,49846,49848,50017],[11,49834,49830],{"id":49835},"simplexnoise",[15,49837,49838],{},"Organic noise with animated movement",[26901,49840],{"component":49830},[23,49842,26905],{"id":21503},[26907,49844],{":props":49845},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"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,49847,26913],{"id":26912},[217,49849,49850,49879,49907,49935,49963],{":tabs":1543},[43,49851,49853],{"className":45,"code":49852,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,49854,49855,49863,49871],{"__ignoreMap":48},[52,49856,49857,49859,49861],{"class":54,"line":55},[52,49858,59],{"class":58},[52,49860,63],{"class":62},[52,49862,77],{"class":58},[52,49864,49865,49867,49869],{"class":54,"line":80},[52,49866,83],{"class":58},[52,49868,49830],{"class":62},[52,49870,105],{"class":58},[52,49872,49873,49875,49877],{"class":54,"line":108},[52,49874,121],{"class":58},[52,49876,63],{"class":62},[52,49878,77],{"class":58},[43,49880,49881],{"className":360,"code":49852,"language":362,"meta":48,"style":48},[31,49882,49883,49891,49899],{"__ignoreMap":48},[52,49884,49885,49887,49889],{"class":54,"line":55},[52,49886,59],{"class":58},[52,49888,63],{"class":371},[52,49890,77],{"class":58},[52,49892,49893,49895,49897],{"class":54,"line":80},[52,49894,83],{"class":58},[52,49896,49830],{"class":371},[52,49898,105],{"class":58},[52,49900,49901,49903,49905],{"class":54,"line":108},[52,49902,121],{"class":58},[52,49904,63],{"class":371},[52,49906,77],{"class":58},[43,49908,49909],{"className":2507,"code":49852,"language":2509,"meta":48,"style":48},[31,49910,49911,49919,49927],{"__ignoreMap":48},[52,49912,49913,49915,49917],{"class":54,"line":55},[52,49914,59],{"class":58},[52,49916,63],{"class":371},[52,49918,77],{"class":58},[52,49920,49921,49923,49925],{"class":54,"line":80},[52,49922,83],{"class":58},[52,49924,49830],{"class":371},[52,49926,105],{"class":58},[52,49928,49929,49931,49933],{"class":54,"line":108},[52,49930,121],{"class":58},[52,49932,63],{"class":371},[52,49934,77],{"class":58},[43,49936,49937],{"className":419,"code":49852,"language":420,"meta":48,"style":48},[31,49938,49939,49947,49955],{"__ignoreMap":48},[52,49940,49941,49943,49945],{"class":54,"line":55},[52,49942,59],{"class":58},[52,49944,63],{"class":371},[52,49946,77],{"class":58},[52,49948,49949,49951,49953],{"class":54,"line":80},[52,49950,83],{"class":58},[52,49952,49830],{"class":371},[52,49954,105],{"class":58},[52,49956,49957,49959,49961],{"class":54,"line":108},[52,49958,121],{"class":58},[52,49960,63],{"class":371},[52,49962,77],{"class":58},[43,49964,49966],{"className":222,"code":49965,"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,49967,49968,49978,49982,49996,50000,50009,50013],{"__ignoreMap":48},[52,49969,49970,49972,49974,49976],{"class":54,"line":55},[52,49971,232],{"class":231},[52,49973,9231],{"class":58},[52,49975,238],{"class":231},[52,49977,9236],{"class":73},[52,49979,49980],{"class":54,"line":80},[52,49981,597],{"emptyLinePlaceholder":171},[52,49983,49984,49986,49988,49990,49992,49994],{"class":54,"line":108},[52,49985,1721],{"class":231},[52,49987,1724],{"class":371},[52,49989,1727],{"class":231},[52,49991,1730],{"class":231},[52,49993,1733],{"class":66},[52,49995,1736],{"class":58},[52,49997,49998],{"class":54,"line":118},[52,49999,1751],{"class":58},[52,50001,50002,50004,50007],{"class":54,"line":594},[52,50003,1756],{"class":58},[52,50005,50006],{"class":73},"'SimplexNoise'",[52,50008,2129],{"class":58},[52,50010,50011],{"class":54,"line":600},[52,50012,1773],{"class":58},[52,50014,50015],{"class":54,"line":606},[52,50016,1778],{"class":58},[156,50018,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50020},[50021,50022],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/simplexnoise",{"title":49830,"description":49838},"docs/components/SimplexNoise","KNcXL2wbKgGgSnsoHqms_WjmnUJW2QZShY-VZADNNPc",{"id":50029,"title":50030,"body":50031,"category":27760,"componentType":20842,"description":50038,"extension":168,"meta":50268,"navigation":171,"path":50269,"requiresChild":27763,"seo":50270,"stem":50271,"__hash__":50272},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":50032,"toc":50264},[50033,50036,50039,50041,50043,50046,50048,50262],[11,50034,50030],{"id":50035},"sinewave",[15,50037,50038],{},"Animated wave with thickness and softness",[26901,50040],{"component":50030},[23,50042,26905],{"id":21503},[26907,50044],{":props":50045},"[{\"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,50047,26913],{"id":26912},[217,50049,50050,50090,50128,50166,50204],{":tabs":1543},[43,50051,50053],{"className":45,"code":50052,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,50054,50055,50063,50070,50078,50082],{"__ignoreMap":48},[52,50056,50057,50059,50061],{"class":54,"line":55},[52,50058,59],{"class":58},[52,50060,63],{"class":62},[52,50062,77],{"class":58},[52,50064,50065,50067],{"class":54,"line":80},[52,50066,83],{"class":58},[52,50068,50069],{"class":62},"SineWave\n",[52,50071,50072,50074,50076],{"class":54,"line":108},[52,50073,7351],{"class":66},[52,50075,70],{"class":58},[52,50077,7307],{"class":73},[52,50079,50080],{"class":54,"line":118},[52,50081,1224],{"class":58},[52,50083,50084,50086,50088],{"class":54,"line":594},[52,50085,121],{"class":58},[52,50087,63],{"class":62},[52,50089,77],{"class":58},[43,50091,50092],{"className":360,"code":50052,"language":362,"meta":48,"style":48},[31,50093,50094,50102,50108,50116,50120],{"__ignoreMap":48},[52,50095,50096,50098,50100],{"class":54,"line":55},[52,50097,59],{"class":58},[52,50099,63],{"class":371},[52,50101,77],{"class":58},[52,50103,50104,50106],{"class":54,"line":80},[52,50105,83],{"class":58},[52,50107,50069],{"class":371},[52,50109,50110,50112,50114],{"class":54,"line":108},[52,50111,7351],{"class":66},[52,50113,70],{"class":231},[52,50115,7307],{"class":73},[52,50117,50118],{"class":54,"line":118},[52,50119,1224],{"class":58},[52,50121,50122,50124,50126],{"class":54,"line":594},[52,50123,121],{"class":58},[52,50125,63],{"class":371},[52,50127,77],{"class":58},[43,50129,50130],{"className":2507,"code":50052,"language":2509,"meta":48,"style":48},[31,50131,50132,50140,50146,50154,50158],{"__ignoreMap":48},[52,50133,50134,50136,50138],{"class":54,"line":55},[52,50135,59],{"class":58},[52,50137,63],{"class":371},[52,50139,77],{"class":58},[52,50141,50142,50144],{"class":54,"line":80},[52,50143,83],{"class":58},[52,50145,50069],{"class":371},[52,50147,50148,50150,50152],{"class":54,"line":108},[52,50149,7351],{"class":66},[52,50151,70],{"class":58},[52,50153,7307],{"class":73},[52,50155,50156],{"class":54,"line":118},[52,50157,1224],{"class":58},[52,50159,50160,50162,50164],{"class":54,"line":594},[52,50161,121],{"class":58},[52,50163,63],{"class":371},[52,50165,77],{"class":58},[43,50167,50168],{"className":419,"code":50052,"language":420,"meta":48,"style":48},[31,50169,50170,50178,50184,50192,50196],{"__ignoreMap":48},[52,50171,50172,50174,50176],{"class":54,"line":55},[52,50173,59],{"class":58},[52,50175,63],{"class":371},[52,50177,77],{"class":58},[52,50179,50180,50182],{"class":54,"line":80},[52,50181,83],{"class":58},[52,50183,50069],{"class":371},[52,50185,50186,50188,50190],{"class":54,"line":108},[52,50187,7351],{"class":66},[52,50189,70],{"class":231},[52,50191,7307],{"class":73},[52,50193,50194],{"class":54,"line":118},[52,50195,1224],{"class":58},[52,50197,50198,50200,50202],{"class":54,"line":594},[52,50199,121],{"class":58},[52,50201,63],{"class":371},[52,50203,77],{"class":58},[43,50205,50207],{"className":222,"code":50206,"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,50208,50209,50219,50223,50237,50241,50254,50258],{"__ignoreMap":48},[52,50210,50211,50213,50215,50217],{"class":54,"line":55},[52,50212,232],{"class":231},[52,50214,9231],{"class":58},[52,50216,238],{"class":231},[52,50218,9236],{"class":73},[52,50220,50221],{"class":54,"line":80},[52,50222,597],{"emptyLinePlaceholder":171},[52,50224,50225,50227,50229,50231,50233,50235],{"class":54,"line":108},[52,50226,1721],{"class":231},[52,50228,1724],{"class":371},[52,50230,1727],{"class":231},[52,50232,1730],{"class":231},[52,50234,1733],{"class":66},[52,50236,1736],{"class":58},[52,50238,50239],{"class":54,"line":118},[52,50240,1751],{"class":58},[52,50242,50243,50245,50248,50250,50252],{"class":54,"line":594},[52,50244,1756],{"class":58},[52,50246,50247],{"class":73},"'SineWave'",[52,50249,1762],{"class":58},[52,50251,7886],{"class":73},[52,50253,1768],{"class":58},[52,50255,50256],{"class":54,"line":600},[52,50257,1773],{"class":58},[52,50259,50260],{"class":54,"line":606},[52,50261,1778],{"class":58},[156,50263,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50265},[50266,50267],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sinewave",{"title":50030,"description":50038},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":50274,"title":50275,"body":50276,"category":30893,"componentType":20842,"description":50283,"extension":168,"meta":50524,"navigation":171,"path":50525,"requiresChild":27763,"seo":50526,"stem":50527,"__hash__":50528},"components/docs/components/Smoke.md","Smoke",{"type":8,"value":50277,"toc":50520},[50278,50281,50284,50286,50288,50291,50293,50518],[11,50279,50275],{"id":50280},"smoke",[15,50282,50283],{},"Realistic fluid smoke simulation with vorticity dynamics",[26901,50285],{"component":50275},[23,50287,26905],{"id":21503},[26907,50289],{":props":50290},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#fc83f9\",\"description\":\"Color of fresh smoke\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#c21c79\",\"description\":\"Color smoke transitions to as it ages\"},{\"name\":\"emitFrom\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":1}\",\"description\":\"The emission source point\"},{\"name\":\"direction\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Emission direction (0 = up, 90 = right, 180 = down, 270 = left)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Emission velocity strength\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"60\",\"description\":\"Emission cone angle in degrees\"},{\"name\":\"emitRadius\",\"type\":\"number\",\"default\":\"0.08\",\"description\":\"Size of the emission area\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Smoke emission density\"},{\"name\":\"dissipation\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"How fast smoke fades over time\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"25\",\"description\":\"Fine-scale swirling detail\"},{\"name\":\"gravity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Downward gravitational pull on smoke\"},{\"name\":\"colorDecay\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How quickly smoke shifts from Color A to Color B\"},{\"name\":\"mouseInfluence\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Strength of cursor influence\"},{\"name\":\"mouseRadius\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Radius of cursor influence area\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,50292,26913],{"id":26912},[217,50294,50295,50335,50378,50418,50460],{":tabs":1543},[43,50296,50298],{"className":45,"code":50297,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n />\n\u003C/Shader>\n",[31,50299,50300,50308,50315,50323,50327],{"__ignoreMap":48},[52,50301,50302,50304,50306],{"class":54,"line":55},[52,50303,59],{"class":58},[52,50305,63],{"class":62},[52,50307,77],{"class":58},[52,50309,50310,50312],{"class":54,"line":80},[52,50311,83],{"class":58},[52,50313,50314],{"class":62},"Smoke\n",[52,50316,50317,50319,50321],{"class":54,"line":108},[52,50318,17870],{"class":66},[52,50320,70],{"class":58},[52,50322,29360],{"class":73},[52,50324,50325],{"class":54,"line":118},[52,50326,1224],{"class":58},[52,50328,50329,50331,50333],{"class":54,"line":594},[52,50330,121],{"class":58},[52,50332,63],{"class":62},[52,50334,77],{"class":58},[43,50336,50338],{"className":360,"code":50337,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSmoke\n intensity={1}\n />\n\u003C/Shader>\n",[31,50339,50340,50348,50354,50366,50370],{"__ignoreMap":48},[52,50341,50342,50344,50346],{"class":54,"line":55},[52,50343,59],{"class":58},[52,50345,63],{"class":371},[52,50347,77],{"class":58},[52,50349,50350,50352],{"class":54,"line":80},[52,50351,83],{"class":58},[52,50353,50314],{"class":371},[52,50355,50356,50358,50360,50362,50364],{"class":54,"line":108},[52,50357,17981],{"class":66},[52,50359,70],{"class":231},[52,50361,723],{"class":58},[52,50363,6391],{"class":371},[52,50365,729],{"class":58},[52,50367,50368],{"class":54,"line":118},[52,50369,1224],{"class":58},[52,50371,50372,50374,50376],{"class":54,"line":594},[52,50373,121],{"class":58},[52,50375,63],{"class":371},[52,50377,77],{"class":58},[43,50379,50380],{"className":2507,"code":50337,"language":2509,"meta":48,"style":48},[31,50381,50382,50390,50396,50406,50410],{"__ignoreMap":48},[52,50383,50384,50386,50388],{"class":54,"line":55},[52,50385,59],{"class":58},[52,50387,63],{"class":371},[52,50389,77],{"class":58},[52,50391,50392,50394],{"class":54,"line":80},[52,50393,83],{"class":58},[52,50395,50314],{"class":371},[52,50397,50398,50400,50402,50404],{"class":54,"line":108},[52,50399,17981],{"class":66},[52,50401,24845],{"class":58},[52,50403,6391],{"class":371},[52,50405,729],{"class":58},[52,50407,50408],{"class":54,"line":118},[52,50409,1224],{"class":58},[52,50411,50412,50414,50416],{"class":54,"line":594},[52,50413,121],{"class":58},[52,50415,63],{"class":371},[52,50417,77],{"class":58},[43,50419,50420],{"className":419,"code":50337,"language":420,"meta":48,"style":48},[31,50421,50422,50430,50436,50448,50452],{"__ignoreMap":48},[52,50423,50424,50426,50428],{"class":54,"line":55},[52,50425,59],{"class":58},[52,50427,63],{"class":371},[52,50429,77],{"class":58},[52,50431,50432,50434],{"class":54,"line":80},[52,50433,83],{"class":58},[52,50435,50314],{"class":371},[52,50437,50438,50440,50442,50444,50446],{"class":54,"line":108},[52,50439,17981],{"class":66},[52,50441,70],{"class":231},[52,50443,723],{"class":58},[52,50445,6391],{"class":371},[52,50447,729],{"class":58},[52,50449,50450],{"class":54,"line":118},[52,50451,1224],{"class":58},[52,50453,50454,50456,50458],{"class":54,"line":594},[52,50455,121],{"class":58},[52,50457,63],{"class":371},[52,50459,77],{"class":58},[43,50461,50463],{"className":222,"code":50462,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Smoke', props: { intensity: 1 } }\n ]\n})\n",[31,50464,50465,50475,50479,50493,50497,50510,50514],{"__ignoreMap":48},[52,50466,50467,50469,50471,50473],{"class":54,"line":55},[52,50468,232],{"class":231},[52,50470,9231],{"class":58},[52,50472,238],{"class":231},[52,50474,9236],{"class":73},[52,50476,50477],{"class":54,"line":80},[52,50478,597],{"emptyLinePlaceholder":171},[52,50480,50481,50483,50485,50487,50489,50491],{"class":54,"line":108},[52,50482,1721],{"class":231},[52,50484,1724],{"class":371},[52,50486,1727],{"class":231},[52,50488,1730],{"class":231},[52,50490,1733],{"class":66},[52,50492,1736],{"class":58},[52,50494,50495],{"class":54,"line":118},[52,50496,1751],{"class":58},[52,50498,50499,50501,50504,50506,50508],{"class":54,"line":594},[52,50500,1756],{"class":58},[52,50502,50503],{"class":73},"'Smoke'",[52,50505,27194],{"class":58},[52,50507,6391],{"class":371},[52,50509,1768],{"class":58},[52,50511,50512],{"class":54,"line":600},[52,50513,1773],{"class":58},[52,50515,50516],{"class":54,"line":606},[52,50517,1778],{"class":58},[156,50519,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50521},[50522,50523],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/smoke",{"title":50275,"description":50283},"docs/components/Smoke","UlHnB8tb_DN-xqO6eQIWRUBXGMCzqvfmm7_SL-0BaIs",{"id":50530,"title":50531,"body":50532,"category":33330,"componentType":20842,"description":50539,"extension":168,"meta":50780,"navigation":171,"path":50781,"requiresChild":27763,"seo":50782,"stem":50783,"__hash__":50784},"components/docs/components/SmokeFill.md","SmokeFill",{"type":8,"value":50533,"toc":50776},[50534,50537,50540,50542,50544,50547,50549,50774],[11,50535,50531],{"id":50536},"smokefill",[15,50538,50539],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[26901,50541],{"component":50531},[23,50543,26905],{"id":21503},[26907,50545],{":props":50546},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#8cf3ff\",\"description\":\"Color of fresh smoke\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#04a0d6\",\"description\":\"Color smoke transitions to as it ages\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the shape (1 = default size)\"},{\"name\":\"emitFrom\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Emission source point within the shape\"},{\"name\":\"direction\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Emission direction (0 = up, 90 = right, 180 = down, 270 = left)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Emission velocity strength\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"60\",\"description\":\"Emission cone angle in degrees\"},{\"name\":\"emitRadius\",\"type\":\"number\",\"default\":\"0.03\",\"description\":\"Size of the emission area\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Smoke emission density\"},{\"name\":\"dissipation\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"How fast smoke fades over time\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"25\",\"description\":\"Fine-scale swirling detail\"},{\"name\":\"gravity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Downward gravitational pull on smoke — 0 = weightless, negative values = smoke rises\"},{\"name\":\"colorDecay\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"How quickly smoke shifts from Color A to Color B\"},{\"name\":\"mouseInfluence\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Strength of cursor influence\"},{\"name\":\"mouseRadius\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Radius of cursor influence area\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"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,50548,26913],{"id":26912},[217,50550,50551,50591,50634,50674,50716],{":tabs":1543},[43,50552,50554],{"className":45,"code":50553,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n />\n\u003C/Shader>\n",[31,50555,50556,50564,50571,50579,50583],{"__ignoreMap":48},[52,50557,50558,50560,50562],{"class":54,"line":55},[52,50559,59],{"class":58},[52,50561,63],{"class":62},[52,50563,77],{"class":58},[52,50565,50566,50568],{"class":54,"line":80},[52,50567,83],{"class":58},[52,50569,50570],{"class":62},"SmokeFill\n",[52,50572,50573,50575,50577],{"class":54,"line":108},[52,50574,17870],{"class":66},[52,50576,70],{"class":58},[52,50578,29360],{"class":73},[52,50580,50581],{"class":54,"line":118},[52,50582,1224],{"class":58},[52,50584,50585,50587,50589],{"class":54,"line":594},[52,50586,121],{"class":58},[52,50588,63],{"class":62},[52,50590,77],{"class":58},[43,50592,50594],{"className":360,"code":50593,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n />\n\u003C/Shader>\n",[31,50595,50596,50604,50610,50622,50626],{"__ignoreMap":48},[52,50597,50598,50600,50602],{"class":54,"line":55},[52,50599,59],{"class":58},[52,50601,63],{"class":371},[52,50603,77],{"class":58},[52,50605,50606,50608],{"class":54,"line":80},[52,50607,83],{"class":58},[52,50609,50570],{"class":371},[52,50611,50612,50614,50616,50618,50620],{"class":54,"line":108},[52,50613,17981],{"class":66},[52,50615,70],{"class":231},[52,50617,723],{"class":58},[52,50619,6391],{"class":371},[52,50621,729],{"class":58},[52,50623,50624],{"class":54,"line":118},[52,50625,1224],{"class":58},[52,50627,50628,50630,50632],{"class":54,"line":594},[52,50629,121],{"class":58},[52,50631,63],{"class":371},[52,50633,77],{"class":58},[43,50635,50636],{"className":2507,"code":50593,"language":2509,"meta":48,"style":48},[31,50637,50638,50646,50652,50662,50666],{"__ignoreMap":48},[52,50639,50640,50642,50644],{"class":54,"line":55},[52,50641,59],{"class":58},[52,50643,63],{"class":371},[52,50645,77],{"class":58},[52,50647,50648,50650],{"class":54,"line":80},[52,50649,83],{"class":58},[52,50651,50570],{"class":371},[52,50653,50654,50656,50658,50660],{"class":54,"line":108},[52,50655,17981],{"class":66},[52,50657,24845],{"class":58},[52,50659,6391],{"class":371},[52,50661,729],{"class":58},[52,50663,50664],{"class":54,"line":118},[52,50665,1224],{"class":58},[52,50667,50668,50670,50672],{"class":54,"line":594},[52,50669,121],{"class":58},[52,50671,63],{"class":371},[52,50673,77],{"class":58},[43,50675,50676],{"className":419,"code":50593,"language":420,"meta":48,"style":48},[31,50677,50678,50686,50692,50704,50708],{"__ignoreMap":48},[52,50679,50680,50682,50684],{"class":54,"line":55},[52,50681,59],{"class":58},[52,50683,63],{"class":371},[52,50685,77],{"class":58},[52,50687,50688,50690],{"class":54,"line":80},[52,50689,83],{"class":58},[52,50691,50570],{"class":371},[52,50693,50694,50696,50698,50700,50702],{"class":54,"line":108},[52,50695,17981],{"class":66},[52,50697,70],{"class":231},[52,50699,723],{"class":58},[52,50701,6391],{"class":371},[52,50703,729],{"class":58},[52,50705,50706],{"class":54,"line":118},[52,50707,1224],{"class":58},[52,50709,50710,50712,50714],{"class":54,"line":594},[52,50711,121],{"class":58},[52,50713,63],{"class":371},[52,50715,77],{"class":58},[43,50717,50719],{"className":222,"code":50718,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SmokeFill', props: { intensity: 1 } }\n ]\n})\n",[31,50720,50721,50731,50735,50749,50753,50766,50770],{"__ignoreMap":48},[52,50722,50723,50725,50727,50729],{"class":54,"line":55},[52,50724,232],{"class":231},[52,50726,9231],{"class":58},[52,50728,238],{"class":231},[52,50730,9236],{"class":73},[52,50732,50733],{"class":54,"line":80},[52,50734,597],{"emptyLinePlaceholder":171},[52,50736,50737,50739,50741,50743,50745,50747],{"class":54,"line":108},[52,50738,1721],{"class":231},[52,50740,1724],{"class":371},[52,50742,1727],{"class":231},[52,50744,1730],{"class":231},[52,50746,1733],{"class":66},[52,50748,1736],{"class":58},[52,50750,50751],{"class":54,"line":118},[52,50752,1751],{"class":58},[52,50754,50755,50757,50760,50762,50764],{"class":54,"line":594},[52,50756,1756],{"class":58},[52,50758,50759],{"class":73},"'SmokeFill'",[52,50761,27194],{"class":58},[52,50763,6391],{"class":371},[52,50765,1768],{"class":58},[52,50767,50768],{"class":54,"line":600},[52,50769,1773],{"class":58},[52,50771,50772],{"class":54,"line":606},[52,50773,1778],{"class":58},[156,50775,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50777},[50778,50779],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/smokefill",{"title":50531,"description":50539},"docs/components/SmokeFill","In59IIGncxhyBU-LL6PQlelo0dbxYCegEfikyN-CYT4",{"id":50786,"title":50787,"body":50788,"category":29304,"componentType":20848,"description":50795,"extension":168,"meta":51056,"navigation":171,"path":51057,"requiresChild":171,"seo":51058,"stem":51059,"__hash__":51060},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":50789,"toc":51052},[50790,50793,50796,50798,50800,50803,50805,51050],[11,50791,50787],{"id":50792},"solarize",[15,50794,50795],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26901,50797],{"component":50787},[23,50799,26905],{"id":21503},[26907,50801],{":props":50802},"[{\"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,50804,26913],{"id":26912},[217,50806,50807,50852,50896,50940,50984],{":tabs":1543},[43,50808,50810],{"className":45,"code":50809,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,50811,50812,50820,50828,50836,50844],{"__ignoreMap":48},[52,50813,50814,50816,50818],{"class":54,"line":55},[52,50815,59],{"class":58},[52,50817,63],{"class":62},[52,50819,77],{"class":58},[52,50821,50822,50824,50826],{"class":54,"line":80},[52,50823,83],{"class":58},[52,50825,50787],{"class":62},[52,50827,77],{"class":58},[52,50829,50830,50832,50834],{"class":54,"line":108},[52,50831,2213],{"class":58},[52,50833,2216],{"class":62},[52,50835,105],{"class":58},[52,50837,50838,50840,50842],{"class":54,"line":118},[52,50839,2230],{"class":58},[52,50841,50787],{"class":62},[52,50843,77],{"class":58},[52,50845,50846,50848,50850],{"class":54,"line":594},[52,50847,121],{"class":58},[52,50849,63],{"class":62},[52,50851,77],{"class":58},[43,50853,50854],{"className":360,"code":50809,"language":362,"meta":48,"style":48},[31,50855,50856,50864,50872,50880,50888],{"__ignoreMap":48},[52,50857,50858,50860,50862],{"class":54,"line":55},[52,50859,59],{"class":58},[52,50861,63],{"class":371},[52,50863,77],{"class":58},[52,50865,50866,50868,50870],{"class":54,"line":80},[52,50867,83],{"class":58},[52,50869,50787],{"class":371},[52,50871,77],{"class":58},[52,50873,50874,50876,50878],{"class":54,"line":108},[52,50875,2213],{"class":58},[52,50877,2216],{"class":371},[52,50879,105],{"class":58},[52,50881,50882,50884,50886],{"class":54,"line":118},[52,50883,2230],{"class":58},[52,50885,50787],{"class":371},[52,50887,77],{"class":58},[52,50889,50890,50892,50894],{"class":54,"line":594},[52,50891,121],{"class":58},[52,50893,63],{"class":371},[52,50895,77],{"class":58},[43,50897,50898],{"className":2507,"code":50809,"language":2509,"meta":48,"style":48},[31,50899,50900,50908,50916,50924,50932],{"__ignoreMap":48},[52,50901,50902,50904,50906],{"class":54,"line":55},[52,50903,59],{"class":58},[52,50905,63],{"class":371},[52,50907,77],{"class":58},[52,50909,50910,50912,50914],{"class":54,"line":80},[52,50911,83],{"class":58},[52,50913,50787],{"class":371},[52,50915,77],{"class":58},[52,50917,50918,50920,50922],{"class":54,"line":108},[52,50919,2213],{"class":58},[52,50921,2216],{"class":371},[52,50923,105],{"class":58},[52,50925,50926,50928,50930],{"class":54,"line":118},[52,50927,2230],{"class":58},[52,50929,50787],{"class":371},[52,50931,77],{"class":58},[52,50933,50934,50936,50938],{"class":54,"line":594},[52,50935,121],{"class":58},[52,50937,63],{"class":371},[52,50939,77],{"class":58},[43,50941,50942],{"className":419,"code":50809,"language":420,"meta":48,"style":48},[31,50943,50944,50952,50960,50968,50976],{"__ignoreMap":48},[52,50945,50946,50948,50950],{"class":54,"line":55},[52,50947,59],{"class":58},[52,50949,63],{"class":371},[52,50951,77],{"class":58},[52,50953,50954,50956,50958],{"class":54,"line":80},[52,50955,83],{"class":58},[52,50957,50787],{"class":371},[52,50959,77],{"class":58},[52,50961,50962,50964,50966],{"class":54,"line":108},[52,50963,2213],{"class":58},[52,50965,2216],{"class":371},[52,50967,105],{"class":58},[52,50969,50970,50972,50974],{"class":54,"line":118},[52,50971,2230],{"class":58},[52,50973,50787],{"class":371},[52,50975,77],{"class":58},[52,50977,50978,50980,50982],{"class":54,"line":594},[52,50979,121],{"class":58},[52,50981,63],{"class":371},[52,50983,77],{"class":58},[43,50985,50987],{"className":222,"code":50986,"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,50988,50989,50999,51003,51017,51021,51030,51038,51042,51046],{"__ignoreMap":48},[52,50990,50991,50993,50995,50997],{"class":54,"line":55},[52,50992,232],{"class":231},[52,50994,9231],{"class":58},[52,50996,238],{"class":231},[52,50998,9236],{"class":73},[52,51000,51001],{"class":54,"line":80},[52,51002,597],{"emptyLinePlaceholder":171},[52,51004,51005,51007,51009,51011,51013,51015],{"class":54,"line":108},[52,51006,1721],{"class":231},[52,51008,1724],{"class":371},[52,51010,1727],{"class":231},[52,51012,1730],{"class":231},[52,51014,1733],{"class":66},[52,51016,1736],{"class":58},[52,51018,51019],{"class":54,"line":118},[52,51020,1751],{"class":58},[52,51022,51023,51025,51028],{"class":54,"line":594},[52,51024,1756],{"class":58},[52,51026,51027],{"class":73},"'Solarize'",[52,51029,4722],{"class":58},[52,51031,51032,51034,51036],{"class":54,"line":600},[52,51033,4727],{"class":58},[52,51035,2869],{"class":73},[52,51037,2129],{"class":58},[52,51039,51040],{"class":54,"line":606},[52,51041,4744],{"class":58},[52,51043,51044],{"class":54,"line":653},[52,51045,1773],{"class":58},[52,51047,51048],{"class":54,"line":662},[52,51049,1778],{"class":58},[156,51051,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51053},[51054,51055],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solarize",{"title":50787,"description":50795},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":51062,"title":1571,"body":51063,"category":27760,"componentType":20842,"description":51070,"extension":168,"meta":51300,"navigation":171,"path":51301,"requiresChild":27763,"seo":51302,"stem":51303,"__hash__":51304},"components/docs/components/SolidColor.md",{"type":8,"value":51064,"toc":51296},[51065,51068,51071,51073,51075,51078,51080,51294],[11,51066,1571],{"id":51067},"solidcolor",[15,51069,51070],{},"Fill the canvas with a single solid color",[26901,51072],{"component":1571},[23,51074,26905],{"id":21503},[26907,51076],{":props":51077},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,51079,26913],{"id":26912},[217,51081,51082,51123,51161,51199,51237],{":tabs":1543},[43,51083,51085],{"className":45,"code":51084,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,51086,51087,51095,51102,51111,51115],{"__ignoreMap":48},[52,51088,51089,51091,51093],{"class":54,"line":55},[52,51090,59],{"class":58},[52,51092,63],{"class":62},[52,51094,77],{"class":58},[52,51096,51097,51099],{"class":54,"line":80},[52,51098,83],{"class":58},[52,51100,51101],{"class":62},"SolidColor\n",[52,51103,51104,51106,51108],{"class":54,"line":108},[52,51105,7351],{"class":66},[52,51107,70],{"class":58},[52,51109,51110],{"class":73},"\"#5b18ca\"\n",[52,51112,51113],{"class":54,"line":118},[52,51114,1224],{"class":58},[52,51116,51117,51119,51121],{"class":54,"line":594},[52,51118,121],{"class":58},[52,51120,63],{"class":62},[52,51122,77],{"class":58},[43,51124,51125],{"className":360,"code":51084,"language":362,"meta":48,"style":48},[31,51126,51127,51135,51141,51149,51153],{"__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,51101],{"class":371},[52,51142,51143,51145,51147],{"class":54,"line":108},[52,51144,7351],{"class":66},[52,51146,70],{"class":231},[52,51148,51110],{"class":73},[52,51150,51151],{"class":54,"line":118},[52,51152,1224],{"class":58},[52,51154,51155,51157,51159],{"class":54,"line":594},[52,51156,121],{"class":58},[52,51158,63],{"class":371},[52,51160,77],{"class":58},[43,51162,51163],{"className":2507,"code":51084,"language":2509,"meta":48,"style":48},[31,51164,51165,51173,51179,51187,51191],{"__ignoreMap":48},[52,51166,51167,51169,51171],{"class":54,"line":55},[52,51168,59],{"class":58},[52,51170,63],{"class":371},[52,51172,77],{"class":58},[52,51174,51175,51177],{"class":54,"line":80},[52,51176,83],{"class":58},[52,51178,51101],{"class":371},[52,51180,51181,51183,51185],{"class":54,"line":108},[52,51182,7351],{"class":66},[52,51184,70],{"class":58},[52,51186,51110],{"class":73},[52,51188,51189],{"class":54,"line":118},[52,51190,1224],{"class":58},[52,51192,51193,51195,51197],{"class":54,"line":594},[52,51194,121],{"class":58},[52,51196,63],{"class":371},[52,51198,77],{"class":58},[43,51200,51201],{"className":419,"code":51084,"language":420,"meta":48,"style":48},[31,51202,51203,51211,51217,51225,51229],{"__ignoreMap":48},[52,51204,51205,51207,51209],{"class":54,"line":55},[52,51206,59],{"class":58},[52,51208,63],{"class":371},[52,51210,77],{"class":58},[52,51212,51213,51215],{"class":54,"line":80},[52,51214,83],{"class":58},[52,51216,51101],{"class":371},[52,51218,51219,51221,51223],{"class":54,"line":108},[52,51220,7351],{"class":66},[52,51222,70],{"class":231},[52,51224,51110],{"class":73},[52,51226,51227],{"class":54,"line":118},[52,51228,1224],{"class":58},[52,51230,51231,51233,51235],{"class":54,"line":594},[52,51232,121],{"class":58},[52,51234,63],{"class":371},[52,51236,77],{"class":58},[43,51238,51240],{"className":222,"code":51239,"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,51241,51242,51252,51256,51270,51274,51286,51290],{"__ignoreMap":48},[52,51243,51244,51246,51248,51250],{"class":54,"line":55},[52,51245,232],{"class":231},[52,51247,9231],{"class":58},[52,51249,238],{"class":231},[52,51251,9236],{"class":73},[52,51253,51254],{"class":54,"line":80},[52,51255,597],{"emptyLinePlaceholder":171},[52,51257,51258,51260,51262,51264,51266,51268],{"class":54,"line":108},[52,51259,1721],{"class":231},[52,51261,1724],{"class":371},[52,51263,1727],{"class":231},[52,51265,1730],{"class":231},[52,51267,1733],{"class":66},[52,51269,1736],{"class":58},[52,51271,51272],{"class":54,"line":118},[52,51273,1751],{"class":58},[52,51275,51276,51278,51280,51282,51284],{"class":54,"line":594},[52,51277,1756],{"class":58},[52,51279,1759],{"class":73},[52,51281,1762],{"class":58},[52,51283,1765],{"class":73},[52,51285,1768],{"class":58},[52,51287,51288],{"class":54,"line":600},[52,51289,1773],{"class":58},[52,51291,51292],{"class":54,"line":606},[52,51293,1778],{"class":58},[156,51295,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51297},[51298,51299],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solidcolor",{"title":1571,"description":51070},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":51306,"title":51307,"body":51308,"category":28094,"componentType":20848,"description":51315,"extension":168,"meta":51632,"navigation":171,"path":51633,"requiresChild":171,"seo":51634,"stem":51635,"__hash__":51636},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":51309,"toc":51628},[51310,51313,51316,51318,51320,51323,51325,51626],[11,51311,51307],{"id":51312},"spherize",[15,51314,51315],{},"Map content onto a 3D sphere surface with depth distortion",[26901,51317],{"component":51307},[23,51319,26905],{"id":21503},[26907,51321],{":props":51322},"[{\"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,51324,26913],{"id":26912},[217,51326,51327,51383,51442,51498,51556],{":tabs":1543},[43,51328,51330],{"className":45,"code":51329,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,51331,51332,51340,51347,51355,51359,51367,51375],{"__ignoreMap":48},[52,51333,51334,51336,51338],{"class":54,"line":55},[52,51335,59],{"class":58},[52,51337,63],{"class":62},[52,51339,77],{"class":58},[52,51341,51342,51344],{"class":54,"line":80},[52,51343,83],{"class":58},[52,51345,51346],{"class":62},"Spherize\n",[52,51348,51349,51351,51353],{"class":54,"line":108},[52,51350,14901],{"class":66},[52,51352,70],{"class":58},[52,51354,29360],{"class":73},[52,51356,51357],{"class":54,"line":118},[52,51358,26949],{"class":58},[52,51360,51361,51363,51365],{"class":54,"line":594},[52,51362,2213],{"class":58},[52,51364,2216],{"class":62},[52,51366,105],{"class":58},[52,51368,51369,51371,51373],{"class":54,"line":600},[52,51370,2230],{"class":58},[52,51372,51307],{"class":62},[52,51374,77],{"class":58},[52,51376,51377,51379,51381],{"class":54,"line":606},[52,51378,121],{"class":58},[52,51380,63],{"class":62},[52,51382,77],{"class":58},[43,51384,51386],{"className":360,"code":51385,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,51387,51388,51396,51402,51414,51418,51426,51434],{"__ignoreMap":48},[52,51389,51390,51392,51394],{"class":54,"line":55},[52,51391,59],{"class":58},[52,51393,63],{"class":371},[52,51395,77],{"class":58},[52,51397,51398,51400],{"class":54,"line":80},[52,51399,83],{"class":58},[52,51401,51346],{"class":371},[52,51403,51404,51406,51408,51410,51412],{"class":54,"line":108},[52,51405,7361],{"class":66},[52,51407,70],{"class":231},[52,51409,723],{"class":58},[52,51411,6391],{"class":371},[52,51413,729],{"class":58},[52,51415,51416],{"class":54,"line":118},[52,51417,26949],{"class":58},[52,51419,51420,51422,51424],{"class":54,"line":594},[52,51421,2213],{"class":58},[52,51423,2216],{"class":371},[52,51425,105],{"class":58},[52,51427,51428,51430,51432],{"class":54,"line":600},[52,51429,2230],{"class":58},[52,51431,51307],{"class":371},[52,51433,77],{"class":58},[52,51435,51436,51438,51440],{"class":54,"line":606},[52,51437,121],{"class":58},[52,51439,63],{"class":371},[52,51441,77],{"class":58},[43,51443,51444],{"className":2507,"code":51385,"language":2509,"meta":48,"style":48},[31,51445,51446,51454,51460,51470,51474,51482,51490],{"__ignoreMap":48},[52,51447,51448,51450,51452],{"class":54,"line":55},[52,51449,59],{"class":58},[52,51451,63],{"class":371},[52,51453,77],{"class":58},[52,51455,51456,51458],{"class":54,"line":80},[52,51457,83],{"class":58},[52,51459,51346],{"class":371},[52,51461,51462,51464,51466,51468],{"class":54,"line":108},[52,51463,7361],{"class":66},[52,51465,24845],{"class":58},[52,51467,6391],{"class":371},[52,51469,729],{"class":58},[52,51471,51472],{"class":54,"line":118},[52,51473,26949],{"class":58},[52,51475,51476,51478,51480],{"class":54,"line":594},[52,51477,2213],{"class":58},[52,51479,2216],{"class":371},[52,51481,105],{"class":58},[52,51483,51484,51486,51488],{"class":54,"line":600},[52,51485,2230],{"class":58},[52,51487,51307],{"class":371},[52,51489,77],{"class":58},[52,51491,51492,51494,51496],{"class":54,"line":606},[52,51493,121],{"class":58},[52,51495,63],{"class":371},[52,51497,77],{"class":58},[43,51499,51500],{"className":419,"code":51385,"language":420,"meta":48,"style":48},[31,51501,51502,51510,51516,51528,51532,51540,51548],{"__ignoreMap":48},[52,51503,51504,51506,51508],{"class":54,"line":55},[52,51505,59],{"class":58},[52,51507,63],{"class":371},[52,51509,77],{"class":58},[52,51511,51512,51514],{"class":54,"line":80},[52,51513,83],{"class":58},[52,51515,51346],{"class":371},[52,51517,51518,51520,51522,51524,51526],{"class":54,"line":108},[52,51519,7361],{"class":66},[52,51521,70],{"class":231},[52,51523,723],{"class":58},[52,51525,6391],{"class":371},[52,51527,729],{"class":58},[52,51529,51530],{"class":54,"line":118},[52,51531,26949],{"class":58},[52,51533,51534,51536,51538],{"class":54,"line":594},[52,51535,2213],{"class":58},[52,51537,2216],{"class":371},[52,51539,105],{"class":58},[52,51541,51542,51544,51546],{"class":54,"line":600},[52,51543,2230],{"class":58},[52,51545,51307],{"class":371},[52,51547,77],{"class":58},[52,51549,51550,51552,51554],{"class":54,"line":606},[52,51551,121],{"class":58},[52,51553,63],{"class":371},[52,51555,77],{"class":58},[43,51557,51559],{"className":222,"code":51558,"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,51560,51561,51571,51575,51589,51593,51606,51614,51618,51622],{"__ignoreMap":48},[52,51562,51563,51565,51567,51569],{"class":54,"line":55},[52,51564,232],{"class":231},[52,51566,9231],{"class":58},[52,51568,238],{"class":231},[52,51570,9236],{"class":73},[52,51572,51573],{"class":54,"line":80},[52,51574,597],{"emptyLinePlaceholder":171},[52,51576,51577,51579,51581,51583,51585,51587],{"class":54,"line":108},[52,51578,1721],{"class":231},[52,51580,1724],{"class":371},[52,51582,1727],{"class":231},[52,51584,1730],{"class":231},[52,51586,1733],{"class":66},[52,51588,1736],{"class":58},[52,51590,51591],{"class":54,"line":118},[52,51592,1751],{"class":58},[52,51594,51595,51597,51600,51602,51604],{"class":54,"line":594},[52,51596,1756],{"class":58},[52,51598,51599],{"class":73},"'Spherize'",[52,51601,5254],{"class":58},[52,51603,6391],{"class":371},[52,51605,5259],{"class":58},[52,51607,51608,51610,51612],{"class":54,"line":600},[52,51609,4727],{"class":58},[52,51611,2869],{"class":73},[52,51613,2129],{"class":58},[52,51615,51616],{"class":54,"line":606},[52,51617,4744],{"class":58},[52,51619,51620],{"class":54,"line":653},[52,51621,1773],{"class":58},[52,51623,51624],{"class":54,"line":662},[52,51625,1778],{"class":58},[156,51627,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51629},[51630,51631],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spherize",{"title":51307,"description":51315},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":51638,"title":51639,"body":51640,"category":27760,"componentType":20842,"description":51647,"extension":168,"meta":51832,"navigation":171,"path":51833,"requiresChild":27763,"seo":51834,"stem":51835,"__hash__":51836},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":51641,"toc":51828},[51642,51645,51648,51650,51652,51655,51657,51826],[11,51643,51639],{"id":51644},"spiral",[15,51646,51647],{},"Rotating spiral pattern with animated movement",[26901,51649],{"component":51639},[23,51651,26905],{"id":21503},[26907,51653],{":props":51654},"[{\"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,51656,26913],{"id":26912},[217,51658,51659,51688,51716,51744,51772],{":tabs":1543},[43,51660,51662],{"className":45,"code":51661,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,51663,51664,51672,51680],{"__ignoreMap":48},[52,51665,51666,51668,51670],{"class":54,"line":55},[52,51667,59],{"class":58},[52,51669,63],{"class":62},[52,51671,77],{"class":58},[52,51673,51674,51676,51678],{"class":54,"line":80},[52,51675,83],{"class":58},[52,51677,51639],{"class":62},[52,51679,105],{"class":58},[52,51681,51682,51684,51686],{"class":54,"line":108},[52,51683,121],{"class":58},[52,51685,63],{"class":62},[52,51687,77],{"class":58},[43,51689,51690],{"className":360,"code":51661,"language":362,"meta":48,"style":48},[31,51691,51692,51700,51708],{"__ignoreMap":48},[52,51693,51694,51696,51698],{"class":54,"line":55},[52,51695,59],{"class":58},[52,51697,63],{"class":371},[52,51699,77],{"class":58},[52,51701,51702,51704,51706],{"class":54,"line":80},[52,51703,83],{"class":58},[52,51705,51639],{"class":371},[52,51707,105],{"class":58},[52,51709,51710,51712,51714],{"class":54,"line":108},[52,51711,121],{"class":58},[52,51713,63],{"class":371},[52,51715,77],{"class":58},[43,51717,51718],{"className":2507,"code":51661,"language":2509,"meta":48,"style":48},[31,51719,51720,51728,51736],{"__ignoreMap":48},[52,51721,51722,51724,51726],{"class":54,"line":55},[52,51723,59],{"class":58},[52,51725,63],{"class":371},[52,51727,77],{"class":58},[52,51729,51730,51732,51734],{"class":54,"line":80},[52,51731,83],{"class":58},[52,51733,51639],{"class":371},[52,51735,105],{"class":58},[52,51737,51738,51740,51742],{"class":54,"line":108},[52,51739,121],{"class":58},[52,51741,63],{"class":371},[52,51743,77],{"class":58},[43,51745,51746],{"className":419,"code":51661,"language":420,"meta":48,"style":48},[31,51747,51748,51756,51764],{"__ignoreMap":48},[52,51749,51750,51752,51754],{"class":54,"line":55},[52,51751,59],{"class":58},[52,51753,63],{"class":371},[52,51755,77],{"class":58},[52,51757,51758,51760,51762],{"class":54,"line":80},[52,51759,83],{"class":58},[52,51761,51639],{"class":371},[52,51763,105],{"class":58},[52,51765,51766,51768,51770],{"class":54,"line":108},[52,51767,121],{"class":58},[52,51769,63],{"class":371},[52,51771,77],{"class":58},[43,51773,51775],{"className":222,"code":51774,"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,51776,51777,51787,51791,51805,51809,51818,51822],{"__ignoreMap":48},[52,51778,51779,51781,51783,51785],{"class":54,"line":55},[52,51780,232],{"class":231},[52,51782,9231],{"class":58},[52,51784,238],{"class":231},[52,51786,9236],{"class":73},[52,51788,51789],{"class":54,"line":80},[52,51790,597],{"emptyLinePlaceholder":171},[52,51792,51793,51795,51797,51799,51801,51803],{"class":54,"line":108},[52,51794,1721],{"class":231},[52,51796,1724],{"class":371},[52,51798,1727],{"class":231},[52,51800,1730],{"class":231},[52,51802,1733],{"class":66},[52,51804,1736],{"class":58},[52,51806,51807],{"class":54,"line":118},[52,51808,1751],{"class":58},[52,51810,51811,51813,51816],{"class":54,"line":594},[52,51812,1756],{"class":58},[52,51814,51815],{"class":73},"'Spiral'",[52,51817,2129],{"class":58},[52,51819,51820],{"class":54,"line":600},[52,51821,1773],{"class":58},[52,51823,51824],{"class":54,"line":606},[52,51825,1778],{"class":58},[156,51827,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51829},[51830,51831],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spiral",{"title":51639,"description":51647},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":51838,"title":51839,"body":51840,"category":31459,"componentType":20842,"description":51847,"extension":168,"meta":52124,"navigation":171,"path":52125,"requiresChild":27763,"seo":52126,"stem":52127,"__hash__":52128},"components/docs/components/Star.md","Star",{"type":8,"value":51841,"toc":52120},[51842,51845,51848,51850,51852,51855,51857,52118],[11,51843,51839],{"id":51844},"star",[15,51846,51847],{},"Classic star polygon with straight sides and sharp pointed tips",[26901,51849],{"component":51839},[23,51851,26905],{"id":21503},[26907,51853],{":props":51854},"[{\"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,51856,26913],{"id":26912},[217,51858,51859,51907,51958,52006,52056],{":tabs":1543},[43,51860,51862],{"className":45,"code":51861,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,51863,51864,51872,51879,51887,51895,51899],{"__ignoreMap":48},[52,51865,51866,51868,51870],{"class":54,"line":55},[52,51867,59],{"class":58},[52,51869,63],{"class":62},[52,51871,77],{"class":58},[52,51873,51874,51876],{"class":54,"line":80},[52,51875,83],{"class":58},[52,51877,51878],{"class":62},"Star\n",[52,51880,51881,51883,51885],{"class":54,"line":108},[52,51882,7351],{"class":66},[52,51884,70],{"class":58},[52,51886,7307],{"class":73},[52,51888,51889,51891,51893],{"class":54,"line":118},[52,51890,14901],{"class":66},[52,51892,70],{"class":58},[52,51894,37396],{"class":73},[52,51896,51897],{"class":54,"line":594},[52,51898,1224],{"class":58},[52,51900,51901,51903,51905],{"class":54,"line":600},[52,51902,121],{"class":58},[52,51904,63],{"class":62},[52,51906,77],{"class":58},[43,51908,51910],{"className":360,"code":51909,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,51911,51912,51920,51926,51934,51946,51950],{"__ignoreMap":48},[52,51913,51914,51916,51918],{"class":54,"line":55},[52,51915,59],{"class":58},[52,51917,63],{"class":371},[52,51919,77],{"class":58},[52,51921,51922,51924],{"class":54,"line":80},[52,51923,83],{"class":58},[52,51925,51878],{"class":371},[52,51927,51928,51930,51932],{"class":54,"line":108},[52,51929,7351],{"class":66},[52,51931,70],{"class":231},[52,51933,7307],{"class":73},[52,51935,51936,51938,51940,51942,51944],{"class":54,"line":118},[52,51937,7361],{"class":66},[52,51939,70],{"class":231},[52,51941,723],{"class":58},[52,51943,5963],{"class":371},[52,51945,729],{"class":58},[52,51947,51948],{"class":54,"line":594},[52,51949,1224],{"class":58},[52,51951,51952,51954,51956],{"class":54,"line":600},[52,51953,121],{"class":58},[52,51955,63],{"class":371},[52,51957,77],{"class":58},[43,51959,51960],{"className":2507,"code":51909,"language":2509,"meta":48,"style":48},[31,51961,51962,51970,51976,51984,51994,51998],{"__ignoreMap":48},[52,51963,51964,51966,51968],{"class":54,"line":55},[52,51965,59],{"class":58},[52,51967,63],{"class":371},[52,51969,77],{"class":58},[52,51971,51972,51974],{"class":54,"line":80},[52,51973,83],{"class":58},[52,51975,51878],{"class":371},[52,51977,51978,51980,51982],{"class":54,"line":108},[52,51979,7351],{"class":66},[52,51981,70],{"class":58},[52,51983,7307],{"class":73},[52,51985,51986,51988,51990,51992],{"class":54,"line":118},[52,51987,7361],{"class":66},[52,51989,24845],{"class":58},[52,51991,5963],{"class":371},[52,51993,729],{"class":58},[52,51995,51996],{"class":54,"line":594},[52,51997,1224],{"class":58},[52,51999,52000,52002,52004],{"class":54,"line":600},[52,52001,121],{"class":58},[52,52003,63],{"class":371},[52,52005,77],{"class":58},[43,52007,52008],{"className":419,"code":51909,"language":420,"meta":48,"style":48},[31,52009,52010,52018,52024,52032,52044,52048],{"__ignoreMap":48},[52,52011,52012,52014,52016],{"class":54,"line":55},[52,52013,59],{"class":58},[52,52015,63],{"class":371},[52,52017,77],{"class":58},[52,52019,52020,52022],{"class":54,"line":80},[52,52021,83],{"class":58},[52,52023,51878],{"class":371},[52,52025,52026,52028,52030],{"class":54,"line":108},[52,52027,7351],{"class":66},[52,52029,70],{"class":231},[52,52031,7307],{"class":73},[52,52033,52034,52036,52038,52040,52042],{"class":54,"line":118},[52,52035,7361],{"class":66},[52,52037,70],{"class":231},[52,52039,723],{"class":58},[52,52041,5963],{"class":371},[52,52043,729],{"class":58},[52,52045,52046],{"class":54,"line":594},[52,52047,1224],{"class":58},[52,52049,52050,52052,52054],{"class":54,"line":600},[52,52051,121],{"class":58},[52,52053,63],{"class":371},[52,52055,77],{"class":58},[43,52057,52059],{"className":222,"code":52058,"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,52060,52061,52071,52075,52089,52093,52110,52114],{"__ignoreMap":48},[52,52062,52063,52065,52067,52069],{"class":54,"line":55},[52,52064,232],{"class":231},[52,52066,9231],{"class":58},[52,52068,238],{"class":231},[52,52070,9236],{"class":73},[52,52072,52073],{"class":54,"line":80},[52,52074,597],{"emptyLinePlaceholder":171},[52,52076,52077,52079,52081,52083,52085,52087],{"class":54,"line":108},[52,52078,1721],{"class":231},[52,52080,1724],{"class":371},[52,52082,1727],{"class":231},[52,52084,1730],{"class":231},[52,52086,1733],{"class":66},[52,52088,1736],{"class":58},[52,52090,52091],{"class":54,"line":118},[52,52092,1751],{"class":58},[52,52094,52095,52097,52100,52102,52104,52106,52108],{"class":54,"line":594},[52,52096,1756],{"class":58},[52,52098,52099],{"class":73},"'Star'",[52,52101,1762],{"class":58},[52,52103,7886],{"class":73},[52,52105,4278],{"class":58},[52,52107,5963],{"class":371},[52,52109,1768],{"class":58},[52,52111,52112],{"class":54,"line":600},[52,52113,1773],{"class":58},[52,52115,52116],{"class":54,"line":606},[52,52117,1778],{"class":58},[156,52119,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52121},[52122,52123],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/star",{"title":51839,"description":51847},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":52130,"title":52131,"body":52132,"category":27760,"componentType":20842,"description":52139,"extension":168,"meta":52324,"navigation":171,"path":52325,"requiresChild":27763,"seo":52326,"stem":52327,"__hash__":52328},"components/docs/components/Strands.md","Strands",{"type":8,"value":52133,"toc":52320},[52134,52137,52140,52142,52144,52147,52149,52318],[11,52135,52131],{"id":52136},"strands",[15,52138,52139],{},"Procedural wavy strands with layered animation",[26901,52141],{"component":52131},[23,52143,26905],{"id":21503},[26907,52145],{":props":52146},"[{\"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,52148,26913],{"id":26912},[217,52150,52151,52180,52208,52236,52264],{":tabs":1543},[43,52152,52154],{"className":45,"code":52153,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,52155,52156,52164,52172],{"__ignoreMap":48},[52,52157,52158,52160,52162],{"class":54,"line":55},[52,52159,59],{"class":58},[52,52161,63],{"class":62},[52,52163,77],{"class":58},[52,52165,52166,52168,52170],{"class":54,"line":80},[52,52167,83],{"class":58},[52,52169,52131],{"class":62},[52,52171,105],{"class":58},[52,52173,52174,52176,52178],{"class":54,"line":108},[52,52175,121],{"class":58},[52,52177,63],{"class":62},[52,52179,77],{"class":58},[43,52181,52182],{"className":360,"code":52153,"language":362,"meta":48,"style":48},[31,52183,52184,52192,52200],{"__ignoreMap":48},[52,52185,52186,52188,52190],{"class":54,"line":55},[52,52187,59],{"class":58},[52,52189,63],{"class":371},[52,52191,77],{"class":58},[52,52193,52194,52196,52198],{"class":54,"line":80},[52,52195,83],{"class":58},[52,52197,52131],{"class":371},[52,52199,105],{"class":58},[52,52201,52202,52204,52206],{"class":54,"line":108},[52,52203,121],{"class":58},[52,52205,63],{"class":371},[52,52207,77],{"class":58},[43,52209,52210],{"className":2507,"code":52153,"language":2509,"meta":48,"style":48},[31,52211,52212,52220,52228],{"__ignoreMap":48},[52,52213,52214,52216,52218],{"class":54,"line":55},[52,52215,59],{"class":58},[52,52217,63],{"class":371},[52,52219,77],{"class":58},[52,52221,52222,52224,52226],{"class":54,"line":80},[52,52223,83],{"class":58},[52,52225,52131],{"class":371},[52,52227,105],{"class":58},[52,52229,52230,52232,52234],{"class":54,"line":108},[52,52231,121],{"class":58},[52,52233,63],{"class":371},[52,52235,77],{"class":58},[43,52237,52238],{"className":419,"code":52153,"language":420,"meta":48,"style":48},[31,52239,52240,52248,52256],{"__ignoreMap":48},[52,52241,52242,52244,52246],{"class":54,"line":55},[52,52243,59],{"class":58},[52,52245,63],{"class":371},[52,52247,77],{"class":58},[52,52249,52250,52252,52254],{"class":54,"line":80},[52,52251,83],{"class":58},[52,52253,52131],{"class":371},[52,52255,105],{"class":58},[52,52257,52258,52260,52262],{"class":54,"line":108},[52,52259,121],{"class":58},[52,52261,63],{"class":371},[52,52263,77],{"class":58},[43,52265,52267],{"className":222,"code":52266,"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,52268,52269,52279,52283,52297,52301,52310,52314],{"__ignoreMap":48},[52,52270,52271,52273,52275,52277],{"class":54,"line":55},[52,52272,232],{"class":231},[52,52274,9231],{"class":58},[52,52276,238],{"class":231},[52,52278,9236],{"class":73},[52,52280,52281],{"class":54,"line":80},[52,52282,597],{"emptyLinePlaceholder":171},[52,52284,52285,52287,52289,52291,52293,52295],{"class":54,"line":108},[52,52286,1721],{"class":231},[52,52288,1724],{"class":371},[52,52290,1727],{"class":231},[52,52292,1730],{"class":231},[52,52294,1733],{"class":66},[52,52296,1736],{"class":58},[52,52298,52299],{"class":54,"line":118},[52,52300,1751],{"class":58},[52,52302,52303,52305,52308],{"class":54,"line":594},[52,52304,1756],{"class":58},[52,52306,52307],{"class":73},"'Strands'",[52,52309,2129],{"class":58},[52,52311,52312],{"class":54,"line":600},[52,52313,1773],{"class":58},[52,52315,52316],{"class":54,"line":606},[52,52317,1778],{"class":58},[156,52319,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":52321},[52322,52323],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/strands",{"title":52131,"description":52139},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":52330,"title":52331,"body":52332,"category":28094,"componentType":20848,"description":52338,"extension":168,"meta":52599,"navigation":171,"path":52600,"requiresChild":171,"seo":52601,"stem":52602,"__hash__":52603},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":52333,"toc":52595},[52334,52336,52339,52341,52343,52346,52348,52593],[11,52335,52331],{"id":13646},[15,52337,52338],{},"Stretch content towards a direction from a center point",[26901,52340],{"component":52331},[23,52342,26905],{"id":21503},[26907,52344],{":props":52345},"[{\"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,52347,26913],{"id":26912},[217,52349,52350,52395,52439,52483,52527],{":tabs":1543},[43,52351,52353],{"className":45,"code":52352,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,52354,52355,52363,52371,52379,52387],{"__ignoreMap":48},[52,52356,52357,52359,52361],{"class":54,"line":55},[52,52358,59],{"class":58},[52,52360,63],{"class":62},[52,52362,77],{"class":58},[52,52364,52365,52367,52369],{"class":54,"line":80},[52,52366,83],{"class":58},[52,52368,52331],{"class":62},[52,52370,77],{"class":58},[52,52372,52373,52375,52377],{"class":54,"line":108},[52,52374,2213],{"class":58},[52,52376,2216],{"class":62},[52,52378,105],{"class":58},[52,52380,52381,52383,52385],{"class":54,"line":118},[52,52382,2230],{"class":58},[52,52384,52331],{"class":62},[52,52386,77],{"class":58},[52,52388,52389,52391,52393],{"class":54,"line":594},[52,52390,121],{"class":58},[52,52392,63],{"class":62},[52,52394,77],{"class":58},[43,52396,52397],{"className":360,"code":52352,"language":362,"meta":48,"style":48},[31,52398,52399,52407,52415,52423,52431],{"__ignoreMap":48},[52,52400,52401,52403,52405],{"class":54,"line":55},[52,52402,59],{"class":58},[52,52404,63],{"class":371},[52,52406,77],{"class":58},[52,52408,52409,52411,52413],{"class":54,"line":80},[52,52410,83],{"class":58},[52,52412,52331],{"class":371},[52,52414,77],{"class":58},[52,52416,52417,52419,52421],{"class":54,"line":108},[52,52418,2213],{"class":58},[52,52420,2216],{"class":371},[52,52422,105],{"class":58},[52,52424,52425,52427,52429],{"class":54,"line":118},[52,52426,2230],{"class":58},[52,52428,52331],{"class":371},[52,52430,77],{"class":58},[52,52432,52433,52435,52437],{"class":54,"line":594},[52,52434,121],{"class":58},[52,52436,63],{"class":371},[52,52438,77],{"class":58},[43,52440,52441],{"className":2507,"code":52352,"language":2509,"meta":48,"style":48},[31,52442,52443,52451,52459,52467,52475],{"__ignoreMap":48},[52,52444,52445,52447,52449],{"class":54,"line":55},[52,52446,59],{"class":58},[52,52448,63],{"class":371},[52,52450,77],{"class":58},[52,52452,52453,52455,52457],{"class":54,"line":80},[52,52454,83],{"class":58},[52,52456,52331],{"class":371},[52,52458,77],{"class":58},[52,52460,52461,52463,52465],{"class":54,"line":108},[52,52462,2213],{"class":58},[52,52464,2216],{"class":371},[52,52466,105],{"class":58},[52,52468,52469,52471,52473],{"class":54,"line":118},[52,52470,2230],{"class":58},[52,52472,52331],{"class":371},[52,52474,77],{"class":58},[52,52476,52477,52479,52481],{"class":54,"line":594},[52,52478,121],{"class":58},[52,52480,63],{"class":371},[52,52482,77],{"class":58},[43,52484,52485],{"className":419,"code":52352,"language":420,"meta":48,"style":48},[31,52486,52487,52495,52503,52511,52519],{"__ignoreMap":48},[52,52488,52489,52491,52493],{"class":54,"line":55},[52,52490,59],{"class":58},[52,52492,63],{"class":371},[52,52494,77],{"class":58},[52,52496,52497,52499,52501],{"class":54,"line":80},[52,52498,83],{"class":58},[52,52500,52331],{"class":371},[52,52502,77],{"class":58},[52,52504,52505,52507,52509],{"class":54,"line":108},[52,52506,2213],{"class":58},[52,52508,2216],{"class":371},[52,52510,105],{"class":58},[52,52512,52513,52515,52517],{"class":54,"line":118},[52,52514,2230],{"class":58},[52,52516,52331],{"class":371},[52,52518,77],{"class":58},[52,52520,52521,52523,52525],{"class":54,"line":594},[52,52522,121],{"class":58},[52,52524,63],{"class":371},[52,52526,77],{"class":58},[43,52528,52530],{"className":222,"code":52529,"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,52531,52532,52542,52546,52560,52564,52573,52581,52585,52589],{"__ignoreMap":48},[52,52533,52534,52536,52538,52540],{"class":54,"line":55},[52,52535,232],{"class":231},[52,52537,9231],{"class":58},[52,52539,238],{"class":231},[52,52541,9236],{"class":73},[52,52543,52544],{"class":54,"line":80},[52,52545,597],{"emptyLinePlaceholder":171},[52,52547,52548,52550,52552,52554,52556,52558],{"class":54,"line":108},[52,52549,1721],{"class":231},[52,52551,1724],{"class":371},[52,52553,1727],{"class":231},[52,52555,1730],{"class":231},[52,52557,1733],{"class":66},[52,52559,1736],{"class":58},[52,52561,52562],{"class":54,"line":118},[52,52563,1751],{"class":58},[52,52565,52566,52568,52571],{"class":54,"line":594},[52,52567,1756],{"class":58},[52,52569,52570],{"class":73},"'Stretch'",[52,52572,4722],{"class":58},[52,52574,52575,52577,52579],{"class":54,"line":600},[52,52576,4727],{"class":58},[52,52578,2869],{"class":73},[52,52580,2129],{"class":58},[52,52582,52583],{"class":54,"line":606},[52,52584,4744],{"class":58},[52,52586,52587],{"class":54,"line":653},[52,52588,1773],{"class":58},[52,52590,52591],{"class":54,"line":662},[52,52592,1778],{"class":58},[156,52594,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":52596},[52597,52598],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stretch",{"title":52331,"description":52338},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":52605,"title":52606,"body":52607,"category":27760,"componentType":20842,"description":52614,"extension":168,"meta":52799,"navigation":171,"path":52800,"requiresChild":27763,"seo":52801,"stem":52802,"__hash__":52803},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":52608,"toc":52795},[52609,52612,52615,52617,52619,52622,52624,52793],[11,52610,52606],{"id":52611},"stripes",[15,52613,52614],{},"Alternating colored stripes with animation",[26901,52616],{"component":52606},[23,52618,26905],{"id":21503},[26907,52620],{":props":52621},"[{\"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,52623,26913],{"id":26912},[217,52625,52626,52655,52683,52711,52739],{":tabs":1543},[43,52627,52629],{"className":45,"code":52628,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,52630,52631,52639,52647],{"__ignoreMap":48},[52,52632,52633,52635,52637],{"class":54,"line":55},[52,52634,59],{"class":58},[52,52636,63],{"class":62},[52,52638,77],{"class":58},[52,52640,52641,52643,52645],{"class":54,"line":80},[52,52642,83],{"class":58},[52,52644,52606],{"class":62},[52,52646,105],{"class":58},[52,52648,52649,52651,52653],{"class":54,"line":108},[52,52650,121],{"class":58},[52,52652,63],{"class":62},[52,52654,77],{"class":58},[43,52656,52657],{"className":360,"code":52628,"language":362,"meta":48,"style":48},[31,52658,52659,52667,52675],{"__ignoreMap":48},[52,52660,52661,52663,52665],{"class":54,"line":55},[52,52662,59],{"class":58},[52,52664,63],{"class":371},[52,52666,77],{"class":58},[52,52668,52669,52671,52673],{"class":54,"line":80},[52,52670,83],{"class":58},[52,52672,52606],{"class":371},[52,52674,105],{"class":58},[52,52676,52677,52679,52681],{"class":54,"line":108},[52,52678,121],{"class":58},[52,52680,63],{"class":371},[52,52682,77],{"class":58},[43,52684,52685],{"className":2507,"code":52628,"language":2509,"meta":48,"style":48},[31,52686,52687,52695,52703],{"__ignoreMap":48},[52,52688,52689,52691,52693],{"class":54,"line":55},[52,52690,59],{"class":58},[52,52692,63],{"class":371},[52,52694,77],{"class":58},[52,52696,52697,52699,52701],{"class":54,"line":80},[52,52698,83],{"class":58},[52,52700,52606],{"class":371},[52,52702,105],{"class":58},[52,52704,52705,52707,52709],{"class":54,"line":108},[52,52706,121],{"class":58},[52,52708,63],{"class":371},[52,52710,77],{"class":58},[43,52712,52713],{"className":419,"code":52628,"language":420,"meta":48,"style":48},[31,52714,52715,52723,52731],{"__ignoreMap":48},[52,52716,52717,52719,52721],{"class":54,"line":55},[52,52718,59],{"class":58},[52,52720,63],{"class":371},[52,52722,77],{"class":58},[52,52724,52725,52727,52729],{"class":54,"line":80},[52,52726,83],{"class":58},[52,52728,52606],{"class":371},[52,52730,105],{"class":58},[52,52732,52733,52735,52737],{"class":54,"line":108},[52,52734,121],{"class":58},[52,52736,63],{"class":371},[52,52738,77],{"class":58},[43,52740,52742],{"className":222,"code":52741,"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,52743,52744,52754,52758,52772,52776,52785,52789],{"__ignoreMap":48},[52,52745,52746,52748,52750,52752],{"class":54,"line":55},[52,52747,232],{"class":231},[52,52749,9231],{"class":58},[52,52751,238],{"class":231},[52,52753,9236],{"class":73},[52,52755,52756],{"class":54,"line":80},[52,52757,597],{"emptyLinePlaceholder":171},[52,52759,52760,52762,52764,52766,52768,52770],{"class":54,"line":108},[52,52761,1721],{"class":231},[52,52763,1724],{"class":371},[52,52765,1727],{"class":231},[52,52767,1730],{"class":231},[52,52769,1733],{"class":66},[52,52771,1736],{"class":58},[52,52773,52774],{"class":54,"line":118},[52,52775,1751],{"class":58},[52,52777,52778,52780,52783],{"class":54,"line":594},[52,52779,1756],{"class":58},[52,52781,52782],{"class":73},"'Stripes'",[52,52784,2129],{"class":58},[52,52786,52787],{"class":54,"line":600},[52,52788,1773],{"class":58},[52,52790,52791],{"class":54,"line":606},[52,52792,1778],{"class":58},[156,52794,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":52796},[52797,52798],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stripes",{"title":52606,"description":52614},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":52805,"title":52806,"body":52807,"category":27760,"componentType":20842,"description":52814,"extension":168,"meta":53046,"navigation":171,"path":53047,"requiresChild":27763,"seo":53048,"stem":53049,"__hash__":53050},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":52808,"toc":53042},[52809,52812,52815,52817,52819,52822,52824,53040],[11,52810,52806],{"id":52811},"studiobackground",[15,52813,52814],{},"Multi-light studio background with ambient motion.",[26901,52816],{"component":52806},[23,52818,26905],{"id":21503},[26907,52820],{":props":52821},"[{\"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,52823,26913],{"id":26912},[217,52825,52826,52867,52905,52943,52981],{":tabs":1543},[43,52827,52829],{"className":45,"code":52828,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,52830,52831,52839,52846,52855,52859],{"__ignoreMap":48},[52,52832,52833,52835,52837],{"class":54,"line":55},[52,52834,59],{"class":58},[52,52836,63],{"class":62},[52,52838,77],{"class":58},[52,52840,52841,52843],{"class":54,"line":80},[52,52842,83],{"class":58},[52,52844,52845],{"class":62},"StudioBackground\n",[52,52847,52848,52850,52852],{"class":54,"line":108},[52,52849,7351],{"class":66},[52,52851,70],{"class":58},[52,52853,52854],{"class":73},"\"#d8dbec\"\n",[52,52856,52857],{"class":54,"line":118},[52,52858,1224],{"class":58},[52,52860,52861,52863,52865],{"class":54,"line":594},[52,52862,121],{"class":58},[52,52864,63],{"class":62},[52,52866,77],{"class":58},[43,52868,52869],{"className":360,"code":52828,"language":362,"meta":48,"style":48},[31,52870,52871,52879,52885,52893,52897],{"__ignoreMap":48},[52,52872,52873,52875,52877],{"class":54,"line":55},[52,52874,59],{"class":58},[52,52876,63],{"class":371},[52,52878,77],{"class":58},[52,52880,52881,52883],{"class":54,"line":80},[52,52882,83],{"class":58},[52,52884,52845],{"class":371},[52,52886,52887,52889,52891],{"class":54,"line":108},[52,52888,7351],{"class":66},[52,52890,70],{"class":231},[52,52892,52854],{"class":73},[52,52894,52895],{"class":54,"line":118},[52,52896,1224],{"class":58},[52,52898,52899,52901,52903],{"class":54,"line":594},[52,52900,121],{"class":58},[52,52902,63],{"class":371},[52,52904,77],{"class":58},[43,52906,52907],{"className":2507,"code":52828,"language":2509,"meta":48,"style":48},[31,52908,52909,52917,52923,52931,52935],{"__ignoreMap":48},[52,52910,52911,52913,52915],{"class":54,"line":55},[52,52912,59],{"class":58},[52,52914,63],{"class":371},[52,52916,77],{"class":58},[52,52918,52919,52921],{"class":54,"line":80},[52,52920,83],{"class":58},[52,52922,52845],{"class":371},[52,52924,52925,52927,52929],{"class":54,"line":108},[52,52926,7351],{"class":66},[52,52928,70],{"class":58},[52,52930,52854],{"class":73},[52,52932,52933],{"class":54,"line":118},[52,52934,1224],{"class":58},[52,52936,52937,52939,52941],{"class":54,"line":594},[52,52938,121],{"class":58},[52,52940,63],{"class":371},[52,52942,77],{"class":58},[43,52944,52945],{"className":419,"code":52828,"language":420,"meta":48,"style":48},[31,52946,52947,52955,52961,52969,52973],{"__ignoreMap":48},[52,52948,52949,52951,52953],{"class":54,"line":55},[52,52950,59],{"class":58},[52,52952,63],{"class":371},[52,52954,77],{"class":58},[52,52956,52957,52959],{"class":54,"line":80},[52,52958,83],{"class":58},[52,52960,52845],{"class":371},[52,52962,52963,52965,52967],{"class":54,"line":108},[52,52964,7351],{"class":66},[52,52966,70],{"class":231},[52,52968,52854],{"class":73},[52,52970,52971],{"class":54,"line":118},[52,52972,1224],{"class":58},[52,52974,52975,52977,52979],{"class":54,"line":594},[52,52976,121],{"class":58},[52,52978,63],{"class":371},[52,52980,77],{"class":58},[43,52982,52984],{"className":222,"code":52983,"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,52985,52986,52996,53000,53014,53018,53032,53036],{"__ignoreMap":48},[52,52987,52988,52990,52992,52994],{"class":54,"line":55},[52,52989,232],{"class":231},[52,52991,9231],{"class":58},[52,52993,238],{"class":231},[52,52995,9236],{"class":73},[52,52997,52998],{"class":54,"line":80},[52,52999,597],{"emptyLinePlaceholder":171},[52,53001,53002,53004,53006,53008,53010,53012],{"class":54,"line":108},[52,53003,1721],{"class":231},[52,53005,1724],{"class":371},[52,53007,1727],{"class":231},[52,53009,1730],{"class":231},[52,53011,1733],{"class":66},[52,53013,1736],{"class":58},[52,53015,53016],{"class":54,"line":118},[52,53017,1751],{"class":58},[52,53019,53020,53022,53025,53027,53030],{"class":54,"line":594},[52,53021,1756],{"class":58},[52,53023,53024],{"class":73},"'StudioBackground'",[52,53026,1762],{"class":58},[52,53028,53029],{"class":73},"'#d8dbec'",[52,53031,1768],{"class":58},[52,53033,53034],{"class":54,"line":600},[52,53035,1773],{"class":58},[52,53037,53038],{"class":54,"line":606},[52,53039,1778],{"class":58},[156,53041,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53043},[53044,53045],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/studiobackground",{"title":52806,"description":52814},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":53052,"title":53053,"body":53054,"category":27760,"componentType":20842,"description":53061,"extension":168,"meta":53340,"navigation":171,"path":53341,"requiresChild":27763,"seo":53342,"stem":53343,"__hash__":53344},"components/docs/components/SunBurst.md","SunBurst",{"type":8,"value":53055,"toc":53336},[53056,53059,53062,53064,53066,53069,53071,53334],[11,53057,53053],{"id":53058},"sunburst",[15,53060,53061],{},"Radial sunburst rays emanating from a center point",[26901,53063],{"component":53053},[23,53065,26905],{"id":21503},[26907,53067],{":props":53068},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffdd88\",\"description\":\"Ray color\"},{\"name\":\"background\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Background color\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the sunburst\"},{\"name\":\"rayCount\",\"type\":\"number\",\"default\":\"12\",\"description\":\"Number of rays\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Softness of ray edges\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"How far the rays extend from the center\"},{\"name\":\"feather\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How gradually the rays fade at their outer edge\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Rotation speed — positive values rotate clockwise\"}]",[23,53070,26913],{"id":26912},[217,53072,53073,53122,53173,53221,53271],{":tabs":1543},[43,53074,53076],{"className":45,"code":53075,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n :radius=\"0.8\"\n />\n\u003C/Shader>\n",[31,53077,53078,53086,53093,53102,53110,53114],{"__ignoreMap":48},[52,53079,53080,53082,53084],{"class":54,"line":55},[52,53081,59],{"class":58},[52,53083,63],{"class":62},[52,53085,77],{"class":58},[52,53087,53088,53090],{"class":54,"line":80},[52,53089,83],{"class":58},[52,53091,53092],{"class":62},"SunBurst\n",[52,53094,53095,53097,53099],{"class":54,"line":108},[52,53096,7351],{"class":66},[52,53098,70],{"class":58},[52,53100,53101],{"class":73},"\"#ffdd88\"\n",[52,53103,53104,53106,53108],{"class":54,"line":118},[52,53105,14901],{"class":66},[52,53107,70],{"class":58},[52,53109,7366],{"class":73},[52,53111,53112],{"class":54,"line":594},[52,53113,1224],{"class":58},[52,53115,53116,53118,53120],{"class":54,"line":600},[52,53117,121],{"class":58},[52,53119,63],{"class":62},[52,53121,77],{"class":58},[43,53123,53125],{"className":360,"code":53124,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSunBurst\n color=\"#ffdd88\"\n radius={0.8}\n />\n\u003C/Shader>\n",[31,53126,53127,53135,53141,53149,53161,53165],{"__ignoreMap":48},[52,53128,53129,53131,53133],{"class":54,"line":55},[52,53130,59],{"class":58},[52,53132,63],{"class":371},[52,53134,77],{"class":58},[52,53136,53137,53139],{"class":54,"line":80},[52,53138,83],{"class":58},[52,53140,53092],{"class":371},[52,53142,53143,53145,53147],{"class":54,"line":108},[52,53144,7351],{"class":66},[52,53146,70],{"class":231},[52,53148,53101],{"class":73},[52,53150,53151,53153,53155,53157,53159],{"class":54,"line":118},[52,53152,7361],{"class":66},[52,53154,70],{"class":231},[52,53156,723],{"class":58},[52,53158,4011],{"class":371},[52,53160,729],{"class":58},[52,53162,53163],{"class":54,"line":594},[52,53164,1224],{"class":58},[52,53166,53167,53169,53171],{"class":54,"line":600},[52,53168,121],{"class":58},[52,53170,63],{"class":371},[52,53172,77],{"class":58},[43,53174,53175],{"className":2507,"code":53124,"language":2509,"meta":48,"style":48},[31,53176,53177,53185,53191,53199,53209,53213],{"__ignoreMap":48},[52,53178,53179,53181,53183],{"class":54,"line":55},[52,53180,59],{"class":58},[52,53182,63],{"class":371},[52,53184,77],{"class":58},[52,53186,53187,53189],{"class":54,"line":80},[52,53188,83],{"class":58},[52,53190,53092],{"class":371},[52,53192,53193,53195,53197],{"class":54,"line":108},[52,53194,7351],{"class":66},[52,53196,70],{"class":58},[52,53198,53101],{"class":73},[52,53200,53201,53203,53205,53207],{"class":54,"line":118},[52,53202,7361],{"class":66},[52,53204,24845],{"class":58},[52,53206,4011],{"class":371},[52,53208,729],{"class":58},[52,53210,53211],{"class":54,"line":594},[52,53212,1224],{"class":58},[52,53214,53215,53217,53219],{"class":54,"line":600},[52,53216,121],{"class":58},[52,53218,63],{"class":371},[52,53220,77],{"class":58},[43,53222,53223],{"className":419,"code":53124,"language":420,"meta":48,"style":48},[31,53224,53225,53233,53239,53247,53259,53263],{"__ignoreMap":48},[52,53226,53227,53229,53231],{"class":54,"line":55},[52,53228,59],{"class":58},[52,53230,63],{"class":371},[52,53232,77],{"class":58},[52,53234,53235,53237],{"class":54,"line":80},[52,53236,83],{"class":58},[52,53238,53092],{"class":371},[52,53240,53241,53243,53245],{"class":54,"line":108},[52,53242,7351],{"class":66},[52,53244,70],{"class":231},[52,53246,53101],{"class":73},[52,53248,53249,53251,53253,53255,53257],{"class":54,"line":118},[52,53250,7361],{"class":66},[52,53252,70],{"class":231},[52,53254,723],{"class":58},[52,53256,4011],{"class":371},[52,53258,729],{"class":58},[52,53260,53261],{"class":54,"line":594},[52,53262,1224],{"class":58},[52,53264,53265,53267,53269],{"class":54,"line":600},[52,53266,121],{"class":58},[52,53268,63],{"class":371},[52,53270,77],{"class":58},[43,53272,53274],{"className":222,"code":53273,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'SunBurst', props: { color: '#ffdd88', radius: 0.8 } }\n ]\n})\n",[31,53275,53276,53286,53290,53304,53308,53326,53330],{"__ignoreMap":48},[52,53277,53278,53280,53282,53284],{"class":54,"line":55},[52,53279,232],{"class":231},[52,53281,9231],{"class":58},[52,53283,238],{"class":231},[52,53285,9236],{"class":73},[52,53287,53288],{"class":54,"line":80},[52,53289,597],{"emptyLinePlaceholder":171},[52,53291,53292,53294,53296,53298,53300,53302],{"class":54,"line":108},[52,53293,1721],{"class":231},[52,53295,1724],{"class":371},[52,53297,1727],{"class":231},[52,53299,1730],{"class":231},[52,53301,1733],{"class":66},[52,53303,1736],{"class":58},[52,53305,53306],{"class":54,"line":118},[52,53307,1751],{"class":58},[52,53309,53310,53312,53315,53317,53320,53322,53324],{"class":54,"line":594},[52,53311,1756],{"class":58},[52,53313,53314],{"class":73},"'SunBurst'",[52,53316,1762],{"class":58},[52,53318,53319],{"class":73},"'#ffdd88'",[52,53321,4278],{"class":58},[52,53323,4011],{"class":371},[52,53325,1768],{"class":58},[52,53327,53328],{"class":54,"line":600},[52,53329,1773],{"class":58},[52,53331,53332],{"class":54,"line":606},[52,53333,1778],{"class":58},[156,53335,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53337},[53338,53339],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sunburst",{"title":53053,"description":53061},"docs/components/SunBurst","lISmfe1uSzML-yNW6zHniZrM0fo_pPMviIH6KFPVMB8",{"id":53346,"title":11722,"body":53347,"category":27760,"componentType":20842,"description":53354,"extension":168,"meta":53539,"navigation":171,"path":53540,"requiresChild":27763,"seo":53541,"stem":53542,"__hash__":53543},"components/docs/components/Swirl.md",{"type":8,"value":53348,"toc":53535},[53349,53352,53355,53357,53359,53362,53364,53533],[11,53350,11722],{"id":53351},"swirl",[15,53353,53354],{},"Flowing swirl pattern with multi-layered noise",[26901,53356],{"component":11722},[23,53358,26905],{"id":21503},[26907,53360],{":props":53361},"[{\"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,53363,26913],{"id":26912},[217,53365,53366,53395,53423,53451,53479],{":tabs":1543},[43,53367,53369],{"className":45,"code":53368,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,53370,53371,53379,53387],{"__ignoreMap":48},[52,53372,53373,53375,53377],{"class":54,"line":55},[52,53374,59],{"class":58},[52,53376,63],{"class":62},[52,53378,77],{"class":58},[52,53380,53381,53383,53385],{"class":54,"line":80},[52,53382,83],{"class":58},[52,53384,11722],{"class":62},[52,53386,105],{"class":58},[52,53388,53389,53391,53393],{"class":54,"line":108},[52,53390,121],{"class":58},[52,53392,63],{"class":62},[52,53394,77],{"class":58},[43,53396,53397],{"className":360,"code":53368,"language":362,"meta":48,"style":48},[31,53398,53399,53407,53415],{"__ignoreMap":48},[52,53400,53401,53403,53405],{"class":54,"line":55},[52,53402,59],{"class":58},[52,53404,63],{"class":371},[52,53406,77],{"class":58},[52,53408,53409,53411,53413],{"class":54,"line":80},[52,53410,83],{"class":58},[52,53412,11722],{"class":371},[52,53414,105],{"class":58},[52,53416,53417,53419,53421],{"class":54,"line":108},[52,53418,121],{"class":58},[52,53420,63],{"class":371},[52,53422,77],{"class":58},[43,53424,53425],{"className":2507,"code":53368,"language":2509,"meta":48,"style":48},[31,53426,53427,53435,53443],{"__ignoreMap":48},[52,53428,53429,53431,53433],{"class":54,"line":55},[52,53430,59],{"class":58},[52,53432,63],{"class":371},[52,53434,77],{"class":58},[52,53436,53437,53439,53441],{"class":54,"line":80},[52,53438,83],{"class":58},[52,53440,11722],{"class":371},[52,53442,105],{"class":58},[52,53444,53445,53447,53449],{"class":54,"line":108},[52,53446,121],{"class":58},[52,53448,63],{"class":371},[52,53450,77],{"class":58},[43,53452,53453],{"className":419,"code":53368,"language":420,"meta":48,"style":48},[31,53454,53455,53463,53471],{"__ignoreMap":48},[52,53456,53457,53459,53461],{"class":54,"line":55},[52,53458,59],{"class":58},[52,53460,63],{"class":371},[52,53462,77],{"class":58},[52,53464,53465,53467,53469],{"class":54,"line":80},[52,53466,83],{"class":58},[52,53468,11722],{"class":371},[52,53470,105],{"class":58},[52,53472,53473,53475,53477],{"class":54,"line":108},[52,53474,121],{"class":58},[52,53476,63],{"class":371},[52,53478,77],{"class":58},[43,53480,53482],{"className":222,"code":53481,"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,53483,53484,53494,53498,53512,53516,53525,53529],{"__ignoreMap":48},[52,53485,53486,53488,53490,53492],{"class":54,"line":55},[52,53487,232],{"class":231},[52,53489,9231],{"class":58},[52,53491,238],{"class":231},[52,53493,9236],{"class":73},[52,53495,53496],{"class":54,"line":80},[52,53497,597],{"emptyLinePlaceholder":171},[52,53499,53500,53502,53504,53506,53508,53510],{"class":54,"line":108},[52,53501,1721],{"class":231},[52,53503,1724],{"class":371},[52,53505,1727],{"class":231},[52,53507,1730],{"class":231},[52,53509,1733],{"class":66},[52,53511,1736],{"class":58},[52,53513,53514],{"class":54,"line":118},[52,53515,1751],{"class":58},[52,53517,53518,53520,53523],{"class":54,"line":594},[52,53519,1756],{"class":58},[52,53521,53522],{"class":73},"'Swirl'",[52,53524,2129],{"class":58},[52,53526,53527],{"class":54,"line":600},[52,53528,1773],{"class":58},[52,53530,53531],{"class":54,"line":606},[52,53532,1778],{"class":58},[156,53534,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53536},[53537,53538],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/swirl",{"title":11722,"description":53354},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":53545,"title":53546,"body":53547,"category":27225,"componentType":20848,"description":53554,"extension":168,"meta":53871,"navigation":171,"path":53872,"requiresChild":171,"seo":53873,"stem":53874,"__hash__":53875},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":53548,"toc":53867},[53549,53552,53555,53557,53559,53562,53564,53865],[11,53550,53546],{"id":53551},"tiltshift",[15,53553,53554],{},"Selective focus blur mimicking tilt-shift photography",[26901,53556],{"component":53546},[23,53558,26905],{"id":21503},[26907,53560],{":props":53561},"[{\"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,53563,26913],{"id":26912},[217,53565,53566,53622,53681,53737,53795],{":tabs":1543},[43,53567,53569],{"className":45,"code":53568,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,53570,53571,53579,53586,53594,53598,53606,53614],{"__ignoreMap":48},[52,53572,53573,53575,53577],{"class":54,"line":55},[52,53574,59],{"class":58},[52,53576,63],{"class":62},[52,53578,77],{"class":58},[52,53580,53581,53583],{"class":54,"line":80},[52,53582,83],{"class":58},[52,53584,53585],{"class":62},"TiltShift\n",[52,53587,53588,53590,53592],{"class":54,"line":108},[52,53589,17870],{"class":66},[52,53591,70],{"class":58},[52,53593,28549],{"class":73},[52,53595,53596],{"class":54,"line":118},[52,53597,26949],{"class":58},[52,53599,53600,53602,53604],{"class":54,"line":594},[52,53601,2213],{"class":58},[52,53603,2216],{"class":62},[52,53605,105],{"class":58},[52,53607,53608,53610,53612],{"class":54,"line":600},[52,53609,2230],{"class":58},[52,53611,53546],{"class":62},[52,53613,77],{"class":58},[52,53615,53616,53618,53620],{"class":54,"line":606},[52,53617,121],{"class":58},[52,53619,63],{"class":62},[52,53621,77],{"class":58},[43,53623,53625],{"className":360,"code":53624,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,53626,53627,53635,53641,53653,53657,53665,53673],{"__ignoreMap":48},[52,53628,53629,53631,53633],{"class":54,"line":55},[52,53630,59],{"class":58},[52,53632,63],{"class":371},[52,53634,77],{"class":58},[52,53636,53637,53639],{"class":54,"line":80},[52,53638,83],{"class":58},[52,53640,53585],{"class":371},[52,53642,53643,53645,53647,53649,53651],{"class":54,"line":108},[52,53644,17981],{"class":66},[52,53646,70],{"class":231},[52,53648,723],{"class":58},[52,53650,28607],{"class":371},[52,53652,729],{"class":58},[52,53654,53655],{"class":54,"line":118},[52,53656,26949],{"class":58},[52,53658,53659,53661,53663],{"class":54,"line":594},[52,53660,2213],{"class":58},[52,53662,2216],{"class":371},[52,53664,105],{"class":58},[52,53666,53667,53669,53671],{"class":54,"line":600},[52,53668,2230],{"class":58},[52,53670,53546],{"class":371},[52,53672,77],{"class":58},[52,53674,53675,53677,53679],{"class":54,"line":606},[52,53676,121],{"class":58},[52,53678,63],{"class":371},[52,53680,77],{"class":58},[43,53682,53683],{"className":2507,"code":53624,"language":2509,"meta":48,"style":48},[31,53684,53685,53693,53699,53709,53713,53721,53729],{"__ignoreMap":48},[52,53686,53687,53689,53691],{"class":54,"line":55},[52,53688,59],{"class":58},[52,53690,63],{"class":371},[52,53692,77],{"class":58},[52,53694,53695,53697],{"class":54,"line":80},[52,53696,83],{"class":58},[52,53698,53585],{"class":371},[52,53700,53701,53703,53705,53707],{"class":54,"line":108},[52,53702,17981],{"class":66},[52,53704,24845],{"class":58},[52,53706,28607],{"class":371},[52,53708,729],{"class":58},[52,53710,53711],{"class":54,"line":118},[52,53712,26949],{"class":58},[52,53714,53715,53717,53719],{"class":54,"line":594},[52,53716,2213],{"class":58},[52,53718,2216],{"class":371},[52,53720,105],{"class":58},[52,53722,53723,53725,53727],{"class":54,"line":600},[52,53724,2230],{"class":58},[52,53726,53546],{"class":371},[52,53728,77],{"class":58},[52,53730,53731,53733,53735],{"class":54,"line":606},[52,53732,121],{"class":58},[52,53734,63],{"class":371},[52,53736,77],{"class":58},[43,53738,53739],{"className":419,"code":53624,"language":420,"meta":48,"style":48},[31,53740,53741,53749,53755,53767,53771,53779,53787],{"__ignoreMap":48},[52,53742,53743,53745,53747],{"class":54,"line":55},[52,53744,59],{"class":58},[52,53746,63],{"class":371},[52,53748,77],{"class":58},[52,53750,53751,53753],{"class":54,"line":80},[52,53752,83],{"class":58},[52,53754,53585],{"class":371},[52,53756,53757,53759,53761,53763,53765],{"class":54,"line":108},[52,53758,17981],{"class":66},[52,53760,70],{"class":231},[52,53762,723],{"class":58},[52,53764,28607],{"class":371},[52,53766,729],{"class":58},[52,53768,53769],{"class":54,"line":118},[52,53770,26949],{"class":58},[52,53772,53773,53775,53777],{"class":54,"line":594},[52,53774,2213],{"class":58},[52,53776,2216],{"class":371},[52,53778,105],{"class":58},[52,53780,53781,53783,53785],{"class":54,"line":600},[52,53782,2230],{"class":58},[52,53784,53546],{"class":371},[52,53786,77],{"class":58},[52,53788,53789,53791,53793],{"class":54,"line":606},[52,53790,121],{"class":58},[52,53792,63],{"class":371},[52,53794,77],{"class":58},[43,53796,53798],{"className":222,"code":53797,"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,53799,53800,53810,53814,53828,53832,53845,53853,53857,53861],{"__ignoreMap":48},[52,53801,53802,53804,53806,53808],{"class":54,"line":55},[52,53803,232],{"class":231},[52,53805,9231],{"class":58},[52,53807,238],{"class":231},[52,53809,9236],{"class":73},[52,53811,53812],{"class":54,"line":80},[52,53813,597],{"emptyLinePlaceholder":171},[52,53815,53816,53818,53820,53822,53824,53826],{"class":54,"line":108},[52,53817,1721],{"class":231},[52,53819,1724],{"class":371},[52,53821,1727],{"class":231},[52,53823,1730],{"class":231},[52,53825,1733],{"class":66},[52,53827,1736],{"class":58},[52,53829,53830],{"class":54,"line":118},[52,53831,1751],{"class":58},[52,53833,53834,53836,53839,53841,53843],{"class":54,"line":594},[52,53835,1756],{"class":58},[52,53837,53838],{"class":73},"'TiltShift'",[52,53840,27194],{"class":58},[52,53842,28607],{"class":371},[52,53844,5259],{"class":58},[52,53846,53847,53849,53851],{"class":54,"line":600},[52,53848,4727],{"class":58},[52,53850,2869],{"class":73},[52,53852,2129],{"class":58},[52,53854,53855],{"class":54,"line":606},[52,53856,4744],{"class":58},[52,53858,53859],{"class":54,"line":653},[52,53860,1773],{"class":58},[52,53862,53863],{"class":54,"line":662},[52,53864,1778],{"class":58},[156,53866,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53868},[53869,53870],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tiltshift",{"title":53546,"description":53554},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":53877,"title":53878,"body":53879,"category":29304,"componentType":20848,"description":53886,"extension":168,"meta":54194,"navigation":171,"path":54195,"requiresChild":171,"seo":54196,"stem":54197,"__hash__":54198},"components/docs/components/Tint.md","Tint",{"type":8,"value":53880,"toc":54190},[53881,53884,53887,53889,53891,53894,53896,54188],[11,53882,53878],{"id":53883},"tint",[15,53885,53886],{},"Apply a color tint to the image",[26901,53888],{"component":53878},[23,53890,26905],{"id":21503},[26907,53892],{":props":53893},"[{\"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,53895,26913],{"id":26912},[217,53897,53898,53955,54009,54063,54117],{":tabs":1543},[43,53899,53901],{"className":45,"code":53900,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,53902,53903,53911,53918,53927,53931,53939,53947],{"__ignoreMap":48},[52,53904,53905,53907,53909],{"class":54,"line":55},[52,53906,59],{"class":58},[52,53908,63],{"class":62},[52,53910,77],{"class":58},[52,53912,53913,53915],{"class":54,"line":80},[52,53914,83],{"class":58},[52,53916,53917],{"class":62},"Tint\n",[52,53919,53920,53922,53924],{"class":54,"line":108},[52,53921,7351],{"class":66},[52,53923,70],{"class":58},[52,53925,53926],{"class":73},"\"#ff8800\"\n",[52,53928,53929],{"class":54,"line":118},[52,53930,26949],{"class":58},[52,53932,53933,53935,53937],{"class":54,"line":594},[52,53934,2213],{"class":58},[52,53936,2216],{"class":62},[52,53938,105],{"class":58},[52,53940,53941,53943,53945],{"class":54,"line":600},[52,53942,2230],{"class":58},[52,53944,53878],{"class":62},[52,53946,77],{"class":58},[52,53948,53949,53951,53953],{"class":54,"line":606},[52,53950,121],{"class":58},[52,53952,63],{"class":62},[52,53954,77],{"class":58},[43,53956,53957],{"className":360,"code":53900,"language":362,"meta":48,"style":48},[31,53958,53959,53967,53973,53981,53985,53993,54001],{"__ignoreMap":48},[52,53960,53961,53963,53965],{"class":54,"line":55},[52,53962,59],{"class":58},[52,53964,63],{"class":371},[52,53966,77],{"class":58},[52,53968,53969,53971],{"class":54,"line":80},[52,53970,83],{"class":58},[52,53972,53917],{"class":371},[52,53974,53975,53977,53979],{"class":54,"line":108},[52,53976,7351],{"class":66},[52,53978,70],{"class":231},[52,53980,53926],{"class":73},[52,53982,53983],{"class":54,"line":118},[52,53984,26949],{"class":58},[52,53986,53987,53989,53991],{"class":54,"line":594},[52,53988,2213],{"class":58},[52,53990,2216],{"class":371},[52,53992,105],{"class":58},[52,53994,53995,53997,53999],{"class":54,"line":600},[52,53996,2230],{"class":58},[52,53998,53878],{"class":371},[52,54000,77],{"class":58},[52,54002,54003,54005,54007],{"class":54,"line":606},[52,54004,121],{"class":58},[52,54006,63],{"class":371},[52,54008,77],{"class":58},[43,54010,54011],{"className":2507,"code":53900,"language":2509,"meta":48,"style":48},[31,54012,54013,54021,54027,54035,54039,54047,54055],{"__ignoreMap":48},[52,54014,54015,54017,54019],{"class":54,"line":55},[52,54016,59],{"class":58},[52,54018,63],{"class":371},[52,54020,77],{"class":58},[52,54022,54023,54025],{"class":54,"line":80},[52,54024,83],{"class":58},[52,54026,53917],{"class":371},[52,54028,54029,54031,54033],{"class":54,"line":108},[52,54030,7351],{"class":66},[52,54032,70],{"class":58},[52,54034,53926],{"class":73},[52,54036,54037],{"class":54,"line":118},[52,54038,26949],{"class":58},[52,54040,54041,54043,54045],{"class":54,"line":594},[52,54042,2213],{"class":58},[52,54044,2216],{"class":371},[52,54046,105],{"class":58},[52,54048,54049,54051,54053],{"class":54,"line":600},[52,54050,2230],{"class":58},[52,54052,53878],{"class":371},[52,54054,77],{"class":58},[52,54056,54057,54059,54061],{"class":54,"line":606},[52,54058,121],{"class":58},[52,54060,63],{"class":371},[52,54062,77],{"class":58},[43,54064,54065],{"className":419,"code":53900,"language":420,"meta":48,"style":48},[31,54066,54067,54075,54081,54089,54093,54101,54109],{"__ignoreMap":48},[52,54068,54069,54071,54073],{"class":54,"line":55},[52,54070,59],{"class":58},[52,54072,63],{"class":371},[52,54074,77],{"class":58},[52,54076,54077,54079],{"class":54,"line":80},[52,54078,83],{"class":58},[52,54080,53917],{"class":371},[52,54082,54083,54085,54087],{"class":54,"line":108},[52,54084,7351],{"class":66},[52,54086,70],{"class":231},[52,54088,53926],{"class":73},[52,54090,54091],{"class":54,"line":118},[52,54092,26949],{"class":58},[52,54094,54095,54097,54099],{"class":54,"line":594},[52,54096,2213],{"class":58},[52,54098,2216],{"class":371},[52,54100,105],{"class":58},[52,54102,54103,54105,54107],{"class":54,"line":600},[52,54104,2230],{"class":58},[52,54106,53878],{"class":371},[52,54108,77],{"class":58},[52,54110,54111,54113,54115],{"class":54,"line":606},[52,54112,121],{"class":58},[52,54114,63],{"class":371},[52,54116,77],{"class":58},[43,54118,54120],{"className":222,"code":54119,"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,54121,54122,54132,54136,54150,54154,54168,54176,54180,54184],{"__ignoreMap":48},[52,54123,54124,54126,54128,54130],{"class":54,"line":55},[52,54125,232],{"class":231},[52,54127,9231],{"class":58},[52,54129,238],{"class":231},[52,54131,9236],{"class":73},[52,54133,54134],{"class":54,"line":80},[52,54135,597],{"emptyLinePlaceholder":171},[52,54137,54138,54140,54142,54144,54146,54148],{"class":54,"line":108},[52,54139,1721],{"class":231},[52,54141,1724],{"class":371},[52,54143,1727],{"class":231},[52,54145,1730],{"class":231},[52,54147,1733],{"class":66},[52,54149,1736],{"class":58},[52,54151,54152],{"class":54,"line":118},[52,54153,1751],{"class":58},[52,54155,54156,54158,54161,54163,54166],{"class":54,"line":594},[52,54157,1756],{"class":58},[52,54159,54160],{"class":73},"'Tint'",[52,54162,1762],{"class":58},[52,54164,54165],{"class":73},"'#ff8800'",[52,54167,5259],{"class":58},[52,54169,54170,54172,54174],{"class":54,"line":600},[52,54171,4727],{"class":58},[52,54173,2869],{"class":73},[52,54175,2129],{"class":58},[52,54177,54178],{"class":54,"line":606},[52,54179,4744],{"class":58},[52,54181,54182],{"class":54,"line":653},[52,54183,1773],{"class":58},[52,54185,54186],{"class":54,"line":662},[52,54187,1778],{"class":58},[156,54189,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54191},[54192,54193],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tint",{"title":53878,"description":53886},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":54200,"title":54201,"body":54202,"category":31459,"componentType":20842,"description":54209,"extension":168,"meta":54439,"navigation":171,"path":54440,"requiresChild":27763,"seo":54441,"stem":54442,"__hash__":54443},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":54203,"toc":54435},[54204,54207,54210,54212,54214,54217,54219,54433],[11,54205,54201],{"id":54206},"trapezoid",[15,54208,54209],{},"Trapezoid with adjustable top and bottom widths and height",[26901,54211],{"component":54201},[23,54213,26905],{"id":21503},[26907,54215],{":props":54216},"[{\"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,54218,26913],{"id":26912},[217,54220,54221,54261,54299,54337,54375],{":tabs":1543},[43,54222,54224],{"className":45,"code":54223,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,54225,54226,54234,54241,54249,54253],{"__ignoreMap":48},[52,54227,54228,54230,54232],{"class":54,"line":55},[52,54229,59],{"class":58},[52,54231,63],{"class":62},[52,54233,77],{"class":58},[52,54235,54236,54238],{"class":54,"line":80},[52,54237,83],{"class":58},[52,54239,54240],{"class":62},"Trapezoid\n",[52,54242,54243,54245,54247],{"class":54,"line":108},[52,54244,7351],{"class":66},[52,54246,70],{"class":58},[52,54248,7307],{"class":73},[52,54250,54251],{"class":54,"line":118},[52,54252,1224],{"class":58},[52,54254,54255,54257,54259],{"class":54,"line":594},[52,54256,121],{"class":58},[52,54258,63],{"class":62},[52,54260,77],{"class":58},[43,54262,54263],{"className":360,"code":54223,"language":362,"meta":48,"style":48},[31,54264,54265,54273,54279,54287,54291],{"__ignoreMap":48},[52,54266,54267,54269,54271],{"class":54,"line":55},[52,54268,59],{"class":58},[52,54270,63],{"class":371},[52,54272,77],{"class":58},[52,54274,54275,54277],{"class":54,"line":80},[52,54276,83],{"class":58},[52,54278,54240],{"class":371},[52,54280,54281,54283,54285],{"class":54,"line":108},[52,54282,7351],{"class":66},[52,54284,70],{"class":231},[52,54286,7307],{"class":73},[52,54288,54289],{"class":54,"line":118},[52,54290,1224],{"class":58},[52,54292,54293,54295,54297],{"class":54,"line":594},[52,54294,121],{"class":58},[52,54296,63],{"class":371},[52,54298,77],{"class":58},[43,54300,54301],{"className":2507,"code":54223,"language":2509,"meta":48,"style":48},[31,54302,54303,54311,54317,54325,54329],{"__ignoreMap":48},[52,54304,54305,54307,54309],{"class":54,"line":55},[52,54306,59],{"class":58},[52,54308,63],{"class":371},[52,54310,77],{"class":58},[52,54312,54313,54315],{"class":54,"line":80},[52,54314,83],{"class":58},[52,54316,54240],{"class":371},[52,54318,54319,54321,54323],{"class":54,"line":108},[52,54320,7351],{"class":66},[52,54322,70],{"class":58},[52,54324,7307],{"class":73},[52,54326,54327],{"class":54,"line":118},[52,54328,1224],{"class":58},[52,54330,54331,54333,54335],{"class":54,"line":594},[52,54332,121],{"class":58},[52,54334,63],{"class":371},[52,54336,77],{"class":58},[43,54338,54339],{"className":419,"code":54223,"language":420,"meta":48,"style":48},[31,54340,54341,54349,54355,54363,54367],{"__ignoreMap":48},[52,54342,54343,54345,54347],{"class":54,"line":55},[52,54344,59],{"class":58},[52,54346,63],{"class":371},[52,54348,77],{"class":58},[52,54350,54351,54353],{"class":54,"line":80},[52,54352,83],{"class":58},[52,54354,54240],{"class":371},[52,54356,54357,54359,54361],{"class":54,"line":108},[52,54358,7351],{"class":66},[52,54360,70],{"class":231},[52,54362,7307],{"class":73},[52,54364,54365],{"class":54,"line":118},[52,54366,1224],{"class":58},[52,54368,54369,54371,54373],{"class":54,"line":594},[52,54370,121],{"class":58},[52,54372,63],{"class":371},[52,54374,77],{"class":58},[43,54376,54378],{"className":222,"code":54377,"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,54379,54380,54390,54394,54408,54412,54425,54429],{"__ignoreMap":48},[52,54381,54382,54384,54386,54388],{"class":54,"line":55},[52,54383,232],{"class":231},[52,54385,9231],{"class":58},[52,54387,238],{"class":231},[52,54389,9236],{"class":73},[52,54391,54392],{"class":54,"line":80},[52,54393,597],{"emptyLinePlaceholder":171},[52,54395,54396,54398,54400,54402,54404,54406],{"class":54,"line":108},[52,54397,1721],{"class":231},[52,54399,1724],{"class":371},[52,54401,1727],{"class":231},[52,54403,1730],{"class":231},[52,54405,1733],{"class":66},[52,54407,1736],{"class":58},[52,54409,54410],{"class":54,"line":118},[52,54411,1751],{"class":58},[52,54413,54414,54416,54419,54421,54423],{"class":54,"line":594},[52,54415,1756],{"class":58},[52,54417,54418],{"class":73},"'Trapezoid'",[52,54420,1762],{"class":58},[52,54422,7886],{"class":73},[52,54424,1768],{"class":58},[52,54426,54427],{"class":54,"line":600},[52,54428,1773],{"class":58},[52,54430,54431],{"class":54,"line":606},[52,54432,1778],{"class":58},[156,54434,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54436},[54437,54438],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/trapezoid",{"title":54201,"description":54209},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":54445,"title":54446,"body":54447,"category":29304,"componentType":20848,"description":54454,"extension":168,"meta":54715,"navigation":171,"path":54716,"requiresChild":171,"seo":54717,"stem":54718,"__hash__":54719},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":54448,"toc":54711},[54449,54452,54455,54457,54459,54462,54464,54709],[11,54450,54446],{"id":54451},"tritone",[15,54453,54454],{},"Map colors to three tones: shadows, midtones, highlights",[26901,54456],{"component":54446},[23,54458,26905],{"id":21503},[26907,54460],{":props":54461},"[{\"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,54463,26913],{"id":26912},[217,54465,54466,54511,54555,54599,54643],{":tabs":1543},[43,54467,54469],{"className":45,"code":54468,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,54470,54471,54479,54487,54495,54503],{"__ignoreMap":48},[52,54472,54473,54475,54477],{"class":54,"line":55},[52,54474,59],{"class":58},[52,54476,63],{"class":62},[52,54478,77],{"class":58},[52,54480,54481,54483,54485],{"class":54,"line":80},[52,54482,83],{"class":58},[52,54484,54446],{"class":62},[52,54486,77],{"class":58},[52,54488,54489,54491,54493],{"class":54,"line":108},[52,54490,2213],{"class":58},[52,54492,2216],{"class":62},[52,54494,105],{"class":58},[52,54496,54497,54499,54501],{"class":54,"line":118},[52,54498,2230],{"class":58},[52,54500,54446],{"class":62},[52,54502,77],{"class":58},[52,54504,54505,54507,54509],{"class":54,"line":594},[52,54506,121],{"class":58},[52,54508,63],{"class":62},[52,54510,77],{"class":58},[43,54512,54513],{"className":360,"code":54468,"language":362,"meta":48,"style":48},[31,54514,54515,54523,54531,54539,54547],{"__ignoreMap":48},[52,54516,54517,54519,54521],{"class":54,"line":55},[52,54518,59],{"class":58},[52,54520,63],{"class":371},[52,54522,77],{"class":58},[52,54524,54525,54527,54529],{"class":54,"line":80},[52,54526,83],{"class":58},[52,54528,54446],{"class":371},[52,54530,77],{"class":58},[52,54532,54533,54535,54537],{"class":54,"line":108},[52,54534,2213],{"class":58},[52,54536,2216],{"class":371},[52,54538,105],{"class":58},[52,54540,54541,54543,54545],{"class":54,"line":118},[52,54542,2230],{"class":58},[52,54544,54446],{"class":371},[52,54546,77],{"class":58},[52,54548,54549,54551,54553],{"class":54,"line":594},[52,54550,121],{"class":58},[52,54552,63],{"class":371},[52,54554,77],{"class":58},[43,54556,54557],{"className":2507,"code":54468,"language":2509,"meta":48,"style":48},[31,54558,54559,54567,54575,54583,54591],{"__ignoreMap":48},[52,54560,54561,54563,54565],{"class":54,"line":55},[52,54562,59],{"class":58},[52,54564,63],{"class":371},[52,54566,77],{"class":58},[52,54568,54569,54571,54573],{"class":54,"line":80},[52,54570,83],{"class":58},[52,54572,54446],{"class":371},[52,54574,77],{"class":58},[52,54576,54577,54579,54581],{"class":54,"line":108},[52,54578,2213],{"class":58},[52,54580,2216],{"class":371},[52,54582,105],{"class":58},[52,54584,54585,54587,54589],{"class":54,"line":118},[52,54586,2230],{"class":58},[52,54588,54446],{"class":371},[52,54590,77],{"class":58},[52,54592,54593,54595,54597],{"class":54,"line":594},[52,54594,121],{"class":58},[52,54596,63],{"class":371},[52,54598,77],{"class":58},[43,54600,54601],{"className":419,"code":54468,"language":420,"meta":48,"style":48},[31,54602,54603,54611,54619,54627,54635],{"__ignoreMap":48},[52,54604,54605,54607,54609],{"class":54,"line":55},[52,54606,59],{"class":58},[52,54608,63],{"class":371},[52,54610,77],{"class":58},[52,54612,54613,54615,54617],{"class":54,"line":80},[52,54614,83],{"class":58},[52,54616,54446],{"class":371},[52,54618,77],{"class":58},[52,54620,54621,54623,54625],{"class":54,"line":108},[52,54622,2213],{"class":58},[52,54624,2216],{"class":371},[52,54626,105],{"class":58},[52,54628,54629,54631,54633],{"class":54,"line":118},[52,54630,2230],{"class":58},[52,54632,54446],{"class":371},[52,54634,77],{"class":58},[52,54636,54637,54639,54641],{"class":54,"line":594},[52,54638,121],{"class":58},[52,54640,63],{"class":371},[52,54642,77],{"class":58},[43,54644,54646],{"className":222,"code":54645,"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,54647,54648,54658,54662,54676,54680,54689,54697,54701,54705],{"__ignoreMap":48},[52,54649,54650,54652,54654,54656],{"class":54,"line":55},[52,54651,232],{"class":231},[52,54653,9231],{"class":58},[52,54655,238],{"class":231},[52,54657,9236],{"class":73},[52,54659,54660],{"class":54,"line":80},[52,54661,597],{"emptyLinePlaceholder":171},[52,54663,54664,54666,54668,54670,54672,54674],{"class":54,"line":108},[52,54665,1721],{"class":231},[52,54667,1724],{"class":371},[52,54669,1727],{"class":231},[52,54671,1730],{"class":231},[52,54673,1733],{"class":66},[52,54675,1736],{"class":58},[52,54677,54678],{"class":54,"line":118},[52,54679,1751],{"class":58},[52,54681,54682,54684,54687],{"class":54,"line":594},[52,54683,1756],{"class":58},[52,54685,54686],{"class":73},"'Tritone'",[52,54688,4722],{"class":58},[52,54690,54691,54693,54695],{"class":54,"line":600},[52,54692,4727],{"class":58},[52,54694,2869],{"class":73},[52,54696,2129],{"class":58},[52,54698,54699],{"class":54,"line":606},[52,54700,4744],{"class":58},[52,54702,54703],{"class":54,"line":653},[52,54704,1773],{"class":58},[52,54706,54707],{"class":54,"line":662},[52,54708,1778],{"class":58},[156,54710,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54712},[54713,54714],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tritone",{"title":54446,"description":54454},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":54721,"title":54722,"body":54723,"category":27760,"componentType":20842,"description":54730,"extension":168,"meta":54915,"navigation":171,"path":54916,"requiresChild":27763,"seo":54917,"stem":54918,"__hash__":54919},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":54724,"toc":54911},[54725,54728,54731,54733,54735,54738,54740,54909],[11,54726,54722],{"id":54727},"truchet",[15,54729,54730],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26901,54732],{"component":54722},[23,54734,26905],{"id":21503},[26907,54736],{":props":54737},"[{\"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,54739,26913],{"id":26912},[217,54741,54742,54771,54799,54827,54855],{":tabs":1543},[43,54743,54745],{"className":45,"code":54744,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,54746,54747,54755,54763],{"__ignoreMap":48},[52,54748,54749,54751,54753],{"class":54,"line":55},[52,54750,59],{"class":58},[52,54752,63],{"class":62},[52,54754,77],{"class":58},[52,54756,54757,54759,54761],{"class":54,"line":80},[52,54758,83],{"class":58},[52,54760,54722],{"class":62},[52,54762,105],{"class":58},[52,54764,54765,54767,54769],{"class":54,"line":108},[52,54766,121],{"class":58},[52,54768,63],{"class":62},[52,54770,77],{"class":58},[43,54772,54773],{"className":360,"code":54744,"language":362,"meta":48,"style":48},[31,54774,54775,54783,54791],{"__ignoreMap":48},[52,54776,54777,54779,54781],{"class":54,"line":55},[52,54778,59],{"class":58},[52,54780,63],{"class":371},[52,54782,77],{"class":58},[52,54784,54785,54787,54789],{"class":54,"line":80},[52,54786,83],{"class":58},[52,54788,54722],{"class":371},[52,54790,105],{"class":58},[52,54792,54793,54795,54797],{"class":54,"line":108},[52,54794,121],{"class":58},[52,54796,63],{"class":371},[52,54798,77],{"class":58},[43,54800,54801],{"className":2507,"code":54744,"language":2509,"meta":48,"style":48},[31,54802,54803,54811,54819],{"__ignoreMap":48},[52,54804,54805,54807,54809],{"class":54,"line":55},[52,54806,59],{"class":58},[52,54808,63],{"class":371},[52,54810,77],{"class":58},[52,54812,54813,54815,54817],{"class":54,"line":80},[52,54814,83],{"class":58},[52,54816,54722],{"class":371},[52,54818,105],{"class":58},[52,54820,54821,54823,54825],{"class":54,"line":108},[52,54822,121],{"class":58},[52,54824,63],{"class":371},[52,54826,77],{"class":58},[43,54828,54829],{"className":419,"code":54744,"language":420,"meta":48,"style":48},[31,54830,54831,54839,54847],{"__ignoreMap":48},[52,54832,54833,54835,54837],{"class":54,"line":55},[52,54834,59],{"class":58},[52,54836,63],{"class":371},[52,54838,77],{"class":58},[52,54840,54841,54843,54845],{"class":54,"line":80},[52,54842,83],{"class":58},[52,54844,54722],{"class":371},[52,54846,105],{"class":58},[52,54848,54849,54851,54853],{"class":54,"line":108},[52,54850,121],{"class":58},[52,54852,63],{"class":371},[52,54854,77],{"class":58},[43,54856,54858],{"className":222,"code":54857,"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,54859,54860,54870,54874,54888,54892,54901,54905],{"__ignoreMap":48},[52,54861,54862,54864,54866,54868],{"class":54,"line":55},[52,54863,232],{"class":231},[52,54865,9231],{"class":58},[52,54867,238],{"class":231},[52,54869,9236],{"class":73},[52,54871,54872],{"class":54,"line":80},[52,54873,597],{"emptyLinePlaceholder":171},[52,54875,54876,54878,54880,54882,54884,54886],{"class":54,"line":108},[52,54877,1721],{"class":231},[52,54879,1724],{"class":371},[52,54881,1727],{"class":231},[52,54883,1730],{"class":231},[52,54885,1733],{"class":66},[52,54887,1736],{"class":58},[52,54889,54890],{"class":54,"line":118},[52,54891,1751],{"class":58},[52,54893,54894,54896,54899],{"class":54,"line":594},[52,54895,1756],{"class":58},[52,54897,54898],{"class":73},"'Truchet'",[52,54900,2129],{"class":58},[52,54902,54903],{"class":54,"line":600},[52,54904,1773],{"class":58},[52,54906,54907],{"class":54,"line":606},[52,54908,1778],{"class":58},[156,54910,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54912},[54913,54914],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/truchet",{"title":54722,"description":54730},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":54921,"title":54922,"body":54923,"category":28094,"componentType":20848,"description":54930,"extension":168,"meta":55247,"navigation":171,"path":55248,"requiresChild":171,"seo":55249,"stem":55250,"__hash__":55251},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":54924,"toc":55243},[54925,54928,54931,54933,54935,54938,54940,55241],[11,54926,54922],{"id":54927},"twirl",[15,54929,54930],{},"Rotate and twist content around a center point",[26901,54932],{"component":54922},[23,54934,26905],{"id":21503},[26907,54936],{":props":54937},"[{\"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,54939,26913],{"id":26912},[217,54941,54942,54998,55057,55113,55171],{":tabs":1543},[43,54943,54945],{"className":45,"code":54944,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,54946,54947,54955,54962,54970,54974,54982,54990],{"__ignoreMap":48},[52,54948,54949,54951,54953],{"class":54,"line":55},[52,54950,59],{"class":58},[52,54952,63],{"class":62},[52,54954,77],{"class":58},[52,54956,54957,54959],{"class":54,"line":80},[52,54958,83],{"class":58},[52,54960,54961],{"class":62},"Twirl\n",[52,54963,54964,54966,54968],{"class":54,"line":108},[52,54965,17870],{"class":66},[52,54967,70],{"class":58},[52,54969,29360],{"class":73},[52,54971,54972],{"class":54,"line":118},[52,54973,26949],{"class":58},[52,54975,54976,54978,54980],{"class":54,"line":594},[52,54977,2213],{"class":58},[52,54979,2216],{"class":62},[52,54981,105],{"class":58},[52,54983,54984,54986,54988],{"class":54,"line":600},[52,54985,2230],{"class":58},[52,54987,54922],{"class":62},[52,54989,77],{"class":58},[52,54991,54992,54994,54996],{"class":54,"line":606},[52,54993,121],{"class":58},[52,54995,63],{"class":62},[52,54997,77],{"class":58},[43,54999,55001],{"className":360,"code":55000,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,55002,55003,55011,55017,55029,55033,55041,55049],{"__ignoreMap":48},[52,55004,55005,55007,55009],{"class":54,"line":55},[52,55006,59],{"class":58},[52,55008,63],{"class":371},[52,55010,77],{"class":58},[52,55012,55013,55015],{"class":54,"line":80},[52,55014,83],{"class":58},[52,55016,54961],{"class":371},[52,55018,55019,55021,55023,55025,55027],{"class":54,"line":108},[52,55020,17981],{"class":66},[52,55022,70],{"class":231},[52,55024,723],{"class":58},[52,55026,6391],{"class":371},[52,55028,729],{"class":58},[52,55030,55031],{"class":54,"line":118},[52,55032,26949],{"class":58},[52,55034,55035,55037,55039],{"class":54,"line":594},[52,55036,2213],{"class":58},[52,55038,2216],{"class":371},[52,55040,105],{"class":58},[52,55042,55043,55045,55047],{"class":54,"line":600},[52,55044,2230],{"class":58},[52,55046,54922],{"class":371},[52,55048,77],{"class":58},[52,55050,55051,55053,55055],{"class":54,"line":606},[52,55052,121],{"class":58},[52,55054,63],{"class":371},[52,55056,77],{"class":58},[43,55058,55059],{"className":2507,"code":55000,"language":2509,"meta":48,"style":48},[31,55060,55061,55069,55075,55085,55089,55097,55105],{"__ignoreMap":48},[52,55062,55063,55065,55067],{"class":54,"line":55},[52,55064,59],{"class":58},[52,55066,63],{"class":371},[52,55068,77],{"class":58},[52,55070,55071,55073],{"class":54,"line":80},[52,55072,83],{"class":58},[52,55074,54961],{"class":371},[52,55076,55077,55079,55081,55083],{"class":54,"line":108},[52,55078,17981],{"class":66},[52,55080,24845],{"class":58},[52,55082,6391],{"class":371},[52,55084,729],{"class":58},[52,55086,55087],{"class":54,"line":118},[52,55088,26949],{"class":58},[52,55090,55091,55093,55095],{"class":54,"line":594},[52,55092,2213],{"class":58},[52,55094,2216],{"class":371},[52,55096,105],{"class":58},[52,55098,55099,55101,55103],{"class":54,"line":600},[52,55100,2230],{"class":58},[52,55102,54922],{"class":371},[52,55104,77],{"class":58},[52,55106,55107,55109,55111],{"class":54,"line":606},[52,55108,121],{"class":58},[52,55110,63],{"class":371},[52,55112,77],{"class":58},[43,55114,55115],{"className":419,"code":55000,"language":420,"meta":48,"style":48},[31,55116,55117,55125,55131,55143,55147,55155,55163],{"__ignoreMap":48},[52,55118,55119,55121,55123],{"class":54,"line":55},[52,55120,59],{"class":58},[52,55122,63],{"class":371},[52,55124,77],{"class":58},[52,55126,55127,55129],{"class":54,"line":80},[52,55128,83],{"class":58},[52,55130,54961],{"class":371},[52,55132,55133,55135,55137,55139,55141],{"class":54,"line":108},[52,55134,17981],{"class":66},[52,55136,70],{"class":231},[52,55138,723],{"class":58},[52,55140,6391],{"class":371},[52,55142,729],{"class":58},[52,55144,55145],{"class":54,"line":118},[52,55146,26949],{"class":58},[52,55148,55149,55151,55153],{"class":54,"line":594},[52,55150,2213],{"class":58},[52,55152,2216],{"class":371},[52,55154,105],{"class":58},[52,55156,55157,55159,55161],{"class":54,"line":600},[52,55158,2230],{"class":58},[52,55160,54922],{"class":371},[52,55162,77],{"class":58},[52,55164,55165,55167,55169],{"class":54,"line":606},[52,55166,121],{"class":58},[52,55168,63],{"class":371},[52,55170,77],{"class":58},[43,55172,55174],{"className":222,"code":55173,"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,55175,55176,55186,55190,55204,55208,55221,55229,55233,55237],{"__ignoreMap":48},[52,55177,55178,55180,55182,55184],{"class":54,"line":55},[52,55179,232],{"class":231},[52,55181,9231],{"class":58},[52,55183,238],{"class":231},[52,55185,9236],{"class":73},[52,55187,55188],{"class":54,"line":80},[52,55189,597],{"emptyLinePlaceholder":171},[52,55191,55192,55194,55196,55198,55200,55202],{"class":54,"line":108},[52,55193,1721],{"class":231},[52,55195,1724],{"class":371},[52,55197,1727],{"class":231},[52,55199,1730],{"class":231},[52,55201,1733],{"class":66},[52,55203,1736],{"class":58},[52,55205,55206],{"class":54,"line":118},[52,55207,1751],{"class":58},[52,55209,55210,55212,55215,55217,55219],{"class":54,"line":594},[52,55211,1756],{"class":58},[52,55213,55214],{"class":73},"'Twirl'",[52,55216,27194],{"class":58},[52,55218,6391],{"class":371},[52,55220,5259],{"class":58},[52,55222,55223,55225,55227],{"class":54,"line":600},[52,55224,4727],{"class":58},[52,55226,2869],{"class":73},[52,55228,2129],{"class":58},[52,55230,55231],{"class":54,"line":606},[52,55232,4744],{"class":58},[52,55234,55235],{"class":54,"line":653},[52,55236,1773],{"class":58},[52,55238,55239],{"class":54,"line":662},[52,55240,1778],{"class":58},[156,55242,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":55244},[55245,55246],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/twirl",{"title":54922,"description":54930},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":55253,"title":55254,"body":55255,"category":27503,"componentType":20848,"description":55262,"extension":168,"meta":55523,"navigation":171,"path":55524,"requiresChild":171,"seo":55525,"stem":55526,"__hash__":55527},"components/docs/components/VHS.md","VHS",{"type":8,"value":55256,"toc":55519},[55257,55260,55263,55265,55267,55270,55272,55517],[11,55258,55254],{"id":55259},"vhs",[15,55261,55262],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[26901,55264],{"component":55254},[23,55266,26905],{"id":21503},[26907,55268],{":props":55269},"[{\"name\":\"wobble\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Overall amount of tape damage — waves, creases, and head-switching noise. Bursts on and off organically over time.\"},{\"name\":\"scanlineNoise\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Per-scanline fine chroma/luma jitter. Adds the classic horizontal-streak detail.\"},{\"name\":\"smear\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Horizontal chroma smear (color bleed) amount. Positive trails colour to the right (classic VHS), negative trails it to the left.\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed of the tape effects.\"}]",[23,55271,26913],{"id":26912},[217,55273,55274,55319,55363,55407,55451],{":tabs":1543},[43,55275,55277],{"className":45,"code":55276,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVHS>\n \u003CCircle />\n \u003C/VHS>\n\u003C/Shader>\n",[31,55278,55279,55287,55295,55303,55311],{"__ignoreMap":48},[52,55280,55281,55283,55285],{"class":54,"line":55},[52,55282,59],{"class":58},[52,55284,63],{"class":62},[52,55286,77],{"class":58},[52,55288,55289,55291,55293],{"class":54,"line":80},[52,55290,83],{"class":58},[52,55292,55254],{"class":62},[52,55294,77],{"class":58},[52,55296,55297,55299,55301],{"class":54,"line":108},[52,55298,2213],{"class":58},[52,55300,2216],{"class":62},[52,55302,105],{"class":58},[52,55304,55305,55307,55309],{"class":54,"line":118},[52,55306,2230],{"class":58},[52,55308,55254],{"class":62},[52,55310,77],{"class":58},[52,55312,55313,55315,55317],{"class":54,"line":594},[52,55314,121],{"class":58},[52,55316,63],{"class":62},[52,55318,77],{"class":58},[43,55320,55321],{"className":360,"code":55276,"language":362,"meta":48,"style":48},[31,55322,55323,55331,55339,55347,55355],{"__ignoreMap":48},[52,55324,55325,55327,55329],{"class":54,"line":55},[52,55326,59],{"class":58},[52,55328,63],{"class":371},[52,55330,77],{"class":58},[52,55332,55333,55335,55337],{"class":54,"line":80},[52,55334,83],{"class":58},[52,55336,55254],{"class":371},[52,55338,77],{"class":58},[52,55340,55341,55343,55345],{"class":54,"line":108},[52,55342,2213],{"class":58},[52,55344,2216],{"class":371},[52,55346,105],{"class":58},[52,55348,55349,55351,55353],{"class":54,"line":118},[52,55350,2230],{"class":58},[52,55352,55254],{"class":371},[52,55354,77],{"class":58},[52,55356,55357,55359,55361],{"class":54,"line":594},[52,55358,121],{"class":58},[52,55360,63],{"class":371},[52,55362,77],{"class":58},[43,55364,55365],{"className":2507,"code":55276,"language":2509,"meta":48,"style":48},[31,55366,55367,55375,55383,55391,55399],{"__ignoreMap":48},[52,55368,55369,55371,55373],{"class":54,"line":55},[52,55370,59],{"class":58},[52,55372,63],{"class":371},[52,55374,77],{"class":58},[52,55376,55377,55379,55381],{"class":54,"line":80},[52,55378,83],{"class":58},[52,55380,55254],{"class":371},[52,55382,77],{"class":58},[52,55384,55385,55387,55389],{"class":54,"line":108},[52,55386,2213],{"class":58},[52,55388,2216],{"class":371},[52,55390,105],{"class":58},[52,55392,55393,55395,55397],{"class":54,"line":118},[52,55394,2230],{"class":58},[52,55396,55254],{"class":371},[52,55398,77],{"class":58},[52,55400,55401,55403,55405],{"class":54,"line":594},[52,55402,121],{"class":58},[52,55404,63],{"class":371},[52,55406,77],{"class":58},[43,55408,55409],{"className":419,"code":55276,"language":420,"meta":48,"style":48},[31,55410,55411,55419,55427,55435,55443],{"__ignoreMap":48},[52,55412,55413,55415,55417],{"class":54,"line":55},[52,55414,59],{"class":58},[52,55416,63],{"class":371},[52,55418,77],{"class":58},[52,55420,55421,55423,55425],{"class":54,"line":80},[52,55422,83],{"class":58},[52,55424,55254],{"class":371},[52,55426,77],{"class":58},[52,55428,55429,55431,55433],{"class":54,"line":108},[52,55430,2213],{"class":58},[52,55432,2216],{"class":371},[52,55434,105],{"class":58},[52,55436,55437,55439,55441],{"class":54,"line":118},[52,55438,2230],{"class":58},[52,55440,55254],{"class":371},[52,55442,77],{"class":58},[52,55444,55445,55447,55449],{"class":54,"line":594},[52,55446,121],{"class":58},[52,55448,63],{"class":371},[52,55450,77],{"class":58},[43,55452,55454],{"className":222,"code":55453,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'VHS', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,55455,55456,55466,55470,55484,55488,55497,55505,55509,55513],{"__ignoreMap":48},[52,55457,55458,55460,55462,55464],{"class":54,"line":55},[52,55459,232],{"class":231},[52,55461,9231],{"class":58},[52,55463,238],{"class":231},[52,55465,9236],{"class":73},[52,55467,55468],{"class":54,"line":80},[52,55469,597],{"emptyLinePlaceholder":171},[52,55471,55472,55474,55476,55478,55480,55482],{"class":54,"line":108},[52,55473,1721],{"class":231},[52,55475,1724],{"class":371},[52,55477,1727],{"class":231},[52,55479,1730],{"class":231},[52,55481,1733],{"class":66},[52,55483,1736],{"class":58},[52,55485,55486],{"class":54,"line":118},[52,55487,1751],{"class":58},[52,55489,55490,55492,55495],{"class":54,"line":594},[52,55491,1756],{"class":58},[52,55493,55494],{"class":73},"'VHS'",[52,55496,4722],{"class":58},[52,55498,55499,55501,55503],{"class":54,"line":600},[52,55500,4727],{"class":58},[52,55502,2869],{"class":73},[52,55504,2129],{"class":58},[52,55506,55507],{"class":54,"line":606},[52,55508,4744],{"class":58},[52,55510,55511],{"class":54,"line":653},[52,55512,1773],{"class":58},[52,55514,55515],{"class":54,"line":662},[52,55516,1778],{"class":58},[156,55518,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55520},[55521,55522],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vhs",{"title":55254,"description":55262},"docs/components/VHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":55529,"title":55530,"body":55531,"category":31459,"componentType":20842,"description":55538,"extension":168,"meta":55815,"navigation":171,"path":55816,"requiresChild":27763,"seo":55817,"stem":55818,"__hash__":55819},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":55532,"toc":55811},[55533,55536,55539,55541,55543,55546,55548,55809],[11,55534,55530],{"id":55535},"vesica",[15,55537,55538],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26901,55540],{"component":55530},[23,55542,26905],{"id":21503},[26907,55544],{":props":55545},"[{\"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,55547,26913],{"id":26912},[217,55549,55550,55598,55649,55697,55747],{":tabs":1543},[43,55551,55553],{"className":45,"code":55552,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,55554,55555,55563,55570,55578,55586,55590],{"__ignoreMap":48},[52,55556,55557,55559,55561],{"class":54,"line":55},[52,55558,59],{"class":58},[52,55560,63],{"class":62},[52,55562,77],{"class":58},[52,55564,55565,55567],{"class":54,"line":80},[52,55566,83],{"class":58},[52,55568,55569],{"class":62},"Vesica\n",[52,55571,55572,55574,55576],{"class":54,"line":108},[52,55573,7351],{"class":66},[52,55575,70],{"class":58},[52,55577,7307],{"class":73},[52,55579,55580,55582,55584],{"class":54,"line":118},[52,55581,14901],{"class":66},[52,55583,70],{"class":58},[52,55585,32824],{"class":73},[52,55587,55588],{"class":54,"line":594},[52,55589,1224],{"class":58},[52,55591,55592,55594,55596],{"class":54,"line":600},[52,55593,121],{"class":58},[52,55595,63],{"class":62},[52,55597,77],{"class":58},[43,55599,55601],{"className":360,"code":55600,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,55602,55603,55611,55617,55625,55637,55641],{"__ignoreMap":48},[52,55604,55605,55607,55609],{"class":54,"line":55},[52,55606,59],{"class":58},[52,55608,63],{"class":371},[52,55610,77],{"class":58},[52,55612,55613,55615],{"class":54,"line":80},[52,55614,83],{"class":58},[52,55616,55569],{"class":371},[52,55618,55619,55621,55623],{"class":54,"line":108},[52,55620,7351],{"class":66},[52,55622,70],{"class":231},[52,55624,7307],{"class":73},[52,55626,55627,55629,55631,55633,55635],{"class":54,"line":118},[52,55628,7361],{"class":66},[52,55630,70],{"class":231},[52,55632,723],{"class":58},[52,55634,18630],{"class":371},[52,55636,729],{"class":58},[52,55638,55639],{"class":54,"line":594},[52,55640,1224],{"class":58},[52,55642,55643,55645,55647],{"class":54,"line":600},[52,55644,121],{"class":58},[52,55646,63],{"class":371},[52,55648,77],{"class":58},[43,55650,55651],{"className":2507,"code":55600,"language":2509,"meta":48,"style":48},[31,55652,55653,55661,55667,55675,55685,55689],{"__ignoreMap":48},[52,55654,55655,55657,55659],{"class":54,"line":55},[52,55656,59],{"class":58},[52,55658,63],{"class":371},[52,55660,77],{"class":58},[52,55662,55663,55665],{"class":54,"line":80},[52,55664,83],{"class":58},[52,55666,55569],{"class":371},[52,55668,55669,55671,55673],{"class":54,"line":108},[52,55670,7351],{"class":66},[52,55672,70],{"class":58},[52,55674,7307],{"class":73},[52,55676,55677,55679,55681,55683],{"class":54,"line":118},[52,55678,7361],{"class":66},[52,55680,24845],{"class":58},[52,55682,18630],{"class":371},[52,55684,729],{"class":58},[52,55686,55687],{"class":54,"line":594},[52,55688,1224],{"class":58},[52,55690,55691,55693,55695],{"class":54,"line":600},[52,55692,121],{"class":58},[52,55694,63],{"class":371},[52,55696,77],{"class":58},[43,55698,55699],{"className":419,"code":55600,"language":420,"meta":48,"style":48},[31,55700,55701,55709,55715,55723,55735,55739],{"__ignoreMap":48},[52,55702,55703,55705,55707],{"class":54,"line":55},[52,55704,59],{"class":58},[52,55706,63],{"class":371},[52,55708,77],{"class":58},[52,55710,55711,55713],{"class":54,"line":80},[52,55712,83],{"class":58},[52,55714,55569],{"class":371},[52,55716,55717,55719,55721],{"class":54,"line":108},[52,55718,7351],{"class":66},[52,55720,70],{"class":231},[52,55722,7307],{"class":73},[52,55724,55725,55727,55729,55731,55733],{"class":54,"line":118},[52,55726,7361],{"class":66},[52,55728,70],{"class":231},[52,55730,723],{"class":58},[52,55732,18630],{"class":371},[52,55734,729],{"class":58},[52,55736,55737],{"class":54,"line":594},[52,55738,1224],{"class":58},[52,55740,55741,55743,55745],{"class":54,"line":600},[52,55742,121],{"class":58},[52,55744,63],{"class":371},[52,55746,77],{"class":58},[43,55748,55750],{"className":222,"code":55749,"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,55751,55752,55762,55766,55780,55784,55801,55805],{"__ignoreMap":48},[52,55753,55754,55756,55758,55760],{"class":54,"line":55},[52,55755,232],{"class":231},[52,55757,9231],{"class":58},[52,55759,238],{"class":231},[52,55761,9236],{"class":73},[52,55763,55764],{"class":54,"line":80},[52,55765,597],{"emptyLinePlaceholder":171},[52,55767,55768,55770,55772,55774,55776,55778],{"class":54,"line":108},[52,55769,1721],{"class":231},[52,55771,1724],{"class":371},[52,55773,1727],{"class":231},[52,55775,1730],{"class":231},[52,55777,1733],{"class":66},[52,55779,1736],{"class":58},[52,55781,55782],{"class":54,"line":118},[52,55783,1751],{"class":58},[52,55785,55786,55788,55791,55793,55795,55797,55799],{"class":54,"line":594},[52,55787,1756],{"class":58},[52,55789,55790],{"class":73},"'Vesica'",[52,55792,1762],{"class":58},[52,55794,7886],{"class":73},[52,55796,4278],{"class":58},[52,55798,18630],{"class":371},[52,55800,1768],{"class":58},[52,55802,55803],{"class":54,"line":600},[52,55804,1773],{"class":58},[52,55806,55807],{"class":54,"line":606},[52,55808,1778],{"class":58},[156,55810,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":55812},[55813,55814],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vesica",{"title":55530,"description":55538},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":55821,"title":55822,"body":55823,"category":29304,"componentType":20848,"description":55830,"extension":168,"meta":56148,"navigation":171,"path":56149,"requiresChild":171,"seo":56150,"stem":56151,"__hash__":56152},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":55824,"toc":56144},[55825,55828,55831,55833,55835,55838,55840,56142],[11,55826,55822],{"id":55827},"vibrance",[15,55829,55830],{},"Selective saturation adjustment protecting skin tones",[26901,55832],{"component":55822},[23,55834,26905],{"id":21503},[26907,55836],{":props":55837},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,55839,26913],{"id":26912},[217,55841,55842,55899,55958,56014,56072],{":tabs":1543},[43,55843,55845],{"className":45,"code":55844,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,55846,55847,55855,55862,55871,55875,55883,55891],{"__ignoreMap":48},[52,55848,55849,55851,55853],{"class":54,"line":55},[52,55850,59],{"class":58},[52,55852,63],{"class":62},[52,55854,77],{"class":58},[52,55856,55857,55859],{"class":54,"line":80},[52,55858,83],{"class":58},[52,55860,55861],{"class":62},"Vibrance\n",[52,55863,55864,55866,55868],{"class":54,"line":108},[52,55865,17870],{"class":66},[52,55867,70],{"class":58},[52,55869,55870],{"class":73},"\"0\"\n",[52,55872,55873],{"class":54,"line":118},[52,55874,26949],{"class":58},[52,55876,55877,55879,55881],{"class":54,"line":594},[52,55878,2213],{"class":58},[52,55880,2216],{"class":62},[52,55882,105],{"class":58},[52,55884,55885,55887,55889],{"class":54,"line":600},[52,55886,2230],{"class":58},[52,55888,55822],{"class":62},[52,55890,77],{"class":58},[52,55892,55893,55895,55897],{"class":54,"line":606},[52,55894,121],{"class":58},[52,55896,63],{"class":62},[52,55898,77],{"class":58},[43,55900,55902],{"className":360,"code":55901,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,55903,55904,55912,55918,55930,55934,55942,55950],{"__ignoreMap":48},[52,55905,55906,55908,55910],{"class":54,"line":55},[52,55907,59],{"class":58},[52,55909,63],{"class":371},[52,55911,77],{"class":58},[52,55913,55914,55916],{"class":54,"line":80},[52,55915,83],{"class":58},[52,55917,55861],{"class":371},[52,55919,55920,55922,55924,55926,55928],{"class":54,"line":108},[52,55921,17981],{"class":66},[52,55923,70],{"class":231},[52,55925,723],{"class":58},[52,55927,6387],{"class":371},[52,55929,729],{"class":58},[52,55931,55932],{"class":54,"line":118},[52,55933,26949],{"class":58},[52,55935,55936,55938,55940],{"class":54,"line":594},[52,55937,2213],{"class":58},[52,55939,2216],{"class":371},[52,55941,105],{"class":58},[52,55943,55944,55946,55948],{"class":54,"line":600},[52,55945,2230],{"class":58},[52,55947,55822],{"class":371},[52,55949,77],{"class":58},[52,55951,55952,55954,55956],{"class":54,"line":606},[52,55953,121],{"class":58},[52,55955,63],{"class":371},[52,55957,77],{"class":58},[43,55959,55960],{"className":2507,"code":55901,"language":2509,"meta":48,"style":48},[31,55961,55962,55970,55976,55986,55990,55998,56006],{"__ignoreMap":48},[52,55963,55964,55966,55968],{"class":54,"line":55},[52,55965,59],{"class":58},[52,55967,63],{"class":371},[52,55969,77],{"class":58},[52,55971,55972,55974],{"class":54,"line":80},[52,55973,83],{"class":58},[52,55975,55861],{"class":371},[52,55977,55978,55980,55982,55984],{"class":54,"line":108},[52,55979,17981],{"class":66},[52,55981,24845],{"class":58},[52,55983,6387],{"class":371},[52,55985,729],{"class":58},[52,55987,55988],{"class":54,"line":118},[52,55989,26949],{"class":58},[52,55991,55992,55994,55996],{"class":54,"line":594},[52,55993,2213],{"class":58},[52,55995,2216],{"class":371},[52,55997,105],{"class":58},[52,55999,56000,56002,56004],{"class":54,"line":600},[52,56001,2230],{"class":58},[52,56003,55822],{"class":371},[52,56005,77],{"class":58},[52,56007,56008,56010,56012],{"class":54,"line":606},[52,56009,121],{"class":58},[52,56011,63],{"class":371},[52,56013,77],{"class":58},[43,56015,56016],{"className":419,"code":55901,"language":420,"meta":48,"style":48},[31,56017,56018,56026,56032,56044,56048,56056,56064],{"__ignoreMap":48},[52,56019,56020,56022,56024],{"class":54,"line":55},[52,56021,59],{"class":58},[52,56023,63],{"class":371},[52,56025,77],{"class":58},[52,56027,56028,56030],{"class":54,"line":80},[52,56029,83],{"class":58},[52,56031,55861],{"class":371},[52,56033,56034,56036,56038,56040,56042],{"class":54,"line":108},[52,56035,17981],{"class":66},[52,56037,70],{"class":231},[52,56039,723],{"class":58},[52,56041,6387],{"class":371},[52,56043,729],{"class":58},[52,56045,56046],{"class":54,"line":118},[52,56047,26949],{"class":58},[52,56049,56050,56052,56054],{"class":54,"line":594},[52,56051,2213],{"class":58},[52,56053,2216],{"class":371},[52,56055,105],{"class":58},[52,56057,56058,56060,56062],{"class":54,"line":600},[52,56059,2230],{"class":58},[52,56061,55822],{"class":371},[52,56063,77],{"class":58},[52,56065,56066,56068,56070],{"class":54,"line":606},[52,56067,121],{"class":58},[52,56069,63],{"class":371},[52,56071,77],{"class":58},[43,56073,56075],{"className":222,"code":56074,"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,56076,56077,56087,56091,56105,56109,56122,56130,56134,56138],{"__ignoreMap":48},[52,56078,56079,56081,56083,56085],{"class":54,"line":55},[52,56080,232],{"class":231},[52,56082,9231],{"class":58},[52,56084,238],{"class":231},[52,56086,9236],{"class":73},[52,56088,56089],{"class":54,"line":80},[52,56090,597],{"emptyLinePlaceholder":171},[52,56092,56093,56095,56097,56099,56101,56103],{"class":54,"line":108},[52,56094,1721],{"class":231},[52,56096,1724],{"class":371},[52,56098,1727],{"class":231},[52,56100,1730],{"class":231},[52,56102,1733],{"class":66},[52,56104,1736],{"class":58},[52,56106,56107],{"class":54,"line":118},[52,56108,1751],{"class":58},[52,56110,56111,56113,56116,56118,56120],{"class":54,"line":594},[52,56112,1756],{"class":58},[52,56114,56115],{"class":73},"'Vibrance'",[52,56117,27194],{"class":58},[52,56119,6387],{"class":371},[52,56121,5259],{"class":58},[52,56123,56124,56126,56128],{"class":54,"line":600},[52,56125,4727],{"class":58},[52,56127,2869],{"class":73},[52,56129,2129],{"class":58},[52,56131,56132],{"class":54,"line":606},[52,56133,4744],{"class":58},[52,56135,56136],{"class":54,"line":653},[52,56137,1773],{"class":58},[52,56139,56140],{"class":54,"line":662},[52,56141,1778],{"class":58},[156,56143,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":56145},[56146,56147],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vibrance",{"title":55822,"description":55830},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":56154,"title":56155,"body":56156,"category":27760,"componentType":20842,"description":56163,"extension":168,"meta":56348,"navigation":171,"path":56349,"requiresChild":27763,"seo":56350,"stem":56351,"__hash__":56352},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":56157,"toc":56344},[56158,56161,56164,56166,56168,56171,56173,56342],[11,56159,56155],{"id":56160},"videotexture",[15,56162,56163],{},"Display a video with customizable playback and object-fit modes",[26901,56165],{"component":56155},[23,56167,26905],{"id":21503},[26907,56169],{":props":56170},"[{\"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,56172,26913],{"id":26912},[217,56174,56175,56204,56232,56260,56288],{":tabs":1543},[43,56176,56178],{"className":45,"code":56177,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,56179,56180,56188,56196],{"__ignoreMap":48},[52,56181,56182,56184,56186],{"class":54,"line":55},[52,56183,59],{"class":58},[52,56185,63],{"class":62},[52,56187,77],{"class":58},[52,56189,56190,56192,56194],{"class":54,"line":80},[52,56191,83],{"class":58},[52,56193,56155],{"class":62},[52,56195,105],{"class":58},[52,56197,56198,56200,56202],{"class":54,"line":108},[52,56199,121],{"class":58},[52,56201,63],{"class":62},[52,56203,77],{"class":58},[43,56205,56206],{"className":360,"code":56177,"language":362,"meta":48,"style":48},[31,56207,56208,56216,56224],{"__ignoreMap":48},[52,56209,56210,56212,56214],{"class":54,"line":55},[52,56211,59],{"class":58},[52,56213,63],{"class":371},[52,56215,77],{"class":58},[52,56217,56218,56220,56222],{"class":54,"line":80},[52,56219,83],{"class":58},[52,56221,56155],{"class":371},[52,56223,105],{"class":58},[52,56225,56226,56228,56230],{"class":54,"line":108},[52,56227,121],{"class":58},[52,56229,63],{"class":371},[52,56231,77],{"class":58},[43,56233,56234],{"className":2507,"code":56177,"language":2509,"meta":48,"style":48},[31,56235,56236,56244,56252],{"__ignoreMap":48},[52,56237,56238,56240,56242],{"class":54,"line":55},[52,56239,59],{"class":58},[52,56241,63],{"class":371},[52,56243,77],{"class":58},[52,56245,56246,56248,56250],{"class":54,"line":80},[52,56247,83],{"class":58},[52,56249,56155],{"class":371},[52,56251,105],{"class":58},[52,56253,56254,56256,56258],{"class":54,"line":108},[52,56255,121],{"class":58},[52,56257,63],{"class":371},[52,56259,77],{"class":58},[43,56261,56262],{"className":419,"code":56177,"language":420,"meta":48,"style":48},[31,56263,56264,56272,56280],{"__ignoreMap":48},[52,56265,56266,56268,56270],{"class":54,"line":55},[52,56267,59],{"class":58},[52,56269,63],{"class":371},[52,56271,77],{"class":58},[52,56273,56274,56276,56278],{"class":54,"line":80},[52,56275,83],{"class":58},[52,56277,56155],{"class":371},[52,56279,105],{"class":58},[52,56281,56282,56284,56286],{"class":54,"line":108},[52,56283,121],{"class":58},[52,56285,63],{"class":371},[52,56287,77],{"class":58},[43,56289,56291],{"className":222,"code":56290,"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,56292,56293,56303,56307,56321,56325,56334,56338],{"__ignoreMap":48},[52,56294,56295,56297,56299,56301],{"class":54,"line":55},[52,56296,232],{"class":231},[52,56298,9231],{"class":58},[52,56300,238],{"class":231},[52,56302,9236],{"class":73},[52,56304,56305],{"class":54,"line":80},[52,56306,597],{"emptyLinePlaceholder":171},[52,56308,56309,56311,56313,56315,56317,56319],{"class":54,"line":108},[52,56310,1721],{"class":231},[52,56312,1724],{"class":371},[52,56314,1727],{"class":231},[52,56316,1730],{"class":231},[52,56318,1733],{"class":66},[52,56320,1736],{"class":58},[52,56322,56323],{"class":54,"line":118},[52,56324,1751],{"class":58},[52,56326,56327,56329,56332],{"class":54,"line":594},[52,56328,1756],{"class":58},[52,56330,56331],{"class":73},"'VideoTexture'",[52,56333,2129],{"class":58},[52,56335,56336],{"class":54,"line":600},[52,56337,1773],{"class":58},[52,56339,56340],{"class":54,"line":606},[52,56341,1778],{"class":58},[156,56343,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":56345},[56346,56347],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/videotexture",{"title":56155,"description":56163},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":56354,"title":56355,"body":56356,"category":27503,"componentType":20848,"description":56363,"extension":168,"meta":56762,"navigation":171,"path":56763,"requiresChild":171,"seo":56764,"stem":56765,"__hash__":56766},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":56357,"toc":56758},[56358,56361,56364,56366,56368,56371,56373,56756],[11,56359,56355],{"id":56360},"vignette",[15,56362,56363],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26901,56365],{"component":56355},[23,56367,26905],{"id":21503},[26907,56369],{":props":56370},"[{\"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,56372,26913],{"id":26912},[217,56374,56375,56447,56526,56600,56678],{":tabs":1543},[43,56376,56378],{"className":45,"code":56377,"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,56379,56380,56388,56395,56403,56411,56419,56423,56431,56439],{"__ignoreMap":48},[52,56381,56382,56384,56386],{"class":54,"line":55},[52,56383,59],{"class":58},[52,56385,63],{"class":62},[52,56387,77],{"class":58},[52,56389,56390,56392],{"class":54,"line":80},[52,56391,83],{"class":58},[52,56393,56394],{"class":62},"Vignette\n",[52,56396,56397,56399,56401],{"class":54,"line":108},[52,56398,7351],{"class":66},[52,56400,70],{"class":58},[52,56402,16975],{"class":73},[52,56404,56405,56407,56409],{"class":54,"line":118},[52,56406,14901],{"class":66},[52,56408,70],{"class":58},[52,56410,33394],{"class":73},[52,56412,56413,56415,56417],{"class":54,"line":594},[52,56414,17870],{"class":66},[52,56416,70],{"class":58},[52,56418,29360],{"class":73},[52,56420,56421],{"class":54,"line":600},[52,56422,26949],{"class":58},[52,56424,56425,56427,56429],{"class":54,"line":606},[52,56426,2213],{"class":58},[52,56428,2216],{"class":62},[52,56430,105],{"class":58},[52,56432,56433,56435,56437],{"class":54,"line":653},[52,56434,2230],{"class":58},[52,56436,56355],{"class":62},[52,56438,77],{"class":58},[52,56440,56441,56443,56445],{"class":54,"line":662},[52,56442,121],{"class":58},[52,56444,63],{"class":62},[52,56446,77],{"class":58},[43,56448,56450],{"className":360,"code":56449,"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,56451,56452,56460,56466,56474,56486,56498,56502,56510,56518],{"__ignoreMap":48},[52,56453,56454,56456,56458],{"class":54,"line":55},[52,56455,59],{"class":58},[52,56457,63],{"class":371},[52,56459,77],{"class":58},[52,56461,56462,56464],{"class":54,"line":80},[52,56463,83],{"class":58},[52,56465,56394],{"class":371},[52,56467,56468,56470,56472],{"class":54,"line":108},[52,56469,7351],{"class":66},[52,56471,70],{"class":231},[52,56473,16975],{"class":73},[52,56475,56476,56478,56480,56482,56484],{"class":54,"line":118},[52,56477,7361],{"class":66},[52,56479,70],{"class":231},[52,56481,723],{"class":58},[52,56483,5467],{"class":371},[52,56485,729],{"class":58},[52,56487,56488,56490,56492,56494,56496],{"class":54,"line":594},[52,56489,17981],{"class":66},[52,56491,70],{"class":231},[52,56493,723],{"class":58},[52,56495,6391],{"class":371},[52,56497,729],{"class":58},[52,56499,56500],{"class":54,"line":600},[52,56501,26949],{"class":58},[52,56503,56504,56506,56508],{"class":54,"line":606},[52,56505,2213],{"class":58},[52,56507,2216],{"class":371},[52,56509,105],{"class":58},[52,56511,56512,56514,56516],{"class":54,"line":653},[52,56513,2230],{"class":58},[52,56515,56355],{"class":371},[52,56517,77],{"class":58},[52,56519,56520,56522,56524],{"class":54,"line":662},[52,56521,121],{"class":58},[52,56523,63],{"class":371},[52,56525,77],{"class":58},[43,56527,56528],{"className":2507,"code":56449,"language":2509,"meta":48,"style":48},[31,56529,56530,56538,56544,56552,56562,56572,56576,56584,56592],{"__ignoreMap":48},[52,56531,56532,56534,56536],{"class":54,"line":55},[52,56533,59],{"class":58},[52,56535,63],{"class":371},[52,56537,77],{"class":58},[52,56539,56540,56542],{"class":54,"line":80},[52,56541,83],{"class":58},[52,56543,56394],{"class":371},[52,56545,56546,56548,56550],{"class":54,"line":108},[52,56547,7351],{"class":66},[52,56549,70],{"class":58},[52,56551,16975],{"class":73},[52,56553,56554,56556,56558,56560],{"class":54,"line":118},[52,56555,7361],{"class":66},[52,56557,24845],{"class":58},[52,56559,5467],{"class":371},[52,56561,729],{"class":58},[52,56563,56564,56566,56568,56570],{"class":54,"line":594},[52,56565,17981],{"class":66},[52,56567,24845],{"class":58},[52,56569,6391],{"class":371},[52,56571,729],{"class":58},[52,56573,56574],{"class":54,"line":600},[52,56575,26949],{"class":58},[52,56577,56578,56580,56582],{"class":54,"line":606},[52,56579,2213],{"class":58},[52,56581,2216],{"class":371},[52,56583,105],{"class":58},[52,56585,56586,56588,56590],{"class":54,"line":653},[52,56587,2230],{"class":58},[52,56589,56355],{"class":371},[52,56591,77],{"class":58},[52,56593,56594,56596,56598],{"class":54,"line":662},[52,56595,121],{"class":58},[52,56597,63],{"class":371},[52,56599,77],{"class":58},[43,56601,56602],{"className":419,"code":56449,"language":420,"meta":48,"style":48},[31,56603,56604,56612,56618,56626,56638,56650,56654,56662,56670],{"__ignoreMap":48},[52,56605,56606,56608,56610],{"class":54,"line":55},[52,56607,59],{"class":58},[52,56609,63],{"class":371},[52,56611,77],{"class":58},[52,56613,56614,56616],{"class":54,"line":80},[52,56615,83],{"class":58},[52,56617,56394],{"class":371},[52,56619,56620,56622,56624],{"class":54,"line":108},[52,56621,7351],{"class":66},[52,56623,70],{"class":231},[52,56625,16975],{"class":73},[52,56627,56628,56630,56632,56634,56636],{"class":54,"line":118},[52,56629,7361],{"class":66},[52,56631,70],{"class":231},[52,56633,723],{"class":58},[52,56635,5467],{"class":371},[52,56637,729],{"class":58},[52,56639,56640,56642,56644,56646,56648],{"class":54,"line":594},[52,56641,17981],{"class":66},[52,56643,70],{"class":231},[52,56645,723],{"class":58},[52,56647,6391],{"class":371},[52,56649,729],{"class":58},[52,56651,56652],{"class":54,"line":600},[52,56653,26949],{"class":58},[52,56655,56656,56658,56660],{"class":54,"line":606},[52,56657,2213],{"class":58},[52,56659,2216],{"class":371},[52,56661,105],{"class":58},[52,56663,56664,56666,56668],{"class":54,"line":653},[52,56665,2230],{"class":58},[52,56667,56355],{"class":371},[52,56669,77],{"class":58},[52,56671,56672,56674,56676],{"class":54,"line":662},[52,56673,121],{"class":58},[52,56675,63],{"class":371},[52,56677,77],{"class":58},[43,56679,56681],{"className":222,"code":56680,"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,56682,56683,56693,56697,56711,56715,56736,56744,56748,56752],{"__ignoreMap":48},[52,56684,56685,56687,56689,56691],{"class":54,"line":55},[52,56686,232],{"class":231},[52,56688,9231],{"class":58},[52,56690,238],{"class":231},[52,56692,9236],{"class":73},[52,56694,56695],{"class":54,"line":80},[52,56696,597],{"emptyLinePlaceholder":171},[52,56698,56699,56701,56703,56705,56707,56709],{"class":54,"line":108},[52,56700,1721],{"class":231},[52,56702,1724],{"class":371},[52,56704,1727],{"class":231},[52,56706,1730],{"class":231},[52,56708,1733],{"class":66},[52,56710,1736],{"class":58},[52,56712,56713],{"class":54,"line":118},[52,56714,1751],{"class":58},[52,56716,56717,56719,56722,56724,56726,56728,56730,56732,56734],{"class":54,"line":594},[52,56718,1756],{"class":58},[52,56720,56721],{"class":73},"'Vignette'",[52,56723,1762],{"class":58},[52,56725,17534],{"class":73},[52,56727,4278],{"class":58},[52,56729,5467],{"class":371},[52,56731,35555],{"class":58},[52,56733,6391],{"class":371},[52,56735,5259],{"class":58},[52,56737,56738,56740,56742],{"class":54,"line":600},[52,56739,4727],{"class":58},[52,56741,2869],{"class":73},[52,56743,2129],{"class":58},[52,56745,56746],{"class":54,"line":606},[52,56747,4744],{"class":58},[52,56749,56750],{"class":54,"line":653},[52,56751,1773],{"class":58},[52,56753,56754],{"class":54,"line":662},[52,56755,1778],{"class":58},[156,56757,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":56759},[56760,56761],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vignette",{"title":56355,"description":56363},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":56768,"title":56769,"body":56770,"category":27760,"componentType":20842,"description":56777,"extension":168,"meta":56962,"navigation":171,"path":56963,"requiresChild":27763,"seo":56964,"stem":56965,"__hash__":56966},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":56771,"toc":56958},[56772,56775,56778,56780,56782,56785,56787,56956],[11,56773,56769],{"id":56774},"voronoi",[15,56776,56777],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26901,56779],{"component":56769},[23,56781,26905],{"id":21503},[26907,56783],{":props":56784},"[{\"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,56786,26913],{"id":26912},[217,56788,56789,56818,56846,56874,56902],{":tabs":1543},[43,56790,56792],{"className":45,"code":56791,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,56793,56794,56802,56810],{"__ignoreMap":48},[52,56795,56796,56798,56800],{"class":54,"line":55},[52,56797,59],{"class":58},[52,56799,63],{"class":62},[52,56801,77],{"class":58},[52,56803,56804,56806,56808],{"class":54,"line":80},[52,56805,83],{"class":58},[52,56807,56769],{"class":62},[52,56809,105],{"class":58},[52,56811,56812,56814,56816],{"class":54,"line":108},[52,56813,121],{"class":58},[52,56815,63],{"class":62},[52,56817,77],{"class":58},[43,56819,56820],{"className":360,"code":56791,"language":362,"meta":48,"style":48},[31,56821,56822,56830,56838],{"__ignoreMap":48},[52,56823,56824,56826,56828],{"class":54,"line":55},[52,56825,59],{"class":58},[52,56827,63],{"class":371},[52,56829,77],{"class":58},[52,56831,56832,56834,56836],{"class":54,"line":80},[52,56833,83],{"class":58},[52,56835,56769],{"class":371},[52,56837,105],{"class":58},[52,56839,56840,56842,56844],{"class":54,"line":108},[52,56841,121],{"class":58},[52,56843,63],{"class":371},[52,56845,77],{"class":58},[43,56847,56848],{"className":2507,"code":56791,"language":2509,"meta":48,"style":48},[31,56849,56850,56858,56866],{"__ignoreMap":48},[52,56851,56852,56854,56856],{"class":54,"line":55},[52,56853,59],{"class":58},[52,56855,63],{"class":371},[52,56857,77],{"class":58},[52,56859,56860,56862,56864],{"class":54,"line":80},[52,56861,83],{"class":58},[52,56863,56769],{"class":371},[52,56865,105],{"class":58},[52,56867,56868,56870,56872],{"class":54,"line":108},[52,56869,121],{"class":58},[52,56871,63],{"class":371},[52,56873,77],{"class":58},[43,56875,56876],{"className":419,"code":56791,"language":420,"meta":48,"style":48},[31,56877,56878,56886,56894],{"__ignoreMap":48},[52,56879,56880,56882,56884],{"class":54,"line":55},[52,56881,59],{"class":58},[52,56883,63],{"class":371},[52,56885,77],{"class":58},[52,56887,56888,56890,56892],{"class":54,"line":80},[52,56889,83],{"class":58},[52,56891,56769],{"class":371},[52,56893,105],{"class":58},[52,56895,56896,56898,56900],{"class":54,"line":108},[52,56897,121],{"class":58},[52,56899,63],{"class":371},[52,56901,77],{"class":58},[43,56903,56905],{"className":222,"code":56904,"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,56906,56907,56917,56921,56935,56939,56948,56952],{"__ignoreMap":48},[52,56908,56909,56911,56913,56915],{"class":54,"line":55},[52,56910,232],{"class":231},[52,56912,9231],{"class":58},[52,56914,238],{"class":231},[52,56916,9236],{"class":73},[52,56918,56919],{"class":54,"line":80},[52,56920,597],{"emptyLinePlaceholder":171},[52,56922,56923,56925,56927,56929,56931,56933],{"class":54,"line":108},[52,56924,1721],{"class":231},[52,56926,1724],{"class":371},[52,56928,1727],{"class":231},[52,56930,1730],{"class":231},[52,56932,1733],{"class":66},[52,56934,1736],{"class":58},[52,56936,56937],{"class":54,"line":118},[52,56938,1751],{"class":58},[52,56940,56941,56943,56946],{"class":54,"line":594},[52,56942,1756],{"class":58},[52,56944,56945],{"class":73},"'Voronoi'",[52,56947,2129],{"class":58},[52,56949,56950],{"class":54,"line":600},[52,56951,1773],{"class":58},[52,56953,56954],{"class":54,"line":606},[52,56955,1778],{"class":58},[156,56957,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":56959},[56960,56961],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/voronoi",{"title":56769,"description":56777},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":56968,"title":56969,"body":56970,"category":28094,"componentType":20848,"description":56977,"extension":168,"meta":57238,"navigation":171,"path":57239,"requiresChild":171,"seo":57240,"stem":57241,"__hash__":57242},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":56971,"toc":57234},[56972,56975,56978,56980,56982,56985,56987,57232],[11,56973,56969],{"id":56974},"wavedistortion",[15,56976,56977],{},"Wave-based distortion with multiple waveform types",[26901,56979],{"component":56969},[23,56981,26905],{"id":21503},[26907,56983],{":props":56984},"[{\"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,56986,26913],{"id":26912},[217,56988,56989,57034,57078,57122,57166],{":tabs":1543},[43,56990,56992],{"className":45,"code":56991,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,56993,56994,57002,57010,57018,57026],{"__ignoreMap":48},[52,56995,56996,56998,57000],{"class":54,"line":55},[52,56997,59],{"class":58},[52,56999,63],{"class":62},[52,57001,77],{"class":58},[52,57003,57004,57006,57008],{"class":54,"line":80},[52,57005,83],{"class":58},[52,57007,56969],{"class":62},[52,57009,77],{"class":58},[52,57011,57012,57014,57016],{"class":54,"line":108},[52,57013,2213],{"class":58},[52,57015,2216],{"class":62},[52,57017,105],{"class":58},[52,57019,57020,57022,57024],{"class":54,"line":118},[52,57021,2230],{"class":58},[52,57023,56969],{"class":62},[52,57025,77],{"class":58},[52,57027,57028,57030,57032],{"class":54,"line":594},[52,57029,121],{"class":58},[52,57031,63],{"class":62},[52,57033,77],{"class":58},[43,57035,57036],{"className":360,"code":56991,"language":362,"meta":48,"style":48},[31,57037,57038,57046,57054,57062,57070],{"__ignoreMap":48},[52,57039,57040,57042,57044],{"class":54,"line":55},[52,57041,59],{"class":58},[52,57043,63],{"class":371},[52,57045,77],{"class":58},[52,57047,57048,57050,57052],{"class":54,"line":80},[52,57049,83],{"class":58},[52,57051,56969],{"class":371},[52,57053,77],{"class":58},[52,57055,57056,57058,57060],{"class":54,"line":108},[52,57057,2213],{"class":58},[52,57059,2216],{"class":371},[52,57061,105],{"class":58},[52,57063,57064,57066,57068],{"class":54,"line":118},[52,57065,2230],{"class":58},[52,57067,56969],{"class":371},[52,57069,77],{"class":58},[52,57071,57072,57074,57076],{"class":54,"line":594},[52,57073,121],{"class":58},[52,57075,63],{"class":371},[52,57077,77],{"class":58},[43,57079,57080],{"className":2507,"code":56991,"language":2509,"meta":48,"style":48},[31,57081,57082,57090,57098,57106,57114],{"__ignoreMap":48},[52,57083,57084,57086,57088],{"class":54,"line":55},[52,57085,59],{"class":58},[52,57087,63],{"class":371},[52,57089,77],{"class":58},[52,57091,57092,57094,57096],{"class":54,"line":80},[52,57093,83],{"class":58},[52,57095,56969],{"class":371},[52,57097,77],{"class":58},[52,57099,57100,57102,57104],{"class":54,"line":108},[52,57101,2213],{"class":58},[52,57103,2216],{"class":371},[52,57105,105],{"class":58},[52,57107,57108,57110,57112],{"class":54,"line":118},[52,57109,2230],{"class":58},[52,57111,56969],{"class":371},[52,57113,77],{"class":58},[52,57115,57116,57118,57120],{"class":54,"line":594},[52,57117,121],{"class":58},[52,57119,63],{"class":371},[52,57121,77],{"class":58},[43,57123,57124],{"className":419,"code":56991,"language":420,"meta":48,"style":48},[31,57125,57126,57134,57142,57150,57158],{"__ignoreMap":48},[52,57127,57128,57130,57132],{"class":54,"line":55},[52,57129,59],{"class":58},[52,57131,63],{"class":371},[52,57133,77],{"class":58},[52,57135,57136,57138,57140],{"class":54,"line":80},[52,57137,83],{"class":58},[52,57139,56969],{"class":371},[52,57141,77],{"class":58},[52,57143,57144,57146,57148],{"class":54,"line":108},[52,57145,2213],{"class":58},[52,57147,2216],{"class":371},[52,57149,105],{"class":58},[52,57151,57152,57154,57156],{"class":54,"line":118},[52,57153,2230],{"class":58},[52,57155,56969],{"class":371},[52,57157,77],{"class":58},[52,57159,57160,57162,57164],{"class":54,"line":594},[52,57161,121],{"class":58},[52,57163,63],{"class":371},[52,57165,77],{"class":58},[43,57167,57169],{"className":222,"code":57168,"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,57170,57171,57181,57185,57199,57203,57212,57220,57224,57228],{"__ignoreMap":48},[52,57172,57173,57175,57177,57179],{"class":54,"line":55},[52,57174,232],{"class":231},[52,57176,9231],{"class":58},[52,57178,238],{"class":231},[52,57180,9236],{"class":73},[52,57182,57183],{"class":54,"line":80},[52,57184,597],{"emptyLinePlaceholder":171},[52,57186,57187,57189,57191,57193,57195,57197],{"class":54,"line":108},[52,57188,1721],{"class":231},[52,57190,1724],{"class":371},[52,57192,1727],{"class":231},[52,57194,1730],{"class":231},[52,57196,1733],{"class":66},[52,57198,1736],{"class":58},[52,57200,57201],{"class":54,"line":118},[52,57202,1751],{"class":58},[52,57204,57205,57207,57210],{"class":54,"line":594},[52,57206,1756],{"class":58},[52,57208,57209],{"class":73},"'WaveDistortion'",[52,57211,4722],{"class":58},[52,57213,57214,57216,57218],{"class":54,"line":600},[52,57215,4727],{"class":58},[52,57217,2869],{"class":73},[52,57219,2129],{"class":58},[52,57221,57222],{"class":54,"line":606},[52,57223,4744],{"class":58},[52,57225,57226],{"class":54,"line":653},[52,57227,1773],{"class":58},[52,57229,57230],{"class":54,"line":662},[52,57231,1778],{"class":58},[156,57233,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":57235},[57236,57237],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/wavedistortion",{"title":56969,"description":56977},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":57244,"title":57245,"body":57246,"category":27760,"componentType":20842,"description":57253,"extension":168,"meta":57438,"navigation":171,"path":57439,"requiresChild":27763,"seo":57440,"stem":57441,"__hash__":57442},"components/docs/components/Weave.md","Weave",{"type":8,"value":57247,"toc":57434},[57248,57251,57254,57256,57258,57261,57263,57432],[11,57249,57245],{"id":57250},"weave",[15,57252,57253],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26901,57255],{"component":57245},[23,57257,26905],{"id":21503},[26907,57259],{":props":57260},"[{\"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,57262,26913],{"id":26912},[217,57264,57265,57294,57322,57350,57378],{":tabs":1543},[43,57266,57268],{"className":45,"code":57267,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,57269,57270,57278,57286],{"__ignoreMap":48},[52,57271,57272,57274,57276],{"class":54,"line":55},[52,57273,59],{"class":58},[52,57275,63],{"class":62},[52,57277,77],{"class":58},[52,57279,57280,57282,57284],{"class":54,"line":80},[52,57281,83],{"class":58},[52,57283,57245],{"class":62},[52,57285,105],{"class":58},[52,57287,57288,57290,57292],{"class":54,"line":108},[52,57289,121],{"class":58},[52,57291,63],{"class":62},[52,57293,77],{"class":58},[43,57295,57296],{"className":360,"code":57267,"language":362,"meta":48,"style":48},[31,57297,57298,57306,57314],{"__ignoreMap":48},[52,57299,57300,57302,57304],{"class":54,"line":55},[52,57301,59],{"class":58},[52,57303,63],{"class":371},[52,57305,77],{"class":58},[52,57307,57308,57310,57312],{"class":54,"line":80},[52,57309,83],{"class":58},[52,57311,57245],{"class":371},[52,57313,105],{"class":58},[52,57315,57316,57318,57320],{"class":54,"line":108},[52,57317,121],{"class":58},[52,57319,63],{"class":371},[52,57321,77],{"class":58},[43,57323,57324],{"className":2507,"code":57267,"language":2509,"meta":48,"style":48},[31,57325,57326,57334,57342],{"__ignoreMap":48},[52,57327,57328,57330,57332],{"class":54,"line":55},[52,57329,59],{"class":58},[52,57331,63],{"class":371},[52,57333,77],{"class":58},[52,57335,57336,57338,57340],{"class":54,"line":80},[52,57337,83],{"class":58},[52,57339,57245],{"class":371},[52,57341,105],{"class":58},[52,57343,57344,57346,57348],{"class":54,"line":108},[52,57345,121],{"class":58},[52,57347,63],{"class":371},[52,57349,77],{"class":58},[43,57351,57352],{"className":419,"code":57267,"language":420,"meta":48,"style":48},[31,57353,57354,57362,57370],{"__ignoreMap":48},[52,57355,57356,57358,57360],{"class":54,"line":55},[52,57357,59],{"class":58},[52,57359,63],{"class":371},[52,57361,77],{"class":58},[52,57363,57364,57366,57368],{"class":54,"line":80},[52,57365,83],{"class":58},[52,57367,57245],{"class":371},[52,57369,105],{"class":58},[52,57371,57372,57374,57376],{"class":54,"line":108},[52,57373,121],{"class":58},[52,57375,63],{"class":371},[52,57377,77],{"class":58},[43,57379,57381],{"className":222,"code":57380,"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,57382,57383,57393,57397,57411,57415,57424,57428],{"__ignoreMap":48},[52,57384,57385,57387,57389,57391],{"class":54,"line":55},[52,57386,232],{"class":231},[52,57388,9231],{"class":58},[52,57390,238],{"class":231},[52,57392,9236],{"class":73},[52,57394,57395],{"class":54,"line":80},[52,57396,597],{"emptyLinePlaceholder":171},[52,57398,57399,57401,57403,57405,57407,57409],{"class":54,"line":108},[52,57400,1721],{"class":231},[52,57402,1724],{"class":371},[52,57404,1727],{"class":231},[52,57406,1730],{"class":231},[52,57408,1733],{"class":66},[52,57410,1736],{"class":58},[52,57412,57413],{"class":54,"line":118},[52,57414,1751],{"class":58},[52,57416,57417,57419,57422],{"class":54,"line":594},[52,57418,1756],{"class":58},[52,57420,57421],{"class":73},"'Weave'",[52,57423,2129],{"class":58},[52,57425,57426],{"class":54,"line":600},[52,57427,1773],{"class":58},[52,57429,57430],{"class":54,"line":606},[52,57431,1778],{"class":58},[156,57433,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":57435},[57436,57437],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/weave",{"title":57245,"description":57253},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":57444,"title":57445,"body":57446,"category":27760,"componentType":20842,"description":57453,"extension":168,"meta":57638,"navigation":171,"path":57639,"requiresChild":27763,"seo":57640,"stem":57641,"__hash__":57642},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":57447,"toc":57634},[57448,57451,57454,57456,57458,57461,57463,57632],[11,57449,57445],{"id":57450},"webcamtexture",[15,57452,57453],{},"Display a live webcam feed with customizable object-fit modes",[26901,57455],{"component":57445},[23,57457,26905],{"id":21503},[26907,57459],{":props":57460},"[{\"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,57462,26913],{"id":26912},[217,57464,57465,57494,57522,57550,57578],{":tabs":1543},[43,57466,57468],{"className":45,"code":57467,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[31,57469,57470,57478,57486],{"__ignoreMap":48},[52,57471,57472,57474,57476],{"class":54,"line":55},[52,57473,59],{"class":58},[52,57475,63],{"class":62},[52,57477,77],{"class":58},[52,57479,57480,57482,57484],{"class":54,"line":80},[52,57481,83],{"class":58},[52,57483,57445],{"class":62},[52,57485,105],{"class":58},[52,57487,57488,57490,57492],{"class":54,"line":108},[52,57489,121],{"class":58},[52,57491,63],{"class":62},[52,57493,77],{"class":58},[43,57495,57496],{"className":360,"code":57467,"language":362,"meta":48,"style":48},[31,57497,57498,57506,57514],{"__ignoreMap":48},[52,57499,57500,57502,57504],{"class":54,"line":55},[52,57501,59],{"class":58},[52,57503,63],{"class":371},[52,57505,77],{"class":58},[52,57507,57508,57510,57512],{"class":54,"line":80},[52,57509,83],{"class":58},[52,57511,57445],{"class":371},[52,57513,105],{"class":58},[52,57515,57516,57518,57520],{"class":54,"line":108},[52,57517,121],{"class":58},[52,57519,63],{"class":371},[52,57521,77],{"class":58},[43,57523,57524],{"className":2507,"code":57467,"language":2509,"meta":48,"style":48},[31,57525,57526,57534,57542],{"__ignoreMap":48},[52,57527,57528,57530,57532],{"class":54,"line":55},[52,57529,59],{"class":58},[52,57531,63],{"class":371},[52,57533,77],{"class":58},[52,57535,57536,57538,57540],{"class":54,"line":80},[52,57537,83],{"class":58},[52,57539,57445],{"class":371},[52,57541,105],{"class":58},[52,57543,57544,57546,57548],{"class":54,"line":108},[52,57545,121],{"class":58},[52,57547,63],{"class":371},[52,57549,77],{"class":58},[43,57551,57552],{"className":419,"code":57467,"language":420,"meta":48,"style":48},[31,57553,57554,57562,57570],{"__ignoreMap":48},[52,57555,57556,57558,57560],{"class":54,"line":55},[52,57557,59],{"class":58},[52,57559,63],{"class":371},[52,57561,77],{"class":58},[52,57563,57564,57566,57568],{"class":54,"line":80},[52,57565,83],{"class":58},[52,57567,57445],{"class":371},[52,57569,105],{"class":58},[52,57571,57572,57574,57576],{"class":54,"line":108},[52,57573,121],{"class":58},[52,57575,63],{"class":371},[52,57577,77],{"class":58},[43,57579,57581],{"className":222,"code":57580,"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,57582,57583,57593,57597,57611,57615,57624,57628],{"__ignoreMap":48},[52,57584,57585,57587,57589,57591],{"class":54,"line":55},[52,57586,232],{"class":231},[52,57588,9231],{"class":58},[52,57590,238],{"class":231},[52,57592,9236],{"class":73},[52,57594,57595],{"class":54,"line":80},[52,57596,597],{"emptyLinePlaceholder":171},[52,57598,57599,57601,57603,57605,57607,57609],{"class":54,"line":108},[52,57600,1721],{"class":231},[52,57602,1724],{"class":371},[52,57604,1727],{"class":231},[52,57606,1730],{"class":231},[52,57608,1733],{"class":66},[52,57610,1736],{"class":58},[52,57612,57613],{"class":54,"line":118},[52,57614,1751],{"class":58},[52,57616,57617,57619,57622],{"class":54,"line":594},[52,57618,1756],{"class":58},[52,57620,57621],{"class":73},"'WebcamTexture'",[52,57623,2129],{"class":58},[52,57625,57626],{"class":54,"line":600},[52,57627,1773],{"class":58},[52,57629,57630],{"class":54,"line":606},[52,57631,1778],{"class":58},[156,57633,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":57635},[57636,57637],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/webcamtexture",{"title":57445,"description":57453},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":57644,"title":57645,"body":57646,"category":27760,"componentType":20842,"description":57653,"extension":168,"meta":57838,"navigation":171,"path":57839,"requiresChild":27763,"seo":57840,"stem":57841,"__hash__":57842},"components/docs/components/WorleyNoise.md","WorleyNoise",{"type":8,"value":57647,"toc":57834},[57648,57651,57654,57656,57658,57661,57663,57832],[11,57649,57645],{"id":57650},"worleynoise",[15,57652,57653],{},"Cellular noise field — distance-based, with selectable feature combinations and fractal octaves",[26901,57655],{"component":57645},[23,57657,26905],{"id":21503},[26907,57659],{":props":57660},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color where the noise field is low (typically near cell centers)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color where the noise field is high (typically near cell boundaries)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"6\",\"description\":\"Number of cells across the canvas at the base octave\"},{\"name\":\"mode\",\"type\":\"\\\"f1\\\" | \\\"f2\\\" | \\\"f2MinusF1\\\" | \\\"f1PlusF2\\\" | \\\"f1TimesF2\\\"\",\"default\":\"f1\",\"description\":\"Field type. F1 = distance to nearest point. F2 = distance to second-nearest. F2 − F1 emphasises cell boundaries.\"},{\"name\":\"distance\",\"type\":\"\\\"euclidean\\\" | \\\"manhattan\\\" | \\\"chebyshev\\\"\",\"default\":\"euclidean\",\"description\":\"Distance metric. Euclidean = round cells. Manhattan = diamond. Chebyshev = square.\"},{\"name\":\"octaves\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of fractal layers stacked at progressively finer scales\"},{\"name\":\"lacunarity\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Scale multiplier between octaves (only active when Octaves > 1)\"},{\"name\":\"persistence\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Amplitude multiplier between octaves (only active when Octaves > 1)\"},{\"name\":\"jitter\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much each cell's point drifts inside its cell. 0 = rigid grid (banded look), 1 = fully random.\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Steepness of the gradient between low and high regions\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Shifts the gradient midpoint. Negative pulls the field toward Color A, positive toward Color B.\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed — shifts the cell pattern without changing its overall structure\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed — how fast each cell's point drifts\"}]",[23,57662,26913],{"id":26912},[217,57664,57665,57694,57722,57750,57778],{":tabs":1543},[43,57666,57668],{"className":45,"code":57667,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWorleyNoise />\n\u003C/Shader>\n",[31,57669,57670,57678,57686],{"__ignoreMap":48},[52,57671,57672,57674,57676],{"class":54,"line":55},[52,57673,59],{"class":58},[52,57675,63],{"class":62},[52,57677,77],{"class":58},[52,57679,57680,57682,57684],{"class":54,"line":80},[52,57681,83],{"class":58},[52,57683,57645],{"class":62},[52,57685,105],{"class":58},[52,57687,57688,57690,57692],{"class":54,"line":108},[52,57689,121],{"class":58},[52,57691,63],{"class":62},[52,57693,77],{"class":58},[43,57695,57696],{"className":360,"code":57667,"language":362,"meta":48,"style":48},[31,57697,57698,57706,57714],{"__ignoreMap":48},[52,57699,57700,57702,57704],{"class":54,"line":55},[52,57701,59],{"class":58},[52,57703,63],{"class":371},[52,57705,77],{"class":58},[52,57707,57708,57710,57712],{"class":54,"line":80},[52,57709,83],{"class":58},[52,57711,57645],{"class":371},[52,57713,105],{"class":58},[52,57715,57716,57718,57720],{"class":54,"line":108},[52,57717,121],{"class":58},[52,57719,63],{"class":371},[52,57721,77],{"class":58},[43,57723,57724],{"className":2507,"code":57667,"language":2509,"meta":48,"style":48},[31,57725,57726,57734,57742],{"__ignoreMap":48},[52,57727,57728,57730,57732],{"class":54,"line":55},[52,57729,59],{"class":58},[52,57731,63],{"class":371},[52,57733,77],{"class":58},[52,57735,57736,57738,57740],{"class":54,"line":80},[52,57737,83],{"class":58},[52,57739,57645],{"class":371},[52,57741,105],{"class":58},[52,57743,57744,57746,57748],{"class":54,"line":108},[52,57745,121],{"class":58},[52,57747,63],{"class":371},[52,57749,77],{"class":58},[43,57751,57752],{"className":419,"code":57667,"language":420,"meta":48,"style":48},[31,57753,57754,57762,57770],{"__ignoreMap":48},[52,57755,57756,57758,57760],{"class":54,"line":55},[52,57757,59],{"class":58},[52,57759,63],{"class":371},[52,57761,77],{"class":58},[52,57763,57764,57766,57768],{"class":54,"line":80},[52,57765,83],{"class":58},[52,57767,57645],{"class":371},[52,57769,105],{"class":58},[52,57771,57772,57774,57776],{"class":54,"line":108},[52,57773,121],{"class":58},[52,57775,63],{"class":371},[52,57777,77],{"class":58},[43,57779,57781],{"className":222,"code":57780,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'WorleyNoise', props: {} }\n ]\n})\n",[31,57782,57783,57793,57797,57811,57815,57824,57828],{"__ignoreMap":48},[52,57784,57785,57787,57789,57791],{"class":54,"line":55},[52,57786,232],{"class":231},[52,57788,9231],{"class":58},[52,57790,238],{"class":231},[52,57792,9236],{"class":73},[52,57794,57795],{"class":54,"line":80},[52,57796,597],{"emptyLinePlaceholder":171},[52,57798,57799,57801,57803,57805,57807,57809],{"class":54,"line":108},[52,57800,1721],{"class":231},[52,57802,1724],{"class":371},[52,57804,1727],{"class":231},[52,57806,1730],{"class":231},[52,57808,1733],{"class":66},[52,57810,1736],{"class":58},[52,57812,57813],{"class":54,"line":118},[52,57814,1751],{"class":58},[52,57816,57817,57819,57822],{"class":54,"line":594},[52,57818,1756],{"class":58},[52,57820,57821],{"class":73},"'WorleyNoise'",[52,57823,2129],{"class":58},[52,57825,57826],{"class":54,"line":600},[52,57827,1773],{"class":58},[52,57829,57830],{"class":54,"line":606},[52,57831,1778],{"class":58},[156,57833,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":57835},[57836,57837],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/worleynoise",{"title":57645,"description":57653},"docs/components/WorleyNoise","n9fstldzqTs4OTZXQk2SIEUzwjB46Ejr7PGkAzb6xyQ",{"id":57844,"title":57845,"body":57846,"category":27225,"componentType":20848,"description":57853,"extension":168,"meta":58170,"navigation":171,"path":58171,"requiresChild":171,"seo":58172,"stem":58173,"__hash__":58174},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":57847,"toc":58166},[57848,57851,57854,57856,57858,57861,57863,58164],[11,57849,57845],{"id":57850},"zoomblur",[15,57852,57853],{},"Radial zoom blur expanding from a center point",[26901,57855],{"component":57845},[23,57857,26905],{"id":21503},[26907,57859],{":props":57860},"[{\"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,57862,26913],{"id":26912},[217,57864,57865,57921,57980,58036,58094],{":tabs":1543},[43,57866,57868],{"className":45,"code":57867,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,57869,57870,57878,57885,57893,57897,57905,57913],{"__ignoreMap":48},[52,57871,57872,57874,57876],{"class":54,"line":55},[52,57873,59],{"class":58},[52,57875,63],{"class":62},[52,57877,77],{"class":58},[52,57879,57880,57882],{"class":54,"line":80},[52,57881,83],{"class":58},[52,57883,57884],{"class":62},"ZoomBlur\n",[52,57886,57887,57889,57891],{"class":54,"line":108},[52,57888,17870],{"class":66},[52,57890,70],{"class":58},[52,57892,34420],{"class":73},[52,57894,57895],{"class":54,"line":118},[52,57896,26949],{"class":58},[52,57898,57899,57901,57903],{"class":54,"line":594},[52,57900,2213],{"class":58},[52,57902,2216],{"class":62},[52,57904,105],{"class":58},[52,57906,57907,57909,57911],{"class":54,"line":600},[52,57908,2230],{"class":58},[52,57910,57845],{"class":62},[52,57912,77],{"class":58},[52,57914,57915,57917,57919],{"class":54,"line":606},[52,57916,121],{"class":58},[52,57918,63],{"class":62},[52,57920,77],{"class":58},[43,57922,57924],{"className":360,"code":57923,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,57925,57926,57934,57940,57952,57956,57964,57972],{"__ignoreMap":48},[52,57927,57928,57930,57932],{"class":54,"line":55},[52,57929,59],{"class":58},[52,57931,63],{"class":371},[52,57933,77],{"class":58},[52,57935,57936,57938],{"class":54,"line":80},[52,57937,83],{"class":58},[52,57939,57884],{"class":371},[52,57941,57942,57944,57946,57948,57950],{"class":54,"line":108},[52,57943,17981],{"class":66},[52,57945,70],{"class":231},[52,57947,723],{"class":58},[52,57949,13194],{"class":371},[52,57951,729],{"class":58},[52,57953,57954],{"class":54,"line":118},[52,57955,26949],{"class":58},[52,57957,57958,57960,57962],{"class":54,"line":594},[52,57959,2213],{"class":58},[52,57961,2216],{"class":371},[52,57963,105],{"class":58},[52,57965,57966,57968,57970],{"class":54,"line":600},[52,57967,2230],{"class":58},[52,57969,57845],{"class":371},[52,57971,77],{"class":58},[52,57973,57974,57976,57978],{"class":54,"line":606},[52,57975,121],{"class":58},[52,57977,63],{"class":371},[52,57979,77],{"class":58},[43,57981,57982],{"className":2507,"code":57923,"language":2509,"meta":48,"style":48},[31,57983,57984,57992,57998,58008,58012,58020,58028],{"__ignoreMap":48},[52,57985,57986,57988,57990],{"class":54,"line":55},[52,57987,59],{"class":58},[52,57989,63],{"class":371},[52,57991,77],{"class":58},[52,57993,57994,57996],{"class":54,"line":80},[52,57995,83],{"class":58},[52,57997,57884],{"class":371},[52,57999,58000,58002,58004,58006],{"class":54,"line":108},[52,58001,17981],{"class":66},[52,58003,24845],{"class":58},[52,58005,13194],{"class":371},[52,58007,729],{"class":58},[52,58009,58010],{"class":54,"line":118},[52,58011,26949],{"class":58},[52,58013,58014,58016,58018],{"class":54,"line":594},[52,58015,2213],{"class":58},[52,58017,2216],{"class":371},[52,58019,105],{"class":58},[52,58021,58022,58024,58026],{"class":54,"line":600},[52,58023,2230],{"class":58},[52,58025,57845],{"class":371},[52,58027,77],{"class":58},[52,58029,58030,58032,58034],{"class":54,"line":606},[52,58031,121],{"class":58},[52,58033,63],{"class":371},[52,58035,77],{"class":58},[43,58037,58038],{"className":419,"code":57923,"language":420,"meta":48,"style":48},[31,58039,58040,58048,58054,58066,58070,58078,58086],{"__ignoreMap":48},[52,58041,58042,58044,58046],{"class":54,"line":55},[52,58043,59],{"class":58},[52,58045,63],{"class":371},[52,58047,77],{"class":58},[52,58049,58050,58052],{"class":54,"line":80},[52,58051,83],{"class":58},[52,58053,57884],{"class":371},[52,58055,58056,58058,58060,58062,58064],{"class":54,"line":108},[52,58057,17981],{"class":66},[52,58059,70],{"class":231},[52,58061,723],{"class":58},[52,58063,13194],{"class":371},[52,58065,729],{"class":58},[52,58067,58068],{"class":54,"line":118},[52,58069,26949],{"class":58},[52,58071,58072,58074,58076],{"class":54,"line":594},[52,58073,2213],{"class":58},[52,58075,2216],{"class":371},[52,58077,105],{"class":58},[52,58079,58080,58082,58084],{"class":54,"line":600},[52,58081,2230],{"class":58},[52,58083,57845],{"class":371},[52,58085,77],{"class":58},[52,58087,58088,58090,58092],{"class":54,"line":606},[52,58089,121],{"class":58},[52,58091,63],{"class":371},[52,58093,77],{"class":58},[43,58095,58097],{"className":222,"code":58096,"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,58098,58099,58109,58113,58127,58131,58144,58152,58156,58160],{"__ignoreMap":48},[52,58100,58101,58103,58105,58107],{"class":54,"line":55},[52,58102,232],{"class":231},[52,58104,9231],{"class":58},[52,58106,238],{"class":231},[52,58108,9236],{"class":73},[52,58110,58111],{"class":54,"line":80},[52,58112,597],{"emptyLinePlaceholder":171},[52,58114,58115,58117,58119,58121,58123,58125],{"class":54,"line":108},[52,58116,1721],{"class":231},[52,58118,1724],{"class":371},[52,58120,1727],{"class":231},[52,58122,1730],{"class":231},[52,58124,1733],{"class":66},[52,58126,1736],{"class":58},[52,58128,58129],{"class":54,"line":118},[52,58130,1751],{"class":58},[52,58132,58133,58135,58138,58140,58142],{"class":54,"line":594},[52,58134,1756],{"class":58},[52,58136,58137],{"class":73},"'ZoomBlur'",[52,58139,27194],{"class":58},[52,58141,13194],{"class":371},[52,58143,5259],{"class":58},[52,58145,58146,58148,58150],{"class":54,"line":600},[52,58147,4727],{"class":58},[52,58149,2869],{"class":73},[52,58151,2129],{"class":58},[52,58153,58154],{"class":54,"line":606},[52,58155,4744],{"class":58},[52,58157,58158],{"class":54,"line":653},[52,58159,1773],{"class":58},[52,58161,58162],{"class":54,"line":662},[52,58163,1778],{"class":58},[156,58165,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":58167},[58168,58169],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/zoomblur",{"title":57845,"description":57853},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27763,"error":58176},"Not authenticated",{"id":28834,"title":28835,"body":58178,"category":27760,"componentType":20842,"description":28843,"extension":168,"meta":58364,"navigation":171,"path":29029,"requiresChild":27763,"seo":58365,"stem":29031,"__hash__":29032},{"type":8,"value":58179,"toc":58360},[58180,58182,58184,58186,58188,58190,58192,58358],[11,58181,28835],{"id":28840},[15,58183,28843],{},[26901,58185],{"component":28835},[23,58187,26905],{"id":21503},[26907,58189],{":props":28850},[23,58191,26913],{"id":26912},[217,58193,58194,58222,58250,58278,58306],{":tabs":1543},[43,58195,58196],{"className":45,"code":28857,"language":47,"meta":48,"style":48},[31,58197,58198,58206,58214],{"__ignoreMap":48},[52,58199,58200,58202,58204],{"class":54,"line":55},[52,58201,59],{"class":58},[52,58203,63],{"class":62},[52,58205,77],{"class":58},[52,58207,58208,58210,58212],{"class":54,"line":80},[52,58209,83],{"class":58},[52,58211,28835],{"class":62},[52,58213,105],{"class":58},[52,58215,58216,58218,58220],{"class":54,"line":108},[52,58217,121],{"class":58},[52,58219,63],{"class":62},[52,58221,77],{"class":58},[43,58223,58224],{"className":360,"code":28857,"language":362,"meta":48,"style":48},[31,58225,58226,58234,58242],{"__ignoreMap":48},[52,58227,58228,58230,58232],{"class":54,"line":55},[52,58229,59],{"class":58},[52,58231,63],{"class":371},[52,58233,77],{"class":58},[52,58235,58236,58238,58240],{"class":54,"line":80},[52,58237,83],{"class":58},[52,58239,28835],{"class":371},[52,58241,105],{"class":58},[52,58243,58244,58246,58248],{"class":54,"line":108},[52,58245,121],{"class":58},[52,58247,63],{"class":371},[52,58249,77],{"class":58},[43,58251,58252],{"className":2507,"code":28857,"language":2509,"meta":48,"style":48},[31,58253,58254,58262,58270],{"__ignoreMap":48},[52,58255,58256,58258,58260],{"class":54,"line":55},[52,58257,59],{"class":58},[52,58259,63],{"class":371},[52,58261,77],{"class":58},[52,58263,58264,58266,58268],{"class":54,"line":80},[52,58265,83],{"class":58},[52,58267,28835],{"class":371},[52,58269,105],{"class":58},[52,58271,58272,58274,58276],{"class":54,"line":108},[52,58273,121],{"class":58},[52,58275,63],{"class":371},[52,58277,77],{"class":58},[43,58279,58280],{"className":419,"code":28857,"language":420,"meta":48,"style":48},[31,58281,58282,58290,58298],{"__ignoreMap":48},[52,58283,58284,58286,58288],{"class":54,"line":55},[52,58285,59],{"class":58},[52,58287,63],{"class":371},[52,58289,77],{"class":58},[52,58291,58292,58294,58296],{"class":54,"line":80},[52,58293,83],{"class":58},[52,58295,28835],{"class":371},[52,58297,105],{"class":58},[52,58299,58300,58302,58304],{"class":54,"line":108},[52,58301,121],{"class":58},[52,58303,63],{"class":371},[52,58305,77],{"class":58},[43,58307,58308],{"className":222,"code":28970,"language":224,"meta":48,"style":48},[31,58309,58310,58320,58324,58338,58342,58350,58354],{"__ignoreMap":48},[52,58311,58312,58314,58316,58318],{"class":54,"line":55},[52,58313,232],{"class":231},[52,58315,9231],{"class":58},[52,58317,238],{"class":231},[52,58319,9236],{"class":73},[52,58321,58322],{"class":54,"line":80},[52,58323,597],{"emptyLinePlaceholder":171},[52,58325,58326,58328,58330,58332,58334,58336],{"class":54,"line":108},[52,58327,1721],{"class":231},[52,58329,1724],{"class":371},[52,58331,1727],{"class":231},[52,58333,1730],{"class":231},[52,58335,1733],{"class":66},[52,58337,1736],{"class":58},[52,58339,58340],{"class":54,"line":118},[52,58341,1751],{"class":58},[52,58343,58344,58346,58348],{"class":54,"line":594},[52,58345,1756],{"class":58},[52,58347,29011],{"class":73},[52,58349,2129],{"class":58},[52,58351,58352],{"class":54,"line":600},[52,58353,1773],{"class":58},[52,58355,58356],{"class":54,"line":606},[52,58357,1778],{"class":58},[156,58359,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":58361},[58362,58363],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},{"title":28835,"description":28843},[58367,58368],{"title":9486,"path":28829,"stem":28831,"children":-1},{"title":29035,"path":29306,"stem":29308,"children":-1},1778525703620]