[{"data":1,"prerenderedAt":56619},["ShallowReactive",2],{"guide-docs":3,"component-docs":26888,"pro-status-anon":56349,"doc-/docs/components/flutedglass":56351,"doc-surr-/docs/components/flutedglass":56616},[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,27967,28167,28500,28777,29111,29387,29663,29862,30167,30443,30733,31065,31265,31541,31834,32127,32404,32784,33038,33238,33438,33771,34047,34290,34659,34935,35180,35454,35654,35930,36130,36406,36699,36899,37175,37375,37651,37925,38256,38588,38919,39175,39445,39690,40066,40337,40613,40813,41089,41289,41559,41835,42090,42422,42620,42998,43273,43473,43766,44042,44318,44594,44849,45227,45519,45852,46184,46440,46772,47064,47264,47509,47840,48116,48496,48696,48941,49197,49453,49729,49973,50305,50505,50797,50997,51272,51472,51719,51918,52250,52573,52818,53094,53294,53626,53902,54194,54527,54727,55141,55341,55617,55817,56017],{"id":26890,"title":26891,"body":26892,"category":27225,"componentType":20848,"description":26899,"extension":168,"meta":27226,"navigation":171,"path":27227,"requiresChild":171,"seo":27228,"stem":27229,"__hash__":27230},"components/docs/components/AngularBlur.md","AngularBlur",{"type":8,"value":26893,"toc":27221},[26894,26897,26900,26903,26906,26910,26914,27219],[11,26895,26891],{"id":26896},"angularblur",[15,26898,26899],{},"Radial motion blur rotating around a center point",[26901,26902],"shader-preview",{"component":26891},[23,26904,26905],{"id":21503},"Props",[26907,26908],"props-table",{":props":26909},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Intensity of the angular blur effect\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the rotation\"}]",[23,26911,26913],{"id":26912},"usage","Usage",[217,26915,26916,26974,27034,27090,27148],{":tabs":1543},[43,26917,26919],{"className":45,"code":26918,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26920,26921,26929,26936,26945,26950,26958,26966],{"__ignoreMap":48},[52,26922,26923,26925,26927],{"class":54,"line":55},[52,26924,59],{"class":58},[52,26926,63],{"class":62},[52,26928,77],{"class":58},[52,26930,26931,26933],{"class":54,"line":80},[52,26932,83],{"class":58},[52,26934,26935],{"class":62},"AngularBlur\n",[52,26937,26938,26940,26942],{"class":54,"line":108},[52,26939,17870],{"class":66},[52,26941,70],{"class":58},[52,26943,26944],{"class":73},"\"20\"\n",[52,26946,26947],{"class":54,"line":118},[52,26948,26949],{"class":58}," >\n",[52,26951,26952,26954,26956],{"class":54,"line":594},[52,26953,2213],{"class":58},[52,26955,2216],{"class":62},[52,26957,105],{"class":58},[52,26959,26960,26962,26964],{"class":54,"line":600},[52,26961,2230],{"class":58},[52,26963,26891],{"class":62},[52,26965,77],{"class":58},[52,26967,26968,26970,26972],{"class":54,"line":606},[52,26969,121],{"class":58},[52,26971,63],{"class":62},[52,26973,77],{"class":58},[43,26975,26977],{"className":360,"code":26976,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAngularBlur\n intensity={20}\n >\n \u003CCircle />\n \u003C/AngularBlur>\n\u003C/Shader>\n",[31,26978,26979,26987,26993,27006,27010,27018,27026],{"__ignoreMap":48},[52,26980,26981,26983,26985],{"class":54,"line":55},[52,26982,59],{"class":58},[52,26984,63],{"class":371},[52,26986,77],{"class":58},[52,26988,26989,26991],{"class":54,"line":80},[52,26990,83],{"class":58},[52,26992,26935],{"class":371},[52,26994,26995,26997,26999,27001,27004],{"class":54,"line":108},[52,26996,17981],{"class":66},[52,26998,70],{"class":231},[52,27000,723],{"class":58},[52,27002,27003],{"class":371},"20",[52,27005,729],{"class":58},[52,27007,27008],{"class":54,"line":118},[52,27009,26949],{"class":58},[52,27011,27012,27014,27016],{"class":54,"line":594},[52,27013,2213],{"class":58},[52,27015,2216],{"class":371},[52,27017,105],{"class":58},[52,27019,27020,27022,27024],{"class":54,"line":600},[52,27021,2230],{"class":58},[52,27023,26891],{"class":371},[52,27025,77],{"class":58},[52,27027,27028,27030,27032],{"class":54,"line":606},[52,27029,121],{"class":58},[52,27031,63],{"class":371},[52,27033,77],{"class":58},[43,27035,27036],{"className":2507,"code":26976,"language":2509,"meta":48,"style":48},[31,27037,27038,27046,27052,27062,27066,27074,27082],{"__ignoreMap":48},[52,27039,27040,27042,27044],{"class":54,"line":55},[52,27041,59],{"class":58},[52,27043,63],{"class":371},[52,27045,77],{"class":58},[52,27047,27048,27050],{"class":54,"line":80},[52,27049,83],{"class":58},[52,27051,26935],{"class":371},[52,27053,27054,27056,27058,27060],{"class":54,"line":108},[52,27055,17981],{"class":66},[52,27057,24845],{"class":58},[52,27059,27003],{"class":371},[52,27061,729],{"class":58},[52,27063,27064],{"class":54,"line":118},[52,27065,26949],{"class":58},[52,27067,27068,27070,27072],{"class":54,"line":594},[52,27069,2213],{"class":58},[52,27071,2216],{"class":371},[52,27073,105],{"class":58},[52,27075,27076,27078,27080],{"class":54,"line":600},[52,27077,2230],{"class":58},[52,27079,26891],{"class":371},[52,27081,77],{"class":58},[52,27083,27084,27086,27088],{"class":54,"line":606},[52,27085,121],{"class":58},[52,27087,63],{"class":371},[52,27089,77],{"class":58},[43,27091,27092],{"className":419,"code":26976,"language":420,"meta":48,"style":48},[31,27093,27094,27102,27108,27120,27124,27132,27140],{"__ignoreMap":48},[52,27095,27096,27098,27100],{"class":54,"line":55},[52,27097,59],{"class":58},[52,27099,63],{"class":371},[52,27101,77],{"class":58},[52,27103,27104,27106],{"class":54,"line":80},[52,27105,83],{"class":58},[52,27107,26935],{"class":371},[52,27109,27110,27112,27114,27116,27118],{"class":54,"line":108},[52,27111,17981],{"class":66},[52,27113,70],{"class":231},[52,27115,723],{"class":58},[52,27117,27003],{"class":371},[52,27119,729],{"class":58},[52,27121,27122],{"class":54,"line":118},[52,27123,26949],{"class":58},[52,27125,27126,27128,27130],{"class":54,"line":594},[52,27127,2213],{"class":58},[52,27129,2216],{"class":371},[52,27131,105],{"class":58},[52,27133,27134,27136,27138],{"class":54,"line":600},[52,27135,2230],{"class":58},[52,27137,26891],{"class":371},[52,27139,77],{"class":58},[52,27141,27142,27144,27146],{"class":54,"line":606},[52,27143,121],{"class":58},[52,27145,63],{"class":371},[52,27147,77],{"class":58},[43,27149,27151],{"className":222,"code":27150,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'AngularBlur', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,27152,27153,27163,27167,27181,27185,27199,27207,27211,27215],{"__ignoreMap":48},[52,27154,27155,27157,27159,27161],{"class":54,"line":55},[52,27156,232],{"class":231},[52,27158,9231],{"class":58},[52,27160,238],{"class":231},[52,27162,9236],{"class":73},[52,27164,27165],{"class":54,"line":80},[52,27166,597],{"emptyLinePlaceholder":171},[52,27168,27169,27171,27173,27175,27177,27179],{"class":54,"line":108},[52,27170,1721],{"class":231},[52,27172,1724],{"class":371},[52,27174,1727],{"class":231},[52,27176,1730],{"class":231},[52,27178,1733],{"class":66},[52,27180,1736],{"class":58},[52,27182,27183],{"class":54,"line":118},[52,27184,1751],{"class":58},[52,27186,27187,27189,27192,27195,27197],{"class":54,"line":594},[52,27188,1756],{"class":58},[52,27190,27191],{"class":73},"'AngularBlur'",[52,27193,27194],{"class":58},", props: { intensity: ",[52,27196,27003],{"class":371},[52,27198,5259],{"class":58},[52,27200,27201,27203,27205],{"class":54,"line":600},[52,27202,4727],{"class":58},[52,27204,2869],{"class":73},[52,27206,2129],{"class":58},[52,27208,27209],{"class":54,"line":606},[52,27210,4744],{"class":58},[52,27212,27213],{"class":54,"line":653},[52,27214,1773],{"class":58},[52,27216,27217],{"class":54,"line":662},[52,27218,1778],{"class":58},[156,27220,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":27222},[27223,27224],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Blurs",{},"/docs/components/angularblur",{"title":26891,"description":26899},"docs/components/AngularBlur","dDwWYoRLQmU9B64ojQ53WAL0sWqoDfVB12zo9f4FICk",{"id":27232,"title":27233,"body":27234,"category":27503,"componentType":20848,"description":27241,"extension":168,"meta":27504,"navigation":171,"path":27505,"requiresChild":171,"seo":27506,"stem":27507,"__hash__":27508},"components/docs/components/Ascii.md","Ascii",{"type":8,"value":27235,"toc":27499},[27236,27239,27242,27244,27246,27249,27251,27496],[11,27237,27233],{"id":27238},"ascii",[15,27240,27241],{},"Convert imagery to ASCII character art",[26901,27243],{"component":27233},[23,27245,26905],{"id":21503},[26907,27247],{":props":27248},"[{\"name\":\"characters\",\"type\":\"string\",\"default\":\"@%#*+=-:.\",\"description\":\"Characters ordered from dense to sparse. First character is used for bright areas, last for dark areas.\"},{\"name\":\"cellSize\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Size of each ASCII character cell (normalized to 1080p reference, scales proportionally at other resolutions)\"},{\"name\":\"fontFamily\",\"type\":\"\\\"Azeret Mono\\\" | \\\"Courier Prime\\\" | \\\"Cutive Mono\\\" | \\\"Fira Code\\\" | \\\"Geist Mono\\\" | \\\"IBM Plex Mono\\\" | \\\"JetBrains Mono\\\" | \\\"Major Mono Display\\\" | \\\"Martian Mono\\\" | \\\"Nova Mono\\\" | \\\"Press Start 2P\\\" | \\\"Roboto Mono\\\" | \\\"Share Tech Mono\\\" | \\\"Silkscreen\\\" | \\\"Source Code Pro\\\" | \\\"Space Mono\\\" | \\\"Syne Mono\\\" | \\\"VT323\\\" | \\\"Xanh Mono\\\"\",\"default\":\"JetBrains Mono\",\"description\":\"Font family for characters\"},{\"name\":\"spacing\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Character size within each cell (1.0 = optimal size, 0.0 = smallest)\"},{\"name\":\"gamma\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Brightness curve adjustment. \u003C1 brightens darks (more light characters), >1 darkens midtones (more dark characters). Use to better fit characters to image brightness range.\"},{\"name\":\"alphaThreshold\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pixels with alpha below this threshold become fully transparent.\"},{\"name\":\"preserveAlpha\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"When enabled, output alpha matches input alpha. When disabled, pixels above the alpha threshold become fully opaque.\"}]",[23,27250,26913],{"id":26912},[217,27252,27253,27298,27342,27386,27430],{":tabs":1543},[43,27254,27256],{"className":45,"code":27255,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAscii>\n \u003CCircle />\n \u003C/Ascii>\n\u003C/Shader>\n",[31,27257,27258,27266,27274,27282,27290],{"__ignoreMap":48},[52,27259,27260,27262,27264],{"class":54,"line":55},[52,27261,59],{"class":58},[52,27263,63],{"class":62},[52,27265,77],{"class":58},[52,27267,27268,27270,27272],{"class":54,"line":80},[52,27269,83],{"class":58},[52,27271,27233],{"class":62},[52,27273,77],{"class":58},[52,27275,27276,27278,27280],{"class":54,"line":108},[52,27277,2213],{"class":58},[52,27279,2216],{"class":62},[52,27281,105],{"class":58},[52,27283,27284,27286,27288],{"class":54,"line":118},[52,27285,2230],{"class":58},[52,27287,27233],{"class":62},[52,27289,77],{"class":58},[52,27291,27292,27294,27296],{"class":54,"line":594},[52,27293,121],{"class":58},[52,27295,63],{"class":62},[52,27297,77],{"class":58},[43,27299,27300],{"className":360,"code":27255,"language":362,"meta":48,"style":48},[31,27301,27302,27310,27318,27326,27334],{"__ignoreMap":48},[52,27303,27304,27306,27308],{"class":54,"line":55},[52,27305,59],{"class":58},[52,27307,63],{"class":371},[52,27309,77],{"class":58},[52,27311,27312,27314,27316],{"class":54,"line":80},[52,27313,83],{"class":58},[52,27315,27233],{"class":371},[52,27317,77],{"class":58},[52,27319,27320,27322,27324],{"class":54,"line":108},[52,27321,2213],{"class":58},[52,27323,2216],{"class":371},[52,27325,105],{"class":58},[52,27327,27328,27330,27332],{"class":54,"line":118},[52,27329,2230],{"class":58},[52,27331,27233],{"class":371},[52,27333,77],{"class":58},[52,27335,27336,27338,27340],{"class":54,"line":594},[52,27337,121],{"class":58},[52,27339,63],{"class":371},[52,27341,77],{"class":58},[43,27343,27344],{"className":2507,"code":27255,"language":2509,"meta":48,"style":48},[31,27345,27346,27354,27362,27370,27378],{"__ignoreMap":48},[52,27347,27348,27350,27352],{"class":54,"line":55},[52,27349,59],{"class":58},[52,27351,63],{"class":371},[52,27353,77],{"class":58},[52,27355,27356,27358,27360],{"class":54,"line":80},[52,27357,83],{"class":58},[52,27359,27233],{"class":371},[52,27361,77],{"class":58},[52,27363,27364,27366,27368],{"class":54,"line":108},[52,27365,2213],{"class":58},[52,27367,2216],{"class":371},[52,27369,105],{"class":58},[52,27371,27372,27374,27376],{"class":54,"line":118},[52,27373,2230],{"class":58},[52,27375,27233],{"class":371},[52,27377,77],{"class":58},[52,27379,27380,27382,27384],{"class":54,"line":594},[52,27381,121],{"class":58},[52,27383,63],{"class":371},[52,27385,77],{"class":58},[43,27387,27388],{"className":419,"code":27255,"language":420,"meta":48,"style":48},[31,27389,27390,27398,27406,27414,27422],{"__ignoreMap":48},[52,27391,27392,27394,27396],{"class":54,"line":55},[52,27393,59],{"class":58},[52,27395,63],{"class":371},[52,27397,77],{"class":58},[52,27399,27400,27402,27404],{"class":54,"line":80},[52,27401,83],{"class":58},[52,27403,27233],{"class":371},[52,27405,77],{"class":58},[52,27407,27408,27410,27412],{"class":54,"line":108},[52,27409,2213],{"class":58},[52,27411,2216],{"class":371},[52,27413,105],{"class":58},[52,27415,27416,27418,27420],{"class":54,"line":118},[52,27417,2230],{"class":58},[52,27419,27233],{"class":371},[52,27421,77],{"class":58},[52,27423,27424,27426,27428],{"class":54,"line":594},[52,27425,121],{"class":58},[52,27427,63],{"class":371},[52,27429,77],{"class":58},[43,27431,27433],{"className":222,"code":27432,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ascii', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,27434,27435,27445,27449,27463,27467,27476,27484,27488,27492],{"__ignoreMap":48},[52,27436,27437,27439,27441,27443],{"class":54,"line":55},[52,27438,232],{"class":231},[52,27440,9231],{"class":58},[52,27442,238],{"class":231},[52,27444,9236],{"class":73},[52,27446,27447],{"class":54,"line":80},[52,27448,597],{"emptyLinePlaceholder":171},[52,27450,27451,27453,27455,27457,27459,27461],{"class":54,"line":108},[52,27452,1721],{"class":231},[52,27454,1724],{"class":371},[52,27456,1727],{"class":231},[52,27458,1730],{"class":231},[52,27460,1733],{"class":66},[52,27462,1736],{"class":58},[52,27464,27465],{"class":54,"line":118},[52,27466,1751],{"class":58},[52,27468,27469,27471,27474],{"class":54,"line":594},[52,27470,1756],{"class":58},[52,27472,27473],{"class":73},"'Ascii'",[52,27475,4722],{"class":58},[52,27477,27478,27480,27482],{"class":54,"line":600},[52,27479,4727],{"class":58},[52,27481,2869],{"class":73},[52,27483,2129],{"class":58},[52,27485,27486],{"class":54,"line":606},[52,27487,4744],{"class":58},[52,27489,27490],{"class":54,"line":653},[52,27491,1773],{"class":58},[52,27493,27494],{"class":54,"line":662},[52,27495,1778],{"class":58},[156,27497,27498],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}",{"title":48,"searchDepth":80,"depth":80,"links":27500},[27501,27502],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Stylize",{},"/docs/components/ascii",{"title":27233,"description":27241},"docs/components/Ascii","zFCTrvVg7aqv9-MCzCwckEt7VNk-R1v56HNyp11FC4Q",{"id":27510,"title":10336,"body":27511,"category":27760,"componentType":20842,"description":27518,"extension":168,"meta":27761,"navigation":171,"path":27762,"requiresChild":27763,"seo":27764,"stem":27765,"__hash__":27766},"components/docs/components/Aurora.md",{"type":8,"value":27512,"toc":27756},[27513,27516,27519,27521,27523,27526,27528,27754],[11,27514,10336],{"id":27515},"aurora",[15,27517,27518],{},"Mesmerizing aurora borealis with layered curtains, vertical rays, and flowing light.",[26901,27520],{"component":10336},[23,27522,26905],{"id":21503},[26907,27524],{":props":27525},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#a533f8\",\"description\":\"Edge color at the curtain base\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#22ee88\",\"description\":\"Core color in the bright center\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#1694e8\",\"description\":\"Tip color at the ray ends\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Shifts color distribution across the curtain height\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"80\",\"description\":\"Overall aurora brightness\"},{\"name\":\"curtainCount\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Number of aurora curtain layers\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Animation speed\"},{\"name\":\"waviness\",\"type\":\"number\",\"default\":\"50\",\"description\":\"How much the curtains undulate\"},{\"name\":\"rayDensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Density of vertical ray structures\"},{\"name\":\"height\",\"type\":\"number\",\"default\":\"120\",\"description\":\"How tall the aurora extends\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0}\",\"description\":\"Center position of the aurora\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for variation\"}]",[23,27527,26913],{"id":26912},[217,27529,27530,27571,27615,27655,27697],{":tabs":1543},[43,27531,27533],{"className":45,"code":27532,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n :intensity=\"80\"\n />\n\u003C/Shader>\n",[31,27534,27535,27543,27550,27559,27563],{"__ignoreMap":48},[52,27536,27537,27539,27541],{"class":54,"line":55},[52,27538,59],{"class":58},[52,27540,63],{"class":62},[52,27542,77],{"class":58},[52,27544,27545,27547],{"class":54,"line":80},[52,27546,83],{"class":58},[52,27548,27549],{"class":62},"Aurora\n",[52,27551,27552,27554,27556],{"class":54,"line":108},[52,27553,17870],{"class":66},[52,27555,70],{"class":58},[52,27557,27558],{"class":73},"\"80\"\n",[52,27560,27561],{"class":54,"line":118},[52,27562,1224],{"class":58},[52,27564,27565,27567,27569],{"class":54,"line":594},[52,27566,121],{"class":58},[52,27568,63],{"class":62},[52,27570,77],{"class":58},[43,27572,27574],{"className":360,"code":27573,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CAurora\n intensity={80}\n />\n\u003C/Shader>\n",[31,27575,27576,27584,27590,27603,27607],{"__ignoreMap":48},[52,27577,27578,27580,27582],{"class":54,"line":55},[52,27579,59],{"class":58},[52,27581,63],{"class":371},[52,27583,77],{"class":58},[52,27585,27586,27588],{"class":54,"line":80},[52,27587,83],{"class":58},[52,27589,27549],{"class":371},[52,27591,27592,27594,27596,27598,27601],{"class":54,"line":108},[52,27593,17981],{"class":66},[52,27595,70],{"class":231},[52,27597,723],{"class":58},[52,27599,27600],{"class":371},"80",[52,27602,729],{"class":58},[52,27604,27605],{"class":54,"line":118},[52,27606,1224],{"class":58},[52,27608,27609,27611,27613],{"class":54,"line":594},[52,27610,121],{"class":58},[52,27612,63],{"class":371},[52,27614,77],{"class":58},[43,27616,27617],{"className":2507,"code":27573,"language":2509,"meta":48,"style":48},[31,27618,27619,27627,27633,27643,27647],{"__ignoreMap":48},[52,27620,27621,27623,27625],{"class":54,"line":55},[52,27622,59],{"class":58},[52,27624,63],{"class":371},[52,27626,77],{"class":58},[52,27628,27629,27631],{"class":54,"line":80},[52,27630,83],{"class":58},[52,27632,27549],{"class":371},[52,27634,27635,27637,27639,27641],{"class":54,"line":108},[52,27636,17981],{"class":66},[52,27638,24845],{"class":58},[52,27640,27600],{"class":371},[52,27642,729],{"class":58},[52,27644,27645],{"class":54,"line":118},[52,27646,1224],{"class":58},[52,27648,27649,27651,27653],{"class":54,"line":594},[52,27650,121],{"class":58},[52,27652,63],{"class":371},[52,27654,77],{"class":58},[43,27656,27657],{"className":419,"code":27573,"language":420,"meta":48,"style":48},[31,27658,27659,27667,27673,27685,27689],{"__ignoreMap":48},[52,27660,27661,27663,27665],{"class":54,"line":55},[52,27662,59],{"class":58},[52,27664,63],{"class":371},[52,27666,77],{"class":58},[52,27668,27669,27671],{"class":54,"line":80},[52,27670,83],{"class":58},[52,27672,27549],{"class":371},[52,27674,27675,27677,27679,27681,27683],{"class":54,"line":108},[52,27676,17981],{"class":66},[52,27678,70],{"class":231},[52,27680,723],{"class":58},[52,27682,27600],{"class":371},[52,27684,729],{"class":58},[52,27686,27687],{"class":54,"line":118},[52,27688,1224],{"class":58},[52,27690,27691,27693,27695],{"class":54,"line":594},[52,27692,121],{"class":58},[52,27694,63],{"class":371},[52,27696,77],{"class":58},[43,27698,27700],{"className":222,"code":27699,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Aurora', props: { intensity: 80 } }\n ]\n})\n",[31,27701,27702,27712,27716,27730,27734,27746,27750],{"__ignoreMap":48},[52,27703,27704,27706,27708,27710],{"class":54,"line":55},[52,27705,232],{"class":231},[52,27707,9231],{"class":58},[52,27709,238],{"class":231},[52,27711,9236],{"class":73},[52,27713,27714],{"class":54,"line":80},[52,27715,597],{"emptyLinePlaceholder":171},[52,27717,27718,27720,27722,27724,27726,27728],{"class":54,"line":108},[52,27719,1721],{"class":231},[52,27721,1724],{"class":371},[52,27723,1727],{"class":231},[52,27725,1730],{"class":231},[52,27727,1733],{"class":66},[52,27729,1736],{"class":58},[52,27731,27732],{"class":54,"line":118},[52,27733,1751],{"class":58},[52,27735,27736,27738,27740,27742,27744],{"class":54,"line":594},[52,27737,1756],{"class":58},[52,27739,10714],{"class":73},[52,27741,27194],{"class":58},[52,27743,27600],{"class":371},[52,27745,1768],{"class":58},[52,27747,27748],{"class":54,"line":600},[52,27749,1773],{"class":58},[52,27751,27752],{"class":54,"line":606},[52,27753,1778],{"class":58},[156,27755,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":27757},[27758,27759],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Textures",{},"/docs/components/aurora",false,{"title":10336,"description":27518},"docs/components/Aurora","on5JMTBnZHIPVdWGxRSdnhq8QmIxld_e6RrmeRV22m4",{"id":27768,"title":27769,"body":27770,"category":27760,"componentType":20842,"description":27777,"extension":168,"meta":27962,"navigation":171,"path":27963,"requiresChild":27763,"seo":27964,"stem":27965,"__hash__":27966},"components/docs/components/Beam.md","Beam",{"type":8,"value":27771,"toc":27958},[27772,27775,27778,27780,27782,27785,27787,27956],[11,27773,27769],{"id":27774},"beam",[15,27776,27777],{},"A beam of light from one point to another.",[26901,27779],{"component":27769},[23,27781,26905],{"id":21503},[26907,27783],{":props":27784},"[{\"name\":\"startPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.2,\\\"y\\\":0.5}\",\"description\":\"Starting point of the beam\"},{\"name\":\"endPosition\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.8,\\\"y\\\":0.5}\",\"description\":\"Ending point of the beam\"},{\"name\":\"startThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Thickness at the start of the beam\"},{\"name\":\"endThickness\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Thickness at the end of the beam\"},{\"name\":\"startSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness at the start of the beam\"},{\"name\":\"endSoftness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Edge softness at the end of the beam\"},{\"name\":\"insideColor\",\"type\":\"string\",\"default\":\"#FF0000\",\"description\":\"Color at the center of the beam\"},{\"name\":\"outsideColor\",\"type\":\"string\",\"default\":\"#0000FF\",\"description\":\"Color at the edges of the beam\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,27786,26913],{"id":26912},[217,27788,27789,27818,27846,27874,27902],{":tabs":1543},[43,27790,27792],{"className":45,"code":27791,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBeam />\n\u003C/Shader>\n",[31,27793,27794,27802,27810],{"__ignoreMap":48},[52,27795,27796,27798,27800],{"class":54,"line":55},[52,27797,59],{"class":58},[52,27799,63],{"class":62},[52,27801,77],{"class":58},[52,27803,27804,27806,27808],{"class":54,"line":80},[52,27805,83],{"class":58},[52,27807,27769],{"class":62},[52,27809,105],{"class":58},[52,27811,27812,27814,27816],{"class":54,"line":108},[52,27813,121],{"class":58},[52,27815,63],{"class":62},[52,27817,77],{"class":58},[43,27819,27820],{"className":360,"code":27791,"language":362,"meta":48,"style":48},[31,27821,27822,27830,27838],{"__ignoreMap":48},[52,27823,27824,27826,27828],{"class":54,"line":55},[52,27825,59],{"class":58},[52,27827,63],{"class":371},[52,27829,77],{"class":58},[52,27831,27832,27834,27836],{"class":54,"line":80},[52,27833,83],{"class":58},[52,27835,27769],{"class":371},[52,27837,105],{"class":58},[52,27839,27840,27842,27844],{"class":54,"line":108},[52,27841,121],{"class":58},[52,27843,63],{"class":371},[52,27845,77],{"class":58},[43,27847,27848],{"className":2507,"code":27791,"language":2509,"meta":48,"style":48},[31,27849,27850,27858,27866],{"__ignoreMap":48},[52,27851,27852,27854,27856],{"class":54,"line":55},[52,27853,59],{"class":58},[52,27855,63],{"class":371},[52,27857,77],{"class":58},[52,27859,27860,27862,27864],{"class":54,"line":80},[52,27861,83],{"class":58},[52,27863,27769],{"class":371},[52,27865,105],{"class":58},[52,27867,27868,27870,27872],{"class":54,"line":108},[52,27869,121],{"class":58},[52,27871,63],{"class":371},[52,27873,77],{"class":58},[43,27875,27876],{"className":419,"code":27791,"language":420,"meta":48,"style":48},[31,27877,27878,27886,27894],{"__ignoreMap":48},[52,27879,27880,27882,27884],{"class":54,"line":55},[52,27881,59],{"class":58},[52,27883,63],{"class":371},[52,27885,77],{"class":58},[52,27887,27888,27890,27892],{"class":54,"line":80},[52,27889,83],{"class":58},[52,27891,27769],{"class":371},[52,27893,105],{"class":58},[52,27895,27896,27898,27900],{"class":54,"line":108},[52,27897,121],{"class":58},[52,27899,63],{"class":371},[52,27901,77],{"class":58},[43,27903,27905],{"className":222,"code":27904,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Beam', props: {} }\n ]\n})\n",[31,27906,27907,27917,27921,27935,27939,27948,27952],{"__ignoreMap":48},[52,27908,27909,27911,27913,27915],{"class":54,"line":55},[52,27910,232],{"class":231},[52,27912,9231],{"class":58},[52,27914,238],{"class":231},[52,27916,9236],{"class":73},[52,27918,27919],{"class":54,"line":80},[52,27920,597],{"emptyLinePlaceholder":171},[52,27922,27923,27925,27927,27929,27931,27933],{"class":54,"line":108},[52,27924,1721],{"class":231},[52,27926,1724],{"class":371},[52,27928,1727],{"class":231},[52,27930,1730],{"class":231},[52,27932,1733],{"class":66},[52,27934,1736],{"class":58},[52,27936,27937],{"class":54,"line":118},[52,27938,1751],{"class":58},[52,27940,27941,27943,27946],{"class":54,"line":594},[52,27942,1756],{"class":58},[52,27944,27945],{"class":73},"'Beam'",[52,27947,2129],{"class":58},[52,27949,27950],{"class":54,"line":600},[52,27951,1773],{"class":58},[52,27953,27954],{"class":54,"line":606},[52,27955,1778],{"class":58},[156,27957,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":27959},[27960,27961],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/beam",{"title":27769,"description":27777},"docs/components/Beam","2D48mO38dgWM1zgCEVRK4hahKiyulifz4Fbo3ZNKOb4",{"id":27968,"title":27969,"body":27970,"category":27760,"componentType":20842,"description":27977,"extension":168,"meta":28162,"navigation":171,"path":28163,"requiresChild":27763,"seo":28164,"stem":28165,"__hash__":28166},"components/docs/components/Blob.md","Blob",{"type":8,"value":27971,"toc":28158},[27972,27975,27978,27980,27982,27985,27987,28156],[11,27973,27969],{"id":27974},"blob",[15,27976,27977],{},"Organic animated blob with 3D lighting and gradients",[26901,27979],{"component":27969},[23,27981,26905],{"id":21503},[26907,27983],{":props":27984},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff6b35\",\"description\":\"Primary color of the blob\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#e91e63\",\"description\":\"Secondary color of the blob\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Size of the blob\"},{\"name\":\"deformation\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How organic and blobby the shape is (0 = circle, 1 = very blobby)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Softness of the blob edges (combines edge width and transition curve)\"},{\"name\":\"highlightIntensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of specular highlight effect\"},{\"name\":\"highlightX\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Light direction X component\"},{\"name\":\"highlightY\",\"type\":\"number\",\"default\":\"-0.3\",\"description\":\"Light direction Y component\"},{\"name\":\"highlightZ\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Light direction Z component\"},{\"name\":\"highlightColor\",\"type\":\"string\",\"default\":\"#ffe11a\",\"description\":\"Color of the specular highlight\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Animation speed\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Adjusts the starting state, useful for variation\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the blob\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,27986,26913],{"id":26912},[217,27988,27989,28018,28046,28074,28102],{":tabs":1543},[43,27990,27992],{"className":45,"code":27991,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlob />\n\u003C/Shader>\n",[31,27993,27994,28002,28010],{"__ignoreMap":48},[52,27995,27996,27998,28000],{"class":54,"line":55},[52,27997,59],{"class":58},[52,27999,63],{"class":62},[52,28001,77],{"class":58},[52,28003,28004,28006,28008],{"class":54,"line":80},[52,28005,83],{"class":58},[52,28007,27969],{"class":62},[52,28009,105],{"class":58},[52,28011,28012,28014,28016],{"class":54,"line":108},[52,28013,121],{"class":58},[52,28015,63],{"class":62},[52,28017,77],{"class":58},[43,28019,28020],{"className":360,"code":27991,"language":362,"meta":48,"style":48},[31,28021,28022,28030,28038],{"__ignoreMap":48},[52,28023,28024,28026,28028],{"class":54,"line":55},[52,28025,59],{"class":58},[52,28027,63],{"class":371},[52,28029,77],{"class":58},[52,28031,28032,28034,28036],{"class":54,"line":80},[52,28033,83],{"class":58},[52,28035,27969],{"class":371},[52,28037,105],{"class":58},[52,28039,28040,28042,28044],{"class":54,"line":108},[52,28041,121],{"class":58},[52,28043,63],{"class":371},[52,28045,77],{"class":58},[43,28047,28048],{"className":2507,"code":27991,"language":2509,"meta":48,"style":48},[31,28049,28050,28058,28066],{"__ignoreMap":48},[52,28051,28052,28054,28056],{"class":54,"line":55},[52,28053,59],{"class":58},[52,28055,63],{"class":371},[52,28057,77],{"class":58},[52,28059,28060,28062,28064],{"class":54,"line":80},[52,28061,83],{"class":58},[52,28063,27969],{"class":371},[52,28065,105],{"class":58},[52,28067,28068,28070,28072],{"class":54,"line":108},[52,28069,121],{"class":58},[52,28071,63],{"class":371},[52,28073,77],{"class":58},[43,28075,28076],{"className":419,"code":27991,"language":420,"meta":48,"style":48},[31,28077,28078,28086,28094],{"__ignoreMap":48},[52,28079,28080,28082,28084],{"class":54,"line":55},[52,28081,59],{"class":58},[52,28083,63],{"class":371},[52,28085,77],{"class":58},[52,28087,28088,28090,28092],{"class":54,"line":80},[52,28089,83],{"class":58},[52,28091,27969],{"class":371},[52,28093,105],{"class":58},[52,28095,28096,28098,28100],{"class":54,"line":108},[52,28097,121],{"class":58},[52,28099,63],{"class":371},[52,28101,77],{"class":58},[43,28103,28105],{"className":222,"code":28104,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blob', props: {} }\n ]\n})\n",[31,28106,28107,28117,28121,28135,28139,28148,28152],{"__ignoreMap":48},[52,28108,28109,28111,28113,28115],{"class":54,"line":55},[52,28110,232],{"class":231},[52,28112,9231],{"class":58},[52,28114,238],{"class":231},[52,28116,9236],{"class":73},[52,28118,28119],{"class":54,"line":80},[52,28120,597],{"emptyLinePlaceholder":171},[52,28122,28123,28125,28127,28129,28131,28133],{"class":54,"line":108},[52,28124,1721],{"class":231},[52,28126,1724],{"class":371},[52,28128,1727],{"class":231},[52,28130,1730],{"class":231},[52,28132,1733],{"class":66},[52,28134,1736],{"class":58},[52,28136,28137],{"class":54,"line":118},[52,28138,1751],{"class":58},[52,28140,28141,28143,28146],{"class":54,"line":594},[52,28142,1756],{"class":58},[52,28144,28145],{"class":73},"'Blob'",[52,28147,2129],{"class":58},[52,28149,28150],{"class":54,"line":600},[52,28151,1773],{"class":58},[52,28153,28154],{"class":54,"line":606},[52,28155,1778],{"class":58},[156,28157,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":28159},[28160,28161],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/blob",{"title":27969,"description":27977},"docs/components/Blob","2a5XrgmcJxcBLcEQkxs8e3ZaxmxCERp56Moc00FmMUE",{"id":28168,"title":9486,"body":28169,"category":27225,"componentType":20848,"description":28176,"extension":168,"meta":28495,"navigation":171,"path":28496,"requiresChild":171,"seo":28497,"stem":28498,"__hash__":28499},"components/docs/components/Blur.md",{"type":8,"value":28170,"toc":28491},[28171,28174,28177,28179,28181,28184,28186,28489],[11,28172,9486],{"id":28173},"blur",[15,28175,28176],{},"A simple Gaussian blur effect",[26901,28178],{"component":9486},[23,28180,26905],{"id":21503},[26907,28182],{":props":28183},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"50\",\"description\":\"Intensity of the blur effect\"}]",[23,28185,26913],{"id":26912},[217,28187,28188,28245,28305,28361,28419],{":tabs":1543},[43,28189,28191],{"className":45,"code":28190,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28192,28193,28201,28208,28217,28221,28229,28237],{"__ignoreMap":48},[52,28194,28195,28197,28199],{"class":54,"line":55},[52,28196,59],{"class":58},[52,28198,63],{"class":62},[52,28200,77],{"class":58},[52,28202,28203,28205],{"class":54,"line":80},[52,28204,83],{"class":58},[52,28206,28207],{"class":62},"Blur\n",[52,28209,28210,28212,28214],{"class":54,"line":108},[52,28211,17870],{"class":66},[52,28213,70],{"class":58},[52,28215,28216],{"class":73},"\"50\"\n",[52,28218,28219],{"class":54,"line":118},[52,28220,26949],{"class":58},[52,28222,28223,28225,28227],{"class":54,"line":594},[52,28224,2213],{"class":58},[52,28226,2216],{"class":62},[52,28228,105],{"class":58},[52,28230,28231,28233,28235],{"class":54,"line":600},[52,28232,2230],{"class":58},[52,28234,9486],{"class":62},[52,28236,77],{"class":58},[52,28238,28239,28241,28243],{"class":54,"line":606},[52,28240,121],{"class":58},[52,28242,63],{"class":62},[52,28244,77],{"class":58},[43,28246,28248],{"className":360,"code":28247,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/Blur>\n\u003C/Shader>\n",[31,28249,28250,28258,28264,28277,28281,28289,28297],{"__ignoreMap":48},[52,28251,28252,28254,28256],{"class":54,"line":55},[52,28253,59],{"class":58},[52,28255,63],{"class":371},[52,28257,77],{"class":58},[52,28259,28260,28262],{"class":54,"line":80},[52,28261,83],{"class":58},[52,28263,28207],{"class":371},[52,28265,28266,28268,28270,28272,28275],{"class":54,"line":108},[52,28267,17981],{"class":66},[52,28269,70],{"class":231},[52,28271,723],{"class":58},[52,28273,28274],{"class":371},"50",[52,28276,729],{"class":58},[52,28278,28279],{"class":54,"line":118},[52,28280,26949],{"class":58},[52,28282,28283,28285,28287],{"class":54,"line":594},[52,28284,2213],{"class":58},[52,28286,2216],{"class":371},[52,28288,105],{"class":58},[52,28290,28291,28293,28295],{"class":54,"line":600},[52,28292,2230],{"class":58},[52,28294,9486],{"class":371},[52,28296,77],{"class":58},[52,28298,28299,28301,28303],{"class":54,"line":606},[52,28300,121],{"class":58},[52,28302,63],{"class":371},[52,28304,77],{"class":58},[43,28306,28307],{"className":2507,"code":28247,"language":2509,"meta":48,"style":48},[31,28308,28309,28317,28323,28333,28337,28345,28353],{"__ignoreMap":48},[52,28310,28311,28313,28315],{"class":54,"line":55},[52,28312,59],{"class":58},[52,28314,63],{"class":371},[52,28316,77],{"class":58},[52,28318,28319,28321],{"class":54,"line":80},[52,28320,83],{"class":58},[52,28322,28207],{"class":371},[52,28324,28325,28327,28329,28331],{"class":54,"line":108},[52,28326,17981],{"class":66},[52,28328,24845],{"class":58},[52,28330,28274],{"class":371},[52,28332,729],{"class":58},[52,28334,28335],{"class":54,"line":118},[52,28336,26949],{"class":58},[52,28338,28339,28341,28343],{"class":54,"line":594},[52,28340,2213],{"class":58},[52,28342,2216],{"class":371},[52,28344,105],{"class":58},[52,28346,28347,28349,28351],{"class":54,"line":600},[52,28348,2230],{"class":58},[52,28350,9486],{"class":371},[52,28352,77],{"class":58},[52,28354,28355,28357,28359],{"class":54,"line":606},[52,28356,121],{"class":58},[52,28358,63],{"class":371},[52,28360,77],{"class":58},[43,28362,28363],{"className":419,"code":28247,"language":420,"meta":48,"style":48},[31,28364,28365,28373,28379,28391,28395,28403,28411],{"__ignoreMap":48},[52,28366,28367,28369,28371],{"class":54,"line":55},[52,28368,59],{"class":58},[52,28370,63],{"class":371},[52,28372,77],{"class":58},[52,28374,28375,28377],{"class":54,"line":80},[52,28376,83],{"class":58},[52,28378,28207],{"class":371},[52,28380,28381,28383,28385,28387,28389],{"class":54,"line":108},[52,28382,17981],{"class":66},[52,28384,70],{"class":231},[52,28386,723],{"class":58},[52,28388,28274],{"class":371},[52,28390,729],{"class":58},[52,28392,28393],{"class":54,"line":118},[52,28394,26949],{"class":58},[52,28396,28397,28399,28401],{"class":54,"line":594},[52,28398,2213],{"class":58},[52,28400,2216],{"class":371},[52,28402,105],{"class":58},[52,28404,28405,28407,28409],{"class":54,"line":600},[52,28406,2230],{"class":58},[52,28408,9486],{"class":371},[52,28410,77],{"class":58},[52,28412,28413,28415,28417],{"class":54,"line":606},[52,28414,121],{"class":58},[52,28416,63],{"class":371},[52,28418,77],{"class":58},[43,28420,28422],{"className":222,"code":28421,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Blur', props: { intensity: 50 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,28423,28424,28434,28438,28452,28456,28469,28477,28481,28485],{"__ignoreMap":48},[52,28425,28426,28428,28430,28432],{"class":54,"line":55},[52,28427,232],{"class":231},[52,28429,9231],{"class":58},[52,28431,238],{"class":231},[52,28433,9236],{"class":73},[52,28435,28436],{"class":54,"line":80},[52,28437,597],{"emptyLinePlaceholder":171},[52,28439,28440,28442,28444,28446,28448,28450],{"class":54,"line":108},[52,28441,1721],{"class":231},[52,28443,1724],{"class":371},[52,28445,1727],{"class":231},[52,28447,1730],{"class":231},[52,28449,1733],{"class":66},[52,28451,1736],{"class":58},[52,28453,28454],{"class":54,"line":118},[52,28455,1751],{"class":58},[52,28457,28458,28460,28463,28465,28467],{"class":54,"line":594},[52,28459,1756],{"class":58},[52,28461,28462],{"class":73},"'Blur'",[52,28464,27194],{"class":58},[52,28466,28274],{"class":371},[52,28468,5259],{"class":58},[52,28470,28471,28473,28475],{"class":54,"line":600},[52,28472,4727],{"class":58},[52,28474,2869],{"class":73},[52,28476,2129],{"class":58},[52,28478,28479],{"class":54,"line":606},[52,28480,4744],{"class":58},[52,28482,28483],{"class":54,"line":653},[52,28484,1773],{"class":58},[52,28486,28487],{"class":54,"line":662},[52,28488,1778],{"class":58},[156,28490,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":28492},[28493,28494],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/blur",{"title":9486,"description":28176},"docs/components/Blur","5Nye--Zq0-QqjISE7cOCtrzSBXVYv5MdrfjguIpYda0",{"id":28501,"title":28502,"body":28503,"category":28771,"componentType":20848,"description":28510,"extension":168,"meta":28772,"navigation":171,"path":28773,"requiresChild":171,"seo":28774,"stem":28775,"__hash__":28776},"components/docs/components/BrightnessContrast.md","BrightnessContrast",{"type":8,"value":28504,"toc":28767},[28505,28508,28511,28513,28515,28518,28520,28765],[11,28506,28502],{"id":28507},"brightnesscontrast",[15,28509,28510],{},"Adjust brightness and contrast of the image",[26901,28512],{"component":28502},[23,28514,26905],{"id":21503},[26907,28516],{":props":28517},"[{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Brightness adjustment (-1 to 1)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Contrast adjustment (-1 to 1)\"}]",[23,28519,26913],{"id":26912},[217,28521,28522,28567,28611,28655,28699],{":tabs":1543},[43,28523,28525],{"className":45,"code":28524,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBrightnessContrast>\n \u003CCircle />\n \u003C/BrightnessContrast>\n\u003C/Shader>\n",[31,28526,28527,28535,28543,28551,28559],{"__ignoreMap":48},[52,28528,28529,28531,28533],{"class":54,"line":55},[52,28530,59],{"class":58},[52,28532,63],{"class":62},[52,28534,77],{"class":58},[52,28536,28537,28539,28541],{"class":54,"line":80},[52,28538,83],{"class":58},[52,28540,28502],{"class":62},[52,28542,77],{"class":58},[52,28544,28545,28547,28549],{"class":54,"line":108},[52,28546,2213],{"class":58},[52,28548,2216],{"class":62},[52,28550,105],{"class":58},[52,28552,28553,28555,28557],{"class":54,"line":118},[52,28554,2230],{"class":58},[52,28556,28502],{"class":62},[52,28558,77],{"class":58},[52,28560,28561,28563,28565],{"class":54,"line":594},[52,28562,121],{"class":58},[52,28564,63],{"class":62},[52,28566,77],{"class":58},[43,28568,28569],{"className":360,"code":28524,"language":362,"meta":48,"style":48},[31,28570,28571,28579,28587,28595,28603],{"__ignoreMap":48},[52,28572,28573,28575,28577],{"class":54,"line":55},[52,28574,59],{"class":58},[52,28576,63],{"class":371},[52,28578,77],{"class":58},[52,28580,28581,28583,28585],{"class":54,"line":80},[52,28582,83],{"class":58},[52,28584,28502],{"class":371},[52,28586,77],{"class":58},[52,28588,28589,28591,28593],{"class":54,"line":108},[52,28590,2213],{"class":58},[52,28592,2216],{"class":371},[52,28594,105],{"class":58},[52,28596,28597,28599,28601],{"class":54,"line":118},[52,28598,2230],{"class":58},[52,28600,28502],{"class":371},[52,28602,77],{"class":58},[52,28604,28605,28607,28609],{"class":54,"line":594},[52,28606,121],{"class":58},[52,28608,63],{"class":371},[52,28610,77],{"class":58},[43,28612,28613],{"className":2507,"code":28524,"language":2509,"meta":48,"style":48},[31,28614,28615,28623,28631,28639,28647],{"__ignoreMap":48},[52,28616,28617,28619,28621],{"class":54,"line":55},[52,28618,59],{"class":58},[52,28620,63],{"class":371},[52,28622,77],{"class":58},[52,28624,28625,28627,28629],{"class":54,"line":80},[52,28626,83],{"class":58},[52,28628,28502],{"class":371},[52,28630,77],{"class":58},[52,28632,28633,28635,28637],{"class":54,"line":108},[52,28634,2213],{"class":58},[52,28636,2216],{"class":371},[52,28638,105],{"class":58},[52,28640,28641,28643,28645],{"class":54,"line":118},[52,28642,2230],{"class":58},[52,28644,28502],{"class":371},[52,28646,77],{"class":58},[52,28648,28649,28651,28653],{"class":54,"line":594},[52,28650,121],{"class":58},[52,28652,63],{"class":371},[52,28654,77],{"class":58},[43,28656,28657],{"className":419,"code":28524,"language":420,"meta":48,"style":48},[31,28658,28659,28667,28675,28683,28691],{"__ignoreMap":48},[52,28660,28661,28663,28665],{"class":54,"line":55},[52,28662,59],{"class":58},[52,28664,63],{"class":371},[52,28666,77],{"class":58},[52,28668,28669,28671,28673],{"class":54,"line":80},[52,28670,83],{"class":58},[52,28672,28502],{"class":371},[52,28674,77],{"class":58},[52,28676,28677,28679,28681],{"class":54,"line":108},[52,28678,2213],{"class":58},[52,28680,2216],{"class":371},[52,28682,105],{"class":58},[52,28684,28685,28687,28689],{"class":54,"line":118},[52,28686,2230],{"class":58},[52,28688,28502],{"class":371},[52,28690,77],{"class":58},[52,28692,28693,28695,28697],{"class":54,"line":594},[52,28694,121],{"class":58},[52,28696,63],{"class":371},[52,28698,77],{"class":58},[43,28700,28702],{"className":222,"code":28701,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'BrightnessContrast', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,28703,28704,28714,28718,28732,28736,28745,28753,28757,28761],{"__ignoreMap":48},[52,28705,28706,28708,28710,28712],{"class":54,"line":55},[52,28707,232],{"class":231},[52,28709,9231],{"class":58},[52,28711,238],{"class":231},[52,28713,9236],{"class":73},[52,28715,28716],{"class":54,"line":80},[52,28717,597],{"emptyLinePlaceholder":171},[52,28719,28720,28722,28724,28726,28728,28730],{"class":54,"line":108},[52,28721,1721],{"class":231},[52,28723,1724],{"class":371},[52,28725,1727],{"class":231},[52,28727,1730],{"class":231},[52,28729,1733],{"class":66},[52,28731,1736],{"class":58},[52,28733,28734],{"class":54,"line":118},[52,28735,1751],{"class":58},[52,28737,28738,28740,28743],{"class":54,"line":594},[52,28739,1756],{"class":58},[52,28741,28742],{"class":73},"'BrightnessContrast'",[52,28744,4722],{"class":58},[52,28746,28747,28749,28751],{"class":54,"line":600},[52,28748,4727],{"class":58},[52,28750,2869],{"class":73},[52,28752,2129],{"class":58},[52,28754,28755],{"class":54,"line":606},[52,28756,4744],{"class":58},[52,28758,28759],{"class":54,"line":653},[52,28760,1773],{"class":58},[52,28762,28763],{"class":54,"line":662},[52,28764,1778],{"class":58},[156,28766,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":28768},[28769,28770],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Adjustments",{},"/docs/components/brightnesscontrast",{"title":28502,"description":28510},"docs/components/BrightnessContrast","PKzh7HEgTvuSYCRD7ATtLhbx5L5UeVOBFFh40sXqczM",{"id":28778,"title":28779,"body":28780,"category":29105,"componentType":20848,"description":28787,"extension":168,"meta":29106,"navigation":171,"path":29107,"requiresChild":171,"seo":29108,"stem":29109,"__hash__":29110},"components/docs/components/Bulge.md","Bulge",{"type":8,"value":28781,"toc":29101},[28782,28785,28788,28790,28792,28795,28797,29099],[11,28783,28779],{"id":28784},"bulge",[15,28786,28787],{},"Magnify or pinch content around a center point",[26901,28789],{"component":28779},[23,28791,26905],{"id":21503},[26907,28793],{":props":28794},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the bulge effect\"},{\"name\":\"strength\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the bulge effect (positive = bulge out, negative = pinch in)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The radius of the bulge effect area\"},{\"name\":\"falloff\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Controls the smoothness of the transition (0 = hard edge, 1 = very smooth)\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,28796,26913],{"id":26912},[217,28798,28799,28856,28915,28971,29029],{":tabs":1543},[43,28800,28802],{"className":45,"code":28801,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28803,28804,28812,28819,28828,28832,28840,28848],{"__ignoreMap":48},[52,28805,28806,28808,28810],{"class":54,"line":55},[52,28807,59],{"class":58},[52,28809,63],{"class":62},[52,28811,77],{"class":58},[52,28813,28814,28816],{"class":54,"line":80},[52,28815,83],{"class":58},[52,28817,28818],{"class":62},"Bulge\n",[52,28820,28821,28823,28825],{"class":54,"line":108},[52,28822,14901],{"class":66},[52,28824,70],{"class":58},[52,28826,28827],{"class":73},"\"1\"\n",[52,28829,28830],{"class":54,"line":118},[52,28831,26949],{"class":58},[52,28833,28834,28836,28838],{"class":54,"line":594},[52,28835,2213],{"class":58},[52,28837,2216],{"class":62},[52,28839,105],{"class":58},[52,28841,28842,28844,28846],{"class":54,"line":600},[52,28843,2230],{"class":58},[52,28845,28779],{"class":62},[52,28847,77],{"class":58},[52,28849,28850,28852,28854],{"class":54,"line":606},[52,28851,121],{"class":58},[52,28853,63],{"class":62},[52,28855,77],{"class":58},[43,28857,28859],{"className":360,"code":28858,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CBulge\n radius={1}\n >\n \u003CCircle />\n \u003C/Bulge>\n\u003C/Shader>\n",[31,28860,28861,28869,28875,28887,28891,28899,28907],{"__ignoreMap":48},[52,28862,28863,28865,28867],{"class":54,"line":55},[52,28864,59],{"class":58},[52,28866,63],{"class":371},[52,28868,77],{"class":58},[52,28870,28871,28873],{"class":54,"line":80},[52,28872,83],{"class":58},[52,28874,28818],{"class":371},[52,28876,28877,28879,28881,28883,28885],{"class":54,"line":108},[52,28878,7361],{"class":66},[52,28880,70],{"class":231},[52,28882,723],{"class":58},[52,28884,6391],{"class":371},[52,28886,729],{"class":58},[52,28888,28889],{"class":54,"line":118},[52,28890,26949],{"class":58},[52,28892,28893,28895,28897],{"class":54,"line":594},[52,28894,2213],{"class":58},[52,28896,2216],{"class":371},[52,28898,105],{"class":58},[52,28900,28901,28903,28905],{"class":54,"line":600},[52,28902,2230],{"class":58},[52,28904,28779],{"class":371},[52,28906,77],{"class":58},[52,28908,28909,28911,28913],{"class":54,"line":606},[52,28910,121],{"class":58},[52,28912,63],{"class":371},[52,28914,77],{"class":58},[43,28916,28917],{"className":2507,"code":28858,"language":2509,"meta":48,"style":48},[31,28918,28919,28927,28933,28943,28947,28955,28963],{"__ignoreMap":48},[52,28920,28921,28923,28925],{"class":54,"line":55},[52,28922,59],{"class":58},[52,28924,63],{"class":371},[52,28926,77],{"class":58},[52,28928,28929,28931],{"class":54,"line":80},[52,28930,83],{"class":58},[52,28932,28818],{"class":371},[52,28934,28935,28937,28939,28941],{"class":54,"line":108},[52,28936,7361],{"class":66},[52,28938,24845],{"class":58},[52,28940,6391],{"class":371},[52,28942,729],{"class":58},[52,28944,28945],{"class":54,"line":118},[52,28946,26949],{"class":58},[52,28948,28949,28951,28953],{"class":54,"line":594},[52,28950,2213],{"class":58},[52,28952,2216],{"class":371},[52,28954,105],{"class":58},[52,28956,28957,28959,28961],{"class":54,"line":600},[52,28958,2230],{"class":58},[52,28960,28779],{"class":371},[52,28962,77],{"class":58},[52,28964,28965,28967,28969],{"class":54,"line":606},[52,28966,121],{"class":58},[52,28968,63],{"class":371},[52,28970,77],{"class":58},[43,28972,28973],{"className":419,"code":28858,"language":420,"meta":48,"style":48},[31,28974,28975,28983,28989,29001,29005,29013,29021],{"__ignoreMap":48},[52,28976,28977,28979,28981],{"class":54,"line":55},[52,28978,59],{"class":58},[52,28980,63],{"class":371},[52,28982,77],{"class":58},[52,28984,28985,28987],{"class":54,"line":80},[52,28986,83],{"class":58},[52,28988,28818],{"class":371},[52,28990,28991,28993,28995,28997,28999],{"class":54,"line":108},[52,28992,7361],{"class":66},[52,28994,70],{"class":231},[52,28996,723],{"class":58},[52,28998,6391],{"class":371},[52,29000,729],{"class":58},[52,29002,29003],{"class":54,"line":118},[52,29004,26949],{"class":58},[52,29006,29007,29009,29011],{"class":54,"line":594},[52,29008,2213],{"class":58},[52,29010,2216],{"class":371},[52,29012,105],{"class":58},[52,29014,29015,29017,29019],{"class":54,"line":600},[52,29016,2230],{"class":58},[52,29018,28779],{"class":371},[52,29020,77],{"class":58},[52,29022,29023,29025,29027],{"class":54,"line":606},[52,29024,121],{"class":58},[52,29026,63],{"class":371},[52,29028,77],{"class":58},[43,29030,29032],{"className":222,"code":29031,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Bulge', props: { radius: 1 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,29033,29034,29044,29048,29062,29066,29079,29087,29091,29095],{"__ignoreMap":48},[52,29035,29036,29038,29040,29042],{"class":54,"line":55},[52,29037,232],{"class":231},[52,29039,9231],{"class":58},[52,29041,238],{"class":231},[52,29043,9236],{"class":73},[52,29045,29046],{"class":54,"line":80},[52,29047,597],{"emptyLinePlaceholder":171},[52,29049,29050,29052,29054,29056,29058,29060],{"class":54,"line":108},[52,29051,1721],{"class":231},[52,29053,1724],{"class":371},[52,29055,1727],{"class":231},[52,29057,1730],{"class":231},[52,29059,1733],{"class":66},[52,29061,1736],{"class":58},[52,29063,29064],{"class":54,"line":118},[52,29065,1751],{"class":58},[52,29067,29068,29070,29073,29075,29077],{"class":54,"line":594},[52,29069,1756],{"class":58},[52,29071,29072],{"class":73},"'Bulge'",[52,29074,5254],{"class":58},[52,29076,6391],{"class":371},[52,29078,5259],{"class":58},[52,29080,29081,29083,29085],{"class":54,"line":600},[52,29082,4727],{"class":58},[52,29084,2869],{"class":73},[52,29086,2129],{"class":58},[52,29088,29089],{"class":54,"line":606},[52,29090,4744],{"class":58},[52,29092,29093],{"class":54,"line":653},[52,29094,1773],{"class":58},[52,29096,29097],{"class":54,"line":662},[52,29098,1778],{"class":58},[156,29100,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":29102},[29103,29104],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Distortions",{},"/docs/components/bulge",{"title":28779,"description":28787},"docs/components/Bulge","oOwEacxaBsAJTlLNDdPAO7zPhM28kbvFQiAH2-wKwdo",{"id":29112,"title":29113,"body":29114,"category":27503,"componentType":20848,"description":29121,"extension":168,"meta":29382,"navigation":171,"path":29383,"requiresChild":171,"seo":29384,"stem":29385,"__hash__":29386},"components/docs/components/CRTScreen.md","CRTScreen",{"type":8,"value":29115,"toc":29378},[29116,29119,29122,29124,29126,29129,29131,29376],[11,29117,29113],{"id":29118},"crtscreen",[15,29120,29121],{},"Retro CRT monitor simulation with scanlines",[26901,29123],{"component":29113},[23,29125,26905],{"id":21503},[26907,29127],{":props":29128},"[{\"name\":\"pixelSize\",\"type\":\"number\",\"default\":\"128\",\"description\":\"Size of individual TV pixels (lower = more pixels)\"},{\"name\":\"colorShift\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Chromatic aberration amount\"},{\"name\":\"scanlineIntensity\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Strength of horizontal scanlines\"},{\"name\":\"scanlineFrequency\",\"type\":\"number\",\"default\":\"200\",\"description\":\"Number of scanlines across screen\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Screen brightness boost\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Screen contrast enhancement\"},{\"name\":\"vignetteIntensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of corner darkening effect (0 = off)\"},{\"name\":\"vignetteRadius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How far the vignette extends inward (0 = edges only, 1 = reaches center)\"}]",[23,29130,26913],{"id":26912},[217,29132,29133,29178,29222,29266,29310],{":tabs":1543},[43,29134,29136],{"className":45,"code":29135,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCRTScreen>\n \u003CCircle />\n \u003C/CRTScreen>\n\u003C/Shader>\n",[31,29137,29138,29146,29154,29162,29170],{"__ignoreMap":48},[52,29139,29140,29142,29144],{"class":54,"line":55},[52,29141,59],{"class":58},[52,29143,63],{"class":62},[52,29145,77],{"class":58},[52,29147,29148,29150,29152],{"class":54,"line":80},[52,29149,83],{"class":58},[52,29151,29113],{"class":62},[52,29153,77],{"class":58},[52,29155,29156,29158,29160],{"class":54,"line":108},[52,29157,2213],{"class":58},[52,29159,2216],{"class":62},[52,29161,105],{"class":58},[52,29163,29164,29166,29168],{"class":54,"line":118},[52,29165,2230],{"class":58},[52,29167,29113],{"class":62},[52,29169,77],{"class":58},[52,29171,29172,29174,29176],{"class":54,"line":594},[52,29173,121],{"class":58},[52,29175,63],{"class":62},[52,29177,77],{"class":58},[43,29179,29180],{"className":360,"code":29135,"language":362,"meta":48,"style":48},[31,29181,29182,29190,29198,29206,29214],{"__ignoreMap":48},[52,29183,29184,29186,29188],{"class":54,"line":55},[52,29185,59],{"class":58},[52,29187,63],{"class":371},[52,29189,77],{"class":58},[52,29191,29192,29194,29196],{"class":54,"line":80},[52,29193,83],{"class":58},[52,29195,29113],{"class":371},[52,29197,77],{"class":58},[52,29199,29200,29202,29204],{"class":54,"line":108},[52,29201,2213],{"class":58},[52,29203,2216],{"class":371},[52,29205,105],{"class":58},[52,29207,29208,29210,29212],{"class":54,"line":118},[52,29209,2230],{"class":58},[52,29211,29113],{"class":371},[52,29213,77],{"class":58},[52,29215,29216,29218,29220],{"class":54,"line":594},[52,29217,121],{"class":58},[52,29219,63],{"class":371},[52,29221,77],{"class":58},[43,29223,29224],{"className":2507,"code":29135,"language":2509,"meta":48,"style":48},[31,29225,29226,29234,29242,29250,29258],{"__ignoreMap":48},[52,29227,29228,29230,29232],{"class":54,"line":55},[52,29229,59],{"class":58},[52,29231,63],{"class":371},[52,29233,77],{"class":58},[52,29235,29236,29238,29240],{"class":54,"line":80},[52,29237,83],{"class":58},[52,29239,29113],{"class":371},[52,29241,77],{"class":58},[52,29243,29244,29246,29248],{"class":54,"line":108},[52,29245,2213],{"class":58},[52,29247,2216],{"class":371},[52,29249,105],{"class":58},[52,29251,29252,29254,29256],{"class":54,"line":118},[52,29253,2230],{"class":58},[52,29255,29113],{"class":371},[52,29257,77],{"class":58},[52,29259,29260,29262,29264],{"class":54,"line":594},[52,29261,121],{"class":58},[52,29263,63],{"class":371},[52,29265,77],{"class":58},[43,29267,29268],{"className":419,"code":29135,"language":420,"meta":48,"style":48},[31,29269,29270,29278,29286,29294,29302],{"__ignoreMap":48},[52,29271,29272,29274,29276],{"class":54,"line":55},[52,29273,59],{"class":58},[52,29275,63],{"class":371},[52,29277,77],{"class":58},[52,29279,29280,29282,29284],{"class":54,"line":80},[52,29281,83],{"class":58},[52,29283,29113],{"class":371},[52,29285,77],{"class":58},[52,29287,29288,29290,29292],{"class":54,"line":108},[52,29289,2213],{"class":58},[52,29291,2216],{"class":371},[52,29293,105],{"class":58},[52,29295,29296,29298,29300],{"class":54,"line":118},[52,29297,2230],{"class":58},[52,29299,29113],{"class":371},[52,29301,77],{"class":58},[52,29303,29304,29306,29308],{"class":54,"line":594},[52,29305,121],{"class":58},[52,29307,63],{"class":371},[52,29309,77],{"class":58},[43,29311,29313],{"className":222,"code":29312,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CRTScreen', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,29314,29315,29325,29329,29343,29347,29356,29364,29368,29372],{"__ignoreMap":48},[52,29316,29317,29319,29321,29323],{"class":54,"line":55},[52,29318,232],{"class":231},[52,29320,9231],{"class":58},[52,29322,238],{"class":231},[52,29324,9236],{"class":73},[52,29326,29327],{"class":54,"line":80},[52,29328,597],{"emptyLinePlaceholder":171},[52,29330,29331,29333,29335,29337,29339,29341],{"class":54,"line":108},[52,29332,1721],{"class":231},[52,29334,1724],{"class":371},[52,29336,1727],{"class":231},[52,29338,1730],{"class":231},[52,29340,1733],{"class":66},[52,29342,1736],{"class":58},[52,29344,29345],{"class":54,"line":118},[52,29346,1751],{"class":58},[52,29348,29349,29351,29354],{"class":54,"line":594},[52,29350,1756],{"class":58},[52,29352,29353],{"class":73},"'CRTScreen'",[52,29355,4722],{"class":58},[52,29357,29358,29360,29362],{"class":54,"line":600},[52,29359,4727],{"class":58},[52,29361,2869],{"class":73},[52,29363,2129],{"class":58},[52,29365,29366],{"class":54,"line":606},[52,29367,4744],{"class":58},[52,29369,29370],{"class":54,"line":653},[52,29371,1773],{"class":58},[52,29373,29374],{"class":54,"line":662},[52,29375,1778],{"class":58},[156,29377,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29379},[29380,29381],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/crtscreen",{"title":29113,"description":29121},"docs/components/CRTScreen","E-6apNyHmZOBN1z0fVUFIxyFU2b6kQySy9hWPxTpGj4",{"id":29388,"title":29389,"body":29390,"category":27225,"componentType":20848,"description":29397,"extension":168,"meta":29658,"navigation":171,"path":29659,"requiresChild":171,"seo":29660,"stem":29661,"__hash__":29662},"components/docs/components/ChannelBlur.md","ChannelBlur",{"type":8,"value":29391,"toc":29654},[29392,29395,29398,29400,29402,29405,29407,29652],[11,29393,29389],{"id":29394},"channelblur",[15,29396,29397],{},"Independent blur for red, green, and blue channels",[26901,29399],{"component":29389},[23,29401,26905],{"id":21503},[26907,29403],{":props":29404},"[{\"name\":\"redIntensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Blur intensity for red channel\"},{\"name\":\"greenIntensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Blur intensity for green channel\"},{\"name\":\"blueIntensity\",\"type\":\"number\",\"default\":\"40\",\"description\":\"Blur intensity for blue channel\"}]",[23,29406,26913],{"id":26912},[217,29408,29409,29454,29498,29542,29586],{":tabs":1543},[43,29410,29412],{"className":45,"code":29411,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChannelBlur>\n \u003CCircle />\n \u003C/ChannelBlur>\n\u003C/Shader>\n",[31,29413,29414,29422,29430,29438,29446],{"__ignoreMap":48},[52,29415,29416,29418,29420],{"class":54,"line":55},[52,29417,59],{"class":58},[52,29419,63],{"class":62},[52,29421,77],{"class":58},[52,29423,29424,29426,29428],{"class":54,"line":80},[52,29425,83],{"class":58},[52,29427,29389],{"class":62},[52,29429,77],{"class":58},[52,29431,29432,29434,29436],{"class":54,"line":108},[52,29433,2213],{"class":58},[52,29435,2216],{"class":62},[52,29437,105],{"class":58},[52,29439,29440,29442,29444],{"class":54,"line":118},[52,29441,2230],{"class":58},[52,29443,29389],{"class":62},[52,29445,77],{"class":58},[52,29447,29448,29450,29452],{"class":54,"line":594},[52,29449,121],{"class":58},[52,29451,63],{"class":62},[52,29453,77],{"class":58},[43,29455,29456],{"className":360,"code":29411,"language":362,"meta":48,"style":48},[31,29457,29458,29466,29474,29482,29490],{"__ignoreMap":48},[52,29459,29460,29462,29464],{"class":54,"line":55},[52,29461,59],{"class":58},[52,29463,63],{"class":371},[52,29465,77],{"class":58},[52,29467,29468,29470,29472],{"class":54,"line":80},[52,29469,83],{"class":58},[52,29471,29389],{"class":371},[52,29473,77],{"class":58},[52,29475,29476,29478,29480],{"class":54,"line":108},[52,29477,2213],{"class":58},[52,29479,2216],{"class":371},[52,29481,105],{"class":58},[52,29483,29484,29486,29488],{"class":54,"line":118},[52,29485,2230],{"class":58},[52,29487,29389],{"class":371},[52,29489,77],{"class":58},[52,29491,29492,29494,29496],{"class":54,"line":594},[52,29493,121],{"class":58},[52,29495,63],{"class":371},[52,29497,77],{"class":58},[43,29499,29500],{"className":2507,"code":29411,"language":2509,"meta":48,"style":48},[31,29501,29502,29510,29518,29526,29534],{"__ignoreMap":48},[52,29503,29504,29506,29508],{"class":54,"line":55},[52,29505,59],{"class":58},[52,29507,63],{"class":371},[52,29509,77],{"class":58},[52,29511,29512,29514,29516],{"class":54,"line":80},[52,29513,83],{"class":58},[52,29515,29389],{"class":371},[52,29517,77],{"class":58},[52,29519,29520,29522,29524],{"class":54,"line":108},[52,29521,2213],{"class":58},[52,29523,2216],{"class":371},[52,29525,105],{"class":58},[52,29527,29528,29530,29532],{"class":54,"line":118},[52,29529,2230],{"class":58},[52,29531,29389],{"class":371},[52,29533,77],{"class":58},[52,29535,29536,29538,29540],{"class":54,"line":594},[52,29537,121],{"class":58},[52,29539,63],{"class":371},[52,29541,77],{"class":58},[43,29543,29544],{"className":419,"code":29411,"language":420,"meta":48,"style":48},[31,29545,29546,29554,29562,29570,29578],{"__ignoreMap":48},[52,29547,29548,29550,29552],{"class":54,"line":55},[52,29549,59],{"class":58},[52,29551,63],{"class":371},[52,29553,77],{"class":58},[52,29555,29556,29558,29560],{"class":54,"line":80},[52,29557,83],{"class":58},[52,29559,29389],{"class":371},[52,29561,77],{"class":58},[52,29563,29564,29566,29568],{"class":54,"line":108},[52,29565,2213],{"class":58},[52,29567,2216],{"class":371},[52,29569,105],{"class":58},[52,29571,29572,29574,29576],{"class":54,"line":118},[52,29573,2230],{"class":58},[52,29575,29389],{"class":371},[52,29577,77],{"class":58},[52,29579,29580,29582,29584],{"class":54,"line":594},[52,29581,121],{"class":58},[52,29583,63],{"class":371},[52,29585,77],{"class":58},[43,29587,29589],{"className":222,"code":29588,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChannelBlur', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,29590,29591,29601,29605,29619,29623,29632,29640,29644,29648],{"__ignoreMap":48},[52,29592,29593,29595,29597,29599],{"class":54,"line":55},[52,29594,232],{"class":231},[52,29596,9231],{"class":58},[52,29598,238],{"class":231},[52,29600,9236],{"class":73},[52,29602,29603],{"class":54,"line":80},[52,29604,597],{"emptyLinePlaceholder":171},[52,29606,29607,29609,29611,29613,29615,29617],{"class":54,"line":108},[52,29608,1721],{"class":231},[52,29610,1724],{"class":371},[52,29612,1727],{"class":231},[52,29614,1730],{"class":231},[52,29616,1733],{"class":66},[52,29618,1736],{"class":58},[52,29620,29621],{"class":54,"line":118},[52,29622,1751],{"class":58},[52,29624,29625,29627,29630],{"class":54,"line":594},[52,29626,1756],{"class":58},[52,29628,29629],{"class":73},"'ChannelBlur'",[52,29631,4722],{"class":58},[52,29633,29634,29636,29638],{"class":54,"line":600},[52,29635,4727],{"class":58},[52,29637,2869],{"class":73},[52,29639,2129],{"class":58},[52,29641,29642],{"class":54,"line":606},[52,29643,4744],{"class":58},[52,29645,29646],{"class":54,"line":653},[52,29647,1773],{"class":58},[52,29649,29650],{"class":54,"line":662},[52,29651,1778],{"class":58},[156,29653,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29655},[29656,29657],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/channelblur",{"title":29389,"description":29397},"docs/components/ChannelBlur","R47XNf_VdfgwURUqhpP8UQWcsGmu0YoHlT_LNRl5liw",{"id":29664,"title":29665,"body":29666,"category":27760,"componentType":20842,"description":29673,"extension":168,"meta":29857,"navigation":171,"path":29858,"requiresChild":27763,"seo":29859,"stem":29860,"__hash__":29861},"components/docs/components/Checkerboard.md","Checkerboard",{"type":8,"value":29667,"toc":29853},[29668,29671,29674,29676,29678,29681,29683,29851],[11,29669,29665],{"id":29670},"checkerboard",[15,29672,29673],{},"Classic checkerboard pattern with two alternating colors",[26901,29675],{"component":29665},[23,29677,26905],{"id":21503},[26907,29679],{":props":29680},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#cccccc\",\"description\":\"First color of the checkerboard pattern\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#999999\",\"description\":\"Second color of the checkerboard pattern\"},{\"name\":\"cells\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of cells along the shortest canvas edge (creates square cells)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Smoothness of the transition between colors (0 = hard edges, 1 = very soft)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,29682,26913],{"id":26912},[217,29684,29685,29714,29742,29770,29798],{":tabs":1543},[43,29686,29688],{"className":45,"code":29687,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCheckerboard />\n\u003C/Shader>\n",[31,29689,29690,29698,29706],{"__ignoreMap":48},[52,29691,29692,29694,29696],{"class":54,"line":55},[52,29693,59],{"class":58},[52,29695,63],{"class":62},[52,29697,77],{"class":58},[52,29699,29700,29702,29704],{"class":54,"line":80},[52,29701,83],{"class":58},[52,29703,29665],{"class":62},[52,29705,105],{"class":58},[52,29707,29708,29710,29712],{"class":54,"line":108},[52,29709,121],{"class":58},[52,29711,63],{"class":62},[52,29713,77],{"class":58},[43,29715,29716],{"className":360,"code":29687,"language":362,"meta":48,"style":48},[31,29717,29718,29726,29734],{"__ignoreMap":48},[52,29719,29720,29722,29724],{"class":54,"line":55},[52,29721,59],{"class":58},[52,29723,63],{"class":371},[52,29725,77],{"class":58},[52,29727,29728,29730,29732],{"class":54,"line":80},[52,29729,83],{"class":58},[52,29731,29665],{"class":371},[52,29733,105],{"class":58},[52,29735,29736,29738,29740],{"class":54,"line":108},[52,29737,121],{"class":58},[52,29739,63],{"class":371},[52,29741,77],{"class":58},[43,29743,29744],{"className":2507,"code":29687,"language":2509,"meta":48,"style":48},[31,29745,29746,29754,29762],{"__ignoreMap":48},[52,29747,29748,29750,29752],{"class":54,"line":55},[52,29749,59],{"class":58},[52,29751,63],{"class":371},[52,29753,77],{"class":58},[52,29755,29756,29758,29760],{"class":54,"line":80},[52,29757,83],{"class":58},[52,29759,29665],{"class":371},[52,29761,105],{"class":58},[52,29763,29764,29766,29768],{"class":54,"line":108},[52,29765,121],{"class":58},[52,29767,63],{"class":371},[52,29769,77],{"class":58},[43,29771,29772],{"className":419,"code":29687,"language":420,"meta":48,"style":48},[31,29773,29774,29782,29790],{"__ignoreMap":48},[52,29775,29776,29778,29780],{"class":54,"line":55},[52,29777,59],{"class":58},[52,29779,63],{"class":371},[52,29781,77],{"class":58},[52,29783,29784,29786,29788],{"class":54,"line":80},[52,29785,83],{"class":58},[52,29787,29665],{"class":371},[52,29789,105],{"class":58},[52,29791,29792,29794,29796],{"class":54,"line":108},[52,29793,121],{"class":58},[52,29795,63],{"class":371},[52,29797,77],{"class":58},[43,29799,29801],{"className":222,"code":29800,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Checkerboard', props: {} }\n ]\n})\n",[31,29802,29803,29813,29817,29831,29835,29843,29847],{"__ignoreMap":48},[52,29804,29805,29807,29809,29811],{"class":54,"line":55},[52,29806,232],{"class":231},[52,29808,9231],{"class":58},[52,29810,238],{"class":231},[52,29812,9236],{"class":73},[52,29814,29815],{"class":54,"line":80},[52,29816,597],{"emptyLinePlaceholder":171},[52,29818,29819,29821,29823,29825,29827,29829],{"class":54,"line":108},[52,29820,1721],{"class":231},[52,29822,1724],{"class":371},[52,29824,1727],{"class":231},[52,29826,1730],{"class":231},[52,29828,1733],{"class":66},[52,29830,1736],{"class":58},[52,29832,29833],{"class":54,"line":118},[52,29834,1751],{"class":58},[52,29836,29837,29839,29841],{"class":54,"line":594},[52,29838,1756],{"class":58},[52,29840,7875],{"class":73},[52,29842,2129],{"class":58},[52,29844,29845],{"class":54,"line":600},[52,29846,1773],{"class":58},[52,29848,29849],{"class":54,"line":606},[52,29850,1778],{"class":58},[156,29852,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":29854},[29855,29856],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/checkerboard",{"title":29665,"description":29673},"docs/components/Checkerboard","xWgOFlPxz08f5-WceoXS-EG20wY1632N5T-U9eHKWKo",{"id":29863,"title":29864,"body":29865,"category":30161,"componentType":20842,"description":29872,"extension":168,"meta":30162,"navigation":171,"path":30163,"requiresChild":27763,"seo":30164,"stem":30165,"__hash__":30166},"components/docs/components/ChromaFlow.md","ChromaFlow",{"type":8,"value":29866,"toc":30157},[29867,29870,29873,29875,29877,29880,29882,30155],[11,29868,29864],{"id":29869},"chromaflow",[15,29871,29872],{},"Interactive liquid flow effect that follows your cursor",[26901,29874],{"component":29864},[23,29876,26905],{"id":21503},[26907,29878],{":props":29879},"[{\"name\":\"baseColor\",\"type\":\"string\",\"default\":\"#0066ff\",\"description\":\"Base liquid color\"},{\"name\":\"upColor\",\"type\":\"string\",\"default\":\"#00ff00\",\"description\":\"Color for upward movement\"},{\"name\":\"downColor\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"Color for downward movement\"},{\"name\":\"leftColor\",\"type\":\"string\",\"default\":\"#0000ff\",\"description\":\"Color for leftward movement\"},{\"name\":\"rightColor\",\"type\":\"string\",\"default\":\"#ffff00\",\"description\":\"Color for rightward movement\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Strength of the liquid effect\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Radius of the liquid effect\"},{\"name\":\"momentum\",\"type\":\"number\",\"default\":\"30\",\"description\":\"How much momentum colors retain in their flow direction\"}]",[23,29881,26913],{"id":26912},[217,29883,29884,29933,29989,30039,30093],{":tabs":1543},[43,29885,29887],{"className":45,"code":29886,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n :intensity=\"1\"\n :radius=\"3\"\n />\n\u003C/Shader>\n",[31,29888,29889,29897,29904,29912,29921,29925],{"__ignoreMap":48},[52,29890,29891,29893,29895],{"class":54,"line":55},[52,29892,59],{"class":58},[52,29894,63],{"class":62},[52,29896,77],{"class":58},[52,29898,29899,29901],{"class":54,"line":80},[52,29900,83],{"class":58},[52,29902,29903],{"class":62},"ChromaFlow\n",[52,29905,29906,29908,29910],{"class":54,"line":108},[52,29907,17870],{"class":66},[52,29909,70],{"class":58},[52,29911,28827],{"class":73},[52,29913,29914,29916,29918],{"class":54,"line":118},[52,29915,14901],{"class":66},[52,29917,70],{"class":58},[52,29919,29920],{"class":73},"\"3\"\n",[52,29922,29923],{"class":54,"line":594},[52,29924,1224],{"class":58},[52,29926,29927,29929,29931],{"class":54,"line":600},[52,29928,121],{"class":58},[52,29930,63],{"class":62},[52,29932,77],{"class":58},[43,29934,29936],{"className":360,"code":29935,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CChromaFlow\n intensity={1}\n radius={3}\n />\n\u003C/Shader>\n",[31,29937,29938,29946,29952,29964,29977,29981],{"__ignoreMap":48},[52,29939,29940,29942,29944],{"class":54,"line":55},[52,29941,59],{"class":58},[52,29943,63],{"class":371},[52,29945,77],{"class":58},[52,29947,29948,29950],{"class":54,"line":80},[52,29949,83],{"class":58},[52,29951,29903],{"class":371},[52,29953,29954,29956,29958,29960,29962],{"class":54,"line":108},[52,29955,17981],{"class":66},[52,29957,70],{"class":231},[52,29959,723],{"class":58},[52,29961,6391],{"class":371},[52,29963,729],{"class":58},[52,29965,29966,29968,29970,29972,29975],{"class":54,"line":118},[52,29967,7361],{"class":66},[52,29969,70],{"class":231},[52,29971,723],{"class":58},[52,29973,29974],{"class":371},"3",[52,29976,729],{"class":58},[52,29978,29979],{"class":54,"line":594},[52,29980,1224],{"class":58},[52,29982,29983,29985,29987],{"class":54,"line":600},[52,29984,121],{"class":58},[52,29986,63],{"class":371},[52,29988,77],{"class":58},[43,29990,29991],{"className":2507,"code":29935,"language":2509,"meta":48,"style":48},[31,29992,29993,30001,30007,30017,30027,30031],{"__ignoreMap":48},[52,29994,29995,29997,29999],{"class":54,"line":55},[52,29996,59],{"class":58},[52,29998,63],{"class":371},[52,30000,77],{"class":58},[52,30002,30003,30005],{"class":54,"line":80},[52,30004,83],{"class":58},[52,30006,29903],{"class":371},[52,30008,30009,30011,30013,30015],{"class":54,"line":108},[52,30010,17981],{"class":66},[52,30012,24845],{"class":58},[52,30014,6391],{"class":371},[52,30016,729],{"class":58},[52,30018,30019,30021,30023,30025],{"class":54,"line":118},[52,30020,7361],{"class":66},[52,30022,24845],{"class":58},[52,30024,29974],{"class":371},[52,30026,729],{"class":58},[52,30028,30029],{"class":54,"line":594},[52,30030,1224],{"class":58},[52,30032,30033,30035,30037],{"class":54,"line":600},[52,30034,121],{"class":58},[52,30036,63],{"class":371},[52,30038,77],{"class":58},[43,30040,30041],{"className":419,"code":29935,"language":420,"meta":48,"style":48},[31,30042,30043,30051,30057,30069,30081,30085],{"__ignoreMap":48},[52,30044,30045,30047,30049],{"class":54,"line":55},[52,30046,59],{"class":58},[52,30048,63],{"class":371},[52,30050,77],{"class":58},[52,30052,30053,30055],{"class":54,"line":80},[52,30054,83],{"class":58},[52,30056,29903],{"class":371},[52,30058,30059,30061,30063,30065,30067],{"class":54,"line":108},[52,30060,17981],{"class":66},[52,30062,70],{"class":231},[52,30064,723],{"class":58},[52,30066,6391],{"class":371},[52,30068,729],{"class":58},[52,30070,30071,30073,30075,30077,30079],{"class":54,"line":118},[52,30072,7361],{"class":66},[52,30074,70],{"class":231},[52,30076,723],{"class":58},[52,30078,29974],{"class":371},[52,30080,729],{"class":58},[52,30082,30083],{"class":54,"line":594},[52,30084,1224],{"class":58},[52,30086,30087,30089,30091],{"class":54,"line":600},[52,30088,121],{"class":58},[52,30090,63],{"class":371},[52,30092,77],{"class":58},[43,30094,30096],{"className":222,"code":30095,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaFlow', props: { intensity: 1, radius: 3 } }\n ]\n})\n",[31,30097,30098,30108,30112,30126,30130,30147,30151],{"__ignoreMap":48},[52,30099,30100,30102,30104,30106],{"class":54,"line":55},[52,30101,232],{"class":231},[52,30103,9231],{"class":58},[52,30105,238],{"class":231},[52,30107,9236],{"class":73},[52,30109,30110],{"class":54,"line":80},[52,30111,597],{"emptyLinePlaceholder":171},[52,30113,30114,30116,30118,30120,30122,30124],{"class":54,"line":108},[52,30115,1721],{"class":231},[52,30117,1724],{"class":371},[52,30119,1727],{"class":231},[52,30121,1730],{"class":231},[52,30123,1733],{"class":66},[52,30125,1736],{"class":58},[52,30127,30128],{"class":54,"line":118},[52,30129,1751],{"class":58},[52,30131,30132,30134,30137,30139,30141,30143,30145],{"class":54,"line":594},[52,30133,1756],{"class":58},[52,30135,30136],{"class":73},"'ChromaFlow'",[52,30138,27194],{"class":58},[52,30140,6391],{"class":371},[52,30142,4278],{"class":58},[52,30144,29974],{"class":371},[52,30146,1768],{"class":58},[52,30148,30149],{"class":54,"line":600},[52,30150,1773],{"class":58},[52,30152,30153],{"class":54,"line":606},[52,30154,1778],{"class":58},[156,30156,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30158},[30159,30160],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Interactive",{},"/docs/components/chromaflow",{"title":29864,"description":29872},"docs/components/ChromaFlow","yuQ13t27cRIy4fZRfYXg3RF3mXUrccIThDlYVni1bHI",{"id":30168,"title":30169,"body":30170,"category":27503,"componentType":20848,"description":30177,"extension":168,"meta":30438,"navigation":171,"path":30439,"requiresChild":171,"seo":30440,"stem":30441,"__hash__":30442},"components/docs/components/ChromaticAberration.md","ChromaticAberration",{"type":8,"value":30171,"toc":30434},[30172,30175,30178,30180,30182,30185,30187,30432],[11,30173,30169],{"id":30174},"chromaticaberration",[15,30176,30177],{},"Separate RGB channels for a prismatic distortion effect",[26901,30179],{"component":30169},[23,30181,26905],{"id":21503},[26907,30183],{":props":30184},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Overall strength of the chromatic aberration effect\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Direction of the chromatic aberration in degrees\"},{\"name\":\"redOffset\",\"type\":\"number\",\"default\":\"-1\",\"description\":\"Red channel offset multiplier\"},{\"name\":\"greenOffset\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Green channel offset multiplier\"},{\"name\":\"blueOffset\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Blue channel offset multiplier\"}]",[23,30186,26913],{"id":26912},[217,30188,30189,30234,30278,30322,30366],{":tabs":1543},[43,30190,30192],{"className":45,"code":30191,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CChromaticAberration>\n \u003CCircle />\n \u003C/ChromaticAberration>\n\u003C/Shader>\n",[31,30193,30194,30202,30210,30218,30226],{"__ignoreMap":48},[52,30195,30196,30198,30200],{"class":54,"line":55},[52,30197,59],{"class":58},[52,30199,63],{"class":62},[52,30201,77],{"class":58},[52,30203,30204,30206,30208],{"class":54,"line":80},[52,30205,83],{"class":58},[52,30207,30169],{"class":62},[52,30209,77],{"class":58},[52,30211,30212,30214,30216],{"class":54,"line":108},[52,30213,2213],{"class":58},[52,30215,2216],{"class":62},[52,30217,105],{"class":58},[52,30219,30220,30222,30224],{"class":54,"line":118},[52,30221,2230],{"class":58},[52,30223,30169],{"class":62},[52,30225,77],{"class":58},[52,30227,30228,30230,30232],{"class":54,"line":594},[52,30229,121],{"class":58},[52,30231,63],{"class":62},[52,30233,77],{"class":58},[43,30235,30236],{"className":360,"code":30191,"language":362,"meta":48,"style":48},[31,30237,30238,30246,30254,30262,30270],{"__ignoreMap":48},[52,30239,30240,30242,30244],{"class":54,"line":55},[52,30241,59],{"class":58},[52,30243,63],{"class":371},[52,30245,77],{"class":58},[52,30247,30248,30250,30252],{"class":54,"line":80},[52,30249,83],{"class":58},[52,30251,30169],{"class":371},[52,30253,77],{"class":58},[52,30255,30256,30258,30260],{"class":54,"line":108},[52,30257,2213],{"class":58},[52,30259,2216],{"class":371},[52,30261,105],{"class":58},[52,30263,30264,30266,30268],{"class":54,"line":118},[52,30265,2230],{"class":58},[52,30267,30169],{"class":371},[52,30269,77],{"class":58},[52,30271,30272,30274,30276],{"class":54,"line":594},[52,30273,121],{"class":58},[52,30275,63],{"class":371},[52,30277,77],{"class":58},[43,30279,30280],{"className":2507,"code":30191,"language":2509,"meta":48,"style":48},[31,30281,30282,30290,30298,30306,30314],{"__ignoreMap":48},[52,30283,30284,30286,30288],{"class":54,"line":55},[52,30285,59],{"class":58},[52,30287,63],{"class":371},[52,30289,77],{"class":58},[52,30291,30292,30294,30296],{"class":54,"line":80},[52,30293,83],{"class":58},[52,30295,30169],{"class":371},[52,30297,77],{"class":58},[52,30299,30300,30302,30304],{"class":54,"line":108},[52,30301,2213],{"class":58},[52,30303,2216],{"class":371},[52,30305,105],{"class":58},[52,30307,30308,30310,30312],{"class":54,"line":118},[52,30309,2230],{"class":58},[52,30311,30169],{"class":371},[52,30313,77],{"class":58},[52,30315,30316,30318,30320],{"class":54,"line":594},[52,30317,121],{"class":58},[52,30319,63],{"class":371},[52,30321,77],{"class":58},[43,30323,30324],{"className":419,"code":30191,"language":420,"meta":48,"style":48},[31,30325,30326,30334,30342,30350,30358],{"__ignoreMap":48},[52,30327,30328,30330,30332],{"class":54,"line":55},[52,30329,59],{"class":58},[52,30331,63],{"class":371},[52,30333,77],{"class":58},[52,30335,30336,30338,30340],{"class":54,"line":80},[52,30337,83],{"class":58},[52,30339,30169],{"class":371},[52,30341,77],{"class":58},[52,30343,30344,30346,30348],{"class":54,"line":108},[52,30345,2213],{"class":58},[52,30347,2216],{"class":371},[52,30349,105],{"class":58},[52,30351,30352,30354,30356],{"class":54,"line":118},[52,30353,2230],{"class":58},[52,30355,30169],{"class":371},[52,30357,77],{"class":58},[52,30359,30360,30362,30364],{"class":54,"line":594},[52,30361,121],{"class":58},[52,30363,63],{"class":371},[52,30365,77],{"class":58},[43,30367,30369],{"className":222,"code":30368,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ChromaticAberration', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,30370,30371,30381,30385,30399,30403,30412,30420,30424,30428],{"__ignoreMap":48},[52,30372,30373,30375,30377,30379],{"class":54,"line":55},[52,30374,232],{"class":231},[52,30376,9231],{"class":58},[52,30378,238],{"class":231},[52,30380,9236],{"class":73},[52,30382,30383],{"class":54,"line":80},[52,30384,597],{"emptyLinePlaceholder":171},[52,30386,30387,30389,30391,30393,30395,30397],{"class":54,"line":108},[52,30388,1721],{"class":231},[52,30390,1724],{"class":371},[52,30392,1727],{"class":231},[52,30394,1730],{"class":231},[52,30396,1733],{"class":66},[52,30398,1736],{"class":58},[52,30400,30401],{"class":54,"line":118},[52,30402,1751],{"class":58},[52,30404,30405,30407,30410],{"class":54,"line":594},[52,30406,1756],{"class":58},[52,30408,30409],{"class":73},"'ChromaticAberration'",[52,30411,4722],{"class":58},[52,30413,30414,30416,30418],{"class":54,"line":600},[52,30415,4727],{"class":58},[52,30417,2869],{"class":73},[52,30419,2129],{"class":58},[52,30421,30422],{"class":54,"line":606},[52,30423,4744],{"class":58},[52,30425,30426],{"class":54,"line":653},[52,30427,1773],{"class":58},[52,30429,30430],{"class":54,"line":662},[52,30431,1778],{"class":58},[156,30433,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":30435},[30436,30437],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/chromaticaberration",{"title":30169,"description":30177},"docs/components/ChromaticAberration","H-cgfEEh578EwopaqkJ4BgIibyPPwpNit3QGOc74pKc",{"id":30444,"title":2216,"body":30445,"category":30727,"componentType":20842,"description":30452,"extension":168,"meta":30728,"navigation":171,"path":30729,"requiresChild":27763,"seo":30730,"stem":30731,"__hash__":30732},"components/docs/components/Circle.md",{"type":8,"value":30446,"toc":30723},[30447,30450,30453,30455,30457,30460,30462,30721],[11,30448,2216],{"id":30449},"circle",[15,30451,30452],{},"Generate a circle with adjustable size and softness",[26901,30454],{"component":2216},[23,30456,26905],{"id":21503},[26907,30458],{":props":30459},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the circle\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The radius of the circle. A value of one (1) is sets the circle to fit the canvas.\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"The center point of the circle\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The thickness of the stroke outline. Zero (0) means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"The color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the circle edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors in soft edges\"}]",[23,30461,26913],{"id":26912},[217,30463,30464,30511,30562,30610,30660],{":tabs":1543},[43,30465,30467],{"className":45,"code":30466,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,30468,30469,30477,30483,30491,30499,30503],{"__ignoreMap":48},[52,30470,30471,30473,30475],{"class":54,"line":55},[52,30472,59],{"class":58},[52,30474,63],{"class":62},[52,30476,77],{"class":58},[52,30478,30479,30481],{"class":54,"line":80},[52,30480,83],{"class":58},[52,30482,7346],{"class":62},[52,30484,30485,30487,30489],{"class":54,"line":108},[52,30486,7351],{"class":66},[52,30488,70],{"class":58},[52,30490,7307],{"class":73},[52,30492,30493,30495,30497],{"class":54,"line":118},[52,30494,14901],{"class":66},[52,30496,70],{"class":58},[52,30498,28827],{"class":73},[52,30500,30501],{"class":54,"line":594},[52,30502,1224],{"class":58},[52,30504,30505,30507,30509],{"class":54,"line":600},[52,30506,121],{"class":58},[52,30508,63],{"class":62},[52,30510,77],{"class":58},[43,30512,30514],{"className":360,"code":30513,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCircle\n color=\"#ffffff\"\n radius={1}\n />\n\u003C/Shader>\n",[31,30515,30516,30524,30530,30538,30550,30554],{"__ignoreMap":48},[52,30517,30518,30520,30522],{"class":54,"line":55},[52,30519,59],{"class":58},[52,30521,63],{"class":371},[52,30523,77],{"class":58},[52,30525,30526,30528],{"class":54,"line":80},[52,30527,83],{"class":58},[52,30529,7346],{"class":371},[52,30531,30532,30534,30536],{"class":54,"line":108},[52,30533,7351],{"class":66},[52,30535,70],{"class":231},[52,30537,7307],{"class":73},[52,30539,30540,30542,30544,30546,30548],{"class":54,"line":118},[52,30541,7361],{"class":66},[52,30543,70],{"class":231},[52,30545,723],{"class":58},[52,30547,6391],{"class":371},[52,30549,729],{"class":58},[52,30551,30552],{"class":54,"line":594},[52,30553,1224],{"class":58},[52,30555,30556,30558,30560],{"class":54,"line":600},[52,30557,121],{"class":58},[52,30559,63],{"class":371},[52,30561,77],{"class":58},[43,30563,30564],{"className":2507,"code":30513,"language":2509,"meta":48,"style":48},[31,30565,30566,30574,30580,30588,30598,30602],{"__ignoreMap":48},[52,30567,30568,30570,30572],{"class":54,"line":55},[52,30569,59],{"class":58},[52,30571,63],{"class":371},[52,30573,77],{"class":58},[52,30575,30576,30578],{"class":54,"line":80},[52,30577,83],{"class":58},[52,30579,7346],{"class":371},[52,30581,30582,30584,30586],{"class":54,"line":108},[52,30583,7351],{"class":66},[52,30585,70],{"class":58},[52,30587,7307],{"class":73},[52,30589,30590,30592,30594,30596],{"class":54,"line":118},[52,30591,7361],{"class":66},[52,30593,24845],{"class":58},[52,30595,6391],{"class":371},[52,30597,729],{"class":58},[52,30599,30600],{"class":54,"line":594},[52,30601,1224],{"class":58},[52,30603,30604,30606,30608],{"class":54,"line":600},[52,30605,121],{"class":58},[52,30607,63],{"class":371},[52,30609,77],{"class":58},[43,30611,30612],{"className":419,"code":30513,"language":420,"meta":48,"style":48},[31,30613,30614,30622,30628,30636,30648,30652],{"__ignoreMap":48},[52,30615,30616,30618,30620],{"class":54,"line":55},[52,30617,59],{"class":58},[52,30619,63],{"class":371},[52,30621,77],{"class":58},[52,30623,30624,30626],{"class":54,"line":80},[52,30625,83],{"class":58},[52,30627,7346],{"class":371},[52,30629,30630,30632,30634],{"class":54,"line":108},[52,30631,7351],{"class":66},[52,30633,70],{"class":231},[52,30635,7307],{"class":73},[52,30637,30638,30640,30642,30644,30646],{"class":54,"line":118},[52,30639,7361],{"class":66},[52,30641,70],{"class":231},[52,30643,723],{"class":58},[52,30645,6391],{"class":371},[52,30647,729],{"class":58},[52,30649,30650],{"class":54,"line":594},[52,30651,1224],{"class":58},[52,30653,30654,30656,30658],{"class":54,"line":600},[52,30655,121],{"class":58},[52,30657,63],{"class":371},[52,30659,77],{"class":58},[43,30661,30663],{"className":222,"code":30662,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Circle', props: { color: '#ffffff', radius: 1 } }\n ]\n})\n",[31,30664,30665,30675,30679,30693,30697,30713,30717],{"__ignoreMap":48},[52,30666,30667,30669,30671,30673],{"class":54,"line":55},[52,30668,232],{"class":231},[52,30670,9231],{"class":58},[52,30672,238],{"class":231},[52,30674,9236],{"class":73},[52,30676,30677],{"class":54,"line":80},[52,30678,597],{"emptyLinePlaceholder":171},[52,30680,30681,30683,30685,30687,30689,30691],{"class":54,"line":108},[52,30682,1721],{"class":231},[52,30684,1724],{"class":371},[52,30686,1727],{"class":231},[52,30688,1730],{"class":231},[52,30690,1733],{"class":66},[52,30692,1736],{"class":58},[52,30694,30695],{"class":54,"line":118},[52,30696,1751],{"class":58},[52,30698,30699,30701,30703,30705,30707,30709,30711],{"class":54,"line":594},[52,30700,1756],{"class":58},[52,30702,2869],{"class":73},[52,30704,1762],{"class":58},[52,30706,7886],{"class":73},[52,30708,4278],{"class":58},[52,30710,6391],{"class":371},[52,30712,1768],{"class":58},[52,30714,30715],{"class":54,"line":600},[52,30716,1773],{"class":58},[52,30718,30719],{"class":54,"line":606},[52,30720,1778],{"class":58},[156,30722,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":30724},[30725,30726],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Shapes",{},"/docs/components/circle",{"title":2216,"description":30452},"docs/components/Circle","6IkEAtPpkShaYl4sjatYzEXoZbaTyrMxJZqPHqQVqW4",{"id":30734,"title":30735,"body":30736,"category":29105,"componentType":20848,"description":30743,"extension":168,"meta":31060,"navigation":171,"path":31061,"requiresChild":171,"seo":31062,"stem":31063,"__hash__":31064},"components/docs/components/ConcentricSpin.md","ConcentricSpin",{"type":8,"value":30737,"toc":31056},[30738,30741,30744,30746,30748,30751,30753,31054],[11,30739,30735],{"id":30740},"concentricspin",[15,30742,30743],{},"Concentric rings that each rotate the underlying image by different amounts",[26901,30745],{"component":30735},[23,30747,26905],{"id":21503},[26907,30749],{":props":30750},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"20\",\"description\":\"Maximum rotation angle per ring\"},{\"name\":\"rings\",\"type\":\"number\",\"default\":\"8\",\"description\":\"Number of concentric rings\"},{\"name\":\"smoothness\",\"type\":\"number\",\"default\":\"0.03\",\"description\":\"Softness of transitions between rings\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Randomization seed for per-ring rotation variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"Speed of continuous ring rotation\"},{\"name\":\"speedRandomness\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How much each ring varies in rotation speed and direction\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the concentric rings\"}]",[23,30752,26913],{"id":26912},[217,30754,30755,30811,30870,30926,30984],{":tabs":1543},[43,30756,30758],{"className":45,"code":30757,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n :intensity=\"20\"\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,30759,30760,30768,30775,30783,30787,30795,30803],{"__ignoreMap":48},[52,30761,30762,30764,30766],{"class":54,"line":55},[52,30763,59],{"class":58},[52,30765,63],{"class":62},[52,30767,77],{"class":58},[52,30769,30770,30772],{"class":54,"line":80},[52,30771,83],{"class":58},[52,30773,30774],{"class":62},"ConcentricSpin\n",[52,30776,30777,30779,30781],{"class":54,"line":108},[52,30778,17870],{"class":66},[52,30780,70],{"class":58},[52,30782,26944],{"class":73},[52,30784,30785],{"class":54,"line":118},[52,30786,26949],{"class":58},[52,30788,30789,30791,30793],{"class":54,"line":594},[52,30790,2213],{"class":58},[52,30792,2216],{"class":62},[52,30794,105],{"class":58},[52,30796,30797,30799,30801],{"class":54,"line":600},[52,30798,2230],{"class":58},[52,30800,30735],{"class":62},[52,30802,77],{"class":58},[52,30804,30805,30807,30809],{"class":54,"line":606},[52,30806,121],{"class":58},[52,30808,63],{"class":62},[52,30810,77],{"class":58},[43,30812,30814],{"className":360,"code":30813,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CConcentricSpin\n intensity={20}\n >\n \u003CCircle />\n \u003C/ConcentricSpin>\n\u003C/Shader>\n",[31,30815,30816,30824,30830,30842,30846,30854,30862],{"__ignoreMap":48},[52,30817,30818,30820,30822],{"class":54,"line":55},[52,30819,59],{"class":58},[52,30821,63],{"class":371},[52,30823,77],{"class":58},[52,30825,30826,30828],{"class":54,"line":80},[52,30827,83],{"class":58},[52,30829,30774],{"class":371},[52,30831,30832,30834,30836,30838,30840],{"class":54,"line":108},[52,30833,17981],{"class":66},[52,30835,70],{"class":231},[52,30837,723],{"class":58},[52,30839,27003],{"class":371},[52,30841,729],{"class":58},[52,30843,30844],{"class":54,"line":118},[52,30845,26949],{"class":58},[52,30847,30848,30850,30852],{"class":54,"line":594},[52,30849,2213],{"class":58},[52,30851,2216],{"class":371},[52,30853,105],{"class":58},[52,30855,30856,30858,30860],{"class":54,"line":600},[52,30857,2230],{"class":58},[52,30859,30735],{"class":371},[52,30861,77],{"class":58},[52,30863,30864,30866,30868],{"class":54,"line":606},[52,30865,121],{"class":58},[52,30867,63],{"class":371},[52,30869,77],{"class":58},[43,30871,30872],{"className":2507,"code":30813,"language":2509,"meta":48,"style":48},[31,30873,30874,30882,30888,30898,30902,30910,30918],{"__ignoreMap":48},[52,30875,30876,30878,30880],{"class":54,"line":55},[52,30877,59],{"class":58},[52,30879,63],{"class":371},[52,30881,77],{"class":58},[52,30883,30884,30886],{"class":54,"line":80},[52,30885,83],{"class":58},[52,30887,30774],{"class":371},[52,30889,30890,30892,30894,30896],{"class":54,"line":108},[52,30891,17981],{"class":66},[52,30893,24845],{"class":58},[52,30895,27003],{"class":371},[52,30897,729],{"class":58},[52,30899,30900],{"class":54,"line":118},[52,30901,26949],{"class":58},[52,30903,30904,30906,30908],{"class":54,"line":594},[52,30905,2213],{"class":58},[52,30907,2216],{"class":371},[52,30909,105],{"class":58},[52,30911,30912,30914,30916],{"class":54,"line":600},[52,30913,2230],{"class":58},[52,30915,30735],{"class":371},[52,30917,77],{"class":58},[52,30919,30920,30922,30924],{"class":54,"line":606},[52,30921,121],{"class":58},[52,30923,63],{"class":371},[52,30925,77],{"class":58},[43,30927,30928],{"className":419,"code":30813,"language":420,"meta":48,"style":48},[31,30929,30930,30938,30944,30956,30960,30968,30976],{"__ignoreMap":48},[52,30931,30932,30934,30936],{"class":54,"line":55},[52,30933,59],{"class":58},[52,30935,63],{"class":371},[52,30937,77],{"class":58},[52,30939,30940,30942],{"class":54,"line":80},[52,30941,83],{"class":58},[52,30943,30774],{"class":371},[52,30945,30946,30948,30950,30952,30954],{"class":54,"line":108},[52,30947,17981],{"class":66},[52,30949,70],{"class":231},[52,30951,723],{"class":58},[52,30953,27003],{"class":371},[52,30955,729],{"class":58},[52,30957,30958],{"class":54,"line":118},[52,30959,26949],{"class":58},[52,30961,30962,30964,30966],{"class":54,"line":594},[52,30963,2213],{"class":58},[52,30965,2216],{"class":371},[52,30967,105],{"class":58},[52,30969,30970,30972,30974],{"class":54,"line":600},[52,30971,2230],{"class":58},[52,30973,30735],{"class":371},[52,30975,77],{"class":58},[52,30977,30978,30980,30982],{"class":54,"line":606},[52,30979,121],{"class":58},[52,30981,63],{"class":371},[52,30983,77],{"class":58},[43,30985,30987],{"className":222,"code":30986,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConcentricSpin', props: { intensity: 20 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,30988,30989,30999,31003,31017,31021,31034,31042,31046,31050],{"__ignoreMap":48},[52,30990,30991,30993,30995,30997],{"class":54,"line":55},[52,30992,232],{"class":231},[52,30994,9231],{"class":58},[52,30996,238],{"class":231},[52,30998,9236],{"class":73},[52,31000,31001],{"class":54,"line":80},[52,31002,597],{"emptyLinePlaceholder":171},[52,31004,31005,31007,31009,31011,31013,31015],{"class":54,"line":108},[52,31006,1721],{"class":231},[52,31008,1724],{"class":371},[52,31010,1727],{"class":231},[52,31012,1730],{"class":231},[52,31014,1733],{"class":66},[52,31016,1736],{"class":58},[52,31018,31019],{"class":54,"line":118},[52,31020,1751],{"class":58},[52,31022,31023,31025,31028,31030,31032],{"class":54,"line":594},[52,31024,1756],{"class":58},[52,31026,31027],{"class":73},"'ConcentricSpin'",[52,31029,27194],{"class":58},[52,31031,27003],{"class":371},[52,31033,5259],{"class":58},[52,31035,31036,31038,31040],{"class":54,"line":600},[52,31037,4727],{"class":58},[52,31039,2869],{"class":73},[52,31041,2129],{"class":58},[52,31043,31044],{"class":54,"line":606},[52,31045,4744],{"class":58},[52,31047,31048],{"class":54,"line":653},[52,31049,1773],{"class":58},[52,31051,31052],{"class":54,"line":662},[52,31053,1778],{"class":58},[156,31055,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31057},[31058,31059],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/concentricspin",{"title":30735,"description":30743},"docs/components/ConcentricSpin","LlZQ77Lnd28tAPHY-6KyfUxoiSMpTG1-uKOrPlZegQA",{"id":31066,"title":31067,"body":31068,"category":27760,"componentType":20842,"description":31075,"extension":168,"meta":31260,"navigation":171,"path":31261,"requiresChild":27763,"seo":31262,"stem":31263,"__hash__":31264},"components/docs/components/ConicGradient.md","ConicGradient",{"type":8,"value":31069,"toc":31256},[31070,31073,31076,31078,31080,31083,31085,31254],[11,31071,31067],{"id":31072},"conicgradient",[15,31074,31075],{},"Colors sweep in a full circle around a center point, like a color wheel",[26901,31077],{"component":31067},[23,31079,26905],{"id":21503},[26907,31081],{":props":31082},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#FF0080\",\"description\":\"Starting color of the sweep\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#00BFFF\",\"description\":\"Ending color of the sweep (wraps back to Color A)\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the sweep\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation offset in degrees — shifts where Color A begins\"},{\"name\":\"repeat\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of times the gradient repeats around the circle. Values above 1 create a starburst pattern.\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"}]",[23,31084,26913],{"id":26912},[217,31086,31087,31116,31144,31172,31200],{":tabs":1543},[43,31088,31090],{"className":45,"code":31089,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CConicGradient />\n\u003C/Shader>\n",[31,31091,31092,31100,31108],{"__ignoreMap":48},[52,31093,31094,31096,31098],{"class":54,"line":55},[52,31095,59],{"class":58},[52,31097,63],{"class":62},[52,31099,77],{"class":58},[52,31101,31102,31104,31106],{"class":54,"line":80},[52,31103,83],{"class":58},[52,31105,31067],{"class":62},[52,31107,105],{"class":58},[52,31109,31110,31112,31114],{"class":54,"line":108},[52,31111,121],{"class":58},[52,31113,63],{"class":62},[52,31115,77],{"class":58},[43,31117,31118],{"className":360,"code":31089,"language":362,"meta":48,"style":48},[31,31119,31120,31128,31136],{"__ignoreMap":48},[52,31121,31122,31124,31126],{"class":54,"line":55},[52,31123,59],{"class":58},[52,31125,63],{"class":371},[52,31127,77],{"class":58},[52,31129,31130,31132,31134],{"class":54,"line":80},[52,31131,83],{"class":58},[52,31133,31067],{"class":371},[52,31135,105],{"class":58},[52,31137,31138,31140,31142],{"class":54,"line":108},[52,31139,121],{"class":58},[52,31141,63],{"class":371},[52,31143,77],{"class":58},[43,31145,31146],{"className":2507,"code":31089,"language":2509,"meta":48,"style":48},[31,31147,31148,31156,31164],{"__ignoreMap":48},[52,31149,31150,31152,31154],{"class":54,"line":55},[52,31151,59],{"class":58},[52,31153,63],{"class":371},[52,31155,77],{"class":58},[52,31157,31158,31160,31162],{"class":54,"line":80},[52,31159,83],{"class":58},[52,31161,31067],{"class":371},[52,31163,105],{"class":58},[52,31165,31166,31168,31170],{"class":54,"line":108},[52,31167,121],{"class":58},[52,31169,63],{"class":371},[52,31171,77],{"class":58},[43,31173,31174],{"className":419,"code":31089,"language":420,"meta":48,"style":48},[31,31175,31176,31184,31192],{"__ignoreMap":48},[52,31177,31178,31180,31182],{"class":54,"line":55},[52,31179,59],{"class":58},[52,31181,63],{"class":371},[52,31183,77],{"class":58},[52,31185,31186,31188,31190],{"class":54,"line":80},[52,31187,83],{"class":58},[52,31189,31067],{"class":371},[52,31191,105],{"class":58},[52,31193,31194,31196,31198],{"class":54,"line":108},[52,31195,121],{"class":58},[52,31197,63],{"class":371},[52,31199,77],{"class":58},[43,31201,31203],{"className":222,"code":31202,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ConicGradient', props: {} }\n ]\n})\n",[31,31204,31205,31215,31219,31233,31237,31246,31250],{"__ignoreMap":48},[52,31206,31207,31209,31211,31213],{"class":54,"line":55},[52,31208,232],{"class":231},[52,31210,9231],{"class":58},[52,31212,238],{"class":231},[52,31214,9236],{"class":73},[52,31216,31217],{"class":54,"line":80},[52,31218,597],{"emptyLinePlaceholder":171},[52,31220,31221,31223,31225,31227,31229,31231],{"class":54,"line":108},[52,31222,1721],{"class":231},[52,31224,1724],{"class":371},[52,31226,1727],{"class":231},[52,31228,1730],{"class":231},[52,31230,1733],{"class":66},[52,31232,1736],{"class":58},[52,31234,31235],{"class":54,"line":118},[52,31236,1751],{"class":58},[52,31238,31239,31241,31244],{"class":54,"line":594},[52,31240,1756],{"class":58},[52,31242,31243],{"class":73},"'ConicGradient'",[52,31245,2129],{"class":58},[52,31247,31248],{"class":54,"line":600},[52,31249,1773],{"class":58},[52,31251,31252],{"class":54,"line":606},[52,31253,1778],{"class":58},[156,31255,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":31257},[31258,31259],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/conicgradient",{"title":31067,"description":31075},"docs/components/ConicGradient","NIVNPxXJkDB1SOPz03uSQXaV6QUuIWABabpG6Qi-clQ",{"id":31266,"title":31267,"body":31268,"category":27503,"componentType":20848,"description":31275,"extension":168,"meta":31536,"navigation":171,"path":31537,"requiresChild":171,"seo":31538,"stem":31539,"__hash__":31540},"components/docs/components/ContourLines.md","ContourLines",{"type":8,"value":31269,"toc":31532},[31270,31273,31276,31278,31280,31283,31285,31530],[11,31271,31267],{"id":31272},"contourlines",[15,31274,31275],{},"Draw topographical contour lines based on luminance or alpha",[26901,31277],{"component":31267},[23,31279,26905],{"id":21503},[26907,31281],{":props":31282},"[{\"name\":\"levels\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of contour levels\"},{\"name\":\"lineWidth\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Width of the contour lines in pixels\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness of the lines (0 = sharp, 1 = soft)\"},{\"name\":\"gamma\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Contour distribution. \u003C1 clusters in bright, >1 clusters in dark\"},{\"name\":\"invert\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Invert the source values\"},{\"name\":\"source\",\"type\":\"\\\"luminance\\\" | \\\"alpha\\\"\",\"default\":\"luminance\",\"description\":\"Use luminance or alpha channel for contours\"},{\"name\":\"colorMode\",\"type\":\"\\\"source\\\" | \\\"custom\\\"\",\"default\":\"source\",\"description\":\"Use source image colors or custom colors\"},{\"name\":\"lineColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the contour lines (custom mode)\"},{\"name\":\"backgroundColor\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Background color (custom mode)\"}]",[23,31284,26913],{"id":26912},[217,31286,31287,31332,31376,31420,31464],{":tabs":1543},[43,31288,31290],{"className":45,"code":31289,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CContourLines>\n \u003CCircle />\n \u003C/ContourLines>\n\u003C/Shader>\n",[31,31291,31292,31300,31308,31316,31324],{"__ignoreMap":48},[52,31293,31294,31296,31298],{"class":54,"line":55},[52,31295,59],{"class":58},[52,31297,63],{"class":62},[52,31299,77],{"class":58},[52,31301,31302,31304,31306],{"class":54,"line":80},[52,31303,83],{"class":58},[52,31305,31267],{"class":62},[52,31307,77],{"class":58},[52,31309,31310,31312,31314],{"class":54,"line":108},[52,31311,2213],{"class":58},[52,31313,2216],{"class":62},[52,31315,105],{"class":58},[52,31317,31318,31320,31322],{"class":54,"line":118},[52,31319,2230],{"class":58},[52,31321,31267],{"class":62},[52,31323,77],{"class":58},[52,31325,31326,31328,31330],{"class":54,"line":594},[52,31327,121],{"class":58},[52,31329,63],{"class":62},[52,31331,77],{"class":58},[43,31333,31334],{"className":360,"code":31289,"language":362,"meta":48,"style":48},[31,31335,31336,31344,31352,31360,31368],{"__ignoreMap":48},[52,31337,31338,31340,31342],{"class":54,"line":55},[52,31339,59],{"class":58},[52,31341,63],{"class":371},[52,31343,77],{"class":58},[52,31345,31346,31348,31350],{"class":54,"line":80},[52,31347,83],{"class":58},[52,31349,31267],{"class":371},[52,31351,77],{"class":58},[52,31353,31354,31356,31358],{"class":54,"line":108},[52,31355,2213],{"class":58},[52,31357,2216],{"class":371},[52,31359,105],{"class":58},[52,31361,31362,31364,31366],{"class":54,"line":118},[52,31363,2230],{"class":58},[52,31365,31267],{"class":371},[52,31367,77],{"class":58},[52,31369,31370,31372,31374],{"class":54,"line":594},[52,31371,121],{"class":58},[52,31373,63],{"class":371},[52,31375,77],{"class":58},[43,31377,31378],{"className":2507,"code":31289,"language":2509,"meta":48,"style":48},[31,31379,31380,31388,31396,31404,31412],{"__ignoreMap":48},[52,31381,31382,31384,31386],{"class":54,"line":55},[52,31383,59],{"class":58},[52,31385,63],{"class":371},[52,31387,77],{"class":58},[52,31389,31390,31392,31394],{"class":54,"line":80},[52,31391,83],{"class":58},[52,31393,31267],{"class":371},[52,31395,77],{"class":58},[52,31397,31398,31400,31402],{"class":54,"line":108},[52,31399,2213],{"class":58},[52,31401,2216],{"class":371},[52,31403,105],{"class":58},[52,31405,31406,31408,31410],{"class":54,"line":118},[52,31407,2230],{"class":58},[52,31409,31267],{"class":371},[52,31411,77],{"class":58},[52,31413,31414,31416,31418],{"class":54,"line":594},[52,31415,121],{"class":58},[52,31417,63],{"class":371},[52,31419,77],{"class":58},[43,31421,31422],{"className":419,"code":31289,"language":420,"meta":48,"style":48},[31,31423,31424,31432,31440,31448,31456],{"__ignoreMap":48},[52,31425,31426,31428,31430],{"class":54,"line":55},[52,31427,59],{"class":58},[52,31429,63],{"class":371},[52,31431,77],{"class":58},[52,31433,31434,31436,31438],{"class":54,"line":80},[52,31435,83],{"class":58},[52,31437,31267],{"class":371},[52,31439,77],{"class":58},[52,31441,31442,31444,31446],{"class":54,"line":108},[52,31443,2213],{"class":58},[52,31445,2216],{"class":371},[52,31447,105],{"class":58},[52,31449,31450,31452,31454],{"class":54,"line":118},[52,31451,2230],{"class":58},[52,31453,31267],{"class":371},[52,31455,77],{"class":58},[52,31457,31458,31460,31462],{"class":54,"line":594},[52,31459,121],{"class":58},[52,31461,63],{"class":371},[52,31463,77],{"class":58},[43,31465,31467],{"className":222,"code":31466,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'ContourLines', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,31468,31469,31479,31483,31497,31501,31510,31518,31522,31526],{"__ignoreMap":48},[52,31470,31471,31473,31475,31477],{"class":54,"line":55},[52,31472,232],{"class":231},[52,31474,9231],{"class":58},[52,31476,238],{"class":231},[52,31478,9236],{"class":73},[52,31480,31481],{"class":54,"line":80},[52,31482,597],{"emptyLinePlaceholder":171},[52,31484,31485,31487,31489,31491,31493,31495],{"class":54,"line":108},[52,31486,1721],{"class":231},[52,31488,1724],{"class":371},[52,31490,1727],{"class":231},[52,31492,1730],{"class":231},[52,31494,1733],{"class":66},[52,31496,1736],{"class":58},[52,31498,31499],{"class":54,"line":118},[52,31500,1751],{"class":58},[52,31502,31503,31505,31508],{"class":54,"line":594},[52,31504,1756],{"class":58},[52,31506,31507],{"class":73},"'ContourLines'",[52,31509,4722],{"class":58},[52,31511,31512,31514,31516],{"class":54,"line":600},[52,31513,4727],{"class":58},[52,31515,2869],{"class":73},[52,31517,2129],{"class":58},[52,31519,31520],{"class":54,"line":606},[52,31521,4744],{"class":58},[52,31523,31524],{"class":54,"line":653},[52,31525,1773],{"class":58},[52,31527,31528],{"class":54,"line":662},[52,31529,1778],{"class":58},[156,31531,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":31533},[31534,31535],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/contourlines",{"title":31267,"description":31275},"docs/components/ContourLines","UoGQu1MmwrT8VRX69JRXjwye-5m06S6oJ_67dd0-H1I",{"id":31542,"title":31543,"body":31544,"category":30727,"componentType":20842,"description":31551,"extension":168,"meta":31829,"navigation":171,"path":31830,"requiresChild":27763,"seo":31831,"stem":31832,"__hash__":31833},"components/docs/components/Crescent.md","Crescent",{"type":8,"value":31545,"toc":31825},[31546,31549,31552,31554,31556,31559,31561,31823],[11,31547,31543],{"id":31548},"crescent",[15,31550,31551],{},"Crescent moon shape — an outer circle with an inner circle subtracted",[26901,31553],{"component":31543},[23,31555,26905],{"id":21503},[26907,31557],{":props":31558},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the crescent\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the crescent\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Outer circle radius\"},{\"name\":\"innerRatio\",\"type\":\"number\",\"default\":\"0.8\",\"description\":\"Inner (bite) circle radius as a fraction of outer radius\"},{\"name\":\"offset\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Horizontal distance the bite circle is shifted from center\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[23,31560,26913],{"id":26912},[217,31562,31563,31612,31663,31711,31761],{":tabs":1543},[43,31564,31566],{"className":45,"code":31565,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,31567,31568,31576,31583,31591,31600,31604],{"__ignoreMap":48},[52,31569,31570,31572,31574],{"class":54,"line":55},[52,31571,59],{"class":58},[52,31573,63],{"class":62},[52,31575,77],{"class":58},[52,31577,31578,31580],{"class":54,"line":80},[52,31579,83],{"class":58},[52,31581,31582],{"class":62},"Crescent\n",[52,31584,31585,31587,31589],{"class":54,"line":108},[52,31586,7351],{"class":66},[52,31588,70],{"class":58},[52,31590,7307],{"class":73},[52,31592,31593,31595,31597],{"class":54,"line":118},[52,31594,14901],{"class":66},[52,31596,70],{"class":58},[52,31598,31599],{"class":73},"\"0.3\"\n",[52,31601,31602],{"class":54,"line":594},[52,31603,1224],{"class":58},[52,31605,31606,31608,31610],{"class":54,"line":600},[52,31607,121],{"class":58},[52,31609,63],{"class":62},[52,31611,77],{"class":58},[43,31613,31615],{"className":360,"code":31614,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCrescent\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,31616,31617,31625,31631,31639,31651,31655],{"__ignoreMap":48},[52,31618,31619,31621,31623],{"class":54,"line":55},[52,31620,59],{"class":58},[52,31622,63],{"class":371},[52,31624,77],{"class":58},[52,31626,31627,31629],{"class":54,"line":80},[52,31628,83],{"class":58},[52,31630,31582],{"class":371},[52,31632,31633,31635,31637],{"class":54,"line":108},[52,31634,7351],{"class":66},[52,31636,70],{"class":231},[52,31638,7307],{"class":73},[52,31640,31641,31643,31645,31647,31649],{"class":54,"line":118},[52,31642,7361],{"class":66},[52,31644,70],{"class":231},[52,31646,723],{"class":58},[52,31648,19478],{"class":371},[52,31650,729],{"class":58},[52,31652,31653],{"class":54,"line":594},[52,31654,1224],{"class":58},[52,31656,31657,31659,31661],{"class":54,"line":600},[52,31658,121],{"class":58},[52,31660,63],{"class":371},[52,31662,77],{"class":58},[43,31664,31665],{"className":2507,"code":31614,"language":2509,"meta":48,"style":48},[31,31666,31667,31675,31681,31689,31699,31703],{"__ignoreMap":48},[52,31668,31669,31671,31673],{"class":54,"line":55},[52,31670,59],{"class":58},[52,31672,63],{"class":371},[52,31674,77],{"class":58},[52,31676,31677,31679],{"class":54,"line":80},[52,31678,83],{"class":58},[52,31680,31582],{"class":371},[52,31682,31683,31685,31687],{"class":54,"line":108},[52,31684,7351],{"class":66},[52,31686,70],{"class":58},[52,31688,7307],{"class":73},[52,31690,31691,31693,31695,31697],{"class":54,"line":118},[52,31692,7361],{"class":66},[52,31694,24845],{"class":58},[52,31696,19478],{"class":371},[52,31698,729],{"class":58},[52,31700,31701],{"class":54,"line":594},[52,31702,1224],{"class":58},[52,31704,31705,31707,31709],{"class":54,"line":600},[52,31706,121],{"class":58},[52,31708,63],{"class":371},[52,31710,77],{"class":58},[43,31712,31713],{"className":419,"code":31614,"language":420,"meta":48,"style":48},[31,31714,31715,31723,31729,31737,31749,31753],{"__ignoreMap":48},[52,31716,31717,31719,31721],{"class":54,"line":55},[52,31718,59],{"class":58},[52,31720,63],{"class":371},[52,31722,77],{"class":58},[52,31724,31725,31727],{"class":54,"line":80},[52,31726,83],{"class":58},[52,31728,31582],{"class":371},[52,31730,31731,31733,31735],{"class":54,"line":108},[52,31732,7351],{"class":66},[52,31734,70],{"class":231},[52,31736,7307],{"class":73},[52,31738,31739,31741,31743,31745,31747],{"class":54,"line":118},[52,31740,7361],{"class":66},[52,31742,70],{"class":231},[52,31744,723],{"class":58},[52,31746,19478],{"class":371},[52,31748,729],{"class":58},[52,31750,31751],{"class":54,"line":594},[52,31752,1224],{"class":58},[52,31754,31755,31757,31759],{"class":54,"line":600},[52,31756,121],{"class":58},[52,31758,63],{"class":371},[52,31760,77],{"class":58},[43,31762,31764],{"className":222,"code":31763,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Crescent', props: { color: '#ffffff', radius: 0.3 } }\n ]\n})\n",[31,31765,31766,31776,31780,31794,31798,31815,31819],{"__ignoreMap":48},[52,31767,31768,31770,31772,31774],{"class":54,"line":55},[52,31769,232],{"class":231},[52,31771,9231],{"class":58},[52,31773,238],{"class":231},[52,31775,9236],{"class":73},[52,31777,31778],{"class":54,"line":80},[52,31779,597],{"emptyLinePlaceholder":171},[52,31781,31782,31784,31786,31788,31790,31792],{"class":54,"line":108},[52,31783,1721],{"class":231},[52,31785,1724],{"class":371},[52,31787,1727],{"class":231},[52,31789,1730],{"class":231},[52,31791,1733],{"class":66},[52,31793,1736],{"class":58},[52,31795,31796],{"class":54,"line":118},[52,31797,1751],{"class":58},[52,31799,31800,31802,31805,31807,31809,31811,31813],{"class":54,"line":594},[52,31801,1756],{"class":58},[52,31803,31804],{"class":73},"'Crescent'",[52,31806,1762],{"class":58},[52,31808,7886],{"class":73},[52,31810,4278],{"class":58},[52,31812,19478],{"class":371},[52,31814,1768],{"class":58},[52,31816,31817],{"class":54,"line":600},[52,31818,1773],{"class":58},[52,31820,31821],{"class":54,"line":606},[52,31822,1778],{"class":58},[156,31824,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":31826},[31827,31828],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/crescent",{"title":31543,"description":31551},"docs/components/Crescent","ObqUw-47jUNAlPME041OasGzcc_jSvwXgXEVE3NCaLk",{"id":31835,"title":31836,"body":31837,"category":30727,"componentType":20842,"description":31844,"extension":168,"meta":32122,"navigation":171,"path":32123,"requiresChild":27763,"seo":32124,"stem":32125,"__hash__":32126},"components/docs/components/Cross.md","Cross",{"type":8,"value":31838,"toc":32118},[31839,31842,31845,31847,31849,31852,31854,32116],[11,31840,31836],{"id":31841},"cross",[15,31843,31844],{},"Plus / cross shape with adjustable arm length, width, and rounding",[26901,31846],{"component":31836},[23,31848,26905],{"id":21503},[26907,31850],{":props":31851},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the cross\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the cross\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Arm half-length — distance from center to the end of each arm\"},{\"name\":\"thickness\",\"type\":\"number\",\"default\":\"0.08\",\"description\":\"Arm half-width — controls how wide each arm is\"},{\"name\":\"rounding\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Corner rounding — rounds the arm ends and concave corners\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees (45° turns a plus into an ×)\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[23,31853,26913],{"id":26912},[217,31855,31856,31905,31956,32004,32054],{":tabs":1543},[43,31857,31859],{"className":45,"code":31858,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,31860,31861,31869,31876,31884,31893,31897],{"__ignoreMap":48},[52,31862,31863,31865,31867],{"class":54,"line":55},[52,31864,59],{"class":58},[52,31866,63],{"class":62},[52,31868,77],{"class":58},[52,31870,31871,31873],{"class":54,"line":80},[52,31872,83],{"class":58},[52,31874,31875],{"class":62},"Cross\n",[52,31877,31878,31880,31882],{"class":54,"line":108},[52,31879,7351],{"class":66},[52,31881,70],{"class":58},[52,31883,7307],{"class":73},[52,31885,31886,31888,31890],{"class":54,"line":118},[52,31887,14901],{"class":66},[52,31889,70],{"class":58},[52,31891,31892],{"class":73},"\"0.35\"\n",[52,31894,31895],{"class":54,"line":594},[52,31896,1224],{"class":58},[52,31898,31899,31901,31903],{"class":54,"line":600},[52,31900,121],{"class":58},[52,31902,63],{"class":62},[52,31904,77],{"class":58},[43,31906,31908],{"className":360,"code":31907,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCross\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,31909,31910,31918,31924,31932,31944,31948],{"__ignoreMap":48},[52,31911,31912,31914,31916],{"class":54,"line":55},[52,31913,59],{"class":58},[52,31915,63],{"class":371},[52,31917,77],{"class":58},[52,31919,31920,31922],{"class":54,"line":80},[52,31921,83],{"class":58},[52,31923,31875],{"class":371},[52,31925,31926,31928,31930],{"class":54,"line":108},[52,31927,7351],{"class":66},[52,31929,70],{"class":231},[52,31931,7307],{"class":73},[52,31933,31934,31936,31938,31940,31942],{"class":54,"line":118},[52,31935,7361],{"class":66},[52,31937,70],{"class":231},[52,31939,723],{"class":58},[52,31941,18630],{"class":371},[52,31943,729],{"class":58},[52,31945,31946],{"class":54,"line":594},[52,31947,1224],{"class":58},[52,31949,31950,31952,31954],{"class":54,"line":600},[52,31951,121],{"class":58},[52,31953,63],{"class":371},[52,31955,77],{"class":58},[43,31957,31958],{"className":2507,"code":31907,"language":2509,"meta":48,"style":48},[31,31959,31960,31968,31974,31982,31992,31996],{"__ignoreMap":48},[52,31961,31962,31964,31966],{"class":54,"line":55},[52,31963,59],{"class":58},[52,31965,63],{"class":371},[52,31967,77],{"class":58},[52,31969,31970,31972],{"class":54,"line":80},[52,31971,83],{"class":58},[52,31973,31875],{"class":371},[52,31975,31976,31978,31980],{"class":54,"line":108},[52,31977,7351],{"class":66},[52,31979,70],{"class":58},[52,31981,7307],{"class":73},[52,31983,31984,31986,31988,31990],{"class":54,"line":118},[52,31985,7361],{"class":66},[52,31987,24845],{"class":58},[52,31989,18630],{"class":371},[52,31991,729],{"class":58},[52,31993,31994],{"class":54,"line":594},[52,31995,1224],{"class":58},[52,31997,31998,32000,32002],{"class":54,"line":600},[52,31999,121],{"class":58},[52,32001,63],{"class":371},[52,32003,77],{"class":58},[43,32005,32006],{"className":419,"code":31907,"language":420,"meta":48,"style":48},[31,32007,32008,32016,32022,32030,32042,32046],{"__ignoreMap":48},[52,32009,32010,32012,32014],{"class":54,"line":55},[52,32011,59],{"class":58},[52,32013,63],{"class":371},[52,32015,77],{"class":58},[52,32017,32018,32020],{"class":54,"line":80},[52,32019,83],{"class":58},[52,32021,31875],{"class":371},[52,32023,32024,32026,32028],{"class":54,"line":108},[52,32025,7351],{"class":66},[52,32027,70],{"class":231},[52,32029,7307],{"class":73},[52,32031,32032,32034,32036,32038,32040],{"class":54,"line":118},[52,32033,7361],{"class":66},[52,32035,70],{"class":231},[52,32037,723],{"class":58},[52,32039,18630],{"class":371},[52,32041,729],{"class":58},[52,32043,32044],{"class":54,"line":594},[52,32045,1224],{"class":58},[52,32047,32048,32050,32052],{"class":54,"line":600},[52,32049,121],{"class":58},[52,32051,63],{"class":371},[52,32053,77],{"class":58},[43,32055,32057],{"className":222,"code":32056,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Cross', props: { color: '#ffffff', radius: 0.35 } }\n ]\n})\n",[31,32058,32059,32069,32073,32087,32091,32108,32112],{"__ignoreMap":48},[52,32060,32061,32063,32065,32067],{"class":54,"line":55},[52,32062,232],{"class":231},[52,32064,9231],{"class":58},[52,32066,238],{"class":231},[52,32068,9236],{"class":73},[52,32070,32071],{"class":54,"line":80},[52,32072,597],{"emptyLinePlaceholder":171},[52,32074,32075,32077,32079,32081,32083,32085],{"class":54,"line":108},[52,32076,1721],{"class":231},[52,32078,1724],{"class":371},[52,32080,1727],{"class":231},[52,32082,1730],{"class":231},[52,32084,1733],{"class":66},[52,32086,1736],{"class":58},[52,32088,32089],{"class":54,"line":118},[52,32090,1751],{"class":58},[52,32092,32093,32095,32098,32100,32102,32104,32106],{"class":54,"line":594},[52,32094,1756],{"class":58},[52,32096,32097],{"class":73},"'Cross'",[52,32099,1762],{"class":58},[52,32101,7886],{"class":73},[52,32103,4278],{"class":58},[52,32105,18630],{"class":371},[52,32107,1768],{"class":58},[52,32109,32110],{"class":54,"line":600},[52,32111,1773],{"class":58},[52,32113,32114],{"class":54,"line":606},[52,32115,1778],{"class":58},[156,32117,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32119},[32120,32121],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cross",{"title":31836,"description":31844},"docs/components/Cross","8h8ZHf2RZRmwG-7PmNT2Lcb_l-kH3tvrmVN0fWFbTNs",{"id":32128,"title":32129,"body":32130,"category":32398,"componentType":20848,"description":32137,"extension":168,"meta":32399,"navigation":171,"path":32400,"requiresChild":171,"seo":32401,"stem":32402,"__hash__":32403},"components/docs/components/Crystal.md","Crystal",{"type":8,"value":32131,"toc":32394},[32132,32135,32138,32140,32142,32145,32147,32392],[11,32133,32129],{"id":32134},"crystal",[15,32136,32137],{},"Diamond-like crystal lens with faceted refraction.",[26901,32139],{"component":32129},[23,32141,26905],{"id":21503},[26907,32143],{":props":32144},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the crystal shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the crystal shape (1 = default size)\"},{\"name\":\"cutout\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Cut out alpha outside the crystal shape\"},{\"name\":\"refraction\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How strongly the crystal refracts content beneath\"},{\"name\":\"dispersion\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Prismatic rainbow dispersion — splits light into spectral colors\"},{\"name\":\"facets\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Symmetry order — how many times the facet pattern repeats around the center\"},{\"name\":\"fresnel\",\"type\":\"number\",\"default\":\"0.05\",\"description\":\"Fresnel rim glow intensity around the crystal boundary\"},{\"name\":\"fresnelSoftness\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Fresnel rim width — higher values spread the glow further inward\"},{\"name\":\"fresnelColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the fresnel rim glow\"},{\"name\":\"edgeSoftness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Softness of the crystal boundary edge\"},{\"name\":\"innerZoom\",\"type\":\"number\",\"default\":\"1.5\",\"description\":\"Magnification of content seen through the crystal\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"270\",\"description\":\"Light direction angle in degrees\"},{\"name\":\"highlights\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Additive brightness on light-facing facets — never darkens\"},{\"name\":\"shadows\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Darkening on shadow-facing facets — never brightens\"},{\"name\":\"brightness\",\"type\":\"number\",\"default\":\"1.2\",\"description\":\"Overall crystal brightness — higher values push facets toward brilliant white\"},{\"name\":\"tintColor\",\"type\":\"string\",\"default\":\"#e8e0ff\",\"description\":\"Crystal body tint color\"},{\"name\":\"tintIntensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How much tint color is applied to the crystal interior\"},{\"name\":\"tintPreserveLuminosity\",\"type\":\"boolean\",\"default\":\"true\",\"description\":\"Preserve original brightness when tinting\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"polygonSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](/docs/guide/shape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](/docs/guide/shape-effects) for how to generate an SDF from an SVG.\"}]",[23,32146,26913],{"id":26912},[217,32148,32149,32194,32238,32282,32326],{":tabs":1543},[43,32150,32152],{"className":45,"code":32151,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCrystal>\n \u003CCircle />\n \u003C/Crystal>\n\u003C/Shader>\n",[31,32153,32154,32162,32170,32178,32186],{"__ignoreMap":48},[52,32155,32156,32158,32160],{"class":54,"line":55},[52,32157,59],{"class":58},[52,32159,63],{"class":62},[52,32161,77],{"class":58},[52,32163,32164,32166,32168],{"class":54,"line":80},[52,32165,83],{"class":58},[52,32167,32129],{"class":62},[52,32169,77],{"class":58},[52,32171,32172,32174,32176],{"class":54,"line":108},[52,32173,2213],{"class":58},[52,32175,2216],{"class":62},[52,32177,105],{"class":58},[52,32179,32180,32182,32184],{"class":54,"line":118},[52,32181,2230],{"class":58},[52,32183,32129],{"class":62},[52,32185,77],{"class":58},[52,32187,32188,32190,32192],{"class":54,"line":594},[52,32189,121],{"class":58},[52,32191,63],{"class":62},[52,32193,77],{"class":58},[43,32195,32196],{"className":360,"code":32151,"language":362,"meta":48,"style":48},[31,32197,32198,32206,32214,32222,32230],{"__ignoreMap":48},[52,32199,32200,32202,32204],{"class":54,"line":55},[52,32201,59],{"class":58},[52,32203,63],{"class":371},[52,32205,77],{"class":58},[52,32207,32208,32210,32212],{"class":54,"line":80},[52,32209,83],{"class":58},[52,32211,32129],{"class":371},[52,32213,77],{"class":58},[52,32215,32216,32218,32220],{"class":54,"line":108},[52,32217,2213],{"class":58},[52,32219,2216],{"class":371},[52,32221,105],{"class":58},[52,32223,32224,32226,32228],{"class":54,"line":118},[52,32225,2230],{"class":58},[52,32227,32129],{"class":371},[52,32229,77],{"class":58},[52,32231,32232,32234,32236],{"class":54,"line":594},[52,32233,121],{"class":58},[52,32235,63],{"class":371},[52,32237,77],{"class":58},[43,32239,32240],{"className":2507,"code":32151,"language":2509,"meta":48,"style":48},[31,32241,32242,32250,32258,32266,32274],{"__ignoreMap":48},[52,32243,32244,32246,32248],{"class":54,"line":55},[52,32245,59],{"class":58},[52,32247,63],{"class":371},[52,32249,77],{"class":58},[52,32251,32252,32254,32256],{"class":54,"line":80},[52,32253,83],{"class":58},[52,32255,32129],{"class":371},[52,32257,77],{"class":58},[52,32259,32260,32262,32264],{"class":54,"line":108},[52,32261,2213],{"class":58},[52,32263,2216],{"class":371},[52,32265,105],{"class":58},[52,32267,32268,32270,32272],{"class":54,"line":118},[52,32269,2230],{"class":58},[52,32271,32129],{"class":371},[52,32273,77],{"class":58},[52,32275,32276,32278,32280],{"class":54,"line":594},[52,32277,121],{"class":58},[52,32279,63],{"class":371},[52,32281,77],{"class":58},[43,32283,32284],{"className":419,"code":32151,"language":420,"meta":48,"style":48},[31,32285,32286,32294,32302,32310,32318],{"__ignoreMap":48},[52,32287,32288,32290,32292],{"class":54,"line":55},[52,32289,59],{"class":58},[52,32291,63],{"class":371},[52,32293,77],{"class":58},[52,32295,32296,32298,32300],{"class":54,"line":80},[52,32297,83],{"class":58},[52,32299,32129],{"class":371},[52,32301,77],{"class":58},[52,32303,32304,32306,32308],{"class":54,"line":108},[52,32305,2213],{"class":58},[52,32307,2216],{"class":371},[52,32309,105],{"class":58},[52,32311,32312,32314,32316],{"class":54,"line":118},[52,32313,2230],{"class":58},[52,32315,32129],{"class":371},[52,32317,77],{"class":58},[52,32319,32320,32322,32324],{"class":54,"line":594},[52,32321,121],{"class":58},[52,32323,63],{"class":371},[52,32325,77],{"class":58},[43,32327,32329],{"className":222,"code":32328,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Crystal', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,32330,32331,32341,32345,32359,32363,32372,32380,32384,32388],{"__ignoreMap":48},[52,32332,32333,32335,32337,32339],{"class":54,"line":55},[52,32334,232],{"class":231},[52,32336,9231],{"class":58},[52,32338,238],{"class":231},[52,32340,9236],{"class":73},[52,32342,32343],{"class":54,"line":80},[52,32344,597],{"emptyLinePlaceholder":171},[52,32346,32347,32349,32351,32353,32355,32357],{"class":54,"line":108},[52,32348,1721],{"class":231},[52,32350,1724],{"class":371},[52,32352,1727],{"class":231},[52,32354,1730],{"class":231},[52,32356,1733],{"class":66},[52,32358,1736],{"class":58},[52,32360,32361],{"class":54,"line":118},[52,32362,1751],{"class":58},[52,32364,32365,32367,32370],{"class":54,"line":594},[52,32366,1756],{"class":58},[52,32368,32369],{"class":73},"'Crystal'",[52,32371,4722],{"class":58},[52,32373,32374,32376,32378],{"class":54,"line":600},[52,32375,4727],{"class":58},[52,32377,2869],{"class":73},[52,32379,2129],{"class":58},[52,32381,32382],{"class":54,"line":606},[52,32383,4744],{"class":58},[52,32385,32386],{"class":54,"line":653},[52,32387,1773],{"class":58},[52,32389,32390],{"class":54,"line":662},[52,32391,1778],{"class":58},[156,32393,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":32395},[32396,32397],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},"Shape Effects",{},"/docs/components/crystal",{"title":32129,"description":32137},"docs/components/Crystal","-FxLCmCZzp_ueV9QfIlLY-OvVQZj_IC4AWXu45eZ9YA",{"id":32405,"title":12145,"body":32406,"category":30161,"componentType":20848,"description":32413,"extension":168,"meta":32779,"navigation":171,"path":32780,"requiresChild":171,"seo":32781,"stem":32782,"__hash__":32783},"components/docs/components/CursorRipples.md",{"type":8,"value":32407,"toc":32775},[32408,32411,32414,32416,32418,32421,32423,32773],[11,32409,12145],{"id":32410},"cursorripples",[15,32412,32413],{},"Fluid-like ripple distortion",[26901,32415],{"component":12145},[23,32417,26905],{"id":21503},[26907,32419],{":props":32420},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Strength of the ripple distortion\"},{\"name\":\"decay\",\"type\":\"number\",\"default\":\"10\",\"description\":\"How quickly ripples fade (higher = faster)\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Radius of cursor influence\"},{\"name\":\"chromaticSplit\",\"type\":\"number\",\"default\":\"1\",\"description\":\"RGB channel separation along ripple edges\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,32422,26913],{"id":26912},[217,32424,32425,32491,32563,32629,32699],{":tabs":1543},[43,32426,32428],{"className":45,"code":32427,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorRipples\n :intensity=\"10\"\n :radius=\"0.5\"\n >\n \u003CCircle />\n \u003C/CursorRipples>\n\u003C/Shader>\n",[31,32429,32430,32438,32445,32454,32463,32467,32475,32483],{"__ignoreMap":48},[52,32431,32432,32434,32436],{"class":54,"line":55},[52,32433,59],{"class":58},[52,32435,63],{"class":62},[52,32437,77],{"class":58},[52,32439,32440,32442],{"class":54,"line":80},[52,32441,83],{"class":58},[52,32443,32444],{"class":62},"CursorRipples\n",[52,32446,32447,32449,32451],{"class":54,"line":108},[52,32448,17870],{"class":66},[52,32450,70],{"class":58},[52,32452,32453],{"class":73},"\"10\"\n",[52,32455,32456,32458,32460],{"class":54,"line":118},[52,32457,14901],{"class":66},[52,32459,70],{"class":58},[52,32461,32462],{"class":73},"\"0.5\"\n",[52,32464,32465],{"class":54,"line":594},[52,32466,26949],{"class":58},[52,32468,32469,32471,32473],{"class":54,"line":600},[52,32470,2213],{"class":58},[52,32472,2216],{"class":62},[52,32474,105],{"class":58},[52,32476,32477,32479,32481],{"class":54,"line":606},[52,32478,2230],{"class":58},[52,32480,12145],{"class":62},[52,32482,77],{"class":58},[52,32484,32485,32487,32489],{"class":54,"line":653},[52,32486,121],{"class":58},[52,32488,63],{"class":62},[52,32490,77],{"class":58},[43,32492,32494],{"className":360,"code":32493,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorRipples\n intensity={10}\n radius={0.5}\n >\n \u003CCircle />\n \u003C/CursorRipples>\n\u003C/Shader>\n",[31,32495,32496,32504,32510,32523,32535,32539,32547,32555],{"__ignoreMap":48},[52,32497,32498,32500,32502],{"class":54,"line":55},[52,32499,59],{"class":58},[52,32501,63],{"class":371},[52,32503,77],{"class":58},[52,32505,32506,32508],{"class":54,"line":80},[52,32507,83],{"class":58},[52,32509,32444],{"class":371},[52,32511,32512,32514,32516,32518,32521],{"class":54,"line":108},[52,32513,17981],{"class":66},[52,32515,70],{"class":231},[52,32517,723],{"class":58},[52,32519,32520],{"class":371},"10",[52,32522,729],{"class":58},[52,32524,32525,32527,32529,32531,32533],{"class":54,"line":118},[52,32526,7361],{"class":66},[52,32528,70],{"class":231},[52,32530,723],{"class":58},[52,32532,5467],{"class":371},[52,32534,729],{"class":58},[52,32536,32537],{"class":54,"line":594},[52,32538,26949],{"class":58},[52,32540,32541,32543,32545],{"class":54,"line":600},[52,32542,2213],{"class":58},[52,32544,2216],{"class":371},[52,32546,105],{"class":58},[52,32548,32549,32551,32553],{"class":54,"line":606},[52,32550,2230],{"class":58},[52,32552,12145],{"class":371},[52,32554,77],{"class":58},[52,32556,32557,32559,32561],{"class":54,"line":653},[52,32558,121],{"class":58},[52,32560,63],{"class":371},[52,32562,77],{"class":58},[43,32564,32565],{"className":2507,"code":32493,"language":2509,"meta":48,"style":48},[31,32566,32567,32575,32581,32591,32601,32605,32613,32621],{"__ignoreMap":48},[52,32568,32569,32571,32573],{"class":54,"line":55},[52,32570,59],{"class":58},[52,32572,63],{"class":371},[52,32574,77],{"class":58},[52,32576,32577,32579],{"class":54,"line":80},[52,32578,83],{"class":58},[52,32580,32444],{"class":371},[52,32582,32583,32585,32587,32589],{"class":54,"line":108},[52,32584,17981],{"class":66},[52,32586,24845],{"class":58},[52,32588,32520],{"class":371},[52,32590,729],{"class":58},[52,32592,32593,32595,32597,32599],{"class":54,"line":118},[52,32594,7361],{"class":66},[52,32596,24845],{"class":58},[52,32598,5467],{"class":371},[52,32600,729],{"class":58},[52,32602,32603],{"class":54,"line":594},[52,32604,26949],{"class":58},[52,32606,32607,32609,32611],{"class":54,"line":600},[52,32608,2213],{"class":58},[52,32610,2216],{"class":371},[52,32612,105],{"class":58},[52,32614,32615,32617,32619],{"class":54,"line":606},[52,32616,2230],{"class":58},[52,32618,12145],{"class":371},[52,32620,77],{"class":58},[52,32622,32623,32625,32627],{"class":54,"line":653},[52,32624,121],{"class":58},[52,32626,63],{"class":371},[52,32628,77],{"class":58},[43,32630,32631],{"className":419,"code":32493,"language":420,"meta":48,"style":48},[31,32632,32633,32641,32647,32659,32671,32675,32683,32691],{"__ignoreMap":48},[52,32634,32635,32637,32639],{"class":54,"line":55},[52,32636,59],{"class":58},[52,32638,63],{"class":371},[52,32640,77],{"class":58},[52,32642,32643,32645],{"class":54,"line":80},[52,32644,83],{"class":58},[52,32646,32444],{"class":371},[52,32648,32649,32651,32653,32655,32657],{"class":54,"line":108},[52,32650,17981],{"class":66},[52,32652,70],{"class":231},[52,32654,723],{"class":58},[52,32656,32520],{"class":371},[52,32658,729],{"class":58},[52,32660,32661,32663,32665,32667,32669],{"class":54,"line":118},[52,32662,7361],{"class":66},[52,32664,70],{"class":231},[52,32666,723],{"class":58},[52,32668,5467],{"class":371},[52,32670,729],{"class":58},[52,32672,32673],{"class":54,"line":594},[52,32674,26949],{"class":58},[52,32676,32677,32679,32681],{"class":54,"line":600},[52,32678,2213],{"class":58},[52,32680,2216],{"class":371},[52,32682,105],{"class":58},[52,32684,32685,32687,32689],{"class":54,"line":606},[52,32686,2230],{"class":58},[52,32688,12145],{"class":371},[52,32690,77],{"class":58},[52,32692,32693,32695,32697],{"class":54,"line":653},[52,32694,121],{"class":58},[52,32696,63],{"class":371},[52,32698,77],{"class":58},[43,32700,32702],{"className":222,"code":32701,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorRipples', props: { intensity: 10, radius: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,32703,32704,32714,32718,32732,32736,32753,32761,32765,32769],{"__ignoreMap":48},[52,32705,32706,32708,32710,32712],{"class":54,"line":55},[52,32707,232],{"class":231},[52,32709,9231],{"class":58},[52,32711,238],{"class":231},[52,32713,9236],{"class":73},[52,32715,32716],{"class":54,"line":80},[52,32717,597],{"emptyLinePlaceholder":171},[52,32719,32720,32722,32724,32726,32728,32730],{"class":54,"line":108},[52,32721,1721],{"class":231},[52,32723,1724],{"class":371},[52,32725,1727],{"class":231},[52,32727,1730],{"class":231},[52,32729,1733],{"class":66},[52,32731,1736],{"class":58},[52,32733,32734],{"class":54,"line":118},[52,32735,1751],{"class":58},[52,32737,32738,32740,32743,32745,32747,32749,32751],{"class":54,"line":594},[52,32739,1756],{"class":58},[52,32741,32742],{"class":73},"'CursorRipples'",[52,32744,27194],{"class":58},[52,32746,32520],{"class":371},[52,32748,4278],{"class":58},[52,32750,5467],{"class":371},[52,32752,5259],{"class":58},[52,32754,32755,32757,32759],{"class":54,"line":600},[52,32756,4727],{"class":58},[52,32758,2869],{"class":73},[52,32760,2129],{"class":58},[52,32762,32763],{"class":54,"line":606},[52,32764,4744],{"class":58},[52,32766,32767],{"class":54,"line":653},[52,32768,1773],{"class":58},[52,32770,32771],{"class":54,"line":662},[52,32772,1778],{"class":58},[156,32774,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":32776},[32777,32778],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cursorripples",{"title":12145,"description":32413},"docs/components/CursorRipples","t0l1tm2PkBNB2LyzALawQAoA2ApWgdpe2NCnS4vwn8w",{"id":32785,"title":113,"body":32786,"category":30161,"componentType":20842,"description":32793,"extension":168,"meta":33033,"navigation":171,"path":33034,"requiresChild":27763,"seo":33035,"stem":33036,"__hash__":33037},"components/docs/components/CursorTrail.md",{"type":8,"value":32787,"toc":33029},[32788,32791,32794,32796,32798,32801,32803,33027],[11,32789,113],{"id":32790},"cursortrail",[15,32792,32793],{},"Animated trail effect that tracks cursor movement",[26901,32795],{"component":113},[23,32797,26905],{"id":21503},[26907,32799],{":props":32800},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#00aaff\",\"description\":\"Color of fresh trails\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ff00aa\",\"description\":\"Color trails transition to as they fade\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Base radius of trail circles\"},{\"name\":\"length\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"How long trail circles persist (in seconds)\"},{\"name\":\"shrink\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much circles shrink as they fade out (0 = no shrink, 1 = full shrink)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,32802,26913],{"id":26912},[217,32804,32805,32845,32888,32928,32970],{":tabs":1543},[43,32806,32808],{"className":45,"code":32807,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n :radius=\"0.5\"\n />\n\u003C/Shader>\n",[31,32809,32810,32818,32825,32833,32837],{"__ignoreMap":48},[52,32811,32812,32814,32816],{"class":54,"line":55},[52,32813,59],{"class":58},[52,32815,63],{"class":62},[52,32817,77],{"class":58},[52,32819,32820,32822],{"class":54,"line":80},[52,32821,83],{"class":58},[52,32823,32824],{"class":62},"CursorTrail\n",[52,32826,32827,32829,32831],{"class":54,"line":108},[52,32828,14901],{"class":66},[52,32830,70],{"class":58},[52,32832,32462],{"class":73},[52,32834,32835],{"class":54,"line":118},[52,32836,1224],{"class":58},[52,32838,32839,32841,32843],{"class":54,"line":594},[52,32840,121],{"class":58},[52,32842,63],{"class":62},[52,32844,77],{"class":58},[43,32846,32848],{"className":360,"code":32847,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CCursorTrail\n radius={0.5}\n />\n\u003C/Shader>\n",[31,32849,32850,32858,32864,32876,32880],{"__ignoreMap":48},[52,32851,32852,32854,32856],{"class":54,"line":55},[52,32853,59],{"class":58},[52,32855,63],{"class":371},[52,32857,77],{"class":58},[52,32859,32860,32862],{"class":54,"line":80},[52,32861,83],{"class":58},[52,32863,32824],{"class":371},[52,32865,32866,32868,32870,32872,32874],{"class":54,"line":108},[52,32867,7361],{"class":66},[52,32869,70],{"class":231},[52,32871,723],{"class":58},[52,32873,5467],{"class":371},[52,32875,729],{"class":58},[52,32877,32878],{"class":54,"line":118},[52,32879,1224],{"class":58},[52,32881,32882,32884,32886],{"class":54,"line":594},[52,32883,121],{"class":58},[52,32885,63],{"class":371},[52,32887,77],{"class":58},[43,32889,32890],{"className":2507,"code":32847,"language":2509,"meta":48,"style":48},[31,32891,32892,32900,32906,32916,32920],{"__ignoreMap":48},[52,32893,32894,32896,32898],{"class":54,"line":55},[52,32895,59],{"class":58},[52,32897,63],{"class":371},[52,32899,77],{"class":58},[52,32901,32902,32904],{"class":54,"line":80},[52,32903,83],{"class":58},[52,32905,32824],{"class":371},[52,32907,32908,32910,32912,32914],{"class":54,"line":108},[52,32909,7361],{"class":66},[52,32911,24845],{"class":58},[52,32913,5467],{"class":371},[52,32915,729],{"class":58},[52,32917,32918],{"class":54,"line":118},[52,32919,1224],{"class":58},[52,32921,32922,32924,32926],{"class":54,"line":594},[52,32923,121],{"class":58},[52,32925,63],{"class":371},[52,32927,77],{"class":58},[43,32929,32930],{"className":419,"code":32847,"language":420,"meta":48,"style":48},[31,32931,32932,32940,32946,32958,32962],{"__ignoreMap":48},[52,32933,32934,32936,32938],{"class":54,"line":55},[52,32935,59],{"class":58},[52,32937,63],{"class":371},[52,32939,77],{"class":58},[52,32941,32942,32944],{"class":54,"line":80},[52,32943,83],{"class":58},[52,32945,32824],{"class":371},[52,32947,32948,32950,32952,32954,32956],{"class":54,"line":108},[52,32949,7361],{"class":66},[52,32951,70],{"class":231},[52,32953,723],{"class":58},[52,32955,5467],{"class":371},[52,32957,729],{"class":58},[52,32959,32960],{"class":54,"line":118},[52,32961,1224],{"class":58},[52,32963,32964,32966,32968],{"class":54,"line":594},[52,32965,121],{"class":58},[52,32967,63],{"class":371},[52,32969,77],{"class":58},[43,32971,32973],{"className":222,"code":32972,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'CursorTrail', props: { radius: 0.5 } }\n ]\n})\n",[31,32974,32975,32985,32989,33003,33007,33019,33023],{"__ignoreMap":48},[52,32976,32977,32979,32981,32983],{"class":54,"line":55},[52,32978,232],{"class":231},[52,32980,9231],{"class":58},[52,32982,238],{"class":231},[52,32984,9236],{"class":73},[52,32986,32987],{"class":54,"line":80},[52,32988,597],{"emptyLinePlaceholder":171},[52,32990,32991,32993,32995,32997,32999,33001],{"class":54,"line":108},[52,32992,1721],{"class":231},[52,32994,1724],{"class":371},[52,32996,1727],{"class":231},[52,32998,1730],{"class":231},[52,33000,1733],{"class":66},[52,33002,1736],{"class":58},[52,33004,33005],{"class":54,"line":118},[52,33006,1751],{"class":58},[52,33008,33009,33011,33013,33015,33017],{"class":54,"line":594},[52,33010,1756],{"class":58},[52,33012,21334],{"class":73},[52,33014,5254],{"class":58},[52,33016,5467],{"class":371},[52,33018,1768],{"class":58},[52,33020,33021],{"class":54,"line":600},[52,33022,1773],{"class":58},[52,33024,33025],{"class":54,"line":606},[52,33026,1778],{"class":58},[156,33028,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33030},[33031,33032],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/cursortrail",{"title":113,"description":32793},"docs/components/CursorTrail","wUUBquiR90VnfJRcmSsJKwtWkuTdT_kDTHSJz6U1CeI",{"id":33039,"title":33040,"body":33041,"category":27760,"componentType":20842,"description":33048,"extension":168,"meta":33233,"navigation":171,"path":33234,"requiresChild":27763,"seo":33235,"stem":33236,"__hash__":33237},"components/docs/components/DOMTexture.md","DOMTexture",{"type":8,"value":33042,"toc":33230},[33043,33046,33049,33055,33057,33059,33228],[11,33044,33040],{"id":33045},"domtexture",[15,33047,33048],{},"Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.",[33050,33051],"experimental-warning",{"link-label":33052,"link-url":33053,"message":33054},"View the spec","https://github.com/WICG/html-in-canvas","This component is powered by the WICG html-in-canvas proposal, which is currently only available in Chrome Canary behind a feature flag. It is not suitable for production use and may change as the specification evolves.",[26901,33056],{"component":33040},[23,33058,26913],{"id":26912},[217,33060,33061,33090,33118,33146,33174],{":tabs":1543},[43,33062,33064],{"className":45,"code":33063,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDOMTexture />\n\u003C/Shader>\n",[31,33065,33066,33074,33082],{"__ignoreMap":48},[52,33067,33068,33070,33072],{"class":54,"line":55},[52,33069,59],{"class":58},[52,33071,63],{"class":62},[52,33073,77],{"class":58},[52,33075,33076,33078,33080],{"class":54,"line":80},[52,33077,83],{"class":58},[52,33079,33040],{"class":62},[52,33081,105],{"class":58},[52,33083,33084,33086,33088],{"class":54,"line":108},[52,33085,121],{"class":58},[52,33087,63],{"class":62},[52,33089,77],{"class":58},[43,33091,33092],{"className":360,"code":33063,"language":362,"meta":48,"style":48},[31,33093,33094,33102,33110],{"__ignoreMap":48},[52,33095,33096,33098,33100],{"class":54,"line":55},[52,33097,59],{"class":58},[52,33099,63],{"class":371},[52,33101,77],{"class":58},[52,33103,33104,33106,33108],{"class":54,"line":80},[52,33105,83],{"class":58},[52,33107,33040],{"class":371},[52,33109,105],{"class":58},[52,33111,33112,33114,33116],{"class":54,"line":108},[52,33113,121],{"class":58},[52,33115,63],{"class":371},[52,33117,77],{"class":58},[43,33119,33120],{"className":2507,"code":33063,"language":2509,"meta":48,"style":48},[31,33121,33122,33130,33138],{"__ignoreMap":48},[52,33123,33124,33126,33128],{"class":54,"line":55},[52,33125,59],{"class":58},[52,33127,63],{"class":371},[52,33129,77],{"class":58},[52,33131,33132,33134,33136],{"class":54,"line":80},[52,33133,83],{"class":58},[52,33135,33040],{"class":371},[52,33137,105],{"class":58},[52,33139,33140,33142,33144],{"class":54,"line":108},[52,33141,121],{"class":58},[52,33143,63],{"class":371},[52,33145,77],{"class":58},[43,33147,33148],{"className":419,"code":33063,"language":420,"meta":48,"style":48},[31,33149,33150,33158,33166],{"__ignoreMap":48},[52,33151,33152,33154,33156],{"class":54,"line":55},[52,33153,59],{"class":58},[52,33155,63],{"class":371},[52,33157,77],{"class":58},[52,33159,33160,33162,33164],{"class":54,"line":80},[52,33161,83],{"class":58},[52,33163,33040],{"class":371},[52,33165,105],{"class":58},[52,33167,33168,33170,33172],{"class":54,"line":108},[52,33169,121],{"class":58},[52,33171,63],{"class":371},[52,33173,77],{"class":58},[43,33175,33177],{"className":222,"code":33176,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DOMTexture', props: {} }\n ]\n})\n",[31,33178,33179,33189,33193,33207,33211,33220,33224],{"__ignoreMap":48},[52,33180,33181,33183,33185,33187],{"class":54,"line":55},[52,33182,232],{"class":231},[52,33184,9231],{"class":58},[52,33186,238],{"class":231},[52,33188,9236],{"class":73},[52,33190,33191],{"class":54,"line":80},[52,33192,597],{"emptyLinePlaceholder":171},[52,33194,33195,33197,33199,33201,33203,33205],{"class":54,"line":108},[52,33196,1721],{"class":231},[52,33198,1724],{"class":371},[52,33200,1727],{"class":231},[52,33202,1730],{"class":231},[52,33204,1733],{"class":66},[52,33206,1736],{"class":58},[52,33208,33209],{"class":54,"line":118},[52,33210,1751],{"class":58},[52,33212,33213,33215,33218],{"class":54,"line":594},[52,33214,1756],{"class":58},[52,33216,33217],{"class":73},"'DOMTexture'",[52,33219,2129],{"class":58},[52,33221,33222],{"class":54,"line":600},[52,33223,1773],{"class":58},[52,33225,33226],{"class":54,"line":606},[52,33227,1778],{"class":58},[156,33229,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":33231},[33232],{"id":26912,"depth":80,"text":26913},{},"/docs/components/domtexture",{"title":33040,"description":33048},"docs/components/DOMTexture","3Jc9Zpo0-0aIes_naAYdI0ulUDh5gOfInTZsrpDRdHE",{"id":33239,"title":33240,"body":33241,"category":27760,"componentType":20842,"description":33248,"extension":168,"meta":33433,"navigation":171,"path":33434,"requiresChild":27763,"seo":33435,"stem":33436,"__hash__":33437},"components/docs/components/DiamondGradient.md","DiamondGradient",{"type":8,"value":33242,"toc":33429},[33243,33246,33249,33251,33253,33256,33258,33427],[11,33244,33240],{"id":33245},"diamondgradient",[15,33247,33248],{},"Diamond-shaped gradient radiating from a center point using Manhattan distance",[26901,33250],{"component":33240},[23,33252,26905],{"id":21503},[26907,33254],{":props":33255},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#4ffb4a\",\"description\":\"Color at the center of the diamond\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#4f1238\",\"description\":\"Color at the outer edges of the diamond\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center point of the diamond\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"0.7\",\"description\":\"Extent of the gradient — controls how far Color A reaches before transitioning to Color B\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees — tilts the diamond into a rhombus\"},{\"name\":\"repeat\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Number of times the gradient repeats outward. Values above 1 create concentric diamond or square bands.\"},{\"name\":\"roundness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Morphs from a sharp diamond (0) to a square (1)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"}]",[23,33257,26913],{"id":26912},[217,33259,33260,33289,33317,33345,33373],{":tabs":1543},[43,33261,33263],{"className":45,"code":33262,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiamondGradient />\n\u003C/Shader>\n",[31,33264,33265,33273,33281],{"__ignoreMap":48},[52,33266,33267,33269,33271],{"class":54,"line":55},[52,33268,59],{"class":58},[52,33270,63],{"class":62},[52,33272,77],{"class":58},[52,33274,33275,33277,33279],{"class":54,"line":80},[52,33276,83],{"class":58},[52,33278,33240],{"class":62},[52,33280,105],{"class":58},[52,33282,33283,33285,33287],{"class":54,"line":108},[52,33284,121],{"class":58},[52,33286,63],{"class":62},[52,33288,77],{"class":58},[43,33290,33291],{"className":360,"code":33262,"language":362,"meta":48,"style":48},[31,33292,33293,33301,33309],{"__ignoreMap":48},[52,33294,33295,33297,33299],{"class":54,"line":55},[52,33296,59],{"class":58},[52,33298,63],{"class":371},[52,33300,77],{"class":58},[52,33302,33303,33305,33307],{"class":54,"line":80},[52,33304,83],{"class":58},[52,33306,33240],{"class":371},[52,33308,105],{"class":58},[52,33310,33311,33313,33315],{"class":54,"line":108},[52,33312,121],{"class":58},[52,33314,63],{"class":371},[52,33316,77],{"class":58},[43,33318,33319],{"className":2507,"code":33262,"language":2509,"meta":48,"style":48},[31,33320,33321,33329,33337],{"__ignoreMap":48},[52,33322,33323,33325,33327],{"class":54,"line":55},[52,33324,59],{"class":58},[52,33326,63],{"class":371},[52,33328,77],{"class":58},[52,33330,33331,33333,33335],{"class":54,"line":80},[52,33332,83],{"class":58},[52,33334,33240],{"class":371},[52,33336,105],{"class":58},[52,33338,33339,33341,33343],{"class":54,"line":108},[52,33340,121],{"class":58},[52,33342,63],{"class":371},[52,33344,77],{"class":58},[43,33346,33347],{"className":419,"code":33262,"language":420,"meta":48,"style":48},[31,33348,33349,33357,33365],{"__ignoreMap":48},[52,33350,33351,33353,33355],{"class":54,"line":55},[52,33352,59],{"class":58},[52,33354,63],{"class":371},[52,33356,77],{"class":58},[52,33358,33359,33361,33363],{"class":54,"line":80},[52,33360,83],{"class":58},[52,33362,33240],{"class":371},[52,33364,105],{"class":58},[52,33366,33367,33369,33371],{"class":54,"line":108},[52,33368,121],{"class":58},[52,33370,63],{"class":371},[52,33372,77],{"class":58},[43,33374,33376],{"className":222,"code":33375,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiamondGradient', props: {} }\n ]\n})\n",[31,33377,33378,33388,33392,33406,33410,33419,33423],{"__ignoreMap":48},[52,33379,33380,33382,33384,33386],{"class":54,"line":55},[52,33381,232],{"class":231},[52,33383,9231],{"class":58},[52,33385,238],{"class":231},[52,33387,9236],{"class":73},[52,33389,33390],{"class":54,"line":80},[52,33391,597],{"emptyLinePlaceholder":171},[52,33393,33394,33396,33398,33400,33402,33404],{"class":54,"line":108},[52,33395,1721],{"class":231},[52,33397,1724],{"class":371},[52,33399,1727],{"class":231},[52,33401,1730],{"class":231},[52,33403,1733],{"class":66},[52,33405,1736],{"class":58},[52,33407,33408],{"class":54,"line":118},[52,33409,1751],{"class":58},[52,33411,33412,33414,33417],{"class":54,"line":594},[52,33413,1756],{"class":58},[52,33415,33416],{"class":73},"'DiamondGradient'",[52,33418,2129],{"class":58},[52,33420,33421],{"class":54,"line":600},[52,33422,1773],{"class":58},[52,33424,33425],{"class":54,"line":606},[52,33426,1778],{"class":58},[156,33428,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":33430},[33431,33432],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/diamondgradient",{"title":33240,"description":33248},"docs/components/DiamondGradient","W3BHoGZ6fc-fAWfgQmSTtA86KLBB0VpnmHGDZoyYTOY",{"id":33439,"title":33440,"body":33441,"category":27225,"componentType":20848,"description":33448,"extension":168,"meta":33766,"navigation":171,"path":33767,"requiresChild":171,"seo":33768,"stem":33769,"__hash__":33770},"components/docs/components/DiffuseBlur.md","DiffuseBlur",{"type":8,"value":33442,"toc":33762},[33443,33446,33449,33451,33453,33456,33458,33760],[11,33444,33440],{"id":33445},"diffuseblur",[15,33447,33448],{},"Grain-like pixel displacement at random",[26901,33450],{"component":33440},[23,33452,26905],{"id":21503},[26907,33454],{":props":33455},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Intensity of the diffuse blur effect\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"stretch\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,33457,26913],{"id":26912},[217,33459,33460,33517,33576,33632,33690],{":tabs":1543},[43,33461,33463],{"className":45,"code":33462,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33464,33465,33473,33480,33489,33493,33501,33509],{"__ignoreMap":48},[52,33466,33467,33469,33471],{"class":54,"line":55},[52,33468,59],{"class":58},[52,33470,63],{"class":62},[52,33472,77],{"class":58},[52,33474,33475,33477],{"class":54,"line":80},[52,33476,83],{"class":58},[52,33478,33479],{"class":62},"DiffuseBlur\n",[52,33481,33482,33484,33486],{"class":54,"line":108},[52,33483,17870],{"class":66},[52,33485,70],{"class":58},[52,33487,33488],{"class":73},"\"30\"\n",[52,33490,33491],{"class":54,"line":118},[52,33492,26949],{"class":58},[52,33494,33495,33497,33499],{"class":54,"line":594},[52,33496,2213],{"class":58},[52,33498,2216],{"class":62},[52,33500,105],{"class":58},[52,33502,33503,33505,33507],{"class":54,"line":600},[52,33504,2230],{"class":58},[52,33506,33440],{"class":62},[52,33508,77],{"class":58},[52,33510,33511,33513,33515],{"class":54,"line":606},[52,33512,121],{"class":58},[52,33514,63],{"class":62},[52,33516,77],{"class":58},[43,33518,33520],{"className":360,"code":33519,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDiffuseBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/DiffuseBlur>\n\u003C/Shader>\n",[31,33521,33522,33530,33536,33548,33552,33560,33568],{"__ignoreMap":48},[52,33523,33524,33526,33528],{"class":54,"line":55},[52,33525,59],{"class":58},[52,33527,63],{"class":371},[52,33529,77],{"class":58},[52,33531,33532,33534],{"class":54,"line":80},[52,33533,83],{"class":58},[52,33535,33479],{"class":371},[52,33537,33538,33540,33542,33544,33546],{"class":54,"line":108},[52,33539,17981],{"class":66},[52,33541,70],{"class":231},[52,33543,723],{"class":58},[52,33545,13194],{"class":371},[52,33547,729],{"class":58},[52,33549,33550],{"class":54,"line":118},[52,33551,26949],{"class":58},[52,33553,33554,33556,33558],{"class":54,"line":594},[52,33555,2213],{"class":58},[52,33557,2216],{"class":371},[52,33559,105],{"class":58},[52,33561,33562,33564,33566],{"class":54,"line":600},[52,33563,2230],{"class":58},[52,33565,33440],{"class":371},[52,33567,77],{"class":58},[52,33569,33570,33572,33574],{"class":54,"line":606},[52,33571,121],{"class":58},[52,33573,63],{"class":371},[52,33575,77],{"class":58},[43,33577,33578],{"className":2507,"code":33519,"language":2509,"meta":48,"style":48},[31,33579,33580,33588,33594,33604,33608,33616,33624],{"__ignoreMap":48},[52,33581,33582,33584,33586],{"class":54,"line":55},[52,33583,59],{"class":58},[52,33585,63],{"class":371},[52,33587,77],{"class":58},[52,33589,33590,33592],{"class":54,"line":80},[52,33591,83],{"class":58},[52,33593,33479],{"class":371},[52,33595,33596,33598,33600,33602],{"class":54,"line":108},[52,33597,17981],{"class":66},[52,33599,24845],{"class":58},[52,33601,13194],{"class":371},[52,33603,729],{"class":58},[52,33605,33606],{"class":54,"line":118},[52,33607,26949],{"class":58},[52,33609,33610,33612,33614],{"class":54,"line":594},[52,33611,2213],{"class":58},[52,33613,2216],{"class":371},[52,33615,105],{"class":58},[52,33617,33618,33620,33622],{"class":54,"line":600},[52,33619,2230],{"class":58},[52,33621,33440],{"class":371},[52,33623,77],{"class":58},[52,33625,33626,33628,33630],{"class":54,"line":606},[52,33627,121],{"class":58},[52,33629,63],{"class":371},[52,33631,77],{"class":58},[43,33633,33634],{"className":419,"code":33519,"language":420,"meta":48,"style":48},[31,33635,33636,33644,33650,33662,33666,33674,33682],{"__ignoreMap":48},[52,33637,33638,33640,33642],{"class":54,"line":55},[52,33639,59],{"class":58},[52,33641,63],{"class":371},[52,33643,77],{"class":58},[52,33645,33646,33648],{"class":54,"line":80},[52,33647,83],{"class":58},[52,33649,33479],{"class":371},[52,33651,33652,33654,33656,33658,33660],{"class":54,"line":108},[52,33653,17981],{"class":66},[52,33655,70],{"class":231},[52,33657,723],{"class":58},[52,33659,13194],{"class":371},[52,33661,729],{"class":58},[52,33663,33664],{"class":54,"line":118},[52,33665,26949],{"class":58},[52,33667,33668,33670,33672],{"class":54,"line":594},[52,33669,2213],{"class":58},[52,33671,2216],{"class":371},[52,33673,105],{"class":58},[52,33675,33676,33678,33680],{"class":54,"line":600},[52,33677,2230],{"class":58},[52,33679,33440],{"class":371},[52,33681,77],{"class":58},[52,33683,33684,33686,33688],{"class":54,"line":606},[52,33685,121],{"class":58},[52,33687,63],{"class":371},[52,33689,77],{"class":58},[43,33691,33693],{"className":222,"code":33692,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DiffuseBlur', props: { intensity: 30 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,33694,33695,33705,33709,33723,33727,33740,33748,33752,33756],{"__ignoreMap":48},[52,33696,33697,33699,33701,33703],{"class":54,"line":55},[52,33698,232],{"class":231},[52,33700,9231],{"class":58},[52,33702,238],{"class":231},[52,33704,9236],{"class":73},[52,33706,33707],{"class":54,"line":80},[52,33708,597],{"emptyLinePlaceholder":171},[52,33710,33711,33713,33715,33717,33719,33721],{"class":54,"line":108},[52,33712,1721],{"class":231},[52,33714,1724],{"class":371},[52,33716,1727],{"class":231},[52,33718,1730],{"class":231},[52,33720,1733],{"class":66},[52,33722,1736],{"class":58},[52,33724,33725],{"class":54,"line":118},[52,33726,1751],{"class":58},[52,33728,33729,33731,33734,33736,33738],{"class":54,"line":594},[52,33730,1756],{"class":58},[52,33732,33733],{"class":73},"'DiffuseBlur'",[52,33735,27194],{"class":58},[52,33737,13194],{"class":371},[52,33739,5259],{"class":58},[52,33741,33742,33744,33746],{"class":54,"line":600},[52,33743,4727],{"class":58},[52,33745,2869],{"class":73},[52,33747,2129],{"class":58},[52,33749,33750],{"class":54,"line":606},[52,33751,4744],{"class":58},[52,33753,33754],{"class":54,"line":653},[52,33755,1773],{"class":58},[52,33757,33758],{"class":54,"line":662},[52,33759,1778],{"class":58},[156,33761,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":33763},[33764,33765],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/diffuseblur",{"title":33440,"description":33448},"docs/components/DiffuseBlur","1O2x53VC1vyL7fVmNY6q_6443Y2prh0cOS6bKe1Gsbo",{"id":33772,"title":33773,"body":33774,"category":27503,"componentType":20848,"description":33781,"extension":168,"meta":34042,"navigation":171,"path":34043,"requiresChild":171,"seo":34044,"stem":34045,"__hash__":34046},"components/docs/components/Dither.md","Dither",{"type":8,"value":33775,"toc":34038},[33776,33779,33782,33784,33786,33789,33791,34036],[11,33777,33773],{"id":33778},"dither",[15,33780,33781],{},"Dithering effect with multiple pattern options",[26901,33783],{"component":33773},[23,33785,26905],{"id":21503},[26907,33787],{":props":33788},"[{\"name\":\"pattern\",\"type\":\"\\\"bayer2\\\" | \\\"bayer4\\\" | \\\"bayer8\\\" | \\\"clusteredDot\\\" | \\\"blueNoise\\\" | \\\"whiteNoise\\\"\",\"default\":\"bayer4\",\"description\":\"Dithering pattern algorithm\"},{\"name\":\"pixelSize\",\"type\":\"number\",\"default\":\"4\",\"description\":\"Size of dithering pixels\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Luminance threshold for dithering\"},{\"name\":\"spread\",\"type\":\"number\",\"default\":\"1\",\"description\":\"How much of the luminance range participates in dithering (lower = more solid areas)\"},{\"name\":\"colorMode\",\"type\":\"\\\"custom\\\" | \\\"source\\\"\",\"default\":\"custom\",\"description\":\"How colors are determined\"},{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"transparent\",\"description\":\"Dark color for dithering\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Light color for dithering\"}]",[23,33790,26913],{"id":26912},[217,33792,33793,33838,33882,33926,33970],{":tabs":1543},[43,33794,33796],{"className":45,"code":33795,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDither>\n \u003CCircle />\n \u003C/Dither>\n\u003C/Shader>\n",[31,33797,33798,33806,33814,33822,33830],{"__ignoreMap":48},[52,33799,33800,33802,33804],{"class":54,"line":55},[52,33801,59],{"class":58},[52,33803,63],{"class":62},[52,33805,77],{"class":58},[52,33807,33808,33810,33812],{"class":54,"line":80},[52,33809,83],{"class":58},[52,33811,33773],{"class":62},[52,33813,77],{"class":58},[52,33815,33816,33818,33820],{"class":54,"line":108},[52,33817,2213],{"class":58},[52,33819,2216],{"class":62},[52,33821,105],{"class":58},[52,33823,33824,33826,33828],{"class":54,"line":118},[52,33825,2230],{"class":58},[52,33827,33773],{"class":62},[52,33829,77],{"class":58},[52,33831,33832,33834,33836],{"class":54,"line":594},[52,33833,121],{"class":58},[52,33835,63],{"class":62},[52,33837,77],{"class":58},[43,33839,33840],{"className":360,"code":33795,"language":362,"meta":48,"style":48},[31,33841,33842,33850,33858,33866,33874],{"__ignoreMap":48},[52,33843,33844,33846,33848],{"class":54,"line":55},[52,33845,59],{"class":58},[52,33847,63],{"class":371},[52,33849,77],{"class":58},[52,33851,33852,33854,33856],{"class":54,"line":80},[52,33853,83],{"class":58},[52,33855,33773],{"class":371},[52,33857,77],{"class":58},[52,33859,33860,33862,33864],{"class":54,"line":108},[52,33861,2213],{"class":58},[52,33863,2216],{"class":371},[52,33865,105],{"class":58},[52,33867,33868,33870,33872],{"class":54,"line":118},[52,33869,2230],{"class":58},[52,33871,33773],{"class":371},[52,33873,77],{"class":58},[52,33875,33876,33878,33880],{"class":54,"line":594},[52,33877,121],{"class":58},[52,33879,63],{"class":371},[52,33881,77],{"class":58},[43,33883,33884],{"className":2507,"code":33795,"language":2509,"meta":48,"style":48},[31,33885,33886,33894,33902,33910,33918],{"__ignoreMap":48},[52,33887,33888,33890,33892],{"class":54,"line":55},[52,33889,59],{"class":58},[52,33891,63],{"class":371},[52,33893,77],{"class":58},[52,33895,33896,33898,33900],{"class":54,"line":80},[52,33897,83],{"class":58},[52,33899,33773],{"class":371},[52,33901,77],{"class":58},[52,33903,33904,33906,33908],{"class":54,"line":108},[52,33905,2213],{"class":58},[52,33907,2216],{"class":371},[52,33909,105],{"class":58},[52,33911,33912,33914,33916],{"class":54,"line":118},[52,33913,2230],{"class":58},[52,33915,33773],{"class":371},[52,33917,77],{"class":58},[52,33919,33920,33922,33924],{"class":54,"line":594},[52,33921,121],{"class":58},[52,33923,63],{"class":371},[52,33925,77],{"class":58},[43,33927,33928],{"className":419,"code":33795,"language":420,"meta":48,"style":48},[31,33929,33930,33938,33946,33954,33962],{"__ignoreMap":48},[52,33931,33932,33934,33936],{"class":54,"line":55},[52,33933,59],{"class":58},[52,33935,63],{"class":371},[52,33937,77],{"class":58},[52,33939,33940,33942,33944],{"class":54,"line":80},[52,33941,83],{"class":58},[52,33943,33773],{"class":371},[52,33945,77],{"class":58},[52,33947,33948,33950,33952],{"class":54,"line":108},[52,33949,2213],{"class":58},[52,33951,2216],{"class":371},[52,33953,105],{"class":58},[52,33955,33956,33958,33960],{"class":54,"line":118},[52,33957,2230],{"class":58},[52,33959,33773],{"class":371},[52,33961,77],{"class":58},[52,33963,33964,33966,33968],{"class":54,"line":594},[52,33965,121],{"class":58},[52,33967,63],{"class":371},[52,33969,77],{"class":58},[43,33971,33973],{"className":222,"code":33972,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Dither', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,33974,33975,33985,33989,34003,34007,34016,34024,34028,34032],{"__ignoreMap":48},[52,33976,33977,33979,33981,33983],{"class":54,"line":55},[52,33978,232],{"class":231},[52,33980,9231],{"class":58},[52,33982,238],{"class":231},[52,33984,9236],{"class":73},[52,33986,33987],{"class":54,"line":80},[52,33988,597],{"emptyLinePlaceholder":171},[52,33990,33991,33993,33995,33997,33999,34001],{"class":54,"line":108},[52,33992,1721],{"class":231},[52,33994,1724],{"class":371},[52,33996,1727],{"class":231},[52,33998,1730],{"class":231},[52,34000,1733],{"class":66},[52,34002,1736],{"class":58},[52,34004,34005],{"class":54,"line":118},[52,34006,1751],{"class":58},[52,34008,34009,34011,34014],{"class":54,"line":594},[52,34010,1756],{"class":58},[52,34012,34013],{"class":73},"'Dither'",[52,34015,4722],{"class":58},[52,34017,34018,34020,34022],{"class":54,"line":600},[52,34019,4727],{"class":58},[52,34021,2869],{"class":73},[52,34023,2129],{"class":58},[52,34025,34026],{"class":54,"line":606},[52,34027,4744],{"class":58},[52,34029,34030],{"class":54,"line":653},[52,34031,1773],{"class":58},[52,34033,34034],{"class":54,"line":662},[52,34035,1778],{"class":58},[156,34037,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34039},[34040,34041],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dither",{"title":33773,"description":33781},"docs/components/Dither","vSBBwwWoLyQT04TlgLOWaRYBQOK5bMTlyj9Iz2ieKLg",{"id":34048,"title":34049,"body":34050,"category":27760,"componentType":20842,"description":34057,"extension":168,"meta":34285,"navigation":171,"path":34286,"requiresChild":27763,"seo":34287,"stem":34288,"__hash__":34289},"components/docs/components/DotGrid.md","DotGrid",{"type":8,"value":34051,"toc":34281},[34052,34055,34058,34060,34062,34065,34067,34279],[11,34053,34049],{"id":34054},"dotgrid",[15,34056,34057],{},"Grid of dots with optional twinkling animation",[26901,34059],{"component":34049},[23,34061,26905],{"id":21503},[26907,34063],{":props":34064},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"The color of the dot\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"30\",\"description\":\"The number of dots on the longest canvas edge\"},{\"name\":\"dotSize\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"The size of each dot, zero (0) being invisible, one (1) filled the grid with no gaps\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Intensity of the twinkle effect (0 = off, 1 = full twinkle)\"}]",[23,34066,26913],{"id":26912},[217,34068,34069,34108,34146,34184,34222],{":tabs":1543},[43,34070,34072],{"className":45,"code":34071,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDotGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,34073,34074,34082,34088,34096,34100],{"__ignoreMap":48},[52,34075,34076,34078,34080],{"class":54,"line":55},[52,34077,59],{"class":58},[52,34079,63],{"class":62},[52,34081,77],{"class":58},[52,34083,34084,34086],{"class":54,"line":80},[52,34085,83],{"class":58},[52,34087,17004],{"class":62},[52,34089,34090,34092,34094],{"class":54,"line":108},[52,34091,7351],{"class":66},[52,34093,70],{"class":58},[52,34095,7307],{"class":73},[52,34097,34098],{"class":54,"line":118},[52,34099,1224],{"class":58},[52,34101,34102,34104,34106],{"class":54,"line":594},[52,34103,121],{"class":58},[52,34105,63],{"class":62},[52,34107,77],{"class":58},[43,34109,34110],{"className":360,"code":34071,"language":362,"meta":48,"style":48},[31,34111,34112,34120,34126,34134,34138],{"__ignoreMap":48},[52,34113,34114,34116,34118],{"class":54,"line":55},[52,34115,59],{"class":58},[52,34117,63],{"class":371},[52,34119,77],{"class":58},[52,34121,34122,34124],{"class":54,"line":80},[52,34123,83],{"class":58},[52,34125,17004],{"class":371},[52,34127,34128,34130,34132],{"class":54,"line":108},[52,34129,7351],{"class":66},[52,34131,70],{"class":231},[52,34133,7307],{"class":73},[52,34135,34136],{"class":54,"line":118},[52,34137,1224],{"class":58},[52,34139,34140,34142,34144],{"class":54,"line":594},[52,34141,121],{"class":58},[52,34143,63],{"class":371},[52,34145,77],{"class":58},[43,34147,34148],{"className":2507,"code":34071,"language":2509,"meta":48,"style":48},[31,34149,34150,34158,34164,34172,34176],{"__ignoreMap":48},[52,34151,34152,34154,34156],{"class":54,"line":55},[52,34153,59],{"class":58},[52,34155,63],{"class":371},[52,34157,77],{"class":58},[52,34159,34160,34162],{"class":54,"line":80},[52,34161,83],{"class":58},[52,34163,17004],{"class":371},[52,34165,34166,34168,34170],{"class":54,"line":108},[52,34167,7351],{"class":66},[52,34169,70],{"class":58},[52,34171,7307],{"class":73},[52,34173,34174],{"class":54,"line":118},[52,34175,1224],{"class":58},[52,34177,34178,34180,34182],{"class":54,"line":594},[52,34179,121],{"class":58},[52,34181,63],{"class":371},[52,34183,77],{"class":58},[43,34185,34186],{"className":419,"code":34071,"language":420,"meta":48,"style":48},[31,34187,34188,34196,34202,34210,34214],{"__ignoreMap":48},[52,34189,34190,34192,34194],{"class":54,"line":55},[52,34191,59],{"class":58},[52,34193,63],{"class":371},[52,34195,77],{"class":58},[52,34197,34198,34200],{"class":54,"line":80},[52,34199,83],{"class":58},[52,34201,17004],{"class":371},[52,34203,34204,34206,34208],{"class":54,"line":108},[52,34205,7351],{"class":66},[52,34207,70],{"class":231},[52,34209,7307],{"class":73},[52,34211,34212],{"class":54,"line":118},[52,34213,1224],{"class":58},[52,34215,34216,34218,34220],{"class":54,"line":594},[52,34217,121],{"class":58},[52,34219,63],{"class":371},[52,34221,77],{"class":58},[43,34223,34225],{"className":222,"code":34224,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DotGrid', props: { color: '#ffffff' } }\n ]\n})\n",[31,34226,34227,34237,34241,34255,34259,34271,34275],{"__ignoreMap":48},[52,34228,34229,34231,34233,34235],{"class":54,"line":55},[52,34230,232],{"class":231},[52,34232,9231],{"class":58},[52,34234,238],{"class":231},[52,34236,9236],{"class":73},[52,34238,34239],{"class":54,"line":80},[52,34240,597],{"emptyLinePlaceholder":171},[52,34242,34243,34245,34247,34249,34251,34253],{"class":54,"line":108},[52,34244,1721],{"class":231},[52,34246,1724],{"class":371},[52,34248,1727],{"class":231},[52,34250,1730],{"class":231},[52,34252,1733],{"class":66},[52,34254,1736],{"class":58},[52,34256,34257],{"class":54,"line":118},[52,34258,1751],{"class":58},[52,34260,34261,34263,34265,34267,34269],{"class":54,"line":594},[52,34262,1756],{"class":58},[52,34264,17555],{"class":73},[52,34266,1762],{"class":58},[52,34268,7886],{"class":73},[52,34270,1768],{"class":58},[52,34272,34273],{"class":54,"line":600},[52,34274,1773],{"class":58},[52,34276,34277],{"class":54,"line":606},[52,34278,1778],{"class":58},[156,34280,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34282},[34283,34284],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dotgrid",{"title":34049,"description":34057},"docs/components/DotGrid","rff5nC8qJDr93mnic6Y0wuGJ5pC77bTWRdEes7Wi14s",{"id":34291,"title":34292,"body":34293,"category":27503,"componentType":20848,"description":34300,"extension":168,"meta":34654,"navigation":171,"path":34655,"requiresChild":171,"seo":34656,"stem":34657,"__hash__":34658},"components/docs/components/DropShadow.md","DropShadow",{"type":8,"value":34294,"toc":34650},[34295,34298,34301,34303,34305,34308,34310,34648],[11,34296,34292],{"id":34297},"dropshadow",[15,34299,34300],{},"Adds a soft shadow behind the child content based on its alpha silhouette",[26901,34302],{"component":34292},[23,34304,26905],{"id":21503},[26907,34306],{":props":34307},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Shadow color\"},{\"name\":\"distance\",\"type\":\"number\",\"default\":\"0.1\",\"description\":\"How far the shadow is offset from the content\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"135\",\"description\":\"Direction the shadow is cast (compass degrees: 0=up, 90=right, 135=lower-right, 180=down)\"},{\"name\":\"blur\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Shadow softness (blur radius in pixels)\"},{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Shadow intensity — how strong/visible the shadow is\"},{\"name\":\"cutout\",\"type\":\"boolean\",\"default\":\"false\",\"description\":\"Hide the original layer and show only the shadow\"}]",[23,34309,26913],{"id":26912},[217,34311,34312,34376,34443,34507,34573],{":tabs":1543},[43,34313,34315],{"className":45,"code":34314,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/DropShadow>\n\u003C/Shader>\n",[31,34316,34317,34325,34332,34340,34348,34352,34360,34368],{"__ignoreMap":48},[52,34318,34319,34321,34323],{"class":54,"line":55},[52,34320,59],{"class":58},[52,34322,63],{"class":62},[52,34324,77],{"class":58},[52,34326,34327,34329],{"class":54,"line":80},[52,34328,83],{"class":58},[52,34330,34331],{"class":62},"DropShadow\n",[52,34333,34334,34336,34338],{"class":54,"line":108},[52,34335,7351],{"class":66},[52,34337,70],{"class":58},[52,34339,16975],{"class":73},[52,34341,34342,34344,34346],{"class":54,"line":118},[52,34343,17870],{"class":66},[52,34345,70],{"class":58},[52,34347,32462],{"class":73},[52,34349,34350],{"class":54,"line":594},[52,34351,26949],{"class":58},[52,34353,34354,34356,34358],{"class":54,"line":600},[52,34355,2213],{"class":58},[52,34357,2216],{"class":62},[52,34359,105],{"class":58},[52,34361,34362,34364,34366],{"class":54,"line":606},[52,34363,2230],{"class":58},[52,34365,34292],{"class":62},[52,34367,77],{"class":58},[52,34369,34370,34372,34374],{"class":54,"line":653},[52,34371,121],{"class":58},[52,34373,63],{"class":62},[52,34375,77],{"class":58},[43,34377,34379],{"className":360,"code":34378,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CDropShadow\n color=\"#000000\"\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/DropShadow>\n\u003C/Shader>\n",[31,34380,34381,34389,34395,34403,34415,34419,34427,34435],{"__ignoreMap":48},[52,34382,34383,34385,34387],{"class":54,"line":55},[52,34384,59],{"class":58},[52,34386,63],{"class":371},[52,34388,77],{"class":58},[52,34390,34391,34393],{"class":54,"line":80},[52,34392,83],{"class":58},[52,34394,34331],{"class":371},[52,34396,34397,34399,34401],{"class":54,"line":108},[52,34398,7351],{"class":66},[52,34400,70],{"class":231},[52,34402,16975],{"class":73},[52,34404,34405,34407,34409,34411,34413],{"class":54,"line":118},[52,34406,17981],{"class":66},[52,34408,70],{"class":231},[52,34410,723],{"class":58},[52,34412,5467],{"class":371},[52,34414,729],{"class":58},[52,34416,34417],{"class":54,"line":594},[52,34418,26949],{"class":58},[52,34420,34421,34423,34425],{"class":54,"line":600},[52,34422,2213],{"class":58},[52,34424,2216],{"class":371},[52,34426,105],{"class":58},[52,34428,34429,34431,34433],{"class":54,"line":606},[52,34430,2230],{"class":58},[52,34432,34292],{"class":371},[52,34434,77],{"class":58},[52,34436,34437,34439,34441],{"class":54,"line":653},[52,34438,121],{"class":58},[52,34440,63],{"class":371},[52,34442,77],{"class":58},[43,34444,34445],{"className":2507,"code":34378,"language":2509,"meta":48,"style":48},[31,34446,34447,34455,34461,34469,34479,34483,34491,34499],{"__ignoreMap":48},[52,34448,34449,34451,34453],{"class":54,"line":55},[52,34450,59],{"class":58},[52,34452,63],{"class":371},[52,34454,77],{"class":58},[52,34456,34457,34459],{"class":54,"line":80},[52,34458,83],{"class":58},[52,34460,34331],{"class":371},[52,34462,34463,34465,34467],{"class":54,"line":108},[52,34464,7351],{"class":66},[52,34466,70],{"class":58},[52,34468,16975],{"class":73},[52,34470,34471,34473,34475,34477],{"class":54,"line":118},[52,34472,17981],{"class":66},[52,34474,24845],{"class":58},[52,34476,5467],{"class":371},[52,34478,729],{"class":58},[52,34480,34481],{"class":54,"line":594},[52,34482,26949],{"class":58},[52,34484,34485,34487,34489],{"class":54,"line":600},[52,34486,2213],{"class":58},[52,34488,2216],{"class":371},[52,34490,105],{"class":58},[52,34492,34493,34495,34497],{"class":54,"line":606},[52,34494,2230],{"class":58},[52,34496,34292],{"class":371},[52,34498,77],{"class":58},[52,34500,34501,34503,34505],{"class":54,"line":653},[52,34502,121],{"class":58},[52,34504,63],{"class":371},[52,34506,77],{"class":58},[43,34508,34509],{"className":419,"code":34378,"language":420,"meta":48,"style":48},[31,34510,34511,34519,34525,34533,34545,34549,34557,34565],{"__ignoreMap":48},[52,34512,34513,34515,34517],{"class":54,"line":55},[52,34514,59],{"class":58},[52,34516,63],{"class":371},[52,34518,77],{"class":58},[52,34520,34521,34523],{"class":54,"line":80},[52,34522,83],{"class":58},[52,34524,34331],{"class":371},[52,34526,34527,34529,34531],{"class":54,"line":108},[52,34528,7351],{"class":66},[52,34530,70],{"class":231},[52,34532,16975],{"class":73},[52,34534,34535,34537,34539,34541,34543],{"class":54,"line":118},[52,34536,17981],{"class":66},[52,34538,70],{"class":231},[52,34540,723],{"class":58},[52,34542,5467],{"class":371},[52,34544,729],{"class":58},[52,34546,34547],{"class":54,"line":594},[52,34548,26949],{"class":58},[52,34550,34551,34553,34555],{"class":54,"line":600},[52,34552,2213],{"class":58},[52,34554,2216],{"class":371},[52,34556,105],{"class":58},[52,34558,34559,34561,34563],{"class":54,"line":606},[52,34560,2230],{"class":58},[52,34562,34292],{"class":371},[52,34564,77],{"class":58},[52,34566,34567,34569,34571],{"class":54,"line":653},[52,34568,121],{"class":58},[52,34570,63],{"class":371},[52,34572,77],{"class":58},[43,34574,34576],{"className":222,"code":34575,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'DropShadow', props: { color: '#000000', intensity: 0.5 }, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,34577,34578,34588,34592,34606,34610,34628,34636,34640,34644],{"__ignoreMap":48},[52,34579,34580,34582,34584,34586],{"class":54,"line":55},[52,34581,232],{"class":231},[52,34583,9231],{"class":58},[52,34585,238],{"class":231},[52,34587,9236],{"class":73},[52,34589,34590],{"class":54,"line":80},[52,34591,597],{"emptyLinePlaceholder":171},[52,34593,34594,34596,34598,34600,34602,34604],{"class":54,"line":108},[52,34595,1721],{"class":231},[52,34597,1724],{"class":371},[52,34599,1727],{"class":231},[52,34601,1730],{"class":231},[52,34603,1733],{"class":66},[52,34605,1736],{"class":58},[52,34607,34608],{"class":54,"line":118},[52,34609,1751],{"class":58},[52,34611,34612,34614,34617,34619,34621,34624,34626],{"class":54,"line":594},[52,34613,1756],{"class":58},[52,34615,34616],{"class":73},"'DropShadow'",[52,34618,1762],{"class":58},[52,34620,17534],{"class":73},[52,34622,34623],{"class":58},", intensity: ",[52,34625,5467],{"class":371},[52,34627,5259],{"class":58},[52,34629,34630,34632,34634],{"class":54,"line":600},[52,34631,4727],{"class":58},[52,34633,2869],{"class":73},[52,34635,2129],{"class":58},[52,34637,34638],{"class":54,"line":606},[52,34639,4744],{"class":58},[52,34641,34642],{"class":54,"line":653},[52,34643,1773],{"class":58},[52,34645,34646],{"class":54,"line":662},[52,34647,1778],{"class":58},[156,34649,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":34651},[34652,34653],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/dropshadow",{"title":34292,"description":34300},"docs/components/DropShadow","td5TOMHk7n3QWP7l7ZS7RGsDdHA54GLqJGBGoFVyBz0",{"id":34660,"title":34661,"body":34662,"category":28771,"componentType":20848,"description":34669,"extension":168,"meta":34930,"navigation":171,"path":34931,"requiresChild":171,"seo":34932,"stem":34933,"__hash__":34934},"components/docs/components/Duotone.md","Duotone",{"type":8,"value":34663,"toc":34926},[34664,34667,34670,34672,34674,34677,34679,34924],[11,34665,34661],{"id":34666},"duotone",[15,34668,34669],{},"Map colors to two tones based on luminance",[26901,34671],{"component":34661},[23,34673,26905],{"id":21503},[26907,34675],{":props":34676},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ff0000\",\"description\":\"First color (used for darker areas)\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#023af4\",\"description\":\"Second color (used for brighter areas)\"},{\"name\":\"blend\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Blend point between the two colors\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for color interpolation\"}]",[23,34678,26913],{"id":26912},[217,34680,34681,34726,34770,34814,34858],{":tabs":1543},[43,34682,34684],{"className":45,"code":34683,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CDuotone>\n \u003CCircle />\n \u003C/Duotone>\n\u003C/Shader>\n",[31,34685,34686,34694,34702,34710,34718],{"__ignoreMap":48},[52,34687,34688,34690,34692],{"class":54,"line":55},[52,34689,59],{"class":58},[52,34691,63],{"class":62},[52,34693,77],{"class":58},[52,34695,34696,34698,34700],{"class":54,"line":80},[52,34697,83],{"class":58},[52,34699,34661],{"class":62},[52,34701,77],{"class":58},[52,34703,34704,34706,34708],{"class":54,"line":108},[52,34705,2213],{"class":58},[52,34707,2216],{"class":62},[52,34709,105],{"class":58},[52,34711,34712,34714,34716],{"class":54,"line":118},[52,34713,2230],{"class":58},[52,34715,34661],{"class":62},[52,34717,77],{"class":58},[52,34719,34720,34722,34724],{"class":54,"line":594},[52,34721,121],{"class":58},[52,34723,63],{"class":62},[52,34725,77],{"class":58},[43,34727,34728],{"className":360,"code":34683,"language":362,"meta":48,"style":48},[31,34729,34730,34738,34746,34754,34762],{"__ignoreMap":48},[52,34731,34732,34734,34736],{"class":54,"line":55},[52,34733,59],{"class":58},[52,34735,63],{"class":371},[52,34737,77],{"class":58},[52,34739,34740,34742,34744],{"class":54,"line":80},[52,34741,83],{"class":58},[52,34743,34661],{"class":371},[52,34745,77],{"class":58},[52,34747,34748,34750,34752],{"class":54,"line":108},[52,34749,2213],{"class":58},[52,34751,2216],{"class":371},[52,34753,105],{"class":58},[52,34755,34756,34758,34760],{"class":54,"line":118},[52,34757,2230],{"class":58},[52,34759,34661],{"class":371},[52,34761,77],{"class":58},[52,34763,34764,34766,34768],{"class":54,"line":594},[52,34765,121],{"class":58},[52,34767,63],{"class":371},[52,34769,77],{"class":58},[43,34771,34772],{"className":2507,"code":34683,"language":2509,"meta":48,"style":48},[31,34773,34774,34782,34790,34798,34806],{"__ignoreMap":48},[52,34775,34776,34778,34780],{"class":54,"line":55},[52,34777,59],{"class":58},[52,34779,63],{"class":371},[52,34781,77],{"class":58},[52,34783,34784,34786,34788],{"class":54,"line":80},[52,34785,83],{"class":58},[52,34787,34661],{"class":371},[52,34789,77],{"class":58},[52,34791,34792,34794,34796],{"class":54,"line":108},[52,34793,2213],{"class":58},[52,34795,2216],{"class":371},[52,34797,105],{"class":58},[52,34799,34800,34802,34804],{"class":54,"line":118},[52,34801,2230],{"class":58},[52,34803,34661],{"class":371},[52,34805,77],{"class":58},[52,34807,34808,34810,34812],{"class":54,"line":594},[52,34809,121],{"class":58},[52,34811,63],{"class":371},[52,34813,77],{"class":58},[43,34815,34816],{"className":419,"code":34683,"language":420,"meta":48,"style":48},[31,34817,34818,34826,34834,34842,34850],{"__ignoreMap":48},[52,34819,34820,34822,34824],{"class":54,"line":55},[52,34821,59],{"class":58},[52,34823,63],{"class":371},[52,34825,77],{"class":58},[52,34827,34828,34830,34832],{"class":54,"line":80},[52,34829,83],{"class":58},[52,34831,34661],{"class":371},[52,34833,77],{"class":58},[52,34835,34836,34838,34840],{"class":54,"line":108},[52,34837,2213],{"class":58},[52,34839,2216],{"class":371},[52,34841,105],{"class":58},[52,34843,34844,34846,34848],{"class":54,"line":118},[52,34845,2230],{"class":58},[52,34847,34661],{"class":371},[52,34849,77],{"class":58},[52,34851,34852,34854,34856],{"class":54,"line":594},[52,34853,121],{"class":58},[52,34855,63],{"class":371},[52,34857,77],{"class":58},[43,34859,34861],{"className":222,"code":34860,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Duotone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,34862,34863,34873,34877,34891,34895,34904,34912,34916,34920],{"__ignoreMap":48},[52,34864,34865,34867,34869,34871],{"class":54,"line":55},[52,34866,232],{"class":231},[52,34868,9231],{"class":58},[52,34870,238],{"class":231},[52,34872,9236],{"class":73},[52,34874,34875],{"class":54,"line":80},[52,34876,597],{"emptyLinePlaceholder":171},[52,34878,34879,34881,34883,34885,34887,34889],{"class":54,"line":108},[52,34880,1721],{"class":231},[52,34882,1724],{"class":371},[52,34884,1727],{"class":231},[52,34886,1730],{"class":231},[52,34888,1733],{"class":66},[52,34890,1736],{"class":58},[52,34892,34893],{"class":54,"line":118},[52,34894,1751],{"class":58},[52,34896,34897,34899,34902],{"class":54,"line":594},[52,34898,1756],{"class":58},[52,34900,34901],{"class":73},"'Duotone'",[52,34903,4722],{"class":58},[52,34905,34906,34908,34910],{"class":54,"line":600},[52,34907,4727],{"class":58},[52,34909,2869],{"class":73},[52,34911,2129],{"class":58},[52,34913,34914],{"class":54,"line":606},[52,34915,4744],{"class":58},[52,34917,34918],{"class":54,"line":653},[52,34919,1773],{"class":58},[52,34921,34922],{"class":54,"line":662},[52,34923,1778],{"class":58},[156,34925,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":34927},[34928,34929],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/duotone",{"title":34661,"description":34669},"docs/components/Duotone","2o0osATyvjfzkYAevb9q73ruA9G6xLp3YSwEwHjSxLk",{"id":34936,"title":34937,"body":34938,"category":30727,"componentType":20842,"description":34945,"extension":168,"meta":35175,"navigation":171,"path":35176,"requiresChild":27763,"seo":35177,"stem":35178,"__hash__":35179},"components/docs/components/Ellipse.md","Ellipse",{"type":8,"value":34939,"toc":35171},[34940,34943,34946,34948,34950,34953,34955,35169],[11,34941,34937],{"id":34942},"ellipse",[15,34944,34945],{},"Ellipse with independently adjustable horizontal and vertical radii",[26901,34947],{"component":34937},[23,34949,26905],{"id":21503},[26907,34951],{":props":34952},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the ellipse\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the ellipse\"},{\"name\":\"radiusX\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Horizontal semi-axis radius\"},{\"name\":\"radiusY\",\"type\":\"number\",\"default\":\"0.2\",\"description\":\"Vertical semi-axis radius\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[23,34954,26913],{"id":26912},[217,34956,34957,34997,35035,35073,35111],{":tabs":1543},[43,34958,34960],{"className":45,"code":34959,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEllipse\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,34961,34962,34970,34977,34985,34989],{"__ignoreMap":48},[52,34963,34964,34966,34968],{"class":54,"line":55},[52,34965,59],{"class":58},[52,34967,63],{"class":62},[52,34969,77],{"class":58},[52,34971,34972,34974],{"class":54,"line":80},[52,34973,83],{"class":58},[52,34975,34976],{"class":62},"Ellipse\n",[52,34978,34979,34981,34983],{"class":54,"line":108},[52,34980,7351],{"class":66},[52,34982,70],{"class":58},[52,34984,7307],{"class":73},[52,34986,34987],{"class":54,"line":118},[52,34988,1224],{"class":58},[52,34990,34991,34993,34995],{"class":54,"line":594},[52,34992,121],{"class":58},[52,34994,63],{"class":62},[52,34996,77],{"class":58},[43,34998,34999],{"className":360,"code":34959,"language":362,"meta":48,"style":48},[31,35000,35001,35009,35015,35023,35027],{"__ignoreMap":48},[52,35002,35003,35005,35007],{"class":54,"line":55},[52,35004,59],{"class":58},[52,35006,63],{"class":371},[52,35008,77],{"class":58},[52,35010,35011,35013],{"class":54,"line":80},[52,35012,83],{"class":58},[52,35014,34976],{"class":371},[52,35016,35017,35019,35021],{"class":54,"line":108},[52,35018,7351],{"class":66},[52,35020,70],{"class":231},[52,35022,7307],{"class":73},[52,35024,35025],{"class":54,"line":118},[52,35026,1224],{"class":58},[52,35028,35029,35031,35033],{"class":54,"line":594},[52,35030,121],{"class":58},[52,35032,63],{"class":371},[52,35034,77],{"class":58},[43,35036,35037],{"className":2507,"code":34959,"language":2509,"meta":48,"style":48},[31,35038,35039,35047,35053,35061,35065],{"__ignoreMap":48},[52,35040,35041,35043,35045],{"class":54,"line":55},[52,35042,59],{"class":58},[52,35044,63],{"class":371},[52,35046,77],{"class":58},[52,35048,35049,35051],{"class":54,"line":80},[52,35050,83],{"class":58},[52,35052,34976],{"class":371},[52,35054,35055,35057,35059],{"class":54,"line":108},[52,35056,7351],{"class":66},[52,35058,70],{"class":58},[52,35060,7307],{"class":73},[52,35062,35063],{"class":54,"line":118},[52,35064,1224],{"class":58},[52,35066,35067,35069,35071],{"class":54,"line":594},[52,35068,121],{"class":58},[52,35070,63],{"class":371},[52,35072,77],{"class":58},[43,35074,35075],{"className":419,"code":34959,"language":420,"meta":48,"style":48},[31,35076,35077,35085,35091,35099,35103],{"__ignoreMap":48},[52,35078,35079,35081,35083],{"class":54,"line":55},[52,35080,59],{"class":58},[52,35082,63],{"class":371},[52,35084,77],{"class":58},[52,35086,35087,35089],{"class":54,"line":80},[52,35088,83],{"class":58},[52,35090,34976],{"class":371},[52,35092,35093,35095,35097],{"class":54,"line":108},[52,35094,7351],{"class":66},[52,35096,70],{"class":231},[52,35098,7307],{"class":73},[52,35100,35101],{"class":54,"line":118},[52,35102,1224],{"class":58},[52,35104,35105,35107,35109],{"class":54,"line":594},[52,35106,121],{"class":58},[52,35108,63],{"class":371},[52,35110,77],{"class":58},[43,35112,35114],{"className":222,"code":35113,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Ellipse', props: { color: '#ffffff' } }\n ]\n})\n",[31,35115,35116,35126,35130,35144,35148,35161,35165],{"__ignoreMap":48},[52,35117,35118,35120,35122,35124],{"class":54,"line":55},[52,35119,232],{"class":231},[52,35121,9231],{"class":58},[52,35123,238],{"class":231},[52,35125,9236],{"class":73},[52,35127,35128],{"class":54,"line":80},[52,35129,597],{"emptyLinePlaceholder":171},[52,35131,35132,35134,35136,35138,35140,35142],{"class":54,"line":108},[52,35133,1721],{"class":231},[52,35135,1724],{"class":371},[52,35137,1727],{"class":231},[52,35139,1730],{"class":231},[52,35141,1733],{"class":66},[52,35143,1736],{"class":58},[52,35145,35146],{"class":54,"line":118},[52,35147,1751],{"class":58},[52,35149,35150,35152,35155,35157,35159],{"class":54,"line":594},[52,35151,1756],{"class":58},[52,35153,35154],{"class":73},"'Ellipse'",[52,35156,1762],{"class":58},[52,35158,7886],{"class":73},[52,35160,1768],{"class":58},[52,35162,35163],{"class":54,"line":600},[52,35164,1773],{"class":58},[52,35166,35167],{"class":54,"line":606},[52,35168,1778],{"class":58},[156,35170,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":35172},[35173,35174],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ellipse",{"title":34937,"description":34945},"docs/components/Ellipse","sFJVn5BugjFX56tqWAc3JPjipnyhOd3SjxtnI-YtpfE",{"id":35181,"title":18481,"body":35182,"category":32398,"componentType":20848,"description":35189,"extension":168,"meta":35449,"navigation":171,"path":35450,"requiresChild":171,"seo":35451,"stem":35452,"__hash__":35453},"components/docs/components/Emboss.md",{"type":8,"value":35183,"toc":35445},[35184,35187,35190,35192,35194,35197,35199,35443],[11,35185,18481],{"id":35186},"emboss",[15,35188,35189],{},"Embossed / debossed relief shading on top of child content, driven by a custom shape",[26901,35191],{"component":18481},[23,35193,26905],{"id":21503},[26907,35195],{":props":35196},"[{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the embossed shape\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Scale of the embossed shape (1 = default size)\"},{\"name\":\"depth\",\"type\":\"number\",\"default\":\"-0.5\",\"description\":\"Relief depth — negative = inset (debossed), positive = raised (embossed)\"},{\"name\":\"lightAngle\",\"type\":\"number\",\"default\":\"260\",\"description\":\"Directional light angle in degrees — controls highlight and shadow direction\"},{\"name\":\"lightIntensity\",\"type\":\"number\",\"default\":\"0.6\",\"description\":\"Strength of the directional edge highlights and shadows\"},{\"name\":\"shadowIntensity\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Darkness of the relief shadow\"},{\"name\":\"shape\",\"type\":\"ShapeConfig\",\"default\":\"circleSDF\",\"description\":\"Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the [Shape Effects guide](/docs/guide/shape-effects) for all available shapes and their options.\"},{\"name\":\"shapeSdfUrl\",\"type\":\"string\",\"default\":\"\\\"\\\"\",\"description\":\"URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the [Shape Effects guide](/docs/guide/shape-effects) for how to generate an SDF from an SVG.\"}]",[23,35198,26913],{"id":26912},[217,35200,35201,35246,35290,35334,35378],{":tabs":1543},[43,35202,35204],{"className":45,"code":35203,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CEmboss>\n \u003CCircle />\n \u003C/Emboss>\n\u003C/Shader>\n",[31,35205,35206,35214,35222,35230,35238],{"__ignoreMap":48},[52,35207,35208,35210,35212],{"class":54,"line":55},[52,35209,59],{"class":58},[52,35211,63],{"class":62},[52,35213,77],{"class":58},[52,35215,35216,35218,35220],{"class":54,"line":80},[52,35217,83],{"class":58},[52,35219,18481],{"class":62},[52,35221,77],{"class":58},[52,35223,35224,35226,35228],{"class":54,"line":108},[52,35225,2213],{"class":58},[52,35227,2216],{"class":62},[52,35229,105],{"class":58},[52,35231,35232,35234,35236],{"class":54,"line":118},[52,35233,2230],{"class":58},[52,35235,18481],{"class":62},[52,35237,77],{"class":58},[52,35239,35240,35242,35244],{"class":54,"line":594},[52,35241,121],{"class":58},[52,35243,63],{"class":62},[52,35245,77],{"class":58},[43,35247,35248],{"className":360,"code":35203,"language":362,"meta":48,"style":48},[31,35249,35250,35258,35266,35274,35282],{"__ignoreMap":48},[52,35251,35252,35254,35256],{"class":54,"line":55},[52,35253,59],{"class":58},[52,35255,63],{"class":371},[52,35257,77],{"class":58},[52,35259,35260,35262,35264],{"class":54,"line":80},[52,35261,83],{"class":58},[52,35263,18481],{"class":371},[52,35265,77],{"class":58},[52,35267,35268,35270,35272],{"class":54,"line":108},[52,35269,2213],{"class":58},[52,35271,2216],{"class":371},[52,35273,105],{"class":58},[52,35275,35276,35278,35280],{"class":54,"line":118},[52,35277,2230],{"class":58},[52,35279,18481],{"class":371},[52,35281,77],{"class":58},[52,35283,35284,35286,35288],{"class":54,"line":594},[52,35285,121],{"class":58},[52,35287,63],{"class":371},[52,35289,77],{"class":58},[43,35291,35292],{"className":2507,"code":35203,"language":2509,"meta":48,"style":48},[31,35293,35294,35302,35310,35318,35326],{"__ignoreMap":48},[52,35295,35296,35298,35300],{"class":54,"line":55},[52,35297,59],{"class":58},[52,35299,63],{"class":371},[52,35301,77],{"class":58},[52,35303,35304,35306,35308],{"class":54,"line":80},[52,35305,83],{"class":58},[52,35307,18481],{"class":371},[52,35309,77],{"class":58},[52,35311,35312,35314,35316],{"class":54,"line":108},[52,35313,2213],{"class":58},[52,35315,2216],{"class":371},[52,35317,105],{"class":58},[52,35319,35320,35322,35324],{"class":54,"line":118},[52,35321,2230],{"class":58},[52,35323,18481],{"class":371},[52,35325,77],{"class":58},[52,35327,35328,35330,35332],{"class":54,"line":594},[52,35329,121],{"class":58},[52,35331,63],{"class":371},[52,35333,77],{"class":58},[43,35335,35336],{"className":419,"code":35203,"language":420,"meta":48,"style":48},[31,35337,35338,35346,35354,35362,35370],{"__ignoreMap":48},[52,35339,35340,35342,35344],{"class":54,"line":55},[52,35341,59],{"class":58},[52,35343,63],{"class":371},[52,35345,77],{"class":58},[52,35347,35348,35350,35352],{"class":54,"line":80},[52,35349,83],{"class":58},[52,35351,18481],{"class":371},[52,35353,77],{"class":58},[52,35355,35356,35358,35360],{"class":54,"line":108},[52,35357,2213],{"class":58},[52,35359,2216],{"class":371},[52,35361,105],{"class":58},[52,35363,35364,35366,35368],{"class":54,"line":118},[52,35365,2230],{"class":58},[52,35367,18481],{"class":371},[52,35369,77],{"class":58},[52,35371,35372,35374,35376],{"class":54,"line":594},[52,35373,121],{"class":58},[52,35375,63],{"class":371},[52,35377,77],{"class":58},[43,35379,35381],{"className":222,"code":35380,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Emboss', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,35382,35383,35393,35397,35411,35415,35423,35431,35435,35439],{"__ignoreMap":48},[52,35384,35385,35387,35389,35391],{"class":54,"line":55},[52,35386,232],{"class":231},[52,35388,9231],{"class":58},[52,35390,238],{"class":231},[52,35392,9236],{"class":73},[52,35394,35395],{"class":54,"line":80},[52,35396,597],{"emptyLinePlaceholder":171},[52,35398,35399,35401,35403,35405,35407,35409],{"class":54,"line":108},[52,35400,1721],{"class":231},[52,35402,1724],{"class":371},[52,35404,1727],{"class":231},[52,35406,1730],{"class":231},[52,35408,1733],{"class":66},[52,35410,1736],{"class":58},[52,35412,35413],{"class":54,"line":118},[52,35414,1751],{"class":58},[52,35416,35417,35419,35421],{"class":54,"line":594},[52,35418,1756],{"class":58},[52,35420,19129],{"class":73},[52,35422,4722],{"class":58},[52,35424,35425,35427,35429],{"class":54,"line":600},[52,35426,4727],{"class":58},[52,35428,2869],{"class":73},[52,35430,2129],{"class":58},[52,35432,35433],{"class":54,"line":606},[52,35434,4744],{"class":58},[52,35436,35437],{"class":54,"line":653},[52,35438,1773],{"class":58},[52,35440,35441],{"class":54,"line":662},[52,35442,1778],{"class":58},[156,35444,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35446},[35447,35448],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/emboss",{"title":18481,"description":35189},"docs/components/Emboss","WwvKDy2qWpXwryJnP519jjggSu55SiQ81PlBmxICUq0",{"id":35455,"title":35456,"body":35457,"category":27760,"componentType":20842,"description":35464,"extension":168,"meta":35649,"navigation":171,"path":35650,"requiresChild":27763,"seo":35651,"stem":35652,"__hash__":35653},"components/docs/components/FallingLines.md","FallingLines",{"type":8,"value":35458,"toc":35645},[35459,35462,35465,35467,35469,35472,35474,35643],[11,35460,35456],{"id":35461},"fallinglines",[15,35463,35464],{},"Directional falling lines with a leading-to-trailing color fade",[26901,35466],{"component":35456},[23,35468,26905],{"id":21503},[26907,35470],{":props":35471},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color at the leading edge of each line\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#ffffff00\",\"description\":\"Color at the trailing edge (transparent by default)\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for interpolation between lead and trail colors\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Direction of movement in degrees (90=down, 270=up, 0=right, 180=left)\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Movement speed\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-line speed variance (0=uniform, 1=high variance)\"},{\"name\":\"density\",\"type\":\"number\",\"default\":\"15\",\"description\":\"Number of line columns across the canvas\"},{\"name\":\"trailLength\",\"type\":\"number\",\"default\":\"0.35\",\"description\":\"Streak length relative to spacing (0=point, 1=continuous)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Color mix midpoint (0.5=linear, 0=all trailing/colorB, 1=all leading/colorA)\"},{\"name\":\"strokeWidth\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Line thickness as fraction of column width (0=hairline, 1=full width)\"},{\"name\":\"rounding\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Rounds the leading edge (0=flat/square, 1=fully rounded cap)\"}]",[23,35473,26913],{"id":26912},[217,35475,35476,35505,35533,35561,35589],{":tabs":1543},[43,35477,35479],{"className":45,"code":35478,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFallingLines />\n\u003C/Shader>\n",[31,35480,35481,35489,35497],{"__ignoreMap":48},[52,35482,35483,35485,35487],{"class":54,"line":55},[52,35484,59],{"class":58},[52,35486,63],{"class":62},[52,35488,77],{"class":58},[52,35490,35491,35493,35495],{"class":54,"line":80},[52,35492,83],{"class":58},[52,35494,35456],{"class":62},[52,35496,105],{"class":58},[52,35498,35499,35501,35503],{"class":54,"line":108},[52,35500,121],{"class":58},[52,35502,63],{"class":62},[52,35504,77],{"class":58},[43,35506,35507],{"className":360,"code":35478,"language":362,"meta":48,"style":48},[31,35508,35509,35517,35525],{"__ignoreMap":48},[52,35510,35511,35513,35515],{"class":54,"line":55},[52,35512,59],{"class":58},[52,35514,63],{"class":371},[52,35516,77],{"class":58},[52,35518,35519,35521,35523],{"class":54,"line":80},[52,35520,83],{"class":58},[52,35522,35456],{"class":371},[52,35524,105],{"class":58},[52,35526,35527,35529,35531],{"class":54,"line":108},[52,35528,121],{"class":58},[52,35530,63],{"class":371},[52,35532,77],{"class":58},[43,35534,35535],{"className":2507,"code":35478,"language":2509,"meta":48,"style":48},[31,35536,35537,35545,35553],{"__ignoreMap":48},[52,35538,35539,35541,35543],{"class":54,"line":55},[52,35540,59],{"class":58},[52,35542,63],{"class":371},[52,35544,77],{"class":58},[52,35546,35547,35549,35551],{"class":54,"line":80},[52,35548,83],{"class":58},[52,35550,35456],{"class":371},[52,35552,105],{"class":58},[52,35554,35555,35557,35559],{"class":54,"line":108},[52,35556,121],{"class":58},[52,35558,63],{"class":371},[52,35560,77],{"class":58},[43,35562,35563],{"className":419,"code":35478,"language":420,"meta":48,"style":48},[31,35564,35565,35573,35581],{"__ignoreMap":48},[52,35566,35567,35569,35571],{"class":54,"line":55},[52,35568,59],{"class":58},[52,35570,63],{"class":371},[52,35572,77],{"class":58},[52,35574,35575,35577,35579],{"class":54,"line":80},[52,35576,83],{"class":58},[52,35578,35456],{"class":371},[52,35580,105],{"class":58},[52,35582,35583,35585,35587],{"class":54,"line":108},[52,35584,121],{"class":58},[52,35586,63],{"class":371},[52,35588,77],{"class":58},[43,35590,35592],{"className":222,"code":35591,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FallingLines', props: {} }\n ]\n})\n",[31,35593,35594,35604,35608,35622,35626,35635,35639],{"__ignoreMap":48},[52,35595,35596,35598,35600,35602],{"class":54,"line":55},[52,35597,232],{"class":231},[52,35599,9231],{"class":58},[52,35601,238],{"class":231},[52,35603,9236],{"class":73},[52,35605,35606],{"class":54,"line":80},[52,35607,597],{"emptyLinePlaceholder":171},[52,35609,35610,35612,35614,35616,35618,35620],{"class":54,"line":108},[52,35611,1721],{"class":231},[52,35613,1724],{"class":371},[52,35615,1727],{"class":231},[52,35617,1730],{"class":231},[52,35619,1733],{"class":66},[52,35621,1736],{"class":58},[52,35623,35624],{"class":54,"line":118},[52,35625,1751],{"class":58},[52,35627,35628,35630,35633],{"class":54,"line":594},[52,35629,1756],{"class":58},[52,35631,35632],{"class":73},"'FallingLines'",[52,35634,2129],{"class":58},[52,35636,35637],{"class":54,"line":600},[52,35638,1773],{"class":58},[52,35640,35641],{"class":54,"line":606},[52,35642,1778],{"class":58},[156,35644,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35646},[35647,35648],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fallinglines",{"title":35456,"description":35464},"docs/components/FallingLines","aOb-aRmQe2vEAhPVblw1Cg9Dc1GCz5_5G9iDUtJyW4s",{"id":35655,"title":35656,"body":35657,"category":27503,"componentType":20848,"description":35664,"extension":168,"meta":35925,"navigation":171,"path":35926,"requiresChild":171,"seo":35927,"stem":35928,"__hash__":35929},"components/docs/components/FilmGrain.md","FilmGrain",{"type":8,"value":35658,"toc":35921},[35659,35662,35665,35667,35669,35672,35674,35919],[11,35660,35656],{"id":35661},"filmgrain",[15,35663,35664],{},"Analog film grain texture overlay, weighted toward darker areas",[26901,35666],{"component":35656},[23,35668,26905],{"id":21503},[26907,35670],{":props":35671},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the film grain noise\"},{\"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,35673,26913],{"id":26912},[217,35675,35676,35721,35765,35809,35853],{":tabs":1543},[43,35677,35679],{"className":45,"code":35678,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFilmGrain>\n \u003CCircle />\n \u003C/FilmGrain>\n\u003C/Shader>\n",[31,35680,35681,35689,35697,35705,35713],{"__ignoreMap":48},[52,35682,35683,35685,35687],{"class":54,"line":55},[52,35684,59],{"class":58},[52,35686,63],{"class":62},[52,35688,77],{"class":58},[52,35690,35691,35693,35695],{"class":54,"line":80},[52,35692,83],{"class":58},[52,35694,35656],{"class":62},[52,35696,77],{"class":58},[52,35698,35699,35701,35703],{"class":54,"line":108},[52,35700,2213],{"class":58},[52,35702,2216],{"class":62},[52,35704,105],{"class":58},[52,35706,35707,35709,35711],{"class":54,"line":118},[52,35708,2230],{"class":58},[52,35710,35656],{"class":62},[52,35712,77],{"class":58},[52,35714,35715,35717,35719],{"class":54,"line":594},[52,35716,121],{"class":58},[52,35718,63],{"class":62},[52,35720,77],{"class":58},[43,35722,35723],{"className":360,"code":35678,"language":362,"meta":48,"style":48},[31,35724,35725,35733,35741,35749,35757],{"__ignoreMap":48},[52,35726,35727,35729,35731],{"class":54,"line":55},[52,35728,59],{"class":58},[52,35730,63],{"class":371},[52,35732,77],{"class":58},[52,35734,35735,35737,35739],{"class":54,"line":80},[52,35736,83],{"class":58},[52,35738,35656],{"class":371},[52,35740,77],{"class":58},[52,35742,35743,35745,35747],{"class":54,"line":108},[52,35744,2213],{"class":58},[52,35746,2216],{"class":371},[52,35748,105],{"class":58},[52,35750,35751,35753,35755],{"class":54,"line":118},[52,35752,2230],{"class":58},[52,35754,35656],{"class":371},[52,35756,77],{"class":58},[52,35758,35759,35761,35763],{"class":54,"line":594},[52,35760,121],{"class":58},[52,35762,63],{"class":371},[52,35764,77],{"class":58},[43,35766,35767],{"className":2507,"code":35678,"language":2509,"meta":48,"style":48},[31,35768,35769,35777,35785,35793,35801],{"__ignoreMap":48},[52,35770,35771,35773,35775],{"class":54,"line":55},[52,35772,59],{"class":58},[52,35774,63],{"class":371},[52,35776,77],{"class":58},[52,35778,35779,35781,35783],{"class":54,"line":80},[52,35780,83],{"class":58},[52,35782,35656],{"class":371},[52,35784,77],{"class":58},[52,35786,35787,35789,35791],{"class":54,"line":108},[52,35788,2213],{"class":58},[52,35790,2216],{"class":371},[52,35792,105],{"class":58},[52,35794,35795,35797,35799],{"class":54,"line":118},[52,35796,2230],{"class":58},[52,35798,35656],{"class":371},[52,35800,77],{"class":58},[52,35802,35803,35805,35807],{"class":54,"line":594},[52,35804,121],{"class":58},[52,35806,63],{"class":371},[52,35808,77],{"class":58},[43,35810,35811],{"className":419,"code":35678,"language":420,"meta":48,"style":48},[31,35812,35813,35821,35829,35837,35845],{"__ignoreMap":48},[52,35814,35815,35817,35819],{"class":54,"line":55},[52,35816,59],{"class":58},[52,35818,63],{"class":371},[52,35820,77],{"class":58},[52,35822,35823,35825,35827],{"class":54,"line":80},[52,35824,83],{"class":58},[52,35826,35656],{"class":371},[52,35828,77],{"class":58},[52,35830,35831,35833,35835],{"class":54,"line":108},[52,35832,2213],{"class":58},[52,35834,2216],{"class":371},[52,35836,105],{"class":58},[52,35838,35839,35841,35843],{"class":54,"line":118},[52,35840,2230],{"class":58},[52,35842,35656],{"class":371},[52,35844,77],{"class":58},[52,35846,35847,35849,35851],{"class":54,"line":594},[52,35848,121],{"class":58},[52,35850,63],{"class":371},[52,35852,77],{"class":58},[43,35854,35856],{"className":222,"code":35855,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FilmGrain', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,35857,35858,35868,35872,35886,35890,35899,35907,35911,35915],{"__ignoreMap":48},[52,35859,35860,35862,35864,35866],{"class":54,"line":55},[52,35861,232],{"class":231},[52,35863,9231],{"class":58},[52,35865,238],{"class":231},[52,35867,9236],{"class":73},[52,35869,35870],{"class":54,"line":80},[52,35871,597],{"emptyLinePlaceholder":171},[52,35873,35874,35876,35878,35880,35882,35884],{"class":54,"line":108},[52,35875,1721],{"class":231},[52,35877,1724],{"class":371},[52,35879,1727],{"class":231},[52,35881,1730],{"class":231},[52,35883,1733],{"class":66},[52,35885,1736],{"class":58},[52,35887,35888],{"class":54,"line":118},[52,35889,1751],{"class":58},[52,35891,35892,35894,35897],{"class":54,"line":594},[52,35893,1756],{"class":58},[52,35895,35896],{"class":73},"'FilmGrain'",[52,35898,4722],{"class":58},[52,35900,35901,35903,35905],{"class":54,"line":600},[52,35902,4727],{"class":58},[52,35904,2869],{"class":73},[52,35906,2129],{"class":58},[52,35908,35909],{"class":54,"line":606},[52,35910,4744],{"class":58},[52,35912,35913],{"class":54,"line":653},[52,35914,1773],{"class":58},[52,35916,35917],{"class":54,"line":662},[52,35918,1778],{"class":58},[156,35920,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":35922},[35923,35924],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/filmgrain",{"title":35656,"description":35664},"docs/components/FilmGrain","xCkdZGtXF1eXKMJ_nD-mHs5NngdQJ_dtBbbdqRpVcKs",{"id":35931,"title":35932,"body":35933,"category":27760,"componentType":20842,"description":35940,"extension":168,"meta":36125,"navigation":171,"path":36126,"requiresChild":27763,"seo":36127,"stem":36128,"__hash__":36129},"components/docs/components/FloatingParticles.md","FloatingParticles",{"type":8,"value":35934,"toc":36121},[35935,35938,35941,35943,35945,35948,35950,36119],[11,35936,35932],{"id":35937},"floatingparticles",[15,35939,35940],{},"Animated floating particles with twinkle effects",[26901,35942],{"component":35932},[23,35944,26905],{"id":21503},[26907,35946],{":props":35947},"[{\"name\":\"randomness\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Randomness of particle animation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0.25\",\"description\":\"Speed of particle movement\"},{\"name\":\"angle\",\"type\":\"number\",\"default\":\"90\",\"description\":\"Movement angle in degrees (0=right, 90=down, 180=left, 270=up)\"},{\"name\":\"particleSize\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Size of particles\"},{\"name\":\"particleSoftness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness of particles (0 = sharp, 1 = very soft)\"},{\"name\":\"twinkle\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Intensity of the twinkle effect (0 = off, 1 = full twinkle)\"},{\"name\":\"count\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of particle layers\"},{\"name\":\"particleColor\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Color of the particles\"},{\"name\":\"speedVariance\",\"type\":\"number\",\"default\":\"0.3\",\"description\":\"Per-layer speed variance (0 = all layers same speed, 1 = high variance)\"},{\"name\":\"angleVariance\",\"type\":\"number\",\"default\":\"30\",\"description\":\"Per-layer angle variance in degrees (0 = all layers same angle, 180 = full variance)\"},{\"name\":\"particleDensity\",\"type\":\"number\",\"default\":\"3\",\"description\":\"Particle density (lower = more spread out, higher = more dense)\"}]",[23,35949,26913],{"id":26912},[217,35951,35952,35981,36009,36037,36065],{":tabs":1543},[43,35953,35955],{"className":45,"code":35954,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFloatingParticles />\n\u003C/Shader>\n",[31,35956,35957,35965,35973],{"__ignoreMap":48},[52,35958,35959,35961,35963],{"class":54,"line":55},[52,35960,59],{"class":58},[52,35962,63],{"class":62},[52,35964,77],{"class":58},[52,35966,35967,35969,35971],{"class":54,"line":80},[52,35968,83],{"class":58},[52,35970,35932],{"class":62},[52,35972,105],{"class":58},[52,35974,35975,35977,35979],{"class":54,"line":108},[52,35976,121],{"class":58},[52,35978,63],{"class":62},[52,35980,77],{"class":58},[43,35982,35983],{"className":360,"code":35954,"language":362,"meta":48,"style":48},[31,35984,35985,35993,36001],{"__ignoreMap":48},[52,35986,35987,35989,35991],{"class":54,"line":55},[52,35988,59],{"class":58},[52,35990,63],{"class":371},[52,35992,77],{"class":58},[52,35994,35995,35997,35999],{"class":54,"line":80},[52,35996,83],{"class":58},[52,35998,35932],{"class":371},[52,36000,105],{"class":58},[52,36002,36003,36005,36007],{"class":54,"line":108},[52,36004,121],{"class":58},[52,36006,63],{"class":371},[52,36008,77],{"class":58},[43,36010,36011],{"className":2507,"code":35954,"language":2509,"meta":48,"style":48},[31,36012,36013,36021,36029],{"__ignoreMap":48},[52,36014,36015,36017,36019],{"class":54,"line":55},[52,36016,59],{"class":58},[52,36018,63],{"class":371},[52,36020,77],{"class":58},[52,36022,36023,36025,36027],{"class":54,"line":80},[52,36024,83],{"class":58},[52,36026,35932],{"class":371},[52,36028,105],{"class":58},[52,36030,36031,36033,36035],{"class":54,"line":108},[52,36032,121],{"class":58},[52,36034,63],{"class":371},[52,36036,77],{"class":58},[43,36038,36039],{"className":419,"code":35954,"language":420,"meta":48,"style":48},[31,36040,36041,36049,36057],{"__ignoreMap":48},[52,36042,36043,36045,36047],{"class":54,"line":55},[52,36044,59],{"class":58},[52,36046,63],{"class":371},[52,36048,77],{"class":58},[52,36050,36051,36053,36055],{"class":54,"line":80},[52,36052,83],{"class":58},[52,36054,35932],{"class":371},[52,36056,105],{"class":58},[52,36058,36059,36061,36063],{"class":54,"line":108},[52,36060,121],{"class":58},[52,36062,63],{"class":371},[52,36064,77],{"class":58},[43,36066,36068],{"className":222,"code":36067,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FloatingParticles', props: {} }\n ]\n})\n",[31,36069,36070,36080,36084,36098,36102,36111,36115],{"__ignoreMap":48},[52,36071,36072,36074,36076,36078],{"class":54,"line":55},[52,36073,232],{"class":231},[52,36075,9231],{"class":58},[52,36077,238],{"class":231},[52,36079,9236],{"class":73},[52,36081,36082],{"class":54,"line":80},[52,36083,597],{"emptyLinePlaceholder":171},[52,36085,36086,36088,36090,36092,36094,36096],{"class":54,"line":108},[52,36087,1721],{"class":231},[52,36089,1724],{"class":371},[52,36091,1727],{"class":231},[52,36093,1730],{"class":231},[52,36095,1733],{"class":66},[52,36097,1736],{"class":58},[52,36099,36100],{"class":54,"line":118},[52,36101,1751],{"class":58},[52,36103,36104,36106,36109],{"class":54,"line":594},[52,36105,1756],{"class":58},[52,36107,36108],{"class":73},"'FloatingParticles'",[52,36110,2129],{"class":58},[52,36112,36113],{"class":54,"line":600},[52,36114,1773],{"class":58},[52,36116,36117],{"class":54,"line":606},[52,36118,1778],{"class":58},[156,36120,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36122},[36123,36124],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/floatingparticles",{"title":35932,"description":35940},"docs/components/FloatingParticles","Iq9f03TDJIBKJRnF-3tKWsxAlJE1wn8qxIuVUQk0pCQ",{"id":36131,"title":36132,"body":36133,"category":29105,"componentType":20848,"description":36140,"extension":168,"meta":36401,"navigation":171,"path":36402,"requiresChild":171,"seo":36403,"stem":36404,"__hash__":36405},"components/docs/components/FlowField.md","FlowField",{"type":8,"value":36134,"toc":36397},[36135,36138,36141,36143,36145,36148,36150,36395],[11,36136,36132],{"id":36137},"flowfield",[15,36139,36140],{},"Fluid-like distortion with constant smooth motion",[26901,36142],{"component":36132},[23,36144,26905],{"id":21503},[26907,36146],{":props":36147},"[{\"name\":\"strength\",\"type\":\"number\",\"default\":\"0.15\",\"description\":\"Intensity of the flow distortion\"},{\"name\":\"detail\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Scale of the flow patterns\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Speed of the flow\"},{\"name\":\"evolutionSpeed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How fast the flow field pattern reshapes over time\"},{\"name\":\"edges\",\"type\":\"\\\"stretch\\\" | \\\"transparent\\\" | \\\"mirror\\\" | \\\"wrap\\\"\",\"default\":\"mirror\",\"description\":\"How to handle edges when distortion pushes content out of bounds\"}]",[23,36149,26913],{"id":26912},[217,36151,36152,36197,36241,36285,36329],{":tabs":1543},[43,36153,36155],{"className":45,"code":36154,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowField>\n \u003CCircle />\n \u003C/FlowField>\n\u003C/Shader>\n",[31,36156,36157,36165,36173,36181,36189],{"__ignoreMap":48},[52,36158,36159,36161,36163],{"class":54,"line":55},[52,36160,59],{"class":58},[52,36162,63],{"class":62},[52,36164,77],{"class":58},[52,36166,36167,36169,36171],{"class":54,"line":80},[52,36168,83],{"class":58},[52,36170,36132],{"class":62},[52,36172,77],{"class":58},[52,36174,36175,36177,36179],{"class":54,"line":108},[52,36176,2213],{"class":58},[52,36178,2216],{"class":62},[52,36180,105],{"class":58},[52,36182,36183,36185,36187],{"class":54,"line":118},[52,36184,2230],{"class":58},[52,36186,36132],{"class":62},[52,36188,77],{"class":58},[52,36190,36191,36193,36195],{"class":54,"line":594},[52,36192,121],{"class":58},[52,36194,63],{"class":62},[52,36196,77],{"class":58},[43,36198,36199],{"className":360,"code":36154,"language":362,"meta":48,"style":48},[31,36200,36201,36209,36217,36225,36233],{"__ignoreMap":48},[52,36202,36203,36205,36207],{"class":54,"line":55},[52,36204,59],{"class":58},[52,36206,63],{"class":371},[52,36208,77],{"class":58},[52,36210,36211,36213,36215],{"class":54,"line":80},[52,36212,83],{"class":58},[52,36214,36132],{"class":371},[52,36216,77],{"class":58},[52,36218,36219,36221,36223],{"class":54,"line":108},[52,36220,2213],{"class":58},[52,36222,2216],{"class":371},[52,36224,105],{"class":58},[52,36226,36227,36229,36231],{"class":54,"line":118},[52,36228,2230],{"class":58},[52,36230,36132],{"class":371},[52,36232,77],{"class":58},[52,36234,36235,36237,36239],{"class":54,"line":594},[52,36236,121],{"class":58},[52,36238,63],{"class":371},[52,36240,77],{"class":58},[43,36242,36243],{"className":2507,"code":36154,"language":2509,"meta":48,"style":48},[31,36244,36245,36253,36261,36269,36277],{"__ignoreMap":48},[52,36246,36247,36249,36251],{"class":54,"line":55},[52,36248,59],{"class":58},[52,36250,63],{"class":371},[52,36252,77],{"class":58},[52,36254,36255,36257,36259],{"class":54,"line":80},[52,36256,83],{"class":58},[52,36258,36132],{"class":371},[52,36260,77],{"class":58},[52,36262,36263,36265,36267],{"class":54,"line":108},[52,36264,2213],{"class":58},[52,36266,2216],{"class":371},[52,36268,105],{"class":58},[52,36270,36271,36273,36275],{"class":54,"line":118},[52,36272,2230],{"class":58},[52,36274,36132],{"class":371},[52,36276,77],{"class":58},[52,36278,36279,36281,36283],{"class":54,"line":594},[52,36280,121],{"class":58},[52,36282,63],{"class":371},[52,36284,77],{"class":58},[43,36286,36287],{"className":419,"code":36154,"language":420,"meta":48,"style":48},[31,36288,36289,36297,36305,36313,36321],{"__ignoreMap":48},[52,36290,36291,36293,36295],{"class":54,"line":55},[52,36292,59],{"class":58},[52,36294,63],{"class":371},[52,36296,77],{"class":58},[52,36298,36299,36301,36303],{"class":54,"line":80},[52,36300,83],{"class":58},[52,36302,36132],{"class":371},[52,36304,77],{"class":58},[52,36306,36307,36309,36311],{"class":54,"line":108},[52,36308,2213],{"class":58},[52,36310,2216],{"class":371},[52,36312,105],{"class":58},[52,36314,36315,36317,36319],{"class":54,"line":118},[52,36316,2230],{"class":58},[52,36318,36132],{"class":371},[52,36320,77],{"class":58},[52,36322,36323,36325,36327],{"class":54,"line":594},[52,36324,121],{"class":58},[52,36326,63],{"class":371},[52,36328,77],{"class":58},[43,36330,36332],{"className":222,"code":36331,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowField', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,36333,36334,36344,36348,36362,36366,36375,36383,36387,36391],{"__ignoreMap":48},[52,36335,36336,36338,36340,36342],{"class":54,"line":55},[52,36337,232],{"class":231},[52,36339,9231],{"class":58},[52,36341,238],{"class":231},[52,36343,9236],{"class":73},[52,36345,36346],{"class":54,"line":80},[52,36347,597],{"emptyLinePlaceholder":171},[52,36349,36350,36352,36354,36356,36358,36360],{"class":54,"line":108},[52,36351,1721],{"class":231},[52,36353,1724],{"class":371},[52,36355,1727],{"class":231},[52,36357,1730],{"class":231},[52,36359,1733],{"class":66},[52,36361,1736],{"class":58},[52,36363,36364],{"class":54,"line":118},[52,36365,1751],{"class":58},[52,36367,36368,36370,36373],{"class":54,"line":594},[52,36369,1756],{"class":58},[52,36371,36372],{"class":73},"'FlowField'",[52,36374,4722],{"class":58},[52,36376,36377,36379,36381],{"class":54,"line":600},[52,36378,4727],{"class":58},[52,36380,2869],{"class":73},[52,36382,2129],{"class":58},[52,36384,36385],{"class":54,"line":606},[52,36386,4744],{"class":58},[52,36388,36389],{"class":54,"line":653},[52,36390,1773],{"class":58},[52,36392,36393],{"class":54,"line":662},[52,36394,1778],{"class":58},[156,36396,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36398},[36399,36400],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flowfield",{"title":36132,"description":36140},"docs/components/FlowField","LvuRVcMzfh5WUKhgFXGj0yWhWyJx-UWEd8eB_hVFlxI",{"id":36407,"title":36408,"body":36409,"category":30727,"componentType":20842,"description":36416,"extension":168,"meta":36694,"navigation":171,"path":36695,"requiresChild":27763,"seo":36696,"stem":36697,"__hash__":36698},"components/docs/components/Flower.md","Flower",{"type":8,"value":36410,"toc":36690},[36411,36414,36417,36419,36421,36424,36426,36688],[11,36412,36408],{"id":36413},"flower",[15,36415,36416],{},"Petal shape with N lobes and adjustable inner-to-outer radius ratio",[26901,36418],{"component":36408},[23,36420,26905],{"id":21503},[26907,36422],{":props":36423},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"Fill color of the flower\"},{\"name\":\"center\",\"type\":\"{x: number, y: number}\",\"default\":\"{\\\"x\\\":0.5,\\\"y\\\":0.5}\",\"description\":\"Center position of the flower\"},{\"name\":\"radius\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Outer petal tip radius in UV space\"},{\"name\":\"sides\",\"type\":\"number\",\"default\":\"5\",\"description\":\"Number of petals\"},{\"name\":\"innerRatio\",\"type\":\"number\",\"default\":\"0.4\",\"description\":\"Inner valley radius as a ratio of outer radius — lower values make deeper notches\"},{\"name\":\"rotation\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Rotation in degrees\"},{\"name\":\"softness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Edge softness for antialiasing\"},{\"name\":\"strokeThickness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Stroke thickness. Zero means no stroke.\"},{\"name\":\"strokeColor\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Color of the stroke outline\"},{\"name\":\"strokePosition\",\"type\":\"\\\"outside\\\" | \\\"center\\\" | \\\"inside\\\"\",\"default\":\"center\",\"description\":\"Position of the stroke relative to the shape edge\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"linear\",\"description\":\"Color space for blending fill and stroke colors\"}]",[23,36425,26913],{"id":26912},[217,36427,36428,36477,36528,36576,36626],{":tabs":1543},[43,36429,36431],{"className":45,"code":36430,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,36432,36433,36441,36448,36456,36465,36469],{"__ignoreMap":48},[52,36434,36435,36437,36439],{"class":54,"line":55},[52,36436,59],{"class":58},[52,36438,63],{"class":62},[52,36440,77],{"class":58},[52,36442,36443,36445],{"class":54,"line":80},[52,36444,83],{"class":58},[52,36446,36447],{"class":62},"Flower\n",[52,36449,36450,36452,36454],{"class":54,"line":108},[52,36451,7351],{"class":66},[52,36453,70],{"class":58},[52,36455,7307],{"class":73},[52,36457,36458,36460,36462],{"class":54,"line":118},[52,36459,14901],{"class":66},[52,36461,70],{"class":58},[52,36463,36464],{"class":73},"\"0.4\"\n",[52,36466,36467],{"class":54,"line":594},[52,36468,1224],{"class":58},[52,36470,36471,36473,36475],{"class":54,"line":600},[52,36472,121],{"class":58},[52,36474,63],{"class":62},[52,36476,77],{"class":58},[43,36478,36480],{"className":360,"code":36479,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CFlower\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,36481,36482,36490,36496,36504,36516,36520],{"__ignoreMap":48},[52,36483,36484,36486,36488],{"class":54,"line":55},[52,36485,59],{"class":58},[52,36487,63],{"class":371},[52,36489,77],{"class":58},[52,36491,36492,36494],{"class":54,"line":80},[52,36493,83],{"class":58},[52,36495,36447],{"class":371},[52,36497,36498,36500,36502],{"class":54,"line":108},[52,36499,7351],{"class":66},[52,36501,70],{"class":231},[52,36503,7307],{"class":73},[52,36505,36506,36508,36510,36512,36514],{"class":54,"line":118},[52,36507,7361],{"class":66},[52,36509,70],{"class":231},[52,36511,723],{"class":58},[52,36513,5963],{"class":371},[52,36515,729],{"class":58},[52,36517,36518],{"class":54,"line":594},[52,36519,1224],{"class":58},[52,36521,36522,36524,36526],{"class":54,"line":600},[52,36523,121],{"class":58},[52,36525,63],{"class":371},[52,36527,77],{"class":58},[43,36529,36530],{"className":2507,"code":36479,"language":2509,"meta":48,"style":48},[31,36531,36532,36540,36546,36554,36564,36568],{"__ignoreMap":48},[52,36533,36534,36536,36538],{"class":54,"line":55},[52,36535,59],{"class":58},[52,36537,63],{"class":371},[52,36539,77],{"class":58},[52,36541,36542,36544],{"class":54,"line":80},[52,36543,83],{"class":58},[52,36545,36447],{"class":371},[52,36547,36548,36550,36552],{"class":54,"line":108},[52,36549,7351],{"class":66},[52,36551,70],{"class":58},[52,36553,7307],{"class":73},[52,36555,36556,36558,36560,36562],{"class":54,"line":118},[52,36557,7361],{"class":66},[52,36559,24845],{"class":58},[52,36561,5963],{"class":371},[52,36563,729],{"class":58},[52,36565,36566],{"class":54,"line":594},[52,36567,1224],{"class":58},[52,36569,36570,36572,36574],{"class":54,"line":600},[52,36571,121],{"class":58},[52,36573,63],{"class":371},[52,36575,77],{"class":58},[43,36577,36578],{"className":419,"code":36479,"language":420,"meta":48,"style":48},[31,36579,36580,36588,36594,36602,36614,36618],{"__ignoreMap":48},[52,36581,36582,36584,36586],{"class":54,"line":55},[52,36583,59],{"class":58},[52,36585,63],{"class":371},[52,36587,77],{"class":58},[52,36589,36590,36592],{"class":54,"line":80},[52,36591,83],{"class":58},[52,36593,36447],{"class":371},[52,36595,36596,36598,36600],{"class":54,"line":108},[52,36597,7351],{"class":66},[52,36599,70],{"class":231},[52,36601,7307],{"class":73},[52,36603,36604,36606,36608,36610,36612],{"class":54,"line":118},[52,36605,7361],{"class":66},[52,36607,70],{"class":231},[52,36609,723],{"class":58},[52,36611,5963],{"class":371},[52,36613,729],{"class":58},[52,36615,36616],{"class":54,"line":594},[52,36617,1224],{"class":58},[52,36619,36620,36622,36624],{"class":54,"line":600},[52,36621,121],{"class":58},[52,36623,63],{"class":371},[52,36625,77],{"class":58},[43,36627,36629],{"className":222,"code":36628,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Flower', props: { color: '#ffffff', radius: 0.4 } }\n ]\n})\n",[31,36630,36631,36641,36645,36659,36663,36680,36684],{"__ignoreMap":48},[52,36632,36633,36635,36637,36639],{"class":54,"line":55},[52,36634,232],{"class":231},[52,36636,9231],{"class":58},[52,36638,238],{"class":231},[52,36640,9236],{"class":73},[52,36642,36643],{"class":54,"line":80},[52,36644,597],{"emptyLinePlaceholder":171},[52,36646,36647,36649,36651,36653,36655,36657],{"class":54,"line":108},[52,36648,1721],{"class":231},[52,36650,1724],{"class":371},[52,36652,1727],{"class":231},[52,36654,1730],{"class":231},[52,36656,1733],{"class":66},[52,36658,1736],{"class":58},[52,36660,36661],{"class":54,"line":118},[52,36662,1751],{"class":58},[52,36664,36665,36667,36670,36672,36674,36676,36678],{"class":54,"line":594},[52,36666,1756],{"class":58},[52,36668,36669],{"class":73},"'Flower'",[52,36671,1762],{"class":58},[52,36673,7886],{"class":73},[52,36675,4278],{"class":58},[52,36677,5963],{"class":371},[52,36679,1768],{"class":58},[52,36681,36682],{"class":54,"line":600},[52,36683,1773],{"class":58},[52,36685,36686],{"class":54,"line":606},[52,36687,1778],{"class":58},[156,36689,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":36691},[36692,36693],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flower",{"title":36408,"description":36416},"docs/components/Flower","qDGXWoZmkKIxqBONgF14f44Wo3el89XlhjC_PESzUQA",{"id":36700,"title":36701,"body":36702,"category":27760,"componentType":20842,"description":36709,"extension":168,"meta":36894,"navigation":171,"path":36895,"requiresChild":27763,"seo":36896,"stem":36897,"__hash__":36898},"components/docs/components/FlowingGradient.md","FlowingGradient",{"type":8,"value":36703,"toc":36890},[36704,36707,36710,36712,36714,36717,36719,36888],[11,36705,36701],{"id":36706},"flowinggradient",[15,36708,36709],{},"Liquid silk gradient with organic flowing color bands",[26901,36711],{"component":36701},[23,36713,26905],{"id":21503},[26907,36715],{":props":36716},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#0a0015\",\"description\":\"Deep background color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#6b17e6\",\"description\":\"Primary accent color\"},{\"name\":\"colorC\",\"type\":\"string\",\"default\":\"#ff4d6a\",\"description\":\"Secondary accent color\"},{\"name\":\"colorD\",\"type\":\"string\",\"default\":\"#ff6b35\",\"description\":\"Tertiary accent color\"},{\"name\":\"colorSpace\",\"type\":\"\\\"linear\\\" | \\\"oklch\\\" | \\\"oklab\\\" | \\\"hsl\\\" | \\\"hsv\\\" | \\\"lch\\\"\",\"default\":\"oklch\",\"description\":\"Color space for color interpolation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"},{\"name\":\"distortion\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Organic distortion intensity\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for variation\"}]",[23,36718,26913],{"id":26912},[217,36720,36721,36750,36778,36806,36834],{":tabs":1543},[43,36722,36724],{"className":45,"code":36723,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlowingGradient />\n\u003C/Shader>\n",[31,36725,36726,36734,36742],{"__ignoreMap":48},[52,36727,36728,36730,36732],{"class":54,"line":55},[52,36729,59],{"class":58},[52,36731,63],{"class":62},[52,36733,77],{"class":58},[52,36735,36736,36738,36740],{"class":54,"line":80},[52,36737,83],{"class":58},[52,36739,36701],{"class":62},[52,36741,105],{"class":58},[52,36743,36744,36746,36748],{"class":54,"line":108},[52,36745,121],{"class":58},[52,36747,63],{"class":62},[52,36749,77],{"class":58},[43,36751,36752],{"className":360,"code":36723,"language":362,"meta":48,"style":48},[31,36753,36754,36762,36770],{"__ignoreMap":48},[52,36755,36756,36758,36760],{"class":54,"line":55},[52,36757,59],{"class":58},[52,36759,63],{"class":371},[52,36761,77],{"class":58},[52,36763,36764,36766,36768],{"class":54,"line":80},[52,36765,83],{"class":58},[52,36767,36701],{"class":371},[52,36769,105],{"class":58},[52,36771,36772,36774,36776],{"class":54,"line":108},[52,36773,121],{"class":58},[52,36775,63],{"class":371},[52,36777,77],{"class":58},[43,36779,36780],{"className":2507,"code":36723,"language":2509,"meta":48,"style":48},[31,36781,36782,36790,36798],{"__ignoreMap":48},[52,36783,36784,36786,36788],{"class":54,"line":55},[52,36785,59],{"class":58},[52,36787,63],{"class":371},[52,36789,77],{"class":58},[52,36791,36792,36794,36796],{"class":54,"line":80},[52,36793,83],{"class":58},[52,36795,36701],{"class":371},[52,36797,105],{"class":58},[52,36799,36800,36802,36804],{"class":54,"line":108},[52,36801,121],{"class":58},[52,36803,63],{"class":371},[52,36805,77],{"class":58},[43,36807,36808],{"className":419,"code":36723,"language":420,"meta":48,"style":48},[31,36809,36810,36818,36826],{"__ignoreMap":48},[52,36811,36812,36814,36816],{"class":54,"line":55},[52,36813,59],{"class":58},[52,36815,63],{"class":371},[52,36817,77],{"class":58},[52,36819,36820,36822,36824],{"class":54,"line":80},[52,36821,83],{"class":58},[52,36823,36701],{"class":371},[52,36825,105],{"class":58},[52,36827,36828,36830,36832],{"class":54,"line":108},[52,36829,121],{"class":58},[52,36831,63],{"class":371},[52,36833,77],{"class":58},[43,36835,36837],{"className":222,"code":36836,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlowingGradient', props: {} }\n ]\n})\n",[31,36838,36839,36849,36853,36867,36871,36880,36884],{"__ignoreMap":48},[52,36840,36841,36843,36845,36847],{"class":54,"line":55},[52,36842,232],{"class":231},[52,36844,9231],{"class":58},[52,36846,238],{"class":231},[52,36848,9236],{"class":73},[52,36850,36851],{"class":54,"line":80},[52,36852,597],{"emptyLinePlaceholder":171},[52,36854,36855,36857,36859,36861,36863,36865],{"class":54,"line":108},[52,36856,1721],{"class":231},[52,36858,1724],{"class":371},[52,36860,1727],{"class":231},[52,36862,1730],{"class":231},[52,36864,1733],{"class":66},[52,36866,1736],{"class":58},[52,36868,36869],{"class":54,"line":118},[52,36870,1751],{"class":58},[52,36872,36873,36875,36878],{"class":54,"line":594},[52,36874,1756],{"class":58},[52,36876,36877],{"class":73},"'FlowingGradient'",[52,36879,2129],{"class":58},[52,36881,36882],{"class":54,"line":600},[52,36883,1773],{"class":58},[52,36885,36886],{"class":54,"line":606},[52,36887,1778],{"class":58},[156,36889,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":36891},[36892,36893],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flowinggradient",{"title":36701,"description":36709},"docs/components/FlowingGradient","H6P25Xkj3h4S31Quxh5Vv2K29h2pZZVtjWcmL3LtQ70",{"id":36900,"title":36901,"body":36902,"category":29105,"componentType":20848,"description":36909,"extension":168,"meta":37170,"navigation":171,"path":37171,"requiresChild":171,"seo":37172,"stem":37173,"__hash__":37174},"components/docs/components/FlutedGlass.md","FlutedGlass",{"type":8,"value":36903,"toc":37166},[36904,36907,36910,36912,36914,36917,36919,37164],[11,36905,36901],{"id":36906},"flutedglass",[15,36908,36909],{},"Full-screen fluted glass effect — refracts content through repeating cylindrical bars",[26901,36911],{"component":36901},[23,36913,26905],{"id":21503},[26907,36915],{":props":36916},"[{\"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,36918,26913],{"id":26912},[217,36920,36921,36966,37010,37054,37098],{":tabs":1543},[43,36922,36924],{"className":45,"code":36923,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFlutedGlass>\n \u003CCircle />\n \u003C/FlutedGlass>\n\u003C/Shader>\n",[31,36925,36926,36934,36942,36950,36958],{"__ignoreMap":48},[52,36927,36928,36930,36932],{"class":54,"line":55},[52,36929,59],{"class":58},[52,36931,63],{"class":62},[52,36933,77],{"class":58},[52,36935,36936,36938,36940],{"class":54,"line":80},[52,36937,83],{"class":58},[52,36939,36901],{"class":62},[52,36941,77],{"class":58},[52,36943,36944,36946,36948],{"class":54,"line":108},[52,36945,2213],{"class":58},[52,36947,2216],{"class":62},[52,36949,105],{"class":58},[52,36951,36952,36954,36956],{"class":54,"line":118},[52,36953,2230],{"class":58},[52,36955,36901],{"class":62},[52,36957,77],{"class":58},[52,36959,36960,36962,36964],{"class":54,"line":594},[52,36961,121],{"class":58},[52,36963,63],{"class":62},[52,36965,77],{"class":58},[43,36967,36968],{"className":360,"code":36923,"language":362,"meta":48,"style":48},[31,36969,36970,36978,36986,36994,37002],{"__ignoreMap":48},[52,36971,36972,36974,36976],{"class":54,"line":55},[52,36973,59],{"class":58},[52,36975,63],{"class":371},[52,36977,77],{"class":58},[52,36979,36980,36982,36984],{"class":54,"line":80},[52,36981,83],{"class":58},[52,36983,36901],{"class":371},[52,36985,77],{"class":58},[52,36987,36988,36990,36992],{"class":54,"line":108},[52,36989,2213],{"class":58},[52,36991,2216],{"class":371},[52,36993,105],{"class":58},[52,36995,36996,36998,37000],{"class":54,"line":118},[52,36997,2230],{"class":58},[52,36999,36901],{"class":371},[52,37001,77],{"class":58},[52,37003,37004,37006,37008],{"class":54,"line":594},[52,37005,121],{"class":58},[52,37007,63],{"class":371},[52,37009,77],{"class":58},[43,37011,37012],{"className":2507,"code":36923,"language":2509,"meta":48,"style":48},[31,37013,37014,37022,37030,37038,37046],{"__ignoreMap":48},[52,37015,37016,37018,37020],{"class":54,"line":55},[52,37017,59],{"class":58},[52,37019,63],{"class":371},[52,37021,77],{"class":58},[52,37023,37024,37026,37028],{"class":54,"line":80},[52,37025,83],{"class":58},[52,37027,36901],{"class":371},[52,37029,77],{"class":58},[52,37031,37032,37034,37036],{"class":54,"line":108},[52,37033,2213],{"class":58},[52,37035,2216],{"class":371},[52,37037,105],{"class":58},[52,37039,37040,37042,37044],{"class":54,"line":118},[52,37041,2230],{"class":58},[52,37043,36901],{"class":371},[52,37045,77],{"class":58},[52,37047,37048,37050,37052],{"class":54,"line":594},[52,37049,121],{"class":58},[52,37051,63],{"class":371},[52,37053,77],{"class":58},[43,37055,37056],{"className":419,"code":36923,"language":420,"meta":48,"style":48},[31,37057,37058,37066,37074,37082,37090],{"__ignoreMap":48},[52,37059,37060,37062,37064],{"class":54,"line":55},[52,37061,59],{"class":58},[52,37063,63],{"class":371},[52,37065,77],{"class":58},[52,37067,37068,37070,37072],{"class":54,"line":80},[52,37069,83],{"class":58},[52,37071,36901],{"class":371},[52,37073,77],{"class":58},[52,37075,37076,37078,37080],{"class":54,"line":108},[52,37077,2213],{"class":58},[52,37079,2216],{"class":371},[52,37081,105],{"class":58},[52,37083,37084,37086,37088],{"class":54,"line":118},[52,37085,2230],{"class":58},[52,37087,36901],{"class":371},[52,37089,77],{"class":58},[52,37091,37092,37094,37096],{"class":54,"line":594},[52,37093,121],{"class":58},[52,37095,63],{"class":371},[52,37097,77],{"class":58},[43,37099,37101],{"className":222,"code":37100,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'FlutedGlass', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,37102,37103,37113,37117,37131,37135,37144,37152,37156,37160],{"__ignoreMap":48},[52,37104,37105,37107,37109,37111],{"class":54,"line":55},[52,37106,232],{"class":231},[52,37108,9231],{"class":58},[52,37110,238],{"class":231},[52,37112,9236],{"class":73},[52,37114,37115],{"class":54,"line":80},[52,37116,597],{"emptyLinePlaceholder":171},[52,37118,37119,37121,37123,37125,37127,37129],{"class":54,"line":108},[52,37120,1721],{"class":231},[52,37122,1724],{"class":371},[52,37124,1727],{"class":231},[52,37126,1730],{"class":231},[52,37128,1733],{"class":66},[52,37130,1736],{"class":58},[52,37132,37133],{"class":54,"line":118},[52,37134,1751],{"class":58},[52,37136,37137,37139,37142],{"class":54,"line":594},[52,37138,1756],{"class":58},[52,37140,37141],{"class":73},"'FlutedGlass'",[52,37143,4722],{"class":58},[52,37145,37146,37148,37150],{"class":54,"line":600},[52,37147,4727],{"class":58},[52,37149,2869],{"class":73},[52,37151,2129],{"class":58},[52,37153,37154],{"class":54,"line":606},[52,37155,4744],{"class":58},[52,37157,37158],{"class":54,"line":653},[52,37159,1773],{"class":58},[52,37161,37162],{"class":54,"line":662},[52,37163,1778],{"class":58},[156,37165,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37167},[37168,37169],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/flutedglass",{"title":36901,"description":36909},"docs/components/FlutedGlass","OBwAiHVq6Mvpg4Ih6Rjg6rTKUC50vFYWfeZ6gPSM3yw",{"id":37176,"title":37177,"body":37178,"category":30161,"componentType":20842,"description":37185,"extension":168,"meta":37370,"navigation":171,"path":37371,"requiresChild":27763,"seo":37372,"stem":37373,"__hash__":37374},"components/docs/components/Fog.md","Fog",{"type":8,"value":37179,"toc":37366},[37180,37183,37186,37188,37190,37193,37195,37364],[11,37181,37177],{"id":37182},"fog",[15,37184,37185],{},"Fog that fills the screen and interacts with the mouse",[26901,37187],{"component":37177},[23,37189,26905],{"id":21503},[26907,37191],{":props":37192},"[{\"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,37194,26913],{"id":26912},[217,37196,37197,37226,37254,37282,37310],{":tabs":1543},[43,37198,37200],{"className":45,"code":37199,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFog />\n\u003C/Shader>\n",[31,37201,37202,37210,37218],{"__ignoreMap":48},[52,37203,37204,37206,37208],{"class":54,"line":55},[52,37205,59],{"class":58},[52,37207,63],{"class":62},[52,37209,77],{"class":58},[52,37211,37212,37214,37216],{"class":54,"line":80},[52,37213,83],{"class":58},[52,37215,37177],{"class":62},[52,37217,105],{"class":58},[52,37219,37220,37222,37224],{"class":54,"line":108},[52,37221,121],{"class":58},[52,37223,63],{"class":62},[52,37225,77],{"class":58},[43,37227,37228],{"className":360,"code":37199,"language":362,"meta":48,"style":48},[31,37229,37230,37238,37246],{"__ignoreMap":48},[52,37231,37232,37234,37236],{"class":54,"line":55},[52,37233,59],{"class":58},[52,37235,63],{"class":371},[52,37237,77],{"class":58},[52,37239,37240,37242,37244],{"class":54,"line":80},[52,37241,83],{"class":58},[52,37243,37177],{"class":371},[52,37245,105],{"class":58},[52,37247,37248,37250,37252],{"class":54,"line":108},[52,37249,121],{"class":58},[52,37251,63],{"class":371},[52,37253,77],{"class":58},[43,37255,37256],{"className":2507,"code":37199,"language":2509,"meta":48,"style":48},[31,37257,37258,37266,37274],{"__ignoreMap":48},[52,37259,37260,37262,37264],{"class":54,"line":55},[52,37261,59],{"class":58},[52,37263,63],{"class":371},[52,37265,77],{"class":58},[52,37267,37268,37270,37272],{"class":54,"line":80},[52,37269,83],{"class":58},[52,37271,37177],{"class":371},[52,37273,105],{"class":58},[52,37275,37276,37278,37280],{"class":54,"line":108},[52,37277,121],{"class":58},[52,37279,63],{"class":371},[52,37281,77],{"class":58},[43,37283,37284],{"className":419,"code":37199,"language":420,"meta":48,"style":48},[31,37285,37286,37294,37302],{"__ignoreMap":48},[52,37287,37288,37290,37292],{"class":54,"line":55},[52,37289,59],{"class":58},[52,37291,63],{"class":371},[52,37293,77],{"class":58},[52,37295,37296,37298,37300],{"class":54,"line":80},[52,37297,83],{"class":58},[52,37299,37177],{"class":371},[52,37301,105],{"class":58},[52,37303,37304,37306,37308],{"class":54,"line":108},[52,37305,121],{"class":58},[52,37307,63],{"class":371},[52,37309,77],{"class":58},[43,37311,37313],{"className":222,"code":37312,"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,37314,37315,37325,37329,37343,37347,37356,37360],{"__ignoreMap":48},[52,37316,37317,37319,37321,37323],{"class":54,"line":55},[52,37318,232],{"class":231},[52,37320,9231],{"class":58},[52,37322,238],{"class":231},[52,37324,9236],{"class":73},[52,37326,37327],{"class":54,"line":80},[52,37328,597],{"emptyLinePlaceholder":171},[52,37330,37331,37333,37335,37337,37339,37341],{"class":54,"line":108},[52,37332,1721],{"class":231},[52,37334,1724],{"class":371},[52,37336,1727],{"class":231},[52,37338,1730],{"class":231},[52,37340,1733],{"class":66},[52,37342,1736],{"class":58},[52,37344,37345],{"class":54,"line":118},[52,37346,1751],{"class":58},[52,37348,37349,37351,37354],{"class":54,"line":594},[52,37350,1756],{"class":58},[52,37352,37353],{"class":73},"'Fog'",[52,37355,2129],{"class":58},[52,37357,37358],{"class":54,"line":600},[52,37359,1773],{"class":58},[52,37361,37362],{"class":54,"line":606},[52,37363,1778],{"class":58},[156,37365,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37367},[37368,37369],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fog",{"title":37177,"description":37185},"docs/components/Fog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":37376,"title":37377,"body":37378,"category":29105,"componentType":20848,"description":37385,"extension":168,"meta":37646,"navigation":171,"path":37647,"requiresChild":171,"seo":37648,"stem":37649,"__hash__":37650},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":37379,"toc":37642},[37380,37383,37386,37388,37390,37393,37395,37640],[11,37381,37377],{"id":37382},"form3d",[15,37384,37385],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26901,37387],{"component":37377},[23,37389,26905],{"id":21503},[26907,37391],{":props":37392},"[{\"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,37394,26913],{"id":26912},[217,37396,37397,37442,37486,37530,37574],{":tabs":1543},[43,37398,37400],{"className":45,"code":37399,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,37401,37402,37410,37418,37426,37434],{"__ignoreMap":48},[52,37403,37404,37406,37408],{"class":54,"line":55},[52,37405,59],{"class":58},[52,37407,63],{"class":62},[52,37409,77],{"class":58},[52,37411,37412,37414,37416],{"class":54,"line":80},[52,37413,83],{"class":58},[52,37415,37377],{"class":62},[52,37417,77],{"class":58},[52,37419,37420,37422,37424],{"class":54,"line":108},[52,37421,2213],{"class":58},[52,37423,2216],{"class":62},[52,37425,105],{"class":58},[52,37427,37428,37430,37432],{"class":54,"line":118},[52,37429,2230],{"class":58},[52,37431,37377],{"class":62},[52,37433,77],{"class":58},[52,37435,37436,37438,37440],{"class":54,"line":594},[52,37437,121],{"class":58},[52,37439,63],{"class":62},[52,37441,77],{"class":58},[43,37443,37444],{"className":360,"code":37399,"language":362,"meta":48,"style":48},[31,37445,37446,37454,37462,37470,37478],{"__ignoreMap":48},[52,37447,37448,37450,37452],{"class":54,"line":55},[52,37449,59],{"class":58},[52,37451,63],{"class":371},[52,37453,77],{"class":58},[52,37455,37456,37458,37460],{"class":54,"line":80},[52,37457,83],{"class":58},[52,37459,37377],{"class":371},[52,37461,77],{"class":58},[52,37463,37464,37466,37468],{"class":54,"line":108},[52,37465,2213],{"class":58},[52,37467,2216],{"class":371},[52,37469,105],{"class":58},[52,37471,37472,37474,37476],{"class":54,"line":118},[52,37473,2230],{"class":58},[52,37475,37377],{"class":371},[52,37477,77],{"class":58},[52,37479,37480,37482,37484],{"class":54,"line":594},[52,37481,121],{"class":58},[52,37483,63],{"class":371},[52,37485,77],{"class":58},[43,37487,37488],{"className":2507,"code":37399,"language":2509,"meta":48,"style":48},[31,37489,37490,37498,37506,37514,37522],{"__ignoreMap":48},[52,37491,37492,37494,37496],{"class":54,"line":55},[52,37493,59],{"class":58},[52,37495,63],{"class":371},[52,37497,77],{"class":58},[52,37499,37500,37502,37504],{"class":54,"line":80},[52,37501,83],{"class":58},[52,37503,37377],{"class":371},[52,37505,77],{"class":58},[52,37507,37508,37510,37512],{"class":54,"line":108},[52,37509,2213],{"class":58},[52,37511,2216],{"class":371},[52,37513,105],{"class":58},[52,37515,37516,37518,37520],{"class":54,"line":118},[52,37517,2230],{"class":58},[52,37519,37377],{"class":371},[52,37521,77],{"class":58},[52,37523,37524,37526,37528],{"class":54,"line":594},[52,37525,121],{"class":58},[52,37527,63],{"class":371},[52,37529,77],{"class":58},[43,37531,37532],{"className":419,"code":37399,"language":420,"meta":48,"style":48},[31,37533,37534,37542,37550,37558,37566],{"__ignoreMap":48},[52,37535,37536,37538,37540],{"class":54,"line":55},[52,37537,59],{"class":58},[52,37539,63],{"class":371},[52,37541,77],{"class":58},[52,37543,37544,37546,37548],{"class":54,"line":80},[52,37545,83],{"class":58},[52,37547,37377],{"class":371},[52,37549,77],{"class":58},[52,37551,37552,37554,37556],{"class":54,"line":108},[52,37553,2213],{"class":58},[52,37555,2216],{"class":371},[52,37557,105],{"class":58},[52,37559,37560,37562,37564],{"class":54,"line":118},[52,37561,2230],{"class":58},[52,37563,37377],{"class":371},[52,37565,77],{"class":58},[52,37567,37568,37570,37572],{"class":54,"line":594},[52,37569,121],{"class":58},[52,37571,63],{"class":371},[52,37573,77],{"class":58},[43,37575,37577],{"className":222,"code":37576,"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,37578,37579,37589,37593,37607,37611,37620,37628,37632,37636],{"__ignoreMap":48},[52,37580,37581,37583,37585,37587],{"class":54,"line":55},[52,37582,232],{"class":231},[52,37584,9231],{"class":58},[52,37586,238],{"class":231},[52,37588,9236],{"class":73},[52,37590,37591],{"class":54,"line":80},[52,37592,597],{"emptyLinePlaceholder":171},[52,37594,37595,37597,37599,37601,37603,37605],{"class":54,"line":108},[52,37596,1721],{"class":231},[52,37598,1724],{"class":371},[52,37600,1727],{"class":231},[52,37602,1730],{"class":231},[52,37604,1733],{"class":66},[52,37606,1736],{"class":58},[52,37608,37609],{"class":54,"line":118},[52,37610,1751],{"class":58},[52,37612,37613,37615,37618],{"class":54,"line":594},[52,37614,1756],{"class":58},[52,37616,37617],{"class":73},"'Form3D'",[52,37619,4722],{"class":58},[52,37621,37622,37624,37626],{"class":54,"line":600},[52,37623,4727],{"class":58},[52,37625,2869],{"class":73},[52,37627,2129],{"class":58},[52,37629,37630],{"class":54,"line":606},[52,37631,4744],{"class":58},[52,37633,37634],{"class":54,"line":653},[52,37635,1773],{"class":58},[52,37637,37638],{"class":54,"line":662},[52,37639,1778],{"class":58},[156,37641,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37643},[37644,37645],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/form3d",{"title":37377,"description":37385},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":37652,"title":18474,"body":37653,"category":32398,"componentType":20848,"description":37660,"extension":168,"meta":37920,"navigation":171,"path":37921,"requiresChild":171,"seo":37922,"stem":37923,"__hash__":37924},"components/docs/components/Glass.md",{"type":8,"value":37654,"toc":37916},[37655,37658,37661,37663,37665,37668,37670,37914],[11,37656,18474],{"id":37657},"glass",[15,37659,37660],{},"Optically realistic glass lens driven in a custom shape",[26901,37662],{"component":18474},[23,37664,26905],{"id":21503},[26907,37666],{":props":37667},"[{\"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,37669,26913],{"id":26912},[217,37671,37672,37717,37761,37805,37849],{":tabs":1543},[43,37673,37675],{"className":45,"code":37674,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[31,37676,37677,37685,37693,37701,37709],{"__ignoreMap":48},[52,37678,37679,37681,37683],{"class":54,"line":55},[52,37680,59],{"class":58},[52,37682,63],{"class":62},[52,37684,77],{"class":58},[52,37686,37687,37689,37691],{"class":54,"line":80},[52,37688,83],{"class":58},[52,37690,18474],{"class":62},[52,37692,77],{"class":58},[52,37694,37695,37697,37699],{"class":54,"line":108},[52,37696,2213],{"class":58},[52,37698,2216],{"class":62},[52,37700,105],{"class":58},[52,37702,37703,37705,37707],{"class":54,"line":118},[52,37704,2230],{"class":58},[52,37706,18474],{"class":62},[52,37708,77],{"class":58},[52,37710,37711,37713,37715],{"class":54,"line":594},[52,37712,121],{"class":58},[52,37714,63],{"class":62},[52,37716,77],{"class":58},[43,37718,37719],{"className":360,"code":37674,"language":362,"meta":48,"style":48},[31,37720,37721,37729,37737,37745,37753],{"__ignoreMap":48},[52,37722,37723,37725,37727],{"class":54,"line":55},[52,37724,59],{"class":58},[52,37726,63],{"class":371},[52,37728,77],{"class":58},[52,37730,37731,37733,37735],{"class":54,"line":80},[52,37732,83],{"class":58},[52,37734,18474],{"class":371},[52,37736,77],{"class":58},[52,37738,37739,37741,37743],{"class":54,"line":108},[52,37740,2213],{"class":58},[52,37742,2216],{"class":371},[52,37744,105],{"class":58},[52,37746,37747,37749,37751],{"class":54,"line":118},[52,37748,2230],{"class":58},[52,37750,18474],{"class":371},[52,37752,77],{"class":58},[52,37754,37755,37757,37759],{"class":54,"line":594},[52,37756,121],{"class":58},[52,37758,63],{"class":371},[52,37760,77],{"class":58},[43,37762,37763],{"className":2507,"code":37674,"language":2509,"meta":48,"style":48},[31,37764,37765,37773,37781,37789,37797],{"__ignoreMap":48},[52,37766,37767,37769,37771],{"class":54,"line":55},[52,37768,59],{"class":58},[52,37770,63],{"class":371},[52,37772,77],{"class":58},[52,37774,37775,37777,37779],{"class":54,"line":80},[52,37776,83],{"class":58},[52,37778,18474],{"class":371},[52,37780,77],{"class":58},[52,37782,37783,37785,37787],{"class":54,"line":108},[52,37784,2213],{"class":58},[52,37786,2216],{"class":371},[52,37788,105],{"class":58},[52,37790,37791,37793,37795],{"class":54,"line":118},[52,37792,2230],{"class":58},[52,37794,18474],{"class":371},[52,37796,77],{"class":58},[52,37798,37799,37801,37803],{"class":54,"line":594},[52,37800,121],{"class":58},[52,37802,63],{"class":371},[52,37804,77],{"class":58},[43,37806,37807],{"className":419,"code":37674,"language":420,"meta":48,"style":48},[31,37808,37809,37817,37825,37833,37841],{"__ignoreMap":48},[52,37810,37811,37813,37815],{"class":54,"line":55},[52,37812,59],{"class":58},[52,37814,63],{"class":371},[52,37816,77],{"class":58},[52,37818,37819,37821,37823],{"class":54,"line":80},[52,37820,83],{"class":58},[52,37822,18474],{"class":371},[52,37824,77],{"class":58},[52,37826,37827,37829,37831],{"class":54,"line":108},[52,37828,2213],{"class":58},[52,37830,2216],{"class":371},[52,37832,105],{"class":58},[52,37834,37835,37837,37839],{"class":54,"line":118},[52,37836,2230],{"class":58},[52,37838,18474],{"class":371},[52,37840,77],{"class":58},[52,37842,37843,37845,37847],{"class":54,"line":594},[52,37844,121],{"class":58},[52,37846,63],{"class":371},[52,37848,77],{"class":58},[43,37850,37852],{"className":222,"code":37851,"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,37853,37854,37864,37868,37882,37886,37894,37902,37906,37910],{"__ignoreMap":48},[52,37855,37856,37858,37860,37862],{"class":54,"line":55},[52,37857,232],{"class":231},[52,37859,9231],{"class":58},[52,37861,238],{"class":231},[52,37863,9236],{"class":73},[52,37865,37866],{"class":54,"line":80},[52,37867,597],{"emptyLinePlaceholder":171},[52,37869,37870,37872,37874,37876,37878,37880],{"class":54,"line":108},[52,37871,1721],{"class":231},[52,37873,1724],{"class":371},[52,37875,1727],{"class":231},[52,37877,1730],{"class":231},[52,37879,1733],{"class":66},[52,37881,1736],{"class":58},[52,37883,37884],{"class":54,"line":118},[52,37885,1751],{"class":58},[52,37887,37888,37890,37892],{"class":54,"line":594},[52,37889,1756],{"class":58},[52,37891,19015],{"class":73},[52,37893,4722],{"class":58},[52,37895,37896,37898,37900],{"class":54,"line":600},[52,37897,4727],{"class":58},[52,37899,2869],{"class":73},[52,37901,2129],{"class":58},[52,37903,37904],{"class":54,"line":606},[52,37905,4744],{"class":58},[52,37907,37908],{"class":54,"line":653},[52,37909,1773],{"class":58},[52,37911,37912],{"class":54,"line":662},[52,37913,1778],{"class":58},[156,37915,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37917},[37918,37919],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glass",{"title":18474,"description":37660},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":37926,"title":3936,"body":37927,"category":29105,"componentType":20848,"description":37934,"extension":168,"meta":38251,"navigation":171,"path":38252,"requiresChild":171,"seo":38253,"stem":38254,"__hash__":38255},"components/docs/components/GlassTiles.md",{"type":8,"value":37928,"toc":38247},[37929,37932,37935,37937,37939,37942,37944,38245],[11,37930,3936],{"id":37931},"glasstiles",[15,37933,37934],{},"Refraction-like distortion in a tile grid pattern",[26901,37936],{"component":3936},[23,37938,26905],{"id":21503},[26907,37940],{":props":37941},"[{\"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,37943,26913],{"id":26912},[217,37945,37946,38003,38062,38118,38176],{":tabs":1543},[43,37947,37949],{"className":45,"code":37948,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37950,37951,37959,37966,37975,37979,37987,37995],{"__ignoreMap":48},[52,37952,37953,37955,37957],{"class":54,"line":55},[52,37954,59],{"class":58},[52,37956,63],{"class":62},[52,37958,77],{"class":58},[52,37960,37961,37963],{"class":54,"line":80},[52,37962,83],{"class":58},[52,37964,37965],{"class":62},"GlassTiles\n",[52,37967,37968,37970,37972],{"class":54,"line":108},[52,37969,17870],{"class":66},[52,37971,70],{"class":58},[52,37973,37974],{"class":73},"\"2\"\n",[52,37976,37977],{"class":54,"line":118},[52,37978,26949],{"class":58},[52,37980,37981,37983,37985],{"class":54,"line":594},[52,37982,2213],{"class":58},[52,37984,2216],{"class":62},[52,37986,105],{"class":58},[52,37988,37989,37991,37993],{"class":54,"line":600},[52,37990,2230],{"class":58},[52,37992,3936],{"class":62},[52,37994,77],{"class":58},[52,37996,37997,37999,38001],{"class":54,"line":606},[52,37998,121],{"class":58},[52,38000,63],{"class":62},[52,38002,77],{"class":58},[43,38004,38006],{"className":360,"code":38005,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,38007,38008,38016,38022,38034,38038,38046,38054],{"__ignoreMap":48},[52,38009,38010,38012,38014],{"class":54,"line":55},[52,38011,59],{"class":58},[52,38013,63],{"class":371},[52,38015,77],{"class":58},[52,38017,38018,38020],{"class":54,"line":80},[52,38019,83],{"class":58},[52,38021,37965],{"class":371},[52,38023,38024,38026,38028,38030,38032],{"class":54,"line":108},[52,38025,17981],{"class":66},[52,38027,70],{"class":231},[52,38029,723],{"class":58},[52,38031,4927],{"class":371},[52,38033,729],{"class":58},[52,38035,38036],{"class":54,"line":118},[52,38037,26949],{"class":58},[52,38039,38040,38042,38044],{"class":54,"line":594},[52,38041,2213],{"class":58},[52,38043,2216],{"class":371},[52,38045,105],{"class":58},[52,38047,38048,38050,38052],{"class":54,"line":600},[52,38049,2230],{"class":58},[52,38051,3936],{"class":371},[52,38053,77],{"class":58},[52,38055,38056,38058,38060],{"class":54,"line":606},[52,38057,121],{"class":58},[52,38059,63],{"class":371},[52,38061,77],{"class":58},[43,38063,38064],{"className":2507,"code":38005,"language":2509,"meta":48,"style":48},[31,38065,38066,38074,38080,38090,38094,38102,38110],{"__ignoreMap":48},[52,38067,38068,38070,38072],{"class":54,"line":55},[52,38069,59],{"class":58},[52,38071,63],{"class":371},[52,38073,77],{"class":58},[52,38075,38076,38078],{"class":54,"line":80},[52,38077,83],{"class":58},[52,38079,37965],{"class":371},[52,38081,38082,38084,38086,38088],{"class":54,"line":108},[52,38083,17981],{"class":66},[52,38085,24845],{"class":58},[52,38087,4927],{"class":371},[52,38089,729],{"class":58},[52,38091,38092],{"class":54,"line":118},[52,38093,26949],{"class":58},[52,38095,38096,38098,38100],{"class":54,"line":594},[52,38097,2213],{"class":58},[52,38099,2216],{"class":371},[52,38101,105],{"class":58},[52,38103,38104,38106,38108],{"class":54,"line":600},[52,38105,2230],{"class":58},[52,38107,3936],{"class":371},[52,38109,77],{"class":58},[52,38111,38112,38114,38116],{"class":54,"line":606},[52,38113,121],{"class":58},[52,38115,63],{"class":371},[52,38117,77],{"class":58},[43,38119,38120],{"className":419,"code":38005,"language":420,"meta":48,"style":48},[31,38121,38122,38130,38136,38148,38152,38160,38168],{"__ignoreMap":48},[52,38123,38124,38126,38128],{"class":54,"line":55},[52,38125,59],{"class":58},[52,38127,63],{"class":371},[52,38129,77],{"class":58},[52,38131,38132,38134],{"class":54,"line":80},[52,38133,83],{"class":58},[52,38135,37965],{"class":371},[52,38137,38138,38140,38142,38144,38146],{"class":54,"line":108},[52,38139,17981],{"class":66},[52,38141,70],{"class":231},[52,38143,723],{"class":58},[52,38145,4927],{"class":371},[52,38147,729],{"class":58},[52,38149,38150],{"class":54,"line":118},[52,38151,26949],{"class":58},[52,38153,38154,38156,38158],{"class":54,"line":594},[52,38155,2213],{"class":58},[52,38157,2216],{"class":371},[52,38159,105],{"class":58},[52,38161,38162,38164,38166],{"class":54,"line":600},[52,38163,2230],{"class":58},[52,38165,3936],{"class":371},[52,38167,77],{"class":58},[52,38169,38170,38172,38174],{"class":54,"line":606},[52,38171,121],{"class":58},[52,38173,63],{"class":371},[52,38175,77],{"class":58},[43,38177,38179],{"className":222,"code":38178,"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,38180,38181,38191,38195,38209,38213,38225,38233,38237,38241],{"__ignoreMap":48},[52,38182,38183,38185,38187,38189],{"class":54,"line":55},[52,38184,232],{"class":231},[52,38186,9231],{"class":58},[52,38188,238],{"class":231},[52,38190,9236],{"class":73},[52,38192,38193],{"class":54,"line":80},[52,38194,597],{"emptyLinePlaceholder":171},[52,38196,38197,38199,38201,38203,38205,38207],{"class":54,"line":108},[52,38198,1721],{"class":231},[52,38200,1724],{"class":371},[52,38202,1727],{"class":231},[52,38204,1730],{"class":231},[52,38206,1733],{"class":66},[52,38208,1736],{"class":58},[52,38210,38211],{"class":54,"line":118},[52,38212,1751],{"class":58},[52,38214,38215,38217,38219,38221,38223],{"class":54,"line":594},[52,38216,1756],{"class":58},[52,38218,4295],{"class":73},[52,38220,27194],{"class":58},[52,38222,4927],{"class":371},[52,38224,5259],{"class":58},[52,38226,38227,38229,38231],{"class":54,"line":600},[52,38228,4727],{"class":58},[52,38230,2869],{"class":73},[52,38232,2129],{"class":58},[52,38234,38235],{"class":54,"line":606},[52,38236,4744],{"class":58},[52,38238,38239],{"class":54,"line":653},[52,38240,1773],{"class":58},[52,38242,38243],{"class":54,"line":662},[52,38244,1778],{"class":58},[156,38246,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38248},[38249,38250],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glasstiles",{"title":3936,"description":37934},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":38257,"title":38258,"body":38259,"category":27503,"componentType":20848,"description":38266,"extension":168,"meta":38583,"navigation":171,"path":38584,"requiresChild":171,"seo":38585,"stem":38586,"__hash__":38587},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":38260,"toc":38579},[38261,38264,38267,38269,38271,38274,38276,38577],[11,38262,38258],{"id":38263},"glitch",[15,38265,38266],{},"Digital glitch that melts pixels and distorts colors",[26901,38268],{"component":38258},[23,38270,26905],{"id":21503},[26907,38272],{":props":38273},"[{\"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,38275,26913],{"id":26912},[217,38277,38278,38334,38393,38449,38507],{":tabs":1543},[43,38279,38281],{"className":45,"code":38280,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,38282,38283,38291,38298,38306,38310,38318,38326],{"__ignoreMap":48},[52,38284,38285,38287,38289],{"class":54,"line":55},[52,38286,59],{"class":58},[52,38288,63],{"class":62},[52,38290,77],{"class":58},[52,38292,38293,38295],{"class":54,"line":80},[52,38294,83],{"class":58},[52,38296,38297],{"class":62},"Glitch\n",[52,38299,38300,38302,38304],{"class":54,"line":108},[52,38301,17870],{"class":66},[52,38303,70],{"class":58},[52,38305,32462],{"class":73},[52,38307,38308],{"class":54,"line":118},[52,38309,26949],{"class":58},[52,38311,38312,38314,38316],{"class":54,"line":594},[52,38313,2213],{"class":58},[52,38315,2216],{"class":62},[52,38317,105],{"class":58},[52,38319,38320,38322,38324],{"class":54,"line":600},[52,38321,2230],{"class":58},[52,38323,38258],{"class":62},[52,38325,77],{"class":58},[52,38327,38328,38330,38332],{"class":54,"line":606},[52,38329,121],{"class":58},[52,38331,63],{"class":62},[52,38333,77],{"class":58},[43,38335,38337],{"className":360,"code":38336,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,38338,38339,38347,38353,38365,38369,38377,38385],{"__ignoreMap":48},[52,38340,38341,38343,38345],{"class":54,"line":55},[52,38342,59],{"class":58},[52,38344,63],{"class":371},[52,38346,77],{"class":58},[52,38348,38349,38351],{"class":54,"line":80},[52,38350,83],{"class":58},[52,38352,38297],{"class":371},[52,38354,38355,38357,38359,38361,38363],{"class":54,"line":108},[52,38356,17981],{"class":66},[52,38358,70],{"class":231},[52,38360,723],{"class":58},[52,38362,5467],{"class":371},[52,38364,729],{"class":58},[52,38366,38367],{"class":54,"line":118},[52,38368,26949],{"class":58},[52,38370,38371,38373,38375],{"class":54,"line":594},[52,38372,2213],{"class":58},[52,38374,2216],{"class":371},[52,38376,105],{"class":58},[52,38378,38379,38381,38383],{"class":54,"line":600},[52,38380,2230],{"class":58},[52,38382,38258],{"class":371},[52,38384,77],{"class":58},[52,38386,38387,38389,38391],{"class":54,"line":606},[52,38388,121],{"class":58},[52,38390,63],{"class":371},[52,38392,77],{"class":58},[43,38394,38395],{"className":2507,"code":38336,"language":2509,"meta":48,"style":48},[31,38396,38397,38405,38411,38421,38425,38433,38441],{"__ignoreMap":48},[52,38398,38399,38401,38403],{"class":54,"line":55},[52,38400,59],{"class":58},[52,38402,63],{"class":371},[52,38404,77],{"class":58},[52,38406,38407,38409],{"class":54,"line":80},[52,38408,83],{"class":58},[52,38410,38297],{"class":371},[52,38412,38413,38415,38417,38419],{"class":54,"line":108},[52,38414,17981],{"class":66},[52,38416,24845],{"class":58},[52,38418,5467],{"class":371},[52,38420,729],{"class":58},[52,38422,38423],{"class":54,"line":118},[52,38424,26949],{"class":58},[52,38426,38427,38429,38431],{"class":54,"line":594},[52,38428,2213],{"class":58},[52,38430,2216],{"class":371},[52,38432,105],{"class":58},[52,38434,38435,38437,38439],{"class":54,"line":600},[52,38436,2230],{"class":58},[52,38438,38258],{"class":371},[52,38440,77],{"class":58},[52,38442,38443,38445,38447],{"class":54,"line":606},[52,38444,121],{"class":58},[52,38446,63],{"class":371},[52,38448,77],{"class":58},[43,38450,38451],{"className":419,"code":38336,"language":420,"meta":48,"style":48},[31,38452,38453,38461,38467,38479,38483,38491,38499],{"__ignoreMap":48},[52,38454,38455,38457,38459],{"class":54,"line":55},[52,38456,59],{"class":58},[52,38458,63],{"class":371},[52,38460,77],{"class":58},[52,38462,38463,38465],{"class":54,"line":80},[52,38464,83],{"class":58},[52,38466,38297],{"class":371},[52,38468,38469,38471,38473,38475,38477],{"class":54,"line":108},[52,38470,17981],{"class":66},[52,38472,70],{"class":231},[52,38474,723],{"class":58},[52,38476,5467],{"class":371},[52,38478,729],{"class":58},[52,38480,38481],{"class":54,"line":118},[52,38482,26949],{"class":58},[52,38484,38485,38487,38489],{"class":54,"line":594},[52,38486,2213],{"class":58},[52,38488,2216],{"class":371},[52,38490,105],{"class":58},[52,38492,38493,38495,38497],{"class":54,"line":600},[52,38494,2230],{"class":58},[52,38496,38258],{"class":371},[52,38498,77],{"class":58},[52,38500,38501,38503,38505],{"class":54,"line":606},[52,38502,121],{"class":58},[52,38504,63],{"class":371},[52,38506,77],{"class":58},[43,38508,38510],{"className":222,"code":38509,"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,38511,38512,38522,38526,38540,38544,38557,38565,38569,38573],{"__ignoreMap":48},[52,38513,38514,38516,38518,38520],{"class":54,"line":55},[52,38515,232],{"class":231},[52,38517,9231],{"class":58},[52,38519,238],{"class":231},[52,38521,9236],{"class":73},[52,38523,38524],{"class":54,"line":80},[52,38525,597],{"emptyLinePlaceholder":171},[52,38527,38528,38530,38532,38534,38536,38538],{"class":54,"line":108},[52,38529,1721],{"class":231},[52,38531,1724],{"class":371},[52,38533,1727],{"class":231},[52,38535,1730],{"class":231},[52,38537,1733],{"class":66},[52,38539,1736],{"class":58},[52,38541,38542],{"class":54,"line":118},[52,38543,1751],{"class":58},[52,38545,38546,38548,38551,38553,38555],{"class":54,"line":594},[52,38547,1756],{"class":58},[52,38549,38550],{"class":73},"'Glitch'",[52,38552,27194],{"class":58},[52,38554,5467],{"class":371},[52,38556,5259],{"class":58},[52,38558,38559,38561,38563],{"class":54,"line":600},[52,38560,4727],{"class":58},[52,38562,2869],{"class":73},[52,38564,2129],{"class":58},[52,38566,38567],{"class":54,"line":606},[52,38568,4744],{"class":58},[52,38570,38571],{"class":54,"line":653},[52,38572,1773],{"class":58},[52,38574,38575],{"class":54,"line":662},[52,38576,1778],{"class":58},[156,38578,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38580},[38581,38582],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glitch",{"title":38258,"description":38266},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":38589,"title":9509,"body":38590,"category":27503,"componentType":20848,"description":38597,"extension":168,"meta":38914,"navigation":171,"path":38915,"requiresChild":171,"seo":38916,"stem":38917,"__hash__":38918},"components/docs/components/Glow.md",{"type":8,"value":38591,"toc":38910},[38592,38595,38598,38600,38602,38605,38607,38908],[11,38593,9509],{"id":38594},"glow",[15,38596,38597],{},"Soft glow effect with adjustable intensity",[26901,38599],{"component":9509},[23,38601,26905],{"id":21503},[26907,38603],{":props":38604},"[{\"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,38606,26913],{"id":26912},[217,38608,38609,38665,38724,38780,38838],{":tabs":1543},[43,38610,38612],{"className":45,"code":38611,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,38613,38614,38622,38629,38637,38641,38649,38657],{"__ignoreMap":48},[52,38615,38616,38618,38620],{"class":54,"line":55},[52,38617,59],{"class":58},[52,38619,63],{"class":62},[52,38621,77],{"class":58},[52,38623,38624,38626],{"class":54,"line":80},[52,38625,83],{"class":58},[52,38627,38628],{"class":62},"Glow\n",[52,38630,38631,38633,38635],{"class":54,"line":108},[52,38632,17870],{"class":66},[52,38634,70],{"class":58},[52,38636,28827],{"class":73},[52,38638,38639],{"class":54,"line":118},[52,38640,26949],{"class":58},[52,38642,38643,38645,38647],{"class":54,"line":594},[52,38644,2213],{"class":58},[52,38646,2216],{"class":62},[52,38648,105],{"class":58},[52,38650,38651,38653,38655],{"class":54,"line":600},[52,38652,2230],{"class":58},[52,38654,9509],{"class":62},[52,38656,77],{"class":58},[52,38658,38659,38661,38663],{"class":54,"line":606},[52,38660,121],{"class":58},[52,38662,63],{"class":62},[52,38664,77],{"class":58},[43,38666,38668],{"className":360,"code":38667,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,38669,38670,38678,38684,38696,38700,38708,38716],{"__ignoreMap":48},[52,38671,38672,38674,38676],{"class":54,"line":55},[52,38673,59],{"class":58},[52,38675,63],{"class":371},[52,38677,77],{"class":58},[52,38679,38680,38682],{"class":54,"line":80},[52,38681,83],{"class":58},[52,38683,38628],{"class":371},[52,38685,38686,38688,38690,38692,38694],{"class":54,"line":108},[52,38687,17981],{"class":66},[52,38689,70],{"class":231},[52,38691,723],{"class":58},[52,38693,6391],{"class":371},[52,38695,729],{"class":58},[52,38697,38698],{"class":54,"line":118},[52,38699,26949],{"class":58},[52,38701,38702,38704,38706],{"class":54,"line":594},[52,38703,2213],{"class":58},[52,38705,2216],{"class":371},[52,38707,105],{"class":58},[52,38709,38710,38712,38714],{"class":54,"line":600},[52,38711,2230],{"class":58},[52,38713,9509],{"class":371},[52,38715,77],{"class":58},[52,38717,38718,38720,38722],{"class":54,"line":606},[52,38719,121],{"class":58},[52,38721,63],{"class":371},[52,38723,77],{"class":58},[43,38725,38726],{"className":2507,"code":38667,"language":2509,"meta":48,"style":48},[31,38727,38728,38736,38742,38752,38756,38764,38772],{"__ignoreMap":48},[52,38729,38730,38732,38734],{"class":54,"line":55},[52,38731,59],{"class":58},[52,38733,63],{"class":371},[52,38735,77],{"class":58},[52,38737,38738,38740],{"class":54,"line":80},[52,38739,83],{"class":58},[52,38741,38628],{"class":371},[52,38743,38744,38746,38748,38750],{"class":54,"line":108},[52,38745,17981],{"class":66},[52,38747,24845],{"class":58},[52,38749,6391],{"class":371},[52,38751,729],{"class":58},[52,38753,38754],{"class":54,"line":118},[52,38755,26949],{"class":58},[52,38757,38758,38760,38762],{"class":54,"line":594},[52,38759,2213],{"class":58},[52,38761,2216],{"class":371},[52,38763,105],{"class":58},[52,38765,38766,38768,38770],{"class":54,"line":600},[52,38767,2230],{"class":58},[52,38769,9509],{"class":371},[52,38771,77],{"class":58},[52,38773,38774,38776,38778],{"class":54,"line":606},[52,38775,121],{"class":58},[52,38777,63],{"class":371},[52,38779,77],{"class":58},[43,38781,38782],{"className":419,"code":38667,"language":420,"meta":48,"style":48},[31,38783,38784,38792,38798,38810,38814,38822,38830],{"__ignoreMap":48},[52,38785,38786,38788,38790],{"class":54,"line":55},[52,38787,59],{"class":58},[52,38789,63],{"class":371},[52,38791,77],{"class":58},[52,38793,38794,38796],{"class":54,"line":80},[52,38795,83],{"class":58},[52,38797,38628],{"class":371},[52,38799,38800,38802,38804,38806,38808],{"class":54,"line":108},[52,38801,17981],{"class":66},[52,38803,70],{"class":231},[52,38805,723],{"class":58},[52,38807,6391],{"class":371},[52,38809,729],{"class":58},[52,38811,38812],{"class":54,"line":118},[52,38813,26949],{"class":58},[52,38815,38816,38818,38820],{"class":54,"line":594},[52,38817,2213],{"class":58},[52,38819,2216],{"class":371},[52,38821,105],{"class":58},[52,38823,38824,38826,38828],{"class":54,"line":600},[52,38825,2230],{"class":58},[52,38827,9509],{"class":371},[52,38829,77],{"class":58},[52,38831,38832,38834,38836],{"class":54,"line":606},[52,38833,121],{"class":58},[52,38835,63],{"class":371},[52,38837,77],{"class":58},[43,38839,38841],{"className":222,"code":38840,"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,38842,38843,38853,38857,38871,38875,38888,38896,38900,38904],{"__ignoreMap":48},[52,38844,38845,38847,38849,38851],{"class":54,"line":55},[52,38846,232],{"class":231},[52,38848,9231],{"class":58},[52,38850,238],{"class":231},[52,38852,9236],{"class":73},[52,38854,38855],{"class":54,"line":80},[52,38856,597],{"emptyLinePlaceholder":171},[52,38858,38859,38861,38863,38865,38867,38869],{"class":54,"line":108},[52,38860,1721],{"class":231},[52,38862,1724],{"class":371},[52,38864,1727],{"class":231},[52,38866,1730],{"class":231},[52,38868,1733],{"class":66},[52,38870,1736],{"class":58},[52,38872,38873],{"class":54,"line":118},[52,38874,1751],{"class":58},[52,38876,38877,38879,38882,38884,38886],{"class":54,"line":594},[52,38878,1756],{"class":58},[52,38880,38881],{"class":73},"'Glow'",[52,38883,27194],{"class":58},[52,38885,6391],{"class":371},[52,38887,5259],{"class":58},[52,38889,38890,38892,38894],{"class":54,"line":600},[52,38891,4727],{"class":58},[52,38893,2869],{"class":73},[52,38895,2129],{"class":58},[52,38897,38898],{"class":54,"line":606},[52,38899,4744],{"class":58},[52,38901,38902],{"class":54,"line":653},[52,38903,1773],{"class":58},[52,38905,38906],{"class":54,"line":662},[52,38907,1778],{"class":58},[156,38909,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38911},[38912,38913],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glow",{"title":9509,"description":38597},"docs/components/Glow","sovLa_4UAcoB5M0YAN-xhJZ9Db1YaFQ5uqZK4Tm02B0",{"id":38920,"title":38921,"body":38922,"category":27760,"componentType":20842,"description":38929,"extension":168,"meta":39170,"navigation":171,"path":39171,"requiresChild":27763,"seo":39172,"stem":39173,"__hash__":39174},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":38923,"toc":39166},[38924,38927,38930,38932,38934,38937,38939,39164],[11,38925,38921],{"id":38926},"godrays",[15,38928,38929],{},"Volumetric light rays emanating from a point",[26901,38931],{"component":38921},[23,38933,26905],{"id":21503},[26907,38935],{":props":38936},"[{\"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,38938,26913],{"id":26912},[217,38940,38941,38981,39024,39064,39106],{":tabs":1543},[43,38942,38944],{"className":45,"code":38943,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,38945,38946,38954,38961,38969,38973],{"__ignoreMap":48},[52,38947,38948,38950,38952],{"class":54,"line":55},[52,38949,59],{"class":58},[52,38951,63],{"class":62},[52,38953,77],{"class":58},[52,38955,38956,38958],{"class":54,"line":80},[52,38957,83],{"class":58},[52,38959,38960],{"class":62},"Godrays\n",[52,38962,38963,38965,38967],{"class":54,"line":108},[52,38964,17870],{"class":66},[52,38966,70],{"class":58},[52,38968,7366],{"class":73},[52,38970,38971],{"class":54,"line":118},[52,38972,1224],{"class":58},[52,38974,38975,38977,38979],{"class":54,"line":594},[52,38976,121],{"class":58},[52,38978,63],{"class":62},[52,38980,77],{"class":58},[43,38982,38984],{"className":360,"code":38983,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,38985,38986,38994,39000,39012,39016],{"__ignoreMap":48},[52,38987,38988,38990,38992],{"class":54,"line":55},[52,38989,59],{"class":58},[52,38991,63],{"class":371},[52,38993,77],{"class":58},[52,38995,38996,38998],{"class":54,"line":80},[52,38997,83],{"class":58},[52,38999,38960],{"class":371},[52,39001,39002,39004,39006,39008,39010],{"class":54,"line":108},[52,39003,17981],{"class":66},[52,39005,70],{"class":231},[52,39007,723],{"class":58},[52,39009,4011],{"class":371},[52,39011,729],{"class":58},[52,39013,39014],{"class":54,"line":118},[52,39015,1224],{"class":58},[52,39017,39018,39020,39022],{"class":54,"line":594},[52,39019,121],{"class":58},[52,39021,63],{"class":371},[52,39023,77],{"class":58},[43,39025,39026],{"className":2507,"code":38983,"language":2509,"meta":48,"style":48},[31,39027,39028,39036,39042,39052,39056],{"__ignoreMap":48},[52,39029,39030,39032,39034],{"class":54,"line":55},[52,39031,59],{"class":58},[52,39033,63],{"class":371},[52,39035,77],{"class":58},[52,39037,39038,39040],{"class":54,"line":80},[52,39039,83],{"class":58},[52,39041,38960],{"class":371},[52,39043,39044,39046,39048,39050],{"class":54,"line":108},[52,39045,17981],{"class":66},[52,39047,24845],{"class":58},[52,39049,4011],{"class":371},[52,39051,729],{"class":58},[52,39053,39054],{"class":54,"line":118},[52,39055,1224],{"class":58},[52,39057,39058,39060,39062],{"class":54,"line":594},[52,39059,121],{"class":58},[52,39061,63],{"class":371},[52,39063,77],{"class":58},[43,39065,39066],{"className":419,"code":38983,"language":420,"meta":48,"style":48},[31,39067,39068,39076,39082,39094,39098],{"__ignoreMap":48},[52,39069,39070,39072,39074],{"class":54,"line":55},[52,39071,59],{"class":58},[52,39073,63],{"class":371},[52,39075,77],{"class":58},[52,39077,39078,39080],{"class":54,"line":80},[52,39079,83],{"class":58},[52,39081,38960],{"class":371},[52,39083,39084,39086,39088,39090,39092],{"class":54,"line":108},[52,39085,17981],{"class":66},[52,39087,70],{"class":231},[52,39089,723],{"class":58},[52,39091,4011],{"class":371},[52,39093,729],{"class":58},[52,39095,39096],{"class":54,"line":118},[52,39097,1224],{"class":58},[52,39099,39100,39102,39104],{"class":54,"line":594},[52,39101,121],{"class":58},[52,39103,63],{"class":371},[52,39105,77],{"class":58},[43,39107,39109],{"className":222,"code":39108,"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,39110,39111,39121,39125,39139,39143,39156,39160],{"__ignoreMap":48},[52,39112,39113,39115,39117,39119],{"class":54,"line":55},[52,39114,232],{"class":231},[52,39116,9231],{"class":58},[52,39118,238],{"class":231},[52,39120,9236],{"class":73},[52,39122,39123],{"class":54,"line":80},[52,39124,597],{"emptyLinePlaceholder":171},[52,39126,39127,39129,39131,39133,39135,39137],{"class":54,"line":108},[52,39128,1721],{"class":231},[52,39130,1724],{"class":371},[52,39132,1727],{"class":231},[52,39134,1730],{"class":231},[52,39136,1733],{"class":66},[52,39138,1736],{"class":58},[52,39140,39141],{"class":54,"line":118},[52,39142,1751],{"class":58},[52,39144,39145,39147,39150,39152,39154],{"class":54,"line":594},[52,39146,1756],{"class":58},[52,39148,39149],{"class":73},"'Godrays'",[52,39151,27194],{"class":58},[52,39153,4011],{"class":371},[52,39155,1768],{"class":58},[52,39157,39158],{"class":54,"line":600},[52,39159,1773],{"class":58},[52,39161,39162],{"class":54,"line":606},[52,39163,1778],{"class":58},[156,39165,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39167},[39168,39169],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/godrays",{"title":38921,"description":38929},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":39176,"title":39177,"body":39178,"category":28771,"componentType":20848,"description":39185,"extension":168,"meta":39440,"navigation":171,"path":39441,"requiresChild":171,"seo":39442,"stem":39443,"__hash__":39444},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":39179,"toc":39437},[39180,39183,39186,39188,39190,39435],[11,39181,39177],{"id":39182},"grayscale",[15,39184,39185],{},"Convert colors to black and white",[26901,39187],{"component":39177},[23,39189,26913],{"id":26912},[217,39191,39192,39237,39281,39325,39369],{":tabs":1543},[43,39193,39195],{"className":45,"code":39194,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,39196,39197,39205,39213,39221,39229],{"__ignoreMap":48},[52,39198,39199,39201,39203],{"class":54,"line":55},[52,39200,59],{"class":58},[52,39202,63],{"class":62},[52,39204,77],{"class":58},[52,39206,39207,39209,39211],{"class":54,"line":80},[52,39208,83],{"class":58},[52,39210,39177],{"class":62},[52,39212,77],{"class":58},[52,39214,39215,39217,39219],{"class":54,"line":108},[52,39216,2213],{"class":58},[52,39218,2216],{"class":62},[52,39220,105],{"class":58},[52,39222,39223,39225,39227],{"class":54,"line":118},[52,39224,2230],{"class":58},[52,39226,39177],{"class":62},[52,39228,77],{"class":58},[52,39230,39231,39233,39235],{"class":54,"line":594},[52,39232,121],{"class":58},[52,39234,63],{"class":62},[52,39236,77],{"class":58},[43,39238,39239],{"className":360,"code":39194,"language":362,"meta":48,"style":48},[31,39240,39241,39249,39257,39265,39273],{"__ignoreMap":48},[52,39242,39243,39245,39247],{"class":54,"line":55},[52,39244,59],{"class":58},[52,39246,63],{"class":371},[52,39248,77],{"class":58},[52,39250,39251,39253,39255],{"class":54,"line":80},[52,39252,83],{"class":58},[52,39254,39177],{"class":371},[52,39256,77],{"class":58},[52,39258,39259,39261,39263],{"class":54,"line":108},[52,39260,2213],{"class":58},[52,39262,2216],{"class":371},[52,39264,105],{"class":58},[52,39266,39267,39269,39271],{"class":54,"line":118},[52,39268,2230],{"class":58},[52,39270,39177],{"class":371},[52,39272,77],{"class":58},[52,39274,39275,39277,39279],{"class":54,"line":594},[52,39276,121],{"class":58},[52,39278,63],{"class":371},[52,39280,77],{"class":58},[43,39282,39283],{"className":2507,"code":39194,"language":2509,"meta":48,"style":48},[31,39284,39285,39293,39301,39309,39317],{"__ignoreMap":48},[52,39286,39287,39289,39291],{"class":54,"line":55},[52,39288,59],{"class":58},[52,39290,63],{"class":371},[52,39292,77],{"class":58},[52,39294,39295,39297,39299],{"class":54,"line":80},[52,39296,83],{"class":58},[52,39298,39177],{"class":371},[52,39300,77],{"class":58},[52,39302,39303,39305,39307],{"class":54,"line":108},[52,39304,2213],{"class":58},[52,39306,2216],{"class":371},[52,39308,105],{"class":58},[52,39310,39311,39313,39315],{"class":54,"line":118},[52,39312,2230],{"class":58},[52,39314,39177],{"class":371},[52,39316,77],{"class":58},[52,39318,39319,39321,39323],{"class":54,"line":594},[52,39320,121],{"class":58},[52,39322,63],{"class":371},[52,39324,77],{"class":58},[43,39326,39327],{"className":419,"code":39194,"language":420,"meta":48,"style":48},[31,39328,39329,39337,39345,39353,39361],{"__ignoreMap":48},[52,39330,39331,39333,39335],{"class":54,"line":55},[52,39332,59],{"class":58},[52,39334,63],{"class":371},[52,39336,77],{"class":58},[52,39338,39339,39341,39343],{"class":54,"line":80},[52,39340,83],{"class":58},[52,39342,39177],{"class":371},[52,39344,77],{"class":58},[52,39346,39347,39349,39351],{"class":54,"line":108},[52,39348,2213],{"class":58},[52,39350,2216],{"class":371},[52,39352,105],{"class":58},[52,39354,39355,39357,39359],{"class":54,"line":118},[52,39356,2230],{"class":58},[52,39358,39177],{"class":371},[52,39360,77],{"class":58},[52,39362,39363,39365,39367],{"class":54,"line":594},[52,39364,121],{"class":58},[52,39366,63],{"class":371},[52,39368,77],{"class":58},[43,39370,39372],{"className":222,"code":39371,"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,39373,39374,39384,39388,39402,39406,39415,39423,39427,39431],{"__ignoreMap":48},[52,39375,39376,39378,39380,39382],{"class":54,"line":55},[52,39377,232],{"class":231},[52,39379,9231],{"class":58},[52,39381,238],{"class":231},[52,39383,9236],{"class":73},[52,39385,39386],{"class":54,"line":80},[52,39387,597],{"emptyLinePlaceholder":171},[52,39389,39390,39392,39394,39396,39398,39400],{"class":54,"line":108},[52,39391,1721],{"class":231},[52,39393,1724],{"class":371},[52,39395,1727],{"class":231},[52,39397,1730],{"class":231},[52,39399,1733],{"class":66},[52,39401,1736],{"class":58},[52,39403,39404],{"class":54,"line":118},[52,39405,1751],{"class":58},[52,39407,39408,39410,39413],{"class":54,"line":594},[52,39409,1756],{"class":58},[52,39411,39412],{"class":73},"'Grayscale'",[52,39414,4722],{"class":58},[52,39416,39417,39419,39421],{"class":54,"line":600},[52,39418,4727],{"class":58},[52,39420,2869],{"class":73},[52,39422,2129],{"class":58},[52,39424,39425],{"class":54,"line":606},[52,39426,4744],{"class":58},[52,39428,39429],{"class":54,"line":653},[52,39430,1773],{"class":58},[52,39432,39433],{"class":54,"line":662},[52,39434,1778],{"class":58},[156,39436,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":39438},[39439],{"id":26912,"depth":80,"text":26913},{},"/docs/components/grayscale",{"title":39177,"description":39185},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":39446,"title":39447,"body":39448,"category":27760,"componentType":20842,"description":39455,"extension":168,"meta":39685,"navigation":171,"path":39686,"requiresChild":27763,"seo":39687,"stem":39688,"__hash__":39689},"components/docs/components/Grid.md","Grid",{"type":8,"value":39449,"toc":39681},[39450,39453,39456,39458,39460,39463,39465,39679],[11,39451,39447],{"id":39452},"grid",[15,39454,39455],{},"Simple grid lines pattern with adjustable thickness and rotation",[26901,39457],{"component":39447},[23,39459,26905],{"id":21503},[26907,39461],{":props":39462},"[{\"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,39464,26913],{"id":26912},[217,39466,39467,39507,39545,39583,39621],{":tabs":1543},[43,39468,39470],{"className":45,"code":39469,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,39471,39472,39480,39487,39495,39499],{"__ignoreMap":48},[52,39473,39474,39476,39478],{"class":54,"line":55},[52,39475,59],{"class":58},[52,39477,63],{"class":62},[52,39479,77],{"class":58},[52,39481,39482,39484],{"class":54,"line":80},[52,39483,83],{"class":58},[52,39485,39486],{"class":62},"Grid\n",[52,39488,39489,39491,39493],{"class":54,"line":108},[52,39490,7351],{"class":66},[52,39492,70],{"class":58},[52,39494,7307],{"class":73},[52,39496,39497],{"class":54,"line":118},[52,39498,1224],{"class":58},[52,39500,39501,39503,39505],{"class":54,"line":594},[52,39502,121],{"class":58},[52,39504,63],{"class":62},[52,39506,77],{"class":58},[43,39508,39509],{"className":360,"code":39469,"language":362,"meta":48,"style":48},[31,39510,39511,39519,39525,39533,39537],{"__ignoreMap":48},[52,39512,39513,39515,39517],{"class":54,"line":55},[52,39514,59],{"class":58},[52,39516,63],{"class":371},[52,39518,77],{"class":58},[52,39520,39521,39523],{"class":54,"line":80},[52,39522,83],{"class":58},[52,39524,39486],{"class":371},[52,39526,39527,39529,39531],{"class":54,"line":108},[52,39528,7351],{"class":66},[52,39530,70],{"class":231},[52,39532,7307],{"class":73},[52,39534,39535],{"class":54,"line":118},[52,39536,1224],{"class":58},[52,39538,39539,39541,39543],{"class":54,"line":594},[52,39540,121],{"class":58},[52,39542,63],{"class":371},[52,39544,77],{"class":58},[43,39546,39547],{"className":2507,"code":39469,"language":2509,"meta":48,"style":48},[31,39548,39549,39557,39563,39571,39575],{"__ignoreMap":48},[52,39550,39551,39553,39555],{"class":54,"line":55},[52,39552,59],{"class":58},[52,39554,63],{"class":371},[52,39556,77],{"class":58},[52,39558,39559,39561],{"class":54,"line":80},[52,39560,83],{"class":58},[52,39562,39486],{"class":371},[52,39564,39565,39567,39569],{"class":54,"line":108},[52,39566,7351],{"class":66},[52,39568,70],{"class":58},[52,39570,7307],{"class":73},[52,39572,39573],{"class":54,"line":118},[52,39574,1224],{"class":58},[52,39576,39577,39579,39581],{"class":54,"line":594},[52,39578,121],{"class":58},[52,39580,63],{"class":371},[52,39582,77],{"class":58},[43,39584,39585],{"className":419,"code":39469,"language":420,"meta":48,"style":48},[31,39586,39587,39595,39601,39609,39613],{"__ignoreMap":48},[52,39588,39589,39591,39593],{"class":54,"line":55},[52,39590,59],{"class":58},[52,39592,63],{"class":371},[52,39594,77],{"class":58},[52,39596,39597,39599],{"class":54,"line":80},[52,39598,83],{"class":58},[52,39600,39486],{"class":371},[52,39602,39603,39605,39607],{"class":54,"line":108},[52,39604,7351],{"class":66},[52,39606,70],{"class":231},[52,39608,7307],{"class":73},[52,39610,39611],{"class":54,"line":118},[52,39612,1224],{"class":58},[52,39614,39615,39617,39619],{"class":54,"line":594},[52,39616,121],{"class":58},[52,39618,63],{"class":371},[52,39620,77],{"class":58},[43,39622,39624],{"className":222,"code":39623,"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,39625,39626,39636,39640,39654,39658,39671,39675],{"__ignoreMap":48},[52,39627,39628,39630,39632,39634],{"class":54,"line":55},[52,39629,232],{"class":231},[52,39631,9231],{"class":58},[52,39633,238],{"class":231},[52,39635,9236],{"class":73},[52,39637,39638],{"class":54,"line":80},[52,39639,597],{"emptyLinePlaceholder":171},[52,39641,39642,39644,39646,39648,39650,39652],{"class":54,"line":108},[52,39643,1721],{"class":231},[52,39645,1724],{"class":371},[52,39647,1727],{"class":231},[52,39649,1730],{"class":231},[52,39651,1733],{"class":66},[52,39653,1736],{"class":58},[52,39655,39656],{"class":54,"line":118},[52,39657,1751],{"class":58},[52,39659,39660,39662,39665,39667,39669],{"class":54,"line":594},[52,39661,1756],{"class":58},[52,39663,39664],{"class":73},"'Grid'",[52,39666,1762],{"class":58},[52,39668,7886],{"class":73},[52,39670,1768],{"class":58},[52,39672,39673],{"class":54,"line":600},[52,39674,1773],{"class":58},[52,39676,39677],{"class":54,"line":606},[52,39678,1778],{"class":58},[156,39680,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39682},[39683,39684],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/grid",{"title":39447,"description":39455},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":39691,"title":4808,"body":39692,"category":30161,"componentType":20848,"description":39699,"extension":168,"meta":40061,"navigation":171,"path":40062,"requiresChild":171,"seo":40063,"stem":40064,"__hash__":40065},"components/docs/components/GridDistortion.md",{"type":8,"value":39693,"toc":40057},[39694,39697,39700,39702,39704,39707,39709,40055],[11,39695,4808],{"id":39696},"griddistortion",[15,39698,39699],{},"Interactive grid distortion controlled by mouse position",[26901,39701],{"component":4808},[23,39703,26905],{"id":21503},[26907,39705],{":props":39706},"[{\"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,39708,26913],{"id":26912},[217,39710,39711,39775,39846,39912,39982],{":tabs":1543},[43,39712,39714],{"className":45,"code":39713,"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,39715,39716,39724,39731,39739,39747,39751,39759,39767],{"__ignoreMap":48},[52,39717,39718,39720,39722],{"class":54,"line":55},[52,39719,59],{"class":58},[52,39721,63],{"class":62},[52,39723,77],{"class":58},[52,39725,39726,39728],{"class":54,"line":80},[52,39727,83],{"class":58},[52,39729,39730],{"class":62},"GridDistortion\n",[52,39732,39733,39735,39737],{"class":54,"line":108},[52,39734,17870],{"class":66},[52,39736,70],{"class":58},[52,39738,28827],{"class":73},[52,39740,39741,39743,39745],{"class":54,"line":118},[52,39742,14901],{"class":66},[52,39744,70],{"class":58},[52,39746,28827],{"class":73},[52,39748,39749],{"class":54,"line":594},[52,39750,26949],{"class":58},[52,39752,39753,39755,39757],{"class":54,"line":600},[52,39754,2213],{"class":58},[52,39756,2216],{"class":62},[52,39758,105],{"class":58},[52,39760,39761,39763,39765],{"class":54,"line":606},[52,39762,2230],{"class":58},[52,39764,4808],{"class":62},[52,39766,77],{"class":58},[52,39768,39769,39771,39773],{"class":54,"line":653},[52,39770,121],{"class":58},[52,39772,63],{"class":62},[52,39774,77],{"class":58},[43,39776,39778],{"className":360,"code":39777,"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,39779,39780,39788,39794,39806,39818,39822,39830,39838],{"__ignoreMap":48},[52,39781,39782,39784,39786],{"class":54,"line":55},[52,39783,59],{"class":58},[52,39785,63],{"class":371},[52,39787,77],{"class":58},[52,39789,39790,39792],{"class":54,"line":80},[52,39791,83],{"class":58},[52,39793,39730],{"class":371},[52,39795,39796,39798,39800,39802,39804],{"class":54,"line":108},[52,39797,17981],{"class":66},[52,39799,70],{"class":231},[52,39801,723],{"class":58},[52,39803,6391],{"class":371},[52,39805,729],{"class":58},[52,39807,39808,39810,39812,39814,39816],{"class":54,"line":118},[52,39809,7361],{"class":66},[52,39811,70],{"class":231},[52,39813,723],{"class":58},[52,39815,6391],{"class":371},[52,39817,729],{"class":58},[52,39819,39820],{"class":54,"line":594},[52,39821,26949],{"class":58},[52,39823,39824,39826,39828],{"class":54,"line":600},[52,39825,2213],{"class":58},[52,39827,2216],{"class":371},[52,39829,105],{"class":58},[52,39831,39832,39834,39836],{"class":54,"line":606},[52,39833,2230],{"class":58},[52,39835,4808],{"class":371},[52,39837,77],{"class":58},[52,39839,39840,39842,39844],{"class":54,"line":653},[52,39841,121],{"class":58},[52,39843,63],{"class":371},[52,39845,77],{"class":58},[43,39847,39848],{"className":2507,"code":39777,"language":2509,"meta":48,"style":48},[31,39849,39850,39858,39864,39874,39884,39888,39896,39904],{"__ignoreMap":48},[52,39851,39852,39854,39856],{"class":54,"line":55},[52,39853,59],{"class":58},[52,39855,63],{"class":371},[52,39857,77],{"class":58},[52,39859,39860,39862],{"class":54,"line":80},[52,39861,83],{"class":58},[52,39863,39730],{"class":371},[52,39865,39866,39868,39870,39872],{"class":54,"line":108},[52,39867,17981],{"class":66},[52,39869,24845],{"class":58},[52,39871,6391],{"class":371},[52,39873,729],{"class":58},[52,39875,39876,39878,39880,39882],{"class":54,"line":118},[52,39877,7361],{"class":66},[52,39879,24845],{"class":58},[52,39881,6391],{"class":371},[52,39883,729],{"class":58},[52,39885,39886],{"class":54,"line":594},[52,39887,26949],{"class":58},[52,39889,39890,39892,39894],{"class":54,"line":600},[52,39891,2213],{"class":58},[52,39893,2216],{"class":371},[52,39895,105],{"class":58},[52,39897,39898,39900,39902],{"class":54,"line":606},[52,39899,2230],{"class":58},[52,39901,4808],{"class":371},[52,39903,77],{"class":58},[52,39905,39906,39908,39910],{"class":54,"line":653},[52,39907,121],{"class":58},[52,39909,63],{"class":371},[52,39911,77],{"class":58},[43,39913,39914],{"className":419,"code":39777,"language":420,"meta":48,"style":48},[31,39915,39916,39924,39930,39942,39954,39958,39966,39974],{"__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,39730],{"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,39946,39948,39950,39952],{"class":54,"line":118},[52,39945,7361],{"class":66},[52,39947,70],{"class":231},[52,39949,723],{"class":58},[52,39951,6391],{"class":371},[52,39953,729],{"class":58},[52,39955,39956],{"class":54,"line":594},[52,39957,26949],{"class":58},[52,39959,39960,39962,39964],{"class":54,"line":600},[52,39961,2213],{"class":58},[52,39963,2216],{"class":371},[52,39965,105],{"class":58},[52,39967,39968,39970,39972],{"class":54,"line":606},[52,39969,2230],{"class":58},[52,39971,4808],{"class":371},[52,39973,77],{"class":58},[52,39975,39976,39978,39980],{"class":54,"line":653},[52,39977,121],{"class":58},[52,39979,63],{"class":371},[52,39981,77],{"class":58},[43,39983,39985],{"className":222,"code":39984,"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,39986,39987,39997,40001,40015,40019,40035,40043,40047,40051],{"__ignoreMap":48},[52,39988,39989,39991,39993,39995],{"class":54,"line":55},[52,39990,232],{"class":231},[52,39992,9231],{"class":58},[52,39994,238],{"class":231},[52,39996,9236],{"class":73},[52,39998,39999],{"class":54,"line":80},[52,40000,597],{"emptyLinePlaceholder":171},[52,40002,40003,40005,40007,40009,40011,40013],{"class":54,"line":108},[52,40004,1721],{"class":231},[52,40006,1724],{"class":371},[52,40008,1727],{"class":231},[52,40010,1730],{"class":231},[52,40012,1733],{"class":66},[52,40014,1736],{"class":58},[52,40016,40017],{"class":54,"line":118},[52,40018,1751],{"class":58},[52,40020,40021,40023,40025,40027,40029,40031,40033],{"class":54,"line":594},[52,40022,1756],{"class":58},[52,40024,5251],{"class":73},[52,40026,27194],{"class":58},[52,40028,6391],{"class":371},[52,40030,4278],{"class":58},[52,40032,6391],{"class":371},[52,40034,5259],{"class":58},[52,40036,40037,40039,40041],{"class":54,"line":600},[52,40038,4727],{"class":58},[52,40040,2869],{"class":73},[52,40042,2129],{"class":58},[52,40044,40045],{"class":54,"line":606},[52,40046,4744],{"class":58},[52,40048,40049],{"class":54,"line":653},[52,40050,1773],{"class":58},[52,40052,40053],{"class":54,"line":662},[52,40054,1778],{"class":58},[156,40056,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":40058},[40059,40060],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/griddistortion",{"title":4808,"description":39699},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":40067,"title":40068,"body":40069,"category":40331,"componentType":20848,"description":40076,"extension":168,"meta":40332,"navigation":171,"path":40333,"requiresChild":171,"seo":40334,"stem":40335,"__hash__":40336},"components/docs/components/Group.md","Group",{"type":8,"value":40070,"toc":40328},[40071,40074,40077,40079,40081,40326],[11,40072,40068],{"id":40073},"group",[15,40075,40076],{},"Container for organizing and composing child effects",[26901,40078],{"component":40068},[23,40080,26913],{"id":26912},[217,40082,40083,40128,40172,40216,40260],{":tabs":1543},[43,40084,40086],{"className":45,"code":40085,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,40087,40088,40096,40104,40112,40120],{"__ignoreMap":48},[52,40089,40090,40092,40094],{"class":54,"line":55},[52,40091,59],{"class":58},[52,40093,63],{"class":62},[52,40095,77],{"class":58},[52,40097,40098,40100,40102],{"class":54,"line":80},[52,40099,83],{"class":58},[52,40101,40068],{"class":62},[52,40103,77],{"class":58},[52,40105,40106,40108,40110],{"class":54,"line":108},[52,40107,2213],{"class":58},[52,40109,2216],{"class":62},[52,40111,105],{"class":58},[52,40113,40114,40116,40118],{"class":54,"line":118},[52,40115,2230],{"class":58},[52,40117,40068],{"class":62},[52,40119,77],{"class":58},[52,40121,40122,40124,40126],{"class":54,"line":594},[52,40123,121],{"class":58},[52,40125,63],{"class":62},[52,40127,77],{"class":58},[43,40129,40130],{"className":360,"code":40085,"language":362,"meta":48,"style":48},[31,40131,40132,40140,40148,40156,40164],{"__ignoreMap":48},[52,40133,40134,40136,40138],{"class":54,"line":55},[52,40135,59],{"class":58},[52,40137,63],{"class":371},[52,40139,77],{"class":58},[52,40141,40142,40144,40146],{"class":54,"line":80},[52,40143,83],{"class":58},[52,40145,40068],{"class":371},[52,40147,77],{"class":58},[52,40149,40150,40152,40154],{"class":54,"line":108},[52,40151,2213],{"class":58},[52,40153,2216],{"class":371},[52,40155,105],{"class":58},[52,40157,40158,40160,40162],{"class":54,"line":118},[52,40159,2230],{"class":58},[52,40161,40068],{"class":371},[52,40163,77],{"class":58},[52,40165,40166,40168,40170],{"class":54,"line":594},[52,40167,121],{"class":58},[52,40169,63],{"class":371},[52,40171,77],{"class":58},[43,40173,40174],{"className":2507,"code":40085,"language":2509,"meta":48,"style":48},[31,40175,40176,40184,40192,40200,40208],{"__ignoreMap":48},[52,40177,40178,40180,40182],{"class":54,"line":55},[52,40179,59],{"class":58},[52,40181,63],{"class":371},[52,40183,77],{"class":58},[52,40185,40186,40188,40190],{"class":54,"line":80},[52,40187,83],{"class":58},[52,40189,40068],{"class":371},[52,40191,77],{"class":58},[52,40193,40194,40196,40198],{"class":54,"line":108},[52,40195,2213],{"class":58},[52,40197,2216],{"class":371},[52,40199,105],{"class":58},[52,40201,40202,40204,40206],{"class":54,"line":118},[52,40203,2230],{"class":58},[52,40205,40068],{"class":371},[52,40207,77],{"class":58},[52,40209,40210,40212,40214],{"class":54,"line":594},[52,40211,121],{"class":58},[52,40213,63],{"class":371},[52,40215,77],{"class":58},[43,40217,40218],{"className":419,"code":40085,"language":420,"meta":48,"style":48},[31,40219,40220,40228,40236,40244,40252],{"__ignoreMap":48},[52,40221,40222,40224,40226],{"class":54,"line":55},[52,40223,59],{"class":58},[52,40225,63],{"class":371},[52,40227,77],{"class":58},[52,40229,40230,40232,40234],{"class":54,"line":80},[52,40231,83],{"class":58},[52,40233,40068],{"class":371},[52,40235,77],{"class":58},[52,40237,40238,40240,40242],{"class":54,"line":108},[52,40239,2213],{"class":58},[52,40241,2216],{"class":371},[52,40243,105],{"class":58},[52,40245,40246,40248,40250],{"class":54,"line":118},[52,40247,2230],{"class":58},[52,40249,40068],{"class":371},[52,40251,77],{"class":58},[52,40253,40254,40256,40258],{"class":54,"line":594},[52,40255,121],{"class":58},[52,40257,63],{"class":371},[52,40259,77],{"class":58},[43,40261,40263],{"className":222,"code":40262,"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,40264,40265,40275,40279,40293,40297,40306,40314,40318,40322],{"__ignoreMap":48},[52,40266,40267,40269,40271,40273],{"class":54,"line":55},[52,40268,232],{"class":231},[52,40270,9231],{"class":58},[52,40272,238],{"class":231},[52,40274,9236],{"class":73},[52,40276,40277],{"class":54,"line":80},[52,40278,597],{"emptyLinePlaceholder":171},[52,40280,40281,40283,40285,40287,40289,40291],{"class":54,"line":108},[52,40282,1721],{"class":231},[52,40284,1724],{"class":371},[52,40286,1727],{"class":231},[52,40288,1730],{"class":231},[52,40290,1733],{"class":66},[52,40292,1736],{"class":58},[52,40294,40295],{"class":54,"line":118},[52,40296,1751],{"class":58},[52,40298,40299,40301,40304],{"class":54,"line":594},[52,40300,1756],{"class":58},[52,40302,40303],{"class":73},"'Group'",[52,40305,4722],{"class":58},[52,40307,40308,40310,40312],{"class":54,"line":600},[52,40309,4727],{"class":58},[52,40311,2869],{"class":73},[52,40313,2129],{"class":58},[52,40315,40316],{"class":54,"line":606},[52,40317,4744],{"class":58},[52,40319,40320],{"class":54,"line":653},[52,40321,1773],{"class":58},[52,40323,40324],{"class":54,"line":662},[52,40325,1778],{"class":58},[156,40327,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40329},[40330],{"id":26912,"depth":80,"text":26913},"Utilities",{},"/docs/components/group",{"title":40068,"description":40076},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":40338,"title":40339,"body":40340,"category":27503,"componentType":20848,"description":40347,"extension":168,"meta":40608,"navigation":171,"path":40609,"requiresChild":171,"seo":40610,"stem":40611,"__hash__":40612},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":40341,"toc":40604},[40342,40345,40348,40350,40352,40355,40357,40602],[11,40343,40339],{"id":40344},"halftone",[15,40346,40347],{},"Halftone dot pattern effect for printing aesthetics",[26901,40349],{"component":40339},[23,40351,26905],{"id":21503},[26907,40353],{":props":40354},"[{\"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,40356,26913],{"id":26912},[217,40358,40359,40404,40448,40492,40536],{":tabs":1543},[43,40360,40362],{"className":45,"code":40361,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\n\u003C/Shader>\n",[31,40363,40364,40372,40380,40388,40396],{"__ignoreMap":48},[52,40365,40366,40368,40370],{"class":54,"line":55},[52,40367,59],{"class":58},[52,40369,63],{"class":62},[52,40371,77],{"class":58},[52,40373,40374,40376,40378],{"class":54,"line":80},[52,40375,83],{"class":58},[52,40377,40339],{"class":62},[52,40379,77],{"class":58},[52,40381,40382,40384,40386],{"class":54,"line":108},[52,40383,2213],{"class":58},[52,40385,2216],{"class":62},[52,40387,105],{"class":58},[52,40389,40390,40392,40394],{"class":54,"line":118},[52,40391,2230],{"class":58},[52,40393,40339],{"class":62},[52,40395,77],{"class":58},[52,40397,40398,40400,40402],{"class":54,"line":594},[52,40399,121],{"class":58},[52,40401,63],{"class":62},[52,40403,77],{"class":58},[43,40405,40406],{"className":360,"code":40361,"language":362,"meta":48,"style":48},[31,40407,40408,40416,40424,40432,40440],{"__ignoreMap":48},[52,40409,40410,40412,40414],{"class":54,"line":55},[52,40411,59],{"class":58},[52,40413,63],{"class":371},[52,40415,77],{"class":58},[52,40417,40418,40420,40422],{"class":54,"line":80},[52,40419,83],{"class":58},[52,40421,40339],{"class":371},[52,40423,77],{"class":58},[52,40425,40426,40428,40430],{"class":54,"line":108},[52,40427,2213],{"class":58},[52,40429,2216],{"class":371},[52,40431,105],{"class":58},[52,40433,40434,40436,40438],{"class":54,"line":118},[52,40435,2230],{"class":58},[52,40437,40339],{"class":371},[52,40439,77],{"class":58},[52,40441,40442,40444,40446],{"class":54,"line":594},[52,40443,121],{"class":58},[52,40445,63],{"class":371},[52,40447,77],{"class":58},[43,40449,40450],{"className":2507,"code":40361,"language":2509,"meta":48,"style":48},[31,40451,40452,40460,40468,40476,40484],{"__ignoreMap":48},[52,40453,40454,40456,40458],{"class":54,"line":55},[52,40455,59],{"class":58},[52,40457,63],{"class":371},[52,40459,77],{"class":58},[52,40461,40462,40464,40466],{"class":54,"line":80},[52,40463,83],{"class":58},[52,40465,40339],{"class":371},[52,40467,77],{"class":58},[52,40469,40470,40472,40474],{"class":54,"line":108},[52,40471,2213],{"class":58},[52,40473,2216],{"class":371},[52,40475,105],{"class":58},[52,40477,40478,40480,40482],{"class":54,"line":118},[52,40479,2230],{"class":58},[52,40481,40339],{"class":371},[52,40483,77],{"class":58},[52,40485,40486,40488,40490],{"class":54,"line":594},[52,40487,121],{"class":58},[52,40489,63],{"class":371},[52,40491,77],{"class":58},[43,40493,40494],{"className":419,"code":40361,"language":420,"meta":48,"style":48},[31,40495,40496,40504,40512,40520,40528],{"__ignoreMap":48},[52,40497,40498,40500,40502],{"class":54,"line":55},[52,40499,59],{"class":58},[52,40501,63],{"class":371},[52,40503,77],{"class":58},[52,40505,40506,40508,40510],{"class":54,"line":80},[52,40507,83],{"class":58},[52,40509,40339],{"class":371},[52,40511,77],{"class":58},[52,40513,40514,40516,40518],{"class":54,"line":108},[52,40515,2213],{"class":58},[52,40517,2216],{"class":371},[52,40519,105],{"class":58},[52,40521,40522,40524,40526],{"class":54,"line":118},[52,40523,2230],{"class":58},[52,40525,40339],{"class":371},[52,40527,77],{"class":58},[52,40529,40530,40532,40534],{"class":54,"line":594},[52,40531,121],{"class":58},[52,40533,63],{"class":371},[52,40535,77],{"class":58},[43,40537,40539],{"className":222,"code":40538,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Halftone', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,40540,40541,40551,40555,40569,40573,40582,40590,40594,40598],{"__ignoreMap":48},[52,40542,40543,40545,40547,40549],{"class":54,"line":55},[52,40544,232],{"class":231},[52,40546,9231],{"class":58},[52,40548,238],{"class":231},[52,40550,9236],{"class":73},[52,40552,40553],{"class":54,"line":80},[52,40554,597],{"emptyLinePlaceholder":171},[52,40556,40557,40559,40561,40563,40565,40567],{"class":54,"line":108},[52,40558,1721],{"class":231},[52,40560,1724],{"class":371},[52,40562,1727],{"class":231},[52,40564,1730],{"class":231},[52,40566,1733],{"class":66},[52,40568,1736],{"class":58},[52,40570,40571],{"class":54,"line":118},[52,40572,1751],{"class":58},[52,40574,40575,40577,40580],{"class":54,"line":594},[52,40576,1756],{"class":58},[52,40578,40579],{"class":73},"'Halftone'",[52,40581,4722],{"class":58},[52,40583,40584,40586,40588],{"class":54,"line":600},[52,40585,4727],{"class":58},[52,40587,2869],{"class":73},[52,40589,2129],{"class":58},[52,40591,40592],{"class":54,"line":606},[52,40593,4744],{"class":58},[52,40595,40596],{"class":54,"line":653},[52,40597,1773],{"class":58},[52,40599,40600],{"class":54,"line":662},[52,40601,1778],{"class":58},[156,40603,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40605},[40606,40607],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/halftone",{"title":40339,"description":40347},"docs/components/Halftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":40614,"title":40615,"body":40616,"category":27760,"componentType":20842,"description":40623,"extension":168,"meta":40808,"navigation":171,"path":40809,"requiresChild":27763,"seo":40810,"stem":40811,"__hash__":40812},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":40617,"toc":40804},[40618,40621,40624,40626,40628,40631,40633,40802],[11,40619,40615],{"id":40620},"hexgrid",[15,40622,40623],{},"Honeycomb hexagonal grid pattern",[26901,40625],{"component":40615},[23,40627,26905],{"id":21503},[26907,40629],{":props":40630},"[{\"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,40632,26913],{"id":26912},[217,40634,40635,40664,40692,40720,40748],{":tabs":1543},[43,40636,40638],{"className":45,"code":40637,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,40639,40640,40648,40656],{"__ignoreMap":48},[52,40641,40642,40644,40646],{"class":54,"line":55},[52,40643,59],{"class":58},[52,40645,63],{"class":62},[52,40647,77],{"class":58},[52,40649,40650,40652,40654],{"class":54,"line":80},[52,40651,83],{"class":58},[52,40653,40615],{"class":62},[52,40655,105],{"class":58},[52,40657,40658,40660,40662],{"class":54,"line":108},[52,40659,121],{"class":58},[52,40661,63],{"class":62},[52,40663,77],{"class":58},[43,40665,40666],{"className":360,"code":40637,"language":362,"meta":48,"style":48},[31,40667,40668,40676,40684],{"__ignoreMap":48},[52,40669,40670,40672,40674],{"class":54,"line":55},[52,40671,59],{"class":58},[52,40673,63],{"class":371},[52,40675,77],{"class":58},[52,40677,40678,40680,40682],{"class":54,"line":80},[52,40679,83],{"class":58},[52,40681,40615],{"class":371},[52,40683,105],{"class":58},[52,40685,40686,40688,40690],{"class":54,"line":108},[52,40687,121],{"class":58},[52,40689,63],{"class":371},[52,40691,77],{"class":58},[43,40693,40694],{"className":2507,"code":40637,"language":2509,"meta":48,"style":48},[31,40695,40696,40704,40712],{"__ignoreMap":48},[52,40697,40698,40700,40702],{"class":54,"line":55},[52,40699,59],{"class":58},[52,40701,63],{"class":371},[52,40703,77],{"class":58},[52,40705,40706,40708,40710],{"class":54,"line":80},[52,40707,83],{"class":58},[52,40709,40615],{"class":371},[52,40711,105],{"class":58},[52,40713,40714,40716,40718],{"class":54,"line":108},[52,40715,121],{"class":58},[52,40717,63],{"class":371},[52,40719,77],{"class":58},[43,40721,40722],{"className":419,"code":40637,"language":420,"meta":48,"style":48},[31,40723,40724,40732,40740],{"__ignoreMap":48},[52,40725,40726,40728,40730],{"class":54,"line":55},[52,40727,59],{"class":58},[52,40729,63],{"class":371},[52,40731,77],{"class":58},[52,40733,40734,40736,40738],{"class":54,"line":80},[52,40735,83],{"class":58},[52,40737,40615],{"class":371},[52,40739,105],{"class":58},[52,40741,40742,40744,40746],{"class":54,"line":108},[52,40743,121],{"class":58},[52,40745,63],{"class":371},[52,40747,77],{"class":58},[43,40749,40751],{"className":222,"code":40750,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'HexGrid', props: {} }\n ]\n})\n",[31,40752,40753,40763,40767,40781,40785,40794,40798],{"__ignoreMap":48},[52,40754,40755,40757,40759,40761],{"class":54,"line":55},[52,40756,232],{"class":231},[52,40758,9231],{"class":58},[52,40760,238],{"class":231},[52,40762,9236],{"class":73},[52,40764,40765],{"class":54,"line":80},[52,40766,597],{"emptyLinePlaceholder":171},[52,40768,40769,40771,40773,40775,40777,40779],{"class":54,"line":108},[52,40770,1721],{"class":231},[52,40772,1724],{"class":371},[52,40774,1727],{"class":231},[52,40776,1730],{"class":231},[52,40778,1733],{"class":66},[52,40780,1736],{"class":58},[52,40782,40783],{"class":54,"line":118},[52,40784,1751],{"class":58},[52,40786,40787,40789,40792],{"class":54,"line":594},[52,40788,1756],{"class":58},[52,40790,40791],{"class":73},"'HexGrid'",[52,40793,2129],{"class":58},[52,40795,40796],{"class":54,"line":600},[52,40797,1773],{"class":58},[52,40799,40800],{"class":54,"line":606},[52,40801,1778],{"class":58},[156,40803,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40805},[40806,40807],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hexgrid",{"title":40615,"description":40623},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":40814,"title":40815,"body":40816,"category":28771,"componentType":20848,"description":40823,"extension":168,"meta":41084,"navigation":171,"path":41085,"requiresChild":171,"seo":41086,"stem":41087,"__hash__":41088},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":40817,"toc":41080},[40818,40821,40824,40826,40828,40831,40833,41078],[11,40819,40815],{"id":40820},"hueshift",[15,40822,40823],{},"Rotate hue around the color wheel",[26901,40825],{"component":40815},[23,40827,26905],{"id":21503},[26907,40829],{":props":40830},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,40832,26913],{"id":26912},[217,40834,40835,40880,40924,40968,41012],{":tabs":1543},[43,40836,40838],{"className":45,"code":40837,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,40839,40840,40848,40856,40864,40872],{"__ignoreMap":48},[52,40841,40842,40844,40846],{"class":54,"line":55},[52,40843,59],{"class":58},[52,40845,63],{"class":62},[52,40847,77],{"class":58},[52,40849,40850,40852,40854],{"class":54,"line":80},[52,40851,83],{"class":58},[52,40853,40815],{"class":62},[52,40855,77],{"class":58},[52,40857,40858,40860,40862],{"class":54,"line":108},[52,40859,2213],{"class":58},[52,40861,2216],{"class":62},[52,40863,105],{"class":58},[52,40865,40866,40868,40870],{"class":54,"line":118},[52,40867,2230],{"class":58},[52,40869,40815],{"class":62},[52,40871,77],{"class":58},[52,40873,40874,40876,40878],{"class":54,"line":594},[52,40875,121],{"class":58},[52,40877,63],{"class":62},[52,40879,77],{"class":58},[43,40881,40882],{"className":360,"code":40837,"language":362,"meta":48,"style":48},[31,40883,40884,40892,40900,40908,40916],{"__ignoreMap":48},[52,40885,40886,40888,40890],{"class":54,"line":55},[52,40887,59],{"class":58},[52,40889,63],{"class":371},[52,40891,77],{"class":58},[52,40893,40894,40896,40898],{"class":54,"line":80},[52,40895,83],{"class":58},[52,40897,40815],{"class":371},[52,40899,77],{"class":58},[52,40901,40902,40904,40906],{"class":54,"line":108},[52,40903,2213],{"class":58},[52,40905,2216],{"class":371},[52,40907,105],{"class":58},[52,40909,40910,40912,40914],{"class":54,"line":118},[52,40911,2230],{"class":58},[52,40913,40815],{"class":371},[52,40915,77],{"class":58},[52,40917,40918,40920,40922],{"class":54,"line":594},[52,40919,121],{"class":58},[52,40921,63],{"class":371},[52,40923,77],{"class":58},[43,40925,40926],{"className":2507,"code":40837,"language":2509,"meta":48,"style":48},[31,40927,40928,40936,40944,40952,40960],{"__ignoreMap":48},[52,40929,40930,40932,40934],{"class":54,"line":55},[52,40931,59],{"class":58},[52,40933,63],{"class":371},[52,40935,77],{"class":58},[52,40937,40938,40940,40942],{"class":54,"line":80},[52,40939,83],{"class":58},[52,40941,40815],{"class":371},[52,40943,77],{"class":58},[52,40945,40946,40948,40950],{"class":54,"line":108},[52,40947,2213],{"class":58},[52,40949,2216],{"class":371},[52,40951,105],{"class":58},[52,40953,40954,40956,40958],{"class":54,"line":118},[52,40955,2230],{"class":58},[52,40957,40815],{"class":371},[52,40959,77],{"class":58},[52,40961,40962,40964,40966],{"class":54,"line":594},[52,40963,121],{"class":58},[52,40965,63],{"class":371},[52,40967,77],{"class":58},[43,40969,40970],{"className":419,"code":40837,"language":420,"meta":48,"style":48},[31,40971,40972,40980,40988,40996,41004],{"__ignoreMap":48},[52,40973,40974,40976,40978],{"class":54,"line":55},[52,40975,59],{"class":58},[52,40977,63],{"class":371},[52,40979,77],{"class":58},[52,40981,40982,40984,40986],{"class":54,"line":80},[52,40983,83],{"class":58},[52,40985,40815],{"class":371},[52,40987,77],{"class":58},[52,40989,40990,40992,40994],{"class":54,"line":108},[52,40991,2213],{"class":58},[52,40993,2216],{"class":371},[52,40995,105],{"class":58},[52,40997,40998,41000,41002],{"class":54,"line":118},[52,40999,2230],{"class":58},[52,41001,40815],{"class":371},[52,41003,77],{"class":58},[52,41005,41006,41008,41010],{"class":54,"line":594},[52,41007,121],{"class":58},[52,41009,63],{"class":371},[52,41011,77],{"class":58},[43,41013,41015],{"className":222,"code":41014,"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,41016,41017,41027,41031,41045,41049,41058,41066,41070,41074],{"__ignoreMap":48},[52,41018,41019,41021,41023,41025],{"class":54,"line":55},[52,41020,232],{"class":231},[52,41022,9231],{"class":58},[52,41024,238],{"class":231},[52,41026,9236],{"class":73},[52,41028,41029],{"class":54,"line":80},[52,41030,597],{"emptyLinePlaceholder":171},[52,41032,41033,41035,41037,41039,41041,41043],{"class":54,"line":108},[52,41034,1721],{"class":231},[52,41036,1724],{"class":371},[52,41038,1727],{"class":231},[52,41040,1730],{"class":231},[52,41042,1733],{"class":66},[52,41044,1736],{"class":58},[52,41046,41047],{"class":54,"line":118},[52,41048,1751],{"class":58},[52,41050,41051,41053,41056],{"class":54,"line":594},[52,41052,1756],{"class":58},[52,41054,41055],{"class":73},"'HueShift'",[52,41057,4722],{"class":58},[52,41059,41060,41062,41064],{"class":54,"line":600},[52,41061,4727],{"class":58},[52,41063,2869],{"class":73},[52,41065,2129],{"class":58},[52,41067,41068],{"class":54,"line":606},[52,41069,4744],{"class":58},[52,41071,41072],{"class":54,"line":653},[52,41073,1773],{"class":58},[52,41075,41076],{"class":54,"line":662},[52,41077,1778],{"class":58},[156,41079,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41081},[41082,41083],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hueshift",{"title":40815,"description":40823},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":41090,"title":41091,"body":41092,"category":27760,"componentType":20842,"description":41099,"extension":168,"meta":41284,"navigation":171,"path":41285,"requiresChild":27763,"seo":41286,"stem":41287,"__hash__":41288},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":41093,"toc":41280},[41094,41097,41100,41102,41104,41107,41109,41278],[11,41095,41091],{"id":41096},"imagetexture",[15,41098,41099],{},"Display an image with customizable object-fit modes",[26901,41101],{"component":41091},[23,41103,26905],{"id":21503},[26907,41105],{":props":41106},"[{\"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,41108,26913],{"id":26912},[217,41110,41111,41140,41168,41196,41224],{":tabs":1543},[43,41112,41114],{"className":45,"code":41113,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,41115,41116,41124,41132],{"__ignoreMap":48},[52,41117,41118,41120,41122],{"class":54,"line":55},[52,41119,59],{"class":58},[52,41121,63],{"class":62},[52,41123,77],{"class":58},[52,41125,41126,41128,41130],{"class":54,"line":80},[52,41127,83],{"class":58},[52,41129,41091],{"class":62},[52,41131,105],{"class":58},[52,41133,41134,41136,41138],{"class":54,"line":108},[52,41135,121],{"class":58},[52,41137,63],{"class":62},[52,41139,77],{"class":58},[43,41141,41142],{"className":360,"code":41113,"language":362,"meta":48,"style":48},[31,41143,41144,41152,41160],{"__ignoreMap":48},[52,41145,41146,41148,41150],{"class":54,"line":55},[52,41147,59],{"class":58},[52,41149,63],{"class":371},[52,41151,77],{"class":58},[52,41153,41154,41156,41158],{"class":54,"line":80},[52,41155,83],{"class":58},[52,41157,41091],{"class":371},[52,41159,105],{"class":58},[52,41161,41162,41164,41166],{"class":54,"line":108},[52,41163,121],{"class":58},[52,41165,63],{"class":371},[52,41167,77],{"class":58},[43,41169,41170],{"className":2507,"code":41113,"language":2509,"meta":48,"style":48},[31,41171,41172,41180,41188],{"__ignoreMap":48},[52,41173,41174,41176,41178],{"class":54,"line":55},[52,41175,59],{"class":58},[52,41177,63],{"class":371},[52,41179,77],{"class":58},[52,41181,41182,41184,41186],{"class":54,"line":80},[52,41183,83],{"class":58},[52,41185,41091],{"class":371},[52,41187,105],{"class":58},[52,41189,41190,41192,41194],{"class":54,"line":108},[52,41191,121],{"class":58},[52,41193,63],{"class":371},[52,41195,77],{"class":58},[43,41197,41198],{"className":419,"code":41113,"language":420,"meta":48,"style":48},[31,41199,41200,41208,41216],{"__ignoreMap":48},[52,41201,41202,41204,41206],{"class":54,"line":55},[52,41203,59],{"class":58},[52,41205,63],{"class":371},[52,41207,77],{"class":58},[52,41209,41210,41212,41214],{"class":54,"line":80},[52,41211,83],{"class":58},[52,41213,41091],{"class":371},[52,41215,105],{"class":58},[52,41217,41218,41220,41222],{"class":54,"line":108},[52,41219,121],{"class":58},[52,41221,63],{"class":371},[52,41223,77],{"class":58},[43,41225,41227],{"className":222,"code":41226,"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,41228,41229,41239,41243,41257,41261,41270,41274],{"__ignoreMap":48},[52,41230,41231,41233,41235,41237],{"class":54,"line":55},[52,41232,232],{"class":231},[52,41234,9231],{"class":58},[52,41236,238],{"class":231},[52,41238,9236],{"class":73},[52,41240,41241],{"class":54,"line":80},[52,41242,597],{"emptyLinePlaceholder":171},[52,41244,41245,41247,41249,41251,41253,41255],{"class":54,"line":108},[52,41246,1721],{"class":231},[52,41248,1724],{"class":371},[52,41250,1727],{"class":231},[52,41252,1730],{"class":231},[52,41254,1733],{"class":66},[52,41256,1736],{"class":58},[52,41258,41259],{"class":54,"line":118},[52,41260,1751],{"class":58},[52,41262,41263,41265,41268],{"class":54,"line":594},[52,41264,1756],{"class":58},[52,41266,41267],{"class":73},"'ImageTexture'",[52,41269,2129],{"class":58},[52,41271,41272],{"class":54,"line":600},[52,41273,1773],{"class":58},[52,41275,41276],{"class":54,"line":606},[52,41277,1778],{"class":58},[156,41279,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41281},[41282,41283],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/imagetexture",{"title":41091,"description":41099},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":41290,"title":41291,"body":41292,"category":28771,"componentType":20848,"description":41299,"extension":168,"meta":41554,"navigation":171,"path":41555,"requiresChild":171,"seo":41556,"stem":41557,"__hash__":41558},"components/docs/components/Invert.md","Invert",{"type":8,"value":41293,"toc":41551},[41294,41297,41300,41302,41304,41549],[11,41295,41291],{"id":41296},"invert",[15,41298,41299],{},"Invert RGB colors while preserving alpha",[26901,41301],{"component":41291},[23,41303,26913],{"id":26912},[217,41305,41306,41351,41395,41439,41483],{":tabs":1543},[43,41307,41309],{"className":45,"code":41308,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,41310,41311,41319,41327,41335,41343],{"__ignoreMap":48},[52,41312,41313,41315,41317],{"class":54,"line":55},[52,41314,59],{"class":58},[52,41316,63],{"class":62},[52,41318,77],{"class":58},[52,41320,41321,41323,41325],{"class":54,"line":80},[52,41322,83],{"class":58},[52,41324,41291],{"class":62},[52,41326,77],{"class":58},[52,41328,41329,41331,41333],{"class":54,"line":108},[52,41330,2213],{"class":58},[52,41332,2216],{"class":62},[52,41334,105],{"class":58},[52,41336,41337,41339,41341],{"class":54,"line":118},[52,41338,2230],{"class":58},[52,41340,41291],{"class":62},[52,41342,77],{"class":58},[52,41344,41345,41347,41349],{"class":54,"line":594},[52,41346,121],{"class":58},[52,41348,63],{"class":62},[52,41350,77],{"class":58},[43,41352,41353],{"className":360,"code":41308,"language":362,"meta":48,"style":48},[31,41354,41355,41363,41371,41379,41387],{"__ignoreMap":48},[52,41356,41357,41359,41361],{"class":54,"line":55},[52,41358,59],{"class":58},[52,41360,63],{"class":371},[52,41362,77],{"class":58},[52,41364,41365,41367,41369],{"class":54,"line":80},[52,41366,83],{"class":58},[52,41368,41291],{"class":371},[52,41370,77],{"class":58},[52,41372,41373,41375,41377],{"class":54,"line":108},[52,41374,2213],{"class":58},[52,41376,2216],{"class":371},[52,41378,105],{"class":58},[52,41380,41381,41383,41385],{"class":54,"line":118},[52,41382,2230],{"class":58},[52,41384,41291],{"class":371},[52,41386,77],{"class":58},[52,41388,41389,41391,41393],{"class":54,"line":594},[52,41390,121],{"class":58},[52,41392,63],{"class":371},[52,41394,77],{"class":58},[43,41396,41397],{"className":2507,"code":41308,"language":2509,"meta":48,"style":48},[31,41398,41399,41407,41415,41423,41431],{"__ignoreMap":48},[52,41400,41401,41403,41405],{"class":54,"line":55},[52,41402,59],{"class":58},[52,41404,63],{"class":371},[52,41406,77],{"class":58},[52,41408,41409,41411,41413],{"class":54,"line":80},[52,41410,83],{"class":58},[52,41412,41291],{"class":371},[52,41414,77],{"class":58},[52,41416,41417,41419,41421],{"class":54,"line":108},[52,41418,2213],{"class":58},[52,41420,2216],{"class":371},[52,41422,105],{"class":58},[52,41424,41425,41427,41429],{"class":54,"line":118},[52,41426,2230],{"class":58},[52,41428,41291],{"class":371},[52,41430,77],{"class":58},[52,41432,41433,41435,41437],{"class":54,"line":594},[52,41434,121],{"class":58},[52,41436,63],{"class":371},[52,41438,77],{"class":58},[43,41440,41441],{"className":419,"code":41308,"language":420,"meta":48,"style":48},[31,41442,41443,41451,41459,41467,41475],{"__ignoreMap":48},[52,41444,41445,41447,41449],{"class":54,"line":55},[52,41446,59],{"class":58},[52,41448,63],{"class":371},[52,41450,77],{"class":58},[52,41452,41453,41455,41457],{"class":54,"line":80},[52,41454,83],{"class":58},[52,41456,41291],{"class":371},[52,41458,77],{"class":58},[52,41460,41461,41463,41465],{"class":54,"line":108},[52,41462,2213],{"class":58},[52,41464,2216],{"class":371},[52,41466,105],{"class":58},[52,41468,41469,41471,41473],{"class":54,"line":118},[52,41470,2230],{"class":58},[52,41472,41291],{"class":371},[52,41474,77],{"class":58},[52,41476,41477,41479,41481],{"class":54,"line":594},[52,41478,121],{"class":58},[52,41480,63],{"class":371},[52,41482,77],{"class":58},[43,41484,41486],{"className":222,"code":41485,"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,41487,41488,41498,41502,41516,41520,41529,41537,41541,41545],{"__ignoreMap":48},[52,41489,41490,41492,41494,41496],{"class":54,"line":55},[52,41491,232],{"class":231},[52,41493,9231],{"class":58},[52,41495,238],{"class":231},[52,41497,9236],{"class":73},[52,41499,41500],{"class":54,"line":80},[52,41501,597],{"emptyLinePlaceholder":171},[52,41503,41504,41506,41508,41510,41512,41514],{"class":54,"line":108},[52,41505,1721],{"class":231},[52,41507,1724],{"class":371},[52,41509,1727],{"class":231},[52,41511,1730],{"class":231},[52,41513,1733],{"class":66},[52,41515,1736],{"class":58},[52,41517,41518],{"class":54,"line":118},[52,41519,1751],{"class":58},[52,41521,41522,41524,41527],{"class":54,"line":594},[52,41523,1756],{"class":58},[52,41525,41526],{"class":73},"'Invert'",[52,41528,4722],{"class":58},[52,41530,41531,41533,41535],{"class":54,"line":600},[52,41532,4727],{"class":58},[52,41534,2869],{"class":73},[52,41536,2129],{"class":58},[52,41538,41539],{"class":54,"line":606},[52,41540,4744],{"class":58},[52,41542,41543],{"class":54,"line":653},[52,41544,1773],{"class":58},[52,41546,41547],{"class":54,"line":662},[52,41548,1778],{"class":58},[156,41550,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41552},[41553],{"id":26912,"depth":80,"text":26913},{},"/docs/components/invert",{"title":41291,"description":41299},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":41560,"title":41561,"body":41562,"category":29105,"componentType":20848,"description":41569,"extension":168,"meta":41830,"navigation":171,"path":41831,"requiresChild":171,"seo":41832,"stem":41833,"__hash__":41834},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":41563,"toc":41826},[41564,41567,41570,41572,41574,41577,41579,41824],[11,41565,41561],{"id":41566},"kaleidoscope",[15,41568,41569],{},"Create a kaleidoscope effect with radial mirrored segments",[26901,41571],{"component":41561},[23,41573,26905],{"id":21503},[26907,41575],{":props":41576},"[{\"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,41578,26913],{"id":26912},[217,41580,41581,41626,41670,41714,41758],{":tabs":1543},[43,41582,41584],{"className":45,"code":41583,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,41585,41586,41594,41602,41610,41618],{"__ignoreMap":48},[52,41587,41588,41590,41592],{"class":54,"line":55},[52,41589,59],{"class":58},[52,41591,63],{"class":62},[52,41593,77],{"class":58},[52,41595,41596,41598,41600],{"class":54,"line":80},[52,41597,83],{"class":58},[52,41599,41561],{"class":62},[52,41601,77],{"class":58},[52,41603,41604,41606,41608],{"class":54,"line":108},[52,41605,2213],{"class":58},[52,41607,2216],{"class":62},[52,41609,105],{"class":58},[52,41611,41612,41614,41616],{"class":54,"line":118},[52,41613,2230],{"class":58},[52,41615,41561],{"class":62},[52,41617,77],{"class":58},[52,41619,41620,41622,41624],{"class":54,"line":594},[52,41621,121],{"class":58},[52,41623,63],{"class":62},[52,41625,77],{"class":58},[43,41627,41628],{"className":360,"code":41583,"language":362,"meta":48,"style":48},[31,41629,41630,41638,41646,41654,41662],{"__ignoreMap":48},[52,41631,41632,41634,41636],{"class":54,"line":55},[52,41633,59],{"class":58},[52,41635,63],{"class":371},[52,41637,77],{"class":58},[52,41639,41640,41642,41644],{"class":54,"line":80},[52,41641,83],{"class":58},[52,41643,41561],{"class":371},[52,41645,77],{"class":58},[52,41647,41648,41650,41652],{"class":54,"line":108},[52,41649,2213],{"class":58},[52,41651,2216],{"class":371},[52,41653,105],{"class":58},[52,41655,41656,41658,41660],{"class":54,"line":118},[52,41657,2230],{"class":58},[52,41659,41561],{"class":371},[52,41661,77],{"class":58},[52,41663,41664,41666,41668],{"class":54,"line":594},[52,41665,121],{"class":58},[52,41667,63],{"class":371},[52,41669,77],{"class":58},[43,41671,41672],{"className":2507,"code":41583,"language":2509,"meta":48,"style":48},[31,41673,41674,41682,41690,41698,41706],{"__ignoreMap":48},[52,41675,41676,41678,41680],{"class":54,"line":55},[52,41677,59],{"class":58},[52,41679,63],{"class":371},[52,41681,77],{"class":58},[52,41683,41684,41686,41688],{"class":54,"line":80},[52,41685,83],{"class":58},[52,41687,41561],{"class":371},[52,41689,77],{"class":58},[52,41691,41692,41694,41696],{"class":54,"line":108},[52,41693,2213],{"class":58},[52,41695,2216],{"class":371},[52,41697,105],{"class":58},[52,41699,41700,41702,41704],{"class":54,"line":118},[52,41701,2230],{"class":58},[52,41703,41561],{"class":371},[52,41705,77],{"class":58},[52,41707,41708,41710,41712],{"class":54,"line":594},[52,41709,121],{"class":58},[52,41711,63],{"class":371},[52,41713,77],{"class":58},[43,41715,41716],{"className":419,"code":41583,"language":420,"meta":48,"style":48},[31,41717,41718,41726,41734,41742,41750],{"__ignoreMap":48},[52,41719,41720,41722,41724],{"class":54,"line":55},[52,41721,59],{"class":58},[52,41723,63],{"class":371},[52,41725,77],{"class":58},[52,41727,41728,41730,41732],{"class":54,"line":80},[52,41729,83],{"class":58},[52,41731,41561],{"class":371},[52,41733,77],{"class":58},[52,41735,41736,41738,41740],{"class":54,"line":108},[52,41737,2213],{"class":58},[52,41739,2216],{"class":371},[52,41741,105],{"class":58},[52,41743,41744,41746,41748],{"class":54,"line":118},[52,41745,2230],{"class":58},[52,41747,41561],{"class":371},[52,41749,77],{"class":58},[52,41751,41752,41754,41756],{"class":54,"line":594},[52,41753,121],{"class":58},[52,41755,63],{"class":371},[52,41757,77],{"class":58},[43,41759,41761],{"className":222,"code":41760,"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,41762,41763,41773,41777,41791,41795,41804,41812,41816,41820],{"__ignoreMap":48},[52,41764,41765,41767,41769,41771],{"class":54,"line":55},[52,41766,232],{"class":231},[52,41768,9231],{"class":58},[52,41770,238],{"class":231},[52,41772,9236],{"class":73},[52,41774,41775],{"class":54,"line":80},[52,41776,597],{"emptyLinePlaceholder":171},[52,41778,41779,41781,41783,41785,41787,41789],{"class":54,"line":108},[52,41780,1721],{"class":231},[52,41782,1724],{"class":371},[52,41784,1727],{"class":231},[52,41786,1730],{"class":231},[52,41788,1733],{"class":66},[52,41790,1736],{"class":58},[52,41792,41793],{"class":54,"line":118},[52,41794,1751],{"class":58},[52,41796,41797,41799,41802],{"class":54,"line":594},[52,41798,1756],{"class":58},[52,41800,41801],{"class":73},"'Kaleidoscope'",[52,41803,4722],{"class":58},[52,41805,41806,41808,41810],{"class":54,"line":600},[52,41807,4727],{"class":58},[52,41809,2869],{"class":73},[52,41811,2129],{"class":58},[52,41813,41814],{"class":54,"line":606},[52,41815,4744],{"class":58},[52,41817,41818],{"class":54,"line":653},[52,41819,1773],{"class":58},[52,41821,41822],{"class":54,"line":662},[52,41823,1778],{"class":58},[156,41825,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41827},[41828,41829],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/kaleidoscope",{"title":41561,"description":41569},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":41836,"title":41837,"body":41838,"category":27503,"componentType":20842,"description":41845,"extension":168,"meta":42085,"navigation":171,"path":42086,"requiresChild":27763,"seo":42087,"stem":42088,"__hash__":42089},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":41839,"toc":42081},[41840,41843,41846,41848,41850,41853,41855,42079],[11,41841,41837],{"id":41842},"lensflare",[15,41844,41845],{},"Realistic camera lens flare with artifacts.",[26901,41847],{"component":41837},[23,41849,26905],{"id":21503},[26907,41851],{":props":41852},"[{\"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,41854,26913],{"id":26912},[217,41856,41857,41896,41939,41979,42021],{":tabs":1543},[43,41858,41860],{"className":45,"code":41859,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,41861,41862,41870,41876,41884,41888],{"__ignoreMap":48},[52,41863,41864,41866,41868],{"class":54,"line":55},[52,41865,59],{"class":58},[52,41867,63],{"class":62},[52,41869,77],{"class":58},[52,41871,41872,41874],{"class":54,"line":80},[52,41873,83],{"class":58},[52,41875,17856],{"class":62},[52,41877,41878,41880,41882],{"class":54,"line":108},[52,41879,17870],{"class":66},[52,41881,70],{"class":58},[52,41883,32462],{"class":73},[52,41885,41886],{"class":54,"line":118},[52,41887,1224],{"class":58},[52,41889,41890,41892,41894],{"class":54,"line":594},[52,41891,121],{"class":58},[52,41893,63],{"class":62},[52,41895,77],{"class":58},[43,41897,41899],{"className":360,"code":41898,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,41900,41901,41909,41915,41927,41931],{"__ignoreMap":48},[52,41902,41903,41905,41907],{"class":54,"line":55},[52,41904,59],{"class":58},[52,41906,63],{"class":371},[52,41908,77],{"class":58},[52,41910,41911,41913],{"class":54,"line":80},[52,41912,83],{"class":58},[52,41914,17856],{"class":371},[52,41916,41917,41919,41921,41923,41925],{"class":54,"line":108},[52,41918,17981],{"class":66},[52,41920,70],{"class":231},[52,41922,723],{"class":58},[52,41924,5467],{"class":371},[52,41926,729],{"class":58},[52,41928,41929],{"class":54,"line":118},[52,41930,1224],{"class":58},[52,41932,41933,41935,41937],{"class":54,"line":594},[52,41934,121],{"class":58},[52,41936,63],{"class":371},[52,41938,77],{"class":58},[43,41940,41941],{"className":2507,"code":41898,"language":2509,"meta":48,"style":48},[31,41942,41943,41951,41957,41967,41971],{"__ignoreMap":48},[52,41944,41945,41947,41949],{"class":54,"line":55},[52,41946,59],{"class":58},[52,41948,63],{"class":371},[52,41950,77],{"class":58},[52,41952,41953,41955],{"class":54,"line":80},[52,41954,83],{"class":58},[52,41956,17856],{"class":371},[52,41958,41959,41961,41963,41965],{"class":54,"line":108},[52,41960,17981],{"class":66},[52,41962,24845],{"class":58},[52,41964,5467],{"class":371},[52,41966,729],{"class":58},[52,41968,41969],{"class":54,"line":118},[52,41970,1224],{"class":58},[52,41972,41973,41975,41977],{"class":54,"line":594},[52,41974,121],{"class":58},[52,41976,63],{"class":371},[52,41978,77],{"class":58},[43,41980,41981],{"className":419,"code":41898,"language":420,"meta":48,"style":48},[31,41982,41983,41991,41997,42009,42013],{"__ignoreMap":48},[52,41984,41985,41987,41989],{"class":54,"line":55},[52,41986,59],{"class":58},[52,41988,63],{"class":371},[52,41990,77],{"class":58},[52,41992,41993,41995],{"class":54,"line":80},[52,41994,83],{"class":58},[52,41996,17856],{"class":371},[52,41998,41999,42001,42003,42005,42007],{"class":54,"line":108},[52,42000,17981],{"class":66},[52,42002,70],{"class":231},[52,42004,723],{"class":58},[52,42006,5467],{"class":371},[52,42008,729],{"class":58},[52,42010,42011],{"class":54,"line":118},[52,42012,1224],{"class":58},[52,42014,42015,42017,42019],{"class":54,"line":594},[52,42016,121],{"class":58},[52,42018,63],{"class":371},[52,42020,77],{"class":58},[43,42022,42024],{"className":222,"code":42023,"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,42025,42026,42036,42040,42054,42058,42071,42075],{"__ignoreMap":48},[52,42027,42028,42030,42032,42034],{"class":54,"line":55},[52,42029,232],{"class":231},[52,42031,9231],{"class":58},[52,42033,238],{"class":231},[52,42035,9236],{"class":73},[52,42037,42038],{"class":54,"line":80},[52,42039,597],{"emptyLinePlaceholder":171},[52,42041,42042,42044,42046,42048,42050,42052],{"class":54,"line":108},[52,42043,1721],{"class":231},[52,42045,1724],{"class":371},[52,42047,1727],{"class":231},[52,42049,1730],{"class":231},[52,42051,1733],{"class":66},[52,42053,1736],{"class":58},[52,42055,42056],{"class":54,"line":118},[52,42057,1751],{"class":58},[52,42059,42060,42062,42065,42067,42069],{"class":54,"line":594},[52,42061,1756],{"class":58},[52,42063,42064],{"class":73},"'LensFlare'",[52,42066,27194],{"class":58},[52,42068,5467],{"class":371},[52,42070,1768],{"class":58},[52,42072,42073],{"class":54,"line":600},[52,42074,1773],{"class":58},[52,42076,42077],{"class":54,"line":606},[52,42078,1778],{"class":58},[156,42080,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42082},[42083,42084],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lensflare",{"title":41837,"description":41845},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":42091,"title":42092,"body":42093,"category":27225,"componentType":20848,"description":42100,"extension":168,"meta":42417,"navigation":171,"path":42418,"requiresChild":171,"seo":42419,"stem":42420,"__hash__":42421},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":42094,"toc":42413},[42095,42098,42101,42103,42105,42108,42110,42411],[11,42096,42092],{"id":42097},"linearblur",[15,42099,42100],{},"Directional motion blur in a specific angle",[26901,42102],{"component":42092},[23,42104,26905],{"id":21503},[26907,42106],{":props":42107},"[{\"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,42109,26913],{"id":26912},[217,42111,42112,42168,42227,42283,42341],{":tabs":1543},[43,42113,42115],{"className":45,"code":42114,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,42116,42117,42125,42132,42140,42144,42152,42160],{"__ignoreMap":48},[52,42118,42119,42121,42123],{"class":54,"line":55},[52,42120,59],{"class":58},[52,42122,63],{"class":62},[52,42124,77],{"class":58},[52,42126,42127,42129],{"class":54,"line":80},[52,42128,83],{"class":58},[52,42130,42131],{"class":62},"LinearBlur\n",[52,42133,42134,42136,42138],{"class":54,"line":108},[52,42135,17870],{"class":66},[52,42137,70],{"class":58},[52,42139,33488],{"class":73},[52,42141,42142],{"class":54,"line":118},[52,42143,26949],{"class":58},[52,42145,42146,42148,42150],{"class":54,"line":594},[52,42147,2213],{"class":58},[52,42149,2216],{"class":62},[52,42151,105],{"class":58},[52,42153,42154,42156,42158],{"class":54,"line":600},[52,42155,2230],{"class":58},[52,42157,42092],{"class":62},[52,42159,77],{"class":58},[52,42161,42162,42164,42166],{"class":54,"line":606},[52,42163,121],{"class":58},[52,42165,63],{"class":62},[52,42167,77],{"class":58},[43,42169,42171],{"className":360,"code":42170,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,42172,42173,42181,42187,42199,42203,42211,42219],{"__ignoreMap":48},[52,42174,42175,42177,42179],{"class":54,"line":55},[52,42176,59],{"class":58},[52,42178,63],{"class":371},[52,42180,77],{"class":58},[52,42182,42183,42185],{"class":54,"line":80},[52,42184,83],{"class":58},[52,42186,42131],{"class":371},[52,42188,42189,42191,42193,42195,42197],{"class":54,"line":108},[52,42190,17981],{"class":66},[52,42192,70],{"class":231},[52,42194,723],{"class":58},[52,42196,13194],{"class":371},[52,42198,729],{"class":58},[52,42200,42201],{"class":54,"line":118},[52,42202,26949],{"class":58},[52,42204,42205,42207,42209],{"class":54,"line":594},[52,42206,2213],{"class":58},[52,42208,2216],{"class":371},[52,42210,105],{"class":58},[52,42212,42213,42215,42217],{"class":54,"line":600},[52,42214,2230],{"class":58},[52,42216,42092],{"class":371},[52,42218,77],{"class":58},[52,42220,42221,42223,42225],{"class":54,"line":606},[52,42222,121],{"class":58},[52,42224,63],{"class":371},[52,42226,77],{"class":58},[43,42228,42229],{"className":2507,"code":42170,"language":2509,"meta":48,"style":48},[31,42230,42231,42239,42245,42255,42259,42267,42275],{"__ignoreMap":48},[52,42232,42233,42235,42237],{"class":54,"line":55},[52,42234,59],{"class":58},[52,42236,63],{"class":371},[52,42238,77],{"class":58},[52,42240,42241,42243],{"class":54,"line":80},[52,42242,83],{"class":58},[52,42244,42131],{"class":371},[52,42246,42247,42249,42251,42253],{"class":54,"line":108},[52,42248,17981],{"class":66},[52,42250,24845],{"class":58},[52,42252,13194],{"class":371},[52,42254,729],{"class":58},[52,42256,42257],{"class":54,"line":118},[52,42258,26949],{"class":58},[52,42260,42261,42263,42265],{"class":54,"line":594},[52,42262,2213],{"class":58},[52,42264,2216],{"class":371},[52,42266,105],{"class":58},[52,42268,42269,42271,42273],{"class":54,"line":600},[52,42270,2230],{"class":58},[52,42272,42092],{"class":371},[52,42274,77],{"class":58},[52,42276,42277,42279,42281],{"class":54,"line":606},[52,42278,121],{"class":58},[52,42280,63],{"class":371},[52,42282,77],{"class":58},[43,42284,42285],{"className":419,"code":42170,"language":420,"meta":48,"style":48},[31,42286,42287,42295,42301,42313,42317,42325,42333],{"__ignoreMap":48},[52,42288,42289,42291,42293],{"class":54,"line":55},[52,42290,59],{"class":58},[52,42292,63],{"class":371},[52,42294,77],{"class":58},[52,42296,42297,42299],{"class":54,"line":80},[52,42298,83],{"class":58},[52,42300,42131],{"class":371},[52,42302,42303,42305,42307,42309,42311],{"class":54,"line":108},[52,42304,17981],{"class":66},[52,42306,70],{"class":231},[52,42308,723],{"class":58},[52,42310,13194],{"class":371},[52,42312,729],{"class":58},[52,42314,42315],{"class":54,"line":118},[52,42316,26949],{"class":58},[52,42318,42319,42321,42323],{"class":54,"line":594},[52,42320,2213],{"class":58},[52,42322,2216],{"class":371},[52,42324,105],{"class":58},[52,42326,42327,42329,42331],{"class":54,"line":600},[52,42328,2230],{"class":58},[52,42330,42092],{"class":371},[52,42332,77],{"class":58},[52,42334,42335,42337,42339],{"class":54,"line":606},[52,42336,121],{"class":58},[52,42338,63],{"class":371},[52,42340,77],{"class":58},[43,42342,42344],{"className":222,"code":42343,"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,42345,42346,42356,42360,42374,42378,42391,42399,42403,42407],{"__ignoreMap":48},[52,42347,42348,42350,42352,42354],{"class":54,"line":55},[52,42349,232],{"class":231},[52,42351,9231],{"class":58},[52,42353,238],{"class":231},[52,42355,9236],{"class":73},[52,42357,42358],{"class":54,"line":80},[52,42359,597],{"emptyLinePlaceholder":171},[52,42361,42362,42364,42366,42368,42370,42372],{"class":54,"line":108},[52,42363,1721],{"class":231},[52,42365,1724],{"class":371},[52,42367,1727],{"class":231},[52,42369,1730],{"class":231},[52,42371,1733],{"class":66},[52,42373,1736],{"class":58},[52,42375,42376],{"class":54,"line":118},[52,42377,1751],{"class":58},[52,42379,42380,42382,42385,42387,42389],{"class":54,"line":594},[52,42381,1756],{"class":58},[52,42383,42384],{"class":73},"'LinearBlur'",[52,42386,27194],{"class":58},[52,42388,13194],{"class":371},[52,42390,5259],{"class":58},[52,42392,42393,42395,42397],{"class":54,"line":600},[52,42394,4727],{"class":58},[52,42396,2869],{"class":73},[52,42398,2129],{"class":58},[52,42400,42401],{"class":54,"line":606},[52,42402,4744],{"class":58},[52,42404,42405],{"class":54,"line":653},[52,42406,1773],{"class":58},[52,42408,42409],{"class":54,"line":662},[52,42410,1778],{"class":58},[156,42412,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42414},[42415,42416],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/linearblur",{"title":42092,"description":42100},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":42423,"title":86,"body":42424,"category":27760,"componentType":20842,"description":42431,"extension":168,"meta":42615,"navigation":171,"path":42616,"requiresChild":27763,"seo":42617,"stem":42618,"__hash__":42619},"components/docs/components/LinearGradient.md",{"type":8,"value":42425,"toc":42611},[42426,42429,42432,42434,42436,42439,42441,42609],[11,42427,86],{"id":42428},"lineargradient",[15,42430,42431],{},"Create smooth linear color gradients",[26901,42433],{"component":86},[23,42435,26905],{"id":21503},[26907,42437],{":props":42438},"[{\"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,42440,26913],{"id":26912},[217,42442,42443,42472,42500,42528,42556],{":tabs":1543},[43,42444,42446],{"className":45,"code":42445,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,42447,42448,42456,42464],{"__ignoreMap":48},[52,42449,42450,42452,42454],{"class":54,"line":55},[52,42451,59],{"class":58},[52,42453,63],{"class":62},[52,42455,77],{"class":58},[52,42457,42458,42460,42462],{"class":54,"line":80},[52,42459,83],{"class":58},[52,42461,86],{"class":62},[52,42463,105],{"class":58},[52,42465,42466,42468,42470],{"class":54,"line":108},[52,42467,121],{"class":58},[52,42469,63],{"class":62},[52,42471,77],{"class":58},[43,42473,42474],{"className":360,"code":42445,"language":362,"meta":48,"style":48},[31,42475,42476,42484,42492],{"__ignoreMap":48},[52,42477,42478,42480,42482],{"class":54,"line":55},[52,42479,59],{"class":58},[52,42481,63],{"class":371},[52,42483,77],{"class":58},[52,42485,42486,42488,42490],{"class":54,"line":80},[52,42487,83],{"class":58},[52,42489,86],{"class":371},[52,42491,105],{"class":58},[52,42493,42494,42496,42498],{"class":54,"line":108},[52,42495,121],{"class":58},[52,42497,63],{"class":371},[52,42499,77],{"class":58},[43,42501,42502],{"className":2507,"code":42445,"language":2509,"meta":48,"style":48},[31,42503,42504,42512,42520],{"__ignoreMap":48},[52,42505,42506,42508,42510],{"class":54,"line":55},[52,42507,59],{"class":58},[52,42509,63],{"class":371},[52,42511,77],{"class":58},[52,42513,42514,42516,42518],{"class":54,"line":80},[52,42515,83],{"class":58},[52,42517,86],{"class":371},[52,42519,105],{"class":58},[52,42521,42522,42524,42526],{"class":54,"line":108},[52,42523,121],{"class":58},[52,42525,63],{"class":371},[52,42527,77],{"class":58},[43,42529,42530],{"className":419,"code":42445,"language":420,"meta":48,"style":48},[31,42531,42532,42540,42548],{"__ignoreMap":48},[52,42533,42534,42536,42538],{"class":54,"line":55},[52,42535,59],{"class":58},[52,42537,63],{"class":371},[52,42539,77],{"class":58},[52,42541,42542,42544,42546],{"class":54,"line":80},[52,42543,83],{"class":58},[52,42545,86],{"class":371},[52,42547,105],{"class":58},[52,42549,42550,42552,42554],{"class":54,"line":108},[52,42551,121],{"class":58},[52,42553,63],{"class":371},[52,42555,77],{"class":58},[43,42557,42559],{"className":222,"code":42558,"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,42560,42561,42571,42575,42589,42593,42601,42605],{"__ignoreMap":48},[52,42562,42563,42565,42567,42569],{"class":54,"line":55},[52,42564,232],{"class":231},[52,42566,9231],{"class":58},[52,42568,238],{"class":231},[52,42570,9236],{"class":73},[52,42572,42573],{"class":54,"line":80},[52,42574,597],{"emptyLinePlaceholder":171},[52,42576,42577,42579,42581,42583,42585,42587],{"class":54,"line":108},[52,42578,1721],{"class":231},[52,42580,1724],{"class":371},[52,42582,1727],{"class":231},[52,42584,1730],{"class":231},[52,42586,1733],{"class":66},[52,42588,1736],{"class":58},[52,42590,42591],{"class":54,"line":118},[52,42592,1751],{"class":58},[52,42594,42595,42597,42599],{"class":54,"line":594},[52,42596,1756],{"class":58},[52,42598,2126],{"class":73},[52,42600,2129],{"class":58},[52,42602,42603],{"class":54,"line":600},[52,42604,1773],{"class":58},[52,42606,42607],{"class":54,"line":606},[52,42608,1778],{"class":58},[156,42610,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42612},[42613,42614],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lineargradient",{"title":86,"description":42431},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":42621,"title":42622,"body":42623,"category":30161,"componentType":20848,"description":42630,"extension":168,"meta":42993,"navigation":171,"path":42994,"requiresChild":171,"seo":42995,"stem":42996,"__hash__":42997},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":42624,"toc":42989},[42625,42628,42631,42633,42635,42638,42640,42987],[11,42626,42622],{"id":42627},"liquify",[15,42629,42630],{},"Liquid-like interactive deformation effect",[26901,42632],{"component":42622},[23,42634,26905],{"id":21503},[26907,42636],{":props":42637},"[{\"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,42639,26913],{"id":26912},[217,42641,42642,42706,42777,42843,42913],{":tabs":1543},[43,42643,42645],{"className":45,"code":42644,"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,42646,42647,42655,42662,42670,42678,42682,42690,42698],{"__ignoreMap":48},[52,42648,42649,42651,42653],{"class":54,"line":55},[52,42650,59],{"class":58},[52,42652,63],{"class":62},[52,42654,77],{"class":58},[52,42656,42657,42659],{"class":54,"line":80},[52,42658,83],{"class":58},[52,42660,42661],{"class":62},"Liquify\n",[52,42663,42664,42666,42668],{"class":54,"line":108},[52,42665,17870],{"class":66},[52,42667,70],{"class":58},[52,42669,32453],{"class":73},[52,42671,42672,42674,42676],{"class":54,"line":118},[52,42673,14901],{"class":66},[52,42675,70],{"class":58},[52,42677,28827],{"class":73},[52,42679,42680],{"class":54,"line":594},[52,42681,26949],{"class":58},[52,42683,42684,42686,42688],{"class":54,"line":600},[52,42685,2213],{"class":58},[52,42687,2216],{"class":62},[52,42689,105],{"class":58},[52,42691,42692,42694,42696],{"class":54,"line":606},[52,42693,2230],{"class":58},[52,42695,42622],{"class":62},[52,42697,77],{"class":58},[52,42699,42700,42702,42704],{"class":54,"line":653},[52,42701,121],{"class":58},[52,42703,63],{"class":62},[52,42705,77],{"class":58},[43,42707,42709],{"className":360,"code":42708,"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,42710,42711,42719,42725,42737,42749,42753,42761,42769],{"__ignoreMap":48},[52,42712,42713,42715,42717],{"class":54,"line":55},[52,42714,59],{"class":58},[52,42716,63],{"class":371},[52,42718,77],{"class":58},[52,42720,42721,42723],{"class":54,"line":80},[52,42722,83],{"class":58},[52,42724,42661],{"class":371},[52,42726,42727,42729,42731,42733,42735],{"class":54,"line":108},[52,42728,17981],{"class":66},[52,42730,70],{"class":231},[52,42732,723],{"class":58},[52,42734,32520],{"class":371},[52,42736,729],{"class":58},[52,42738,42739,42741,42743,42745,42747],{"class":54,"line":118},[52,42740,7361],{"class":66},[52,42742,70],{"class":231},[52,42744,723],{"class":58},[52,42746,6391],{"class":371},[52,42748,729],{"class":58},[52,42750,42751],{"class":54,"line":594},[52,42752,26949],{"class":58},[52,42754,42755,42757,42759],{"class":54,"line":600},[52,42756,2213],{"class":58},[52,42758,2216],{"class":371},[52,42760,105],{"class":58},[52,42762,42763,42765,42767],{"class":54,"line":606},[52,42764,2230],{"class":58},[52,42766,42622],{"class":371},[52,42768,77],{"class":58},[52,42770,42771,42773,42775],{"class":54,"line":653},[52,42772,121],{"class":58},[52,42774,63],{"class":371},[52,42776,77],{"class":58},[43,42778,42779],{"className":2507,"code":42708,"language":2509,"meta":48,"style":48},[31,42780,42781,42789,42795,42805,42815,42819,42827,42835],{"__ignoreMap":48},[52,42782,42783,42785,42787],{"class":54,"line":55},[52,42784,59],{"class":58},[52,42786,63],{"class":371},[52,42788,77],{"class":58},[52,42790,42791,42793],{"class":54,"line":80},[52,42792,83],{"class":58},[52,42794,42661],{"class":371},[52,42796,42797,42799,42801,42803],{"class":54,"line":108},[52,42798,17981],{"class":66},[52,42800,24845],{"class":58},[52,42802,32520],{"class":371},[52,42804,729],{"class":58},[52,42806,42807,42809,42811,42813],{"class":54,"line":118},[52,42808,7361],{"class":66},[52,42810,24845],{"class":58},[52,42812,6391],{"class":371},[52,42814,729],{"class":58},[52,42816,42817],{"class":54,"line":594},[52,42818,26949],{"class":58},[52,42820,42821,42823,42825],{"class":54,"line":600},[52,42822,2213],{"class":58},[52,42824,2216],{"class":371},[52,42826,105],{"class":58},[52,42828,42829,42831,42833],{"class":54,"line":606},[52,42830,2230],{"class":58},[52,42832,42622],{"class":371},[52,42834,77],{"class":58},[52,42836,42837,42839,42841],{"class":54,"line":653},[52,42838,121],{"class":58},[52,42840,63],{"class":371},[52,42842,77],{"class":58},[43,42844,42845],{"className":419,"code":42708,"language":420,"meta":48,"style":48},[31,42846,42847,42855,42861,42873,42885,42889,42897,42905],{"__ignoreMap":48},[52,42848,42849,42851,42853],{"class":54,"line":55},[52,42850,59],{"class":58},[52,42852,63],{"class":371},[52,42854,77],{"class":58},[52,42856,42857,42859],{"class":54,"line":80},[52,42858,83],{"class":58},[52,42860,42661],{"class":371},[52,42862,42863,42865,42867,42869,42871],{"class":54,"line":108},[52,42864,17981],{"class":66},[52,42866,70],{"class":231},[52,42868,723],{"class":58},[52,42870,32520],{"class":371},[52,42872,729],{"class":58},[52,42874,42875,42877,42879,42881,42883],{"class":54,"line":118},[52,42876,7361],{"class":66},[52,42878,70],{"class":231},[52,42880,723],{"class":58},[52,42882,6391],{"class":371},[52,42884,729],{"class":58},[52,42886,42887],{"class":54,"line":594},[52,42888,26949],{"class":58},[52,42890,42891,42893,42895],{"class":54,"line":600},[52,42892,2213],{"class":58},[52,42894,2216],{"class":371},[52,42896,105],{"class":58},[52,42898,42899,42901,42903],{"class":54,"line":606},[52,42900,2230],{"class":58},[52,42902,42622],{"class":371},[52,42904,77],{"class":58},[52,42906,42907,42909,42911],{"class":54,"line":653},[52,42908,121],{"class":58},[52,42910,63],{"class":371},[52,42912,77],{"class":58},[43,42914,42916],{"className":222,"code":42915,"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,42917,42918,42928,42932,42946,42950,42967,42975,42979,42983],{"__ignoreMap":48},[52,42919,42920,42922,42924,42926],{"class":54,"line":55},[52,42921,232],{"class":231},[52,42923,9231],{"class":58},[52,42925,238],{"class":231},[52,42927,9236],{"class":73},[52,42929,42930],{"class":54,"line":80},[52,42931,597],{"emptyLinePlaceholder":171},[52,42933,42934,42936,42938,42940,42942,42944],{"class":54,"line":108},[52,42935,1721],{"class":231},[52,42937,1724],{"class":371},[52,42939,1727],{"class":231},[52,42941,1730],{"class":231},[52,42943,1733],{"class":66},[52,42945,1736],{"class":58},[52,42947,42948],{"class":54,"line":118},[52,42949,1751],{"class":58},[52,42951,42952,42954,42957,42959,42961,42963,42965],{"class":54,"line":594},[52,42953,1756],{"class":58},[52,42955,42956],{"class":73},"'Liquify'",[52,42958,27194],{"class":58},[52,42960,32520],{"class":371},[52,42962,4278],{"class":58},[52,42964,6391],{"class":371},[52,42966,5259],{"class":58},[52,42968,42969,42971,42973],{"class":54,"line":600},[52,42970,4727],{"class":58},[52,42972,2869],{"class":73},[52,42974,2129],{"class":58},[52,42976,42977],{"class":54,"line":606},[52,42978,4744],{"class":58},[52,42980,42981],{"class":54,"line":653},[52,42982,1773],{"class":58},[52,42984,42985],{"class":54,"line":662},[52,42986,1778],{"class":58},[156,42988,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42990},[42991,42992],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/liquify",{"title":42622,"description":42630},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":42999,"title":43000,"body":43001,"category":29105,"componentType":20848,"description":43007,"extension":168,"meta":43268,"navigation":171,"path":43269,"requiresChild":171,"seo":43270,"stem":43271,"__hash__":43272},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":43002,"toc":43264},[43003,43005,43008,43010,43012,43015,43017,43262],[11,43004,43000],{"id":13656},[15,43006,43007],{},"Mirror content across a line defined by center point and angle",[26901,43009],{"component":43000},[23,43011,26905],{"id":21503},[26907,43013],{":props":43014},"[{\"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,43016,26913],{"id":26912},[217,43018,43019,43064,43108,43152,43196],{":tabs":1543},[43,43020,43022],{"className":45,"code":43021,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,43023,43024,43032,43040,43048,43056],{"__ignoreMap":48},[52,43025,43026,43028,43030],{"class":54,"line":55},[52,43027,59],{"class":58},[52,43029,63],{"class":62},[52,43031,77],{"class":58},[52,43033,43034,43036,43038],{"class":54,"line":80},[52,43035,83],{"class":58},[52,43037,43000],{"class":62},[52,43039,77],{"class":58},[52,43041,43042,43044,43046],{"class":54,"line":108},[52,43043,2213],{"class":58},[52,43045,2216],{"class":62},[52,43047,105],{"class":58},[52,43049,43050,43052,43054],{"class":54,"line":118},[52,43051,2230],{"class":58},[52,43053,43000],{"class":62},[52,43055,77],{"class":58},[52,43057,43058,43060,43062],{"class":54,"line":594},[52,43059,121],{"class":58},[52,43061,63],{"class":62},[52,43063,77],{"class":58},[43,43065,43066],{"className":360,"code":43021,"language":362,"meta":48,"style":48},[31,43067,43068,43076,43084,43092,43100],{"__ignoreMap":48},[52,43069,43070,43072,43074],{"class":54,"line":55},[52,43071,59],{"class":58},[52,43073,63],{"class":371},[52,43075,77],{"class":58},[52,43077,43078,43080,43082],{"class":54,"line":80},[52,43079,83],{"class":58},[52,43081,43000],{"class":371},[52,43083,77],{"class":58},[52,43085,43086,43088,43090],{"class":54,"line":108},[52,43087,2213],{"class":58},[52,43089,2216],{"class":371},[52,43091,105],{"class":58},[52,43093,43094,43096,43098],{"class":54,"line":118},[52,43095,2230],{"class":58},[52,43097,43000],{"class":371},[52,43099,77],{"class":58},[52,43101,43102,43104,43106],{"class":54,"line":594},[52,43103,121],{"class":58},[52,43105,63],{"class":371},[52,43107,77],{"class":58},[43,43109,43110],{"className":2507,"code":43021,"language":2509,"meta":48,"style":48},[31,43111,43112,43120,43128,43136,43144],{"__ignoreMap":48},[52,43113,43114,43116,43118],{"class":54,"line":55},[52,43115,59],{"class":58},[52,43117,63],{"class":371},[52,43119,77],{"class":58},[52,43121,43122,43124,43126],{"class":54,"line":80},[52,43123,83],{"class":58},[52,43125,43000],{"class":371},[52,43127,77],{"class":58},[52,43129,43130,43132,43134],{"class":54,"line":108},[52,43131,2213],{"class":58},[52,43133,2216],{"class":371},[52,43135,105],{"class":58},[52,43137,43138,43140,43142],{"class":54,"line":118},[52,43139,2230],{"class":58},[52,43141,43000],{"class":371},[52,43143,77],{"class":58},[52,43145,43146,43148,43150],{"class":54,"line":594},[52,43147,121],{"class":58},[52,43149,63],{"class":371},[52,43151,77],{"class":58},[43,43153,43154],{"className":419,"code":43021,"language":420,"meta":48,"style":48},[31,43155,43156,43164,43172,43180,43188],{"__ignoreMap":48},[52,43157,43158,43160,43162],{"class":54,"line":55},[52,43159,59],{"class":58},[52,43161,63],{"class":371},[52,43163,77],{"class":58},[52,43165,43166,43168,43170],{"class":54,"line":80},[52,43167,83],{"class":58},[52,43169,43000],{"class":371},[52,43171,77],{"class":58},[52,43173,43174,43176,43178],{"class":54,"line":108},[52,43175,2213],{"class":58},[52,43177,2216],{"class":371},[52,43179,105],{"class":58},[52,43181,43182,43184,43186],{"class":54,"line":118},[52,43183,2230],{"class":58},[52,43185,43000],{"class":371},[52,43187,77],{"class":58},[52,43189,43190,43192,43194],{"class":54,"line":594},[52,43191,121],{"class":58},[52,43193,63],{"class":371},[52,43195,77],{"class":58},[43,43197,43199],{"className":222,"code":43198,"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,43200,43201,43211,43215,43229,43233,43242,43250,43254,43258],{"__ignoreMap":48},[52,43202,43203,43205,43207,43209],{"class":54,"line":55},[52,43204,232],{"class":231},[52,43206,9231],{"class":58},[52,43208,238],{"class":231},[52,43210,9236],{"class":73},[52,43212,43213],{"class":54,"line":80},[52,43214,597],{"emptyLinePlaceholder":171},[52,43216,43217,43219,43221,43223,43225,43227],{"class":54,"line":108},[52,43218,1721],{"class":231},[52,43220,1724],{"class":371},[52,43222,1727],{"class":231},[52,43224,1730],{"class":231},[52,43226,1733],{"class":66},[52,43228,1736],{"class":58},[52,43230,43231],{"class":54,"line":118},[52,43232,1751],{"class":58},[52,43234,43235,43237,43240],{"class":54,"line":594},[52,43236,1756],{"class":58},[52,43238,43239],{"class":73},"'Mirror'",[52,43241,4722],{"class":58},[52,43243,43244,43246,43248],{"class":54,"line":600},[52,43245,4727],{"class":58},[52,43247,2869],{"class":73},[52,43249,2129],{"class":58},[52,43251,43252],{"class":54,"line":606},[52,43253,4744],{"class":58},[52,43255,43256],{"class":54,"line":653},[52,43257,1773],{"class":58},[52,43259,43260],{"class":54,"line":662},[52,43261,1778],{"class":58},[156,43263,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43265},[43266,43267],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/mirror",{"title":43000,"description":43007},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":43274,"title":43275,"body":43276,"category":27760,"componentType":20842,"description":43283,"extension":168,"meta":43468,"navigation":171,"path":43469,"requiresChild":27763,"seo":43470,"stem":43471,"__hash__":43472},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":43277,"toc":43464},[43278,43281,43284,43286,43288,43291,43293,43462],[11,43279,43275],{"id":43280},"multipointgradient",[15,43282,43283],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26901,43285],{"component":43275},[23,43287,26905],{"id":21503},[26907,43289],{":props":43290},"[{\"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,43292,26913],{"id":26912},[217,43294,43295,43324,43352,43380,43408],{":tabs":1543},[43,43296,43298],{"className":45,"code":43297,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,43299,43300,43308,43316],{"__ignoreMap":48},[52,43301,43302,43304,43306],{"class":54,"line":55},[52,43303,59],{"class":58},[52,43305,63],{"class":62},[52,43307,77],{"class":58},[52,43309,43310,43312,43314],{"class":54,"line":80},[52,43311,83],{"class":58},[52,43313,43275],{"class":62},[52,43315,105],{"class":58},[52,43317,43318,43320,43322],{"class":54,"line":108},[52,43319,121],{"class":58},[52,43321,63],{"class":62},[52,43323,77],{"class":58},[43,43325,43326],{"className":360,"code":43297,"language":362,"meta":48,"style":48},[31,43327,43328,43336,43344],{"__ignoreMap":48},[52,43329,43330,43332,43334],{"class":54,"line":55},[52,43331,59],{"class":58},[52,43333,63],{"class":371},[52,43335,77],{"class":58},[52,43337,43338,43340,43342],{"class":54,"line":80},[52,43339,83],{"class":58},[52,43341,43275],{"class":371},[52,43343,105],{"class":58},[52,43345,43346,43348,43350],{"class":54,"line":108},[52,43347,121],{"class":58},[52,43349,63],{"class":371},[52,43351,77],{"class":58},[43,43353,43354],{"className":2507,"code":43297,"language":2509,"meta":48,"style":48},[31,43355,43356,43364,43372],{"__ignoreMap":48},[52,43357,43358,43360,43362],{"class":54,"line":55},[52,43359,59],{"class":58},[52,43361,63],{"class":371},[52,43363,77],{"class":58},[52,43365,43366,43368,43370],{"class":54,"line":80},[52,43367,83],{"class":58},[52,43369,43275],{"class":371},[52,43371,105],{"class":58},[52,43373,43374,43376,43378],{"class":54,"line":108},[52,43375,121],{"class":58},[52,43377,63],{"class":371},[52,43379,77],{"class":58},[43,43381,43382],{"className":419,"code":43297,"language":420,"meta":48,"style":48},[31,43383,43384,43392,43400],{"__ignoreMap":48},[52,43385,43386,43388,43390],{"class":54,"line":55},[52,43387,59],{"class":58},[52,43389,63],{"class":371},[52,43391,77],{"class":58},[52,43393,43394,43396,43398],{"class":54,"line":80},[52,43395,83],{"class":58},[52,43397,43275],{"class":371},[52,43399,105],{"class":58},[52,43401,43402,43404,43406],{"class":54,"line":108},[52,43403,121],{"class":58},[52,43405,63],{"class":371},[52,43407,77],{"class":58},[43,43409,43411],{"className":222,"code":43410,"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,43412,43413,43423,43427,43441,43445,43454,43458],{"__ignoreMap":48},[52,43414,43415,43417,43419,43421],{"class":54,"line":55},[52,43416,232],{"class":231},[52,43418,9231],{"class":58},[52,43420,238],{"class":231},[52,43422,9236],{"class":73},[52,43424,43425],{"class":54,"line":80},[52,43426,597],{"emptyLinePlaceholder":171},[52,43428,43429,43431,43433,43435,43437,43439],{"class":54,"line":108},[52,43430,1721],{"class":231},[52,43432,1724],{"class":371},[52,43434,1727],{"class":231},[52,43436,1730],{"class":231},[52,43438,1733],{"class":66},[52,43440,1736],{"class":58},[52,43442,43443],{"class":54,"line":118},[52,43444,1751],{"class":58},[52,43446,43447,43449,43452],{"class":54,"line":594},[52,43448,1756],{"class":58},[52,43450,43451],{"class":73},"'MultiPointGradient'",[52,43453,2129],{"class":58},[52,43455,43456],{"class":54,"line":600},[52,43457,1773],{"class":58},[52,43459,43460],{"class":54,"line":606},[52,43461,1778],{"class":58},[156,43463,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43465},[43466,43467],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/multipointgradient",{"title":43275,"description":43283},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":43474,"title":18477,"body":43475,"category":32398,"componentType":20842,"description":43482,"extension":168,"meta":43761,"navigation":171,"path":43762,"requiresChild":27763,"seo":43763,"stem":43764,"__hash__":43765},"components/docs/components/Neon.md",{"type":8,"value":43476,"toc":43757},[43477,43480,43483,43485,43487,43490,43492,43755],[11,43478,18477],{"id":43479},"neon",[15,43481,43482],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26901,43484],{"component":18477},[23,43486,26905],{"id":21503},[26907,43488],{":props":43489},"[{\"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,43491,26913],{"id":26912},[217,43493,43494,43544,43595,43643,43693],{":tabs":1543},[43,43495,43497],{"className":45,"code":43496,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,43498,43499,43507,43514,43523,43532,43536],{"__ignoreMap":48},[52,43500,43501,43503,43505],{"class":54,"line":55},[52,43502,59],{"class":58},[52,43504,63],{"class":62},[52,43506,77],{"class":58},[52,43508,43509,43511],{"class":54,"line":80},[52,43510,83],{"class":58},[52,43512,43513],{"class":62},"Neon\n",[52,43515,43516,43518,43520],{"class":54,"line":108},[52,43517,7351],{"class":66},[52,43519,70],{"class":58},[52,43521,43522],{"class":73},"\"#00ddff\"\n",[52,43524,43525,43527,43529],{"class":54,"line":118},[52,43526,17870],{"class":66},[52,43528,70],{"class":58},[52,43530,43531],{"class":73},"\"1.5\"\n",[52,43533,43534],{"class":54,"line":594},[52,43535,1224],{"class":58},[52,43537,43538,43540,43542],{"class":54,"line":600},[52,43539,121],{"class":58},[52,43541,63],{"class":62},[52,43543,77],{"class":58},[43,43545,43547],{"className":360,"code":43546,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,43548,43549,43557,43563,43571,43583,43587],{"__ignoreMap":48},[52,43550,43551,43553,43555],{"class":54,"line":55},[52,43552,59],{"class":58},[52,43554,63],{"class":371},[52,43556,77],{"class":58},[52,43558,43559,43561],{"class":54,"line":80},[52,43560,83],{"class":58},[52,43562,43513],{"class":371},[52,43564,43565,43567,43569],{"class":54,"line":108},[52,43566,7351],{"class":66},[52,43568,70],{"class":231},[52,43570,43522],{"class":73},[52,43572,43573,43575,43577,43579,43581],{"class":54,"line":118},[52,43574,17981],{"class":66},[52,43576,70],{"class":231},[52,43578,723],{"class":58},[52,43580,13171],{"class":371},[52,43582,729],{"class":58},[52,43584,43585],{"class":54,"line":594},[52,43586,1224],{"class":58},[52,43588,43589,43591,43593],{"class":54,"line":600},[52,43590,121],{"class":58},[52,43592,63],{"class":371},[52,43594,77],{"class":58},[43,43596,43597],{"className":2507,"code":43546,"language":2509,"meta":48,"style":48},[31,43598,43599,43607,43613,43621,43631,43635],{"__ignoreMap":48},[52,43600,43601,43603,43605],{"class":54,"line":55},[52,43602,59],{"class":58},[52,43604,63],{"class":371},[52,43606,77],{"class":58},[52,43608,43609,43611],{"class":54,"line":80},[52,43610,83],{"class":58},[52,43612,43513],{"class":371},[52,43614,43615,43617,43619],{"class":54,"line":108},[52,43616,7351],{"class":66},[52,43618,70],{"class":58},[52,43620,43522],{"class":73},[52,43622,43623,43625,43627,43629],{"class":54,"line":118},[52,43624,17981],{"class":66},[52,43626,24845],{"class":58},[52,43628,13171],{"class":371},[52,43630,729],{"class":58},[52,43632,43633],{"class":54,"line":594},[52,43634,1224],{"class":58},[52,43636,43637,43639,43641],{"class":54,"line":600},[52,43638,121],{"class":58},[52,43640,63],{"class":371},[52,43642,77],{"class":58},[43,43644,43645],{"className":419,"code":43546,"language":420,"meta":48,"style":48},[31,43646,43647,43655,43661,43669,43681,43685],{"__ignoreMap":48},[52,43648,43649,43651,43653],{"class":54,"line":55},[52,43650,59],{"class":58},[52,43652,63],{"class":371},[52,43654,77],{"class":58},[52,43656,43657,43659],{"class":54,"line":80},[52,43658,83],{"class":58},[52,43660,43513],{"class":371},[52,43662,43663,43665,43667],{"class":54,"line":108},[52,43664,7351],{"class":66},[52,43666,70],{"class":231},[52,43668,43522],{"class":73},[52,43670,43671,43673,43675,43677,43679],{"class":54,"line":118},[52,43672,17981],{"class":66},[52,43674,70],{"class":231},[52,43676,723],{"class":58},[52,43678,13171],{"class":371},[52,43680,729],{"class":58},[52,43682,43683],{"class":54,"line":594},[52,43684,1224],{"class":58},[52,43686,43687,43689,43691],{"class":54,"line":600},[52,43688,121],{"class":58},[52,43690,63],{"class":371},[52,43692,77],{"class":58},[43,43694,43696],{"className":222,"code":43695,"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,43697,43698,43708,43712,43726,43730,43747,43751],{"__ignoreMap":48},[52,43699,43700,43702,43704,43706],{"class":54,"line":55},[52,43701,232],{"class":231},[52,43703,9231],{"class":58},[52,43705,238],{"class":231},[52,43707,9236],{"class":73},[52,43709,43710],{"class":54,"line":80},[52,43711,597],{"emptyLinePlaceholder":171},[52,43713,43714,43716,43718,43720,43722,43724],{"class":54,"line":108},[52,43715,1721],{"class":231},[52,43717,1724],{"class":371},[52,43719,1727],{"class":231},[52,43721,1730],{"class":231},[52,43723,1733],{"class":66},[52,43725,1736],{"class":58},[52,43727,43728],{"class":54,"line":118},[52,43729,1751],{"class":58},[52,43731,43732,43734,43736,43738,43741,43743,43745],{"class":54,"line":594},[52,43733,1756],{"class":58},[52,43735,19069],{"class":73},[52,43737,1762],{"class":58},[52,43739,43740],{"class":73},"'#00ddff'",[52,43742,34623],{"class":58},[52,43744,13171],{"class":371},[52,43746,1768],{"class":58},[52,43748,43749],{"class":54,"line":600},[52,43750,1773],{"class":58},[52,43752,43753],{"class":54,"line":606},[52,43754,1778],{"class":58},[156,43756,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43758},[43759,43760],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/neon",{"title":18477,"description":43482},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":43767,"title":43768,"body":43769,"category":27503,"componentType":20848,"description":43776,"extension":168,"meta":44037,"navigation":171,"path":44038,"requiresChild":171,"seo":44039,"stem":44040,"__hash__":44041},"components/docs/components/Paper.md","Paper",{"type":8,"value":43770,"toc":44033},[43771,43774,43777,43779,43781,43784,43786,44031],[11,43772,43768],{"id":43773},"paper",[15,43775,43776],{},"Applies realistic paper grain and surface roughness to child content",[26901,43778],{"component":43768},[23,43780,26905],{"id":21503},[26907,43782],{":props":43783},"[{\"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,43785,26913],{"id":26912},[217,43787,43788,43833,43877,43921,43965],{":tabs":1543},[43,43789,43791],{"className":45,"code":43790,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,43792,43793,43801,43809,43817,43825],{"__ignoreMap":48},[52,43794,43795,43797,43799],{"class":54,"line":55},[52,43796,59],{"class":58},[52,43798,63],{"class":62},[52,43800,77],{"class":58},[52,43802,43803,43805,43807],{"class":54,"line":80},[52,43804,83],{"class":58},[52,43806,43768],{"class":62},[52,43808,77],{"class":58},[52,43810,43811,43813,43815],{"class":54,"line":108},[52,43812,2213],{"class":58},[52,43814,2216],{"class":62},[52,43816,105],{"class":58},[52,43818,43819,43821,43823],{"class":54,"line":118},[52,43820,2230],{"class":58},[52,43822,43768],{"class":62},[52,43824,77],{"class":58},[52,43826,43827,43829,43831],{"class":54,"line":594},[52,43828,121],{"class":58},[52,43830,63],{"class":62},[52,43832,77],{"class":58},[43,43834,43835],{"className":360,"code":43790,"language":362,"meta":48,"style":48},[31,43836,43837,43845,43853,43861,43869],{"__ignoreMap":48},[52,43838,43839,43841,43843],{"class":54,"line":55},[52,43840,59],{"class":58},[52,43842,63],{"class":371},[52,43844,77],{"class":58},[52,43846,43847,43849,43851],{"class":54,"line":80},[52,43848,83],{"class":58},[52,43850,43768],{"class":371},[52,43852,77],{"class":58},[52,43854,43855,43857,43859],{"class":54,"line":108},[52,43856,2213],{"class":58},[52,43858,2216],{"class":371},[52,43860,105],{"class":58},[52,43862,43863,43865,43867],{"class":54,"line":118},[52,43864,2230],{"class":58},[52,43866,43768],{"class":371},[52,43868,77],{"class":58},[52,43870,43871,43873,43875],{"class":54,"line":594},[52,43872,121],{"class":58},[52,43874,63],{"class":371},[52,43876,77],{"class":58},[43,43878,43879],{"className":2507,"code":43790,"language":2509,"meta":48,"style":48},[31,43880,43881,43889,43897,43905,43913],{"__ignoreMap":48},[52,43882,43883,43885,43887],{"class":54,"line":55},[52,43884,59],{"class":58},[52,43886,63],{"class":371},[52,43888,77],{"class":58},[52,43890,43891,43893,43895],{"class":54,"line":80},[52,43892,83],{"class":58},[52,43894,43768],{"class":371},[52,43896,77],{"class":58},[52,43898,43899,43901,43903],{"class":54,"line":108},[52,43900,2213],{"class":58},[52,43902,2216],{"class":371},[52,43904,105],{"class":58},[52,43906,43907,43909,43911],{"class":54,"line":118},[52,43908,2230],{"class":58},[52,43910,43768],{"class":371},[52,43912,77],{"class":58},[52,43914,43915,43917,43919],{"class":54,"line":594},[52,43916,121],{"class":58},[52,43918,63],{"class":371},[52,43920,77],{"class":58},[43,43922,43923],{"className":419,"code":43790,"language":420,"meta":48,"style":48},[31,43924,43925,43933,43941,43949,43957],{"__ignoreMap":48},[52,43926,43927,43929,43931],{"class":54,"line":55},[52,43928,59],{"class":58},[52,43930,63],{"class":371},[52,43932,77],{"class":58},[52,43934,43935,43937,43939],{"class":54,"line":80},[52,43936,83],{"class":58},[52,43938,43768],{"class":371},[52,43940,77],{"class":58},[52,43942,43943,43945,43947],{"class":54,"line":108},[52,43944,2213],{"class":58},[52,43946,2216],{"class":371},[52,43948,105],{"class":58},[52,43950,43951,43953,43955],{"class":54,"line":118},[52,43952,2230],{"class":58},[52,43954,43768],{"class":371},[52,43956,77],{"class":58},[52,43958,43959,43961,43963],{"class":54,"line":594},[52,43960,121],{"class":58},[52,43962,63],{"class":371},[52,43964,77],{"class":58},[43,43966,43968],{"className":222,"code":43967,"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,43969,43970,43980,43984,43998,44002,44011,44019,44023,44027],{"__ignoreMap":48},[52,43971,43972,43974,43976,43978],{"class":54,"line":55},[52,43973,232],{"class":231},[52,43975,9231],{"class":58},[52,43977,238],{"class":231},[52,43979,9236],{"class":73},[52,43981,43982],{"class":54,"line":80},[52,43983,597],{"emptyLinePlaceholder":171},[52,43985,43986,43988,43990,43992,43994,43996],{"class":54,"line":108},[52,43987,1721],{"class":231},[52,43989,1724],{"class":371},[52,43991,1727],{"class":231},[52,43993,1730],{"class":231},[52,43995,1733],{"class":66},[52,43997,1736],{"class":58},[52,43999,44000],{"class":54,"line":118},[52,44001,1751],{"class":58},[52,44003,44004,44006,44009],{"class":54,"line":594},[52,44005,1756],{"class":58},[52,44007,44008],{"class":73},"'Paper'",[52,44010,4722],{"class":58},[52,44012,44013,44015,44017],{"class":54,"line":600},[52,44014,4727],{"class":58},[52,44016,2869],{"class":73},[52,44018,2129],{"class":58},[52,44020,44021],{"class":54,"line":606},[52,44022,4744],{"class":58},[52,44024,44025],{"class":54,"line":653},[52,44026,1773],{"class":58},[52,44028,44029],{"class":54,"line":662},[52,44030,1778],{"class":58},[156,44032,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44034},[44035,44036],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/paper",{"title":43768,"description":43776},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":44043,"title":44044,"body":44045,"category":29105,"componentType":20848,"description":44052,"extension":168,"meta":44313,"navigation":171,"path":44314,"requiresChild":171,"seo":44315,"stem":44316,"__hash__":44317},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":44046,"toc":44309},[44047,44050,44053,44055,44057,44060,44062,44307],[11,44048,44044],{"id":44049},"perspective",[15,44051,44052],{},"Rotate the plane in 3D space with pan and tilt",[26901,44054],{"component":44044},[23,44056,26905],{"id":21503},[26907,44058],{":props":44059},"[{\"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,44061,26913],{"id":26912},[217,44063,44064,44109,44153,44197,44241],{":tabs":1543},[43,44065,44067],{"className":45,"code":44066,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\n\u003C/Shader>\n",[31,44068,44069,44077,44085,44093,44101],{"__ignoreMap":48},[52,44070,44071,44073,44075],{"class":54,"line":55},[52,44072,59],{"class":58},[52,44074,63],{"class":62},[52,44076,77],{"class":58},[52,44078,44079,44081,44083],{"class":54,"line":80},[52,44080,83],{"class":58},[52,44082,44044],{"class":62},[52,44084,77],{"class":58},[52,44086,44087,44089,44091],{"class":54,"line":108},[52,44088,2213],{"class":58},[52,44090,2216],{"class":62},[52,44092,105],{"class":58},[52,44094,44095,44097,44099],{"class":54,"line":118},[52,44096,2230],{"class":58},[52,44098,44044],{"class":62},[52,44100,77],{"class":58},[52,44102,44103,44105,44107],{"class":54,"line":594},[52,44104,121],{"class":58},[52,44106,63],{"class":62},[52,44108,77],{"class":58},[43,44110,44111],{"className":360,"code":44066,"language":362,"meta":48,"style":48},[31,44112,44113,44121,44129,44137,44145],{"__ignoreMap":48},[52,44114,44115,44117,44119],{"class":54,"line":55},[52,44116,59],{"class":58},[52,44118,63],{"class":371},[52,44120,77],{"class":58},[52,44122,44123,44125,44127],{"class":54,"line":80},[52,44124,83],{"class":58},[52,44126,44044],{"class":371},[52,44128,77],{"class":58},[52,44130,44131,44133,44135],{"class":54,"line":108},[52,44132,2213],{"class":58},[52,44134,2216],{"class":371},[52,44136,105],{"class":58},[52,44138,44139,44141,44143],{"class":54,"line":118},[52,44140,2230],{"class":58},[52,44142,44044],{"class":371},[52,44144,77],{"class":58},[52,44146,44147,44149,44151],{"class":54,"line":594},[52,44148,121],{"class":58},[52,44150,63],{"class":371},[52,44152,77],{"class":58},[43,44154,44155],{"className":2507,"code":44066,"language":2509,"meta":48,"style":48},[31,44156,44157,44165,44173,44181,44189],{"__ignoreMap":48},[52,44158,44159,44161,44163],{"class":54,"line":55},[52,44160,59],{"class":58},[52,44162,63],{"class":371},[52,44164,77],{"class":58},[52,44166,44167,44169,44171],{"class":54,"line":80},[52,44168,83],{"class":58},[52,44170,44044],{"class":371},[52,44172,77],{"class":58},[52,44174,44175,44177,44179],{"class":54,"line":108},[52,44176,2213],{"class":58},[52,44178,2216],{"class":371},[52,44180,105],{"class":58},[52,44182,44183,44185,44187],{"class":54,"line":118},[52,44184,2230],{"class":58},[52,44186,44044],{"class":371},[52,44188,77],{"class":58},[52,44190,44191,44193,44195],{"class":54,"line":594},[52,44192,121],{"class":58},[52,44194,63],{"class":371},[52,44196,77],{"class":58},[43,44198,44199],{"className":419,"code":44066,"language":420,"meta":48,"style":48},[31,44200,44201,44209,44217,44225,44233],{"__ignoreMap":48},[52,44202,44203,44205,44207],{"class":54,"line":55},[52,44204,59],{"class":58},[52,44206,63],{"class":371},[52,44208,77],{"class":58},[52,44210,44211,44213,44215],{"class":54,"line":80},[52,44212,83],{"class":58},[52,44214,44044],{"class":371},[52,44216,77],{"class":58},[52,44218,44219,44221,44223],{"class":54,"line":108},[52,44220,2213],{"class":58},[52,44222,2216],{"class":371},[52,44224,105],{"class":58},[52,44226,44227,44229,44231],{"class":54,"line":118},[52,44228,2230],{"class":58},[52,44230,44044],{"class":371},[52,44232,77],{"class":58},[52,44234,44235,44237,44239],{"class":54,"line":594},[52,44236,121],{"class":58},[52,44238,63],{"class":371},[52,44240,77],{"class":58},[43,44242,44244],{"className":222,"code":44243,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Perspective', props: {}, children: [\n { type: 'Circle', props: {} }\n ]}\n ]\n})\n",[31,44245,44246,44256,44260,44274,44278,44287,44295,44299,44303],{"__ignoreMap":48},[52,44247,44248,44250,44252,44254],{"class":54,"line":55},[52,44249,232],{"class":231},[52,44251,9231],{"class":58},[52,44253,238],{"class":231},[52,44255,9236],{"class":73},[52,44257,44258],{"class":54,"line":80},[52,44259,597],{"emptyLinePlaceholder":171},[52,44261,44262,44264,44266,44268,44270,44272],{"class":54,"line":108},[52,44263,1721],{"class":231},[52,44265,1724],{"class":371},[52,44267,1727],{"class":231},[52,44269,1730],{"class":231},[52,44271,1733],{"class":66},[52,44273,1736],{"class":58},[52,44275,44276],{"class":54,"line":118},[52,44277,1751],{"class":58},[52,44279,44280,44282,44285],{"class":54,"line":594},[52,44281,1756],{"class":58},[52,44283,44284],{"class":73},"'Perspective'",[52,44286,4722],{"class":58},[52,44288,44289,44291,44293],{"class":54,"line":600},[52,44290,4727],{"class":58},[52,44292,2869],{"class":73},[52,44294,2129],{"class":58},[52,44296,44297],{"class":54,"line":606},[52,44298,4744],{"class":58},[52,44300,44301],{"class":54,"line":653},[52,44302,1773],{"class":58},[52,44304,44305],{"class":54,"line":662},[52,44306,1778],{"class":58},[156,44308,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44310},[44311,44312],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/perspective",{"title":44044,"description":44052},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":44319,"title":44320,"body":44321,"category":27503,"componentType":20848,"description":44328,"extension":168,"meta":44589,"navigation":171,"path":44590,"requiresChild":171,"seo":44591,"stem":44592,"__hash__":44593},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":44322,"toc":44585},[44323,44326,44329,44331,44333,44336,44338,44583],[11,44324,44320],{"id":44325},"pixelate",[15,44327,44328],{},"Pixelation effect with adjustable cell size",[26901,44330],{"component":44320},[23,44332,26905],{"id":21503},[26907,44334],{":props":44335},"[{\"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,44337,26913],{"id":26912},[217,44339,44340,44385,44429,44473,44517],{":tabs":1543},[43,44341,44343],{"className":45,"code":44342,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\n\u003C/Shader>\n",[31,44344,44345,44353,44361,44369,44377],{"__ignoreMap":48},[52,44346,44347,44349,44351],{"class":54,"line":55},[52,44348,59],{"class":58},[52,44350,63],{"class":62},[52,44352,77],{"class":58},[52,44354,44355,44357,44359],{"class":54,"line":80},[52,44356,83],{"class":58},[52,44358,44320],{"class":62},[52,44360,77],{"class":58},[52,44362,44363,44365,44367],{"class":54,"line":108},[52,44364,2213],{"class":58},[52,44366,2216],{"class":62},[52,44368,105],{"class":58},[52,44370,44371,44373,44375],{"class":54,"line":118},[52,44372,2230],{"class":58},[52,44374,44320],{"class":62},[52,44376,77],{"class":58},[52,44378,44379,44381,44383],{"class":54,"line":594},[52,44380,121],{"class":58},[52,44382,63],{"class":62},[52,44384,77],{"class":58},[43,44386,44387],{"className":360,"code":44342,"language":362,"meta":48,"style":48},[31,44388,44389,44397,44405,44413,44421],{"__ignoreMap":48},[52,44390,44391,44393,44395],{"class":54,"line":55},[52,44392,59],{"class":58},[52,44394,63],{"class":371},[52,44396,77],{"class":58},[52,44398,44399,44401,44403],{"class":54,"line":80},[52,44400,83],{"class":58},[52,44402,44320],{"class":371},[52,44404,77],{"class":58},[52,44406,44407,44409,44411],{"class":54,"line":108},[52,44408,2213],{"class":58},[52,44410,2216],{"class":371},[52,44412,105],{"class":58},[52,44414,44415,44417,44419],{"class":54,"line":118},[52,44416,2230],{"class":58},[52,44418,44320],{"class":371},[52,44420,77],{"class":58},[52,44422,44423,44425,44427],{"class":54,"line":594},[52,44424,121],{"class":58},[52,44426,63],{"class":371},[52,44428,77],{"class":58},[43,44430,44431],{"className":2507,"code":44342,"language":2509,"meta":48,"style":48},[31,44432,44433,44441,44449,44457,44465],{"__ignoreMap":48},[52,44434,44435,44437,44439],{"class":54,"line":55},[52,44436,59],{"class":58},[52,44438,63],{"class":371},[52,44440,77],{"class":58},[52,44442,44443,44445,44447],{"class":54,"line":80},[52,44444,83],{"class":58},[52,44446,44320],{"class":371},[52,44448,77],{"class":58},[52,44450,44451,44453,44455],{"class":54,"line":108},[52,44452,2213],{"class":58},[52,44454,2216],{"class":371},[52,44456,105],{"class":58},[52,44458,44459,44461,44463],{"class":54,"line":118},[52,44460,2230],{"class":58},[52,44462,44320],{"class":371},[52,44464,77],{"class":58},[52,44466,44467,44469,44471],{"class":54,"line":594},[52,44468,121],{"class":58},[52,44470,63],{"class":371},[52,44472,77],{"class":58},[43,44474,44475],{"className":419,"code":44342,"language":420,"meta":48,"style":48},[31,44476,44477,44485,44493,44501,44509],{"__ignoreMap":48},[52,44478,44479,44481,44483],{"class":54,"line":55},[52,44480,59],{"class":58},[52,44482,63],{"class":371},[52,44484,77],{"class":58},[52,44486,44487,44489,44491],{"class":54,"line":80},[52,44488,83],{"class":58},[52,44490,44320],{"class":371},[52,44492,77],{"class":58},[52,44494,44495,44497,44499],{"class":54,"line":108},[52,44496,2213],{"class":58},[52,44498,2216],{"class":371},[52,44500,105],{"class":58},[52,44502,44503,44505,44507],{"class":54,"line":118},[52,44504,2230],{"class":58},[52,44506,44320],{"class":371},[52,44508,77],{"class":58},[52,44510,44511,44513,44515],{"class":54,"line":594},[52,44512,121],{"class":58},[52,44514,63],{"class":371},[52,44516,77],{"class":58},[43,44518,44520],{"className":222,"code":44519,"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,44521,44522,44532,44536,44550,44554,44563,44571,44575,44579],{"__ignoreMap":48},[52,44523,44524,44526,44528,44530],{"class":54,"line":55},[52,44525,232],{"class":231},[52,44527,9231],{"class":58},[52,44529,238],{"class":231},[52,44531,9236],{"class":73},[52,44533,44534],{"class":54,"line":80},[52,44535,597],{"emptyLinePlaceholder":171},[52,44537,44538,44540,44542,44544,44546,44548],{"class":54,"line":108},[52,44539,1721],{"class":231},[52,44541,1724],{"class":371},[52,44543,1727],{"class":231},[52,44545,1730],{"class":231},[52,44547,1733],{"class":66},[52,44549,1736],{"class":58},[52,44551,44552],{"class":54,"line":118},[52,44553,1751],{"class":58},[52,44555,44556,44558,44561],{"class":54,"line":594},[52,44557,1756],{"class":58},[52,44559,44560],{"class":73},"'Pixelate'",[52,44562,4722],{"class":58},[52,44564,44565,44567,44569],{"class":54,"line":600},[52,44566,4727],{"class":58},[52,44568,2869],{"class":73},[52,44570,2129],{"class":58},[52,44572,44573],{"class":54,"line":606},[52,44574,4744],{"class":58},[52,44576,44577],{"class":54,"line":653},[52,44578,1773],{"class":58},[52,44580,44581],{"class":54,"line":662},[52,44582,1778],{"class":58},[156,44584,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":44586},[44587,44588],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/pixelate",{"title":44320,"description":44328},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":44595,"title":10788,"body":44596,"category":27760,"componentType":20842,"description":44603,"extension":168,"meta":44844,"navigation":171,"path":44845,"requiresChild":27763,"seo":44846,"stem":44847,"__hash__":44848},"components/docs/components/Plasma.md",{"type":8,"value":44597,"toc":44840},[44598,44601,44604,44606,44608,44611,44613,44838],[11,44599,10788],{"id":44600},"plasma",[15,44602,44603],{},"Animated effect of glowing plasma",[26901,44605],{"component":10788},[23,44607,26905],{"id":21503},[26907,44609],{":props":44610},"[{\"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,44612,26913],{"id":26912},[217,44614,44615,44655,44698,44738,44780],{":tabs":1543},[43,44616,44618],{"className":45,"code":44617,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,44619,44620,44628,44635,44643,44647],{"__ignoreMap":48},[52,44621,44622,44624,44626],{"class":54,"line":55},[52,44623,59],{"class":58},[52,44625,63],{"class":62},[52,44627,77],{"class":58},[52,44629,44630,44632],{"class":54,"line":80},[52,44631,83],{"class":58},[52,44633,44634],{"class":62},"Plasma\n",[52,44636,44637,44639,44641],{"class":54,"line":108},[52,44638,17870],{"class":66},[52,44640,70],{"class":58},[52,44642,43531],{"class":73},[52,44644,44645],{"class":54,"line":118},[52,44646,1224],{"class":58},[52,44648,44649,44651,44653],{"class":54,"line":594},[52,44650,121],{"class":58},[52,44652,63],{"class":62},[52,44654,77],{"class":58},[43,44656,44658],{"className":360,"code":44657,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,44659,44660,44668,44674,44686,44690],{"__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],{"class":54,"line":80},[52,44671,83],{"class":58},[52,44673,44634],{"class":371},[52,44675,44676,44678,44680,44682,44684],{"class":54,"line":108},[52,44677,17981],{"class":66},[52,44679,70],{"class":231},[52,44681,723],{"class":58},[52,44683,13171],{"class":371},[52,44685,729],{"class":58},[52,44687,44688],{"class":54,"line":118},[52,44689,1224],{"class":58},[52,44691,44692,44694,44696],{"class":54,"line":594},[52,44693,121],{"class":58},[52,44695,63],{"class":371},[52,44697,77],{"class":58},[43,44699,44700],{"className":2507,"code":44657,"language":2509,"meta":48,"style":48},[31,44701,44702,44710,44716,44726,44730],{"__ignoreMap":48},[52,44703,44704,44706,44708],{"class":54,"line":55},[52,44705,59],{"class":58},[52,44707,63],{"class":371},[52,44709,77],{"class":58},[52,44711,44712,44714],{"class":54,"line":80},[52,44713,83],{"class":58},[52,44715,44634],{"class":371},[52,44717,44718,44720,44722,44724],{"class":54,"line":108},[52,44719,17981],{"class":66},[52,44721,24845],{"class":58},[52,44723,13171],{"class":371},[52,44725,729],{"class":58},[52,44727,44728],{"class":54,"line":118},[52,44729,1224],{"class":58},[52,44731,44732,44734,44736],{"class":54,"line":594},[52,44733,121],{"class":58},[52,44735,63],{"class":371},[52,44737,77],{"class":58},[43,44739,44740],{"className":419,"code":44657,"language":420,"meta":48,"style":48},[31,44741,44742,44750,44756,44768,44772],{"__ignoreMap":48},[52,44743,44744,44746,44748],{"class":54,"line":55},[52,44745,59],{"class":58},[52,44747,63],{"class":371},[52,44749,77],{"class":58},[52,44751,44752,44754],{"class":54,"line":80},[52,44753,83],{"class":58},[52,44755,44634],{"class":371},[52,44757,44758,44760,44762,44764,44766],{"class":54,"line":108},[52,44759,17981],{"class":66},[52,44761,70],{"class":231},[52,44763,723],{"class":58},[52,44765,13171],{"class":371},[52,44767,729],{"class":58},[52,44769,44770],{"class":54,"line":118},[52,44771,1224],{"class":58},[52,44773,44774,44776,44778],{"class":54,"line":594},[52,44775,121],{"class":58},[52,44777,63],{"class":371},[52,44779,77],{"class":58},[43,44781,44783],{"className":222,"code":44782,"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,44784,44785,44795,44799,44813,44817,44830,44834],{"__ignoreMap":48},[52,44786,44787,44789,44791,44793],{"class":54,"line":55},[52,44788,232],{"class":231},[52,44790,9231],{"class":58},[52,44792,238],{"class":231},[52,44794,9236],{"class":73},[52,44796,44797],{"class":54,"line":80},[52,44798,597],{"emptyLinePlaceholder":171},[52,44800,44801,44803,44805,44807,44809,44811],{"class":54,"line":108},[52,44802,1721],{"class":231},[52,44804,1724],{"class":371},[52,44806,1727],{"class":231},[52,44808,1730],{"class":231},[52,44810,1733],{"class":66},[52,44812,1736],{"class":58},[52,44814,44815],{"class":54,"line":118},[52,44816,1751],{"class":58},[52,44818,44819,44821,44824,44826,44828],{"class":54,"line":594},[52,44820,1756],{"class":58},[52,44822,44823],{"class":73},"'Plasma'",[52,44825,27194],{"class":58},[52,44827,13171],{"class":371},[52,44829,1768],{"class":58},[52,44831,44832],{"class":54,"line":600},[52,44833,1773],{"class":58},[52,44835,44836],{"class":54,"line":606},[52,44837,1778],{"class":58},[156,44839,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44841},[44842,44843],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/plasma",{"title":10788,"description":44603},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":44850,"title":44851,"body":44852,"category":29105,"componentType":20848,"description":44859,"extension":168,"meta":45222,"navigation":171,"path":45223,"requiresChild":171,"seo":45224,"stem":45225,"__hash__":45226},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":44853,"toc":45218},[44854,44857,44860,44862,44864,44867,44869,45216],[11,44855,44851],{"id":44856},"polarcoordinates",[15,44858,44859],{},"Convert rectangular coordinates to polar space",[26901,44861],{"component":44851},[23,44863,26905],{"id":21503},[26907,44865],{":props":44866},"[{\"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,44868,26913],{"id":26912},[217,44870,44871,44935,45006,45072,45142],{":tabs":1543},[43,44872,44874],{"className":45,"code":44873,"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,44875,44876,44884,44891,44899,44907,44911,44919,44927],{"__ignoreMap":48},[52,44877,44878,44880,44882],{"class":54,"line":55},[52,44879,59],{"class":58},[52,44881,63],{"class":62},[52,44883,77],{"class":58},[52,44885,44886,44888],{"class":54,"line":80},[52,44887,83],{"class":58},[52,44889,44890],{"class":62},"PolarCoordinates\n",[52,44892,44893,44895,44897],{"class":54,"line":108},[52,44894,14901],{"class":66},[52,44896,70],{"class":58},[52,44898,28827],{"class":73},[52,44900,44901,44903,44905],{"class":54,"line":118},[52,44902,17870],{"class":66},[52,44904,70],{"class":58},[52,44906,28827],{"class":73},[52,44908,44909],{"class":54,"line":594},[52,44910,26949],{"class":58},[52,44912,44913,44915,44917],{"class":54,"line":600},[52,44914,2213],{"class":58},[52,44916,2216],{"class":62},[52,44918,105],{"class":58},[52,44920,44921,44923,44925],{"class":54,"line":606},[52,44922,2230],{"class":58},[52,44924,44851],{"class":62},[52,44926,77],{"class":58},[52,44928,44929,44931,44933],{"class":54,"line":653},[52,44930,121],{"class":58},[52,44932,63],{"class":62},[52,44934,77],{"class":58},[43,44936,44938],{"className":360,"code":44937,"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,44939,44940,44948,44954,44966,44978,44982,44990,44998],{"__ignoreMap":48},[52,44941,44942,44944,44946],{"class":54,"line":55},[52,44943,59],{"class":58},[52,44945,63],{"class":371},[52,44947,77],{"class":58},[52,44949,44950,44952],{"class":54,"line":80},[52,44951,83],{"class":58},[52,44953,44890],{"class":371},[52,44955,44956,44958,44960,44962,44964],{"class":54,"line":108},[52,44957,7361],{"class":66},[52,44959,70],{"class":231},[52,44961,723],{"class":58},[52,44963,6391],{"class":371},[52,44965,729],{"class":58},[52,44967,44968,44970,44972,44974,44976],{"class":54,"line":118},[52,44969,17981],{"class":66},[52,44971,70],{"class":231},[52,44973,723],{"class":58},[52,44975,6391],{"class":371},[52,44977,729],{"class":58},[52,44979,44980],{"class":54,"line":594},[52,44981,26949],{"class":58},[52,44983,44984,44986,44988],{"class":54,"line":600},[52,44985,2213],{"class":58},[52,44987,2216],{"class":371},[52,44989,105],{"class":58},[52,44991,44992,44994,44996],{"class":54,"line":606},[52,44993,2230],{"class":58},[52,44995,44851],{"class":371},[52,44997,77],{"class":58},[52,44999,45000,45002,45004],{"class":54,"line":653},[52,45001,121],{"class":58},[52,45003,63],{"class":371},[52,45005,77],{"class":58},[43,45007,45008],{"className":2507,"code":44937,"language":2509,"meta":48,"style":48},[31,45009,45010,45018,45024,45034,45044,45048,45056,45064],{"__ignoreMap":48},[52,45011,45012,45014,45016],{"class":54,"line":55},[52,45013,59],{"class":58},[52,45015,63],{"class":371},[52,45017,77],{"class":58},[52,45019,45020,45022],{"class":54,"line":80},[52,45021,83],{"class":58},[52,45023,44890],{"class":371},[52,45025,45026,45028,45030,45032],{"class":54,"line":108},[52,45027,7361],{"class":66},[52,45029,24845],{"class":58},[52,45031,6391],{"class":371},[52,45033,729],{"class":58},[52,45035,45036,45038,45040,45042],{"class":54,"line":118},[52,45037,17981],{"class":66},[52,45039,24845],{"class":58},[52,45041,6391],{"class":371},[52,45043,729],{"class":58},[52,45045,45046],{"class":54,"line":594},[52,45047,26949],{"class":58},[52,45049,45050,45052,45054],{"class":54,"line":600},[52,45051,2213],{"class":58},[52,45053,2216],{"class":371},[52,45055,105],{"class":58},[52,45057,45058,45060,45062],{"class":54,"line":606},[52,45059,2230],{"class":58},[52,45061,44851],{"class":371},[52,45063,77],{"class":58},[52,45065,45066,45068,45070],{"class":54,"line":653},[52,45067,121],{"class":58},[52,45069,63],{"class":371},[52,45071,77],{"class":58},[43,45073,45074],{"className":419,"code":44937,"language":420,"meta":48,"style":48},[31,45075,45076,45084,45090,45102,45114,45118,45126,45134],{"__ignoreMap":48},[52,45077,45078,45080,45082],{"class":54,"line":55},[52,45079,59],{"class":58},[52,45081,63],{"class":371},[52,45083,77],{"class":58},[52,45085,45086,45088],{"class":54,"line":80},[52,45087,83],{"class":58},[52,45089,44890],{"class":371},[52,45091,45092,45094,45096,45098,45100],{"class":54,"line":108},[52,45093,7361],{"class":66},[52,45095,70],{"class":231},[52,45097,723],{"class":58},[52,45099,6391],{"class":371},[52,45101,729],{"class":58},[52,45103,45104,45106,45108,45110,45112],{"class":54,"line":118},[52,45105,17981],{"class":66},[52,45107,70],{"class":231},[52,45109,723],{"class":58},[52,45111,6391],{"class":371},[52,45113,729],{"class":58},[52,45115,45116],{"class":54,"line":594},[52,45117,26949],{"class":58},[52,45119,45120,45122,45124],{"class":54,"line":600},[52,45121,2213],{"class":58},[52,45123,2216],{"class":371},[52,45125,105],{"class":58},[52,45127,45128,45130,45132],{"class":54,"line":606},[52,45129,2230],{"class":58},[52,45131,44851],{"class":371},[52,45133,77],{"class":58},[52,45135,45136,45138,45140],{"class":54,"line":653},[52,45137,121],{"class":58},[52,45139,63],{"class":371},[52,45141,77],{"class":58},[43,45143,45145],{"className":222,"code":45144,"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,45146,45147,45157,45161,45175,45179,45196,45204,45208,45212],{"__ignoreMap":48},[52,45148,45149,45151,45153,45155],{"class":54,"line":55},[52,45150,232],{"class":231},[52,45152,9231],{"class":58},[52,45154,238],{"class":231},[52,45156,9236],{"class":73},[52,45158,45159],{"class":54,"line":80},[52,45160,597],{"emptyLinePlaceholder":171},[52,45162,45163,45165,45167,45169,45171,45173],{"class":54,"line":108},[52,45164,1721],{"class":231},[52,45166,1724],{"class":371},[52,45168,1727],{"class":231},[52,45170,1730],{"class":231},[52,45172,1733],{"class":66},[52,45174,1736],{"class":58},[52,45176,45177],{"class":54,"line":118},[52,45178,1751],{"class":58},[52,45180,45181,45183,45186,45188,45190,45192,45194],{"class":54,"line":594},[52,45182,1756],{"class":58},[52,45184,45185],{"class":73},"'PolarCoordinates'",[52,45187,5254],{"class":58},[52,45189,6391],{"class":371},[52,45191,34623],{"class":58},[52,45193,6391],{"class":371},[52,45195,5259],{"class":58},[52,45197,45198,45200,45202],{"class":54,"line":600},[52,45199,4727],{"class":58},[52,45201,2869],{"class":73},[52,45203,2129],{"class":58},[52,45205,45206],{"class":54,"line":606},[52,45207,4744],{"class":58},[52,45209,45210],{"class":54,"line":653},[52,45211,1773],{"class":58},[52,45213,45214],{"class":54,"line":662},[52,45215,1778],{"class":58},[156,45217,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45219},[45220,45221],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polarcoordinates",{"title":44851,"description":44859},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":45228,"title":45229,"body":45230,"category":30727,"componentType":20842,"description":45237,"extension":168,"meta":45514,"navigation":171,"path":45515,"requiresChild":27763,"seo":45516,"stem":45517,"__hash__":45518},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":45231,"toc":45510},[45232,45235,45238,45240,45242,45245,45247,45508],[11,45233,45229],{"id":45234},"polygon",[15,45236,45237],{},"Regular polygon with adjustable sides and corner rounding",[26901,45239],{"component":45229},[23,45241,26905],{"id":21503},[26907,45243],{":props":45244},"[{\"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,45246,26913],{"id":26912},[217,45248,45249,45297,45348,45396,45446],{":tabs":1543},[43,45250,45252],{"className":45,"code":45251,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,45253,45254,45262,45269,45277,45285,45289],{"__ignoreMap":48},[52,45255,45256,45258,45260],{"class":54,"line":55},[52,45257,59],{"class":58},[52,45259,63],{"class":62},[52,45261,77],{"class":58},[52,45263,45264,45266],{"class":54,"line":80},[52,45265,83],{"class":58},[52,45267,45268],{"class":62},"Polygon\n",[52,45270,45271,45273,45275],{"class":54,"line":108},[52,45272,7351],{"class":66},[52,45274,70],{"class":58},[52,45276,7307],{"class":73},[52,45278,45279,45281,45283],{"class":54,"line":118},[52,45280,14901],{"class":66},[52,45282,70],{"class":58},[52,45284,36464],{"class":73},[52,45286,45287],{"class":54,"line":594},[52,45288,1224],{"class":58},[52,45290,45291,45293,45295],{"class":54,"line":600},[52,45292,121],{"class":58},[52,45294,63],{"class":62},[52,45296,77],{"class":58},[43,45298,45300],{"className":360,"code":45299,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,45301,45302,45310,45316,45324,45336,45340],{"__ignoreMap":48},[52,45303,45304,45306,45308],{"class":54,"line":55},[52,45305,59],{"class":58},[52,45307,63],{"class":371},[52,45309,77],{"class":58},[52,45311,45312,45314],{"class":54,"line":80},[52,45313,83],{"class":58},[52,45315,45268],{"class":371},[52,45317,45318,45320,45322],{"class":54,"line":108},[52,45319,7351],{"class":66},[52,45321,70],{"class":231},[52,45323,7307],{"class":73},[52,45325,45326,45328,45330,45332,45334],{"class":54,"line":118},[52,45327,7361],{"class":66},[52,45329,70],{"class":231},[52,45331,723],{"class":58},[52,45333,5963],{"class":371},[52,45335,729],{"class":58},[52,45337,45338],{"class":54,"line":594},[52,45339,1224],{"class":58},[52,45341,45342,45344,45346],{"class":54,"line":600},[52,45343,121],{"class":58},[52,45345,63],{"class":371},[52,45347,77],{"class":58},[43,45349,45350],{"className":2507,"code":45299,"language":2509,"meta":48,"style":48},[31,45351,45352,45360,45366,45374,45384,45388],{"__ignoreMap":48},[52,45353,45354,45356,45358],{"class":54,"line":55},[52,45355,59],{"class":58},[52,45357,63],{"class":371},[52,45359,77],{"class":58},[52,45361,45362,45364],{"class":54,"line":80},[52,45363,83],{"class":58},[52,45365,45268],{"class":371},[52,45367,45368,45370,45372],{"class":54,"line":108},[52,45369,7351],{"class":66},[52,45371,70],{"class":58},[52,45373,7307],{"class":73},[52,45375,45376,45378,45380,45382],{"class":54,"line":118},[52,45377,7361],{"class":66},[52,45379,24845],{"class":58},[52,45381,5963],{"class":371},[52,45383,729],{"class":58},[52,45385,45386],{"class":54,"line":594},[52,45387,1224],{"class":58},[52,45389,45390,45392,45394],{"class":54,"line":600},[52,45391,121],{"class":58},[52,45393,63],{"class":371},[52,45395,77],{"class":58},[43,45397,45398],{"className":419,"code":45299,"language":420,"meta":48,"style":48},[31,45399,45400,45408,45414,45422,45434,45438],{"__ignoreMap":48},[52,45401,45402,45404,45406],{"class":54,"line":55},[52,45403,59],{"class":58},[52,45405,63],{"class":371},[52,45407,77],{"class":58},[52,45409,45410,45412],{"class":54,"line":80},[52,45411,83],{"class":58},[52,45413,45268],{"class":371},[52,45415,45416,45418,45420],{"class":54,"line":108},[52,45417,7351],{"class":66},[52,45419,70],{"class":231},[52,45421,7307],{"class":73},[52,45423,45424,45426,45428,45430,45432],{"class":54,"line":118},[52,45425,7361],{"class":66},[52,45427,70],{"class":231},[52,45429,723],{"class":58},[52,45431,5963],{"class":371},[52,45433,729],{"class":58},[52,45435,45436],{"class":54,"line":594},[52,45437,1224],{"class":58},[52,45439,45440,45442,45444],{"class":54,"line":600},[52,45441,121],{"class":58},[52,45443,63],{"class":371},[52,45445,77],{"class":58},[43,45447,45449],{"className":222,"code":45448,"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,45450,45451,45461,45465,45479,45483,45500,45504],{"__ignoreMap":48},[52,45452,45453,45455,45457,45459],{"class":54,"line":55},[52,45454,232],{"class":231},[52,45456,9231],{"class":58},[52,45458,238],{"class":231},[52,45460,9236],{"class":73},[52,45462,45463],{"class":54,"line":80},[52,45464,597],{"emptyLinePlaceholder":171},[52,45466,45467,45469,45471,45473,45475,45477],{"class":54,"line":108},[52,45468,1721],{"class":231},[52,45470,1724],{"class":371},[52,45472,1727],{"class":231},[52,45474,1730],{"class":231},[52,45476,1733],{"class":66},[52,45478,1736],{"class":58},[52,45480,45481],{"class":54,"line":118},[52,45482,1751],{"class":58},[52,45484,45485,45487,45490,45492,45494,45496,45498],{"class":54,"line":594},[52,45486,1756],{"class":58},[52,45488,45489],{"class":73},"'Polygon'",[52,45491,1762],{"class":58},[52,45493,7886],{"class":73},[52,45495,4278],{"class":58},[52,45497,5963],{"class":371},[52,45499,1768],{"class":58},[52,45501,45502],{"class":54,"line":600},[52,45503,1773],{"class":58},[52,45505,45506],{"class":54,"line":606},[52,45507,1778],{"class":58},[156,45509,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45511},[45512,45513],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polygon",{"title":45229,"description":45237},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":45520,"title":45521,"body":45522,"category":28771,"componentType":20848,"description":45529,"extension":168,"meta":45847,"navigation":171,"path":45848,"requiresChild":171,"seo":45849,"stem":45850,"__hash__":45851},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":45523,"toc":45843},[45524,45527,45530,45532,45534,45537,45539,45841],[11,45525,45521],{"id":45526},"posterize",[15,45528,45529],{},"Reduce color depth to create a poster effect",[26901,45531],{"component":45521},[23,45533,26905],{"id":21503},[26907,45535],{":props":45536},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,45538,26913],{"id":26912},[217,45540,45541,45598,45657,45713,45771],{":tabs":1543},[43,45542,45544],{"className":45,"code":45543,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,45545,45546,45554,45561,45570,45574,45582,45590],{"__ignoreMap":48},[52,45547,45548,45550,45552],{"class":54,"line":55},[52,45549,59],{"class":58},[52,45551,63],{"class":62},[52,45553,77],{"class":58},[52,45555,45556,45558],{"class":54,"line":80},[52,45557,83],{"class":58},[52,45559,45560],{"class":62},"Posterize\n",[52,45562,45563,45565,45567],{"class":54,"line":108},[52,45564,17870],{"class":66},[52,45566,70],{"class":58},[52,45568,45569],{"class":73},"\"5\"\n",[52,45571,45572],{"class":54,"line":118},[52,45573,26949],{"class":58},[52,45575,45576,45578,45580],{"class":54,"line":594},[52,45577,2213],{"class":58},[52,45579,2216],{"class":62},[52,45581,105],{"class":58},[52,45583,45584,45586,45588],{"class":54,"line":600},[52,45585,2230],{"class":58},[52,45587,45521],{"class":62},[52,45589,77],{"class":58},[52,45591,45592,45594,45596],{"class":54,"line":606},[52,45593,121],{"class":58},[52,45595,63],{"class":62},[52,45597,77],{"class":58},[43,45599,45601],{"className":360,"code":45600,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,45602,45603,45611,45617,45629,45633,45641,45649],{"__ignoreMap":48},[52,45604,45605,45607,45609],{"class":54,"line":55},[52,45606,59],{"class":58},[52,45608,63],{"class":371},[52,45610,77],{"class":58},[52,45612,45613,45615],{"class":54,"line":80},[52,45614,83],{"class":58},[52,45616,45560],{"class":371},[52,45618,45619,45621,45623,45625,45627],{"class":54,"line":108},[52,45620,17981],{"class":66},[52,45622,70],{"class":231},[52,45624,723],{"class":58},[52,45626,19566],{"class":371},[52,45628,729],{"class":58},[52,45630,45631],{"class":54,"line":118},[52,45632,26949],{"class":58},[52,45634,45635,45637,45639],{"class":54,"line":594},[52,45636,2213],{"class":58},[52,45638,2216],{"class":371},[52,45640,105],{"class":58},[52,45642,45643,45645,45647],{"class":54,"line":600},[52,45644,2230],{"class":58},[52,45646,45521],{"class":371},[52,45648,77],{"class":58},[52,45650,45651,45653,45655],{"class":54,"line":606},[52,45652,121],{"class":58},[52,45654,63],{"class":371},[52,45656,77],{"class":58},[43,45658,45659],{"className":2507,"code":45600,"language":2509,"meta":48,"style":48},[31,45660,45661,45669,45675,45685,45689,45697,45705],{"__ignoreMap":48},[52,45662,45663,45665,45667],{"class":54,"line":55},[52,45664,59],{"class":58},[52,45666,63],{"class":371},[52,45668,77],{"class":58},[52,45670,45671,45673],{"class":54,"line":80},[52,45672,83],{"class":58},[52,45674,45560],{"class":371},[52,45676,45677,45679,45681,45683],{"class":54,"line":108},[52,45678,17981],{"class":66},[52,45680,24845],{"class":58},[52,45682,19566],{"class":371},[52,45684,729],{"class":58},[52,45686,45687],{"class":54,"line":118},[52,45688,26949],{"class":58},[52,45690,45691,45693,45695],{"class":54,"line":594},[52,45692,2213],{"class":58},[52,45694,2216],{"class":371},[52,45696,105],{"class":58},[52,45698,45699,45701,45703],{"class":54,"line":600},[52,45700,2230],{"class":58},[52,45702,45521],{"class":371},[52,45704,77],{"class":58},[52,45706,45707,45709,45711],{"class":54,"line":606},[52,45708,121],{"class":58},[52,45710,63],{"class":371},[52,45712,77],{"class":58},[43,45714,45715],{"className":419,"code":45600,"language":420,"meta":48,"style":48},[31,45716,45717,45725,45731,45743,45747,45755,45763],{"__ignoreMap":48},[52,45718,45719,45721,45723],{"class":54,"line":55},[52,45720,59],{"class":58},[52,45722,63],{"class":371},[52,45724,77],{"class":58},[52,45726,45727,45729],{"class":54,"line":80},[52,45728,83],{"class":58},[52,45730,45560],{"class":371},[52,45732,45733,45735,45737,45739,45741],{"class":54,"line":108},[52,45734,17981],{"class":66},[52,45736,70],{"class":231},[52,45738,723],{"class":58},[52,45740,19566],{"class":371},[52,45742,729],{"class":58},[52,45744,45745],{"class":54,"line":118},[52,45746,26949],{"class":58},[52,45748,45749,45751,45753],{"class":54,"line":594},[52,45750,2213],{"class":58},[52,45752,2216],{"class":371},[52,45754,105],{"class":58},[52,45756,45757,45759,45761],{"class":54,"line":600},[52,45758,2230],{"class":58},[52,45760,45521],{"class":371},[52,45762,77],{"class":58},[52,45764,45765,45767,45769],{"class":54,"line":606},[52,45766,121],{"class":58},[52,45768,63],{"class":371},[52,45770,77],{"class":58},[43,45772,45774],{"className":222,"code":45773,"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,45775,45776,45786,45790,45804,45808,45821,45829,45833,45837],{"__ignoreMap":48},[52,45777,45778,45780,45782,45784],{"class":54,"line":55},[52,45779,232],{"class":231},[52,45781,9231],{"class":58},[52,45783,238],{"class":231},[52,45785,9236],{"class":73},[52,45787,45788],{"class":54,"line":80},[52,45789,597],{"emptyLinePlaceholder":171},[52,45791,45792,45794,45796,45798,45800,45802],{"class":54,"line":108},[52,45793,1721],{"class":231},[52,45795,1724],{"class":371},[52,45797,1727],{"class":231},[52,45799,1730],{"class":231},[52,45801,1733],{"class":66},[52,45803,1736],{"class":58},[52,45805,45806],{"class":54,"line":118},[52,45807,1751],{"class":58},[52,45809,45810,45812,45815,45817,45819],{"class":54,"line":594},[52,45811,1756],{"class":58},[52,45813,45814],{"class":73},"'Posterize'",[52,45816,27194],{"class":58},[52,45818,19566],{"class":371},[52,45820,5259],{"class":58},[52,45822,45823,45825,45827],{"class":54,"line":600},[52,45824,4727],{"class":58},[52,45826,2869],{"class":73},[52,45828,2129],{"class":58},[52,45830,45831],{"class":54,"line":606},[52,45832,4744],{"class":58},[52,45834,45835],{"class":54,"line":653},[52,45836,1773],{"class":58},[52,45838,45839],{"class":54,"line":662},[52,45840,1778],{"class":58},[156,45842,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45844},[45845,45846],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/posterize",{"title":45521,"description":45529},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":45853,"title":45854,"body":45855,"category":27225,"componentType":20848,"description":45862,"extension":168,"meta":46179,"navigation":171,"path":46180,"requiresChild":171,"seo":46181,"stem":46182,"__hash__":46183},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":45856,"toc":46175},[45857,45860,45863,45865,45867,45870,45872,46173],[11,45858,45854],{"id":45859},"progressiveblur",[15,45861,45862],{},"Blur that increases progressively in one direction",[26901,45864],{"component":45854},[23,45866,26905],{"id":21503},[26907,45868],{":props":45869},"[{\"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,45871,26913],{"id":26912},[217,45873,45874,45930,45989,46045,46103],{":tabs":1543},[43,45875,45877],{"className":45,"code":45876,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45878,45879,45887,45894,45902,45906,45914,45922],{"__ignoreMap":48},[52,45880,45881,45883,45885],{"class":54,"line":55},[52,45882,59],{"class":58},[52,45884,63],{"class":62},[52,45886,77],{"class":58},[52,45888,45889,45891],{"class":54,"line":80},[52,45890,83],{"class":58},[52,45892,45893],{"class":62},"ProgressiveBlur\n",[52,45895,45896,45898,45900],{"class":54,"line":108},[52,45897,17870],{"class":66},[52,45899,70],{"class":58},[52,45901,28216],{"class":73},[52,45903,45904],{"class":54,"line":118},[52,45905,26949],{"class":58},[52,45907,45908,45910,45912],{"class":54,"line":594},[52,45909,2213],{"class":58},[52,45911,2216],{"class":62},[52,45913,105],{"class":58},[52,45915,45916,45918,45920],{"class":54,"line":600},[52,45917,2230],{"class":58},[52,45919,45854],{"class":62},[52,45921,77],{"class":58},[52,45923,45924,45926,45928],{"class":54,"line":606},[52,45925,121],{"class":58},[52,45927,63],{"class":62},[52,45929,77],{"class":58},[43,45931,45933],{"className":360,"code":45932,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45934,45935,45943,45949,45961,45965,45973,45981],{"__ignoreMap":48},[52,45936,45937,45939,45941],{"class":54,"line":55},[52,45938,59],{"class":58},[52,45940,63],{"class":371},[52,45942,77],{"class":58},[52,45944,45945,45947],{"class":54,"line":80},[52,45946,83],{"class":58},[52,45948,45893],{"class":371},[52,45950,45951,45953,45955,45957,45959],{"class":54,"line":108},[52,45952,17981],{"class":66},[52,45954,70],{"class":231},[52,45956,723],{"class":58},[52,45958,28274],{"class":371},[52,45960,729],{"class":58},[52,45962,45963],{"class":54,"line":118},[52,45964,26949],{"class":58},[52,45966,45967,45969,45971],{"class":54,"line":594},[52,45968,2213],{"class":58},[52,45970,2216],{"class":371},[52,45972,105],{"class":58},[52,45974,45975,45977,45979],{"class":54,"line":600},[52,45976,2230],{"class":58},[52,45978,45854],{"class":371},[52,45980,77],{"class":58},[52,45982,45983,45985,45987],{"class":54,"line":606},[52,45984,121],{"class":58},[52,45986,63],{"class":371},[52,45988,77],{"class":58},[43,45990,45991],{"className":2507,"code":45932,"language":2509,"meta":48,"style":48},[31,45992,45993,46001,46007,46017,46021,46029,46037],{"__ignoreMap":48},[52,45994,45995,45997,45999],{"class":54,"line":55},[52,45996,59],{"class":58},[52,45998,63],{"class":371},[52,46000,77],{"class":58},[52,46002,46003,46005],{"class":54,"line":80},[52,46004,83],{"class":58},[52,46006,45893],{"class":371},[52,46008,46009,46011,46013,46015],{"class":54,"line":108},[52,46010,17981],{"class":66},[52,46012,24845],{"class":58},[52,46014,28274],{"class":371},[52,46016,729],{"class":58},[52,46018,46019],{"class":54,"line":118},[52,46020,26949],{"class":58},[52,46022,46023,46025,46027],{"class":54,"line":594},[52,46024,2213],{"class":58},[52,46026,2216],{"class":371},[52,46028,105],{"class":58},[52,46030,46031,46033,46035],{"class":54,"line":600},[52,46032,2230],{"class":58},[52,46034,45854],{"class":371},[52,46036,77],{"class":58},[52,46038,46039,46041,46043],{"class":54,"line":606},[52,46040,121],{"class":58},[52,46042,63],{"class":371},[52,46044,77],{"class":58},[43,46046,46047],{"className":419,"code":45932,"language":420,"meta":48,"style":48},[31,46048,46049,46057,46063,46075,46079,46087,46095],{"__ignoreMap":48},[52,46050,46051,46053,46055],{"class":54,"line":55},[52,46052,59],{"class":58},[52,46054,63],{"class":371},[52,46056,77],{"class":58},[52,46058,46059,46061],{"class":54,"line":80},[52,46060,83],{"class":58},[52,46062,45893],{"class":371},[52,46064,46065,46067,46069,46071,46073],{"class":54,"line":108},[52,46066,17981],{"class":66},[52,46068,70],{"class":231},[52,46070,723],{"class":58},[52,46072,28274],{"class":371},[52,46074,729],{"class":58},[52,46076,46077],{"class":54,"line":118},[52,46078,26949],{"class":58},[52,46080,46081,46083,46085],{"class":54,"line":594},[52,46082,2213],{"class":58},[52,46084,2216],{"class":371},[52,46086,105],{"class":58},[52,46088,46089,46091,46093],{"class":54,"line":600},[52,46090,2230],{"class":58},[52,46092,45854],{"class":371},[52,46094,77],{"class":58},[52,46096,46097,46099,46101],{"class":54,"line":606},[52,46098,121],{"class":58},[52,46100,63],{"class":371},[52,46102,77],{"class":58},[43,46104,46106],{"className":222,"code":46105,"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,46107,46108,46118,46122,46136,46140,46153,46161,46165,46169],{"__ignoreMap":48},[52,46109,46110,46112,46114,46116],{"class":54,"line":55},[52,46111,232],{"class":231},[52,46113,9231],{"class":58},[52,46115,238],{"class":231},[52,46117,9236],{"class":73},[52,46119,46120],{"class":54,"line":80},[52,46121,597],{"emptyLinePlaceholder":171},[52,46123,46124,46126,46128,46130,46132,46134],{"class":54,"line":108},[52,46125,1721],{"class":231},[52,46127,1724],{"class":371},[52,46129,1727],{"class":231},[52,46131,1730],{"class":231},[52,46133,1733],{"class":66},[52,46135,1736],{"class":58},[52,46137,46138],{"class":54,"line":118},[52,46139,1751],{"class":58},[52,46141,46142,46144,46147,46149,46151],{"class":54,"line":594},[52,46143,1756],{"class":58},[52,46145,46146],{"class":73},"'ProgressiveBlur'",[52,46148,27194],{"class":58},[52,46150,28274],{"class":371},[52,46152,5259],{"class":58},[52,46154,46155,46157,46159],{"class":54,"line":600},[52,46156,4727],{"class":58},[52,46158,2869],{"class":73},[52,46160,2129],{"class":58},[52,46162,46163],{"class":54,"line":606},[52,46164,4744],{"class":58},[52,46166,46167],{"class":54,"line":653},[52,46168,1773],{"class":58},[52,46170,46171],{"class":54,"line":662},[52,46172,1778],{"class":58},[156,46174,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46176},[46177,46178],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/progressiveblur",{"title":45854,"description":45862},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":46185,"title":46186,"body":46187,"category":27760,"componentType":20842,"description":46194,"extension":168,"meta":46435,"navigation":171,"path":46436,"requiresChild":27763,"seo":46437,"stem":46438,"__hash__":46439},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":46188,"toc":46431},[46189,46192,46195,46197,46199,46202,46204,46429],[11,46190,46186],{"id":46191},"radialgradient",[15,46193,46194],{},"Radial gradient radiating from a center point",[26901,46196],{"component":46186},[23,46198,26905],{"id":21503},[26907,46200],{":props":46201},"[{\"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,46203,26913],{"id":26912},[217,46205,46206,46246,46289,46329,46371],{":tabs":1543},[43,46207,46209],{"className":45,"code":46208,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,46210,46211,46219,46226,46234,46238],{"__ignoreMap":48},[52,46212,46213,46215,46217],{"class":54,"line":55},[52,46214,59],{"class":58},[52,46216,63],{"class":62},[52,46218,77],{"class":58},[52,46220,46221,46223],{"class":54,"line":80},[52,46222,83],{"class":58},[52,46224,46225],{"class":62},"RadialGradient\n",[52,46227,46228,46230,46232],{"class":54,"line":108},[52,46229,14901],{"class":66},[52,46231,70],{"class":58},[52,46233,28827],{"class":73},[52,46235,46236],{"class":54,"line":118},[52,46237,1224],{"class":58},[52,46239,46240,46242,46244],{"class":54,"line":594},[52,46241,121],{"class":58},[52,46243,63],{"class":62},[52,46245,77],{"class":58},[43,46247,46249],{"className":360,"code":46248,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,46250,46251,46259,46265,46277,46281],{"__ignoreMap":48},[52,46252,46253,46255,46257],{"class":54,"line":55},[52,46254,59],{"class":58},[52,46256,63],{"class":371},[52,46258,77],{"class":58},[52,46260,46261,46263],{"class":54,"line":80},[52,46262,83],{"class":58},[52,46264,46225],{"class":371},[52,46266,46267,46269,46271,46273,46275],{"class":54,"line":108},[52,46268,7361],{"class":66},[52,46270,70],{"class":231},[52,46272,723],{"class":58},[52,46274,6391],{"class":371},[52,46276,729],{"class":58},[52,46278,46279],{"class":54,"line":118},[52,46280,1224],{"class":58},[52,46282,46283,46285,46287],{"class":54,"line":594},[52,46284,121],{"class":58},[52,46286,63],{"class":371},[52,46288,77],{"class":58},[43,46290,46291],{"className":2507,"code":46248,"language":2509,"meta":48,"style":48},[31,46292,46293,46301,46307,46317,46321],{"__ignoreMap":48},[52,46294,46295,46297,46299],{"class":54,"line":55},[52,46296,59],{"class":58},[52,46298,63],{"class":371},[52,46300,77],{"class":58},[52,46302,46303,46305],{"class":54,"line":80},[52,46304,83],{"class":58},[52,46306,46225],{"class":371},[52,46308,46309,46311,46313,46315],{"class":54,"line":108},[52,46310,7361],{"class":66},[52,46312,24845],{"class":58},[52,46314,6391],{"class":371},[52,46316,729],{"class":58},[52,46318,46319],{"class":54,"line":118},[52,46320,1224],{"class":58},[52,46322,46323,46325,46327],{"class":54,"line":594},[52,46324,121],{"class":58},[52,46326,63],{"class":371},[52,46328,77],{"class":58},[43,46330,46331],{"className":419,"code":46248,"language":420,"meta":48,"style":48},[31,46332,46333,46341,46347,46359,46363],{"__ignoreMap":48},[52,46334,46335,46337,46339],{"class":54,"line":55},[52,46336,59],{"class":58},[52,46338,63],{"class":371},[52,46340,77],{"class":58},[52,46342,46343,46345],{"class":54,"line":80},[52,46344,83],{"class":58},[52,46346,46225],{"class":371},[52,46348,46349,46351,46353,46355,46357],{"class":54,"line":108},[52,46350,7361],{"class":66},[52,46352,70],{"class":231},[52,46354,723],{"class":58},[52,46356,6391],{"class":371},[52,46358,729],{"class":58},[52,46360,46361],{"class":54,"line":118},[52,46362,1224],{"class":58},[52,46364,46365,46367,46369],{"class":54,"line":594},[52,46366,121],{"class":58},[52,46368,63],{"class":371},[52,46370,77],{"class":58},[43,46372,46374],{"className":222,"code":46373,"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,46375,46376,46386,46390,46404,46408,46421,46425],{"__ignoreMap":48},[52,46377,46378,46380,46382,46384],{"class":54,"line":55},[52,46379,232],{"class":231},[52,46381,9231],{"class":58},[52,46383,238],{"class":231},[52,46385,9236],{"class":73},[52,46387,46388],{"class":54,"line":80},[52,46389,597],{"emptyLinePlaceholder":171},[52,46391,46392,46394,46396,46398,46400,46402],{"class":54,"line":108},[52,46393,1721],{"class":231},[52,46395,1724],{"class":371},[52,46397,1727],{"class":231},[52,46399,1730],{"class":231},[52,46401,1733],{"class":66},[52,46403,1736],{"class":58},[52,46405,46406],{"class":54,"line":118},[52,46407,1751],{"class":58},[52,46409,46410,46412,46415,46417,46419],{"class":54,"line":594},[52,46411,1756],{"class":58},[52,46413,46414],{"class":73},"'RadialGradient'",[52,46416,5254],{"class":58},[52,46418,6391],{"class":371},[52,46420,1768],{"class":58},[52,46422,46423],{"class":54,"line":600},[52,46424,1773],{"class":58},[52,46426,46427],{"class":54,"line":606},[52,46428,1778],{"class":58},[156,46430,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46432},[46433,46434],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/radialgradient",{"title":46186,"description":46194},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":46441,"title":46442,"body":46443,"category":29105,"componentType":20848,"description":46450,"extension":168,"meta":46767,"navigation":171,"path":46768,"requiresChild":171,"seo":46769,"stem":46770,"__hash__":46771},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":46444,"toc":46763},[46445,46448,46451,46453,46455,46458,46460,46761],[11,46446,46442],{"id":46447},"rectangularcoordinates",[15,46449,46450],{},"Convert polar coordinates back to rectangular space",[26901,46452],{"component":46442},[23,46454,26905],{"id":21503},[26907,46456],{":props":46457},"[{\"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,46459,26913],{"id":26912},[217,46461,46462,46518,46577,46633,46691],{":tabs":1543},[43,46463,46465],{"className":45,"code":46464,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,46466,46467,46475,46482,46490,46494,46502,46510],{"__ignoreMap":48},[52,46468,46469,46471,46473],{"class":54,"line":55},[52,46470,59],{"class":58},[52,46472,63],{"class":62},[52,46474,77],{"class":58},[52,46476,46477,46479],{"class":54,"line":80},[52,46478,83],{"class":58},[52,46480,46481],{"class":62},"RectangularCoordinates\n",[52,46483,46484,46486,46488],{"class":54,"line":108},[52,46485,17870],{"class":66},[52,46487,70],{"class":58},[52,46489,28827],{"class":73},[52,46491,46492],{"class":54,"line":118},[52,46493,26949],{"class":58},[52,46495,46496,46498,46500],{"class":54,"line":594},[52,46497,2213],{"class":58},[52,46499,2216],{"class":62},[52,46501,105],{"class":58},[52,46503,46504,46506,46508],{"class":54,"line":600},[52,46505,2230],{"class":58},[52,46507,46442],{"class":62},[52,46509,77],{"class":58},[52,46511,46512,46514,46516],{"class":54,"line":606},[52,46513,121],{"class":58},[52,46515,63],{"class":62},[52,46517,77],{"class":58},[43,46519,46521],{"className":360,"code":46520,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,46522,46523,46531,46537,46549,46553,46561,46569],{"__ignoreMap":48},[52,46524,46525,46527,46529],{"class":54,"line":55},[52,46526,59],{"class":58},[52,46528,63],{"class":371},[52,46530,77],{"class":58},[52,46532,46533,46535],{"class":54,"line":80},[52,46534,83],{"class":58},[52,46536,46481],{"class":371},[52,46538,46539,46541,46543,46545,46547],{"class":54,"line":108},[52,46540,17981],{"class":66},[52,46542,70],{"class":231},[52,46544,723],{"class":58},[52,46546,6391],{"class":371},[52,46548,729],{"class":58},[52,46550,46551],{"class":54,"line":118},[52,46552,26949],{"class":58},[52,46554,46555,46557,46559],{"class":54,"line":594},[52,46556,2213],{"class":58},[52,46558,2216],{"class":371},[52,46560,105],{"class":58},[52,46562,46563,46565,46567],{"class":54,"line":600},[52,46564,2230],{"class":58},[52,46566,46442],{"class":371},[52,46568,77],{"class":58},[52,46570,46571,46573,46575],{"class":54,"line":606},[52,46572,121],{"class":58},[52,46574,63],{"class":371},[52,46576,77],{"class":58},[43,46578,46579],{"className":2507,"code":46520,"language":2509,"meta":48,"style":48},[31,46580,46581,46589,46595,46605,46609,46617,46625],{"__ignoreMap":48},[52,46582,46583,46585,46587],{"class":54,"line":55},[52,46584,59],{"class":58},[52,46586,63],{"class":371},[52,46588,77],{"class":58},[52,46590,46591,46593],{"class":54,"line":80},[52,46592,83],{"class":58},[52,46594,46481],{"class":371},[52,46596,46597,46599,46601,46603],{"class":54,"line":108},[52,46598,17981],{"class":66},[52,46600,24845],{"class":58},[52,46602,6391],{"class":371},[52,46604,729],{"class":58},[52,46606,46607],{"class":54,"line":118},[52,46608,26949],{"class":58},[52,46610,46611,46613,46615],{"class":54,"line":594},[52,46612,2213],{"class":58},[52,46614,2216],{"class":371},[52,46616,105],{"class":58},[52,46618,46619,46621,46623],{"class":54,"line":600},[52,46620,2230],{"class":58},[52,46622,46442],{"class":371},[52,46624,77],{"class":58},[52,46626,46627,46629,46631],{"class":54,"line":606},[52,46628,121],{"class":58},[52,46630,63],{"class":371},[52,46632,77],{"class":58},[43,46634,46635],{"className":419,"code":46520,"language":420,"meta":48,"style":48},[31,46636,46637,46645,46651,46663,46667,46675,46683],{"__ignoreMap":48},[52,46638,46639,46641,46643],{"class":54,"line":55},[52,46640,59],{"class":58},[52,46642,63],{"class":371},[52,46644,77],{"class":58},[52,46646,46647,46649],{"class":54,"line":80},[52,46648,83],{"class":58},[52,46650,46481],{"class":371},[52,46652,46653,46655,46657,46659,46661],{"class":54,"line":108},[52,46654,17981],{"class":66},[52,46656,70],{"class":231},[52,46658,723],{"class":58},[52,46660,6391],{"class":371},[52,46662,729],{"class":58},[52,46664,46665],{"class":54,"line":118},[52,46666,26949],{"class":58},[52,46668,46669,46671,46673],{"class":54,"line":594},[52,46670,2213],{"class":58},[52,46672,2216],{"class":371},[52,46674,105],{"class":58},[52,46676,46677,46679,46681],{"class":54,"line":600},[52,46678,2230],{"class":58},[52,46680,46442],{"class":371},[52,46682,77],{"class":58},[52,46684,46685,46687,46689],{"class":54,"line":606},[52,46686,121],{"class":58},[52,46688,63],{"class":371},[52,46690,77],{"class":58},[43,46692,46694],{"className":222,"code":46693,"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,46695,46696,46706,46710,46724,46728,46741,46749,46753,46757],{"__ignoreMap":48},[52,46697,46698,46700,46702,46704],{"class":54,"line":55},[52,46699,232],{"class":231},[52,46701,9231],{"class":58},[52,46703,238],{"class":231},[52,46705,9236],{"class":73},[52,46707,46708],{"class":54,"line":80},[52,46709,597],{"emptyLinePlaceholder":171},[52,46711,46712,46714,46716,46718,46720,46722],{"class":54,"line":108},[52,46713,1721],{"class":231},[52,46715,1724],{"class":371},[52,46717,1727],{"class":231},[52,46719,1730],{"class":231},[52,46721,1733],{"class":66},[52,46723,1736],{"class":58},[52,46725,46726],{"class":54,"line":118},[52,46727,1751],{"class":58},[52,46729,46730,46732,46735,46737,46739],{"class":54,"line":594},[52,46731,1756],{"class":58},[52,46733,46734],{"class":73},"'RectangularCoordinates'",[52,46736,27194],{"class":58},[52,46738,6391],{"class":371},[52,46740,5259],{"class":58},[52,46742,46743,46745,46747],{"class":54,"line":600},[52,46744,4727],{"class":58},[52,46746,2869],{"class":73},[52,46748,2129],{"class":58},[52,46750,46751],{"class":54,"line":606},[52,46752,4744],{"class":58},[52,46754,46755],{"class":54,"line":653},[52,46756,1773],{"class":58},[52,46758,46759],{"class":54,"line":662},[52,46760,1778],{"class":58},[156,46762,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46764},[46765,46766],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/rectangularcoordinates",{"title":46442,"description":46450},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":46773,"title":46774,"body":46775,"category":30727,"componentType":20842,"description":46782,"extension":168,"meta":47059,"navigation":171,"path":47060,"requiresChild":27763,"seo":47061,"stem":47062,"__hash__":47063},"components/docs/components/Ring.md","Ring",{"type":8,"value":46776,"toc":47055},[46777,46780,46783,46785,46787,46790,46792,47053],[11,46778,46774],{"id":46779},"ring",[15,46781,46782],{},"Annular ring (donut) with adjustable radius and band thickness",[26901,46784],{"component":46774},[23,46786,26905],{"id":21503},[26907,46788],{":props":46789},"[{\"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,46791,26913],{"id":26912},[217,46793,46794,46842,46893,46941,46991],{":tabs":1543},[43,46795,46797],{"className":45,"code":46796,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,46798,46799,46807,46814,46822,46830,46834],{"__ignoreMap":48},[52,46800,46801,46803,46805],{"class":54,"line":55},[52,46802,59],{"class":58},[52,46804,63],{"class":62},[52,46806,77],{"class":58},[52,46808,46809,46811],{"class":54,"line":80},[52,46810,83],{"class":58},[52,46812,46813],{"class":62},"Ring\n",[52,46815,46816,46818,46820],{"class":54,"line":108},[52,46817,7351],{"class":66},[52,46819,70],{"class":58},[52,46821,7307],{"class":73},[52,46823,46824,46826,46828],{"class":54,"line":118},[52,46825,14901],{"class":66},[52,46827,70],{"class":58},[52,46829,31599],{"class":73},[52,46831,46832],{"class":54,"line":594},[52,46833,1224],{"class":58},[52,46835,46836,46838,46840],{"class":54,"line":600},[52,46837,121],{"class":58},[52,46839,63],{"class":62},[52,46841,77],{"class":58},[43,46843,46845],{"className":360,"code":46844,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,46846,46847,46855,46861,46869,46881,46885],{"__ignoreMap":48},[52,46848,46849,46851,46853],{"class":54,"line":55},[52,46850,59],{"class":58},[52,46852,63],{"class":371},[52,46854,77],{"class":58},[52,46856,46857,46859],{"class":54,"line":80},[52,46858,83],{"class":58},[52,46860,46813],{"class":371},[52,46862,46863,46865,46867],{"class":54,"line":108},[52,46864,7351],{"class":66},[52,46866,70],{"class":231},[52,46868,7307],{"class":73},[52,46870,46871,46873,46875,46877,46879],{"class":54,"line":118},[52,46872,7361],{"class":66},[52,46874,70],{"class":231},[52,46876,723],{"class":58},[52,46878,19478],{"class":371},[52,46880,729],{"class":58},[52,46882,46883],{"class":54,"line":594},[52,46884,1224],{"class":58},[52,46886,46887,46889,46891],{"class":54,"line":600},[52,46888,121],{"class":58},[52,46890,63],{"class":371},[52,46892,77],{"class":58},[43,46894,46895],{"className":2507,"code":46844,"language":2509,"meta":48,"style":48},[31,46896,46897,46905,46911,46919,46929,46933],{"__ignoreMap":48},[52,46898,46899,46901,46903],{"class":54,"line":55},[52,46900,59],{"class":58},[52,46902,63],{"class":371},[52,46904,77],{"class":58},[52,46906,46907,46909],{"class":54,"line":80},[52,46908,83],{"class":58},[52,46910,46813],{"class":371},[52,46912,46913,46915,46917],{"class":54,"line":108},[52,46914,7351],{"class":66},[52,46916,70],{"class":58},[52,46918,7307],{"class":73},[52,46920,46921,46923,46925,46927],{"class":54,"line":118},[52,46922,7361],{"class":66},[52,46924,24845],{"class":58},[52,46926,19478],{"class":371},[52,46928,729],{"class":58},[52,46930,46931],{"class":54,"line":594},[52,46932,1224],{"class":58},[52,46934,46935,46937,46939],{"class":54,"line":600},[52,46936,121],{"class":58},[52,46938,63],{"class":371},[52,46940,77],{"class":58},[43,46942,46943],{"className":419,"code":46844,"language":420,"meta":48,"style":48},[31,46944,46945,46953,46959,46967,46979,46983],{"__ignoreMap":48},[52,46946,46947,46949,46951],{"class":54,"line":55},[52,46948,59],{"class":58},[52,46950,63],{"class":371},[52,46952,77],{"class":58},[52,46954,46955,46957],{"class":54,"line":80},[52,46956,83],{"class":58},[52,46958,46813],{"class":371},[52,46960,46961,46963,46965],{"class":54,"line":108},[52,46962,7351],{"class":66},[52,46964,70],{"class":231},[52,46966,7307],{"class":73},[52,46968,46969,46971,46973,46975,46977],{"class":54,"line":118},[52,46970,7361],{"class":66},[52,46972,70],{"class":231},[52,46974,723],{"class":58},[52,46976,19478],{"class":371},[52,46978,729],{"class":58},[52,46980,46981],{"class":54,"line":594},[52,46982,1224],{"class":58},[52,46984,46985,46987,46989],{"class":54,"line":600},[52,46986,121],{"class":58},[52,46988,63],{"class":371},[52,46990,77],{"class":58},[43,46992,46994],{"className":222,"code":46993,"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,46995,46996,47006,47010,47024,47028,47045,47049],{"__ignoreMap":48},[52,46997,46998,47000,47002,47004],{"class":54,"line":55},[52,46999,232],{"class":231},[52,47001,9231],{"class":58},[52,47003,238],{"class":231},[52,47005,9236],{"class":73},[52,47007,47008],{"class":54,"line":80},[52,47009,597],{"emptyLinePlaceholder":171},[52,47011,47012,47014,47016,47018,47020,47022],{"class":54,"line":108},[52,47013,1721],{"class":231},[52,47015,1724],{"class":371},[52,47017,1727],{"class":231},[52,47019,1730],{"class":231},[52,47021,1733],{"class":66},[52,47023,1736],{"class":58},[52,47025,47026],{"class":54,"line":118},[52,47027,1751],{"class":58},[52,47029,47030,47032,47035,47037,47039,47041,47043],{"class":54,"line":594},[52,47031,1756],{"class":58},[52,47033,47034],{"class":73},"'Ring'",[52,47036,1762],{"class":58},[52,47038,7886],{"class":73},[52,47040,4278],{"class":58},[52,47042,19478],{"class":371},[52,47044,1768],{"class":58},[52,47046,47047],{"class":54,"line":600},[52,47048,1773],{"class":58},[52,47050,47051],{"class":54,"line":606},[52,47052,1778],{"class":58},[156,47054,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47056},[47057,47058],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ring",{"title":46774,"description":46782},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":47065,"title":47066,"body":47067,"category":27760,"componentType":20842,"description":47074,"extension":168,"meta":47259,"navigation":171,"path":47260,"requiresChild":27763,"seo":47261,"stem":47262,"__hash__":47263},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":47068,"toc":47255},[47069,47072,47075,47077,47079,47082,47084,47253],[11,47070,47066],{"id":47071},"ripples",[15,47073,47074],{},"Concentric animated ripples emanating from a point",[26901,47076],{"component":47066},[23,47078,26905],{"id":21503},[26907,47080],{":props":47081},"[{\"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,47083,26913],{"id":26912},[217,47085,47086,47115,47143,47171,47199],{":tabs":1543},[43,47087,47089],{"className":45,"code":47088,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,47090,47091,47099,47107],{"__ignoreMap":48},[52,47092,47093,47095,47097],{"class":54,"line":55},[52,47094,59],{"class":58},[52,47096,63],{"class":62},[52,47098,77],{"class":58},[52,47100,47101,47103,47105],{"class":54,"line":80},[52,47102,83],{"class":58},[52,47104,47066],{"class":62},[52,47106,105],{"class":58},[52,47108,47109,47111,47113],{"class":54,"line":108},[52,47110,121],{"class":58},[52,47112,63],{"class":62},[52,47114,77],{"class":58},[43,47116,47117],{"className":360,"code":47088,"language":362,"meta":48,"style":48},[31,47118,47119,47127,47135],{"__ignoreMap":48},[52,47120,47121,47123,47125],{"class":54,"line":55},[52,47122,59],{"class":58},[52,47124,63],{"class":371},[52,47126,77],{"class":58},[52,47128,47129,47131,47133],{"class":54,"line":80},[52,47130,83],{"class":58},[52,47132,47066],{"class":371},[52,47134,105],{"class":58},[52,47136,47137,47139,47141],{"class":54,"line":108},[52,47138,121],{"class":58},[52,47140,63],{"class":371},[52,47142,77],{"class":58},[43,47144,47145],{"className":2507,"code":47088,"language":2509,"meta":48,"style":48},[31,47146,47147,47155,47163],{"__ignoreMap":48},[52,47148,47149,47151,47153],{"class":54,"line":55},[52,47150,59],{"class":58},[52,47152,63],{"class":371},[52,47154,77],{"class":58},[52,47156,47157,47159,47161],{"class":54,"line":80},[52,47158,83],{"class":58},[52,47160,47066],{"class":371},[52,47162,105],{"class":58},[52,47164,47165,47167,47169],{"class":54,"line":108},[52,47166,121],{"class":58},[52,47168,63],{"class":371},[52,47170,77],{"class":58},[43,47172,47173],{"className":419,"code":47088,"language":420,"meta":48,"style":48},[31,47174,47175,47183,47191],{"__ignoreMap":48},[52,47176,47177,47179,47181],{"class":54,"line":55},[52,47178,59],{"class":58},[52,47180,63],{"class":371},[52,47182,77],{"class":58},[52,47184,47185,47187,47189],{"class":54,"line":80},[52,47186,83],{"class":58},[52,47188,47066],{"class":371},[52,47190,105],{"class":58},[52,47192,47193,47195,47197],{"class":54,"line":108},[52,47194,121],{"class":58},[52,47196,63],{"class":371},[52,47198,77],{"class":58},[43,47200,47202],{"className":222,"code":47201,"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,47203,47204,47214,47218,47232,47236,47245,47249],{"__ignoreMap":48},[52,47205,47206,47208,47210,47212],{"class":54,"line":55},[52,47207,232],{"class":231},[52,47209,9231],{"class":58},[52,47211,238],{"class":231},[52,47213,9236],{"class":73},[52,47215,47216],{"class":54,"line":80},[52,47217,597],{"emptyLinePlaceholder":171},[52,47219,47220,47222,47224,47226,47228,47230],{"class":54,"line":108},[52,47221,1721],{"class":231},[52,47223,1724],{"class":371},[52,47225,1727],{"class":231},[52,47227,1730],{"class":231},[52,47229,1733],{"class":66},[52,47231,1736],{"class":58},[52,47233,47234],{"class":54,"line":118},[52,47235,1751],{"class":58},[52,47237,47238,47240,47243],{"class":54,"line":594},[52,47239,1756],{"class":58},[52,47241,47242],{"class":73},"'Ripples'",[52,47244,2129],{"class":58},[52,47246,47247],{"class":54,"line":600},[52,47248,1773],{"class":58},[52,47250,47251],{"class":54,"line":606},[52,47252,1778],{"class":58},[156,47254,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":47256},[47257,47258],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ripples",{"title":47066,"description":47074},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":47265,"title":47266,"body":47267,"category":30727,"componentType":20842,"description":47274,"extension":168,"meta":47504,"navigation":171,"path":47505,"requiresChild":27763,"seo":47506,"stem":47507,"__hash__":47508},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":47268,"toc":47500},[47269,47272,47275,47277,47279,47282,47284,47498],[11,47270,47266],{"id":47271},"roundedrect",[15,47273,47274],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26901,47276],{"component":47266},[23,47278,26905],{"id":21503},[26907,47280],{":props":47281},"[{\"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,47283,26913],{"id":26912},[217,47285,47286,47326,47364,47402,47440],{":tabs":1543},[43,47287,47289],{"className":45,"code":47288,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,47290,47291,47299,47306,47314,47318],{"__ignoreMap":48},[52,47292,47293,47295,47297],{"class":54,"line":55},[52,47294,59],{"class":58},[52,47296,63],{"class":62},[52,47298,77],{"class":58},[52,47300,47301,47303],{"class":54,"line":80},[52,47302,83],{"class":58},[52,47304,47305],{"class":62},"RoundedRect\n",[52,47307,47308,47310,47312],{"class":54,"line":108},[52,47309,7351],{"class":66},[52,47311,70],{"class":58},[52,47313,7307],{"class":73},[52,47315,47316],{"class":54,"line":118},[52,47317,1224],{"class":58},[52,47319,47320,47322,47324],{"class":54,"line":594},[52,47321,121],{"class":58},[52,47323,63],{"class":62},[52,47325,77],{"class":58},[43,47327,47328],{"className":360,"code":47288,"language":362,"meta":48,"style":48},[31,47329,47330,47338,47344,47352,47356],{"__ignoreMap":48},[52,47331,47332,47334,47336],{"class":54,"line":55},[52,47333,59],{"class":58},[52,47335,63],{"class":371},[52,47337,77],{"class":58},[52,47339,47340,47342],{"class":54,"line":80},[52,47341,83],{"class":58},[52,47343,47305],{"class":371},[52,47345,47346,47348,47350],{"class":54,"line":108},[52,47347,7351],{"class":66},[52,47349,70],{"class":231},[52,47351,7307],{"class":73},[52,47353,47354],{"class":54,"line":118},[52,47355,1224],{"class":58},[52,47357,47358,47360,47362],{"class":54,"line":594},[52,47359,121],{"class":58},[52,47361,63],{"class":371},[52,47363,77],{"class":58},[43,47365,47366],{"className":2507,"code":47288,"language":2509,"meta":48,"style":48},[31,47367,47368,47376,47382,47390,47394],{"__ignoreMap":48},[52,47369,47370,47372,47374],{"class":54,"line":55},[52,47371,59],{"class":58},[52,47373,63],{"class":371},[52,47375,77],{"class":58},[52,47377,47378,47380],{"class":54,"line":80},[52,47379,83],{"class":58},[52,47381,47305],{"class":371},[52,47383,47384,47386,47388],{"class":54,"line":108},[52,47385,7351],{"class":66},[52,47387,70],{"class":58},[52,47389,7307],{"class":73},[52,47391,47392],{"class":54,"line":118},[52,47393,1224],{"class":58},[52,47395,47396,47398,47400],{"class":54,"line":594},[52,47397,121],{"class":58},[52,47399,63],{"class":371},[52,47401,77],{"class":58},[43,47403,47404],{"className":419,"code":47288,"language":420,"meta":48,"style":48},[31,47405,47406,47414,47420,47428,47432],{"__ignoreMap":48},[52,47407,47408,47410,47412],{"class":54,"line":55},[52,47409,59],{"class":58},[52,47411,63],{"class":371},[52,47413,77],{"class":58},[52,47415,47416,47418],{"class":54,"line":80},[52,47417,83],{"class":58},[52,47419,47305],{"class":371},[52,47421,47422,47424,47426],{"class":54,"line":108},[52,47423,7351],{"class":66},[52,47425,70],{"class":231},[52,47427,7307],{"class":73},[52,47429,47430],{"class":54,"line":118},[52,47431,1224],{"class":58},[52,47433,47434,47436,47438],{"class":54,"line":594},[52,47435,121],{"class":58},[52,47437,63],{"class":371},[52,47439,77],{"class":58},[43,47441,47443],{"className":222,"code":47442,"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,47444,47445,47455,47459,47473,47477,47490,47494],{"__ignoreMap":48},[52,47446,47447,47449,47451,47453],{"class":54,"line":55},[52,47448,232],{"class":231},[52,47450,9231],{"class":58},[52,47452,238],{"class":231},[52,47454,9236],{"class":73},[52,47456,47457],{"class":54,"line":80},[52,47458,597],{"emptyLinePlaceholder":171},[52,47460,47461,47463,47465,47467,47469,47471],{"class":54,"line":108},[52,47462,1721],{"class":231},[52,47464,1724],{"class":371},[52,47466,1727],{"class":231},[52,47468,1730],{"class":231},[52,47470,1733],{"class":66},[52,47472,1736],{"class":58},[52,47474,47475],{"class":54,"line":118},[52,47476,1751],{"class":58},[52,47478,47479,47481,47484,47486,47488],{"class":54,"line":594},[52,47480,1756],{"class":58},[52,47482,47483],{"class":73},"'RoundedRect'",[52,47485,1762],{"class":58},[52,47487,7886],{"class":73},[52,47489,1768],{"class":58},[52,47491,47492],{"class":54,"line":600},[52,47493,1773],{"class":58},[52,47495,47496],{"class":54,"line":606},[52,47497,1778],{"class":58},[156,47499,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47501},[47502,47503],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/roundedrect",{"title":47266,"description":47274},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":47510,"title":47511,"body":47512,"category":28771,"componentType":20848,"description":47518,"extension":168,"meta":47835,"navigation":171,"path":47836,"requiresChild":171,"seo":47837,"stem":47838,"__hash__":47839},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":47513,"toc":47831},[47514,47516,47519,47521,47523,47526,47528,47829],[11,47515,47511],{"id":5773},[15,47517,47518],{},"Adjust color saturation intensity",[26901,47520],{"component":47511},[23,47522,26905],{"id":21503},[26907,47524],{":props":47525},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,47527,26913],{"id":26912},[217,47529,47530,47586,47645,47701,47759],{":tabs":1543},[43,47531,47533],{"className":45,"code":47532,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,47534,47535,47543,47550,47558,47562,47570,47578],{"__ignoreMap":48},[52,47536,47537,47539,47541],{"class":54,"line":55},[52,47538,59],{"class":58},[52,47540,63],{"class":62},[52,47542,77],{"class":58},[52,47544,47545,47547],{"class":54,"line":80},[52,47546,83],{"class":58},[52,47548,47549],{"class":62},"Saturation\n",[52,47551,47552,47554,47556],{"class":54,"line":108},[52,47553,17870],{"class":66},[52,47555,70],{"class":58},[52,47557,28827],{"class":73},[52,47559,47560],{"class":54,"line":118},[52,47561,26949],{"class":58},[52,47563,47564,47566,47568],{"class":54,"line":594},[52,47565,2213],{"class":58},[52,47567,2216],{"class":62},[52,47569,105],{"class":58},[52,47571,47572,47574,47576],{"class":54,"line":600},[52,47573,2230],{"class":58},[52,47575,47511],{"class":62},[52,47577,77],{"class":58},[52,47579,47580,47582,47584],{"class":54,"line":606},[52,47581,121],{"class":58},[52,47583,63],{"class":62},[52,47585,77],{"class":58},[43,47587,47589],{"className":360,"code":47588,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,47590,47591,47599,47605,47617,47621,47629,47637],{"__ignoreMap":48},[52,47592,47593,47595,47597],{"class":54,"line":55},[52,47594,59],{"class":58},[52,47596,63],{"class":371},[52,47598,77],{"class":58},[52,47600,47601,47603],{"class":54,"line":80},[52,47602,83],{"class":58},[52,47604,47549],{"class":371},[52,47606,47607,47609,47611,47613,47615],{"class":54,"line":108},[52,47608,17981],{"class":66},[52,47610,70],{"class":231},[52,47612,723],{"class":58},[52,47614,6391],{"class":371},[52,47616,729],{"class":58},[52,47618,47619],{"class":54,"line":118},[52,47620,26949],{"class":58},[52,47622,47623,47625,47627],{"class":54,"line":594},[52,47624,2213],{"class":58},[52,47626,2216],{"class":371},[52,47628,105],{"class":58},[52,47630,47631,47633,47635],{"class":54,"line":600},[52,47632,2230],{"class":58},[52,47634,47511],{"class":371},[52,47636,77],{"class":58},[52,47638,47639,47641,47643],{"class":54,"line":606},[52,47640,121],{"class":58},[52,47642,63],{"class":371},[52,47644,77],{"class":58},[43,47646,47647],{"className":2507,"code":47588,"language":2509,"meta":48,"style":48},[31,47648,47649,47657,47663,47673,47677,47685,47693],{"__ignoreMap":48},[52,47650,47651,47653,47655],{"class":54,"line":55},[52,47652,59],{"class":58},[52,47654,63],{"class":371},[52,47656,77],{"class":58},[52,47658,47659,47661],{"class":54,"line":80},[52,47660,83],{"class":58},[52,47662,47549],{"class":371},[52,47664,47665,47667,47669,47671],{"class":54,"line":108},[52,47666,17981],{"class":66},[52,47668,24845],{"class":58},[52,47670,6391],{"class":371},[52,47672,729],{"class":58},[52,47674,47675],{"class":54,"line":118},[52,47676,26949],{"class":58},[52,47678,47679,47681,47683],{"class":54,"line":594},[52,47680,2213],{"class":58},[52,47682,2216],{"class":371},[52,47684,105],{"class":58},[52,47686,47687,47689,47691],{"class":54,"line":600},[52,47688,2230],{"class":58},[52,47690,47511],{"class":371},[52,47692,77],{"class":58},[52,47694,47695,47697,47699],{"class":54,"line":606},[52,47696,121],{"class":58},[52,47698,63],{"class":371},[52,47700,77],{"class":58},[43,47702,47703],{"className":419,"code":47588,"language":420,"meta":48,"style":48},[31,47704,47705,47713,47719,47731,47735,47743,47751],{"__ignoreMap":48},[52,47706,47707,47709,47711],{"class":54,"line":55},[52,47708,59],{"class":58},[52,47710,63],{"class":371},[52,47712,77],{"class":58},[52,47714,47715,47717],{"class":54,"line":80},[52,47716,83],{"class":58},[52,47718,47549],{"class":371},[52,47720,47721,47723,47725,47727,47729],{"class":54,"line":108},[52,47722,17981],{"class":66},[52,47724,70],{"class":231},[52,47726,723],{"class":58},[52,47728,6391],{"class":371},[52,47730,729],{"class":58},[52,47732,47733],{"class":54,"line":118},[52,47734,26949],{"class":58},[52,47736,47737,47739,47741],{"class":54,"line":594},[52,47738,2213],{"class":58},[52,47740,2216],{"class":371},[52,47742,105],{"class":58},[52,47744,47745,47747,47749],{"class":54,"line":600},[52,47746,2230],{"class":58},[52,47748,47511],{"class":371},[52,47750,77],{"class":58},[52,47752,47753,47755,47757],{"class":54,"line":606},[52,47754,121],{"class":58},[52,47756,63],{"class":371},[52,47758,77],{"class":58},[43,47760,47762],{"className":222,"code":47761,"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,47763,47764,47774,47778,47792,47796,47809,47817,47821,47825],{"__ignoreMap":48},[52,47765,47766,47768,47770,47772],{"class":54,"line":55},[52,47767,232],{"class":231},[52,47769,9231],{"class":58},[52,47771,238],{"class":231},[52,47773,9236],{"class":73},[52,47775,47776],{"class":54,"line":80},[52,47777,597],{"emptyLinePlaceholder":171},[52,47779,47780,47782,47784,47786,47788,47790],{"class":54,"line":108},[52,47781,1721],{"class":231},[52,47783,1724],{"class":371},[52,47785,1727],{"class":231},[52,47787,1730],{"class":231},[52,47789,1733],{"class":66},[52,47791,1736],{"class":58},[52,47793,47794],{"class":54,"line":118},[52,47795,1751],{"class":58},[52,47797,47798,47800,47803,47805,47807],{"class":54,"line":594},[52,47799,1756],{"class":58},[52,47801,47802],{"class":73},"'Saturation'",[52,47804,27194],{"class":58},[52,47806,6391],{"class":371},[52,47808,5259],{"class":58},[52,47810,47811,47813,47815],{"class":54,"line":600},[52,47812,4727],{"class":58},[52,47814,2869],{"class":73},[52,47816,2129],{"class":58},[52,47818,47819],{"class":54,"line":606},[52,47820,4744],{"class":58},[52,47822,47823],{"class":54,"line":653},[52,47824,1773],{"class":58},[52,47826,47827],{"class":54,"line":662},[52,47828,1778],{"class":58},[156,47830,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47832},[47833,47834],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/saturation",{"title":47511,"description":47518},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":47841,"title":47842,"body":47843,"category":28771,"componentType":20848,"description":47850,"extension":168,"meta":48111,"navigation":171,"path":48112,"requiresChild":171,"seo":48113,"stem":48114,"__hash__":48115},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":47844,"toc":48107},[47845,47848,47851,47853,47855,47858,47860,48105],[11,47846,47842],{"id":47847},"sharpness",[15,47849,47850],{},"Adjust image sharpness using a convolution kernel",[26901,47852],{"component":47842},[23,47854,26905],{"id":21503},[26907,47856],{":props":47857},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,47859,26913],{"id":26912},[217,47861,47862,47907,47951,47995,48039],{":tabs":1543},[43,47863,47865],{"className":45,"code":47864,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,47866,47867,47875,47883,47891,47899],{"__ignoreMap":48},[52,47868,47869,47871,47873],{"class":54,"line":55},[52,47870,59],{"class":58},[52,47872,63],{"class":62},[52,47874,77],{"class":58},[52,47876,47877,47879,47881],{"class":54,"line":80},[52,47878,83],{"class":58},[52,47880,47842],{"class":62},[52,47882,77],{"class":58},[52,47884,47885,47887,47889],{"class":54,"line":108},[52,47886,2213],{"class":58},[52,47888,2216],{"class":62},[52,47890,105],{"class":58},[52,47892,47893,47895,47897],{"class":54,"line":118},[52,47894,2230],{"class":58},[52,47896,47842],{"class":62},[52,47898,77],{"class":58},[52,47900,47901,47903,47905],{"class":54,"line":594},[52,47902,121],{"class":58},[52,47904,63],{"class":62},[52,47906,77],{"class":58},[43,47908,47909],{"className":360,"code":47864,"language":362,"meta":48,"style":48},[31,47910,47911,47919,47927,47935,47943],{"__ignoreMap":48},[52,47912,47913,47915,47917],{"class":54,"line":55},[52,47914,59],{"class":58},[52,47916,63],{"class":371},[52,47918,77],{"class":58},[52,47920,47921,47923,47925],{"class":54,"line":80},[52,47922,83],{"class":58},[52,47924,47842],{"class":371},[52,47926,77],{"class":58},[52,47928,47929,47931,47933],{"class":54,"line":108},[52,47930,2213],{"class":58},[52,47932,2216],{"class":371},[52,47934,105],{"class":58},[52,47936,47937,47939,47941],{"class":54,"line":118},[52,47938,2230],{"class":58},[52,47940,47842],{"class":371},[52,47942,77],{"class":58},[52,47944,47945,47947,47949],{"class":54,"line":594},[52,47946,121],{"class":58},[52,47948,63],{"class":371},[52,47950,77],{"class":58},[43,47952,47953],{"className":2507,"code":47864,"language":2509,"meta":48,"style":48},[31,47954,47955,47963,47971,47979,47987],{"__ignoreMap":48},[52,47956,47957,47959,47961],{"class":54,"line":55},[52,47958,59],{"class":58},[52,47960,63],{"class":371},[52,47962,77],{"class":58},[52,47964,47965,47967,47969],{"class":54,"line":80},[52,47966,83],{"class":58},[52,47968,47842],{"class":371},[52,47970,77],{"class":58},[52,47972,47973,47975,47977],{"class":54,"line":108},[52,47974,2213],{"class":58},[52,47976,2216],{"class":371},[52,47978,105],{"class":58},[52,47980,47981,47983,47985],{"class":54,"line":118},[52,47982,2230],{"class":58},[52,47984,47842],{"class":371},[52,47986,77],{"class":58},[52,47988,47989,47991,47993],{"class":54,"line":594},[52,47990,121],{"class":58},[52,47992,63],{"class":371},[52,47994,77],{"class":58},[43,47996,47997],{"className":419,"code":47864,"language":420,"meta":48,"style":48},[31,47998,47999,48007,48015,48023,48031],{"__ignoreMap":48},[52,48000,48001,48003,48005],{"class":54,"line":55},[52,48002,59],{"class":58},[52,48004,63],{"class":371},[52,48006,77],{"class":58},[52,48008,48009,48011,48013],{"class":54,"line":80},[52,48010,83],{"class":58},[52,48012,47842],{"class":371},[52,48014,77],{"class":58},[52,48016,48017,48019,48021],{"class":54,"line":108},[52,48018,2213],{"class":58},[52,48020,2216],{"class":371},[52,48022,105],{"class":58},[52,48024,48025,48027,48029],{"class":54,"line":118},[52,48026,2230],{"class":58},[52,48028,47842],{"class":371},[52,48030,77],{"class":58},[52,48032,48033,48035,48037],{"class":54,"line":594},[52,48034,121],{"class":58},[52,48036,63],{"class":371},[52,48038,77],{"class":58},[43,48040,48042],{"className":222,"code":48041,"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,48043,48044,48054,48058,48072,48076,48085,48093,48097,48101],{"__ignoreMap":48},[52,48045,48046,48048,48050,48052],{"class":54,"line":55},[52,48047,232],{"class":231},[52,48049,9231],{"class":58},[52,48051,238],{"class":231},[52,48053,9236],{"class":73},[52,48055,48056],{"class":54,"line":80},[52,48057,597],{"emptyLinePlaceholder":171},[52,48059,48060,48062,48064,48066,48068,48070],{"class":54,"line":108},[52,48061,1721],{"class":231},[52,48063,1724],{"class":371},[52,48065,1727],{"class":231},[52,48067,1730],{"class":231},[52,48069,1733],{"class":66},[52,48071,1736],{"class":58},[52,48073,48074],{"class":54,"line":118},[52,48075,1751],{"class":58},[52,48077,48078,48080,48083],{"class":54,"line":594},[52,48079,1756],{"class":58},[52,48081,48082],{"class":73},"'Sharpness'",[52,48084,4722],{"class":58},[52,48086,48087,48089,48091],{"class":54,"line":600},[52,48088,4727],{"class":58},[52,48090,2869],{"class":73},[52,48092,2129],{"class":58},[52,48094,48095],{"class":54,"line":606},[52,48096,4744],{"class":58},[52,48098,48099],{"class":54,"line":653},[52,48100,1773],{"class":58},[52,48102,48103],{"class":54,"line":662},[52,48104,1778],{"class":58},[156,48106,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":48108},[48109,48110],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sharpness",{"title":47842,"description":47850},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":48117,"title":48118,"body":48119,"category":30161,"componentType":20848,"description":48126,"extension":168,"meta":48491,"navigation":171,"path":48492,"requiresChild":171,"seo":48493,"stem":48494,"__hash__":48495},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":48120,"toc":48487},[48121,48124,48127,48129,48131,48134,48136,48485],[11,48122,48118],{"id":48123},"shatter",[15,48125,48126],{},"Broken glass effect with tectonic plate displacement",[26901,48128],{"component":48118},[23,48130,26905],{"id":21503},[26907,48132],{":props":48133},"[{\"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,48135,26913],{"id":26912},[217,48137,48138,48203,48275,48341,48411],{":tabs":1543},[43,48139,48141],{"className":45,"code":48140,"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,48142,48143,48151,48158,48167,48175,48179,48187,48195],{"__ignoreMap":48},[52,48144,48145,48147,48149],{"class":54,"line":55},[52,48146,59],{"class":58},[52,48148,63],{"class":62},[52,48150,77],{"class":58},[52,48152,48153,48155],{"class":54,"line":80},[52,48154,83],{"class":58},[52,48156,48157],{"class":62},"Shatter\n",[52,48159,48160,48162,48164],{"class":54,"line":108},[52,48161,17870],{"class":66},[52,48163,70],{"class":58},[52,48165,48166],{"class":73},"\"4\"\n",[52,48168,48169,48171,48173],{"class":54,"line":118},[52,48170,14901],{"class":66},[52,48172,70],{"class":58},[52,48174,36464],{"class":73},[52,48176,48177],{"class":54,"line":594},[52,48178,26949],{"class":58},[52,48180,48181,48183,48185],{"class":54,"line":600},[52,48182,2213],{"class":58},[52,48184,2216],{"class":62},[52,48186,105],{"class":58},[52,48188,48189,48191,48193],{"class":54,"line":606},[52,48190,2230],{"class":58},[52,48192,48118],{"class":62},[52,48194,77],{"class":58},[52,48196,48197,48199,48201],{"class":54,"line":653},[52,48198,121],{"class":58},[52,48200,63],{"class":62},[52,48202,77],{"class":58},[43,48204,48206],{"className":360,"code":48205,"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,48207,48208,48216,48222,48235,48247,48251,48259,48267],{"__ignoreMap":48},[52,48209,48210,48212,48214],{"class":54,"line":55},[52,48211,59],{"class":58},[52,48213,63],{"class":371},[52,48215,77],{"class":58},[52,48217,48218,48220],{"class":54,"line":80},[52,48219,83],{"class":58},[52,48221,48157],{"class":371},[52,48223,48224,48226,48228,48230,48233],{"class":54,"line":108},[52,48225,17981],{"class":66},[52,48227,70],{"class":231},[52,48229,723],{"class":58},[52,48231,48232],{"class":371},"4",[52,48234,729],{"class":58},[52,48236,48237,48239,48241,48243,48245],{"class":54,"line":118},[52,48238,7361],{"class":66},[52,48240,70],{"class":231},[52,48242,723],{"class":58},[52,48244,5963],{"class":371},[52,48246,729],{"class":58},[52,48248,48249],{"class":54,"line":594},[52,48250,26949],{"class":58},[52,48252,48253,48255,48257],{"class":54,"line":600},[52,48254,2213],{"class":58},[52,48256,2216],{"class":371},[52,48258,105],{"class":58},[52,48260,48261,48263,48265],{"class":54,"line":606},[52,48262,2230],{"class":58},[52,48264,48118],{"class":371},[52,48266,77],{"class":58},[52,48268,48269,48271,48273],{"class":54,"line":653},[52,48270,121],{"class":58},[52,48272,63],{"class":371},[52,48274,77],{"class":58},[43,48276,48277],{"className":2507,"code":48205,"language":2509,"meta":48,"style":48},[31,48278,48279,48287,48293,48303,48313,48317,48325,48333],{"__ignoreMap":48},[52,48280,48281,48283,48285],{"class":54,"line":55},[52,48282,59],{"class":58},[52,48284,63],{"class":371},[52,48286,77],{"class":58},[52,48288,48289,48291],{"class":54,"line":80},[52,48290,83],{"class":58},[52,48292,48157],{"class":371},[52,48294,48295,48297,48299,48301],{"class":54,"line":108},[52,48296,17981],{"class":66},[52,48298,24845],{"class":58},[52,48300,48232],{"class":371},[52,48302,729],{"class":58},[52,48304,48305,48307,48309,48311],{"class":54,"line":118},[52,48306,7361],{"class":66},[52,48308,24845],{"class":58},[52,48310,5963],{"class":371},[52,48312,729],{"class":58},[52,48314,48315],{"class":54,"line":594},[52,48316,26949],{"class":58},[52,48318,48319,48321,48323],{"class":54,"line":600},[52,48320,2213],{"class":58},[52,48322,2216],{"class":371},[52,48324,105],{"class":58},[52,48326,48327,48329,48331],{"class":54,"line":606},[52,48328,2230],{"class":58},[52,48330,48118],{"class":371},[52,48332,77],{"class":58},[52,48334,48335,48337,48339],{"class":54,"line":653},[52,48336,121],{"class":58},[52,48338,63],{"class":371},[52,48340,77],{"class":58},[43,48342,48343],{"className":419,"code":48205,"language":420,"meta":48,"style":48},[31,48344,48345,48353,48359,48371,48383,48387,48395,48403],{"__ignoreMap":48},[52,48346,48347,48349,48351],{"class":54,"line":55},[52,48348,59],{"class":58},[52,48350,63],{"class":371},[52,48352,77],{"class":58},[52,48354,48355,48357],{"class":54,"line":80},[52,48356,83],{"class":58},[52,48358,48157],{"class":371},[52,48360,48361,48363,48365,48367,48369],{"class":54,"line":108},[52,48362,17981],{"class":66},[52,48364,70],{"class":231},[52,48366,723],{"class":58},[52,48368,48232],{"class":371},[52,48370,729],{"class":58},[52,48372,48373,48375,48377,48379,48381],{"class":54,"line":118},[52,48374,7361],{"class":66},[52,48376,70],{"class":231},[52,48378,723],{"class":58},[52,48380,5963],{"class":371},[52,48382,729],{"class":58},[52,48384,48385],{"class":54,"line":594},[52,48386,26949],{"class":58},[52,48388,48389,48391,48393],{"class":54,"line":600},[52,48390,2213],{"class":58},[52,48392,2216],{"class":371},[52,48394,105],{"class":58},[52,48396,48397,48399,48401],{"class":54,"line":606},[52,48398,2230],{"class":58},[52,48400,48118],{"class":371},[52,48402,77],{"class":58},[52,48404,48405,48407,48409],{"class":54,"line":653},[52,48406,121],{"class":58},[52,48408,63],{"class":371},[52,48410,77],{"class":58},[43,48412,48414],{"className":222,"code":48413,"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,48415,48416,48426,48430,48444,48448,48465,48473,48477,48481],{"__ignoreMap":48},[52,48417,48418,48420,48422,48424],{"class":54,"line":55},[52,48419,232],{"class":231},[52,48421,9231],{"class":58},[52,48423,238],{"class":231},[52,48425,9236],{"class":73},[52,48427,48428],{"class":54,"line":80},[52,48429,597],{"emptyLinePlaceholder":171},[52,48431,48432,48434,48436,48438,48440,48442],{"class":54,"line":108},[52,48433,1721],{"class":231},[52,48435,1724],{"class":371},[52,48437,1727],{"class":231},[52,48439,1730],{"class":231},[52,48441,1733],{"class":66},[52,48443,1736],{"class":58},[52,48445,48446],{"class":54,"line":118},[52,48447,1751],{"class":58},[52,48449,48450,48452,48455,48457,48459,48461,48463],{"class":54,"line":594},[52,48451,1756],{"class":58},[52,48453,48454],{"class":73},"'Shatter'",[52,48456,27194],{"class":58},[52,48458,48232],{"class":371},[52,48460,4278],{"class":58},[52,48462,5963],{"class":371},[52,48464,5259],{"class":58},[52,48466,48467,48469,48471],{"class":54,"line":600},[52,48468,4727],{"class":58},[52,48470,2869],{"class":73},[52,48472,2129],{"class":58},[52,48474,48475],{"class":54,"line":606},[52,48476,4744],{"class":58},[52,48478,48479],{"class":54,"line":653},[52,48480,1773],{"class":58},[52,48482,48483],{"class":54,"line":662},[52,48484,1778],{"class":58},[156,48486,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48488},[48489,48490],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/shatter",{"title":48118,"description":48126},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":48497,"title":48498,"body":48499,"category":27760,"componentType":20842,"description":48506,"extension":168,"meta":48691,"navigation":171,"path":48692,"requiresChild":27763,"seo":48693,"stem":48694,"__hash__":48695},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":48500,"toc":48687},[48501,48504,48507,48509,48511,48514,48516,48685],[11,48502,48498],{"id":48503},"simplexnoise",[15,48505,48506],{},"Organic noise with animated movement",[26901,48508],{"component":48498},[23,48510,26905],{"id":21503},[26907,48512],{":props":48513},"[{\"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,48515,26913],{"id":26912},[217,48517,48518,48547,48575,48603,48631],{":tabs":1543},[43,48519,48521],{"className":45,"code":48520,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,48522,48523,48531,48539],{"__ignoreMap":48},[52,48524,48525,48527,48529],{"class":54,"line":55},[52,48526,59],{"class":58},[52,48528,63],{"class":62},[52,48530,77],{"class":58},[52,48532,48533,48535,48537],{"class":54,"line":80},[52,48534,83],{"class":58},[52,48536,48498],{"class":62},[52,48538,105],{"class":58},[52,48540,48541,48543,48545],{"class":54,"line":108},[52,48542,121],{"class":58},[52,48544,63],{"class":62},[52,48546,77],{"class":58},[43,48548,48549],{"className":360,"code":48520,"language":362,"meta":48,"style":48},[31,48550,48551,48559,48567],{"__ignoreMap":48},[52,48552,48553,48555,48557],{"class":54,"line":55},[52,48554,59],{"class":58},[52,48556,63],{"class":371},[52,48558,77],{"class":58},[52,48560,48561,48563,48565],{"class":54,"line":80},[52,48562,83],{"class":58},[52,48564,48498],{"class":371},[52,48566,105],{"class":58},[52,48568,48569,48571,48573],{"class":54,"line":108},[52,48570,121],{"class":58},[52,48572,63],{"class":371},[52,48574,77],{"class":58},[43,48576,48577],{"className":2507,"code":48520,"language":2509,"meta":48,"style":48},[31,48578,48579,48587,48595],{"__ignoreMap":48},[52,48580,48581,48583,48585],{"class":54,"line":55},[52,48582,59],{"class":58},[52,48584,63],{"class":371},[52,48586,77],{"class":58},[52,48588,48589,48591,48593],{"class":54,"line":80},[52,48590,83],{"class":58},[52,48592,48498],{"class":371},[52,48594,105],{"class":58},[52,48596,48597,48599,48601],{"class":54,"line":108},[52,48598,121],{"class":58},[52,48600,63],{"class":371},[52,48602,77],{"class":58},[43,48604,48605],{"className":419,"code":48520,"language":420,"meta":48,"style":48},[31,48606,48607,48615,48623],{"__ignoreMap":48},[52,48608,48609,48611,48613],{"class":54,"line":55},[52,48610,59],{"class":58},[52,48612,63],{"class":371},[52,48614,77],{"class":58},[52,48616,48617,48619,48621],{"class":54,"line":80},[52,48618,83],{"class":58},[52,48620,48498],{"class":371},[52,48622,105],{"class":58},[52,48624,48625,48627,48629],{"class":54,"line":108},[52,48626,121],{"class":58},[52,48628,63],{"class":371},[52,48630,77],{"class":58},[43,48632,48634],{"className":222,"code":48633,"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,48635,48636,48646,48650,48664,48668,48677,48681],{"__ignoreMap":48},[52,48637,48638,48640,48642,48644],{"class":54,"line":55},[52,48639,232],{"class":231},[52,48641,9231],{"class":58},[52,48643,238],{"class":231},[52,48645,9236],{"class":73},[52,48647,48648],{"class":54,"line":80},[52,48649,597],{"emptyLinePlaceholder":171},[52,48651,48652,48654,48656,48658,48660,48662],{"class":54,"line":108},[52,48653,1721],{"class":231},[52,48655,1724],{"class":371},[52,48657,1727],{"class":231},[52,48659,1730],{"class":231},[52,48661,1733],{"class":66},[52,48663,1736],{"class":58},[52,48665,48666],{"class":54,"line":118},[52,48667,1751],{"class":58},[52,48669,48670,48672,48675],{"class":54,"line":594},[52,48671,1756],{"class":58},[52,48673,48674],{"class":73},"'SimplexNoise'",[52,48676,2129],{"class":58},[52,48678,48679],{"class":54,"line":600},[52,48680,1773],{"class":58},[52,48682,48683],{"class":54,"line":606},[52,48684,1778],{"class":58},[156,48686,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":48688},[48689,48690],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/simplexnoise",{"title":48498,"description":48506},"docs/components/SimplexNoise","KNcXL2wbKgGgSnsoHqms_WjmnUJW2QZShY-VZADNNPc",{"id":48697,"title":48698,"body":48699,"category":27760,"componentType":20842,"description":48706,"extension":168,"meta":48936,"navigation":171,"path":48937,"requiresChild":27763,"seo":48938,"stem":48939,"__hash__":48940},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":48700,"toc":48932},[48701,48704,48707,48709,48711,48714,48716,48930],[11,48702,48698],{"id":48703},"sinewave",[15,48705,48706],{},"Animated wave with thickness and softness",[26901,48708],{"component":48698},[23,48710,26905],{"id":21503},[26907,48712],{":props":48713},"[{\"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,48715,26913],{"id":26912},[217,48717,48718,48758,48796,48834,48872],{":tabs":1543},[43,48719,48721],{"className":45,"code":48720,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,48722,48723,48731,48738,48746,48750],{"__ignoreMap":48},[52,48724,48725,48727,48729],{"class":54,"line":55},[52,48726,59],{"class":58},[52,48728,63],{"class":62},[52,48730,77],{"class":58},[52,48732,48733,48735],{"class":54,"line":80},[52,48734,83],{"class":58},[52,48736,48737],{"class":62},"SineWave\n",[52,48739,48740,48742,48744],{"class":54,"line":108},[52,48741,7351],{"class":66},[52,48743,70],{"class":58},[52,48745,7307],{"class":73},[52,48747,48748],{"class":54,"line":118},[52,48749,1224],{"class":58},[52,48751,48752,48754,48756],{"class":54,"line":594},[52,48753,121],{"class":58},[52,48755,63],{"class":62},[52,48757,77],{"class":58},[43,48759,48760],{"className":360,"code":48720,"language":362,"meta":48,"style":48},[31,48761,48762,48770,48776,48784,48788],{"__ignoreMap":48},[52,48763,48764,48766,48768],{"class":54,"line":55},[52,48765,59],{"class":58},[52,48767,63],{"class":371},[52,48769,77],{"class":58},[52,48771,48772,48774],{"class":54,"line":80},[52,48773,83],{"class":58},[52,48775,48737],{"class":371},[52,48777,48778,48780,48782],{"class":54,"line":108},[52,48779,7351],{"class":66},[52,48781,70],{"class":231},[52,48783,7307],{"class":73},[52,48785,48786],{"class":54,"line":118},[52,48787,1224],{"class":58},[52,48789,48790,48792,48794],{"class":54,"line":594},[52,48791,121],{"class":58},[52,48793,63],{"class":371},[52,48795,77],{"class":58},[43,48797,48798],{"className":2507,"code":48720,"language":2509,"meta":48,"style":48},[31,48799,48800,48808,48814,48822,48826],{"__ignoreMap":48},[52,48801,48802,48804,48806],{"class":54,"line":55},[52,48803,59],{"class":58},[52,48805,63],{"class":371},[52,48807,77],{"class":58},[52,48809,48810,48812],{"class":54,"line":80},[52,48811,83],{"class":58},[52,48813,48737],{"class":371},[52,48815,48816,48818,48820],{"class":54,"line":108},[52,48817,7351],{"class":66},[52,48819,70],{"class":58},[52,48821,7307],{"class":73},[52,48823,48824],{"class":54,"line":118},[52,48825,1224],{"class":58},[52,48827,48828,48830,48832],{"class":54,"line":594},[52,48829,121],{"class":58},[52,48831,63],{"class":371},[52,48833,77],{"class":58},[43,48835,48836],{"className":419,"code":48720,"language":420,"meta":48,"style":48},[31,48837,48838,48846,48852,48860,48864],{"__ignoreMap":48},[52,48839,48840,48842,48844],{"class":54,"line":55},[52,48841,59],{"class":58},[52,48843,63],{"class":371},[52,48845,77],{"class":58},[52,48847,48848,48850],{"class":54,"line":80},[52,48849,83],{"class":58},[52,48851,48737],{"class":371},[52,48853,48854,48856,48858],{"class":54,"line":108},[52,48855,7351],{"class":66},[52,48857,70],{"class":231},[52,48859,7307],{"class":73},[52,48861,48862],{"class":54,"line":118},[52,48863,1224],{"class":58},[52,48865,48866,48868,48870],{"class":54,"line":594},[52,48867,121],{"class":58},[52,48869,63],{"class":371},[52,48871,77],{"class":58},[43,48873,48875],{"className":222,"code":48874,"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,48876,48877,48887,48891,48905,48909,48922,48926],{"__ignoreMap":48},[52,48878,48879,48881,48883,48885],{"class":54,"line":55},[52,48880,232],{"class":231},[52,48882,9231],{"class":58},[52,48884,238],{"class":231},[52,48886,9236],{"class":73},[52,48888,48889],{"class":54,"line":80},[52,48890,597],{"emptyLinePlaceholder":171},[52,48892,48893,48895,48897,48899,48901,48903],{"class":54,"line":108},[52,48894,1721],{"class":231},[52,48896,1724],{"class":371},[52,48898,1727],{"class":231},[52,48900,1730],{"class":231},[52,48902,1733],{"class":66},[52,48904,1736],{"class":58},[52,48906,48907],{"class":54,"line":118},[52,48908,1751],{"class":58},[52,48910,48911,48913,48916,48918,48920],{"class":54,"line":594},[52,48912,1756],{"class":58},[52,48914,48915],{"class":73},"'SineWave'",[52,48917,1762],{"class":58},[52,48919,7886],{"class":73},[52,48921,1768],{"class":58},[52,48923,48924],{"class":54,"line":600},[52,48925,1773],{"class":58},[52,48927,48928],{"class":54,"line":606},[52,48929,1778],{"class":58},[156,48931,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48933},[48934,48935],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sinewave",{"title":48698,"description":48706},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":48942,"title":48943,"body":48944,"category":30161,"componentType":20842,"description":48951,"extension":168,"meta":49192,"navigation":171,"path":49193,"requiresChild":27763,"seo":49194,"stem":49195,"__hash__":49196},"components/docs/components/Smoke.md","Smoke",{"type":8,"value":48945,"toc":49188},[48946,48949,48952,48954,48956,48959,48961,49186],[11,48947,48943],{"id":48948},"smoke",[15,48950,48951],{},"Realistic fluid smoke simulation with vorticity dynamics",[26901,48953],{"component":48943},[23,48955,26905],{"id":21503},[26907,48957],{":props":48958},"[{\"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,48960,26913],{"id":26912},[217,48962,48963,49003,49046,49086,49128],{":tabs":1543},[43,48964,48966],{"className":45,"code":48965,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n />\n\u003C/Shader>\n",[31,48967,48968,48976,48983,48991,48995],{"__ignoreMap":48},[52,48969,48970,48972,48974],{"class":54,"line":55},[52,48971,59],{"class":58},[52,48973,63],{"class":62},[52,48975,77],{"class":58},[52,48977,48978,48980],{"class":54,"line":80},[52,48979,83],{"class":58},[52,48981,48982],{"class":62},"Smoke\n",[52,48984,48985,48987,48989],{"class":54,"line":108},[52,48986,17870],{"class":66},[52,48988,70],{"class":58},[52,48990,28827],{"class":73},[52,48992,48993],{"class":54,"line":118},[52,48994,1224],{"class":58},[52,48996,48997,48999,49001],{"class":54,"line":594},[52,48998,121],{"class":58},[52,49000,63],{"class":62},[52,49002,77],{"class":58},[43,49004,49006],{"className":360,"code":49005,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSmoke\n intensity={1}\n />\n\u003C/Shader>\n",[31,49007,49008,49016,49022,49034,49038],{"__ignoreMap":48},[52,49009,49010,49012,49014],{"class":54,"line":55},[52,49011,59],{"class":58},[52,49013,63],{"class":371},[52,49015,77],{"class":58},[52,49017,49018,49020],{"class":54,"line":80},[52,49019,83],{"class":58},[52,49021,48982],{"class":371},[52,49023,49024,49026,49028,49030,49032],{"class":54,"line":108},[52,49025,17981],{"class":66},[52,49027,70],{"class":231},[52,49029,723],{"class":58},[52,49031,6391],{"class":371},[52,49033,729],{"class":58},[52,49035,49036],{"class":54,"line":118},[52,49037,1224],{"class":58},[52,49039,49040,49042,49044],{"class":54,"line":594},[52,49041,121],{"class":58},[52,49043,63],{"class":371},[52,49045,77],{"class":58},[43,49047,49048],{"className":2507,"code":49005,"language":2509,"meta":48,"style":48},[31,49049,49050,49058,49064,49074,49078],{"__ignoreMap":48},[52,49051,49052,49054,49056],{"class":54,"line":55},[52,49053,59],{"class":58},[52,49055,63],{"class":371},[52,49057,77],{"class":58},[52,49059,49060,49062],{"class":54,"line":80},[52,49061,83],{"class":58},[52,49063,48982],{"class":371},[52,49065,49066,49068,49070,49072],{"class":54,"line":108},[52,49067,17981],{"class":66},[52,49069,24845],{"class":58},[52,49071,6391],{"class":371},[52,49073,729],{"class":58},[52,49075,49076],{"class":54,"line":118},[52,49077,1224],{"class":58},[52,49079,49080,49082,49084],{"class":54,"line":594},[52,49081,121],{"class":58},[52,49083,63],{"class":371},[52,49085,77],{"class":58},[43,49087,49088],{"className":419,"code":49005,"language":420,"meta":48,"style":48},[31,49089,49090,49098,49104,49116,49120],{"__ignoreMap":48},[52,49091,49092,49094,49096],{"class":54,"line":55},[52,49093,59],{"class":58},[52,49095,63],{"class":371},[52,49097,77],{"class":58},[52,49099,49100,49102],{"class":54,"line":80},[52,49101,83],{"class":58},[52,49103,48982],{"class":371},[52,49105,49106,49108,49110,49112,49114],{"class":54,"line":108},[52,49107,17981],{"class":66},[52,49109,70],{"class":231},[52,49111,723],{"class":58},[52,49113,6391],{"class":371},[52,49115,729],{"class":58},[52,49117,49118],{"class":54,"line":118},[52,49119,1224],{"class":58},[52,49121,49122,49124,49126],{"class":54,"line":594},[52,49123,121],{"class":58},[52,49125,63],{"class":371},[52,49127,77],{"class":58},[43,49129,49131],{"className":222,"code":49130,"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,49132,49133,49143,49147,49161,49165,49178,49182],{"__ignoreMap":48},[52,49134,49135,49137,49139,49141],{"class":54,"line":55},[52,49136,232],{"class":231},[52,49138,9231],{"class":58},[52,49140,238],{"class":231},[52,49142,9236],{"class":73},[52,49144,49145],{"class":54,"line":80},[52,49146,597],{"emptyLinePlaceholder":171},[52,49148,49149,49151,49153,49155,49157,49159],{"class":54,"line":108},[52,49150,1721],{"class":231},[52,49152,1724],{"class":371},[52,49154,1727],{"class":231},[52,49156,1730],{"class":231},[52,49158,1733],{"class":66},[52,49160,1736],{"class":58},[52,49162,49163],{"class":54,"line":118},[52,49164,1751],{"class":58},[52,49166,49167,49169,49172,49174,49176],{"class":54,"line":594},[52,49168,1756],{"class":58},[52,49170,49171],{"class":73},"'Smoke'",[52,49173,27194],{"class":58},[52,49175,6391],{"class":371},[52,49177,1768],{"class":58},[52,49179,49180],{"class":54,"line":600},[52,49181,1773],{"class":58},[52,49183,49184],{"class":54,"line":606},[52,49185,1778],{"class":58},[156,49187,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49189},[49190,49191],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/smoke",{"title":48943,"description":48951},"docs/components/Smoke","UlHnB8tb_DN-xqO6eQIWRUBXGMCzqvfmm7_SL-0BaIs",{"id":49198,"title":49199,"body":49200,"category":32398,"componentType":20842,"description":49207,"extension":168,"meta":49448,"navigation":171,"path":49449,"requiresChild":27763,"seo":49450,"stem":49451,"__hash__":49452},"components/docs/components/SmokeFill.md","SmokeFill",{"type":8,"value":49201,"toc":49444},[49202,49205,49208,49210,49212,49215,49217,49442],[11,49203,49199],{"id":49204},"smokefill",[15,49206,49207],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[26901,49209],{"component":49199},[23,49211,26905],{"id":21503},[26907,49213],{":props":49214},"[{\"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,49216,26913],{"id":26912},[217,49218,49219,49259,49302,49342,49384],{":tabs":1543},[43,49220,49222],{"className":45,"code":49221,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n />\n\u003C/Shader>\n",[31,49223,49224,49232,49239,49247,49251],{"__ignoreMap":48},[52,49225,49226,49228,49230],{"class":54,"line":55},[52,49227,59],{"class":58},[52,49229,63],{"class":62},[52,49231,77],{"class":58},[52,49233,49234,49236],{"class":54,"line":80},[52,49235,83],{"class":58},[52,49237,49238],{"class":62},"SmokeFill\n",[52,49240,49241,49243,49245],{"class":54,"line":108},[52,49242,17870],{"class":66},[52,49244,70],{"class":58},[52,49246,28827],{"class":73},[52,49248,49249],{"class":54,"line":118},[52,49250,1224],{"class":58},[52,49252,49253,49255,49257],{"class":54,"line":594},[52,49254,121],{"class":58},[52,49256,63],{"class":62},[52,49258,77],{"class":58},[43,49260,49262],{"className":360,"code":49261,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n />\n\u003C/Shader>\n",[31,49263,49264,49272,49278,49290,49294],{"__ignoreMap":48},[52,49265,49266,49268,49270],{"class":54,"line":55},[52,49267,59],{"class":58},[52,49269,63],{"class":371},[52,49271,77],{"class":58},[52,49273,49274,49276],{"class":54,"line":80},[52,49275,83],{"class":58},[52,49277,49238],{"class":371},[52,49279,49280,49282,49284,49286,49288],{"class":54,"line":108},[52,49281,17981],{"class":66},[52,49283,70],{"class":231},[52,49285,723],{"class":58},[52,49287,6391],{"class":371},[52,49289,729],{"class":58},[52,49291,49292],{"class":54,"line":118},[52,49293,1224],{"class":58},[52,49295,49296,49298,49300],{"class":54,"line":594},[52,49297,121],{"class":58},[52,49299,63],{"class":371},[52,49301,77],{"class":58},[43,49303,49304],{"className":2507,"code":49261,"language":2509,"meta":48,"style":48},[31,49305,49306,49314,49320,49330,49334],{"__ignoreMap":48},[52,49307,49308,49310,49312],{"class":54,"line":55},[52,49309,59],{"class":58},[52,49311,63],{"class":371},[52,49313,77],{"class":58},[52,49315,49316,49318],{"class":54,"line":80},[52,49317,83],{"class":58},[52,49319,49238],{"class":371},[52,49321,49322,49324,49326,49328],{"class":54,"line":108},[52,49323,17981],{"class":66},[52,49325,24845],{"class":58},[52,49327,6391],{"class":371},[52,49329,729],{"class":58},[52,49331,49332],{"class":54,"line":118},[52,49333,1224],{"class":58},[52,49335,49336,49338,49340],{"class":54,"line":594},[52,49337,121],{"class":58},[52,49339,63],{"class":371},[52,49341,77],{"class":58},[43,49343,49344],{"className":419,"code":49261,"language":420,"meta":48,"style":48},[31,49345,49346,49354,49360,49372,49376],{"__ignoreMap":48},[52,49347,49348,49350,49352],{"class":54,"line":55},[52,49349,59],{"class":58},[52,49351,63],{"class":371},[52,49353,77],{"class":58},[52,49355,49356,49358],{"class":54,"line":80},[52,49357,83],{"class":58},[52,49359,49238],{"class":371},[52,49361,49362,49364,49366,49368,49370],{"class":54,"line":108},[52,49363,17981],{"class":66},[52,49365,70],{"class":231},[52,49367,723],{"class":58},[52,49369,6391],{"class":371},[52,49371,729],{"class":58},[52,49373,49374],{"class":54,"line":118},[52,49375,1224],{"class":58},[52,49377,49378,49380,49382],{"class":54,"line":594},[52,49379,121],{"class":58},[52,49381,63],{"class":371},[52,49383,77],{"class":58},[43,49385,49387],{"className":222,"code":49386,"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,49388,49389,49399,49403,49417,49421,49434,49438],{"__ignoreMap":48},[52,49390,49391,49393,49395,49397],{"class":54,"line":55},[52,49392,232],{"class":231},[52,49394,9231],{"class":58},[52,49396,238],{"class":231},[52,49398,9236],{"class":73},[52,49400,49401],{"class":54,"line":80},[52,49402,597],{"emptyLinePlaceholder":171},[52,49404,49405,49407,49409,49411,49413,49415],{"class":54,"line":108},[52,49406,1721],{"class":231},[52,49408,1724],{"class":371},[52,49410,1727],{"class":231},[52,49412,1730],{"class":231},[52,49414,1733],{"class":66},[52,49416,1736],{"class":58},[52,49418,49419],{"class":54,"line":118},[52,49420,1751],{"class":58},[52,49422,49423,49425,49428,49430,49432],{"class":54,"line":594},[52,49424,1756],{"class":58},[52,49426,49427],{"class":73},"'SmokeFill'",[52,49429,27194],{"class":58},[52,49431,6391],{"class":371},[52,49433,1768],{"class":58},[52,49435,49436],{"class":54,"line":600},[52,49437,1773],{"class":58},[52,49439,49440],{"class":54,"line":606},[52,49441,1778],{"class":58},[156,49443,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49445},[49446,49447],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/smokefill",{"title":49199,"description":49207},"docs/components/SmokeFill","In59IIGncxhyBU-LL6PQlelo0dbxYCegEfikyN-CYT4",{"id":49454,"title":49455,"body":49456,"category":28771,"componentType":20848,"description":49463,"extension":168,"meta":49724,"navigation":171,"path":49725,"requiresChild":171,"seo":49726,"stem":49727,"__hash__":49728},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":49457,"toc":49720},[49458,49461,49464,49466,49468,49471,49473,49718],[11,49459,49455],{"id":49460},"solarize",[15,49462,49463],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26901,49465],{"component":49455},[23,49467,26905],{"id":21503},[26907,49469],{":props":49470},"[{\"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,49472,26913],{"id":26912},[217,49474,49475,49520,49564,49608,49652],{":tabs":1543},[43,49476,49478],{"className":45,"code":49477,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,49479,49480,49488,49496,49504,49512],{"__ignoreMap":48},[52,49481,49482,49484,49486],{"class":54,"line":55},[52,49483,59],{"class":58},[52,49485,63],{"class":62},[52,49487,77],{"class":58},[52,49489,49490,49492,49494],{"class":54,"line":80},[52,49491,83],{"class":58},[52,49493,49455],{"class":62},[52,49495,77],{"class":58},[52,49497,49498,49500,49502],{"class":54,"line":108},[52,49499,2213],{"class":58},[52,49501,2216],{"class":62},[52,49503,105],{"class":58},[52,49505,49506,49508,49510],{"class":54,"line":118},[52,49507,2230],{"class":58},[52,49509,49455],{"class":62},[52,49511,77],{"class":58},[52,49513,49514,49516,49518],{"class":54,"line":594},[52,49515,121],{"class":58},[52,49517,63],{"class":62},[52,49519,77],{"class":58},[43,49521,49522],{"className":360,"code":49477,"language":362,"meta":48,"style":48},[31,49523,49524,49532,49540,49548,49556],{"__ignoreMap":48},[52,49525,49526,49528,49530],{"class":54,"line":55},[52,49527,59],{"class":58},[52,49529,63],{"class":371},[52,49531,77],{"class":58},[52,49533,49534,49536,49538],{"class":54,"line":80},[52,49535,83],{"class":58},[52,49537,49455],{"class":371},[52,49539,77],{"class":58},[52,49541,49542,49544,49546],{"class":54,"line":108},[52,49543,2213],{"class":58},[52,49545,2216],{"class":371},[52,49547,105],{"class":58},[52,49549,49550,49552,49554],{"class":54,"line":118},[52,49551,2230],{"class":58},[52,49553,49455],{"class":371},[52,49555,77],{"class":58},[52,49557,49558,49560,49562],{"class":54,"line":594},[52,49559,121],{"class":58},[52,49561,63],{"class":371},[52,49563,77],{"class":58},[43,49565,49566],{"className":2507,"code":49477,"language":2509,"meta":48,"style":48},[31,49567,49568,49576,49584,49592,49600],{"__ignoreMap":48},[52,49569,49570,49572,49574],{"class":54,"line":55},[52,49571,59],{"class":58},[52,49573,63],{"class":371},[52,49575,77],{"class":58},[52,49577,49578,49580,49582],{"class":54,"line":80},[52,49579,83],{"class":58},[52,49581,49455],{"class":371},[52,49583,77],{"class":58},[52,49585,49586,49588,49590],{"class":54,"line":108},[52,49587,2213],{"class":58},[52,49589,2216],{"class":371},[52,49591,105],{"class":58},[52,49593,49594,49596,49598],{"class":54,"line":118},[52,49595,2230],{"class":58},[52,49597,49455],{"class":371},[52,49599,77],{"class":58},[52,49601,49602,49604,49606],{"class":54,"line":594},[52,49603,121],{"class":58},[52,49605,63],{"class":371},[52,49607,77],{"class":58},[43,49609,49610],{"className":419,"code":49477,"language":420,"meta":48,"style":48},[31,49611,49612,49620,49628,49636,49644],{"__ignoreMap":48},[52,49613,49614,49616,49618],{"class":54,"line":55},[52,49615,59],{"class":58},[52,49617,63],{"class":371},[52,49619,77],{"class":58},[52,49621,49622,49624,49626],{"class":54,"line":80},[52,49623,83],{"class":58},[52,49625,49455],{"class":371},[52,49627,77],{"class":58},[52,49629,49630,49632,49634],{"class":54,"line":108},[52,49631,2213],{"class":58},[52,49633,2216],{"class":371},[52,49635,105],{"class":58},[52,49637,49638,49640,49642],{"class":54,"line":118},[52,49639,2230],{"class":58},[52,49641,49455],{"class":371},[52,49643,77],{"class":58},[52,49645,49646,49648,49650],{"class":54,"line":594},[52,49647,121],{"class":58},[52,49649,63],{"class":371},[52,49651,77],{"class":58},[43,49653,49655],{"className":222,"code":49654,"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,49656,49657,49667,49671,49685,49689,49698,49706,49710,49714],{"__ignoreMap":48},[52,49658,49659,49661,49663,49665],{"class":54,"line":55},[52,49660,232],{"class":231},[52,49662,9231],{"class":58},[52,49664,238],{"class":231},[52,49666,9236],{"class":73},[52,49668,49669],{"class":54,"line":80},[52,49670,597],{"emptyLinePlaceholder":171},[52,49672,49673,49675,49677,49679,49681,49683],{"class":54,"line":108},[52,49674,1721],{"class":231},[52,49676,1724],{"class":371},[52,49678,1727],{"class":231},[52,49680,1730],{"class":231},[52,49682,1733],{"class":66},[52,49684,1736],{"class":58},[52,49686,49687],{"class":54,"line":118},[52,49688,1751],{"class":58},[52,49690,49691,49693,49696],{"class":54,"line":594},[52,49692,1756],{"class":58},[52,49694,49695],{"class":73},"'Solarize'",[52,49697,4722],{"class":58},[52,49699,49700,49702,49704],{"class":54,"line":600},[52,49701,4727],{"class":58},[52,49703,2869],{"class":73},[52,49705,2129],{"class":58},[52,49707,49708],{"class":54,"line":606},[52,49709,4744],{"class":58},[52,49711,49712],{"class":54,"line":653},[52,49713,1773],{"class":58},[52,49715,49716],{"class":54,"line":662},[52,49717,1778],{"class":58},[156,49719,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":49721},[49722,49723],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solarize",{"title":49455,"description":49463},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":49730,"title":1571,"body":49731,"category":27760,"componentType":20842,"description":49738,"extension":168,"meta":49968,"navigation":171,"path":49969,"requiresChild":27763,"seo":49970,"stem":49971,"__hash__":49972},"components/docs/components/SolidColor.md",{"type":8,"value":49732,"toc":49964},[49733,49736,49739,49741,49743,49746,49748,49962],[11,49734,1571],{"id":49735},"solidcolor",[15,49737,49738],{},"Fill the canvas with a single solid color",[26901,49740],{"component":1571},[23,49742,26905],{"id":21503},[26907,49744],{":props":49745},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,49747,26913],{"id":26912},[217,49749,49750,49791,49829,49867,49905],{":tabs":1543},[43,49751,49753],{"className":45,"code":49752,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,49754,49755,49763,49770,49779,49783],{"__ignoreMap":48},[52,49756,49757,49759,49761],{"class":54,"line":55},[52,49758,59],{"class":58},[52,49760,63],{"class":62},[52,49762,77],{"class":58},[52,49764,49765,49767],{"class":54,"line":80},[52,49766,83],{"class":58},[52,49768,49769],{"class":62},"SolidColor\n",[52,49771,49772,49774,49776],{"class":54,"line":108},[52,49773,7351],{"class":66},[52,49775,70],{"class":58},[52,49777,49778],{"class":73},"\"#5b18ca\"\n",[52,49780,49781],{"class":54,"line":118},[52,49782,1224],{"class":58},[52,49784,49785,49787,49789],{"class":54,"line":594},[52,49786,121],{"class":58},[52,49788,63],{"class":62},[52,49790,77],{"class":58},[43,49792,49793],{"className":360,"code":49752,"language":362,"meta":48,"style":48},[31,49794,49795,49803,49809,49817,49821],{"__ignoreMap":48},[52,49796,49797,49799,49801],{"class":54,"line":55},[52,49798,59],{"class":58},[52,49800,63],{"class":371},[52,49802,77],{"class":58},[52,49804,49805,49807],{"class":54,"line":80},[52,49806,83],{"class":58},[52,49808,49769],{"class":371},[52,49810,49811,49813,49815],{"class":54,"line":108},[52,49812,7351],{"class":66},[52,49814,70],{"class":231},[52,49816,49778],{"class":73},[52,49818,49819],{"class":54,"line":118},[52,49820,1224],{"class":58},[52,49822,49823,49825,49827],{"class":54,"line":594},[52,49824,121],{"class":58},[52,49826,63],{"class":371},[52,49828,77],{"class":58},[43,49830,49831],{"className":2507,"code":49752,"language":2509,"meta":48,"style":48},[31,49832,49833,49841,49847,49855,49859],{"__ignoreMap":48},[52,49834,49835,49837,49839],{"class":54,"line":55},[52,49836,59],{"class":58},[52,49838,63],{"class":371},[52,49840,77],{"class":58},[52,49842,49843,49845],{"class":54,"line":80},[52,49844,83],{"class":58},[52,49846,49769],{"class":371},[52,49848,49849,49851,49853],{"class":54,"line":108},[52,49850,7351],{"class":66},[52,49852,70],{"class":58},[52,49854,49778],{"class":73},[52,49856,49857],{"class":54,"line":118},[52,49858,1224],{"class":58},[52,49860,49861,49863,49865],{"class":54,"line":594},[52,49862,121],{"class":58},[52,49864,63],{"class":371},[52,49866,77],{"class":58},[43,49868,49869],{"className":419,"code":49752,"language":420,"meta":48,"style":48},[31,49870,49871,49879,49885,49893,49897],{"__ignoreMap":48},[52,49872,49873,49875,49877],{"class":54,"line":55},[52,49874,59],{"class":58},[52,49876,63],{"class":371},[52,49878,77],{"class":58},[52,49880,49881,49883],{"class":54,"line":80},[52,49882,83],{"class":58},[52,49884,49769],{"class":371},[52,49886,49887,49889,49891],{"class":54,"line":108},[52,49888,7351],{"class":66},[52,49890,70],{"class":231},[52,49892,49778],{"class":73},[52,49894,49895],{"class":54,"line":118},[52,49896,1224],{"class":58},[52,49898,49899,49901,49903],{"class":54,"line":594},[52,49900,121],{"class":58},[52,49902,63],{"class":371},[52,49904,77],{"class":58},[43,49906,49908],{"className":222,"code":49907,"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,49909,49910,49920,49924,49938,49942,49954,49958],{"__ignoreMap":48},[52,49911,49912,49914,49916,49918],{"class":54,"line":55},[52,49913,232],{"class":231},[52,49915,9231],{"class":58},[52,49917,238],{"class":231},[52,49919,9236],{"class":73},[52,49921,49922],{"class":54,"line":80},[52,49923,597],{"emptyLinePlaceholder":171},[52,49925,49926,49928,49930,49932,49934,49936],{"class":54,"line":108},[52,49927,1721],{"class":231},[52,49929,1724],{"class":371},[52,49931,1727],{"class":231},[52,49933,1730],{"class":231},[52,49935,1733],{"class":66},[52,49937,1736],{"class":58},[52,49939,49940],{"class":54,"line":118},[52,49941,1751],{"class":58},[52,49943,49944,49946,49948,49950,49952],{"class":54,"line":594},[52,49945,1756],{"class":58},[52,49947,1759],{"class":73},[52,49949,1762],{"class":58},[52,49951,1765],{"class":73},[52,49953,1768],{"class":58},[52,49955,49956],{"class":54,"line":600},[52,49957,1773],{"class":58},[52,49959,49960],{"class":54,"line":606},[52,49961,1778],{"class":58},[156,49963,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49965},[49966,49967],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solidcolor",{"title":1571,"description":49738},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":49974,"title":49975,"body":49976,"category":29105,"componentType":20848,"description":49983,"extension":168,"meta":50300,"navigation":171,"path":50301,"requiresChild":171,"seo":50302,"stem":50303,"__hash__":50304},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":49977,"toc":50296},[49978,49981,49984,49986,49988,49991,49993,50294],[11,49979,49975],{"id":49980},"spherize",[15,49982,49983],{},"Map content onto a 3D sphere surface with depth distortion",[26901,49985],{"component":49975},[23,49987,26905],{"id":21503},[26907,49989],{":props":49990},"[{\"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,49992,26913],{"id":26912},[217,49994,49995,50051,50110,50166,50224],{":tabs":1543},[43,49996,49998],{"className":45,"code":49997,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,49999,50000,50008,50015,50023,50027,50035,50043],{"__ignoreMap":48},[52,50001,50002,50004,50006],{"class":54,"line":55},[52,50003,59],{"class":58},[52,50005,63],{"class":62},[52,50007,77],{"class":58},[52,50009,50010,50012],{"class":54,"line":80},[52,50011,83],{"class":58},[52,50013,50014],{"class":62},"Spherize\n",[52,50016,50017,50019,50021],{"class":54,"line":108},[52,50018,14901],{"class":66},[52,50020,70],{"class":58},[52,50022,28827],{"class":73},[52,50024,50025],{"class":54,"line":118},[52,50026,26949],{"class":58},[52,50028,50029,50031,50033],{"class":54,"line":594},[52,50030,2213],{"class":58},[52,50032,2216],{"class":62},[52,50034,105],{"class":58},[52,50036,50037,50039,50041],{"class":54,"line":600},[52,50038,2230],{"class":58},[52,50040,49975],{"class":62},[52,50042,77],{"class":58},[52,50044,50045,50047,50049],{"class":54,"line":606},[52,50046,121],{"class":58},[52,50048,63],{"class":62},[52,50050,77],{"class":58},[43,50052,50054],{"className":360,"code":50053,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,50055,50056,50064,50070,50082,50086,50094,50102],{"__ignoreMap":48},[52,50057,50058,50060,50062],{"class":54,"line":55},[52,50059,59],{"class":58},[52,50061,63],{"class":371},[52,50063,77],{"class":58},[52,50065,50066,50068],{"class":54,"line":80},[52,50067,83],{"class":58},[52,50069,50014],{"class":371},[52,50071,50072,50074,50076,50078,50080],{"class":54,"line":108},[52,50073,7361],{"class":66},[52,50075,70],{"class":231},[52,50077,723],{"class":58},[52,50079,6391],{"class":371},[52,50081,729],{"class":58},[52,50083,50084],{"class":54,"line":118},[52,50085,26949],{"class":58},[52,50087,50088,50090,50092],{"class":54,"line":594},[52,50089,2213],{"class":58},[52,50091,2216],{"class":371},[52,50093,105],{"class":58},[52,50095,50096,50098,50100],{"class":54,"line":600},[52,50097,2230],{"class":58},[52,50099,49975],{"class":371},[52,50101,77],{"class":58},[52,50103,50104,50106,50108],{"class":54,"line":606},[52,50105,121],{"class":58},[52,50107,63],{"class":371},[52,50109,77],{"class":58},[43,50111,50112],{"className":2507,"code":50053,"language":2509,"meta":48,"style":48},[31,50113,50114,50122,50128,50138,50142,50150,50158],{"__ignoreMap":48},[52,50115,50116,50118,50120],{"class":54,"line":55},[52,50117,59],{"class":58},[52,50119,63],{"class":371},[52,50121,77],{"class":58},[52,50123,50124,50126],{"class":54,"line":80},[52,50125,83],{"class":58},[52,50127,50014],{"class":371},[52,50129,50130,50132,50134,50136],{"class":54,"line":108},[52,50131,7361],{"class":66},[52,50133,24845],{"class":58},[52,50135,6391],{"class":371},[52,50137,729],{"class":58},[52,50139,50140],{"class":54,"line":118},[52,50141,26949],{"class":58},[52,50143,50144,50146,50148],{"class":54,"line":594},[52,50145,2213],{"class":58},[52,50147,2216],{"class":371},[52,50149,105],{"class":58},[52,50151,50152,50154,50156],{"class":54,"line":600},[52,50153,2230],{"class":58},[52,50155,49975],{"class":371},[52,50157,77],{"class":58},[52,50159,50160,50162,50164],{"class":54,"line":606},[52,50161,121],{"class":58},[52,50163,63],{"class":371},[52,50165,77],{"class":58},[43,50167,50168],{"className":419,"code":50053,"language":420,"meta":48,"style":48},[31,50169,50170,50178,50184,50196,50200,50208,50216],{"__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,50014],{"class":371},[52,50185,50186,50188,50190,50192,50194],{"class":54,"line":108},[52,50187,7361],{"class":66},[52,50189,70],{"class":231},[52,50191,723],{"class":58},[52,50193,6391],{"class":371},[52,50195,729],{"class":58},[52,50197,50198],{"class":54,"line":118},[52,50199,26949],{"class":58},[52,50201,50202,50204,50206],{"class":54,"line":594},[52,50203,2213],{"class":58},[52,50205,2216],{"class":371},[52,50207,105],{"class":58},[52,50209,50210,50212,50214],{"class":54,"line":600},[52,50211,2230],{"class":58},[52,50213,49975],{"class":371},[52,50215,77],{"class":58},[52,50217,50218,50220,50222],{"class":54,"line":606},[52,50219,121],{"class":58},[52,50221,63],{"class":371},[52,50223,77],{"class":58},[43,50225,50227],{"className":222,"code":50226,"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,50228,50229,50239,50243,50257,50261,50274,50282,50286,50290],{"__ignoreMap":48},[52,50230,50231,50233,50235,50237],{"class":54,"line":55},[52,50232,232],{"class":231},[52,50234,9231],{"class":58},[52,50236,238],{"class":231},[52,50238,9236],{"class":73},[52,50240,50241],{"class":54,"line":80},[52,50242,597],{"emptyLinePlaceholder":171},[52,50244,50245,50247,50249,50251,50253,50255],{"class":54,"line":108},[52,50246,1721],{"class":231},[52,50248,1724],{"class":371},[52,50250,1727],{"class":231},[52,50252,1730],{"class":231},[52,50254,1733],{"class":66},[52,50256,1736],{"class":58},[52,50258,50259],{"class":54,"line":118},[52,50260,1751],{"class":58},[52,50262,50263,50265,50268,50270,50272],{"class":54,"line":594},[52,50264,1756],{"class":58},[52,50266,50267],{"class":73},"'Spherize'",[52,50269,5254],{"class":58},[52,50271,6391],{"class":371},[52,50273,5259],{"class":58},[52,50275,50276,50278,50280],{"class":54,"line":600},[52,50277,4727],{"class":58},[52,50279,2869],{"class":73},[52,50281,2129],{"class":58},[52,50283,50284],{"class":54,"line":606},[52,50285,4744],{"class":58},[52,50287,50288],{"class":54,"line":653},[52,50289,1773],{"class":58},[52,50291,50292],{"class":54,"line":662},[52,50293,1778],{"class":58},[156,50295,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50297},[50298,50299],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spherize",{"title":49975,"description":49983},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":50306,"title":50307,"body":50308,"category":27760,"componentType":20842,"description":50315,"extension":168,"meta":50500,"navigation":171,"path":50501,"requiresChild":27763,"seo":50502,"stem":50503,"__hash__":50504},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":50309,"toc":50496},[50310,50313,50316,50318,50320,50323,50325,50494],[11,50311,50307],{"id":50312},"spiral",[15,50314,50315],{},"Rotating spiral pattern with animated movement",[26901,50317],{"component":50307},[23,50319,26905],{"id":21503},[26907,50321],{":props":50322},"[{\"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,50324,26913],{"id":26912},[217,50326,50327,50356,50384,50412,50440],{":tabs":1543},[43,50328,50330],{"className":45,"code":50329,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,50331,50332,50340,50348],{"__ignoreMap":48},[52,50333,50334,50336,50338],{"class":54,"line":55},[52,50335,59],{"class":58},[52,50337,63],{"class":62},[52,50339,77],{"class":58},[52,50341,50342,50344,50346],{"class":54,"line":80},[52,50343,83],{"class":58},[52,50345,50307],{"class":62},[52,50347,105],{"class":58},[52,50349,50350,50352,50354],{"class":54,"line":108},[52,50351,121],{"class":58},[52,50353,63],{"class":62},[52,50355,77],{"class":58},[43,50357,50358],{"className":360,"code":50329,"language":362,"meta":48,"style":48},[31,50359,50360,50368,50376],{"__ignoreMap":48},[52,50361,50362,50364,50366],{"class":54,"line":55},[52,50363,59],{"class":58},[52,50365,63],{"class":371},[52,50367,77],{"class":58},[52,50369,50370,50372,50374],{"class":54,"line":80},[52,50371,83],{"class":58},[52,50373,50307],{"class":371},[52,50375,105],{"class":58},[52,50377,50378,50380,50382],{"class":54,"line":108},[52,50379,121],{"class":58},[52,50381,63],{"class":371},[52,50383,77],{"class":58},[43,50385,50386],{"className":2507,"code":50329,"language":2509,"meta":48,"style":48},[31,50387,50388,50396,50404],{"__ignoreMap":48},[52,50389,50390,50392,50394],{"class":54,"line":55},[52,50391,59],{"class":58},[52,50393,63],{"class":371},[52,50395,77],{"class":58},[52,50397,50398,50400,50402],{"class":54,"line":80},[52,50399,83],{"class":58},[52,50401,50307],{"class":371},[52,50403,105],{"class":58},[52,50405,50406,50408,50410],{"class":54,"line":108},[52,50407,121],{"class":58},[52,50409,63],{"class":371},[52,50411,77],{"class":58},[43,50413,50414],{"className":419,"code":50329,"language":420,"meta":48,"style":48},[31,50415,50416,50424,50432],{"__ignoreMap":48},[52,50417,50418,50420,50422],{"class":54,"line":55},[52,50419,59],{"class":58},[52,50421,63],{"class":371},[52,50423,77],{"class":58},[52,50425,50426,50428,50430],{"class":54,"line":80},[52,50427,83],{"class":58},[52,50429,50307],{"class":371},[52,50431,105],{"class":58},[52,50433,50434,50436,50438],{"class":54,"line":108},[52,50435,121],{"class":58},[52,50437,63],{"class":371},[52,50439,77],{"class":58},[43,50441,50443],{"className":222,"code":50442,"language":224,"meta":48,"style":48},"import { createShader } from 'shaders/js'\n\nconst shader = await createShader(canvas, {\n components: [\n { type: 'Spiral', props: {} }\n ]\n})\n",[31,50444,50445,50455,50459,50473,50477,50486,50490],{"__ignoreMap":48},[52,50446,50447,50449,50451,50453],{"class":54,"line":55},[52,50448,232],{"class":231},[52,50450,9231],{"class":58},[52,50452,238],{"class":231},[52,50454,9236],{"class":73},[52,50456,50457],{"class":54,"line":80},[52,50458,597],{"emptyLinePlaceholder":171},[52,50460,50461,50463,50465,50467,50469,50471],{"class":54,"line":108},[52,50462,1721],{"class":231},[52,50464,1724],{"class":371},[52,50466,1727],{"class":231},[52,50468,1730],{"class":231},[52,50470,1733],{"class":66},[52,50472,1736],{"class":58},[52,50474,50475],{"class":54,"line":118},[52,50476,1751],{"class":58},[52,50478,50479,50481,50484],{"class":54,"line":594},[52,50480,1756],{"class":58},[52,50482,50483],{"class":73},"'Spiral'",[52,50485,2129],{"class":58},[52,50487,50488],{"class":54,"line":600},[52,50489,1773],{"class":58},[52,50491,50492],{"class":54,"line":606},[52,50493,1778],{"class":58},[156,50495,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50497},[50498,50499],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spiral",{"title":50307,"description":50315},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":50506,"title":50507,"body":50508,"category":30727,"componentType":20842,"description":50515,"extension":168,"meta":50792,"navigation":171,"path":50793,"requiresChild":27763,"seo":50794,"stem":50795,"__hash__":50796},"components/docs/components/Star.md","Star",{"type":8,"value":50509,"toc":50788},[50510,50513,50516,50518,50520,50523,50525,50786],[11,50511,50507],{"id":50512},"star",[15,50514,50515],{},"Classic star polygon with straight sides and sharp pointed tips",[26901,50517],{"component":50507},[23,50519,26905],{"id":21503},[26907,50521],{":props":50522},"[{\"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,50524,26913],{"id":26912},[217,50526,50527,50575,50626,50674,50724],{":tabs":1543},[43,50528,50530],{"className":45,"code":50529,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,50531,50532,50540,50547,50555,50563,50567],{"__ignoreMap":48},[52,50533,50534,50536,50538],{"class":54,"line":55},[52,50535,59],{"class":58},[52,50537,63],{"class":62},[52,50539,77],{"class":58},[52,50541,50542,50544],{"class":54,"line":80},[52,50543,83],{"class":58},[52,50545,50546],{"class":62},"Star\n",[52,50548,50549,50551,50553],{"class":54,"line":108},[52,50550,7351],{"class":66},[52,50552,70],{"class":58},[52,50554,7307],{"class":73},[52,50556,50557,50559,50561],{"class":54,"line":118},[52,50558,14901],{"class":66},[52,50560,70],{"class":58},[52,50562,36464],{"class":73},[52,50564,50565],{"class":54,"line":594},[52,50566,1224],{"class":58},[52,50568,50569,50571,50573],{"class":54,"line":600},[52,50570,121],{"class":58},[52,50572,63],{"class":62},[52,50574,77],{"class":58},[43,50576,50578],{"className":360,"code":50577,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,50579,50580,50588,50594,50602,50614,50618],{"__ignoreMap":48},[52,50581,50582,50584,50586],{"class":54,"line":55},[52,50583,59],{"class":58},[52,50585,63],{"class":371},[52,50587,77],{"class":58},[52,50589,50590,50592],{"class":54,"line":80},[52,50591,83],{"class":58},[52,50593,50546],{"class":371},[52,50595,50596,50598,50600],{"class":54,"line":108},[52,50597,7351],{"class":66},[52,50599,70],{"class":231},[52,50601,7307],{"class":73},[52,50603,50604,50606,50608,50610,50612],{"class":54,"line":118},[52,50605,7361],{"class":66},[52,50607,70],{"class":231},[52,50609,723],{"class":58},[52,50611,5963],{"class":371},[52,50613,729],{"class":58},[52,50615,50616],{"class":54,"line":594},[52,50617,1224],{"class":58},[52,50619,50620,50622,50624],{"class":54,"line":600},[52,50621,121],{"class":58},[52,50623,63],{"class":371},[52,50625,77],{"class":58},[43,50627,50628],{"className":2507,"code":50577,"language":2509,"meta":48,"style":48},[31,50629,50630,50638,50644,50652,50662,50666],{"__ignoreMap":48},[52,50631,50632,50634,50636],{"class":54,"line":55},[52,50633,59],{"class":58},[52,50635,63],{"class":371},[52,50637,77],{"class":58},[52,50639,50640,50642],{"class":54,"line":80},[52,50641,83],{"class":58},[52,50643,50546],{"class":371},[52,50645,50646,50648,50650],{"class":54,"line":108},[52,50647,7351],{"class":66},[52,50649,70],{"class":58},[52,50651,7307],{"class":73},[52,50653,50654,50656,50658,50660],{"class":54,"line":118},[52,50655,7361],{"class":66},[52,50657,24845],{"class":58},[52,50659,5963],{"class":371},[52,50661,729],{"class":58},[52,50663,50664],{"class":54,"line":594},[52,50665,1224],{"class":58},[52,50667,50668,50670,50672],{"class":54,"line":600},[52,50669,121],{"class":58},[52,50671,63],{"class":371},[52,50673,77],{"class":58},[43,50675,50676],{"className":419,"code":50577,"language":420,"meta":48,"style":48},[31,50677,50678,50686,50692,50700,50712,50716],{"__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,50546],{"class":371},[52,50693,50694,50696,50698],{"class":54,"line":108},[52,50695,7351],{"class":66},[52,50697,70],{"class":231},[52,50699,7307],{"class":73},[52,50701,50702,50704,50706,50708,50710],{"class":54,"line":118},[52,50703,7361],{"class":66},[52,50705,70],{"class":231},[52,50707,723],{"class":58},[52,50709,5963],{"class":371},[52,50711,729],{"class":58},[52,50713,50714],{"class":54,"line":594},[52,50715,1224],{"class":58},[52,50717,50718,50720,50722],{"class":54,"line":600},[52,50719,121],{"class":58},[52,50721,63],{"class":371},[52,50723,77],{"class":58},[43,50725,50727],{"className":222,"code":50726,"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,50728,50729,50739,50743,50757,50761,50778,50782],{"__ignoreMap":48},[52,50730,50731,50733,50735,50737],{"class":54,"line":55},[52,50732,232],{"class":231},[52,50734,9231],{"class":58},[52,50736,238],{"class":231},[52,50738,9236],{"class":73},[52,50740,50741],{"class":54,"line":80},[52,50742,597],{"emptyLinePlaceholder":171},[52,50744,50745,50747,50749,50751,50753,50755],{"class":54,"line":108},[52,50746,1721],{"class":231},[52,50748,1724],{"class":371},[52,50750,1727],{"class":231},[52,50752,1730],{"class":231},[52,50754,1733],{"class":66},[52,50756,1736],{"class":58},[52,50758,50759],{"class":54,"line":118},[52,50760,1751],{"class":58},[52,50762,50763,50765,50768,50770,50772,50774,50776],{"class":54,"line":594},[52,50764,1756],{"class":58},[52,50766,50767],{"class":73},"'Star'",[52,50769,1762],{"class":58},[52,50771,7886],{"class":73},[52,50773,4278],{"class":58},[52,50775,5963],{"class":371},[52,50777,1768],{"class":58},[52,50779,50780],{"class":54,"line":600},[52,50781,1773],{"class":58},[52,50783,50784],{"class":54,"line":606},[52,50785,1778],{"class":58},[156,50787,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50789},[50790,50791],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/star",{"title":50507,"description":50515},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":50798,"title":50799,"body":50800,"category":27760,"componentType":20842,"description":50807,"extension":168,"meta":50992,"navigation":171,"path":50993,"requiresChild":27763,"seo":50994,"stem":50995,"__hash__":50996},"components/docs/components/Strands.md","Strands",{"type":8,"value":50801,"toc":50988},[50802,50805,50808,50810,50812,50815,50817,50986],[11,50803,50799],{"id":50804},"strands",[15,50806,50807],{},"Procedural wavy strands with layered animation",[26901,50809],{"component":50799},[23,50811,26905],{"id":21503},[26907,50813],{":props":50814},"[{\"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,50816,26913],{"id":26912},[217,50818,50819,50848,50876,50904,50932],{":tabs":1543},[43,50820,50822],{"className":45,"code":50821,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,50823,50824,50832,50840],{"__ignoreMap":48},[52,50825,50826,50828,50830],{"class":54,"line":55},[52,50827,59],{"class":58},[52,50829,63],{"class":62},[52,50831,77],{"class":58},[52,50833,50834,50836,50838],{"class":54,"line":80},[52,50835,83],{"class":58},[52,50837,50799],{"class":62},[52,50839,105],{"class":58},[52,50841,50842,50844,50846],{"class":54,"line":108},[52,50843,121],{"class":58},[52,50845,63],{"class":62},[52,50847,77],{"class":58},[43,50849,50850],{"className":360,"code":50821,"language":362,"meta":48,"style":48},[31,50851,50852,50860,50868],{"__ignoreMap":48},[52,50853,50854,50856,50858],{"class":54,"line":55},[52,50855,59],{"class":58},[52,50857,63],{"class":371},[52,50859,77],{"class":58},[52,50861,50862,50864,50866],{"class":54,"line":80},[52,50863,83],{"class":58},[52,50865,50799],{"class":371},[52,50867,105],{"class":58},[52,50869,50870,50872,50874],{"class":54,"line":108},[52,50871,121],{"class":58},[52,50873,63],{"class":371},[52,50875,77],{"class":58},[43,50877,50878],{"className":2507,"code":50821,"language":2509,"meta":48,"style":48},[31,50879,50880,50888,50896],{"__ignoreMap":48},[52,50881,50882,50884,50886],{"class":54,"line":55},[52,50883,59],{"class":58},[52,50885,63],{"class":371},[52,50887,77],{"class":58},[52,50889,50890,50892,50894],{"class":54,"line":80},[52,50891,83],{"class":58},[52,50893,50799],{"class":371},[52,50895,105],{"class":58},[52,50897,50898,50900,50902],{"class":54,"line":108},[52,50899,121],{"class":58},[52,50901,63],{"class":371},[52,50903,77],{"class":58},[43,50905,50906],{"className":419,"code":50821,"language":420,"meta":48,"style":48},[31,50907,50908,50916,50924],{"__ignoreMap":48},[52,50909,50910,50912,50914],{"class":54,"line":55},[52,50911,59],{"class":58},[52,50913,63],{"class":371},[52,50915,77],{"class":58},[52,50917,50918,50920,50922],{"class":54,"line":80},[52,50919,83],{"class":58},[52,50921,50799],{"class":371},[52,50923,105],{"class":58},[52,50925,50926,50928,50930],{"class":54,"line":108},[52,50927,121],{"class":58},[52,50929,63],{"class":371},[52,50931,77],{"class":58},[43,50933,50935],{"className":222,"code":50934,"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,50936,50937,50947,50951,50965,50969,50978,50982],{"__ignoreMap":48},[52,50938,50939,50941,50943,50945],{"class":54,"line":55},[52,50940,232],{"class":231},[52,50942,9231],{"class":58},[52,50944,238],{"class":231},[52,50946,9236],{"class":73},[52,50948,50949],{"class":54,"line":80},[52,50950,597],{"emptyLinePlaceholder":171},[52,50952,50953,50955,50957,50959,50961,50963],{"class":54,"line":108},[52,50954,1721],{"class":231},[52,50956,1724],{"class":371},[52,50958,1727],{"class":231},[52,50960,1730],{"class":231},[52,50962,1733],{"class":66},[52,50964,1736],{"class":58},[52,50966,50967],{"class":54,"line":118},[52,50968,1751],{"class":58},[52,50970,50971,50973,50976],{"class":54,"line":594},[52,50972,1756],{"class":58},[52,50974,50975],{"class":73},"'Strands'",[52,50977,2129],{"class":58},[52,50979,50980],{"class":54,"line":600},[52,50981,1773],{"class":58},[52,50983,50984],{"class":54,"line":606},[52,50985,1778],{"class":58},[156,50987,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50989},[50990,50991],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/strands",{"title":50799,"description":50807},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":50998,"title":50999,"body":51000,"category":29105,"componentType":20848,"description":51006,"extension":168,"meta":51267,"navigation":171,"path":51268,"requiresChild":171,"seo":51269,"stem":51270,"__hash__":51271},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":51001,"toc":51263},[51002,51004,51007,51009,51011,51014,51016,51261],[11,51003,50999],{"id":13646},[15,51005,51006],{},"Stretch content towards a direction from a center point",[26901,51008],{"component":50999},[23,51010,26905],{"id":21503},[26907,51012],{":props":51013},"[{\"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,51015,26913],{"id":26912},[217,51017,51018,51063,51107,51151,51195],{":tabs":1543},[43,51019,51021],{"className":45,"code":51020,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,51022,51023,51031,51039,51047,51055],{"__ignoreMap":48},[52,51024,51025,51027,51029],{"class":54,"line":55},[52,51026,59],{"class":58},[52,51028,63],{"class":62},[52,51030,77],{"class":58},[52,51032,51033,51035,51037],{"class":54,"line":80},[52,51034,83],{"class":58},[52,51036,50999],{"class":62},[52,51038,77],{"class":58},[52,51040,51041,51043,51045],{"class":54,"line":108},[52,51042,2213],{"class":58},[52,51044,2216],{"class":62},[52,51046,105],{"class":58},[52,51048,51049,51051,51053],{"class":54,"line":118},[52,51050,2230],{"class":58},[52,51052,50999],{"class":62},[52,51054,77],{"class":58},[52,51056,51057,51059,51061],{"class":54,"line":594},[52,51058,121],{"class":58},[52,51060,63],{"class":62},[52,51062,77],{"class":58},[43,51064,51065],{"className":360,"code":51020,"language":362,"meta":48,"style":48},[31,51066,51067,51075,51083,51091,51099],{"__ignoreMap":48},[52,51068,51069,51071,51073],{"class":54,"line":55},[52,51070,59],{"class":58},[52,51072,63],{"class":371},[52,51074,77],{"class":58},[52,51076,51077,51079,51081],{"class":54,"line":80},[52,51078,83],{"class":58},[52,51080,50999],{"class":371},[52,51082,77],{"class":58},[52,51084,51085,51087,51089],{"class":54,"line":108},[52,51086,2213],{"class":58},[52,51088,2216],{"class":371},[52,51090,105],{"class":58},[52,51092,51093,51095,51097],{"class":54,"line":118},[52,51094,2230],{"class":58},[52,51096,50999],{"class":371},[52,51098,77],{"class":58},[52,51100,51101,51103,51105],{"class":54,"line":594},[52,51102,121],{"class":58},[52,51104,63],{"class":371},[52,51106,77],{"class":58},[43,51108,51109],{"className":2507,"code":51020,"language":2509,"meta":48,"style":48},[31,51110,51111,51119,51127,51135,51143],{"__ignoreMap":48},[52,51112,51113,51115,51117],{"class":54,"line":55},[52,51114,59],{"class":58},[52,51116,63],{"class":371},[52,51118,77],{"class":58},[52,51120,51121,51123,51125],{"class":54,"line":80},[52,51122,83],{"class":58},[52,51124,50999],{"class":371},[52,51126,77],{"class":58},[52,51128,51129,51131,51133],{"class":54,"line":108},[52,51130,2213],{"class":58},[52,51132,2216],{"class":371},[52,51134,105],{"class":58},[52,51136,51137,51139,51141],{"class":54,"line":118},[52,51138,2230],{"class":58},[52,51140,50999],{"class":371},[52,51142,77],{"class":58},[52,51144,51145,51147,51149],{"class":54,"line":594},[52,51146,121],{"class":58},[52,51148,63],{"class":371},[52,51150,77],{"class":58},[43,51152,51153],{"className":419,"code":51020,"language":420,"meta":48,"style":48},[31,51154,51155,51163,51171,51179,51187],{"__ignoreMap":48},[52,51156,51157,51159,51161],{"class":54,"line":55},[52,51158,59],{"class":58},[52,51160,63],{"class":371},[52,51162,77],{"class":58},[52,51164,51165,51167,51169],{"class":54,"line":80},[52,51166,83],{"class":58},[52,51168,50999],{"class":371},[52,51170,77],{"class":58},[52,51172,51173,51175,51177],{"class":54,"line":108},[52,51174,2213],{"class":58},[52,51176,2216],{"class":371},[52,51178,105],{"class":58},[52,51180,51181,51183,51185],{"class":54,"line":118},[52,51182,2230],{"class":58},[52,51184,50999],{"class":371},[52,51186,77],{"class":58},[52,51188,51189,51191,51193],{"class":54,"line":594},[52,51190,121],{"class":58},[52,51192,63],{"class":371},[52,51194,77],{"class":58},[43,51196,51198],{"className":222,"code":51197,"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,51199,51200,51210,51214,51228,51232,51241,51249,51253,51257],{"__ignoreMap":48},[52,51201,51202,51204,51206,51208],{"class":54,"line":55},[52,51203,232],{"class":231},[52,51205,9231],{"class":58},[52,51207,238],{"class":231},[52,51209,9236],{"class":73},[52,51211,51212],{"class":54,"line":80},[52,51213,597],{"emptyLinePlaceholder":171},[52,51215,51216,51218,51220,51222,51224,51226],{"class":54,"line":108},[52,51217,1721],{"class":231},[52,51219,1724],{"class":371},[52,51221,1727],{"class":231},[52,51223,1730],{"class":231},[52,51225,1733],{"class":66},[52,51227,1736],{"class":58},[52,51229,51230],{"class":54,"line":118},[52,51231,1751],{"class":58},[52,51233,51234,51236,51239],{"class":54,"line":594},[52,51235,1756],{"class":58},[52,51237,51238],{"class":73},"'Stretch'",[52,51240,4722],{"class":58},[52,51242,51243,51245,51247],{"class":54,"line":600},[52,51244,4727],{"class":58},[52,51246,2869],{"class":73},[52,51248,2129],{"class":58},[52,51250,51251],{"class":54,"line":606},[52,51252,4744],{"class":58},[52,51254,51255],{"class":54,"line":653},[52,51256,1773],{"class":58},[52,51258,51259],{"class":54,"line":662},[52,51260,1778],{"class":58},[156,51262,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51264},[51265,51266],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stretch",{"title":50999,"description":51006},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":51273,"title":51274,"body":51275,"category":27760,"componentType":20842,"description":51282,"extension":168,"meta":51467,"navigation":171,"path":51468,"requiresChild":27763,"seo":51469,"stem":51470,"__hash__":51471},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":51276,"toc":51463},[51277,51280,51283,51285,51287,51290,51292,51461],[11,51278,51274],{"id":51279},"stripes",[15,51281,51282],{},"Alternating colored stripes with animation",[26901,51284],{"component":51274},[23,51286,26905],{"id":21503},[26907,51288],{":props":51289},"[{\"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,51291,26913],{"id":26912},[217,51293,51294,51323,51351,51379,51407],{":tabs":1543},[43,51295,51297],{"className":45,"code":51296,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,51298,51299,51307,51315],{"__ignoreMap":48},[52,51300,51301,51303,51305],{"class":54,"line":55},[52,51302,59],{"class":58},[52,51304,63],{"class":62},[52,51306,77],{"class":58},[52,51308,51309,51311,51313],{"class":54,"line":80},[52,51310,83],{"class":58},[52,51312,51274],{"class":62},[52,51314,105],{"class":58},[52,51316,51317,51319,51321],{"class":54,"line":108},[52,51318,121],{"class":58},[52,51320,63],{"class":62},[52,51322,77],{"class":58},[43,51324,51325],{"className":360,"code":51296,"language":362,"meta":48,"style":48},[31,51326,51327,51335,51343],{"__ignoreMap":48},[52,51328,51329,51331,51333],{"class":54,"line":55},[52,51330,59],{"class":58},[52,51332,63],{"class":371},[52,51334,77],{"class":58},[52,51336,51337,51339,51341],{"class":54,"line":80},[52,51338,83],{"class":58},[52,51340,51274],{"class":371},[52,51342,105],{"class":58},[52,51344,51345,51347,51349],{"class":54,"line":108},[52,51346,121],{"class":58},[52,51348,63],{"class":371},[52,51350,77],{"class":58},[43,51352,51353],{"className":2507,"code":51296,"language":2509,"meta":48,"style":48},[31,51354,51355,51363,51371],{"__ignoreMap":48},[52,51356,51357,51359,51361],{"class":54,"line":55},[52,51358,59],{"class":58},[52,51360,63],{"class":371},[52,51362,77],{"class":58},[52,51364,51365,51367,51369],{"class":54,"line":80},[52,51366,83],{"class":58},[52,51368,51274],{"class":371},[52,51370,105],{"class":58},[52,51372,51373,51375,51377],{"class":54,"line":108},[52,51374,121],{"class":58},[52,51376,63],{"class":371},[52,51378,77],{"class":58},[43,51380,51381],{"className":419,"code":51296,"language":420,"meta":48,"style":48},[31,51382,51383,51391,51399],{"__ignoreMap":48},[52,51384,51385,51387,51389],{"class":54,"line":55},[52,51386,59],{"class":58},[52,51388,63],{"class":371},[52,51390,77],{"class":58},[52,51392,51393,51395,51397],{"class":54,"line":80},[52,51394,83],{"class":58},[52,51396,51274],{"class":371},[52,51398,105],{"class":58},[52,51400,51401,51403,51405],{"class":54,"line":108},[52,51402,121],{"class":58},[52,51404,63],{"class":371},[52,51406,77],{"class":58},[43,51408,51410],{"className":222,"code":51409,"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,51411,51412,51422,51426,51440,51444,51453,51457],{"__ignoreMap":48},[52,51413,51414,51416,51418,51420],{"class":54,"line":55},[52,51415,232],{"class":231},[52,51417,9231],{"class":58},[52,51419,238],{"class":231},[52,51421,9236],{"class":73},[52,51423,51424],{"class":54,"line":80},[52,51425,597],{"emptyLinePlaceholder":171},[52,51427,51428,51430,51432,51434,51436,51438],{"class":54,"line":108},[52,51429,1721],{"class":231},[52,51431,1724],{"class":371},[52,51433,1727],{"class":231},[52,51435,1730],{"class":231},[52,51437,1733],{"class":66},[52,51439,1736],{"class":58},[52,51441,51442],{"class":54,"line":118},[52,51443,1751],{"class":58},[52,51445,51446,51448,51451],{"class":54,"line":594},[52,51447,1756],{"class":58},[52,51449,51450],{"class":73},"'Stripes'",[52,51452,2129],{"class":58},[52,51454,51455],{"class":54,"line":600},[52,51456,1773],{"class":58},[52,51458,51459],{"class":54,"line":606},[52,51460,1778],{"class":58},[156,51462,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51464},[51465,51466],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stripes",{"title":51274,"description":51282},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":51473,"title":51474,"body":51475,"category":27760,"componentType":20842,"description":51482,"extension":168,"meta":51714,"navigation":171,"path":51715,"requiresChild":27763,"seo":51716,"stem":51717,"__hash__":51718},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":51476,"toc":51710},[51477,51480,51483,51485,51487,51490,51492,51708],[11,51478,51474],{"id":51479},"studiobackground",[15,51481,51482],{},"Multi-light studio background with ambient motion.",[26901,51484],{"component":51474},[23,51486,26905],{"id":21503},[26907,51488],{":props":51489},"[{\"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,51491,26913],{"id":26912},[217,51493,51494,51535,51573,51611,51649],{":tabs":1543},[43,51495,51497],{"className":45,"code":51496,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,51498,51499,51507,51514,51523,51527],{"__ignoreMap":48},[52,51500,51501,51503,51505],{"class":54,"line":55},[52,51502,59],{"class":58},[52,51504,63],{"class":62},[52,51506,77],{"class":58},[52,51508,51509,51511],{"class":54,"line":80},[52,51510,83],{"class":58},[52,51512,51513],{"class":62},"StudioBackground\n",[52,51515,51516,51518,51520],{"class":54,"line":108},[52,51517,7351],{"class":66},[52,51519,70],{"class":58},[52,51521,51522],{"class":73},"\"#d8dbec\"\n",[52,51524,51525],{"class":54,"line":118},[52,51526,1224],{"class":58},[52,51528,51529,51531,51533],{"class":54,"line":594},[52,51530,121],{"class":58},[52,51532,63],{"class":62},[52,51534,77],{"class":58},[43,51536,51537],{"className":360,"code":51496,"language":362,"meta":48,"style":48},[31,51538,51539,51547,51553,51561,51565],{"__ignoreMap":48},[52,51540,51541,51543,51545],{"class":54,"line":55},[52,51542,59],{"class":58},[52,51544,63],{"class":371},[52,51546,77],{"class":58},[52,51548,51549,51551],{"class":54,"line":80},[52,51550,83],{"class":58},[52,51552,51513],{"class":371},[52,51554,51555,51557,51559],{"class":54,"line":108},[52,51556,7351],{"class":66},[52,51558,70],{"class":231},[52,51560,51522],{"class":73},[52,51562,51563],{"class":54,"line":118},[52,51564,1224],{"class":58},[52,51566,51567,51569,51571],{"class":54,"line":594},[52,51568,121],{"class":58},[52,51570,63],{"class":371},[52,51572,77],{"class":58},[43,51574,51575],{"className":2507,"code":51496,"language":2509,"meta":48,"style":48},[31,51576,51577,51585,51591,51599,51603],{"__ignoreMap":48},[52,51578,51579,51581,51583],{"class":54,"line":55},[52,51580,59],{"class":58},[52,51582,63],{"class":371},[52,51584,77],{"class":58},[52,51586,51587,51589],{"class":54,"line":80},[52,51588,83],{"class":58},[52,51590,51513],{"class":371},[52,51592,51593,51595,51597],{"class":54,"line":108},[52,51594,7351],{"class":66},[52,51596,70],{"class":58},[52,51598,51522],{"class":73},[52,51600,51601],{"class":54,"line":118},[52,51602,1224],{"class":58},[52,51604,51605,51607,51609],{"class":54,"line":594},[52,51606,121],{"class":58},[52,51608,63],{"class":371},[52,51610,77],{"class":58},[43,51612,51613],{"className":419,"code":51496,"language":420,"meta":48,"style":48},[31,51614,51615,51623,51629,51637,51641],{"__ignoreMap":48},[52,51616,51617,51619,51621],{"class":54,"line":55},[52,51618,59],{"class":58},[52,51620,63],{"class":371},[52,51622,77],{"class":58},[52,51624,51625,51627],{"class":54,"line":80},[52,51626,83],{"class":58},[52,51628,51513],{"class":371},[52,51630,51631,51633,51635],{"class":54,"line":108},[52,51632,7351],{"class":66},[52,51634,70],{"class":231},[52,51636,51522],{"class":73},[52,51638,51639],{"class":54,"line":118},[52,51640,1224],{"class":58},[52,51642,51643,51645,51647],{"class":54,"line":594},[52,51644,121],{"class":58},[52,51646,63],{"class":371},[52,51648,77],{"class":58},[43,51650,51652],{"className":222,"code":51651,"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,51653,51654,51664,51668,51682,51686,51700,51704],{"__ignoreMap":48},[52,51655,51656,51658,51660,51662],{"class":54,"line":55},[52,51657,232],{"class":231},[52,51659,9231],{"class":58},[52,51661,238],{"class":231},[52,51663,9236],{"class":73},[52,51665,51666],{"class":54,"line":80},[52,51667,597],{"emptyLinePlaceholder":171},[52,51669,51670,51672,51674,51676,51678,51680],{"class":54,"line":108},[52,51671,1721],{"class":231},[52,51673,1724],{"class":371},[52,51675,1727],{"class":231},[52,51677,1730],{"class":231},[52,51679,1733],{"class":66},[52,51681,1736],{"class":58},[52,51683,51684],{"class":54,"line":118},[52,51685,1751],{"class":58},[52,51687,51688,51690,51693,51695,51698],{"class":54,"line":594},[52,51689,1756],{"class":58},[52,51691,51692],{"class":73},"'StudioBackground'",[52,51694,1762],{"class":58},[52,51696,51697],{"class":73},"'#d8dbec'",[52,51699,1768],{"class":58},[52,51701,51702],{"class":54,"line":600},[52,51703,1773],{"class":58},[52,51705,51706],{"class":54,"line":606},[52,51707,1778],{"class":58},[156,51709,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51711},[51712,51713],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/studiobackground",{"title":51474,"description":51482},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":51720,"title":11722,"body":51721,"category":27760,"componentType":20842,"description":51728,"extension":168,"meta":51913,"navigation":171,"path":51914,"requiresChild":27763,"seo":51915,"stem":51916,"__hash__":51917},"components/docs/components/Swirl.md",{"type":8,"value":51722,"toc":51909},[51723,51726,51729,51731,51733,51736,51738,51907],[11,51724,11722],{"id":51725},"swirl",[15,51727,51728],{},"Flowing swirl pattern with multi-layered noise",[26901,51730],{"component":11722},[23,51732,26905],{"id":21503},[26907,51734],{":props":51735},"[{\"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,51737,26913],{"id":26912},[217,51739,51740,51769,51797,51825,51853],{":tabs":1543},[43,51741,51743],{"className":45,"code":51742,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,51744,51745,51753,51761],{"__ignoreMap":48},[52,51746,51747,51749,51751],{"class":54,"line":55},[52,51748,59],{"class":58},[52,51750,63],{"class":62},[52,51752,77],{"class":58},[52,51754,51755,51757,51759],{"class":54,"line":80},[52,51756,83],{"class":58},[52,51758,11722],{"class":62},[52,51760,105],{"class":58},[52,51762,51763,51765,51767],{"class":54,"line":108},[52,51764,121],{"class":58},[52,51766,63],{"class":62},[52,51768,77],{"class":58},[43,51770,51771],{"className":360,"code":51742,"language":362,"meta":48,"style":48},[31,51772,51773,51781,51789],{"__ignoreMap":48},[52,51774,51775,51777,51779],{"class":54,"line":55},[52,51776,59],{"class":58},[52,51778,63],{"class":371},[52,51780,77],{"class":58},[52,51782,51783,51785,51787],{"class":54,"line":80},[52,51784,83],{"class":58},[52,51786,11722],{"class":371},[52,51788,105],{"class":58},[52,51790,51791,51793,51795],{"class":54,"line":108},[52,51792,121],{"class":58},[52,51794,63],{"class":371},[52,51796,77],{"class":58},[43,51798,51799],{"className":2507,"code":51742,"language":2509,"meta":48,"style":48},[31,51800,51801,51809,51817],{"__ignoreMap":48},[52,51802,51803,51805,51807],{"class":54,"line":55},[52,51804,59],{"class":58},[52,51806,63],{"class":371},[52,51808,77],{"class":58},[52,51810,51811,51813,51815],{"class":54,"line":80},[52,51812,83],{"class":58},[52,51814,11722],{"class":371},[52,51816,105],{"class":58},[52,51818,51819,51821,51823],{"class":54,"line":108},[52,51820,121],{"class":58},[52,51822,63],{"class":371},[52,51824,77],{"class":58},[43,51826,51827],{"className":419,"code":51742,"language":420,"meta":48,"style":48},[31,51828,51829,51837,51845],{"__ignoreMap":48},[52,51830,51831,51833,51835],{"class":54,"line":55},[52,51832,59],{"class":58},[52,51834,63],{"class":371},[52,51836,77],{"class":58},[52,51838,51839,51841,51843],{"class":54,"line":80},[52,51840,83],{"class":58},[52,51842,11722],{"class":371},[52,51844,105],{"class":58},[52,51846,51847,51849,51851],{"class":54,"line":108},[52,51848,121],{"class":58},[52,51850,63],{"class":371},[52,51852,77],{"class":58},[43,51854,51856],{"className":222,"code":51855,"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,51857,51858,51868,51872,51886,51890,51899,51903],{"__ignoreMap":48},[52,51859,51860,51862,51864,51866],{"class":54,"line":55},[52,51861,232],{"class":231},[52,51863,9231],{"class":58},[52,51865,238],{"class":231},[52,51867,9236],{"class":73},[52,51869,51870],{"class":54,"line":80},[52,51871,597],{"emptyLinePlaceholder":171},[52,51873,51874,51876,51878,51880,51882,51884],{"class":54,"line":108},[52,51875,1721],{"class":231},[52,51877,1724],{"class":371},[52,51879,1727],{"class":231},[52,51881,1730],{"class":231},[52,51883,1733],{"class":66},[52,51885,1736],{"class":58},[52,51887,51888],{"class":54,"line":118},[52,51889,1751],{"class":58},[52,51891,51892,51894,51897],{"class":54,"line":594},[52,51893,1756],{"class":58},[52,51895,51896],{"class":73},"'Swirl'",[52,51898,2129],{"class":58},[52,51900,51901],{"class":54,"line":600},[52,51902,1773],{"class":58},[52,51904,51905],{"class":54,"line":606},[52,51906,1778],{"class":58},[156,51908,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51910},[51911,51912],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/swirl",{"title":11722,"description":51728},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":51919,"title":51920,"body":51921,"category":27225,"componentType":20848,"description":51928,"extension":168,"meta":52245,"navigation":171,"path":52246,"requiresChild":171,"seo":52247,"stem":52248,"__hash__":52249},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":51922,"toc":52241},[51923,51926,51929,51931,51933,51936,51938,52239],[11,51924,51920],{"id":51925},"tiltshift",[15,51927,51928],{},"Selective focus blur mimicking tilt-shift photography",[26901,51930],{"component":51920},[23,51932,26905],{"id":21503},[26907,51934],{":props":51935},"[{\"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,51937,26913],{"id":26912},[217,51939,51940,51996,52055,52111,52169],{":tabs":1543},[43,51941,51943],{"className":45,"code":51942,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,51944,51945,51953,51960,51968,51972,51980,51988],{"__ignoreMap":48},[52,51946,51947,51949,51951],{"class":54,"line":55},[52,51948,59],{"class":58},[52,51950,63],{"class":62},[52,51952,77],{"class":58},[52,51954,51955,51957],{"class":54,"line":80},[52,51956,83],{"class":58},[52,51958,51959],{"class":62},"TiltShift\n",[52,51961,51962,51964,51966],{"class":54,"line":108},[52,51963,17870],{"class":66},[52,51965,70],{"class":58},[52,51967,28216],{"class":73},[52,51969,51970],{"class":54,"line":118},[52,51971,26949],{"class":58},[52,51973,51974,51976,51978],{"class":54,"line":594},[52,51975,2213],{"class":58},[52,51977,2216],{"class":62},[52,51979,105],{"class":58},[52,51981,51982,51984,51986],{"class":54,"line":600},[52,51983,2230],{"class":58},[52,51985,51920],{"class":62},[52,51987,77],{"class":58},[52,51989,51990,51992,51994],{"class":54,"line":606},[52,51991,121],{"class":58},[52,51993,63],{"class":62},[52,51995,77],{"class":58},[43,51997,51999],{"className":360,"code":51998,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,52000,52001,52009,52015,52027,52031,52039,52047],{"__ignoreMap":48},[52,52002,52003,52005,52007],{"class":54,"line":55},[52,52004,59],{"class":58},[52,52006,63],{"class":371},[52,52008,77],{"class":58},[52,52010,52011,52013],{"class":54,"line":80},[52,52012,83],{"class":58},[52,52014,51959],{"class":371},[52,52016,52017,52019,52021,52023,52025],{"class":54,"line":108},[52,52018,17981],{"class":66},[52,52020,70],{"class":231},[52,52022,723],{"class":58},[52,52024,28274],{"class":371},[52,52026,729],{"class":58},[52,52028,52029],{"class":54,"line":118},[52,52030,26949],{"class":58},[52,52032,52033,52035,52037],{"class":54,"line":594},[52,52034,2213],{"class":58},[52,52036,2216],{"class":371},[52,52038,105],{"class":58},[52,52040,52041,52043,52045],{"class":54,"line":600},[52,52042,2230],{"class":58},[52,52044,51920],{"class":371},[52,52046,77],{"class":58},[52,52048,52049,52051,52053],{"class":54,"line":606},[52,52050,121],{"class":58},[52,52052,63],{"class":371},[52,52054,77],{"class":58},[43,52056,52057],{"className":2507,"code":51998,"language":2509,"meta":48,"style":48},[31,52058,52059,52067,52073,52083,52087,52095,52103],{"__ignoreMap":48},[52,52060,52061,52063,52065],{"class":54,"line":55},[52,52062,59],{"class":58},[52,52064,63],{"class":371},[52,52066,77],{"class":58},[52,52068,52069,52071],{"class":54,"line":80},[52,52070,83],{"class":58},[52,52072,51959],{"class":371},[52,52074,52075,52077,52079,52081],{"class":54,"line":108},[52,52076,17981],{"class":66},[52,52078,24845],{"class":58},[52,52080,28274],{"class":371},[52,52082,729],{"class":58},[52,52084,52085],{"class":54,"line":118},[52,52086,26949],{"class":58},[52,52088,52089,52091,52093],{"class":54,"line":594},[52,52090,2213],{"class":58},[52,52092,2216],{"class":371},[52,52094,105],{"class":58},[52,52096,52097,52099,52101],{"class":54,"line":600},[52,52098,2230],{"class":58},[52,52100,51920],{"class":371},[52,52102,77],{"class":58},[52,52104,52105,52107,52109],{"class":54,"line":606},[52,52106,121],{"class":58},[52,52108,63],{"class":371},[52,52110,77],{"class":58},[43,52112,52113],{"className":419,"code":51998,"language":420,"meta":48,"style":48},[31,52114,52115,52123,52129,52141,52145,52153,52161],{"__ignoreMap":48},[52,52116,52117,52119,52121],{"class":54,"line":55},[52,52118,59],{"class":58},[52,52120,63],{"class":371},[52,52122,77],{"class":58},[52,52124,52125,52127],{"class":54,"line":80},[52,52126,83],{"class":58},[52,52128,51959],{"class":371},[52,52130,52131,52133,52135,52137,52139],{"class":54,"line":108},[52,52132,17981],{"class":66},[52,52134,70],{"class":231},[52,52136,723],{"class":58},[52,52138,28274],{"class":371},[52,52140,729],{"class":58},[52,52142,52143],{"class":54,"line":118},[52,52144,26949],{"class":58},[52,52146,52147,52149,52151],{"class":54,"line":594},[52,52148,2213],{"class":58},[52,52150,2216],{"class":371},[52,52152,105],{"class":58},[52,52154,52155,52157,52159],{"class":54,"line":600},[52,52156,2230],{"class":58},[52,52158,51920],{"class":371},[52,52160,77],{"class":58},[52,52162,52163,52165,52167],{"class":54,"line":606},[52,52164,121],{"class":58},[52,52166,63],{"class":371},[52,52168,77],{"class":58},[43,52170,52172],{"className":222,"code":52171,"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,52173,52174,52184,52188,52202,52206,52219,52227,52231,52235],{"__ignoreMap":48},[52,52175,52176,52178,52180,52182],{"class":54,"line":55},[52,52177,232],{"class":231},[52,52179,9231],{"class":58},[52,52181,238],{"class":231},[52,52183,9236],{"class":73},[52,52185,52186],{"class":54,"line":80},[52,52187,597],{"emptyLinePlaceholder":171},[52,52189,52190,52192,52194,52196,52198,52200],{"class":54,"line":108},[52,52191,1721],{"class":231},[52,52193,1724],{"class":371},[52,52195,1727],{"class":231},[52,52197,1730],{"class":231},[52,52199,1733],{"class":66},[52,52201,1736],{"class":58},[52,52203,52204],{"class":54,"line":118},[52,52205,1751],{"class":58},[52,52207,52208,52210,52213,52215,52217],{"class":54,"line":594},[52,52209,1756],{"class":58},[52,52211,52212],{"class":73},"'TiltShift'",[52,52214,27194],{"class":58},[52,52216,28274],{"class":371},[52,52218,5259],{"class":58},[52,52220,52221,52223,52225],{"class":54,"line":600},[52,52222,4727],{"class":58},[52,52224,2869],{"class":73},[52,52226,2129],{"class":58},[52,52228,52229],{"class":54,"line":606},[52,52230,4744],{"class":58},[52,52232,52233],{"class":54,"line":653},[52,52234,1773],{"class":58},[52,52236,52237],{"class":54,"line":662},[52,52238,1778],{"class":58},[156,52240,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52242},[52243,52244],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tiltshift",{"title":51920,"description":51928},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":52251,"title":52252,"body":52253,"category":28771,"componentType":20848,"description":52260,"extension":168,"meta":52568,"navigation":171,"path":52569,"requiresChild":171,"seo":52570,"stem":52571,"__hash__":52572},"components/docs/components/Tint.md","Tint",{"type":8,"value":52254,"toc":52564},[52255,52258,52261,52263,52265,52268,52270,52562],[11,52256,52252],{"id":52257},"tint",[15,52259,52260],{},"Apply a color tint to the image",[26901,52262],{"component":52252},[23,52264,26905],{"id":21503},[26907,52266],{":props":52267},"[{\"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,52269,26913],{"id":26912},[217,52271,52272,52329,52383,52437,52491],{":tabs":1543},[43,52273,52275],{"className":45,"code":52274,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,52276,52277,52285,52292,52301,52305,52313,52321],{"__ignoreMap":48},[52,52278,52279,52281,52283],{"class":54,"line":55},[52,52280,59],{"class":58},[52,52282,63],{"class":62},[52,52284,77],{"class":58},[52,52286,52287,52289],{"class":54,"line":80},[52,52288,83],{"class":58},[52,52290,52291],{"class":62},"Tint\n",[52,52293,52294,52296,52298],{"class":54,"line":108},[52,52295,7351],{"class":66},[52,52297,70],{"class":58},[52,52299,52300],{"class":73},"\"#ff8800\"\n",[52,52302,52303],{"class":54,"line":118},[52,52304,26949],{"class":58},[52,52306,52307,52309,52311],{"class":54,"line":594},[52,52308,2213],{"class":58},[52,52310,2216],{"class":62},[52,52312,105],{"class":58},[52,52314,52315,52317,52319],{"class":54,"line":600},[52,52316,2230],{"class":58},[52,52318,52252],{"class":62},[52,52320,77],{"class":58},[52,52322,52323,52325,52327],{"class":54,"line":606},[52,52324,121],{"class":58},[52,52326,63],{"class":62},[52,52328,77],{"class":58},[43,52330,52331],{"className":360,"code":52274,"language":362,"meta":48,"style":48},[31,52332,52333,52341,52347,52355,52359,52367,52375],{"__ignoreMap":48},[52,52334,52335,52337,52339],{"class":54,"line":55},[52,52336,59],{"class":58},[52,52338,63],{"class":371},[52,52340,77],{"class":58},[52,52342,52343,52345],{"class":54,"line":80},[52,52344,83],{"class":58},[52,52346,52291],{"class":371},[52,52348,52349,52351,52353],{"class":54,"line":108},[52,52350,7351],{"class":66},[52,52352,70],{"class":231},[52,52354,52300],{"class":73},[52,52356,52357],{"class":54,"line":118},[52,52358,26949],{"class":58},[52,52360,52361,52363,52365],{"class":54,"line":594},[52,52362,2213],{"class":58},[52,52364,2216],{"class":371},[52,52366,105],{"class":58},[52,52368,52369,52371,52373],{"class":54,"line":600},[52,52370,2230],{"class":58},[52,52372,52252],{"class":371},[52,52374,77],{"class":58},[52,52376,52377,52379,52381],{"class":54,"line":606},[52,52378,121],{"class":58},[52,52380,63],{"class":371},[52,52382,77],{"class":58},[43,52384,52385],{"className":2507,"code":52274,"language":2509,"meta":48,"style":48},[31,52386,52387,52395,52401,52409,52413,52421,52429],{"__ignoreMap":48},[52,52388,52389,52391,52393],{"class":54,"line":55},[52,52390,59],{"class":58},[52,52392,63],{"class":371},[52,52394,77],{"class":58},[52,52396,52397,52399],{"class":54,"line":80},[52,52398,83],{"class":58},[52,52400,52291],{"class":371},[52,52402,52403,52405,52407],{"class":54,"line":108},[52,52404,7351],{"class":66},[52,52406,70],{"class":58},[52,52408,52300],{"class":73},[52,52410,52411],{"class":54,"line":118},[52,52412,26949],{"class":58},[52,52414,52415,52417,52419],{"class":54,"line":594},[52,52416,2213],{"class":58},[52,52418,2216],{"class":371},[52,52420,105],{"class":58},[52,52422,52423,52425,52427],{"class":54,"line":600},[52,52424,2230],{"class":58},[52,52426,52252],{"class":371},[52,52428,77],{"class":58},[52,52430,52431,52433,52435],{"class":54,"line":606},[52,52432,121],{"class":58},[52,52434,63],{"class":371},[52,52436,77],{"class":58},[43,52438,52439],{"className":419,"code":52274,"language":420,"meta":48,"style":48},[31,52440,52441,52449,52455,52463,52467,52475,52483],{"__ignoreMap":48},[52,52442,52443,52445,52447],{"class":54,"line":55},[52,52444,59],{"class":58},[52,52446,63],{"class":371},[52,52448,77],{"class":58},[52,52450,52451,52453],{"class":54,"line":80},[52,52452,83],{"class":58},[52,52454,52291],{"class":371},[52,52456,52457,52459,52461],{"class":54,"line":108},[52,52458,7351],{"class":66},[52,52460,70],{"class":231},[52,52462,52300],{"class":73},[52,52464,52465],{"class":54,"line":118},[52,52466,26949],{"class":58},[52,52468,52469,52471,52473],{"class":54,"line":594},[52,52470,2213],{"class":58},[52,52472,2216],{"class":371},[52,52474,105],{"class":58},[52,52476,52477,52479,52481],{"class":54,"line":600},[52,52478,2230],{"class":58},[52,52480,52252],{"class":371},[52,52482,77],{"class":58},[52,52484,52485,52487,52489],{"class":54,"line":606},[52,52486,121],{"class":58},[52,52488,63],{"class":371},[52,52490,77],{"class":58},[43,52492,52494],{"className":222,"code":52493,"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,52495,52496,52506,52510,52524,52528,52542,52550,52554,52558],{"__ignoreMap":48},[52,52497,52498,52500,52502,52504],{"class":54,"line":55},[52,52499,232],{"class":231},[52,52501,9231],{"class":58},[52,52503,238],{"class":231},[52,52505,9236],{"class":73},[52,52507,52508],{"class":54,"line":80},[52,52509,597],{"emptyLinePlaceholder":171},[52,52511,52512,52514,52516,52518,52520,52522],{"class":54,"line":108},[52,52513,1721],{"class":231},[52,52515,1724],{"class":371},[52,52517,1727],{"class":231},[52,52519,1730],{"class":231},[52,52521,1733],{"class":66},[52,52523,1736],{"class":58},[52,52525,52526],{"class":54,"line":118},[52,52527,1751],{"class":58},[52,52529,52530,52532,52535,52537,52540],{"class":54,"line":594},[52,52531,1756],{"class":58},[52,52533,52534],{"class":73},"'Tint'",[52,52536,1762],{"class":58},[52,52538,52539],{"class":73},"'#ff8800'",[52,52541,5259],{"class":58},[52,52543,52544,52546,52548],{"class":54,"line":600},[52,52545,4727],{"class":58},[52,52547,2869],{"class":73},[52,52549,2129],{"class":58},[52,52551,52552],{"class":54,"line":606},[52,52553,4744],{"class":58},[52,52555,52556],{"class":54,"line":653},[52,52557,1773],{"class":58},[52,52559,52560],{"class":54,"line":662},[52,52561,1778],{"class":58},[156,52563,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52565},[52566,52567],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tint",{"title":52252,"description":52260},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":52574,"title":52575,"body":52576,"category":30727,"componentType":20842,"description":52583,"extension":168,"meta":52813,"navigation":171,"path":52814,"requiresChild":27763,"seo":52815,"stem":52816,"__hash__":52817},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":52577,"toc":52809},[52578,52581,52584,52586,52588,52591,52593,52807],[11,52579,52575],{"id":52580},"trapezoid",[15,52582,52583],{},"Trapezoid with adjustable top and bottom widths and height",[26901,52585],{"component":52575},[23,52587,26905],{"id":21503},[26907,52589],{":props":52590},"[{\"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,52592,26913],{"id":26912},[217,52594,52595,52635,52673,52711,52749],{":tabs":1543},[43,52596,52598],{"className":45,"code":52597,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,52599,52600,52608,52615,52623,52627],{"__ignoreMap":48},[52,52601,52602,52604,52606],{"class":54,"line":55},[52,52603,59],{"class":58},[52,52605,63],{"class":62},[52,52607,77],{"class":58},[52,52609,52610,52612],{"class":54,"line":80},[52,52611,83],{"class":58},[52,52613,52614],{"class":62},"Trapezoid\n",[52,52616,52617,52619,52621],{"class":54,"line":108},[52,52618,7351],{"class":66},[52,52620,70],{"class":58},[52,52622,7307],{"class":73},[52,52624,52625],{"class":54,"line":118},[52,52626,1224],{"class":58},[52,52628,52629,52631,52633],{"class":54,"line":594},[52,52630,121],{"class":58},[52,52632,63],{"class":62},[52,52634,77],{"class":58},[43,52636,52637],{"className":360,"code":52597,"language":362,"meta":48,"style":48},[31,52638,52639,52647,52653,52661,52665],{"__ignoreMap":48},[52,52640,52641,52643,52645],{"class":54,"line":55},[52,52642,59],{"class":58},[52,52644,63],{"class":371},[52,52646,77],{"class":58},[52,52648,52649,52651],{"class":54,"line":80},[52,52650,83],{"class":58},[52,52652,52614],{"class":371},[52,52654,52655,52657,52659],{"class":54,"line":108},[52,52656,7351],{"class":66},[52,52658,70],{"class":231},[52,52660,7307],{"class":73},[52,52662,52663],{"class":54,"line":118},[52,52664,1224],{"class":58},[52,52666,52667,52669,52671],{"class":54,"line":594},[52,52668,121],{"class":58},[52,52670,63],{"class":371},[52,52672,77],{"class":58},[43,52674,52675],{"className":2507,"code":52597,"language":2509,"meta":48,"style":48},[31,52676,52677,52685,52691,52699,52703],{"__ignoreMap":48},[52,52678,52679,52681,52683],{"class":54,"line":55},[52,52680,59],{"class":58},[52,52682,63],{"class":371},[52,52684,77],{"class":58},[52,52686,52687,52689],{"class":54,"line":80},[52,52688,83],{"class":58},[52,52690,52614],{"class":371},[52,52692,52693,52695,52697],{"class":54,"line":108},[52,52694,7351],{"class":66},[52,52696,70],{"class":58},[52,52698,7307],{"class":73},[52,52700,52701],{"class":54,"line":118},[52,52702,1224],{"class":58},[52,52704,52705,52707,52709],{"class":54,"line":594},[52,52706,121],{"class":58},[52,52708,63],{"class":371},[52,52710,77],{"class":58},[43,52712,52713],{"className":419,"code":52597,"language":420,"meta":48,"style":48},[31,52714,52715,52723,52729,52737,52741],{"__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],{"class":54,"line":80},[52,52726,83],{"class":58},[52,52728,52614],{"class":371},[52,52730,52731,52733,52735],{"class":54,"line":108},[52,52732,7351],{"class":66},[52,52734,70],{"class":231},[52,52736,7307],{"class":73},[52,52738,52739],{"class":54,"line":118},[52,52740,1224],{"class":58},[52,52742,52743,52745,52747],{"class":54,"line":594},[52,52744,121],{"class":58},[52,52746,63],{"class":371},[52,52748,77],{"class":58},[43,52750,52752],{"className":222,"code":52751,"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,52753,52754,52764,52768,52782,52786,52799,52803],{"__ignoreMap":48},[52,52755,52756,52758,52760,52762],{"class":54,"line":55},[52,52757,232],{"class":231},[52,52759,9231],{"class":58},[52,52761,238],{"class":231},[52,52763,9236],{"class":73},[52,52765,52766],{"class":54,"line":80},[52,52767,597],{"emptyLinePlaceholder":171},[52,52769,52770,52772,52774,52776,52778,52780],{"class":54,"line":108},[52,52771,1721],{"class":231},[52,52773,1724],{"class":371},[52,52775,1727],{"class":231},[52,52777,1730],{"class":231},[52,52779,1733],{"class":66},[52,52781,1736],{"class":58},[52,52783,52784],{"class":54,"line":118},[52,52785,1751],{"class":58},[52,52787,52788,52790,52793,52795,52797],{"class":54,"line":594},[52,52789,1756],{"class":58},[52,52791,52792],{"class":73},"'Trapezoid'",[52,52794,1762],{"class":58},[52,52796,7886],{"class":73},[52,52798,1768],{"class":58},[52,52800,52801],{"class":54,"line":600},[52,52802,1773],{"class":58},[52,52804,52805],{"class":54,"line":606},[52,52806,1778],{"class":58},[156,52808,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52810},[52811,52812],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/trapezoid",{"title":52575,"description":52583},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":52819,"title":52820,"body":52821,"category":28771,"componentType":20848,"description":52828,"extension":168,"meta":53089,"navigation":171,"path":53090,"requiresChild":171,"seo":53091,"stem":53092,"__hash__":53093},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":52822,"toc":53085},[52823,52826,52829,52831,52833,52836,52838,53083],[11,52824,52820],{"id":52825},"tritone",[15,52827,52828],{},"Map colors to three tones: shadows, midtones, highlights",[26901,52830],{"component":52820},[23,52832,26905],{"id":21503},[26907,52834],{":props":52835},"[{\"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,52837,26913],{"id":26912},[217,52839,52840,52885,52929,52973,53017],{":tabs":1543},[43,52841,52843],{"className":45,"code":52842,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,52844,52845,52853,52861,52869,52877],{"__ignoreMap":48},[52,52846,52847,52849,52851],{"class":54,"line":55},[52,52848,59],{"class":58},[52,52850,63],{"class":62},[52,52852,77],{"class":58},[52,52854,52855,52857,52859],{"class":54,"line":80},[52,52856,83],{"class":58},[52,52858,52820],{"class":62},[52,52860,77],{"class":58},[52,52862,52863,52865,52867],{"class":54,"line":108},[52,52864,2213],{"class":58},[52,52866,2216],{"class":62},[52,52868,105],{"class":58},[52,52870,52871,52873,52875],{"class":54,"line":118},[52,52872,2230],{"class":58},[52,52874,52820],{"class":62},[52,52876,77],{"class":58},[52,52878,52879,52881,52883],{"class":54,"line":594},[52,52880,121],{"class":58},[52,52882,63],{"class":62},[52,52884,77],{"class":58},[43,52886,52887],{"className":360,"code":52842,"language":362,"meta":48,"style":48},[31,52888,52889,52897,52905,52913,52921],{"__ignoreMap":48},[52,52890,52891,52893,52895],{"class":54,"line":55},[52,52892,59],{"class":58},[52,52894,63],{"class":371},[52,52896,77],{"class":58},[52,52898,52899,52901,52903],{"class":54,"line":80},[52,52900,83],{"class":58},[52,52902,52820],{"class":371},[52,52904,77],{"class":58},[52,52906,52907,52909,52911],{"class":54,"line":108},[52,52908,2213],{"class":58},[52,52910,2216],{"class":371},[52,52912,105],{"class":58},[52,52914,52915,52917,52919],{"class":54,"line":118},[52,52916,2230],{"class":58},[52,52918,52820],{"class":371},[52,52920,77],{"class":58},[52,52922,52923,52925,52927],{"class":54,"line":594},[52,52924,121],{"class":58},[52,52926,63],{"class":371},[52,52928,77],{"class":58},[43,52930,52931],{"className":2507,"code":52842,"language":2509,"meta":48,"style":48},[31,52932,52933,52941,52949,52957,52965],{"__ignoreMap":48},[52,52934,52935,52937,52939],{"class":54,"line":55},[52,52936,59],{"class":58},[52,52938,63],{"class":371},[52,52940,77],{"class":58},[52,52942,52943,52945,52947],{"class":54,"line":80},[52,52944,83],{"class":58},[52,52946,52820],{"class":371},[52,52948,77],{"class":58},[52,52950,52951,52953,52955],{"class":54,"line":108},[52,52952,2213],{"class":58},[52,52954,2216],{"class":371},[52,52956,105],{"class":58},[52,52958,52959,52961,52963],{"class":54,"line":118},[52,52960,2230],{"class":58},[52,52962,52820],{"class":371},[52,52964,77],{"class":58},[52,52966,52967,52969,52971],{"class":54,"line":594},[52,52968,121],{"class":58},[52,52970,63],{"class":371},[52,52972,77],{"class":58},[43,52974,52975],{"className":419,"code":52842,"language":420,"meta":48,"style":48},[31,52976,52977,52985,52993,53001,53009],{"__ignoreMap":48},[52,52978,52979,52981,52983],{"class":54,"line":55},[52,52980,59],{"class":58},[52,52982,63],{"class":371},[52,52984,77],{"class":58},[52,52986,52987,52989,52991],{"class":54,"line":80},[52,52988,83],{"class":58},[52,52990,52820],{"class":371},[52,52992,77],{"class":58},[52,52994,52995,52997,52999],{"class":54,"line":108},[52,52996,2213],{"class":58},[52,52998,2216],{"class":371},[52,53000,105],{"class":58},[52,53002,53003,53005,53007],{"class":54,"line":118},[52,53004,2230],{"class":58},[52,53006,52820],{"class":371},[52,53008,77],{"class":58},[52,53010,53011,53013,53015],{"class":54,"line":594},[52,53012,121],{"class":58},[52,53014,63],{"class":371},[52,53016,77],{"class":58},[43,53018,53020],{"className":222,"code":53019,"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,53021,53022,53032,53036,53050,53054,53063,53071,53075,53079],{"__ignoreMap":48},[52,53023,53024,53026,53028,53030],{"class":54,"line":55},[52,53025,232],{"class":231},[52,53027,9231],{"class":58},[52,53029,238],{"class":231},[52,53031,9236],{"class":73},[52,53033,53034],{"class":54,"line":80},[52,53035,597],{"emptyLinePlaceholder":171},[52,53037,53038,53040,53042,53044,53046,53048],{"class":54,"line":108},[52,53039,1721],{"class":231},[52,53041,1724],{"class":371},[52,53043,1727],{"class":231},[52,53045,1730],{"class":231},[52,53047,1733],{"class":66},[52,53049,1736],{"class":58},[52,53051,53052],{"class":54,"line":118},[52,53053,1751],{"class":58},[52,53055,53056,53058,53061],{"class":54,"line":594},[52,53057,1756],{"class":58},[52,53059,53060],{"class":73},"'Tritone'",[52,53062,4722],{"class":58},[52,53064,53065,53067,53069],{"class":54,"line":600},[52,53066,4727],{"class":58},[52,53068,2869],{"class":73},[52,53070,2129],{"class":58},[52,53072,53073],{"class":54,"line":606},[52,53074,4744],{"class":58},[52,53076,53077],{"class":54,"line":653},[52,53078,1773],{"class":58},[52,53080,53081],{"class":54,"line":662},[52,53082,1778],{"class":58},[156,53084,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53086},[53087,53088],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tritone",{"title":52820,"description":52828},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":53095,"title":53096,"body":53097,"category":27760,"componentType":20842,"description":53104,"extension":168,"meta":53289,"navigation":171,"path":53290,"requiresChild":27763,"seo":53291,"stem":53292,"__hash__":53293},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":53098,"toc":53285},[53099,53102,53105,53107,53109,53112,53114,53283],[11,53100,53096],{"id":53101},"truchet",[15,53103,53104],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26901,53106],{"component":53096},[23,53108,26905],{"id":21503},[26907,53110],{":props":53111},"[{\"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,53113,26913],{"id":26912},[217,53115,53116,53145,53173,53201,53229],{":tabs":1543},[43,53117,53119],{"className":45,"code":53118,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,53120,53121,53129,53137],{"__ignoreMap":48},[52,53122,53123,53125,53127],{"class":54,"line":55},[52,53124,59],{"class":58},[52,53126,63],{"class":62},[52,53128,77],{"class":58},[52,53130,53131,53133,53135],{"class":54,"line":80},[52,53132,83],{"class":58},[52,53134,53096],{"class":62},[52,53136,105],{"class":58},[52,53138,53139,53141,53143],{"class":54,"line":108},[52,53140,121],{"class":58},[52,53142,63],{"class":62},[52,53144,77],{"class":58},[43,53146,53147],{"className":360,"code":53118,"language":362,"meta":48,"style":48},[31,53148,53149,53157,53165],{"__ignoreMap":48},[52,53150,53151,53153,53155],{"class":54,"line":55},[52,53152,59],{"class":58},[52,53154,63],{"class":371},[52,53156,77],{"class":58},[52,53158,53159,53161,53163],{"class":54,"line":80},[52,53160,83],{"class":58},[52,53162,53096],{"class":371},[52,53164,105],{"class":58},[52,53166,53167,53169,53171],{"class":54,"line":108},[52,53168,121],{"class":58},[52,53170,63],{"class":371},[52,53172,77],{"class":58},[43,53174,53175],{"className":2507,"code":53118,"language":2509,"meta":48,"style":48},[31,53176,53177,53185,53193],{"__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,53191],{"class":54,"line":80},[52,53188,83],{"class":58},[52,53190,53096],{"class":371},[52,53192,105],{"class":58},[52,53194,53195,53197,53199],{"class":54,"line":108},[52,53196,121],{"class":58},[52,53198,63],{"class":371},[52,53200,77],{"class":58},[43,53202,53203],{"className":419,"code":53118,"language":420,"meta":48,"style":48},[31,53204,53205,53213,53221],{"__ignoreMap":48},[52,53206,53207,53209,53211],{"class":54,"line":55},[52,53208,59],{"class":58},[52,53210,63],{"class":371},[52,53212,77],{"class":58},[52,53214,53215,53217,53219],{"class":54,"line":80},[52,53216,83],{"class":58},[52,53218,53096],{"class":371},[52,53220,105],{"class":58},[52,53222,53223,53225,53227],{"class":54,"line":108},[52,53224,121],{"class":58},[52,53226,63],{"class":371},[52,53228,77],{"class":58},[43,53230,53232],{"className":222,"code":53231,"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,53233,53234,53244,53248,53262,53266,53275,53279],{"__ignoreMap":48},[52,53235,53236,53238,53240,53242],{"class":54,"line":55},[52,53237,232],{"class":231},[52,53239,9231],{"class":58},[52,53241,238],{"class":231},[52,53243,9236],{"class":73},[52,53245,53246],{"class":54,"line":80},[52,53247,597],{"emptyLinePlaceholder":171},[52,53249,53250,53252,53254,53256,53258,53260],{"class":54,"line":108},[52,53251,1721],{"class":231},[52,53253,1724],{"class":371},[52,53255,1727],{"class":231},[52,53257,1730],{"class":231},[52,53259,1733],{"class":66},[52,53261,1736],{"class":58},[52,53263,53264],{"class":54,"line":118},[52,53265,1751],{"class":58},[52,53267,53268,53270,53273],{"class":54,"line":594},[52,53269,1756],{"class":58},[52,53271,53272],{"class":73},"'Truchet'",[52,53274,2129],{"class":58},[52,53276,53277],{"class":54,"line":600},[52,53278,1773],{"class":58},[52,53280,53281],{"class":54,"line":606},[52,53282,1778],{"class":58},[156,53284,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53286},[53287,53288],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/truchet",{"title":53096,"description":53104},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":53295,"title":53296,"body":53297,"category":29105,"componentType":20848,"description":53304,"extension":168,"meta":53621,"navigation":171,"path":53622,"requiresChild":171,"seo":53623,"stem":53624,"__hash__":53625},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":53298,"toc":53617},[53299,53302,53305,53307,53309,53312,53314,53615],[11,53300,53296],{"id":53301},"twirl",[15,53303,53304],{},"Rotate and twist content around a center point",[26901,53306],{"component":53296},[23,53308,26905],{"id":21503},[26907,53310],{":props":53311},"[{\"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,53313,26913],{"id":26912},[217,53315,53316,53372,53431,53487,53545],{":tabs":1543},[43,53317,53319],{"className":45,"code":53318,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,53320,53321,53329,53336,53344,53348,53356,53364],{"__ignoreMap":48},[52,53322,53323,53325,53327],{"class":54,"line":55},[52,53324,59],{"class":58},[52,53326,63],{"class":62},[52,53328,77],{"class":58},[52,53330,53331,53333],{"class":54,"line":80},[52,53332,83],{"class":58},[52,53334,53335],{"class":62},"Twirl\n",[52,53337,53338,53340,53342],{"class":54,"line":108},[52,53339,17870],{"class":66},[52,53341,70],{"class":58},[52,53343,28827],{"class":73},[52,53345,53346],{"class":54,"line":118},[52,53347,26949],{"class":58},[52,53349,53350,53352,53354],{"class":54,"line":594},[52,53351,2213],{"class":58},[52,53353,2216],{"class":62},[52,53355,105],{"class":58},[52,53357,53358,53360,53362],{"class":54,"line":600},[52,53359,2230],{"class":58},[52,53361,53296],{"class":62},[52,53363,77],{"class":58},[52,53365,53366,53368,53370],{"class":54,"line":606},[52,53367,121],{"class":58},[52,53369,63],{"class":62},[52,53371,77],{"class":58},[43,53373,53375],{"className":360,"code":53374,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,53376,53377,53385,53391,53403,53407,53415,53423],{"__ignoreMap":48},[52,53378,53379,53381,53383],{"class":54,"line":55},[52,53380,59],{"class":58},[52,53382,63],{"class":371},[52,53384,77],{"class":58},[52,53386,53387,53389],{"class":54,"line":80},[52,53388,83],{"class":58},[52,53390,53335],{"class":371},[52,53392,53393,53395,53397,53399,53401],{"class":54,"line":108},[52,53394,17981],{"class":66},[52,53396,70],{"class":231},[52,53398,723],{"class":58},[52,53400,6391],{"class":371},[52,53402,729],{"class":58},[52,53404,53405],{"class":54,"line":118},[52,53406,26949],{"class":58},[52,53408,53409,53411,53413],{"class":54,"line":594},[52,53410,2213],{"class":58},[52,53412,2216],{"class":371},[52,53414,105],{"class":58},[52,53416,53417,53419,53421],{"class":54,"line":600},[52,53418,2230],{"class":58},[52,53420,53296],{"class":371},[52,53422,77],{"class":58},[52,53424,53425,53427,53429],{"class":54,"line":606},[52,53426,121],{"class":58},[52,53428,63],{"class":371},[52,53430,77],{"class":58},[43,53432,53433],{"className":2507,"code":53374,"language":2509,"meta":48,"style":48},[31,53434,53435,53443,53449,53459,53463,53471,53479],{"__ignoreMap":48},[52,53436,53437,53439,53441],{"class":54,"line":55},[52,53438,59],{"class":58},[52,53440,63],{"class":371},[52,53442,77],{"class":58},[52,53444,53445,53447],{"class":54,"line":80},[52,53446,83],{"class":58},[52,53448,53335],{"class":371},[52,53450,53451,53453,53455,53457],{"class":54,"line":108},[52,53452,17981],{"class":66},[52,53454,24845],{"class":58},[52,53456,6391],{"class":371},[52,53458,729],{"class":58},[52,53460,53461],{"class":54,"line":118},[52,53462,26949],{"class":58},[52,53464,53465,53467,53469],{"class":54,"line":594},[52,53466,2213],{"class":58},[52,53468,2216],{"class":371},[52,53470,105],{"class":58},[52,53472,53473,53475,53477],{"class":54,"line":600},[52,53474,2230],{"class":58},[52,53476,53296],{"class":371},[52,53478,77],{"class":58},[52,53480,53481,53483,53485],{"class":54,"line":606},[52,53482,121],{"class":58},[52,53484,63],{"class":371},[52,53486,77],{"class":58},[43,53488,53489],{"className":419,"code":53374,"language":420,"meta":48,"style":48},[31,53490,53491,53499,53505,53517,53521,53529,53537],{"__ignoreMap":48},[52,53492,53493,53495,53497],{"class":54,"line":55},[52,53494,59],{"class":58},[52,53496,63],{"class":371},[52,53498,77],{"class":58},[52,53500,53501,53503],{"class":54,"line":80},[52,53502,83],{"class":58},[52,53504,53335],{"class":371},[52,53506,53507,53509,53511,53513,53515],{"class":54,"line":108},[52,53508,17981],{"class":66},[52,53510,70],{"class":231},[52,53512,723],{"class":58},[52,53514,6391],{"class":371},[52,53516,729],{"class":58},[52,53518,53519],{"class":54,"line":118},[52,53520,26949],{"class":58},[52,53522,53523,53525,53527],{"class":54,"line":594},[52,53524,2213],{"class":58},[52,53526,2216],{"class":371},[52,53528,105],{"class":58},[52,53530,53531,53533,53535],{"class":54,"line":600},[52,53532,2230],{"class":58},[52,53534,53296],{"class":371},[52,53536,77],{"class":58},[52,53538,53539,53541,53543],{"class":54,"line":606},[52,53540,121],{"class":58},[52,53542,63],{"class":371},[52,53544,77],{"class":58},[43,53546,53548],{"className":222,"code":53547,"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,53549,53550,53560,53564,53578,53582,53595,53603,53607,53611],{"__ignoreMap":48},[52,53551,53552,53554,53556,53558],{"class":54,"line":55},[52,53553,232],{"class":231},[52,53555,9231],{"class":58},[52,53557,238],{"class":231},[52,53559,9236],{"class":73},[52,53561,53562],{"class":54,"line":80},[52,53563,597],{"emptyLinePlaceholder":171},[52,53565,53566,53568,53570,53572,53574,53576],{"class":54,"line":108},[52,53567,1721],{"class":231},[52,53569,1724],{"class":371},[52,53571,1727],{"class":231},[52,53573,1730],{"class":231},[52,53575,1733],{"class":66},[52,53577,1736],{"class":58},[52,53579,53580],{"class":54,"line":118},[52,53581,1751],{"class":58},[52,53583,53584,53586,53589,53591,53593],{"class":54,"line":594},[52,53585,1756],{"class":58},[52,53587,53588],{"class":73},"'Twirl'",[52,53590,27194],{"class":58},[52,53592,6391],{"class":371},[52,53594,5259],{"class":58},[52,53596,53597,53599,53601],{"class":54,"line":600},[52,53598,4727],{"class":58},[52,53600,2869],{"class":73},[52,53602,2129],{"class":58},[52,53604,53605],{"class":54,"line":606},[52,53606,4744],{"class":58},[52,53608,53609],{"class":54,"line":653},[52,53610,1773],{"class":58},[52,53612,53613],{"class":54,"line":662},[52,53614,1778],{"class":58},[156,53616,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53618},[53619,53620],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/twirl",{"title":53296,"description":53304},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":53627,"title":53628,"body":53629,"category":27503,"componentType":20848,"description":53636,"extension":168,"meta":53897,"navigation":171,"path":53898,"requiresChild":171,"seo":53899,"stem":53900,"__hash__":53901},"components/docs/components/VHS.md","VHS",{"type":8,"value":53630,"toc":53893},[53631,53634,53637,53639,53641,53644,53646,53891],[11,53632,53628],{"id":53633},"vhs",[15,53635,53636],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[26901,53638],{"component":53628},[23,53640,26905],{"id":21503},[26907,53642],{":props":53643},"[{\"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,53645,26913],{"id":26912},[217,53647,53648,53693,53737,53781,53825],{":tabs":1543},[43,53649,53651],{"className":45,"code":53650,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVHS>\n \u003CCircle />\n \u003C/VHS>\n\u003C/Shader>\n",[31,53652,53653,53661,53669,53677,53685],{"__ignoreMap":48},[52,53654,53655,53657,53659],{"class":54,"line":55},[52,53656,59],{"class":58},[52,53658,63],{"class":62},[52,53660,77],{"class":58},[52,53662,53663,53665,53667],{"class":54,"line":80},[52,53664,83],{"class":58},[52,53666,53628],{"class":62},[52,53668,77],{"class":58},[52,53670,53671,53673,53675],{"class":54,"line":108},[52,53672,2213],{"class":58},[52,53674,2216],{"class":62},[52,53676,105],{"class":58},[52,53678,53679,53681,53683],{"class":54,"line":118},[52,53680,2230],{"class":58},[52,53682,53628],{"class":62},[52,53684,77],{"class":58},[52,53686,53687,53689,53691],{"class":54,"line":594},[52,53688,121],{"class":58},[52,53690,63],{"class":62},[52,53692,77],{"class":58},[43,53694,53695],{"className":360,"code":53650,"language":362,"meta":48,"style":48},[31,53696,53697,53705,53713,53721,53729],{"__ignoreMap":48},[52,53698,53699,53701,53703],{"class":54,"line":55},[52,53700,59],{"class":58},[52,53702,63],{"class":371},[52,53704,77],{"class":58},[52,53706,53707,53709,53711],{"class":54,"line":80},[52,53708,83],{"class":58},[52,53710,53628],{"class":371},[52,53712,77],{"class":58},[52,53714,53715,53717,53719],{"class":54,"line":108},[52,53716,2213],{"class":58},[52,53718,2216],{"class":371},[52,53720,105],{"class":58},[52,53722,53723,53725,53727],{"class":54,"line":118},[52,53724,2230],{"class":58},[52,53726,53628],{"class":371},[52,53728,77],{"class":58},[52,53730,53731,53733,53735],{"class":54,"line":594},[52,53732,121],{"class":58},[52,53734,63],{"class":371},[52,53736,77],{"class":58},[43,53738,53739],{"className":2507,"code":53650,"language":2509,"meta":48,"style":48},[31,53740,53741,53749,53757,53765,53773],{"__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,53755],{"class":54,"line":80},[52,53752,83],{"class":58},[52,53754,53628],{"class":371},[52,53756,77],{"class":58},[52,53758,53759,53761,53763],{"class":54,"line":108},[52,53760,2213],{"class":58},[52,53762,2216],{"class":371},[52,53764,105],{"class":58},[52,53766,53767,53769,53771],{"class":54,"line":118},[52,53768,2230],{"class":58},[52,53770,53628],{"class":371},[52,53772,77],{"class":58},[52,53774,53775,53777,53779],{"class":54,"line":594},[52,53776,121],{"class":58},[52,53778,63],{"class":371},[52,53780,77],{"class":58},[43,53782,53783],{"className":419,"code":53650,"language":420,"meta":48,"style":48},[31,53784,53785,53793,53801,53809,53817],{"__ignoreMap":48},[52,53786,53787,53789,53791],{"class":54,"line":55},[52,53788,59],{"class":58},[52,53790,63],{"class":371},[52,53792,77],{"class":58},[52,53794,53795,53797,53799],{"class":54,"line":80},[52,53796,83],{"class":58},[52,53798,53628],{"class":371},[52,53800,77],{"class":58},[52,53802,53803,53805,53807],{"class":54,"line":108},[52,53804,2213],{"class":58},[52,53806,2216],{"class":371},[52,53808,105],{"class":58},[52,53810,53811,53813,53815],{"class":54,"line":118},[52,53812,2230],{"class":58},[52,53814,53628],{"class":371},[52,53816,77],{"class":58},[52,53818,53819,53821,53823],{"class":54,"line":594},[52,53820,121],{"class":58},[52,53822,63],{"class":371},[52,53824,77],{"class":58},[43,53826,53828],{"className":222,"code":53827,"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,53829,53830,53840,53844,53858,53862,53871,53879,53883,53887],{"__ignoreMap":48},[52,53831,53832,53834,53836,53838],{"class":54,"line":55},[52,53833,232],{"class":231},[52,53835,9231],{"class":58},[52,53837,238],{"class":231},[52,53839,9236],{"class":73},[52,53841,53842],{"class":54,"line":80},[52,53843,597],{"emptyLinePlaceholder":171},[52,53845,53846,53848,53850,53852,53854,53856],{"class":54,"line":108},[52,53847,1721],{"class":231},[52,53849,1724],{"class":371},[52,53851,1727],{"class":231},[52,53853,1730],{"class":231},[52,53855,1733],{"class":66},[52,53857,1736],{"class":58},[52,53859,53860],{"class":54,"line":118},[52,53861,1751],{"class":58},[52,53863,53864,53866,53869],{"class":54,"line":594},[52,53865,1756],{"class":58},[52,53867,53868],{"class":73},"'VHS'",[52,53870,4722],{"class":58},[52,53872,53873,53875,53877],{"class":54,"line":600},[52,53874,4727],{"class":58},[52,53876,2869],{"class":73},[52,53878,2129],{"class":58},[52,53880,53881],{"class":54,"line":606},[52,53882,4744],{"class":58},[52,53884,53885],{"class":54,"line":653},[52,53886,1773],{"class":58},[52,53888,53889],{"class":54,"line":662},[52,53890,1778],{"class":58},[156,53892,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53894},[53895,53896],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vhs",{"title":53628,"description":53636},"docs/components/VHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":53903,"title":53904,"body":53905,"category":30727,"componentType":20842,"description":53912,"extension":168,"meta":54189,"navigation":171,"path":54190,"requiresChild":27763,"seo":54191,"stem":54192,"__hash__":54193},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":53906,"toc":54185},[53907,53910,53913,53915,53917,53920,53922,54183],[11,53908,53904],{"id":53909},"vesica",[15,53911,53912],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26901,53914],{"component":53904},[23,53916,26905],{"id":21503},[26907,53918],{":props":53919},"[{\"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,53921,26913],{"id":26912},[217,53923,53924,53972,54023,54071,54121],{":tabs":1543},[43,53925,53927],{"className":45,"code":53926,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,53928,53929,53937,53944,53952,53960,53964],{"__ignoreMap":48},[52,53930,53931,53933,53935],{"class":54,"line":55},[52,53932,59],{"class":58},[52,53934,63],{"class":62},[52,53936,77],{"class":58},[52,53938,53939,53941],{"class":54,"line":80},[52,53940,83],{"class":58},[52,53942,53943],{"class":62},"Vesica\n",[52,53945,53946,53948,53950],{"class":54,"line":108},[52,53947,7351],{"class":66},[52,53949,70],{"class":58},[52,53951,7307],{"class":73},[52,53953,53954,53956,53958],{"class":54,"line":118},[52,53955,14901],{"class":66},[52,53957,70],{"class":58},[52,53959,31892],{"class":73},[52,53961,53962],{"class":54,"line":594},[52,53963,1224],{"class":58},[52,53965,53966,53968,53970],{"class":54,"line":600},[52,53967,121],{"class":58},[52,53969,63],{"class":62},[52,53971,77],{"class":58},[43,53973,53975],{"className":360,"code":53974,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,53976,53977,53985,53991,53999,54011,54015],{"__ignoreMap":48},[52,53978,53979,53981,53983],{"class":54,"line":55},[52,53980,59],{"class":58},[52,53982,63],{"class":371},[52,53984,77],{"class":58},[52,53986,53987,53989],{"class":54,"line":80},[52,53988,83],{"class":58},[52,53990,53943],{"class":371},[52,53992,53993,53995,53997],{"class":54,"line":108},[52,53994,7351],{"class":66},[52,53996,70],{"class":231},[52,53998,7307],{"class":73},[52,54000,54001,54003,54005,54007,54009],{"class":54,"line":118},[52,54002,7361],{"class":66},[52,54004,70],{"class":231},[52,54006,723],{"class":58},[52,54008,18630],{"class":371},[52,54010,729],{"class":58},[52,54012,54013],{"class":54,"line":594},[52,54014,1224],{"class":58},[52,54016,54017,54019,54021],{"class":54,"line":600},[52,54018,121],{"class":58},[52,54020,63],{"class":371},[52,54022,77],{"class":58},[43,54024,54025],{"className":2507,"code":53974,"language":2509,"meta":48,"style":48},[31,54026,54027,54035,54041,54049,54059,54063],{"__ignoreMap":48},[52,54028,54029,54031,54033],{"class":54,"line":55},[52,54030,59],{"class":58},[52,54032,63],{"class":371},[52,54034,77],{"class":58},[52,54036,54037,54039],{"class":54,"line":80},[52,54038,83],{"class":58},[52,54040,53943],{"class":371},[52,54042,54043,54045,54047],{"class":54,"line":108},[52,54044,7351],{"class":66},[52,54046,70],{"class":58},[52,54048,7307],{"class":73},[52,54050,54051,54053,54055,54057],{"class":54,"line":118},[52,54052,7361],{"class":66},[52,54054,24845],{"class":58},[52,54056,18630],{"class":371},[52,54058,729],{"class":58},[52,54060,54061],{"class":54,"line":594},[52,54062,1224],{"class":58},[52,54064,54065,54067,54069],{"class":54,"line":600},[52,54066,121],{"class":58},[52,54068,63],{"class":371},[52,54070,77],{"class":58},[43,54072,54073],{"className":419,"code":53974,"language":420,"meta":48,"style":48},[31,54074,54075,54083,54089,54097,54109,54113],{"__ignoreMap":48},[52,54076,54077,54079,54081],{"class":54,"line":55},[52,54078,59],{"class":58},[52,54080,63],{"class":371},[52,54082,77],{"class":58},[52,54084,54085,54087],{"class":54,"line":80},[52,54086,83],{"class":58},[52,54088,53943],{"class":371},[52,54090,54091,54093,54095],{"class":54,"line":108},[52,54092,7351],{"class":66},[52,54094,70],{"class":231},[52,54096,7307],{"class":73},[52,54098,54099,54101,54103,54105,54107],{"class":54,"line":118},[52,54100,7361],{"class":66},[52,54102,70],{"class":231},[52,54104,723],{"class":58},[52,54106,18630],{"class":371},[52,54108,729],{"class":58},[52,54110,54111],{"class":54,"line":594},[52,54112,1224],{"class":58},[52,54114,54115,54117,54119],{"class":54,"line":600},[52,54116,121],{"class":58},[52,54118,63],{"class":371},[52,54120,77],{"class":58},[43,54122,54124],{"className":222,"code":54123,"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,54125,54126,54136,54140,54154,54158,54175,54179],{"__ignoreMap":48},[52,54127,54128,54130,54132,54134],{"class":54,"line":55},[52,54129,232],{"class":231},[52,54131,9231],{"class":58},[52,54133,238],{"class":231},[52,54135,9236],{"class":73},[52,54137,54138],{"class":54,"line":80},[52,54139,597],{"emptyLinePlaceholder":171},[52,54141,54142,54144,54146,54148,54150,54152],{"class":54,"line":108},[52,54143,1721],{"class":231},[52,54145,1724],{"class":371},[52,54147,1727],{"class":231},[52,54149,1730],{"class":231},[52,54151,1733],{"class":66},[52,54153,1736],{"class":58},[52,54155,54156],{"class":54,"line":118},[52,54157,1751],{"class":58},[52,54159,54160,54162,54165,54167,54169,54171,54173],{"class":54,"line":594},[52,54161,1756],{"class":58},[52,54163,54164],{"class":73},"'Vesica'",[52,54166,1762],{"class":58},[52,54168,7886],{"class":73},[52,54170,4278],{"class":58},[52,54172,18630],{"class":371},[52,54174,1768],{"class":58},[52,54176,54177],{"class":54,"line":600},[52,54178,1773],{"class":58},[52,54180,54181],{"class":54,"line":606},[52,54182,1778],{"class":58},[156,54184,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54186},[54187,54188],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vesica",{"title":53904,"description":53912},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":54195,"title":54196,"body":54197,"category":28771,"componentType":20848,"description":54204,"extension":168,"meta":54522,"navigation":171,"path":54523,"requiresChild":171,"seo":54524,"stem":54525,"__hash__":54526},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":54198,"toc":54518},[54199,54202,54205,54207,54209,54212,54214,54516],[11,54200,54196],{"id":54201},"vibrance",[15,54203,54204],{},"Selective saturation adjustment protecting skin tones",[26901,54206],{"component":54196},[23,54208,26905],{"id":21503},[26907,54210],{":props":54211},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,54213,26913],{"id":26912},[217,54215,54216,54273,54332,54388,54446],{":tabs":1543},[43,54217,54219],{"className":45,"code":54218,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,54220,54221,54229,54236,54245,54249,54257,54265],{"__ignoreMap":48},[52,54222,54223,54225,54227],{"class":54,"line":55},[52,54224,59],{"class":58},[52,54226,63],{"class":62},[52,54228,77],{"class":58},[52,54230,54231,54233],{"class":54,"line":80},[52,54232,83],{"class":58},[52,54234,54235],{"class":62},"Vibrance\n",[52,54237,54238,54240,54242],{"class":54,"line":108},[52,54239,17870],{"class":66},[52,54241,70],{"class":58},[52,54243,54244],{"class":73},"\"0\"\n",[52,54246,54247],{"class":54,"line":118},[52,54248,26949],{"class":58},[52,54250,54251,54253,54255],{"class":54,"line":594},[52,54252,2213],{"class":58},[52,54254,2216],{"class":62},[52,54256,105],{"class":58},[52,54258,54259,54261,54263],{"class":54,"line":600},[52,54260,2230],{"class":58},[52,54262,54196],{"class":62},[52,54264,77],{"class":58},[52,54266,54267,54269,54271],{"class":54,"line":606},[52,54268,121],{"class":58},[52,54270,63],{"class":62},[52,54272,77],{"class":58},[43,54274,54276],{"className":360,"code":54275,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,54277,54278,54286,54292,54304,54308,54316,54324],{"__ignoreMap":48},[52,54279,54280,54282,54284],{"class":54,"line":55},[52,54281,59],{"class":58},[52,54283,63],{"class":371},[52,54285,77],{"class":58},[52,54287,54288,54290],{"class":54,"line":80},[52,54289,83],{"class":58},[52,54291,54235],{"class":371},[52,54293,54294,54296,54298,54300,54302],{"class":54,"line":108},[52,54295,17981],{"class":66},[52,54297,70],{"class":231},[52,54299,723],{"class":58},[52,54301,6387],{"class":371},[52,54303,729],{"class":58},[52,54305,54306],{"class":54,"line":118},[52,54307,26949],{"class":58},[52,54309,54310,54312,54314],{"class":54,"line":594},[52,54311,2213],{"class":58},[52,54313,2216],{"class":371},[52,54315,105],{"class":58},[52,54317,54318,54320,54322],{"class":54,"line":600},[52,54319,2230],{"class":58},[52,54321,54196],{"class":371},[52,54323,77],{"class":58},[52,54325,54326,54328,54330],{"class":54,"line":606},[52,54327,121],{"class":58},[52,54329,63],{"class":371},[52,54331,77],{"class":58},[43,54333,54334],{"className":2507,"code":54275,"language":2509,"meta":48,"style":48},[31,54335,54336,54344,54350,54360,54364,54372,54380],{"__ignoreMap":48},[52,54337,54338,54340,54342],{"class":54,"line":55},[52,54339,59],{"class":58},[52,54341,63],{"class":371},[52,54343,77],{"class":58},[52,54345,54346,54348],{"class":54,"line":80},[52,54347,83],{"class":58},[52,54349,54235],{"class":371},[52,54351,54352,54354,54356,54358],{"class":54,"line":108},[52,54353,17981],{"class":66},[52,54355,24845],{"class":58},[52,54357,6387],{"class":371},[52,54359,729],{"class":58},[52,54361,54362],{"class":54,"line":118},[52,54363,26949],{"class":58},[52,54365,54366,54368,54370],{"class":54,"line":594},[52,54367,2213],{"class":58},[52,54369,2216],{"class":371},[52,54371,105],{"class":58},[52,54373,54374,54376,54378],{"class":54,"line":600},[52,54375,2230],{"class":58},[52,54377,54196],{"class":371},[52,54379,77],{"class":58},[52,54381,54382,54384,54386],{"class":54,"line":606},[52,54383,121],{"class":58},[52,54385,63],{"class":371},[52,54387,77],{"class":58},[43,54389,54390],{"className":419,"code":54275,"language":420,"meta":48,"style":48},[31,54391,54392,54400,54406,54418,54422,54430,54438],{"__ignoreMap":48},[52,54393,54394,54396,54398],{"class":54,"line":55},[52,54395,59],{"class":58},[52,54397,63],{"class":371},[52,54399,77],{"class":58},[52,54401,54402,54404],{"class":54,"line":80},[52,54403,83],{"class":58},[52,54405,54235],{"class":371},[52,54407,54408,54410,54412,54414,54416],{"class":54,"line":108},[52,54409,17981],{"class":66},[52,54411,70],{"class":231},[52,54413,723],{"class":58},[52,54415,6387],{"class":371},[52,54417,729],{"class":58},[52,54419,54420],{"class":54,"line":118},[52,54421,26949],{"class":58},[52,54423,54424,54426,54428],{"class":54,"line":594},[52,54425,2213],{"class":58},[52,54427,2216],{"class":371},[52,54429,105],{"class":58},[52,54431,54432,54434,54436],{"class":54,"line":600},[52,54433,2230],{"class":58},[52,54435,54196],{"class":371},[52,54437,77],{"class":58},[52,54439,54440,54442,54444],{"class":54,"line":606},[52,54441,121],{"class":58},[52,54443,63],{"class":371},[52,54445,77],{"class":58},[43,54447,54449],{"className":222,"code":54448,"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,54450,54451,54461,54465,54479,54483,54496,54504,54508,54512],{"__ignoreMap":48},[52,54452,54453,54455,54457,54459],{"class":54,"line":55},[52,54454,232],{"class":231},[52,54456,9231],{"class":58},[52,54458,238],{"class":231},[52,54460,9236],{"class":73},[52,54462,54463],{"class":54,"line":80},[52,54464,597],{"emptyLinePlaceholder":171},[52,54466,54467,54469,54471,54473,54475,54477],{"class":54,"line":108},[52,54468,1721],{"class":231},[52,54470,1724],{"class":371},[52,54472,1727],{"class":231},[52,54474,1730],{"class":231},[52,54476,1733],{"class":66},[52,54478,1736],{"class":58},[52,54480,54481],{"class":54,"line":118},[52,54482,1751],{"class":58},[52,54484,54485,54487,54490,54492,54494],{"class":54,"line":594},[52,54486,1756],{"class":58},[52,54488,54489],{"class":73},"'Vibrance'",[52,54491,27194],{"class":58},[52,54493,6387],{"class":371},[52,54495,5259],{"class":58},[52,54497,54498,54500,54502],{"class":54,"line":600},[52,54499,4727],{"class":58},[52,54501,2869],{"class":73},[52,54503,2129],{"class":58},[52,54505,54506],{"class":54,"line":606},[52,54507,4744],{"class":58},[52,54509,54510],{"class":54,"line":653},[52,54511,1773],{"class":58},[52,54513,54514],{"class":54,"line":662},[52,54515,1778],{"class":58},[156,54517,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54519},[54520,54521],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vibrance",{"title":54196,"description":54204},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":54528,"title":54529,"body":54530,"category":27760,"componentType":20842,"description":54537,"extension":168,"meta":54722,"navigation":171,"path":54723,"requiresChild":27763,"seo":54724,"stem":54725,"__hash__":54726},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":54531,"toc":54718},[54532,54535,54538,54540,54542,54545,54547,54716],[11,54533,54529],{"id":54534},"videotexture",[15,54536,54537],{},"Display a video with customizable playback and object-fit modes",[26901,54539],{"component":54529},[23,54541,26905],{"id":21503},[26907,54543],{":props":54544},"[{\"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,54546,26913],{"id":26912},[217,54548,54549,54578,54606,54634,54662],{":tabs":1543},[43,54550,54552],{"className":45,"code":54551,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,54553,54554,54562,54570],{"__ignoreMap":48},[52,54555,54556,54558,54560],{"class":54,"line":55},[52,54557,59],{"class":58},[52,54559,63],{"class":62},[52,54561,77],{"class":58},[52,54563,54564,54566,54568],{"class":54,"line":80},[52,54565,83],{"class":58},[52,54567,54529],{"class":62},[52,54569,105],{"class":58},[52,54571,54572,54574,54576],{"class":54,"line":108},[52,54573,121],{"class":58},[52,54575,63],{"class":62},[52,54577,77],{"class":58},[43,54579,54580],{"className":360,"code":54551,"language":362,"meta":48,"style":48},[31,54581,54582,54590,54598],{"__ignoreMap":48},[52,54583,54584,54586,54588],{"class":54,"line":55},[52,54585,59],{"class":58},[52,54587,63],{"class":371},[52,54589,77],{"class":58},[52,54591,54592,54594,54596],{"class":54,"line":80},[52,54593,83],{"class":58},[52,54595,54529],{"class":371},[52,54597,105],{"class":58},[52,54599,54600,54602,54604],{"class":54,"line":108},[52,54601,121],{"class":58},[52,54603,63],{"class":371},[52,54605,77],{"class":58},[43,54607,54608],{"className":2507,"code":54551,"language":2509,"meta":48,"style":48},[31,54609,54610,54618,54626],{"__ignoreMap":48},[52,54611,54612,54614,54616],{"class":54,"line":55},[52,54613,59],{"class":58},[52,54615,63],{"class":371},[52,54617,77],{"class":58},[52,54619,54620,54622,54624],{"class":54,"line":80},[52,54621,83],{"class":58},[52,54623,54529],{"class":371},[52,54625,105],{"class":58},[52,54627,54628,54630,54632],{"class":54,"line":108},[52,54629,121],{"class":58},[52,54631,63],{"class":371},[52,54633,77],{"class":58},[43,54635,54636],{"className":419,"code":54551,"language":420,"meta":48,"style":48},[31,54637,54638,54646,54654],{"__ignoreMap":48},[52,54639,54640,54642,54644],{"class":54,"line":55},[52,54641,59],{"class":58},[52,54643,63],{"class":371},[52,54645,77],{"class":58},[52,54647,54648,54650,54652],{"class":54,"line":80},[52,54649,83],{"class":58},[52,54651,54529],{"class":371},[52,54653,105],{"class":58},[52,54655,54656,54658,54660],{"class":54,"line":108},[52,54657,121],{"class":58},[52,54659,63],{"class":371},[52,54661,77],{"class":58},[43,54663,54665],{"className":222,"code":54664,"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,54666,54667,54677,54681,54695,54699,54708,54712],{"__ignoreMap":48},[52,54668,54669,54671,54673,54675],{"class":54,"line":55},[52,54670,232],{"class":231},[52,54672,9231],{"class":58},[52,54674,238],{"class":231},[52,54676,9236],{"class":73},[52,54678,54679],{"class":54,"line":80},[52,54680,597],{"emptyLinePlaceholder":171},[52,54682,54683,54685,54687,54689,54691,54693],{"class":54,"line":108},[52,54684,1721],{"class":231},[52,54686,1724],{"class":371},[52,54688,1727],{"class":231},[52,54690,1730],{"class":231},[52,54692,1733],{"class":66},[52,54694,1736],{"class":58},[52,54696,54697],{"class":54,"line":118},[52,54698,1751],{"class":58},[52,54700,54701,54703,54706],{"class":54,"line":594},[52,54702,1756],{"class":58},[52,54704,54705],{"class":73},"'VideoTexture'",[52,54707,2129],{"class":58},[52,54709,54710],{"class":54,"line":600},[52,54711,1773],{"class":58},[52,54713,54714],{"class":54,"line":606},[52,54715,1778],{"class":58},[156,54717,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54719},[54720,54721],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/videotexture",{"title":54529,"description":54537},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":54728,"title":54729,"body":54730,"category":27503,"componentType":20848,"description":54737,"extension":168,"meta":55136,"navigation":171,"path":55137,"requiresChild":171,"seo":55138,"stem":55139,"__hash__":55140},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":54731,"toc":55132},[54732,54735,54738,54740,54742,54745,54747,55130],[11,54733,54729],{"id":54734},"vignette",[15,54736,54737],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26901,54739],{"component":54729},[23,54741,26905],{"id":21503},[26907,54743],{":props":54744},"[{\"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,54746,26913],{"id":26912},[217,54748,54749,54821,54900,54974,55052],{":tabs":1543},[43,54750,54752],{"className":45,"code":54751,"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,54753,54754,54762,54769,54777,54785,54793,54797,54805,54813],{"__ignoreMap":48},[52,54755,54756,54758,54760],{"class":54,"line":55},[52,54757,59],{"class":58},[52,54759,63],{"class":62},[52,54761,77],{"class":58},[52,54763,54764,54766],{"class":54,"line":80},[52,54765,83],{"class":58},[52,54767,54768],{"class":62},"Vignette\n",[52,54770,54771,54773,54775],{"class":54,"line":108},[52,54772,7351],{"class":66},[52,54774,70],{"class":58},[52,54776,16975],{"class":73},[52,54778,54779,54781,54783],{"class":54,"line":118},[52,54780,14901],{"class":66},[52,54782,70],{"class":58},[52,54784,32462],{"class":73},[52,54786,54787,54789,54791],{"class":54,"line":594},[52,54788,17870],{"class":66},[52,54790,70],{"class":58},[52,54792,28827],{"class":73},[52,54794,54795],{"class":54,"line":600},[52,54796,26949],{"class":58},[52,54798,54799,54801,54803],{"class":54,"line":606},[52,54800,2213],{"class":58},[52,54802,2216],{"class":62},[52,54804,105],{"class":58},[52,54806,54807,54809,54811],{"class":54,"line":653},[52,54808,2230],{"class":58},[52,54810,54729],{"class":62},[52,54812,77],{"class":58},[52,54814,54815,54817,54819],{"class":54,"line":662},[52,54816,121],{"class":58},[52,54818,63],{"class":62},[52,54820,77],{"class":58},[43,54822,54824],{"className":360,"code":54823,"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,54825,54826,54834,54840,54848,54860,54872,54876,54884,54892],{"__ignoreMap":48},[52,54827,54828,54830,54832],{"class":54,"line":55},[52,54829,59],{"class":58},[52,54831,63],{"class":371},[52,54833,77],{"class":58},[52,54835,54836,54838],{"class":54,"line":80},[52,54837,83],{"class":58},[52,54839,54768],{"class":371},[52,54841,54842,54844,54846],{"class":54,"line":108},[52,54843,7351],{"class":66},[52,54845,70],{"class":231},[52,54847,16975],{"class":73},[52,54849,54850,54852,54854,54856,54858],{"class":54,"line":118},[52,54851,7361],{"class":66},[52,54853,70],{"class":231},[52,54855,723],{"class":58},[52,54857,5467],{"class":371},[52,54859,729],{"class":58},[52,54861,54862,54864,54866,54868,54870],{"class":54,"line":594},[52,54863,17981],{"class":66},[52,54865,70],{"class":231},[52,54867,723],{"class":58},[52,54869,6391],{"class":371},[52,54871,729],{"class":58},[52,54873,54874],{"class":54,"line":600},[52,54875,26949],{"class":58},[52,54877,54878,54880,54882],{"class":54,"line":606},[52,54879,2213],{"class":58},[52,54881,2216],{"class":371},[52,54883,105],{"class":58},[52,54885,54886,54888,54890],{"class":54,"line":653},[52,54887,2230],{"class":58},[52,54889,54729],{"class":371},[52,54891,77],{"class":58},[52,54893,54894,54896,54898],{"class":54,"line":662},[52,54895,121],{"class":58},[52,54897,63],{"class":371},[52,54899,77],{"class":58},[43,54901,54902],{"className":2507,"code":54823,"language":2509,"meta":48,"style":48},[31,54903,54904,54912,54918,54926,54936,54946,54950,54958,54966],{"__ignoreMap":48},[52,54905,54906,54908,54910],{"class":54,"line":55},[52,54907,59],{"class":58},[52,54909,63],{"class":371},[52,54911,77],{"class":58},[52,54913,54914,54916],{"class":54,"line":80},[52,54915,83],{"class":58},[52,54917,54768],{"class":371},[52,54919,54920,54922,54924],{"class":54,"line":108},[52,54921,7351],{"class":66},[52,54923,70],{"class":58},[52,54925,16975],{"class":73},[52,54927,54928,54930,54932,54934],{"class":54,"line":118},[52,54929,7361],{"class":66},[52,54931,24845],{"class":58},[52,54933,5467],{"class":371},[52,54935,729],{"class":58},[52,54937,54938,54940,54942,54944],{"class":54,"line":594},[52,54939,17981],{"class":66},[52,54941,24845],{"class":58},[52,54943,6391],{"class":371},[52,54945,729],{"class":58},[52,54947,54948],{"class":54,"line":600},[52,54949,26949],{"class":58},[52,54951,54952,54954,54956],{"class":54,"line":606},[52,54953,2213],{"class":58},[52,54955,2216],{"class":371},[52,54957,105],{"class":58},[52,54959,54960,54962,54964],{"class":54,"line":653},[52,54961,2230],{"class":58},[52,54963,54729],{"class":371},[52,54965,77],{"class":58},[52,54967,54968,54970,54972],{"class":54,"line":662},[52,54969,121],{"class":58},[52,54971,63],{"class":371},[52,54973,77],{"class":58},[43,54975,54976],{"className":419,"code":54823,"language":420,"meta":48,"style":48},[31,54977,54978,54986,54992,55000,55012,55024,55028,55036,55044],{"__ignoreMap":48},[52,54979,54980,54982,54984],{"class":54,"line":55},[52,54981,59],{"class":58},[52,54983,63],{"class":371},[52,54985,77],{"class":58},[52,54987,54988,54990],{"class":54,"line":80},[52,54989,83],{"class":58},[52,54991,54768],{"class":371},[52,54993,54994,54996,54998],{"class":54,"line":108},[52,54995,7351],{"class":66},[52,54997,70],{"class":231},[52,54999,16975],{"class":73},[52,55001,55002,55004,55006,55008,55010],{"class":54,"line":118},[52,55003,7361],{"class":66},[52,55005,70],{"class":231},[52,55007,723],{"class":58},[52,55009,5467],{"class":371},[52,55011,729],{"class":58},[52,55013,55014,55016,55018,55020,55022],{"class":54,"line":594},[52,55015,17981],{"class":66},[52,55017,70],{"class":231},[52,55019,723],{"class":58},[52,55021,6391],{"class":371},[52,55023,729],{"class":58},[52,55025,55026],{"class":54,"line":600},[52,55027,26949],{"class":58},[52,55029,55030,55032,55034],{"class":54,"line":606},[52,55031,2213],{"class":58},[52,55033,2216],{"class":371},[52,55035,105],{"class":58},[52,55037,55038,55040,55042],{"class":54,"line":653},[52,55039,2230],{"class":58},[52,55041,54729],{"class":371},[52,55043,77],{"class":58},[52,55045,55046,55048,55050],{"class":54,"line":662},[52,55047,121],{"class":58},[52,55049,63],{"class":371},[52,55051,77],{"class":58},[43,55053,55055],{"className":222,"code":55054,"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,55056,55057,55067,55071,55085,55089,55110,55118,55122,55126],{"__ignoreMap":48},[52,55058,55059,55061,55063,55065],{"class":54,"line":55},[52,55060,232],{"class":231},[52,55062,9231],{"class":58},[52,55064,238],{"class":231},[52,55066,9236],{"class":73},[52,55068,55069],{"class":54,"line":80},[52,55070,597],{"emptyLinePlaceholder":171},[52,55072,55073,55075,55077,55079,55081,55083],{"class":54,"line":108},[52,55074,1721],{"class":231},[52,55076,1724],{"class":371},[52,55078,1727],{"class":231},[52,55080,1730],{"class":231},[52,55082,1733],{"class":66},[52,55084,1736],{"class":58},[52,55086,55087],{"class":54,"line":118},[52,55088,1751],{"class":58},[52,55090,55091,55093,55096,55098,55100,55102,55104,55106,55108],{"class":54,"line":594},[52,55092,1756],{"class":58},[52,55094,55095],{"class":73},"'Vignette'",[52,55097,1762],{"class":58},[52,55099,17534],{"class":73},[52,55101,4278],{"class":58},[52,55103,5467],{"class":371},[52,55105,34623],{"class":58},[52,55107,6391],{"class":371},[52,55109,5259],{"class":58},[52,55111,55112,55114,55116],{"class":54,"line":600},[52,55113,4727],{"class":58},[52,55115,2869],{"class":73},[52,55117,2129],{"class":58},[52,55119,55120],{"class":54,"line":606},[52,55121,4744],{"class":58},[52,55123,55124],{"class":54,"line":653},[52,55125,1773],{"class":58},[52,55127,55128],{"class":54,"line":662},[52,55129,1778],{"class":58},[156,55131,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":55133},[55134,55135],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vignette",{"title":54729,"description":54737},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":55142,"title":55143,"body":55144,"category":27760,"componentType":20842,"description":55151,"extension":168,"meta":55336,"navigation":171,"path":55337,"requiresChild":27763,"seo":55338,"stem":55339,"__hash__":55340},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":55145,"toc":55332},[55146,55149,55152,55154,55156,55159,55161,55330],[11,55147,55143],{"id":55148},"voronoi",[15,55150,55151],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26901,55153],{"component":55143},[23,55155,26905],{"id":21503},[26907,55157],{":props":55158},"[{\"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,55160,26913],{"id":26912},[217,55162,55163,55192,55220,55248,55276],{":tabs":1543},[43,55164,55166],{"className":45,"code":55165,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,55167,55168,55176,55184],{"__ignoreMap":48},[52,55169,55170,55172,55174],{"class":54,"line":55},[52,55171,59],{"class":58},[52,55173,63],{"class":62},[52,55175,77],{"class":58},[52,55177,55178,55180,55182],{"class":54,"line":80},[52,55179,83],{"class":58},[52,55181,55143],{"class":62},[52,55183,105],{"class":58},[52,55185,55186,55188,55190],{"class":54,"line":108},[52,55187,121],{"class":58},[52,55189,63],{"class":62},[52,55191,77],{"class":58},[43,55193,55194],{"className":360,"code":55165,"language":362,"meta":48,"style":48},[31,55195,55196,55204,55212],{"__ignoreMap":48},[52,55197,55198,55200,55202],{"class":54,"line":55},[52,55199,59],{"class":58},[52,55201,63],{"class":371},[52,55203,77],{"class":58},[52,55205,55206,55208,55210],{"class":54,"line":80},[52,55207,83],{"class":58},[52,55209,55143],{"class":371},[52,55211,105],{"class":58},[52,55213,55214,55216,55218],{"class":54,"line":108},[52,55215,121],{"class":58},[52,55217,63],{"class":371},[52,55219,77],{"class":58},[43,55221,55222],{"className":2507,"code":55165,"language":2509,"meta":48,"style":48},[31,55223,55224,55232,55240],{"__ignoreMap":48},[52,55225,55226,55228,55230],{"class":54,"line":55},[52,55227,59],{"class":58},[52,55229,63],{"class":371},[52,55231,77],{"class":58},[52,55233,55234,55236,55238],{"class":54,"line":80},[52,55235,83],{"class":58},[52,55237,55143],{"class":371},[52,55239,105],{"class":58},[52,55241,55242,55244,55246],{"class":54,"line":108},[52,55243,121],{"class":58},[52,55245,63],{"class":371},[52,55247,77],{"class":58},[43,55249,55250],{"className":419,"code":55165,"language":420,"meta":48,"style":48},[31,55251,55252,55260,55268],{"__ignoreMap":48},[52,55253,55254,55256,55258],{"class":54,"line":55},[52,55255,59],{"class":58},[52,55257,63],{"class":371},[52,55259,77],{"class":58},[52,55261,55262,55264,55266],{"class":54,"line":80},[52,55263,83],{"class":58},[52,55265,55143],{"class":371},[52,55267,105],{"class":58},[52,55269,55270,55272,55274],{"class":54,"line":108},[52,55271,121],{"class":58},[52,55273,63],{"class":371},[52,55275,77],{"class":58},[43,55277,55279],{"className":222,"code":55278,"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,55280,55281,55291,55295,55309,55313,55322,55326],{"__ignoreMap":48},[52,55282,55283,55285,55287,55289],{"class":54,"line":55},[52,55284,232],{"class":231},[52,55286,9231],{"class":58},[52,55288,238],{"class":231},[52,55290,9236],{"class":73},[52,55292,55293],{"class":54,"line":80},[52,55294,597],{"emptyLinePlaceholder":171},[52,55296,55297,55299,55301,55303,55305,55307],{"class":54,"line":108},[52,55298,1721],{"class":231},[52,55300,1724],{"class":371},[52,55302,1727],{"class":231},[52,55304,1730],{"class":231},[52,55306,1733],{"class":66},[52,55308,1736],{"class":58},[52,55310,55311],{"class":54,"line":118},[52,55312,1751],{"class":58},[52,55314,55315,55317,55320],{"class":54,"line":594},[52,55316,1756],{"class":58},[52,55318,55319],{"class":73},"'Voronoi'",[52,55321,2129],{"class":58},[52,55323,55324],{"class":54,"line":600},[52,55325,1773],{"class":58},[52,55327,55328],{"class":54,"line":606},[52,55329,1778],{"class":58},[156,55331,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55333},[55334,55335],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/voronoi",{"title":55143,"description":55151},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":55342,"title":55343,"body":55344,"category":29105,"componentType":20848,"description":55351,"extension":168,"meta":55612,"navigation":171,"path":55613,"requiresChild":171,"seo":55614,"stem":55615,"__hash__":55616},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":55345,"toc":55608},[55346,55349,55352,55354,55356,55359,55361,55606],[11,55347,55343],{"id":55348},"wavedistortion",[15,55350,55351],{},"Wave-based distortion with multiple waveform types",[26901,55353],{"component":55343},[23,55355,26905],{"id":21503},[26907,55357],{":props":55358},"[{\"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,55360,26913],{"id":26912},[217,55362,55363,55408,55452,55496,55540],{":tabs":1543},[43,55364,55366],{"className":45,"code":55365,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,55367,55368,55376,55384,55392,55400],{"__ignoreMap":48},[52,55369,55370,55372,55374],{"class":54,"line":55},[52,55371,59],{"class":58},[52,55373,63],{"class":62},[52,55375,77],{"class":58},[52,55377,55378,55380,55382],{"class":54,"line":80},[52,55379,83],{"class":58},[52,55381,55343],{"class":62},[52,55383,77],{"class":58},[52,55385,55386,55388,55390],{"class":54,"line":108},[52,55387,2213],{"class":58},[52,55389,2216],{"class":62},[52,55391,105],{"class":58},[52,55393,55394,55396,55398],{"class":54,"line":118},[52,55395,2230],{"class":58},[52,55397,55343],{"class":62},[52,55399,77],{"class":58},[52,55401,55402,55404,55406],{"class":54,"line":594},[52,55403,121],{"class":58},[52,55405,63],{"class":62},[52,55407,77],{"class":58},[43,55409,55410],{"className":360,"code":55365,"language":362,"meta":48,"style":48},[31,55411,55412,55420,55428,55436,55444],{"__ignoreMap":48},[52,55413,55414,55416,55418],{"class":54,"line":55},[52,55415,59],{"class":58},[52,55417,63],{"class":371},[52,55419,77],{"class":58},[52,55421,55422,55424,55426],{"class":54,"line":80},[52,55423,83],{"class":58},[52,55425,55343],{"class":371},[52,55427,77],{"class":58},[52,55429,55430,55432,55434],{"class":54,"line":108},[52,55431,2213],{"class":58},[52,55433,2216],{"class":371},[52,55435,105],{"class":58},[52,55437,55438,55440,55442],{"class":54,"line":118},[52,55439,2230],{"class":58},[52,55441,55343],{"class":371},[52,55443,77],{"class":58},[52,55445,55446,55448,55450],{"class":54,"line":594},[52,55447,121],{"class":58},[52,55449,63],{"class":371},[52,55451,77],{"class":58},[43,55453,55454],{"className":2507,"code":55365,"language":2509,"meta":48,"style":48},[31,55455,55456,55464,55472,55480,55488],{"__ignoreMap":48},[52,55457,55458,55460,55462],{"class":54,"line":55},[52,55459,59],{"class":58},[52,55461,63],{"class":371},[52,55463,77],{"class":58},[52,55465,55466,55468,55470],{"class":54,"line":80},[52,55467,83],{"class":58},[52,55469,55343],{"class":371},[52,55471,77],{"class":58},[52,55473,55474,55476,55478],{"class":54,"line":108},[52,55475,2213],{"class":58},[52,55477,2216],{"class":371},[52,55479,105],{"class":58},[52,55481,55482,55484,55486],{"class":54,"line":118},[52,55483,2230],{"class":58},[52,55485,55343],{"class":371},[52,55487,77],{"class":58},[52,55489,55490,55492,55494],{"class":54,"line":594},[52,55491,121],{"class":58},[52,55493,63],{"class":371},[52,55495,77],{"class":58},[43,55497,55498],{"className":419,"code":55365,"language":420,"meta":48,"style":48},[31,55499,55500,55508,55516,55524,55532],{"__ignoreMap":48},[52,55501,55502,55504,55506],{"class":54,"line":55},[52,55503,59],{"class":58},[52,55505,63],{"class":371},[52,55507,77],{"class":58},[52,55509,55510,55512,55514],{"class":54,"line":80},[52,55511,83],{"class":58},[52,55513,55343],{"class":371},[52,55515,77],{"class":58},[52,55517,55518,55520,55522],{"class":54,"line":108},[52,55519,2213],{"class":58},[52,55521,2216],{"class":371},[52,55523,105],{"class":58},[52,55525,55526,55528,55530],{"class":54,"line":118},[52,55527,2230],{"class":58},[52,55529,55343],{"class":371},[52,55531,77],{"class":58},[52,55533,55534,55536,55538],{"class":54,"line":594},[52,55535,121],{"class":58},[52,55537,63],{"class":371},[52,55539,77],{"class":58},[43,55541,55543],{"className":222,"code":55542,"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,55544,55545,55555,55559,55573,55577,55586,55594,55598,55602],{"__ignoreMap":48},[52,55546,55547,55549,55551,55553],{"class":54,"line":55},[52,55548,232],{"class":231},[52,55550,9231],{"class":58},[52,55552,238],{"class":231},[52,55554,9236],{"class":73},[52,55556,55557],{"class":54,"line":80},[52,55558,597],{"emptyLinePlaceholder":171},[52,55560,55561,55563,55565,55567,55569,55571],{"class":54,"line":108},[52,55562,1721],{"class":231},[52,55564,1724],{"class":371},[52,55566,1727],{"class":231},[52,55568,1730],{"class":231},[52,55570,1733],{"class":66},[52,55572,1736],{"class":58},[52,55574,55575],{"class":54,"line":118},[52,55576,1751],{"class":58},[52,55578,55579,55581,55584],{"class":54,"line":594},[52,55580,1756],{"class":58},[52,55582,55583],{"class":73},"'WaveDistortion'",[52,55585,4722],{"class":58},[52,55587,55588,55590,55592],{"class":54,"line":600},[52,55589,4727],{"class":58},[52,55591,2869],{"class":73},[52,55593,2129],{"class":58},[52,55595,55596],{"class":54,"line":606},[52,55597,4744],{"class":58},[52,55599,55600],{"class":54,"line":653},[52,55601,1773],{"class":58},[52,55603,55604],{"class":54,"line":662},[52,55605,1778],{"class":58},[156,55607,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55609},[55610,55611],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/wavedistortion",{"title":55343,"description":55351},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":55618,"title":55619,"body":55620,"category":27760,"componentType":20842,"description":55627,"extension":168,"meta":55812,"navigation":171,"path":55813,"requiresChild":27763,"seo":55814,"stem":55815,"__hash__":55816},"components/docs/components/Weave.md","Weave",{"type":8,"value":55621,"toc":55808},[55622,55625,55628,55630,55632,55635,55637,55806],[11,55623,55619],{"id":55624},"weave",[15,55626,55627],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26901,55629],{"component":55619},[23,55631,26905],{"id":21503},[26907,55633],{":props":55634},"[{\"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,55636,26913],{"id":26912},[217,55638,55639,55668,55696,55724,55752],{":tabs":1543},[43,55640,55642],{"className":45,"code":55641,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,55643,55644,55652,55660],{"__ignoreMap":48},[52,55645,55646,55648,55650],{"class":54,"line":55},[52,55647,59],{"class":58},[52,55649,63],{"class":62},[52,55651,77],{"class":58},[52,55653,55654,55656,55658],{"class":54,"line":80},[52,55655,83],{"class":58},[52,55657,55619],{"class":62},[52,55659,105],{"class":58},[52,55661,55662,55664,55666],{"class":54,"line":108},[52,55663,121],{"class":58},[52,55665,63],{"class":62},[52,55667,77],{"class":58},[43,55669,55670],{"className":360,"code":55641,"language":362,"meta":48,"style":48},[31,55671,55672,55680,55688],{"__ignoreMap":48},[52,55673,55674,55676,55678],{"class":54,"line":55},[52,55675,59],{"class":58},[52,55677,63],{"class":371},[52,55679,77],{"class":58},[52,55681,55682,55684,55686],{"class":54,"line":80},[52,55683,83],{"class":58},[52,55685,55619],{"class":371},[52,55687,105],{"class":58},[52,55689,55690,55692,55694],{"class":54,"line":108},[52,55691,121],{"class":58},[52,55693,63],{"class":371},[52,55695,77],{"class":58},[43,55697,55698],{"className":2507,"code":55641,"language":2509,"meta":48,"style":48},[31,55699,55700,55708,55716],{"__ignoreMap":48},[52,55701,55702,55704,55706],{"class":54,"line":55},[52,55703,59],{"class":58},[52,55705,63],{"class":371},[52,55707,77],{"class":58},[52,55709,55710,55712,55714],{"class":54,"line":80},[52,55711,83],{"class":58},[52,55713,55619],{"class":371},[52,55715,105],{"class":58},[52,55717,55718,55720,55722],{"class":54,"line":108},[52,55719,121],{"class":58},[52,55721,63],{"class":371},[52,55723,77],{"class":58},[43,55725,55726],{"className":419,"code":55641,"language":420,"meta":48,"style":48},[31,55727,55728,55736,55744],{"__ignoreMap":48},[52,55729,55730,55732,55734],{"class":54,"line":55},[52,55731,59],{"class":58},[52,55733,63],{"class":371},[52,55735,77],{"class":58},[52,55737,55738,55740,55742],{"class":54,"line":80},[52,55739,83],{"class":58},[52,55741,55619],{"class":371},[52,55743,105],{"class":58},[52,55745,55746,55748,55750],{"class":54,"line":108},[52,55747,121],{"class":58},[52,55749,63],{"class":371},[52,55751,77],{"class":58},[43,55753,55755],{"className":222,"code":55754,"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,55756,55757,55767,55771,55785,55789,55798,55802],{"__ignoreMap":48},[52,55758,55759,55761,55763,55765],{"class":54,"line":55},[52,55760,232],{"class":231},[52,55762,9231],{"class":58},[52,55764,238],{"class":231},[52,55766,9236],{"class":73},[52,55768,55769],{"class":54,"line":80},[52,55770,597],{"emptyLinePlaceholder":171},[52,55772,55773,55775,55777,55779,55781,55783],{"class":54,"line":108},[52,55774,1721],{"class":231},[52,55776,1724],{"class":371},[52,55778,1727],{"class":231},[52,55780,1730],{"class":231},[52,55782,1733],{"class":66},[52,55784,1736],{"class":58},[52,55786,55787],{"class":54,"line":118},[52,55788,1751],{"class":58},[52,55790,55791,55793,55796],{"class":54,"line":594},[52,55792,1756],{"class":58},[52,55794,55795],{"class":73},"'Weave'",[52,55797,2129],{"class":58},[52,55799,55800],{"class":54,"line":600},[52,55801,1773],{"class":58},[52,55803,55804],{"class":54,"line":606},[52,55805,1778],{"class":58},[156,55807,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55809},[55810,55811],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/weave",{"title":55619,"description":55627},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":55818,"title":55819,"body":55820,"category":27760,"componentType":20842,"description":55827,"extension":168,"meta":56012,"navigation":171,"path":56013,"requiresChild":27763,"seo":56014,"stem":56015,"__hash__":56016},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":55821,"toc":56008},[55822,55825,55828,55830,55832,55835,55837,56006],[11,55823,55819],{"id":55824},"webcamtexture",[15,55826,55827],{},"Display a live webcam feed with customizable object-fit modes",[26901,55829],{"component":55819},[23,55831,26905],{"id":21503},[26907,55833],{":props":55834},"[{\"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,55836,26913],{"id":26912},[217,55838,55839,55868,55896,55924,55952],{":tabs":1543},[43,55840,55842],{"className":45,"code":55841,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[31,55843,55844,55852,55860],{"__ignoreMap":48},[52,55845,55846,55848,55850],{"class":54,"line":55},[52,55847,59],{"class":58},[52,55849,63],{"class":62},[52,55851,77],{"class":58},[52,55853,55854,55856,55858],{"class":54,"line":80},[52,55855,83],{"class":58},[52,55857,55819],{"class":62},[52,55859,105],{"class":58},[52,55861,55862,55864,55866],{"class":54,"line":108},[52,55863,121],{"class":58},[52,55865,63],{"class":62},[52,55867,77],{"class":58},[43,55869,55870],{"className":360,"code":55841,"language":362,"meta":48,"style":48},[31,55871,55872,55880,55888],{"__ignoreMap":48},[52,55873,55874,55876,55878],{"class":54,"line":55},[52,55875,59],{"class":58},[52,55877,63],{"class":371},[52,55879,77],{"class":58},[52,55881,55882,55884,55886],{"class":54,"line":80},[52,55883,83],{"class":58},[52,55885,55819],{"class":371},[52,55887,105],{"class":58},[52,55889,55890,55892,55894],{"class":54,"line":108},[52,55891,121],{"class":58},[52,55893,63],{"class":371},[52,55895,77],{"class":58},[43,55897,55898],{"className":2507,"code":55841,"language":2509,"meta":48,"style":48},[31,55899,55900,55908,55916],{"__ignoreMap":48},[52,55901,55902,55904,55906],{"class":54,"line":55},[52,55903,59],{"class":58},[52,55905,63],{"class":371},[52,55907,77],{"class":58},[52,55909,55910,55912,55914],{"class":54,"line":80},[52,55911,83],{"class":58},[52,55913,55819],{"class":371},[52,55915,105],{"class":58},[52,55917,55918,55920,55922],{"class":54,"line":108},[52,55919,121],{"class":58},[52,55921,63],{"class":371},[52,55923,77],{"class":58},[43,55925,55926],{"className":419,"code":55841,"language":420,"meta":48,"style":48},[31,55927,55928,55936,55944],{"__ignoreMap":48},[52,55929,55930,55932,55934],{"class":54,"line":55},[52,55931,59],{"class":58},[52,55933,63],{"class":371},[52,55935,77],{"class":58},[52,55937,55938,55940,55942],{"class":54,"line":80},[52,55939,83],{"class":58},[52,55941,55819],{"class":371},[52,55943,105],{"class":58},[52,55945,55946,55948,55950],{"class":54,"line":108},[52,55947,121],{"class":58},[52,55949,63],{"class":371},[52,55951,77],{"class":58},[43,55953,55955],{"className":222,"code":55954,"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,55956,55957,55967,55971,55985,55989,55998,56002],{"__ignoreMap":48},[52,55958,55959,55961,55963,55965],{"class":54,"line":55},[52,55960,232],{"class":231},[52,55962,9231],{"class":58},[52,55964,238],{"class":231},[52,55966,9236],{"class":73},[52,55968,55969],{"class":54,"line":80},[52,55970,597],{"emptyLinePlaceholder":171},[52,55972,55973,55975,55977,55979,55981,55983],{"class":54,"line":108},[52,55974,1721],{"class":231},[52,55976,1724],{"class":371},[52,55978,1727],{"class":231},[52,55980,1730],{"class":231},[52,55982,1733],{"class":66},[52,55984,1736],{"class":58},[52,55986,55987],{"class":54,"line":118},[52,55988,1751],{"class":58},[52,55990,55991,55993,55996],{"class":54,"line":594},[52,55992,1756],{"class":58},[52,55994,55995],{"class":73},"'WebcamTexture'",[52,55997,2129],{"class":58},[52,55999,56000],{"class":54,"line":600},[52,56001,1773],{"class":58},[52,56003,56004],{"class":54,"line":606},[52,56005,1778],{"class":58},[156,56007,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":56009},[56010,56011],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/webcamtexture",{"title":55819,"description":55827},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":56018,"title":56019,"body":56020,"category":27225,"componentType":20848,"description":56027,"extension":168,"meta":56344,"navigation":171,"path":56345,"requiresChild":171,"seo":56346,"stem":56347,"__hash__":56348},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":56021,"toc":56340},[56022,56025,56028,56030,56032,56035,56037,56338],[11,56023,56019],{"id":56024},"zoomblur",[15,56026,56027],{},"Radial zoom blur expanding from a center point",[26901,56029],{"component":56019},[23,56031,26905],{"id":21503},[26907,56033],{":props":56034},"[{\"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,56036,26913],{"id":26912},[217,56038,56039,56095,56154,56210,56268],{":tabs":1543},[43,56040,56042],{"className":45,"code":56041,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,56043,56044,56052,56059,56067,56071,56079,56087],{"__ignoreMap":48},[52,56045,56046,56048,56050],{"class":54,"line":55},[52,56047,59],{"class":58},[52,56049,63],{"class":62},[52,56051,77],{"class":58},[52,56053,56054,56056],{"class":54,"line":80},[52,56055,83],{"class":58},[52,56057,56058],{"class":62},"ZoomBlur\n",[52,56060,56061,56063,56065],{"class":54,"line":108},[52,56062,17870],{"class":66},[52,56064,70],{"class":58},[52,56066,33488],{"class":73},[52,56068,56069],{"class":54,"line":118},[52,56070,26949],{"class":58},[52,56072,56073,56075,56077],{"class":54,"line":594},[52,56074,2213],{"class":58},[52,56076,2216],{"class":62},[52,56078,105],{"class":58},[52,56080,56081,56083,56085],{"class":54,"line":600},[52,56082,2230],{"class":58},[52,56084,56019],{"class":62},[52,56086,77],{"class":58},[52,56088,56089,56091,56093],{"class":54,"line":606},[52,56090,121],{"class":58},[52,56092,63],{"class":62},[52,56094,77],{"class":58},[43,56096,56098],{"className":360,"code":56097,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,56099,56100,56108,56114,56126,56130,56138,56146],{"__ignoreMap":48},[52,56101,56102,56104,56106],{"class":54,"line":55},[52,56103,59],{"class":58},[52,56105,63],{"class":371},[52,56107,77],{"class":58},[52,56109,56110,56112],{"class":54,"line":80},[52,56111,83],{"class":58},[52,56113,56058],{"class":371},[52,56115,56116,56118,56120,56122,56124],{"class":54,"line":108},[52,56117,17981],{"class":66},[52,56119,70],{"class":231},[52,56121,723],{"class":58},[52,56123,13194],{"class":371},[52,56125,729],{"class":58},[52,56127,56128],{"class":54,"line":118},[52,56129,26949],{"class":58},[52,56131,56132,56134,56136],{"class":54,"line":594},[52,56133,2213],{"class":58},[52,56135,2216],{"class":371},[52,56137,105],{"class":58},[52,56139,56140,56142,56144],{"class":54,"line":600},[52,56141,2230],{"class":58},[52,56143,56019],{"class":371},[52,56145,77],{"class":58},[52,56147,56148,56150,56152],{"class":54,"line":606},[52,56149,121],{"class":58},[52,56151,63],{"class":371},[52,56153,77],{"class":58},[43,56155,56156],{"className":2507,"code":56097,"language":2509,"meta":48,"style":48},[31,56157,56158,56166,56172,56182,56186,56194,56202],{"__ignoreMap":48},[52,56159,56160,56162,56164],{"class":54,"line":55},[52,56161,59],{"class":58},[52,56163,63],{"class":371},[52,56165,77],{"class":58},[52,56167,56168,56170],{"class":54,"line":80},[52,56169,83],{"class":58},[52,56171,56058],{"class":371},[52,56173,56174,56176,56178,56180],{"class":54,"line":108},[52,56175,17981],{"class":66},[52,56177,24845],{"class":58},[52,56179,13194],{"class":371},[52,56181,729],{"class":58},[52,56183,56184],{"class":54,"line":118},[52,56185,26949],{"class":58},[52,56187,56188,56190,56192],{"class":54,"line":594},[52,56189,2213],{"class":58},[52,56191,2216],{"class":371},[52,56193,105],{"class":58},[52,56195,56196,56198,56200],{"class":54,"line":600},[52,56197,2230],{"class":58},[52,56199,56019],{"class":371},[52,56201,77],{"class":58},[52,56203,56204,56206,56208],{"class":54,"line":606},[52,56205,121],{"class":58},[52,56207,63],{"class":371},[52,56209,77],{"class":58},[43,56211,56212],{"className":419,"code":56097,"language":420,"meta":48,"style":48},[31,56213,56214,56222,56228,56240,56244,56252,56260],{"__ignoreMap":48},[52,56215,56216,56218,56220],{"class":54,"line":55},[52,56217,59],{"class":58},[52,56219,63],{"class":371},[52,56221,77],{"class":58},[52,56223,56224,56226],{"class":54,"line":80},[52,56225,83],{"class":58},[52,56227,56058],{"class":371},[52,56229,56230,56232,56234,56236,56238],{"class":54,"line":108},[52,56231,17981],{"class":66},[52,56233,70],{"class":231},[52,56235,723],{"class":58},[52,56237,13194],{"class":371},[52,56239,729],{"class":58},[52,56241,56242],{"class":54,"line":118},[52,56243,26949],{"class":58},[52,56245,56246,56248,56250],{"class":54,"line":594},[52,56247,2213],{"class":58},[52,56249,2216],{"class":371},[52,56251,105],{"class":58},[52,56253,56254,56256,56258],{"class":54,"line":600},[52,56255,2230],{"class":58},[52,56257,56019],{"class":371},[52,56259,77],{"class":58},[52,56261,56262,56264,56266],{"class":54,"line":606},[52,56263,121],{"class":58},[52,56265,63],{"class":371},[52,56267,77],{"class":58},[43,56269,56271],{"className":222,"code":56270,"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,56272,56273,56283,56287,56301,56305,56318,56326,56330,56334],{"__ignoreMap":48},[52,56274,56275,56277,56279,56281],{"class":54,"line":55},[52,56276,232],{"class":231},[52,56278,9231],{"class":58},[52,56280,238],{"class":231},[52,56282,9236],{"class":73},[52,56284,56285],{"class":54,"line":80},[52,56286,597],{"emptyLinePlaceholder":171},[52,56288,56289,56291,56293,56295,56297,56299],{"class":54,"line":108},[52,56290,1721],{"class":231},[52,56292,1724],{"class":371},[52,56294,1727],{"class":231},[52,56296,1730],{"class":231},[52,56298,1733],{"class":66},[52,56300,1736],{"class":58},[52,56302,56303],{"class":54,"line":118},[52,56304,1751],{"class":58},[52,56306,56307,56309,56312,56314,56316],{"class":54,"line":594},[52,56308,1756],{"class":58},[52,56310,56311],{"class":73},"'ZoomBlur'",[52,56313,27194],{"class":58},[52,56315,13194],{"class":371},[52,56317,5259],{"class":58},[52,56319,56320,56322,56324],{"class":54,"line":600},[52,56321,4727],{"class":58},[52,56323,2869],{"class":73},[52,56325,2129],{"class":58},[52,56327,56328],{"class":54,"line":606},[52,56329,4744],{"class":58},[52,56331,56332],{"class":54,"line":653},[52,56333,1773],{"class":58},[52,56335,56336],{"class":54,"line":662},[52,56337,1778],{"class":58},[156,56339,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":56341},[56342,56343],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/zoomblur",{"title":56019,"description":56027},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27763,"error":56350},"Not authenticated",{"id":36900,"title":36901,"body":56352,"category":29105,"componentType":20848,"description":36909,"extension":168,"meta":56614,"navigation":171,"path":37171,"requiresChild":171,"seo":56615,"stem":37173,"__hash__":37174},{"type":8,"value":56353,"toc":56610},[56354,56356,56358,56360,56362,56364,56366,56608],[11,56355,36901],{"id":36906},[15,56357,36909],{},[26901,56359],{"component":36901},[23,56361,26905],{"id":21503},[26907,56363],{":props":36916},[23,56365,26913],{"id":26912},[217,56367,56368,56412,56456,56500,56544],{":tabs":1543},[43,56369,56370],{"className":45,"code":36923,"language":47,"meta":48,"style":48},[31,56371,56372,56380,56388,56396,56404],{"__ignoreMap":48},[52,56373,56374,56376,56378],{"class":54,"line":55},[52,56375,59],{"class":58},[52,56377,63],{"class":62},[52,56379,77],{"class":58},[52,56381,56382,56384,56386],{"class":54,"line":80},[52,56383,83],{"class":58},[52,56385,36901],{"class":62},[52,56387,77],{"class":58},[52,56389,56390,56392,56394],{"class":54,"line":108},[52,56391,2213],{"class":58},[52,56393,2216],{"class":62},[52,56395,105],{"class":58},[52,56397,56398,56400,56402],{"class":54,"line":118},[52,56399,2230],{"class":58},[52,56401,36901],{"class":62},[52,56403,77],{"class":58},[52,56405,56406,56408,56410],{"class":54,"line":594},[52,56407,121],{"class":58},[52,56409,63],{"class":62},[52,56411,77],{"class":58},[43,56413,56414],{"className":360,"code":36923,"language":362,"meta":48,"style":48},[31,56415,56416,56424,56432,56440,56448],{"__ignoreMap":48},[52,56417,56418,56420,56422],{"class":54,"line":55},[52,56419,59],{"class":58},[52,56421,63],{"class":371},[52,56423,77],{"class":58},[52,56425,56426,56428,56430],{"class":54,"line":80},[52,56427,83],{"class":58},[52,56429,36901],{"class":371},[52,56431,77],{"class":58},[52,56433,56434,56436,56438],{"class":54,"line":108},[52,56435,2213],{"class":58},[52,56437,2216],{"class":371},[52,56439,105],{"class":58},[52,56441,56442,56444,56446],{"class":54,"line":118},[52,56443,2230],{"class":58},[52,56445,36901],{"class":371},[52,56447,77],{"class":58},[52,56449,56450,56452,56454],{"class":54,"line":594},[52,56451,121],{"class":58},[52,56453,63],{"class":371},[52,56455,77],{"class":58},[43,56457,56458],{"className":2507,"code":36923,"language":2509,"meta":48,"style":48},[31,56459,56460,56468,56476,56484,56492],{"__ignoreMap":48},[52,56461,56462,56464,56466],{"class":54,"line":55},[52,56463,59],{"class":58},[52,56465,63],{"class":371},[52,56467,77],{"class":58},[52,56469,56470,56472,56474],{"class":54,"line":80},[52,56471,83],{"class":58},[52,56473,36901],{"class":371},[52,56475,77],{"class":58},[52,56477,56478,56480,56482],{"class":54,"line":108},[52,56479,2213],{"class":58},[52,56481,2216],{"class":371},[52,56483,105],{"class":58},[52,56485,56486,56488,56490],{"class":54,"line":118},[52,56487,2230],{"class":58},[52,56489,36901],{"class":371},[52,56491,77],{"class":58},[52,56493,56494,56496,56498],{"class":54,"line":594},[52,56495,121],{"class":58},[52,56497,63],{"class":371},[52,56499,77],{"class":58},[43,56501,56502],{"className":419,"code":36923,"language":420,"meta":48,"style":48},[31,56503,56504,56512,56520,56528,56536],{"__ignoreMap":48},[52,56505,56506,56508,56510],{"class":54,"line":55},[52,56507,59],{"class":58},[52,56509,63],{"class":371},[52,56511,77],{"class":58},[52,56513,56514,56516,56518],{"class":54,"line":80},[52,56515,83],{"class":58},[52,56517,36901],{"class":371},[52,56519,77],{"class":58},[52,56521,56522,56524,56526],{"class":54,"line":108},[52,56523,2213],{"class":58},[52,56525,2216],{"class":371},[52,56527,105],{"class":58},[52,56529,56530,56532,56534],{"class":54,"line":118},[52,56531,2230],{"class":58},[52,56533,36901],{"class":371},[52,56535,77],{"class":58},[52,56537,56538,56540,56542],{"class":54,"line":594},[52,56539,121],{"class":58},[52,56541,63],{"class":371},[52,56543,77],{"class":58},[43,56545,56546],{"className":222,"code":37100,"language":224,"meta":48,"style":48},[31,56547,56548,56558,56562,56576,56580,56588,56596,56600,56604],{"__ignoreMap":48},[52,56549,56550,56552,56554,56556],{"class":54,"line":55},[52,56551,232],{"class":231},[52,56553,9231],{"class":58},[52,56555,238],{"class":231},[52,56557,9236],{"class":73},[52,56559,56560],{"class":54,"line":80},[52,56561,597],{"emptyLinePlaceholder":171},[52,56563,56564,56566,56568,56570,56572,56574],{"class":54,"line":108},[52,56565,1721],{"class":231},[52,56567,1724],{"class":371},[52,56569,1727],{"class":231},[52,56571,1730],{"class":231},[52,56573,1733],{"class":66},[52,56575,1736],{"class":58},[52,56577,56578],{"class":54,"line":118},[52,56579,1751],{"class":58},[52,56581,56582,56584,56586],{"class":54,"line":594},[52,56583,1756],{"class":58},[52,56585,37141],{"class":73},[52,56587,4722],{"class":58},[52,56589,56590,56592,56594],{"class":54,"line":600},[52,56591,4727],{"class":58},[52,56593,2869],{"class":73},[52,56595,2129],{"class":58},[52,56597,56598],{"class":54,"line":606},[52,56599,4744],{"class":58},[52,56601,56602],{"class":54,"line":653},[52,56603,1773],{"class":58},[52,56605,56606],{"class":54,"line":662},[52,56607,1778],{"class":58},[156,56609,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":56611},[56612,56613],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},{"title":36901,"description":36909},[56617,56618],{"title":36701,"path":36895,"stem":36897,"children":-1},{"title":37177,"path":37371,"stem":37373,"children":-1},1777818675767]