[{"data":1,"prerenderedAt":56267},["ShallowReactive",2],{"guide-docs":3,"component-docs":26888,"user-pro-status-data":56073,"doc-/docs/components/fog":56075,"doc-surr-/docs/components/fog":56264},[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,37099,37375,37649,37980,38312,38643,38899,39169,39414,39790,40061,40337,40537,40813,41013,41283,41559,41814,42146,42344,42722,42997,43197,43490,43766,44042,44318,44573,44951,45243,45576,45908,46164,46496,46788,46988,47233,47564,47840,48220,48420,48665,48921,49177,49453,49697,50029,50229,50521,50721,50996,51196,51443,51642,51974,52297,52542,52818,53018,53350,53626,53918,54251,54451,54865,55065,55341,55541,55741],{"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":30161,"componentType":20842,"description":36909,"extension":168,"meta":37094,"navigation":171,"path":37095,"requiresChild":27763,"seo":37096,"stem":37097,"__hash__":37098},"components/docs/components/Fog.md","Fog",{"type":8,"value":36903,"toc":37090},[36904,36907,36910,36912,36914,36917,36919,37088],[11,36905,36901],{"id":36906},"fog",[15,36908,36909],{},"Fog that fills the screen and interacts with the mouse",[26901,36911],{"component":36901},[23,36913,26905],{"id":21503},[26907,36915],{":props":36916},"[{\"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,36918,26913],{"id":26912},[217,36920,36921,36950,36978,37006,37034],{":tabs":1543},[43,36922,36924],{"className":45,"code":36923,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CFog />\n\u003C/Shader>\n",[31,36925,36926,36934,36942],{"__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,105],{"class":58},[52,36943,36944,36946,36948],{"class":54,"line":108},[52,36945,121],{"class":58},[52,36947,63],{"class":62},[52,36949,77],{"class":58},[43,36951,36952],{"className":360,"code":36923,"language":362,"meta":48,"style":48},[31,36953,36954,36962,36970],{"__ignoreMap":48},[52,36955,36956,36958,36960],{"class":54,"line":55},[52,36957,59],{"class":58},[52,36959,63],{"class":371},[52,36961,77],{"class":58},[52,36963,36964,36966,36968],{"class":54,"line":80},[52,36965,83],{"class":58},[52,36967,36901],{"class":371},[52,36969,105],{"class":58},[52,36971,36972,36974,36976],{"class":54,"line":108},[52,36973,121],{"class":58},[52,36975,63],{"class":371},[52,36977,77],{"class":58},[43,36979,36980],{"className":2507,"code":36923,"language":2509,"meta":48,"style":48},[31,36981,36982,36990,36998],{"__ignoreMap":48},[52,36983,36984,36986,36988],{"class":54,"line":55},[52,36985,59],{"class":58},[52,36987,63],{"class":371},[52,36989,77],{"class":58},[52,36991,36992,36994,36996],{"class":54,"line":80},[52,36993,83],{"class":58},[52,36995,36901],{"class":371},[52,36997,105],{"class":58},[52,36999,37000,37002,37004],{"class":54,"line":108},[52,37001,121],{"class":58},[52,37003,63],{"class":371},[52,37005,77],{"class":58},[43,37007,37008],{"className":419,"code":36923,"language":420,"meta":48,"style":48},[31,37009,37010,37018,37026],{"__ignoreMap":48},[52,37011,37012,37014,37016],{"class":54,"line":55},[52,37013,59],{"class":58},[52,37015,63],{"class":371},[52,37017,77],{"class":58},[52,37019,37020,37022,37024],{"class":54,"line":80},[52,37021,83],{"class":58},[52,37023,36901],{"class":371},[52,37025,105],{"class":58},[52,37027,37028,37030,37032],{"class":54,"line":108},[52,37029,121],{"class":58},[52,37031,63],{"class":371},[52,37033,77],{"class":58},[43,37035,37037],{"className":222,"code":37036,"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,37038,37039,37049,37053,37067,37071,37080,37084],{"__ignoreMap":48},[52,37040,37041,37043,37045,37047],{"class":54,"line":55},[52,37042,232],{"class":231},[52,37044,9231],{"class":58},[52,37046,238],{"class":231},[52,37048,9236],{"class":73},[52,37050,37051],{"class":54,"line":80},[52,37052,597],{"emptyLinePlaceholder":171},[52,37054,37055,37057,37059,37061,37063,37065],{"class":54,"line":108},[52,37056,1721],{"class":231},[52,37058,1724],{"class":371},[52,37060,1727],{"class":231},[52,37062,1730],{"class":231},[52,37064,1733],{"class":66},[52,37066,1736],{"class":58},[52,37068,37069],{"class":54,"line":118},[52,37070,1751],{"class":58},[52,37072,37073,37075,37078],{"class":54,"line":594},[52,37074,1756],{"class":58},[52,37076,37077],{"class":73},"'Fog'",[52,37079,2129],{"class":58},[52,37081,37082],{"class":54,"line":600},[52,37083,1773],{"class":58},[52,37085,37086],{"class":54,"line":606},[52,37087,1778],{"class":58},[156,37089,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37091},[37092,37093],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/fog",{"title":36901,"description":36909},"docs/components/Fog","wTPA86vW113i6zAKfXIjQoqgS1fLciss0o7C0lyGUeM",{"id":37100,"title":37101,"body":37102,"category":29105,"componentType":20848,"description":37109,"extension":168,"meta":37370,"navigation":171,"path":37371,"requiresChild":171,"seo":37372,"stem":37373,"__hash__":37374},"components/docs/components/Form3D.md","Form3D",{"type":8,"value":37103,"toc":37366},[37104,37107,37110,37112,37114,37117,37119,37364],[11,37105,37101],{"id":37106},"form3d",[15,37108,37109],{},"Wraps child content onto a 3D raymarched shape with lighting.",[26901,37111],{"component":37101},[23,37113,26905],{"id":21503},[26907,37115],{":props":37116},"[{\"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,37118,26913],{"id":26912},[217,37120,37121,37166,37210,37254,37298],{":tabs":1543},[43,37122,37124],{"className":45,"code":37123,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CForm3D>\n \u003CCircle />\n \u003C/Form3D>\n\u003C/Shader>\n",[31,37125,37126,37134,37142,37150,37158],{"__ignoreMap":48},[52,37127,37128,37130,37132],{"class":54,"line":55},[52,37129,59],{"class":58},[52,37131,63],{"class":62},[52,37133,77],{"class":58},[52,37135,37136,37138,37140],{"class":54,"line":80},[52,37137,83],{"class":58},[52,37139,37101],{"class":62},[52,37141,77],{"class":58},[52,37143,37144,37146,37148],{"class":54,"line":108},[52,37145,2213],{"class":58},[52,37147,2216],{"class":62},[52,37149,105],{"class":58},[52,37151,37152,37154,37156],{"class":54,"line":118},[52,37153,2230],{"class":58},[52,37155,37101],{"class":62},[52,37157,77],{"class":58},[52,37159,37160,37162,37164],{"class":54,"line":594},[52,37161,121],{"class":58},[52,37163,63],{"class":62},[52,37165,77],{"class":58},[43,37167,37168],{"className":360,"code":37123,"language":362,"meta":48,"style":48},[31,37169,37170,37178,37186,37194,37202],{"__ignoreMap":48},[52,37171,37172,37174,37176],{"class":54,"line":55},[52,37173,59],{"class":58},[52,37175,63],{"class":371},[52,37177,77],{"class":58},[52,37179,37180,37182,37184],{"class":54,"line":80},[52,37181,83],{"class":58},[52,37183,37101],{"class":371},[52,37185,77],{"class":58},[52,37187,37188,37190,37192],{"class":54,"line":108},[52,37189,2213],{"class":58},[52,37191,2216],{"class":371},[52,37193,105],{"class":58},[52,37195,37196,37198,37200],{"class":54,"line":118},[52,37197,2230],{"class":58},[52,37199,37101],{"class":371},[52,37201,77],{"class":58},[52,37203,37204,37206,37208],{"class":54,"line":594},[52,37205,121],{"class":58},[52,37207,63],{"class":371},[52,37209,77],{"class":58},[43,37211,37212],{"className":2507,"code":37123,"language":2509,"meta":48,"style":48},[31,37213,37214,37222,37230,37238,37246],{"__ignoreMap":48},[52,37215,37216,37218,37220],{"class":54,"line":55},[52,37217,59],{"class":58},[52,37219,63],{"class":371},[52,37221,77],{"class":58},[52,37223,37224,37226,37228],{"class":54,"line":80},[52,37225,83],{"class":58},[52,37227,37101],{"class":371},[52,37229,77],{"class":58},[52,37231,37232,37234,37236],{"class":54,"line":108},[52,37233,2213],{"class":58},[52,37235,2216],{"class":371},[52,37237,105],{"class":58},[52,37239,37240,37242,37244],{"class":54,"line":118},[52,37241,2230],{"class":58},[52,37243,37101],{"class":371},[52,37245,77],{"class":58},[52,37247,37248,37250,37252],{"class":54,"line":594},[52,37249,121],{"class":58},[52,37251,63],{"class":371},[52,37253,77],{"class":58},[43,37255,37256],{"className":419,"code":37123,"language":420,"meta":48,"style":48},[31,37257,37258,37266,37274,37282,37290],{"__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,37101],{"class":371},[52,37273,77],{"class":58},[52,37275,37276,37278,37280],{"class":54,"line":108},[52,37277,2213],{"class":58},[52,37279,2216],{"class":371},[52,37281,105],{"class":58},[52,37283,37284,37286,37288],{"class":54,"line":118},[52,37285,2230],{"class":58},[52,37287,37101],{"class":371},[52,37289,77],{"class":58},[52,37291,37292,37294,37296],{"class":54,"line":594},[52,37293,121],{"class":58},[52,37295,63],{"class":371},[52,37297,77],{"class":58},[43,37299,37301],{"className":222,"code":37300,"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,37302,37303,37313,37317,37331,37335,37344,37352,37356,37360],{"__ignoreMap":48},[52,37304,37305,37307,37309,37311],{"class":54,"line":55},[52,37306,232],{"class":231},[52,37308,9231],{"class":58},[52,37310,238],{"class":231},[52,37312,9236],{"class":73},[52,37314,37315],{"class":54,"line":80},[52,37316,597],{"emptyLinePlaceholder":171},[52,37318,37319,37321,37323,37325,37327,37329],{"class":54,"line":108},[52,37320,1721],{"class":231},[52,37322,1724],{"class":371},[52,37324,1727],{"class":231},[52,37326,1730],{"class":231},[52,37328,1733],{"class":66},[52,37330,1736],{"class":58},[52,37332,37333],{"class":54,"line":118},[52,37334,1751],{"class":58},[52,37336,37337,37339,37342],{"class":54,"line":594},[52,37338,1756],{"class":58},[52,37340,37341],{"class":73},"'Form3D'",[52,37343,4722],{"class":58},[52,37345,37346,37348,37350],{"class":54,"line":600},[52,37347,4727],{"class":58},[52,37349,2869],{"class":73},[52,37351,2129],{"class":58},[52,37353,37354],{"class":54,"line":606},[52,37355,4744],{"class":58},[52,37357,37358],{"class":54,"line":653},[52,37359,1773],{"class":58},[52,37361,37362],{"class":54,"line":662},[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/form3d",{"title":37101,"description":37109},"docs/components/Form3D","8XqsLqB5yaxvFw74KxxVoM73G15bcnrzRmad-ZlhJzI",{"id":37376,"title":18474,"body":37377,"category":32398,"componentType":20848,"description":37384,"extension":168,"meta":37644,"navigation":171,"path":37645,"requiresChild":171,"seo":37646,"stem":37647,"__hash__":37648},"components/docs/components/Glass.md",{"type":8,"value":37378,"toc":37640},[37379,37382,37385,37387,37389,37392,37394,37638],[11,37380,18474],{"id":37381},"glass",[15,37383,37384],{},"Optically realistic glass lens driven in a custom shape",[26901,37386],{"component":18474},[23,37388,26905],{"id":21503},[26907,37390],{":props":37391},"[{\"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,37393,26913],{"id":26912},[217,37395,37396,37441,37485,37529,37573],{":tabs":1543},[43,37397,37399],{"className":45,"code":37398,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlass>\n \u003CCircle />\n \u003C/Glass>\n\u003C/Shader>\n",[31,37400,37401,37409,37417,37425,37433],{"__ignoreMap":48},[52,37402,37403,37405,37407],{"class":54,"line":55},[52,37404,59],{"class":58},[52,37406,63],{"class":62},[52,37408,77],{"class":58},[52,37410,37411,37413,37415],{"class":54,"line":80},[52,37412,83],{"class":58},[52,37414,18474],{"class":62},[52,37416,77],{"class":58},[52,37418,37419,37421,37423],{"class":54,"line":108},[52,37420,2213],{"class":58},[52,37422,2216],{"class":62},[52,37424,105],{"class":58},[52,37426,37427,37429,37431],{"class":54,"line":118},[52,37428,2230],{"class":58},[52,37430,18474],{"class":62},[52,37432,77],{"class":58},[52,37434,37435,37437,37439],{"class":54,"line":594},[52,37436,121],{"class":58},[52,37438,63],{"class":62},[52,37440,77],{"class":58},[43,37442,37443],{"className":360,"code":37398,"language":362,"meta":48,"style":48},[31,37444,37445,37453,37461,37469,37477],{"__ignoreMap":48},[52,37446,37447,37449,37451],{"class":54,"line":55},[52,37448,59],{"class":58},[52,37450,63],{"class":371},[52,37452,77],{"class":58},[52,37454,37455,37457,37459],{"class":54,"line":80},[52,37456,83],{"class":58},[52,37458,18474],{"class":371},[52,37460,77],{"class":58},[52,37462,37463,37465,37467],{"class":54,"line":108},[52,37464,2213],{"class":58},[52,37466,2216],{"class":371},[52,37468,105],{"class":58},[52,37470,37471,37473,37475],{"class":54,"line":118},[52,37472,2230],{"class":58},[52,37474,18474],{"class":371},[52,37476,77],{"class":58},[52,37478,37479,37481,37483],{"class":54,"line":594},[52,37480,121],{"class":58},[52,37482,63],{"class":371},[52,37484,77],{"class":58},[43,37486,37487],{"className":2507,"code":37398,"language":2509,"meta":48,"style":48},[31,37488,37489,37497,37505,37513,37521],{"__ignoreMap":48},[52,37490,37491,37493,37495],{"class":54,"line":55},[52,37492,59],{"class":58},[52,37494,63],{"class":371},[52,37496,77],{"class":58},[52,37498,37499,37501,37503],{"class":54,"line":80},[52,37500,83],{"class":58},[52,37502,18474],{"class":371},[52,37504,77],{"class":58},[52,37506,37507,37509,37511],{"class":54,"line":108},[52,37508,2213],{"class":58},[52,37510,2216],{"class":371},[52,37512,105],{"class":58},[52,37514,37515,37517,37519],{"class":54,"line":118},[52,37516,2230],{"class":58},[52,37518,18474],{"class":371},[52,37520,77],{"class":58},[52,37522,37523,37525,37527],{"class":54,"line":594},[52,37524,121],{"class":58},[52,37526,63],{"class":371},[52,37528,77],{"class":58},[43,37530,37531],{"className":419,"code":37398,"language":420,"meta":48,"style":48},[31,37532,37533,37541,37549,37557,37565],{"__ignoreMap":48},[52,37534,37535,37537,37539],{"class":54,"line":55},[52,37536,59],{"class":58},[52,37538,63],{"class":371},[52,37540,77],{"class":58},[52,37542,37543,37545,37547],{"class":54,"line":80},[52,37544,83],{"class":58},[52,37546,18474],{"class":371},[52,37548,77],{"class":58},[52,37550,37551,37553,37555],{"class":54,"line":108},[52,37552,2213],{"class":58},[52,37554,2216],{"class":371},[52,37556,105],{"class":58},[52,37558,37559,37561,37563],{"class":54,"line":118},[52,37560,2230],{"class":58},[52,37562,18474],{"class":371},[52,37564,77],{"class":58},[52,37566,37567,37569,37571],{"class":54,"line":594},[52,37568,121],{"class":58},[52,37570,63],{"class":371},[52,37572,77],{"class":58},[43,37574,37576],{"className":222,"code":37575,"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,37577,37578,37588,37592,37606,37610,37618,37626,37630,37634],{"__ignoreMap":48},[52,37579,37580,37582,37584,37586],{"class":54,"line":55},[52,37581,232],{"class":231},[52,37583,9231],{"class":58},[52,37585,238],{"class":231},[52,37587,9236],{"class":73},[52,37589,37590],{"class":54,"line":80},[52,37591,597],{"emptyLinePlaceholder":171},[52,37593,37594,37596,37598,37600,37602,37604],{"class":54,"line":108},[52,37595,1721],{"class":231},[52,37597,1724],{"class":371},[52,37599,1727],{"class":231},[52,37601,1730],{"class":231},[52,37603,1733],{"class":66},[52,37605,1736],{"class":58},[52,37607,37608],{"class":54,"line":118},[52,37609,1751],{"class":58},[52,37611,37612,37614,37616],{"class":54,"line":594},[52,37613,1756],{"class":58},[52,37615,19015],{"class":73},[52,37617,4722],{"class":58},[52,37619,37620,37622,37624],{"class":54,"line":600},[52,37621,4727],{"class":58},[52,37623,2869],{"class":73},[52,37625,2129],{"class":58},[52,37627,37628],{"class":54,"line":606},[52,37629,4744],{"class":58},[52,37631,37632],{"class":54,"line":653},[52,37633,1773],{"class":58},[52,37635,37636],{"class":54,"line":662},[52,37637,1778],{"class":58},[156,37639,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":37641},[37642,37643],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glass",{"title":18474,"description":37384},"docs/components/Glass","7MGDmd4hM537b3YfdwzpJ3CjLxdZ5sAvp-QkTLLcFts",{"id":37650,"title":3936,"body":37651,"category":29105,"componentType":20848,"description":37658,"extension":168,"meta":37975,"navigation":171,"path":37976,"requiresChild":171,"seo":37977,"stem":37978,"__hash__":37979},"components/docs/components/GlassTiles.md",{"type":8,"value":37652,"toc":37971},[37653,37656,37659,37661,37663,37666,37668,37969],[11,37654,3936],{"id":37655},"glasstiles",[15,37657,37658],{},"Refraction-like distortion in a tile grid pattern",[26901,37660],{"component":3936},[23,37662,26905],{"id":21503},[26907,37664],{":props":37665},"[{\"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,37667,26913],{"id":26912},[217,37669,37670,37727,37786,37842,37900],{":tabs":1543},[43,37671,37673],{"className":45,"code":37672,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n :intensity=\"2\"\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37674,37675,37683,37690,37699,37703,37711,37719],{"__ignoreMap":48},[52,37676,37677,37679,37681],{"class":54,"line":55},[52,37678,59],{"class":58},[52,37680,63],{"class":62},[52,37682,77],{"class":58},[52,37684,37685,37687],{"class":54,"line":80},[52,37686,83],{"class":58},[52,37688,37689],{"class":62},"GlassTiles\n",[52,37691,37692,37694,37696],{"class":54,"line":108},[52,37693,17870],{"class":66},[52,37695,70],{"class":58},[52,37697,37698],{"class":73},"\"2\"\n",[52,37700,37701],{"class":54,"line":118},[52,37702,26949],{"class":58},[52,37704,37705,37707,37709],{"class":54,"line":594},[52,37706,2213],{"class":58},[52,37708,2216],{"class":62},[52,37710,105],{"class":58},[52,37712,37713,37715,37717],{"class":54,"line":600},[52,37714,2230],{"class":58},[52,37716,3936],{"class":62},[52,37718,77],{"class":58},[52,37720,37721,37723,37725],{"class":54,"line":606},[52,37722,121],{"class":58},[52,37724,63],{"class":62},[52,37726,77],{"class":58},[43,37728,37730],{"className":360,"code":37729,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlassTiles\n intensity={2}\n >\n \u003CCircle />\n \u003C/GlassTiles>\n\u003C/Shader>\n",[31,37731,37732,37740,37746,37758,37762,37770,37778],{"__ignoreMap":48},[52,37733,37734,37736,37738],{"class":54,"line":55},[52,37735,59],{"class":58},[52,37737,63],{"class":371},[52,37739,77],{"class":58},[52,37741,37742,37744],{"class":54,"line":80},[52,37743,83],{"class":58},[52,37745,37689],{"class":371},[52,37747,37748,37750,37752,37754,37756],{"class":54,"line":108},[52,37749,17981],{"class":66},[52,37751,70],{"class":231},[52,37753,723],{"class":58},[52,37755,4927],{"class":371},[52,37757,729],{"class":58},[52,37759,37760],{"class":54,"line":118},[52,37761,26949],{"class":58},[52,37763,37764,37766,37768],{"class":54,"line":594},[52,37765,2213],{"class":58},[52,37767,2216],{"class":371},[52,37769,105],{"class":58},[52,37771,37772,37774,37776],{"class":54,"line":600},[52,37773,2230],{"class":58},[52,37775,3936],{"class":371},[52,37777,77],{"class":58},[52,37779,37780,37782,37784],{"class":54,"line":606},[52,37781,121],{"class":58},[52,37783,63],{"class":371},[52,37785,77],{"class":58},[43,37787,37788],{"className":2507,"code":37729,"language":2509,"meta":48,"style":48},[31,37789,37790,37798,37804,37814,37818,37826,37834],{"__ignoreMap":48},[52,37791,37792,37794,37796],{"class":54,"line":55},[52,37793,59],{"class":58},[52,37795,63],{"class":371},[52,37797,77],{"class":58},[52,37799,37800,37802],{"class":54,"line":80},[52,37801,83],{"class":58},[52,37803,37689],{"class":371},[52,37805,37806,37808,37810,37812],{"class":54,"line":108},[52,37807,17981],{"class":66},[52,37809,24845],{"class":58},[52,37811,4927],{"class":371},[52,37813,729],{"class":58},[52,37815,37816],{"class":54,"line":118},[52,37817,26949],{"class":58},[52,37819,37820,37822,37824],{"class":54,"line":594},[52,37821,2213],{"class":58},[52,37823,2216],{"class":371},[52,37825,105],{"class":58},[52,37827,37828,37830,37832],{"class":54,"line":600},[52,37829,2230],{"class":58},[52,37831,3936],{"class":371},[52,37833,77],{"class":58},[52,37835,37836,37838,37840],{"class":54,"line":606},[52,37837,121],{"class":58},[52,37839,63],{"class":371},[52,37841,77],{"class":58},[43,37843,37844],{"className":419,"code":37729,"language":420,"meta":48,"style":48},[31,37845,37846,37854,37860,37872,37876,37884,37892],{"__ignoreMap":48},[52,37847,37848,37850,37852],{"class":54,"line":55},[52,37849,59],{"class":58},[52,37851,63],{"class":371},[52,37853,77],{"class":58},[52,37855,37856,37858],{"class":54,"line":80},[52,37857,83],{"class":58},[52,37859,37689],{"class":371},[52,37861,37862,37864,37866,37868,37870],{"class":54,"line":108},[52,37863,17981],{"class":66},[52,37865,70],{"class":231},[52,37867,723],{"class":58},[52,37869,4927],{"class":371},[52,37871,729],{"class":58},[52,37873,37874],{"class":54,"line":118},[52,37875,26949],{"class":58},[52,37877,37878,37880,37882],{"class":54,"line":594},[52,37879,2213],{"class":58},[52,37881,2216],{"class":371},[52,37883,105],{"class":58},[52,37885,37886,37888,37890],{"class":54,"line":600},[52,37887,2230],{"class":58},[52,37889,3936],{"class":371},[52,37891,77],{"class":58},[52,37893,37894,37896,37898],{"class":54,"line":606},[52,37895,121],{"class":58},[52,37897,63],{"class":371},[52,37899,77],{"class":58},[43,37901,37903],{"className":222,"code":37902,"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,37904,37905,37915,37919,37933,37937,37949,37957,37961,37965],{"__ignoreMap":48},[52,37906,37907,37909,37911,37913],{"class":54,"line":55},[52,37908,232],{"class":231},[52,37910,9231],{"class":58},[52,37912,238],{"class":231},[52,37914,9236],{"class":73},[52,37916,37917],{"class":54,"line":80},[52,37918,597],{"emptyLinePlaceholder":171},[52,37920,37921,37923,37925,37927,37929,37931],{"class":54,"line":108},[52,37922,1721],{"class":231},[52,37924,1724],{"class":371},[52,37926,1727],{"class":231},[52,37928,1730],{"class":231},[52,37930,1733],{"class":66},[52,37932,1736],{"class":58},[52,37934,37935],{"class":54,"line":118},[52,37936,1751],{"class":58},[52,37938,37939,37941,37943,37945,37947],{"class":54,"line":594},[52,37940,1756],{"class":58},[52,37942,4295],{"class":73},[52,37944,27194],{"class":58},[52,37946,4927],{"class":371},[52,37948,5259],{"class":58},[52,37950,37951,37953,37955],{"class":54,"line":600},[52,37952,4727],{"class":58},[52,37954,2869],{"class":73},[52,37956,2129],{"class":58},[52,37958,37959],{"class":54,"line":606},[52,37960,4744],{"class":58},[52,37962,37963],{"class":54,"line":653},[52,37964,1773],{"class":58},[52,37966,37967],{"class":54,"line":662},[52,37968,1778],{"class":58},[156,37970,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":37972},[37973,37974],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glasstiles",{"title":3936,"description":37658},"docs/components/GlassTiles","HTlkJD4rD2DqWXvrmOp6EdkMLFMqSL83sYBemi3Hccs",{"id":37981,"title":37982,"body":37983,"category":27503,"componentType":20848,"description":37990,"extension":168,"meta":38307,"navigation":171,"path":38308,"requiresChild":171,"seo":38309,"stem":38310,"__hash__":38311},"components/docs/components/Glitch.md","Glitch",{"type":8,"value":37984,"toc":38303},[37985,37988,37991,37993,37995,37998,38000,38301],[11,37986,37982],{"id":37987},"glitch",[15,37989,37990],{},"Digital glitch that melts pixels and distorts colors",[26901,37992],{"component":37982},[23,37994,26905],{"id":21503},[26907,37996],{":props":37997},"[{\"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,37999,26913],{"id":26912},[217,38001,38002,38058,38117,38173,38231],{":tabs":1543},[43,38003,38005],{"className":45,"code":38004,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n :intensity=\"0.5\"\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,38006,38007,38015,38022,38030,38034,38042,38050],{"__ignoreMap":48},[52,38008,38009,38011,38013],{"class":54,"line":55},[52,38010,59],{"class":58},[52,38012,63],{"class":62},[52,38014,77],{"class":58},[52,38016,38017,38019],{"class":54,"line":80},[52,38018,83],{"class":58},[52,38020,38021],{"class":62},"Glitch\n",[52,38023,38024,38026,38028],{"class":54,"line":108},[52,38025,17870],{"class":66},[52,38027,70],{"class":58},[52,38029,32462],{"class":73},[52,38031,38032],{"class":54,"line":118},[52,38033,26949],{"class":58},[52,38035,38036,38038,38040],{"class":54,"line":594},[52,38037,2213],{"class":58},[52,38039,2216],{"class":62},[52,38041,105],{"class":58},[52,38043,38044,38046,38048],{"class":54,"line":600},[52,38045,2230],{"class":58},[52,38047,37982],{"class":62},[52,38049,77],{"class":58},[52,38051,38052,38054,38056],{"class":54,"line":606},[52,38053,121],{"class":58},[52,38055,63],{"class":62},[52,38057,77],{"class":58},[43,38059,38061],{"className":360,"code":38060,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlitch\n intensity={0.5}\n >\n \u003CCircle />\n \u003C/Glitch>\n\u003C/Shader>\n",[31,38062,38063,38071,38077,38089,38093,38101,38109],{"__ignoreMap":48},[52,38064,38065,38067,38069],{"class":54,"line":55},[52,38066,59],{"class":58},[52,38068,63],{"class":371},[52,38070,77],{"class":58},[52,38072,38073,38075],{"class":54,"line":80},[52,38074,83],{"class":58},[52,38076,38021],{"class":371},[52,38078,38079,38081,38083,38085,38087],{"class":54,"line":108},[52,38080,17981],{"class":66},[52,38082,70],{"class":231},[52,38084,723],{"class":58},[52,38086,5467],{"class":371},[52,38088,729],{"class":58},[52,38090,38091],{"class":54,"line":118},[52,38092,26949],{"class":58},[52,38094,38095,38097,38099],{"class":54,"line":594},[52,38096,2213],{"class":58},[52,38098,2216],{"class":371},[52,38100,105],{"class":58},[52,38102,38103,38105,38107],{"class":54,"line":600},[52,38104,2230],{"class":58},[52,38106,37982],{"class":371},[52,38108,77],{"class":58},[52,38110,38111,38113,38115],{"class":54,"line":606},[52,38112,121],{"class":58},[52,38114,63],{"class":371},[52,38116,77],{"class":58},[43,38118,38119],{"className":2507,"code":38060,"language":2509,"meta":48,"style":48},[31,38120,38121,38129,38135,38145,38149,38157,38165],{"__ignoreMap":48},[52,38122,38123,38125,38127],{"class":54,"line":55},[52,38124,59],{"class":58},[52,38126,63],{"class":371},[52,38128,77],{"class":58},[52,38130,38131,38133],{"class":54,"line":80},[52,38132,83],{"class":58},[52,38134,38021],{"class":371},[52,38136,38137,38139,38141,38143],{"class":54,"line":108},[52,38138,17981],{"class":66},[52,38140,24845],{"class":58},[52,38142,5467],{"class":371},[52,38144,729],{"class":58},[52,38146,38147],{"class":54,"line":118},[52,38148,26949],{"class":58},[52,38150,38151,38153,38155],{"class":54,"line":594},[52,38152,2213],{"class":58},[52,38154,2216],{"class":371},[52,38156,105],{"class":58},[52,38158,38159,38161,38163],{"class":54,"line":600},[52,38160,2230],{"class":58},[52,38162,37982],{"class":371},[52,38164,77],{"class":58},[52,38166,38167,38169,38171],{"class":54,"line":606},[52,38168,121],{"class":58},[52,38170,63],{"class":371},[52,38172,77],{"class":58},[43,38174,38175],{"className":419,"code":38060,"language":420,"meta":48,"style":48},[31,38176,38177,38185,38191,38203,38207,38215,38223],{"__ignoreMap":48},[52,38178,38179,38181,38183],{"class":54,"line":55},[52,38180,59],{"class":58},[52,38182,63],{"class":371},[52,38184,77],{"class":58},[52,38186,38187,38189],{"class":54,"line":80},[52,38188,83],{"class":58},[52,38190,38021],{"class":371},[52,38192,38193,38195,38197,38199,38201],{"class":54,"line":108},[52,38194,17981],{"class":66},[52,38196,70],{"class":231},[52,38198,723],{"class":58},[52,38200,5467],{"class":371},[52,38202,729],{"class":58},[52,38204,38205],{"class":54,"line":118},[52,38206,26949],{"class":58},[52,38208,38209,38211,38213],{"class":54,"line":594},[52,38210,2213],{"class":58},[52,38212,2216],{"class":371},[52,38214,105],{"class":58},[52,38216,38217,38219,38221],{"class":54,"line":600},[52,38218,2230],{"class":58},[52,38220,37982],{"class":371},[52,38222,77],{"class":58},[52,38224,38225,38227,38229],{"class":54,"line":606},[52,38226,121],{"class":58},[52,38228,63],{"class":371},[52,38230,77],{"class":58},[43,38232,38234],{"className":222,"code":38233,"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,38235,38236,38246,38250,38264,38268,38281,38289,38293,38297],{"__ignoreMap":48},[52,38237,38238,38240,38242,38244],{"class":54,"line":55},[52,38239,232],{"class":231},[52,38241,9231],{"class":58},[52,38243,238],{"class":231},[52,38245,9236],{"class":73},[52,38247,38248],{"class":54,"line":80},[52,38249,597],{"emptyLinePlaceholder":171},[52,38251,38252,38254,38256,38258,38260,38262],{"class":54,"line":108},[52,38253,1721],{"class":231},[52,38255,1724],{"class":371},[52,38257,1727],{"class":231},[52,38259,1730],{"class":231},[52,38261,1733],{"class":66},[52,38263,1736],{"class":58},[52,38265,38266],{"class":54,"line":118},[52,38267,1751],{"class":58},[52,38269,38270,38272,38275,38277,38279],{"class":54,"line":594},[52,38271,1756],{"class":58},[52,38273,38274],{"class":73},"'Glitch'",[52,38276,27194],{"class":58},[52,38278,5467],{"class":371},[52,38280,5259],{"class":58},[52,38282,38283,38285,38287],{"class":54,"line":600},[52,38284,4727],{"class":58},[52,38286,2869],{"class":73},[52,38288,2129],{"class":58},[52,38290,38291],{"class":54,"line":606},[52,38292,4744],{"class":58},[52,38294,38295],{"class":54,"line":653},[52,38296,1773],{"class":58},[52,38298,38299],{"class":54,"line":662},[52,38300,1778],{"class":58},[156,38302,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38304},[38305,38306],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glitch",{"title":37982,"description":37990},"docs/components/Glitch","OY2BpGeGXgnJT4TDd8O0bBgzeRG8wU89gQwhH5Ml-UA",{"id":38313,"title":9509,"body":38314,"category":27503,"componentType":20848,"description":38321,"extension":168,"meta":38638,"navigation":171,"path":38639,"requiresChild":171,"seo":38640,"stem":38641,"__hash__":38642},"components/docs/components/Glow.md",{"type":8,"value":38315,"toc":38634},[38316,38319,38322,38324,38326,38329,38331,38632],[11,38317,9509],{"id":38318},"glow",[15,38320,38321],{},"Soft glow effect with adjustable intensity",[26901,38323],{"component":9509},[23,38325,26905],{"id":21503},[26907,38327],{":props":38328},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Glow intensity (brightness of the glow effect)\"},{\"name\":\"threshold\",\"type\":\"number\",\"default\":\"0.5\",\"description\":\"Brightness threshold for glow extraction (lower = more glow)\"},{\"name\":\"size\",\"type\":\"number\",\"default\":\"10\",\"description\":\"Size/spread of the glow effect\"}]",[23,38330,26913],{"id":26912},[217,38332,38333,38389,38448,38504,38562],{":tabs":1543},[43,38334,38336],{"className":45,"code":38335,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,38337,38338,38346,38353,38361,38365,38373,38381],{"__ignoreMap":48},[52,38339,38340,38342,38344],{"class":54,"line":55},[52,38341,59],{"class":58},[52,38343,63],{"class":62},[52,38345,77],{"class":58},[52,38347,38348,38350],{"class":54,"line":80},[52,38349,83],{"class":58},[52,38351,38352],{"class":62},"Glow\n",[52,38354,38355,38357,38359],{"class":54,"line":108},[52,38356,17870],{"class":66},[52,38358,70],{"class":58},[52,38360,28827],{"class":73},[52,38362,38363],{"class":54,"line":118},[52,38364,26949],{"class":58},[52,38366,38367,38369,38371],{"class":54,"line":594},[52,38368,2213],{"class":58},[52,38370,2216],{"class":62},[52,38372,105],{"class":58},[52,38374,38375,38377,38379],{"class":54,"line":600},[52,38376,2230],{"class":58},[52,38378,9509],{"class":62},[52,38380,77],{"class":58},[52,38382,38383,38385,38387],{"class":54,"line":606},[52,38384,121],{"class":58},[52,38386,63],{"class":62},[52,38388,77],{"class":58},[43,38390,38392],{"className":360,"code":38391,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGlow\n intensity={1}\n >\n \u003CCircle />\n \u003C/Glow>\n\u003C/Shader>\n",[31,38393,38394,38402,38408,38420,38424,38432,38440],{"__ignoreMap":48},[52,38395,38396,38398,38400],{"class":54,"line":55},[52,38397,59],{"class":58},[52,38399,63],{"class":371},[52,38401,77],{"class":58},[52,38403,38404,38406],{"class":54,"line":80},[52,38405,83],{"class":58},[52,38407,38352],{"class":371},[52,38409,38410,38412,38414,38416,38418],{"class":54,"line":108},[52,38411,17981],{"class":66},[52,38413,70],{"class":231},[52,38415,723],{"class":58},[52,38417,6391],{"class":371},[52,38419,729],{"class":58},[52,38421,38422],{"class":54,"line":118},[52,38423,26949],{"class":58},[52,38425,38426,38428,38430],{"class":54,"line":594},[52,38427,2213],{"class":58},[52,38429,2216],{"class":371},[52,38431,105],{"class":58},[52,38433,38434,38436,38438],{"class":54,"line":600},[52,38435,2230],{"class":58},[52,38437,9509],{"class":371},[52,38439,77],{"class":58},[52,38441,38442,38444,38446],{"class":54,"line":606},[52,38443,121],{"class":58},[52,38445,63],{"class":371},[52,38447,77],{"class":58},[43,38449,38450],{"className":2507,"code":38391,"language":2509,"meta":48,"style":48},[31,38451,38452,38460,38466,38476,38480,38488,38496],{"__ignoreMap":48},[52,38453,38454,38456,38458],{"class":54,"line":55},[52,38455,59],{"class":58},[52,38457,63],{"class":371},[52,38459,77],{"class":58},[52,38461,38462,38464],{"class":54,"line":80},[52,38463,83],{"class":58},[52,38465,38352],{"class":371},[52,38467,38468,38470,38472,38474],{"class":54,"line":108},[52,38469,17981],{"class":66},[52,38471,24845],{"class":58},[52,38473,6391],{"class":371},[52,38475,729],{"class":58},[52,38477,38478],{"class":54,"line":118},[52,38479,26949],{"class":58},[52,38481,38482,38484,38486],{"class":54,"line":594},[52,38483,2213],{"class":58},[52,38485,2216],{"class":371},[52,38487,105],{"class":58},[52,38489,38490,38492,38494],{"class":54,"line":600},[52,38491,2230],{"class":58},[52,38493,9509],{"class":371},[52,38495,77],{"class":58},[52,38497,38498,38500,38502],{"class":54,"line":606},[52,38499,121],{"class":58},[52,38501,63],{"class":371},[52,38503,77],{"class":58},[43,38505,38506],{"className":419,"code":38391,"language":420,"meta":48,"style":48},[31,38507,38508,38516,38522,38534,38538,38546,38554],{"__ignoreMap":48},[52,38509,38510,38512,38514],{"class":54,"line":55},[52,38511,59],{"class":58},[52,38513,63],{"class":371},[52,38515,77],{"class":58},[52,38517,38518,38520],{"class":54,"line":80},[52,38519,83],{"class":58},[52,38521,38352],{"class":371},[52,38523,38524,38526,38528,38530,38532],{"class":54,"line":108},[52,38525,17981],{"class":66},[52,38527,70],{"class":231},[52,38529,723],{"class":58},[52,38531,6391],{"class":371},[52,38533,729],{"class":58},[52,38535,38536],{"class":54,"line":118},[52,38537,26949],{"class":58},[52,38539,38540,38542,38544],{"class":54,"line":594},[52,38541,2213],{"class":58},[52,38543,2216],{"class":371},[52,38545,105],{"class":58},[52,38547,38548,38550,38552],{"class":54,"line":600},[52,38549,2230],{"class":58},[52,38551,9509],{"class":371},[52,38553,77],{"class":58},[52,38555,38556,38558,38560],{"class":54,"line":606},[52,38557,121],{"class":58},[52,38559,63],{"class":371},[52,38561,77],{"class":58},[43,38563,38565],{"className":222,"code":38564,"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,38566,38567,38577,38581,38595,38599,38612,38620,38624,38628],{"__ignoreMap":48},[52,38568,38569,38571,38573,38575],{"class":54,"line":55},[52,38570,232],{"class":231},[52,38572,9231],{"class":58},[52,38574,238],{"class":231},[52,38576,9236],{"class":73},[52,38578,38579],{"class":54,"line":80},[52,38580,597],{"emptyLinePlaceholder":171},[52,38582,38583,38585,38587,38589,38591,38593],{"class":54,"line":108},[52,38584,1721],{"class":231},[52,38586,1724],{"class":371},[52,38588,1727],{"class":231},[52,38590,1730],{"class":231},[52,38592,1733],{"class":66},[52,38594,1736],{"class":58},[52,38596,38597],{"class":54,"line":118},[52,38598,1751],{"class":58},[52,38600,38601,38603,38606,38608,38610],{"class":54,"line":594},[52,38602,1756],{"class":58},[52,38604,38605],{"class":73},"'Glow'",[52,38607,27194],{"class":58},[52,38609,6391],{"class":371},[52,38611,5259],{"class":58},[52,38613,38614,38616,38618],{"class":54,"line":600},[52,38615,4727],{"class":58},[52,38617,2869],{"class":73},[52,38619,2129],{"class":58},[52,38621,38622],{"class":54,"line":606},[52,38623,4744],{"class":58},[52,38625,38626],{"class":54,"line":653},[52,38627,1773],{"class":58},[52,38629,38630],{"class":54,"line":662},[52,38631,1778],{"class":58},[156,38633,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38635},[38636,38637],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/glow",{"title":9509,"description":38321},"docs/components/Glow","nY6FLTxSC0jk4JC2WGI4IwGXHT0zG4brVxkpPPza0M0",{"id":38644,"title":38645,"body":38646,"category":27760,"componentType":20842,"description":38653,"extension":168,"meta":38894,"navigation":171,"path":38895,"requiresChild":27763,"seo":38896,"stem":38897,"__hash__":38898},"components/docs/components/Godrays.md","Godrays",{"type":8,"value":38647,"toc":38890},[38648,38651,38654,38656,38658,38661,38663,38888],[11,38649,38645],{"id":38650},"godrays",[15,38652,38653],{},"Volumetric light rays emanating from a point",[26901,38655],{"component":38645},[23,38657,26905],{"id":21503},[26907,38659],{":props":38660},"[{\"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,38662,26913],{"id":26912},[217,38664,38665,38705,38748,38788,38830],{":tabs":1543},[43,38666,38668],{"className":45,"code":38667,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n :intensity=\"0.8\"\n />\n\u003C/Shader>\n",[31,38669,38670,38678,38685,38693,38697],{"__ignoreMap":48},[52,38671,38672,38674,38676],{"class":54,"line":55},[52,38673,59],{"class":58},[52,38675,63],{"class":62},[52,38677,77],{"class":58},[52,38679,38680,38682],{"class":54,"line":80},[52,38681,83],{"class":58},[52,38683,38684],{"class":62},"Godrays\n",[52,38686,38687,38689,38691],{"class":54,"line":108},[52,38688,17870],{"class":66},[52,38690,70],{"class":58},[52,38692,7366],{"class":73},[52,38694,38695],{"class":54,"line":118},[52,38696,1224],{"class":58},[52,38698,38699,38701,38703],{"class":54,"line":594},[52,38700,121],{"class":58},[52,38702,63],{"class":62},[52,38704,77],{"class":58},[43,38706,38708],{"className":360,"code":38707,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CGodrays\n intensity={0.8}\n />\n\u003C/Shader>\n",[31,38709,38710,38718,38724,38736,38740],{"__ignoreMap":48},[52,38711,38712,38714,38716],{"class":54,"line":55},[52,38713,59],{"class":58},[52,38715,63],{"class":371},[52,38717,77],{"class":58},[52,38719,38720,38722],{"class":54,"line":80},[52,38721,83],{"class":58},[52,38723,38684],{"class":371},[52,38725,38726,38728,38730,38732,38734],{"class":54,"line":108},[52,38727,17981],{"class":66},[52,38729,70],{"class":231},[52,38731,723],{"class":58},[52,38733,4011],{"class":371},[52,38735,729],{"class":58},[52,38737,38738],{"class":54,"line":118},[52,38739,1224],{"class":58},[52,38741,38742,38744,38746],{"class":54,"line":594},[52,38743,121],{"class":58},[52,38745,63],{"class":371},[52,38747,77],{"class":58},[43,38749,38750],{"className":2507,"code":38707,"language":2509,"meta":48,"style":48},[31,38751,38752,38760,38766,38776,38780],{"__ignoreMap":48},[52,38753,38754,38756,38758],{"class":54,"line":55},[52,38755,59],{"class":58},[52,38757,63],{"class":371},[52,38759,77],{"class":58},[52,38761,38762,38764],{"class":54,"line":80},[52,38763,83],{"class":58},[52,38765,38684],{"class":371},[52,38767,38768,38770,38772,38774],{"class":54,"line":108},[52,38769,17981],{"class":66},[52,38771,24845],{"class":58},[52,38773,4011],{"class":371},[52,38775,729],{"class":58},[52,38777,38778],{"class":54,"line":118},[52,38779,1224],{"class":58},[52,38781,38782,38784,38786],{"class":54,"line":594},[52,38783,121],{"class":58},[52,38785,63],{"class":371},[52,38787,77],{"class":58},[43,38789,38790],{"className":419,"code":38707,"language":420,"meta":48,"style":48},[31,38791,38792,38800,38806,38818,38822],{"__ignoreMap":48},[52,38793,38794,38796,38798],{"class":54,"line":55},[52,38795,59],{"class":58},[52,38797,63],{"class":371},[52,38799,77],{"class":58},[52,38801,38802,38804],{"class":54,"line":80},[52,38803,83],{"class":58},[52,38805,38684],{"class":371},[52,38807,38808,38810,38812,38814,38816],{"class":54,"line":108},[52,38809,17981],{"class":66},[52,38811,70],{"class":231},[52,38813,723],{"class":58},[52,38815,4011],{"class":371},[52,38817,729],{"class":58},[52,38819,38820],{"class":54,"line":118},[52,38821,1224],{"class":58},[52,38823,38824,38826,38828],{"class":54,"line":594},[52,38825,121],{"class":58},[52,38827,63],{"class":371},[52,38829,77],{"class":58},[43,38831,38833],{"className":222,"code":38832,"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,38834,38835,38845,38849,38863,38867,38880,38884],{"__ignoreMap":48},[52,38836,38837,38839,38841,38843],{"class":54,"line":55},[52,38838,232],{"class":231},[52,38840,9231],{"class":58},[52,38842,238],{"class":231},[52,38844,9236],{"class":73},[52,38846,38847],{"class":54,"line":80},[52,38848,597],{"emptyLinePlaceholder":171},[52,38850,38851,38853,38855,38857,38859,38861],{"class":54,"line":108},[52,38852,1721],{"class":231},[52,38854,1724],{"class":371},[52,38856,1727],{"class":231},[52,38858,1730],{"class":231},[52,38860,1733],{"class":66},[52,38862,1736],{"class":58},[52,38864,38865],{"class":54,"line":118},[52,38866,1751],{"class":58},[52,38868,38869,38871,38874,38876,38878],{"class":54,"line":594},[52,38870,1756],{"class":58},[52,38872,38873],{"class":73},"'Godrays'",[52,38875,27194],{"class":58},[52,38877,4011],{"class":371},[52,38879,1768],{"class":58},[52,38881,38882],{"class":54,"line":600},[52,38883,1773],{"class":58},[52,38885,38886],{"class":54,"line":606},[52,38887,1778],{"class":58},[156,38889,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":38891},[38892,38893],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/godrays",{"title":38645,"description":38653},"docs/components/Godrays","gCKcHxQjpoH_F5W0fQDdSmK9l_KNGKpmG0hBlZyYoSM",{"id":38900,"title":38901,"body":38902,"category":28771,"componentType":20848,"description":38909,"extension":168,"meta":39164,"navigation":171,"path":39165,"requiresChild":171,"seo":39166,"stem":39167,"__hash__":39168},"components/docs/components/Grayscale.md","Grayscale",{"type":8,"value":38903,"toc":39161},[38904,38907,38910,38912,38914,39159],[11,38905,38901],{"id":38906},"grayscale",[15,38908,38909],{},"Convert colors to black and white",[26901,38911],{"component":38901},[23,38913,26913],{"id":26912},[217,38915,38916,38961,39005,39049,39093],{":tabs":1543},[43,38917,38919],{"className":45,"code":38918,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrayscale>\n \u003CCircle />\n \u003C/Grayscale>\n\u003C/Shader>\n",[31,38920,38921,38929,38937,38945,38953],{"__ignoreMap":48},[52,38922,38923,38925,38927],{"class":54,"line":55},[52,38924,59],{"class":58},[52,38926,63],{"class":62},[52,38928,77],{"class":58},[52,38930,38931,38933,38935],{"class":54,"line":80},[52,38932,83],{"class":58},[52,38934,38901],{"class":62},[52,38936,77],{"class":58},[52,38938,38939,38941,38943],{"class":54,"line":108},[52,38940,2213],{"class":58},[52,38942,2216],{"class":62},[52,38944,105],{"class":58},[52,38946,38947,38949,38951],{"class":54,"line":118},[52,38948,2230],{"class":58},[52,38950,38901],{"class":62},[52,38952,77],{"class":58},[52,38954,38955,38957,38959],{"class":54,"line":594},[52,38956,121],{"class":58},[52,38958,63],{"class":62},[52,38960,77],{"class":58},[43,38962,38963],{"className":360,"code":38918,"language":362,"meta":48,"style":48},[31,38964,38965,38973,38981,38989,38997],{"__ignoreMap":48},[52,38966,38967,38969,38971],{"class":54,"line":55},[52,38968,59],{"class":58},[52,38970,63],{"class":371},[52,38972,77],{"class":58},[52,38974,38975,38977,38979],{"class":54,"line":80},[52,38976,83],{"class":58},[52,38978,38901],{"class":371},[52,38980,77],{"class":58},[52,38982,38983,38985,38987],{"class":54,"line":108},[52,38984,2213],{"class":58},[52,38986,2216],{"class":371},[52,38988,105],{"class":58},[52,38990,38991,38993,38995],{"class":54,"line":118},[52,38992,2230],{"class":58},[52,38994,38901],{"class":371},[52,38996,77],{"class":58},[52,38998,38999,39001,39003],{"class":54,"line":594},[52,39000,121],{"class":58},[52,39002,63],{"class":371},[52,39004,77],{"class":58},[43,39006,39007],{"className":2507,"code":38918,"language":2509,"meta":48,"style":48},[31,39008,39009,39017,39025,39033,39041],{"__ignoreMap":48},[52,39010,39011,39013,39015],{"class":54,"line":55},[52,39012,59],{"class":58},[52,39014,63],{"class":371},[52,39016,77],{"class":58},[52,39018,39019,39021,39023],{"class":54,"line":80},[52,39020,83],{"class":58},[52,39022,38901],{"class":371},[52,39024,77],{"class":58},[52,39026,39027,39029,39031],{"class":54,"line":108},[52,39028,2213],{"class":58},[52,39030,2216],{"class":371},[52,39032,105],{"class":58},[52,39034,39035,39037,39039],{"class":54,"line":118},[52,39036,2230],{"class":58},[52,39038,38901],{"class":371},[52,39040,77],{"class":58},[52,39042,39043,39045,39047],{"class":54,"line":594},[52,39044,121],{"class":58},[52,39046,63],{"class":371},[52,39048,77],{"class":58},[43,39050,39051],{"className":419,"code":38918,"language":420,"meta":48,"style":48},[31,39052,39053,39061,39069,39077,39085],{"__ignoreMap":48},[52,39054,39055,39057,39059],{"class":54,"line":55},[52,39056,59],{"class":58},[52,39058,63],{"class":371},[52,39060,77],{"class":58},[52,39062,39063,39065,39067],{"class":54,"line":80},[52,39064,83],{"class":58},[52,39066,38901],{"class":371},[52,39068,77],{"class":58},[52,39070,39071,39073,39075],{"class":54,"line":108},[52,39072,2213],{"class":58},[52,39074,2216],{"class":371},[52,39076,105],{"class":58},[52,39078,39079,39081,39083],{"class":54,"line":118},[52,39080,2230],{"class":58},[52,39082,38901],{"class":371},[52,39084,77],{"class":58},[52,39086,39087,39089,39091],{"class":54,"line":594},[52,39088,121],{"class":58},[52,39090,63],{"class":371},[52,39092,77],{"class":58},[43,39094,39096],{"className":222,"code":39095,"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,39097,39098,39108,39112,39126,39130,39139,39147,39151,39155],{"__ignoreMap":48},[52,39099,39100,39102,39104,39106],{"class":54,"line":55},[52,39101,232],{"class":231},[52,39103,9231],{"class":58},[52,39105,238],{"class":231},[52,39107,9236],{"class":73},[52,39109,39110],{"class":54,"line":80},[52,39111,597],{"emptyLinePlaceholder":171},[52,39113,39114,39116,39118,39120,39122,39124],{"class":54,"line":108},[52,39115,1721],{"class":231},[52,39117,1724],{"class":371},[52,39119,1727],{"class":231},[52,39121,1730],{"class":231},[52,39123,1733],{"class":66},[52,39125,1736],{"class":58},[52,39127,39128],{"class":54,"line":118},[52,39129,1751],{"class":58},[52,39131,39132,39134,39137],{"class":54,"line":594},[52,39133,1756],{"class":58},[52,39135,39136],{"class":73},"'Grayscale'",[52,39138,4722],{"class":58},[52,39140,39141,39143,39145],{"class":54,"line":600},[52,39142,4727],{"class":58},[52,39144,2869],{"class":73},[52,39146,2129],{"class":58},[52,39148,39149],{"class":54,"line":606},[52,39150,4744],{"class":58},[52,39152,39153],{"class":54,"line":653},[52,39154,1773],{"class":58},[52,39156,39157],{"class":54,"line":662},[52,39158,1778],{"class":58},[156,39160,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":39162},[39163],{"id":26912,"depth":80,"text":26913},{},"/docs/components/grayscale",{"title":38901,"description":38909},"docs/components/Grayscale","lZFGlKjJm8tFxaOjy_ybYAeURhKmCUo4QDbxNQCIf8k",{"id":39170,"title":39171,"body":39172,"category":27760,"componentType":20842,"description":39179,"extension":168,"meta":39409,"navigation":171,"path":39410,"requiresChild":27763,"seo":39411,"stem":39412,"__hash__":39413},"components/docs/components/Grid.md","Grid",{"type":8,"value":39173,"toc":39405},[39174,39177,39180,39182,39184,39187,39189,39403],[11,39175,39171],{"id":39176},"grid",[15,39178,39179],{},"Simple grid lines pattern with adjustable thickness and rotation",[26901,39181],{"component":39171},[23,39183,26905],{"id":21503},[26907,39185],{":props":39186},"[{\"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,39188,26913],{"id":26912},[217,39190,39191,39231,39269,39307,39345],{":tabs":1543},[43,39192,39194],{"className":45,"code":39193,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGrid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,39195,39196,39204,39211,39219,39223],{"__ignoreMap":48},[52,39197,39198,39200,39202],{"class":54,"line":55},[52,39199,59],{"class":58},[52,39201,63],{"class":62},[52,39203,77],{"class":58},[52,39205,39206,39208],{"class":54,"line":80},[52,39207,83],{"class":58},[52,39209,39210],{"class":62},"Grid\n",[52,39212,39213,39215,39217],{"class":54,"line":108},[52,39214,7351],{"class":66},[52,39216,70],{"class":58},[52,39218,7307],{"class":73},[52,39220,39221],{"class":54,"line":118},[52,39222,1224],{"class":58},[52,39224,39225,39227,39229],{"class":54,"line":594},[52,39226,121],{"class":58},[52,39228,63],{"class":62},[52,39230,77],{"class":58},[43,39232,39233],{"className":360,"code":39193,"language":362,"meta":48,"style":48},[31,39234,39235,39243,39249,39257,39261],{"__ignoreMap":48},[52,39236,39237,39239,39241],{"class":54,"line":55},[52,39238,59],{"class":58},[52,39240,63],{"class":371},[52,39242,77],{"class":58},[52,39244,39245,39247],{"class":54,"line":80},[52,39246,83],{"class":58},[52,39248,39210],{"class":371},[52,39250,39251,39253,39255],{"class":54,"line":108},[52,39252,7351],{"class":66},[52,39254,70],{"class":231},[52,39256,7307],{"class":73},[52,39258,39259],{"class":54,"line":118},[52,39260,1224],{"class":58},[52,39262,39263,39265,39267],{"class":54,"line":594},[52,39264,121],{"class":58},[52,39266,63],{"class":371},[52,39268,77],{"class":58},[43,39270,39271],{"className":2507,"code":39193,"language":2509,"meta":48,"style":48},[31,39272,39273,39281,39287,39295,39299],{"__ignoreMap":48},[52,39274,39275,39277,39279],{"class":54,"line":55},[52,39276,59],{"class":58},[52,39278,63],{"class":371},[52,39280,77],{"class":58},[52,39282,39283,39285],{"class":54,"line":80},[52,39284,83],{"class":58},[52,39286,39210],{"class":371},[52,39288,39289,39291,39293],{"class":54,"line":108},[52,39290,7351],{"class":66},[52,39292,70],{"class":58},[52,39294,7307],{"class":73},[52,39296,39297],{"class":54,"line":118},[52,39298,1224],{"class":58},[52,39300,39301,39303,39305],{"class":54,"line":594},[52,39302,121],{"class":58},[52,39304,63],{"class":371},[52,39306,77],{"class":58},[43,39308,39309],{"className":419,"code":39193,"language":420,"meta":48,"style":48},[31,39310,39311,39319,39325,39333,39337],{"__ignoreMap":48},[52,39312,39313,39315,39317],{"class":54,"line":55},[52,39314,59],{"class":58},[52,39316,63],{"class":371},[52,39318,77],{"class":58},[52,39320,39321,39323],{"class":54,"line":80},[52,39322,83],{"class":58},[52,39324,39210],{"class":371},[52,39326,39327,39329,39331],{"class":54,"line":108},[52,39328,7351],{"class":66},[52,39330,70],{"class":231},[52,39332,7307],{"class":73},[52,39334,39335],{"class":54,"line":118},[52,39336,1224],{"class":58},[52,39338,39339,39341,39343],{"class":54,"line":594},[52,39340,121],{"class":58},[52,39342,63],{"class":371},[52,39344,77],{"class":58},[43,39346,39348],{"className":222,"code":39347,"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,39349,39350,39360,39364,39378,39382,39395,39399],{"__ignoreMap":48},[52,39351,39352,39354,39356,39358],{"class":54,"line":55},[52,39353,232],{"class":231},[52,39355,9231],{"class":58},[52,39357,238],{"class":231},[52,39359,9236],{"class":73},[52,39361,39362],{"class":54,"line":80},[52,39363,597],{"emptyLinePlaceholder":171},[52,39365,39366,39368,39370,39372,39374,39376],{"class":54,"line":108},[52,39367,1721],{"class":231},[52,39369,1724],{"class":371},[52,39371,1727],{"class":231},[52,39373,1730],{"class":231},[52,39375,1733],{"class":66},[52,39377,1736],{"class":58},[52,39379,39380],{"class":54,"line":118},[52,39381,1751],{"class":58},[52,39383,39384,39386,39389,39391,39393],{"class":54,"line":594},[52,39385,1756],{"class":58},[52,39387,39388],{"class":73},"'Grid'",[52,39390,1762],{"class":58},[52,39392,7886],{"class":73},[52,39394,1768],{"class":58},[52,39396,39397],{"class":54,"line":600},[52,39398,1773],{"class":58},[52,39400,39401],{"class":54,"line":606},[52,39402,1778],{"class":58},[156,39404,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39406},[39407,39408],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/grid",{"title":39171,"description":39179},"docs/components/Grid","4Qy3uhAijKBQy8g-4TGWTQC1sgqzE84QRsloVJ6znn8",{"id":39415,"title":4808,"body":39416,"category":30161,"componentType":20848,"description":39423,"extension":168,"meta":39785,"navigation":171,"path":39786,"requiresChild":171,"seo":39787,"stem":39788,"__hash__":39789},"components/docs/components/GridDistortion.md",{"type":8,"value":39417,"toc":39781},[39418,39421,39424,39426,39428,39431,39433,39779],[11,39419,4808],{"id":39420},"griddistortion",[15,39422,39423],{},"Interactive grid distortion controlled by mouse position",[26901,39425],{"component":4808},[23,39427,26905],{"id":21503},[26907,39429],{":props":39430},"[{\"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,39432,26913],{"id":26912},[217,39434,39435,39499,39570,39636,39706],{":tabs":1543},[43,39436,39438],{"className":45,"code":39437,"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,39439,39440,39448,39455,39463,39471,39475,39483,39491],{"__ignoreMap":48},[52,39441,39442,39444,39446],{"class":54,"line":55},[52,39443,59],{"class":58},[52,39445,63],{"class":62},[52,39447,77],{"class":58},[52,39449,39450,39452],{"class":54,"line":80},[52,39451,83],{"class":58},[52,39453,39454],{"class":62},"GridDistortion\n",[52,39456,39457,39459,39461],{"class":54,"line":108},[52,39458,17870],{"class":66},[52,39460,70],{"class":58},[52,39462,28827],{"class":73},[52,39464,39465,39467,39469],{"class":54,"line":118},[52,39466,14901],{"class":66},[52,39468,70],{"class":58},[52,39470,28827],{"class":73},[52,39472,39473],{"class":54,"line":594},[52,39474,26949],{"class":58},[52,39476,39477,39479,39481],{"class":54,"line":600},[52,39478,2213],{"class":58},[52,39480,2216],{"class":62},[52,39482,105],{"class":58},[52,39484,39485,39487,39489],{"class":54,"line":606},[52,39486,2230],{"class":58},[52,39488,4808],{"class":62},[52,39490,77],{"class":58},[52,39492,39493,39495,39497],{"class":54,"line":653},[52,39494,121],{"class":58},[52,39496,63],{"class":62},[52,39498,77],{"class":58},[43,39500,39502],{"className":360,"code":39501,"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,39503,39504,39512,39518,39530,39542,39546,39554,39562],{"__ignoreMap":48},[52,39505,39506,39508,39510],{"class":54,"line":55},[52,39507,59],{"class":58},[52,39509,63],{"class":371},[52,39511,77],{"class":58},[52,39513,39514,39516],{"class":54,"line":80},[52,39515,83],{"class":58},[52,39517,39454],{"class":371},[52,39519,39520,39522,39524,39526,39528],{"class":54,"line":108},[52,39521,17981],{"class":66},[52,39523,70],{"class":231},[52,39525,723],{"class":58},[52,39527,6391],{"class":371},[52,39529,729],{"class":58},[52,39531,39532,39534,39536,39538,39540],{"class":54,"line":118},[52,39533,7361],{"class":66},[52,39535,70],{"class":231},[52,39537,723],{"class":58},[52,39539,6391],{"class":371},[52,39541,729],{"class":58},[52,39543,39544],{"class":54,"line":594},[52,39545,26949],{"class":58},[52,39547,39548,39550,39552],{"class":54,"line":600},[52,39549,2213],{"class":58},[52,39551,2216],{"class":371},[52,39553,105],{"class":58},[52,39555,39556,39558,39560],{"class":54,"line":606},[52,39557,2230],{"class":58},[52,39559,4808],{"class":371},[52,39561,77],{"class":58},[52,39563,39564,39566,39568],{"class":54,"line":653},[52,39565,121],{"class":58},[52,39567,63],{"class":371},[52,39569,77],{"class":58},[43,39571,39572],{"className":2507,"code":39501,"language":2509,"meta":48,"style":48},[31,39573,39574,39582,39588,39598,39608,39612,39620,39628],{"__ignoreMap":48},[52,39575,39576,39578,39580],{"class":54,"line":55},[52,39577,59],{"class":58},[52,39579,63],{"class":371},[52,39581,77],{"class":58},[52,39583,39584,39586],{"class":54,"line":80},[52,39585,83],{"class":58},[52,39587,39454],{"class":371},[52,39589,39590,39592,39594,39596],{"class":54,"line":108},[52,39591,17981],{"class":66},[52,39593,24845],{"class":58},[52,39595,6391],{"class":371},[52,39597,729],{"class":58},[52,39599,39600,39602,39604,39606],{"class":54,"line":118},[52,39601,7361],{"class":66},[52,39603,24845],{"class":58},[52,39605,6391],{"class":371},[52,39607,729],{"class":58},[52,39609,39610],{"class":54,"line":594},[52,39611,26949],{"class":58},[52,39613,39614,39616,39618],{"class":54,"line":600},[52,39615,2213],{"class":58},[52,39617,2216],{"class":371},[52,39619,105],{"class":58},[52,39621,39622,39624,39626],{"class":54,"line":606},[52,39623,2230],{"class":58},[52,39625,4808],{"class":371},[52,39627,77],{"class":58},[52,39629,39630,39632,39634],{"class":54,"line":653},[52,39631,121],{"class":58},[52,39633,63],{"class":371},[52,39635,77],{"class":58},[43,39637,39638],{"className":419,"code":39501,"language":420,"meta":48,"style":48},[31,39639,39640,39648,39654,39666,39678,39682,39690,39698],{"__ignoreMap":48},[52,39641,39642,39644,39646],{"class":54,"line":55},[52,39643,59],{"class":58},[52,39645,63],{"class":371},[52,39647,77],{"class":58},[52,39649,39650,39652],{"class":54,"line":80},[52,39651,83],{"class":58},[52,39653,39454],{"class":371},[52,39655,39656,39658,39660,39662,39664],{"class":54,"line":108},[52,39657,17981],{"class":66},[52,39659,70],{"class":231},[52,39661,723],{"class":58},[52,39663,6391],{"class":371},[52,39665,729],{"class":58},[52,39667,39668,39670,39672,39674,39676],{"class":54,"line":118},[52,39669,7361],{"class":66},[52,39671,70],{"class":231},[52,39673,723],{"class":58},[52,39675,6391],{"class":371},[52,39677,729],{"class":58},[52,39679,39680],{"class":54,"line":594},[52,39681,26949],{"class":58},[52,39683,39684,39686,39688],{"class":54,"line":600},[52,39685,2213],{"class":58},[52,39687,2216],{"class":371},[52,39689,105],{"class":58},[52,39691,39692,39694,39696],{"class":54,"line":606},[52,39693,2230],{"class":58},[52,39695,4808],{"class":371},[52,39697,77],{"class":58},[52,39699,39700,39702,39704],{"class":54,"line":653},[52,39701,121],{"class":58},[52,39703,63],{"class":371},[52,39705,77],{"class":58},[43,39707,39709],{"className":222,"code":39708,"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,39710,39711,39721,39725,39739,39743,39759,39767,39771,39775],{"__ignoreMap":48},[52,39712,39713,39715,39717,39719],{"class":54,"line":55},[52,39714,232],{"class":231},[52,39716,9231],{"class":58},[52,39718,238],{"class":231},[52,39720,9236],{"class":73},[52,39722,39723],{"class":54,"line":80},[52,39724,597],{"emptyLinePlaceholder":171},[52,39726,39727,39729,39731,39733,39735,39737],{"class":54,"line":108},[52,39728,1721],{"class":231},[52,39730,1724],{"class":371},[52,39732,1727],{"class":231},[52,39734,1730],{"class":231},[52,39736,1733],{"class":66},[52,39738,1736],{"class":58},[52,39740,39741],{"class":54,"line":118},[52,39742,1751],{"class":58},[52,39744,39745,39747,39749,39751,39753,39755,39757],{"class":54,"line":594},[52,39746,1756],{"class":58},[52,39748,5251],{"class":73},[52,39750,27194],{"class":58},[52,39752,6391],{"class":371},[52,39754,4278],{"class":58},[52,39756,6391],{"class":371},[52,39758,5259],{"class":58},[52,39760,39761,39763,39765],{"class":54,"line":600},[52,39762,4727],{"class":58},[52,39764,2869],{"class":73},[52,39766,2129],{"class":58},[52,39768,39769],{"class":54,"line":606},[52,39770,4744],{"class":58},[52,39772,39773],{"class":54,"line":653},[52,39774,1773],{"class":58},[52,39776,39777],{"class":54,"line":662},[52,39778,1778],{"class":58},[156,39780,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":39782},[39783,39784],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/griddistortion",{"title":4808,"description":39423},"docs/components/GridDistortion","lzcDNvBkzCgonF6ZeQYda2Zb57HFB6V0-Rkn2MbxC0Q",{"id":39791,"title":39792,"body":39793,"category":40055,"componentType":20848,"description":39800,"extension":168,"meta":40056,"navigation":171,"path":40057,"requiresChild":171,"seo":40058,"stem":40059,"__hash__":40060},"components/docs/components/Group.md","Group",{"type":8,"value":39794,"toc":40052},[39795,39798,39801,39803,39805,40050],[11,39796,39792],{"id":39797},"group",[15,39799,39800],{},"Container for organizing and composing child effects",[26901,39802],{"component":39792},[23,39804,26913],{"id":26912},[217,39806,39807,39852,39896,39940,39984],{":tabs":1543},[43,39808,39810],{"className":45,"code":39809,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CGroup>\n \u003CCircle />\n \u003C/Group>\n\u003C/Shader>\n",[31,39811,39812,39820,39828,39836,39844],{"__ignoreMap":48},[52,39813,39814,39816,39818],{"class":54,"line":55},[52,39815,59],{"class":58},[52,39817,63],{"class":62},[52,39819,77],{"class":58},[52,39821,39822,39824,39826],{"class":54,"line":80},[52,39823,83],{"class":58},[52,39825,39792],{"class":62},[52,39827,77],{"class":58},[52,39829,39830,39832,39834],{"class":54,"line":108},[52,39831,2213],{"class":58},[52,39833,2216],{"class":62},[52,39835,105],{"class":58},[52,39837,39838,39840,39842],{"class":54,"line":118},[52,39839,2230],{"class":58},[52,39841,39792],{"class":62},[52,39843,77],{"class":58},[52,39845,39846,39848,39850],{"class":54,"line":594},[52,39847,121],{"class":58},[52,39849,63],{"class":62},[52,39851,77],{"class":58},[43,39853,39854],{"className":360,"code":39809,"language":362,"meta":48,"style":48},[31,39855,39856,39864,39872,39880,39888],{"__ignoreMap":48},[52,39857,39858,39860,39862],{"class":54,"line":55},[52,39859,59],{"class":58},[52,39861,63],{"class":371},[52,39863,77],{"class":58},[52,39865,39866,39868,39870],{"class":54,"line":80},[52,39867,83],{"class":58},[52,39869,39792],{"class":371},[52,39871,77],{"class":58},[52,39873,39874,39876,39878],{"class":54,"line":108},[52,39875,2213],{"class":58},[52,39877,2216],{"class":371},[52,39879,105],{"class":58},[52,39881,39882,39884,39886],{"class":54,"line":118},[52,39883,2230],{"class":58},[52,39885,39792],{"class":371},[52,39887,77],{"class":58},[52,39889,39890,39892,39894],{"class":54,"line":594},[52,39891,121],{"class":58},[52,39893,63],{"class":371},[52,39895,77],{"class":58},[43,39897,39898],{"className":2507,"code":39809,"language":2509,"meta":48,"style":48},[31,39899,39900,39908,39916,39924,39932],{"__ignoreMap":48},[52,39901,39902,39904,39906],{"class":54,"line":55},[52,39903,59],{"class":58},[52,39905,63],{"class":371},[52,39907,77],{"class":58},[52,39909,39910,39912,39914],{"class":54,"line":80},[52,39911,83],{"class":58},[52,39913,39792],{"class":371},[52,39915,77],{"class":58},[52,39917,39918,39920,39922],{"class":54,"line":108},[52,39919,2213],{"class":58},[52,39921,2216],{"class":371},[52,39923,105],{"class":58},[52,39925,39926,39928,39930],{"class":54,"line":118},[52,39927,2230],{"class":58},[52,39929,39792],{"class":371},[52,39931,77],{"class":58},[52,39933,39934,39936,39938],{"class":54,"line":594},[52,39935,121],{"class":58},[52,39937,63],{"class":371},[52,39939,77],{"class":58},[43,39941,39942],{"className":419,"code":39809,"language":420,"meta":48,"style":48},[31,39943,39944,39952,39960,39968,39976],{"__ignoreMap":48},[52,39945,39946,39948,39950],{"class":54,"line":55},[52,39947,59],{"class":58},[52,39949,63],{"class":371},[52,39951,77],{"class":58},[52,39953,39954,39956,39958],{"class":54,"line":80},[52,39955,83],{"class":58},[52,39957,39792],{"class":371},[52,39959,77],{"class":58},[52,39961,39962,39964,39966],{"class":54,"line":108},[52,39963,2213],{"class":58},[52,39965,2216],{"class":371},[52,39967,105],{"class":58},[52,39969,39970,39972,39974],{"class":54,"line":118},[52,39971,2230],{"class":58},[52,39973,39792],{"class":371},[52,39975,77],{"class":58},[52,39977,39978,39980,39982],{"class":54,"line":594},[52,39979,121],{"class":58},[52,39981,63],{"class":371},[52,39983,77],{"class":58},[43,39985,39987],{"className":222,"code":39986,"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,39988,39989,39999,40003,40017,40021,40030,40038,40042,40046],{"__ignoreMap":48},[52,39990,39991,39993,39995,39997],{"class":54,"line":55},[52,39992,232],{"class":231},[52,39994,9231],{"class":58},[52,39996,238],{"class":231},[52,39998,9236],{"class":73},[52,40000,40001],{"class":54,"line":80},[52,40002,597],{"emptyLinePlaceholder":171},[52,40004,40005,40007,40009,40011,40013,40015],{"class":54,"line":108},[52,40006,1721],{"class":231},[52,40008,1724],{"class":371},[52,40010,1727],{"class":231},[52,40012,1730],{"class":231},[52,40014,1733],{"class":66},[52,40016,1736],{"class":58},[52,40018,40019],{"class":54,"line":118},[52,40020,1751],{"class":58},[52,40022,40023,40025,40028],{"class":54,"line":594},[52,40024,1756],{"class":58},[52,40026,40027],{"class":73},"'Group'",[52,40029,4722],{"class":58},[52,40031,40032,40034,40036],{"class":54,"line":600},[52,40033,4727],{"class":58},[52,40035,2869],{"class":73},[52,40037,2129],{"class":58},[52,40039,40040],{"class":54,"line":606},[52,40041,4744],{"class":58},[52,40043,40044],{"class":54,"line":653},[52,40045,1773],{"class":58},[52,40047,40048],{"class":54,"line":662},[52,40049,1778],{"class":58},[156,40051,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40053},[40054],{"id":26912,"depth":80,"text":26913},"Utilities",{},"/docs/components/group",{"title":39792,"description":39800},"docs/components/Group","9ilEi3EGgqGYFsiXPF2KWAsb7n2uz000bT3d8-TiIZ0",{"id":40062,"title":40063,"body":40064,"category":27503,"componentType":20848,"description":40071,"extension":168,"meta":40332,"navigation":171,"path":40333,"requiresChild":171,"seo":40334,"stem":40335,"__hash__":40336},"components/docs/components/Halftone.md","Halftone",{"type":8,"value":40065,"toc":40328},[40066,40069,40072,40074,40076,40079,40081,40326],[11,40067,40063],{"id":40068},"halftone",[15,40070,40071],{},"Halftone dot pattern effect for printing aesthetics",[26901,40073],{"component":40063},[23,40075,26905],{"id":21503},[26907,40077],{":props":40078},"[{\"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,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 \u003CHalftone>\n \u003CCircle />\n \u003C/Halftone>\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,40063],{"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,40063],{"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,40063],{"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,40063],{"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,40063],{"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,40063],{"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,40063],{"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,40063],{"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: 'Halftone', 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},"'Halftone'",[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,40331],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/halftone",{"title":40063,"description":40071},"docs/components/Halftone","UjhUKWGUegB2A9Wqe-h3jAnEjOUNKEodFiY147PyzEI",{"id":40338,"title":40339,"body":40340,"category":27760,"componentType":20842,"description":40347,"extension":168,"meta":40532,"navigation":171,"path":40533,"requiresChild":27763,"seo":40534,"stem":40535,"__hash__":40536},"components/docs/components/HexGrid.md","HexGrid",{"type":8,"value":40341,"toc":40528},[40342,40345,40348,40350,40352,40355,40357,40526],[11,40343,40339],{"id":40344},"hexgrid",[15,40346,40347],{},"Honeycomb hexagonal grid pattern",[26901,40349],{"component":40339},[23,40351,26905],{"id":21503},[26907,40353],{":props":40354},"[{\"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,40356,26913],{"id":26912},[217,40358,40359,40388,40416,40444,40472],{":tabs":1543},[43,40360,40362],{"className":45,"code":40361,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHexGrid />\n\u003C/Shader>\n",[31,40363,40364,40372,40380],{"__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,105],{"class":58},[52,40381,40382,40384,40386],{"class":54,"line":108},[52,40383,121],{"class":58},[52,40385,63],{"class":62},[52,40387,77],{"class":58},[43,40389,40390],{"className":360,"code":40361,"language":362,"meta":48,"style":48},[31,40391,40392,40400,40408],{"__ignoreMap":48},[52,40393,40394,40396,40398],{"class":54,"line":55},[52,40395,59],{"class":58},[52,40397,63],{"class":371},[52,40399,77],{"class":58},[52,40401,40402,40404,40406],{"class":54,"line":80},[52,40403,83],{"class":58},[52,40405,40339],{"class":371},[52,40407,105],{"class":58},[52,40409,40410,40412,40414],{"class":54,"line":108},[52,40411,121],{"class":58},[52,40413,63],{"class":371},[52,40415,77],{"class":58},[43,40417,40418],{"className":2507,"code":40361,"language":2509,"meta":48,"style":48},[31,40419,40420,40428,40436],{"__ignoreMap":48},[52,40421,40422,40424,40426],{"class":54,"line":55},[52,40423,59],{"class":58},[52,40425,63],{"class":371},[52,40427,77],{"class":58},[52,40429,40430,40432,40434],{"class":54,"line":80},[52,40431,83],{"class":58},[52,40433,40339],{"class":371},[52,40435,105],{"class":58},[52,40437,40438,40440,40442],{"class":54,"line":108},[52,40439,121],{"class":58},[52,40441,63],{"class":371},[52,40443,77],{"class":58},[43,40445,40446],{"className":419,"code":40361,"language":420,"meta":48,"style":48},[31,40447,40448,40456,40464],{"__ignoreMap":48},[52,40449,40450,40452,40454],{"class":54,"line":55},[52,40451,59],{"class":58},[52,40453,63],{"class":371},[52,40455,77],{"class":58},[52,40457,40458,40460,40462],{"class":54,"line":80},[52,40459,83],{"class":58},[52,40461,40339],{"class":371},[52,40463,105],{"class":58},[52,40465,40466,40468,40470],{"class":54,"line":108},[52,40467,121],{"class":58},[52,40469,63],{"class":371},[52,40471,77],{"class":58},[43,40473,40475],{"className":222,"code":40474,"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,40476,40477,40487,40491,40505,40509,40518,40522],{"__ignoreMap":48},[52,40478,40479,40481,40483,40485],{"class":54,"line":55},[52,40480,232],{"class":231},[52,40482,9231],{"class":58},[52,40484,238],{"class":231},[52,40486,9236],{"class":73},[52,40488,40489],{"class":54,"line":80},[52,40490,597],{"emptyLinePlaceholder":171},[52,40492,40493,40495,40497,40499,40501,40503],{"class":54,"line":108},[52,40494,1721],{"class":231},[52,40496,1724],{"class":371},[52,40498,1727],{"class":231},[52,40500,1730],{"class":231},[52,40502,1733],{"class":66},[52,40504,1736],{"class":58},[52,40506,40507],{"class":54,"line":118},[52,40508,1751],{"class":58},[52,40510,40511,40513,40516],{"class":54,"line":594},[52,40512,1756],{"class":58},[52,40514,40515],{"class":73},"'HexGrid'",[52,40517,2129],{"class":58},[52,40519,40520],{"class":54,"line":600},[52,40521,1773],{"class":58},[52,40523,40524],{"class":54,"line":606},[52,40525,1778],{"class":58},[156,40527,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":40529},[40530,40531],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/hexgrid",{"title":40339,"description":40347},"docs/components/HexGrid","veQ1w1HdZf37W7Zv0QXfvk7LP0Lb5W2gDEvAIY42cTA",{"id":40538,"title":40539,"body":40540,"category":28771,"componentType":20848,"description":40547,"extension":168,"meta":40808,"navigation":171,"path":40809,"requiresChild":171,"seo":40810,"stem":40811,"__hash__":40812},"components/docs/components/HueShift.md","HueShift",{"type":8,"value":40541,"toc":40804},[40542,40545,40548,40550,40552,40555,40557,40802],[11,40543,40539],{"id":40544},"hueshift",[15,40546,40547],{},"Rotate hue around the color wheel",[26901,40549],{"component":40539},[23,40551,26905],{"id":21503},[26907,40553],{":props":40554},"[{\"name\":\"shift\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The amount to shift the hue by\"}]",[23,40556,26913],{"id":26912},[217,40558,40559,40604,40648,40692,40736],{":tabs":1543},[43,40560,40562],{"className":45,"code":40561,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CHueShift>\n \u003CCircle />\n \u003C/HueShift>\n\u003C/Shader>\n",[31,40563,40564,40572,40580,40588,40596],{"__ignoreMap":48},[52,40565,40566,40568,40570],{"class":54,"line":55},[52,40567,59],{"class":58},[52,40569,63],{"class":62},[52,40571,77],{"class":58},[52,40573,40574,40576,40578],{"class":54,"line":80},[52,40575,83],{"class":58},[52,40577,40539],{"class":62},[52,40579,77],{"class":58},[52,40581,40582,40584,40586],{"class":54,"line":108},[52,40583,2213],{"class":58},[52,40585,2216],{"class":62},[52,40587,105],{"class":58},[52,40589,40590,40592,40594],{"class":54,"line":118},[52,40591,2230],{"class":58},[52,40593,40539],{"class":62},[52,40595,77],{"class":58},[52,40597,40598,40600,40602],{"class":54,"line":594},[52,40599,121],{"class":58},[52,40601,63],{"class":62},[52,40603,77],{"class":58},[43,40605,40606],{"className":360,"code":40561,"language":362,"meta":48,"style":48},[31,40607,40608,40616,40624,40632,40640],{"__ignoreMap":48},[52,40609,40610,40612,40614],{"class":54,"line":55},[52,40611,59],{"class":58},[52,40613,63],{"class":371},[52,40615,77],{"class":58},[52,40617,40618,40620,40622],{"class":54,"line":80},[52,40619,83],{"class":58},[52,40621,40539],{"class":371},[52,40623,77],{"class":58},[52,40625,40626,40628,40630],{"class":54,"line":108},[52,40627,2213],{"class":58},[52,40629,2216],{"class":371},[52,40631,105],{"class":58},[52,40633,40634,40636,40638],{"class":54,"line":118},[52,40635,2230],{"class":58},[52,40637,40539],{"class":371},[52,40639,77],{"class":58},[52,40641,40642,40644,40646],{"class":54,"line":594},[52,40643,121],{"class":58},[52,40645,63],{"class":371},[52,40647,77],{"class":58},[43,40649,40650],{"className":2507,"code":40561,"language":2509,"meta":48,"style":48},[31,40651,40652,40660,40668,40676,40684],{"__ignoreMap":48},[52,40653,40654,40656,40658],{"class":54,"line":55},[52,40655,59],{"class":58},[52,40657,63],{"class":371},[52,40659,77],{"class":58},[52,40661,40662,40664,40666],{"class":54,"line":80},[52,40663,83],{"class":58},[52,40665,40539],{"class":371},[52,40667,77],{"class":58},[52,40669,40670,40672,40674],{"class":54,"line":108},[52,40671,2213],{"class":58},[52,40673,2216],{"class":371},[52,40675,105],{"class":58},[52,40677,40678,40680,40682],{"class":54,"line":118},[52,40679,2230],{"class":58},[52,40681,40539],{"class":371},[52,40683,77],{"class":58},[52,40685,40686,40688,40690],{"class":54,"line":594},[52,40687,121],{"class":58},[52,40689,63],{"class":371},[52,40691,77],{"class":58},[43,40693,40694],{"className":419,"code":40561,"language":420,"meta":48,"style":48},[31,40695,40696,40704,40712,40720,40728],{"__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,40539],{"class":371},[52,40711,77],{"class":58},[52,40713,40714,40716,40718],{"class":54,"line":108},[52,40715,2213],{"class":58},[52,40717,2216],{"class":371},[52,40719,105],{"class":58},[52,40721,40722,40724,40726],{"class":54,"line":118},[52,40723,2230],{"class":58},[52,40725,40539],{"class":371},[52,40727,77],{"class":58},[52,40729,40730,40732,40734],{"class":54,"line":594},[52,40731,121],{"class":58},[52,40733,63],{"class":371},[52,40735,77],{"class":58},[43,40737,40739],{"className":222,"code":40738,"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,40740,40741,40751,40755,40769,40773,40782,40790,40794,40798],{"__ignoreMap":48},[52,40742,40743,40745,40747,40749],{"class":54,"line":55},[52,40744,232],{"class":231},[52,40746,9231],{"class":58},[52,40748,238],{"class":231},[52,40750,9236],{"class":73},[52,40752,40753],{"class":54,"line":80},[52,40754,597],{"emptyLinePlaceholder":171},[52,40756,40757,40759,40761,40763,40765,40767],{"class":54,"line":108},[52,40758,1721],{"class":231},[52,40760,1724],{"class":371},[52,40762,1727],{"class":231},[52,40764,1730],{"class":231},[52,40766,1733],{"class":66},[52,40768,1736],{"class":58},[52,40770,40771],{"class":54,"line":118},[52,40772,1751],{"class":58},[52,40774,40775,40777,40780],{"class":54,"line":594},[52,40776,1756],{"class":58},[52,40778,40779],{"class":73},"'HueShift'",[52,40781,4722],{"class":58},[52,40783,40784,40786,40788],{"class":54,"line":600},[52,40785,4727],{"class":58},[52,40787,2869],{"class":73},[52,40789,2129],{"class":58},[52,40791,40792],{"class":54,"line":606},[52,40793,4744],{"class":58},[52,40795,40796],{"class":54,"line":653},[52,40797,1773],{"class":58},[52,40799,40800],{"class":54,"line":662},[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/hueshift",{"title":40539,"description":40547},"docs/components/HueShift","SvY0GvmayTQRnbbg-PIyw8gDlqoeIDTTglGQ-v3kKQI",{"id":40814,"title":40815,"body":40816,"category":27760,"componentType":20842,"description":40823,"extension":168,"meta":41008,"navigation":171,"path":41009,"requiresChild":27763,"seo":41010,"stem":41011,"__hash__":41012},"components/docs/components/ImageTexture.md","ImageTexture",{"type":8,"value":40817,"toc":41004},[40818,40821,40824,40826,40828,40831,40833,41002],[11,40819,40815],{"id":40820},"imagetexture",[15,40822,40823],{},"Display an image with customizable object-fit modes",[26901,40825],{"component":40815},[23,40827,26905],{"id":21503},[26907,40829],{":props":40830},"[{\"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,40832,26913],{"id":26912},[217,40834,40835,40864,40892,40920,40948],{":tabs":1543},[43,40836,40838],{"className":45,"code":40837,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CImageTexture />\n\u003C/Shader>\n",[31,40839,40840,40848,40856],{"__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,105],{"class":58},[52,40857,40858,40860,40862],{"class":54,"line":108},[52,40859,121],{"class":58},[52,40861,63],{"class":62},[52,40863,77],{"class":58},[43,40865,40866],{"className":360,"code":40837,"language":362,"meta":48,"style":48},[31,40867,40868,40876,40884],{"__ignoreMap":48},[52,40869,40870,40872,40874],{"class":54,"line":55},[52,40871,59],{"class":58},[52,40873,63],{"class":371},[52,40875,77],{"class":58},[52,40877,40878,40880,40882],{"class":54,"line":80},[52,40879,83],{"class":58},[52,40881,40815],{"class":371},[52,40883,105],{"class":58},[52,40885,40886,40888,40890],{"class":54,"line":108},[52,40887,121],{"class":58},[52,40889,63],{"class":371},[52,40891,77],{"class":58},[43,40893,40894],{"className":2507,"code":40837,"language":2509,"meta":48,"style":48},[31,40895,40896,40904,40912],{"__ignoreMap":48},[52,40897,40898,40900,40902],{"class":54,"line":55},[52,40899,59],{"class":58},[52,40901,63],{"class":371},[52,40903,77],{"class":58},[52,40905,40906,40908,40910],{"class":54,"line":80},[52,40907,83],{"class":58},[52,40909,40815],{"class":371},[52,40911,105],{"class":58},[52,40913,40914,40916,40918],{"class":54,"line":108},[52,40915,121],{"class":58},[52,40917,63],{"class":371},[52,40919,77],{"class":58},[43,40921,40922],{"className":419,"code":40837,"language":420,"meta":48,"style":48},[31,40923,40924,40932,40940],{"__ignoreMap":48},[52,40925,40926,40928,40930],{"class":54,"line":55},[52,40927,59],{"class":58},[52,40929,63],{"class":371},[52,40931,77],{"class":58},[52,40933,40934,40936,40938],{"class":54,"line":80},[52,40935,83],{"class":58},[52,40937,40815],{"class":371},[52,40939,105],{"class":58},[52,40941,40942,40944,40946],{"class":54,"line":108},[52,40943,121],{"class":58},[52,40945,63],{"class":371},[52,40947,77],{"class":58},[43,40949,40951],{"className":222,"code":40950,"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,40952,40953,40963,40967,40981,40985,40994,40998],{"__ignoreMap":48},[52,40954,40955,40957,40959,40961],{"class":54,"line":55},[52,40956,232],{"class":231},[52,40958,9231],{"class":58},[52,40960,238],{"class":231},[52,40962,9236],{"class":73},[52,40964,40965],{"class":54,"line":80},[52,40966,597],{"emptyLinePlaceholder":171},[52,40968,40969,40971,40973,40975,40977,40979],{"class":54,"line":108},[52,40970,1721],{"class":231},[52,40972,1724],{"class":371},[52,40974,1727],{"class":231},[52,40976,1730],{"class":231},[52,40978,1733],{"class":66},[52,40980,1736],{"class":58},[52,40982,40983],{"class":54,"line":118},[52,40984,1751],{"class":58},[52,40986,40987,40989,40992],{"class":54,"line":594},[52,40988,1756],{"class":58},[52,40990,40991],{"class":73},"'ImageTexture'",[52,40993,2129],{"class":58},[52,40995,40996],{"class":54,"line":600},[52,40997,1773],{"class":58},[52,40999,41000],{"class":54,"line":606},[52,41001,1778],{"class":58},[156,41003,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41005},[41006,41007],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/imagetexture",{"title":40815,"description":40823},"docs/components/ImageTexture","NyCP2ZjjJSyoGPp-qLS7HXglsWOM-XhuGa4EFMJa_-Y",{"id":41014,"title":41015,"body":41016,"category":28771,"componentType":20848,"description":41023,"extension":168,"meta":41278,"navigation":171,"path":41279,"requiresChild":171,"seo":41280,"stem":41281,"__hash__":41282},"components/docs/components/Invert.md","Invert",{"type":8,"value":41017,"toc":41275},[41018,41021,41024,41026,41028,41273],[11,41019,41015],{"id":41020},"invert",[15,41022,41023],{},"Invert RGB colors while preserving alpha",[26901,41025],{"component":41015},[23,41027,26913],{"id":26912},[217,41029,41030,41075,41119,41163,41207],{":tabs":1543},[43,41031,41033],{"className":45,"code":41032,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CInvert>\n \u003CCircle />\n \u003C/Invert>\n\u003C/Shader>\n",[31,41034,41035,41043,41051,41059,41067],{"__ignoreMap":48},[52,41036,41037,41039,41041],{"class":54,"line":55},[52,41038,59],{"class":58},[52,41040,63],{"class":62},[52,41042,77],{"class":58},[52,41044,41045,41047,41049],{"class":54,"line":80},[52,41046,83],{"class":58},[52,41048,41015],{"class":62},[52,41050,77],{"class":58},[52,41052,41053,41055,41057],{"class":54,"line":108},[52,41054,2213],{"class":58},[52,41056,2216],{"class":62},[52,41058,105],{"class":58},[52,41060,41061,41063,41065],{"class":54,"line":118},[52,41062,2230],{"class":58},[52,41064,41015],{"class":62},[52,41066,77],{"class":58},[52,41068,41069,41071,41073],{"class":54,"line":594},[52,41070,121],{"class":58},[52,41072,63],{"class":62},[52,41074,77],{"class":58},[43,41076,41077],{"className":360,"code":41032,"language":362,"meta":48,"style":48},[31,41078,41079,41087,41095,41103,41111],{"__ignoreMap":48},[52,41080,41081,41083,41085],{"class":54,"line":55},[52,41082,59],{"class":58},[52,41084,63],{"class":371},[52,41086,77],{"class":58},[52,41088,41089,41091,41093],{"class":54,"line":80},[52,41090,83],{"class":58},[52,41092,41015],{"class":371},[52,41094,77],{"class":58},[52,41096,41097,41099,41101],{"class":54,"line":108},[52,41098,2213],{"class":58},[52,41100,2216],{"class":371},[52,41102,105],{"class":58},[52,41104,41105,41107,41109],{"class":54,"line":118},[52,41106,2230],{"class":58},[52,41108,41015],{"class":371},[52,41110,77],{"class":58},[52,41112,41113,41115,41117],{"class":54,"line":594},[52,41114,121],{"class":58},[52,41116,63],{"class":371},[52,41118,77],{"class":58},[43,41120,41121],{"className":2507,"code":41032,"language":2509,"meta":48,"style":48},[31,41122,41123,41131,41139,41147,41155],{"__ignoreMap":48},[52,41124,41125,41127,41129],{"class":54,"line":55},[52,41126,59],{"class":58},[52,41128,63],{"class":371},[52,41130,77],{"class":58},[52,41132,41133,41135,41137],{"class":54,"line":80},[52,41134,83],{"class":58},[52,41136,41015],{"class":371},[52,41138,77],{"class":58},[52,41140,41141,41143,41145],{"class":54,"line":108},[52,41142,2213],{"class":58},[52,41144,2216],{"class":371},[52,41146,105],{"class":58},[52,41148,41149,41151,41153],{"class":54,"line":118},[52,41150,2230],{"class":58},[52,41152,41015],{"class":371},[52,41154,77],{"class":58},[52,41156,41157,41159,41161],{"class":54,"line":594},[52,41158,121],{"class":58},[52,41160,63],{"class":371},[52,41162,77],{"class":58},[43,41164,41165],{"className":419,"code":41032,"language":420,"meta":48,"style":48},[31,41166,41167,41175,41183,41191,41199],{"__ignoreMap":48},[52,41168,41169,41171,41173],{"class":54,"line":55},[52,41170,59],{"class":58},[52,41172,63],{"class":371},[52,41174,77],{"class":58},[52,41176,41177,41179,41181],{"class":54,"line":80},[52,41178,83],{"class":58},[52,41180,41015],{"class":371},[52,41182,77],{"class":58},[52,41184,41185,41187,41189],{"class":54,"line":108},[52,41186,2213],{"class":58},[52,41188,2216],{"class":371},[52,41190,105],{"class":58},[52,41192,41193,41195,41197],{"class":54,"line":118},[52,41194,2230],{"class":58},[52,41196,41015],{"class":371},[52,41198,77],{"class":58},[52,41200,41201,41203,41205],{"class":54,"line":594},[52,41202,121],{"class":58},[52,41204,63],{"class":371},[52,41206,77],{"class":58},[43,41208,41210],{"className":222,"code":41209,"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,41211,41212,41222,41226,41240,41244,41253,41261,41265,41269],{"__ignoreMap":48},[52,41213,41214,41216,41218,41220],{"class":54,"line":55},[52,41215,232],{"class":231},[52,41217,9231],{"class":58},[52,41219,238],{"class":231},[52,41221,9236],{"class":73},[52,41223,41224],{"class":54,"line":80},[52,41225,597],{"emptyLinePlaceholder":171},[52,41227,41228,41230,41232,41234,41236,41238],{"class":54,"line":108},[52,41229,1721],{"class":231},[52,41231,1724],{"class":371},[52,41233,1727],{"class":231},[52,41235,1730],{"class":231},[52,41237,1733],{"class":66},[52,41239,1736],{"class":58},[52,41241,41242],{"class":54,"line":118},[52,41243,1751],{"class":58},[52,41245,41246,41248,41251],{"class":54,"line":594},[52,41247,1756],{"class":58},[52,41249,41250],{"class":73},"'Invert'",[52,41252,4722],{"class":58},[52,41254,41255,41257,41259],{"class":54,"line":600},[52,41256,4727],{"class":58},[52,41258,2869],{"class":73},[52,41260,2129],{"class":58},[52,41262,41263],{"class":54,"line":606},[52,41264,4744],{"class":58},[52,41266,41267],{"class":54,"line":653},[52,41268,1773],{"class":58},[52,41270,41271],{"class":54,"line":662},[52,41272,1778],{"class":58},[156,41274,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41276},[41277],{"id":26912,"depth":80,"text":26913},{},"/docs/components/invert",{"title":41015,"description":41023},"docs/components/Invert","DCBJvGEzGhXZ2oKf3IebGqsbmBbkAPhDRZUnRHcF6LQ",{"id":41284,"title":41285,"body":41286,"category":29105,"componentType":20848,"description":41293,"extension":168,"meta":41554,"navigation":171,"path":41555,"requiresChild":171,"seo":41556,"stem":41557,"__hash__":41558},"components/docs/components/Kaleidoscope.md","Kaleidoscope",{"type":8,"value":41287,"toc":41550},[41288,41291,41294,41296,41298,41301,41303,41548],[11,41289,41285],{"id":41290},"kaleidoscope",[15,41292,41293],{},"Create a kaleidoscope effect with radial mirrored segments",[26901,41295],{"component":41285},[23,41297,26905],{"id":21503},[26907,41299],{":props":41300},"[{\"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,41302,26913],{"id":26912},[217,41304,41305,41350,41394,41438,41482],{":tabs":1543},[43,41306,41308],{"className":45,"code":41307,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CKaleidoscope>\n \u003CCircle />\n \u003C/Kaleidoscope>\n\u003C/Shader>\n",[31,41309,41310,41318,41326,41334,41342],{"__ignoreMap":48},[52,41311,41312,41314,41316],{"class":54,"line":55},[52,41313,59],{"class":58},[52,41315,63],{"class":62},[52,41317,77],{"class":58},[52,41319,41320,41322,41324],{"class":54,"line":80},[52,41321,83],{"class":58},[52,41323,41285],{"class":62},[52,41325,77],{"class":58},[52,41327,41328,41330,41332],{"class":54,"line":108},[52,41329,2213],{"class":58},[52,41331,2216],{"class":62},[52,41333,105],{"class":58},[52,41335,41336,41338,41340],{"class":54,"line":118},[52,41337,2230],{"class":58},[52,41339,41285],{"class":62},[52,41341,77],{"class":58},[52,41343,41344,41346,41348],{"class":54,"line":594},[52,41345,121],{"class":58},[52,41347,63],{"class":62},[52,41349,77],{"class":58},[43,41351,41352],{"className":360,"code":41307,"language":362,"meta":48,"style":48},[31,41353,41354,41362,41370,41378,41386],{"__ignoreMap":48},[52,41355,41356,41358,41360],{"class":54,"line":55},[52,41357,59],{"class":58},[52,41359,63],{"class":371},[52,41361,77],{"class":58},[52,41363,41364,41366,41368],{"class":54,"line":80},[52,41365,83],{"class":58},[52,41367,41285],{"class":371},[52,41369,77],{"class":58},[52,41371,41372,41374,41376],{"class":54,"line":108},[52,41373,2213],{"class":58},[52,41375,2216],{"class":371},[52,41377,105],{"class":58},[52,41379,41380,41382,41384],{"class":54,"line":118},[52,41381,2230],{"class":58},[52,41383,41285],{"class":371},[52,41385,77],{"class":58},[52,41387,41388,41390,41392],{"class":54,"line":594},[52,41389,121],{"class":58},[52,41391,63],{"class":371},[52,41393,77],{"class":58},[43,41395,41396],{"className":2507,"code":41307,"language":2509,"meta":48,"style":48},[31,41397,41398,41406,41414,41422,41430],{"__ignoreMap":48},[52,41399,41400,41402,41404],{"class":54,"line":55},[52,41401,59],{"class":58},[52,41403,63],{"class":371},[52,41405,77],{"class":58},[52,41407,41408,41410,41412],{"class":54,"line":80},[52,41409,83],{"class":58},[52,41411,41285],{"class":371},[52,41413,77],{"class":58},[52,41415,41416,41418,41420],{"class":54,"line":108},[52,41417,2213],{"class":58},[52,41419,2216],{"class":371},[52,41421,105],{"class":58},[52,41423,41424,41426,41428],{"class":54,"line":118},[52,41425,2230],{"class":58},[52,41427,41285],{"class":371},[52,41429,77],{"class":58},[52,41431,41432,41434,41436],{"class":54,"line":594},[52,41433,121],{"class":58},[52,41435,63],{"class":371},[52,41437,77],{"class":58},[43,41439,41440],{"className":419,"code":41307,"language":420,"meta":48,"style":48},[31,41441,41442,41450,41458,41466,41474],{"__ignoreMap":48},[52,41443,41444,41446,41448],{"class":54,"line":55},[52,41445,59],{"class":58},[52,41447,63],{"class":371},[52,41449,77],{"class":58},[52,41451,41452,41454,41456],{"class":54,"line":80},[52,41453,83],{"class":58},[52,41455,41285],{"class":371},[52,41457,77],{"class":58},[52,41459,41460,41462,41464],{"class":54,"line":108},[52,41461,2213],{"class":58},[52,41463,2216],{"class":371},[52,41465,105],{"class":58},[52,41467,41468,41470,41472],{"class":54,"line":118},[52,41469,2230],{"class":58},[52,41471,41285],{"class":371},[52,41473,77],{"class":58},[52,41475,41476,41478,41480],{"class":54,"line":594},[52,41477,121],{"class":58},[52,41479,63],{"class":371},[52,41481,77],{"class":58},[43,41483,41485],{"className":222,"code":41484,"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,41486,41487,41497,41501,41515,41519,41528,41536,41540,41544],{"__ignoreMap":48},[52,41488,41489,41491,41493,41495],{"class":54,"line":55},[52,41490,232],{"class":231},[52,41492,9231],{"class":58},[52,41494,238],{"class":231},[52,41496,9236],{"class":73},[52,41498,41499],{"class":54,"line":80},[52,41500,597],{"emptyLinePlaceholder":171},[52,41502,41503,41505,41507,41509,41511,41513],{"class":54,"line":108},[52,41504,1721],{"class":231},[52,41506,1724],{"class":371},[52,41508,1727],{"class":231},[52,41510,1730],{"class":231},[52,41512,1733],{"class":66},[52,41514,1736],{"class":58},[52,41516,41517],{"class":54,"line":118},[52,41518,1751],{"class":58},[52,41520,41521,41523,41526],{"class":54,"line":594},[52,41522,1756],{"class":58},[52,41524,41525],{"class":73},"'Kaleidoscope'",[52,41527,4722],{"class":58},[52,41529,41530,41532,41534],{"class":54,"line":600},[52,41531,4727],{"class":58},[52,41533,2869],{"class":73},[52,41535,2129],{"class":58},[52,41537,41538],{"class":54,"line":606},[52,41539,4744],{"class":58},[52,41541,41542],{"class":54,"line":653},[52,41543,1773],{"class":58},[52,41545,41546],{"class":54,"line":662},[52,41547,1778],{"class":58},[156,41549,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":41551},[41552,41553],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/kaleidoscope",{"title":41285,"description":41293},"docs/components/Kaleidoscope","Yskzmt_0-_MHbpybHdHEarP6vTXJpQpirtKAebuBoBE",{"id":41560,"title":41561,"body":41562,"category":27503,"componentType":20842,"description":41569,"extension":168,"meta":41809,"navigation":171,"path":41810,"requiresChild":27763,"seo":41811,"stem":41812,"__hash__":41813},"components/docs/components/LensFlare.md","LensFlare",{"type":8,"value":41563,"toc":41805},[41564,41567,41570,41572,41574,41577,41579,41803],[11,41565,41561],{"id":41566},"lensflare",[15,41568,41569],{},"Realistic camera lens flare with artifacts.",[26901,41571],{"component":41561},[23,41573,26905],{"id":21503},[26907,41575],{":props":41576},"[{\"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,41578,26913],{"id":26912},[217,41580,41581,41620,41663,41703,41745],{":tabs":1543},[43,41582,41584],{"className":45,"code":41583,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n :intensity=\"0.5\"\n />\n\u003C/Shader>\n",[31,41585,41586,41594,41600,41608,41612],{"__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],{"class":54,"line":80},[52,41597,83],{"class":58},[52,41599,17856],{"class":62},[52,41601,41602,41604,41606],{"class":54,"line":108},[52,41603,17870],{"class":66},[52,41605,70],{"class":58},[52,41607,32462],{"class":73},[52,41609,41610],{"class":54,"line":118},[52,41611,1224],{"class":58},[52,41613,41614,41616,41618],{"class":54,"line":594},[52,41615,121],{"class":58},[52,41617,63],{"class":62},[52,41619,77],{"class":58},[43,41621,41623],{"className":360,"code":41622,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLensFlare\n intensity={0.5}\n />\n\u003C/Shader>\n",[31,41624,41625,41633,41639,41651,41655],{"__ignoreMap":48},[52,41626,41627,41629,41631],{"class":54,"line":55},[52,41628,59],{"class":58},[52,41630,63],{"class":371},[52,41632,77],{"class":58},[52,41634,41635,41637],{"class":54,"line":80},[52,41636,83],{"class":58},[52,41638,17856],{"class":371},[52,41640,41641,41643,41645,41647,41649],{"class":54,"line":108},[52,41642,17981],{"class":66},[52,41644,70],{"class":231},[52,41646,723],{"class":58},[52,41648,5467],{"class":371},[52,41650,729],{"class":58},[52,41652,41653],{"class":54,"line":118},[52,41654,1224],{"class":58},[52,41656,41657,41659,41661],{"class":54,"line":594},[52,41658,121],{"class":58},[52,41660,63],{"class":371},[52,41662,77],{"class":58},[43,41664,41665],{"className":2507,"code":41622,"language":2509,"meta":48,"style":48},[31,41666,41667,41675,41681,41691,41695],{"__ignoreMap":48},[52,41668,41669,41671,41673],{"class":54,"line":55},[52,41670,59],{"class":58},[52,41672,63],{"class":371},[52,41674,77],{"class":58},[52,41676,41677,41679],{"class":54,"line":80},[52,41678,83],{"class":58},[52,41680,17856],{"class":371},[52,41682,41683,41685,41687,41689],{"class":54,"line":108},[52,41684,17981],{"class":66},[52,41686,24845],{"class":58},[52,41688,5467],{"class":371},[52,41690,729],{"class":58},[52,41692,41693],{"class":54,"line":118},[52,41694,1224],{"class":58},[52,41696,41697,41699,41701],{"class":54,"line":594},[52,41698,121],{"class":58},[52,41700,63],{"class":371},[52,41702,77],{"class":58},[43,41704,41705],{"className":419,"code":41622,"language":420,"meta":48,"style":48},[31,41706,41707,41715,41721,41733,41737],{"__ignoreMap":48},[52,41708,41709,41711,41713],{"class":54,"line":55},[52,41710,59],{"class":58},[52,41712,63],{"class":371},[52,41714,77],{"class":58},[52,41716,41717,41719],{"class":54,"line":80},[52,41718,83],{"class":58},[52,41720,17856],{"class":371},[52,41722,41723,41725,41727,41729,41731],{"class":54,"line":108},[52,41724,17981],{"class":66},[52,41726,70],{"class":231},[52,41728,723],{"class":58},[52,41730,5467],{"class":371},[52,41732,729],{"class":58},[52,41734,41735],{"class":54,"line":118},[52,41736,1224],{"class":58},[52,41738,41739,41741,41743],{"class":54,"line":594},[52,41740,121],{"class":58},[52,41742,63],{"class":371},[52,41744,77],{"class":58},[43,41746,41748],{"className":222,"code":41747,"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,41749,41750,41760,41764,41778,41782,41795,41799],{"__ignoreMap":48},[52,41751,41752,41754,41756,41758],{"class":54,"line":55},[52,41753,232],{"class":231},[52,41755,9231],{"class":58},[52,41757,238],{"class":231},[52,41759,9236],{"class":73},[52,41761,41762],{"class":54,"line":80},[52,41763,597],{"emptyLinePlaceholder":171},[52,41765,41766,41768,41770,41772,41774,41776],{"class":54,"line":108},[52,41767,1721],{"class":231},[52,41769,1724],{"class":371},[52,41771,1727],{"class":231},[52,41773,1730],{"class":231},[52,41775,1733],{"class":66},[52,41777,1736],{"class":58},[52,41779,41780],{"class":54,"line":118},[52,41781,1751],{"class":58},[52,41783,41784,41786,41789,41791,41793],{"class":54,"line":594},[52,41785,1756],{"class":58},[52,41787,41788],{"class":73},"'LensFlare'",[52,41790,27194],{"class":58},[52,41792,5467],{"class":371},[52,41794,1768],{"class":58},[52,41796,41797],{"class":54,"line":600},[52,41798,1773],{"class":58},[52,41800,41801],{"class":54,"line":606},[52,41802,1778],{"class":58},[156,41804,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":41806},[41807,41808],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lensflare",{"title":41561,"description":41569},"docs/components/LensFlare","sSfBceishK4w93UNdGBtM-eH-1h5tChkRaAug8I6Wb8",{"id":41815,"title":41816,"body":41817,"category":27225,"componentType":20848,"description":41824,"extension":168,"meta":42141,"navigation":171,"path":42142,"requiresChild":171,"seo":42143,"stem":42144,"__hash__":42145},"components/docs/components/LinearBlur.md","LinearBlur",{"type":8,"value":41818,"toc":42137},[41819,41822,41825,41827,41829,41832,41834,42135],[11,41820,41816],{"id":41821},"linearblur",[15,41823,41824],{},"Directional motion blur in a specific angle",[26901,41826],{"component":41816},[23,41828,26905],{"id":21503},[26907,41830],{":props":41831},"[{\"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,41833,26913],{"id":26912},[217,41835,41836,41892,41951,42007,42065],{":tabs":1543},[43,41837,41839],{"className":45,"code":41838,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41840,41841,41849,41856,41864,41868,41876,41884],{"__ignoreMap":48},[52,41842,41843,41845,41847],{"class":54,"line":55},[52,41844,59],{"class":58},[52,41846,63],{"class":62},[52,41848,77],{"class":58},[52,41850,41851,41853],{"class":54,"line":80},[52,41852,83],{"class":58},[52,41854,41855],{"class":62},"LinearBlur\n",[52,41857,41858,41860,41862],{"class":54,"line":108},[52,41859,17870],{"class":66},[52,41861,70],{"class":58},[52,41863,33488],{"class":73},[52,41865,41866],{"class":54,"line":118},[52,41867,26949],{"class":58},[52,41869,41870,41872,41874],{"class":54,"line":594},[52,41871,2213],{"class":58},[52,41873,2216],{"class":62},[52,41875,105],{"class":58},[52,41877,41878,41880,41882],{"class":54,"line":600},[52,41879,2230],{"class":58},[52,41881,41816],{"class":62},[52,41883,77],{"class":58},[52,41885,41886,41888,41890],{"class":54,"line":606},[52,41887,121],{"class":58},[52,41889,63],{"class":62},[52,41891,77],{"class":58},[43,41893,41895],{"className":360,"code":41894,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CLinearBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/LinearBlur>\n\u003C/Shader>\n",[31,41896,41897,41905,41911,41923,41927,41935,41943],{"__ignoreMap":48},[52,41898,41899,41901,41903],{"class":54,"line":55},[52,41900,59],{"class":58},[52,41902,63],{"class":371},[52,41904,77],{"class":58},[52,41906,41907,41909],{"class":54,"line":80},[52,41908,83],{"class":58},[52,41910,41855],{"class":371},[52,41912,41913,41915,41917,41919,41921],{"class":54,"line":108},[52,41914,17981],{"class":66},[52,41916,70],{"class":231},[52,41918,723],{"class":58},[52,41920,13194],{"class":371},[52,41922,729],{"class":58},[52,41924,41925],{"class":54,"line":118},[52,41926,26949],{"class":58},[52,41928,41929,41931,41933],{"class":54,"line":594},[52,41930,2213],{"class":58},[52,41932,2216],{"class":371},[52,41934,105],{"class":58},[52,41936,41937,41939,41941],{"class":54,"line":600},[52,41938,2230],{"class":58},[52,41940,41816],{"class":371},[52,41942,77],{"class":58},[52,41944,41945,41947,41949],{"class":54,"line":606},[52,41946,121],{"class":58},[52,41948,63],{"class":371},[52,41950,77],{"class":58},[43,41952,41953],{"className":2507,"code":41894,"language":2509,"meta":48,"style":48},[31,41954,41955,41963,41969,41979,41983,41991,41999],{"__ignoreMap":48},[52,41956,41957,41959,41961],{"class":54,"line":55},[52,41958,59],{"class":58},[52,41960,63],{"class":371},[52,41962,77],{"class":58},[52,41964,41965,41967],{"class":54,"line":80},[52,41966,83],{"class":58},[52,41968,41855],{"class":371},[52,41970,41971,41973,41975,41977],{"class":54,"line":108},[52,41972,17981],{"class":66},[52,41974,24845],{"class":58},[52,41976,13194],{"class":371},[52,41978,729],{"class":58},[52,41980,41981],{"class":54,"line":118},[52,41982,26949],{"class":58},[52,41984,41985,41987,41989],{"class":54,"line":594},[52,41986,2213],{"class":58},[52,41988,2216],{"class":371},[52,41990,105],{"class":58},[52,41992,41993,41995,41997],{"class":54,"line":600},[52,41994,2230],{"class":58},[52,41996,41816],{"class":371},[52,41998,77],{"class":58},[52,42000,42001,42003,42005],{"class":54,"line":606},[52,42002,121],{"class":58},[52,42004,63],{"class":371},[52,42006,77],{"class":58},[43,42008,42009],{"className":419,"code":41894,"language":420,"meta":48,"style":48},[31,42010,42011,42019,42025,42037,42041,42049,42057],{"__ignoreMap":48},[52,42012,42013,42015,42017],{"class":54,"line":55},[52,42014,59],{"class":58},[52,42016,63],{"class":371},[52,42018,77],{"class":58},[52,42020,42021,42023],{"class":54,"line":80},[52,42022,83],{"class":58},[52,42024,41855],{"class":371},[52,42026,42027,42029,42031,42033,42035],{"class":54,"line":108},[52,42028,17981],{"class":66},[52,42030,70],{"class":231},[52,42032,723],{"class":58},[52,42034,13194],{"class":371},[52,42036,729],{"class":58},[52,42038,42039],{"class":54,"line":118},[52,42040,26949],{"class":58},[52,42042,42043,42045,42047],{"class":54,"line":594},[52,42044,2213],{"class":58},[52,42046,2216],{"class":371},[52,42048,105],{"class":58},[52,42050,42051,42053,42055],{"class":54,"line":600},[52,42052,2230],{"class":58},[52,42054,41816],{"class":371},[52,42056,77],{"class":58},[52,42058,42059,42061,42063],{"class":54,"line":606},[52,42060,121],{"class":58},[52,42062,63],{"class":371},[52,42064,77],{"class":58},[43,42066,42068],{"className":222,"code":42067,"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,42069,42070,42080,42084,42098,42102,42115,42123,42127,42131],{"__ignoreMap":48},[52,42071,42072,42074,42076,42078],{"class":54,"line":55},[52,42073,232],{"class":231},[52,42075,9231],{"class":58},[52,42077,238],{"class":231},[52,42079,9236],{"class":73},[52,42081,42082],{"class":54,"line":80},[52,42083,597],{"emptyLinePlaceholder":171},[52,42085,42086,42088,42090,42092,42094,42096],{"class":54,"line":108},[52,42087,1721],{"class":231},[52,42089,1724],{"class":371},[52,42091,1727],{"class":231},[52,42093,1730],{"class":231},[52,42095,1733],{"class":66},[52,42097,1736],{"class":58},[52,42099,42100],{"class":54,"line":118},[52,42101,1751],{"class":58},[52,42103,42104,42106,42109,42111,42113],{"class":54,"line":594},[52,42105,1756],{"class":58},[52,42107,42108],{"class":73},"'LinearBlur'",[52,42110,27194],{"class":58},[52,42112,13194],{"class":371},[52,42114,5259],{"class":58},[52,42116,42117,42119,42121],{"class":54,"line":600},[52,42118,4727],{"class":58},[52,42120,2869],{"class":73},[52,42122,2129],{"class":58},[52,42124,42125],{"class":54,"line":606},[52,42126,4744],{"class":58},[52,42128,42129],{"class":54,"line":653},[52,42130,1773],{"class":58},[52,42132,42133],{"class":54,"line":662},[52,42134,1778],{"class":58},[156,42136,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42138},[42139,42140],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/linearblur",{"title":41816,"description":41824},"docs/components/LinearBlur","qqFrRm3V5qjmx2rao3v7_QSuf0Ra5LBbSK0NUO3WDro",{"id":42147,"title":86,"body":42148,"category":27760,"componentType":20842,"description":42155,"extension":168,"meta":42339,"navigation":171,"path":42340,"requiresChild":27763,"seo":42341,"stem":42342,"__hash__":42343},"components/docs/components/LinearGradient.md",{"type":8,"value":42149,"toc":42335},[42150,42153,42156,42158,42160,42163,42165,42333],[11,42151,86],{"id":42152},"lineargradient",[15,42154,42155],{},"Create smooth linear color gradients",[26901,42157],{"component":86},[23,42159,26905],{"id":21503},[26907,42161],{":props":42162},"[{\"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,42164,26913],{"id":26912},[217,42166,42167,42196,42224,42252,42280],{":tabs":1543},[43,42168,42170],{"className":45,"code":42169,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CLinearGradient />\n\u003C/Shader>\n",[31,42171,42172,42180,42188],{"__ignoreMap":48},[52,42173,42174,42176,42178],{"class":54,"line":55},[52,42175,59],{"class":58},[52,42177,63],{"class":62},[52,42179,77],{"class":58},[52,42181,42182,42184,42186],{"class":54,"line":80},[52,42183,83],{"class":58},[52,42185,86],{"class":62},[52,42187,105],{"class":58},[52,42189,42190,42192,42194],{"class":54,"line":108},[52,42191,121],{"class":58},[52,42193,63],{"class":62},[52,42195,77],{"class":58},[43,42197,42198],{"className":360,"code":42169,"language":362,"meta":48,"style":48},[31,42199,42200,42208,42216],{"__ignoreMap":48},[52,42201,42202,42204,42206],{"class":54,"line":55},[52,42203,59],{"class":58},[52,42205,63],{"class":371},[52,42207,77],{"class":58},[52,42209,42210,42212,42214],{"class":54,"line":80},[52,42211,83],{"class":58},[52,42213,86],{"class":371},[52,42215,105],{"class":58},[52,42217,42218,42220,42222],{"class":54,"line":108},[52,42219,121],{"class":58},[52,42221,63],{"class":371},[52,42223,77],{"class":58},[43,42225,42226],{"className":2507,"code":42169,"language":2509,"meta":48,"style":48},[31,42227,42228,42236,42244],{"__ignoreMap":48},[52,42229,42230,42232,42234],{"class":54,"line":55},[52,42231,59],{"class":58},[52,42233,63],{"class":371},[52,42235,77],{"class":58},[52,42237,42238,42240,42242],{"class":54,"line":80},[52,42239,83],{"class":58},[52,42241,86],{"class":371},[52,42243,105],{"class":58},[52,42245,42246,42248,42250],{"class":54,"line":108},[52,42247,121],{"class":58},[52,42249,63],{"class":371},[52,42251,77],{"class":58},[43,42253,42254],{"className":419,"code":42169,"language":420,"meta":48,"style":48},[31,42255,42256,42264,42272],{"__ignoreMap":48},[52,42257,42258,42260,42262],{"class":54,"line":55},[52,42259,59],{"class":58},[52,42261,63],{"class":371},[52,42263,77],{"class":58},[52,42265,42266,42268,42270],{"class":54,"line":80},[52,42267,83],{"class":58},[52,42269,86],{"class":371},[52,42271,105],{"class":58},[52,42273,42274,42276,42278],{"class":54,"line":108},[52,42275,121],{"class":58},[52,42277,63],{"class":371},[52,42279,77],{"class":58},[43,42281,42283],{"className":222,"code":42282,"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,42284,42285,42295,42299,42313,42317,42325,42329],{"__ignoreMap":48},[52,42286,42287,42289,42291,42293],{"class":54,"line":55},[52,42288,232],{"class":231},[52,42290,9231],{"class":58},[52,42292,238],{"class":231},[52,42294,9236],{"class":73},[52,42296,42297],{"class":54,"line":80},[52,42298,597],{"emptyLinePlaceholder":171},[52,42300,42301,42303,42305,42307,42309,42311],{"class":54,"line":108},[52,42302,1721],{"class":231},[52,42304,1724],{"class":371},[52,42306,1727],{"class":231},[52,42308,1730],{"class":231},[52,42310,1733],{"class":66},[52,42312,1736],{"class":58},[52,42314,42315],{"class":54,"line":118},[52,42316,1751],{"class":58},[52,42318,42319,42321,42323],{"class":54,"line":594},[52,42320,1756],{"class":58},[52,42322,2126],{"class":73},[52,42324,2129],{"class":58},[52,42326,42327],{"class":54,"line":600},[52,42328,1773],{"class":58},[52,42330,42331],{"class":54,"line":606},[52,42332,1778],{"class":58},[156,42334,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42336},[42337,42338],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/lineargradient",{"title":86,"description":42155},"docs/components/LinearGradient","QEbE5psPCi827reBAI8Zm38MddvfEVtcb7fEFVmVaXg",{"id":42345,"title":42346,"body":42347,"category":30161,"componentType":20848,"description":42354,"extension":168,"meta":42717,"navigation":171,"path":42718,"requiresChild":171,"seo":42719,"stem":42720,"__hash__":42721},"components/docs/components/Liquify.md","Liquify",{"type":8,"value":42348,"toc":42713},[42349,42352,42355,42357,42359,42362,42364,42711],[11,42350,42346],{"id":42351},"liquify",[15,42353,42354],{},"Liquid-like interactive deformation effect",[26901,42356],{"component":42346},[23,42358,26905],{"id":21503},[26907,42360],{":props":42361},"[{\"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,42363,26913],{"id":26912},[217,42365,42366,42430,42501,42567,42637],{":tabs":1543},[43,42367,42369],{"className":45,"code":42368,"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,42370,42371,42379,42386,42394,42402,42406,42414,42422],{"__ignoreMap":48},[52,42372,42373,42375,42377],{"class":54,"line":55},[52,42374,59],{"class":58},[52,42376,63],{"class":62},[52,42378,77],{"class":58},[52,42380,42381,42383],{"class":54,"line":80},[52,42382,83],{"class":58},[52,42384,42385],{"class":62},"Liquify\n",[52,42387,42388,42390,42392],{"class":54,"line":108},[52,42389,17870],{"class":66},[52,42391,70],{"class":58},[52,42393,32453],{"class":73},[52,42395,42396,42398,42400],{"class":54,"line":118},[52,42397,14901],{"class":66},[52,42399,70],{"class":58},[52,42401,28827],{"class":73},[52,42403,42404],{"class":54,"line":594},[52,42405,26949],{"class":58},[52,42407,42408,42410,42412],{"class":54,"line":600},[52,42409,2213],{"class":58},[52,42411,2216],{"class":62},[52,42413,105],{"class":58},[52,42415,42416,42418,42420],{"class":54,"line":606},[52,42417,2230],{"class":58},[52,42419,42346],{"class":62},[52,42421,77],{"class":58},[52,42423,42424,42426,42428],{"class":54,"line":653},[52,42425,121],{"class":58},[52,42427,63],{"class":62},[52,42429,77],{"class":58},[43,42431,42433],{"className":360,"code":42432,"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,42434,42435,42443,42449,42461,42473,42477,42485,42493],{"__ignoreMap":48},[52,42436,42437,42439,42441],{"class":54,"line":55},[52,42438,59],{"class":58},[52,42440,63],{"class":371},[52,42442,77],{"class":58},[52,42444,42445,42447],{"class":54,"line":80},[52,42446,83],{"class":58},[52,42448,42385],{"class":371},[52,42450,42451,42453,42455,42457,42459],{"class":54,"line":108},[52,42452,17981],{"class":66},[52,42454,70],{"class":231},[52,42456,723],{"class":58},[52,42458,32520],{"class":371},[52,42460,729],{"class":58},[52,42462,42463,42465,42467,42469,42471],{"class":54,"line":118},[52,42464,7361],{"class":66},[52,42466,70],{"class":231},[52,42468,723],{"class":58},[52,42470,6391],{"class":371},[52,42472,729],{"class":58},[52,42474,42475],{"class":54,"line":594},[52,42476,26949],{"class":58},[52,42478,42479,42481,42483],{"class":54,"line":600},[52,42480,2213],{"class":58},[52,42482,2216],{"class":371},[52,42484,105],{"class":58},[52,42486,42487,42489,42491],{"class":54,"line":606},[52,42488,2230],{"class":58},[52,42490,42346],{"class":371},[52,42492,77],{"class":58},[52,42494,42495,42497,42499],{"class":54,"line":653},[52,42496,121],{"class":58},[52,42498,63],{"class":371},[52,42500,77],{"class":58},[43,42502,42503],{"className":2507,"code":42432,"language":2509,"meta":48,"style":48},[31,42504,42505,42513,42519,42529,42539,42543,42551,42559],{"__ignoreMap":48},[52,42506,42507,42509,42511],{"class":54,"line":55},[52,42508,59],{"class":58},[52,42510,63],{"class":371},[52,42512,77],{"class":58},[52,42514,42515,42517],{"class":54,"line":80},[52,42516,83],{"class":58},[52,42518,42385],{"class":371},[52,42520,42521,42523,42525,42527],{"class":54,"line":108},[52,42522,17981],{"class":66},[52,42524,24845],{"class":58},[52,42526,32520],{"class":371},[52,42528,729],{"class":58},[52,42530,42531,42533,42535,42537],{"class":54,"line":118},[52,42532,7361],{"class":66},[52,42534,24845],{"class":58},[52,42536,6391],{"class":371},[52,42538,729],{"class":58},[52,42540,42541],{"class":54,"line":594},[52,42542,26949],{"class":58},[52,42544,42545,42547,42549],{"class":54,"line":600},[52,42546,2213],{"class":58},[52,42548,2216],{"class":371},[52,42550,105],{"class":58},[52,42552,42553,42555,42557],{"class":54,"line":606},[52,42554,2230],{"class":58},[52,42556,42346],{"class":371},[52,42558,77],{"class":58},[52,42560,42561,42563,42565],{"class":54,"line":653},[52,42562,121],{"class":58},[52,42564,63],{"class":371},[52,42566,77],{"class":58},[43,42568,42569],{"className":419,"code":42432,"language":420,"meta":48,"style":48},[31,42570,42571,42579,42585,42597,42609,42613,42621,42629],{"__ignoreMap":48},[52,42572,42573,42575,42577],{"class":54,"line":55},[52,42574,59],{"class":58},[52,42576,63],{"class":371},[52,42578,77],{"class":58},[52,42580,42581,42583],{"class":54,"line":80},[52,42582,83],{"class":58},[52,42584,42385],{"class":371},[52,42586,42587,42589,42591,42593,42595],{"class":54,"line":108},[52,42588,17981],{"class":66},[52,42590,70],{"class":231},[52,42592,723],{"class":58},[52,42594,32520],{"class":371},[52,42596,729],{"class":58},[52,42598,42599,42601,42603,42605,42607],{"class":54,"line":118},[52,42600,7361],{"class":66},[52,42602,70],{"class":231},[52,42604,723],{"class":58},[52,42606,6391],{"class":371},[52,42608,729],{"class":58},[52,42610,42611],{"class":54,"line":594},[52,42612,26949],{"class":58},[52,42614,42615,42617,42619],{"class":54,"line":600},[52,42616,2213],{"class":58},[52,42618,2216],{"class":371},[52,42620,105],{"class":58},[52,42622,42623,42625,42627],{"class":54,"line":606},[52,42624,2230],{"class":58},[52,42626,42346],{"class":371},[52,42628,77],{"class":58},[52,42630,42631,42633,42635],{"class":54,"line":653},[52,42632,121],{"class":58},[52,42634,63],{"class":371},[52,42636,77],{"class":58},[43,42638,42640],{"className":222,"code":42639,"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,42641,42642,42652,42656,42670,42674,42691,42699,42703,42707],{"__ignoreMap":48},[52,42643,42644,42646,42648,42650],{"class":54,"line":55},[52,42645,232],{"class":231},[52,42647,9231],{"class":58},[52,42649,238],{"class":231},[52,42651,9236],{"class":73},[52,42653,42654],{"class":54,"line":80},[52,42655,597],{"emptyLinePlaceholder":171},[52,42657,42658,42660,42662,42664,42666,42668],{"class":54,"line":108},[52,42659,1721],{"class":231},[52,42661,1724],{"class":371},[52,42663,1727],{"class":231},[52,42665,1730],{"class":231},[52,42667,1733],{"class":66},[52,42669,1736],{"class":58},[52,42671,42672],{"class":54,"line":118},[52,42673,1751],{"class":58},[52,42675,42676,42678,42681,42683,42685,42687,42689],{"class":54,"line":594},[52,42677,1756],{"class":58},[52,42679,42680],{"class":73},"'Liquify'",[52,42682,27194],{"class":58},[52,42684,32520],{"class":371},[52,42686,4278],{"class":58},[52,42688,6391],{"class":371},[52,42690,5259],{"class":58},[52,42692,42693,42695,42697],{"class":54,"line":600},[52,42694,4727],{"class":58},[52,42696,2869],{"class":73},[52,42698,2129],{"class":58},[52,42700,42701],{"class":54,"line":606},[52,42702,4744],{"class":58},[52,42704,42705],{"class":54,"line":653},[52,42706,1773],{"class":58},[52,42708,42709],{"class":54,"line":662},[52,42710,1778],{"class":58},[156,42712,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":42714},[42715,42716],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/liquify",{"title":42346,"description":42354},"docs/components/Liquify","G4Twi4-XioyPxZdvjeuwzYP8PW7s-N34H0aMBqPqizE",{"id":42723,"title":42724,"body":42725,"category":29105,"componentType":20848,"description":42731,"extension":168,"meta":42992,"navigation":171,"path":42993,"requiresChild":171,"seo":42994,"stem":42995,"__hash__":42996},"components/docs/components/Mirror.md","Mirror",{"type":8,"value":42726,"toc":42988},[42727,42729,42732,42734,42736,42739,42741,42986],[11,42728,42724],{"id":13656},[15,42730,42731],{},"Mirror content across a line defined by center point and angle",[26901,42733],{"component":42724},[23,42735,26905],{"id":21503},[26907,42737],{":props":42738},"[{\"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,42740,26913],{"id":26912},[217,42742,42743,42788,42832,42876,42920],{":tabs":1543},[43,42744,42746],{"className":45,"code":42745,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMirror>\n \u003CCircle />\n \u003C/Mirror>\n\u003C/Shader>\n",[31,42747,42748,42756,42764,42772,42780],{"__ignoreMap":48},[52,42749,42750,42752,42754],{"class":54,"line":55},[52,42751,59],{"class":58},[52,42753,63],{"class":62},[52,42755,77],{"class":58},[52,42757,42758,42760,42762],{"class":54,"line":80},[52,42759,83],{"class":58},[52,42761,42724],{"class":62},[52,42763,77],{"class":58},[52,42765,42766,42768,42770],{"class":54,"line":108},[52,42767,2213],{"class":58},[52,42769,2216],{"class":62},[52,42771,105],{"class":58},[52,42773,42774,42776,42778],{"class":54,"line":118},[52,42775,2230],{"class":58},[52,42777,42724],{"class":62},[52,42779,77],{"class":58},[52,42781,42782,42784,42786],{"class":54,"line":594},[52,42783,121],{"class":58},[52,42785,63],{"class":62},[52,42787,77],{"class":58},[43,42789,42790],{"className":360,"code":42745,"language":362,"meta":48,"style":48},[31,42791,42792,42800,42808,42816,42824],{"__ignoreMap":48},[52,42793,42794,42796,42798],{"class":54,"line":55},[52,42795,59],{"class":58},[52,42797,63],{"class":371},[52,42799,77],{"class":58},[52,42801,42802,42804,42806],{"class":54,"line":80},[52,42803,83],{"class":58},[52,42805,42724],{"class":371},[52,42807,77],{"class":58},[52,42809,42810,42812,42814],{"class":54,"line":108},[52,42811,2213],{"class":58},[52,42813,2216],{"class":371},[52,42815,105],{"class":58},[52,42817,42818,42820,42822],{"class":54,"line":118},[52,42819,2230],{"class":58},[52,42821,42724],{"class":371},[52,42823,77],{"class":58},[52,42825,42826,42828,42830],{"class":54,"line":594},[52,42827,121],{"class":58},[52,42829,63],{"class":371},[52,42831,77],{"class":58},[43,42833,42834],{"className":2507,"code":42745,"language":2509,"meta":48,"style":48},[31,42835,42836,42844,42852,42860,42868],{"__ignoreMap":48},[52,42837,42838,42840,42842],{"class":54,"line":55},[52,42839,59],{"class":58},[52,42841,63],{"class":371},[52,42843,77],{"class":58},[52,42845,42846,42848,42850],{"class":54,"line":80},[52,42847,83],{"class":58},[52,42849,42724],{"class":371},[52,42851,77],{"class":58},[52,42853,42854,42856,42858],{"class":54,"line":108},[52,42855,2213],{"class":58},[52,42857,2216],{"class":371},[52,42859,105],{"class":58},[52,42861,42862,42864,42866],{"class":54,"line":118},[52,42863,2230],{"class":58},[52,42865,42724],{"class":371},[52,42867,77],{"class":58},[52,42869,42870,42872,42874],{"class":54,"line":594},[52,42871,121],{"class":58},[52,42873,63],{"class":371},[52,42875,77],{"class":58},[43,42877,42878],{"className":419,"code":42745,"language":420,"meta":48,"style":48},[31,42879,42880,42888,42896,42904,42912],{"__ignoreMap":48},[52,42881,42882,42884,42886],{"class":54,"line":55},[52,42883,59],{"class":58},[52,42885,63],{"class":371},[52,42887,77],{"class":58},[52,42889,42890,42892,42894],{"class":54,"line":80},[52,42891,83],{"class":58},[52,42893,42724],{"class":371},[52,42895,77],{"class":58},[52,42897,42898,42900,42902],{"class":54,"line":108},[52,42899,2213],{"class":58},[52,42901,2216],{"class":371},[52,42903,105],{"class":58},[52,42905,42906,42908,42910],{"class":54,"line":118},[52,42907,2230],{"class":58},[52,42909,42724],{"class":371},[52,42911,77],{"class":58},[52,42913,42914,42916,42918],{"class":54,"line":594},[52,42915,121],{"class":58},[52,42917,63],{"class":371},[52,42919,77],{"class":58},[43,42921,42923],{"className":222,"code":42922,"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,42924,42925,42935,42939,42953,42957,42966,42974,42978,42982],{"__ignoreMap":48},[52,42926,42927,42929,42931,42933],{"class":54,"line":55},[52,42928,232],{"class":231},[52,42930,9231],{"class":58},[52,42932,238],{"class":231},[52,42934,9236],{"class":73},[52,42936,42937],{"class":54,"line":80},[52,42938,597],{"emptyLinePlaceholder":171},[52,42940,42941,42943,42945,42947,42949,42951],{"class":54,"line":108},[52,42942,1721],{"class":231},[52,42944,1724],{"class":371},[52,42946,1727],{"class":231},[52,42948,1730],{"class":231},[52,42950,1733],{"class":66},[52,42952,1736],{"class":58},[52,42954,42955],{"class":54,"line":118},[52,42956,1751],{"class":58},[52,42958,42959,42961,42964],{"class":54,"line":594},[52,42960,1756],{"class":58},[52,42962,42963],{"class":73},"'Mirror'",[52,42965,4722],{"class":58},[52,42967,42968,42970,42972],{"class":54,"line":600},[52,42969,4727],{"class":58},[52,42971,2869],{"class":73},[52,42973,2129],{"class":58},[52,42975,42976],{"class":54,"line":606},[52,42977,4744],{"class":58},[52,42979,42980],{"class":54,"line":653},[52,42981,1773],{"class":58},[52,42983,42984],{"class":54,"line":662},[52,42985,1778],{"class":58},[156,42987,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":42989},[42990,42991],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/mirror",{"title":42724,"description":42731},"docs/components/Mirror","-dFq4Rflw2hJnllx--KkkAAgZIIW-gn4enefR3FaBPU",{"id":42998,"title":42999,"body":43000,"category":27760,"componentType":20842,"description":43007,"extension":168,"meta":43192,"navigation":171,"path":43193,"requiresChild":27763,"seo":43194,"stem":43195,"__hash__":43196},"components/docs/components/MultiPointGradient.md","MultiPointGradient",{"type":8,"value":43001,"toc":43188},[43002,43005,43008,43010,43012,43015,43017,43186],[11,43003,42999],{"id":43004},"multipointgradient",[15,43006,43007],{},"Five individually placed color points blended together by proximity — drag each point to shape the gradient",[26901,43009],{"component":42999},[23,43011,26905],{"id":21503},[26907,43013],{":props":43014},"[{\"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,43016,26913],{"id":26912},[217,43018,43019,43048,43076,43104,43132],{":tabs":1543},[43,43020,43022],{"className":45,"code":43021,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CMultiPointGradient />\n\u003C/Shader>\n",[31,43023,43024,43032,43040],{"__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,42999],{"class":62},[52,43039,105],{"class":58},[52,43041,43042,43044,43046],{"class":54,"line":108},[52,43043,121],{"class":58},[52,43045,63],{"class":62},[52,43047,77],{"class":58},[43,43049,43050],{"className":360,"code":43021,"language":362,"meta":48,"style":48},[31,43051,43052,43060,43068],{"__ignoreMap":48},[52,43053,43054,43056,43058],{"class":54,"line":55},[52,43055,59],{"class":58},[52,43057,63],{"class":371},[52,43059,77],{"class":58},[52,43061,43062,43064,43066],{"class":54,"line":80},[52,43063,83],{"class":58},[52,43065,42999],{"class":371},[52,43067,105],{"class":58},[52,43069,43070,43072,43074],{"class":54,"line":108},[52,43071,121],{"class":58},[52,43073,63],{"class":371},[52,43075,77],{"class":58},[43,43077,43078],{"className":2507,"code":43021,"language":2509,"meta":48,"style":48},[31,43079,43080,43088,43096],{"__ignoreMap":48},[52,43081,43082,43084,43086],{"class":54,"line":55},[52,43083,59],{"class":58},[52,43085,63],{"class":371},[52,43087,77],{"class":58},[52,43089,43090,43092,43094],{"class":54,"line":80},[52,43091,83],{"class":58},[52,43093,42999],{"class":371},[52,43095,105],{"class":58},[52,43097,43098,43100,43102],{"class":54,"line":108},[52,43099,121],{"class":58},[52,43101,63],{"class":371},[52,43103,77],{"class":58},[43,43105,43106],{"className":419,"code":43021,"language":420,"meta":48,"style":48},[31,43107,43108,43116,43124],{"__ignoreMap":48},[52,43109,43110,43112,43114],{"class":54,"line":55},[52,43111,59],{"class":58},[52,43113,63],{"class":371},[52,43115,77],{"class":58},[52,43117,43118,43120,43122],{"class":54,"line":80},[52,43119,83],{"class":58},[52,43121,42999],{"class":371},[52,43123,105],{"class":58},[52,43125,43126,43128,43130],{"class":54,"line":108},[52,43127,121],{"class":58},[52,43129,63],{"class":371},[52,43131,77],{"class":58},[43,43133,43135],{"className":222,"code":43134,"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,43136,43137,43147,43151,43165,43169,43178,43182],{"__ignoreMap":48},[52,43138,43139,43141,43143,43145],{"class":54,"line":55},[52,43140,232],{"class":231},[52,43142,9231],{"class":58},[52,43144,238],{"class":231},[52,43146,9236],{"class":73},[52,43148,43149],{"class":54,"line":80},[52,43150,597],{"emptyLinePlaceholder":171},[52,43152,43153,43155,43157,43159,43161,43163],{"class":54,"line":108},[52,43154,1721],{"class":231},[52,43156,1724],{"class":371},[52,43158,1727],{"class":231},[52,43160,1730],{"class":231},[52,43162,1733],{"class":66},[52,43164,1736],{"class":58},[52,43166,43167],{"class":54,"line":118},[52,43168,1751],{"class":58},[52,43170,43171,43173,43176],{"class":54,"line":594},[52,43172,1756],{"class":58},[52,43174,43175],{"class":73},"'MultiPointGradient'",[52,43177,2129],{"class":58},[52,43179,43180],{"class":54,"line":600},[52,43181,1773],{"class":58},[52,43183,43184],{"class":54,"line":606},[52,43185,1778],{"class":58},[156,43187,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43189},[43190,43191],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/multipointgradient",{"title":42999,"description":43007},"docs/components/MultiPointGradient","IBAojZWfDLigVSKfWHbu9D8yAdpkN5M6rZZQY_Opdj0",{"id":43198,"title":18477,"body":43199,"category":32398,"componentType":20842,"description":43206,"extension":168,"meta":43485,"navigation":171,"path":43486,"requiresChild":27763,"seo":43487,"stem":43488,"__hash__":43489},"components/docs/components/Neon.md",{"type":8,"value":43200,"toc":43481},[43201,43204,43207,43209,43211,43214,43216,43479],[11,43202,18477],{"id":43203},"neon",[15,43205,43206],{},"Photorealistic neon tube / 3D pipe effect driven by a custom shape",[26901,43208],{"component":18477},[23,43210,26905],{"id":21503},[26907,43212],{":props":43213},"[{\"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,43215,26913],{"id":26912},[217,43217,43218,43268,43319,43367,43417],{":tabs":1543},[43,43219,43221],{"className":45,"code":43220,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,43222,43223,43231,43238,43247,43256,43260],{"__ignoreMap":48},[52,43224,43225,43227,43229],{"class":54,"line":55},[52,43226,59],{"class":58},[52,43228,63],{"class":62},[52,43230,77],{"class":58},[52,43232,43233,43235],{"class":54,"line":80},[52,43234,83],{"class":58},[52,43236,43237],{"class":62},"Neon\n",[52,43239,43240,43242,43244],{"class":54,"line":108},[52,43241,7351],{"class":66},[52,43243,70],{"class":58},[52,43245,43246],{"class":73},"\"#00ddff\"\n",[52,43248,43249,43251,43253],{"class":54,"line":118},[52,43250,17870],{"class":66},[52,43252,70],{"class":58},[52,43254,43255],{"class":73},"\"1.5\"\n",[52,43257,43258],{"class":54,"line":594},[52,43259,1224],{"class":58},[52,43261,43262,43264,43266],{"class":54,"line":600},[52,43263,121],{"class":58},[52,43265,63],{"class":62},[52,43267,77],{"class":58},[43,43269,43271],{"className":360,"code":43270,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CNeon\n color=\"#00ddff\"\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,43272,43273,43281,43287,43295,43307,43311],{"__ignoreMap":48},[52,43274,43275,43277,43279],{"class":54,"line":55},[52,43276,59],{"class":58},[52,43278,63],{"class":371},[52,43280,77],{"class":58},[52,43282,43283,43285],{"class":54,"line":80},[52,43284,83],{"class":58},[52,43286,43237],{"class":371},[52,43288,43289,43291,43293],{"class":54,"line":108},[52,43290,7351],{"class":66},[52,43292,70],{"class":231},[52,43294,43246],{"class":73},[52,43296,43297,43299,43301,43303,43305],{"class":54,"line":118},[52,43298,17981],{"class":66},[52,43300,70],{"class":231},[52,43302,723],{"class":58},[52,43304,13171],{"class":371},[52,43306,729],{"class":58},[52,43308,43309],{"class":54,"line":594},[52,43310,1224],{"class":58},[52,43312,43313,43315,43317],{"class":54,"line":600},[52,43314,121],{"class":58},[52,43316,63],{"class":371},[52,43318,77],{"class":58},[43,43320,43321],{"className":2507,"code":43270,"language":2509,"meta":48,"style":48},[31,43322,43323,43331,43337,43345,43355,43359],{"__ignoreMap":48},[52,43324,43325,43327,43329],{"class":54,"line":55},[52,43326,59],{"class":58},[52,43328,63],{"class":371},[52,43330,77],{"class":58},[52,43332,43333,43335],{"class":54,"line":80},[52,43334,83],{"class":58},[52,43336,43237],{"class":371},[52,43338,43339,43341,43343],{"class":54,"line":108},[52,43340,7351],{"class":66},[52,43342,70],{"class":58},[52,43344,43246],{"class":73},[52,43346,43347,43349,43351,43353],{"class":54,"line":118},[52,43348,17981],{"class":66},[52,43350,24845],{"class":58},[52,43352,13171],{"class":371},[52,43354,729],{"class":58},[52,43356,43357],{"class":54,"line":594},[52,43358,1224],{"class":58},[52,43360,43361,43363,43365],{"class":54,"line":600},[52,43362,121],{"class":58},[52,43364,63],{"class":371},[52,43366,77],{"class":58},[43,43368,43369],{"className":419,"code":43270,"language":420,"meta":48,"style":48},[31,43370,43371,43379,43385,43393,43405,43409],{"__ignoreMap":48},[52,43372,43373,43375,43377],{"class":54,"line":55},[52,43374,59],{"class":58},[52,43376,63],{"class":371},[52,43378,77],{"class":58},[52,43380,43381,43383],{"class":54,"line":80},[52,43382,83],{"class":58},[52,43384,43237],{"class":371},[52,43386,43387,43389,43391],{"class":54,"line":108},[52,43388,7351],{"class":66},[52,43390,70],{"class":231},[52,43392,43246],{"class":73},[52,43394,43395,43397,43399,43401,43403],{"class":54,"line":118},[52,43396,17981],{"class":66},[52,43398,70],{"class":231},[52,43400,723],{"class":58},[52,43402,13171],{"class":371},[52,43404,729],{"class":58},[52,43406,43407],{"class":54,"line":594},[52,43408,1224],{"class":58},[52,43410,43411,43413,43415],{"class":54,"line":600},[52,43412,121],{"class":58},[52,43414,63],{"class":371},[52,43416,77],{"class":58},[43,43418,43420],{"className":222,"code":43419,"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,43421,43422,43432,43436,43450,43454,43471,43475],{"__ignoreMap":48},[52,43423,43424,43426,43428,43430],{"class":54,"line":55},[52,43425,232],{"class":231},[52,43427,9231],{"class":58},[52,43429,238],{"class":231},[52,43431,9236],{"class":73},[52,43433,43434],{"class":54,"line":80},[52,43435,597],{"emptyLinePlaceholder":171},[52,43437,43438,43440,43442,43444,43446,43448],{"class":54,"line":108},[52,43439,1721],{"class":231},[52,43441,1724],{"class":371},[52,43443,1727],{"class":231},[52,43445,1730],{"class":231},[52,43447,1733],{"class":66},[52,43449,1736],{"class":58},[52,43451,43452],{"class":54,"line":118},[52,43453,1751],{"class":58},[52,43455,43456,43458,43460,43462,43465,43467,43469],{"class":54,"line":594},[52,43457,1756],{"class":58},[52,43459,19069],{"class":73},[52,43461,1762],{"class":58},[52,43463,43464],{"class":73},"'#00ddff'",[52,43466,34623],{"class":58},[52,43468,13171],{"class":371},[52,43470,1768],{"class":58},[52,43472,43473],{"class":54,"line":600},[52,43474,1773],{"class":58},[52,43476,43477],{"class":54,"line":606},[52,43478,1778],{"class":58},[156,43480,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":43482},[43483,43484],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/neon",{"title":18477,"description":43206},"docs/components/Neon","__gNZoFx2gUl34e5XmOjfaS0WfeM_La40FZL4amj7wY",{"id":43491,"title":43492,"body":43493,"category":27503,"componentType":20848,"description":43500,"extension":168,"meta":43761,"navigation":171,"path":43762,"requiresChild":171,"seo":43763,"stem":43764,"__hash__":43765},"components/docs/components/Paper.md","Paper",{"type":8,"value":43494,"toc":43757},[43495,43498,43501,43503,43505,43508,43510,43755],[11,43496,43492],{"id":43497},"paper",[15,43499,43500],{},"Applies realistic paper grain and surface roughness to child content",[26901,43502],{"component":43492},[23,43504,26905],{"id":21503},[26907,43506],{":props":43507},"[{\"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,43509,26913],{"id":26912},[217,43511,43512,43557,43601,43645,43689],{":tabs":1543},[43,43513,43515],{"className":45,"code":43514,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPaper>\n \u003CCircle />\n \u003C/Paper>\n\u003C/Shader>\n",[31,43516,43517,43525,43533,43541,43549],{"__ignoreMap":48},[52,43518,43519,43521,43523],{"class":54,"line":55},[52,43520,59],{"class":58},[52,43522,63],{"class":62},[52,43524,77],{"class":58},[52,43526,43527,43529,43531],{"class":54,"line":80},[52,43528,83],{"class":58},[52,43530,43492],{"class":62},[52,43532,77],{"class":58},[52,43534,43535,43537,43539],{"class":54,"line":108},[52,43536,2213],{"class":58},[52,43538,2216],{"class":62},[52,43540,105],{"class":58},[52,43542,43543,43545,43547],{"class":54,"line":118},[52,43544,2230],{"class":58},[52,43546,43492],{"class":62},[52,43548,77],{"class":58},[52,43550,43551,43553,43555],{"class":54,"line":594},[52,43552,121],{"class":58},[52,43554,63],{"class":62},[52,43556,77],{"class":58},[43,43558,43559],{"className":360,"code":43514,"language":362,"meta":48,"style":48},[31,43560,43561,43569,43577,43585,43593],{"__ignoreMap":48},[52,43562,43563,43565,43567],{"class":54,"line":55},[52,43564,59],{"class":58},[52,43566,63],{"class":371},[52,43568,77],{"class":58},[52,43570,43571,43573,43575],{"class":54,"line":80},[52,43572,83],{"class":58},[52,43574,43492],{"class":371},[52,43576,77],{"class":58},[52,43578,43579,43581,43583],{"class":54,"line":108},[52,43580,2213],{"class":58},[52,43582,2216],{"class":371},[52,43584,105],{"class":58},[52,43586,43587,43589,43591],{"class":54,"line":118},[52,43588,2230],{"class":58},[52,43590,43492],{"class":371},[52,43592,77],{"class":58},[52,43594,43595,43597,43599],{"class":54,"line":594},[52,43596,121],{"class":58},[52,43598,63],{"class":371},[52,43600,77],{"class":58},[43,43602,43603],{"className":2507,"code":43514,"language":2509,"meta":48,"style":48},[31,43604,43605,43613,43621,43629,43637],{"__ignoreMap":48},[52,43606,43607,43609,43611],{"class":54,"line":55},[52,43608,59],{"class":58},[52,43610,63],{"class":371},[52,43612,77],{"class":58},[52,43614,43615,43617,43619],{"class":54,"line":80},[52,43616,83],{"class":58},[52,43618,43492],{"class":371},[52,43620,77],{"class":58},[52,43622,43623,43625,43627],{"class":54,"line":108},[52,43624,2213],{"class":58},[52,43626,2216],{"class":371},[52,43628,105],{"class":58},[52,43630,43631,43633,43635],{"class":54,"line":118},[52,43632,2230],{"class":58},[52,43634,43492],{"class":371},[52,43636,77],{"class":58},[52,43638,43639,43641,43643],{"class":54,"line":594},[52,43640,121],{"class":58},[52,43642,63],{"class":371},[52,43644,77],{"class":58},[43,43646,43647],{"className":419,"code":43514,"language":420,"meta":48,"style":48},[31,43648,43649,43657,43665,43673,43681],{"__ignoreMap":48},[52,43650,43651,43653,43655],{"class":54,"line":55},[52,43652,59],{"class":58},[52,43654,63],{"class":371},[52,43656,77],{"class":58},[52,43658,43659,43661,43663],{"class":54,"line":80},[52,43660,83],{"class":58},[52,43662,43492],{"class":371},[52,43664,77],{"class":58},[52,43666,43667,43669,43671],{"class":54,"line":108},[52,43668,2213],{"class":58},[52,43670,2216],{"class":371},[52,43672,105],{"class":58},[52,43674,43675,43677,43679],{"class":54,"line":118},[52,43676,2230],{"class":58},[52,43678,43492],{"class":371},[52,43680,77],{"class":58},[52,43682,43683,43685,43687],{"class":54,"line":594},[52,43684,121],{"class":58},[52,43686,63],{"class":371},[52,43688,77],{"class":58},[43,43690,43692],{"className":222,"code":43691,"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,43693,43694,43704,43708,43722,43726,43735,43743,43747,43751],{"__ignoreMap":48},[52,43695,43696,43698,43700,43702],{"class":54,"line":55},[52,43697,232],{"class":231},[52,43699,9231],{"class":58},[52,43701,238],{"class":231},[52,43703,9236],{"class":73},[52,43705,43706],{"class":54,"line":80},[52,43707,597],{"emptyLinePlaceholder":171},[52,43709,43710,43712,43714,43716,43718,43720],{"class":54,"line":108},[52,43711,1721],{"class":231},[52,43713,1724],{"class":371},[52,43715,1727],{"class":231},[52,43717,1730],{"class":231},[52,43719,1733],{"class":66},[52,43721,1736],{"class":58},[52,43723,43724],{"class":54,"line":118},[52,43725,1751],{"class":58},[52,43727,43728,43730,43733],{"class":54,"line":594},[52,43729,1756],{"class":58},[52,43731,43732],{"class":73},"'Paper'",[52,43734,4722],{"class":58},[52,43736,43737,43739,43741],{"class":54,"line":600},[52,43738,4727],{"class":58},[52,43740,2869],{"class":73},[52,43742,2129],{"class":58},[52,43744,43745],{"class":54,"line":606},[52,43746,4744],{"class":58},[52,43748,43749],{"class":54,"line":653},[52,43750,1773],{"class":58},[52,43752,43753],{"class":54,"line":662},[52,43754,1778],{"class":58},[156,43756,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":43758},[43759,43760],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/paper",{"title":43492,"description":43500},"docs/components/Paper","IerfJUntun9325QtlaJkS-sO9pwrWrRoV9QrgQl_Ohs",{"id":43767,"title":43768,"body":43769,"category":29105,"componentType":20848,"description":43776,"extension":168,"meta":44037,"navigation":171,"path":44038,"requiresChild":171,"seo":44039,"stem":44040,"__hash__":44041},"components/docs/components/Perspective.md","Perspective",{"type":8,"value":43770,"toc":44033},[43771,43774,43777,43779,43781,43784,43786,44031],[11,43772,43768],{"id":43773},"perspective",[15,43775,43776],{},"Rotate the plane in 3D space with pan and tilt",[26901,43778],{"component":43768},[23,43780,26905],{"id":21503},[26907,43782],{":props":43783},"[{\"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,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 \u003CPerspective>\n \u003CCircle />\n \u003C/Perspective>\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: 'Perspective', 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},"'Perspective'",[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/perspective",{"title":43768,"description":43776},"docs/components/Perspective","uqc92lfnGw6eM7m2xtpk6sskTKVPswTzGswTsoTGChc",{"id":44043,"title":44044,"body":44045,"category":27503,"componentType":20848,"description":44052,"extension":168,"meta":44313,"navigation":171,"path":44314,"requiresChild":171,"seo":44315,"stem":44316,"__hash__":44317},"components/docs/components/Pixelate.md","Pixelate",{"type":8,"value":44046,"toc":44309},[44047,44050,44053,44055,44057,44060,44062,44307],[11,44048,44044],{"id":44049},"pixelate",[15,44051,44052],{},"Pixelation effect with adjustable cell size",[26901,44054],{"component":44044},[23,44056,26905],{"id":21503},[26907,44058],{":props":44059},"[{\"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,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 \u003CPixelate>\n \u003CCircle />\n \u003C/Pixelate>\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: 'Pixelate', 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},"'Pixelate'",[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/pixelate",{"title":44044,"description":44052},"docs/components/Pixelate","b0b6qDxxbl_8pcLj3HRVYBF03w73yA96vrVjeV_klFQ",{"id":44319,"title":10788,"body":44320,"category":27760,"componentType":20842,"description":44327,"extension":168,"meta":44568,"navigation":171,"path":44569,"requiresChild":27763,"seo":44570,"stem":44571,"__hash__":44572},"components/docs/components/Plasma.md",{"type":8,"value":44321,"toc":44564},[44322,44325,44328,44330,44332,44335,44337,44562],[11,44323,10788],{"id":44324},"plasma",[15,44326,44327],{},"Animated effect of glowing plasma",[26901,44329],{"component":10788},[23,44331,26905],{"id":21503},[26907,44333],{":props":44334},"[{\"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,44336,26913],{"id":26912},[217,44338,44339,44379,44422,44462,44504],{":tabs":1543},[43,44340,44342],{"className":45,"code":44341,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n :intensity=\"1.5\"\n />\n\u003C/Shader>\n",[31,44343,44344,44352,44359,44367,44371],{"__ignoreMap":48},[52,44345,44346,44348,44350],{"class":54,"line":55},[52,44347,59],{"class":58},[52,44349,63],{"class":62},[52,44351,77],{"class":58},[52,44353,44354,44356],{"class":54,"line":80},[52,44355,83],{"class":58},[52,44357,44358],{"class":62},"Plasma\n",[52,44360,44361,44363,44365],{"class":54,"line":108},[52,44362,17870],{"class":66},[52,44364,70],{"class":58},[52,44366,43255],{"class":73},[52,44368,44369],{"class":54,"line":118},[52,44370,1224],{"class":58},[52,44372,44373,44375,44377],{"class":54,"line":594},[52,44374,121],{"class":58},[52,44376,63],{"class":62},[52,44378,77],{"class":58},[43,44380,44382],{"className":360,"code":44381,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPlasma\n intensity={1.5}\n />\n\u003C/Shader>\n",[31,44383,44384,44392,44398,44410,44414],{"__ignoreMap":48},[52,44385,44386,44388,44390],{"class":54,"line":55},[52,44387,59],{"class":58},[52,44389,63],{"class":371},[52,44391,77],{"class":58},[52,44393,44394,44396],{"class":54,"line":80},[52,44395,83],{"class":58},[52,44397,44358],{"class":371},[52,44399,44400,44402,44404,44406,44408],{"class":54,"line":108},[52,44401,17981],{"class":66},[52,44403,70],{"class":231},[52,44405,723],{"class":58},[52,44407,13171],{"class":371},[52,44409,729],{"class":58},[52,44411,44412],{"class":54,"line":118},[52,44413,1224],{"class":58},[52,44415,44416,44418,44420],{"class":54,"line":594},[52,44417,121],{"class":58},[52,44419,63],{"class":371},[52,44421,77],{"class":58},[43,44423,44424],{"className":2507,"code":44381,"language":2509,"meta":48,"style":48},[31,44425,44426,44434,44440,44450,44454],{"__ignoreMap":48},[52,44427,44428,44430,44432],{"class":54,"line":55},[52,44429,59],{"class":58},[52,44431,63],{"class":371},[52,44433,77],{"class":58},[52,44435,44436,44438],{"class":54,"line":80},[52,44437,83],{"class":58},[52,44439,44358],{"class":371},[52,44441,44442,44444,44446,44448],{"class":54,"line":108},[52,44443,17981],{"class":66},[52,44445,24845],{"class":58},[52,44447,13171],{"class":371},[52,44449,729],{"class":58},[52,44451,44452],{"class":54,"line":118},[52,44453,1224],{"class":58},[52,44455,44456,44458,44460],{"class":54,"line":594},[52,44457,121],{"class":58},[52,44459,63],{"class":371},[52,44461,77],{"class":58},[43,44463,44464],{"className":419,"code":44381,"language":420,"meta":48,"style":48},[31,44465,44466,44474,44480,44492,44496],{"__ignoreMap":48},[52,44467,44468,44470,44472],{"class":54,"line":55},[52,44469,59],{"class":58},[52,44471,63],{"class":371},[52,44473,77],{"class":58},[52,44475,44476,44478],{"class":54,"line":80},[52,44477,83],{"class":58},[52,44479,44358],{"class":371},[52,44481,44482,44484,44486,44488,44490],{"class":54,"line":108},[52,44483,17981],{"class":66},[52,44485,70],{"class":231},[52,44487,723],{"class":58},[52,44489,13171],{"class":371},[52,44491,729],{"class":58},[52,44493,44494],{"class":54,"line":118},[52,44495,1224],{"class":58},[52,44497,44498,44500,44502],{"class":54,"line":594},[52,44499,121],{"class":58},[52,44501,63],{"class":371},[52,44503,77],{"class":58},[43,44505,44507],{"className":222,"code":44506,"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,44508,44509,44519,44523,44537,44541,44554,44558],{"__ignoreMap":48},[52,44510,44511,44513,44515,44517],{"class":54,"line":55},[52,44512,232],{"class":231},[52,44514,9231],{"class":58},[52,44516,238],{"class":231},[52,44518,9236],{"class":73},[52,44520,44521],{"class":54,"line":80},[52,44522,597],{"emptyLinePlaceholder":171},[52,44524,44525,44527,44529,44531,44533,44535],{"class":54,"line":108},[52,44526,1721],{"class":231},[52,44528,1724],{"class":371},[52,44530,1727],{"class":231},[52,44532,1730],{"class":231},[52,44534,1733],{"class":66},[52,44536,1736],{"class":58},[52,44538,44539],{"class":54,"line":118},[52,44540,1751],{"class":58},[52,44542,44543,44545,44548,44550,44552],{"class":54,"line":594},[52,44544,1756],{"class":58},[52,44546,44547],{"class":73},"'Plasma'",[52,44549,27194],{"class":58},[52,44551,13171],{"class":371},[52,44553,1768],{"class":58},[52,44555,44556],{"class":54,"line":600},[52,44557,1773],{"class":58},[52,44559,44560],{"class":54,"line":606},[52,44561,1778],{"class":58},[156,44563,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44565},[44566,44567],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/plasma",{"title":10788,"description":44327},"docs/components/Plasma","_bnktD8vkY7wmqAO7bC-PbXJf33ylZo_yn2gLiz7rEE",{"id":44574,"title":44575,"body":44576,"category":29105,"componentType":20848,"description":44583,"extension":168,"meta":44946,"navigation":171,"path":44947,"requiresChild":171,"seo":44948,"stem":44949,"__hash__":44950},"components/docs/components/PolarCoordinates.md","PolarCoordinates",{"type":8,"value":44577,"toc":44942},[44578,44581,44584,44586,44588,44591,44593,44940],[11,44579,44575],{"id":44580},"polarcoordinates",[15,44582,44583],{},"Convert rectangular coordinates to polar space",[26901,44585],{"component":44575},[23,44587,26905],{"id":21503},[26907,44589],{":props":44590},"[{\"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,44592,26913],{"id":26912},[217,44594,44595,44659,44730,44796,44866],{":tabs":1543},[43,44596,44598],{"className":45,"code":44597,"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,44599,44600,44608,44615,44623,44631,44635,44643,44651],{"__ignoreMap":48},[52,44601,44602,44604,44606],{"class":54,"line":55},[52,44603,59],{"class":58},[52,44605,63],{"class":62},[52,44607,77],{"class":58},[52,44609,44610,44612],{"class":54,"line":80},[52,44611,83],{"class":58},[52,44613,44614],{"class":62},"PolarCoordinates\n",[52,44616,44617,44619,44621],{"class":54,"line":108},[52,44618,14901],{"class":66},[52,44620,70],{"class":58},[52,44622,28827],{"class":73},[52,44624,44625,44627,44629],{"class":54,"line":118},[52,44626,17870],{"class":66},[52,44628,70],{"class":58},[52,44630,28827],{"class":73},[52,44632,44633],{"class":54,"line":594},[52,44634,26949],{"class":58},[52,44636,44637,44639,44641],{"class":54,"line":600},[52,44638,2213],{"class":58},[52,44640,2216],{"class":62},[52,44642,105],{"class":58},[52,44644,44645,44647,44649],{"class":54,"line":606},[52,44646,2230],{"class":58},[52,44648,44575],{"class":62},[52,44650,77],{"class":58},[52,44652,44653,44655,44657],{"class":54,"line":653},[52,44654,121],{"class":58},[52,44656,63],{"class":62},[52,44658,77],{"class":58},[43,44660,44662],{"className":360,"code":44661,"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,44663,44664,44672,44678,44690,44702,44706,44714,44722],{"__ignoreMap":48},[52,44665,44666,44668,44670],{"class":54,"line":55},[52,44667,59],{"class":58},[52,44669,63],{"class":371},[52,44671,77],{"class":58},[52,44673,44674,44676],{"class":54,"line":80},[52,44675,83],{"class":58},[52,44677,44614],{"class":371},[52,44679,44680,44682,44684,44686,44688],{"class":54,"line":108},[52,44681,7361],{"class":66},[52,44683,70],{"class":231},[52,44685,723],{"class":58},[52,44687,6391],{"class":371},[52,44689,729],{"class":58},[52,44691,44692,44694,44696,44698,44700],{"class":54,"line":118},[52,44693,17981],{"class":66},[52,44695,70],{"class":231},[52,44697,723],{"class":58},[52,44699,6391],{"class":371},[52,44701,729],{"class":58},[52,44703,44704],{"class":54,"line":594},[52,44705,26949],{"class":58},[52,44707,44708,44710,44712],{"class":54,"line":600},[52,44709,2213],{"class":58},[52,44711,2216],{"class":371},[52,44713,105],{"class":58},[52,44715,44716,44718,44720],{"class":54,"line":606},[52,44717,2230],{"class":58},[52,44719,44575],{"class":371},[52,44721,77],{"class":58},[52,44723,44724,44726,44728],{"class":54,"line":653},[52,44725,121],{"class":58},[52,44727,63],{"class":371},[52,44729,77],{"class":58},[43,44731,44732],{"className":2507,"code":44661,"language":2509,"meta":48,"style":48},[31,44733,44734,44742,44748,44758,44768,44772,44780,44788],{"__ignoreMap":48},[52,44735,44736,44738,44740],{"class":54,"line":55},[52,44737,59],{"class":58},[52,44739,63],{"class":371},[52,44741,77],{"class":58},[52,44743,44744,44746],{"class":54,"line":80},[52,44745,83],{"class":58},[52,44747,44614],{"class":371},[52,44749,44750,44752,44754,44756],{"class":54,"line":108},[52,44751,7361],{"class":66},[52,44753,24845],{"class":58},[52,44755,6391],{"class":371},[52,44757,729],{"class":58},[52,44759,44760,44762,44764,44766],{"class":54,"line":118},[52,44761,17981],{"class":66},[52,44763,24845],{"class":58},[52,44765,6391],{"class":371},[52,44767,729],{"class":58},[52,44769,44770],{"class":54,"line":594},[52,44771,26949],{"class":58},[52,44773,44774,44776,44778],{"class":54,"line":600},[52,44775,2213],{"class":58},[52,44777,2216],{"class":371},[52,44779,105],{"class":58},[52,44781,44782,44784,44786],{"class":54,"line":606},[52,44783,2230],{"class":58},[52,44785,44575],{"class":371},[52,44787,77],{"class":58},[52,44789,44790,44792,44794],{"class":54,"line":653},[52,44791,121],{"class":58},[52,44793,63],{"class":371},[52,44795,77],{"class":58},[43,44797,44798],{"className":419,"code":44661,"language":420,"meta":48,"style":48},[31,44799,44800,44808,44814,44826,44838,44842,44850,44858],{"__ignoreMap":48},[52,44801,44802,44804,44806],{"class":54,"line":55},[52,44803,59],{"class":58},[52,44805,63],{"class":371},[52,44807,77],{"class":58},[52,44809,44810,44812],{"class":54,"line":80},[52,44811,83],{"class":58},[52,44813,44614],{"class":371},[52,44815,44816,44818,44820,44822,44824],{"class":54,"line":108},[52,44817,7361],{"class":66},[52,44819,70],{"class":231},[52,44821,723],{"class":58},[52,44823,6391],{"class":371},[52,44825,729],{"class":58},[52,44827,44828,44830,44832,44834,44836],{"class":54,"line":118},[52,44829,17981],{"class":66},[52,44831,70],{"class":231},[52,44833,723],{"class":58},[52,44835,6391],{"class":371},[52,44837,729],{"class":58},[52,44839,44840],{"class":54,"line":594},[52,44841,26949],{"class":58},[52,44843,44844,44846,44848],{"class":54,"line":600},[52,44845,2213],{"class":58},[52,44847,2216],{"class":371},[52,44849,105],{"class":58},[52,44851,44852,44854,44856],{"class":54,"line":606},[52,44853,2230],{"class":58},[52,44855,44575],{"class":371},[52,44857,77],{"class":58},[52,44859,44860,44862,44864],{"class":54,"line":653},[52,44861,121],{"class":58},[52,44863,63],{"class":371},[52,44865,77],{"class":58},[43,44867,44869],{"className":222,"code":44868,"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,44870,44871,44881,44885,44899,44903,44920,44928,44932,44936],{"__ignoreMap":48},[52,44872,44873,44875,44877,44879],{"class":54,"line":55},[52,44874,232],{"class":231},[52,44876,9231],{"class":58},[52,44878,238],{"class":231},[52,44880,9236],{"class":73},[52,44882,44883],{"class":54,"line":80},[52,44884,597],{"emptyLinePlaceholder":171},[52,44886,44887,44889,44891,44893,44895,44897],{"class":54,"line":108},[52,44888,1721],{"class":231},[52,44890,1724],{"class":371},[52,44892,1727],{"class":231},[52,44894,1730],{"class":231},[52,44896,1733],{"class":66},[52,44898,1736],{"class":58},[52,44900,44901],{"class":54,"line":118},[52,44902,1751],{"class":58},[52,44904,44905,44907,44910,44912,44914,44916,44918],{"class":54,"line":594},[52,44906,1756],{"class":58},[52,44908,44909],{"class":73},"'PolarCoordinates'",[52,44911,5254],{"class":58},[52,44913,6391],{"class":371},[52,44915,34623],{"class":58},[52,44917,6391],{"class":371},[52,44919,5259],{"class":58},[52,44921,44922,44924,44926],{"class":54,"line":600},[52,44923,4727],{"class":58},[52,44925,2869],{"class":73},[52,44927,2129],{"class":58},[52,44929,44930],{"class":54,"line":606},[52,44931,4744],{"class":58},[52,44933,44934],{"class":54,"line":653},[52,44935,1773],{"class":58},[52,44937,44938],{"class":54,"line":662},[52,44939,1778],{"class":58},[156,44941,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":44943},[44944,44945],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polarcoordinates",{"title":44575,"description":44583},"docs/components/PolarCoordinates","Go_-4s1f8opSANX9-C5D3TB3vm5kCsvhD6fOGqzpTYE",{"id":44952,"title":44953,"body":44954,"category":30727,"componentType":20842,"description":44961,"extension":168,"meta":45238,"navigation":171,"path":45239,"requiresChild":27763,"seo":45240,"stem":45241,"__hash__":45242},"components/docs/components/Polygon.md","Polygon",{"type":8,"value":44955,"toc":45234},[44956,44959,44962,44964,44966,44969,44971,45232],[11,44957,44953],{"id":44958},"polygon",[15,44960,44961],{},"Regular polygon with adjustable sides and corner rounding",[26901,44963],{"component":44953},[23,44965,26905],{"id":21503},[26907,44967],{":props":44968},"[{\"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,44970,26913],{"id":26912},[217,44972,44973,45021,45072,45120,45170],{":tabs":1543},[43,44974,44976],{"className":45,"code":44975,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,44977,44978,44986,44993,45001,45009,45013],{"__ignoreMap":48},[52,44979,44980,44982,44984],{"class":54,"line":55},[52,44981,59],{"class":58},[52,44983,63],{"class":62},[52,44985,77],{"class":58},[52,44987,44988,44990],{"class":54,"line":80},[52,44989,83],{"class":58},[52,44991,44992],{"class":62},"Polygon\n",[52,44994,44995,44997,44999],{"class":54,"line":108},[52,44996,7351],{"class":66},[52,44998,70],{"class":58},[52,45000,7307],{"class":73},[52,45002,45003,45005,45007],{"class":54,"line":118},[52,45004,14901],{"class":66},[52,45006,70],{"class":58},[52,45008,36464],{"class":73},[52,45010,45011],{"class":54,"line":594},[52,45012,1224],{"class":58},[52,45014,45015,45017,45019],{"class":54,"line":600},[52,45016,121],{"class":58},[52,45018,63],{"class":62},[52,45020,77],{"class":58},[43,45022,45024],{"className":360,"code":45023,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPolygon\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,45025,45026,45034,45040,45048,45060,45064],{"__ignoreMap":48},[52,45027,45028,45030,45032],{"class":54,"line":55},[52,45029,59],{"class":58},[52,45031,63],{"class":371},[52,45033,77],{"class":58},[52,45035,45036,45038],{"class":54,"line":80},[52,45037,83],{"class":58},[52,45039,44992],{"class":371},[52,45041,45042,45044,45046],{"class":54,"line":108},[52,45043,7351],{"class":66},[52,45045,70],{"class":231},[52,45047,7307],{"class":73},[52,45049,45050,45052,45054,45056,45058],{"class":54,"line":118},[52,45051,7361],{"class":66},[52,45053,70],{"class":231},[52,45055,723],{"class":58},[52,45057,5963],{"class":371},[52,45059,729],{"class":58},[52,45061,45062],{"class":54,"line":594},[52,45063,1224],{"class":58},[52,45065,45066,45068,45070],{"class":54,"line":600},[52,45067,121],{"class":58},[52,45069,63],{"class":371},[52,45071,77],{"class":58},[43,45073,45074],{"className":2507,"code":45023,"language":2509,"meta":48,"style":48},[31,45075,45076,45084,45090,45098,45108,45112],{"__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,44992],{"class":371},[52,45091,45092,45094,45096],{"class":54,"line":108},[52,45093,7351],{"class":66},[52,45095,70],{"class":58},[52,45097,7307],{"class":73},[52,45099,45100,45102,45104,45106],{"class":54,"line":118},[52,45101,7361],{"class":66},[52,45103,24845],{"class":58},[52,45105,5963],{"class":371},[52,45107,729],{"class":58},[52,45109,45110],{"class":54,"line":594},[52,45111,1224],{"class":58},[52,45113,45114,45116,45118],{"class":54,"line":600},[52,45115,121],{"class":58},[52,45117,63],{"class":371},[52,45119,77],{"class":58},[43,45121,45122],{"className":419,"code":45023,"language":420,"meta":48,"style":48},[31,45123,45124,45132,45138,45146,45158,45162],{"__ignoreMap":48},[52,45125,45126,45128,45130],{"class":54,"line":55},[52,45127,59],{"class":58},[52,45129,63],{"class":371},[52,45131,77],{"class":58},[52,45133,45134,45136],{"class":54,"line":80},[52,45135,83],{"class":58},[52,45137,44992],{"class":371},[52,45139,45140,45142,45144],{"class":54,"line":108},[52,45141,7351],{"class":66},[52,45143,70],{"class":231},[52,45145,7307],{"class":73},[52,45147,45148,45150,45152,45154,45156],{"class":54,"line":118},[52,45149,7361],{"class":66},[52,45151,70],{"class":231},[52,45153,723],{"class":58},[52,45155,5963],{"class":371},[52,45157,729],{"class":58},[52,45159,45160],{"class":54,"line":594},[52,45161,1224],{"class":58},[52,45163,45164,45166,45168],{"class":54,"line":600},[52,45165,121],{"class":58},[52,45167,63],{"class":371},[52,45169,77],{"class":58},[43,45171,45173],{"className":222,"code":45172,"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,45174,45175,45185,45189,45203,45207,45224,45228],{"__ignoreMap":48},[52,45176,45177,45179,45181,45183],{"class":54,"line":55},[52,45178,232],{"class":231},[52,45180,9231],{"class":58},[52,45182,238],{"class":231},[52,45184,9236],{"class":73},[52,45186,45187],{"class":54,"line":80},[52,45188,597],{"emptyLinePlaceholder":171},[52,45190,45191,45193,45195,45197,45199,45201],{"class":54,"line":108},[52,45192,1721],{"class":231},[52,45194,1724],{"class":371},[52,45196,1727],{"class":231},[52,45198,1730],{"class":231},[52,45200,1733],{"class":66},[52,45202,1736],{"class":58},[52,45204,45205],{"class":54,"line":118},[52,45206,1751],{"class":58},[52,45208,45209,45211,45214,45216,45218,45220,45222],{"class":54,"line":594},[52,45210,1756],{"class":58},[52,45212,45213],{"class":73},"'Polygon'",[52,45215,1762],{"class":58},[52,45217,7886],{"class":73},[52,45219,4278],{"class":58},[52,45221,5963],{"class":371},[52,45223,1768],{"class":58},[52,45225,45226],{"class":54,"line":600},[52,45227,1773],{"class":58},[52,45229,45230],{"class":54,"line":606},[52,45231,1778],{"class":58},[156,45233,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45235},[45236,45237],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/polygon",{"title":44953,"description":44961},"docs/components/Polygon","UG_ihFNgCslVj8bLyLQTwquDyGohY-SW6j6yjPqAnz0",{"id":45244,"title":45245,"body":45246,"category":28771,"componentType":20848,"description":45253,"extension":168,"meta":45571,"navigation":171,"path":45572,"requiresChild":171,"seo":45573,"stem":45574,"__hash__":45575},"components/docs/components/Posterize.md","Posterize",{"type":8,"value":45247,"toc":45567},[45248,45251,45254,45256,45258,45261,45263,45565],[11,45249,45245],{"id":45250},"posterize",[15,45252,45253],{},"Reduce color depth to create a poster effect",[26901,45255],{"component":45245},[23,45257,26905],{"id":21503},[26907,45259],{":props":45260},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"5\",\"description\":\"The intensity of the posterization effect (lower is more posterized)\"}]",[23,45262,26913],{"id":26912},[217,45264,45265,45322,45381,45437,45495],{":tabs":1543},[43,45266,45268],{"className":45,"code":45267,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n :intensity=\"5\"\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,45269,45270,45278,45285,45294,45298,45306,45314],{"__ignoreMap":48},[52,45271,45272,45274,45276],{"class":54,"line":55},[52,45273,59],{"class":58},[52,45275,63],{"class":62},[52,45277,77],{"class":58},[52,45279,45280,45282],{"class":54,"line":80},[52,45281,83],{"class":58},[52,45283,45284],{"class":62},"Posterize\n",[52,45286,45287,45289,45291],{"class":54,"line":108},[52,45288,17870],{"class":66},[52,45290,70],{"class":58},[52,45292,45293],{"class":73},"\"5\"\n",[52,45295,45296],{"class":54,"line":118},[52,45297,26949],{"class":58},[52,45299,45300,45302,45304],{"class":54,"line":594},[52,45301,2213],{"class":58},[52,45303,2216],{"class":62},[52,45305,105],{"class":58},[52,45307,45308,45310,45312],{"class":54,"line":600},[52,45309,2230],{"class":58},[52,45311,45245],{"class":62},[52,45313,77],{"class":58},[52,45315,45316,45318,45320],{"class":54,"line":606},[52,45317,121],{"class":58},[52,45319,63],{"class":62},[52,45321,77],{"class":58},[43,45323,45325],{"className":360,"code":45324,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CPosterize\n intensity={5}\n >\n \u003CCircle />\n \u003C/Posterize>\n\u003C/Shader>\n",[31,45326,45327,45335,45341,45353,45357,45365,45373],{"__ignoreMap":48},[52,45328,45329,45331,45333],{"class":54,"line":55},[52,45330,59],{"class":58},[52,45332,63],{"class":371},[52,45334,77],{"class":58},[52,45336,45337,45339],{"class":54,"line":80},[52,45338,83],{"class":58},[52,45340,45284],{"class":371},[52,45342,45343,45345,45347,45349,45351],{"class":54,"line":108},[52,45344,17981],{"class":66},[52,45346,70],{"class":231},[52,45348,723],{"class":58},[52,45350,19566],{"class":371},[52,45352,729],{"class":58},[52,45354,45355],{"class":54,"line":118},[52,45356,26949],{"class":58},[52,45358,45359,45361,45363],{"class":54,"line":594},[52,45360,2213],{"class":58},[52,45362,2216],{"class":371},[52,45364,105],{"class":58},[52,45366,45367,45369,45371],{"class":54,"line":600},[52,45368,2230],{"class":58},[52,45370,45245],{"class":371},[52,45372,77],{"class":58},[52,45374,45375,45377,45379],{"class":54,"line":606},[52,45376,121],{"class":58},[52,45378,63],{"class":371},[52,45380,77],{"class":58},[43,45382,45383],{"className":2507,"code":45324,"language":2509,"meta":48,"style":48},[31,45384,45385,45393,45399,45409,45413,45421,45429],{"__ignoreMap":48},[52,45386,45387,45389,45391],{"class":54,"line":55},[52,45388,59],{"class":58},[52,45390,63],{"class":371},[52,45392,77],{"class":58},[52,45394,45395,45397],{"class":54,"line":80},[52,45396,83],{"class":58},[52,45398,45284],{"class":371},[52,45400,45401,45403,45405,45407],{"class":54,"line":108},[52,45402,17981],{"class":66},[52,45404,24845],{"class":58},[52,45406,19566],{"class":371},[52,45408,729],{"class":58},[52,45410,45411],{"class":54,"line":118},[52,45412,26949],{"class":58},[52,45414,45415,45417,45419],{"class":54,"line":594},[52,45416,2213],{"class":58},[52,45418,2216],{"class":371},[52,45420,105],{"class":58},[52,45422,45423,45425,45427],{"class":54,"line":600},[52,45424,2230],{"class":58},[52,45426,45245],{"class":371},[52,45428,77],{"class":58},[52,45430,45431,45433,45435],{"class":54,"line":606},[52,45432,121],{"class":58},[52,45434,63],{"class":371},[52,45436,77],{"class":58},[43,45438,45439],{"className":419,"code":45324,"language":420,"meta":48,"style":48},[31,45440,45441,45449,45455,45467,45471,45479,45487],{"__ignoreMap":48},[52,45442,45443,45445,45447],{"class":54,"line":55},[52,45444,59],{"class":58},[52,45446,63],{"class":371},[52,45448,77],{"class":58},[52,45450,45451,45453],{"class":54,"line":80},[52,45452,83],{"class":58},[52,45454,45284],{"class":371},[52,45456,45457,45459,45461,45463,45465],{"class":54,"line":108},[52,45458,17981],{"class":66},[52,45460,70],{"class":231},[52,45462,723],{"class":58},[52,45464,19566],{"class":371},[52,45466,729],{"class":58},[52,45468,45469],{"class":54,"line":118},[52,45470,26949],{"class":58},[52,45472,45473,45475,45477],{"class":54,"line":594},[52,45474,2213],{"class":58},[52,45476,2216],{"class":371},[52,45478,105],{"class":58},[52,45480,45481,45483,45485],{"class":54,"line":600},[52,45482,2230],{"class":58},[52,45484,45245],{"class":371},[52,45486,77],{"class":58},[52,45488,45489,45491,45493],{"class":54,"line":606},[52,45490,121],{"class":58},[52,45492,63],{"class":371},[52,45494,77],{"class":58},[43,45496,45498],{"className":222,"code":45497,"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,45499,45500,45510,45514,45528,45532,45545,45553,45557,45561],{"__ignoreMap":48},[52,45501,45502,45504,45506,45508],{"class":54,"line":55},[52,45503,232],{"class":231},[52,45505,9231],{"class":58},[52,45507,238],{"class":231},[52,45509,9236],{"class":73},[52,45511,45512],{"class":54,"line":80},[52,45513,597],{"emptyLinePlaceholder":171},[52,45515,45516,45518,45520,45522,45524,45526],{"class":54,"line":108},[52,45517,1721],{"class":231},[52,45519,1724],{"class":371},[52,45521,1727],{"class":231},[52,45523,1730],{"class":231},[52,45525,1733],{"class":66},[52,45527,1736],{"class":58},[52,45529,45530],{"class":54,"line":118},[52,45531,1751],{"class":58},[52,45533,45534,45536,45539,45541,45543],{"class":54,"line":594},[52,45535,1756],{"class":58},[52,45537,45538],{"class":73},"'Posterize'",[52,45540,27194],{"class":58},[52,45542,19566],{"class":371},[52,45544,5259],{"class":58},[52,45546,45547,45549,45551],{"class":54,"line":600},[52,45548,4727],{"class":58},[52,45550,2869],{"class":73},[52,45552,2129],{"class":58},[52,45554,45555],{"class":54,"line":606},[52,45556,4744],{"class":58},[52,45558,45559],{"class":54,"line":653},[52,45560,1773],{"class":58},[52,45562,45563],{"class":54,"line":662},[52,45564,1778],{"class":58},[156,45566,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45568},[45569,45570],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/posterize",{"title":45245,"description":45253},"docs/components/Posterize","8oEUPEWYbN7YYAKWcWkbLl35Yz5k6lG8zEmpAT9JKRU",{"id":45577,"title":45578,"body":45579,"category":27225,"componentType":20848,"description":45586,"extension":168,"meta":45903,"navigation":171,"path":45904,"requiresChild":171,"seo":45905,"stem":45906,"__hash__":45907},"components/docs/components/ProgressiveBlur.md","ProgressiveBlur",{"type":8,"value":45580,"toc":45899},[45581,45584,45587,45589,45591,45594,45596,45897],[11,45582,45578],{"id":45583},"progressiveblur",[15,45585,45586],{},"Blur that increases progressively in one direction",[26901,45588],{"component":45578},[23,45590,26905],{"id":21503},[26907,45592],{":props":45593},"[{\"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,45595,26913],{"id":26912},[217,45597,45598,45654,45713,45769,45827],{":tabs":1543},[43,45599,45601],{"className":45,"code":45600,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45602,45603,45611,45618,45626,45630,45638,45646],{"__ignoreMap":48},[52,45604,45605,45607,45609],{"class":54,"line":55},[52,45606,59],{"class":58},[52,45608,63],{"class":62},[52,45610,77],{"class":58},[52,45612,45613,45615],{"class":54,"line":80},[52,45614,83],{"class":58},[52,45616,45617],{"class":62},"ProgressiveBlur\n",[52,45619,45620,45622,45624],{"class":54,"line":108},[52,45621,17870],{"class":66},[52,45623,70],{"class":58},[52,45625,28216],{"class":73},[52,45627,45628],{"class":54,"line":118},[52,45629,26949],{"class":58},[52,45631,45632,45634,45636],{"class":54,"line":594},[52,45633,2213],{"class":58},[52,45635,2216],{"class":62},[52,45637,105],{"class":58},[52,45639,45640,45642,45644],{"class":54,"line":600},[52,45641,2230],{"class":58},[52,45643,45578],{"class":62},[52,45645,77],{"class":58},[52,45647,45648,45650,45652],{"class":54,"line":606},[52,45649,121],{"class":58},[52,45651,63],{"class":62},[52,45653,77],{"class":58},[43,45655,45657],{"className":360,"code":45656,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CProgressiveBlur\n intensity={50}\n >\n \u003CCircle />\n \u003C/ProgressiveBlur>\n\u003C/Shader>\n",[31,45658,45659,45667,45673,45685,45689,45697,45705],{"__ignoreMap":48},[52,45660,45661,45663,45665],{"class":54,"line":55},[52,45662,59],{"class":58},[52,45664,63],{"class":371},[52,45666,77],{"class":58},[52,45668,45669,45671],{"class":54,"line":80},[52,45670,83],{"class":58},[52,45672,45617],{"class":371},[52,45674,45675,45677,45679,45681,45683],{"class":54,"line":108},[52,45676,17981],{"class":66},[52,45678,70],{"class":231},[52,45680,723],{"class":58},[52,45682,28274],{"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,45578],{"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":2507,"code":45656,"language":2509,"meta":48,"style":48},[31,45716,45717,45725,45731,45741,45745,45753,45761],{"__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,45617],{"class":371},[52,45732,45733,45735,45737,45739],{"class":54,"line":108},[52,45734,17981],{"class":66},[52,45736,24845],{"class":58},[52,45738,28274],{"class":371},[52,45740,729],{"class":58},[52,45742,45743],{"class":54,"line":118},[52,45744,26949],{"class":58},[52,45746,45747,45749,45751],{"class":54,"line":594},[52,45748,2213],{"class":58},[52,45750,2216],{"class":371},[52,45752,105],{"class":58},[52,45754,45755,45757,45759],{"class":54,"line":600},[52,45756,2230],{"class":58},[52,45758,45578],{"class":371},[52,45760,77],{"class":58},[52,45762,45763,45765,45767],{"class":54,"line":606},[52,45764,121],{"class":58},[52,45766,63],{"class":371},[52,45768,77],{"class":58},[43,45770,45771],{"className":419,"code":45656,"language":420,"meta":48,"style":48},[31,45772,45773,45781,45787,45799,45803,45811,45819],{"__ignoreMap":48},[52,45774,45775,45777,45779],{"class":54,"line":55},[52,45776,59],{"class":58},[52,45778,63],{"class":371},[52,45780,77],{"class":58},[52,45782,45783,45785],{"class":54,"line":80},[52,45784,83],{"class":58},[52,45786,45617],{"class":371},[52,45788,45789,45791,45793,45795,45797],{"class":54,"line":108},[52,45790,17981],{"class":66},[52,45792,70],{"class":231},[52,45794,723],{"class":58},[52,45796,28274],{"class":371},[52,45798,729],{"class":58},[52,45800,45801],{"class":54,"line":118},[52,45802,26949],{"class":58},[52,45804,45805,45807,45809],{"class":54,"line":594},[52,45806,2213],{"class":58},[52,45808,2216],{"class":371},[52,45810,105],{"class":58},[52,45812,45813,45815,45817],{"class":54,"line":600},[52,45814,2230],{"class":58},[52,45816,45578],{"class":371},[52,45818,77],{"class":58},[52,45820,45821,45823,45825],{"class":54,"line":606},[52,45822,121],{"class":58},[52,45824,63],{"class":371},[52,45826,77],{"class":58},[43,45828,45830],{"className":222,"code":45829,"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,45831,45832,45842,45846,45860,45864,45877,45885,45889,45893],{"__ignoreMap":48},[52,45833,45834,45836,45838,45840],{"class":54,"line":55},[52,45835,232],{"class":231},[52,45837,9231],{"class":58},[52,45839,238],{"class":231},[52,45841,9236],{"class":73},[52,45843,45844],{"class":54,"line":80},[52,45845,597],{"emptyLinePlaceholder":171},[52,45847,45848,45850,45852,45854,45856,45858],{"class":54,"line":108},[52,45849,1721],{"class":231},[52,45851,1724],{"class":371},[52,45853,1727],{"class":231},[52,45855,1730],{"class":231},[52,45857,1733],{"class":66},[52,45859,1736],{"class":58},[52,45861,45862],{"class":54,"line":118},[52,45863,1751],{"class":58},[52,45865,45866,45868,45871,45873,45875],{"class":54,"line":594},[52,45867,1756],{"class":58},[52,45869,45870],{"class":73},"'ProgressiveBlur'",[52,45872,27194],{"class":58},[52,45874,28274],{"class":371},[52,45876,5259],{"class":58},[52,45878,45879,45881,45883],{"class":54,"line":600},[52,45880,4727],{"class":58},[52,45882,2869],{"class":73},[52,45884,2129],{"class":58},[52,45886,45887],{"class":54,"line":606},[52,45888,4744],{"class":58},[52,45890,45891],{"class":54,"line":653},[52,45892,1773],{"class":58},[52,45894,45895],{"class":54,"line":662},[52,45896,1778],{"class":58},[156,45898,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":45900},[45901,45902],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/progressiveblur",{"title":45578,"description":45586},"docs/components/ProgressiveBlur","3hCu_TMKmvUYA2d9BjHYBpip4PMcfr-_l4orhEOV3iU",{"id":45909,"title":45910,"body":45911,"category":27760,"componentType":20842,"description":45918,"extension":168,"meta":46159,"navigation":171,"path":46160,"requiresChild":27763,"seo":46161,"stem":46162,"__hash__":46163},"components/docs/components/RadialGradient.md","RadialGradient",{"type":8,"value":45912,"toc":46155},[45913,45916,45919,45921,45923,45926,45928,46153],[11,45914,45910],{"id":45915},"radialgradient",[15,45917,45918],{},"Radial gradient radiating from a center point",[26901,45920],{"component":45910},[23,45922,26905],{"id":21503},[26907,45924],{":props":45925},"[{\"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,45927,26913],{"id":26912},[217,45929,45930,45970,46013,46053,46095],{":tabs":1543},[43,45931,45933],{"className":45,"code":45932,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n :radius=\"1\"\n />\n\u003C/Shader>\n",[31,45934,45935,45943,45950,45958,45962],{"__ignoreMap":48},[52,45936,45937,45939,45941],{"class":54,"line":55},[52,45938,59],{"class":58},[52,45940,63],{"class":62},[52,45942,77],{"class":58},[52,45944,45945,45947],{"class":54,"line":80},[52,45946,83],{"class":58},[52,45948,45949],{"class":62},"RadialGradient\n",[52,45951,45952,45954,45956],{"class":54,"line":108},[52,45953,14901],{"class":66},[52,45955,70],{"class":58},[52,45957,28827],{"class":73},[52,45959,45960],{"class":54,"line":118},[52,45961,1224],{"class":58},[52,45963,45964,45966,45968],{"class":54,"line":594},[52,45965,121],{"class":58},[52,45967,63],{"class":62},[52,45969,77],{"class":58},[43,45971,45973],{"className":360,"code":45972,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRadialGradient\n radius={1}\n />\n\u003C/Shader>\n",[31,45974,45975,45983,45989,46001,46005],{"__ignoreMap":48},[52,45976,45977,45979,45981],{"class":54,"line":55},[52,45978,59],{"class":58},[52,45980,63],{"class":371},[52,45982,77],{"class":58},[52,45984,45985,45987],{"class":54,"line":80},[52,45986,83],{"class":58},[52,45988,45949],{"class":371},[52,45990,45991,45993,45995,45997,45999],{"class":54,"line":108},[52,45992,7361],{"class":66},[52,45994,70],{"class":231},[52,45996,723],{"class":58},[52,45998,6391],{"class":371},[52,46000,729],{"class":58},[52,46002,46003],{"class":54,"line":118},[52,46004,1224],{"class":58},[52,46006,46007,46009,46011],{"class":54,"line":594},[52,46008,121],{"class":58},[52,46010,63],{"class":371},[52,46012,77],{"class":58},[43,46014,46015],{"className":2507,"code":45972,"language":2509,"meta":48,"style":48},[31,46016,46017,46025,46031,46041,46045],{"__ignoreMap":48},[52,46018,46019,46021,46023],{"class":54,"line":55},[52,46020,59],{"class":58},[52,46022,63],{"class":371},[52,46024,77],{"class":58},[52,46026,46027,46029],{"class":54,"line":80},[52,46028,83],{"class":58},[52,46030,45949],{"class":371},[52,46032,46033,46035,46037,46039],{"class":54,"line":108},[52,46034,7361],{"class":66},[52,46036,24845],{"class":58},[52,46038,6391],{"class":371},[52,46040,729],{"class":58},[52,46042,46043],{"class":54,"line":118},[52,46044,1224],{"class":58},[52,46046,46047,46049,46051],{"class":54,"line":594},[52,46048,121],{"class":58},[52,46050,63],{"class":371},[52,46052,77],{"class":58},[43,46054,46055],{"className":419,"code":45972,"language":420,"meta":48,"style":48},[31,46056,46057,46065,46071,46083,46087],{"__ignoreMap":48},[52,46058,46059,46061,46063],{"class":54,"line":55},[52,46060,59],{"class":58},[52,46062,63],{"class":371},[52,46064,77],{"class":58},[52,46066,46067,46069],{"class":54,"line":80},[52,46068,83],{"class":58},[52,46070,45949],{"class":371},[52,46072,46073,46075,46077,46079,46081],{"class":54,"line":108},[52,46074,7361],{"class":66},[52,46076,70],{"class":231},[52,46078,723],{"class":58},[52,46080,6391],{"class":371},[52,46082,729],{"class":58},[52,46084,46085],{"class":54,"line":118},[52,46086,1224],{"class":58},[52,46088,46089,46091,46093],{"class":54,"line":594},[52,46090,121],{"class":58},[52,46092,63],{"class":371},[52,46094,77],{"class":58},[43,46096,46098],{"className":222,"code":46097,"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,46099,46100,46110,46114,46128,46132,46145,46149],{"__ignoreMap":48},[52,46101,46102,46104,46106,46108],{"class":54,"line":55},[52,46103,232],{"class":231},[52,46105,9231],{"class":58},[52,46107,238],{"class":231},[52,46109,9236],{"class":73},[52,46111,46112],{"class":54,"line":80},[52,46113,597],{"emptyLinePlaceholder":171},[52,46115,46116,46118,46120,46122,46124,46126],{"class":54,"line":108},[52,46117,1721],{"class":231},[52,46119,1724],{"class":371},[52,46121,1727],{"class":231},[52,46123,1730],{"class":231},[52,46125,1733],{"class":66},[52,46127,1736],{"class":58},[52,46129,46130],{"class":54,"line":118},[52,46131,1751],{"class":58},[52,46133,46134,46136,46139,46141,46143],{"class":54,"line":594},[52,46135,1756],{"class":58},[52,46137,46138],{"class":73},"'RadialGradient'",[52,46140,5254],{"class":58},[52,46142,6391],{"class":371},[52,46144,1768],{"class":58},[52,46146,46147],{"class":54,"line":600},[52,46148,1773],{"class":58},[52,46150,46151],{"class":54,"line":606},[52,46152,1778],{"class":58},[156,46154,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46156},[46157,46158],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/radialgradient",{"title":45910,"description":45918},"docs/components/RadialGradient","oiljwmgjNCbHRodhfcyxFIcXJW90FZajFatyI4esg8A",{"id":46165,"title":46166,"body":46167,"category":29105,"componentType":20848,"description":46174,"extension":168,"meta":46491,"navigation":171,"path":46492,"requiresChild":171,"seo":46493,"stem":46494,"__hash__":46495},"components/docs/components/RectangularCoordinates.md","RectangularCoordinates",{"type":8,"value":46168,"toc":46487},[46169,46172,46175,46177,46179,46182,46184,46485],[11,46170,46166],{"id":46171},"rectangularcoordinates",[15,46173,46174],{},"Convert polar coordinates back to rectangular space",[26901,46176],{"component":46166},[23,46178,26905],{"id":21503},[26907,46180],{":props":46181},"[{\"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,46183,26913],{"id":26912},[217,46185,46186,46242,46301,46357,46415],{":tabs":1543},[43,46187,46189],{"className":45,"code":46188,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,46190,46191,46199,46206,46214,46218,46226,46234],{"__ignoreMap":48},[52,46192,46193,46195,46197],{"class":54,"line":55},[52,46194,59],{"class":58},[52,46196,63],{"class":62},[52,46198,77],{"class":58},[52,46200,46201,46203],{"class":54,"line":80},[52,46202,83],{"class":58},[52,46204,46205],{"class":62},"RectangularCoordinates\n",[52,46207,46208,46210,46212],{"class":54,"line":108},[52,46209,17870],{"class":66},[52,46211,70],{"class":58},[52,46213,28827],{"class":73},[52,46215,46216],{"class":54,"line":118},[52,46217,26949],{"class":58},[52,46219,46220,46222,46224],{"class":54,"line":594},[52,46221,2213],{"class":58},[52,46223,2216],{"class":62},[52,46225,105],{"class":58},[52,46227,46228,46230,46232],{"class":54,"line":600},[52,46229,2230],{"class":58},[52,46231,46166],{"class":62},[52,46233,77],{"class":58},[52,46235,46236,46238,46240],{"class":54,"line":606},[52,46237,121],{"class":58},[52,46239,63],{"class":62},[52,46241,77],{"class":58},[43,46243,46245],{"className":360,"code":46244,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRectangularCoordinates\n intensity={1}\n >\n \u003CCircle />\n \u003C/RectangularCoordinates>\n\u003C/Shader>\n",[31,46246,46247,46255,46261,46273,46277,46285,46293],{"__ignoreMap":48},[52,46248,46249,46251,46253],{"class":54,"line":55},[52,46250,59],{"class":58},[52,46252,63],{"class":371},[52,46254,77],{"class":58},[52,46256,46257,46259],{"class":54,"line":80},[52,46258,83],{"class":58},[52,46260,46205],{"class":371},[52,46262,46263,46265,46267,46269,46271],{"class":54,"line":108},[52,46264,17981],{"class":66},[52,46266,70],{"class":231},[52,46268,723],{"class":58},[52,46270,6391],{"class":371},[52,46272,729],{"class":58},[52,46274,46275],{"class":54,"line":118},[52,46276,26949],{"class":58},[52,46278,46279,46281,46283],{"class":54,"line":594},[52,46280,2213],{"class":58},[52,46282,2216],{"class":371},[52,46284,105],{"class":58},[52,46286,46287,46289,46291],{"class":54,"line":600},[52,46288,2230],{"class":58},[52,46290,46166],{"class":371},[52,46292,77],{"class":58},[52,46294,46295,46297,46299],{"class":54,"line":606},[52,46296,121],{"class":58},[52,46298,63],{"class":371},[52,46300,77],{"class":58},[43,46302,46303],{"className":2507,"code":46244,"language":2509,"meta":48,"style":48},[31,46304,46305,46313,46319,46329,46333,46341,46349],{"__ignoreMap":48},[52,46306,46307,46309,46311],{"class":54,"line":55},[52,46308,59],{"class":58},[52,46310,63],{"class":371},[52,46312,77],{"class":58},[52,46314,46315,46317],{"class":54,"line":80},[52,46316,83],{"class":58},[52,46318,46205],{"class":371},[52,46320,46321,46323,46325,46327],{"class":54,"line":108},[52,46322,17981],{"class":66},[52,46324,24845],{"class":58},[52,46326,6391],{"class":371},[52,46328,729],{"class":58},[52,46330,46331],{"class":54,"line":118},[52,46332,26949],{"class":58},[52,46334,46335,46337,46339],{"class":54,"line":594},[52,46336,2213],{"class":58},[52,46338,2216],{"class":371},[52,46340,105],{"class":58},[52,46342,46343,46345,46347],{"class":54,"line":600},[52,46344,2230],{"class":58},[52,46346,46166],{"class":371},[52,46348,77],{"class":58},[52,46350,46351,46353,46355],{"class":54,"line":606},[52,46352,121],{"class":58},[52,46354,63],{"class":371},[52,46356,77],{"class":58},[43,46358,46359],{"className":419,"code":46244,"language":420,"meta":48,"style":48},[31,46360,46361,46369,46375,46387,46391,46399,46407],{"__ignoreMap":48},[52,46362,46363,46365,46367],{"class":54,"line":55},[52,46364,59],{"class":58},[52,46366,63],{"class":371},[52,46368,77],{"class":58},[52,46370,46371,46373],{"class":54,"line":80},[52,46372,83],{"class":58},[52,46374,46205],{"class":371},[52,46376,46377,46379,46381,46383,46385],{"class":54,"line":108},[52,46378,17981],{"class":66},[52,46380,70],{"class":231},[52,46382,723],{"class":58},[52,46384,6391],{"class":371},[52,46386,729],{"class":58},[52,46388,46389],{"class":54,"line":118},[52,46390,26949],{"class":58},[52,46392,46393,46395,46397],{"class":54,"line":594},[52,46394,2213],{"class":58},[52,46396,2216],{"class":371},[52,46398,105],{"class":58},[52,46400,46401,46403,46405],{"class":54,"line":600},[52,46402,2230],{"class":58},[52,46404,46166],{"class":371},[52,46406,77],{"class":58},[52,46408,46409,46411,46413],{"class":54,"line":606},[52,46410,121],{"class":58},[52,46412,63],{"class":371},[52,46414,77],{"class":58},[43,46416,46418],{"className":222,"code":46417,"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,46419,46420,46430,46434,46448,46452,46465,46473,46477,46481],{"__ignoreMap":48},[52,46421,46422,46424,46426,46428],{"class":54,"line":55},[52,46423,232],{"class":231},[52,46425,9231],{"class":58},[52,46427,238],{"class":231},[52,46429,9236],{"class":73},[52,46431,46432],{"class":54,"line":80},[52,46433,597],{"emptyLinePlaceholder":171},[52,46435,46436,46438,46440,46442,46444,46446],{"class":54,"line":108},[52,46437,1721],{"class":231},[52,46439,1724],{"class":371},[52,46441,1727],{"class":231},[52,46443,1730],{"class":231},[52,46445,1733],{"class":66},[52,46447,1736],{"class":58},[52,46449,46450],{"class":54,"line":118},[52,46451,1751],{"class":58},[52,46453,46454,46456,46459,46461,46463],{"class":54,"line":594},[52,46455,1756],{"class":58},[52,46457,46458],{"class":73},"'RectangularCoordinates'",[52,46460,27194],{"class":58},[52,46462,6391],{"class":371},[52,46464,5259],{"class":58},[52,46466,46467,46469,46471],{"class":54,"line":600},[52,46468,4727],{"class":58},[52,46470,2869],{"class":73},[52,46472,2129],{"class":58},[52,46474,46475],{"class":54,"line":606},[52,46476,4744],{"class":58},[52,46478,46479],{"class":54,"line":653},[52,46480,1773],{"class":58},[52,46482,46483],{"class":54,"line":662},[52,46484,1778],{"class":58},[156,46486,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46488},[46489,46490],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/rectangularcoordinates",{"title":46166,"description":46174},"docs/components/RectangularCoordinates","xNqjilrjjWp72OAWgcivTVNfTk8uG3SY1YWTB_tnwFU",{"id":46497,"title":46498,"body":46499,"category":30727,"componentType":20842,"description":46506,"extension":168,"meta":46783,"navigation":171,"path":46784,"requiresChild":27763,"seo":46785,"stem":46786,"__hash__":46787},"components/docs/components/Ring.md","Ring",{"type":8,"value":46500,"toc":46779},[46501,46504,46507,46509,46511,46514,46516,46777],[11,46502,46498],{"id":46503},"ring",[15,46505,46506],{},"Annular ring (donut) with adjustable radius and band thickness",[26901,46508],{"component":46498},[23,46510,26905],{"id":21503},[26907,46512],{":props":46513},"[{\"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,46515,26913],{"id":26912},[217,46517,46518,46566,46617,46665,46715],{":tabs":1543},[43,46519,46521],{"className":45,"code":46520,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n :radius=\"0.3\"\n />\n\u003C/Shader>\n",[31,46522,46523,46531,46538,46546,46554,46558],{"__ignoreMap":48},[52,46524,46525,46527,46529],{"class":54,"line":55},[52,46526,59],{"class":58},[52,46528,63],{"class":62},[52,46530,77],{"class":58},[52,46532,46533,46535],{"class":54,"line":80},[52,46534,83],{"class":58},[52,46536,46537],{"class":62},"Ring\n",[52,46539,46540,46542,46544],{"class":54,"line":108},[52,46541,7351],{"class":66},[52,46543,70],{"class":58},[52,46545,7307],{"class":73},[52,46547,46548,46550,46552],{"class":54,"line":118},[52,46549,14901],{"class":66},[52,46551,70],{"class":58},[52,46553,31599],{"class":73},[52,46555,46556],{"class":54,"line":594},[52,46557,1224],{"class":58},[52,46559,46560,46562,46564],{"class":54,"line":600},[52,46561,121],{"class":58},[52,46563,63],{"class":62},[52,46565,77],{"class":58},[43,46567,46569],{"className":360,"code":46568,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CRing\n color=\"#ffffff\"\n radius={0.3}\n />\n\u003C/Shader>\n",[31,46570,46571,46579,46585,46593,46605,46609],{"__ignoreMap":48},[52,46572,46573,46575,46577],{"class":54,"line":55},[52,46574,59],{"class":58},[52,46576,63],{"class":371},[52,46578,77],{"class":58},[52,46580,46581,46583],{"class":54,"line":80},[52,46582,83],{"class":58},[52,46584,46537],{"class":371},[52,46586,46587,46589,46591],{"class":54,"line":108},[52,46588,7351],{"class":66},[52,46590,70],{"class":231},[52,46592,7307],{"class":73},[52,46594,46595,46597,46599,46601,46603],{"class":54,"line":118},[52,46596,7361],{"class":66},[52,46598,70],{"class":231},[52,46600,723],{"class":58},[52,46602,19478],{"class":371},[52,46604,729],{"class":58},[52,46606,46607],{"class":54,"line":594},[52,46608,1224],{"class":58},[52,46610,46611,46613,46615],{"class":54,"line":600},[52,46612,121],{"class":58},[52,46614,63],{"class":371},[52,46616,77],{"class":58},[43,46618,46619],{"className":2507,"code":46568,"language":2509,"meta":48,"style":48},[31,46620,46621,46629,46635,46643,46653,46657],{"__ignoreMap":48},[52,46622,46623,46625,46627],{"class":54,"line":55},[52,46624,59],{"class":58},[52,46626,63],{"class":371},[52,46628,77],{"class":58},[52,46630,46631,46633],{"class":54,"line":80},[52,46632,83],{"class":58},[52,46634,46537],{"class":371},[52,46636,46637,46639,46641],{"class":54,"line":108},[52,46638,7351],{"class":66},[52,46640,70],{"class":58},[52,46642,7307],{"class":73},[52,46644,46645,46647,46649,46651],{"class":54,"line":118},[52,46646,7361],{"class":66},[52,46648,24845],{"class":58},[52,46650,19478],{"class":371},[52,46652,729],{"class":58},[52,46654,46655],{"class":54,"line":594},[52,46656,1224],{"class":58},[52,46658,46659,46661,46663],{"class":54,"line":600},[52,46660,121],{"class":58},[52,46662,63],{"class":371},[52,46664,77],{"class":58},[43,46666,46667],{"className":419,"code":46568,"language":420,"meta":48,"style":48},[31,46668,46669,46677,46683,46691,46703,46707],{"__ignoreMap":48},[52,46670,46671,46673,46675],{"class":54,"line":55},[52,46672,59],{"class":58},[52,46674,63],{"class":371},[52,46676,77],{"class":58},[52,46678,46679,46681],{"class":54,"line":80},[52,46680,83],{"class":58},[52,46682,46537],{"class":371},[52,46684,46685,46687,46689],{"class":54,"line":108},[52,46686,7351],{"class":66},[52,46688,70],{"class":231},[52,46690,7307],{"class":73},[52,46692,46693,46695,46697,46699,46701],{"class":54,"line":118},[52,46694,7361],{"class":66},[52,46696,70],{"class":231},[52,46698,723],{"class":58},[52,46700,19478],{"class":371},[52,46702,729],{"class":58},[52,46704,46705],{"class":54,"line":594},[52,46706,1224],{"class":58},[52,46708,46709,46711,46713],{"class":54,"line":600},[52,46710,121],{"class":58},[52,46712,63],{"class":371},[52,46714,77],{"class":58},[43,46716,46718],{"className":222,"code":46717,"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,46719,46720,46730,46734,46748,46752,46769,46773],{"__ignoreMap":48},[52,46721,46722,46724,46726,46728],{"class":54,"line":55},[52,46723,232],{"class":231},[52,46725,9231],{"class":58},[52,46727,238],{"class":231},[52,46729,9236],{"class":73},[52,46731,46732],{"class":54,"line":80},[52,46733,597],{"emptyLinePlaceholder":171},[52,46735,46736,46738,46740,46742,46744,46746],{"class":54,"line":108},[52,46737,1721],{"class":231},[52,46739,1724],{"class":371},[52,46741,1727],{"class":231},[52,46743,1730],{"class":231},[52,46745,1733],{"class":66},[52,46747,1736],{"class":58},[52,46749,46750],{"class":54,"line":118},[52,46751,1751],{"class":58},[52,46753,46754,46756,46759,46761,46763,46765,46767],{"class":54,"line":594},[52,46755,1756],{"class":58},[52,46757,46758],{"class":73},"'Ring'",[52,46760,1762],{"class":58},[52,46762,7886],{"class":73},[52,46764,4278],{"class":58},[52,46766,19478],{"class":371},[52,46768,1768],{"class":58},[52,46770,46771],{"class":54,"line":600},[52,46772,1773],{"class":58},[52,46774,46775],{"class":54,"line":606},[52,46776,1778],{"class":58},[156,46778,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":46780},[46781,46782],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ring",{"title":46498,"description":46506},"docs/components/Ring","Sp93lOTmNvlFPBk-7tVh65ptolIyVFs_OwESobOlvFQ",{"id":46789,"title":46790,"body":46791,"category":27760,"componentType":20842,"description":46798,"extension":168,"meta":46983,"navigation":171,"path":46984,"requiresChild":27763,"seo":46985,"stem":46986,"__hash__":46987},"components/docs/components/Ripples.md","Ripples",{"type":8,"value":46792,"toc":46979},[46793,46796,46799,46801,46803,46806,46808,46977],[11,46794,46790],{"id":46795},"ripples",[15,46797,46798],{},"Concentric animated ripples emanating from a point",[26901,46800],{"component":46790},[23,46802,26905],{"id":21503},[26907,46804],{":props":46805},"[{\"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,46807,26913],{"id":26912},[217,46809,46810,46839,46867,46895,46923],{":tabs":1543},[43,46811,46813],{"className":45,"code":46812,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRipples />\n\u003C/Shader>\n",[31,46814,46815,46823,46831],{"__ignoreMap":48},[52,46816,46817,46819,46821],{"class":54,"line":55},[52,46818,59],{"class":58},[52,46820,63],{"class":62},[52,46822,77],{"class":58},[52,46824,46825,46827,46829],{"class":54,"line":80},[52,46826,83],{"class":58},[52,46828,46790],{"class":62},[52,46830,105],{"class":58},[52,46832,46833,46835,46837],{"class":54,"line":108},[52,46834,121],{"class":58},[52,46836,63],{"class":62},[52,46838,77],{"class":58},[43,46840,46841],{"className":360,"code":46812,"language":362,"meta":48,"style":48},[31,46842,46843,46851,46859],{"__ignoreMap":48},[52,46844,46845,46847,46849],{"class":54,"line":55},[52,46846,59],{"class":58},[52,46848,63],{"class":371},[52,46850,77],{"class":58},[52,46852,46853,46855,46857],{"class":54,"line":80},[52,46854,83],{"class":58},[52,46856,46790],{"class":371},[52,46858,105],{"class":58},[52,46860,46861,46863,46865],{"class":54,"line":108},[52,46862,121],{"class":58},[52,46864,63],{"class":371},[52,46866,77],{"class":58},[43,46868,46869],{"className":2507,"code":46812,"language":2509,"meta":48,"style":48},[31,46870,46871,46879,46887],{"__ignoreMap":48},[52,46872,46873,46875,46877],{"class":54,"line":55},[52,46874,59],{"class":58},[52,46876,63],{"class":371},[52,46878,77],{"class":58},[52,46880,46881,46883,46885],{"class":54,"line":80},[52,46882,83],{"class":58},[52,46884,46790],{"class":371},[52,46886,105],{"class":58},[52,46888,46889,46891,46893],{"class":54,"line":108},[52,46890,121],{"class":58},[52,46892,63],{"class":371},[52,46894,77],{"class":58},[43,46896,46897],{"className":419,"code":46812,"language":420,"meta":48,"style":48},[31,46898,46899,46907,46915],{"__ignoreMap":48},[52,46900,46901,46903,46905],{"class":54,"line":55},[52,46902,59],{"class":58},[52,46904,63],{"class":371},[52,46906,77],{"class":58},[52,46908,46909,46911,46913],{"class":54,"line":80},[52,46910,83],{"class":58},[52,46912,46790],{"class":371},[52,46914,105],{"class":58},[52,46916,46917,46919,46921],{"class":54,"line":108},[52,46918,121],{"class":58},[52,46920,63],{"class":371},[52,46922,77],{"class":58},[43,46924,46926],{"className":222,"code":46925,"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,46927,46928,46938,46942,46956,46960,46969,46973],{"__ignoreMap":48},[52,46929,46930,46932,46934,46936],{"class":54,"line":55},[52,46931,232],{"class":231},[52,46933,9231],{"class":58},[52,46935,238],{"class":231},[52,46937,9236],{"class":73},[52,46939,46940],{"class":54,"line":80},[52,46941,597],{"emptyLinePlaceholder":171},[52,46943,46944,46946,46948,46950,46952,46954],{"class":54,"line":108},[52,46945,1721],{"class":231},[52,46947,1724],{"class":371},[52,46949,1727],{"class":231},[52,46951,1730],{"class":231},[52,46953,1733],{"class":66},[52,46955,1736],{"class":58},[52,46957,46958],{"class":54,"line":118},[52,46959,1751],{"class":58},[52,46961,46962,46964,46967],{"class":54,"line":594},[52,46963,1756],{"class":58},[52,46965,46966],{"class":73},"'Ripples'",[52,46968,2129],{"class":58},[52,46970,46971],{"class":54,"line":600},[52,46972,1773],{"class":58},[52,46974,46975],{"class":54,"line":606},[52,46976,1778],{"class":58},[156,46978,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":46980},[46981,46982],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/ripples",{"title":46790,"description":46798},"docs/components/Ripples","Ur3U0flIoIjJiB5NuIDK2308Ue-VD-TNfNgk_Ko2R-0",{"id":46989,"title":46990,"body":46991,"category":30727,"componentType":20842,"description":46998,"extension":168,"meta":47228,"navigation":171,"path":47229,"requiresChild":27763,"seo":47230,"stem":47231,"__hash__":47232},"components/docs/components/RoundedRect.md","RoundedRect",{"type":8,"value":46992,"toc":47224},[46993,46996,46999,47001,47003,47006,47008,47222],[11,46994,46990],{"id":46995},"roundedrect",[15,46997,46998],{},"Rounded rectangle with adjustable width, height, and corner rounding",[26901,47000],{"component":46990},[23,47002,26905],{"id":21503},[26907,47004],{":props":47005},"[{\"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,47007,26913],{"id":26912},[217,47009,47010,47050,47088,47126,47164],{":tabs":1543},[43,47011,47013],{"className":45,"code":47012,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CRoundedRect\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,47014,47015,47023,47030,47038,47042],{"__ignoreMap":48},[52,47016,47017,47019,47021],{"class":54,"line":55},[52,47018,59],{"class":58},[52,47020,63],{"class":62},[52,47022,77],{"class":58},[52,47024,47025,47027],{"class":54,"line":80},[52,47026,83],{"class":58},[52,47028,47029],{"class":62},"RoundedRect\n",[52,47031,47032,47034,47036],{"class":54,"line":108},[52,47033,7351],{"class":66},[52,47035,70],{"class":58},[52,47037,7307],{"class":73},[52,47039,47040],{"class":54,"line":118},[52,47041,1224],{"class":58},[52,47043,47044,47046,47048],{"class":54,"line":594},[52,47045,121],{"class":58},[52,47047,63],{"class":62},[52,47049,77],{"class":58},[43,47051,47052],{"className":360,"code":47012,"language":362,"meta":48,"style":48},[31,47053,47054,47062,47068,47076,47080],{"__ignoreMap":48},[52,47055,47056,47058,47060],{"class":54,"line":55},[52,47057,59],{"class":58},[52,47059,63],{"class":371},[52,47061,77],{"class":58},[52,47063,47064,47066],{"class":54,"line":80},[52,47065,83],{"class":58},[52,47067,47029],{"class":371},[52,47069,47070,47072,47074],{"class":54,"line":108},[52,47071,7351],{"class":66},[52,47073,70],{"class":231},[52,47075,7307],{"class":73},[52,47077,47078],{"class":54,"line":118},[52,47079,1224],{"class":58},[52,47081,47082,47084,47086],{"class":54,"line":594},[52,47083,121],{"class":58},[52,47085,63],{"class":371},[52,47087,77],{"class":58},[43,47089,47090],{"className":2507,"code":47012,"language":2509,"meta":48,"style":48},[31,47091,47092,47100,47106,47114,47118],{"__ignoreMap":48},[52,47093,47094,47096,47098],{"class":54,"line":55},[52,47095,59],{"class":58},[52,47097,63],{"class":371},[52,47099,77],{"class":58},[52,47101,47102,47104],{"class":54,"line":80},[52,47103,83],{"class":58},[52,47105,47029],{"class":371},[52,47107,47108,47110,47112],{"class":54,"line":108},[52,47109,7351],{"class":66},[52,47111,70],{"class":58},[52,47113,7307],{"class":73},[52,47115,47116],{"class":54,"line":118},[52,47117,1224],{"class":58},[52,47119,47120,47122,47124],{"class":54,"line":594},[52,47121,121],{"class":58},[52,47123,63],{"class":371},[52,47125,77],{"class":58},[43,47127,47128],{"className":419,"code":47012,"language":420,"meta":48,"style":48},[31,47129,47130,47138,47144,47152,47156],{"__ignoreMap":48},[52,47131,47132,47134,47136],{"class":54,"line":55},[52,47133,59],{"class":58},[52,47135,63],{"class":371},[52,47137,77],{"class":58},[52,47139,47140,47142],{"class":54,"line":80},[52,47141,83],{"class":58},[52,47143,47029],{"class":371},[52,47145,47146,47148,47150],{"class":54,"line":108},[52,47147,7351],{"class":66},[52,47149,70],{"class":231},[52,47151,7307],{"class":73},[52,47153,47154],{"class":54,"line":118},[52,47155,1224],{"class":58},[52,47157,47158,47160,47162],{"class":54,"line":594},[52,47159,121],{"class":58},[52,47161,63],{"class":371},[52,47163,77],{"class":58},[43,47165,47167],{"className":222,"code":47166,"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,47168,47169,47179,47183,47197,47201,47214,47218],{"__ignoreMap":48},[52,47170,47171,47173,47175,47177],{"class":54,"line":55},[52,47172,232],{"class":231},[52,47174,9231],{"class":58},[52,47176,238],{"class":231},[52,47178,9236],{"class":73},[52,47180,47181],{"class":54,"line":80},[52,47182,597],{"emptyLinePlaceholder":171},[52,47184,47185,47187,47189,47191,47193,47195],{"class":54,"line":108},[52,47186,1721],{"class":231},[52,47188,1724],{"class":371},[52,47190,1727],{"class":231},[52,47192,1730],{"class":231},[52,47194,1733],{"class":66},[52,47196,1736],{"class":58},[52,47198,47199],{"class":54,"line":118},[52,47200,1751],{"class":58},[52,47202,47203,47205,47208,47210,47212],{"class":54,"line":594},[52,47204,1756],{"class":58},[52,47206,47207],{"class":73},"'RoundedRect'",[52,47209,1762],{"class":58},[52,47211,7886],{"class":73},[52,47213,1768],{"class":58},[52,47215,47216],{"class":54,"line":600},[52,47217,1773],{"class":58},[52,47219,47220],{"class":54,"line":606},[52,47221,1778],{"class":58},[156,47223,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47225},[47226,47227],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/roundedrect",{"title":46990,"description":46998},"docs/components/RoundedRect","iGzCibG0YPOXio8_JrcTDceNKA3o5qWRuTe0iQgHfpM",{"id":47234,"title":47235,"body":47236,"category":28771,"componentType":20848,"description":47242,"extension":168,"meta":47559,"navigation":171,"path":47560,"requiresChild":171,"seo":47561,"stem":47562,"__hash__":47563},"components/docs/components/Saturation.md","Saturation",{"type":8,"value":47237,"toc":47555},[47238,47240,47243,47245,47247,47250,47252,47553],[11,47239,47235],{"id":5773},[15,47241,47242],{},"Adjust color saturation intensity",[26901,47244],{"component":47235},[23,47246,26905],{"id":21503},[26907,47248],{":props":47249},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"1\",\"description\":\"The intensity of the saturation effect (1 being no change)\"}]",[23,47251,26913],{"id":26912},[217,47253,47254,47310,47369,47425,47483],{":tabs":1543},[43,47255,47257],{"className":45,"code":47256,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,47258,47259,47267,47274,47282,47286,47294,47302],{"__ignoreMap":48},[52,47260,47261,47263,47265],{"class":54,"line":55},[52,47262,59],{"class":58},[52,47264,63],{"class":62},[52,47266,77],{"class":58},[52,47268,47269,47271],{"class":54,"line":80},[52,47270,83],{"class":58},[52,47272,47273],{"class":62},"Saturation\n",[52,47275,47276,47278,47280],{"class":54,"line":108},[52,47277,17870],{"class":66},[52,47279,70],{"class":58},[52,47281,28827],{"class":73},[52,47283,47284],{"class":54,"line":118},[52,47285,26949],{"class":58},[52,47287,47288,47290,47292],{"class":54,"line":594},[52,47289,2213],{"class":58},[52,47291,2216],{"class":62},[52,47293,105],{"class":58},[52,47295,47296,47298,47300],{"class":54,"line":600},[52,47297,2230],{"class":58},[52,47299,47235],{"class":62},[52,47301,77],{"class":58},[52,47303,47304,47306,47308],{"class":54,"line":606},[52,47305,121],{"class":58},[52,47307,63],{"class":62},[52,47309,77],{"class":58},[43,47311,47313],{"className":360,"code":47312,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSaturation\n intensity={1}\n >\n \u003CCircle />\n \u003C/Saturation>\n\u003C/Shader>\n",[31,47314,47315,47323,47329,47341,47345,47353,47361],{"__ignoreMap":48},[52,47316,47317,47319,47321],{"class":54,"line":55},[52,47318,59],{"class":58},[52,47320,63],{"class":371},[52,47322,77],{"class":58},[52,47324,47325,47327],{"class":54,"line":80},[52,47326,83],{"class":58},[52,47328,47273],{"class":371},[52,47330,47331,47333,47335,47337,47339],{"class":54,"line":108},[52,47332,17981],{"class":66},[52,47334,70],{"class":231},[52,47336,723],{"class":58},[52,47338,6391],{"class":371},[52,47340,729],{"class":58},[52,47342,47343],{"class":54,"line":118},[52,47344,26949],{"class":58},[52,47346,47347,47349,47351],{"class":54,"line":594},[52,47348,2213],{"class":58},[52,47350,2216],{"class":371},[52,47352,105],{"class":58},[52,47354,47355,47357,47359],{"class":54,"line":600},[52,47356,2230],{"class":58},[52,47358,47235],{"class":371},[52,47360,77],{"class":58},[52,47362,47363,47365,47367],{"class":54,"line":606},[52,47364,121],{"class":58},[52,47366,63],{"class":371},[52,47368,77],{"class":58},[43,47370,47371],{"className":2507,"code":47312,"language":2509,"meta":48,"style":48},[31,47372,47373,47381,47387,47397,47401,47409,47417],{"__ignoreMap":48},[52,47374,47375,47377,47379],{"class":54,"line":55},[52,47376,59],{"class":58},[52,47378,63],{"class":371},[52,47380,77],{"class":58},[52,47382,47383,47385],{"class":54,"line":80},[52,47384,83],{"class":58},[52,47386,47273],{"class":371},[52,47388,47389,47391,47393,47395],{"class":54,"line":108},[52,47390,17981],{"class":66},[52,47392,24845],{"class":58},[52,47394,6391],{"class":371},[52,47396,729],{"class":58},[52,47398,47399],{"class":54,"line":118},[52,47400,26949],{"class":58},[52,47402,47403,47405,47407],{"class":54,"line":594},[52,47404,2213],{"class":58},[52,47406,2216],{"class":371},[52,47408,105],{"class":58},[52,47410,47411,47413,47415],{"class":54,"line":600},[52,47412,2230],{"class":58},[52,47414,47235],{"class":371},[52,47416,77],{"class":58},[52,47418,47419,47421,47423],{"class":54,"line":606},[52,47420,121],{"class":58},[52,47422,63],{"class":371},[52,47424,77],{"class":58},[43,47426,47427],{"className":419,"code":47312,"language":420,"meta":48,"style":48},[31,47428,47429,47437,47443,47455,47459,47467,47475],{"__ignoreMap":48},[52,47430,47431,47433,47435],{"class":54,"line":55},[52,47432,59],{"class":58},[52,47434,63],{"class":371},[52,47436,77],{"class":58},[52,47438,47439,47441],{"class":54,"line":80},[52,47440,83],{"class":58},[52,47442,47273],{"class":371},[52,47444,47445,47447,47449,47451,47453],{"class":54,"line":108},[52,47446,17981],{"class":66},[52,47448,70],{"class":231},[52,47450,723],{"class":58},[52,47452,6391],{"class":371},[52,47454,729],{"class":58},[52,47456,47457],{"class":54,"line":118},[52,47458,26949],{"class":58},[52,47460,47461,47463,47465],{"class":54,"line":594},[52,47462,2213],{"class":58},[52,47464,2216],{"class":371},[52,47466,105],{"class":58},[52,47468,47469,47471,47473],{"class":54,"line":600},[52,47470,2230],{"class":58},[52,47472,47235],{"class":371},[52,47474,77],{"class":58},[52,47476,47477,47479,47481],{"class":54,"line":606},[52,47478,121],{"class":58},[52,47480,63],{"class":371},[52,47482,77],{"class":58},[43,47484,47486],{"className":222,"code":47485,"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,47487,47488,47498,47502,47516,47520,47533,47541,47545,47549],{"__ignoreMap":48},[52,47489,47490,47492,47494,47496],{"class":54,"line":55},[52,47491,232],{"class":231},[52,47493,9231],{"class":58},[52,47495,238],{"class":231},[52,47497,9236],{"class":73},[52,47499,47500],{"class":54,"line":80},[52,47501,597],{"emptyLinePlaceholder":171},[52,47503,47504,47506,47508,47510,47512,47514],{"class":54,"line":108},[52,47505,1721],{"class":231},[52,47507,1724],{"class":371},[52,47509,1727],{"class":231},[52,47511,1730],{"class":231},[52,47513,1733],{"class":66},[52,47515,1736],{"class":58},[52,47517,47518],{"class":54,"line":118},[52,47519,1751],{"class":58},[52,47521,47522,47524,47527,47529,47531],{"class":54,"line":594},[52,47523,1756],{"class":58},[52,47525,47526],{"class":73},"'Saturation'",[52,47528,27194],{"class":58},[52,47530,6391],{"class":371},[52,47532,5259],{"class":58},[52,47534,47535,47537,47539],{"class":54,"line":600},[52,47536,4727],{"class":58},[52,47538,2869],{"class":73},[52,47540,2129],{"class":58},[52,47542,47543],{"class":54,"line":606},[52,47544,4744],{"class":58},[52,47546,47547],{"class":54,"line":653},[52,47548,1773],{"class":58},[52,47550,47551],{"class":54,"line":662},[52,47552,1778],{"class":58},[156,47554,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":47556},[47557,47558],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/saturation",{"title":47235,"description":47242},"docs/components/Saturation","iQaOw2882qjB-jbYoCFIE_Aadf-LIaRY3C7kbUKcm4U",{"id":47565,"title":47566,"body":47567,"category":28771,"componentType":20848,"description":47574,"extension":168,"meta":47835,"navigation":171,"path":47836,"requiresChild":171,"seo":47837,"stem":47838,"__hash__":47839},"components/docs/components/Sharpness.md","Sharpness",{"type":8,"value":47568,"toc":47831},[47569,47572,47575,47577,47579,47582,47584,47829],[11,47570,47566],{"id":47571},"sharpness",[15,47573,47574],{},"Adjust image sharpness using a convolution kernel",[26901,47576],{"component":47566},[23,47578,26905],{"id":21503},[26907,47580],{":props":47581},"[{\"name\":\"sharpness\",\"type\":\"number\",\"default\":\"0\",\"description\":\"How sharp to make the underlying image\"}]",[23,47583,26913],{"id":26912},[217,47585,47586,47631,47675,47719,47763],{":tabs":1543},[43,47587,47589],{"className":45,"code":47588,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSharpness>\n \u003CCircle />\n \u003C/Sharpness>\n\u003C/Shader>\n",[31,47590,47591,47599,47607,47615,47623],{"__ignoreMap":48},[52,47592,47593,47595,47597],{"class":54,"line":55},[52,47594,59],{"class":58},[52,47596,63],{"class":62},[52,47598,77],{"class":58},[52,47600,47601,47603,47605],{"class":54,"line":80},[52,47602,83],{"class":58},[52,47604,47566],{"class":62},[52,47606,77],{"class":58},[52,47608,47609,47611,47613],{"class":54,"line":108},[52,47610,2213],{"class":58},[52,47612,2216],{"class":62},[52,47614,105],{"class":58},[52,47616,47617,47619,47621],{"class":54,"line":118},[52,47618,2230],{"class":58},[52,47620,47566],{"class":62},[52,47622,77],{"class":58},[52,47624,47625,47627,47629],{"class":54,"line":594},[52,47626,121],{"class":58},[52,47628,63],{"class":62},[52,47630,77],{"class":58},[43,47632,47633],{"className":360,"code":47588,"language":362,"meta":48,"style":48},[31,47634,47635,47643,47651,47659,47667],{"__ignoreMap":48},[52,47636,47637,47639,47641],{"class":54,"line":55},[52,47638,59],{"class":58},[52,47640,63],{"class":371},[52,47642,77],{"class":58},[52,47644,47645,47647,47649],{"class":54,"line":80},[52,47646,83],{"class":58},[52,47648,47566],{"class":371},[52,47650,77],{"class":58},[52,47652,47653,47655,47657],{"class":54,"line":108},[52,47654,2213],{"class":58},[52,47656,2216],{"class":371},[52,47658,105],{"class":58},[52,47660,47661,47663,47665],{"class":54,"line":118},[52,47662,2230],{"class":58},[52,47664,47566],{"class":371},[52,47666,77],{"class":58},[52,47668,47669,47671,47673],{"class":54,"line":594},[52,47670,121],{"class":58},[52,47672,63],{"class":371},[52,47674,77],{"class":58},[43,47676,47677],{"className":2507,"code":47588,"language":2509,"meta":48,"style":48},[31,47678,47679,47687,47695,47703,47711],{"__ignoreMap":48},[52,47680,47681,47683,47685],{"class":54,"line":55},[52,47682,59],{"class":58},[52,47684,63],{"class":371},[52,47686,77],{"class":58},[52,47688,47689,47691,47693],{"class":54,"line":80},[52,47690,83],{"class":58},[52,47692,47566],{"class":371},[52,47694,77],{"class":58},[52,47696,47697,47699,47701],{"class":54,"line":108},[52,47698,2213],{"class":58},[52,47700,2216],{"class":371},[52,47702,105],{"class":58},[52,47704,47705,47707,47709],{"class":54,"line":118},[52,47706,2230],{"class":58},[52,47708,47566],{"class":371},[52,47710,77],{"class":58},[52,47712,47713,47715,47717],{"class":54,"line":594},[52,47714,121],{"class":58},[52,47716,63],{"class":371},[52,47718,77],{"class":58},[43,47720,47721],{"className":419,"code":47588,"language":420,"meta":48,"style":48},[31,47722,47723,47731,47739,47747,47755],{"__ignoreMap":48},[52,47724,47725,47727,47729],{"class":54,"line":55},[52,47726,59],{"class":58},[52,47728,63],{"class":371},[52,47730,77],{"class":58},[52,47732,47733,47735,47737],{"class":54,"line":80},[52,47734,83],{"class":58},[52,47736,47566],{"class":371},[52,47738,77],{"class":58},[52,47740,47741,47743,47745],{"class":54,"line":108},[52,47742,2213],{"class":58},[52,47744,2216],{"class":371},[52,47746,105],{"class":58},[52,47748,47749,47751,47753],{"class":54,"line":118},[52,47750,2230],{"class":58},[52,47752,47566],{"class":371},[52,47754,77],{"class":58},[52,47756,47757,47759,47761],{"class":54,"line":594},[52,47758,121],{"class":58},[52,47760,63],{"class":371},[52,47762,77],{"class":58},[43,47764,47766],{"className":222,"code":47765,"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,47767,47768,47778,47782,47796,47800,47809,47817,47821,47825],{"__ignoreMap":48},[52,47769,47770,47772,47774,47776],{"class":54,"line":55},[52,47771,232],{"class":231},[52,47773,9231],{"class":58},[52,47775,238],{"class":231},[52,47777,9236],{"class":73},[52,47779,47780],{"class":54,"line":80},[52,47781,597],{"emptyLinePlaceholder":171},[52,47783,47784,47786,47788,47790,47792,47794],{"class":54,"line":108},[52,47785,1721],{"class":231},[52,47787,1724],{"class":371},[52,47789,1727],{"class":231},[52,47791,1730],{"class":231},[52,47793,1733],{"class":66},[52,47795,1736],{"class":58},[52,47797,47798],{"class":54,"line":118},[52,47799,1751],{"class":58},[52,47801,47802,47804,47807],{"class":54,"line":594},[52,47803,1756],{"class":58},[52,47805,47806],{"class":73},"'Sharpness'",[52,47808,4722],{"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,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":47832},[47833,47834],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sharpness",{"title":47566,"description":47574},"docs/components/Sharpness","G2cI1YAUSb51GUfI6bCYCEskw1ix6XIGhiWLLLbadTw",{"id":47841,"title":47842,"body":47843,"category":30161,"componentType":20848,"description":47850,"extension":168,"meta":48215,"navigation":171,"path":48216,"requiresChild":171,"seo":48217,"stem":48218,"__hash__":48219},"components/docs/components/Shatter.md","Shatter",{"type":8,"value":47844,"toc":48211},[47845,47848,47851,47853,47855,47858,47860,48209],[11,47846,47842],{"id":47847},"shatter",[15,47849,47850],{},"Broken glass effect with tectonic plate displacement",[26901,47852],{"component":47842},[23,47854,26905],{"id":21503},[26907,47856],{":props":47857},"[{\"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,47859,26913],{"id":26912},[217,47861,47862,47927,47999,48065,48135],{":tabs":1543},[43,47863,47865],{"className":45,"code":47864,"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,47866,47867,47875,47882,47891,47899,47903,47911,47919],{"__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],{"class":54,"line":80},[52,47878,83],{"class":58},[52,47880,47881],{"class":62},"Shatter\n",[52,47883,47884,47886,47888],{"class":54,"line":108},[52,47885,17870],{"class":66},[52,47887,70],{"class":58},[52,47889,47890],{"class":73},"\"4\"\n",[52,47892,47893,47895,47897],{"class":54,"line":118},[52,47894,14901],{"class":66},[52,47896,70],{"class":58},[52,47898,36464],{"class":73},[52,47900,47901],{"class":54,"line":594},[52,47902,26949],{"class":58},[52,47904,47905,47907,47909],{"class":54,"line":600},[52,47906,2213],{"class":58},[52,47908,2216],{"class":62},[52,47910,105],{"class":58},[52,47912,47913,47915,47917],{"class":54,"line":606},[52,47914,2230],{"class":58},[52,47916,47842],{"class":62},[52,47918,77],{"class":58},[52,47920,47921,47923,47925],{"class":54,"line":653},[52,47922,121],{"class":58},[52,47924,63],{"class":62},[52,47926,77],{"class":58},[43,47928,47930],{"className":360,"code":47929,"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,47931,47932,47940,47946,47959,47971,47975,47983,47991],{"__ignoreMap":48},[52,47933,47934,47936,47938],{"class":54,"line":55},[52,47935,59],{"class":58},[52,47937,63],{"class":371},[52,47939,77],{"class":58},[52,47941,47942,47944],{"class":54,"line":80},[52,47943,83],{"class":58},[52,47945,47881],{"class":371},[52,47947,47948,47950,47952,47954,47957],{"class":54,"line":108},[52,47949,17981],{"class":66},[52,47951,70],{"class":231},[52,47953,723],{"class":58},[52,47955,47956],{"class":371},"4",[52,47958,729],{"class":58},[52,47960,47961,47963,47965,47967,47969],{"class":54,"line":118},[52,47962,7361],{"class":66},[52,47964,70],{"class":231},[52,47966,723],{"class":58},[52,47968,5963],{"class":371},[52,47970,729],{"class":58},[52,47972,47973],{"class":54,"line":594},[52,47974,26949],{"class":58},[52,47976,47977,47979,47981],{"class":54,"line":600},[52,47978,2213],{"class":58},[52,47980,2216],{"class":371},[52,47982,105],{"class":58},[52,47984,47985,47987,47989],{"class":54,"line":606},[52,47986,2230],{"class":58},[52,47988,47842],{"class":371},[52,47990,77],{"class":58},[52,47992,47993,47995,47997],{"class":54,"line":653},[52,47994,121],{"class":58},[52,47996,63],{"class":371},[52,47998,77],{"class":58},[43,48000,48001],{"className":2507,"code":47929,"language":2509,"meta":48,"style":48},[31,48002,48003,48011,48017,48027,48037,48041,48049,48057],{"__ignoreMap":48},[52,48004,48005,48007,48009],{"class":54,"line":55},[52,48006,59],{"class":58},[52,48008,63],{"class":371},[52,48010,77],{"class":58},[52,48012,48013,48015],{"class":54,"line":80},[52,48014,83],{"class":58},[52,48016,47881],{"class":371},[52,48018,48019,48021,48023,48025],{"class":54,"line":108},[52,48020,17981],{"class":66},[52,48022,24845],{"class":58},[52,48024,47956],{"class":371},[52,48026,729],{"class":58},[52,48028,48029,48031,48033,48035],{"class":54,"line":118},[52,48030,7361],{"class":66},[52,48032,24845],{"class":58},[52,48034,5963],{"class":371},[52,48036,729],{"class":58},[52,48038,48039],{"class":54,"line":594},[52,48040,26949],{"class":58},[52,48042,48043,48045,48047],{"class":54,"line":600},[52,48044,2213],{"class":58},[52,48046,2216],{"class":371},[52,48048,105],{"class":58},[52,48050,48051,48053,48055],{"class":54,"line":606},[52,48052,2230],{"class":58},[52,48054,47842],{"class":371},[52,48056,77],{"class":58},[52,48058,48059,48061,48063],{"class":54,"line":653},[52,48060,121],{"class":58},[52,48062,63],{"class":371},[52,48064,77],{"class":58},[43,48066,48067],{"className":419,"code":47929,"language":420,"meta":48,"style":48},[31,48068,48069,48077,48083,48095,48107,48111,48119,48127],{"__ignoreMap":48},[52,48070,48071,48073,48075],{"class":54,"line":55},[52,48072,59],{"class":58},[52,48074,63],{"class":371},[52,48076,77],{"class":58},[52,48078,48079,48081],{"class":54,"line":80},[52,48080,83],{"class":58},[52,48082,47881],{"class":371},[52,48084,48085,48087,48089,48091,48093],{"class":54,"line":108},[52,48086,17981],{"class":66},[52,48088,70],{"class":231},[52,48090,723],{"class":58},[52,48092,47956],{"class":371},[52,48094,729],{"class":58},[52,48096,48097,48099,48101,48103,48105],{"class":54,"line":118},[52,48098,7361],{"class":66},[52,48100,70],{"class":231},[52,48102,723],{"class":58},[52,48104,5963],{"class":371},[52,48106,729],{"class":58},[52,48108,48109],{"class":54,"line":594},[52,48110,26949],{"class":58},[52,48112,48113,48115,48117],{"class":54,"line":600},[52,48114,2213],{"class":58},[52,48116,2216],{"class":371},[52,48118,105],{"class":58},[52,48120,48121,48123,48125],{"class":54,"line":606},[52,48122,2230],{"class":58},[52,48124,47842],{"class":371},[52,48126,77],{"class":58},[52,48128,48129,48131,48133],{"class":54,"line":653},[52,48130,121],{"class":58},[52,48132,63],{"class":371},[52,48134,77],{"class":58},[43,48136,48138],{"className":222,"code":48137,"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,48139,48140,48150,48154,48168,48172,48189,48197,48201,48205],{"__ignoreMap":48},[52,48141,48142,48144,48146,48148],{"class":54,"line":55},[52,48143,232],{"class":231},[52,48145,9231],{"class":58},[52,48147,238],{"class":231},[52,48149,9236],{"class":73},[52,48151,48152],{"class":54,"line":80},[52,48153,597],{"emptyLinePlaceholder":171},[52,48155,48156,48158,48160,48162,48164,48166],{"class":54,"line":108},[52,48157,1721],{"class":231},[52,48159,1724],{"class":371},[52,48161,1727],{"class":231},[52,48163,1730],{"class":231},[52,48165,1733],{"class":66},[52,48167,1736],{"class":58},[52,48169,48170],{"class":54,"line":118},[52,48171,1751],{"class":58},[52,48173,48174,48176,48179,48181,48183,48185,48187],{"class":54,"line":594},[52,48175,1756],{"class":58},[52,48177,48178],{"class":73},"'Shatter'",[52,48180,27194],{"class":58},[52,48182,47956],{"class":371},[52,48184,4278],{"class":58},[52,48186,5963],{"class":371},[52,48188,5259],{"class":58},[52,48190,48191,48193,48195],{"class":54,"line":600},[52,48192,4727],{"class":58},[52,48194,2869],{"class":73},[52,48196,2129],{"class":58},[52,48198,48199],{"class":54,"line":606},[52,48200,4744],{"class":58},[52,48202,48203],{"class":54,"line":653},[52,48204,1773],{"class":58},[52,48206,48207],{"class":54,"line":662},[52,48208,1778],{"class":58},[156,48210,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48212},[48213,48214],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/shatter",{"title":47842,"description":47850},"docs/components/Shatter","dKRTMKOUHcjK6-Sx4TGX9KQaSlNJJZ31Lgpq9zHChU0",{"id":48221,"title":48222,"body":48223,"category":27760,"componentType":20842,"description":48230,"extension":168,"meta":48415,"navigation":171,"path":48416,"requiresChild":27763,"seo":48417,"stem":48418,"__hash__":48419},"components/docs/components/SimplexNoise.md","SimplexNoise",{"type":8,"value":48224,"toc":48411},[48225,48228,48231,48233,48235,48238,48240,48409],[11,48226,48222],{"id":48227},"simplexnoise",[15,48229,48230],{},"Organic noise with animated movement",[26901,48232],{"component":48222},[23,48234,26905],{"id":21503},[26907,48236],{":props":48237},"[{\"name\":\"colorA\",\"type\":\"string\",\"default\":\"#ffffff\",\"description\":\"First color\"},{\"name\":\"colorB\",\"type\":\"string\",\"default\":\"#000000\",\"description\":\"Second color\"},{\"name\":\"scale\",\"type\":\"number\",\"default\":\"2\",\"description\":\"Pattern scale (higher = larger patterns)\"},{\"name\":\"balance\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Balance between colors (negative = more colorB, positive = more colorA)\"},{\"name\":\"contrast\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Pattern contrast (higher = sharper transitions)\"},{\"name\":\"seed\",\"type\":\"number\",\"default\":\"0\",\"description\":\"Random seed for pattern variation\"},{\"name\":\"speed\",\"type\":\"number\",\"default\":\"1\",\"description\":\"Animation speed\"}]",[23,48239,26913],{"id":26912},[217,48241,48242,48271,48299,48327,48355],{":tabs":1543},[43,48243,48245],{"className":45,"code":48244,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSimplexNoise />\n\u003C/Shader>\n",[31,48246,48247,48255,48263],{"__ignoreMap":48},[52,48248,48249,48251,48253],{"class":54,"line":55},[52,48250,59],{"class":58},[52,48252,63],{"class":62},[52,48254,77],{"class":58},[52,48256,48257,48259,48261],{"class":54,"line":80},[52,48258,83],{"class":58},[52,48260,48222],{"class":62},[52,48262,105],{"class":58},[52,48264,48265,48267,48269],{"class":54,"line":108},[52,48266,121],{"class":58},[52,48268,63],{"class":62},[52,48270,77],{"class":58},[43,48272,48273],{"className":360,"code":48244,"language":362,"meta":48,"style":48},[31,48274,48275,48283,48291],{"__ignoreMap":48},[52,48276,48277,48279,48281],{"class":54,"line":55},[52,48278,59],{"class":58},[52,48280,63],{"class":371},[52,48282,77],{"class":58},[52,48284,48285,48287,48289],{"class":54,"line":80},[52,48286,83],{"class":58},[52,48288,48222],{"class":371},[52,48290,105],{"class":58},[52,48292,48293,48295,48297],{"class":54,"line":108},[52,48294,121],{"class":58},[52,48296,63],{"class":371},[52,48298,77],{"class":58},[43,48300,48301],{"className":2507,"code":48244,"language":2509,"meta":48,"style":48},[31,48302,48303,48311,48319],{"__ignoreMap":48},[52,48304,48305,48307,48309],{"class":54,"line":55},[52,48306,59],{"class":58},[52,48308,63],{"class":371},[52,48310,77],{"class":58},[52,48312,48313,48315,48317],{"class":54,"line":80},[52,48314,83],{"class":58},[52,48316,48222],{"class":371},[52,48318,105],{"class":58},[52,48320,48321,48323,48325],{"class":54,"line":108},[52,48322,121],{"class":58},[52,48324,63],{"class":371},[52,48326,77],{"class":58},[43,48328,48329],{"className":419,"code":48244,"language":420,"meta":48,"style":48},[31,48330,48331,48339,48347],{"__ignoreMap":48},[52,48332,48333,48335,48337],{"class":54,"line":55},[52,48334,59],{"class":58},[52,48336,63],{"class":371},[52,48338,77],{"class":58},[52,48340,48341,48343,48345],{"class":54,"line":80},[52,48342,83],{"class":58},[52,48344,48222],{"class":371},[52,48346,105],{"class":58},[52,48348,48349,48351,48353],{"class":54,"line":108},[52,48350,121],{"class":58},[52,48352,63],{"class":371},[52,48354,77],{"class":58},[43,48356,48358],{"className":222,"code":48357,"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,48359,48360,48370,48374,48388,48392,48401,48405],{"__ignoreMap":48},[52,48361,48362,48364,48366,48368],{"class":54,"line":55},[52,48363,232],{"class":231},[52,48365,9231],{"class":58},[52,48367,238],{"class":231},[52,48369,9236],{"class":73},[52,48371,48372],{"class":54,"line":80},[52,48373,597],{"emptyLinePlaceholder":171},[52,48375,48376,48378,48380,48382,48384,48386],{"class":54,"line":108},[52,48377,1721],{"class":231},[52,48379,1724],{"class":371},[52,48381,1727],{"class":231},[52,48383,1730],{"class":231},[52,48385,1733],{"class":66},[52,48387,1736],{"class":58},[52,48389,48390],{"class":54,"line":118},[52,48391,1751],{"class":58},[52,48393,48394,48396,48399],{"class":54,"line":594},[52,48395,1756],{"class":58},[52,48397,48398],{"class":73},"'SimplexNoise'",[52,48400,2129],{"class":58},[52,48402,48403],{"class":54,"line":600},[52,48404,1773],{"class":58},[52,48406,48407],{"class":54,"line":606},[52,48408,1778],{"class":58},[156,48410,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":48412},[48413,48414],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/simplexnoise",{"title":48222,"description":48230},"docs/components/SimplexNoise","d0mO4mGGih-voEAS5386XslXJGaXC6JFX720cMm4EPY",{"id":48421,"title":48422,"body":48423,"category":27760,"componentType":20842,"description":48430,"extension":168,"meta":48660,"navigation":171,"path":48661,"requiresChild":27763,"seo":48662,"stem":48663,"__hash__":48664},"components/docs/components/SineWave.md","SineWave",{"type":8,"value":48424,"toc":48656},[48425,48428,48431,48433,48435,48438,48440,48654],[11,48426,48422],{"id":48427},"sinewave",[15,48429,48430],{},"Animated wave with thickness and softness",[26901,48432],{"component":48422},[23,48434,26905],{"id":21503},[26907,48436],{":props":48437},"[{\"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,48439,26913],{"id":26912},[217,48441,48442,48482,48520,48558,48596],{":tabs":1543},[43,48443,48445],{"className":45,"code":48444,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSineWave\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,48446,48447,48455,48462,48470,48474],{"__ignoreMap":48},[52,48448,48449,48451,48453],{"class":54,"line":55},[52,48450,59],{"class":58},[52,48452,63],{"class":62},[52,48454,77],{"class":58},[52,48456,48457,48459],{"class":54,"line":80},[52,48458,83],{"class":58},[52,48460,48461],{"class":62},"SineWave\n",[52,48463,48464,48466,48468],{"class":54,"line":108},[52,48465,7351],{"class":66},[52,48467,70],{"class":58},[52,48469,7307],{"class":73},[52,48471,48472],{"class":54,"line":118},[52,48473,1224],{"class":58},[52,48475,48476,48478,48480],{"class":54,"line":594},[52,48477,121],{"class":58},[52,48479,63],{"class":62},[52,48481,77],{"class":58},[43,48483,48484],{"className":360,"code":48444,"language":362,"meta":48,"style":48},[31,48485,48486,48494,48500,48508,48512],{"__ignoreMap":48},[52,48487,48488,48490,48492],{"class":54,"line":55},[52,48489,59],{"class":58},[52,48491,63],{"class":371},[52,48493,77],{"class":58},[52,48495,48496,48498],{"class":54,"line":80},[52,48497,83],{"class":58},[52,48499,48461],{"class":371},[52,48501,48502,48504,48506],{"class":54,"line":108},[52,48503,7351],{"class":66},[52,48505,70],{"class":231},[52,48507,7307],{"class":73},[52,48509,48510],{"class":54,"line":118},[52,48511,1224],{"class":58},[52,48513,48514,48516,48518],{"class":54,"line":594},[52,48515,121],{"class":58},[52,48517,63],{"class":371},[52,48519,77],{"class":58},[43,48521,48522],{"className":2507,"code":48444,"language":2509,"meta":48,"style":48},[31,48523,48524,48532,48538,48546,48550],{"__ignoreMap":48},[52,48525,48526,48528,48530],{"class":54,"line":55},[52,48527,59],{"class":58},[52,48529,63],{"class":371},[52,48531,77],{"class":58},[52,48533,48534,48536],{"class":54,"line":80},[52,48535,83],{"class":58},[52,48537,48461],{"class":371},[52,48539,48540,48542,48544],{"class":54,"line":108},[52,48541,7351],{"class":66},[52,48543,70],{"class":58},[52,48545,7307],{"class":73},[52,48547,48548],{"class":54,"line":118},[52,48549,1224],{"class":58},[52,48551,48552,48554,48556],{"class":54,"line":594},[52,48553,121],{"class":58},[52,48555,63],{"class":371},[52,48557,77],{"class":58},[43,48559,48560],{"className":419,"code":48444,"language":420,"meta":48,"style":48},[31,48561,48562,48570,48576,48584,48588],{"__ignoreMap":48},[52,48563,48564,48566,48568],{"class":54,"line":55},[52,48565,59],{"class":58},[52,48567,63],{"class":371},[52,48569,77],{"class":58},[52,48571,48572,48574],{"class":54,"line":80},[52,48573,83],{"class":58},[52,48575,48461],{"class":371},[52,48577,48578,48580,48582],{"class":54,"line":108},[52,48579,7351],{"class":66},[52,48581,70],{"class":231},[52,48583,7307],{"class":73},[52,48585,48586],{"class":54,"line":118},[52,48587,1224],{"class":58},[52,48589,48590,48592,48594],{"class":54,"line":594},[52,48591,121],{"class":58},[52,48593,63],{"class":371},[52,48595,77],{"class":58},[43,48597,48599],{"className":222,"code":48598,"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,48600,48601,48611,48615,48629,48633,48646,48650],{"__ignoreMap":48},[52,48602,48603,48605,48607,48609],{"class":54,"line":55},[52,48604,232],{"class":231},[52,48606,9231],{"class":58},[52,48608,238],{"class":231},[52,48610,9236],{"class":73},[52,48612,48613],{"class":54,"line":80},[52,48614,597],{"emptyLinePlaceholder":171},[52,48616,48617,48619,48621,48623,48625,48627],{"class":54,"line":108},[52,48618,1721],{"class":231},[52,48620,1724],{"class":371},[52,48622,1727],{"class":231},[52,48624,1730],{"class":231},[52,48626,1733],{"class":66},[52,48628,1736],{"class":58},[52,48630,48631],{"class":54,"line":118},[52,48632,1751],{"class":58},[52,48634,48635,48637,48640,48642,48644],{"class":54,"line":594},[52,48636,1756],{"class":58},[52,48638,48639],{"class":73},"'SineWave'",[52,48641,1762],{"class":58},[52,48643,7886],{"class":73},[52,48645,1768],{"class":58},[52,48647,48648],{"class":54,"line":600},[52,48649,1773],{"class":58},[52,48651,48652],{"class":54,"line":606},[52,48653,1778],{"class":58},[156,48655,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48657},[48658,48659],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/sinewave",{"title":48422,"description":48430},"docs/components/SineWave","depOBfBDMv7UJnG3jkauRO4UwYl3S9RhSvocduvVHLU",{"id":48666,"title":48667,"body":48668,"category":30161,"componentType":20842,"description":48675,"extension":168,"meta":48916,"navigation":171,"path":48917,"requiresChild":27763,"seo":48918,"stem":48919,"__hash__":48920},"components/docs/components/Smoke.md","Smoke",{"type":8,"value":48669,"toc":48912},[48670,48673,48676,48678,48680,48683,48685,48910],[11,48671,48667],{"id":48672},"smoke",[15,48674,48675],{},"Realistic fluid smoke simulation with vorticity dynamics",[26901,48677],{"component":48667},[23,48679,26905],{"id":21503},[26907,48681],{":props":48682},"[{\"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,48684,26913],{"id":26912},[217,48686,48687,48727,48770,48810,48852],{":tabs":1543},[43,48688,48690],{"className":45,"code":48689,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSmoke\n :intensity=\"1\"\n />\n\u003C/Shader>\n",[31,48691,48692,48700,48707,48715,48719],{"__ignoreMap":48},[52,48693,48694,48696,48698],{"class":54,"line":55},[52,48695,59],{"class":58},[52,48697,63],{"class":62},[52,48699,77],{"class":58},[52,48701,48702,48704],{"class":54,"line":80},[52,48703,83],{"class":58},[52,48705,48706],{"class":62},"Smoke\n",[52,48708,48709,48711,48713],{"class":54,"line":108},[52,48710,17870],{"class":66},[52,48712,70],{"class":58},[52,48714,28827],{"class":73},[52,48716,48717],{"class":54,"line":118},[52,48718,1224],{"class":58},[52,48720,48721,48723,48725],{"class":54,"line":594},[52,48722,121],{"class":58},[52,48724,63],{"class":62},[52,48726,77],{"class":58},[43,48728,48730],{"className":360,"code":48729,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSmoke\n intensity={1}\n />\n\u003C/Shader>\n",[31,48731,48732,48740,48746,48758,48762],{"__ignoreMap":48},[52,48733,48734,48736,48738],{"class":54,"line":55},[52,48735,59],{"class":58},[52,48737,63],{"class":371},[52,48739,77],{"class":58},[52,48741,48742,48744],{"class":54,"line":80},[52,48743,83],{"class":58},[52,48745,48706],{"class":371},[52,48747,48748,48750,48752,48754,48756],{"class":54,"line":108},[52,48749,17981],{"class":66},[52,48751,70],{"class":231},[52,48753,723],{"class":58},[52,48755,6391],{"class":371},[52,48757,729],{"class":58},[52,48759,48760],{"class":54,"line":118},[52,48761,1224],{"class":58},[52,48763,48764,48766,48768],{"class":54,"line":594},[52,48765,121],{"class":58},[52,48767,63],{"class":371},[52,48769,77],{"class":58},[43,48771,48772],{"className":2507,"code":48729,"language":2509,"meta":48,"style":48},[31,48773,48774,48782,48788,48798,48802],{"__ignoreMap":48},[52,48775,48776,48778,48780],{"class":54,"line":55},[52,48777,59],{"class":58},[52,48779,63],{"class":371},[52,48781,77],{"class":58},[52,48783,48784,48786],{"class":54,"line":80},[52,48785,83],{"class":58},[52,48787,48706],{"class":371},[52,48789,48790,48792,48794,48796],{"class":54,"line":108},[52,48791,17981],{"class":66},[52,48793,24845],{"class":58},[52,48795,6391],{"class":371},[52,48797,729],{"class":58},[52,48799,48800],{"class":54,"line":118},[52,48801,1224],{"class":58},[52,48803,48804,48806,48808],{"class":54,"line":594},[52,48805,121],{"class":58},[52,48807,63],{"class":371},[52,48809,77],{"class":58},[43,48811,48812],{"className":419,"code":48729,"language":420,"meta":48,"style":48},[31,48813,48814,48822,48828,48840,48844],{"__ignoreMap":48},[52,48815,48816,48818,48820],{"class":54,"line":55},[52,48817,59],{"class":58},[52,48819,63],{"class":371},[52,48821,77],{"class":58},[52,48823,48824,48826],{"class":54,"line":80},[52,48825,83],{"class":58},[52,48827,48706],{"class":371},[52,48829,48830,48832,48834,48836,48838],{"class":54,"line":108},[52,48831,17981],{"class":66},[52,48833,70],{"class":231},[52,48835,723],{"class":58},[52,48837,6391],{"class":371},[52,48839,729],{"class":58},[52,48841,48842],{"class":54,"line":118},[52,48843,1224],{"class":58},[52,48845,48846,48848,48850],{"class":54,"line":594},[52,48847,121],{"class":58},[52,48849,63],{"class":371},[52,48851,77],{"class":58},[43,48853,48855],{"className":222,"code":48854,"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,48856,48857,48867,48871,48885,48889,48902,48906],{"__ignoreMap":48},[52,48858,48859,48861,48863,48865],{"class":54,"line":55},[52,48860,232],{"class":231},[52,48862,9231],{"class":58},[52,48864,238],{"class":231},[52,48866,9236],{"class":73},[52,48868,48869],{"class":54,"line":80},[52,48870,597],{"emptyLinePlaceholder":171},[52,48872,48873,48875,48877,48879,48881,48883],{"class":54,"line":108},[52,48874,1721],{"class":231},[52,48876,1724],{"class":371},[52,48878,1727],{"class":231},[52,48880,1730],{"class":231},[52,48882,1733],{"class":66},[52,48884,1736],{"class":58},[52,48886,48887],{"class":54,"line":118},[52,48888,1751],{"class":58},[52,48890,48891,48893,48896,48898,48900],{"class":54,"line":594},[52,48892,1756],{"class":58},[52,48894,48895],{"class":73},"'Smoke'",[52,48897,27194],{"class":58},[52,48899,6391],{"class":371},[52,48901,1768],{"class":58},[52,48903,48904],{"class":54,"line":600},[52,48905,1773],{"class":58},[52,48907,48908],{"class":54,"line":606},[52,48909,1778],{"class":58},[156,48911,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":48913},[48914,48915],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/smoke",{"title":48667,"description":48675},"docs/components/Smoke","UlHnB8tb_DN-xqO6eQIWRUBXGMCzqvfmm7_SL-0BaIs",{"id":48922,"title":48923,"body":48924,"category":32398,"componentType":20842,"description":48931,"extension":168,"meta":49172,"navigation":171,"path":49173,"requiresChild":27763,"seo":49174,"stem":49175,"__hash__":49176},"components/docs/components/SmokeFill.md","SmokeFill",{"type":8,"value":48925,"toc":49168},[48926,48929,48932,48934,48936,48939,48941,49166],[11,48927,48923],{"id":48928},"smokefill",[15,48930,48931],{},"Fill a shape with swirling fluid smoke that interacts with the shape boundary",[26901,48933],{"component":48923},[23,48935,26905],{"id":21503},[26907,48937],{":props":48938},"[{\"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,48940,26913],{"id":26912},[217,48942,48943,48983,49026,49066,49108],{":tabs":1543},[43,48944,48946],{"className":45,"code":48945,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSmokeFill\n :intensity=\"1\"\n />\n\u003C/Shader>\n",[31,48947,48948,48956,48963,48971,48975],{"__ignoreMap":48},[52,48949,48950,48952,48954],{"class":54,"line":55},[52,48951,59],{"class":58},[52,48953,63],{"class":62},[52,48955,77],{"class":58},[52,48957,48958,48960],{"class":54,"line":80},[52,48959,83],{"class":58},[52,48961,48962],{"class":62},"SmokeFill\n",[52,48964,48965,48967,48969],{"class":54,"line":108},[52,48966,17870],{"class":66},[52,48968,70],{"class":58},[52,48970,28827],{"class":73},[52,48972,48973],{"class":54,"line":118},[52,48974,1224],{"class":58},[52,48976,48977,48979,48981],{"class":54,"line":594},[52,48978,121],{"class":58},[52,48980,63],{"class":62},[52,48982,77],{"class":58},[43,48984,48986],{"className":360,"code":48985,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSmokeFill\n intensity={1}\n />\n\u003C/Shader>\n",[31,48987,48988,48996,49002,49014,49018],{"__ignoreMap":48},[52,48989,48990,48992,48994],{"class":54,"line":55},[52,48991,59],{"class":58},[52,48993,63],{"class":371},[52,48995,77],{"class":58},[52,48997,48998,49000],{"class":54,"line":80},[52,48999,83],{"class":58},[52,49001,48962],{"class":371},[52,49003,49004,49006,49008,49010,49012],{"class":54,"line":108},[52,49005,17981],{"class":66},[52,49007,70],{"class":231},[52,49009,723],{"class":58},[52,49011,6391],{"class":371},[52,49013,729],{"class":58},[52,49015,49016],{"class":54,"line":118},[52,49017,1224],{"class":58},[52,49019,49020,49022,49024],{"class":54,"line":594},[52,49021,121],{"class":58},[52,49023,63],{"class":371},[52,49025,77],{"class":58},[43,49027,49028],{"className":2507,"code":48985,"language":2509,"meta":48,"style":48},[31,49029,49030,49038,49044,49054,49058],{"__ignoreMap":48},[52,49031,49032,49034,49036],{"class":54,"line":55},[52,49033,59],{"class":58},[52,49035,63],{"class":371},[52,49037,77],{"class":58},[52,49039,49040,49042],{"class":54,"line":80},[52,49041,83],{"class":58},[52,49043,48962],{"class":371},[52,49045,49046,49048,49050,49052],{"class":54,"line":108},[52,49047,17981],{"class":66},[52,49049,24845],{"class":58},[52,49051,6391],{"class":371},[52,49053,729],{"class":58},[52,49055,49056],{"class":54,"line":118},[52,49057,1224],{"class":58},[52,49059,49060,49062,49064],{"class":54,"line":594},[52,49061,121],{"class":58},[52,49063,63],{"class":371},[52,49065,77],{"class":58},[43,49067,49068],{"className":419,"code":48985,"language":420,"meta":48,"style":48},[31,49069,49070,49078,49084,49096,49100],{"__ignoreMap":48},[52,49071,49072,49074,49076],{"class":54,"line":55},[52,49073,59],{"class":58},[52,49075,63],{"class":371},[52,49077,77],{"class":58},[52,49079,49080,49082],{"class":54,"line":80},[52,49081,83],{"class":58},[52,49083,48962],{"class":371},[52,49085,49086,49088,49090,49092,49094],{"class":54,"line":108},[52,49087,17981],{"class":66},[52,49089,70],{"class":231},[52,49091,723],{"class":58},[52,49093,6391],{"class":371},[52,49095,729],{"class":58},[52,49097,49098],{"class":54,"line":118},[52,49099,1224],{"class":58},[52,49101,49102,49104,49106],{"class":54,"line":594},[52,49103,121],{"class":58},[52,49105,63],{"class":371},[52,49107,77],{"class":58},[43,49109,49111],{"className":222,"code":49110,"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,49112,49113,49123,49127,49141,49145,49158,49162],{"__ignoreMap":48},[52,49114,49115,49117,49119,49121],{"class":54,"line":55},[52,49116,232],{"class":231},[52,49118,9231],{"class":58},[52,49120,238],{"class":231},[52,49122,9236],{"class":73},[52,49124,49125],{"class":54,"line":80},[52,49126,597],{"emptyLinePlaceholder":171},[52,49128,49129,49131,49133,49135,49137,49139],{"class":54,"line":108},[52,49130,1721],{"class":231},[52,49132,1724],{"class":371},[52,49134,1727],{"class":231},[52,49136,1730],{"class":231},[52,49138,1733],{"class":66},[52,49140,1736],{"class":58},[52,49142,49143],{"class":54,"line":118},[52,49144,1751],{"class":58},[52,49146,49147,49149,49152,49154,49156],{"class":54,"line":594},[52,49148,1756],{"class":58},[52,49150,49151],{"class":73},"'SmokeFill'",[52,49153,27194],{"class":58},[52,49155,6391],{"class":371},[52,49157,1768],{"class":58},[52,49159,49160],{"class":54,"line":600},[52,49161,1773],{"class":58},[52,49163,49164],{"class":54,"line":606},[52,49165,1778],{"class":58},[156,49167,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49169},[49170,49171],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/smokefill",{"title":48923,"description":48931},"docs/components/SmokeFill","In59IIGncxhyBU-LL6PQlelo0dbxYCegEfikyN-CYT4",{"id":49178,"title":49179,"body":49180,"category":28771,"componentType":20848,"description":49187,"extension":168,"meta":49448,"navigation":171,"path":49449,"requiresChild":171,"seo":49450,"stem":49451,"__hash__":49452},"components/docs/components/Solarize.md","Solarize",{"type":8,"value":49181,"toc":49444},[49182,49185,49188,49190,49192,49195,49197,49442],[11,49183,49179],{"id":49184},"solarize",[15,49186,49187],{},"Inverts tones above a luminance threshold — a classic darkroom and photo effect",[26901,49189],{"component":49179},[23,49191,26905],{"id":21503},[26907,49193],{":props":49194},"[{\"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,49196,26913],{"id":26912},[217,49198,49199,49244,49288,49332,49376],{":tabs":1543},[43,49200,49202],{"className":45,"code":49201,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolarize>\n \u003CCircle />\n \u003C/Solarize>\n\u003C/Shader>\n",[31,49203,49204,49212,49220,49228,49236],{"__ignoreMap":48},[52,49205,49206,49208,49210],{"class":54,"line":55},[52,49207,59],{"class":58},[52,49209,63],{"class":62},[52,49211,77],{"class":58},[52,49213,49214,49216,49218],{"class":54,"line":80},[52,49215,83],{"class":58},[52,49217,49179],{"class":62},[52,49219,77],{"class":58},[52,49221,49222,49224,49226],{"class":54,"line":108},[52,49223,2213],{"class":58},[52,49225,2216],{"class":62},[52,49227,105],{"class":58},[52,49229,49230,49232,49234],{"class":54,"line":118},[52,49231,2230],{"class":58},[52,49233,49179],{"class":62},[52,49235,77],{"class":58},[52,49237,49238,49240,49242],{"class":54,"line":594},[52,49239,121],{"class":58},[52,49241,63],{"class":62},[52,49243,77],{"class":58},[43,49245,49246],{"className":360,"code":49201,"language":362,"meta":48,"style":48},[31,49247,49248,49256,49264,49272,49280],{"__ignoreMap":48},[52,49249,49250,49252,49254],{"class":54,"line":55},[52,49251,59],{"class":58},[52,49253,63],{"class":371},[52,49255,77],{"class":58},[52,49257,49258,49260,49262],{"class":54,"line":80},[52,49259,83],{"class":58},[52,49261,49179],{"class":371},[52,49263,77],{"class":58},[52,49265,49266,49268,49270],{"class":54,"line":108},[52,49267,2213],{"class":58},[52,49269,2216],{"class":371},[52,49271,105],{"class":58},[52,49273,49274,49276,49278],{"class":54,"line":118},[52,49275,2230],{"class":58},[52,49277,49179],{"class":371},[52,49279,77],{"class":58},[52,49281,49282,49284,49286],{"class":54,"line":594},[52,49283,121],{"class":58},[52,49285,63],{"class":371},[52,49287,77],{"class":58},[43,49289,49290],{"className":2507,"code":49201,"language":2509,"meta":48,"style":48},[31,49291,49292,49300,49308,49316,49324],{"__ignoreMap":48},[52,49293,49294,49296,49298],{"class":54,"line":55},[52,49295,59],{"class":58},[52,49297,63],{"class":371},[52,49299,77],{"class":58},[52,49301,49302,49304,49306],{"class":54,"line":80},[52,49303,83],{"class":58},[52,49305,49179],{"class":371},[52,49307,77],{"class":58},[52,49309,49310,49312,49314],{"class":54,"line":108},[52,49311,2213],{"class":58},[52,49313,2216],{"class":371},[52,49315,105],{"class":58},[52,49317,49318,49320,49322],{"class":54,"line":118},[52,49319,2230],{"class":58},[52,49321,49179],{"class":371},[52,49323,77],{"class":58},[52,49325,49326,49328,49330],{"class":54,"line":594},[52,49327,121],{"class":58},[52,49329,63],{"class":371},[52,49331,77],{"class":58},[43,49333,49334],{"className":419,"code":49201,"language":420,"meta":48,"style":48},[31,49335,49336,49344,49352,49360,49368],{"__ignoreMap":48},[52,49337,49338,49340,49342],{"class":54,"line":55},[52,49339,59],{"class":58},[52,49341,63],{"class":371},[52,49343,77],{"class":58},[52,49345,49346,49348,49350],{"class":54,"line":80},[52,49347,83],{"class":58},[52,49349,49179],{"class":371},[52,49351,77],{"class":58},[52,49353,49354,49356,49358],{"class":54,"line":108},[52,49355,2213],{"class":58},[52,49357,2216],{"class":371},[52,49359,105],{"class":58},[52,49361,49362,49364,49366],{"class":54,"line":118},[52,49363,2230],{"class":58},[52,49365,49179],{"class":371},[52,49367,77],{"class":58},[52,49369,49370,49372,49374],{"class":54,"line":594},[52,49371,121],{"class":58},[52,49373,63],{"class":371},[52,49375,77],{"class":58},[43,49377,49379],{"className":222,"code":49378,"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,49380,49381,49391,49395,49409,49413,49422,49430,49434,49438],{"__ignoreMap":48},[52,49382,49383,49385,49387,49389],{"class":54,"line":55},[52,49384,232],{"class":231},[52,49386,9231],{"class":58},[52,49388,238],{"class":231},[52,49390,9236],{"class":73},[52,49392,49393],{"class":54,"line":80},[52,49394,597],{"emptyLinePlaceholder":171},[52,49396,49397,49399,49401,49403,49405,49407],{"class":54,"line":108},[52,49398,1721],{"class":231},[52,49400,1724],{"class":371},[52,49402,1727],{"class":231},[52,49404,1730],{"class":231},[52,49406,1733],{"class":66},[52,49408,1736],{"class":58},[52,49410,49411],{"class":54,"line":118},[52,49412,1751],{"class":58},[52,49414,49415,49417,49420],{"class":54,"line":594},[52,49416,1756],{"class":58},[52,49418,49419],{"class":73},"'Solarize'",[52,49421,4722],{"class":58},[52,49423,49424,49426,49428],{"class":54,"line":600},[52,49425,4727],{"class":58},[52,49427,2869],{"class":73},[52,49429,2129],{"class":58},[52,49431,49432],{"class":54,"line":606},[52,49433,4744],{"class":58},[52,49435,49436],{"class":54,"line":653},[52,49437,1773],{"class":58},[52,49439,49440],{"class":54,"line":662},[52,49441,1778],{"class":58},[156,49443,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":49445},[49446,49447],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solarize",{"title":49179,"description":49187},"docs/components/Solarize","b1FS6XOh_A5V5FNn8IHFGawXB_bkRJCo_RyW_uD_YRo",{"id":49454,"title":1571,"body":49455,"category":27760,"componentType":20842,"description":49462,"extension":168,"meta":49692,"navigation":171,"path":49693,"requiresChild":27763,"seo":49694,"stem":49695,"__hash__":49696},"components/docs/components/SolidColor.md",{"type":8,"value":49456,"toc":49688},[49457,49460,49463,49465,49467,49470,49472,49686],[11,49458,1571],{"id":49459},"solidcolor",[15,49461,49462],{},"Fill the canvas with a single solid color",[26901,49464],{"component":1571},[23,49466,26905],{"id":21503},[26907,49468],{":props":49469},"[{\"name\":\"color\",\"type\":\"string\",\"default\":\"#5b18ca\",\"description\":\"The solid color to display\"}]",[23,49471,26913],{"id":26912},[217,49473,49474,49515,49553,49591,49629],{":tabs":1543},[43,49475,49477],{"className":45,"code":49476,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSolidColor\n color=\"#5b18ca\"\n />\n\u003C/Shader>\n",[31,49478,49479,49487,49494,49503,49507],{"__ignoreMap":48},[52,49480,49481,49483,49485],{"class":54,"line":55},[52,49482,59],{"class":58},[52,49484,63],{"class":62},[52,49486,77],{"class":58},[52,49488,49489,49491],{"class":54,"line":80},[52,49490,83],{"class":58},[52,49492,49493],{"class":62},"SolidColor\n",[52,49495,49496,49498,49500],{"class":54,"line":108},[52,49497,7351],{"class":66},[52,49499,70],{"class":58},[52,49501,49502],{"class":73},"\"#5b18ca\"\n",[52,49504,49505],{"class":54,"line":118},[52,49506,1224],{"class":58},[52,49508,49509,49511,49513],{"class":54,"line":594},[52,49510,121],{"class":58},[52,49512,63],{"class":62},[52,49514,77],{"class":58},[43,49516,49517],{"className":360,"code":49476,"language":362,"meta":48,"style":48},[31,49518,49519,49527,49533,49541,49545],{"__ignoreMap":48},[52,49520,49521,49523,49525],{"class":54,"line":55},[52,49522,59],{"class":58},[52,49524,63],{"class":371},[52,49526,77],{"class":58},[52,49528,49529,49531],{"class":54,"line":80},[52,49530,83],{"class":58},[52,49532,49493],{"class":371},[52,49534,49535,49537,49539],{"class":54,"line":108},[52,49536,7351],{"class":66},[52,49538,70],{"class":231},[52,49540,49502],{"class":73},[52,49542,49543],{"class":54,"line":118},[52,49544,1224],{"class":58},[52,49546,49547,49549,49551],{"class":54,"line":594},[52,49548,121],{"class":58},[52,49550,63],{"class":371},[52,49552,77],{"class":58},[43,49554,49555],{"className":2507,"code":49476,"language":2509,"meta":48,"style":48},[31,49556,49557,49565,49571,49579,49583],{"__ignoreMap":48},[52,49558,49559,49561,49563],{"class":54,"line":55},[52,49560,59],{"class":58},[52,49562,63],{"class":371},[52,49564,77],{"class":58},[52,49566,49567,49569],{"class":54,"line":80},[52,49568,83],{"class":58},[52,49570,49493],{"class":371},[52,49572,49573,49575,49577],{"class":54,"line":108},[52,49574,7351],{"class":66},[52,49576,70],{"class":58},[52,49578,49502],{"class":73},[52,49580,49581],{"class":54,"line":118},[52,49582,1224],{"class":58},[52,49584,49585,49587,49589],{"class":54,"line":594},[52,49586,121],{"class":58},[52,49588,63],{"class":371},[52,49590,77],{"class":58},[43,49592,49593],{"className":419,"code":49476,"language":420,"meta":48,"style":48},[31,49594,49595,49603,49609,49617,49621],{"__ignoreMap":48},[52,49596,49597,49599,49601],{"class":54,"line":55},[52,49598,59],{"class":58},[52,49600,63],{"class":371},[52,49602,77],{"class":58},[52,49604,49605,49607],{"class":54,"line":80},[52,49606,83],{"class":58},[52,49608,49493],{"class":371},[52,49610,49611,49613,49615],{"class":54,"line":108},[52,49612,7351],{"class":66},[52,49614,70],{"class":231},[52,49616,49502],{"class":73},[52,49618,49619],{"class":54,"line":118},[52,49620,1224],{"class":58},[52,49622,49623,49625,49627],{"class":54,"line":594},[52,49624,121],{"class":58},[52,49626,63],{"class":371},[52,49628,77],{"class":58},[43,49630,49632],{"className":222,"code":49631,"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,49633,49634,49644,49648,49662,49666,49678,49682],{"__ignoreMap":48},[52,49635,49636,49638,49640,49642],{"class":54,"line":55},[52,49637,232],{"class":231},[52,49639,9231],{"class":58},[52,49641,238],{"class":231},[52,49643,9236],{"class":73},[52,49645,49646],{"class":54,"line":80},[52,49647,597],{"emptyLinePlaceholder":171},[52,49649,49650,49652,49654,49656,49658,49660],{"class":54,"line":108},[52,49651,1721],{"class":231},[52,49653,1724],{"class":371},[52,49655,1727],{"class":231},[52,49657,1730],{"class":231},[52,49659,1733],{"class":66},[52,49661,1736],{"class":58},[52,49663,49664],{"class":54,"line":118},[52,49665,1751],{"class":58},[52,49667,49668,49670,49672,49674,49676],{"class":54,"line":594},[52,49669,1756],{"class":58},[52,49671,1759],{"class":73},[52,49673,1762],{"class":58},[52,49675,1765],{"class":73},[52,49677,1768],{"class":58},[52,49679,49680],{"class":54,"line":600},[52,49681,1773],{"class":58},[52,49683,49684],{"class":54,"line":606},[52,49685,1778],{"class":58},[156,49687,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":49689},[49690,49691],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/solidcolor",{"title":1571,"description":49462},"docs/components/SolidColor","X4VLBOtRswBkBqfzyC6kl47VZwzJAewYIPw2jUpBYnI",{"id":49698,"title":49699,"body":49700,"category":29105,"componentType":20848,"description":49707,"extension":168,"meta":50024,"navigation":171,"path":50025,"requiresChild":171,"seo":50026,"stem":50027,"__hash__":50028},"components/docs/components/Spherize.md","Spherize",{"type":8,"value":49701,"toc":50020},[49702,49705,49708,49710,49712,49715,49717,50018],[11,49703,49699],{"id":49704},"spherize",[15,49706,49707],{},"Map content onto a 3D sphere surface with depth distortion",[26901,49709],{"component":49699},[23,49711,26905],{"id":21503},[26907,49713],{":props":49714},"[{\"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,49716,26913],{"id":26912},[217,49718,49719,49775,49834,49890,49948],{":tabs":1543},[43,49720,49722],{"className":45,"code":49721,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n :radius=\"1\"\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,49723,49724,49732,49739,49747,49751,49759,49767],{"__ignoreMap":48},[52,49725,49726,49728,49730],{"class":54,"line":55},[52,49727,59],{"class":58},[52,49729,63],{"class":62},[52,49731,77],{"class":58},[52,49733,49734,49736],{"class":54,"line":80},[52,49735,83],{"class":58},[52,49737,49738],{"class":62},"Spherize\n",[52,49740,49741,49743,49745],{"class":54,"line":108},[52,49742,14901],{"class":66},[52,49744,70],{"class":58},[52,49746,28827],{"class":73},[52,49748,49749],{"class":54,"line":118},[52,49750,26949],{"class":58},[52,49752,49753,49755,49757],{"class":54,"line":594},[52,49754,2213],{"class":58},[52,49756,2216],{"class":62},[52,49758,105],{"class":58},[52,49760,49761,49763,49765],{"class":54,"line":600},[52,49762,2230],{"class":58},[52,49764,49699],{"class":62},[52,49766,77],{"class":58},[52,49768,49769,49771,49773],{"class":54,"line":606},[52,49770,121],{"class":58},[52,49772,63],{"class":62},[52,49774,77],{"class":58},[43,49776,49778],{"className":360,"code":49777,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CSpherize\n radius={1}\n >\n \u003CCircle />\n \u003C/Spherize>\n\u003C/Shader>\n",[31,49779,49780,49788,49794,49806,49810,49818,49826],{"__ignoreMap":48},[52,49781,49782,49784,49786],{"class":54,"line":55},[52,49783,59],{"class":58},[52,49785,63],{"class":371},[52,49787,77],{"class":58},[52,49789,49790,49792],{"class":54,"line":80},[52,49791,83],{"class":58},[52,49793,49738],{"class":371},[52,49795,49796,49798,49800,49802,49804],{"class":54,"line":108},[52,49797,7361],{"class":66},[52,49799,70],{"class":231},[52,49801,723],{"class":58},[52,49803,6391],{"class":371},[52,49805,729],{"class":58},[52,49807,49808],{"class":54,"line":118},[52,49809,26949],{"class":58},[52,49811,49812,49814,49816],{"class":54,"line":594},[52,49813,2213],{"class":58},[52,49815,2216],{"class":371},[52,49817,105],{"class":58},[52,49819,49820,49822,49824],{"class":54,"line":600},[52,49821,2230],{"class":58},[52,49823,49699],{"class":371},[52,49825,77],{"class":58},[52,49827,49828,49830,49832],{"class":54,"line":606},[52,49829,121],{"class":58},[52,49831,63],{"class":371},[52,49833,77],{"class":58},[43,49835,49836],{"className":2507,"code":49777,"language":2509,"meta":48,"style":48},[31,49837,49838,49846,49852,49862,49866,49874,49882],{"__ignoreMap":48},[52,49839,49840,49842,49844],{"class":54,"line":55},[52,49841,59],{"class":58},[52,49843,63],{"class":371},[52,49845,77],{"class":58},[52,49847,49848,49850],{"class":54,"line":80},[52,49849,83],{"class":58},[52,49851,49738],{"class":371},[52,49853,49854,49856,49858,49860],{"class":54,"line":108},[52,49855,7361],{"class":66},[52,49857,24845],{"class":58},[52,49859,6391],{"class":371},[52,49861,729],{"class":58},[52,49863,49864],{"class":54,"line":118},[52,49865,26949],{"class":58},[52,49867,49868,49870,49872],{"class":54,"line":594},[52,49869,2213],{"class":58},[52,49871,2216],{"class":371},[52,49873,105],{"class":58},[52,49875,49876,49878,49880],{"class":54,"line":600},[52,49877,2230],{"class":58},[52,49879,49699],{"class":371},[52,49881,77],{"class":58},[52,49883,49884,49886,49888],{"class":54,"line":606},[52,49885,121],{"class":58},[52,49887,63],{"class":371},[52,49889,77],{"class":58},[43,49891,49892],{"className":419,"code":49777,"language":420,"meta":48,"style":48},[31,49893,49894,49902,49908,49920,49924,49932,49940],{"__ignoreMap":48},[52,49895,49896,49898,49900],{"class":54,"line":55},[52,49897,59],{"class":58},[52,49899,63],{"class":371},[52,49901,77],{"class":58},[52,49903,49904,49906],{"class":54,"line":80},[52,49905,83],{"class":58},[52,49907,49738],{"class":371},[52,49909,49910,49912,49914,49916,49918],{"class":54,"line":108},[52,49911,7361],{"class":66},[52,49913,70],{"class":231},[52,49915,723],{"class":58},[52,49917,6391],{"class":371},[52,49919,729],{"class":58},[52,49921,49922],{"class":54,"line":118},[52,49923,26949],{"class":58},[52,49925,49926,49928,49930],{"class":54,"line":594},[52,49927,2213],{"class":58},[52,49929,2216],{"class":371},[52,49931,105],{"class":58},[52,49933,49934,49936,49938],{"class":54,"line":600},[52,49935,2230],{"class":58},[52,49937,49699],{"class":371},[52,49939,77],{"class":58},[52,49941,49942,49944,49946],{"class":54,"line":606},[52,49943,121],{"class":58},[52,49945,63],{"class":371},[52,49947,77],{"class":58},[43,49949,49951],{"className":222,"code":49950,"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,49952,49953,49963,49967,49981,49985,49998,50006,50010,50014],{"__ignoreMap":48},[52,49954,49955,49957,49959,49961],{"class":54,"line":55},[52,49956,232],{"class":231},[52,49958,9231],{"class":58},[52,49960,238],{"class":231},[52,49962,9236],{"class":73},[52,49964,49965],{"class":54,"line":80},[52,49966,597],{"emptyLinePlaceholder":171},[52,49968,49969,49971,49973,49975,49977,49979],{"class":54,"line":108},[52,49970,1721],{"class":231},[52,49972,1724],{"class":371},[52,49974,1727],{"class":231},[52,49976,1730],{"class":231},[52,49978,1733],{"class":66},[52,49980,1736],{"class":58},[52,49982,49983],{"class":54,"line":118},[52,49984,1751],{"class":58},[52,49986,49987,49989,49992,49994,49996],{"class":54,"line":594},[52,49988,1756],{"class":58},[52,49990,49991],{"class":73},"'Spherize'",[52,49993,5254],{"class":58},[52,49995,6391],{"class":371},[52,49997,5259],{"class":58},[52,49999,50000,50002,50004],{"class":54,"line":600},[52,50001,4727],{"class":58},[52,50003,2869],{"class":73},[52,50005,2129],{"class":58},[52,50007,50008],{"class":54,"line":606},[52,50009,4744],{"class":58},[52,50011,50012],{"class":54,"line":653},[52,50013,1773],{"class":58},[52,50015,50016],{"class":54,"line":662},[52,50017,1778],{"class":58},[156,50019,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50021},[50022,50023],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spherize",{"title":49699,"description":49707},"docs/components/Spherize","N7zhsA45Urp2cpupaHh47df5WIlmahnA45Kzi_TwfOI",{"id":50030,"title":50031,"body":50032,"category":27760,"componentType":20842,"description":50039,"extension":168,"meta":50224,"navigation":171,"path":50225,"requiresChild":27763,"seo":50226,"stem":50227,"__hash__":50228},"components/docs/components/Spiral.md","Spiral",{"type":8,"value":50033,"toc":50220},[50034,50037,50040,50042,50044,50047,50049,50218],[11,50035,50031],{"id":50036},"spiral",[15,50038,50039],{},"Rotating spiral pattern with animated movement",[26901,50041],{"component":50031},[23,50043,26905],{"id":21503},[26907,50045],{":props":50046},"[{\"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,50048,26913],{"id":26912},[217,50050,50051,50080,50108,50136,50164],{":tabs":1543},[43,50052,50054],{"className":45,"code":50053,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSpiral />\n\u003C/Shader>\n",[31,50055,50056,50064,50072],{"__ignoreMap":48},[52,50057,50058,50060,50062],{"class":54,"line":55},[52,50059,59],{"class":58},[52,50061,63],{"class":62},[52,50063,77],{"class":58},[52,50065,50066,50068,50070],{"class":54,"line":80},[52,50067,83],{"class":58},[52,50069,50031],{"class":62},[52,50071,105],{"class":58},[52,50073,50074,50076,50078],{"class":54,"line":108},[52,50075,121],{"class":58},[52,50077,63],{"class":62},[52,50079,77],{"class":58},[43,50081,50082],{"className":360,"code":50053,"language":362,"meta":48,"style":48},[31,50083,50084,50092,50100],{"__ignoreMap":48},[52,50085,50086,50088,50090],{"class":54,"line":55},[52,50087,59],{"class":58},[52,50089,63],{"class":371},[52,50091,77],{"class":58},[52,50093,50094,50096,50098],{"class":54,"line":80},[52,50095,83],{"class":58},[52,50097,50031],{"class":371},[52,50099,105],{"class":58},[52,50101,50102,50104,50106],{"class":54,"line":108},[52,50103,121],{"class":58},[52,50105,63],{"class":371},[52,50107,77],{"class":58},[43,50109,50110],{"className":2507,"code":50053,"language":2509,"meta":48,"style":48},[31,50111,50112,50120,50128],{"__ignoreMap":48},[52,50113,50114,50116,50118],{"class":54,"line":55},[52,50115,59],{"class":58},[52,50117,63],{"class":371},[52,50119,77],{"class":58},[52,50121,50122,50124,50126],{"class":54,"line":80},[52,50123,83],{"class":58},[52,50125,50031],{"class":371},[52,50127,105],{"class":58},[52,50129,50130,50132,50134],{"class":54,"line":108},[52,50131,121],{"class":58},[52,50133,63],{"class":371},[52,50135,77],{"class":58},[43,50137,50138],{"className":419,"code":50053,"language":420,"meta":48,"style":48},[31,50139,50140,50148,50156],{"__ignoreMap":48},[52,50141,50142,50144,50146],{"class":54,"line":55},[52,50143,59],{"class":58},[52,50145,63],{"class":371},[52,50147,77],{"class":58},[52,50149,50150,50152,50154],{"class":54,"line":80},[52,50151,83],{"class":58},[52,50153,50031],{"class":371},[52,50155,105],{"class":58},[52,50157,50158,50160,50162],{"class":54,"line":108},[52,50159,121],{"class":58},[52,50161,63],{"class":371},[52,50163,77],{"class":58},[43,50165,50167],{"className":222,"code":50166,"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,50168,50169,50179,50183,50197,50201,50210,50214],{"__ignoreMap":48},[52,50170,50171,50173,50175,50177],{"class":54,"line":55},[52,50172,232],{"class":231},[52,50174,9231],{"class":58},[52,50176,238],{"class":231},[52,50178,9236],{"class":73},[52,50180,50181],{"class":54,"line":80},[52,50182,597],{"emptyLinePlaceholder":171},[52,50184,50185,50187,50189,50191,50193,50195],{"class":54,"line":108},[52,50186,1721],{"class":231},[52,50188,1724],{"class":371},[52,50190,1727],{"class":231},[52,50192,1730],{"class":231},[52,50194,1733],{"class":66},[52,50196,1736],{"class":58},[52,50198,50199],{"class":54,"line":118},[52,50200,1751],{"class":58},[52,50202,50203,50205,50208],{"class":54,"line":594},[52,50204,1756],{"class":58},[52,50206,50207],{"class":73},"'Spiral'",[52,50209,2129],{"class":58},[52,50211,50212],{"class":54,"line":600},[52,50213,1773],{"class":58},[52,50215,50216],{"class":54,"line":606},[52,50217,1778],{"class":58},[156,50219,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50221},[50222,50223],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/spiral",{"title":50031,"description":50039},"docs/components/Spiral","Kw0s4_kjmwdOjjelSSgFA0BlCx4Nd4Ng39WHt_5OUww",{"id":50230,"title":50231,"body":50232,"category":30727,"componentType":20842,"description":50239,"extension":168,"meta":50516,"navigation":171,"path":50517,"requiresChild":27763,"seo":50518,"stem":50519,"__hash__":50520},"components/docs/components/Star.md","Star",{"type":8,"value":50233,"toc":50512},[50234,50237,50240,50242,50244,50247,50249,50510],[11,50235,50231],{"id":50236},"star",[15,50238,50239],{},"Classic star polygon with straight sides and sharp pointed tips",[26901,50241],{"component":50231},[23,50243,26905],{"id":21503},[26907,50245],{":props":50246},"[{\"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,50248,26913],{"id":26912},[217,50250,50251,50299,50350,50398,50448],{":tabs":1543},[43,50252,50254],{"className":45,"code":50253,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n :radius=\"0.4\"\n />\n\u003C/Shader>\n",[31,50255,50256,50264,50271,50279,50287,50291],{"__ignoreMap":48},[52,50257,50258,50260,50262],{"class":54,"line":55},[52,50259,59],{"class":58},[52,50261,63],{"class":62},[52,50263,77],{"class":58},[52,50265,50266,50268],{"class":54,"line":80},[52,50267,83],{"class":58},[52,50269,50270],{"class":62},"Star\n",[52,50272,50273,50275,50277],{"class":54,"line":108},[52,50274,7351],{"class":66},[52,50276,70],{"class":58},[52,50278,7307],{"class":73},[52,50280,50281,50283,50285],{"class":54,"line":118},[52,50282,14901],{"class":66},[52,50284,70],{"class":58},[52,50286,36464],{"class":73},[52,50288,50289],{"class":54,"line":594},[52,50290,1224],{"class":58},[52,50292,50293,50295,50297],{"class":54,"line":600},[52,50294,121],{"class":58},[52,50296,63],{"class":62},[52,50298,77],{"class":58},[43,50300,50302],{"className":360,"code":50301,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CStar\n color=\"#ffffff\"\n radius={0.4}\n />\n\u003C/Shader>\n",[31,50303,50304,50312,50318,50326,50338,50342],{"__ignoreMap":48},[52,50305,50306,50308,50310],{"class":54,"line":55},[52,50307,59],{"class":58},[52,50309,63],{"class":371},[52,50311,77],{"class":58},[52,50313,50314,50316],{"class":54,"line":80},[52,50315,83],{"class":58},[52,50317,50270],{"class":371},[52,50319,50320,50322,50324],{"class":54,"line":108},[52,50321,7351],{"class":66},[52,50323,70],{"class":231},[52,50325,7307],{"class":73},[52,50327,50328,50330,50332,50334,50336],{"class":54,"line":118},[52,50329,7361],{"class":66},[52,50331,70],{"class":231},[52,50333,723],{"class":58},[52,50335,5963],{"class":371},[52,50337,729],{"class":58},[52,50339,50340],{"class":54,"line":594},[52,50341,1224],{"class":58},[52,50343,50344,50346,50348],{"class":54,"line":600},[52,50345,121],{"class":58},[52,50347,63],{"class":371},[52,50349,77],{"class":58},[43,50351,50352],{"className":2507,"code":50301,"language":2509,"meta":48,"style":48},[31,50353,50354,50362,50368,50376,50386,50390],{"__ignoreMap":48},[52,50355,50356,50358,50360],{"class":54,"line":55},[52,50357,59],{"class":58},[52,50359,63],{"class":371},[52,50361,77],{"class":58},[52,50363,50364,50366],{"class":54,"line":80},[52,50365,83],{"class":58},[52,50367,50270],{"class":371},[52,50369,50370,50372,50374],{"class":54,"line":108},[52,50371,7351],{"class":66},[52,50373,70],{"class":58},[52,50375,7307],{"class":73},[52,50377,50378,50380,50382,50384],{"class":54,"line":118},[52,50379,7361],{"class":66},[52,50381,24845],{"class":58},[52,50383,5963],{"class":371},[52,50385,729],{"class":58},[52,50387,50388],{"class":54,"line":594},[52,50389,1224],{"class":58},[52,50391,50392,50394,50396],{"class":54,"line":600},[52,50393,121],{"class":58},[52,50395,63],{"class":371},[52,50397,77],{"class":58},[43,50399,50400],{"className":419,"code":50301,"language":420,"meta":48,"style":48},[31,50401,50402,50410,50416,50424,50436,50440],{"__ignoreMap":48},[52,50403,50404,50406,50408],{"class":54,"line":55},[52,50405,59],{"class":58},[52,50407,63],{"class":371},[52,50409,77],{"class":58},[52,50411,50412,50414],{"class":54,"line":80},[52,50413,83],{"class":58},[52,50415,50270],{"class":371},[52,50417,50418,50420,50422],{"class":54,"line":108},[52,50419,7351],{"class":66},[52,50421,70],{"class":231},[52,50423,7307],{"class":73},[52,50425,50426,50428,50430,50432,50434],{"class":54,"line":118},[52,50427,7361],{"class":66},[52,50429,70],{"class":231},[52,50431,723],{"class":58},[52,50433,5963],{"class":371},[52,50435,729],{"class":58},[52,50437,50438],{"class":54,"line":594},[52,50439,1224],{"class":58},[52,50441,50442,50444,50446],{"class":54,"line":600},[52,50443,121],{"class":58},[52,50445,63],{"class":371},[52,50447,77],{"class":58},[43,50449,50451],{"className":222,"code":50450,"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,50452,50453,50463,50467,50481,50485,50502,50506],{"__ignoreMap":48},[52,50454,50455,50457,50459,50461],{"class":54,"line":55},[52,50456,232],{"class":231},[52,50458,9231],{"class":58},[52,50460,238],{"class":231},[52,50462,9236],{"class":73},[52,50464,50465],{"class":54,"line":80},[52,50466,597],{"emptyLinePlaceholder":171},[52,50468,50469,50471,50473,50475,50477,50479],{"class":54,"line":108},[52,50470,1721],{"class":231},[52,50472,1724],{"class":371},[52,50474,1727],{"class":231},[52,50476,1730],{"class":231},[52,50478,1733],{"class":66},[52,50480,1736],{"class":58},[52,50482,50483],{"class":54,"line":118},[52,50484,1751],{"class":58},[52,50486,50487,50489,50492,50494,50496,50498,50500],{"class":54,"line":594},[52,50488,1756],{"class":58},[52,50490,50491],{"class":73},"'Star'",[52,50493,1762],{"class":58},[52,50495,7886],{"class":73},[52,50497,4278],{"class":58},[52,50499,5963],{"class":371},[52,50501,1768],{"class":58},[52,50503,50504],{"class":54,"line":600},[52,50505,1773],{"class":58},[52,50507,50508],{"class":54,"line":606},[52,50509,1778],{"class":58},[156,50511,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":50513},[50514,50515],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/star",{"title":50231,"description":50239},"docs/components/Star","3SRFFO44Nat4ayOLblMts_go0kVkckNa2Wi4oYQPc7w",{"id":50522,"title":50523,"body":50524,"category":27760,"componentType":20842,"description":50531,"extension":168,"meta":50716,"navigation":171,"path":50717,"requiresChild":27763,"seo":50718,"stem":50719,"__hash__":50720},"components/docs/components/Strands.md","Strands",{"type":8,"value":50525,"toc":50712},[50526,50529,50532,50534,50536,50539,50541,50710],[11,50527,50523],{"id":50528},"strands",[15,50530,50531],{},"Procedural wavy strands with layered animation",[26901,50533],{"component":50523},[23,50535,26905],{"id":21503},[26907,50537],{":props":50538},"[{\"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,50540,26913],{"id":26912},[217,50542,50543,50572,50600,50628,50656],{":tabs":1543},[43,50544,50546],{"className":45,"code":50545,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStrands />\n\u003C/Shader>\n",[31,50547,50548,50556,50564],{"__ignoreMap":48},[52,50549,50550,50552,50554],{"class":54,"line":55},[52,50551,59],{"class":58},[52,50553,63],{"class":62},[52,50555,77],{"class":58},[52,50557,50558,50560,50562],{"class":54,"line":80},[52,50559,83],{"class":58},[52,50561,50523],{"class":62},[52,50563,105],{"class":58},[52,50565,50566,50568,50570],{"class":54,"line":108},[52,50567,121],{"class":58},[52,50569,63],{"class":62},[52,50571,77],{"class":58},[43,50573,50574],{"className":360,"code":50545,"language":362,"meta":48,"style":48},[31,50575,50576,50584,50592],{"__ignoreMap":48},[52,50577,50578,50580,50582],{"class":54,"line":55},[52,50579,59],{"class":58},[52,50581,63],{"class":371},[52,50583,77],{"class":58},[52,50585,50586,50588,50590],{"class":54,"line":80},[52,50587,83],{"class":58},[52,50589,50523],{"class":371},[52,50591,105],{"class":58},[52,50593,50594,50596,50598],{"class":54,"line":108},[52,50595,121],{"class":58},[52,50597,63],{"class":371},[52,50599,77],{"class":58},[43,50601,50602],{"className":2507,"code":50545,"language":2509,"meta":48,"style":48},[31,50603,50604,50612,50620],{"__ignoreMap":48},[52,50605,50606,50608,50610],{"class":54,"line":55},[52,50607,59],{"class":58},[52,50609,63],{"class":371},[52,50611,77],{"class":58},[52,50613,50614,50616,50618],{"class":54,"line":80},[52,50615,83],{"class":58},[52,50617,50523],{"class":371},[52,50619,105],{"class":58},[52,50621,50622,50624,50626],{"class":54,"line":108},[52,50623,121],{"class":58},[52,50625,63],{"class":371},[52,50627,77],{"class":58},[43,50629,50630],{"className":419,"code":50545,"language":420,"meta":48,"style":48},[31,50631,50632,50640,50648],{"__ignoreMap":48},[52,50633,50634,50636,50638],{"class":54,"line":55},[52,50635,59],{"class":58},[52,50637,63],{"class":371},[52,50639,77],{"class":58},[52,50641,50642,50644,50646],{"class":54,"line":80},[52,50643,83],{"class":58},[52,50645,50523],{"class":371},[52,50647,105],{"class":58},[52,50649,50650,50652,50654],{"class":54,"line":108},[52,50651,121],{"class":58},[52,50653,63],{"class":371},[52,50655,77],{"class":58},[43,50657,50659],{"className":222,"code":50658,"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,50660,50661,50671,50675,50689,50693,50702,50706],{"__ignoreMap":48},[52,50662,50663,50665,50667,50669],{"class":54,"line":55},[52,50664,232],{"class":231},[52,50666,9231],{"class":58},[52,50668,238],{"class":231},[52,50670,9236],{"class":73},[52,50672,50673],{"class":54,"line":80},[52,50674,597],{"emptyLinePlaceholder":171},[52,50676,50677,50679,50681,50683,50685,50687],{"class":54,"line":108},[52,50678,1721],{"class":231},[52,50680,1724],{"class":371},[52,50682,1727],{"class":231},[52,50684,1730],{"class":231},[52,50686,1733],{"class":66},[52,50688,1736],{"class":58},[52,50690,50691],{"class":54,"line":118},[52,50692,1751],{"class":58},[52,50694,50695,50697,50700],{"class":54,"line":594},[52,50696,1756],{"class":58},[52,50698,50699],{"class":73},"'Strands'",[52,50701,2129],{"class":58},[52,50703,50704],{"class":54,"line":600},[52,50705,1773],{"class":58},[52,50707,50708],{"class":54,"line":606},[52,50709,1778],{"class":58},[156,50711,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50713},[50714,50715],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/strands",{"title":50523,"description":50531},"docs/components/Strands","RADQeaFH0TWI6KkGzgNw_txe3DkuhVlzK5p-6RUTaSM",{"id":50722,"title":50723,"body":50724,"category":29105,"componentType":20848,"description":50730,"extension":168,"meta":50991,"navigation":171,"path":50992,"requiresChild":171,"seo":50993,"stem":50994,"__hash__":50995},"components/docs/components/Stretch.md","Stretch",{"type":8,"value":50725,"toc":50987},[50726,50728,50731,50733,50735,50738,50740,50985],[11,50727,50723],{"id":13646},[15,50729,50730],{},"Stretch content towards a direction from a center point",[26901,50732],{"component":50723},[23,50734,26905],{"id":21503},[26907,50736],{":props":50737},"[{\"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,50739,26913],{"id":26912},[217,50741,50742,50787,50831,50875,50919],{":tabs":1543},[43,50743,50745],{"className":45,"code":50744,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStretch>\n \u003CCircle />\n \u003C/Stretch>\n\u003C/Shader>\n",[31,50746,50747,50755,50763,50771,50779],{"__ignoreMap":48},[52,50748,50749,50751,50753],{"class":54,"line":55},[52,50750,59],{"class":58},[52,50752,63],{"class":62},[52,50754,77],{"class":58},[52,50756,50757,50759,50761],{"class":54,"line":80},[52,50758,83],{"class":58},[52,50760,50723],{"class":62},[52,50762,77],{"class":58},[52,50764,50765,50767,50769],{"class":54,"line":108},[52,50766,2213],{"class":58},[52,50768,2216],{"class":62},[52,50770,105],{"class":58},[52,50772,50773,50775,50777],{"class":54,"line":118},[52,50774,2230],{"class":58},[52,50776,50723],{"class":62},[52,50778,77],{"class":58},[52,50780,50781,50783,50785],{"class":54,"line":594},[52,50782,121],{"class":58},[52,50784,63],{"class":62},[52,50786,77],{"class":58},[43,50788,50789],{"className":360,"code":50744,"language":362,"meta":48,"style":48},[31,50790,50791,50799,50807,50815,50823],{"__ignoreMap":48},[52,50792,50793,50795,50797],{"class":54,"line":55},[52,50794,59],{"class":58},[52,50796,63],{"class":371},[52,50798,77],{"class":58},[52,50800,50801,50803,50805],{"class":54,"line":80},[52,50802,83],{"class":58},[52,50804,50723],{"class":371},[52,50806,77],{"class":58},[52,50808,50809,50811,50813],{"class":54,"line":108},[52,50810,2213],{"class":58},[52,50812,2216],{"class":371},[52,50814,105],{"class":58},[52,50816,50817,50819,50821],{"class":54,"line":118},[52,50818,2230],{"class":58},[52,50820,50723],{"class":371},[52,50822,77],{"class":58},[52,50824,50825,50827,50829],{"class":54,"line":594},[52,50826,121],{"class":58},[52,50828,63],{"class":371},[52,50830,77],{"class":58},[43,50832,50833],{"className":2507,"code":50744,"language":2509,"meta":48,"style":48},[31,50834,50835,50843,50851,50859,50867],{"__ignoreMap":48},[52,50836,50837,50839,50841],{"class":54,"line":55},[52,50838,59],{"class":58},[52,50840,63],{"class":371},[52,50842,77],{"class":58},[52,50844,50845,50847,50849],{"class":54,"line":80},[52,50846,83],{"class":58},[52,50848,50723],{"class":371},[52,50850,77],{"class":58},[52,50852,50853,50855,50857],{"class":54,"line":108},[52,50854,2213],{"class":58},[52,50856,2216],{"class":371},[52,50858,105],{"class":58},[52,50860,50861,50863,50865],{"class":54,"line":118},[52,50862,2230],{"class":58},[52,50864,50723],{"class":371},[52,50866,77],{"class":58},[52,50868,50869,50871,50873],{"class":54,"line":594},[52,50870,121],{"class":58},[52,50872,63],{"class":371},[52,50874,77],{"class":58},[43,50876,50877],{"className":419,"code":50744,"language":420,"meta":48,"style":48},[31,50878,50879,50887,50895,50903,50911],{"__ignoreMap":48},[52,50880,50881,50883,50885],{"class":54,"line":55},[52,50882,59],{"class":58},[52,50884,63],{"class":371},[52,50886,77],{"class":58},[52,50888,50889,50891,50893],{"class":54,"line":80},[52,50890,83],{"class":58},[52,50892,50723],{"class":371},[52,50894,77],{"class":58},[52,50896,50897,50899,50901],{"class":54,"line":108},[52,50898,2213],{"class":58},[52,50900,2216],{"class":371},[52,50902,105],{"class":58},[52,50904,50905,50907,50909],{"class":54,"line":118},[52,50906,2230],{"class":58},[52,50908,50723],{"class":371},[52,50910,77],{"class":58},[52,50912,50913,50915,50917],{"class":54,"line":594},[52,50914,121],{"class":58},[52,50916,63],{"class":371},[52,50918,77],{"class":58},[43,50920,50922],{"className":222,"code":50921,"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,50923,50924,50934,50938,50952,50956,50965,50973,50977,50981],{"__ignoreMap":48},[52,50925,50926,50928,50930,50932],{"class":54,"line":55},[52,50927,232],{"class":231},[52,50929,9231],{"class":58},[52,50931,238],{"class":231},[52,50933,9236],{"class":73},[52,50935,50936],{"class":54,"line":80},[52,50937,597],{"emptyLinePlaceholder":171},[52,50939,50940,50942,50944,50946,50948,50950],{"class":54,"line":108},[52,50941,1721],{"class":231},[52,50943,1724],{"class":371},[52,50945,1727],{"class":231},[52,50947,1730],{"class":231},[52,50949,1733],{"class":66},[52,50951,1736],{"class":58},[52,50953,50954],{"class":54,"line":118},[52,50955,1751],{"class":58},[52,50957,50958,50960,50963],{"class":54,"line":594},[52,50959,1756],{"class":58},[52,50961,50962],{"class":73},"'Stretch'",[52,50964,4722],{"class":58},[52,50966,50967,50969,50971],{"class":54,"line":600},[52,50968,4727],{"class":58},[52,50970,2869],{"class":73},[52,50972,2129],{"class":58},[52,50974,50975],{"class":54,"line":606},[52,50976,4744],{"class":58},[52,50978,50979],{"class":54,"line":653},[52,50980,1773],{"class":58},[52,50982,50983],{"class":54,"line":662},[52,50984,1778],{"class":58},[156,50986,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":50988},[50989,50990],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stretch",{"title":50723,"description":50730},"docs/components/Stretch","5308kfwRXkV7gaXS4ybjfE41fpZZm39AxPAOzg7qDBo",{"id":50997,"title":50998,"body":50999,"category":27760,"componentType":20842,"description":51006,"extension":168,"meta":51191,"navigation":171,"path":51192,"requiresChild":27763,"seo":51193,"stem":51194,"__hash__":51195},"components/docs/components/Stripes.md","Stripes",{"type":8,"value":51000,"toc":51187},[51001,51004,51007,51009,51011,51014,51016,51185],[11,51002,50998],{"id":51003},"stripes",[15,51005,51006],{},"Alternating colored stripes with animation",[26901,51008],{"component":50998},[23,51010,26905],{"id":21503},[26907,51012],{":props":51013},"[{\"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,51015,26913],{"id":26912},[217,51017,51018,51047,51075,51103,51131],{":tabs":1543},[43,51019,51021],{"className":45,"code":51020,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStripes />\n\u003C/Shader>\n",[31,51022,51023,51031,51039],{"__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,50998],{"class":62},[52,51038,105],{"class":58},[52,51040,51041,51043,51045],{"class":54,"line":108},[52,51042,121],{"class":58},[52,51044,63],{"class":62},[52,51046,77],{"class":58},[43,51048,51049],{"className":360,"code":51020,"language":362,"meta":48,"style":48},[31,51050,51051,51059,51067],{"__ignoreMap":48},[52,51052,51053,51055,51057],{"class":54,"line":55},[52,51054,59],{"class":58},[52,51056,63],{"class":371},[52,51058,77],{"class":58},[52,51060,51061,51063,51065],{"class":54,"line":80},[52,51062,83],{"class":58},[52,51064,50998],{"class":371},[52,51066,105],{"class":58},[52,51068,51069,51071,51073],{"class":54,"line":108},[52,51070,121],{"class":58},[52,51072,63],{"class":371},[52,51074,77],{"class":58},[43,51076,51077],{"className":2507,"code":51020,"language":2509,"meta":48,"style":48},[31,51078,51079,51087,51095],{"__ignoreMap":48},[52,51080,51081,51083,51085],{"class":54,"line":55},[52,51082,59],{"class":58},[52,51084,63],{"class":371},[52,51086,77],{"class":58},[52,51088,51089,51091,51093],{"class":54,"line":80},[52,51090,83],{"class":58},[52,51092,50998],{"class":371},[52,51094,105],{"class":58},[52,51096,51097,51099,51101],{"class":54,"line":108},[52,51098,121],{"class":58},[52,51100,63],{"class":371},[52,51102,77],{"class":58},[43,51104,51105],{"className":419,"code":51020,"language":420,"meta":48,"style":48},[31,51106,51107,51115,51123],{"__ignoreMap":48},[52,51108,51109,51111,51113],{"class":54,"line":55},[52,51110,59],{"class":58},[52,51112,63],{"class":371},[52,51114,77],{"class":58},[52,51116,51117,51119,51121],{"class":54,"line":80},[52,51118,83],{"class":58},[52,51120,50998],{"class":371},[52,51122,105],{"class":58},[52,51124,51125,51127,51129],{"class":54,"line":108},[52,51126,121],{"class":58},[52,51128,63],{"class":371},[52,51130,77],{"class":58},[43,51132,51134],{"className":222,"code":51133,"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,51135,51136,51146,51150,51164,51168,51177,51181],{"__ignoreMap":48},[52,51137,51138,51140,51142,51144],{"class":54,"line":55},[52,51139,232],{"class":231},[52,51141,9231],{"class":58},[52,51143,238],{"class":231},[52,51145,9236],{"class":73},[52,51147,51148],{"class":54,"line":80},[52,51149,597],{"emptyLinePlaceholder":171},[52,51151,51152,51154,51156,51158,51160,51162],{"class":54,"line":108},[52,51153,1721],{"class":231},[52,51155,1724],{"class":371},[52,51157,1727],{"class":231},[52,51159,1730],{"class":231},[52,51161,1733],{"class":66},[52,51163,1736],{"class":58},[52,51165,51166],{"class":54,"line":118},[52,51167,1751],{"class":58},[52,51169,51170,51172,51175],{"class":54,"line":594},[52,51171,1756],{"class":58},[52,51173,51174],{"class":73},"'Stripes'",[52,51176,2129],{"class":58},[52,51178,51179],{"class":54,"line":600},[52,51180,1773],{"class":58},[52,51182,51183],{"class":54,"line":606},[52,51184,1778],{"class":58},[156,51186,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51188},[51189,51190],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/stripes",{"title":50998,"description":51006},"docs/components/Stripes","KJCgycegQme4wUxoZnEOD_QKwWR7HjMsdOh4Ong86Bo",{"id":51197,"title":51198,"body":51199,"category":27760,"componentType":20842,"description":51206,"extension":168,"meta":51438,"navigation":171,"path":51439,"requiresChild":27763,"seo":51440,"stem":51441,"__hash__":51442},"components/docs/components/StudioBackground.md","StudioBackground",{"type":8,"value":51200,"toc":51434},[51201,51204,51207,51209,51211,51214,51216,51432],[11,51202,51198],{"id":51203},"studiobackground",[15,51205,51206],{},"Multi-light studio background with ambient motion.",[26901,51208],{"component":51198},[23,51210,26905],{"id":21503},[26907,51212],{":props":51213},"[{\"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,51215,26913],{"id":26912},[217,51217,51218,51259,51297,51335,51373],{":tabs":1543},[43,51219,51221],{"className":45,"code":51220,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CStudioBackground\n color=\"#d8dbec\"\n />\n\u003C/Shader>\n",[31,51222,51223,51231,51238,51247,51251],{"__ignoreMap":48},[52,51224,51225,51227,51229],{"class":54,"line":55},[52,51226,59],{"class":58},[52,51228,63],{"class":62},[52,51230,77],{"class":58},[52,51232,51233,51235],{"class":54,"line":80},[52,51234,83],{"class":58},[52,51236,51237],{"class":62},"StudioBackground\n",[52,51239,51240,51242,51244],{"class":54,"line":108},[52,51241,7351],{"class":66},[52,51243,70],{"class":58},[52,51245,51246],{"class":73},"\"#d8dbec\"\n",[52,51248,51249],{"class":54,"line":118},[52,51250,1224],{"class":58},[52,51252,51253,51255,51257],{"class":54,"line":594},[52,51254,121],{"class":58},[52,51256,63],{"class":62},[52,51258,77],{"class":58},[43,51260,51261],{"className":360,"code":51220,"language":362,"meta":48,"style":48},[31,51262,51263,51271,51277,51285,51289],{"__ignoreMap":48},[52,51264,51265,51267,51269],{"class":54,"line":55},[52,51266,59],{"class":58},[52,51268,63],{"class":371},[52,51270,77],{"class":58},[52,51272,51273,51275],{"class":54,"line":80},[52,51274,83],{"class":58},[52,51276,51237],{"class":371},[52,51278,51279,51281,51283],{"class":54,"line":108},[52,51280,7351],{"class":66},[52,51282,70],{"class":231},[52,51284,51246],{"class":73},[52,51286,51287],{"class":54,"line":118},[52,51288,1224],{"class":58},[52,51290,51291,51293,51295],{"class":54,"line":594},[52,51292,121],{"class":58},[52,51294,63],{"class":371},[52,51296,77],{"class":58},[43,51298,51299],{"className":2507,"code":51220,"language":2509,"meta":48,"style":48},[31,51300,51301,51309,51315,51323,51327],{"__ignoreMap":48},[52,51302,51303,51305,51307],{"class":54,"line":55},[52,51304,59],{"class":58},[52,51306,63],{"class":371},[52,51308,77],{"class":58},[52,51310,51311,51313],{"class":54,"line":80},[52,51312,83],{"class":58},[52,51314,51237],{"class":371},[52,51316,51317,51319,51321],{"class":54,"line":108},[52,51318,7351],{"class":66},[52,51320,70],{"class":58},[52,51322,51246],{"class":73},[52,51324,51325],{"class":54,"line":118},[52,51326,1224],{"class":58},[52,51328,51329,51331,51333],{"class":54,"line":594},[52,51330,121],{"class":58},[52,51332,63],{"class":371},[52,51334,77],{"class":58},[43,51336,51337],{"className":419,"code":51220,"language":420,"meta":48,"style":48},[31,51338,51339,51347,51353,51361,51365],{"__ignoreMap":48},[52,51340,51341,51343,51345],{"class":54,"line":55},[52,51342,59],{"class":58},[52,51344,63],{"class":371},[52,51346,77],{"class":58},[52,51348,51349,51351],{"class":54,"line":80},[52,51350,83],{"class":58},[52,51352,51237],{"class":371},[52,51354,51355,51357,51359],{"class":54,"line":108},[52,51356,7351],{"class":66},[52,51358,70],{"class":231},[52,51360,51246],{"class":73},[52,51362,51363],{"class":54,"line":118},[52,51364,1224],{"class":58},[52,51366,51367,51369,51371],{"class":54,"line":594},[52,51368,121],{"class":58},[52,51370,63],{"class":371},[52,51372,77],{"class":58},[43,51374,51376],{"className":222,"code":51375,"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,51377,51378,51388,51392,51406,51410,51424,51428],{"__ignoreMap":48},[52,51379,51380,51382,51384,51386],{"class":54,"line":55},[52,51381,232],{"class":231},[52,51383,9231],{"class":58},[52,51385,238],{"class":231},[52,51387,9236],{"class":73},[52,51389,51390],{"class":54,"line":80},[52,51391,597],{"emptyLinePlaceholder":171},[52,51393,51394,51396,51398,51400,51402,51404],{"class":54,"line":108},[52,51395,1721],{"class":231},[52,51397,1724],{"class":371},[52,51399,1727],{"class":231},[52,51401,1730],{"class":231},[52,51403,1733],{"class":66},[52,51405,1736],{"class":58},[52,51407,51408],{"class":54,"line":118},[52,51409,1751],{"class":58},[52,51411,51412,51414,51417,51419,51422],{"class":54,"line":594},[52,51413,1756],{"class":58},[52,51415,51416],{"class":73},"'StudioBackground'",[52,51418,1762],{"class":58},[52,51420,51421],{"class":73},"'#d8dbec'",[52,51423,1768],{"class":58},[52,51425,51426],{"class":54,"line":600},[52,51427,1773],{"class":58},[52,51429,51430],{"class":54,"line":606},[52,51431,1778],{"class":58},[156,51433,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51435},[51436,51437],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/studiobackground",{"title":51198,"description":51206},"docs/components/StudioBackground","0gUNDDiFb_OEpbqPtr4uqDBIw0SFAaTlsWIMr2fkfrA",{"id":51444,"title":11722,"body":51445,"category":27760,"componentType":20842,"description":51452,"extension":168,"meta":51637,"navigation":171,"path":51638,"requiresChild":27763,"seo":51639,"stem":51640,"__hash__":51641},"components/docs/components/Swirl.md",{"type":8,"value":51446,"toc":51633},[51447,51450,51453,51455,51457,51460,51462,51631],[11,51448,11722],{"id":51449},"swirl",[15,51451,51452],{},"Flowing swirl pattern with multi-layered noise",[26901,51454],{"component":11722},[23,51456,26905],{"id":21503},[26907,51458],{":props":51459},"[{\"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,51461,26913],{"id":26912},[217,51463,51464,51493,51521,51549,51577],{":tabs":1543},[43,51465,51467],{"className":45,"code":51466,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CSwirl />\n\u003C/Shader>\n",[31,51468,51469,51477,51485],{"__ignoreMap":48},[52,51470,51471,51473,51475],{"class":54,"line":55},[52,51472,59],{"class":58},[52,51474,63],{"class":62},[52,51476,77],{"class":58},[52,51478,51479,51481,51483],{"class":54,"line":80},[52,51480,83],{"class":58},[52,51482,11722],{"class":62},[52,51484,105],{"class":58},[52,51486,51487,51489,51491],{"class":54,"line":108},[52,51488,121],{"class":58},[52,51490,63],{"class":62},[52,51492,77],{"class":58},[43,51494,51495],{"className":360,"code":51466,"language":362,"meta":48,"style":48},[31,51496,51497,51505,51513],{"__ignoreMap":48},[52,51498,51499,51501,51503],{"class":54,"line":55},[52,51500,59],{"class":58},[52,51502,63],{"class":371},[52,51504,77],{"class":58},[52,51506,51507,51509,51511],{"class":54,"line":80},[52,51508,83],{"class":58},[52,51510,11722],{"class":371},[52,51512,105],{"class":58},[52,51514,51515,51517,51519],{"class":54,"line":108},[52,51516,121],{"class":58},[52,51518,63],{"class":371},[52,51520,77],{"class":58},[43,51522,51523],{"className":2507,"code":51466,"language":2509,"meta":48,"style":48},[31,51524,51525,51533,51541],{"__ignoreMap":48},[52,51526,51527,51529,51531],{"class":54,"line":55},[52,51528,59],{"class":58},[52,51530,63],{"class":371},[52,51532,77],{"class":58},[52,51534,51535,51537,51539],{"class":54,"line":80},[52,51536,83],{"class":58},[52,51538,11722],{"class":371},[52,51540,105],{"class":58},[52,51542,51543,51545,51547],{"class":54,"line":108},[52,51544,121],{"class":58},[52,51546,63],{"class":371},[52,51548,77],{"class":58},[43,51550,51551],{"className":419,"code":51466,"language":420,"meta":48,"style":48},[31,51552,51553,51561,51569],{"__ignoreMap":48},[52,51554,51555,51557,51559],{"class":54,"line":55},[52,51556,59],{"class":58},[52,51558,63],{"class":371},[52,51560,77],{"class":58},[52,51562,51563,51565,51567],{"class":54,"line":80},[52,51564,83],{"class":58},[52,51566,11722],{"class":371},[52,51568,105],{"class":58},[52,51570,51571,51573,51575],{"class":54,"line":108},[52,51572,121],{"class":58},[52,51574,63],{"class":371},[52,51576,77],{"class":58},[43,51578,51580],{"className":222,"code":51579,"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,51581,51582,51592,51596,51610,51614,51623,51627],{"__ignoreMap":48},[52,51583,51584,51586,51588,51590],{"class":54,"line":55},[52,51585,232],{"class":231},[52,51587,9231],{"class":58},[52,51589,238],{"class":231},[52,51591,9236],{"class":73},[52,51593,51594],{"class":54,"line":80},[52,51595,597],{"emptyLinePlaceholder":171},[52,51597,51598,51600,51602,51604,51606,51608],{"class":54,"line":108},[52,51599,1721],{"class":231},[52,51601,1724],{"class":371},[52,51603,1727],{"class":231},[52,51605,1730],{"class":231},[52,51607,1733],{"class":66},[52,51609,1736],{"class":58},[52,51611,51612],{"class":54,"line":118},[52,51613,1751],{"class":58},[52,51615,51616,51618,51621],{"class":54,"line":594},[52,51617,1756],{"class":58},[52,51619,51620],{"class":73},"'Swirl'",[52,51622,2129],{"class":58},[52,51624,51625],{"class":54,"line":600},[52,51626,1773],{"class":58},[52,51628,51629],{"class":54,"line":606},[52,51630,1778],{"class":58},[156,51632,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":51634},[51635,51636],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/swirl",{"title":11722,"description":51452},"docs/components/Swirl","eDmTIY7HE5BlMHe0S3m_Agj7q3M-EKXUUpaLDVjcPIE",{"id":51643,"title":51644,"body":51645,"category":27225,"componentType":20848,"description":51652,"extension":168,"meta":51969,"navigation":171,"path":51970,"requiresChild":171,"seo":51971,"stem":51972,"__hash__":51973},"components/docs/components/TiltShift.md","TiltShift",{"type":8,"value":51646,"toc":51965},[51647,51650,51653,51655,51657,51660,51662,51963],[11,51648,51644],{"id":51649},"tiltshift",[15,51651,51652],{},"Selective focus blur mimicking tilt-shift photography",[26901,51654],{"component":51644},[23,51656,26905],{"id":21503},[26907,51658],{":props":51659},"[{\"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,51661,26913],{"id":26912},[217,51663,51664,51720,51779,51835,51893],{":tabs":1543},[43,51665,51667],{"className":45,"code":51666,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n :intensity=\"50\"\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,51668,51669,51677,51684,51692,51696,51704,51712],{"__ignoreMap":48},[52,51670,51671,51673,51675],{"class":54,"line":55},[52,51672,59],{"class":58},[52,51674,63],{"class":62},[52,51676,77],{"class":58},[52,51678,51679,51681],{"class":54,"line":80},[52,51680,83],{"class":58},[52,51682,51683],{"class":62},"TiltShift\n",[52,51685,51686,51688,51690],{"class":54,"line":108},[52,51687,17870],{"class":66},[52,51689,70],{"class":58},[52,51691,28216],{"class":73},[52,51693,51694],{"class":54,"line":118},[52,51695,26949],{"class":58},[52,51697,51698,51700,51702],{"class":54,"line":594},[52,51699,2213],{"class":58},[52,51701,2216],{"class":62},[52,51703,105],{"class":58},[52,51705,51706,51708,51710],{"class":54,"line":600},[52,51707,2230],{"class":58},[52,51709,51644],{"class":62},[52,51711,77],{"class":58},[52,51713,51714,51716,51718],{"class":54,"line":606},[52,51715,121],{"class":58},[52,51717,63],{"class":62},[52,51719,77],{"class":58},[43,51721,51723],{"className":360,"code":51722,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTiltShift\n intensity={50}\n >\n \u003CCircle />\n \u003C/TiltShift>\n\u003C/Shader>\n",[31,51724,51725,51733,51739,51751,51755,51763,51771],{"__ignoreMap":48},[52,51726,51727,51729,51731],{"class":54,"line":55},[52,51728,59],{"class":58},[52,51730,63],{"class":371},[52,51732,77],{"class":58},[52,51734,51735,51737],{"class":54,"line":80},[52,51736,83],{"class":58},[52,51738,51683],{"class":371},[52,51740,51741,51743,51745,51747,51749],{"class":54,"line":108},[52,51742,17981],{"class":66},[52,51744,70],{"class":231},[52,51746,723],{"class":58},[52,51748,28274],{"class":371},[52,51750,729],{"class":58},[52,51752,51753],{"class":54,"line":118},[52,51754,26949],{"class":58},[52,51756,51757,51759,51761],{"class":54,"line":594},[52,51758,2213],{"class":58},[52,51760,2216],{"class":371},[52,51762,105],{"class":58},[52,51764,51765,51767,51769],{"class":54,"line":600},[52,51766,2230],{"class":58},[52,51768,51644],{"class":371},[52,51770,77],{"class":58},[52,51772,51773,51775,51777],{"class":54,"line":606},[52,51774,121],{"class":58},[52,51776,63],{"class":371},[52,51778,77],{"class":58},[43,51780,51781],{"className":2507,"code":51722,"language":2509,"meta":48,"style":48},[31,51782,51783,51791,51797,51807,51811,51819,51827],{"__ignoreMap":48},[52,51784,51785,51787,51789],{"class":54,"line":55},[52,51786,59],{"class":58},[52,51788,63],{"class":371},[52,51790,77],{"class":58},[52,51792,51793,51795],{"class":54,"line":80},[52,51794,83],{"class":58},[52,51796,51683],{"class":371},[52,51798,51799,51801,51803,51805],{"class":54,"line":108},[52,51800,17981],{"class":66},[52,51802,24845],{"class":58},[52,51804,28274],{"class":371},[52,51806,729],{"class":58},[52,51808,51809],{"class":54,"line":118},[52,51810,26949],{"class":58},[52,51812,51813,51815,51817],{"class":54,"line":594},[52,51814,2213],{"class":58},[52,51816,2216],{"class":371},[52,51818,105],{"class":58},[52,51820,51821,51823,51825],{"class":54,"line":600},[52,51822,2230],{"class":58},[52,51824,51644],{"class":371},[52,51826,77],{"class":58},[52,51828,51829,51831,51833],{"class":54,"line":606},[52,51830,121],{"class":58},[52,51832,63],{"class":371},[52,51834,77],{"class":58},[43,51836,51837],{"className":419,"code":51722,"language":420,"meta":48,"style":48},[31,51838,51839,51847,51853,51865,51869,51877,51885],{"__ignoreMap":48},[52,51840,51841,51843,51845],{"class":54,"line":55},[52,51842,59],{"class":58},[52,51844,63],{"class":371},[52,51846,77],{"class":58},[52,51848,51849,51851],{"class":54,"line":80},[52,51850,83],{"class":58},[52,51852,51683],{"class":371},[52,51854,51855,51857,51859,51861,51863],{"class":54,"line":108},[52,51856,17981],{"class":66},[52,51858,70],{"class":231},[52,51860,723],{"class":58},[52,51862,28274],{"class":371},[52,51864,729],{"class":58},[52,51866,51867],{"class":54,"line":118},[52,51868,26949],{"class":58},[52,51870,51871,51873,51875],{"class":54,"line":594},[52,51872,2213],{"class":58},[52,51874,2216],{"class":371},[52,51876,105],{"class":58},[52,51878,51879,51881,51883],{"class":54,"line":600},[52,51880,2230],{"class":58},[52,51882,51644],{"class":371},[52,51884,77],{"class":58},[52,51886,51887,51889,51891],{"class":54,"line":606},[52,51888,121],{"class":58},[52,51890,63],{"class":371},[52,51892,77],{"class":58},[43,51894,51896],{"className":222,"code":51895,"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,51897,51898,51908,51912,51926,51930,51943,51951,51955,51959],{"__ignoreMap":48},[52,51899,51900,51902,51904,51906],{"class":54,"line":55},[52,51901,232],{"class":231},[52,51903,9231],{"class":58},[52,51905,238],{"class":231},[52,51907,9236],{"class":73},[52,51909,51910],{"class":54,"line":80},[52,51911,597],{"emptyLinePlaceholder":171},[52,51913,51914,51916,51918,51920,51922,51924],{"class":54,"line":108},[52,51915,1721],{"class":231},[52,51917,1724],{"class":371},[52,51919,1727],{"class":231},[52,51921,1730],{"class":231},[52,51923,1733],{"class":66},[52,51925,1736],{"class":58},[52,51927,51928],{"class":54,"line":118},[52,51929,1751],{"class":58},[52,51931,51932,51934,51937,51939,51941],{"class":54,"line":594},[52,51933,1756],{"class":58},[52,51935,51936],{"class":73},"'TiltShift'",[52,51938,27194],{"class":58},[52,51940,28274],{"class":371},[52,51942,5259],{"class":58},[52,51944,51945,51947,51949],{"class":54,"line":600},[52,51946,4727],{"class":58},[52,51948,2869],{"class":73},[52,51950,2129],{"class":58},[52,51952,51953],{"class":54,"line":606},[52,51954,4744],{"class":58},[52,51956,51957],{"class":54,"line":653},[52,51958,1773],{"class":58},[52,51960,51961],{"class":54,"line":662},[52,51962,1778],{"class":58},[156,51964,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":51966},[51967,51968],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tiltshift",{"title":51644,"description":51652},"docs/components/TiltShift","8Of_I2dYh9V5MmKDOQiG27pVhaOWNZZR26SLQ1GjF8c",{"id":51975,"title":51976,"body":51977,"category":28771,"componentType":20848,"description":51984,"extension":168,"meta":52292,"navigation":171,"path":52293,"requiresChild":171,"seo":52294,"stem":52295,"__hash__":52296},"components/docs/components/Tint.md","Tint",{"type":8,"value":51978,"toc":52288},[51979,51982,51985,51987,51989,51992,51994,52286],[11,51980,51976],{"id":51981},"tint",[15,51983,51984],{},"Apply a color tint to the image",[26901,51986],{"component":51976},[23,51988,26905],{"id":21503},[26907,51990],{":props":51991},"[{\"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,51993,26913],{"id":26912},[217,51995,51996,52053,52107,52161,52215],{":tabs":1543},[43,51997,51999],{"className":45,"code":51998,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTint\n color=\"#ff8800\"\n >\n \u003CCircle />\n \u003C/Tint>\n\u003C/Shader>\n",[31,52000,52001,52009,52016,52025,52029,52037,52045],{"__ignoreMap":48},[52,52002,52003,52005,52007],{"class":54,"line":55},[52,52004,59],{"class":58},[52,52006,63],{"class":62},[52,52008,77],{"class":58},[52,52010,52011,52013],{"class":54,"line":80},[52,52012,83],{"class":58},[52,52014,52015],{"class":62},"Tint\n",[52,52017,52018,52020,52022],{"class":54,"line":108},[52,52019,7351],{"class":66},[52,52021,70],{"class":58},[52,52023,52024],{"class":73},"\"#ff8800\"\n",[52,52026,52027],{"class":54,"line":118},[52,52028,26949],{"class":58},[52,52030,52031,52033,52035],{"class":54,"line":594},[52,52032,2213],{"class":58},[52,52034,2216],{"class":62},[52,52036,105],{"class":58},[52,52038,52039,52041,52043],{"class":54,"line":600},[52,52040,2230],{"class":58},[52,52042,51976],{"class":62},[52,52044,77],{"class":58},[52,52046,52047,52049,52051],{"class":54,"line":606},[52,52048,121],{"class":58},[52,52050,63],{"class":62},[52,52052,77],{"class":58},[43,52054,52055],{"className":360,"code":51998,"language":362,"meta":48,"style":48},[31,52056,52057,52065,52071,52079,52083,52091,52099],{"__ignoreMap":48},[52,52058,52059,52061,52063],{"class":54,"line":55},[52,52060,59],{"class":58},[52,52062,63],{"class":371},[52,52064,77],{"class":58},[52,52066,52067,52069],{"class":54,"line":80},[52,52068,83],{"class":58},[52,52070,52015],{"class":371},[52,52072,52073,52075,52077],{"class":54,"line":108},[52,52074,7351],{"class":66},[52,52076,70],{"class":231},[52,52078,52024],{"class":73},[52,52080,52081],{"class":54,"line":118},[52,52082,26949],{"class":58},[52,52084,52085,52087,52089],{"class":54,"line":594},[52,52086,2213],{"class":58},[52,52088,2216],{"class":371},[52,52090,105],{"class":58},[52,52092,52093,52095,52097],{"class":54,"line":600},[52,52094,2230],{"class":58},[52,52096,51976],{"class":371},[52,52098,77],{"class":58},[52,52100,52101,52103,52105],{"class":54,"line":606},[52,52102,121],{"class":58},[52,52104,63],{"class":371},[52,52106,77],{"class":58},[43,52108,52109],{"className":2507,"code":51998,"language":2509,"meta":48,"style":48},[31,52110,52111,52119,52125,52133,52137,52145,52153],{"__ignoreMap":48},[52,52112,52113,52115,52117],{"class":54,"line":55},[52,52114,59],{"class":58},[52,52116,63],{"class":371},[52,52118,77],{"class":58},[52,52120,52121,52123],{"class":54,"line":80},[52,52122,83],{"class":58},[52,52124,52015],{"class":371},[52,52126,52127,52129,52131],{"class":54,"line":108},[52,52128,7351],{"class":66},[52,52130,70],{"class":58},[52,52132,52024],{"class":73},[52,52134,52135],{"class":54,"line":118},[52,52136,26949],{"class":58},[52,52138,52139,52141,52143],{"class":54,"line":594},[52,52140,2213],{"class":58},[52,52142,2216],{"class":371},[52,52144,105],{"class":58},[52,52146,52147,52149,52151],{"class":54,"line":600},[52,52148,2230],{"class":58},[52,52150,51976],{"class":371},[52,52152,77],{"class":58},[52,52154,52155,52157,52159],{"class":54,"line":606},[52,52156,121],{"class":58},[52,52158,63],{"class":371},[52,52160,77],{"class":58},[43,52162,52163],{"className":419,"code":51998,"language":420,"meta":48,"style":48},[31,52164,52165,52173,52179,52187,52191,52199,52207],{"__ignoreMap":48},[52,52166,52167,52169,52171],{"class":54,"line":55},[52,52168,59],{"class":58},[52,52170,63],{"class":371},[52,52172,77],{"class":58},[52,52174,52175,52177],{"class":54,"line":80},[52,52176,83],{"class":58},[52,52178,52015],{"class":371},[52,52180,52181,52183,52185],{"class":54,"line":108},[52,52182,7351],{"class":66},[52,52184,70],{"class":231},[52,52186,52024],{"class":73},[52,52188,52189],{"class":54,"line":118},[52,52190,26949],{"class":58},[52,52192,52193,52195,52197],{"class":54,"line":594},[52,52194,2213],{"class":58},[52,52196,2216],{"class":371},[52,52198,105],{"class":58},[52,52200,52201,52203,52205],{"class":54,"line":600},[52,52202,2230],{"class":58},[52,52204,51976],{"class":371},[52,52206,77],{"class":58},[52,52208,52209,52211,52213],{"class":54,"line":606},[52,52210,121],{"class":58},[52,52212,63],{"class":371},[52,52214,77],{"class":58},[43,52216,52218],{"className":222,"code":52217,"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,52219,52220,52230,52234,52248,52252,52266,52274,52278,52282],{"__ignoreMap":48},[52,52221,52222,52224,52226,52228],{"class":54,"line":55},[52,52223,232],{"class":231},[52,52225,9231],{"class":58},[52,52227,238],{"class":231},[52,52229,9236],{"class":73},[52,52231,52232],{"class":54,"line":80},[52,52233,597],{"emptyLinePlaceholder":171},[52,52235,52236,52238,52240,52242,52244,52246],{"class":54,"line":108},[52,52237,1721],{"class":231},[52,52239,1724],{"class":371},[52,52241,1727],{"class":231},[52,52243,1730],{"class":231},[52,52245,1733],{"class":66},[52,52247,1736],{"class":58},[52,52249,52250],{"class":54,"line":118},[52,52251,1751],{"class":58},[52,52253,52254,52256,52259,52261,52264],{"class":54,"line":594},[52,52255,1756],{"class":58},[52,52257,52258],{"class":73},"'Tint'",[52,52260,1762],{"class":58},[52,52262,52263],{"class":73},"'#ff8800'",[52,52265,5259],{"class":58},[52,52267,52268,52270,52272],{"class":54,"line":600},[52,52269,4727],{"class":58},[52,52271,2869],{"class":73},[52,52273,2129],{"class":58},[52,52275,52276],{"class":54,"line":606},[52,52277,4744],{"class":58},[52,52279,52280],{"class":54,"line":653},[52,52281,1773],{"class":58},[52,52283,52284],{"class":54,"line":662},[52,52285,1778],{"class":58},[156,52287,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52289},[52290,52291],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tint",{"title":51976,"description":51984},"docs/components/Tint","d_lJDGy40iiU9pFwkwxFvOwfrUgzKV0iUvdhCbXJw4o",{"id":52298,"title":52299,"body":52300,"category":30727,"componentType":20842,"description":52307,"extension":168,"meta":52537,"navigation":171,"path":52538,"requiresChild":27763,"seo":52539,"stem":52540,"__hash__":52541},"components/docs/components/Trapezoid.md","Trapezoid",{"type":8,"value":52301,"toc":52533},[52302,52305,52308,52310,52312,52315,52317,52531],[11,52303,52299],{"id":52304},"trapezoid",[15,52306,52307],{},"Trapezoid with adjustable top and bottom widths and height",[26901,52309],{"component":52299},[23,52311,26905],{"id":21503},[26907,52313],{":props":52314},"[{\"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,52316,26913],{"id":26912},[217,52318,52319,52359,52397,52435,52473],{":tabs":1543},[43,52320,52322],{"className":45,"code":52321,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTrapezoid\n color=\"#ffffff\"\n />\n\u003C/Shader>\n",[31,52323,52324,52332,52339,52347,52351],{"__ignoreMap":48},[52,52325,52326,52328,52330],{"class":54,"line":55},[52,52327,59],{"class":58},[52,52329,63],{"class":62},[52,52331,77],{"class":58},[52,52333,52334,52336],{"class":54,"line":80},[52,52335,83],{"class":58},[52,52337,52338],{"class":62},"Trapezoid\n",[52,52340,52341,52343,52345],{"class":54,"line":108},[52,52342,7351],{"class":66},[52,52344,70],{"class":58},[52,52346,7307],{"class":73},[52,52348,52349],{"class":54,"line":118},[52,52350,1224],{"class":58},[52,52352,52353,52355,52357],{"class":54,"line":594},[52,52354,121],{"class":58},[52,52356,63],{"class":62},[52,52358,77],{"class":58},[43,52360,52361],{"className":360,"code":52321,"language":362,"meta":48,"style":48},[31,52362,52363,52371,52377,52385,52389],{"__ignoreMap":48},[52,52364,52365,52367,52369],{"class":54,"line":55},[52,52366,59],{"class":58},[52,52368,63],{"class":371},[52,52370,77],{"class":58},[52,52372,52373,52375],{"class":54,"line":80},[52,52374,83],{"class":58},[52,52376,52338],{"class":371},[52,52378,52379,52381,52383],{"class":54,"line":108},[52,52380,7351],{"class":66},[52,52382,70],{"class":231},[52,52384,7307],{"class":73},[52,52386,52387],{"class":54,"line":118},[52,52388,1224],{"class":58},[52,52390,52391,52393,52395],{"class":54,"line":594},[52,52392,121],{"class":58},[52,52394,63],{"class":371},[52,52396,77],{"class":58},[43,52398,52399],{"className":2507,"code":52321,"language":2509,"meta":48,"style":48},[31,52400,52401,52409,52415,52423,52427],{"__ignoreMap":48},[52,52402,52403,52405,52407],{"class":54,"line":55},[52,52404,59],{"class":58},[52,52406,63],{"class":371},[52,52408,77],{"class":58},[52,52410,52411,52413],{"class":54,"line":80},[52,52412,83],{"class":58},[52,52414,52338],{"class":371},[52,52416,52417,52419,52421],{"class":54,"line":108},[52,52418,7351],{"class":66},[52,52420,70],{"class":58},[52,52422,7307],{"class":73},[52,52424,52425],{"class":54,"line":118},[52,52426,1224],{"class":58},[52,52428,52429,52431,52433],{"class":54,"line":594},[52,52430,121],{"class":58},[52,52432,63],{"class":371},[52,52434,77],{"class":58},[43,52436,52437],{"className":419,"code":52321,"language":420,"meta":48,"style":48},[31,52438,52439,52447,52453,52461,52465],{"__ignoreMap":48},[52,52440,52441,52443,52445],{"class":54,"line":55},[52,52442,59],{"class":58},[52,52444,63],{"class":371},[52,52446,77],{"class":58},[52,52448,52449,52451],{"class":54,"line":80},[52,52450,83],{"class":58},[52,52452,52338],{"class":371},[52,52454,52455,52457,52459],{"class":54,"line":108},[52,52456,7351],{"class":66},[52,52458,70],{"class":231},[52,52460,7307],{"class":73},[52,52462,52463],{"class":54,"line":118},[52,52464,1224],{"class":58},[52,52466,52467,52469,52471],{"class":54,"line":594},[52,52468,121],{"class":58},[52,52470,63],{"class":371},[52,52472,77],{"class":58},[43,52474,52476],{"className":222,"code":52475,"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,52477,52478,52488,52492,52506,52510,52523,52527],{"__ignoreMap":48},[52,52479,52480,52482,52484,52486],{"class":54,"line":55},[52,52481,232],{"class":231},[52,52483,9231],{"class":58},[52,52485,238],{"class":231},[52,52487,9236],{"class":73},[52,52489,52490],{"class":54,"line":80},[52,52491,597],{"emptyLinePlaceholder":171},[52,52493,52494,52496,52498,52500,52502,52504],{"class":54,"line":108},[52,52495,1721],{"class":231},[52,52497,1724],{"class":371},[52,52499,1727],{"class":231},[52,52501,1730],{"class":231},[52,52503,1733],{"class":66},[52,52505,1736],{"class":58},[52,52507,52508],{"class":54,"line":118},[52,52509,1751],{"class":58},[52,52511,52512,52514,52517,52519,52521],{"class":54,"line":594},[52,52513,1756],{"class":58},[52,52515,52516],{"class":73},"'Trapezoid'",[52,52518,1762],{"class":58},[52,52520,7886],{"class":73},[52,52522,1768],{"class":58},[52,52524,52525],{"class":54,"line":600},[52,52526,1773],{"class":58},[52,52528,52529],{"class":54,"line":606},[52,52530,1778],{"class":58},[156,52532,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":52534},[52535,52536],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/trapezoid",{"title":52299,"description":52307},"docs/components/Trapezoid","prEbcmrlAeEPhJsK8NE-tthOFP0Q6HU3r4LsrFJsoWc",{"id":52543,"title":52544,"body":52545,"category":28771,"componentType":20848,"description":52552,"extension":168,"meta":52813,"navigation":171,"path":52814,"requiresChild":171,"seo":52815,"stem":52816,"__hash__":52817},"components/docs/components/Tritone.md","Tritone",{"type":8,"value":52546,"toc":52809},[52547,52550,52553,52555,52557,52560,52562,52807],[11,52548,52544],{"id":52549},"tritone",[15,52551,52552],{},"Map colors to three tones: shadows, midtones, highlights",[26901,52554],{"component":52544},[23,52556,26905],{"id":21503},[26907,52558],{":props":52559},"[{\"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,52561,26913],{"id":26912},[217,52563,52564,52609,52653,52697,52741],{":tabs":1543},[43,52565,52567],{"className":45,"code":52566,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTritone>\n \u003CCircle />\n \u003C/Tritone>\n\u003C/Shader>\n",[31,52568,52569,52577,52585,52593,52601],{"__ignoreMap":48},[52,52570,52571,52573,52575],{"class":54,"line":55},[52,52572,59],{"class":58},[52,52574,63],{"class":62},[52,52576,77],{"class":58},[52,52578,52579,52581,52583],{"class":54,"line":80},[52,52580,83],{"class":58},[52,52582,52544],{"class":62},[52,52584,77],{"class":58},[52,52586,52587,52589,52591],{"class":54,"line":108},[52,52588,2213],{"class":58},[52,52590,2216],{"class":62},[52,52592,105],{"class":58},[52,52594,52595,52597,52599],{"class":54,"line":118},[52,52596,2230],{"class":58},[52,52598,52544],{"class":62},[52,52600,77],{"class":58},[52,52602,52603,52605,52607],{"class":54,"line":594},[52,52604,121],{"class":58},[52,52606,63],{"class":62},[52,52608,77],{"class":58},[43,52610,52611],{"className":360,"code":52566,"language":362,"meta":48,"style":48},[31,52612,52613,52621,52629,52637,52645],{"__ignoreMap":48},[52,52614,52615,52617,52619],{"class":54,"line":55},[52,52616,59],{"class":58},[52,52618,63],{"class":371},[52,52620,77],{"class":58},[52,52622,52623,52625,52627],{"class":54,"line":80},[52,52624,83],{"class":58},[52,52626,52544],{"class":371},[52,52628,77],{"class":58},[52,52630,52631,52633,52635],{"class":54,"line":108},[52,52632,2213],{"class":58},[52,52634,2216],{"class":371},[52,52636,105],{"class":58},[52,52638,52639,52641,52643],{"class":54,"line":118},[52,52640,2230],{"class":58},[52,52642,52544],{"class":371},[52,52644,77],{"class":58},[52,52646,52647,52649,52651],{"class":54,"line":594},[52,52648,121],{"class":58},[52,52650,63],{"class":371},[52,52652,77],{"class":58},[43,52654,52655],{"className":2507,"code":52566,"language":2509,"meta":48,"style":48},[31,52656,52657,52665,52673,52681,52689],{"__ignoreMap":48},[52,52658,52659,52661,52663],{"class":54,"line":55},[52,52660,59],{"class":58},[52,52662,63],{"class":371},[52,52664,77],{"class":58},[52,52666,52667,52669,52671],{"class":54,"line":80},[52,52668,83],{"class":58},[52,52670,52544],{"class":371},[52,52672,77],{"class":58},[52,52674,52675,52677,52679],{"class":54,"line":108},[52,52676,2213],{"class":58},[52,52678,2216],{"class":371},[52,52680,105],{"class":58},[52,52682,52683,52685,52687],{"class":54,"line":118},[52,52684,2230],{"class":58},[52,52686,52544],{"class":371},[52,52688,77],{"class":58},[52,52690,52691,52693,52695],{"class":54,"line":594},[52,52692,121],{"class":58},[52,52694,63],{"class":371},[52,52696,77],{"class":58},[43,52698,52699],{"className":419,"code":52566,"language":420,"meta":48,"style":48},[31,52700,52701,52709,52717,52725,52733],{"__ignoreMap":48},[52,52702,52703,52705,52707],{"class":54,"line":55},[52,52704,59],{"class":58},[52,52706,63],{"class":371},[52,52708,77],{"class":58},[52,52710,52711,52713,52715],{"class":54,"line":80},[52,52712,83],{"class":58},[52,52714,52544],{"class":371},[52,52716,77],{"class":58},[52,52718,52719,52721,52723],{"class":54,"line":108},[52,52720,2213],{"class":58},[52,52722,2216],{"class":371},[52,52724,105],{"class":58},[52,52726,52727,52729,52731],{"class":54,"line":118},[52,52728,2230],{"class":58},[52,52730,52544],{"class":371},[52,52732,77],{"class":58},[52,52734,52735,52737,52739],{"class":54,"line":594},[52,52736,121],{"class":58},[52,52738,63],{"class":371},[52,52740,77],{"class":58},[43,52742,52744],{"className":222,"code":52743,"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,52745,52746,52756,52760,52774,52778,52787,52795,52799,52803],{"__ignoreMap":48},[52,52747,52748,52750,52752,52754],{"class":54,"line":55},[52,52749,232],{"class":231},[52,52751,9231],{"class":58},[52,52753,238],{"class":231},[52,52755,9236],{"class":73},[52,52757,52758],{"class":54,"line":80},[52,52759,597],{"emptyLinePlaceholder":171},[52,52761,52762,52764,52766,52768,52770,52772],{"class":54,"line":108},[52,52763,1721],{"class":231},[52,52765,1724],{"class":371},[52,52767,1727],{"class":231},[52,52769,1730],{"class":231},[52,52771,1733],{"class":66},[52,52773,1736],{"class":58},[52,52775,52776],{"class":54,"line":118},[52,52777,1751],{"class":58},[52,52779,52780,52782,52785],{"class":54,"line":594},[52,52781,1756],{"class":58},[52,52783,52784],{"class":73},"'Tritone'",[52,52786,4722],{"class":58},[52,52788,52789,52791,52793],{"class":54,"line":600},[52,52790,4727],{"class":58},[52,52792,2869],{"class":73},[52,52794,2129],{"class":58},[52,52796,52797],{"class":54,"line":606},[52,52798,4744],{"class":58},[52,52800,52801],{"class":54,"line":653},[52,52802,1773],{"class":58},[52,52804,52805],{"class":54,"line":662},[52,52806,1778],{"class":58},[156,52808,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":52810},[52811,52812],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/tritone",{"title":52544,"description":52552},"docs/components/Tritone","Xtx76T5Qm6-BmGqRwN1cz_1s7sWm5deAa7lySe-xeOM",{"id":52819,"title":52820,"body":52821,"category":27760,"componentType":20842,"description":52828,"extension":168,"meta":53013,"navigation":171,"path":53014,"requiresChild":27763,"seo":53015,"stem":53016,"__hash__":53017},"components/docs/components/Truchet.md","Truchet",{"type":8,"value":52822,"toc":53009},[52823,52826,52829,52831,52833,52836,52838,53007],[11,52824,52820],{"id":52825},"truchet",[15,52827,52828],{},"Quarter-circle arc tiles that connect to form organic, maze-like flowing curves",[26901,52830],{"component":52820},[23,52832,26905],{"id":21503},[26907,52834],{":props":52835},"[{\"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,52837,26913],{"id":26912},[217,52839,52840,52869,52897,52925,52953],{":tabs":1543},[43,52841,52843],{"className":45,"code":52842,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTruchet />\n\u003C/Shader>\n",[31,52844,52845,52853,52861],{"__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,105],{"class":58},[52,52862,52863,52865,52867],{"class":54,"line":108},[52,52864,121],{"class":58},[52,52866,63],{"class":62},[52,52868,77],{"class":58},[43,52870,52871],{"className":360,"code":52842,"language":362,"meta":48,"style":48},[31,52872,52873,52881,52889],{"__ignoreMap":48},[52,52874,52875,52877,52879],{"class":54,"line":55},[52,52876,59],{"class":58},[52,52878,63],{"class":371},[52,52880,77],{"class":58},[52,52882,52883,52885,52887],{"class":54,"line":80},[52,52884,83],{"class":58},[52,52886,52820],{"class":371},[52,52888,105],{"class":58},[52,52890,52891,52893,52895],{"class":54,"line":108},[52,52892,121],{"class":58},[52,52894,63],{"class":371},[52,52896,77],{"class":58},[43,52898,52899],{"className":2507,"code":52842,"language":2509,"meta":48,"style":48},[31,52900,52901,52909,52917],{"__ignoreMap":48},[52,52902,52903,52905,52907],{"class":54,"line":55},[52,52904,59],{"class":58},[52,52906,63],{"class":371},[52,52908,77],{"class":58},[52,52910,52911,52913,52915],{"class":54,"line":80},[52,52912,83],{"class":58},[52,52914,52820],{"class":371},[52,52916,105],{"class":58},[52,52918,52919,52921,52923],{"class":54,"line":108},[52,52920,121],{"class":58},[52,52922,63],{"class":371},[52,52924,77],{"class":58},[43,52926,52927],{"className":419,"code":52842,"language":420,"meta":48,"style":48},[31,52928,52929,52937,52945],{"__ignoreMap":48},[52,52930,52931,52933,52935],{"class":54,"line":55},[52,52932,59],{"class":58},[52,52934,63],{"class":371},[52,52936,77],{"class":58},[52,52938,52939,52941,52943],{"class":54,"line":80},[52,52940,83],{"class":58},[52,52942,52820],{"class":371},[52,52944,105],{"class":58},[52,52946,52947,52949,52951],{"class":54,"line":108},[52,52948,121],{"class":58},[52,52950,63],{"class":371},[52,52952,77],{"class":58},[43,52954,52956],{"className":222,"code":52955,"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,52957,52958,52968,52972,52986,52990,52999,53003],{"__ignoreMap":48},[52,52959,52960,52962,52964,52966],{"class":54,"line":55},[52,52961,232],{"class":231},[52,52963,9231],{"class":58},[52,52965,238],{"class":231},[52,52967,9236],{"class":73},[52,52969,52970],{"class":54,"line":80},[52,52971,597],{"emptyLinePlaceholder":171},[52,52973,52974,52976,52978,52980,52982,52984],{"class":54,"line":108},[52,52975,1721],{"class":231},[52,52977,1724],{"class":371},[52,52979,1727],{"class":231},[52,52981,1730],{"class":231},[52,52983,1733],{"class":66},[52,52985,1736],{"class":58},[52,52987,52988],{"class":54,"line":118},[52,52989,1751],{"class":58},[52,52991,52992,52994,52997],{"class":54,"line":594},[52,52993,1756],{"class":58},[52,52995,52996],{"class":73},"'Truchet'",[52,52998,2129],{"class":58},[52,53000,53001],{"class":54,"line":600},[52,53002,1773],{"class":58},[52,53004,53005],{"class":54,"line":606},[52,53006,1778],{"class":58},[156,53008,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53010},[53011,53012],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/truchet",{"title":52820,"description":52828},"docs/components/Truchet","1b9Ug0JlbIOrBWiNxHJ5jz7SO7u03zKzEuRNfQt3GII",{"id":53019,"title":53020,"body":53021,"category":29105,"componentType":20848,"description":53028,"extension":168,"meta":53345,"navigation":171,"path":53346,"requiresChild":171,"seo":53347,"stem":53348,"__hash__":53349},"components/docs/components/Twirl.md","Twirl",{"type":8,"value":53022,"toc":53341},[53023,53026,53029,53031,53033,53036,53038,53339],[11,53024,53020],{"id":53025},"twirl",[15,53027,53028],{},"Rotate and twist content around a center point",[26901,53030],{"component":53020},[23,53032,26905],{"id":21503},[26907,53034],{":props":53035},"[{\"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,53037,26913],{"id":26912},[217,53039,53040,53096,53155,53211,53269],{":tabs":1543},[43,53041,53043],{"className":45,"code":53042,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n :intensity=\"1\"\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,53044,53045,53053,53060,53068,53072,53080,53088],{"__ignoreMap":48},[52,53046,53047,53049,53051],{"class":54,"line":55},[52,53048,59],{"class":58},[52,53050,63],{"class":62},[52,53052,77],{"class":58},[52,53054,53055,53057],{"class":54,"line":80},[52,53056,83],{"class":58},[52,53058,53059],{"class":62},"Twirl\n",[52,53061,53062,53064,53066],{"class":54,"line":108},[52,53063,17870],{"class":66},[52,53065,70],{"class":58},[52,53067,28827],{"class":73},[52,53069,53070],{"class":54,"line":118},[52,53071,26949],{"class":58},[52,53073,53074,53076,53078],{"class":54,"line":594},[52,53075,2213],{"class":58},[52,53077,2216],{"class":62},[52,53079,105],{"class":58},[52,53081,53082,53084,53086],{"class":54,"line":600},[52,53083,2230],{"class":58},[52,53085,53020],{"class":62},[52,53087,77],{"class":58},[52,53089,53090,53092,53094],{"class":54,"line":606},[52,53091,121],{"class":58},[52,53093,63],{"class":62},[52,53095,77],{"class":58},[43,53097,53099],{"className":360,"code":53098,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CTwirl\n intensity={1}\n >\n \u003CCircle />\n \u003C/Twirl>\n\u003C/Shader>\n",[31,53100,53101,53109,53115,53127,53131,53139,53147],{"__ignoreMap":48},[52,53102,53103,53105,53107],{"class":54,"line":55},[52,53104,59],{"class":58},[52,53106,63],{"class":371},[52,53108,77],{"class":58},[52,53110,53111,53113],{"class":54,"line":80},[52,53112,83],{"class":58},[52,53114,53059],{"class":371},[52,53116,53117,53119,53121,53123,53125],{"class":54,"line":108},[52,53118,17981],{"class":66},[52,53120,70],{"class":231},[52,53122,723],{"class":58},[52,53124,6391],{"class":371},[52,53126,729],{"class":58},[52,53128,53129],{"class":54,"line":118},[52,53130,26949],{"class":58},[52,53132,53133,53135,53137],{"class":54,"line":594},[52,53134,2213],{"class":58},[52,53136,2216],{"class":371},[52,53138,105],{"class":58},[52,53140,53141,53143,53145],{"class":54,"line":600},[52,53142,2230],{"class":58},[52,53144,53020],{"class":371},[52,53146,77],{"class":58},[52,53148,53149,53151,53153],{"class":54,"line":606},[52,53150,121],{"class":58},[52,53152,63],{"class":371},[52,53154,77],{"class":58},[43,53156,53157],{"className":2507,"code":53098,"language":2509,"meta":48,"style":48},[31,53158,53159,53167,53173,53183,53187,53195,53203],{"__ignoreMap":48},[52,53160,53161,53163,53165],{"class":54,"line":55},[52,53162,59],{"class":58},[52,53164,63],{"class":371},[52,53166,77],{"class":58},[52,53168,53169,53171],{"class":54,"line":80},[52,53170,83],{"class":58},[52,53172,53059],{"class":371},[52,53174,53175,53177,53179,53181],{"class":54,"line":108},[52,53176,17981],{"class":66},[52,53178,24845],{"class":58},[52,53180,6391],{"class":371},[52,53182,729],{"class":58},[52,53184,53185],{"class":54,"line":118},[52,53186,26949],{"class":58},[52,53188,53189,53191,53193],{"class":54,"line":594},[52,53190,2213],{"class":58},[52,53192,2216],{"class":371},[52,53194,105],{"class":58},[52,53196,53197,53199,53201],{"class":54,"line":600},[52,53198,2230],{"class":58},[52,53200,53020],{"class":371},[52,53202,77],{"class":58},[52,53204,53205,53207,53209],{"class":54,"line":606},[52,53206,121],{"class":58},[52,53208,63],{"class":371},[52,53210,77],{"class":58},[43,53212,53213],{"className":419,"code":53098,"language":420,"meta":48,"style":48},[31,53214,53215,53223,53229,53241,53245,53253,53261],{"__ignoreMap":48},[52,53216,53217,53219,53221],{"class":54,"line":55},[52,53218,59],{"class":58},[52,53220,63],{"class":371},[52,53222,77],{"class":58},[52,53224,53225,53227],{"class":54,"line":80},[52,53226,83],{"class":58},[52,53228,53059],{"class":371},[52,53230,53231,53233,53235,53237,53239],{"class":54,"line":108},[52,53232,17981],{"class":66},[52,53234,70],{"class":231},[52,53236,723],{"class":58},[52,53238,6391],{"class":371},[52,53240,729],{"class":58},[52,53242,53243],{"class":54,"line":118},[52,53244,26949],{"class":58},[52,53246,53247,53249,53251],{"class":54,"line":594},[52,53248,2213],{"class":58},[52,53250,2216],{"class":371},[52,53252,105],{"class":58},[52,53254,53255,53257,53259],{"class":54,"line":600},[52,53256,2230],{"class":58},[52,53258,53020],{"class":371},[52,53260,77],{"class":58},[52,53262,53263,53265,53267],{"class":54,"line":606},[52,53264,121],{"class":58},[52,53266,63],{"class":371},[52,53268,77],{"class":58},[43,53270,53272],{"className":222,"code":53271,"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,53273,53274,53284,53288,53302,53306,53319,53327,53331,53335],{"__ignoreMap":48},[52,53275,53276,53278,53280,53282],{"class":54,"line":55},[52,53277,232],{"class":231},[52,53279,9231],{"class":58},[52,53281,238],{"class":231},[52,53283,9236],{"class":73},[52,53285,53286],{"class":54,"line":80},[52,53287,597],{"emptyLinePlaceholder":171},[52,53289,53290,53292,53294,53296,53298,53300],{"class":54,"line":108},[52,53291,1721],{"class":231},[52,53293,1724],{"class":371},[52,53295,1727],{"class":231},[52,53297,1730],{"class":231},[52,53299,1733],{"class":66},[52,53301,1736],{"class":58},[52,53303,53304],{"class":54,"line":118},[52,53305,1751],{"class":58},[52,53307,53308,53310,53313,53315,53317],{"class":54,"line":594},[52,53309,1756],{"class":58},[52,53311,53312],{"class":73},"'Twirl'",[52,53314,27194],{"class":58},[52,53316,6391],{"class":371},[52,53318,5259],{"class":58},[52,53320,53321,53323,53325],{"class":54,"line":600},[52,53322,4727],{"class":58},[52,53324,2869],{"class":73},[52,53326,2129],{"class":58},[52,53328,53329],{"class":54,"line":606},[52,53330,4744],{"class":58},[52,53332,53333],{"class":54,"line":653},[52,53334,1773],{"class":58},[52,53336,53337],{"class":54,"line":662},[52,53338,1778],{"class":58},[156,53340,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53342},[53343,53344],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/twirl",{"title":53020,"description":53028},"docs/components/Twirl","u-X5BkzrDfT8THNiJ5Gb7WxPuCZwSpJ58omZgyOcbVg",{"id":53351,"title":53352,"body":53353,"category":27503,"componentType":20848,"description":53360,"extension":168,"meta":53621,"navigation":171,"path":53622,"requiresChild":171,"seo":53623,"stem":53624,"__hash__":53625},"components/docs/components/VHS.md","VHS",{"type":8,"value":53354,"toc":53617},[53355,53358,53361,53363,53365,53368,53370,53615],[11,53356,53352],{"id":53357},"vhs",[15,53359,53360],{},"Analog VHS tape with intermittent tape damage, chroma bleed, and per-scanline noise",[26901,53362],{"component":53352},[23,53364,26905],{"id":21503},[26907,53366],{":props":53367},"[{\"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,53369,26913],{"id":26912},[217,53371,53372,53417,53461,53505,53549],{":tabs":1543},[43,53373,53375],{"className":45,"code":53374,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVHS>\n \u003CCircle />\n \u003C/VHS>\n\u003C/Shader>\n",[31,53376,53377,53385,53393,53401,53409],{"__ignoreMap":48},[52,53378,53379,53381,53383],{"class":54,"line":55},[52,53380,59],{"class":58},[52,53382,63],{"class":62},[52,53384,77],{"class":58},[52,53386,53387,53389,53391],{"class":54,"line":80},[52,53388,83],{"class":58},[52,53390,53352],{"class":62},[52,53392,77],{"class":58},[52,53394,53395,53397,53399],{"class":54,"line":108},[52,53396,2213],{"class":58},[52,53398,2216],{"class":62},[52,53400,105],{"class":58},[52,53402,53403,53405,53407],{"class":54,"line":118},[52,53404,2230],{"class":58},[52,53406,53352],{"class":62},[52,53408,77],{"class":58},[52,53410,53411,53413,53415],{"class":54,"line":594},[52,53412,121],{"class":58},[52,53414,63],{"class":62},[52,53416,77],{"class":58},[43,53418,53419],{"className":360,"code":53374,"language":362,"meta":48,"style":48},[31,53420,53421,53429,53437,53445,53453],{"__ignoreMap":48},[52,53422,53423,53425,53427],{"class":54,"line":55},[52,53424,59],{"class":58},[52,53426,63],{"class":371},[52,53428,77],{"class":58},[52,53430,53431,53433,53435],{"class":54,"line":80},[52,53432,83],{"class":58},[52,53434,53352],{"class":371},[52,53436,77],{"class":58},[52,53438,53439,53441,53443],{"class":54,"line":108},[52,53440,2213],{"class":58},[52,53442,2216],{"class":371},[52,53444,105],{"class":58},[52,53446,53447,53449,53451],{"class":54,"line":118},[52,53448,2230],{"class":58},[52,53450,53352],{"class":371},[52,53452,77],{"class":58},[52,53454,53455,53457,53459],{"class":54,"line":594},[52,53456,121],{"class":58},[52,53458,63],{"class":371},[52,53460,77],{"class":58},[43,53462,53463],{"className":2507,"code":53374,"language":2509,"meta":48,"style":48},[31,53464,53465,53473,53481,53489,53497],{"__ignoreMap":48},[52,53466,53467,53469,53471],{"class":54,"line":55},[52,53468,59],{"class":58},[52,53470,63],{"class":371},[52,53472,77],{"class":58},[52,53474,53475,53477,53479],{"class":54,"line":80},[52,53476,83],{"class":58},[52,53478,53352],{"class":371},[52,53480,77],{"class":58},[52,53482,53483,53485,53487],{"class":54,"line":108},[52,53484,2213],{"class":58},[52,53486,2216],{"class":371},[52,53488,105],{"class":58},[52,53490,53491,53493,53495],{"class":54,"line":118},[52,53492,2230],{"class":58},[52,53494,53352],{"class":371},[52,53496,77],{"class":58},[52,53498,53499,53501,53503],{"class":54,"line":594},[52,53500,121],{"class":58},[52,53502,63],{"class":371},[52,53504,77],{"class":58},[43,53506,53507],{"className":419,"code":53374,"language":420,"meta":48,"style":48},[31,53508,53509,53517,53525,53533,53541],{"__ignoreMap":48},[52,53510,53511,53513,53515],{"class":54,"line":55},[52,53512,59],{"class":58},[52,53514,63],{"class":371},[52,53516,77],{"class":58},[52,53518,53519,53521,53523],{"class":54,"line":80},[52,53520,83],{"class":58},[52,53522,53352],{"class":371},[52,53524,77],{"class":58},[52,53526,53527,53529,53531],{"class":54,"line":108},[52,53528,2213],{"class":58},[52,53530,2216],{"class":371},[52,53532,105],{"class":58},[52,53534,53535,53537,53539],{"class":54,"line":118},[52,53536,2230],{"class":58},[52,53538,53352],{"class":371},[52,53540,77],{"class":58},[52,53542,53543,53545,53547],{"class":54,"line":594},[52,53544,121],{"class":58},[52,53546,63],{"class":371},[52,53548,77],{"class":58},[43,53550,53552],{"className":222,"code":53551,"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,53553,53554,53564,53568,53582,53586,53595,53603,53607,53611],{"__ignoreMap":48},[52,53555,53556,53558,53560,53562],{"class":54,"line":55},[52,53557,232],{"class":231},[52,53559,9231],{"class":58},[52,53561,238],{"class":231},[52,53563,9236],{"class":73},[52,53565,53566],{"class":54,"line":80},[52,53567,597],{"emptyLinePlaceholder":171},[52,53569,53570,53572,53574,53576,53578,53580],{"class":54,"line":108},[52,53571,1721],{"class":231},[52,53573,1724],{"class":371},[52,53575,1727],{"class":231},[52,53577,1730],{"class":231},[52,53579,1733],{"class":66},[52,53581,1736],{"class":58},[52,53583,53584],{"class":54,"line":118},[52,53585,1751],{"class":58},[52,53587,53588,53590,53593],{"class":54,"line":594},[52,53589,1756],{"class":58},[52,53591,53592],{"class":73},"'VHS'",[52,53594,4722],{"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,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":53618},[53619,53620],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vhs",{"title":53352,"description":53360},"docs/components/VHS","1FmiiObSX7u36_e9XMmORQvNMu5GC_tIvfCUI_sbHxU",{"id":53627,"title":53628,"body":53629,"category":30727,"componentType":20842,"description":53636,"extension":168,"meta":53913,"navigation":171,"path":53914,"requiresChild":27763,"seo":53915,"stem":53916,"__hash__":53917},"components/docs/components/Vesica.md","Vesica",{"type":8,"value":53630,"toc":53909},[53631,53634,53637,53639,53641,53644,53646,53907],[11,53632,53628],{"id":53633},"vesica",[15,53635,53636],{},"Vesica piscis (lens shape) formed by the intersection of two overlapping circles",[26901,53638],{"component":53628},[23,53640,26905],{"id":21503},[26907,53642],{":props":53643},"[{\"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,53645,26913],{"id":26912},[217,53647,53648,53696,53747,53795,53845],{":tabs":1543},[43,53649,53651],{"className":45,"code":53650,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n :radius=\"0.35\"\n />\n\u003C/Shader>\n",[31,53652,53653,53661,53668,53676,53684,53688],{"__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],{"class":54,"line":80},[52,53664,83],{"class":58},[52,53666,53667],{"class":62},"Vesica\n",[52,53669,53670,53672,53674],{"class":54,"line":108},[52,53671,7351],{"class":66},[52,53673,70],{"class":58},[52,53675,7307],{"class":73},[52,53677,53678,53680,53682],{"class":54,"line":118},[52,53679,14901],{"class":66},[52,53681,70],{"class":58},[52,53683,31892],{"class":73},[52,53685,53686],{"class":54,"line":594},[52,53687,1224],{"class":58},[52,53689,53690,53692,53694],{"class":54,"line":600},[52,53691,121],{"class":58},[52,53693,63],{"class":62},[52,53695,77],{"class":58},[43,53697,53699],{"className":360,"code":53698,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVesica\n color=\"#ffffff\"\n radius={0.35}\n />\n\u003C/Shader>\n",[31,53700,53701,53709,53715,53723,53735,53739],{"__ignoreMap":48},[52,53702,53703,53705,53707],{"class":54,"line":55},[52,53704,59],{"class":58},[52,53706,63],{"class":371},[52,53708,77],{"class":58},[52,53710,53711,53713],{"class":54,"line":80},[52,53712,83],{"class":58},[52,53714,53667],{"class":371},[52,53716,53717,53719,53721],{"class":54,"line":108},[52,53718,7351],{"class":66},[52,53720,70],{"class":231},[52,53722,7307],{"class":73},[52,53724,53725,53727,53729,53731,53733],{"class":54,"line":118},[52,53726,7361],{"class":66},[52,53728,70],{"class":231},[52,53730,723],{"class":58},[52,53732,18630],{"class":371},[52,53734,729],{"class":58},[52,53736,53737],{"class":54,"line":594},[52,53738,1224],{"class":58},[52,53740,53741,53743,53745],{"class":54,"line":600},[52,53742,121],{"class":58},[52,53744,63],{"class":371},[52,53746,77],{"class":58},[43,53748,53749],{"className":2507,"code":53698,"language":2509,"meta":48,"style":48},[31,53750,53751,53759,53765,53773,53783,53787],{"__ignoreMap":48},[52,53752,53753,53755,53757],{"class":54,"line":55},[52,53754,59],{"class":58},[52,53756,63],{"class":371},[52,53758,77],{"class":58},[52,53760,53761,53763],{"class":54,"line":80},[52,53762,83],{"class":58},[52,53764,53667],{"class":371},[52,53766,53767,53769,53771],{"class":54,"line":108},[52,53768,7351],{"class":66},[52,53770,70],{"class":58},[52,53772,7307],{"class":73},[52,53774,53775,53777,53779,53781],{"class":54,"line":118},[52,53776,7361],{"class":66},[52,53778,24845],{"class":58},[52,53780,18630],{"class":371},[52,53782,729],{"class":58},[52,53784,53785],{"class":54,"line":594},[52,53786,1224],{"class":58},[52,53788,53789,53791,53793],{"class":54,"line":600},[52,53790,121],{"class":58},[52,53792,63],{"class":371},[52,53794,77],{"class":58},[43,53796,53797],{"className":419,"code":53698,"language":420,"meta":48,"style":48},[31,53798,53799,53807,53813,53821,53833,53837],{"__ignoreMap":48},[52,53800,53801,53803,53805],{"class":54,"line":55},[52,53802,59],{"class":58},[52,53804,63],{"class":371},[52,53806,77],{"class":58},[52,53808,53809,53811],{"class":54,"line":80},[52,53810,83],{"class":58},[52,53812,53667],{"class":371},[52,53814,53815,53817,53819],{"class":54,"line":108},[52,53816,7351],{"class":66},[52,53818,70],{"class":231},[52,53820,7307],{"class":73},[52,53822,53823,53825,53827,53829,53831],{"class":54,"line":118},[52,53824,7361],{"class":66},[52,53826,70],{"class":231},[52,53828,723],{"class":58},[52,53830,18630],{"class":371},[52,53832,729],{"class":58},[52,53834,53835],{"class":54,"line":594},[52,53836,1224],{"class":58},[52,53838,53839,53841,53843],{"class":54,"line":600},[52,53840,121],{"class":58},[52,53842,63],{"class":371},[52,53844,77],{"class":58},[43,53846,53848],{"className":222,"code":53847,"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,53849,53850,53860,53864,53878,53882,53899,53903],{"__ignoreMap":48},[52,53851,53852,53854,53856,53858],{"class":54,"line":55},[52,53853,232],{"class":231},[52,53855,9231],{"class":58},[52,53857,238],{"class":231},[52,53859,9236],{"class":73},[52,53861,53862],{"class":54,"line":80},[52,53863,597],{"emptyLinePlaceholder":171},[52,53865,53866,53868,53870,53872,53874,53876],{"class":54,"line":108},[52,53867,1721],{"class":231},[52,53869,1724],{"class":371},[52,53871,1727],{"class":231},[52,53873,1730],{"class":231},[52,53875,1733],{"class":66},[52,53877,1736],{"class":58},[52,53879,53880],{"class":54,"line":118},[52,53881,1751],{"class":58},[52,53883,53884,53886,53889,53891,53893,53895,53897],{"class":54,"line":594},[52,53885,1756],{"class":58},[52,53887,53888],{"class":73},"'Vesica'",[52,53890,1762],{"class":58},[52,53892,7886],{"class":73},[52,53894,4278],{"class":58},[52,53896,18630],{"class":371},[52,53898,1768],{"class":58},[52,53900,53901],{"class":54,"line":600},[52,53902,1773],{"class":58},[52,53904,53905],{"class":54,"line":606},[52,53906,1778],{"class":58},[156,53908,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":53910},[53911,53912],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vesica",{"title":53628,"description":53636},"docs/components/Vesica","znqWXdLYbS_VACmjY1FbZDgEGQcO7M0AF6r5Q59DK54",{"id":53919,"title":53920,"body":53921,"category":28771,"componentType":20848,"description":53928,"extension":168,"meta":54246,"navigation":171,"path":54247,"requiresChild":171,"seo":54248,"stem":54249,"__hash__":54250},"components/docs/components/Vibrance.md","Vibrance",{"type":8,"value":53922,"toc":54242},[53923,53926,53929,53931,53933,53936,53938,54240],[11,53924,53920],{"id":53925},"vibrance",[15,53927,53928],{},"Selective saturation adjustment protecting skin tones",[26901,53930],{"component":53920},[23,53932,26905],{"id":21503},[26907,53934],{":props":53935},"[{\"name\":\"intensity\",\"type\":\"number\",\"default\":\"0\",\"description\":\"The intensity of the vibrance effect\"}]",[23,53937,26913],{"id":26912},[217,53939,53940,53997,54056,54112,54170],{":tabs":1543},[43,53941,53943],{"className":45,"code":53942,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n :intensity=\"0\"\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,53944,53945,53953,53960,53969,53973,53981,53989],{"__ignoreMap":48},[52,53946,53947,53949,53951],{"class":54,"line":55},[52,53948,59],{"class":58},[52,53950,63],{"class":62},[52,53952,77],{"class":58},[52,53954,53955,53957],{"class":54,"line":80},[52,53956,83],{"class":58},[52,53958,53959],{"class":62},"Vibrance\n",[52,53961,53962,53964,53966],{"class":54,"line":108},[52,53963,17870],{"class":66},[52,53965,70],{"class":58},[52,53967,53968],{"class":73},"\"0\"\n",[52,53970,53971],{"class":54,"line":118},[52,53972,26949],{"class":58},[52,53974,53975,53977,53979],{"class":54,"line":594},[52,53976,2213],{"class":58},[52,53978,2216],{"class":62},[52,53980,105],{"class":58},[52,53982,53983,53985,53987],{"class":54,"line":600},[52,53984,2230],{"class":58},[52,53986,53920],{"class":62},[52,53988,77],{"class":58},[52,53990,53991,53993,53995],{"class":54,"line":606},[52,53992,121],{"class":58},[52,53994,63],{"class":62},[52,53996,77],{"class":58},[43,53998,54000],{"className":360,"code":53999,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CVibrance\n intensity={0}\n >\n \u003CCircle />\n \u003C/Vibrance>\n\u003C/Shader>\n",[31,54001,54002,54010,54016,54028,54032,54040,54048],{"__ignoreMap":48},[52,54003,54004,54006,54008],{"class":54,"line":55},[52,54005,59],{"class":58},[52,54007,63],{"class":371},[52,54009,77],{"class":58},[52,54011,54012,54014],{"class":54,"line":80},[52,54013,83],{"class":58},[52,54015,53959],{"class":371},[52,54017,54018,54020,54022,54024,54026],{"class":54,"line":108},[52,54019,17981],{"class":66},[52,54021,70],{"class":231},[52,54023,723],{"class":58},[52,54025,6387],{"class":371},[52,54027,729],{"class":58},[52,54029,54030],{"class":54,"line":118},[52,54031,26949],{"class":58},[52,54033,54034,54036,54038],{"class":54,"line":594},[52,54035,2213],{"class":58},[52,54037,2216],{"class":371},[52,54039,105],{"class":58},[52,54041,54042,54044,54046],{"class":54,"line":600},[52,54043,2230],{"class":58},[52,54045,53920],{"class":371},[52,54047,77],{"class":58},[52,54049,54050,54052,54054],{"class":54,"line":606},[52,54051,121],{"class":58},[52,54053,63],{"class":371},[52,54055,77],{"class":58},[43,54057,54058],{"className":2507,"code":53999,"language":2509,"meta":48,"style":48},[31,54059,54060,54068,54074,54084,54088,54096,54104],{"__ignoreMap":48},[52,54061,54062,54064,54066],{"class":54,"line":55},[52,54063,59],{"class":58},[52,54065,63],{"class":371},[52,54067,77],{"class":58},[52,54069,54070,54072],{"class":54,"line":80},[52,54071,83],{"class":58},[52,54073,53959],{"class":371},[52,54075,54076,54078,54080,54082],{"class":54,"line":108},[52,54077,17981],{"class":66},[52,54079,24845],{"class":58},[52,54081,6387],{"class":371},[52,54083,729],{"class":58},[52,54085,54086],{"class":54,"line":118},[52,54087,26949],{"class":58},[52,54089,54090,54092,54094],{"class":54,"line":594},[52,54091,2213],{"class":58},[52,54093,2216],{"class":371},[52,54095,105],{"class":58},[52,54097,54098,54100,54102],{"class":54,"line":600},[52,54099,2230],{"class":58},[52,54101,53920],{"class":371},[52,54103,77],{"class":58},[52,54105,54106,54108,54110],{"class":54,"line":606},[52,54107,121],{"class":58},[52,54109,63],{"class":371},[52,54111,77],{"class":58},[43,54113,54114],{"className":419,"code":53999,"language":420,"meta":48,"style":48},[31,54115,54116,54124,54130,54142,54146,54154,54162],{"__ignoreMap":48},[52,54117,54118,54120,54122],{"class":54,"line":55},[52,54119,59],{"class":58},[52,54121,63],{"class":371},[52,54123,77],{"class":58},[52,54125,54126,54128],{"class":54,"line":80},[52,54127,83],{"class":58},[52,54129,53959],{"class":371},[52,54131,54132,54134,54136,54138,54140],{"class":54,"line":108},[52,54133,17981],{"class":66},[52,54135,70],{"class":231},[52,54137,723],{"class":58},[52,54139,6387],{"class":371},[52,54141,729],{"class":58},[52,54143,54144],{"class":54,"line":118},[52,54145,26949],{"class":58},[52,54147,54148,54150,54152],{"class":54,"line":594},[52,54149,2213],{"class":58},[52,54151,2216],{"class":371},[52,54153,105],{"class":58},[52,54155,54156,54158,54160],{"class":54,"line":600},[52,54157,2230],{"class":58},[52,54159,53920],{"class":371},[52,54161,77],{"class":58},[52,54163,54164,54166,54168],{"class":54,"line":606},[52,54165,121],{"class":58},[52,54167,63],{"class":371},[52,54169,77],{"class":58},[43,54171,54173],{"className":222,"code":54172,"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,54174,54175,54185,54189,54203,54207,54220,54228,54232,54236],{"__ignoreMap":48},[52,54176,54177,54179,54181,54183],{"class":54,"line":55},[52,54178,232],{"class":231},[52,54180,9231],{"class":58},[52,54182,238],{"class":231},[52,54184,9236],{"class":73},[52,54186,54187],{"class":54,"line":80},[52,54188,597],{"emptyLinePlaceholder":171},[52,54190,54191,54193,54195,54197,54199,54201],{"class":54,"line":108},[52,54192,1721],{"class":231},[52,54194,1724],{"class":371},[52,54196,1727],{"class":231},[52,54198,1730],{"class":231},[52,54200,1733],{"class":66},[52,54202,1736],{"class":58},[52,54204,54205],{"class":54,"line":118},[52,54206,1751],{"class":58},[52,54208,54209,54211,54214,54216,54218],{"class":54,"line":594},[52,54210,1756],{"class":58},[52,54212,54213],{"class":73},"'Vibrance'",[52,54215,27194],{"class":58},[52,54217,6387],{"class":371},[52,54219,5259],{"class":58},[52,54221,54222,54224,54226],{"class":54,"line":600},[52,54223,4727],{"class":58},[52,54225,2869],{"class":73},[52,54227,2129],{"class":58},[52,54229,54230],{"class":54,"line":606},[52,54231,4744],{"class":58},[52,54233,54234],{"class":54,"line":653},[52,54235,1773],{"class":58},[52,54237,54238],{"class":54,"line":662},[52,54239,1778],{"class":58},[156,54241,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54243},[54244,54245],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vibrance",{"title":53920,"description":53928},"docs/components/Vibrance","Ik5OComNfi2ollDpejGum2TNF2YN0VqloN6iQ7p3Qnk",{"id":54252,"title":54253,"body":54254,"category":27760,"componentType":20842,"description":54261,"extension":168,"meta":54446,"navigation":171,"path":54447,"requiresChild":27763,"seo":54448,"stem":54449,"__hash__":54450},"components/docs/components/VideoTexture.md","VideoTexture",{"type":8,"value":54255,"toc":54442},[54256,54259,54262,54264,54266,54269,54271,54440],[11,54257,54253],{"id":54258},"videotexture",[15,54260,54261],{},"Display a video with customizable playback and object-fit modes",[26901,54263],{"component":54253},[23,54265,26905],{"id":21503},[26907,54267],{":props":54268},"[{\"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,54270,26913],{"id":26912},[217,54272,54273,54302,54330,54358,54386],{":tabs":1543},[43,54274,54276],{"className":45,"code":54275,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVideoTexture />\n\u003C/Shader>\n",[31,54277,54278,54286,54294],{"__ignoreMap":48},[52,54279,54280,54282,54284],{"class":54,"line":55},[52,54281,59],{"class":58},[52,54283,63],{"class":62},[52,54285,77],{"class":58},[52,54287,54288,54290,54292],{"class":54,"line":80},[52,54289,83],{"class":58},[52,54291,54253],{"class":62},[52,54293,105],{"class":58},[52,54295,54296,54298,54300],{"class":54,"line":108},[52,54297,121],{"class":58},[52,54299,63],{"class":62},[52,54301,77],{"class":58},[43,54303,54304],{"className":360,"code":54275,"language":362,"meta":48,"style":48},[31,54305,54306,54314,54322],{"__ignoreMap":48},[52,54307,54308,54310,54312],{"class":54,"line":55},[52,54309,59],{"class":58},[52,54311,63],{"class":371},[52,54313,77],{"class":58},[52,54315,54316,54318,54320],{"class":54,"line":80},[52,54317,83],{"class":58},[52,54319,54253],{"class":371},[52,54321,105],{"class":58},[52,54323,54324,54326,54328],{"class":54,"line":108},[52,54325,121],{"class":58},[52,54327,63],{"class":371},[52,54329,77],{"class":58},[43,54331,54332],{"className":2507,"code":54275,"language":2509,"meta":48,"style":48},[31,54333,54334,54342,54350],{"__ignoreMap":48},[52,54335,54336,54338,54340],{"class":54,"line":55},[52,54337,59],{"class":58},[52,54339,63],{"class":371},[52,54341,77],{"class":58},[52,54343,54344,54346,54348],{"class":54,"line":80},[52,54345,83],{"class":58},[52,54347,54253],{"class":371},[52,54349,105],{"class":58},[52,54351,54352,54354,54356],{"class":54,"line":108},[52,54353,121],{"class":58},[52,54355,63],{"class":371},[52,54357,77],{"class":58},[43,54359,54360],{"className":419,"code":54275,"language":420,"meta":48,"style":48},[31,54361,54362,54370,54378],{"__ignoreMap":48},[52,54363,54364,54366,54368],{"class":54,"line":55},[52,54365,59],{"class":58},[52,54367,63],{"class":371},[52,54369,77],{"class":58},[52,54371,54372,54374,54376],{"class":54,"line":80},[52,54373,83],{"class":58},[52,54375,54253],{"class":371},[52,54377,105],{"class":58},[52,54379,54380,54382,54384],{"class":54,"line":108},[52,54381,121],{"class":58},[52,54383,63],{"class":371},[52,54385,77],{"class":58},[43,54387,54389],{"className":222,"code":54388,"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,54390,54391,54401,54405,54419,54423,54432,54436],{"__ignoreMap":48},[52,54392,54393,54395,54397,54399],{"class":54,"line":55},[52,54394,232],{"class":231},[52,54396,9231],{"class":58},[52,54398,238],{"class":231},[52,54400,9236],{"class":73},[52,54402,54403],{"class":54,"line":80},[52,54404,597],{"emptyLinePlaceholder":171},[52,54406,54407,54409,54411,54413,54415,54417],{"class":54,"line":108},[52,54408,1721],{"class":231},[52,54410,1724],{"class":371},[52,54412,1727],{"class":231},[52,54414,1730],{"class":231},[52,54416,1733],{"class":66},[52,54418,1736],{"class":58},[52,54420,54421],{"class":54,"line":118},[52,54422,1751],{"class":58},[52,54424,54425,54427,54430],{"class":54,"line":594},[52,54426,1756],{"class":58},[52,54428,54429],{"class":73},"'VideoTexture'",[52,54431,2129],{"class":58},[52,54433,54434],{"class":54,"line":600},[52,54435,1773],{"class":58},[52,54437,54438],{"class":54,"line":606},[52,54439,1778],{"class":58},[156,54441,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":54443},[54444,54445],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/videotexture",{"title":54253,"description":54261},"docs/components/VideoTexture","1eSTA-HfTuxe9NQ0hvOlmKz5UHQ3cuIt3GHLXsjiqXs",{"id":54452,"title":54453,"body":54454,"category":27503,"componentType":20848,"description":54461,"extension":168,"meta":54860,"navigation":171,"path":54861,"requiresChild":171,"seo":54862,"stem":54863,"__hash__":54864},"components/docs/components/Vignette.md","Vignette",{"type":8,"value":54455,"toc":54856},[54456,54459,54462,54464,54466,54469,54471,54854],[11,54457,54453],{"id":54458},"vignette",[15,54460,54461],{},"Darkens or tints the edges of the frame, drawing attention toward the center",[26901,54463],{"component":54453},[23,54465,26905],{"id":21503},[26907,54467],{":props":54468},"[{\"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,54470,26913],{"id":26912},[217,54472,54473,54545,54624,54698,54776],{":tabs":1543},[43,54474,54476],{"className":45,"code":54475,"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,54477,54478,54486,54493,54501,54509,54517,54521,54529,54537],{"__ignoreMap":48},[52,54479,54480,54482,54484],{"class":54,"line":55},[52,54481,59],{"class":58},[52,54483,63],{"class":62},[52,54485,77],{"class":58},[52,54487,54488,54490],{"class":54,"line":80},[52,54489,83],{"class":58},[52,54491,54492],{"class":62},"Vignette\n",[52,54494,54495,54497,54499],{"class":54,"line":108},[52,54496,7351],{"class":66},[52,54498,70],{"class":58},[52,54500,16975],{"class":73},[52,54502,54503,54505,54507],{"class":54,"line":118},[52,54504,14901],{"class":66},[52,54506,70],{"class":58},[52,54508,32462],{"class":73},[52,54510,54511,54513,54515],{"class":54,"line":594},[52,54512,17870],{"class":66},[52,54514,70],{"class":58},[52,54516,28827],{"class":73},[52,54518,54519],{"class":54,"line":600},[52,54520,26949],{"class":58},[52,54522,54523,54525,54527],{"class":54,"line":606},[52,54524,2213],{"class":58},[52,54526,2216],{"class":62},[52,54528,105],{"class":58},[52,54530,54531,54533,54535],{"class":54,"line":653},[52,54532,2230],{"class":58},[52,54534,54453],{"class":62},[52,54536,77],{"class":58},[52,54538,54539,54541,54543],{"class":54,"line":662},[52,54540,121],{"class":58},[52,54542,63],{"class":62},[52,54544,77],{"class":58},[43,54546,54548],{"className":360,"code":54547,"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,54549,54550,54558,54564,54572,54584,54596,54600,54608,54616],{"__ignoreMap":48},[52,54551,54552,54554,54556],{"class":54,"line":55},[52,54553,59],{"class":58},[52,54555,63],{"class":371},[52,54557,77],{"class":58},[52,54559,54560,54562],{"class":54,"line":80},[52,54561,83],{"class":58},[52,54563,54492],{"class":371},[52,54565,54566,54568,54570],{"class":54,"line":108},[52,54567,7351],{"class":66},[52,54569,70],{"class":231},[52,54571,16975],{"class":73},[52,54573,54574,54576,54578,54580,54582],{"class":54,"line":118},[52,54575,7361],{"class":66},[52,54577,70],{"class":231},[52,54579,723],{"class":58},[52,54581,5467],{"class":371},[52,54583,729],{"class":58},[52,54585,54586,54588,54590,54592,54594],{"class":54,"line":594},[52,54587,17981],{"class":66},[52,54589,70],{"class":231},[52,54591,723],{"class":58},[52,54593,6391],{"class":371},[52,54595,729],{"class":58},[52,54597,54598],{"class":54,"line":600},[52,54599,26949],{"class":58},[52,54601,54602,54604,54606],{"class":54,"line":606},[52,54603,2213],{"class":58},[52,54605,2216],{"class":371},[52,54607,105],{"class":58},[52,54609,54610,54612,54614],{"class":54,"line":653},[52,54611,2230],{"class":58},[52,54613,54453],{"class":371},[52,54615,77],{"class":58},[52,54617,54618,54620,54622],{"class":54,"line":662},[52,54619,121],{"class":58},[52,54621,63],{"class":371},[52,54623,77],{"class":58},[43,54625,54626],{"className":2507,"code":54547,"language":2509,"meta":48,"style":48},[31,54627,54628,54636,54642,54650,54660,54670,54674,54682,54690],{"__ignoreMap":48},[52,54629,54630,54632,54634],{"class":54,"line":55},[52,54631,59],{"class":58},[52,54633,63],{"class":371},[52,54635,77],{"class":58},[52,54637,54638,54640],{"class":54,"line":80},[52,54639,83],{"class":58},[52,54641,54492],{"class":371},[52,54643,54644,54646,54648],{"class":54,"line":108},[52,54645,7351],{"class":66},[52,54647,70],{"class":58},[52,54649,16975],{"class":73},[52,54651,54652,54654,54656,54658],{"class":54,"line":118},[52,54653,7361],{"class":66},[52,54655,24845],{"class":58},[52,54657,5467],{"class":371},[52,54659,729],{"class":58},[52,54661,54662,54664,54666,54668],{"class":54,"line":594},[52,54663,17981],{"class":66},[52,54665,24845],{"class":58},[52,54667,6391],{"class":371},[52,54669,729],{"class":58},[52,54671,54672],{"class":54,"line":600},[52,54673,26949],{"class":58},[52,54675,54676,54678,54680],{"class":54,"line":606},[52,54677,2213],{"class":58},[52,54679,2216],{"class":371},[52,54681,105],{"class":58},[52,54683,54684,54686,54688],{"class":54,"line":653},[52,54685,2230],{"class":58},[52,54687,54453],{"class":371},[52,54689,77],{"class":58},[52,54691,54692,54694,54696],{"class":54,"line":662},[52,54693,121],{"class":58},[52,54695,63],{"class":371},[52,54697,77],{"class":58},[43,54699,54700],{"className":419,"code":54547,"language":420,"meta":48,"style":48},[31,54701,54702,54710,54716,54724,54736,54748,54752,54760,54768],{"__ignoreMap":48},[52,54703,54704,54706,54708],{"class":54,"line":55},[52,54705,59],{"class":58},[52,54707,63],{"class":371},[52,54709,77],{"class":58},[52,54711,54712,54714],{"class":54,"line":80},[52,54713,83],{"class":58},[52,54715,54492],{"class":371},[52,54717,54718,54720,54722],{"class":54,"line":108},[52,54719,7351],{"class":66},[52,54721,70],{"class":231},[52,54723,16975],{"class":73},[52,54725,54726,54728,54730,54732,54734],{"class":54,"line":118},[52,54727,7361],{"class":66},[52,54729,70],{"class":231},[52,54731,723],{"class":58},[52,54733,5467],{"class":371},[52,54735,729],{"class":58},[52,54737,54738,54740,54742,54744,54746],{"class":54,"line":594},[52,54739,17981],{"class":66},[52,54741,70],{"class":231},[52,54743,723],{"class":58},[52,54745,6391],{"class":371},[52,54747,729],{"class":58},[52,54749,54750],{"class":54,"line":600},[52,54751,26949],{"class":58},[52,54753,54754,54756,54758],{"class":54,"line":606},[52,54755,2213],{"class":58},[52,54757,2216],{"class":371},[52,54759,105],{"class":58},[52,54761,54762,54764,54766],{"class":54,"line":653},[52,54763,2230],{"class":58},[52,54765,54453],{"class":371},[52,54767,77],{"class":58},[52,54769,54770,54772,54774],{"class":54,"line":662},[52,54771,121],{"class":58},[52,54773,63],{"class":371},[52,54775,77],{"class":58},[43,54777,54779],{"className":222,"code":54778,"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,54780,54781,54791,54795,54809,54813,54834,54842,54846,54850],{"__ignoreMap":48},[52,54782,54783,54785,54787,54789],{"class":54,"line":55},[52,54784,232],{"class":231},[52,54786,9231],{"class":58},[52,54788,238],{"class":231},[52,54790,9236],{"class":73},[52,54792,54793],{"class":54,"line":80},[52,54794,597],{"emptyLinePlaceholder":171},[52,54796,54797,54799,54801,54803,54805,54807],{"class":54,"line":108},[52,54798,1721],{"class":231},[52,54800,1724],{"class":371},[52,54802,1727],{"class":231},[52,54804,1730],{"class":231},[52,54806,1733],{"class":66},[52,54808,1736],{"class":58},[52,54810,54811],{"class":54,"line":118},[52,54812,1751],{"class":58},[52,54814,54815,54817,54820,54822,54824,54826,54828,54830,54832],{"class":54,"line":594},[52,54816,1756],{"class":58},[52,54818,54819],{"class":73},"'Vignette'",[52,54821,1762],{"class":58},[52,54823,17534],{"class":73},[52,54825,4278],{"class":58},[52,54827,5467],{"class":371},[52,54829,34623],{"class":58},[52,54831,6391],{"class":371},[52,54833,5259],{"class":58},[52,54835,54836,54838,54840],{"class":54,"line":600},[52,54837,4727],{"class":58},[52,54839,2869],{"class":73},[52,54841,2129],{"class":58},[52,54843,54844],{"class":54,"line":606},[52,54845,4744],{"class":58},[52,54847,54848],{"class":54,"line":653},[52,54849,1773],{"class":58},[52,54851,54852],{"class":54,"line":662},[52,54853,1778],{"class":58},[156,54855,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":54857},[54858,54859],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/vignette",{"title":54453,"description":54461},"docs/components/Vignette","K5QuFufJHBLVcU6YH4ZUFOgn-RZG9NbyY5fDNznNRwo",{"id":54866,"title":54867,"body":54868,"category":27760,"componentType":20842,"description":54875,"extension":168,"meta":55060,"navigation":171,"path":55061,"requiresChild":27763,"seo":55062,"stem":55063,"__hash__":55064},"components/docs/components/Voronoi.md","Voronoi",{"type":8,"value":54869,"toc":55056},[54870,54873,54876,54878,54880,54883,54885,55054],[11,54871,54867],{"id":54872},"voronoi",[15,54874,54875],{},"Cellular pattern where each pixel is colored by its distance to the nearest of many scattered points",[26901,54877],{"component":54867},[23,54879,26905],{"id":21503},[26907,54881],{":props":54882},"[{\"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,54884,26913],{"id":26912},[217,54886,54887,54916,54944,54972,55000],{":tabs":1543},[43,54888,54890],{"className":45,"code":54889,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CVoronoi />\n\u003C/Shader>\n",[31,54891,54892,54900,54908],{"__ignoreMap":48},[52,54893,54894,54896,54898],{"class":54,"line":55},[52,54895,59],{"class":58},[52,54897,63],{"class":62},[52,54899,77],{"class":58},[52,54901,54902,54904,54906],{"class":54,"line":80},[52,54903,83],{"class":58},[52,54905,54867],{"class":62},[52,54907,105],{"class":58},[52,54909,54910,54912,54914],{"class":54,"line":108},[52,54911,121],{"class":58},[52,54913,63],{"class":62},[52,54915,77],{"class":58},[43,54917,54918],{"className":360,"code":54889,"language":362,"meta":48,"style":48},[31,54919,54920,54928,54936],{"__ignoreMap":48},[52,54921,54922,54924,54926],{"class":54,"line":55},[52,54923,59],{"class":58},[52,54925,63],{"class":371},[52,54927,77],{"class":58},[52,54929,54930,54932,54934],{"class":54,"line":80},[52,54931,83],{"class":58},[52,54933,54867],{"class":371},[52,54935,105],{"class":58},[52,54937,54938,54940,54942],{"class":54,"line":108},[52,54939,121],{"class":58},[52,54941,63],{"class":371},[52,54943,77],{"class":58},[43,54945,54946],{"className":2507,"code":54889,"language":2509,"meta":48,"style":48},[31,54947,54948,54956,54964],{"__ignoreMap":48},[52,54949,54950,54952,54954],{"class":54,"line":55},[52,54951,59],{"class":58},[52,54953,63],{"class":371},[52,54955,77],{"class":58},[52,54957,54958,54960,54962],{"class":54,"line":80},[52,54959,83],{"class":58},[52,54961,54867],{"class":371},[52,54963,105],{"class":58},[52,54965,54966,54968,54970],{"class":54,"line":108},[52,54967,121],{"class":58},[52,54969,63],{"class":371},[52,54971,77],{"class":58},[43,54973,54974],{"className":419,"code":54889,"language":420,"meta":48,"style":48},[31,54975,54976,54984,54992],{"__ignoreMap":48},[52,54977,54978,54980,54982],{"class":54,"line":55},[52,54979,59],{"class":58},[52,54981,63],{"class":371},[52,54983,77],{"class":58},[52,54985,54986,54988,54990],{"class":54,"line":80},[52,54987,83],{"class":58},[52,54989,54867],{"class":371},[52,54991,105],{"class":58},[52,54993,54994,54996,54998],{"class":54,"line":108},[52,54995,121],{"class":58},[52,54997,63],{"class":371},[52,54999,77],{"class":58},[43,55001,55003],{"className":222,"code":55002,"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,55004,55005,55015,55019,55033,55037,55046,55050],{"__ignoreMap":48},[52,55006,55007,55009,55011,55013],{"class":54,"line":55},[52,55008,232],{"class":231},[52,55010,9231],{"class":58},[52,55012,238],{"class":231},[52,55014,9236],{"class":73},[52,55016,55017],{"class":54,"line":80},[52,55018,597],{"emptyLinePlaceholder":171},[52,55020,55021,55023,55025,55027,55029,55031],{"class":54,"line":108},[52,55022,1721],{"class":231},[52,55024,1724],{"class":371},[52,55026,1727],{"class":231},[52,55028,1730],{"class":231},[52,55030,1733],{"class":66},[52,55032,1736],{"class":58},[52,55034,55035],{"class":54,"line":118},[52,55036,1751],{"class":58},[52,55038,55039,55041,55044],{"class":54,"line":594},[52,55040,1756],{"class":58},[52,55042,55043],{"class":73},"'Voronoi'",[52,55045,2129],{"class":58},[52,55047,55048],{"class":54,"line":600},[52,55049,1773],{"class":58},[52,55051,55052],{"class":54,"line":606},[52,55053,1778],{"class":58},[156,55055,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55057},[55058,55059],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/voronoi",{"title":54867,"description":54875},"docs/components/Voronoi","1IdyNREIVtuawHWHkQnyWY-tlIzmI-s1x8CqU9xdNPQ",{"id":55066,"title":55067,"body":55068,"category":29105,"componentType":20848,"description":55075,"extension":168,"meta":55336,"navigation":171,"path":55337,"requiresChild":171,"seo":55338,"stem":55339,"__hash__":55340},"components/docs/components/WaveDistortion.md","WaveDistortion",{"type":8,"value":55069,"toc":55332},[55070,55073,55076,55078,55080,55083,55085,55330],[11,55071,55067],{"id":55072},"wavedistortion",[15,55074,55075],{},"Wave-based distortion with multiple waveform types",[26901,55077],{"component":55067},[23,55079,26905],{"id":21503},[26907,55081],{":props":55082},"[{\"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,55084,26913],{"id":26912},[217,55086,55087,55132,55176,55220,55264],{":tabs":1543},[43,55088,55090],{"className":45,"code":55089,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWaveDistortion>\n \u003CCircle />\n \u003C/WaveDistortion>\n\u003C/Shader>\n",[31,55091,55092,55100,55108,55116,55124],{"__ignoreMap":48},[52,55093,55094,55096,55098],{"class":54,"line":55},[52,55095,59],{"class":58},[52,55097,63],{"class":62},[52,55099,77],{"class":58},[52,55101,55102,55104,55106],{"class":54,"line":80},[52,55103,83],{"class":58},[52,55105,55067],{"class":62},[52,55107,77],{"class":58},[52,55109,55110,55112,55114],{"class":54,"line":108},[52,55111,2213],{"class":58},[52,55113,2216],{"class":62},[52,55115,105],{"class":58},[52,55117,55118,55120,55122],{"class":54,"line":118},[52,55119,2230],{"class":58},[52,55121,55067],{"class":62},[52,55123,77],{"class":58},[52,55125,55126,55128,55130],{"class":54,"line":594},[52,55127,121],{"class":58},[52,55129,63],{"class":62},[52,55131,77],{"class":58},[43,55133,55134],{"className":360,"code":55089,"language":362,"meta":48,"style":48},[31,55135,55136,55144,55152,55160,55168],{"__ignoreMap":48},[52,55137,55138,55140,55142],{"class":54,"line":55},[52,55139,59],{"class":58},[52,55141,63],{"class":371},[52,55143,77],{"class":58},[52,55145,55146,55148,55150],{"class":54,"line":80},[52,55147,83],{"class":58},[52,55149,55067],{"class":371},[52,55151,77],{"class":58},[52,55153,55154,55156,55158],{"class":54,"line":108},[52,55155,2213],{"class":58},[52,55157,2216],{"class":371},[52,55159,105],{"class":58},[52,55161,55162,55164,55166],{"class":54,"line":118},[52,55163,2230],{"class":58},[52,55165,55067],{"class":371},[52,55167,77],{"class":58},[52,55169,55170,55172,55174],{"class":54,"line":594},[52,55171,121],{"class":58},[52,55173,63],{"class":371},[52,55175,77],{"class":58},[43,55177,55178],{"className":2507,"code":55089,"language":2509,"meta":48,"style":48},[31,55179,55180,55188,55196,55204,55212],{"__ignoreMap":48},[52,55181,55182,55184,55186],{"class":54,"line":55},[52,55183,59],{"class":58},[52,55185,63],{"class":371},[52,55187,77],{"class":58},[52,55189,55190,55192,55194],{"class":54,"line":80},[52,55191,83],{"class":58},[52,55193,55067],{"class":371},[52,55195,77],{"class":58},[52,55197,55198,55200,55202],{"class":54,"line":108},[52,55199,2213],{"class":58},[52,55201,2216],{"class":371},[52,55203,105],{"class":58},[52,55205,55206,55208,55210],{"class":54,"line":118},[52,55207,2230],{"class":58},[52,55209,55067],{"class":371},[52,55211,77],{"class":58},[52,55213,55214,55216,55218],{"class":54,"line":594},[52,55215,121],{"class":58},[52,55217,63],{"class":371},[52,55219,77],{"class":58},[43,55221,55222],{"className":419,"code":55089,"language":420,"meta":48,"style":48},[31,55223,55224,55232,55240,55248,55256],{"__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,55067],{"class":371},[52,55239,77],{"class":58},[52,55241,55242,55244,55246],{"class":54,"line":108},[52,55243,2213],{"class":58},[52,55245,2216],{"class":371},[52,55247,105],{"class":58},[52,55249,55250,55252,55254],{"class":54,"line":118},[52,55251,2230],{"class":58},[52,55253,55067],{"class":371},[52,55255,77],{"class":58},[52,55257,55258,55260,55262],{"class":54,"line":594},[52,55259,121],{"class":58},[52,55261,63],{"class":371},[52,55263,77],{"class":58},[43,55265,55267],{"className":222,"code":55266,"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,55268,55269,55279,55283,55297,55301,55310,55318,55322,55326],{"__ignoreMap":48},[52,55270,55271,55273,55275,55277],{"class":54,"line":55},[52,55272,232],{"class":231},[52,55274,9231],{"class":58},[52,55276,238],{"class":231},[52,55278,9236],{"class":73},[52,55280,55281],{"class":54,"line":80},[52,55282,597],{"emptyLinePlaceholder":171},[52,55284,55285,55287,55289,55291,55293,55295],{"class":54,"line":108},[52,55286,1721],{"class":231},[52,55288,1724],{"class":371},[52,55290,1727],{"class":231},[52,55292,1730],{"class":231},[52,55294,1733],{"class":66},[52,55296,1736],{"class":58},[52,55298,55299],{"class":54,"line":118},[52,55300,1751],{"class":58},[52,55302,55303,55305,55308],{"class":54,"line":594},[52,55304,1756],{"class":58},[52,55306,55307],{"class":73},"'WaveDistortion'",[52,55309,4722],{"class":58},[52,55311,55312,55314,55316],{"class":54,"line":600},[52,55313,4727],{"class":58},[52,55315,2869],{"class":73},[52,55317,2129],{"class":58},[52,55319,55320],{"class":54,"line":606},[52,55321,4744],{"class":58},[52,55323,55324],{"class":54,"line":653},[52,55325,1773],{"class":58},[52,55327,55328],{"class":54,"line":662},[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/wavedistortion",{"title":55067,"description":55075},"docs/components/WaveDistortion","jf7FHmimnDh0jsEzTfmd3pXmsPeMGlZi69HhW0cLejc",{"id":55342,"title":55343,"body":55344,"category":27760,"componentType":20842,"description":55351,"extension":168,"meta":55536,"navigation":171,"path":55537,"requiresChild":27763,"seo":55538,"stem":55539,"__hash__":55540},"components/docs/components/Weave.md","Weave",{"type":8,"value":55345,"toc":55532},[55346,55349,55352,55354,55356,55359,55361,55530],[11,55347,55343],{"id":55348},"weave",[15,55350,55351],{},"Interlaced textile weave pattern with two thread colors going over and under each other",[26901,55353],{"component":55343},[23,55355,26905],{"id":21503},[26907,55357],{":props":55358},"[{\"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,55360,26913],{"id":26912},[217,55362,55363,55392,55420,55448,55476],{":tabs":1543},[43,55364,55366],{"className":45,"code":55365,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWeave />\n\u003C/Shader>\n",[31,55367,55368,55376,55384],{"__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,105],{"class":58},[52,55385,55386,55388,55390],{"class":54,"line":108},[52,55387,121],{"class":58},[52,55389,63],{"class":62},[52,55391,77],{"class":58},[43,55393,55394],{"className":360,"code":55365,"language":362,"meta":48,"style":48},[31,55395,55396,55404,55412],{"__ignoreMap":48},[52,55397,55398,55400,55402],{"class":54,"line":55},[52,55399,59],{"class":58},[52,55401,63],{"class":371},[52,55403,77],{"class":58},[52,55405,55406,55408,55410],{"class":54,"line":80},[52,55407,83],{"class":58},[52,55409,55343],{"class":371},[52,55411,105],{"class":58},[52,55413,55414,55416,55418],{"class":54,"line":108},[52,55415,121],{"class":58},[52,55417,63],{"class":371},[52,55419,77],{"class":58},[43,55421,55422],{"className":2507,"code":55365,"language":2509,"meta":48,"style":48},[31,55423,55424,55432,55440],{"__ignoreMap":48},[52,55425,55426,55428,55430],{"class":54,"line":55},[52,55427,59],{"class":58},[52,55429,63],{"class":371},[52,55431,77],{"class":58},[52,55433,55434,55436,55438],{"class":54,"line":80},[52,55435,83],{"class":58},[52,55437,55343],{"class":371},[52,55439,105],{"class":58},[52,55441,55442,55444,55446],{"class":54,"line":108},[52,55443,121],{"class":58},[52,55445,63],{"class":371},[52,55447,77],{"class":58},[43,55449,55450],{"className":419,"code":55365,"language":420,"meta":48,"style":48},[31,55451,55452,55460,55468],{"__ignoreMap":48},[52,55453,55454,55456,55458],{"class":54,"line":55},[52,55455,59],{"class":58},[52,55457,63],{"class":371},[52,55459,77],{"class":58},[52,55461,55462,55464,55466],{"class":54,"line":80},[52,55463,83],{"class":58},[52,55465,55343],{"class":371},[52,55467,105],{"class":58},[52,55469,55470,55472,55474],{"class":54,"line":108},[52,55471,121],{"class":58},[52,55473,63],{"class":371},[52,55475,77],{"class":58},[43,55477,55479],{"className":222,"code":55478,"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,55480,55481,55491,55495,55509,55513,55522,55526],{"__ignoreMap":48},[52,55482,55483,55485,55487,55489],{"class":54,"line":55},[52,55484,232],{"class":231},[52,55486,9231],{"class":58},[52,55488,238],{"class":231},[52,55490,9236],{"class":73},[52,55492,55493],{"class":54,"line":80},[52,55494,597],{"emptyLinePlaceholder":171},[52,55496,55497,55499,55501,55503,55505,55507],{"class":54,"line":108},[52,55498,1721],{"class":231},[52,55500,1724],{"class":371},[52,55502,1727],{"class":231},[52,55504,1730],{"class":231},[52,55506,1733],{"class":66},[52,55508,1736],{"class":58},[52,55510,55511],{"class":54,"line":118},[52,55512,1751],{"class":58},[52,55514,55515,55517,55520],{"class":54,"line":594},[52,55516,1756],{"class":58},[52,55518,55519],{"class":73},"'Weave'",[52,55521,2129],{"class":58},[52,55523,55524],{"class":54,"line":600},[52,55525,1773],{"class":58},[52,55527,55528],{"class":54,"line":606},[52,55529,1778],{"class":58},[156,55531,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55533},[55534,55535],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/weave",{"title":55343,"description":55351},"docs/components/Weave","WVGpU9gnalqBI5IMvDGQR4KlWvqmrNqqjjGQVJFOVBo",{"id":55542,"title":55543,"body":55544,"category":27760,"componentType":20842,"description":55551,"extension":168,"meta":55736,"navigation":171,"path":55737,"requiresChild":27763,"seo":55738,"stem":55739,"__hash__":55740},"components/docs/components/WebcamTexture.md","WebcamTexture",{"type":8,"value":55545,"toc":55732},[55546,55549,55552,55554,55556,55559,55561,55730],[11,55547,55543],{"id":55548},"webcamtexture",[15,55550,55551],{},"Display a live webcam feed with customizable object-fit modes",[26901,55553],{"component":55543},[23,55555,26905],{"id":21503},[26907,55557],{":props":55558},"[{\"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,55560,26913],{"id":26912},[217,55562,55563,55592,55620,55648,55676],{":tabs":1543},[43,55564,55566],{"className":45,"code":55565,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CWebcamTexture />\n\u003C/Shader>\n",[31,55567,55568,55576,55584],{"__ignoreMap":48},[52,55569,55570,55572,55574],{"class":54,"line":55},[52,55571,59],{"class":58},[52,55573,63],{"class":62},[52,55575,77],{"class":58},[52,55577,55578,55580,55582],{"class":54,"line":80},[52,55579,83],{"class":58},[52,55581,55543],{"class":62},[52,55583,105],{"class":58},[52,55585,55586,55588,55590],{"class":54,"line":108},[52,55587,121],{"class":58},[52,55589,63],{"class":62},[52,55591,77],{"class":58},[43,55593,55594],{"className":360,"code":55565,"language":362,"meta":48,"style":48},[31,55595,55596,55604,55612],{"__ignoreMap":48},[52,55597,55598,55600,55602],{"class":54,"line":55},[52,55599,59],{"class":58},[52,55601,63],{"class":371},[52,55603,77],{"class":58},[52,55605,55606,55608,55610],{"class":54,"line":80},[52,55607,83],{"class":58},[52,55609,55543],{"class":371},[52,55611,105],{"class":58},[52,55613,55614,55616,55618],{"class":54,"line":108},[52,55615,121],{"class":58},[52,55617,63],{"class":371},[52,55619,77],{"class":58},[43,55621,55622],{"className":2507,"code":55565,"language":2509,"meta":48,"style":48},[31,55623,55624,55632,55640],{"__ignoreMap":48},[52,55625,55626,55628,55630],{"class":54,"line":55},[52,55627,59],{"class":58},[52,55629,63],{"class":371},[52,55631,77],{"class":58},[52,55633,55634,55636,55638],{"class":54,"line":80},[52,55635,83],{"class":58},[52,55637,55543],{"class":371},[52,55639,105],{"class":58},[52,55641,55642,55644,55646],{"class":54,"line":108},[52,55643,121],{"class":58},[52,55645,63],{"class":371},[52,55647,77],{"class":58},[43,55649,55650],{"className":419,"code":55565,"language":420,"meta":48,"style":48},[31,55651,55652,55660,55668],{"__ignoreMap":48},[52,55653,55654,55656,55658],{"class":54,"line":55},[52,55655,59],{"class":58},[52,55657,63],{"class":371},[52,55659,77],{"class":58},[52,55661,55662,55664,55666],{"class":54,"line":80},[52,55663,83],{"class":58},[52,55665,55543],{"class":371},[52,55667,105],{"class":58},[52,55669,55670,55672,55674],{"class":54,"line":108},[52,55671,121],{"class":58},[52,55673,63],{"class":371},[52,55675,77],{"class":58},[43,55677,55679],{"className":222,"code":55678,"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,55680,55681,55691,55695,55709,55713,55722,55726],{"__ignoreMap":48},[52,55682,55683,55685,55687,55689],{"class":54,"line":55},[52,55684,232],{"class":231},[52,55686,9231],{"class":58},[52,55688,238],{"class":231},[52,55690,9236],{"class":73},[52,55692,55693],{"class":54,"line":80},[52,55694,597],{"emptyLinePlaceholder":171},[52,55696,55697,55699,55701,55703,55705,55707],{"class":54,"line":108},[52,55698,1721],{"class":231},[52,55700,1724],{"class":371},[52,55702,1727],{"class":231},[52,55704,1730],{"class":231},[52,55706,1733],{"class":66},[52,55708,1736],{"class":58},[52,55710,55711],{"class":54,"line":118},[52,55712,1751],{"class":58},[52,55714,55715,55717,55720],{"class":54,"line":594},[52,55716,1756],{"class":58},[52,55718,55719],{"class":73},"'WebcamTexture'",[52,55721,2129],{"class":58},[52,55723,55724],{"class":54,"line":600},[52,55725,1773],{"class":58},[52,55727,55728],{"class":54,"line":606},[52,55729,1778],{"class":58},[156,55731,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":55733},[55734,55735],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/webcamtexture",{"title":55543,"description":55551},"docs/components/WebcamTexture","IbiRbpX_ognGllxXOjcP5eWcXflyp7thizmXlviq7nQ",{"id":55742,"title":55743,"body":55744,"category":27225,"componentType":20848,"description":55751,"extension":168,"meta":56068,"navigation":171,"path":56069,"requiresChild":171,"seo":56070,"stem":56071,"__hash__":56072},"components/docs/components/ZoomBlur.md","ZoomBlur",{"type":8,"value":55745,"toc":56064},[55746,55749,55752,55754,55756,55759,55761,56062],[11,55747,55743],{"id":55748},"zoomblur",[15,55750,55751],{},"Radial zoom blur expanding from a center point",[26901,55753],{"component":55743},[23,55755,26905],{"id":21503},[26907,55757],{":props":55758},"[{\"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,55760,26913],{"id":26912},[217,55762,55763,55819,55878,55934,55992],{":tabs":1543},[43,55764,55766],{"className":45,"code":55765,"language":47,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n :intensity=\"30\"\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,55767,55768,55776,55783,55791,55795,55803,55811],{"__ignoreMap":48},[52,55769,55770,55772,55774],{"class":54,"line":55},[52,55771,59],{"class":58},[52,55773,63],{"class":62},[52,55775,77],{"class":58},[52,55777,55778,55780],{"class":54,"line":80},[52,55779,83],{"class":58},[52,55781,55782],{"class":62},"ZoomBlur\n",[52,55784,55785,55787,55789],{"class":54,"line":108},[52,55786,17870],{"class":66},[52,55788,70],{"class":58},[52,55790,33488],{"class":73},[52,55792,55793],{"class":54,"line":118},[52,55794,26949],{"class":58},[52,55796,55797,55799,55801],{"class":54,"line":594},[52,55798,2213],{"class":58},[52,55800,2216],{"class":62},[52,55802,105],{"class":58},[52,55804,55805,55807,55809],{"class":54,"line":600},[52,55806,2230],{"class":58},[52,55808,55743],{"class":62},[52,55810,77],{"class":58},[52,55812,55813,55815,55817],{"class":54,"line":606},[52,55814,121],{"class":58},[52,55816,63],{"class":62},[52,55818,77],{"class":58},[43,55820,55822],{"className":360,"code":55821,"language":362,"meta":48,"style":48},"\u003CShader>\n \u003CZoomBlur\n intensity={30}\n >\n \u003CCircle />\n \u003C/ZoomBlur>\n\u003C/Shader>\n",[31,55823,55824,55832,55838,55850,55854,55862,55870],{"__ignoreMap":48},[52,55825,55826,55828,55830],{"class":54,"line":55},[52,55827,59],{"class":58},[52,55829,63],{"class":371},[52,55831,77],{"class":58},[52,55833,55834,55836],{"class":54,"line":80},[52,55835,83],{"class":58},[52,55837,55782],{"class":371},[52,55839,55840,55842,55844,55846,55848],{"class":54,"line":108},[52,55841,17981],{"class":66},[52,55843,70],{"class":231},[52,55845,723],{"class":58},[52,55847,13194],{"class":371},[52,55849,729],{"class":58},[52,55851,55852],{"class":54,"line":118},[52,55853,26949],{"class":58},[52,55855,55856,55858,55860],{"class":54,"line":594},[52,55857,2213],{"class":58},[52,55859,2216],{"class":371},[52,55861,105],{"class":58},[52,55863,55864,55866,55868],{"class":54,"line":600},[52,55865,2230],{"class":58},[52,55867,55743],{"class":371},[52,55869,77],{"class":58},[52,55871,55872,55874,55876],{"class":54,"line":606},[52,55873,121],{"class":58},[52,55875,63],{"class":371},[52,55877,77],{"class":58},[43,55879,55880],{"className":2507,"code":55821,"language":2509,"meta":48,"style":48},[31,55881,55882,55890,55896,55906,55910,55918,55926],{"__ignoreMap":48},[52,55883,55884,55886,55888],{"class":54,"line":55},[52,55885,59],{"class":58},[52,55887,63],{"class":371},[52,55889,77],{"class":58},[52,55891,55892,55894],{"class":54,"line":80},[52,55893,83],{"class":58},[52,55895,55782],{"class":371},[52,55897,55898,55900,55902,55904],{"class":54,"line":108},[52,55899,17981],{"class":66},[52,55901,24845],{"class":58},[52,55903,13194],{"class":371},[52,55905,729],{"class":58},[52,55907,55908],{"class":54,"line":118},[52,55909,26949],{"class":58},[52,55911,55912,55914,55916],{"class":54,"line":594},[52,55913,2213],{"class":58},[52,55915,2216],{"class":371},[52,55917,105],{"class":58},[52,55919,55920,55922,55924],{"class":54,"line":600},[52,55921,2230],{"class":58},[52,55923,55743],{"class":371},[52,55925,77],{"class":58},[52,55927,55928,55930,55932],{"class":54,"line":606},[52,55929,121],{"class":58},[52,55931,63],{"class":371},[52,55933,77],{"class":58},[43,55935,55936],{"className":419,"code":55821,"language":420,"meta":48,"style":48},[31,55937,55938,55946,55952,55964,55968,55976,55984],{"__ignoreMap":48},[52,55939,55940,55942,55944],{"class":54,"line":55},[52,55941,59],{"class":58},[52,55943,63],{"class":371},[52,55945,77],{"class":58},[52,55947,55948,55950],{"class":54,"line":80},[52,55949,83],{"class":58},[52,55951,55782],{"class":371},[52,55953,55954,55956,55958,55960,55962],{"class":54,"line":108},[52,55955,17981],{"class":66},[52,55957,70],{"class":231},[52,55959,723],{"class":58},[52,55961,13194],{"class":371},[52,55963,729],{"class":58},[52,55965,55966],{"class":54,"line":118},[52,55967,26949],{"class":58},[52,55969,55970,55972,55974],{"class":54,"line":594},[52,55971,2213],{"class":58},[52,55973,2216],{"class":371},[52,55975,105],{"class":58},[52,55977,55978,55980,55982],{"class":54,"line":600},[52,55979,2230],{"class":58},[52,55981,55743],{"class":371},[52,55983,77],{"class":58},[52,55985,55986,55988,55990],{"class":54,"line":606},[52,55987,121],{"class":58},[52,55989,63],{"class":371},[52,55991,77],{"class":58},[43,55993,55995],{"className":222,"code":55994,"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,55996,55997,56007,56011,56025,56029,56042,56050,56054,56058],{"__ignoreMap":48},[52,55998,55999,56001,56003,56005],{"class":54,"line":55},[52,56000,232],{"class":231},[52,56002,9231],{"class":58},[52,56004,238],{"class":231},[52,56006,9236],{"class":73},[52,56008,56009],{"class":54,"line":80},[52,56010,597],{"emptyLinePlaceholder":171},[52,56012,56013,56015,56017,56019,56021,56023],{"class":54,"line":108},[52,56014,1721],{"class":231},[52,56016,1724],{"class":371},[52,56018,1727],{"class":231},[52,56020,1730],{"class":231},[52,56022,1733],{"class":66},[52,56024,1736],{"class":58},[52,56026,56027],{"class":54,"line":118},[52,56028,1751],{"class":58},[52,56030,56031,56033,56036,56038,56040],{"class":54,"line":594},[52,56032,1756],{"class":58},[52,56034,56035],{"class":73},"'ZoomBlur'",[52,56037,27194],{"class":58},[52,56039,13194],{"class":371},[52,56041,5259],{"class":58},[52,56043,56044,56046,56048],{"class":54,"line":600},[52,56045,4727],{"class":58},[52,56047,2869],{"class":73},[52,56049,2129],{"class":58},[52,56051,56052],{"class":54,"line":606},[52,56053,4744],{"class":58},[52,56055,56056],{"class":54,"line":653},[52,56057,1773],{"class":58},[52,56059,56060],{"class":54,"line":662},[52,56061,1778],{"class":58},[156,56063,1900],{},{"title":48,"searchDepth":80,"depth":80,"links":56065},[56066,56067],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},"/docs/components/zoomblur",{"title":55743,"description":55751},"docs/components/ZoomBlur","v_JblfzQTK0VPZ49GkIFdM9CFOG6zbFXH1aHUMxrkHM",{"isPro":27763,"error":56074},"Not authenticated",{"id":36900,"title":36901,"body":56076,"category":30161,"componentType":20842,"description":36909,"extension":168,"meta":56262,"navigation":171,"path":37095,"requiresChild":27763,"seo":56263,"stem":37097,"__hash__":37098},{"type":8,"value":56077,"toc":56258},[56078,56080,56082,56084,56086,56088,56090,56256],[11,56079,36901],{"id":36906},[15,56081,36909],{},[26901,56083],{"component":36901},[23,56085,26905],{"id":21503},[26907,56087],{":props":36916},[23,56089,26913],{"id":26912},[217,56091,56092,56120,56148,56176,56204],{":tabs":1543},[43,56093,56094],{"className":45,"code":36923,"language":47,"meta":48,"style":48},[31,56095,56096,56104,56112],{"__ignoreMap":48},[52,56097,56098,56100,56102],{"class":54,"line":55},[52,56099,59],{"class":58},[52,56101,63],{"class":62},[52,56103,77],{"class":58},[52,56105,56106,56108,56110],{"class":54,"line":80},[52,56107,83],{"class":58},[52,56109,36901],{"class":62},[52,56111,105],{"class":58},[52,56113,56114,56116,56118],{"class":54,"line":108},[52,56115,121],{"class":58},[52,56117,63],{"class":62},[52,56119,77],{"class":58},[43,56121,56122],{"className":360,"code":36923,"language":362,"meta":48,"style":48},[31,56123,56124,56132,56140],{"__ignoreMap":48},[52,56125,56126,56128,56130],{"class":54,"line":55},[52,56127,59],{"class":58},[52,56129,63],{"class":371},[52,56131,77],{"class":58},[52,56133,56134,56136,56138],{"class":54,"line":80},[52,56135,83],{"class":58},[52,56137,36901],{"class":371},[52,56139,105],{"class":58},[52,56141,56142,56144,56146],{"class":54,"line":108},[52,56143,121],{"class":58},[52,56145,63],{"class":371},[52,56147,77],{"class":58},[43,56149,56150],{"className":2507,"code":36923,"language":2509,"meta":48,"style":48},[31,56151,56152,56160,56168],{"__ignoreMap":48},[52,56153,56154,56156,56158],{"class":54,"line":55},[52,56155,59],{"class":58},[52,56157,63],{"class":371},[52,56159,77],{"class":58},[52,56161,56162,56164,56166],{"class":54,"line":80},[52,56163,83],{"class":58},[52,56165,36901],{"class":371},[52,56167,105],{"class":58},[52,56169,56170,56172,56174],{"class":54,"line":108},[52,56171,121],{"class":58},[52,56173,63],{"class":371},[52,56175,77],{"class":58},[43,56177,56178],{"className":419,"code":36923,"language":420,"meta":48,"style":48},[31,56179,56180,56188,56196],{"__ignoreMap":48},[52,56181,56182,56184,56186],{"class":54,"line":55},[52,56183,59],{"class":58},[52,56185,63],{"class":371},[52,56187,77],{"class":58},[52,56189,56190,56192,56194],{"class":54,"line":80},[52,56191,83],{"class":58},[52,56193,36901],{"class":371},[52,56195,105],{"class":58},[52,56197,56198,56200,56202],{"class":54,"line":108},[52,56199,121],{"class":58},[52,56201,63],{"class":371},[52,56203,77],{"class":58},[43,56205,56206],{"className":222,"code":37036,"language":224,"meta":48,"style":48},[31,56207,56208,56218,56222,56236,56240,56248,56252],{"__ignoreMap":48},[52,56209,56210,56212,56214,56216],{"class":54,"line":55},[52,56211,232],{"class":231},[52,56213,9231],{"class":58},[52,56215,238],{"class":231},[52,56217,9236],{"class":73},[52,56219,56220],{"class":54,"line":80},[52,56221,597],{"emptyLinePlaceholder":171},[52,56223,56224,56226,56228,56230,56232,56234],{"class":54,"line":108},[52,56225,1721],{"class":231},[52,56227,1724],{"class":371},[52,56229,1727],{"class":231},[52,56231,1730],{"class":231},[52,56233,1733],{"class":66},[52,56235,1736],{"class":58},[52,56237,56238],{"class":54,"line":118},[52,56239,1751],{"class":58},[52,56241,56242,56244,56246],{"class":54,"line":594},[52,56243,1756],{"class":58},[52,56245,37077],{"class":73},[52,56247,2129],{"class":58},[52,56249,56250],{"class":54,"line":600},[52,56251,1773],{"class":58},[52,56253,56254],{"class":54,"line":606},[52,56255,1778],{"class":58},[156,56257,27498],{},{"title":48,"searchDepth":80,"depth":80,"links":56259},[56260,56261],{"id":21503,"depth":80,"text":26905},{"id":26912,"depth":80,"text":26913},{},{"title":36901,"description":36909},[56265,56266],{"title":36701,"path":36895,"stem":36897,"children":-1},{"title":37101,"path":37371,"stem":37373,"children":-1},1776745903340]